debounce canvas player

src/Canvas.jsx

@@ -1,31 +1,50 @@
 
-import React, { memo, useEffect, useRef, useMemo } from 'react';
+import React, { memo, useEffect, useRef, useMemo, useState } from 'react';
+import useDebounce from 'react-use/lib/useDebounce';
 
 import CanvasPlayer from './CanvasPlayer';
 
-const Canvas = memo(({ rotate, filePath, width, height, playerTime, commandedTime, playing }) => {
+const Canvas = memo(({ rotate, filePath, width, height, playerTime, streamIndex, commandedTime, playing }) => {
   const canvasRef = useRef();
 
-  const canvasPlayer = useMemo(() => CanvasPlayer({ path: filePath, width, height }),
-    [filePath, width, height]);
+  const canvasPlayer = useMemo(() => CanvasPlayer({ path: filePath, width, height, streamIndex }),
+    [filePath, width, height, streamIndex]);
 
   useEffect(() => {
     canvasPlayer.setCanvas(canvasRef.current);
 
     return () => {
       canvasPlayer.setCanvas();
-      if (canvasPlayer) canvasPlayer.dispose();
+      canvasPlayer.dispose();
     };
   }, [canvasPlayer]);
 
+  const [debouncedPlayerTime, setDebouncedPlayerTime] = useState(0);
+  const [debouncedCommandedTime, setDebouncedCommandedTime] = useState(0);
+
+  const [, cancelPlayerTimeDebounce] = useDebounce(() => {
+    setDebouncedPlayerTime(playerTime);
+  }, 100, [playerTime]);
+
+  const [, cancelCommandedTimeDebounce] = useDebounce(() => {
+    setDebouncedCommandedTime(commandedTime);
+  }, 300, [commandedTime]);
+
+  useEffect(() => () => {
+    cancelPlayerTimeDebounce();
+    cancelCommandedTimeDebounce();
+  }, [cancelPlayerTimeDebounce, cancelCommandedTimeDebounce]);
+
   useEffect(() => {
-    if (playing) canvasPlayer.play(commandedTime);
-    else canvasPlayer.pause(playerTime);
-  }, [canvasPlayer, commandedTime, playerTime, playing]);
+    if (playing) canvasPlayer.play(debouncedCommandedTime);
+    else canvasPlayer.pause(debouncedPlayerTime);
+  }, [canvasPlayer, debouncedCommandedTime, debouncedPlayerTime, playing]);
+
+  const canvasStyle = useMemo(() => ({ display: 'block', width: '100%', height: '100%', objectFit: 'contain', transform: `rotate(${rotate}deg)` }), [rotate]);
 
   return (
     <div style={{ width: '100%', height: '100%', left: 0, right: 0, top: 0, bottom: 0, position: 'absolute', overflow: 'hidden', background: 'black' }}>
-      <canvas ref={canvasRef} style={{ display: 'block', width: '100%', height: '100%', objectFit: 'contain', transform: `rotate(${rotate}deg)` }} />
+      <canvas ref={canvasRef} style={canvasStyle} />
     </div>
   );
 });