Merge b2a57a64e9 into 204909b49a

ui/src/components/WebRTCVideo.tsx

@@ -26,10 +26,8 @@ import { m } from "@localizations/messages.js";
 export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssues: boolean }) {
   // Video and stream related refs and states
   const videoElm = useRef<HTMLVideoElement>(null);
-  const audioElementsRef = useRef<HTMLAudioElement[]>([]);
   const { mediaStream, peerConnectionState } = useRTCStore();
   const [isPlaying, setIsPlaying] = useState(false);
-  const [audioAutoplayBlocked, setAudioAutoplayBlocked] = useState(false);
   const [isPointerLockActive, setIsPointerLockActive] = useState(false);
   const [isKeyboardLockActive, setIsKeyboardLockActive] = useState(false);
 
@@ -332,6 +330,7 @@ export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssu
       if (!peerConnection) return;
       const abortController = new AbortController();
       const signal = abortController.signal;
+      const audioElements: HTMLAudioElement[] = [];
 
       peerConnection.addEventListener(
         "track",
@@ -340,17 +339,11 @@ export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssu
             addStreamToVideoElm(e.streams[0]);
           } else if (e.track.kind === "audio") {
             const audioElm = document.createElement("audio");
+            audioElm.autoplay = true;
             audioElm.srcObject = e.streams[0];
             audioElm.style.display = "none";
             document.body.appendChild(audioElm);
-            audioElementsRef.current.push(audioElm);
-
-            audioElm.play().then(() => {
-              setAudioAutoplayBlocked(false);
-            }).catch(() => {
-              console.debug("[Audio] Autoplay blocked, will be started by user interaction");
-              setAudioAutoplayBlocked(true);
-            });
+            audioElements.push(audioElm);
           }
         },
         { signal },
@@ -358,12 +351,10 @@ export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssu
 
       return () => {
         abortController.abort();
-        audioElementsRef.current.forEach((audioElm) => {
+        audioElements.forEach((audioElm) => {
           audioElm.srcObject = null;
           audioElm.remove();
         });
-        audioElementsRef.current = [];
-        setAudioAutoplayBlocked(false);
       };
     },
     [addStreamToVideoElm, peerConnection],
@@ -477,12 +468,11 @@ export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssu
 
   const hasNoAutoPlayPermissions = useMemo(() => {
     if (peerConnection?.connectionState !== "connected") return false;
+    if (isPlaying) return false;
     if (hdmiError) return false;
     if (videoHeight === 0 || videoWidth === 0) return false;
-    if (!isPlaying) return true;
-    if (audioAutoplayBlocked) return true;
-    return false;
-  }, [audioAutoplayBlocked, hdmiError, isPlaying, peerConnection?.connectionState, videoHeight, videoWidth]);
+    return true;
+  }, [hdmiError, isPlaying, peerConnection?.connectionState, videoHeight, videoWidth]);
 
   const showPointerLockBar = useMemo(() => {
     if (settings.mouseMode !== "relative") return false;
@@ -574,11 +564,6 @@ export default function WebRTCVideo({ hasConnectionIssues }: { hasConnectionIssu
                               show={hasNoAutoPlayPermissions}
                               onPlayClick={() => {
                                 videoElm.current?.play();
-                                audioElementsRef.current.forEach(audioElm => {
-                                  audioElm.play().then(() => {
-                                    setAudioAutoplayBlocked(false);
-                                  }).catch(() => undefined);
-                                });
                               }}
                             />
                           </div>