From 78f3b2431b87d108d7a3a093db95ce8d2f5c2830 Mon Sep 17 00:00:00 2001 From: Christophe Hamerling Date: Thu, 14 May 2020 15:10:46 +0200 Subject: Add timeout configuration in settings --- app/features/conference/components/Conference.js | 11 +- app/features/config/index.js | 5 + app/features/settings/actionTypes.js | 10 ++ app/features/settings/actions.js | 17 +++ .../settings/components/ServerTimeoutField.js | 140 +++++++++++++++++++++ app/features/settings/components/SettingsDrawer.js | 5 + app/features/settings/reducer.js | 9 ++ 7 files changed, 195 insertions(+), 2 deletions(-) create mode 100644 app/features/settings/components/ServerTimeoutField.js (limited to 'app') diff --git a/app/features/conference/components/Conference.js b/app/features/conference/components/Conference.js index 0b8b798..6e39cad 100644 --- a/app/features/conference/components/Conference.js +++ b/app/features/conference/components/Conference.js @@ -51,6 +51,11 @@ type Props = { */ _serverURL: string; + /** + * Default Jitsi Server Timeout. + */ + _serverTimeout: number; + /** * Start with Audio Muted. */ @@ -120,6 +125,7 @@ class Conference extends Component { componentDidMount() { const parentNode = this._ref.current; const room = this.props.location.state.room; + const serverTimeout = this.props._serverTimeout || config.defaultServerTimeout; const serverURL = this.props.location.state.serverURL || this.props._serverURL || config.defaultServerURL; @@ -139,7 +145,7 @@ class Conference extends Component { this._ref.current.appendChild(script); - // Set a timer for 10s, if we haven't loaded the iframe by then, + // Set a timer for a timeout duration, if we haven't loaded the iframe by then, // give up. this._loadTimer = setTimeout(() => { this._navigateToHome( @@ -151,7 +157,7 @@ class Conference extends Component { }, room, serverURL); - }, 10000); + }, serverTimeout * 1000); } /** @@ -421,6 +427,7 @@ function _mapStateToProps(state: Object) { _email: state.settings.email, _name: state.settings.name, _serverURL: state.settings.serverURL, + _serverTimeout: state.settings.serverTimeout, _startWithAudioMuted: state.settings.startWithAudioMuted, _startWithVideoMuted: state.settings.startWithVideoMuted }; diff --git a/app/features/config/index.js b/app/features/config/index.js index 64350be..dde9fb3 100644 --- a/app/features/config/index.js +++ b/app/features/config/index.js @@ -20,6 +20,11 @@ export default { */ defaultServerURL: 'https://meet.jit.si', + /** + * The default server Timeout in seconds. + */ + defaultServerTimeout: 10, + /** * URL to send feedback. */ diff --git a/app/features/settings/actionTypes.js b/app/features/settings/actionTypes.js index 9140940..0c8075f 100644 --- a/app/features/settings/actionTypes.js +++ b/app/features/settings/actionTypes.js @@ -59,6 +59,16 @@ export const SET_NAME = Symbol('SET_NAME'); */ export const SET_SERVER_URL = Symbol('SET_SERVER_URL'); +/** + * The type of (redux) action that sets the Server Timeout. + * + * @type { + * type: SET_SERVER_TIMEOUT, + * serverTimeout: number + * } + */ +export const SET_SERVER_TIMEOUT = Symbol('SET_SERVER_TIMEOUT'); + /** * The type of (redux) action that sets Start with Video Muted. * diff --git a/app/features/settings/actions.js b/app/features/settings/actions.js index a8a481f..7e3c054 100644 --- a/app/features/settings/actions.js +++ b/app/features/settings/actions.js @@ -7,6 +7,7 @@ import { SET_EMAIL, SET_NAME, SET_SERVER_URL, + SET_SERVER_TIMEOUT, SET_VIDEO_MUTED } from './actionTypes'; @@ -76,6 +77,22 @@ export function setServerURL(serverURL: string) { }; } +/** + * Set Server Timeout. + * + * @param {string} serverTimeout - Server Timeout. + * @returns {{ + * type: SET_SERVER_TIMEOUT, + * serverTimeout: ?number + * }} + */ +export function setServerTimeout(serverTimeout: number) { + return { + type: SET_SERVER_TIMEOUT, + serverTimeout + }; +} + /** * Set start with audio muted. * diff --git a/app/features/settings/components/ServerTimeoutField.js b/app/features/settings/components/ServerTimeoutField.js new file mode 100644 index 0000000..41c2434 --- /dev/null +++ b/app/features/settings/components/ServerTimeoutField.js @@ -0,0 +1,140 @@ +// @flow + +import { FieldTextStateless } from '@atlaskit/field-text'; + +import React, { Component } from 'react'; +import { connect } from 'react-redux'; +import type { Dispatch } from 'redux'; + +import config from '../../config'; + +import { setServerTimeout } from '../actions'; + +type Props = { + + /** + * Redux dispatch. + */ + dispatch: Dispatch<*>; + + /** + * Default Jitsi Meet Server Timeout in (redux) store. + */ + _serverTimeout: number; +}; + +type State = { + + /** + * Whether the timeout of the Jitsi Meet Server valid. + */ + isValid: boolean; + + /** + * Default Jitsi Meet Server Timeout in (local) state. + */ + serverTimeout: number; +}; + +/** + * Default Server URL field text placed in the Settings drawer. + */ +class ServerTimeoutField extends Component { + /** + * Initializes a new {@code ServerTimeoutField} instance. + * + * @inheritdoc + */ + constructor(props) { + super(props); + + this.state = { + isValid: true, + serverTimeout: props._serverTimeout + }; + + this._onServerTimeoutChange = this._onServerTimeoutChange.bind(this); + this._onServerTimeoutSubmit = this._onServerTimeoutSubmit.bind(this); + } + + /** + * Render function of component. + * + * @returns {ReactElement} + */ + render() { + return ( +
+ + + ); + } + + _onServerTimeoutChange: (*) => void; + + /** + * Updates Server Timeout in (redux) state when it is updated. + * + * @param {SyntheticInputEvent} event - Event by which + * this function is called. + * @returns {void} + */ + _onServerTimeoutChange(event: SyntheticInputEvent) { + this.setState({ + serverTimeout: Number.parseInt(event.currentTarget.value, 10) + }, this._validateServerTimeout); + } + + _onServerTimeoutSubmit: (*) => void; + + /** + * Updates Server Timeout in (redux) store when it is updated. + * + * @param {Event} event - Event by which this function is called. + * @returns {void} + */ + _onServerTimeoutSubmit(event: Event) { + event.preventDefault(); + if (this.state.isValid) { + this.props.dispatch(setServerTimeout(this.state.serverTimeout)); + } + } + + /** + * Validates timeout is a valid Number. + * + * @returns {void} + */ + _validateServerTimeout() { + this.setState({ + isValid: Math.sign(this.state.serverTimeout) === 1 + }); + } +} + +/** + * Maps (parts of) the redux store to the React props. + * + * @param {Object} state - The redux state. + * @returns {{ + * _serverURL: string + * }} + */ +function _mapStateToProps(state: Object) { + return { + _serverTimeout: state.settings.serverTimeout + }; +} + +export default connect(_mapStateToProps)(ServerTimeoutField); diff --git a/app/features/settings/components/SettingsDrawer.js b/app/features/settings/components/SettingsDrawer.js index 3d800e4..bba6cb8 100644 --- a/app/features/settings/components/SettingsDrawer.js +++ b/app/features/settings/components/SettingsDrawer.js @@ -5,6 +5,7 @@ import FieldText from '@atlaskit/field-text'; import ArrowLeft from '@atlaskit/icon/glyph/arrow-left'; import { AkCustomDrawer } from '@atlaskit/navigation'; import { SpotlightTarget } from '@atlaskit/onboarding'; +import Panel from '@atlaskit/panel'; import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -17,6 +18,7 @@ import { setEmail, setName } from '../actions'; import AlwaysOnTopWindowToggle from './AlwaysOnTopWindowToggle'; import ServerURLField from './ServerURLField'; +import ServerTimeoutField from './ServerTimeoutField'; import StartMutedToggles from './StartMutedToggles'; type Props = { @@ -140,6 +142,9 @@ class SettingsDrawer extends Component { + + + diff --git a/app/features/settings/reducer.js b/app/features/settings/reducer.js index 3d69e9a..bed9a11 100644 --- a/app/features/settings/reducer.js +++ b/app/features/settings/reducer.js @@ -9,6 +9,7 @@ import { SET_EMAIL, SET_NAME, SET_SERVER_URL, + SET_SERVER_TIMEOUT, SET_VIDEO_MUTED } from './actionTypes'; @@ -17,6 +18,7 @@ type State = { email: string, name: string, serverURL: ?string, + serverTimeout: ?number, startWithAudioMuted: boolean, startWithVideoMuted: boolean, alwaysOnTopWindowEnabled: boolean, @@ -30,6 +32,7 @@ const DEFAULT_STATE = { email: '', name: username, serverURL: undefined, + serverTimeout: undefined, startWithAudioMuted: false, startWithVideoMuted: false }; @@ -79,6 +82,12 @@ export default (state: State = DEFAULT_STATE, action: Object) => { serverURL: action.serverURL }; + case SET_SERVER_TIMEOUT: + return { + ...state, + serverTimeout: action.serverTimeout + }; + case SET_VIDEO_MUTED: return { ...state, -- cgit v1.2.3