From c525cc726111c081710357bf72be2aed2935f74e Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Wed, 12 Aug 2026 16:36:58 -0500
Subject: [PATCH] Pantallas TV: caja cuadrada para el video, que es cuadrado
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

El material del reel es cuadrado, pero la caja ocupaba todo el alto de una
columna angosta. Con object-fit:cover eso significa recortar: del cuadrado
solo quedaba visible una franja vertical del centro, y se perdían los bordes
—que es justo donde suele ir el logo o el texto de una pieza publicitaria.

Ahora la caja es cuadrada (aspect-ratio 1/1) y se centra en su columna, así
que la pieza entra completa. cover se conserva: sobre una caja cuadrada con
material cuadrado no recorta nada, y si algún día suben algo de otra
proporción, lo encuadra en vez de deformarlo.

Mismo arreglo en display.php, que tiene su propio panel de video por ?video=
con el mismo defecto.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 modules/turnero/views/display.php        | 10 +++++++---
 modules/turnero/views/display_global.php | 15 ++++++++++++---
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/modules/turnero/views/display.php b/modules/turnero/views/display.php
index deff002..9f7ebb8 100644
--- a/modules/turnero/views/display.php
+++ b/modules/turnero/views/display.php
@@ -271,9 +271,13 @@ $_labColor  = preg_match('/^#[0-9a-fA-F]{3,8}$/', $_dispCfg['doc_color'] ?? '')
         </div>
 
         <!-- Panel publicitario (se activa con ?video=URL) -->
-        <div id="video-panel" style="display:none;overflow:hidden;background:#000;position:relative">
+        <!-- El material es cuadrado: la caja también, y centrada. Estirada a
+             toda la altura de una columna angosta, cover recortaba los bordes
+             del video y solo se veía la franja central. -->
+        <div id="video-panel" style="display:none;overflow:hidden;background:#000;position:relative;
+                                     align-items:center;justify-content:center">
             <video id="video-pub" autoplay muted loop playsinline
-                   style="width:100%;height:100%;object-fit:cover">
+                   style="width:100%;height:auto;aspect-ratio:1/1;max-height:100%;object-fit:cover">
                 <source id="video-src" src="">
             </video>
         </div>
@@ -338,7 +342,7 @@ document.getElementById('lbl-area').textContent =
     const body   = document.getElementById('display-body');
     src.src = videoUrl;
     vid.load();
-    panel.style.display = 'block';
+    panel.style.display = 'flex';   // flex, para poder centrar el cuadro
     // 3 columnas: turno | video | cola
     body.style.gridTemplateColumns = '1fr 320px 280px';
 })();
diff --git a/modules/turnero/views/display_global.php b/modules/turnero/views/display_global.php
index 50aead9..892beff 100644
--- a/modules/turnero/views/display_global.php
+++ b/modules/turnero/views/display_global.php
@@ -240,16 +240,25 @@ $_hasVideo = (bool)$_tvPlaylist;
         }
         .ul-item.activo .ul-dest { color: rgba(255,255,255,.85); }
 
-        /* ── Video reel ── */
+        /* ── Video reel ──
+           El material es cuadrado. Antes la caja ocupaba todo el alto de una
+           columna angosta y, con object-fit:cover, del cuadrado solo se veía
+           una franja vertical del centro: se perdían los bordes del video.
+           Ahora la caja es cuadrada y se centra, así entra completo. */
         .reel-wrap {
             display: none;
             height: 100%;
             overflow: hidden;
             padding: 8px 8px 8px 0;
+            align-items: center;
+            justify-content: center;
         }
-        .reel-wrap.has-video { display: block; }
+        .reel-wrap.has-video { display: flex; }
         .reel-wrap .reel-inner {
-            width: 100%; height: 100%;
+            width: 100%;
+            height: auto;
+            aspect-ratio: 1 / 1;
+            max-height: 100%;
             border-radius: 16px;
             overflow: hidden;
             box-shadow: -8px 0 30px rgba(0,0,0,.08);