Changes

Co-authored-by: Reifonas <211114984+Reifonas@users.noreply.github.com>

src/pages/Watch.tsx

@@ -14,6 +14,7 @@ export default function Watch() {
   const [state, setState] = useState<ConnState>('checking');
   const [error, setError] = useState<string>('');
   const [fullscreen, setFullscreen] = useState(false);
+  const [fallbackFrame, setFallbackFrame] = useState<string>('');
 
   useEffect(() => {
     let cancelled = false;
@@ -39,10 +40,15 @@ export default function Watch() {
 
       if (!videoRef.current) return;
       try {
-        const handle = await joinAsViewer(code.toUpperCase(), videoRef.current, (s, detail) => {
-          setState(s as ConnState);
-          if (detail) setError(detail);
-        });
+        const handle = await joinAsViewer(
+          code.toUpperCase(),
+          videoRef.current,
+          (s, detail) => {
+            setState(s as ConnState);
+            if (detail) setError(detail);
+          },
+          setFallbackFrame,
+        );
         handleRef.current = handle;
       } catch (e) {
         setError(e instanceof Error ? e.message : String(e));
@@ -100,6 +106,14 @@ export default function Watch() {
           className="max-w-full max-h-full object-contain"
         />
 
+        {fallbackFrame && (
+          <img
+            src={fallbackFrame}
+            alt="Transmissão ao vivo da sessão XR"
+            className="absolute inset-0 h-full w-full object-contain"
+          />
+        )}
+
         {(state === 'checking' || state === 'connecting' || state === 'waiting') && (
           <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-black/80">
             <Loader2 className="h-8 w-8 animate-spin text-primary" />