Merge branch 'toger5/delayed-event-delegation' into toger5/userMedia-alternative

src/state/CallViewModel/CallViewModel.ts

@@ -738,17 +738,17 @@ export function createCallViewModel$(
           for (const matrixLivekitMember of allMatrixLivekitMembers) {
             const { userId, participant, connection$, membership$ } =
               matrixLivekitMember;
-            const memb = membership$.value;
+            const rtcId = membership$.value.rtcBackendIdentity; // rtcBackendIdentity
             const mediaId = computeMediaId(matrixLivekitMember);
             for (let dup = 0; dup < 1 + duplicateTiles; dup++) {
               yield {
-                keys: [dup, mediaId, userId, participant, connection$, memb],
+                keys: [dup, mediaId, userId, participant, connection$, rtcId],
                 data: undefined,
               };
             }
           }
         },
-        (scope, _, dup, mediaId, userId, participant, connection$, memb) => {
+        (scope, _, dup, mediaId, userId, participant, connection$, rtcId) => {
           const livekitRoom$ = scope.behavior(
             connection$.pipe(map((c) => c?.livekitRoom)),
           );
@@ -765,7 +765,7 @@ export function createCallViewModel$(
             scope,
             `${mediaId}:${dup}`,
             userId,
-            memb,
+            rtcId,
             participant,
             options.encryptionSystem,
             livekitRoom$,

src/state/MediaViewModel.ts

@@ -44,7 +44,6 @@ import {
   throttleTime,
   distinctUntilChanged,
 } from "rxjs";
-import { type CallMembership } from "matrix-js-sdk/lib/matrixrtc";
 
 import { alwaysShowSelf } from "../settings/settings";
 import { showConnectionStats } from "../settings/settings";
@@ -258,7 +257,7 @@ abstract class BaseMediaViewModel {
      * The Matrix user to which this media belongs.
      */
     public readonly userId: string,
-    public readonly rtcMembership: CallMembership,
+    public readonly rtcBackendIdentity: string,
     // We don't necessarily have a participant if a user connects via MatrixRTC but not (yet) through
     // livekit.
     protected readonly participant$: Observable<
@@ -404,13 +403,11 @@ abstract class BaseUserMediaViewModel extends BaseMediaViewModel {
    */
   public readonly cropVideo$: Behavior<boolean> = this._cropVideo$;
 
-  public readonly rtcBackendIdentity = this.rtcMembership.rtcBackendIdentity;
-
   public constructor(
     scope: ObservableScope,
     id: string,
     userId: string,
-    rtcMembership: CallMembership,
+    rtcBackendIdentity: string,
     participant$: Observable<LocalParticipant | RemoteParticipant | null>,
     encryptionSystem: EncryptionSystem,
     livekitRoom$: Behavior<LivekitRoom | undefined>,
@@ -424,7 +421,7 @@ abstract class BaseUserMediaViewModel extends BaseMediaViewModel {
       scope,
       id,
       userId,
-      rtcMembership,
+      rtcBackendIdentity,
       participant$,
       encryptionSystem,
       Track.Source.Microphone,
@@ -550,7 +547,7 @@ export class LocalUserMediaViewModel extends BaseUserMediaViewModel {
     scope: ObservableScope,
     id: string,
     userId: string,
-    rtcMembership: CallMembership,
+    rtcBackendIdentity: string,
     participant$: Behavior<LocalParticipant | null>,
     encryptionSystem: EncryptionSystem,
     livekitRoom$: Behavior<LivekitRoom | undefined>,
@@ -565,7 +562,7 @@ export class LocalUserMediaViewModel extends BaseUserMediaViewModel {
       scope,
       id,
       userId,
-      rtcMembership,
+      rtcBackendIdentity,
       participant$,
       encryptionSystem,
       livekitRoom$,
@@ -679,7 +676,7 @@ export class RemoteUserMediaViewModel extends BaseUserMediaViewModel {
     scope: ObservableScope,
     id: string,
     userId: string,
-    rtcMembership: CallMembership,
+    rtcBackendIdentity: string,
     participant$: Observable<RemoteParticipant | null>,
     encryptionSystem: EncryptionSystem,
     livekitRoom$: Behavior<LivekitRoom | undefined>,
@@ -694,7 +691,7 @@ export class RemoteUserMediaViewModel extends BaseUserMediaViewModel {
       scope,
       id,
       userId,
-      rtcMembership,
+      rtcBackendIdentity,
       participant$,
       encryptionSystem,
       livekitRoom$,
@@ -782,7 +779,7 @@ export class ScreenShareViewModel extends BaseMediaViewModel {
     scope: ObservableScope,
     id: string,
     userId: string,
-    rtcMembership: CallMembership,
+    rtcBackendIdentity: string,
     participant$: Observable<LocalParticipant | RemoteParticipant>,
     encryptionSystem: EncryptionSystem,
     livekitRoom$: Behavior<LivekitRoom | undefined>,
@@ -796,7 +793,7 @@ export class ScreenShareViewModel extends BaseMediaViewModel {
       scope,
       id,
       userId,
-      rtcMembership,
+      rtcBackendIdentity,
       participant$,
       encryptionSystem,
       Track.Source.ScreenShareAudio,

src/state/ScreenShare.ts

@@ -10,7 +10,6 @@ import {
   type RemoteParticipant,
   type Room as LivekitRoom,
 } from "livekit-client";
-import { type CallMembership } from "matrix-js-sdk/lib/matrixrtc/CallMembership";
 
 import { type ObservableScope } from "./ObservableScope.ts";
 import { ScreenShareViewModel } from "./MediaViewModel.ts";
@@ -29,7 +28,7 @@ export class ScreenShare {
     private readonly scope: ObservableScope,
     id: string,
     userId: string,
-    rtcMember: CallMembership,
+    rtcBackendIdentity: string,
     participant: LocalParticipant | RemoteParticipant,
     encryptionSystem: EncryptionSystem,
     livekitRoom$: Behavior<LivekitRoom | undefined>,
@@ -42,7 +41,7 @@ export class ScreenShare {
       this.scope,
       id,
       userId,
-      rtcMember,
+      rtcBackendIdentity,
       of(participant),
       encryptionSystem,
       livekitRoom$,

src/state/UserMedia.ts

@@ -13,7 +13,6 @@ import {
   type Room as LivekitRoom,
 } from "livekit-client";
 import { observeParticipantEvents } from "@livekit/components-core";
-import { type CallMembership } from "matrix-js-sdk/lib/matrixrtc/CallMembership";
 
 import { type ObservableScope } from "./ObservableScope.ts";
 import {
@@ -76,7 +75,7 @@ export class UserMedia {
           this.scope,
           this.id,
           this.userId,
-          this.rtcMembership,
+          this.rtcBackendIdentity,
           this.participant.value$,
           this.encryptionSystem,
           this.livekitRoom$,
@@ -91,7 +90,7 @@ export class UserMedia {
           this.scope,
           this.id,
           this.userId,
-          this.rtcMembership,
+          this.rtcBackendIdentity,
           this.participant.value$,
           this.encryptionSystem,
           this.livekitRoom$,
@@ -143,7 +142,7 @@ export class UserMedia {
                     scope,
                     `${this.id}:${key}`,
                     this.userId,
-                    this.rtcMembership,
+                    this.rtcBackendIdentity,
                     p,
                     this.encryptionSystem,
                     this.livekitRoom$,
@@ -195,8 +194,7 @@ export class UserMedia {
     private readonly scope: ObservableScope,
     public readonly id: string,
     private readonly userId: string,
-    // TODO evaluate if this should just be the rtcBackendIdentity
-    private readonly rtcMembership: CallMembership,
+    private readonly rtcBackendIdentity: string,
     private readonly participant: TaggedParticipant,
     private readonly encryptionSystem: EncryptionSystem,
     private readonly livekitRoom$: Behavior<LivekitRoom | undefined>,

src/tile/MediaView.tsx

@@ -18,7 +18,11 @@ import styles from "./MediaView.module.css";
 import { Avatar } from "../Avatar";
 import { type EncryptionStatus } from "../state/MediaViewModel";
 import { RaisedHandIndicator } from "../reactions/RaisedHandIndicator";
-import { showHandRaisedTimer, useSetting } from "../settings/settings";
+import {
+  showConnectionStats,
+  showHandRaisedTimer,
+  useSetting,
+} from "../settings/settings";
 import { type ReactionOption } from "../reactions";
 import { ReactionIndicator } from "../reactions/ReactionIndicator";
 import { RTCConnectionStats } from "../RTCConnectionStats";
@@ -81,6 +85,7 @@ export const MediaView: FC<Props> = ({
 }) => {
   const { t } = useTranslation();
   const [handRaiseTimerVisible] = useSetting(showHandRaisedTimer);
+  const [showConnectioStats] = useSetting(showConnectionStats);
 
   const avatarSize = Math.round(Math.min(targetWidth, targetHeight) / 2);
 
@@ -134,6 +139,7 @@ export const MediaView: FC<Props> = ({
         {waitingForMedia && (
           <div className={styles.status}>
             {t("video_tile.waiting_for_media")}
+            {showConnectioStats ? " " + rtcBackendIdentity : ""}
           </div>
         )}
         {(audioStreamStats || videoStreamStats) && (

src/utils/test.ts

@@ -334,7 +334,7 @@ export function createLocalMedia(
     testScope(),
     "local",
     member.userId,
-    rtcMember,
+    rtcMember.rtcBackendIdentity,
     constant(localParticipant),
     {
       kind: E2eeType.PER_PARTICIPANT,
@@ -380,7 +380,7 @@ export function createRemoteMedia(
     testScope(),
     "remote",
     member.userId,
-    rtcMember,
+    rtcMember.rtcBackendIdentity,
     constant(participant),
     {
       kind: E2eeType.PER_PARTICIPANT,

yarn.lock

@@ -11335,7 +11335,7 @@ __metadata:
 
 "matrix-js-sdk@matrix-org/matrix-js-sdk#develop":
   version: 39.4.0
-  resolution: "matrix-js-sdk@https://github.com/matrix-org/matrix-js-sdk.git#commit=841b654c00c2a47dbd4380b4b2a6fa25156c8af0"
+  resolution: "matrix-js-sdk@https://github.com/matrix-org/matrix-js-sdk.git#commit=4d0d32307eb4f1ce1fb65080fcca704f5bdedc31"
   dependencies:
     "@babel/runtime": "npm:^7.12.5"
     "@matrix-org/matrix-sdk-crypto-wasm": "npm:^17.0.0"
@@ -11351,7 +11351,7 @@ __metadata:
     sdp-transform: "npm:^3.0.0"
     unhomoglyph: "npm:^1.0.6"
     uuid: "npm:13"
-  checksum: 10c0/532d4adb2ce95a27b4715be518d648740efddc5c88d399e127d95ff962bddd8f62f848a0ea98088672fab03b67a973d63935cd3b5ed371bb9da3131ac9472db6
+  checksum: 10c0/59c9d81ccf823584dc783502cb5c928562e3490c63f5ce98ee3232a603545d6278e90dc951c1fd0bae2792ba732ec5171e03596fd396bb2150d596cebb7fbac9
   languageName: node
   linkType: hard