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>

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>
+`;