Add MatrixRTCMode and refactor local membership

Remove preferStickyEvents and multiSfu in favor of a MatrixRTCMode
enum/setting (Legacy, Compatibil, Matrix_2_0). Move session join/leave,
track pause/resume, and config error handling out of CallViewModel into
the localMembership module. Update developer settings UI, i18n strings,
and related RTC session helpers and wiring accordingly.

src/settings/DeveloperSettingsTab.tsx

@@ -29,7 +29,8 @@ import {
   multiSfu as multiSfuSetting,
   muteAllAudio as muteAllAudioSetting,
   alwaysShowIphoneEarpiece as alwaysShowIphoneEarpieceSetting,
-  preferStickyEvents as preferStickyEventsSetting,
+  matrixRTCMode as matrixRTCModeSetting,
+  MatrixRTCMode,
 } from "./settings";
 import type { Room as LivekitRoom } from "livekit-client";
 import styles from "./DeveloperSettingsTab.module.css";
@@ -59,9 +60,7 @@ export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRooms }) => {
       });
   }, [client]);
 
-  const [preferStickyEvents, setPreferStickyEvents] = useSetting(
-    preferStickyEventsSetting,
-  );
+  const [matrixRTCMode, setMatrixRTCMode] = useSetting(matrixRTCModeSetting);
 
   const [showConnectionStats, setShowConnectionStats] = useSetting(
     showConnectionStatsSetting,
@@ -71,8 +70,6 @@ export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRooms }) => {
     alwaysShowIphoneEarpieceSetting,
   );
 
-  const [multiSfu, setMultiSfu] = useSetting(multiSfuSetting);
-
   const [muteAllAudio, setMuteAllAudio] = useSetting(muteAllAudioSetting);
 
   const urlParams = useUrlParams();
@@ -148,17 +145,47 @@ export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRooms }) => {
       </FieldRow>
       <FieldRow>
         <InputField
-          id="preferStickyEvents"
+          id="matrixRTCMode"
           type="checkbox"
-          label={t("developer_mode.prefer_sticky_events.label")}
-          disabled={!stickyEventsSupported}
-          description={t("developer_mode.prefer_sticky_events.description")}
-          checked={!!preferStickyEvents}
+          label={t("developer_mode.matrixRTCMode.Legacy.label")}
+          description={t("developer_mode.matrixRTCMode.Legacy.description")}
+          checked={matrixRTCMode === MatrixRTCMode.Legacy}
           onChange={useCallback(
-            (event: ChangeEvent<HTMLInputElement>): void => {
-              setPreferStickyEvents(event.target.checked);
+            (event: ChangeEvent<HTMLInputElement>) => {
+              if (event.target.checked) setMatrixRTCMode(MatrixRTCMode.Legacy);
             },
-            [setPreferStickyEvents],
+            [setMatrixRTCMode],
+          )}
+        />
+        <InputField
+          id="matrixRTCMode"
+          type="checkbox"
+          label={t("developer_mode.matrixRTCMode.Comptibility.label")}
+          description={t(
+            "developer_mode.matrixRTCMode.Comptibility.description",
+          )}
+          checked={matrixRTCMode === MatrixRTCMode.Compatibil}
+          onChange={useCallback(
+            (event: ChangeEvent<HTMLInputElement>) => {
+              if (event.target.checked)
+                setMatrixRTCMode(MatrixRTCMode.Compatibil);
+            },
+            [setMatrixRTCMode],
+          )}
+        />
+        <InputField
+          id="matrixRTCMode"
+          type="checkbox"
+          label={t("developer_mode.matrixRTCMode.Matrix_2_0.label")}
+          description={t("developer_mode.matrixRTCMode.Matrix_2_0.description")}
+          disabled={!stickyEventsSupported}
+          checked={matrixRTCMode === MatrixRTCMode.Matrix_2_0}
+          onChange={useCallback(
+            (event: ChangeEvent<HTMLInputElement>) => {
+              if (event.target.checked)
+                setMatrixRTCMode(MatrixRTCMode.Matrix_2_0);
+            },
+            [setMatrixRTCMode],
           )}
         />
       </FieldRow>
@@ -176,22 +203,6 @@ export const DeveloperSettingsTab: FC<Props> = ({ client, livekitRooms }) => {
           )}
         />
       </FieldRow>
-      <FieldRow>
-        <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}
-          onChange={useCallback(
-            (event: ChangeEvent<HTMLInputElement>): void => {
-              setMultiSfu(event.target.checked);
-            },
-            [setMultiSfu],
-          )}
-        />
-      </FieldRow>
       <FieldRow>
         <InputField
           id="muteAllAudio"

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,
@@ -120,8 +115,6 @@ export const soundEffectVolume = new Setting<number>(
   0.5,
 );
 
-export const multiSfu = new Setting<boolean>("multi-sfu", false);
-
 export const muteAllAudio = new Setting<boolean>("mute-all-audio", false);
 
 export const alwaysShowSelf = new Setting<boolean>("always-show-self", true);
@@ -130,3 +123,14 @@ export const alwaysShowIphoneEarpiece = new Setting<boolean>(
   "always-show-iphone-earpiece",
   false,
 );
+
+export enum MatrixRTCMode {
+  Legacy = "legacy",
+  Compatibil = "compatibil",
+  Matrix_2_0 = "matrix_2_0",
+}
+
+export const matrixRTCMode = new Setting<MatrixRTCMode>(
+  "matrix-rtc-mode",
+  MatrixRTCMode.Legacy,
+);