Fix motion review (#10329)

* Break preview only video player out

* Simplify

* Load after current preview changes

* Clear out waiting for seek state

* Start at correct time of hour

* Fix layout for tall video

web/src/views/events/EventView.tsx

@@ -2,9 +2,6 @@ import Logo from "@/components/Logo";
 import NewReviewData from "@/components/dynamic/NewReviewData";
 import ReviewActionGroup from "@/components/filter/ReviewActionGroup";
 import ReviewFilterGroup from "@/components/filter/ReviewFilterGroup";
-import DynamicVideoPlayer, {
-  DynamicVideoController,
-} from "@/components/player/DynamicVideoPlayer";
 import PreviewThumbnailPlayer from "@/components/player/PreviewThumbnailPlayer";
 import EventReviewTimeline from "@/components/timeline/EventReviewTimeline";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
@@ -36,6 +33,9 @@ import { MdCircle } from "react-icons/md";
 import useSWR from "swr";
 import MotionReviewTimeline from "@/components/timeline/MotionReviewTimeline";
 import { Button } from "@/components/ui/button";
+import PreviewVideoPlayer, {
+  PreviewVideoController,
+} from "@/components/player/PreviewVideoPlayer";
 
 type EventViewProps = {
   reviews?: ReviewSegment[];
@@ -531,7 +531,6 @@ function MotionReview({
 }: MotionReviewProps) {
   const segmentDuration = 30;
   const { data: config } = useSWR<FrigateConfig>("config");
-  const [playerReady, setPlayerReady] = useState(false);
 
   const reviewCameras = useMemo(() => {
     if (!config) {
@@ -552,7 +551,7 @@ function MotionReview({
     return cameras.sort((a, b) => a.ui.order - b.ui.order);
   }, [config, filter]);
 
-  const videoPlayersRef = useRef<{ [camera: string]: DynamicVideoController }>(
+  const videoPlayersRef = useRef<{ [camera: string]: PreviewVideoController }>(
     {},
   );
 
@@ -593,27 +592,6 @@ function MotionReview({
 
   // move to next clip
 
-  useEffect(() => {
-    if (
-      !videoPlayersRef.current &&
-      Object.values(videoPlayersRef.current).length > 0
-    ) {
-      return;
-    }
-
-    const firstController = Object.values(videoPlayersRef.current)[0];
-
-    if (firstController) {
-      firstController.onClipChangedEvent((dir) => {
-        if (dir == "forward") {
-          if (selectedRangeIdx < timeRangeSegments.ranges.length - 1) {
-            setSelectedRangeIdx(selectedRangeIdx + 1);
-          }
-        }
-      });
-    }
-  }, [selectedRangeIdx, timeRangeSegments, videoPlayersRef, playerReady]);
-
   useEffect(() => {
     if (
       currentTime > currentTimeRange.end + 60 ||
@@ -624,6 +602,9 @@ function MotionReview({
       );
 
       if (index != -1) {
+        Object.values(videoPlayersRef.current).forEach((controller) => {
+          controller.setNewPreviewStartTime(currentTime);
+        });
         setSelectedRangeIdx(index);
       }
       return;
@@ -656,17 +637,14 @@ function MotionReview({
               grow = "aspect-video";
             }
             return (
-              <DynamicVideoPlayer
+              <PreviewVideoPlayer
                 key={camera.name}
                 className={`${grow}`}
                 camera={camera.name}
                 timeRange={currentTimeRange}
                 cameraPreviews={relevantPreviews || []}
-                previewOnly
-                preloadRecordings={false}
                 onControllerReady={(controller) => {
                   videoPlayersRef.current[camera.name] = controller;
-                  setPlayerReady(true);
                 }}
                 onClick={() =>
                   onSelectReview(`motion,${camera.name},${currentTime}`, false)