fix canvas player bugs

https://github.com/mifi/lossless-cut/issues/253#issuecomment-1433898805

src/App.jsx

@@ -114,6 +114,7 @@ const App = memo(() => {
   const [working, setWorkingState] = useState();
   const [usingDummyVideo, setUsingDummyVideo] = useState(false);
   const [playing, setPlaying] = useState(false);
+  const [canvasPlayerEventId, setCanvasPlayerEventId] = useState(0);
   const playingOnlySegmentIdRef = useRef();
   const [playerTime, setPlayerTime] = useState();
   const [duration, setDuration] = useState();
@@ -274,6 +275,7 @@ const App = memo(() => {
 
     video.currentTime = outVal;
     setCommandedTime(outVal);
+    setCanvasPlayerEventId((id) => id + 1); // To make sure that we can seek even to the same commanded time that we are already add (e.g. loop current segment)
   }, []);
 
   const commandedTimeRef = useRef(commandedTime);
@@ -628,6 +630,7 @@ const App = memo(() => {
     setUsingDummyVideo(false);
     setPlaying(false);
     playingOnlySegmentIdRef.current = undefined;
+    setCanvasPlayerEventId(0);
     setDuration();
     cutSegmentsHistory.go(0);
     clearSegments(); // TODO this will cause two history items
@@ -2185,7 +2188,7 @@ const App = memo(() => {
                   {renderSubtitles()}
                 </video>
 
-                {canvasPlayerEnabled && <Canvas rotate={effectiveRotation} filePath={filePath} width={mainVideoStream.width} height={mainVideoStream.height} streamIndex={mainVideoStream.index} playerTime={playerTime} commandedTime={commandedTime} playing={playing} />}
+                {canvasPlayerEnabled && <Canvas rotate={effectiveRotation} filePath={filePath} width={mainVideoStream.width} height={mainVideoStream.height} streamIndex={mainVideoStream.index} playerTime={playerTime} commandedTime={commandedTime} playing={playing} eventId={canvasPlayerEventId} />}
               </div>
 
               {isRotationSet && !hideCanvasPreview && (

src/Canvas.jsx

@@ -3,7 +3,7 @@ import { useDebounce } from 'use-debounce';
 
 import CanvasPlayer from './CanvasPlayer';
 
-const Canvas = memo(({ rotate, filePath, width, height, playerTime, streamIndex, commandedTime, playing }) => {
+const Canvas = memo(({ rotate, filePath, width, height, playerTime, streamIndex, commandedTime, playing, eventId }) => {
   const canvasRef = useRef();
 
   const canvasPlayer = useMemo(() => CanvasPlayer({ path: filePath, width, height, streamIndex, getCanvas: () => canvasRef.current }), [filePath, width, height, streamIndex]);
@@ -14,12 +14,14 @@ const Canvas = memo(({ rotate, filePath, width, height, playerTime, streamIndex,
 
   const state = useMemo(() => {
     if (playing) {
-      return { time: commandedTime, playing };
+      return { startTime: commandedTime, playing, eventId };
     }
-    return { time: playerTime, playing };
-  }, [commandedTime, playerTime, playing]);
+    return { startTime: playerTime, playing, eventId };
+  }, [commandedTime, eventId, playerTime, playing]);
 
-  const [debouncedState, { cancel }] = useDebounce(state, 300, { leading: true, equalityFn: ({ time: time1, playing: playing1 }, { time: time2, playing: playing2 }) => time1 === time2 && playing1 === playing2 });
+  const [debouncedState, { cancel }] = useDebounce(state, 200, {
+    equalityFn: (a, b) => a.startTime === b.startTime && a.playing === b.playing && a.eventId === b.eventId,
+  });
 
   /* useEffect(() => {
     console.log('state', state);
@@ -32,12 +34,12 @@ const Canvas = memo(({ rotate, filePath, width, height, playerTime, streamIndex,
   useEffect(() => {
     // console.log('debouncedState', debouncedState);
 
-    if (debouncedState.time == null) return;
+    if (debouncedState.startTime == null) return;
 
     if (debouncedState.playing) {
-      canvasPlayer.play(debouncedState.time);
+      canvasPlayer.play(debouncedState.startTime);
     } else {
-      canvasPlayer.pause(debouncedState.time);
+      canvasPlayer.pause(debouncedState.startTime);
     }
   }, [debouncedState, canvasPlayer]);
 

src/CanvasPlayer.js

@@ -79,7 +79,6 @@ export default ({ path, width: inWidth, height: inHeight, streamIndex, getCanvas
 
   function pause(seekTo) {
     if (terminated) return;
-    if (!playing && commandedTime === seekTo) return;
     playing = false;
     commandedTime = seekTo;
 
@@ -89,7 +88,6 @@ export default ({ path, width: inWidth, height: inHeight, streamIndex, getCanvas
 
   function play(playFrom) {
     if (terminated) return;
-    if (playing && commandedTime === playFrom) return;
     playing = true;
     commandedTime = playFrom;