From 6254e45e8f2b3420c9f4b40030851c8adf9cc099 Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Mon, 3 Aug 2026 14:33:05 -0500
Subject: [PATCH] =?UTF-8?q?Pantalla=20TV=20del=20turnero:=20playlist=20de?=
 =?UTF-8?q?=20videos=20e=20im=C3=A1genes=20en=20vez=20de=20un=20solo=20vid?=
 =?UTF-8?q?eo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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/api/delete_tv_media.php  |  45 ++++++
 modules/turnero/api/reorder_tv_media.php |  37 +++++
 modules/turnero/api/save_tv_media.php    |  99 ++++++++++++
 modules/turnero/api/save_tv_video.php    | 127 ----------------
 modules/turnero/views/configuracion.php  | 182 ++++++++++++++++-------
 modules/turnero/views/display_global.php |  51 +++++--
 6 files changed, 352 insertions(+), 189 deletions(-)
 create mode 100644 modules/turnero/api/delete_tv_media.php
 create mode 100644 modules/turnero/api/reorder_tv_media.php
 create mode 100644 modules/turnero/api/save_tv_media.php
 delete mode 100644 modules/turnero/api/save_tv_video.php

diff --git a/modules/turnero/api/delete_tv_media.php b/modules/turnero/api/delete_tv_media.php
new file mode 100644
index 0000000..e82ffc3
--- /dev/null
+++ b/modules/turnero/api/delete_tv_media.php
@@ -0,0 +1,45 @@
+<?php
+/**
+ * modules/turnero/api/delete_tv_media.php
+ * Elimina un ítem de la playlist de la Pantalla TV (archivo + fila).
+ * POST JSON: { id: int }
+ */
+
+require_once __DIR__ . '/../../../config/config.php';
+
+header('Content-Type: application/json; charset=utf-8');
+
+if (!isUserLoggedIn()) {
+    http_response_code(401);
+    echo json_encode(['ok' => false, 'error' => 'No autenticado']);
+    exit;
+}
+
+$pdo  = Database::getInstance()->getConnection();
+$body = json_decode(file_get_contents('php://input'), true) ?? [];
+$id   = (int)($body['id'] ?? 0);
+
+if (!$id) {
+    echo json_encode(['ok' => false, 'error' => 'id requerido']);
+    exit;
+}
+
+$stmt = $pdo->prepare("SELECT url FROM turnero_tv_media WHERE id = ?");
+$stmt->execute([$id]);
+$row = $stmt->fetch(PDO::FETCH_ASSOC);
+
+if (!$row) {
+    echo json_encode(['ok' => false, 'error' => 'No encontrado']);
+    exit;
+}
+
+$uploadDir = dirname(__DIR__, 3) . '/uploads/turnero/tv_media/';
+$filename  = basename(parse_url($row['url'], PHP_URL_PATH));
+$filepath  = $uploadDir . $filename;
+if (is_file($filepath)) {
+    @unlink($filepath);
+}
+
+$pdo->prepare("DELETE FROM turnero_tv_media WHERE id = ?")->execute([$id]);
+
+echo json_encode(['ok' => true]);
diff --git a/modules/turnero/api/reorder_tv_media.php b/modules/turnero/api/reorder_tv_media.php
new file mode 100644
index 0000000..4c426fc
--- /dev/null
+++ b/modules/turnero/api/reorder_tv_media.php
@@ -0,0 +1,37 @@
+<?php
+/**
+ * modules/turnero/api/reorder_tv_media.php
+ * Guarda el orden y la duración (para imágenes) de la playlist de la Pantalla TV.
+ * POST JSON: { items: [{ id, orden, duracion_segundos }, ...] }
+ */
+
+require_once __DIR__ . '/../../../config/config.php';
+
+header('Content-Type: application/json; charset=utf-8');
+
+if (!isUserLoggedIn()) {
+    http_response_code(401);
+    echo json_encode(['ok' => false, 'error' => 'No autenticado']);
+    exit;
+}
+
+$pdo   = Database::getInstance()->getConnection();
+$body  = json_decode(file_get_contents('php://input'), true) ?? [];
+$items = is_array($body['items'] ?? null) ? $body['items'] : [];
+
+if (!$items) {
+    echo json_encode(['ok' => false, 'error' => 'items requerido']);
+    exit;
+}
+
+$stmt = $pdo->prepare(
+    "UPDATE turnero_tv_media SET orden = ?, duracion_segundos = ? WHERE id = ?"
+);
+foreach ($items as $i => $it) {
+    $id  = (int)($it['id'] ?? 0);
+    if (!$id) continue;
+    $dur = max(1, (int)($it['duracion_segundos'] ?? 8));
+    $stmt->execute([$i, $dur, $id]);
+}
+
+echo json_encode(['ok' => true]);
diff --git a/modules/turnero/api/save_tv_media.php b/modules/turnero/api/save_tv_media.php
new file mode 100644
index 0000000..76c2051
--- /dev/null
+++ b/modules/turnero/api/save_tv_media.php
@@ -0,0 +1,99 @@
+<?php
+/**
+ * modules/turnero/api/save_tv_media.php
+ * Sube un video o imagen a la playlist de la Pantalla TV del turnero.
+ * POST multipart: campo "media" → sube y agrega al final de la lista
+ * Guarda el archivo en /uploads/turnero/tv_media/ y una fila en turnero_tv_media.
+ */
+
+require_once __DIR__ . '/../../../config/config.php';
+
+header('Content-Type: application/json; charset=utf-8');
+
+if (!isUserLoggedIn()) {
+    http_response_code(401);
+    echo json_encode(['ok' => false, 'error' => 'No autenticado']);
+    exit;
+}
+
+$pdo        = Database::getInstance()->getConnection();
+$uploadDir  = dirname(__DIR__, 3) . '/uploads/turnero/tv_media/';
+$publicBase = rtrim(BASE_URL, '/') . '/uploads/turnero/tv_media/';
+
+if (!is_dir($uploadDir) && !mkdir($uploadDir, 0755, true)) {
+    echo json_encode(['ok' => false, 'error' => 'No se pudo crear el directorio de uploads']);
+    exit;
+}
+
+if (!isset($_FILES['media'])) {
+    echo json_encode(['ok' => false, 'error' => 'No se recibió ningún archivo']);
+    exit;
+}
+
+$file = $_FILES['media'];
+
+if ($file['error'] !== UPLOAD_ERR_OK) {
+    $errores = [
+        UPLOAD_ERR_INI_SIZE   => 'El archivo supera upload_max_filesize en php.ini',
+        UPLOAD_ERR_FORM_SIZE  => 'El archivo supera MAX_FILE_SIZE del formulario',
+        UPLOAD_ERR_PARTIAL    => 'El archivo se subió parcialmente',
+        UPLOAD_ERR_NO_FILE    => 'No se seleccionó ningún archivo',
+        UPLOAD_ERR_NO_TMP_DIR => 'Falta la carpeta temporal',
+        UPLOAD_ERR_CANT_WRITE => 'Error al escribir el archivo',
+    ];
+    echo json_encode(['ok' => false, 'error' => $errores[$file['error']] ?? 'Error de subida desconocido']);
+    exit;
+}
+
+$maxBytes = 500 * 1024 * 1024;
+if ($file['size'] > $maxBytes) {
+    echo json_encode(['ok' => false, 'error' => 'El archivo supera el límite de 500 MB']);
+    exit;
+}
+
+$mimeMap = [
+    'video/mp4'  => ['video', 'mp4'],
+    'video/webm' => ['video', 'webm'],
+    'video/ogg'  => ['video', 'ogv'],
+    'image/jpeg' => ['imagen', 'jpg'],
+    'image/png'  => ['imagen', 'png'],
+    'image/webp' => ['imagen', 'webp'],
+];
+
+$finfo = new finfo(FILEINFO_MIME_TYPE);
+$mime  = $finfo->file($file['tmp_name']);
+if (!isset($mimeMap[$mime])) {
+    echo json_encode(['ok' => false, 'error' => 'Formato no admitido. Usa MP4, WebM, JPG, PNG o WEBP']);
+    exit;
+}
+
+[$tipo, $ext] = $mimeMap[$mime];
+
+$destFilename = uniqid('tv_', true) . '.' . $ext;
+$destPath     = $uploadDir . $destFilename;
+
+if (!move_uploaded_file($file['tmp_name'], $destPath)) {
+    echo json_encode(['ok' => false, 'error' => 'No se pudo guardar el archivo']);
+    exit;
+}
+
+$publicUrl = $publicBase . $destFilename;
+
+$maxOrden = (int)($pdo->query("SELECT COALESCE(MAX(orden),-1) FROM turnero_tv_media")->fetchColumn());
+
+$stmt = $pdo->prepare(
+    "INSERT INTO turnero_tv_media (tipo, url, orden, duracion_segundos, activo)
+     VALUES (?, ?, ?, 8, 1)"
+);
+$stmt->execute([$tipo, $publicUrl, $maxOrden + 1]);
+
+echo json_encode([
+    'ok' => true,
+    'item' => [
+        'id' => (int)$pdo->lastInsertId(),
+        'tipo' => $tipo,
+        'url' => $publicUrl,
+        'orden' => $maxOrden + 1,
+        'duracion_segundos' => 8,
+    ],
+]);
diff --git a/modules/turnero/api/save_tv_video.php b/modules/turnero/api/save_tv_video.php
deleted file mode 100644
index 4a62644..0000000
--- a/modules/turnero/api/save_tv_video.php
+++ /dev/null
@@ -1,127 +0,0 @@
-<?php
-/**
- * modules/turnero/api/save_tv_video.php
- * Sube o elimina el video de fondo de la Pantalla TV del turnero.
- *
- * POST multipart: campo "video"          → sube y guarda
- * POST JSON:      { "accion": "borrar" } → elimina el video actual
- *
- * Guarda el archivo en /uploads/turnero/tv_video.{ext}
- * y registra la URL en lab_config (clave: turnero_tv_video).
- */
-
-require_once __DIR__ . '/../../../config/config.php';
-
-header('Content-Type: application/json; charset=utf-8');
-
-// Solo administradores autenticados
-if (!isUserLoggedIn()) {
-    http_response_code(401);
-    echo json_encode(['ok' => false, 'error' => 'No autenticado']);
-    exit;
-}
-
-$pdo        = Database::getInstance()->getConnection();
-$uploadDir  = dirname(__DIR__, 3) . '/uploads/turnero/';
-$publicBase = rtrim(BASE_URL, '/') . '/uploads/turnero/';
-
-// ── Crear carpeta si no existe ────────────────────────────────
-if (!is_dir($uploadDir)) {
-    if (!mkdir($uploadDir, 0755, true)) {
-        echo json_encode(['ok' => false, 'error' => 'No se pudo crear el directorio de uploads']);
-        exit;
-    }
-}
-
-// ── Acción: borrar ────────────────────────────────────────────
-$rawBody = file_get_contents('php://input');
-$bodyJson = $rawBody ? json_decode($rawBody, true) : null;
-
-if (isset($bodyJson['accion']) && $bodyJson['accion'] === 'borrar') {
-    // Obtener ruta guardada
-    $stmt = $pdo->prepare("SELECT valor FROM lab_config WHERE clave = 'turnero_tv_video' LIMIT 1");
-    $stmt->execute();
-    $row = $stmt->fetch(PDO::FETCH_ASSOC);
-
-    if ($row && $row['valor']) {
-        // Derivar nombre de archivo de la URL guardada
-        $filename = basename(parse_url($row['valor'], PHP_URL_PATH));
-        $filepath = $uploadDir . $filename;
-        if ($filepath && is_file($filepath)) {
-            @unlink($filepath);
-        }
-    }
-
-    // Borrar de la BD
-    $pdo->prepare("DELETE FROM lab_config WHERE clave = 'turnero_tv_video'")->execute();
-    echo json_encode(['ok' => true]);
-    exit;
-}
-
-// ── Acción: subir ──────────────────────────────────────────────
-if (!isset($_FILES['video'])) {
-    echo json_encode(['ok' => false, 'error' => 'No se recibió ningún archivo']);
-    exit;
-}
-
-$file = $_FILES['video'];
-
-if ($file['error'] !== UPLOAD_ERR_OK) {
-    $errores = [
-        UPLOAD_ERR_INI_SIZE   => 'El archivo supera upload_max_filesize en php.ini',
-        UPLOAD_ERR_FORM_SIZE  => 'El archivo supera MAX_FILE_SIZE del formulario',
-        UPLOAD_ERR_PARTIAL    => 'El archivo se subió parcialmente',
-        UPLOAD_ERR_NO_FILE    => 'No se seleccionó ningún archivo',
-        UPLOAD_ERR_NO_TMP_DIR => 'Falta la carpeta temporal',
-        UPLOAD_ERR_CANT_WRITE => 'Error al escribir el archivo',
-    ];
-    echo json_encode(['ok' => false, 'error' => $errores[$file['error']] ?? 'Error de subida desconocido']);
-    exit;
-}
-
-// Validar tamaño (máx 500 MB)
-$maxBytes = 500 * 1024 * 1024;
-if ($file['size'] > $maxBytes) {
-    echo json_encode(['ok' => false, 'error' => 'El video supera el límite de 500 MB']);
-    exit;
-}
-
-// Validar tipo MIME (solo MP4 y WebM)
-$allowedMime = ['video/mp4', 'video/webm', 'video/ogg'];
-$finfo = new finfo(FILEINFO_MIME_TYPE);
-$mime  = $finfo->file($file['tmp_name']);
-if (!in_array($mime, $allowedMime, true)) {
-    echo json_encode(['ok' => false, 'error' => 'Solo se permiten videos MP4 o WebM']);
-    exit;
-}
-
-// Definir extensión segura desde el MIME real
-$extMap = ['video/mp4' => 'mp4', 'video/webm' => 'webm', 'video/ogg' => 'ogv'];
-$ext    = $extMap[$mime];
-
-// Borrar video anterior si existe
-foreach (['mp4', 'webm', 'ogv'] as $oldExt) {
-    $oldPath = $uploadDir . 'tv_video.' . $oldExt;
-    if (is_file($oldPath)) {
-        @unlink($oldPath);
-    }
-}
-
-$destFilename = 'tv_video.' . $ext;
-$destPath     = $uploadDir . $destFilename;
-
-if (!move_uploaded_file($file['tmp_name'], $destPath)) {
-    echo json_encode(['ok' => false, 'error' => 'No se pudo guardar el archivo']);
-    exit;
-}
-
-$publicUrl = $publicBase . $destFilename;
-
-// Guardar URL en lab_config (upsert)
-$stmt = $pdo->prepare(
-    "INSERT INTO lab_config (clave, valor) VALUES ('turnero_tv_video', ?)
-     ON DUPLICATE KEY UPDATE valor = VALUES(valor)"
-);
-$stmt->execute([$publicUrl]);
-
-echo json_encode(['ok' => true, 'url' => $publicUrl]);
diff --git a/modules/turnero/views/configuracion.php b/modules/turnero/views/configuracion.php
index 1ced4ed..c12b01c 100644
--- a/modules/turnero/views/configuracion.php
+++ b/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'); }
 }
 
diff --git a/modules/turnero/views/display_global.php b/modules/turnero/views/display_global.php
index 2de060f..b94620d 100644
--- a/modules/turnero/views/display_global.php
+++ b/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 =