Add @uidotdev/usehooks dependency; enhance SettingsModal with microphone and speaker selection, volume control, and camera options; update Button and RangeInput components for improved functionality and styling.

client/src/components/modals/SettingsModal.tsx

@@ -4,69 +4,146 @@ import VideoFilledIcon from "../icons/VideoFilledIcon";
 import ModalWrapper from "../ModalWrapper";
 import Button from "../ui/Button";
 import RangeInput from "../ui/RangeInput";
+import Select from "../ui/Select";
+import MicrophoneFilledIcon from "../icons/MicrophoneFilledIcon";
+import Switch from "../ui/Switch";
+
+const microphoneOptions = ["Realtek HD Microphone"];
+const speakerOptions = ["Realtek HD Audio"];
+const cameraOptions = ["Realtek HD Camera"];
 
 function SettingsModal() {
   const [microphoneVolume, setMicrophoneVolume] = useState(50);
-  //   const [speakerVolume, setSpeakerVolume] = useState(50);
+  const [speakerVolume, setSpeakerVolume] = useState(50);
+
+  const [selectedMicrophone, setSelectedMicrophone] = useState(
+    microphoneOptions[0]
+  );
+  const [selectedSpeaker, setSelectedSpeaker] = useState(speakerOptions[0]);
+  const [camera, setCamera] = useState(cameraOptions[0]);
+
+  const [mediaType, setMediaType] = useState<"sound" | "video">("sound");
+
+  const [participantsVideosHidden, setParticipantsVideosHidden] =
+    useState(false);
 
   return (
     <ModalWrapper title="Настройки">
-      <div className="2xl:space-y-[1.389vw] space-y-5">
+      <div className="2xl:space-y-[1.389vw] space-y-5 2xl:-mt-[1.389vw] -mt-5">
         <div className="flex">
-          <Button variant="menu" size="large" className="w-full">
+          <Button
+            variant="menu"
+            size="large"
+            className="w-full"
+            onClick={() => setMediaType("sound")}
+          >
             <div className="flex 2xl:gap-[0.556vw] items-center">
-              <div className="2xl:size-[1.111vw] size-4 text-[#7B60F3]">
+              <div className="2xl:size-[1.111vw] size-4 text-[#7D7D7D]">
                 <SoundIcon />
               </div>
               <p className="font-medium">Звук</p>
             </div>
           </Button>
-          <Button variant="menu" size="large" className="w-full">
+          <Button
+            variant="menu"
+            size="large"
+            className="w-full"
+            onClick={() => setMediaType("video")}
+          >
             <div className="flex 2xl:gap-[0.556vw] items-center">
-              <div className="2xl:size-[1.111vw] size-4 text-[#7B60F3]">
+              <div className="2xl:size-[1.111vw] size-4 text-[#7D7D7D]">
                 <VideoFilledIcon />
               </div>
               <p className="font-medium">Видео</p>
             </div>
           </Button>
         </div>
-        <div className="2xl:space-y-[1.667vw] space-y-6">
-          <div className="2xl:space-y-[0.833vw] space-y-3">
-            <p className="title-s font-medium">Микрофон</p>
-            <div className="2xl:space-y-[1.111vw] space-y-4">
-              <div className="flex 2xl:gap-[0.556vw]">
-                <div className="bg-[#F3F3F3] flex-1"></div>
-                <Button variant="cta" size="large">
-                  Проверить
-                </Button>
-              </div>
-              <div className="flex items-center 2xl:gap-[0.833vw]">
-                <div className="2xl:size-[1.111vw] size-4 text-[#7D7D7D]">
-                  <SoundIcon />
+        {mediaType === "sound" && (
+          <div className="2xl:space-y-[1.667vw] space-y-6">
+            <div className="2xl:space-y-[0.833vw] space-y-3">
+              <p className="title-s font-medium">Микрофон</p>
+              <div className="2xl:space-y-[1.111vw] space-y-4">
+                <div className="flex 2xl:gap-[0.556vw]">
+                  <Select
+                    className="flex-1"
+                    options={microphoneOptions}
+                    defaultOption={selectedMicrophone}
+                    onSelect={setSelectedMicrophone}
+                  />
+                  <Button variant="cta" size="large">
+                    Проверить
+                  </Button>
                 </div>
-                <RangeInput
-                  value={microphoneVolume}
-                  onChange={setMicrophoneVolume}
-                />
-                <p className="caption-xs font-medium text-[#7D7D7D] 2xl:w-[1.667vw] w-6">
-                  {microphoneVolume.toFixed(0)}%
+                <div className="flex items-center 2xl:gap-[0.833vw]">
+                  <div className="2xl:size-[1.111vw] size-4 text-[#7D7D7D]">
+                    <MicrophoneFilledIcon />
+                  </div>
+                  <RangeInput
+                    value={microphoneVolume}
+                    onChange={setMicrophoneVolume}
+                  />
+                  <p className="caption-xs font-medium text-[#7D7D7D] 2xl:w-[1.667vw] w-6">
+                    {microphoneVolume.toFixed(0)}%
+                  </p>
+                </div>
+              </div>
+            </div>
+            <hr className="bg-[#F6F6F6] 2xl:h-[0.069vw] h-px" />
+            <div className="2xl:space-y-[0.833vw] space-y-3">
+              <p className="title-s font-medium">Динамик</p>
+              <div className="2xl:space-y-[1.111vw] space-y-4">
+                <div className="flex 2xl:gap-[0.556vw]">
+                  <Select
+                    className="flex-1"
+                    options={speakerOptions}
+                    defaultOption={selectedSpeaker}
+                    onSelect={setSelectedSpeaker}
+                  />
+                  <Button variant="cta" size="large">
+                    Проверить
+                  </Button>
+                </div>
+                <div className="flex items-center 2xl:gap-[0.833vw]">
+                  <div className="2xl:size-[1.111vw] size-4 text-[#7D7D7D]">
+                    <SoundIcon />
+                  </div>
+                  <RangeInput
+                    value={speakerVolume}
+                    onChange={setSpeakerVolume}
+                  />
+                  <p className="caption-xs font-medium text-[#7D7D7D] 2xl:w-[1.667vw] w-6">
+                    {speakerVolume.toFixed(0)}%
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+        {mediaType === "video" && (
+          <div className="2xl:space-y-[1.667vw] space-y-6">
+            <div className="2xl:space-y-[0.556vw] space-y-2">
+              <p className="title-s font-medium">Камера</p>
+              <Select
+                options={cameraOptions}
+                onSelect={setCamera}
+                defaultOption={camera}
+              />
+              <div className="2xl:w-[25vw] w-[360px] aspect-[360/202] bg-[#F6F6F6] 2xl:rounded-[1.111vw] rounded-2xl" />
+            </div>
+            <div className="flex items-start 2xl:gap-[0.556vw] gap-2">
+              <Switch
+                enabled={participantsVideosHidden}
+                onChange={setParticipantsVideosHidden}
+              />
+              <div className="2xl:space-y-[0.278vw] space-y-1">
+                <p className="text-m">Скрыть видео участников</p>
+                <p className="caption-s text-[#7D7D7D]">
+                  Это снизит нагрузку на сеть
                 </p>
               </div>
             </div>
           </div>
-          <hr className="bg-[#F6F6F6] 2xl:h-[0.069vw] h-px" />
-          <div className="2xl:space-y-[0.833vw] space-y-3">
-            <p className="title-s font-medium">Динамик</p>
-            <div className="2xl:space-y-[1.111vw] space-y-4">
-              <div className="flex 2xl:gap-[0.556vw]">
-                <div className="bg-[#F3F3F3] flex-1"></div>
-                <Button variant="cta" size="large">
-                  Проверить
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
+        )}
       </div>
     </ModalWrapper>
   );