Add voice broadcast playback pip

src/components/views/voip/PipView.tsx

@@ -39,11 +39,14 @@ import { CallStore } from "../../../stores/CallStore";
 import {
     useCurrentVoiceBroadcastPreRecording,
     useCurrentVoiceBroadcastRecording,
+    VoiceBroadcastPlayback,
+    VoiceBroadcastPlaybackBody,
     VoiceBroadcastPreRecording,
     VoiceBroadcastPreRecordingPip,
     VoiceBroadcastRecording,
     VoiceBroadcastRecordingPip,
 } from '../../../voice-broadcast';
+import { useCurrentVoiceBroadcastPlayback } from '../../../voice-broadcast/hooks/useCurrentVoiceBroadcastPlayback';
 
 const SHOW_CALL_IN_STATES = [
     CallState.Connected,
@@ -57,6 +60,7 @@ const SHOW_CALL_IN_STATES = [
 interface IProps {
     voiceBroadcastRecording?: Optional<VoiceBroadcastRecording>;
     voiceBroadcastPreRecording?: Optional<VoiceBroadcastPreRecording>;
+    voiceBroadcastPlayback?: Optional<VoiceBroadcastPlayback>;
 }
 
 interface IState {
@@ -77,6 +81,11 @@ interface IState {
     moving: boolean;
 }
 
+type CreatePipContent = (object: {
+    onStartMoving?: (event: React.MouseEvent<Element, MouseEvent>) => void;
+    onResize?: (event: Event) => void;
+}) => JSX.Element;
+
 const getRoomAndAppForWidget = (widgetId: string, roomId: string): [Room | null, IApp | null] => {
     if (!widgetId) return [null, null];
     if (!roomId) return [null, null];
@@ -328,9 +337,42 @@ class PipView extends React.Component<IProps, IState> {
         this.setState({ showWidgetInPip, persistentWidgetId, persistentRoomId });
     }
 
+    private createVoiceBroadcastPlaybackPipContent(): CreatePipContent {
+        return ({ onStartMoving }) => <div onMouseDown={onStartMoving}>
+            <VoiceBroadcastPlaybackBody
+                playback={this.props.voiceBroadcastPlayback}
+                pip={true}
+            />
+        </div>;
+    }
+
+    private createVoiceBroadcastPreRecordingPipContent(): CreatePipContent {
+        return ({ onStartMoving }) => <div onMouseDown={onStartMoving}>
+            <VoiceBroadcastPreRecordingPip
+                voiceBroadcastPreRecording={this.props.voiceBroadcastPreRecording}
+            />
+        </div>;
+    }
+
+    private createVoiceBroadcastRecordingPipContent(): CreatePipContent {
+        return ({ onStartMoving }) => <div onMouseDown={onStartMoving}>
+            <VoiceBroadcastRecordingPip
+                recording={this.props.voiceBroadcastRecording}
+            />
+        </div>;
+    }
+
     public render() {
         const pipMode = true;
-        let pipContent;
+        let pipContent: CreatePipContent;
+
+        if (this.props.voiceBroadcastPreRecording) {
+            pipContent = this.createVoiceBroadcastPreRecordingPipContent();
+        } else if (this.props.voiceBroadcastPlayback) {
+            pipContent = this.createVoiceBroadcastPlaybackPipContent();
+        } else if (this.props.voiceBroadcastRecording) {
+            pipContent = this.createVoiceBroadcastRecordingPipContent();
+        }
 
         if (this.state.primaryCall) {
             // get a ref to call inside the current scope
@@ -375,26 +417,6 @@ class PipView extends React.Component<IProps, IState> {
                 </div>;
         }
 
-        if (this.props.voiceBroadcastPreRecording) {
-            // get a ref to pre-recording inside the current scope
-            const preRecording = this.props.voiceBroadcastPreRecording;
-            pipContent = ({ onStartMoving }) => <div onMouseDown={onStartMoving}>
-                <VoiceBroadcastPreRecordingPip
-                    voiceBroadcastPreRecording={preRecording}
-                />
-            </div>;
-        }
-
-        if (this.props.voiceBroadcastRecording) {
-            // get a ref to recording inside the current scope
-            const recording = this.props.voiceBroadcastRecording;
-            pipContent = ({ onStartMoving }) => <div onMouseDown={onStartMoving}>
-                <VoiceBroadcastRecordingPip
-                    recording={recording}
-                />
-            </div>;
-        }
-
         if (!!pipContent) {
             return <PictureInPictureDragger
                 className="mx_LegacyCallPreview"
@@ -420,9 +442,13 @@ const PipViewHOC: React.FC<IProps> = (props) => {
     const voiceBroadcastRecordingsStore = sdkContext.voiceBroadcastRecordingsStore;
     const { currentVoiceBroadcastRecording } = useCurrentVoiceBroadcastRecording(voiceBroadcastRecordingsStore);
 
+    const voiceBroadcastPlaybacksStore = sdkContext.voiceBroadcastPlaybacksStore;
+    const { voiceBroadcastPlayback } = useCurrentVoiceBroadcastPlayback(voiceBroadcastPlaybacksStore);
+
     return <PipView
-        voiceBroadcastRecording={currentVoiceBroadcastRecording}
+        voiceBroadcastPlayback={voiceBroadcastPlayback}
         voiceBroadcastPreRecording={currentVoiceBroadcastPreRecording}
+        voiceBroadcastRecording={currentVoiceBroadcastRecording}
         {...props}
     />;
 };

src/contexts/SDKContext.ts

@@ -29,7 +29,11 @@ import TypingStore from "../stores/TypingStore";
 import { WidgetLayoutStore } from "../stores/widgets/WidgetLayoutStore";
 import { WidgetPermissionStore } from "../stores/widgets/WidgetPermissionStore";
 import WidgetStore from "../stores/WidgetStore";
-import { VoiceBroadcastPreRecordingStore, VoiceBroadcastRecordingsStore } from "../voice-broadcast";
+import {
+    VoiceBroadcastPlaybacksStore,
+    VoiceBroadcastPreRecordingStore,
+    VoiceBroadcastRecordingsStore,
+} from "../voice-broadcast";
 
 export const SDKContext = createContext<SdkContextClass>(undefined);
 SDKContext.displayName = "SDKContext";
@@ -66,6 +70,7 @@ export class SdkContextClass {
     protected _TypingStore?: TypingStore;
     protected _VoiceBroadcastRecordingsStore?: VoiceBroadcastRecordingsStore;
     protected _VoiceBroadcastPreRecordingStore?: VoiceBroadcastPreRecordingStore;
+    protected _VoiceBroadcastPlaybacksStore?: VoiceBroadcastPlaybacksStore;
 
     /**
      * Automatically construct stores which need to be created eagerly so they can register with
@@ -158,4 +163,11 @@ export class SdkContextClass {
         }
         return this._VoiceBroadcastPreRecordingStore;
     }
+
+    public get voiceBroadcastPlaybacksStore(): VoiceBroadcastPlaybacksStore {
+        if (!this._VoiceBroadcastPlaybacksStore) {
+            this._VoiceBroadcastPlaybacksStore = VoiceBroadcastPlaybacksStore.instance();
+        }
+        return this._VoiceBroadcastPlaybacksStore;
+    }
 }

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

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
+import classNames from "classnames";
 
 import {
     VoiceBroadcastControl,
@@ -31,10 +32,12 @@ import Clock from "../../../components/views/audio_messages/Clock";
 import SeekBar from "../../../components/views/audio_messages/SeekBar";
 
 interface VoiceBroadcastPlaybackBodyProps {
+    pip?: boolean;
     playback: VoiceBroadcastPlayback;
 }
 
 export const VoiceBroadcastPlaybackBody: React.FC<VoiceBroadcastPlaybackBodyProps> = ({
+    pip = false,
     playback,
 }) => {
     const {
@@ -76,8 +79,13 @@ export const VoiceBroadcastPlaybackBody: React.FC<VoiceBroadcastPlaybackBodyProp
         />;
     }
 
+    const classes = classNames({
+        mx_VoiceBroadcastBody: true,
+        ["mx_VoiceBroadcastBody--pip"]: pip,
+    });
+
     return (
-        <div className="mx_VoiceBroadcastBody">
+        <div className={classes}>
             <VoiceBroadcastHeader
                 live={liveness}
                 microphoneLabel={sender?.name}

src/voice-broadcast/hooks/useCurrentVoiceBroadcastPlayback.ts

@@ -0,0 +1,44 @@
+/*
+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 { useState } from "react";
+
+import { useTypedEventEmitter } from "../../hooks/useEventEmitter";
+import { VoiceBroadcastPlayback } from "../models/VoiceBroadcastPlayback";
+import {
+    VoiceBroadcastPlaybacksStore,
+    VoiceBroadcastPlaybacksStoreEvent,
+} from "../stores/VoiceBroadcastPlaybacksStore";
+
+export const useCurrentVoiceBroadcastPlayback = (
+    voiceBroadcastPlaybackStore: VoiceBroadcastPlaybacksStore,
+) => {
+    const [voiceBroadcastPlayback, setVoiceBroadcastPlayback] = useState(
+        voiceBroadcastPlaybackStore.getCurrent(),
+    );
+
+    useTypedEventEmitter(
+        voiceBroadcastPlaybackStore,
+        VoiceBroadcastPlaybacksStoreEvent.CurrentChanged,
+        (playback: VoiceBroadcastPlayback) => {
+            setVoiceBroadcastPlayback(playback);
+        },
+    );
+
+    return {
+        voiceBroadcastPlayback,
+    };
+};

src/voice-broadcast/stores/VoiceBroadcastPlaybacksStore.ts

@@ -53,6 +53,13 @@ export class VoiceBroadcastPlaybacksStore
         this.emit(VoiceBroadcastPlaybacksStoreEvent.CurrentChanged, current);
     }
 
+    public clearCurrent(): void {
+        if (this.current === null) return;
+
+        this.current = null;
+        this.emit(VoiceBroadcastPlaybacksStoreEvent.CurrentChanged, null);
+    }
+
     public getCurrent(): VoiceBroadcastPlayback {
         return this.current;
     }
@@ -80,11 +87,15 @@ export class VoiceBroadcastPlaybacksStore
         state: VoiceBroadcastPlaybackState,
         playback: VoiceBroadcastPlayback,
     ): void => {
-        if ([
-            VoiceBroadcastPlaybackState.Buffering,
-            VoiceBroadcastPlaybackState.Playing,
-        ].includes(state)) {
-            this.pauseExcept(playback);
+        switch (state) {
+            case VoiceBroadcastPlaybackState.Buffering:
+            case VoiceBroadcastPlaybackState.Playing:
+                this.pauseExcept(playback);
+                this.setCurrent(playback);
+                break;
+            case VoiceBroadcastPlaybackState.Stopped:
+                this.clearCurrent();
+                break;
         }
     };