381 lines
13 KiB
HTML
381 lines
13 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>{{ display.name }}</title>
|
|
<style>
|
|
html, body { height: 100%; width: 100%; margin: 0; background: #000; overflow: hidden; }
|
|
#stage { position: fixed; inset: 0; width: 100vw; height: 100vh; background: #000; }
|
|
|
|
/* Optional company overlay (transparent PNG) */
|
|
#overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
pointer-events: none;
|
|
z-index: 5;
|
|
object-fit: contain;
|
|
}
|
|
|
|
/* Slide transitions (applied by JS via classes) */
|
|
#stage .slide {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
#stage .slide.enter {
|
|
opacity: 0;
|
|
transform: translateX(16px);
|
|
}
|
|
#stage.transition-none .slide.enter {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
#stage.transition-fade .slide {
|
|
transition: opacity 420ms ease;
|
|
}
|
|
#stage.transition-fade .slide.enter {
|
|
opacity: 0;
|
|
transform: none;
|
|
}
|
|
#stage.transition-fade .slide.enter.active {
|
|
opacity: 1;
|
|
}
|
|
#stage.transition-fade .slide.exit {
|
|
opacity: 1;
|
|
transition: opacity 420ms ease;
|
|
}
|
|
#stage.transition-fade .slide.exit.active {
|
|
opacity: 0;
|
|
}
|
|
|
|
#stage.transition-slide .slide {
|
|
transition: transform 420ms ease, opacity 420ms ease;
|
|
}
|
|
#stage.transition-slide .slide.enter {
|
|
opacity: 0;
|
|
transform: translateX(48px);
|
|
}
|
|
#stage.transition-slide .slide.enter.active {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
#stage.transition-slide .slide.exit {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
#stage.transition-slide .slide.exit.active {
|
|
opacity: 0;
|
|
transform: translateX(-48px);
|
|
}
|
|
#notice {
|
|
position: fixed;
|
|
inset: 0;
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 24px;
|
|
color: #fff;
|
|
background: rgba(0, 0, 0, 0.86);
|
|
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
|
|
z-index: 10;
|
|
text-align: center;
|
|
}
|
|
#notice .box {
|
|
max-width: 720px;
|
|
}
|
|
#notice .title {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
margin: 0 0 10px;
|
|
}
|
|
#notice .msg {
|
|
font-size: 18px;
|
|
line-height: 1.4;
|
|
margin: 0;
|
|
opacity: 0.95;
|
|
}
|
|
img, video, iframe { width: 100%; height: 100%; object-fit: contain; border: 0; }
|
|
/* removed bottom-left status text */
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="notice" role="alert" aria-live="assertive">
|
|
<div class="box">
|
|
<p class="title" id="noticeTitle">Notice</p>
|
|
<p class="msg" id="noticeText"></p>
|
|
</div>
|
|
</div>
|
|
<div id="stage"></div>
|
|
{% if overlay_url %}
|
|
<img id="overlay" src="{{ overlay_url }}" alt="Overlay" />
|
|
{% endif %}
|
|
<script>
|
|
const token = "{{ display.token }}";
|
|
const stage = document.getElementById('stage');
|
|
let overlayEl = document.getElementById('overlay');
|
|
const noticeEl = document.getElementById('notice');
|
|
const noticeTitleEl = document.getElementById('noticeTitle');
|
|
const noticeTextEl = document.getElementById('noticeText');
|
|
function setNotice(text, { title } = {}) {
|
|
const t = (text || '').trim();
|
|
if (!t) {
|
|
noticeEl.style.display = 'none';
|
|
noticeTextEl.textContent = '';
|
|
return;
|
|
}
|
|
noticeTitleEl.textContent = title || 'Notice';
|
|
noticeTextEl.textContent = t;
|
|
noticeEl.style.display = 'flex';
|
|
}
|
|
|
|
const isPreview = new URLSearchParams(window.location.search).get('preview') === '1';
|
|
|
|
// Stable session id per browser (used to enforce max concurrent viewers per display token)
|
|
const SID_KEY = `display_sid_${token}`;
|
|
function getSid() {
|
|
let sid = null;
|
|
try { sid = localStorage.getItem(SID_KEY); } catch(e) { /* ignore */ }
|
|
if (!sid) {
|
|
sid = (crypto && crypto.randomUUID) ? crypto.randomUUID() : (Math.random().toString(16).slice(2) + Date.now().toString(16));
|
|
try { localStorage.setItem(SID_KEY, sid); } catch(e) { /* ignore */ }
|
|
}
|
|
return sid;
|
|
}
|
|
|
|
const sid = isPreview ? null : getSid();
|
|
|
|
let playlist = null;
|
|
let idx = 0;
|
|
let timer = null;
|
|
|
|
const ANIM_MS = 420;
|
|
|
|
function getTransitionMode(pl) {
|
|
const v = (pl && pl.transition ? String(pl.transition) : 'none').toLowerCase();
|
|
return (v === 'fade' || v === 'slide' || v === 'none') ? v : 'none';
|
|
}
|
|
|
|
function applyTransitionClass(mode) {
|
|
stage.classList.remove('transition-none', 'transition-fade', 'transition-slide');
|
|
stage.classList.add(`transition-${mode}`);
|
|
}
|
|
|
|
async function fetchPlaylist() {
|
|
const qs = sid ? `?sid=${encodeURIComponent(sid)}` : '';
|
|
const res = await fetch(`/api/display/${token}/playlist${qs}`, { cache: 'no-store' });
|
|
if (res.status === 429) {
|
|
const data = await res.json().catch(() => null);
|
|
throw Object.assign(new Error(data?.message || 'Display limit reached'), { code: 'LIMIT', data });
|
|
}
|
|
return await res.json();
|
|
}
|
|
|
|
function clearStage() {
|
|
if (timer) { clearTimeout(timer); timer = null; }
|
|
stage.innerHTML = '';
|
|
}
|
|
|
|
function setOverlaySrc(src) {
|
|
const val = (src || '').trim();
|
|
if (!val) {
|
|
if (overlayEl && overlayEl.parentNode) overlayEl.parentNode.removeChild(overlayEl);
|
|
overlayEl = null;
|
|
return;
|
|
}
|
|
|
|
if (!overlayEl) {
|
|
overlayEl = document.createElement('img');
|
|
overlayEl.id = 'overlay';
|
|
overlayEl.alt = 'Overlay';
|
|
document.body.appendChild(overlayEl);
|
|
}
|
|
|
|
// Cache-bust in preview mode so changes show up instantly.
|
|
if (isPreview) {
|
|
try {
|
|
const u = new URL(val, window.location.origin);
|
|
u.searchParams.set('_ts', String(Date.now()));
|
|
overlayEl.src = u.toString();
|
|
return;
|
|
} catch(e) {
|
|
// fallthrough
|
|
}
|
|
}
|
|
overlayEl.src = val;
|
|
}
|
|
|
|
// Initialize overlay from server-side render.
|
|
if (overlayEl && overlayEl.src) setOverlaySrc(overlayEl.src);
|
|
|
|
function setSlideContent(container, item) {
|
|
if (item.type === 'image') {
|
|
const el = document.createElement('img');
|
|
el.src = item.src;
|
|
container.appendChild(el);
|
|
} else if (item.type === 'video') {
|
|
const el = document.createElement('video');
|
|
el.src = item.src;
|
|
el.autoplay = true;
|
|
el.muted = true;
|
|
el.playsInline = true;
|
|
el.onended = next;
|
|
container.appendChild(el);
|
|
} else if (item.type === 'webpage') {
|
|
const el = document.createElement('iframe');
|
|
el.src = item.url;
|
|
container.appendChild(el);
|
|
} else if (item.type === 'youtube') {
|
|
const el = document.createElement('iframe');
|
|
// item.url is a base embed URL produced server-side (https://www.youtube-nocookie.com/embed/<id>)
|
|
// Add common playback params client-side.
|
|
const u = item.url || '';
|
|
const sep = u.includes('?') ? '&' : '?';
|
|
el.src = `${u}${sep}autoplay=1&mute=1&controls=0&rel=0&playsinline=1`;
|
|
container.appendChild(el);
|
|
}
|
|
}
|
|
|
|
function showItemWithTransition(item) {
|
|
const mode = getTransitionMode(playlist);
|
|
applyTransitionClass(mode);
|
|
|
|
// Create new slide container.
|
|
const slide = document.createElement('div');
|
|
slide.className = 'slide enter';
|
|
setSlideContent(slide, item);
|
|
|
|
// Determine previous slide (if any).
|
|
const prev = stage.querySelector('.slide');
|
|
|
|
// First render: no animation needed.
|
|
if (!prev || mode === 'none') {
|
|
stage.innerHTML = '';
|
|
slide.classList.remove('enter');
|
|
stage.appendChild(slide);
|
|
return;
|
|
}
|
|
|
|
// Transition: keep both on stage and animate.
|
|
stage.appendChild(slide);
|
|
|
|
// Trigger transition.
|
|
// In some browsers the style changes can get coalesced into a single paint (no animation),
|
|
// especially on fast/fullscreen pages. We force a layout read before activating.
|
|
requestAnimationFrame(() => {
|
|
prev.classList.add('exit');
|
|
// Force reflow so the browser commits initial (enter) styles.
|
|
// eslint-disable-next-line no-unused-expressions
|
|
slide.offsetHeight;
|
|
slide.classList.add('active');
|
|
prev.classList.add('active');
|
|
});
|
|
|
|
// Cleanup after animation.
|
|
window.setTimeout(() => {
|
|
try {
|
|
if (prev && prev.parentNode === stage) stage.removeChild(prev);
|
|
slide.classList.remove('enter');
|
|
} catch(e) { /* ignore */ }
|
|
}, ANIM_MS + 50);
|
|
}
|
|
|
|
function next() {
|
|
if (!playlist || !playlist.items || playlist.items.length === 0) {
|
|
setNotice('No playlists assigned.');
|
|
clearStage();
|
|
return;
|
|
}
|
|
|
|
const item = playlist.items[idx % playlist.items.length];
|
|
idx = (idx + 1) % playlist.items.length;
|
|
|
|
// Clear any active timers (but keep DOM for transition).
|
|
if (timer) { clearTimeout(timer); timer = null; }
|
|
setNotice('');
|
|
|
|
showItemWithTransition(item);
|
|
|
|
if (item.type === 'image') {
|
|
timer = setTimeout(next, (item.duration || 10) * 1000);
|
|
} else if (item.type === 'video') {
|
|
// next() is called on video end.
|
|
} else if (item.type === 'webpage') {
|
|
timer = setTimeout(next, (item.duration || 10) * 1000);
|
|
} else if (item.type === 'youtube') {
|
|
// YouTube iframes don't reliably emit an "ended" event without the JS API.
|
|
// We keep it simple: play for the configured duration (default 30s).
|
|
timer = setTimeout(next, (item.duration || 30) * 1000);
|
|
} else {
|
|
timer = setTimeout(next, 5000);
|
|
}
|
|
}
|
|
|
|
async function start() {
|
|
try {
|
|
playlist = await fetchPlaylist();
|
|
idx = 0;
|
|
applyTransitionClass(getTransitionMode(playlist));
|
|
setOverlaySrc(playlist && playlist.overlay_src);
|
|
next();
|
|
} catch (e) {
|
|
clearStage();
|
|
if (e && e.code === 'LIMIT') {
|
|
setNotice(
|
|
(e && e.message) ? e.message : 'This display cannot start because the concurrent display limit has been reached.',
|
|
{ title: 'Display limit reached' }
|
|
);
|
|
} else {
|
|
setNotice(e && e.message ? e.message : 'Unable to load playlist.', { title: 'Playback error' });
|
|
}
|
|
// keep retrying; if a slot frees up the display will start automatically.
|
|
}
|
|
|
|
// Poll for updates instead of SSE.
|
|
// This scales better for 100s of displays because it avoids long-lived HTTP
|
|
// connections (which otherwise tie up gunicorn sync workers).
|
|
// Default: check every 20s (can be overridden via ?poll=seconds).
|
|
const pollParam = parseInt(new URLSearchParams(window.location.search).get('poll') || '', 10);
|
|
const pollSeconds = Number.isFinite(pollParam) && pollParam > 0 ? pollParam : 20;
|
|
setInterval(async () => {
|
|
try {
|
|
const newPlaylist = await fetchPlaylist();
|
|
|
|
// Restart if something changed.
|
|
const oldStr = JSON.stringify(playlist);
|
|
const newStr = JSON.stringify(newPlaylist);
|
|
playlist = newPlaylist;
|
|
setOverlaySrc(playlist && playlist.overlay_src);
|
|
if (oldStr !== newStr) {
|
|
idx = 0;
|
|
applyTransitionClass(getTransitionMode(playlist));
|
|
next();
|
|
}
|
|
|
|
// If player is blank (e.g. after a temporary error), kick it.
|
|
if (!stage.firstChild) {
|
|
idx = 0;
|
|
next();
|
|
}
|
|
} catch(e) {
|
|
clearStage();
|
|
if (e && e.code === 'LIMIT') {
|
|
setNotice(
|
|
(e && e.message) ? e.message : 'This display cannot start because the concurrent display limit has been reached.',
|
|
{ title: 'Display limit reached' }
|
|
);
|
|
} else {
|
|
setNotice(e && e.message ? e.message : 'Unable to load playlist.', { title: 'Playback error' });
|
|
}
|
|
}
|
|
}, pollSeconds * 1000);
|
|
}
|
|
|
|
start();
|
|
</script>
|
|
</body>
|
|
</html>
|