apitech
/
jitsi-meet
mirror of https://github.com/jitsi/jitsi-meet
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Simplify. Comply w/ coding style.

Browse Source
pull/1200/head
Lyubomir Marinov 9 years ago
parent 984a6519fc
commit 4810249301
3 changed files with 244 additions and 247 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 6
      modules/UI/welcome_page/WelcomePage.js
  2. 135
      react/features/welcome/components/AbstractWelcomePage.js
  3. 350
      react/features/welcome/components/WelcomePage.web.js

6
modules/UI/welcome_page/WelcomePage.js
Unescape View File

@ -13,10 +13,8 @@ function enterRoom() {
}
function setupWelcomePage() {
/*
* XXX: We left only going to conference page here because transitions via
* React Router isn't implemented yet.
*/
// XXX: We left only going to conference page here because transitions via
// React Router isn't implemented yet.
$("#enter_room_button").click(function() {
enterRoom();

135
react/features/welcome/components/AbstractWelcomePage.js
Unescape View File

@ -36,31 +36,30 @@ export class AbstractWelcomePage extends Component {
* Save room name into component's local state.
*
* @type {Object}
* @property {number|null} animateTimeoutId - Identificator for
* 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 {string} generatedRoomname - Automatically generated
* room name.
* @property {number|null} animateTimeoutId - Identificator for
* letter animation timeout.
* @property {nubmer|null} updateTimeoutId - Identificator for
* updating generated room name.
*/
this.state = {
animateTimeoutId: null,
generatedRoomname: '',
room: '',
roomPlaceholder: '',
generatedRoomname: '',
animateTimeoutId: null,
updateTimeoutId: null
};
// Bind event handlers so they are only bound once for every instance.
const roomnameChanging = this._animateRoomnameChanging.bind(this);
this._animateRoomnameChanging
= this._animateRoomnameChanging.bind(this);
this._onJoin = this._onJoin.bind(this);
this._onRoomChange = this._onRoomChange.bind(this);
this._updateRoomname = this._updateRoomname.bind(this);
this._animateRoomnameChanging = roomnameChanging.bind(this);
}
/**
@ -74,73 +73,34 @@ export class AbstractWelcomePage extends Component {
}
/**
* This method is executed when method will be unmounted from DOM.
*
* @inheritdoc
*/
componentWillUnmount() {
this._clearTimeouts();
}
/**
* 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
* valid room name typed into the respective text input field.
* This method is executed when method will be unmounted from DOM.
*
* @protected
* @returns {boolean} If the 'Join' button is (to be) disabled, true;
* otherwise, false.
*/
_isJoinDisabled() {
return !isRoomValid(this.state.room);
}
/**
* Method triggering generation of new room name and
* initiating animation of its changing.
*
* @protected
* @returns {void}
* @inheritdoc
*/
_updateRoomname() {
const generatedRoomname = generateRoomWithoutSeparator();
const roomPlaceholder = '';
const updateTimeoutId = setTimeout(this._updateRoomname, 10000);
componentWillUnmount() {
this._clearTimeouts();
this.setState({
updateTimeoutId,
generatedRoomname,
roomPlaceholder
}, () => this._animateRoomnameChanging(generatedRoomname));
}
/**
* Method animating changing room name.
* Animates the changing of the room name.
*
* @param {string} word - The part of room name that should
* be added to placeholder.
* @param {string} word - The part of room name that should be added to
* placeholder.
* @private
* @returns {void}
*/
_animateRoomnameChanging(word) {
const roomPlaceholder = this.state.roomPlaceholder + word.substr(0, 1);
let animateTimeoutId = null;
const roomPlaceholder = this.state.roomPlaceholder + word.substr(0, 1);
if (word.length > 1) {
animateTimeoutId = setTimeout(() => {
this._animateRoomnameChanging(word.substring(1, word.length));
}, 70);
animateTimeoutId
= setTimeout(
() => {
this._animateRoomnameChanging(
word.substring(1, word.length));
},
70);
}
this.setState({
@ -149,6 +109,29 @@ export class AbstractWelcomePage extends Component {
});
}
/**
* 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
* 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 !isRoomValid(this.state.room);
}
/**
* Handles joining. Either by clicking on 'Join' button
* or by pressing 'Enter' in room name input field.
@ -157,12 +140,10 @@ export class AbstractWelcomePage extends Component {
* @returns {void}
*/
_onJoin() {
const { room, generatedRoomname } = this.state;
const room = this.state.room || this.state.generatedRoomname;
if (room && room.length) {
if (room) {
this.props.dispatch(appNavigate(room));
} else {
this.props.dispatch(appNavigate(generatedRoomname));
}
}
@ -189,6 +170,28 @@ export class AbstractWelcomePage extends Component {
<VideoTrack videoTrack = { this.props.localVideoTrack } />
);
}
/**
* 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));
}
}
/**

350
react/features/welcome/components/WelcomePage.web.js
Unescape View File

@ -1,113 +1,59 @@
/* global interfaceConfig, APP */
/* global APP, interfaceConfig */
import React from 'react';
import { connect } from 'react-redux';
import {
AbstractWelcomePage,
mapStateToProps
} from './AbstractWelcomePage';
import { Conference } from '../../conference';
import { AbstractWelcomePage, mapStateToProps } from './AbstractWelcomePage';
const RIGHT_WATERMARK_STYLES = {
/**
* The CSS style of the element with CSS class <tt>rightwatermark</tt>.
*/
const RIGHT_WATERMARK_STYLE = {
backgroundImage: 'url(images/rightwatermark.png)'
};
import { Conference } from '../../conference';
/* eslint-disable require-jsdoc */
/**
* The web container rendering the welcome page.
* The Web container rendering the welcome page.
*
* @extends AbstractWelcomePage
*/
class WelcomePage extends AbstractWelcomePage {
/* eslint-enable require-jsdoc */
/**
* Constructor function of WelcomePage.
*
* @param {Object} props - Props to be set.
**/
* Initializes a new WelcomePage instance.
*
* @param {Object} props - The read-only properties with which the new
* instance is to be initialized.
*/
constructor(props) {
super(props);
this._initState();
// Bind event handlers so they are only bound once for every instance.
const onToggleDisableWelcome = this._onToggleDisableWelcomePage;
this._onRoomChange = this._onRoomChange.bind(this);
this._onDisableWelcomeChange = this._onDisableWelcomeChange.bind(this);
this._onKeyDown = this._onKeyDown.bind(this);
this._setInput = this._setInput.bind(this);
this._onUpdateRoomname = this._onUpdateRoomname.bind(this);
this._onToggleDisableWelcomePage = onToggleDisableWelcome.bind(this);
}
/**
* Method that initializes state of the component.
*
* @returns {void}
**/
_initState() {
const showPoweredBy = interfaceConfig.SHOW_POWERED_BY;
const generateRoomnames
= interfaceConfig.GENERATE_ROOMNAMES_ON_WELCOME_PAGE;
const enableWelcomePage = true;
const showJitsiWatermark = interfaceConfig.SHOW_JITSI_WATERMARK;
const showBrandWatermark = interfaceConfig.SHOW_BRAND_WATERMARK;
let jitsiWatermarkLink = '';
let brandWatermarkLink = '';
if (showJitsiWatermark) {
jitsiWatermarkLink = interfaceConfig.JITSI_WATERMARK_LINK;
}
if (showBrandWatermark) {
brandWatermarkLink = interfaceConfig.BRAND_WATERMARK_LINK;
}
this.state = Object.assign({}, this.state, {
showPoweredBy,
generateRoomnames,
showJitsiWatermark,
showBrandWatermark,
jitsiWatermarkLink,
brandWatermarkLink,
enableWelcomePage
});
}
/**
* Returns the domain name.
*
* @private
* @returns {string} Domain name.
**/
_getDomain() {
return `${window.location.protocol}//${window.location.host}/`;
this._onRoomChange = this._onRoomChange.bind(this);
}
/**
* This method is executed when comonent is mounted.
*
* @inheritdoc
*/
* This method is executed when comonent is mounted.
*
* @inheritdoc
* @returns {void}
*/
componentDidMount() {
if (this.state.generateRoomnames) {
this._updateRoomname();
}
}
/**
* Handles toggling disable welcome page checkbox
*
* @returns {void}
**/
_onToggleDisableWelcomePage() {
const shouldEnable = this.state.enableWelcomePage;
this.setState({
enableWelcomePage: !shouldEnable
}, () => {
APP.settings.setWelcomePageEnabled(this.state.enableWelcomePage);
});
}
/**
* Implements React's {@link Component#render()}.
*
@ -137,14 +83,116 @@ class WelcomePage extends AbstractWelcomePage {
}
/**
* Sets input element as property of class.
*
* @param {HTMLInputElement} input - input element to be set.
* @returns {void}
* @private
**/
_setInput(input) {
this.roomNameInput = input;
* Returns the domain name.
*
* @private
* @returns {string} Domain name.
*/
_getDomain() {
return `${window.location.protocol}//${window.location.host}/`;
}
/**
* Method that initializes state of the component.
*
* @returns {void}
*/
_initState() {
const showBrandWatermark = interfaceConfig.SHOW_BRAND_WATERMARK;
const showJitsiWatermark = interfaceConfig.SHOW_JITSI_WATERMARK;
this.state = {
...this.state,
brandWatermarkLink:
showBrandWatermark ? interfaceConfig.BRAND_WATERMARK_LINK : '',
enableWelcomePage: true,
generateRoomnames:
interfaceConfig.GENERATE_ROOMNAMES_ON_WELCOME_PAGE,
jitsiWatermarkLink:
showJitsiWatermark ? interfaceConfig.JITSI_WATERMARK_LINK : '',
showBrandWatermark,
showJitsiWatermark,
showPoweredBy: interfaceConfig.SHOW_POWERED_BY
};
}
/**
* Handles <tt>change</tt> event of the checkbox which allows specifying
* whether the WelcomePage is disabled.
*
* @param {Event} event - The (HTML) Event which details the change such as
* the EventTarget.
* @returns {void}
*/
_onDisableWelcomeChange(event) {
this.setState({
enableWelcomePage: !event.target.value
}, () => {
APP.settings.setWelcomePageEnabled(this.state.enableWelcomePage);
});
}
/**
* Overrides the super in order to prevent the dispatching of the Redux
* action SET_ROOM.
*
* @override
* @protected
* @returns {null}
*/
_onJoin() {
// Don't call the super implementation and thus prevent the dispatching
// of the Redux action SET_ROOM.
}
/**
* Handles 'keydown' event to initiate joining the room when the
* 'Enter/Return' button is pressed.
*
* @param {Event} event - Key down event object.
* @private
* @returns {void}
*/
_onKeyDown(event) {
if (event.keyCode === /* Enter */ 13) {
this._onJoin();
}
}
/**
* Overrides the super to account for the differences in the argument types
* provided by HTML and React Native text inputs.
*
* @inheritdoc
* @override
* @param {Event} event - The (HTML) Event which details the change such as
* the EventTarget.
* @protected
*/
_onRoomChange(event) {
super._onRoomChange(event.target.value);
}
/**
* Method that returns brand watermark element if it is enabled.
*
* @private
* @returns {ReactElement|null} Watermark element or null.
*/
_renderBrandWatermark() {
if (this.state.showBrandWatermark) {
return (
<a
href = { this.state.brandWatermarkLink }
target = '_new'>
<div
className = 'watermark rightwatermark'
style = { RIGHT_WATERMARK_STYLE } />
</a>
);
}
return null;
}
/**
@ -196,6 +244,8 @@ class WelcomePage extends AbstractWelcomePage {
);
}
/* eslint-disable require-jsdoc */
/**
* Renders the header part of this WelcomePage.
*
@ -203,32 +253,46 @@ class WelcomePage extends AbstractWelcomePage {
* @returns {ReactElement|null}
*/
_renderHeader() {
/* eslint-enable require-jsdoc */
return (
<div id = 'welcome_page_header'>
{ this._renderJitsiWatermark() }
{ this._renderBrandWatermark() }
{ this._renderPoweredBy() }
{
this._renderJitsiWatermark()
}
{
this._renderBrandWatermark()
}
{
this._renderPoweredBy()
}
<div id = 'enter_room_container'>
<div id = 'enter_room_form'>
<div className = 'domain-name' >
{ this._getDomain() }
<div className = 'domain-name'>
{
this._getDomain()
}
</div>
<div id = 'enter_room'>
<input
autoFocus = { true }
className = 'enter-room__field'
data-room-name =
{ this.state.generatedRoomname }
data-room-name
= { this.state.generatedRoomname }
id = 'enter_room_field'
onChange = { this._onRoomChange }
onKeyDown = { this._onKeyDown }
placeholder = { this.state.roomPlaceholder }
ref = { this._setInput }
type = 'text'
value = { this.state.room } />
{ /* eslint-disable react/jsx-handler-names */ }
<div
className = 'icon-reload enter-room__reload'
onClick = { this._onUpdateRoomname } />
onClick = { this._updateRoomname } />
{ /* eslint-enable react/jsx-handler-names */ }
<button
className = 'enter-room__button'
data-i18n = 'welcomepage.go'
@ -243,7 +307,7 @@ class WelcomePage extends AbstractWelcomePage {
checked = { !this.state.enableWelcomePage }
id = 'disable_welcome'
name = 'checkbox'
onChange = { this._onToggleDisableWelcomePage }
onChange = { this._onDisableWelcomeChange }
type = 'checkbox' />
<label
className = 'disable_welcome_position'
@ -255,31 +319,11 @@ class WelcomePage extends AbstractWelcomePage {
}
/**
* Method that returns brand watermark element if it is enabled.
*
* @returns {ReactElement|null} Watermark element or null.
**/
_renderBrandWatermark() {
if (this.state.showBrandWatermark) {
return (
<a
href = { this.state.brandWatermarkLink }
target = '_new'>
<div
className = 'watermark rightwatermark'
style = { RIGHT_WATERMARK_STYLES } />
</a>
);
}
return null;
}
/**
* Method that returns jitsi watermark element if it is enabled.
*
* @returns {ReactElement|null} Watermark element or null.
**/
* Method that returns jitsi watermark element if it is enabled.
*
* @private
* @returns {ReactElement|null} Watermark element or null.
*/
_renderJitsiWatermark() {
if (this.state.showJitsiWatermark) {
return (
@ -295,11 +339,11 @@ class WelcomePage extends AbstractWelcomePage {
}
/**
* Renders powered by block if it is enabled
*
* @returns {void}
* @private
**/
* Renders powered by block if it is enabled.
*
* @private
* @returns {ReactElement|null}
*/
_renderPoweredBy() {
if (this.state.showPoweredBy) {
return (
@ -315,54 +359,6 @@ class WelcomePage extends AbstractWelcomePage {
return null;
}
/**
* Handles updating roomname.
*
* @private
* @returns {void}
**/
_onUpdateRoomname() {
this._updateRoomname();
}
/**
* Event handler for changing room name input from web.
*
* @inheritdoc
* @override
* @protected
*/
_onRoomChange() {
super._onRoomChange(this.roomNameInput.value);
}
/**
* Handles 'keydown' event and initiate joining the room if 'return' button
* was pressed.
*
* @param {Event} event - Key down event object.
* @returns {void}
* @private
*/
_onKeyDown(event) {
const RETURN_BUTTON_CODE = 13;
if (event.keyCode === RETURN_BUTTON_CODE) {
this._onJoin();
}
}
/**
* We override this method for web app for not dispatching 'set room' action.
*
* @returns {null}
* @override
* @protected
**/
_onJoin() {
return null;
}
/**
* Renders the main part of this WelcomePage.
*

Write Preview
Loading…
Cancel
Save