From 29a3e788361ac591b7727eb425062c73565bb61c Mon Sep 17 00:00:00 2001
From: Max Ronzhin <m.ronzhin@ssphera.ru>
Date: Tue, 28 Jul 2026 04:25:10 +0300
Subject: [PATCH] =?UTF-8?q?fix(room):=20=D0=BC=D0=B8=D0=BD=D0=B8-=D0=BE?=
 =?UTF-8?q?=D0=BA=D0=BD=D0=BE=20=D0=BE=D1=82=D0=BA=D1=80=D1=8B=D0=B2=D0=B0?=
 =?UTF-8?q?=D0=B5=D1=82=D1=81=D1=8F=20=D0=BD=D0=B0=20=D0=BF=D0=BB=D0=B8?=
 =?UTF-8?q?=D1=82=D0=BA=D0=B5=20=D0=B8=D0=B7=20=D0=BE=D1=81=D0=BD=D0=BE?=
 =?UTF-8?q?=D0=B2=D0=BD=D0=BE=D0=B3=D0=BE=20=D0=BE=D0=BA=D0=BD=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

В Chrome мини-плеер показывал самого пользователя вместо того, что он видел
крупно. Сцена в мини-окне — отдельный экземпляр RoomStage (портал в PiP-окно),
и состояние фокуса он начинал с нуля: демонстрации нет, никто прямо сейчас не
говорит — pickStageFocus доходил до последнего фолбэка localKey, то есть до
«показать себя». В Safari бага не было видно: там Document PiP не
используется, а video-фолбэк берёт <video> прямо из фокус-плитки основного
окна.

Ключ фокуса теперь передаётся наружу (onFocusKeyChange), живёт в состоянии
RoomPage и достаётся следующему экземпляру сцены (initialFocusKey). Работает
в обе стороны — возврат из мини-плеера тоже не сбрасывает фокус. Правила
выбора фокуса (pickStageFocus) не тронуты.
---
 frontend/src/components/room/RoomStage.tsx | 30 +++++++++++++++++++++-
 frontend/src/pages/RoomPage.tsx            | 18 +++++++++++--
 2 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/room/RoomStage.tsx b/frontend/src/components/room/RoomStage.tsx
index ea154cc..f6c5858 100644
--- a/frontend/src/components/room/RoomStage.tsx
+++ b/frontend/src/components/room/RoomStage.tsx
@@ -124,6 +124,17 @@ function hasLiveVideo(track: TrackReferenceOrPlaceholder): boolean {
  * `tiles` скрывать нечего (карусели нет), переключатель там заблокирован —
  * см. `StageViewOptions`.
  *
+ * ФОКУС ПЕРЕЖИВАЕТ ПЕРЕЕЗД В МИНИ-ПЛЕЕР. Сцена в мини-плеере — ОТДЕЛЬНЫЙ
+ * экземпляр этого компонента (портал в PiP-окно), и своё состояние фокуса он
+ * начинал с нуля: демонстрации нет, никто прямо сейчас не говорит — и
+ * `pickStageFocus` доходил до последнего фолбэка `localKey`, то есть мини-окно
+ * открывалось на самом пользователе вместо того, что он видел крупно. В Safari
+ * бага не было видно: там Document PiP не используется, а video-фолбэк
+ * (`useRoomPiP`) берёт `<video>` прямо из фокус-плитки основного окна. Лечится
+ * передачей ключа наружу и обратно: `onFocusKeyChange` → состояние в
+ * `RoomPage` → `initialFocusKey` следующего экземпляра. Работает в обе стороны
+ * — возврат из мини-плеера тоже не сбрасывает фокус.
+ *
  * Раскладка — вертикальная колонка миниатюр слева от основной сцены (не
  * горизонтальная лента, см. design/mockups/room.html после правки: узкая
  * колонка сбоку, скролл по вертикали). Это штатное поведение самого
@@ -166,6 +177,8 @@ export function RoomStage({
   hideOthers = false,
   onShowOthers,
   onHideOthers,
+  initialFocusKey = null,
+  onFocusKeyChange,
 }: {
   variant?: 'full' | 'pip'
   /** Выбранный пользователем режим показа; игнорируется при `variant="pip"`. */
@@ -176,6 +189,10 @@ export function RoomStage({
   onShowOthers?: () => void
   /** Скрыть остальных — кнопка над каруселью (только широкий экран). */
   onHideOthers?: () => void
+  /** Чем инициализировать фокус при монтировании — см. докстринг про мини-плеер. */
+  initialFocusKey?: string | null
+  /** Сообщать наружу текущий фокус, чтобы его пережил переезд сцены в мини-плеер и обратно. */
+  onFocusKeyChange?: (key: string | null) => void
 }) {
   const room = useRoomContext()
   const isCompact = useIsCompactViewport()
@@ -224,7 +241,10 @@ export function RoomStage({
   // `pickStageFocus` меняют результат без изменения самих треков.
   const [prevTracks, setPrevTracks] = useState(tracks)
   const [prevSpeakingParticipants, setPrevSpeakingParticipants] = useState(speakingParticipants)
-  const [focusKey, setFocusKey] = useState<string | null>(null)
+  // Стартовое значение — фокус, доставшийся от предыдущего экземпляра сцены
+  // (см. `initialFocusKey` и докстринг про мини-плеер). Дальше живёт своей
+  // жизнью: `pickStageFocus` пересчитывает его на каждое значимое изменение.
+  const [focusKey, setFocusKey] = useState<string | null>(initialFocusKey)
   // Закрепление живёт в состоянии сцены (задача 3.1): ключ `identity:source`
   // плитки, которую пользователь закрепил булавкой; `null` — закрепления нет.
   // Только для основного окна — в PiP плитка одна и закреплять нечего.
@@ -282,6 +302,14 @@ export function RoomStage({
     }
   }
 
+  // Отдаём фокус наружу (в `RoomPage`), чтобы он пережил размонтирование этой
+  // сцены и достался следующей — см. `initialFocusKey`. Именно эффект, а не
+  // вызов в теле рендера: setState ЧУЖОГО компонента во время рендера React
+  // запрещает.
+  useEffect(() => {
+    onFocusKeyChange?.(focusKey)
+  }, [focusKey, onFocusKeyChange])
+
   const focusTrack = tracks.find((t) => stageTrackKey(t) === focusKey) ?? screenShareTracks[0] ?? cameraTracks[0]
   const focusTrackKey = focusTrack ? stageTrackKey(focusTrack) : null
   // При активной демонстрации карусель — ВСЕ камеры (включая демонстратора) И
diff --git a/frontend/src/pages/RoomPage.tsx b/frontend/src/pages/RoomPage.tsx
index 3facf6a..aa703a8 100644
--- a/frontend/src/pages/RoomPage.tsx
+++ b/frontend/src/pages/RoomPage.tsx
@@ -168,6 +168,13 @@ export function RoomPage() {
     saveStageLayoutMode(mode)
   }, [])
 
+  // Ключ трека, который сцена показывает крупно. Живёт ЗДЕСЬ, а не только
+  // внутри `RoomStage`, потому что при открытии мини-плеера сцена
+  // размонтируется в основном окне и монтируется заново в PiP-окне (портал
+  // ниже) — без этого мостика новый экземпляр начинал бы выбор фокуса с нуля и
+  // открывал мини-окно на самом пользователе. Подробнее — докстринг `RoomStage`.
+  const [stageFocusKey, setStageFocusKey] = useState<string | null>(null)
+
   // Сохранённый выбор устройств — читаем через собственный вызов
   // usePersistentUserChoices (независимый от того, что использует
   // DeviceSettingsDialog: там свой вызов хука со своим состоянием). ВАЖНО:
@@ -241,6 +248,8 @@ export function RoomPage() {
                 hideOthers={hideOthers}
                 onShowOthers={() => setHideOthers(false)}
                 onHideOthers={() => setHideOthers(true)}
+                initialFocusKey={stageFocusKey}
+                onFocusKeyChange={setStageFocusKey}
               />
             )}
             {chatVisible && chatOpen && (
@@ -284,8 +293,13 @@ export function RoomPage() {
             рендерящийся в PiP-окне, продолжает читать RoomContext/треки.
             `variant="pip"` — мини-плеер
             показывает только активное окно (одну плитку), без карусели/грида
-            основного окна. */}
-        {pip.pipWindow && createPortal(<RoomStage variant="pip" />, pip.pipWindow.document.body)}
+            основного окна. `initialFocusKey` — то, что было крупно в основном
+            окне: без него мини-окно открывалось на самом пользователе. */}
+        {pip.pipWindow &&
+          createPortal(
+            <RoomStage variant="pip" initialFocusKey={stageFocusKey} onFocusKeyChange={setStageFocusKey} />,
+            pip.pipWindow.document.body,
+          )}
       </LiveKitRoom>
     </div>
   )