198 lines
5.6 KiB
JavaScript
198 lines
5.6 KiB
JavaScript
// @flow
|
|
|
|
import React, { Component } from 'react';
|
|
import {
|
|
joinConference as joinConferenceAction,
|
|
joinConferenceWithoutAudio as joinConferenceWithoutAudioAction,
|
|
setJoinByPhoneDialogVisiblity as setJoinByPhoneDialogVisiblityAction,
|
|
setPrejoinName
|
|
} from '../actions';
|
|
import { getRoomName } from '../../base/conference';
|
|
import { translate } from '../../base/i18n';
|
|
import { connect } from '../../base/redux';
|
|
import ActionButton from './buttons/ActionButton';
|
|
import {
|
|
areJoinByPhoneButtonsVisible,
|
|
getPrejoinName,
|
|
isDeviceStatusVisible,
|
|
isJoinByPhoneDialogVisible
|
|
} from '../functions';
|
|
import { isGuest } from '../../invite';
|
|
import CopyMeetingUrl from './preview/CopyMeetingUrl';
|
|
import DeviceStatus from './preview/DeviceStatus';
|
|
import ParticipantName from './preview/ParticipantName';
|
|
import Preview from './preview/Preview';
|
|
import { VideoSettingsButton, AudioSettingsButton } from '../../toolbox';
|
|
|
|
type Props = {
|
|
|
|
/**
|
|
* Flag signaling if the device status is visible or not.
|
|
*/
|
|
deviceStatusVisible: boolean,
|
|
|
|
/**
|
|
* Flag signaling if a user is logged in or not.
|
|
*/
|
|
isAnonymousUser: boolean,
|
|
|
|
/**
|
|
* Joins the current meeting.
|
|
*/
|
|
joinConference: Function,
|
|
|
|
/**
|
|
* Joins the current meeting without audio.
|
|
*/
|
|
joinConferenceWithoutAudio: Function,
|
|
|
|
/**
|
|
* The name of the user that is about to join.
|
|
*/
|
|
name: string,
|
|
|
|
/**
|
|
* Sets the name for the joining user.
|
|
*/
|
|
setName: Function,
|
|
|
|
/**
|
|
* The name of the meeting that is about to be joined.
|
|
*/
|
|
roomName: string,
|
|
|
|
/**
|
|
* Sets visibilit of the 'JoinByPhoneDialog'.
|
|
*/
|
|
setJoinByPhoneDialogVisiblity: Function,
|
|
|
|
/**
|
|
* If 'JoinByPhoneDialog' is visible or not.
|
|
*/
|
|
showDialog: boolean,
|
|
|
|
/**
|
|
* If join by phone buttons should be visible.
|
|
*/
|
|
showJoinByPhoneButtons: boolean,
|
|
|
|
/**
|
|
* Used for translation.
|
|
*/
|
|
t: Function,
|
|
};
|
|
|
|
/**
|
|
* This component is displayed before joining a meeting.
|
|
*/
|
|
class Prejoin extends Component<Props> {
|
|
/**
|
|
* Initializes a new {@code Prejoin} instance.
|
|
*
|
|
* @inheritdoc
|
|
*/
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this._showDialog = this._showDialog.bind(this);
|
|
}
|
|
|
|
_showDialog: () => void;
|
|
|
|
/**
|
|
* Displays the dialog for joining a meeting by phone.
|
|
*
|
|
* @returns {undefined}
|
|
*/
|
|
_showDialog() {
|
|
this.props.setJoinByPhoneDialogVisiblity(true);
|
|
}
|
|
|
|
/**
|
|
* Implements React's {@link Component#render()}.
|
|
*
|
|
* @inheritdoc
|
|
* @returns {ReactElement}
|
|
*/
|
|
render() {
|
|
const {
|
|
deviceStatusVisible,
|
|
isAnonymousUser,
|
|
joinConference,
|
|
joinConferenceWithoutAudio,
|
|
name,
|
|
setName,
|
|
showJoinByPhoneButtons,
|
|
t
|
|
} = this.props;
|
|
const { _showDialog } = this;
|
|
|
|
return (
|
|
<div className = 'prejoin-full-page'>
|
|
<Preview />
|
|
<div className = 'prejoin-input-area-container'>
|
|
<div className = 'prejoin-input-area'>
|
|
<div className = 'prejoin-title'>
|
|
{t('prejoin.joinMeeting')}
|
|
</div>
|
|
<CopyMeetingUrl />
|
|
<ParticipantName
|
|
isEditable = { isAnonymousUser }
|
|
setName = { setName }
|
|
value = { name } />
|
|
<ActionButton
|
|
onClick = { joinConference }
|
|
type = 'primary'>
|
|
{ t('calendarSync.join') }
|
|
</ActionButton>
|
|
{showJoinByPhoneButtons
|
|
&& <div className = 'prejoin-text-btns'>
|
|
<ActionButton
|
|
onClick = { joinConferenceWithoutAudio }
|
|
type = 'text'>
|
|
{ t('prejoin.joinWithoutAudio') }
|
|
</ActionButton>
|
|
<ActionButton
|
|
onClick = { _showDialog }
|
|
type = 'text'>
|
|
{ t('prejoin.joinAudioByPhone') }
|
|
</ActionButton>
|
|
</div>}
|
|
</div>
|
|
</div>
|
|
<div className = 'prejoin-preview-btn-container'>
|
|
<AudioSettingsButton visible = { true } />
|
|
<VideoSettingsButton visible = { true } />
|
|
</div>
|
|
{ deviceStatusVisible && <DeviceStatus /> }
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Maps (parts of) the redux state to the React {@code Component} props.
|
|
*
|
|
* @param {Object} state - The redux state.
|
|
* @returns {Object}
|
|
*/
|
|
function mapStateToProps(state): Object {
|
|
return {
|
|
isAnonymousUser: isGuest(state),
|
|
deviceStatusVisible: isDeviceStatusVisible(state),
|
|
name: getPrejoinName(state),
|
|
roomName: getRoomName(state),
|
|
showDialog: isJoinByPhoneDialogVisible(state),
|
|
showJoinByPhoneButtons: areJoinByPhoneButtonsVisible(state)
|
|
};
|
|
}
|
|
|
|
const mapDispatchToProps = {
|
|
joinConferenceWithoutAudio: joinConferenceWithoutAudioAction,
|
|
joinConference: joinConferenceAction,
|
|
setJoinByPhoneDialogVisiblity: setJoinByPhoneDialogVisiblityAction,
|
|
setName: setPrejoinName
|
|
};
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(translate(Prejoin));
|