129 lines
3.1 KiB
JavaScript
129 lines
3.1 KiB
JavaScript
///////////////
|
|
// 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();
|
|
}
|