added files

script.js

@@ -0,0 +1,128 @@
+///////////////
+// PARAMETERS //
+///////////////
+
+const queryString = window.location.search;
+const urlParams = new URLSearchParams(queryString);
+const refreshRate = parseInt(urlParams.get("refreshrate")) || 6; // Default 6 seconds
+
+// Image filename - update this if the backend changes the image path
+const IMAGE_FILENAME = "Album-Art.png";
+
+//////////////////
+// GLOBAL STATE //
+//////////////////
+
+let currentArtist = "";
+let currentTitle = "";
+let refreshInterval = null;
+
+//////////////////
+// REFRESH LOGIC //
+//////////////////
+
+/**
+ * Fetches the artist and title from text files
+ */
+async function fetchSongData() {
+	try {
+		const artistResponse = await fetch("artist.txt");
+		const titleResponse = await fetch("title.txt");
+
+		if (!artistResponse.ok || !titleResponse.ok) {
+			console.error("Failed to fetch song data");
+			return null;
+		}
+
+		const artist = (await artistResponse.text()).trim();
+		const title = (await titleResponse.text()).trim();
+
+		return { artist, title };
+	} catch (error) {
+		console.error("Error fetching song data:", error);
+		return null;
+	}
+}
+
+/**
+ * Updates the DOM elements if the song data has changed
+ */
+function updateSongDisplay(artist, title) {
+	const titleElement = document.querySelector(".song-title");
+	const artistElement = document.querySelector(".song-artist");
+
+	let trackChanged = false;
+
+	// Only update if data has actually changed
+	if (title !== currentTitle) {
+		currentTitle = title;
+		titleElement.classList.add("updating");
+		titleElement.textContent = title || "Unknown Title";
+		trackChanged = true;
+		setTimeout(() => {
+			titleElement.classList.remove("updating");
+		}, 400);
+	}
+
+	if (artist !== currentArtist) {
+		currentArtist = artist;
+		artistElement.classList.add("updating");
+		artistElement.textContent = artist || "Unknown Artist";
+		trackChanged = true;
+		setTimeout(() => {
+			artistElement.classList.remove("updating");
+		}, 400);
+	}
+
+	// Return whether track changed (to trigger image update)
+	return trackChanged;
+}
+
+/**
+ * Updates both the album art and background image with cache-busting timestamp
+ * Only called when track actually changes
+ */
+function updateAlbumArt() {
+	const albumArt = document.querySelector(".album-art");
+	const backgroundImage = document.querySelector(".background-image");
+	const timestamp = new Date().getTime();
+	const imageUrl = `${IMAGE_FILENAME}?v=${timestamp}`;
+
+	albumArt.src = imageUrl;
+	backgroundImage.src = imageUrl;
+}
+
+/**
+ * Main refresh function - fetches data and updates if changed
+ */
+async function refresh() {
+	const data = await fetchSongData();
+	if (data) {
+		const trackChanged = updateSongDisplay(data.artist, data.title);
+		// Only update images when track actually changes
+		if (trackChanged) {
+			updateAlbumArt();
+		}
+	}
+}
+
+///////////////
+// INITIALIZE //
+///////////////
+
+function init() {
+	// Load initial data immediately
+	refresh();
+
+	// Set up refresh interval based on URL parameter or default
+	refreshInterval = setInterval(refresh, refreshRate * 1000);
+
+	console.log(`Radio DJ widget initialized - refreshing every ${refreshRate}s`);
+}
+
+// Start when DOM is ready
+if (document.readyState === "loading") {
+	document.addEventListener("DOMContentLoaded", init);
+} else {
+	init();
+}