Feat: [non-ios] control volume of line

src/assets/icons/icon.tsx

@@ -9,6 +9,10 @@ import ConfirmSvg from "./done.svg?react";
 import StepLeftSvg from "./chevron_left.svg?react";
 import StepRightSvg from "./navigate_next.svg?react";
 import Settings from "./settings.svg?react";
+import NoSound from "./no_sound.svg?react";
+import FullSound from "./full_sound.svg?react";
+import Minus from "./minus.svg?react";
+import Plus from "./plus.svg?react";
 import ChevronDown from "./chevron_down.svg?react";
 import ChevronUp from "./chevron_up.svg?react";
 import Headset from "./headset.svg?react";
@@ -35,6 +39,14 @@ export const StepRightIcon = () => <StepRightSvg />;
 
 export const SettingsIcon = () => <Settings />;
 
+export const NoSoundIcon = () => <NoSound />;
+
+export const FullSoundIcon = () => <FullSound />;
+
+export const MinusIcon = () => <Minus />;
+
+export const PlusIcon = () => <Plus />;
+
 export const ChevronDownIcon = () => <ChevronDown />;
 
 export const ChevronUpIcon = () => <ChevronUp />;

src/components/production-line/exit-call-button.tsx

@@ -6,6 +6,8 @@ const StyledBackBtn = styled(PrimaryButton)`
   padding: 0;
   margin: 0;
   width: 4rem;
+  background: #32383b;
+  border: 0.2rem solid #6d6d6d;
 `;
 
 export const ExitCallButton = ({

src/components/production-line/production-line.tsx

@@ -26,6 +26,7 @@ import { useCheckBadLineData } from "./use-check-bad-line-data.ts";
 import { useAudioCue } from "./use-audio-cue.ts";
 import { DisplayWarning } from "../display-box.tsx";
 import { SettingsModal, Hotkeys } from "./settings-modal.tsx";
+import { VolumeSlider } from "../volume-slider/volume-slider.tsx";
 import { CallState } from "../../global-state/types.ts";
 import { ExitCallButton } from "./exit-call-button.tsx";
 import { Modal } from "../modal/modal.tsx";
@@ -74,11 +75,11 @@ const FlexButtonWrapper = styled.div`
   width: 50%;
   padding: 0 1rem 2rem 1rem;
 
-  :first-of-type {
+  &.first {
     padding-left: 0;
   }
 
-  :last-of-type {
+  &.last {
     padding-right: 0;
   }
 `;
@@ -145,11 +146,15 @@ export const ProductionLine = ({
     muteHotkey: "m",
     speakerHotkey: "n",
     pressToTalkHotkey: "t",
+    increaseVolumeHotkey: "u",
+    decreaseVolumeHotkey: "d",
   });
   const [savedHotkeys, setSavedHotkeys] = useState<Hotkeys>({
     muteHotkey: "m",
     speakerHotkey: "n",
     pressToTalkHotkey: "t",
+    increaseVolumeHotkey: "u",
+    decreaseVolumeHotkey: "d",
   });
   const {
     joinProductionOptions,
@@ -333,18 +338,21 @@ export const ProductionLine = ({
               }}
             >
               <DisplayContainerHeader>Controls</DisplayContainerHeader>
-
+              <VolumeSlider
+                audioElements={audioElements || []}
+                increaseVolumeKey={savedHotkeys.increaseVolumeHotkey}
+                decreaseVolumeKey={savedHotkeys.decreaseVolumeHotkey}
+              />
               <FlexContainer>
-                <FlexButtonWrapper>
+                <FlexButtonWrapper className="first">
                   <UserControlBtn type="button" onClick={() => muteOutput()}>
                     <ButtonIcon>
                       {isOutputMuted ? <SpeakerOff /> : <SpeakerOn />}
                     </ButtonIcon>
                   </UserControlBtn>
                 </FlexButtonWrapper>
-
                 {inputAudioStream && inputAudioStream !== "no-device" && (
-                  <FlexButtonWrapper>
+                  <FlexButtonWrapper className="last">
                     <UserControlBtn
                       type="button"
                       onClick={() => muteInput(!isInputMuted)}
@@ -401,6 +409,18 @@ export const ProductionLine = ({
                       </strong>
                       Push to Talk
                     </TempDiv>
+                    <TempDiv>
+                      <strong>
+                        {savedHotkeys.increaseVolumeHotkey.toUpperCase()}:{" "}
+                      </strong>
+                      Increase Volume
+                    </TempDiv>
+                    <TempDiv>
+                      <strong>
+                        {savedHotkeys.decreaseVolumeHotkey.toUpperCase()}:{" "}
+                      </strong>
+                      Decrease Volume
+                    </TempDiv>
                     {isSettingsModalOpen && (
                       <SettingsModal
                         hotkeys={hotkeys}

src/components/production-line/settings-modal.tsx

@@ -65,6 +65,8 @@ export type Hotkeys = {
   muteHotkey: string;
   speakerHotkey: string;
   pressToTalkHotkey: string;
+  increaseVolumeHotkey: string;
+  decreaseVolumeHotkey: string;
 };
 
 type TSettingsModalProps = {
@@ -74,6 +76,7 @@ type TSettingsModalProps = {
   onClose: () => void;
   onSave: () => void;
 };
+
 export const SettingsModal = ({
   hotkeys,
   lineName,
@@ -87,39 +90,39 @@ export const SettingsModal = ({
     muteHotkey: "",
     speakerHotkey: "",
     pressToTalkHotkey: "",
+    increaseVolumeHotkey: "",
+    decreaseVolumeHotkey: "",
   });
 
-  const validateFields = (key: string, value: string) => {
+  const validateFields = (key: keyof Hotkeys, value: string) => {
     const currentValues = {
       ...hotkeys,
       [key]: value,
     };
 
-    const duplicates = Object.entries(currentValues).reduce(
-      (acc, [field, val]) => {
-        if (val && value && val === value && field !== key) {
-          acc[key] = "This key is already in use.";
+    const newErrors = (
+      Object.keys(currentValues) as Array<keyof Hotkeys>
+    ).reduce(
+      (acc, field) => {
+        const isDuplicate =
+          Object.values(currentValues).filter(
+            (val) => val && val === currentValues[field]
+          ).length > 1;
+
+        if (!currentValues[field]) {
+          acc[field] = "This field can not be empty.";
+        } else if (isDuplicate) {
+          acc[field] = "This key is already in use.";
+        } else {
+          acc[field] = "";
         }
+
         return acc;
       },
-      {} as { [key: string]: string }
+      {} as { [K in keyof Hotkeys]: string }
     );
 
-    setErrors((prevErrors) => ({
-      ...prevErrors,
-      muteHotkey:
-        key === "muteHotkey"
-          ? duplicates.muteHotkey || ""
-          : prevErrors.muteHotkey,
-      speakerHotkey:
-        key === "speakerHotkey"
-          ? duplicates.speakerHotkey || ""
-          : prevErrors.speakerHotkey,
-      pressToTalkHotkey:
-        key === "pressToTalkHotkey"
-          ? duplicates.pressToTalkHotkey || ""
-          : prevErrors.pressToTalkHotkey,
-    }));
+    setErrors(newErrors);
   };
 
   const handleInputChange = (key: keyof typeof hotkeys, value: string) => {
@@ -134,9 +137,13 @@ export const SettingsModal = ({
 
   const handleSave = () => {
     const hasErrors = Object.values(errors).some((error) => error !== "");
-    if (!hasErrors) {
-      onSave();
+    const hasEmptyFields = Object.values(hotkeys).some((value) => !value);
+
+    if (hasErrors || hasEmptyFields) {
+      return;
     }
+
+    onSave();
   };
 
   const handleKeyDown = (e: React.KeyboardEvent, index: number) => {
@@ -237,6 +244,56 @@ export const SettingsModal = ({
               />
             )}
           </FormLabel>
+          <FormLabel>
+            <DecorativeLabel>Increase volume:</DecorativeLabel>
+            <FormInput
+              id="increaseVolume"
+              ref={(el) => setInputRef(3, el)}
+              type="text"
+              value={hotkeys.increaseVolumeHotkey}
+              onChange={(e) =>
+                handleInputChange("increaseVolumeHotkey", e.target.value)
+              }
+              placeholder="Enter hotkey"
+              maxLength={1}
+              onKeyDown={(e) => handleKeyDown(e, 3)}
+            />
+            {errors.increaseVolumeHotkey && (
+              <ErrorMessage
+                errors={{
+                  increasevolumekey: { message: errors.increaseVolumeHotkey },
+                }}
+                name="increasevolumekey"
+                as={StyledWarningMessage}
+              />
+            )}
+          </FormLabel>
+          <FormLabel>
+            <DecorativeLabel>Decrease volume:</DecorativeLabel>
+            <FormInput
+              id="decreaseVolume"
+              ref={(el) => setInputRef(4, el)}
+              type="text"
+              value={hotkeys.decreaseVolumeHotkey}
+              onChange={(e) =>
+                handleInputChange("decreaseVolumeHotkey", e.target.value)
+              }
+              placeholder="Enter hotkey"
+              maxLength={1}
+              onKeyDown={(e) => handleKeyDown(e, 4)}
+            />
+            {errors.decreaseVolumeHotkey && (
+              <ErrorMessage
+                errors={{
+                  decreasevolumehotkey: {
+                    message: errors.decreaseVolumeHotkey,
+                  },
+                }}
+                name="decreasevolumehotkey"
+                as={StyledWarningMessage}
+              />
+            )}
+          </FormLabel>
           <ButtonDiv>
             <CancelButton type="button" onClick={onClose}>
               Cancel