cambios de video
This commit is contained in:
Lizandro Guarnizo
@@ -6,6 +6,7 @@
|
||||
* TAB 2: Exámenes y Consentimientos
|
||||
* TAB 3: Prioridades
|
||||
* TAB 4: Sesión y WhatsApp
|
||||
* TAB 5: Pantalla TV (video de fondo)
|
||||
*/
|
||||
require_once __DIR__ . '/../../../config/config.php';
|
||||
|
||||
@@ -159,6 +160,11 @@ $tab = $_GET['tab'] ?? 'lugares';
|
||||
<i class="fas fa-calendar-day me-1"></i>Sesión y WhatsApp
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link <?= $tab==='tv'?'active':'' ?>" href="erp.php?m=turnero&v=configuracion&tab=tv">
|
||||
<i class="fas fa-tv me-1"></i>Pantalla TV
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-card">
|
||||
@@ -706,6 +712,55 @@ $tab = $_GET['tab'] ?? 'lugares';
|
||||
</div>
|
||||
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- ════════════════════════════════════════
|
||||
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>
|
||||
|
||||
<!-- 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
|
||||
</button>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<!-- Barra de progreso -->
|
||||
<div id="tv-progress-wrap" class="mt-3" style="display:none">
|
||||
<div class="d-flex align-items-center gap-2 mb-1">
|
||||
<span class="small fw-semibold" id="tv-progress-lbl">Subiendo…</span>
|
||||
<span class="small text-muted" id="tv-progress-pct">0%</span>
|
||||
</div>
|
||||
<div class="progress" style="height:8px">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated bg-primary"
|
||||
id="tv-progress-bar" role="progressbar" style="width:0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php endif; ?>
|
||||
</div><!-- /tab-card -->
|
||||
</div><!-- /content-wrap -->
|
||||
|
||||
@@ -942,6 +997,85 @@ async function cambiarSesion(accion, sesionId) {
|
||||
} catch (e) { toast('Error de conexión', 'error'); }
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────────────────────
|
||||
// TAB 5: PANTALLA TV
|
||||
// ─────────────────────────────────────────────────────────────
|
||||
(function () {
|
||||
const inp = document.getElementById('tv-file-input');
|
||||
const drop = document.getElementById('tv-drop');
|
||||
if (!inp) return;
|
||||
|
||||
// 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);
|
||||
});
|
||||
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; }
|
||||
|
||||
const wrap = document.getElementById('tv-progress-wrap');
|
||||
const bar = document.getElementById('tv-progress-bar');
|
||||
const pct = document.getElementById('tv-progress-pct');
|
||||
const lbl = document.getElementById('tv-progress-lbl');
|
||||
wrap.style.display = '';
|
||||
|
||||
const fd = new FormData();
|
||||
fd.append('video', file);
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', API + 'save_tv_video.php');
|
||||
|
||||
xhr.upload.addEventListener('progress', e => {
|
||||
if (!e.lengthComputable) return;
|
||||
const p = Math.round(e.loaded / e.total * 100);
|
||||
bar.style.width = p + '%';
|
||||
pct.textContent = p + '%';
|
||||
});
|
||||
|
||||
xhr.addEventListener('load', () => {
|
||||
wrap.style.display = 'none';
|
||||
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';
|
||||
} catch(e) { toast('Respuesta inesperada del servidor', 'error'); }
|
||||
});
|
||||
|
||||
xhr.addEventListener('error', () => { wrap.style.display = 'none'; toast('Error de conexión', 'error'); });
|
||||
|
||||
lbl.textContent = 'Subiendo ' + file.name + '…';
|
||||
bar.style.width = '0%';
|
||||
xhr.send(fd);
|
||||
}
|
||||
|
||||
async function borrarTvVideo() {
|
||||
if (!confirm('¿Quitar el video de la pantalla TV?')) return;
|
||||
try {
|
||||
const res = await fetch(API + 'save_tv_video.php', {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ accion: 'borrar' })
|
||||
});
|
||||
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 = '';
|
||||
} catch(e) { toast('Error de conexión', 'error'); }
|
||||
}
|
||||
|
||||
async function guardarWhatsApp() {
|
||||
const template = document.getElementById('wa-template')?.value.trim();
|
||||
const lang = document.getElementById('wa-lang')?.value.trim();
|
||||
|
||||
Reference in New Issue
Block a user