2020-05-20 08:25:31 +00:00
|
|
|
// @flow
|
|
|
|
|
|
|
|
import React, { PureComponent } from 'react';
|
|
|
|
|
2021-08-20 08:53:11 +00:00
|
|
|
import DeviceStatus from '../../../../prejoin/components/preview/DeviceStatus';
|
|
|
|
import { Toolbox } from '../../../../toolbox/components/web';
|
2020-05-20 08:25:31 +00:00
|
|
|
|
2020-07-29 10:27:32 +00:00
|
|
|
import ConnectionStatus from './ConnectionStatus';
|
2020-05-20 08:25:31 +00:00
|
|
|
import Preview from './Preview';
|
|
|
|
|
|
|
|
type Props = {
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Children component(s) to be rendered on the screen.
|
|
|
|
*/
|
2021-08-20 08:53:11 +00:00
|
|
|
children?: React$Node,
|
2020-05-20 08:25:31 +00:00
|
|
|
|
|
|
|
/**
|
2021-08-20 08:53:11 +00:00
|
|
|
* Additional CSS class names to set on the icon container.
|
2020-05-20 08:25:31 +00:00
|
|
|
*/
|
2021-08-20 08:53:11 +00:00
|
|
|
className?: string,
|
2020-05-20 08:25:31 +00:00
|
|
|
|
2020-07-03 07:08:21 +00:00
|
|
|
/**
|
|
|
|
* The name of the participant.
|
|
|
|
*/
|
|
|
|
name?: string,
|
|
|
|
|
2021-06-22 17:07:57 +00:00
|
|
|
/**
|
|
|
|
* Indicates whether the copy url button should be shown
|
|
|
|
*/
|
|
|
|
showCopyUrlButton: boolean,
|
|
|
|
|
2020-06-29 07:45:58 +00:00
|
|
|
/**
|
2021-08-20 08:53:11 +00:00
|
|
|
* Indicates whether the device status should be shown
|
2020-06-29 07:45:58 +00:00
|
|
|
*/
|
2021-08-20 08:53:11 +00:00
|
|
|
showDeviceStatus: boolean,
|
2020-06-29 07:45:58 +00:00
|
|
|
|
|
|
|
/**
|
2021-08-20 08:53:11 +00:00
|
|
|
* The 'Skip prejoin' button to be rendered (if any).
|
2020-06-29 07:45:58 +00:00
|
|
|
*/
|
2021-08-20 08:53:11 +00:00
|
|
|
skipPrejoinButton?: React$Node,
|
2020-06-29 07:45:58 +00:00
|
|
|
|
2020-05-20 08:25:31 +00:00
|
|
|
/**
|
|
|
|
* Title of the screen.
|
|
|
|
*/
|
2021-08-20 08:53:11 +00:00
|
|
|
title?: string,
|
2020-05-20 08:25:31 +00:00
|
|
|
|
2020-07-15 08:06:14 +00:00
|
|
|
/**
|
2021-08-20 08:53:11 +00:00
|
|
|
* Override for default toolbar buttons
|
2020-07-15 08:06:14 +00:00
|
|
|
*/
|
2021-08-20 08:53:11 +00:00
|
|
|
toolbarButtons?: Array<string>,
|
2020-07-15 08:06:14 +00:00
|
|
|
|
2020-05-20 08:25:31 +00:00
|
|
|
/**
|
|
|
|
* True if the preview overlay should be muted, false otherwise.
|
|
|
|
*/
|
|
|
|
videoMuted?: boolean,
|
|
|
|
|
|
|
|
/**
|
|
|
|
* The video track to render as preview (if omitted, the default local track will be rendered).
|
|
|
|
*/
|
2021-08-20 08:53:11 +00:00
|
|
|
videoTrack?: Object
|
2020-05-20 08:25:31 +00:00
|
|
|
}
|
|
|
|
|
2021-08-20 08:53:11 +00:00
|
|
|
const buttons = [ 'microphone', 'camera', 'select-background', 'invite', 'settings' ];
|
|
|
|
|
2020-05-20 08:25:31 +00:00
|
|
|
/**
|
|
|
|
* Implements a pre-meeting screen that can be used at various pre-meeting phases, for example
|
|
|
|
* on the prejoin screen (pre-connection) or lobby (post-connection).
|
|
|
|
*/
|
|
|
|
export default class PreMeetingScreen extends PureComponent<Props> {
|
2020-06-29 07:45:58 +00:00
|
|
|
/**
|
|
|
|
* Default values for {@code Prejoin} component's properties.
|
|
|
|
*
|
|
|
|
* @static
|
|
|
|
*/
|
|
|
|
static defaultProps = {
|
2021-06-22 17:07:57 +00:00
|
|
|
showCopyUrlButton: true,
|
2021-08-20 08:53:11 +00:00
|
|
|
showToolbox: true
|
2020-06-29 07:45:58 +00:00
|
|
|
};
|
|
|
|
|
2020-05-20 08:25:31 +00:00
|
|
|
/**
|
|
|
|
* Implements {@code PureComponent#render}.
|
|
|
|
*
|
|
|
|
* @inheritdoc
|
|
|
|
*/
|
|
|
|
render() {
|
2021-06-22 17:07:57 +00:00
|
|
|
const {
|
2021-08-20 08:53:11 +00:00
|
|
|
children,
|
|
|
|
className,
|
|
|
|
showDeviceStatus,
|
|
|
|
skipPrejoinButton,
|
2021-06-22 17:07:57 +00:00
|
|
|
title,
|
2021-08-20 08:53:11 +00:00
|
|
|
toolbarButtons,
|
2021-06-22 17:07:57 +00:00
|
|
|
videoMuted,
|
2021-08-20 08:53:11 +00:00
|
|
|
videoTrack
|
2021-06-22 17:07:57 +00:00
|
|
|
} = this.props;
|
2021-08-20 08:53:11 +00:00
|
|
|
|
|
|
|
const containerClassName = `premeeting-screen ${className ? className : ''}`;
|
2020-05-20 08:25:31 +00:00
|
|
|
|
|
|
|
return (
|
2021-08-20 08:53:11 +00:00
|
|
|
<div className = { containerClassName }>
|
2020-05-20 08:25:31 +00:00
|
|
|
<div className = 'content'>
|
2021-08-20 08:53:11 +00:00
|
|
|
<ConnectionStatus />
|
|
|
|
|
|
|
|
<div className = 'content-controls'>
|
|
|
|
<h1 className = 'title'>
|
|
|
|
{ title }
|
|
|
|
</h1>
|
|
|
|
{ children }
|
|
|
|
<Toolbox toolbarButtons = { toolbarButtons || buttons } />
|
|
|
|
{ skipPrejoinButton }
|
|
|
|
{ showDeviceStatus && <DeviceStatus /> }
|
2020-05-20 08:25:31 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
2021-08-20 08:53:11 +00:00
|
|
|
|
|
|
|
<Preview
|
|
|
|
videoMuted = { videoMuted }
|
|
|
|
videoTrack = { videoTrack } />
|
2020-05-20 08:25:31 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|