Fix non-standard behavior

assets/site.js

@@ -104,51 +104,45 @@ async function xmr_initialize_player(el) {
 	// Time
 	let playback_time = el.querySelector(".time");
 	playback_time.update = function() {
-		let duration_text = "";
+		function formatSeconds(seconds, with_ms, with_minutes, with_hour) {
-		let need_hour = false;
+			let result = [];
-		if (isNaN(media.duration)) {
+			if (isFinite(seconds) && !isNaN(seconds)) {
-			duration_text = "Error";
+				let tainted_seconds = seconds % 60;
-		} else if (!isFinite(media.duration)) {
+				let pure_seconds = Math.floor(seconds % 60);
-			duration_text = "Unknown";
+				let tainted_minutes = ((seconds - pure_seconds) / 60);
+				let pure_minutes = Math.floor(tainted_minutes % 60);
+				let pure_hours = Math.floor((tainted_minutes - pure_minutes) / 60);
+
+				result.unshift(`${pure_seconds.toString(10).padStart(2, '0')}`);
+				if (with_ms) {
+					result[0] = `${result[0]}.${Math.floor((tainted_seconds % 1) * 100).toString(10).padStart(2, '0')}`
+				}
+				if ((with_minutes === true) || ((with_minutes === undefined) && (pure_minutes > 0))) {
+					result[0] = result[0].padStart(2, '0');
+					result.unshift(`${pure_minutes.toString(10)}`);
+				}
+				if ((with_hour === true) || ((with_hour === undefined) && (pure_hours > 0))) {
+					result[0] = result[0].padStart(2, '0');
+					result.unshift(`${pure_hours.toString(10)}`);
+				}
+			}
+			return result;
+		}
+
+		let duration = formatSeconds(media.duration, true);
+		let current = formatSeconds(media.currentTime, true, duration.length >= 2, duration.length >= 3);
+		for (let idx in duration) {
+			current[idx].padStart(duration[idx].length, '0');
+		}
+
+		if (duration.length > 0) {
+			playback_time.innerText = `${current.join(':')} / ${duration.join(':')}`;
 		} else {
-			let dur = media.duration;
+			playback_time.innerText = `${current.join(':')}`;
-			let s = dur % 60;
-			let m0 = (dur - s) / 60;
-			let m = m0 % 60;
-			let h = (m0 - m) / 60;
-
-			let ss = Math.floor(s).toString().padStart(2, '0');
-			let ms = Math.floor(m).toString().padStart(2, '0');
-
-			if (h > 0) {
-				duration_text = `${h}:${ms}:${ss}`;
-				need_hour = true;
-			} else {
-				duration_text = `${ms}:${ss}`;
 		}
 	}
-
-		let current_text = "";
-		{
-			let dur = media.currentTime;
-			let s = dur % 60;
-			let m0 = (dur - s) / 60;
-			let m = m0 % 60;
-			let h = (m0 - m) / 60;
-
-			let ss = Math.floor(s).toString().padStart(2, '0');
-			let ms = Math.floor(m).toString().padStart(2, '0');
-
-			if (need_hour) {
-				current_text = `${h}:${ms}:${ss}`;
-			} else {
-				current_text = `${ms}:${ss}`;
-			}
-		}
-
-		playback_time.innerText = `${current_text} / ${duration_text}`;
-	}
 	media.addEventListener("timeupdate", () => { playback_time.update(); });
+	media.addEventListener("durationupdate", () => { playback_progress.update(); });
 	media.addEventListener("loadedmetadata", () => { playback_time.update(); });
 	playback_time.update();
 
@@ -161,9 +155,13 @@ async function xmr_initialize_player(el) {
 		playback_progress.value = media.currentTime * 100;
 	}
 	playback_progress.addEventListener("input", () => {
+		if (isFinite(media.duration)) {
 			media.currentTime = parseInt(playback_progress.value, 10) / 100;
+		}
 	});
 	media.addEventListener("timeupdate", () => { playback_progress.update(); });
+	media.addEventListener("durationupdate", () => { playback_progress.update(); });
+	media.addEventListener("loadeddata", () => { playback_progress.update(); });
 	media.addEventListener("loadedmetadata", () => { playback_progress.update(); });
 	playback_progress.update();
 
@@ -228,15 +226,20 @@ async function xmr_initialize_player(el) {
 	// Variants
 	let variant = el.querySelector(".variant");
 	variant.update = function() {
+		// Store current state and pause.
 		let paused = media.paused;
 		let muted = media.muted;
 		let volume = media.volume;
 		let time = media.currentTime;
-
 		media.pause();
-		media.currentSrc = variant.value;
+		play_pause.update();
-		media.play();
 
+		// Tell the media source to begin loading.
+		media.src = variant.value;
+		media.load();
+		media.currentTime = time;
+
+		media.addEventListener("canplay", () => {
 			media.currentTime = time;
 			media.volume = volume;
 			media.muted = muted;
@@ -247,6 +250,9 @@ async function xmr_initialize_player(el) {
 			}
 
 			play_pause.update();
+		}, {
+			"once": true
+		})
 	}
 	variant.addEventListener("input", () => { variant.update(); });
 	variant.addEventListener("value", () => { variant.update(); });