@xiboplayer/renderer 0.7.1 → 0.7.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xiboplayer/renderer",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "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.1",
-    "@xiboplayer/schedule": "0.7.1",
-    "@xiboplayer/utils": "0.7.1"
+    "@xiboplayer/schedule": "0.7.3",
+    "@xiboplayer/utils": "0.7.3",
+    "@xiboplayer/cache": "0.7.3"
   },
   "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);
   }
 
   /**
@@ -1639,12 +1663,14 @@ export class RendererLite {
   }
 
   /**
-   * Check if any video widget in current layout still has duration=0 (metadata not loaded).
+   * Check if any video widget has useDuration=0 ("play to end") and hasn't
+   * been corrected by video metadata yet. The XLF always provides a non-zero
+   * duration attribute (typically 60s), so we check the _probed flag instead.
    */
   _hasUnprobedVideos() {
     for (const [, region] of this.regions) {
       for (const widget of region.widgets) {
-        if (widget.useDuration === 0 && widget.duration === 0) return true;
+        if (widget.useDuration === 0 && !widget._probed) return true;
       }
     }
     return false;
@@ -2284,6 +2310,7 @@ export class RendererLite {
 
       if (widget.duration === 0 || widget.useDuration === 0) {
         widget.duration = videoDuration;
+        widget._probed = true;
         this.log.info(`Updated widget ${widget.id} duration to ${videoDuration}s (useDuration=0)`);
 
         if (this.currentLayoutId === createdForLayoutId) {
@@ -2499,45 +2526,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);
   }
 
   /**
@@ -2720,6 +2709,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%';
@@ -2883,33 +2881,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);
       }
 
@@ -2990,20 +2967,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;
@@ -3173,6 +3137,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
    */
@@ -3194,18 +3176,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();
@@ -3295,33 +3266,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

@@ -7,10 +7,20 @@
  * and memory management.
  */
 
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { describe, it, expect, beforeAll, beforeEach, afterEach, vi } from 'vitest';
 import { RendererLite, Transitions } from './renderer-lite.js';
 
 describe('RendererLite', () => {
+  // Patch HTMLMediaElement after jsdom initializes — vitest.setup.js runs
+  // before the jsdom environment, so stubs set there get overwritten.
+  beforeAll(() => {
+    const proto = window.HTMLMediaElement.prototype;
+    proto.play = vi.fn(() => Promise.resolve());
+    proto.pause = vi.fn();
+    proto.load = vi.fn();
+    Object.defineProperty(proto, 'duration', { writable: true, configurable: true, value: NaN });
+    Object.defineProperty(proto, 'currentTime', { writable: true, configurable: true, value: 0 });
+  });
   let container;
   let renderer;
   let mockGetWidgetHtml;
@@ -755,142 +765,98 @@ describe('RendererLite', () => {
   });
 
   describe('Video Duration Detection', () => {
-    // Skip: jsdom doesn't support real video element properties
-    it.skip('should detect video duration from metadata', async () => {
-      const xlf = `
-        <layout>
-          <region id="r1">
-            <media id="m1" type="video" duration="0" useDuration="0" fileId="5">
-              <options><uri>5.mp4</uri></options>
-            </media>
-          </region>
-        </layout>
-      `;
-
-      await renderer.renderLayout(xlf, 1);
-
-      // Mock video element with duration
-      const region = renderer.regions.get('r1');
-      const videoElement = region.widgetElements.get('m1');
-      const video = videoElement.querySelector('video');
-
-      // Simulate loadedmetadata event
-      Object.defineProperty(video, 'duration', { value: 45.5, writable: false });
-      video.dispatchEvent(new Event('loadedmetadata'));
-
-      // Wait for async handler
-      await new Promise(resolve => setTimeout(resolve, 10));
-
-      // Widget duration should be updated
-      const widget = region.widgets[0];
-      expect(widget.duration).toBe(45); // Floor of 45.5
+    it('should detect video duration from metadata', () => {
+      // Directly test _hasUnprobedVideos + duration update logic
+      // (renderer.renderLayout creates iframes in jsdom, not real video elements)
+      const widget = { id: 'm1', type: 'video', duration: 60, useDuration: 0, _probed: false };
+      const region = { id: 'r1', widgets: [widget], isDrawer: false };
+      renderer.regions = new Map([['r1', region]]);
+
+      // Before metadata: widget is unprobed
+      expect(renderer._hasUnprobedVideos()).toBe(true);
+
+      // Simulate metadata arrival
+      widget.duration = 45;
+      widget._probed = true;
+
+      // After metadata: all probed
+      expect(renderer._hasUnprobedVideos()).toBe(false);
+      expect(widget.duration).toBe(45);
     });
 
-    // Skip: jsdom doesn't support real video element properties
-    it.skip('should update layout duration when video metadata loads', async () => {
-      const xlf = `
-        <layout>
-          <region id="r1">
-            <media id="m1" type="video" duration="0" useDuration="0" fileId="5">
-              <options><uri>5.mp4</uri></options>
-            </media>
-          </region>
-        </layout>
-      `;
+    it('should calculate correct duration from widget durations', () => {
+      // Test the duration calculation logic that updateLayoutDuration uses:
+      // max region duration across all regions, sum of widgets per region
+      const w1 = { id: 'v1', duration: 30, useDuration: 0, _probed: true };
+      const w2 = { id: 'v2', duration: 15, useDuration: 0, _probed: true };
+      // Region duration = sum of widgets = 30 + 15 = 45
+      const region = { id: 'r1', widgets: [w1, w2], isDrawer: false };
+      renderer.regions = new Map([['r1', region]]);
 
-      await renderer.renderLayout(xlf, 1);
-
-      const region = renderer.regions.get('r1');
-      const videoElement = region.widgetElements.get('m1');
-      const video = videoElement.querySelector('video');
-
-      // Simulate video with 45s duration
-      Object.defineProperty(video, 'duration', { value: 45, writable: false });
-      video.dispatchEvent(new Event('loadedmetadata'));
+      // Verify _hasUnprobedVideos returns false when all probed
+      expect(renderer._hasUnprobedVideos()).toBe(false);
 
-      await new Promise(resolve => setTimeout(resolve, 10));
-
-      // Layout duration should be updated
-      expect(renderer.currentLayout.duration).toBe(45);
+      // Verify the duration sum matches what updateLayoutDuration would compute
+      const regionDuration = region.widgets.reduce((sum, w) => sum + (w.duration > 0 ? w.duration : 0), 0);
+      expect(regionDuration).toBe(45);
     });
 
-    // Skip: jsdom doesn't support real video element properties
-    it.skip('should NOT update duration when useDuration=1', async () => {
-      const xlf = `
-        <layout>
-          <region id="r1">
-            <media id="m1" type="video" duration="30" useDuration="1" fileId="5">
-              <options><uri>5.mp4</uri></options>
-            </media>
-          </region>
-        </layout>
-      `;
-
-      await renderer.renderLayout(xlf, 1);
+    it('should NOT mark widget as probed when useDuration=1', () => {
+      const widget = { id: 'm1', type: 'video', duration: 30, useDuration: 1 };
+      const region = { id: 'r1', widgets: [widget], isDrawer: false };
+      renderer.regions = new Map([['r1', region]]);
 
-      const region = renderer.regions.get('r1');
-      const videoElement = region.widgetElements.get('m1');
-      const video = videoElement.querySelector('video');
+      // useDuration=1 means CMS-set duration — not a "play to end" video
+      expect(renderer._hasUnprobedVideos()).toBe(false);
+      expect(widget.duration).toBe(30);
+    });
 
-      // Simulate video with 45s duration
-      Object.defineProperty(video, 'duration', { value: 45, writable: false });
-      video.dispatchEvent(new Event('loadedmetadata'));
+    it('should handle mixed probed and unprobed videos', () => {
+      const widget1 = { id: 'm1', type: 'video', duration: 45, useDuration: 0, _probed: true };
+      const widget2 = { id: 'm2', type: 'video', duration: 60, useDuration: 0, _probed: false };
+      const region = { id: 'r1', widgets: [widget1, widget2], isDrawer: false };
+      renderer.regions = new Map([['r1', region]]);
 
-      await new Promise(resolve => setTimeout(resolve, 10));
+      // One still unprobed
+      expect(renderer._hasUnprobedVideos()).toBe(true);
 
-      // Widget duration should stay 30 (useDuration=1 overrides)
-      const widget = region.widgets[0];
-      expect(widget.duration).toBe(30);
+      // Probe the second
+      widget2.duration = 30;
+      widget2._probed = true;
+      expect(renderer._hasUnprobedVideos()).toBe(false);
     });
   });
 
   describe('Media Element Restart', () => {
-    // Skip: jsdom video elements don't support currentTime properly
-    it.skip('should restart video on updateMediaElement()', async () => {
-      const widget = {
-        type: 'video',
-        id: 'm1',
-        fileId: '5',
-        options: { loop: '0', mute: '1' },
-        duration: 30
-      };
-
-      const region = { width: 1920, height: 1080 };
-      const element = await renderer.renderVideo(widget, region);
-      const video = element.querySelector('video');
-
-      // Mock video methods
+    it('should restart video via updateMediaElement', () => {
+      const video = document.createElement('video');
       video.currentTime = 25.5;
+      // Simulate readyState >= 2 so _restartMediaElement calls play directly
+      Object.defineProperty(video, 'readyState', { value: 3, configurable: true });
       video.play = vi.fn(() => Promise.resolve());
 
-      // Call updateMediaElement
-      renderer.updateMediaElement(element, widget);
+      const wrapper = document.createElement('div');
+      wrapper.appendChild(video);
+
+      const widget = { type: 'video', id: 'm1', fileId: '5', options: { loop: '0' }, duration: 30 };
+      renderer.updateMediaElement(wrapper, widget);
 
-      // Should restart from beginning
       expect(video.currentTime).toBe(0);
       expect(video.play).toHaveBeenCalled();
     });
 
-    // Skip: jsdom video elements don't support currentTime properly
-    it.skip('should restart looping videos too', async () => {
-      const widget = {
-        type: 'video',
-        id: 'm1',
-        fileId: '5',
-        options: { loop: '1', mute: '1' }, // Looping video
-        duration: 30
-      };
-
-      const region = { width: 1920, height: 1080 };
-      const element = await renderer.renderVideo(widget, region);
-      const video = element.querySelector('video');
-
-      video.currentTime = 10;
+    it('should restart looping videos too', () => {
+      const video = document.createElement('video');
+      video.currentTime = 25.5;
+      Object.defineProperty(video, 'readyState', { value: 3, configurable: true });
       video.play = vi.fn(() => Promise.resolve());
 
-      renderer.updateMediaElement(element, widget);
+      const wrapper = document.createElement('div');
+      wrapper.appendChild(video);
+
+      const widget = { type: 'video', id: 'm1', fileId: '5', options: { loop: '1' }, duration: 30 };
+      renderer.updateMediaElement(wrapper, widget);
 
-      // Should STILL restart (even when looping)
       expect(video.currentTime).toBe(0);
       expect(video.play).toHaveBeenCalled();
     });