fix: show mute button on now volume slider value (#247)

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

@@ -2,6 +2,7 @@ import styled from "@emotion/styled";
 import { useCallback, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { SubmitHandler, useForm } from "react-hook-form";
+import { useHotkeys } from "react-hotkeys-hook";
 import { useGlobalState } from "../../global-state/context-provider.tsx";
 import { useAudioInput } from "./use-audio-input.ts";
 import { UserList } from "./user-list.tsx";
@@ -107,6 +108,10 @@ const UserControlBtn = styled(ActionButton)`
   background: rgba(50, 56, 59, 1);
   border: 0.2rem solid #6d6d6d;
   width: 100%;
+
+  &:disabled {
+    background: rgba(50, 56, 59, 0.5);
+  }
 `;
 
 const LongPressWrapper = styled.div`
@@ -165,6 +170,7 @@ export const ProductionLine = ({
   const [refresh, setRefresh] = useState<number>(0);
   const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false);
   const [confirmExitModalOpen, setConfirmExitModalOpen] = useState(false);
+  const [value, setValue] = useState(0.75);
   const [hotkeys, setHotkeys] = useState<Hotkeys>({
     muteHotkey: "m",
     speakerHotkey: "n",
@@ -193,6 +199,46 @@ export const ProductionLine = ({
     audioOutputId: joinProductionOptions?.audiooutput ?? null,
   });
 
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = parseFloat(e.target.value);
+    setValue(newValue);
+
+    audioElements?.forEach((audioElement) => {
+      console.log("Setting volume to: ", newValue);
+      // eslint-disable-next-line no-param-reassign
+      audioElement.volume = newValue;
+    });
+  };
+
+  const handleVolumeButtonClick = (type: "increase" | "decrease") => {
+    const newValue =
+      type === "increase"
+        ? Math.min(value + 0.05, 1)
+        : Math.max(value - 0.05, 0);
+    setValue(newValue);
+    // TODO: Fix for iOS
+  };
+
+  useHotkeys(savedHotkeys.increaseVolumeHotkey || "u", () => {
+    const newValue = Math.min(value + 0.05, 1);
+    setValue(newValue);
+
+    audioElements?.forEach((audioElement) => {
+      // eslint-disable-next-line no-param-reassign
+      audioElement.volume = newValue;
+    });
+  });
+
+  useHotkeys(savedHotkeys.decreaseVolumeHotkey || "d", () => {
+    const newValue = Math.max(value - 0.05, 0);
+    setValue(newValue);
+
+    audioElements?.forEach((audioElement) => {
+      // eslint-disable-next-line no-param-reassign
+      audioElement.volume = newValue;
+    });
+  });
+
   const muteInput = useCallback(
     (mute: boolean) => {
       if (inputAudioStream && inputAudioStream !== "no-device") {
@@ -230,6 +276,14 @@ export const ProductionLine = ({
     refresh,
   });
 
+  useEffect(() => {
+    if (value === 0) {
+      setIsOutputMuted(true);
+    } else {
+      setIsOutputMuted(false);
+    }
+  }, [value]);
+
   useEffect(() => {
     if (joinProductionOptions) {
       setConnectionActive(true);
@@ -450,13 +504,17 @@ export const ProductionLine = ({
             >
               <DisplayContainerHeader>Controls</DisplayContainerHeader>
               <VolumeSlider
-                audioElements={audioElements || []}
-                increaseVolumeKey={savedHotkeys.increaseVolumeHotkey}
-                decreaseVolumeKey={savedHotkeys.decreaseVolumeHotkey}
+                value={value}
+                handleInputChange={handleInputChange}
+                handleVolumeButtonClick={handleVolumeButtonClick}
               />
               <FlexContainer>
                 <FlexButtonWrapper className="first">
-                  <UserControlBtn type="button" onClick={() => muteOutput()}>
+                  <UserControlBtn
+                    type="button"
+                    onClick={() => muteOutput()}
+                    disabled={value === 0}
+                  >
                     <ButtonIcon>
                       {isOutputMuted ? <SpeakerOff /> : <SpeakerOn />}
                     </ButtonIcon>

src/components/volume-slider/volume-slider.tsx

@@ -1,6 +1,5 @@
 import styled from "@emotion/styled";
-import { FC, useState } from "react";
-import { useHotkeys } from "react-hotkeys-hook";
+import { FC } from "react";
 import {
   NoSoundIcon,
   FullSoundIcon,
@@ -77,60 +76,18 @@ const VolumeWrapper = styled.div`
 `;
 
 type TVolumeSliderProps = {
-  audioElements: HTMLAudioElement[];
-  increaseVolumeKey?: string;
-  decreaseVolumeKey?: string;
+  value: number;
+  handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleVolumeButtonClick: (type: "increase" | "decrease") => void;
 };
 
 export const VolumeSlider: FC<TVolumeSliderProps> = ({
-  audioElements,
-  increaseVolumeKey,
-  decreaseVolumeKey,
+  handleInputChange,
+  value,
+  handleVolumeButtonClick,
 }) => {
-  const [value, setValue] = useState(0.75);
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = parseFloat(e.target.value);
-    setValue(newValue);
-
-    audioElements.forEach((audioElement) => {
-      console.log("Setting volume to: ", newValue);
-      // eslint-disable-next-line no-param-reassign
-      audioElement.volume = newValue;
-    });
-  };
-
   const thumbPosition = value * 100;
 
-  useHotkeys(increaseVolumeKey || "u", () => {
-    const newValue = Math.min(value + 0.05, 1);
-    setValue(newValue);
-
-    audioElements.forEach((audioElement) => {
-      // eslint-disable-next-line no-param-reassign
-      audioElement.volume = newValue;
-    });
-  });
-
-  useHotkeys(decreaseVolumeKey || "d", () => {
-    const newValue = Math.max(value - 0.05, 0);
-    setValue(newValue);
-
-    audioElements.forEach((audioElement) => {
-      // eslint-disable-next-line no-param-reassign
-      audioElement.volume = newValue;
-    });
-  });
-
-  const handleVolumeButtonClick = (type: "increase" | "decrease") => {
-    const newValue =
-      type === "increase"
-        ? Math.min(value + 0.05, 1)
-        : Math.max(value - 0.05, 0);
-    setValue(newValue);
-    // TODO: Fix for iOS
-  };
-
   return (
     <SliderWrapper>
       <VolumeWrapper>