@xiboplayer/renderer 0.5.8 → 0.5.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xiboplayer/renderer",
-  "version": "0.5.8",
+  "version": "0.5.10",
   "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/utils": "0.5.8",
-    "@xiboplayer/cache": "0.5.8"
+    "@xiboplayer/cache": "0.5.10",
+    "@xiboplayer/utils": "0.5.10"
   },
   "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

@@ -1923,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}`);
@@ -2670,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(
@@ -2838,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(