+
+
+ Замена фона видео
+
+ Выбор фона в конференции: три готовые сцены и свои картинки (до 10 штук,
+ загружаются в профиле). Работает только на компьютере — фон считает нейросеть
+ на каждом кадре, и на телефоне это греет устройство и просаживает встречу
+
+
+
+
Транскрибация и суммаризация (AI)
diff --git a/frontend/src/components/auth/DeviceCheckCard.tsx b/frontend/src/components/auth/DeviceCheckCard.tsx
index 79e54e0..4233515 100644
--- a/frontend/src/components/auth/DeviceCheckCard.tsx
+++ b/frontend/src/components/auth/DeviceCheckCard.tsx
@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react'
import { Mic, MicOff, Video, VideoOff } from 'lucide-react'
import type { DeviceCheckStatus } from '@/hooks/useDeviceCheckAccess'
import '@/styles/device-check.css'
@@ -17,6 +18,13 @@ interface DeviceCheckCardProps {
audioEnabled: boolean
onToggleVideo: () => void
onToggleAudio: () => void
+ /**
+ * Выбор фона под кнопками (сессия 35) — приходит готовым узлом, а не набором
+ * пропсов: карточка про доступ к устройствам и знать про фоны, их лимиты и
+ * загрузку не обязана. `undefined` — модуль выключен, устройство не
+ * десктопное либо браузер не умеет сегментацию; тогда блока нет вовсе.
+ */
+ backgroundPicker?: ReactNode
}
/**
@@ -48,6 +56,7 @@ export function DeviceCheckCard({
audioEnabled,
onToggleVideo,
onToggleAudio,
+ backgroundPicker,
}: DeviceCheckCardProps) {
const showPlaceholder = videoStatus !== 'granted' || !videoEnabled
return (
@@ -86,6 +95,8 @@ export function DeviceCheckCard({
{backgroundPicker}
}
+
{hint && {hint}
} ) diff --git a/frontend/src/components/background/BackgroundPicker.tsx b/frontend/src/components/background/BackgroundPicker.tsx new file mode 100644 index 0000000..dd611c0 --- /dev/null +++ b/frontend/src/components/background/BackgroundPicker.tsx @@ -0,0 +1,73 @@ +import { Ban, Check, Loader2 } from 'lucide-react' +import type { MyBackground } from '@/api/users' +import { DEFAULT_BACKGROUNDS, NO_BACKGROUND, type BackgroundKey } from '@/lib/virtualBackground' +import '@/styles/virtual-background.css' + +interface BackgroundPickerProps { + value: BackgroundKey + onChange: (key: BackgroundKey) => void + /** Свои картинки пользователя; у гостя список всегда пуст — профиля у него нет. */ + customBackgrounds: MyBackground[] + /** Идёт применение фона (первый раз — ещё и загрузка модели) — показать индикатор на выбранной плитке. */ + busy?: boolean +} + +/** + * Сетка выбора фона: «без фона», три дефолтные сцены и свои картинки. + * + * Один компонент на все три места, где выбирают фон (превью входа, комната, + * профиль): плитки везде выглядят одинаково, а цвета берутся из токенов темы — + * внутри комнаты (`[data-theme="room"]`) те же классы перекрашиваются в тёмную + * палитру, см. `styles/virtual-background.css`. + * + * Кнопки — `aria-pressed`, а не радиогруппа: выбор применяется немедленно и + * никуда не отправляется формой. + */ +export function BackgroundPicker({ + value, + onChange, + customBackgrounds, + busy = false, +}: BackgroundPickerProps) { + const renderTile = (key: BackgroundKey, label: string, url: string | null) => { + const selected = value === key + return ( + + ) + } + + return ( +
+ {renderTile(NO_BACKGROUND, 'Без фона', null)}
+ {DEFAULT_BACKGROUNDS.map((item) => renderTile(`default:${item.id}`, item.label, item.url))}
+ {customBackgrounds.map((item, index) =>
+ renderTile(`custom:${item.id}`, `Своя картинка ${index + 1}`, item.url),
+ )}
+
+ )
+}
diff --git a/frontend/src/components/background/MyBackgroundsSection.tsx b/frontend/src/components/background/MyBackgroundsSection.tsx
new file mode 100644
index 0000000..4009474
--- /dev/null
+++ b/frontend/src/components/background/MyBackgroundsSection.tsx
@@ -0,0 +1,143 @@
+import { useRef, useState } from 'react'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { Trash2, Upload } from 'lucide-react'
+import { deleteMyBackground, uploadMyBackground } from '@/api/users'
+import { ApiError } from '@/api/client'
+import { useToast } from '@/components/ui/ToastProvider'
+import { MY_BACKGROUNDS_QUERY_KEY, useMyBackgrounds } from '@/hooks/useMyBackgrounds'
+import { ImageDecodeError, resizeImageForBackground } from '@/lib/imageResize'
+import { isDesktopDevice } from '@/lib/isDesktopDevice'
+import '@/styles/virtual-background.css'
+
+/** Что вообще можно выбрать в диалоге файлов — совпадает с проверкой на сервере. */
+const ACCEPTED_TYPES = 'image/jpeg,image/png,image/webp'
+
+/**
+ * Секция профиля «Свои фоны» — загрузка и удаление картинок для замены фона
+ * видео («личный кабинет» из задачи).
+ *
+ * Загрузка идёт с предварительным СЖАТИЕМ в браузере (`lib/imageResize.ts`):
+ * «ужимать до приемлемого размера, чтобы не грузили БД» — требование задачи.
+ * Сервер картинку не пережимает, но полноценно валидирует.
+ *
+ * Лимит на число картинок приходит с сервера (`limit` в ответе списка) — он
+ * там же и проверяется; здесь кнопка просто гаснет заранее, чтобы не отправлять
+ * запрос, заведомо обречённый на 409.
+ *
+ * Удаление применённого сейчас фона отдельно обрабатывать не нужно: выбор
+ * хранится ключом `custom:Свои фоны
++ Картинки для замены фона видео в конференции. Не больше {limit || 10} штук; перед + отправкой картинка автоматически уменьшается. + {!desktop && ' Сама замена фона работает только на компьютере — на телефоне она' + + ' отключена, чтобы не нагружать устройство.'} +
+ + {items.length > 0 && ( +
+ {items.map((item, index) => (
+
+ )}
+
+
+ 
+
+
+ ))}
+
+
+
+ {items.length} из {limit || 10}
+
+ {
+ const file = e.target.files?.[0] ?? null
+ e.target.value = ''
+ setError(null)
+ if (file) uploadMutation.mutate(file)
+ }}
+ />
+
+
+ {error && (
+ + {error} +
+ )} +
+
+ )
+}
diff --git a/frontend/src/components/room/RoomToolbar.tsx b/frontend/src/components/room/RoomToolbar.tsx
index c463f41..7dab431 100644
--- a/frontend/src/components/room/RoomToolbar.tsx
+++ b/frontend/src/components/room/RoomToolbar.tsx
@@ -1,5 +1,6 @@
import {
Hand,
+ Image,
LogOut,
Maximize,
MessageSquare,
@@ -41,6 +42,15 @@ interface RoomToolbarProps extends StageViewProps {
onTogglePiP: () => void
/** `JoinOut.hand_queue_enabled` — при `false` кнопка «Рука» и очередь не рендерятся вовсе. */
handQueueEnabled: boolean
+ /**
+ * Показывать ли кнопку «Фон». Уже учитывает ВСЁ сразу: включён ли модуль в
+ * админке, десктопное ли это устройство и умеет ли браузер сегментацию —
+ * см. `RoomPage`. При `false` кнопки нет вовсе (а не задизейбленной): на
+ * телефоне фичи не существует, и мёртвая кнопка там только мешает.
+ */
+ backgroundVisible: boolean
+ backgroundOpen: boolean
+ onToggleBackground: () => void
/**
* Очередь поднятых рук целиком (задача B1, `useChat().handQueue`) — сама
* решает, поднята ли СВОЯ рука (сравнивая с `localParticipant.identity`
@@ -100,6 +110,9 @@ export function RoomToolbar({
pipActive,
onTogglePiP,
handQueueEnabled,
+ backgroundVisible,
+ backgroundOpen,
+ onToggleBackground,
handQueue,
onRaiseHand,
onLowerHand,
@@ -130,6 +143,9 @@ export function RoomToolbar({
2 /* микрофон, камера */ +
(handQueueEnabled ? 2 : 0) /* рука, очередь */ +
1 /* настройки */ +
+ // На телефоне всегда 0 (фича десктопная), но десктопное окно бывает и уже
+ // 600px — тогда кнопка «Фон» реально есть и должна попасть в подсчёт.
+ (backgroundVisible ? 1 : 0) +
(fullscreenSupported ? 1 : 0) +
(chatVisible ? 1 : 0) +
1 /* выйти */
@@ -244,6 +260,23 @@ export function RoomToolbar({
{isCompact ? 'Настройки' : 'Устройства'}
+ {/* Только десктоп — на мобильном `backgroundVisible` всегда false,
+ поэтому кнопка не участвует и в `mobileButtonCount` выше. */}
+ {backgroundVisible && (
+
+ )}
+
{fullscreenSupported && (
e.stopPropagation()}>
+
+
+
+
+ Фон
+ ++ Не удалось применить фон — попробуйте выбрать другой или отключить фон. +
+ ) : ( ++ {canManageOwn + ? 'Свои картинки добавляются в профиле — их видно здесь сразу после загрузки.' + : 'Свои картинки доступны зарегистрированным пользователям.'} +
+ )} +