asvstudiosapps/rpigroupplay
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

vers. 2.4.1

Browse Source
This commit is contained in:
Alex Speaker
2026-02-07 01:06:06 +01:00
parent 5b3e05726b
commit 2cdd1cb29b
5 changed files with 164 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
css/style.css
View File

@@ -309,28 +309,22 @@ main {
}
iframe.contentplayer {
position: absolute;
left: 50%;
height: calc(100vh - 312px);
height: calc(100vh - 393px);
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 {

9
data/changelog.xml
View File

@@ -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>

2
data/radio.xml
View File

@@ -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>

56
js/app.js
View File

@@ -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.');
}

59
pages/page/player.php
View File

@@ -1,4 +1,34 @@
<?php
$station_id = (string)$station->id;
$station_name = (string)$station->name;
$station_slogan = (string)$station->slogan;
$station_logo = (string)$station->logo;
$station_stream = (string)$station->stream;
$station_streamhls = (string)$station->streamhls;
$station_contentplayer = (string)$station->contentplayer;
$station_apiradio = (string)$station->apiradio;
?>
<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="radio-header" style="padding: 15px; border-bottom: 1px solid #eee; display: flex; align-items: center; justify-content: space-between;">
<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>
<?php if(!empty($station_logo)): ?>
<div class="right-controls">
<img src="<?php echo $station_logo; ?>" alt="Logo" style="height: 30px; width: auto;">
</div>
<?php endif; ?>
</div>
<?php
if($station->contentplayer == ""){
?>
<style>
@@ -7,14 +37,11 @@
padding: 22px 35px 10px 35px;
display: block;
z-index: 1;
position: absolute;
height: calc(100vh - 312px);
height: calc(100vh - 393px);
color: white;
text-align: center;
width: 100%;
max-width: 450px;
left: 50%;
transform: translateX(-50%);
max-width: 750px;
}
.staticpage > .logo{
width: 200px;
@@ -36,19 +63,19 @@
<?php
}else{
?>
<iframe src="<?php echo $station->contentplayer; ?>" class="contentplayer" frameborder="0"></iframe>
<iframe src="<?=$station_contentplayer?>" class="contentplayer" frameborder="0"></iframe>
<?php
}
?>
?>
<div class="footer_player" <?php if($is_mobile){ echo "style=\"bottom: 84px;\""; } ?>>
<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 src="<?php echo $station->logo; ?>" alt="<?php echo $station->name; ?>" style="width: 60px;">
<img id="albumsong" src="<?php echo $station->logo; ?>" alt="<?php echo $station->name; ?>" style="width: 60px;height: 60px;">
</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>
<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 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">
@@ -56,12 +83,20 @@
</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); ?>">
<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>