Implement small broadcast PiP (#9755)

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

@@ -19,7 +19,7 @@ limitations under the License.
     background-color: $alert;
     border-radius: 2px;
     color: $live-badge-color;
-    display: flex;
+    display: inline-flex;
     font-size: $font-12px;
     font-weight: $font-semi-bold;
     gap: $spacing-4;

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

@@ -20,6 +20,7 @@ limitations under the License.
     border-radius: 50%;
     color: $secondary-content;
     display: flex;
+    flex: 0 0 32px;
     height: 32px;
     justify-content: center;
     width: 32px;

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

@@ -17,7 +17,7 @@ limitations under the License.
     gap: $spacing-8;
     line-height: 20px;
     margin-bottom: $spacing-16;
-    width: 266px;
+    min-width: 0;
 }
 
 .mx_VoiceBroadcastHeader_content {
@@ -25,9 +25,17 @@ limitations under the License.
     min-width: 0;
 }
 
+.mx_VoiceBroadcastHeader_room_wrapper {
+    align-items: center;
+    display: flex;
+    gap: 4px;
+    justify-content: flex-start;
+}
+
 .mx_VoiceBroadcastHeader_room {
     font-size: $font-12px;
     font-weight: $font-semi-bold;
+    min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;

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

@@ -21,6 +21,7 @@ limitations under the License.
     display: inline-block;
     font-size: $font-12px;
     padding: $spacing-12;
+    width: 271px;
 
     .mx_Clock {
         line-height: 1;
@@ -32,6 +33,24 @@ limitations under the License.
     box-shadow: 0 2px 8px 0 #0000004a;
 }
 
+.mx_VoiceBroadcastBody--small {
+    display: flex;
+    gap: $spacing-8;
+    width: 192px;
+
+    .mx_VoiceBroadcastHeader {
+        margin-bottom: 0;
+    }
+
+    .mx_VoiceBroadcastControl {
+        align-self: center;
+    }
+
+    .mx_LiveBadge {
+        margin-top: 4px;
+    }
+}
+
 .mx_VoiceBroadcastBody_divider {
     background-color: $quinary-content;
     border: 0;
@@ -56,3 +75,9 @@ limitations under the License.
     display: flex;
     gap: $spacing-8;
 }
+
+.mx_VoiceBroadcastBody__small-close {
+    right: 8px;
+    position: absolute;
+    top: 8px;
+}

src/components/views/voip/PipView.tsx

@@ -45,6 +45,7 @@ import {
     VoiceBroadcastPreRecordingPip,
     VoiceBroadcastRecording,
     VoiceBroadcastRecordingPip,
+    VoiceBroadcastSmallPlaybackBody,
 } from "../../../voice-broadcast";
 import { useCurrentVoiceBroadcastPlayback } from "../../../voice-broadcast/hooks/useCurrentVoiceBroadcastPlayback";
 
@@ -335,9 +336,17 @@ class PipView extends React.Component<IProps, IState> {
     }
 
     private createVoiceBroadcastPlaybackPipContent(voiceBroadcastPlayback: VoiceBroadcastPlayback): CreatePipChildren {
+        if (this.state.viewedRoomId === voiceBroadcastPlayback.infoEvent.getRoomId()) {
+            return ({ onStartMoving }) => (
+                <div onMouseDown={onStartMoving}>
+                    <VoiceBroadcastPlaybackBody playback={voiceBroadcastPlayback} pip={true} />
+                </div>
+            );
+        }
+
         return ({ onStartMoving }) => (
             <div onMouseDown={onStartMoving}>
-                <VoiceBroadcastPlaybackBody playback={voiceBroadcastPlayback} pip={true} />
+                <VoiceBroadcastSmallPlaybackBody playback={voiceBroadcastPlayback} />
             </div>
         );
     }

src/i18n/strings/en_EN.json

@@ -653,16 +653,16 @@
     "Stop live broadcasting?": "Stop live broadcasting?",
     "Are you sure you want to stop your live broadcast?This will end the broadcast and the full recording will be available in the room.": "Are you sure you want to stop your live broadcast?This will end the broadcast and the full recording will be available in the room.",
     "Yes, stop broadcast": "Yes, stop broadcast",
-    "play voice broadcast": "play voice broadcast",
-    "resume voice broadcast": "resume voice broadcast",
-    "pause voice broadcast": "pause voice broadcast",
     "30s backward": "30s backward",
     "30s forward": "30s forward",
     "Go live": "Go live",
+    "resume voice broadcast": "resume voice broadcast",
+    "pause voice broadcast": "pause voice broadcast",
     "Change input device": "Change input device",
     "Live": "Live",
     "Voice broadcast": "Voice broadcast",
     "Buffering…": "Buffering…",
+    "play voice broadcast": "play 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",
     "Your %(brand)s is misconfigured": "Your %(brand)s is misconfigured",

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

@@ -34,12 +34,14 @@ import AccessibleTooltipButton from "../../../components/views/elements/Accessib
 interface VoiceBroadcastHeaderProps {
     linkToRoom?: boolean;
     live?: VoiceBroadcastLiveness;
+    liveBadgePosition?: "middle" | "right";
     onCloseClick?: () => void;
     onMicrophoneLineClick?: ((e: ButtonEvent) => void | Promise<void>) | null;
     room: Room;
     microphoneLabel?: string;
     showBroadcast?: boolean;
     showBuffering?: boolean;
+    bufferingPosition?: "line" | "title";
     timeLeft?: number;
     showClose?: boolean;
 }
@@ -47,12 +49,14 @@ interface VoiceBroadcastHeaderProps {
 export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
     linkToRoom = false,
     live = "not-live",
+    liveBadgePosition = "right",
     onCloseClick = () => {},
     onMicrophoneLineClick = null,
     room,
     microphoneLabel,
     showBroadcast = false,
     showBuffering = false,
+    bufferingPosition = "line",
     showClose = false,
     timeLeft,
 }) => {
@@ -78,7 +82,7 @@ export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
         </div>
     );
 
-    const buffering = showBuffering && (
+    const bufferingLine = showBuffering && bufferingPosition === "line" && (
         <div className="mx_VoiceBroadcastHeader_line">
             <Spinner w={14} h={14} />
             {_t("Buffering…")}
@@ -110,7 +114,12 @@ export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
     };
 
     let roomAvatar = <RoomAvatar room={room} width={32} height={32} />;
-    let roomName = <div className="mx_VoiceBroadcastHeader_room">{room.name}</div>;
+    let roomName = (
+        <div className="mx_VoiceBroadcastHeader_room_wrapper">
+            <div className="mx_VoiceBroadcastHeader_room">{room.name}</div>
+            {showBuffering && bufferingPosition === "title" && <Spinner w={12} h={12} />}
+        </div>
+    );
 
     if (linkToRoom) {
         roomAvatar = <AccessibleButton onClick={onRoomAvatarOrNameClick}>{roomAvatar}</AccessibleButton>;
@@ -126,9 +135,10 @@ export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
                 {microphoneLine}
                 {timeLeftLine}
                 {broadcast}
-                {buffering}
+                {bufferingLine}
+                {liveBadgePosition === "middle" && liveBadge}
             </div>
-            {liveBadge}
+            {liveBadgePosition === "right" && liveBadge}
             {closeButton}
         </div>
     );

src/voice-broadcast/components/atoms/VoiceBroadcastPlaybackControl.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 { Icon as PlayIcon } from "../../../../res/img/element-icons/play.svg";
+import { Icon as PauseIcon } from "../../../../res/img/element-icons/pause.svg";
+import { _t } from "../../../languageHandler";
+import { VoiceBroadcastControl, VoiceBroadcastPlaybackState } from "../..";
+
+interface Props {
+    onClick: () => void;
+    state: VoiceBroadcastPlaybackState;
+}
+
+export const VoiceBroadcastPlaybackControl: React.FC<Props> = ({ onClick, state }) => {
+    let controlIcon: React.FC<React.SVGProps<SVGSVGElement>>;
+    let controlLabel: string;
+    let className = "";
+
+    switch (state) {
+        case VoiceBroadcastPlaybackState.Stopped:
+            controlIcon = PlayIcon;
+            className = "mx_VoiceBroadcastControl-play";
+            controlLabel = _t("play voice broadcast");
+            break;
+        case VoiceBroadcastPlaybackState.Paused:
+            controlIcon = PlayIcon;
+            className = "mx_VoiceBroadcastControl-play";
+            controlLabel = _t("resume voice broadcast");
+            break;
+        case VoiceBroadcastPlaybackState.Buffering:
+        case VoiceBroadcastPlaybackState.Playing:
+            controlIcon = PauseIcon;
+            controlLabel = _t("pause voice broadcast");
+            break;
+    }
+
+    return <VoiceBroadcastControl className={className} label={controlLabel} icon={controlIcon} onClick={onClick} />;
+};

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

@@ -18,14 +18,12 @@ import React, { ReactElement } from "react";
 import classNames from "classnames";
 
 import {
-    VoiceBroadcastControl,
     VoiceBroadcastHeader,
     VoiceBroadcastPlayback,
+    VoiceBroadcastPlaybackControl,
     VoiceBroadcastPlaybackState,
 } from "../..";
 import { useVoiceBroadcastPlayback } from "../../hooks/useVoiceBroadcastPlayback";
-import { Icon as PlayIcon } from "../../../../res/img/element-icons/play.svg";
-import { Icon as PauseIcon } from "../../../../res/img/element-icons/pause.svg";
 import { Icon as Back30sIcon } from "../../../../res/img/element-icons/Back30s.svg";
 import { Icon as Forward30sIcon } from "../../../../res/img/element-icons/Forward30s.svg";
 import { _t } from "../../../languageHandler";
@@ -43,32 +41,6 @@ interface VoiceBroadcastPlaybackBodyProps {
 export const VoiceBroadcastPlaybackBody: React.FC<VoiceBroadcastPlaybackBodyProps> = ({ pip = false, playback }) => {
     const { times, liveness, playbackState, room, sender, toggle } = useVoiceBroadcastPlayback(playback);
 
-    let controlIcon: React.FC<React.SVGProps<SVGSVGElement>>;
-    let controlLabel: string;
-    let className = "";
-
-    switch (playbackState) {
-        case VoiceBroadcastPlaybackState.Stopped:
-            controlIcon = PlayIcon;
-            className = "mx_VoiceBroadcastControl-play";
-            controlLabel = _t("play voice broadcast");
-            break;
-        case VoiceBroadcastPlaybackState.Paused:
-            controlIcon = PlayIcon;
-            className = "mx_VoiceBroadcastControl-play";
-            controlLabel = _t("resume voice broadcast");
-            break;
-        case VoiceBroadcastPlaybackState.Buffering:
-        case VoiceBroadcastPlaybackState.Playing:
-            controlIcon = PauseIcon;
-            controlLabel = _t("pause voice broadcast");
-            break;
-    }
-
-    const control = (
-        <VoiceBroadcastControl className={className} label={controlLabel} icon={controlIcon} onClick={toggle} />
-    );
-
     let seekBackwardButton: ReactElement | null = null;
     let seekForwardButton: ReactElement | null = null;
 
@@ -107,7 +79,7 @@ export const VoiceBroadcastPlaybackBody: React.FC<VoiceBroadcastPlaybackBodyProp
             />
             <div className="mx_VoiceBroadcastBody_controls">
                 {seekBackwardButton}
-                {control}
+                <VoiceBroadcastPlaybackControl state={playbackState} onClick={toggle} />
                 {seekForwardButton}
             </div>
             <SeekBar playback={playback} />

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

@@ -0,0 +1,52 @@
+/*
+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 {
+    VoiceBroadcastHeader,
+    VoiceBroadcastPlayback,
+    VoiceBroadcastPlaybackControl,
+    VoiceBroadcastPlaybackState,
+} from "../..";
+import AccessibleButton from "../../../components/views/elements/AccessibleButton";
+import { useVoiceBroadcastPlayback } from "../../hooks/useVoiceBroadcastPlayback";
+import { Icon as XIcon } from "../../../../res/img/element-icons/cancel-rounded.svg";
+
+interface VoiceBroadcastSmallPlaybackBodyProps {
+    playback: VoiceBroadcastPlayback;
+}
+
+export const VoiceBroadcastSmallPlaybackBody: React.FC<VoiceBroadcastSmallPlaybackBodyProps> = ({ playback }) => {
+    const { liveness, playbackState, room, sender, toggle } = useVoiceBroadcastPlayback(playback);
+    return (
+        <div className="mx_VoiceBroadcastBody mx_VoiceBroadcastBody--pip mx_VoiceBroadcastBody--small">
+            <VoiceBroadcastHeader
+                linkToRoom={true}
+                live={liveness}
+                liveBadgePosition="middle"
+                microphoneLabel={sender?.name}
+                room={room}
+                showBuffering={playbackState === VoiceBroadcastPlaybackState.Buffering}
+                bufferingPosition="title"
+            />
+            <VoiceBroadcastPlaybackControl state={playbackState} onClick={toggle} />
+            <AccessibleButton onClick={() => playback.stop()}>
+                <XIcon className="mx_Icon mx_Icon_8 mx_VoiceBroadcastBody__small-close" />
+            </AccessibleButton>
+        </div>
+    );
+};

src/voice-broadcast/index.ts

@@ -29,8 +29,10 @@ export * from "./components/VoiceBroadcastBody";
 export * from "./components/atoms/LiveBadge";
 export * from "./components/atoms/VoiceBroadcastControl";
 export * from "./components/atoms/VoiceBroadcastHeader";
+export * from "./components/atoms/VoiceBroadcastPlaybackControl";
 export * from "./components/atoms/VoiceBroadcastRoomSubtitle";
 export * from "./components/molecules/VoiceBroadcastPlaybackBody";
+export * from "./components/molecules/VoiceBroadcastSmallPlaybackBody";
 export * from "./components/molecules/VoiceBroadcastPreRecordingPip";
 export * from "./components/molecules/VoiceBroadcastRecordingBody";
 export * from "./components/molecules/VoiceBroadcastRecordingPip";

test/components/views/voip/PipView-test.tsx

@@ -193,7 +193,7 @@ describe("PipView", () => {
         new RoomViewStore(defaultDispatcher, sdkContext);
     };
 
-    const startVoiceBroadcastPlayback = (room: Room): MatrixEvent => {
+    const mkVoiceBroadcast = (room: Room): MatrixEvent => {
         const infoEvent = makeVoiceBroadcastInfoStateEvent();
         room.currentState.setStateEvents([infoEvent]);
         defaultDispatcher.dispatch<IRoomStateEventsActionPayload>(
@@ -278,7 +278,7 @@ describe("PipView", () => {
 
     describe("when there is a voice broadcast playback and pre-recording", () => {
         beforeEach(() => {
-            startVoiceBroadcastPlayback(room);
+            mkVoiceBroadcast(room);
             setUpVoiceBroadcastPreRecording();
             renderPip();
         });
@@ -301,13 +301,31 @@ describe("PipView", () => {
         });
     });
 
+    describe("when listening to a voice broadcast in a room and then switching to another room", () => {
+        beforeEach(async () => {
+            setUpRoomViewStore();
+            viewRoom(room.roomId);
+            mkVoiceBroadcast(room);
+            await voiceBroadcastPlaybacksStore.getCurrent()?.start();
+            viewRoom(room2.roomId);
+            renderPip();
+        });
+
+        it("should render the small voice broadcast playback PiP", () => {
+            // check for the „pause voice broadcast“ button
+            expect(screen.getByLabelText("pause voice broadcast")).toBeInTheDocument();
+            // check for the absence of the „30s forward“ button
+            expect(screen.queryByLabelText("30s forward")).not.toBeInTheDocument();
+        });
+    });
+
     describe("when viewing a room with a live voice broadcast", () => {
-        let startEvent: MatrixEvent | null = null;
+        let startEvent!: MatrixEvent;
 
         beforeEach(() => {
             setUpRoomViewStore();
             viewRoom(room.roomId);
-            startEvent = startVoiceBroadcastPlayback(room);
+            startEvent = mkVoiceBroadcast(room);
             renderPip();
         });
 

test/voice-broadcast/components/atoms/VoiceBroadcastPlaybackControl-test.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 { render, RenderResult, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { VoiceBroadcastPlaybackControl, VoiceBroadcastPlaybackState } from "../../../../src/voice-broadcast";
+
+describe("<VoiceBroadcastPlaybackControl />", () => {
+    const renderControl = (state: VoiceBroadcastPlaybackState): { result: RenderResult; onClick: () => void } => {
+        const onClick = jest.fn();
+        return {
+            onClick,
+            result: render(<VoiceBroadcastPlaybackControl state={state} onClick={onClick} />),
+        };
+    };
+
+    it.each([
+        VoiceBroadcastPlaybackState.Stopped,
+        VoiceBroadcastPlaybackState.Paused,
+        VoiceBroadcastPlaybackState.Buffering,
+        VoiceBroadcastPlaybackState.Playing,
+    ])("should render state %s as expected", (state: VoiceBroadcastPlaybackState) => {
+        expect(renderControl(state).result.container).toMatchSnapshot();
+    });
+
+    describe("when clicking the control", () => {
+        let onClick: () => void;
+
+        beforeEach(async () => {
+            onClick = renderControl(VoiceBroadcastPlaybackState.Playing).onClick;
+            await userEvent.click(screen.getByLabelText("pause voice broadcast"));
+        });
+
+        it("should invoke the onClick callback", () => {
+            expect(onClick).toHaveBeenCalled();
+        });
+    });
+});

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

@@ -15,9 +15,13 @@ exports[`VoiceBroadcastHeader when rendering a buffering live broadcast header w
       class="mx_VoiceBroadcastHeader_content"
     >
       <div
-        class="mx_VoiceBroadcastHeader_room"
+        class="mx_VoiceBroadcastHeader_room_wrapper"
       >
-        !room:example.com
+        <div
+          class="mx_VoiceBroadcastHeader_room"
+        >
+          !room:example.com
+        </div>
       </div>
       <div
         aria-label="Change input device"
@@ -68,9 +72,13 @@ exports[`VoiceBroadcastHeader when rendering a live (grey) broadcast header with
       class="mx_VoiceBroadcastHeader_content"
     >
       <div
-        class="mx_VoiceBroadcastHeader_room"
+        class="mx_VoiceBroadcastHeader_room_wrapper"
       >
-        !room:example.com
+        <div
+          class="mx_VoiceBroadcastHeader_room"
+        >
+          !room:example.com
+        </div>
       </div>
       <div
         aria-label="Change input device"
@@ -121,9 +129,13 @@ exports[`VoiceBroadcastHeader when rendering a live broadcast header with broadc
       class="mx_VoiceBroadcastHeader_content"
     >
       <div
-        class="mx_VoiceBroadcastHeader_room"
+        class="mx_VoiceBroadcastHeader_room_wrapper"
       >
-        !room:example.com
+        <div
+          class="mx_VoiceBroadcastHeader_room"
+        >
+          !room:example.com
+        </div>
       </div>
       <div
         aria-label="Change input device"
@@ -190,9 +202,13 @@ exports[`VoiceBroadcastHeader when rendering a non-live broadcast header should
       class="mx_VoiceBroadcastHeader_content"
     >
       <div
-        class="mx_VoiceBroadcastHeader_room"
+        class="mx_VoiceBroadcastHeader_room_wrapper"
       >
-        !room:example.com
+        <div
+          class="mx_VoiceBroadcastHeader_room"
+        >
+          !room:example.com
+        </div>
       </div>
       <div
         aria-label="Change input device"

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

@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<VoiceBroadcastPlaybackControl /> should render state 0 as expected 1`] = `
+<div>
+  <div
+    aria-label="resume voice broadcast"
+    class="mx_AccessibleButton mx_VoiceBroadcastControl mx_VoiceBroadcastControl-play"
+    role="button"
+    tabindex="0"
+  >
+    <div
+      class="mx_Icon mx_Icon_16"
+    />
+  </div>
+</div>
+`;
+
+exports[`<VoiceBroadcastPlaybackControl /> should render state 1 as expected 1`] = `
+<div>
+  <div
+    aria-label="pause voice broadcast"
+    class="mx_AccessibleButton mx_VoiceBroadcastControl"
+    role="button"
+    tabindex="0"
+  >
+    <div
+      class="mx_Icon mx_Icon_16"
+    />
+  </div>
+</div>
+`;
+
+exports[`<VoiceBroadcastPlaybackControl /> should render state 2 as expected 1`] = `
+<div>
+  <div
+    aria-label="play voice broadcast"
+    class="mx_AccessibleButton mx_VoiceBroadcastControl mx_VoiceBroadcastControl-play"
+    role="button"
+    tabindex="0"
+  >
+    <div
+      class="mx_Icon mx_Icon_16"
+    />
+  </div>
+</div>
+`;
+
+exports[`<VoiceBroadcastPlaybackControl /> should render state 3 as expected 1`] = `
+<div>
+  <div
+    aria-label="pause voice broadcast"
+    class="mx_AccessibleButton mx_VoiceBroadcastControl"
+    role="button"
+    tabindex="0"
+  >
+    <div
+      class="mx_Icon mx_Icon_16"
+    />
+  </div>
+</div>
+`;

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

@@ -0,0 +1,132 @@
+/*
+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 { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { render, RenderResult } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { mocked } from "jest-mock";
+
+import {
+    VoiceBroadcastInfoState,
+    VoiceBroadcastLiveness,
+    VoiceBroadcastPlayback,
+    VoiceBroadcastSmallPlaybackBody,
+    VoiceBroadcastPlaybackState,
+} from "../../../../src/voice-broadcast";
+import { stubClient } from "../../../test-utils";
+import { mkVoiceBroadcastInfoStateEvent } from "../../utils/test-utils";
+
+// mock RoomAvatar, because it is doing too much fancy stuff
+jest.mock("../../../../src/components/views/avatars/RoomAvatar", () => ({
+    __esModule: true,
+    default: jest.fn().mockImplementation(({ room }) => {
+        return <div data-testid="room-avatar">room avatar: {room.name}</div>;
+    }),
+}));
+
+describe("<VoiceBroadcastSmallPlaybackBody />", () => {
+    const userId = "@user:example.com";
+    const roomId = "!room:example.com";
+    let client: MatrixClient;
+    let infoEvent: MatrixEvent;
+    let playback: VoiceBroadcastPlayback;
+    let renderResult: RenderResult;
+
+    beforeAll(() => {
+        client = stubClient();
+        mocked(client.relations).mockClear();
+        mocked(client.relations).mockResolvedValue({ events: [] });
+
+        infoEvent = mkVoiceBroadcastInfoStateEvent(
+            roomId,
+            VoiceBroadcastInfoState.Stopped,
+            userId,
+            client.getDeviceId()!,
+        );
+    });
+
+    beforeEach(() => {
+        playback = new VoiceBroadcastPlayback(infoEvent, client);
+        jest.spyOn(playback, "toggle").mockImplementation(() => Promise.resolve());
+        jest.spyOn(playback, "getLiveness");
+        jest.spyOn(playback, "getState");
+    });
+
+    describe("when rendering a buffering broadcast", () => {
+        beforeEach(() => {
+            mocked(playback.getState).mockReturnValue(VoiceBroadcastPlaybackState.Buffering);
+            mocked(playback.getLiveness).mockReturnValue("live");
+            renderResult = render(<VoiceBroadcastSmallPlaybackBody playback={playback} />);
+        });
+
+        it("should render as expected", () => {
+            expect(renderResult.container).toMatchSnapshot();
+        });
+    });
+
+    describe("when rendering a playing broadcast", () => {
+        beforeEach(() => {
+            mocked(playback.getState).mockReturnValue(VoiceBroadcastPlaybackState.Playing);
+            mocked(playback.getLiveness).mockReturnValue("not-live");
+            renderResult = render(<VoiceBroadcastSmallPlaybackBody playback={playback} />);
+        });
+
+        it("should render as expected", () => {
+            expect(renderResult.container).toMatchSnapshot();
+        });
+    });
+
+    describe(`when rendering a stopped broadcast`, () => {
+        beforeEach(() => {
+            mocked(playback.getState).mockReturnValue(VoiceBroadcastPlaybackState.Stopped);
+            mocked(playback.getLiveness).mockReturnValue("not-live");
+            renderResult = render(<VoiceBroadcastSmallPlaybackBody playback={playback} />);
+        });
+
+        it("should render as expected", () => {
+            expect(renderResult.container).toMatchSnapshot();
+        });
+
+        describe("and clicking the play button", () => {
+            beforeEach(async () => {
+                await userEvent.click(renderResult.getByLabelText("play voice broadcast"));
+            });
+
+            it("should toggle the playback", () => {
+                expect(playback.toggle).toHaveBeenCalled();
+            });
+        });
+    });
+
+    describe.each([
+        { state: VoiceBroadcastPlaybackState.Paused, liveness: "not-live" },
+        { state: VoiceBroadcastPlaybackState.Playing, liveness: "live" },
+    ] as Array<{ state: VoiceBroadcastPlaybackState; liveness: VoiceBroadcastLiveness }>)(
+        "when rendering a %s/%s broadcast",
+        ({ state, liveness }) => {
+            beforeEach(() => {
+                mocked(playback.getState).mockReturnValue(state);
+                mocked(playback.getLiveness).mockReturnValue(liveness);
+                renderResult = render(<VoiceBroadcastSmallPlaybackBody playback={playback} />);
+            });
+
+            it("should render as expected", () => {
+                expect(renderResult.container).toMatchSnapshot();
+            });
+        },
+    );
+});

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

@@ -18,9 +18,13 @@ exports[`VoiceBroadcastPlaybackBody when rendering a 0/not-live broadcast should
         class="mx_VoiceBroadcastHeader_content"
       >
         <div
-          class="mx_VoiceBroadcastHeader_room"
+          class="mx_VoiceBroadcastHeader_room_wrapper"
         >
-          My room
+          <div
+            class="mx_VoiceBroadcastHeader_room"
+          >
+            My room
+          </div>
         </div>
         <div
           aria-label="Change input device"
@@ -125,9 +129,13 @@ exports[`VoiceBroadcastPlaybackBody when rendering a 1/live broadcast should ren
         class="mx_VoiceBroadcastHeader_content"
       >
         <div
-          class="mx_VoiceBroadcastHeader_room"
+          class="mx_VoiceBroadcastHeader_room_wrapper"
         >
-          My room
+          <div
+            class="mx_VoiceBroadcastHeader_room"
+          >
+            My room
+          </div>
         </div>
         <div
           aria-label="Change input device"
@@ -240,9 +248,13 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
         class="mx_VoiceBroadcastHeader_content"
       >
         <div
-          class="mx_VoiceBroadcastHeader_room"
+          class="mx_VoiceBroadcastHeader_room_wrapper"
         >
-          My room
+          <div
+            class="mx_VoiceBroadcastHeader_room"
+          >
+            My room
+          </div>
         </div>
         <div
           aria-label="Change input device"
@@ -374,9 +386,13 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast in pip mo
           tabindex="0"
         >
           <div
-            class="mx_VoiceBroadcastHeader_room"
+            class="mx_VoiceBroadcastHeader_room_wrapper"
           >
-            My room
+            <div
+              class="mx_VoiceBroadcastHeader_room"
+            >
+              My room
+            </div>
           </div>
         </div>
         <div
@@ -482,9 +498,13 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast should re
         class="mx_VoiceBroadcastHeader_content"
       >
         <div
-          class="mx_VoiceBroadcastHeader_room"
+          class="mx_VoiceBroadcastHeader_room_wrapper"
         >
-          My room
+          <div
+            class="mx_VoiceBroadcastHeader_room"
+          >
+            My room
+          </div>
         </div>
         <div
           aria-label="Change input device"
@@ -589,9 +609,13 @@ exports[`VoiceBroadcastPlaybackBody when rendering a stopped broadcast should re
         class="mx_VoiceBroadcastHeader_content"
       >
         <div
-          class="mx_VoiceBroadcastHeader_room"
+          class="mx_VoiceBroadcastHeader_room_wrapper"
         >
-          My room
+          <div
+            class="mx_VoiceBroadcastHeader_room"
+          >
+            My room
+          </div>
         </div>
         <div
           aria-label="Change input device"

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

@@ -29,9 +29,13 @@ exports[`VoiceBroadcastPreRecordingPip when rendered should match the snapshot 1
           tabindex="0"
         >
           <div
-            class="mx_VoiceBroadcastHeader_room"
+            class="mx_VoiceBroadcastHeader_room_wrapper"
           >
-            !room@example.com
+            <div
+              class="mx_VoiceBroadcastHeader_room"
+            >
+              !room@example.com
+            </div>
           </div>
         </div>
         <div

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

@@ -18,9 +18,13 @@ exports[`VoiceBroadcastRecordingBody when rendering a live broadcast should rend
         class="mx_VoiceBroadcastHeader_content"
       >
         <div
-          class="mx_VoiceBroadcastHeader_room"
+          class="mx_VoiceBroadcastHeader_room_wrapper"
         >
-          My room
+          <div
+            class="mx_VoiceBroadcastHeader_room"
+          >
+            My room
+          </div>
         </div>
         <div
           aria-label="Change input device"
@@ -67,9 +71,13 @@ exports[`VoiceBroadcastRecordingBody when rendering a paused broadcast should re
         class="mx_VoiceBroadcastHeader_content"
       >
         <div
-          class="mx_VoiceBroadcastHeader_room"
+          class="mx_VoiceBroadcastHeader_room_wrapper"
         >
-          My room
+          <div
+            class="mx_VoiceBroadcastHeader_room"
+          >
+            My room
+          </div>
         </div>
         <div
           aria-label="Change input device"

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

@@ -29,9 +29,13 @@ exports[`VoiceBroadcastRecordingPip when rendering a paused recording should ren
           tabindex="0"
         >
           <div
-            class="mx_VoiceBroadcastHeader_room"
+            class="mx_VoiceBroadcastHeader_room_wrapper"
           >
-            My room
+            <div
+              class="mx_VoiceBroadcastHeader_room"
+            >
+              My room
+            </div>
           </div>
         </div>
         <div
@@ -126,9 +130,13 @@ exports[`VoiceBroadcastRecordingPip when rendering a started recording should re
           tabindex="0"
         >
           <div
-            class="mx_VoiceBroadcastHeader_room"
+            class="mx_VoiceBroadcastHeader_room_wrapper"
           >
-            My room
+            <div
+              class="mx_VoiceBroadcastHeader_room"
+            >
+              My room
+            </div>
           </div>
         </div>
         <div

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

@@ -0,0 +1,408 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a { state: 0, liveness: 'not-live' }/%s broadcast should render as expected 1`] = `
+<div>
+  <div
+    class="mx_VoiceBroadcastBody mx_VoiceBroadcastBody--pip mx_VoiceBroadcastBody--small"
+  >
+    <div
+      class="mx_VoiceBroadcastHeader"
+    >
+      <div
+        class="mx_AccessibleButton"
+        role="button"
+        tabindex="0"
+      >
+        <div
+          data-testid="room-avatar"
+        >
+          room avatar: 
+          My room
+        </div>
+      </div>
+      <div
+        class="mx_VoiceBroadcastHeader_content"
+      >
+        <div
+          class="mx_AccessibleButton"
+          role="button"
+          tabindex="0"
+        >
+          <div
+            class="mx_VoiceBroadcastHeader_room_wrapper"
+          >
+            <div
+              class="mx_VoiceBroadcastHeader_room"
+            >
+              My room
+            </div>
+          </div>
+        </div>
+        <div
+          aria-label="Change input device"
+          class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
+          role="button"
+          tabindex="0"
+        >
+          <div
+            class="mx_Icon mx_Icon_16"
+          />
+          <span>
+            @user:example.com
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-label="resume voice broadcast"
+      class="mx_AccessibleButton mx_VoiceBroadcastControl mx_VoiceBroadcastControl-play"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="mx_Icon mx_Icon_16"
+      />
+    </div>
+    <div
+      class="mx_AccessibleButton"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="mx_Icon mx_Icon_8 mx_VoiceBroadcastBody__small-close"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a { state: 1, liveness: 'live' }/%s broadcast should render as expected 1`] = `
+<div>
+  <div
+    class="mx_VoiceBroadcastBody mx_VoiceBroadcastBody--pip mx_VoiceBroadcastBody--small"
+  >
+    <div
+      class="mx_VoiceBroadcastHeader"
+    >
+      <div
+        class="mx_AccessibleButton"
+        role="button"
+        tabindex="0"
+      >
+        <div
+          data-testid="room-avatar"
+        >
+          room avatar: 
+          My room
+        </div>
+      </div>
+      <div
+        class="mx_VoiceBroadcastHeader_content"
+      >
+        <div
+          class="mx_AccessibleButton"
+          role="button"
+          tabindex="0"
+        >
+          <div
+            class="mx_VoiceBroadcastHeader_room_wrapper"
+          >
+            <div
+              class="mx_VoiceBroadcastHeader_room"
+            >
+              My room
+            </div>
+          </div>
+        </div>
+        <div
+          aria-label="Change input device"
+          class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
+          role="button"
+          tabindex="0"
+        >
+          <div
+            class="mx_Icon mx_Icon_16"
+          />
+          <span>
+            @user:example.com
+          </span>
+        </div>
+        <div
+          class="mx_LiveBadge"
+        >
+          <div
+            class="mx_Icon mx_Icon_16"
+          />
+          Live
+        </div>
+      </div>
+    </div>
+    <div
+      aria-label="pause voice broadcast"
+      class="mx_AccessibleButton mx_VoiceBroadcastControl"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="mx_Icon mx_Icon_16"
+      />
+    </div>
+    <div
+      class="mx_AccessibleButton"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="mx_Icon mx_Icon_8 mx_VoiceBroadcastBody__small-close"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a buffering broadcast should render as expected 1`] = `
+<div>
+  <div
+    class="mx_VoiceBroadcastBody mx_VoiceBroadcastBody--pip mx_VoiceBroadcastBody--small"
+  >
+    <div
+      class="mx_VoiceBroadcastHeader"
+    >
+      <div
+        class="mx_AccessibleButton"
+        role="button"
+        tabindex="0"
+      >
+        <div
+          data-testid="room-avatar"
+        >
+          room avatar: 
+          My room
+        </div>
+      </div>
+      <div
+        class="mx_VoiceBroadcastHeader_content"
+      >
+        <div
+          class="mx_AccessibleButton"
+          role="button"
+          tabindex="0"
+        >
+          <div
+            class="mx_VoiceBroadcastHeader_room_wrapper"
+          >
+            <div
+              class="mx_VoiceBroadcastHeader_room"
+            >
+              My room
+            </div>
+            <div
+              class="mx_Spinner"
+            >
+              <div
+                aria-label="Loading..."
+                class="mx_Spinner_icon"
+                data-testid="spinner"
+                role="progressbar"
+                style="width: 12px; height: 12px;"
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          aria-label="Change input device"
+          class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
+          role="button"
+          tabindex="0"
+        >
+          <div
+            class="mx_Icon mx_Icon_16"
+          />
+          <span>
+            @user:example.com
+          </span>
+        </div>
+        <div
+          class="mx_LiveBadge"
+        >
+          <div
+            class="mx_Icon mx_Icon_16"
+          />
+          Live
+        </div>
+      </div>
+    </div>
+    <div
+      aria-label="pause voice broadcast"
+      class="mx_AccessibleButton mx_VoiceBroadcastControl"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="mx_Icon mx_Icon_16"
+      />
+    </div>
+    <div
+      class="mx_AccessibleButton"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="mx_Icon mx_Icon_8 mx_VoiceBroadcastBody__small-close"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a playing broadcast should render as expected 1`] = `
+<div>
+  <div
+    class="mx_VoiceBroadcastBody mx_VoiceBroadcastBody--pip mx_VoiceBroadcastBody--small"
+  >
+    <div
+      class="mx_VoiceBroadcastHeader"
+    >
+      <div
+        class="mx_AccessibleButton"
+        role="button"
+        tabindex="0"
+      >
+        <div
+          data-testid="room-avatar"
+        >
+          room avatar: 
+          My room
+        </div>
+      </div>
+      <div
+        class="mx_VoiceBroadcastHeader_content"
+      >
+        <div
+          class="mx_AccessibleButton"
+          role="button"
+          tabindex="0"
+        >
+          <div
+            class="mx_VoiceBroadcastHeader_room_wrapper"
+          >
+            <div
+              class="mx_VoiceBroadcastHeader_room"
+            >
+              My room
+            </div>
+          </div>
+        </div>
+        <div
+          aria-label="Change input device"
+          class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
+          role="button"
+          tabindex="0"
+        >
+          <div
+            class="mx_Icon mx_Icon_16"
+          />
+          <span>
+            @user:example.com
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-label="pause voice broadcast"
+      class="mx_AccessibleButton mx_VoiceBroadcastControl"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="mx_Icon mx_Icon_16"
+      />
+    </div>
+    <div
+      class="mx_AccessibleButton"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="mx_Icon mx_Icon_8 mx_VoiceBroadcastBody__small-close"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<VoiceBroadcastSmallPlaybackBody /> when rendering a stopped broadcast should render as expected 1`] = `
+<div>
+  <div
+    class="mx_VoiceBroadcastBody mx_VoiceBroadcastBody--pip mx_VoiceBroadcastBody--small"
+  >
+    <div
+      class="mx_VoiceBroadcastHeader"
+    >
+      <div
+        class="mx_AccessibleButton"
+        role="button"
+        tabindex="0"
+      >
+        <div
+          data-testid="room-avatar"
+        >
+          room avatar: 
+          My room
+        </div>
+      </div>
+      <div
+        class="mx_VoiceBroadcastHeader_content"
+      >
+        <div
+          class="mx_AccessibleButton"
+          role="button"
+          tabindex="0"
+        >
+          <div
+            class="mx_VoiceBroadcastHeader_room_wrapper"
+          >
+            <div
+              class="mx_VoiceBroadcastHeader_room"
+            >
+              My room
+            </div>
+          </div>
+        </div>
+        <div
+          aria-label="Change input device"
+          class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
+          role="button"
+          tabindex="0"
+        >
+          <div
+            class="mx_Icon mx_Icon_16"
+          />
+          <span>
+            @user:example.com
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-label="play voice broadcast"
+      class="mx_AccessibleButton mx_VoiceBroadcastControl mx_VoiceBroadcastControl-play"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="mx_Icon mx_Icon_16"
+      />
+    </div>
+    <div
+      class="mx_AccessibleButton"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="mx_Icon mx_Icon_8 mx_VoiceBroadcastBody__small-close"
+      />
+    </div>
+  </div>
+</div>
+`;