From f0d3abffc5c2da803a65b670fc7f0dca9ed396cb Mon Sep 17 00:00:00 2001 From: Leonard Kim Date: Tue, 21 Nov 2017 14:45:40 -0800 Subject: [PATCH] ref(overlay): convert progress bar to react --- css/_inlay.scss | 3 - css/reload_overlay/_reload_overlay.scss | 11 +- .../components/AbstractPageReloadOverlay.js | 30 ++-- .../overlay/components/OverlayContainer.js | 2 +- .../overlay/components/ReloadTimer.js | 167 ------------------ 5 files changed, 21 insertions(+), 192 deletions(-) delete mode 100644 react/features/overlay/components/ReloadTimer.js diff --git a/css/_inlay.scss b/css/_inlay.scss index 6748f8e87..701c3b793 100644 --- a/css/_inlay.scss +++ b/css/_inlay.scss @@ -56,9 +56,6 @@ margin-bottom: 0px; width: 100%; border-radius: 0px; - > .aui-progress-indicator-value { - border-radius: 0px; - } } } &__title { diff --git a/css/reload_overlay/_reload_overlay.scss b/css/reload_overlay/_reload_overlay.scss index 033a9664d..fbe6bb974 100644 --- a/css/reload_overlay/_reload_overlay.scss +++ b/css/reload_overlay/_reload_overlay.scss @@ -11,9 +11,16 @@ } #reloadProgressBar { - width: 180px; + background: #e9e9e9; + border-radius: 3px; + height: 5px; margin: 5px auto; - > .aui-progress-indicator-value { + overflow: hidden; + width: 180px; + + .progress-indicator-fill { background: $reloadProgressBarBg; + height: 100%; + transition: width .5s; } } diff --git a/react/features/overlay/components/AbstractPageReloadOverlay.js b/react/features/overlay/components/AbstractPageReloadOverlay.js index 9985bd861..721f12375 100644 --- a/react/features/overlay/components/AbstractPageReloadOverlay.js +++ b/react/features/overlay/components/AbstractPageReloadOverlay.js @@ -8,7 +8,6 @@ import { randomInt } from '../../base/util'; import { _reloadNow } from '../actions'; import ReloadButton from './ReloadButton'; -declare var AJS: Object; declare var APP: Object; const logger = require('jitsi-meet-logger').getLogger(__filename); @@ -141,8 +140,6 @@ export default class AbstractPageReloadOverlay extends Component<*, *> { `The conference will be reloaded after ${ this.state.timeoutSeconds} seconds.`); - AJS.progressBars.update('#reloadProgressBar', 0); - this._interval = setInterval( () => { @@ -164,20 +161,6 @@ export default class AbstractPageReloadOverlay extends Component<*, *> { 1000); } - /** - * React Component method that executes once component is updated. - * - * @inheritdoc - * @returns {void} - */ - componentDidUpdate() { - const { timeLeft, timeoutSeconds } = this.state; - - AJS.progressBars.update( - '#reloadProgressBar', - (timeoutSeconds - timeLeft) / timeoutSeconds); - } - /** * Clears the timer interval. * @@ -214,11 +197,20 @@ export default class AbstractPageReloadOverlay extends Component<*, *> { * @returns {ReactElement} */ _renderProgressBar() { + const { timeoutSeconds, timeLeft } = this.state; + const timeRemaining = timeoutSeconds - timeLeft; + const percentageComplete = Math.floor( + (timeRemaining / timeoutSeconds) * 100); + return (
- +
); } diff --git a/react/features/overlay/components/OverlayContainer.js b/react/features/overlay/components/OverlayContainer.js index 526ed0ca7..fd48ccc9d 100644 --- a/react/features/overlay/components/OverlayContainer.js +++ b/react/features/overlay/components/OverlayContainer.js @@ -111,7 +111,7 @@ class OverlayContainer extends Component { }; /** - * Initializes a new ReloadTimer instance. + * Initializes a new OverlayContainer instance. * * @param {Object} props - The read-only properties with which the new * instance is to be initialized. diff --git a/react/features/overlay/components/ReloadTimer.js b/react/features/overlay/components/ReloadTimer.js deleted file mode 100644 index da0b31fd8..000000000 --- a/react/features/overlay/components/ReloadTimer.js +++ /dev/null @@ -1,167 +0,0 @@ -/* global AJS */ - -import PropTypes from 'prop-types'; -import React, { Component } from 'react'; - -import { translate } from '../../base/i18n'; - -/** - * Implements a React Component for the reload timer. Starts counter from - * props.start, adds props.step to the current value on every props.interval - * seconds until the current value reaches props.end. Also displays progress - * bar. - */ -class ReloadTimer extends Component { - /** - * ReloadTimer component's property types. - * - * @static - */ - static propTypes = { - /** - * The end of the timer. When this.state.current reaches this value the - * timer will stop and call onFinish function. - * - * @public - * @type {number} - */ - end: PropTypes.number, - - /** - * The interval in sec for adding this.state.step to this.state.current. - * - * @public - * @type {number} - */ - interval: PropTypes.number, - - /** - * The function that will be executed when timer finish (when - * this.state.current === this.props.end) - */ - onFinish: PropTypes.func, - - /** - * The start of the timer. The initial value for this.state.current. - * - * @public - * @type {number} - */ - start: PropTypes.number, - - /** - * The value which will be added to this.state.current on every step. - * - * @public - * @type {number} - */ - step: PropTypes.number, - - /** - * The function to translate human-readable text. - * - * @public - * @type {Function} - */ - t: PropTypes.func - }; - - /** - * Initializes a new ReloadTimer instance. - * - * @param {Object} props - The read-only properties with which the new - * instance is to be initialized. - * @public - */ - constructor(props) { - super(props); - - this.state = { - /** - * Current value(time) of the timer. - * - * @type {number} - */ - current: this.props.start, - - /** - * The absolute value of the time from the start of the timer until - * the end of the timer. - * - * @type {number} - */ - time: Math.abs(this.props.end - this.props.start) - }; - } - - /** - * React Component method that executes once component is mounted. - * - * @inheritdoc - * @returns {void} - * @protected - */ - componentDidMount() { - AJS.progressBars.update('#reloadProgressBar', 0); - - const intervalId - = setInterval( - () => { - if (this.state.current === this.props.end) { - clearInterval(intervalId); - this.props.onFinish(); - } else { - this.setState((prevState, props) => { - return { - current: prevState.current + props.step - }; - }); - } - }, - Math.abs(this.props.interval) * 1000); - } - - /** - * React Component method that executes once component is updated. - * - * @inheritdoc - * @returns {void} - * @protected - */ - componentDidUpdate() { - AJS.progressBars.update( - '#reloadProgressBar', - Math.abs(this.state.current - this.props.start) / this.state.time); - } - - /** - * Implements React's {@link Component#render()}. - * - * @inheritdoc - * @returns {ReactElement|null} - * @public - */ - render() { - const { t } = this.props; - - return ( -
-
- -
- - { - this.state.current - } - - { t('dialog.conferenceReloadTimeLeft') } - - -
- ); - } -} - -export default translate(ReloadTimer);