Merge pull request #2205 from virtuacoplenny/lenny/progress-bar-react

ref(overlay): convert progress bar to react

css/_inlay.scss

@@ -56,9 +56,6 @@
                 margin-bottom: 0px;
                 width: 100%;
                 border-radius: 0px;
-                > .aui-progress-indicator-value {
-                    border-radius: 0px;
-                }
             }
         }
         &__title {

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;
     }
 }

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 (
             <div
-                className = 'aui-progress-indicator'
+                className = 'progress-indicator'
                 id = 'reloadProgressBar'>
-                <span className = 'aui-progress-indicator-value' />
+                <div
+                    className = 'progress-indicator-fill'
+                    style = {{
+                        width: `${percentageComplete}%`
+                    }} />
             </div>
         );
     }

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.

react/features/overlay/components/ReloadTimer.js

@@ -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 (
-            <div>
-                <div
-                    className = 'aui-progress-indicator'
-                    id = 'reloadProgressBar'>
-                    <span className = 'aui-progress-indicator-value' />
-                </div>
-                <span className = 'reload_overlay_text'>
-                    {
-                        this.state.current
-                    }
-                    <span>
-                        { t('dialog.conferenceReloadTimeLeft') }
-                    </span>
-                </span>
-            </div>
-        );
-    }
-}
-
-export default translate(ReloadTimer);