Dont use useEffect due to preview changing

web/src/components/player/PreviewPlayer.tsx

@@ -170,40 +170,16 @@ function PreviewVideoPlayer({
     }
   }, [controller]);
 
-  useEffect(() => {
-    if (!controller) {
-      return;
-    }
-
-    const preview = cameraPreviews.find(
-      (preview) =>
-        preview.camera == camera &&
-        Math.round(preview.start) >= timeRange.after &&
-        Math.floor(preview.end) <= timeRange.before,
-    );
-
-    if (preview != currentPreview) {
-      setCurrentPreview(preview);
-    }
-
-    controller.newPlayback({
-      preview,
-      timeRange,
-    });
-
-    // we only want this to change when recordings update
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [controller, timeRange]);
-
   // canvas to cover preview transition
 
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const [videoSize, setVideoSize] = useState<number[]>([0, 0]);
 
-  // handle switching sources
+  const changeSource = useCallback(
+    (newPreview: Preview | undefined, video: HTMLVideoElement | null) => {
+      setCurrentPreview(newPreview);
 
-  useEffect(() => {
+      if (!newPreview || !video) {
-    if (!currentPreview || !previewRef.current) {
         return;
       }
 
@@ -217,13 +193,40 @@ function PreviewVideoPlayer({
       const context = canvasRef.current?.getContext("2d");
 
       if (context) {
-      context.drawImage(previewRef.current, 0, 0, videoSize[0], videoSize[1]);
+        context.drawImage(video, 0, 0, videoSize[0], videoSize[1]);
         setCurrentHourFrame(canvasRef.current?.toDataURL("image/webp"));
       }
 
       // we only want this to change when current preview changes
       // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentPreview, previewRef]);
+    },
+    [setCurrentHourFrame, videoSize],
+  );
+
+  useEffect(() => {
+    if (!controller) {
+      return;
+    }
+
+    const preview = cameraPreviews.find(
+      (preview) =>
+        preview.camera == camera &&
+        Math.round(preview.start) >= timeRange.after &&
+        Math.floor(preview.end) <= timeRange.before,
+    );
+
+    if (preview != currentPreview) {
+      changeSource(preview, previewRef.current);
+    }
+
+    controller.newPlayback({
+      preview,
+      timeRange,
+    });
+
+    // we only want this to change when recordings update
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [controller, timeRange, changeSource]);
 
   return (
     <div