98 lines
3.8 KiB
TypeScript
98 lines
3.8 KiB
TypeScript
import { useState } from 'react';
|
|
import { useVoiceStore } from '../stores/voice.ts';
|
|
import { DeviceSettingsModal } from './DeviceSettingsModal.tsx';
|
|
|
|
export function VoiceControls() {
|
|
const [showDeviceSettings, setShowDeviceSettings] = useState(false);
|
|
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 noiseSuppression = useVoiceStore((state) => state.noiseSuppression);
|
|
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 toggleNoiseSuppression = useVoiceStore((state) => state.toggleNoiseSuppression);
|
|
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>
|
|
<button
|
|
onClick={toggleNoiseSuppression}
|
|
className={`px-1.5 py-0.5 rounded-sm transition-colors ${
|
|
noiseSuppression
|
|
? 'text-gb-green bg-gb-bg-s border border-gb-green'
|
|
: 'text-gb-fg-s hover:text-gb-green hover:bg-gb-bg-t border border-transparent'
|
|
}`}
|
|
title={noiseSuppression ? 'Noise suppression on' : 'Noise suppression off'}
|
|
>
|
|
[ns{noiseSuppression ? '●' : '○'}]
|
|
</button>
|
|
<div className="flex-1" />
|
|
<button
|
|
onClick={() => setShowDeviceSettings(true)}
|
|
className="px-1.5 py-0.5 rounded-sm transition-colors text-gb-fg-s hover:text-gb-fg-f hover:bg-gb-bg-t border border-transparent mr-2"
|
|
title="Device Settings"
|
|
>
|
|
[⚙]
|
|
</button>
|
|
<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>
|
|
|
|
{showDeviceSettings && (
|
|
<DeviceSettingsModal onClose={() => setShowDeviceSettings(false)} />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|