@gaulatti/giorgia 0.1.94 → 0.1.95

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gaulatti/giorgia",
   "description": "Server-side Handlebars renderer and templates for ModoItaliano pages.",
-  "version": "0.1.94",
+  "version": "0.1.95",
   "license": "MIT",
   "author": "ModoItaliano",
   "repository": {

package/src/templates/partials/headers/header-main.hbs

@@ -108,9 +108,17 @@
     to { opacity: 1; transform: translateY(0); }
   }
 
+  .radio-now-playing-swap { animation: radio-now-playing-swap 420ms ease-out; }
+
+  @keyframes radio-now-playing-swap {
+    from { opacity: 0; transform: translateY(8px) scale(0.985); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+  }
+
   @media (prefers-reduced-motion: reduce) {
     [data-radio-slide].is-active { animation: none; transform: scale(1.05); }
     .radio-weather-swap { animation: none; }
+    .radio-now-playing-swap { animation: none; }
   }
 
   @media (max-width: 639px) {
@@ -222,7 +230,7 @@
         </div>
         <img data-now-playing-artwork alt='' class='hidden h-full w-full object-cover' />
         <div class='absolute inset-x-0 bottom-0 h-[42%] bg-linear-to-t from-black/80 to-transparent'></div>
-        <div class='absolute bottom-3.75 left-3.75 right-16.25'>
+        <div data-now-playing-copy class='absolute bottom-3.75 left-3.75 right-16.25'>
           <p class='flex items-center gap-2 text-[10px] font-bold uppercase tracking-wide text-white/80'><span class='h-2 w-2 rounded-full bg-cyan-300'></span><span data-now-playing-status>En directo</span></p>
           <h2 data-now-playing-title class='radio-display mt-1 line-clamp-1 text-2xl font-semibold uppercase leading-none tracking-[0.02em] text-white'>ModoItaliano</h2>
           <p data-now-playing-artist class='radio-display mt-1 line-clamp-1 text-xl font-medium uppercase leading-none tracking-[0.02em] text-white/85'>Radio en vivo</p>

package/src/templates/partials/shell/doc-end.hbs

@@ -365,13 +365,15 @@
           var status = root.querySelector('[data-now-playing-status]');
           var title = root.querySelector('[data-now-playing-title]');
           var artist = root.querySelector('[data-now-playing-artist]');
-          if (!endpoint || !(artwork instanceof HTMLImageElement) || !(brand instanceof HTMLElement) || !(status instanceof HTMLElement) || !(title instanceof HTMLElement) || !(artist instanceof HTMLElement)) return;
+          var copy = root.querySelector('[data-now-playing-copy]');
+          if (!endpoint || !(artwork instanceof HTMLImageElement) || !(brand instanceof HTMLElement) || !(status instanceof HTMLElement) || !(title instanceof HTMLElement) || !(artist instanceof HTMLElement) || !(copy instanceof HTMLElement)) return;
 
           var fallback = {
             title: (title.textContent || '').trim() || 'ModoItaliano',
             artist: (artist.textContent || '').trim() || 'Radio en vivo',
             isPlaceholder: true
           };
+          var lastSignature = JSON.stringify([fallback.title, fallback.artist, '', true]);
 
           function setText(element, value, fallbackValue) {
             element.textContent = typeof value === 'string' && value.trim() ? value.trim() : fallbackValue;
@@ -391,11 +393,22 @@
             brand.classList.add('hidden');
           }
 
+          function animateUpdate() {
+            artwork.classList.remove('radio-now-playing-swap');
+            brand.classList.remove('radio-now-playing-swap');
+            copy.classList.remove('radio-now-playing-swap');
+            void root.offsetWidth;
+            (brand.classList.contains('hidden') ? artwork : brand).classList.add('radio-now-playing-swap');
+            copy.classList.add('radio-now-playing-swap');
+          }
+
           function applyNowPlaying(item) {
             var displayTitle = typeof item.title === 'string' && item.title.trim() ? item.title.trim() : fallback.title;
             var displayArtist = typeof item.artist === 'string' && item.artist.trim() ? item.artist.trim() : fallback.artist;
             var artworkUrl = typeof item.artworkUrl === 'string' ? item.artworkUrl.trim() : '';
             var isPlaceholder = item.isPlaceholder === true;
+            var nextSignature = JSON.stringify([displayTitle, displayArtist, artworkUrl, isPlaceholder]);
+            var changed = nextSignature !== lastSignature;
 
             setText(title, displayTitle, fallback.title);
             setText(artist, displayArtist, fallback.artist);
@@ -407,6 +420,9 @@
               showBrand();
             }
 
+            if (changed) animateUpdate();
+            lastSignature = nextSignature;
+
             window.__brokawNowPlaying = item;
             document.dispatchEvent(new CustomEvent('brokaw:now-playing', { detail: item }));
           }
@@ -438,7 +454,7 @@
 
           root.dataset.nowPlayingBound = 'true';
           fetchNowPlaying();
-          window.setInterval(fetchNowPlaying, 45000);
+          window.setInterval(fetchNowPlaying, 5000);
         }
 
         function initAllNowPlaying() {