feat: added speaker-mute as a hotkey

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

@@ -20,7 +20,7 @@ import { useHeartbeat } from "./use-heartbeat.ts";
 import { JoinProduction } from "../landing-page/join-production.tsx";
 import { useDeviceLabels } from "./use-device-labels.ts";
 import { isMobile } from "../../bowser.ts";
-import { useLineHotkeys } from "./use-line-hotkeys.ts";
+import { useLineHotkeys, useSpeakerHotkeys } from "./use-line-hotkeys.ts";
 import { LongPressToTalkButton } from "./long-press-to-talk-button.tsx";
 import { useLinePolling } from "./use-line-polling.ts";
 import { useFetchProduction } from "../landing-page/use-fetch-production.ts";
@@ -151,6 +151,11 @@ export const ProductionLine: FC = () => {
     setIsOutputMuted(!isOutputMuted);
   }, [audioElements, isOutputMuted]);
 
+  useSpeakerHotkeys({
+    muteOutput,
+    isOutputMuted,
+  });
+
   const line = useLinePolling({ joinProductionOptions });
 
   const { production, error: fetchProductionError } = useFetchProduction(
@@ -289,6 +294,9 @@ export const ProductionLine: FC = () => {
                     <TempDiv>
                       <strong>M:</strong> Toggle Input Mute
                     </TempDiv>
+                    <TempDiv>
+                      <strong>N:</strong> Toggle Output Mute
+                    </TempDiv>
                     <TempDiv>
                       <strong>T:</strong> Push to Talk
                     </TempDiv>

src/components/production-line/use-line-hotkeys.ts

@@ -1,11 +1,19 @@
 import { useHotkeys } from "react-hotkeys-hook";
 
-type TProps = {
+type TuseLineHotkeys = {
   muteInput: (mute: boolean) => void;
   isInputMuted: boolean;
 };
 
-export const useLineHotkeys = ({ muteInput, isInputMuted }: TProps) => {
+type TuseSpeakerHotkeys = {
+  muteOutput: (mute: boolean) => void;
+  isOutputMuted: boolean;
+};
+
+export const useLineHotkeys = ({
+  muteInput,
+  isInputMuted,
+}: TuseLineHotkeys) => {
   useHotkeys("m", () => {
     muteInput(!isInputMuted);
   });
@@ -25,3 +33,12 @@ export const useLineHotkeys = ({ muteInput, isInputMuted }: TProps) => {
     }
   );
 };
+
+export const useSpeakerHotkeys = ({
+  muteOutput,
+  isOutputMuted,
+}: TuseSpeakerHotkeys) => {
+  useHotkeys("n", () => {
+    muteOutput(!isOutputMuted);
+  });
+};