Archive/screentinker
1
0
Fork 0
mirror of https://github.com/screentinker/screentinker.git synced 2026-06-14 18:22:46 -06:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Merge pull request #42 from screentinker/fix/sw-video-passthrough

Browse source 
fix(web): service worker video passthrough + independent per-zone rotation
This commit is contained in:
screentinker 2026-06-08 23:17:08 -05:00 committed by GitHub
parent 6ef2cb548c 68fb6a985e
commit ac1b24fe43
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 107 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
frontend/sw-admin.js
View file

@ -4,9 +4,14 @@
// v2 - first network-first version (replaced a cache-first SW that shipped stale JS)
// v3 - force returning clients to drop the old bucket so the "Add user" admin
// button (and any client still on a pre-v2 cache-first SW) lands.
// v4 - stop intercepting media/content/player + range requests. The old handler
// clone+cache+respond'd every non-API request; a video Range request gets a
// 206 (uncacheable) which broke the handler ("ServiceWorker encountered an
// unexpected error"), so videos never loaded on pages this SW controls
// (e.g. the web player, since this SW's scope is '/').
// Changing this string is what makes the browser detect a new SW + run activate,
// which deletes every cache key != CACHE below.
const CACHE = 'rd-admin-v3';
const CACHE = 'rd-admin-v4';
self.addEventListener('install', e => {
e.waitUntil(caches.open(CACHE).then(c => c.addAll([
@ -23,18 +28,31 @@ self.addEventListener('activate', e => {
});
self.addEventListener('fetch', e => {
// Don't intercept API or socket.io traffic - those need to hit the network unmediated.
if (e.request.url.includes('/api/') || e.request.url.includes('/socket.io/')) return;
// Network-first: respect the server's Cache-Control: no-cache + ETag (304s
// stay fast); fall back to cache only when offline. Re-populate the cache
// on every successful fetch so the offline fallback stays current.
const req = e.request;
// Only handle same-origin GET navigations/assets. Everything else hits the
// network unmediated:
// - non-GET: cache.put() rejects on them anyway.
// - Range requests (video seeking): the response is 206 Partial Content, which
// is uncacheable and breaks clone+cache+respond -> "ServiceWorker encountered
// an unexpected error", stalling video playback.
// - /uploads/ (content/media), /player (the web player), /api/, /socket.io/:
// not ours to cache; the player + server set their own cache headers.
if (req.method !== 'GET' || req.headers.has('range')) return;
const url = req.url;
if (url.includes('/api/') || url.includes('/socket.io/') ||
url.includes('/uploads/') || url.includes('/player')) return;
// Network-first: respect the server's Cache-Control: no-cache + ETag (304s stay
// fast); fall back to cache only when offline. Only cache full, same-origin 200s.
e.respondWith(
fetch(e.request)
fetch(req)
.then(resp => {
const copy = resp.clone();
caches.open(CACHE).then(c => c.put(e.request, copy)).catch(() => {});
if (resp && resp.status === 200 && resp.type === 'basic') {
const copy = resp.clone();
caches.open(CACHE).then(c => c.put(req, copy)).catch(() => {});
}
return resp;
})
.catch(() => caches.match(e.request))
.catch(() => caches.match(req))
);
});

120
server/player/index.html
View file

@ -329,6 +329,9 @@
// playback muted).
let userHasInteracted = false;
let advanceTimer = null;
// Per-zone rotation timers (multi-zone). Each zone advances independently on
// its own interval, decoupled from the fullscreen advanceTimer/nextItem.
let zoneTimers = {};
// Video wall state. wallConfig is the tile assignment from the server
// (null when this device isn't in a wall). The leader runs the playlist
// normally and broadcasts wall:sync every second; followers don't run
@ -1297,8 +1300,14 @@
// releases the decoder and kills audio. Null event handlers so a late onended
// can't fire into a stale playlist state. Queries all <video> elements so
// zone-mode (multi-region) videos get cleaned up too, not just currentVideoEl.
function clearZoneTimers() {
for (const k in zoneTimers) clearTimeout(zoneTimers[k]);
zoneTimers = {};
}
function teardownCurrentMedia() {
if (advanceTimer) { clearTimeout(advanceTimer); advanceTimer = null; }
clearZoneTimers();
const container = document.getElementById('playerContainer');
if (container) {
container.querySelectorAll('video').forEach(v => {
@ -1320,9 +1329,9 @@
const container = document.getElementById('playerContainer');
container.style.display = 'block';
// Multi-zone: each zone pulls its own content by zone_id, independent of the
// rotating "current item". Render zones here (before the single-item bail) so
// an empty/placeholder current item can't blank the whole multi-zone screen.
// Multi-zone: each zone pulls + rotates its own assignments by zone_id,
// independent of the "current item". Render zones here (before the single-item
// bail) so an empty/placeholder current item can't blank the whole screen.
if (layout && layout.zones && layout.zones.length > 1 && !wallConfig) {
renderZones(container, item);
return;
@ -1452,52 +1461,81 @@
}
function renderZones(container, defaultItem) {
// Multi-zone layout
clearZoneTimers();
// Group assignments by zone, ordered by sort_order so each zone rotates its
// OWN list independently (images/widgets on a duration timer, videos on end)
// rather than every zone re-rendering on a single global tick.
const byZone = {};
for (const a of playlist) {
const zid = a.zone_id || '__none__';
(byZone[zid] = byZone[zid] || []).push(a);
}
for (const k in byZone) byZone[k].sort((x, y) => (x.sort_order || 0) - (y.sort_order || 0));
let unassignedUsed = false;
layout.zones.forEach(zone => {
let items = byZone[zone.id];
if ((!items || !items.length) && !unassignedUsed && byZone['__none__']) {
unassignedUsed = true; items = byZone['__none__'];
}
if ((!items || !items.length) && defaultItem) items = [defaultItem];
if (!items || !items.length) return;
const div = document.createElement('div');
div.className = 'zone';
div.style.cssText = `left:${zone.x_percent}%;top:${zone.y_percent}%;width:${zone.width_percent}%;height:${zone.height_percent}%;z-index:${zone.z_index || 0}`;
// Find assignment for this zone
const assignment = playlist.find(a => a.zone_id === zone.id) || defaultItem;
if (!assignment) return;
const isVideo = assignment.mime_type?.startsWith('video/');
const src = assignment.remote_url || `${config.serverUrl}/uploads/content/${assignment.filepath}`;
const isYoutubeZone = assignment.mime_type === 'video/youtube';
if (zone.zone_type === 'widget' && assignment.widget_id) {
const iframe = document.createElement('iframe');
iframe.src = `${config.serverUrl}/api/widgets/${assignment.widget_id}/render`;
// Sandbox into a unique origin so widget scripts can't read window.parent
// state (localStorage / JWT). allow-scripts keeps inline widget code running.
iframe.setAttribute('sandbox', 'allow-scripts');
div.appendChild(iframe);
} else if (isYoutubeZone) {
createYoutubeEmbed(src, assignment, div);
} else if (isVideo) {
const video = document.createElement('video');
video.src = src;
video.autoplay = true;
video.muted = (zone.sort_order > 0); // Only first zone has audio
video.loop = (playlist.length === 1);
video.playsInline = true;
video.style.cssText = `width:100%;height:100%;object-fit:${zone.fit_mode || 'cover'}`;
if (!video.loop) video.onended = () => nextItem();
div.appendChild(video);
} else {
const img = document.createElement('img');
img.src = src;
img.style.cssText = `width:100%;height:100%;object-fit:${zone.fit_mode || 'cover'}`;
div.appendChild(img);
if (playlist.length > 1) advanceTimer = setTimeout(nextItem, (assignment.duration_sec || 10) * 1000);
}
container.appendChild(div);
showZoneItem(zone, div, items, 0);
});
}
// Render items[index] in a zone and schedule the next item on the zone's OWN
// timer (images/widgets/youtube: duration; videos: on end). Single-item zones
// loop / don't advance.
function showZoneItem(zone, div, items, index) {
if (zoneTimers[zone.id]) { clearTimeout(zoneTimers[zone.id]); delete zoneTimers[zone.id]; }
const a = items[index % items.length];
const multi = items.length > 1;
const advance = () => showZoneItem(zone, div, items, index + 1);
// Tear down any prior media in this zone before swapping.
div.querySelectorAll('video').forEach(v => { try { v.onended = null; v.pause(); v.removeAttribute('src'); v.load(); } catch (e) {} });
div.innerHTML = '';
const isYoutube = a.mime_type === 'video/youtube';
const isVideo = !isYoutube && a.mime_type?.startsWith('video/');
const src = a.remote_url || `${config.serverUrl}/uploads/content/${a.filepath}`;
const dur = (a.duration_sec || 10) * 1000;
if (zone.zone_type === 'widget' && a.widget_id) {
const iframe = document.createElement('iframe');
iframe.src = `${config.serverUrl}/api/widgets/${a.widget_id}/render`;
// Sandbox into a unique origin so widget scripts can't read window.parent
// state (localStorage / JWT). allow-scripts keeps inline widget code running.
iframe.setAttribute('sandbox', 'allow-scripts');
div.appendChild(iframe);
if (multi) zoneTimers[zone.id] = setTimeout(advance, dur);
} else if (isYoutube) {
createYoutubeEmbed(src, a, div);
if (multi) zoneTimers[zone.id] = setTimeout(advance, dur);
} else if (isVideo) {
const video = document.createElement('video');
video.src = src;
video.autoplay = true;
video.muted = (zone.sort_order > 0); // Only first zone has audio
video.loop = !multi; // single-item zone loops; multi advances on end
video.playsInline = true;
video.style.cssText = `width:100%;height:100%;object-fit:${zone.fit_mode || 'cover'}`;
if (multi) video.onended = advance;
div.appendChild(video);
} else {
const img = document.createElement('img');
img.src = src;
img.style.cssText = `width:100%;height:100%;object-fit:${zone.fit_mode || 'cover'}`;
div.appendChild(img);
if (multi) zoneTimers[zone.id] = setTimeout(advance, dur);
}
}
// ==================== Screenshots ====================
function captureAndSend() {
if (!socket?.connected) return;