@xiboplayer/renderer 0.6.12 → 0.7.0

package/package.json

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

package/src/index.d.ts

@@ -63,6 +63,7 @@ export class RendererLite {
   resume(): void;
   isPaused(): boolean;
   resumeRegionMedia?(regionId: string): void;
+  showLayout(layoutId?: number): void;
 
   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

@@ -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
@@ -720,6 +721,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;
@@ -1205,8 +1211,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!
@@ -1599,12 +1610,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 +1651,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 +2301,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 +2510,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 +2731,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);
@@ -3109,6 +3112,33 @@ export class RendererLite {
     this.log.info(`Swapped to preloaded layout ${layoutId} (instant transition)`);
   }
 
+  /**
+   * 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 +3174,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;
 

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', () => {