Allow call and broadcast PiP at the same time (#9829)

res/css/views/voip/_LegacyCallPreview.pcss

@@ -15,8 +15,12 @@ limitations under the License.
 */
 
 .mx_LegacyCallPreview {
-    position: fixed;
+    align-items: flex-end;
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-16;
     left: 0;
+    position: fixed;
     top: 0;
 
     pointer-events: initial; /* restore pointer events so the user can leave/interact */

src/components/views/voip/PictureInPictureDragger.tsx

@@ -47,7 +47,7 @@ interface IChildrenOptions {
 
 interface IProps {
     className?: string;
-    children: CreatePipChildren;
+    children: Array<CreatePipChildren>;
     draggable: boolean;
     onDoubleClick?: () => void;
     onMove?: () => void;
@@ -208,6 +208,13 @@ export default class PictureInPictureDragger extends React.Component<IProps> {
             transform: `translateX(${this.translationX}px) translateY(${this.translationY}px)`,
         };
 
+        const children = this.props.children.map((create: CreatePipChildren) => {
+            return create({
+                onStartMoving: this.onStartMoving,
+                onResize: this.onResize,
+            });
+        });
+
         return (
             <aside
                 className={this.props.className}
@@ -215,10 +222,7 @@ export default class PictureInPictureDragger extends React.Component<IProps> {
                 ref={this.callViewWrapper}
                 onDoubleClick={this.props.onDoubleClick}
             >
-                {this.props.children({
-                    onStartMoving: this.onStartMoving,
-                    onResize: this.onResize,
-                })}
+                {children}
             </aside>
         );
     }

src/components/views/voip/PipView.tsx

@@ -373,24 +373,20 @@ class PipView extends React.Component<IProps, IState> {
 
     public render() {
         const pipMode = true;
-        let pipContent: CreatePipChildren | null = null;
-
-        if (this.props.voiceBroadcastPlayback) {
-            pipContent = this.createVoiceBroadcastPlaybackPipContent(this.props.voiceBroadcastPlayback);
-        }
-
-        if (this.props.voiceBroadcastPreRecording) {
-            pipContent = this.createVoiceBroadcastPreRecordingPipContent(this.props.voiceBroadcastPreRecording);
-        }
+        let pipContent: Array<CreatePipChildren> = [];
 
         if (this.props.voiceBroadcastRecording) {
-            pipContent = this.createVoiceBroadcastRecordingPipContent(this.props.voiceBroadcastRecording);
+            pipContent = [this.createVoiceBroadcastRecordingPipContent(this.props.voiceBroadcastRecording)];
+        } else if (this.props.voiceBroadcastPreRecording) {
+            pipContent = [this.createVoiceBroadcastPreRecordingPipContent(this.props.voiceBroadcastPreRecording)];
+        } else if (this.props.voiceBroadcastPlayback) {
+            pipContent = [this.createVoiceBroadcastPlaybackPipContent(this.props.voiceBroadcastPlayback)];
         }
 
         if (this.state.primaryCall) {
             // get a ref to call inside the current scope
             const call = this.state.primaryCall;
-            pipContent = ({ onStartMoving, onResize }) => (
+            pipContent.push(({ onStartMoving, onResize }) => (
                 <LegacyCallView
                     onMouseDownOnHeader={onStartMoving}
                     call={call}
@@ -398,7 +394,7 @@ class PipView extends React.Component<IProps, IState> {
                     pipMode={pipMode}
                     onResize={onResize}
                 />
-            );
+            ));
         }
 
         if (this.state.showWidgetInPip) {
@@ -412,7 +408,7 @@ class PipView extends React.Component<IProps, IState> {
             const viewingCallRoom = this.state.viewedRoomId === roomId;
             const isCall = CallStore.instance.getActiveCall(roomId) !== null;
 
-            pipContent = ({ onStartMoving }) => (
+            pipContent.push(({ onStartMoving }) => (
                 <div className={pipViewClasses}>
                     <LegacyCallViewHeader
                         onPipMouseDown={(event) => {
@@ -432,10 +428,10 @@ class PipView extends React.Component<IProps, IState> {
                         movePersistedElement={this.movePersistedElement}
                     />
                 </div>
-            );
+            ));
         }
 
-        if (!!pipContent) {
+        if (pipContent.length) {
             return (
                 <PictureInPictureDragger
                     className="mx_LegacyCallPreview"

test/components/views/voip/PictureInPictureDragger-test.tsx

@@ -24,18 +24,22 @@ import PictureInPictureDragger, {
 describe("PictureInPictureDragger", () => {
     let renderResult: RenderResult;
 
-    const mkContent1: CreatePipChildren = () => {
-        return <div>content 1</div>;
-    };
+    const mkContent1: Array<CreatePipChildren> = [
+        () => {
+            return <div>content 1</div>;
+        },
+    ];
 
-    const mkContent2: CreatePipChildren = () => {
-        return (
-            <div>
-                content 2<br />
-                content 2.2
-            </div>
-        );
-    };
+    const mkContent2: Array<CreatePipChildren> = [
+        () => {
+            return (
+                <div>
+                    content 2<br />
+                    content 2.2
+                </div>
+            );
+        },
+    ];
 
     describe("when rendering the dragger with PiP content 1", () => {
         beforeEach(() => {
@@ -66,4 +70,16 @@ describe("PictureInPictureDragger", () => {
             });
         });
     });
+
+    describe("when rendering the dragger with PiP content 1 and 2", () => {
+        beforeEach(() => {
+            renderResult = render(
+                <PictureInPictureDragger draggable={true}>{[...mkContent1, ...mkContent2]}</PictureInPictureDragger>,
+            );
+        });
+
+        it("should render both contents", () => {
+            expect(renderResult.container).toMatchSnapshot();
+        });
+    });
 });

test/components/views/voip/PipView-test.tsx

@@ -279,9 +279,18 @@ describe("PipView", () => {
         });
 
         it("should render the voice broadcast recording PiP", () => {
-            // check for the „Live“ badge
+            // check for the „Live“ badge to be present
             expect(screen.queryByText("Live")).toBeInTheDocument();
         });
+
+        it("and a call it should show both, the call and the recording", async () => {
+            await withCall(async () => {
+                // Broadcast: Check for the „Live“ badge to be present
+                expect(screen.queryByText("Live")).toBeInTheDocument();
+                // Call: Check for the „Fill screen“ button to be present
+                expect(screen.queryByLabelText("Fill screen")).toBeInTheDocument();
+            });
+        });
     });
 
     describe("when there is a voice broadcast playback and pre-recording", () => {

test/components/views/voip/__snapshots__/PictureInPictureDragger-test.tsx.snap

@@ -1,5 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`PictureInPictureDragger when rendering the dragger with PiP content 1 and 2 should render both contents 1`] = `
+<div>
+  <aside
+    style="transform: translateX(680px) translateY(478px);"
+  >
+    <div>
+      content 1
+    </div>
+    <div>
+      content 2
+      <br />
+      content 2.2
+    </div>
+  </aside>
+</div>
+`;
+
 exports[`PictureInPictureDragger when rendering the dragger with PiP content 1 and rendering PiP content 2 should update the PiP content 1`] = `
 <div>
   <aside