Jannis Braun
3c134fe0e8
Replace ripped Discord audio with self-authored Ogg Vorbis files (avoids copyright on open-source launch) and fix three cue bugs: - Anti-pop envelope: playSound now applies a 10ms fade-in (+ tail fade-out for one-shots) so buffers no longer start at a non-zero amplitude. Kills the pop on the looping call cues. Mirrors playTestTone. - Deafen no longer plays mute+deafen at once: toggleDeafen flips isMuted and isDeafened atomically, so SoundController saw both transitions. New tested pure helper selectVoiceStateSound() suppresses the side-effect mute cue. - Viewer-side watch feedback: stream_user_joined/left now play locally on the watcher's own machine for explicit Watch/Stop actions, via handleViewerWatchToggle. Direct local playback (not a watchingStreams diff) keeps auto-teardown silent and works identically on Safari and Electron. Docs: docs/systems/sounds.md updated (Ogg, dual-audience cue rows, mute/deafen selection, viewer feedback, anti-pop envelope).
437 lines
17 KiB
TypeScript
437 lines
17 KiB
TypeScript
import React, { useRef, useEffect, useState, useCallback } from 'react';
|
|
import { Avatar } from '../ui/Avatar';
|
|
import { useVoiceStore } from '../../stores/voiceStore';
|
|
import { useContextMenuStore, type ContextMenuItem } from '../../stores/contextMenuStore';
|
|
import { getActiveRoom, setStreamSubscription } from '../../hooks/useLiveKit';
|
|
import { stopScreenShare, changeScreenShare } from '../../utils/screenShare';
|
|
import { encodeStreamWatch } from '../../utils/streamWatchProtocol';
|
|
import { AudioManager } from '../../audio/AudioManager';
|
|
import { getSfxVolume } from '../../utils/sfx';
|
|
import { ScreenShareSettingsPopover } from './ScreenShareSettingsPopover';
|
|
import { useVoiceParticipantMeta } from '../../hooks/useVoiceParticipantMeta';
|
|
import type { StreamTile as StreamTileType } from '../../hooks/useLiveKit';
|
|
|
|
interface StreamTileProps {
|
|
tile: StreamTileType;
|
|
large?: boolean;
|
|
}
|
|
|
|
/** Wrapper component for stream quality settings — needs its own state + close guard. */
|
|
function StreamQualityItem() {
|
|
const [open, setOpen] = useState(false);
|
|
const btnRef = useRef<HTMLButtonElement>(null);
|
|
const setCloseGuard = useContextMenuStore((s) => s.setCloseGuard);
|
|
const screenShareConfig = useVoiceStore((s) => s.screenShareConfig);
|
|
|
|
return (
|
|
<div className="p-3">
|
|
<div className="text-xs text-txt-tertiary mb-2 font-medium uppercase tracking-wider">
|
|
Stream Quality
|
|
</div>
|
|
<div className="relative">
|
|
<button
|
|
ref={btnRef}
|
|
onClick={() => {
|
|
const n = !open;
|
|
setOpen(n);
|
|
setCloseGuard(n);
|
|
}}
|
|
className="w-full flex items-center justify-between px-2 py-1.5 text-sm text-txt-secondary hover:bg-interactive-hover rounded transition-colors"
|
|
>
|
|
<span>{screenShareConfig.height}p {screenShareConfig.fps}fps</span>
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M7 10l5 5 5-5z" />
|
|
</svg>
|
|
</button>
|
|
{open && (
|
|
<ScreenShareSettingsPopover
|
|
open={open}
|
|
onClose={() => {
|
|
setOpen(false);
|
|
setCloseGuard(false);
|
|
}}
|
|
anchorRef={btnRef}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** Wrapper component for stream volume slider — needs store subscription. */
|
|
function StreamVolumeItem({ userId }: { userId: string }) {
|
|
const streamVolume = useVoiceStore((s) => s.streamVolumes.get(userId) ?? 100);
|
|
const setStreamVolume = useVoiceStore((s) => s.setStreamVolume);
|
|
|
|
return (
|
|
<div className="p-3">
|
|
<div className="text-xs text-txt-tertiary mb-2 font-medium uppercase tracking-wider">
|
|
Stream Volume
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" className="text-txt-tertiary flex-shrink-0">
|
|
<path d="M3 9v6h4l5 5V4L7 9H3z" />
|
|
</svg>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="200"
|
|
value={streamVolume}
|
|
onChange={(e) => setStreamVolume(userId, parseInt(e.target.value))}
|
|
className="flex-1 accent-accent-primary h-1"
|
|
/>
|
|
<span className="text-xs text-txt-secondary min-w-[32px] text-right">
|
|
{streamVolume}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** Wrapper component for stream attenuation controls — needs store subscription. */
|
|
function StreamAttenuationItem() {
|
|
const streamAttenuationEnabled = useVoiceStore((s) => s.streamAttenuationEnabled);
|
|
const streamAttenuationStrength = useVoiceStore((s) => s.streamAttenuationStrength);
|
|
const setAttenuationEnabled = useVoiceStore((s) => s.setStreamAttenuationEnabled);
|
|
const setAttenuationStrength = useVoiceStore((s) => s.setStreamAttenuationStrength);
|
|
|
|
return (
|
|
<div>
|
|
<div className="py-1.5">
|
|
<button
|
|
onClick={() => setAttenuationEnabled(!streamAttenuationEnabled)}
|
|
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)' }}
|
|
>
|
|
<span className="flex-1">Stream Attenuation</span>
|
|
<div
|
|
className={`w-4 h-4 rounded border flex items-center justify-center transition-colors ${
|
|
streamAttenuationEnabled
|
|
? 'bg-accent-primary border-accent-primary'
|
|
: 'border-txt-tertiary'
|
|
}`}
|
|
>
|
|
{streamAttenuationEnabled && (
|
|
<svg width="10" height="10" viewBox="0 0 24 24" fill="white">
|
|
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
|
|
</svg>
|
|
)}
|
|
</div>
|
|
</button>
|
|
</div>
|
|
{streamAttenuationEnabled && (
|
|
<div className="p-3 pt-0">
|
|
<div className="text-xs text-txt-tertiary mb-2 font-medium uppercase tracking-wider">
|
|
Attenuation Strength
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="100"
|
|
value={streamAttenuationStrength}
|
|
onChange={(e) => setAttenuationStrength(parseInt(e.target.value))}
|
|
className="flex-1 accent-accent-primary h-1"
|
|
/>
|
|
<span className="text-xs text-txt-secondary min-w-[32px] text-right">
|
|
{streamAttenuationStrength}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Handles a deliberate viewer watch / stop-watch action: plays the local
|
|
* feedback cue on the viewer's OWN machine and notifies the streamer so their
|
|
* streamer-side watcher set updates.
|
|
*
|
|
* Called only from explicit user-action sites (the "Watch Stream" button and
|
|
* the watch/stop context-menu items) — never from automatic teardown paths
|
|
* (streamer stops sharing, participant disconnect), which must stay silent on
|
|
* the viewer side. The local cue is played directly rather than derived from a
|
|
* `watchingStreams` diff precisely so those teardown paths don't trigger it.
|
|
*
|
|
* The cue plays unconditionally (independent of the data-channel round-trip to
|
|
* the streamer), so the viewer gets identical feedback on every platform —
|
|
* Safari and the Electron desktop app alike.
|
|
*/
|
|
function handleViewerWatchToggle(streamerUserId: string, watching: boolean): void {
|
|
AudioManager.getInstance().playSound(
|
|
watching ? 'stream_user_joined' : 'stream_user_left',
|
|
{ volume: getSfxVolume() },
|
|
);
|
|
const room = getActiveRoom();
|
|
if (!room) return;
|
|
const payload = encodeStreamWatch({ type: 'stream_watch', target: streamerUserId, watching });
|
|
// Reliable delivery; data channels are room-scoped and small (under 1KB).
|
|
void room.localParticipant.publishData(payload, { reliable: true });
|
|
}
|
|
|
|
export function StreamTile({ tile, large }: StreamTileProps) {
|
|
const videoRef = useRef<HTMLVideoElement>(null);
|
|
|
|
const watchingStreams = useVoiceStore((s) => s.watchingStreams);
|
|
|
|
const { participant } = tile;
|
|
const isLocal = participant.isLocal;
|
|
const userId = participant.userId;
|
|
const avatarUserId = participant.homeUserId ?? userId;
|
|
const { displayName, avatar, user } = useVoiceParticipantMeta(participant);
|
|
|
|
const isWatching = watchingStreams.has(userId);
|
|
|
|
const liveScreenTrack = tile.screenTrack?.readyState === 'live' ? tile.screenTrack : null;
|
|
const liveLkScreenTrack = liveScreenTrack ? tile.lkScreenTrack : null;
|
|
|
|
// Quality badge state
|
|
const [qualityBadge, setQualityBadge] = useState<string>('');
|
|
|
|
const openContextMenu = useContextMenuStore((s) => s.open);
|
|
|
|
// --- VIDEO --- use LiveKit's track.attach() to register the element
|
|
// with the adaptive stream observer (enables SFU layer switching by viewport size)
|
|
useEffect(() => {
|
|
const videoEl = videoRef.current;
|
|
if (!videoEl) return;
|
|
if (liveLkScreenTrack) {
|
|
liveLkScreenTrack.attach(videoEl);
|
|
return () => { liveLkScreenTrack.detach(videoEl); };
|
|
} else {
|
|
videoEl.srcObject = null;
|
|
}
|
|
}, [liveLkScreenTrack]);
|
|
|
|
// Quality badge (poll every 3s)
|
|
useEffect(() => {
|
|
if (!liveScreenTrack) {
|
|
setQualityBadge('');
|
|
return;
|
|
}
|
|
const update = () => {
|
|
const settings = liveScreenTrack.getSettings();
|
|
const h = settings.height ?? 0;
|
|
const fps = Math.round(settings.frameRate ?? 0);
|
|
if (h > 0 && fps > 0) {
|
|
setQualityBadge(`${h}P ${fps}FPS`);
|
|
} else if (h > 0) {
|
|
setQualityBadge(`${h}P`);
|
|
}
|
|
};
|
|
update();
|
|
const interval = setInterval(update, 3000);
|
|
return () => clearInterval(interval);
|
|
}, [liveScreenTrack]);
|
|
|
|
// Force re-render on track end
|
|
const [, forceUpdate] = useState(0);
|
|
useEffect(() => {
|
|
if (!tile.screenTrack) return;
|
|
const onEnded = () => forceUpdate((n) => n + 1);
|
|
tile.screenTrack.addEventListener('ended', onEnded);
|
|
return () => tile.screenTrack?.removeEventListener('ended', onEnded);
|
|
}, [tile.screenTrack]);
|
|
|
|
// --- CONTEXT MENU ---
|
|
const handleContextMenu = useCallback(
|
|
(e: React.MouseEvent) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
const items: ContextMenuItem[] = [];
|
|
|
|
if (isLocal) {
|
|
// Local stream: stop, change, quality
|
|
items.push({
|
|
key: 'stop-streaming',
|
|
type: 'action',
|
|
label: 'Stop Streaming',
|
|
danger: true,
|
|
icon: React.createElement('svg', { width: 14, height: 14, viewBox: '0 0 24 24', fill: 'currentColor', className: 'flex-shrink-0' },
|
|
React.createElement('path', { d: 'M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7v2H8v2h8v-2h-2v-2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 14H3V5h18v12z' }),
|
|
React.createElement('line', { x1: 4, y1: 4, x2: 20, y2: 20, stroke: 'currentColor', strokeWidth: 2 }),
|
|
),
|
|
onClick: async () => {
|
|
const room = getActiveRoom();
|
|
if (room) {
|
|
await stopScreenShare(room);
|
|
}
|
|
},
|
|
});
|
|
items.push({
|
|
key: 'change-stream',
|
|
type: 'action',
|
|
label: 'Change Stream',
|
|
icon: React.createElement('svg', { width: 14, height: 14, viewBox: '0 0 24 24', fill: 'currentColor', className: 'flex-shrink-0' },
|
|
React.createElement('path', { d: 'M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z' }),
|
|
),
|
|
onClick: async () => {
|
|
const room = getActiveRoom();
|
|
if (room) {
|
|
await changeScreenShare(room);
|
|
}
|
|
},
|
|
});
|
|
items.push({ key: 'quality-sep', type: 'separator' });
|
|
items.push({
|
|
key: 'stream-quality',
|
|
type: 'custom',
|
|
render: () => React.createElement(StreamQualityItem),
|
|
});
|
|
} else {
|
|
// Remote stream: watch/unwatch, mute, volume, attenuation
|
|
const currentIsWatching = useVoiceStore.getState().watchingStreams.has(userId);
|
|
const identity = participant.identity;
|
|
|
|
if (currentIsWatching) {
|
|
items.push({
|
|
key: 'stop-watching',
|
|
type: 'action',
|
|
label: 'Stop Watching',
|
|
icon: React.createElement('svg', { width: 14, height: 14, viewBox: '0 0 24 24', fill: 'currentColor', className: 'flex-shrink-0' },
|
|
React.createElement('path', { d: 'M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z' }),
|
|
),
|
|
onClick: () => {
|
|
useVoiceStore.getState().unwatchStream(userId);
|
|
setStreamSubscription(getActiveRoom(), identity, false);
|
|
handleViewerWatchToggle(userId, false);
|
|
},
|
|
});
|
|
} else {
|
|
items.push({
|
|
key: 'watch-stream',
|
|
type: 'action',
|
|
label: 'Watch Stream',
|
|
icon: React.createElement('svg', { width: 14, height: 14, viewBox: '0 0 24 24', fill: 'currentColor', className: 'flex-shrink-0' },
|
|
React.createElement('path', { d: 'M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z' }),
|
|
),
|
|
onClick: () => {
|
|
useVoiceStore.getState().watchStream(userId);
|
|
setStreamSubscription(getActiveRoom(), identity, true);
|
|
handleViewerWatchToggle(userId, true);
|
|
},
|
|
});
|
|
}
|
|
|
|
items.push({ key: 'watch-sep', type: 'separator' });
|
|
|
|
// Mute Stream checkbox
|
|
items.push({
|
|
key: 'mute-stream',
|
|
type: 'checkbox',
|
|
label: 'Mute Stream',
|
|
subscribe: useVoiceStore.subscribe,
|
|
getChecked: () => useVoiceStore.getState().streamMutes.get(userId) ?? false,
|
|
onChange: (checked) => useVoiceStore.getState().setStreamMute(userId, checked),
|
|
});
|
|
|
|
items.push({ key: 'vol-sep', type: 'separator' });
|
|
|
|
// Stream volume slider
|
|
items.push({
|
|
key: 'stream-volume',
|
|
type: 'custom',
|
|
render: () => React.createElement(StreamVolumeItem, { userId }),
|
|
});
|
|
|
|
items.push({ key: 'attenuation-sep', type: 'separator' });
|
|
|
|
// Stream attenuation controls
|
|
items.push({
|
|
key: 'stream-attenuation',
|
|
type: 'custom',
|
|
render: () => React.createElement(StreamAttenuationItem),
|
|
});
|
|
}
|
|
|
|
openContextMenu({ x: e.clientX, y: e.clientY }, items);
|
|
},
|
|
[isLocal, userId, participant.identity, openContextMenu],
|
|
);
|
|
|
|
const handleWatch = useCallback(() => {
|
|
useVoiceStore.getState().watchStream(userId);
|
|
setStreamSubscription(getActiveRoom(), participant.identity, true);
|
|
handleViewerWatchToggle(userId, true);
|
|
}, [userId, participant.identity]);
|
|
|
|
const hasVideo = liveScreenTrack !== null;
|
|
|
|
return (
|
|
<div
|
|
data-context-menu
|
|
className={`relative bg-surface-base rounded-xl overflow-hidden flex items-center justify-center group transition-all duration-200 ring-1 ring-white/[0.06] hover:ring-white/10 ${
|
|
'h-full w-full'
|
|
}`}
|
|
onContextMenu={handleContextMenu}
|
|
>
|
|
{hasVideo && isWatching ? (
|
|
<video
|
|
ref={videoRef}
|
|
autoPlay
|
|
playsInline
|
|
muted
|
|
className="w-full h-full object-contain bg-black"
|
|
/>
|
|
) : (
|
|
<div className="w-full h-full flex flex-col items-center justify-center gap-3 bg-surface-channel">
|
|
<div className="relative">
|
|
<Avatar src={avatar} name={displayName} size={large ? 80 : 48} userId={avatarUserId} user={user ?? undefined} />
|
|
</div>
|
|
<div className="text-center px-4">
|
|
<p className="text-txt-primary text-sm font-semibold">
|
|
{displayName} is streaming
|
|
</p>
|
|
{!isLocal && (
|
|
<button
|
|
onClick={handleWatch}
|
|
className="mt-2 px-4 py-1.5 bg-accent-primary hover:bg-accent-primary/80 rounded text-white text-xs font-semibold transition-colors"
|
|
>
|
|
Watch Stream
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* LIVE badge — top left */}
|
|
<div className="absolute top-2 left-2 px-1.5 py-0.5 bg-accent-rose rounded text-[11px] font-bold text-white uppercase tracking-wide">
|
|
LIVE
|
|
</div>
|
|
|
|
{/* Quality badge — top right */}
|
|
{qualityBadge && hasVideo && (
|
|
<div className="absolute top-2 right-2 px-1.5 py-0.5 bg-black/60 rounded text-[10px] font-bold text-white/70 uppercase tracking-wide">
|
|
{qualityBadge}
|
|
</div>
|
|
)}
|
|
|
|
{/* Bottom overlay */}
|
|
<div className="absolute bottom-0 left-0 right-0 px-3 py-2 bg-gradient-to-t from-black/70 via-black/30 to-transparent">
|
|
<div className="flex items-center gap-1.5 min-w-0">
|
|
{/* Screen icon */}
|
|
<svg
|
|
width="14"
|
|
height="14"
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
className="text-white/70 flex-shrink-0"
|
|
>
|
|
<path d="M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7v2H8v2h8v-2h-2v-2h7c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 14H3V5h18v12z" />
|
|
</svg>
|
|
<span
|
|
className={`font-semibold text-white truncate ${large ? 'text-base' : 'text-[13px]'}`}
|
|
>
|
|
{displayName}
|
|
</span>
|
|
{isLocal && (
|
|
<span className="text-[10px] text-white/40 font-medium">(you)</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|