Fixes calling start() on a remote track multiple times (#393)

* Prevent multiple redundant monitors from being started if start is called multiple times on a RemoteTrack #392

* Fix linter issue

* Changeset

* Switch to setInterval to make code more readable

* Run prettier

* Clear interval on stop

.changeset/nine-crabs-vanish.md

@@ -0,0 +1,5 @@
+---
+'livekit-client': patch
+---
+
+Prevent multiple redundant monitors from being started if start is called multiple times on a RemoteTrack

src/room/track/RemoteAudioTrack.ts

@@ -1,4 +1,4 @@
-import { AudioReceiverStats, computeBitrate, monitorFrequency } from '../stats';
+import { AudioReceiverStats, computeBitrate } from '../stats';
 import RemoteTrack from './RemoteTrack';
 import { Track } from './Track';
 
@@ -63,9 +63,6 @@ export default class RemoteAudioTrack extends RemoteTrack {
     }
 
     this.prevStats = stats;
-    setTimeout(() => {
-      this.monitorReceiver();
-    }, monitorFrequency);
   };
 
   protected async getReceiverStats(): Promise<AudioReceiverStats | undefined> {

src/room/track/RemoteTrack.ts

@@ -6,6 +6,8 @@ export default abstract class RemoteTrack extends Track {
   /** @internal */
   receiver?: RTCRtpReceiver;
 
+  monitorInterval?: ReturnType<typeof setInterval>;
+
   constructor(
     mediaTrack: MediaStreamTrack,
     sid: string,
@@ -46,15 +48,23 @@ export default abstract class RemoteTrack extends Track {
   }
 
   stop() {
+    this.stopMonitor();
     // use `enabled` of track to enable re-use of transceiver
     super.disable();
   }
 
   /* @internal */
   startMonitor() {
-    setTimeout(() => {
-      this.monitorReceiver();
-    }, monitorFrequency);
+    if (!this.monitorInterval) {
+      this.monitorInterval = setInterval(() => this.monitorReceiver(), monitorFrequency);
+    }
+  }
+
+  /* @internal */
+  stopMonitor() {
+    if (this.monitorInterval) {
+      clearInterval(this.monitorInterval);
+    }
   }
 
   protected abstract monitorReceiver(): void;

src/room/track/RemoteVideoTrack.ts

@@ -1,7 +1,7 @@
 import { debounce } from 'ts-debounce';
 import log from '../../logger';
 import { TrackEvent } from '../events';
-import { computeBitrate, monitorFrequency, VideoReceiverStats } from '../stats';
+import { computeBitrate, VideoReceiverStats } from '../stats';
 import { getIntersectionObserver, getResizeObserver, ObservableMediaElement } from '../utils';
 import RemoteTrack from './RemoteTrack';
 import { attachToElement, detachTrack, Track } from './Track';
@@ -160,9 +160,6 @@ export default class RemoteVideoTrack extends RemoteTrack {
     }
 
     this.prevStats = stats;
-    setTimeout(() => {
-      this.monitorReceiver();
-    }, monitorFrequency);
   };
 
   private async getReceiverStats(): Promise<VideoReceiverStats | undefined> {