From 47a2660fabe43c770cca8e56320fbb0d56491413 Mon Sep 17 00:00:00 2001
From: Jonas Schell <jonas@livekit.io>
Date: Thu, 28 Sep 2023 11:09:33 +0200
Subject: [PATCH] add isMuted props to RoomAudioRenderer and AudioTrack

---
 packages/react/src/components/RoomAudioRenderer.tsx   | 11 +++++++++--
 .../react/src/components/participant/AudioTrack.tsx   | 11 ++++++++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/RoomAudioRenderer.tsx b/packages/react/src/components/RoomAudioRenderer.tsx
index c3fa095f1..1f38304cb 100644
--- a/packages/react/src/components/RoomAudioRenderer.tsx
+++ b/packages/react/src/components/RoomAudioRenderer.tsx
@@ -8,6 +8,8 @@ import { AudioTrack } from './participant/AudioTrack';
 export interface RoomAudioRendererProps {
   /** Sets the volume for all audio tracks rendered by this component. By default, the range is between `0.0` and `1.0`. */
   volume?: number;
+  /** If set to true, mutes all audio tracks rendered by the component. */
+  isMuted?: boolean;
 }
 
 /**
@@ -22,7 +24,7 @@ export interface RoomAudioRendererProps {
  * ```
  * @public
  */
-export function RoomAudioRenderer({ volume }: RoomAudioRendererProps) {
+export function RoomAudioRenderer({ volume, isMuted }: RoomAudioRendererProps) {
   const tracks = useTracks(
     [Track.Source.Microphone, Track.Source.ScreenShareAudio, Track.Source.Unknown],
     {
@@ -40,7 +42,12 @@ export function RoomAudioRenderer({ volume }: RoomAudioRendererProps) {
   return (
     <div style={{ display: 'none' }}>
       {tracks.map((trackRef) => (
-        <AudioTrack key={getTrackReferenceId(trackRef)} trackRef={trackRef} volume={volume} />
+        <AudioTrack
+          key={getTrackReferenceId(trackRef)}
+          trackRef={trackRef}
+          volume={volume}
+          isMuted={isMuted}
+        />
       ))}
     </div>
   );
diff --git a/packages/react/src/components/participant/AudioTrack.tsx b/packages/react/src/components/participant/AudioTrack.tsx
index e5cdb4c7d..a6ecef10d 100644
--- a/packages/react/src/components/participant/AudioTrack.tsx
+++ b/packages/react/src/components/participant/AudioTrack.tsx
@@ -22,6 +22,14 @@ export interface AudioTrackProps<T extends HTMLMediaElement = HTMLMediaElement>
   onSubscriptionStatusChanged?: (subscribed: boolean) => void;
   /** Sets the volume of the audio track. By default, the range is between `0.0` and `1.0`. */
   volume?: number;
+  /**
+   * Mutes the audio track if set to `true`.
+   * @remarks
+   * Does not currently support the Web Audio API.
+   * A workaround is to set the volume to `0` instead.
+   * @alpha
+   */
+  isMuted?: boolean;
 }
 
 /**
@@ -42,6 +50,7 @@ export function AudioTrack({
   trackRef,
   onSubscriptionStatusChanged,
   volume,
+  isMuted,
   source,
   name,
   publication,
@@ -84,5 +93,5 @@ export function AudioTrack({
     }
   }, [volume, track]);
 
-  return <audio ref={mediaEl} {...elementProps} />;
+  return <audio ref={mediaEl} muted={isMuted} {...elementProps} />;
 }