moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change audio/video playback to stop playback when out of view 

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2021-10-22 18:50:32 +02:00
parent 98067ae877
commit aef01ea262
1 changed files with 26 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
app/soapbox/features/video/index.js
View File

@ -139,8 +139,8 @@ class Video extends React.PureComponent {
revealed: this.props.visible !== undefined ? this.props.visible : (this.props.displayMedia !== 'hide_all' && !this.props.sensitive || this.props.displayMedia === 'show_all'), revealed: this.props.visible !== undefined ? this.props.visible : (this.props.displayMedia !== 'hide_all' && !this.props.sensitive || this.props.displayMedia === 'show_all'),
}; };
// hard coded in components.scss // Hard-coded in components.scss
// any way to get ::before values programatically? // Any way to get ::before values programatically?
volWidth = 50; volWidth = 50;
volOffset = 70; volOffset = 70;
volHandleOffset = v => { volHandleOffset = v => {
@ -263,9 +263,9 @@ class Video extends React.PureComponent {
togglePlay = () => { togglePlay = () => {
if (this.state.paused) { if (this.state.paused) {
this.video.play(); this.setState({ paused: false }, () => this.video.play());
} else { } else {
this.video.pause(); this.setState({ paused: true }, () => this.video.pause());
} }
} }
@ -282,9 +282,13 @@ class Video extends React.PureComponent {
document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange, true); document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange, true);
document.addEventListener('mozfullscreenchange', this.handleFullscreenChange, true); document.addEventListener('mozfullscreenchange', this.handleFullscreenChange, true);
document.addEventListener('MSFullscreenChange', this.handleFullscreenChange, true); document.addEventListener('MSFullscreenChange', this.handleFullscreenChange, true);
window.addEventListener('scroll', this.handleScroll);
} }
componentWillUnmount() { componentWillUnmount() {
window.removeEventListener('scroll', this.handleScroll);
document.removeEventListener('fullscreenchange', this.handleFullscreenChange, true); document.removeEventListener('fullscreenchange', this.handleFullscreenChange, true);
document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange, true); document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange, true);
document.removeEventListener('mozfullscreenchange', this.handleFullscreenChange, true); document.removeEventListener('mozfullscreenchange', this.handleFullscreenChange, true);
@ -303,6 +307,19 @@ class Video extends React.PureComponent {
} }
} }
handleScroll = throttle(() => {
if (!this.video) {
return;
}
const { top, height } = this.video.getBoundingClientRect();
const inView = (top <= (window.innerHeight || document.documentElement.clientHeight)) && (top + height >= 0);
if (!this.state.paused && !inView) {
this.setState({ paused: true }, () => this.video.pause());
}
}, 150, { trailing: true })
handleFullscreenChange = () => { handleFullscreenChange = () => {
this.setState({ fullscreen: isFullscreen() }); this.setState({ fullscreen: isFullscreen() });
} }
@ -316,8 +333,11 @@ class Video extends React.PureComponent {
} }
toggleMute = () => { toggleMute = () => {
this.video.muted = !this.video.muted; const muted = !this.video.muted;
this.setState({ muted: this.video.muted });
this.setState({ muted }, () => {
this.video.muted = muted;
});
} }
toggleReveal = () => { toggleReveal = () => {