Manually set current time when selecting event (#11948)

* Manually set current time when selecting event

* Make it clear which camera has no preview

* Make it clear which camera has no preview

* Format camera name

web/src/components/player/PreviewPlayer.tsx

@@ -323,7 +323,7 @@ function PreviewVideoPlayer({
       </video>
       {cameraPreviews && !currentPreview && (
         <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-background_alt text-primary md:rounded-2xl">
-          No Preview Found
+          No Preview Found for {camera.replaceAll("_", " ")}
         </div>
       )}
       {firstLoad && <Skeleton className="absolute aspect-video size-full" />}
@@ -536,7 +536,7 @@ function PreviewFramesPlayer({
       />
       {previewFrames?.length === 0 && (
         <div className="-y-translate-1/2 align-center absolute inset-x-0 top-1/2 rounded-lg bg-background_alt text-center text-primary md:rounded-2xl">
-          No Preview Found
+          No Preview Found for {camera.replaceAll("_", " ")}
         </div>
       )}
       {firstLoad && <Skeleton className="absolute aspect-video size-full" />}

web/src/views/events/RecordingView.tsx

@@ -196,6 +196,19 @@ export function RecordingView({
     updateSelectedSegment,
   ]);
 
+  const manuallySetCurrentTime = useCallback(
+    (time: number) => {
+      setCurrentTime(time);
+
+      if (currentTimeRange.after <= time && currentTimeRange.before >= time) {
+        mainControllerRef.current?.seekToTimestamp(time, true);
+      } else {
+        updateSelectedSegment(time, true);
+      }
+    },
+    [currentTimeRange, updateSelectedSegment],
+  );
+
   useEffect(() => {
     if (!scrubbing) {
       if (Math.abs(currentTime - playerTime) > 10) {
@@ -580,6 +593,7 @@ export function RecordingView({
           currentTime={currentTime}
           exportRange={exportMode == "timeline" ? exportRange : undefined}
           setCurrentTime={setCurrentTime}
+          manuallySetCurrentTime={manuallySetCurrentTime}
           setScrubbing={setScrubbing}
           setExportRange={setExportRange}
         />
@@ -597,6 +611,7 @@ type TimelineProps = {
   currentTime: number;
   exportRange?: TimeRange;
   setCurrentTime: React.Dispatch<React.SetStateAction<number>>;
+  manuallySetCurrentTime: (time: number, force: boolean) => void;
   setScrubbing: React.Dispatch<React.SetStateAction<boolean>>;
   setExportRange: (range: TimeRange) => void;
 };
@@ -609,6 +624,7 @@ function Timeline({
   currentTime,
   exportRange,
   setCurrentTime,
+  manuallySetCurrentTime,
   setScrubbing,
   setExportRange,
 }: TimelineProps) {
@@ -693,9 +709,10 @@ function Timeline({
                   event={review}
                   currentTime={currentTime}
                   onClick={() => {
-                    setScrubbing(true);
+                    manuallySetCurrentTime(
-                    setCurrentTime(review.start_time - REVIEW_PADDING);
+                      review.start_time - REVIEW_PADDING,
-                    setScrubbing(false);
+                      true,
+                    );
                   }}
                 />
               );