Ensure RemoteVideoTracks without any attached elements are stopped by… (#1625)

Author: lukasIO

.changeset/orange-bottles-warn.md

@@ -0,0 +1,5 @@
+---
+"livekit-client": patch
+---
+
+Ensure RemoteVideoTracks without any attached elements are stopped by adaptiveStream

src/room/Room.ts

@@ -1661,8 +1661,8 @@ class Room extends (EventEmitter as new () => TypedEmitter<RoomEventCallbacks>)
         return;
       }
       const newStreamState = Track.streamStateFromProto(streamState.state);
+      pub.track.setStreamState(newStreamState);
       if (newStreamState !== pub.track.streamState) {
-        pub.track.streamState = newStreamState;
         participant.emit(ParticipantEvent.TrackStreamStateChanged, pub, pub.track.streamState);
         this.emitWhenConnected(
           RoomEvent.TrackStreamStateChanged,

src/room/track/RemoteVideoTrack.ts

@@ -38,6 +38,16 @@ export default class RemoteVideoTrack extends RemoteTrack<Track.Kind.Video> {
     return this.adaptiveStreamSettings !== undefined;
   }
 
+  override setStreamState(value: Track.StreamState) {
+    super.setStreamState(value);
+    console.log('setStreamState', value);
+    if (value === Track.StreamState.Active) {
+      // update visibility for adaptive stream tracks when stream state received from server is active
+      // this is needed to ensure the track is stopped when there's no element attached to it at all
+      this.updateVisibility();
+    }
+  }
+
   /**
    * Note: When using adaptiveStream, you need to use remoteVideoTrack.attach() to add the track to a HTMLVideoElement, otherwise your video tracks might never start
    */
@@ -220,7 +230,7 @@ export default class RemoteVideoTrack extends RemoteTrack<Track.Kind.Video> {
     this.updateDimensions();
   }, REACTION_DELAY);
 
-  private updateVisibility() {
+  private updateVisibility(forceEmit?: boolean) {
     const lastVisibilityChange = this.elementInfos.reduce(
       (prev, info) => Math.max(prev, info.visibilityChangedAt || 0),
       0,
@@ -234,7 +244,7 @@ export default class RemoteVideoTrack extends RemoteTrack<Track.Kind.Video> {
     const isVisible =
       (this.elementInfos.some((info) => info.visible) && !backgroundPause) || isPiPMode;
 
-    if (this.lastVisible === isVisible) {
+    if (this.lastVisible === isVisible && !forceEmit) {
       return;
     }
 

src/room/track/Track.ts

@@ -37,6 +37,8 @@ export abstract class Track<
 
   source: Track.Source;
 
+  private _streamState: Track.StreamState = Track.StreamState.Active;
+
   /**
    * sid is set after track is published to server, or if it's a remote track
    */
@@ -51,7 +53,14 @@ export abstract class Track<
    * indicates current state of stream, it'll indicate `paused` if the track
    * has been paused by congestion controller
    */
-  streamState: Track.StreamState = Track.StreamState.Active;
+  get streamState(): Track.StreamState {
+    return this._streamState;
+  }
+
+  /** @internal */
+  setStreamState(value: Track.StreamState) {
+    this._streamState = value;
+  }
 
   /** @internal */
   rtpTimestamp: number | undefined;