@xiboplayer/renderer 0.6.13 → 0.7.1

package/package.json

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

package/src/index.d.ts

@@ -63,6 +63,8 @@ export class RendererLite {
   resume(): void;
   isPaused(): boolean;
   resumeRegionMedia?(regionId: string): void;
+  showLayout(layoutId?: number): void;
+  getCurrentLayoutId(): number | null;
 
   parseXlf(xlfXml: string): any;
   parseWidget(mediaEl: Element): any;

package/src/layout-pool.js

@@ -279,6 +279,18 @@ export class LayoutPool {
     return count;
   }
 
+  /**
+   * Get the most recently added layout ID.
+   * @returns {number|undefined}
+   */
+  getLatest() {
+    let latest;
+    for (const id of this.layouts.keys()) {
+      latest = id;
+    }
+    return latest;
+  }
+
   /**
    * Clear all entries (both hot and warm).
    */

package/src/renderer-lite.js

@@ -41,7 +41,7 @@
  * ```
  */
 
-import { createNanoEvents } from 'nanoevents';
+import { EventEmitter } from '@xiboplayer/utils';
 import { createLogger, isDebug, PLAYER_API } from '@xiboplayer/utils';
 import { parseLayoutDuration } from '@xiboplayer/schedule';
 import { LayoutPool } from './layout-pool.js';
@@ -205,7 +205,7 @@ export class RendererLite {
     this.log = createLogger('RendererLite', options.logLevel);
 
     // Event emitter for lifecycle hooks
-    this.emitter = createNanoEvents();
+    this.emitter = new EventEmitter();
 
     // State
     this.currentLayout = null;
@@ -215,6 +215,7 @@ export class RendererLite {
     this.layoutTimer = null;
     this.layoutEndEmitted = false; // Prevents double layoutEnd on stop after timer
     this._deferredTimerLayoutId = null; // Set when timer is deferred for dynamic layouts
+    this._deferredTimerFallback = null; // Safety timeout: starts layout timer if metadata never arrives
     this._paused = false;
     this._layoutTimerStartedAt = null;  // Date.now() when layout timer started
     this._layoutTimerDurationMs = null; // Total layout duration in ms
@@ -222,6 +223,10 @@ export class RendererLite {
     this.layoutBlobUrls = new Map(); // layoutId => Set<blobUrl> (for lifecycle tracking)
     this.audioOverlays = new Map(); // widgetId => [HTMLAudioElement] (audio overlays for widgets)
 
+    // Bound methods (avoid lambda allocation per call in startRegion/_advanceRegion)
+    this._stopWidgetBound = (rid, idx) => this.stopWidget(rid, idx);
+    this._renderWidgetBound = (rid, idx) => this.renderWidget(rid, idx);
+
     // Scale state (for fitting layout to screen)
     this.scaleFactor = 1;
     this.offsetX = 0;
@@ -355,7 +360,7 @@ export class RendererLite {
    * Event emitter interface (like XMR wrapper)
    */
   on(event, callback) {
-    return this.emitter.on(event, callback);
+    this.emitter.on(event, callback);
   }
 
   emit(event, ...args) {
@@ -720,6 +725,11 @@ export class RendererLite {
         if (this._hasUnprobedVideos()) {
           this.log.info(`Layout duration updated to ${maxRegionDuration}s but still has unprobed videos — keeping timer deferred`);
         } else {
+          // Cancel safety fallback — metadata arrived in time
+          if (this._deferredTimerFallback) {
+            clearTimeout(this._deferredTimerFallback);
+            this._deferredTimerFallback = null;
+          }
           const elapsed = Date.now() - (this._layoutTimerStartedAt || Date.now());
           const remainingMs = Math.max(1000, maxRegionDuration * 1000 - elapsed);
           this._deferredTimerLayoutId = null;
@@ -947,8 +957,8 @@ export class RendererLite {
     const isMain = regionMap === this.regions;
     this._startRegionCycle(
       region, regionId,
-      isMain ? (rid, idx) => this.renderWidget(rid, idx) : (rid, idx) => this.renderWidget(rid, idx),
-      isMain ? (rid, idx) => this.stopWidget(rid, idx) : (rid, idx) => this.stopWidget(rid, idx),
+      isMain ? this._renderWidgetBound : this._renderWidgetBound,
+      isMain ? this._stopWidgetBound : this._stopWidgetBound,
       isMain ? () => this.checkLayoutComplete() : undefined
     );
   }
@@ -1194,7 +1204,7 @@ export class RendererLite {
 
         // Stop all region timers and widgets, then reset to first widget
         this._clearRegionTimers(this.regions);
-        this._stopAllRegionWidgets(this.regions, (rid, idx) => this.stopWidget(rid, idx));
+        this._stopAllRegionWidgets(this.regions, this._stopWidgetBound);
         for (const [, region] of this.regions) {
           region.currentIndex = 0;
           region.complete = false;
@@ -1205,8 +1215,13 @@ export class RendererLite {
           clearTimeout(this.layoutTimer);
           this.layoutTimer = null;
         }
-        this._deferredTimerLayoutId = null;
+
         this.layoutEndEmitted = false;
+        this._deferredTimerLayoutId = null;
+        if (this._deferredTimerFallback) {
+          clearTimeout(this._deferredTimerFallback);
+          this._deferredTimerFallback = null;
+        }
 
         // DON'T call stopCurrentLayout() - keep elements alive!
         // DON'T recreate regions/elements - already exist!
@@ -1378,8 +1393,8 @@ export class RendererLite {
     const region = this.regions.get(regionId);
     this._startRegionCycle(
       region, regionId,
-      (rid, idx) => this.renderWidget(rid, idx),
-      (rid, idx) => this.stopWidget(rid, idx),
+      this._renderWidgetBound,
+      this._stopWidgetBound,
       () => {
         this.log.info(`Region ${regionId} completed one full cycle`);
         this.checkLayoutComplete();
@@ -1599,12 +1614,24 @@ export class RendererLite {
     }
 
     // Dynamic layouts (useDuration=0 videos): defer timer until video metadata
-    // provides real durations. Without this, the 60s fallback fires prematurely
-    // causing rapid layout cycling ("layout storm") on startup.
+    // provides real durations. Safety timeout ensures corrupt/missing videos
+    // don't freeze the display forever.
     if (layout.isDynamic && this._hasUnprobedVideos()) {
       this._deferredTimerLayoutId = layoutId;
       this._layoutTimerStartedAt = Date.now();
       this.log.info(`Layout ${layoutId} has unprobed videos — deferring timer until metadata loads`);
+
+      // Safety: if metadata never arrives (corrupt file, codec error), start
+      // the timer with the estimated duration after 30s so the display keeps cycling.
+      this._deferredTimerFallback = setTimeout(() => {
+        this._deferredTimerFallback = null;
+        if (this._deferredTimerLayoutId === layoutId && !this.layoutTimer) {
+          this.log.warn(`Layout ${layoutId}: metadata timeout after 30s — starting timer with ${layout.duration}s estimate`);
+          this._deferredTimerLayoutId = null;
+          this._startLayoutTimer(layoutId, layout);
+        }
+      }, 30000);
+
       return;
     }
 
@@ -1628,6 +1655,10 @@ export class RendererLite {
    */
   _startLayoutTimer(layoutId, layout) {
     this._deferredTimerLayoutId = null;
+    if (this._deferredTimerFallback) {
+      clearTimeout(this._deferredTimerFallback);
+      this._deferredTimerFallback = null;
+    }
     const layoutDurationMs = layout.duration * 1000;
     this.log.info(`Layout ${layoutId} will end after ${layout.duration}s`);
 
@@ -2274,6 +2305,18 @@ export class RendererLite {
       const errorCode = error?.code;
       const errorMessage = error?.message || 'Unknown error';
       this.log.warn(`Video error: ${storedAs}, code: ${errorCode}, time: ${video.currentTime.toFixed(1)}s, message: ${errorMessage}`);
+
+      // Set fallback duration so the deferred timer can proceed.
+      // Without this, a corrupt video leaves widget.duration=0 forever,
+      // _hasUnprobedVideos() stays true, and the deferred timer never unblocks.
+      if (widget.useDuration === 0 && widget.duration === 0) {
+        widget.duration = 60;
+        this.log.info(`Set fallback duration 60s for errored widget ${widget.id}`);
+        if (this.currentLayoutId === createdForLayoutId) {
+          this.updateLayoutDuration();
+        }
+      }
+
       this.emit('videoError', { storedAs, fileId, errorCode, errorMessage, currentTime: video.currentTime });
     };
     video.addEventListener('error', onError);
@@ -2471,24 +2514,6 @@ export class RendererLite {
         // Use cache URL — SW serves HTML and intercepts sub-resources
         iframe.src = result.url;
 
-        // On hard reload (Ctrl+Shift+R), iframe navigation bypasses SW → server 404
-        // Detect and fall back to blob URL with original CMS signed URLs
-        if (result.fallback) {
-          const self = this;
-          iframe.addEventListener('load', function() {
-            try {
-              // Our cached widget HTML has a <base> tag; server 404 page doesn't
-              if (!iframe.contentDocument?.querySelector('base')) {
-                self.log.warn('Cache URL failed (hard reload?), using original CMS URLs');
-                const blob = new Blob([result.fallback], { type: 'text/html' });
-                const blobUrl = URL.createObjectURL(blob);
-                self.trackBlobUrl(blobUrl);
-                iframe.src = blobUrl;
-              }
-            } catch (e) { /* cross-origin — should not happen */ }
-          }, { once: true });
-        }
-
         // Parse NUMITEMS/DURATION from fallback HTML (cache path)
         if (result.fallback) {
           this._parseDurationComments(result.fallback, widget);
@@ -2710,24 +2735,6 @@ export class RendererLite {
         // Use cache URL — SW serves HTML and intercepts sub-resources
         iframe.src = result.url;
 
-        // On hard reload (Ctrl+Shift+R), iframe navigation bypasses SW → server 404
-        // Detect and fall back to blob URL with original CMS signed URLs
-        if (result.fallback) {
-          const self = this;
-          iframe.addEventListener('load', function() {
-            try {
-              // Our cached widget HTML has a <base> tag; server 404 page doesn't
-              if (!iframe.contentDocument?.querySelector('base')) {
-                self.log.warn('Cache URL failed (hard reload?), using original CMS URLs');
-                const blob = new Blob([result.fallback], { type: 'text/html' });
-                const blobUrl = URL.createObjectURL(blob);
-                self.trackBlobUrl(blobUrl);
-                iframe.src = blobUrl;
-              }
-            } catch (e) { /* cross-origin — should not happen */ }
-          }, { once: true });
-        }
-
         // Parse NUMITEMS/DURATION from fallback HTML (cache path)
         if (result.fallback) {
           this._parseDurationComments(result.fallback, widget);
@@ -3008,7 +3015,7 @@ export class RendererLite {
     if (oldLayoutId && this.layoutPool.has(oldLayoutId)) {
       // Stop all widgets before evicting (symmetric widgetEnd events)
       this._clearRegionTimers(this.regions);
-      this._stopAllRegionWidgets(this.regions, (rid, idx) => this.stopWidget(rid, idx));
+      this._stopAllRegionWidgets(this.regions, this._stopWidgetBound);
       // Old layout was preloaded — evict from pool (safe: removes its wrapper div)
       this.layoutPool.evict(oldLayoutId);
     } else {
@@ -3016,7 +3023,7 @@ export class RendererLite {
       // Region elements live directly in this.container (not a wrapper),
       // so we must remove them individually.
       this._clearRegionTimers(this.regions);
-      this._stopAllRegionWidgets(this.regions, (rid, idx) => this.stopWidget(rid, idx));
+      this._stopAllRegionWidgets(this.regions, this._stopWidgetBound);
       for (const [, region] of this.regions) {
         // Release video/audio resources before removing from DOM
         LayoutPool.releaseMediaElements(region.element);
@@ -3109,6 +3116,41 @@ export class RendererLite {
     this.log.info(`Swapped to preloaded layout ${layoutId} (instant transition)`);
   }
 
+  /**
+   * Get the currently showing layout ID.
+   * @returns {number|null}
+   */
+  getCurrentLayoutId() {
+    return this.currentLayoutId;
+  }
+
+  /**
+   * Show a preloaded layout (swap from pool to visible).
+   * If no layoutId, shows the most recently preloaded layout.
+   * No-ops if the layout is not in the pool.
+   * @param {number} [layoutId]
+   */
+  showLayout(layoutId) {
+    if (layoutId === undefined) {
+      layoutId = this.layoutPool.getLatest();
+      if (layoutId === undefined) {
+        this.log.warn('showLayout: no preloaded layout to show');
+        return;
+      }
+    }
+    // Same layout already showing — skip swap (self-swap would evict then fail).
+    // Same-layout replay is handled by renderLayout's replay path instead.
+    if (this.currentLayoutId === layoutId) {
+      this.log.info(`showLayout: layout ${layoutId} already showing`);
+      return;
+    }
+    if (!this.layoutPool.has(layoutId)) {
+      this.log.warn(`showLayout: layout ${layoutId} not in preload pool`);
+      return;
+    }
+    this._swapToPreloadedLayout(layoutId);
+  }
+
   /**
    * Check if all regions have completed one full cycle
    * This is informational only - layout timer is authoritative
@@ -3144,6 +3186,10 @@ export class RendererLite {
 
     this.layoutEndEmitted = false;
     this._deferredTimerLayoutId = null;
+    if (this._deferredTimerFallback) {
+      clearTimeout(this._deferredTimerFallback);
+      this._deferredTimerFallback = null;
+    }
     this.currentLayout = null;
     this.currentLayoutId = null;
 
@@ -3178,7 +3224,7 @@ export class RendererLite {
 
       // Stop all regions — use helper to stop ALL started widgets (canvas fix)
       this._clearRegionTimers(this.regions);
-      this._stopAllRegionWidgets(this.regions, (rid, idx) => this.stopWidget(rid, idx));
+      this._stopAllRegionWidgets(this.regions, this._stopWidgetBound);
       for (const [, region] of this.regions) {
         // Release video/audio resources before removing from DOM
         LayoutPool.releaseMediaElements(region.element);

package/src/renderer-lite.overlays.test.js

@@ -9,15 +9,24 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { RendererLite } from './renderer-lite.js';
 
-// Mock logger
-vi.mock('@xiboplayer/utils', () => ({
-  createLogger: () => ({
-    info: vi.fn(),
-    warn: vi.fn(),
-    error: vi.fn(),
-    debug: vi.fn()
-  })
-}));
+// Mock logger (keep real EventEmitter for RendererLite construction)
+vi.mock('@xiboplayer/utils', () => {
+  // Inline minimal EventEmitter — avoids async importActual which breaks vitest mock hoisting
+  class EventEmitter {
+    constructor() { this._listeners = new Map(); }
+    on(event, cb) { if (!this._listeners.has(event)) this._listeners.set(event, []); this._listeners.get(event).push(cb); }
+    emit(event, ...args) { for (const cb of this._listeners.get(event) || []) cb(...args); }
+  }
+  return {
+    EventEmitter,
+    createLogger: () => ({
+      info: vi.fn(),
+      warn: vi.fn(),
+      error: vi.fn(),
+      debug: vi.fn()
+    })
+  };
+});
 
 describe('RendererLite - Overlay Rendering', () => {
   let renderer;

package/src/renderer-lite.test.js

@@ -1230,6 +1230,38 @@ describe('RendererLite', () => {
 
       vi.useRealTimers();
     });
+
+    it('should show a preloaded layout via showLayout()', async () => {
+      const xlf = `<layout><region id="r1"></region></layout>`;
+      const layoutStartHandler = vi.fn();
+      renderer.on('layoutStart', layoutStartHandler);
+
+      // Preload layout hidden
+      await renderer.preloadLayout(xlf, 42);
+      expect(renderer.currentLayoutId).not.toBe(42);
+      expect(layoutStartHandler).not.toHaveBeenCalled();
+
+      // Show it
+      renderer.showLayout(42);
+      expect(renderer.currentLayoutId).toBe(42);
+      expect(layoutStartHandler).toHaveBeenCalledWith(42, expect.any(Object));
+    });
+
+    it('should show the latest preloaded layout when no id given', async () => {
+      const xlf1 = `<layout bgcolor="#ff0000"><region id="r1"></region></layout>`;
+      const xlf2 = `<layout bgcolor="#00ff00"><region id="r2"></region></layout>`;
+
+      await renderer.preloadLayout(xlf1, 10);
+      await renderer.preloadLayout(xlf2, 20);
+
+      renderer.showLayout();
+      expect(renderer.currentLayoutId).toBe(20);
+    });
+
+    it('should no-op showLayout when pool is empty', () => {
+      renderer.showLayout(999);
+      expect(renderer.currentLayoutId).toBeNull();
+    });
   });
 
   describe('Layout Replay Optimization', () => {