94 lines
2.4 KiB
TypeScript
94 lines
2.4 KiB
TypeScript
|
|
import { Mic, MicOff, Volume2, VolumeX } from 'lucide-react';
|
|
import { Switch } from '@/components/ui/switch';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Slider } from '@/components/ui/slider';
|
|
import { useState } from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface VoiceControlsProps {
|
|
voiceMode: boolean;
|
|
setVoiceMode: (value: boolean) => void;
|
|
isSpeaking: boolean;
|
|
volume: number;
|
|
setVolume: (value: number) => void;
|
|
}
|
|
|
|
const VoiceControls = ({
|
|
voiceMode,
|
|
setVoiceMode,
|
|
isSpeaking,
|
|
volume,
|
|
setVolume
|
|
}: VoiceControlsProps) => {
|
|
const [showVolumeControl, setShowVolumeControl] = useState(false);
|
|
|
|
const toggleVolumeControl = () => {
|
|
setShowVolumeControl(!showVolumeControl);
|
|
};
|
|
|
|
const handleVolumeChange = (value: number[]) => {
|
|
setVolume(value[0]);
|
|
};
|
|
|
|
return (
|
|
<div className="flex items-center space-x-2">
|
|
<div className="flex items-center">
|
|
<Switch
|
|
checked={voiceMode}
|
|
onCheckedChange={setVoiceMode}
|
|
id="voice-mode"
|
|
/>
|
|
<label
|
|
htmlFor="voice-mode"
|
|
className="text-sm font-medium ml-2 cursor-pointer"
|
|
>
|
|
{voiceMode ? (
|
|
<span className="flex items-center text-primary">
|
|
<Mic className="h-4 w-4 mr-1" />
|
|
Voice on
|
|
</span>
|
|
) : (
|
|
<span className="flex items-center text-slate-600">
|
|
<MicOff className="h-4 w-4 mr-1" />
|
|
Voice off
|
|
</span>
|
|
)}
|
|
</label>
|
|
</div>
|
|
|
|
{voiceMode && (
|
|
<div className="relative">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={toggleVolumeControl}
|
|
className={cn(
|
|
"h-8 w-8 p-0 rounded-full",
|
|
isSpeaking && "text-primary animate-pulse"
|
|
)}
|
|
>
|
|
{volume === 0 ? (
|
|
<VolumeX className="h-4 w-4" />
|
|
) : (
|
|
<Volume2 className="h-4 w-4" />
|
|
)}
|
|
</Button>
|
|
|
|
{showVolumeControl && (
|
|
<div className="absolute bottom-full mb-2 bg-white shadow-lg rounded-lg p-3 w-32">
|
|
<Slider
|
|
defaultValue={[volume]}
|
|
max={1}
|
|
step={0.1}
|
|
onValueChange={handleVolumeChange}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default VoiceControls;
|