1

I'm trying to build a live feed in React, and have hit a perf issue regarding autolooping videos, as there's no API to automatically pause them when the video has gone out of view in the viewport.

Facebook have solved this fairly efficiently by (what it looks like) unmounting the video when out of view, and remounting when it comes back into view.

I'm trying to mimic this behaviour, but i'm not sure where to start. Is it even possible to unmount and remount components at will?

Does anyone have any suggestions to tackling this issue?

Plugins and code snippets definitely welcome!!

Scotty
  • 2,635
  • 6
  • 30
  • 39
  • Possible duplicate of [Pause and play video when in viewport](http://stackoverflow.com/questions/26866025/pause-and-play-video-when-in-viewport) – Ilanus Jul 02 '16 at 17:22
  • I'm more after ways of handling infinite scrolling when there are lots and lots of videos. I also want a React solution, not a jQuery solution. – Scotty Jul 02 '16 at 17:25
  • There is a library called [scrollmonitor](https://www.npmjs.com/package/scrollmonitor) that has things like entered viewport and exited viewport. That being said do you want something like that? or infinite scroll? – John Ruddell Jul 02 '16 at 19:38

1 Answers1

1

Is it even possible to unmount and remount components at will

Yes. Essentially you subscribe to the scroll position on a dom element that scrolls (which may or may not be body) and then check if you are in the viewport. If not you just toggle off the video element. Something like: 

// your render function 
render() {
   return  <div>{this.state.isInViewPort && <video/>}</div>
}
basarat
  • 261,912
  • 58
  • 460
  • 511