Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-27 22:03:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

reset seekTime on window blur

Browse source
This commit is contained in:
NikolaBorislavovHristov 2018-11-12 17:01:57 +02:00
parent 14ac360ccd
commit 40433a2895
1 changed files with 24 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/routes/Player/ControlBar/ControlBar.js
View file

@ -34,27 +34,36 @@ class ControlBar extends PureComponent {
return; return;
} }
const mousemove = ({ clientX }) => { const releaseThumb = () => {
this.setState({ seekTime: this.calculateSeekTime(clientX, currentTarget) }); window.removeEventListener('mousemove', onMouseMove);
}; window.removeEventListener('mouseup', onMouseUp);
const mouseup = ({ clientX }) => { window.removeEventListener('blur', onBlur);
window.removeEventListener('mousemove', mousemove);
window.removeEventListener('mouseup', mouseup);
document.body.style['pointer-events'] = 'initial'; document.body.style['pointer-events'] = 'initial';
document.documentElement.style.cursor = 'initial'; document.documentElement.style.cursor = 'initial';
currentTarget.classList.remove(styles['active']); currentTarget.classList.remove(styles['active']);
const seekTime = this.calculateSeekTime(clientX, currentTarget); };
this.props.seek(seekTime); const onBlur = () => {
releaseThumb();
this.resetSeekTime.cancel();
this.setState({ seekTime: -1 });
};
const onMouseMove = ({ clientX }) => {
this.setState({ seekTime: this.calculateSeekTime(clientX, currentTarget) });
};
const onMouseUp = ({ clientX }) => {
releaseThumb();
this.resetSeekTime(); this.resetSeekTime();
this.props.seek(this.calculateSeekTime(clientX, currentTarget));
}; };
window.addEventListener('mousemove', mousemove); window.addEventListener('mousemove', onMouseMove);
window.addEventListener('mouseup', mouseup); window.addEventListener('mouseup', onMouseUp);
window.addEventListener('blur', onBlur);
document.body.style['pointer-events'] = 'none'; document.body.style['pointer-events'] = 'none';
document.documentElement.style.cursor = 'pointer'; document.documentElement.style.cursor = 'pointer';
currentTarget.classList.add(styles['active']); currentTarget.classList.add(styles['active']);
this.setState({ seekTime: this.calculateSeekTime(clientX, currentTarget) });
this.resetSeekTime.cancel(); this.resetSeekTime.cancel();
this.setState({ seekTime: this.calculateSeekTime(clientX, currentTarget) });
} }
renderPlayPauseButton() { renderPlayPauseButton() {
@ -92,7 +101,10 @@ class ControlBar extends PureComponent {
return ( return (
<div className={classnames(this.props.className, styles['root-container'])}> <div className={classnames(this.props.className, styles['root-container'])}>
{this.renderSeekBar()} {this.renderSeekBar()}
{this.renderPlayPauseButton()} <div className={styles['buttons-bar']}>
{this.renderPlayPauseButton()}
<div className={styles['separator']} />
</div>
</div> </div>
); );
} }