guh

2026-09-15 17:12:59 -04:00 · 2025-11-15 05:27:47 -05:00
parent eb2e2b15d8
commit c9d5b4e0f3
6 changed files with 149 additions and 59 deletions
@@ -5,8 +5,8 @@
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webui</title>
-    <script type="module" crossorigin src="/assets/index-Cn-MOZwV.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-Cbe_I3mP.css">
+    <script type="module" crossorigin src="/assets/index-D9Hjnx7-.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-dfoT05bK.css">
  </head>
  <body>
    <div id="root"></div>
@@ -1,53 +1,115 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { WhepPlayer } from '../lib/whepPlayer.js';

-export default function VideoTile({ sessionInfo, label, muted = true }) {
+const RESTART_DELAY_MS = 2000;
+const UNMUTE_RETRY_MS = 3000;
+
+export default function VideoTile({ sessionInfo, label, forceMute = false }) {
  const videoRef = useRef(null);
+  const restartTimer = useRef(null);
+  const unmuteTimer = useRef(null);
  const [status, setStatus] = useState('idle');
-  const [error, setError] = useState(null);
+  const [detail, setDetail] = useState(null);
+  const [restartToken, setRestartToken] = useState(0);
+  const [muted, setMuted] = useState(true);
+
+  const scheduleRestart = useCallback(() => {
+    clearTimeout(restartTimer.current);
+    restartTimer.current = setTimeout(() => setRestartToken(Date.now()), RESTART_DELAY_MS);
+  }, []);
+
+  const attemptUnmute = useCallback(
+    (delay = 0) => {
+      if (forceMute) return;
+      clearTimeout(unmuteTimer.current);
+      unmuteTimer.current = setTimeout(async () => {
+        const video = videoRef.current;
+        if (!video) return;
+        try {
+          video.muted = false;
+          await video.play();
+          setMuted(false);
+        } catch (err) {
+          video.muted = true;
+          setMuted(true);
+          attemptUnmute(UNMUTE_RETRY_MS);
+        }
+      }, delay);
+    },
+    [forceMute],
+  );
+
+  useEffect(
+    () => () => {
+      clearTimeout(restartTimer.current);
+      clearTimeout(unmuteTimer.current);
+    },
+    [],
+  );

  useEffect(() => {
-    let player;
-    let cancelled = false;
+    if (status === 'playing') {
+      attemptUnmute(0);
+    }
+  }, [status, attemptUnmute]);

-    async function start() {
+  useEffect(() => {
    if (!sessionInfo?.url || !videoRef.current) {
      setStatus('waiting');
-        return;
+      setDetail(null);
+      return undefined;
    }
-      setStatus('connecting');
-      setError(null);
+    let active = true;
+    let player;
+    setMuted(true);
+    const handleStatus = (nextStatus, info) => {
+      if (!active) return;
+      setStatus(nextStatus);
+      setDetail(info || null);
+      if (['error', 'failed', 'disconnected', 'closed'].includes(nextStatus)) {
+        scheduleRestart();
+      }
+    };
+
    player = new WhepPlayer({
      url: sessionInfo.url,
      token: sessionInfo.token,
      video: videoRef.current,
+      onStatus: handleStatus,
+    });
+
+    player.start().catch((err) => {
+      if (!active) return;
+      setStatus('error');
+      setDetail(err.message);
+      scheduleRestart();
    });
-      try {
-        await player.start();
-        if (!cancelled) {
-          setStatus('playing');
-        }
-      } catch (err) {
-        if (!cancelled) {
-          setStatus('error');
-          setError(err.message);
-        }
-      }
-    }

-    start();
    return () => {
-      cancelled = true;
+      active = false;
      player?.stop();
    };
-  }, [sessionInfo?.url, sessionInfo?.token]);
+  }, [sessionInfo?.url, sessionInfo?.token, restartToken, scheduleRestart]);
+
+  useEffect(() => {
+    if (status === 'stopped' && sessionInfo?.url) {
+      scheduleRestart();
+    }
+  }, [status, sessionInfo?.url, scheduleRestart]);
+
+  const renderedStatus =
+    status === 'error'
+      ? `Error: ${detail || 'unknown'}`
+      : detail
+      ? `${status} (${detail})`
+      : status;

  return (
    <div className="space-y-2">
      <div className="aspect-video w-full overflow-hidden rounded-2xl border border-slate-800 bg-black">
        <video
          ref={videoRef}
-          muted={muted}
+          muted={forceMute || muted}
          playsInline
          autoPlay
          controls={false}
@@ -56,7 +118,7 @@ export default function VideoTile({ sessionInfo, label, muted = true }) {
      </div>
      <div className="text-xs text-slate-400">
        <span className="font-semibold text-slate-200">{label}</span>{' '}
-        {status === 'error' ? <span className="text-red-400">Error: {error}</span> : <span>{status}</span>}
+        <span>{renderedStatus}</span>
      </div>
    </div>
  );
@@ -1,17 +1,25 @@
 function buildAuthHeader(token) {
  if (!token) return {};
  const credential = `${token}:${token}`;
-  const encoded = typeof btoa === 'function' ? btoa(credential) : Buffer.from(credential).toString('base64');
+  const encoded =
+    typeof btoa === 'function' ? btoa(credential) : Buffer.from(credential).toString('base64');
  return { Authorization: `Basic ${encoded}` };
 }

 export class WhepPlayer {
-  constructor({ url, token, video }) {
+  constructor({ url, token, video, onStatus }) {
    this.url = url;
    this.token = token;
    this.video = video;
    this.pc = null;
    this.abortController = null;
+    this.onStatus = onStatus;
+  }
+
+  notify(status, detail) {
+    if (typeof this.onStatus === 'function') {
+      this.onStatus(status, detail);
+    }
  }

  async start() {
@@ -19,6 +27,7 @@ export class WhepPlayer {
      throw new Error('Video target missing');
    }
    this.stop();
+    this.notify('connecting');
    this.abortController = new AbortController();
    const pc = new RTCPeerConnection();
    this.pc = pc;
@@ -30,6 +39,18 @@ export class WhepPlayer {
    pc.addTransceiver('video', { direction: 'recvonly' });
    pc.addTransceiver('audio', { direction: 'recvonly' });

+    pc.onconnectionstatechange = () => {
+      const state = pc.connectionState;
+      this.notify(state);
+    };
+    pc.oniceconnectionstatechange = () => {
+      const state = pc.iceConnectionState;
+      if (state === 'failed' || state === 'disconnected') {
+        this.notify(state);
+      }
+    };
+
+    try {
      const offer = await pc.createOffer();
      await pc.setLocalDescription(offer);

@@ -47,6 +68,12 @@ export class WhepPlayer {
      }
      const answerSdp = await response.text();
      await pc.setRemoteDescription({ type: 'answer', sdp: answerSdp });
+      this.notify('playing');
+    } catch (err) {
+      this.notify('error', err.message);
+      this.stop();
+      throw err;
+    }
  }

  stop() {
@@ -63,5 +90,6 @@ export class WhepPlayer {
    if (this.video) {
      this.video.srcObject = null;
    }
+    this.notify('stopped');
  }
 }
@@ -66,7 +66,7 @@ function RoverSpectatorCard({ rover, frame, videoInfo }) {
          {frame?.receivedAt ? `Updated ${new Date(frame.receivedAt).toLocaleTimeString()}` : 'Waiting for telemetry…'}
        </p>
      </header>
-      <VideoTile sessionInfo={videoInfo} label={rover.name} />
+      <VideoTile sessionInfo={videoInfo} label={rover.name} forceMute />
      <section className="rounded-2xl border border-slate-800/80 bg-slate-950/50 p-4">
        <p className="text-xs uppercase tracking-[0.3em] text-slate-500">Telemetry</p>
        {sensorList.length === 0 ? (