diff --git a/packages/web/src/components/voice/VoiceChannel.tsx b/packages/web/src/components/voice/VoiceChannel.tsx index f31dc394..d902418c 100644 --- a/packages/web/src/components/voice/VoiceChannel.tsx +++ b/packages/web/src/components/voice/VoiceChannel.tsx @@ -3,7 +3,7 @@ import { useVoiceStore } from '../../stores/voiceStore'; import { useSpaceStore, getChannelOrigin } from '../../stores/spaceStore'; import { useAuthStore } from '../../stores/authStore'; import { Avatar } from '../ui/Avatar'; -import { VoiceModContextMenu } from './VoiceModContextMenu'; +import { VoiceUserContextMenu } from './VoiceUserContextMenu'; const EMPTY_VOICE_USERS: string[] = []; @@ -160,11 +160,12 @@ export function VoiceChannel({ channelId, channelName, onClick, locked }: VoiceC {/* Voice moderation context menu (portalled to body) */} {contextMenu && ( - setContextMenu(null)} + isLocal={false} /> )} diff --git a/packages/web/src/components/voice/VoiceUser.tsx b/packages/web/src/components/voice/VoiceUser.tsx index 497f7281..616f6c20 100644 --- a/packages/web/src/components/voice/VoiceUser.tsx +++ b/packages/web/src/components/voice/VoiceUser.tsx @@ -1,12 +1,9 @@ -import React, { useRef, useEffect, useLayoutEffect, useState, useCallback } from 'react'; -import ReactDOM from 'react-dom'; +import React, { useRef, useEffect, useState, useCallback } from 'react'; import { Avatar } from '../ui/Avatar'; import { useVoiceStore } from '../../stores/voiceStore'; -import { VoiceModMenuItems } from './VoiceModContextMenu'; +import { VoiceUserContextMenu } from './VoiceUserContextMenu'; import { useSpaceStore } from '../../stores/spaceStore'; -import { hasPermissionBit, PermissionBits } from '../../utils/permissions'; import type { UserTile } from '../../hooks/useLiveKit'; -import { getChannelOrigin } from '../../stores/spaceStore'; interface VoiceUserProps { tile: UserTile; @@ -19,7 +16,6 @@ export function VoiceUser({ tile, large }: VoiceUserProps) { const { participant } = tile; const isDeafened = useVoiceStore((s) => s.isDeafened); const currentVoiceChannelId = useVoiceStore((s) => s.currentVoiceChannelId); - const participantVolumes = useVoiceStore((s) => s.participantVolumes); const isSpeaking = useVoiceStore((s) => s.speakingParticipantIds.has(participant.identity)); const serverMutedUserIds = useVoiceStore((s) => s.serverMutedUserIds); const serverDeafenedUserIds = useVoiceStore((s) => s.serverDeafenedUserIds); @@ -27,7 +23,6 @@ export function VoiceUser({ tile, large }: VoiceUserProps) { const [, forceUpdate] = useState(0); - const perUserVolume = participantVolumes.get(participant.userId) ?? 100; const isLocal = participant.isLocal; const avatarUserId = participant.homeUserId ?? participant.userId; @@ -59,12 +54,10 @@ export function VoiceUser({ tile, large }: VoiceUserProps) { }, [tile.lkVideoTrack]); // Context Menu - const menuRef = useRef(null); const [volumeMenu, setVolumeMenu] = useState<{ x: number; y: number; } | null>(null); - const setParticipantVolume = useVoiceStore((s) => s.setParticipantVolume); const handleContextMenu = useCallback( (e: React.MouseEvent) => { @@ -75,33 +68,6 @@ export function VoiceUser({ tile, large }: VoiceUserProps) { [isLocal], ); - // Click-outside dismissal — mousedown + contains check - useEffect(() => { - if (!volumeMenu) return; - const handler = (e: MouseEvent) => { - if (menuRef.current && !menuRef.current.contains(e.target as Node)) { - setVolumeMenu(null); - } - }; - document.addEventListener('mousedown', handler); - return () => document.removeEventListener('mousedown', handler); - }, [volumeMenu]); - - // Viewport-aware positioning — direct DOM mutation, no state churn - useLayoutEffect(() => { - const el = menuRef.current; - if (!volumeMenu || !el) return; - const rect = el.getBoundingClientRect(); - let x = volumeMenu.x; - let y = volumeMenu.y; - if (rect.right > window.innerWidth) x = window.innerWidth - rect.width - 8; - if (rect.bottom > window.innerHeight) y = window.innerHeight - rect.height - 8; - if (x < 8) x = 8; - if (y < 8) y = 8; - el.style.left = `${x}px`; - el.style.top = `${y}px`; - }, [volumeMenu]); - return (
- {volumeMenu && !isLocal && ReactDOM.createPortal( -
- {/* Moderation options (renders nothing if no perms) */} - {currentVoiceChannelId && ( - setVolumeMenu(null)} - /> - )} - {/* Volume slider */} -
-
- User Volume -
-
- - - - - setParticipantVolume( - participant.userId, - parseInt(e.target.value), - ) - } - className="flex-1 accent-accent-primary h-1" - /> - - {perUserVolume}% - -
-
-
, - document.body, + {volumeMenu && currentVoiceChannelId && ( + setVolumeMenu(null)} + isLocal={isLocal} + /> )} ); } - -/** Renders moderation items + divider only when the user has mod perms. */ -function VoiceModSection({ targetUserId, channelId, onAction }: { - targetUserId: string; - channelId: string; - onAction: () => void; -}) { - const spacePermissions = useSpaceStore((s) => s.spacePermissions); - const currentSpaceId = useSpaceStore((s) => s.currentSpaceId); - const myPerms = currentSpaceId ? spacePermissions.get(currentSpaceId) : undefined; - - const hasMod = - hasPermissionBit(myPerms, PermissionBits.MUTE_MEMBERS) || - hasPermissionBit(myPerms, PermissionBits.DEAFEN_MEMBERS) || - hasPermissionBit(myPerms, PermissionBits.MOVE_MEMBERS); - - if (!hasMod) return null; - - return ( - <> -
- -
-
- - ); -} diff --git a/packages/web/src/components/voice/VoiceModContextMenu.tsx b/packages/web/src/components/voice/VoiceUserContextMenu.tsx similarity index 82% rename from packages/web/src/components/voice/VoiceModContextMenu.tsx rename to packages/web/src/components/voice/VoiceUserContextMenu.tsx index 11d410ac..d90080fb 100644 --- a/packages/web/src/components/voice/VoiceModContextMenu.tsx +++ b/packages/web/src/components/voice/VoiceUserContextMenu.tsx @@ -178,6 +178,7 @@ function MoveToSubmenu({ channels, onMove, btnClass, btnStyle }: MoveToSubmenuPr style={{ left: -9999, top: -9999 }} onMouseEnter={cancelCloseTimer} onMouseLeave={startCloseTimer} + onMouseDown={(e) => e.stopPropagation()} > {channels.map((ch) => (