|
|
|
|
@ -1,11 +1,112 @@ |
|
|
|
|
import React, { Component } from 'react'; |
|
|
|
|
/* global interfaceConfig, APP */ |
|
|
|
|
|
|
|
|
|
import React from 'react'; |
|
|
|
|
import { connect } from 'react-redux'; |
|
|
|
|
|
|
|
|
|
import { |
|
|
|
|
AbstractWelcomePage, |
|
|
|
|
mapStateToProps |
|
|
|
|
} from './AbstractWelcomePage'; |
|
|
|
|
|
|
|
|
|
const RIGHT_WATERMARK_STYLES = { |
|
|
|
|
backgroundImage: 'url(images/rightwatermark.png)' |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
import { Conference } from '../../conference'; |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* The web container rendering the welcome page. |
|
|
|
|
*/ |
|
|
|
|
export default class WelcomePage extends Component { |
|
|
|
|
class WelcomePage extends AbstractWelcomePage { |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* Constructor function of WelcomePage. |
|
|
|
|
* |
|
|
|
|
* @param {Object} props - Props to be set. |
|
|
|
|
**/ |
|
|
|
|
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._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 method is executed when comonent is mounted. |
|
|
|
|
* |
|
|
|
|
* @inheritdoc |
|
|
|
|
*/ |
|
|
|
|
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()}. |
|
|
|
|
@ -35,6 +136,17 @@ export default class WelcomePage extends Component { |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* Sets input element as property of class. |
|
|
|
|
* |
|
|
|
|
* @param {HTMLInputElement} input - input element to be set. |
|
|
|
|
* @returns {void} |
|
|
|
|
* @private |
|
|
|
|
**/ |
|
|
|
|
_setInput(input) { |
|
|
|
|
this.roomNameInput = input; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* Renders a feature with a specific index. |
|
|
|
|
* |
|
|
|
|
@ -93,41 +205,45 @@ export default class WelcomePage extends Component { |
|
|
|
|
_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> |
|
|
|
|
{ this._renderJitsiWatermark() } |
|
|
|
|
{ this._renderBrandWatermark() } |
|
|
|
|
{ this._renderPoweredBy() } |
|
|
|
|
<div id = 'enter_room_container'> |
|
|
|
|
<div id = 'enter_room_form'> |
|
|
|
|
<div id = 'domain_name' /> |
|
|
|
|
<div className = 'domain-name' > |
|
|
|
|
{ this._getDomain() } |
|
|
|
|
</div> |
|
|
|
|
<div id = 'enter_room'> |
|
|
|
|
<input |
|
|
|
|
autoFocus = { true } |
|
|
|
|
className = 'enter-room__field' |
|
|
|
|
data-room-name = |
|
|
|
|
{ this.state.generatedRoomname } |
|
|
|
|
id = 'enter_room_field' |
|
|
|
|
type = 'text' /> |
|
|
|
|
onChange = { this._onRoomChange } |
|
|
|
|
onKeyDown = { this._onKeyDown } |
|
|
|
|
placeholder = { this.state.roomPlaceholder } |
|
|
|
|
ref = { this._setInput } |
|
|
|
|
type = 'text' |
|
|
|
|
value = { this.state.room } /> |
|
|
|
|
<div |
|
|
|
|
className = 'icon-reload' |
|
|
|
|
id = 'reload_roomname' /> |
|
|
|
|
<input |
|
|
|
|
data-i18n = '[value]welcomepage.go' |
|
|
|
|
className = 'icon-reload enter-room__reload' |
|
|
|
|
onClick = { this._onUpdateRoomname } /> |
|
|
|
|
<button |
|
|
|
|
className = 'enter-room__button' |
|
|
|
|
data-i18n = 'welcomepage.go' |
|
|
|
|
id = 'enter_room_button' |
|
|
|
|
type = 'button' |
|
|
|
|
value = 'GO' /> |
|
|
|
|
onClick = { this._onJoin } |
|
|
|
|
type = 'button' /> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div id = 'brand_header' /> |
|
|
|
|
<input |
|
|
|
|
checked = { !this.state.enableWelcomePage } |
|
|
|
|
id = 'disable_welcome' |
|
|
|
|
name = 'checkbox' |
|
|
|
|
onChange = { this._onToggleDisableWelcomePage } |
|
|
|
|
type = 'checkbox' /> |
|
|
|
|
<label |
|
|
|
|
className = 'disable_welcome_position' |
|
|
|
|
@ -138,6 +254,115 @@ export default class WelcomePage extends Component { |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* 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. |
|
|
|
|
**/ |
|
|
|
|
_renderJitsiWatermark() { |
|
|
|
|
if (this.state.showJitsiWatermark) { |
|
|
|
|
return ( |
|
|
|
|
<a |
|
|
|
|
href = { this.state.jitsiWatermarkLink } |
|
|
|
|
target = '_new'> |
|
|
|
|
<div className = 'watermark leftwatermark' /> |
|
|
|
|
</a> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return null; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* Renders powered by block if it is enabled |
|
|
|
|
* |
|
|
|
|
* @returns {void} |
|
|
|
|
* @private |
|
|
|
|
**/ |
|
|
|
|
_renderPoweredBy() { |
|
|
|
|
if (this.state.showPoweredBy) { |
|
|
|
|
return ( |
|
|
|
|
<a |
|
|
|
|
className = 'poweredby' |
|
|
|
|
href = 'http://jitsi.org' |
|
|
|
|
target = '_new'> |
|
|
|
|
<span data-i18n = 'poweredby' /> jitsi.org |
|
|
|
|
</a> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
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. |
|
|
|
|
* |
|
|
|
|
@ -159,3 +384,5 @@ export default class WelcomePage extends Component { |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
export default connect(mapStateToProps)(WelcomePage); |
|
|
|
|
|
Ilya Daynatovich
9 years ago
committed by