// @flow import React from 'react'; import { translate } from '../../../base/i18n'; import { Icon, IconClose } from '../../../base/icons'; import { ActionButton, InputField, PreMeetingScreen } from '../../../base/premeeting'; import { LoadingIndicator } from '../../../base/react'; import { connect } from '../../../base/redux'; import ChatInput from '../../../chat/components/web/ChatInput'; import MessageContainer from '../../../chat/components/web/MessageContainer'; import AbstractLobbyScreen, { type Props, _mapStateToProps } from '../AbstractLobbyScreen'; /** * Implements a waiting screen that represents the participant being in the lobby. */ class LobbyScreen extends AbstractLobbyScreen { /** * Reference to the React Component for displaying chat messages. Used for * scrolling to the end of the chat messages. */ _messageContainerRef: Object; /** * Initializes a new {@code LobbyScreen} instance. * * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ constructor(props: Props) { super(props); this._messageContainerRef = React.createRef(); } /** * Implements {@code Component#componentDidMount}. * * @inheritdoc */ componentDidMount() { this._scrollMessageContainerToBottom(true); } /** * Implements {@code Component#componentDidUpdate}. * * @inheritdoc */ componentDidUpdate(prevProps) { if (this.props._lobbyChatMessages !== prevProps._lobbyChatMessages) { this._scrollMessageContainerToBottom(true); } else if (this.props._isLobbyChatActive && !prevProps._isLobbyChatActive) { this._scrollMessageContainerToBottom(false); } } /** * Implements {@code PureComponent#render}. * * @inheritdoc */ render() { const { _deviceStatusVisible, showCopyUrlButton, t } = this.props; return ( { this._renderContent() } ); } _getScreenTitleKey: () => string; _onAskToJoin: () => boolean; _onCancel: () => boolean; _onChangeDisplayName: Object => void; _onChangeEmail: Object => void; _onChangePassword: Object => void; _onEnableEdit: () => void; _onJoinWithPassword: () => void; _onSendMessage: () => void; _onSubmit: () => boolean; _onSwitchToKnockMode: () => void; _onSwitchToPasswordMode: () => void; _onToggleChat: () => void; _renderContent: () => React$Element<*>; /** * Renders the joining (waiting) fragment of the screen. * * @inheritdoc */ _renderJoining() { const { _isLobbyChatActive } = this.props; return (
{_isLobbyChatActive ? this._renderLobbyChat() : ( <>
{ this.props.t('lobby.joiningMessage') } )} { this._renderStandardButtons() }
); } /** * Renders the widget to chat with the moderator before allowed in. * * @inheritdoc */ _renderLobbyChat() { const { _lobbyChatMessages, t } = this.props; const { isChatOpen } = this.state; return (

{ t(this._getScreenTitleKey(), { moderator: this.props._lobbyMessageRecipient }) }

); } /** * Renders the participant form to let the knocking participant enter its details. * * NOTE: We don't use edit action on web since the prejoin functionality got merged. * Mobile won't use it either once prejoin gets implemented there too. * * @inheritdoc */ _renderParticipantForm() { return this._renderParticipantInfo(); } /** * Renders the participant info fragment when we have all the required details of the user. * * @inheritdoc */ _renderParticipantInfo() { const { displayName } = this.state; const { t } = this.props; return ( ); } /** * Renders the password form to let the participant join by using a password instead of knocking. * * @inheritdoc */ _renderPasswordForm() { const { _passwordJoinFailed, t } = this.props; return ( <> {_passwordJoinFailed &&
{t('lobby.invalidPassword')}
} ); } /** * Renders the password join button (set). * * @inheritdoc */ _renderPasswordJoinButtons() { const { t } = this.props; return ( <> { t('prejoin.joinMeeting') } { t('lobby.backToKnockModeButton') } ); } /** * Renders the standard button set. * * @inheritdoc */ _renderStandardButtons() { const { _knocking, _isLobbyChatActive, _renderPassword, t } = this.props; return ( <> { _knocking || { t('lobby.knockButton') } } { (_knocking && _isLobbyChatActive) && { t('toolbar.openChat') } } {_renderPassword && { t('lobby.enterPasswordButton') } } ); } /** * Scrolls the chat messages so the latest message is visible. * * @param {boolean} withAnimation - Whether or not to show a scrolling * animation. * @private * @returns {void} */ _scrollMessageContainerToBottom(withAnimation) { if (this._messageContainerRef.current) { this._messageContainerRef.current.scrollToElement(withAnimation); } } } export default translate(connect(_mapStateToProps)(LobbyScreen));