fix(room): очередь поднятых рук — компактный поповер вместо панели во весь экран
HandQueuePanel рендерился как боковая панель на весь экран на мобильном (.chat-panel, унаследовано от чата) — для короткого списка поднятых рук это избыточно, история переписки тут ни при чём. Переделано в HandQueueMenu — тот же самодостаточный поповер над кнопкой, что и «Вид» (StageViewMenu): своё состояние открытия, закрытие по клику вне/Escape, .tb-menu вместо боковой панели. Кнопка «Очередь» больше не получает open-состояние пропсами сверху — сама решает, открыта ли, и сама проверяет useIsOrganizer(). Список внутри растёт вместе с очередью (компактно при 1–2 поднятых руках), но не бесконечно — после ~10 строк упирается в max-height и скроллится дальше.
This commit is contained in:
@@ -1,6 +1,5 @@
|
||||
import {
|
||||
Hand,
|
||||
ListOrdered,
|
||||
LogOut,
|
||||
Maximize,
|
||||
MessageSquare,
|
||||
@@ -18,9 +17,9 @@ import { Track, type ScreenShareCaptureOptions } from 'livekit-client'
|
||||
import { DisconnectButton, useLocalParticipant, useTrackToggle } from '@livekit/components-react'
|
||||
import { useToast } from '@/components/ui/ToastProvider'
|
||||
import { useIsCompactViewport } from '@/hooks/useIsCompactViewport'
|
||||
import { useIsOrganizer } from '@/hooks/useIsOrganizer'
|
||||
import type { HandQueueEntry } from '@/hooks/useChat'
|
||||
import { StageViewMenu, type StageViewProps } from '@/components/room/StageViewOptions'
|
||||
import { HandQueueMenu } from '@/components/room/HandQueueMenu'
|
||||
|
||||
/**
|
||||
* Опции захвата демонстрации экрана: `audio: true` — звук
|
||||
@@ -67,8 +66,8 @@ interface RoomToolbarProps extends StageViewProps {
|
||||
handQueue: HandQueueEntry[]
|
||||
onRaiseHand: () => void
|
||||
onLowerHand: () => void
|
||||
handQueueOpen: boolean
|
||||
onToggleHandQueue: () => void
|
||||
/** Опустить ЧУЖУЮ руку по identity — только организатору (панель очереди, `HandQueueMenu`). */
|
||||
onLowerHandById: (identity: string) => void
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -104,8 +103,7 @@ export function RoomToolbar({
|
||||
handQueue,
|
||||
onRaiseHand,
|
||||
onLowerHand,
|
||||
handQueueOpen,
|
||||
onToggleHandQueue,
|
||||
onLowerHandById,
|
||||
layoutMode,
|
||||
onLayoutModeChange,
|
||||
hideOthers,
|
||||
@@ -113,7 +111,6 @@ export function RoomToolbar({
|
||||
}: RoomToolbarProps) {
|
||||
const toast = useToast()
|
||||
const isCompact = useIsCompactViewport()
|
||||
const isOrganizer = useIsOrganizer()
|
||||
const { localParticipant } = useLocalParticipant()
|
||||
const handRaised = handQueue.some((entry) => entry.identity === localParticipant.identity)
|
||||
const mic = useTrackToggle({ source: Track.Source.Microphone })
|
||||
@@ -197,23 +194,7 @@ export function RoomToolbar({
|
||||
<span className="label">Рука</span>
|
||||
</button>
|
||||
|
||||
{isOrganizer && (
|
||||
<button
|
||||
type="button"
|
||||
className={`tb-btn${handQueueOpen ? ' is-panel-open' : ''}`}
|
||||
aria-pressed={handQueueOpen}
|
||||
aria-label={handQueueOpen ? 'Свернуть очередь поднятых рук' : 'Открыть очередь поднятых рук'}
|
||||
onClick={onToggleHandQueue}
|
||||
>
|
||||
<span className="icon-shell">
|
||||
<ListOrdered className="lucide" aria-hidden="true" />
|
||||
{handQueue.length > 0 && (
|
||||
<span className="badge-count">{handQueue.length > 9 ? '9+' : handQueue.length}</span>
|
||||
)}
|
||||
</span>
|
||||
<span className="label">Очередь</span>
|
||||
</button>
|
||||
)}
|
||||
<HandQueueMenu queue={handQueue} onLower={onLowerHandById} />
|
||||
|
||||
{!isCompact && (
|
||||
<StageViewMenu
|
||||
|
||||
Reference in New Issue
Block a user