Introduce configurable auto leave option

src/UrlParams.ts

@@ -71,6 +71,14 @@ export interface UrlParams {
    * is window.controls.onBackButtonPressed.
    */
   header: HeaderStyle;
+  /**
+   * If we want the app to automatically leave the call when all other participants
+   * leave the call.
+   *
+   * This is used in settings where EC should behave more like a phone call other than a conference.
+   * Like in a DM.
+   */
+  telephoneAutoLeave: boolean;
   /**
    * Whether the controls should be shown. For screen recording no controls can be desired.
    */
@@ -329,6 +337,7 @@ export const getUrlParams = (
     rageshakeSubmitUrl: parser.getParam("rageshakeSubmitUrl"),
     sentryDsn: parser.getParam("sentryDsn"),
     sentryEnvironment: parser.getParam("sentryEnvironment"),
+    telephoneAutoLeave: parser.getFlagParam("telephoneAutoLeave"),
   };
 };
 

src/room/GroupCallView.tsx

@@ -166,15 +166,18 @@ export const GroupCallView: FC<Props> = ({
   const { displayName, avatarUrl } = useProfile(client);
   const roomName = useRoomName(room);
   const roomAvatar = useRoomAvatar(room);
-  const { perParticipantE2EE, returnToLobby } = useUrlParams();
+  const {
+    perParticipantE2EE,
+    returnToLobby,
+    password: passwordFromUrl,
+  } = useUrlParams();
   const e2eeSystem = useRoomEncryptionSystem(room.roomId);
   const [useNewMembershipManager] = useSetting(useNewMembershipManagerSetting);
   const [useExperimentalToDeviceTransport] = useSetting(
     useExperimentalToDeviceTransportSetting,
   );
 
   // Save the password once we start the groupCallView
-  const { password: passwordFromUrl } = useUrlParams();
   useEffect(() => {
     if (passwordFromUrl) saveKeyForRoom(room.roomId, passwordFromUrl);
   }, [passwordFromUrl, room.roomId]);

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 {
@@ -158,14 +162,19 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
     };
   }, [livekitRoom]);
 
+  const { telephoneAutoLeave } = useUrlParams();
+
   useEffect(() => {
     if (livekitRoom !== undefined) {
       const reactionsReader = new ReactionsReader(props.rtcSession);
       const vm = new CallViewModel(
         props.rtcSession,
         livekitRoom,
         mediaDevices,
-        props.e2eeSystem,
+        {
+          encryptionSystem: props.e2eeSystem,
+          autoLeaveWhenOthersLeft: telephoneAutoLeave,
+        },
         connStateObservable$,
         reactionsReader.raisedHands$,
         reactionsReader.reactions$,
@@ -182,6 +191,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
     mediaDevices,
     props.e2eeSystem,
     connStateObservable$,
+    telephoneAutoLeave,
   ]);
 
   if (livekitRoom === undefined || vm === null) return null;
@@ -302,6 +312,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.test.ts

@@ -272,7 +272,7 @@ function withCallViewModel(
     liveKitRoom,
     mediaDevices,
     {
-      kind: E2eeType.PER_PARTICIPANT,
+      encryptionSystem: { kind: E2eeType.PER_PARTICIPANT },
     },
     connectionState$,
     raisedHands$,

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>

src/utils/test-viewmodel.ts

@@ -139,7 +139,7 @@ export function getBasicCallViewModelEnvironment(
     liveKitRoom,
     mockMediaDevices({}),
     {
-      kind: E2eeType.PER_PARTICIPANT,
+      encryptionSystem: { kind: E2eeType.PER_PARTICIPANT },
     },
     of(ConnectionState.Connected),
     handRaisedSubject$,