@xiboplayer/renderer 0.3.7 → 0.4.1

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.3.7",
+  "version": "0.4.1",
   "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.3.7",
-    "@xiboplayer/utils": "0.3.7"
+    "@xiboplayer/cache": "0.4.1",
+    "@xiboplayer/utils": "0.4.1"
   },
   "devDependencies": {
     "vitest": "^2.0.0",

package/src/layout.js

@@ -4,6 +4,9 @@
  */
 
 import { cacheWidgetHtml } from '@xiboplayer/cache';
+import { createLogger } from '@xiboplayer/utils';
+
+const log = createLogger('Layout');
 
 export class LayoutTranslator {
   constructor(xmds) {
@@ -124,9 +127,9 @@ export class LayoutTranslator {
 
       for (let attempt = 1; attempt <= retries; attempt++) {
         try {
-          console.log(`[Layout] Fetching resource for ${type} widget (layout=${layoutId}, region=${regionId}, media=${id}) - attempt ${attempt}/${retries}`);
+          log.info(`Fetching resource for ${type} widget (layout=${layoutId}, region=${regionId}, media=${id}) - attempt ${attempt}/${retries}`);
           raw = await this.xmds.getResource(layoutId, regionId, id);
-          console.log(`[Layout] Got resource HTML (${raw.length} chars)`);
+          log.info(`Got resource HTML (${raw.length} chars)`);
 
           // Store widget HTML in cache and save cache key for iframe src generation
           const widgetCacheKey = await cacheWidgetHtml(layoutId, regionId, id, raw);
@@ -137,12 +140,12 @@ export class LayoutTranslator {
 
         } catch (error) {
           lastError = error;
-          console.warn(`[Layout] Failed to get resource (attempt ${attempt}/${retries}):`, error.message);
+          log.warn(`Failed to get resource (attempt ${attempt}/${retries}):`, error.message);
 
           // If not last attempt, wait before retry
           if (attempt < retries) {
             const delay = attempt * 2000; // 2s, 4s backoff
-            console.log(`[Layout] Retrying in ${delay}ms...`);
+            log.info(`Retrying in ${delay}ms...`);
             await new Promise(resolve => setTimeout(resolve, delay));
           }
         }
@@ -150,7 +153,7 @@ export class LayoutTranslator {
 
       // If all retries failed, try to use cached version as fallback
       if (!raw && lastError) {
-        console.warn(`[Layout] All retries failed, checking for cached widget HTML...`);
+        log.warn('All retries failed, checking for cached widget HTML...');
 
         // Try to get cached widget HTML directly from Cache API
         try {
@@ -161,14 +164,14 @@ export class LayoutTranslator {
           if (cached) {
             raw = await cached.text();
             options.widgetCacheKey = cachedKey;
-            console.log(`[Layout] Using cached widget HTML (${raw.length} chars) - CMS update pending`);
+            log.info(`Using cached widget HTML (${raw.length} chars) - CMS update pending`);
           } else {
-            console.error(`[Layout] No cached version available for widget ${id}`);
+            log.error(`No cached version available for widget ${id}`);
             // Show minimal placeholder that doesn't look like an error
             raw = `<div style="display:flex;align-items:center;justify-content:center;height:100%;color:#999;font-size:18px;">Content updating...</div>`;
           }
         } catch (cacheError) {
-          console.error(`[Layout] Cache fallback failed:`, cacheError);
+          log.error('Cache fallback failed:', cacheError);
           raw = `<div style="display:flex;align-items:center;justify-content:center;height:100%;color:#999;font-size:18px;">Content updating...</div>`;
         }
       }
@@ -894,7 +897,7 @@ ${mediaJS}
           startFn = iframe.startFn;
           stopFn = iframe.stopFn;
         } else {
-          console.warn(`[Layout] Unsupported media type: ${media.type}`);
+          log.warn(`Unsupported media type: ${media.type}`);
           startFn = `() => console.log('Unsupported media type: ${media.type}')`;
         }
     }