From 46ca6c9255b3830bf0848384d26d4c953c3b0f73 Mon Sep 17 00:00:00 2001
From: Your Name <j@842.be>
Date: Tue, 2 Sep 2025 09:38:08 +1200
Subject: [PATCH] Improve video autoplay behavior for WebRTC and HLS players

---
 squashkiwi-streaming/config/web/index.html  |  2 +-
 squashkiwi-streaming/config/web/webrtc.html | 43 ++++++++++++++++++++-
 2 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/squashkiwi-streaming/config/web/index.html b/squashkiwi-streaming/config/web/index.html
index 7c90a9c..ec337a7 100644
--- a/squashkiwi-streaming/config/web/index.html
+++ b/squashkiwi-streaming/config/web/index.html
@@ -140,7 +140,7 @@
 
         <div class="video-section">
             <div class="video-container">
-                <video id="video" controls autoplay muted></video>
+                <video id="video" controls autoplay muted playsinline></video>
             </div>
             <div class="video-controls">
                 <div class="status-badge offline" id="status">
diff --git a/squashkiwi-streaming/config/web/webrtc.html b/squashkiwi-streaming/config/web/webrtc.html
index 3e93efe..13abd13 100644
--- a/squashkiwi-streaming/config/web/webrtc.html
+++ b/squashkiwi-streaming/config/web/webrtc.html
@@ -39,6 +39,23 @@
             height: 0;
             background: black;
         }
+        .play-overlay {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(0, 0, 0, 0.7);
+            color: white;
+            padding: 20px 40px;
+            border-radius: 10px;
+            cursor: pointer;
+            font-size: 1.2rem;
+            z-index: 10;
+            display: none;
+        }
+        .play-overlay:hover {
+            background: rgba(0, 0, 0, 0.9);
+        }
         video {
             position: absolute;
             top: 0;
@@ -115,7 +132,8 @@
 
         <div class="video-section">
             <div class="video-container">
-                <video id="video" controls autoplay muted></video>
+                <video id="video" controls autoplay muted playsinline></video>
+                <div id="playOverlay" class="play-overlay">▶️ Click to Play</div>
             </div>
             <div class="video-controls">
                 <div class="status-badge offline" id="status">
@@ -160,6 +178,29 @@
             pc.ontrack = (event) => {
                 console.log('Got track:', event.track.kind);
                 video.srcObject = event.streams[0];
+                const playOverlay = document.getElementById('playOverlay');
+                
+                // Ensure autoplay works
+                video.play().then(() => {
+                    console.log('Video playback started automatically');
+                    playOverlay.style.display = 'none';
+                }).catch(e => {
+                    console.log('Autoplay was blocked, user interaction may be required:', e);
+                    // Show play overlay
+                    playOverlay.style.display = 'block';
+                    
+                    // Add click handlers to both overlay and video
+                    const startPlayback = () => {
+                        video.play().then(() => {
+                            playOverlay.style.display = 'none';
+                        });
+                        video.onclick = null;
+                        playOverlay.onclick = null;
+                    };
+                    
+                    video.onclick = startPlayback;
+                    playOverlay.onclick = startPlayback;
+                });
                 updateStatus(true);
             };