Merge upstream/livekit into branch

src/state/CallViewModel/CallViewModel.test.ts

@@ -50,6 +50,7 @@ import {
   aliceParticipant,
   aliceRtcMember,
   aliceUserId,
+  bob,
   bobId,
   bobRtcMember,
   local,
@@ -64,7 +65,7 @@ import {
   localParticipant,
   withCallViewModel as withCallViewModelInMode,
 } from "./CallViewModelTestUtils.ts";
-import { MatrixRTCMode } from "../../settings/settings.ts";
+import { MatrixRTCMode } from "../../config/ConfigOptions.ts";
 import { initializeWidget } from "../../widget.ts";
 
 initializeWidget();
@@ -84,6 +85,14 @@ vi.mock("../e2ee/matrixKeyProvider");
 const getUrlParams = vi.hoisted(() => vi.fn(() => ({})));
 vi.mock("../UrlParams", () => ({ getUrlParams }));
 
+const getPlatform = vi.hoisted(() => vi.fn(() => "desktop"));
+vi.mock("../../Platform", () => ({
+  get platform(): string {
+    return getPlatform();
+  },
+  isFirefox: (): boolean => false,
+}));
+
 vi.mock(
   "../state/CallViewModel/localMember/localTransport",
   async (importOriginal) => ({
@@ -133,12 +142,19 @@ export interface SpotlightExpandedLayoutSummary {
   pip?: string;
 }
 
-export interface OneOnOneLayoutSummary {
-  type: "one-on-one";
+export interface OneOnOneLandscapeLayoutSummary {
+  type: "one-on-one-landscape";
   spotlight: string;
   pip: string;
 }
 
+export interface OneOnOnePortraitLayoutSummary {
+  type: "one-on-one-portrait";
+  spotlight: string[];
+  pip?: string;
+  pipSize: "sm" | "lg";
+}
+
 export interface PipLayoutSummary {
   type: "pip";
   spotlight: string[];
@@ -149,7 +165,8 @@ export type LayoutSummary =
   | SpotlightLandscapeLayoutSummary
   | SpotlightPortraitLayoutSummary
   | SpotlightExpandedLayoutSummary
-  | OneOnOneLayoutSummary
+  | OneOnOneLandscapeLayoutSummary
+  | OneOnOnePortraitLayoutSummary
   | PipLayoutSummary;
 
 function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
@@ -187,7 +204,7 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
               pip: pip?.id,
             }),
           );
-        case "one-on-one":
+        case "one-on-one-landscape":
           return combineLatest(
             [l.spotlight.media$, l.pip.media$],
             (spotlight, pip) => ({
@@ -196,6 +213,20 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
               pip: pip.id,
             }),
           );
+        case "one-on-one-portrait":
+          return combineLatest(
+            [
+              l.spotlight.media$,
+              l.pip?.media$ ?? constant(undefined),
+              l.pipSize$,
+            ],
+            (spotlight, pip, pipSize) => ({
+              type: l.type,
+              spotlight: spotlight.map((vm) => vm.id),
+              pip: pip?.id,
+              pipSize,
+            }),
+          );
         case "pip":
           return l.spotlight.media$.pipe(
             map((spotlight) => ({
@@ -405,7 +436,7 @@ describe.each([
             expectedLayoutMarbles,
             {
               a: {
-                type: "one-on-one",
+                type: "one-on-one-landscape",
                 pip: `${localId}:0`,
                 spotlight: `${aliceId}:0`,
               },
@@ -421,6 +452,85 @@ describe.each([
     });
   });
 
+  test("one-on-one portrait layout shows local tile when video is enabled", () => {
+    withTestScheduler(({ behavior, schedule, expectObservable }) => {
+      // Local participant enables their video, then disables it
+      const videoInputMarbles = "    ny--n";
+      // While tile is shown, tap the screen twice
+      const tapScreenInputMarbles = "--aa-";
+      // Layout should show local tile, make it small, enlarge it again, then hide it
+      const expectedLayoutMarbles = "abcba";
+
+      withCallViewModel(
+        {
+          remoteParticipants$: constant([aliceParticipant]),
+          roomMembers: [local, alice],
+          rtcMembers$: constant([localRtcMember, aliceRtcMember]),
+          videoEnabled: new Map([
+            [localParticipant, behavior(videoInputMarbles, yesNo)],
+          ]),
+          windowSize$: constant({ width: 380, height: 700 }), // Mobile phone in portrait
+        },
+        (vm) => {
+          schedule(tapScreenInputMarbles, { a: () => vm.tapScreen() });
+
+          expectObservable(vm.edgeToEdge$).toBe("y", yesNo); // Edge-to-edge-layout
+          expectObservable(summarizeLayout$(vm.layout$)).toBe(
+            expectedLayoutMarbles,
+            {
+              a: {
+                type: "one-on-one-portrait",
+                spotlight: [`${aliceId}:0`],
+                pip: undefined,
+                pipSize: "lg",
+              },
+              b: {
+                type: "one-on-one-portrait",
+                spotlight: [`${aliceId}:0`],
+                pip: `${localId}:0`,
+                pipSize: "lg",
+              },
+              c: {
+                type: "one-on-one-portrait",
+                spotlight: [`${aliceId}:0`],
+                pip: `${localId}:0`,
+                pipSize: "sm",
+              },
+            },
+          );
+        },
+      );
+    });
+  });
+
+  test("one-on-one portrait layout shows name tags in room with 3 members", () => {
+    withTestScheduler(({ behavior, schedule, expectObservable }) => {
+      withCallViewModel(
+        {
+          remoteParticipants$: constant([aliceParticipant]),
+          // Both Alice and Bob are with us in the room
+          roomMembers: [local, alice, bob],
+          rtcMembers$: constant([localRtcMember, aliceRtcMember]),
+          windowSize$: constant({ width: 380, height: 700 }), // Mobile phone in portrait
+        },
+        (vm) => {
+          // Uses one-on-one portrait layout
+          expectObservable(summarizeLayout$(vm.layout$)).toBe("a", {
+            a: {
+              type: "one-on-one-portrait",
+              spotlight: [`${aliceId}:0`],
+              pip: undefined,
+              pipSize: "lg",
+            },
+          });
+          // It wouldn't be clear whether Alice or Bob is the remote video tile,
+          // so the interface must put a name tag on it
+          expectObservable(vm.showNameTags$).toBe("y", yesNo);
+        },
+      );
+    });
+  });
+
   test("participants stay in the same order unless to appear/disappear", () => {
     withTestScheduler(({ behavior, schedule, expectObservable }) => {
       const visibilityInputMarbles = "a";
@@ -576,7 +686,7 @@ describe.each([
   });
 
   test("layout reacts to window size", () => {
-    withTestScheduler(({ behavior, schedule, expectObservable }) => {
+    withTestScheduler(({ behavior, expectObservable }) => {
       const windowSizeInputMarbles = "abc";
       const expectedLayoutMarbles = " abc";
       withCallViewModel(
@@ -584,7 +694,7 @@ describe.each([
           remoteParticipants$: constant([aliceParticipant]),
           rtcMembers$: constant([localRtcMember, aliceRtcMember]),
           windowSize$: behavior(windowSizeInputMarbles, {
-            a: { width: 300, height: 600 }, // Start very narrow, like a phone
+            a: { width: 380, height: 700 }, // Start very narrow, like a phone
             b: { width: 1000, height: 800 }, // Go to normal desktop window size
             c: { width: 200, height: 180 }, // Go to PiP size
           }),
@@ -595,13 +705,14 @@ describe.each([
             {
               a: {
                 // This is the expected one-on-one layout for a narrow window
-                type: "spotlight-expanded",
+                type: "one-on-one-portrait",
                 spotlight: [`${aliceId}:0`],
-                pip: `${localId}:0`,
+                pip: undefined,
+                pipSize: "lg",
               },
               b: {
                 // In a larger window, expect the normal one-on-one layout
-                type: "one-on-one",
+                type: "one-on-one-landscape",
                 pip: `${localId}:0`,
                 spotlight: `${aliceId}:0`,
               },
@@ -735,6 +846,59 @@ describe.each([
     });
   });
 
+  // Test cases for footer visibility in PIP mode across different platforms
+  const PIP_FOOTER_VISIBILITY_TEST_CASES: Array<{
+    platform: "ios" | "android" | "desktop";
+    expectedMarbles: string;
+    description: string;
+  }> = [
+    {
+      platform: "ios",
+      expectedMarbles: "tf",
+      description: "hidden on iOS",
+    },
+    {
+      platform: "android",
+      expectedMarbles: "tf",
+      description: "hidden on Android",
+    },
+    {
+      platform: "desktop",
+      expectedMarbles: "t",
+      description: "visible on desktop",
+    },
+  ];
+
+  it.each(PIP_FOOTER_VISIBILITY_TEST_CASES)(
+    "footer is $description in PIP mode",
+    ({ platform: testPlatform, expectedMarbles }) => {
+      withTestScheduler(({ schedule, expectObservable }) => {
+        // Set platform for this test case
+        getPlatform.mockReturnValue(testPlatform);
+
+        // Enable PIP mode after initial render
+        const pipControlInputMarbles = "-e";
+
+        withCallViewModel(
+          {
+            remoteParticipants$: constant([aliceParticipant]),
+            rtcMembers$: constant([localRtcMember, aliceRtcMember]),
+          },
+          (vm) => {
+            schedule(pipControlInputMarbles, {
+              e: () => window.controls.enablePip(),
+            });
+
+            expectObservable(vm.showFooter$).toBe(expectedMarbles, {
+              t: true,
+              f: false,
+            });
+          },
+        );
+      });
+    },
+  );
+
   test("PiP tile in expanded spotlight layout switches speakers without layout shifts", () => {
     withTestScheduler(({ behavior, schedule, expectObservable }) => {
       // Switch to spotlight immediately
@@ -956,7 +1120,7 @@ describe.each([
                 grid: [`${localId}:0`],
               },
               b: {
-                type: "one-on-one",
+                type: "one-on-one-landscape",
                 pip: `${localId}:0`,
                 spotlight: `${aliceId}:0`,
               },
@@ -999,7 +1163,7 @@ describe.each([
                 grid: [`${localId}:0`],
               },
               b: {
-                type: "one-on-one",
+                type: "one-on-one-landscape",
                 pip: `${localId}:0`,
                 spotlight: `${aliceId}:0`,
               },
@@ -1009,7 +1173,7 @@ describe.each([
                 grid: [`${localId}:0`, `${aliceId}:0`, `${daveId}:0`],
               },
               d: {
-                type: "one-on-one",
+                type: "one-on-one-landscape",
                 pip: `${localId}:0`,
                 spotlight: `${daveId}:0`,
               },
@@ -1227,7 +1391,7 @@ describe.each([
           // ringing the entire time (even once timed out)
           expectObservable(summarizeLayout$(vm.layout$)).toBe("a", {
             a: {
-              type: "one-on-one",
+              type: "one-on-one-landscape",
               spotlight: `${localId}:0`,
               pip: `ringing:${aliceUserId}`,
             },
@@ -1266,12 +1430,12 @@ describe.each([
           // ringing the entire time
           expectObservable(summarizeLayout$(vm.layout$)).toBe("a 20ms b", {
             a: {
-              type: "one-on-one",
+              type: "one-on-one-landscape",
               spotlight: `${localId}:0`,
               pip: `ringing:${aliceUserId}`,
             },
             b: {
-              type: "one-on-one",
+              type: "one-on-one-landscape",
               spotlight: `${aliceId}:0`,
               pip: `${localId}:0`,
             },

src/state/CallViewModel/CallViewModel.ts

@@ -15,6 +15,7 @@ import {
 } from "livekit-client";
 import { type Room as MatrixRoom } from "matrix-js-sdk";
 import {
+  BehaviorSubject,
   catchError,
   combineLatest,
   distinctUntilChanged,
@@ -59,16 +60,18 @@ import {
 } from "../../utils/observable";
 import {
   duplicateTiles,
-  MatrixRTCMode,
   playReactionsSound,
   showReactions,
 } from "../../settings/settings";
+import { Config } from "../../config/Config";
+import { MatrixRTCMode } from "../../config/ConfigOptions";
 import { isFirefox, platform } from "../../Platform";
 import { setPipEnabled$ } from "../../controls";
 import { TileStore } from "../TileStore";
 import { gridLikeLayout } from "../GridLikeLayout";
 import { spotlightExpandedLayout } from "../SpotlightExpandedLayout";
-import { oneOnOneLayout } from "../OneOnOneLayout";
+import { oneOnOneLandscapeLayout } from "../OneOnOneLandscapeLayout";
+import { oneOnOnePortraitLayout } from "../OneOnOnePortraitLayout";
 import { pipLayout } from "../PipLayout";
 import { type EncryptionSystem } from "../../e2ee/sharedKeyManagement";
 import {
@@ -86,10 +89,12 @@ import { getUrlParams, HeaderStyle } from "../../UrlParams";
 import { type ProcessorState } from "../../livekit/TrackProcessorContext";
 import { ElementWidgetActions, widget } from "../../widget";
 import {
+  type Alignment,
   type GridLayoutMedia,
   type Layout,
   type LayoutMedia,
-  type OneOnOneLayoutMedia,
+  type OneOnOneLandscapeLayoutMedia,
+  type OneOnOnePortraitLayoutMedia,
   type SpotlightExpandedLayoutMedia,
   type SpotlightLandscapeLayoutMedia,
   type SpotlightPortraitLayoutMedia,
@@ -327,16 +332,6 @@ export interface CallViewModel {
     { sender: string; emoji: string; startX: number }[]
   >;
 
-  // window/layout
-  /**
-   * The general shape of the window.
-   */
-  windowMode$: Behavior<WindowMode>;
-  spotlightExpanded$: Behavior<boolean>;
-  toggleSpotlightExpanded$: Behavior<(() => void) | null>;
-  gridMode$: Behavior<GridMode>;
-  setGridMode: (value: GridMode) => void;
-
   /**
    * The layout of tiles in the call interface.
    */
@@ -347,10 +342,23 @@ export interface CallViewModel {
   tileStoreGeneration$: Behavior<number>;
   showSpotlightIndicators$: Behavior<boolean>;
   showSpeakingIndicators$: Behavior<boolean>;
+  showNameTags$: Behavior<boolean>;
+  spotlightExpanded$: Behavior<boolean>;
+  toggleSpotlightExpanded$: Behavior<(() => void) | null>;
+  gridMode$: Behavior<GridMode>;
+  setGridMode: (value: GridMode) => void;
 
   // header/footer visibility
   showHeader$: Behavior<boolean>;
   showFooter$: Behavior<boolean>;
+  /**
+   * Whether the call layout should be displayed edge-to-edge, with the footer
+   * and header as overlays.
+   */
+  edgeToEdge$: Behavior<boolean>;
+
+  settingsOpen$: Behavior<boolean>;
+  setSettingsOpen$: Behavior<(open: boolean) => void>;
 
   // audio routing
   /**
@@ -409,8 +417,15 @@ export function createCallViewModel$(
     options.encryptionSystem,
     matrixRTCSession,
   );
+  // matrix_rtc_mode in config.json overrides the user's Developer Settings choice.
+  // It is validated at config load (src/config/Config.ts) so the cast is safe.
+  const configMatrixRTCMode = Config.get().matrix_rtc_mode as
+    | MatrixRTCMode
+    | undefined;
   const matrixRTCMode$ =
-    options.matrixRTCMode$ ?? constant(MatrixRTCMode.Legacy);
+    configMatrixRTCMode !== undefined
+      ? constant(configMatrixRTCMode)
+      : (options.matrixRTCMode$ ?? constant(MatrixRTCMode.Legacy));
 
   // Each hbar seperates a block of input variables required for the CallViewModel to function.
   // The outputs of this block is written under the hbar.
@@ -558,6 +573,7 @@ export function createCallViewModel$(
     connectionManager,
     matrixRTCSession,
     localTransport$,
+    roomId: matrixRoom.roomId,
     logger: logger.getChild(`[${Date.now()}]`),
   });
 
@@ -774,6 +790,7 @@ export function createCallViewModel$(
             callPickupState === "timeout" ||
             callPickupState === "decline"
           ) {
+            // TODO: Respect io.element.functional_members
             for (const member of roomMembers.values()) {
               if (!userMedia.some((vm) => vm.userId === member.userId))
                 yield {
@@ -1054,6 +1071,7 @@ export function createCallViewModel$(
     [grid$, spotlight$],
     (grid, spotlight) => ({
       type: "grid",
+      edgeToEdge: false,
       spotlight: spotlight.some((vm) => vm.type === "screen share")
         ? spotlight
         : undefined,
@@ -1061,9 +1079,12 @@ export function createCallViewModel$(
     }),
   );
 
-  const spotlightLandscapeLayoutMedia$: Observable<SpotlightLandscapeLayoutMedia> =
+  const spotlightLandscapeLayoutMedia$ = (
+    edgeToEdge: boolean,
+  ): Observable<SpotlightLandscapeLayoutMedia> =>
     combineLatest([grid$, spotlight$], (grid, spotlight) => ({
       type: "spotlight-landscape",
+      edgeToEdge,
       spotlight,
       grid,
     }));
@@ -1071,16 +1092,20 @@ export function createCallViewModel$(
   const spotlightPortraitLayoutMedia$: Observable<SpotlightPortraitLayoutMedia> =
     combineLatest([grid$, spotlight$], (grid, spotlight) => ({
       type: "spotlight-portrait",
+      edgeToEdge: false,
       spotlight,
       grid,
     }));
 
-  const spotlightExpandedLayoutMedia$: Observable<SpotlightExpandedLayoutMedia> =
+  const spotlightExpandedLayoutMedia$ = (
+    edgeToEdge: boolean,
+  ): Observable<SpotlightExpandedLayoutMedia> =>
     spotlightAndPip$.pipe(
       switchMap(({ spotlight, pip$ }) =>
         pip$.pipe(
           map((pip) => ({
             type: "spotlight-expanded" as const,
+            edgeToEdge,
             spotlight,
             pip: pip ?? undefined,
           })),
@@ -1088,55 +1113,88 @@ export function createCallViewModel$(
       ),
     );
 
-  const oneOnOneLayoutMedia$: Observable<OneOnOneLayoutMedia | null> =
-    combineLatest([userMedia$, screenShares$]).pipe(
-      switchMap(([userMedia, screenShares]) => {
-        // One-on-one layout only supports 2 user media, no screen shares
-        if (userMedia.length <= 2 && screenShares.length === 0) {
-          const local = userMedia.find(
-            (vm): vm is WrappedUserMediaViewModel & LocalUserMediaViewModel =>
-              vm.type === "user" && vm.local,
+  const oneOnOneLayoutMedia$: Observable<{
+    local: LocalUserMediaViewModel;
+    remote: UserMediaViewModel | RingingMediaViewModel;
+  } | null> = combineLatest([userMedia$, screenShares$]).pipe(
+    switchMap(([userMedia, screenShares]) => {
+      // One-on-one layout only supports 2 user media, no screen shares
+      if (userMedia.length <= 2 && screenShares.length === 0) {
+        const local = userMedia.find(
+          (vm): vm is WrappedUserMediaViewModel & LocalUserMediaViewModel =>
+            vm.type === "user" && vm.local,
+        );
+
+        if (local !== undefined) {
+          const remote = userMedia.find(
+            (vm): vm is WrappedUserMediaViewModel & RemoteUserMediaViewModel =>
+              vm.type === "user" && !vm.local,
           );
 
-          if (local !== undefined) {
-            const remote = userMedia.find(
-              (
-                vm,
-              ): vm is WrappedUserMediaViewModel & RemoteUserMediaViewModel =>
-                vm.type === "user" && !vm.local,
+          if (remote !== undefined) return of({ local, remote });
+
+          // If there's no other user media in the call (could still happen in
+          // this branch due to the duplicate tiles option), we could possibly
+          // show ringing media instead
+          if (userMedia.length === 1)
+            return ringingMedia$.pipe(
+              map((ringingMedia) => {
+                return ringingMedia.length === 1
+                  ? {
+                      local,
+                      remote: ringingMedia[0],
+                    }
+                  : null;
+              }),
             );
-
-            if (remote !== undefined)
-              return of({
-                type: "one-on-one" as const,
-                spotlight: remote,
-                pip: local,
-              });
-
-            // If there's no other user media in the call (could still happen in
-            // this branch due to the duplicate tiles option), we could possibly
-            // show ringing media instead
-            if (userMedia.length === 1)
-              return ringingMedia$.pipe(
-                map((ringingMedia) => {
-                  return ringingMedia.length === 1
-                    ? {
-                        type: "one-on-one" as const,
-                        spotlight: local,
-                        pip: ringingMedia[0],
-                      }
-                    : null;
-                }),
-              );
-          }
         }
+      }
 
-        return of(null);
+      return of(null);
+    }),
+  );
+
+  const oneOnOneLandscapeLayoutMedia$: Observable<OneOnOneLandscapeLayoutMedia | null> =
+    oneOnOneLayoutMedia$.pipe(
+      map((media) => {
+        if (media === null) return null;
+        return media.remote.type === "ringing"
+          ? {
+              type: "one-on-one-landscape" as const,
+              edgeToEdge: false,
+              spotlight: media.local,
+              pip: media.remote,
+            }
+          : {
+              type: "one-on-one-landscape" as const,
+              edgeToEdge: false,
+              spotlight: media.remote,
+              pip: media.local,
+            };
+      }),
+    );
+
+  const oneOnOnePortraitLayoutMedia$: Observable<OneOnOnePortraitLayoutMedia | null> =
+    oneOnOneLayoutMedia$.pipe(
+      switchMap((media) => {
+        if (media === null) return of(null);
+        return media.local.videoEnabled$.pipe(
+          map((videoEnabled) => ({
+            type: "one-on-one-portrait" as const,
+            edgeToEdge: true as const,
+            spotlight: media.remote,
+            pip: videoEnabled ? media.local : undefined,
+          })),
+        );
       }),
     );
 
   const pipLayoutMedia$: Observable<LayoutMedia> = spotlight$.pipe(
-    map((spotlight) => ({ type: "pip", spotlight })),
+    map((spotlight) => ({
+      type: "pip",
+      edgeToEdge: platform !== "desktop",
+      spotlight,
+    })),
   );
 
   /**
@@ -1151,7 +1209,7 @@ export function createCallViewModel$(
               switchMap((gridMode) => {
                 switch (gridMode) {
                   case "grid":
-                    return oneOnOneLayoutMedia$.pipe(
+                    return oneOnOneLandscapeLayoutMedia$.pipe(
                       switchMap((oneOnOne) =>
                         oneOnOne === null ? gridLayoutMedia$ : of(oneOnOne),
                       ),
@@ -1160,15 +1218,15 @@ export function createCallViewModel$(
                     return spotlightExpanded$.pipe(
                       switchMap((expanded) =>
                         expanded
-                          ? spotlightExpandedLayoutMedia$
-                          : spotlightLandscapeLayoutMedia$,
+                          ? spotlightExpandedLayoutMedia$(false)
+                          : spotlightLandscapeLayoutMedia$(false),
                       ),
                     );
                 }
               }),
             );
           case "narrow":
-            return oneOnOneLayoutMedia$.pipe(
+            return oneOnOnePortraitLayoutMedia$.pipe(
               switchMap((oneOnOne) =>
                 oneOnOne === null
                   ? combineLatest([grid$, spotlight$], (grid, spotlight) =>
@@ -1177,9 +1235,7 @@ export function createCallViewModel$(
                         ? spotlightPortraitLayoutMedia$
                         : gridLayoutMedia$,
                     ).pipe(switchAll())
-                  : // The expanded spotlight layout makes for a better one-on-one
-                    // experience in narrow windows
-                    spotlightExpandedLayoutMedia$,
+                  : of(oneOnOne),
               ),
             );
           case "flat":
@@ -1189,9 +1245,9 @@ export function createCallViewModel$(
                   case "grid":
                     // Yes, grid mode actually gets you a "spotlight" layout in
                     // this window mode.
-                    return spotlightLandscapeLayoutMedia$;
+                    return spotlightLandscapeLayoutMedia$(true);
                   case "spotlight":
-                    return spotlightExpandedLayoutMedia$;
+                    return spotlightExpandedLayoutMedia$(true);
                 }
               }),
             );
@@ -1202,6 +1258,201 @@ export function createCallViewModel$(
     ),
   );
 
+  const showSpotlightIndicators$ = scope.behavior<boolean>(
+    layoutMedia$.pipe(map((l) => l.type !== "grid")),
+  );
+
+  const showSpeakingIndicators$ = scope.behavior<boolean>(
+    layoutMedia$.pipe(
+      map((l) => {
+        switch (l.type) {
+          case "spotlight-landscape":
+          case "spotlight-portrait":
+            // If the spotlight is showing the active speaker, we can do without
+            // speaking indicators as they're a redundant visual cue. But if
+            // screen sharing feeds are in the spotlight we still need them.
+            return l.spotlight.some((m) => m.type === "screen share");
+          // In expanded spotlight layout, the active speaker is always shown in
+          // the picture-in-picture tile so there is no need for speaking
+          // indicators. And in one-on-one layout there's no question as to who is
+          // speaking.
+          case "spotlight-expanded":
+          case "one-on-one-landscape":
+          case "one-on-one-portrait":
+            return false;
+          default:
+            return true;
+        }
+      }),
+    ),
+  );
+
+  const showNameTags$ = scope.behavior<boolean>(
+    layoutMedia$.pipe(
+      switchMap((l) =>
+        l.type === "pip" || l.type === "one-on-one-portrait"
+          ? matrixRoomMembers$.pipe(
+              map(
+                (members) =>
+                  // Hide name tags by default in these layouts. For safety we
+                  // still need to show them in case it wouldn't be clear who
+                  // the spotlight media belongs to.
+                  // TODO: Respect io.element.functional_members (while still
+                  // being careful to never show a functional member's media
+                  // without a name tag!)
+                  // TODO: Only hide name tags in DMs, not group chats that just
+                  // happen to have only 2 users
+                  members.size > 2,
+              ),
+            )
+          : of(true),
+      ),
+    ),
+  );
+
+  const toggleSpotlightExpanded$ = scope.behavior<(() => void) | null>(
+    windowMode$.pipe(
+      switchMap((mode) =>
+        mode === "normal"
+          ? layoutMedia$.pipe(
+              map(
+                (l) =>
+                  l.type === "spotlight-landscape" ||
+                  l.type === "spotlight-expanded",
+              ),
+            )
+          : of(false),
+      ),
+      distinctUntilChanged(),
+      map((enabled) =>
+        enabled ? (): void => spotlightExpandedToggle$.next() : null,
+      ),
+    ),
+  );
+
+  const edgeToEdge$ = scope.behavior<boolean>(
+    layoutMedia$.pipe(map(({ edgeToEdge }) => edgeToEdge)),
+  );
+
+  const screenTap$ = new Subject<void>();
+  const controlsTap$ = new Subject<void>();
+  const screenHover$ = new Subject<void>();
+  const screenUnhover$ = new Subject<void>();
+
+  const naturallyShowFooter$ = scope.behavior<boolean>(
+    edgeToEdge$.pipe(
+      switchMap((edgeToEdge) => {
+        if (!edgeToEdge) return of(true);
+
+        // Sadly Firefox has some layering glitches that prevent the footer
+        // from appearing properly. They happen less often if we never hide
+        // the footer.
+        if (isFirefox()) return of(true);
+
+        // Layout is edge-to-edge; show/hide the footer in response to interactions
+        return windowMode$.pipe(
+          switchMap((mode) => {
+            if (mode === "pip" && platform !== "desktop") {
+              // No controls are shown in mobile pip as interactions are disabled
+              return of(false);
+            }
+            const showInitially = mode !== "flat";
+            const timeout$ = mode === "flat" ? timer(showFooterMs) : NEVER;
+
+            return merge(
+              screenTap$.pipe(map(() => "tap screen" as const)),
+              controlsTap$.pipe(map(() => "tap controls" as const)),
+              screenHover$.pipe(map(() => "hover" as const)),
+            ).pipe(
+              switchScan((state, interaction) => {
+                switch (interaction) {
+                  case "tap screen":
+                    return state
+                      ? // Toggle visibility on tap
+                        of(false)
+                      : // Hide after a timeout
+                        timeout$.pipe(
+                          map(() => false),
+                          startWith(true),
+                        );
+                  case "tap controls":
+                    // The user is interacting with things, so reset the timeout
+                    return timeout$.pipe(
+                      map(() => false),
+                      startWith(true),
+                    );
+                  case "hover":
+                    // Show on hover and hide after a timeout
+                    return race(timeout$, screenUnhover$.pipe(take(1))).pipe(
+                      map(() => false),
+                      startWith(true),
+                    );
+                }
+              }, showInitially),
+              startWith(showInitially),
+            );
+          }),
+        );
+      }),
+    ),
+  );
+
+  const urlParams = getUrlParams();
+  const showFooterUrlParams = !(
+    urlParams.header === HeaderStyle.None && urlParams.showControls === false
+  );
+  const showFooter$ = scope.behavior(
+    naturallyShowFooter$.pipe(
+      map((naturallyShowFooter) => naturallyShowFooter && showFooterUrlParams),
+    ),
+  );
+  const settingsOpen$ = new BehaviorSubject(false);
+  const setSettingsOpen$ = constant((open: boolean) => {
+    settingsOpen$.next(open);
+  });
+
+  const showHeader$ = scope.behavior<boolean>(
+    windowMode$.pipe(
+      switchMap((mode) => {
+        // In small windows the header would be too obstructive
+        if (mode === "pip" || mode === "flat") return of(false);
+        // In edge-to-edge layouts, couple the visibility of the header
+        // to that of the footer
+        return edgeToEdge$.pipe(
+          switchMap((edgeToEdge) => (edgeToEdge ? showFooter$ : of(true))),
+        );
+      }),
+    ),
+  );
+
+  /**
+   * The alignment of the floating spotlight tile, if present.
+   */
+  const spotlightAlignment$ = new BehaviorSubject<Alignment>({
+    inline: "end",
+    block: "end",
+  });
+  /**
+   * The size of the small picture-in-picture tile, if present, when in portrait.
+   */
+  const portraitPipSize$ = scope.behavior(
+    showFooter$.pipe(map((showFooter) => (showFooter ? "lg" : "sm"))),
+  );
+  /**
+   * The alignment of the small picture-in-picture tile, if present, when in portrait.
+   */
+  const portraitPipAlignment$ = new BehaviorSubject<Alignment>({
+    inline: "end",
+    block: "end",
+  });
+  /**
+   * The alignment of the small picture-in-picture tile, if present, when in landscape.
+   */
+  const landscapePipAlignment$ = new BehaviorSubject<Alignment>({
+    inline: "end",
+    block: "start",
+  });
+
   // There is a cyclical dependency here: the layout algorithms want to know
   // which tiles are on screen, but to know which tiles are on screen we have to
   // first render a layout. To deal with this we assume initially that no tiles
@@ -1228,16 +1479,33 @@ export function createCallViewModel$(
             case "spotlight-portrait":
               [layout, newTiles] = gridLikeLayout(
                 media,
+                spotlightAlignment$,
                 visibleTiles,
                 setVisibleTiles,
                 prevTiles,
               );
               break;
             case "spotlight-expanded":
-              [layout, newTiles] = spotlightExpandedLayout(media, prevTiles);
+              [layout, newTiles] = spotlightExpandedLayout(
+                media,
+                landscapePipAlignment$,
+                prevTiles,
+              );
               break;
-            case "one-on-one":
-              [layout, newTiles] = oneOnOneLayout(media, prevTiles);
+            case "one-on-one-landscape":
+              [layout, newTiles] = oneOnOneLandscapeLayout(
+                media,
+                landscapePipAlignment$,
+                prevTiles,
+              );
+              break;
+            case "one-on-one-portrait":
+              [layout, newTiles] = oneOnOnePortraitLayout(
+                media,
+                portraitPipSize$,
+                portraitPipAlignment$,
+                prevTiles,
+              );
               break;
             case "pip":
               [layout, newTiles] = pipLayout(media, prevTiles);
@@ -1265,130 +1533,6 @@ export function createCallViewModel$(
     layoutInternals$.pipe(map(({ tiles }) => tiles.generation)),
   );
 
-  const showSpotlightIndicators$ = scope.behavior<boolean>(
-    layout$.pipe(map((l) => l.type !== "grid")),
-  );
-
-  const showSpeakingIndicators$ = scope.behavior<boolean>(
-    layout$.pipe(
-      switchMap((l) => {
-        switch (l.type) {
-          case "spotlight-landscape":
-          case "spotlight-portrait":
-            // If the spotlight is showing the active speaker, we can do without
-            // speaking indicators as they're a redundant visual cue. But if
-            // screen sharing feeds are in the spotlight we still need them.
-            return l.spotlight.media$.pipe(
-              map((models: MediaViewModel[]) =>
-                models.some((m) => m.type === "screen share"),
-              ),
-            );
-          // In expanded spotlight layout, the active speaker is always shown in
-          // the picture-in-picture tile so there is no need for speaking
-          // indicators. And in one-on-one layout there's no question as to who is
-          // speaking.
-          case "spotlight-expanded":
-          case "one-on-one":
-            return of(false);
-          default:
-            return of(true);
-        }
-      }),
-    ),
-  );
-
-  const toggleSpotlightExpanded$ = scope.behavior<(() => void) | null>(
-    windowMode$.pipe(
-      switchMap((mode) =>
-        mode === "normal"
-          ? layout$.pipe(
-              map(
-                (l) =>
-                  l.type === "spotlight-landscape" ||
-                  l.type === "spotlight-expanded",
-              ),
-            )
-          : of(false),
-      ),
-      distinctUntilChanged(),
-      map((enabled) =>
-        enabled ? (): void => spotlightExpandedToggle$.next() : null,
-      ),
-    ),
-  );
-
-  const screenTap$ = new Subject<void>();
-  const controlsTap$ = new Subject<void>();
-  const screenHover$ = new Subject<void>();
-  const screenUnhover$ = new Subject<void>();
-
-  const showHeader$ = scope.behavior<boolean>(
-    windowMode$.pipe(map((mode) => mode !== "pip" && mode !== "flat")),
-  );
-
-  const urlParams = getUrlParams();
-  const showFooterUrlParams = !(
-    urlParams.header === HeaderStyle.None && urlParams.showControls === false
-  );
-  const showFooterLayout$ = scope.behavior<boolean>(
-    windowMode$.pipe(
-      switchMap((mode) => {
-        switch (mode) {
-          case "pip":
-            return of(platform === "desktop" ? true : false);
-          case "normal":
-          case "narrow":
-            return of(true);
-          case "flat":
-            // Sadly Firefox has some layering glitches that prevent the footer
-            // from appearing properly. They happen less often if we never hide
-            // the footer.
-            if (isFirefox()) return of(true);
-            // Show/hide the footer in response to interactions
-            return merge(
-              screenTap$.pipe(map(() => "tap screen" as const)),
-              controlsTap$.pipe(map(() => "tap controls" as const)),
-              screenHover$.pipe(map(() => "hover" as const)),
-            ).pipe(
-              switchScan((state, interaction) => {
-                switch (interaction) {
-                  case "tap screen":
-                    return state
-                      ? // Toggle visibility on tap
-                        of(false)
-                      : // Hide after a timeout
-                        timer(showFooterMs).pipe(
-                          map(() => false),
-                          startWith(true),
-                        );
-                  case "tap controls":
-                    // The user is interacting with things, so reset the timeout
-                    return timer(showFooterMs).pipe(
-                      map(() => false),
-                      startWith(true),
-                    );
-                  case "hover":
-                    // Show on hover and hide after a timeout
-                    return race(
-                      timer(showFooterMs),
-                      screenUnhover$.pipe(take(1)),
-                    ).pipe(
-                      map(() => false),
-                      startWith(true),
-                    );
-                }
-              }, false),
-              startWith(false),
-            );
-        }
-      }),
-    ),
-  );
-  const showFooter$ = scope.behavior(
-    showFooterLayout$.pipe(
-      map((showFooter) => showFooter && showFooterUrlParams),
-    ),
-  );
   /**
    * Whether audio is currently being output through the earpiece.
    */
@@ -1592,7 +1736,6 @@ export function createCallViewModel$(
     audibleReactions$: audibleReactions$,
     visibleReactions$: visibleReactions$,
 
-    windowMode$: windowMode$,
     spotlightExpanded$: spotlightExpanded$,
     toggleSpotlightExpanded$: toggleSpotlightExpanded$,
     gridMode$: gridMode$,
@@ -1618,8 +1761,12 @@ export function createCallViewModel$(
     tileStoreGeneration$: tileStoreGeneration$,
     showSpotlightIndicators$: showSpotlightIndicators$,
     showSpeakingIndicators$: showSpeakingIndicators$,
+    showNameTags$,
     showHeader$: showHeader$,
     showFooter$: showFooter$,
+    settingsOpen$: settingsOpen$,
+    setSettingsOpen$: setSettingsOpen$,
+    edgeToEdge$,
     earpieceMode$: earpieceMode$,
     audioOutputSwitcher$: audioOutputSwitcher$,
     reconnecting$: localMembership.reconnecting$,

src/state/CallViewModel/CallViewModelTestUtils.ts

@@ -8,11 +8,11 @@ Please see LICENSE in the repository root for full details.
 
 import {
   ConnectionState,
-  type LocalParticipant,
   type Participant,
   ParticipantEvent,
   type RemoteParticipant,
   type Room as LivekitRoom,
+  type TrackPublication,
 } from "livekit-client";
 import { SyncState } from "matrix-js-sdk/lib/sync";
 import { BehaviorSubject, combineLatest, map, of } from "rxjs";
@@ -56,7 +56,7 @@ import {
 import { type Behavior, constant } from "../Behavior";
 import { type ProcessorState } from "../../livekit/TrackProcessorContext";
 import { type MediaDevices } from "../MediaDevices";
-import { type MatrixRTCMode } from "../../settings/settings";
+import { type MatrixRTCMode } from "../../config/ConfigOptions";
 
 mockConfig({
   livekit: { livekit_service_url: "http://my-default-service-url.com" },
@@ -72,6 +72,7 @@ export interface CallViewModelInputs {
   roomMembers: RoomMember[];
   livekitConnectionState$: Behavior<ConnectionState>;
   speaking: Map<Participant, Behavior<boolean>>;
+  videoEnabled: Map<Participant, Behavior<boolean>>;
   sharingScreen: Map<Participant, Behavior<boolean>>;
   mediaDevices: MediaDevices;
   initialSyncState: SyncState;
@@ -98,6 +99,7 @@ export function withCallViewModel(mode: MatrixRTCMode) {
         ConnectionState.Connected,
       ),
       speaking = new Map(),
+      videoEnabled = new Map(),
       sharingScreen = new Map(),
       mediaDevices = mockMediaDevices({}),
       initialSyncState = SyncState.Syncing,
@@ -151,11 +153,19 @@ export function withCallViewModel(mode: MatrixRTCMode) {
       .mockReturnValue(remoteParticipants$);
     const mediaSpy = vi
       .spyOn(ComponentsCore, "observeParticipantMedia")
-      .mockImplementation((p) =>
-        of({ participant: p } as Partial<
-          ComponentsCore.ParticipantMedia<LocalParticipant>
-        > as ComponentsCore.ParticipantMedia<LocalParticipant>),
-      );
+      .mockImplementation((p) => {
+        return (videoEnabled.get(p) ?? constant(false)).pipe(
+          map((videoEnabled) => ({
+            participant: p,
+            isMicrophoneEnabled: false,
+            isCameraEnabled: videoEnabled,
+            isScreenShareEnabled: false,
+            cameraTrack: {
+              isMuted: !videoEnabled,
+            } as unknown as TrackPublication,
+          })),
+        );
+      });
     const eventsSpy = vi
       .spyOn(ComponentsCore, "observeParticipantEvents")
       .mockImplementation((p, ...eventTypes) => {

src/state/CallViewModel/localMember/HomeserverConnected.test.ts

@@ -13,6 +13,7 @@ import { MembershipManagerEvent, Status } from "matrix-js-sdk/lib/matrixrtc";
 
 import { ObservableScope } from "../../ObservableScope";
 import { createHomeserverConnected$ } from "./HomeserverConnected";
+import { testScope, withTestScheduler } from "../../../utils/test";
 
 /**
  * Minimal stub of a Matrix client sufficient for our tests:
@@ -96,107 +97,240 @@ describe("createHomeserverConnected$", () => {
 
   // LLM generated test cases. They are a bit overkill but I improved the mocking so it is
   // easy enough to read them so I think they can stay.
-  it("is false when sync state is not Syncing", () => {
-    const hsConnected = createHomeserverConnected$(scope, client, session);
-    expect(hsConnected.combined$.value).toBe(false);
+  // Note: gracePeriodMs is set to 0 to avoid debouncing delays in tests
+  it("reports syncing reason when sync state is not Syncing", () => {
+    const hsConnected = createHomeserverConnected$(scope, client, session, 0);
+    expect(hsConnected.combined$.value).toEqual([false, "sync"]);
   });
 
-  it("remains false while membership status is not Connected even if sync is Syncing", () => {
-    const hsConnected = createHomeserverConnected$(scope, client, session);
+  it("reports membership reason when sync is Syncing but membership is not Connected", () => {
+    const hsConnected = createHomeserverConnected$(scope, client, session, 0);
     client.setSyncState(SyncState.Syncing);
-    expect(hsConnected.combined$.value).toBe(false); // membership still disconnected
+    expect(hsConnected.combined$.value).toEqual([false, "membership"]);
   });
 
-  it("is false when membership status transitions to Connected but ProbablyLeft is true", () => {
-    const hsConnected = createHomeserverConnected$(scope, client, session);
+  it("reports probablyLeft reason when membership transitions to Connected but ProbablyLeft is true", () => {
+    const hsConnected = createHomeserverConnected$(scope, client, session, 0);
     // Make sync loop OK
     client.setSyncState(SyncState.Syncing);
     // Indicate probable leave before connection
     session.setProbablyLeft(true);
     session.setMembershipStatus(Status.Connected);
-    expect(hsConnected.combined$.value).toBe(false);
+    expect(hsConnected.combined$.value).toEqual([false, "probablyLeft"]);
   });
 
-  it("becomes true only when all three conditions are satisfied", () => {
-    const hsConnected = createHomeserverConnected$(scope, client, session);
+  it("becomes null (connected) only when all three conditions are satisfied", () => {
+    const hsConnected = createHomeserverConnected$(scope, client, session, 0);
     // 1. Sync loop connected
     client.setSyncState(SyncState.Syncing);
-    expect(hsConnected.combined$.value).toBe(false); // not yet membership connected
+    expect(hsConnected.combined$.value).toEqual([false, "membership"]); // not yet membership connected
     // 2. Membership connected
     session.setMembershipStatus(Status.Connected);
-    expect(hsConnected.combined$.value).toBe(true); // probablyLeft is false
+    expect(hsConnected.combined$.value).toEqual([true, null]); // probablyLeft is false
   });
 
-  it("drops back to false when sync loop leaves Syncing", () => {
-    const hsConnected = createHomeserverConnected$(scope, client, session);
+  it("returns syncing reason when sync loop leaves Syncing", () => {
+    const hsConnected = createHomeserverConnected$(scope, client, session, 0);
     // Reach connected state
     client.setSyncState(SyncState.Syncing);
     session.setMembershipStatus(Status.Connected);
-    expect(hsConnected.combined$.value).toBe(true);
+    expect(hsConnected.combined$.value).toEqual([true, null]);
 
-    // Sync loop error => should flip false
+    // Sync loop error => should report syncing reason
     client.setSyncState(SyncState.Error);
-    expect(hsConnected.combined$.value).toBe(false);
+    expect(hsConnected.combined$.value).toEqual([false, "sync"]);
   });
 
-  it("drops back to false when membership status becomes disconnected", () => {
-    const hsConnected = createHomeserverConnected$(scope, client, session);
+  it("returns membershipConnected reason when membership status becomes disconnected", () => {
+    const hsConnected = createHomeserverConnected$(scope, client, session, 0);
     client.setSyncState(SyncState.Syncing);
     session.setMembershipStatus(Status.Connected);
-    expect(hsConnected.combined$.value).toBe(true);
+    expect(hsConnected.combined$.value).toEqual([true, null]);
 
     session.setMembershipStatus(Status.Disconnected);
-    expect(hsConnected.combined$.value).toBe(false);
+    expect(hsConnected.combined$.value).toEqual([false, "membership"]);
   });
 
-  it("drops to false when ProbablyLeft is emitted after being true", () => {
-    const hsConnected = createHomeserverConnected$(scope, client, session);
+  it("returns certainlyConnected reason when ProbablyLeft is emitted", () => {
+    const hsConnected = createHomeserverConnected$(scope, client, session, 0);
     client.setSyncState(SyncState.Syncing);
     session.setMembershipStatus(Status.Connected);
-    expect(hsConnected.combined$.value).toBe(true);
+    expect(hsConnected.combined$.value).toEqual([true, null]);
 
     session.setProbablyLeft(true);
-    expect(hsConnected.combined$.value).toBe(false);
+    expect(hsConnected.combined$.value).toEqual([false, "probablyLeft"]);
   });
 
-  it("recovers to true if ProbablyLeft becomes false again while other conditions remain true", () => {
-    const hsConnected = createHomeserverConnected$(scope, client, session);
+  it("recovers to null (connected) if ProbablyLeft becomes false again while other conditions remain true", () => {
+    const hsConnected = createHomeserverConnected$(scope, client, session, 0);
     client.setSyncState(SyncState.Syncing);
     session.setMembershipStatus(Status.Connected);
-    expect(hsConnected.combined$.value).toBe(true);
+    expect(hsConnected.combined$.value).toEqual([true, null]);
 
     session.setProbablyLeft(true);
-    expect(hsConnected.combined$.value).toBe(false);
+    expect(hsConnected.combined$.value).toEqual([false, "probablyLeft"]);
 
     // Simulate clearing the flag (in realistic scenario membership manager would update)
     session.setProbablyLeft(false);
-    expect(hsConnected.combined$.value).toBe(true);
+    expect(hsConnected.combined$.value).toEqual([true, null]);
   });
 
   it("composite sequence reflects each individual failure reason", () => {
-    const hsConnected = createHomeserverConnected$(scope, client, session);
+    const hsConnected = createHomeserverConnected$(scope, client, session, 0);
 
-    // Initially false (sync error + disconnected + not probably left)
-    expect(hsConnected.combined$.value).toBe(false);
+    // Initially: sync error + membership disconnected → syncing wins (highest priority)
+    expect(hsConnected.combined$.value).toEqual([false, "sync"]);
 
-    // Fix sync only
+    // Fix sync only → membershipConnected is now the blocker
     client.setSyncState(SyncState.Syncing);
-    expect(hsConnected.combined$.value).toBe(false);
+    expect(hsConnected.combined$.value).toEqual([false, "membership"]);
 
-    // Fix membership
+    // Fix membership → all conditions satisfied
     session.setMembershipStatus(Status.Connected);
-    expect(hsConnected.combined$.value).toBe(true);
+    expect(hsConnected.combined$.value).toEqual([true, null]);
 
-    // Introduce probablyLeft -> false
+    // Introduce probablyLeft → certainlyConnected
     session.setProbablyLeft(true);
-    expect(hsConnected.combined$.value).toBe(false);
+    expect(hsConnected.combined$.value).toEqual([false, "probablyLeft"]);
 
-    // Restore notProbablyLeft -> true again
+    // Restore notProbablyLeft → connected again
     session.setProbablyLeft(false);
-    expect(hsConnected.combined$.value).toBe(true);
+    expect(hsConnected.combined$.value).toEqual([true, null]);
 
-    // Drop sync -> false
+    // Drop sync → syncing reason
     client.setSyncState(SyncState.Error);
-    expect(hsConnected.combined$.value).toBe(false);
+    expect(hsConnected.combined$.value).toEqual([false, "sync"]);
+  });
+});
+
+describe("createHomeserverConnected$ - combined$ reason values", () => {
+  let scope: ObservableScope;
+  let client: MockMatrixClient;
+  let session: MockMatrixRTCSession;
+
+  beforeEach(() => {
+    scope = new ObservableScope();
+    // Start with sync failing and membership disconnected
+    client = new MockMatrixClient(SyncState.Error);
+    session = new MockMatrixRTCSession({
+      membershipStatus: Status.Disconnected,
+      probablyLeft: false,
+    });
+  });
+
+  afterEach(() => {
+    scope.end();
+  });
+
+  it("is [true, null] when all three conditions are satisfied", () => {
+    const { combined$ } = createHomeserverConnected$(scope, client, session, 0);
+    client.setSyncState(SyncState.Syncing);
+    session.setMembershipStatus(Status.Connected);
+    expect(combined$.value).toEqual([true, null]);
+  });
+
+  it("reports syncing when sync loop is not Syncing", () => {
+    const { combined$ } = createHomeserverConnected$(scope, client, session, 0);
+    // client starts with SyncState.Error, membership also disconnected
+    expect(combined$.value).toEqual([false, "sync"]);
+  });
+
+  it("reports membershipConnected when sync is fine but membership is not Connected", () => {
+    const { combined$ } = createHomeserverConnected$(scope, client, session, 0);
+    client.setSyncState(SyncState.Syncing);
+    // session still Status.Disconnected
+    expect(combined$.value).toEqual([false, "membership"]);
+  });
+
+  it("reports certainlyConnected when probablyLeft is true", () => {
+    const { combined$ } = createHomeserverConnected$(scope, client, session, 0);
+    client.setSyncState(SyncState.Syncing);
+    session.setMembershipStatus(Status.Connected);
+    session.setProbablyLeft(true);
+    expect(combined$.value).toEqual([false, "probablyLeft"]);
+  });
+
+  it("prioritises syncing over membershipConnected when both fail", () => {
+    const { combined$ } = createHomeserverConnected$(scope, client, session, 0);
+    // Both sync (Error) and membership (Disconnected) are failing
+    expect(combined$.value).toEqual([false, "sync"]);
+  });
+
+  it("updates reason as conditions change", () => {
+    const { combined$ } = createHomeserverConnected$(scope, client, session, 0);
+    // Initially: syncing fails
+    expect(combined$.value).toEqual([false, "sync"]);
+
+    // Fix sync → membershipConnected is now the blocker
+    client.setSyncState(SyncState.Syncing);
+    expect(combined$.value).toEqual([false, "membership"]);
+
+    // Fix membership → probablyLeft makes certainlyConnected fail
+    session.setProbablyLeft(true);
+    session.setMembershipStatus(Status.Connected);
+    expect(combined$.value).toEqual([false, "probablyLeft"]);
+
+    // Clear probablyLeft → all conditions satisfied
+    session.setProbablyLeft(false);
+    expect(combined$.value).toEqual([true, null]);
+  });
+});
+
+describe("createHomeserverConnected$ - Grace Period", () => {
+  const GRACE_PERIOD = 5;
+
+  function marbleTest(
+    syncStateMarbles: string,
+    expectedConnectedMarbles: string,
+  ): void {
+    withTestScheduler(({ behavior, schedule, expectObservable }) => {
+      const syncState$ = behavior(syncStateMarbles, {
+        s: SyncState.Syncing,
+        e: SyncState.Error,
+      });
+      const client = new MockMatrixClient(syncState$.value);
+      schedule(syncStateMarbles, {
+        s: () => client.setSyncState(SyncState.Syncing),
+        e: () => client.setSyncState(SyncState.Error),
+      });
+      const session = new MockMatrixRTCSession({
+        membershipStatus: Status.Connected,
+        probablyLeft: false,
+      });
+      const hsConnected = createHomeserverConnected$(
+        testScope(),
+        client,
+        session,
+        GRACE_PERIOD,
+      );
+      expectObservable(hsConnected.combined$).toBe(expectedConnectedMarbles, {
+        y: [true, null],
+        n: [false, "sync"],
+      });
+    });
+  }
+
+  it("respects gracePeriodMs: stays true during grace period and flips false after", () => {
+    // - Initial state: Everything is connected
+    // - Sync error occurs -> should remain connected due to grace period
+    // - After grace period, not connected
+    marbleTest("se", "y-----n");
+    // If the sync error takes longer to occur, it should take equally long for
+    // the connection state to change
+    marbleTest("s--e", "y-------n");
+  });
+
+  it("recovers immediately if sync returns during grace period", () => {
+    // - Initial state: Connected
+    // - Sync error occurs
+    // - Sync recovers BEFORE the grace period expires
+    // - Connection state remains constant
+    marbleTest("se--s", "y");
+  });
+
+  it("flips to true IMMEDIATELY even if a grace period was pending", () => {
+    // - Initial error: connection eventually flips to false
+    // - Back to Syncing -> Must be connected immediately (synchronously)
+    marbleTest("e-----s", "y----ny");
   });
 });

src/state/CallViewModel/localMember/HomeserverConnected.ts

@@ -12,12 +12,23 @@ import {
   type MatrixRTCSession,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { ClientEvent, type MatrixClient, SyncState } from "matrix-js-sdk";
-import { fromEvent, startWith, map, tap, type Observable } from "rxjs";
+import {
+  fromEvent,
+  startWith,
+  map,
+  tap,
+  type Observable,
+  distinctUntilChanged,
+  switchMap,
+  of,
+  delay,
+  combineLatest,
+} from "rxjs";
 import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
 
+import { Config } from "../../../config/Config";
 import { type ObservableScope } from "../../ObservableScope";
 import { type Behavior } from "../../Behavior";
-import { and$ } from "../../../utils/observable";
 import { type NodeStyleEventEmitter } from "../../../utils/test";
 
 /**
@@ -25,8 +36,14 @@ import { type NodeStyleEventEmitter } from "../../../utils/test";
  */
 const logger = rootLogger.getChild("[HomeserverConnected]");
 
+export type HomeserverDisconnectReason = "sync" | "membership" | "probablyLeft";
+
 export interface HomeserverConnected {
-  combined$: Behavior<boolean>;
+  /**
+   * Emits `[true, null]` when the homeserver connection is healthy, or
+   * `[false, reason]` when one of the three sub-conditions fails.
+   */
+  combined$: Behavior<[boolean, HomeserverDisconnectReason | null]>;
   rtsSession$: Behavior<Status>;
 }
 
@@ -34,29 +51,48 @@ export interface HomeserverConnected {
  * Behavior representing whether we consider ourselves connected to the Matrix homeserver
  * for the purposes of a MatrixRTC session.
  *
- * Becomes FALSE if ANY sub-condition is fulfilled:
- * 1. Sync loop is not in SyncState.Syncing
- * 2. membershipStatus !== Status.Connected
- * 3. probablyLeft === true
+ * `combined$` emits `null` when all conditions are satisfied, or the first failing
+ * reason (priority: syncing > membershipConnected > certainlyConnected):
+ * 1. Sync loop is not in SyncState.Syncing (after grace period) → "sync"
+ * 2. membershipStatus !== Status.Connected → "membership"
+ * 3. probablyLeft === true → "probablyLeft"
+ *
+ * @param scope - The observable scope for lifecycle management.
+ * @param client - The Matrix client to monitor sync state.
+ * @param matrixRTCSession - The RTC session to monitor membership.
+ * @param gracePeriodMs - Grace period in milliseconds to wait before reporting sync disconnect.
+ *                        If not provided, uses the config value (default 10000ms).
  */
 export function createHomeserverConnected$(
   scope: ObservableScope,
   client: NodeStyleEventEmitter & Pick<MatrixClient, "getSyncState">,
   matrixRTCSession: NodeStyleEventEmitter &
     Pick<MatrixRTCSession, "membershipStatus" | "probablyLeft">,
+  gracePeriodMs?: number,
 ): HomeserverConnected {
+  // Get grace period from parameter or config (default 10000ms)
+  const graceMs = gracePeriodMs ?? Config.get().sync_disconnect_grace_period_ms;
+
   const syncing$ = (
     fromEvent(client, ClientEvent.Sync) as Observable<[SyncState]>
   ).pipe(
     startWith([client.getSyncState()]),
     map(([state]) => state === SyncState.Syncing),
+    distinctUntilChanged(),
+    switchMap((isSyncing) => {
+      if (isSyncing || graceMs <= 0) {
+        return of(isSyncing);
+      }
+      return of(false).pipe(delay(graceMs), startWith(true));
+    }),
+    distinctUntilChanged(),
   );
 
   const rtsSession$ = scope.behavior<Status>(
     fromEvent(matrixRTCSession, MembershipManagerEvent.StatusChanged).pipe(
       map(() => matrixRTCSession.membershipStatus ?? Status.Unknown),
     ),
-    Status.Unknown,
+    matrixRTCSession.membershipStatus ?? Status.Unknown,
   );
 
   const membershipConnected$ = rtsSession$.pipe(
@@ -80,9 +116,22 @@ export function createHomeserverConnected$(
   );
 
   const combined$ = scope.behavior(
-    and$(syncing$, membershipConnected$, certainlyConnected$).pipe(
-      tap((connected) => {
-        logger.info(`Homeserver connected update: ${connected}`);
+    combineLatest([syncing$, membershipConnected$, certainlyConnected$]).pipe(
+      map(
+        ([syncing, membership, certainly]): [
+          boolean,
+          HomeserverDisconnectReason | null,
+        ] => {
+          if (!syncing) return [false, "sync"];
+          if (!membership) return [false, "membership"];
+          if (!certainly) return [false, "probablyLeft"];
+          return [true, null];
+        },
+      ),
+      tap(([connected, reason]) => {
+        logger.info(
+          `Homeserver connected update: ${connected ? "connected" : reason}`,
+        );
       }),
     ),
   );

src/state/CallViewModel/localMember/LocalMember.test.ts

@@ -11,13 +11,23 @@ import {
   type LivekitTransportConfig,
   type MatrixRTCSession,
 } from "matrix-js-sdk/lib/matrixrtc";
-import { describe, expect, it, vi } from "vitest";
+import {
+  describe,
+  expect,
+  it,
+  vi,
+  beforeAll,
+  afterAll,
+  beforeEach,
+} from "vitest";
 import { AutoDiscovery } from "matrix-js-sdk/lib/autodiscovery";
 import { BehaviorSubject, map, of } from "rxjs";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { type LocalParticipant, type LocalTrack } from "livekit-client";
 
-import { MatrixRTCMode } from "../../../settings/settings";
+import { PosthogAnalytics } from "../../../analytics/PosthogAnalytics";
+import { MatrixRTCMode } from "../../../config/ConfigOptions";
+import { type HomeserverDisconnectReason } from "./HomeserverConnected";
 import {
   flushPromises,
   mockConfig,
@@ -215,9 +225,13 @@ describe("LocalMembership", () => {
     createPublisherFactory: vi.fn(),
     joinMatrixRTC: async (): Promise<void> => {},
     homeserverConnected: {
-      combined$: constant(true),
+      combined$: constant<[boolean, HomeserverDisconnectReason | null]>([
+        true,
+        null,
+      ]),
       rtsSession$: constant(RTCMemberStatus.Connected),
     },
+    roomId: "!test-room-id:example.org",
   };
 
   it("throws error on missing RTC config error", () => {
@@ -667,4 +681,210 @@ describe("LocalMembership", () => {
     // expect(publishers[0].stopTracks).toHaveBeenCalled();
   });
   // TODO add tests for matrix local matrix participation.
+
+  describe("reconnecting analytics", () => {
+    beforeAll(() => {
+      mockConfig();
+    });
+
+    beforeEach(() => {
+      vi.restoreAllMocks();
+    });
+
+    afterAll(() => {
+      PosthogAnalytics.resetInstance();
+    });
+
+    it("does not fire CallReconnecting for the initial non-connected state at startup", async () => {
+      const scope = new ObservableScope();
+      const trackSpy = vi.spyOn(
+        PosthogAnalytics.instance.eventCallReconnecting,
+        "track",
+      );
+
+      // Simulate startup where membership isn't established yet
+      const hsReason$ = new BehaviorSubject<
+        [boolean, HomeserverDisconnectReason | null]
+      >([false, "membership"]);
+
+      const connectionManagerData = new ConnectionManagerData();
+      connectionManagerData.add(connectionTransportAConnected, []);
+
+      createLocalMembership$({
+        scope,
+        ...defaultCreateLocalMemberValues,
+        homeserverConnected: {
+          combined$: hsReason$,
+          rtsSession$: constant(RTCMemberStatus.Connected),
+        },
+        connectionManager: {
+          connectionManagerData$: constant(new Epoch(connectionManagerData)),
+        },
+        localTransport$: new BehaviorSubject({
+          advertised$: new BehaviorSubject(aTransport),
+          active$: new BehaviorSubject(aTransportWithSFUConfig),
+        }),
+      });
+
+      await flushPromises();
+
+      // Membership is established — call is now connected
+      hsReason$.next([true, null]);
+
+      expect(trackSpy).not.toHaveBeenCalled();
+
+      scope.end();
+    });
+
+    it("fires CallReconnecting with homeserver reason and duration when reconnected", async () => {
+      const scope = new ObservableScope();
+      const trackSpy = vi.spyOn(
+        PosthogAnalytics.instance.eventCallReconnecting,
+        "track",
+      );
+
+      const hsReason$ = new BehaviorSubject<
+        [boolean, HomeserverDisconnectReason | null]
+      >([true, null]);
+
+      const connectionManagerData = new ConnectionManagerData();
+      connectionManagerData.add(connectionTransportAConnected, []);
+
+      createLocalMembership$({
+        scope,
+        ...defaultCreateLocalMemberValues,
+        homeserverConnected: {
+          combined$: hsReason$,
+          rtsSession$: constant(RTCMemberStatus.Connected),
+        },
+        connectionManager: {
+          connectionManagerData$: constant(new Epoch(connectionManagerData)),
+        },
+        localTransport$: new BehaviorSubject({
+          advertised$: new BehaviorSubject(aTransport),
+          active$: new BehaviorSubject(aTransportWithSFUConfig),
+        }),
+      });
+
+      await flushPromises();
+
+      hsReason$.next([false, "sync"]);
+      hsReason$.next([true, null]);
+
+      expect(trackSpy).toHaveBeenCalledWith(
+        defaultCreateLocalMemberValues.roomId,
+        "sync",
+        expect.any(Number),
+      );
+
+      scope.end();
+    });
+
+    it("reports livekit reason when livekit disconnects then reconnects", async () => {
+      const scope = new ObservableScope();
+      const trackSpy = vi.spyOn(
+        PosthogAnalytics.instance.eventCallReconnecting,
+        "track",
+      );
+
+      const connectionState$ = new BehaviorSubject<ConnectionState>(
+        ConnectionState.LivekitConnected,
+      );
+      const mutableConnection = {
+        ...connectionTransportAConnected,
+        state$: connectionState$,
+      } as unknown as Connection;
+
+      const connectionManagerData = new ConnectionManagerData();
+      connectionManagerData.add(mutableConnection, []);
+
+      createLocalMembership$({
+        scope,
+        ...defaultCreateLocalMemberValues,
+        homeserverConnected: {
+          combined$: new BehaviorSubject<
+            [boolean, HomeserverDisconnectReason | null]
+          >([true, null]),
+          rtsSession$: constant(RTCMemberStatus.Connected),
+        },
+        connectionManager: {
+          connectionManagerData$: constant(new Epoch(connectionManagerData)),
+        },
+        localTransport$: new BehaviorSubject({
+          advertised$: new BehaviorSubject(aTransport),
+          active$: new BehaviorSubject(aTransportWithSFUConfig),
+        }),
+      });
+
+      await flushPromises();
+
+      connectionState$.next(ConnectionState.LivekitDisconnected);
+      connectionState$.next(ConnectionState.LivekitConnected);
+
+      expect(trackSpy).toHaveBeenCalledWith(
+        defaultCreateLocalMemberValues.roomId,
+        "livekit",
+        expect.any(Number),
+      );
+
+      scope.end();
+    });
+
+    it("fires one event per completed reconnection cycle", async () => {
+      const scope = new ObservableScope();
+      const trackSpy = vi.spyOn(
+        PosthogAnalytics.instance.eventCallReconnecting,
+        "track",
+      );
+
+      const hsReason$ = new BehaviorSubject<
+        [boolean, HomeserverDisconnectReason | null]
+      >([true, null]);
+
+      const connectionManagerData = new ConnectionManagerData();
+      connectionManagerData.add(connectionTransportAConnected, []);
+
+      createLocalMembership$({
+        scope,
+        ...defaultCreateLocalMemberValues,
+        homeserverConnected: {
+          combined$: hsReason$,
+          rtsSession$: constant(RTCMemberStatus.Connected),
+        },
+        connectionManager: {
+          connectionManagerData$: constant(new Epoch(connectionManagerData)),
+        },
+        localTransport$: new BehaviorSubject({
+          advertised$: new BehaviorSubject(aTransport),
+          active$: new BehaviorSubject(aTransportWithSFUConfig),
+        }),
+      });
+
+      await flushPromises();
+
+      hsReason$.next([false, "membership"]);
+      hsReason$.next([true, null]);
+
+      hsReason$.next([false, "probablyLeft"]);
+      hsReason$.next([false, "sync"]);
+      hsReason$.next([false, "membership"]);
+      hsReason$.next([true, null]);
+
+      expect(trackSpy).toHaveBeenCalledTimes(2);
+      expect(trackSpy).toHaveBeenNthCalledWith(
+        1,
+        defaultCreateLocalMemberValues.roomId,
+        "membership",
+        expect.any(Number),
+      );
+      expect(trackSpy).toHaveBeenNthCalledWith(
+        2,
+        defaultCreateLocalMemberValues.roomId,
+        "probablyLeft",
+        expect.any(Number),
+      );
+
+      scope.end();
+    });
+  });
 });

src/state/CallViewModel/localMember/LocalMember.ts

@@ -55,7 +55,6 @@ import { ElementWidgetActions, widget } from "../../../widget.ts";
 import { getUrlParams } from "../../../UrlParams.ts";
 import { PosthogAnalytics } from "../../../analytics/PosthogAnalytics.ts";
 import {
-  MatrixRTCMode,
   advancedScreenShare,
   screenShareResolution,
   screenShareFramerate,
@@ -63,6 +62,7 @@ import {
   screenShareCodec,
   parseResolution,
 } from "../../../settings/settings.ts";
+import { MatrixRTCMode } from "../../../config/ConfigOptions.ts";
 import { Config } from "../../../config/Config.ts";
 import {
   ConnectionState,
@@ -70,7 +70,6 @@ import {
   type FailedToStartError,
 } from "../remoteMembers/Connection.ts";
 import { type HomeserverConnected } from "./HomeserverConnected.ts";
-import { and$ } from "../../../utils/observable.ts";
 import { type LocalTransport } from "./LocalTransport.ts";
 import { areLivekitTransportsEqual } from "../remoteMembers/MatrixLivekitMembers.ts";
 
@@ -138,6 +137,7 @@ interface Props {
   createPublisherFactory: (connection: Connection) => Publisher;
   joinMatrixRTC: (transport: LivekitTransportConfig) => void;
   homeserverConnected: HomeserverConnected;
+  roomId: string;
   localTransport$: Behavior<LocalTransport>;
   matrixRTCSession: Pick<
     MatrixRTCSession,
@@ -161,6 +161,7 @@ interface Props {
  * @param props.logger The logger to use.
  * @param props.muteStates The mute states for video and audio.
  * @param props.matrixRTCSession The matrix RTC session to join.
+ * @param props.roomId The room ID used as the call identifier in analytics events.
  * @returns
  *  - publisher: The handle to create tracks and publish them to the room.
  *  - connected$: the current connection state. Including matrix server and livekit server connection. (only considering the livekit server we are using for our own media publication)
@@ -178,6 +179,7 @@ export const createLocalMembership$ = ({
   logger: parentLogger,
   muteStates,
   matrixRTCSession,
+  roomId: roomId,
 }: Props): {
   /**
    * This request to start audio and video tracks.
@@ -503,20 +505,35 @@ export const createLocalMembership$ = ({
   );
 
   /**
-   * Whether we are "fully" connected to the call. Accounts for both the
-   * connection to the MatrixRTC session and the LiveKit publish connection.
+   * The disconnect reason for the combined Matrix + LiveKit connection, or null
+   * when fully connected. Homeserver reasons take priority over livekit.
+   * Both connectivity state and reason come from the same combineLatest emission,
+   * avoiding any race between the two.
    */
-  const matrixAndLivekitConnected$ = scope.behavior(
-    and$(
+  const connectionDisconnectReason$ = scope.behavior(
+    combineLatest([
       homeserverConnected.combined$,
       localConnectionState$.pipe(
         map((state) => state === ConnectionState.LivekitConnected),
       ),
-    ).pipe(
+    ]).pipe(
+      map(([[hsConnected, hsReason], livekitConnected]) => {
+        if (!hsConnected) return hsReason!;
+        if (!livekitConnected) return "livekit" as const;
+        return null;
+      }),
       tap((v) => logger.debug("livekit+matrix: Connected state changed", v)),
     ),
   );
 
+  /**
+   * Whether we are "fully" connected to the call. Accounts for both the
+   * connection to the MatrixRTC session and the LiveKit publish connection.
+   */
+  const matrixAndLivekitConnected$ = scope.behavior(
+    connectionDisconnectReason$.pipe(map((reason) => reason === null)),
+  );
+
   /**
    * Whether we should tell the user that we're reconnecting to the call.
    */
@@ -528,6 +545,33 @@ export const createLocalMembership$ = ({
     false,
   );
 
+  let reconnectStart: {
+    time: number;
+    reason: NonNullable<(typeof connectionDisconnectReason$)["value"]>;
+  } | null = null;
+  connectionDisconnectReason$
+    .pipe(distinctUntilChanged(), pairwise(), scope.bind())
+    .subscribe(([prev, reason]) => {
+      if (reason !== null) {
+        // Only begin tracking when transitioning FROM connected (null → non-null).
+        // This prevents the initial startup phase — where we may be non-null before
+        // the first real connection — from being counted as a reconnect.
+        if (prev === null) {
+          reconnectStart ??= { time: Date.now(), reason };
+        }
+      } else if (reconnectStart !== null) {
+        PosthogAnalytics.instance.eventCallReconnecting.track(
+          roomId,
+          reconnectStart.reason,
+          (Date.now() - reconnectStart.time) / 1000,
+        );
+        PosthogAnalytics.instance.eventCallEnded.cacheReconnecting(
+          reconnectStart.reason,
+        );
+        reconnectStart = null;
+      }
+    });
+
   // inform the widget about the connect and disconnect intent from the user.
   scope
     .behavior(joinAndPublishRequested$.pipe(pairwise(), scope.bind()), [
@@ -615,7 +659,7 @@ export const createLocalMembership$ = ({
   // TODO refactor this based no livekitState$
   combineLatest([participant$, homeserverConnected.combined$])
     .pipe(scope.bind())
-    .subscribe(([participant, connected]) => {
+    .subscribe(([participant, [connected]]) => {
       if (!participant) return;
       const publications = participant.trackPublications.values();
       if (connected) {
@@ -828,6 +872,19 @@ export function enterRTCSession(
     };
   }
 
+  // Calculates `maximumNetworkErrorRetryCount`. The connection is failed if EITHER:
+  // - The /sync loop is unresponsive for > `gracePeriod` ms, or
+  // - A delayed leave event is emitted (after `leaveDelay` ms period).
+  // Note: Use leaveDelay >> gracePeriod for delegated leave events.
+  const gracePeriod = Config.get().sync_disconnect_grace_period_ms;
+  const leaveDelay = matrixRtcSessionConfig?.delayed_leave_event_delay_ms;
+  const retryInterval = matrixRtcSessionConfig?.network_error_retry_ms;
+
+  // Math.min is used to account for the respective worst case: /sync not available or leave event emitted.
+  const maxWaitTime = Math.min(gracePeriod, leaveDelay);
+  const maximumNetworkErrorRetryCount =
+    Math.ceil(maxWaitTime / retryInterval) + 1;
+
   // Multi-sfu does not need a preferred foci list. just the focus that is actually used.
   // TODO where/how do we track errors originating from the ongoing rtcSession?
 
@@ -853,6 +910,7 @@ export function enterRTCSession(
       membershipEventExpiryMs:
         matrixRtcSessionConfig?.membership_event_expiry_ms,
       unstableSendStickyEvents: matrixRTCMode === MatrixRTCMode.Matrix_2_0,
+      maximumNetworkErrorRetryCount: maximumNetworkErrorRetryCount,
     },
   );
 }

src/state/CallViewModel/localMember/Publisher.test.ts

@@ -63,6 +63,7 @@ function createMockLocalTrack(source: Track.Source): LocalTrack {
 
 function createMockMuteState(enabled$: BehaviorSubject<boolean>): {
   enabled$: BehaviorSubject<boolean>;
+  syncing$: BehaviorSubject<boolean>;
   setHandler: (h: (enabled: boolean) => void) => void;
   unsetHandler: () => void;
 } {
@@ -70,6 +71,7 @@ function createMockMuteState(enabled$: BehaviorSubject<boolean>): {
 
   const ms = {
     enabled$,
+    syncing$: new BehaviorSubject(false),
     setHandler: vi.fn().mockImplementation((h: (enabled: boolean) => void) => {
       currentHandler = h;
     }),
@@ -132,6 +134,7 @@ beforeEach(() => {
     new Map(),
     {},
     {},
+    {},
   );
 
   vi.mocked(localParticipant).createTracks = vi

src/state/CallViewModel/localMember/Publisher.ts

@@ -112,27 +112,49 @@ export class Publisher {
     this.logger.info("Local track published", localTrackPublication);
     const lkRoom = this.connection.livekitRoom;
     if (!this.shouldPublish) {
+      this.logger.debug("Not publishing, pausing upstream");
       this.pauseUpstreams(lkRoom, [localTrackPublication.source]).catch((e) => {
         this.logger.error(`Failed to pause upstreams`, e);
       });
     }
-    // also check the mute state and apply it
     if (localTrackPublication.source === Track.Source.Microphone) {
-      const enabled = this.muteStates.audio.enabled$.value;
-      lkRoom.localParticipant.setMicrophoneEnabled(enabled).catch((e) => {
-        this.logger.error(
-          `Failed to enable microphone track, enabled:${enabled}`,
-          e,
-        );
-      });
+      const muteState = this.muteStates.audio;
+      // skip this if a sync is in progress: enabled$ still reflects the old
+      // state while the handler is mid-flight, so the handler itself will apply
+      // the correct mute state once it completes.
+      if (!muteState.syncing$.value) {
+        const enabled = muteState.enabled$.value;
+        if (!enabled) {
+          this.logger.info(
+            "Local audio track just published but muted meanwhile, setting enabled to false",
+          );
+          lkRoom.localParticipant.setMicrophoneEnabled(false).catch((e) => {
+            this.logger.error(
+              `Failed to enable microphone track, enabled:${enabled}`,
+              e,
+            );
+          });
+        }
+      }
     } else if (localTrackPublication.source === Track.Source.Camera) {
-      const enabled = this.muteStates.video.enabled$.value;
-      lkRoom.localParticipant.setCameraEnabled(enabled).catch((e) => {
-        this.logger.error(
-          `Failed to enable camera track, enabled:${enabled}`,
-          e,
-        );
-      });
+      const muteState = this.muteStates.video;
+      // skip this if a sync is in progress: enabled$ still reflects the old
+      // state while the handler is mid-flight, so the handler itself will apply
+      // the correct mute state once it completes.
+      if (!muteState.syncing$.value) {
+        const enabled = muteState.enabled$.value;
+        if (!enabled) {
+          this.logger.info(
+            "Local video track just published but muted meanwhile, setting enabled to false",
+          );
+          lkRoom.localParticipant.setCameraEnabled(false).catch((e) => {
+            this.logger.error(
+              `Failed to enable camera track, enabled:${enabled}`,
+              e,
+            );
+          });
+        }
+      }
     }
   }
   /**
@@ -379,10 +401,11 @@ export class Publisher {
         if (!this.shouldPublish && enable) {
           await this.pauseUpstreams(lkRoom, [Track.Source.Microphone]);
         }
+        return enable;
       } catch (e) {
         this.logger.error("Failed to update LiveKit audio input mute state", e);
+        return lkRoom.localParticipant.isMicrophoneEnabled;
       }
-      return lkRoom.localParticipant.isMicrophoneEnabled;
     });
     this.muteStates.video.setHandler(async (enable) => {
       try {
@@ -393,10 +416,11 @@ export class Publisher {
         if (!this.shouldPublish && enable) {
           await this.pauseUpstreams(lkRoom, [Track.Source.Camera]);
         }
+        return enable;
       } catch (e) {
         this.logger.error("Failed to update LiveKit video input mute state", e);
+        return lkRoom.localParticipant.isCameraEnabled;
       }
-      return lkRoom.localParticipant.isCameraEnabled;
     });
   }
 

src/state/CallViewModel/remoteMembers/Connection.test.ts

@@ -260,7 +260,10 @@ describe("Start connection states", () => {
       await deferredSFU.promise;
       return {
         status: 500,
-        body: "Internal Server Error",
+        body: {
+          errcode: "M_LOOKUP_FAILED",
+          error: "Failed to look up user info from homeserver",
+        },
       };
     });
 
@@ -282,7 +285,7 @@ describe("Start connection states", () => {
       capturedState.cause instanceof Error
     ) {
       expect(capturedState.cause.message).toContain(
-        "SFU Config fetch failed with status code 500",
+        "Failed to look up user info from homeserver",
       );
       expect(connection.transport.livekit_alias).toEqual(
         livekitFocus.livekit_alias,

src/state/CallViewModel/remoteMembers/Connection.ts

@@ -12,8 +12,9 @@ import {
 } from "@livekit/components-core";
 import {
   ConnectionError,
-  type Room as LivekitRoom,
+  ConnectionErrorReason,
   type RemoteParticipant,
+  type Room as LivekitRoom,
 } from "livekit-client";
 import { type LivekitTransportConfig } from "matrix-js-sdk/lib/matrixrtc";
 import { BehaviorSubject, map } from "rxjs";
@@ -30,6 +31,8 @@ import { type ObservableScope } from "../../ObservableScope.ts";
 import {
   ElementCallError,
   InsufficientCapacityError,
+  LivekitConnectionError,
+  PeerConnectionTimeoutError,
   SFURoomCreationRestrictedError,
   UnknownCallError,
 } from "../../../utils/errors.ts";
@@ -248,6 +251,13 @@ export class Connection {
             // In the first case there will not be a 404, so we are in the second case.
             throw new SFURoomCreationRestrictedError();
           }
+
+          if (e.reason === ConnectionErrorReason.Timeout) {
+            // Unabled to establish peer connection within the timeout
+            throw new PeerConnectionTimeoutError();
+          }
+
+          throw new LivekitConnectionError(e);
         }
         throw e;
       }

src/state/CallViewModelWidget.test.ts

@@ -15,7 +15,7 @@ import { constant } from "./Behavior.ts";
 import { aliceParticipant, localRtcMember } from "../utils/test-fixtures.ts";
 import { ElementWidgetActions, widget } from "../widget.ts";
 import { E2eeType } from "../e2ee/e2eeType.ts";
-import { MatrixRTCMode } from "../settings/settings.ts";
+import { MatrixRTCMode } from "../config/ConfigOptions.ts";
 
 vi.mock("@livekit/components-core", { spy: true });
 

src/state/GridLikeLayout.ts

@@ -5,7 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { type Layout, type LayoutMedia } from "./layout-types.ts";
+import { type BehaviorSubject } from "rxjs";
+
+import {
+  type Alignment,
+  type Layout,
+  type LayoutMedia,
+} from "./layout-types.ts";
 import { type TileStore } from "./TileStore";
 
 export type GridLikeLayoutType =
@@ -19,6 +25,7 @@ export type GridLikeLayoutType =
  */
 export function gridLikeLayout(
   media: LayoutMedia & { type: GridLikeLayoutType },
+  spotlightAlignment$: BehaviorSubject<Alignment>,
   visibleTiles: number,
   setVisibleTiles: (value: number) => void,
   prevTiles: TileStore,
@@ -37,6 +44,7 @@ export function gridLikeLayout(
       type: media.type,
       spotlight: tiles.spotlightTile,
       grid: tiles.gridTiles,
+      spotlightAlignment$,
       setVisibleTiles,
     } as Layout & { type: GridLikeLayoutType },
     tiles,

src/state/MuteStates.test.ts

@@ -92,6 +92,75 @@ describe("MuteState", () => {
     await flushPromises();
     expect(lastEnabled).toBe(true);
   });
+
+  test("should ignore toggle while syncing but still process set requests", async () => {
+    const deviceStub = {
+      available$: constant(
+        new Map<string, DeviceLabel>([
+          ["mic", { type: "name", name: "Microphone" }],
+        ]),
+      ),
+      selected$: constant({ id: "mic" }),
+      select(): void {},
+    } as unknown as MediaDevice<DeviceLabel, SelectedDevice>;
+
+    const muteState = new MuteState(
+      testScope,
+      deviceStub,
+      false,
+      constant(false),
+    );
+
+    const first = Promise.withResolvers<boolean>();
+    const second = Promise.withResolvers<boolean>();
+    const handler = vi
+      .fn<(desired: boolean) => Promise<boolean>>()
+      .mockImplementationOnce(async () => first.promise)
+      .mockImplementationOnce(async () => second.promise);
+    muteState.setHandler(handler);
+
+    const syncingValues: boolean[] = [];
+    muteState.syncing$.subscribe((syncing) => {
+      syncingValues.push(syncing);
+    });
+
+    let setEnabled: ((enabled: boolean) => void) | null = null;
+    muteState.setEnabled$.subscribe((setter) => {
+      setEnabled = setter;
+    });
+    let toggle: (() => void) | null = null;
+    muteState.toggle$.subscribe((toggleFn) => {
+      toggle = toggleFn;
+    });
+
+    await flushPromises();
+
+    // Start syncing by requesting unmute.
+    toggle!();
+    await flushPromises();
+    expect(handler).toHaveBeenCalledTimes(1);
+    expect(handler).toHaveBeenNthCalledWith(1, true);
+
+    // Toggle requests are ignored while syncing.
+    toggle!();
+    await flushPromises();
+    expect(handler).toHaveBeenCalledTimes(1);
+
+    // setEnabled still updates latest desired state while syncing (push-to-talk).
+    setEnabled!(false);
+    await flushPromises();
+    expect(handler).toHaveBeenCalledTimes(1);
+
+    first.resolve(true);
+    await flushPromises();
+    expect(handler).toHaveBeenCalledTimes(2);
+    expect(handler).toHaveBeenNthCalledWith(2, false);
+
+    second.resolve(false);
+    await flushPromises();
+    expect(syncingValues).toContain(true);
+    expect(syncingValues.at(-1)).toBe(false);
+  });
 });
 
 describe("MuteStates", () => {

src/state/MuteStates.ts

@@ -30,6 +30,7 @@ import { type Behavior, constant } from "./Behavior";
 
 interface MuteStateData {
   enabled$: Observable<boolean>;
+  syncing$: Observable<boolean>;
   set: ((enabled: boolean) => void) | null;
   toggle: (() => void) | null;
 }
@@ -79,33 +80,40 @@ export class MuteState<Label, Selected> {
           this.handler$.value(false).catch((err) => {
             logger.error("MuteState-disable: handler error", err);
           });
-          return { enabled$: of(false), set: null, toggle: null };
+          return {
+            enabled$: of(false),
+            syncing$: of(false),
+            set: null,
+            toggle: null,
+          };
         }
 
         // Assume the default value only once devices are actually connected
         let enabled = this.enabledByDefault;
         const set$ = new Subject<boolean>();
         const toggle$ = new Subject<void>();
+        const syncing$ = new BehaviorSubject(false);
         const desired$ = merge(set$, toggle$.pipe(map(() => !enabled)));
         const enabled$ = new Observable<boolean>((subscriber) => {
           subscriber.next(enabled);
           let latestDesired = this.enabledByDefault;
-          let syncing = false;
 
           const sync = async (): Promise<void> => {
-            if (enabled === latestDesired) syncing = false;
-            else {
+            if (enabled === latestDesired) {
+              syncing$.next(false);
+            } else {
               const previouslyEnabled = enabled;
+              syncing$.next(true);
               enabled = await firstValueFrom(
                 this.handler$.pipe(
                   switchMap(async (handler) => handler(latestDesired)),
                 ),
               );
               if (enabled === previouslyEnabled) {
-                syncing = false;
+                syncing$.next(false);
               } else {
                 subscriber.next(enabled);
-                syncing = true;
+                syncing$.next(true);
                 sync().catch((err) => {
                   // TODO: better error handling
                   logger.error("MuteState: handler error", err);
@@ -116,21 +124,28 @@ export class MuteState<Label, Selected> {
 
           const s = desired$.subscribe((desired) => {
             latestDesired = desired;
-            if (syncing === false) {
-              syncing = true;
+            if (syncing$.value === false) {
+              syncing$.next(true);
               sync().catch((err) => {
                 // TODO: better error handling
                 logger.error("MuteState: handler error", err);
               });
             }
           });
-          return (): void => s.unsubscribe();
+          return (): void => {
+            s.unsubscribe();
+            syncing$.complete();
+          };
         });
 
         return {
           set: (enabled: boolean): void => set$.next(enabled),
-          toggle: (): void => toggle$.next(),
+          toggle: (): void => {
+            if (syncing$.value) return;
+            toggle$.next();
+          },
           enabled$,
+          syncing$,
         };
       }),
     ),
@@ -147,6 +162,10 @@ export class MuteState<Label, Selected> {
     this.data$.pipe(map(({ toggle }) => toggle)),
   );
 
+  public readonly syncing$: Behavior<boolean> = this.scope.behavior(
+    this.data$.pipe(switchMap(({ syncing$ }) => syncing$)),
+  );
+
   public constructor(
     private readonly scope: ObservableScope,
     private readonly device: MediaDevice<Label, Selected>,

src/state/OneOnOneLandscapeLayout.ts

@@ -1,29 +1,39 @@
 /*
 Copyright 2024 New Vector Ltd.
+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 { type OneOnOneLayout, type OneOnOneLayoutMedia } from "./layout-types";
+import { type BehaviorSubject } from "rxjs";
+
+import {
+  type Alignment,
+  type OneOnOneLandscapeLayout,
+  type OneOnOneLandscapeLayoutMedia,
+} from "./layout-types";
 import { type TileStore } from "./TileStore";
 
 /**
- * Produces a one-on-one layout with the given media.
+ * Produces a one-on-one landscape layout with the given media.
  */
-export function oneOnOneLayout(
-  media: OneOnOneLayoutMedia,
+export function oneOnOneLandscapeLayout(
+  media: OneOnOneLandscapeLayoutMedia,
+  pipAlignment$: BehaviorSubject<Alignment>,
   prevTiles: TileStore,
-): [OneOnOneLayout, TileStore] {
+): [OneOnOneLandscapeLayout, TileStore] {
   const update = prevTiles.from(2);
   update.registerGridTile(media.pip);
   update.registerGridTile(media.spotlight);
   const tiles = update.build();
+
   return [
     {
       type: media.type,
       spotlight: tiles.gridTilesByMedia.get(media.spotlight)!,
       pip: tiles.gridTilesByMedia.get(media.pip)!,
+      pipAlignment$,
     },
     tiles,
   ];

src/state/OneOnOnePortraitLayout.ts

@@ -0,0 +1,43 @@
+/*
+Copyright 2024 New Vector Ltd.
+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 { type BehaviorSubject } from "rxjs";
+
+import {
+  type Alignment,
+  type OneOnOnePortraitLayout,
+  type OneOnOnePortraitLayoutMedia,
+} from "./layout-types";
+import { type TileStore } from "./TileStore";
+import { type Behavior } from "./Behavior";
+
+/**
+ * Produces a one-on-one portrait layout with the given media.
+ */
+export function oneOnOnePortraitLayout(
+  media: OneOnOnePortraitLayoutMedia,
+  pipSize$: Behavior<"sm" | "lg">,
+  pipAlignment$: BehaviorSubject<Alignment>,
+  prevTiles: TileStore,
+): [OneOnOnePortraitLayout, TileStore] {
+  const update = prevTiles.from(media.pip === undefined ? 0 : 1);
+  update.registerSpotlight([media.spotlight], true);
+  if (media.pip !== undefined) update.registerGridTile(media.pip);
+  const tiles = update.build();
+
+  return [
+    {
+      type: media.type,
+      spotlight: tiles.spotlightTile!,
+      pip: media.pip && tiles.gridTilesByMedia.get(media.pip),
+      pipSize$,
+      pipAlignment$,
+    },
+    tiles,
+  ];
+}

src/state/SpotlightExpandedLayout.ts

@@ -5,7 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
+import { type BehaviorSubject } from "rxjs";
+
 import {
+  type Alignment,
   type SpotlightExpandedLayout,
   type SpotlightExpandedLayoutMedia,
 } from "./layout-types";
@@ -16,6 +19,7 @@ import { type TileStore } from "./TileStore";
  */
 export function spotlightExpandedLayout(
   media: SpotlightExpandedLayoutMedia,
+  pipAlignment$: BehaviorSubject<Alignment>,
   prevTiles: TileStore,
 ): [SpotlightExpandedLayout, TileStore] {
   const update = prevTiles.from(1);
@@ -27,7 +31,8 @@ export function spotlightExpandedLayout(
     {
       type: media.type,
       spotlight: tiles.spotlightTile!,
-      pip: tiles.gridTiles[0],
+      pip: tiles.gridTiles.at(0),
+      pipAlignment$,
     },
     tiles,
   ];

src/state/ViewModel.ts

@@ -0,0 +1,49 @@
+/*
+Copyright 2026 Element Software Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { BehaviorSubject } from "rxjs";
+import { useState, useEffect } from "react";
+
+import { type Behavior } from "./Behavior";
+
+export type ViewModel<Snapshot> = {
+  [K in keyof Snapshot as `${string & K}$`]: Behavior<Snapshot[K]>;
+};
+
+/**
+ * This allows to build a view model (or Partial view model)
+ * with BehaviorSubjects.
+ * It can be used in tests and for simplifying view model creation for non reactive snapshot parameters.
+ *
+ * @param snapshot The snapshot values this view model with start with. ({a: number, b: string})
+ * @returns A view model: ({a$: BehaviroSubject<number>, b$: BehaviroSubject<string>}) (note the automatic addition of $ at the end of the keys)
+ */
+export function createStaticViewModel<Snapshot>(
+  snapshot: Snapshot,
+): ViewModel<Snapshot> {
+  const vm = {} as ViewModel<Snapshot>;
+  for (const key in snapshot) {
+    (vm as Record<string, Behavior<unknown>>)[`${key}$`] = new BehaviorSubject(
+      snapshot[key],
+    );
+  }
+  return vm;
+}
+
+export function useStaticViewModel<Snapshot>(
+  snapshot: Snapshot,
+): ViewModel<Snapshot> {
+  const [vm] = useState(() => createStaticViewModel(snapshot));
+  useEffect(() => {
+    for (const key in snapshot) {
+      (vm as unknown as Record<string, BehaviorSubject<unknown>>)[
+        `${key}$`
+      ].next(snapshot[key]);
+    }
+  }, [snapshot, vm]);
+  return vm;
+}

src/state/layout-types.ts

@@ -5,6 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
+import { type BehaviorSubject } from "rxjs";
+
 import { type LocalUserMediaViewModel } from "./media/LocalUserMediaViewModel.ts";
 import { type MediaViewModel } from "./media/MediaViewModel.ts";
 import { type RingingMediaViewModel } from "./media/RingingMediaViewModel.ts";
@@ -13,39 +15,53 @@ import {
   type GridTileViewModel,
   type SpotlightTileViewModel,
 } from "./TileViewModel.ts";
+import { type Behavior } from "./Behavior.ts";
 
 export interface GridLayoutMedia {
   type: "grid";
+  edgeToEdge: false;
   spotlight?: MediaViewModel[];
   grid: UserMediaViewModel[];
 }
 
 export interface SpotlightLandscapeLayoutMedia {
   type: "spotlight-landscape";
+  edgeToEdge: boolean;
   spotlight: MediaViewModel[];
   grid: UserMediaViewModel[];
 }
 
 export interface SpotlightPortraitLayoutMedia {
   type: "spotlight-portrait";
+  edgeToEdge: false;
   spotlight: MediaViewModel[];
   grid: UserMediaViewModel[];
 }
 
 export interface SpotlightExpandedLayoutMedia {
   type: "spotlight-expanded";
+  edgeToEdge: boolean;
   spotlight: MediaViewModel[];
   pip?: UserMediaViewModel;
 }
 
-export interface OneOnOneLayoutMedia {
-  type: "one-on-one";
+export interface OneOnOneLandscapeLayoutMedia {
+  type: "one-on-one-landscape";
+  edgeToEdge: false;
   spotlight: UserMediaViewModel;
   pip: LocalUserMediaViewModel | RingingMediaViewModel;
 }
 
+export interface OneOnOnePortraitLayoutMedia {
+  type: "one-on-one-portrait";
+  edgeToEdge: true;
+  spotlight: UserMediaViewModel | RingingMediaViewModel;
+  pip?: LocalUserMediaViewModel;
+}
+
 export interface PipLayoutMedia {
   type: "pip";
+  edgeToEdge: boolean;
   spotlight: MediaViewModel[];
 }
 
@@ -54,13 +70,20 @@ export type LayoutMedia =
   | SpotlightLandscapeLayoutMedia
   | SpotlightPortraitLayoutMedia
   | SpotlightExpandedLayoutMedia
-  | OneOnOneLayoutMedia
+  | OneOnOneLandscapeLayoutMedia
+  | OneOnOnePortraitLayoutMedia
   | PipLayoutMedia;
 
+export interface Alignment {
+  inline: "start" | "end";
+  block: "start" | "end";
+}
+
 export interface GridLayout {
   type: "grid";
   spotlight?: SpotlightTileViewModel;
   grid: GridTileViewModel[];
+  spotlightAlignment$: BehaviorSubject<Alignment>;
   setVisibleTiles: (value: number) => void;
 }
 
@@ -82,12 +105,22 @@ export interface SpotlightExpandedLayout {
   type: "spotlight-expanded";
   spotlight: SpotlightTileViewModel;
   pip?: GridTileViewModel;
+  pipAlignment$: BehaviorSubject<Alignment>;
 }
 
-export interface OneOnOneLayout {
-  type: "one-on-one";
+export interface OneOnOneLandscapeLayout {
+  type: "one-on-one-landscape";
   spotlight: GridTileViewModel;
   pip: GridTileViewModel;
+  pipAlignment$: BehaviorSubject<Alignment>;
+}
+
+export interface OneOnOnePortraitLayout {
+  type: "one-on-one-portrait";
+  spotlight: SpotlightTileViewModel;
+  pip?: GridTileViewModel;
+  pipSize$: Behavior<"sm" | "lg">;
+  pipAlignment$: BehaviorSubject<Alignment>;
 }
 
 export interface PipLayout {
@@ -104,5 +137,6 @@ export type Layout =
   | SpotlightLandscapeLayout
   | SpotlightPortraitLayout
   | SpotlightExpandedLayout
-  | OneOnOneLayout
+  | OneOnOneLandscapeLayout
+  | OneOnOnePortraitLayout
   | PipLayout;