Add prefer sticky setting]

locales/en/app.json

@@ -75,6 +75,10 @@
     "multi_sfu": "Multi-SFU media transport",
     "mute_all_audio": "Mute all audio (participants, reactions, join sounds)",
     "show_connection_stats": "Show connection statistics",
+    "prefer_sticky_events": {
+      "label": "Prefer sticky events",
+      "description": "Improves reliability of calls (requires homeserver support)"
+    },
     "url_params": "URL parameters",
     "use_new_membership_manager": "Use the new implementation of the call MembershipManager",
     "use_to_device_key_transport": "Use to device key transport. This will fallback to room key transport when another call member sent a room key"

src/rtcSessionHelpers.ts

@@ -20,6 +20,7 @@ import { ElementWidgetActions, widget, type WidgetHelpers } from "./widget";
 import { MatrixRTCTransportMissingError } from "./utils/errors";
 import { getUrlParams } from "./UrlParams";
 import { getSFUConfigWithOpenID } from "./livekit/openIDSFU.ts";
+import { preferStickyEvents } from "./settings/settings.ts";
 
 const FOCI_WK_KEY = "org.matrix.msc4143.rtc_foci";
 
@@ -137,7 +138,7 @@ export async function enterRTCSession(
       membershipEventExpiryMs:
         matrixRtcSessionConfig?.membership_event_expiry_ms,
       useExperimentalToDeviceTransport,
-      unstableSendStickyEvents: true,
+      unstableSendStickyEvents: preferStickyEvents.getValue(),
     },
   );
   if (widget) {

src/settings/DeveloperSettingsTab.tsx

@@ -5,7 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type ChangeEvent, type FC, useCallback, useMemo } from "react";
+import {
+  type ChangeEvent,
+  type FC,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import { useTranslation } from "react-i18next";
 
 import { FieldRow, InputField } from "../input/Input";
@@ -18,11 +25,16 @@ import {
   multiSfu as multiSfuSetting,
   muteAllAudio as muteAllAudioSetting,
   alwaysShowIphoneEarpiece as alwaysShowIphoneEarpieceSetting,
+  preferStickyEvents as preferStickyEventsSetting,
 } from "./settings";
-import type { MatrixClient } from "matrix-js-sdk";
+import {
+  UNSTABLE_MSC4354_STICKY_EVENTS,
+  type MatrixClient,
+} from "matrix-js-sdk";
 import type { Room as LivekitRoom } from "livekit-client";
 import styles from "./DeveloperSettingsTab.module.css";
 import { useUrlParams } from "../UrlParams";
+import { logger } from "matrix-js-sdk/lib/logger";
 interface Props {
   client: MatrixClient;
   livekitRooms?: { room: LivekitRoom; url: string; isLocal?: boolean }[];
@@ -35,6 +47,22 @@ export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRooms }) => {
     debugTileLayoutSetting,
   );
 
+  const [stickyEventsSupported, setStickyEventsSupported] = useState(false);
+  useEffect(() => {
+    client
+      .doesServerSupportUnstableFeature(UNSTABLE_MSC4354_STICKY_EVENTS)
+      .then((result) => {
+        setStickyEventsSupported(result);
+      })
+      .catch((ex) => {
+        logger.warn("Failed to check if sticky events are supported", ex);
+      });
+  }, [client]);
+
+  const [preferStickyEvents, setPreferStickyEvents] = useSetting(
+    preferStickyEventsSetting,
+  );
+
   const [showConnectionStats, setShowConnectionStats] = useSetting(
     showConnectionStatsSetting,
   );
@@ -121,6 +149,22 @@ 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"

src/settings/settings.ts

@@ -83,6 +83,11 @@ 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,