|
|
|
|
@ -1,100 +1,91 @@ |
|
|
|
|
// @flow
|
|
|
|
|
/* eslint-disable lines-around-comment */ |
|
|
|
|
import { Theme } from '@mui/material'; |
|
|
|
|
import React, { ReactNode } from 'react'; |
|
|
|
|
import { makeStyles } from 'tss-react/mui'; |
|
|
|
|
|
|
|
|
|
import { withStyles } from '@mui/styles'; |
|
|
|
|
import React, { PureComponent } from 'react'; |
|
|
|
|
|
|
|
|
|
import { connect } from '../../../../base/redux'; |
|
|
|
|
import { IState } from '../../../../app/types'; |
|
|
|
|
import DeviceStatus from '../../../../prejoin/components/preview/DeviceStatus'; |
|
|
|
|
// @ts-ignore
|
|
|
|
|
import { Toolbox } from '../../../../toolbox/components/web'; |
|
|
|
|
import { getConferenceName } from '../../../conference/functions'; |
|
|
|
|
import { PREMEETING_BUTTONS, THIRD_PARTY_PREJOIN_BUTTONS } from '../../../config/constants'; |
|
|
|
|
import { getToolbarButtons, isToolbarButtonEnabled } from '../../../config/functions.web'; |
|
|
|
|
import { connect } from '../../../redux/functions'; |
|
|
|
|
import { withPixelLineHeight } from '../../../styles/functions.web'; |
|
|
|
|
|
|
|
|
|
import ConnectionStatus from './ConnectionStatus'; |
|
|
|
|
// @ts-ignore
|
|
|
|
|
import Preview from './Preview'; |
|
|
|
|
|
|
|
|
|
type Props = { |
|
|
|
|
interface Props { |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* The list of toolbar buttons to render. |
|
|
|
|
*/ |
|
|
|
|
_buttons: Array<string>, |
|
|
|
|
_buttons: Array<string>; |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* The branding background of the premeeting screen(lobby/prejoin). |
|
|
|
|
*/ |
|
|
|
|
_premeetingBackground: string, |
|
|
|
|
_premeetingBackground: string; |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* The name of the meeting that is about to be joined. |
|
|
|
|
*/ |
|
|
|
|
_roomName: string, |
|
|
|
|
_roomName: string; |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* Children component(s) to be rendered on the screen. |
|
|
|
|
*/ |
|
|
|
|
children?: React$Node, |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* Classes prop injected by withStyles. |
|
|
|
|
*/ |
|
|
|
|
classes: Object, |
|
|
|
|
children?: ReactNode; |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* Additional CSS class names to set on the icon container. |
|
|
|
|
*/ |
|
|
|
|
className?: string, |
|
|
|
|
className?: string; |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* The name of the participant. |
|
|
|
|
*/ |
|
|
|
|
name?: string, |
|
|
|
|
name?: string; |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* Indicates whether the copy url button should be shown. |
|
|
|
|
*/ |
|
|
|
|
showCopyUrlButton: boolean, |
|
|
|
|
showCopyUrlButton: boolean; |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* Indicates whether the device status should be shown. |
|
|
|
|
*/ |
|
|
|
|
showDeviceStatus: boolean, |
|
|
|
|
showDeviceStatus: boolean; |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* The 'Skip prejoin' button to be rendered (if any). |
|
|
|
|
*/ |
|
|
|
|
skipPrejoinButton?: React$Node, |
|
|
|
|
skipPrejoinButton?: ReactNode; |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* Title of the screen. |
|
|
|
|
* Whether it's used in the 3rdParty prejoin screen or not. |
|
|
|
|
*/ |
|
|
|
|
title?: string, |
|
|
|
|
thirdParty?: boolean; |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* Whether it's used in the 3rdParty prejoin screen or not. |
|
|
|
|
* Title of the screen. |
|
|
|
|
*/ |
|
|
|
|
thirdParty?: boolean, |
|
|
|
|
title?: string; |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* True if the preview overlay should be muted, false otherwise. |
|
|
|
|
*/ |
|
|
|
|
videoMuted?: boolean, |
|
|
|
|
videoMuted?: boolean; |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* The video track to render as preview (if omitted, the default local track will be rendered). |
|
|
|
|
*/ |
|
|
|
|
videoTrack?: Object |
|
|
|
|
videoTrack?: Object; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* Creates the styles for the component. |
|
|
|
|
* |
|
|
|
|
* @param {Object} theme - The current UI theme. |
|
|
|
|
* |
|
|
|
|
* @returns {Object} |
|
|
|
|
*/ |
|
|
|
|
const styles = theme => { |
|
|
|
|
const useStyles = makeStyles()((theme: Theme) => { |
|
|
|
|
return { |
|
|
|
|
subtitle: { |
|
|
|
|
...withPixelLineHeight(theme.typography.heading5), |
|
|
|
|
@ -107,79 +98,56 @@ const styles = theme => { |
|
|
|
|
width: '100%' |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* 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). |
|
|
|
|
*/ |
|
|
|
|
class PreMeetingScreen extends PureComponent<Props> { |
|
|
|
|
/** |
|
|
|
|
* Default values for {@code Prejoin} component's properties. |
|
|
|
|
* |
|
|
|
|
* @static |
|
|
|
|
*/ |
|
|
|
|
static defaultProps = { |
|
|
|
|
showCopyUrlButton: true, |
|
|
|
|
showToolbox: true |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* Implements {@code PureComponent#render}. |
|
|
|
|
* |
|
|
|
|
* @inheritdoc |
|
|
|
|
*/ |
|
|
|
|
render() { |
|
|
|
|
const { |
|
|
|
|
_buttons, |
|
|
|
|
_premeetingBackground, |
|
|
|
|
_roomName, |
|
|
|
|
children, |
|
|
|
|
classes, |
|
|
|
|
className, |
|
|
|
|
showDeviceStatus, |
|
|
|
|
skipPrejoinButton, |
|
|
|
|
title, |
|
|
|
|
videoMuted, |
|
|
|
|
videoTrack |
|
|
|
|
} = this.props; |
|
|
|
|
|
|
|
|
|
const containerClassName = `premeeting-screen ${className ? className : ''}`; |
|
|
|
|
const style = _premeetingBackground ? { |
|
|
|
|
background: _premeetingBackground, |
|
|
|
|
backgroundPosition: 'center', |
|
|
|
|
backgroundSize: 'cover' |
|
|
|
|
} : {}; |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className = { containerClassName }> |
|
|
|
|
<div style = { style }> |
|
|
|
|
<div className = 'content'> |
|
|
|
|
<ConnectionStatus /> |
|
|
|
|
|
|
|
|
|
<div className = 'content-controls'> |
|
|
|
|
<h1 className = 'title'> |
|
|
|
|
{ title } |
|
|
|
|
</h1> |
|
|
|
|
{ _roomName && ( |
|
|
|
|
<span className = { classes.subtitle }> |
|
|
|
|
{_roomName} |
|
|
|
|
</span> |
|
|
|
|
)} |
|
|
|
|
{ children } |
|
|
|
|
{ _buttons.length && <Toolbox toolbarButtons = { _buttons } /> } |
|
|
|
|
{ skipPrejoinButton } |
|
|
|
|
{ showDeviceStatus && <DeviceStatus /> } |
|
|
|
|
</div> |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const PreMeetingScreen = ({ |
|
|
|
|
_buttons, |
|
|
|
|
_premeetingBackground, |
|
|
|
|
_roomName, |
|
|
|
|
children, |
|
|
|
|
className, |
|
|
|
|
showDeviceStatus, |
|
|
|
|
skipPrejoinButton, |
|
|
|
|
title, |
|
|
|
|
videoMuted, |
|
|
|
|
videoTrack |
|
|
|
|
}: Props) => { |
|
|
|
|
const { classes } = useStyles(); |
|
|
|
|
const containerClassName = `premeeting-screen ${className ? className : ''}`; |
|
|
|
|
const style = _premeetingBackground ? { |
|
|
|
|
background: _premeetingBackground, |
|
|
|
|
backgroundPosition: 'center', |
|
|
|
|
backgroundSize: 'cover' |
|
|
|
|
} : {}; |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className = { containerClassName }> |
|
|
|
|
<div style = { style }> |
|
|
|
|
<div className = 'content'> |
|
|
|
|
<ConnectionStatus /> |
|
|
|
|
|
|
|
|
|
<div className = 'content-controls'> |
|
|
|
|
<h1 className = 'title'> |
|
|
|
|
{title} |
|
|
|
|
</h1> |
|
|
|
|
{_roomName && ( |
|
|
|
|
<span className = { classes.subtitle }> |
|
|
|
|
{_roomName} |
|
|
|
|
</span> |
|
|
|
|
)} |
|
|
|
|
{children} |
|
|
|
|
{_buttons.length && <Toolbox toolbarButtons = { _buttons } />} |
|
|
|
|
{skipPrejoinButton} |
|
|
|
|
{showDeviceStatus && <DeviceStatus />} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<Preview |
|
|
|
|
videoMuted = { videoMuted } |
|
|
|
|
videoTrack = { videoTrack } /> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
<Preview |
|
|
|
|
videoMuted = { videoMuted } |
|
|
|
|
videoTrack = { videoTrack } /> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
@ -189,12 +157,12 @@ class PreMeetingScreen extends PureComponent<Props> { |
|
|
|
|
* @param {Object} ownProps - The props passed to the component. |
|
|
|
|
* @returns {Object} |
|
|
|
|
*/ |
|
|
|
|
function mapStateToProps(state, ownProps): Object { |
|
|
|
|
function mapStateToProps(state: IState, ownProps: Partial<Props>) { |
|
|
|
|
const { hiddenPremeetingButtons, hideConferenceSubject } = state['features/base/config']; |
|
|
|
|
const toolbarButtons = getToolbarButtons(state); |
|
|
|
|
const premeetingButtons = (ownProps.thirdParty |
|
|
|
|
? THIRD_PARTY_PREJOIN_BUTTONS |
|
|
|
|
: PREMEETING_BUTTONS).filter(b => !(hiddenPremeetingButtons || []).includes(b)); |
|
|
|
|
: PREMEETING_BUTTONS).filter((b: any) => !(hiddenPremeetingButtons || []).includes(b)); |
|
|
|
|
|
|
|
|
|
const { premeetingBackground } = state['features/dynamic-branding']; |
|
|
|
|
|
|
|
|
|
@ -212,4 +180,4 @@ function mapStateToProps(state, ownProps): Object { |
|
|
|
|
}; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
export default connect(mapStateToProps)(withStyles(styles)(PreMeetingScreen)); |
|
|
|
|
export default connect(mapStateToProps)(PreMeetingScreen); |
Robert Pintilii
3 years ago
committed by