Refactor EncryptionEvent using MVVM and move to shared-components (#32531)

* Refactor EncryptionEvent using MVVM and move to shared-components * Added viewmodel and unit tests for bothe viewmodel and component. * Added test for custom-class * Update EventTileFactory and RoomView to use the new component * Clean up unused language strings from element-web * Changed how the view model is created * Make sure the initial snapshot mimics the previous component * Optimizing viewmodel initial snapshot and update * Updated playwright screenshots
2026-02-18 06:28:34 +00:00
parent b19aab4bcf
commit 5417fce489
23 changed files with 961 additions and 261 deletions
@@ -0,0 +1,10 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.error {
+    color: var(--cpd-color-icon-critical-primary);
+}
@@ -0,0 +1,82 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX } from "react";
+
+import type { Meta, StoryFn } from "@storybook/react-vite";
+import { EncryptionEventView, EncryptionEventState, type EncryptionEventViewSnapshot } from "./EncryptionEventView";
+import { useMockedViewModel } from "../../viewmodel/useMockedViewModel";
+
+type EncryptionEventProps = EncryptionEventViewSnapshot;
+
+const EncryptionEventViewWrapper = ({ ...rest }: EncryptionEventProps): JSX.Element => {
+    const vm = useMockedViewModel(rest, {});
+
+    return <EncryptionEventView vm={vm} />;
+};
+
+export default {
+    title: "Event/EncryptionEvent",
+    component: EncryptionEventViewWrapper,
+    tags: ["autodocs"],
+    argTypes: {
+        state: {
+            options: Object.entries(EncryptionEventState)
+                .filter(([key, value]) => key === value)
+                .map(([key]) => key),
+            control: { type: "select" },
+        },
+    },
+    args: {
+        state: EncryptionEventState.ENABLED,
+        encryptedStateEvents: false,
+        userName: "Alice",
+        className: "",
+    },
+} as Meta<typeof EncryptionEventViewWrapper>;
+
+const Template: StoryFn<typeof EncryptionEventViewWrapper> = (args) => <EncryptionEventViewWrapper {...args} />;
+
+export const Default = Template.bind({});
+
+export const StateEncryptionEnabled = Template.bind({});
+StateEncryptionEnabled.args = {
+    state: EncryptionEventState.ENABLED,
+    encryptedStateEvents: true,
+};
+
+export const ParametersChanged = Template.bind({});
+ParametersChanged.args = {
+    state: EncryptionEventState.CHANGED,
+};
+
+export const DisableAttempt = Template.bind({});
+DisableAttempt.args = {
+    state: EncryptionEventState.DISABLE_ATTEMPT,
+};
+
+export const EnabledDirectMessage = Template.bind({});
+EnabledDirectMessage.args = {
+    state: EncryptionEventState.ENABLED_DM,
+    userName: "Alice",
+};
+
+export const EnabledLocalRoom = Template.bind({});
+EnabledLocalRoom.args = {
+    state: EncryptionEventState.ENABLED_LOCAL,
+};
+
+export const Unsupported = Template.bind({});
+Unsupported.args = {
+    state: EncryptionEventState.UNSUPPORTED,
+};
+
+export const WithTimestamp = Template.bind({});
+WithTimestamp.args = {
+    state: EncryptionEventState.ENABLED,
+    timestamp: <span>14:56</span>,
+};
@@ -0,0 +1,150 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { render, screen } from "@test-utils";
+import { composeStories } from "@storybook/react-vite";
+import { describe, it, expect } from "vitest";
+import React from "react";
+
+import { EncryptionEventState, EncryptionEventView } from "./EncryptionEventView";
+import * as stories from "./EncryptionEventView.stories";
+import { MockViewModel } from "../../viewmodel";
+
+const {
+    Default,
+    StateEncryptionEnabled,
+    ParametersChanged,
+    DisableAttempt,
+    EnabledDirectMessage,
+    EnabledLocalRoom,
+    Unsupported,
+    WithTimestamp,
+} = composeStories(stories);
+
+describe("EncryptionEventView", () => {
+    const renderView = (
+        state: EncryptionEventState,
+        encryptedStateEvents?: boolean,
+        userName?: string,
+        className?: string,
+    ): void => {
+        const vm = new MockViewModel({
+            state,
+            encryptedStateEvents,
+            userName,
+            className,
+        });
+        render(<EncryptionEventView vm={vm} />);
+    };
+
+    it("renders Default story", () => {
+        const { container } = render(<Default />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders StateEncryptionEnabled story", () => {
+        const { container } = render(<StateEncryptionEnabled />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders ParametersChanged story", () => {
+        const { container } = render(<ParametersChanged />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders DisableAttempt story", () => {
+        const { container } = render(<DisableAttempt />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders EnabledDirectMessage story", () => {
+        const { container } = render(<EnabledDirectMessage />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders EnabledLocalRoom story", () => {
+        const { container } = render(<EnabledLocalRoom />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders Unsupported story", () => {
+        const { container } = render(<Unsupported />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders WithTimestamp story", () => {
+        const { container } = render(<WithTimestamp />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("shows enabled room encryption copy", () => {
+        renderView(EncryptionEventState.ENABLED);
+
+        expect(screen.getByText("Encryption enabled")).toBeInTheDocument();
+        expect(
+            screen.getByText(
+                "Messages in this room are end-to-end encrypted. When people join, you can verify them in their profile, just tap on their profile picture.",
+            ),
+        ).toBeInTheDocument();
+    });
+
+    it("shows enabled state encryption copy", () => {
+        renderView(EncryptionEventState.ENABLED, true);
+
+        expect(screen.getByText("Experimental state encryption enabled")).toBeInTheDocument();
+        expect(
+            screen.getByText(
+                "Messages and state events in this room are end-to-end encrypted. When people join, you can verify them in their profile, just tap on their profile picture.",
+            ),
+        ).toBeInTheDocument();
+    });
+
+    it("shows changed encryption parameters copy", () => {
+        renderView(EncryptionEventState.CHANGED);
+
+        expect(screen.getByText("Encryption enabled")).toBeInTheDocument();
+        expect(screen.getByText("Some encryption parameters have been changed.")).toBeInTheDocument();
+    });
+
+    it("shows disable attempt copy", () => {
+        renderView(EncryptionEventState.DISABLE_ATTEMPT);
+
+        expect(screen.getByText("Encryption enabled")).toBeInTheDocument();
+        expect(screen.getByText("Ignored attempt to disable encryption")).toBeInTheDocument();
+    });
+
+    it("shows unsupported encryption copy", () => {
+        renderView(EncryptionEventState.UNSUPPORTED);
+
+        expect(screen.getByText("Encryption not enabled")).toBeInTheDocument();
+        expect(screen.getByText("The encryption used by this room isn't supported.")).toBeInTheDocument();
+    });
+
+    it("shows local room encryption copy", () => {
+        renderView(EncryptionEventState.ENABLED_LOCAL);
+
+        expect(screen.getByText("Encryption enabled")).toBeInTheDocument();
+        expect(screen.getByText("Messages in this chat will be end-to-end encrypted.")).toBeInTheDocument();
+    });
+
+    it("shows dm room encryption copy with display name", () => {
+        renderView(EncryptionEventState.ENABLED_DM, false, "Alice");
+
+        expect(screen.getByText("Encryption enabled")).toBeInTheDocument();
+        expect(
+            screen.getByText(
+                "Messages here are end-to-end encrypted. Verify Alice in their profile - tap on their profile picture.",
+            ),
+        ).toBeInTheDocument();
+    });
+
+    it("renders additional class name on the event tile bubble", () => {
+        renderView(EncryptionEventState.ENABLED, false, undefined, "custom-class");
+
+        expect(screen.getByText("Encryption enabled").parentElement).toHaveClass("custom-class");
+    });
+});
@@ -0,0 +1,100 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX } from "react";
+import { LockSolidIcon, ErrorSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+
+import { type ViewModel, useViewModel } from "../../viewmodel";
+import styles from "./EncryptionEventView.module.css";
+import { useI18n } from "../../utils/i18nContext";
+import { EventTileBubble } from "../EventTileBubble";
+
+export enum EncryptionEventState {
+    /** Encryption settings changed while encryption stayed enabled. */
+    CHANGED = "CHANGED",
+    /** Someone attempted to disable encryption in an encrypted room. */
+    DISABLE_ATTEMPT = "DISABLE_ATTEMPT",
+    /** Encryption was enabled in a regular room. */
+    ENABLED = "ENABLED",
+    /** Encryption was enabled in a DM room. */
+    ENABLED_DM = "ENABLED_DM",
+    /** Encryption was enabled in a local room. */
+    ENABLED_LOCAL = "ENABLED_LOCAL",
+    /** Encryption is unavailable/unsupported for this event context. */
+    UNSUPPORTED = "UNSUPPORTED",
+}
+
+export type EncryptionEventViewSnapshot = {
+    /** Which encryption event variant to render. */
+    state: EncryptionEventState;
+    /** Whether state-event encryption messaging should be shown. */
+    encryptedStateEvents?: boolean;
+    /** Display name for DM partner, used by ENABLED_DM subtitle text. */
+    userName?: string;
+    /** Optional CSS classes passed through to EventTileBubble. */
+    className?: string;
+    /** Optional timestamp element rendered in the EventTileBubble footer slot. */
+    timestamp?: JSX.Element;
+};
+
+/**
+ * ViewModel contract consumed by {@link EncryptionEventView}.
+ */
+export type EncryptionEventViewModel = ViewModel<EncryptionEventViewSnapshot>;
+
+export interface EncryptionEventViewProps {
+    /**
+     * ViewModel providing the current encryption event snapshot.
+     */
+    vm: ViewModel<EncryptionEventViewSnapshot>;
+    /**
+     * Ref forwarded to the root DOM element.
+     */
+    ref?: React.RefObject<HTMLDivElement>;
+}
+
+export function EncryptionEventView({ vm, ref }: Readonly<EncryptionEventViewProps>): JSX.Element {
+    const { translate: _t } = useI18n();
+    const { state, encryptedStateEvents, userName, className, timestamp } = useViewModel(vm);
+
+    let icon = <LockSolidIcon />;
+    let title = encryptedStateEvents ? _t("common|state_encryption_enabled") : _t("common|encryption_enabled");
+    let subtitle = "";
+
+    switch (state) {
+        case EncryptionEventState.CHANGED:
+            subtitle = _t("timeline|m.room.encryption|parameters_changed");
+            break;
+        case EncryptionEventState.DISABLE_ATTEMPT:
+            title = _t("common|encryption_enabled");
+            subtitle = _t("timeline|m.room.encryption|disable_attempt");
+            break;
+        case EncryptionEventState.ENABLED:
+            subtitle = encryptedStateEvents
+                ? _t("timeline|m.room.encryption|state_enabled")
+                : _t("timeline|m.room.encryption|enabled");
+            break;
+        case EncryptionEventState.ENABLED_DM:
+            subtitle = _t("timeline|m.room.encryption|enabled_dm", { displayName: userName });
+            break;
+        case EncryptionEventState.ENABLED_LOCAL:
+            subtitle = _t("timeline|m.room.encryption|enabled_local");
+            break;
+        case EncryptionEventState.UNSUPPORTED:
+        default:
+            icon = <ErrorSolidIcon className={styles.error} />;
+            title = _t("timeline|m.room.encryption|disabled");
+            subtitle = _t("timeline|m.room.encryption|unsupported");
+            break;
+    }
+
+    return (
+        <EventTileBubble icon={icon} className={className} title={title} subtitle={subtitle} ref={ref}>
+            {timestamp}
+        </EventTileBubble>
+    );
+}
@@ -0,0 +1,245 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`EncryptionEventView > renders Default story 1`] = `
+<div>
+  <div
+    class="container"
+  >
+    <svg
+      fill="currentColor"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6 22q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412A1.93 1.93 0 0 1 6 8h1V6q0-2.075 1.463-3.537Q9.926 1 12 1q2.075 0 3.537 1.463Q17 3.925 17 6v2h1q.824 0 1.413.588Q20 9.175 20 10v10q0 .824-.587 1.413A1.93 1.93 0 0 1 18 22zM9 8h6V6q0-1.25-.875-2.125A2.9 2.9 0 0 0 12 3q-1.25 0-2.125.875A2.9 2.9 0 0 0 9 6z"
+      />
+    </svg>
+    <div
+      class="title"
+    >
+      Encryption enabled
+    </div>
+    <div
+      class="subtitle"
+    >
+      Messages in this room are end-to-end encrypted. When people join, you can verify them in their profile, just tap on their profile picture.
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EncryptionEventView > renders DisableAttempt story 1`] = `
+<div>
+  <div
+    class="container"
+  >
+    <svg
+      fill="currentColor"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6 22q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412A1.93 1.93 0 0 1 6 8h1V6q0-2.075 1.463-3.537Q9.926 1 12 1q2.075 0 3.537 1.463Q17 3.925 17 6v2h1q.824 0 1.413.588Q20 9.175 20 10v10q0 .824-.587 1.413A1.93 1.93 0 0 1 18 22zM9 8h6V6q0-1.25-.875-2.125A2.9 2.9 0 0 0 12 3q-1.25 0-2.125.875A2.9 2.9 0 0 0 9 6z"
+      />
+    </svg>
+    <div
+      class="title"
+    >
+      Encryption enabled
+    </div>
+    <div
+      class="subtitle"
+    >
+      Ignored attempt to disable encryption
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EncryptionEventView > renders EnabledDirectMessage story 1`] = `
+<div>
+  <div
+    class="container"
+  >
+    <svg
+      fill="currentColor"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6 22q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412A1.93 1.93 0 0 1 6 8h1V6q0-2.075 1.463-3.537Q9.926 1 12 1q2.075 0 3.537 1.463Q17 3.925 17 6v2h1q.824 0 1.413.588Q20 9.175 20 10v10q0 .824-.587 1.413A1.93 1.93 0 0 1 18 22zM9 8h6V6q0-1.25-.875-2.125A2.9 2.9 0 0 0 12 3q-1.25 0-2.125.875A2.9 2.9 0 0 0 9 6z"
+      />
+    </svg>
+    <div
+      class="title"
+    >
+      Encryption enabled
+    </div>
+    <div
+      class="subtitle"
+    >
+      Messages here are end-to-end encrypted. Verify Alice in their profile - tap on their profile picture.
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EncryptionEventView > renders EnabledLocalRoom story 1`] = `
+<div>
+  <div
+    class="container"
+  >
+    <svg
+      fill="currentColor"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6 22q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412A1.93 1.93 0 0 1 6 8h1V6q0-2.075 1.463-3.537Q9.926 1 12 1q2.075 0 3.537 1.463Q17 3.925 17 6v2h1q.824 0 1.413.588Q20 9.175 20 10v10q0 .824-.587 1.413A1.93 1.93 0 0 1 18 22zM9 8h6V6q0-1.25-.875-2.125A2.9 2.9 0 0 0 12 3q-1.25 0-2.125.875A2.9 2.9 0 0 0 9 6z"
+      />
+    </svg>
+    <div
+      class="title"
+    >
+      Encryption enabled
+    </div>
+    <div
+      class="subtitle"
+    >
+      Messages in this chat will be end-to-end encrypted.
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EncryptionEventView > renders ParametersChanged story 1`] = `
+<div>
+  <div
+    class="container"
+  >
+    <svg
+      fill="currentColor"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6 22q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412A1.93 1.93 0 0 1 6 8h1V6q0-2.075 1.463-3.537Q9.926 1 12 1q2.075 0 3.537 1.463Q17 3.925 17 6v2h1q.824 0 1.413.588Q20 9.175 20 10v10q0 .824-.587 1.413A1.93 1.93 0 0 1 18 22zM9 8h6V6q0-1.25-.875-2.125A2.9 2.9 0 0 0 12 3q-1.25 0-2.125.875A2.9 2.9 0 0 0 9 6z"
+      />
+    </svg>
+    <div
+      class="title"
+    >
+      Encryption enabled
+    </div>
+    <div
+      class="subtitle"
+    >
+      Some encryption parameters have been changed.
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EncryptionEventView > renders StateEncryptionEnabled story 1`] = `
+<div>
+  <div
+    class="container"
+  >
+    <svg
+      fill="currentColor"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6 22q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412A1.93 1.93 0 0 1 6 8h1V6q0-2.075 1.463-3.537Q9.926 1 12 1q2.075 0 3.537 1.463Q17 3.925 17 6v2h1q.824 0 1.413.588Q20 9.175 20 10v10q0 .824-.587 1.413A1.93 1.93 0 0 1 18 22zM9 8h6V6q0-1.25-.875-2.125A2.9 2.9 0 0 0 12 3q-1.25 0-2.125.875A2.9 2.9 0 0 0 9 6z"
+      />
+    </svg>
+    <div
+      class="title"
+    >
+      Experimental state encryption enabled
+    </div>
+    <div
+      class="subtitle"
+    >
+      Messages and state events in this room are end-to-end encrypted. When people join, you can verify them in their profile, just tap on their profile picture.
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EncryptionEventView > renders Unsupported story 1`] = `
+<div>
+  <div
+    class="container"
+  >
+    <svg
+      class="error"
+      fill="currentColor"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
+      />
+    </svg>
+    <div
+      class="title"
+    >
+      Encryption not enabled
+    </div>
+    <div
+      class="subtitle"
+    >
+      The encryption used by this room isn't supported.
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EncryptionEventView > renders WithTimestamp story 1`] = `
+<div>
+  <div
+    class="container"
+  >
+    <svg
+      fill="currentColor"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6 22q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412A1.93 1.93 0 0 1 6 8h1V6q0-2.075 1.463-3.537Q9.926 1 12 1q2.075 0 3.537 1.463Q17 3.925 17 6v2h1q.824 0 1.413.588Q20 9.175 20 10v10q0 .824-.587 1.413A1.93 1.93 0 0 1 18 22zM9 8h6V6q0-1.25-.875-2.125A2.9 2.9 0 0 0 12 3q-1.25 0-2.125.875A2.9 2.9 0 0 0 9 6z"
+      />
+    </svg>
+    <div
+      class="title"
+    >
+      Encryption enabled
+    </div>
+    <div
+      class="subtitle"
+    >
+      Messages in this room are end-to-end encrypted. When people join, you can verify them in their profile, just tap on their profile picture.
+    </div>
+    <span>
+      14:56
+    </span>
+  </div>
+</div>
+`;
@@ -0,0 +1,13 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+export {
+    EncryptionEventView,
+    EncryptionEventState,
+    type EncryptionEventViewSnapshot,
+    type EncryptionEventViewModel,
+} from "./EncryptionEventView";
@@ -20,7 +20,9 @@
        "start_chat": "Start chat"
    },
    "common": {
-        "preferences": "Preferences"
+        "encryption_enabled": "Encryption enabled",
+        "preferences": "Preferences",
+        "state_encryption_enabled": "Experimental state encryption enabled"
    },
    "left_panel": {
        "open_dial_pad": "Open dial pad"
@@ -159,6 +161,16 @@
            "audio_player": "Audio player",
            "error_downloading_audio": "Error downloading audio",
            "unnamed_audio": "Unnamed audio"
+        },
+        "m.room.encryption": {
+            "disable_attempt": "Ignored attempt to disable encryption",
+            "disabled": "Encryption not enabled",
+            "enabled": "Messages in this room are end-to-end encrypted. When people join, you can verify them in their profile, just tap on their profile picture.",
+            "enabled_dm": "Messages here are end-to-end encrypted. Verify %(displayName)s in their profile - tap on their profile picture.",
+            "enabled_local": "Messages in this chat will be end-to-end encrypted.",
+            "parameters_changed": "Some encryption parameters have been changed.",
+            "state_enabled": "Messages and state events in this room are end-to-end encrypted. When people join, you can verify them in their profile, just tap on their profile picture.",
+            "unsupported": "The encryption used by this room isn't supported."
        }
    },
    "widget": {
@@ -13,6 +13,7 @@ export * from "./audio/SeekBar";
 export * from "./avatar/AvatarWithDetails";
 export * from "./composer/Banner";
 export * from "./crypto/SasEmoji";
+export * from "./event-tiles/EncryptionEventView";
 export * from "./event-tiles/EventTileBubble";
 export * from "./event-tiles/TextualEventView";
 export * from "./message-body/MediaBody";