wip
This commit is contained in:
parent
51bdf67cf2
commit
939f6ceaa8
|
@ -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;
|
|
@ -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;
|
|
@ -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;
|
|
@ -60,3 +60,13 @@ export const PREMEETING_BUTTONS = [ 'microphone', 'camera', 'select-background',
|
||||||
* The toolbar buttons to show on 3rdParty prejoin screen.
|
* The toolbar buttons to show on 3rdParty prejoin screen.
|
||||||
*/
|
*/
|
||||||
export const THIRD_PARTY_PREJOIN_BUTTONS = [ 'microphone', 'camera', 'select-background' ];
|
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' ];
|
||||||
|
|
|
@ -1,8 +1,10 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
|
||||||
import VideoLayout from '../../../../modules/UI/videolayout/VideoLayout';
|
import VideoLayout from '../../../../modules/UI/videolayout/VideoLayout';
|
||||||
|
import DocumentPiP from '../../always-on-top/document-pip';
|
||||||
import { VIDEO_TYPE } from '../../base/media';
|
import { VIDEO_TYPE } from '../../base/media';
|
||||||
import { getLocalParticipant } from '../../base/participants';
|
import { getLocalParticipant } from '../../base/participants';
|
||||||
import { Watermarks } from '../../base/react';
|
import { Watermarks } from '../../base/react';
|
||||||
|
@ -138,6 +140,11 @@ class LargeVideo extends Component<Props> {
|
||||||
this._clearTapTimeout = this._clearTapTimeout.bind(this);
|
this._clearTapTimeout = this._clearTapTimeout.bind(this);
|
||||||
this._onDoubleTap = this._onDoubleTap.bind(this);
|
this._onDoubleTap = this._onDoubleTap.bind(this);
|
||||||
this._updateLayout = this._updateLayout.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;
|
_updateLayout: () => void;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
Loading…
Reference in New Issue