From 030e51727c56b02f16460de178908e10d47236c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A5=D0=B0=D0=BB=D0=B8=D0=BC=D0=BE=D0=B2=20=D0=A0=D1=83?=
 =?UTF-8?q?=D1=81=D1=82=D0=B0=D0=BC?= <rhalimov@elveesneotek.com>
Date: Wed, 11 Mar 2026 01:30:52 +0300
Subject: [PATCH] Fix

---
 apps/web/src/components/CallModal.tsx | 38 +++++++++++++--------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/apps/web/src/components/CallModal.tsx b/apps/web/src/components/CallModal.tsx
index ae5ad9e..53467e5 100644
--- a/apps/web/src/components/CallModal.tsx
+++ b/apps/web/src/components/CallModal.tsx
@@ -249,7 +249,7 @@ export default function CallModal({ isOpen, onClose, targetUser, callType: initi
         }
       };
 
-      // Ensure we have a stream object (even if browser didn't provide one)
+      // Ensure we have a stream object
       if (!remoteStreamRef.current) {
         remoteStreamRef.current = streams[0] || new MediaStream([track]);
       } else if (!remoteStreamRef.current.getTracks().includes(track)) {
@@ -258,23 +258,22 @@ export default function CallModal({ isOpen, onClose, targetUser, callType: initi
 
       const stream = remoteStreamRef.current;
 
-      // Link to DOM elements immediately
-      if (remoteVideoRef.current) {
-        // IMPORTANT: If srcObject is the same, some browsers won't refresh the view. 
-        // We set it to the stream and call play() explicitly.
-        if (remoteVideoRef.current.srcObject !== stream) {
-            remoteVideoRef.current.srcObject = stream;
+      // Link to DOM elements
+      if (track.kind === 'video' && remoteVideoRef.current) {
+        remoteVideoRef.current.srcObject = stream;
+        // MUST be muted to autoplay in most browsers
+        remoteVideoRef.current.muted = true;
+        remoteVideoRef.current.play().catch(err => console.warn('[WebRTC] video play failed:', err));
+        checkVideo();
+      } 
+      
+      if (track.kind === 'audio' || (track.kind === 'video' && !remoteAudioRef.current?.srcObject)) {
+        if (remoteAudioRef?.current) {
+          remoteAudioRef.current.srcObject = stream;
+          remoteAudioRef.current.play().catch(err => {
+              console.warn('[WebRTC] Audio play failed, user gesture needed:', err);
+          });
         }
-        remoteVideoRef.current.play().catch(err => {
-            console.warn('[WebRTC] Video play failed (retrying):', err);
-            // Retry play on next tick if failed
-            setTimeout(() => remoteVideoRef.current?.play().catch(() => {}), 500);
-        });
-      }
-
-      if (track.kind === 'audio' && remoteAudioRef?.current) {
-        remoteAudioRef.current.srcObject = stream;
-        remoteAudioRef.current.play().catch(() => {});
       }
 
       track.onunmute = checkVideo;
@@ -1438,9 +1437,9 @@ export default function CallModal({ isOpen, onClose, targetUser, callType: initi
               <PhoneOff size={14} />
             </button>
           </div>
-          {/* Hidden remote video to keep stream alive */}
+          {/* Hidden remote video/audio elements for background processing */}
           <video ref={remoteVideoRef} autoPlay playsInline muted className="hidden" />
-          <video ref={localVideoRef} autoPlay playsInline muted className="hidden" />
+          <audio ref={remoteAudioRef} autoPlay className="hidden" />
         </motion.div>
       ) : (
 
@@ -1546,6 +1545,7 @@ export default function CallModal({ isOpen, onClose, targetUser, callType: initi
               ref={remoteVideoRef}
               autoPlay
               playsInline
+              muted
               className={`
                 bg-black transition-all duration-500
                 ${showVideoArea