123 lines
No EOL
4.3 KiB
JavaScript
123 lines
No EOL
4.3 KiB
JavaScript
/**
|
|
* meta-handler.js
|
|
* Verwaltet das Abrufen und Anzeigen von Stream-Metadaten (Songtitel)
|
|
*/
|
|
|
|
const MetaHandler = {
|
|
proxyPath: 'php/metadata.php',
|
|
updateInterval: 20000,
|
|
intervalId: null,
|
|
proxyActive: false,
|
|
|
|
async init() {
|
|
try {
|
|
const response = await fetch(this.proxyPath, { method: 'HEAD' });
|
|
this.proxyActive = response.ok;
|
|
} catch (e) {
|
|
this.proxyActive = false;
|
|
}
|
|
},
|
|
|
|
async fetchTitle(streamUrl) {
|
|
if (!this.proxyActive || !streamUrl) return;
|
|
try {
|
|
const res = await fetch(`${this.proxyPath}?url=${encodeURIComponent(streamUrl)}`);
|
|
const data = await res.json();
|
|
if (data && data.title) {
|
|
this.updateUI(data.title);
|
|
}
|
|
} catch (e) {
|
|
console.error("Metadaten-Fehler:", e);
|
|
}
|
|
},
|
|
|
|
updateUI(title) {
|
|
const stationDisplay = document.getElementById('current-station-name');
|
|
const senderContainer = document.getElementById('aktueller-sender');
|
|
if (!stationDisplay) return;
|
|
|
|
// 1. ALLES zurücksetzen - radikal
|
|
stationDisplay.classList.remove('marquee-active');
|
|
if (senderContainer) {
|
|
senderContainer.classList.remove('has-marquee');
|
|
}
|
|
|
|
// Reset für saubere Neumessung
|
|
stationDisplay.classList.remove('marquee-active');
|
|
if (senderContainer) senderContainer.classList.remove('has-marquee');
|
|
|
|
let currentContent = stationDisplay.innerHTML;
|
|
let stationPart = currentContent.split(' ')[0].split(' <i class="fa-solid fa-music"')[0].trim();
|
|
|
|
const tempDiv = document.createElement("div");
|
|
tempDiv.innerHTML = stationPart;
|
|
const stationNameOnly = tempDiv.textContent.trim();
|
|
|
|
const cleanTitle = title.toLowerCase().trim();
|
|
const cleanStation = stationNameOnly.toLowerCase();
|
|
const isErrorTitle = cleanTitle.includes('error code:') || cleanTitle.includes('internal server error') || cleanTitle.includes('500 error');
|
|
|
|
if (cleanTitle === cleanStation || cleanTitle.includes(cleanStation) || title.includes('0848') || isErrorTitle) {
|
|
stationDisplay.innerHTML = stationPart;
|
|
} else {
|
|
stationDisplay.innerHTML = `${stationPart} <i class="fa-solid fa-music"></i> ${title}`;
|
|
}
|
|
|
|
// Der sichere Aufruf mit Arrow-Function
|
|
setTimeout(() => {
|
|
this.checkMarqueeOverflow();
|
|
}, 150);
|
|
},
|
|
|
|
checkMarqueeOverflow() {
|
|
const senderContainer = document.getElementById('aktueller-sender');
|
|
const textElement = document.getElementById('current-station-name');
|
|
|
|
if (textElement && senderContainer) {
|
|
const textWidth = textElement.scrollWidth;
|
|
const availableWidth = senderContainer.offsetWidth - 30;
|
|
|
|
if (textWidth > availableWidth) {
|
|
senderContainer.classList.add('has-marquee'); // Container links bündig machen
|
|
setTimeout(() => {
|
|
textElement.classList.add('marquee-active'); // Animation starten
|
|
}, 50);
|
|
} else {
|
|
textElement.classList.remove('marquee-active');
|
|
senderContainer.classList.remove('has-marquee');
|
|
}
|
|
}
|
|
},
|
|
|
|
start(streamUrl) {
|
|
this.stop();
|
|
this.fetchTitle(streamUrl);
|
|
|
|
this.intervalId = setInterval(() => {
|
|
this.fetchTitle(streamUrl);
|
|
}, this.updateInterval);
|
|
},
|
|
|
|
stop() {
|
|
if (this.intervalId) {
|
|
clearInterval(this.intervalId);
|
|
this.intervalId = null;
|
|
}
|
|
|
|
const stationDisplay = document.getElementById('current-station-name');
|
|
const senderContainer = document.getElementById('aktueller-sender');
|
|
|
|
if (stationDisplay) {
|
|
stationDisplay.classList.remove('marquee-active');
|
|
}
|
|
|
|
// NEU: Auch den Container wieder in den Urzustand (zentriert) versetzen
|
|
if (senderContainer) {
|
|
senderContainer.classList.remove('has-marquee');
|
|
senderContainer.style.justifyContent = ''; // Falls ein manueller Style gesetzt wurde
|
|
}
|
|
}
|
|
};
|
|
|
|
window.MetaHandler = MetaHandler;
|
|
MetaHandler.init(); |