wip

react/features/always-on-top/document-pip/content.js

@@ -0,0 +1,29 @@
+import { AtlasKitThemeProvider } from '@atlaskit/theme';
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+import { AOT_BUTTONS, AOT_PREJOIN_BUTTONS } from '../../base/config';
+import JitsiThemeProvider from '../../base/ui/components/JitsiThemeProvider.web';
+import { isPrejoinPageVisible } from '../../prejoin/functions';
+import { Toolbox } from '../../toolbox/components';
+
+
+import DocumentPiPVideo from './video';
+
+const DocumentPiPContent = () => {
+    const isInPrejoin = useSelector(isPrejoinPageVisible);
+    const buttons = isInPrejoin ? AOT_PREJOIN_BUTTONS : AOT_BUTTONS;
+
+    return (
+        <JitsiThemeProvider>
+            <AtlasKitThemeProvider mode = 'dark'>
+                <div>
+                    <DocumentPiPVideo />
+                    <Toolbox toolbarButtons = { buttons } />
+                </div>
+            </AtlasKitThemeProvider>
+        </JitsiThemeProvider>
+    );
+};
+
+export default DocumentPiPContent;

react/features/always-on-top/document-pip/index.js

@@ -0,0 +1,15 @@
+/* global APP */
+
+import React from 'react';
+import { Provider } from 'react-redux';
+
+import DocumentPipContent from './content';
+
+const DocumentPiP = () => (
+    <Provider store = { APP.store }>
+        <DocumentPipContent />
+    </Provider>
+
+);
+
+export default DocumentPiP;

react/features/always-on-top/document-pip/video.js

@@ -0,0 +1,40 @@
+import React, { useEffect, useRef } from 'react';
+
+const DocumentPiPVideo = () => {
+    const videoRef = useRef();
+
+    useEffect(() => {
+        const largeVideo = document.getElementById('prejoinVideo') || document.getElementById('largeVideo');
+        const video = videoRef.current;
+
+        if (!video) {
+            return;
+        }
+
+        if (largeVideo) {
+            video.style.display = 'block';
+            const mediaStream = largeVideo.srcObject;
+            const transform = largeVideo.style.transform;
+
+            video.srcObject = mediaStream;
+            video.style.transform = transform;
+            video.play();
+        } else {
+            video.style.display = 'none';
+            video.srcObject = null;
+        }
+    }, []);
+
+    return (
+        <video
+            autoPlay = { true }
+            muted = { true }
+            ref = { videoRef }
+            // eslint-disable-next-line react-native/no-inline-styles
+            style = {{
+                height: '100%',
+                width: '100%' }} />
+    );
+};
+
+export default DocumentPiPVideo;

react/features/base/config/constants.ts

@@ -60,3 +60,13 @@ export const PREMEETING_BUTTONS = [ 'microphone', 'camera', 'select-background',
   * The toolbar buttons to show on 3rdParty prejoin screen.
   */
 export const THIRD_PARTY_PREJOIN_BUTTONS = [ 'microphone', 'camera', 'select-background' ];
+
+/**
+ * The toolbar buttons to show on AoT window.
+ */
+export const AOT_BUTTONS = [ 'microphone', 'camera', 'hangup' ];
+
+/**
+ * The toolbar buttons to show on AoT window, when meeting is in prejoin screen.
+ */
+export const AOT_PREJOIN_BUTTONS = [ 'microphone', 'camera' ];

react/features/large-video/components/LargeVideo.web.js

@@ -1,8 +1,10 @@
 // @flow
 
 import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
 
 import VideoLayout from '../../../../modules/UI/videolayout/VideoLayout';
+import DocumentPiP from '../../always-on-top/document-pip';
 import { VIDEO_TYPE } from '../../base/media';
 import { getLocalParticipant } from '../../base/participants';
 import { Watermarks } from '../../base/react';
@@ -138,6 +140,11 @@ class LargeVideo extends Component<Props> {
         this._clearTapTimeout = this._clearTapTimeout.bind(this);
         this._onDoubleTap = this._onDoubleTap.bind(this);
         this._updateLayout = this._updateLayout.bind(this);
+        this._closePiP = this._closePiP.bind(this);
+        this._showPiP = this._showPiP.bind(this);
+
+        window.addEventListener('focus', this._closePiP);
+        window.addEventListener('blur', this._showPiP);
     }
 
     /**
@@ -227,6 +234,40 @@ class LargeVideo extends Component<Props> {
         );
     }
 
+    /**
+     * Shows the picture in picture window.
+     *
+     * @returns {void}
+     */
+    async _showPiP() {
+        if (this._pipSession || !navigator.documentPictureInPicture) {
+            return;
+        }
+
+        try {
+            this._pipSession = await navigator.documentPictureInPicture.requestWindow({
+                copyStyleSheets: true,
+                initialAspectRatio: 16 / 9,
+                lockAspectRatio: true
+            });
+            this._pipSession.window.onunload = this._closePiP;
+            this._pipSession.window.document.body.style = 'margin: 0; background-color: #000';
+            ReactDOM.render(<DocumentPiP />, this._pipSession.window.document.body);
+        } catch (err) {
+            console.log(err);
+        }
+    }
+
+    /** .....................
+     * Closes the picture in picture window.
+     *
+     * @returns {void}
+     */
+    _closePiP() {
+        this._pipSession?.window.close();
+        this._pipSession = undefined;
+    }
+
     _updateLayout: () => void;
 
     /**