@xiboplayer/renderer 0.5.17 → 0.5.19

package/docs/RENDERER_COMPARISON.md

@@ -1,6 +1,6 @@
 # Renderer Comparison: XLR vs Arexibo vs RendererLite
 
-**Date**: 2026-02-06
+**Date**: 2026-02-28
 **Purpose**: Comprehensive feature comparison to identify gaps and validate implementation
 
 ---
@@ -35,6 +35,7 @@
 | Text/HTML | ✅ Yes | ✅ Yes | ✅ Yes | ✅ Complete |
 | Ticker | ✅ Yes | ✅ Yes | ✅ Yes | ✅ Complete |
 | PDF | ✅ Yes | ✅ Yes | ✅ Yes | ✅ Complete |
+| PDF multi-page cycling | ❌ No | ❌ No | ✅ Yes | ✅ Timed transitions |
 | Webpage (iframe) | ✅ Yes | ✅ Yes | ✅ Yes | ✅ Complete |
 | Clock | ✅ Yes | ✅ Yes | ✅ Yes | ✅ Complete |
 | Weather | ✅ Yes | ✅ Yes | ✅ Yes | ✅ Complete |

package/package.json

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

package/src/index.d.ts

@@ -0,0 +1,74 @@
+export const VERSION: string;
+
+export interface RendererConfig {
+  cmsUrl: string;
+  hardwareKey: string;
+}
+
+export interface RendererOptions {
+  getMediaUrl?: (fileId: number) => Promise<string>;
+  getWidgetHtml?: (widget: any) => Promise<string | { url: string; fallback?: string }>;
+  logLevel?: string;
+}
+
+export class LayoutPool {
+  layouts: Map<number, any>;
+  maxSize: number;
+  hotLayoutId: number | null;
+  has(layoutId: number): boolean;
+  get(layoutId: number): any | undefined;
+  add(layoutId: number, entry: any): void;
+  clearWarmNotIn(keepIds: Set<number>): number;
+  makeHot(layoutId: number): void;
+  remove(layoutId: number): void;
+  clear(): void;
+}
+
+export class RendererLite {
+  constructor(config: RendererConfig, container: HTMLElement, options?: RendererOptions);
+
+  config: RendererConfig;
+  container: HTMLElement;
+  options: RendererOptions;
+  currentLayout: any;
+  currentLayoutId: number | null;
+  regions: Map<string, any>;
+  layoutPool: LayoutPool;
+  activeOverlays: Map<number, any>;
+  scaleFactor: number;
+  offsetX: number;
+  offsetY: number;
+
+  on(event: string, callback: (...args: any[]) => void): () => void;
+  emit(event: string, ...args: any[]): void;
+
+  renderLayout(xlfXml: string, layoutId: number): Promise<void>;
+  stopCurrentLayout(): void;
+  preloadLayout(xlfXml: string, layoutId: number): Promise<boolean>;
+  hasPreloadedLayout(layoutId: number): boolean;
+
+  renderOverlay(xlfXml: string, layoutId: number, priority?: number): Promise<void>;
+  stopOverlay(layoutId: number): void;
+  stopAllOverlays(): void;
+  getActiveOverlays(): number[];
+
+  navigateToWidget(targetWidgetId: string): void;
+  nextWidget(regionId?: string): void;
+  previousWidget(regionId?: string): void;
+
+  pause(): void;
+  resume(): void;
+  isPaused(): boolean;
+  resumeRegionMedia?(regionId: string): void;
+
+  parseXlf(xlfXml: string): any;
+  parseWidget(mediaEl: Element): any;
+
+  calculateScale(layout: any): void;
+  rescaleRegions(): void;
+
+  updateLayoutDuration(): void;
+  checkLayoutComplete(): void;
+
+  cleanup(): void;
+}

package/src/layout.js

@@ -871,7 +871,7 @@ ${mediaJS}
         break;
 
       case 'webpage':
-        const url = media.options.uri;
+        const url = decodeURIComponent(media.options.uri || '');
         startFn = `() => {
         const region = document.getElementById('region_${regionId}');
         const iframe = document.createElement('iframe');

package/src/renderer-lite.js

@@ -1598,6 +1598,11 @@ export class RendererLite {
     // Stop audio overlays attached to this widget
     this._stopAudioOverlays(widget.id);
 
+    // Stop PDF page cycling timers
+    if (widgetElement._pdfCleanup) {
+      widgetElement._pdfCleanup();
+    }
+
     return { widget, animPromise };
   }
 
@@ -2255,29 +2260,78 @@ export class RendererLite {
       pdfUrl = `${window.location.origin}/player/cache/media/${widget.options.uri}`;
     }
 
-    // Render PDF
+    // Render PDF with multi-page cycling
     try {
       const loadingTask = window.pdfjsLib.getDocument(pdfUrl);
       const pdf = await loadingTask.promise;
-      const page = await pdf.getPage(1); // Render first page
+      const totalPages = pdf.numPages;
+      const duration = widget.duration || 60;
+      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;
+      };
 
-      const viewport = page.getViewport({ scale: 1 });
-      const scale = Math.min(
-        region.width / viewport.width,
-        region.height / viewport.height
-      );
-      const scaledViewport = page.getViewport({ scale });
+      // Page indicator (bottom-right)
+      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;';
+      container.appendChild(indicator);
+
+      let currentPage = 1;
+      const pageTimers = [];
 
-      const canvas = document.createElement('canvas');
-      canvas.width = scaledViewport.width;
-      canvas.height = scaledViewport.height;
-      canvas.style.display = 'block';
-      canvas.style.margin = 'auto';
+      const cyclePage = async () => {
+        indicator.textContent = `${currentPage} / ${totalPages}`;
 
-      const context = canvas.getContext('2d');
-      await page.render({ canvasContext: context, viewport: scaledViewport }).promise;
+        // 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);
+        }
 
-      container.appendChild(canvas);
+        // 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(() => {
+            currentPage = currentPage >= totalPages ? 1 : currentPage + 1;
+            cyclePage();
+          }, timePerPage);
+          pageTimers.push(timer);
+        }
+      };
+
+      await cyclePage();
+
+      // Store cleanup function on container for when widget is removed
+      container._pdfCleanup = () => {
+        pageTimers.forEach(t => clearTimeout(t));
+        pageTimers.length = 0;
+      };
 
     } catch (error) {
       this.log.error('PDF render failed:', error);
@@ -2305,7 +2359,9 @@ export class RendererLite {
     iframe.style.height = '100%';
     iframe.style.border = 'none';
     iframe.style.opacity = '0';
-    iframe.src = widget.options.uri;
+    // CMS may percent-encode the URI in XLF (e.g. https%3A%2F%2F → https://)
+    const uri = decodeURIComponent(widget.options.uri || '');
+    iframe.src = uri;
 
     return iframe;
   }