ref(overlays): Replace the abstract class for overlays with overlay frame component

In this case makes more sense to have overlay frame included in every overlay instead
of abstract class that implements the overlay frame and have to be extended by every
overlay. In addition, mapStateToProps isn't working well with inheritance.

react/features/overlay/components/AbstractOverlay.js

@@ -1,80 +0,0 @@
-/* global APP */
-
-import React, { Component } from 'react';
-
-/**
- * Implements an abstract React Component for overlay - the components which are
- * displayed on top of the application covering the whole screen.
- *
- * @abstract
- */
-export default class AbstractOverlay extends Component {
-    /**
-     * Initializes a new AbstractOverlay instance.
-     *
-     * @param {Object} props - The read-only properties with which the new
-     * instance is to be initialized.
-     * @public
-     */
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            /**
-             * Indicates the CSS style of the overlay. If true, then ighter;
-             * darker, otherwise.
-             *
-             * @type {boolean}
-             */
-            isLightOverlay: false
-        };
-    }
-
-    /**
-     * Implements React's {@link Component#render()}.
-     *
-     * @inheritdoc
-     * @returns {ReactElement|null}
-     */
-    render() {
-        const containerClass
-            = this.state.isLightOverlay
-                ? 'overlay__container-light'
-                : 'overlay__container';
-
-        return (
-            <div
-                className = { containerClass }
-                id = 'overlay'>
-                <div className = 'overlay__content'>
-                    {
-                        this._renderOverlayContent()
-                    }
-                </div>
-            </div>
-        );
-    }
-
-    /**
-     * Reloads the page.
-     *
-     * @returns {void}
-     * @protected
-     */
-    _reconnectNow() {
-        // FIXME: In future we should dispatch an action here that will result
-        // in reload.
-        APP.ConferenceUrl.reload();
-    }
-
-    /**
-     * Abstract method which should be used by subclasses to provide the overlay
-     * content.
-     *
-     * @returns {ReactElement|null}
-     * @protected
-     */
-    _renderOverlayContent() {
-        return null;
-    }
-}

react/features/overlay/components/OverlayFrame.js

@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+
+/**
+ * Implements an abstract React Component for overlay - the components which are
+ * displayed on top of the application covering the whole screen.
+ *
+ * @abstract
+ */
+export default class OverlayFrame extends Component {
+    /**
+     * OverlayFrame component's property types.
+     *
+     * @static
+     */
+    static propTypes = {
+        /**
+         * The children components to be displayed into the overlay frame.
+         */
+        children: React.PropTypes.node.isRequired,
+
+        /**
+         * Indicates the css style of the overlay. If true, then lighter;
+         * darker, otherwise.
+         *
+         * @type {boolean}
+         */
+        isLightOverlay: React.PropTypes.bool
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement|null}
+     */
+    render() {
+        const containerClass = this.props.isLightOverlay
+            ? 'overlay__container-light' : 'overlay__container';
+
+        return (
+            <div
+                className = { containerClass }
+                id = 'overlay'>
+                <div className = 'overlay__content'>
+                    {
+                        this.props.children
+                    }
+                </div>
+            </div>
+        );
+    }
+}

react/features/overlay/components/PageReloadOverlay.js

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
 import { randomInt } from '../../base/util';
 
-import AbstractOverlay from './AbstractOverlay';
+import OverlayFrame from './OverlayFrame';
+import { reconnectNow } from '../functions';
 import ReloadTimer from './ReloadTimer';
 
 declare var APP: Object;
@@ -15,7 +16,7 @@ const logger = require('jitsi-meet-logger').getLogger(__filename);
  * conference is reloaded. Shows a warning message and counts down towards the
  * reload.
  */
-class PageReloadOverlay extends AbstractOverlay {
+class PageReloadOverlay extends Component {
     /**
      * PageReloadOverlay component's property types.
      *
@@ -32,11 +33,18 @@ class PageReloadOverlay extends AbstractOverlay {
 
         /**
          * The reason for the error that will cause the reload.
-         * NOTE: Used by PageReloadOverlay only.
          * @public
          * @type {string}
          */
-        reason: React.PropTypes.string
+        reason: React.PropTypes.string,
+
+        /**
+         * The function to translate human-readable text.
+         *
+         * @public
+         * @type {Function}
+         */
+        t: React.PropTypes.func
     }
 
     /**
@@ -69,8 +77,6 @@ class PageReloadOverlay extends AbstractOverlay {
         }
 
         this.state = {
-            ...this.state,
-
             /**
              * Indicates the css style of the overlay. If true, then lighter;
              * darker, otherwise.
@@ -110,8 +116,6 @@ class PageReloadOverlay extends AbstractOverlay {
      * @returns {void}
      */
     componentDidMount() {
-        super.componentDidMount();
-
         // FIXME (CallStats - issue) This event will not make it to CallStats
         // because the log queue is not flushed before "fabric terminated" is
         // sent to the backed.
@@ -143,7 +147,7 @@ class PageReloadOverlay extends AbstractOverlay {
                 <button
                     className = { className }
                     id = 'reconnectNow'
-                    onClick = { this._reconnectNow }>
+                    onClick = { reconnectNow }>
                     { t('dialog.reconnectNow') }
                 </button>
             );
@@ -156,36 +160,36 @@ class PageReloadOverlay extends AbstractOverlay {
     }
 
     /**
-     * Constructs overlay body with the warning message and count down towards
-     * the conference reload.
+     * Implements React's {@link Component#render()}.
      *
+     * @inheritdoc
      * @returns {ReactElement|null}
-     * @override
-     * @protected
      */
-    _renderOverlayContent() {
+    render() {
         const { t } = this.props;
 
         /* eslint-disable react/jsx-handler-names */
 
         return (
-            <div className = 'inlay'>
-                <span
-                    className = 'reload_overlay_title'>
-                    { t(this.state.title) }
-                </span>
-                <span
-                    className = 'reload_overlay_text'>
-                    { t(this.state.message) }
-                </span>
-                <ReloadTimer
-                    end = { 0 }
-                    interval = { 1 }
-                    onFinish = { this._reconnectNow }
-                    start = { this.state.timeoutSeconds }
-                    step = { -1 } />
-                { this._renderButton() }
-            </div>
+            <OverlayFrame isLightOverlay = { this.state.isLightOverlay }>
+                <div className = 'inlay'>
+                    <span
+                        className = 'reload_overlay_title'>
+                        { t(this.state.title) }
+                    </span>
+                    <span
+                        className = 'reload_overlay_text'>
+                        { t(this.state.message) }
+                    </span>
+                    <ReloadTimer
+                        end = { 0 }
+                        interval = { 1 }
+                        onFinish = { reconnectNow }
+                        start = { this.state.timeoutSeconds }
+                        step = { -1 } />
+                    { this._renderButton() }
+                </div>
+            </OverlayFrame>
         );
 
         /* eslint-enable react/jsx-handler-names */

react/features/overlay/components/UserMediaPermissionsOverlay.js

@@ -1,16 +1,16 @@
 /* global interfaceConfig */
 
-import React from 'react';
+import React, { Component } from 'react';
 
 import { translate, translateToHTML } from '../../base/i18n';
 
-import AbstractOverlay from './AbstractOverlay';
+import OverlayFrame from './OverlayFrame';
 
 /**
  * Implements a React Component for overlay with guidance how to proceed with
  * gUM prompt.
  */
-class UserMediaPermissionsOverlay extends AbstractOverlay {
+class UserMediaPermissionsOverlay extends Component {
     /**
      * UserMediaPermissionsOverlay component's property types.
      *
@@ -24,7 +24,15 @@ class UserMediaPermissionsOverlay extends AbstractOverlay {
          * @public
          * @type {string}
          */
-        browser: React.PropTypes.string
+        browser: React.PropTypes.string,
+
+        /**
+         * The function to translate human-readable text.
+         *
+         * @public
+         * @type {Function}
+         */
+        t: React.PropTypes.func
     }
 
     /**
@@ -48,18 +56,16 @@ class UserMediaPermissionsOverlay extends AbstractOverlay {
     }
 
     /**
-     * Constructs overlay body with the message with guidance how to proceed
-     * with gUM prompt.
+     * Implements React's {@link Component#render()}.
      *
+     * @inheritdoc
      * @returns {ReactElement|null}
-     * @override
-     * @protected
      */
-    _renderOverlayContent() {
+    render() {
         const { browser, t } = this.props;
 
         return (
-            <div>
+            <OverlayFrame>
                 <div className = 'inlay'>
                     <span className = 'inlay__icon icon-microphone' />
                     <span className = 'inlay__icon icon-camera' />
@@ -80,13 +86,13 @@ class UserMediaPermissionsOverlay extends AbstractOverlay {
                 </div>
                 <div className = 'policy overlay__policy'>
                     <p className = 'policy__text'>
-                        { t('startupoverlay.policyText') }
+                        { translateToHTML(t, 'startupoverlay.policyText') }
                     </p>
                     {
                         this._renderPolicyLogo()
                     }
                 </div>
-            </div>
+            </OverlayFrame>
         );
     }
 

react/features/overlay/functions.js

@@ -0,0 +1,12 @@
+/* global APP */
+/**
+ * Reloads the page.
+ *
+ * @returns {void}
+ * @protected
+ */
+export function reconnectNow() {
+    // FIXME: In future we should dispatch an action here that will result
+    // in reload.
+    APP.ConferenceUrl.reload();
+}