Merge branch 'develop' into renovate/typescript

2024-12-03 12:18:44 +00:00 · 2024-12-03 12:18:44 +00:00 · a65a40eab3
commit a65a40eab3
parent 3bdd6006a6 4730352092
381 changed files with 4261 additions and 15995 deletions
--- a/.github/workflows/dockerhub.yaml
+++ b/.github/workflows/dockerhub.yaml
@ -39,7 +39,7 @@ jobs:

            - name: Docker meta
              id: meta
-              uses: docker/metadata-action@8e5442c4ef9f78752691e2d8f8d19755c6f78e81 # v5
+              uses: docker/metadata-action@369eb591f429131d6889c46b94e711f089e6ca96 # v5
              with:
                  images: |
                      vectorim/element-web
@ -51,7 +51,7 @@ jobs:

            - name: Build and push
              id: build-and-push
-              uses: docker/build-push-action@4f58ea79222b3b9dc2c8bbdd6debcef730109a75 # v6
+              uses: docker/build-push-action@48aba3b46d1b1fec4febb7c5d0c644b249a11355 # v6
              with:
                  context: .
                  push: true
--- a/.github/workflows/pull_request.yaml
+++ b/.github/workflows/pull_request.yaml
@ -9,6 +9,6 @@ jobs:
    action:
        uses: matrix-org/matrix-js-sdk/.github/workflows/pull_request.yaml@develop
        permissions:
-            pull-requests: read
+            pull-requests: write
        secrets:
            ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
--- a/.github/workflows/release_prepare.yml
+++ b/.github/workflows/release_prepare.yml
@ -19,8 +19,23 @@ on:
                default: true
 permissions: {} # Uses ELEMENT_BOT_TOKEN instead
 jobs:
+    checks:
+        name: Sanity checks
+        strategy:
+            matrix:
+                repo:
+                    - matrix-org/matrix-js-sdk
+                    - element-hq/element-web
+                    - element-hq/element-desktop
+        uses: matrix-org/matrix-js-sdk/.github/workflows/release-checks.yml@develop
+        secrets:
+            ELEMENT_BOT_TOKEN: ${{ secrets.ELEMENT_BOT_TOKEN }}
+        with:
+            repository: ${{ matrix.repo }}
+
    prepare:
        runs-on: ubuntu-24.04
+        needs: checks
        env:
            # The order is specified bottom-up to avoid any races for allchange
            REPOS: matrix-js-sdk element-web element-desktop
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@ -104,7 +104,7 @@ jobs:

            - name: Skip SonarCloud in merge queue
              if: github.event_name == 'merge_group' || inputs.disable_coverage == 'true'
-              uses: guibranco/github-status-action-v2@1f26a0237cd1a57626fbb5a0eb2494c9b8797d07
+              uses: guibranco/github-status-action-v2@66088c44e212a906c32a047529a213d81809ec1c
              with:
                  authToken: ${{ secrets.GITHUB_TOKEN }}
                  state: success
--- a/docs/config.md
+++ b/docs/config.md
@ -592,4 +592,3 @@ The following are undocumented or intended for developer use only.
 2. `sync_timeline_limit`
 3. `dangerously_allow_unsafe_and_insecure_passwords`
 4. `latex_maths_delims`: An optional setting to override the default delimiters used for maths parsing. See https://github.com/matrix-org/matrix-react-sdk/pull/5939 for details. Only used when `feature_latex_maths` is enabled.
-5. `voice_broadcast.chunk_length`: Target chunk length in seconds for the Voice Broadcast feature currently under development.
--- a/package.json
+++ b/package.json
@ -73,7 +73,7 @@
    "resolutions": {
        "oidc-client-ts": "3.1.0",
        "jwt-decode": "4.0.0",
-        "caniuse-lite": "1.0.30001679",
+        "caniuse-lite": "1.0.30001684",
        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0",
        "wrap-ansi": "npm:wrap-ansi@^7.0.0"
    },
@ -114,10 +114,10 @@
        "jsrsasign": "^11.0.0",
        "jszip": "^3.7.0",
        "katex": "^0.16.0",
-        "linkify-element": "4.1.3",
-        "linkify-react": "4.1.3",
-        "linkify-string": "4.1.3",
-        "linkifyjs": "4.1.3",
+        "linkify-element": "4.1.4",
+        "linkify-react": "4.1.4",
+        "linkify-string": "4.1.4",
+        "linkifyjs": "4.1.4",
        "lodash": "^4.17.21",
        "maplibre-gl": "^4.0.0",
        "matrix-encrypt-attachment": "^1.0.3",
@ -268,11 +268,12 @@
        "postcss-preset-env": "^10.0.0",
        "postcss-scss": "^4.0.4",
        "postcss-simple-vars": "^7.0.1",
-        "prettier": "3.3.3",
+        "prettier": "3.4.1",
        "process": "^0.11.10",
        "raw-loader": "^4.0.2",
        "rimraf": "^6.0.0",
        "semver": "^7.5.2",
+        "source-map-loader": "^5.0.0",
        "stylelint": "^16.1.0",
        "stylelint-config-standard": "^36.0.0",
        "stylelint-scss": "^6.0.0",
--- a/playwright/Dockerfile
+++ b/playwright/Dockerfile
@ -1,4 +1,4 @@
-FROM mcr.microsoft.com/playwright:v1.48.2-jammy
+FROM mcr.microsoft.com/playwright:v1.49.0-jammy

 WORKDIR /work

--- a/playwright/e2e/crypto/decryption-failure-messages.spec.ts
+++ b/playwright/e2e/crypto/decryption-failure-messages.spec.ts
@ -67,6 +67,9 @@ test.describe("Cryptography", function () {
            await page.locator(".mx_AuthPage").getByRole("button", { name: "I'll verify later" }).click();
            await app.viewRoomByName("Test room");

+            // In this case, the call to cryptoApi.isEncryptionEnabledInRoom is taking a long time to resolve
+            await page.waitForTimeout(1000);
+
            // There should be two historical events in the timeline
            const tiles = await page.locator(".mx_EventTile").all();
            expect(tiles.length).toBeGreaterThanOrEqual(2);
--- a/playwright/e2e/crypto/event-shields.spec.ts
+++ b/playwright/e2e/crypto/event-shields.spec.ts
@ -16,6 +16,7 @@ import {
    logOutOfElement,
    verify,
 } from "./utils";
+import { bootstrapCrossSigningForClient } from "../../pages/client.ts";

 test.describe("Cryptography", function () {
    test.use({
@ -307,5 +308,30 @@ test.describe("Cryptography", function () {
            const penultimate = page.locator(".mx_EventTile").filter({ hasText: "test encrypted from verified" });
            await expect(penultimate.locator(".mx_EventTile_e2eIcon")).not.toBeVisible();
        });
+
+        test("should show correct shields on events sent by users with changed identity", async ({
+            page,
+            app,
+            bot: bob,
+            homeserver,
+        }) => {
+            // Verify Bob
+            await verify(app, bob);
+
+            // Bob logs in a new device and resets cross-signing
+            const bobSecondDevice = await createSecondBotDevice(page, homeserver, bob);
+            await bootstrapCrossSigningForClient(await bobSecondDevice.prepareClient(), bob.credentials, true);
+
+            /* should show an error for a message from a previously verified device */
+            await bobSecondDevice.sendMessage(testRoomId, "test encrypted from user that was previously verified");
+            const last = page.locator(".mx_EventTile_last");
+            await expect(last).toContainText("test encrypted from user that was previously verified");
+            const lastE2eIcon = last.locator(".mx_EventTile_e2eIcon");
+            await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
+            await lastE2eIcon.focus();
+            await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText(
+                "Sender's verified identity has changed",
+            );
+        });
    });
 });
--- a/playwright/e2e/share-dialog/share-dialog.spec.ts
+++ b/playwright/e2e/share-dialog/share-dialog.spec.ts
@ -0,0 +1,67 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { test, expect } from "../../element-web-test";
+
+test.describe("Share dialog", () => {
+    test.use({
+        displayName: "Alice",
+        room: async ({ app, user, bot }, use) => {
+            const roomId = await app.client.createRoom({ name: "Alice room" });
+            await use({ roomId });
+        },
+    });
+
+    test("should share a room", async ({ page, app, room }) => {
+        await app.viewRoomById(room.roomId);
+        await app.toggleRoomInfoPanel();
+        await page.getByRole("menuitem", { name: "Copy link" }).click();
+
+        const dialog = page.getByRole("dialog", { name: "Share room" });
+        await expect(dialog.getByText(`https://matrix.to/#/${room.roomId}`)).toBeVisible();
+        expect(dialog).toMatchScreenshot("share-dialog-room.png", {
+            // QRCode and url changes at every run
+            mask: [page.locator(".mx_QRCode"), page.locator(".mx_ShareDialog_top > span")],
+        });
+    });
+
+    test("should share a room member", async ({ page, app, room, user }) => {
+        await app.viewRoomById(room.roomId);
+        await app.client.sendMessage(room.roomId, { body: "hello", msgtype: "m.text" });
+
+        const rightPanel = await app.toggleRoomInfoPanel();
+        await rightPanel.getByRole("menuitem", { name: "People" }).click();
+        await rightPanel.getByRole("button", { name: `${user.userId} (power 100)` }).click();
+        await rightPanel.getByRole("button", { name: "Share profile" }).click();
+
+        const dialog = page.getByRole("dialog", { name: "Share User" });
+        await expect(dialog.getByText(`https://matrix.to/#/${user.userId}`)).toBeVisible();
+        expect(dialog).toMatchScreenshot("share-dialog-user.png", {
+            // QRCode changes at every run
+            mask: [page.locator(".mx_QRCode")],
+        });
+    });
+
+    test("should share an event", async ({ page, app, room }) => {
+        await app.viewRoomById(room.roomId);
+        await app.client.sendMessage(room.roomId, { body: "hello", msgtype: "m.text" });
+
+        const timelineMessage = page.locator(".mx_MTextBody", { hasText: "hello" });
+        await timelineMessage.hover();
+        await page.getByRole("button", { name: "Options", exact: true }).click();
+        await page.getByRole("menuitem", { name: "Share" }).click();
+
+        const dialog = page.getByRole("dialog", { name: "Share Room Message" });
+        await expect(dialog.getByRole("checkbox", { name: "Link to selected message" })).toBeChecked();
+        expect(dialog).toMatchScreenshot("share-dialog-event.png", {
+            // QRCode and url changes at every run
+            mask: [page.locator(".mx_QRCode"), page.locator(".mx_ShareDialog_top > span")],
+        });
+        await dialog.getByRole("checkbox", { name: "Link to selected message" }).click();
+        await expect(dialog.getByRole("checkbox", { name: "Link to selected message" })).not.toBeChecked();
+    });
+});
--- a/playwright/plugins/homeserver/synapse/index.ts
+++ b/playwright/plugins/homeserver/synapse/index.ts
@ -20,7 +20,7 @@ import { randB64Bytes } from "../../utils/rand";
 // Docker tag to use for synapse docker image.
 // We target a specific digest as every now and then a Synapse update will break our CI.
 // This digest is updated by the playwright-image-updates.yaml workflow periodically.
-const DOCKER_TAG = "develop@sha256:e163b15bf4905e4067dece856cca00e6ac8d1d655f4f1307978eee256b3ea775";
+const DOCKER_TAG = "develop@sha256:892793d00b70e9a92ceb929263fe734408ce7f50cb4436c65f07407048a6d4e7";

 async function cfgDirFromTemplate(opts: StartHomeserverOpts): Promise<Omit<HomeserverConfig, "dockerUrl">> {
    const templateDir = path.join(__dirname, "templates", opts.template);
--- a/playwright/snapshots/share-dialog/share-dialog.spec.ts/share-dialog-event-linux.png
+++ b/playwright/snapshots/share-dialog/share-dialog.spec.ts/share-dialog-event-linux.png
--- a/playwright/snapshots/share-dialog/share-dialog.spec.ts/share-dialog-room-linux.png
+++ b/playwright/snapshots/share-dialog/share-dialog.spec.ts/share-dialog-room-linux.png
--- a/playwright/snapshots/share-dialog/share-dialog.spec.ts/share-dialog-user-linux.png
+++ b/playwright/snapshots/share-dialog/share-dialog.spec.ts/share-dialog-user-linux.png
--- a/res/css/_common.pcss
+++ b/res/css/_common.pcss
@ -596,7 +596,7 @@ legend {
 .mx_Dialog
    button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
        .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button),
+    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button),
 .mx_Dialog input[type="submit"],
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
 .mx_Dialog_buttons input[type="submit"] {
@ -616,14 +616,16 @@ legend {
 .mx_Dialog
    button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
        .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):last-child {
+    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(
+        .mx_ShareDialog button
+    ):last-child {
    margin-right: 0px;
 }

 .mx_Dialog
    button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
        .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):focus,
+    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):focus,
 .mx_Dialog input[type="submit"]:focus,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):focus,
 .mx_Dialog_buttons input[type="submit"]:focus {
@ -635,7 +637,7 @@ legend {
 .mx_Dialog_buttons
    button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(
        .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button),
+    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button),
 .mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
    color: var(--cpd-color-text-on-solid-primary);
    background-color: var(--cpd-color-bg-action-primary-rest);
@ -648,7 +650,7 @@ legend {
 .mx_Dialog_buttons
    button.danger:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(.mx_UserProfileSettings button):not(
        .mx_ThemeChoicePanel_CustomTheme button
-    ):not(.mx_UnpinAllDialog button),
+    ):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button),
 .mx_Dialog_buttons input[type="submit"].danger {
    background-color: var(--cpd-color-bg-critical-primary);
    border: solid 1px var(--cpd-color-bg-critical-primary);
@ -664,7 +666,7 @@ legend {
 .mx_Dialog
    button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
        .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):disabled,
+    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):disabled,
 .mx_Dialog input[type="submit"]:disabled,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):disabled,
 .mx_Dialog_buttons input[type="submit"]:disabled {
--- a/res/css/_components.pcss
+++ b/res/css/_components.pcss
@ -393,9 +393,3 @@
@import "./views/voip/_LegacyCallViewHeader.pcss";
@import "./views/voip/_LegacyCallViewSidebar.pcss";
@import "./views/voip/_VideoFeed.pcss";
-@import "./voice-broadcast/atoms/_LiveBadge.pcss";
-@import "./voice-broadcast/atoms/_VoiceBroadcastControl.pcss";
-@import "./voice-broadcast/atoms/_VoiceBroadcastHeader.pcss";
-@import "./voice-broadcast/atoms/_VoiceBroadcastRecordingConnectionError.pcss";
-@import "./voice-broadcast/atoms/_VoiceBroadcastRoomSubtitle.pcss";
-@import "./voice-broadcast/molecules/_VoiceBroadcastBody.pcss";
--- a/res/css/structures/_UserMenu.pcss
+++ b/res/css/structures/_UserMenu.pcss
@ -22,20 +22,6 @@ Please see LICENSE files in the repository root for full details.
                pointer-events: none; /* makes the avatar non-draggable */
            }
        }
-
-        .mx_UserMenu_userAvatarLive {
-            align-items: center;
-            background-color: $alert;
-            border-radius: 6px;
-            color: $live-badge-color;
-            display: flex;
-            height: 12px;
-            justify-content: center;
-            left: 25px;
-            position: absolute;
-            top: 20px;
-            width: 12px;
-        }
    }

    .mx_UserMenu_contextMenuButton {
--- a/res/css/views/dialogs/_ShareDialog.pcss
+++ b/res/css/views/dialogs/_ShareDialog.pcss
@ -5,50 +5,73 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */

-.mx_ShareDialog hr {
-    margin-top: 25px;
-    margin-bottom: 25px;
-    border-color: $light-fg-color;
+.mx_ShareDialog {
+    /* Value from figma design */
+    width: 416px;
+
+    .mx_Dialog_header {
+        text-align: center;
+        margin-bottom: var(--cpd-space-6x);
+        /* Override dialog header padding to able to center it */
+        padding-inline-end: 0;
    }

-.mx_ShareDialog .mx_ShareDialog_content {
-    margin: 10px 0;
+    .mx_ShareDialog_content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--cpd-space-6x);
+        align-items: center;

-    .mx_CopyableText {
-        width: unset; /* full width */
+        .mx_ShareDialog_top {
+            display: flex;
+            flex-direction: column;
+            gap: var(--cpd-space-4x);
+            align-items: center;
+            width: 100%;

-        > a {
-            text-decoration: none;
-            flex-shrink: 1;
-            overflow: hidden;
+            span {
+                text-align: center;
+                font: var(--cpd-font-body-sm-semibold);
+                color: var(--cpd-color-text-secondary);
                text-overflow: ellipsis;
                white-space: nowrap;
-        }
+                overflow: hidden;
+                width: 100%;
            }
        }

-.mx_ShareDialog_split {
+        label {
+            display: inline-flex;
+            gap: var(--cpd-space-3x);
+            justify-content: center;
+            align-items: center;
+            font: var(--cpd-font-body-md-medium);
+        }
+
+        button {
+            width: 100%;
+        }
+
+        .mx_ShareDialog_social {
            display: flex;
-    flex-wrap: wrap;
-}
+            gap: var(--cpd-space-3x);
+            justify-content: center;

-.mx_ShareDialog_qrcode_container {
-    float: left;
-    height: 256px;
-    width: 256px;
-    margin-right: 64px;
-}
+            a {
+                width: 48px;
+                height: 48px;
+                border-radius: 99px;
+                box-sizing: border-box;
+                border: 1px solid var(--cpd-color-border-interactive-secondary);
+                display: flex;
+                justify-content: center;
+                align-items: center;

-.mx_ShareDialog_qrcode_container + .mx_ShareDialog_social_container {
-    width: 299px;
+                img {
+                    width: 24px;
+                    height: 24px;
+                }
+            }
        }
-
-.mx_ShareDialog_social_container {
-    display: inline-block;
    }
-
-.mx_ShareDialog_social_icon {
-    display: inline-grid;
-    margin-right: 10px;
-    margin-bottom: 10px;
 }
--- a/res/css/views/rooms/_MessageComposer.pcss
+++ b/res/css/views/rooms/_MessageComposer.pcss
@ -256,10 +256,6 @@ Please see LICENSE files in the repository root for full details.
    mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg");
 }

-.mx_MessageComposer_voiceBroadcast::before {
-    mask-image: url("$(res)/img/element-icons/live.svg");
-}
-
 .mx_MessageComposer_plain_text::before {
    mask-image: url("$(res)/img/element-icons/room/composer/plain_text.svg");
 }
--- a/res/css/voice-broadcast/atoms/_LiveBadge.pcss
+++ b/res/css/voice-broadcast/atoms/_LiveBadge.pcss
@ -1,23 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_LiveBadge {
-    align-items: center;
-    background-color: $alert;
-    border-radius: 2px;
-    color: $live-badge-color;
-    display: inline-flex;
-    font-size: $font-12px;
-    font-weight: var(--cpd-font-weight-semibold);
-    gap: $spacing-4;
-    padding: 2px 4px;
-}
-
-.mx_LiveBadge--grey {
-    background-color: $quaternary-content;
-}
--- a/res/css/voice-broadcast/atoms/_VoiceBroadcastControl.pcss
+++ b/res/css/voice-broadcast/atoms/_VoiceBroadcastControl.pcss
@ -1,28 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_VoiceBroadcastControl {
-    align-items: center;
-    background-color: $background;
-    border-radius: 50%;
-    color: $secondary-content;
-    display: flex;
-    flex: 0 0 32px;
-    height: 32px;
-    justify-content: center;
-    width: 32px;
-}
-
-.mx_VoiceBroadcastControl-recording {
-    color: $alert;
-}
-
-.mx_VoiceBroadcastControl-play .mx_Icon {
-    left: 1px;
-    position: relative;
-}
--- a/res/css/voice-broadcast/atoms/_VoiceBroadcastHeader.pcss
+++ b/res/css/voice-broadcast/atoms/_VoiceBroadcastHeader.pcss
@ -1,60 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_VoiceBroadcastHeader {
-    align-items: flex-start;
-    display: flex;
-    gap: $spacing-8;
-    line-height: 20px;
-    margin-bottom: $spacing-16;
-    min-width: 0;
-}
-
-.mx_VoiceBroadcastHeader_content {
-    flex-grow: 1;
-    min-width: 0;
-}
-
-.mx_VoiceBroadcastHeader_room_wrapper {
-    align-items: center;
-    display: flex;
-    gap: 4px;
-    justify-content: flex-start;
-}
-
-.mx_VoiceBroadcastHeader_room {
-    font-size: $font-12px;
-    font-weight: var(--cpd-font-weight-semibold);
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.mx_VoiceBroadcastHeader_line {
-    align-items: center;
-    color: $secondary-content;
-    font-size: $font-12px;
-    display: flex;
-    gap: $spacing-4;
-
-    .mx_Spinner {
-        flex: 0 0 14px;
-        padding: 1px;
-    }
-
-    span {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-}
-
-.mx_VoiceBroadcastHeader_mic--clickable {
-    cursor: pointer;
-}
--- a/res/css/voice-broadcast/atoms/_VoiceBroadcastRecordingConnectionError.pcss
+++ b/res/css/voice-broadcast/atoms/_VoiceBroadcastRecordingConnectionError.pcss
@ -1,18 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2023 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_VoiceBroadcastRecordingConnectionError {
-    align-items: center;
-    color: $alert;
-    display: flex;
-    gap: $spacing-12;
-
-    svg path {
-        fill: $alert;
-    }
-}
--- a/res/css/voice-broadcast/atoms/_VoiceBroadcastRoomSubtitle.pcss
+++ b/res/css/voice-broadcast/atoms/_VoiceBroadcastRoomSubtitle.pcss
@ -1,14 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_RoomTile .mx_RoomTile_titleContainer .mx_RoomTile_subtitle.mx_RoomTile_subtitle--voice-broadcast {
-    align-items: center;
-    color: $alert;
-    display: flex;
-    gap: $spacing-4;
-}
--- a/res/css/voice-broadcast/molecules/_VoiceBroadcastBody.pcss
+++ b/res/css/voice-broadcast/molecules/_VoiceBroadcastBody.pcss
@ -1,75 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_VoiceBroadcastBody {
-    background-color: $quinary-content;
-    border-radius: 8px;
-    color: $secondary-content;
-    display: inline-block;
-    font-size: $font-12px;
-    padding: $spacing-12;
-    width: 271px;
-
-    .mx_Clock {
-        line-height: 1;
-    }
-}
-
-.mx_VoiceBroadcastBody--pip {
-    background-color: $system;
-    box-shadow: 0 2px 8px 0 #0000004a;
-}
-
-.mx_VoiceBroadcastBody--small {
-    display: flex;
-    gap: $spacing-8;
-    width: 192px;
-
-    .mx_VoiceBroadcastHeader {
-        margin-bottom: 0;
-    }
-
-    .mx_VoiceBroadcastControl {
-        align-self: center;
-    }
-
-    .mx_LiveBadge {
-        margin-top: 4px;
-    }
-}
-
-.mx_VoiceBroadcastBody_divider {
-    background-color: $quinary-content;
-    border: 0;
-    height: 1px;
-    margin: $spacing-12 0;
-}
-
-.mx_VoiceBroadcastBody_controls {
-    align-items: center;
-    display: flex;
-    gap: $spacing-32;
-    justify-content: center;
-    margin-bottom: $spacing-8;
-}
-
-.mx_VoiceBroadcastBody_timerow {
-    display: flex;
-    justify-content: space-between;
-}
-
-.mx_AccessibleButton.mx_VoiceBroadcastBody_blockButton {
-    display: flex;
-    gap: $spacing-8;
-}
-
-.mx_VoiceBroadcastBody__small-close {
-    right: 8px;
-    position: absolute;
-    top: 8px;
-}
--- a/res/themes/dark/css/_dark.pcss
+++ b/res/themes/dark/css/_dark.pcss
@ -240,11 +240,6 @@ $location-live-secondary-color: #deddfd;
 }
 /* ******************** */

-/* Voice Broadcast */
-/* ******************** */
-$live-badge-color: #ffffff;
-/* ******************** */
-
 /* One-off colors */
 /* ******************** */
 $progressbar-bg-color: var(--cpd-color-gray-200);
--- a/res/themes/legacy-dark/css/_legacy-dark.pcss
+++ b/res/themes/legacy-dark/css/_legacy-dark.pcss
@ -226,11 +226,6 @@ $location-live-color: #5c56f5;
 $location-live-secondary-color: #deddfd;
 /* ******************** */

-/* Voice Broadcast */
-/* ******************** */
-$live-badge-color: #ffffff;
-/* ******************** */
-
 body {
    color-scheme: dark;
 }
--- a/res/themes/legacy-light/css/_legacy-light.pcss
+++ b/res/themes/legacy-light/css/_legacy-light.pcss
@ -325,11 +325,6 @@ $location-live-color: #5c56f5;
 $location-live-secondary-color: #deddfd;
 /* ******************** */

-/* Voice Broadcast */
-/* ******************** */
-$live-badge-color: #ffffff;
-/* ******************** */
-
 body {
    color-scheme: light;
 }
--- a/res/themes/light/css/_light.pcss
+++ b/res/themes/light/css/_light.pcss
@ -10,8 +10,8 @@
 /* Noto Color Emoji contains digits, in fixed-width, therefore causing
   digits in flowed text to stand out.
   TODO: Consider putting all emoji fonts to the end rather than the front. */
-$font-family: "Inter", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif,
-    "Noto Color Emoji";
+$font-family: "Inter", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica",
+    sans-serif, "Noto Color Emoji";

 $monospace-font-family: "Inconsolata", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Courier",
    monospace, "Noto Color Emoji";
@ -355,11 +355,6 @@ $location-live-color: var(--cpd-color-purple-900);
 $location-live-secondary-color: var(--cpd-color-purple-600);
 /* ******************** */

-/* Voice Broadcast */
-/* ******************** */
-$live-badge-color: var(--cpd-color-icon-on-solid-primary);
-/* ******************** */
-
 body {
    color-scheme: light;
 }
--- a/scripts/copy-i18n.py
+++ b/scripts/copy-i18n.py
@ -1,47 +0,0 @@
-#!/usr/bin/env python
-
-import json
-import sys
-import os
-
-if len(sys.argv) < 3:
-    print "Usage: %s <source> <dest>" % (sys.argv[0],)
-    print "eg. %s pt_BR.json pt.json" % (sys.argv[0],)
-    print
-    print "Adds any translations to <dest> that exist in <source> but not <dest>"
-    sys.exit(1)
-
-srcpath = sys.argv[1]
-dstpath = sys.argv[2]
-tmppath = dstpath + ".tmp"
-
-with open(srcpath) as f:
-    src = json.load(f)
-
-with open(dstpath) as f:
-    dst = json.load(f)
-
-toAdd = {}
-for k,v in src.iteritems():
-    if k not in dst:
-        print "Adding %s" % (k,)
-        toAdd[k] = v
-
-# don't just json.dumps as we'll probably re-order all the keys (and they're
-# not in any given order so we can't just sort_keys). Append them to the end.
-with open(dstpath) as ifp:
-    with open(tmppath, 'w') as ofp:
-        for line in ifp:
-            strippedline = line.strip()
-            if strippedline in ('{', '}'):
-                ofp.write(line)
-            elif strippedline.endswith(','):
-                ofp.write(line)
-            else:
-                ofp.write('    '+strippedline+',')
-                toAddStr = json.dumps(toAdd, indent=4, separators=(',', ': '), ensure_ascii=False, encoding="utf8").strip("{}\n")
-                ofp.write("\n")
-                ofp.write(toAddStr.encode('utf8'))
-                ofp.write("\n")
-
-os.rename(tmppath, dstpath)
--- a/scripts/fetch-develop.deps.sh
+++ b/scripts/fetch-develop.deps.sh
@ -1,84 +0,0 @@
-#!/usr/bin/env bash
-
-# Fetches the js-sdk dependency for development or testing purposes
-# If there exists a branch of that dependency with the same name as
-# the branch the current checkout is on, use that branch. Otherwise,
-# use develop.
-
-set -x
-
-GIT_CLONE_ARGS=("$@")
-[ -z "$defbranch" ] && defbranch="develop"
-
-# clone a specific branch of a github repo
-function clone() {
-    org=$1
-    repo=$2
-    branch=$3
-
-    # Chop 'origin' off the start as jenkins ends up using
-    # branches on the origin, but this doesn't work if we
-    # specify the branch when cloning.
-    branch=${branch#origin/}
-
-    if [ -n "$branch" ]
-    then
-        echo "Trying to use $org/$repo#$branch"
-        # Disable auth prompts: https://serverfault.com/a/665959
-        GIT_TERMINAL_PROMPT=0 git clone https://github.com/$org/$repo.git $repo --branch $branch \
-            "${GIT_CLONE_ARGS[@]}"
-        return $?
-    fi
-    return 1
-}
-
-function dodep() {
-    deforg=$1
-    defrepo=$2
-    rm -rf $defrepo
-
-    # Try the PR author's branch in case it exists on the deps as well.
-    # Try the target branch of the push or PR.
-    # Use the default branch as the last resort.
-    if [[ "$BUILDKITE" == true ]]; then
-        # If BUILDKITE_BRANCH is set, it will contain either:
-        #   * "branch" when the author's branch and target branch are in the same repo
-        #   * "author:branch" when the author's branch is in their fork
-        # We can split on `:` into an array to check.
-        BUILDKITE_BRANCH_ARRAY=(${BUILDKITE_BRANCH//:/ })
-        if [[ "${#BUILDKITE_BRANCH_ARRAY[@]}" == "2" ]]; then
-            prAuthor=${BUILDKITE_BRANCH_ARRAY[0]}
-            prBranch=${BUILDKITE_BRANCH_ARRAY[1]}
-        else
-            prAuthor=$deforg
-            prBranch=$BUILDKITE_BRANCH
-        fi
-        clone $prAuthor $defrepo $prBranch ||
-        clone $deforg $defrepo $BUILDKITE_PULL_REQUEST_BASE_BRANCH ||
-        clone $deforg $defrepo $defbranch ||
-        return $?
-    else
-        clone $deforg $defrepo $ghprbSourceBranch ||
-        clone $deforg $defrepo $GIT_BRANCH ||
-        clone $deforg $defrepo `git rev-parse --abbrev-ref HEAD` ||
-        clone $deforg $defrepo $defbranch ||
-        return $?
-    fi
-
-    echo "$defrepo set to branch "`git -C "$defrepo" rev-parse --abbrev-ref HEAD`
-}
-
-##############################
-
-echo 'Setting up matrix-js-sdk'
-
-dodep matrix-org matrix-js-sdk
-
-pushd matrix-js-sdk
-yarn link
-yarn install --frozen-lockfile
-popd
-
-yarn link matrix-js-sdk
-
-##############################
--- a/scripts/genflags.sh
+++ b/scripts/genflags.sh
@ -1,64 +0,0 @@
-# Copyright 2017-2024 New Vector Ltd.
-
-# SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
-# Please see LICENSE in the repository root for full details.
-
-
-# genflags.sh - Generates pngs for use with CountryDropdown.js
-#
-# Dependencies:
-#   - imagemagick --with-rsvg (because default imagemagick SVG
-#       renderer does not produce accurate results)
-#
-# on macOS, this is most easily done with:
-#   brew install imagemagick --with-librsvg
-#
-# This will clone the googlei18n flag repo before converting
-# all phonenumber.js-supported country flags (as SVGs) into
-# PNGs that can be used by CountryDropdown.js.
-
-set -e
-
-# Allow CTRL+C to terminate the script
-trap "echo Exited!; exit;" SIGINT SIGTERM
-
-# git clone the google repo to get flag SVGs
-git clone git@github.com:googlei18n/region-flags
-for f in region-flags/svg/*.svg; do
-    # Skip state flags
-    if [[ $f =~ [A-Z]{2}-[A-Z]{2,3}.svg ]] ; then
-        echo "Skipping state flag "$f
-        continue
-    fi
-
-    # Skip countries not included in phonenumber.js
-    if [[ $f =~ (AC|CP|DG|EA|EU|IC|TA|UM|UN|XK).svg ]] ; then
-        echo "Skipping non-phonenumber supported flag "$f
-        continue
-    fi
-
-    # Run imagemagick convert
-    #   -background none : transparent background
-    #   -resize 50x30    : resize the flag to have a height of 15px (2x)
-    #       By default, aspect ratio is respected so the width will
-    #       be correct and not necessarily 25px.
-    #   -filter Lanczos  : use sharper resampling to avoid muddiness
-    #   -gravity Center  : keep the image central when adding an -extent
-    #   -border 1        : add a 1px border around the flag
-    #   -bordercolor     : set the border colour
-    #   -extent 54x54    : surround the image with padding so that it
-    #       has the dimensions 27x27px (2x).
-    convert $f -background none -filter Lanczos -resize 50x30 \
-        -gravity Center -border 1 -bordercolor \#e0e0e0 \
-        -extent 54x54 $f.png
-
-    # $f.png will be region-flags/svg/XX.svg.png at this point
-
-    # Extract filename from path $f
-    newname=${f##*/}
-    # Replace .svg with .png
-    newname=${newname%.svg}.png
-    # Move the file to flags directory
-    mv $f.png ../res/flags/$newname
-    echo "Generated res/flags/"$newname
-done
--- a/src/@types/matrix-js-sdk.d.ts
+++ b/src/@types/matrix-js-sdk.d.ts
@ -10,7 +10,6 @@ import type { IWidget } from "matrix-widget-api";
 import type { BLURHASH_FIELD } from "../utils/image-media";
 import type { JitsiCallMemberEventType, JitsiCallMemberContent } from "../call-types";
 import type { ILayoutStateEvent, WIDGET_LAYOUT_EVENT_TYPE } from "../stores/widgets/types";
-import type { VoiceBroadcastInfoEventContent, VoiceBroadcastInfoEventType } from "../voice-broadcast/types";
 import type { EncryptedFile } from "matrix-js-sdk/src/types";

 // Extend Matrix JS SDK types via Typescript declaration merging to support unspecced event fields and types
@ -37,9 +36,6 @@ declare module "matrix-js-sdk/src/types" {
        "im.vector.modular.widgets": IWidget | {};
        [WIDGET_LAYOUT_EVENT_TYPE]: ILayoutStateEvent;

-        // Unstable voice broadcast state events
-        [VoiceBroadcastInfoEventType]: VoiceBroadcastInfoEventContent;
-
        // Element custom state events
        "im.vector.web.settings": Record<string, any>;
        "org.matrix.room.preview_urls": { disable: boolean };
@ -78,7 +74,5 @@ declare module "matrix-js-sdk/src/types" {
            waveform?: number[];
        };
        "org.matrix.msc3245.voice"?: {};
-
-        "io.element.voice_broadcast_chunk"?: { sequence: number };
    }
 }
--- a/src/IConfigOptions.ts
+++ b/src/IConfigOptions.ts
@ -175,13 +175,6 @@ export interface IConfigOptions {
    sync_timeline_limit?: number;
    dangerously_allow_unsafe_and_insecure_passwords?: boolean; // developer option

-    voice_broadcast?: {
-        // length per voice chunk in seconds
-        chunk_length?: number;
-        // max voice broadcast length in seconds
-        max_length?: number;
-    };
-
    user_notice?: {
        title: string;
        description: string;
--- a/src/LegacyCallHandler.tsx
+++ b/src/LegacyCallHandler.tsx
@ -55,8 +55,6 @@ import { OpenInviteDialogPayload } from "./dispatcher/payloads/OpenInviteDialogP
 import { findDMForUser } from "./utils/dm/findDMForUser";
 import { getJoinedNonFunctionalMembers } from "./utils/room/getJoinedNonFunctionalMembers";
 import { localNotificationsAreSilenced } from "./utils/notifications";
-import { SdkContextClass } from "./contexts/SDKContext";
-import { showCantStartACallDialog } from "./voice-broadcast/utils/showCantStartACallDialog";
 import { isNotNull } from "./Typeguards";
 import { BackgroundAudio } from "./audio/BackgroundAudio";
 import { Jitsi } from "./widgets/Jitsi.ts";
@ -859,15 +857,6 @@ export default class LegacyCallHandler extends EventEmitter {
            return;
        }

-        // Pause current broadcast, if any
-        SdkContextClass.instance.voiceBroadcastPlaybacksStore.getCurrent()?.pause();
-
-        if (SdkContextClass.instance.voiceBroadcastRecordingsStore.getCurrent()) {
-            // Do not start a call, if recording a broadcast
-            showCantStartACallDialog();
-            return;
-        }
-
        // We might be using managed hybrid widgets
        if (isManagedHybridWidgetEnabled(room)) {
            await addManagedHybridWidget(room);
--- a/src/MatrixClientPeg.ts
+++ b/src/MatrixClientPeg.ts
@ -35,13 +35,11 @@ import IdentityAuthClient from "./IdentityAuthClient";
 import { crossSigningCallbacks } from "./SecurityManager";
 import { SlidingSyncManager } from "./SlidingSyncManager";
 import { _t, UserFriendlyError } from "./languageHandler";
-import { SettingLevel } from "./settings/SettingLevel";
 import MatrixClientBackedController from "./settings/controllers/MatrixClientBackedController";
 import ErrorDialog from "./components/views/dialogs/ErrorDialog";
 import PlatformPeg from "./PlatformPeg";
 import { formatList } from "./utils/FormattingUtils";
 import SdkConfig from "./SdkConfig";
-import { Features } from "./settings/Settings";
 import { setDeviceIsolationMode } from "./settings/controllers/DeviceIsolationModeController.ts";

 export interface IMatrixClientCreds {
@ -333,11 +331,6 @@ class MatrixClientPegClass implements IMatrixClientPeg {
            logger.error("Warning! Not using an encryption key for rust crypto store.");
        }

-        // Record the fact that we used the Rust crypto stack with this client. This just guards against people
-        // rolling back to versions of EW that did not default to Rust crypto (which would lead to an error, since
-        // we cannot migrate from Rust to Legacy crypto).
-        await SettingsStore.setValue(Features.RustCrypto, null, SettingLevel.DEVICE, true);
-
        await this.matrixClient.initRustCrypto({
            storageKey: rustCryptoStoreKey,
            storagePassword: rustCryptoStorePassword,
--- a/src/Notifier.ts
+++ b/src/Notifier.ts
@ -49,8 +49,6 @@ import { SdkContextClass } from "./contexts/SDKContext";
 import { localNotificationsAreSilenced, createLocalNotificationSettingsIfNeeded } from "./utils/notifications";
 import { getIncomingCallToastKey, IncomingCallToast } from "./toasts/IncomingCallToast";
 import ToastStore from "./stores/ToastStore";
-import { VoiceBroadcastChunkEventType, VoiceBroadcastInfoEventType } from "./voice-broadcast";
-import { getSenderName } from "./utils/event/getSenderName";
 import { stripPlainReply } from "./utils/Reply";
 import { BackgroundAudio } from "./audio/BackgroundAudio";

@ -81,17 +79,6 @@ const msgTypeHandlers: Record<string, (event: MatrixEvent) => string | null> = {
        return TextForEvent.textForLocationEvent(event)();
    },
    [MsgType.Audio]: (event: MatrixEvent): string | null => {
-        if (event.getContent()?.[VoiceBroadcastChunkEventType]) {
-            if (event.getContent()?.[VoiceBroadcastChunkEventType]?.sequence === 1) {
-                // Show a notification for the first broadcast chunk.
-                // At this point a user received something to listen to.
-                return _t("notifier|io.element.voice_broadcast_chunk", { senderName: getSenderName(event) });
-            }
-
-            // Mute other broadcast chunks
-            return null;
-        }
-
        return TextForEvent.textForEvent(event, MatrixClientPeg.safeGet());
    },
 };
@ -460,8 +447,6 @@ class NotifierClass extends TypedEventEmitter<keyof EmittedEvents, EmittedEvents

    // XXX: exported for tests
    public evaluateEvent(ev: MatrixEvent): void {
-        // Mute notifications for broadcast info events
-        if (ev.getType() === VoiceBroadcastInfoEventType) return;
        let roomId = ev.getRoomId()!;
        if (LegacyCallHandler.instance.getSupportsVirtualRooms()) {
            // Attempt to translate a virtual room to a native one
--- a/src/SdkConfig.ts
+++ b/src/SdkConfig.ts
@ -46,10 +46,6 @@ export const DEFAULTS: DeepReadonly<IConfigOptions> = {
        logo: require("../res/img/element-desktop-logo.svg").default,
        url: "https://element.io/get-started",
    },
-    voice_broadcast: {
-        chunk_length: 2 * 60, // two minutes
-        max_length: 4 * 60 * 60, // four hours
-    },

    feedback: {
        existing_issues_url:
--- a/src/TextForEvent.tsx
+++ b/src/TextForEvent.tsx
@ -36,7 +36,6 @@ import AccessibleButton from "./components/views/elements/AccessibleButton";
 import RightPanelStore from "./stores/right-panel/RightPanelStore";
 import { highlightEvent, isLocationEvent } from "./utils/EventUtils";
 import { ElementCall } from "./models/Call";
-import { textForVoiceBroadcastStoppedEvent, VoiceBroadcastInfoEventType } from "./voice-broadcast";
 import { getSenderName } from "./utils/event/getSenderName";
 import PosthogTrackers from "./PosthogTrackers.ts";

@ -906,7 +905,6 @@ const stateHandlers: IHandlers = {
    // TODO: Enable support for m.widget event type (https://github.com/vector-im/element-web/issues/13111)
    "im.vector.modular.widgets": textForWidgetEvent,
    [WIDGET_LAYOUT_EVENT_TYPE]: textForWidgetLayoutEvent,
-    [VoiceBroadcastInfoEventType]: textForVoiceBroadcastStoppedEvent,
 };

 // Add all the Mjolnir stuff to the renderer
--- a/src/components/structures/EmbeddedPage.tsx
+++ b/src/components/structures/EmbeddedPage.tsx
@ -36,7 +36,7 @@ interface IState {

 export default class EmbeddedPage extends React.PureComponent<IProps, IState> {
    public static contextType = MatrixClientContext;
-    public declare context: React.ContextType<typeof MatrixClientContext>;
+    declare public context: React.ContextType<typeof MatrixClientContext>;
    private unmounted = false;
    private dispatcherRef?: string;

--- a/src/components/structures/FilePanel.tsx
+++ b/src/components/structures/FilePanel.tsx
@ -34,6 +34,7 @@ import { Layout } from "../../settings/enums/Layout";
 import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext";
 import Measured from "../views/elements/Measured";
 import EmptyState from "../views/right_panel/EmptyState";
+import { ScopedRoomContextProvider } from "../../contexts/ScopedRoomContext.tsx";

 interface IProps {
    roomId: string;
@ -51,7 +52,7 @@ interface IState {
 */
 class FilePanel extends React.Component<IProps, IState> {
    public static contextType = RoomContext;
-    public declare context: React.ContextType<typeof RoomContext>;
+    declare public context: React.ContextType<typeof RoomContext>;

    // This is used to track if a decrypted event was a live event and should be
    // added to the timeline.
@ -104,7 +105,11 @@ class FilePanel extends React.Component<IProps, IState> {
        }

        if (!this.state.timelineSet.eventIdToTimeline(ev.getId()!)) {
-            this.state.timelineSet.addEventToTimeline(ev, timeline, false);
+            this.state.timelineSet.addEventToTimeline(ev, timeline, {
+                fromCache: false,
+                addToState: false,
+                toStartOfTimeline: false,
+            });
        }
    }

@ -269,12 +274,10 @@ class FilePanel extends React.Component<IProps, IState> {

        if (this.state.timelineSet) {
            return (
-                <RoomContext.Provider
-                    value={{
-                        ...this.context,
-                        timelineRenderingType: TimelineRenderingType.File,
-                        narrow: this.state.narrow,
-                    }}
+                <ScopedRoomContextProvider
+                    {...this.context}
+                    timelineRenderingType={TimelineRenderingType.File}
+                    narrow={this.state.narrow}
                >
                    <BaseCard
                        className="mx_FilePanel"
@ -298,16 +301,11 @@ class FilePanel extends React.Component<IProps, IState> {
                            layout={Layout.Group}
                        />
                    </BaseCard>
-                </RoomContext.Provider>
+                </ScopedRoomContextProvider>
            );
        } else {
            return (
-                <RoomContext.Provider
-                    value={{
-                        ...this.context,
-                        timelineRenderingType: TimelineRenderingType.File,
-                    }}
-                >
+                <ScopedRoomContextProvider {...this.context} timelineRenderingType={TimelineRenderingType.File}>
                    <BaseCard
                        className="mx_FilePanel"
                        onClose={this.props.onClose}
@ -315,7 +313,7 @@ class FilePanel extends React.Component<IProps, IState> {
                    >
                        <Spinner />
                    </BaseCard>
-                </RoomContext.Provider>
+                </ScopedRoomContextProvider>
            );
        }
    }
--- a/src/components/structures/MatrixChat.tsx
+++ b/src/components/structures/MatrixChat.tsx
@ -119,7 +119,6 @@ import { ValidatedServerConfig } from "../../utils/ValidatedServerConfig";
 import { isLocalRoom } from "../../utils/localRoom/isLocalRoom";
 import { SDKContext, SdkContextClass } from "../../contexts/SDKContext";
 import { viewUserDeviceSettings } from "../../actions/handlers/viewUserDeviceSettings";
-import { cleanUpBroadcasts, VoiceBroadcastResumer } from "../../voice-broadcast";
 import GenericToast from "../views/toasts/GenericToast";
 import RovingSpotlightDialog from "../views/dialogs/spotlight/SpotlightDialog";
 import { findDMForUser } from "../../utils/dm/findDMForUser";
@ -227,7 +226,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
    private focusNext: FocusNextType;
    private subTitleStatus: string;
    private prevWindowWidth: number;
-    private voiceBroadcastResumer?: VoiceBroadcastResumer;

    private readonly loggedInView = createRef<LoggedInViewType>();
    private dispatcherRef?: string;
@ -501,7 +499,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
        window.removeEventListener("resize", this.onWindowResized);

        this.stores.accountPasswordStore.clearPassword();
-        this.voiceBroadcastResumer?.destroy();
    }

    private onWindowResized = (): void => {
@ -651,10 +648,9 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                break;
            case "logout":
                LegacyCallHandler.instance.hangupAllCalls();
-                Promise.all([
-                    ...[...CallStore.instance.connectedCalls].map((call) => call.disconnect()),
-                    cleanUpBroadcasts(this.stores),
-                ]).finally(() => Lifecycle.logout(this.stores.oidcClientStore));
+                Promise.all([...[...CallStore.instance.connectedCalls].map((call) => call.disconnect())]).finally(() =>
+                    Lifecycle.logout(this.stores.oidcClientStore),
+                );
                break;
            case "require_registration":
                startAnyRegistrationFlow(payload as any);
@ -1679,8 +1675,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                });
            }
        });
-
-        this.voiceBroadcastResumer = new VoiceBroadcastResumer(cli);
    }

    /**
--- a/src/components/structures/MessagePanel.tsx
+++ b/src/components/structures/MessagePanel.tsx
@ -196,7 +196,7 @@ interface IReadReceiptForUser {
 */
 export default class MessagePanel extends React.Component<IProps, IState> {
    public static contextType = RoomContext;
-    public declare context: React.ContextType<typeof RoomContext>;
+    declare public context: React.ContextType<typeof RoomContext>;

    public static defaultProps = {
        disableGrouping: false,
--- a/src/components/structures/NotificationPanel.tsx
+++ b/src/components/structures/NotificationPanel.tsx
@ -19,6 +19,7 @@ import { Layout } from "../../settings/enums/Layout";
 import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext";
 import Measured from "../views/elements/Measured";
 import EmptyState from "../views/right_panel/EmptyState";
+import { ScopedRoomContextProvider } from "../../contexts/ScopedRoomContext.tsx";

 interface IProps {
    onClose(): void;
@ -33,7 +34,7 @@ interface IState {
 */
 export default class NotificationPanel extends React.PureComponent<IProps, IState> {
    public static contextType = RoomContext;
-    public declare context: React.ContextType<typeof RoomContext>;
+    declare public context: React.ContextType<typeof RoomContext>;

    private card = React.createRef<HTMLDivElement>();

@ -79,12 +80,10 @@ export default class NotificationPanel extends React.PureComponent<IProps, IStat
        }

        return (
-            <RoomContext.Provider
-                value={{
-                    ...this.context,
-                    timelineRenderingType: TimelineRenderingType.Notification,
-                    narrow: this.state.narrow,
-                }}
+            <ScopedRoomContextProvider
+                {...this.context}
+                timelineRenderingType={TimelineRenderingType.Notification}
+                narrow={this.state.narrow}
            >
                <BaseCard
                    header={_t("notifications|enable_prompt_toast_title")}
@ -99,7 +98,7 @@ export default class NotificationPanel extends React.PureComponent<IProps, IStat
                    {this.card.current && <Measured sensor={this.card.current} onMeasurement={this.onMeasurement} />}
                    {content}
                </BaseCard>
-            </RoomContext.Provider>
+            </ScopedRoomContextProvider>
        );
    }
 }
--- a/src/components/structures/PipContainer.tsx
+++ b/src/components/structures/PipContainer.tsx
@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */

-import React, { MutableRefObject, ReactNode, useContext, useRef } from "react";
+import React, { MutableRefObject, ReactNode, useRef } from "react";
 import { CallEvent, CallState, MatrixCall } from "matrix-js-sdk/src/webrtc/call";
 import { logger } from "matrix-js-sdk/src/logger";
 import { Optional } from "matrix-events-sdk";
@ -21,19 +21,7 @@ import { WidgetLayoutStore } from "../../stores/widgets/WidgetLayoutStore";
 import ActiveWidgetStore, { ActiveWidgetStoreEvent } from "../../stores/ActiveWidgetStore";
 import { ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload";
 import { UPDATE_EVENT } from "../../stores/AsyncStore";
-import { SDKContext, SdkContextClass } from "../../contexts/SDKContext";
-import {
-    useCurrentVoiceBroadcastPreRecording,
-    useCurrentVoiceBroadcastRecording,
-    VoiceBroadcastPlayback,
-    VoiceBroadcastPlaybackBody,
-    VoiceBroadcastPreRecording,
-    VoiceBroadcastPreRecordingPip,
-    VoiceBroadcastRecording,
-    VoiceBroadcastRecordingPip,
-    VoiceBroadcastSmallPlaybackBody,
-} from "../../voice-broadcast";
-import { useCurrentVoiceBroadcastPlayback } from "../../voice-broadcast/hooks/useCurrentVoiceBroadcastPlayback";
+import { SdkContextClass } from "../../contexts/SDKContext";
 import { WidgetPip } from "../views/pips/WidgetPip";

 const SHOW_CALL_IN_STATES = [
@ -46,9 +34,6 @@ const SHOW_CALL_IN_STATES = [
 ];

 interface IProps {
-    voiceBroadcastRecording: Optional<VoiceBroadcastRecording>;
-    voiceBroadcastPreRecording: Optional<VoiceBroadcastPreRecording>;
-    voiceBroadcastPlayback: Optional<VoiceBroadcastPlayback>;
    movePersistedElement: MutableRefObject<(() => void) | undefined>;
 }

@ -245,52 +230,9 @@ class PipContainerInner extends React.Component<IProps, IState> {
        this.setState({ showWidgetInPip, persistentWidgetId, persistentRoomId });
    }

-    private createVoiceBroadcastPlaybackPipContent(voiceBroadcastPlayback: VoiceBroadcastPlayback): CreatePipChildren {
-        const content =
-            this.state.viewedRoomId === voiceBroadcastPlayback.infoEvent.getRoomId() ? (
-                <VoiceBroadcastPlaybackBody playback={voiceBroadcastPlayback} pip={true} />
-            ) : (
-                <VoiceBroadcastSmallPlaybackBody playback={voiceBroadcastPlayback} />
-            );
-
-        return ({ onStartMoving }) => (
-            <div key={`vb-playback-${voiceBroadcastPlayback.infoEvent.getId()}`} onMouseDown={onStartMoving}>
-                {content}
-            </div>
-        );
-    }
-
-    private createVoiceBroadcastPreRecordingPipContent(
-        voiceBroadcastPreRecording: VoiceBroadcastPreRecording,
-    ): CreatePipChildren {
-        return ({ onStartMoving }) => (
-            <div key="vb-pre-recording" onMouseDown={onStartMoving}>
-                <VoiceBroadcastPreRecordingPip voiceBroadcastPreRecording={voiceBroadcastPreRecording} />
-            </div>
-        );
-    }
-
-    private createVoiceBroadcastRecordingPipContent(
-        voiceBroadcastRecording: VoiceBroadcastRecording,
-    ): CreatePipChildren {
-        return ({ onStartMoving }) => (
-            <div key={`vb-recording-${voiceBroadcastRecording.infoEvent.getId()}`} onMouseDown={onStartMoving}>
-                <VoiceBroadcastRecordingPip recording={voiceBroadcastRecording} />
-            </div>
-        );
-    }
-
    public render(): ReactNode {
        const pipMode = true;
-        let pipContent: Array<CreatePipChildren> = [];
-
-        if (this.props.voiceBroadcastRecording) {
-            pipContent = [this.createVoiceBroadcastRecordingPipContent(this.props.voiceBroadcastRecording)];
-        } else if (this.props.voiceBroadcastPreRecording) {
-            pipContent = [this.createVoiceBroadcastPreRecordingPipContent(this.props.voiceBroadcastPreRecording)];
-        } else if (this.props.voiceBroadcastPlayback) {
-            pipContent = [this.createVoiceBroadcastPlaybackPipContent(this.props.voiceBroadcastPlayback)];
-        }
+        const pipContent: Array<CreatePipChildren> = [];

        if (this.state.primaryCall) {
            // get a ref to call inside the current scope
@ -338,24 +280,7 @@ class PipContainerInner extends React.Component<IProps, IState> {
 }

 export const PipContainer: React.FC = () => {
-    const sdkContext = useContext(SDKContext);
-    const voiceBroadcastPreRecordingStore = sdkContext.voiceBroadcastPreRecordingStore;
-    const { currentVoiceBroadcastPreRecording } = useCurrentVoiceBroadcastPreRecording(voiceBroadcastPreRecordingStore);
-
-    const voiceBroadcastRecordingsStore = sdkContext.voiceBroadcastRecordingsStore;
-    const { currentVoiceBroadcastRecording } = useCurrentVoiceBroadcastRecording(voiceBroadcastRecordingsStore);
-
-    const voiceBroadcastPlaybacksStore = sdkContext.voiceBroadcastPlaybacksStore;
-    const { currentVoiceBroadcastPlayback } = useCurrentVoiceBroadcastPlayback(voiceBroadcastPlaybacksStore);
-
    const movePersistedElement = useRef<() => void>();

-    return (
-        <PipContainerInner
-            voiceBroadcastPlayback={currentVoiceBroadcastPlayback}
-            voiceBroadcastPreRecording={currentVoiceBroadcastPreRecording}
-            voiceBroadcastRecording={currentVoiceBroadcastRecording}
-            movePersistedElement={movePersistedElement}
-        />
-    );
+    return <PipContainerInner movePersistedElement={movePersistedElement} />;
 };
--- a/src/components/structures/RightPanel.tsx
+++ b/src/components/structures/RightPanel.tsx
@ -63,7 +63,7 @@ interface IState {

 export default class RightPanel extends React.Component<Props, IState> {
    public static contextType = MatrixClientContext;
-    public declare context: React.ContextType<typeof MatrixClientContext>;
+    declare public context: React.ContextType<typeof MatrixClientContext>;

    public constructor(props: Props, context: React.ContextType<typeof MatrixClientContext>) {
        super(props, context);
@ -109,10 +109,10 @@ export default class RightPanel extends React.Component<Props, IState> {
        }

        // redraw the badge on the membership list
-        if (this.state.phase === RightPanelPhases.RoomMemberList) {
+        if (this.state.phase === RightPanelPhases.MemberList) {
            this.delayedUpdate();
        } else if (
-            this.state.phase === RightPanelPhases.RoomMemberInfo &&
+            this.state.phase === RightPanelPhases.MemberInfo &&
            member.userId === this.state.cardState?.member?.userId
        ) {
            // refresh the member info (e.g. new power level)
@ -157,7 +157,7 @@ export default class RightPanel extends React.Component<Props, IState> {
        const phase = this.props.overwriteCard?.phase ?? this.state.phase;
        const cardState = this.props.overwriteCard?.state ?? this.state.cardState;
        switch (phase) {
-            case RightPanelPhases.RoomMemberList:
+            case RightPanelPhases.MemberList:
                if (!!roomId) {
                    card = (
                        <MemberList
@ -170,22 +170,8 @@ export default class RightPanel extends React.Component<Props, IState> {
                    );
                }
                break;
-            case RightPanelPhases.SpaceMemberList:
-                if (!!cardState?.spaceId || !!roomId) {
-                    card = (
-                        <MemberList
-                            roomId={cardState?.spaceId ?? roomId!}
-                            key={cardState?.spaceId ?? roomId!}
-                            onClose={this.onClose}
-                            searchQuery={this.state.searchQuery}
-                            onSearchQueryChanged={this.onSearchQueryChanged}
-                        />
-                    );
-                }
-                break;

-            case RightPanelPhases.RoomMemberInfo:
-            case RightPanelPhases.SpaceMemberInfo:
+            case RightPanelPhases.MemberInfo:
            case RightPanelPhases.EncryptionPanel: {
                if (!!cardState?.member) {
                    const roomMember = cardState.member instanceof RoomMember ? cardState.member : undefined;
@ -203,8 +189,7 @@ export default class RightPanel extends React.Component<Props, IState> {
                }
                break;
            }
-            case RightPanelPhases.Room3pidMemberInfo:
-            case RightPanelPhases.Space3pidMemberInfo:
+            case RightPanelPhases.ThreePidMemberInfo:
                if (!!cardState?.memberInfoEvent) {
                    card = (
                        <ThirdPartyMemberInfo event={cardState.memberInfoEvent} key={roomId} onClose={this.onClose} />
--- a/src/components/structures/RoomSearchView.tsx
+++ b/src/components/structures/RoomSearchView.tsx
@ -26,7 +26,7 @@ import ErrorDialog from "../views/dialogs/ErrorDialog";
 import ResizeNotifier from "../../utils/ResizeNotifier";
 import MatrixClientContext from "../../contexts/MatrixClientContext";
 import { RoomPermalinkCreator } from "../../utils/permalinks/Permalinks";
-import RoomContext from "../../contexts/RoomContext";
+import { useScopedRoomContext } from "../../contexts/ScopedRoomContext.tsx";

 const DEBUG = false;
 let debuglog = function (msg: string): void {};
@ -53,7 +53,7 @@ interface Props {
 export const RoomSearchView = forwardRef<ScrollPanel, Props>(
    ({ term, scope, promise, abortController, resizeNotifier, className, onUpdate, inProgress }: Props, ref) => {
        const client = useContext(MatrixClientContext);
-        const roomContext = useContext(RoomContext);
+        const roomContext = useScopedRoomContext("showHiddenEvents");
        const [highlights, setHighlights] = useState<string[] | null>(null);
        const [results, setResults] = useState<ISearchResults | null>(null);
        const aborted = useRef(false);
--- a/src/components/structures/RoomStatusBar.tsx
+++ b/src/components/structures/RoomStatusBar.tsx
@ -89,7 +89,7 @@ interface IState {
 export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
    private unmounted = false;
    public static contextType = MatrixClientContext;
-    public declare context: React.ContextType<typeof MatrixClientContext>;
+    declare public context: React.ContextType<typeof MatrixClientContext>;

    public constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
        super(props, context);
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */

-import React, { ChangeEvent, ComponentProps, createRef, ReactElement, ReactNode, RefObject, useContext } from "react";
+import React, { ChangeEvent, ComponentProps, createRef, ReactElement, ReactNode, RefObject, JSX } from "react";
 import classNames from "classnames";
 import {
    IRecommendedVersion,
@ -29,6 +29,7 @@ import {
    MatrixError,
    ISearchResults,
    THREAD_RELATION_TYPE,
+    MatrixClient,
 } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { logger } from "matrix-js-sdk/src/logger";
@ -54,7 +55,7 @@ import WidgetEchoStore from "../../stores/WidgetEchoStore";
 import SettingsStore from "../../settings/SettingsStore";
 import { Layout } from "../../settings/enums/Layout";
 import AccessibleButton, { ButtonEvent } from "../views/elements/AccessibleButton";
-import RoomContext, { TimelineRenderingType, MainSplitContentType } from "../../contexts/RoomContext";
+import { TimelineRenderingType, MainSplitContentType } from "../../contexts/RoomContext";
 import { E2EStatus, shieldStatusForRoom } from "../../utils/ShieldUtils";
 import { Action } from "../../dispatcher/actions";
 import { IMatrixClientCreds } from "../../MatrixClientPeg";
@ -126,6 +127,7 @@ import RightPanelStore from "../../stores/right-panel/RightPanelStore";
 import { onView3pidInvite } from "../../stores/right-panel/action-handlers";
 import RoomSearchAuxPanel from "../views/rooms/RoomSearchAuxPanel";
 import { PinnedMessageBanner } from "../views/rooms/PinnedMessageBanner";
+import { ScopedRoomContextProvider, useScopedRoomContext } from "../../contexts/ScopedRoomContext";

 const DEBUG = false;
 const PREVENT_MULTIPLE_JITSI_WITHIN = 30_000;
@ -233,6 +235,11 @@ export interface IRoomState {
    liveTimeline?: EventTimeline;
    narrow: boolean;
    msc3946ProcessDynamicPredecessor: boolean;
+    /**
+     * Whether the room is encrypted or not.
+     * If null, we are still determining the encryption status.
+     */
+    isRoomEncrypted: boolean | null;

    canAskToJoin: boolean;
    promptAskToJoin: boolean;
@ -246,6 +253,7 @@ interface LocalRoomViewProps {
    permalinkCreator: RoomPermalinkCreator;
    roomView: RefObject<HTMLElement>;
    onFileDrop: (dataTransfer: DataTransfer) => Promise<void>;
+    mainSplitContentType: MainSplitContentType;
 }

 /**
@ -255,7 +263,7 @@ interface LocalRoomViewProps {
 * @returns {ReactElement}
 */
 function LocalRoomView(props: LocalRoomViewProps): ReactElement {
-    const context = useContext(RoomContext);
+    const context = useScopedRoomContext("room");
    const room = context.room as LocalRoom;
    const encryptionEvent = props.localRoom.currentState.getStateEvents(EventType.RoomEncryption)[0];
    let encryptionTile: ReactNode;
@ -323,6 +331,7 @@ interface ILocalRoomCreateLoaderProps {
    localRoom: LocalRoom;
    names: string;
    resizeNotifier: ResizeNotifier;
+    mainSplitContentType: MainSplitContentType;
 }

 /**
@ -363,7 +372,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
    private roomViewBody = createRef<HTMLDivElement>();

    public static contextType = SDKContext;
-    public declare context: React.ContextType<typeof SDKContext>;
+    declare public context: React.ContextType<typeof SDKContext>;

    public constructor(props: IRoomProps, context: React.ContextType<typeof SDKContext>) {
        super(props, context);
@ -417,6 +426,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
            canAskToJoin: this.askToJoinEnabled,
            promptAskToJoin: false,
            viewRoomOpts: { buttons: [] },
+            isRoomEncrypted: null,
        };
    }

@ -655,6 +665,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
        // the RoomView instance
        if (initial) {
            newState.room = this.context.client!.getRoom(newState.roomId) || undefined;
+            newState.isRoomEncrypted = null;
            if (newState.room) {
                newState.showApps = this.shouldShowApps(newState.room);
                this.onRoomLoaded(newState.room);
@ -697,6 +708,14 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
        if (initial) {
            this.setupRoom(newState.room, newState.roomId, !!newState.joining, !!newState.shouldPeek);
        }
+
+        // We don't block the initial setup but we want to make it early to not block the timeline rendering
+        const isRoomEncrypted = await this.getIsRoomEncrypted(newState.roomId);
+        this.setState({
+            isRoomEncrypted,
+            ...(isRoomEncrypted &&
+                newState.roomId && { e2eStatus: RoomView.e2eStatusCache.get(newState.roomId) ?? E2EStatus.Warning }),
+        });
    };

    private onConnectedCalls = (): void => {
@ -1214,18 +1233,18 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                if (payload.member) {
                    if (payload.push) {
                        RightPanelStore.instance.pushCard({
-                            phase: RightPanelPhases.RoomMemberInfo,
+                            phase: RightPanelPhases.MemberInfo,
                            state: { member: payload.member },
                        });
                    } else {
                        RightPanelStore.instance.setCards([
                            { phase: RightPanelPhases.RoomSummary },
-                            { phase: RightPanelPhases.RoomMemberList },
-                            { phase: RightPanelPhases.RoomMemberInfo, state: { member: payload.member } },
+                            { phase: RightPanelPhases.MemberList },
+                            { phase: RightPanelPhases.MemberInfo, state: { member: payload.member } },
                        ]);
                    }
                } else {
-                    RightPanelStore.instance.showOrHidePhase(RightPanelPhases.RoomMemberList);
+                    RightPanelStore.instance.showOrHidePhase(RightPanelPhases.MemberList);
                }
                break;
            case Action.View3pidInvite:
@ -1342,13 +1361,12 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
        this.context.widgetLayoutStore.on(WidgetLayoutStore.emissionForRoom(room), this.onWidgetLayoutChange);

        this.calculatePeekRules(room);
-        this.updatePreviewUrlVisibility(room);
        this.loadMembersIfJoined(room);
        this.calculateRecommendedVersion(room);
-        this.updateE2EStatus(room);
        this.updatePermissions(room);
        this.checkWidgets(room);
        this.loadVirtualRoom(room);
+        this.updateRoomEncrypted(room);

        if (
            this.getMainSplitContentType(room) !== MainSplitContentType.Timeline &&
@ -1377,6 +1395,13 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
        return room?.currentState.getStateEvents(EventType.RoomTombstone, "") ?? undefined;
    }

+    private async getIsRoomEncrypted(roomId = this.state.roomId): Promise<boolean> {
+        const crypto = this.context.client?.getCrypto();
+        if (!crypto || !roomId) return false;
+
+        return await crypto.isEncryptionEnabledInRoom(roomId);
+    }
+
    private async calculateRecommendedVersion(room: Room): Promise<void> {
        const upgradeRecommendation = await room.getRecommendedVersion();
        if (this.unmounted) return;
@ -1409,12 +1434,15 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
        });
    }

-    private updatePreviewUrlVisibility({ roomId }: Room): void {
-        // URL Previews in E2EE rooms can be a privacy leak so use a different setting which is per-room explicit
-        const key = this.context.client?.isRoomEncrypted(roomId) ? "urlPreviewsEnabled_e2ee" : "urlPreviewsEnabled";
-        this.setState({
-            showUrlPreview: SettingsStore.getValue(key, roomId),
-        });
+    private updatePreviewUrlVisibility(room: Room): void {
+        this.setState(({ isRoomEncrypted }) => ({
+            showUrlPreview: this.getPreviewUrlVisibility(room, isRoomEncrypted),
+        }));
+    }
+
+    private getPreviewUrlVisibility({ roomId }: Room, isRoomEncrypted: boolean | null): boolean {
+        const key = isRoomEncrypted ? "urlPreviewsEnabled_e2ee" : "urlPreviewsEnabled";
+        return SettingsStore.getValue(key, roomId);
    }

    private onRoom = (room: Room): void => {
@ -1456,22 +1484,20 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
    };

    private async updateE2EStatus(room: Room): Promise<void> {
-        if (!this.context.client?.isRoomEncrypted(room.roomId)) return;
-
-        // If crypto is not currently enabled, we aren't tracking devices at all,
-        // so we don't know what the answer is. Let's error on the safe side and show
-        // a warning for this case.
-        let e2eStatus = RoomView.e2eStatusCache.get(room.roomId) ?? E2EStatus.Warning;
-        // set the state immediately then update, so we don't scare the user into thinking the room is unencrypted
-        this.setState({ e2eStatus });
-
-        if (this.context.client.getCrypto()) {
-            /* At this point, the user has encryption on and cross-signing on */
-            e2eStatus = await shieldStatusForRoom(this.context.client, room);
-            RoomView.e2eStatusCache.set(room.roomId, e2eStatus);
+        if (!this.context.client || !this.state.isRoomEncrypted) return;
+        const e2eStatus = await this.cacheAndGetE2EStatus(room, this.context.client);
        if (this.unmounted) return;
        this.setState({ e2eStatus });
    }
+
+    private async cacheAndGetE2EStatus(room: Room, client: MatrixClient): Promise<E2EStatus> {
+        let e2eStatus = RoomView.e2eStatusCache.get(room.roomId);
+        // set the state immediately then update, so we don't scare the user into thinking the room is unencrypted
+        if (e2eStatus) this.setState({ e2eStatus });
+
+        e2eStatus = await shieldStatusForRoom(client, room);
+        RoomView.e2eStatusCache.set(room.roomId, e2eStatus);
+        return e2eStatus;
    }

    private onUrlPreviewsEnabledChange = (): void => {
@ -1480,20 +1506,36 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
        }
    };

-    private onRoomStateEvents = (ev: MatrixEvent, state: RoomState): void => {
+    private onRoomStateEvents = async (ev: MatrixEvent, state: RoomState): Promise<void> => {
        // ignore if we don't have a room yet
-        if (!this.state.room || this.state.room.roomId !== state.roomId) return;
+        if (!this.state.room || this.state.room.roomId !== state.roomId || !this.context.client) return;

        switch (ev.getType()) {
            case EventType.RoomTombstone:
                this.setState({ tombstone: this.getRoomTombstone() });
                break;
-
+            case EventType.RoomEncryption: {
+                await this.updateRoomEncrypted();
+                break;
+            }
            default:
                this.updatePermissions(this.state.room);
        }
    };

+    private async updateRoomEncrypted(room = this.state.room): Promise<void> {
+        if (!room || !this.context.client) return;
+
+        const isRoomEncrypted = await this.getIsRoomEncrypted(room.roomId);
+        const newE2EStatus = isRoomEncrypted ? await this.cacheAndGetE2EStatus(room, this.context.client) : null;
+
+        this.setState({
+            isRoomEncrypted,
+            showUrlPreview: this.getPreviewUrlVisibility(room, isRoomEncrypted),
+            ...(newE2EStatus && { e2eStatus: newE2EStatus }),
+        });
+    }
+
    private onRoomStateUpdate = (state: RoomState): void => {
        // ignore members in other rooms
        if (state.roomId !== this.state.room?.roomId) {
@ -1959,35 +2001,41 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
        if (!this.state.room || !this.context?.client) return null;
        const names = this.state.room.getDefaultRoomName(this.context.client.getSafeUserId());
        return (
-            <RoomContext.Provider value={this.state}>
-                <LocalRoomCreateLoader localRoom={localRoom} names={names} resizeNotifier={this.props.resizeNotifier} />
-            </RoomContext.Provider>
+            <ScopedRoomContextProvider {...this.state}>
+                <LocalRoomCreateLoader
+                    localRoom={localRoom}
+                    names={names}
+                    resizeNotifier={this.props.resizeNotifier}
+                    mainSplitContentType={this.state.mainSplitContentType}
+                />
+            </ScopedRoomContextProvider>
        );
    }

    private renderLocalRoomView(localRoom: LocalRoom): ReactNode {
        return (
-            <RoomContext.Provider value={this.state}>
+            <ScopedRoomContextProvider {...this.state}>
                <LocalRoomView
                    localRoom={localRoom}
                    resizeNotifier={this.props.resizeNotifier}
                    permalinkCreator={this.permalinkCreator}
                    roomView={this.roomView}
                    onFileDrop={this.onFileDrop}
+                    mainSplitContentType={this.state.mainSplitContentType}
                />
-            </RoomContext.Provider>
+            </ScopedRoomContextProvider>
        );
    }

    private renderWaitingForThirdPartyRoomView(inviteEvent: MatrixEvent): ReactNode {
        return (
-            <RoomContext.Provider value={this.state}>
+            <ScopedRoomContextProvider {...this.state}>
                <WaitingForThirdPartyRoomView
                    resizeNotifier={this.props.resizeNotifier}
                    roomView={this.roomView}
                    inviteEvent={inviteEvent}
                />
-            </RoomContext.Provider>
+            </ScopedRoomContextProvider>
        );
    }

@ -2027,6 +2075,8 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {

    public render(): ReactNode {
        if (!this.context.client) return null;
+        const { isRoomEncrypted } = this.state;
+        const isRoomEncryptionLoading = isRoomEncrypted === null;

        if (this.state.room instanceof LocalRoom) {
            if (this.state.room.state === LocalRoomState.CREATING) {
@ -2242,14 +2292,16 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
        let aux: JSX.Element | undefined;
        let previewBar;
        if (this.state.timelineRenderingType === TimelineRenderingType.Search) {
+            if (!isRoomEncryptionLoading) {
                aux = (
                    <RoomSearchAuxPanel
                        searchInfo={this.state.search}
                        onCancelClick={this.onCancelSearchClick}
                        onSearchScopeChange={this.onSearchScopeChange}
-                    isRoomEncrypted={this.context.client.isRoomEncrypted(this.state.room.roomId)}
+                        isRoomEncrypted={isRoomEncrypted}
                    />
                );
+            }
        } else if (showRoomUpgradeBar) {
            aux = <RoomUpgradeWarningBar room={this.state.room} />;
        } else if (myMembership !== KnownMembership.Join) {
@ -2325,8 +2377,10 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {

        let messageComposer;
        const showComposer =
+            !isRoomEncryptionLoading &&
            // joined and not showing search results
-            myMembership === KnownMembership.Join && !this.state.search;
+            myMembership === KnownMembership.Join &&
+            !this.state.search;
        if (showComposer) {
            messageComposer = (
                <MessageComposer
@ -2367,7 +2421,9 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
            highlightedEventId = this.state.initialEventId;
        }

-        const messagePanel = (
+        let messagePanel: JSX.Element | undefined;
+        if (!isRoomEncryptionLoading) {
+            messagePanel = (
                <TimelinePanel
                    ref={this.gatherTimelinePanelRef}
                    timelineSet={this.state.room.getUnfilteredTimelineSet()}
@ -2395,6 +2451,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                    editState={this.state.editState}
                />
            );
+        }

        let topUnreadMessagesBar: JSX.Element | undefined;
        // Do not show TopUnreadMessagesBar if we have search results showing, it makes no sense
@ -2415,7 +2472,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
            );
        }

-        const showRightPanel = this.state.room && this.state.showRightPanel;
+        const showRightPanel = !isRoomEncryptionLoading && this.state.room && this.state.showRightPanel;

        const rightPanel = showRightPanel ? (
            <RightPanel
@ -2516,7 +2573,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
        }

        return (
-            <RoomContext.Provider value={this.state}>
+            <ScopedRoomContextProvider {...this.state}>
                <div className={mainClasses} ref={this.roomView} onKeyDown={this.onReactKeyDown}>
                    {showChatEffects && this.roomView.current && (
                        <EffectsOverlay roomWidth={this.roomView.current.offsetWidth} />
@ -2543,7 +2600,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                        </MainSplit>
                    </ErrorBoundary>
                </div>
-            </RoomContext.Provider>
+            </ScopedRoomContextProvider>
        );
    }
 }
--- a/src/components/structures/SpaceRoomView.tsx
+++ b/src/components/structures/SpaceRoomView.tsx
@ -208,7 +208,7 @@ const SpaceLanding: React.FC<{ space: Room }> = ({ space }) => {
    const storeIsShowingSpaceMembers = useCallback(
        () =>
            RightPanelStore.instance.isOpenForRoom(space.roomId) &&
-            RightPanelStore.instance.currentCardForRoom(space.roomId)?.phase === RightPanelPhases.SpaceMemberList,
+            RightPanelStore.instance.currentCardForRoom(space.roomId)?.phase === RightPanelPhases.MemberList,
        [space.roomId],
    );
    const isShowingMembers = useEventEmitterState(RightPanelStore.instance, UPDATE_EVENT, storeIsShowingSpaceMembers);
@ -251,7 +251,7 @@ const SpaceLanding: React.FC<{ space: Room }> = ({ space }) => {
    }

    const onMembersClick = (): void => {
-        RightPanelStore.instance.setCard({ phase: RightPanelPhases.SpaceMemberList });
+        RightPanelStore.instance.setCard({ phase: RightPanelPhases.MemberList });
    };

    return (
@ -597,7 +597,7 @@ const SpaceSetupPrivateInvite: React.FC<{

 export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
    public static contextType = MatrixClientContext;
-    public declare context: React.ContextType<typeof MatrixClientContext>;
+    declare public context: React.ContextType<typeof MatrixClientContext>;

    private dispatcherRef?: string;

--- a/src/components/structures/ThreadPanel.tsx
+++ b/src/components/structures/ThreadPanel.tsx
@ -20,7 +20,7 @@ import MatrixClientContext, { useMatrixClientContext } from "../../contexts/Matr
 import { _t } from "../../languageHandler";
 import { ContextMenuButton } from "../../accessibility/context_menu/ContextMenuButton";
 import ContextMenu, { ChevronFace, MenuItemRadio, useContextMenu } from "./ContextMenu";
-import RoomContext, { TimelineRenderingType, useRoomContext } from "../../contexts/RoomContext";
+import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext";
 import TimelinePanel from "./TimelinePanel";
 import { Layout } from "../../settings/enums/Layout";
 import { RoomPermalinkCreator } from "../../utils/permalinks/Permalinks";
@ -30,6 +30,7 @@ import { ButtonEvent } from "../views/elements/AccessibleButton";
 import Spinner from "../views/elements/Spinner";
 import { clearRoomNotification } from "../../utils/notifications";
 import EmptyState from "../views/right_panel/EmptyState";
+import { ScopedRoomContextProvider, useScopedRoomContext } from "../../contexts/ScopedRoomContext.tsx";

 interface IProps {
    roomId: string;
@ -68,7 +69,7 @@ export const ThreadPanelHeader: React.FC<{
    setFilterOption: (filterOption: ThreadFilterType) => void;
 }> = ({ filterOption, setFilterOption }) => {
    const mxClient = useMatrixClientContext();
-    const roomContext = useRoomContext();
+    const roomContext = useScopedRoomContext("room");
    const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu<HTMLElement>();
    const options: readonly ThreadPanelHeaderOption[] = [
        {
@ -184,13 +185,11 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>
    }, [timelineSet, timelinePanel]);

    return (
-        <RoomContext.Provider
-            value={{
-                ...roomContext,
-                timelineRenderingType: TimelineRenderingType.ThreadsList,
-                showHiddenEvents: true,
-                narrow,
-            }}
+        <ScopedRoomContextProvider
+            {...roomContext}
+            timelineRenderingType={TimelineRenderingType.ThreadsList}
+            showHiddenEvents={true}
+            narrow={narrow}
        >
            <BaseCard
                header={
@ -241,7 +240,7 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>
                    </div>
                )}
            </BaseCard>
-        </RoomContext.Provider>
+        </ScopedRoomContextProvider>
    );
 };
 export default ThreadPanel;
--- a/src/components/structures/ThreadView.tsx
+++ b/src/components/structures/ThreadView.tsx
@ -51,6 +51,7 @@ import { ComposerInsertPayload, ComposerType } from "../../dispatcher/payloads/C
 import Heading from "../views/typography/Heading";
 import { SdkContextClass } from "../../contexts/SDKContext";
 import { ThreadPayload } from "../../dispatcher/payloads/ThreadPayload";
+import { ScopedRoomContextProvider } from "../../contexts/ScopedRoomContext.tsx";

 interface IProps {
    room: Room;
@ -75,7 +76,7 @@ interface IState {

 export default class ThreadView extends React.Component<IProps, IState> {
    public static contextType = RoomContext;
-    public declare context: React.ContextType<typeof RoomContext>;
+    declare public context: React.ContextType<typeof RoomContext>;

    private dispatcherRef?: string;
    private layoutWatcherRef?: string;
@ -422,14 +423,12 @@ export default class ThreadView extends React.Component<IProps, IState> {
        }

        return (
-            <RoomContext.Provider
-                value={{
-                    ...this.context,
-                    timelineRenderingType: TimelineRenderingType.Thread,
-                    threadId: this.state.thread?.id,
-                    liveTimeline: this.state?.thread?.timelineSet?.getLiveTimeline(),
-                    narrow: this.state.narrow,
-                }}
+            <ScopedRoomContextProvider
+                {...this.context}
+                timelineRenderingType={TimelineRenderingType.Thread}
+                threadId={this.state.thread?.id}
+                liveTimeline={this.state?.thread?.timelineSet?.getLiveTimeline()}
+                narrow={this.state.narrow}
            >
                <BaseCard
                    className={classNames("mx_ThreadView mx_ThreadPanel", {
@ -463,7 +462,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
                        />
                    )}
                </BaseCard>
-            </RoomContext.Provider>
+            </ScopedRoomContextProvider>
        );
    }
 }
--- a/src/components/structures/TimelinePanel.tsx
+++ b/src/components/structures/TimelinePanel.tsx
@ -229,7 +229,7 @@ interface IEventIndexOpts {
 */
 class TimelinePanel extends React.Component<IProps, IState> {
    public static contextType = RoomContext;
-    public declare context: React.ContextType<typeof RoomContext>;
+    declare public context: React.ContextType<typeof RoomContext>;

    // a map from room id to read marker event timestamp
    public static roomReadMarkerTsMap: Record<string, number> = {};
--- a/src/components/structures/UserMenu.tsx
+++ b/src/components/structures/UserMenu.tsx
@ -40,8 +40,6 @@ import { UPDATE_SELECTED_SPACE } from "../../stores/spaces";
 import UserIdentifierCustomisations from "../../customisations/UserIdentifier";
 import PosthogTrackers from "../../PosthogTrackers";
 import { ViewHomePagePayload } from "../../dispatcher/payloads/ViewHomePagePayload";
-import { Icon as LiveIcon } from "../../../res/img/compound/live-8px.svg";
-import { VoiceBroadcastRecording, VoiceBroadcastRecordingsStoreEvent } from "../../voice-broadcast";
 import { SDKContext } from "../../contexts/SDKContext";
 import { shouldShowFeedback } from "../../utils/Feedback";
 import DarkLightModeSvg from "../../../res/img/element-icons/roomlist/dark-light-mode.svg";
@ -58,7 +56,6 @@ interface IState {
    isDarkTheme: boolean;
    isHighContrast: boolean;
    selectedSpace?: Room | null;
-    showLiveAvatarAddon: boolean;
 }

 const toRightOf = (rect: PartialDOMRect): MenuProps => {
@ -79,7 +76,7 @@ const below = (rect: PartialDOMRect): MenuProps => {

 export default class UserMenu extends React.Component<IProps, IState> {
    public static contextType = SDKContext;
-    public declare context: React.ContextType<typeof SDKContext>;
+    declare public context: React.ContextType<typeof SDKContext>;

    private dispatcherRef?: string;
    private themeWatcherRef?: string;
@ -94,7 +91,6 @@ export default class UserMenu extends React.Component<IProps, IState> {
            isDarkTheme: this.isUserOnDarkTheme(),
            isHighContrast: this.isUserOnHighContrastTheme(),
            selectedSpace: SpaceStore.instance.activeSpaceRoom,
-            showLiveAvatarAddon: this.context.voiceBroadcastRecordingsStore.hasCurrent(),
        };
    }

@ -102,19 +98,9 @@ export default class UserMenu extends React.Component<IProps, IState> {
        return !!getHomePageUrl(SdkConfig.get(), this.context.client!);
    }

-    private onCurrentVoiceBroadcastRecordingChanged = (recording: VoiceBroadcastRecording | null): void => {
-        this.setState({
-            showLiveAvatarAddon: recording !== null,
-        });
-    };
-
    public componentDidMount(): void {
        OwnProfileStore.instance.on(UPDATE_EVENT, this.onProfileUpdate);
        SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.onSelectedSpaceUpdate);
-        this.context.voiceBroadcastRecordingsStore.on(
-            VoiceBroadcastRecordingsStoreEvent.CurrentChanged,
-            this.onCurrentVoiceBroadcastRecordingChanged,
-        );
        this.dispatcherRef = defaultDispatcher.register(this.onAction);
        this.themeWatcherRef = SettingsStore.watchSetting("theme", null, this.onThemeChanged);
    }
@ -125,10 +111,6 @@ export default class UserMenu extends React.Component<IProps, IState> {
        defaultDispatcher.unregister(this.dispatcherRef);
        OwnProfileStore.instance.off(UPDATE_EVENT, this.onProfileUpdate);
        SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.onSelectedSpaceUpdate);
-        this.context.voiceBroadcastRecordingsStore.off(
-            VoiceBroadcastRecordingsStoreEvent.CurrentChanged,
-            this.onCurrentVoiceBroadcastRecordingChanged,
-        );
    }

    private isUserOnDarkTheme(): boolean {
@ -435,12 +417,6 @@ export default class UserMenu extends React.Component<IProps, IState> {
            name = <div className="mx_UserMenu_name">{displayName}</div>;
        }

-        const liveAvatarAddon = this.state.showLiveAvatarAddon ? (
-            <div className="mx_UserMenu_userAvatarLive" data-testid="user-menu-live-vb">
-                <LiveIcon className="mx_Icon_8" />
-            </div>
-        ) : null;
-
        return (
            <div className="mx_UserMenu">
                <ContextMenuButton
@ -459,7 +435,6 @@ export default class UserMenu extends React.Component<IProps, IState> {
                            size={avatarSize + "px"}
                            className="mx_UserMenu_userAvatar_BaseAvatar"
                        />
-                        {liveAvatarAddon}
                    </div>
                    {name}
                    {this.renderContextMenu()}
--- a/src/components/structures/UserView.tsx
+++ b/src/components/structures/UserView.tsx
@ -32,7 +32,7 @@ interface IState {

 export default class UserView extends React.Component<IProps, IState> {
    public static contextType = MatrixClientContext;
-    public declare context: React.ContextType<typeof MatrixClientContext>;
+    declare public context: React.ContextType<typeof MatrixClientContext>;

    public constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
        super(props, context);
@ -82,7 +82,7 @@ export default class UserView extends React.Component<IProps, IState> {
        } else if (this.state.member) {
            const panel = (
                <RightPanel
-                    overwriteCard={{ phase: RightPanelPhases.RoomMemberInfo, state: { member: this.state.member } }}
+                    overwriteCard={{ phase: RightPanelPhases.MemberInfo, state: { member: this.state.member } }}
                    resizeNotifier={this.props.resizeNotifier}
                />
            );
--- a/src/components/structures/WaitingForThirdPartyRoomView.tsx
+++ b/src/components/structures/WaitingForThirdPartyRoomView.tsx
@ -9,7 +9,6 @@ Please see LICENSE files in the repository root for full details.
 import React, { RefObject } from "react";
 import { MatrixEvent } from "matrix-js-sdk/src/matrix";

-import { useRoomContext } from "../../contexts/RoomContext";
 import ResizeNotifier from "../../utils/ResizeNotifier";
 import ErrorBoundary from "../views/elements/ErrorBoundary";
 import RoomHeader from "../views/rooms/RoomHeader";
@ -19,6 +18,7 @@ import NewRoomIntro from "../views/rooms/NewRoomIntro";
 import { UnwrappedEventTile } from "../views/rooms/EventTile";
 import { _t } from "../../languageHandler";
 import SdkConfig from "../../SdkConfig";
+import { useScopedRoomContext } from "../../contexts/ScopedRoomContext.tsx";

 interface Props {
    roomView: RefObject<HTMLElement>;
@ -32,7 +32,7 @@ interface Props {
 * To avoid UTDs, users are shown a waiting room until the others have joined.
 */
 export const WaitingForThirdPartyRoomView: React.FC<Props> = ({ roomView, resizeNotifier, inviteEvent }) => {
-    const context = useRoomContext();
+    const context = useScopedRoomContext("room");
    const brand = SdkConfig.get().brand;

    return (
--- a/src/components/structures/auth/SoftLogout.tsx
+++ b/src/components/structures/auth/SoftLogout.tsx
@ -64,7 +64,7 @@ interface IState {

 export default class SoftLogout extends React.Component<IProps, IState> {
    public static contextType = SDKContext;
-    public declare context: React.ContextType<typeof SDKContext>;
+    declare public context: React.ContextType<typeof SDKContext>;

    public constructor(props: IProps, context: React.ContextType<typeof SDKContext>) {
        super(props, context);
--- a/src/components/structures/grouper/CreationGrouper.tsx
+++ b/src/components/structures/grouper/CreationGrouper.tsx
@ -12,7 +12,6 @@ import { KnownMembership } from "matrix-js-sdk/src/types";

 import { BaseGrouper } from "./BaseGrouper";
 import MessagePanel, { WrappedEvent } from "../MessagePanel";
-import { VoiceBroadcastInfoEventType } from "../../../voice-broadcast";
 import DMRoomMap from "../../../utils/DMRoomMap";
 import { _t } from "../../../languageHandler";
 import DateSeparator from "../../views/messages/DateSeparator";
@ -53,11 +52,6 @@ export class CreationGrouper extends BaseGrouper {
            return false;
        }

-        if (VoiceBroadcastInfoEventType === eventType) {
-            // always show voice broadcast info events in timeline
-            return false;
-        }
-
        if (event.isState() && event.getSender() === createEvent.getSender()) {
            return true;
        }
--- a/src/components/views/audio_messages/DevicesContextMenu.tsx
+++ b/src/components/views/audio_messages/DevicesContextMenu.tsx
@ -1,45 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2022, 2023 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React, { MutableRefObject } from "react";
-
-import { toLeftOrRightOf } from "../../structures/ContextMenu";
-import IconizedContextMenu, {
-    IconizedContextMenuOptionList,
-    IconizedContextMenuRadio,
-} from "../context_menus/IconizedContextMenu";
-
-interface Props {
-    containerRef: MutableRefObject<HTMLElement | null>;
-    currentDevice: MediaDeviceInfo | null;
-    devices: MediaDeviceInfo[];
-    onDeviceSelect: (device: MediaDeviceInfo) => void;
-}
-
-export const DevicesContextMenu: React.FC<Props> = ({ containerRef, currentDevice, devices, onDeviceSelect }) => {
-    const deviceOptions = devices.map((d: MediaDeviceInfo) => {
-        return (
-            <IconizedContextMenuRadio
-                key={d.deviceId}
-                active={d.deviceId === currentDevice?.deviceId}
-                onClick={() => onDeviceSelect(d)}
-                label={d.label}
-            />
-        );
-    });
-
-    return (
-        <IconizedContextMenu
-            mountAsChild={false}
-            onFinished={() => {}}
-            {...(containerRef.current ? toLeftOrRightOf(containerRef.current.getBoundingClientRect(), 0) : {})}
-        >
-            <IconizedContextMenuOptionList>{deviceOptions}</IconizedContextMenuOptionList>
-        </IconizedContextMenu>
-    );
-};
--- a/src/components/views/auth/LoginWithQR.tsx
+++ b/src/components/views/auth/LoginWithQR.tsx
@ -108,12 +108,9 @@ export default class LoginWithQR extends React.Component<IProps, IState> {
    private generateAndShowCode = async (): Promise<void> => {
        let rendezvous: MSC4108SignInWithQR;
        try {
-            const fallbackRzServer = this.props.client?.getClientWellKnown()?.["io.element.rendezvous"]?.server;
-
            const transport = new MSC4108RendezvousSession({
                onFailure: this.onFailure,
                client: this.props.client,
-                fallbackRzServer,
            });
            await transport.send("");
            const channel = new MSC4108SecureChannel(transport, undefined, this.onFailure);
--- a/src/components/views/avatars/BaseAvatar.tsx
+++ b/src/components/views/avatars/BaseAvatar.tsx
@ -16,10 +16,10 @@ import { Avatar } from "@vector-im/compound-web";

 import SettingsStore from "../../../settings/SettingsStore";
 import { ButtonEvent } from "../elements/AccessibleButton";
-import RoomContext from "../../../contexts/RoomContext";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { useTypedEventEmitter } from "../../../hooks/useEventEmitter";
 import { _t } from "../../../languageHandler";
+import { useScopedRoomContext } from "../../../contexts/ScopedRoomContext.tsx";

 interface IProps {
    name?: React.ComponentProps<typeof Avatar>["name"]; // The name (first initial used as default)
@ -57,8 +57,8 @@ const calculateUrls = (url?: string | null, urls?: string[], lowBandwidth = fals
 const useImageUrl = ({ url, urls }: { url?: string | null; urls?: string[] }): [string, () => void] => {
    // Since this is a hot code path and the settings store can be slow, we
    // use the cached lowBandwidth value from the room context if it exists
-    const roomContext = useContext(RoomContext);
-    const lowBandwidth = roomContext ? roomContext.lowBandwidth : SettingsStore.getValue("lowBandwidth");
+    const roomContext = useScopedRoomContext("lowBandwidth");
+    const lowBandwidth = roomContext?.lowBandwidth ?? SettingsStore.getValue("lowBandwidth");

    const [imageUrls, setUrls] = useState<string[]>(calculateUrls(url, urls, lowBandwidth));
    const [urlsIndex, setIndex] = useState<number>(0);
--- a/src/components/views/context_menus/MessageContextMenu.tsx
+++ b/src/components/views/context_menus/MessageContextMenu.tsx
@ -38,7 +38,7 @@ import ContextMenu, { toRightOf, MenuProps } from "../../structures/ContextMenu"
 import ReactionPicker from "../emojipicker/ReactionPicker";
 import ViewSource from "../../structures/ViewSource";
 import { createRedactEventDialog } from "../dialogs/ConfirmRedactDialog";
-import ShareDialog from "../dialogs/ShareDialog";
+import { ShareDialog } from "../dialogs/ShareDialog";
 import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
 import EndPollDialog from "../dialogs/EndPollDialog";
 import { isPollEnded } from "../messages/MPollBody";
@ -126,7 +126,7 @@ interface IState {

 export default class MessageContextMenu extends React.Component<IProps, IState> {
    public static contextType = RoomContext;
-    public declare context: React.ContextType<typeof RoomContext>;
+    declare public context: React.ContextType<typeof RoomContext>;

    private reactButtonRef = createRef<any>(); // XXX Ref to a functional component

--- a/src/components/views/context_menus/WidgetContextMenu.tsx
+++ b/src/components/views/context_menus/WidgetContextMenu.tsx
@ -18,7 +18,6 @@ import { _t } from "../../../languageHandler";
 import { isAppWidget } from "../../../stores/WidgetStore";
 import WidgetUtils from "../../../utils/WidgetUtils";
 import { WidgetMessagingStore } from "../../../stores/widgets/WidgetMessagingStore";
-import RoomContext from "../../../contexts/RoomContext";
 import dis from "../../../dispatcher/dispatcher";
 import SettingsStore from "../../../settings/SettingsStore";
 import Modal from "../../../Modal";
@ -30,6 +29,7 @@ import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayo
 import { getConfigLivestreamUrl, startJitsiAudioLivestream } from "../../../Livestream";
 import { ModuleRunner } from "../../../modules/ModuleRunner";
 import { ElementWidget } from "../../../stores/widgets/StopGapWidget";
+import { useScopedRoomContext } from "../../../contexts/ScopedRoomContext.tsx";

 interface IProps extends Omit<ComponentProps<typeof IconizedContextMenu>, "children"> {
    app: IWidget;
@ -114,7 +114,7 @@ export const WidgetContextMenu: React.FC<IProps> = ({
    ...props
 }) => {
    const cli = useContext(MatrixClientContext);
-    const { room, roomId } = useContext(RoomContext);
+    const { room, roomId } = useScopedRoomContext("room", "roomId");

    const widgetMessaging = WidgetMessagingStore.instance.getMessagingForUid(WidgetUtils.getWidgetUid(app));
    const canModify = userWidget || WidgetUtils.canUserModifyWidgets(cli, roomId);
--- a/src/components/views/dialogs/CantStartVoiceMessageBroadcastDialog.tsx
+++ b/src/components/views/dialogs/CantStartVoiceMessageBroadcastDialog.tsx
@ -1,21 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React from "react";
-
-import { _t } from "../../../languageHandler";
-import Modal from "../../../Modal";
-import InfoDialog from "./InfoDialog";
-
-export const createCantStartVoiceMessageBroadcastDialog = (): void => {
-    Modal.createDialog(InfoDialog, {
-        title: _t("voice_message|cant_start_broadcast_title"),
-        description: <p>{_t("voice_message|cant_start_broadcast_description")}</p>,
-        hasCloseButton: true,
-    });
-};
--- a/src/components/views/dialogs/ConfirmRedactDialog.tsx
+++ b/src/components/views/dialogs/ConfirmRedactDialog.tsx
@ -6,14 +6,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */

-import { Feature, ServerSupport } from "matrix-js-sdk/src/feature";
-import { IRedactOpts, MatrixEvent, RelationType } from "matrix-js-sdk/src/matrix";
+import { IRedactOpts, MatrixEvent } from "matrix-js-sdk/src/matrix";
 import React from "react";

 import { _t } from "../../../languageHandler";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import Modal from "../../../Modal";
-import { isVoiceBroadcastStartedEvent } from "../../../voice-broadcast/utils/isVoiceBroadcastStartedEvent";
 import ErrorDialog from "./ErrorDialog";
 import TextInputDialog from "./TextInputDialog";

@ -70,18 +68,6 @@ export function createRedactEventDialog({
                const cli = MatrixClientPeg.safeGet();
                const withRelTypes: Pick<IRedactOpts, "with_rel_types"> = {};

-                // redact related events if this is a voice broadcast started event and
-                // server has support for relation based redactions
-                if (isVoiceBroadcastStartedEvent(mxEvent)) {
-                    const relationBasedRedactionsSupport = cli.canSupport.get(Feature.RelationBasedRedactions);
-                    if (
-                        relationBasedRedactionsSupport &&
-                        relationBasedRedactionsSupport !== ServerSupport.Unsupported
-                    ) {
-                        withRelTypes.with_rel_types = [RelationType.Reference];
-                    }
-                }
-
                try {
                    onCloseDialog?.();
                    await cli.redactEvent(roomId, eventId, undefined, {
--- a/src/components/views/dialogs/DevtoolsDialog.tsx
+++ b/src/components/views/dialogs/DevtoolsDialog.tsx
@ -22,7 +22,6 @@ import { AccountDataExplorer, RoomAccountDataExplorer } from "./devtools/Account
 import SettingsFlag from "../elements/SettingsFlag";
 import { SettingLevel } from "../../../settings/SettingLevel";
 import ServerInfo from "./devtools/ServerInfo";
-import { Features } from "../../../settings/Settings";
 import CopyableText from "../elements/CopyableText";
 import RoomNotifications from "./devtools/RoomNotifications";

@ -100,7 +99,6 @@ const DevtoolsDialog: React.FC<IProps> = ({ roomId, threadRootId, onFinished })
                    <SettingsFlag name="developerMode" level={SettingLevel.ACCOUNT} />
                    <SettingsFlag name="showHiddenEventsInTimeline" level={SettingLevel.DEVICE} />
                    <SettingsFlag name="enableWidgetScreenshots" level={SettingLevel.ACCOUNT} />
-                    <SettingsFlag name={Features.VoiceBroadcastForceSmallChunks} level={SettingLevel.DEVICE} />
                </div>
            </BaseTool>
        );
--- a/src/components/views/dialogs/ShareDialog.tsx
+++ b/src/components/views/dialogs/ShareDialog.tsx
@ -7,22 +7,23 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */

-import * as React from "react";
+import React, { JSX, useMemo, useRef, useState } from "react";
 import { Room, RoomMember, MatrixEvent, User } from "matrix-js-sdk/src/matrix";
+import { Checkbox, Button } from "@vector-im/compound-web";
+import LinkIcon from "@vector-im/compound-design-tokens/assets/web/icons/link";
+import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";

 import { _t } from "../../../languageHandler";
 import QRCode from "../elements/QRCode";
 import { RoomPermalinkCreator, makeUserPermalink } from "../../../utils/permalinks/Permalinks";
-import { selectText } from "../../../utils/strings";
-import StyledCheckbox from "../elements/StyledCheckbox";
-import SettingsStore from "../../../settings/SettingsStore";
+import { copyPlaintext } from "../../../utils/strings";
 import { UIFeature } from "../../../settings/UIFeature";
 import BaseDialog from "./BaseDialog";
-import CopyableText from "../elements/CopyableText";
 import { XOR } from "../../../@types/common";
+import { useSettingValue } from "../../../hooks/useSettings.ts";

 /* eslint-disable @typescript-eslint/no-require-imports */
-const socials = [
+const SOCIALS = [
    {
        name: "Facebook",
        img: require("../../../../res/img/social/facebook.png"),
@ -33,11 +34,7 @@ const socials = [
        img: require("../../../../res/img/social/twitter-2.png"),
        url: (url: string) => `https://twitter.com/home?status=${url}`,
    },
-    /* // icon missing
-        name: 'Google Plus',
-        img: 'img/social/',
-        url: (url) => `https://plus.google.com/share?url=${url}`,
-    },*/ {
+    {
        name: "LinkedIn",
        img: require("../../../../res/img/social/linkedin.png"),
        url: (url: string) => `https://www.linkedin.com/shareArticle?mini=true&url=${url}`,
@ -78,160 +75,153 @@ interface Props extends BaseProps {
     * A <u>matrix.to</u> link will be generated out of it if it's not already a url.
     */
    target: Room | User | RoomMember | URL;
+    /**
+     * Optional when the target is a Room, User, RoomMember or a URL.
+     * Mandatory when the target is a MatrixEvent.
+     */
    permalinkCreator?: RoomPermalinkCreator;
 }

 interface EventProps extends BaseProps {
+    /**
+     * The target to link to.
+     */
    target: MatrixEvent;
+    /**
+     * Optional when the target is a Room, User, RoomMember or a URL.
+     * Mandatory when the target is a MatrixEvent.
+     */
    permalinkCreator: RoomPermalinkCreator;
 }

-interface IState {
-    linkSpecificEvent: boolean;
-    permalinkCreator: RoomPermalinkCreator | null;
-}
+type ShareDialogProps = XOR<Props, EventProps>;

-export default class ShareDialog extends React.PureComponent<XOR<Props, EventProps>, IState> {
-    public constructor(props: XOR<Props, EventProps>) {
-        super(props);
+/**
+ * A dialog to share a link to a room, user, room member or a matrix event.
+ */
+export function ShareDialog({ target, customTitle, onFinished, permalinkCreator }: ShareDialogProps): JSX.Element {
+    const showQrCode = useSettingValue<boolean>(UIFeature.ShareQRCode);
+    const showSocials = useSettingValue<boolean>(UIFeature.ShareSocial);

-        let permalinkCreator: RoomPermalinkCreator | null = null;
-        if (props.target instanceof Room) {
-            permalinkCreator = new RoomPermalinkCreator(props.target);
-            permalinkCreator.load();
-        }
+    const timeoutIdRef = useRef<number>();
+    const [isCopied, setIsCopied] = useState(false);

-        this.state = {
-            // MatrixEvent defaults to share linkSpecificEvent
-            linkSpecificEvent: this.props.target instanceof MatrixEvent,
-            permalinkCreator,
-        };
-    }
-
-    public static onLinkClick(e: React.MouseEvent): void {
-        e.preventDefault();
-        selectText(e.currentTarget);
-    }
-
-    private onLinkSpecificEventCheckboxClick = (): void => {
-        this.setState({
-            linkSpecificEvent: !this.state.linkSpecificEvent,
-        });
-    };
-
-    private getUrl(): string {
-        if (this.props.target instanceof URL) {
-            return this.props.target.toString();
-        } else if (this.props.target instanceof Room) {
-            if (this.state.linkSpecificEvent) {
-                const events = this.props.target.getLiveTimeline().getEvents();
-                return this.state.permalinkCreator!.forEvent(events[events.length - 1].getId()!);
-            } else {
-                return this.state.permalinkCreator!.forShareableRoom();
-            }
-        } else if (this.props.target instanceof User || this.props.target instanceof RoomMember) {
-            return makeUserPermalink(this.props.target.userId);
-        } else if (this.state.linkSpecificEvent) {
-            return this.props.permalinkCreator!.forEvent(this.props.target.getId()!);
-        } else {
-            return this.props.permalinkCreator!.forShareableRoom();
-        }
-    }
-
-    public render(): React.ReactNode {
-        let title: string | undefined;
-        let checkbox: JSX.Element | undefined;
-
-        if (this.props.target instanceof URL) {
-            title = this.props.customTitle ?? _t("share|title_link");
-        } else if (this.props.target instanceof Room) {
-            title = this.props.customTitle ?? _t("share|title_room");
-
-            const events = this.props.target.getLiveTimeline().getEvents();
-            if (events.length > 0) {
-                checkbox = (
-                    <div>
-                        <StyledCheckbox
-                            checked={this.state.linkSpecificEvent}
-                            onChange={this.onLinkSpecificEventCheckboxClick}
-                        >
-                            {_t("share|permalink_most_recent")}
-                        </StyledCheckbox>
-                    </div>
-                );
-            }
-        } else if (this.props.target instanceof User || this.props.target instanceof RoomMember) {
-            title = this.props.customTitle ?? _t("share|title_user");
-        } else if (this.props.target instanceof MatrixEvent) {
-            title = this.props.customTitle ?? _t("share|title_message");
-            checkbox = (
-                <div>
-                    <StyledCheckbox
-                        checked={this.state.linkSpecificEvent}
-                        onChange={this.onLinkSpecificEventCheckboxClick}
-                    >
-                        {_t("share|permalink_message")}
-                    </StyledCheckbox>
-                </div>
-            );
-        }
-
-        const matrixToUrl = this.getUrl();
-        const encodedUrl = encodeURIComponent(matrixToUrl);
-
-        const showQrCode = SettingsStore.getValue(UIFeature.ShareQRCode);
-        const showSocials = SettingsStore.getValue(UIFeature.ShareSocial);
-
-        let qrSocialSection;
-        if (showQrCode || showSocials) {
-            qrSocialSection = (
-                <>
-                    <hr />
-                    <div className="mx_ShareDialog_split">
-                        {showQrCode && (
-                            <div className="mx_ShareDialog_qrcode_container">
-                                <QRCode data={matrixToUrl} width={256} />
-                            </div>
-                        )}
-                        {showSocials && (
-                            <div className="mx_ShareDialog_social_container">
-                                {socials.map((social) => (
-                                    <a
-                                        rel="noreferrer noopener"
-                                        target="_blank"
-                                        key={social.name}
-                                        title={social.name}
-                                        href={social.url(encodedUrl)}
-                                        className="mx_ShareDialog_social_icon"
-                                    >
-                                        <img src={social.img} alt={social.name} height={64} width={64} />
-                                    </a>
-                                ))}
-                            </div>
-                        )}
-                    </div>
-                </>
-            );
-        }
+    const [linkToSpecificEvent, setLinkToSpecificEvent] = useState(target instanceof MatrixEvent);
+    const { title, url, checkboxLabel } = useTargetValues(target, linkToSpecificEvent, permalinkCreator);
+    const newTitle = customTitle ?? title;

    return (
        <BaseDialog
-                title={title}
+            title={newTitle}
            className="mx_ShareDialog"
            contentId="mx_Dialog_content"
-                onFinished={this.props.onFinished}
+            onFinished={onFinished}
+            fixedWidth={false}
        >
-                {this.props.subtitle && <p>{this.props.subtitle}</p>}
            <div className="mx_ShareDialog_content">
-                    <CopyableText getTextToCopy={() => matrixToUrl}>
-                        <a title={_t("share|link_title")} href={matrixToUrl} onClick={ShareDialog.onLinkClick}>
-                            {matrixToUrl}
-                        </a>
-                    </CopyableText>
-                    {checkbox}
-                    {qrSocialSection}
+                <div className="mx_ShareDialog_top">
+                    {showQrCode && <QRCode data={url} width={200} />}
+                    <span>{url}</span>
+                </div>
+                {checkboxLabel && (
+                    <label>
+                        <Checkbox
+                            defaultChecked={linkToSpecificEvent}
+                            onChange={(evt) => setLinkToSpecificEvent(evt.target.checked)}
+                        />
+                        {checkboxLabel}
+                    </label>
+                )}
+                <Button
+                    Icon={isCopied ? CheckIcon : LinkIcon}
+                    onClick={async () => {
+                        clearTimeout(timeoutIdRef.current);
+                        await copyPlaintext(url);
+                        setIsCopied(true);
+                        timeoutIdRef.current = setTimeout(() => setIsCopied(false), 2000);
+                    }}
+                >
+                    {isCopied ? _t("share|link_copied") : _t("action|copy_link")}
+                </Button>
+                {showSocials && <SocialLinks url={url} />}
            </div>
        </BaseDialog>
    );
 }
+
+/**
+ * Social links to share the link on different platforms.
+ */
+interface SocialLinksProps {
+    /**
+     * The URL to share.
+     */
+    url: string;
+}
+
+/**
+ * The socials to share the link on.
+ */
+function SocialLinks({ url }: SocialLinksProps): JSX.Element {
+    return (
+        <div className="mx_ShareDialog_social">
+            {SOCIALS.map((social) => (
+                <a
+                    key={social.name}
+                    href={social.url(url)}
+                    target="_blank"
+                    rel="noreferrer noopener"
+                    title={social.name}
+                >
+                    <img src={social.img} alt={social.name} />
+                </a>
+            ))}
+        </div>
+    );
+}
+
+/**
+ * Get the title, url and checkbox label for the dialog based on the target.
+ * @param target
+ * @param linkToSpecificEvent
+ * @param permalinkCreator
+ */
+function useTargetValues(
+    target: ShareDialogProps["target"],
+    linkToSpecificEvent: boolean,
+    permalinkCreator?: RoomPermalinkCreator,
+): { title: string; url: string; checkboxLabel?: string } {
+    return useMemo(() => {
+        if (target instanceof URL) return { title: _t("share|title_link"), url: target.toString() };
+        if (target instanceof User || target instanceof RoomMember)
+            return {
+                title: _t("share|title_user"),
+                url: makeUserPermalink(target.userId),
+            };
+
+        if (target instanceof Room) {
+            const title = _t("share|title_room");
+            const newPermalinkCreator = new RoomPermalinkCreator(target);
+            newPermalinkCreator.load();
+
+            const events = target.getLiveTimeline().getEvents();
+            return {
+                title,
+                url: linkToSpecificEvent
+                    ? newPermalinkCreator.forEvent(events[events.length - 1].getId()!)
+                    : newPermalinkCreator.forShareableRoom(),
+                ...(events.length > 0 && { checkboxLabel: _t("share|permalink_most_recent") }),
+            };
+        }
+
+        // MatrixEvent is remaining and should have a permalinkCreator
+        const url = linkToSpecificEvent
+            ? permalinkCreator!.forEvent(target.getId()!)
+            : permalinkCreator!.forShareableRoom();
+        return {
+            title: _t("share|title_message"),
+            url,
+            checkboxLabel: _t("share|permalink_message"),
+        };
+    }, [target, linkToSpecificEvent, permalinkCreator]);
 }
--- a/src/components/views/elements/AppTile.tsx
+++ b/src/components/views/elements/AppTile.tsx
@ -116,7 +116,7 @@ interface IState {

 export default class AppTile extends React.Component<IProps, IState> {
    public static contextType = MatrixClientContext;
-    public declare context: ContextType<typeof MatrixClientContext>;
+    declare public context: ContextType<typeof MatrixClientContext>;

    public static defaultProps: Partial<IProps> = {
        waitForIframeLoad: true,
--- a/src/components/views/elements/EventListSummary.tsx
+++ b/src/components/views/elements/EventListSummary.tsx
@ -73,7 +73,7 @@ export default class EventListSummary extends React.Component<
    IProps & Required<Pick<IProps, "summaryLength" | "threshold" | "avatarsMaxLength" | "layout">>
 > {
    public static contextType = RoomContext;
-    public declare context: React.ContextType<typeof RoomContext>;
+    declare public context: React.ContextType<typeof RoomContext>;

    public static defaultProps = {
        summaryLength: 1,
--- a/src/components/views/elements/MiniAvatarUploader.tsx
+++ b/src/components/views/elements/MiniAvatarUploader.tsx
@ -12,12 +12,12 @@ import React, { useContext, useRef, useState, MouseEvent, ReactNode } from "reac
 import { Tooltip } from "@vector-im/compound-web";

 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import RoomContext from "../../../contexts/RoomContext";
 import { useTimeout } from "../../../hooks/useTimeout";
 import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
 import AccessibleButton from "./AccessibleButton";
 import Spinner from "./Spinner";
 import { getFileChanged } from "../settings/AvatarSetting.tsx";
+import { useScopedRoomContext } from "../../../contexts/ScopedRoomContext.tsx";

 export const AVATAR_SIZE = "52px";

@ -56,7 +56,7 @@ const MiniAvatarUploader: React.FC<IProps> = ({

    const label = hasAvatar || busy ? hasAvatarLabel : noAvatarLabel;

-    const { room } = useContext(RoomContext);
+    const { room } = useScopedRoomContext("room");
    const canSetAvatar =
        isUserAvatar || room?.currentState?.maySendStateEvent(EventType.RoomAvatar, cli.getSafeUserId());
    if (!canSetAvatar) return <React.Fragment>{children}</React.Fragment>;
--- a/src/components/views/elements/PersistentApp.tsx
+++ b/src/components/views/elements/PersistentApp.tsx
@ -25,7 +25,7 @@ interface IProps {

 export default class PersistentApp extends React.Component<IProps> {
    public static contextType = MatrixClientContext;
-    public declare context: ContextType<typeof MatrixClientContext>;
+    declare public context: ContextType<typeof MatrixClientContext>;
    private room: Room;

    public constructor(props: IProps, context: ContextType<typeof MatrixClientContext>) {
--- a/src/components/views/elements/ReplyChain.tsx
+++ b/src/components/views/elements/ReplyChain.tsx
@ -65,7 +65,7 @@ interface IState {
 // be low as each event being loaded (after the first) is triggered by an explicit user action.
 export default class ReplyChain extends React.Component<IProps, IState> {
    public static contextType = RoomContext;
-    public declare context: React.ContextType<typeof RoomContext>;
+    declare public context: React.ContextType<typeof RoomContext>;

    private unmounted = false;
    private room: Room;
--- a/src/components/views/elements/RoomAliasField.tsx
+++ b/src/components/views/elements/RoomAliasField.tsx
@ -33,7 +33,7 @@ interface IState {
 // Controlled form component wrapping Field for inputting a room alias scoped to a given domain
 export default class RoomAliasField extends React.PureComponent<IProps, IState> {
    public static contextType = MatrixClientContext;
-    public declare context: React.ContextType<typeof MatrixClientContext>;
+    declare public context: React.ContextType<typeof MatrixClientContext>;

    private fieldRef = createRef<Field>();

--- a/src/components/views/emojipicker/ReactionPicker.tsx
+++ b/src/components/views/emojipicker/ReactionPicker.tsx
@ -29,7 +29,7 @@ interface IState {

 class ReactionPicker extends React.Component<IProps, IState> {
    public static contextType = RoomContext;
-    public declare context: React.ContextType<typeof RoomContext>;
+    declare public context: React.ContextType<typeof RoomContext>;

    public constructor(props: IProps, context: React.ContextType<typeof RoomContext>) {
        super(props, context);
--- a/src/components/views/emojipicker/Search.tsx
+++ b/src/components/views/emojipicker/Search.tsx
@ -23,7 +23,7 @@ interface IProps {

 class Search extends React.PureComponent<IProps> {
    public static contextType = RovingTabIndexContext;
-    public declare context: React.ContextType<typeof RovingTabIndexContext>;
+    declare public context: React.ContextType<typeof RovingTabIndexContext>;

    private inputRef = React.createRef<HTMLInputElement>();

--- a/src/components/views/location/LocationPicker.tsx
+++ b/src/components/views/location/LocationPicker.tsx
@ -42,7 +42,7 @@ const isSharingOwnLocation = (shareType: LocationShareType): boolean =>

 class LocationPicker extends React.Component<ILocationPickerProps, IState> {
    public static contextType = MatrixClientContext;
-    public declare context: React.ContextType<typeof MatrixClientContext>;
+    declare public context: React.ContextType<typeof MatrixClientContext>;
    private map?: maplibregl.Map;
    private geolocate?: maplibregl.GeolocateControl;
    private marker?: maplibregl.Marker;
--- a/src/components/views/messages/EditHistoryMessage.tsx
+++ b/src/components/views/messages/EditHistoryMessage.tsx
@ -45,7 +45,7 @@ interface IState {

 export default class EditHistoryMessage extends React.PureComponent<IProps, IState> {
    public static contextType = MatrixClientContext;
-    public declare context: React.ContextType<typeof MatrixClientContext>;
+    declare public context: React.ContextType<typeof MatrixClientContext>;

    private content = createRef<HTMLDivElement>();
    private pills = new ReactRootManager();
--- a/src/components/views/messages/MAudioBody.tsx
+++ b/src/components/views/messages/MAudioBody.tsx
@ -30,7 +30,7 @@ interface IState {

 export default class MAudioBody extends React.PureComponent<IBodyProps, IState> {
    public static contextType = RoomContext;
-    public declare context: React.ContextType<typeof RoomContext>;
+    declare public context: React.ContextType<typeof RoomContext>;

    public state: IState = {};

--- a/src/components/views/messages/MFileBody.tsx
+++ b/src/components/views/messages/MFileBody.tsx
@ -102,7 +102,7 @@ interface IState {

 export default class MFileBody extends React.Component<IProps, IState> {
    public static contextType = RoomContext;
-    public declare context: React.ContextType<typeof RoomContext>;
+    declare public context: React.ContextType<typeof RoomContext>;

    public state: IState = {};

--- a/src/components/views/messages/MImageBody.tsx
+++ b/src/components/views/messages/MImageBody.tsx
@ -51,13 +51,14 @@ interface IState {
        naturalHeight: number;
    };
    hover: boolean;
+    focus: boolean;
    showImage: boolean;
    placeholder: Placeholder;
 }

 export default class MImageBody extends React.Component<IBodyProps, IState> {
    public static contextType = RoomContext;
-    public declare context: React.ContextType<typeof RoomContext>;
+    declare public context: React.ContextType<typeof RoomContext>;

    private unmounted = false;
    private image = createRef<HTMLImageElement>();
@ -71,6 +72,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
        imgError: false,
        imgLoaded: false,
        hover: false,
+        focus: false,
        showImage: SettingsStore.getValue("showImages"),
        placeholder: Placeholder.NoImage,
    };
@ -120,30 +122,29 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
        }
    };

-    protected onImageEnter = (e: React.MouseEvent<HTMLImageElement>): void => {
-        this.setState({ hover: true });
-
-        if (
+    private get shouldAutoplay(): boolean {
+        return !(
            !this.state.contentUrl ||
            !this.state.showImage ||
            !this.state.isAnimated ||
            SettingsStore.getValue("autoplayGifs")
-        ) {
-            return;
+        );
    }
-        const imgElement = e.currentTarget;
-        imgElement.src = this.state.contentUrl;
+
+    protected onImageEnter = (): void => {
+        this.setState({ hover: true });
    };

-    protected onImageLeave = (e: React.MouseEvent<HTMLImageElement>): void => {
+    protected onImageLeave = (): void => {
        this.setState({ hover: false });
+    };

-        const url = this.state.thumbUrl ?? this.state.contentUrl;
-        if (!url || !this.state.showImage || !this.state.isAnimated || SettingsStore.getValue("autoplayGifs")) {
-            return;
-        }
-        const imgElement = e.currentTarget;
-        imgElement.src = url;
+    private onFocus = (): void => {
+        this.setState({ focus: true });
+    };
+
+    private onBlur = (): void => {
+        this.setState({ focus: false });
    };

    private reconnectedListener = createReconnectedListener((): void => {
@ -470,14 +471,20 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {

        let showPlaceholder = Boolean(placeholder);

+        const hoverOrFocus = this.state.hover || this.state.focus;
        if (thumbUrl && !this.state.imgError) {
+            let url = thumbUrl;
+            if (hoverOrFocus && this.shouldAutoplay) {
+                url = this.state.contentUrl!;
+            }
+
            // Restrict the width of the thumbnail here, otherwise it will fill the container
            // which has the same width as the timeline
            // mx_MImageBody_thumbnail resizes img to exactly container size
            img = (
                <img
                    className="mx_MImageBody_thumbnail"
-                    src={thumbUrl}
+                    src={url}
                    ref={this.image}
                    alt={content.body}
                    onError={this.onImageError}
@ -493,13 +500,13 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
            showPlaceholder = false; // because we're hiding the image, so don't show the placeholder.
        }

-        if (this.state.isAnimated && !SettingsStore.getValue("autoplayGifs") && !this.state.hover) {
+        if (this.state.isAnimated && !SettingsStore.getValue("autoplayGifs") && !hoverOrFocus) {
            // XXX: Arguably we may want a different label when the animated image is WEBP and not GIF
            gifLabel = <p className="mx_MImageBody_gifLabel">GIF</p>;
        }

        let banner: ReactNode | undefined;
-        if (this.state.showImage && this.state.hover) {
+        if (this.state.showImage && hoverOrFocus) {
            banner = this.getBanner(content);
        }

@ -568,7 +575,13 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
    protected wrapImage(contentUrl: string | null | undefined, children: JSX.Element): ReactNode {
        if (contentUrl) {
            return (
-                <a href={contentUrl} target={this.props.forExport ? "_blank" : undefined} onClick={this.onClick}>
+                <a
+                    href={contentUrl}
+                    target={this.props.forExport ? "_blank" : undefined}
+                    onClick={this.onClick}
+                    onFocus={this.onFocus}
+                    onBlur={this.onBlur}
+                >
                    {children}
                </a>
            );
@ -657,17 +670,14 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
 }

 interface PlaceholderIProps {
-    hover?: boolean;
    maxWidth?: number;
 }

 export class HiddenImagePlaceholder extends React.PureComponent<PlaceholderIProps> {
    public render(): React.ReactNode {
        const maxWidth = this.props.maxWidth ? this.props.maxWidth + "px" : null;
-        let className = "mx_HiddenImagePlaceholder";
-        if (this.props.hover) className += " mx_HiddenImagePlaceholder_hover";
        return (
-            <div className={className} style={{ maxWidth: `min(100%, ${maxWidth}px)` }}>
+            <div className="mx_HiddenImagePlaceholder" style={{ maxWidth: `min(100%, ${maxWidth}px)` }}>
                <div className="mx_HiddenImagePlaceholder_button">
                    <span className="mx_HiddenImagePlaceholder_eye" />
                    <span>{_t("timeline|m.image|show_image")}</span>
--- a/src/components/views/messages/MLocationBody.tsx
+++ b/src/components/views/messages/MLocationBody.tsx
@ -30,7 +30,7 @@ interface IState {

 export default class MLocationBody extends React.Component<IBodyProps, IState> {
    public static contextType = MatrixClientContext;
-    public declare context: React.ContextType<typeof MatrixClientContext>;
+    declare public context: React.ContextType<typeof MatrixClientContext>;

    private unmounted = false;
    private mapId: string;
--- a/src/components/views/messages/MPollBody.tsx
+++ b/src/components/views/messages/MPollBody.tsx
@ -139,7 +139,7 @@ export function launchPollEditor(mxEvent: MatrixEvent, getRelationsForEvent?: Ge

 export default class MPollBody extends React.Component<IBodyProps, IState> {
    public static contextType = MatrixClientContext;
-    public declare context: React.ContextType<typeof MatrixClientContext>;
+    declare public context: React.ContextType<typeof MatrixClientContext>;
    private seenEventIds: string[] = []; // Events we have already seen

    public constructor(props: IBodyProps, context: React.ContextType<typeof MatrixClientContext>) {
--- a/src/components/views/messages/MVideoBody.tsx
+++ b/src/components/views/messages/MVideoBody.tsx
@ -34,7 +34,7 @@ interface IState {

 export default class MVideoBody extends React.PureComponent<IBodyProps, IState> {
    public static contextType = RoomContext;
-    public declare context: React.ContextType<typeof RoomContext>;
+    declare public context: React.ContextType<typeof RoomContext>;

    private videoRef = React.createRef<HTMLVideoElement>();
    private sizeWatcher?: string;
--- a/src/components/views/messages/MessageActionBar.tsx
+++ b/src/components/views/messages/MessageActionBar.tsx
@ -58,7 +58,6 @@ import { ALTERNATE_KEY_NAME } from "../../../accessibility/KeyboardShortcuts";
 import { Action } from "../../../dispatcher/actions";
 import { ShowThreadPayload } from "../../../dispatcher/payloads/ShowThreadPayload";
 import { GetRelationsForEvent, IEventTileType } from "../rooms/EventTile";
-import { VoiceBroadcastInfoEventType } from "../../../voice-broadcast/types";
 import { ButtonEvent } from "../elements/AccessibleButton";
 import PinningUtils from "../../../utils/PinningUtils";
 import PosthogTrackers from "../../../PosthogTrackers.ts";
@ -262,7 +261,7 @@ interface IMessageActionBarProps {

 export default class MessageActionBar extends React.PureComponent<IMessageActionBarProps> {
    public static contextType = RoomContext;
-    public declare context: React.ContextType<typeof RoomContext>;
+    declare public context: React.ContextType<typeof RoomContext>;

    public componentDidMount(): void {
        if (this.props.mxEvent.status && this.props.mxEvent.status !== EventStatus.SENT) {
@ -354,8 +353,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
             * until cross-platform support
             * (PSF-1041)
             */
-            !M_BEACON_INFO.matches(this.props.mxEvent.getType()) &&
-            !(this.props.mxEvent.getType() === VoiceBroadcastInfoEventType);
+            !M_BEACON_INFO.matches(this.props.mxEvent.getType());

        return inNotThreadTimeline && isAllowedMessageType;
    }
--- a/src/components/views/messages/MessageEvent.tsx
+++ b/src/components/views/messages/MessageEvent.tsx
@ -41,7 +41,6 @@ import MjolnirBody from "./MjolnirBody";
 import MBeaconBody from "./MBeaconBody";
 import { DecryptionFailureBody } from "./DecryptionFailureBody";
 import { GetRelationsForEvent, IEventTileOps } from "../rooms/EventTile";
-import { VoiceBroadcastBody, VoiceBroadcastInfoEventType, VoiceBroadcastInfoState } from "../../../voice-broadcast";

 // onMessageAllowed is handled internally
 interface IProps extends Omit<IBodyProps, "onMessageAllowed" | "mediaEventHelper"> {
@ -85,7 +84,7 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
    private evTypes = new Map<string, React.ComponentType<IBodyProps>>(baseEvTypes.entries());

    public static contextType = MatrixClientContext;
-    public declare context: React.ContextType<typeof MatrixClientContext>;
+    declare public context: React.ContextType<typeof MatrixClientContext>;

    public constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
        super(props, context);
@ -276,10 +275,6 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
            if (M_LOCATION.matches(type) || (type === EventType.RoomMessage && msgtype === MsgType.Location)) {
                BodyType = MLocationBody;
            }
-
-            if (type === VoiceBroadcastInfoEventType && content?.state === VoiceBroadcastInfoState.Started) {
-                BodyType = VoiceBroadcastBody;
-            }
        }

        if (SettingsStore.getValue("feature_mjolnir")) {
--- a/src/components/views/messages/ReactionsRow.tsx
+++ b/src/components/views/messages/ReactionsRow.tsx
@ -75,7 +75,7 @@ interface IState {

 export default class ReactionsRow extends React.PureComponent<IProps, IState> {
    public static contextType = RoomContext;
-    public declare context: React.ContextType<typeof RoomContext>;
+    declare public context: React.ContextType<typeof RoomContext>;

    public constructor(props: IProps, context: React.ContextType<typeof RoomContext>) {
        super(props, context);
--- a/src/components/views/messages/ReactionsRowButton.tsx
+++ b/src/components/views/messages/ReactionsRowButton.tsx
@ -38,7 +38,7 @@ export interface IProps {

 export default class ReactionsRowButton extends React.PureComponent<IProps> {
    public static contextType = MatrixClientContext;
-    public declare context: React.ContextType<typeof MatrixClientContext>;
+    declare public context: React.ContextType<typeof MatrixClientContext>;

    public onClick = (): void => {
        const { mxEvent, myReactionEvent, content } = this.props;
--- a/src/components/views/messages/ReactionsRowButtonTooltip.tsx
+++ b/src/components/views/messages/ReactionsRowButtonTooltip.tsx
@ -28,7 +28,7 @@ interface IProps {

 export default class ReactionsRowButtonTooltip extends React.PureComponent<PropsWithChildren<IProps>> {
    public static contextType = MatrixClientContext;
-    public declare context: React.ContextType<typeof MatrixClientContext>;
+    declare public context: React.ContextType<typeof MatrixClientContext>;

    public render(): React.ReactNode {
        const { content, reactionEvents, mxEvent, children } = this.props;
--- a/src/components/views/messages/RoomPredecessorTile.tsx
+++ b/src/components/views/messages/RoomPredecessorTile.tsx
@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */

-import React, { useCallback, useContext } from "react";
+import React, { useCallback } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { MatrixEvent, Room, RoomState } from "matrix-js-sdk/src/matrix";

@ -18,10 +18,10 @@ import { _t } from "../../../languageHandler";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import EventTileBubble from "./EventTileBubble";
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
-import RoomContext from "../../../contexts/RoomContext";
 import { useRoomState } from "../../../hooks/useRoomState";
 import SettingsStore from "../../../settings/SettingsStore";
 import MatrixToPermalinkConstructor from "../../../utils/permalinks/MatrixToPermalinkConstructor";
+import { useScopedRoomContext } from "../../../contexts/ScopedRoomContext.tsx";

 interface IProps {
    /** The m.room.create MatrixEvent that this tile represents */
@ -40,7 +40,7 @@ export const RoomPredecessorTile: React.FC<IProps> = ({ mxEvent, timestamp }) =>
    // the information inside mxEvent. This allows us the flexibility later to
    // use a different predecessor (e.g. through MSC3946) and still display it
    // in the timeline location of the create event.
-    const roomContext = useContext(RoomContext);
+    const roomContext = useScopedRoomContext("room");
    const predecessor = useRoomState(
        roomContext.room,
        useCallback(
--- a/src/components/views/messages/TextualBody.tsx
+++ b/src/components/views/messages/TextualBody.tsx
@ -52,10 +52,8 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
    private tooltips = new ReactRootManager();
    private reactRoots = new ReactRootManager();

-    private ref = createRef<HTMLDivElement>();
-
    public static contextType = RoomContext;
-    public declare context: React.ContextType<typeof RoomContext>;
+    declare public context: React.ContextType<typeof RoomContext>;

    public state = {
        links: [],
@ -86,7 +84,7 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {

        if (this.props.mxEvent.getContent().format === "org.matrix.custom.html") {
            // Handle expansion and add buttons
-            const pres = this.ref.current?.getElementsByTagName("pre");
+            const pres = [...content.getElementsByTagName("pre")];
            if (pres && pres.length > 0) {
                for (let i = 0; i < pres.length; i++) {
                    // If there already is a div wrapping the codeblock we want to skip this.
@ -115,13 +113,14 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
        root.className = "mx_EventTile_pre_container";

        // Insert containing div in place of <pre> block
-        pre.parentNode?.replaceChild(root, pre);
+        pre.replaceWith(root);

        this.reactRoots.render(
            <StrictMode>
                <CodeBlock onHeightChanged={this.props.onHeightChanged}>{pre}</CodeBlock>
            </StrictMode>,
            root,
+            pre,
        );
    }

@ -196,10 +195,9 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
                    </StrictMode>
                );

-                this.reactRoots.render(spoiler, spoilerContainer);
-
-                node.parentNode?.replaceChild(spoilerContainer, node);
+                this.reactRoots.render(spoiler, spoilerContainer, node);

+                node.replaceWith(spoilerContainer);
                node = spoilerContainer;
            }

@ -479,12 +477,7 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {

        if (isEmote) {
            return (
-                <div
-                    className="mx_MEmoteBody mx_EventTile_content"
-                    onClick={this.onBodyLinkClick}
-                    dir="auto"
-                    ref={this.ref}
-                >
+                <div className="mx_MEmoteBody mx_EventTile_content" onClick={this.onBodyLinkClick} dir="auto">
                    *&nbsp;
                    <span className="mx_MEmoteBody_sender" onClick={this.onEmoteSenderClick}>
                        {mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender()}
@ -497,7 +490,7 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
        }
        if (isNotice) {
            return (
-                <div className="mx_MNoticeBody mx_EventTile_content" onClick={this.onBodyLinkClick} ref={this.ref}>
+                <div className="mx_MNoticeBody mx_EventTile_content" onClick={this.onBodyLinkClick}>
                    {body}
                    {widgets}
                </div>
@ -505,14 +498,14 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
        }
        if (isCaption) {
            return (
-                <div className="mx_MTextBody mx_EventTile_caption" onClick={this.onBodyLinkClick} ref={this.ref}>
+                <div className="mx_MTextBody mx_EventTile_caption" onClick={this.onBodyLinkClick}>
                    {body}
                    {widgets}
                </div>
            );
        }
        return (
-            <div className="mx_MTextBody mx_EventTile_content" onClick={this.onBodyLinkClick} ref={this.ref}>
+            <div className="mx_MTextBody mx_EventTile_content" onClick={this.onBodyLinkClick}>
                {body}
                {widgets}
            </div>
--- a/src/components/views/messages/TextualEvent.tsx
+++ b/src/components/views/messages/TextualEvent.tsx
@ -19,7 +19,7 @@ interface IProps {

 export default class TextualEvent extends React.Component<IProps> {
    public static contextType = RoomContext;
-    public declare context: React.ContextType<typeof RoomContext>;
+    declare public context: React.ContextType<typeof RoomContext>;

    public render(): React.ReactNode {
        const text = TextForEvent.textForEvent(
--- a/src/components/views/right_panel/PinnedMessagesCard.tsx
+++ b/src/components/views/right_panel/PinnedMessagesCard.tsx
@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */

-import React, { useCallback, useEffect, JSX } from "react";
+import React, { useCallback, useEffect, JSX, useContext } from "react";
 import { Room, MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { Button, Separator } from "@vector-im/compound-web";
 import classNames from "classnames";
@ -18,7 +18,7 @@ import Spinner from "../elements/Spinner";
 import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
 import { PinnedEventTile } from "../rooms/PinnedEventTile";
 import { useRoomState } from "../../../hooks/useRoomState";
-import RoomContext, { TimelineRenderingType, useRoomContext } from "../../../contexts/RoomContext";
+import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
 import { ReadPinsEventId } from "./types";
 import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 import { filterBoolean } from "../../../utils/arrays";
@ -27,6 +27,7 @@ import { UnpinAllDialog } from "../dialogs/UnpinAllDialog";
 import EmptyState from "./EmptyState";
 import { usePinnedEvents, useReadPinnedEvents, useSortedFetchedPinnedEvents } from "../../../hooks/usePinnedEvents";
 import PinningUtils from "../../../utils/PinningUtils.ts";
+import { ScopedRoomContextProvider } from "../../../contexts/ScopedRoomContext.tsx";

 /**
 * List the pinned messages in a room inside a Card.
@ -48,7 +49,7 @@ interface PinnedMessagesCardProps {

 export function PinnedMessagesCard({ room, onClose, permalinkCreator }: PinnedMessagesCardProps): JSX.Element {
    const cli = useMatrixClientContext();
-    const roomContext = useRoomContext();
+    const roomContext = useContext(RoomContext);
    const pinnedEventIds = usePinnedEvents(room);
    const readPinnedEvents = useReadPinnedEvents(room);
    const pinnedEvents = useSortedFetchedPinnedEvents(room, pinnedEventIds);
@ -89,14 +90,9 @@ export function PinnedMessagesCard({ room, onClose, permalinkCreator }: PinnedMe
            className="mx_PinnedMessagesCard"
            onClose={onClose}
        >
-            <RoomContext.Provider
-                value={{
-                    ...roomContext,
-                    timelineRenderingType: TimelineRenderingType.Pinned,
-                }}
-            >
+            <ScopedRoomContextProvider {...roomContext} timelineRenderingType={TimelineRenderingType.Pinned}>
                {content}
-            </RoomContext.Provider>
+            </ScopedRoomContextProvider>
        </BaseCard>
    );
 }
--- a/src/components/views/right_panel/RoomSummaryCard.tsx
+++ b/src/components/views/right_panel/RoomSummaryCard.tsx
@ -47,11 +47,11 @@ import RoomAvatar from "../avatars/RoomAvatar";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
 import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
 import Modal from "../../../Modal";
-import ShareDialog from "../dialogs/ShareDialog";
+import { ShareDialog } from "../dialogs/ShareDialog";
 import { useEventEmitterState } from "../../../hooks/useEventEmitter";
 import { E2EStatus } from "../../../utils/ShieldUtils";
 import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
-import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
+import { TimelineRenderingType } from "../../../contexts/RoomContext";
 import RoomName from "../elements/RoomName";
 import ExportDialog from "../dialogs/ExportDialog";
 import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
@ -76,6 +76,7 @@ import { useTransition } from "../../../hooks/useTransition";
 import { isVideoRoom as calcIsVideoRoom } from "../../../utils/video-rooms";
 import { usePinnedEvents } from "../../../hooks/usePinnedEvents";
 import { ReleaseAnnouncement } from "../../structures/ReleaseAnnouncement.tsx";
+import { useScopedRoomContext } from "../../../contexts/ScopedRoomContext.tsx";

 interface IProps {
    room: Room;
@ -86,7 +87,7 @@ interface IProps {
 }

 const onRoomMembersClick = (): void => {
-    RightPanelStore.instance.pushCard({ phase: RightPanelPhases.RoomMemberList }, true);
+    RightPanelStore.instance.pushCard({ phase: RightPanelPhases.MemberList }, true);
 };

 const onRoomThreadsClick = (): void => {
@ -232,7 +233,7 @@ const RoomSummaryCard: React.FC<IProps> = ({
    };

    const isRoomEncrypted = useIsEncrypted(cli, room);
-    const roomContext = useContext(RoomContext);
+    const roomContext = useScopedRoomContext("e2eStatus", "timelineRenderingType");
    const e2eStatus = roomContext.e2eStatus;
    const isVideoRoom = calcIsVideoRoom(room);

--- a/src/components/views/right_panel/TimelineCard.tsx
+++ b/src/components/views/right_panel/TimelineCard.tsx
@ -38,6 +38,7 @@ import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import Measured from "../elements/Measured";
 import { UPDATE_EVENT } from "../../../stores/AsyncStore";
 import { SdkContextClass } from "../../../contexts/SDKContext";
+import { ScopedRoomContextProvider } from "../../../contexts/ScopedRoomContext.tsx";

 interface IProps {
    room: Room;
@ -68,7 +69,7 @@ interface IState {

 export default class TimelineCard extends React.Component<IProps, IState> {
    public static contextType = RoomContext;
-    public declare context: React.ContextType<typeof RoomContext>;
+    declare public context: React.ContextType<typeof RoomContext>;

    private dispatcherRef?: string;
    private layoutWatcherRef?: string;
@ -199,13 +200,11 @@ export default class TimelineCard extends React.Component<IProps, IState> {
        const showComposer = myMembership === KnownMembership.Join;

        return (
-            <RoomContext.Provider
-                value={{
-                    ...this.context,
-                    timelineRenderingType: this.props.timelineRenderingType ?? this.context.timelineRenderingType,
-                    liveTimeline: this.props.timelineSet?.getLiveTimeline(),
-                    narrow: this.state.narrow,
-                }}
+            <ScopedRoomContextProvider
+                {...this.context}
+                timelineRenderingType={this.props.timelineRenderingType ?? this.context.timelineRenderingType}
+                liveTimeline={this.props.timelineSet?.getLiveTimeline()}
+                narrow={this.state.narrow}
            >
                <BaseCard
                    className={this.props.classNames}
@ -255,7 +254,7 @@ export default class TimelineCard extends React.Component<IProps, IState> {
                        />
                    )}
                </BaseCard>
-            </RoomContext.Provider>
+            </ScopedRoomContextProvider>
        );
    }
 }
--- a/src/components/views/right_panel/UserInfo.tsx
+++ b/src/components/views/right_panel/UserInfo.tsx
@ -63,7 +63,7 @@ import PowerSelector from "../elements/PowerSelector";
 import MemberAvatar from "../avatars/MemberAvatar";
 import PresenceLabel from "../rooms/PresenceLabel";
 import BulkRedactDialog from "../dialogs/BulkRedactDialog";
-import ShareDialog from "../dialogs/ShareDialog";
+import { ShareDialog } from "../dialogs/ShareDialog";
 import ErrorDialog from "../dialogs/ErrorDialog";
 import QuestionDialog from "../dialogs/QuestionDialog";
 import ConfirmUserActionDialog from "../dialogs/ConfirmUserActionDialog";
@ -1739,13 +1739,13 @@ export const UserInfoHeader: React.FC<{
 interface IProps {
    user: Member;
    room?: Room;
-    phase: RightPanelPhases.RoomMemberInfo | RightPanelPhases.SpaceMemberInfo | RightPanelPhases.EncryptionPanel;
+    phase: RightPanelPhases.MemberInfo | RightPanelPhases.EncryptionPanel;
    onClose(): void;
    verificationRequest?: VerificationRequest;
    verificationRequestPromise?: Promise<VerificationRequest>;
 }

-const UserInfo: React.FC<IProps> = ({ user, room, onClose, phase = RightPanelPhases.RoomMemberInfo, ...props }) => {
+const UserInfo: React.FC<IProps> = ({ user, room, onClose, phase = RightPanelPhases.MemberInfo, ...props }) => {
    const cli = useContext(MatrixClientContext);

    // fetch latest room member if we have a room, so we don't show historical information, falling back to user
@ -1767,8 +1767,6 @@ const UserInfo: React.FC<IProps> = ({ user, room, onClose, phase = RightPanelPha
    // We have no previousPhase for when viewing a UserInfo without a Room at this time
    if (room && phase === RightPanelPhases.EncryptionPanel) {
        cardState = { member };
-    } else if (room?.isSpaceRoom()) {
-        cardState = { spaceId: room.roomId };
    }

    const onEncryptionPanelClose = (): void => {
@ -1777,8 +1775,7 @@ const UserInfo: React.FC<IProps> = ({ user, room, onClose, phase = RightPanelPha

    let content: JSX.Element | undefined;
    switch (phase) {
-        case RightPanelPhases.RoomMemberInfo:
-        case RightPanelPhases.SpaceMemberInfo:
+        case RightPanelPhases.MemberInfo:
            content = (
                <BasicUserInfo
                    room={room as Room}
@ -1823,7 +1820,7 @@ const UserInfo: React.FC<IProps> = ({ user, room, onClose, phase = RightPanelPha
            closeLabel={closeLabel}
            cardState={cardState}
            onBack={(ev: ButtonEvent) => {
-                if (RightPanelStore.instance.previousCard.phase === RightPanelPhases.RoomMemberList) {
+                if (RightPanelStore.instance.previousCard.phase === RightPanelPhases.MemberList) {
                    PosthogTrackers.trackInteraction("WebRightPanelRoomUserInfoBackButton", ev);
                }
            }}
--- a/src/components/views/room_settings/AliasSettings.tsx
+++ b/src/components/views/room_settings/AliasSettings.tsx
@ -94,7 +94,7 @@ interface IState {

 export default class AliasSettings extends React.Component<IProps, IState> {
    public static contextType = MatrixClientContext;
-    public declare context: ContextType<typeof MatrixClientContext>;
+    declare public context: ContextType<typeof MatrixClientContext>;

    public static defaultProps = {
        canSetAliases: false,
--- a/src/components/views/rooms/Autocomplete.tsx
+++ b/src/components/views/rooms/Autocomplete.tsx
@ -49,7 +49,7 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
    private completionRefs: Record<string, RefObject<HTMLElement>> = {};

    public static contextType = RoomContext;
-    public declare context: React.ContextType<typeof RoomContext>;
+    declare public context: React.ContextType<typeof RoomContext>;

    public constructor(props: IProps, context: React.ContextType<typeof RoomContext>) {
        super(props, context);
--- a/src/components/views/rooms/EditMessageComposer.tsx
+++ b/src/components/views/rooms/EditMessageComposer.tsx
@ -43,25 +43,6 @@ import { attachMentions, attachRelation } from "./SendMessageComposer";
 import { filterBoolean } from "../../../utils/arrays";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";

-function getHtmlReplyFallback(mxEvent: MatrixEvent): string {
-    const html = mxEvent.getContent().formatted_body;
-    if (!html) {
-        return "";
-    }
-    const rootNode = new DOMParser().parseFromString(html, "text/html").body;
-    const mxReply = rootNode.querySelector("mx-reply");
-    return (mxReply && mxReply.outerHTML) || "";
-}
-
-function getTextReplyFallback(mxEvent: MatrixEvent): string {
-    const body: string = mxEvent.getContent().body;
-    const lines = body.split("\n").map((l) => l.trim());
-    if (lines.length > 2 && lines[0].startsWith("> ") && lines[1].length === 0) {
-        return `${lines[0]}\n\n`;
-    }
-    return "";
-}
-
 // exported for tests
 export function createEditContent(
    model: EditorModel,
@ -72,15 +53,6 @@ export function createEditContent(
    if (isEmote) {
        model = stripEmoteCommand(model);
    }
-    const isReply = !!editedEvent.replyEventId;
-    let plainPrefix = "";
-    let htmlPrefix = "";
-
-    if (isReply) {
-        plainPrefix = getTextReplyFallback(editedEvent);
-        htmlPrefix = getHtmlReplyFallback(editedEvent);
-    }
-
    const body = textSerialize(model);

    const newContent: RoomMessageEventContent = {
@ -89,19 +61,18 @@ export function createEditContent(
    };
    const contentBody: RoomMessageTextEventContent & Omit<ReplacementEvent<RoomMessageEventContent>, "m.relates_to"> = {
        "msgtype": newContent.msgtype,
-        "body": `${plainPrefix} * ${body}`,
+        "body": `* ${body}`,
        "m.new_content": newContent,
    };

    const formattedBody = htmlSerializeIfNeeded(model, {
-        forceHTML: isReply,
        useMarkdown: SettingsStore.getValue("MessageComposerInput.useMarkdown"),
    });
    if (formattedBody) {
        newContent.format = "org.matrix.custom.html";
        newContent.formatted_body = formattedBody;
        contentBody.format = newContent.format;
-        contentBody.formatted_body = `${htmlPrefix} * ${formattedBody}`;
+        contentBody.formatted_body = `* ${formattedBody}`;
    }

    // Build the mentions properties for both the content and new_content.
@ -121,7 +92,7 @@ interface IState {

 class EditMessageComposer extends React.Component<IEditMessageComposerProps, IState> {
    public static contextType = RoomContext;
-    public declare context: React.ContextType<typeof RoomContext>;
+    declare public context: React.ContextType<typeof RoomContext>;

    private readonly editorRef = createRef<BasicMessageComposer>();
    private dispatcherRef?: string;
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@ -296,7 +296,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
    };

    public static contextType = RoomContext;
-    public declare context: React.ContextType<typeof RoomContext>;
+    declare public context: React.ContextType<typeof RoomContext>;

    private unmounted = false;

@ -758,8 +758,13 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                    shieldReasonMessage = _t("encryption|event_shield_reason_mismatched_sender_key");
                    break;

-                default:
-                    shieldReasonMessage = _t("error|unknown");
+                case EventShieldReason.SENT_IN_CLEAR:
+                    shieldReasonMessage = _t("common|unencrypted");
+                    break;
+
+                case EventShieldReason.VERIFICATION_VIOLATION:
+                    shieldReasonMessage = _t("timeline|decryption_failure|sender_identity_previously_verified");
+                    break;
            }

            if (this.state.shieldColour === EventShieldColour.GREY) {
@ -770,7 +775,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
            }
        }

-        if (MatrixClientPeg.safeGet().isRoomEncrypted(ev.getRoomId()!)) {
+        if (this.context.isRoomEncrypted) {
            // else if room is encrypted
            // and event is being encrypted or is not_sent (Unknown Devices/Network Error)
            if (ev.status === EventStatus.ENCRYPTING) {
--- a/src/components/views/rooms/HistoryTile.tsx
+++ b/src/components/views/rooms/HistoryTile.tsx
@ -6,15 +6,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */

-import React, { useContext } from "react";
+import React from "react";
 import { EventTimeline } from "matrix-js-sdk/src/matrix";

 import EventTileBubble from "../messages/EventTileBubble";
-import RoomContext from "../../../contexts/RoomContext";
 import { _t } from "../../../languageHandler";
+import { useScopedRoomContext } from "../../../contexts/ScopedRoomContext.tsx";

 const HistoryTile: React.FC = () => {
-    const { room } = useContext(RoomContext);
+    const { room } = useScopedRoomContext("room");

    const oldState = room?.getLiveTimeline().getState(EventTimeline.BACKWARDS);
    const historyState = oldState?.getStateEvents("m.room.history_visibility")[0]?.getContent().history_visibility;
--- a/Show more
+++ b/Show more