devsyncwrld/backspace
1
0
Fork 0
Code Issues Pull Requests Actions 26 Packages Projects Releases Wiki Activity

feat: add camera watch/unwatch with click propagation fix and correct badge color

Browse Source 
Add ability to unsubscribe from remote camera tracks via context menu,
with unwatched state tracked in voiceStore. Fix click propagation through
React portals by adding onClick stopPropagation alongside onMouseDown on
both the main context menu and MoveToSubmenu flyout portal containers.
Use rose badge color for unwatched cameras (user choice) instead of amber
(reserved for server-enforced states).
This commit is contained in:
Jannis Braun
2026-03-10 02:45:03 +01:00
parent e8fc40ab34
commit f9376460d4
4 changed files with 93 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/voice/VoiceUser.tsx
+11
View File
@@ -19,6 +19,7 @@ export function VoiceUser({ tile, large }: VoiceUserProps) {
const isSpeaking = useVoiceStore((s) => s.speakingParticipantIds.has(participant.identity));
const serverMutedUserIds = useVoiceStore((s) => s.serverMutedUserIds);
const serverDeafenedUserIds = useVoiceStore((s) => s.serverDeafenedUserIds);
const unwatchedCameras = useVoiceStore((s) => s.unwatchedCameras);
const spaceId = useSpaceStore((s) => currentVoiceChannelId ? s.channelToSpaceMap.get(currentVoiceChannelId) : null);
const [, forceUpdate] = useState(0);
@@ -153,6 +154,16 @@ export function VoiceUser({ tile, large }: VoiceUserProps) {
</svg>
</div>
)}
{!isLocal && participant.isCameraOn && (
<div className={`w-5 h-5 ${unwatchedCameras.has(participant.userId) ? 'bg-accent-rose/90' : 'bg-white/20'} rounded-full flex items-center justify-center`}>
<svg width="12" height="12" viewBox="0 0 24 24" fill="white">
<path d="M17 10.5V7c0-.55-.45-1-1-1H2c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h14c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z" />
{unwatchedCameras.has(participant.userId) && (
<line x1="1" y1="1" x2="23" y2="23" stroke="white" strokeWidth="2" strokeLinecap="round" />
)}
</svg>
</div>
)}
</>
);
})()}
packages/web/src/components/voice/VoiceUserContextMenu.tsx
+45
View File
@@ -4,6 +4,7 @@ import { useVoiceStore } from '../../stores/voiceStore';
import { useSpaceStore, getChannelOrigin } from '../../stores/spaceStore';
import { wsSend } from '../../hooks/useWebSocket';
import { hasPermissionBit, PermissionBits } from '../../utils/permissions';
import { getActiveRoom, setCameraSubscription } from '../../hooks/useLiveKit';
interface VoiceModMenuItemsProps {
targetUserId: string;
@@ -196,6 +197,7 @@ function MoveToSubmenu({ channels, onMove, btnClass, btnStyle }: MoveToSubmenuPr
onMouseEnter={cancelCloseTimer}
onMouseLeave={startCloseTimer}
onMouseDown={(e) => e.stopPropagation()}
onClick={(e) => e.stopPropagation()}
>
{channels.map((ch) => (
<button
@@ -248,6 +250,12 @@ export function VoiceUserContextMenu({ targetUserId, channelId, position, onClos
const setParticipantVolume = useVoiceStore((s) => s.setParticipantVolume);
const perUserVolume = participantVolumes.get(targetUserId) ?? 100;
const unwatchedCameras = useVoiceStore((s) => s.unwatchedCameras);
const participants = useVoiceStore((s) => s.participants);
const targetParticipant = participants.find((p) => p.userId === targetUserId);
const targetHasCamera = targetParticipant?.isCameraOn ?? false;
const isCameraUnwatched = unwatchedCameras.has(targetUserId);
// Click-outside dismissal
useEffect(() => {
const handler = (e: MouseEvent) => {
@@ -281,6 +289,8 @@ export function VoiceUserContextMenu({ targetUserId, channelId, position, onClos
ref={menuRef}
className="fixed z-[200] bg-surface-elevated rounded-md shadow-elevation-high min-w-[200px] max-h-[calc(100vh-16px)] overflow-y-auto scrollbar-thin animate-fade-in"
style={{ left: position.x, top: position.y }}
onMouseDown={(e) => e.stopPropagation()}
onClick={(e) => e.stopPropagation()}
>
{hasModPerms && (
<>
@@ -294,6 +304,41 @@ export function VoiceUserContextMenu({ targetUserId, channelId, position, onClos
<div className="h-px bg-white/[0.06] mx-1.5" />
</>
)}
{targetHasCamera && (
<>
<div className="py-1.5">
<button
onClick={() => {
const room = getActiveRoom();
const identity = targetParticipant?.identity;
if (isCameraUnwatched) {
useVoiceStore.getState().rewatchCamera(targetUserId);
if (identity) setCameraSubscription(room, identity, true);
} else {
useVoiceStore.getState().unwatchCamera(targetUserId);
if (identity) setCameraSubscription(room, identity, false);
}
onClose();
}}
className="w-full text-left px-2 py-1.5 mx-1.5 text-sm rounded-sm flex items-center gap-2 text-txt-secondary hover:bg-accent-primary hover:text-white"
style={{ width: 'calc(100% - 12px)' }}
>
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" className="flex-shrink-0">
{isCameraUnwatched ? (
<path d="M17 10.5V7c0-.55-.45-1-1-1H2c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h14c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z" />
) : (
<>
<path d="M17 10.5V7c0-.55-.45-1-1-1H2c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h14c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z" />
<line x1="1" y1="1" x2="23" y2="23" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
</>
)}
</svg>
{isCameraUnwatched ? 'Watch Camera' : 'Stop Watching Camera'}
</button>
</div>
<div className="h-px bg-white/[0.06] mx-1.5" />
</>
)}
<div className="p-3">
<div className="text-xs text-txt-tertiary mb-2 font-medium uppercase tracking-wider">
User Volume