fix: fix useMultibandTrackVolume and useTrackVolume infinite rerender (#216)

* fix: fix useMultibandTrackVolume and useTrackVolume infinitely rerendering

* chore: lint

Author: davidliu

example/yarn.lock

@@ -2163,12 +2163,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@livekit/protocol@npm:1.33.0":
-  version: 1.33.0
-  resolution: "@livekit/protocol@npm:1.33.0"
+"@livekit/protocol@npm:1.34.0":
+  version: 1.34.0
+  resolution: "@livekit/protocol@npm:1.34.0"
   dependencies:
     "@bufbuild/protobuf": ^1.10.0
-  checksum: 00609412a17326b1d6c145d137e4ca97448b1fc6b295ed0c1d9714b029cd5a004b96baa7ee7fb53fb5569180f7af63546299224c03f3ce9899d30e8d41a7a8b7
+  checksum: e08d0ceb20e5434b352e0c42f89d13f29edbf853a968924aea9792660d79edc13a535288d05a47da97843e1e3a66917adb79ee51b8652442d42123e5f75f649c
   languageName: node
   linkType: hard
 
@@ -6103,19 +6103,19 @@ __metadata:
   linkType: hard
 
 "livekit-client@npm:^2.9.0":
-  version: 2.9.2
-  resolution: "livekit-client@npm:2.9.2"
+  version: 2.9.8
+  resolution: "livekit-client@npm:2.9.8"
   dependencies:
     "@livekit/mutex": 1.1.1
-    "@livekit/protocol": 1.33.0
+    "@livekit/protocol": 1.34.0
     events: ^3.3.0
     loglevel: ^1.9.2
     sdp-transform: ^2.15.0
     ts-debounce: ^4.0.0
     tslib: 2.8.1
     typed-emitter: ^2.1.0
     webrtc-adapter: ^9.0.1
-  checksum: c12b33b99bfaa01ed14307a34190c273982c49781d16430fab6ca597ba4c6fa1ee49b2d73bfe2670e9779c60ec35bc93936324a0f9e12b236c5d53bb6b2374b6
+  checksum: cc01e43fbf5fa298c6696a3a084852d04cd818c554e9b3b9469ad22e85b8d29a975d96072d8432aff79651337f2950881c266117d0490c8ab94112dfda789ca4
   languageName: node
   linkType: hard
 

src/hooks/useMultibandTrackVolume.ts

@@ -49,7 +49,7 @@ export function useMultibandTrackVolume(
     | LocalAudioTrack
     | RemoteAudioTrack
     | TrackReferenceOrPlaceholder,
-  options: MultiBandTrackVolumeOptions = {}
+  options?: MultiBandTrackVolumeOptions
 ) {
   const track =
     trackOrTrackReference instanceof Track
@@ -59,39 +59,44 @@ export function useMultibandTrackVolume(
         );
   const opts = useMemo(() => {
     return { ...multibandDefaults, ...options };
-  }, [options]);
+
+    // disabled due to use of JSON.stringify, dependencies are reference equality
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(options)]);
   const mediaStreamTrack = track?.mediaStreamTrack;
+  const hasMediaStreamTrack = mediaStreamTrack != null;
+  const peerConnectionId = mediaStreamTrack?.peerConnectionId ?? -1;
+  const mediaStreamTrackId = mediaStreamTrack?.id;
 
   let [magnitudes, setMagnitudes] = useState<number[]>([]);
   useEffect(() => {
     let listener = Object();
     let reactTag: string | null = null;
-    if (mediaStreamTrack) {
+    if (hasMediaStreamTrack) {
       reactTag = LiveKitModule.createMultibandVolumeProcessor(
         opts,
-        mediaStreamTrack._peerConnectionId ?? -1,
-        mediaStreamTrack.id
+        peerConnectionId,
+        mediaStreamTrackId
       );
       addListener(listener, 'LK_MULTIBAND_PROCESSED', (event: any) => {
         if (event.magnitudes && reactTag && event.id === reactTag) {
-          console.log('event received: ', event.magnitudes[0]);
           setMagnitudes(event.magnitudes);
         }
       });
     }
     return () => {
-      if (mediaStreamTrack) {
+      if (hasMediaStreamTrack) {
         removeListener(listener);
         if (reactTag) {
           LiveKitModule.deleteMultibandVolumeProcessor(
             reactTag,
-            mediaStreamTrack._peerConnectionId ?? -1,
-            mediaStreamTrack.id
+            peerConnectionId,
+            mediaStreamTrackId
           );
         }
       }
     };
-  }, [mediaStreamTrack, opts]);
+  }, [hasMediaStreamTrack, peerConnectionId, mediaStreamTrackId, opts]);
 
   return magnitudes;
 }

src/hooks/useTrackVolume.ts

@@ -28,15 +28,18 @@ export function useTrackVolume(
         );
 
   const mediaStreamTrack = track?.mediaStreamTrack;
+  const hasMediaStreamTrack = mediaStreamTrack != null;
+  const peerConnectionId = mediaStreamTrack.peerConnectionId ?? -1;
+  const mediaStreamTrackId = mediaStreamTrack.id;
 
   let [volume, setVolume] = useState(0.0);
   useEffect(() => {
     let listener = Object();
     let reactTag: string | null = null;
-    if (mediaStreamTrack) {
+    if (hasMediaStreamTrack) {
       reactTag = LiveKitModule.createVolumeProcessor(
-        mediaStreamTrack._peerConnectionId ?? -1,
-        mediaStreamTrack.id
+        peerConnectionId,
+        mediaStreamTrackId
       );
       addListener(listener, 'LK_VOLUME_PROCESSED', (event: any) => {
         if (event.volume && reactTag && event.id === reactTag) {
@@ -45,18 +48,18 @@ export function useTrackVolume(
       });
     }
     return () => {
-      if (mediaStreamTrack) {
+      if (hasMediaStreamTrack) {
         removeListener(listener);
         if (reactTag) {
           LiveKitModule.deleteVolumeProcessor(
             reactTag,
-            mediaStreamTrack._peerConnectionId ?? -1,
-            mediaStreamTrack.id
+            peerConnectionId,
+            mediaStreamTrackId
           );
         }
       }
     };
-  }, [mediaStreamTrack]);
+  }, [hasMediaStreamTrack, peerConnectionId, mediaStreamTrackId]);
 
   return volume;
 }