Users Cameras; Devices controls;

2025-10-15 17:06:05 +05:00
parent 728d727cd1
commit 2ade35a8ed
6 changed files with 276 additions and 7 deletions
@@ -0,0 +1,52 @@
+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]">
+      <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>
+  );
+}