make it run

src/state/CallViewModel/remoteMembers/Connection.ts

@@ -18,7 +18,7 @@ import {
   RoomEvent,
 } from "livekit-client";
 import { type LivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
-import { BehaviorSubject, type Observable } from "rxjs";
+import { BehaviorSubject, map, type Observable } from "rxjs";
 import { type Logger } from "matrix-js-sdk/lib/logger";
 
 import {
@@ -184,7 +184,7 @@ export class Connection {
    * It filters the participants to only those that are associated with a membership that claims to publish on this connection.
    */
 
-  public readonly participantsWithTrack$: Behavior<PublishingParticipant[]>;
+  public readonly participants$: Behavior<PublishingParticipant[]>;
 
   /**
    * The media transport to connect to.
@@ -211,13 +211,19 @@ export class Connection {
     this.transport = transport;
     this.client = client;
 
-    this.participantsWithTrack$ = scope.behavior(
+    this.participants$ = scope.behavior(
+      // only tracks remote participants
       connectedParticipantsObserver(this.livekitRoom, {
         additionalRoomEvents: [
           RoomEvent.TrackPublished,
           RoomEvent.TrackUnpublished,
         ],
-      }),
+      }).pipe(
+        map((participants) => [
+          this.livekitRoom.localParticipant,
+          ...participants,
+        ]),
+      ),
       [],
     );
 

src/state/CallViewModel/remoteMembers/ConnectionManager.ts

@@ -181,7 +181,7 @@ export function createConnectionManager$({
         // Map the connections to list of {connection, participants}[]
         const listOfConnectionsWithPublishingParticipants =
           connections.value.map((connection) => {
-            return connection.participantsWithTrack$.pipe(
+            return connection.participants$.pipe(
               map((participants) => ({
                 connection,
                 participants,

src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.ts

@@ -105,6 +105,9 @@ export function createMatrixLivekitMembers$({
           new Epoch([membershipsWithTransports, managerData] as const, epoch),
       ),
       generateItemsWithEpoch(
+        // Generator function.
+        // creates an array of `{key, data}[]`
+        // Each change in the keys (new key, missing key) will result in a call to the factory function.
         function* ([membershipsWithTransports, managerData]) {
           for (const { membership, transport } of membershipsWithTransports) {
             // TODO! cannot use membership.membershipID yet, Currently its hardcoded by the jwt service to
@@ -125,8 +128,11 @@ export function createMatrixLivekitMembers$({
             };
           }
         },
+        // Each update where the key of the generator array do not change will result in updates to the `data$` observable in the factory.
         (scope, data$, participantId, userId) => {
           const member = matrixRoom.getMember(userId);
+          // will only get called once per `participantId, userId` pair.
+          // updates to data$ and as a result to displayName$ and mxcAvatarUrl$ are more frequent.
           return {
             participantId,
             userId,
@@ -134,11 +140,9 @@ export function createMatrixLivekitMembers$({
             displayName$: scope.behavior(
               displaynameMap$.pipe(
                 map((displayNames) => {
-                  const name = displayNames.get(userId);
-                  if (name === undefined) {
+                  const name = displayNames.get(userId) ?? "";
+                  if (name === "")
                     logger.warn(`No display name for user ${userId}`);
-                    return "";
-                  }
                   return name;
                 }),
               ),