Introduce condigurable auto leave option

Author: toger5

src/room/InCallView.tsx

@@ -25,7 +25,11 @@ import useMeasure from "react-use-measure";
 import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 import classNames from "classnames";
 import { BehaviorSubject, map } from "rxjs";
-import { useObservable, useObservableEagerState } from "observable-hooks";
+import {
+  useObservable,
+  useObservableEagerState,
+  useSubscription,
+} from "observable-hooks";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { RoomAndToDeviceEvents } from "matrix-js-sdk/lib/matrixrtc/RoomAndToDeviceKeyTransport";
 import {
@@ -165,7 +169,10 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
         props.rtcSession,
         livekitRoom,
         mediaDevices,
-        props.e2eeSystem,
+        {
+          encryptionSystem: props.e2eeSystem,
+          autoLeaveWhenOthersLeft: undefined,
+        },
         connStateObservable$,
         reactionsReader.raisedHands$,
         reactionsReader.reactions$,
@@ -302,6 +309,8 @@ export const InCallView: FC<InCallViewProps> = ({
     () => void toggleRaisedHand(),
   );
 
+  useSubscription(vm.autoLeaveWhenOthersLeft$, onLeave);
+
   const windowMode = useObservableEagerState(vm.windowMode$);
   const layout = useObservableEagerState(vm.layout$);
   const tileStoreGeneration = useObservableEagerState(vm.tileStoreGeneration$);

src/state/CallViewModel.ts

@@ -95,6 +95,10 @@ import { shallowEquals } from "../utils/array";
 import { calculateDisplayName, shouldDisambiguate } from "../utils/displayname";
 import { type MediaDevices } from "./MediaDevices";
 
+interface CallViewModelOptions {
+  encryptionSystem: EncryptionSystem;
+  autoLeaveWhenOthersLeft?: boolean;
+}
 // How long we wait after a focus switch before showing the real participant
 // list again
 const POST_FOCUS_PARTICIPANT_UPDATE_DELAY_MS = 3000;
@@ -461,21 +465,27 @@ export class CallViewModel extends ViewModel {
       },
     );
 
-  /**
-   * Displaynames for each member of the call. This will disambiguate
-   * any displaynames that clashes with another member. Only members
-   * joined to the call are considered here.
-   */
-  public readonly memberDisplaynames$ = merge(
+  private readonly memberships$: Observable<CallMembership[]> = merge(
     // Handle call membership changes.
     fromEvent(this.matrixRTCSession, MatrixRTCSessionEvent.MembershipsChanged),
     // Handle room membership changes (and displayname updates)
     fromEvent(this.matrixRTCSession.room, RoomStateEvent.Members),
   ).pipe(
-    startWith(null),
+    startWith(this.matrixRTCSession.memberships),
     map(() => {
+      return this.matrixRTCSession.memberships;
+    }),
+  );
+
+  /**
+   * Displaynames for each member of the call. This will disambiguate
+   * any displaynames that clashes with another member. Only members
+   * joined to the call are considered here.
+   */
+  public readonly memberDisplaynames$ = this.memberships$.pipe(
+    map((memberships) => {
       const displaynameMap = new Map<string, string>();
-      const { room, memberships } = this.matrixRTCSession;
+      const { room } = this.matrixRTCSession;
 
       // We only consider RTC members for disambiguation as they are the only visible members.
       for (const rtcMember of memberships) {
@@ -577,7 +587,7 @@ export class CallViewModel extends ViewModel {
                       indexedMediaId,
                       member,
                       participant,
-                      this.encryptionSystem,
+                      this.options.encryptionSystem,
                       this.livekitRoom,
                       this.memberDisplaynames$.pipe(
                         map((m) => m.get(matrixIdentifier) ?? "[👻]"),
@@ -600,7 +610,7 @@ export class CallViewModel extends ViewModel {
                         screenShareId,
                         member,
                         participant,
-                        this.encryptionSystem,
+                        this.options.encryptionSystem,
                         this.livekitRoom,
                         this.memberDisplaynames$.pipe(
                           map((m) => m.get(matrixIdentifier) ?? "[👻]"),
@@ -641,7 +651,7 @@ export class CallViewModel extends ViewModel {
                             nonMemberId,
                             undefined,
                             participant,
-                            this.encryptionSystem,
+                            this.options.encryptionSystem,
                             this.livekitRoom,
                             this.memberDisplaynames$.pipe(
                               map((m) => m.get(participant.identity) ?? "[👻]"),
@@ -686,18 +696,29 @@ export class CallViewModel extends ViewModel {
     ),
   );
 
-  public readonly memberChanges$ = this.userMedia$
-    .pipe(map((mediaItems) => mediaItems.map((m) => m.id)))
-    .pipe(
-      scan<string[], { ids: string[]; joined: string[]; left: string[] }>(
-        (prev, ids) => {
-          const left = prev.ids.filter((id) => !ids.includes(id));
-          const joined = ids.filter((id) => !prev.ids.includes(id));
-          return { ids, joined, left };
-        },
-        { ids: [], joined: [], left: [] },
-      ),
-    );
+  public readonly memberChanges$ = this.userMedia$.pipe(
+    map((mediaItems) => mediaItems.map((m) => m.id)),
+    scan<string[], { ids: string[]; joined: string[]; left: string[] }>(
+      (prev, ids) => {
+        const left = prev.ids.filter((id) => !ids.includes(id));
+        const joined = ids.filter((id) => !prev.ids.includes(id));
+        return { ids, joined, left };
+      },
+      { ids: [], joined: [], left: [] },
+    ),
+  );
+
+  public readonly allOthersLeft$ = this.memberChanges$.pipe(
+    map(({ ids, left }) => ids.length === 0 && left.length > 0),
+    startWith(false),
+    distinctUntilChanged(),
+  );
+
+  public readonly autoLeaveWhenOthersLeft$ = this.allOthersLeft$.pipe(
+    distinctUntilChanged(),
+    filter((leave) => (leave && this.options.autoLeaveWhenOthersLeft) ?? false),
+    map(() => {}),
+  );
 
   /**
    * List of MediaItems that we want to display, that are of type ScreenShare
@@ -1383,7 +1404,7 @@ export class CallViewModel extends ViewModel {
     private readonly matrixRTCSession: MatrixRTCSession,
     private readonly livekitRoom: LivekitRoom,
     private readonly mediaDevices: MediaDevices,
-    private readonly encryptionSystem: EncryptionSystem,
+    private readonly options: CallViewModelOptions,
     private readonly connectionState$: Observable<ECConnectionState>,
     private readonly handsRaisedSubject$: Observable<
       Record<string, RaisedHandInfo>