Prepare for repo merge

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

test/unit-tests/voice-broadcast/models/VoiceBroadcastPlayback-test.tsx

@@ -0,0 +1,743 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { mocked } from "jest-mock";
+import { screen } from "jest-matrix-react";
+import userEvent from "@testing-library/user-event";
+import { MatrixClient, MatrixEvent, MatrixEventEvent, Room } from "matrix-js-sdk/src/matrix";
+import { defer } from "matrix-js-sdk/src/utils";
+
+import { Playback, PlaybackState } from "../../../src/audio/Playback";
+import { PlaybackManager } from "../../../src/audio/PlaybackManager";
+import { SdkContextClass } from "../../../src/contexts/SDKContext";
+import { MediaEventHelper } from "../../../src/utils/MediaEventHelper";
+import {
+    VoiceBroadcastInfoState,
+    VoiceBroadcastLiveness,
+    VoiceBroadcastPlayback,
+    VoiceBroadcastPlaybackEvent,
+    VoiceBroadcastPlaybackState,
+    VoiceBroadcastRecording,
+} from "../../../src/voice-broadcast";
+import {
+    filterConsole,
+    flushPromises,
+    flushPromisesWithFakeTimers,
+    stubClient,
+    waitEnoughCyclesForModal,
+} from "../../test-utils";
+import { createTestPlayback } from "../../test-utils/audio";
+import { mkVoiceBroadcastChunkEvent, mkVoiceBroadcastInfoStateEvent } from "../utils/test-utils";
+import { LazyValue } from "../../../src/utils/LazyValue";
+
+jest.mock("../../../src/utils/MediaEventHelper", () => ({
+    MediaEventHelper: jest.fn(),
+}));
+
+describe("VoiceBroadcastPlayback", () => {
+    const userId = "@user:example.com";
+    let deviceId: string;
+    const roomId = "!room:example.com";
+    let room: Room;
+    let client: MatrixClient;
+    let infoEvent: MatrixEvent;
+    let playback: VoiceBroadcastPlayback;
+    let onStateChanged: (state: VoiceBroadcastPlaybackState) => void;
+    let chunk1Event: MatrixEvent;
+    let deplayedChunk1Event: MatrixEvent;
+    let chunk2Event: MatrixEvent;
+    let chunk2BEvent: MatrixEvent;
+    let chunk3Event: MatrixEvent;
+    const chunk1Length = 2300;
+    const chunk2Length = 4200;
+    const chunk3Length = 6900;
+    const chunk1Data = new ArrayBuffer(2);
+    const chunk2Data = new ArrayBuffer(3);
+    const chunk3Data = new ArrayBuffer(3);
+    let delayedChunk1Helper: MediaEventHelper;
+    let chunk1Helper: MediaEventHelper;
+    let chunk2Helper: MediaEventHelper;
+    let chunk3Helper: MediaEventHelper;
+    let chunk1Playback: Playback;
+    let chunk2Playback: Playback;
+    let chunk3Playback: Playback;
+    let middleOfSecondChunk!: number;
+    let middleOfThirdChunk!: number;
+
+    const queryConfirmListeningDialog = () => {
+        return screen.queryByText(
+            "If you start listening to this live broadcast, your current live broadcast recording will be ended.",
+        );
+    };
+
+    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, playback);
+        });
+    };
+
+    const itShouldHaveLiveness = (liveness: VoiceBroadcastLiveness): void => {
+        it(`should have liveness ${liveness}`, () => {
+            expect(playback.getLiveness()).toBe(liveness);
+        });
+    };
+
+    const startPlayback = () => {
+        beforeEach(() => {
+            playback.start();
+        });
+    };
+
+    const pausePlayback = () => {
+        beforeEach(() => {
+            playback.pause();
+        });
+    };
+
+    const stopPlayback = () => {
+        beforeEach(() => {
+            playback.stop();
+        });
+    };
+
+    const mkChunkHelper = (data: ArrayBuffer): MediaEventHelper => {
+        return {
+            sourceBlob: {
+                cachedValue: new Blob(),
+                done: false,
+                value: {
+                    // @ts-ignore
+                    arrayBuffer: jest.fn().mockResolvedValue(data),
+                },
+            },
+        };
+    };
+
+    const mkDeplayedChunkHelper = (data: ArrayBuffer): MediaEventHelper => {
+        const deferred = defer<LazyValue<Blob>>();
+
+        setTimeout(() => {
+            deferred.resolve({
+                // @ts-ignore
+                arrayBuffer: jest.fn().mockResolvedValue(data),
+            });
+        }, 7500);
+
+        return {
+            sourceBlob: {
+                cachedValue: new Blob(),
+                done: false,
+                // @ts-ignore
+                value: deferred.promise,
+            },
+        };
+    };
+
+    const simulateFirstChunkArrived = async (): Promise<void> => {
+        jest.advanceTimersByTime(10000);
+        await flushPromisesWithFakeTimers();
+    };
+
+    const mkInfoEvent = (state: VoiceBroadcastInfoState) => {
+        return mkVoiceBroadcastInfoStateEvent(roomId, state, userId, deviceId);
+    };
+
+    const mkPlayback = async (fakeTimers = false): Promise<VoiceBroadcastPlayback> => {
+        const playback = new VoiceBroadcastPlayback(
+            infoEvent,
+            client,
+            SdkContextClass.instance.voiceBroadcastRecordingsStore,
+        );
+        jest.spyOn(playback, "removeAllListeners");
+        jest.spyOn(playback, "destroy");
+        playback.on(VoiceBroadcastPlaybackEvent.StateChanged, onStateChanged);
+        fakeTimers ? await flushPromisesWithFakeTimers() : await flushPromises();
+        return playback;
+    };
+
+    const setUpChunkEvents = (chunkEvents: MatrixEvent[]) => {
+        mocked(client.relations).mockResolvedValueOnce({
+            events: chunkEvents,
+        });
+    };
+
+    const createChunkEvents = () => {
+        chunk1Event = mkVoiceBroadcastChunkEvent(infoEvent.getId()!, userId, roomId, chunk1Length, 1);
+        deplayedChunk1Event = mkVoiceBroadcastChunkEvent(infoEvent.getId()!, userId, roomId, chunk1Length, 1);
+        chunk2Event = mkVoiceBroadcastChunkEvent(infoEvent.getId()!, userId, roomId, chunk2Length, 2);
+        chunk2Event.setTxnId("tx-id-1");
+        chunk2BEvent = mkVoiceBroadcastChunkEvent(infoEvent.getId()!, userId, roomId, chunk2Length, 2);
+        chunk2BEvent.setTxnId("tx-id-1");
+        chunk3Event = mkVoiceBroadcastChunkEvent(infoEvent.getId()!, userId, roomId, chunk3Length, 3);
+
+        chunk1Helper = mkChunkHelper(chunk1Data);
+        delayedChunk1Helper = mkDeplayedChunkHelper(chunk1Data);
+        chunk2Helper = mkChunkHelper(chunk2Data);
+        chunk3Helper = mkChunkHelper(chunk3Data);
+
+        chunk1Playback = createTestPlayback();
+        chunk2Playback = createTestPlayback();
+        chunk3Playback = createTestPlayback();
+
+        middleOfSecondChunk = (chunk1Length + chunk2Length / 2) / 1000;
+        middleOfThirdChunk = (chunk1Length + chunk2Length + chunk3Length / 2) / 1000;
+
+        jest.spyOn(PlaybackManager.instance, "createPlaybackInstance").mockImplementation(
+            (buffer: ArrayBuffer, _waveForm?: number[]) => {
+                if (buffer === chunk1Data) return chunk1Playback;
+                if (buffer === chunk2Data) return chunk2Playback;
+                if (buffer === chunk3Data) return chunk3Playback;
+
+                throw new Error("unexpected buffer");
+            },
+        );
+
+        mocked(MediaEventHelper).mockImplementation((event: MatrixEvent): any => {
+            if (event === chunk1Event) return chunk1Helper;
+            if (event === deplayedChunk1Event) return delayedChunk1Helper;
+            if (event === chunk2Event) return chunk2Helper;
+            if (event === chunk3Event) return chunk3Helper;
+        });
+    };
+
+    filterConsole(
+        // expected for some tests
+        "Unable to load broadcast playback",
+    );
+
+    beforeEach(() => {
+        client = stubClient();
+        deviceId = client.getDeviceId() || "";
+        room = new Room(roomId, client, client.getSafeUserId());
+        mocked(client.getRoom).mockImplementation((roomId: string): Room | null => {
+            if (roomId === room.roomId) return room;
+            return null;
+        });
+        onStateChanged = jest.fn();
+    });
+
+    afterEach(async () => {
+        SdkContextClass.instance.voiceBroadcastPlaybacksStore.getCurrent()?.stop();
+        SdkContextClass.instance.voiceBroadcastPlaybacksStore.clearCurrent();
+        await SdkContextClass.instance.voiceBroadcastRecordingsStore.getCurrent()?.stop();
+        SdkContextClass.instance.voiceBroadcastRecordingsStore.clearCurrent();
+        playback.destroy();
+    });
+
+    describe(`when there is a ${VoiceBroadcastInfoState.Resumed} broadcast without chunks yet`, () => {
+        beforeEach(async () => {
+            infoEvent = mkInfoEvent(VoiceBroadcastInfoState.Resumed);
+            createChunkEvents();
+            room.addLiveEvents([infoEvent]);
+            playback = await mkPlayback();
+        });
+
+        describe("and calling start", () => {
+            startPlayback();
+
+            itShouldHaveLiveness("live");
+
+            it("should be in buffering state", () => {
+                expect(playback.getState()).toBe(VoiceBroadcastPlaybackState.Buffering);
+            });
+
+            it("should have duration 0", () => {
+                expect(playback.durationSeconds).toBe(0);
+            });
+
+            it("should be at time 0", () => {
+                expect(playback.timeSeconds).toBe(0);
+            });
+
+            describe("and calling stop", () => {
+                stopPlayback();
+                itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Stopped);
+
+                describe("and calling pause", () => {
+                    pausePlayback();
+                    // stopped voice broadcasts cannot be paused
+                    itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Stopped);
+                });
+            });
+
+            describe("and calling pause", () => {
+                pausePlayback();
+                itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Paused);
+            });
+
+            describe("and receiving the first chunk", () => {
+                beforeEach(() => {
+                    room.relations.aggregateChildEvent(chunk1Event);
+                });
+
+                itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Playing);
+                itShouldHaveLiveness("live");
+
+                it("should update the duration", () => {
+                    expect(playback.durationSeconds).toBe(2.3);
+                });
+
+                it("should play the first chunk", () => {
+                    expect(chunk1Playback.play).toHaveBeenCalled();
+                });
+            });
+
+            describe("and receiving the first undecryptable chunk", () => {
+                beforeEach(() => {
+                    jest.spyOn(chunk1Event, "isDecryptionFailure").mockReturnValue(true);
+                    room.relations.aggregateChildEvent(chunk1Event);
+                });
+
+                itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Error);
+
+                it("should not update the duration", () => {
+                    expect(playback.durationSeconds).toBe(0);
+                });
+
+                describe("and the chunk is decrypted", () => {
+                    beforeEach(() => {
+                        mocked(chunk1Event.isDecryptionFailure).mockReturnValue(false);
+                        chunk1Event.emit(MatrixEventEvent.Decrypted, chunk1Event);
+                    });
+
+                    itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Paused);
+
+                    it("should not update the duration", () => {
+                        expect(playback.durationSeconds).toBe(2.3);
+                    });
+                });
+            });
+        });
+    });
+
+    describe(`when there is a ${VoiceBroadcastInfoState.Resumed} voice broadcast with some chunks`, () => {
+        beforeEach(async () => {
+            mocked(client.relations).mockResolvedValueOnce({ events: [] });
+            infoEvent = mkInfoEvent(VoiceBroadcastInfoState.Resumed);
+            createChunkEvents();
+            setUpChunkEvents([chunk2Event, chunk1Event]);
+            room.addLiveEvents([infoEvent, chunk1Event, chunk2Event]);
+            room.relations.aggregateChildEvent(chunk2Event);
+            room.relations.aggregateChildEvent(chunk1Event);
+            playback = await mkPlayback();
+        });
+
+        it("durationSeconds should have the length of the known chunks", () => {
+            expect(playback.durationSeconds).toEqual(6.5);
+        });
+
+        describe("and starting a playback with a broken chunk", () => {
+            beforeEach(async () => {
+                mocked(chunk2Playback.prepare).mockRejectedValue("Error decoding chunk");
+                await playback.start();
+            });
+
+            itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Error);
+
+            it("start() should keep it in the error state)", async () => {
+                await playback.start();
+                expect(playback.getState()).toBe(VoiceBroadcastPlaybackState.Error);
+            });
+
+            it("stop() should keep it in the error state)", () => {
+                playback.stop();
+                expect(playback.getState()).toBe(VoiceBroadcastPlaybackState.Error);
+            });
+
+            it("toggle() should keep it in the error state)", async () => {
+                await playback.toggle();
+                expect(playback.getState()).toBe(VoiceBroadcastPlaybackState.Error);
+            });
+
+            it("pause() should keep it in the error state)", () => {
+                playback.pause();
+                expect(playback.getState()).toBe(VoiceBroadcastPlaybackState.Error);
+            });
+        });
+
+        describe("and an event with the same transaction Id occurs", () => {
+            beforeEach(() => {
+                room.addLiveEvents([chunk2BEvent]);
+                room.relations.aggregateChildEvent(chunk2BEvent);
+            });
+
+            it("durationSeconds should not change", () => {
+                expect(playback.durationSeconds).toEqual(6.5);
+            });
+        });
+
+        describe("and calling start", () => {
+            startPlayback();
+
+            it("should play the last chunk", () => {
+                expect(playback.getState()).toBe(VoiceBroadcastPlaybackState.Playing);
+                // assert that the last chunk is played first
+                expect(chunk2Playback.play).toHaveBeenCalled();
+                expect(chunk1Playback.play).not.toHaveBeenCalled();
+            });
+
+            describe(
+                "and receiving a stop info event with last_chunk_sequence = 2 and " +
+                    "the playback of the last available chunk ends",
+                () => {
+                    beforeEach(() => {
+                        const stoppedEvent = mkVoiceBroadcastInfoStateEvent(
+                            roomId,
+                            VoiceBroadcastInfoState.Stopped,
+                            client.getSafeUserId(),
+                            client.deviceId!,
+                            infoEvent,
+                            2,
+                        );
+                        room.addLiveEvents([stoppedEvent]);
+                        room.relations.aggregateChildEvent(stoppedEvent);
+                        chunk2Playback.emit(PlaybackState.Stopped);
+                    });
+
+                    itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Stopped);
+                },
+            );
+
+            describe(
+                "and receiving a stop info event with last_chunk_sequence = 3 and " +
+                    "the playback of the last available chunk ends",
+                () => {
+                    beforeEach(() => {
+                        const stoppedEvent = mkVoiceBroadcastInfoStateEvent(
+                            roomId,
+                            VoiceBroadcastInfoState.Stopped,
+                            client.getSafeUserId(),
+                            client.deviceId!,
+                            infoEvent,
+                            3,
+                        );
+                        room.addLiveEvents([stoppedEvent]);
+                        room.relations.aggregateChildEvent(stoppedEvent);
+                        chunk2Playback.emit(PlaybackState.Stopped);
+                    });
+
+                    itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Buffering);
+
+                    describe("and the next chunk arrives", () => {
+                        beforeEach(() => {
+                            room.addLiveEvents([chunk3Event]);
+                            room.relations.aggregateChildEvent(chunk3Event);
+                        });
+
+                        itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Playing);
+
+                        it("should play the next chunk", () => {
+                            expect(chunk3Playback.play).toHaveBeenCalled();
+                        });
+                    });
+                },
+            );
+
+            describe("and the info event is deleted", () => {
+                beforeEach(() => {
+                    infoEvent.makeRedacted(new MatrixEvent({}), room);
+                });
+
+                it("should stop and destroy the playback", () => {
+                    expect(playback.getState()).toBe(VoiceBroadcastPlaybackState.Stopped);
+                    expect(playback.destroy).toHaveBeenCalled();
+                });
+            });
+        });
+
+        describe("and currently recording a broadcast", () => {
+            let recording: VoiceBroadcastRecording;
+
+            beforeEach(async () => {
+                recording = new VoiceBroadcastRecording(
+                    mkVoiceBroadcastInfoStateEvent(
+                        roomId,
+                        VoiceBroadcastInfoState.Started,
+                        client.getSafeUserId(),
+                        client.deviceId,
+                    ),
+                    client,
+                );
+                jest.spyOn(recording, "stop");
+                SdkContextClass.instance.voiceBroadcastRecordingsStore.setCurrent(recording);
+                playback.start();
+                await waitEnoughCyclesForModal();
+            });
+
+            it("should display a confirm modal", () => {
+                expect(queryConfirmListeningDialog()).toBeInTheDocument();
+            });
+
+            describe("when confirming the dialog", () => {
+                beforeEach(async () => {
+                    await userEvent.click(screen.getByText("Yes, end my recording"));
+                });
+
+                it("should stop the recording", () => {
+                    expect(recording.stop).toHaveBeenCalled();
+                    expect(SdkContextClass.instance.voiceBroadcastRecordingsStore.getCurrent()).toBeNull();
+                });
+
+                it("should not start the playback", () => {
+                    expect(playback.getState()).toBe(VoiceBroadcastPlaybackState.Playing);
+                });
+            });
+
+            describe("when not confirming the dialog", () => {
+                beforeEach(async () => {
+                    await userEvent.click(screen.getByText("No"));
+                });
+
+                it("should not stop the recording", () => {
+                    expect(recording.stop).not.toHaveBeenCalled();
+                });
+
+                it("should start the playback", () => {
+                    expect(playback.getState()).toBe(VoiceBroadcastPlaybackState.Stopped);
+                });
+            });
+        });
+    });
+
+    describe("when there is a stopped voice broadcast", () => {
+        beforeEach(async () => {
+            jest.useFakeTimers();
+            infoEvent = mkInfoEvent(VoiceBroadcastInfoState.Stopped);
+            createChunkEvents();
+            // use delayed first chunk here to simulate loading time
+            setUpChunkEvents([chunk2Event, deplayedChunk1Event, chunk3Event]);
+            room.addLiveEvents([infoEvent, deplayedChunk1Event, chunk2Event, chunk3Event]);
+            playback = await mkPlayback(true);
+        });
+
+        afterEach(() => {
+            jest.useRealTimers();
+        });
+
+        it("should expose the info event", () => {
+            expect(playback.infoEvent).toBe(infoEvent);
+        });
+
+        itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Stopped);
+
+        describe("and calling start", () => {
+            startPlayback();
+
+            itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Buffering);
+
+            describe("and the first chunk data has been loaded", () => {
+                beforeEach(async () => {
+                    await simulateFirstChunkArrived();
+                });
+
+                itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Playing);
+
+                it("should play the chunks beginning with the first one", () => {
+                    // assert that the first chunk is being played
+                    expect(chunk1Playback.play).toHaveBeenCalled();
+                    expect(chunk2Playback.play).not.toHaveBeenCalled();
+                });
+
+                describe("and calling start again", () => {
+                    it("should not play the first chunk a second time", () => {
+                        expect(chunk1Playback.play).toHaveBeenCalledTimes(1);
+                    });
+                });
+
+                describe("and the chunk playback progresses", () => {
+                    beforeEach(() => {
+                        chunk1Playback.clockInfo.liveData.update([11]);
+                    });
+
+                    it("should update the time", () => {
+                        expect(playback.timeSeconds).toBe(11);
+                    });
+                });
+
+                describe("and the chunk playback progresses across the actual time", () => {
+                    // This can be the case if the meta data is out of sync with the actual audio data.
+
+                    beforeEach(() => {
+                        chunk1Playback.clockInfo.liveData.update([15]);
+                    });
+
+                    it("should update the time", () => {
+                        expect(playback.timeSeconds).toBe(15);
+                        expect(playback.timeLeftSeconds).toBe(0);
+                    });
+                });
+
+                describe("and skipping to the middle of the second chunk", () => {
+                    const middleOfSecondChunk = (chunk1Length + chunk2Length / 2) / 1000;
+
+                    beforeEach(async () => {
+                        await playback.skipTo(middleOfSecondChunk);
+                    });
+
+                    it("should play the second chunk", () => {
+                        expect(chunk1Playback.stop).toHaveBeenCalled();
+                        expect(chunk1Playback.destroy).toHaveBeenCalled();
+                        expect(chunk2Playback.play).toHaveBeenCalled();
+                    });
+
+                    it("should update the time", () => {
+                        expect(playback.timeSeconds).toBe(middleOfSecondChunk);
+                    });
+
+                    describe("and skipping to the start", () => {
+                        beforeEach(async () => {
+                            await playback.skipTo(0);
+                        });
+
+                        it("should play the first chunk", () => {
+                            expect(chunk2Playback.stop).toHaveBeenCalled();
+                            expect(chunk2Playback.destroy).toHaveBeenCalled();
+                            expect(chunk1Playback.play).toHaveBeenCalled();
+                        });
+
+                        it("should update the time", () => {
+                            expect(playback.timeSeconds).toBe(0);
+                        });
+                    });
+                });
+
+                describe("and skipping multiple times", () => {
+                    beforeEach(async () => {
+                        return Promise.all([
+                            playback.skipTo(middleOfSecondChunk),
+                            playback.skipTo(middleOfThirdChunk),
+                            playback.skipTo(0),
+                        ]);
+                    });
+
+                    it("should only skip to the first and last position", () => {
+                        expect(chunk1Playback.stop).toHaveBeenCalled();
+                        expect(chunk1Playback.destroy).toHaveBeenCalled();
+                        expect(chunk2Playback.play).toHaveBeenCalled();
+
+                        expect(chunk3Playback.play).not.toHaveBeenCalled();
+
+                        expect(chunk2Playback.stop).toHaveBeenCalled();
+                        expect(chunk2Playback.destroy).toHaveBeenCalled();
+                        expect(chunk1Playback.play).toHaveBeenCalled();
+                    });
+                });
+
+                describe("and the first chunk ends", () => {
+                    beforeEach(() => {
+                        chunk1Playback.emit(PlaybackState.Stopped);
+                    });
+
+                    it("should play until the end", () => {
+                        // assert first chunk was unloaded
+                        expect(chunk1Playback.destroy).toHaveBeenCalled();
+
+                        // assert that the second chunk is being played
+                        expect(chunk2Playback.play).toHaveBeenCalled();
+
+                        // simulate end of second and third chunk
+                        chunk2Playback.emit(PlaybackState.Stopped);
+                        chunk3Playback.emit(PlaybackState.Stopped);
+
+                        // assert that the entire playback is now in stopped state
+                        expect(playback.getState()).toBe(VoiceBroadcastPlaybackState.Stopped);
+                    });
+                });
+
+                describe("and calling pause", () => {
+                    pausePlayback();
+                    itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Paused);
+                    itShouldEmitAStateChangedEvent(VoiceBroadcastPlaybackState.Paused);
+                });
+
+                describe("and calling stop", () => {
+                    stopPlayback();
+                    itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Stopped);
+
+                    it("should stop the playback", () => {
+                        expect(chunk1Playback.stop).toHaveBeenCalled();
+                    });
+
+                    describe("and skipping to somewhere in the middle of the first chunk", () => {
+                        beforeEach(async () => {
+                            mocked(chunk1Playback.play).mockClear();
+                            await playback.skipTo(1);
+                        });
+
+                        it("should not start the playback", () => {
+                            expect(chunk1Playback.play).not.toHaveBeenCalled();
+                        });
+                    });
+                });
+
+                describe("and calling destroy", () => {
+                    beforeEach(() => {
+                        playback.destroy();
+                    });
+
+                    it("should call removeAllListeners", () => {
+                        expect(playback.removeAllListeners).toHaveBeenCalled();
+                    });
+
+                    it("should call destroy on the playbacks", () => {
+                        expect(chunk1Playback.destroy).toHaveBeenCalled();
+                        expect(chunk2Playback.destroy).toHaveBeenCalled();
+                    });
+                });
+            });
+        });
+
+        describe("and calling toggle for the first time", () => {
+            beforeEach(async () => {
+                playback.toggle();
+                await simulateFirstChunkArrived();
+            });
+
+            itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Playing);
+
+            describe("and calling toggle a second time", () => {
+                beforeEach(async () => {
+                    await playback.toggle();
+                });
+
+                itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Paused);
+
+                describe("and calling toggle a third time", () => {
+                    beforeEach(async () => {
+                        await playback.toggle();
+                    });
+
+                    itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Playing);
+                });
+            });
+        });
+
+        describe("and calling stop", () => {
+            stopPlayback();
+
+            itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Stopped);
+
+            describe("and calling toggle", () => {
+                beforeEach(async () => {
+                    mocked(onStateChanged).mockReset();
+                    playback.toggle();
+                    await simulateFirstChunkArrived();
+                });
+
+                itShouldSetTheStateTo(VoiceBroadcastPlaybackState.Playing);
+                itShouldEmitAStateChangedEvent(VoiceBroadcastPlaybackState.Playing);
+            });
+        });
+    });
+});

test/unit-tests/voice-broadcast/models/VoiceBroadcastPreRecording-test.ts

@@ -0,0 +1,68 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { MatrixClient, Room, RoomMember } from "matrix-js-sdk/src/matrix";
+
+import {
+    startNewVoiceBroadcastRecording,
+    VoiceBroadcastPlaybacksStore,
+    VoiceBroadcastPreRecording,
+    VoiceBroadcastRecordingsStore,
+} from "../../../src/voice-broadcast";
+import { stubClient } from "../../test-utils";
+
+jest.mock("../../../src/voice-broadcast/utils/startNewVoiceBroadcastRecording");
+
+describe("VoiceBroadcastPreRecording", () => {
+    const roomId = "!room:example.com";
+    let client: MatrixClient;
+    let room: Room;
+    let sender: RoomMember;
+    let playbacksStore: VoiceBroadcastPlaybacksStore;
+    let recordingsStore: VoiceBroadcastRecordingsStore;
+    let preRecording: VoiceBroadcastPreRecording;
+    let onDismiss: (voiceBroadcastPreRecording: VoiceBroadcastPreRecording) => void;
+
+    beforeAll(() => {
+        client = stubClient();
+        room = new Room(roomId, client, client.getUserId() || "");
+        sender = new RoomMember(roomId, client.getUserId() || "");
+        recordingsStore = new VoiceBroadcastRecordingsStore();
+        playbacksStore = new VoiceBroadcastPlaybacksStore(recordingsStore);
+    });
+
+    beforeEach(() => {
+        onDismiss = jest.fn();
+        preRecording = new VoiceBroadcastPreRecording(room, sender, client, playbacksStore, recordingsStore);
+        preRecording.on("dismiss", onDismiss);
+    });
+
+    describe("start", () => {
+        beforeEach(() => {
+            preRecording.start();
+        });
+
+        it("should start a new voice broadcast recording", () => {
+            expect(startNewVoiceBroadcastRecording).toHaveBeenCalledWith(room, client, playbacksStore, recordingsStore);
+        });
+
+        it("should emit a dismiss event", () => {
+            expect(onDismiss).toHaveBeenCalledWith(preRecording);
+        });
+    });
+
+    describe("cancel", () => {
+        beforeEach(() => {
+            preRecording.cancel();
+        });
+
+        it("should emit a dismiss event", () => {
+            expect(onDismiss).toHaveBeenCalledWith(preRecording);
+        });
+    });
+});

test/unit-tests/voice-broadcast/models/VoiceBroadcastRecording-test.ts

@@ -0,0 +1,660 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { mocked } from "jest-mock";
+import {
+    ClientEvent,
+    EventTimelineSet,
+    EventType,
+    LOCAL_NOTIFICATION_SETTINGS_PREFIX,
+    MatrixClient,
+    MatrixEvent,
+    MatrixEventEvent,
+    MsgType,
+    RelationType,
+    Room,
+    Relations,
+    SyncState,
+} from "matrix-js-sdk/src/matrix";
+import { EncryptedFile } from "matrix-js-sdk/src/types";
+import fetchMock from "fetch-mock-jest";
+
+import { uploadFile } from "../../../src/ContentMessages";
+import { createVoiceMessageContent } from "../../../src/utils/createVoiceMessageContent";
+import {
+    createVoiceBroadcastRecorder,
+    getChunkLength,
+    getMaxBroadcastLength,
+    VoiceBroadcastInfoEventContent,
+    VoiceBroadcastInfoEventType,
+    VoiceBroadcastInfoState,
+    VoiceBroadcastRecorder,
+    VoiceBroadcastRecorderEvent,
+    VoiceBroadcastRecording,
+    VoiceBroadcastRecordingEvent,
+    VoiceBroadcastRecordingState,
+} from "../../../src/voice-broadcast";
+import { mkEvent, mkStubRoom, stubClient } from "../../test-utils";
+import dis from "../../../src/dispatcher/dispatcher";
+import { VoiceRecording } from "../../../src/audio/VoiceRecording";
+import { createAudioContext } from "../../../src/audio/compat";
+
+jest.mock("../../../src/voice-broadcast/audio/VoiceBroadcastRecorder", () => ({
+    ...(jest.requireActual("../../../src/voice-broadcast/audio/VoiceBroadcastRecorder") as object),
+    createVoiceBroadcastRecorder: jest.fn(),
+}));
+
+// mock VoiceRecording because it contains all the audio APIs
+jest.mock("../../../src/audio/VoiceRecording", () => ({
+    VoiceRecording: jest.fn().mockReturnValue({
+        disableMaxLength: jest.fn(),
+        liveData: {
+            onUpdate: jest.fn(),
+        },
+        off: jest.fn(),
+        on: jest.fn(),
+        start: jest.fn(),
+        stop: jest.fn(),
+        destroy: jest.fn(),
+        contentType: "audio/ogg",
+    }),
+}));
+
+jest.mock("../../../src/ContentMessages", () => ({
+    uploadFile: jest.fn(),
+}));
+
+jest.mock("../../../src/utils/createVoiceMessageContent", () => ({
+    createVoiceMessageContent: jest.fn(),
+}));
+
+jest.mock("../../../src/audio/compat", () => ({
+    ...jest.requireActual("../../../src/audio/compat"),
+    createAudioContext: jest.fn(),
+}));
+
+describe("VoiceBroadcastRecording", () => {
+    const roomId = "!room:example.com";
+    const uploadedUrl = "mxc://example.com/vb";
+    const uploadedFile = { file: true } as unknown as EncryptedFile;
+    const maxLength = getMaxBroadcastLength();
+    let room: Room;
+    let client: MatrixClient;
+    let infoEvent: MatrixEvent;
+    let voiceBroadcastRecording: VoiceBroadcastRecording;
+    let onStateChanged: (state: VoiceBroadcastRecordingState) => void;
+    let voiceBroadcastRecorder: VoiceBroadcastRecorder;
+    let audioElement: HTMLAudioElement;
+
+    const mkVoiceBroadcastInfoEvent = (content: VoiceBroadcastInfoEventContent) => {
+        return mkEvent({
+            event: true,
+            type: VoiceBroadcastInfoEventType,
+            user: client.getSafeUserId(),
+            room: roomId,
+            content,
+        });
+    };
+
+    const setUpVoiceBroadcastRecording = () => {
+        voiceBroadcastRecording = new VoiceBroadcastRecording(infoEvent, client);
+        voiceBroadcastRecording.on(VoiceBroadcastRecordingEvent.StateChanged, onStateChanged);
+        jest.spyOn(voiceBroadcastRecording, "destroy");
+        jest.spyOn(voiceBroadcastRecording, "emit");
+        jest.spyOn(voiceBroadcastRecording, "removeAllListeners");
+    };
+
+    const itShouldBeInState = (state: VoiceBroadcastRecordingState) => {
+        it(`should be in state stopped ${state}`, () => {
+            expect(voiceBroadcastRecording.getState()).toBe(state);
+        });
+    };
+
+    const emitFirsChunkRecorded = () => {
+        voiceBroadcastRecorder.emit(VoiceBroadcastRecorderEvent.ChunkRecorded, {
+            buffer: new Uint8Array([1, 2, 3]),
+            length: 23,
+        });
+    };
+
+    const itShouldSendAnInfoEvent = (state: VoiceBroadcastInfoState, lastChunkSequence: number) => {
+        it(`should send a ${state} info event`, () => {
+            expect(client.sendStateEvent).toHaveBeenCalledWith(
+                roomId,
+                VoiceBroadcastInfoEventType,
+                {
+                    device_id: client.getDeviceId(),
+                    state,
+                    last_chunk_sequence: lastChunkSequence,
+                    ["m.relates_to"]: {
+                        rel_type: RelationType.Reference,
+                        event_id: infoEvent.getId(),
+                    },
+                } as VoiceBroadcastInfoEventContent,
+                client.getUserId()!,
+            );
+        });
+    };
+
+    const itShouldSendAVoiceMessage = (data: number[], size: number, duration: number, sequence: number) => {
+        // events contain milliseconds
+        duration *= 1000;
+
+        it("should send a voice message", () => {
+            expect(uploadFile).toHaveBeenCalledWith(
+                client,
+                roomId,
+                new Blob([new Uint8Array(data)], { type: voiceBroadcastRecorder.contentType }),
+            );
+
+            expect(mocked(client.sendMessage)).toHaveBeenCalledWith(roomId, {
+                body: "Voice message",
+                file: {
+                    file: true,
+                },
+                info: {
+                    duration,
+                    mimetype: "audio/ogg",
+                    size,
+                },
+                ["m.relates_to"]: {
+                    event_id: infoEvent.getId(),
+                    rel_type: "m.reference",
+                },
+                msgtype: "m.audio",
+                ["org.matrix.msc1767.audio"]: {
+                    duration,
+                    waveform: undefined,
+                },
+                ["org.matrix.msc1767.file"]: {
+                    file: {
+                        file: true,
+                    },
+                    mimetype: "audio/ogg",
+                    name: "Voice message.ogg",
+                    size,
+                    url: "mxc://example.com/vb",
+                },
+                ["org.matrix.msc1767.text"]: "Voice message",
+                ["org.matrix.msc3245.voice"]: {},
+                url: "mxc://example.com/vb",
+                ["io.element.voice_broadcast_chunk"]: {
+                    sequence,
+                },
+            });
+        });
+    };
+
+    const setUpUploadFileMock = () => {
+        mocked(uploadFile).mockResolvedValue({
+            url: uploadedUrl,
+            file: uploadedFile,
+        });
+    };
+
+    const mockAudioBufferSourceNode = {
+        addEventListener: jest.fn(),
+        connect: jest.fn(),
+        start: jest.fn(),
+    };
+    const mockAudioContext = {
+        decodeAudioData: jest.fn(),
+        suspend: jest.fn(),
+        resume: jest.fn(),
+        createBufferSource: jest.fn().mockReturnValue(mockAudioBufferSourceNode),
+        currentTime: 1337,
+    };
+
+    beforeEach(() => {
+        client = stubClient();
+        room = mkStubRoom(roomId, "Test Room", client);
+        mocked(client.getRoom).mockImplementation((getRoomId: string | undefined): Room | null => {
+            if (getRoomId === roomId) {
+                return room;
+            }
+
+            return null;
+        });
+        onStateChanged = jest.fn();
+        voiceBroadcastRecorder = new VoiceBroadcastRecorder(new VoiceRecording(), getChunkLength());
+        jest.spyOn(voiceBroadcastRecorder, "start");
+        jest.spyOn(voiceBroadcastRecorder, "stop");
+        jest.spyOn(voiceBroadcastRecorder, "destroy");
+        mocked(createVoiceBroadcastRecorder).mockReturnValue(voiceBroadcastRecorder);
+
+        setUpUploadFileMock();
+
+        mocked(createVoiceMessageContent).mockImplementation(
+            (
+                mxc: string | undefined,
+                mimetype: string,
+                duration: number,
+                size: number,
+                file?: EncryptedFile,
+                waveform?: number[],
+            ) => {
+                return {
+                    body: "Voice message",
+                    msgtype: MsgType.Audio,
+                    url: mxc,
+                    file,
+                    info: {
+                        duration,
+                        mimetype,
+                        size,
+                    },
+                    ["org.matrix.msc1767.text"]: "Voice message",
+                    ["org.matrix.msc1767.file"]: {
+                        url: mxc,
+                        file,
+                        name: "Voice message.ogg",
+                        mimetype,
+                        size,
+                    },
+                    ["org.matrix.msc1767.audio"]: {
+                        duration,
+                        // https://github.com/matrix-org/matrix-doc/pull/3246
+                        waveform,
+                    },
+                    ["org.matrix.msc3245.voice"]: {}, // No content, this is a rendering hint
+                };
+            },
+        );
+
+        audioElement = {
+            play: jest.fn(),
+        } as any as HTMLAudioElement;
+
+        jest.spyOn(document, "querySelector").mockImplementation((selector: string) => {
+            if (selector === "audio#errorAudio") {
+                return audioElement;
+            }
+
+            return null;
+        });
+
+        mocked(createAudioContext).mockReturnValue(mockAudioContext as unknown as AudioContext);
+    });
+
+    afterEach(() => {
+        voiceBroadcastRecording?.off(VoiceBroadcastRecordingEvent.StateChanged, onStateChanged);
+    });
+
+    describe("when there is an info event without id", () => {
+        beforeEach(() => {
+            infoEvent = mkVoiceBroadcastInfoEvent({
+                device_id: client.getDeviceId()!,
+                state: VoiceBroadcastInfoState.Started,
+            });
+            jest.spyOn(infoEvent, "getId").mockReturnValue(undefined);
+        });
+
+        it("should raise an error when creating a broadcast", () => {
+            expect(() => {
+                setUpVoiceBroadcastRecording();
+            }).toThrow("Cannot create broadcast for info event without Id.");
+        });
+    });
+
+    describe("when there is an info event without room", () => {
+        beforeEach(() => {
+            infoEvent = mkVoiceBroadcastInfoEvent({
+                device_id: client.getDeviceId()!,
+                state: VoiceBroadcastInfoState.Started,
+            });
+            jest.spyOn(infoEvent, "getRoomId").mockReturnValue(undefined);
+        });
+
+        it("should raise an error when creating a broadcast", () => {
+            expect(() => {
+                setUpVoiceBroadcastRecording();
+            }).toThrow(`Cannot create broadcast for unknown room (info event ${infoEvent.getId()})`);
+        });
+    });
+
+    describe("when created for a Voice Broadcast Info without relations", () => {
+        beforeEach(() => {
+            infoEvent = mkVoiceBroadcastInfoEvent({
+                device_id: client.getDeviceId()!,
+                state: VoiceBroadcastInfoState.Started,
+            });
+            setUpVoiceBroadcastRecording();
+        });
+
+        it("should be in Started state", () => {
+            expect(voiceBroadcastRecording.getState()).toBe(VoiceBroadcastInfoState.Started);
+        });
+
+        describe("and calling stop", () => {
+            beforeEach(() => {
+                voiceBroadcastRecording.stop();
+            });
+
+            itShouldSendAnInfoEvent(VoiceBroadcastInfoState.Stopped, 0);
+            itShouldBeInState(VoiceBroadcastInfoState.Stopped);
+
+            it("should emit a stopped state changed event", () => {
+                expect(onStateChanged).toHaveBeenCalledWith(VoiceBroadcastInfoState.Stopped);
+            });
+        });
+
+        describe("and calling start", () => {
+            beforeEach(async () => {
+                await voiceBroadcastRecording.start();
+            });
+
+            it("should start the recorder", () => {
+                expect(voiceBroadcastRecorder.start).toHaveBeenCalled();
+            });
+
+            describe("and the info event is redacted", () => {
+                beforeEach(() => {
+                    infoEvent.emit(
+                        MatrixEventEvent.BeforeRedaction,
+                        infoEvent,
+                        mkEvent({
+                            event: true,
+                            type: EventType.RoomRedaction,
+                            user: client.getSafeUserId(),
+                            content: {},
+                        }),
+                    );
+                });
+
+                itShouldBeInState(VoiceBroadcastInfoState.Stopped);
+
+                it("should destroy the recording", () => {
+                    expect(voiceBroadcastRecording.destroy).toHaveBeenCalled();
+                });
+            });
+
+            describe("and receiving a call action", () => {
+                beforeEach(() => {
+                    dis.dispatch(
+                        {
+                            action: "call_state",
+                        },
+                        true,
+                    );
+                });
+
+                itShouldBeInState(VoiceBroadcastInfoState.Paused);
+            });
+
+            describe("and a chunk time update occurs", () => {
+                beforeEach(() => {
+                    voiceBroadcastRecorder.emit(VoiceBroadcastRecorderEvent.CurrentChunkLengthUpdated, 10);
+                });
+
+                it("should update time left", () => {
+                    expect(voiceBroadcastRecording.getTimeLeft()).toBe(maxLength - 10);
+                    expect(voiceBroadcastRecording.emit).toHaveBeenCalledWith(
+                        VoiceBroadcastRecordingEvent.TimeLeftChanged,
+                        maxLength - 10,
+                    );
+                });
+
+                describe("and a chunk time update occurs, that would increase time left", () => {
+                    beforeEach(() => {
+                        mocked(voiceBroadcastRecording.emit).mockClear();
+                        voiceBroadcastRecorder.emit(VoiceBroadcastRecorderEvent.CurrentChunkLengthUpdated, 5);
+                    });
+
+                    it("should not change time left", () => {
+                        expect(voiceBroadcastRecording.getTimeLeft()).toBe(maxLength - 10);
+                        expect(voiceBroadcastRecording.emit).not.toHaveBeenCalled();
+                    });
+                });
+            });
+
+            describe("and a chunk has been recorded", () => {
+                beforeEach(async () => {
+                    emitFirsChunkRecorded();
+                });
+
+                itShouldSendAVoiceMessage([1, 2, 3], 3, 23, 1);
+
+                describe("and another chunk has been recorded, that exceeds the max time", () => {
+                    beforeEach(() => {
+                        mocked(voiceBroadcastRecorder.stop).mockResolvedValue({
+                            buffer: new Uint8Array([23, 24, 25]),
+                            length: getMaxBroadcastLength(),
+                        });
+                        voiceBroadcastRecorder.emit(
+                            VoiceBroadcastRecorderEvent.CurrentChunkLengthUpdated,
+                            getMaxBroadcastLength(),
+                        );
+                    });
+
+                    itShouldBeInState(VoiceBroadcastInfoState.Stopped);
+                    itShouldSendAVoiceMessage([23, 24, 25], 3, getMaxBroadcastLength(), 2);
+                    itShouldSendAnInfoEvent(VoiceBroadcastInfoState.Stopped, 2);
+                });
+            });
+
+            describe("and calling stop", () => {
+                beforeEach(async () => {
+                    mocked(voiceBroadcastRecorder.stop).mockResolvedValue({
+                        buffer: new Uint8Array([4, 5, 6]),
+                        length: 42,
+                    });
+                    await voiceBroadcastRecording.stop();
+                });
+
+                itShouldSendAVoiceMessage([4, 5, 6], 3, 42, 1);
+                itShouldSendAnInfoEvent(VoiceBroadcastInfoState.Stopped, 1);
+            });
+
+            describe.each([
+                ["pause", async () => voiceBroadcastRecording.pause()],
+                ["toggle", async () => voiceBroadcastRecording.toggle()],
+            ])("and calling %s", (_case: string, action: Function) => {
+                beforeEach(async () => {
+                    await action();
+                });
+
+                itShouldBeInState(VoiceBroadcastInfoState.Paused);
+                itShouldSendAnInfoEvent(VoiceBroadcastInfoState.Paused, 0);
+
+                it("should stop the recorder", () => {
+                    expect(mocked(voiceBroadcastRecorder.stop)).toHaveBeenCalled();
+                });
+
+                it("should emit a paused state changed event", () => {
+                    expect(onStateChanged).toHaveBeenCalledWith(VoiceBroadcastInfoState.Paused);
+                });
+            });
+
+            describe("and there is no connection", () => {
+                beforeEach(() => {
+                    mocked(client.sendStateEvent).mockImplementation(() => {
+                        throw new Error();
+                    });
+                });
+
+                describe.each([
+                    ["pause", async () => voiceBroadcastRecording.pause()],
+                    ["toggle", async () => voiceBroadcastRecording.toggle()],
+                ])("and calling %s", (_case: string, action: Function) => {
+                    beforeEach(async () => {
+                        await action();
+                    });
+
+                    itShouldBeInState("connection_error");
+
+                    describe("and the connection is back", () => {
+                        beforeEach(() => {
+                            mocked(client.sendStateEvent).mockResolvedValue({ event_id: "e1" });
+                            client.emit(ClientEvent.Sync, SyncState.Catchup, SyncState.Error);
+                        });
+
+                        itShouldBeInState(VoiceBroadcastInfoState.Paused);
+                    });
+                });
+            });
+
+            describe("and calling destroy", () => {
+                beforeEach(() => {
+                    voiceBroadcastRecording.destroy();
+                });
+
+                it("should stop the recorder and remove all listeners", () => {
+                    expect(mocked(voiceBroadcastRecorder.stop)).toHaveBeenCalled();
+                    expect(mocked(voiceBroadcastRecorder.destroy)).toHaveBeenCalled();
+                    expect(mocked(voiceBroadcastRecording.removeAllListeners)).toHaveBeenCalled();
+                });
+            });
+
+            describe("and a chunk has been recorded and the upload fails", () => {
+                beforeEach(() => {
+                    mocked(uploadFile).mockRejectedValue("Error");
+                    emitFirsChunkRecorded();
+                });
+
+                itShouldBeInState("connection_error");
+
+                describe("and the connection is back", () => {
+                    beforeEach(() => {
+                        setUpUploadFileMock();
+                        client.emit(ClientEvent.Sync, SyncState.Catchup, SyncState.Error);
+                    });
+
+                    itShouldBeInState(VoiceBroadcastInfoState.Paused);
+                    itShouldSendAVoiceMessage([1, 2, 3], 3, 23, 1);
+                });
+            });
+
+            describe("and audible notifications are disabled", () => {
+                beforeEach(() => {
+                    const notificationSettings = mkEvent({
+                        event: true,
+                        type: `${LOCAL_NOTIFICATION_SETTINGS_PREFIX.name}.${client.getDeviceId()}`,
+                        user: client.getSafeUserId(),
+                        content: {
+                            is_silenced: true,
+                        },
+                    });
+                    mocked(client.getAccountData).mockReturnValue(notificationSettings);
+                });
+
+                describe("and a chunk has been recorded and sending the voice message fails", () => {
+                    beforeEach(() => {
+                        mocked(client.sendMessage).mockRejectedValue("Error");
+                        emitFirsChunkRecorded();
+                    });
+
+                    itShouldBeInState("connection_error");
+
+                    it("should not play a notification", () => {
+                        expect(audioElement.play).not.toHaveBeenCalled();
+                    });
+                });
+            });
+
+            describe("and a chunk has been recorded and sending the voice message fails", () => {
+                beforeEach(() => {
+                    mocked(client.sendMessage).mockRejectedValue("Error");
+                    emitFirsChunkRecorded();
+                    fetchMock.get("media/error.mp3", 200);
+                });
+
+                itShouldBeInState("connection_error");
+
+                it("should play a notification", () => {
+                    expect(mockAudioBufferSourceNode.start).toHaveBeenCalled();
+                });
+
+                describe("and the connection is back", () => {
+                    beforeEach(() => {
+                        mocked(client.sendMessage).mockClear();
+                        mocked(client.sendMessage).mockResolvedValue({ event_id: "e23" });
+                        client.emit(ClientEvent.Sync, SyncState.Catchup, SyncState.Error);
+                    });
+
+                    itShouldBeInState(VoiceBroadcastInfoState.Paused);
+                    itShouldSendAVoiceMessage([1, 2, 3], 3, 23, 1);
+                });
+            });
+        });
+
+        describe("and it is in paused state", () => {
+            beforeEach(async () => {
+                await voiceBroadcastRecording.pause();
+            });
+
+            describe.each([
+                ["resume", async () => voiceBroadcastRecording.resume()],
+                ["toggle", async () => voiceBroadcastRecording.toggle()],
+            ])("and calling %s", (_case: string, action: Function) => {
+                beforeEach(async () => {
+                    await action();
+                });
+
+                itShouldBeInState(VoiceBroadcastInfoState.Resumed);
+                itShouldSendAnInfoEvent(VoiceBroadcastInfoState.Resumed, 0);
+
+                it("should start the recorder", () => {
+                    expect(mocked(voiceBroadcastRecorder.start)).toHaveBeenCalled();
+                });
+
+                it(`should emit a ${VoiceBroadcastInfoState.Resumed} state changed event`, () => {
+                    expect(onStateChanged).toHaveBeenCalledWith(VoiceBroadcastInfoState.Resumed);
+                });
+            });
+        });
+    });
+
+    describe("when created for a Voice Broadcast Info with a Stopped relation", () => {
+        beforeEach(() => {
+            infoEvent = mkVoiceBroadcastInfoEvent({
+                device_id: client.getDeviceId()!,
+                state: VoiceBroadcastInfoState.Started,
+                chunk_length: 120,
+            });
+
+            const relationsContainer = {
+                getRelations: jest.fn(),
+            } as unknown as Relations;
+            mocked(relationsContainer.getRelations).mockReturnValue([
+                mkVoiceBroadcastInfoEvent({
+                    device_id: client.getDeviceId()!,
+                    state: VoiceBroadcastInfoState.Stopped,
+                    ["m.relates_to"]: {
+                        rel_type: RelationType.Reference,
+                        event_id: infoEvent.getId()!,
+                    },
+                }),
+            ]);
+
+            const timelineSet = {
+                relations: {
+                    getChildEventsForEvent: jest
+                        .fn()
+                        .mockImplementation(
+                            (eventId: string, relationType: RelationType | string, eventType: EventType | string) => {
+                                if (
+                                    eventId === infoEvent.getId() &&
+                                    relationType === RelationType.Reference &&
+                                    eventType === VoiceBroadcastInfoEventType
+                                ) {
+                                    return relationsContainer;
+                                }
+                            },
+                        ),
+                },
+            } as unknown as EventTimelineSet;
+            mocked(room.getUnfilteredTimelineSet).mockReturnValue(timelineSet);
+
+            setUpVoiceBroadcastRecording();
+        });
+
+        it("should be in Stopped state", () => {
+            expect(voiceBroadcastRecording.getState()).toBe(VoiceBroadcastInfoState.Stopped);
+        });
+    });
+});