66 lines
1.7 KiB
TypeScript
66 lines
1.7 KiB
TypeScript
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
/* eslint-disable react-hooks/exhaustive-deps */
|
|
import { useRoomContext } from "@livekit/components-react";
|
|
import { RoomEvent, Track } from "livekit-client";
|
|
import { useEffect, useState } from "react";
|
|
import MicroOnIcon from "./icons/MicroOnIcon";
|
|
import MicroOffIcon from "./icons/MicroOffIcon";
|
|
|
|
function ToggleMic({ socket, handleUpdate }: any) {
|
|
const room = useRoomContext();
|
|
const [muted, setMuted] = useState(false);
|
|
|
|
function toggleMic(value: boolean) {
|
|
const audioTrack = room.localParticipant.getTrack(Track.Source.Microphone);
|
|
|
|
if (!audioTrack) return;
|
|
|
|
if (value) {
|
|
audioTrack.mute();
|
|
} else {
|
|
audioTrack.unmute();
|
|
}
|
|
|
|
setMuted(!audioTrack.isMuted);
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (!socket) return;
|
|
|
|
socket.on("update", (socketId: string, data: { [key: string]: any }) => {
|
|
if (
|
|
socket.id === socketId &&
|
|
Object.prototype.hasOwnProperty.call(data, "muted")
|
|
) {
|
|
toggleMic(data.muted);
|
|
}
|
|
});
|
|
}, [socket]);
|
|
|
|
useEffect(() => {
|
|
room.on(RoomEvent.TrackMuted, (_, participant) => {
|
|
console.log(participant);
|
|
});
|
|
|
|
room.on(RoomEvent.TrackUnmuted, (_, participant) => {
|
|
console.log(participant);
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<button
|
|
onClick={() =>
|
|
handleUpdate(room.localParticipant.identity, {
|
|
muted: !room.localParticipant.getTrack(Track.Source.Microphone)
|
|
?.isMuted,
|
|
})
|
|
}
|
|
className="relative group outline-none bg-[#131313] rounded-full shadow-lg shadow-[#131313] p-2 opacity-90"
|
|
>
|
|
{!muted ? <MicroOnIcon /> : <MicroOffIcon />}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
export default ToggleMic;
|