@xiboplayer/renderer 0.7.0 → 0.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xiboplayer/renderer",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "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.7.0",
-    "@xiboplayer/utils": "0.7.0",
-    "@xiboplayer/schedule": "0.7.0"
+    "@xiboplayer/cache": "0.7.2",
+    "@xiboplayer/schedule": "0.7.2",
+    "@xiboplayer/utils": "0.7.2"
   },
   "devDependencies": {
     "vitest": "^2.0.0",

package/src/index.d.ts

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

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;
@@ -223,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;
@@ -356,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) {
@@ -953,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
     );
   }
@@ -1200,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;
@@ -1389,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();
@@ -1635,12 +1639,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;
@@ -2280,6 +2286,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) {
@@ -3011,7 +3018,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 {
@@ -3019,7 +3026,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);
@@ -3112,6 +3119,14 @@ 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.
@@ -3212,7 +3227,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

@@ -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();
     });