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') }
-
-
-