update queuing system
This commit is contained in:
parent
bc392b3f27
commit
0a99d35d8a
@ -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');
|
||||
|
||||
30
display.php
30
display.php
@ -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 -->
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user