38/mute audio stream

src/assets/icons/icon.tsx

@@ -2,6 +2,8 @@ import styled from "@emotion/styled";
 import MicMute from "./mic_off.svg";
 import MicUnmute from "./mic_on.svg";
 import RemoveSvg from "./clear.svg";
+import VolumeOn from "./volume_on.svg";
+import VolumeOff from "./volume_off.svg";
 
 const Icon = styled.img`
   width: 100%;
@@ -14,3 +16,9 @@ export const MicMuted = () => <Icon src={MicMute} alt="off-microphone" />;
 export const MicUnmuted = () => <Icon src={MicUnmute} alt="on-microphone" />;
 
 export const RemoveIcon = () => <Icon src={RemoveSvg} alt="cross" />;
+
+export const SpeakerOff = () => (
+  <Icon src={VolumeOff} alt="speaker-crossed-over" />
+);
+
+export const SpeakerOn = () => <Icon src={VolumeOn} alt="speaker" />;

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

@@ -7,7 +7,12 @@ import { useRtcConnection } from "./use-rtc-connection.ts";
 import { useEstablishSession } from "./use-establish-session.ts";
 import { ActionButton } from "../landing-page/form-elements.tsx";
 import { UserList } from "./user-list.tsx";
-import { MicMuted, MicUnmuted } from "../../assets/icons/icon.tsx";
+import {
+  MicMuted,
+  MicUnmuted,
+  SpeakerOff,
+  SpeakerOn,
+} from "../../assets/icons/icon.tsx";
 import { Spinner } from "../loader/loader.tsx";
 import { DisplayContainerHeader } from "../landing-page/display-container-header.tsx";
 import { DisplayContainer, FlexContainer } from "../generic-components.ts";
@@ -57,6 +62,7 @@ export const ProductionLine: FC = () => {
   const [{ joinProductionOptions }, dispatch] = useGlobalState();
   const navigate = useNavigate();
   const [isInputMuted, setIsInputMuted] = useState(true);
+  const [isOutputMuted, setIsOutputMuted] = useState(false);
 
   const inputAudioStream = useAudioInput({
     inputId: joinProductionOptions?.audioinput ?? null,
@@ -68,8 +74,8 @@ export const ProductionLine: FC = () => {
         inputAudioStream.getTracks().forEach((t) => {
           // eslint-disable-next-line no-param-reassign
           t.enabled = !mute;
-          setIsInputMuted(mute);
         });
+        setIsInputMuted(mute);
       }
     },
     [inputAudioStream]
@@ -93,13 +99,21 @@ export const ProductionLine: FC = () => {
     dispatch,
   });
 
-  const { connectionState } = useRtcConnection({
+  const { connectionState, audioElements } = useRtcConnection({
     inputAudioStream,
     sdpOffer,
     joinProductionOptions,
     sessionId,
   });
 
+  const muteOutput = useCallback(() => {
+    audioElements.forEach((singleElement: HTMLAudioElement) => {
+      // eslint-disable-next-line no-param-reassign
+      singleElement.muted = !isOutputMuted;
+    });
+    setIsOutputMuted(!isOutputMuted);
+  }, [audioElements, isOutputMuted]);
+
   const line = useLinePolling({ joinProductionOptions });
 
   const { production, error: fetchProductionError } = useFetchProduction(
@@ -178,6 +192,14 @@ export const ProductionLine: FC = () => {
           <DisplayContainer>
             <div>
               <DisplayContainerHeader>Controls</DisplayContainerHeader>
+              <TempDiv>
+                <UserControlBtn type="button" onClick={() => muteOutput()}>
+                  <ButtonIcon>
+                    {isOutputMuted ? <SpeakerOff /> : <SpeakerOn />}
+                  </ButtonIcon>
+                  {isOutputMuted ? "Muted" : "Unmuted"}
+                </UserControlBtn>
+              </TempDiv>
 
               {inputAudioStream && inputAudioStream !== "no-device" && (
                 <TempDiv>