ref(overlay): convert progress bar to react
This commit is contained in:
Leonard Kim
parent
7b1b873b6e
commit
f0d3abffc5
|
|
@ -56,9 +56,6 @@
|
|||
margin-bottom: 0px;
|
||||
width: 100%;
|
||||
border-radius: 0px;
|
||||
> .aui-progress-indicator-value {
|
||||
border-radius: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__title {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
Loading…
Reference in New Issue