Implement pause voice broadcast recording (#9469)

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

@@ -25,3 +25,7 @@ limitations under the License.
     margin-bottom: $spacing-8;
     width: 32px;
 }
+
+.mx_VoiceBroadcastControl-recording {
+    color: $alert;
+}

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

@@ -31,5 +31,5 @@ limitations under the License.
 
 .mx_VoiceBroadcastRecordingPip_controls {
     display: flex;
-    justify-content: center;
+    justify-content: space-around;
 }

res/img/element-icons/Record.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="5" cy="5" r="5" fill="#FF5B55"/>
+</svg>

src/voice-broadcast/audio/VoiceBroadcastRecorder.ts

@@ -21,6 +21,7 @@ import { VoiceRecording } from "../../audio/VoiceRecording";
 import SdkConfig, { DEFAULTS } from "../../SdkConfig";
 import { concat } from "../../utils/arrays";
 import { IDestroyable } from "../../utils/IDestroyable";
+import { Singleflight } from "../../utils/Singleflight";
 
 export enum VoiceBroadcastRecorderEvent {
     ChunkRecorded = "chunk_recorded",
@@ -65,6 +66,8 @@ export class VoiceBroadcastRecorder
      */
     public async stop(): Promise<Optional<ChunkRecordedPayload>> {
         await this.voiceRecording.stop();
+        // forget about that call, so that we can stop it again later
+        Singleflight.forgetAllFor(this.voiceRecording);
         return this.extractChunk();
     }
 

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

@@ -14,23 +14,26 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import classNames from "classnames";
 import React from "react";
 
 import AccessibleButton from "../../../components/views/elements/AccessibleButton";
 
 interface Props {
+    className?: string;
     icon: React.FC<React.SVGProps<SVGSVGElement>>;
     label: string;
     onClick: () => void;
 }
 
 export const VoiceBroadcastControl: React.FC<Props> = ({
+    className = "",
     icon: Icon,
     label,
     onClick,
 }) => {
     return <AccessibleButton
-        className="mx_VoiceBroadcastControl"
+        className={classNames("mx_VoiceBroadcastControl", className)}
         onClick={onClick}
         aria-label={label}
     >

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

@@ -18,11 +18,15 @@ import React from "react";
 
 import {
     VoiceBroadcastControl,
+    VoiceBroadcastInfoState,
     VoiceBroadcastRecording,
 } from "../..";
 import { useVoiceBroadcastRecording } from "../../hooks/useVoiceBroadcastRecording";
 import { VoiceBroadcastHeader } from "../atoms/VoiceBroadcastHeader";
 import { Icon as StopIcon } from "../../../../res/img/element-icons/Stop.svg";
+import { Icon as PauseIcon } from "../../../../res/img/element-icons/pause.svg";
+import { Icon as RecordIcon } from "../../../../res/img/element-icons/Record.svg";
+import { _t } from "../../../languageHandler";
 
 interface VoiceBroadcastRecordingPipProps {
     recording: VoiceBroadcastRecording;
@@ -31,11 +35,22 @@ interface VoiceBroadcastRecordingPipProps {
 export const VoiceBroadcastRecordingPip: React.FC<VoiceBroadcastRecordingPipProps> = ({ recording }) => {
     const {
         live,
-        sender,
+        recordingState,
         room,
+        sender,
         stopRecording,
+        toggleRecording,
     } = useVoiceBroadcastRecording(recording);
 
+    const toggleControl = recordingState === VoiceBroadcastInfoState.Paused
+        ? <VoiceBroadcastControl
+            className="mx_VoiceBroadcastControl-recording"
+            onClick={toggleRecording}
+            icon={RecordIcon}
+            label={_t("resume voice broadcast")}
+        />
+        : <VoiceBroadcastControl onClick={toggleRecording} icon={PauseIcon} label={_t("pause voice broadcast")} />;
+
     return <div
         className="mx_VoiceBroadcastRecordingPip"
     >
@@ -46,6 +61,7 @@ export const VoiceBroadcastRecordingPip: React.FC<VoiceBroadcastRecordingPipProp
         />
         <hr className="mx_VoiceBroadcastRecordingPip_divider" />
         <div className="mx_VoiceBroadcastRecordingPip_controls">
+            { toggleControl }
             <VoiceBroadcastControl
                 icon={StopIcon}
                 label="Stop Recording"

src/voice-broadcast/hooks/useVoiceBroadcastRecording.tsx

@@ -52,23 +52,31 @@ export const useVoiceBroadcastRecording = (recording: VoiceBroadcastRecording) =
         const confirmed = await showStopBroadcastingDialog();
 
         if (confirmed) {
-            recording.stop();
+            await recording.stop();
         }
     };
 
-    const [live, setLive] = useState(recording.getState() === VoiceBroadcastInfoState.Started);
+    const [recordingState, setRecordingState] = useState(recording.getState());
     useTypedEventEmitter(
         recording,
         VoiceBroadcastRecordingEvent.StateChanged,
         (state: VoiceBroadcastInfoState, _recording: VoiceBroadcastRecording) => {
-            setLive(state === VoiceBroadcastInfoState.Started);
+            setRecordingState(state);
         },
     );
 
+    const live = [
+        VoiceBroadcastInfoState.Started,
+        VoiceBroadcastInfoState.Paused,
+        VoiceBroadcastInfoState.Running,
+    ].includes(recordingState);
+
     return {
         live,
+        recordingState,
         room,
         sender: recording.infoEvent.sender,
         stopRecording,
+        toggleRecording: recording.toggle,
     };
 };

src/voice-broadcast/models/VoiceBroadcastRecording.ts

@@ -76,11 +76,38 @@ export class VoiceBroadcastRecording
     }
 
     public async stop(): Promise<void> {
+        if (this.state === VoiceBroadcastInfoState.Stopped) return;
+
         this.setState(VoiceBroadcastInfoState.Stopped);
         await this.stopRecorder();
-        await this.sendStoppedStateEvent();
+        await this.sendInfoStateEvent(VoiceBroadcastInfoState.Stopped);
     }
 
+    public async pause(): Promise<void> {
+        // stopped or already paused recordings cannot be paused
+        if ([VoiceBroadcastInfoState.Stopped, VoiceBroadcastInfoState.Paused].includes(this.state)) return;
+
+        this.setState(VoiceBroadcastInfoState.Paused);
+        await this.stopRecorder();
+        await this.sendInfoStateEvent(VoiceBroadcastInfoState.Paused);
+    }
+
+    public async resume(): Promise<void> {
+        if (this.state !== VoiceBroadcastInfoState.Paused) return;
+
+        this.setState(VoiceBroadcastInfoState.Running);
+        await this.getRecorder().start();
+        await this.sendInfoStateEvent(VoiceBroadcastInfoState.Running);
+    }
+
+    public toggle = async (): Promise<void> => {
+        if (this.getState() === VoiceBroadcastInfoState.Paused) return this.resume();
+
+        if ([VoiceBroadcastInfoState.Started, VoiceBroadcastInfoState.Running].includes(this.getState())) {
+            return this.pause();
+        }
+    };
+
     public getState(): VoiceBroadcastInfoState {
         return this.state;
     }
@@ -162,14 +189,14 @@ export class VoiceBroadcastRecording
         await this.client.sendMessage(this.infoEvent.getRoomId(), content);
     }
 
-    private async sendStoppedStateEvent(): Promise<void> {
+    private async sendInfoStateEvent(state: VoiceBroadcastInfoState): Promise<void> {
         // TODO Michael W: add error handling for state event
         await this.client.sendStateEvent(
             this.infoEvent.getRoomId(),
             VoiceBroadcastInfoEventType,
             {
                 device_id: this.client.getDeviceId(),
-                state: VoiceBroadcastInfoState.Stopped,
+                state,
                 ["m.relates_to"]: {
                     rel_type: RelationType.Reference,
                     event_id: this.infoEvent.getId(),

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

@@ -22,12 +22,12 @@ import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { sleep } from "matrix-js-sdk/src/utils";
 
 import {
-    VoiceBroadcastInfoEventType,
     VoiceBroadcastInfoState,
     VoiceBroadcastRecording,
     VoiceBroadcastRecordingPip,
 } from "../../../../src/voice-broadcast";
-import { mkEvent, stubClient } from "../../../test-utils";
+import { stubClient } from "../../../test-utils";
+import { mkVoiceBroadcastInfoStateEvent } from "../../utils/test-utils";
 
 // mock RoomAvatar, because it is doing too much fancy stuff
 jest.mock("../../../../src/components/views/avatars/RoomAvatar", () => ({
@@ -37,36 +37,49 @@ jest.mock("../../../../src/components/views/avatars/RoomAvatar", () => ({
     }),
 }));
 
+jest.mock("../../../../src/audio/VoiceRecording");
+
 describe("VoiceBroadcastRecordingPip", () => {
-    const userId = "@user:example.com";
     const roomId = "!room:example.com";
     let client: MatrixClient;
     let infoEvent: MatrixEvent;
     let recording: VoiceBroadcastRecording;
+    let renderResult: RenderResult;
+
+    const renderPip = (state: VoiceBroadcastInfoState) => {
+        infoEvent = mkVoiceBroadcastInfoStateEvent(roomId, state, client.getUserId());
+        recording = new VoiceBroadcastRecording(infoEvent, client);
+
+        if (state === VoiceBroadcastInfoState.Paused) {
+            recording.pause();
+        }
+
+        renderResult = render(<VoiceBroadcastRecordingPip recording={recording} />);
+    };
 
     beforeAll(() => {
         client = stubClient();
-        infoEvent = mkEvent({
-            event: true,
-            type: VoiceBroadcastInfoEventType,
-            content: {},
-            room: roomId,
-            user: userId,
-        });
-        recording = new VoiceBroadcastRecording(infoEvent, client);
     });
 
-    describe("when rendering", () => {
+    describe("when rendering a started recording", () => {
-        let renderResult: RenderResult;
-
         beforeEach(() => {
-            renderResult = render(<VoiceBroadcastRecordingPip recording={recording} />);
+            renderPip(VoiceBroadcastInfoState.Started);
         });
 
-        it("should create the expected result", () => {
+        it("should render as expected", () => {
             expect(renderResult.container).toMatchSnapshot();
         });
 
+        describe("and clicking the pause button", () => {
+            beforeEach(async () => {
+                await userEvent.click(screen.getByLabelText("pause voice broadcast"));
+            });
+
+            it("should pause the recording", () => {
+                expect(recording.getState()).toBe(VoiceBroadcastInfoState.Paused);
+            });
+        });
+
         describe("and clicking the stop button", () => {
             beforeEach(async () => {
                 await userEvent.click(screen.getByLabelText("Stop Recording"));
@@ -89,4 +102,24 @@ describe("VoiceBroadcastRecordingPip", () => {
             });
         });
     });
+
+    describe("when rendering a paused recording", () => {
+        beforeEach(() => {
+            renderPip(VoiceBroadcastInfoState.Paused);
+        });
+
+        it("should render as expected", () => {
+            expect(renderResult.container).toMatchSnapshot();
+        });
+
+        describe("and clicking the resume button", () => {
+            beforeEach(async () => {
+                await userEvent.click(screen.getByLabelText("resume voice broadcast"));
+            });
+
+            it("should resume the recording", () => {
+                expect(recording.getState()).toBe(VoiceBroadcastInfoState.Running);
+            });
+        });
+    });
 });

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`VoiceBroadcastRecordingPip when rendering should create the expected result 1`] = `
+exports[`VoiceBroadcastRecordingPip when rendering a paused recording should render as expected 1`] = `
 <div>
   <div
     class="mx_VoiceBroadcastRecordingPip"
@@ -29,7 +29,7 @@ exports[`VoiceBroadcastRecordingPip when rendering should create the expected re
             class="mx_Icon mx_Icon_16"
           />
           <span>
-            @user:example.com
+            @userId:matrix.org
           </span>
         </div>
       </div>
@@ -48,6 +48,89 @@ exports[`VoiceBroadcastRecordingPip when rendering should create the expected re
     <div
       class="mx_VoiceBroadcastRecordingPip_controls"
     >
+      <div
+        aria-label="resume voice broadcast"
+        class="mx_AccessibleButton mx_VoiceBroadcastControl mx_VoiceBroadcastControl-recording"
+        role="button"
+        tabindex="0"
+      >
+        <div
+          class="mx_Icon mx_Icon_16"
+        />
+      </div>
+      <div
+        aria-label="Stop Recording"
+        class="mx_AccessibleButton mx_VoiceBroadcastControl"
+        role="button"
+        tabindex="0"
+      >
+        <div
+          class="mx_Icon mx_Icon_16"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VoiceBroadcastRecordingPip when rendering a started recording should render as expected 1`] = `
+<div>
+  <div
+    class="mx_VoiceBroadcastRecordingPip"
+  >
+    <div
+      class="mx_VoiceBroadcastHeader"
+    >
+      <div
+        data-testid="room-avatar"
+      >
+        room avatar: 
+        My room
+      </div>
+      <div
+        class="mx_VoiceBroadcastHeader_content"
+      >
+        <div
+          class="mx_VoiceBroadcastHeader_room"
+        >
+          My room
+        </div>
+        <div
+          class="mx_VoiceBroadcastHeader_line"
+        >
+          <div
+            class="mx_Icon mx_Icon_16"
+          />
+          <span>
+            @userId:matrix.org
+          </span>
+        </div>
+      </div>
+      <div
+        class="mx_LiveBadge"
+      >
+        <div
+          class="mx_Icon mx_Icon_16"
+        />
+        Live
+      </div>
+    </div>
+    <hr
+      class="mx_VoiceBroadcastRecordingPip_divider"
+    />
+    <div
+      class="mx_VoiceBroadcastRecordingPip_controls"
+    >
+      <div
+        aria-label="pause voice broadcast"
+        class="mx_AccessibleButton mx_VoiceBroadcastControl"
+        role="button"
+        tabindex="0"
+      >
+        <div
+          class="mx_Icon mx_Icon_16"
+        />
+      </div>
       <div
         aria-label="Stop Recording"
         class="mx_AccessibleButton mx_VoiceBroadcastControl"

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

@@ -92,6 +92,25 @@ describe("VoiceBroadcastRecording", () => {
         });
     };
 
+    const itShouldSendAnInfoEvent = (state: VoiceBroadcastInfoState) => {
+        it(`should send a ${state} info event`, () => {
+            expect(client.sendStateEvent).toHaveBeenCalledWith(
+                roomId,
+                VoiceBroadcastInfoEventType,
+                {
+
+                    device_id: client.getDeviceId(),
+                    state,
+                    ["m.relates_to"]: {
+                        rel_type: RelationType.Reference,
+                        event_id: infoEvent.getId(),
+                    },
+                },
+                client.getUserId(),
+            );
+        });
+    };
+
     beforeEach(() => {
         client = stubClient();
         room = mkStubRoom(roomId, "Test Room", client);
@@ -355,6 +374,26 @@ describe("VoiceBroadcastRecording", () => {
                 });
             });
 
+            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);
+
+                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 calling destroy", () => {
                 beforeEach(() => {
                     voiceBroadcastRecording.destroy();
@@ -370,6 +409,32 @@ describe("VoiceBroadcastRecording", () => {
                 });
             });
         });
+
+        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.Running);
+                itShouldSendAnInfoEvent(VoiceBroadcastInfoState.Running);
+
+                it("should start the recorder", () => {
+                    expect(mocked(voiceBroadcastRecorder.start)).toHaveBeenCalled();
+                });
+
+                it("should emit a running state changed event", () => {
+                    expect(onStateChanged).toHaveBeenCalledWith(VoiceBroadcastInfoState.Running);
+                });
+            });
+        });
     });
 
     describe("when created for a Voice Broadcast Info with a Stopped relation", () => {