54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
import MicrophoneFilledIcon from "../icons/MicrophoneFilledIcon";
|
|
import ControlButton from "./ControlButton";
|
|
import VideoFilledIcon from "../icons/VideoFilledIcon";
|
|
import HandRaisedFilledIcon from "../icons/HandRaisedFilledIcon";
|
|
import CogFilledIcon from "../icons/CogFilledIcon";
|
|
import useModalStore from "../../store/modalStore";
|
|
import SettingsModal from "../modals/SettingsModal";
|
|
|
|
export default function UserDevicesControls() {
|
|
const { setModal } = useModalStore();
|
|
|
|
function ToggleAudioDevice() {
|
|
console.log("Mute device");
|
|
}
|
|
function ToggleVideoDevice() {
|
|
console.log("Video device");
|
|
}
|
|
function ToggleCanControl() {
|
|
console.log("Can control device");
|
|
}
|
|
function ToggleSettings() {
|
|
setModal(<SettingsModal />);
|
|
}
|
|
|
|
return (
|
|
<div className="hidden 2xl:flex aspect-square p-[0.556vw] flex-wrap justify-between items-center size-[6.944vw] rounded-[1.667vw] bg-[#00000040] shadow-[0_4px_40px_0_#0F10111A] backdrop-blur-[10px] pointer-events-auto">
|
|
<ControlButton
|
|
size="large"
|
|
icon={<MicrophoneFilledIcon />}
|
|
onClick={ToggleAudioDevice}
|
|
enabled={true}
|
|
/>
|
|
<ControlButton
|
|
size="large"
|
|
icon={<VideoFilledIcon />}
|
|
enabled={true}
|
|
onClick={ToggleVideoDevice}
|
|
/>
|
|
<ControlButton
|
|
size="large"
|
|
icon={<HandRaisedFilledIcon />}
|
|
onClick={ToggleCanControl}
|
|
enabled={true}
|
|
/>
|
|
<ControlButton
|
|
size="large"
|
|
icon={<CogFilledIcon />}
|
|
enabled={true}
|
|
onClick={ToggleSettings}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|