39/add mic mute

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

@@ -9,16 +9,25 @@ import { ActionButton } from "../landing-page/form-elements.tsx";
 import { UserList } from "./user-list.tsx";
 import { API } from "../../api/api.ts";
 import { noop } from "../../helpers.ts";
+import { MicMuted, MicUnmuted } from "../../icons/icon.tsx";
 import { Spinner } from "../loader/loader.tsx";
 
 const TempDiv = styled.div`
   padding: 1rem;
 `;
+
+const UserControlBtn = styled.button`
+  background-color: transparent;
+  border-color: transparent;
+`;
+
 export const ProductionLine: FC = () => {
   //  const { productionId, lineId } = useParams();
-  const [{ joinProductionOptions }, dispatch] = useGlobalState();
+  const [{ joinProductionOptions, mediaStreamInput }, dispatch] =
+    useGlobalState();
   const navigate = useNavigate();
   const audioContainerRef = useRef<HTMLDivElement>(null);
+  const [micMute, setMicMute] = useState(true);
   const [participants, setParticipants] = useState<
     { name: string; sessionid: string }[] | null
   >(null);
@@ -81,7 +90,15 @@ export const ProductionLine: FC = () => {
     navigate("/");
   };
 
-  // Mute/Unmute mic
+  useEffect(() => {
+    if (mediaStreamInput) {
+      mediaStreamInput.getTracks().forEach((track) => {
+        // eslint-disable-next-line no-param-reassign
+        track.enabled = !micMute;
+      });
+    }
+  }, [mediaStreamInput, micMute]);
+
   // Mute/Unmute speaker
   // Show active sink and mic
   // Exit button (link to /, clear production from state)
@@ -95,6 +112,11 @@ export const ProductionLine: FC = () => {
       {!loading && (
         <>
           <TempDiv>Production View</TempDiv>
+          <TempDiv>
+            <UserControlBtn type="button" onClick={() => setMicMute(!micMute)}>
+              {micMute ? <MicMuted /> : <MicUnmuted />}
+            </UserControlBtn>
+          </TempDiv>
           <TempDiv ref={audioContainerRef} />
           {audioElements.length && (
             <TempDiv>Incoming Audio Channels: {audioElements.length}</TempDiv>

src/components/production-line/use-rtc-connection.ts

@@ -198,6 +198,11 @@ export const useRtcConnection = ({
         rtcPeerConnection,
         inputAudioStream,
       });
+
+      dispatch({
+        type: "CONNECTED_MEDIASTREAM",
+        payload: inputAudioStream,
+      });
     }
 
     const { teardown } = establishConnection({
@@ -217,6 +222,11 @@ export const useRtcConnection = ({
         onConnectionStateChange
       );
 
+      dispatch({
+        type: "CONNECTED_MEDIASTREAM",
+        payload: null,
+      });
+
       rtcPeerConnection.close();
     };
   }, [

src/global-state/global-state-actions.ts

@@ -5,7 +5,8 @@ export type TGlobalStateAction =
   | TProductionCreated
   | TProductionListFetched
   | TUpdateDevicesAction
-  | TUpdateJoinProductionOptions;
+  | TUpdateJoinProductionOptions
+  | TMediaStream;
 
 export type TPublishError = {
   type: "ERROR";
@@ -29,3 +30,8 @@ export type TUpdateJoinProductionOptions = {
   type: "UPDATE_JOIN_PRODUCTION_OPTIONS";
   payload: TJoinProductionOptions | null;
 };
+
+export type TMediaStream = {
+  type: "CONNECTED_MEDIASTREAM";
+  payload: MediaStream | null;
+};

src/global-state/global-state-reducer.ts

@@ -9,6 +9,7 @@ const initialGlobalState: TGlobalState = {
   reloadProductionList: true,
   devices: null,
   joinProductionOptions: null,
+  mediaStreamInput: null,
 };
 
 const globalReducer: Reducer<TGlobalState, TGlobalStateAction> = (
@@ -43,6 +44,11 @@ const globalReducer: Reducer<TGlobalState, TGlobalStateAction> = (
         ...state,
         joinProductionOptions: action.payload,
       };
+    case "CONNECTED_MEDIASTREAM":
+      return {
+        ...state,
+        mediaStreamInput: action.payload,
+      };
     default:
       return state;
   }

src/global-state/types.ts

@@ -9,4 +9,5 @@ export type TGlobalState = {
   reloadProductionList: boolean;
   devices: MediaDeviceInfo[] | null;
   joinProductionOptions: TJoinProductionOptions | null;
+  mediaStreamInput: MediaStream | null;
 };

src/icons/icon.tsx

@@ -0,0 +1,13 @@
+import styled from "@emotion/styled";
+import MicMute from "./microphone-off-red.png";
+import MicUnmute from "./microphone-green.png";
+
+const Icon = styled.img`
+  width: 5rem;
+  padding-right: 1em;
+  pointer-events: none;
+`;
+
+export const MicMuted = () => <Icon src={MicMute} alt="red-microphone" />;
+
+export const MicUnmuted = () => <Icon src={MicUnmute} alt="green-microphone" />;