haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

ref(overlay): convert progress bar to react
This commit is contained in:
Saúl Ibarra Corretgé 2017-11-23 15:35:27 +01:00 committed by GitHub
parent 83b6dc1518 f0d3abffc5
commit c51d351694
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 21 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
css/_inlay.scss
View File

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

11
css/reload_overlay/_reload_overlay.scss
View File

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

30
react/features/overlay/components/AbstractPageReloadOverlay.js
View File

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

2
react/features/overlay/components/OverlayContainer.js
View File

@ -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.

167
react/features/overlay/components/ReloadTimer.js
View File

@ -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);