Rewrite call UX reliability: receive-only fallback, playback retries, mobile controls (v2.7.1)

client.js

@@ -295,41 +295,50 @@ function formatMessageTimestamp(timestamp) {
 function ensureRemoteMediaPlayback(videoEl) {
     if (!videoEl) return;
 
-    const playPromise = videoEl.play();
-    if (!playPromise || typeof playPromise.then !== 'function') return;
+    const tryPlay = () => {
+        const playPromise = videoEl.play();
+        if (!playPromise || typeof playPromise.then !== 'function') return;
+
+        playPromise.then(() => {
+            if (!remoteCallPlaybackStarted) {
+                remoteCallPlaybackStarted = true;
+                showToast('📞 Connected! Audio and video are live.', 'success');
+            }
+        }).catch((error) => {
+            if (error?.name === 'AbortError') {
+                setTimeout(() => {
+                    if (videoEl.srcObject) {
+                        videoEl.play().catch(() => {});
+                    }
+                }, 120);
+                return;
+            }
 
-    playPromise.then(() => {
-        if (!remoteCallPlaybackStarted) {
-            remoteCallPlaybackStarted = true;
-            showToast('📞 Connected! Audio and video are live.', 'success');
-        }
-    }).catch((error) => {
-        if (error?.name === 'AbortError') {
-            setTimeout(() => {
-                if (videoEl.srcObject) {
-                    videoEl.play().catch(() => {});
-                }
-            }, 120);
-            return;
-        }
+            console.warn('Remote media autoplay blocked, waiting for user gesture:', error);
+            showToast('Tap once to enable call audio', 'warning');
 
-        console.warn('Remote media autoplay blocked, waiting for user gesture:', error);
-        showToast('Tap once to enable call audio', 'warning');
+            if (!remoteCallPlaybackRetryBound) {
+                remoteCallPlaybackRetryBound = true;
+                const retryPlayback = () => {
+                    videoEl.play().catch((retryErr) => {
+                        console.warn('Retry playback failed:', retryErr);
+                    });
+                    document.removeEventListener('click', retryPlayback);
+                    document.removeEventListener('touchstart', retryPlayback);
+                    document.removeEventListener('pointerdown', retryPlayback);
+                    remoteCallPlaybackRetryBound = false;
+                };
+                document.addEventListener('click', retryPlayback, { once: true });
+                document.addEventListener('touchstart', retryPlayback, { once: true, passive: true });
+                document.addEventListener('pointerdown', retryPlayback, { once: true });
+            }
+        });
+    };
 
-        if (!remoteCallPlaybackRetryBound) {
-            remoteCallPlaybackRetryBound = true;
-            const retryPlayback = () => {
-                videoEl.play().catch((retryErr) => {
-                    console.warn('Retry playback failed:', retryErr);
-                });
-                document.removeEventListener('click', retryPlayback);
-                document.removeEventListener('touchstart', retryPlayback);
-                remoteCallPlaybackRetryBound = false;
-            };
-            document.addEventListener('click', retryPlayback, { once: true });
-            document.addEventListener('touchstart', retryPlayback, { once: true });
-        }
-    });
+    tryPlay();
+    // Extra retry loop for slow mobile media pipelines.
+    setTimeout(tryPlay, 250);
+    setTimeout(tryPlay, 900);
 }
 
 
@@ -6435,6 +6444,10 @@ async function startCallSession(peerName, peerId, isCaller) {
     forceRelayOnly = rtcRuntimeConfig?.iceTransportPolicy === 'relay';
 
     openCallDialog(peerName);
+    // Start timer from session start to avoid "stuck at 00:00" perception on unstable networks.
+    if (!callTimerInterval) {
+        startCallTimer();
+    }
     await ensureRtcConfigLoaded();
     try {
         await ensureLocalCallStream();
@@ -6512,9 +6525,16 @@ function endVideoCall() {
 }
 
 function toggleLocalMute() {
-    if (!localCallStream) return;
+    if (!localCallStream) {
+        showToast('Microphone unavailable on this device/browser', 'warning');
+        return;
+    }
     
     const audioTracks = localCallStream.getAudioTracks();
+    if (!audioTracks.length) {
+        showToast('No microphone track available', 'warning');
+        return;
+    }
     const currentlyEnabled = audioTracks.some(track => track.enabled);
     
     audioTracks.forEach(track => {
@@ -6532,8 +6552,15 @@ function toggleLocalMute() {
 }
 
 function toggleCallCamera() {
-    if (!localCallStream) return;
+    if (!localCallStream) {
+        showToast('Camera unavailable on this device/browser', 'warning');
+        return;
+    }
     const videoTracks = localCallStream.getVideoTracks();
+    if (!videoTracks.length) {
+        showToast('No camera track available', 'warning');
+        return;
+    }
     isCallCameraOff = !isCallCameraOff;
     videoTracks.forEach(track => { track.enabled = !isCallCameraOff; });
     const btn = document.getElementById('cameraBtn');

index.html

@@ -944,15 +944,19 @@
         #remoteCallVideo, #localCallVideo, #localCallVideoOld {
             display: block;
         }
+        #remoteCallVideo {
+            pointer-events: none;
+        }
         .call-overlay-header {
             position: absolute;
             top: 0; left: 0; right: 0;
             padding: 16px 20px;
             background: linear-gradient(180deg, rgba(0,0,0,0.75), transparent);
-            z-index: 2;
+            z-index: 4;
             display: flex;
             align-items: center;
             justify-content: space-between;
+            pointer-events: auto;
         }
         .call-overlay-controls {
             position: absolute;
@@ -962,7 +966,9 @@
             display: flex;
             justify-content: center;
             gap: 20px;
-            z-index: 2;
+            z-index: 5;
+            pointer-events: auto;
+            touch-action: manipulation;
         }
         .call-ctrl-btn {
             width: 64px; height: 64px;
@@ -974,8 +980,12 @@
             cursor: pointer;
             display: flex; align-items: center; justify-content: center;
             transition: all 0.2s;
+            pointer-events: auto;
+            touch-action: manipulation;
+            -webkit-tap-highlight-color: transparent;
         }
         .call-ctrl-btn:hover { background: rgba(255,255,255,0.35); transform: scale(1.08); }
+        .call-ctrl-btn:active { transform: scale(0.96); }
         .call-ctrl-btn.muted { background: rgba(240,71,71,0.5); border-color: #f04747; }
         .call-ctrl-btn.cam-off { background: rgba(240,71,71,0.5); border-color: #f04747; }
         .call-end-btn {
@@ -988,6 +998,9 @@
             cursor: pointer;
             display: flex; align-items: center; justify-content: center;
             transition: all 0.2s;
+            pointer-events: auto;
+            touch-action: manipulation;
+            -webkit-tap-highlight-color: transparent;
         }
         .call-end-btn:hover { background: #c0392b; transform: scale(1.1); }
         #callDebugPanel {
@@ -3048,7 +3061,7 @@
                     <div class="chat-header-title" id="chatTitle">💬 Select a friend to chat</div>
                 </div>
                 <div class="chat-header-actions">
-                    <span class="build-badge mobile-essential" id="buildVersionBadge" title="Frontend build version">v2.7.0</span>
+                    <span class="build-badge mobile-essential" id="buildVersionBadge" title="Frontend build version">v2.7.1</span>
                     <button class="header-btn mobile-essential" onclick="toggleArchiveChat()" title="Archive chat">
                         <i class="fas fa-archive"></i>
                     </button>
@@ -3665,7 +3678,7 @@
 
     <script src="/socket.io/socket.io.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
-    <script src="client.js?v=2.7.0"></script>
+    <script src="client.js?v=2.7.1"></script>
 </body>
 </html>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "discord-like-app",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "main": "server.js",
   "scripts": {
     "dev": "nodemon server.js",