Confirm listen to a broadcast while recording (#9831)

src/contexts/SDKContext.ts

@@ -172,7 +172,7 @@ export class SdkContextClass {
 
     public get voiceBroadcastPlaybacksStore(): VoiceBroadcastPlaybacksStore {
         if (!this._VoiceBroadcastPlaybacksStore) {
-            this._VoiceBroadcastPlaybacksStore = new VoiceBroadcastPlaybacksStore();
+            this._VoiceBroadcastPlaybacksStore = new VoiceBroadcastPlaybacksStore(this.voiceBroadcastRecordingsStore);
         }
         return this._VoiceBroadcastPlaybacksStore;
     }

src/i18n/strings/en_EN.json

@@ -659,6 +659,10 @@
     "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",
+    "Listen to live broadcast?": "Listen to live broadcast?",
+    "If you start listening to this live broadcast, your current live broadcast recording will be ended.": "If you start listening to this live broadcast, your current live broadcast recording will be ended.",
+    "Yes, end my recording": "Yes, end my recording",
+    "No": "No",
     "30s backward": "30s backward",
     "30s forward": "30s forward",
     "Go live": "Go live",
@@ -815,7 +819,6 @@
     "Learn more": "Learn more",
     "Share anonymous data to help us identify issues. Nothing personal. No third parties. <LearnMoreLink>Learn More</LearnMoreLink>": "Share anonymous data to help us identify issues. Nothing personal. No third parties. <LearnMoreLink>Learn More</LearnMoreLink>",
     "Yes": "Yes",
-    "No": "No",
     "Help improve %(analyticsOwner)s": "Help improve %(analyticsOwner)s",
     "You have unverified sessions": "You have unverified sessions",
     "Review to ensure your account is safe": "Review to ensure your account is safe",

src/voice-broadcast/components/molecules/ConfirmListeBroadcastStopCurrent.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 { defer } from "matrix-js-sdk/src/utils";
+import React from "react";
+
+import BaseDialog from "../../../components/views/dialogs/BaseDialog";
+import DialogButtons from "../../../components/views/elements/DialogButtons";
+import { _t } from "../../../languageHandler";
+import Modal from "../../../Modal";
+
+interface Props {
+    onFinished: (confirmed: boolean) => void;
+}
+
+export const ConfirmListenBroadcastStopCurrentDialog: React.FC<Props> = ({ onFinished }) => {
+    return (
+        <BaseDialog title={_t("Listen to live broadcast?")} hasCancel={true} onFinished={onFinished}>
+            <p>
+                {_t(
+                    "If you start listening to this live broadcast, " +
+                        "your current live broadcast recording will be ended.",
+                )}
+            </p>
+            <DialogButtons
+                onPrimaryButtonClick={() => onFinished(true)}
+                primaryButton={_t("Yes, end my recording")}
+                cancelButton={_t("No")}
+                onCancel={() => onFinished(false)}
+            />
+        </BaseDialog>
+    );
+};
+
+export const showConfirmListenBroadcastStopCurrentDialog = async (): Promise<boolean> => {
+    const { promise, resolve } = defer<boolean>();
+
+    Modal.createDialog(ConfirmListenBroadcastStopCurrentDialog, {
+        onFinished: resolve,
+    });
+
+    return promise;
+};

src/voice-broadcast/index.ts

@@ -30,6 +30,7 @@ export * from "./components/atoms/VoiceBroadcastControl";
 export * from "./components/atoms/VoiceBroadcastHeader";
 export * from "./components/atoms/VoiceBroadcastPlaybackControl";
 export * from "./components/atoms/VoiceBroadcastRoomSubtitle";
+export * from "./components/molecules/ConfirmListeBroadcastStopCurrent";
 export * from "./components/molecules/VoiceBroadcastPlaybackBody";
 export * from "./components/molecules/VoiceBroadcastSmallPlaybackBody";
 export * from "./components/molecules/VoiceBroadcastPreRecordingPip";

src/voice-broadcast/models/VoiceBroadcastPlayback.ts

@@ -36,6 +36,8 @@ import {
     VoiceBroadcastInfoEventType,
     VoiceBroadcastInfoState,
     VoiceBroadcastInfoEventContent,
+    VoiceBroadcastRecordingsStore,
+    showConfirmListenBroadcastStopCurrentDialog,
 } from "..";
 import { RelationsHelper, RelationsHelperEvent } from "../../events/RelationsHelper";
 import { VoiceBroadcastChunkEvents } from "../utils/VoiceBroadcastChunkEvents";
@@ -86,7 +88,7 @@ export class VoiceBroadcastPlayback
     public readonly liveData = new SimpleObservable<number[]>();
     private liveness: VoiceBroadcastLiveness = "not-live";
 
-    // set vial addInfoEvent() in constructor
+    // set via addInfoEvent() in constructor
     private infoState!: VoiceBroadcastInfoState;
     private lastInfoEvent!: MatrixEvent;
 
@@ -94,7 +96,11 @@ export class VoiceBroadcastPlayback
     private chunkRelationHelper!: RelationsHelper;
     private infoRelationHelper!: RelationsHelper;
 
-    public constructor(public readonly infoEvent: MatrixEvent, private client: MatrixClient) {
+    public constructor(
+        public readonly infoEvent: MatrixEvent,
+        private client: MatrixClient,
+        private recordings: VoiceBroadcastRecordingsStore,
+    ) {
         super();
         this.addInfoEvent(this.infoEvent);
         this.infoEvent.on(MatrixEventEvent.BeforeRedaction, this.onBeforeRedaction);
@@ -399,6 +405,21 @@ export class VoiceBroadcastPlayback
     }
 
     public async start(): Promise<void> {
+        if (this.state === VoiceBroadcastPlaybackState.Playing) return;
+
+        const currentRecording = this.recordings.getCurrent();
+
+        if (currentRecording && currentRecording.getState() !== VoiceBroadcastInfoState.Stopped) {
+            const shouldStopRecording = await showConfirmListenBroadcastStopCurrentDialog();
+
+            if (!shouldStopRecording) {
+                // keep recording
+                return;
+            }
+
+            await this.recordings.getCurrent()?.stop();
+        }
+
         const chunkEvents = this.chunkEvents.getEvents();
 
         const toPlay =

src/voice-broadcast/stores/VoiceBroadcastPlaybacksStore.ts

@@ -17,7 +17,12 @@ limitations under the License.
 import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { TypedEventEmitter } from "matrix-js-sdk/src/models/typed-event-emitter";
 
-import { VoiceBroadcastPlayback, VoiceBroadcastPlaybackEvent, VoiceBroadcastPlaybackState } from "..";
+import {
+    VoiceBroadcastPlayback,
+    VoiceBroadcastPlaybackEvent,
+    VoiceBroadcastPlaybackState,
+    VoiceBroadcastRecordingsStore,
+} from "..";
 import { IDestroyable } from "../../utils/IDestroyable";
 
 export enum VoiceBroadcastPlaybacksStoreEvent {
@@ -42,7 +47,7 @@ export class VoiceBroadcastPlaybacksStore
     /** Playbacks indexed by their info event id. */
     private playbacks = new Map<string, VoiceBroadcastPlayback>();
 
-    public constructor() {
+    public constructor(private recordings: VoiceBroadcastRecordingsStore) {
         super();
     }
 
@@ -69,7 +74,7 @@ export class VoiceBroadcastPlaybacksStore
         const infoEventId = infoEvent.getId();
 
         if (!this.playbacks.has(infoEventId)) {
-            this.addPlayback(new VoiceBroadcastPlayback(infoEvent, client));
+            this.addPlayback(new VoiceBroadcastPlayback(infoEvent, client, this.recordings));
         }
 
         return this.playbacks.get(infoEventId);