@xiboplayer/renderer 0.7.2 → 0.7.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xiboplayer/renderer",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "description": "RendererLite - Fast, efficient XLF layout rendering engine",
   "type": "module",
   "main": "./src/index.js",
@@ -12,13 +12,13 @@
   },
   "dependencies": {
     "pdfjs-dist": "^4.10.38",
-    "@xiboplayer/cache": "0.7.2",
-    "@xiboplayer/schedule": "0.7.2",
-    "@xiboplayer/utils": "0.7.2"
+    "@xiboplayer/cache": "0.7.4",
+    "@xiboplayer/schedule": "0.7.4",
+    "@xiboplayer/utils": "0.7.4"
   },
   "devDependencies": {
-    "vitest": "^2.0.0",
-    "jsdom": "^25.0.0"
+    "jsdom": "^25.0.1",
+    "vitest": "^2.1.9"
   },
   "keywords": [
     "xibo",

package/src/index.d.ts

@@ -21,8 +21,8 @@ export class LayoutPool {
   get(layoutId: number): any | undefined;
   add(layoutId: number, entry: any): void;
   clearWarmNotIn(keepIds: Set<number>): number;
-  makeHot(layoutId: number): void;
-  remove(layoutId: number): void;
+  setHot(layoutId: number): void;
+  evict(layoutId: number): void;
   clear(): void;
 }
 
@@ -59,10 +59,10 @@ export class RendererLite {
   nextWidget(regionId?: string): void;
   previousWidget(regionId?: string): void;
 
+  resumeRegionMedia(regionId: string): void;
   pause(): void;
   resume(): void;
   isPaused(): boolean;
-  resumeRegionMedia?(regionId: string): void;
   showLayout(layoutId?: number): void;
   getCurrentLayoutId(): number | null;
 

package/src/renderer-lite.js

@@ -219,7 +219,6 @@ export class RendererLite {
     this._paused = false;
     this._layoutTimerStartedAt = null;  // Date.now() when layout timer started
     this._layoutTimerDurationMs = null; // Total layout duration in ms
-    this.widgetTimers = new Map(); // widgetId => timer
     this.layoutBlobUrls = new Map(); // layoutId => Set<blobUrl> (for lifecycle tracking)
     this.audioOverlays = new Map(); // widgetId => [HTMLAudioElement] (audio overlays for widgets)
 
@@ -1339,26 +1338,64 @@ export class RendererLite {
   }
 
   /**
-   * Create a region element
-   * @param {Object} regionConfig - Region configuration
+   * Build a region DOM element and state entry.
+   * Shared by createRegion, preloadLayout, and renderOverlay.
+   *
+   * @param {Object} regionConfig - Region configuration from parsed XLF
+   * @param {string} elementId - DOM element ID for the region div
+   * @param {HTMLElement} parentEl - Parent element to append the region to
+   * @param {Object} [extraState] - Additional properties merged into region state
+   * @returns {Object} Region state object { element, config, widgets, ... }
    */
-  async createRegion(regionConfig) {
+  _createRegionEntry(regionConfig, elementId, parentEl, extraState = {}) {
+    const { className = 'renderer-lite-region', ...stateProps } = extraState;
+
     const regionEl = document.createElement('div');
-    regionEl.id = `region_${regionConfig.id}`;
-    regionEl.className = 'renderer-lite-region';
+    regionEl.id = elementId;
+    regionEl.className = className;
     regionEl.style.position = 'absolute';
-    regionEl.style.zIndex = regionConfig.zindex;
+    regionEl.style.zIndex = String(regionConfig.zindex);
     regionEl.style.overflow = 'hidden';
 
-    // Drawer regions start fully hidden — shown only by navWidget actions
-    if (regionConfig.isDrawer) {
-      regionEl.style.display = 'none';
-    }
-
     // Apply scaled positioning
     this.applyRegionScale(regionEl, regionConfig);
 
-    this.container.appendChild(regionEl);
+    parentEl.appendChild(regionEl);
+
+    const sf = this.scaleFactor;
+    return {
+      element: regionEl,
+      config: regionConfig,
+      widgets: regionConfig.widgets,
+      currentIndex: 0,
+      timer: null,
+      width: regionConfig.width * sf,
+      height: regionConfig.height * sf,
+      complete: false,
+      widgetElements: new Map(),
+      ...stateProps,
+    };
+  }
+
+  /**
+   * Create a region element
+   * @param {Object} regionConfig - Region configuration
+   */
+  async createRegion(regionConfig) {
+    const region = this._createRegionEntry(
+      regionConfig,
+      `region_${regionConfig.id}`,
+      this.container,
+      {
+        isDrawer: regionConfig.isDrawer || false,
+        isCanvas: regionConfig.isCanvas || false,
+      }
+    );
+
+    // Drawer regions start fully hidden — shown only by navWidget actions
+    if (regionConfig.isDrawer) {
+      region.element.style.display = 'none';
+    }
 
     // Filter expired widgets (fromDt/toDt time-gating within XLF)
     let widgets = regionConfig.widgets.filter(w => this._isWidgetActive(w));
@@ -1367,22 +1404,9 @@ export class RendererLite {
     if (widgets.some(w => w.cyclePlayback)) {
       widgets = this._applyCyclePlayback(widgets);
     }
+    region.widgets = widgets;
 
-    // Store region state (dimensions use scaled values for transitions)
-    const sf = this.scaleFactor;
-    this.regions.set(regionConfig.id, {
-      element: regionEl,
-      config: regionConfig,
-      widgets,
-      currentIndex: 0,
-      timer: null,
-      width: regionConfig.width * sf,
-      height: regionConfig.height * sf,
-      complete: false, // Track if region has played all widgets once
-      isDrawer: regionConfig.isDrawer || false,
-      isCanvas: regionConfig.isCanvas || false, // Canvas regions render all widgets simultaneously
-      widgetElements: new Map() // widgetId -> DOM element (for element reuse)
-    });
+    this.regions.set(regionConfig.id, region);
   }
 
   /**
@@ -1493,11 +1517,10 @@ export class RendererLite {
       el.play().catch(() => {});
     };
     el.addEventListener('seeked', playAfterSeek);
-    // Fallback: if seeked doesn't fire (already at 0), try play directly
-    if (el.currentTime === 0 && el.readyState >= 2) {
-      el.removeEventListener('seeked', playAfterSeek);
-      el.play().catch(() => {});
-    }
+    // Always call play() — for preloaded-then-paused videos, seeked may not
+    // fire (currentTime already 0) and readyState may be < 2 (not buffered yet).
+    // play() handles both cases: if not ready, it queues; if ready, it plays.
+    el.play().catch(() => {});
   }
 
   /**
@@ -2276,10 +2299,9 @@ export class RendererLite {
     }
 
     // Detect video duration for dynamic layout timing (when useDuration=0)
-    // Capture the layout ID at creation time — if the layout changes before
-    // loadedmetadata fires (e.g. video was preloaded for next layout), we must
-    // NOT update the current layout's duration with a different layout's video.
-    const createdForLayoutId = this.currentLayoutId;
+    // Capture the layout ID at creation time — during preload, _preloadingLayoutId
+    // is the target layout (currentLayoutId is still the playing layout).
+    const createdForLayoutId = this._preloadingLayoutId || this.currentLayoutId;
     const onLoadedMetadata = () => {
       const videoDuration = video.duration;
       this.log.info(`Video ${storedAs} duration detected: ${videoDuration}s`);
@@ -2440,7 +2462,7 @@ export class RendererLite {
     audio.addEventListener('ended', onAudioEnded);
 
     // Detect audio duration for dynamic layout timing (when useDuration=0)
-    const audioCreatedForLayoutId = this.currentLayoutId;
+    const audioCreatedForLayoutId = this._preloadingLayoutId || this.currentLayoutId;
     const onAudioLoadedMetadata = () => {
       const audioDuration = Math.floor(audio.duration);
       this.log.info(`Audio ${storedAs} duration detected: ${audioDuration}s`);
@@ -2502,45 +2524,7 @@ export class RendererLite {
    * Render text/ticker widget
    */
   async renderTextWidget(widget, region) {
-    const iframe = document.createElement('iframe');
-    iframe.className = 'renderer-lite-widget';
-    iframe.style.width = '100%';
-    iframe.style.height = '100%';
-    iframe.style.border = 'none';
-    iframe.style.opacity = '0';
-
-    // Get widget HTML (may return { url } for cache-path loading or string for blob)
-    let html = widget.raw;
-    if (this.options.getWidgetHtml) {
-      const result = await this.options.getWidgetHtml(widget);
-      if (result && typeof result === 'object' && result.url) {
-        // Use cache URL — SW serves HTML and intercepts sub-resources
-        iframe.src = result.url;
-
-        // Parse NUMITEMS/DURATION from fallback HTML (cache path)
-        if (result.fallback) {
-          this._parseDurationComments(result.fallback, widget);
-        }
-
-        return iframe;
-      }
-      html = result;
-    }
-
-    if (html) {
-      // Parse NUMITEMS/DURATION HTML comments for dynamic widget duration
-      this._parseDurationComments(html, widget);
-    }
-
-    // Fallback: Create blob URL for iframe
-    const blob = new Blob([html], { type: 'text/html' });
-    const blobUrl = URL.createObjectURL(blob);
-    iframe.src = blobUrl;
-
-    // Track blob URL for lifecycle management
-    this.trackBlobUrl(blobUrl);
-
-    return iframe;
+    return await this._renderIframeWidget(widget, region);
   }
 
   /**
@@ -2723,6 +2707,15 @@ export class RendererLite {
    * Render generic widget (clock, calendar, weather, etc.)
    */
   async renderGenericWidget(widget, region) {
+    return await this._renderIframeWidget(widget, region);
+  }
+
+  /**
+   * Shared iframe rendering for text/ticker and generic widgets.
+   * Creates an iframe, resolves widget HTML via getWidgetHtml (cache URL or blob),
+   * and parses NUMITEMS/DURATION comments for dynamic widget duration.
+   */
+  async _renderIframeWidget(widget, region) {
     const iframe = document.createElement('iframe');
     iframe.className = 'renderer-lite-widget';
     iframe.style.width = '100%';
@@ -2886,33 +2879,12 @@ export class RendererLite {
 
       // Create regions in the hidden wrapper
       const preloadRegions = new Map();
-      const sf = this.scaleFactor;
-
       for (const regionConfig of layout.regions) {
-        const regionEl = document.createElement('div');
-        regionEl.id = `preload_region_${layoutId}_${regionConfig.id}`;
-        regionEl.className = 'renderer-lite-region';
-        regionEl.style.position = 'absolute';
-        regionEl.style.zIndex = regionConfig.zindex;
-        regionEl.style.overflow = 'hidden';
-
-        // Apply scaled positioning
-        this.applyRegionScale(regionEl, regionConfig);
-
-        wrapper.appendChild(regionEl);
-
-        const region = {
-          element: regionEl,
-          config: regionConfig,
-          widgets: regionConfig.widgets,
-          currentIndex: 0,
-          timer: null,
-          width: regionConfig.width * sf,
-          height: regionConfig.height * sf,
-          complete: false,
-          widgetElements: new Map()
-        };
-
+        const region = this._createRegionEntry(
+          regionConfig,
+          `preload_region_${layoutId}_${regionConfig.id}`,
+          wrapper
+        );
         preloadRegions.set(regionConfig.id, region);
       }
 
@@ -2993,20 +2965,7 @@ export class RendererLite {
 
     // ── Tear down old layout ──
     this.removeActionListeners();
-
-    if (this.layoutTimer) {
-      clearTimeout(this.layoutTimer);
-      this.layoutTimer = null;
-    }
-
-    if (this.preloadTimer) {
-      clearTimeout(this.preloadTimer);
-      this.preloadTimer = null;
-    }
-    if (this._preloadRetryTimer) {
-      clearTimeout(this._preloadRetryTimer);
-      this._preloadRetryTimer = null;
-    }
+    this._clearLayoutTimers();
 
     const oldLayoutId = this.currentLayoutId;
     const alreadyEmittedEnd = this.layoutEndEmitted;
@@ -3176,6 +3135,24 @@ export class RendererLite {
     }
   }
 
+  /**
+   * Clear all layout-level timers (layout duration, preload, preload retry).
+   */
+  _clearLayoutTimers() {
+    if (this.layoutTimer) {
+      clearTimeout(this.layoutTimer);
+      this.layoutTimer = null;
+    }
+    if (this.preloadTimer) {
+      clearTimeout(this.preloadTimer);
+      this.preloadTimer = null;
+    }
+    if (this._preloadRetryTimer) {
+      clearTimeout(this._preloadRetryTimer);
+      this._preloadRetryTimer = null;
+    }
+  }
+
   /**
    * Stop current layout
    */
@@ -3197,18 +3174,7 @@ export class RendererLite {
     this.currentLayoutId = null;
 
     // Clear timers
-    if (this.layoutTimer) {
-      clearTimeout(this.layoutTimer);
-      this.layoutTimer = null;
-    }
-    if (this.preloadTimer) {
-      clearTimeout(this.preloadTimer);
-      this.preloadTimer = null;
-    }
-    if (this._preloadRetryTimer) {
-      clearTimeout(this._preloadRetryTimer);
-      this._preloadRetryTimer = null;
-    }
+    this._clearLayoutTimers();
 
     // Remove interactive action listeners before teardown
     this.removeActionListeners();
@@ -3298,33 +3264,17 @@ export class RendererLite {
 
       // Create regions for overlay
       const overlayRegions = new Map();
-      const sf = this.scaleFactor;
       for (const regionConfig of layout.regions) {
-        const regionEl = document.createElement('div');
-        regionEl.id = `overlay_${layoutId}_region_${regionConfig.id}`;
-        regionEl.className = 'renderer-lite-region overlay-region';
-        regionEl.style.position = 'absolute';
-        regionEl.style.zIndex = String(regionConfig.zindex);
-        regionEl.style.overflow = 'hidden';
-
-        // Apply scaled positioning
-        this.applyRegionScale(regionEl, regionConfig);
-
-        overlayDiv.appendChild(regionEl);
-
-        // Store region state (dimensions use scaled values)
-        overlayRegions.set(regionConfig.id, {
-          element: regionEl,
-          config: regionConfig,
-          widgets: regionConfig.widgets,
-          currentIndex: 0,
-          timer: null,
-          width: regionConfig.width * sf,
-          height: regionConfig.height * sf,
-          complete: false,
-          isCanvas: regionConfig.isCanvas || false,
-          widgetElements: new Map()
-        });
+        const region = this._createRegionEntry(
+          regionConfig,
+          `overlay_${layoutId}_region_${regionConfig.id}`,
+          overlayDiv,
+          {
+            className: 'renderer-lite-region overlay-region',
+            isCanvas: regionConfig.isCanvas || false,
+          }
+        );
+        overlayRegions.set(regionConfig.id, region);
       }
 
       // Pre-create widget elements for overlay

package/src/renderer-lite.test.js

@@ -2917,4 +2917,55 @@ describe('RendererLite', () => {
       vi.useRealTimers();
     });
   });
+
+  // ── Video layout ID tracking during preload ──────────────────────
+  // Regression test: createdForLayoutId must use _preloadingLayoutId
+  // during preload, not currentLayoutId (which is the *playing* layout).
+  // Without this, video duration updates for preloaded layouts are
+  // rejected, causing layouts to play with wrong (10s) duration.
+
+  describe('Video createdForLayoutId during preload', () => {
+    it('should capture _preloadingLayoutId for video elements created during preload', () => {
+      renderer.currentLayoutId = 100;       // currently playing
+      renderer._preloadingLayoutId = 200;    // preloading next
+
+      // The fix: _preloadingLayoutId || currentLayoutId should give 200
+      const capturedId = renderer._preloadingLayoutId || renderer.currentLayoutId;
+      expect(capturedId).toBe(200);
+    });
+
+    it('should fall back to currentLayoutId when not preloading', () => {
+      renderer.currentLayoutId = 100;
+      renderer._preloadingLayoutId = null;
+
+      const capturedId = renderer._preloadingLayoutId || renderer.currentLayoutId;
+      expect(capturedId).toBe(100);
+    });
+
+    it('should allow duration update when preloaded layout becomes current', () => {
+      // Simulate: video created during preload of layout 200
+      renderer._preloadingLayoutId = 200;
+      const createdForLayoutId = renderer._preloadingLayoutId || renderer.currentLayoutId;
+
+      // Now layout 200 swaps in
+      renderer.currentLayoutId = 200;
+      renderer._preloadingLayoutId = null;
+
+      // Duration update check should pass
+      expect(renderer.currentLayoutId === createdForLayoutId).toBe(true);
+    });
+
+    it('should reject duration update when a different layout is current', () => {
+      // Video created during preload of layout 200
+      renderer._preloadingLayoutId = 200;
+      const createdForLayoutId = renderer._preloadingLayoutId || renderer.currentLayoutId;
+
+      // But layout 300 swaps in instead (e.g., schedule changed)
+      renderer.currentLayoutId = 300;
+      renderer._preloadingLayoutId = null;
+
+      // Duration update should be rejected — wrong layout
+      expect(renderer.currentLayoutId === createdForLayoutId).toBe(false);
+    });
+  });
 });