Update zanzara.php
This commit is contained in:
parent
6593430afe
commit
bccaf8b31f
1 changed files with 422 additions and 177 deletions
599
zanzara.php
599
zanzara.php
|
|
@ -245,22 +245,35 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') {
|
|||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.random-info {
|
||||
background-color: #fff3cd;
|
||||
color: #856404;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 15px;
|
||||
.date-button {
|
||||
background-color: #4169E1 !important;
|
||||
font-weight: bold;
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
padding: 8px 20px !important;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { opacity: 0.8; }
|
||||
50% { opacity: 1; }
|
||||
100% { opacity: 0.8; }
|
||||
.date-button:hover {
|
||||
background-color: #1E90FF !important;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.episode-info {
|
||||
background-color: #e8f4f8;
|
||||
color: #2c5282;
|
||||
padding: 12px 20px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 15px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
border: 1px solid #bee3f8;
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
min-width: 400px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
input[type="text"] {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
|
|
@ -286,6 +299,7 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') {
|
|||
|
||||
/* Stili specifici dell'applicazione */
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
|
|
@ -298,6 +312,7 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') {
|
|||
|
||||
.form-group {
|
||||
margin: 20px 0;
|
||||
min-width: 600px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
|
|
@ -320,6 +335,9 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') {
|
|||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
background-color: #f5f5f5;
|
||||
max-width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.success {
|
||||
|
|
@ -337,7 +355,7 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') {
|
|||
}
|
||||
|
||||
/* PLAYER AUDIO CUSTOM SEMPLICE */
|
||||
|
||||
|
||||
/* Nascondi il player nativo */
|
||||
audio {
|
||||
display: none;
|
||||
|
|
@ -350,6 +368,7 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') {
|
|||
border-radius: 10px;
|
||||
padding: 25px;
|
||||
margin: 20px auto;
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
|
@ -362,6 +381,45 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') {
|
|||
gap: 20px;
|
||||
}
|
||||
|
||||
/* Controlli principali con navigazione */
|
||||
.main-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
/* Pulsanti di navigazione */
|
||||
.nav-btn {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background-color: #6c757d;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nav-btn:hover:not(:disabled) {
|
||||
background-color: #5a6268;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.nav-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.nav-btn svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
fill: white;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Pulsante Play/Pause */
|
||||
.play-pause-btn {
|
||||
width: 70px;
|
||||
|
|
@ -401,6 +459,22 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') {
|
|||
gap: 10px;
|
||||
}
|
||||
|
||||
/* Container dei tempi con data */
|
||||
.time-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Display del tempo */
|
||||
.time-display {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* Barra del progresso più alta */
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
|
|
@ -484,6 +558,56 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') {
|
|||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* Pulsante Share inline */
|
||||
.share-btn-inline {
|
||||
background-color: #6c757d;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
transition: all 0.3s ease;
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
.share-btn-inline:hover {
|
||||
background-color: #5a6268;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.share-btn-inline:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.share-btn-inline svg {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
/* Messaggio di conferma */
|
||||
.share-success {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #333;
|
||||
color: white;
|
||||
padding: 15px 30px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.share-success.show {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Stato buffering */
|
||||
.buffering .play-pause-btn {
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
|
|
@ -506,46 +630,7 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') {
|
|||
display: block;
|
||||
}
|
||||
|
||||
/* Stili per la navigazione */
|
||||
.navigation {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background-color: #e9ecef;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
background-color: #28a745;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.nav-button:hover:not(:disabled) {
|
||||
background-color: #218838;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.nav-button:disabled {
|
||||
background-color: #6c757d;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.current-date {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* Stili per il calendario */
|
||||
.ui-datepicker td.available a {
|
||||
|
|
@ -647,19 +732,10 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') {
|
|||
flex-direction: column;
|
||||
gap: 10px;
|
||||
align-items: stretch;
|
||||
min-width: auto; /* Rimuovo min-width su mobile */
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
padding: 12px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form-group button {
|
||||
width: 100%;
|
||||
|
|
@ -672,36 +748,26 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') {
|
|||
order: 0;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
.date-button {
|
||||
order: 1;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
.form-group button[type="button"]:not(.date-button) {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.form-group button[type="button"] {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
.episode-info {
|
||||
padding: 10px 15px;
|
||||
font-size: 14px;
|
||||
min-width: auto; /* Rimuovo min-width su mobile */
|
||||
}
|
||||
|
||||
.current-date {
|
||||
margin: 10px 0;
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
.share-btn-inline {
|
||||
padding: 5px 10px;
|
||||
font-size: 11px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.stats {
|
||||
|
|
@ -730,6 +796,20 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') {
|
|||
gap: 15px;
|
||||
}
|
||||
|
||||
.main-controls {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.nav-btn svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.play-pause-btn {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
|
|
@ -741,7 +821,7 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') {
|
|||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 36px; /* Ridotto per mobile */
|
||||
height: 36px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
|
|
@ -807,14 +887,28 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') {
|
|||
padding: 10px;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.play-pause-btn {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.play-pause-btn svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.nav-btn svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.time-display {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -828,6 +922,17 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') {
|
|||
|
||||
<main>
|
||||
<?php
|
||||
// Gestione link condiviso - se c'è un parametro date nel GET, lo uso
|
||||
if (isset($_GET['date']) && !empty($_GET['date'])) {
|
||||
$_POST['datepicker'] = $_GET['date'];
|
||||
}
|
||||
|
||||
// Salvo il timestamp se presente per usarlo nel player
|
||||
$startTime = 0;
|
||||
if (isset($_GET['t']) && is_numeric($_GET['t'])) {
|
||||
$startTime = intval($_GET['t']);
|
||||
}
|
||||
|
||||
// Gestione puntata random
|
||||
if (isset($_POST['random']) && $_POST['random'] == '1') {
|
||||
$validDates = getValidDates($config);
|
||||
|
|
@ -847,25 +952,22 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') {
|
|||
<div class="form-container">
|
||||
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="POST" id="dateForm">
|
||||
<div class="form-group">
|
||||
<button type="submit" name="random" value="1" class="random-button" title="Riproduci una puntata casuale">
|
||||
<button type="submit" name="random" value="1" class="random-button" title="Play a random episode">
|
||||
🎲 Random Play
|
||||
</button>
|
||||
<label for="datepicker">Data selezionata:</label>
|
||||
<input type="text"
|
||||
size="10"
|
||||
maxlength="8"
|
||||
<button type="button" id="selectDateBtn" class="date-button" title="Select a date">
|
||||
📅 Select Date
|
||||
</button>
|
||||
<input type="hidden"
|
||||
id="datepicker"
|
||||
name="datepicker"
|
||||
placeholder="YYYYMMDD"
|
||||
value="<?php echo htmlspecialchars($inputValue); ?>"
|
||||
autocomplete="off"
|
||||
inputmode="numeric">
|
||||
<button type="button" onclick="window.location.href=window.location.href">Reset</button>
|
||||
value="<?php echo htmlspecialchars($inputValue); ?>">
|
||||
<button type="button" onclick="window.location.href=window.location.pathname" title="Clear all and start fresh">Reset</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div id="loading" style="display: none;">
|
||||
<p>Caricamento date disponibili...</p>
|
||||
<p>Loading available dates...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -899,7 +1001,9 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') {
|
|||
|
||||
// Mostra se è una puntata random
|
||||
if (isset($_POST['random']) && $_POST['random'] == '1') {
|
||||
echo '<p class="random-info">🎲 Puntata casuale in riproduzione!</p>';
|
||||
echo '<p class="episode-info">🎲 Random episode • <strong>' . htmlspecialchars($formattedDate) . '</strong> • ' . $fileSizeMB . ' MB</p>';
|
||||
} else {
|
||||
echo '<p class="episode-info">Selected episode • <strong>' . htmlspecialchars($formattedDate) . '</strong> • ' . $fileSizeMB . ' MB</p>';
|
||||
}
|
||||
|
||||
// Audio player custom
|
||||
|
|
@ -907,10 +1011,28 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') {
|
|||
echo '<audio id="audio" preload="metadata">
|
||||
<source src="' . htmlspecialchars($paths['url']) . '" type="audio/mp3">
|
||||
</audio>';
|
||||
|
||||
|
||||
// Layout principale
|
||||
echo '<div class="player-layout">';
|
||||
|
||||
|
||||
// Controlli principali con navigazione
|
||||
echo '<div class="main-controls">';
|
||||
|
||||
// Pulsante precedente
|
||||
if ($prevDate) {
|
||||
echo '<button class="nav-btn prev-btn" id="prevBtn" data-date="' . $prevDate . '" title="Previous day">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
|
||||
</svg>
|
||||
</button>';
|
||||
} else {
|
||||
echo '<button class="nav-btn prev-btn" disabled>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
|
||||
</svg>
|
||||
</button>';
|
||||
}
|
||||
|
||||
// Pulsante Play/Pause
|
||||
echo '<button class="play-pause-btn" id="playPauseBtn" title="Play/Pause">
|
||||
<svg class="play-icon" viewBox="0 0 24 24">
|
||||
|
|
@ -920,7 +1042,24 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') {
|
|||
<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
|
||||
</svg>
|
||||
</button>';
|
||||
|
||||
|
||||
// Pulsante successivo
|
||||
if ($nextDate) {
|
||||
echo '<button class="nav-btn next-btn" id="nextBtn" data-date="' . $nextDate . '" title="Next day">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
|
||||
</svg>
|
||||
</button>';
|
||||
} else {
|
||||
echo '<button class="nav-btn next-btn" disabled>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
|
||||
</svg>
|
||||
</button>';
|
||||
}
|
||||
|
||||
echo '</div>'; // Chiude main-controls
|
||||
|
||||
// Container progresso
|
||||
echo '<div class="progress-container">';
|
||||
echo '<div class="progress-bar" id="progressBar">
|
||||
|
|
@ -928,10 +1067,15 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') {
|
|||
</div>';
|
||||
echo '<div class="time-info">';
|
||||
echo '<span class="time-display" id="currentTime">0:00</span>';
|
||||
echo '<button class="share-btn-inline" id="shareBtn" title="Share episode link">
|
||||
<svg viewBox="0 0 24 24" width="18" height="18">
|
||||
<path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/>
|
||||
</svg>
|
||||
</button>';
|
||||
echo '<span class="time-display" id="duration">0:00</span>';
|
||||
echo '</div>';
|
||||
echo '</div>';
|
||||
|
||||
|
||||
echo '</div>'; // Chiude player-layout
|
||||
echo '</div>'; // Chiude custom-audio-player
|
||||
|
||||
|
|
@ -945,10 +1089,12 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') {
|
|||
const currentTimeDisplay = document.getElementById("currentTime");
|
||||
const durationDisplay = document.getElementById("duration");
|
||||
const audioPlayer = document.getElementById("audioPlayer");
|
||||
|
||||
const prevBtn = document.getElementById("prevBtn");
|
||||
const nextBtn = document.getElementById("nextBtn");
|
||||
|
||||
let isPlaying = false;
|
||||
let isDragging = false;
|
||||
|
||||
|
||||
// Formatta il tempo
|
||||
function formatTime(seconds) {
|
||||
if (isNaN(seconds)) return "0:00";
|
||||
|
|
@ -956,28 +1102,28 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') {
|
|||
const secs = Math.floor(seconds % 60);
|
||||
return mins + ":" + (secs < 10 ? "0" : "") + secs;
|
||||
}
|
||||
|
||||
|
||||
// Funzione per aggiornare la posizione
|
||||
function updateProgress(e) {
|
||||
const rect = progressBar.getBoundingClientRect();
|
||||
let x;
|
||||
|
||||
|
||||
// Supporto per touch e mouse
|
||||
if (e.touches) {
|
||||
x = e.touches[0].clientX - rect.left;
|
||||
} else {
|
||||
x = e.clientX - rect.left;
|
||||
}
|
||||
|
||||
|
||||
const clickPercent = Math.max(0, Math.min(1, x / rect.width));
|
||||
|
||||
|
||||
if (audio.duration) {
|
||||
audio.currentTime = clickPercent * audio.duration;
|
||||
progressFill.style.width = (clickPercent * 100) + "%";
|
||||
currentTimeDisplay.textContent = formatTime(audio.currentTime);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Play/Pause
|
||||
playPauseBtn.addEventListener("click", function() {
|
||||
if (isPlaying) {
|
||||
|
|
@ -986,22 +1132,71 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') {
|
|||
audio.play();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Navigazione giorni
|
||||
if (prevBtn && !prevBtn.disabled) {
|
||||
prevBtn.addEventListener("click", function() {
|
||||
const form = document.createElement("form");
|
||||
form.method = "POST";
|
||||
form.action = "";
|
||||
const input = document.createElement("input");
|
||||
input.type = "hidden";
|
||||
input.name = "datepicker";
|
||||
input.value = this.getAttribute("data-date");
|
||||
form.appendChild(input);
|
||||
const navInput = document.createElement("input");
|
||||
navInput.type = "hidden";
|
||||
navInput.name = "navigation";
|
||||
navInput.value = "1";
|
||||
form.appendChild(navInput);
|
||||
document.body.appendChild(form);
|
||||
form.submit();
|
||||
});
|
||||
}
|
||||
|
||||
if (nextBtn && !nextBtn.disabled) {
|
||||
nextBtn.addEventListener("click", function() {
|
||||
const form = document.createElement("form");
|
||||
form.method = "POST";
|
||||
form.action = "";
|
||||
const input = document.createElement("input");
|
||||
input.type = "hidden";
|
||||
input.name = "datepicker";
|
||||
input.value = this.getAttribute("data-date");
|
||||
form.appendChild(input);
|
||||
const navInput = document.createElement("input");
|
||||
navInput.type = "hidden";
|
||||
navInput.name = "navigation";
|
||||
navInput.value = "1";
|
||||
form.appendChild(navInput);
|
||||
document.body.appendChild(form);
|
||||
form.submit();
|
||||
});
|
||||
}
|
||||
|
||||
audio.addEventListener("play", function() {
|
||||
isPlaying = true;
|
||||
audioPlayer.classList.add("playing");
|
||||
});
|
||||
|
||||
|
||||
audio.addEventListener("pause", function() {
|
||||
isPlaying = false;
|
||||
audioPlayer.classList.remove("playing");
|
||||
});
|
||||
|
||||
|
||||
// Aggiorna durata quando disponibile
|
||||
audio.addEventListener("loadedmetadata", function() {
|
||||
durationDisplay.textContent = formatTime(audio.duration);
|
||||
|
||||
// Se c\'è un timestamp di inizio, posiziona il player
|
||||
' . (isset($startTime) && $startTime > 0 ? '
|
||||
audio.currentTime = ' . $startTime . ';
|
||||
currentTimeDisplay.textContent = formatTime(' . $startTime . ');
|
||||
const startProgress = (' . $startTime . ' / audio.duration) * 100;
|
||||
progressFill.style.width = startProgress + "%";
|
||||
' : '') . '
|
||||
});
|
||||
|
||||
|
||||
// Aggiorna progresso durante la riproduzione
|
||||
audio.addEventListener("timeupdate", function() {
|
||||
if (!isDragging && audio.duration) {
|
||||
|
|
@ -1010,7 +1205,7 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') {
|
|||
currentTimeDisplay.textContent = formatTime(audio.currentTime);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Eventi Mouse
|
||||
progressBar.addEventListener("mousedown", function(e) {
|
||||
isDragging = true;
|
||||
|
|
@ -1018,20 +1213,20 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') {
|
|||
updateProgress(e);
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
|
||||
document.addEventListener("mousemove", function(e) {
|
||||
if (isDragging) {
|
||||
updateProgress(e);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
document.addEventListener("mouseup", function() {
|
||||
if (isDragging) {
|
||||
isDragging = false;
|
||||
audioPlayer.classList.remove("dragging");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Eventi Touch
|
||||
progressBar.addEventListener("touchstart", function(e) {
|
||||
isDragging = true;
|
||||
|
|
@ -1039,42 +1234,43 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') {
|
|||
updateProgress(e);
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
|
||||
document.addEventListener("touchmove", function(e) {
|
||||
if (isDragging) {
|
||||
updateProgress(e);
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
document.addEventListener("touchend", function() {
|
||||
if (isDragging) {
|
||||
isDragging = false;
|
||||
audioPlayer.classList.remove("dragging");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Click semplice sulla barra
|
||||
progressBar.addEventListener("click", function(e) {
|
||||
if (!isDragging) {
|
||||
updateProgress(e);
|
||||
}
|
||||
});
|
||||
|
||||
// Auto-play
|
||||
|
||||
// Auto-play solo se NON è una navigazione (prev/next)
|
||||
' . (!isset($_POST['navigation']) ? '
|
||||
audio.play().catch(function(error) {
|
||||
console.log("Autoplay bloccato:", error);
|
||||
});
|
||||
|
||||
console.log("Autoplay blocked:", error);
|
||||
});' : '') . '
|
||||
|
||||
// Gestione buffering
|
||||
audio.addEventListener("waiting", function() {
|
||||
audioPlayer.classList.add("buffering");
|
||||
});
|
||||
|
||||
|
||||
audio.addEventListener("canplay", function() {
|
||||
audioPlayer.classList.remove("buffering");
|
||||
});
|
||||
|
||||
|
||||
// Fine del file
|
||||
audio.addEventListener("ended", function() {
|
||||
isPlaying = false;
|
||||
|
|
@ -1082,53 +1278,106 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') {
|
|||
progressFill.style.width = "100%";
|
||||
});
|
||||
})();
|
||||
|
||||
// Gestione pulsante Share - solo quando c\'è una puntata caricata
|
||||
(function() {
|
||||
const shareBtn = document.getElementById("shareBtn");
|
||||
if (shareBtn) {
|
||||
shareBtn.addEventListener("click", function() {
|
||||
const audio = document.getElementById("audio");
|
||||
const baseUrl = window.location.origin + window.location.pathname;
|
||||
const dateValue = "' . htmlspecialchars($selectedDate) . '";
|
||||
const currentTime = Math.floor(audio.currentTime);
|
||||
let shareUrl = baseUrl + "?date=" + dateValue;
|
||||
|
||||
if (currentTime > 0) {
|
||||
shareUrl += "&t=" + currentTime;
|
||||
}
|
||||
|
||||
if (navigator.share) {
|
||||
const shareTime = currentTime > 0 ? " at " + formatTime(currentTime) : "";
|
||||
navigator.share({
|
||||
title: "LaZanzara Episode - ' . htmlspecialchars($formattedDate) . '",
|
||||
text: "Listen to LaZanzara episode from ' . htmlspecialchars($formattedDate) . '" + shareTime,
|
||||
url: shareUrl
|
||||
}).catch((error) => {
|
||||
copyToClipboard(shareUrl);
|
||||
});
|
||||
} else {
|
||||
copyToClipboard(shareUrl);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function formatTime(seconds) {
|
||||
const mins = Math.floor(seconds / 60);
|
||||
const secs = Math.floor(seconds % 60);
|
||||
return mins + ":" + (secs < 10 ? "0" : "") + secs;
|
||||
}
|
||||
|
||||
function copyToClipboard(text) {
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(text).then(function() {
|
||||
showShareSuccess("Link copied to clipboard!");
|
||||
}, function() {
|
||||
fallbackCopyToClipboard(text);
|
||||
});
|
||||
} else {
|
||||
fallbackCopyToClipboard(text);
|
||||
}
|
||||
}
|
||||
|
||||
function fallbackCopyToClipboard(text) {
|
||||
const textArea = document.createElement("textarea");
|
||||
textArea.value = text;
|
||||
textArea.style.position = "fixed";
|
||||
textArea.style.left = "-999999px";
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
try {
|
||||
document.execCommand("copy");
|
||||
showShareSuccess("Link copied to clipboard!");
|
||||
} catch (err) {
|
||||
showShareSuccess("Press Ctrl+C to copy: " + text);
|
||||
}
|
||||
document.body.removeChild(textArea);
|
||||
}
|
||||
|
||||
function showShareSuccess(message) {
|
||||
let successMsg = document.getElementById("shareSuccess");
|
||||
if (!successMsg) {
|
||||
successMsg = document.createElement("div");
|
||||
successMsg.id = "shareSuccess";
|
||||
successMsg.className = "share-success";
|
||||
document.body.appendChild(successMsg);
|
||||
}
|
||||
successMsg.textContent = message;
|
||||
successMsg.classList.add("show");
|
||||
setTimeout(function() {
|
||||
successMsg.classList.remove("show");
|
||||
}, 2000);
|
||||
}
|
||||
})();
|
||||
</script>';
|
||||
|
||||
// Navigazione dopo il player
|
||||
echo '<div class="navigation">';
|
||||
if ($prevDate) {
|
||||
echo '<form method="POST" style="display: inline;">
|
||||
<input type="hidden" name="datepicker" value="' . $prevDate . '">
|
||||
<button type="submit" class="nav-button" title="Puntata precedente">
|
||||
← ' . substr($prevDate, 6, 2) . '/' . substr($prevDate, 4, 2) . '/' . substr($prevDate, 0, 4) . '
|
||||
</button>
|
||||
</form>';
|
||||
} else {
|
||||
echo '<button class="nav-button" disabled>← Prima puntata</button>';
|
||||
}
|
||||
|
||||
echo '<span class="current-date">Data: ' . htmlspecialchars($formattedDate) . ' - ' . $fileSizeMB . ' MB</span>';
|
||||
|
||||
if ($nextDate) {
|
||||
echo '<form method="POST" style="display: inline;">
|
||||
<input type="hidden" name="datepicker" value="' . $nextDate . '">
|
||||
<button type="submit" class="nav-button" title="Puntata successiva">
|
||||
' . substr($nextDate, 6, 2) . '/' . substr($nextDate, 4, 2) . '/' . substr($nextDate, 0, 4) . ' →
|
||||
</button>
|
||||
</form>';
|
||||
} else {
|
||||
echo '<button class="nav-button" disabled>Ultima puntata →</button>';
|
||||
}
|
||||
echo '</div>';
|
||||
|
||||
// Mostra link download solo se configurato
|
||||
if ($config['show_download_link']) {
|
||||
echo '<p class="download">
|
||||
Oppure scarica direttamente:
|
||||
Or download directly:
|
||||
<a href="' . htmlspecialchars($paths['url']) . '" download>' .
|
||||
htmlspecialchars($paths['filename']) . '</a>
|
||||
</p>';
|
||||
}
|
||||
} else {
|
||||
// File non trovato
|
||||
echo '<p class="error">File non trovato per la data: ' .
|
||||
echo '<p class="error">File not found for date: ' .
|
||||
htmlspecialchars($selectedDate) . '</p>';
|
||||
}
|
||||
|
||||
echo '</div>';
|
||||
} else {
|
||||
echo '<div class="result">
|
||||
<p class="error">Data non valida. Usa il formato YYYYMMDD</p>
|
||||
<p class="error">Invalid date. Use format YYYYMMDD</p>
|
||||
</div>';
|
||||
}
|
||||
}
|
||||
|
|
@ -1141,10 +1390,10 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') {
|
|||
$lastDate = $validDates[$totalFiles - 1];
|
||||
|
||||
echo '<div class="stats">';
|
||||
echo '<h3>Statistiche archivio</h3>';
|
||||
echo '<p>File disponibili: <strong>' . $totalFiles . '</strong></p>';
|
||||
echo '<p>Prima puntata: <strong>' . substr($firstDate, 6, 2) . '/' . substr($firstDate, 4, 2) . '/' . substr($firstDate, 0, 4) . '</strong></p>';
|
||||
echo '<p>Ultima puntata: <strong>' . substr($lastDate, 6, 2) . '/' . substr($lastDate, 4, 2) . '/' . substr($lastDate, 0, 4) . '</strong></p>';
|
||||
echo '<h3>Archive Statistics</h3>';
|
||||
echo '<p>Available files: <strong>' . $totalFiles . '</strong></p>';
|
||||
echo '<p>First episode: <strong>' . substr($firstDate, 6, 2) . '/' . substr($firstDate, 4, 2) . '/' . substr($firstDate, 0, 4) . '</strong></p>';
|
||||
echo '<p>Last episode: <strong>' . substr($lastDate, 6, 2) . '/' . substr($lastDate, 4, 2) . '/' . substr($lastDate, 0, 4) . '</strong></p>';
|
||||
|
||||
// Conta file per anno
|
||||
$yearCount = [];
|
||||
|
|
@ -1157,10 +1406,10 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') {
|
|||
}
|
||||
|
||||
echo '<details>';
|
||||
echo '<summary>File per anno</summary>';
|
||||
echo '<summary>Files per year</summary>';
|
||||
echo '<ul>';
|
||||
foreach ($yearCount as $year => $count) {
|
||||
echo '<li>' . $year . ': ' . $count . ' puntate</li>';
|
||||
echo '<li>' . $year . ': ' . $count . ' episodes</li>';
|
||||
}
|
||||
echo '</ul>';
|
||||
echo '</details>';
|
||||
|
|
@ -1170,9 +1419,9 @@ if (isset($_GET['action']) && $_GET['action'] === 'get_valid_dates') {
|
|||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Indicatore scorciatoie da tastiera -->
|
||||
<!-- Keyboard shortcuts indicator -->
|
||||
<div class="shortcuts-info">
|
||||
<strong>Scorciatoie:</strong> ← → per navigare | R per random | Spazio per play/pause
|
||||
<strong>Shortcuts:</strong> ← → to navigate | R for random | Space for play/pause
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
|
|
@ -1223,21 +1472,17 @@ $(document).ready(function() {
|
|||
beforeShowDay: function(date) {
|
||||
var isAvailable = isDateAvailable(date);
|
||||
return [isAvailable, isAvailable ? 'available' : 'unavailable',
|
||||
isAvailable ? 'Disponibile' : 'Non disponibile'];
|
||||
isAvailable ? 'Available' : 'Not available'];
|
||||
},
|
||||
onSelect: function() {
|
||||
$('#dateForm').submit();
|
||||
}
|
||||
});
|
||||
|
||||
// Gestione invio con Enter nell'input
|
||||
$('#datepicker').on('keypress', function(e) {
|
||||
if (e.which === 13) { // Enter key
|
||||
e.preventDefault();
|
||||
if ($(this).val().length === 8) { // Controlla che sia nel formato YYYYMMDD
|
||||
$('#dateForm').submit();
|
||||
}
|
||||
}
|
||||
|
||||
// Gestione click sul pulsante di selezione data
|
||||
$('#selectDateBtn').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
$('#datepicker').datepicker('show');
|
||||
});
|
||||
|
||||
// Aggiungi scorciatoie da tastiera per navigazione
|
||||
|
|
@ -1278,10 +1523,10 @@ $(document).ready(function() {
|
|||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style="color: #006400;">
|
||||
🔗 Pagina ufficiale LaZanzara
|
||||
🔗 Official LaZanzara page
|
||||
</a>
|
||||
</p>
|
||||
<p>- - - powered by Gabry, Claude and me - v1.1.0 (14/09/2025) - - -</p>
|
||||
<p>- - - Powered by FreeBSD. Developed by Gabry, Claude and Gianmarco - v1.1.1 (14/09/2025) - - -</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue