File: C:/laragon/www/dropbymatte/player.php
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DropByMatte • Player</title>
<style>
/* IL TUO CSS IDENTICO - non tocco */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
background: #000;
color: #fff;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.container { max-width: 500px; width: 100%; text-align: center; }
h1 {
font-size: clamp(2.2rem, 6vw, 3.6rem);
font-weight: 600;
margin-bottom: 8px;
letter-spacing: -0.02em;
background: red;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.input-group {
margin-bottom: 32px;
}
.input-group input {
width: 100%;
padding: 20px 24px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 16px;
color: #fff;
font-size: 17px;
backdrop-filter: blur(20px);
}
.player-section {
display: none;
background: rgba(255,255,255,0.06);
border-radius: 24px;
padding: 48px 32px;
backdrop-filter: blur(30px);
border: 1px solid rgba(255,255,255,0.1);
}
.filename {
font-size: clamp(1.4rem, 4vw, 2.2rem);
font-weight: 500;
margin-bottom: 12px;
opacity: 0.95;
word-break: break-word;
}
.filesize {
color: rgba(255,255,255,0.5);
font-size: 16px;
margin-bottom: 32px;
}
#waveform {
margin-bottom: 32px;
}
.controls {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 32px;
}
.controls button {
padding: 12px 20px;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 16px;
color: #fff;
font-size: 17px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(20px);
}
.controls button:hover {
background: rgba(255,255,255,0.2);
transform: translateY(-2px);
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.btn {
width: 100%;
padding: 20px;
margin: 8px 0;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 16px;
color: #fff;
font-size: 17px;
font-weight: 500;
text-decoration: none;
display: block;
transition: all 0.3s ease;
backdrop-filter: blur(20px);
}
.btn:hover {
background: rgba(255,255,255,0.2);
transform: translateY(-2px);
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.btn-primary {
background: red;
margin-top: 16px;
}
.debug {
background: rgba(255,0,0,0.1);
padding: 20px;
border-radius: 12px;
margin-top: 20px;
font-family: monospace;
font-size: 14px;
}
@media (max-width: 480px) {
.player-section { padding: 32px 24px; }
}
</style>
<script src="https://unpkg.com/wavesurfer.js"></script>
</head>
<body>
<div class="container">
<h1>DropByMatte</h1> <br><br>
<div class="input-group" id="password-section">
<input type="password" id="file-password" placeholder="Password del file">
<button class="btn btn-primary" onclick="checkPassword()">Apri Audio</button>
</div>
<div id="player-section" class="player-section">
<div class="filename" id="filename"></div>
<div class="filesize" id="filesize"></div>
<div id="waveform"></div>
<div class="controls">
<button id="play-pause-btn">▶️</button>
</div>
<button id="download-btn" class="btn" onclick="forceDownload()">⬇️ Scarica File</button>
</div>
</div>
<script>
let wavesurfer;
const urlParams = new URLSearchParams(window.location.search);
const fileId = urlParams.get('id');
console.log('File ID:', fileId);
async function checkPassword() {
const password = document.getElementById('file-password').value;
if (!password || !fileId) {
alert('❌ ID file e password richiesti');
return;
}
try {
console.log('Verifico:', {id: fileId, password});
const res = await fetch(`verify.php?id=${encodeURIComponent(fileId)}&password=${encodeURIComponent(password)}`);
const result = await res.json();
console.log('Verify result:', result);
if (result.success) {
document.getElementById('password-section').style.display = 'none';
document.getElementById('player-section').style.display = 'block';
document.getElementById('filename').textContent = result.filename;
document.getElementById('filesize').textContent = result.filesize;
// 🔥 FIX 1: Usa STREAM PROXY invece di /uploads/ diretto (bloccato .htaccess)
const streamUrl = `stream.php?id=${fileId}&password=${encodeURIComponent(password)}`;
if (!wavesurfer) {
wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'rgba(255,0,0,0.6)',
progressColor: 'red',
cursorColor: 'white',
height: 100,
responsive: true
});
wavesurfer.on('finish', () => {
document.getElementById('play-pause-btn').textContent = '▶️';
});
}
wavesurfer.load(streamUrl); // ✅ Proxy PHP (no 404)
document.getElementById('play-pause-btn').textContent = '▶️';
document.getElementById('play-pause-btn').onclick = () => {
if (wavesurfer.isPlaying()) {
wavesurfer.pause();
document.getElementById('play-pause-btn').textContent = '▶️';
} else {
wavesurfer.play();
document.getElementById('play-pause-btn').textContent = '⏸️';
}
};
} else {
alert('❌ Password errata');
}
} catch (e) {
console.error('Errore:', e);
alert('❌ Errore server');
}
}
// 🔥 FIX 2: Download già perfetto (usa download.php proxy)
async function forceDownload() {
const password = document.getElementById('file-password').value;
if (!password) {
alert('❌ Inserisci prima la password');
return;
}
try {
const response = await fetch(`download.php?id=${fileId}&password=${encodeURIComponent(password)}`);
if (response.ok) {
const blob = await response.blob();
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = document.getElementById('filename').textContent || 'audio.wav';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
} else {
alert('❌ Errore download (404? Controlla download.php)');
}
} catch (e) {
alert('❌ Errore: ' + e.message);
}
}
// Debug section invariata
if (urlParams.get('debug') === '1') {
document.getElementById('password-section').style.display = 'none';
document.getElementById('player-section').style.display = 'block';
document.getElementById('filename').textContent = 'TEST';
const audioUrl = '/uploads/test.mp3';
if (!wavesurfer) {
wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'rgba(255,0,0,0.6)',
progressColor: 'red',
cursorColor: 'white',
height: 100,
responsive: true
});
wavesurfer.on('finish', () => {
document.getElementById('play-pause-btn').textContent = '▶️';
});
}
wavesurfer.load(audioUrl);
}
document.getElementById('file-password').addEventListener('keypress', e => {
if (e.key === 'Enter') checkPassword();
});
</script>
</body>
</html>