jiti-meet/react/features/base/premeeting/components/web/PreMeetingScreen.js

121 lines
3.3 KiB
JavaScript
Raw Normal View History

2020-05-20 08:25:31 +00:00
// @flow
import React, { PureComponent } from 'react';
2020-07-24 12:14:33 +00:00
import { AudioSettingsButton, VideoSettingsButton } from '../../../../toolbox/components/web';
2020-09-29 11:00:30 +00:00
import { Avatar } from '../../../avatar';
2020-05-20 08:25:31 +00:00
import ConnectionStatus from './ConnectionStatus';
2020-05-20 08:25:31 +00:00
import CopyMeetingUrl from './CopyMeetingUrl';
import Preview from './Preview';
type Props = {
/**
* Children component(s) to be rendered on the screen.
*/
children: React$Node,
/**
* Footer to be rendered for the page (if any).
*/
footer?: React$Node,
/**
* The name of the participant.
*/
name?: string,
2020-06-29 07:45:58 +00:00
/**
* Indicates whether the avatar should be shown when video is off
*/
showAvatar: boolean,
/**
* Indicates whether the label and copy url action should be shown
*/
showConferenceInfo: boolean,
2020-05-20 08:25:31 +00:00
/**
* Title of the screen.
*/
title: string,
/**
* The 'Skip prejoin' button to be rendered (if any).
*/
skipPrejoinButton?: React$Node,
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).
*/
videoTrack?: Object
}
/**
* 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 = {
showAvatar: true,
showConferenceInfo: true
};
2020-05-20 08:25:31 +00:00
/**
* Implements {@code PureComponent#render}.
*
* @inheritdoc
*/
render() {
2020-06-29 07:45:58 +00:00
const { name, showAvatar, showConferenceInfo, title, videoMuted, videoTrack } = this.props;
2020-05-20 08:25:31 +00:00
return (
<div
className = 'premeeting-screen'
id = 'lobby-screen'>
<ConnectionStatus />
2020-05-20 08:25:31 +00:00
<Preview
videoMuted = { videoMuted }
videoTrack = { videoTrack } />
2020-06-29 07:45:58 +00:00
{!videoMuted && <div className = 'preview-overlay' />}
2020-05-20 08:25:31 +00:00
<div className = 'content'>
2020-09-29 11:00:30 +00:00
{showAvatar && videoMuted && (
<Avatar
className = 'premeeting-screen-avatar'
displayName = { name }
dynamicColor = { false }
participantId = 'local'
size = { 80 } />
)}
2020-06-29 07:45:58 +00:00
{showConferenceInfo && (
<>
<div className = 'title'>
{ title }
</div>
<CopyMeetingUrl />
</>
)}
2020-05-20 08:25:31 +00:00
{ this.props.children }
<div className = 'media-btn-container'>
<AudioSettingsButton visible = { true } />
<VideoSettingsButton visible = { true } />
</div>
{ this.props.skipPrejoinButton }
2020-05-20 08:25:31 +00:00
{ this.props.footer }
</div>
</div>
);
}
}