Voice Broadcast playback UI (#9362)

* Implement Voice Broadcast UI

* Update src/voice-broadcast/models/VoiceBroadcastPlayback.ts

Co-authored-by: Travis Ralston <travisr@matrix.org>

Co-authored-by: Travis Ralston <travisr@matrix.org>

res/css/_components.pcss

@@ -365,5 +365,7 @@
 @import "./views/voip/_PiPContainer.pcss";
 @import "./views/voip/_VideoFeed.pcss";
 @import "./voice-broadcast/atoms/_LiveBadge.pcss";
+@import "./voice-broadcast/atoms/_PlaybackControlButton.pcss";
 @import "./voice-broadcast/atoms/_VoiceBroadcastHeader.pcss";
+@import "./voice-broadcast/molecules/_VoiceBroadcastPlaybackBody.pcss";
 @import "./voice-broadcast/molecules/_VoiceBroadcastRecordingBody.pcss";

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

@@ -0,0 +1,25 @@
+/*
+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_BroadcastPlaybackControlButton {
+    align-items: center;
+    background-color: $background;
+    border-radius: 50%;
+    display: flex;
+    height: 32px;
+    justify-content: center;
+    width: 32px;
+}

res/css/voice-broadcast/molecules/_VoiceBroadcastPlaybackBody.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_VoiceBroadcastPlaybackBody {
+    background-color: $quinary-content;
+    border-radius: 8px;
+    display: inline-block;
+    padding: 12px;
+}
+
+.mx_VoiceBroadcastPlaybackBody_controls {
+    display: flex;
+    justify-content: center;
+}

src/components/atoms/Icon.tsx

@@ -17,13 +17,19 @@ limitations under the License.
 import React from "react";
 
 import liveIcon from "../../../res/img/element-icons/live.svg";
+import pauseIcon from "../../../res/img/element-icons/pause.svg";
+import playIcon from "../../../res/img/element-icons/play.svg";
 
 export enum IconType {
     Live,
+    Pause,
+    Play,
 }
 
 const iconTypeMap = new Map([
     [IconType.Live, liveIcon],
+    [IconType.Pause, pauseIcon],
+    [IconType.Play, playIcon],
 ]);
 
 export enum IconColour {

src/components/views/messages/MessageEvent.tsx

@@ -58,6 +58,10 @@ interface IProps extends Omit<IBodyProps, "onMessageAllowed" | "mediaEventHelper
     isSeeingThroughMessageHiddenForModeration?: boolean;
 }
 
+interface State {
+    voiceBroadcastEnabled: boolean;
+}
+
 export interface IOperableEventTile {
     getEventTileOps(): IEventTileOps;
 }
@@ -81,7 +85,6 @@ 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, State> implements IMediaBody, IOperableEventTile {

src/i18n/strings/en_EN.json

@@ -638,6 +638,8 @@
     "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",
+    "pause voice broadcast": "pause voice broadcast",
+    "resume voice broadcast": "resume voice broadcast",
     "Voice broadcast": "Voice broadcast",
     "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",

src/voice-broadcast/components/VoiceBroadcastBody.tsx

@@ -15,19 +15,42 @@ limitations under the License.
 */
 
 import React from "react";
+import { MatrixEvent, RelationType } from "matrix-js-sdk/src/matrix";
 
 import {
     VoiceBroadcastRecordingBody,
     VoiceBroadcastRecordingsStore,
+    shouldDisplayAsVoiceBroadcastRecordingTile,
+    VoiceBroadcastInfoEventType,
+    VoiceBroadcastPlaybacksStore,
+    VoiceBroadcastPlaybackBody,
+    VoiceBroadcastInfoState,
 } from "..";
 import { IBodyProps } from "../../components/views/messages/IBodyProps";
 import { MatrixClientPeg } from "../../MatrixClientPeg";
 
 export const VoiceBroadcastBody: React.FC<IBodyProps> = ({ mxEvent }) => {
     const client = MatrixClientPeg.get();
-    const recording = VoiceBroadcastRecordingsStore.instance().getByInfoEvent(mxEvent, client);
+    const room = client.getRoom(mxEvent.getRoomId());
+    const relations = room?.getUnfilteredTimelineSet()?.relations?.getChildEventsForEvent(
+        mxEvent.getId(),
+        RelationType.Reference,
+        VoiceBroadcastInfoEventType,
+    );
+    const relatedEvents = relations?.getRelations();
+    const state = !relatedEvents?.find((event: MatrixEvent) => {
+        return event.getContent()?.state === VoiceBroadcastInfoState.Stopped;
+    }) ? VoiceBroadcastInfoState.Started : VoiceBroadcastInfoState.Stopped;
 
-    return <VoiceBroadcastRecordingBody
-        recording={recording}
+    if (shouldDisplayAsVoiceBroadcastRecordingTile(state, client, mxEvent)) {
+        const recording = VoiceBroadcastRecordingsStore.instance().getByInfoEvent(mxEvent, client);
+        return <VoiceBroadcastRecordingBody
+            recording={recording}
+        />;
+    }
+
+    const playback = VoiceBroadcastPlaybacksStore.instance().getByInfoEvent(mxEvent);
+    return <VoiceBroadcastPlaybackBody
+        playback={playback}
     />;
 };

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

@@ -0,0 +1,53 @@
+/*
+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 { VoiceBroadcastPlaybackState } from "../..";
+import { Icon, IconColour, IconType } from "../../../components/atoms/Icon";
+import AccessibleButton from "../../../components/views/elements/AccessibleButton";
+import { _t } from "../../../languageHandler";
+
+const stateIconMap = new Map([
+    [VoiceBroadcastPlaybackState.Playing, IconType.Pause],
+    [VoiceBroadcastPlaybackState.Paused, IconType.Play],
+    [VoiceBroadcastPlaybackState.Stopped, IconType.Play],
+]);
+
+interface Props {
+    onClick: () => void;
+    state: VoiceBroadcastPlaybackState;
+}
+
+export const PlaybackControlButton: React.FC<Props> = ({
+    onClick,
+    state,
+}) => {
+    const ariaLabel = state === VoiceBroadcastPlaybackState.Playing
+        ? _t("pause voice broadcast")
+        : _t("resume voice broadcast");
+
+    return <AccessibleButton
+        className="mx_BroadcastPlaybackControlButton"
+        onClick={onClick}
+        aria-label={ariaLabel}
+    >
+        <Icon
+            colour={IconColour.CompoundSecondaryContent}
+            type={stateIconMap.get(state)}
+        />
+    </AccessibleButton>;
+};

src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.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 from "react";
+
+import {
+    PlaybackControlButton,
+    VoiceBroadcastHeader,
+    VoiceBroadcastPlayback,
+} from "../..";
+import { useVoiceBroadcastPlayback } from "../../hooks/useVoiceBroadcastPlayback";
+
+interface VoiceBroadcastPlaybackBodyProps {
+    playback: VoiceBroadcastPlayback;
+}
+
+export const VoiceBroadcastPlaybackBody: React.FC<VoiceBroadcastPlaybackBodyProps> = ({
+    playback,
+}) => {
+    const {
+        roomName,
+        sender,
+        toggle,
+        playbackState,
+    } = useVoiceBroadcastPlayback(playback);
+
+    return (
+        <div className="mx_VoiceBroadcastPlaybackBody">
+            <VoiceBroadcastHeader
+                live={false}
+                sender={sender}
+                roomName={roomName}
+                showBroadcast={true}
+            />
+            <div className="mx_VoiceBroadcastPlaybackBody_controls">
+                <PlaybackControlButton
+                    onClick={toggle}
+                    state={playbackState}
+                />
+            </div>
+        </div>
+    );
+};

src/voice-broadcast/hooks/useVoiceBroadcastPlayback.ts

@@ -0,0 +1,49 @@
+/*
+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 { useState } from "react";
+
+import { useTypedEventEmitter } from "../../hooks/useEventEmitter";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+import {
+    VoiceBroadcastPlayback,
+    VoiceBroadcastPlaybackEvent,
+    VoiceBroadcastPlaybackState,
+} from "..";
+
+export const useVoiceBroadcastPlayback = (playback: VoiceBroadcastPlayback) => {
+    const client = MatrixClientPeg.get();
+    const room = client.getRoom(playback.infoEvent.getRoomId());
+    const playbackToggle = () => {
+        playback.toggle();
+    };
+
+    const [playbackState, setPlaybackState] = useState(playback.getState());
+    useTypedEventEmitter(
+        playback,
+        VoiceBroadcastPlaybackEvent.StateChanged,
+        (state: VoiceBroadcastPlaybackState, _playback: VoiceBroadcastPlayback) => {
+            setPlaybackState(state);
+        },
+    );
+
+    return {
+        roomName: room.name,
+        sender: playback.infoEvent.sender,
+        toggle: playbackToggle,
+        playbackState,
+    };
+};

src/voice-broadcast/index.ts

@@ -21,13 +21,18 @@ limitations under the License.
 
 import { RelationType } from "matrix-js-sdk/src/matrix";
 
+export * from "./models/VoiceBroadcastPlayback";
+export * from "./models/VoiceBroadcastRecording";
 export * from "./audio/VoiceBroadcastRecorder";
 export * from "./components/VoiceBroadcastBody";
 export * from "./components/atoms/LiveBadge";
+export * from "./components/atoms/PlaybackControlButton";
 export * from "./components/atoms/VoiceBroadcastHeader";
+export * from "./components/molecules/VoiceBroadcastPlaybackBody";
 export * from "./components/molecules/VoiceBroadcastRecordingBody";
-export * from "./models/VoiceBroadcastRecording";
+export * from "./stores/VoiceBroadcastPlaybacksStore";
 export * from "./stores/VoiceBroadcastRecordingsStore";
+export * from "./utils/shouldDisplayAsVoiceBroadcastRecordingTile";
 export * from "./utils/shouldDisplayAsVoiceBroadcastTile";
 export * from "./utils/startNewVoiceBroadcastRecording";
 export * from "./hooks/useVoiceBroadcastRecording";

src/voice-broadcast/models/VoiceBroadcastPlayback.ts

@@ -0,0 +1,76 @@
+/*
+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 { TypedEventEmitter } from "matrix-js-sdk/src/models/typed-event-emitter";
+
+import { IDestroyable } from "../../utils/IDestroyable";
+
+export enum VoiceBroadcastPlaybackState {
+    Paused,
+    Playing,
+    Stopped,
+}
+
+export enum VoiceBroadcastPlaybackEvent {
+    StateChanged = "state_changed",
+}
+
+interface EventMap {
+    [VoiceBroadcastPlaybackEvent.StateChanged]: (state: VoiceBroadcastPlaybackState) => void;
+}
+
+export class VoiceBroadcastPlayback
+    extends TypedEventEmitter<VoiceBroadcastPlaybackEvent, EventMap>
+    implements IDestroyable {
+    private state = VoiceBroadcastPlaybackState.Stopped;
+
+    public constructor(
+        public readonly infoEvent: MatrixEvent,
+    ) {
+        super();
+    }
+
+    public start() {
+        this.setState(VoiceBroadcastPlaybackState.Playing);
+    }
+
+    public stop() {
+        this.setState(VoiceBroadcastPlaybackState.Stopped);
+    }
+
+    public toggle() {
+        if (this.state === VoiceBroadcastPlaybackState.Stopped) {
+            this.setState(VoiceBroadcastPlaybackState.Playing);
+            return;
+        }
+
+        this.setState(VoiceBroadcastPlaybackState.Stopped);
+    }
+
+    public getState(): VoiceBroadcastPlaybackState {
+        return this.state;
+    }
+
+    private setState(state: VoiceBroadcastPlaybackState): void {
+        this.state = state;
+        this.emit(VoiceBroadcastPlaybackEvent.StateChanged, state);
+    }
+
+    public destroy(): void {
+        this.removeAllListeners();
+    }
+}

src/voice-broadcast/stores/VoiceBroadcastPlaybacksStore.ts

@@ -0,0 +1,71 @@
+/*
+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 { TypedEventEmitter } from "matrix-js-sdk/src/models/typed-event-emitter";
+
+import { VoiceBroadcastPlayback } from "..";
+
+export enum VoiceBroadcastPlaybacksStoreEvent {
+    CurrentChanged = "current_changed",
+}
+
+interface EventMap {
+    [VoiceBroadcastPlaybacksStoreEvent.CurrentChanged]: (recording: VoiceBroadcastPlayback) => void;
+}
+
+/**
+ * This store provides access to the current and specific Voice Broadcast playbacks.
+ */
+export class VoiceBroadcastPlaybacksStore extends TypedEventEmitter<VoiceBroadcastPlaybacksStoreEvent, EventMap> {
+    private current: VoiceBroadcastPlayback | null;
+    private playbacks = new Map<string, VoiceBroadcastPlayback>();
+
+    public constructor() {
+        super();
+    }
+
+    public setCurrent(current: VoiceBroadcastPlayback): void {
+        if (this.current === current) return;
+
+        this.current = current;
+        this.playbacks.set(current.infoEvent.getId(), current);
+        this.emit(VoiceBroadcastPlaybacksStoreEvent.CurrentChanged, current);
+    }
+
+    public getCurrent(): VoiceBroadcastPlayback {
+        return this.current;
+    }
+
+    public getByInfoEvent(infoEvent: MatrixEvent): VoiceBroadcastPlayback {
+        const infoEventId = infoEvent.getId();
+
+        if (!this.playbacks.has(infoEventId)) {
+            this.playbacks.set(infoEventId, new VoiceBroadcastPlayback(infoEvent));
+        }
+
+        return this.playbacks.get(infoEventId);
+    }
+
+    public static readonly _instance = new VoiceBroadcastPlaybacksStore();
+
+    /**
+     * TODO Michael W: replace when https://github.com/matrix-org/matrix-react-sdk/pull/9293 has been merged
+     */
+    public static instance() {
+        return VoiceBroadcastPlaybacksStore._instance;
+    }
+}

src/voice-broadcast/utils/shouldDisplayAsVoiceBroadcastRecordingTile.ts

@@ -0,0 +1,30 @@
+/*
+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 { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
+
+import { VoiceBroadcastInfoState } from "..";
+
+export const shouldDisplayAsVoiceBroadcastRecordingTile = (
+    state: VoiceBroadcastInfoState,
+    client: MatrixClient,
+    event: MatrixEvent,
+): boolean => {
+    const userId = client.getUserId();
+    return !!userId
+        && userId === event.getSender()
+        && state !== VoiceBroadcastInfoState.Stopped;
+};

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

@@ -26,6 +26,10 @@ import {
     VoiceBroadcastRecordingBody,
     VoiceBroadcastRecordingsStore,
     VoiceBroadcastRecording,
+    shouldDisplayAsVoiceBroadcastRecordingTile,
+    VoiceBroadcastPlaybackBody,
+    VoiceBroadcastPlayback,
+    VoiceBroadcastPlaybacksStore,
 } from "../../../src/voice-broadcast";
 import { mkEvent, stubClient } from "../../test-utils";
 
@@ -33,11 +37,20 @@ jest.mock("../../../src/voice-broadcast/components/molecules/VoiceBroadcastRecor
     VoiceBroadcastRecordingBody: jest.fn(),
 }));
 
+jest.mock("../../../src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody", () => ({
+    VoiceBroadcastPlaybackBody: jest.fn(),
+}));
+
+jest.mock("../../../src/voice-broadcast/utils/shouldDisplayAsVoiceBroadcastRecordingTile", () => ({
+    shouldDisplayAsVoiceBroadcastRecordingTile: jest.fn(),
+}));
+
 describe("VoiceBroadcastBody", () => {
     const roomId = "!room:example.com";
     let client: MatrixClient;
     let infoEvent: MatrixEvent;
     let testRecording: VoiceBroadcastRecording;
+    let testPlayback: VoiceBroadcastPlayback;
 
     const mkVoiceBroadcastInfoEvent = (state: VoiceBroadcastInfoState) => {
         return mkEvent({
@@ -66,12 +79,19 @@ describe("VoiceBroadcastBody", () => {
         client = stubClient();
         infoEvent = mkVoiceBroadcastInfoEvent(VoiceBroadcastInfoState.Started);
         testRecording = new VoiceBroadcastRecording(infoEvent, client);
+        testPlayback = new VoiceBroadcastPlayback(infoEvent);
         mocked(VoiceBroadcastRecordingBody).mockImplementation(({ recording }) => {
             if (testRecording === recording) {
                 return <div data-testid="voice-broadcast-recording-body" />;
             }
         });
 
+        mocked(VoiceBroadcastPlaybackBody).mockImplementation(({ playback }) => {
+            if (testPlayback === playback) {
+                return <div data-testid="voice-broadcast-playback-body" />;
+            }
+        });
+
         jest.spyOn(VoiceBroadcastRecordingsStore.instance(), "getByInfoEvent").mockImplementation(
             (getEvent: MatrixEvent, getClient: MatrixClient) => {
                 if (getEvent === infoEvent && getClient === client) {
@@ -79,12 +99,35 @@ describe("VoiceBroadcastBody", () => {
                 }
             },
         );
+
+        jest.spyOn(VoiceBroadcastPlaybacksStore.instance(), "getByInfoEvent").mockImplementation(
+            (getEvent: MatrixEvent) => {
+                if (getEvent === infoEvent) {
+                    return testPlayback;
+                }
+            },
+        );
     });
 
-    describe("when rendering a voice broadcast", () => {
+    describe("when displaying a voice broadcast recording", () => {
+        beforeEach(() => {
+            mocked(shouldDisplayAsVoiceBroadcastRecordingTile).mockReturnValue(true);
+        });
+
         it("should render a voice broadcast recording body", () => {
             renderVoiceBroadcast();
             screen.getByTestId("voice-broadcast-recording-body");
         });
     });
+
+    describe("when displaying a voice broadcast playback", () => {
+        beforeEach(() => {
+            mocked(shouldDisplayAsVoiceBroadcastRecordingTile).mockReturnValue(false);
+        });
+
+        it("should render a voice broadcast playback body", () => {
+            renderVoiceBroadcast();
+            screen.getByTestId("voice-broadcast-playback-body");
+        });
+    });
 });

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

@@ -0,0 +1,45 @@
+/*
+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, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { PlaybackControlButton, VoiceBroadcastPlaybackState } from "../../../../src/voice-broadcast";
+
+describe("PlaybackControlButton", () => {
+    let onClick: () => void;
+
+    beforeEach(() => {
+        onClick = jest.fn();
+    });
+
+    it.each([
+        [VoiceBroadcastPlaybackState.Playing],
+        [VoiceBroadcastPlaybackState.Paused],
+        [VoiceBroadcastPlaybackState.Stopped],
+    ])("should render state »%s« as expected", (state: VoiceBroadcastPlaybackState) => {
+        const result = render(<PlaybackControlButton state={state} onClick={onClick} />);
+        expect(result.container).toMatchSnapshot();
+    });
+
+    it("should call onClick on click", async () => {
+        render(<PlaybackControlButton state={VoiceBroadcastPlaybackState.Playing} onClick={onClick} />);
+        const button = screen.getByLabelText("pause voice broadcast");
+        await userEvent.click(button);
+        expect(onClick).toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PlaybackControlButton should render state »0« as expected 1`] = `
+<div>
+  <div
+    aria-label="resume voice broadcast"
+    class="mx_AccessibleButton mx_BroadcastPlaybackControlButton"
+    role="button"
+    tabindex="0"
+  >
+    <i
+      aria-hidden="true"
+      class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
+      role="presentation"
+      style="mask-image: url(\\"image-file-stub\\");"
+    />
+  </div>
+</div>
+`;
+
+exports[`PlaybackControlButton should render state »1« as expected 1`] = `
+<div>
+  <div
+    aria-label="pause voice broadcast"
+    class="mx_AccessibleButton mx_BroadcastPlaybackControlButton"
+    role="button"
+    tabindex="0"
+  >
+    <i
+      aria-hidden="true"
+      class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
+      role="presentation"
+      style="mask-image: url(\\"image-file-stub\\");"
+    />
+  </div>
+</div>
+`;
+
+exports[`PlaybackControlButton should render state »2« as expected 1`] = `
+<div>
+  <div
+    aria-label="resume voice broadcast"
+    class="mx_AccessibleButton mx_BroadcastPlaybackControlButton"
+    role="button"
+    tabindex="0"
+  >
+    <i
+      aria-hidden="true"
+      class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
+      role="presentation"
+      style="mask-image: url(\\"image-file-stub\\");"
+    />
+  </div>
+</div>
+`;

test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.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 { MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { render, RenderResult } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import {
+    VoiceBroadcastInfoEventType,
+    VoiceBroadcastPlayback,
+    VoiceBroadcastPlaybackBody,
+    VoiceBroadcastPlaybackState,
+} from "../../../../src/voice-broadcast";
+import { mkEvent, stubClient } from "../../../test-utils";
+
+describe("VoiceBroadcastPlaybackBody", () => {
+    const userId = "@user:example.com";
+    const roomId = "!room:example.com";
+    let infoEvent: MatrixEvent;
+    let playback: VoiceBroadcastPlayback;
+
+    beforeAll(() => {
+        stubClient();
+        infoEvent = mkEvent({
+            event: true,
+            type: VoiceBroadcastInfoEventType,
+            content: {},
+            room: roomId,
+            user: userId,
+        });
+        playback = new VoiceBroadcastPlayback(infoEvent);
+    });
+
+    describe("when rendering a broadcast", () => {
+        let renderResult: RenderResult;
+
+        beforeEach(() => {
+            renderResult = render(<VoiceBroadcastPlaybackBody playback={playback} />);
+        });
+
+        it("should render as expected", () => {
+            expect(renderResult.container).toMatchSnapshot();
+        });
+
+        describe("and clicking the play button", () => {
+            beforeEach(async () => {
+                await userEvent.click(renderResult.getByLabelText("resume voice broadcast"));
+            });
+
+            it("should stop the recording", () => {
+                expect(playback.getState()).toBe(VoiceBroadcastPlaybackState.Playing);
+            });
+        });
+    });
+});

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

@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VoiceBroadcastPlaybackBody when rendering a broadcast should render as expected 1`] = `
+<div>
+  <div
+    class="mx_VoiceBroadcastPlaybackBody"
+  >
+    <div
+      class="mx_VoiceBroadcastHeader"
+    >
+      <span
+        class="mx_BaseAvatar"
+        role="presentation"
+      >
+        <span
+          aria-hidden="true"
+          class="mx_BaseAvatar_initial"
+          style="font-size: 26px; width: 40px; line-height: 40px;"
+        >
+          U
+        </span>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="mx_BaseAvatar_image"
+          src="data:image/png;base64,00"
+          style="width: 40px; height: 40px;"
+          title="@user:example.com"
+        />
+      </span>
+      <div
+        class="mx_VoiceBroadcastHeader_content"
+      >
+        <div
+          class="mx_VoiceBroadcastHeader_sender"
+        >
+          @user:example.com
+        </div>
+        <div
+          class="mx_VoiceBroadcastHeader_room"
+        >
+          My room
+        </div>
+        <div
+          class="mx_VoiceBroadcastHeader_line"
+        >
+          <i
+            aria-hidden="true"
+            class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
+            role="presentation"
+            style="mask-image: url(\\"image-file-stub\\");"
+          />
+          Voice broadcast
+        </div>
+      </div>
+    </div>
+    <div
+      class="mx_VoiceBroadcastPlaybackBody_controls"
+    >
+      <div
+        aria-label="resume voice broadcast"
+        class="mx_AccessibleButton mx_BroadcastPlaybackControlButton"
+        role="button"
+        tabindex="0"
+      >
+        <i
+          aria-hidden="true"
+          class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
+          role="presentation"
+          style="mask-image: url(\\"image-file-stub\\");"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;

test/voice-broadcast/models/VoiceBroadcastPlayback-test.ts

@@ -0,0 +1,116 @@
+/*
+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 { mocked } from "jest-mock";
+import { MatrixEvent } from "matrix-js-sdk/src/matrix";
+
+import {
+    VoiceBroadcastInfoEventType,
+    VoiceBroadcastPlayback,
+    VoiceBroadcastPlaybackEvent,
+    VoiceBroadcastPlaybackState,
+} from "../../../src/voice-broadcast";
+import { mkEvent } from "../../test-utils";
+
+describe("VoiceBroadcastPlayback", () => {
+    const userId = "@user:example.com";
+    const roomId = "!room:example.com";
+    let infoEvent: MatrixEvent;
+    let playback: VoiceBroadcastPlayback;
+    let onStateChanged: (state: VoiceBroadcastPlaybackState) => void;
+
+    const itShouldSetTheStateTo = (state: VoiceBroadcastPlaybackState) => {
+        it(`should set the state to ${state}`, () => {
+            expect(playback.getState()).toBe(state);
+        });
+    };
+
+    const itShouldEmitAStateChangedEvent = (state: VoiceBroadcastPlaybackState) => {
+        it(`should emit a ${state} state changed event`, () => {
+            expect(mocked(onStateChanged)).toHaveBeenCalledWith(state);
+        });
+    };
+
+    beforeAll(() => {
+        infoEvent = mkEvent({
+            event: true,
+            type: VoiceBroadcastInfoEventType,
+            user: userId,
+            room: roomId,
+            content: {},
+        });
+    });
+
+    beforeEach(() => {
+        onStateChanged = jest.fn();
+
+        playback = new VoiceBroadcastPlayback(infoEvent);
+        jest.spyOn(playback, "removeAllListeners");
+        playback.on(VoiceBroadcastPlaybackEvent.StateChanged, onStateChanged);
+    });
+
+    it("should expose the info event", () => {
+        expect(playback.infoEvent).toBe(infoEvent);
+    });
+
+    it("should be in state Stopped", () => {
+        expect(playback.getState()).toBe(VoiceBroadcastPlaybackState.Stopped);
+    });
+
+    describe("when calling start", () => {
+        beforeEach(() => {
+            playback.start();
+        });
+
+        itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Playing);
+
+        describe("and calling toggle", () => {
+            beforeEach(() => {
+                playback.toggle();
+            });
+
+            itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Stopped);
+            itShouldEmitAStateChangedEvent(VoiceBroadcastPlaybackState.Stopped);
+        });
+    });
+
+    describe("when calling stop", () => {
+        beforeEach(() => {
+            playback.stop();
+        });
+
+        itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Stopped);
+
+        describe("and calling toggle", () => {
+            beforeEach(() => {
+                playback.toggle();
+            });
+
+            itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Playing);
+            itShouldEmitAStateChangedEvent(VoiceBroadcastPlaybackState.Stopped);
+        });
+    });
+
+    describe("when calling destroy", () => {
+        beforeEach(() => {
+            playback.destroy();
+        });
+
+        it("should call removeAllListeners", () => {
+            expect(playback.removeAllListeners).toHaveBeenCalled();
+        });
+    });
+});

test/voice-broadcast/stores/VoiceBroadcastPlaybacksStore-test.ts

@@ -0,0 +1,128 @@
+/*
+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 { mocked } from "jest-mock";
+import {
+    MatrixClient,
+    MatrixEvent,
+    Room,
+} from "matrix-js-sdk/src/matrix";
+
+import {
+    VoiceBroadcastInfoEventType,
+    VoiceBroadcastPlayback,
+    VoiceBroadcastPlaybacksStore,
+    VoiceBroadcastPlaybacksStoreEvent,
+} from "../../../src/voice-broadcast";
+import { mkEvent, mkStubRoom, stubClient } from "../../test-utils";
+
+jest.mock("../../../src/voice-broadcast/models/VoiceBroadcastPlayback", () => ({
+    ...jest.requireActual("../../../src/voice-broadcast/models/VoiceBroadcastPlayback") as object,
+    VoiceBroadcastPlayback: jest.fn().mockImplementation((infoEvent: MatrixEvent) => ({ infoEvent })),
+}));
+
+describe("VoiceBroadcastPlaybacksStore", () => {
+    const roomId = "!room:example.com";
+    let client: MatrixClient;
+    let room: Room;
+    let infoEvent: MatrixEvent;
+    let playback: VoiceBroadcastPlayback;
+    let playbacks: VoiceBroadcastPlaybacksStore;
+    let onCurrentChanged: (playback: VoiceBroadcastPlayback) => void;
+
+    beforeEach(() => {
+        client = stubClient();
+        room = mkStubRoom(roomId, "test room", client);
+        mocked(client.getRoom).mockImplementation((roomId: string) => {
+            if (roomId === room.roomId) {
+                return room;
+            }
+        });
+        infoEvent = mkEvent({
+            event: true,
+            type: VoiceBroadcastInfoEventType,
+            user: client.getUserId(),
+            room: roomId,
+            content: {},
+        });
+        playback = {
+            infoEvent,
+        } as unknown as VoiceBroadcastPlayback;
+        playbacks = new VoiceBroadcastPlaybacksStore();
+        onCurrentChanged = jest.fn();
+        playbacks.on(VoiceBroadcastPlaybacksStoreEvent.CurrentChanged, onCurrentChanged);
+    });
+
+    afterEach(() => {
+        playbacks.off(VoiceBroadcastPlaybacksStoreEvent.CurrentChanged, onCurrentChanged);
+    });
+
+    describe("when setting a current Voice Broadcast playback", () => {
+        beforeEach(() => {
+            playbacks.setCurrent(playback);
+        });
+
+        it("should return it as current", () => {
+            expect(playbacks.getCurrent()).toBe(playback);
+        });
+
+        it("should return it by id", () => {
+            expect(playbacks.getByInfoEvent(infoEvent)).toBe(playback);
+        });
+
+        it("should emit a CurrentChanged event", () => {
+            expect(onCurrentChanged).toHaveBeenCalledWith(playback);
+        });
+
+        describe("and setting the same again", () => {
+            beforeEach(() => {
+                mocked(onCurrentChanged).mockClear();
+                playbacks.setCurrent(playback);
+            });
+
+            it("should not emit a CurrentChanged event", () => {
+                expect(onCurrentChanged).not.toHaveBeenCalled();
+            });
+        });
+    });
+
+    describe("getByInfoEventId", () => {
+        let returnedPlayback: VoiceBroadcastPlayback;
+
+        describe("when retrieving a known playback", () => {
+            beforeEach(() => {
+                playbacks.setCurrent(playback);
+                returnedPlayback = playbacks.getByInfoEvent(infoEvent);
+            });
+
+            it("should return the playback", () => {
+                expect(returnedPlayback).toBe(playback);
+            });
+        });
+
+        describe("when retrieving an unknown playback", () => {
+            beforeEach(() => {
+                returnedPlayback = playbacks.getByInfoEvent(infoEvent);
+            });
+
+            it("should return the playback", () => {
+                expect(returnedPlayback).toEqual({
+                    infoEvent,
+                });
+            });
+        });
+    });
+});

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

@@ -0,0 +1,98 @@
+/*
+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 { mocked } from "jest-mock";
+import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
+
+import {
+    shouldDisplayAsVoiceBroadcastRecordingTile,
+    VoiceBroadcastInfoEventType,
+    VoiceBroadcastInfoState,
+} from "../../../src/voice-broadcast";
+import { createTestClient, mkEvent } from "../../test-utils";
+
+const testCases = [
+    [
+        "@user1:example.com", // own MXID
+        "@user1:example.com", // sender MXID
+        VoiceBroadcastInfoState.Started,
+        true, // expected return value
+    ],
+    [
+        "@user1:example.com",
+        "@user1:example.com",
+        VoiceBroadcastInfoState.Paused,
+        true,
+    ],
+    [
+        "@user1:example.com",
+        "@user1:example.com",
+        VoiceBroadcastInfoState.Running,
+        true,
+    ],
+    [
+        "@user1:example.com",
+        "@user1:example.com",
+        VoiceBroadcastInfoState.Stopped,
+        false,
+    ],
+    [
+        "@user2:example.com",
+        "@user1:example.com",
+        VoiceBroadcastInfoState.Started,
+        false,
+    ],
+    [
+        null,
+        null,
+        null,
+        false,
+    ],
+    [
+        undefined,
+        undefined,
+        undefined,
+        false,
+    ],
+];
+
+describe("shouldDisplayAsVoiceBroadcastRecordingTile", () => {
+    let event: MatrixEvent;
+    let client: MatrixClient;
+
+    beforeAll(() => {
+        client = createTestClient();
+    });
+
+    describe.each(testCases)(
+        "when called with user »%s«, sender »%s«, state »%s«",
+        (userId: string, senderId: string, state: VoiceBroadcastInfoState, expected: boolean) => {
+            beforeEach(() => {
+                event = mkEvent({
+                    event: true,
+                    type: VoiceBroadcastInfoEventType,
+                    room: "!room:example.com",
+                    user: senderId,
+                    content: {},
+                });
+                mocked(client.getUserId).mockReturnValue(userId);
+            });
+
+            it(`should return ${expected}`, () => {
+                expect(shouldDisplayAsVoiceBroadcastRecordingTile(state, client, event)).toBe(expected);
+            });
+        });
+});