@xiboplayer/renderer 0.5.19 → 0.6.0

package/package.json

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

package/src/layout.js

@@ -4,7 +4,7 @@
  */
 
 import { cacheWidgetHtml } from '@xiboplayer/cache';
-import { createLogger } from '@xiboplayer/utils';
+import { createLogger, PLAYER_API } from '@xiboplayer/utils';
 
 const log = createLogger('Layout');
 
@@ -157,10 +157,10 @@ export class LayoutTranslator {
 
         // Try to get cached widget HTML from ContentStore via proxy
         try {
-          const resp = await fetch(`/store/widget/${layoutId}/${regionId}/${id}`);
+          const resp = await fetch(`/store${PLAYER_API}/widgets/${layoutId}/${regionId}/${id}`);
           if (resp.ok) {
             raw = await resp.text();
-            options.widgetCacheKey = `/cache/widget/${layoutId}/${regionId}/${id}`;
+            options.widgetCacheKey = `${PLAYER_API}/widgets/${layoutId}/${regionId}/${id}`;
             log.info(`Using stored widget HTML (${raw.length} chars) - CMS update pending`);
           } else {
             log.error(`No stored version available for widget ${id}`);
@@ -466,7 +466,7 @@ ${mediaJS}
     switch (media.type) {
       case 'image':
         // Use absolute URL within service worker scope
-        const imageSrc = `${window.location.origin}/player/cache/media/${media.options.uri}`;
+        const imageSrc = `${window.location.origin}${PLAYER_API}/media/${media.options.uri}`;
         startFn = `() => {
         const region = document.getElementById('region_${regionId}');
         const img = document.createElement('img');
@@ -490,7 +490,7 @@ ${mediaJS}
       case 'video':
         // All videos use cache URL pattern
         // Background-downloaded videos will auto-reload when cache completes
-        const videoSrc = `${window.location.origin}/player/cache/media/${media.options.uri}`;
+        const videoSrc = `${window.location.origin}${PLAYER_API}/media/${media.options.uri}`;
         const videoFilename = media.options.uri;
 
         startFn = `() => {
@@ -515,8 +515,8 @@ ${mediaJS}
             video.play();
           }
         };
+        video._retryOnCache = retryOnCache;
         window.addEventListener('media-cached', retryOnCache);
-        video.dataset.cacheListener = 'attached';
 
         region.innerHTML = '';
         region.appendChild(video);
@@ -536,6 +536,11 @@ ${mediaJS}
         const region = document.getElementById('region_${regionId}');
         const video = document.querySelector('#region_${regionId} video');
         if (video) {
+          // Remove global media-cached listener to prevent leak
+          if (video._retryOnCache) {
+            window.removeEventListener('media-cached', video._retryOnCache);
+            video._retryOnCache = null;
+          }
           const transOut = ${transOut};
           if (transOut && window.Transitions) {
             const regionRect = region.getBoundingClientRect();
@@ -559,7 +564,7 @@ ${mediaJS}
         // Text/ticker widgets use the same iframe pattern as default widgets.
         // If no widgetCacheKey, fall through to the default case which handles unsupported types.
         if (media.options.widgetCacheKey) {
-          const textUrl = `${window.location.origin}/player${media.options.widgetCacheKey}`;
+          const textUrl = `${window.location.origin}${media.options.widgetCacheKey}`;
           const iframe = this._generateIframeWidgetJS(regionId, media.id, textUrl, transIn, transOut);
           startFn = iframe.startFn;
           stopFn = iframe.stopFn;
@@ -568,7 +573,7 @@ ${mediaJS}
         // Fall through to default (handles missing widgetCacheKey as unsupported)
 
       case 'audio':
-        const audioSrc = `${window.location.origin}/player/cache/media/${media.options.uri}`;
+        const audioSrc = `${window.location.origin}${PLAYER_API}/media/${media.options.uri}`;
         const audioId = `audio_${regionId}_${media.id}`;
         const audioLoop = media.options.loop === '1';
         const audioVolume = (parseInt(media.options.volume || '100') / 100).toFixed(2);
@@ -684,7 +689,7 @@ ${mediaJS}
         break;
 
       case 'pdf':
-        const pdfSrc = `${window.location.origin}/player/cache/media/${media.options.uri}`;
+        const pdfSrc = `${window.location.origin}${PLAYER_API}/media/${media.options.uri}`;
         const pdfContainerId = `pdf_${regionId}_${media.id}`;
         const pdfDuration = duration; // Total duration for entire PDF
 
@@ -897,7 +902,7 @@ ${mediaJS}
         // Widgets (clock, calendar, weather, etc.) - use cache URL pattern in /player/ scope for SW
         // Keep widget iframes alive across duration cycles (arexibo behavior)
         if (media.options.widgetCacheKey) {
-          const widgetUrl = `${window.location.origin}/player${media.options.widgetCacheKey}`;
+          const widgetUrl = `${window.location.origin}${media.options.widgetCacheKey}`;
           const iframe = this._generateIframeWidgetJS(regionId, media.id, widgetUrl, transIn, transOut);
           startFn = iframe.startFn;
           stopFn = iframe.stopFn;

package/src/renderer-lite.js

@@ -40,7 +40,7 @@
  */
 
 import { createNanoEvents } from 'nanoevents';
-import { createLogger, isDebug } from '@xiboplayer/utils';
+import { createLogger, isDebug, PLAYER_API } from '@xiboplayer/utils';
 import { LayoutPool } from './layout-pool.js';
 
 /**
@@ -642,13 +642,17 @@ export class RendererLite {
    * @param {string} blobUrl - Blob URL to track
    */
   trackBlobUrl(blobUrl) {
-    if (!this.currentLayoutId) return;
+    const layoutId = this.currentLayoutId || 0;
 
-    if (!this.layoutBlobUrls.has(this.currentLayoutId)) {
-      this.layoutBlobUrls.set(this.currentLayoutId, new Set());
+    if (!layoutId) {
+      this.log.warn('trackBlobUrl called without currentLayoutId, tracking under key 0');
     }
 
-    this.layoutBlobUrls.get(this.currentLayoutId).add(blobUrl);
+    if (!this.layoutBlobUrls.has(layoutId)) {
+      this.layoutBlobUrls.set(layoutId, new Set());
+    }
+
+    this.layoutBlobUrls.get(layoutId).add(blobUrl);
   }
 
   /**
@@ -1369,15 +1373,16 @@ export class RendererLite {
         return Promise.resolve();
       }
       return new Promise((resolve) => {
-        const timer = setTimeout(() => {
-          this.log.warn(`Image ready timeout for widget ${widget.id}`);
-          resolve();
-        }, READY_TIMEOUT);
         const onLoad = () => {
           imgEl.removeEventListener('load', onLoad);
           clearTimeout(timer);
           resolve();
         };
+        const timer = setTimeout(() => {
+          imgEl.removeEventListener('load', onLoad);
+          this.log.warn(`Image ready timeout for widget ${widget.id}`);
+          resolve();
+        }, READY_TIMEOUT);
         imgEl.addEventListener('load', onLoad);
       });
     }
@@ -1516,10 +1521,10 @@ export class RendererLite {
         this.options.getMediaUrl(mediaId).then(url => {
           audio.src = url;
         }).catch(() => {
-          audio.src = `${window.location.origin}/player/cache/media/${audioNode.uri}`;
+          audio.src = `${window.location.origin}${PLAYER_API}/media/${audioNode.uri}`;
         });
       } else if (!audioSrc) {
-        audio.src = `${window.location.origin}/player/cache/media/${audioNode.uri}`;
+        audio.src = `${window.location.origin}${PLAYER_API}/media/${audioNode.uri}`;
       } else {
         audio.src = audioSrc;
       }
@@ -1592,9 +1597,31 @@ export class RendererLite {
       videoEl.srcObject = 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);
+      }
+      videoEl._eventCleanup = null;
+    }
+
     const audioEl = widgetElement.querySelector('audio');
     if (audioEl && widget.options.loop !== '1') audioEl.pause();
 
+    // Remove audio event listeners
+    if (audioEl?._eventCleanup) {
+      for (const [event, handler] of audioEl._eventCleanup) {
+        audioEl.removeEventListener(event, handler);
+      }
+      audioEl._eventCleanup = null;
+    }
+
     // Stop audio overlays attached to this widget
     this._stopAudioOverlays(widget.id);
 
@@ -1866,7 +1893,7 @@ export class RendererLite {
     if (!imageSrc && this.options.getMediaUrl) {
       imageSrc = await this.options.getMediaUrl(fileId);
     } else if (!imageSrc) {
-      imageSrc = `${window.location.origin}/player/cache/media/${widget.options.uri}`;
+      imageSrc = `${window.location.origin}${PLAYER_API}/media/${widget.options.uri}`;
     }
 
     img.src = imageSrc;
@@ -1892,28 +1919,26 @@ export class RendererLite {
     video.controls = false; // Hidden by default — toggle with V key in PWA
     video.playsInline = true; // Prevent fullscreen on mobile
 
+    // Get media URL from cache (already pre-fetched!) or fetch on-demand
+    const fileId = parseInt(widget.fileId || widget.id);
+
     // Handle video end - pause on last frame instead of showing black
     // Widget cycling will restart the video via updateMediaElement()
-    video.addEventListener('ended', () => {
+    const onEnded = () => {
       if (widget.options.loop === '1') {
-        // For looping videos: seek back to start but stay paused on first frame
-        // This avoids black frames - shows first frame until widget cycles
         video.currentTime = 0;
         this.log.info(`Video ${fileId} ended - reset to start, waiting for widget cycle to replay`);
       } else {
-        // For non-looping videos: stay paused on last frame
         this.log.info(`Video ${fileId} ended - paused on last frame`);
       }
-    });
-
-    // Get media URL from cache (already pre-fetched!) or fetch on-demand
-    const fileId = parseInt(widget.fileId || widget.id);
+    };
+    video.addEventListener('ended', onEnded);
     let videoSrc = this.mediaUrlCache.get(fileId);
 
     if (!videoSrc && this.options.getMediaUrl) {
       videoSrc = await this.options.getMediaUrl(fileId);
     } else if (!videoSrc) {
-      videoSrc = `${window.location.origin}/player/cache/media/${fileId}`;
+      videoSrc = `${window.location.origin}${PLAYER_API}/media/${fileId}`;
     }
 
     // HLS/DASH streaming support
@@ -1958,49 +1983,50 @@ export class RendererLite {
     // 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 onLoadedMetadata = () => {
       const videoDuration = Math.floor(video.duration);
       this.log.info(`Video ${fileId} duration detected: ${videoDuration}s`);
 
-      // 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)`);
 
-        // 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})`);
         }
       }
-    });
+    };
+    video.addEventListener('loadedmetadata', onLoadedMetadata);
 
-    // Debug video loading
-    video.addEventListener('loadeddata', () => {
+    const onLoadedData = () => {
       this.log.info('Video loaded and ready:', fileId);
-    });
+    };
+    video.addEventListener('loadeddata', onLoadedData);
 
-    // Handle video errors
-    video.addEventListener('error', (e) => {
+    const onError = () => {
       const error = video.error;
       const errorCode = error?.code;
       const errorMessage = error?.message || 'Unknown error';
+      this.log.warn(`Video error: ${fileId}, code: ${errorCode}, time: ${video.currentTime.toFixed(1)}s, message: ${errorMessage}`);
+      this.emit('videoError', { fileId, errorCode, errorMessage, currentTime: video.currentTime });
+    };
+    video.addEventListener('error', onError);
 
-      // Log all video errors for debugging, but never show to users
-      // These are often transient codec warnings that don't prevent playback
-      this.log.warn(`Video error (non-fatal, logged only): ${fileId}, code: ${errorCode}, time: ${video.currentTime.toFixed(1)}s, message: ${errorMessage}`);
-
-      // Do NOT emit error events - video errors are logged but not surfaced to UI
-      // Video will either recover (transient decode error) or fail completely (handled elsewhere)
-    });
-
-    video.addEventListener('playing', () => {
+    const onPlaying = () => {
       this.log.info('Video playing:', fileId);
-    });
+    };
+    video.addEventListener('playing', onPlaying);
+
+    // Store listener references for cleanup in _hideWidget()
+    video._eventCleanup = [
+      ['ended', onEnded],
+      ['loadedmetadata', onLoadedMetadata],
+      ['loadeddata', onLoadedData],
+      ['error', onError],
+      ['playing', onPlaying],
+    ];
 
     this.log.info('Video element created:', fileId, video.src);
 
@@ -2094,24 +2120,25 @@ export class RendererLite {
     if (!audioSrc && this.options.getMediaUrl) {
       audioSrc = await this.options.getMediaUrl(fileId);
     } else if (!audioSrc) {
-      audioSrc = `${window.location.origin}/player/cache/media/${fileId}`;
+      audioSrc = `${window.location.origin}${PLAYER_API}/media/${fileId}`;
     }
 
     audio.src = audioSrc;
 
     // Handle audio end - similar to video ended handling
-    audio.addEventListener('ended', () => {
+    const onAudioEnded = () => {
       if (widget.options.loop === '1') {
         audio.currentTime = 0;
         this.log.info(`Audio ${fileId} ended - reset to start, waiting for widget cycle to replay`);
       } else {
         this.log.info(`Audio ${fileId} ended - playback complete`);
       }
-    });
+    };
+    audio.addEventListener('ended', onAudioEnded);
 
     // Detect audio duration for dynamic layout timing (when useDuration=0)
     const audioCreatedForLayoutId = this.currentLayoutId;
-    audio.addEventListener('loadedmetadata', () => {
+    const onAudioLoadedMetadata = () => {
       const audioDuration = Math.floor(audio.duration);
       this.log.info(`Audio ${fileId} duration detected: ${audioDuration}s`);
 
@@ -2125,13 +2152,22 @@ export class RendererLite {
           this.log.info(`Audio ${fileId} duration set but layout timer not updated (preloaded for layout ${audioCreatedForLayoutId}, current is ${this.currentLayoutId})`);
         }
       }
-    });
+    };
+    audio.addEventListener('loadedmetadata', onAudioLoadedMetadata);
 
     // Handle audio errors
-    audio.addEventListener('error', () => {
+    const onAudioError = () => {
       const error = audio.error;
       this.log.warn(`Audio error (non-fatal): ${fileId}, code: ${error?.code}, message: ${error?.message || 'Unknown'}`);
-    });
+    };
+    audio.addEventListener('error', onAudioError);
+
+    // Store listener references for cleanup in _hideWidget()
+    audio._eventCleanup = [
+      ['ended', onAudioEnded],
+      ['loadedmetadata', onAudioLoadedMetadata],
+      ['error', onAudioError],
+    ];
 
     // Visual feedback
     const icon = document.createElement('div');
@@ -2223,7 +2259,14 @@ export class RendererLite {
   }
 
   /**
-   * Render PDF widget
+   * Render PDF widget — single reusable canvas, page-by-page cycling.
+   *
+   * Memory strategy:
+   * - One canvas is created and reused for all pages (no DOM churn)
+   * - Each page is rendered sequentially (avoids concurrent render errors)
+   * - page.cleanup() releases PDF.js internal page buffers after each render
+   * - pdf.destroy() releases the entire document on widget teardown
+   * - Active renderTask is cancelled on cleanup to prevent stale renders
    */
   async renderPdf(widget, region) {
     const container = document.createElement('div');
@@ -2257,7 +2300,7 @@ export class RendererLite {
     if (!pdfUrl && this.options.getMediaUrl) {
       pdfUrl = await this.options.getMediaUrl(fileId);
     } else if (!pdfUrl) {
-      pdfUrl = `${window.location.origin}/player/cache/media/${widget.options.uri}`;
+      pdfUrl = `${window.location.origin}${PLAYER_API}/media/${widget.options.uri}`;
     }
 
     // Render PDF with multi-page cycling
@@ -2269,68 +2312,77 @@ export class RendererLite {
       const timePerPage = (duration * 1000) / totalPages;
       this.log.info(`[pdf] PDF loaded: ${totalPages} pages, ${duration}s duration, ${(timePerPage / 1000).toFixed(1)}s/page`);
 
-      // Render a single page to a canvas, scaled to fit the region
-      const renderPage = async (pageNum) => {
-        const page = await pdf.getPage(pageNum);
-        const viewport = page.getViewport({ scale: 1 });
-        const scale = Math.min(region.width / viewport.width, region.height / viewport.height);
-        const scaledViewport = page.getViewport({ scale });
-
-        const canvas = document.createElement('canvas');
-        canvas.className = 'pdf-page';
-        canvas.width = scaledViewport.width;
-        canvas.height = scaledViewport.height;
-        canvas.style.cssText = 'display:block;margin:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);';
-
-        const context = canvas.getContext('2d');
-        await page.render({ canvasContext: context, viewport: scaledViewport }).promise;
-        return canvas;
-      };
-
-      // Page indicator (bottom-right)
+      // Measure page size from first page to set up the single reusable canvas
+      const page1 = await pdf.getPage(1);
+      const viewport0 = page1.getViewport({ scale: 1 });
+      const scale = Math.min(region.width / viewport0.width, region.height / viewport0.height);
+      page1.cleanup();
+
+      const canvas = document.createElement('canvas');
+      canvas.className = 'pdf-page';
+      canvas.width = Math.floor(viewport0.width * scale);
+      canvas.height = Math.floor(viewport0.height * scale);
+      canvas.style.cssText = 'display:block;margin:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);';
+      const ctx = canvas.getContext('2d');
+      container.appendChild(canvas);
+
+      // Page indicator (bottom-right, v1-style pill)
       const indicator = document.createElement('div');
-      indicator.style.cssText = 'position:absolute;bottom:8px;right:12px;color:rgba(255,255,255,0.6);font:12px system-ui;z-index:1;';
+      indicator.style.cssText = 'position:absolute;bottom:10px;right:10px;background:rgba(0,0,0,0.7);color:white;padding:8px 12px;border-radius:4px;font:14px system-ui;z-index:1;';
       container.appendChild(indicator);
 
       let currentPage = 1;
-      const pageTimers = [];
+      let cycleTimer = null;
+      let activeRenderTask = null;
+      let stopped = false;
 
+      // Render one page at a time on the single canvas. Sequential scheduling
+      // (setTimeout after render completes) avoids the "Cannot use the same
+      // canvas during multiple render() operations" error from PDF.js.
       const cyclePage = async () => {
-        indicator.textContent = `${currentPage} / ${totalPages}`;
-
-        // Fade out old canvas
-        const oldCanvas = container.querySelector('.pdf-page');
-        if (oldCanvas) {
-          oldCanvas.style.transition = 'opacity 0.3s';
-          oldCanvas.style.opacity = '0';
-          setTimeout(() => oldCanvas.remove(), 300);
+        if (stopped) return;
+        indicator.textContent = `Page ${currentPage} / ${totalPages}`;
+
+        const page = await pdf.getPage(currentPage);
+        const scaledViewport = page.getViewport({ scale });
+
+        // Clear and render on the reusable canvas
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        activeRenderTask = page.render({ canvasContext: ctx, viewport: scaledViewport });
+        try {
+          await activeRenderTask.promise;
+        } catch (e) {
+          // RenderingCancelledException is expected when stopped during render
+          if (stopped) return;
+          throw e;
         }
+        activeRenderTask = null;
+        page.cleanup(); // Release PDF.js internal page buffers
 
-        // Render and show new page
-        const canvas = await renderPage(currentPage);
-        canvas.style.opacity = '0';
-        container.appendChild(canvas);
-        // Trigger reflow then fade in
-        canvas.offsetHeight; // eslint-disable-line no-unused-expressions
-        canvas.style.transition = 'opacity 0.3s';
-        canvas.style.opacity = '1';
-
-        // Schedule next page
-        if (totalPages > 1) {
-          const timer = setTimeout(() => {
+        // Schedule next page (only after current render completes)
+        if (totalPages > 1 && !stopped) {
+          cycleTimer = setTimeout(() => {
             currentPage = currentPage >= totalPages ? 1 : currentPage + 1;
             cyclePage();
           }, timePerPage);
-          pageTimers.push(timer);
         }
       };
 
       await cyclePage();
 
-      // Store cleanup function on container for when widget is removed
+      // Cleanup: cancel active render, clear timer, release PDF document
       container._pdfCleanup = () => {
-        pageTimers.forEach(t => clearTimeout(t));
-        pageTimers.length = 0;
+        stopped = true;
+        if (cycleTimer) clearTimeout(cycleTimer);
+        cycleTimer = null;
+        if (activeRenderTask) {
+          activeRenderTask.cancel();
+          activeRenderTask = null;
+        }
+        // Zero canvas dimensions to release GPU backing store
+        canvas.width = 0;
+        canvas.height = 0;
+        pdf.destroy();
       };
 
     } catch (error) {

package/src/renderer-lite.overlays.test.js

@@ -486,8 +486,9 @@ describe('RendererLite - Overlay Rendering', () => {
     it('should track blob URLs per overlay layout', async () => {
       await renderer.renderOverlay(overlayXLF, 200, 10);
 
-      // Blob URLs should be tracked
-      expect(renderer.layoutBlobUrls.has(200) || renderer.layoutBlobUrls.size === 0).toBe(true);
+      // Blob URLs should be tracked (under overlay ID 200, or fallback key 0 if
+      // currentLayoutId wasn't set, or empty if no blob URLs were created)
+      expect(renderer.layoutBlobUrls.has(200) || renderer.layoutBlobUrls.has(0) || renderer.layoutBlobUrls.size === 0).toBe(true);
     });
   });
 });