// https://stackoverflow.com/questions/123999/how-can-i-tell-if-a-dom-element-is-visible-in-the-current-viewport/15203639#15203639
function inViewport(el) {
	var r, html;
	if ( !el || 1 !== el.nodeType ) { return false; }
	html = document.documentElement;
	r = el.getBoundingClientRect();

	return ( !!r
	  && r.bottom >= 0
	  && r.right >= 0
	  && r.top <= html.clientHeight
	  && r.left <= html.clientWidth
	);

}

function loadVideo(video) {
	if(video) {
		video.classList.remove('oc-video-lazyload');
		video.setAttribute('autoplay', true);
		video.load();
	}
}

document.addEventListener('DOMContentLoaded', function() {
	var lazyload_videos = document.querySelectorAll('.oc-video-lazyload');
	var is_reduced = window.matchMedia(`(prefers-reduced-motion: reduce)`) === true || window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true;
	if(is_reduced) return;

	function updateLazyLoadVideos() {
		var updates_made = false;
		for(var i = 0; i < lazyload_videos.length; i++) {
			if(inViewport(lazyload_videos[i]) && lazyload_videos[i].offsetParent) {
				updates_made = true;
				loadVideo(lazyload_videos[i]);
			}
		}
		if(updates_made) {
			lazyload_videos = document.querySelectorAll('.oc-video-lazyload');
		}

		if(lazyload_videos.length === 0) {
			document.removeEventListener('scroll', updateLazyLoadVideos);
		}
	}

	if(lazyload_videos.length) {
		document.addEventListener('scroll', updateLazyLoadVideos);
		updateLazyLoadVideos();
	}
});