RadioDJViewer/RadioDJViewer/script.js

(function () {
	var IMAGE_FILENAME = "Album-Art.png";
	var DEFAULT_REFRESH_RATE_MS = 1000;
	var DEFAULT_TIME_REFRESH_RATE_MS = 100;
	var currentArtist = getTextContent(".song-artist");
	var currentTitle = getTextContent(".song-title");
	var currentTime = getTextContent(".song-time");
	var refreshInterval = null;
	var timeRefreshInterval = null;
	var latestTimeRequestId = 0;
	var refreshRateMs = getRefreshRateMs();
	var timeRefreshRateMs = DEFAULT_TIME_REFRESH_RATE_MS;

	function getTextContent(selector) {
		var element = document.querySelector(selector);
		if (!element || typeof element.textContent !== "string") {
			return "";
		}
		return trimText(element.textContent);
	}

	function trimText(value) {
		return String(value || "").replace(/^\s+|\s+$/g, "");
	}

	function getRefreshRateMs() {
		var match = /(?:\?|&)refreshrate=([^&]+)/i.exec(window.location.search || "");
		var seconds = match ? parseFloat(decodeURIComponent(match[1])) : 1;
		if (!isFinite(seconds) || seconds <= 0) {
			seconds = 1;
		}
		var interval = Math.round(seconds * 1000);
		if (interval < 250) {
			interval = 250;
		}
		return interval;
	}

	function fetchText(path, fallbackValue, callback) {
		var xhr = new XMLHttpRequest();
		xhr.open("GET", path + "?v=" + new Date().getTime(), true);
		xhr.setRequestHeader("Cache-Control", "no-cache");
		xhr.onreadystatechange = function () {
			if (xhr.readyState !== 4) {
				return;
			}
			if (xhr.status >= 200 && xhr.status < 300) {
				callback(trimText(xhr.responseText));
				return;
			}
			callback(fallbackValue);
		};
		xhr.onerror = function () {
			callback(fallbackValue);
		};
		try {
			xhr.send(null);
		} catch (e) {
			callback(fallbackValue);
		}
	}

	function updateSongDisplay(data) {
		var titleElement = document.querySelector(".song-title");
		var artistElement = document.querySelector(".song-artist");
		var trackChanged = false;
		var nextTitle;
		var nextArtist;

		if (!titleElement || !artistElement || !data) {
			return false;
		}

		nextTitle = trimText(data.title || "");
		nextArtist = trimText(data.artist || "");

		if (nextTitle !== currentTitle) {
			currentTitle = nextTitle;
			titleElement.classList.add("updating");
			titleElement.textContent = currentTitle || "Unknown Title";
			trackChanged = true;
			setTimeout(function () {
				titleElement.classList.remove("updating");
			}, 400);
		}

		if (nextArtist !== currentArtist) {
			currentArtist = nextArtist;
			artistElement.classList.add("updating");
			artistElement.textContent = currentArtist || "Unknown Artist";
			trackChanged = true;
			setTimeout(function () {
				artistElement.classList.remove("updating");
			}, 400);
		}

		return trackChanged;
	}

	function updateTimeDisplay(nextTime) {
		var timeElement = document.querySelector(".song-time");
		var normalizedTime = trimText(nextTime || "No Data") || "No Data";
		if (!timeElement) {
			return;
		}
		if (normalizedTime !== currentTime) {
			currentTime = normalizedTime;
			timeElement.textContent = currentTime;
		}
	}

	function updateAlbumArt() {
		var albumArt = document.querySelector(".album-art");
		var backgroundImage = document.querySelector(".background-image");
		var imageUrl = IMAGE_FILENAME + "?v=" + new Date().getTime();
		if (!albumArt || !backgroundImage) {
			return;
		}
		albumArt.src = imageUrl;
		backgroundImage.src = imageUrl;
	}

	function setClockVisibility(visible) {
		var timeElement = document.querySelector(".song-time");
		if (!timeElement) {
			return;
		}
		timeElement.style.display = visible ? "" : "none";
	}

	function refreshMetadata() {
		fetchText("artist.txt", currentArtist || "", function (artist) {
			fetchText("title.txt", currentTitle || "", function (title) {
				fetchText("clock-visibility", "true", function (clockVisible) {
					var trackChanged = updateSongDisplay({
						artist: artist,
						title: title
					});
					setClockVisibility(String(clockVisible || "false").toLowerCase() === "true");
					if (trackChanged) {
						updateAlbumArt();
					}
				});
			});
		});
	}

	function refreshTime() {
		var requestId = latestTimeRequestId + 1;
		latestTimeRequestId = requestId;
		fetchText("time.txt", currentTime || "No Data", function (nextTime) {
			if (requestId !== latestTimeRequestId) {
				return;
			}
			updateTimeDisplay(nextTime);
		});
	}

	function init() {
		refreshMetadata();
		refreshTime();
		refreshInterval = window.setInterval(refreshMetadata, refreshRateMs);
		timeRefreshInterval = window.setInterval(refreshTime, timeRefreshRateMs);
	}

	if (document.readyState === "loading") {
		document.addEventListener("DOMContentLoaded", init);
	} else {
		init();
	}
})();