Register engine events on localParticipant when updated (#480)

* Register engine events on localParticipant when updated

* changeset

* add comment

* remove debug code

* remove log

* remove log

* rename createEngine, make codepath easier to follow

* set connection state as early as possible

Author: lukasIO

.changeset/few-dolls-reflect.md

@@ -0,0 +1,5 @@
+---
+'livekit-client': patch
+---
+
+Register engine events on localParticipant when updated

src/room/Room.ts

@@ -140,12 +140,12 @@ class Room extends (EventEmitter as new () => TypedEmitter<RoomEventCallbacks>)
       ...options?.publishDefaults,
     };
 
-    this.createEngine();
+    this.maybeCreateEngine();
 
     this.localParticipant = new LocalParticipant('', '', this.engine, this.options);
   }
 
-  private createEngine() {
+  private maybeCreateEngine() {
     if (this.engine) {
       return;
     }
@@ -190,7 +190,7 @@ class Room extends (EventEmitter as new () => TypedEmitter<RoomEventCallbacks>)
       .on(EngineEvent.Restarted, this.handleRestarted);
 
     if (this.localParticipant) {
-      this.localParticipant.engine = this.engine;
+      this.localParticipant.setupEngine(this.engine);
     }
   }
 
@@ -231,17 +231,22 @@ class Room extends (EventEmitter as new () => TypedEmitter<RoomEventCallbacks>)
     if (this.connectFuture) {
       return this.connectFuture.promise;
     }
-    if (this.state === ConnectionState.Reconnecting) {
-      log.info('Reconnection attempt replaced by new connection attempt');
-    }
+
+    this.setAndEmitConnectionState(ConnectionState.Connecting);
+
     const connectFn = async (resolve: () => void, reject: (reason: any) => void) => {
-      this.setAndEmitConnectionState(ConnectionState.Connecting);
       if (!this.abortController || this.abortController.signal.aborted) {
         this.abortController = new AbortController();
       }
 
-      // recreate engine if previously disconnected
-      this.recreateEngine();
+      if (this.state === ConnectionState.Reconnecting) {
+        log.info('Reconnection attempt replaced by new connection attempt');
+        // make sure we close and recreate the existing engine in order to get rid of any potentially ongoing reconnection attempts
+        this.recreateEngine();
+      } else {
+        // create engine if previously disconnected
+        this.maybeCreateEngine();
+      }
 
       this.acquireAudioContext();
 
@@ -599,8 +604,7 @@ class Room extends (EventEmitter as new () => TypedEmitter<RoomEventCallbacks>)
     // clear out existing remote participants, since they may have attached
     // the old engine
     this.participants.clear();
-
-    this.createEngine();
+    this.maybeCreateEngine();
   }
 
   private onTrackAdded(

src/room/participant/LocalParticipant.ts

@@ -76,27 +76,7 @@ export default class LocalParticipant extends Participant {
     this.tracks = new Map();
     this.engine = engine;
     this.roomOptions = options;
-
-    this.engine.client.onRemoteMuteChanged = (trackSid: string, muted: boolean) => {
-      const pub = this.tracks.get(trackSid);
-      if (!pub || !pub.track) {
-        return;
-      }
-      if (muted) {
-        pub.mute();
-      } else {
-        pub.unmute();
-      }
-    };
-
-    this.engine.client.onSubscribedQualityUpdate = this.handleSubscribedQualityUpdate;
-
-    this.engine.client.onLocalTrackUnpublished = this.handleLocalTrackUnpublished;
-
-    this.engine
-      .on(EngineEvent.Connected, this.updateTrackSubscriptionPermissions)
-      .on(EngineEvent.Restarted, this.updateTrackSubscriptionPermissions)
-      .on(EngineEvent.Resumed, this.updateTrackSubscriptionPermissions);
+    this.setupEngine(engine);
   }
 
   get lastCameraError(): Error | undefined {
@@ -121,6 +101,33 @@ export default class LocalParticipant extends Participant {
     }
   }
 
+  /**
+   * @internal
+   */
+  setupEngine(engine: RTCEngine) {
+    this.engine = engine;
+    this.engine.client.onRemoteMuteChanged = (trackSid: string, muted: boolean) => {
+      const pub = this.tracks.get(trackSid);
+      if (!pub || !pub.track) {
+        return;
+      }
+      if (muted) {
+        pub.mute();
+      } else {
+        pub.unmute();
+      }
+    };
+
+    this.engine.client.onSubscribedQualityUpdate = this.handleSubscribedQualityUpdate;
+
+    this.engine.client.onLocalTrackUnpublished = this.handleLocalTrackUnpublished;
+
+    this.engine
+      .on(EngineEvent.Connected, this.updateTrackSubscriptionPermissions)
+      .on(EngineEvent.Restarted, this.updateTrackSubscriptionPermissions)
+      .on(EngineEvent.Resumed, this.updateTrackSubscriptionPermissions);
+  }
+
   /**
    * Enable or disable a participant's camera track.
    *