Merge pull request #22 from umonaca/fix-background-audio-video

Fix background audio & video

Author: doubanius

app/javascript/mastodon/components/scrollable_list.js

@@ -212,13 +212,10 @@ export default class ScrollableList extends PureComponent {
   }
 
   attachIntersectionObserver () {
-    let nodeOptions = {
+    this.intersectionObserverWrapper.connect({
       root: this.node,
       rootMargin: '300% 0px',
-    };
-
-    this.intersectionObserverWrapper
-      .connect(this.props.bindToDocument ? {} : nodeOptions);
+    });
   }
 
   detachIntersectionObserver () {

app/javascript/mastodon/features/audio/index.js

@@ -60,8 +60,6 @@ class Audio extends React.PureComponent {
     if (this.waveform) {
       this._updateWaveform();
     }
-
-    window.addEventListener('scroll', this.handleScroll);
   }
 
   componentDidUpdate (prevProps) {
@@ -71,8 +69,6 @@ class Audio extends React.PureComponent {
   }
 
   componentWillUnmount () {
-    window.removeEventListener('scroll', this.handleScroll);
-
     if (this.wavesurfer) {
       this.wavesurfer.destroy();
       this.wavesurfer = null;
@@ -178,19 +174,6 @@ 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;

app/javascript/mastodon/features/video/index.js

@@ -277,16 +277,12 @@ class Video extends React.PureComponent {
     document.addEventListener('mozfullscreenchange', this.handleFullscreenChange, true);
     document.addEventListener('MSFullscreenChange', this.handleFullscreenChange, true);
 
-    window.addEventListener('scroll', this.handleScroll);
-
     if (this.props.blurhash) {
       this._decode();
     }
   }
 
   componentWillUnmount () {
-    window.removeEventListener('scroll', this.handleScroll);
-
     document.removeEventListener('fullscreenchange', this.handleFullscreenChange, true);
     document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange, true);
     document.removeEventListener('mozfullscreenchange', this.handleFullscreenChange, true);
@@ -323,19 +319,6 @@ 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 = () => {
     this.setState({ fullscreen: isFullscreen() });
   }