vers. 2.4.1

css/style.css

@@ -309,28 +309,22 @@ main {
 }
 
 iframe.contentplayer {
-  position: absolute;
+  height: calc(100vh - 393px);
-  left: 50%;
-  height: calc(100vh - 312px);
   width: 100%;
   max-width: 750px;
-  transform: translateX(-50%);
 }
 
 .footer_player {
   background: #f7b835;
   color: #2a377d;
-  position: fixed;
   z-index: 90;
-  bottom: 70px;
-  left: 50%;
-  transform: translateX(-50%);
   width: 100%;
   max-width: 750px;
   height: 100px;
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
   padding: 20px;
+  border-top: 1px solid #eee;
+  flex: 1;
+  align-content: end;
 }
 
 .footer_player>.row>.col-2>img {

data/changelog.xml

@@ -2,6 +2,15 @@
 
 <changelog>
 
+    <version>
+        <number>2.4.1</number>
+        <logs>
+            <log>Aggiornata la pagiana del player audio, per renderla più coerente con le altre pagine dell'applicazione.</log>
+            <log>Aggiunta la visualizzazione dell'artista e del brano in riproduzione.</log>
+            <log>Correzione e bugfix di problematiche varie.</log>
+        </logs>
+    </version>
+
     <version>
         <number>2.4.0</number>
         <logs>

data/radio.xml

@@ -11,6 +11,7 @@
     <stream>https://asvradiostream.asvstudios.it/radio/8000/radio.aac</stream>
     <streamhls>https://srvone.radio.asvhosting.com/hls/rdlradio/live.m3u8</streamhls>
     <contentplayer>https://www.radiodiffusionelibera.com/contentrpigplay</contentplayer>
+    <apiradio>https://srvone.radio.asvhosting.com/api/nowplaying/2</apiradio>
   </station>
 
   <station>
@@ -22,6 +23,7 @@
     <stream>https://asvradiostream.asvstudios.it/radio/8020/auto.aac</stream>
     <streamhls>https://srvone.radio.asvhosting.com/hls/radiocitta105/live.m3u8</streamhls>
     <contentplayer>https://www.radiocitta105.it/contentrpigplay</contentplayer>
+    <apiradio>https://srvone.radio.asvhosting.com/api/nowplaying/1</apiradio>
   </station>
 
   <!-- <station>

js/app.js

@@ -7,6 +7,7 @@ document.addEventListener('DOMContentLoaded', function () {
     let currentXHR = null;
     let isLoading = false;
     let loadingOverlay = null;
+    let metadataInterval = null;
 
     // WeakMap per tracciare i listener degli elementi
     const linkListeners = new WeakMap();
@@ -56,6 +57,12 @@ document.addEventListener('DOMContentLoaded', function () {
     function cleanupPlayer() {
         console.log('Pulizia player audio...');
 
+        // Stop metadata updates
+        if (metadataInterval) {
+            clearInterval(metadataInterval);
+            metadataInterval = null;
+        }
+
         // Distruggi istanza HLS
         if (hlsInstance) {
             try {
@@ -588,6 +595,55 @@ document.addEventListener('DOMContentLoaded', function () {
         // Setup Media Session
         setupMediaSession(stationName, playPauseBtn.getAttribute('data-station-slogan'), playPauseBtn.getAttribute('data-station-logo'), playIcon, pauseIcon);
 
+        // --- GESTIONE METADATI (Now Playing) ---
+        const apiUrl = playPauseBtn.getAttribute('data-api-url');
+        if (apiUrl) {
+            console.log('Starting metadata polling for:', apiUrl);
+
+            function updateMetadata() {
+                fetch(apiUrl)
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.now_playing && data.now_playing.song) {
+                            const song = data.now_playing.song;
+
+                            // Aggiorna DOM
+                            const songsEl = document.getElementById('songs');
+                            const artistEl = document.getElementById('artist');
+                            const albumArtEl = document.getElementById('albumsong');
+
+                            if (songsEl) songsEl.textContent = song.title;
+                            if (artistEl) artistEl.textContent = song.artist;
+                            if (albumArtEl && song.art) {
+                                // Evita refresh se l'immagine è la stessa
+                                if (albumArtEl.src !== song.art) {
+                                    albumArtEl.src = song.art;
+                                }
+                            }
+
+                            // Aggiorna Media Session
+                            if ('mediaSession' in navigator) {
+                                navigator.mediaSession.metadata = new MediaMetadata({
+                                    title: song.title,
+                                    artist: song.artist,
+                                    album: stationName,
+                                    artwork: [
+                                        { src: song.art || playPauseBtn.getAttribute('data-station-logo'), sizes: '512x512', type: 'image/png' }
+                                    ]
+                                });
+                            }
+                        }
+                    })
+                    .catch(err => console.error('Error fetching metadata:', err));
+            }
+
+            // Chiamata immediata
+            updateMetadata();
+
+            // Polling ogni 10 secondi
+            metadataInterval = setInterval(updateMetadata, 10000);
+        }
+
         console.log('Player System Ready with format toggle.');
     }
 

pages/page/player.php

@@ -1,67 +1,102 @@
-<?php
+<?php 
-    if($station->contentplayer == ""){
+
-        ?>
+    $station_id = (string)$station->id;
-            <style>
+    $station_name = (string)$station->name;
-                .staticpage{
+    $station_slogan = (string)$station->slogan;
-                    background: linear-gradient(45deg, #3849a8, #f7b835);
+    $station_logo = (string)$station->logo;
-                    padding: 22px 35px 10px 35px;
+    $station_stream = (string)$station->stream;
-                    display: block;
+    $station_streamhls = (string)$station->streamhls;
-                    z-index: 1;
+    $station_contentplayer = (string)$station->contentplayer;
-                    position: absolute;
+    $station_apiradio = (string)$station->apiradio;
-                    height: calc(100vh - 312px);
+
-                    color: white;
-                    text-align: center;
-                    width: 100%;
-                    max-width: 450px;
-                    left: 50%;
-                    transform: translateX(-50%);
-                }
-                .staticpage > .logo{
-                    width: 200px;
-                    border-radius: 15px;
-                    margin-bottom: 20px;
-                }
-                .staticpage > p{
-                    margin: 0;
-                }
-                .staticpage > p.titleRadio{
-                    font-weight: 600;
-                }
-            </style>
-            <div class="staticpage">
-                <img src="<?php echo $station->logo; ?>" class="logo" alt="logo radio">
-                <p class="titleRadio"><?php echo $station->name; ?></p>
-                <p class="subtitleRadio"><?php echo $station->slogan; ?></p>
-            </div>
-        <?php
-    }else{
-        ?>
-            <iframe src="<?php echo $station->contentplayer; ?>" class="contentplayer" frameborder="0"></iframe>
-        <?php
-    }
 ?>
 
-<div class="footer_player" <?php if($is_mobile){ echo "style=\"bottom: 84px;\""; } ?>>
+<div class="radio-player-container" style="background-color: #ffffff;height: calc(100% - 217px);position: absolute;left: calc(50%);display: flex;flex-direction: column;max-width: 750px;transform: translateX(-50%);width: 100%;">
-    <div class="row align-items-center">
+
-        <div class="col-2" style="width: 70px;">
+    <div class="radio-header" style="padding: 15px; border-bottom: 1px solid #eee; display: flex; align-items: center; justify-content: space-between;">
-            <img src="<?php echo $station->logo; ?>" alt="<?php echo $station->name; ?>" style="width: 60px;">
+        <div class="left-controls" style="display: flex; align-items: center;">
+            <a href="<?php echo $base_path; ?>/radio" data-page="radio" class="linkBox nav-link" style="color: #333; display: flex; align-items: center; text-decoration: none;">
+                <span class="material-icons" style="font-size: 28px;">arrow_back</span>
+            </a>
+            <span style="font-size: 18px; font-weight: 600; color: #333; margin-left: 15px;"><?php echo $station_name; ?></span>
         </div>
-        <div class="col">
+        
-            <div id="artist" style="font-weight: 700; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;"><?php echo $station->name; ?></div>
+        <?php if(!empty($station_logo)): ?>
-            <div id="playerStatus" style="text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical ;overflow: hidden;"><?php echo $station->slogan; ?></div>
+        <div class="right-controls">
+            <img src="<?php echo $station_logo; ?>" alt="Logo" style="height: 30px; width: auto;">
         </div>
-        <div class="col-auto" style="text-align: center; margin-top: 1px; padding-right: 0;">
+        <?php endif; ?>
-            <button id="formatToggleBtn" title="Cambia formato audio">
+    </div>
-                <span id="formatLabel" style="font-size: 12px;font-weight: 600;border-radius: 6px;border: 2px solid #ffffff;padding: 4px 6px;background: rgba(247, 184, 53, 0.3);color: #2a377e;">HLS</span>
+
-            </button>
+    <?php
-        </div>
+        if($station->contentplayer == ""){
-        <div class="col-2" style="text-align: center; margin-top: 1px; margin-right: 5px; width: 67px;">
+            ?>
-            <button id="playPauseBtn" data-stream-hls="<?php echo $station->streamhls; ?>" data-stream-fallback="<?php echo $station->stream; ?>" data-station-name="<?php echo htmlspecialchars($station->name); ?>" data-station-logo="<?php echo $station->logo; ?>" data-station-slogan="<?php echo htmlspecialchars($station->slogan); ?>">
+                <style>
-                <i class="material-icons play-icon" id="play-pause" style="font-size: 35px; border-radius: 10px; border: 2px solid #ffffff; padding: 4px 5px 4px 4px; margin-top: -2px; background: #f7b835; color: #2a377e;">play_arrow</i>
+                    .staticpage{
-                <i class="material-icons pause-icon" id="play-pause" style="display:none; font-size: 35px; border-radius: 10px; border: 2px solid #ffffff; padding: 4px 5px 4px 4px; margin-top: -2px; background: #f7b835; color: #2a377e;">pause</i>
+                        background: linear-gradient(45deg, #3849a8, #f7b835);
-            </button>
+                        padding: 22px 35px 10px 35px;
+                        display: block;
+                        z-index: 1;
+                        height: calc(100vh - 393px);
+                        color: white;
+                        text-align: center;
+                        width: 100%;
+                        max-width: 750px;
+                    }
+                    .staticpage > .logo{
+                        width: 200px;
+                        border-radius: 15px;
+                        margin-bottom: 20px;
+                    }
+                    .staticpage > p{
+                        margin: 0;
+                    }
+                    .staticpage > p.titleRadio{
+                        font-weight: 600;
+                    }
+                </style>
+                <div class="staticpage">
+                    <img src="<?php echo $station->logo; ?>" class="logo" alt="logo radio">
+                    <p class="titleRadio"><?php echo $station->name; ?></p>
+                    <p class="subtitleRadio"><?php echo $station->slogan; ?></p>
+                </div>
+            <?php
+        }else{
+            ?>
+                <iframe src="<?=$station_contentplayer?>" class="contentplayer" frameborder="0"></iframe>
+            <?php
+        }
+    ?>
+
+    <div class="footer_player" <?php if($is_mobile){ echo "style=\"bottom: 84px;\""; } ?>>
+        <div class="row align-items-center">
+            <div class="col-2" style="width: 70px;">
+                <img id="albumsong" src="<?php echo $station->logo; ?>" alt="<?php echo $station->name; ?>" style="width: 60px;height: 60px;">
+            </div>
+            <div class="col">
+                <div id="songs" style="font-weight: 700; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;"><?php echo $station->name; ?></div>
+                <div id="artist" style="text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical ;overflow: hidden;"><?php echo $station->slogan; ?></div>
+            </div>
+            <div class="col-auto" style="text-align: center; margin-top: 1px; padding-right: 0;">
+                <button id="formatToggleBtn" title="Cambia formato audio">
+                    <span id="formatLabel" style="font-size: 12px;font-weight: 600;border-radius: 6px;border: 2px solid #ffffff;padding: 4px 6px;background: rgba(247, 184, 53, 0.3);color: #2a377e;">HLS</span>
+                </button>
+            </div>
+            <div class="col-2" style="text-align: center; margin-top: 1px; margin-right: 5px; width: 67px;">
+                <button id="playPauseBtn" 
+                        data-stream-hls="<?php echo $station->streamhls; ?>" 
+                        data-stream-fallback="<?php echo $station->stream; ?>" 
+                        data-station-name="<?php echo htmlspecialchars($station->name); ?>" 
+                        data-station-logo="<?php echo $station->logo; ?>" 
+                        data-station-slogan="<?php echo htmlspecialchars($station->slogan); ?>"
+                        data-api-url="<?php echo $station_apiradio; ?>">
+                    <i class="material-icons play-icon" id="play-pause" style="font-size: 35px; border-radius: 10px; border: 2px solid #ffffff; padding: 4px 5px 4px 4px; margin-top: -2px; background: #f7b835; color: #2a377e;">play_arrow</i>
+                    <i class="material-icons pause-icon" id="play-pause" style="display:none; font-size: 35px; border-radius: 10px; border: 2px solid #ffffff; padding: 4px 5px 4px 4px; margin-top: -2px; background: #f7b835; color: #2a377e;">pause</i>
+                </button>
+            </div>
         </div>
     </div>
+
 </div>
 
 <audio id="hlsAudioPlayer" preload="none"></audio>