@xiboplayer/renderer 0.5.20 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xiboplayer/renderer",
-  "version": "0.5.20",
+  "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.20",
-    "@xiboplayer/utils": "0.5.20"
+    "@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 = `() => {
@@ -564,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;
@@ -573,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);
@@ -689,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
 
@@ -902,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';
 
 /**
@@ -1521,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;
       }
@@ -1893,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;
@@ -1938,7 +1938,7 @@ export class RendererLite {
     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
@@ -2009,7 +2009,8 @@ export class RendererLite {
       const error = video.error;
       const errorCode = error?.code;
       const errorMessage = error?.message || 'Unknown error';
-      this.log.warn(`Video error (non-fatal, logged only): ${fileId}, code: ${errorCode}, time: ${video.currentTime.toFixed(1)}s, message: ${errorMessage}`);
+      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);
 
@@ -2119,7 +2120,7 @@ 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;
@@ -2258,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');
@@ -2292,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
@@ -2304,10 +2312,7 @@ 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`);
 
-      // Single reused canvas — render each page on-demand, call page.cleanup()
-      // after each render to release PDF.js internal buffers. Sequential rendering
-      // (one page at a time via setTimeout) avoids the "Cannot use the same canvas
-      // during multiple render() operations" error.
+      // 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);
@@ -2321,23 +2326,37 @@ export class RendererLite {
       const ctx = canvas.getContext('2d');
       container.appendChild(canvas);
 
-      // Page indicator (bottom-right)
+      // 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;
       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 () => {
         if (stopped) return;
-        indicator.textContent = `${currentPage} / ${totalPages}`;
+        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);
-        await page.render({ canvasContext: ctx, viewport: scaledViewport }).promise;
+        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
 
         // Schedule next page (only after current render completes)
@@ -2351,14 +2370,18 @@ export class RendererLite {
 
       await cyclePage();
 
-      // Store cleanup function on container for when widget is removed
+      // Cleanup: cancel active render, clear timer, release PDF document
       container._pdfCleanup = () => {
         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.cleanup();
         pdf.destroy();
       };