@xiboplayer/renderer 0.7.5 → 0.7.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xiboplayer/renderer",
-  "version": "0.7.5",
+  "version": "0.7.7",
   "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.5",
-    "@xiboplayer/schedule": "0.7.5",
-    "@xiboplayer/utils": "0.7.5"
+    "@xiboplayer/schedule": "0.7.7",
+    "@xiboplayer/utils": "0.7.7",
+    "@xiboplayer/cache": "0.7.7"
   },
   "devDependencies": {
     "jsdom": "^25.0.1",

package/src/renderer-lite.js

@@ -714,6 +714,7 @@ export class RendererLite {
     if (maxRegionDuration > 0 && maxRegionDuration !== this.currentLayout.duration) {
       const oldDuration = this.currentLayout.duration;
       this.currentLayout.duration = maxRegionDuration;
+      this.currentLayout._durationFromMetadata = true;
 
       this.log.info(`Layout duration updated: ${oldDuration}s → ${maxRegionDuration}s (based on video metadata)`);
       const final_ = !this._hasUnprobedVideos();
@@ -1639,7 +1640,9 @@ export class RendererLite {
     // Dynamic layouts (useDuration=0 videos): defer timer until video metadata
     // provides real durations. Safety timeout ensures corrupt/missing videos
     // don't freeze the display forever.
-    if (layout.isDynamic && this._hasUnprobedVideos()) {
+    // Skip deferral if updateLayoutDuration() already set the duration from
+    // video metadata (e.g. during preload or a previous play of this layout).
+    if (layout.isDynamic && !layout._durationFromMetadata && this._hasUnprobedVideos()) {
       this._deferredTimerLayoutId = layoutId;
       this._layoutTimerStartedAt = Date.now();
       this.log.info(`Layout ${layoutId} has unprobed videos — deferring timer until metadata loads`);
@@ -1662,14 +1665,30 @@ export class RendererLite {
   }
 
   /**
-   * 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.
+   * Check if any region's longest-running video widget (useDuration=0) hasn't
+   * been probed yet. Used to decide whether to defer the layout timer.
+   *
+   * Only checks widgets that have had <video> elements created (during preload
+   * or show). Widgets that haven't been displayed yet can never be probed —
+   * checking them would always force a 30s timeout on layouts with multiple
+   * video widgets per region.
+   *
+   * Returns false if the layout duration has already been updated from video
+   * metadata (meaning at least one probe succeeded and updateLayoutDuration
+   * computed a real duration), since the timer can start with that value.
    */
   _hasUnprobedVideos() {
+    // If any video was probed and updateLayoutDuration ran, the layout duration
+    // is already based on real metadata — no need to defer further.
+    for (const [, region] of this.regions) {
+      for (const widget of region.widgets) {
+        if (widget.type === 'video' && widget.useDuration === 0 && widget._probed) return false;
+      }
+    }
+    // No videos probed at all — check if there are any that need probing
     for (const [, region] of this.regions) {
       for (const widget of region.widgets) {
-        if (widget.useDuration === 0 && !widget._probed) return true;
+        if (widget.type === 'video' && widget.useDuration === 0) return true;
       }
     }
     return false;
@@ -1841,27 +1860,36 @@ export class RendererLite {
     }
 
     const videoEl = widgetElement.querySelector('video');
-    if (videoEl && widget.options.loop !== '1') videoEl.pause();
+    if (videoEl) {
+      videoEl.pause();
 
-    // Stop MediaStream tracks (webcam/mic) to release the device
-    if (videoEl?._mediaStream) {
-      videoEl._mediaStream.getTracks().forEach(t => t.stop());
-      videoEl._mediaStream = null;
-      videoEl.srcObject = null;
-    }
+      // Stop MediaStream tracks (webcam/mic) to release the device
+      if (videoEl._mediaStream) {
+        videoEl._mediaStream.getTracks().forEach(t => t.stop());
+        videoEl._mediaStream = null;
+        videoEl.srcObject = null;
+      }
 
-    // Destroy HLS.js instance to free worker + buffers
-    if (videoEl?._hlsInstance) {
-      videoEl._hlsInstance.destroy();
-      videoEl._hlsInstance = null;
-    }
+      // Destroy HLS.js instance to free worker + buffers
+      if (videoEl._hlsInstance) {
+        videoEl._hlsInstance.destroy();
+        videoEl._hlsInstance = null;
+      }
 
-    // Remove event listeners to prevent accumulation across widget cycles
-    if (videoEl?._eventCleanup) {
-      for (const [event, handler] of videoEl._eventCleanup) {
-        videoEl.removeEventListener(event, handler);
+      // Release decoded video buffers (GPU dmabufs) — without this, paused
+      // videos hold texture memory until the layout is evicted from the pool.
+      // removeAttribute('src') + load() forces the browser to drop the decoded
+      // frame, releasing GPU dmabufs immediately instead of at pool eviction.
+      videoEl.removeAttribute('src');
+      videoEl.load();
+
+      // Remove event listeners to prevent accumulation across widget cycles
+      if (videoEl._eventCleanup) {
+        for (const [event, handler] of videoEl._eventCleanup) {
+          videoEl.removeEventListener(event, handler);
+        }
+        videoEl._eventCleanup = null;
       }
-      videoEl._eventCleanup = null;
     }
 
     const audioEl = widgetElement.querySelector('audio');
@@ -2844,6 +2872,13 @@ export class RendererLite {
       return true;
     }
 
+    // Don't preload if already in-flight (prevents triple preload when
+    // 75% and 90% timers both fire before the async preload completes)
+    if (this._preloadingLayoutId === layoutId) {
+      this.log.info(`Layout ${layoutId} preload already in-flight, skipping`);
+      return true;
+    }
+
     try {
       this.log.info(`Preloading layout ${layoutId} into pool...`);
 
@@ -3076,6 +3111,50 @@ export class RendererLite {
     }
 
     this.log.info(`Swapped to preloaded layout ${layoutId} (instant transition)`);
+    this._logResourceStats(layoutId);
+  }
+
+  /**
+   * Log resource allocation stats for debugging memory/GPU leaks.
+   * Called after every layout swap to track DOM node accumulation,
+   * video element lifecycle, and pool state.
+   */
+  _logResourceStats(layoutId) {
+    const domNodes = document.querySelectorAll('*').length;
+    const videos = document.querySelectorAll('video').length;
+    const videosSrc = document.querySelectorAll('video[src]').length;
+    const canvases = document.querySelectorAll('canvas').length;
+    const iframes = document.querySelectorAll('iframe').length;
+    const images = document.querySelectorAll('img').length;
+    const poolSize = this.layoutPool ? this.layoutPool.size : 0;
+    const regionCount = this.regions ? this.regions.size : 0;
+    const widgetElements = [...(this.regions?.values() || [])].reduce(
+      (sum, r) => sum + (r.widgetElements?.size || 0), 0
+    );
+    const jsHeap = performance?.memory ? {
+      used: Math.round(performance.memory.usedJSHeapSize / 1048576),
+      total: Math.round(performance.memory.totalJSHeapSize / 1048576),
+      limit: Math.round(performance.memory.jsHeapSizeLimit / 1048576),
+    } : null;
+
+    // Count blob URLs still tracked (potential leak indicator)
+    const blobUrls = this._blobUrls ? [...this._blobUrls.values()].reduce((s, set) => s + set.size, 0) : 0;
+    const blobLayouts = this._blobUrls ? this._blobUrls.size : 0;
+
+    // Preload wrapper divs in DOM (should be 0-1 in normal operation)
+    const preloadWrappers = document.querySelectorAll('.renderer-lite-preload-wrapper').length;
+
+    // Audio overlay elements
+    const audioEls = document.querySelectorAll('audio').length;
+
+    const heapStr = jsHeap ? `heap=${jsHeap.used}/${jsHeap.total}MB (limit ${jsHeap.limit}MB)` : 'heap=N/A';
+    this.log.info(
+      `[Resources] layout=${layoutId} dom=${domNodes} videos=${videos}(src=${videosSrc}) ` +
+      `canvas=${canvases} iframe=${iframes} img=${images} audio=${audioEls} ` +
+      `pool=${poolSize} preloadWrappers=${preloadWrappers} ` +
+      `regions=${regionCount} widgets=${widgetElements} ` +
+      `blobs=${blobUrls}(${blobLayouts} layouts) ${heapStr}`
+    );
   }
 
   /**