gonna break stuff now

webui/src/components/PtzLiveVideo/index.jsx

@@ -1,15 +1,14 @@
 // PTZ Live Video
 // Purpose: Plays the single PTZ camera WHEP stream with the same fresh-session retry loop used by rover video.
 // Scope: Owns browser-side WHEP playback/retry only; server authorization and snapshot fallback policy stay outside.
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useVideoRequests } from '../../hooks/useVideoRequests.js';
-import { WhepPlayer } from '../../lib/whepPlayer.js';
-import { RESTART_DELAY_MS } from '../RoverMediaPlayer/constants.js';
+import { startWhepPlayback } from '../../lib/whepPlayback.js';
+import useWhepRestart from '../../hooks/useWhepRestart.js';
 
 export const PTZ_CAMERA_ID = 'ptz-camera';
 
 const PTZ_AUDIO_RETRY_MS = 1000;
-const TERMINAL_WHEP_STATES = new Set(['error', 'failed', 'disconnected', 'closed']);
 const AUTHORIZATION_ERROR_RE = /not authorized/i;
 
 function isAuthorizationError(error) {
@@ -25,14 +24,10 @@ export default function PtzLiveVideo({
   fallback = null,
 }) {
   const videoRef = useRef(null);
-  const retryTimerRef = useRef(null);
   const playTimerRef = useRef(null);
-  const enabledRef = useRef(enabled);
-  const fallbackRef = useRef(false);
-  const playerGenerationRef = useRef(0);
   const [status, setStatus] = useState('idle');
   const [detail, setDetail] = useState(null);
-  const [restartToken, setRestartToken] = useState(0);
+  const { restartToken, scheduleRestart, cancelRestart } = useWhepRestart(enabled);
   const sources = useVideoRequests(
     [{ type: 'ptz', id: PTZ_CAMERA_ID, key: PTZ_CAMERA_ID }],
     { enabled, version: restartToken },
@@ -41,100 +36,34 @@ export default function PtzLiveVideo({
   const shouldUseFallback = Boolean(source?.error && isAuthorizationError(source.error));
 
   useEffect(() => {
-    enabledRef.current = enabled;
-  }, [enabled]);
-
-  useEffect(() => {
-    fallbackRef.current = shouldUseFallback;
-  }, [shouldUseFallback]);
-
-  useEffect(() => {
-    if (enabled && !shouldUseFallback) return undefined;
-    /*
-      A retry that was scheduled before the server denied live access should not
-      keep firing in snapshot mode. Clear it when live playback is no longer the
-      active display policy.
-    */
-    if (retryTimerRef.current) {
-      clearTimeout(retryTimerRef.current);
-      retryTimerRef.current = null;
-    }
-    return undefined;
-  }, [enabled, shouldUseFallback]);
-
-  const scheduleRestart = useCallback(() => {
-    if (!enabledRef.current || fallbackRef.current) return;
-    /*
-      WHEP sessions are one-shot browser/server negotiations. When the camera
-      reboots, the old PeerConnection and token can look alive enough to keep a
-      black element on screen, but they are not useful anymore. Bumping this
-      token forces useVideoRequests to ask the server for a new MediaMTX auth
-      session before creating the next WhepPlayer.
-    */
-    clearTimeout(retryTimerRef.current);
-    retryTimerRef.current = setTimeout(() => {
-      retryTimerRef.current = null;
-      setRestartToken(Date.now());
-    }, RESTART_DELAY_MS);
-  }, []);
+    // An authorization denial switches to snapshots and cancels any queued retry.
+    if (shouldUseFallback) cancelRestart();
+  }, [shouldUseFallback, cancelRestart]);
 
   useEffect(() => {
     if (!enabled || shouldUseFallback || !source?.url || !videoRef.current) return undefined;
-    let active = true;
-    const generation = playerGenerationRef.current + 1;
-    playerGenerationRef.current = generation;
-    const player = new WhepPlayer({
+    const video = videoRef.current;
+    const stop = startWhepPlayback({
       url: source.url,
       token: source.token,
       video: videoRef.current,
       startMuted,
+      scheduleRestart,
       onStatus: (nextStatus, info) => {
-        /*
-          Old PeerConnection callbacks can arrive after React has already
-          cleaned up this effect for a newer token. Only the currently-owned
-          generation is allowed to update status or schedule another restart.
-        */
-        if (!active || playerGenerationRef.current !== generation) return;
-        const normalized = String(nextStatus || '').toLowerCase();
         setStatus(nextStatus || 'unknown');
         setDetail(info || null);
-        if (TERMINAL_WHEP_STATES.has(normalized)) {
-          scheduleRestart();
-        }
+      },
+      onError: (err) => {
+        setStatus('error');
+        setDetail(err.message || 'WHEP start failed');
       },
     });
-
-    player.start().catch((err) => {
-      if (!active || playerGenerationRef.current !== generation) return;
-      setStatus('error');
-      setDetail(err.message || 'WHEP start failed');
-      scheduleRestart();
-    });
-
-    return () => {
-      /*
-        Mark inactive before stop() because WhepPlayer reports "stopped" during
-        normal cleanup. Cleanup-driven stops should not immediately schedule the
-        next retry; only the replacement effect should own the new connection.
-      */
-      active = false;
-      player.stop();
-    };
-  }, [enabled, scheduleRestart, shouldUseFallback, source?.token, source?.url, startMuted]);
-
-  useEffect(() => {
-    const video = videoRef.current;
-    if (!enabled || shouldUseFallback || !source?.url || !video) return undefined;
-    const generation = playerGenerationRef.current;
-
     const handleEnded = () => {
-      if (playerGenerationRef.current !== generation) return;
       setStatus('stopped');
       setDetail('ended');
       scheduleRestart();
     };
     const handleError = () => {
-      if (playerGenerationRef.current !== generation) return;
       setStatus('error');
       setDetail(video.error?.message || 'video element error');
       scheduleRestart();
@@ -145,8 +74,9 @@ export default function PtzLiveVideo({
     return () => {
       video.removeEventListener('ended', handleEnded);
       video.removeEventListener('error', handleError);
+      stop();
     };
-  }, [enabled, scheduleRestart, shouldUseFallback, source?.url]);
+  }, [enabled, scheduleRestart, shouldUseFallback, source?.token, source?.url, startMuted]);
 
   useEffect(() => {
     const video = videoRef.current;
@@ -178,7 +108,6 @@ export default function PtzLiveVideo({
   }, [enabled, shouldUseFallback, source?.url, startMuted, status]);
 
   useEffect(() => () => {
-    if (retryTimerRef.current) clearTimeout(retryTimerRef.current);
     if (playTimerRef.current) clearInterval(playTimerRef.current);
   }, []);