71 lines
2.2 KiB
TypeScript
71 lines
2.2 KiB
TypeScript
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) {
|
|
console.log("[VoiceChannel] joining voice:", channelId, channelName);
|
|
joinVoice(channelId, channelName).catch((err) => {
|
|
console.error("[VoiceChannel] joinVoice failed:", err);
|
|
});
|
|
}
|
|
};
|
|
|
|
const error = useVoiceStore((state) => state.error);
|
|
|
|
return (
|
|
<div className="mb-0.5">
|
|
{error && (
|
|
<div className="px-2 py-0.5 text-gb-red text-xxs">! {error}</div>
|
|
)}
|
|
<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>
|
|
);
|
|
}
|