Add a 10s join timeout

app/features/conference/components/Conference.js

@@ -77,11 +77,6 @@ type State = {
  * Conference component.
  */
 class Conference extends Component<Props, State> {
-    /**
-     * Reference to the element of this component.
-     */
-    _ref: Object;
-
     /**
      * External API object.
      */
@@ -92,6 +87,16 @@ class Conference extends Component<Props, State> {
      */
     _conference: Object;
 
+    /**
+     * Timer to cancel the joining if it takes too long.
+     */
+    _loadTimer: ?TimeoutID;
+
+    /**
+     * Reference to the element of this component.
+     */
+    _ref: Object;
+
     /**
      * Initializes a new {@code Conference} instance.
      *
@@ -137,6 +142,19 @@ class Conference extends Component<Props, State> {
         script.src = getExternalApiURL(serverURL);
 
         this._ref.current.appendChild(script);
+
+        // Set a timer for 10s, if we haven't joined by then, give up.
+        this._loadTimer = setTimeout(() => {
+            this._navigateToHome(
+
+                // $FlowFixMe
+                {
+                    error: 'Loading error',
+                    type: 'error'
+                },
+                room,
+                serverURL);
+        }, 10000);
     }
 
     /**
@@ -165,6 +183,9 @@ class Conference extends Component<Props, State> {
      * @returns {void}
      */
     componentWillUnmount() {
+        if (this._loadTimer) {
+            clearTimeout(this._loadTimer);
+        }
         if (this._api) {
             this._api.dispose();
         }
@@ -291,6 +312,11 @@ class Conference extends Component<Props, State> {
      * @returns {void}
      */
     _onVideoConferenceJoined(conferenceInfo: Object) {
+        if (this._loadTimer) {
+            clearTimeout(this._loadTimer);
+            this._loadTimer = null;
+        }
+
         this.setState({
             isLoading: false
         });