From a9e24f6692e5b43b081be00e81610073664469a3 Mon Sep 17 00:00:00 2001
From: Max Ronzhin <m.ronzhin@ssphera.ru>
Date: Mon, 3 Aug 2026 18:19:19 +0300
Subject: [PATCH] =?UTF-8?q?fix(room):=20=D0=B2=20Chrome=20=D0=BF=D1=80?=
 =?UTF-8?q?=D0=BE=D0=BF=D0=B0=D0=B4=D0=B0=D0=BB=20=D0=B7=D0=B2=D1=83=D0=BA?=
 =?UTF-8?q?=20=D0=BF=D0=BE=D1=81=D0=BB=D0=B5=20=D0=B2=D0=BE=D0=B7=D0=B2?=
 =?UTF-8?q?=D1=80=D0=B0=D1=82=D0=B0=20=D0=B8=D0=B7=20=D0=BC=D0=B8=D0=BD?=
 =?UTF-8?q?=D0=B8-=D0=BE=D0=BA=D0=BD=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

RoomAudioRenderer жил внутри RoomStage и рендерился дважды — в ветке
variant="pip" и в основной. При открытии Document PiP сцена
размонтируется в основном окне и монтируется в PiP-окне, поэтому
скрытые <audio> с чужими аудиотреками физически переезжали в ДРУГОЙ
документ, а при возврате — обратно. После такого переезда Chrome
теряет аудиовыход у remote-трека: пакеты продолжают приходить
(packetsReceived растёт), но totalSamplesDuration и totalAudioEnergy
замирают, и трек молчит даже в свежесозданном <audio> со свежим
MediaStream. Тот же цикл detach/attach в пределах одного документа
безвреден — дело именно в переезде между документами. В Safari бага не
было: там Document PiP не используется (video-фолбэк), сцена остаётся
в основном окне.

Рендерер вынесен в RoomPage — один экземпляр, всегда в основном
документе. В PiP-окне аудиоэлементов теперь нет вовсе, цикл «открыл
мини-окно → вернул» их не касается.
---
 frontend/src/components/room/RoomStage.tsx |  3 ---
 frontend/src/pages/RoomPage.tsx            | 17 ++++++++++++++++-
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/room/RoomStage.tsx b/frontend/src/components/room/RoomStage.tsx
index ed439b2..61a1e63 100644
--- a/frontend/src/components/room/RoomStage.tsx
+++ b/frontend/src/components/room/RoomStage.tsx
@@ -4,7 +4,6 @@ import { Track, type Participant } from 'livekit-client'
 import {
   CarouselLayout,
   FocusLayoutContainer,
-  RoomAudioRenderer,
   isTrackReference,
   useRoomContext,
   useSpeakingParticipants,
@@ -400,7 +399,6 @@ export function RoomStage({
       <section className="stage room-single-tile">
         {focusTrack && <RoomParticipantTile trackRef={focusTrack} onStopSharing={handleStopSharing} />}
         <PipMicToggle />
-        <RoomAudioRenderer />
       </section>
     )
   }
@@ -496,7 +494,6 @@ export function RoomStage({
           <span>Показать остальных ({sideTracks.length})</span>
         </button>
       )}
-      <RoomAudioRenderer />
     </section>
   )
 }
diff --git a/frontend/src/pages/RoomPage.tsx b/frontend/src/pages/RoomPage.tsx
index ae002d8..f3e9269 100644
--- a/frontend/src/pages/RoomPage.tsx
+++ b/frontend/src/pages/RoomPage.tsx
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useLocation, useNavigate, useParams } from 'react-router-dom'
 import { PictureInPicture2 } from 'lucide-react'
-import { LiveKitRoom, usePersistentUserChoices } from '@livekit/components-react'
+import { LiveKitRoom, RoomAudioRenderer, usePersistentUserChoices } from '@livekit/components-react'
 import type { RoomOptions } from 'livekit-client'
 import '@livekit/components-styles'
 import '@/styles/room.css'
@@ -285,6 +285,21 @@ export function RoomPage() {
         options={roomOptions}
         onDisconnected={handleDisconnected}
       >
+        {/* Звук комнаты рендерится ЗДЕСЬ, а не внутри `RoomStage`, и ровно
+            одним экземпляром на всю страницу. `RoomAudioRenderer` — это набор
+            скрытых `<audio>`, к которым LiveKit привязывает чужие аудиотреки
+            (`track.attach(el)`). Пока он жил в сцене, открытие мини-плеера
+            переносило эти элементы в ДРУГОЙ документ (Document PiP — отдельное
+            окно со своим `document`), а возврат — обратно, и после возврата
+            звук чужих участников пропадал: Chrome теряет аудиовыход у
+            remote-трека, переехавшего между документами. Замерено: пакеты
+            продолжают приходить (`packetsReceived` растёт), а
+            `totalSamplesDuration`/`totalAudioEnergy` замирают, и трек молчит
+            даже в свежесозданном `<audio>` со свежим `MediaStream`. Тот же
+            цикл detach/attach В ПРЕДЕЛАХ ОДНОГО документа безвреден — дело
+            именно в переезде. Здесь элементы живут в основном документе
+            непрерывно, весь цикл «открыл мини-окно → вернул» их не касается. */}
+        <RoomAudioRenderer />
         <div data-lk-theme="default" className="room-shell">
           <RoomTopbar title={joinState.title ?? null} slug={slug} number={joinState.number} />
           <div className="room-main">