Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Change audio/video playback to stop playback when out of view (#12486)

Browse source 
Change video player to not loop, since the audio player doesn't

Change playback and mute buttons to feel snappier
This commit is contained in:
Eugen Rochko 2020-01-11 02:02:21 +01:00 • committed by GitHub
parent d1f68fb589
commit baa3db3001
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 60 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

35
app/javascript/mastodon/features/audio/index.js
View file

@ -37,15 +37,14 @@ class Audio extends React.PureComponent {
volume: 0.5,
};
// hard coded in components.scss
// any way to get ::before values programatically?
volWidth = 50;
// Hard coded in components.scss
// Any way to get ::before values programatically?
volWidth = 50;
volOffset = 70;
volHandleOffset = v => {
const offset = v * this.volWidth + this.volOffset;
return (offset > 110) ? 110 : offset;
}
@ -61,6 +60,8 @@ class Audio extends React.PureComponent {
if (this.waveform) {
this._updateWaveform();
}
window.addEventListener('scroll', this.handleScroll);
}
componentDidUpdate (prevProps) {
@ -70,6 +71,8 @@ class Audio extends React.PureComponent {
}
componentWillUnmount () {
window.removeEventListener('scroll', this.handleScroll);
if (this.wavesurfer) {
this.wavesurfer.destroy();
this.wavesurfer = null;
@ -128,16 +131,15 @@ class Audio extends React.PureComponent {
this.loaded = true;
}
this.wavesurfer.play();
this.setState({ paused: false });
this.setState({ paused: false }, () => this.wavesurfer.play());
} else {
this.wavesurfer.pause();
this.setState({ paused: true });
this.setState({ paused: true }, () => this.wavesurfer.pause());
}
}
toggleMute = () => {
this.wavesurfer.setMute(!this.state.muted);
const muted = !this.state.muted;
this.setState({ muted }, () => this.wavesurfer.setMute(muted));
}
handleVolumeMouseDown = e => {
@ -176,6 +178,19 @@ class Audio extends React.PureComponent {
}
}, 60);
handleScroll = throttle(() => {
if (!this.waveform || !this.wavesurfer) {
return;
}
const { top, height } = this.waveform.getBoundingClientRect();
const inView = (top <= (window.innerHeight || document.documentElement.clientHeight)) && (top + height >= 0);
if (!this.state.paused && !inView) {
this.setState({ paused: true }, () => this.wavesurfer.pause());
}
}, 150, { trailing: true })
render () {
const { height, intl, alt, editable } = this.props;
const { paused, muted, volume, currentTime } = this.state;