usite-sas-bic/whatsapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pantallas TV: caja cuadrada para el video, que es cuadrado

Browse Source 
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>
This commit is contained in:
Lizandro Guarnizo
2026-08-12 16:36:58 -05:00
co-authored by Claude Opus 5
parent 6589503c57
commit c525cc7261
2 changed files with 19 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/turnero/views/display.php
+7 -3
View File
@@ -271,9 +271,13 @@ $_labColor = preg_match('/^#[0-9a-fA-F]{3,8}$/', $_dispCfg['doc_color'] ?? '')
</div> </div>
<!-- Panel publicitario (se activa con ?video=URL) --> <!-- 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 <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=""> <source id="video-src" src="">
</video> </video>
</div> </div>
@@ -338,7 +342,7 @@ document.getElementById('lbl-area').textContent =
const body = document.getElementById('display-body'); const body = document.getElementById('display-body');
src.src = videoUrl; src.src = videoUrl;
vid.load(); vid.load();
panel.style.display = 'block'; panel.style.display = 'flex'; // flex, para poder centrar el cuadro
// 3 columnas: turno | video | cola // 3 columnas: turno | video | cola
body.style.gridTemplateColumns = '1fr 320px 280px'; body.style.gridTemplateColumns = '1fr 320px 280px';
})(); })();
modules/turnero/views/display_global.php
+12 -3
View File
@@ -240,16 +240,25 @@ $_hasVideo = (bool)$_tvPlaylist;
} }
.ul-item.activo .ul-dest { color: rgba(255,255,255,.85); } .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 { .reel-wrap {
display: none; display: none;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
padding: 8px 8px 8px 0; 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 { .reel-wrap .reel-inner {
width: 100%; height: 100%; width: 100%;
height: auto;
aspect-ratio: 1 / 1;
max-height: 100%;
border-radius: 16px; border-radius: 16px;
overflow: hidden; overflow: hidden;
box-shadow: -8px 0 30px rgba(0,0,0,.08); box-shadow: -8px 0 30px rgba(0,0,0,.08);