From 24500380a964ecfa44a32a96002c51913149542f Mon Sep 17 00:00:00 2001
From: Babaev Makhmoud <mahmud1997babaev@mail.ru>
Date: Tue, 23 Sep 2025 00:50:05 +0300
Subject: [PATCH] Handle autoplay denials for remote call participants

---
 .../call/components/CallParticipantsGrid.tsx  | 203 ++++++++++++++++--
 frontend/src/index.css                        |  31 +++
 2 files changed, 211 insertions(+), 23 deletions(-)

diff --git a/frontend/src/features/call/components/CallParticipantsGrid.tsx b/frontend/src/features/call/components/CallParticipantsGrid.tsx
index a964c77..fdfd1c2 100644
--- a/frontend/src/features/call/components/CallParticipantsGrid.tsx
+++ b/frontend/src/features/call/components/CallParticipantsGrid.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import type { RefObject } from 'react';
 
 import type { RemoteParticipant } from '../hooks/useCallPeers';
@@ -18,6 +18,118 @@ export const CallParticipantsGrid = ({
   containerRef,
   isFullscreen,
 }: CallParticipantsGridProps) => {
+  const blockedElementsRef = useRef(new Set<HTMLVideoElement>());
+  const [autoplayBlocked, setAutoplayBlocked] = useState(false);
+
+  const isAutoplayDeniedError = (error: unknown): error is DOMException =>
+    error instanceof DOMException && error.name === 'NotAllowedError';
+
+  const updateAutoplayBlockedState = useCallback(() => {
+    setAutoplayBlocked(blockedElementsRef.current.size > 0);
+  }, []);
+
+  const attemptToPlay = useCallback(
+    (element: HTMLVideoElement) => {
+      let playPromise: Promise<void> | undefined;
+
+      try {
+        playPromise = element.play();
+      } catch (error) {
+        if (isAutoplayDeniedError(error)) {
+          blockedElementsRef.current.add(element);
+          updateAutoplayBlockedState();
+          return;
+        }
+
+        blockedElementsRef.current.delete(element);
+        updateAutoplayBlockedState();
+        return;
+      }
+
+      if (!playPromise) {
+        blockedElementsRef.current.delete(element);
+        updateAutoplayBlockedState();
+        return;
+      }
+
+      playPromise
+        .then(() => {
+          blockedElementsRef.current.delete(element);
+          updateAutoplayBlockedState();
+        })
+        .catch((error) => {
+          if (isAutoplayDeniedError(error)) {
+            blockedElementsRef.current.add(element);
+            updateAutoplayBlockedState();
+            return;
+          }
+
+          blockedElementsRef.current.delete(element);
+          updateAutoplayBlockedState();
+        });
+    },
+    [updateAutoplayBlockedState],
+  );
+
+  const retryBlockedElements = useCallback(() => {
+    const blockedElements = Array.from(blockedElementsRef.current);
+
+    blockedElements.forEach((element) => {
+      if (!element.isConnected) {
+        blockedElementsRef.current.delete(element);
+        return;
+      }
+
+      attemptToPlay(element);
+    });
+
+    updateAutoplayBlockedState();
+  }, [attemptToPlay, updateAutoplayBlockedState]);
+
+  useEffect(() => {
+    if (!autoplayBlocked) {
+      return;
+    }
+
+    if (typeof document === 'undefined') {
+      return;
+    }
+
+    const target = containerRef.current ?? document;
+
+    const handleInteraction = () => {
+      retryBlockedElements();
+    };
+
+    target.addEventListener('click', handleInteraction);
+    target.addEventListener('touchend', handleInteraction);
+
+    retryBlockedElements();
+
+    return () => {
+      target.removeEventListener('click', handleInteraction);
+      target.removeEventListener('touchend', handleInteraction);
+    };
+  }, [autoplayBlocked, containerRef, retryBlockedElements]);
+
+  const clearBlockedElementById = useCallback(
+    (participantId: string) => {
+      let removed = false;
+
+      blockedElementsRef.current.forEach((element) => {
+        if (element.dataset?.autoplayParticipantId === participantId) {
+          blockedElementsRef.current.delete(element);
+          removed = true;
+        }
+      });
+
+      if (removed) {
+        updateAutoplayBlockedState();
+      }
+    },
+    [updateAutoplayBlockedState],
+  );
+
   const attachStreamToElement = useCallback(
     (element: HTMLVideoElement | null, stream: MediaStream | null | undefined) => {
       if (!element) {
@@ -30,18 +142,45 @@ export const CallParticipantsGrid = ({
       if (stream && currentStream !== stream) {
         element.srcObject = stream;
         streamAttached = true;
+      } else if (!stream) {
+        blockedElementsRef.current.delete(element);
+        updateAutoplayBlockedState();
       }
 
       if ((streamAttached || element.paused) && element.srcObject) {
-        element.play().catch(() => undefined);
+        attemptToPlay(element);
+      }
+    },
+    [attemptToPlay, updateAutoplayBlockedState],
+  );
+
+  const handleRemoteVideoElement = useCallback(
+    (
+      element: HTMLVideoElement | null,
+      participantId: string,
+      stream: MediaStream | null | undefined,
+    ) => {
+      if (!element) {
+        clearBlockedElementById(participantId);
+        return;
       }
+
+      element.dataset.autoplayParticipantId = participantId;
+      attachStreamToElement(element, stream);
     },
-    [],
+    [attachStreamToElement, clearBlockedElementById],
   );
 
   const handleLocalVideoRef = useCallback(
     (element: HTMLVideoElement | null) => {
+      const previousElement = localVideoRef.current;
+      if (!element && previousElement) {
+        blockedElementsRef.current.delete(previousElement);
+        updateAutoplayBlockedState();
+      }
+
       localVideoRef.current = element;
+
       if (!element) {
         return;
       }
@@ -50,7 +189,7 @@ export const CallParticipantsGrid = ({
       element.muted = true;
       attachStreamToElement(element, stream);
     },
-    [attachStreamToElement, localStreamRef, localVideoRef],
+    [attachStreamToElement, localStreamRef, localVideoRef, updateAutoplayBlockedState],
   );
 
   if (isFullscreen && remoteParticipants.length > 0) {
@@ -58,15 +197,24 @@ export const CallParticipantsGrid = ({
 
     return (
       <div ref={containerRef} className="video-stage video-stage--fullscreen">
+        {autoplayBlocked && (
+          <button
+            type="button"
+            className="video-grid__autoplay-warning"
+            onClick={retryBlockedElements}
+          >
+            Нажмите, чтобы включить звук участников
+          </button>
+        )}
         <div className="video-stage__primary">
-          <video
-            autoPlay
-            playsInline
-            ref={(element) => {
-              attachStreamToElement(element, primaryParticipant.stream);
-            }}
-            className="video-stage__primary-video"
-          />
+              <video
+                autoPlay
+                playsInline
+                ref={(element) => {
+                  handleRemoteVideoElement(element, primaryParticipant.id, primaryParticipant.stream);
+                }}
+                className="video-stage__primary-video"
+              />
           <span className="video-grid__label">{primaryParticipant.id.slice(0, 6)}</span>
         </div>
 
@@ -83,16 +231,16 @@ export const CallParticipantsGrid = ({
 
         {secondaryParticipants.length > 0 && (
           <div className="video-stage__thumbnails">
-            {secondaryParticipants.map((participant) => (
-              <div key={participant.id} className="video-stage__thumbnail">
-                <video
-                  autoPlay
-                  playsInline
-                  ref={(element) => {
-                    attachStreamToElement(element, participant.stream);
-                  }}
-                  className="video-stage__thumbnail-video"
-                />
+              {secondaryParticipants.map((participant) => (
+                <div key={participant.id} className="video-stage__thumbnail">
+                  <video
+                    autoPlay
+                    playsInline
+                    ref={(element) => {
+                      handleRemoteVideoElement(element, participant.id, participant.stream);
+                    }}
+                    className="video-stage__thumbnail-video"
+                  />
                 <span className="video-grid__label">{participant.id.slice(0, 6)}</span>
               </div>
             ))}
@@ -104,6 +252,15 @@ export const CallParticipantsGrid = ({
 
   return (
     <div ref={containerRef} className="video-grid">
+      {autoplayBlocked && (
+        <button
+          type="button"
+          className="video-grid__autoplay-warning"
+          onClick={retryBlockedElements}
+        >
+          Нажмите, чтобы включить звук участников
+        </button>
+      )}
       <div className="video-grid__item">
         <video ref={handleLocalVideoRef} autoPlay playsInline muted className="video-grid__video" />
         <span className="video-grid__label">Вы</span>
@@ -114,7 +271,7 @@ export const CallParticipantsGrid = ({
             autoPlay
             playsInline
             ref={(element) => {
-              attachStreamToElement(element, participant.stream);
+              handleRemoteVideoElement(element, participant.id, participant.stream);
             }}
           />
           <span className="video-grid__label">{participant.id.slice(0, 6)}</span>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 6071418..900c0b1 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -101,6 +101,7 @@ a:hover {
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: 16px;
   width: 100%;
+  position: relative;
 }
 
 .video-grid video {
@@ -128,6 +129,36 @@ a:hover {
   font-size: 12px;
 }
 
+.video-grid__autoplay-warning {
+  position: absolute;
+  top: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 5;
+  background: rgba(0, 0, 0, 0.75);
+  color: #fff;
+  padding: 10px 20px;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  border-radius: 999px;
+  font-size: 14px;
+  line-height: 1.4;
+  cursor: pointer;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
+  backdrop-filter: blur(12px);
+  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
+}
+
+.video-grid__autoplay-warning:hover {
+  background: rgba(0, 0, 0, 0.85);
+  border-color: rgba(255, 255, 255, 0.35);
+}
+
+.video-grid__autoplay-warning:focus-visible {
+  outline: 2px solid #1677ff;
+  outline-offset: 2px;
+  transform: translateX(-50%) scale(1.02);
+}
+
 .video-stage {
   position: relative;
   width: 100%;