Hangup when last person in call (based on url params)

src/UrlParams.ts

@@ -210,6 +210,12 @@ export interface UrlConfiguration {
    * Whether and what type of notification EC should send, when the user joins the call.
    */
   sendNotificationType?: RTCNotificationType;
+  /**
+   * Whether the app should automatically leave the call when there
+   * is no one left in the call.
+   * This is one part to make the call matrixRTC session behave like a telephone call.
+   */
+  autoLeaveWhenOthersLeft: boolean;
 }
 
 // If you need to add a new flag to this interface, prefer a name that describes
@@ -277,10 +283,16 @@ class ParamParser {
     ];
   }
 
+  /**
+   * Returns true if the flag exists and is not "false".
+   */
   public getFlagParam(name: string, defaultValue = false): boolean {
     const param = this.getParam(name);
     return param === null ? defaultValue : param !== "false";
   }
+  /**
+   * Returns the value of the flag if it exists, or undefined if it does not.
+   */
   public getFlag(name: string): boolean | undefined {
     const param = this.getParam(name);
     return param !== null ? param !== "false" : undefined;
@@ -334,6 +346,7 @@ export const getUrlParams = (
     skipLobby: true,
     returnToLobby: false,
     sendNotificationType: "notification" as RTCNotificationType,
+    autoLeaveWhenOthersLeft: false,
   };
   switch (intent) {
     case UserIntent.StartNewCall:
@@ -352,14 +365,14 @@ export const getUrlParams = (
       intentPreset = {
         ...inAppDefault,
         skipLobby: true,
-        // autoLeaveWhenOthersLeft: true, // TODO: add this once available
+        autoLeaveWhenOthersLeft: true,
       };
       break;
     case UserIntent.JoinExistingCallDM:
       intentPreset = {
         ...inAppDefault,
         skipLobby: true,
-        // autoLeaveWhenOthersLeft: true, // TODO: add this once available
+        autoLeaveWhenOthersLeft: true,
       };
       break;
     // Non widget usecase defaults
@@ -377,6 +390,7 @@ export const getUrlParams = (
         skipLobby: false,
         returnToLobby: false,
         sendNotificationType: undefined,
+        autoLeaveWhenOthersLeft: false,
       };
   }
 
@@ -428,12 +442,13 @@ export const getUrlParams = (
       "ring",
       "notification",
     ]),
+    autoLeaveWhenOthersLeft: parser.getFlag("autoLeave"),
   };
 
   return {
     ...properties,
     ...intentPreset,
-    ...pickBy(configuration, (v) => v !== undefined),
+    ...pickBy(configuration, (v?: unknown) => v !== undefined),
   };
 };
 

src/room/CallEventAudioRenderer.tsx

@@ -60,7 +60,7 @@ export function CallEventAudioRenderer({
   const audioEngineRef = useLatest(audioEngineCtx);
 
   useEffect(() => {
-    const joinSub = vm.memberChanges$
+    const joinSub = vm.participantChanges$
       .pipe(
         filter(
           ({ joined, ids }) =>
@@ -72,7 +72,7 @@ export function CallEventAudioRenderer({
         void audioEngineRef.current?.playSound("join");
       });
 
-    const leftSub = vm.memberChanges$
+    const leftSub = vm.participantChanges$
       .pipe(
         filter(
           ({ ids, left }) =>

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,7 @@ 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 } from "observable-hooks";
+import { useObservable, useSubscription } from "observable-hooks";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { RoomAndToDeviceEvents } from "matrix-js-sdk/lib/matrixrtc/RoomAndToDeviceKeyTransport";
 import {
@@ -140,11 +140,11 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
 
   useEffect(() => {
     logger.info(
-      `[Lifecycle] InCallView Component mounted, livekitroom state ${livekitRoom?.state}`,
+      `[Lifecycle] InCallView Component mounted, livekit room state ${livekitRoom?.state}`,
     );
     return (): void => {
       logger.info(
-        `[Lifecycle] InCallView Component unmounted, livekitroom state ${livekitRoom?.state}`,
+        `[Lifecycle] InCallView Component unmounted, livekit room state ${livekitRoom?.state}`,
       );
       livekitRoom
         ?.disconnect()
@@ -159,14 +159,19 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
     };
   }, [livekitRoom]);
 
+  const { autoLeaveWhenOthersLeft } = 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,
+        },
         connStateObservable$,
         reactionsReader.raisedHands$,
         reactionsReader.reactions$,
@@ -183,6 +188,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
     mediaDevices,
     props.e2eeSystem,
     connStateObservable$,
+    autoLeaveWhenOthersLeft,
   ]);
 
   if (livekitRoom === undefined || vm === null) return null;
@@ -313,6 +319,7 @@ export const InCallView: FC<InCallViewProps> = ({
   const earpieceMode = useBehavior(vm.earpieceMode$);
   const audioOutputSwitcher = useBehavior(vm.audioOutputSwitcher$);
   const switchCamera = useSwitchCamera(vm.localVideo$);
+  useSubscription(vm.autoLeaveWhenOthersLeft$, onLeave);
 
   // Ideally we could detect taps by listening for click events and checking
   // that the pointerType of the event is "touch", but this isn't yet supported