RD5 GOLD v14.0 - FINAL BOSS

<?php
// tv.php - RD5 TV CON MARCA DE AGUA, RELOJ, PROGRESO, CONTRASTE Y FULLSCREEN
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>RD5 TV</title>
    <style>
        html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: #000; overflow: hidden; font-family: 'Courier New', Courier, monospace; }
        #screen { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; background: #000; }
        
        #screen img, #screen video { 
            width: 100%; height: 100%; object-fit: contain; 
            transition: filter 0.1s ease; 
        }
        
        #watermark {
            position: fixed; top: 20px; right: 30px;
            color: rgba(0, 255, 136, 0.6);
            font-size: 24px; font-weight: bold; text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
            z-index: 200; pointer-events: none; letter-spacing: 2px;
        }

#ui { 
            position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); 
            background: rgba(10, 10, 10, 0.9); padding: 12px 25px; border-radius: 6px; 
            display: flex; align-items: center; gap: 18px; opacity: 0; transition: opacity 0.4s ease; z-index: 100;
            border: 1px solid #333; box-shadow: 0 0 20px rgba(0,0,0,0.8);
        }
        
        /* Esta es la regla clave: el hover siempre manda */
        body:hover #ui { opacity: 1 !important; }

#progress-container {
            width: 180px; height: 10px; background: #222; border: 1px solid #444;
            cursor: pointer; position: relative; overflow: hidden;
        }
        #progress-bar { width: 0%; height: 100%; background: #0f8; transition: width 0.1s linear; }

#clock {
            color: #0f8; font-size: 14px; font-weight: bold; min-width: 80px;
            border-left: 1px solid #444; padding-left: 15px; text-align: center;
        }

.btn {
            background: #222; border: 1px solid #444; color: #0f8; padding: 8px 14px; 
            font-size: 11px; font-weight: bold; cursor: pointer; text-transform: uppercase;
        }
        .btn:hover { background: #0f8; color: #000; }
        .btn-pause-active { color: #ff4444; border-color: #ff4444; }
        .btn-fs-active { color: #fff; border-color: #fff; }

.control-group { display: flex; flex-direction: column; align-items: center; gap: 2px; }
        .label-ui { color: #0f8; font-size: 9px; text-transform: uppercase; }

input[type=range] { cursor: pointer; width: 60px; accent-color: #0f8; }
        #volNum, #conNum { color: #0f8; font-weight: bold; min-width: 35px; font-size: 11px; text-align: center; }
        #msg-inicio { color: #0f8; font-size: 18px; cursor: pointer; border: 1px solid #0f8; padding: 15px; }
    </style>
</head>
<body>

<div id="screen" onclick="comenzar()">
    <div id="msg-inicio"> [ HACER CLICK EN ESTE CUADRO PARA INICIAR ] </div>
</div>

<div id="ui">
    <button class="btn" id="btnPlayPause" onclick="togglePlay()">PAUSA</button>
    <button class="btn" id="btnNext" onclick="saltarSiguiente()">SIGUIENTE</button>
    
    <button class="btn" id="btnFS" onclick="toggleFullScreen()">FULL</button>

function updateClock() {
    const now = new Date();
    document.getElementById('clock').innerText = now.toTimeString().split(' ')[0];
}
setInterval(updateClock, 1000);

function actualizarBarra() {
    if (mediaActual && mediaActual.duration) {
        const p = (mediaActual.currentTime / mediaActual.duration) * 100;
        document.getElementById('progress-bar').style.width = p + "%";
    }
}
setInterval(actualizarBarra, 500);

function buscar(e) {
    if (mediaActual && mediaActual.duration) {
        const rect = document.getElementById('progress-container').getBoundingClientRect();
        mediaActual.currentTime = ((e.clientX - rect.left) / rect.width) * mediaActual.duration;
    }
}

async function actualizarLista() {
    try {
        const res = await fetch('index.php?get_list=1');
        const data = await res.json();
        if (data && data.length > 0) playlist = data;
    } catch (e) { console.error("Error cargando lista"); }
}

async function comenzar() {
    document.getElementById('msg-inicio').style.display = 'none';
    await actualizarLista();
    reproducir();
}

function saltarSiguiente() {
    clearTimeout(imageTimeout);
    currentIndex++;
    reproducir();
}

function aplicarFiltros(elemento) {
    if (elemento) {
        elemento.style.filter = `contrast(${currentContrast}%)`;
    }
}

function ajustarContraste(v) {
    currentContrast = v;
    document.getElementById('conNum').innerText = v + '%';
    const el = document.querySelector('#screen video, #screen img');
    aplicarFiltros(el);
}

async function reproducir() {
    if (playlist.length === 0) {
        document.getElementById('screen').innerHTML = "<div style='color:#0f8'>CONECTANDO...</div>";
        setTimeout(comenzar, 3000);
        return;
    }

if (currentIndex >= playlist.length) currentIndex = 0;
    const archivo = playlist[currentIndex];
    const sc = document.getElementById('screen');
    sc.innerHTML = "";
    
    if (archivo.match(/\.(mp4|webm|mp3|wav)$/i)) {
        mediaActual = document.createElement(archivo.match(/\.(mp3|wav)$/i) ? "audio" : "video");
        mediaActual.src = archivo;
        mediaActual.volume = currentVolume;
        mediaActual.autoplay = true;
        aplicarFiltros(mediaActual);
        mediaActual.onended = () => saltarSiguiente();
        sc.appendChild(mediaActual);
    } else {
        mediaActual = null;
        const img = document.createElement('img');
        img.src = archivo;
        aplicarFiltros(img);
        sc.appendChild(img);
        imageTimeout = setTimeout(() => { if (!isPaused) saltarSiguiente(); }, 8000); 
    }
}

function ajustarVolumen(v) {
    currentVolume = v;
    if (mediaActual) mediaActual.volume = v;
    document.getElementById('volNum').innerText = Math.round(v * 100) + '%';
}

setInterval(actualizarLista, 120000);
</script>
</body>
</html>