window.addEventListener('DOMContentLoaded', (event) => {
	var video = document.getElementById('player');
	function toggleVideo() {
		if (video.paused) {
			const classList = document.querySelector('.ytp-button-play').classList;
			classList.remove('ytp-button-play');
			classList.add('ytp-button-pause');
			return video.play();
		} else {
			const classList = document.querySelector('.ytp-button-pause').classList;
			classList.remove('ytp-button-pause');
			classList.add('ytp-button-play');
			return video.pause();
		}
	}

	function updateTime() {
		v = document.querySelector('.html5-main-video');
		document.querySelector('.ytp-time-current').innerHTML =
			Math.floor(v.currentTime / 60) +
			':' +
			Math.floor(v.currentTime % 60)
				.toString()
				.padStart(2, '0');
		document.querySelector('.ytp-time-duration').innerHTML =
			Math.floor(v.duration / 60) +
			':' +
			Math.floor(v.duration % 60)
				.toString()
				.padStart(2, '0');
		document.querySelector('.ytp-play-progress').style.transform = 'scaleX(' + v.currentTime / v.duration + ')';
		document.querySelector('.html5-scrubber-button').style.left = (v.currentTime / v.duration) * 100 + '%';
	}

	function scrub(e) {
		w = document.querySelector('.ytp-progress-list').getBoundingClientRect();
		amount = (e.clientX - w.x) / w.width;
		video.currentTime = video.duration * amount;
		console.log(e);
	}

	function volume(e) {
		v = document.querySelector('.ytp-volume-slider').getBoundingClientRect();
		amount = (e.clientX - v.x) / v.width;
		video.volume = amount;
		document.querySelector('.ytp-volume-slider-foreground').style.left = amount * 51 + 'px';
		icon = document.querySelector('.ytp-button-volume');
		if (amount == 0) {
			icon.dataset.value = 'off';
		} else if (amount < 0.2) {
			icon.dataset.value = 'min';
		} else if (amount < 0.4) {
			icon.dataset.value = 'quiet';
		} else if (amount < 0.6) {
			icon.dataset.value = 'normal';
		} else if (amount < 0.8) {
			icon.dataset.value = 'loud';
		} else {
			icon.dataset.value = 'max';
		}

		// max, loud, normal, quiet, min, off
		console.log(e);
	}

	function toggleFullscreen() {
		if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement) {
			if (document.mozCancelFullScreen) {
				document.mozCancelFullScreen();
			} else if (document.cancelFullScreen) {
				document.cancelFullScreen();
			} else if (document.webkitCancelFullScreen) {
				document.webkitCancelFullScreen();
			}
		} else {
			movie = document.getElementById('movie_player');

			if (movie.requestFullscreen) {
				movie.requestFullscreen();
			} else if (movie.mozRequestFullScreen) {
				movie.mozRequestFullScreen();
			} else if (movie.webkitRequestFullscreen) {
				movie.webkitRequestFullscreen();
			}
		}
	}

	toggleVideo();
	//              document.querySelector('.ytp-button-play').addEventListener('click', () => toggleVideo());
	document.querySelector('.ytp-button-pause').addEventListener('click', () => toggleVideo());
	document.getElementById('player').addEventListener('click', () => toggleVideo());
	document.getElementById('player').addEventListener('dblclick', () => toggleFullscreen());
	document.querySelector('.html5-main-video').addEventListener('timeupdate', () => updateTime());
	document.querySelector('.ytp-progress-list').addEventListener('click', (e) => scrub(e));
	//      document.querySelector('.ytp-play-progress').addEventListener('click', (e) => scrub(e));
	document.querySelector('.ytp-volume-slider').addEventListener('click', (e) => volume(e));
	document.querySelector('.ytp-button-fullscreen-enter').addEventListener('click', () => toggleFullscreen());
});