1 files changed, 91 insertions, 0 deletions
diff --git a/www/scripts/video.js b/www/scripts/video.js
new file mode 100644
index 0000000..9f32e96
--- /dev/null
+++ b/www/scripts/video.js
@@ -0,0 +1,91 @@
+const video = document.getElementById("video");
+const videoControlsProgress = document.getElementById("video-controls-progress");
+const videoControlsPlay = document.getElementById("video-controls-play");
+const videoControlsVolume = document.getElementById("video-controls-mutetoggle");
+const videoControlsMaximise = document.getElementById("video-controls-maximise");
+const videoControlsTimeCurrent = document.getElementById("video-controls-currenttime");
+const videoControlsTimeTotal = document.getElementById("video-controls-totaltime");
+
+let videoPlaying = false;
+let audioEnabled = true;
+let videoMaximised = false;
+
+function toggleVideo() {
+	if (videoPlaying) {
+		videoPlaying = false;
+		videoControlsPlay.innerHTML = `<i class="fa-solid fa-play"></i>`;
+		video.pause();
+	} else {
+		videoPlaying = true;
+		videoControlsPlay.innerHTML = `<i class="fa-solid fa-pause"></i>`;
+		video.play();
+	}
+}
+
+function videoUpdate() {
+	videoControlsProgress.value = video.currentTime / video.duration;
+	videoControlsTimeCurrent.innerHTML = secondsToFormatted(video.currentTime);
+	updateSlider();
+}
+
+function updateSlider() {
+	const value = (videoControlsProgress.value - videoControlsProgress.min) / (videoControlsProgress.max - videoControlsProgress.min) * 100;
+	videoControlsProgress.style.background = `linear-gradient(to right, var(--accent1) 0%, var(--accent2) ${value}%, #ddd ${value}%, #ddd 100%)`;
+}
+
+function seekVideo() {
+	updateSlider();
+	const time = videoControlsProgress.value * video.duration;
+	video.currentTime = time;
+}
+
+function toggleAudio() {
+	if (audioEnabled) {
+		audioEnabled = false;
+		videoControlsVolume.innerHTML = `<i class="fa-solid fa-volume-xmark"></i>`;
+		video.muted = true;
+	} else {
+		audioEnabled = true;
+		videoControlsVolume.innerHTML = `<i class="fa-solid fa-volume"></i>`;
+		video.muted = false;
+	}
+}
+
+function toggleMaximisation() {
+	if (videoMaximised) {
+		videoMaximised = false;
+		videoControlsMaximise.innerHTML = `<i class="fa-solid fa-maximize"></i>`;
+		video.exitFullscreen();
+		video.controls = false;
+	} else {
+		videoMaximised = true;
+		videoControlsMaximise.innerHTML = `<i class="fa-solid fa-minimize"></i>`;
+		video.requestFullscreen();
+		video.controls = true;
+	}
+}
+
+function secondsToFormatted(seconds) {
+	seconds = Math.round(seconds);
+	let hours = seconds / 3600;
+	let hoursMod = seconds % 3600;  // in seconds
+	let minutes = hoursMod / 60;
+	let secs = hoursMod % 60;
+	
+	if (hours >= 1) {
+		return `${Math.floor(hours)}:${Math.floor(minutes).toString().padStart(2, "0")}:${Math.floor(secs).toString().padStart(2, "0")}`;
+	} else {
+		return `${Math.floor(minutes).toString().padStart(2, "0")}:${Math.floor(secs).toString().padStart(2, "0")}`
+	}
+}
+
+videoControlsProgress.value = 0;
+updateSlider();
+video.addEventListener("loadeddata", function () {
+	videoControlsTimeTotal.innerHTML = `/${secondsToFormatted(video.duration)}`
+});
+videoControlsProgress.addEventListener("input", seekVideo);
+videoControlsPlay.addEventListener("click", toggleVideo);
+videoControlsVolume.addEventListener("click", toggleAudio);
+videoControlsMaximise.addEventListener("click", toggleMaximisation);
+video.addEventListener("timeupdate", videoUpdate);