Тест

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"