Spaces:
Running
Running
| "use client"; | |
| import { useLocalParticipant, DisconnectButton } from "@livekit/components-react"; | |
| import { | |
| Mic, | |
| MicOff, | |
| Video, | |
| VideoOff, | |
| Phone, | |
| ArrowLeft, | |
| Users, | |
| } from "lucide-react"; | |
| interface RoomControlsProps { | |
| roomName?: string; | |
| onEndStream?: () => void; | |
| onLeaveRoom?: () => void; | |
| onMuteAudio?: () => void; | |
| onMuteVideo?: () => void; | |
| } | |
| export function RoomControls({ roomName, onEndStream, onLeaveRoom, onMuteAudio, onMuteVideo }: RoomControlsProps) { | |
| const { localParticipant, isMicrophoneEnabled, isCameraEnabled } = useLocalParticipant(); | |
| const isAudioMuted = !isMicrophoneEnabled; | |
| const isVideoDisabled = !isCameraEnabled; | |
| const handleMuteAudio = async () => { | |
| await localParticipant.setMicrophoneEnabled(!isMicrophoneEnabled); | |
| onMuteAudio?.(); | |
| }; | |
| const handleMuteVideo = async () => { | |
| await localParticipant.setCameraEnabled(!isCameraEnabled); | |
| onMuteVideo?.(); | |
| }; | |
| return ( | |
| <div className="flex items-center justify-between gap-4 px-6 py-3 bg-muted border-t border-border"> | |
| <div className="flex items-center gap-3"> | |
| <div className="flex items-center gap-2 text-sm"> | |
| <Users size={16} /> | |
| <span className="font-medium">{localParticipant ? 1 : 0} participants</span> | |
| </div> | |
| <div className="h-4 w-px bg-border" /> | |
| <div className="flex items-center gap-2 text-sm"> | |
| <span className="font-medium">{roomName}</span> | |
| </div> | |
| </div> | |
| <div className="flex items-center gap-3"> | |
| <button | |
| onClick={handleMuteAudio} | |
| className={`p-2.5 rounded-md transition-colors ${ | |
| isAudioMuted ? "bg-red/50 text-red-500 hover:bg-red/100" : "bg-muted/50 text-muted-foreground hover:bg-muted" | |
| }`} | |
| title={isAudioMuted ? "Unmute audio" : "Mute audio"} | |
| > | |
| {isAudioMuted ? <MicOff size={18} /> : <Mic size={18} />} | |
| </button> | |
| <button | |
| onClick={handleMuteVideo} | |
| className={`p-2.5 rounded-md transition-colors ${ | |
| isVideoDisabled ? "bg-red/50 text-red-500 hover:bg-red/100" : "bg-muted/50 text-muted-foreground hover:bg-muted" | |
| }`} | |
| title={isVideoDisabled ? "Enable video" : "Disable video"} | |
| > | |
| {!isCameraEnabled ? <VideoOff size={18} /> : <Video size={18} />} | |
| </button> | |
| <button | |
| onClick={onLeaveRoom} | |
| className="p-2.5 rounded-md bg-muted/50 text-muted-foreground hover:bg-muted" | |
| title="Leave room" | |
| > | |
| <ArrowLeft size={18} /> | |
| </button> | |
| <button | |
| onClick={onEndStream} | |
| className="p-2.5 rounded-md bg-red/50 text-red-500 hover:bg-red/100" | |
| title="End stream" | |
| > | |
| <Phone size={18} /> | |
| </button> | |
| <DisconnectButton className="p-2.5 rounded-md bg-red/50 text-red-500 hover:bg-red/100" /> | |
| </div> | |
| </div> | |
| ); | |
| } | |