update queuing system

This commit is contained in:
Flatlogic Bot 2026-04-08 17:38:42 +00:00
parent bc392b3f27
commit 0a99d35d8a
2 changed files with 50 additions and 1 deletions

View File

@ -230,6 +230,22 @@ document.addEventListener('DOMContentLoaded', () => {
let activeAnnouncementAudio = null;
let activeSpeechUtterance = null;
let audioLoadTimeoutId = null;
let activeAnnouncementKey = '';
const syncAnnouncementVisualState = () => {
document.querySelectorAll('.announcement-card').forEach((card) => {
const cardKey = card.dataset.announcementKey || '';
const isActive = !!activeAnnouncementKey && cardKey === activeAnnouncementKey;
const isQueued = queuedAnnouncementKeys.has(cardKey) && !isActive;
card.classList.toggle('announcement-current-turn', isActive);
card.classList.toggle('announcement-queued-turn', isQueued);
});
};
const setActiveAnnouncementKey = (key = '') => {
activeAnnouncementKey = key || '';
syncAnnouncementVisualState();
};
const clearAnnouncementPlayback = () => {
if (audioLoadTimeoutId) {
@ -260,6 +276,7 @@ document.addEventListener('DOMContentLoaded', () => {
if (!key || !text || queuedAnnouncementKeys.has(key)) return;
announcementQueue.push({ key, text });
queuedAnnouncementKeys.add(key);
syncAnnouncementVisualState();
playNextAnnouncement();
};
@ -274,6 +291,7 @@ document.addEventListener('DOMContentLoaded', () => {
}
announcementPlaying = true;
setActiveAnnouncementKey(nextAnnouncement.key);
const videoPlayer = document.getElementById('adsVideoPlayer');
if (videoPlayer) videoPlayer.volume = 0.1;
@ -282,9 +300,11 @@ document.addEventListener('DOMContentLoaded', () => {
if ('speechSynthesis' in window && (window.speechSynthesis.speaking || window.speechSynthesis.pending)) {
window.speechSynthesis.cancel();
}
setActiveAnnouncementKey('');
if (videoPlayer) videoPlayer.volume = 1.0;
queuedAnnouncementKeys.delete(nextAnnouncement.key);
announcementPlaying = false;
syncAnnouncementVisualState();
playNextAnnouncement();
};
@ -413,6 +433,7 @@ document.addEventListener('DOMContentLoaded', () => {
const currentSections = document.querySelector('#queueSections');
if (newSections && currentSections) {
currentSections.innerHTML = newSections.innerHTML;
syncAnnouncementVisualState();
}
const oldTicker = document.querySelector('.news-ticker-container');

View File

@ -43,12 +43,40 @@ qh_page_start(
50% { transform: scale(1.08); box-shadow: 0 0 40px rgba(255, 235, 59, 0.9); border-color: #ffb300; background-color: #ffeb3b; }
100% { transform: scale(1); box-shadow: var(--shadow); border-color: transparent; background-color: var(--surface); }
}
.blinking-ticket {
.blinking-ticket,
.announcement-current-turn {
animation: highlightPulse 1.5s ease-in-out infinite;
z-index: 10;
position: relative;
background-image: none !important; /* Ensure background-color animation works against shorthand */
}
.announcement-queued-turn {
position: relative;
border-color: rgba(13, 110, 253, 0.28) !important;
background: linear-gradient(135deg, rgba(13, 110, 253, 0.08), rgba(13, 202, 240, 0.12));
box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.08), 0 14px 30px rgba(13, 110, 253, 0.10);
transform: translateY(-2px);
transition: box-shadow 0.25s ease, transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.announcement-queued-turn::after {
content: 'Next';
position: absolute;
top: 0.5rem;
right: 0.5rem;
padding: 0.18rem 0.5rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #0b5ed7;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 6px 16px rgba(13, 110, 253, 0.12);
}
html[lang='ar'] .announcement-queued-turn::after {
content: 'التالي';
left: 0.5rem;
right: auto;
}
</style>
<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 -->