From c461e8b63cc5a89d6381ec68ab551fbce2414cd7 Mon Sep 17 00:00:00 2001 From: hristoterezov Date: Mon, 6 Mar 2017 16:03:50 -0600 Subject: [PATCH] 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. --- .../overlay/components/AbstractOverlay.js | 80 ------------------- .../overlay/components/OverlayFrame.js | 52 ++++++++++++ .../overlay/components/PageReloadOverlay.js | 68 ++++++++-------- .../components/UserMediaPermissionsOverlay.js | 30 ++++--- react/features/overlay/functions.js | 12 +++ 5 files changed, 118 insertions(+), 124 deletions(-) delete mode 100644 react/features/overlay/components/AbstractOverlay.js create mode 100644 react/features/overlay/components/OverlayFrame.js create mode 100644 react/features/overlay/functions.js diff --git a/react/features/overlay/components/AbstractOverlay.js b/react/features/overlay/components/AbstractOverlay.js deleted file mode 100644 index 1c60c317a8..0000000000 --- a/react/features/overlay/components/AbstractOverlay.js +++ /dev/null @@ -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 ( -
-
- { - this._renderOverlayContent() - } -
-
- ); - } - - /** - * 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; - } -} diff --git a/react/features/overlay/components/OverlayFrame.js b/react/features/overlay/components/OverlayFrame.js new file mode 100644 index 0000000000..6f2f9f9dc7 --- /dev/null +++ b/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 ( +
+
+ { + this.props.children + } +
+
+ ); + } +} diff --git a/react/features/overlay/components/PageReloadOverlay.js b/react/features/overlay/components/PageReloadOverlay.js index 54f17d90d5..946ea1c4d2 100644 --- a/react/features/overlay/components/PageReloadOverlay.js +++ b/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 { ); @@ -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 ( -
- - { t(this.state.title) } - - - { t(this.state.message) } - - - { this._renderButton() } -
+ +
+ + { t(this.state.title) } + + + { t(this.state.message) } + + + { this._renderButton() } +
+ ); /* eslint-enable react/jsx-handler-names */ diff --git a/react/features/overlay/components/UserMediaPermissionsOverlay.js b/react/features/overlay/components/UserMediaPermissionsOverlay.js index 193563b983..d07012030f 100644 --- a/react/features/overlay/components/UserMediaPermissionsOverlay.js +++ b/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 ( -
+
@@ -80,13 +86,13 @@ class UserMediaPermissionsOverlay extends AbstractOverlay {

- { t('startupoverlay.policyText') } + { translateToHTML(t, 'startupoverlay.policyText') }

{ this._renderPolicyLogo() }
-
+ ); } diff --git a/react/features/overlay/functions.js b/react/features/overlay/functions.js new file mode 100644 index 0000000000..d9f4862332 --- /dev/null +++ b/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(); +}