Fix duplicated incoming audio when using AudioTrack renderer and its …

…muted property (#855)
livekit · May 2, 2024 · 99158d5 · 99158d5
1 parent fd776c3
commit 99158d5
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/.changeset/olive-zebras-shop.md b/.changeset/olive-zebras-shop.md
@@ -0,0 +1,5 @@
+---
+"@livekit/components-react": patch
+---
+
+Fix duplicated incoming audio when using AudioTrack renderer and its muted property
diff --git a/packages/react/src/components/participant/AudioTrack.tsx b/packages/react/src/components/participant/AudioTrack.tsx
@@ -38,7 +38,7 @@ export interface AudioTrackProps extends React.AudioHTMLAttributes<HTMLAudioElem
  */
 export const AudioTrack = /* @__PURE__ */ React.forwardRef<HTMLAudioElement, AudioTrackProps>(
   function AudioTrack(
-    { trackRef, onSubscriptionStatusChanged, volume, ...props }: AudioTrackProps,
+    { trackRef, onSubscriptionStatusChanged, volume, muted, ...props }: AudioTrackProps,
     ref,
   ) {
     const trackReference = useEnsureTrackRef(trackRef);
@@ -72,15 +72,15 @@ export const AudioTrack = /* @__PURE__ */ React.forwardRef<HTMLAudioElement, Aud
     }, [volume, track]);
 
     React.useEffect(() => {
-      if (pub === undefined || props.muted === undefined) {
+      if (pub === undefined || muted === undefined) {
         return;
       }
       if (pub instanceof RemoteTrackPublication) {
-        pub.setEnabled(!props.muted);
+        pub.setEnabled(!muted);
       } else {
         log.warn('Can only call setEnabled on remote track publications.');
       }
-    }, [props.muted, pub, track]);
+    }, [muted, pub, track]);
 
     return <audio ref={mediaEl} {...elementProps} />;
   },