feat(room): очередь поднятых рук видна всем + отключаемый модуль
Раньше HandQueueMenu.tsx рендерился только организатору — теперь очередь видит любой участник, но опустить чужую руку по-прежнему может только организатор (сервер это уже проверял, менял только фронт). Кнопка «Опустить» показывается у записи, только если это своя рука или пользователь — организатор. Модуль «поднятие руки» (кнопка «Рука» + очередь целиком) — отключаемый в админке (instance_settings.hand_queue, дефолт enabled=true, как у chat_enabled). Настройка едет участнику в JoinOut ещё до входа в комнату; выключенный модуль гасит кнопки и на фронте, и на бэке — raise_hand/lower_hand отклоняются кодом hand_queue_disabled, если модуль выключен, даже если у клиента на руках старый JoinOut.
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { Hand, ListOrdered } from 'lucide-react'
|
||||
import { useLocalParticipant } from '@livekit/components-react'
|
||||
import { useIsOrganizer } from '@/hooks/useIsOrganizer'
|
||||
import type { HandQueueEntry } from '@/hooks/useChat'
|
||||
|
||||
@@ -9,8 +10,15 @@ interface HandQueueMenuProps {
|
||||
}
|
||||
|
||||
/**
|
||||
* Кнопка «Очередь» в тулбаре с поповером над ней — видна только организатору
|
||||
* (задача B1). Тот же самодостаточный паттерн, что и `StageViewMenu` («Вид»):
|
||||
* Кнопка «Очередь» в тулбаре с поповером над ней — видна ВСЕМ участникам
|
||||
* (сессия «28-hand-queue-for-all»: раньше очередь видел только организатор).
|
||||
* Опустить чужую запись может по-прежнему только организатор — обычный
|
||||
* участник видит кнопку «Опустить» только напротив СВОЕЙ записи (или не
|
||||
* видит её вовсе, если сам руку не поднимал): сервер (`api/chat.py`) всё
|
||||
* равно отклонит попытку опустить чужую руку кодом `forbidden`, но мёртвая
|
||||
* кнопка, которая молча не работает, хуже отсутствующей.
|
||||
*
|
||||
* Тот же самодостаточный паттерн, что и `StageViewMenu` («Вид»):
|
||||
* собственное состояние открытия, закрытие по клику вне/Escape, поповер
|
||||
* `.tb-menu` над кнопкой — а не боковая панель на весь экран (как чат):
|
||||
* очередь рук — короткий список, а не история переписки, разворачивать её
|
||||
@@ -19,11 +27,12 @@ interface HandQueueMenuProps {
|
||||
* Размер поповера подстраивается под число записей — `.hand-queue-list`
|
||||
* растёт вместе со списком и не даёт пустого места при 1–2 поднятых руках,
|
||||
* но не бесконечно: после ~10 строк список упирается в `max-height` и дальше
|
||||
* скроллится (см. room.css) — иначе организатор на энергичной встрече
|
||||
* получил бы поповер выше экрана.
|
||||
* скроллится (см. room.css) — иначе участник на энергичной встрече получил
|
||||
* бы поповер выше экрана.
|
||||
*/
|
||||
export function HandQueueMenu({ queue, onLower }: HandQueueMenuProps) {
|
||||
const isOrganizer = useIsOrganizer()
|
||||
const { localParticipant } = useLocalParticipant()
|
||||
const [open, setOpen] = useState(false)
|
||||
const wrapRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
@@ -47,8 +56,6 @@ export function HandQueueMenu({ queue, onLower }: HandQueueMenuProps) {
|
||||
}
|
||||
}, [open])
|
||||
|
||||
if (!isOrganizer) return null
|
||||
|
||||
return (
|
||||
<div className="tb-menu-wrap" ref={wrapRef}>
|
||||
<button
|
||||
@@ -74,22 +81,28 @@ export function HandQueueMenu({ queue, onLower }: HandQueueMenuProps) {
|
||||
<p className="chat-empty">Пока никто не поднял руку</p>
|
||||
) : (
|
||||
<ol className="hand-queue-list">
|
||||
{queue.map((entry, index) => (
|
||||
<li className="hand-queue-item" key={entry.identity}>
|
||||
<span className="hand-queue-position">{index + 1}</span>
|
||||
<span className="hand-queue-name">
|
||||
<Hand className="lucide" aria-hidden="true" />
|
||||
{entry.name}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
className="hand-queue-lower"
|
||||
onClick={() => onLower(entry.identity)}
|
||||
>
|
||||
Опустить
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
{queue.map((entry, index) => {
|
||||
const isOwn = entry.identity === localParticipant.identity
|
||||
const canLower = isOrganizer || isOwn
|
||||
return (
|
||||
<li className="hand-queue-item" key={entry.identity}>
|
||||
<span className="hand-queue-position">{index + 1}</span>
|
||||
<span className="hand-queue-name">
|
||||
<Hand className="lucide" aria-hidden="true" />
|
||||
{entry.name}
|
||||
</span>
|
||||
{canLower && (
|
||||
<button
|
||||
type="button"
|
||||
className="hand-queue-lower"
|
||||
onClick={() => onLower(entry.identity)}
|
||||
>
|
||||
Опустить
|
||||
</button>
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ol>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user