PWA Player
@xiboplayer/pwa
The rendering engine that powers all players. Can run standalone in any browser.
Característiques
- Primer fora de línia — emmagatzematge en memòria cau amb Service Worker amb descàrregues de fragments paral·lels i transmissió progressiva
- Renderització de dissenys XLF — vídeo (MP4/HLS), imatges, superposició d'àudio, PDF, text/ticker, pàgines web
- Programació de campanyes — campanyes basades en prioritat, franges horàries, interrupcions i superposicions
- Control de reproducció — salt al disseny següent/anterior mitjançant teclat o fent clic a la superposició de la línia de temps (quan s'activa via configuració
controls) - Sincronització multipantalla — reproducció sincronitzada líder/seguidor basada en BroadcastChannel per a video walls
- Ordres en temps real — collectNow, screenshot, changeLayout, overlayLayout via XMR WebSocket
- Prova de reproducció — seguiment de durada per disseny i per widget
- Screen Wake Lock — evita que la pantalla entri en suspensió durant la reproducció
Requisit de mateix origen
La PWA s'ha de servir des del mateix domini que el Xibo. Totes les crides a l'API van a l'origen del CMS, i els navegadors bloquegen les peticions d'orígens creuats.
Per a ús en quiosc/escriptori, els embolcalls Electron o Chromium gestionen el CORS a nivell de proxy — sense restricció de mateix origen.
Desplegament
Al CMS (recomanat)
Copieu la sortida de compilació al directori web del CMS:
# Build from source
cd xiboplayer
pnpm install && pnpm --filter @xiboplayer/pwa run build
# Deploy to CMS container
podman cp packages/pwa/dist/. xibo-cms-web:/var/www/cms/web/chromeos/
Accediu a: https://your-cms.example.com/player/pwa/
Amb l'embolcall Electron o Chromium
Els paquets Electron i Chromium inclouen la PWA automàticament. No cal desplegament manual — instal·leu el paquet i executeu-lo.
Dreceres de teclat
Totes les dreceres de teclat i el hover del ratolí estan desactivats per defecte als embolcalls Electron i Chromium. Cada grup de control s'ha d'activar explícitament a la secció controls de config.json. Quan la PWA s'executa directament al navegador, les dreceres estan disponibles sense configuració.
| Tecla | Grup de control | Acció |
|---|---|---|
T | controls.keyboard.debugOverlays | Commuta la superposició de la línia de temps — mostra la programació amb indicadors de conflicte |
D | controls.keyboard.debugOverlays | Commuta la superposició de descàrregues — mostra el progrés de descàrrega dels mitjans |
V | controls.keyboard.videoControls | Commuta els controls de vídeo a tots els vídeos |
→ / PageDown | controls.keyboard.playbackControl | Disseny següent |
← / PageUp | controls.keyboard.playbackControl | Disseny anterior |
Space | controls.keyboard.playbackControl | Pausa / reprèn |
R | controls.keyboard.playbackControl | Torna al disseny programat |
Superposicions de depuració
Les superposicions de depuració es controlen exclusivament amb controls.keyboard.debugOverlays a config.json. No s'activen pel nivell de registre DEBUG — els nivells de registre només afecten la verbositat dels registres.
Superposició de la línia de temps (T)
- Disseny actual ressaltat amb un marcador
▶ - Rang horari i durada per a cada entrada
- Etiqueta
[def]als dissenys per defecte/de reserva - Insígnia
OFFLINEquan es perd la connectivitat amb el CMS - Indicadors de conflicte que mostren dissenys suprimits
- Clic per saltar — feu clic a qualsevol disseny per anar-hi directament
Superposició de descàrregues (D)
- Descàrregues actives amb barres de progrés i velocitat
- Profunditat de la cua
- Estat inactiu quan tots els mitjans estan en memòria cau
Arquitectura del Service Worker
- Transmissió progressiva — mitjans grans servits mitjançant transmissió per fragments amb peticions Range
- Descàrregues dirigides per XLF — analitza el XLF del disseny per descarregar exactament els mitjans necessaris
- Descàrregues ordenades per disseny — el disseny que s'està reproduint es descarrega primer
- Mida de fragments adaptativa — s'ajusta segons la RAM del dispositiu (nivells 4GB/8GB+)