ver. 2.1.1
This commit is contained in:
root
@@ -2,6 +2,14 @@
|
||||
|
||||
<changelog>
|
||||
|
||||
<version>
|
||||
<number>2.1.1</number>
|
||||
<logs>
|
||||
<log>Corretti alcuni bug che impedivano l'accesso al player dal link esterno</log>
|
||||
<log>Correzione e bugfix di problematiche varie.</log>
|
||||
</logs>
|
||||
</version>
|
||||
|
||||
<version>
|
||||
<number>2.1.0</number>
|
||||
<logs>
|
||||
|
||||
381
js/app.js
381
js/app.js
@@ -25,12 +25,26 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
function getCurrentPageFromPath() {
|
||||
let path = window.location.pathname;
|
||||
|
||||
// Rimuovi il base path se presente
|
||||
if (BASE_PATH && path.startsWith(BASE_PATH)) {
|
||||
path = path.substring(BASE_PATH.length);
|
||||
}
|
||||
|
||||
// Rimuovi slash iniziali e finali
|
||||
path = path.replace(/^\/|\/$/g, '');
|
||||
|
||||
// IMPORTANTE: Se il path è vuoto o è solo "index.php", controlla il parametro redirect
|
||||
if (!path || path === '' || path === 'index.php') {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const redirect = urlParams.get('redirect');
|
||||
|
||||
if (redirect) {
|
||||
console.log('📍 Trovato parametro redirect:', redirect);
|
||||
return redirect;
|
||||
}
|
||||
}
|
||||
|
||||
console.log('📍 Path rilevato:', path || 'home');
|
||||
return path || 'home';
|
||||
}
|
||||
|
||||
@@ -191,20 +205,29 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
* Aggiorna la navigazione attiva
|
||||
*/
|
||||
function updateActiveNavigation(page) {
|
||||
console.log('Aggiornamento navigazione per pagina:', page); // Debug
|
||||
|
||||
const navLinks = document.querySelectorAll('.navLink');
|
||||
navLinks.forEach(link => {
|
||||
link.classList.remove('active');
|
||||
|
||||
const linkPage = link.getAttribute('data-page');
|
||||
|
||||
// Log di debug per vedere i confronti
|
||||
console.log('Confronto:', linkPage, 'con', page);
|
||||
|
||||
if (linkPage === page) {
|
||||
link.classList.add('active');
|
||||
console.log('✓ Match esatto:', linkPage);
|
||||
} else if (page.startsWith('play/') && linkPage === 'radio') {
|
||||
link.classList.add('active');
|
||||
console.log('✓ Match play/ -> radio');
|
||||
} else if (page.startsWith('playtv/') && linkPage === 'tv') {
|
||||
link.classList.add('active');
|
||||
console.log('✓ Match playtv/ -> tv');
|
||||
} else if (page.startsWith('page/') && linkPage === page) {
|
||||
link.classList.add('active');
|
||||
console.log('✓ Match page/');
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -284,286 +307,230 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
/**
|
||||
* Inizializza il player audio con gestione HLS migliorata
|
||||
*/
|
||||
|
||||
function initializePlayer() {
|
||||
console.log('Inizializzazione player audio...');
|
||||
|
||||
// Pulisci eventuali istanze precedenti
|
||||
cleanupPlayer();
|
||||
|
||||
const playPauseBtn = document.getElementById('playPauseBtn');
|
||||
const playIcon = document.querySelector('.play-icon');
|
||||
const pauseIcon = document.querySelector('.pause-icon');
|
||||
const playerStatus = document.getElementById('playerStatus');
|
||||
const artistElement = document.getElementById('artist');
|
||||
|
||||
if (!playPauseBtn) {
|
||||
console.error('Pulsante play/pause non trovato');
|
||||
return;
|
||||
}
|
||||
|
||||
const playIcon = document.querySelector('.play-icon');
|
||||
const pauseIcon = document.querySelector('.pause-icon');
|
||||
const hlsUrl = playPauseBtn.getAttribute('data-stream-hls');
|
||||
const fallbackUrl = playPauseBtn.getAttribute('data-stream-fallback');
|
||||
// Pulisci il player precedente
|
||||
cleanupPlayer();
|
||||
|
||||
// Ottieni il nuovo audio player dal DOM
|
||||
audioPlayer = document.getElementById('hlsAudioPlayer');
|
||||
|
||||
if (!audioPlayer) {
|
||||
console.error('Elemento audio non trovato');
|
||||
return;
|
||||
}
|
||||
|
||||
const streamHLS = playPauseBtn.getAttribute('data-stream-hls');
|
||||
const streamFallback = playPauseBtn.getAttribute('data-stream-fallback');
|
||||
const stationName = playPauseBtn.getAttribute('data-station-name');
|
||||
const stationSlogan = playPauseBtn.getAttribute('data-station-slogan');
|
||||
const stationLogo = playPauseBtn.getAttribute('data-station-logo');
|
||||
const statusElement = document.getElementById('playerStatus');
|
||||
|
||||
console.log('Stream HLS:', streamHLS);
|
||||
console.log('Stream Fallback:', streamFallback);
|
||||
console.log('Stazione:', stationName);
|
||||
console.log('URL HLS:', hlsUrl);
|
||||
console.log('URL Fallback:', fallbackUrl);
|
||||
|
||||
// Setup Media Session
|
||||
setupMediaSession(stationName, stationSlogan, stationLogo, playIcon, pauseIcon);
|
||||
|
||||
// Ottieni riferimento al player audio
|
||||
audioPlayer = document.getElementById('hlsAudioPlayer');
|
||||
if (!audioPlayer) {
|
||||
console.error('Elemento audio player non trovato nel DOM');
|
||||
return;
|
||||
}
|
||||
audioPlayer.preload = 'none';
|
||||
let isPlaying = false;
|
||||
let streamType = 'hls'; // 'hls' o 'direct'
|
||||
|
||||
/**
|
||||
* Aggiorna lo stato visualizzato
|
||||
* Inizializza HLS stream
|
||||
*/
|
||||
function updateStatus(msg, isError = false) {
|
||||
console.log('Status:', msg);
|
||||
if (statusElement) {
|
||||
statusElement.textContent = msg;
|
||||
statusElement.className = 'station-status' + (isError ? ' error' : '');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Verifica supporto HLS nativo (Safari)
|
||||
*/
|
||||
function canPlayHLS() {
|
||||
const video = document.createElement('video');
|
||||
return video.canPlayType('application/vnd.apple.mpegurl') !== '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup HLS.js con gestione errori robusta
|
||||
*/
|
||||
function setupHLS() {
|
||||
if (!window.Hls || !Hls.isSupported()) {
|
||||
console.log('HLS.js non disponibile o non supportato');
|
||||
function initHLSStream() {
|
||||
if (!window.Hls) {
|
||||
console.error('HLS.js non caricato');
|
||||
return false;
|
||||
}
|
||||
|
||||
console.log('Utilizzo HLS.js per lo streaming');
|
||||
updateStatus('Caricamento stream...');
|
||||
if (Hls.isSupported()) {
|
||||
console.log('HLS supportato - uso HLS.js');
|
||||
|
||||
const hlsConfig = {
|
||||
hlsInstance = new Hls({
|
||||
debug: false,
|
||||
enableWorker: true,
|
||||
lowLatencyMode: true,
|
||||
maxBufferLength: 30,
|
||||
maxMaxBufferLength: 60,
|
||||
maxBufferSize: 60 * 1000 * 1000,
|
||||
manifestLoadingTimeOut: 10000,
|
||||
manifestLoadingMaxRetry: 3,
|
||||
manifestLoadingRetryDelay: 500,
|
||||
levelLoadingTimeOut: 10000,
|
||||
levelLoadingMaxRetry: 4,
|
||||
fragLoadingTimeOut: 20000,
|
||||
fragLoadingMaxRetry: 6
|
||||
};
|
||||
backBufferLength: 90
|
||||
});
|
||||
|
||||
hlsInstance = new Hls(hlsConfig);
|
||||
|
||||
let networkErrorCount = 0;
|
||||
let mediaErrorCount = 0;
|
||||
const MAX_NETWORK_ERRORS = 3;
|
||||
const MAX_MEDIA_ERRORS = 2;
|
||||
|
||||
hlsInstance.loadSource(hlsUrl);
|
||||
hlsInstance.loadSource(streamHLS);
|
||||
hlsInstance.attachMedia(audioPlayer);
|
||||
|
||||
hlsInstance.on(Hls.Events.MANIFEST_PARSED, function () {
|
||||
console.log('Manifest HLS caricato con successo');
|
||||
updateStatus('Pronto per la riproduzione');
|
||||
networkErrorCount = 0;
|
||||
mediaErrorCount = 0;
|
||||
console.log('Manifest HLS caricato');
|
||||
audioPlayer.play().then(() => {
|
||||
console.log('Riproduzione HLS avviata');
|
||||
updatePlayState(true);
|
||||
}).catch(err => {
|
||||
console.error('Errore avvio riproduzione HLS:', err);
|
||||
tryFallbackStream();
|
||||
});
|
||||
});
|
||||
|
||||
hlsInstance.on(Hls.Events.ERROR, function (event, data) {
|
||||
console.error('Errore HLS:', data.type, data.details);
|
||||
|
||||
if (data.fatal) {
|
||||
switch (data.type) {
|
||||
case Hls.ErrorTypes.NETWORK_ERROR:
|
||||
networkErrorCount++;
|
||||
console.log(`Errore di rete ${networkErrorCount}/${MAX_NETWORK_ERRORS}`);
|
||||
|
||||
if (networkErrorCount < MAX_NETWORK_ERRORS) {
|
||||
updateStatus('Riconnessione in corso...');
|
||||
// Backoff esponenziale
|
||||
setTimeout(() => {
|
||||
console.log('Tentativo di riconnessione...');
|
||||
hlsInstance.startLoad();
|
||||
}, 1000 * networkErrorCount);
|
||||
} else {
|
||||
console.error('Troppi errori di rete, utilizzo stream fallback');
|
||||
updateStatus('Utilizzo stream alternativo...', true);
|
||||
hlsInstance.destroy();
|
||||
hlsInstance = null;
|
||||
useFallback();
|
||||
}
|
||||
console.log('Errore di rete, tentativo fallback...');
|
||||
tryFallbackStream();
|
||||
break;
|
||||
|
||||
case Hls.ErrorTypes.MEDIA_ERROR:
|
||||
mediaErrorCount++;
|
||||
console.log(`Errore media ${mediaErrorCount}/${MAX_MEDIA_ERRORS}`);
|
||||
|
||||
if (mediaErrorCount < MAX_MEDIA_ERRORS) {
|
||||
updateStatus('Recupero errore media...');
|
||||
console.log('Errore media, tentativo recupero...');
|
||||
hlsInstance.recoverMediaError();
|
||||
} else {
|
||||
console.error('Troppi errori media, utilizzo stream fallback');
|
||||
updateStatus('Utilizzo stream alternativo...', true);
|
||||
hlsInstance.destroy();
|
||||
hlsInstance = null;
|
||||
useFallback();
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
console.error('Errore fatale non recuperabile:', data.details);
|
||||
updateStatus('Stream non disponibile', true);
|
||||
hlsInstance.destroy();
|
||||
hlsInstance = null;
|
||||
useFallback();
|
||||
console.log('Errore fatale, tentativo fallback...');
|
||||
tryFallbackStream();
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
// Errori non fatali
|
||||
console.warn('Errore HLS non fatale:', data.details);
|
||||
}
|
||||
});
|
||||
|
||||
return true;
|
||||
} else if (audioPlayer.canPlayType('application/vnd.apple.mpegurl')) {
|
||||
console.log('HLS nativo supportato');
|
||||
audioPlayer.src = streamHLS;
|
||||
audioPlayer.play().then(() => {
|
||||
console.log('Riproduzione HLS nativa avviata');
|
||||
updatePlayState(true);
|
||||
}).catch(err => {
|
||||
console.error('Errore HLS nativo:', err);
|
||||
tryFallbackStream();
|
||||
});
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Utilizza stream fallback MP3
|
||||
* Usa stream diretto come fallback
|
||||
*/
|
||||
function useFallback() {
|
||||
console.log('Utilizzo stream fallback MP3:', fallbackUrl);
|
||||
if (fallbackUrl) {
|
||||
try {
|
||||
audioPlayer.src = fallbackUrl;
|
||||
audioPlayer.load();
|
||||
updateStatus('Pronto (MP3)');
|
||||
} catch (e) {
|
||||
console.error('Errore nel caricamento del fallback:', e);
|
||||
updateStatus('Stream non disponibile', true);
|
||||
}
|
||||
} else {
|
||||
console.error('Nessuno stream fallback disponibile');
|
||||
updateStatus('Stream non disponibile', true);
|
||||
}
|
||||
}
|
||||
function tryFallbackStream() {
|
||||
console.log('Tentativo stream fallback:', streamFallback);
|
||||
|
||||
// Inizializza lo streaming
|
||||
if (hlsUrl) {
|
||||
if (canPlayHLS()) {
|
||||
console.log('Utilizzo supporto HLS nativo (Safari)');
|
||||
audioPlayer.src = hlsUrl;
|
||||
updateStatus('Pronto');
|
||||
} else if (!setupHLS()) {
|
||||
useFallback();
|
||||
}
|
||||
} else {
|
||||
useFallback();
|
||||
}
|
||||
|
||||
// Event handler per il pulsante play/pause
|
||||
playPauseBtn.addEventListener('click', function() {
|
||||
if (audioPlayer.paused) {
|
||||
updateStatus('Connessione allo stream...');
|
||||
|
||||
audioPlayer.play()
|
||||
.then(() => {
|
||||
playIcon.style.display = 'none';
|
||||
pauseIcon.style.display = 'block';
|
||||
updateStatus('In riproduzione');
|
||||
updateMediaSessionPlaybackState('playing');
|
||||
console.log('Riproduzione avviata');
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Errore nella riproduzione:', error);
|
||||
updateStatus('Errore riproduzione', true);
|
||||
updateMediaSessionPlaybackState('paused');
|
||||
|
||||
// Tentativo con fallback se HLS fallisce
|
||||
if (hlsInstance && fallbackUrl) {
|
||||
console.log('Tentativo con stream fallback...');
|
||||
if (hlsInstance) {
|
||||
hlsInstance.destroy();
|
||||
hlsInstance = null;
|
||||
useFallback();
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
audioPlayer.play().catch(e => {
|
||||
console.error('Anche il fallback è fallito:', e);
|
||||
alert('Impossibile riprodurre lo stream audio. Verifica la tua connessione e riprova.');
|
||||
});
|
||||
}, 500);
|
||||
} else {
|
||||
alert('Impossibile riprodurre lo stream audio. Verifica la tua connessione e riprova.');
|
||||
streamType = 'direct';
|
||||
audioPlayer.src = streamFallback;
|
||||
audioPlayer.load();
|
||||
|
||||
audioPlayer.play().then(() => {
|
||||
console.log('Riproduzione stream diretto avviata');
|
||||
updatePlayState(true);
|
||||
}).catch(err => {
|
||||
console.error('Errore stream diretto:', err);
|
||||
updatePlayState(false);
|
||||
if (playerStatus) {
|
||||
playerStatus.textContent = 'Errore di riproduzione';
|
||||
}
|
||||
});
|
||||
} else {
|
||||
audioPlayer.pause();
|
||||
playIcon.style.display = 'block';
|
||||
pauseIcon.style.display = 'none';
|
||||
updateStatus('In pausa');
|
||||
updateMediaSessionPlaybackState('paused');
|
||||
console.log('Riproduzione in pausa');
|
||||
}
|
||||
});
|
||||
|
||||
// Event listeners per sincronizzazione UI e Media Session
|
||||
audioPlayer.addEventListener('play', function() {
|
||||
updateMediaSessionPlaybackState('playing');
|
||||
updateStatus('In riproduzione');
|
||||
/**
|
||||
* Aggiorna stato visuale play/pause
|
||||
*/
|
||||
function updatePlayState(playing) {
|
||||
isPlaying = playing;
|
||||
|
||||
if (playing) {
|
||||
playIcon.style.display = 'none';
|
||||
pauseIcon.style.display = 'block';
|
||||
pauseIcon.style.display = 'inline-block';
|
||||
if (playerStatus) {
|
||||
playerStatus.textContent = 'In riproduzione...';
|
||||
}
|
||||
} else {
|
||||
playIcon.style.display = 'inline-block';
|
||||
pauseIcon.style.display = 'none';
|
||||
if (playerStatus) {
|
||||
playerStatus.textContent = stationSlogan || 'In pausa';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gestione click play/pause
|
||||
*/
|
||||
playPauseBtn.addEventListener('click', function () {
|
||||
if (!audioPlayer) return;
|
||||
|
||||
if (isPlaying) {
|
||||
// Pausa
|
||||
audioPlayer.pause();
|
||||
updatePlayState(false);
|
||||
console.log('Riproduzione in pausa');
|
||||
} else {
|
||||
// Play
|
||||
if (!audioPlayer.src && !hlsInstance) {
|
||||
// Prima riproduzione - inizializza lo stream
|
||||
if (streamHLS && !initHLSStream()) {
|
||||
// Se HLS fallisce, usa direttamente il fallback
|
||||
tryFallbackStream();
|
||||
}
|
||||
} else {
|
||||
// Riprendi riproduzione
|
||||
audioPlayer.play().then(() => {
|
||||
updatePlayState(true);
|
||||
console.log('Riproduzione ripresa');
|
||||
}).catch(err => {
|
||||
console.error('Errore ripresa riproduzione:', err);
|
||||
updatePlayState(false);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Event listeners audio player
|
||||
*/
|
||||
audioPlayer.addEventListener('play', function () {
|
||||
updatePlayState(true);
|
||||
});
|
||||
|
||||
audioPlayer.addEventListener('pause', function () {
|
||||
updateMediaSessionPlaybackState('paused');
|
||||
updateStatus('In pausa');
|
||||
playIcon.style.display = 'block';
|
||||
pauseIcon.style.display = 'none';
|
||||
});
|
||||
|
||||
audioPlayer.addEventListener('ended', function() {
|
||||
playIcon.style.display = 'block';
|
||||
pauseIcon.style.display = 'none';
|
||||
updateStatus('Terminato');
|
||||
updateMediaSessionPlaybackState('paused');
|
||||
updatePlayState(false);
|
||||
});
|
||||
|
||||
audioPlayer.addEventListener('error', function (e) {
|
||||
playIcon.style.display = 'block';
|
||||
pauseIcon.style.display = 'none';
|
||||
updateStatus('Errore stream', true);
|
||||
updateMediaSessionPlaybackState('paused');
|
||||
console.error('Errore audio player:', e);
|
||||
alert('Si è verificato un errore durante la riproduzione. Riprova più tardi.');
|
||||
updatePlayState(false);
|
||||
if (playerStatus) {
|
||||
playerStatus.textContent = 'Errore di riproduzione';
|
||||
}
|
||||
});
|
||||
|
||||
audioPlayer.addEventListener('waiting', () => {
|
||||
updateStatus('Buffering...');
|
||||
audioPlayer.addEventListener('waiting', function () {
|
||||
if (playerStatus) {
|
||||
playerStatus.textContent = 'Buffering...';
|
||||
}
|
||||
});
|
||||
|
||||
audioPlayer.addEventListener('playing', () => {
|
||||
updateStatus('In riproduzione');
|
||||
audioPlayer.addEventListener('playing', function () {
|
||||
if (playerStatus) {
|
||||
playerStatus.textContent = 'In riproduzione...';
|
||||
}
|
||||
});
|
||||
|
||||
audioPlayer.addEventListener('stalled', () => {
|
||||
console.warn('Stream stalled');
|
||||
updateStatus('Connessione lenta...');
|
||||
});
|
||||
// Setup Media Session
|
||||
setupMediaSession(stationName, stationSlogan, stationLogo, playIcon, pauseIcon);
|
||||
|
||||
console.log('Player audio inizializzato correttamente');
|
||||
console.log('Player audio inizializzato');
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,3 +1,8 @@
|
||||
<?php
|
||||
// Debug: verifica valori delle variabili (rimuovi dopo aver risolto)
|
||||
// echo "<!-- DEBUG - Page: " . htmlspecialchars($page) . " | Param: " . htmlspecialchars($param) . " -->\n";
|
||||
?>
|
||||
|
||||
<div class="header">
|
||||
<div class="logo-section">
|
||||
<img src="<?=$base_path?>/img/RpiGroupPlayWHITE.png" alt="Logo">
|
||||
@@ -94,5 +99,5 @@
|
||||
<a href="<?php echo $base_path; ?>/page/policy-privacy" data-page="page/policy-privacy" class="navLink">Policy Privacy</a> •
|
||||
<a href="<?php echo $base_path; ?>/page/changelog" data-page="page/changelog" class="navLink">Changelog</a>
|
||||
</div>
|
||||
<div class="copyright-section" <?php if($is_mobile){ ?> style="padding: 10px 0 25px;" <? } ?>>© 2025 RPIGroup • Versione: <?php echo $version_app; ?></div>
|
||||
<div class="copyright-section" <?php if($is_mobile){ ?> style="padding: 10px 0 25px;" <?php } ?>>© 2025 RPIGroup • Versione: <?php echo $version_app; ?></div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user