162 lines
4.9 KiB
JavaScript
162 lines
4.9 KiB
JavaScript
import React, { Component } from 'react';
|
|
|
|
import { Conference } from '../../conference';
|
|
|
|
/**
|
|
* The web container rendering the welcome page.
|
|
*/
|
|
export default class WelcomePage extends Component {
|
|
|
|
/**
|
|
* Implements React's {@link Component#render()}.
|
|
*
|
|
* @inheritdoc
|
|
* @returns {ReactElement|null}
|
|
*/
|
|
render() {
|
|
// FIXME The rendering of Conference bellow is a very quick and dirty
|
|
// temporary fix for the following issue: when the WelcomePage is
|
|
// disabled, app.js expects Conference to be rendered already and only
|
|
// then it builds a room name but the App component expects the room
|
|
// name to be built already (by looking at the window's location) in
|
|
// order to choose between WelcomePage and Conference.
|
|
return (
|
|
<div>
|
|
<div id = 'welcome_page'>
|
|
{
|
|
this._renderHeader()
|
|
}
|
|
{
|
|
this._renderMain()
|
|
}
|
|
</div>
|
|
<Conference />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Renders a feature with a specific index.
|
|
*
|
|
* @param {number} index - The index of the feature to render.
|
|
* @private
|
|
* @returns {ReactElement}
|
|
*/
|
|
_renderFeature(index) {
|
|
return (
|
|
<div className = 'feature_holder'>
|
|
<div
|
|
className = 'feature_icon'
|
|
data-i18n = { `welcomepage.feature${index}.title` } />
|
|
<div
|
|
className = 'feature_description'
|
|
data-i18n = { `welcomepage.feature${index}.content` }
|
|
data-i18n-options = { JSON.stringify({
|
|
postProcess: 'resolveAppName'
|
|
}) } />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Renders a row of features.
|
|
*
|
|
* @param {number} beginIndex - The inclusive feature index to begin the row
|
|
* with.
|
|
* @param {number} endIndex - The exclusive feature index to end the row
|
|
* with.
|
|
* @private
|
|
* @returns {ReactElement}
|
|
*/
|
|
_renderFeatureRow(beginIndex, endIndex) {
|
|
const features = [];
|
|
|
|
for (let index = beginIndex; index < endIndex; ++index) {
|
|
features.push(this._renderFeature(index));
|
|
}
|
|
|
|
return (
|
|
<div className = 'feature_row'>
|
|
{
|
|
features
|
|
}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Renders the header part of this WelcomePage.
|
|
*
|
|
* @private
|
|
* @returns {ReactElement|null}
|
|
*/
|
|
_renderHeader() {
|
|
return (
|
|
<div id = 'welcome_page_header'>
|
|
<a target = '_new'>
|
|
<div className = 'watermark leftwatermark' />
|
|
</a>
|
|
<a target = '_new'>
|
|
<div className = 'watermark rightwatermark' />
|
|
</a>
|
|
<a
|
|
className = 'poweredby'
|
|
href = 'http://jitsi.org'
|
|
target = '_new'>
|
|
<span data-i18n = 'poweredby' /> jitsi.org
|
|
</a>
|
|
<div id = 'enter_room_container'>
|
|
<div id = 'enter_room_form'>
|
|
<div id = 'domain_name' />
|
|
<div id = 'enter_room'>
|
|
<input
|
|
autoFocus = { true }
|
|
id = 'enter_room_field'
|
|
type = 'text' />
|
|
<div
|
|
className = 'icon-reload'
|
|
id = 'reload_roomname' />
|
|
<input
|
|
data-i18n = '[value]welcomepage.go'
|
|
id = 'enter_room_button'
|
|
type = 'button'
|
|
value = 'GO' />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id = 'brand_header' />
|
|
<input
|
|
id = 'disable_welcome'
|
|
name = 'checkbox'
|
|
type = 'checkbox' />
|
|
<label
|
|
className = 'disable_welcome_position'
|
|
data-i18n = 'welcomepage.disable'
|
|
htmlFor = 'disable_welcome' />
|
|
<div id = 'header_text' />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Renders the main part of this WelcomePage.
|
|
*
|
|
* @private
|
|
* @returns {ReactElement|null}
|
|
*/
|
|
_renderMain() {
|
|
return (
|
|
<div id = 'welcome_page_main'>
|
|
<div id = 'features'>
|
|
{
|
|
this._renderFeatureRow(1, 5)
|
|
}
|
|
{
|
|
this._renderFeatureRow(5, 9)
|
|
}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|