@xiboplayer/renderer 0.4.0 → 0.4.3

package/README.md

@@ -12,6 +12,8 @@ RendererLite parses Xibo Layout Format (XLF) files and builds a live DOM with:
 - **Layout preloading** — 2-layout pool pre-builds upcoming layouts at 75% of current duration for zero-gap transitions
 - **Proportional scaling** — ResizeObserver-based scaling to fit any screen resolution
 - **Overlay support** — multiple simultaneous overlay layouts with independent z-index (1000+)
+- **Absolute widget positioning** — widget elements use `position: absolute` within regions to layer correctly in multi-widget regions
+- **Animation cleanup** — `fill: forwards` animations cancelled between widgets to prevent stale visual state (e.g. video hidden after PDF)
 
 ## Installation
 
@@ -37,7 +39,7 @@ await renderer.renderLayout(xlf, { mediaBaseUrl: '/cache/' });
 | Widget | Implementation |
 |--------|---------------|
 | Video | `<video>` with native HLS (Safari) + hls.js fallback, pause-on-last-frame |
-| Image | `<img>` with objectFit contain, blob URL from cache |
+| Image | `<img>` with CMS scaleType mapping (center->contain, stretch->fill, fit->cover), blob URL from cache |
 | PDF | PDF.js canvas rendering (dynamically imported) |
 | Text / Ticker | iframe with CMS-rendered HTML via GetResource |
 | Web page | bare `<iframe src="...">` |

package/docs/RENDERER_COMPARISON.md

@@ -26,6 +26,8 @@
 | Visibility toggle | ✅ Yes | ✅ Yes | ✅ Yes | ✅ Complete |
 | Avoid DOM recreation | ✅ Yes | ✅ Yes | ✅ Yes | ✅ Complete |
 | Layout reuse detection | ⚠️ Partial | ✅ Yes | ✅ Yes | ✅ Better than XLR! |
+| Widget absolute positioning | ✅ Yes | ✅ Yes | ✅ Yes | ✅ Complete |
+| Image scaleType mapping | ✅ Yes | ✅ Yes | ✅ Yes | ✅ Complete (center->contain, stretch->fill, fit->cover) |
 | **Widget Types** | | | | |
 | Image | ✅ Yes | ✅ Yes | ✅ Yes | ✅ Complete |
 | Video | ✅ Yes | ✅ Yes | ✅ Yes | ✅ Complete |
@@ -206,20 +208,15 @@ RendererLite events match XLR/Arexibo with additions:
 
 ### 7. Memory Management
 
-**Status**: ⚠️ **Good with Minor Gap**
+**Status**: ✅ **Complete**
 
 **What's correct**:
 - ✅ Elements reused (not recreated)
-- ✅ Blob URLs revoked on layout change
+- ✅ Blob URLs revoked on layout change (layout-scoped tracking)
 - ✅ Cache cleared appropriately
 - ✅ Timers cleared before new layout
 - ✅ Event listeners managed properly
-
-**Gap identified**:
-- ⚠️ Layout-scoped blob URL tracking missing
-- ⚠️ Could accumulate blob URLs across many layout cycles
-
-**Impact**: Low (only affects 24/7 deployments with frequent layout changes)
+- ✅ `fill: forwards` animations cancelled between widgets to prevent stale visual state
 
 ---
 
@@ -231,12 +228,7 @@ RendererLite events match XLR/Arexibo with additions:
 
 ### Important Features (Should Have)
 
-1. **Blob URL lifecycle tracking**
-   - **Priority**: Medium
-   - **Impact**: Memory leak in long-running deployments
-   - **Effort**: Low (add Map tracking)
-
-2. **Widget action events**
+1. **Widget action events**
    - **Priority**: Low
    - **Impact**: Interactive widgets might need action callbacks
    - **Effort**: Medium (event propagation from widget iframes)
@@ -417,9 +409,8 @@ XLF → Parse → Pre-create Elements → Toggle Visibility → Transitions
 
 ### ⚠️ Features Needing Work
 
-1. **Blob URL Lifecycle**: Needs layout-scoped tracking
-2. **Widget Actions**: Event propagation from iframes
-3. **Service Worker**: Currently disabled (HTTP 202 issues)
+1. **Widget Actions**: Event propagation from iframes
+2. **Service Worker**: Currently disabled (HTTP 202 issues)
 
 ### ❌ Features Not Applicable
 
@@ -472,7 +463,7 @@ XLF → Parse → Pre-create Elements → Toggle Visibility → Transitions
 
 **RendererLite successfully implements the Arexibo pattern** and adds significant performance improvements through parallelization. The implementation is production-ready with minor improvements needed for blob URL lifecycle management.
 
-**Feature Parity**: ~95% (missing only blob URL tracking and widget actions)
+**Feature Parity**: ~98% (missing only widget action event propagation)
 **Performance**: Exceeds XLR and Arexibo benchmarks
 **Memory**: Stable with Arexibo pattern correctly implemented
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xiboplayer/renderer",
-  "version": "0.4.0",
+  "version": "0.4.3",
   "description": "RendererLite - Fast, efficient XLF layout rendering engine",
   "type": "module",
   "main": "./src/index.js",
@@ -12,8 +12,8 @@
   "dependencies": {
     "nanoevents": "^9.1.0",
     "pdfjs-dist": "^4.10.38",
-    "@xiboplayer/cache": "0.4.0",
-    "@xiboplayer/utils": "0.4.0"
+    "@xiboplayer/cache": "0.4.3",
+    "@xiboplayer/utils": "0.4.3"
   },
   "devDependencies": {
     "vitest": "^2.0.0",

package/src/renderer-lite.js

@@ -1098,6 +1098,11 @@ export class RendererLite {
 
           try {
             const element = await this.createWidgetElement(widget, region);
+            element.style.position = 'absolute';
+            element.style.top = '0';
+            element.style.left = '0';
+            element.style.width = '100%';
+            element.style.height = '100%';
             element.style.visibility = 'hidden'; // Hidden by default
             element.style.opacity = '0';
             region.element.appendChild(element);
@@ -1207,8 +1212,9 @@ export class RendererLite {
    * @returns {Promise<HTMLElement>} Widget DOM element
    */
   async createWidgetElement(widget, region) {
-    // render="html" forces GetResource iframe regardless of native type
-    if (widget.render === 'html') {
+    // render="html" forces GetResource iframe regardless of native type,
+    // EXCEPT for types we handle natively (PDF: CMS bundle can't work cross-origin)
+    if (widget.render === 'html' && widget.type !== 'pdf') {
       return await this.renderGenericWidget(widget, region);
     }
 
@@ -1228,6 +1234,8 @@ export class RendererLite {
         return await this.renderWebpage(widget, region);
       case 'localvideo':
         return await this.renderVideo(widget, region);
+      case 'videoin':
+        return await this.renderVideoIn(widget, region);
       case 'powerpoint':
       case 'flash':
         // Legacy Windows-only types — show placeholder instead of failing silently
@@ -1259,6 +1267,18 @@ export class RendererLite {
     // Restart video or audio on widget show (even if looping)
     const mediaEl = this.findMediaElement(element, 'VIDEO') || this.findMediaElement(element, 'AUDIO');
     if (mediaEl) {
+      // Re-acquire webcam stream if it was stopped during _hideWidget()
+      if (mediaEl.tagName === 'VIDEO' && mediaEl._mediaConstraints && !mediaEl._mediaStream) {
+        navigator.mediaDevices.getUserMedia(mediaEl._mediaConstraints).then(stream => {
+          mediaEl.srcObject = stream;
+          mediaEl._mediaStream = stream;
+          this.log.info(`Webcam stream re-acquired for widget ${widget.id}`);
+        }).catch(e => {
+          this.log.warn('Failed to re-acquire webcam stream:', e.message);
+        });
+        return; // srcObject auto-plays, no need for _restartMediaElement
+      }
+
       this._restartMediaElement(mediaEl);
       this.log.info(`${mediaEl.tagName === 'VIDEO' ? 'Video' : 'Audio'} restarted: ${widget.fileId || widget.id}`);
     }
@@ -1427,19 +1447,27 @@ export class RendererLite {
     if (!element) {
       this.log.warn(`Widget ${widget.id} not pre-created, creating now`);
       element = await this.createWidgetElement(widget, region);
+      element.style.position = 'absolute';
+      element.style.top = '0';
+      element.style.left = '0';
+      element.style.width = '100%';
+      element.style.height = '100%';
       region.widgetElements.set(widget.id, element);
       region.element.appendChild(element);
     }
 
     // Hide all other widgets in region
+    // Cancel fill:forwards animations first — they override inline styles
     for (const [widgetId, widgetEl] of region.widgetElements) {
       if (widgetId !== widget.id) {
+        widgetEl.getAnimations?.().forEach(a => a.cancel());
         widgetEl.style.visibility = 'hidden';
         widgetEl.style.opacity = '0';
       }
     }
 
     this.updateMediaElement(element, widget);
+    element.getAnimations?.().forEach(a => a.cancel());
     element.style.visibility = 'visible';
 
     if (widget.transitions.in) {
@@ -1553,6 +1581,13 @@ export class RendererLite {
     const videoEl = widgetElement.querySelector('video');
     if (videoEl && widget.options.loop !== '1') videoEl.pause();
 
+    // Stop MediaStream tracks (webcam/mic) to release the device
+    if (videoEl?._mediaStream) {
+      videoEl._mediaStream.getTracks().forEach(t => t.stop());
+      videoEl._mediaStream = null;
+      videoEl.srcObject = null;
+    }
+
     const audioEl = widgetElement.querySelector('audio');
     if (audioEl && widget.options.loop !== '1') audioEl.pause();
 
@@ -1794,16 +1829,20 @@ export class RendererLite {
     img.className = 'renderer-lite-widget';
     img.style.width = '100%';
     img.style.height = '100%';
-    // Scale type: stretch → fill, center → none (natural size), default → contain
+    // Scale type mapping (CMS image.xml):
+    // center (default) → contain: scale proportionally to fit region, centered
+    // stretch → fill: ignore aspect ratio, fill entire region
+    // fit → cover: scale proportionally to fill region, crop excess
     const scaleType = widget.options.scaleType;
-    const fitMap = { stretch: 'fill', center: 'none', fit: 'contain' };
+    const fitMap = { stretch: 'fill', center: 'contain', fit: 'cover' };
     img.style.objectFit = fitMap[scaleType] || 'contain';
 
-    // Alignment: map align/valign to CSS object-position
+    // Alignment: map alignId/valignId to CSS object-position
+    // XLF tags are <alignId> and <valignId> (from CMS image.xml property ids)
     const alignMap = { left: 'left', center: 'center', right: 'right' };
     const valignMap = { top: 'top', middle: 'center', bottom: 'bottom' };
-    const hPos = alignMap[widget.options.align] || 'center';
-    const vPos = valignMap[widget.options.valign] || 'center';
+    const hPos = alignMap[widget.options.alignId] || 'center';
+    const vPos = valignMap[widget.options.valignId] || 'center';
     img.style.objectPosition = `${hPos} ${vPos}`;
 
     img.style.opacity = '0';
@@ -1943,6 +1982,65 @@ export class RendererLite {
     return video;
   }
 
+  /**
+   * Render videoin (webcam/microphone) widget.
+   * Uses getUserMedia() to capture live video from camera hardware.
+   * @param {Object} widget - Widget config with options (sourceId, showFullScreen, mirror, mute, captureAudio)
+   * @param {Object} region - Region dimensions (width, height)
+   * @returns {HTMLVideoElement}
+   */
+  async renderVideoIn(widget, region) {
+    const video = document.createElement('video');
+    video.className = 'renderer-lite-widget';
+    video.style.width = '100%';
+    video.style.height = '100%';
+    video.style.objectFit = widget.options.showFullScreen === '1' ? 'cover' : 'contain';
+    video.autoplay = true;
+    video.playsInline = true;
+    video.controls = false;
+    video.muted = widget.options.mute !== '0'; // Muted by default to prevent audio feedback
+
+    // Mirror mode (front-facing camera)
+    if (widget.options.mirror === '1') {
+      video.style.transform = 'scaleX(-1)';
+    }
+
+    // Build getUserMedia constraints
+    const videoConstraints = {
+      width: { ideal: region.width },
+      height: { ideal: region.height },
+    };
+    const deviceId = widget.options.sourceId || widget.options.deviceId;
+    if (deviceId) {
+      videoConstraints.deviceId = { exact: deviceId };
+    } else {
+      videoConstraints.facingMode = widget.options.facingMode || 'environment';
+    }
+
+    const constraints = {
+      video: videoConstraints,
+      audio: widget.options.captureAudio === '1',
+    };
+
+    // Store constraints for re-acquisition after layout transitions
+    video._mediaConstraints = constraints;
+
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia(constraints);
+      video.srcObject = stream;
+      video._mediaStream = stream;
+      this.log.info(`Webcam stream acquired for widget ${widget.id} (tracks: ${stream.getTracks().length})`);
+    } catch (e) {
+      this.log.warn(`getUserMedia failed for widget ${widget.id}: ${e.message}`);
+      return this._renderUnsupportedPlaceholder(
+        { ...widget, type: 'Camera unavailable' },
+        region
+      );
+    }
+
+    return video;
+  }
+
   /**
    * Render audio widget
    */
@@ -2110,7 +2208,9 @@ export class RendererLite {
       try {
         const pdfjsModule = await import('pdfjs-dist');
         window.pdfjsLib = pdfjsModule;
-        window.pdfjsLib.GlobalWorkerOptions.workerSrc = `${window.location.origin}/player/pdf.worker.min.mjs`;
+        // Derive worker path from current page location (works for /player/pwa/ and /player/)
+        const basePath = window.location.pathname.replace(/\/[^/]*$/, '/');
+        window.pdfjsLib.GlobalWorkerOptions.workerSrc = `${window.location.origin}${basePath}pdf.worker.min.mjs`;
       } catch (error) {
         this.log.error('PDF.js not available:', error);
         container.innerHTML = '<div style="color:white;padding:20px;text-align:center;">PDF viewer unavailable</div>';
@@ -2454,6 +2554,11 @@ export class RendererLite {
 
           try {
             const element = await this.createWidgetElement(widget, region);
+            element.style.position = 'absolute';
+            element.style.top = '0';
+            element.style.left = '0';
+            element.style.width = '100%';
+            element.style.height = '100%';
             element.style.visibility = 'hidden';
             element.style.opacity = '0';
             region.element.appendChild(element);

package/src/renderer-lite.test.js

@@ -451,7 +451,7 @@ describe('RendererLite', () => {
       expect(element.style.objectFit).toBe('fill');
     });
 
-    it('should apply objectFit none when scaleType is center (natural size)', async () => {
+    it('should apply objectFit contain when scaleType is center (proportional fit)', async () => {
       const widget = {
         type: 'image',
         id: 'm1',
@@ -464,10 +464,10 @@ describe('RendererLite', () => {
       const region = { width: 1920, height: 1080 };
       const element = await renderer.renderImage(widget, region);
 
-      expect(element.style.objectFit).toBe('none');
+      expect(element.style.objectFit).toBe('contain');
     });
 
-    it('should apply objectFit contain when scaleType is fit', async () => {
+    it('should apply objectFit cover when scaleType is fit', async () => {
       const widget = {
         type: 'image',
         id: 'm1',
@@ -480,15 +480,15 @@ describe('RendererLite', () => {
       const region = { width: 1920, height: 1080 };
       const element = await renderer.renderImage(widget, region);
 
-      expect(element.style.objectFit).toBe('contain');
+      expect(element.style.objectFit).toBe('cover');
     });
 
-    it('should map align and valign to objectPosition', async () => {
+    it('should map alignId and valignId to objectPosition', async () => {
       const widget = {
         type: 'image',
         id: 'm1',
         fileId: '1',
-        options: { uri: 'test.png', align: 'left', valign: 'top' },
+        options: { uri: 'test.png', alignId: 'left', valignId: 'top' },
         duration: 10,
         transitions: { in: null, out: null }
       };
@@ -499,12 +499,12 @@ describe('RendererLite', () => {
       expect(element.style.objectPosition).toBe('left top');
     });
 
-    it('should map align right and valign bottom to objectPosition', async () => {
+    it('should map alignId right and valignId bottom to objectPosition', async () => {
       const widget = {
         type: 'image',
         id: 'm1',
         fileId: '1',
-        options: { uri: 'test.png', align: 'right', valign: 'bottom' },
+        options: { uri: 'test.png', alignId: 'right', valignId: 'bottom' },
         duration: 10,
         transitions: { in: null, out: null }
       };
@@ -515,12 +515,12 @@ describe('RendererLite', () => {
       expect(element.style.objectPosition).toBe('right bottom');
     });
 
-    it('should map valign middle to center in objectPosition', async () => {
+    it('should map valignId middle to center in objectPosition', async () => {
       const widget = {
         type: 'image',
         id: 'm1',
         fileId: '1',
-        options: { uri: 'test.png', align: 'center', valign: 'middle' },
+        options: { uri: 'test.png', alignId: 'center', valignId: 'middle' },
         duration: 10,
         transitions: { in: null, out: null }
       };
@@ -536,7 +536,7 @@ describe('RendererLite', () => {
         type: 'image',
         id: 'm1',
         fileId: '1',
-        options: { uri: 'test.png', scaleType: 'stretch', align: 'left', valign: 'bottom' },
+        options: { uri: 'test.png', scaleType: 'stretch', alignId: 'left', valignId: 'bottom' },
         duration: 10,
         transitions: { in: null, out: null }
       };