slider change video (#225)

celluloid-camp · Oct 31, 2023 · 4f76b4b · 4f76b4b
1 parent dc79006
commit 4f76b4b
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 31 deletions.
diff --git a/apps/frontend/src/components/annotation/DurationSlider.tsx b/apps/frontend/src/components/annotation/DurationSlider.tsx
@@ -6,6 +6,7 @@ import Slider, { SliderValueLabelProps } from "@mui/material/Slider";
 import Tooltip, { tooltipClasses, TooltipProps } from "@mui/material/Tooltip";
 import * as React from "react";
 
+import { useVideoPlayerSeekEvent } from "~hooks/use-video-player";
 import { formatDuration } from "~utils/DurationUtils";
 
 type DurationSliderProps = {
@@ -49,8 +50,14 @@ export const DurationSlider: React.FC<DurationSliderProps> = ({
 }) => {
   const [value, setValue] = React.useState<number[]>([startTime, stopTime]);
 
+  const [lastActiveThumb, setLastActiveThumb] = React.useState<
+    number | undefined
+  >();
+
+  const dispatcher = useVideoPlayerSeekEvent();
+
   const handleChange = (
-    _event: Event | React.MouseEvent,
+    _event: React.SyntheticEvent | Event,
     newValue: number | number[],
     activeThumb: number
   ) => {
@@ -69,9 +76,22 @@ export const DurationSlider: React.FC<DurationSliderProps> = ({
     } else {
       setValue(newValue as number[]);
     }
+    setLastActiveThumb(activeThumb);
     onChange(newValue[0], newValue[1]);
   };
 
+  const handleChangeCommitted = (
+    _event: React.SyntheticEvent | Event,
+    newValue: number | number[]
+  ) => {
+    if (lastActiveThumb != undefined && Array.isArray(newValue)) {
+      const value = newValue[lastActiveThumb];
+      dispatcher({
+        time: value,
+      });
+    }
+  };
+
   return (
     <Grid container spacing={2} alignItems="center">
       <Stack direction={"row"}>
@@ -99,6 +119,7 @@ export const DurationSlider: React.FC<DurationSliderProps> = ({
           value={value}
           onChange={handleChange}
           valueLabelFormat={formatDuration}
+          onChangeCommitted={handleChangeCommitted}
           step={1}
           size="small"
           valueLabelDisplay="on"

diff --git a/apps/frontend/src/components/project/VideoPlayer.tsx b/apps/frontend/src/components/project/VideoPlayer.tsx
@@ -9,7 +9,10 @@ import {
   useState,
 } from "react";
 
-import { useVideoPlayerEvent } from "~hooks/use-video-player";
+import {
+  useVideoPlayerEvent,
+  useVideoPlayerSeekEvent,
+} from "~hooks/use-video-player";
 
 import { useSetVideoPlayerProgress } from "./useVideoPlayer";
 
@@ -20,40 +23,20 @@ interface VideoPlayerProps {
 export const VideoPlayer = forwardRef(({ url }: VideoPlayerProps, ref) => {
   const playerRef = useRef<ReactPlayer>(null);
   const [isReady, setIsReady] = useState(false);
-  const skipFirstCleanup = useRef(true);
 
   const setVideoPlayerProgress = useSetVideoPlayerProgress();
 
   useImperativeHandle(ref, () => playerRef.current);
 
-  // useEffect(() => {
-  //   return () => {
-  //     if (skipFirstCleanup.current) {
-  //       skipFirstCleanup.current = false;
-  //       return;
-  //     }
-
-  //     const scriptToRemove = Array.from(
-  //       document.querySelectorAll("script")
-  //     ).find((s) => s.src && s.src.includes("peertube"));
-
-  //     scriptToRemove?.remove();
-  //     window["PeerTubePlayer"] = null;
-  //     const peerTubeContainer = document.getElementById("peerTubeContainer");
-  //     peerTubeContainer?.remove();
-  //     console.log("unload peertube");
-  //   };
-  // }, []);
-
   const dispatcher = useVideoPlayerEvent();
 
-  const handleReady = (player: ReactPlayer) => {
-    console.log("ready");
-    // player.forceUpdate()
-    // console.log("getCurrentTime", player.getCurrentTime());
-    // console.log("getSecondsLoaded", player.getSecondsLoaded());
-    // console.log("getDuration", player.getDuration());
-    // setIsReady(true);
+  useVideoPlayerSeekEvent((event) => {
+    if (playerRef.current && event.time && isReady) {
+      playerRef.current?.seekTo(event.time);
+    }
+  });
+
+  const handleReady = () => {
     // dispatcher({
     //   state: "READY",
     //   progress: 0,

diff --git a/apps/frontend/src/hooks/use-video-player.ts b/apps/frontend/src/hooks/use-video-player.ts
@@ -1,9 +1,9 @@
 import useEvent from "react-use-event";
 
-export const PlayerEventName = "PlayerEvent";
+export const PlayerEventName = "VideoPlayerEvent";
 
 export type VideoPlayerEvent = {
-  type: "PlayerEvent",
+  type: "VideoPlayerEvent",
   state:
   | "READY"
   | "START"
@@ -20,3 +20,15 @@ export type VideoPlayerEvent = {
 
 export const useVideoPlayerEvent = (onEvent?: (event: VideoPlayerEvent) => void) =>
   useEvent<VideoPlayerEvent>(PlayerEventName, onEvent);
+
+
+export const PlayerSeekEventName = "VideoPlayerSeekEvent";
+
+export type VideoPlayerSeekEvent = {
+  type: "VideoPlayerSeekEvent",
+  time: number;
+};
+
+export const useVideoPlayerSeekEvent = (onEvent?: (event: VideoPlayerSeekEvent) => void) =>
+  useEvent<VideoPlayerSeekEvent>(PlayerSeekEventName, onEvent);
+