Merge branch 'develop' into feat/add-formating-buttons-to-wysiwyg

.percy.yml

@@ -3,3 +3,5 @@ snapshot:
   widths:
     - 1024
     - 1920
+percy:
+  defer-uploads: true

cypress.config.ts

@@ -30,4 +30,8 @@ export default defineConfig({
         experimentalSessionAndOrigin: true,
         specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
     },
+    retries: {
+        runMode: 4,
+        openMode: 0,
+    },
 });

cypress/e2e/settings/device-management.spec.ts

@@ -107,9 +107,6 @@ describe("Device manager", () => {
             cy.get('[data-testid="device-detail-sign-out-cta"]').click();
         });
 
-        // list updated after sign out
-        cy.get('.mx_FilteredDeviceList_list').find('.mx_FilteredDeviceList_listItem').should('have.length', 1);
-
         // no other sessions or security recommendations sections when only one session
         cy.contains('Other sessions').should('not.exist');
         cy.get('[data-testid="security-recommendations-section"]').should('not.exist');

package.json

@@ -136,8 +136,8 @@
     "@babel/traverse": "^7.12.12",
     "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz",
     "@peculiar/webcrypto": "^1.1.4",
-    "@percy/cli": "^1.3.0",
-    "@percy/cypress": "^3.1.1",
+    "@percy/cli": "^1.11.0",
+    "@percy/cypress": "^3.1.2",
     "@sentry/types": "^6.10.0",
     "@sinonjs/fake-timers": "^9.1.2",
     "@testing-library/jest-dom": "^5.16.5",

res/css/_components.pcss

@@ -366,5 +366,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/Lifecycle.ts

@@ -699,7 +699,7 @@ async function persistCredentials(credentials: IMatrixClientCreds): Promise<void
         } catch (e) {
             localStorage.setItem("mx_access_token", credentials.accessToken);
         }
-        if (localStorage.getItem("mx_has_pickle_key")) {
+        if (localStorage.getItem("mx_has_pickle_key") === "true") {
             logger.error("Expected a pickle key, but none provided.  Encryption may not work.");
         }
     }

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);
+            });
+        });
+});

yarn.lock

@@ -1830,105 +1830,105 @@
     tslib "^2.4.0"
     webcrypto-core "^1.7.4"
 
-"@percy/cli-app@1.10.0":
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/@percy/cli-app/-/cli-app-1.10.0.tgz#01dec25405bac83b4a9e8b652f623dc75af5468e"
-  integrity sha512-vREIM8WA07m+U/x0yA2dEGjZOPZtLcdRZd+N7/Nhcgp4dfq693wdPlJZTlVEx09nZR083iDuzYAy7SAH9LNjEA==
+"@percy/cli-app@1.11.0":
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/@percy/cli-app/-/cli-app-1.11.0.tgz#aedf03af91bf66efaf9daacb9ed405c1fdb4376d"
+  integrity sha512-uZG/38nZYQQvD5mMUckgdHIVvuz/quV6JqEGDMKhDdgehX+Q1csHEeb/PXBGxLny7Ud1+s+8g9ZYm4oca87OTA==
   dependencies:
-    "@percy/cli-command" "1.10.0"
-    "@percy/cli-exec" "1.10.0"
+    "@percy/cli-command" "1.11.0"
+    "@percy/cli-exec" "1.11.0"
 
-"@percy/cli-build@1.10.0":
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/@percy/cli-build/-/cli-build-1.10.0.tgz#6075ce942a98949db53e7427369b8ab025e53ae3"
-  integrity sha512-dWK3uWYbyXFPk4goDll53UBmPtiEmx4tNYH3zKFKW13eke3rk8SBwtDrYW+Cd8vy/mPTGRqazNLQ2DXKaunZpw==
+"@percy/cli-build@1.11.0":
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/@percy/cli-build/-/cli-build-1.11.0.tgz#1a93b96499b3b30adb086ef1f59dacd973d10c04"
+  integrity sha512-KvWnlP/2crZFCkzkWFIdsBPMeg69Kye23WFe4sLtoAIrid6o7qIwk6285Iijsc4uJm4Y19jgXRR/EsVz5FYUNw==
   dependencies:
-    "@percy/cli-command" "1.10.0"
+    "@percy/cli-command" "1.11.0"
 
-"@percy/cli-command@1.10.0":
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/@percy/cli-command/-/cli-command-1.10.0.tgz#f4c73bcd75552b05bbdb3e87c59ff7519441f2a8"
-  integrity sha512-isSVsHXvJtbJqToEPewtA13HqR7xT+4FnYE5c45NGKBKgi1CqoZNtXdvZG4Qq/AsQp2McEBmN2zfadyBHcwZ7g==
+"@percy/cli-command@1.11.0":
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/@percy/cli-command/-/cli-command-1.11.0.tgz#db281e2b6d24d9172e0c49aa17d08f6524a7b8a1"
+  integrity sha512-5f4/FydmLzn82INMzfPhzq43uYBCIQv2ZCHK9hxyfc0qA6VUBc7gY+zwNp7hHgW7nAbWcDMxUqJrF9sts/BfqA==
   dependencies:
-    "@percy/config" "1.10.0"
-    "@percy/core" "1.10.0"
-    "@percy/logger" "1.10.0"
+    "@percy/config" "1.11.0"
+    "@percy/core" "1.11.0"
+    "@percy/logger" "1.11.0"
 
-"@percy/cli-config@1.10.0":
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/@percy/cli-config/-/cli-config-1.10.0.tgz#9883068d5235b86138692e5abbff8d35c6c01007"
-  integrity sha512-g0FTSmvSxvcFmHe4oqtOuj/vn590N6v+4+kxjIRCvWEPUK/JFyotvQvutCpbmVR9s1LCWEQ5MBjxuCbTdotIZA==
+"@percy/cli-config@1.11.0":
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/@percy/cli-config/-/cli-config-1.11.0.tgz#9ea8112d8c38f5ae641393707d2d3aa4cc7dca45"
+  integrity sha512-hKxusrHMkUVn+Hvv/Vjo6SadqFlwXlkLFDGCNE8DvuEsP9YEALUZQq7/i+iQJAC7JuV4UsEnOOKuCTD+rS2xUQ==
   dependencies:
-    "@percy/cli-command" "1.10.0"
+    "@percy/cli-command" "1.11.0"
 
-"@percy/cli-exec@1.10.0":
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/@percy/cli-exec/-/cli-exec-1.10.0.tgz#38f349788bd7d38dde8306780e79c35c25e1e9d8"
-  integrity sha512-EIUbQwEELNyuFNdjHD7Q7yGnVFsYzan9mplwxj4wq9xar5qd64fYusjJBGZygCKxT+WkoSokbODaTXoACoKoqw==
+"@percy/cli-exec@1.11.0":
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/@percy/cli-exec/-/cli-exec-1.11.0.tgz#4013a632441acb410148501fc5488e39b326c45a"
+  integrity sha512-y8C6s9q0QOmIuPucFjdn1oeJGiLaOlP55hQHeiXka/J84zBHw6N2vSwEqvdzHH2QY/VHLyIRC9NTBNNISv8ayQ==
   dependencies:
-    "@percy/cli-command" "1.10.0"
+    "@percy/cli-command" "1.11.0"
     cross-spawn "^7.0.3"
     which "^2.0.2"
 
-"@percy/cli-snapshot@1.10.0":
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/@percy/cli-snapshot/-/cli-snapshot-1.10.0.tgz#2a5cc9ea4a11b773298282632c9b5fe6abf9114b"
-  integrity sha512-myZy9wqLumKOWsnondTrBW0EUayHG6v4WT1ENBoFGHP3Bv0jxDwbs1RWEeQqa0NsooNHCWajd11Pr9+RS5w+TA==
+"@percy/cli-snapshot@1.11.0":
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/@percy/cli-snapshot/-/cli-snapshot-1.11.0.tgz#ef7ba8aca26e03b1da6157e162ab00e87c8d7355"
+  integrity sha512-PUh6RXg91p0MHKMTv/btIdMjqn5R0KXz32SkKeQ4gVI2bPEWnsK5aeJaPGtpDzrt35cG7wpKtzF0uGmovIKpRg==
   dependencies:
-    "@percy/cli-command" "1.10.0"
+    "@percy/cli-command" "1.11.0"
     yaml "^2.0.0"
 
-"@percy/cli-upload@1.10.0":
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/@percy/cli-upload/-/cli-upload-1.10.0.tgz#db12afe7183b9e63f52c1684bb647fef94eb48e4"
-  integrity sha512-sApNzAUiqGuZb/DeKrsMI09XglUKxhHGdyW4YmnQBznnHJjE5xOaVjtJr7zfI6RSNhtofCWLqyH08Pf+iE9rBg==
+"@percy/cli-upload@1.11.0":
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/@percy/cli-upload/-/cli-upload-1.11.0.tgz#60a85665f8ed6897c88793c70cd66a9476a94a4e"
+  integrity sha512-oI7zXU6EVukCWPFT3UXxd2XkRGDIGoPkv+beS157WrR+y3i8/zzp9V3r0UIMaL5gbOwY05TBHEogfqZht5hUXQ==
   dependencies:
-    "@percy/cli-command" "1.10.0"
+    "@percy/cli-command" "1.11.0"
     fast-glob "^3.2.11"
     image-size "^1.0.0"
 
-"@percy/cli@^1.3.0":
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/@percy/cli/-/cli-1.10.0.tgz#fbeeadc7b8baeadf637e3ac30ea65df3b2b60b2f"
-  integrity sha512-t/2vKCQ8bV5Rrut4lR1/xtM8UnZv5aa45XYZ0ZzGR6tDQsN+GOmgiH9stFiMp6xHaj/iVHpgAngBL8Ksm/ynGg==
+"@percy/cli@^1.11.0":
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/@percy/cli/-/cli-1.11.0.tgz#68709ebc4ea1ccddce607374c61d1ad9c9a2a44c"
+  integrity sha512-V6tIghu70uO1jQY6AJSbll6GMFZ26jkubgAnK4+KWa4g3hYRra7JvsSYkLlOE93x9L7Z7ZUbSTfhlpXGmh2UFA==
   dependencies:
-    "@percy/cli-app" "1.10.0"
-    "@percy/cli-build" "1.10.0"
-    "@percy/cli-command" "1.10.0"
-    "@percy/cli-config" "1.10.0"
-    "@percy/cli-exec" "1.10.0"
-    "@percy/cli-snapshot" "1.10.0"
-    "@percy/cli-upload" "1.10.0"
-    "@percy/client" "1.10.0"
-    "@percy/logger" "1.10.0"
+    "@percy/cli-app" "1.11.0"
+    "@percy/cli-build" "1.11.0"
+    "@percy/cli-command" "1.11.0"
+    "@percy/cli-config" "1.11.0"
+    "@percy/cli-exec" "1.11.0"
+    "@percy/cli-snapshot" "1.11.0"
+    "@percy/cli-upload" "1.11.0"
+    "@percy/client" "1.11.0"
+    "@percy/logger" "1.11.0"
 
-"@percy/client@1.10.0":
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/@percy/client/-/client-1.10.0.tgz#efe8727b08dbe1590c971810ceaf9bcd54cea8fa"
-  integrity sha512-Dc37kyXAg9O4ttJEUycduY8U6KDLiH5qWAJIBnSg+C2WSzFc6jv4sa9vowz5B/nUQ//Iq6mue00WIYRUyyg8Ww==
+"@percy/client@1.11.0":
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/@percy/client/-/client-1.11.0.tgz#ac530ac5204196ee2bd8c0acbbf4ef0561f104a3"
+  integrity sha512-RyvPK7xXfP8kgu04KydCaGWevQUM2oeVZ3Pf/u0FKZQ/OUSTUugIPN3e67ersmoiCUw3TWVy/+UeM5BBB3zLfg==
   dependencies:
-    "@percy/env" "1.10.0"
-    "@percy/logger" "1.10.0"
+    "@percy/env" "1.11.0"
+    "@percy/logger" "1.11.0"
 
-"@percy/config@1.10.0":
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/@percy/config/-/config-1.10.0.tgz#cba859fe85f865216adb468c121b97d88ed72ab9"
-  integrity sha512-/UEulUsyObSQYQlWw3rjE3NBOjLF66HsPgXr7n6DBCpyVf6vD0OZD+1FGb8Dyi7uuzUTpmsOw0ij7mrjsXv83A==
+"@percy/config@1.11.0":
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/@percy/config/-/config-1.11.0.tgz#35b335fd2698c39652a0688b7b4fc016336121cf"
+  integrity sha512-acpIqqH2hm8Aa96FL7FSfvMEFRpYC62lIia702XIZ0+IJZ0+SOH7DzhnyhyNf8OHMBQZWkxwkYlcdKUxT8KmaA==
   dependencies:
-    "@percy/logger" "1.10.0"
+    "@percy/logger" "1.11.0"
     ajv "^8.6.2"
     cosmiconfig "^7.0.0"
     yaml "^2.0.0"
 
-"@percy/core@1.10.0":
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/@percy/core/-/core-1.10.0.tgz#96cc1b43c5149bda86d719405e847f8c83067bd6"
-  integrity sha512-NU5gWcJ8655MFTkg1KgVTXEg8DXClMIh2ITmKM1XNH95wABEKosKKwggHUr8fcfNgZuEXy5a8tnfT8JZzyXX+A==
+"@percy/core@1.11.0":
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/@percy/core/-/core-1.11.0.tgz#20d7068e37be4a7fda2cd7f10971eeab878d8e7a"
+  integrity sha512-IM94vccJEFzifH9DjL57S1DIgmF+ew0649oLQCIz19BhdcF9jsrOLHBSd0fwv+ftIAktzaNTThSlm/zREndEew==
   dependencies:
-    "@percy/client" "1.10.0"
-    "@percy/config" "1.10.0"
-    "@percy/dom" "1.10.0"
-    "@percy/logger" "1.10.0"
+    "@percy/client" "1.11.0"
+    "@percy/config" "1.11.0"
+    "@percy/dom" "1.11.0"
+    "@percy/logger" "1.11.0"
     content-disposition "^0.5.4"
     cross-spawn "^7.0.3"
     extract-zip "^2.0.1"
@@ -1939,27 +1939,27 @@
     rimraf "^3.0.2"
     ws "^8.0.0"
 
-"@percy/cypress@^3.1.1":
+"@percy/cypress@^3.1.2":
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/@percy/cypress/-/cypress-3.1.2.tgz#a087d3c59a6b155eab5fdb4c237526b9cfacbc22"
   integrity sha512-JXrGDZbqwkzQd2h5T5D7PvqoucNaiMh4ChPp8cLQiEtRuLHta9nf1lEuXH+jnatGL2j+3jJFIHJ0L7XrgVnvQA==
   dependencies:
     "@percy/sdk-utils" "^1.3.1"
 
-"@percy/dom@1.10.0":
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/@percy/dom/-/dom-1.10.0.tgz#879d94fde1d5ae63f5dbb96b1a75e48ba8ca5525"
-  integrity sha512-aHCy+Vk8xc3azFDPSV4Z3+wiO/bp9OlGfi8aNwa6fpuEIx0SMN8TyLVGaKTwIlrhDVEqSbmTYsrh67HS+Uweqg==
+"@percy/dom@1.11.0":
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/@percy/dom/-/dom-1.11.0.tgz#998080c3c3b5160eb1c58e8543ebb89ed0ca63a1"
+  integrity sha512-WNbMcMTy+HaSWGmW20NArG+nUnTMYcjCsLK1m3RqXvLSQMEH16olUV5YSIRV8YCPD/L6/2gZ8/YgV7bnKbFzxQ==
 
-"@percy/env@1.10.0":
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/@percy/env/-/env-1.10.0.tgz#79af82e30ed98c94162f1531705f8a134773cb54"
-  integrity sha512-//yfh7N++ncP/K7+zacLm8PoPVFJ1tL3hc/COzP2YWLjMcLBGDtjIWZvTLk09PnEzkZ+hGLZ06AJeEzQiixhyA==
+"@percy/env@1.11.0":
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/@percy/env/-/env-1.11.0.tgz#002cc369d93a4cf9a8ceb2e71aa7cbc2d5faa288"
+  integrity sha512-aiAjyQUJlDinwCyxr9bujZY/BjyaIY0s5jfW2j3C+1HJ4uDi7CN1qb/+TqBhMO/2AEjR4eLIGRpBE3xSyO+Liw==
 
-"@percy/logger@1.10.0":
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/@percy/logger/-/logger-1.10.0.tgz#34ccccfb2949bd37bba3b23a462f3d7b4dcc8654"
-  integrity sha512-4t3V/Qlyup9mDAkf1KfENjaFVYcXVgXWeVasNRGYX5HBDbFfRB7G00uAfgK2Ja+QQGBmcY3ZA4o6+OXY88AjkQ==
+"@percy/logger@1.11.0":
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/@percy/logger/-/logger-1.11.0.tgz#0decfb64bd399925b8a4edbe1dc17186bb631e00"
+  integrity sha512-CQZRvOmp67VFIx9hYN6Z9cMCU8oAqwG/3CpWnvpyUmWWIbzuVmwA4dk2F8AOnAXADtr09jVhN60sPzqhliQFRQ==
 
 "@percy/sdk-utils@^1.3.1":
   version "1.10.0"