refactor(player): share the cursor idle hook and stop waking on element pauses

Move the cursor idle logic into useCursorIdle and use it from both the video
page and the compare page, which carried its own copy. Only pointer activity
wakes the cursor now: a pause/play pair the element emits on its own (a
rebuffer, a source switch) leaves the idle state alone instead of bringing
the chrome back for a second. The fullscreen-while-paused arming is gone,
nothing rendered it. The scrub test now leaves the player before pressing
the timeline, as the real layout forces.

components/video-page/hooks/use-cursor-idle.ts

@@ -0,0 +1,52 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+/** How long the cursor has to sit still over the player before it and the overlay hide. */
+export const CURSOR_IDLE_DELAY_MS = 1000;
+
+/**
+ * Tracks whether the cursor has rested over the player long enough to hide it
+ * and the play/pause overlay. Playback can start without the cursor moving (a
+ * click, a key, the resume after a scrub), so the countdown is re-armed on
+ * every playback change. Only pointer activity wakes the cursor: a pause/play
+ * pair the element emits on its own (rebuffering, a source switch) leaves the
+ * idle state alone, so the chrome does not flash back for a second.
+ */
+export function useCursorIdle(isPlaying: boolean) {
+  const [cursorIdle, setCursorIdle] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const isCursorOverPlayerRef = useRef(false);
+
+  // Restart the countdown. It only runs while the cursor is over the player
+  // and playback is running; otherwise nothing is pending.
+  const armTimer = useCallback(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = null;
+
+    if (!isCursorOverPlayerRef.current || !isPlaying) return;
+
+    timerRef.current = setTimeout(() => {
+      setCursorIdle(true);
+    }, CURSOR_IDLE_DELAY_MS);
+  }, [isPlaying]);
+
+  const handleVideoMouseMove = useCallback(() => {
+    isCursorOverPlayerRef.current = true;
+    setCursorIdle(false);
+    armTimer();
+  }, [armTimer]);
+
+  const handleVideoMouseLeave = useCallback(() => {
+    isCursorOverPlayerRef.current = false;
+    setCursorIdle(false);
+    armTimer();
+  }, [armTimer]);
+
+  useEffect(() => {
+    armTimer();
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [armTimer]);
+
+  return { cursorIdle, handleVideoMouseMove, handleVideoMouseLeave };
+}

components/video-page/hooks/use-video-player.ts

@@ -33,9 +33,7 @@ import {
   resolveSkipAmount as resolveSkipAmountFor,
   timeFromClientX as timeFromClientXWithin,
 } from '@/components/video-page/hooks/video-player-utils';
-
-/** How long the cursor has to sit still over the player before it and the overlay hide. */
-const CURSOR_IDLE_DELAY_MS = 1000;
+import { useCursorIdle } from '@/components/video-page/hooks/use-cursor-idle';
 
 interface UseVideoPlayerParams {
   activeVersion: Version | undefined;
@@ -117,9 +115,7 @@ export function useVideoPlayer({
   const previousVersionKeyRef = useRef<string | null>(null);
   const [isBunnyPortraitSource, setIsBunnyPortraitSource] = useState(false);
   const [bunnyPortraitFrameWidth, setBunnyPortraitFrameWidth] = useState<number>(0);
-  const [cursorIdle, setCursorIdle] = useState(false);
-  const cursorIdleTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const isCursorOverPlayerRef = useRef(false);
+  const { cursorIdle, handleVideoMouseMove, handleVideoMouseLeave } = useCursorIdle(isPlaying);
   const bunnyRetryTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const bunnyFrameCallbackIdRef = useRef<number | null>(null);
   const bunnyFrameSampleRef = useRef<{ mediaTime: number; presentedFrames: number } | null>(null);
@@ -216,42 +212,6 @@ export function useVideoPlayer({
     return () => observer.disconnect();
   }, [activeVersionId, bunnyViewportRef]);
 
-  // Restart the idle countdown from "cursor active". The cursor only counts as
-  // idle while it is over the player and there is something to hide (playback
-  // running, or fullscreen chrome); otherwise it stays visible.
-  const armCursorIdleTimer = useCallback(() => {
-    if (cursorIdleTimerRef.current) clearTimeout(cursorIdleTimerRef.current);
-    cursorIdleTimerRef.current = null;
-    setCursorIdle(false);
-
-    if (!isCursorOverPlayerRef.current) return;
-    if (!isPlaying && !isFullscreenMode) return;
-
-    cursorIdleTimerRef.current = setTimeout(() => {
-      setCursorIdle(true);
-    }, CURSOR_IDLE_DELAY_MS);
-  }, [isFullscreenMode, isPlaying]);
-
-  const handleVideoMouseMove = useCallback(() => {
-    isCursorOverPlayerRef.current = true;
-    armCursorIdleTimer();
-  }, [armCursorIdleTimer]);
-
-  const handleVideoMouseLeave = useCallback(() => {
-    isCursorOverPlayerRef.current = false;
-    armCursorIdleTimer();
-  }, [armCursorIdleTimer]);
-
-  // Playback can change without the cursor moving: a click or a key starts it,
-  // and a scrub pauses then resumes it. Each of those needs a fresh countdown,
-  // or a still cursor over the player never goes idle and the overlay stays.
-  useEffect(() => {
-    armCursorIdleTimer();
-    return () => {
-      if (cursorIdleTimerRef.current) clearTimeout(cursorIdleTimerRef.current);
-    };
-  }, [armCursorIdleTimer]);
-
   useEffect(() => {
     if (isApiLoaded) return;