From 8fea6e4be4a61cd2bfcb310166fbe6b2541b9ff4 Mon Sep 17 00:00:00 2001
From: altaf-creator <dev@altafcreator.com>
Date: Thu, 21 May 2026 20:45:15 +0800
Subject: video and blog

---
 www/scripts/blog.js          |  6 +--
 www/scripts/captcha.js       |  2 +-
 www/scripts/constants.js     |  2 +
 www/scripts/video.js         | 91 ++++++++++++++++++++++++++++++++++++++++++++
 www/scripts/videoprojects.js |  4 +-
 5 files changed, 99 insertions(+), 6 deletions(-)
 create mode 100644 www/scripts/constants.js
 create mode 100644 www/scripts/video.js

(limited to 'www/scripts')

diff --git a/www/scripts/blog.js b/www/scripts/blog.js
index 0e8fa2f..5c5ad67 100644
--- a/www/scripts/blog.js
+++ b/www/scripts/blog.js
@@ -1,10 +1,8 @@
 var evaluatedTags = "";
 const clamp = (val, min, max) => Math.min(Math.max(val, min), max)
 
-const api_url = "https://altafcreator.com"
-
 function postList(n = 0) {
-	fetch(`${api_url}/api/blogs/`, {
+	fetch(`${API_URL}/blogs/`, {
 		method: "POST",
 		headers: {
 			"Content-Type": "application/json",
@@ -47,7 +45,7 @@ function postCard(post) {
 							<div class="flex-container-normal chip-container"> 
 								${evaluatedTags}
 							</div>
-							<a href="/blog/post.html?post=${id}" class="link"><h2>${title}</h2></a>
+							<a href="/blog/${id}" class="link"><h2>${title}</h2></a>
 							<p>${date}</p>
 						</div>
 					</div>
diff --git a/www/scripts/captcha.js b/www/scripts/captcha.js
index 3ef5334..9ddc513 100644
--- a/www/scripts/captcha.js
+++ b/www/scripts/captcha.js
@@ -1,7 +1,7 @@
 const emailUl = document.getElementById("email-list")
 
 async function emailTurnstileSuccess(token) {
-	const response = await fetch("https://altafcreator.com/api/email/", {
+	const response = await fetch(`${API_URL}/email/`, {
 		method: 'POST',
 		headers: {
 			'Content-Type': 'application/json',
diff --git a/www/scripts/constants.js b/www/scripts/constants.js
new file mode 100644
index 0000000..b2b7894
--- /dev/null
+++ b/www/scripts/constants.js
@@ -0,0 +1,2 @@
+//const API_URL = "https://altafcreator.com/api"
+const API_URL = "http://localhost:9091/api"
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);
diff --git a/www/scripts/videoprojects.js b/www/scripts/videoprojects.js
index 1879474..019403f 100644
--- a/www/scripts/videoprojects.js
+++ b/www/scripts/videoprojects.js
@@ -1,6 +1,7 @@
 const playerContainer = document.getElementById("full-video-player");
 const playerVideo = document.getElementById("full-video-player-video");
 const playerCaption = document.getElementById("full-video-player-caption");
+const playerButton = document.getElementById("full-video-player-button")
 
 function closeFullPlayer() {
 	playerContainer.style.display = "none";
@@ -8,8 +9,9 @@ function closeFullPlayer() {
 	playerVideo.currentTime = 0;
 }
 
-function loadVideo(url, caption) {
+function loadVideo(url, caption, videoPath) {
 	playerContainer.style.display = "flex";
 	playerVideo.src = url;
 	playerCaption.innerHTML = caption;
+	playerButton.href = `/video/${videoPath}/`
 }
-- 
cgit v1.2.3