diff --git a/js/meta-handler.js b/js/meta-handler.js index 3e57792..8e7b346 100644 --- a/js/meta-handler.js +++ b/js/meta-handler.js @@ -33,39 +33,40 @@ const MetaHandler = { 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'); - // 1. Alles vor dem Songtitel isolieren let currentContent = stationDisplay.innerHTML; let stationPart = currentContent.split(' ')[0].split(' ${title}`; } - // --- LAUFSCHRIFT-ÜBERPRÜFUNG --- - setTimeout(() => this.checkMarqueeOverflow(), 50); + // Der sichere Aufruf mit Arrow-Function + setTimeout(() => { + this.checkMarqueeOverflow(); + }, 150); }, checkMarqueeOverflow() { @@ -73,14 +74,17 @@ const MetaHandler = { const textElement = document.getElementById('current-station-name'); if (textElement && senderContainer) { - textElement.classList.remove('marquee-active'); + const textWidth = textElement.scrollWidth; + const availableWidth = senderContainer.offsetWidth - 30; - // Wir messen die verfügbare Breite im Container abzüglich des Paddings - const availableWidth = senderContainer.clientWidth - 20; // 20px Abzug für das seitliche Padding (15px links/rechts) - - // Wenn der Text breiter ist als der verfügbare Platz innen - if (textElement.scrollWidth > availableWidth) { - textElement.classList.add('marquee-active'); + 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'); } } }, @@ -101,9 +105,16 @@ const MetaHandler = { } const stationDisplay = document.getElementById('current-station-name'); + const senderContainer = document.getElementById('aktueller-sender'); + if (stationDisplay) { stationDisplay.classList.remove('marquee-active'); - // Hinweis: Der Inhalt wird beim Stoppen meist durch die main.js auf "Wähle einen Sender" zurückgesetzt + } + + // 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 } } };