Show ringing status even on spotlight tiles (except in app bar mode)

Add lint rule to prevent ObservableScope resource leaks

.eslintrc.cjs

@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
 `;
 
 module.exports = {
-  plugins: ["matrix-org", "rxjs", "jsdoc"],
+  plugins: ["matrix-org", "rxjs", "jsdoc", "element-call"],
   extends: [
     "plugin:matrix-org/react",
     "plugin:matrix-org/a11y",
@@ -27,6 +27,7 @@ module.exports = {
     node: true,
   },
   rules: {
+    "element-call/no-observablescope-leak": "error",
     "jsdoc/no-types": "error",
     "jsdoc/empty-tags": "error",
     "jsdoc/check-property-names": "error",
@@ -92,6 +93,9 @@ module.exports = {
         "**/test-**",
       ],
       rules: {
+        // Tests often initialize an ObservableScope in an outer scope in
+        // beforeEach, which is not actually a problem
+        "element-call/no-observablescope-leak": "off",
         "jsdoc/no-types": "off",
         "jsdoc/empty-tags": "off",
         "jsdoc/check-property-names": "off",

.github/labels.yml

@@ -0,0 +1,253 @@
+- name: "A-1:1"
+  description: "Calls between two people"
+  color: "bfd4f2"
+- name: "A-Big-Grid"
+  description: "The freedom layout system used for >12 participants"
+  color: "bfd4f2"
+- name: "A-Developer-Experience"
+  description: "Workflow of developing: building, linting, debugging, profiling, etc."
+  color: "c5def5"
+- name: "A-E2EE"
+  description: "End-to-end encryption"
+  color: "bfd4f2"
+- name: "A-Embedded"
+  description: "Using the app embedded within other Matrix clients (as a widget)"
+  color: "bfd4f2"
+- name: "A-Feedback-Reporting"
+  description: "Reporting process for bugs, debug logs (rageshakes), suggestions"
+  color: "bfd4f2"
+- name: "A-Freedom"
+  description: "Freedom layout, where participants can be rearranged and resized"
+  color: "bfd4f2"
+- name: "A-Handset"
+  description: "Audio playback through the earpiece of a phone. Also known as 'earpiece mode' or 'handset mode'."
+  color: "bfd4f2"
+- name: "A-Huddle"
+  description: "Ad-hoc calls in a room notifying others"
+  color: "bfd4f2"
+- name: "A-Lobby"
+  description: "The page before joining a call"
+  color: "bfd4f2"
+- name: "A-Login"
+  color: "bfd4f2"
+- name: "A-Matrix2.0"
+  description: "Issues relating to the Matrix 2.0 / MSC4143 work, such as sticky events and multi-sfu"
+  color: "bfd4f2"
+- name: "A-Media-Devices"
+  color: "BFD4F2"
+- name: "A-Media-Quality"
+  description: "Distortions or glitches in audio/video"
+  color: "bfd4f2"
+- name: "A-Meeting"
+  description: "Scheduled call on the calendar"
+  color: "bfd4f2"
+- name: "A-Mobile"
+  description: "Using the app on a mobile device"
+  color: "bfd4f2"
+- name: "A-Moderation"
+  description: "Access to calls and powers within calls"
+  color: "bfd4f2"
+- name: "A-Performance"
+  color: "bfd4f2"
+- name: "A-Reactions"
+  color: "bfd4f2"
+- name: "A-Registration"
+  color: "bfd4f2"
+- name: "A-Screen-Sharing"
+  color: "bfd4f2"
+- name: "A-SDK"
+  description: "SDK for building MatrixRTC + LiveKit widgets"
+  color: "c5def5"
+- name: "A-Settings"
+  color: "bfd4f2"
+- name: "A-SFU"
+  description: "Routing calls through a selective forwarding unit"
+  color: "bfd4f2"
+- name: "A-Signaling"
+  description: "Call signaling"
+  color: "bfd4f2"
+- name: "A-Simulcast"
+  description: "Automatic selection of variable video resolutions"
+  color: "bfd4f2"
+- name: "A-SPA"
+  description: "Standalone application accessed via call links"
+  color: "bfd4f2"
+- name: "A-Spatial-Audio"
+  description: "Directional audio based on where a speaker appears on screen"
+  color: "bfd4f2"
+- name: "A-Speech-Enhancement"
+  description: "Techniques to enhance the intelligibility of speech in calls"
+  color: "c5def5"
+- name: "A-Split-Grid"
+  description: "The freedom layout system used for ≤12 participants"
+  color: "bfd4f2"
+- name: "A-Spotlight"
+  description: "Spotlight layout, where the active speaker is foregrounded"
+  color: "bfd4f2"
+- name: "A-Telemetry-Posthog"
+  description: "Share opt in usage data for optimizing the app via posthog"
+  color: "bfd4f2"
+- name: "A-Testing"
+  description: "Integration tests, unit tests, etc."
+  color: "bfd4f2"
+- name: "A-Video-Rooms"
+  description: "Rooms reserved exclusively for calling"
+  color: "bfd4f2"
+- name: "A-Walkie-Talkie"
+  description: "Walkie-talkie / PTT (push-to-talk) mode"
+  color: "bfd4f2"
+- name: "A11y"
+  description: "Accessibility"
+  color: "4ADEC0"
+- name: "backport-candidate"
+  description: "Something that is a candidate for backport to a particular release branch"
+  color: "0B8D85"
+- name: "customer-retainer"
+  color: "F44A5F"
+- name: "dependencies"
+  description: "Pull requests that update a dependency file"
+  color: "0366d6"
+- name: "development build"
+  description: "runs yarn build process in development mode"
+  color: "1d76db"
+- name: "Discord"
+  description: "Use case familiar to Discord users"
+  color: "3670d2"
+- name: "docker build"
+  description: "Creates a docker image for this PR"
+  color: "0e8a16"
+- name: "EPIC"
+  color: "5319E7"
+- name: "good first issue"
+  description: "Good for newcomers"
+  color: "7057ff"
+- name: "Help Wanted"
+  description: "Community contributions are welcome!"
+  color: "159818"
+- name: "I18n"
+  description: "Internationalisation"
+  color: "d4c5f9"
+- name: "O-Frequent"
+  description: "Affects or can be seen by most users regularly or impacts most users' first experience"
+  color: "0052CC"
+- name: "O-Occasional"
+  description: "Affects or can be seen by some users regularly or most users rarely"
+  color: "1D76DB"
+- name: "O-Uncommon"
+  description: "Most users are unlikely to come across this or unexpected workflow"
+  color: "C5DEF5"
+- name: "p1"
+  description: "Must fix/implement before this is usable as a product"
+  color: "D93F0B"
+- name: "p2"
+  description: "Should fix/implement, but not at the expense of p1s"
+  color: "FBCA04"
+- name: "p3"
+  description: "Could fix/implement when time allows"
+  color: "0E8A16"
+- name: "PR-Breaking-Change"
+  description: "A Pull request that changes EC in a way that is incompatible to the previous version."
+  color: "D93F0B"
+- name: "PR-Bug-Fix"
+  description: "Release note category. A PR that fixes a bug."
+  color: "C2E0C6"
+- name: "PR-Developer-Experience"
+  description: "Release note category. A PR that does not change EC but improves working with the repository."
+  color: "C2E0C6"
+- name: "PR-Documentation"
+  description: "Release note category. A PR that improves the documentation."
+  color: "C2E0C6"
+- name: "PR-Feature"
+  description: "Release note category. A PR that introduces a new user facing feature."
+  color: "C2E0C6"
+- name: "PR-Improvement"
+  description: "Release note category. A PR that improves EC's performance or stability."
+  color: "C2E0C6"
+- name: "PR-Task"
+  description: "Release note category. A PR that is hidden from release note."
+  color: "C2E0C6"
+- name: "Privacy"
+  color: "f41192"
+- name: "Roadmap"
+  color: "57457E"
+- name: "S-Critical"
+  description: "Prevents work, causes data loss and/or has no workaround"
+  color: "bd0026"
+- name: "S-Major"
+  description: "Severely degrades major functionality or product features, with no satisfactory workaround"
+  color: "fc4e2a"
+- name: "S-Minor"
+  description: "Impairs non-critical functionality or suitable workarounds exist"
+  color: "feb24c"
+- name: "S-Tolerable"
+  description: "Low/no impact on users"
+  color: "ffeda0"
+- name: "Security"
+  color: "b3e5fc"
+- name: "storybook build"
+  description: "Build and deploy the storybook frontend to netlify."
+  color: "45cd61"
+- name: "T-Defect"
+  description: "Something isn't working: bugs, crashes, hangs, vulnerabilities, or other reported problems"
+  color: "98e6ae"
+- name: "T-Enhancement"
+  description: "New features, changes in functionality, performance boosts, user-facing improvements"
+  color: "98e6ae"
+- name: "T-Other"
+  description: "Questions, user support, anything else"
+  color: "98e6ae"
+- name: "T-Task"
+  description: "Refactoring, enabling or disabling functionality, other engineering tasks"
+  color: "98e6ae"
+- name: "X-Blocked"
+  description: "Cannot be merged due to external dependencies"
+  color: "ff7979"
+- name: "X-Cannot-Reproduce"
+  description: "Needs reproduction steps"
+  color: "ff7979"
+- name: "X-Needs-Design"
+  description: "May require input from the design team"
+  color: "ff7979"
+- name: "X-Needs-Info"
+  description: "This issue is blocked awaiting information from the reporter"
+  color: "ff7979"
+- name: "X-Needs-Investigation"
+  color: "ff7979"
+- name: "X-Needs-Product"
+  description: "More input needed from the Product team"
+  color: "ff7979"
+- name: "X-Regression"
+  color: "ff7979"
+- name: "X-Release-Blocker"
+  color: "ff7979"
+- name: "X-Spec-Changes"
+  description: "May require spec changes"
+  color: "ff7979"
+- name: "X-Won't-Fix"
+  description: "This will not be worked on"
+  color: "ff7979"
+- name: "Z-Community-Testing"
+  description: "Issues found during the community testing sessions"
+  color: "efefef"
+- name: "Z-Could"
+  color: "ededed"
+- name: "Z-Design"
+  color: "ededed"
+- name: "Z-Flaky-Test"
+  color: "aaaaaa"
+- name: "Z-Media-Failure"
+  description: "Someone's audio or video isn't coming through"
+  color: "ededed"
+- name: "Z-Must"
+  color: "ededed"
+- name: "Z-Platform-Specific"
+  color: "ededed"
+- name: "Z-Power-Users"
+  color: "ededed"
+- name: "Z-ProductPolish"
+  color: "aaaaaa"
+- name: "Z-Should"
+  color: "ededed"
+- name: "Z-Splitbrain"
+  description: "Someone who should be on the call isn't showing up"
+  color: "ededed"

.github/workflows/lint.yaml

@@ -2,7 +2,7 @@ name: Lint, format & type check
 on:
   pull_request: {}
 jobs:
-  prettier:
+  lint:
     name: Lint, format & type check
     runs-on: ubuntu-latest
     steps:
@@ -20,8 +20,8 @@ jobs:
       - name: Install dependencies
         # ignore-pnpmfile should never be commited. Make CI crash if it happened (`pnpmfileChecksum` is present)
         run: "pnpm install --frozen-lockfile --ignore-pnpmfile"
-      - name: Prettier
-        run: "pnpm run prettier:check"
+      - name: Formatting
+        run: "pnpm run format:check"
       - name: i18n
         run: "pnpm run i18n:check"
       - name: ESLint

.github/workflows/sync-labels.yml

@@ -0,0 +1,23 @@
+name: Sync labels
+on:
+  workflow_dispatch: {}
+
+  push:
+    branches:
+      - livekit
+    paths:
+      - .github/labels.yml
+      - .github/workflows/sync-labels.yml
+
+permissions: {} # We use ELEMENT_BOT_TOKEN instead
+
+jobs:
+  sync-labels:
+    uses: element-hq/element-meta/.github/workflows/sync-labels.yml@7f2f93fb9b52ece7a0998f60e64862aa203c1746
+    with:
+      LABELS: |
+        .github/labels.yml
+      DELETE: true
+      WET: true
+    secrets:
+      ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}

.github/workflows/translations-download.yaml

@@ -40,8 +40,8 @@ jobs:
       - name: Fix the owner of the downloaded files
         run: "sudo chown runner:docker -R locales"
 
-      - name: Prettier
-        run: pnpm prettier:format
+      - name: Formatting
+        run: pnpm format
 
       - name: Create Pull Request
         id: cpr

.oxfmtrc.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "printWidth": 80,
+  "sortPackageJson": false,
+  "ignorePatterns": ["pnpm-lock.yaml", "node_modules", "dist"]
+}

.prettierignore

@@ -1,3 +0,0 @@
-pnpm-lock.yaml
-node_modules
-dist

.prettierrc.json

@@ -1 +0,0 @@
-{}

README.md

@@ -359,6 +359,16 @@ Usage and other technical details about the project can be found here:
 
 [**Docs**](./docs/README.md)
 
+## GitHub Labels
+
+GitHub labels in this repository are maintained in the [`labels.yml`](.github/labels.yml) file and
+automatically synced to GitHub using the [`sync-labels` workflow](.github/workflows/sync-labels.yml).
+We do this so that we can reuse the labels between repositories.
+
+> [!WARNING]
+> Do not manually edit labels in the GitHub UI. Any manual changes will be overridden by the
+> workflow on its next invocation.
+
 ## 📝 Copyright & License
 
 Copyright 2021-2025 New Vector Ltd

babel.config.cjs

@@ -1,20 +0,0 @@
-module.exports = {
-  presets: [
-    [
-      "@babel/preset-env",
-      {
-        targets: {
-          node: "current",
-        },
-      },
-    ],
-    [
-      "@babel/preset-react",
-      {
-        runtime: "automatic",
-      },
-    ],
-    "@babel/preset-typescript",
-  ],
-  plugins: ["babel-plugin-transform-vite-meta-env"],
-};

docs/controls.md

@@ -7,6 +7,9 @@ A few aspects of Element Call's interface can be controlled through a global API
 - `controls.canEnterPip(): boolean` Determines whether it's possible to enter picture-in-picture mode.
 - `controls.enablePip(): void` Puts the call interface into picture-in-picture mode. Throws if not in a call.
 - `controls.disablePip(): void` Takes the call interface out of picture-in-picture mode, restoring it to its natural display mode. Throws if not in a call.
+- `controls.onPipMediaOrientationUpdate: ((orientation: "landscape"|"portrait") => void) | undefined` Callback called whenever the PiP media orientation changes.
+  The client should track this value to already initiate the pip in the right orientation.
+  It should update the orientation of the current Pip window when called.
 
 ## Audio devices
 

docs/url_params.md

@@ -69,7 +69,7 @@ These parameters are relevant to both [widget](./embedded_standalone.md) and [st
 | `theme`                                        | One of: `light`, `dark`, `light-high-contrast`, `dark-high-contrast`                                                                                               | No, defaults to `dark`                                                                            | No, defaults to `dark`       | UI theme to use.                                                                                                                                                                                                                                                                                                                                                                                    |
 | `viaServers`                                   | Comma separated list of [Matrix Server Names](https://spec.matrix.org/v1.12/appendices/#server-name)                                                               | Not applicable                                                                                    | No                           | Homeserver for joining a room, non-empty value required for rooms not on the user’s default homeserver.                                                                                                                                                                                                                                                                                             |
 | `sendNotificationType`                         | `ring` or `notification`                                                                                                                                           | No                                                                                                | No                           | Will send a "ring" or "notification" `m.rtc.notification` event if the user is the first one in the call.                                                                                                                                                                                                                                                                                           |
-| `autoLeaveWhenOthersLeft`                      | `true` or `false`                                                                                                                                                  | No, defaults to `false`                                                                           | No, defaults to `false`      | Whether the app should automatically leave the call when there is no one left in the call.                                                                                                                                                                                                                                                                                                          |
+| `autoLeave`                                    | `true` or `false`                                                                                                                                                  | No, defaults to `false`                                                                           | No, defaults to `false`      | Whether the app should automatically leave the call when there is no one left in the call.                                                                                                                                                                                                                                                                                                          |
 | `waitForCallPickup`                            | `true` or `false`                                                                                                                                                  | No, defaults to `false`                                                                           | No, defaults to `false`      | When sending a notification, show UI that the app is awaiting an answer, play a dial tone, and (in widget mode) auto-close the widget once the notification expires.                                                                                                                                                                                                                                |
 
 ### Widget-only parameters

embedded/android/gradle/libs.versions.toml

@@ -9,4 +9,4 @@ android_gradle_plugin = { module = "com.android.tools.build:gradle", version.ref
 
 [plugins]
 android_library = { id = "com.android.library", version.ref = "android_gradle_plugin" }
-maven_publish = { id = "com.vanniktech.maven.publish", version = "0.36.0" }
+maven_publish = { id = "com.vanniktech.maven.publish", version = "0.36.0" }

eslint/NoObservableScopeLeak.js

@@ -0,0 +1,62 @@
+/*
+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 { ESLintUtils } from "@typescript-eslint/utils";
+
+// These ObservableScope methods will not generally cause resource leaks even if
+// called from a callback
+const safeScopeMethods = ["bind", "end"];
+
+const rule = ESLintUtils.RuleCreator(
+  () => "https://github.com/element-hq/element-call",
+)({
+  name: "no-observablescope-leak",
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Require referenced ObservableScopes to be defined in the very same scope to avoid resource leaks.",
+    },
+    messages: {
+      scopeLeak:
+        "Do not reference ObservableScopes defined in an outer scope; this may create resource leaks.",
+    },
+    schema: [],
+  },
+  create(context) {
+    return {
+      Identifier(node) {
+        const scope = context.sourceCode.getScope(node);
+        if (
+          // Is this a reference to a variable defined in an outer ("through") scope?
+          scope.through.some(
+            ({ identifier }) => identifier.name === node.name,
+          ) &&
+          // Exclude calls to "safe" ObservableScope methods
+          node.parent?.type === "MemberExpression" &&
+          node.parent.object === node &&
+          node.parent.property.type === "Identifier" &&
+          !safeScopeMethods.includes(node.parent.property.name)
+        ) {
+          // Verify that the variable is actually of type ObservableScope
+          // (expensive, so we check this last)
+          const services = ESLintUtils.getParserServices(context);
+          const type = services.getTypeAtLocation(node);
+          if (type.symbol?.name === "ObservableScope")
+            // This ObservableScope method call may be causing resource leaks.
+            context.report({
+              messageId: "scopeLeak",
+              loc: node.loc,
+              node,
+            });
+        }
+      },
+    };
+  },
+});
+
+export default rule;

eslint/index.js

@@ -0,0 +1,5 @@
+module.exports = {
+  rules: {
+    "no-observablescope-leak": require("./NoObservableScopeLeak").default,
+  },
+};

eslint/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "eslint-plugin-element-call",
+  "version": "0.0.0"
+}

knip.ts

@@ -11,12 +11,14 @@ export default {
   vite: {
     config: ["vite.config.ts", "vite-embedded.config.ts", "vite-sdk.config.ts"],
   },
-  entry: ["src/main.tsx", "i18next.config.ts"],
+  entry: ["src/main.tsx", "eslint/index.js", "i18next.config.ts"],
   ignoreBinaries: [
     // This is deprecated, so Knip doesn't actually recognize it as a globally
     // installed binary. TODO We should switch to Compose v2:
     // https://docs.docker.com/compose/migrate/
     "docker-compose",
+    // This is a shell built-in.
+    "printf",
   ],
   ignoreFiles: ["scripts/.pnpmfile.cjs"],
   ignoreDependencies: [
@@ -24,11 +26,6 @@ export default {
     "normalize.css",
     // Used for its global type declarations
     "@types/grecaptcha",
-    // Because we use matrix-js-sdk as a Git dependency rather than consuming
-    // the proper release artifacts, and also import directly from src/, we're
-    // forced to re-install some of the types that it depends on even though
-    // these look unused to Knip
-    "@types/content-type",
     "@types/sdp-transform",
     // We obviously use this, but if the package has been linked with pnpm link,
     // then Knip will flag it as a false positive

package.json

@@ -17,8 +17,8 @@
     "build:sdk": "pnpm build:full --config vite-sdk.config.js",
     "build:sdk:production": "pnpm build:sdk",
     "serve": "vite preview",
-    "prettier:check": "prettier -c .",
-    "prettier:format": "prettier -w .",
+    "format": "oxfmt",
+    "format:check": "oxfmt --check; rc=$?; [[ $rc -ne 0 ]] && printf '\\033[46;30m INFO \\033[0m To fix, run: pnpm format\\n' >&2; exit $rc",
     "lint": "pnpm lint:types && pnpm lint:eslint && pnpm lint:knip",
     "lint:eslint": "eslint --max-warnings 0 src playwright",
     "lint:eslint-fix": "eslint --max-warnings 0 src playwright --fix",
@@ -40,10 +40,6 @@
     "build-storybook": "storybook build"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.5",
-    "@babel/preset-env": "^7.29.5",
-    "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.23.0",
     "@codecov/vite-plugin": "^1.3.0",
     "@fontsource/inconsolata": "^5.1.0",
     "@fontsource/inter": "^5.1.0",
@@ -69,7 +65,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.1",
-    "@types/content-type": "^1.1.5",
+    "@types/eslint": "^9.6.1",
     "@types/grecaptcha": "^3.0.9",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
@@ -81,20 +77,21 @@
     "@types/sdp-transform": "^2.4.5",
     "@typescript-eslint/eslint-plugin": "^8.31.0",
     "@typescript-eslint/parser": "^8.31.0",
+    "@typescript-eslint/utils": "^8.61.0",
     "@use-gesture/react": "^10.2.11",
     "@vector-im/compound-design-tokens": "^10.0.0",
     "@vector-im/compound-web": "^9.3.0",
-    "@vitejs/plugin-react": "^4.0.1",
+    "@vitejs/plugin-react": "^6.0.2",
     "@vitest/browser-playwright": "^4.1.5",
     "@vitest/coverage-v8": "^4.0.18",
     "@vitest/ui": "4.1.7",
-    "babel-plugin-transform-vite-meta-env": "^1.0.3",
     "classnames": "^2.3.1",
     "copy-to-clipboard": "^3.3.3",
     "eslint": "^8.14.0",
     "eslint-config-google": "^0.14.0",
     "eslint-config-prettier": "^10.0.0",
     "eslint-plugin-deprecate": "^0.9.0",
+    "eslint-plugin-element-call": "link:eslint",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsdoc": "^61.5.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
@@ -119,11 +116,11 @@
     "node-stdlib-browser": "^1.3.1",
     "normalize.css": "^8.0.1",
     "observable-hooks": "^4.2.3",
+    "oxfmt": "^0.55.0",
     "pako": "^2.0.4",
     "postcss": "^8.4.41",
     "postcss-preset-env": "^10.0.0",
     "posthog-js": "1.374.0",
-    "prettier": "^3.0.0",
     "qrcode": "^1.5.4",
     "react": "19",
     "react-dom": "19",
@@ -148,17 +145,5 @@
     "vitest": "^4.1.5",
     "vitest-axe": "^1.0.0-pre.3"
   },
-  "pnpm": {
-    "overrides": {
-      "@livekit/components-core>rxjs": "^7.8.1",
-      "@livekit/track-processors>@mediapipe/tasks-vision": "^0.10.18",
-      "minimatch": "^10.2.3",
-      "tar": "^7.5.11",
-      "glob": "^10.5.0",
-      "qs": "^6.14.1",
-      "js-yaml": "^4.1.1",
-      "esbuild": "^0.28.0"
-    }
-  },
-  "packageManager": "pnpm@10.33.0"
+  "packageManager": "pnpm@11.6.0+sha512.9a36518224080c6fe5165afdcfe79bfa118c29be703f3f462b1e32efe1e98e47e8750b148e08286250aad4113cc7993ca413c4e2cd447752708c2ee5751bc95f"
 }

pnpm-workspace.yaml

@@ -1,3 +1,35 @@
-# dependencies where we use branches and hashes in the package.json. But that also use a pre/post install script.
-onlyBuiltDependencies:
-  - "matrix-js-sdk"
+allowBuilds:
+  "@parcel/watcher": true
+  "@sentry/cli": true
+  "@swc/core": true
+  "core-js": true
+  "esbuild": true
+  "matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/8c95727b6278fe7942c20d0b9485f984dd0694b7": true
+  "protobufjs": true
+overrides:
+  # We need compatible versions of RxJS in our dependencies and LiveKit's dependencies, but
+  # LiveKit has pinned it to a very specific version which is now holding us back from updating.
+  # See livekit/components-js#1101 for a request for a proper solution.
+  "@livekit/components-core>rxjs": "^7.8.1"
+  # Dedupe Mediapipe dependencies.
+  "@livekit/track-processors>@mediapipe/tasks-vision": "^0.10.18"
+  # Security fix: https://security-tracker.debian.org/tracker/CVE-2026-31802
+  "tar": "^7.5.11"
+  # Security fixes:
+  # - https://github.com/advisories/GHSA-7r86-cg39-jmmj
+  # - https://github.com/advisories/GHSA-23c5-xmqv-rm74
+  "minimatch": "^10.2.3"
+  # Security fix: https://github.com/element-hq/element-call/security/dependabot/109
+  "glob": "^10.5.0"
+  # Security fixes:
+  # - https://github.com/element-hq/element-call/security/dependabot/110
+  # - https://github.com/element-hq/element-call/security/dependabot/122
+  "qs": "^6.14.1"
+  # Security fix: https://github.com/element-hq/element-call/security/dependabot/106
+  "js-yaml": "^4.1.1"
+  # Storybook declares support for 0.27.0 only but empirically works fine with 0.28.0.
+  "esbuild": "^0.28.0"
+  # Multiple security fixes: https://github.com/nodejs/undici/releases/tag/v6.24.0
+  "undici": "^6.24.0"
+  # Security fix: https://github.com/advisories/GHSA-rf6f-7fwh-wjgh
+  "flatted": "^3.4.2"

sdk/main.ts

@@ -76,9 +76,9 @@ interface MatrixRTCSdk {
   stop: () => void;
   data$: Observable<{ rtcBackendIdentity: string; data: string }>;
   /**
-   * flattened list of members
+   * flattened list of remote members
    */
-  members$: Behavior<
+  remoteMembers$: Behavior<
     {
       connection: Connection | null;
       membership: CallMembership;
@@ -86,7 +86,7 @@ interface MatrixRTCSdk {
     }[]
   >;
   /**
-   * flattened local members
+   * flattened local member
    */
   localMember$: Behavior<{
     connection: Connection | null;
@@ -338,8 +338,8 @@ export async function createMatrixRTCSdk(
       ),
     ),
     connected$: callViewModel.connected$,
-    members$: scope.behavior(
-      callViewModel.matrixLivekitMembers$.pipe(
+    remoteMembers$: scope.behavior(
+      callViewModel.remoteMatrixLivekitMembers$.pipe(
         switchMap((members) => {
           const listOfMemberObservables = members.map((member) =>
             combineLatest([

src/AppBar.module.css

@@ -1,6 +1,12 @@
 .bar {
   flex-shrink: 0;
   position: relative;
+  z-index: var(--call-view-header-footer-layer);
+  padding-left: var(--content-inset-left);
+  padding-right: var(--content-inset-right);
+  padding-top: env(safe-area-inset-top);
+  opacity: 1;
+  transition: opacity 0.15s;
 }
 
 /* Pseudo-element for the gradient background */
@@ -9,8 +15,7 @@
   position: absolute;
   inset-inline: 0;
   /* Extend the gradient beyond the bottom of the header for readability */
-  inset-block: -24px;
-  z-index: var(--call-view-header-footer-layer);
+  inset-block: 0 -16px;
   background: linear-gradient(
     0deg,
     rgba(0, 0, 0, 0) 0%,
@@ -18,21 +23,122 @@
   );
 }
 
+.bar.hidden {
+  opacity: 0;
+  pointer-events: none;
+  /* Switch to position: absolute so the bar takes up no space in the layout
+    when hidden. */
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline: 0;
+}
+
+.bar:has(:focus-visible) {
+  opacity: 1;
+  pointer-events: initial;
+}
+
 .bar > header {
+  flex-shrink: 0;
   position: sticky;
   inset-inline: 0;
   inset-block-start: 0;
-  block-size: 64px;
-  z-index: var(--call-view-header-footer-layer);
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  grid-template-rows:
+    var(--cpd-space-3x) minmax(var(--cpd-space-10x), auto)
+    var(--cpd-space-3x);
+  grid-template-areas:
+    ". . ."
+    "primaryButton title secondaryButton"
+    ". . .";
+  place-items: center;
+  column-gap: var(--cpd-space-2x);
 }
 
-.bar svg path {
-  fill: var(--cpd-color-icon-primary);
+.bar:has(.subtitle) > header {
+  grid-template-rows:
+    var(--cpd-space-3x) minmax(var(--cpd-space-10x), auto) var(--cpd-space-5x)
+    minmax(var(--cpd-space-8x), auto);
+  grid-template-areas:
+    ". . ."
+    "primaryButton title secondaryButton"
+    ". . ."
+    "subtitle subtitle subtitle";
 }
 
-.bar > header > h1 {
+.primaryButton {
+  grid-area: primaryButton;
+  justify-self: start;
+}
+
+.title {
+  grid-area: title;
+}
+
+.subtitle {
+  grid-area: subtitle;
+
+  svg {
+    color: var(--cpd-color-icon-tertiary);
+    margin-inline-end: var(--cpd-space-2x);
+    block-size: 1.2em;
+    inline-size: 1.2em;
+    vertical-align: text-bottom;
+  }
+}
+
+.title,
+.subtitle {
   margin: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.secondaryButton {
+  grid-area: secondaryButton;
+  justify-self: end;
+}
+
+.primaryButton,
+.secondaryButton {
+  svg * {
+    color: var(--cpd-color-icon-primary);
+  }
+}
+
+body[data-platform="ios"] {
+  .bar > header {
+    grid-template-rows: minmax(var(--cpd-space-11x), auto) var(--cpd-space-4x);
+    grid-template-areas: "primaryButton title secondaryButton";
+  }
+
+  .bar:has(.subtitle) > header {
+    grid-template-rows:
+      minmax(var(--cpd-space-6x), auto) minmax(var(--cpd-space-5x), auto)
+      var(--cpd-space-4x);
+    grid-template-areas:
+      "primaryButton title secondaryButton"
+      "primaryButton subtitle secondaryButton";
+
+    .title {
+      align-self: end;
+      /* Nudge the title and subtitle even closer together to replicate native
+      iOS styles */
+      transform: translateY(2px);
+    }
+
+    .subtitle {
+      align-self: start;
+    }
+  }
+
+  .subtitle {
+    color: var(--cpd-color-text-secondary);
+
+    svg {
+      display: none;
+    }
+  }
+}

src/AppBar.test.tsx

@@ -5,21 +5,33 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
+import { type FC, type ReactNode } from "react";
 import { render } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
 import { TooltipProvider } from "@vector-im/compound-web";
 
-import { AppBar } from "./AppBar";
+import { AppBar, useAppBarSubtitle, useAppBarTitle } from "./AppBar";
+
+const content = <p>This is the content.</p>;
+
+function snapshotAppBar(content: ReactNode): void {
+  const { container } = render(
+    <TooltipProvider>
+      <AppBar>{content}</AppBar>
+    </TooltipProvider>,
+  );
+  expect(container).toMatchSnapshot();
+}
 
 describe("AppBar", () => {
-  it("renders", () => {
-    const { container } = render(
-      <TooltipProvider>
-        <AppBar>
-          <p>This is the content.</p>
-        </AppBar>
-      </TooltipProvider>,
-    );
-    expect(container).toMatchSnapshot();
+  it("renders", () => snapshotAppBar(content));
+
+  it("renders with title and subtitle", () => {
+    const TestComponent: FC = () => {
+      useAppBarTitle("Title");
+      useAppBarSubtitle("Subtitle");
+      return content;
+    };
+    snapshotAppBar(<TestComponent />);
   });
 });

src/AppBar.tsx

@@ -6,28 +6,34 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  createContext,
-  type FC,
-  type MouseEvent,
-  type ReactNode,
   use,
   useCallback,
   useEffect,
   useMemo,
   useState,
+  createContext,
+  type FC,
+  type MouseEvent,
+  type ReactNode,
 } from "react";
-import { Heading, IconButton, Tooltip } from "@vector-im/compound-web";
-import { CollapseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import classNames from "classnames";
+import { Heading, IconButton, Text, Tooltip } from "@vector-im/compound-web";
+import {
+  ArrowLeftIcon,
+  ChevronLeftIcon,
+  CollapseIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
 import { useTranslation } from "react-i18next";
 import { logger } from "matrix-js-sdk/lib/logger";
 
-import { Header, LeftNav, RightNav } from "./Header";
 import { platform } from "./Platform";
 import styles from "./AppBar.module.css";
 
 interface AppBarContext {
   setTitle: (value: string) => void;
+  setSubtitle: (value: ReactNode) => void;
   setSecondaryButton: (value: ReactNode) => void;
+  setPrimaryButtonIconKind: (value: "back" | "minimise") => void;
   setHidden: (value: boolean) => void;
 }
 
@@ -49,44 +55,76 @@ export const AppBar: FC<Props> = ({ children }) => {
   }, []);
 
   const [title, setTitle] = useState<string>("");
+  const [subtitle, setSubtitle] = useState<ReactNode>(undefined);
   const [hidden, setHidden] = useState<boolean>(false);
   const [secondaryButton, setSecondaryButton] = useState<ReactNode | null>(
     null,
   );
+  const [primaryButtonIcon, setPrimaryButtonIconKind] = useState<
+    "back" | "minimise"
+  >("minimise");
+
   const context = useMemo(
-    () => ({ setTitle, setSecondaryButton, setHidden }),
-    [setTitle, setHidden, setSecondaryButton],
+    () => ({
+      setTitle,
+      setSubtitle,
+      setSecondaryButton,
+      setHidden,
+      setPrimaryButtonIconKind,
+    }),
+    [
+      setTitle,
+      setSubtitle,
+      setHidden,
+      setSecondaryButton,
+      setPrimaryButtonIconKind,
+    ],
   );
 
+  const BackIcon = platform === "android" ? ArrowLeftIcon : ChevronLeftIcon;
+
   return (
     <>
-      <div
-        style={{ display: hidden ? "none" : "block" }}
-        className={styles.bar}
-      >
-        <Header
-          // App bar is mainly seen in the call view, which has its own
-          // 'reconnecting' toast
-          disconnectedBanner={false}
-        >
-          <LeftNav>
-            <Tooltip label={t("common.back")}>
-              <IconButton size="24px" onClick={onBackClick}>
+      {/* Wrap the header in a div due to annoying z-index issues with the
+      gradient background */}
+      <div className={classNames(styles.bar, { [styles.hidden]: hidden })}>
+        <header>
+          <Tooltip label={t("common.back")}>
+            <IconButton
+              className={styles.primaryButton}
+              // We render the back button (PrimaryButtonIcon) the same size as the native os.
+              // We render the minimise icon (default) smaller as per designs.
+              size={primaryButtonIcon === "back" ? "32px" : "24px"}
+              onClick={onBackClick}
+            >
+              {primaryButtonIcon === "back" ? (
+                <BackIcon aria-hidden />
+              ) : (
                 <CollapseIcon aria-hidden />
-              </IconButton>
-            </Tooltip>
-          </LeftNav>
+              )}
+            </IconButton>
+          </Tooltip>
           {title && (
             <Heading
+              className={styles.title}
               type="body"
-              size="lg"
-              weight={platform === "android" ? "medium" : "semibold"}
+              size={platform === "ios" ? "md" : "lg"}
+              weight={platform === "ios" ? "semibold" : "medium"}
             >
               {title}
             </Heading>
           )}
-          <RightNav>{secondaryButton}</RightNav>
-        </Header>
+          {subtitle && (
+            <Text
+              className={styles.subtitle}
+              as="span"
+              size={platform === "ios" ? "sm" : "lg"}
+            >
+              {subtitle}
+            </Text>
+          )}
+          <div className={styles.secondaryButton}>{secondaryButton}</div>
+        </header>
       </div>
       <AppBarContext value={context}>{children}</AppBarContext>
     </>
@@ -107,6 +145,36 @@ export function useAppBarTitle(title: string): void {
   }, [title, setTitle]);
 }
 
+/**
+ * React hook which sets the subtitle to be shown in the app bar, if present. It
+ * is an error to call this hook from multiple sites in the same component tree.
+ */
+export function useAppBarSubtitle(subtitle: ReactNode): void {
+  const setSubtitle = use(AppBarContext)?.setSubtitle;
+  useEffect(() => {
+    if (setSubtitle !== undefined) {
+      setSubtitle(subtitle);
+      return (): void => setSubtitle("");
+    }
+  }, [subtitle, setSubtitle]);
+}
+
+/**
+ * React hook which sets the primary button icon kind. Can only be "minimise" or "back"
+ * It is an error to call this hook from multiple sites in the same component tree.
+ */
+export function useAppBarPrimaryButtonIconKind(
+  icon: "back" | "minimise",
+): void {
+  const setIconKind = use(AppBarContext)?.setPrimaryButtonIconKind;
+  useEffect(() => {
+    if (setIconKind !== undefined) {
+      setIconKind(icon);
+      return (): void => setIconKind("minimise");
+    }
+  }, [setIconKind, icon]);
+}
+
 /**
  * React hook which sets the title to be shown in the app bar, if present. It is
  * an error to call this hook from multiple sites in the same component tree.

src/__snapshots__/AppBar.test.tsx.snap

@@ -4,43 +4,89 @@ exports[`AppBar > renders 1`] = `
 <div>
   <div
     class="bar"
-    style="display: block;"
   >
-    <header
-      class="header"
-    >
-      <div
-        class="nav leftNav"
+    <header>
+      <button
+        aria-labelledby="_r_0_"
+        class="_icon-button_1215g_8 primaryButton"
+        data-kind="primary"
+        role="button"
+        style="--cpd-icon-button-size: 24px;"
+        tabindex="0"
       >
-        <button
-          aria-labelledby="_r_0_"
-          class="_icon-button_1215g_8"
-          data-kind="primary"
-          role="button"
-          style="--cpd-icon-button-size: 24px;"
-          tabindex="0"
+        <div
+          class="_indicator-icon_147l5_17"
+          style="--cpd-icon-button-size: 100%;"
         >
-          <div
-            class="_indicator-icon_147l5_17"
-            style="--cpd-icon-button-size: 100%;"
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M12 11.034a1 1 0 0 0 .29.702l.005.005c.18.18.43.29.705.29h8a1 1 0 0 0 0-2h-5.586L22 3.445a1 1 0 0 0-1.414-1.414L14 8.617V3.031a1 1 0 1 0-2 0zm0 1.963a1 1 0 0 0-.29-.702l-.005-.004A1 1 0 0 0 11 12H3a1 1 0 1 0 0 2h5.586L2 20.586A1 1 0 1 0 3.414 22L10 15.414V21a1 1 0 0 0 2 0z"
-              />
-            </svg>
-          </div>
-        </button>
-      </div>
+            <path
+              d="M12 11.034a1 1 0 0 0 .29.702l.005.005c.18.18.43.29.705.29h8a1 1 0 0 0 0-2h-5.586L22 3.445a1 1 0 0 0-1.414-1.414L14 8.617V3.031a1 1 0 1 0-2 0zm0 1.963a1 1 0 0 0-.29-.702l-.005-.004A1 1 0 0 0 11 12H3a1 1 0 1 0 0 2h5.586L2 20.586A1 1 0 1 0 3.414 22L10 15.414V21a1 1 0 0 0 2 0z"
+            />
+          </svg>
+        </div>
+      </button>
       <div
-        class="nav rightNav"
+        class="secondaryButton"
+      />
+    </header>
+  </div>
+  <p>
+    This is the content.
+  </p>
+</div>
+`;
+
+exports[`AppBar > renders with title and subtitle 1`] = `
+<div>
+  <div
+    class="bar"
+  >
+    <header>
+      <button
+        aria-labelledby="_r_6_"
+        class="_icon-button_1215g_8 primaryButton"
+        data-kind="primary"
+        role="button"
+        style="--cpd-icon-button-size: 24px;"
+        tabindex="0"
+      >
+        <div
+          class="_indicator-icon_147l5_17"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 11.034a1 1 0 0 0 .29.702l.005.005c.18.18.43.29.705.29h8a1 1 0 0 0 0-2h-5.586L22 3.445a1 1 0 0 0-1.414-1.414L14 8.617V3.031a1 1 0 1 0-2 0zm0 1.963a1 1 0 0 0-.29-.702l-.005-.004A1 1 0 0 0 11 12H3a1 1 0 1 0 0 2h5.586L2 20.586A1 1 0 1 0 3.414 22L10 15.414V21a1 1 0 0 0 2 0z"
+            />
+          </svg>
+        </div>
+      </button>
+      <h1
+        class="_typography_6v6n8_153 _font-body-lg-medium_6v6n8_79 title"
+      >
+        Title
+      </h1>
+      <span
+        class="_typography_6v6n8_153 _font-body-lg-regular_6v6n8_69 subtitle"
+      >
+        Subtitle
+      </span>
+      <div
+        class="secondaryButton"
       />
     </header>
   </div>

src/components/CallFooterViewModel.tsx

@@ -173,9 +173,7 @@ export function createCallFooterViewModel(
         callModel.setSettingsOpen$,
       ]).pipe(
         map(([isPip, showHeader, setSettingsOpen]) =>
-          !isPip &&
-          !(headerStyle === HeaderStyle.AppBar && showHeader) &&
-          showControls
+          !isPip && headerStyle !== HeaderStyle.AppBar && showControls
             ? (): void => setSettingsOpen(true)
             : undefined,
         ),

src/controls.ts

@@ -12,6 +12,7 @@ export interface Controls {
   canEnterPip(): boolean;
   enablePip(): void;
   disablePip(): void;
+  onPipMediaOrientationUpdate?: (orientation: "landscape" | "portrait") => void;
 
   setAvailableAudioDevices(devices: OutputDevice[]): void;
   setAudioDevice(id: string): void;

src/room/GroupCallView.test.tsx

@@ -272,7 +272,7 @@ test.skip("GroupCallView plays a leave sound synchronously in widget mode", asyn
   expect(leaveRTCSession).toHaveBeenCalledOnce();
 });
 
-test("Should close widget when all other left and have time to play a sound", async () => {
+test("Should close widget when all other left and play a sound", async () => {
   const user = userEvent.setup();
   let widgetClosedCalled = false;
   const { promise: widgetClosedPromise, resolve: widgetClosedResolver } =
@@ -310,8 +310,6 @@ test("Should close widget when all other left and have time to play a sound", as
   expect(widgetClosedCalled).toBeFalsy();
   resolvePlaySound.resolve();
 
-  // Expect the leave sound to be played but silent (volumeOverwrite = 0)
-  // The allOthersLeft effect should already play a leave sound for the last user in the call.
   expect(playSound).toHaveBeenCalledWith("left", 0);
   await widgetClosedPromise;
   await flushPromises();
@@ -319,37 +317,6 @@ test("Should close widget when all other left and have time to play a sound", as
   expect(widgetStopMock).toHaveBeenCalledOnce();
 }, 80000);
 
-test("Should close widget when all other left", async () => {
-  const user = userEvent.setup();
-  const widgetClosedCalled = Promise.withResolvers<void>();
-  const widgetSendMock = vi.fn().mockImplementation((action: string) => {
-    if (action === ElementWidgetActions.Close) {
-      widgetClosedCalled.resolve();
-    }
-  });
-  const widgetStopMock = vi.fn().mockResolvedValue(undefined);
-  const widget = {
-    api: {
-      setAlwaysOnScreen: vi.fn().mockResolvedValue(true),
-      transport: {
-        send: widgetSendMock,
-        reply: vi.fn().mockResolvedValue(undefined),
-        stop: widgetStopMock,
-      } as unknown as ITransport,
-    } as Partial<WidgetHelpers["api"]>,
-    lazyActions: new LazyEventEmitter(),
-  };
-
-  const { getByText } = createGroupCallView(widget as WidgetHelpers);
-  const leaveButton = getByText("SimulateOtherLeft");
-  await user.click(leaveButton);
-  await flushPromises();
-
-  await widgetClosedCalled.promise;
-  await flushPromises();
-  expect(widgetStopMock).toHaveBeenCalledOnce();
-});
-
 test("Should not close widget when auto leave due to error", async () => {
   const user = userEvent.setup();
 

src/room/GroupCallView.tsx

@@ -553,11 +553,9 @@ export const GroupCallView: FC<Props> = ({
           });
         }
       }}
-      onError={
-        (/**error*/) => {
-          if (rtcSession.isJoined()) onLeft("error");
-        }
-      }
+      onError={(_error) => {
+        if (rtcSession.isJoined()) onLeft("error");
+      }}
     >
       {body}
     </GroupCallErrorBoundary>

src/room/InCallView.test.tsx

@@ -7,7 +7,6 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  afterEach,
   beforeEach,
   describe,
   expect,
@@ -15,12 +14,7 @@ import {
   type MockedFunction,
   vi,
 } from "vitest";
-import {
-  render,
-  type RenderResult,
-  getByRole,
-  screen,
-} from "@testing-library/react";
+import { render, type RenderResult } from "@testing-library/react";
 import { type LocalParticipant } from "livekit-client";
 import { BehaviorSubject, of } from "rxjs";
 import { BrowserRouter } from "react-router-dom";
@@ -50,7 +44,6 @@ import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
 import { LivekitRoomAudioRenderer } from "../livekit/MatrixAudioRenderer";
 import { MediaDevicesContext } from "../MediaDevicesContext";
 import { type MediaDevices as ECMediaDevices } from "../state/MediaDevices";
-import { constant } from "../state/Behavior";
 import { AppBar } from "../AppBar";
 import { initializeWidget } from "../widget";
 
@@ -195,45 +188,6 @@ describe("InCallView", () => {
     });
   });
 
-  describe("settings button with AppBar header", () => {
-    beforeEach(() => {
-      // getUrlParams() reads window.location directly rather than from the
-      // React Router context, so MemoryRouter alone is not enough to make
-      // it see "header=app_bar". Push the real URL so both paths agree.
-      window.history.pushState({}, "", "?header=app_bar");
-    });
-
-    afterEach(() => {
-      window.history.pushState({}, "", "/");
-    });
-
-    it("mobile portrait, is visible in the header", () => {
-      createInCallView({
-        withAppBar: true,
-        callViewModelOptions: {
-          // Narrow like a mobile phone in portrait orientation
-          windowSize$: constant({ width: 400, height: 700 }),
-        },
-      });
-
-      getByRole(screen.getByRole("banner"), "button", {
-        name: "Settings",
-      });
-    });
-
-    it("mobile landscape, is not visible anywhere", () => {
-      const { queryByRole } = createInCallView({
-        withAppBar: true,
-        callViewModelOptions: {
-          // Flat like a mobile phone in landscape orientation
-          windowSize$: constant({ width: 700, height: 400 }),
-        },
-      });
-
-      expect(queryByRole("button", { name: "Settings" })).not.toBeVisible();
-    });
-  });
-
   describe("audioOutputSwitcher", () => {
     it("is visible and can be clicked", async () => {
       const user = userEvent.setup();

src/room/InCallView.tsx

@@ -44,7 +44,6 @@ import {
   createCallViewModel$,
 } from "../state/CallViewModel/CallViewModel.ts";
 import { Grid, type TileProps } from "../grid/Grid";
-import { useInitial } from "../useInitial";
 import { SpotlightTile } from "../tile/SpotlightTile";
 import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
 import { E2eeType } from "../e2ee/e2eeType";
@@ -69,22 +68,23 @@ import { LivekitRoomAudioRenderer } from "../livekit/MatrixAudioRenderer.tsx";
 import { muteAllAudio$ } from "../state/MuteAllAudioModel.ts";
 import { useMediaDevices } from "../MediaDevicesContext.ts";
 import { EarpieceOverlay } from "./EarpieceOverlay.tsx";
-import { useAppBarHidden, useAppBarSecondaryButton } from "../AppBar.tsx";
+import {
+  useAppBarHidden,
+  useAppBarSecondaryButton,
+  useAppBarSubtitle,
+} from "../AppBar.tsx";
 import { useBehavior } from "../useBehavior.ts";
 import { Toast } from "../Toast.tsx";
 import overlayStyles from "../Overlay.module.css";
-import { prefetchSounds } from "../soundUtils";
-import { useAudioContext } from "../useAudioContext";
-import ringtoneMp3 from "../sound/ringtone.mp3?url";
-import ringtoneOgg from "../sound/ringtone.ogg?url";
 import { useTrackProcessorObservable$ } from "../livekit/TrackProcessorContext.tsx";
 import { type Layout } from "../state/layout-types.ts";
 import { ObservableScope } from "../state/ObservableScope.ts";
-import { useLatest } from "../useLatest.ts";
 import { CallFooter, type FooterSnapshot } from "../components/CallFooter.tsx";
 import { SettingsIconButton } from "../button/Button.tsx";
 import { createCallFooterViewModel } from "../components/CallFooterViewModel.tsx";
 import { type ViewModel } from "../state/ViewModel.ts";
+import { RingingStatus } from "../tile/RingingStatus.tsx";
+import { RingingAudioRenderer } from "./RingingAudioRenderer.tsx";
 
 declare module "react" {
   interface CSSProperties {
@@ -240,20 +240,6 @@ export const InCallView: FC<InCallViewProps> = ({
   const { showControls, header: headerStyle } = useUrlParams();
 
   const muteAllAudio = useBehavior(muteAllAudio$);
-
-  // Preload a waiting and decline sounds
-  const pickupPhaseSoundCache = useInitial(async () => {
-    return prefetchSounds({
-      waiting: { mp3: ringtoneMp3, ogg: ringtoneOgg },
-    });
-  });
-
-  const pickupPhaseAudio = useAudioContext({
-    sounds: pickupPhaseSoundCache,
-    latencyHint: "interactive",
-    muted: muteAllAudio,
-  });
-  const latestPickupPhaseAudio = useLatest(pickupPhaseAudio);
   const toggleAudio = useBehavior(muteStates.audio.toggle$);
   const toggleVideo = useBehavior(muteStates.video.toggle$);
   const setAudioEnabled = useBehavior(muteStates.audio.setEnabled$);
@@ -266,7 +252,7 @@ export const InCallView: FC<InCallViewProps> = ({
     () => void toggleRaisedHand(),
   );
 
-  const ringing = useBehavior(vm.ringing$);
+  const ringingVm = useBehavior(vm.ringingVm$);
   const audioParticipants = useBehavior(vm.livekitRoomItems$);
   const participantCount = useBehavior(vm.participantCount$);
   const reconnecting = useBehavior(vm.reconnecting$);
@@ -286,22 +272,6 @@ export const InCallView: FC<InCallViewProps> = ({
     throw fatalCallError;
   }
 
-  // While ringing, loop the ringtone
-  useEffect((): void | (() => void) => {
-    const audio = latestPickupPhaseAudio.current;
-    if (ringing && audio) {
-      const endSound = audio.playSoundLooping(
-        "waiting",
-        audio.soundDuration["waiting"] ?? 1,
-      );
-      return () => {
-        void endSound().catch((e) => {
-          logger.error("Failed to stop ringing sound", e);
-        });
-      };
-    }
-  }, [ringing, latestPickupPhaseAudio]);
-
   // iOS Safari doesn't reliably fire `click` on plain <div>s, so we listen
   // for `pointerup` instead. Scrolls end in `pointercancel`, not `pointerup`,
   // so this still only fires for taps.
@@ -363,6 +333,11 @@ export const InCallView: FC<InCallViewProps> = ({
   );
 
   useAppBarHidden(!showHeader);
+  useAppBarSubtitle(
+    ringingVm && vm.ringingStatusLocation === "app_bar" && (
+      <RingingStatus vm={ringingVm} />
+    ),
+  );
 
   let header: ReactNode = null;
   switch (headerStyle) {
@@ -457,6 +432,7 @@ export const InCallView: FC<InCallViewProps> = ({
         );
         const showSpeakingIndicators = useBehavior(vm.showSpeakingIndicators$);
         const showNameTags = useBehavior(vm.showNameTags$);
+        const showRingingStatus = vm.ringingStatusLocation === "tile";
 
         return model instanceof GridTileViewModel ? (
           <GridTile
@@ -469,6 +445,7 @@ export const InCallView: FC<InCallViewProps> = ({
             style={style}
             showSpeakingIndicators={showSpeakingIndicators}
             showNameTags={showNameTags}
+            showRingingStatus={showRingingStatus}
             focusable={!contentObscured}
           />
         ) : (
@@ -481,6 +458,7 @@ export const InCallView: FC<InCallViewProps> = ({
             targetHeight={targetHeight}
             showIndicators={showSpotlightIndicators}
             showNameTags={showNameTags}
+            showRingingStatus={showRingingStatus}
             focusable={!contentObscured}
             className={classNames(className, styles.tile)}
             style={style}
@@ -515,6 +493,7 @@ export const InCallView: FC<InCallViewProps> = ({
           targetHeight={gridBounds.height}
           showIndicators={false}
           showNameTags={showNameTags}
+          showRingingStatus={vm.ringingStatusLocation === "tile"}
           focusable={!contentObscured}
           aria-hidden={contentObscured}
         />
@@ -626,6 +605,7 @@ export const InCallView: FC<InCallViewProps> = ({
       {renderContent()}
       <CallEventAudioRenderer vm={vm} muted={muteAllAudio} />
       <ReactionsAudioRenderer vm={vm} muted={muteAllAudio} />
+      <RingingAudioRenderer vm={ringingVm} muted={muteAllAudio} />
       {reconnectingToast}
       {earpieceOverlay}
       <ReactionsOverlay vm={vm} />

src/room/LobbyView.test.tsx

@@ -11,6 +11,10 @@ import { BrowserRouter } from "react-router-dom";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { type MatrixClient } from "matrix-js-sdk";
 import { axe } from "vitest-axe";
+import {
+  ArrowLeftIcon,
+  ChevronLeftIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { LobbyView } from "./LobbyView";
 import { E2eeType } from "../e2ee/e2eeType";
@@ -20,6 +24,7 @@ import { type ProcessorState } from "../livekit/TrackProcessorContext";
 import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
 import lobbyStyles from "./LobbyView.module.css";
 import headerStyles from "../Header.module.css";
+import { AppBar } from "../AppBar";
 
 vi.mock("@livekit/components-react", () => ({
   usePreviewTracks: (): unknown[] => [],
@@ -47,6 +52,13 @@ const mockClient = {
   getDeviceId: () => "DEVICE",
 } as Partial<MatrixClient> as MatrixClient;
 
+const platformMock = vi.hoisted(() => vi.fn(() => "desktop"));
+vi.mock("../Platform", () => ({
+  get platform(): string {
+    return platformMock();
+  },
+}));
+
 const matrixInfo = {
   userId: "@user:example.org",
   displayName: "Test User",
@@ -60,25 +72,32 @@ const matrixInfo = {
 
 function renderLobbyView(
   props: Partial<Parameters<typeof LobbyView>[0]> = {},
+  withAppBar = false,
+  platform = "android",
 ): ReturnType<typeof render> {
+  platformMock.mockReturnValue(platform);
   const mediaDevices = mockMediaDevices({});
   const muteStates = mockMuteStates();
-
+  const hideHeader = withAppBar ? true : false;
+  const lobbyView = (
+    <LobbyView
+      client={mockClient}
+      matrixInfo={matrixInfo}
+      muteStates={muteStates}
+      onEnter={() => {}}
+      confineToRoom={false}
+      hideHeader={hideHeader}
+      participantCount={3}
+      onShareClick={null}
+      {...props}
+    />
+  );
   return render(
     <BrowserRouter>
       <MediaDevicesContext value={mediaDevices}>
         <TooltipProvider>
-          <LobbyView
-            client={mockClient}
-            matrixInfo={matrixInfo}
-            muteStates={muteStates}
-            onEnter={() => {}}
-            confineToRoom={false}
-            hideHeader={false}
-            participantCount={3}
-            onShareClick={null}
-            {...props}
-          />
+          {withAppBar && <AppBar>{lobbyView}</AppBar>}
+          {!withAppBar && lobbyView}
         </TooltipProvider>
       </MediaDevicesContext>
     </BrowserRouter>,
@@ -97,9 +116,10 @@ describe("LobbyView", () => {
 
   it("renders without header", () => {
     const { container } = renderLobbyView({ hideHeader: true });
-    expect(
-      container.getElementsByClassName(headerStyles.header).length,
-    ).toBeFalsy();
+    const els = container.getElementsByClassName(headerStyles.header);
+    for (const el of els) {
+      expect(el).not.toBeVisible();
+    }
   });
 
   it("renders with waiting for invite state", () => {
@@ -108,4 +128,52 @@ describe("LobbyView", () => {
     });
     expect(getByTestId("lobby_joinCall")).toHaveClass(lobbyStyles.wait);
   });
+
+  it("renders with AppBar android", async () => {
+    const { container, getByRole } = renderLobbyView(
+      {
+        waitingForInvite: true,
+      },
+      true,
+      "android",
+    );
+    getByRole("banner");
+    // Check that the primary button uses ArrowLeftIcon (the back/return icon),
+    // not the default CollapseIcon
+    const { container: iconContainer } = render(<ArrowLeftIcon />);
+    const expectedSvgPath = iconContainer
+      .querySelector("path")!
+      .getAttribute("d");
+    const primaryButtonSvgPath = container
+      .querySelector(".primaryButton")
+      ?.querySelector("path")
+      ?.getAttribute("d");
+    expect(primaryButtonSvgPath).toBe(expectedSvgPath);
+    expect(container).toMatchSnapshot();
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  it("renders with AppBar ios", async () => {
+    const { container, getByRole } = renderLobbyView(
+      {
+        waitingForInvite: true,
+      },
+      true,
+      "ios",
+    );
+    getByRole("banner");
+    // Check that the primary button uses ArrowLeftIcon (the back/return icon),
+    // not the default CollapseIcon
+    const { container: iconContainer } = render(<ChevronLeftIcon />);
+    const expectedSvgPath = iconContainer
+      .querySelector("path")!
+      .getAttribute("d");
+    const primaryButtonSvgPath = container
+      .querySelector(".primaryButton")
+      ?.querySelector("path")
+      ?.getAttribute("d");
+    expect(primaryButtonSvgPath).toBe(expectedSvgPath);
+    expect(container).toMatchSnapshot();
+    expect(await axe(container)).toHaveNoViolations();
+  });
 });

src/room/LobbyView.tsx

@@ -51,6 +51,7 @@ import { CallFooter, type FooterSnapshot } from "../components/CallFooter";
 import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
 import { createLobbyFooterViewModel } from "../components/CallFooterViewModel";
 import { type ViewModel } from "../state/ViewModel";
+import { useAppBarPrimaryButtonIconKind } from "../AppBar";
 
 interface Props {
   client: MatrixClient;
@@ -85,8 +86,9 @@ export const LobbyView: FC<Props> = ({
   }, []);
 
   const { t } = useTranslation();
-  usePageTitle(matrixInfo.roomName);
 
+  usePageTitle(matrixInfo.roomName);
+  useAppBarPrimaryButtonIconKind("back");
   const audioEnabled = useBehavior(muteStates.audio.enabled$);
   const videoEnabled = useBehavior(muteStates.video.enabled$);
   const toggleAudio = useBehavior(muteStates.audio.toggle$);

src/room/RingingAudioRenderer.test.tsx

@@ -0,0 +1,59 @@
+/*
+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 { expect, type MockedFunction, test, vi } from "vitest";
+import { act, render } from "@testing-library/react";
+import { BehaviorSubject } from "rxjs";
+
+import { useAudioContext } from "../useAudioContext";
+import { createRingingMedia } from "../state/media/RingingMediaViewModel";
+import { alice, aliceId } from "../utils/test-fixtures";
+import { constant } from "../state/Behavior";
+import { RingingAudioRenderer } from "./RingingAudioRenderer";
+import { prefetchSounds } from "../soundUtils";
+
+vi.mock("../useAudioContext");
+vi.mock("../soundUtils");
+
+test("ringtone plays on loop while ringing", () => {
+  (prefetchSounds as MockedFunction<typeof prefetchSounds>).mockResolvedValue({
+    sound: new ArrayBuffer(0),
+  });
+  const endSoundLooping = vi.fn().mockReturnValue(Promise.resolve());
+  const playSoundLooping = vi.fn().mockReturnValue(endSoundLooping);
+  (useAudioContext as MockedFunction<typeof useAudioContext>).mockReturnValue({
+    playSound: vi.fn(),
+    playSoundLooping,
+    soundDuration: {},
+  });
+
+  const pickupState$ = new BehaviorSubject<"ringing" | "timeout" | "decline">(
+    "ringing",
+  );
+  const vm = createRingingMedia({
+    id: aliceId,
+    userId: alice.userId,
+    displayName$: constant("Alice"),
+    mxcAvatarUrl$: constant(undefined),
+    intent: "audio",
+    pickupState$,
+  });
+
+  // Begin ringing
+  render(<RingingAudioRenderer vm={vm} muted={false} />);
+  expect(playSoundLooping).toHaveBeenCalledExactlyOnceWith(
+    "ringtone",
+    expect.any(Number),
+  );
+  expect(endSoundLooping).not.toHaveBeenCalled();
+  vi.clearAllMocks();
+
+  // End ringing
+  act(() => pickupState$.next("decline"));
+  expect(playSoundLooping).not.toHaveBeenCalled();
+  expect(endSoundLooping).toHaveBeenCalledExactlyOnceWith();
+});

src/room/RingingAudioRenderer.tsx

@@ -0,0 +1,72 @@
+/*
+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 { useEffect, type FC } from "react";
+import { logger } from "matrix-js-sdk/lib/logger";
+
+import { type RingingMediaViewModel } from "../state/media/RingingMediaViewModel";
+import { useBehavior } from "../useBehavior";
+import { useInitial } from "../useInitial";
+import { prefetchSounds } from "../soundUtils";
+import ringtoneMp3 from "../sound/ringtone.mp3?url";
+import ringtoneOgg from "../sound/ringtone.ogg?url";
+import { type UseAudioContext, useAudioContext } from "../useAudioContext";
+import { useLatest } from "../useLatest";
+
+interface RingingAudioRendererProps {
+  vm: RingingMediaViewModel | null;
+  muted: boolean;
+}
+
+export const RingingAudioRenderer: FC<RingingAudioRendererProps> = ({
+  vm,
+  muted,
+}) => {
+  // Preload a waiting and decline sounds
+  const sounds = useInitial(async () => {
+    return prefetchSounds({
+      ringtone: { mp3: ringtoneMp3, ogg: ringtoneOgg },
+    });
+  });
+  const audio = useAudioContext({
+    sounds,
+    latencyHint: "interactive",
+    muted,
+  });
+
+  return vm && <ActiveRingingAudioRenderer vm={vm} audio={audio} />;
+};
+
+interface ActiveRingingAudioRendererProps {
+  vm: RingingMediaViewModel;
+  audio: UseAudioContext<"ringtone"> | null;
+}
+
+const ActiveRingingAudioRenderer: FC<ActiveRingingAudioRendererProps> = ({
+  vm,
+  audio,
+}) => {
+  const audio_ = useLatest(audio);
+  const pickupState = useBehavior(vm.pickupState$);
+
+  // While ringing, loop the ringtone
+  useEffect((): void | (() => void) => {
+    if (pickupState === "ringing" && audio_.current) {
+      const endSound = audio_.current.playSoundLooping(
+        "ringtone",
+        audio_.current.soundDuration["ringtone"] ?? 1,
+      );
+      return () => {
+        void endSound().catch((e) => {
+          logger.error("Failed to stop ringing sound", e);
+        });
+      };
+    }
+  }, [pickupState, audio_]);
+
+  return null;
+};

src/room/__snapshots__/LobbyView.test.tsx.snap

@@ -1,5 +1,467 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`LobbyView > renders with AppBar android 1`] = `
+<div>
+  <div
+    class="bar"
+  >
+    <header>
+      <button
+        aria-labelledby="_r_36_"
+        class="_icon-button_1215g_8 primaryButton"
+        data-kind="primary"
+        role="button"
+        style="--cpd-icon-button-size: 32px;"
+        tabindex="0"
+      >
+        <div
+          class="_indicator-icon_147l5_17"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12.207 5.293a1 1 0 0 1 0 1.414L7.914 11H18.5a1 1 0 1 1 0 2H7.914l4.293 4.293a1 1 0 0 1-1.414 1.414l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 0"
+            />
+          </svg>
+        </div>
+      </button>
+      <div
+        class="secondaryButton"
+      />
+    </header>
+  </div>
+  <div
+    class="inRoom"
+  >
+    <div
+      class="content"
+    >
+      <div
+        class="preview"
+      >
+        <video
+          disablepictureinpicture=""
+          playsinline=""
+          tabindex="-1"
+        />
+        <div
+          class="avatarContainer"
+        >
+          <div>
+            <span
+              aria-label="@user:example.org"
+              class="_avatar_va14e_8 _avatar-imageless_va14e_55"
+              data-color="6"
+              data-type="round"
+              role="img"
+              style="--cpd-avatar-size: NaNpx;"
+            >
+              T
+            </span>
+          </div>
+        </div>
+        <div
+          class="buttonBar"
+        >
+          <button
+            aria-disabled="true"
+            class="_button_1nw83_8 join wait"
+            data-kind="primary"
+            data-size="md"
+            data-testid="lobby_joinCall"
+            role="button"
+            tabindex="0"
+          >
+            Join call
+          </button>
+        </div>
+      </div>
+      <a
+        class="_link_k9ljz_8"
+        data-kind="primary"
+        data-size="md"
+        href="/"
+        rel="noreferrer noopener"
+      >
+        Back to recents
+      </a>
+    </div>
+    <div
+      class="footer"
+      data-testid="footer-container"
+    >
+      <div
+        class="settingsLogoContainer"
+      >
+        <button
+          aria-labelledby="_r_3c_"
+          class="_icon-button_1215g_8 settingsOnlyShowWide"
+          data-kind="secondary"
+          data-testid="settings-bottom-left"
+          role="button"
+          style="--cpd-icon-button-size: 32px;"
+          tabindex="0"
+        >
+          <div
+            class="_indicator-icon_147l5_17"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 20q-.825 0-1.412-.587A1.93 1.93 0 0 1 10 18q0-.824.588-1.413A1.93 1.93 0 0 1 12 16q.825 0 1.412.587Q14 17.176 14 18t-.588 1.413A1.93 1.93 0 0 1 12 20m0-6q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m0-6q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 6q0-.824.588-1.412A1.93 1.93 0 0 1 12 4q.825 0 1.412.588Q14 5.175 14 6q0 .824-.588 1.412A1.93 1.93 0 0 1 12 8"
+              />
+            </svg>
+          </div>
+        </button>
+      </div>
+      <div
+        class="buttons"
+      >
+        <button
+          aria-labelledby="_r_3h_"
+          class="_button_1nw83_8 settingsOnlyShowNarrow _has-icon_1nw83_60 _icon-only_1nw83_53"
+          data-kind="secondary"
+          data-size="lg"
+          data-testid="settings-bottom-center"
+          role="button"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 20q-.825 0-1.412-.587A1.93 1.93 0 0 1 10 18q0-.824.588-1.413A1.93 1.93 0 0 1 12 16q.825 0 1.412.587Q14 17.176 14 18t-.588 1.413A1.93 1.93 0 0 1 12 20m0-6q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m0-6q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 6q0-.824.588-1.412A1.93 1.93 0 0 1 12 4q.825 0 1.412.588Q14 5.175 14 6q0 .824-.588 1.412A1.93 1.93 0 0 1 12 8"
+            />
+          </svg>
+        </button>
+        <button
+          aria-busy="false"
+          aria-checked="false"
+          aria-disabled="true"
+          aria-labelledby="_r_3m_"
+          class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
+          data-kind="primary"
+          data-size="lg"
+          data-testid="incall_mute"
+          role="switch"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8 8v-.006l6.831 6.832-.002.002 1.414 1.415.003-.003 1.414 1.414-.003.003L20.5 20.5a1 1 0 0 1-1.414 1.414l-3.022-3.022A7.95 7.95 0 0 1 13 19.938V21a1 1 0 0 1-2 0v-1.062A8 8 0 0 1 4 12a1 1 0 1 1 2 0 6 6 0 0 0 8.587 5.415l-1.55-1.55A4.005 4.005 0 0 1 8 12v-1.172L2.086 4.914A1 1 0 0 1 3.5 3.5zm9.417 6.583 1.478 1.477A7.96 7.96 0 0 0 20 12a1 1 0 0 0-2 0c0 .925-.21 1.8-.583 2.583M8.073 5.238l7.793 7.793q.132-.495.134-1.031V6a4 4 0 0 0-7.927-.762"
+            />
+          </svg>
+        </button>
+        <button
+          aria-busy="false"
+          aria-checked="false"
+          aria-disabled="true"
+          aria-labelledby="_r_3r_"
+          class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
+          data-kind="primary"
+          data-size="lg"
+          data-testid="incall_videomute"
+          role="switch"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M2.747 2.753 4.35 4.355l.007-.003L18 17.994v.012l3.247 3.247a1 1 0 0 1-1.414 1.414l-2.898-2.898A2 2 0 0 1 16 20H6a4 4 0 0 1-4-4V8c0-.892.292-1.715.785-2.38L1.333 4.166a1 1 0 0 1 1.414-1.414M18 15.166 6.834 4H16a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715z"
+            />
+          </svg>
+        </button>
+        <button
+          aria-labelledby="_r_40_"
+          class="_button_1nw83_8 endCall _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
+          data-kind="primary"
+          data-size="lg"
+          data-testid="incall_leave"
+          role="button"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m2.765 16.02-2.47-2.416A1.02 1.02 0 0 1 0 12.852q0-.456.295-.751a15.6 15.6 0 0 1 5.316-3.786A15.9 15.9 0 0 1 12 7q3.355 0 6.39 1.329a16 16 0 0 1 5.315 3.772q.295.294.295.751t-.295.752l-2.47 2.416a1.047 1.047 0 0 1-1.396.108l-3.114-2.363a1.1 1.1 0 0 1-.322-.376 1.1 1.1 0 0 1-.108-.483v-2.27a13.6 13.6 0 0 0-2.12-.524C13.459 9.996 12 9.937 12 9.937s-1.459.059-2.174.175q-1.074.174-2.121.523v2.271q0 .268-.108.483a1.1 1.1 0 0 1-.322.376l-3.114 2.363a1.047 1.047 0 0 1-1.396-.107"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`LobbyView > renders with AppBar ios 1`] = `
+<div>
+  <div
+    class="bar"
+  >
+    <header>
+      <button
+        aria-labelledby="_r_4a_"
+        class="_icon-button_1215g_8 primaryButton"
+        data-kind="primary"
+        role="button"
+        style="--cpd-icon-button-size: 32px;"
+        tabindex="0"
+      >
+        <div
+          class="_indicator-icon_147l5_17"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m13.3 17.3-4.6-4.6a.9.9 0 0 1-.213-.325A1.1 1.1 0 0 1 8.425 12q0-.2.062-.375A.9.9 0 0 1 8.7 11.3l4.6-4.6a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7L10.8 12l3.9 3.9a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
+            />
+          </svg>
+        </div>
+      </button>
+      <div
+        class="secondaryButton"
+      />
+    </header>
+  </div>
+  <div
+    class="inRoom"
+  >
+    <div
+      class="content"
+    >
+      <div
+        class="preview"
+      >
+        <video
+          disablepictureinpicture=""
+          playsinline=""
+          tabindex="-1"
+        />
+        <div
+          class="avatarContainer"
+        >
+          <div>
+            <span
+              aria-label="@user:example.org"
+              class="_avatar_va14e_8 _avatar-imageless_va14e_55"
+              data-color="6"
+              data-type="round"
+              role="img"
+              style="--cpd-avatar-size: NaNpx;"
+            >
+              T
+            </span>
+          </div>
+        </div>
+        <div
+          class="buttonBar"
+        >
+          <button
+            aria-disabled="true"
+            class="_button_1nw83_8 join wait"
+            data-kind="primary"
+            data-size="md"
+            data-testid="lobby_joinCall"
+            role="button"
+            tabindex="0"
+          >
+            Join call
+          </button>
+        </div>
+      </div>
+      <a
+        class="_link_k9ljz_8"
+        data-kind="primary"
+        data-size="md"
+        href="/"
+        rel="noreferrer noopener"
+      >
+        Back to recents
+      </a>
+    </div>
+    <div
+      class="footer"
+      data-testid="footer-container"
+    >
+      <div
+        class="settingsLogoContainer"
+      >
+        <button
+          aria-labelledby="_r_4g_"
+          class="_icon-button_1215g_8 settingsOnlyShowWide"
+          data-kind="secondary"
+          data-testid="settings-bottom-left"
+          role="button"
+          style="--cpd-icon-button-size: 32px;"
+          tabindex="0"
+        >
+          <div
+            class="_indicator-icon_147l5_17"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+              />
+            </svg>
+          </div>
+        </button>
+      </div>
+      <div
+        class="buttons"
+      >
+        <button
+          aria-labelledby="_r_4l_"
+          class="_button_1nw83_8 settingsOnlyShowNarrow _has-icon_1nw83_60 _icon-only_1nw83_53"
+          data-kind="secondary"
+          data-size="lg"
+          data-testid="settings-bottom-center"
+          role="button"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+            />
+          </svg>
+        </button>
+        <button
+          aria-busy="false"
+          aria-checked="false"
+          aria-disabled="true"
+          aria-labelledby="_r_4q_"
+          class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
+          data-kind="primary"
+          data-size="lg"
+          data-testid="incall_mute"
+          role="switch"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8 8v-.006l6.831 6.832-.002.002 1.414 1.415.003-.003 1.414 1.414-.003.003L20.5 20.5a1 1 0 0 1-1.414 1.414l-3.022-3.022A7.95 7.95 0 0 1 13 19.938V21a1 1 0 0 1-2 0v-1.062A8 8 0 0 1 4 12a1 1 0 1 1 2 0 6 6 0 0 0 8.587 5.415l-1.55-1.55A4.005 4.005 0 0 1 8 12v-1.172L2.086 4.914A1 1 0 0 1 3.5 3.5zm9.417 6.583 1.478 1.477A7.96 7.96 0 0 0 20 12a1 1 0 0 0-2 0c0 .925-.21 1.8-.583 2.583M8.073 5.238l7.793 7.793q.132-.495.134-1.031V6a4 4 0 0 0-7.927-.762"
+            />
+          </svg>
+        </button>
+        <button
+          aria-busy="false"
+          aria-checked="false"
+          aria-disabled="true"
+          aria-labelledby="_r_4v_"
+          class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53"
+          data-kind="primary"
+          data-size="lg"
+          data-testid="incall_videomute"
+          role="switch"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M2.747 2.753 4.35 4.355l.007-.003L18 17.994v.012l3.247 3.247a1 1 0 0 1-1.414 1.414l-2.898-2.898A2 2 0 0 1 16 20H6a4 4 0 0 1-4-4V8c0-.892.292-1.715.785-2.38L1.333 4.166a1 1 0 0 1 1.414-1.414M18 15.166 6.834 4H16a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715z"
+            />
+          </svg>
+        </button>
+        <button
+          aria-labelledby="_r_54_"
+          class="_button_1nw83_8 endCall _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
+          data-kind="primary"
+          data-size="lg"
+          data-testid="incall_leave"
+          role="button"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m2.765 16.02-2.47-2.416A1.02 1.02 0 0 1 0 12.852q0-.456.295-.751a15.6 15.6 0 0 1 5.316-3.786A15.9 15.9 0 0 1 12 7q3.355 0 6.39 1.329a16 16 0 0 1 5.315 3.772q.295.294.295.751t-.295.752l-2.47 2.416a1.047 1.047 0 0 1-1.396.108l-3.114-2.363a1.1 1.1 0 0 1-.322-.376 1.1 1.1 0 0 1-.108-.483v-2.27a13.6 13.6 0 0 0-2.12-.524C13.459 9.996 12 9.937 12 9.937s-1.459.059-2.174.175q-1.074.174-2.121.523v2.271q0 .268-.108.483a1.1 1.1 0 0 1-.322.376l-3.114 2.363a1.047 1.047 0 0 1-1.396-.107"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`LobbyView > renders with header and participant count 1`] = `
 <div>
   <div
@@ -168,7 +630,7 @@ exports[`LobbyView > renders with header and participant count 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                d="M12 20q-.825 0-1.412-.587A1.93 1.93 0 0 1 10 18q0-.824.588-1.413A1.93 1.93 0 0 1 12 16q.825 0 1.412.587Q14 17.176 14 18t-.588 1.413A1.93 1.93 0 0 1 12 20m0-6q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m0-6q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 6q0-.824.588-1.412A1.93 1.93 0 0 1 12 4q.825 0 1.412.588Q14 5.175 14 6q0 .824-.588 1.412A1.93 1.93 0 0 1 12 8"
               />
             </svg>
           </div>
@@ -299,7 +761,7 @@ exports[`LobbyView > renders with header and participant count 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+              d="M12 20q-.825 0-1.412-.587A1.93 1.93 0 0 1 10 18q0-.824.588-1.413A1.93 1.93 0 0 1 12 16q.825 0 1.412.587Q14 17.176 14 18t-.588 1.413A1.93 1.93 0 0 1 12 20m0-6q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m0-6q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 6q0-.824.588-1.412A1.93 1.93 0 0 1 12 4q.825 0 1.412.588Q14 5.175 14 6q0 .824-.588 1.412A1.93 1.93 0 0 1 12 8"
             />
           </svg>
         </button>

src/settings/rageshake.ts

@@ -149,7 +149,7 @@ class IndexedDBLogStore {
    * @return Resolves when the store is ready.
    */
   public async connect(): Promise<void> {
-    const req = this.indexedDB.open("logs");
+    const req = this.indexedDB.open("logs-element-call");
     return new Promise((resolve, reject) => {
       req.onsuccess = (): void => {
         this.db = req.result;

src/state/CallViewModel/CallNotificationLifecycle.test.ts

@@ -5,17 +5,19 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { describe, it } from "vitest";
+import { test } from "vitest";
 import {
   EventType,
-  type IEvent,
   type IRoomTimelineData,
   MatrixEvent,
   type Room,
 } from "matrix-js-sdk";
+import { type RTCCallIntent } from "matrix-js-sdk/lib/matrixrtc";
+import { map, mergeMap, NEVER, type Observable, startWith } from "rxjs";
 
 import { withTestScheduler } from "../../utils/test";
 import {
+  alice,
   aliceRtcMember,
   local,
   localRtcMember,
@@ -23,9 +25,10 @@ import {
 import {
   type CallNotificationWrapper,
   createCallNotificationLifecycle$,
-  type Props as CallNotificationLifecycleProps,
+  type RingAttempt,
 } from "./CallNotificationLifecycle";
-import { trackEpoch } from "../ObservableScope";
+import { Epoch, trackEpoch } from "../ObservableScope";
+import { constant } from "../Behavior";
 
 function mockRingEvent(
   eventId: string,
@@ -40,311 +43,272 @@ function mockRingEvent(
   } as unknown as CallNotificationWrapper;
 }
 
-describe("waitForCallPickup$", () => {
-  it("unknown -> ringing -> timeout when notified and nobody joins", () => {
-    withTestScheduler(({ scope, expectObservable, behavior, hot }) => {
-      // No one ever joins (only local user)
-      const props: CallNotificationLifecycleProps = {
-        scope,
-        memberships$: scope.behavior(
-          behavior("a", { a: [] }).pipe(trackEpoch()),
-        ),
-        sentCallNotification$: hot("10ms a", {
-          a: mockRingEvent("$notif1", 30),
-        }),
-        receivedDecline$: hot(""),
-        options: {
-          waitForCallPickup: true,
-          autoLeaveWhenOthersLeft: false,
-        },
-        localUser: localRtcMember,
-      };
+const defaultProps = {
+  memberships$: constant(new Epoch([])),
+  matrixRoomMembers$: constant(new Map([[alice.userId, alice]])),
+  receivedDecline$: NEVER,
+  options: {
+    waitForCallPickup: true,
+    autoLeaveWhenOthersLeft: false,
+  },
+  localUser: localRtcMember,
+};
 
-      const lifecycle = createCallNotificationLifecycle$(props);
+function summarizeRingAttempts$(
+  ringAttempts$: Observable<RingAttempt>,
+): Observable<
+  | { intent: RTCCallIntent; recipient: string }
+  | { outcome: "accept" | "decline" | "timeout" }
+> {
+  return ringAttempts$.pipe(
+    mergeMap(({ intent, recipient, outcome$ }) =>
+      outcome$.pipe(
+        map((outcome) => ({ outcome })),
+        startWith({ intent, recipient }),
+      ),
+    ),
+  );
+}
 
-      expectObservable(lifecycle.callPickupState$).toBe("a 9ms b 29ms c", {
-        a: "unknown",
-        b: "ringing",
-        c: "timeout",
-      });
+test("no ring attempt when waitForCallPickup=false", () => {
+  withTestScheduler(({ scope, expectObservable, hot }) => {
+    const { ringAttempts$ } = createCallNotificationLifecycle$({
+      scope,
+      ...defaultProps,
+      sentCallNotification$: hot("-a", {
+        a: mockRingEvent("$notif1", 30),
+      }),
+      options: { ...defaultProps.options, waitForCallPickup: false },
     });
-  });
 
-  it("ringing -> success if someone joins before timeout is reached", () => {
-    withTestScheduler(({ scope, hot, behavior, expectObservable }) => {
-      // Someone joins at 20ms (both LiveKit participant and MatrixRTC member)
-      const props: CallNotificationLifecycleProps = {
-        scope,
-        memberships$: scope.behavior(
-          behavior("a 19ms b", {
-            a: [localRtcMember],
-            b: [localRtcMember, aliceRtcMember],
-          }).pipe(trackEpoch()),
-        ),
-        sentCallNotification$: hot("5ms a", {
-          a: mockRingEvent("$notif2", 100),
-        }),
-        receivedDecline$: hot(""),
-        options: {
-          waitForCallPickup: true,
-          autoLeaveWhenOthersLeft: false,
-        },
-        localUser: localRtcMember,
-      };
-      const lifecycle = createCallNotificationLifecycle$(props);
-      expectObservable(lifecycle.callPickupState$).toBe("a 4ms b 14ms c", {
-        a: "unknown",
-        b: "ringing",
-        c: "success",
-      });
-    });
-  });
-  it("success when someone joins before we notify", () => {
-    withTestScheduler(({ scope, hot, behavior, expectObservable }) => {
-      // Someone joins at 20ms (both LiveKit participant and MatrixRTC member)
-      const props: CallNotificationLifecycleProps = {
-        scope,
-        memberships$: scope.behavior(
-          behavior("a 9ms b", {
-            a: [localRtcMember],
-            b: [localRtcMember, aliceRtcMember],
-          }).pipe(trackEpoch()),
-        ),
-        sentCallNotification$: hot("20ms a", {
-          a: mockRingEvent("$notif2", 50),
-        }),
-        receivedDecline$: hot(""),
-        options: {
-          waitForCallPickup: true,
-          autoLeaveWhenOthersLeft: false,
-        },
-        localUser: localRtcMember,
-      };
-      const lifecycle = createCallNotificationLifecycle$(props);
-      expectObservable(lifecycle.callPickupState$).toBe("a 9ms b", {
-        a: "unknown",
-        b: "success",
-      });
-    });
-  });
-  it("notify without lifetime -> immediate timeout", () => {
-    withTestScheduler(({ scope, hot, behavior, expectObservable }) => {
-      // Someone joins at 20ms (both LiveKit participant and MatrixRTC member)
-      const props: CallNotificationLifecycleProps = {
-        scope,
-        memberships$: scope.behavior(
-          behavior("a", {
-            a: [localRtcMember],
-          }).pipe(trackEpoch()),
-        ),
-        sentCallNotification$: hot("10ms a", {
-          a: mockRingEvent("$notif2", undefined),
-        }),
-        receivedDecline$: hot(""),
-        options: {
-          waitForCallPickup: true,
-          autoLeaveWhenOthersLeft: false,
-        },
-        localUser: localRtcMember,
-      };
-      const lifecycle = createCallNotificationLifecycle$(props);
-      expectObservable(lifecycle.callPickupState$).toBe("a 9ms b", {
-        a: "unknown",
-        b: "timeout",
-      });
-    });
-  });
-
-  it("stays null when waitForCallPickup=false", () => {
-    withTestScheduler(({ scope, hot, behavior, expectObservable }) => {
-      // Someone joins at 20ms (both LiveKit participant and MatrixRTC member)
-      const validProps: CallNotificationLifecycleProps = {
-        scope,
-        memberships$: scope.behavior(
-          behavior("a--b", {
-            a: [localRtcMember],
-            b: [localRtcMember, aliceRtcMember],
-          }).pipe(trackEpoch()),
-        ),
-        sentCallNotification$: hot("10ms a", {
-          a: mockRingEvent("$notif5", 30),
-        }),
-        receivedDecline$: hot(""),
-        options: {
-          waitForCallPickup: true,
-          autoLeaveWhenOthersLeft: false,
-        },
-        localUser: localRtcMember,
-      };
-      const propsDeactivated = {
-        ...validProps,
-        options: {
-          ...validProps.options,
-          waitForCallPickup: false,
-        },
-      };
-      const lifecycle = createCallNotificationLifecycle$(propsDeactivated);
-      expectObservable(lifecycle.callPickupState$).toBe("n", {
-        n: null,
-      });
-      const lifecycleReference = createCallNotificationLifecycle$(validProps);
-      expectObservable(lifecycleReference.callPickupState$).toBe("u--s", {
-        u: "unknown",
-        s: "success",
-      });
-    });
-  });
-
-  it("decline before timeout window ends -> decline", () => {
-    withTestScheduler(({ scope, hot, behavior, expectObservable }) => {
-      // Someone joins at 20ms (both LiveKit participant and MatrixRTC member)
-      const props: CallNotificationLifecycleProps = {
-        scope,
-        memberships$: scope.behavior(
-          behavior("a", {
-            a: [localRtcMember],
-          }).pipe(trackEpoch()),
-        ),
-        sentCallNotification$: hot("10ms a", {
-          a: mockRingEvent("$decl1", 50),
-        }),
-        receivedDecline$: hot("40ms d", {
-          d: [
-            new MatrixEvent({
-              type: EventType.RTCDecline,
-              content: {
-                "m.relates_to": {
-                  rel_type: "m.reference",
-                  event_id: "$decl1",
-                },
-              },
-            }),
-            {} as Room,
-            undefined,
-            false,
-            {} as IRoomTimelineData,
-          ],
-        }),
-        options: {
-          waitForCallPickup: true,
-          autoLeaveWhenOthersLeft: false,
-        },
-        localUser: localRtcMember,
-      };
-      const lifecycle = createCallNotificationLifecycle$(props);
-      expectObservable(lifecycle.callPickupState$).toBe("a 9ms b 29ms e", {
-        a: "unknown",
-        b: "ringing",
-        e: "decline",
-      });
-    });
-  });
-  it("decline after timeout window ends -> stays timeout", () => {
-    withTestScheduler(({ scope, hot, behavior, expectObservable }) => {
-      // Someone joins at 20ms (both LiveKit participant and MatrixRTC member)
-      const props: CallNotificationLifecycleProps = {
-        scope,
-        memberships$: scope.behavior(
-          behavior("a", {
-            a: [localRtcMember],
-          }).pipe(trackEpoch()),
-        ),
-        sentCallNotification$: hot("10ms a", {
-          a: mockRingEvent("$decl", 20),
-        }),
-        receivedDecline$: hot("40ms d", {
-          d: [
-            new MatrixEvent({
-              type: EventType.RTCDecline,
-              content: {
-                "m.relates_to": {
-                  rel_type: "m.reference",
-                  event_id: "$decl",
-                },
-              },
-            }),
-            {} as Room,
-            undefined,
-            false,
-            {} as IRoomTimelineData,
-          ],
-        }),
-        options: {
-          waitForCallPickup: true,
-          autoLeaveWhenOthersLeft: false,
-        },
-        localUser: localRtcMember,
-      };
-      const lifecycle = createCallNotificationLifecycle$(props);
-      expectObservable(lifecycle.callPickupState$, "50ms !").toBe(
-        "a 9ms b 19ms e",
-        {
-          a: "unknown",
-          b: "ringing",
-          e: "timeout",
-        },
-      );
-    });
-  });
-  //
-  function testStaysRinging(
-    declineEvent: Partial<IEvent>,
-    expectDecline: boolean,
-  ): void {
-    withTestScheduler(({ scope, hot, behavior, expectObservable }) => {
-      // Someone joins at 20ms (both LiveKit participant and MatrixRTC member)
-      const props: CallNotificationLifecycleProps = {
-        scope,
-        memberships$: scope.behavior(
-          behavior("a", {
-            a: [localRtcMember],
-          }).pipe(trackEpoch()),
-        ),
-        sentCallNotification$: hot("10ms a", {
-          a: mockRingEvent("$right", 50),
-        }),
-        receivedDecline$: hot("20ms d", {
-          d: [
-            new MatrixEvent(declineEvent),
-            {} as Room,
-            undefined,
-            false,
-            {} as IRoomTimelineData,
-          ],
-        }),
-        options: {
-          waitForCallPickup: true,
-          autoLeaveWhenOthersLeft: false,
-        },
-        localUser: localRtcMember,
-      };
-      const lifecycle = createCallNotificationLifecycle$(props);
-      const marbles = expectDecline ? "a 9ms b 9ms d" : "a 9ms b";
-      expectObservable(lifecycle.callPickupState$, "21ms !").toBe(marbles, {
-        a: "unknown",
-        b: "ringing",
-        d: "decline",
-      });
-    });
-  }
-  const reference = (refId?: string, sender?: string): Partial<IEvent> => ({
-    event_id: "$decline",
-    type: EventType.RTCDecline,
-    sender: sender ?? "@other:example.org",
-    content: {
-      "m.relates_to": {
-        rel_type: "m.reference",
-        event_id: refId ?? "$right",
-      },
-    },
-  });
-  it("decline reference works", () => {
-    testStaysRinging(reference(), true);
-  });
-  it("decline with wrong id is ignored (stays ringing)", () => {
-    testStaysRinging(reference("$wrong"), false);
-  });
-  it("decline with wrong id is ignored (stays ringing)", () => {
-    testStaysRinging(reference(undefined, local.userId), false);
+    expectObservable(ringAttempts$).toBe("");
+  });
+});
+
+test("no ring attempt when notification type is not ring", () => {
+  withTestScheduler(({ scope, expectObservable, hot }) => {
+    const { ringAttempts$ } = createCallNotificationLifecycle$({
+      scope,
+      ...defaultProps,
+      sentCallNotification$: hot("-a", {
+        a: {
+          ...mockRingEvent("$notif1", 30),
+          notification_type: "notification",
+        },
+      }),
+    });
+
+    expectObservable(ringAttempts$).toBe("");
+  });
+});
+
+test("no ring attempt if lifetime is missing", () => {
+  withTestScheduler(({ scope, expectObservable, hot }) => {
+    const { ringAttempts$ } = createCallNotificationLifecycle$({
+      scope,
+      ...defaultProps,
+      sentCallNotification$: hot("-a", {
+        a: mockRingEvent("$notif1", undefined),
+      }),
+    });
+
+    expectObservable(ringAttempts$).toBe("");
+  });
+});
+
+test("ring attempt times out after nobody joins", () => {
+  withTestScheduler(({ scope, expectObservable, hot }) => {
+    const { ringAttempts$ } = createCallNotificationLifecycle$({
+      scope,
+      ...defaultProps,
+      // No one ever joins (only local user)
+      memberships$: constant(new Epoch([])),
+      sentCallNotification$: hot("-a", {
+        a: mockRingEvent("$notif1", 30),
+      }),
+    });
+
+    expectObservable(summarizeRingAttempts$(ringAttempts$)).toBe("-a 29ms A", {
+      a: { intent: "audio", recipient: alice.userId },
+      A: { outcome: "timeout" },
+    });
+  });
+});
+
+test("ring attempt is accepted once recipient joins", () => {
+  withTestScheduler(({ scope, expectObservable, hot, behavior }) => {
+    const { ringAttempts$ } = createCallNotificationLifecycle$({
+      scope,
+      ...defaultProps,
+      memberships$: scope.behavior(
+        behavior("a-b", { a: [], b: [aliceRtcMember] }).pipe(trackEpoch()),
+      ),
+      sentCallNotification$: hot("-a", {
+        a: mockRingEvent("$notif1", 30),
+      }),
+    });
+
+    expectObservable(summarizeRingAttempts$(ringAttempts$)).toBe("-aA", {
+      a: { intent: "audio", recipient: alice.userId },
+      A: { outcome: "accept" },
+    });
+  });
+});
+
+test("ring attempt is immediately accepted if recipient is already joined", () => {
+  withTestScheduler(({ scope, expectObservable, hot }) => {
+    const { ringAttempts$ } = createCallNotificationLifecycle$({
+      scope,
+      ...defaultProps,
+      memberships$: constant(new Epoch([aliceRtcMember])),
+      sentCallNotification$: hot("-a", {
+        a: mockRingEvent("$notif1", 30),
+      }),
+    });
+
+    expectObservable(summarizeRingAttempts$(ringAttempts$)).toBe("-(aA)", {
+      a: { intent: "audio", recipient: alice.userId },
+      A: { outcome: "accept" },
+    });
+  });
+});
+
+test("ring attempt can be declined", () => {
+  withTestScheduler(({ scope, expectObservable, hot }) => {
+    const { ringAttempts$ } = createCallNotificationLifecycle$({
+      scope,
+      ...defaultProps,
+      sentCallNotification$: hot("-a", {
+        a: mockRingEvent("$notif1", 30),
+      }),
+      receivedDecline$: hot("--d", {
+        d: [
+          new MatrixEvent({
+            type: EventType.RTCDecline,
+            sender: alice.userId,
+            content: {
+              "m.relates_to": {
+                rel_type: "m.reference",
+                event_id: "$notif1",
+              },
+            },
+          }),
+          {} as Room,
+          undefined,
+          false,
+          {} as IRoomTimelineData,
+        ],
+      }),
+    });
+
+    expectObservable(summarizeRingAttempts$(ringAttempts$)).toBe("-aA", {
+      a: { intent: "audio", recipient: alice.userId },
+      A: { outcome: "decline" },
+    });
+  });
+});
+
+test("ring attempt times out if recipient declines too late", () => {
+  withTestScheduler(({ scope, expectObservable, hot }) => {
+    const { ringAttempts$ } = createCallNotificationLifecycle$({
+      scope,
+      ...defaultProps,
+      sentCallNotification$: hot("-a", {
+        a: mockRingEvent("$notif1", 30),
+      }),
+      receivedDecline$: hot("100ms d", {
+        d: [
+          new MatrixEvent({
+            type: EventType.RTCDecline,
+            sender: alice.userId,
+            content: {
+              "m.relates_to": {
+                rel_type: "m.reference",
+                event_id: "$notif1",
+              },
+            },
+          }),
+          {} as Room,
+          undefined,
+          false,
+          {} as IRoomTimelineData,
+        ],
+      }),
+    });
+
+    expectObservable(summarizeRingAttempts$(ringAttempts$)).toBe("-a 29ms A", {
+      a: { intent: "audio", recipient: alice.userId },
+      A: { outcome: "timeout" },
+    });
+  });
+});
+
+test("decline event relating to wrong event is ignored (times out)", () => {
+  withTestScheduler(({ scope, expectObservable, hot }) => {
+    const { ringAttempts$ } = createCallNotificationLifecycle$({
+      scope,
+      ...defaultProps,
+      sentCallNotification$: hot("-a", {
+        a: mockRingEvent("$notif1", 30),
+      }),
+      receivedDecline$: hot("--d", {
+        d: [
+          new MatrixEvent({
+            type: EventType.RTCDecline,
+            sender: alice.userId,
+            content: {
+              "m.relates_to": {
+                rel_type: "m.reference",
+                event_id: "$other", // <---- WRONG
+              },
+            },
+          }),
+          {} as Room,
+          undefined,
+          false,
+          {} as IRoomTimelineData,
+        ],
+      }),
+    });
+
+    expectObservable(summarizeRingAttempts$(ringAttempts$)).toBe("-a 29ms A", {
+      a: { intent: "audio", recipient: alice.userId },
+      A: { outcome: "timeout" },
+    });
+  });
+});
+
+test("decline event from wrong sender is ignored (times out)", () => {
+  withTestScheduler(({ scope, expectObservable, hot }) => {
+    const { ringAttempts$ } = createCallNotificationLifecycle$({
+      scope,
+      ...defaultProps,
+      sentCallNotification$: hot("-a", {
+        a: mockRingEvent("$notif1", 30),
+      }),
+      receivedDecline$: hot("--d", {
+        d: [
+          new MatrixEvent({
+            type: EventType.RTCDecline,
+            sender: local.userId, // <---- WRONG
+            content: {
+              "m.relates_to": {
+                rel_type: "m.reference",
+                event_id: "$notif1",
+              },
+            },
+          }),
+          {} as Room,
+          undefined,
+          false,
+          {} as IRoomTimelineData,
+        ],
+      }),
+    });
+
+    expectObservable(summarizeRingAttempts$(ringAttempts$)).toBe("-a 29ms A", {
+      a: { intent: "audio", recipient: alice.userId },
+      A: { outcome: "timeout" },
+    });
   });
 });

src/state/CallViewModel/CallNotificationLifecycle.ts

@@ -10,24 +10,22 @@ import {
   type IRTCNotificationContent,
   type MatrixRTCSession,
   MatrixRTCSessionEvent,
+  type RTCCallIntent,
 } from "matrix-js-sdk/lib/matrixrtc";
 import {
-  combineLatest,
-  concat,
-  endWith,
   filter,
   fromEvent,
-  ignoreElements,
   map,
   merge,
   NEVER,
   type Observable,
   of,
   pairwise,
-  startWith,
   switchMap,
-  takeUntil,
   timer,
+  EMPTY,
+  race,
+  take,
 } from "rxjs";
 import {
   type EventTimelineSetHandlerMap,
@@ -35,18 +33,28 @@ import {
   type Room as MatrixRoom,
   RoomEvent,
 } from "matrix-js-sdk";
+import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
 
 import { type Behavior } from "../Behavior";
-import { type Epoch, mapEpoch, type ObservableScope } from "../ObservableScope";
+import { type Epoch, type ObservableScope } from "../ObservableScope";
+import { type RoomMemberMap } from "./remoteMembers/MatrixMemberMetadata";
+
+const logger = rootLogger.getChild("[CallNotificationLifecycle]");
 
 export type AutoLeaveReason = "allOthersLeft" | "timeout" | "decline";
-export type CallPickupState =
-  | "unknown"
-  | "ringing"
-  | "timeout"
-  | "decline"
-  | "success"
-  | null;
+
+export interface RingAttempt {
+  intent: RTCCallIntent;
+  /**
+   * The user ID of the recipient being rung.
+   */
+  recipient: string;
+  /**
+   * The eventual outcome of the ringing attempt. (Emits a single value.)
+   */
+  // TODO: Include a callback for attempting ringing again in case of a timeout
+  outcome$: Observable<"accept" | "decline" | "timeout">;
+}
 
 export type CallNotificationWrapper = {
   event_id: string;
@@ -76,6 +84,7 @@ export function createReceivedDecline$(
 export interface Props {
   scope: ObservableScope;
   memberships$: Behavior<Epoch<CallMembership[]>>;
+  matrixRoomMembers$: Behavior<RoomMemberMap>;
   sentCallNotification$: Observable<CallNotificationWrapper | null>;
   receivedDecline$: Observable<
     Parameters<EventTimelineSetHandlerMap[RoomEvent.Timeline]>
@@ -84,34 +93,85 @@ export interface Props {
   localUser: { deviceId: string; userId: string };
 }
 
-/**
- * @returns two observables:
- * `callPickupState$` The current call pickup state of the call.
- *  - "unknown": The client has not yet sent the notification event. We don't know if it will because it first needs to send its own membership.
- *     Then we can conclude if we were the first one to join or not.
- *  - "ringing": The call is ringing on other devices in this room (This client should give audiovisual feedback that this is happening).
- *  - "timeout": No-one picked up in the defined time this call should be ringing on others devices.
- *     The call failed. If desired this can be used as a trigger to exit the call.
- *  - "success": Someone else joined. The call is in a normal state. No audiovisual feedback.
- *  - null: EC is configured to never show any waiting for answer state.
- *
- * `autoLeave$` An observable that emits (null) when the call should be automatically left.
- *  - if options.autoLeaveWhenOthersLeft is set to true it emits when all others left.
- *  - if options.waitForCallPickup is set to true it emits if noone picked up the ring or if the ring got declined.
- *  - if options.autoLeaveWhenOthersLeft && options.waitForCallPickup is false it will never emit.
- *
- */
 export function createCallNotificationLifecycle$({
   scope,
   memberships$,
+  matrixRoomMembers$,
   sentCallNotification$,
   receivedDecline$,
   options,
   localUser,
 }: Props): {
-  callPickupState$: Behavior<CallPickupState>;
+  /**
+   * An observable of attempts to ring the remote participant's devices.
+   */
+  ringAttempts$: Observable<RingAttempt>;
+  /**
+   * An observable that emits when the call should be automatically left.
+   *  - if options.autoLeaveWhenOthersLeft is set to true it emits when all others left.
+   *  - if options.waitForCallPickup is set to true it emits if noone picked up the ring or if the ring got declined.
+   *  - if options.autoLeaveWhenOthersLeft && options.waitForCallPickup is false it will never emit.
+   */
   autoLeave$: Observable<AutoLeaveReason>;
 } {
+  let ringAttempts$: Observable<RingAttempt> = NEVER;
+  if (options.waitForCallPickup)
+    ringAttempts$ = sentCallNotification$.pipe(
+      filter(
+        (
+          notificationEvent: CallNotificationWrapper | null,
+        ): notificationEvent is CallNotificationWrapper =>
+          // only care about new events (legacy do not have decline pattern)
+          notificationEvent?.notification_type === "ring" &&
+          notificationEvent.lifetime > 0,
+      ),
+      switchMap((notificationEvent) => {
+        // We assume that there is only one other user in the room when ringing
+        // TODO: Respect io.element.functional_members
+        const recipient = [...matrixRoomMembers$.value.keys()].find(
+          (userId) => userId !== localUser.userId,
+        );
+        if (recipient === undefined) {
+          logger.warn("No recipient for notification event; not ringing.");
+          return EMPTY;
+        }
+
+        // Ringing times out after lifetime ms have passed
+        const timeout$ = timer(notificationEvent.lifetime).pipe(
+          map(() => "timeout" as const),
+        );
+        // Call is accepted when the recipient joins
+        const accept$ = memberships$.pipe(
+          filter((ms) => ms.value.some((m) => m.userId === recipient)),
+          map(() => "accept" as const),
+        );
+        // Call is declined when we receive a decline event
+        const decline$ = receivedDecline$.pipe(
+          filter(
+            ([event]) =>
+              event.getRelation()?.rel_type === "m.reference" &&
+              event.getRelation()?.event_id === notificationEvent.event_id &&
+              event.getSender() === recipient,
+          ),
+          map(() => "decline" as const),
+        );
+
+        return of({
+          intent: notificationEvent["m.call.intent"] ?? "audio",
+          recipient,
+          outcome$: race(timeout$, accept$, decline$).pipe(
+            take(1),
+            // Make this observable 'hot' to avoid running multiple timers. This
+            // is not actually a resource leak since there will be at most one
+            // active ring attempt at any given time.
+            // eslint-disable-next-line element-call/no-observablescope-leak
+            scope.share,
+          ),
+        });
+      }),
+      scope.share,
+    );
+
   const allOthersLeft$ = memberships$.pipe(
     pairwise(),
     filter(
@@ -122,87 +182,18 @@ export function createCallNotificationLifecycle$({
     map(() => {}),
   );
 
-  /**
-   * Whether some Matrix user other than ourself is joined to the call.
-   */
-  const someoneElseJoined$ = memberships$.pipe(
-    mapEpoch((ms) => ms.some((m) => m.userId !== localUser.userId)),
-  ) as Behavior<Epoch<boolean>>;
-
-  /**
-   * The state of the current ringing attempt, if the RTC session is indeed
-   * ringing the remote participant's devices. Otherwise `null`.
-   */
-  const remoteRingState$: Behavior<"ringing" | "timeout" | "decline" | null> =
-    scope.behavior(
-      sentCallNotification$.pipe(
-        filter(
-          (notificationEventArgs: CallNotificationWrapper | null) =>
-            // only care about new events (legacy do not have decline pattern)
-            notificationEventArgs?.notification_type === "ring",
-        ),
-        map((e) => e as CallNotificationWrapper),
-        switchMap((notificationEvent) => {
-          const lifetimeMs = notificationEvent?.lifetime ?? 0;
-          return concat(
-            lifetimeMs === 0
-              ? // If no lifetime, skip the ring state
-                of(null)
-              : // Ring until lifetime ms have passed
-                timer(lifetimeMs).pipe(
-                  ignoreElements(),
-                  startWith("ringing" as const),
-                ),
-            // The notification lifetime has timed out, meaning ringing has likely
-            // stopped on all receiving clients.
-            of("timeout" as const),
-            // This makes sure we will not drop into the `endWith("decline" as const)` state
-            NEVER,
-          ).pipe(
-            takeUntil(
-              receivedDecline$.pipe(
-                filter(
-                  ([event]) =>
-                    event.getRelation()?.rel_type === "m.reference" &&
-                    event.getRelation()?.event_id ===
-                      notificationEvent.event_id &&
-                    event.getSender() !== localUser.userId &&
-                    callPickupState$.value !== "timeout",
-                ),
-              ),
-            ),
-            endWith("decline" as const),
-          );
-        }),
-      ),
-      null,
-    );
-
-  const callPickupState$ = scope.behavior(
-    options.waitForCallPickup === true
-      ? combineLatest(
-          [someoneElseJoined$, remoteRingState$],
-          (someoneElseJoined, ring) => {
-            if (someoneElseJoined.value === true) {
-              return "success" as const;
-            }
-            // Show the ringing state of the most recent ringing attempt.
-            // as long as we have not yet sent an RTC notification event or noone else joined,
-            // ring will be null -> callPickupState$ = unknown.
-            return ring ?? ("unknown" as const);
-          },
-        )
-      : NEVER,
-    null,
-  );
-
   const autoLeave$ = merge(
     options.autoLeaveWhenOthersLeft === true
       ? allOthersLeft$.pipe(map(() => "allOthersLeft" as const))
       : NEVER,
-    callPickupState$.pipe(
-      filter((state) => state === "timeout" || state === "decline"),
+    ringAttempts$.pipe(
+      switchMap(({ outcome$ }) =>
+        outcome$.pipe(
+          filter((outcome) => outcome === "timeout" || outcome === "decline"),
+        ),
+      ),
     ),
   );
-  return { autoLeave$, callPickupState$ };
+
+  return { ringAttempts$, autoLeave$ };
 }

src/state/CallViewModel/CallViewModel.test.ts

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
-import { test, vi, onTestFinished, it, describe } from "vitest";
+import { test, vi, onTestFinished, it, describe, expect } from "vitest";
 import {
   BehaviorSubject,
   combineLatest,
@@ -899,6 +899,41 @@ describe.each([
     },
   );
 
+  // TODO add media to lk mocks
+  test("onPipMediaOrientationUpdate is called with the spotlight media orientation", () => {
+    // Set the spy before creating the view model so the initial call is captured
+    const onPipMediaOrientationUpdate = vi.fn();
+    window.controls.onPipMediaOrientationUpdate = onPipMediaOrientationUpdate;
+    onTestFinished(() => {
+      window.controls.onPipMediaOrientationUpdate = undefined;
+    });
+
+    withTestScheduler(({ behavior }) => {
+      // Alice starts as a regular participant, then shares her screen, then stops
+      const aliceSharingInputMarbles = "nyn";
+
+      withCallViewModel(
+        {
+          remoteParticipants$: constant([aliceParticipant]),
+          rtcMembers$: constant([localRtcMember, aliceRtcMember]),
+          sharingScreen: new Map([
+            [aliceParticipant, behavior(aliceSharingInputMarbles, yesNo)],
+          ]),
+        },
+        () => {},
+      );
+    });
+
+    // Should be called exactly 3 times:
+    // 1. Initially with "portrait" (Alice is in spotlight as a user, default portrait orientation)
+    // 2. With "landscape" when Alice starts screen sharing (screen shares always use landscape)
+    // 3. With "portrait" again when Alice stops screen sharing and returns to user tile
+    expect(onPipMediaOrientationUpdate).toHaveBeenCalledTimes(3);
+    expect(onPipMediaOrientationUpdate).toHaveBeenNthCalledWith(1, "portrait");
+    expect(onPipMediaOrientationUpdate).toHaveBeenNthCalledWith(2, "landscape");
+    expect(onPipMediaOrientationUpdate).toHaveBeenNthCalledWith(3, "portrait");
+  });
+
   test("PiP tile in expanded spotlight layout switches speakers without layout shifts", () => {
     withTestScheduler(({ behavior, schedule, expectObservable }) => {
       // Switch to spotlight immediately
@@ -1385,8 +1420,14 @@ describe.each([
             },
           });
 
-          // Should ring for 30ms and then time out
-          expectObservable(vm.ringing$).toBe("(ny) 26ms n", yesNo);
+          expectObservable(vm.ringingVm$).toBe("(ab)", {
+            a: null,
+            b: expect.objectContaining({
+              type: "ringing",
+              userId: alice.userId,
+              intent: "audio",
+            }),
+          });
           // Layout should show placeholder media for the participant we're
           // ringing the entire time (even once timed out)
           expectObservable(summarizeLayout$(vm.layout$)).toBe("a", {
@@ -1425,7 +1466,14 @@ describe.each([
           });
 
           // Should ring until Alice joins
-          expectObservable(vm.ringing$).toBe("(ny) 17ms n", yesNo);
+          expectObservable(vm.ringingVm$).toBe("(ab) 17ms a", {
+            a: null,
+            b: expect.objectContaining({
+              type: "ringing",
+              userId: alice.userId,
+              intent: "audio",
+            }),
+          });
           // Layout should show placeholder media for the participant we're
           // ringing the entire time
           expectObservable(summarizeLayout$(vm.layout$)).toBe("a 20ms b", {

src/state/CallViewModel/CallViewModel.ts

@@ -29,7 +29,6 @@ import {
   pairwise,
   race,
   scan,
-  skipWhile,
   startWith,
   Subject,
   switchAll,
@@ -39,6 +38,7 @@ import {
   tap,
   throttleTime,
   timer,
+  takeUntil,
 } from "rxjs";
 import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import {
@@ -125,10 +125,9 @@ import {
   createConnectionManager$,
 } from "./remoteMembers/ConnectionManager.ts";
 import {
-  createMatrixLivekitMembers$,
+  createRemoteMatrixLivekitMembers$,
   type LocalMatrixLivekitMember,
   type RemoteMatrixLivekitMember,
-  type MatrixLivekitMember,
 } from "./remoteMembers/MatrixLivekitMembers.ts";
 import {
   type AutoLeaveReason,
@@ -230,9 +229,13 @@ export interface CallViewModel {
   // lifecycle
   autoLeave$: Observable<AutoLeaveReason>;
   /**
-   * Whether we are ringing a call recipient.
+   * View model for info relating to ringing, timing out, calling back, etc.
    */
-  ringing$: Behavior<boolean>;
+  ringingVm$: Behavior<RingingMediaViewModel | null>;
+  /**
+   * Which visual element the ringing status should be shown in.
+   */
+  ringingStatusLocation: "app_bar" | "tile";
   /** Observable that emits when the user should leave the call (hangup pressed, widget action, error).
    * THIS DOES NOT LEAVE THE CALL YET. The only way to leave the call (send the hangup event) is
    *  - by ending the scope
@@ -300,7 +303,7 @@ export interface CallViewModel {
   /** Participants sorted by livekit room so they can be used in the audio rendering */
   livekitRoomItems$: Behavior<LivekitRoomItem[]>;
   /** use the layout instead, this is just for the sdk export. */
-  matrixLivekitMembers$: Behavior<RemoteMatrixLivekitMember[]>;
+  remoteMatrixLivekitMembers$: Behavior<RemoteMatrixLivekitMember[]>;
   localMatrixLivekitMember$: Behavior<LocalMatrixLivekitMember | null>;
   /** List of participants raising their hand */
   handsRaised$: Behavior<Record<string, RaisedHandInfo>>;
@@ -527,13 +530,15 @@ export function createCallViewModel$(
     ownMembershipIdentity,
   });
 
-  const matrixLivekitMembers$: Behavior<Epoch<RemoteMatrixLivekitMember[]>> =
-    createMatrixLivekitMembers$({
-      scope: scope,
-      membershipsWithTransport$:
-        membershipsAndTransports.membershipsWithTransport$,
-      connectionManager: connectionManager,
-    });
+  const remoteMatrixLivekitMembers$: Behavior<
+    Epoch<RemoteMatrixLivekitMember[]>
+  > = createRemoteMatrixLivekitMembers$({
+    scope: scope,
+    membershipsWithTransport$:
+      membershipsAndTransports.membershipsWithTransport$,
+    connectionManager: connectionManager,
+    localUser: { userId, deviceId },
+  });
 
   const connectOptions$ = scope.behavior(
     matrixRTCMode$.pipe(
@@ -610,19 +615,12 @@ export function createCallViewModel$(
       ),
     );
 
-  // ------------------------------------------------------------------------
-  // callLifecycle
-
-  // TODO if we are in "unknown" state we need a loading rendering (or empty screen)
-  // Otherwise it looks like we already connected and only than the ringing starts which is weird.
-  const { callPickupState$, autoLeave$ } = createCallNotificationLifecycle$({
-    scope: scope,
-    memberships$: memberships$,
-    sentCallNotification$: createSentCallNotification$(scope, matrixRTCSession),
-    receivedDecline$: createReceivedDecline$(matrixRoom),
-    options: options,
-    localUser: { userId: userId, deviceId: deviceId },
-  });
+  const matrixLivekitMembers$ = scope.behavior(
+    combineLatest(
+      [localMatrixLivekitMember$, remoteMatrixLivekitMembers$],
+      (local, remote) => [...(local === null ? [] : [local]), ...remote.value],
+    ),
+  );
 
   // ------------------------------------------------------------------------
   // matrixMemberMetadataStore
@@ -634,11 +632,26 @@ export function createCallViewModel$(
     matrixRoomMembers$,
   );
 
+  // ------------------------------------------------------------------------
+  // callLifecycle
+
+  // TODO if we are in "unknown" state we need a loading rendering (or empty screen)
+  // Otherwise it looks like we already connected and only than the ringing starts which is weird.
+  const { ringAttempts$, autoLeave$ } = createCallNotificationLifecycle$({
+    scope,
+    memberships$,
+    matrixRoomMembers$,
+    sentCallNotification$: createSentCallNotification$(scope, matrixRTCSession),
+    receivedDecline$: createReceivedDecline$(matrixRoom),
+    options,
+    localUser: { userId, deviceId },
+  });
+
   const allConnections$ = scope.behavior(
     connectionManager.connectionManagerData$.pipe(map((d) => d.value)),
   );
   const livekitRoomItems$ = scope.behavior(
-    matrixLivekitMembers$.pipe(
+    remoteMatrixLivekitMembers$.pipe(
       switchMap((members) => {
         const a$ = combineLatest(
           members.value.map((member) =>
@@ -704,43 +717,20 @@ export function createCallViewModel$(
    * List of user media (camera feeds) that we want tiles for.
    */
   const userMedia$ = scope.behavior<WrappedUserMediaViewModel[]>(
-    combineLatest([
-      localMatrixLivekitMember$,
-      matrixLivekitMembers$,
-      duplicateTiles.value$,
-    ]).pipe(
+    combineLatest([matrixLivekitMembers$, duplicateTiles.value$]).pipe(
       // Generate a collection of user media from the list of expected (whether
       // present or missing) LiveKit participants.
       generateItems(
         "CallViewModel userMedia$",
-        function* ([
-          localMatrixLivekitMember,
-          matrixLivekitMembers,
-          duplicateTiles,
-        ]) {
-          const computeMediaId = (m: MatrixLivekitMember): string =>
-            `${m.userId}:${m.membership$.value.deviceId}`;
-
-          const localUserMediaId = localMatrixLivekitMember
-            ? computeMediaId(localMatrixLivekitMember)
-            : undefined;
-
-          const localAsArray = localMatrixLivekitMember
-            ? [localMatrixLivekitMember]
-            : [];
-          const remoteWithoutLocal = matrixLivekitMembers.value.filter(
-            (m) => computeMediaId(m) !== localUserMediaId,
-          );
-          const allMatrixLivekitMembers = [
-            ...localAsArray,
-            ...remoteWithoutLocal,
-          ];
-
-          for (const matrixLivekitMember of allMatrixLivekitMembers) {
-            const { userId, participant, connection$, membership$ } =
-              matrixLivekitMember;
-            const rtcId = membership$.value.rtcBackendIdentity; // rtcBackendIdentity
-            const mediaId = computeMediaId(matrixLivekitMember);
+        function* ([members, duplicateTiles]) {
+          for (const {
+            userId,
+            participant,
+            connection$,
+            membership$,
+          } of members) {
+            const rtcId = membership$.value.rtcBackendIdentity;
+            const mediaId = `${userId}:${membership$.value.deviceId}`;
             for (let dup = 0; dup < 1 + duplicateTiles; dup++) {
               yield {
                 keys: [dup, mediaId, userId, participant, connection$, rtcId],
@@ -784,51 +774,42 @@ export function createCallViewModel$(
     ),
   );
 
-  const ringingMedia$ = scope.behavior<RingingMediaViewModel[]>(
-    combineLatest([userMedia$, matrixRoomMembers$, callPickupState$]).pipe(
-      generateItems(
-        "CallViewModel ringingMedia$",
-        function* ([userMedia, roomMembers, callPickupState]) {
-          if (
-            callPickupState === "ringing" ||
-            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 {
-                  keys: [member.userId],
-                  data: callPickupState,
-                };
-            }
-          }
-        },
-        (scope, pickupState$, userId) =>
-          createRingingMedia({
-            id: `ringing:${userId}`,
-            userId,
-            displayName$: scope.behavior(
-              matrixRoomMembers$.pipe(
-                map((members) => members.get(userId)?.rawDisplayName || userId),
-              ),
-            ),
-            mxcAvatarUrl$: matrixMemberMetadataStore.createAvatarUrlBehavior$(
-              scope,
-              userId,
-            ),
-            pickupState$,
-            muteStates,
-          }),
+  const ringingMedia$ = scope.behavior<RingingMediaViewModel | null>(
+    ringAttempts$.pipe(
+      switchMap(({ intent, recipient, outcome$ }) =>
+        outcome$.pipe(
+          startWith("ringing" as const),
+          generateItems(
+            "CallViewModel ringingMedia$",
+            function* (pickupState) {
+              if (pickupState !== "accept")
+                yield { keys: [intent, recipient], data: pickupState };
+            },
+            (scope, pickupState$, intent, userId) =>
+              createRingingMedia({
+                id: `ringing:${userId}`,
+                userId,
+                displayName$: scope.behavior(
+                  matrixRoomMembers$.pipe(
+                    map(
+                      (members) =>
+                        members.get(userId)?.rawDisplayName || userId,
+                    ),
+                  ),
+                ),
+                mxcAvatarUrl$:
+                  matrixMemberMetadataStore.createAvatarUrlBehavior$(
+                    scope,
+                    userId,
+                  ),
+                pickupState$,
+                intent,
+              }),
+          ),
+          map(([media]) => media ?? null),
+        ),
       ),
-      distinctUntilChanged(shallowEquals),
-      tap((ringingMedia) => {
-        if (ringingMedia.length > 1)
-          // Warn that UI may do something unexpected in this case
-          logger.warn(
-            `Ringing more than one participant is not supported (ringing ${ringingMedia.map((vm) => vm.userId).join(", ")})`,
-          );
-      }),
+      startWith(null),
     ),
   );
 
@@ -867,14 +848,10 @@ export function createCallViewModel$(
    *    multiple devices.
    */
   const participantCount$ = scope.behavior(
-    matrixLivekitMembers$.pipe(map((ms) => ms.value.length)),
+    matrixLivekitMembers$.pipe(map((ms) => ms.length)),
   );
 
-  const leaveSoundEffect$ = combineLatest([callPickupState$, userMedia$]).pipe(
-    // Until the call is successful, do not play a leave sound.
-    // If callPickupState$ is null, then we always play the sound as it will not conflict with a decline sound.
-    skipWhile(([c]) => c !== null && c !== "success"),
-    map(([, userMedia]) => userMedia),
+  const leaveSoundEffect$ = userMedia$.pipe(
     pairwise(),
     filter(
       ([prev, current]) =>
@@ -883,6 +860,9 @@ export function createCallViewModel$(
     ),
     map(() => {}),
     throttleTime(THROTTLE_SOUND_EFFECT_MS),
+    // Avoid doubling up on any auto-leave sounds (e.g. the decline sound),
+    // which are handled elsewhere
+    takeUntil(autoLeave$),
   );
 
   const userHangup$ = new Subject<void>();
@@ -987,8 +967,8 @@ export function createCallViewModel$(
   }>(
     ringingMedia$.pipe(
       switchMap((ringingMedia) => {
-        if (ringingMedia.length > 0)
-          return of({ spotlight: ringingMedia, pip$: localUserMediaForPip$ });
+        if (ringingMedia !== null)
+          return of({ spotlight: [ringingMedia], pip$: localUserMediaForPip$ });
 
         return screenShares$.pipe(
           switchMap((screenShares) => {
@@ -1144,14 +1124,10 @@ export function createCallViewModel$(
           // show ringing media instead
           if (userMedia.length === 1)
             return ringingMedia$.pipe(
-              map((ringingMedia) => {
-                return ringingMedia.length === 1
-                  ? {
-                      local,
-                      remote: ringingMedia[0],
-                    }
-                  : null;
-              }),
+              map(
+                (ringingMedia) =>
+                  ringingMedia && { local, remote: ringingMedia },
+              ),
             );
         }
       }
@@ -1203,6 +1179,33 @@ export function createCallViewModel$(
     })),
   );
 
+  spotlight$
+    .pipe(
+      switchMap((media) => {
+        let layout;
+        const pipMedia = media[0];
+        if (pipMedia === undefined) return of(undefined);
+        switch (pipMedia.type) {
+          case "user":
+            layout = pipMedia.videoOrientation$;
+            break;
+          case "ringing":
+            layout = of("landscape" as const);
+            break;
+          case "screen share":
+            layout = of("landscape" as const);
+            break;
+        }
+        return layout;
+      }),
+      scope.bind(),
+    )
+    .subscribe((orientation) => {
+      if (orientation === undefined) return;
+      logger.info("controls api pip orientation updated:", orientation);
+      window.controls.onPipMediaOrientationUpdate?.(orientation);
+    });
+
   /**
    * The media to be used to produce a layout.
    */
@@ -1701,9 +1704,9 @@ export function createCallViewModel$(
 
   return {
     autoLeave$: autoLeave$,
-    ringing$: scope.behavior(
-      callPickupState$.pipe(map((state) => state === "ringing")),
-    ),
+    ringingVm$: ringingMedia$,
+    ringingStatusLocation:
+      urlParams.header === HeaderStyle.AppBar ? "app_bar" : "tile",
     leave$: leave$,
     hangup: (): void => userHangup$.next(),
     join: localMembership.requestJoinAndPublish,
@@ -1748,8 +1751,8 @@ export function createCallViewModel$(
     setGridMode: setGridMode,
     layout$: layout$,
     localMatrixLivekitMember$,
-    matrixLivekitMembers$: scope.behavior(
-      matrixLivekitMembers$.pipe(
+    remoteMatrixLivekitMembers$: scope.behavior(
+      remoteMatrixLivekitMembers$.pipe(
         map((members) => members.value),
         tap((v) => {
           const listForLogs = v

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

@@ -15,7 +15,7 @@ import { BehaviorSubject, combineLatest, map, type Observable } from "rxjs";
 import { type IConnectionManager } from "./ConnectionManager.ts";
 import {
   type RemoteMatrixLivekitMember,
-  createMatrixLivekitMembers$,
+  createRemoteMatrixLivekitMembers$,
 } from "./MatrixLivekitMembers.ts";
 import {
   Epoch,
@@ -31,6 +31,7 @@ import {
 } from "../../../utils/test.ts";
 import { type Connection } from "./Connection.ts";
 import { constant } from "../../Behavior.ts";
+import { localRtcMember } from "../../../utils/test-fixtures.ts";
 
 let testScope: ObservableScope;
 
@@ -88,16 +89,17 @@ test("should signal participant not yet connected to livekit", async () => {
     mockConnectionManagerData$,
   );
 
-  const matrixLivekitMember$ = createMatrixLivekitMembers$({
+  const remoteMatrixLivekitMembers$ = createRemoteMatrixLivekitMembers$({
     scope: testScope,
     membershipsWithTransport$: testScope.behavior(membershipsWithTransport$),
     connectionManager: {
       connectionManagerData$: connectionManagerData$,
     } as unknown as IConnectionManager,
+    localUser: localRtcMember,
   });
 
   await flushPromises();
-  expect(matrixLivekitMember$.value.value).toSatisfy(
+  expect(remoteMatrixLivekitMembers$.value.value).toSatisfy(
     (data: RemoteMatrixLivekitMember[]) => {
       expect(data.length).toEqual(1);
       expect(data[0].membership$.value).toBe(bobMembership);
@@ -157,16 +159,17 @@ test("should signal participant on a connection that is publishing", async () =>
     constant(dataWithPublisher),
   );
 
-  const matrixLivekitMember$ = createMatrixLivekitMembers$({
+  const remoteMatrixLivekitMembers$ = createRemoteMatrixLivekitMembers$({
     scope: testScope,
     membershipsWithTransport$: testScope.behavior(membershipsWithTransport$),
     connectionManager: {
       connectionManagerData$: connectionManagerData$,
     } as unknown as IConnectionManager,
+    localUser: localRtcMember,
   });
 
   await flushPromises();
-  expect(matrixLivekitMember$.value.value).toSatisfy(
+  expect(remoteMatrixLivekitMembers$.value.value).toSatisfy(
     (data: RemoteMatrixLivekitMember[]) => {
       expect(data.length).toEqual(1);
       expect(data[0].membership$.value).toBe(bobMembership);
@@ -197,15 +200,16 @@ test("should signal participant on a connection that is not publishing", async (
     constant(dataWithPublisher),
   );
 
-  const matrixLivekitMember$ = createMatrixLivekitMembers$({
+  const remoteMatrixLivekitMembers$ = createRemoteMatrixLivekitMembers$({
     scope: testScope,
     membershipsWithTransport$: testScope.behavior(membershipsWithTransport$),
     connectionManager: {
       connectionManagerData$: connectionManagerData$,
     } as unknown as IConnectionManager,
+    localUser: localRtcMember,
   });
   await flushPromises();
-  expect(matrixLivekitMember$.value.value).toSatisfy(
+  expect(remoteMatrixLivekitMembers$.value.value).toSatisfy(
     (data: RemoteMatrixLivekitMember[]) => {
       expect(data.length).toEqual(1);
       expect(data[0].membership$.value).toBe(bobMembership);
@@ -245,15 +249,16 @@ describe("Publication edge case", () => {
       constant(connectionWithPublisher),
     );
 
-    const matrixLivekitMembers$ = createMatrixLivekitMembers$({
+    const remoteMatrixLivekitMembers$ = createRemoteMatrixLivekitMembers$({
       scope: testScope,
       membershipsWithTransport$: testScope.behavior(membershipsWithTransport$),
       connectionManager: {
         connectionManagerData$: connectionManagerData$,
       } as unknown as IConnectionManager,
+      localUser: localRtcMember,
     });
     await flushPromises();
-    expect(matrixLivekitMembers$.value.value).toSatisfy(
+    expect(remoteMatrixLivekitMembers$.value.value).toSatisfy(
       (data: RemoteMatrixLivekitMember[]) => {
         expect(data.length).toEqual(2);
         expect(data[0].membership$.value).toBe(bobMembership);
@@ -303,16 +308,17 @@ test("bob is publishing in the wrong connection", async () => {
     connectionsWithPublisher$,
   );
 
-  const matrixLivekitMember$ = createMatrixLivekitMembers$({
+  const remoteMatrixLivekitMembers$ = createRemoteMatrixLivekitMembers$({
     scope: testScope,
     membershipsWithTransport$: testScope.behavior(membershipsWithTransport$),
     connectionManager: {
       connectionManagerData$: connectionManagerData$,
     } as unknown as IConnectionManager,
+    localUser: localRtcMember,
   });
 
   await flushPromises();
-  expect(matrixLivekitMember$.value.value).toSatisfy(
+  expect(remoteMatrixLivekitMembers$.value.value).toSatisfy(
     (data: RemoteMatrixLivekitMember[]) => {
       expect(data.length).toEqual(2);
       expect(data[0].membership$.value).toBe(bobMembership);

src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.ts

@@ -62,7 +62,9 @@ interface Props {
     Epoch<{ membership: CallMembership; transport?: LivekitTransportConfig }[]>
   >;
   connectionManager: IConnectionManager;
+  localUser: { deviceId: string; userId: string };
 }
+
 /**
  * Combines MatrixRTC and Livekit worlds.
  *
@@ -73,13 +75,14 @@ interface Props {
  *  - out (via public Observable):
  *    - `remoteMatrixLivekitMember` an observable of MatrixLivekitMember[] to track the remote members and associated livekit data.
  */
-export function createMatrixLivekitMembers$({
+export function createRemoteMatrixLivekitMembers$({
   scope,
   membershipsWithTransport$,
   connectionManager,
+  localUser,
 }: Props): Behavior<Epoch<RemoteMatrixLivekitMember[]>> {
   /**
-   * Stream of all the call members and their associated livekit data (if available).
+   * Behavior of all the remote call members and their associated livekit data (if available).
    */
   return scope.behavior(
     combineLatest([
@@ -91,12 +94,19 @@ export function createMatrixLivekitMembers$({
       ),
       map(([ms, data]) => new Epoch([ms.value, data.value] as const, ms.epoch)),
       generateItemsWithEpoch(
-        "MatrixLivekitMembers",
+        "RemoteMatrixLivekitMembers",
         // Generator function.
         // creates an array of `{key, data}[]`
         // Each change in the keys (new key) will result in a call to the factory function.
         function* ([membershipsWithTransport, managerData]) {
           for (const { membership, transport } of membershipsWithTransport) {
+            // Exclude the local membership
+            if (
+              membership.userId === localUser.userId &&
+              membership.deviceId === localUser.deviceId
+            )
+              continue;
+
             const participants = transport
               ? managerData.getParticipantsForTransport(transport)
               : [];

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

@@ -29,13 +29,13 @@ import {
 import { type ProcessorState } from "../../../livekit/TrackProcessorContext.tsx";
 import {
   areLivekitTransportsEqual,
-  createMatrixLivekitMembers$,
+  createRemoteMatrixLivekitMembers$,
   type RemoteMatrixLivekitMember,
 } from "./MatrixLivekitMembers.ts";
 import { createConnectionManager$ } from "./ConnectionManager.ts";
 import { membershipsAndTransports$ } from "../../SessionBehaviors.ts";
 import { constant } from "../../Behavior.ts";
-import { testJWTToken } from "../../../utils/test-fixtures.ts";
+import { localRtcMember, testJWTToken } from "../../../utils/test-fixtures.ts";
 
 // Test the integration of ConnectionManager and MatrixLivekitMerger
 
@@ -130,14 +130,15 @@ test("bob, carl, then bob joining no tracks yet", () => {
       ownMembershipIdentity: ownMemberMock,
     });
 
-    const matrixLivekitMembers$ = createMatrixLivekitMembers$({
+    const remoteMatrixLivekitMembers$ = createRemoteMatrixLivekitMembers$({
       scope: testScope,
       membershipsWithTransport$:
         membershipsAndTransports.membershipsWithTransport$,
       connectionManager,
+      localUser: localRtcMember,
     });
 
-    expectObservable(matrixLivekitMembers$).toBe(vMarble, {
+    expectObservable(remoteMatrixLivekitMembers$).toBe(vMarble, {
       a: expect.toSatisfy((e: Epoch<RemoteMatrixLivekitMember[]>) => {
         const items = e.value;
         expect(items.length).toBe(1);

src/state/media/MemberMediaViewModel.ts

@@ -92,6 +92,7 @@ export function createMemberMedia(
   }: MemberMediaInputs,
 ): BaseMemberMediaViewModel {
   const trackBehavior$ = (
+    scope: ObservableScope,
     source: Track.Source,
   ): Behavior<TrackReference | undefined> =>
     scope.behavior(
@@ -102,8 +103,8 @@ export function createMemberMedia(
       ),
     );
 
-  const audio$ = trackBehavior$(audioSource);
-  const video$ = trackBehavior$(videoSource);
+  const audio$ = trackBehavior$(scope, audioSource);
+  const video$ = trackBehavior$(scope, videoSource);
 
   return {
     ...createBaseMedia(inputs),

src/state/media/RingingMediaViewModel.ts

@@ -5,8 +5,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
+import { type RTCCallIntent } from "matrix-js-sdk/lib/matrixrtc";
+
 import { type Behavior } from "../Behavior";
-import { type MuteStates } from "../MuteStates";
 import {
   type BaseMediaInputs,
   type BaseMediaViewModel,
@@ -20,32 +21,23 @@ import {
 export interface RingingMediaViewModel extends BaseMediaViewModel {
   type: "ringing";
   pickupState$: Behavior<"ringing" | "timeout" | "decline">;
-  /**
-   * Whether this media would be expected to have video, were it not simply a
-   * placeholder.
-   */
-  videoEnabled$: Behavior<boolean>;
+  intent: RTCCallIntent;
 }
 
 export interface RingingMediaInputs extends BaseMediaInputs {
   pickupState$: Behavior<"ringing" | "timeout" | "decline">;
-  /**
-   * The local user's own mute states.
-   */
-  muteStates: MuteStates;
+  intent: RTCCallIntent;
 }
 
 export function createRingingMedia({
   pickupState$,
-  muteStates,
+  intent,
   ...inputs
 }: RingingMediaInputs): RingingMediaViewModel {
   return {
     ...createBaseMedia(inputs),
     type: "ringing",
     pickupState$,
-    // If our own video is enabled, then this is a video call and we would
-    // expect remote media to have video as well
-    videoEnabled$: muteStates.video.enabled$,
+    intent,
   };
 }

src/state/media/UserMediaViewModel.ts

@@ -48,6 +48,7 @@ export interface BaseUserMediaViewModel extends BaseMemberMediaViewModel {
   audioEnabled$: Behavior<boolean>;
   videoEnabled$: Behavior<boolean>;
   videoFit$: Behavior<"cover" | "contain">;
+  videoOrientation$: Behavior<"landscape" | "portrait">;
   toggleCropVideo: () => void;
   /**
    * The expected identity of the LiveKit participant. Exposed for debugging.
@@ -104,6 +105,7 @@ export function createBaseUserMedia(
     { width: number; height: number } | undefined
   >(undefined);
 
+  const videoSize$ = videoSizeFromParticipant$(participant$);
   return {
     ...createMemberMedia(scope, {
       ...inputs,
@@ -129,11 +131,14 @@ export function createBaseUserMedia(
     videoEnabled$: scope.behavior(
       media$.pipe(map((m) => m?.cameraTrack?.isMuted === false)),
     ),
-    videoFit$: videoFit$(
-      scope,
-      videoSizeFromParticipant$(participant$),
-      targetSize$,
+    videoOrientation$: scope.behavior(
+      videoSize$.pipe(
+        map((s) => (s ? s.width / s.height : 1)),
+        map((aspect) => (aspect > 1 ? "landscape" : "portrait")),
+      ),
+      "portrait",
     ),
+    videoFit$: videoFit$(scope, videoSize$, targetSize$),
     toggleCropVideo: () => toggleCropVideo$.next(),
     rtcBackendIdentity,
     handRaised$,

src/state/media/observeRtpStreamStats.ts

@@ -32,7 +32,9 @@ export function observeRtpStreamStats$(
 > {
   return combineLatest([
     observeTrackReference$(participant, source),
-    interval(1000).pipe(startWith(0)),
+    // The update frequency is high because we use this value to update the PiP orientation and the fit/fill video tile props based on that
+    // We want it to be responsive. For just the debug tools 1s would be sufficient.
+    interval(350).pipe(startWith(0)),
   ]).pipe(
     switchMap(async ([trackReference]) => {
       const track = trackReference?.publication?.track;

src/tile/GridTile.test.tsx

@@ -26,7 +26,6 @@ import {
   createRingingMedia,
   type RingingMediaViewModel,
 } from "../state/media/RingingMediaViewModel";
-import { type MuteStates } from "../state/MuteStates";
 
 global.IntersectionObserver = class MockIntersectionObserver {
   public observe(): void {}
@@ -78,6 +77,7 @@ test("GridTile is accessible", async () => {
         targetHeight={200}
         showSpeakingIndicators
         showNameTags
+        showRingingStatus
         focusable
       />
     </ReactionsSenderProvider>,
@@ -93,10 +93,8 @@ test("GridTile displays ringing media", async () => {
   >("ringing");
   const vm = createRingingMedia({
     pickupState$,
-    muteStates: {
-      video: { enabled$: constant(false) },
-    } as unknown as MuteStates,
     id: "test",
+    intent: "audio",
     userId: "@alice:example.org",
     displayName$: constant("Alice"),
     mxcAvatarUrl$: constant(undefined),
@@ -111,6 +109,7 @@ test("GridTile displays ringing media", async () => {
         targetHeight={200}
         showSpeakingIndicators
         showNameTags
+        showRingingStatus
         focusable
       />
     </ReactionsSenderProvider>,

src/tile/GridTile.tsx

@@ -29,15 +29,13 @@ import {
   UserProfileIcon,
   VolumeOffSolidIcon,
   SwitchCameraSolidIcon,
-  VideoCallSolidIcon,
-  VoiceCallSolidIcon,
-  EndCallIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import {
   ContextMenu,
   MenuItem,
   ToggleMenuItem,
   Menu,
+  Text,
 } from "@vector-im/compound-web";
 import { useObservableEagerState } from "observable-hooks";
 
@@ -53,6 +51,7 @@ import { type LocalUserMediaViewModel } from "../state/media/LocalUserMediaViewM
 import { type RemoteUserMediaViewModel } from "../state/media/RemoteUserMediaViewModel";
 import { type UserMediaViewModel } from "../state/media/UserMediaViewModel";
 import { type RingingMediaViewModel } from "../state/media/RingingMediaViewModel";
+import { RingingStatus } from "./RingingStatus";
 
 interface TileProps {
   ref?: Ref<HTMLDivElement>;
@@ -68,17 +67,15 @@ interface TileProps {
 
 interface RingingMediaTileProps extends TileProps {
   vm: RingingMediaViewModel;
+  showStatus: boolean;
 }
 
 const RingingMediaTile: FC<RingingMediaTileProps> = ({
   vm,
+  showStatus,
   className,
   ...props
 }) => {
-  const { t } = useTranslation();
-  const pickupState = useBehavior(vm.pickupState$);
-  const videoEnabled = useBehavior(vm.videoEnabled$);
-
   return (
     <MediaView
       className={classNames(className, styles.tile)}
@@ -86,14 +83,14 @@ const RingingMediaTile: FC<RingingMediaTileProps> = ({
       userId={vm.userId}
       unencryptedWarning={false}
       status={
-        pickupState === "ringing"
-          ? {
-              text: t("video_tile.calling"),
-              Icon: videoEnabled ? VideoCallSolidIcon : VoiceCallSolidIcon,
-            }
-          : { text: t("video_tile.call_ended"), Icon: EndCallIcon }
+        showStatus && (
+          <Text as="span" size="sm" weight="medium">
+            <RingingStatus vm={vm} />
+          </Text>
+        )
       }
-      videoEnabled={videoEnabled}
+      avatarStyle="translucent"
+      videoEnabled={false}
       videoFit="cover"
       mirror={false}
       {...props}
@@ -400,6 +397,7 @@ interface GridTileProps {
   style?: ComponentProps<typeof animated.div>["style"];
   showSpeakingIndicators: boolean;
   showNameTags: boolean;
+  showRingingStatus: boolean;
   focusable: boolean;
 }
 
@@ -407,6 +405,7 @@ export const GridTile: FC<GridTileProps> = ({
   ref: theirRef,
   vm,
   showSpeakingIndicators,
+  showRingingStatus,
   onOpenProfile,
   ...props
 }) => {
@@ -423,6 +422,7 @@ export const GridTile: FC<GridTileProps> = ({
         vm={media}
         displayName={displayName}
         mxcAvatarUrl={mxcAvatarUrl}
+        showStatus={showRingingStatus}
         {...props}
       />
     );

src/tile/MediaView.module.css

@@ -54,11 +54,12 @@ Please see LICENSE in the repository root for full details.
   left: 50%;
   transform: translate(-50%, -50%);
   pointer-events: none;
+  opacity: 100%;
+  transition: opacity 0.2s;
 }
 
-.translucent {
+.avatar[data-style="translucent"] {
   opacity: 50%;
-  mix-blend-mode: multiply;
 }
 
 /* CSS makes us put a condition here, even though all we want to do is
@@ -121,18 +122,18 @@ unconditionally select the container so we can use cqmin units */
 .status {
   grid-area: status;
   color: var(--cpd-color-text-primary);
-  display: flex;
-  flex-wrap: none;
-  align-items: center;
-  gap: 3px;
   user-select: none;
   overflow: hidden;
   margin-block-start: calc(var(--cpd-space-3x) - var(--fg-inset));
   margin-inline-start: calc(var(--cpd-space-4x) - var(--fg-inset));
-}
 
-.status svg {
-  color: var(--cpd-color-icon-tertiary);
+  svg {
+    color: var(--cpd-color-icon-tertiary);
+    vertical-align: text-bottom;
+    margin-inline-end: 3px;
+    block-size: 1.2em;
+    inline-size: 1.2em;
+  }
 }
 
 .reactions {

src/tile/MediaView.tsx

@@ -7,13 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { type TrackReferenceOrPlaceholder } from "@livekit/components-core";
 import { animated } from "@react-spring/web";
-import {
-  type FC,
-  type ComponentProps,
-  type ReactNode,
-  type ComponentType,
-  type SVGAttributes,
-} from "react";
+import { type FC, type ComponentProps, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import { VideoTrack } from "@livekit/components-react";
@@ -43,11 +37,12 @@ interface Props extends ComponentProps<typeof animated.div> {
   userId: string;
   videoEnabled: boolean;
   unencryptedWarning: boolean;
-  status?: { text: string; Icon: ComponentType<SVGAttributes<SVGElement>> };
+  status?: ReactNode;
   showNameTags: boolean;
   nameTagLeadingIcon?: ReactNode;
   displayName: string;
   mxcAvatarUrl: string | undefined;
+  avatarStyle?: "solid" | "translucent";
   focusable: boolean;
   primaryButton?: ReactNode;
   raisedHandTime?: Date;
@@ -77,6 +72,7 @@ export const MediaView: FC<Props> = ({
   nameTagLeadingIcon,
   displayName,
   mxcAvatarUrl,
+  avatarStyle = "solid",
   focusable,
   primaryButton,
   status,
@@ -130,11 +126,8 @@ export const MediaView: FC<Props> = ({
           name={displayName}
           size={avatarSize}
           src={mxcAvatarUrl}
-          className={classNames(styles.avatar, {
-            // When the avatar is overlaid with a status, make it translucent
-            // for readability
-            [styles.translucent]: status,
-          })}
+          data-style={avatarStyle}
+          className={styles.avatar}
           style={{ display: video && videoEnabled ? "none" : "initial" }}
         />
         {video?.publication !== undefined && (
@@ -180,14 +173,7 @@ export const MediaView: FC<Props> = ({
             />
           </>
         )}
-        {status && (
-          <div className={styles.status}>
-            <status.Icon width={16} height={16} aria-hidden />
-            <Text as="span" size="sm" weight="medium">
-              {status.text}
-            </Text>
-          </div>
-        )}
+        {status && <div className={styles.status}>{status}</div>}
         {/* TODO: Bring this back once encryption status is less broken */}
         {/*encryptionStatus !== EncryptionStatus.Okay && (
             <div className={styles.status}>

src/tile/RingingStatus.tsx

@@ -0,0 +1,41 @@
+/*
+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 FC } from "react";
+import {
+  VideoCallSolidIcon,
+  VoiceCallSolidIcon,
+  EndCallIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
+import { useTranslation } from "react-i18next";
+
+import { type RingingMediaViewModel } from "../state/media/RingingMediaViewModel";
+import { useBehavior } from "../useBehavior";
+
+interface Props {
+  vm: RingingMediaViewModel;
+}
+
+export const RingingStatus: FC<Props> = ({ vm }) => {
+  const { t } = useTranslation();
+  const pickupState = useBehavior(vm.pickupState$);
+  const Icon =
+    pickupState === "ringing"
+      ? vm.intent === "video"
+        ? VideoCallSolidIcon
+        : VoiceCallSolidIcon
+      : EndCallIcon;
+
+  return (
+    <>
+      <Icon aria-hidden />
+      {pickupState === "ringing"
+        ? t("video_tile.calling")
+        : t("video_tile.call_ended")}
+    </>
+  );
+};

src/tile/SpotlightTile.test.tsx

@@ -28,7 +28,6 @@ import {
   createRingingMedia,
   type RingingMediaViewModel,
 } from "../state/media/RingingMediaViewModel";
-import { type MuteStates } from "../state/MuteStates";
 
 global.IntersectionObserver = class MockIntersectionObserver {
   public observe(): void {}
@@ -66,6 +65,7 @@ test("SpotlightTile is accessible", async () => {
       onToggleExpanded={toggleExpanded}
       showIndicators
       showNameTags
+      showRingingStatus
       focusable={true}
     />,
   );
@@ -108,6 +108,7 @@ test("Screen share volume UI is shown when screen share has audio", async () =>
         onToggleExpanded={toggleExpanded}
         showIndicators
         showNameTags
+        showRingingStatus
         focusable
       />
     </TooltipProvider>,
@@ -138,6 +139,7 @@ test("Screen share volume UI is hidden when screen share has no audio", async ()
       onToggleExpanded={toggleExpanded}
       showIndicators
       showNameTags
+      showRingingStatus
       focusable
     />,
   );
@@ -156,10 +158,8 @@ test("SpotlightTile displays ringing media", async () => {
   >("ringing");
   const vm = createRingingMedia({
     pickupState$,
-    muteStates: {
-      video: { enabled$: constant(false) },
-    } as unknown as MuteStates,
     id: "test",
+    intent: "audio",
     userId: "@alice:example.org",
     displayName$: constant("Alice"),
     mxcAvatarUrl$: constant(undefined),
@@ -175,6 +175,7 @@ test("SpotlightTile displays ringing media", async () => {
       onToggleExpanded={toggleExpanded}
       showIndicators
       showNameTags
+      showRingingStatus
       focusable={true}
     />,
   );

src/tile/SpotlightTile.tsx

@@ -24,9 +24,6 @@ import {
   VolumeOnIcon,
   VolumeOffSolidIcon,
   VolumeOnSolidIcon,
-  VideoCallSolidIcon,
-  VoiceCallSolidIcon,
-  EndCallIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import { animated } from "@react-spring/web";
 import { type Observable, map } from "rxjs";
@@ -34,7 +31,7 @@ import { useObservableRef } from "observable-hooks";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import { type TrackReferenceOrPlaceholder } from "@livekit/components-core";
-import { Menu, MenuItem } from "@vector-im/compound-web";
+import { Menu, MenuItem, Text } from "@vector-im/compound-web";
 
 import FullScreenMaximiseIcon from "../icons/FullScreenMaximise.svg?react";
 import FullScreenMinimiseIcon from "../icons/FullScreenMinimise.svg?react";
@@ -56,6 +53,7 @@ import { type MediaViewModel } from "../state/media/MediaViewModel";
 import { Slider } from "../Slider";
 import { platform } from "../Platform";
 import { type RingingMediaViewModel } from "../state/media/RingingMediaViewModel";
+import { RingingStatus } from "./RingingStatus";
 
 interface SpotlightItemBaseProps {
   ref?: Ref<HTMLDivElement>;
@@ -204,28 +202,26 @@ const SpotlightMemberMediaItem: FC<SpotlightMemberMediaItemProps> = ({
 
 interface SpotlightRingingMediaItemProps extends SpotlightItemBaseProps {
   vm: RingingMediaViewModel;
+  showStatus: boolean;
 }
 
 const SpotlightRingingMediaItem: FC<SpotlightRingingMediaItemProps> = ({
   vm,
+  showStatus,
   ...props
 }) => {
-  const { t } = useTranslation();
-  const pickupState = useBehavior(vm.pickupState$);
-  const videoEnabled = useBehavior(vm.videoEnabled$);
-
   return (
     <MediaView
       video={undefined}
       unencryptedWarning={false}
       status={
-        pickupState === "ringing"
-          ? {
-              text: t("video_tile.calling"),
-              Icon: videoEnabled ? VideoCallSolidIcon : VoiceCallSolidIcon,
-            }
-          : { text: t("video_tile.call_ended"), Icon: EndCallIcon }
+        showStatus && (
+          <Text as="span" size="md" weight="medium">
+            <RingingStatus vm={vm} />
+          </Text>
+        )
       }
+      avatarStyle="translucent"
       videoEnabled={false}
       videoFit="cover"
       mirror={false}
@@ -246,6 +242,7 @@ interface SpotlightItemProps {
    */
   targetHeight: number;
   showNameTags: boolean;
+  showRingingStatus: boolean;
   focusable: boolean;
   intersectionObserver$: Observable<IntersectionObserver>;
   /**
@@ -261,6 +258,7 @@ const SpotlightItem: FC<SpotlightItemProps> = ({
   targetWidth,
   targetHeight,
   showNameTags,
+  showRingingStatus,
   focusable,
   intersectionObserver$,
   snap,
@@ -302,7 +300,11 @@ const SpotlightItem: FC<SpotlightItemProps> = ({
   };
 
   return vm.type === "ringing" ? (
-    <SpotlightRingingMediaItem vm={vm} {...baseProps} />
+    <SpotlightRingingMediaItem
+      vm={vm}
+      showStatus={showRingingStatus}
+      {...baseProps}
+    />
   ) : (
     <SpotlightMemberMediaItem vm={vm} {...baseProps} />
   );
@@ -386,6 +388,7 @@ interface Props {
   targetHeight: number;
   showIndicators: boolean;
   showNameTags: boolean;
+  showRingingStatus: boolean;
   focusable: boolean;
   className?: string;
   style?: ComponentProps<typeof animated.div>["style"];
@@ -400,6 +403,7 @@ export const SpotlightTile: FC<Props> = ({
   targetHeight,
   showIndicators,
   showNameTags,
+  showRingingStatus,
   focusable = true,
   className,
   style,
@@ -510,6 +514,7 @@ export const SpotlightTile: FC<Props> = ({
             vm={vm}
             targetWidth={targetWidth}
             targetHeight={targetHeight}
+            showRingingStatus={showRingingStatus}
             showNameTags={showNameTags}
             focusable={focusable}
             intersectionObserver$={intersectionObserver$}

src/useAudioContext.tsx

@@ -113,7 +113,7 @@ interface Props<S extends string> {
   muted?: boolean;
 }
 
-interface UseAudioContext<S extends string> {
+export interface UseAudioContext<S extends string> {
   playSound(soundName: S, volumeOverwrite?: number): Promise<void>;
   playSoundLooping(soundName: S, delayS?: number): () => Promise<void>;
   /**