use a single source of truth for scrubbing

web/src/components/player/dynamic/DynamicVideoController.ts

@@ -9,7 +9,7 @@ export class DynamicVideoController {
   public camera = "";
   private playerController: HTMLVideoElement;
   private previewController: PreviewController;
-  private setScrubbing: (isScrubbing: boolean) => void;
+  private isScrubbing: boolean;
   private setFocusedItem: (timeline: Timeline) => void;
   private playerMode: PlayerMode = "playback";
 
@@ -24,7 +24,7 @@ export class DynamicVideoController {
     previewController: PreviewController,
     annotationOffset: number,
     defaultMode: PlayerMode,
-    setScrubbing: (isScrubbing: boolean) => void,
+    isScrubbing: boolean,
     setFocusedItem: (timeline: Timeline) => void,
   ) {
     this.camera = camera;
@@ -32,7 +32,7 @@ export class DynamicVideoController {
     this.previewController = previewController;
     this.annotationOffset = annotationOffset;
     this.playerMode = defaultMode;
-    this.setScrubbing = setScrubbing;
+    this.isScrubbing = isScrubbing;
     this.setFocusedItem = setFocusedItem;
   }
 
@@ -52,7 +52,6 @@ export class DynamicVideoController {
   seekToTimestamp(time: number, play: boolean = false) {
     if (this.playerMode != "playback") {
       this.playerMode = "playback";
-      this.setScrubbing(false);
     }
 
     if (
@@ -123,10 +122,9 @@ export class DynamicVideoController {
       this.previewController.setNewPreviewStartTime(time);
     }
 
-    if (scrubResult && this.playerMode != "scrubbing") {
+    if (scrubResult && this.playerMode != "scrubbing" && !this.isScrubbing) {
       this.playerMode = "scrubbing";
       this.playerController.pause();
-      this.setScrubbing(true);
     }
   }
 

web/src/components/player/dynamic/DynamicVideoPlayer.tsx

@@ -21,6 +21,7 @@ type DynamicVideoPlayerProps = {
   onControllerReady: (controller: DynamicVideoController) => void;
   onTimestampUpdate?: (timestamp: number) => void;
   onClipEnded?: () => void;
+  isScrubbing: boolean;
 };
 export default function DynamicVideoPlayer({
   className,
@@ -31,6 +32,7 @@ export default function DynamicVideoPlayer({
   onControllerReady,
   onTimestampUpdate,
   onClipEnded,
+  isScrubbing,
 }: DynamicVideoPlayerProps) {
   const apiHost = useApiHost();
   const { data: config } = useSWR<FrigateConfig>("config");
@@ -53,7 +55,6 @@ export default function DynamicVideoPlayer({
   const playerRef = useRef<HTMLVideoElement | null>(null);
   const [previewController, setPreviewController] =
     useState<PreviewController | null>(null);
-  const [isScrubbing, setIsScrubbing] = useState(false);
   const [focusedItem, setFocusedItem] = useState<Timeline | undefined>(
     undefined,
   );
@@ -68,7 +69,7 @@ export default function DynamicVideoPlayer({
       previewController,
       (config.cameras[camera]?.detect?.annotation_offset || 0) / 1000,
       "playback",
-      setIsScrubbing,
+      isScrubbing,
       setFocusedItem,
     );
     // we only want to fire once when players are ready

web/src/views/events/RecordingView.tsx

@@ -234,6 +234,7 @@ export function DesktopRecordingView({
                 onControllerReady={(controller) => {
                   mainControllerRef.current = controller;
                 }}
+                isScrubbing={scrubbing}
               />
             </div>
             <div className="w-full flex justify-center gap-2 overflow-x-auto">
@@ -452,6 +453,7 @@ export function MobileRecordingView({
           }}
           onTimestampUpdate={setCurrentTime}
           onClipEnded={onClipEnded}
+          isScrubbing={scrubbing}
         />
       </div>