@xiboplayer/renderer 0.6.6 → 0.6.8

package/package.json

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

package/src/renderer-lite.js

@@ -236,6 +236,9 @@ export class RendererLite {
     // Sub-playlist cycle state (round-robin per parentWidgetId group)
     this._subPlaylistCycleIndex = new Map();
 
+    // Widget lifecycle tracking — ensures symmetric start/stop
+    this._startedWidgets = new Set(); // "regionId:widgetIndex" keys
+
     // Layout preload pool (2-layout pool for instant transitions)
     this.layoutPool = new LayoutPool(2);
     this.preloadTimer = null;
@@ -707,7 +710,8 @@ export class RendererLite {
       this.currentLayout.duration = maxRegionDuration;
 
       this.log.info(`Layout duration updated: ${oldDuration}s → ${maxRegionDuration}s (based on video metadata)`);
-      this.emit('layoutDurationUpdated', this.currentLayoutId, maxRegionDuration);
+      const final_ = !this._hasUnprobedVideos();
+      this.emit('layoutDurationUpdated', this.currentLayoutId, maxRegionDuration, final_);
 
       // Deferred timer: video metadata arrived, start the timer now
       if (this._deferredTimerLayoutId === this.currentLayoutId && !this.layoutTimer) {
@@ -1186,10 +1190,12 @@ export class RendererLite {
         // OPTIMIZATION: Reuse existing elements for same layout (Arexibo pattern)
         this.log.info(`Replaying layout ${layoutId} - reusing elements (no recreation!)`);
 
-        // Stop all region timers and reset to first widget
+        // 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));
         for (const [, region] of this.regions) {
           region.currentIndex = 0;
+          region.complete = false;
         }
 
         // Clear layout timer
@@ -2041,6 +2047,7 @@ export class RendererLite {
       const widget = await this._showWidget(region, widgetIndex);
       if (widget) {
         this.log.info(`Showing widget ${widget.type} (${widget.id}) in region ${regionId}`);
+        this._startedWidgets.add(`${regionId}:${widgetIndex}`);
         this.emit('widgetStart', {
           widgetId: widget.id, regionId, layoutId: this.currentLayoutId,
           mediaId: parseInt(widget.fileId || widget.id) || null,
@@ -2073,6 +2080,9 @@ export class RendererLite {
    * @param {number} widgetIndex - Widget index
    */
   async stopWidget(regionId, widgetIndex) {
+    const key = `${regionId}:${widgetIndex}`;
+    if (!this._startedWidgets.delete(key)) return; // idempotent: already stopped
+
     const region = this.regions.get(regionId);
     if (!region) return;
 
@@ -2088,6 +2098,24 @@ export class RendererLite {
     }
   }
 
+  /**
+   * Stop all started widgets across regions (symmetric counterpart to startRegion)
+   * Canvas regions start ALL widgets; non-canvas regions have one active widget.
+   * @param {Map} regions - Region map
+   * @param {Function} stopFn - (regionId, widgetIndex) => void
+   */
+  _stopAllRegionWidgets(regions, stopFn) {
+    for (const [regionId, region] of regions) {
+      if (region.isCanvas) {
+        for (let i = 0; i < region.widgets.length; i++) {
+          stopFn(regionId, i);
+        }
+      } else if (region.widgets.length > 0) {
+        stopFn(regionId, region.currentIndex);
+      }
+    }
+  }
+
   /**
    * Render image widget
    */
@@ -2933,6 +2961,7 @@ export class RendererLite {
     }
 
     const oldLayoutId = this.currentLayoutId;
+    const alreadyEmittedEnd = this.layoutEndEmitted;
 
     this.layoutEndEmitted = false;
     this.currentLayout = null;
@@ -2946,6 +2975,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));
       for (const [, region] of this.regions) {
         // Release video/audio resources before removing from DOM
         LayoutPool.releaseMediaElements(region.element);
@@ -2986,7 +3016,8 @@ export class RendererLite {
     // Emit layoutEnd for old layout AFTER setting new currentLayoutId —
     // the listener guard in main.ts sees the new layout already playing
     // and skips advance, while stats/tracking still run.
-    if (oldLayoutId) {
+    // Skip if the layout timer already emitted layoutEnd (avoids double stats).
+    if (oldLayoutId && !alreadyEmittedEnd) {
       this.emit('layoutEnd', oldLayoutId);
     }
 
@@ -3101,14 +3132,10 @@ export class RendererLite {
         this.revokeBlobUrlsForLayout(endedLayoutId);
       }
 
-      // Stop all regions
+      // Stop all regions — use helper to stop ALL started widgets (canvas fix)
       this._clearRegionTimers(this.regions);
-      for (const [regionId, region] of this.regions) {
-        // Stop current widget
-        if (region.widgets.length > 0) {
-          this.stopWidget(regionId, region.currentIndex);
-        }
-
+      this._stopAllRegionWidgets(this.regions, (rid, idx) => this.stopWidget(rid, idx));
+      for (const [, region] of this.regions) {
         // Release video/audio resources before removing from DOM
         LayoutPool.releaseMediaElements(region.element);
 
@@ -3300,6 +3327,7 @@ export class RendererLite {
       const widget = await this._showWidget(region, widgetIndex);
       if (widget) {
         this.log.info(`Showing overlay widget ${widget.type} (${widget.id}) in overlay ${overlayId} region ${regionId}`);
+        this._startedWidgets.add(`overlay:${overlayId}:${regionId}:${widgetIndex}`);
         this.emit('overlayWidgetStart', {
           overlayId, widgetId: widget.id, regionId,
           type: widget.type, duration: widget.duration
@@ -3318,6 +3346,9 @@ export class RendererLite {
    * @param {number} widgetIndex - Widget index
    */
   async stopOverlayWidget(overlayId, regionId, widgetIndex) {
+    const key = `overlay:${overlayId}:${regionId}:${widgetIndex}`;
+    if (!this._startedWidgets.delete(key)) return; // idempotent
+
     const overlayState = this.activeOverlays.get(overlayId);
     if (!overlayState) return;
 
@@ -3353,17 +3384,11 @@ export class RendererLite {
     }
 
     // Stop all overlay regions
-    for (const [regionId, region] of overlayState.regions) {
-      if (region.timer) {
-        clearTimeout(region.timer);
-        region.timer = null;
-      }
-
-      // Stop current widget
-      if (region.widgets.length > 0) {
-        this.stopOverlayWidget(layoutId, regionId, region.currentIndex);
-      }
+    for (const [, region] of overlayState.regions) {
+      if (region.timer) { clearTimeout(region.timer); region.timer = null; }
     }
+    this._stopAllRegionWidgets(overlayState.regions,
+      (rid, idx) => this.stopOverlayWidget(layoutId, rid, idx));
 
     // Remove overlay container from DOM
     if (overlayState.container) {
@@ -3466,6 +3491,7 @@ export class RendererLite {
   cleanup() {
     this.stopAllOverlays();
     this.stopCurrentLayout();
+    this._startedWidgets.clear();
 
     // Clean up any remaining audio overlays
     for (const widgetId of this.audioOverlays.keys()) {

package/src/renderer-lite.test.js

@@ -2698,4 +2698,223 @@ describe('RendererLite', () => {
       vi.useRealTimers();
     });
   });
+
+  describe('Widget Lifecycle Symmetry', () => {
+    it('should emit symmetric widgetStart/widgetEnd for single-widget layout', async () => {
+      vi.useFakeTimers();
+      const starts = [];
+      const ends = [];
+      renderer.on('widgetStart', (e) => starts.push(e));
+      renderer.on('widgetEnd', (e) => ends.push(e));
+
+      const xlf = `
+        <layout width="1920" height="1080" duration="10">
+          <region id="r1" width="1920" height="1080" top="0" left="0">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+
+      const renderPromise = renderer.renderLayout(xlf, 1);
+      await vi.advanceTimersByTimeAsync(2000);
+
+      expect(starts).toHaveLength(1);
+      expect(ends).toHaveLength(0);
+
+      renderer.stopCurrentLayout();
+
+      expect(ends).toHaveLength(1);
+      expect(ends[0].widgetId).toBe(starts[0].widgetId);
+      expect(renderer._startedWidgets.size).toBe(0);
+
+      await vi.advanceTimersByTimeAsync(60000);
+      await renderPromise;
+      vi.useRealTimers();
+    });
+
+    it('should stop ALL widgets in canvas region on teardown', async () => {
+      vi.useFakeTimers();
+      const starts = [];
+      const ends = [];
+      renderer.on('widgetStart', (e) => starts.push(e));
+      renderer.on('widgetEnd', (e) => ends.push(e));
+
+      const xlf = `
+        <layout width="1920" height="1080" duration="30">
+          <region id="r1" type="canvas" width="1920" height="1080" top="0" left="0">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <options><uri>img1.png</uri></options>
+            </media>
+            <media id="m2" type="image" duration="10" fileId="2">
+              <options><uri>img2.png</uri></options>
+            </media>
+            <media id="m3" type="image" duration="10" fileId="3">
+              <options><uri>img3.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+
+      const renderPromise = renderer.renderLayout(xlf, 1);
+      await vi.advanceTimersByTimeAsync(2000);
+
+      expect(starts).toHaveLength(3);
+      expect(ends).toHaveLength(0);
+
+      renderer.stopCurrentLayout();
+
+      expect(ends).toHaveLength(3);
+      expect(renderer._startedWidgets.size).toBe(0);
+
+      await vi.advanceTimersByTimeAsync(60000);
+      await renderPromise;
+      vi.useRealTimers();
+    });
+
+    it('should stop widgets before restarting on same-layout replay', async () => {
+      vi.useFakeTimers();
+      const events = [];
+      renderer.on('widgetStart', (e) => events.push({ type: 'start', id: e.widgetId }));
+      renderer.on('widgetEnd', (e) => events.push({ type: 'end', id: e.widgetId }));
+
+      const xlf = `
+        <layout width="1920" height="1080" duration="10">
+          <region id="r1" width="1920" height="1080" top="0" left="0">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+
+      // First render
+      const p1 = renderer.renderLayout(xlf, 1);
+      await vi.advanceTimersByTimeAsync(2000);
+      expect(events).toHaveLength(1); // 1 start
+
+      // Same-layout replay
+      events.length = 0;
+      const p2 = renderer.renderLayout(xlf, 1);
+      await vi.advanceTimersByTimeAsync(2000);
+
+      // widgetEnd should fire before widgetStart for the replay
+      expect(events.length).toBeGreaterThanOrEqual(2);
+      const endIdx = events.findIndex(e => e.type === 'end');
+      const startIdx = events.findIndex(e => e.type === 'start');
+      expect(endIdx).toBeLessThan(startIdx);
+      expect(renderer._startedWidgets.size).toBe(1);
+
+      await vi.advanceTimersByTimeAsync(60000);
+      await p1;
+      await p2;
+      vi.useRealTimers();
+    });
+
+    it('should be idempotent on double stopWidget calls', async () => {
+      vi.useFakeTimers();
+      const ends = [];
+      renderer.on('widgetEnd', (e) => ends.push(e));
+
+      const xlf = `
+        <layout width="1920" height="1080" duration="10">
+          <region id="r1" width="1920" height="1080" top="0" left="0">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+
+      const renderPromise = renderer.renderLayout(xlf, 1);
+      await vi.advanceTimersByTimeAsync(2000);
+
+      // Stop twice
+      await renderer.stopWidget('r1', 0);
+      await renderer.stopWidget('r1', 0);
+
+      expect(ends).toHaveLength(1); // only 1 widgetEnd, not 2
+
+      await vi.advanceTimersByTimeAsync(60000);
+      await renderPromise;
+      vi.useRealTimers();
+    });
+
+    it('should not double-emit widgetEnd on layout timer + stopCurrentLayout', async () => {
+      vi.useFakeTimers();
+      const ends = [];
+      renderer.on('widgetEnd', (e) => ends.push(e));
+
+      const xlf = `
+        <layout width="1920" height="1080" duration="5">
+          <region id="r1" width="1920" height="1080" top="0" left="0">
+            <media id="m1" type="image" duration="5" fileId="1">
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+
+      const renderPromise = renderer.renderLayout(xlf, 1);
+      await vi.advanceTimersByTimeAsync(2000);
+
+      // Advance past layout duration (layout timer fires, which triggers stopCurrentLayout internally via layoutEnd)
+      await vi.advanceTimersByTimeAsync(5000);
+
+      // Now explicitly stop (as renderLayout(next) would do)
+      renderer.stopCurrentLayout();
+
+      // Should only have 1 widgetEnd total, not 2
+      expect(ends).toHaveLength(1);
+
+      await vi.advanceTimersByTimeAsync(60000);
+      await renderPromise;
+      vi.useRealTimers();
+    });
+
+    it('should balance starts and ends during multi-widget cycling', async () => {
+      vi.useFakeTimers();
+      let startCount = 0;
+      let endCount = 0;
+      renderer.on('widgetStart', () => startCount++);
+      renderer.on('widgetEnd', () => endCount++);
+
+      const xlf = `
+        <layout width="1920" height="1080" duration="30">
+          <region id="r1" width="1920" height="1080" top="0" left="0">
+            <media id="m1" type="image" duration="2" fileId="1">
+              <options><uri>img1.png</uri></options>
+            </media>
+            <media id="m2" type="image" duration="2" fileId="2">
+              <options><uri>img2.png</uri></options>
+            </media>
+            <media id="m3" type="image" duration="2" fileId="3">
+              <options><uri>img3.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+
+      const renderPromise = renderer.renderLayout(xlf, 1);
+      await vi.advanceTimersByTimeAsync(1000);
+
+      // Cycle through several widgets (3 widgets × 2s each = 6s per cycle)
+      for (let i = 0; i < 12; i++) {
+        await vi.advanceTimersByTimeAsync(2000);
+      }
+
+      // At any point, starts should be >= ends
+      expect(startCount).toBeGreaterThanOrEqual(endCount);
+
+      // After full teardown, they should balance
+      renderer.stopCurrentLayout();
+      expect(startCount).toBe(endCount);
+      expect(renderer._startedWidgets.size).toBe(0);
+
+      await vi.advanceTimersByTimeAsync(60000);
+      await renderPromise;
+      vi.useRealTimers();
+    });
+  });
 });