Add voice broadcast recording body (#9316)

* Add voice broadcast recording body

* Change icon element; update css variables

* Update Icon-test snapshots

package.json

@@ -140,6 +140,7 @@
     "@sinonjs/fake-timers": "^9.1.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^14.4.3",
     "@types/classnames": "^2.2.11",
     "@types/commonmark": "^0.27.4",
     "@types/counterpart": "^0.18.1",

res/css/_components.pcss

@@ -4,6 +4,7 @@
 @import "./_font-sizes.pcss";
 @import "./_font-weights.pcss";
 @import "./_spacing.pcss";
+@import "./components/atoms/_Icon.pcss";
 @import "./components/views/beacon/_BeaconListItem.pcss";
 @import "./components/views/beacon/_BeaconStatus.pcss";
 @import "./components/views/beacon/_BeaconStatusTooltip.pcss";
@@ -357,3 +358,5 @@
 @import "./views/voip/_LegacyCallViewSidebar.pcss";
 @import "./views/voip/_PiPContainer.pcss";
 @import "./views/voip/_VideoFeed.pcss";
+@import "./voice-broadcast/atoms/_LiveBadge.pcss";
+@import "./voice-broadcast/molecules/_VoiceBroadcastRecordingBody.pcss";

res/css/components/atoms/_Icon.pcss

@@ -0,0 +1,34 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_Icon {
+    mask-position: center;
+    mask-repeat: no-repeat;
+    mask-size: contain;
+}
+
+.mx_Icon_16 {
+    height: 16px;
+    width: 16px;
+}
+
+.mx_Icon_accent {
+    background-color: $accent;
+}
+
+.mx_Icon_live-badge {
+    background-color: #fff;
+}

res/css/voice-broadcast/atoms/_LiveBadge.pcss

@@ -0,0 +1,27 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_LiveBadge {
+    align-items: center;
+    background-color: $alert;
+    border-radius: 2px;
+    color: $live-badge-color;
+    display: flex;
+    font-size: $font-12px;
+    font-weight: $font-semi-bold;
+    gap: $spacing-4;
+    padding: 2px 4px;
+}

res/css/voice-broadcast/molecules/_VoiceBroadcastRecordingBody.pcss

@@ -0,0 +1,29 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_VoiceBroadcastRecordingBody {
+    align-items: flex-start;
+    background-color: $quinary-content;
+    border-radius: 8px;
+    display: inline-flex;
+    gap: $spacing-8;
+    padding: 12px;
+}
+
+.mx_VoiceBroadcastRecordingBody_title {
+    font-size: $font-12px;
+    font-weight: $font-semi-bold;
+}

res/themes/dark/css/_dark.pcss

@@ -206,6 +206,11 @@ $location-live-secondary-color: #deddfd;
 }
 /* ******************** */
 
+/* Voice Broadcast */
+/* ******************** */
+$live-badge-color: #ffffff;
+/* ******************** */
+
 /* One-off colors */
 /* ******************** */
 $progressbar-bg-color: $system;

res/themes/legacy-dark/css/_legacy-dark.pcss

@@ -203,6 +203,11 @@ $location-live-color: #5c56f5;
 $location-live-secondary-color: #deddfd;
 /* ******************** */
 
+/* Voice Broadcast */
+/* ******************** */
+$live-badge-color: #ffffff;
+/* ******************** */
+
 /* ***** Mixins! ***** */
 
 @define-mixin mx_DialogButton {

res/themes/legacy-light/css/_legacy-light.pcss

@@ -303,6 +303,11 @@ $location-live-color: #5c56f5;
 $location-live-secondary-color: #deddfd;
 /* ******************** */
 
+/* Voice Broadcast */
+/* ******************** */
+$live-badge-color: #ffffff;
+/* ******************** */
+
 /* ***** Mixins! ***** */
 
 @define-mixin mx_DialogButton {

res/themes/light/css/_light.pcss

@@ -337,6 +337,11 @@ $location-live-color: #5c56f5;
 $location-live-secondary-color: #deddfd;
 /* ******************** */
 
+/* Voice Broadcast */
+/* ******************** */
+$live-badge-color: #ffffff;
+/* ******************** */
+
 /* Mixins */
 /* ******************** */
 @define-mixin mx_DialogButton {

src/components/atoms/Icon.tsx

@@ -0,0 +1,69 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+
+import liveIcon from "../../../res/img/element-icons/live.svg";
+
+export enum IconType {
+    Live,
+}
+
+const iconTypeMap = new Map([
+    [IconType.Live, liveIcon],
+]);
+
+export enum IconColour {
+    Accent = "accent",
+    LiveBadge = "live-badge",
+}
+
+export enum IconSize {
+    S16 = "16",
+}
+
+interface IconProps {
+    colour?: IconColour;
+    size?: IconSize;
+    type: IconType;
+}
+
+export const Icon: React.FC<IconProps> = ({
+    size = IconSize.S16,
+    colour = IconColour.Accent,
+    type,
+    ...rest
+}) => {
+    const classes = [
+        "mx_Icon",
+        `mx_Icon_${size}`,
+        `mx_Icon_${colour}`,
+    ];
+
+    const styles: React.CSSProperties = {
+        maskImage: `url("${iconTypeMap.get(type)}")`,
+    };
+
+    return (
+        <i
+            aria-hidden
+            className={classes.join(" ")}
+            role="presentation"
+            style={styles}
+            {...rest}
+        />
+    );
+};

src/components/structures/MessagePanel.tsx

@@ -59,6 +59,7 @@ import { IReadReceiptInfo } from "../views/rooms/ReadReceiptMarker";
 import { haveRendererForEvent } from "../../events/EventTileFactory";
 import { editorRoomKey } from "../../Editing";
 import { hasThreadSummary } from "../../utils/EventUtils";
+import { VoiceBroadcastInfoEventType } from '../../voice-broadcast';
 
 const CONTINUATION_MAX_INTERVAL = 5 * 60 * 1000; // 5 minutes
 const continuedTypes = [EventType.Sticker, EventType.RoomMessage];
@@ -1091,11 +1092,20 @@ class CreationGrouper extends BaseGrouper {
             && (ev.getStateKey() !== createEvent.getSender() || ev.getContent()["membership"] !== "join")) {
             return false;
         }
+
+        const eventType = ev.getType();
+
         // beacons are not part of room creation configuration
         // should be shown in timeline
-        if (M_BEACON_INFO.matches(ev.getType())) {
+        if (M_BEACON_INFO.matches(eventType)) {
             return false;
         }
+
+        if (VoiceBroadcastInfoEventType === eventType) {
+            // always show voice broadcast info events in timeline
+            return false;
+        }
+
         if (ev.isState() && ev.getSender() === createEvent.getSender()) {
             return true;
         }

src/components/views/messages/MessageEvent.tsx

@@ -42,6 +42,7 @@ import MLocationBody from "./MLocationBody";
 import MjolnirBody from "./MjolnirBody";
 import MBeaconBody from "./MBeaconBody";
 import { IEventTileOps } from "../rooms/EventTile";
+import { VoiceBroadcastBody, VoiceBroadcastInfoEventType, VoiceBroadcastInfoState } from '../../../voice-broadcast';
 
 // onMessageAllowed is handled internally
 interface IProps extends Omit<IBodyProps, "onMessageAllowed" | "mediaEventHelper"> {
@@ -74,6 +75,7 @@ const baseEvTypes = new Map<string, React.ComponentType<Partial<IBodyProps>>>([
     [M_POLL_START.altName, MPollBody],
     [M_BEACON_INFO.name, MBeaconBody],
     [M_BEACON_INFO.altName, MBeaconBody],
+    [VoiceBroadcastInfoEventType, VoiceBroadcastBody],
 ]);
 
 export default class MessageEvent extends React.Component<IProps> implements IMediaBody, IOperableEventTile {
@@ -171,6 +173,10 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
             ) {
                 BodyType = MLocationBody;
             }
+
+            if (type === VoiceBroadcastInfoEventType && content?.state === VoiceBroadcastInfoState.Started) {
+                BodyType = VoiceBroadcastBody;
+            }
         }
 
         if (SettingsStore.getValue("feature_mjolnir")) {

src/components/views/rooms/MessageComposer.tsx

@@ -54,6 +54,11 @@ import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { isLocalRoom } from '../../../utils/localRoom/isLocalRoom';
 import { Features } from '../../../settings/Settings';
 import { VoiceMessageRecording } from '../../../audio/VoiceMessageRecording';
+import {
+    VoiceBroadcastInfoEventContent,
+    VoiceBroadcastInfoEventType,
+    VoiceBroadcastInfoState,
+} from '../../../voice-broadcast';
 
 let instanceCount = 0;
 
@@ -503,12 +508,18 @@ export default class MessageComposer extends React.Component<IProps, IState> {
                             showStickersButton={this.showStickersButton}
                             toggleButtonMenu={this.toggleButtonMenu}
                             showVoiceBroadcastButton={this.showVoiceBroadcastButton}
-                            onStartVoiceBroadcastClick={() => {
-                                // Sends a voice message. To be replaced by voice broadcast during development.
-                                this.voiceRecordingButton.current?.onRecordStartEndClick();
-                                if (this.context.narrow) {
-                                    this.toggleButtonMenu();
-                                }
+                            onStartVoiceBroadcastClick={async () => {
+                                const client = MatrixClientPeg.get();
+                                client.sendStateEvent(
+                                    this.props.room.roomId,
+                                    VoiceBroadcastInfoEventType,
+                                    {
+                                        state: VoiceBroadcastInfoState.Started,
+                                        chunk_length: 300,
+                                    } as VoiceBroadcastInfoEventContent,
+                                    client.getUserId(),
+                                );
+                                this.toggleButtonMenu();
                             }}
                         /> }
                         { showSendButton && (

src/components/views/rooms/SendMessageComposer.tsx

@@ -88,6 +88,7 @@ export function createMessageContent(
     model = unescapeMessage(model);
 
     const body = textSerialize(model);
+
     const content: IContent = {
         msgtype: isEmote ? "m.emote" : "m.text",
         body: body,

src/events/EventTileFactory.tsx

@@ -43,6 +43,7 @@ import { getMessageModerationState, MessageModerationState } from "../utils/Even
 import HiddenBody from "../components/views/messages/HiddenBody";
 import ViewSourceEvent from "../components/views/messages/ViewSourceEvent";
 import { shouldDisplayAsBeaconTile } from "../utils/beacon/timeline";
+import { shouldDisplayAsVoiceBroadcastTile } from "../voice-broadcast/utils/shouldDisplayAsVoiceBroadcastTile";
 
 // Subset of EventTile's IProps plus some mixins
 export interface EventTileTypeProps {
@@ -220,6 +221,10 @@ export function pickFactory(
             return MessageEventFactory;
         }
 
+        if (shouldDisplayAsVoiceBroadcastTile(mxEvent)) {
+            return MessageEventFactory;
+        }
+
         if (SINGULAR_STATE_EVENTS.has(evType) && mxEvent.getStateKey() !== '') {
             return noEventFactoryFactory(); // improper event type to render
         }

src/i18n/strings/en_EN.json

@@ -636,6 +636,7 @@
     "Send <b>%(msgtype)s</b> messages as you in your active room": "Send <b>%(msgtype)s</b> messages as you in your active room",
     "See <b>%(msgtype)s</b> messages posted to this room": "See <b>%(msgtype)s</b> messages posted to this room",
     "See <b>%(msgtype)s</b> messages posted to your active room": "See <b>%(msgtype)s</b> messages posted to your active room",
+    "Live": "Live",
     "Cannot reach homeserver": "Cannot reach homeserver",
     "Ensure you have a stable internet connection, or get in touch with the server admin": "Ensure you have a stable internet connection, or get in touch with the server admin",
     "Your %(brand)s is misconfigured": "Your %(brand)s is misconfigured",

src/voice-broadcast/components/VoiceBroadcastBody.tsx

@@ -0,0 +1,70 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { MatrixEvent, RelationType } from "matrix-js-sdk/src/matrix";
+
+import { VoiceBroadcastInfoEventType, VoiceBroadcastInfoState, VoiceBroadcastRecordingBody } from "..";
+import { IBodyProps } from "../../components/views/messages/IBodyProps";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+
+/**
+ * Temporary component to display voice broadcasts.
+ * XXX: To be refactored to some fancy store/hook/controller architecture.
+ */
+export const VoiceBroadcastBody: React.FC<IBodyProps> = ({
+    getRelationsForEvent,
+    mxEvent,
+}) => {
+    const client = MatrixClientPeg.get();
+    const relations = getRelationsForEvent?.(
+        mxEvent.getId(),
+        RelationType.Reference,
+        VoiceBroadcastInfoEventType,
+    );
+    const relatedEvents = relations?.getRelations();
+    const live = !relatedEvents?.find((event: MatrixEvent) => {
+        return event.getContent()?.state === VoiceBroadcastInfoState.Stopped;
+    });
+
+    const stopVoiceBroadcast = () => {
+        if (!live) return;
+
+        client.sendStateEvent(
+            mxEvent.getRoomId(),
+            VoiceBroadcastInfoEventType,
+            {
+                state: VoiceBroadcastInfoState.Stopped,
+                ["m.relates_to"]: {
+                    rel_type: RelationType.Reference,
+                    event_id: mxEvent.getId(),
+                },
+            },
+            client.getUserId(),
+        );
+    };
+
+    const room = client.getRoom(mxEvent.getRoomId());
+    const senderId = mxEvent.getSender();
+    const sender = mxEvent.sender;
+    return <VoiceBroadcastRecordingBody
+        onClick={stopVoiceBroadcast}
+        live={live}
+        member={sender}
+        userId={senderId}
+        title={`${sender?.name ?? senderId} • ${room.name}`}
+    />;
+};

src/voice-broadcast/components/atoms/LiveBadge.tsx

@@ -0,0 +1,27 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+
+import { Icon, IconColour, IconType } from "../../../components/atoms/Icon";
+import { _t } from "../../../languageHandler";
+
+export const LiveBadge: React.FC = () => {
+    return <div className="mx_LiveBadge">
+        <Icon type={IconType.Live} colour={IconColour.LiveBadge} />
+        { _t("Live") }
+    </div>;
+};

src/voice-broadcast/components/index.ts

@@ -0,0 +1,19 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export * from "./atoms/LiveBadge";
+export * from "./molecules/VoiceBroadcastRecordingBody";
+export * from "./VoiceBroadcastBody";

src/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody.tsx

@@ -0,0 +1,56 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { MouseEventHandler } from "react";
+import { RoomMember } from "matrix-js-sdk/src/matrix";
+
+import { LiveBadge } from "../..";
+import MemberAvatar from "../../../components/views/avatars/MemberAvatar";
+
+interface VoiceBroadcastRecordingBodyProps {
+    live: boolean;
+    member: RoomMember;
+    onClick: MouseEventHandler<HTMLDivElement>;
+    title: string;
+    userId: string;
+}
+
+export const VoiceBroadcastRecordingBody: React.FC<VoiceBroadcastRecordingBodyProps> = ({
+    live,
+    member,
+    onClick,
+    title,
+    userId,
+}) => {
+    const liveBadge = live
+        ? <LiveBadge />
+        : null;
+
+    return (
+        <div
+            className="mx_VoiceBroadcastRecordingBody"
+            onClick={onClick}
+        >
+            <MemberAvatar member={member} fallbackUserId={userId} />
+            <div className="mx_VoiceBroadcastRecordingBody_content">
+                <div className="mx_VoiceBroadcastRecordingBody_title">
+                    { title }
+                </div>
+            </div>
+            { liveBadge }
+        </div>
+    );
+};

src/voice-broadcast/index.ts

@@ -14,4 +14,30 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+/**
+ * Voice Broadcast module
+ * {@link https://github.com/vector-im/element-meta/discussions/632}
+ */
+
+import { RelationType } from "matrix-js-sdk/src/matrix";
+
+export * from "./components";
+export * from "./utils";
+
 export const VoiceBroadcastInfoEventType = "io.element.voice_broadcast_info";
+
+export enum VoiceBroadcastInfoState {
+    Started = "started",
+    Paused = "paused",
+    Running = "running",
+    Stopped = "stopped",
+}
+
+export interface VoiceBroadcastInfoEventContent {
+    state: VoiceBroadcastInfoState;
+    chunk_length: number;
+    ["m.relates_to"]?: {
+        rel_type: RelationType;
+        event_id: string;
+    };
+}

src/voice-broadcast/utils/index.ts

@@ -0,0 +1,17 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export * from "./shouldDisplayAsVoiceBroadcastTile";

src/voice-broadcast/utils/shouldDisplayAsVoiceBroadcastTile.ts

@@ -0,0 +1,27 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { MatrixEvent } from "matrix-js-sdk/src/matrix";
+
+import { VoiceBroadcastInfoEventType, VoiceBroadcastInfoState } from "..";
+
+export const shouldDisplayAsVoiceBroadcastTile = (event: MatrixEvent) => (
+    event.getType?.() === VoiceBroadcastInfoEventType
+    && (
+        event.getContent?.()?.state === VoiceBroadcastInfoState.Started
+        || event.isRedacted()
+    )
+);

test/components/atoms/Icon-test.tsx

@@ -0,0 +1,47 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { render } from "@testing-library/react";
+
+import { Icon, IconColour, IconSize, IconType } from "../../../src/components/atoms/Icon";
+
+describe("Icon", () => {
+    it.each([
+        IconColour.Accent,
+        IconColour.LiveBadge,
+    ])("should render the colour %s", (colour: IconColour) => {
+        const { container } = render(
+            <Icon
+                colour={colour}
+                type={IconType.Live}
+            />,
+        );
+        expect(container).toMatchSnapshot();
+    });
+
+    it.each([
+        IconSize.S16,
+    ])("should render the size %s", (size: IconSize) => {
+        const { container } = render(
+            <Icon
+                size={size}
+                type={IconType.Live}
+            />,
+        );
+        expect(container).toMatchSnapshot();
+    });
+});

test/components/atoms/__snapshots__/Icon-test.tsx.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Icon should render the colour accent 1`] = `
+<div>
+  <i
+    aria-hidden="true"
+    class="mx_Icon mx_Icon_16 mx_Icon_accent"
+    role="presentation"
+    style="mask-image: url(\\"image-file-stub\\");"
+  />
+</div>
+`;
+
+exports[`Icon should render the colour live-badge 1`] = `
+<div>
+  <i
+    aria-hidden="true"
+    class="mx_Icon mx_Icon_16 mx_Icon_live-badge"
+    role="presentation"
+    style="mask-image: url(\\"image-file-stub\\");"
+  />
+</div>
+`;
+
+exports[`Icon should render the size 16 1`] = `
+<div>
+  <i
+    aria-hidden="true"
+    class="mx_Icon mx_Icon_16 mx_Icon_accent"
+    role="presentation"
+    style="mask-image: url(\\"image-file-stub\\");"
+  />
+</div>
+`;

test/voice-broadcast/components/VoiceBroadcastBody-test.tsx

@@ -0,0 +1,182 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MatrixClient, MatrixEvent, RelationType } from "matrix-js-sdk/src/matrix";
+import { Relations } from "matrix-js-sdk/src/models/relations";
+import { mocked } from "jest-mock";
+
+import {
+    VoiceBroadcastBody,
+    VoiceBroadcastInfoEventType,
+    VoiceBroadcastInfoState,
+    VoiceBroadcastRecordingBody,
+} from "../../../src/voice-broadcast";
+import { mkEvent, stubClient } from "../../test-utils";
+import { IBodyProps } from "../../../src/components/views/messages/IBodyProps";
+
+jest.mock("../../../src/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody", () => ({
+    VoiceBroadcastRecordingBody: jest.fn(),
+}));
+
+describe("VoiceBroadcastBody", () => {
+    const roomId = "!room:example.com";
+    const recordingTestid = "voice-recording";
+    let client: MatrixClient;
+    let getRelationsForEvent: (eventId: string, relationType: string, eventType: string) => Relations;
+    let event: MatrixEvent;
+    let relatedEvent: MatrixEvent;
+    let recordingElement: HTMLElement;
+
+    const mkVoiceBroadcastInfoEvent = (state: VoiceBroadcastInfoState) => {
+        return mkEvent({
+            event: true,
+            type: VoiceBroadcastInfoEventType,
+            user: client.getUserId(),
+            room: roomId,
+            content: {
+                state,
+            },
+        });
+    };
+
+    const renderVoiceBroadcast = async () => {
+        const props: IBodyProps = {
+            getRelationsForEvent,
+            mxEvent: event,
+        } as unknown as IBodyProps;
+        const result = render(<VoiceBroadcastBody {...props} />);
+        recordingElement = await result.findByTestId(recordingTestid);
+    };
+
+    const itShouldRenderALiveVoiceBroadcast = () => {
+        it("should render a live voice broadcast", () => {
+            expect(VoiceBroadcastRecordingBody).toHaveBeenCalledWith(
+                {
+                    onClick: expect.any(Function),
+                    live: true,
+                    member: event.sender,
+                    userId: client.getUserId(),
+                    title: "@userId:matrix.org • My room",
+                },
+                {},
+            );
+        });
+    };
+
+    const itShouldRenderANonLiveVoiceBroadcast = () => {
+        it("should render a non-live voice broadcast", () => {
+            expect(VoiceBroadcastRecordingBody).toHaveBeenCalledWith(
+                {
+                    onClick: expect.any(Function),
+                    live: false,
+                    member: event.sender,
+                    userId: client.getUserId(),
+                    title: "@userId:matrix.org • My room",
+                },
+                {},
+            );
+        });
+    };
+
+    beforeEach(() => {
+        mocked(VoiceBroadcastRecordingBody).mockImplementation(
+            ({
+                live,
+                member: _member,
+                onClick,
+                title,
+                userId: _userId,
+            }) => {
+                return (
+                    <div
+                        data-testid={recordingTestid}
+                        onClick={onClick}
+                    >
+                        { title }
+                        { live && "Live" }
+                    </div>
+                );
+            },
+        );
+        client = stubClient();
+        event = mkVoiceBroadcastInfoEvent(VoiceBroadcastInfoState.Started);
+    });
+
+    describe("when getRelationsForEvent is undefined", () => {
+        beforeEach(async () => {
+            await renderVoiceBroadcast();
+        });
+
+        itShouldRenderALiveVoiceBroadcast();
+
+        describe("and the Voice Broadcast tile has been clicked", () => {
+            beforeEach(async () => {
+                await userEvent.click(recordingElement);
+            });
+
+            it("should emit a Voice Broadcast stop state event", () => {
+                expect(mocked(client.sendStateEvent)).toHaveBeenCalledWith(
+                    roomId,
+                    VoiceBroadcastInfoEventType,
+                    {
+                        state: VoiceBroadcastInfoState.Stopped,
+                        ["m.relates_to"]: {
+                            rel_type: RelationType.Reference,
+                            event_id: event.getId(),
+                        },
+                    },
+                    client.getUserId(),
+                );
+            });
+        });
+    });
+
+    describe("when getRelationsForEvent returns null", () => {
+        beforeEach(async () => {
+            getRelationsForEvent = jest.fn().mockReturnValue(null);
+            await renderVoiceBroadcast();
+        });
+
+        itShouldRenderALiveVoiceBroadcast();
+    });
+
+    describe("when getRelationsForEvent returns a stopped Voice Broadcast info", () => {
+        beforeEach(async () => {
+            relatedEvent = mkVoiceBroadcastInfoEvent(VoiceBroadcastInfoState.Stopped);
+            getRelationsForEvent = jest.fn().mockReturnValue({
+                getRelations: jest.fn().mockReturnValue([
+                    relatedEvent,
+                ]),
+            });
+            await renderVoiceBroadcast();
+        });
+
+        itShouldRenderANonLiveVoiceBroadcast();
+
+        describe("and the Voice Broadcast tile has been clicked", () => {
+            beforeEach(async () => {
+                await userEvent.click(recordingElement);
+            });
+
+            it("should not emit a voice broadcast stop state event", () => {
+                expect(mocked(client.sendStateEvent)).not.toHaveBeenCalled();
+            });
+        });
+    });
+});

test/voice-broadcast/components/atoms/LiveBadge-test.tsx

@@ -0,0 +1,27 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import { render } from "@testing-library/react";
+
+import { LiveBadge } from "../../../../src/voice-broadcast";
+
+describe("LiveBadge", () => {
+    it("should render the expected HTML", () => {
+        const { container } = render(<LiveBadge />);
+        expect(container).toMatchSnapshot();
+    });
+});

test/voice-broadcast/components/atoms/__snapshots__/LiveBadge-test.tsx.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LiveBadge should render the expected HTML 1`] = `
+<div>
+  <div
+    class="mx_LiveBadge"
+  >
+    <i
+      aria-hidden="true"
+      class="mx_Icon mx_Icon_16 mx_Icon_live-badge"
+      role="presentation"
+      style="mask-image: url(\\"image-file-stub\\");"
+    />
+    Live
+  </div>
+</div>
+`;

test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx

@@ -0,0 +1,99 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { MouseEventHandler } from "react";
+import { render, RenderResult } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { RoomMember } from "matrix-js-sdk/src/matrix";
+import { mocked } from "jest-mock";
+
+import { VoiceBroadcastRecordingBody } from "../../../../src/voice-broadcast";
+import MemberAvatar from "../../../../src/components/views/avatars/MemberAvatar";
+
+jest.mock("../../../../src/components/views/avatars/MemberAvatar", () => jest.fn());
+
+describe("VoiceBroadcastRecordingBody", () => {
+    const title = "Test Title";
+    const userId = "@user:example.com";
+    const roomMember = new RoomMember("!room:example.com", userId);
+    let onClick: MouseEventHandler<HTMLDivElement>;
+
+    beforeEach(() => {
+        onClick = jest.fn();
+        // @ts-ignore
+        mocked(MemberAvatar).mockReturnValue(<div data-testid="member-avatar" />);
+    });
+
+    describe("when rendered", () => {
+        let renderResult: RenderResult;
+
+        beforeEach(() => {
+            renderResult = render(
+                <VoiceBroadcastRecordingBody
+                    onClick={onClick}
+                    title={title}
+                    userId={userId}
+                    live={true}
+                    member={roomMember}
+                />,
+            );
+        });
+
+        it("should render the expected HTML", () => {
+            expect(renderResult.container).toMatchSnapshot();
+        });
+
+        it("should pass the props to MemberAvatar", () => {
+            expect(mocked(MemberAvatar)).toHaveBeenCalledWith(
+                {
+                    member: roomMember,
+                    fallbackUserId: userId,
+                },
+                {},
+            );
+        });
+
+        describe("and clicked", () => {
+            beforeEach(async () => {
+                await userEvent.click(renderResult.getByText(title));
+            });
+
+            it("should call the onClick prop", () => {
+                expect(onClick).toHaveBeenCalled();
+            });
+        });
+    });
+
+    describe("when non-live rendered", () => {
+        let renderResult: RenderResult;
+
+        beforeEach(() => {
+            renderResult = render(
+                <VoiceBroadcastRecordingBody
+                    onClick={onClick}
+                    title={title}
+                    userId={userId}
+                    live={false}
+                    member={roomMember}
+                />,
+            );
+        });
+
+        it("should not render the live badge", () => {
+            expect(renderResult.queryByText("Live")).toBeFalsy();
+        });
+    });
+});

test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VoiceBroadcastRecordingBody when rendered should render the expected HTML 1`] = `
+<div>
+  <div
+    class="mx_VoiceBroadcastRecordingBody"
+  >
+    <div
+      data-testid="member-avatar"
+    />
+    <div
+      class="mx_VoiceBroadcastRecordingBody_content"
+    >
+      <div
+        class="mx_VoiceBroadcastRecordingBody_title"
+      >
+        Test Title
+      </div>
+    </div>
+    <div
+      class="mx_LiveBadge"
+    >
+      <i
+        aria-hidden="true"
+        class="mx_Icon mx_Icon_16 mx_Icon_live-badge"
+        role="presentation"
+        style="mask-image: url(\\"image-file-stub\\");"
+      />
+      Live
+    </div>
+  </div>
+</div>
+`;

test/voice-broadcast/utils/shouldDisplayAsVoiceBroadcastTile-test.ts

@@ -0,0 +1,149 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { EventType, IEvent, MatrixEvent } from "matrix-js-sdk/src/matrix";
+
+import {
+    shouldDisplayAsVoiceBroadcastTile,
+    VoiceBroadcastInfoEventType,
+    VoiceBroadcastInfoState,
+} from "../../../src/voice-broadcast";
+import { mkEvent } from "../../test-utils";
+
+describe("shouldDisplayAsVoiceBroadcastTile", () => {
+    let event: MatrixEvent;
+    const roomId = "!room:example.com";
+    const senderId = "@user:example.com";
+
+    const itShouldReturnFalse = () => {
+        it("should return false", () => {
+            expect(shouldDisplayAsVoiceBroadcastTile(event)).toBe(false);
+        });
+    };
+
+    const itShouldReturnTrue = () => {
+        it("should return true", () => {
+            expect(shouldDisplayAsVoiceBroadcastTile(event)).toBe(true);
+        });
+    };
+
+    describe("when a broken event occurs", () => {
+        beforeEach(() => {
+            event = 23 as unknown as MatrixEvent;
+        });
+
+        itShouldReturnFalse();
+    });
+
+    describe("when a non-voice broadcast info event occurs", () => {
+        beforeEach(() => {
+            event = mkEvent({
+                event: true,
+                type: EventType.RoomMessage,
+                room: roomId,
+                user: senderId,
+                content: {},
+            });
+        });
+
+        itShouldReturnFalse();
+    });
+
+    describe("when a voice broadcast info event with empty content occurs", () => {
+        beforeEach(() => {
+            event = mkEvent({
+                event: true,
+                type: VoiceBroadcastInfoEventType,
+                room: roomId,
+                user: senderId,
+                content: {},
+            });
+        });
+
+        itShouldReturnFalse();
+    });
+
+    describe("when a voice broadcast info event with undefined content occurs", () => {
+        beforeEach(() => {
+            event = mkEvent({
+                event: true,
+                type: VoiceBroadcastInfoEventType,
+                room: roomId,
+                user: senderId,
+                content: {},
+            });
+            event.getContent = () => undefined;
+        });
+
+        itShouldReturnFalse();
+    });
+
+    describe("when a voice broadcast info event in state started occurs", () => {
+        beforeEach(() => {
+            event = mkEvent({
+                event: true,
+                type: VoiceBroadcastInfoEventType,
+                room: roomId,
+                user: senderId,
+                content: {
+                    state: VoiceBroadcastInfoState.Started,
+                },
+            });
+        });
+
+        itShouldReturnTrue();
+    });
+
+    describe("when a redacted event occurs", () => {
+        beforeEach(() => {
+            event = mkEvent({
+                event: true,
+                type: VoiceBroadcastInfoEventType,
+                room: roomId,
+                user: senderId,
+                content: {},
+                unsigned: {
+                    redacted_because: {} as unknown as IEvent,
+                },
+            });
+            event.getContent = () => undefined;
+        });
+
+        itShouldReturnTrue();
+    });
+
+    describe.each(
+        [
+            VoiceBroadcastInfoState.Paused,
+            VoiceBroadcastInfoState.Running,
+            VoiceBroadcastInfoState.Stopped,
+        ],
+    )("when a voice broadcast info event in state %s occurs", (state: VoiceBroadcastInfoState) => {
+        beforeEach(() => {
+            event = mkEvent({
+                event: true,
+                type: VoiceBroadcastInfoEventType,
+                room: roomId,
+                user: senderId,
+                content: {
+                    state,
+                },
+            });
+        });
+
+        itShouldReturnFalse();
+    });
+});

yarn.lock

@@ -1977,6 +1977,11 @@
     "@testing-library/dom" "^8.0.0"
     "@types/react-dom" "<18.0.0"
 
+"@testing-library/user-event@^14.4.3":
+  version "14.4.3"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.4.3.tgz#af975e367743fa91989cd666666aec31a8f50591"
+  integrity sha512-kCUc5MEwaEMakkO5x7aoD+DLi02ehmEM2QCGWvNqAS1dV/fAvORWEjnjsEIvml59M7Y5kCkWN6fCCyPOe8OL6Q==
+
 "@tootallnate/once@1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"