diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index ca804ea50b..d24c763bec 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -637,6 +637,9 @@ "Send %(msgtype)s messages as you in your active room": "Send %(msgtype)s messages as you in your active room", "See %(msgtype)s messages posted to this room": "See %(msgtype)s messages posted to this room", "See %(msgtype)s messages posted to your active room": "See %(msgtype)s 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", diff --git a/src/voice-broadcast/hooks/useVoiceBroadcastRecording.ts b/src/voice-broadcast/hooks/useVoiceBroadcastRecording.tsx similarity index 59% rename from src/voice-broadcast/hooks/useVoiceBroadcastRecording.ts rename to src/voice-broadcast/hooks/useVoiceBroadcastRecording.tsx index fcf6a36876..c0db561746 100644 --- a/src/voice-broadcast/hooks/useVoiceBroadcastRecording.ts +++ b/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 => { + const { finished } = Modal.createDialog( + QuestionDialog, + { + title: _t("Stop live broadcasting?"), + description: ( +

+ { _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.") } +

+ ), + 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 = () => { - recording.stop(); - VoiceBroadcastRecordingsStore.instance().clearCurrent(); + const stopRecording = async () => { + const confirmed = await showStopBroadcastingDialog(); + + if (confirmed) { + recording.stop(); + VoiceBroadcastRecordingsStore.instance().clearCurrent(); + } }; const [live, setLive] = useState(recording.getState() === VoiceBroadcastInfoState.Started); diff --git a/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip-test.tsx b/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip-test.tsx index a25c1b605d..7fb62b2bd5 100644 --- a/test/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip-test.tsx +++ b/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); + }); + }); + }); }); });