Add timeout configuration in settings

7 files changed, 195 insertions, 2 deletions

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
@@ -52,6 +52,11 @@ type Props = {
     _serverURL: string;
 
     /**
+     * Default Jitsi Server Timeout.
+     */
+    _serverTimeout: number;
+
+    /**
      * Start with Audio Muted.
      */
     _startWithAudioMuted: boolean;
@@ -120,6 +125,7 @@ class Conference extends Component<Props, State> {
     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<Props, State> {
 
         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<Props, State> {
                 },
                 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
@@ -21,6 +21,11 @@ export default {
     defaultServerURL: 'https://meet.jit.si',
 
     /**
+     * The default server Timeout in seconds.
+     */
+    defaultServerTimeout: 10,
+
+    /**
      * URL to send feedback.
      */
     feedbackURL: 'mailto:support@jitsi.org',
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
@@ -60,6 +60,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.
  *
  * @type {
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';
 
@@ -77,6 +78,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.
  *
  * @param {boolean} startWithAudioMuted - Whether to 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<Props, State> {
+    /**
+     * 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 (
+            <form onSubmit = { this._onServerTimeoutSubmit }>
+                <FieldTextStateless
+                    invalidMessage
+                        = { 'Invalid Timeout' }
+                    isInvalid = { !this.state.isValid }
+                    isValidationHidden = { this.state.isValid }
+                    label = 'Server Timeout (in seconds)'
+                    onBlur = { this._onServerTimeoutSubmit }
+                    onChange = { this._onServerTimeoutChange }
+                    placeholder = { config.defaultServerTimeout }
+                    shouldFitContainer = { true }
+                    type = 'number'
+                    value = { this.state.serverTimeout } />
+            </form>
+        );
+    }
+
+    _onServerTimeoutChange: (*) => void;
+
+    /**
+     * Updates Server Timeout in (redux) state when it is updated.
+     *
+     * @param {SyntheticInputEvent<HTMLInputElement>} event - Event by which
+     * this function is called.
+     * @returns {void}
+     */
+    _onServerTimeoutChange(event: SyntheticInputEvent<HTMLInputElement>) {
+        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<Props, *> {
                                 <AlwaysOnTopWindowToggle />
                             </SpotlightTarget>
                         </TogglesContainer>
+                        <Panel header = 'Advanced Settings'>
+                            <ServerTimeoutField />
+                        </Panel>
                         <Onboarding section = 'settings-drawer' />
                     </SettingsContainer>
                 </DrawerContainer>
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,