Combine preferStickyEvents with useMultiSFU and add a url parameter

docs/url-params.md

@@ -72,6 +72,7 @@ These parameters are relevant to both [widget](./embedded-standalone.md) and [st
 | `sendNotificationType`                                  | `ring` or `notification`                                                                             | No                                                                                                | No                           | Will send a "ring" or "notification" `m.rtc.notification` event if the user is the first one in the call.                                                                                                                                                                                                                                                                                           |
 | `autoLeaveWhenOthersLeft`                               | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Whether the app should automatically leave the call when there is no one left in the call.                                                                                                                                                                                                                                                                                                          |
 | `waitForCallPickup`                                     | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | When sending a notification, show UI that the app is awaiting an answer, play a dial tone, and (in widget mode) auto-close the widget once the notification expires.                                                                                                                                                                                                                                |
+| `multiSFU`                                              | `true` or `false`                                                                                    | No, defaults to `false`                                                                           | No, defaults to `false`      | Enables experimental new multiSFU support.                                                                                                                                                                                                                                                                                                                                                          |
 
 ### Widget-only parameters
 

locales/en/app.json

@@ -72,12 +72,11 @@
     "livekit_server_info": "LiveKit Server Info",
     "livekit_sfu": "LiveKit SFU: {{url}}",
     "matrix_id": "Matrix ID: {{id}}",
-    "multi_sfu": "Multi-SFU media transport",
-    "mute_all_audio": "Mute all audio (participants, reactions, join sounds)",
-    "prefer_sticky_events": {
-      "description": "Improves reliability of calls (requires homeserver support)",
-      "label": "Prefer sticky events"
+    "multi_sfu": {
+      "description": "Allows multiple SFUs to be present in a call (requires homeserver support)",
+      "label": "Multi-SFU media transport"
     },
+    "mute_all_audio": "Mute all audio (participants, reactions, join sounds)",
     "show_connection_stats": "Show connection statistics",
     "url_params": "URL parameters"
   },

src/UrlParams.ts

@@ -141,6 +141,11 @@ export interface UrlProperties {
    * can be "light", "dark", "light-high-contrast" or "dark-high-contrast".
    */
   theme: string | null;
+  /**
+   * Whether or not the call should be held using the sticky event implementation,
+   * where possible.
+   */
+  multiSFU: boolean;
 }
 
 /**
@@ -501,6 +506,7 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => {
     sentryDsn: parser.getParam("sentryDsn"),
     sentryEnvironment: parser.getParam("sentryEnvironment"),
     e2eEnabled: parser.getFlagParam("enableE2EE", true),
+    multiSFU: parser.getFlagParam("multiSFU", false),
   };
 
   const configuration: Partial<UrlConfiguration> = {

src/settings/DeveloperSettingsTab.tsx

@@ -29,7 +29,6 @@ import {
   multiSfu as multiSfuSetting,
   muteAllAudio as muteAllAudioSetting,
   alwaysShowIphoneEarpiece as alwaysShowIphoneEarpieceSetting,
-  preferStickyEvents as preferStickyEventsSetting,
 } from "./settings";
 import type { Room as LivekitRoom } from "livekit-client";
 import styles from "./DeveloperSettingsTab.module.css";
@@ -59,10 +58,6 @@ export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRooms }) => {
       });
   }, [client]);
 
-  const [preferStickyEvents, setPreferStickyEvents] = useSetting(
-    preferStickyEventsSetting,
-  );
-
   const [showConnectionStats, setShowConnectionStats] = useSetting(
     showConnectionStatsSetting,
   );
@@ -146,22 +141,6 @@ export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRooms }) => {
           }
         />
       </FieldRow>
-      <FieldRow>
-        <InputField
-          id="preferStickyEvents"
-          type="checkbox"
-          label={t("developer_mode.prefer_sticky_events.label")}
-          disabled={!stickyEventsSupported}
-          description={t("developer_mode.prefer_sticky_events.description")}
-          checked={!!preferStickyEvents}
-          onChange={useCallback(
-            (event: ChangeEvent<HTMLInputElement>): void => {
-              setPreferStickyEvents(event.target.checked);
-            },
-            [setPreferStickyEvents],
-          )}
-        />
-      </FieldRow>
       <FieldRow>
         <InputField
           id="showConnectionStats"
@@ -180,10 +159,10 @@ export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRooms }) => {
         <InputField
           id="multiSfu"
           type="checkbox"
-          label={t("developer_mode.multi_sfu")}
-          // If using sticky events we implicitly prefer use multi-sfu
-          checked={multiSfu || preferStickyEvents}
-          disabled={preferStickyEvents}
+          label={t("developer_mode.multi_sfu.label")}
+          description={t("developer_mode.multi_sfu.description")}
+          checked={multiSfu}
+          disabled={!stickyEventsSupported}
           onChange={useCallback(
             (event: ChangeEvent<HTMLInputElement>): void => {
               setMultiSfu(event.target.checked);

src/settings/settings.ts

@@ -83,11 +83,6 @@ export const showConnectionStats = new Setting<boolean>(
   false,
 );
 
-export const preferStickyEvents = new Setting<boolean>(
-  "prefer-sticky-events",
-  false,
-);
-
 export const audioInput = new Setting<string | undefined>(
   "audio-input",
   undefined,

src/state/CallViewModel.ts

@@ -91,7 +91,6 @@ import {
   duplicateTiles,
   multiSfu,
   playReactionsSound,
-  preferStickyEvents,
   showReactions,
 } from "../settings/settings";
 import { isFirefox } from "../Platform";
@@ -282,22 +281,13 @@ export class CallViewModel {
     remote: { membership: CallMembership; transport: LivekitTransport }[];
     preferred: Async<LivekitTransport>;
     multiSfu: boolean;
-    preferStickyEvents: boolean;
   } | null> = this.scope.behavior(
     this.joined$.pipe(
       switchMap((joined) =>
         joined
           ? combineLatest(
-              [
-                this.preferredTransport$,
-                this.memberships$,
-                multiSfu.value$,
-                preferStickyEvents.value$,
-              ],
-              (preferred, memberships, preferMultiSfu, preferStickyEvents) => {
-                // Multi-SFU must be implicitly enabled when using sticky events
-                const multiSfu = preferStickyEvents || preferMultiSfu;
-
+              [this.preferredTransport$, this.memberships$, multiSfu.value$],
+              (preferred, memberships, multiSfu) => {
                 const oldestMembership =
                   this.matrixRTCSession.getOldestMembership();
                 const remote = memberships.flatMap((m) => {
@@ -333,7 +323,6 @@ export class CallViewModel {
                   remote,
                   preferred,
                   multiSfu,
-                  preferStickyEvents,
                 };
               },
             )
@@ -368,7 +357,6 @@ export class CallViewModel {
    */
   private readonly advertisedTransport$: Behavior<{
     multiSfu: boolean;
-    preferStickyEvents: boolean;
     transport: LivekitTransport;
   } | null> = this.scope.behavior(
     this.transports$.pipe(
@@ -377,7 +365,6 @@ export class CallViewModel {
         transports.preferred.state === "ready"
           ? {
               multiSfu: transports.multiSfu,
-              preferStickyEvents: transports.preferStickyEvents,
               // In non-multi-SFU mode we should always advertise the preferred
               // SFU to minimize the number of membership updates
               transport: transports.multiSfu
@@ -388,7 +375,6 @@ export class CallViewModel {
       ),
       distinctUntilChanged<{
         multiSfu: boolean;
-        preferStickyEvents: boolean;
         transport: LivekitTransport;
       } | null>(deepCompare),
     ),
@@ -1834,7 +1820,8 @@ export class CallViewModel {
           await enterRTCSession(this.matrixRTCSession, advertised.transport, {
             encryptMedia: this.options.encryptionSystem.kind !== E2eeType.NONE,
             useMultiSfu: advertised.multiSfu,
-            preferStickyEvents: advertised.preferStickyEvents,
+            // Multi-SFU enables sticky events.
+            preferStickyEvents: advertised.multiSfu ?? this.urlParams.multiSFU,
           });
         } catch (e) {
           logger.error("Error entering RTC session", e);