Spaces:
Running
Running
File size: 2,931 Bytes
fb12607 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | "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>
);
}
|