@xiboplayer/renderer 0.2.0 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +24 -68
  2. package/package.json +2 -2
  3. package/src/index.js +2 -0
package/README.md CHANGED
@@ -1,16 +1,17 @@
1
- # @xiboplayer/renderer Documentation
1
+ # @xiboplayer/renderer
2
2
 
3
- **RendererLite: Fast, efficient layout rendering engine.**
3
+ **XLF layout rendering engine for Xibo digital signage.**
4
4
 
5
5
  ## Overview
6
6
 
7
- The `@xiboplayer/renderer` package provides:
7
+ RendererLite parses Xibo Layout Format (XLF) files and builds a live DOM with:
8
8
 
9
- - **RendererLite** - Lightweight XLF layout renderer
10
- - **Layout parser** - XLF to JSON translation
11
- - **Widget system** - Extensible widget rendering
12
- - **Transition engine** - Smooth layout transitions
13
- - **Element reuse** - Performance optimization (50% memory reduction)
9
+ - **Rich media** — video (MP4/HLS), images, PDF (via PDF.js), text/ticker, web pages, clock, calendar, weather
10
+ - **Transitions** — fade and fly (8-direction compass) via Web Animations API
11
+ - **Interactive actions** — touch/click and keyboard triggers for widget navigation, layout jumps, and commands
12
+ - **Layout preloading** — 2-layout pool pre-builds upcoming layouts at 75% of current duration for zero-gap transitions
13
+ - **Proportional scaling** — ResizeObserver-based scaling to fit any screen resolution
14
+ - **Overlay support** — multiple simultaneous overlay layouts with independent z-index (1000+)
14
15
 
15
16
  ## Installation
16
17
 
@@ -25,74 +26,29 @@ import { RendererLite } from '@xiboplayer/renderer';
25
26
 
26
27
  const renderer = new RendererLite({
27
28
  container: document.getElementById('player'),
28
- cacheManager: cache
29
29
  });
30
30
 
31
- await renderer.loadLayout(xlf);
32
- renderer.start();
31
+ // Render a layout from parsed XLF
32
+ await renderer.renderLayout(xlf, { mediaBaseUrl: '/cache/' });
33
33
  ```
34
34
 
35
- ## Features
35
+ ## Widget Types
36
36
 
37
- ### Element Reuse Pattern
38
-
39
- Pre-creates all widget elements at layout load, toggles visibility instead of recreating DOM:
40
-
41
- - **50% memory reduction** over 10 cycles
42
- - **10x faster** layout replay (<0.5s vs 2-3s)
43
- - Zero GC pressure from DOM churn
44
-
45
- ### Parallel Media Pre-fetch
46
-
47
- Fetches all media URLs upfront in parallel, enabling instant widget rendering.
48
-
49
- ### Dynamic Video Duration
50
-
51
- Respects `useDuration` flag from XLF, uses video metadata when duration should be dynamic.
52
-
53
- ## API Reference
54
-
55
- ### RendererLite
56
-
57
- ```javascript
58
- class RendererLite {
59
- constructor(options)
60
- async loadLayout(xlf)
61
- start()
62
- stop()
63
- pause()
64
- resume()
65
- on(event, callback)
66
- }
67
- ```
68
-
69
- ### Events
70
-
71
- - `layout:loaded` - Layout parsed and ready
72
- - `layout:start` - Layout playback started
73
- - `layout:end` - Layout completed
74
- - `region:start` - Region playback started
75
- - `widget:start` - Widget started
76
-
77
- ## Performance
78
-
79
- | Metric | XLR | Arexibo | RendererLite |
80
- |--------|-----|---------|--------------|
81
- | Initial load | 17-20s | 12-15s | **3-5s** |
82
- | Layout replay | 2-3s | <1s | **<0.5s** |
83
- | Memory (10 cycles) | +500MB | Stable | **Stable** |
37
+ | Widget | Implementation |
38
+ |--------|---------------|
39
+ | Video | `<video>` with native HLS (Safari) + hls.js fallback, pause-on-last-frame |
40
+ | Image | `<img>` with objectFit contain, blob URL from cache |
41
+ | PDF | PDF.js canvas rendering (dynamically imported) |
42
+ | Text / Ticker | iframe with CMS-rendered HTML via GetResource |
43
+ | Web page | bare `<iframe src="...">` |
44
+ | Clock, Calendar, Weather | iframe via GetResource (server-rendered) |
45
+ | All other CMS widgets | Generic iframe via GetResource |
84
46
 
85
47
  ## Dependencies
86
48
 
87
- - `@xiboplayer/utils` - Logger, EventEmitter
88
- - `pdfjs-dist` - PDF rendering
89
-
90
- ## Related Packages
91
-
92
- - [@xiboplayer/core](../../core/docs/) - Player orchestration
93
- - [@xiboplayer/cache](../../cache/docs/) - Media caching
49
+ - `@xiboplayer/utils` — logger, events
50
+ - `pdfjs-dist` — PDF rendering
94
51
 
95
52
  ---
96
53
 
97
- **Package Version**: 1.0.0
98
- **Last Updated**: 2026-02-10
54
+ **Part of the [XiboPlayer SDK](https://github.com/xibo-players/xiboplayer)** | [MCP Server](https://github.com/xibo-players/xiboplayer/tree/main/mcp-server) for AI-assisted development
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xiboplayer/renderer",
3
- "version": "0.2.0",
3
+ "version": "0.3.1",
4
4
  "description": "RendererLite - Fast, efficient XLF layout rendering engine",
5
5
  "type": "module",
6
6
  "main": "./src/index.js",
@@ -12,7 +12,7 @@
12
12
  "dependencies": {
13
13
  "nanoevents": "^9.1.0",
14
14
  "pdfjs-dist": "^4.10.38",
15
- "@xiboplayer/utils": "0.2.0"
15
+ "@xiboplayer/utils": "0.3.1"
16
16
  },
17
17
  "devDependencies": {
18
18
  "vitest": "^2.0.0",
package/src/index.js CHANGED
@@ -1,4 +1,6 @@
1
1
  // @xiboplayer/renderer - Layout rendering
2
+ import pkg from '../package.json' with { type: 'json' };
3
+ export const VERSION = pkg.version;
2
4
  export { RendererLite } from './renderer-lite.js';
3
5
  export { LayoutPool } from './layout-pool.js';
4
6
  export { LayoutTranslator } from './layout.js';