Merge branch 'main' into toger5/add-key-rotation-participant-limit

2026-08-29 21:15:19 +00:00 · 2026-08-28 15:27:43 +02:00
parent a526a8ae19 a4dda428f5
commit b0d098e065
55 changed files with 437 additions and 1162 deletions
--- a/src/components/CallFooter.stories.tsx
+++ b/src/components/CallFooter.stories.tsx
@@ -127,6 +127,7 @@ export const Default: Story = {
    showFooter: true,
    hideControls: false,
    asOverlay: false,
+    showModals: true,
    sharingScreen: false,
    audioOutputSwitcher: undefined,
    reactionIdentifier: undefined,
--- a/src/components/CallFooter.tsx
+++ b/src/components/CallFooter.tsx
@@ -26,6 +26,7 @@ import {
  MediaMuteAndSwitchButton,
  type MenuOptions,
 } from "./MediaMuteAndSwitchButton";
+import { type Behavior } from "../state/Behavior";
 import { type ViewModel } from "../state/ViewModel";
 import { useBehavior } from "../useBehavior";
 import { type LayoutSwitchViewModel } from "../state/LayoutSwitchViewModel";
@@ -76,6 +77,7 @@ export interface FooterState {
  /** The footer should be used as an overlay.
   * (Over the Call Grid) This saves spaces on small screens. */
  asOverlay: boolean;
+  showModals: boolean;

  buttonSize: "md" | "lg";
  showLogo: boolean;
@@ -120,6 +122,7 @@ export const CallFooter: FC<FooterProps> = ({
  const asOverlay = useBehavior(vm.asOverlay$);
  const showFooter = useBehavior(vm.showFooter$);
  const hideControls = useBehavior(vm.hideControls$);
+  const showModals = useBehavior(vm.showModals$);
  const layoutSwitchVm = useBehavior(vm.layoutSwitchVm$);
  const openSettings = useBehavior(vm.openSettings$);
  const audioEnabled = useBehavior(vm.audioEnabled$);
@@ -135,7 +138,6 @@ export const CallFooter: FC<FooterProps> = ({
  const audioOutputSwitcher = useBehavior(vm.audioOutputSwitcher$);
  const hangup = useBehavior(vm.hangup$);
  const debugTileLayout = useBehavior(vm.debugTileLayout$);
-  const tileStoreGeneration = useBehavior(vm.tileStoreGeneration$);
  const videoOptions = useBehavior(vm.videoOptions$);
  const selectedVideo = useBehavior(vm.selectedVideo$);
  const audioOptions = useBehavior(vm.audioOptions$);
@@ -235,7 +237,8 @@ export const CallFooter: FC<FooterProps> = ({
    );
  }

-  if (reactionIdentifier && reactionData) {
+  // Reaction button contains a pretty large menu, so treat it like a modal
+  if (reactionIdentifier && reactionData && showModals) {
    buttons.push(
      <ReactionToggleButton
        size={buttonSize}
@@ -283,7 +286,9 @@ export const CallFooter: FC<FooterProps> = ({
          />
        </>
      )}
-      {debugTileLayout ? `Tiles generation: ${tileStoreGeneration}` : undefined}
+      {debugTileLayout ? (
+        <TilesDebugInfo generation$={vm.tileStoreGeneration$} />
+      ) : undefined}
    </div>
  );

@@ -316,3 +321,14 @@ export const CallFooter: FC<FooterProps> = ({
    </div>
  );
 };
+
+interface TilesDebugInfoProps {
+  generation$: Behavior<number | undefined>;
+}
+
+// Isolated in its own component since the layout generation updates frequently
+// and we can avoid re-rendering the footer this way
+const TilesDebugInfo: FC<TilesDebugInfoProps> = ({ generation$ }) => {
+  const generation = useBehavior(generation$);
+  return `Tiles generation: ${generation}`;
+};
--- a/src/components/CallFooterViewModel.test.ts
+++ b/src/components/CallFooterViewModel.test.ts
@@ -49,6 +49,7 @@ function buildMinimalCallViewModel(layout: Layout): CallViewModel {
    reactions$: constant({}),
    tileStoreGeneration$: constant(0),
    showFooter$: constant(true),
+    showModals$: constant(true),
    settingsOpen$: constant(false),
    setSettingsOpen$: constant(() => {}),
  } as unknown as CallViewModel;
--- a/src/components/CallFooterViewModel.tsx
+++ b/src/components/CallFooterViewModel.tsx
@@ -161,6 +161,7 @@ export function createCallFooterViewModel(
    // candidat to move into the FooterViewModel
    showFooter$: callModel.showFooter$,
    hideControls$: constant(!showControls),
+    showModals$: callModel.showModals$,
    asOverlay$: callModel.edgeToEdge$,
    buttonSize$: scope.behavior(
      isPip$.pipe(map<boolean, "md" | "lg">((pip) => (pip ? "md" : "lg"))),
@@ -168,12 +169,12 @@ export function createCallFooterViewModel(

    openSettings$: scope.behavior(
      combineLatest([
-        isPip$,
+        callModel.showModals$,
        callModel.showHeader$,
        callModel.setSettingsOpen$,
      ]).pipe(
-        map(([isPip, showHeader, setSettingsOpen]) =>
-          !isPip && headerStyle !== HeaderStyle.AppBar && showControls
+        map(([showModals, showHeader, setSettingsOpen]) =>
+          showModals && headerStyle !== HeaderStyle.AppBar && showControls
            ? (): void => setSettingsOpen(true)
            : undefined,
        ),
@@ -239,6 +240,7 @@ export function createLobbyFooterViewModel(
      showLogo,
      hideControls: false,
      asOverlay: false,
+      showModals: true,
      buttonSize: "lg",
      openSettings,
      hangup,
--- a/src/config/ConfigOptions.ts
+++ b/src/config/ConfigOptions.ts
@@ -12,9 +12,7 @@ Please see LICENSE in the repository root for full details.
 * Settings, or pinned for a deployment via `matrix_rtc_mode` in config.json.
 */
 export enum MatrixRTCMode {
-  /** Legacy single-SFU + user-keyed memberships + legacy JWT endpoint. */
-  Legacy = "legacy",
-  /** Multi-SFU transport, legacy JWT endpoint, no sticky events. */
+  /** Multi-SFU transport, legacy JWT endpoint, state events. */
  Compatibility = "compatibility",
  /**
   * Multi-SFU transport with:
@@ -86,15 +84,6 @@ export interface ConfigOptions {
     * Allow to join group calls without audio and video.
     */
    feature_group_calls_without_video_and_audio?: boolean;
-
-    /**
-     * Send device-specific call session membership state events instead of
-     * legacy user-specific call membership state events.
-     * This setting has no effect when the user joins an active call with
-     * legacy state events. For compatibility, Element Call will always join
-     * active legacy calls with legacy state events.
-     */
-    feature_use_device_session_member_events?: boolean;
  };

  /**
@@ -179,7 +168,8 @@ export interface ConfigOptions {
  /**
   * Pins the {@link MatrixRTCMode} for all clients on this deployment,
   * overriding any per-user choice from the Developer Settings. If unset,
-   * the user's Developer Settings choice (or its default of `Legacy`) wins.
+   * the user's Developer Settings choice (or its default of `Compatibility`)
+   * wins.
   */
  matrix_rtc_mode?: MatrixRTCMode;

@@ -279,9 +269,6 @@ export interface ResolvedConfigOptions extends ConfigOptions {
 }

 export const DEFAULT_CONFIG: ResolvedConfigOptions = {
-  features: {
-    feature_use_device_session_member_events: true,
-  },
  sync_disconnect_grace_period_ms: 10000,
  ssla: "https://static.element.io/legal/element-software-and-services-license-agreement-uk-1.pdf",
  media_quality: {
--- a/src/graphics/desktop-gradient.png
+++ b/src/graphics/desktop-gradient.png
--- a/src/graphics/desktop-gradient.svg
+++ b/src/graphics/desktop-gradient.svg
@@ -1,16 +0,0 @@
-<svg width="1440" height="800" viewBox="0 0 1440 800" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_f_4162_80259)">
-<path d="M-37.0486 666.028C267.76 138.867 944.304 -46.1945 1477.05 260.929" stroke="url(#paint0_linear_4162_80259)" stroke-width="192" stroke-linecap="round"/>
-</g>
-<defs>
-<filter id="filter0_f_4162_80259" x="-333.118" y="-183.694" width="2106.24" height="1145.68" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="100" result="effect1_foregroundBlur_4162_80259"/>
-</filter>
-<linearGradient id="paint0_linear_4162_80259" x1="1255.31" y1="320.254" x2="184.899" y2="607.497" gradientUnits="userSpaceOnUse">
-<stop stop-color="#00C59E"/>
-<stop offset="0.75" stop-color="#0044A5"/>
-</linearGradient>
-</defs>
-</svg>
--- a/src/graphics/mobile-gradient.png
+++ b/src/graphics/mobile-gradient.png
--- a/src/graphics/mobile-gradient.svg
+++ b/src/graphics/mobile-gradient.svg
@@ -1,86 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   width="1200"
-   height="285"
-   viewBox="0 0 1200 285"
-   fill="none"
-   version="1.1"
-   id="svg5"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <g
-     filter="url(#filter0_f_3970_9366)"
-     id="g2"
-     transform="translate(422.00201)">
-    <path
-       d="m -164.342,495.134 c 188.2881,-188.288 494.684,-190 684.684,0"
-       stroke="url(#paint0_linear_3970_9366)"
-       stroke-width="235.517"
-       stroke-linecap="round"
-       id="path1"
-       style="stroke:url(#paint0_linear_3970_9366)" />
-    <path
-       d="m -164.342,495.134 c 188.2881,-188.288 494.684,-190 684.684,0"
-       stroke="url(#paint1_linear_3970_9366)"
-       style="mix-blend-mode:overlay;stroke:url(#paint1_linear_3970_9366)"
-       stroke-width="235.517"
-       stroke-linecap="round"
-       id="path2" />
-  </g>
-  <defs
-     id="defs5">
-    <filter
-       id="filter0_f_3970_9366"
-       x="-517.617"
-       y="-0.00012207"
-       width="1391.23"
-       height="848.409"
-       filterUnits="userSpaceOnUse"
-       color-interpolation-filters="sRGB">
-      <feFlood
-         flood-opacity="0"
-         result="BackgroundImageFix"
-         id="feFlood2" />
-      <feBlend
-         mode="normal"
-         in="SourceGraphic"
-         in2="BackgroundImageFix"
-         result="shape"
-         id="feBlend2" />
-      <feGaussianBlur
-         stdDeviation="117.758"
-         result="effect1_foregroundBlur_3970_9366"
-         id="feGaussianBlur2" />
-    </filter>
-    <linearGradient
-       id="paint0_linear_3970_9366"
-       x1="349.17099"
-       y1="323.96301"
-       x2="6.82898"
-       y2="666.30499"
-       gradientUnits="userSpaceOnUse">
-      <stop
-         stop-color="#0D5CBD"
-         id="stop2" />
-      <stop
-         offset="0.730863"
-         stop-color="#0DBDA8"
-         id="stop3" />
-    </linearGradient>
-    <linearGradient
-       id="paint1_linear_3970_9366"
-       x1="349.17099"
-       y1="323.96301"
-       x2="6.82898"
-       y2="666.30499"
-       gradientUnits="userSpaceOnUse">
-      <stop
-         stop-color="#0D5CBD"
-         id="stop4" />
-      <stop
-         offset="0.730863"
-         stop-color="#0DBDA8"
-         id="stop5" />
-    </linearGradient>
-  </defs>
-</svg>
--- a/src/index.css
+++ b/src/index.css
@@ -78,16 +78,19 @@ body {
  body[data-background="gradient"]::before {
    content: "";
    position: fixed;
-    inset: 0;
-    background-image: url("graphics/mobile-gradient.svg");
-    background-size: auto;
+    /* Chromium abruptly fades our images to fully transparent at the edge of
+    the element. If we just make the element a little bigger than the viewport,
+    this is no longer visible. */
+    inset: -20px;
+    background-image: url("graphics/mobile-gradient.png");
+    background-size: 1400px 305px;
    background-position: bottom;
    background-repeat: no-repeat;
  }

  body[data-background="gradient"][data-platform="desktop"]::before {
-    background-image: url("graphics/desktop-gradient.svg");
-    background-size: calc(max(1440px, 100vw)) calc(max(800px, 100vh));
+    background-image: url("graphics/desktop-gradient.png");
+    background-size: max(1440px, 100vw) max(1440px, 100vh);
    background-position: center;
  }
 }
--- a/src/room/GroupCallView.tsx
+++ b/src/room/GroupCallView.tsx
@@ -555,6 +555,9 @@ export const GroupCallView: FC<Props> = ({
      }}
      onError={(_error) => {
        if (rtcSession.isJoined()) onLeft("error");
+        // If there is an error we need to be able to close the widget. This is done in `onLeft` as well
+        // We need it here explicitly in case rtcSession.isJoined is false.
+        void widget?.api.setAlwaysOnScreen(false);
      }}
    >
      {body}
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -276,6 +276,7 @@ export const InCallView: FC<InCallViewProps> = ({
  const overflowing = useBehavior(vm.overflowing$);
  const showNameTags = useBehavior(vm.showNameTags$);
  const showHeader = useBehavior(vm.showHeader$);
+  const showModals = useBehavior(vm.showModals$);
  const settingsOpen = useBehavior(vm.settingsOpen$);
  const setSettingsOpen = useBehavior(vm.setSettingsOpen$);
  const earpieceMode = useBehavior(vm.earpieceMode$);
@@ -637,7 +638,7 @@ export const InCallView: FC<InCallViewProps> = ({
      {earpieceOverlay}
      <ReactionsOverlay vm={vm} />
      {footer}
-      {layout.type !== "pip" && (
+      {showModals && (
        <>
          <RageshakeRequestModal {...rageshakeRequestModalProps} />
          <SettingsModal
--- a/src/room/VideoPreview.module.css
+++ b/src/room/VideoPreview.module.css
@@ -22,6 +22,9 @@ Please see LICENSE in the repository root for full details.
  height: 100%;
  object-fit: cover;
  background-color: var(--video-tile-background);
+  /* In FF if you add a transform: scale/translate/matrix filter on an element,
+  it'll ignore the parents' border-radius, so force back the radius to avoid UI glitch*/
+  border-radius: inherit;
 }

 video.mirror {
--- a/src/room/useLoadGroupCall.ts
+++ b/src/room/useLoadGroupCall.ts
@@ -280,7 +280,7 @@ export const useLoadGroupCall = (
            );
          }
          if (
-            roomSummary === undefined ||
+            roomSummary?.join_rule === undefined ||
            roomSummary.join_rule === JoinRule.Public
          ) {
            room = await client.joinRoom(roomId, {
--- a/src/settings/DeveloperSettingsTab.test.tsx
+++ b/src/settings/DeveloperSettingsTab.test.tsx
@@ -330,19 +330,15 @@ describe("DeveloperSettingsTab", () => {

  describe("matrix rtc mode", () => {
    afterEach(() => {
-      matrixRTCModeSetting.setValue(MatrixRTCMode.Legacy);
+      matrixRTCModeSetting.setValue(MatrixRTCMode.Compatibility);
      vi.restoreAllMocks();
    });

    function getModeRadios(): {
-      legacy: HTMLInputElement;
      compatibility: HTMLInputElement;
      matrix20: HTMLInputElement;
    } {
      return {
-        legacy: screen.getByDisplayValue(
-          MatrixRTCMode.Legacy,
-        ) as HTMLInputElement,
        compatibility: screen.getByDisplayValue(
          MatrixRTCMode.Compatibility,
        ) as HTMLInputElement,
@@ -373,27 +369,21 @@ describe("DeveloperSettingsTab", () => {

      const radios = getModeRadios();
      expect(radios.compatibility).toBeChecked();
-      expect(radios.legacy).not.toBeChecked();
      expect(radios.matrix20).not.toBeChecked();
      // None are disabled by config; only Matrix_2_0 may be disabled by sticky-events support.
-      expect(radios.legacy).not.toBeDisabled();
      expect(radios.compatibility).not.toBeDisabled();
    });

-    it.each([
-      MatrixRTCMode.Legacy,
-      MatrixRTCMode.Compatibility,
-      MatrixRTCMode.Matrix_2_0,
-    ])(
+    it.each([MatrixRTCMode.Compatibility, MatrixRTCMode.Matrix_2_0])(
      "disables all radios and shows the config value (%s) as checked when matrix_rtc_mode is set",
      async (configMode) => {
        mockConfig({ matrix_rtc_mode: configMode });
        // Local setting is intentionally different from the config value to
        // prove config wins.
        matrixRTCModeSetting.setValue(
-          configMode === MatrixRTCMode.Legacy
-            ? MatrixRTCMode.Compatibility
-            : MatrixRTCMode.Legacy,
+          configMode === MatrixRTCMode.Compatibility
+            ? MatrixRTCMode.Matrix_2_0
+            : MatrixRTCMode.Compatibility,
        );
        const client = createMockMatrixClient();

@@ -412,13 +402,11 @@ describe("DeveloperSettingsTab", () => {
        );

        const radios = getModeRadios();
-        expect(radios.legacy).toBeDisabled();
        expect(radios.compatibility).toBeDisabled();
        expect(radios.matrix20).toBeDisabled();

        const checkedValue = (
          {
-            [MatrixRTCMode.Legacy]: radios.legacy,
            [MatrixRTCMode.Compatibility]: radios.compatibility,
            [MatrixRTCMode.Matrix_2_0]: radios.matrix20,
          } as const
--- a/src/settings/DeveloperSettingsTab.tsx
+++ b/src/settings/DeveloperSettingsTab.tsx
@@ -557,22 +557,6 @@ export const DeveloperSettingsTab: FC<Props> = ({
      </Heading>
      {matrixRTCModeForced && <p>Your deployment overrides the mode.</p>}
      <Form>
-        <InlineField
-          name={matrixRTCModeRadioGroup}
-          control={
-            <RadioControl
-              checked={effectiveMatrixRTCMode === MatrixRTCMode.Legacy}
-              value={MatrixRTCMode.Legacy}
-              disabled={matrixRTCModeForced}
-              onChange={onMatrixRTCModeChange}
-            />
-          }
-        >
-          <Label>{t("developer_mode.matrixRTCMode.Legacy.label")}</Label>
-          <HelpMessage>
-            {t("developer_mode.matrixRTCMode.Legacy.description")}
-          </HelpMessage>
-        </InlineField>
        <InlineField
          name={matrixRTCModeRadioGroup}
          control={
--- a/src/settings/snapshots/DeveloperSettingsTab.test.tsx.snap
+++ b/src/settings/snapshots/DeveloperSettingsTab.test.tsx.snap
@@ -285,50 +285,10 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
          class="_container_1ug7n_10"
        >
          <input
-            aria-describedby="radix-_r_a_ radix-_r_c_ radix-_r_e_"
-            class="_input_1ug7n_18"
-            id="radix-_r_9_"
-            name="_r_0_"
-            title=""
-            type="radio"
-            value="legacy"
-          />
-          <div
-            class="_ui_1ug7n_19"
-          />
-        </div>
-      </div>
-      <div
-        class="_inline-field-body_1o4d9_39"
-      >
-        <label
-          class="_label_1o4d9_60"
-          for="radix-_r_9_"
-        >
-          Legacy: state events & oldest membership SFU
-        </label>
-        <span
-          class="_message_1o4d9_86 _help-message_1o4d9_92"
-          id="radix-_r_a_"
-        >
-          Compatible with old versions of EC that do not support multi SFU
-        </span>
-      </div>
-    </div>
-    <div
-      class="_inline-field_1o4d9_33"
-    >
-      <div
-        class="_inline-field-control_1o4d9_45"
-      >
-        <div
-          class="_container_1ug7n_10"
-        >
-          <input
-            aria-describedby="radix-_r_a_ radix-_r_c_ radix-_r_e_"
+            aria-describedby="radix-_r_a_ radix-_r_c_"
            checked=""
            class="_input_1ug7n_18"
-            id="radix-_r_b_"
+            id="radix-_r_9_"
            name="_r_0_"
            title=""
            type="radio"
@@ -344,13 +304,13 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
      >
        <label
          class="_label_1o4d9_60"
-          for="radix-_r_b_"
+          for="radix-_r_9_"
        >
          Compatibility: state events & multi SFU
        </label>
        <span
          class="_message_1o4d9_86 _help-message_1o4d9_92"
-          id="radix-_r_c_"
+          id="radix-_r_a_"
        >
          Compatible with homeservers that do not support sticky events (but all other EC clients are v0.17.0 or later)
        </span>
@@ -366,9 +326,9 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
          class="_container_1ug7n_10"
        >
          <input
-            aria-describedby="radix-_r_a_ radix-_r_c_ radix-_r_e_"
+            aria-describedby="radix-_r_a_ radix-_r_c_"
            class="_input_1ug7n_18"
-            id="radix-_r_d_"
+            id="radix-_r_b_"
            name="_r_0_"
            title=""
            type="radio"
@@ -384,13 +344,13 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
      >
        <label
          class="_label_1o4d9_60"
-          for="radix-_r_d_"
+          for="radix-_r_b_"
        >
          Matrix 2.0: sticky events & multi SFU
        </label>
        <span
          class="_message_1o4d9_86 _help-message_1o4d9_92"
-          id="radix-_r_e_"
+          id="radix-_r_c_"
        >
          Compatible only with homservers supporting sticky events and all EC clients v0.17.0 or later
        </span>
@@ -491,7 +451,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
      class="_field_1bd8c0 _checkboxField_1bd8c0"
    >
      <input
-        aria-describedby="_r_k_"
+        aria-describedby="_r_i_"
        id="cameraToggle"
        type="checkbox"
      />
@@ -521,7 +481,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
      </label>
      <p
        class="_description_1bd8c0"
-        id="_r_k_"
+        id="_r_i_"
      >
        Configure resolution, framerate, bitrate, and codec for camera video. Changes apply on next call join.
      </p>
@@ -543,7 +503,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
      class="_field_1bd8c0 _checkboxField_1bd8c0"
    >
      <input
-        aria-describedby="_r_l_"
+        aria-describedby="_r_j_"
        id="screenShareToggle"
        type="checkbox"
      />
@@ -573,7 +533,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
      </label>
      <p
        class="_description_1bd8c0"
-        id="_r_l_"
+        id="_r_j_"
      >
        Configure resolution, framerate, bitrate, and codec for screen sharing
      </p>
@@ -598,7 +558,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
      class="_field_1bd8c0 _checkboxField_1bd8c0"
    >
      <input
-        aria-describedby="_r_m_"
+        aria-describedby="_r_k_"
        checked=""
        id="echoCancellation"
        type="checkbox"
@@ -636,7 +596,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
      class="_field_1bd8c0 _checkboxField_1bd8c0"
    >
      <input
-        aria-describedby="_r_n_"
+        aria-describedby="_r_l_"
        checked=""
        id="noiseSuppression"
        type="checkbox"
@@ -674,7 +634,7 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
      class="_field_1bd8c0 _checkboxField_1bd8c0"
    >
      <input
-        aria-describedby="_r_o_"
+        aria-describedby="_r_m_"
        checked=""
        id="autoGainControl"
        type="checkbox"
--- a/src/state/CallViewModel/CallViewModel.test.ts
+++ b/src/state/CallViewModel/CallViewModel.test.ts
@@ -258,11 +258,9 @@ function mockRingEvent(
  } as unknown as { event_id: string } & IRTCNotificationContent;
 }

-describe.each([
-  [MatrixRTCMode.Legacy],
-  [MatrixRTCMode.Compatibility],
-  [MatrixRTCMode.Matrix_2_0],
-])("CallViewModel (%s mode)", (mode) => {
+const modes = [[MatrixRTCMode.Compatibility], [MatrixRTCMode.Matrix_2_0]];
+
+describe.each(modes)("CallViewModel (%s mode)", (mode) => {
  const withCallViewModel = withCallViewModelInMode(mode);

  test("participants are retained during a focus switch", () => {
--- a/src/state/CallViewModel/CallViewModel.ts
+++ b/src/state/CallViewModel/CallViewModel.ts
@@ -79,7 +79,7 @@ import {
  type ReactionInfo,
  type ReactionOption,
 } from "../../reactions";
-import { shallowEquals } from "../../utils/array";
+import { shallowEquals as shallowArrayEquals } from "../../utils/array";
 import { type MediaDevices } from "../MediaDevices";
 import { constant, type Behavior } from "../Behavior";
 import { E2eeType } from "../../e2ee/e2eeType";
@@ -89,6 +89,7 @@ import { getUrlParams, HeaderStyle } from "../../UrlParams";
 import { type ProcessorState } from "../../livekit/TrackProcessorContext";
 import { ElementWidgetActions, widget } from "../../widget";
 import {
+  layoutShallowEquals,
  type Alignment,
  type GridLayoutMedia,
  type Layout,
@@ -372,6 +373,11 @@ export interface CallViewModel {
   */
  overflowing$: Behavior<boolean>;

+  /**
+   * Whether modals such as settings and reactions should be accessible at all.
+   */
+  showModals$: Behavior<boolean>;
+
  settingsOpen$: Behavior<boolean>;
  setSettingsOpen$: Behavior<(open: boolean) => void>;

@@ -442,7 +448,7 @@ export function createCallViewModel$(
  const matrixRTCMode$ =
    configMatrixRTCMode !== undefined
      ? constant(configMatrixRTCMode)
-      : (options.matrixRTCMode$ ?? constant(MatrixRTCMode.Legacy));
+      : (options.matrixRTCMode$ ?? constant(MatrixRTCMode.Compatibility));

  // Each hbar seperates a block of input variables required for the CallViewModel to function.
  // The outputs of this block is written under the hbar.
@@ -504,7 +510,6 @@ export function createCallViewModel$(
              mode === MatrixRTCMode.Matrix_2_0
                ? JwtEndpointVersion.Matrix_2_0
                : JwtEndpointVersion.Legacy,
-            useOldestMember: mode === MatrixRTCMode.Legacy,
          }),
      ),
    ),
@@ -953,7 +958,7 @@ export function createCallViewModel$(
              bins.sort(([, bin1], [, bin2]) => bin1 - bin2).map(([m]) => m),
            );
      }),
-      distinctUntilChanged(shallowEquals),
+      distinctUntilChanged(shallowArrayEquals),
    ),
  );

@@ -1012,7 +1017,7 @@ export function createCallViewModel$(
  const spotlight$ = scope.behavior<MediaViewModel[]>(
    spotlightAndPip$.pipe(
      map(({ spotlight }) => spotlight),
-      distinctUntilChanged<MediaViewModel[]>(shallowEquals),
+      distinctUntilChanged<MediaViewModel[]>(shallowArrayEquals),
    ),
  );

@@ -1221,6 +1226,7 @@ export function createCallViewModel$(
        }
        return layout;
      }),
+      distinctUntilChanged(),
      scope.bind(),
    )
    .subscribe((orientation) => {
@@ -1460,6 +1466,11 @@ export function createCallViewModel$(
      map((naturallyShowFooter) => naturallyShowFooter && showFooterUrlParams),
    ),
  );
+
+  const showModals$ = scope.behavior(
+    windowMode$.pipe(map((mode) => mode !== "pip")),
+  );
+
  const settingsOpen$ = new BehaviorSubject(false);
  const setSettingsOpen$ = constant((open: boolean) => {
    settingsOpen$.next(open);
@@ -1586,7 +1597,11 @@ export function createCallViewModel$(
   * The layout of tiles in the call interface.
   */
  const layout$ = scope.behavior<Layout>(
-    layoutInternals$.pipe(map(({ layout }) => layout)),
+    layoutInternals$.pipe(
+      map(({ layout }) => layout),
+      // Drop redundant layout updates before they would hit React.
+      distinctUntilChanged<Layout>(layoutShallowEquals),
+    ),
  );

  const overflowing$ = scope.behavior<boolean>(
@@ -1833,6 +1848,7 @@ export function createCallViewModel$(
    showNameTags$,
    showHeader$: showHeader$,
    showFooter$: showFooter$,
+    showModals$,
    settingsOpen$: settingsOpen$,
    setSettingsOpen$: setSettingsOpen$,
    edgeToEdge$,
--- a/src/state/CallViewModel/localMember/LocalMember.test.ts
+++ b/src/state/CallViewModel/localMember/LocalMember.test.ts
@@ -59,7 +59,7 @@ import {

 initializeWidget();

-const MATRIX_RTC_MODE = MatrixRTCMode.Legacy;
+const MATRIX_RTC_MODE = MatrixRTCMode.Compatibility;
 const getUrlParams = vi.hoisted(() => vi.fn(() => ({})));
 vi.mock("../../../UrlParams", () => ({ getUrlParams }));
 vi.mock("@livekit/components-core", () => ({
@@ -71,12 +71,6 @@ vi.mock("@livekit/components-core", () => ({
 describe("LocalMembership", () => {
  describe("enterRTCSession", () => {
    it("It joins the correct Session", () => {
-      const focusFromOlderMembership = {
-        type: "livekit",
-        livekit_service_url: "http://my-oldest-member-service-url.com",
-        livekit_alias: "my-oldest-member-service-alias",
-      };
-
      mockConfig({
        livekit: { livekit_service_url: "http://my-default-service-url.com" },
      });
@@ -95,10 +89,6 @@ describe("LocalMembership", () => {
          },
        },
        memberships: [],
-        getFocusInUse: vi.fn().mockReturnValue(focusFromOlderMembership),
-        getOldestMembership: vi.fn().mockReturnValue({
-          getPreferredFoci: vi.fn().mockReturnValue([focusFromOlderMembership]),
-        }),
        joinRTCSession: vi.fn(),
      }) as unknown as MatrixRTCSession;

@@ -122,18 +112,13 @@ describe("LocalMembership", () => {
          memberId: "@alice:example.org:DEVICE",
          userId: "@alice:example.org",
        },
-        [
-          {
-            livekit_alias: "roomId",
-            livekit_service_url: "http://my-livekit-service-url.com",
-            type: "livekit",
-          },
-        ],
-        undefined,
-        expect.objectContaining({
-          manageMediaKeys: true,
-          useLegacyMemberEvents: false,
-        }),
+        [],
+        {
+          livekit_alias: "roomId",
+          livekit_service_url: "http://my-livekit-service-url.com",
+          type: "livekit",
+        },
+        expect.objectContaining({ manageMediaKeys: true }),
      );
    });

--- a/src/state/CallViewModel/localMember/LocalMember.ts
+++ b/src/state/CallViewModel/localMember/LocalMember.ts
@@ -117,7 +117,6 @@ export type LocalMemberState =
    };

 /*
- * - get oldest membership
 * - get transport to use
 * - get openId + jwt token
 * - wait for createTrack() call
@@ -851,9 +850,7 @@ export function enterRTCSession(
  // have started tracking by the time calls start getting created.
  // groupCallOTelMembership?.onJoinCall();

-  const { features, matrix_rtc_session: matrixRtcSessionConfig } = Config.get();
-  const useDeviceSessionMemberEvents =
-    features?.feature_use_device_session_member_events;
+  const { matrix_rtc_session: matrixRtcSessionConfig } = Config.get();
  const { sendNotificationType: notificationType, callIntent } = getUrlParams();
  const multiSFU =
    matrixRTCMode === MatrixRTCMode.Compatibility ||
@@ -895,9 +892,6 @@ export function enterRTCSession(
      notificationType,
      callIntent,
      manageMediaKeys: encryptMedia,
-      ...(useDeviceSessionMemberEvents !== undefined && {
-        useLegacyMemberEvents: !useDeviceSessionMemberEvents,
-      }),
      delayedLeaveEventRestartMs:
        matrixRtcSessionConfig?.delayed_leave_event_restart_ms,
      delayedLeaveEventDelayMs:
--- a/src/state/CallViewModel/localMember/LocalTransport.test.ts
+++ b/src/state/CallViewModel/localMember/LocalTransport.test.ts
@@ -13,7 +13,6 @@ import {
  it,
  type MockedObject,
  vi,
-  type MockInstance,
 } from "vitest";
 import {
  type CallMembership,
@@ -26,7 +25,6 @@ import {
  mockConfig,
  flushPromises,
  ownMemberMock,
-  mockRtcMembership,
  testScope,
 } from "../../../utils/test";
 import {
@@ -35,7 +33,7 @@ import {
  type LocalTransportWithSFUConfig,
 } from "./LocalTransport";
 import { constant } from "../../Behavior";
-import { Epoch, ObservableScope, trackEpoch } from "../../ObservableScope";
+import { Epoch, ObservableScope } from "../../ObservableScope";
 import {
  MatrixRTCTransportMissingError,
  FailToGetOpenIdToken,
@@ -58,7 +56,6 @@ describe("LocalTransport", () => {
    const { advertised$, active$ } = createLocalTransport$({
      scope: testScope(),
      roomId: "!room:example.org",
-      useOldestMember: false,
      memberships$: constant(new Epoch<CallMembership[]>([])),
      client: {
        // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -101,7 +98,6 @@ describe("LocalTransport", () => {
    const { advertised$, active$ } = createLocalTransport$({
      scope,
      roomId: "!example_room_id",
-      useOldestMember: false,
      memberships$: constant(new Epoch<CallMembership[]>([])),
      client: {
        baseUrl: "https://example.org",
@@ -144,7 +140,6 @@ describe("LocalTransport", () => {
    const { advertised$, active$ } = createLocalTransport$({
      scope: testScope(),
      roomId: "!room:example.org",
-      useOldestMember: false,
      memberships$: constant(new Epoch<CallMembership[]>([])),
      client: {
        // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -185,127 +180,6 @@ describe("LocalTransport", () => {
    });
  });

-  describe("oldest member mode", () => {
-    const aliceTransport: LivekitTransportConfig = {
-      type: "livekit",
-      livekit_service_url: "https://alice.example.org",
-    };
-    const bobTransport: LivekitTransportConfig = {
-      type: "livekit",
-      livekit_service_url: "https://bob.example.org",
-    };
-    const aliceMembership = mockRtcMembership("@alice:example.org", "AAA", {
-      fociPreferred: [aliceTransport],
-    });
-    const bobMembership = mockRtcMembership("@bob:example.org", "BBB", {
-      fociPreferred: [bobTransport],
-    });
-
-    let openIdSpy: MockInstance<(typeof openIDSFU)["getSFUConfigWithOpenID"]>;
-    beforeEach(() => {
-      openIdSpy = vi
-        .spyOn(openIDSFU, "getSFUConfigWithOpenID")
-        .mockResolvedValue(openIdResponse);
-    });
-
-    it("updates active transport when oldest member changes", async () => {
-      // Initially, Alice is the only member
-      const memberships$ = new BehaviorSubject([aliceMembership]);
-
-      const scope = testScope();
-      const { advertised$, active$ } = createLocalTransport$({
-        scope,
-        roomId: "!example_room_id",
-        useOldestMember: true,
-        memberships$: scope.behavior(memberships$.pipe(trackEpoch())),
-        client: {
-          getDomain: () => "example.org",
-          // eslint-disable-next-line @typescript-eslint/naming-convention
-          _unstable_getRTCTransports: async () => Promise.resolve([]),
-          getOpenIdToken: vi.fn(),
-          getDeviceId: vi.fn(),
-          baseUrl: "https://example.org",
-        },
-        ownMembershipIdentity: ownMemberMock,
-        forceJwtEndpoint: JwtEndpointVersion.Legacy,
-        delayId$: constant("delay_id_mock"),
-      });
-
-      expect(active$.value).toBe(null);
-      await flushPromises();
-      // SFU config should've been fetched
-      expect(openIdSpy).toHaveBeenCalled();
-      // Alice's transport should be active and advertised
-      expect(active$.value?.transport).toStrictEqual(aliceTransport);
-      expect(advertised$.value).toStrictEqual(aliceTransport);
-
-      // Now Bob joins the call, but Alice is still the oldest member
-      openIdSpy.mockClear();
-      memberships$.next([aliceMembership, bobMembership]);
-      await flushPromises();
-      // No new SFU config should've been fetched
-      expect(openIdSpy).not.toHaveBeenCalled();
-      // Alice's transport should still be active and advertised
-      expect(active$.value?.transport).toStrictEqual(aliceTransport);
-      expect(advertised$.value).toStrictEqual(aliceTransport);
-
-      // Now Bob takes Alice's place as the oldest member
-      openIdSpy.mockClear();
-      memberships$.next([bobMembership, aliceMembership]);
-      // Active transport should reset to null until we have Bob's SFU config
-      expect(active$.value).toStrictEqual(null);
-      await flushPromises();
-      // Bob's SFU config should've been fetched
-      expect(openIdSpy).toHaveBeenCalled();
-      // Bob's transport should be active, but Alice's should remain advertised
-      // (since we don't want the change in oldest member to cause a wave of new
-      // state events)
-      expect(active$.value?.transport).toStrictEqual(bobTransport);
-      expect(advertised$.value).toStrictEqual(aliceTransport);
-    });
-
-    it("advertises preferred transport when no other member exists", async () => {
-      // Initially, there are no members
-      const memberships$ = new BehaviorSubject<CallMembership[]>([]);
-
-      const scope = testScope();
-      const { advertised$, active$ } = createLocalTransport$({
-        scope,
-        roomId: "!example_room_id",
-        useOldestMember: true,
-        memberships$: scope.behavior(memberships$.pipe(trackEpoch())),
-        client: {
-          getDomain: () => "example.org",
-          // eslint-disable-next-line @typescript-eslint/naming-convention
-          _unstable_getRTCTransports: async () =>
-            Promise.resolve([aliceTransport]),
-          getOpenIdToken: vi.fn(),
-          getDeviceId: vi.fn(),
-          baseUrl: "https://example.org",
-        },
-        ownMembershipIdentity: ownMemberMock,
-        forceJwtEndpoint: JwtEndpointVersion.Legacy,
-        delayId$: constant("delay_id_mock"),
-      });
-
-      expect(active$.value).toBe(null);
-      await flushPromises();
-      // Our own preferred transport should be advertised
-      expect(advertised$.value).toStrictEqual(aliceTransport);
-      // No transport should be active however (there is still no oldest member)
-      expect(active$.value).toBe(null);
-
-      // Now Bob joins the call and becomes the oldest member
-      memberships$.next([bobMembership]);
-      await flushPromises();
-      // We should still advertise our own preferred transport (to avoid
-      // unnecessary state changes)
-      expect(advertised$.value).toStrictEqual(aliceTransport);
-      // Bob's transport should become active
-      expect(active$.value?.transport).toBe(bobTransport);
-    });
-  });
-
  type LocalTransportProps = Parameters<typeof createLocalTransport$>[0];

  describe("transport configuration mechanisms", () => {
@@ -320,7 +194,6 @@ describe("LocalTransport", () => {
        ownMembershipIdentity: ownMemberMock,
        scope: testScope(),
        roomId: "!example_room_id",
-        useOldestMember: false,
        forceJwtEndpoint: JwtEndpointVersion.Legacy,
        delayId$: constant(null),
        memberships$: constant(new Epoch<CallMembership[]>([])),
@@ -433,7 +306,6 @@ describe("LocalTransport", () => {
        scope: testScope(),
        ownMembershipIdentity: ownMemberMock,
        roomId: "!example_room_id",
-        useOldestMember: false,
        forceJwtEndpoint: JwtEndpointVersion.Legacy,
        delayId$: constant(null),
        memberships$: constant(new Epoch<CallMembership[]>([])),
@@ -473,7 +345,6 @@ describe("LocalTransport", () => {
      ownMembershipIdentity: ownMemberMock,
      roomId: "!example_room_id",
      // We want multi-sdu
-      useOldestMember: false,
      forceJwtEndpoint: JwtEndpointVersion.Legacy,
      delayId$: delayId$,
      memberships$: constant(new Epoch<CallMembership[]>([])),
--- a/src/state/CallViewModel/localMember/LocalTransport.ts
+++ b/src/state/CallViewModel/localMember/LocalTransport.ts
@@ -7,23 +7,16 @@ Please see LICENSE in the repository root for full details.

 import {
  type CallMembership,
-  isLivekitTransportConfig,
  type LivekitTransportConfig,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { type MatrixClient } from "matrix-js-sdk";
 import {
-  catchError,
  combineLatest,
  distinctUntilChanged,
-  first,
  from,
  map,
-  merge,
-  type Observable,
  of,
-  startWith,
  switchMap,
-  tap,
 } from "rxjs";
 import { logger as rootLogger, type Logger } from "matrix-js-sdk/lib/logger";
 import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
@@ -47,8 +40,7 @@ import { RtcTransportAutoDiscovery } from "./RtcTransportAutoDiscovery.ts";

 /*
 * It figures out “which LiveKit focus URL/alias the local user should use,”
- * optionally aligning with the oldest member, and ensures the SFU path is primed
- * before advertising that choice.
+ * and ensures the SFU path is primed before advertising that choice.
 */
 interface Props {
  scope: ObservableScope;
@@ -61,7 +53,6 @@ interface Props {
    OpenIDClientParts;
  // Used by the jwt service to create the livekit room and compute the livekit alias.
  roomId: string;
-  useOldestMember: boolean;
  forceJwtEndpoint: JwtEndpointVersion;
  delayId$: Behavior<string | null>;
 }
@@ -119,8 +110,6 @@ export interface LocalTransport {
 /**
 * Connects to the JWT service and determines the transports that the local member should use.
 *
- * @prop useOldestMember Whether to use the same transport as the oldest member.
- * This will only update once the first oldest member appears. Will not recompute if the oldest member leaves.
 * @prop useOldJwtEndpoint Whether to set forceOldJwtEndpoint on the returned transport and to use the old JWT endpoint.
 * This is used when the connection manager needs to know if it has to use the legacy endpoint which implies a string concatenated rtcBackendIdentity.
 * (which is expected for non sticky event based rtc member events)
@@ -133,18 +122,10 @@ export const createLocalTransport$ = ({
  ownMembershipIdentity,
  client,
  roomId,
-  useOldestMember,
  forceJwtEndpoint,
  delayId$,
 }: Props): LocalTransport => {
  const logger = rootLogger.getChild("[LocalTransport]");
-  // The LiveKit transport in use by the oldest RTC membership. `null` when the
-  // oldest member has no such transport.
-  const oldestMemberTransport$ = observerOldestMembership$(
-    scope,
-    memberships$,
-    logger,
-  );

  const transportDiscovery = new RtcTransportAutoDiscovery({
    client: client,
@@ -203,19 +184,6 @@ export const createLocalTransport$ = ({
    }),
  );

-  if (useOldestMember) {
-    return observeLocalTransportForOldestMembership(
-      scope,
-      oldestMemberTransport$,
-      preferredTransport$,
-      client,
-      ownMembershipIdentity,
-      roomId,
-      logger,
-    );
-  }
-
-  // --- Multi-SFU mode ---
  // Always publish on and advertise the preferred transport.
  return {
    advertised$: scope.behavior(
@@ -243,47 +211,6 @@ export const createLocalTransport$ = ({
  };
 };

-/**
- * Observes the oldest member in the room and returns the transport that it uses if it is a livekit transport.
- * @param scope - The observable scope.
- * @param memberships$ - The observable of the call's memberships.'
- */
-function observerOldestMembership$(
-  scope: ObservableScope,
-  memberships$: Behavior<Epoch<CallMembership[]>>,
-  logger: Logger,
-): Behavior<LivekitTransportConfig | null> {
-  return scope.behavior<LivekitTransportConfig | null>(
-    memberships$.pipe(
-      map((memberships) => {
-        const oldestMember = memberships.value[0];
-        if (oldestMember === undefined) {
-          logger.info("Oldest member: not found");
-          return null;
-        }
-        const transport = oldestMember.getTransport(oldestMember);
-        if (transport === undefined) {
-          logger.warn(
-            `Oldest member: ${oldestMember.userId}|${oldestMember.deviceId}|${oldestMember.memberId} has no transport`,
-          );
-          return null;
-        }
-        if (!isLivekitTransportConfig(transport)) {
-          logger.warn(
-            `Oldest member: ${oldestMember.userId}|${oldestMember.deviceId}|${oldestMember.memberId} has invalid transport`,
-          );
-          return null;
-        }
-        logger.info(
-          "Oldest member: ${oldestMember.userId}|${oldestMember.deviceId}|${oldestMember.memberId} has valid transport",
-        );
-        return transport;
-      }),
-      distinctUntilChanged(areLivekitTransportsEqual),
-    ),
-  );
-}
-
 /**
 *  Utility to ensure the user can authenticate with the SFU.
 *  We will call `getSFUConfigWithOpenID` once per transport here as it's our
@@ -331,85 +258,6 @@ async function doOpenIdAndJWTFromUrl(
  };
 }

-function observeLocalTransportForOldestMembership(
-  scope: ObservableScope,
-  oldestMemberTransport$: Behavior<LivekitTransportConfig | null>,
-  preferredTransport$: Observable<LocalTransportWithSFUConfig>,
-  client: Pick<
-    MatrixClient,
-    "getDomain" | "baseUrl" | "_unstable_getRTCTransports"
-  > &
-    OpenIDClientParts,
-  ownMembershipIdentity: CallMembershipIdentityParts,
-  roomId: string,
-  logger: Logger,
-): LocalTransport {
-  // Ensure we can authenticate with the SFU.
-  const authenticatedOldestMemberTransport$ = oldestMemberTransport$.pipe(
-    switchMap((transport) => {
-      // Oldest member not available -we are first- (or invalid SFU config).
-      if (transport === null) return of(null);
-
-      // Whenever there is transport change we want to revert
-      // to no transport while we do the authentication.
-      // So do a from(promise) here to be able to startWith(null)
-      return from(
-        doOpenIdAndJWTFromUrl(
-          transport,
-          JwtEndpointVersion.Legacy,
-          ownMembershipIdentity,
-          roomId,
-          client,
-          undefined,
-          logger,
-        ),
-      ).pipe(
-        catchError((e: unknown) => {
-          logger.error(
-            `Failed to authenticate to transport ${transport.livekit_service_url}`,
-            e,
-          );
-          throw mapAuthErrorToUserFriendlyError(e);
-        }),
-        startWith(null),
-      );
-    }),
-  );
-
-  // --- Oldest member mode ---
-  return {
-    // Never update the transport that we advertise in our membership. Just
-    // take the first valid oldest member or preferred transport that we learn
-    // about, and stick with that. This avoids unnecessary SFU hops and room
-    // state changes.
-    advertised$: scope.behavior(
-      merge(
-        authenticatedOldestMemberTransport$.pipe(
-          map((t) => t?.transport ?? null),
-        ),
-        preferredTransport$.pipe(map((t) => t.transport)),
-      ).pipe(
-        first((t) => t !== null),
-        tap((t) =>
-          logger.info(`Advertise transport: ${t.livekit_service_url}`),
-        ),
-      ),
-      null,
-    ),
-    // Publish on the transport used by the oldest member.
-    active$: scope.behavior(
-      authenticatedOldestMemberTransport$.pipe(
-        tap((t) =>
-          logger.info(
-            `Publish on transport: ${t?.transport.livekit_service_url}`,
-          ),
-        ),
-      ),
-      null,
-    ),
-  };
-}
-
 function mapAuthErrorToUserFriendlyError(e: unknown): Error {
  if (
    e instanceof FailToGetOpenIdToken ||
--- a/src/state/CallViewModel/remoteMembers/Connection.ts
+++ b/src/state/CallViewModel/remoteMembers/Connection.ts
@@ -36,7 +36,6 @@ import {
  SFURoomCreationRestrictedError,
  UnknownCallError,
 } from "../../../utils/errors.ts";
-import { type JwtEndpointVersion } from "../localMember/LocalTransport.ts";

 export interface ConnectionOpts {
  /**
@@ -44,11 +43,6 @@ export interface ConnectionOpts {
   * On top the local transport will send additional data to the jwt server to use delayed event delegation.
   */
  existingSFUConfig?: SFUConfig;
-  /**
-   * For local connections that use the oldest member pattern. here we have not prefetched the sfuConfig
-   * and hence we need to let the connection do the jwt token fetching.
-   */
-  forceJwtEndpoint?: JwtEndpointVersion;
  /** The identity parts to use on this connection */
  ownMembershipIdentity: CallMembershipIdentityParts;
  /** The media transport to connect to. */
--- a/src/state/CallViewModelWidget.test.ts
+++ b/src/state/CallViewModelWidget.test.ts
@@ -35,11 +35,7 @@ vi.mock("../widget", () => ({
  },
 }));

-it.each([
-  [MatrixRTCMode.Legacy],
-  [MatrixRTCMode.Compatibility],
-  [MatrixRTCMode.Matrix_2_0],
-])(
+it.each([[MatrixRTCMode.Compatibility], [MatrixRTCMode.Matrix_2_0]])(
  "expect leave when ElementWidgetActions.HangupCall is called (%s mode)",
  async (mode) => {
    const pr = Promise.withResolvers<string>();
--- a/src/state/layout-types.test.ts
+++ b/src/state/layout-types.test.ts
@@ -0,0 +1,74 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { test, expect } from "vitest";
+import {
+  type Alignment,
+  layoutShallowEquals,
+  type Layout,
+} from "./layout-types";
+import {
+  type SpotlightTileViewModel,
+  type GridTileViewModel,
+} from "./TileViewModel";
+import { BehaviorSubject } from "rxjs";
+
+const spotlightTile = {} as unknown as SpotlightTileViewModel;
+const gridTile = {} as unknown as GridTileViewModel;
+const pipAlignment$ = new BehaviorSubject<Alignment>({
+  inline: "end",
+  block: "end",
+});
+
+const spotlightExpanded: Layout = {
+  type: "spotlight-expanded",
+  spotlight: spotlightTile,
+  pipAlignment$,
+};
+
+const spotlightPortrait: Layout = {
+  type: "spotlight-portrait",
+  spotlight: spotlightTile,
+  grid: [gridTile],
+  setVisibleTiles: () => {},
+};
+
+test("layoutShallowEquals considers a layout to be equal to its shallow clone", () =>
+  expect(layoutShallowEquals(spotlightExpanded, { ...spotlightExpanded })).toBe(
+    true,
+  ));
+
+test("layoutShallowEquals detects a missing key", () => {
+  expect(
+    layoutShallowEquals(spotlightExpanded, {
+      ...spotlightExpanded,
+      pip: gridTile,
+    }),
+  ).toBe(false);
+  expect(
+    layoutShallowEquals(
+      { ...spotlightExpanded, pip: gridTile },
+      spotlightExpanded,
+    ),
+  ).toBe(false);
+});
+
+test("layoutShallowEquals considers grid arrays with equal contents to be equal", () =>
+  expect(
+    layoutShallowEquals(spotlightPortrait, {
+      ...spotlightPortrait,
+      grid: [...spotlightPortrait.grid],
+    }),
+  ).toBe(true));
+
+test("layoutShallowEquals detects grid arrays with different contents", () =>
+  expect(
+    layoutShallowEquals(spotlightPortrait, {
+      ...spotlightPortrait,
+      grid: [...spotlightPortrait.grid, gridTile],
+    }),
+  ).toBe(false));
--- a/src/state/layout-types.ts
+++ b/src/state/layout-types.ts
@@ -16,6 +16,7 @@ import {
  type SpotlightTileViewModel,
 } from "./TileViewModel.ts";
 import { type Behavior } from "./Behavior.ts";
+import { shallowEquals as arrayShallowEquals } from "../utils/array.ts";

 export interface GridLayoutMedia {
  type: "grid";
@@ -140,3 +141,30 @@ export type Layout =
  | OneOnOneDesktopLayout
  | OneOnOneMobileLayout
  | PipLayout;
+
+/**
+ * Tests whether the top-level properties and array elements of layout `a` are
+ * equal to those of layout `b`. Useful for deduping redundant layout updates.
+ */
+export function layoutShallowEquals(a: Layout, b: Layout): boolean {
+  // If a and b have the same number of keys and every key in a is also in b,
+  // then they have the same keys.
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+
+  for (const key of aKeys) {
+    if (!(key in b)) return false;
+
+    // Now check that they have the same values.
+    const aValue = (a as any)[key];
+    const bValue = (b as any)[key];
+    if (Array.isArray(aValue) && Array.isArray(bValue)) {
+      // Special case for arrays so we can detect when the grid tiles arrays are
+      // essentially the same.
+      if (!arrayShallowEquals(aValue, bValue)) return false;
+    } else if (aValue !== bValue) return false;
+  }
+
+  return true;
+}
--- a/src/state/media/UserMediaViewModel.ts
+++ b/src/state/media/UserMediaViewModel.ts
@@ -33,7 +33,6 @@ import { type RemoteUserMediaViewModel } from "./RemoteUserMediaViewModel";
 import { type ObservableScope } from "../ObservableScope";
 import { showConnectionStats } from "../../settings/settings";
 import { observeRtpStreamStats$ } from "./observeRtpStreamStats";
-import { videoFit$, videoSizeFromParticipant$ } from "../../utils/videoFit.ts";

 /**
 * A participant's user media (i.e. their microphone and camera feed).
@@ -47,7 +46,6 @@ export interface BaseUserMediaViewModel extends BaseMemberMediaViewModel {
  speaking$: Behavior<boolean>;
  audioEnabled$: Behavior<boolean>;
  videoEnabled$: Behavior<boolean>;
-  videoFit$: Behavior<"cover" | "contain">;
  videoOrientation$: Behavior<"landscape" | "portrait">;
  toggleCropVideo: () => void;
  /**
@@ -63,12 +61,9 @@ export interface BaseUserMediaViewModel extends BaseMemberMediaViewModel {
    RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats | undefined
  >;
  /**
-   * Set the target dimensions of the HTML element (final dimension after anim).
-   * This can be used to determine the best video fit (fit to frame / keep ratio).
-   * @param targetWidth - The target width of the HTML element displaying the video.
-   * @param targetHeight - The target height of the HTML element displaying the video.
+   * Set the aspect ratio of the video track to determine the orientation.
   */
-  setTargetDimensions: (targetWidth: number, targetHeight: number) => void;
+  setVideoAspectRatio: (ratio: number) => void;
 }

 export interface BaseUserMediaInputs extends Omit<
@@ -98,14 +93,8 @@ export function createBaseUserMedia(
    ),
  );
  const toggleCropVideo$ = new Subject<void>();
+  const videoAspectRatio$ = new BehaviorSubject(NaN);

-  // The target size of the video element, used to determine the best video fit.
-  // The target size is the final size of the HTML element after any animations have completed.
-  const targetSize$ = new BehaviorSubject<
-    { width: number; height: number } | undefined
-  >(undefined);
-
-  const videoSize$ = videoSizeFromParticipant$(participant$);
  return {
    ...createMemberMedia(scope, {
      ...inputs,
@@ -132,13 +121,11 @@ export function createBaseUserMedia(
      media$.pipe(map((m) => m?.cameraTrack?.isMuted === false)),
    ),
    videoOrientation$: scope.behavior(
-      videoSize$.pipe(
-        map((s) => (s ? s.width / s.height : 1)),
+      videoAspectRatio$.pipe(
        map((aspect) => (aspect > 1 ? "landscape" : "portrait")),
      ),
      "portrait",
    ),
-    videoFit$: videoFit$(scope, videoSize$, targetSize$),
    toggleCropVideo: () => toggleCropVideo$.next(),
    rtcBackendIdentity,
    handRaised$,
@@ -162,8 +149,6 @@ export function createBaseUserMedia(
        return observeRtpStreamStats$(p, Track.Source.Camera, statsType);
      }),
    ),
-    setTargetDimensions: (targetWidth: number, targetHeight: number): void => {
-      targetSize$.next({ width: targetWidth, height: targetHeight });
-    },
+    setVideoAspectRatio: (ratio) => videoAspectRatio$.next(ratio),
  };
 }
--- a/src/state/media/observeRtpStreamStats.ts
+++ b/src/state/media/observeRtpStreamStats.ts
@@ -19,10 +19,15 @@ import {
  startWith,
  switchMap,
  map,
+  share,
 } from "rxjs";

 import { observeTrackReference$ } from "../observeTrackReference";

+// Use a shared timer for all the stats observers so that we don't clog up the
+// event loop with hundreds of timers in large calls
+const refreshStats$ = interval(1000).pipe(share());
+
 export function observeRtpStreamStats$(
  participant: Participant,
  source: Track.Source,
@@ -32,9 +37,7 @@ export function observeRtpStreamStats$(
 > {
  return combineLatest([
    observeTrackReference$(participant, source),
-    // The update frequency is high because we use this value to update the PiP orientation and the fit/fill video tile props based on that
-    // We want it to be responsive. For just the debug tools 1s would be sufficient.
-    interval(350).pipe(startWith(0)),
+    refreshStats$.pipe(startWith(0)),
  ]).pipe(
    switchMap(async ([trackReference]) => {
      const track = trackReference?.publication?.track;
@@ -69,12 +72,3 @@ export function observeInboundRtpStreamStats$(
    map((x) => x as RTCInboundRtpStreamStats | undefined),
  );
 }
-
-export function observeOutboundRtpStreamStats$(
-  participant: Participant,
-  source: Track.Source,
-): Observable<RTCOutboundRtpStreamStats | undefined> {
-  return observeRtpStreamStats$(participant, source, "outbound-rtp").pipe(
-    map((x) => x as RTCOutboundRtpStreamStats | undefined),
-  );
-}
--- a/src/tile/GridTile.tsx
+++ b/src/tile/GridTile.tsx
@@ -11,7 +11,6 @@ import {
  type ReactNode,
  type Ref,
  useCallback,
-  useEffect,
  useRef,
  useState,
  useMemo,
@@ -92,7 +91,6 @@ const RingingMediaTile: FC<RingingMediaTileProps> = ({
      }
      avatarStyle="translucent"
      videoEnabled={false}
-      videoFit="cover"
      mirror={false}
      {...props}
    />
@@ -144,19 +142,11 @@ const UserMediaTileInner: FC<UserMediaTileProps & { menu: ReactNode }> = ({
  const audioEnabled = useBehavior(vm.audioEnabled$);
  const videoEnabled = useBehavior(vm.videoEnabled$);
  const speaking = useBehavior(vm.speaking$);
-  const videoFit = useBehavior(vm.videoFit$);

  const rtcBackendIdentity = vm.rtcBackendIdentity;
  const handRaised = useBehavior(vm.handRaised$);
  const reaction = useBehavior(vm.reaction$);

-  // Whenever bounds change, inform the viewModel
-  useEffect(() => {
-    if (targetWidth > 0 && targetHeight > 0) {
-      vm.setTargetDimensions(targetWidth, targetHeight);
-    }
-  }, [targetWidth, targetHeight, vm]);
-
  const AudioIcon = playbackMuted
    ? VolumeOffSolidIcon
    : audioEnabled
@@ -195,7 +185,6 @@ const UserMediaTileInner: FC<UserMediaTileProps & { menu: ReactNode }> = ({
      userId={vm.userId}
      unencryptedWarning={unencryptedWarning}
      videoEnabled={videoEnabled}
-      videoFit={videoFit}
      className={classNames(className, styles.tile, {
        [styles.speaking]: showSpeaking,
        [styles.handRaised]: !showSpeaking && handRaised,
@@ -231,6 +220,7 @@ const UserMediaTileInner: FC<UserMediaTileProps & { menu: ReactNode }> = ({
      raisedHandOnClick={raisedHandOnClick}
      waitingForMedia={waitingForMedia}
      focusUrl={focusUrl}
+      setVideoAspectRatio={vm.setVideoAspectRatio}
      audioStreamStats={audioStreamStats}
      videoStreamStats={videoStreamStats}
      rtcBackendIdentity={rtcBackendIdentity}
--- a/src/tile/MediaView.test.tsx
+++ b/src/tile/MediaView.test.tsx
@@ -33,7 +33,6 @@ describe("MediaView", () => {
  const baseProps: ComponentProps<typeof MediaView> = {
    displayName: "some name",
    videoEnabled: true,
-    videoFit: "contain",
    targetWidth: 300,
    targetHeight: 200,
    mirror: false,
--- a/src/tile/MediaView.tsx
+++ b/src/tile/MediaView.tsx
@@ -7,7 +7,13 @@ Please see LICENSE in the repository root for full details.

 import { type TrackReferenceOrPlaceholder } from "@livekit/components-core";
 import { animated } from "@react-spring/web";
-import { type FC, type ComponentProps, type ReactNode } from "react";
+import {
+  type FC,
+  type ComponentProps,
+  type ReactNode,
+  type SyntheticEvent,
+  useState,
+} from "react";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import { VideoTrack } from "@livekit/components-react";
@@ -26,6 +32,7 @@ import { type ReactionOption } from "../reactions";
 import { ReactionIndicator } from "../reactions/ReactionIndicator";
 import { RTCConnectionStats } from "../RTCConnectionStats";
 import videoPlaceholder from "../graphics/video-placeholder.gif";
+import { autoVideoFit } from "../utils/videoFit";

 interface Props extends ComponentProps<typeof animated.div> {
  className?: string;
@@ -33,7 +40,11 @@ interface Props extends ComponentProps<typeof animated.div> {
  targetWidth: number;
  targetHeight: number;
  video: TrackReferenceOrPlaceholder | undefined;
-  videoFit: "cover" | "contain";
+  /**
+   * How to fit the video content inside the tile. When undefined, MediaView
+   * chooses a smart default based on the aspect ratios of the tile and video.
+   */
+  videoFit?: "cover" | "contain";
  mirror: boolean;
  soundWaves?: boolean;
  userId: string;
@@ -55,8 +66,15 @@ interface Props extends ComponentProps<typeof animated.div> {
  audioStreamStats?: RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats;
  videoStreamStats?: RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats;
  rtcBackendIdentity?: string;
-  // The focus url, mainly for debugging purposes
+  /**
+   * The focus url, mainly for debugging purposes.
+   */
  focusUrl?: string;
+  /**
+   * Called whenever the aspect ratio of the video content becomes known or
+   * otherwise changes.
+   */
+  setVideoAspectRatio?: (ratio: number) => void;
 }

 export const MediaView: FC<Props> = ({
@@ -89,6 +107,7 @@ export const MediaView: FC<Props> = ({
  videoStreamStats,
  rtcBackendIdentity,
  focusUrl,
+  setVideoAspectRatio: setTheirVideoAspectRatio,
  ...props
 }) => {
  const { t } = useTranslation();
@@ -100,6 +119,22 @@ export const MediaView: FC<Props> = ({
      (soundWaves === undefined ? 0.5 : 0.38),
  );

+  const [videoAspectRatio, setOurVideoAspectRatio] = useState<number>(NaN);
+  const tileAspectRatio = targetWidth / targetHeight;
+
+  // Propagate video dimensions
+  const setVideoAspectRatio = (ratio: number) => {
+    setOurVideoAspectRatio(ratio);
+    setTheirVideoAspectRatio?.(ratio);
+  };
+  const videoRef = (el: HTMLVideoElement | null) => {
+    if (el !== null) setVideoAspectRatio(el.videoWidth / el.videoHeight);
+  };
+  const onResize = (ev: SyntheticEvent<HTMLVideoElement>) =>
+    setVideoAspectRatio(
+      ev.currentTarget.videoWidth / ev.currentTarget.videoHeight,
+    );
+
  const warnings = unencryptedWarning && (
    <Tooltip
      label={t("common.unencrypted")}
@@ -126,7 +161,9 @@ export const MediaView: FC<Props> = ({
      ref={ref}
      data-testid="videoTile"
      data-video-enabled={video && videoEnabled}
-      data-video-fit={videoFit}
+      data-video-fit={
+        videoFit ?? autoVideoFit(videoAspectRatio, tileAspectRatio)
+      }
      data-background={background}
      {...props}
    >
@@ -158,6 +195,8 @@ export const MediaView: FC<Props> = ({
            // Set the placeholder to a small transparent image. (On Android web
            // views the default poster image is particularly ugly.)
            poster={videoPlaceholder}
+            ref={videoRef}
+            onResize={onResize}
          />
        )}
      </div>
--- a/src/tile/SpotlightTile.tsx
+++ b/src/tile/SpotlightTile.tsx
@@ -68,6 +68,7 @@ interface SpotlightItemBaseProps {
  background: "solid" | "transparent";
  focusable: boolean;
  "aria-hidden"?: boolean;
+  setVideoAspectRatio?: (ratio: number) => void;
 }

 interface SpotlightMemberMediaItemBaseProps extends SpotlightItemBaseProps {
@@ -77,7 +78,6 @@ interface SpotlightMemberMediaItemBaseProps extends SpotlightItemBaseProps {
 }

 interface SpotlightUserMediaItemBaseProps extends SpotlightMemberMediaItemBaseProps {
-  videoFit: "contain" | "cover";
  videoEnabled: boolean;
  soundWaves: boolean | undefined;
 }
@@ -120,20 +120,12 @@ const SpotlightUserMediaItem: FC<SpotlightUserMediaItemProps> = ({
  targetHeight,
  ...props
 }) => {
-  const videoFit = useBehavior(vm.videoFit$);
  const videoEnabled = useBehavior(vm.videoEnabled$);
  const speaking = useBehavior(vm.speaking$);

-  // Whenever target bounds change, inform the viewModel
-  useEffect(() => {
-    if (targetWidth > 0 && targetHeight > 0) {
-      vm.setTargetDimensions(targetWidth, targetHeight);
-    }
-  }, [targetWidth, targetHeight, vm]);
-
  const baseProps: SpotlightUserMediaItemBaseProps &
    RefAttributes<HTMLDivElement> = {
-    videoFit,
+    setVideoAspectRatio: vm.setVideoAspectRatio,
    videoEnabled,
    soundWaves: props.background === "transparent" ? speaking : undefined,
    targetWidth,
@@ -227,7 +219,6 @@ const SpotlightRingingMediaItem: FC<SpotlightRingingMediaItemProps> = ({
      }
      avatarStyle="translucent"
      videoEnabled={false}
-      videoFit="cover"
      mirror={false}
      {...props}
    />
--- a/src/utils/test-viewmodel.ts
+++ b/src/utils/test-viewmodel.ts
@@ -174,7 +174,7 @@ export function getBasicCallViewModelEnvironment(
          setE2EEEnabled: async () => Promise.resolve(),
        }),
      connectionState$: constant(ConnectionState.Connected),
-      matrixRTCMode$: constant(MatrixRTCMode.Legacy),
+      matrixRTCMode$: constant(MatrixRTCMode.Compatibility),
      ...callViewModelOptions,
    },
    handRaisedSubject$,
--- a/src/utils/test.ts
+++ b/src/utils/test.ts
@@ -237,7 +237,7 @@ export function mockRtcMembership(
      fociPreferred: [exampleTransport],
      focusActive: {
        type: "livekit" as const,
-        focus_selection: "oldest_membership" as const,
+        focus_selection: "multi_sfu" as const,
      },
      callId: "",
      membership: {},
@@ -463,9 +463,6 @@ export class MockRTCSession extends TypedEventEmitter<
    session.reemitEncryptionKeys = vi
      .fn<() => void>()
      .mockReturnValue(undefined);
-    session.getOldestMembership = vi
-      .fn<() => CallMembership | undefined>()
-      .mockReturnValue(this.memberships[0]);

    return session;
  }
--- a/src/utils/videoFit.test.ts
+++ b/src/utils/videoFit.test.ts
@@ -5,259 +5,106 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */

-import { describe, expect, test, vi } from "vitest";
-import {
-  LocalTrack,
-  type LocalTrackPublication,
-  type RemoteTrackPublication,
-  Track,
-} from "livekit-client";
+import { describe, expect, test } from "vitest";

-import { ObservableScope } from "../state/ObservableScope";
-import { videoFit$, videoSizeFromParticipant$ } from "./videoFit";
-import { constant } from "../state/Behavior";
-import {
-  flushPromises,
-  mockLocalParticipant,
-  mockRemoteParticipant,
-} from "./test";
+import { autoVideoFit } from "./videoFit";

 describe("videoFit$ defaults", () => {
  test.each([
    {
-      videoSize: { width: 1920, height: 1080 },
-      tileSize: undefined,
+      videoAspectRatio: 1920 / 1080,
+      tileAspectRatio: NaN,
    },
    {
-      videoSize: { width: 1080, height: 1920 },
-      tileSize: undefined,
+      videoAspectRatio: 1080 / 1920,
+      tileAspectRatio: NaN,
    },
    {
-      videoSize: undefined,
-      tileSize: { width: 1920, height: 1080 },
+      videoAspectRatio: NaN,
+      tileAspectRatio: 1920 / 1080,
    },
    {
-      videoSize: undefined,
-      tileSize: { width: 1080, height: 1920 },
+      videoAspectRatio: NaN,
+      tileAspectRatio: 1080 / 1920,
    },
  ])(
-    "videoFit$ returns `cover` when videoSize is $videoSize and tileSize is $tileSize",
-    ({ videoSize, tileSize }) => {
-      const scope = new ObservableScope();
-      const videoSize$ = constant(videoSize);
-      const tileSize$ = constant(tileSize);
-
-      const fit = videoFit$(scope, videoSize$, tileSize$);
-      expect(fit.value).toBe("cover");
-    },
+    "videoFit$ returns `cover` when videoAspectRatio is $videoAspectRatio and tileAspectRatio is $tileAspectRatio",
+    ({ videoAspectRatio, tileAspectRatio }) =>
+      expect(autoVideoFit(videoAspectRatio, tileAspectRatio)).toBe("cover"),
  );
 });

-const VIDEO_480_L = { width: 640, height: 480 };
-const VIDEO_720_L = { width: 1280, height: 720 };
-const VIDEO_1080_L = { width: 1920, height: 1080 };
+const VIDEO_480_L = 640 / 480;
+const VIDEO_720_L = 1280 / 720;
+const VIDEO_1080_L = 1920 / 1080;

 // Some sizes from real world testing, which don't match the standard video sizes exactly
-const TILE_SIZE_1_L = { width: 180, height: 135 };
-const TILE_SIZE_3_P = { width: 379, height: 542 };
-const TILE_SIZE_4_L = { width: 957, height: 542 };
+const TILE_SIZE_1_L = 180 / 135;
+const TILE_SIZE_3_P = 379 / 542;
+const TILE_SIZE_4_L = 957 / 542;
 // This is the size of an iPhone Xr in portrait mode
-const TILE_SIZE_5_P = { width: 414, height: 896 };
+const TILE_SIZE_5_P = 414 / 896;

-export function invertSize(size: { width: number; height: number }): {
-  width: number;
-  height: number;
-} {
-  return {
-    width: size.height,
-    height: size.width,
-  };
+function inverse(ratio: number): number {
+  return 1 / ratio;
 }

 test.each([
  {
-    videoSize: VIDEO_480_L,
-    tileSize: TILE_SIZE_1_L,
+    videoAspectRatio: VIDEO_480_L,
+    tileAspectRatio: TILE_SIZE_1_L,
    expected: "cover",
  },
  {
-    videoSize: invertSize(VIDEO_480_L),
-    tileSize: TILE_SIZE_1_L,
+    videoAspectRatio: inverse(VIDEO_480_L),
+    tileAspectRatio: TILE_SIZE_1_L,
    expected: "contain",
  },
  {
-    videoSize: VIDEO_720_L,
-    tileSize: TILE_SIZE_4_L,
+    videoAspectRatio: VIDEO_720_L,
+    tileAspectRatio: TILE_SIZE_4_L,
    expected: "cover",
  },
  {
-    videoSize: invertSize(VIDEO_720_L),
-    tileSize: TILE_SIZE_4_L,
+    videoAspectRatio: inverse(VIDEO_720_L),
+    tileAspectRatio: TILE_SIZE_4_L,
    expected: "contain",
  },
  {
-    videoSize: invertSize(VIDEO_1080_L),
-    tileSize: TILE_SIZE_3_P,
+    videoAspectRatio: inverse(VIDEO_1080_L),
+    tileAspectRatio: TILE_SIZE_3_P,
    expected: "cover",
  },
  {
-    videoSize: VIDEO_1080_L,
-    tileSize: TILE_SIZE_5_P,
+    videoAspectRatio: VIDEO_1080_L,
+    tileAspectRatio: TILE_SIZE_5_P,
    expected: "contain",
  },
  {
-    videoSize: invertSize(VIDEO_1080_L),
-    tileSize: TILE_SIZE_5_P,
+    videoAspectRatio: inverse(VIDEO_1080_L),
+    tileAspectRatio: TILE_SIZE_5_P,
    expected: "cover",
  },
  {
    // square video
-    videoSize: { width: 400, height: 400 },
-    tileSize: VIDEO_480_L,
+    videoAspectRatio: 400 / 400,
+    tileAspectRatio: VIDEO_480_L,
    expected: "contain",
  },
  {
    // Should default to cover if the initial size is 0:0.
    // Or else it will cause a flash of "contain" mode until the real size is loaded, which can be jarring.
-    videoSize: VIDEO_480_L,
-    tileSize: { width: 0, height: 0 },
+    videoAspectRatio: VIDEO_480_L,
+    tileAspectRatio: 0 / 0,
    expected: "cover",
  },
  {
-    videoSize: { width: 0, height: 0 },
-    tileSize: VIDEO_480_L,
+    videoAspectRatio: 0 / 0,
+    tileAspectRatio: VIDEO_480_L,
    expected: "cover",
  },
 ])(
-  "videoFit$ returns $expected when videoSize is $videoSize and tileSize is $tileSize",
-  ({ videoSize, tileSize, expected }) => {
-    const scope = new ObservableScope();
-    const videoSize$ = constant(videoSize);
-    const tileSize$ = constant(tileSize);
-
-    const fit = videoFit$(scope, videoSize$, tileSize$);
-    expect(fit.value).toBe(expected);
-  },
+  "videoFit$ returns $expected when videoAspectRatio is $videoAspectRatio and tileAspectRatio is $tileAspectRatio",
+  ({ videoAspectRatio, tileAspectRatio, expected }) =>
+    expect(autoVideoFit(videoAspectRatio, tileAspectRatio)).toBe(expected),
 );
-
-describe("extracting video size from participant stats", () => {
-  function createMockRtpStats(
-    isInbound: boolean,
-    props: Partial<RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats> = {},
-  ): RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats {
-    const baseStats = {
-      id: "mock-stats-id",
-      timestamp: Date.now(),
-      type: isInbound ? "inbound-rtp" : "outbound-rtp",
-      kind: "video",
-      ...props,
-    };
-
-    return baseStats as RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats;
-  }
-
-  test("get stats for local user", async () => {
-    const localParticipant = mockLocalParticipant({
-      identity: "@local:example.org:AAAAAA",
-    });
-
-    const mockReport: RTCStatsReport = new Map([
-      [
-        "OT01V639885149",
-        createMockRtpStats(false, {
-          frameWidth: 1280,
-          frameHeight: 720,
-        }),
-      ],
-    ]);
-
-    const track = {
-      source: Track.Source.Camera,
-      getRTCStatsReport: vi
-        .fn()
-        .mockImplementation(async () => Promise.resolve(mockReport)),
-    } as Partial<LocalTrack> as LocalTrack;
-
-    // Set up the prototype chain (there is an instanceof check in getRTCStatsReport)
-    Object.setPrototypeOf(track, LocalTrack.prototype);
-
-    localParticipant.getTrackPublication = vi
-      .fn()
-      .mockImplementation((source: Track.Source) => {
-        if (source === Track.Source.Camera) {
-          return {
-            track,
-          } as unknown as LocalTrackPublication;
-        } else {
-          return undefined;
-        }
-      });
-
-    const videoDimensions$ = videoSizeFromParticipant$(
-      constant(localParticipant),
-    );
-
-    const publishedDimensions: { width: number; height: number }[] = [];
-    videoDimensions$.subscribe((dimensions) => {
-      if (dimensions) publishedDimensions.push(dimensions);
-    });
-
-    await flushPromises();
-
-    const dimension = publishedDimensions.pop();
-    expect(dimension).toEqual({ width: 1280, height: 720 });
-  });
-
-  test("get stats for remote user", async () => {
-    // vi.useFakeTimers()
-    const remoteParticipant = mockRemoteParticipant({
-      identity: "@bob:example.org:AAAAAA",
-    });
-
-    const mockReport: RTCStatsReport = new Map([
-      [
-        "OT01V639885149",
-        createMockRtpStats(true, {
-          frameWidth: 480,
-          frameHeight: 640,
-        }),
-      ],
-    ]);
-
-    const track = {
-      source: Track.Source.Camera,
-      getRTCStatsReport: vi
-        .fn()
-        .mockImplementation(async () => Promise.resolve(mockReport)),
-    } as Partial<LocalTrack> as LocalTrack;
-
-    // Set up the prototype chain (there is an instanceof check in getRTCStatsReport)
-    Object.setPrototypeOf(track, LocalTrack.prototype);
-
-    remoteParticipant.getTrackPublication = vi
-      .fn()
-      .mockImplementation((source: Track.Source) => {
-        if (source === Track.Source.Camera) {
-          return {
-            track,
-          } as unknown as RemoteTrackPublication;
-        } else {
-          return undefined;
-        }
-      });
-
-    const videoDimensions$ = videoSizeFromParticipant$(
-      constant(remoteParticipant),
-    );
-
-    const publishedDimensions: { width: number; height: number }[] = [];
-    videoDimensions$.subscribe((dimensions) => {
-      if (dimensions) publishedDimensions.push(dimensions);
-    });
-
-    await flushPromises();
-
-    const dimension = publishedDimensions.pop();
-    expect(dimension).toEqual({ width: 480, height: 640 });
-  });
-});
--- a/src/utils/videoFit.ts
+++ b/src/utils/videoFit.ts
@@ -5,107 +5,27 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */

-import { combineLatest, map, type Observable, of, switchMap } from "rxjs";
-import {
-  type LocalParticipant,
-  type RemoteParticipant,
-  Track,
-} from "livekit-client";
-
-import { type ObservableScope } from "../state/ObservableScope.ts";
-import { type Behavior } from "../state/Behavior.ts";
-import {
-  observeInboundRtpStreamStats$,
-  observeOutboundRtpStreamStats$,
-} from "../state/media/observeRtpStreamStats";
-
-type Size = {
-  width: number;
-  height: number;
-};
-
 /**
 * Computes the appropriate video fit mode ("cover" or "contain") based on the aspect ratios of the video and the tile.
 * - If the video and tile have the same orientation (both landscape or both portrait), we use "cover" to fill the tile, even if it means cropping.
 * - If the video and tile have different orientations, we use "contain" to ensure the entire video is visible, even if it means letterboxing (black bars).
- * @param scope - the ObservableScope to create the Behavior in
- * @param videoSize$ - an Observable of the video size (width and height) or undefined if the size is not yet known (no data yet received).
- * @param tileSize$ - an Observable of the tile size (width and height) or undefined if the size is not yet known (not yet rendered).
 */
-export function videoFit$(
-  scope: ObservableScope,
-  videoSize$: Observable<Size | undefined>,
-  tileSize$: Observable<Size | undefined>,
-): Behavior<"cover" | "contain"> {
-  const fit$ = combineLatest([videoSize$, tileSize$]).pipe(
-    map(([videoSize, tileSize]) => {
-      if (!videoSize || !tileSize) {
-        // If we don't have the sizes, default to cover to avoid black bars.
-        // This is a reasonable default as it will ensure the video fills the tile, even if it means cropping.
-        return "cover";
-      }
-      if (
-        videoSize.width === 0 ||
-        videoSize.height === 0 ||
-        tileSize.width === 0 ||
-        tileSize.height === 0
-      ) {
-        // If we have invalid sizes (e.g. width or height is 0), default to cover to avoid black bars.
-        return "cover";
-      }
-      const videoAspectRatio = videoSize.width / videoSize.height;
-      const tileAspectRatio = tileSize.width / tileSize.height;
+export function autoVideoFit(
+  videoAspectRatio: number,
+  tileAspectRatio: number,
+): "cover" | "contain" {
+  if (Number.isNaN(videoAspectRatio) || Number.isNaN(tileAspectRatio)) {
+    // If we have invalid sizes (e.g. useMeasure returns 0×0 on an initial render),
+    // default to cover to avoid black bars.
+    return "cover";
+  }

-      // If video is landscape (ratio > 1) and tile is portrait (ratio < 1) or vice versa,
-      // we want to use "contain" (fit) mode to avoid excessive cropping
-      const videoIsLandscape = videoAspectRatio > 1;
-      const tileIsLandscape = tileAspectRatio > 1;
+  // If video is landscape (ratio > 1) and tile is portrait (ratio < 1) or vice versa,
+  // we want to use "contain" (fit) mode to avoid excessive cropping
+  const videoIsLandscape = videoAspectRatio > 1;
+  const tileIsLandscape = tileAspectRatio > 1;

-      // If the orientations are the same, use the cover mode (Preserves the aspect ratio, and the image fills the container.)
-      // If they're not the same orientation, use the contain mode (Preserves the aspect ratio, but the image is letterboxed - black bars- to fit within the container.)
-      return videoIsLandscape === tileIsLandscape ? "cover" : "contain";
-    }),
-  );
-
-  return scope.behavior(fit$, "cover");
-}
-
-/**
- * Helper function to get the video size from a participant.
- * It observes the participant's video track stats and extracts the frame width and height.
- * @param participant$ - an Observable of a LocalParticipant or RemoteParticipant, or null if no participant is selected.
- * @returns an Observable of the video size (width and height) or undefined if the size cannot be determined.
- */
-export function videoSizeFromParticipant$(
-  participant$: Observable<LocalParticipant | RemoteParticipant | null>,
-): Observable<{ width: number; height: number } | undefined> {
-  return participant$
-    .pipe(
-      // If we have a participant, observe their video track stats. If not, return undefined.
-      switchMap((p) => {
-        if (!p) return of(undefined);
-        if (p.isLocal) {
-          return observeOutboundRtpStreamStats$(p, Track.Source.Camera);
-        } else {
-          return observeInboundRtpStreamStats$(p, Track.Source.Camera);
-        }
-      }),
-    )
-    .pipe(
-      // Extract the frame width and height from the stats. If we don't have valid stats, return undefined.
-      map((stats) => {
-        if (!stats) return undefined;
-        if (
-          // For video tracks, frameWidth and frameHeight should be numbers. If they're not, we can't determine the size.
-          typeof stats.frameWidth !== "number" ||
-          typeof stats.frameHeight !== "number"
-        ) {
-          return undefined;
-        }
-        return {
-          width: stats.frameWidth,
-          height: stats.frameHeight,
-        };
-      }),
-    );
+  // If the orientations are the same, use the cover mode (Preserves the aspect ratio, and the image fills the container.)
+  // If they're not the same orientation, use the contain mode (Preserves the aspect ratio, but the image is letterboxed - black bars- to fit within the container.)
+  return videoIsLandscape === tileIsLandscape ? "cover" : "contain";
 }