Pantalla TV del turnero: playlist de videos e imágenes en vez de un solo video

Nueva tabla turnero_tv_media (tipo, url, orden, duracion_segundos) para
soportar múltiples videos/imágenes reproducidos en secuencia y en bucle.
El video que ya estaba cargado se migró como primer ítem de la playlist.

- save_tv_media.php / delete_tv_media.php / reorder_tv_media.php
  reemplazan a save_tv_video.php (eliminado).
- configuracion.php (tab TV): subida múltiple, lista reordenable por
  arrastre, duración editable por imagen.
- display_global.php: el <video> único se reemplaza por un reproductor
  JS que recorre la playlist — video hasta 'ended', imagen por su
  duración configurada, y vuelve a empezar al terminar.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

modules/turnero/views/configuracion.php

@@ -103,6 +103,13 @@ try {
     foreach ($cfgRows as $r) { $cfg[$r['clave']] = $r['valor']; }
 } catch (\Throwable $e) { $_loadErrors[] = 'lab_config: ' . $e->getMessage(); }
 
+$tvMedia = [];
+try {
+    $tvMedia = $pdo->query(
+        "SELECT id, tipo, url, orden, duracion_segundos FROM turnero_tv_media ORDER BY orden ASC"
+    )->fetchAll(PDO::FETCH_ASSOC);
+} catch (\Throwable $e) { $_loadErrors[] = 'turnero_tv_media: ' . $e->getMessage(); }
+
 $plantillasAprobadas   = [];
 $plantillasHabilitadas = [];
 try {
@@ -1140,36 +1147,51 @@ $tab = $_GET['tab'] ?? 'lugares';
              TAB 5 — PANTALLA TV
              ════════════════════════════════════════ -->
         <?php elseif ($tab === 'tv'): ?>
-        <?php $tvVideo = $cfg['turnero_tv_video'] ?? ''; ?>
 
-        <p class="section-title"><i class="fas fa-film me-1"></i>Video de fondo / publicidad</p>
-        <p class="text-muted" style="font-size:.85rem">El video se reproduce en bucle y sin sonido como fondo en la pantalla TV del turnero. Formatos admitidos: MP4, WebM. Máximo 500 MB.</p>
+        <p class="section-title"><i class="fas fa-film me-1"></i>Playlist de la Pantalla TV</p>
+        <p class="text-muted" style="font-size:.85rem">Videos e imágenes se reproducen en bucle, uno detrás de otro, sin sonido, como fondo en la pantalla TV del turnero. Formatos: MP4, WebM, JPG, PNG, WEBP — máximo 500 MB por archivo.</p>
 
-        <!-- Vista previa actual -->
-        <div id="tv-preview-wrap" class="mb-4" <?= $tvVideo ? '' : 'style="display:none"' ?>>
-            <p class="fw-semibold small mb-2">Video actual:</p>
-            <video id="tv-preview" controls muted
-                   style="max-width:480px;width:100%;border-radius:10px;border:1px solid #e2e8f0"
-                   src="<?= htmlspecialchars($tvVideo) ?>"></video>
-            <div class="mt-2">
-                <button class="btn btn-outline-danger btn-sm" onclick="borrarTvVideo()">
-                    <i class="fas fa-trash me-1"></i>Quitar video
+        <!-- Lista actual -->
+        <div id="tv-media-list" class="mb-3 d-flex flex-column gap-2">
+            <?php foreach ($tvMedia as $m): ?>
+            <div class="tv-media-item d-flex align-items-center gap-3 p-2" data-id="<?= (int)$m['id'] ?>"
+                 style="border:1px solid #e2e8f0;border-radius:10px">
+                <i class="fas fa-grip-vertical text-muted" style="cursor:grab"></i>
+                <?php if ($m['tipo'] === 'video'): ?>
+                    <video muted style="width:90px;height:60px;object-fit:cover;border-radius:6px" src="<?= htmlspecialchars($m['url']) ?>"></video>
+                <?php else: ?>
+                    <img style="width:90px;height:60px;object-fit:cover;border-radius:6px" src="<?= htmlspecialchars($m['url']) ?>" alt="">
+                <?php endif; ?>
+                <div class="flex-grow-1">
+                    <div class="small fw-semibold"><i class="fas fa-<?= $m['tipo']==='video'?'film':'image' ?> me-1"></i><?= $m['tipo']==='video'?'Video':'Imagen' ?></div>
+                    <div class="text-muted small text-truncate" style="max-width:300px"><?= htmlspecialchars(basename($m['url'])) ?></div>
+                </div>
+                <?php if ($m['tipo'] === 'imagen'): ?>
+                <div class="d-flex align-items-center gap-1">
+                    <input type="number" min="1" class="form-control form-control-sm tv-media-dur"
+                           style="width:70px" value="<?= (int)$m['duracion_segundos'] ?>">
+                    <span class="small text-muted">seg</span>
+                </div>
+                <?php endif; ?>
+                <button class="btn btn-outline-danger btn-sm" onclick="borrarTvMedia(<?= (int)$m['id'] ?>)">
+                    <i class="fas fa-trash"></i>
                 </button>
             </div>
+            <?php endforeach; ?>
+            <?php if (!$tvMedia): ?>
+            <div class="text-muted small" id="tv-media-empty">Sin videos ni imágenes en la playlist.</div>
+            <?php endif; ?>
         </div>
 
-        <!-- Zona de subida -->
-        <div id="tv-upload-wrap" <?= $tvVideo ? 'style="display:none"' : '' ?>>
-            <label class="drop-zone" id="tv-drop" for="tv-file-input"
-                   style="display:flex;flex-direction:column;align-items:center;justify-content:center;
-                          gap:.6rem;padding:2.5rem 1rem;border:2px dashed #cbd5e1;border-radius:12px;
-                          cursor:pointer;text-align:center;transition:border-color .2s">
-                <i class="fas fa-cloud-upload-alt fa-2x text-primary"></i>
-                <span class="fw-semibold text-primary">Haz clic o arrastra tu video aquí</span>
-                <span class="text-muted small">MP4 / WebM — máx 500 MB</span>
-            </label>
-            <input type="file" id="tv-file-input" accept="video/mp4,video/webm" class="d-none">
+        <div class="mb-3">
+            <button class="btn btn-outline-primary btn-sm" onclick="document.getElementById('tv-file-input').click()">
+                <i class="fas fa-plus me-1"></i>Agregar video o imagen
+            </button>
+            <button class="btn btn-primary btn-sm" onclick="guardarOrdenTv()">
+                <i class="fas fa-save me-1"></i>Guardar orden / duración
+            </button>
         </div>
+        <input type="file" id="tv-file-input" accept="video/mp4,video/webm,image/jpeg,image/png,image/webp" class="d-none" multiple>
 
         <!-- Barra de progreso -->
         <div id="tv-progress-wrap" class="mt-3" style="display:none">
@@ -1584,28 +1606,38 @@ async function cambiarSesion(accion, sesionId) {
 }
 
 // ─────────────────────────────────────────────────────────────
-// TAB 5: PANTALLA TV
+// TAB 5: PANTALLA TV — playlist de videos e imágenes
 // ─────────────────────────────────────────────────────────────
 (function () {
-    const inp  = document.getElementById('tv-file-input');
-    const drop = document.getElementById('tv-drop');
+    const inp = document.getElementById('tv-file-input');
     if (!inp) return;
+    inp.addEventListener('change', () => {
+        Array.from(inp.files).forEach(subirTvMedia);
+        inp.value = '';
+    });
 
-    // Drag-and-drop visual
-    drop.addEventListener('dragover', e => { e.preventDefault(); drop.style.borderColor = '#3b82f6'; });
-    drop.addEventListener('dragleave', () => { drop.style.borderColor = '#cbd5e1'; });
-    drop.addEventListener('drop', e => {
-        e.preventDefault(); drop.style.borderColor = '#cbd5e1';
-        const f = e.dataTransfer.files[0];
-        if (f) subirTvVideo(f);
+    // Reordenar arrastrando (drag & drop nativo, sin librerías)
+    const list = document.getElementById('tv-media-list');
+    let dragEl = null;
+    list.addEventListener('dragstart', e => {
+        dragEl = e.target.closest('.tv-media-item');
+        e.dataTransfer.effectAllowed = 'move';
+    });
+    list.querySelectorAll('.tv-media-item').forEach(it => it.setAttribute('draggable', 'true'));
+    list.addEventListener('dragover', e => {
+        e.preventDefault();
+        const target = e.target.closest('.tv-media-item');
+        if (!target || target === dragEl) return;
+        const rect = target.getBoundingClientRect();
+        const after = (e.clientY - rect.top) > rect.height / 2;
+        list.insertBefore(dragEl, after ? target.nextSibling : target);
     });
-    inp.addEventListener('change', () => { if (inp.files[0]) subirTvVideo(inp.files[0]); });
 })();
 
-function subirTvVideo(file) {
-    const allowedMime = ['video/mp4', 'video/webm', 'video/ogg'];
-    if (!allowedMime.includes(file.type)) { toast('Solo se permiten MP4 o WebM', 'error'); return; }
-    if (file.size > 500 * 1024 * 1024)    { toast('El video supera el límite de 500 MB', 'error'); return; }
+function subirTvMedia(file) {
+    const allowedMime = ['video/mp4', 'video/webm', 'video/ogg', 'image/jpeg', 'image/png', 'image/webp'];
+    if (!allowedMime.includes(file.type)) { toast(file.name + ': formato no admitido', 'error'); return; }
+    if (file.size > 500 * 1024 * 1024)    { toast(file.name + ': supera el límite de 500 MB', 'error'); return; }
 
     const wrap = document.getElementById('tv-progress-wrap');
     const bar  = document.getElementById('tv-progress-bar');
@@ -1614,10 +1646,10 @@ function subirTvVideo(file) {
     wrap.style.display = '';
 
     const fd = new FormData();
-    fd.append('video', file);
+    fd.append('media', file);
 
     const xhr = new XMLHttpRequest();
-    xhr.open('POST', API + 'save_tv_video.php');
+    xhr.open('POST', API + 'save_tv_media.php');
 
     xhr.upload.addEventListener('progress', e => {
         if (!e.lengthComputable) return;
@@ -1631,11 +1663,8 @@ function subirTvVideo(file) {
         try {
             const json = JSON.parse(xhr.responseText);
             if (!json.ok) { toast(json.error || 'Error al subir', 'error'); return; }
-            toast('Video guardado correctamente');
-            // Mostrar preview y ocultar zona de subida
-            document.getElementById('tv-preview').src = json.url;
-            document.getElementById('tv-preview-wrap').style.display = '';
-            document.getElementById('tv-upload-wrap').style.display  = 'none';
+            toast(file.name + ' agregado a la playlist');
+            agregarItemTvMedia(json.item);
         } catch(e) { toast('Respuesta inesperada del servidor', 'error'); }
     });
 
@@ -1646,19 +1675,66 @@ function subirTvVideo(file) {
     xhr.send(fd);
 }
 
-async function borrarTvVideo() {
-    if (!confirm('¿Quitar el video de la pantalla TV?')) return;
+function agregarItemTvMedia(item) {
+    document.getElementById('tv-media-empty')?.remove();
+    const list = document.getElementById('tv-media-list');
+    const div  = document.createElement('div');
+    div.className = 'tv-media-item d-flex align-items-center gap-3 p-2';
+    div.dataset.id = item.id;
+    div.setAttribute('draggable', 'true');
+    div.style.cssText = 'border:1px solid #e2e8f0;border-radius:10px';
+    const preview = item.tipo === 'video'
+        ? `<video muted style="width:90px;height:60px;object-fit:cover;border-radius:6px" src="${item.url}"></video>`
+        : `<img style="width:90px;height:60px;object-fit:cover;border-radius:6px" src="${item.url}" alt="">`;
+    const durInput = item.tipo === 'imagen'
+        ? `<div class="d-flex align-items-center gap-1">
+               <input type="number" min="1" class="form-control form-control-sm tv-media-dur" style="width:70px" value="${item.duracion_segundos}">
+               <span class="small text-muted">seg</span>
+           </div>` : '';
+    div.innerHTML = `
+        <i class="fas fa-grip-vertical text-muted" style="cursor:grab"></i>
+        ${preview}
+        <div class="flex-grow-1">
+            <div class="small fw-semibold"><i class="fas fa-${item.tipo==='video'?'film':'image'} me-1"></i>${item.tipo==='video'?'Video':'Imagen'}</div>
+            <div class="text-muted small text-truncate" style="max-width:300px">${item.url.split('/').pop()}</div>
+        </div>
+        ${durInput}
+        <button class="btn btn-outline-danger btn-sm" onclick="borrarTvMedia(${item.id})"><i class="fas fa-trash"></i></button>`;
+    list.appendChild(div);
+}
+
+async function borrarTvMedia(id) {
+    if (!confirm('¿Quitar este elemento de la playlist?')) return;
     try {
-        const res  = await fetch(API + 'save_tv_video.php', {
+        const res  = await fetch(API + 'delete_tv_media.php', {
             method: 'POST', headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ accion: 'borrar' })
+            body: JSON.stringify({ id })
         });
         const json = await res.json();
         if (!json.ok) { toast(json.error || 'Error', 'error'); return; }
-        toast('Video eliminado');
-        document.getElementById('tv-preview-wrap').style.display = 'none';
-        document.getElementById('tv-upload-wrap').style.display  = '';
-        document.getElementById('tv-preview').src = '';
+        document.querySelector(`.tv-media-item[data-id="${id}"]`)?.remove();
+        const list = document.getElementById('tv-media-list');
+        if (!list.querySelector('.tv-media-item')) {
+            list.innerHTML = '<div class="text-muted small" id="tv-media-empty">Sin videos ni imágenes en la playlist.</div>';
+        }
+        toast('Elemento eliminado');
+    } catch(e) { toast('Error de conexión', 'error'); }
+}
+
+async function guardarOrdenTv() {
+    const items = Array.from(document.querySelectorAll('.tv-media-item')).map(el => ({
+        id: parseInt(el.dataset.id),
+        duracion_segundos: parseInt(el.querySelector('.tv-media-dur')?.value) || 8,
+    }));
+    if (!items.length) { toast('No hay elementos para guardar', 'error'); return; }
+    try {
+        const res  = await fetch(API + 'reorder_tv_media.php', {
+            method: 'POST', headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ items })
+        });
+        const json = await res.json();
+        if (!json.ok) { toast(json.error || 'Error', 'error'); return; }
+        toast('Orden y duración guardados');
     } catch(e) { toast('Error de conexión', 'error'); }
 }
 

modules/turnero/views/display_global.php

@@ -3,16 +3,21 @@ $_dispCfg = [];
 try {
     $__pdo  = Database::getInstance()->getConnection();
     $__rows = $__pdo->query(
-        "SELECT clave, valor FROM lab_config WHERE clave IN ('empresa_nombre','doc_logo_base64','doc_color','turnero_tv_video')"
+        "SELECT clave, valor FROM lab_config WHERE clave IN ('empresa_nombre','doc_logo_base64','doc_color')"
     )->fetchAll(PDO::FETCH_KEY_PAIR);
     $_dispCfg = $__rows ?: [];
 } catch (\Throwable $_) {}
 $_labNombre = htmlspecialchars($_dispCfg['empresa_nombre'] ?? 'Sistema de Turnos');
 $_labLogo   = $_dispCfg['doc_logo_base64'] ?? '';
 $_labColor  = preg_match('/^#[0-9a-fA-F]{3,8}$/', $_dispCfg['doc_color'] ?? '') ? $_dispCfg['doc_color'] : '#1565c0';
-$_tvVideo   = $_dispCfg['turnero_tv_video'] ?? '';
-if ($_tvVideo && !preg_match('#^https?://#', $_tvVideo)) { $_tvVideo = ''; }
-$_hasVideo  = (bool)$_tvVideo;
+
+$_tvPlaylist = [];
+try {
+    $_tvPlaylist = $__pdo->query(
+        "SELECT tipo, url, duracion_segundos FROM turnero_tv_media WHERE activo = 1 ORDER BY orden ASC"
+    )->fetchAll(PDO::FETCH_ASSOC);
+} catch (\Throwable $_) {}
+$_hasVideo = (bool)$_tvPlaylist;
 ?>
 <!DOCTYPE html>
 <html lang="es">
@@ -428,11 +433,7 @@ $_hasVideo  = (bool)$_tvVideo;
             <div class="pac-nombre" id="pac-nombre"></div>
         </div>
         <div class="reel-wrap <?= $_hasVideo ? 'has-video' : '' ?>" id="reel-wrap">
-            <div class="reel-inner">
-                <video autoplay muted loop playsinline>
-                    <source src="<?= htmlspecialchars($_tvVideo) ?>">
-                </video>
-            </div>
+            <div class="reel-inner" id="tv-playlist"></div>
         </div>
     </div>
 
@@ -456,6 +457,38 @@ $_hasVideo  = (bool)$_tvVideo;
 <script>
 const BASE_API = '<?= BASE_URL ?>modules/turnero/api/';
 
+/* ── Playlist TV (videos e imágenes en bucle) ── */
+const TV_PLAYLIST = <?= json_encode($_tvPlaylist, JSON_UNESCAPED_UNICODE) ?>;
+(function () {
+    const wrap = document.getElementById('tv-playlist');
+    if (!wrap || !TV_PLAYLIST.length) return;
+    let idx = 0, imgTimer = null;
+
+    function mostrar(i) {
+        clearTimeout(imgTimer);
+        wrap.innerHTML = '';
+        const item = TV_PLAYLIST[i];
+        if (item.tipo === 'video') {
+            const v = document.createElement('video');
+            v.src = item.url; v.autoplay = true; v.muted = true; v.playsInline = true;
+            v.addEventListener('ended', siguiente);
+            v.addEventListener('error', siguiente);
+            wrap.appendChild(v);
+        } else {
+            const img = document.createElement('img');
+            img.src = item.url;
+            img.style.cssText = 'width:100%;height:100%;object-fit:cover';
+            wrap.appendChild(img);
+            imgTimer = setTimeout(siguiente, Math.max(1, item.duracion_segundos || 8) * 1000);
+        }
+    }
+    function siguiente() {
+        idx = (idx + 1) % TV_PLAYLIST.length;
+        mostrar(idx);
+    }
+    mostrar(idx);
+})();
+
 function tick() {
     const d = new Date();
     document.getElementById('reloj').textContent =