Phase 2 frontend: voice store, VoiceChannel, VoicePanel, VoiceControls
Frontend:
- stores/voice.ts: Zustand store for voice state (join, leave, mute, deafen, video, screen share)
- VoiceChannel.tsx: sidebar item showing 🔊 channel name with participant count
- VoicePanel.tsx: box-drawn frame with participant list and controls
- VoiceControls.tsx: [m] mute, [d] deafen, [cam] video, [share] screen, [x] disconnect
- ChannelList.tsx: integrated VoiceChannel for voice-type channels
- Layout.tsx: added VoicePanel above chat area
Deps:
- Added livekit-client, @livekit/components-react
- NODE_ENV fix for dev deps installation
This commit is contained in:
Generated
+23
-23
@@ -17,7 +17,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@types/react-dom": "^18.3.7",
|
||||
"@vitejs/plugin-react": "^4.3.1",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"postcss": "^8.4.38",
|
||||
@@ -811,19 +811,6 @@
|
||||
"tslib": "^2.6.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@livekit/components-core/node_modules/loglevel": {
|
||||
"version": "1.9.1",
|
||||
"resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.9.1.tgz",
|
||||
"integrity": "sha512-hP3I3kCrDIMuRwAwHltphhDM1r8i55H33GgqjXbrisuJhF4kRhW1dNuxsRklp4bXl8DSdLaNLuiL4A/LWRfxvg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "tidelift",
|
||||
"url": "https://tidelift.com/funding/github/npm/loglevel"
|
||||
}
|
||||
},
|
||||
"node_modules/@livekit/components-react": {
|
||||
"version": "2.9.21",
|
||||
"resolved": "https://registry.npmjs.org/@livekit/components-react/-/components-react-2.9.21.tgz",
|
||||
@@ -1704,9 +1691,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.5.379",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.379.tgz",
|
||||
"integrity": "sha512-v/qV5aV5EUA2pGilzUCq5/eyOloZAqDZBu9UMBIzgPpLlprjSR6zswsWBTv0KpqxLGUAZEwhO95ZCt7srymNVA==",
|
||||
"version": "1.5.380",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.380.tgz",
|
||||
"integrity": "sha512-W6d5AbuEoRayO447cqrg6lKJIlscgRnnxOZl/08kfV71BQDoEBC7Wwis68z87LjyK6f4kWyTaubuDbhHKrZkbA==",
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
@@ -2059,6 +2046,19 @@
|
||||
"@types/dom-mediacapture-record": "^1"
|
||||
}
|
||||
},
|
||||
"node_modules/livekit-client/node_modules/loglevel": {
|
||||
"version": "1.9.2",
|
||||
"resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.9.2.tgz",
|
||||
"integrity": "sha512-HgMmCqIJSAKqo68l0rS2AanEWfkxaZ5wNiEFb5ggm08lDs9Xl2KxBlX3PTcaD2chBM1gXAYf491/M2Rv8Jwayg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "tidelift",
|
||||
"url": "https://tidelift.com/funding/github/npm/loglevel"
|
||||
}
|
||||
},
|
||||
"node_modules/lodash.debounce": {
|
||||
"version": "4.0.8",
|
||||
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
|
||||
@@ -2066,9 +2066,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/loglevel": {
|
||||
"version": "1.9.2",
|
||||
"resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.9.2.tgz",
|
||||
"integrity": "sha512-HgMmCqIJSAKqo68l0rS2AanEWfkxaZ5wNiEFb5ggm08lDs9Xl2KxBlX3PTcaD2chBM1gXAYf491/M2Rv8Jwayg==",
|
||||
"version": "1.9.1",
|
||||
"resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.9.1.tgz",
|
||||
"integrity": "sha512-hP3I3kCrDIMuRwAwHltphhDM1r8i55H33GgqjXbrisuJhF4kRhW1dNuxsRklp4bXl8DSdLaNLuiL4A/LWRfxvg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.6.0"
|
||||
@@ -2250,9 +2250,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/postcss": {
|
||||
"version": "8.5.15",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
|
||||
"integrity": "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==",
|
||||
"version": "8.5.16",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.16.tgz",
|
||||
"integrity": "sha512-vuwillviilfKZsg0VGj5R/YwwcHx4SLsIOI/7K6mQkWx+l5cUHTjj5g0AasTBcyXsbfTgrwsUNmVUb5xVwyPwg==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
|
||||
+1
-1
@@ -19,7 +19,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@types/react-dom": "^18.3.7",
|
||||
"@vitejs/plugin-react": "^4.3.1",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"postcss": "^8.4.38",
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { useEffect, useMemo } from 'react';
|
||||
import { useServerStore } from '../stores/server.ts';
|
||||
import { useChannelStore } from '../stores/channel.ts';
|
||||
import { VoiceChannel } from './VoiceChannel.tsx';
|
||||
|
||||
export function ChannelList() {
|
||||
const activeServerId = useServerStore((state) => state.activeServerId);
|
||||
@@ -44,22 +45,26 @@ export function ChannelList() {
|
||||
<div key={category} className="mb-3">
|
||||
<div className="text-gb-fg-t text-xs uppercase mb-1">{category}</div>
|
||||
<div className="text-gb-fg-f text-xs mb-1">---</div>
|
||||
{list.map((channel) => (
|
||||
<button
|
||||
key={channel.id}
|
||||
onClick={() => setActiveChannel(channel.id)}
|
||||
className={`w-full text-left px-2 py-1 rounded-sm flex items-center gap-2 ${
|
||||
channel.id === activeChannelId ? 'terminal-active' : 'hover:bg-gb-bg-t text-gb-fg-s'
|
||||
}`}
|
||||
>
|
||||
{channel.type === 'voice' ? (
|
||||
<span className="text-gb-fg-f">♫</span>
|
||||
) : (
|
||||
{list.map((channel) =>
|
||||
channel.type === 'voice' ? (
|
||||
<VoiceChannel
|
||||
key={channel.id}
|
||||
channelId={channel.id}
|
||||
channelName={channel.name}
|
||||
/>
|
||||
) : (
|
||||
<button
|
||||
key={channel.id}
|
||||
onClick={() => setActiveChannel(channel.id)}
|
||||
className={`w-full text-left px-2 py-1 rounded-sm flex items-center gap-2 ${
|
||||
channel.id === activeChannelId ? 'terminal-active' : 'hover:bg-gb-bg-t text-gb-fg-s'
|
||||
}`}
|
||||
>
|
||||
<span className="text-gb-fg-f">#</span>
|
||||
)}
|
||||
<span className="truncate">{channel.name}</span>
|
||||
</button>
|
||||
))}
|
||||
<span className="truncate">{channel.name}</span>
|
||||
</button>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -4,6 +4,7 @@ import { useAuthStore } from '../stores/auth.ts';
|
||||
import { ServerBar } from './ServerBar.tsx';
|
||||
import { ChannelList } from './ChannelList.tsx';
|
||||
import { MemberList } from './MemberList.tsx';
|
||||
import { VoicePanel } from './VoicePanel.tsx';
|
||||
|
||||
export function Layout() {
|
||||
const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
|
||||
@@ -54,7 +55,12 @@ export function Layout() {
|
||||
<ServerBar />
|
||||
<ChannelList />
|
||||
<div className="flex-1 min-w-0 flex flex-col">
|
||||
<Outlet />
|
||||
<div className="flex-1 min-h-0 flex flex-col overflow-hidden">
|
||||
<VoicePanel />
|
||||
<div className="flex-1 min-h-0">
|
||||
<Outlet />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<MemberList />
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,62 @@
|
||||
import { useVoiceStore } from '../stores/voice.ts';
|
||||
|
||||
interface VoiceChannelProps {
|
||||
channelId: string;
|
||||
channelName: string;
|
||||
}
|
||||
|
||||
export function VoiceChannel({ channelId, channelName }: VoiceChannelProps) {
|
||||
const currentRoom = useVoiceStore((state) => state.currentRoom);
|
||||
const isConnected = useVoiceStore((state) => state.isConnected);
|
||||
const joinVoice = useVoiceStore((state) => state.joinVoice);
|
||||
const participants = useVoiceStore((state) => state.participants);
|
||||
|
||||
const isActive = currentRoom === channelId;
|
||||
|
||||
const handleClick = () => {
|
||||
if (!isActive) {
|
||||
joinVoice(channelId, channelName);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mb-0.5">
|
||||
<button
|
||||
onClick={handleClick}
|
||||
className={`w-full text-left px-2 py-1 rounded-sm flex items-center gap-2 ${
|
||||
isActive ? 'terminal-active' : 'hover:bg-gb-bg-t text-gb-fg-s'
|
||||
}`}
|
||||
>
|
||||
<span className={isActive ? 'text-gb-orange' : 'text-gb-fg-f'}>
|
||||
{isActive && isConnected ? '●' : isActive ? '◐' : '○'}
|
||||
</span>
|
||||
<span className={isActive ? 'text-gb-orange' : 'text-gb-fg-f'}>
|
||||
🔊
|
||||
</span>
|
||||
<span className="truncate">{channelName}</span>
|
||||
{isActive && participants.length > 0 && (
|
||||
<span className="ml-auto text-xxs text-gb-fg-f">
|
||||
[{participants.length}]
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
{isActive && (
|
||||
<div className="pl-7 py-0.5">
|
||||
{participants.map((p) => (
|
||||
<div
|
||||
key={p.identity}
|
||||
className="text-xxs text-gb-fg-f flex items-center gap-1"
|
||||
>
|
||||
<span className={p.isSpeaking ? 'text-gb-green' : 'text-gb-fg-f'}>
|
||||
{p.isMuted ? '○' : '●'}
|
||||
</span>
|
||||
<span className={p.isSpeaking ? 'text-gb-green' : ''}>
|
||||
{p.username}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
import { useVoiceStore } from '../stores/voice.ts';
|
||||
|
||||
export function VoiceControls() {
|
||||
const isMuted = useVoiceStore((state) => state.isMuted);
|
||||
const isDeafened = useVoiceStore((state) => state.isDeafened);
|
||||
const isVideoOn = useVoiceStore((state) => state.isVideoOn);
|
||||
const isScreenSharing = useVoiceStore((state) => state.isScreenSharing);
|
||||
const toggleMute = useVoiceStore((state) => state.toggleMute);
|
||||
const toggleDeafen = useVoiceStore((state) => state.toggleDeafen);
|
||||
const toggleVideo = useVoiceStore((state) => state.toggleVideo);
|
||||
const toggleScreenShare = useVoiceStore((state) => state.toggleScreenShare);
|
||||
const leaveVoice = useVoiceStore((state) => state.leaveVoice);
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2 font-mono text-sm">
|
||||
<button
|
||||
onClick={toggleMute}
|
||||
className={`px-1.5 py-0.5 rounded-sm transition-colors ${
|
||||
isMuted
|
||||
? 'text-gb-red bg-gb-bg-s border border-gb-red'
|
||||
: 'text-gb-fg-s hover:text-gb-orange hover:bg-gb-bg-t border border-transparent'
|
||||
}`}
|
||||
title={isMuted ? 'Unmute microphone' : 'Mute microphone'}
|
||||
>
|
||||
[{isMuted ? 'm✗' : 'm'}]
|
||||
</button>
|
||||
<button
|
||||
onClick={toggleDeafen}
|
||||
className={`px-1.5 py-0.5 rounded-sm transition-colors ${
|
||||
isDeafened
|
||||
? 'text-gb-red bg-gb-bg-s border border-gb-red'
|
||||
: 'text-gb-fg-s hover:text-gb-orange hover:bg-gb-bg-t border border-transparent'
|
||||
}`}
|
||||
title={isDeafened ? 'Undeafen' : 'Deafen'}
|
||||
>
|
||||
[{isDeafened ? 'd✗' : 'd'}]
|
||||
</button>
|
||||
<button
|
||||
onClick={toggleVideo}
|
||||
className={`px-1.5 py-0.5 rounded-sm transition-colors ${
|
||||
isVideoOn
|
||||
? 'text-gb-orange bg-gb-bg-s border border-gb-orange'
|
||||
: 'text-gb-fg-s hover:text-gb-orange hover:bg-gb-bg-t border border-transparent'
|
||||
}`}
|
||||
title={isVideoOn ? 'Turn off camera' : 'Turn on camera'}
|
||||
>
|
||||
[cam]
|
||||
</button>
|
||||
<button
|
||||
onClick={toggleScreenShare}
|
||||
className={`px-1.5 py-0.5 rounded-sm transition-colors ${
|
||||
isScreenSharing
|
||||
? 'text-gb-aqua bg-gb-bg-s border border-gb-aqua'
|
||||
: 'text-gb-fg-s hover:text-gb-aqua hover:bg-gb-bg-t border border-transparent'
|
||||
}`}
|
||||
title={isScreenSharing ? 'Stop sharing' : 'Share screen'}
|
||||
>
|
||||
[share]
|
||||
</button>
|
||||
<div className="flex-1" />
|
||||
<button
|
||||
onClick={leaveVoice}
|
||||
className="px-1.5 py-0.5 rounded-sm text-gb-red hover:bg-gb-red hover:text-gb-bg transition-colors border border-transparent hover:border-gb-red"
|
||||
title="Disconnect"
|
||||
>
|
||||
[x]
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
import { useVoiceStore } from '../stores/voice.ts';
|
||||
import { VoiceControls } from './VoiceControls.tsx';
|
||||
|
||||
export function VoicePanel() {
|
||||
const isConnected = useVoiceStore((state) => state.isConnected);
|
||||
const currentRoom = useVoiceStore((state) => state.currentRoom);
|
||||
const currentRoomName = useVoiceStore((state) => state.currentRoomName);
|
||||
const participants = useVoiceStore((state) => state.participants);
|
||||
const error = useVoiceStore((state) => state.error);
|
||||
|
||||
if (!currentRoom) return null;
|
||||
|
||||
return (
|
||||
<div className="bg-gb-bg-s border border-gb-bg-t rounded-sm font-mono text-sm mb-2">
|
||||
{/* Box-drawn header */}
|
||||
<div className="px-3 py-1.5 border-b border-gb-bg-t flex items-center gap-2">
|
||||
<span className="text-gb-fg-f">
|
||||
┌─┤
|
||||
<span className="text-gb-orange font-bold">VOICE</span>
|
||||
├─{'─'.repeat(Math.max(0, 20 - (currentRoomName?.length ?? 0)))}┐
|
||||
</span>
|
||||
<span className="text-gb-fg-s truncate flex-1">
|
||||
{currentRoomName || currentRoom}
|
||||
</span>
|
||||
<span
|
||||
className={`text-xxs ${
|
||||
isConnected ? 'text-gb-green' : 'text-gb-fg-f'
|
||||
}`}
|
||||
>
|
||||
{isConnected ? '● LIVE' : '◐ connecting...'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Error display */}
|
||||
{error && (
|
||||
<div className="px-3 py-1 text-gb-red text-xxs border-b border-gb-bg-t">
|
||||
! {error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Participants */}
|
||||
<div className="px-3 py-1.5 border-b border-gb-bg-t">
|
||||
<div className="text-xxs text-gb-fg-f mb-1">
|
||||
── participants ──
|
||||
</div>
|
||||
{participants.length === 0 && (
|
||||
<div className="text-xxs text-gb-fg-f">[empty channel]</div>
|
||||
)}
|
||||
{participants.map((p) => (
|
||||
<div
|
||||
key={p.identity}
|
||||
className="flex items-center gap-2 py-0.5 text-xs"
|
||||
>
|
||||
<span
|
||||
className={
|
||||
p.isSpeaking
|
||||
? 'text-gb-green'
|
||||
: p.isMuted
|
||||
? 'text-gb-red'
|
||||
: 'text-gb-fg-s'
|
||||
}
|
||||
>
|
||||
{p.isMuted ? '○' : '●'}
|
||||
</span>
|
||||
<span
|
||||
className={p.isSpeaking ? 'text-gb-green' : 'text-gb-fg-s'}
|
||||
>
|
||||
{p.username}
|
||||
</span>
|
||||
{p.isMuted && (
|
||||
<span className="text-xxs text-gb-red">[muted]</span>
|
||||
)}
|
||||
{p.isSpeaking && (
|
||||
<span className="text-xxs text-gb-green">[speaking]</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Controls */}
|
||||
<div className="px-3 py-1.5">
|
||||
<VoiceControls />
|
||||
</div>
|
||||
|
||||
{/* Box-drawn footer */}
|
||||
<div className="px-3 pb-1 text-xxs text-gb-fg-f">
|
||||
└{'─'.repeat(40)}┘
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,263 @@
|
||||
import { create } from 'zustand';
|
||||
import {
|
||||
Room,
|
||||
RoomEvent,
|
||||
Track,
|
||||
type RemoteAudioTrack,
|
||||
type RemoteParticipant,
|
||||
type Participant,
|
||||
type TrackPublication,
|
||||
} from 'livekit-client';
|
||||
import { api } from '../lib/api.ts';
|
||||
import { useWebSocketStore } from './ws.ts';
|
||||
|
||||
export interface VoiceParticipant {
|
||||
identity: string;
|
||||
username: string;
|
||||
isMuted: boolean;
|
||||
isSpeaking: boolean;
|
||||
}
|
||||
|
||||
interface VoiceTokenResponse {
|
||||
token: string;
|
||||
livekit_url: string;
|
||||
}
|
||||
|
||||
interface VoiceState {
|
||||
currentRoom: string | null;
|
||||
currentRoomName: string | null;
|
||||
isConnected: boolean;
|
||||
isMuted: boolean;
|
||||
isDeafened: boolean;
|
||||
isVideoOn: boolean;
|
||||
isScreenSharing: boolean;
|
||||
participants: VoiceParticipant[];
|
||||
error: string | null;
|
||||
_room: Room | null;
|
||||
joinVoice: (channelId: string, channelName: string) => Promise<void>;
|
||||
leaveVoice: () => Promise<void>;
|
||||
toggleMute: () => void;
|
||||
toggleDeafen: () => void;
|
||||
toggleVideo: () => void;
|
||||
toggleScreenShare: () => void;
|
||||
}
|
||||
|
||||
function participantToVoice(p: Participant): VoiceParticipant {
|
||||
const micPub = p.getTrackPublication(Track.Source.Microphone);
|
||||
return {
|
||||
identity: p.identity,
|
||||
username: p.name || p.identity,
|
||||
isMuted: micPub?.isMuted ?? true,
|
||||
isSpeaking: p.isSpeaking,
|
||||
};
|
||||
}
|
||||
|
||||
export const useVoiceStore = create<VoiceState>((set, get) => ({
|
||||
currentRoom: null,
|
||||
currentRoomName: null,
|
||||
isConnected: false,
|
||||
isMuted: false,
|
||||
isDeafened: false,
|
||||
isVideoOn: false,
|
||||
isScreenSharing: false,
|
||||
participants: [],
|
||||
error: null,
|
||||
_room: null,
|
||||
|
||||
joinVoice: async (channelId, channelName) => {
|
||||
const existing = get()._room;
|
||||
if (existing) {
|
||||
await get().leaveVoice();
|
||||
}
|
||||
|
||||
set({ error: null });
|
||||
|
||||
try {
|
||||
const resp = await api.post<VoiceTokenResponse>('/voice/token', {
|
||||
room_name: channelId,
|
||||
});
|
||||
|
||||
const room = new Room({
|
||||
adaptiveStream: true,
|
||||
dynacast: true,
|
||||
});
|
||||
|
||||
room.on(RoomEvent.Connected, () => {
|
||||
set({ isConnected: true, error: null });
|
||||
syncParticipants();
|
||||
});
|
||||
|
||||
room.on(RoomEvent.Disconnected, () => {
|
||||
set({
|
||||
isConnected: false,
|
||||
currentRoom: null,
|
||||
currentRoomName: null,
|
||||
participants: [],
|
||||
isMuted: false,
|
||||
isDeafened: false,
|
||||
isVideoOn: false,
|
||||
isScreenSharing: false,
|
||||
});
|
||||
});
|
||||
|
||||
room.on(RoomEvent.ParticipantConnected, () => {
|
||||
syncParticipants();
|
||||
});
|
||||
|
||||
room.on(RoomEvent.ParticipantDisconnected, () => {
|
||||
syncParticipants();
|
||||
});
|
||||
|
||||
room.on(RoomEvent.TrackMuted, () => {
|
||||
syncParticipants();
|
||||
});
|
||||
|
||||
room.on(RoomEvent.TrackUnmuted, () => {
|
||||
syncParticipants();
|
||||
});
|
||||
|
||||
room.on(
|
||||
RoomEvent.ActiveSpeakersChanged,
|
||||
(speakers: Participant[]) => {
|
||||
set((state) => ({
|
||||
participants: state.participants.map((p) => ({
|
||||
...p,
|
||||
isSpeaking: speakers.some((s) => s.identity === p.identity),
|
||||
})),
|
||||
}));
|
||||
},
|
||||
);
|
||||
|
||||
function syncParticipants() {
|
||||
const r = get()._room;
|
||||
if (!r) return;
|
||||
|
||||
const all: Participant[] = [
|
||||
r.localParticipant,
|
||||
...Array.from(r.remoteParticipants.values()),
|
||||
];
|
||||
set({ participants: all.map(participantToVoice) });
|
||||
}
|
||||
|
||||
await room.connect(resp.livekit_url, resp.token);
|
||||
|
||||
// Mute mic by default on join
|
||||
await room.localParticipant.setMicrophoneEnabled(false);
|
||||
set({ isMuted: true });
|
||||
|
||||
set({
|
||||
_room: room,
|
||||
currentRoom: channelId,
|
||||
currentRoomName: channelName,
|
||||
});
|
||||
|
||||
// Notify WebSocket peers
|
||||
const wsSend = useWebSocketStore.getState().send;
|
||||
wsSend({
|
||||
type: 'VOICE_JOIN',
|
||||
payload: { room_name: channelId },
|
||||
});
|
||||
} catch (err) {
|
||||
set({
|
||||
error: err instanceof Error ? err.message : 'Failed to join voice',
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
leaveVoice: async () => {
|
||||
const room = get()._room;
|
||||
if (!room) return;
|
||||
|
||||
const channelId = get().currentRoom;
|
||||
|
||||
const wsSend = useWebSocketStore.getState().send;
|
||||
if (channelId) {
|
||||
wsSend({
|
||||
type: 'VOICE_LEAVE',
|
||||
payload: { room_name: channelId },
|
||||
});
|
||||
}
|
||||
|
||||
await room.disconnect();
|
||||
set({
|
||||
_room: null,
|
||||
currentRoom: null,
|
||||
currentRoomName: null,
|
||||
isConnected: false,
|
||||
isMuted: false,
|
||||
isDeafened: false,
|
||||
isVideoOn: false,
|
||||
isScreenSharing: false,
|
||||
participants: [],
|
||||
error: null,
|
||||
});
|
||||
},
|
||||
|
||||
toggleMute: () => {
|
||||
const room = get()._room;
|
||||
if (!room) return;
|
||||
|
||||
const newMuted = !get().isMuted;
|
||||
room.localParticipant.setMicrophoneEnabled(!newMuted);
|
||||
set({ isMuted: newMuted });
|
||||
|
||||
// If un-deafening while unmuting, also restore speaker
|
||||
if (!newMuted && get().isDeafened) {
|
||||
set({ isDeafened: false });
|
||||
}
|
||||
|
||||
const wsSend = useWebSocketStore.getState().send;
|
||||
wsSend({
|
||||
type: 'VOICE_MUTE',
|
||||
payload: { room_name: get().currentRoom, muted: newMuted },
|
||||
});
|
||||
},
|
||||
|
||||
toggleDeafen: () => {
|
||||
const room = get()._room;
|
||||
if (!room) return;
|
||||
|
||||
const newDeafened = !get().isDeafened;
|
||||
|
||||
if (newDeafened) {
|
||||
// Deafen: mute mic too
|
||||
room.localParticipant.setMicrophoneEnabled(false);
|
||||
set({ isDeafened: true, isMuted: true });
|
||||
} else {
|
||||
set({ isDeafened: false });
|
||||
}
|
||||
|
||||
// Mute/unmute all remote audio tracks
|
||||
room.remoteParticipants.forEach((p: RemoteParticipant) => {
|
||||
p.audioTrackPublications.forEach((pub: TrackPublication) => {
|
||||
if (pub.track && pub.kind === Track.Kind.Audio) {
|
||||
(pub.track as RemoteAudioTrack).setVolume(newDeafened ? 0 : 1.0);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const wsSend = useWebSocketStore.getState().send;
|
||||
wsSend({
|
||||
type: 'VOICE_DEAFEN',
|
||||
payload: { room_name: get().currentRoom, deafened: newDeafened },
|
||||
});
|
||||
},
|
||||
|
||||
toggleVideo: async () => {
|
||||
const room = get()._room;
|
||||
if (!room) return;
|
||||
|
||||
const newState = !get().isVideoOn;
|
||||
await room.localParticipant.setCameraEnabled(newState);
|
||||
set({ isVideoOn: newState });
|
||||
},
|
||||
|
||||
toggleScreenShare: async () => {
|
||||
const room = get()._room;
|
||||
if (!room) return;
|
||||
|
||||
const newState = !get().isScreenSharing;
|
||||
await room.localParticipant.setScreenShareEnabled(newState);
|
||||
set({ isScreenSharing: newState });
|
||||
},
|
||||
}));
|
||||
@@ -1 +1 @@
|
||||
{"root":["./src/App.tsx","./src/main.tsx","./src/components/ChannelList.tsx","./src/components/ChatArea.tsx","./src/components/GiphyPicker.tsx","./src/components/Layout.tsx","./src/components/LoginForm.tsx","./src/components/MemberList.tsx","./src/components/ServerBar.tsx","./src/components/UserSettings.tsx","./src/lib/api.ts","./src/stores/auth.ts","./src/stores/channel.ts","./src/stores/message.ts","./src/stores/server.ts","./src/stores/ws.ts"],"version":"5.9.3"}
|
||||
{"root":["./src/App.tsx","./src/main.tsx","./src/components/ChannelList.tsx","./src/components/ChatArea.tsx","./src/components/GiphyPicker.tsx","./src/components/Layout.tsx","./src/components/LoginForm.tsx","./src/components/MemberList.tsx","./src/components/ServerBar.tsx","./src/components/UserSettings.tsx","./src/components/VoiceChannel.tsx","./src/components/VoiceControls.tsx","./src/components/VoicePanel.tsx","./src/lib/api.ts","./src/stores/auth.ts","./src/stores/channel.ts","./src/stores/message.ts","./src/stores/server.ts","./src/stores/voice.ts","./src/stores/ws.ts"],"version":"5.9.3"}
|
||||
Reference in New Issue
Block a user