Add confirm end voice broadcast dialog (#9442)

src/i18n/strings/en_EN.json

@@ -637,6 +637,9 @@
     "Send <b>%(msgtype)s</b> messages as you in your active room": "Send <b>%(msgtype)s</b> messages as you in your active room",
     "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",
+    "Stop live broadcasting?": "Stop live broadcasting?",
+    "Are you sure you want to stop your live broadcast?This will end the broadcast and the full recording will be available in the room.": "Are you sure you want to stop your live broadcast?This will end the broadcast and the full recording will be available in the room.",
+    "Yes, stop broadcast": "Yes, stop broadcast",
     "Live": "Live",
     "pause voice broadcast": "pause voice broadcast",
     "resume voice broadcast": "resume voice broadcast",

src/voice-broadcast/hooks/useVoiceBroadcastRecording.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { useState } from "react";
+import React, { useState } from "react";
 
 import {
     VoiceBroadcastInfoState,
@@ -22,15 +22,40 @@ import {
     VoiceBroadcastRecordingEvent,
     VoiceBroadcastRecordingsStore,
 } from "..";
+import QuestionDialog from "../../components/views/dialogs/QuestionDialog";
 import { useTypedEventEmitter } from "../../hooks/useEventEmitter";
+import { _t } from "../../languageHandler";
 import { MatrixClientPeg } from "../../MatrixClientPeg";
+import Modal from "../../Modal";
+
+const showStopBroadcastingDialog = async (): Promise<boolean> => {
+    const { finished } = Modal.createDialog(
+        QuestionDialog,
+        {
+            title: _t("Stop live broadcasting?"),
+            description: (
+                <p>
+                    { _t("Are you sure you want to stop your live broadcast?"
+                        + "This will end the broadcast and the full recording will be available in the room.") }
+                </p>
+            ),
+            button: _t("Yes, stop broadcast"),
+        },
+    );
+    const [confirmed] = await finished;
+    return confirmed;
+};
 
 export const useVoiceBroadcastRecording = (recording: VoiceBroadcastRecording) => {
     const client = MatrixClientPeg.get();
     const room = client.getRoom(recording.infoEvent.getRoomId());
-    const stopRecording = () => {
+    const stopRecording = async () => {
-        recording.stop();
+        const confirmed = await showStopBroadcastingDialog();
-        VoiceBroadcastRecordingsStore.instance().clearCurrent();
+
+        if (confirmed) {
+            recording.stop();
+            VoiceBroadcastRecordingsStore.instance().clearCurrent();
+        }
     };
 
     const [live, setLive] = useState(recording.getState() === VoiceBroadcastInfoState.Started);

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

@@ -16,11 +16,14 @@ limitations under the License.
 //
 
 import React from "react";
-import { render, RenderResult } from "@testing-library/react";
+import { render, RenderResult, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 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";
@@ -63,5 +66,27 @@ describe("VoiceBroadcastRecordingPip", () => {
         it("should create the expected result", () => {
             expect(renderResult.container).toMatchSnapshot();
         });
+
+        describe("and clicking the stop button", () => {
+            beforeEach(async () => {
+                await userEvent.click(screen.getByLabelText("stop voice broadcast"));
+                // modal rendering has some weird sleeps
+                await sleep(100);
+            });
+
+            it("should display the confirm end dialog", () => {
+                screen.getByText("Stop live broadcasting?");
+            });
+
+            describe("and confirming the dialog", () => {
+                beforeEach(async () => {
+                    await userEvent.click(screen.getByText("Yes, stop broadcast"));
+                });
+
+                it("should end the recording", () => {
+                    expect(recording.getState()).toBe(VoiceBroadcastInfoState.Stopped);
+                });
+            });
+        });
     });
 });