@xiboplayer/renderer 0.7.1 → 0.7.2

package/package.json

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

package/src/renderer-lite.js

@@ -1639,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;
@@ -2284,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) {

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