From 820a7bec6ad2ce06e3c4373c7b4972f9306e2001 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 16:45:08 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A2=D0=B5=D1=81=D1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/components/CallModal.tsx | 30 ++++++++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/CallModal.tsx b/apps/web/src/components/CallModal.tsx
index a2ea091..dce11c9 100644
--- a/apps/web/src/components/CallModal.tsx
+++ b/apps/web/src/components/CallModal.tsx
@@ -122,6 +122,7 @@ export default function CallModal({ isOpen, onClose, targetUser, callType: initi
   const [activeCameraId, setActiveCameraId] = useState<string>('');
   const [remoteVolume, setRemoteVolume] = useState(1);
   const [showVolumeSlider, setShowVolumeSlider] = useState(false);
+  const [needsInteraction, setNeedsInteraction] = useState(false);
   const [noiseSuppression, setNoiseSuppression] = useState(false);
   const [microphones, setMicrophones] = useState<MediaDeviceInfo[]>([]);
   const [activeMicId, setActiveMicId] = useState<string>('');
@@ -294,9 +295,12 @@ export default function CallModal({ isOpen, onClose, targetUser, callType: initi
         }
         // Important: Unmute for remote audio to work
         remoteVideoRef.current.muted = false;
-        remoteVideoRef.current.play().catch(e => {
-          console.warn('[WebRTC] Play failed, waiting for user interaction:', e);
-        });
+        remoteVideoRef.current.play()
+          .then(() => setNeedsInteraction(false))
+          .catch(e => {
+            console.warn('[WebRTC] Play failed, waiting for user interaction:', e);
+            setNeedsInteraction(true);
+          });
       }
 
       track.onunmute = checkVideo;
@@ -1611,6 +1615,26 @@ export default function CallModal({ isOpen, onClose, targetUser, callType: initi
                   </div>
                 )}
 
+                {/* Autoplay block overlay */}
+                {needsInteraction && hasRemoteVideo && (
+                  <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/60 backdrop-blur-md z-30">
+                    <button
+                      onClick={() => {
+                        if (remoteVideoRef.current) {
+                          remoteVideoRef.current.play()
+                            .then(() => setNeedsInteraction(false))
+                            .catch(console.error);
+                        }
+                      }}
+                      className="px-6 py-3 rounded-full bg-vortex-500 hover:bg-vortex-600 text-white font-bold shadow-2xl transition-all hover:scale-105 flex items-center gap-2"
+                    >
+                      <Volume2 size={24} />
+                      Включить звук и видео
+                    </button>
+                    <p className="mt-4 text-zinc-300 text-sm">Браузер заблокировал автоматический запуск</p>
+                  </div>
+                )}
+
                 {/* Local video PIP (bottom-right) */}
                 {hasLocalVideo && (
                   <div className="absolute bottom-3 right-3 w-48 rounded-xl overflow-hidden border-2 border-white/20 shadow-lg bg-black z-20"