feat(room): компактная шторка настроек устройств на мобильном

На ширине ≤600px (брейкпоинт комнаты) DeviceSettingsDialog рендерит те же
поля не модалкой по центру, а шторкой снизу (`room-sheet-overlay`/
`room-sheet-panel`) — по образцу решения оператора: так быстрее и привычнее
с телефона. Десктоп не меняется.

Закрытие — клик вне панели (было и раньше), Escape и возврат фокуса через
существующий useModalDismiss, и свайп вниз за ручку (JS считает смещение
пальца и либо закрывает панель, либо возвращает её на место пружиной).

.env.example

@@ -98,7 +98,7 @@ SMTP_TIMEOUT_S=30
 # --- Версия инстанса (релиз v0.0.1) ---
 # install.sh копирует значение из корневого файла VERSION при каждой
 # установке/обновлении — руками менять не нужно.
-VIDCONF_VERSION=0.0.5
+VIDCONF_VERSION=0.0.6
 
 # --- Профили compose. Дефолт ниже (`media,monitoring`) — только для ручного
 # `docker compose up` БЕЗ install.sh: медиа (LiveKit+coturn) + мониторинг,

CHANGELOG.md

@@ -3,6 +3,39 @@
 Формат основан на [Keep a Changelog](https://keepachangelog.com/ru/1.1.0/),
 проект придерживается [семантического версионирования](https://semver.org/lang/ru/).
 
+## [0.0.6] — 2026-07-27
+
+Управление фокусом основного окна конференции: участника можно закрепить, а
+без закрепления окно само следует за говорящим. Плюс общий футер на всех
+страницах сервиса.
+
+### Добавлено
+- Закрепление участника в основном окне — кнопка-булавка на плитке.
+  Закреплённый участник держит фокус, даже когда говорят другие; повторное
+  нажатие снимает закрепление, как и выход закреплённого из комнаты.
+  Закреплённая плитка помечена рамкой и подсвеченной булавкой; на
+  тач-устройствах булавка видна без наведения.
+- Общий футер на всех страницах, кроме комнаты конференции: версия инстанса
+  и копирайт со ссылкой на автора.
+
+### Изменения
+- Основное окно конференции следует за активным говорящим, а не удерживает
+  выбранного один раз участника. Фокус не переключается на короткие реплики
+  (удержание 1.2 с) и не уводится с идущей демонстрации экрана. Среди
+  нескольких одновременно говорящих крупно показывается тот, у кого включена
+  камера. Мини-плеер (Document PiP) работает как раньше.
+- Демонстрация экрана по-прежнему главнее всего: она перебивает и
+  закрепление, а после её завершения фокус возвращается на закреплённого
+  участника.
+- Футер админки заменён общим компонентом; в брендовой панели экранов входа
+  строка копирайта с захардкоженным годом убрана — год теперь берётся
+  текущий.
+
+### Исправлено
+- Календарь: «г.» после года убрана и из подписей дней в самой сетке (видны
+  как всплывающая подсказка и в accessibility-дереве) — в недельном и
+  месячном виде. В 0.0.4 это было исправлено только для подписи периода.
+
 ## [0.0.5] — 2026-07-27
 
 Контактный адрес инстанса: настраиваемый адрес для ответов на письма
@@ -129,6 +162,7 @@
 
 Первоначальная версия VidConf.
 
+[0.0.6]: https://github.com/MaxRonzhin/vidconf_rel/releases/tag/v0.0.6
 [0.0.5]: https://github.com/MaxRonzhin/vidconf_rel/releases/tag/v0.0.5
 [0.0.4]: https://github.com/MaxRonzhin/vidconf_rel/releases/tag/v0.0.4
 [0.0.3]: https://github.com/MaxRonzhin/vidconf_rel/releases/tag/v0.0.3

VERSION

@@ -1 +1 @@
-0.0.5
+0.0.6

deploy/docker-compose.yml

@@ -82,7 +82,7 @@ services:
       MEDIA_ROOT: ${MEDIA_ROOT:-/app/media}
       # Версия инстанса (релиз v0.0.1) — install.sh копирует значение
       # из файла VERSION (корень репозитория) в .env; отдаётся в GET /api/health.
-      VIDCONF_VERSION: ${VIDCONF_VERSION:-0.0.5}
+      VIDCONF_VERSION: ${VIDCONF_VERSION:-0.0.6}
     # config/ лежит в корне репозитория и не попадает в образ (контекст сборки —
     # только backend/), поэтому plugins.yaml монтируется отдельно.
     volumes:

frontend/src/components/auth/AuthLayout.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react'
+import { AppFooter } from '@/components/layout/AppFooter'
 import { LogoMark } from '@/components/ui/LogoMark'
 import { ThemeToggle } from '@/components/ui/ThemeToggle'
 import '@/styles/auth.css'
@@ -40,12 +41,16 @@ export function AuthLayout({ children }: { children: ReactNode }) {
             </div>
           </div>
         </div>
-        <p className="hint-msg" style={{ position: 'relative', zIndex: 1 }}>
-          © 2026 VidConf · self-hosted
-        </p>
       </aside>
 
-      <main className="form-panel">{children}</main>
+      {/* Копирайт с годом и версией инстанса — общий `AppFooter` (он же на всех
+          остальных страницах). Строку «© 2026 VidConf · self-hosted» из
+          брендовой панели при этом убрали совсем (решение оператора): год в ней
+          был захардкожен, а копирайт теперь живёт в футере. */}
+      <main className="form-panel">
+        {children}
+        <AppFooter />
+      </main>
     </div>
   )
 }

frontend/src/components/calendar/ConferenceCalendar.tsx

@@ -98,6 +98,57 @@ function renderEventContent(arg: EventContentArg) {
 /** «г.» — сноска Intl.DateTimeFormat('ru-RU', ...) после года при формате year+month(+day); в подписи периода не нужна. */
 const YEAR_SUFFIX_RE = /\s*г\.(?=\s|$)/g
 
+/**
+ * Подписи дней в самой сетке, из которых надо убрать «г.» (см.
+ * `useStripYearSuffix`): месячный вид — номер дня в ячейке, недельный —
+ * подпись колонки дня.
+ */
+const DAY_LABEL_SELECTOR = '.fc-daygrid-day-number, .fc-col-header-cell-cushion'
+
+/** Убирает «г.» из `aria-label`/`title` элемента; ничего не пишет, если менять нечего. */
+function stripYearSuffixAttrs(el: Element) {
+  for (const attr of ['aria-label', 'title']) {
+    const value = el.getAttribute(attr)
+    if (!value) continue
+    const cleaned = value.replace(YEAR_SUFFIX_RE, '')
+    if (cleaned !== value) el.setAttribute(attr, cleaned)
+  }
+}
+
+/**
+ * Убирает «г.» из служебных подписей дней внутри сетки FullCalendar.
+ *
+ * Кроме подписи периода (её формат мы задаём сами, см. `buildTitleFormatter`),
+ * дату дня FullCalendar подставляет ещё и в подпись ячейки — она видна в
+ * accessibility-дереве и как всплывающая подсказка. Формат этой подписи
+ * библиотека наружу НЕ отдаёт: `buildNavLinkAttrs` (@fullcalendar/core)
+ * форматирует дату жёстко зашитым `{year,month:'long',day:'numeric'}` и кладёт
+ * результат в `aria-label` (в `title` — когда включены navLinks), а с локалью
+ * `ru` Intl всегда даёт «20 июля 2026 г.». Настройкой это не убирается,
+ * поэтому правим уже отрендеренный атрибут.
+ *
+ * Почему MutationObserver, а не хуки `dayCellDidMount`/`dayHeaderDidMount`:
+ * при переключении недельного вида на месячный FullCalendar ПЕРЕИСПОЛЬЗУЕТ
+ * уже смонтированные ячейки — `didMount` для них повторно не зовётся, а
+ * подпись внутри перерисовывается заново, и «г.» возвращается (поймали на
+ * живой проверке: после переключения вида ровно строка переиспользованных
+ * ячеек оставалась с «г.»). Наблюдатель же ловит любую перерисовку.
+ * Зацикливания нет: `stripYearSuffixAttrs` пишет атрибут, только если он
+ * реально меняется, поэтому вызванная нашей же правкой итерация ничего не
+ * пишет и цепочка обрывается.
+ */
+function useStripYearSuffix(rootRef: React.RefObject<HTMLElement | null>) {
+  useEffect(() => {
+    const root = rootRef.current
+    if (!root) return
+    const clean = () => root.querySelectorAll(DAY_LABEL_SELECTOR).forEach(stripYearSuffixAttrs)
+    clean()
+    const observer = new MutationObserver(clean)
+    observer.observe(root, { subtree: true, childList: true, attributeFilter: ['aria-label', 'title'] })
+    return () => observer.disconnect()
+  }, [rootRef])
+}
+
 /**
  * Форма аргумента, который FullCalendar передаёт функции-`titleFormat`
  * (`VerboseFormattingArg` из @fullcalendar/core/internal-common — не
@@ -152,6 +203,9 @@ export function ConferenceCalendar({
 }: ConferenceCalendarProps) {
   const calendarRef = useRef<FullCalendar | null>(null)
   const titleRef = useRef<HTMLSpanElement | null>(null)
+  const gridRef = useRef<HTMLDivElement | null>(null)
+
+  useStripYearSuffix(gridRef)
 
   // См. комментарий у `latestOnEditClick` в начале файла — синхронизируем
   // переменную вместо того, чтобы замыкать пропс напрямую в renderEventContent.
@@ -269,7 +323,7 @@ export function ConferenceCalendar({
         </div>
       </div>
 
-      <div className="vc-calendar" aria-busy={isLoading}>
+      <div className="vc-calendar" aria-busy={isLoading} ref={gridRef}>
         <FullCalendar
           ref={calendarRef}
           plugins={CALENDAR_PLUGINS}

frontend/src/components/layout/AppFooter.tsx

@@ -0,0 +1,34 @@
+import { useQuery } from '@tanstack/react-query'
+import { getHealth } from '@/api/health'
+import '@/styles/footer.css'
+
+/**
+ * Общий футер приложения: версия инстанса и копирайт со ссылкой на автора.
+ *
+ * Ставится на всех страницах, КРОМЕ комнаты конференции (`RoomPage`) — там
+ * полноэкранное видео и тулбар, футеру места нет. Раскладок в приложении
+ * несколько (`page-shell`, `AuthLayout`, `join-shell`, `lobby-shell`), поэтому
+ * компонент рендерит только собственный `<footer>`, а привязку к конкретной
+ * раскладке делает CSS (см. `styles/footer.css`).
+ *
+ * Версия — из публичного `GET /api/health` (авторизации не требует, годится и
+ * для экранов входа). Поле `version` опционально: если backend его не отдал,
+ * версию просто не показываем (см. `HealthOut.version`). Ключ запроса тот же
+ * `['health']`, что и у админки, — react-query отдаст общий закэшированный
+ * результат, лишнего запроса не будет.
+ *
+ * Год — текущий, из `Date` (не захардкожен): страница живёт в браузере
+ * пользователя и не должна устаревать 1 января.
+ */
+export function AppFooter() {
+  const { data: health } = useQuery({ queryKey: ['health'], queryFn: getHealth, retry: false })
+
+  return (
+    <footer className="app-footer">
+      VidConf{health?.version ? ` · v${health.version}` : ''} · © {new Date().getFullYear()} · by{' '}
+      <a href="https://github.com/MaxRonzhin" target="_blank" rel="noopener">
+        MaxRonzhin
+      </a>
+    </footer>
+  )
+}

frontend/src/components/room/DeviceSettingsDialog.tsx

@@ -1,23 +1,51 @@
+import { useEffect, useRef, useState } from 'react'
 import { X } from 'lucide-react'
 import { useMediaDeviceSelect, usePersistentUserChoices } from '@livekit/components-react'
 import { useToast } from '@/components/ui/ToastProvider'
+import { useModalDismiss } from '@/hooks/useModalDismiss'
+import { isAudioOutputSelectable, saveAudioOutputDeviceId } from '@/lib/audioOutputDevice'
 
 interface DeviceSettingsDialogProps {
   onClose: () => void
 }
 
+/** Совпадает с мобильным брейкпоинтом комнаты (`room.css`, `max-width: 600px`) — ниже него панель рендерится шторкой снизу вместо модалки. */
+const COMPACT_VIEWPORT_QUERY = '(max-width: 600px)'
+/** Свайп ручки шторки вниз дальше этого порога (px) закрывает панель, меньше — она возвращается на место. */
+const SHEET_DISMISS_THRESHOLD_PX = 80
+
 /** Человекочитаемая подпись пункта списка устройств — `label` пуст, пока нет разрешения на медиа. */
 function deviceLabel(device: MediaDeviceInfo, index: number, fallback: string): string {
   return device.label || `${fallback} ${index + 1}`
 }
 
+/** Живое отслеживание мобильной ширины — та же схема, что системная тема в `useTheme.ts` (matchMedia + change-листенер). */
+function useIsCompactViewport(): boolean {
+  const [isCompact, setIsCompact] = useState(() => window.matchMedia(COMPACT_VIEWPORT_QUERY).matches)
+
+  useEffect(() => {
+    const media = window.matchMedia(COMPACT_VIEWPORT_QUERY)
+    const handleChange = (event: MediaQueryListEvent) => setIsCompact(event.matches)
+    media.addEventListener('change', handleChange)
+    return () => media.removeEventListener('change', handleChange)
+  }, [])
+
+  return isCompact
+}
+
 /**
- * Диалог «Настройки устройств» — два селекта
+ * Панель «Настройки устройств» — три селекта на хуках `@livekit/components-react`:
- * на хуках `@livekit/components-react`: список устройств и переключение —
+ * список устройств и переключение целиком в `useMediaDeviceSelect` (сама
- * целиком в `useMediaDeviceSelect` (сама подписана на
+ * подписана на `RoomEvent.MediaDevicesChanged`), персист выбора микрофона/камеры —
- * `RoomEvent.MediaDevicesChanged`), персист выбора — в `usePersistentUserChoices`
+ * в `usePersistentUserChoices` (localStorage, читается заново при следующем
- * (localStorage, читается заново при следующем входе в комнату — см.
+ * входе в комнату — см. `RoomPage.tsx`, `options` пропс `LiveKitRoom`).
- * `RoomPage.tsx`, `options` пропс `LiveKitRoom`).
+ * Аудиовыход персистится отдельно (`lib/audioOutputDevice.ts`) — `LocalUserChoices`
+ * LiveKit про него не знает, а `RoomOptions.audioOutput` читает сохранённый
+ * `deviceId` при следующем подключении.
+ *
+ * На мобильной ширине (`useIsCompactViewport`) рендерится шторкой снизу вместо
+ * модалки — по клику вне, Escape (`useModalDismiss`) и свайпу вниз за ручку.
+ * Десктоп не меняется.
  *
  * ДОЛЖЕН рендериться внутри `<LiveKitRoom>`: `useMediaDeviceSelect` без явно
  * переданного `room` берёт активную комнату из `RoomContext` — вне контекста
@@ -29,6 +57,15 @@ export function DeviceSettingsDialog({ onClose }: DeviceSettingsDialogProps) {
   const { saveAudioInputDeviceId, saveVideoInputDeviceId } = usePersistentUserChoices()
   const mic = useMediaDeviceSelect({ kind: 'audioinput' })
   const camera = useMediaDeviceSelect({ kind: 'videoinput' })
+  const speaker = useMediaDeviceSelect({ kind: 'audiooutput' })
+  const speakerSelectable = isAudioOutputSelectable()
+  const isCompact = useIsCompactViewport()
+
+  useModalDismiss(onClose)
+
+  const dragStartYRef = useRef<number | null>(null)
+  const [dragOffset, setDragOffset] = useState(0)
+  const [isDragging, setIsDragging] = useState(false)
 
   async function handleMicChange(deviceId: string) {
     try {
@@ -49,15 +86,62 @@ export function DeviceSettingsDialog({ onClose }: DeviceSettingsDialogProps) {
     }
   }
 
+  async function handleSpeakerChange(deviceId: string) {
+    try {
+      await speaker.setActiveMediaDevice(deviceId)
+      saveAudioOutputDeviceId(deviceId)
+    } catch {
+      toast.show('Не удалось переключить вывод звука — устройство занято или отключено', 'error')
+    }
+  }
+
+  function handleHandleTouchStart(e: React.TouchEvent<HTMLDivElement>) {
+    dragStartYRef.current = e.touches[0].clientY
+    setIsDragging(true)
+  }
+
+  function handleHandleTouchMove(e: React.TouchEvent<HTMLDivElement>) {
+    if (dragStartYRef.current === null) return
+    const delta = e.touches[0].clientY - dragStartYRef.current
+    if (delta > 0) setDragOffset(delta)
+  }
+
+  function handleHandleTouchEnd() {
+    if (dragOffset > SHEET_DISMISS_THRESHOLD_PX) {
+      onClose()
+      return
+    }
+    dragStartYRef.current = null
+    setIsDragging(false)
+    setDragOffset(0)
+  }
+
   return (
     <div
-      className="room-modal-overlay"
+      className={isCompact ? 'room-sheet-overlay' : 'room-modal-overlay'}
       role="dialog"
       aria-modal="true"
       aria-labelledby="device-settings-title"
       onClick={onClose}
     >
-      <div className="room-modal-panel" onClick={(e) => e.stopPropagation()}>
+      <div
+        className={isCompact ? 'room-sheet-panel' : 'room-modal-panel'}
+        onClick={(e) => e.stopPropagation()}
+        style={
+          isCompact && dragOffset
+            ? { transform: `translateY(${dragOffset}px)`, transition: isDragging ? 'none' : undefined }
+            : undefined
+        }
+      >
+        {isCompact && (
+          <div
+            className="room-sheet-handle"
+            onTouchStart={handleHandleTouchStart}
+            onTouchMove={handleHandleTouchMove}
+            onTouchEnd={handleHandleTouchEnd}
+          />
+        )}
+
         <div className="room-modal-head">
           <h2 id="device-settings-title">Настройки устройств</h2>
           <button type="button" className="room-modal-close" aria-label="Закрыть" onClick={onClose}>
@@ -104,6 +188,34 @@ export function DeviceSettingsDialog({ onClose }: DeviceSettingsDialogProps) {
             ))}
           </select>
         </div>
+
+        {speakerSelectable ? (
+          <div className="room-field">
+            <label htmlFor="device-settings-speaker">Динамики</label>
+            <select
+              id="device-settings-speaker"
+              value={speaker.activeDeviceId}
+              onChange={(e) => void handleSpeakerChange(e.target.value)}
+            >
+              <option value="" disabled>
+                Определяется…
+              </option>
+              {speaker.devices.map((device, index) => (
+                <option key={device.deviceId} value={device.deviceId}>
+                  {deviceLabel(device, index, 'Динамик')}
+                </option>
+              ))}
+            </select>
+          </div>
+        ) : (
+          <div className="room-field">
+            <span className="room-field-label">Динамики</span>
+            <p className="room-field-hint">
+              Вывод звука (динамик, наушники, Bluetooth) переключается средствами системы — этот
+              браузер не позволяет управлять им со страницы.
+            </p>
+          </div>
+        )}
       </div>
     </div>
   )

frontend/src/components/room/RoomParticipantTile.tsx

@@ -1,4 +1,4 @@
-import { ScreenShare } from 'lucide-react'
+import { Pin, PinOff, ScreenShare } from 'lucide-react'
 import { Track } from 'livekit-client'
 import {
   AudioTrack,
@@ -19,6 +19,7 @@ import {
   type TrackReferenceOrPlaceholder,
 } from '@livekit/components-react'
 import { Avatar } from '@/components/ui/Avatar'
+import { stageTrackKey } from '@/components/room/stageFocus'
 
 /** Метаданные участника из LiveKit access-токена (см. `AccessToken.with_metadata` на backend) — JSON `{"avatar_url": "..."}`; у гостей отсутствуют. */
 interface ParticipantMetadata {
@@ -43,7 +44,7 @@ function parseAvatarUrl(metadata: string | undefined): string | null {
  * разметке (см. `node_modules/@livekit/components-react/src/components/participant/ParticipantTile.tsx`,
  * версия 2.9.23 — источник этой копии).
  */
-function TileBody({ onStopSharing }: { onStopSharing?: () => void }) {
+function TileBody({ onStopSharing, pinnedKey, onTogglePin }: TileControlsProps) {
   const trackReference = useEnsureTrackRef()
   const isEncrypted = useIsEncrypted(trackReference.participant)
   const autoManageSubscription = useFeatureContext()?.autoSubscription
@@ -60,6 +61,12 @@ function TileBody({ onStopSharing }: { onStopSharing?: () => void }) {
   const showSharingChip = Boolean(
     onStopSharing && trackReference.source === Track.Source.ScreenShare && trackReference.participant.isLocal,
   )
+  // Кнопка закрепления — только там, где сцена умеет закрепление (основное
+  // окно передаёт `onTogglePin`; в мини-плеере плитка одна, закреплять нечего).
+  // Ключ плитки берём из её собственного трека: в карусели/гриде плитки
+  // рендерятся шаблоном без пропсов, снаружи «какая это плитка» не передать.
+  const tileKey = stageTrackKey(trackReference)
+  const isPinned = pinnedKey === tileKey
 
   return (
     <>
@@ -106,6 +113,25 @@ function TileBody({ onStopSharing }: { onStopSharing?: () => void }) {
         <ConnectionQualityIndicator className="lk-participant-metadata-item" />
       </div>
       <FocusToggle trackRef={trackReference} />
+      {onTogglePin && (
+        <button
+          type="button"
+          className={`room-pin-toggle${isPinned ? ' is-pinned' : ''}`}
+          aria-pressed={isPinned}
+          title={isPinned ? 'Открепить' : 'Закрепить в основном окне'}
+          aria-label={
+            isPinned ? `Открепить: ${displayName}` : `Закрепить в основном окне: ${displayName}`
+          }
+          onClick={(e) => {
+            // Иначе клик долетит до самой плитки (`onParticipantClick`
+            // у `ParticipantTile`) — булавка не должна означать «клик по плитке».
+            e.stopPropagation()
+            onTogglePin(tileKey)
+          }}
+        >
+          {isPinned ? <PinOff aria-hidden="true" /> : <Pin aria-hidden="true" />}
+        </button>
+      )}
       {showSharingChip && (
         <div className="stage-sharing-chip">
           <ScreenShare className="lucide" aria-hidden="true" />
@@ -119,10 +145,8 @@ function TileBody({ onStopSharing }: { onStopSharing?: () => void }) {
   )
 }
 
-interface RoomParticipantTileProps {
+/** Управляющие элементы поверх плитки — общие для обёртки и её `TileBody`. */
-  trackRef?: TrackReferenceOrPlaceholder
+interface TileControlsProps {
-  disableSpeakingIndicator?: boolean
-  onParticipantClick?: (event: ParticipantClickEvent) => void
   /**
    * Остановить демонстрацию экрана — если передано, при рендере СВОЕЙ активной
    * демонстрации (Track.Source.ScreenShare + `participant.isLocal`) поверх
@@ -131,6 +155,23 @@ interface RoomParticipantTileProps {
    * в этом приложении не появляется (см. `RoomStage.tsx`).
    */
   onStopSharing?: () => void
+  /**
+   * Ключ закреплённой сейчас плитки (`identity:source`, см. `stageTrackKey`) —
+   * плитка сравнивает его со своим и подсвечивает булавку/рамку.
+   */
+  pinnedKey?: string | null
+  /**
+   * Закрепить/открепить эту плитку в основном окне. Передаёт свой ключ
+   * (плитки в карусели/гриде рендерятся шаблоном, снаружи их не различить).
+   * Не передан — кнопки-булавки на плитке нет (мини-плеер: плитка одна).
+   */
+  onTogglePin?: (key: string) => void
+}
+
+interface RoomParticipantTileProps extends TileControlsProps {
+  trackRef?: TrackReferenceOrPlaceholder
+  disableSpeakingIndicator?: boolean
+  onParticipantClick?: (event: ParticipantClickEvent) => void
 }
 
 /**
@@ -142,15 +183,20 @@ interface RoomParticipantTileProps {
  * собственного токена), и для удалённых.
  *
  * Пин-логика оригинала (`handleSubscribe`/сброс пина при отписке от трека)
- * сознательно опущена — приложение пока нигде не создаёт `LayoutContext`
+ * сознательно опущена — приложение нигде не создаёт `LayoutContext`, поэтому
- * (пиннинг плиток не реализован), поэтому в оригинале эта ветка и так была
+ * в оригинале эта ветка и так была мёртвым кодом без провайдера контекста (по
- * мёртвым кодом без провайдера контекста.
+ * той же причине ничего не рисует и штатный `FocusToggle` ниже). Своё
+ * закрепление участника (задача 3.1) сделано мимо `LayoutContext`: состояние —
+ * в `RoomStage`, кнопка — `.room-pin-toggle` здесь, выбор фокуса —
+ * `pickStageFocus`.
  */
 export function RoomParticipantTile({
   trackRef,
   disableSpeakingIndicator,
   onParticipantClick,
   onStopSharing,
+  pinnedKey,
+  onTogglePin,
 }: RoomParticipantTileProps) {
   return (
     <ParticipantTile
@@ -158,7 +204,7 @@ export function RoomParticipantTile({
       disableSpeakingIndicator={disableSpeakingIndicator}
       onParticipantClick={onParticipantClick}
     >
-      <TileBody onStopSharing={onStopSharing} />
+      <TileBody onStopSharing={onStopSharing} pinnedKey={pinnedKey} onTogglePin={onTogglePin} />
     </ParticipantTile>
   )
 }

frontend/src/components/room/RoomStage.tsx

@@ -1,5 +1,5 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
-import { Track } from 'livekit-client'
+import { Track, type Participant } from 'livekit-client'
 import {
   CarouselLayout,
   FocusLayoutContainer,
@@ -12,7 +12,7 @@ import {
   type TrackReferenceOrPlaceholder,
 } from '@livekit/components-react'
 import { RoomParticipantTile } from '@/components/room/RoomParticipantTile'
-import { pickStageFocus } from '@/components/room/stageFocus'
+import { pickStageFocus, stageTrackKey } from '@/components/room/stageFocus'
 
 /**
  * Стабильная (модульная, не пересоздаётся на каждый рендер) ссылка на
@@ -39,9 +39,45 @@ const STAGE_TRACK_SOURCES = [
   { source: Track.Source.ScreenShare, withPlaceholder: false },
 ]
 
-/** Ключ трека для `pickStageFocus` — см. обоснование в `stageFocus.ts`. */
+/**
-function stageTrackKey(t: TrackReferenceOrPlaceholder): string {
+ * Удержание фокуса основного окна при смене говорящего, мс.
-  return `${t.participant.identity}:${t.source}`
+ *
+ * Основное окно следует за спикером (`followSpeaker`, задача 3.2), и без
+ * удержания короткие реплики («ага», «угу») уводили бы большую плитку на
+ * секунду и возвращали обратно. Источник говорящих (`useSpeakingParticipants`
+ * поверх `RoomEvent.ActiveSpeakersChanged`) сам по себе не дребезжит, но
+ * реплику длиной в полсекунды он честно отдаёт как смену состава.
+ *
+ * Значение подобрано от периода самого события: LiveKit пересчитывает активных
+ * спикеров примерно раз в 0.5 с, то есть короткая реплика — это 1–2 обновления.
+ * 1.2 с ≈ 2–3 обновления: блик до 1.2 с не проходит вовсе (значение успевает
+ * вернуться обратно, таймер перезапускается), а осмысленная фраза переключает
+ * фокус с задержкой, которая на глаз читается как плавность, а не как тормоз.
+ * Меньше (~0.6 с) — короткие «ага» всё ещё пролезают, больше (~2 с) — заметно
+ * запаздывает переход на нового докладчика.
+ */
+const SPEAKER_HOLD_MS = 1200
+
+/**
+ * Возвращает состав говорящих, «успокоенный» удержанием: новое значение
+ * применяется, только если оно продержалось `holdMs` без изменений. Короткая
+ * реплика меняет состав и возвращает его обратно раньше таймера — тогда
+ * применять уже нечего (cleanup эффекта гасит таймер, а новое значение
+ * сравнивается по ссылке с текущим).
+ *
+ * `holdMs <= 0` — удержания нет, значение отдаётся как есть (режим PiP: там
+ * фокус обязан следовать за говорящим мгновенно, поведение не менялось).
+ */
+function useSteadySpeakers(speakers: Participant[], holdMs: number): Participant[] {
+  const [steady, setSteady] = useState(speakers)
+
+  useEffect(() => {
+    if (holdMs <= 0 || speakers === steady) return
+    const timer = setTimeout(() => setSteady(speakers), holdMs)
+    return () => clearTimeout(timer)
+  }, [speakers, steady, holdMs])
+
+  return holdMs <= 0 ? speakers : steady
 }
 
 /**
@@ -75,23 +111,27 @@ function stageTrackKey(t: TrackReferenceOrPlaceholder): string {
  *
  * Проп `variant="pip"` — для рендера
  * ВНУТРИ мини-плеера (Document PiP, портал в `RoomPage.tsx`). В этом режиме
- * показываем ТОЛЬКО одну крупную плитку активного окна — без карусели/грида
+ * показываем ТОЛЬКО одну крупную плитку активного окна — без карусели/грида.
- * — и фокус ЖИВО следует за активным спикером (см. `followSpeaker` у
+ *
- * `pickStageFocus`), а не удерживается, как в основном окне. Основной рендер
+ * Фокус следует за активным спикером в ОБОИХ вариантах (`followSpeaker` у
- * (`variant="full"`, дефолт) не меняется вовсе.
+ * `pickStageFocus`; для основного окна — с 0.0.6, задача 3.2), но по-разному:
+ * PiP переключается мгновенно и всегда показывает говорящего, а основное окно
+ * ждёт `SPEAKER_HOLD_MS` (не дёргается на коротких репликах), не уводит из
+ * фокуса живую демонстрацию экрана (`holdScreenShare`) и умеет закрепление
+ * участника (`pinnedKey`, задача 3.1) — кнопка-булавка на плитке.
  */
 export function RoomStage({ variant = 'full' }: { variant?: 'full' | 'pip' }) {
   const room = useRoomContext()
   const tracks = useTracks(STAGE_TRACK_SOURCES, {
     onlySubscribed: false,
   })
-  // Только для PiP (см. followSpeaker ниже) — активные спикеры уже
+  // Активные спикеры уже отсортированы SDK по громкости
-  // отсортированы SDK по громкости (`Room.activeSpeakers`, обновляются по
+  // (`Room.activeSpeakers`, обновляются по `RoomEvent.ActiveSpeakersChanged`,
-  // `RoomEvent.ActiveSpeakersChanged`, событие шлётся лишь при РЕАЛЬНОЙ смене
+  // событие шлётся лишь при РЕАЛЬНОЙ смене состава/порядка говорящих — не
-  // состава/порядка говорящих — не дребезжит на каждый чих, в отличие от
+  // дребезжит на каждый чих, в отличие от сырого `participant.isSpeaking`).
-  // сырого `participant.isSpeaking`). Хук вызывается безусловно (Rules of
+  // Основное окно поверх этого ещё и удерживает состав (см. `useSteadySpeakers`
-  // Hooks) — для `variant="full"` его результат просто не используется.
+  // и `SPEAKER_HOLD_MS`), PiP берёт значение как есть.
-  const speakingParticipants = useSpeakingParticipants()
+  const speakingParticipants = useSteadySpeakers(useSpeakingParticipants(), variant === 'pip' ? 0 : SPEAKER_HOLD_MS)
 
   const cameraTracks = tracks.filter((t) => t.source === Track.Source.Camera)
   const screenShareTracks = tracks.filter((t) => isTrackReference(t) && t.source === Track.Source.ScreenShare)
@@ -121,47 +161,66 @@ export function RoomStage({ variant = 'full' }: { variant?: 'full' | 'pip' }) {
   // новый массив только когда реально что-то изменилось (см. комментарий у
   // `STAGE_TRACK_SOURCES` про стабильность ссылки).
   //
-  // Для PiP (`variant="pip"`) пересчёт триггерится ЕЩЁ и сменой
+  // Пересчёт триггерится ещё и сменой `speakingParticipants` (тоже сравнение
-  // `speakingParticipants` (тоже сравнение по ссылке — хук отдаёт новый
+  // по ссылке — хук отдаёт новый массив только при реальном изменении состава/
-  // массив только при реальном изменении состава/порядка говорящих), и
+  // порядка говорящих), и сменой закрепления (`pinnedKey`) — оба входа
-  // передаётся `followSpeaker: true` — фокус живо переключается на нового
+  // `pickStageFocus` меняют результат без изменения самих треков.
-  // спикера, а не удерживает прежний (см. правило 2 в `pickStageFocus`). Для
-  // основного окна (`variant="full"`) `speakingChanged` всегда `false` —
-  // поведение байт-в-байт то же, что было до этой правки.
   const [prevTracks, setPrevTracks] = useState(tracks)
   const [prevSpeakingParticipants, setPrevSpeakingParticipants] = useState(speakingParticipants)
   const [focusKey, setFocusKey] = useState<string | null>(null)
+  // Закрепление живёт в состоянии сцены (задача 3.1): ключ `identity:source`
+  // плитки, которую пользователь закрепил булавкой; `null` — закрепления нет.
+  // Только для основного окна — в PiP плитка одна и закреплять нечего.
+  const [pinnedKey, setPinnedKey] = useState<string | null>(null)
+  const [prevPinnedKey, setPrevPinnedKey] = useState<string | null>(null)
+
+  const cameraKeys = cameraTracks.map(stageTrackKey)
+  const screenShareKeys = screenShareTracks.map(stageTrackKey)
+  // Закреплённый участник вышел из комнаты (его ключа нет ни среди камер — а
+  // камера есть у КАЖДОГО участника хотя бы плейсхолдером, — ни среди
+  // демонстраций) — закрепление снимаем, чтобы сцена не осталась в подвешенном
+  // состоянии и булавка не «висела» на исчезнувшем ключе.
+  const pinnedAlive = pinnedKey !== null && (cameraKeys.includes(pinnedKey) || screenShareKeys.includes(pinnedKey))
 
   const tracksChanged = tracks !== prevTracks
-  const speakingChanged = variant === 'pip' && speakingParticipants !== prevSpeakingParticipants
+  const speakingChanged = speakingParticipants !== prevSpeakingParticipants
+  const pinnedChanged = pinnedKey !== prevPinnedKey
 
-  if (tracksChanged || speakingChanged) {
+  if (pinnedKey !== null && !pinnedAlive) {
+    setPinnedKey(null)
+  }
+
+  if (tracksChanged || speakingChanged || pinnedChanged) {
     const prevKeys = prevTracks.map(stageTrackKey)
     if (tracksChanged) setPrevTracks(tracks)
     if (speakingChanged) setPrevSpeakingParticipants(speakingParticipants)
-    // Источник «говорящих» — РАЗНЫЙ для основного окна и PiP, намеренно:
+    if (pinnedChanged) setPrevPinnedKey(pinnedKey)
-    // здесь строго тот же расчёт, что был в основном окне ДО этой правки
+    // Говорящие — упорядоченные по громкости камера-ключи: нужен именно
-    // (`participant.isSpeaking`, без сортировки — фолбэк только на первый
+    // порядок (взять самого громкого) и именно throttled-источник SDK
-    // рендер, дребезг неважен, см. JSDoc правила 3/4 в stageFocus.ts), а для
+    // (`useSpeakingParticipants`, в основном окне ещё и с удержанием), чтобы
-    // PiP — упорядоченный по громкости `speakingParticipants` (нужен именно
+    // followSpeaker не дёргался на каждый чих. Сырой `participant.isSpeaking`,
-    // порядок, чтобы взять самого громкого, и именно throttled-источник SDK,
+    // на котором основное окно жило до 0.0.6, дребезжит и для слежения за
-    // чтобы followSpeaker не дёргался на каждый чих).
+    // спикером не годится.
-    const speakingCameraKeys =
+    const speakingCameraKeys = speakingParticipants
-      variant === 'pip'
-        ? speakingParticipants
       .map((p) => cameraTracks.find((t) => t.participant.identity === p.identity))
       .filter((t): t is TrackReferenceOrPlaceholder => Boolean(t))
       .map(stageTrackKey)
-        : cameraTracks.filter((t) => t.participant.isSpeaking).map(stageTrackKey)
     const result = pickStageFocus({
-      cameraKeys: cameraTracks.map(stageTrackKey),
+      cameraKeys,
-      screenShareKeys: screenShareTracks.map(stageTrackKey),
+      screenShareKeys,
       speakingCameraKeys,
+      // Приоритет «говорящий с камерой выше говорящего без камеры» — только
+      // основному окну: PiP по договорённости ведёт себя ровно как раньше.
+      cameraKeysWithVideo:
+        variant === 'pip'
+          ? []
+          : cameraTracks.filter((t) => isTrackReference(t) && !t.publication.isMuted).map(stageTrackKey),
       prevKeys,
       prevFocusKey: focusKey,
-      followSpeaker: variant === 'pip',
+      pinnedKey: pinnedAlive ? pinnedKey : null,
-      // Только для PiP — в основном окне фолбэк на «первый трек» не менялся
+      followSpeaker: true,
-      // (см. JSDoc про speakingChanged выше: поведение full-варианта не трогаем).
+      holdScreenShare: variant !== 'pip',
+      // Только для PiP — в основном окне фолбэк на «первый трек» не менялся.
       localKey: variant === 'pip' ? `${room.localParticipant.identity}:${Track.Source.Camera}` : null,
     })
     if (result.focusKey !== focusKey) {
@@ -192,6 +251,15 @@ export function RoomStage({ variant = 'full' }: { variant?: 'full' | 'pip' }) {
     void room.localParticipant.setScreenShareEnabled(false)
   }
 
+  /**
+   * Закрепить/открепить плитку: повторное нажатие на уже закреплённой снимает
+   * закрепление. Ключ приходит из самой плитки (она знает свой трек из
+   * контекста — в карусели/гриде плитки рендерятся шаблоном, без пропсов).
+   */
+  function handleTogglePin(key: string) {
+    setPinnedKey((prev) => (prev === key ? null : key))
+  }
+
   // Мини-плеер показывает ТОЛЬКО активное окно — без карусели/
   // грида, одна плитка на весь контейнер (см. `.room-single-tile`,
   // `styles/room.css`). `focusTrack` уже вычислен выше тем же `pickStageFocus`
@@ -209,17 +277,24 @@ export function RoomStage({ variant = 'full' }: { variant?: 'full' | 'pip' }) {
     <section className="stage">
       {!hasScreenShare && (!focusTrack || carouselTracks.length === 0) ? (
         <GridLayout tracks={tracks} className="stage-tiles">
-          <RoomParticipantTile />
+          <RoomParticipantTile pinnedKey={pinnedKey} onTogglePin={handleTogglePin} />
         </GridLayout>
       ) : (
         <FocusLayoutContainer className="stage-tiles">
           <CarouselLayout tracks={carouselTracks}>
-            <RoomParticipantTile />
+            <RoomParticipantTile pinnedKey={pinnedKey} onTogglePin={handleTogglePin} />
           </CarouselLayout>
           {/* FocusLayout оригинала — лёгкая обёртка ровно над ParticipantTile
               (см. её исходник), поэтому вместо неё используем свою обёртку
               напрямую с тем же trackRef (аватар в фокус-плитке). */}
-          {focusTrack && <RoomParticipantTile trackRef={focusTrack} onStopSharing={handleStopSharing} />}
+          {focusTrack && (
+            <RoomParticipantTile
+              trackRef={focusTrack}
+              onStopSharing={handleStopSharing}
+              pinnedKey={pinnedKey}
+              onTogglePin={handleTogglePin}
+            />
+          )}
         </FocusLayoutContainer>
       )}
       <RoomAudioRenderer />

frontend/src/components/room/stageFocus.ts

@@ -1,9 +1,11 @@
 /**
  * Чистая функция выбора «сцены в фокусе» (демонстрация экрана).
  *
- * Никаких зависимостей от React/DOM/LiveKit SDK — на вход только примитивы,
+ * Никаких зависимостей от React/DOM/LiveKit SDK в РАНТАЙМЕ — на вход только
- * на выход тоже примитивы; можно покрыть unit-тестом при появлении раннера
+ * примитивы, на выход тоже примитивы; можно покрыть unit-тестом при появлении
- * (vitest в проект сознательно не вводим, тестируем вручную).
+ * раннера (vitest в проект сознательно не вводим, тестируем вручную).
+ * Единственный импорт из SDK — `import type` у `stageTrackKey` (тип стирается
+ * при компиляции, рантайм-зависимости не добавляет).
  *
  * Ключ трека — НЕ sid публикации и НЕ голая identity участника, а составной
  * `${identity}:${source}` (см. `RoomStage.tsx`, функция `stageTrackKey`):
@@ -20,9 +22,21 @@
  *   однозначность (camera и screen_share одного участника — разные ключи).
  */
 
+import type { TrackReferenceOrPlaceholder } from '@livekit/components-react'
+
 /** Вид источника трека на сцене. */
 export type StageFocusKind = 'camera' | 'screen_share'
 
+/**
+ * Ключ трека для `pickStageFocus` — см. обоснование схемы в начале файла.
+ * Живёт здесь (а не в `RoomStage.tsx`), потому что нужен обеим сторонам:
+ * сцене — чтобы считать фокус, плитке (`RoomParticipantTile`) — чтобы понять,
+ * закреплена ли именно она, и каким ключом сообщить о нажатии на «закрепить».
+ */
+export function stageTrackKey(t: TrackReferenceOrPlaceholder): string {
+  return `${t.participant.identity}:${t.source}`
+}
+
 export interface PickStageFocusInput {
   /** Ключи текущих камера-треков (один на участника — трек либо его плейсхолдер). */
   cameraKeys: readonly string[]
@@ -35,19 +49,51 @@ export interface PickStageFocusInput {
    * `followSpeaker`, для живого переключения фокуса.
    */
   speakingCameraKeys: readonly string[]
+  /**
+   * Подмножество `cameraKeys` с ЖИВЫМ видео (камера включена и не в мьюте) —
+   * среди нескольких одновременно говорящих такой участник выигрывает у
+   * говорящего с выключенной камерой: показывать крупно аватар-заглушку, когда
+   * рядом говорит человек с картинкой, бессмысленно. Не указан — приоритета
+   * нет, берётся первый (самый громкий) говорящий, как было раньше.
+   */
+  cameraKeysWithVideo?: readonly string[]
   /** Объединённый набор ключей (camera+screenshare) с ПРЕДЫДУЩЕГО рендера — определяет, какие screenshare-ключи «новые». */
   prevKeys: readonly string[]
   /** Ключ, что был в фокусе на предыдущем рендере; `null` — фокус ещё не выбирался. */
   prevFocusKey: string | null
   /**
-   * Режим мини-плеера (PiP): фокус должен ЖИВО следовать за
+   * Ключ трека, ЗАКРЕПЛЁННОГО пользователем в основном окне (кнопка-булавка на
-   * активным спикером (переключаться сразу, а не удерживать текущий), в
+   * плитке, состояние живёт в `RoomStage.tsx`); `null` — закрепления нет.
-   * отличие от основного окна сцены — там держим фокус, даже если заговорил
+   * Закрепление держит фокус вопреки говорящим, но уступает ЛЮБОЙ активной
-   * кто-то другой (см. правило 2 ниже и обоснование в `RoomStage.tsx` про
+   * демонстрации экрана (формулировка оператора: «перебивается только чьей-либо
-   * дребезг `isSpeaking` у фейковых медиапотоков). По умолчанию `false` —
+   * демонстрацией экрана») — а когда демонстрация закончилась, фокус
-   * поведение основного окна не меняется.
+   * возвращается именно на закреплённого, а не на того, кто был до неё:
+   * правило закрепления стоит ВЫШЕ удержания предыдущего фокуса.
+   * Ключ закреплённого участника, покинувшего комнату, игнорируется (его нет
+   * ни в `cameraKeys`, ни в `screenShareKeys`) — снимает закрепление вызывающая
+   * сторона.
+   */
+  pinnedKey?: string | null
+  /**
+   * Фокус должен ЖИВО следовать за активным спикером (переключаться сразу, а
+   * не удерживать текущий). С 0.0.6 включено и для мини-плеера (PiP), и для
+   * основного окна — решение оператора (этап 3, задача 3.2). Защита от
+   * дребезга — на стороне вызывающего: источник «говорящих» — throttled
+   * `useSpeakingParticipants()` поверх `RoomEvent.ActiveSpeakersChanged`, а в
+   * основном окне ещё и удержание в ~1.2 с (см. `useSteadySpeakers` в
+   * `RoomStage.tsx`), не сырой дребезжащий `participant.isSpeaking`.
+   * По умолчанию `false` — фокус удерживается (см. правило 5).
    */
   followSpeaker?: boolean
+  /**
+   * Живая демонстрация экрана в фокусе НЕ уступает заговорившему участнику
+   * (правило 3). Нужно основному окну: там демонстрация — это содержательный
+   * центр разговора, и уводить её из большого окна на каждую реплику нельзя.
+   * Мини-плеер (PiP) показывает ровно одну плитку и намеренно ведёт себя иначе
+   * — всегда показывает того, кто говорит, поэтому там `false` (поведение
+   * PiP не менялось с 0.0.4).
+   */
+  holdScreenShare?: boolean
   /**
    * Ключ локального участника (та же схема `identity:source`) — предпоследний
    * фолбэк, ПЕРЕД чисто первым элементом набора: если фокуса ещё не было и
@@ -64,6 +110,20 @@ export interface PickStageFocusResult {
   kind: StageFocusKind | null
 }
 
+/**
+ * Выбирает говорящего, которого стоит показать крупно: среди живых говорящих
+ * (упорядоченных по громкости) сначала ищем того, у кого включена камера, и
+ * только если такого нет — берём самого громкого как есть.
+ */
+function pickSpeakerKey(
+  speakingCameraKeys: readonly string[],
+  cameraKeys: readonly string[],
+  cameraKeysWithVideo: readonly string[],
+): string | null {
+  const liveSpeakers = speakingCameraKeys.filter((key) => cameraKeys.includes(key))
+  return liveSpeakers.find((key) => cameraKeysWithVideo.includes(key)) ?? liveSpeakers[0] ?? null
+}
+
 /**
  * Выбирает, какой трек показать крупно (в `FocusLayoutContainer`).
  *
@@ -72,24 +132,38 @@ export interface PickStageFocusResult {
  *    фокус безусловно переходит на него (последний из новых, если появилось
  *    сразу несколько), даже если до этого в фокусе была камера или другая
  *    демонстрация. Так же ведут себя типовые UI конференций (Google Meet).
- * 2. `followSpeaker` (только PiP): если сейчас есть говорящий — фокус СРАЗУ
+ * 2. Закрепление (`pinnedKey`, только основное окно): закреплённый участник
- *    переходит на него, даже если текущий фокус ещё жив. В основном окне
+ *    забирает фокус у говорящих и у удержания предыдущего фокуса, но уступает
- *    (`followSpeaker: false`) этот шаг пропускается — см. правило 3.
+ *    ЛЮБОЙ активной демонстрации экрана. Поэтому правило и стоит выше
- * 3. Иначе, если текущий фокус жив (остался среди camera/screenshare-ключей) —
+ *    удержания (правило 5): как только демонстрация закончилась и
+ *    `screenShareKeys` опустел, фокус возвращается на закреплённого, а не
+ *    остаётся на том, кто был в фокусе до демонстрации.
+ * 3. `holdScreenShare` (только основное окно): демонстрация, уже стоящая в
+ *    фокусе, не уступает заговорившему — иначе большое окно уводило бы шэр на
+ *    каждую реплику. В PiP шаг пропускается (там одна плитка и она всегда
+ *    показывает говорящего).
+ * 4. `followSpeaker`: если сейчас есть говорящий — фокус СРАЗУ переходит на
+ *    него, даже если текущий фокус ещё жив; среди одновременно говорящих
+ *    предпочитаем того, у кого включена камера (`cameraKeysWithVideo`).
+ *    При `followSpeaker: false` этот шаг пропускается — см. правило 5.
+ * 5. Иначе, если текущий фокус жив (остался среди camera/screenshare-ключей) —
  *    держим его: НЕ дёргаем фокус на каждый ре-рендер (изменение состава
- *    участников, дребезг isSpeaking и т.п.). Это и есть «стабильный фолбэк»
+ *    участников, дребезг isSpeaking и т.п.). Это и есть «стабильный фолбэк»,
- *    для PiP, когда никто не говорит — держим предыдущего активного.
+ *    когда никто не говорит — держим предыдущего активного.
- * 4. Иначе (фокуса не было или он пропал) — приоритет активной демонстрации
+ * 6. Иначе (фокуса не было или он пропал) — приоритет активной демонстрации
- *    над камерой; среди камер — активный спикер, иначе `localKey` (если
+ *    над камерой; среди камер — активный спикер (снова с приоритетом камеры),
- *    указан и жив), иначе первая по порядку.
+ *    иначе `localKey` (если указан и жив), иначе первая по порядку.
  */
 export function pickStageFocus({
   cameraKeys,
   screenShareKeys,
   speakingCameraKeys,
+  cameraKeysWithVideo = [],
   prevKeys,
   prevFocusKey,
+  pinnedKey = null,
   followSpeaker = false,
+  holdScreenShare = false,
   localKey = null,
 }: PickStageFocusInput): PickStageFocusResult {
   if (cameraKeys.length === 0 && screenShareKeys.length === 0) {
@@ -102,8 +176,25 @@ export function pickStageFocus({
     return { focusKey: newScreenShareKeys[newScreenShareKeys.length - 1], kind: 'screen_share' }
   }
 
+  if (pinnedKey) {
+    // Закреплена сама демонстрация — она и есть «активная демонстрация»,
+    // уступать нечему (UI позволяет закрепить любую плитку, включая шэр).
+    if (screenShareKeys.includes(pinnedKey)) {
+      return { focusKey: pinnedKey, kind: 'screen_share' }
+    }
+    // Закреплена камера: пока в комнате идёт чья-то демонстрация, она
+    // перебивает закрепление (правило оператора) — идём дальше по списку.
+    if (cameraKeys.includes(pinnedKey) && screenShareKeys.length === 0) {
+      return { focusKey: pinnedKey, kind: 'camera' }
+    }
+  }
+
+  if (holdScreenShare && prevFocusKey && screenShareKeys.includes(prevFocusKey)) {
+    return { focusKey: prevFocusKey, kind: 'screen_share' }
+  }
+
   if (followSpeaker) {
-    const liveSpeaker = speakingCameraKeys.find((key) => cameraKeys.includes(key))
+    const liveSpeaker = pickSpeakerKey(speakingCameraKeys, cameraKeys, cameraKeysWithVideo)
     if (liveSpeaker) {
       return { focusKey: liveSpeaker, kind: 'camera' }
     }
@@ -120,7 +211,7 @@ export function pickStageFocus({
     return { focusKey: screenShareKeys[screenShareKeys.length - 1], kind: 'screen_share' }
   }
 
-  const speaking = speakingCameraKeys.find((key) => cameraKeys.includes(key))
+  const speaking = pickSpeakerKey(speakingCameraKeys, cameraKeys, cameraKeysWithVideo)
   if (speaking) {
     return { focusKey: speaking, kind: 'camera' }
   }

frontend/src/lib/audioOutputDevice.ts

@@ -0,0 +1,33 @@
+const STORAGE_KEY = 'vidconf-audio-output-device'
+
+/**
+ * Поддержка выбора устройства аудиовывода — определяем по наличию
+ * `setSinkId` в рантайме, НЕ по User-Agent: в iOS Safari метода нет вообще
+ * (маршрутизация звука там целиком на стороне ОС), в Android Chrome есть.
+ */
+export function isAudioOutputSelectable(): boolean {
+  return typeof HTMLMediaElement !== 'undefined' && 'setSinkId' in HTMLMediaElement.prototype
+}
+
+/**
+ * Персист выбранного устройства вывода — отдельно от `usePersistentUserChoices`
+ * LiveKit: их `LocalUserChoices` знает только про вход (микрофон/камера),
+ * поля для аудиовыхода там нет.
+ */
+export function loadAudioOutputDeviceId(): string {
+  try {
+    return localStorage.getItem(STORAGE_KEY) ?? ''
+  } catch {
+    // localStorage недоступен (приватный режим/политики браузера) — без
+    // сохранённого выбора, устройство по умолчанию.
+    return ''
+  }
+}
+
+export function saveAudioOutputDeviceId(deviceId: string): void {
+  try {
+    localStorage.setItem(STORAGE_KEY, deviceId)
+  } catch {
+    // Сохранение недоступно — выбор продержится до конца сессии в комнате.
+  }
+}

frontend/src/pages/AdminPage.tsx

@@ -1,11 +1,10 @@
 import { useState } from 'react'
-import { useQuery } from '@tanstack/react-query'
 import { ShellTopbar } from '@/components/layout/ShellTopbar'
+import { AppFooter } from '@/components/layout/AppFooter'
 import { AdminConferencesTab } from '@/components/admin/AdminConferencesTab'
 import { AdminUsersTab } from '@/components/admin/AdminUsersTab'
 import { AdminTeamsTab } from '@/components/admin/AdminTeamsTab'
 import { AdminSettingsTab } from '@/components/admin/AdminSettingsTab'
-import { getHealth } from '@/api/health'
 import '@/styles/lobby.css'
 import '@/styles/calendar.css'
 import '@/styles/admin.css'
@@ -30,10 +29,6 @@ const TABS: { value: AdminTab; label: string }[] = [
  */
 export function AdminPage() {
   const [tab, setTab] = useState<AdminTab>('conferences')
-  // Версия инстанса для футера — поле `version` в `/api/health`;
-  // если его нет в ответе, футер версию просто не показывает
-  // (см. `HealthOut.version`).
-  const { data: health } = useQuery({ queryKey: ['health'], queryFn: getHealth, retry: false })
 
   return (
     <div className="admin-page page-shell">
@@ -63,11 +58,8 @@ export function AdminPage() {
         {tab === 'users' && <AdminUsersTab />}
         {tab === 'teams' && <AdminTeamsTab />}
         {tab === 'settings' && <AdminSettingsTab />}
-
-        <footer className="admin-footer">
-          VidConf{health?.version ? ` · v${health.version}` : ''}
-        </footer>
       </main>
+      <AppFooter />
     </div>
   )
 }

frontend/src/pages/CalendarPage.tsx

@@ -2,6 +2,7 @@ import { useCallback, useMemo, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { Plus } from 'lucide-react'
 import { ShellTopbar } from '@/components/layout/ShellTopbar'
+import { AppFooter } from '@/components/layout/AppFooter'
 import { ConferenceCalendar, type CalendarViewMode } from '@/components/calendar/ConferenceCalendar'
 import { ConferenceFormCard } from '@/components/calendar/ConferenceFormCard'
 import { ConferenceOccurrenceDialog } from '@/components/calendar/ConferenceOccurrenceDialog'
@@ -102,6 +103,7 @@ export function CalendarPage() {
           />
         </div>
       </main>
+      <AppFooter />
 
       {isFormOpen && (
         <ConferenceFormModal

frontend/src/pages/JoinPage.tsx

@@ -9,6 +9,7 @@ import {
 } from '@/api/conferences'
 import { ApiError, errorDetail } from '@/api/client'
 import { useAuth } from '@/auth/useAuth'
+import { AppFooter } from '@/components/layout/AppFooter'
 import { LogoMark } from '@/components/ui/LogoMark'
 import { ThemeToggle } from '@/components/ui/ThemeToggle'
 import { parseJoinQuery } from '@/lib/parseJoinQuery'
@@ -409,6 +410,7 @@ export function JoinPage() {
           </section>
         )}
       </main>
+      <AppFooter />
     </div>
   )
 }

frontend/src/pages/LobbyPage.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Calendar, Link2, User, Video } from 'lucide-react'
 import { ShellTopbar } from '@/components/layout/ShellTopbar'
+import { AppFooter } from '@/components/layout/AppFooter'
 import { LogoMedallion } from '@/components/ui/LogoMark'
 import { createConference } from '@/api/conferences'
 import { useToast } from '@/components/ui/ToastProvider'
@@ -113,6 +114,7 @@ export function LobbyPage() {
           </div>
         </div>
       </main>
+      <AppFooter />
     </div>
   )
 }

frontend/src/pages/MyConferencesPage.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom'
 import { useQuery } from '@tanstack/react-query'
 import { AlertTriangle, CheckCircle2, Clock, Lock, Pencil, Play, Repeat } from 'lucide-react'
 import { ShellTopbar } from '@/components/layout/ShellTopbar'
+import { AppFooter } from '@/components/layout/AppFooter'
 import { ConferenceFormCard } from '@/components/calendar/ConferenceFormCard'
 import { ConferenceHoverCard } from '@/components/ui/ConferenceHoverCard'
 import { CopyPill } from '@/components/ui/CopyPill'
@@ -212,6 +213,7 @@ export function MyConferencesPage() {
           </section>
         )}
       </main>
+      <AppFooter />
 
       {editingConference && (
         <div className="modal-overlay" role="dialog" aria-modal="true" onClick={() => setEditingConference(null)}>

frontend/src/pages/ProfilePage.tsx

@@ -2,6 +2,7 @@ import { useRef, useState, type FormEvent } from 'react'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { Trash2, Upload } from 'lucide-react'
 import { ShellTopbar } from '@/components/layout/ShellTopbar'
+import { AppFooter } from '@/components/layout/AppFooter'
 import { Avatar } from '@/components/ui/Avatar'
 import { Select } from '@/components/ui/Select'
 import { useToast } from '@/components/ui/ToastProvider'
@@ -271,6 +272,7 @@ export function ProfilePage() {
           </form>
         </section>
       </main>
+      <AppFooter />
     </div>
   )
 }

frontend/src/pages/RoomPage.tsx

@@ -17,6 +17,7 @@ import { RoomStage } from '@/components/room/RoomStage'
 import { RoomToolbar } from '@/components/room/RoomToolbar'
 import { ChatPanel } from '@/components/room/ChatPanel'
 import { DeviceSettingsDialog } from '@/components/room/DeviceSettingsDialog'
+import { loadAudioOutputDeviceId } from '@/lib/audioOutputDevice'
 
 interface RoomJoinState {
   livekitUrl: string
@@ -163,6 +164,12 @@ export function RoomPage() {
     () => ({
       audioCaptureDefaults: { deviceId: userChoices.audioDeviceId || undefined },
       videoCaptureDefaults: { deviceId: userChoices.videoDeviceId || undefined },
+      // Аудиовыход (колонки/наушники/bluetooth) — отдельный персист, не через
+      // usePersistentUserChoices: LocalUserChoices LiveKit про него не знает
+      // (см. lib/audioOutputDevice.ts). Читаем один раз при монтировании —
+      // как и с audio/videoDeviceId, смена применяется через DeviceSettingsDialog
+      // (setActiveMediaDevice), а не пересозданием roomOptions.
+      audioOutput: { deviceId: loadAudioOutputDeviceId() || undefined },
     }),
     [userChoices],
   )

frontend/src/styles/admin.css

@@ -168,10 +168,8 @@
   .admin-page .settings-grid { grid-template-columns: 1fr; }
 }
 
-/* ---------- Футер админки ----------
+/* Футер админки (`.admin-footer`) убран в 0.0.6: вместо него общий для всех
-   Версия инстанса из `/api/health` (см. AdminPage.tsx) — до появления поля
+   страниц компонент `AppFooter` (см. `styles/footer.css`). */
-   на backend строка сокращается до одного «VidConf» без версии. */
-.admin-page .admin-footer { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-border); font: var(--text-caption); color: var(--color-ink-400); text-align: center; }
 
 /* =====================================================================
  * Тёмная тема: заливка var(--color-ink-700) (индиго) сочеталась с жёстким

frontend/src/styles/auth.css

@@ -27,7 +27,11 @@
   border-radius: 50%;
   background: radial-gradient(circle at 30% 30%, rgba(212, 242, 227, 0.45), rgba(212, 242, 227, 0) 70%);
 }
-.brand-copy { z-index: 1; }
+/* `margin-block: auto` держит блок по центру свободной высоты панели. Нужно
+   с тех пор, как из панели убрали нижнюю строку копирайта (она переехала в
+   общий футер): у `.brand-panel` осталось два потомка вместо трёх, и
+   `justify-content: space-between` иначе прижал бы текст к самому низу. */
+.brand-copy { z-index: 1; margin-block: auto; }
 .eyebrow {
   font: var(--text-caption);
   letter-spacing: 0.08em;

frontend/src/styles/footer.css

@@ -0,0 +1,38 @@
+/*
+ * VidConf — общий футер приложения (см. `components/layout/AppFooter.tsx`).
+ *
+ * Файл импортируется самим компонентом, а не страницами: футер стоит в четырёх
+ * разных раскладках (`page-shell`, `AuthLayout`, `join-shell`, `lobby-shell`),
+ * и таскать импорт по всем страницам смысла нет.
+ *
+ * Футер — обычный блок в потоке (не `position: fixed`), поэтому контент он
+ * не перекрывает ни на какой высоте экрана.
+ */
+
+.app-footer {
+  padding: var(--space-5) var(--space-4);
+  font: var(--text-caption);
+  color: var(--color-ink-400);
+  text-align: center;
+}
+.app-footer a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
+.app-footer a:hover { color: var(--color-ink-700); }
+
+/* Оболочка страниц (`page-shell`): выравниваем футер по ширине контента
+   (`main.page-main` — max-width 1440 + боковые отступы) и отделяем линией,
+   как это делал прежний футер админки. */
+.page-shell .app-footer {
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: var(--space-4) var(--space-8) var(--space-6);
+  border-top: 1px solid var(--color-border);
+}
+
+/* Экраны auth: футер — последний элемент правой колонки с формой, поэтому
+   ограничиваем его шириной самой формы (`.screen-block`, 440px), иначе
+   центрированная строка «уезжала» бы вправо от неё. */
+.form-panel .app-footer { max-width: 440px; width: 100%; padding-inline: 0; margin-top: var(--space-8); }
+
+@media (max-width: 640px) {
+  .page-shell .app-footer { padding: var(--space-4) var(--space-4) var(--space-5); }
+}

frontend/src/styles/room.css

@@ -378,6 +378,48 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; }
   font-family: var(--font-body);
 }
 .room-field select:focus { outline: none; border-color: var(--color-room-focus-ring); }
+.room-field-label { display: block; font: var(--text-body); font-weight: 600; color: var(--color-room-text-primary); margin-bottom: var(--space-2); }
+.room-field-hint { font: var(--text-body); color: var(--color-room-text-secondary); margin: 0; }
+
+/*
+ * ---------- Шторка «Настройки устройств» на мобильном ----------
+ * Тот же диалог (`DeviceSettingsDialog`), что модалка выше, — только контейнер
+ * снизу вместо центра экрана: `.room-sheet-overlay`/`.room-sheet-panel` вместо
+ * `.room-modal-overlay`/`.room-modal-panel`, разметка полей (`.room-field` и
+ * ниже) общая. Ручка `.room-sheet-handle` — свайп вниз для закрытия (JS считает
+ * смещение пальца и сам решает, закрывать или вернуть панель на место;
+ * `transition` тут — только пружина возврата, во время самого драга
+ * компонент подставляет инлайновый `transition: none`).
+ */
+.room-sheet-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  z-index: 200;
+}
+.room-sheet-panel {
+  background: var(--color-room-surface-raised);
+  border: 1px solid var(--color-room-tile-border);
+  border-bottom: none;
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+  box-shadow: var(--shadow-room-panel);
+  padding: var(--space-4) var(--space-6) calc(var(--space-6) + env(safe-area-inset-bottom));
+  width: 100%;
+  max-height: 80vh;
+  overflow-y: auto;
+  transition: transform 160ms ease-out;
+}
+.room-sheet-handle {
+  width: 40px;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--color-room-tile-border);
+  margin: 0 auto var(--space-4);
+  touch-action: none;
+}
 
 /*
  * ---------- Чип «Вы демонстрируете экран» ----------
@@ -416,6 +458,52 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; }
 }
 .stage-sharing-chip button:hover { filter: brightness(0.95); }
 
+/*
+ * ---------- Кнопка закрепления участника (булавка) ----------
+ * Рендерится внутри `RoomParticipantTile` (см. её `TileBody`), т.е. внутри
+ * `.lk-participant-tile` — тот у @livekit/components-styles уже
+ * `position: relative`. Геометрия и логика появления повторяют штатную
+ * `.lk-focus-toggle-button` той же библиотеки (правый верхний угол, видна по
+ * наведению) — чтобы плитка выглядела цельно, а не «нашей кнопкой поверх
+ * чужой». Отличие: у закреплённой плитки булавка видна ВСЕГДА и подсвечена —
+ * закрепление должно читаться без наведения.
+ */
+.room-pin-toggle {
+  position: absolute;
+  top: 0.25rem;
+  right: 0.25rem;
+  z-index: 5;
+  display: flex;
+  padding: 0.25rem;
+  border: none;
+  border-radius: calc(var(--lk-border-radius, 0.5rem) / 2);
+  background: rgba(0, 0, 0, 0.5);
+  color: var(--color-room-text-primary);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  transition-delay: 0.2s;
+}
+.room-pin-toggle svg { width: 20px; height: 20px; }
+.lk-participant-tile:hover .room-pin-toggle,
+.lk-participant-tile:focus-within .room-pin-toggle,
+.room-pin-toggle.is-pinned { opacity: 1; transition-delay: 0s; }
+.room-pin-toggle.is-pinned { background: var(--color-room-mic-on); color: #10331f; }
+
+/* Тач-устройства (мобильный/планшет): hover нет вовсе — иначе булавка была бы
+   недоступна. Тулбар комнаты не задет: кнопка живёт на плитке. */
+@media (hover: none) {
+  .room-pin-toggle { opacity: 1; transition-delay: 0s; }
+}
+
+/* Метка закреплённой плитки — рамка по контуру. Класс закрепления висит на
+   кнопке (корневой div плитки рендерит библиотека, свой класс туда не
+   добавить), поэтому селектор идёт через `:has()`. */
+.lk-participant-tile:has(.room-pin-toggle.is-pinned) {
+  outline: 2px solid var(--color-room-mic-on);
+  outline-offset: -2px;
+}
+
 /* ---------- Заглушка «конференция в мини-окне» (Document PiP) ---------- */
 .room-pip-placeholder {
   flex: 1;