jiti-meet/react/features/welcome/components/AbstractWelcomePage.js

258 lines
6.8 KiB
JavaScript
Raw Normal View History

2017-10-04 22:36:09 +00:00
// @flow
import { generateRoomWithoutSeparator } from 'js-utils/random';
import { Component } from 'react';
2019-03-19 15:42:25 +00:00
import type { Dispatch } from 'redux';
import { createWelcomePageEvent, sendAnalytics } from '../../analytics';
2018-02-02 14:50:16 +00:00
import { appNavigate } from '../../app';
import { isCalendarEnabled } from '../../calendar-sync';
import { isRoomValid } from '../../base/conference';
2017-10-04 22:36:09 +00:00
/**
* {@code AbstractWelcomePage}'s React {@code Component} prop types.
*/
type Props = {
2018-02-02 14:50:16 +00:00
/**
* Whether the calendar functionality is enabled or not.
*/
_calendarEnabled: boolean,
2018-02-02 14:50:16 +00:00
/**
* Room name to join to.
2018-02-02 14:50:16 +00:00
*/
2017-10-04 22:36:09 +00:00
_room: string,
/**
* The current settings.
*/
_settings: Object,
/**
* The Redux dispatch Function.
*/
2019-03-19 15:42:25 +00:00
dispatch: Dispatch<any>
2017-10-04 22:36:09 +00:00
};
/**
* Base (abstract) class for container component rendering the welcome page.
*
* @abstract
*/
export class AbstractWelcomePage extends Component<Props, *> {
2017-10-04 22:36:09 +00:00
_mounted: ?boolean;
/**
* Implements React's {@link Component#getDerivedStateFromProps()}.
*
* @inheritdoc
*/
static getDerivedStateFromProps(props: Props, state: Object) {
return {
room: props._room || state.room
};
}
2017-10-04 22:36:09 +00:00
/**
* Save room name into component's local state.
*
* @type {Object}
* @property {number|null} animateTimeoutId - Identifier of the letter
* animation timeout.
* @property {string} generatedRoomname - Automatically generated room name.
* @property {string} room - Room name.
* @property {string} roomPlaceholder - Room placeholder that's used as a
* placeholder for input.
* @property {nubmer|null} updateTimeoutId - Identifier of the timeout
* updating the generated room name.
*/
state = {
animateTimeoutId: undefined,
generatedRoomname: '',
joining: false,
room: '',
roomPlaceholder: '',
updateTimeoutId: undefined
};
/**
2017-07-19 21:25:06 +00:00
* Initializes a new {@code AbstractWelcomePage} instance.
*
2017-10-04 22:36:09 +00:00
* @param {Props} props - The React {@code Component} props to initialize
2017-07-19 21:25:06 +00:00
* the new {@code AbstractWelcomePage} instance with.
*/
2017-10-04 22:36:09 +00:00
constructor(props: Props) {
super(props);
2017-07-19 21:25:06 +00:00
// Bind event handlers so they are only bound once per instance.
2016-12-16 03:00:06 +00:00
this._animateRoomnameChanging
= this._animateRoomnameChanging.bind(this);
this._onJoin = this._onJoin.bind(this);
this._onRoomChange = this._onRoomChange.bind(this);
this._updateRoomname = this._updateRoomname.bind(this);
}
/**
* Implements React's {@link Component#componentDidMount()}. Invoked
* immediately after mounting occurs.
*
* @inheritdoc
*/
componentDidMount() {
this._mounted = true;
}
/**
* Implements React's {@link Component#componentWillUnmount()}. Invoked
* immediately before this component is unmounted and destroyed.
*
2016-12-16 03:00:06 +00:00
* @inheritdoc
*/
2016-12-16 03:00:06 +00:00
componentWillUnmount() {
this._clearTimeouts();
this._mounted = false;
}
2017-10-04 22:36:09 +00:00
_animateRoomnameChanging: (string) => void;
/**
2016-12-16 03:00:06 +00:00
* Animates the changing of the room name.
*
2016-12-16 03:00:06 +00:00
* @param {string} word - The part of room name that should be added to
* placeholder.
* @private
* @returns {void}
*/
2017-10-04 22:36:09 +00:00
_animateRoomnameChanging(word: string) {
let animateTimeoutId;
2016-12-16 03:00:06 +00:00
const roomPlaceholder = this.state.roomPlaceholder + word.substr(0, 1);
if (word.length > 1) {
2016-12-16 03:00:06 +00:00
animateTimeoutId
= setTimeout(
2017-06-15 00:40:51 +00:00
() => {
this._animateRoomnameChanging(
word.substring(1, word.length));
},
70);
}
this.setState({
animateTimeoutId,
roomPlaceholder
});
}
2016-12-16 03:00:06 +00:00
/**
* Method that clears timeouts for animations and updates of room name.
*
* @private
* @returns {void}
*/
_clearTimeouts() {
clearTimeout(this.state.animateTimeoutId);
clearTimeout(this.state.updateTimeoutId);
}
/**
* Determines whether the 'Join' button is (to be) disabled i.e. There's no
2016-12-16 03:00:06 +00:00
* valid room name typed into the respective text input field.
*
* @protected
* @returns {boolean} If the 'Join' button is (to be) disabled, true;
* otherwise, false.
*/
_isJoinDisabled() {
return this.state.joining || !isRoomValid(this.state.room);
2016-12-16 03:00:06 +00:00
}
2017-10-04 22:36:09 +00:00
_onJoin: () => void;
/**
* Handles joining. Either by clicking on 'Join' button
* or by pressing 'Enter' in room name input field.
*
* @protected
* @returns {void}
*/
_onJoin() {
2016-12-16 03:00:06 +00:00
const room = this.state.room || this.state.generatedRoomname;
sendAnalytics(
createWelcomePageEvent('clicked', 'joinButton', {
isGenerated: !this.state.room,
room
}));
if (room) {
this.setState({ joining: true });
// By the time the Promise of appNavigate settles, this component
// may have already been unmounted.
2017-10-04 22:36:09 +00:00
const onAppNavigateSettled
= () => this._mounted && this.setState({ joining: false });
this.props.dispatch(appNavigate(encodeURI(room)))
.then(onAppNavigateSettled, onAppNavigateSettled);
}
}
2017-10-04 22:36:09 +00:00
_onRoomChange: (string) => void;
/**
* Handles 'change' event for the room name text input field.
*
* @param {string} value - The text typed into the respective text input
* field.
* @protected
* @returns {void}
*/
2017-10-04 22:36:09 +00:00
_onRoomChange(value: string) {
this.setState({ room: value });
}
2017-10-04 22:36:09 +00:00
_updateRoomname: () => void;
2016-12-16 03:00:06 +00:00
/**
* Triggers the generation of a new room name and initiates an animation of
* its changing.
*
* @protected
* @returns {void}
*/
_updateRoomname() {
const generatedRoomname = generateRoomWithoutSeparator();
const roomPlaceholder = '';
const updateTimeoutId = setTimeout(this._updateRoomname, 10000);
this._clearTimeouts();
this.setState(
{
generatedRoomname,
roomPlaceholder,
updateTimeoutId
},
() => this._animateRoomnameChanging(generatedRoomname));
}
}
/**
* Maps (parts of) the redux state to the React {@code Component} props of
* {@code AbstractWelcomePage}.
*
* @param {Object} state - The redux state.
* @protected
* @returns {{
* _calendarEnabled: boolean,
* _room: string,
* _settings: Object
* }}
*/
2017-10-04 22:36:09 +00:00
export function _mapStateToProps(state: Object) {
return {
_calendarEnabled: isCalendarEnabled(state),
_room: state['features/base/conference'].room,
_settings: state['features/base/settings']
};
}