@xiboplayer/renderer 0.6.1 → 0.6.2

package/package.json

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

package/src/index.d.ts

@@ -6,7 +6,7 @@ export interface RendererConfig {
 }
 
 export interface RendererOptions {
-  getMediaUrl?: (fileId: number) => Promise<string>;
+  fileIdToSaveAs?: Map<string, string>;
   getWidgetHtml?: (widget: any) => Promise<string | { url: string; fallback?: string }>;
   logLevel?: string;
 }

package/src/layout-pool.test.js

@@ -33,8 +33,7 @@ describe('LayoutPool', () => {
       container,
       layout: { width: 1920, height: 1080, duration: 60, bgcolor: '#000', regions: [] },
       regions: new Map(),
-      blobUrls: new Set(),
-      mediaUrlCache: new Map()
+      blobUrls: new Set()
     };
   }
 
@@ -170,18 +169,6 @@ describe('LayoutPool', () => {
       expect(URL.revokeObjectURL).toHaveBeenCalledWith('blob:test-2');
     });
 
-    it('should revoke media blob URLs on eviction', () => {
-      const entry = createMockEntry(1);
-      entry.mediaUrlCache.set(10, 'blob:media-10');
-      entry.mediaUrlCache.set(20, 'blob:media-20');
-
-      pool.add(1, entry);
-      pool.evict(1);
-
-      expect(URL.revokeObjectURL).toHaveBeenCalledWith('blob:media-10');
-      expect(URL.revokeObjectURL).toHaveBeenCalledWith('blob:media-20');
-    });
-
     it('should remove container from DOM', () => {
       const entry = createMockEntry(1);
       pool.add(1, entry);

package/src/renderer-lite.js

@@ -41,6 +41,7 @@
 
 import { createNanoEvents } from 'nanoevents';
 import { createLogger, isDebug, PLAYER_API } from '@xiboplayer/utils';
+import { parseLayoutDuration } from '@xiboplayer/schedule';
 import { LayoutPool } from './layout-pool.js';
 
 /**
@@ -186,7 +187,7 @@ export class RendererLite {
    * @param {string} config.hardwareKey - Display hardware key
    * @param {HTMLElement} container - DOM container for rendering
    * @param {Object} options - Renderer options
-   * @param {Function} options.getMediaUrl - Function to get media file URL (mediaId) => url
+   * @param {Map<string,string>} [options.fileIdToSaveAs] - Map from numeric file ID to storedAs filename (for layout backgrounds)
    * @param {Function} options.getWidgetHtml - Function to get widget HTML (layoutId, regionId, widgetId) => html
    */
   constructor(config, container, options = {}) {
@@ -203,6 +204,7 @@ export class RendererLite {
     // State
     this.currentLayout = null;
     this.currentLayoutId = null;
+    this._preloadingLayoutId = null; // Set during preload for blob URL tracking
     this.regions = new Map(); // regionId => { element, widgets, currentIndex, timer }
     this.layoutTimer = null;
     this.layoutEndEmitted = false; // Prevents double layoutEnd on stop after timer
@@ -210,7 +212,6 @@ export class RendererLite {
     this._layoutTimerStartedAt = null;  // Date.now() when layout timer started
     this._layoutTimerDurationMs = null; // Total layout duration in ms
     this.widgetTimers = new Map(); // widgetId => timer
-    this.mediaUrlCache = new Map(); // fileId => blob URL (for parallel pre-fetching)
     this.layoutBlobUrls = new Map(); // layoutId => Set<blobUrl> (for lifecycle tracking)
     this.audioOverlays = new Map(); // widgetId => [HTMLAudioElement] (audio overlays for widgets)
 
@@ -475,31 +476,10 @@ export class RendererLite {
     }
 
     // Calculate layout duration if not specified (duration=0)
-    // Drawers don't contribute to layout duration (they're action-triggered)
+    // Uses shared parseLayoutDuration() — single source of truth for XLF-based duration calc
     if (layout.duration === 0) {
-      let maxDuration = 0;
-
-      for (const region of layout.regions) {
-        if (region.isDrawer) continue;
-        let regionDuration = 0;
-
-        // Calculate region duration based on widgets
-        for (const widget of region.widgets) {
-          if (widget.duration > 0) {
-            regionDuration += widget.duration;
-          } else {
-            // Widget with duration=0 means "use media length"
-            // Default to 60s here; actual duration is detected dynamically
-            // from video.loadedmetadata event and updateLayoutDuration() recalculates
-            regionDuration = 60;
-            break;
-          }
-        }
-
-        maxDuration = Math.max(maxDuration, regionDuration);
-      }
-
-      layout.duration = maxDuration > 0 ? maxDuration : 60;
+      const { duration } = parseLayoutDuration(xlfXml);
+      layout.duration = duration;
       this.log.info(`Calculated layout duration: ${layout.duration}s (not specified in XLF)`);
     }
 
@@ -642,7 +622,7 @@ export class RendererLite {
    * @param {string} blobUrl - Blob URL to track
    */
   trackBlobUrl(blobUrl) {
-    const layoutId = this.currentLayoutId || 0;
+    const layoutId = this._preloadingLayoutId || this.currentLayoutId || 0;
 
     if (!layoutId) {
       this.log.warn('trackBlobUrl called without currentLayoutId, tracking under key 0');
@@ -693,10 +673,10 @@ export class RendererLite {
       maxRegionDuration = Math.max(maxRegionDuration, regionDuration);
     }
 
-    // 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) {
+    // Update layout duration if recalculated value differs.
+    // Both upgrades (video metadata revealing longer duration) and downgrades
+    // (DURATION comment correcting an overestimate) are legitimate.
+    if (maxRegionDuration > 0 && maxRegionDuration !== this.currentLayout.duration) {
       const oldDuration = this.currentLayout.duration;
       this.currentLayout.duration = maxRegionDuration;
 
@@ -961,6 +941,60 @@ export class RendererLite {
     this.navigateToWidget(targetWidget.id);
   }
 
+  // ── Layout Helpers ───────────────────────────────────────────────
+
+  /**
+   * Get media file URL for storedAs filename.
+   * @param {string} storedAs - The storedAs filename (e.g. "42_abc123.jpg")
+   * @returns {string} Full URL for the media file
+   */
+  _mediaFileUrl(storedAs) {
+    return `${window.location.origin}${PLAYER_API}/media/file/${storedAs}`;
+  }
+
+  /**
+   * Position a widget element to fill its region (hidden by default).
+   * @param {HTMLElement} element
+   */
+  _positionWidgetElement(element) {
+    Object.assign(element.style, {
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      width: '100%',
+      height: '100%',
+      visibility: 'hidden',
+      opacity: '0',
+    });
+  }
+
+  /**
+   * Apply a background image with cover styling.
+   * @param {HTMLElement} element
+   * @param {string} url - Image URL
+   */
+  _applyBackgroundImage(element, url) {
+    Object.assign(element.style, {
+      backgroundImage: `url(${url})`,
+      backgroundSize: 'cover',
+      backgroundPosition: 'center',
+      backgroundRepeat: 'no-repeat',
+    });
+  }
+
+  /**
+   * Clear all region timers in a region map.
+   * @param {Map} regions - Region map (regionId → region)
+   */
+  _clearRegionTimers(regions) {
+    for (const [, region] of regions) {
+      if (region.timer) {
+        clearTimeout(region.timer);
+        region.timer = null;
+      }
+    }
+  }
+
   // ── Layout Rendering ──────────────────────────────────────────────
 
   /**
@@ -980,13 +1014,9 @@ export class RendererLite {
         // OPTIMIZATION: Reuse existing elements for same layout (Arexibo pattern)
         this.log.info(`Replaying layout ${layoutId} - reusing elements (no recreation!)`);
 
-        // Stop all region timers
-        for (const [regionId, region] of this.regions) {
-          if (region.timer) {
-            clearTimeout(region.timer);
-            region.timer = null;
-          }
-          // Reset to first widget
+        // Stop all region timers and reset to first widget
+        this._clearRegionTimers(this.regions);
+        for (const [, region] of this.regions) {
           region.currentIndex = 0;
         }
 
@@ -998,7 +1028,6 @@ export class RendererLite {
         this.layoutEndEmitted = false;
 
         // DON'T call stopCurrentLayout() - keep elements alive!
-        // DON'T clear mediaUrlCache - keep blob URLs alive!
         // DON'T recreate regions/elements - already exist!
 
         // Emit layout start event
@@ -1045,50 +1074,11 @@ export class RendererLite {
       this.container.style.backgroundImage = ''; // Reset previous
 
       // Apply background image if specified in XLF
-      if (layout.background && this.options.getMediaUrl) {
-        try {
-          const bgUrl = await this.options.getMediaUrl(parseInt(layout.background));
-          if (bgUrl) {
-            this.container.style.backgroundImage = `url(${bgUrl})`;
-            this.container.style.backgroundSize = 'cover';
-            this.container.style.backgroundPosition = 'center';
-            this.container.style.backgroundRepeat = 'no-repeat';
-            this.log.info(`Background image set: ${layout.background}`);
-          }
-        } catch (err) {
-          this.log.warn('Failed to load background image:', err);
-        }
-      }
-
-      // PRE-FETCH: Get all media URLs in parallel (huge speedup!)
-      if (this.options.getMediaUrl) {
-        const mediaPromises = [];
-        this.mediaUrlCache.clear(); // Clear previous layout's cache
-
-        for (const region of layout.regions) {
-          for (const widget of region.widgets) {
-            if (widget.fileId) {
-              const fileId = parseInt(widget.fileId || widget.id);
-              if (!this.mediaUrlCache.has(fileId)) {
-                mediaPromises.push(
-                  this.options.getMediaUrl(fileId)
-                    .then(url => {
-                      this.mediaUrlCache.set(fileId, url);
-                    })
-                    .catch(err => {
-                      this.log.warn(`Failed to fetch media ${fileId}:`, err);
-                    })
-                );
-              }
-            }
-          }
-        }
-
-        if (mediaPromises.length > 0) {
-          this.log.info(`Pre-fetching ${mediaPromises.length} media URLs in parallel...`);
-          await Promise.all(mediaPromises);
-          this.log.info(`All media URLs pre-fetched`);
-        }
+      // With storedAs refactor, background may be a filename (e.g. "43.png") or a numeric fileId
+      if (layout.background) {
+        const saveAs = this.options.fileIdToSaveAs?.get(String(layout.background)) || layout.background;
+        this._applyBackgroundImage(this.container, this._mediaFileUrl(saveAs));
+        this.log.info(`Background image set: ${layout.background} → ${saveAs}`);
       }
 
       // Create regions
@@ -1106,13 +1096,7 @@ export class RendererLite {
 
           try {
             const element = await this.createWidgetElement(widget, region);
-            element.style.position = 'absolute';
-            element.style.top = '0';
-            element.style.left = '0';
-            element.style.width = '100%';
-            element.style.height = '100%';
-            element.style.visibility = 'hidden'; // Hidden by default
-            element.style.opacity = '0';
+            this._positionWidgetElement(element);
             region.element.appendChild(element);
             region.widgetElements.set(widget.id, element);
           } catch (error) {
@@ -1512,22 +1496,8 @@ export class RendererLite {
       audio.loop = audioNode.loop;
       audio.volume = Math.max(0, Math.min(1, audioNode.volume / 100));
 
-      // Resolve audio URI via cache/proxy
-      const mediaId = parseInt(audioNode.mediaId);
-      let audioSrc = mediaId ? this.mediaUrlCache.get(mediaId) : null;
-
-      if (!audioSrc && mediaId && this.options.getMediaUrl) {
-        // Async — fire and forget, set src when ready
-        this.options.getMediaUrl(mediaId).then(url => {
-          audio.src = url;
-        }).catch(() => {
-          audio.src = `${window.location.origin}${PLAYER_API}/media/${audioNode.uri}`;
-        });
-      } else if (!audioSrc) {
-        audio.src = `${window.location.origin}${PLAYER_API}/media/${audioNode.uri}`;
-      } else {
-        audio.src = audioSrc;
-      }
+      // Direct URL from storedAs filename
+      audio.src = audioNode.uri ? this._mediaFileUrl(audioNode.uri) : '';
 
       // Append to DOM to prevent garbage collection in some browsers
       audio.style.display = 'none';
@@ -1661,12 +1631,15 @@ export class RendererLite {
    * @param {Object} widget - Widget config (duration may be updated)
    */
   _parseDurationComments(html, widget) {
+    const oldDuration = widget.duration;
+
     const durationMatch = html.match(/<!--\s*DURATION=(\d+)\s*-->/);
     if (durationMatch) {
       const newDuration = parseInt(durationMatch[1], 10);
       if (newDuration > 0) {
         this.log.info(`Widget ${widget.id}: DURATION comment overrides duration ${widget.duration}→${newDuration}s`);
         widget.duration = newDuration;
+        if (widget.duration !== oldDuration) this.updateLayoutDuration();
         return;
       }
     }
@@ -1680,6 +1653,8 @@ export class RendererLite {
         widget.duration = newDuration;
       }
     }
+
+    if (widget.duration !== oldDuration) this.updateLayoutDuration();
   }
 
   /**
@@ -1760,6 +1735,7 @@ export class RendererLite {
       showFn(regionId, widgetIndex);
 
       const duration = widget.duration * 1000;
+      this.log.info(`Region ${regionId} widget ${widget.id} (${widget.type}) playing for ${widget.duration}s (useDuration=${widget.useDuration}, index ${widgetIndex}/${region.widgets.length})`);
       region.timer = setTimeout(() => {
         this._handleWidgetCycleEnd(widget, region, regionId, widgetIndex, showFn, hideFn, onCycleComplete, playNext);
       }, duration);
@@ -1791,10 +1767,11 @@ export class RendererLite {
       onCycleComplete?.();
     }
 
-    // Non-looping region (loop=0): stop after one full cycle
-    if (nextIndex === 0 && region.config?.loop === false) {
-      // Show the last widget again and keep it visible
-      showFn(regionId, region.widgets.length - 1);
+    // Non-looping single-widget region (loop=0): don't replay.
+    // Multi-widget regions (playlists) always cycle regardless of loop setting —
+    // in Xibo, loop=0 only means "don't repeat a single media item."
+    if (nextIndex === 0 && region.config?.loop === false && region.widgets.length === 1) {
+      showFn(regionId, 0);
       return;
     }
 
@@ -1886,17 +1863,12 @@ export class RendererLite {
 
     img.style.opacity = '0';
 
-    // Get media URL from cache (already pre-fetched!) or fetch on-demand
-    const fileId = parseInt(widget.fileId || widget.id);
-    let imageSrc = this.mediaUrlCache.get(fileId);
+    // Direct URL from storedAs filename — store key = widget reference = serve URL
+    const src = widget.options.uri
+      ? this._mediaFileUrl(widget.options.uri)
+      : '';
 
-    if (!imageSrc && this.options.getMediaUrl) {
-      imageSrc = await this.options.getMediaUrl(fileId);
-    } else if (!imageSrc) {
-      imageSrc = `${window.location.origin}${PLAYER_API}/media/${widget.options.uri}`;
-    }
-
-    img.src = imageSrc;
+    img.src = src;
     return img;
   }
 
@@ -1919,27 +1891,22 @@ 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);
+    // Direct URL from storedAs filename
+    const storedAs = widget.options.uri || '';
+    const fileId = widget.fileId || widget.id;
 
     // Handle video end - pause on last frame instead of showing black
     // Widget cycling will restart the video via updateMediaElement()
     const onEnded = () => {
       if (widget.options.loop === '1') {
         video.currentTime = 0;
-        this.log.info(`Video ${fileId} ended - reset to start, waiting for widget cycle to replay`);
+        this.log.info(`Video ${storedAs} ended - reset to start, waiting for widget cycle to replay`);
       } else {
-        this.log.info(`Video ${fileId} ended - paused on last frame`);
+        this.log.info(`Video ${storedAs} ended - paused on last frame`);
       }
     };
     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_API}/media/${fileId}`;
-    }
+    let videoSrc = storedAs ? this._mediaFileUrl(storedAs) : '';
 
     // HLS/DASH streaming support
     const isHlsStream = videoSrc.includes('.m3u8');
@@ -1985,7 +1952,7 @@ export class RendererLite {
     const createdForLayoutId = this.currentLayoutId;
     const onLoadedMetadata = () => {
       const videoDuration = Math.floor(video.duration);
-      this.log.info(`Video ${fileId} duration detected: ${videoDuration}s`);
+      this.log.info(`Video ${storedAs} duration detected: ${videoDuration}s`);
 
       if (widget.duration === 0 || widget.useDuration === 0) {
         widget.duration = videoDuration;
@@ -1994,14 +1961,14 @@ export class RendererLite {
         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})`);
+          this.log.info(`Video ${storedAs} duration set but layout timer not updated (preloaded for layout ${createdForLayoutId}, current is ${this.currentLayoutId})`);
         }
       }
     };
     video.addEventListener('loadedmetadata', onLoadedMetadata);
 
     const onLoadedData = () => {
-      this.log.info('Video loaded and ready:', fileId);
+      this.log.info('Video loaded and ready:', storedAs);
     };
     video.addEventListener('loadeddata', onLoadedData);
 
@@ -2009,13 +1976,13 @@ export class RendererLite {
       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 });
+      this.log.warn(`Video error: ${storedAs}, code: ${errorCode}, time: ${video.currentTime.toFixed(1)}s, message: ${errorMessage}`);
+      this.emit('videoError', { storedAs, fileId, errorCode, errorMessage, currentTime: video.currentTime });
     };
     video.addEventListener('error', onError);
 
     const onPlaying = () => {
-      this.log.info('Video playing:', fileId);
+      this.log.info('Video playing:', storedAs);
     };
     video.addEventListener('playing', onPlaying);
 
@@ -2028,7 +1995,7 @@ export class RendererLite {
       ['playing', onPlaying],
     ];
 
-    this.log.info('Video element created:', fileId, video.src);
+    this.log.info('Video element created:', storedAs, video.src);
 
     return video;
   }
@@ -2113,25 +2080,18 @@ export class RendererLite {
     audio.loop = widget.options.loop === '1';
     audio.volume = parseFloat(widget.options.volume || '100') / 100;
 
-    // Get media URL from cache (already pre-fetched!) or fetch on-demand
-    const fileId = parseInt(widget.fileId || widget.id);
-    let audioSrc = this.mediaUrlCache.get(fileId);
-
-    if (!audioSrc && this.options.getMediaUrl) {
-      audioSrc = await this.options.getMediaUrl(fileId);
-    } else if (!audioSrc) {
-      audioSrc = `${window.location.origin}${PLAYER_API}/media/${fileId}`;
-    }
-
-    audio.src = audioSrc;
+    // Direct URL from storedAs filename
+    const storedAs = widget.options.uri || '';
+    const fileId = widget.fileId || widget.id;
+    audio.src = storedAs ? this._mediaFileUrl(storedAs) : '';
 
     // Handle audio end - similar to video ended handling
     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`);
+        this.log.info(`Audio ${storedAs} ended - reset to start, waiting for widget cycle to replay`);
       } else {
-        this.log.info(`Audio ${fileId} ended - playback complete`);
+        this.log.info(`Audio ${storedAs} ended - playback complete`);
       }
     };
     audio.addEventListener('ended', onAudioEnded);
@@ -2140,7 +2100,7 @@ export class RendererLite {
     const audioCreatedForLayoutId = this.currentLayoutId;
     const onAudioLoadedMetadata = () => {
       const audioDuration = Math.floor(audio.duration);
-      this.log.info(`Audio ${fileId} duration detected: ${audioDuration}s`);
+      this.log.info(`Audio ${storedAs} duration detected: ${audioDuration}s`);
 
       if (widget.duration === 0 || widget.useDuration === 0) {
         widget.duration = audioDuration;
@@ -2149,7 +2109,7 @@ export class RendererLite {
         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})`);
+          this.log.info(`Audio ${storedAs} duration set but layout timer not updated (preloaded for layout ${audioCreatedForLayoutId}, current is ${this.currentLayoutId})`);
         }
       }
     };
@@ -2158,7 +2118,7 @@ export class RendererLite {
     // Handle audio errors
     const onAudioError = () => {
       const error = audio.error;
-      this.log.warn(`Audio error (non-fatal): ${fileId}, code: ${error?.code}, message: ${error?.message || 'Unknown'}`);
+      this.log.warn(`Audio error (non-fatal): ${storedAs}, code: ${error?.code}, message: ${error?.message || 'Unknown'}`);
     };
     audio.addEventListener('error', onAudioError);
 
@@ -2293,15 +2253,10 @@ export class RendererLite {
       }
     }
 
-    // Get PDF URL from cache (already pre-fetched!) or fetch on-demand
-    const fileId = parseInt(widget.fileId || widget.id);
-    let pdfUrl = this.mediaUrlCache.get(fileId);
-
-    if (!pdfUrl && this.options.getMediaUrl) {
-      pdfUrl = await this.options.getMediaUrl(fileId);
-    } else if (!pdfUrl) {
-      pdfUrl = `${window.location.origin}${PLAYER_API}/media/${widget.options.uri}`;
-    }
+    // Direct URL from storedAs filename
+    let pdfUrl = widget.options.uri
+      ? this._mediaFileUrl(widget.options.uri)
+      : '';
 
     // Render PDF with multi-page cycling
     try {
@@ -2593,54 +2548,13 @@ export class RendererLite {
       wrapper.style.backgroundColor = layout.bgcolor;
 
       // Apply background image if specified
-      if (layout.background && this.options.getMediaUrl) {
-        try {
-          const bgUrl = await this.options.getMediaUrl(parseInt(layout.background));
-          if (bgUrl) {
-            wrapper.style.backgroundImage = `url(${bgUrl})`;
-            wrapper.style.backgroundSize = 'cover';
-            wrapper.style.backgroundPosition = 'center';
-            wrapper.style.backgroundRepeat = 'no-repeat';
-          }
-        } catch (err) {
-          this.log.warn('Preload: Failed to load background image:', err);
-        }
-      }
-
-      // Pre-fetch all media URLs in parallel
-      const preloadMediaUrlCache = new Map();
-      if (this.options.getMediaUrl) {
-        const mediaPromises = [];
-
-        for (const region of layout.regions) {
-          for (const widget of region.widgets) {
-            if (widget.fileId) {
-              const fileId = parseInt(widget.fileId || widget.id);
-              if (!preloadMediaUrlCache.has(fileId)) {
-                mediaPromises.push(
-                  this.options.getMediaUrl(fileId)
-                    .then(url => {
-                      preloadMediaUrlCache.set(fileId, url);
-                    })
-                    .catch(err => {
-                      this.log.warn(`Preload: Failed to fetch media ${fileId}:`, err);
-                    })
-                );
-              }
-            }
-          }
-        }
-
-        if (mediaPromises.length > 0) {
-          this.log.info(`Preload: fetching ${mediaPromises.length} media URLs...`);
-          await Promise.all(mediaPromises);
-        }
+      // With storedAs refactor, background may be a filename or a numeric fileId
+      if (layout.background) {
+        const saveAs = this.options.fileIdToSaveAs?.get(String(layout.background)) || layout.background;
+        this._applyBackgroundImage(wrapper, this._mediaFileUrl(saveAs));
       }
 
-      // Temporarily swap mediaUrlCache so createWidgetElement uses preload cache
-      const savedMediaUrlCache = this.mediaUrlCache;
       const savedCurrentLayoutId = this.currentLayoutId;
-      this.mediaUrlCache = preloadMediaUrlCache;
 
       // Create regions in the hidden wrapper
       const preloadRegions = new Map();
@@ -2680,8 +2594,9 @@ export class RendererLite {
       this.layoutBlobUrls = new Map();
       this.layoutBlobUrls.set(layoutId, preloadBlobUrls);
 
-      // Temporarily set currentLayoutId for trackBlobUrl to work
-      this.currentLayoutId = layoutId;
+      // Set _preloadingLayoutId so trackBlobUrl routes to the correct layout
+      // without corrupting currentLayoutId (which other code reads during awaits)
+      this._preloadingLayoutId = layoutId;
 
       // Pre-create all widget elements
       for (const [regionId, region] of preloadRegions) {
@@ -2692,13 +2607,7 @@ export class RendererLite {
 
           try {
             const element = await this.createWidgetElement(widget, region);
-            element.style.position = 'absolute';
-            element.style.top = '0';
-            element.style.left = '0';
-            element.style.width = '100%';
-            element.style.height = '100%';
-            element.style.visibility = 'hidden';
-            element.style.opacity = '0';
+            this._positionWidgetElement(element);
             region.element.appendChild(element);
             region.widgetElements.set(widget.id, element);
           } catch (error) {
@@ -2708,7 +2617,6 @@ export class RendererLite {
       }
 
       // Restore state
-      this.mediaUrlCache = savedMediaUrlCache;
       this.currentLayoutId = savedCurrentLayoutId;
 
       // Pause all videos in preloaded layout (autoplay starts them even when hidden)
@@ -2730,10 +2638,9 @@ export class RendererLite {
         layout,
         regions: preloadRegions,
         blobUrls: preloadBlobUrls,
-        mediaUrlCache: preloadMediaUrlCache
       });
 
-      this.log.info(`Layout ${layoutId} preloaded into pool (${preloadRegions.size} regions, ${preloadMediaUrlCache.size} media)`);
+      this.log.info(`Layout ${layoutId} preloaded into pool (${preloadRegions.size} regions)`);
       return true;
 
     } catch (error) {
@@ -2782,15 +2689,12 @@ export class RendererLite {
       // Old layout was rendered normally — manual cleanup.
       // Region elements live directly in this.container (not a wrapper),
       // so we must remove them individually.
-      for (const [regionId, region] of this.regions) {
-        if (region.timer) {
-          clearTimeout(region.timer);
-          region.timer = null;
-        }
+      this._clearRegionTimers(this.regions);
+      for (const [, region] of this.regions) {
         // 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) {
+        if (region.config?.exitTransition) {
           const animation = Transitions.apply(
             region.element, region.config.exitTransition, false,
             region.width, region.height
@@ -2809,11 +2713,6 @@ export class RendererLite {
       if (oldLayoutId) {
         this.revokeBlobUrlsForLayout(oldLayoutId);
       }
-      for (const [fileId, blobUrl] of this.mediaUrlCache) {
-        if (blobUrl && typeof blobUrl === 'string' && blobUrl.startsWith('blob:')) {
-          URL.revokeObjectURL(blobUrl);
-        }
-      }
     }
 
     // Emit layoutEnd for old layout if timer hasn't already
@@ -2822,7 +2721,6 @@ export class RendererLite {
     }
 
     this.regions.clear();
-    this.mediaUrlCache.clear();
 
     // ── Activate preloaded layout ──
     preloaded.container.style.visibility = 'visible';
@@ -2833,16 +2731,15 @@ export class RendererLite {
     this.currentLayout = preloaded.layout;
     this.currentLayoutId = layoutId;
     this.regions = preloaded.regions;
-    this.mediaUrlCache = preloaded.mediaUrlCache || new Map();
     this.layoutEndEmitted = false;
 
     // Update container background to match preloaded layout
     this.container.style.backgroundColor = preloaded.layout.bgcolor;
     if (preloaded.container.style.backgroundImage) {
-      this.container.style.backgroundImage = preloaded.container.style.backgroundImage;
-      this.container.style.backgroundSize = preloaded.container.style.backgroundSize;
-      this.container.style.backgroundPosition = preloaded.container.style.backgroundPosition;
-      this.container.style.backgroundRepeat = preloaded.container.style.backgroundRepeat;
+      // Copy background styles from preloaded wrapper to main container
+      for (const prop of ['backgroundImage', 'backgroundSize', 'backgroundPosition', 'backgroundRepeat']) {
+        this.container.style[prop] = preloaded.container.style[prop];
+      }
     } else {
       this.container.style.backgroundImage = '';
     }
@@ -2942,12 +2839,8 @@ export class RendererLite {
       }
 
       // Stop all regions
+      this._clearRegionTimers(this.regions);
       for (const [regionId, region] of this.regions) {
-        if (region.timer) {
-          clearTimeout(region.timer);
-          region.timer = null;
-        }
-
         // Stop current widget
         if (region.widgets.length > 0) {
           this.stopWidget(regionId, region.currentIndex);
@@ -2957,13 +2850,12 @@ export class RendererLite {
         LayoutPool.releaseMediaElements(region.element);
 
         // Apply region exit transition if configured, then remove
-        if (region.config && region.config.exitTransition) {
+        if (region.config?.exitTransition) {
           const animation = Transitions.apply(
             region.element, region.config.exitTransition, false,
             region.width, region.height
           );
           if (animation) {
-            // Remove element after exit transition completes
             const el = region.element;
             animation.onfinish = () => el.remove();
           } else {
@@ -2974,17 +2866,10 @@ export class RendererLite {
         }
       }
 
-      // Revoke media blob URLs from cache
-      for (const [fileId, blobUrl] of this.mediaUrlCache) {
-        if (blobUrl && blobUrl.startsWith('blob:')) {
-          URL.revokeObjectURL(blobUrl);
-        }
-      }
     }
 
     // Clear state
     this.regions.clear();
-    this.mediaUrlCache.clear();
 
     // Emit layout end event only if timer hasn't already emitted it.
     // Timer-based layoutEnd (natural expiry) is authoritative — stopCurrentLayout
@@ -3033,34 +2918,6 @@ export class RendererLite {
       overlayDiv.style.pointerEvents = 'auto'; // Enable clicks on overlay
       overlayDiv.style.backgroundColor = layout.bgcolor;
 
-      // Pre-fetch all media URLs for overlay
-      if (this.options.getMediaUrl) {
-        const mediaPromises = [];
-        for (const region of layout.regions) {
-          for (const widget of region.widgets) {
-            if (widget.fileId) {
-              const fileId = parseInt(widget.fileId || widget.id);
-              if (!this.mediaUrlCache.has(fileId)) {
-                mediaPromises.push(
-                  this.options.getMediaUrl(fileId)
-                    .then(url => {
-                      this.mediaUrlCache.set(fileId, url);
-                    })
-                    .catch(err => {
-                      this.log.warn(`Failed to fetch overlay media ${fileId}:`, err);
-                    })
-                );
-              }
-            }
-          }
-        }
-
-        if (mediaPromises.length > 0) {
-          this.log.info(`Pre-fetching ${mediaPromises.length} overlay media URLs...`);
-          await Promise.all(mediaPromises);
-        }
-      }
-
       // Calculate scale for overlay layout
       this.calculateScale(layout);
 
@@ -3102,8 +2959,7 @@ export class RendererLite {
 
           try {
             const element = await this.createWidgetElement(widget, region);
-            element.style.visibility = 'hidden';
-            element.style.opacity = '0';
+            this._positionWidgetElement(element);
             region.element.appendChild(element);
             region.widgetElements.set(widget.id, element);
           } catch (error) {

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

@@ -65,7 +65,7 @@ describe('RendererLite - Overlay Rendering', () => {
       },
       container,
       {
-        getMediaUrl: async (fileId) => `http://test.local/media/${fileId}`,
+        fileIdToSaveAs: new Map(),
         getWidgetHtml: async (widget) => widget.raw || '<p>Widget HTML</p>'
       }
     );
@@ -165,32 +165,6 @@ describe('RendererLite - Overlay Rendering', () => {
       expect(secondOverlayDiv).toBe(firstOverlayDiv);
     });
 
-    it('should pre-fetch media URLs for overlay widgets', async () => {
-      const getMediaUrl = vi.fn(async (fileId) => `http://test.local/media/${fileId}`);
-
-      const customRenderer = new RendererLite(
-        { cmsUrl: 'http://test.local', hardwareKey: 'test-key' },
-        container,
-        {
-          getMediaUrl,
-          getWidgetHtml: async (widget) => widget.raw
-        }
-      );
-
-      const xlfWithMedia = `<?xml version="1.0"?>
-<layout width="1920" height="1080" bgcolor="#000000">
-  <region id="1" width="400" height="200" top="0" left="0" zindex="0">
-    <media id="10" fileId="555" type="image" duration="10">
-      <options><uri>test.jpg</uri></options>
-    </media>
-  </region>
-</layout>`;
-
-      await customRenderer.renderOverlay(xlfWithMedia, 300, 10);
-
-      expect(getMediaUrl).toHaveBeenCalledWith(555);
-    });
-
     it('should set overlay timer based on duration', async () => {
       vi.useFakeTimers();
 

package/src/renderer-lite.test.js

@@ -11,7 +11,6 @@ import { RendererLite } from './renderer-lite.js';
 describe('RendererLite', () => {
   let container;
   let renderer;
-  let mockGetMediaUrl;
   let mockGetWidgetHtml;
 
   beforeEach(() => {
@@ -29,7 +28,6 @@ describe('RendererLite', () => {
     }
 
     // Mock callbacks
-    mockGetMediaUrl = vi.fn((fileId) => Promise.resolve(`blob://test-${fileId}`));
     mockGetWidgetHtml = vi.fn((widget) => Promise.resolve(`<html>Widget ${widget.id}</html>`));
 
     // Create renderer instance
@@ -37,7 +35,7 @@ describe('RendererLite', () => {
       { cmsUrl: 'https://test.com', hardwareKey: 'test-key' },
       container,
       {
-        getMediaUrl: mockGetMediaUrl,
+        fileIdToSaveAs: new Map(),
         getWidgetHtml: mockGetWidgetHtml
       }
     );
@@ -415,7 +413,6 @@ describe('RendererLite', () => {
       expect(element.className).toBe('renderer-lite-widget');
       expect(element.style.width).toBe('100%');
       expect(element.style.height).toBe('100%');
-      expect(mockGetMediaUrl).toHaveBeenCalledWith(1);
     });
 
     it('should default to objectFit contain and objectPosition center center', async () => {
@@ -566,7 +563,6 @@ describe('RendererLite', () => {
       expect(element.muted).toBe(true);
       // loop is intentionally false - handled manually via 'ended' event to avoid black frames
       expect(element.loop).toBe(false);
-      expect(mockGetMediaUrl).toHaveBeenCalledWith(5);
     });
 
     it('should create text widget with iframe (blob fallback)', async () => {
@@ -1014,20 +1010,6 @@ describe('RendererLite', () => {
   });
 
   describe('Memory Management', () => {
-    it('should clear mediaUrlCache on layout switch', async () => {
-      const xlf1 = `<layout><region id="r1"></region></layout>`;
-      const xlf2 = `<layout><region id="r2"></region></layout>`;
-
-      await renderer.renderLayout(xlf1, 1);
-      renderer.mediaUrlCache.set(1, 'blob://test-1');
-
-      // Switch to different layout
-      await renderer.renderLayout(xlf2, 2);
-
-      // Cache should be cleared
-      expect(renderer.mediaUrlCache.size).toBe(0);
-    });
-
     it('should clear regions on stopCurrentLayout', async () => {
       const xlf = `
         <layout>
@@ -1111,8 +1093,22 @@ describe('RendererLite', () => {
     });
   });
 
-  describe('Parallel Media Pre-fetch', () => {
-    it('should pre-fetch all media URLs in parallel', async () => {
+  describe('Media URL construction via fileIdToSaveAs', () => {
+    it('should construct media URLs using fileIdToSaveAs map', async () => {
+      const fileIdToSaveAs = new Map([
+        ['1', '1.png'],
+        ['5', '5.mp4'],
+        ['7', '7.png']
+      ]);
+      const r = new RendererLite(
+        { cmsUrl: 'https://test.com', hardwareKey: 'test-key' },
+        container,
+        {
+          fileIdToSaveAs,
+          getWidgetHtml: mockGetWidgetHtml
+        }
+      );
+
       const xlf = `
         <layout>
           <region id="r1">
@@ -1129,16 +1125,11 @@ describe('RendererLite', () => {
         </layout>
       `;
 
-      await renderer.renderLayout(xlf, 1);
-
-      // All media URLs should have been fetched
-      expect(mockGetMediaUrl).toHaveBeenCalledTimes(3);
-      expect(mockGetMediaUrl).toHaveBeenCalledWith(1);
-      expect(mockGetMediaUrl).toHaveBeenCalledWith(5);
-      expect(mockGetMediaUrl).toHaveBeenCalledWith(7);
+      await r.renderLayout(xlf, 1);
 
-      // All should be in cache
-      expect(renderer.mediaUrlCache.size).toBe(3);
+      // fileIdToSaveAs should have all 3 entries
+      expect(fileIdToSaveAs.size).toBe(3);
+      r.cleanup();
     });
   });
 

package/vitest.config.js

@@ -4,5 +4,12 @@ export default defineConfig({
   test: {
     environment: 'jsdom',
     globals: true
+  },
+  resolve: {
+    alias: {
+      // hls.js is an optional runtime dependency (dynamic import in renderVideo).
+      // Alias to the monorepo mock so renderer tests work standalone.
+      'hls.js': new URL('../../vitest.hls-mock.js', import.meta.url).pathname
+    }
   }
 });