@xiboplayer/renderer 0.5.7 → 0.5.9

package/package.json

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

package/src/layout-pool.js

@@ -101,7 +101,7 @@ export class LayoutPool {
 
   /**
    * Evict a specific layout from the pool.
-   * Revokes blob URLs and removes the container from the DOM.
+   * Releases video/audio resources, revokes blob URLs, and removes the container from the DOM.
    * @param {number} layoutId
    */
   evict(layoutId) {
@@ -110,6 +110,22 @@ export class LayoutPool {
 
     log.info(`Evicting layout ${layoutId} from pool`);
 
+    // Stop any active region timers
+    if (entry.regions) {
+      for (const [regionId, region] of entry.regions) {
+        if (region.timer) {
+          clearTimeout(region.timer);
+          region.timer = null;
+        }
+      }
+    }
+
+    // Release all video/audio resources BEFORE removing from DOM.
+    // Removing a <video> with an active src leaks decoded frame buffers.
+    if (entry.container) {
+      LayoutPool.releaseMediaElements(entry.container);
+    }
+
     // Revoke blob URLs
     if (entry.blobUrls && entry.blobUrls.size > 0) {
       entry.blobUrls.forEach(url => {
@@ -127,16 +143,6 @@ export class LayoutPool {
       }
     }
 
-    // Stop any active region timers
-    if (entry.regions) {
-      for (const [regionId, region] of entry.regions) {
-        if (region.timer) {
-          clearTimeout(region.timer);
-          region.timer = null;
-        }
-      }
-    }
-
     // Remove container from DOM
     if (entry.container && entry.container.parentNode) {
       entry.container.remove();
@@ -150,6 +156,48 @@ export class LayoutPool {
     }
   }
 
+  /**
+   * Release all video and audio elements inside a container.
+   * Must be called BEFORE removing the container from the DOM —
+   * browsers keep decoded frame buffers alive for detached <video> elements
+   * that still have a src.
+   *
+   * @param {HTMLElement} container
+   */
+  static releaseMediaElements(container) {
+    let videoCount = 0;
+    let hlsCount = 0;
+
+    container.querySelectorAll('video').forEach(v => {
+      // Destroy hls.js instance if attached (stored by renderVideo)
+      if (v._hlsInstance) {
+        v._hlsInstance.destroy();
+        v._hlsInstance = null;
+        hlsCount++;
+      }
+      // Stop MediaStream tracks (webcam/mic)
+      if (v._mediaStream) {
+        v._mediaStream.getTracks().forEach(t => t.stop());
+        v._mediaStream = null;
+        v.srcObject = null;
+      }
+      v.pause();
+      v.removeAttribute('src');
+      v.load(); // Forces browser to release decoded buffers
+      videoCount++;
+    });
+
+    container.querySelectorAll('audio').forEach(a => {
+      a.pause();
+      a.removeAttribute('src');
+      a.load();
+    });
+
+    if (videoCount > 0) {
+      log.info(`Released ${videoCount} video(s)${hlsCount ? ` (${hlsCount} HLS)` : ''}`);
+    }
+  }
+
   /**
    * Evict the least-recently-used warm entry.
    * Only warm entries are eligible for eviction (never the hot layout).

package/src/layout.js

@@ -155,23 +155,19 @@ export class LayoutTranslator {
       if (!raw && lastError) {
         log.warn('All retries failed, checking for cached widget HTML...');
 
-        // Try to get cached widget HTML directly from Cache API
+        // Try to get cached widget HTML from ContentStore via proxy
         try {
-          const cachedKey = `/cache/widget/${layoutId}/${regionId}/${id}.html`;
-          const cache = await caches.open('xibo-media-v1');
-          const cached = await cache.match(new Request(window.location.origin + '/player' + cachedKey));
-
-          if (cached) {
-            raw = await cached.text();
-            options.widgetCacheKey = cachedKey;
-            log.info(`Using cached widget HTML (${raw.length} chars) - CMS update pending`);
+          const resp = await fetch(`/store/widget/${layoutId}/${regionId}/${id}`);
+          if (resp.ok) {
+            raw = await resp.text();
+            options.widgetCacheKey = `/cache/widget/${layoutId}/${regionId}/${id}`;
+            log.info(`Using stored widget HTML (${raw.length} chars) - CMS update pending`);
           } else {
-            log.error(`No cached version available for widget ${id}`);
-            // Show minimal placeholder that doesn't look like an error
+            log.error(`No stored version available for widget ${id}`);
             raw = `<div style="display:flex;align-items:center;justify-content:center;height:100%;color:#999;font-size:18px;">Content updating...</div>`;
           }
-        } catch (cacheError) {
-          log.error('Cache fallback failed:', cacheError);
+        } catch (storeError) {
+          log.error('Store fallback failed:', storeError);
           raw = `<div style="display:flex;align-items:center;justify-content:center;height:100%;color:#999;font-size:18px;">Content updating...</div>`;
         }
       }
@@ -330,10 +326,15 @@ Object.keys(regions).forEach(id => {
   playRegion(id);
 });
 
+// Track active timers per region so layout teardown can cancel them
+const regionTimers = {};
+
 function playRegion(id) {
   const region = regions[id];
   if (!region || region.media.length === 0) return;
 
+  regionTimers[id] = [];
+
   // If only one media item, just show it and don't cycle (arexibo behavior)
   if (region.media.length === 1) {
     const media = region.media[0];
@@ -349,15 +350,21 @@ function playRegion(id) {
     if (media.start) media.start();
 
     const duration = media.duration || 10;
-    setTimeout(() => {
+    const timerId = setTimeout(() => {
       if (media.stop) media.stop();
       currentIndex = (currentIndex + 1) % region.media.length;
       playNext();
     }, duration * 1000);
+    regionTimers[id].push(timerId);
   }
 
   playNext();
 }
+
+// Cleanup function — called before layout teardown
+window._stopAllRegions = function() {
+  Object.values(regionTimers).forEach(timers => timers.forEach(t => clearTimeout(t)));
+};
 </script>
 </body>
 </html>`;
@@ -815,6 +822,9 @@ ${mediaJS}
             }
           }
 
+          // Store live timer array on element for cleanup (not JSON — stays current)
+          container._pageTimers = pageTimers;
+
           // Start cycling
           await cyclePage();
 
@@ -827,9 +837,6 @@ ${mediaJS}
             container.style.opacity = '1';
           }
 
-          // Store timers for cleanup
-          container.dataset.pageTimers = JSON.stringify(pageTimers.map(t => t));
-
         } catch (error) {
           console.error('[PDF] Render failed:', error);
           container.innerHTML = '<div style="color:white;padding:20px;text-align:center;">Failed to load PDF</div>';
@@ -841,12 +848,10 @@ ${mediaJS}
         const region = document.getElementById('region_${regionId}');
         const container = document.getElementById('${pdfContainerId}');
         if (container) {
-          // Clear page cycling timers
-          const timers = container.dataset.pageTimers;
-          if (timers) {
-            try {
-              JSON.parse(timers).forEach(t => clearTimeout(t));
-            } catch (e) {}
+          // Clear page cycling timers (live array, always current)
+          if (container._pageTimers) {
+            container._pageTimers.forEach(t => clearTimeout(t));
+            container._pageTimers.length = 0;
           }
 
           const transOut = ${transOut};

package/src/renderer-lite.js

@@ -689,30 +689,33 @@ export class RendererLite {
       maxRegionDuration = Math.max(maxRegionDuration, regionDuration);
     }
 
-    // If we calculated a different duration, update layout
-    if (maxRegionDuration > 0 && maxRegionDuration !== this.currentLayout.duration) {
+    // If we calculated a LONGER duration, update layout.
+    // Never downgrade — widgets with useDuration=0 start at duration=0
+    // until loadedmetadata fires, so early calculations undercount.
+    if (maxRegionDuration > 0 && maxRegionDuration > this.currentLayout.duration) {
       const oldDuration = this.currentLayout.duration;
       this.currentLayout.duration = maxRegionDuration;
 
       this.log.info(`Layout duration updated: ${oldDuration}s → ${maxRegionDuration}s (based on video metadata)`);
       this.emit('layoutDurationUpdated', this.currentLayoutId, maxRegionDuration);
 
-      // Reset layout timer with new duration — but only if a timer is already running.
+      // Reset layout timer with REMAINING time — not full duration.
       // If startLayoutTimerWhenReady() hasn't fired yet (still waiting for widgets),
       // it will pick up the updated duration when it starts the timer.
       if (this.layoutTimer) {
         clearTimeout(this.layoutTimer);
 
-        const layoutDurationMs = this.currentLayout.duration * 1000;
+        const elapsed = Date.now() - (this._layoutTimerStartedAt || Date.now());
+        const remainingMs = Math.max(1000, this.currentLayout.duration * 1000 - elapsed);
         this.layoutTimer = setTimeout(() => {
           this.log.info(`Layout ${this.currentLayoutId} duration expired (${this.currentLayout.duration}s)`);
           if (this.currentLayoutId) {
             this.layoutEndEmitted = true;
             this.emit('layoutEnd', this.currentLayoutId);
           }
-        }, layoutDurationMs);
+        }, remainingMs);
 
-        this.log.info(`Layout timer reset to ${this.currentLayout.duration}s`);
+        this.log.info(`Layout timer adjusted to ${(remainingMs / 1000).toFixed(1)}s remaining (elapsed ${(elapsed / 1000).toFixed(1)}s of ${this.currentLayout.duration}s)`);
       } else {
         this.log.info(`Layout duration updated to ${maxRegionDuration}s (timer not yet started, will use new value)`);
       }
@@ -1920,10 +1923,12 @@ export class RendererLite {
             const hls = new Hls({ enableWorker: true, lowLatencyMode: true });
             hls.loadSource(videoSrc);
             hls.attachMedia(video);
+            video._hlsInstance = hls; // Store for cleanup on eviction
             hls.on(Hls.Events.ERROR, (_event, data) => {
               if (data.fatal) {
                 this.log.error(`HLS fatal error: ${data.type}`, data.details);
                 hls.destroy();
+                video._hlsInstance = null;
               }
             });
             this.log.info(`HLS stream (hls.js): ${fileId}`);
@@ -1941,17 +1946,28 @@ export class RendererLite {
     }
 
     // Detect video duration for dynamic layout timing (when useDuration=0)
+    // Capture the layout ID at creation time — if the layout changes before
+    // loadedmetadata fires (e.g. video was preloaded for next layout), we must
+    // NOT update the current layout's duration with a different layout's video.
+    const createdForLayoutId = this.currentLayoutId;
     video.addEventListener('loadedmetadata', () => {
       const videoDuration = Math.floor(video.duration);
       this.log.info(`Video ${fileId} duration detected: ${videoDuration}s`);
 
-      // If widget has useDuration=0, update widget duration with actual video length
+      // Always update widget duration — it's the widget's own data, safe
+      // even if this video was preloaded for a different layout.
       if (widget.duration === 0 || widget.useDuration === 0) {
         widget.duration = videoDuration;
         this.log.info(`Updated widget ${widget.id} duration to ${videoDuration}s (useDuration=0)`);
 
-        // Recalculate layout duration if needed
-        this.updateLayoutDuration();
+        // Only recalculate current layout's timer if this video belongs to it.
+        // Preloaded layouts will pick up the corrected widget.duration when
+        // they start playing (via updateLayoutDuration() in swapToPreloadedLayout).
+        if (this.currentLayoutId === createdForLayoutId) {
+          this.updateLayoutDuration();
+        } else {
+          this.log.info(`Video ${fileId} duration set but layout timer not updated (preloaded for layout ${createdForLayoutId}, current is ${this.currentLayoutId})`);
+        }
       }
     });
 
@@ -2086,6 +2102,7 @@ export class RendererLite {
     });
 
     // Detect audio duration for dynamic layout timing (when useDuration=0)
+    const audioCreatedForLayoutId = this.currentLayoutId;
     audio.addEventListener('loadedmetadata', () => {
       const audioDuration = Math.floor(audio.duration);
       this.log.info(`Audio ${fileId} duration detected: ${audioDuration}s`);
@@ -2093,7 +2110,12 @@ export class RendererLite {
       if (widget.duration === 0 || widget.useDuration === 0) {
         widget.duration = audioDuration;
         this.log.info(`Updated widget ${widget.id} duration to ${audioDuration}s (useDuration=0)`);
-        this.updateLayoutDuration();
+
+        if (this.currentLayoutId === audioCreatedForLayoutId) {
+          this.updateLayoutDuration();
+        } else {
+          this.log.info(`Audio ${fileId} duration set but layout timer not updated (preloaded for layout ${audioCreatedForLayoutId}, current is ${this.currentLayoutId})`);
+        }
       }
     });
 
@@ -2650,12 +2672,8 @@ export class RendererLite {
           clearTimeout(region.timer);
           region.timer = null;
         }
-        // Release video resources
-        region.element.querySelectorAll('video').forEach(v => {
-          v.pause();
-          v.removeAttribute('src');
-          v.load();
-        });
+        // Release video/audio resources before removing from DOM
+        LayoutPool.releaseMediaElements(region.element);
         // Apply region exit transition if configured, then remove
         if (region.config && region.config.exitTransition) {
           const animation = Transitions.apply(
@@ -2818,6 +2836,9 @@ export class RendererLite {
           this.stopWidget(regionId, region.currentIndex);
         }
 
+        // Release video/audio resources before removing from DOM
+        LayoutPool.releaseMediaElements(region.element);
+
         // Apply region exit transition if configured, then remove
         if (region.config && region.config.exitTransition) {
           const animation = Transitions.apply(