update display 55

This commit is contained in:
Flatlogic Bot 2026-04-04 18:28:59 +00:00
parent 2ca10cf0a0
commit e9e197cea9
2 changed files with 19 additions and 18 deletions

View File

@ -224,23 +224,25 @@ document.addEventListener('DOMContentLoaded', () => {
const videoPlayer = document.getElementById('adsVideoPlayer'); const videoPlayer = document.getElementById('adsVideoPlayer');
if (videoPlayer) videoPlayer.volume = 0.1; if (videoPlayer) videoPlayer.volume = 0.1;
const text = locale === 'ar' ? (latest.dataset.announcementAr || '') : (latest.dataset.announcementEn || '');
let audioObj = null;
if (text) {
const tl = locale === 'ar' ? 'ar' : 'en';
const gTtsUrl = 'https://translate.google.com/translate_tts?ie=UTF-8&client=tw-ob&tl=' + tl + '&q=' + encodeURIComponent(text);
audioObj = new Audio(gTtsUrl);
audioObj.preload = 'auto'; // Force browser to start downloading
}
playChime(); playChime();
setTimeout(() => { setTimeout(() => {
const text = locale === 'ar' ? (latest.dataset.announcementAr || '') : (latest.dataset.announcementEn || ''); if (audioObj) {
if (text) { audioObj.onended = () => { if (videoPlayer) videoPlayer.volume = 1.0; };
// Use Google Translate TTS (outside high-quality voice API)
const tl = locale === 'ar' ? 'ar' : 'en';
const gTtsUrl = 'https://translate.google.com/translate_tts?ie=UTF-8&client=tw-ob&tl=' + tl + '&q=' + encodeURIComponent(text);
const audio = new Audio(gTtsUrl);
audio.onended = () => { if (videoPlayer) videoPlayer.volume = 1.0; };
let fallbackPlayed = false; let fallbackPlayed = false;
const handleFallback = (err) => { const handleFallback = (err) => {
if (fallbackPlayed) return; if (fallbackPlayed) return;
fallbackPlayed = true; fallbackPlayed = true;
// Fallback to built-in if external TTS fails
console.warn("External TTS failed, falling back to built-in speech", err); console.warn("External TTS failed, falling back to built-in speech", err);
if ('speechSynthesis' in window) { if ('speechSynthesis' in window) {
const utterance = new SpeechSynthesisUtterance(text); const utterance = new SpeechSynthesisUtterance(text);
@ -263,17 +265,16 @@ document.addEventListener('DOMContentLoaded', () => {
if (videoPlayer) videoPlayer.volume = 1.0; if (videoPlayer) videoPlayer.volume = 1.0;
} }
}; };
audio.onerror = handleFallback; audioObj.onerror = handleFallback;
// Attempt to play external audio const playPromise = audioObj.play();
const playPromise = audio.play();
if (playPromise !== undefined) { if (playPromise !== undefined) {
playPromise.catch(handleFallback); playPromise.catch(handleFallback);
} }
} else { } else {
if (videoPlayer) videoPlayer.volume = 1.0; if (videoPlayer) videoPlayer.volume = 1.0;
} }
}, 1200); // play voice after chime finishes }, 500); // reduced timeout from 1200ms to 500ms for faster playback
} }
} }
} }

View File

@ -39,18 +39,18 @@ qh_page_start(
padding-bottom: 0 !important; padding-bottom: 0 !important;
} }
@keyframes highlightPulse { @keyframes highlightPulse {
0% { transform: scale(1); box-shadow: var(--shadow); border: 2px solid transparent; } 0% { transform: scale(1); box-shadow: var(--shadow); border: 2px solid transparent; background-color: #ffffff !important; }
50% { transform: scale(1.05); box-shadow: 0 0 30px rgba(15, 139, 141, 0.6); border: 2px solid var(--accent-strong); } 50% { transform: scale(1.05); box-shadow: 0 0 30px rgba(15, 139, 141, 0.6); border: 2px solid var(--accent-strong); background-color: var(--accent-soft) !important; }
100% { transform: scale(1); box-shadow: var(--shadow); border: 2px solid transparent; } 100% { transform: scale(1); box-shadow: var(--shadow); border: 2px solid transparent; background-color: #ffffff !important; }
} }
.blinking-ticket { .blinking-ticket {
animation: highlightPulse 1.5s ease-in-out infinite; animation: highlightPulse 1.5s ease-in-out infinite;
z-index: 10; z-index: 10;
position: relative; position: relative;
background-color: #fff !important; /* removed */
} }
</style> </style>
<div class="container-fluid px-0 px-lg-0 py-0 m-0" data-auto-refresh="5" style="min-height: 100vh; display: flex; flex-direction: column; "> <div class="container-fluid px-0 px-lg-0 py-0 m-0" data-auto-refresh="3" style="min-height: 100vh; display: flex; flex-direction: column; ">
<!-- Top Header for Display Board --> <!-- Top Header for Display Board -->
<header class="d-flex justify-content-between align-items-center bg-white py-2 px-3 shadow-sm border-0"> <header class="d-flex justify-content-between align-items-center bg-white py-2 px-3 shadow-sm border-0">
<div class="d-flex align-items-center gap-3"> <div class="d-flex align-items-center gap-3">