developer option to mute all audio (#3239)

locales/en/app.json

@@ -70,6 +70,7 @@
     "livekit_server_info": "LiveKit Server Info",
     "livekit_sfu": "LiveKit SFU: {{url}}",
     "matrix_id": "Matrix ID: {{id}}",
+    "mute_all_audio": "Mute all audio (participants, reactions, join sounds)",
     "show_connection_stats": "Show connection statistics",
     "show_non_member_tiles": "Show tiles for non-member media",
     "url_params": "URL parameters",

src/room/CallEventAudioRenderer.tsx

@@ -47,12 +47,15 @@ export const callEventAudioSounds = prefetchSounds({
 
 export function CallEventAudioRenderer({
   vm,
+  muted,
 }: {
   vm: CallViewModel;
+  muted?: boolean;
 }): ReactNode {
   const audioEngineCtx = useAudioContext({
     sounds: callEventAudioSounds,
     latencyHint: "interactive",
+    muted,
   });
   const audioEngineRef = useLatest(audioEngineCtx);
 

src/room/GroupCallView.tsx

@@ -62,8 +62,9 @@ import {
 } from "../utils/errors.ts";
 import { GroupCallErrorBoundary } from "./GroupCallErrorBoundary.tsx";
 import {
-  useExperimentalToDeviceTransportSetting,
-  useNewMembershipManagerSetting as useNewMembershipManagerSetting,
+  useNewMembershipManager as useNewMembershipManagerSetting,
+  useExperimentalToDeviceTransport as useExperimentalToDeviceTransportSetting,
+  muteAllAudio as muteAllAudioSetting,
   useSetting,
 } from "../settings/settings";
 import { useTypedEventEmitter } from "../useEvents";
@@ -104,11 +105,13 @@ export const GroupCallView: FC<Props> = ({
     null,
   );
 
+  const [muteAllAudio] = useSetting(muteAllAudioSetting);
   const memberships = useMatrixRTCSessionMemberships(rtcSession);
   const leaveSoundContext = useLatest(
     useAudioContext({
       sounds: callEventAudioSounds,
       latencyHint: "interactive",
+      muted: muteAllAudio,
     }),
   );
   // This should use `useEffectEvent` (only available in experimental versions)

src/room/InCallView.tsx

@@ -96,7 +96,8 @@ import { ReactionsOverlay } from "./ReactionsOverlay";
 import { CallEventAudioRenderer } from "./CallEventAudioRenderer";
 import {
   debugTileLayout as debugTileLayoutSetting,
-  useExperimentalToDeviceTransportSetting,
+  useExperimentalToDeviceTransport as useExperimentalToDeviceTransportSetting,
+  muteAllAudio as muteAllAudioSetting,
   useSetting,
 } from "../settings/settings";
 import { ReactionsReader } from "../reactions/ReactionsReader";
@@ -220,6 +221,8 @@ export const InCallView: FC<InCallViewProps> = ({
     room: livekitRoom,
   });
 
+  const [muteAllAudio] = useSetting(muteAllAudioSetting);
+
   const [toDeviceEncryptionSetting] = useSetting(
     useExperimentalToDeviceTransportSetting,
   );
@@ -693,10 +696,10 @@ export const InCallView: FC<InCallViewProps> = ({
           </Text>
         )
       }
-      <RoomAudioRenderer />
+      <RoomAudioRenderer muted={muteAllAudio} />
       {renderContent()}
-      <CallEventAudioRenderer vm={vm} />
-      <ReactionsAudioRenderer vm={vm} />
+      <CallEventAudioRenderer vm={vm} muted={muteAllAudio} />
+      <ReactionsAudioRenderer vm={vm} muted={muteAllAudio} />
       <ReactionsOverlay vm={vm} />
       {footer}
       {layout.type !== "pip" && (

src/room/ReactionAudioRenderer.tsx

@@ -24,8 +24,10 @@ const soundMap = Object.fromEntries([
 
 export function ReactionsAudioRenderer({
   vm,
+  muted,
 }: {
   vm: CallViewModel;
+  muted?: boolean;
 }): ReactNode {
   const [shouldPlay] = useSetting(playReactionsSound);
   const [soundCache, setSoundCache] = useState<ReturnType<
@@ -34,6 +36,7 @@ export function ReactionsAudioRenderer({
   const audioEngineCtx = useAudioContext({
     sounds: soundCache,
     latencyHint: "interactive",
+    muted,
   });
   const audioEngineRef = useLatest(audioEngineCtx);
 

src/settings/DeveloperSettingsTab.tsx

@@ -15,8 +15,9 @@ import {
   debugTileLayout as debugTileLayoutSetting,
   showNonMemberTiles as showNonMemberTilesSetting,
   showConnectionStats as showConnectionStatsSetting,
-  useNewMembershipManagerSetting,
-  useExperimentalToDeviceTransportSetting,
+  useNewMembershipManager as useNewMembershipManagerSetting,
+  useExperimentalToDeviceTransport as useExperimentalToDeviceTransportSetting,
+  muteAllAudio as muteAllAudioSetting,
 } from "./settings";
 import type { MatrixClient } from "matrix-js-sdk";
 import type { Room as LivekitRoom } from "livekit-client";
@@ -49,6 +50,9 @@ export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRoom }) => {
     useExperimentalToDeviceTransport,
     setUseExperimentalToDeviceTransport,
   ] = useSetting(useExperimentalToDeviceTransportSetting);
+
+  const [muteAllAudio, setMuteAllAudio] = useSetting(muteAllAudioSetting);
+
   const urlParams = useUrlParams();
 
   const sfuUrl = useMemo((): URL | null => {
@@ -175,6 +179,20 @@ export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRoom }) => {
           )}
         />
       </FieldRow>
+      <FieldRow>
+        <InputField
+          id="muteAllAudio"
+          type="checkbox"
+          label={t("developer_mode.mute_all_audio")}
+          checked={muteAllAudio}
+          onChange={useCallback(
+            (event: ChangeEvent<HTMLInputElement>): void => {
+              setMuteAllAudio(event.target.checked);
+            },
+            [setMuteAllAudio],
+          )}
+        />
+      </FieldRow>
       {livekitRoom ? (
         <>
           <p>

src/settings/settings.ts

@@ -115,14 +115,16 @@ export const soundEffectVolumeSetting = new Setting<number>(
   0.5,
 );
 
-export const useNewMembershipManagerSetting = new Setting<boolean>(
+export const useNewMembershipManager = new Setting<boolean>(
   "new-membership-manager",
   true,
 );
 
-export const useExperimentalToDeviceTransportSetting = new Setting<boolean>(
+export const useExperimentalToDeviceTransport = new Setting<boolean>(
   "experimental-to-device-transport",
   true,
 );
 
+export const muteAllAudio = new Setting<boolean>("mute-all-audio", false);
+
 export const alwaysShowSelf = new Setting<boolean>("always-show-self", true);

src/useAudioContext.tsx

@@ -47,6 +47,7 @@ interface Props<S extends string> {
    */
   sounds: PrefetchedSounds<S> | null;
   latencyHint: AudioContextLatencyCategory;
+  muted?: boolean;
 }
 
 interface UseAudioContext<S> {
@@ -112,7 +113,7 @@ export function useAudioContext<S extends string>(
   }, [audioContext, devices]);
 
   // Don't return a function until we're ready.
-  if (!audioContext || !audioBuffers) {
+  if (!audioContext || !audioBuffers || props.muted) {
     return null;
   }
   return {