From 438c313f8643407a9fd67595a629625266b2868e Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Thu, 11 Jun 2026 22:16:31 -0500
Subject: [PATCH] Update display_global.php

---
 modules/turnero/views/display_global.php | 55 +++++++++++++++++++++++-
 1 file changed, 54 insertions(+), 1 deletion(-)

diff --git a/modules/turnero/views/display_global.php b/modules/turnero/views/display_global.php
index dd23e42..220b082 100644
--- a/modules/turnero/views/display_global.php
+++ b/modules/turnero/views/display_global.php
@@ -80,6 +80,7 @@ $_hasVideo  = (bool)$_tvVideo;
             transition: background .15s;
         }
         .btn-fs:hover { background: #f1f5f9; }
+        .btn-fs.on { background: #dcfce7; border-color: #86efac; color: #15803d; }
 
         /* ── Background decoration ── */
         .bg-deco {
@@ -162,7 +163,6 @@ $_hasVideo  = (bool)$_tvVideo;
             height: 100%;
             aspect-ratio: 9 / 16;
             overflow: hidden;
-            background: #000;
             padding: 8px 8px 8px 0;
         }
         .reel-wrap.has-video { display: block; }
@@ -318,6 +318,9 @@ $_hasVideo  = (bool)$_tvVideo;
         <div class="hd-right">
             <div class="live-dot"></div>
             <div class="reloj" id="reloj">--:--:--</div>
+            <button class="btn-fs" id="btn-sonido" onclick="activarSonido()" title="Activar sonido">
+                <i class="fas fa-volume-mute"></i>
+            </button>
             <button class="btn-fs" onclick="toggleFullscreen()" title="Pantalla completa">
                 <i class="fas fa-expand" id="fs-icon"></i>
             </button>
@@ -370,6 +373,54 @@ function tick() {
 }
 tick(); setInterval(tick, 1000);
 
+/* ── Audio ── */
+let audioCtx = null, sonidoActivo = false;
+
+function activarSonido() {
+    try {
+        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+        const g = audioCtx.createGain(); g.gain.setValueAtTime(0.001, audioCtx.currentTime);
+        const o = audioCtx.createOscillator(); o.connect(g); g.connect(audioCtx.destination);
+        o.start(); o.stop(audioCtx.currentTime + 0.05);
+    } catch (_) {}
+    sonidoActivo = true;
+    const btn = document.getElementById('btn-sonido');
+    if (btn) { btn.innerHTML = '<i class="fas fa-volume-up"></i>'; btn.classList.add('on'); }
+    setTimeout(playBeep, 100);
+}
+document.addEventListener('click',      () => { if (!sonidoActivo) activarSonido(); }, { once: true });
+document.addEventListener('touchstart', () => { if (!sonidoActivo) activarSonido(); }, { once: true });
+
+function playBeep() {
+    if (!sonidoActivo || !audioCtx) return;
+    try {
+        const osc = audioCtx.createOscillator();
+        const g   = audioCtx.createGain();
+        osc.type = 'sine';
+        osc.connect(g); g.connect(audioCtx.destination);
+        osc.frequency.setValueAtTime(880,  audioCtx.currentTime);
+        osc.frequency.setValueAtTime(1100, audioCtx.currentTime + 0.1);
+        osc.frequency.setValueAtTime(880,  audioCtx.currentTime + 0.2);
+        g.gain.setValueAtTime(0.35, audioCtx.currentTime);
+        g.gain.exponentialRampToValueAtTime(0.0001, audioCtx.currentTime + 0.65);
+        osc.start(audioCtx.currentTime);
+        osc.stop(audioCtx.currentTime + 0.65);
+    } catch (_) {}
+}
+
+function anunciarTurno(codigo, destino) {
+    playBeep();
+    if ('speechSynthesis' in window) {
+        setTimeout(() => {
+            window.speechSynthesis.cancel();
+            const letras = codigo.split('').join(' ');
+            const utt = new SpeechSynthesisUtterance(`Turno ${letras}, pase a ${destino}`);
+            utt.lang = 'es-CO'; utt.rate = 0.85; utt.pitch = 1.05; utt.volume = 1;
+            window.speechSynthesis.speak(utt);
+        }, 700);
+    }
+}
+
 /* ── Fullscreen ── */
 function toggleFullscreen() {
     if (!document.fullscreenElement) {
@@ -412,6 +463,8 @@ function showAnnouncement({ codigo, destino, paciente, color }) {
 
     ov.classList.add('visible');
 
+    anunciarTurno(codigo, destino);
+
     bar.style.transition = 'none';
     bar.style.width = '100%';
     requestAnimationFrame(() => requestAnimationFrame(() => {