Update remaining variable names for remote Matrix-LiveKit members

Clarify which Matrix-LiveKit members are remote
It was rather confusing that matrixLivekitMembers$ gives you objects of type RemoteMatrixLivekitMembers and yet the *local* member would often be among these. I've attempted to clear this up. To my knowledge this wasn't creating any bugs.
2026-08-26 21:09:21 +00:00 · 2026-06-22 10:44:24 +02:00 · 2026-06-18 12:10:32 +02:00 · 2026-06-18 12:00:34 +02:00 · 2026-06-18 11:42:02 +02:00 · 2026-06-18 11:35:46 +02:00
28 changed files with 1148 additions and 2173 deletions
--- a/.github/labels.yml
+++ b/.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"
--- a/.github/workflows/sync-labels.yml
+++ b/.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 }}
--- a/README.md
+++ b/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
--- a/babel.config.cjs
+++ b/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"],
-};
--- a/docs/controls.md
+++ b/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

--- a/knip.ts
+++ b/knip.ts
@@ -24,11 +24,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
--- a/package.json
+++ b/package.json
@@ -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,6 @@
    "@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/grecaptcha": "^3.0.9",
    "@types/jsdom": "^21.1.7",
    "@types/lodash-es": "^4.17.12",
@@ -84,11 +79,10 @@
    "@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",
@@ -148,17 +142,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"
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/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"
--- a/sdk/main.ts
+++ b/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([
--- a/src/controls.ts
+++ b/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;
--- a/src/room/GroupCallView.test.tsx
+++ b/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();

--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -266,7 +266,7 @@ export const InCallView: FC<InCallViewProps> = ({
    () => void toggleRaisedHand(),
  );

-  const ringing = useBehavior(vm.ringing$);
+  const ringingIntent = useBehavior(vm.ringingIntent$);
  const audioParticipants = useBehavior(vm.livekitRoomItems$);
  const participantCount = useBehavior(vm.participantCount$);
  const reconnecting = useBehavior(vm.reconnecting$);
@@ -289,7 +289,7 @@ export const InCallView: FC<InCallViewProps> = ({
  // While ringing, loop the ringtone
  useEffect((): void | (() => void) => {
    const audio = latestPickupPhaseAudio.current;
-    if (ringing && audio) {
+    if (ringingIntent !== null && audio) {
      const endSound = audio.playSoundLooping(
        "waiting",
        audio.soundDuration["waiting"] ?? 1,
@@ -300,7 +300,7 @@ export const InCallView: FC<InCallViewProps> = ({
        });
      };
    }
-  }, [ringing, latestPickupPhaseAudio]);
+  }, [ringingIntent, latestPickupPhaseAudio]);

  // iOS Safari doesn't reliably fire `click` on plain <div>s, so we listen
  // for `pointerup` instead. Scrolls end in `pointercancel`, not `pointerup`,
--- a/src/settings/rageshake.ts
+++ b/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;
--- a/src/state/CallViewModel/CallNotificationLifecycle.test.ts
+++ b/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" },
+    });
  });
 });
--- a/src/state/CallViewModel/CallNotificationLifecycle.ts
+++ b/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,81 @@ 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),
+            scope.share,
+          ),
+        });
+      }),
+      scope.share,
+    );
+
  const allOthersLeft$ = memberships$.pipe(
    pairwise(),
    filter(
@@ -122,87 +178,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$ };
 }
--- a/src/state/CallViewModel/CallViewModel.test.ts
+++ b/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
@@ -1386,7 +1421,10 @@ describe.each([
          });

          // Should ring for 30ms and then time out
-          expectObservable(vm.ringing$).toBe("(ny) 26ms n", yesNo);
+          expectObservable(vm.ringingIntent$).toBe("(ab) 26ms a", {
+            a: null,
+            b: "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 +1463,10 @@ describe.each([
          });

          // Should ring until Alice joins
-          expectObservable(vm.ringing$).toBe("(ny) 17ms n", yesNo);
+          expectObservable(vm.ringingIntent$).toBe("(ab) 17ms a", {
+            a: null,
+            b: "audio",
+          });
          // Layout should show placeholder media for the participant we're
          // ringing the entire time
          expectObservable(summarizeLayout$(vm.layout$)).toBe("a 20ms b", {
--- a/src/state/CallViewModel/CallViewModel.ts
+++ b/src/state/CallViewModel/CallViewModel.ts
@@ -29,7 +29,6 @@ import {
  pairwise,
  race,
  scan,
-  skipWhile,
  startWith,
  Subject,
  switchAll,
@@ -39,10 +38,13 @@ import {
  tap,
  throttleTime,
  timer,
+  takeUntil,
+  concat,
 } from "rxjs";
 import { logger as rootLogger } from "matrix-js-sdk/lib/logger";
 import {
  MembershipManagerEvent,
+  type RTCCallIntent,
  type LivekitTransportConfig,
  type MatrixRTCSession,
 } from "matrix-js-sdk/lib/matrixrtc";
@@ -125,10 +127,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 +231,9 @@ export interface CallViewModel {
  // lifecycle
  autoLeave$: Observable<AutoLeaveReason>;
  /**
-   * Whether we are ringing a call recipient.
+   * Whether we are ringing a call recipient. Contains the ringing intent if so.
   */
-  ringing$: Behavior<boolean>;
+  ringingIntent$: Behavior<RTCCallIntent | null>;
  /** 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 +301,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 +528,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 +613,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 +630,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 +715,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 +772,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 +846,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 +858,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 +965,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 +1122,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 +1177,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,8 +1702,14 @@ export function createCallViewModel$(

  return {
    autoLeave$: autoLeave$,
-    ringing$: scope.behavior(
-      callPickupState$.pipe(map((state) => state === "ringing")),
+    ringingIntent$: scope.behavior(
+      ringAttempts$.pipe(
+        switchMap(({ intent, outcome$ }) =>
+          // Hold the intent as the value until the ring attempt completes
+          concat(of(intent), NEVER.pipe(takeUntil(outcome$)), of(null)),
+        ),
+        startWith<RTCCallIntent | null>(null),
+      ),
    ),
    leave$: leave$,
    hangup: (): void => userHangup$.next(),
@@ -1748,8 +1755,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
--- a/src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.test.ts
+++ b/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);
--- a/src/state/CallViewModel/remoteMembers/MatrixLivekitMembers.ts
+++ b/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)
              : [];
--- a/src/state/CallViewModel/remoteMembers/integration.test.ts
+++ b/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);
--- a/src/state/media/RingingMediaViewModel.ts
+++ b/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,
  };
 }
--- a/src/state/media/UserMediaViewModel.ts
+++ b/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$,
--- a/src/state/media/observeRtpStreamStats.ts
+++ b/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;
--- a/src/tile/GridTile.test.tsx
+++ b/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 {}
@@ -93,10 +92,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),
--- a/src/tile/GridTile.tsx
+++ b/src/tile/GridTile.tsx
@@ -77,7 +77,6 @@ const RingingMediaTile: FC<RingingMediaTileProps> = ({
 }) => {
  const { t } = useTranslation();
  const pickupState = useBehavior(vm.pickupState$);
-  const videoEnabled = useBehavior(vm.videoEnabled$);

  return (
    <MediaView
@@ -89,11 +88,12 @@ const RingingMediaTile: FC<RingingMediaTileProps> = ({
        pickupState === "ringing"
          ? {
              text: t("video_tile.calling"),
-              Icon: videoEnabled ? VideoCallSolidIcon : VoiceCallSolidIcon,
+              Icon:
+                vm.intent === "video" ? VideoCallSolidIcon : VoiceCallSolidIcon,
            }
          : { text: t("video_tile.call_ended"), Icon: EndCallIcon }
      }
-      videoEnabled={videoEnabled}
+      videoEnabled={false}
      videoFit="cover"
      mirror={false}
      {...props}
--- a/src/tile/SpotlightTile.test.tsx
+++ b/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 {}
@@ -156,10 +155,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),
--- a/src/tile/SpotlightTile.tsx
+++ b/src/tile/SpotlightTile.tsx
@@ -212,7 +212,6 @@ const SpotlightRingingMediaItem: FC<SpotlightRingingMediaItemProps> = ({
 }) => {
  const { t } = useTranslation();
  const pickupState = useBehavior(vm.pickupState$);
-  const videoEnabled = useBehavior(vm.videoEnabled$);

  return (
    <MediaView
@@ -222,7 +221,8 @@ const SpotlightRingingMediaItem: FC<SpotlightRingingMediaItemProps> = ({
        pickupState === "ringing"
          ? {
              text: t("video_tile.calling"),
-              Icon: videoEnabled ? VideoCallSolidIcon : VoiceCallSolidIcon,
+              Icon:
+                vm.intent === "video" ? VideoCallSolidIcon : VoiceCallSolidIcon,
            }
          : { text: t("video_tile.call_ended"), Icon: EndCallIcon }
      }
Author	SHA1	Message	Date
Robin	89c148a530	Update remaining variable names for remote Matrix-LiveKit members	2026-06-22 10:44:24 +02:00
Robin	e77d143ce1	Clarify which Matrix-LiveKit members are remote It was rather confusing that matrixLivekitMembers$ gives you objects of type RemoteMatrixLivekitMembers and yet the local member would often be among these. I've attempted to clear this up. To my knowledge this wasn't creating any bugs.	2026-06-18 12:10:32 +02:00
Robin	256219c4bf	Merge pull request #4034 from element-hq/ringing-intent Improve internal model of ringing, expose ringing intent to call UI	2026-06-18 12:00:34 +02:00
Robin	6af72f4c90	Format	2026-06-18 11:42:02 +02:00
Robin	3a598ffe43	Restore ability to play sound with custom volume This was missing from the revert in `8b0f5054dd`.	2026-06-18 11:35:46 +02:00
Robin	05797097c6	Only consider a call accepted if the intended recipient picks up	2026-06-18 11:05:55 +02:00
Robin	8b0f5054dd	Revert to original fix for duplicate leave sounds My attempted simpler fix of applying takeUntil(autoLeave$) to leaveSoundEffect$ didn't work.	2026-06-18 11:05:55 +02:00
Johannes Marbach	1c760f3ec4	Merge pull request #4050 from element-hq/johannes/oxlint-f-up Remove accidentally added file	2026-06-18 09:28:28 +02:00
Johannes Marbach	699f383b57	Remove accidentally added file Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>	2026-06-18 09:24:52 +02:00
Johannes Marbach	6009988d3c	Merge pull request #4010 from element-hq/johannes/label-sync Set up label sync	2026-06-18 08:50:42 +02:00
Robin	8cda9777a5	Merge branch 'livekit' into ringing-intent	2026-06-18 06:41:17 +02:00
Johannes Marbach	3ea89e8275	Merge pull request #4043 from element-hq/johannes/update-plugin-react Update @vitejs/plugin-react to 0.6.2	2026-06-17 16:39:19 +02:00
Johannes Marbach	0410be33cd	Merge branch 'livekit' into johannes/update-plugin-react	2026-06-17 16:06:54 +02:00
Johannes Marbach	002f9b0cea	Merge pull request #4042 from element-hq/johannes/pnpm-11 Switch to pnpm 11.6.0	2026-06-17 15:52:18 +02:00
Johannes Marbach	669f4264c7	Reformat Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>	2026-06-17 15:35:47 +02:00
Johannes Marbach	dc6511b99e	Document why we override resolved versions	2026-06-17 15:33:36 +02:00
Johannes Marbach	032968ea2d	Merge branch 'livekit' into johannes/pnpm-11	2026-06-17 15:07:28 +02:00
Johannes Marbach	6ce79d8a52	Merge pull request #4045 from element-hq/renovate/npm-vite-vulnerability Update dependency vite to v8.0.16 [SECURITY]	2026-06-16 15:22:21 +02:00
renovate[bot]	b68abb7df4	Update dependency vite to v8.0.16 [SECURITY]	2026-06-16 12:45:26 +00:00
Timo	1281ed31df	Merge pull request #3816 from element-hq/toger5/fix-depnedabot-security-alerts Dependabot security alerts: Bump flatted and unidici	2026-06-16 20:34:17 +08:00
Timo K	e7377fb104	fix prettier	2026-06-16 14:17:25 +02:00
Timo K	edb4dfa9ed	Merge branch 'livekit' into toger5/fix-depnedabot-security-alerts	2026-06-16 14:16:02 +02:00
Timo K	7db13e1fc0	Merge branch 'livekit' into toger5/fix-depnedabot-security-alerts	2026-06-16 14:13:16 +02:00
Johannes Marbach	fc3461dd54	Set up label sync	2026-06-15 14:18:13 +02:00
Johannes Marbach	df7451c2cf	Update @vitejs/plugin-react to 0.6.2	2026-06-15 13:59:54 +02:00
Johannes Marbach	9537c7657c	Switch to pnpm 11.6.0	2026-06-15 12:34:32 +02:00
Johannes Marbach	6c105e971e	Merge pull request #4041 from element-hq/renovate/compound Update Compound to v10.2.2	2026-06-15 08:06:20 +02:00
renovate[bot]	cbbe6a812e	Update Compound to v10.2.2	2026-06-15 01:03:21 +00:00
Robin	3ef3ebe897	Merge pull request #4036 from element-hq/metadata-leak Fix a minor resource leak with display names and avatars	2026-06-12 10:05:50 +02:00
Timo	0c284ed75b	Merge pull request #4004 from element-hq/toger5/controls-api-onPipMediaOrientation Controls api `onPipMediaOrientation`	2026-06-12 16:03:35 +08:00
Timo	838d2f3c5d	Update src/state/media/observeRtpStreamStats.ts Co-authored-by: Johannes Marbach <n0-0ne+github@mailbox.org>	2026-06-12 09:47:13 +02:00
Timo	2a24fbcee1	Merge pull request #4038 from element-hq/toger5/fix-logging-indexDB Fix Logging indexDB EC/EW collision	2026-06-12 15:29:33 +08:00
Timo K	be8a76868b	rename db	2026-06-11 18:38:54 +02:00
Johannes Marbach	d1ea63587b	Merge pull request #4035 from element-hq/johannes/knife-content-type Remove deprecated @types/content-type dependency	2026-06-11 12:22:49 +02:00
Robin	2ac6cdeb46	Improve internal model of ringing, expose ringing intent to call UI I found our code's internal model of ringing a little overgrown (it had superfluous states like 'unknown') and difficult to extend with metadata or callbacks relating to ring attempts. By modeling ringing instead as a stream of ring attempts, where each attempt has an intent, a recipient, and an eventual outcome (accept/decline/timeout), I find it more natural to work with. This makes room for a future 'try again' callback to allow ringing someone again after a timeout, and also forced me to look for a simpler solution to the duplicate leave sound effects. I exposed the intent of the ringing attempt to the call UI so I can later use it in the header.	2026-06-11 12:12:27 +02:00
Johannes Marbach	3af160bb02	Remove deprecated @types/content-type dependency	2026-06-11 08:36:25 +02:00
Timo K	308a042076	fix error with no media	2026-06-03 10:43:47 +02:00
Timo K	b554ce4a87	Update CallViewModel.test.ts	2026-06-03 10:18:45 +02:00
Timo K	b86909af52	temp add tests	2026-06-02 10:56:34 +02:00
Timo K	d6635b7818	add docs	2026-06-01 16:13:03 +02:00
Timo K	a6fc710d8c	Add onPipMediaOrientationUpdate to controls api.	2026-06-01 16:12:57 +02:00
Timo K	5dfd1648c5	remove yarn lock	2026-05-11 16:30:57 +02:00
Timo K	1d5ac67324	Merge branch 'livekit' into toger5/fix-depnedabot-security-alerts	2026-05-11 16:28:48 +02:00
Timo K	2faab3280a	bump flatted and unidici	2026-03-25 16:07:01 +01:00