@xiboplayer/cache 0.4.0 → 0.4.3

package/README.md

@@ -11,6 +11,8 @@ Manages media downloads and offline storage for Xibo players:
 - **MD5 verification** — integrity checking with CRC32-based skip optimization
 - **Download queue** — flat queue with barriers for layout-ordered downloading
 - **CacheProxy** — browser-side proxy that communicates with a Service Worker backend
+- **Widget data via enriched RequiredFiles** — RSS/dataset widget data is fetched through server-side enriched RequiredFiles paths (CMS adds download URLs), not via client-side pre-fetching
+- **Dynamic BASE path** — widget HTML `<base>` tag uses a dynamic path within the Service Worker scope for correct relative URL resolution
 
 ## Installation
 

package/docs/CACHE_PROXY_ARCHITECTURE.md

@@ -363,6 +363,18 @@ it('should download and cache files', async () => {
    const blob = await cacheProxy.getFile('media', id);
    ```
 
+## Widget Data Download Flow
+
+Widget data for RSS feeds and dataset widgets is handled server-side. The CMS enriches
+the RequiredFiles response with absolute download URLs for widget data files. These are
+downloaded through the normal CacheProxy/Service Worker pipeline alongside regular media,
+rather than being fetched client-side by the player. This ensures widget data is available
+offline and benefits from the same parallel chunk download and caching infrastructure.
+
+Widget HTML served from cache uses a dynamic `<base>` tag pointing to the Service Worker
+scope path, ensuring relative URLs within widget HTML resolve correctly regardless of the
+player's deployment path.
+
 ### For New Platforms
 
 Simply use CacheProxy from the start:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xiboplayer/cache",
-  "version": "0.4.0",
+  "version": "0.4.3",
   "description": "Offline caching and download management with parallel chunk downloads",
   "type": "module",
   "main": "./src/index.js",
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "spark-md5": "^3.0.2",
-    "@xiboplayer/utils": "0.4.0"
+    "@xiboplayer/utils": "0.4.3"
   },
   "devDependencies": {
     "vitest": "^2.0.0",

package/src/cache-analyzer.js

@@ -56,6 +56,14 @@ export class CacheAnalyzer {
     for (const file of cachedFiles) {
       if (requiredIds.has(String(file.id))) {
         required.push(file);
+      } else if (file.type === 'widget') {
+        // Widget HTML IDs are "layoutId/regionId/widgetId" — check parent layout
+        const parentLayoutId = String(file.id).split('/')[0];
+        if (requiredIds.has(parentLayoutId)) {
+          required.push(file);
+        } else {
+          orphaned.push(file);
+        }
       } else {
         orphaned.push(file);
       }

package/src/cache-analyzer.test.js

@@ -170,6 +170,20 @@ describe('CacheAnalyzer', () => {
       vi.unstubAllGlobals();
     });
 
+    it('should treat widget HTML as required when parent layout is required', async () => {
+      mockCache._addFile({ id: '470', type: 'layout', size: 500, cachedAt: 100 });
+      mockCache._addFile({ id: '470/213/182', type: 'widget', size: 0, cachedAt: 0 });
+      mockCache._addFile({ id: '470/215/184', type: 'widget', size: 0, cachedAt: 0 });
+      mockCache._addFile({ id: '99/10/5', type: 'widget', size: 0, cachedAt: 0 });
+
+      const report = await analyzer.analyze([{ id: '470', type: 'layout' }]);
+
+      // Layout 470 + its 2 widgets = 3 required; widget for layout 99 = orphaned
+      expect(report.files.required).toBe(3);
+      expect(report.files.orphaned).toBe(1);
+      expect(report.orphaned[0].id).toBe('99/10/5');
+    });
+
     it('should handle files with missing size or cachedAt', async () => {
       mockCache._addFile({ id: '1', type: 'media' }); // no size, no cachedAt
 

package/src/download-manager.js

@@ -97,6 +97,20 @@ export function isUrlExpired(url, graceSeconds = 30) {
   return (Date.now() / 1000) >= (expiry - graceSeconds);
 }
 
+/**
+ * Rewrite an absolute CMS URL through the local proxy when running behind
+ * the proxy server (Chromium kiosk or Electron).
+ * Detection: SW/window on localhost:8765 = proxy mode.
+ */
+export function rewriteUrlForProxy(url) {
+  if (!url.startsWith('http')) return url;
+  const loc = typeof self !== 'undefined' ? self.location : undefined;
+  if (!loc || loc.hostname !== 'localhost' || loc.port !== '8765') return url;
+  const parsed = new URL(url);
+  const cmsOrigin = parsed.origin;
+  return `/file-proxy?cms=${encodeURIComponent(cmsOrigin)}&url=${encodeURIComponent(parsed.pathname + parsed.search)}`;
+}
+
 /**
  * DownloadTask - Single HTTP fetch unit
  *
@@ -120,7 +134,7 @@ export class DownloadTask {
     if (isUrlExpired(url)) {
       throw new Error(`URL expired for ${this.fileInfo.type}/${this.fileInfo.id} — waiting for fresh URL from next collection cycle`);
     }
-    return url;
+    return rewriteUrlForProxy(url);
   }
 
   async start() {
@@ -207,7 +221,7 @@ export class FileDownload {
     if (isUrlExpired(url)) {
       throw new Error(`URL expired for ${this.fileInfo.type}/${this.fileInfo.id} — waiting for fresh URL from next collection cycle`);
     }
-    return url;
+    return rewriteUrlForProxy(url);
   }
 
   wait() {

package/src/widget-html.js

@@ -35,18 +35,20 @@ export async function cacheWidgetHtml(layoutId, regionId, mediaId, html) {
   const cache = await caches.open(CACHE_NAME);
 
   // Inject <base> tag to fix relative paths for widget dependencies
-  // Widget HTML has relative paths like "bundle.min.js" that should resolve to /player/cache/media/
-  const baseTag = '<base href="/player/cache/media/">';
+  // Widget HTML has relative paths like "bundle.min.js" that should resolve to cache/media/
+  const baseTag = `<base href="${BASE}/cache/media/">`;
   let modifiedHtml = html;
 
-  // Insert base tag after <head> opening tag
-  if (html.includes('<head>')) {
-    modifiedHtml = html.replace('<head>', '<head>' + baseTag);
-  } else if (html.includes('<HEAD>')) {
-    modifiedHtml = html.replace('<HEAD>', '<HEAD>' + baseTag);
-  } else {
-    // No head tag, prepend base tag
-    modifiedHtml = baseTag + html;
+  // Insert base tag after <head> opening tag (skip if already present)
+  if (!html.includes('<base ')) {
+    if (html.includes('<head>')) {
+      modifiedHtml = html.replace('<head>', '<head>' + baseTag);
+    } else if (html.includes('<HEAD>')) {
+      modifiedHtml = html.replace('<HEAD>', '<HEAD>' + baseTag);
+    } else {
+      // No head tag, prepend base tag
+      modifiedHtml = baseTag + html;
+    }
   }
 
   // Rewrite absolute CMS signed URLs to local cache paths
@@ -65,10 +67,12 @@ export async function cacheWidgetHtml(layoutId, regionId, mediaId, html) {
   // CMS global-elements.xml uses {{alignId}} {{valignId}} which produces
   // invalid CSS (empty value) when alignment is not configured
   const cssFixTag = '<style>img,video{object-position:center center}</style>';
-  if (modifiedHtml.includes('</head>')) {
-    modifiedHtml = modifiedHtml.replace('</head>', cssFixTag + '</head>');
-  } else if (modifiedHtml.includes('</HEAD>')) {
-    modifiedHtml = modifiedHtml.replace('</HEAD>', cssFixTag + '</HEAD>');
+  if (!modifiedHtml.includes('object-position:center center')) {
+    if (modifiedHtml.includes('</head>')) {
+      modifiedHtml = modifiedHtml.replace('</head>', cssFixTag + '</head>');
+    } else if (modifiedHtml.includes('</HEAD>')) {
+      modifiedHtml = modifiedHtml.replace('</HEAD>', cssFixTag + '</HEAD>');
+    }
   }
 
   // Rewrite Interactive Control hostAddress to SW-interceptable path
@@ -80,7 +84,7 @@ export async function cacheWidgetHtml(layoutId, regionId, mediaId, html) {
     `hostAddress: "${BASE}/ic"`
   );
 
-  log.info('Injected base tag and rewrote CMS URLs in widget HTML');
+  log.info('Injected base tag and rewrote CMS/data URLs in widget HTML');
 
   // Construct full URL for cache storage
   const cacheUrl = new URL(cacheKey, window.location.origin);

package/src/widget-html.test.js

@@ -0,0 +1,297 @@
+/**
+ * Widget HTML caching tests
+ *
+ * Tests the URL rewriting and base tag injection that cacheWidgetHtml performs.
+ * These are critical for widget rendering — CMS provides HTML with absolute
+ * signed URLs that must be rewritten to local cache paths.
+ *
+ * Real-world scenario (RSS ticker in layout 472, region 223, widget 193):
+ *   1. CMS getResource returns HTML with signed URLs for bundle.min.js, fonts.css
+ *   2. SW download manager may cache this raw HTML before the main thread processes it
+ *   3. cacheWidgetHtml must rewrite CMS URLs → /cache/static/ and fetch the resources
+ *   4. Widget iframe loads, SW serves bundle.min.js and fonts.css from static cache
+ *   5. bundle.min.js runs getWidgetData → $.ajax("193.json") → SW serves from media cache
+ */
+
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { cacheWidgetHtml } from './widget-html.js';
+
+// --- Realistic CMS HTML templates (based on actual CMS output) ---
+
+const CMS_BASE = 'https://displays.superpantalles.com';
+const SIGNED_PARAMS = 'displayId=152&type=P&itemId=1&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20260222T000000Z&X-Amz-Expires=1771803983&X-Amz-SignedHeaders=host&X-Amz-Signature=abc123';
+
+/**
+ * Simulates actual CMS RSS ticker widget HTML (layout 472, region 223, widget 193).
+ * The CMS generates this via getResource — it includes:
+ * - Signed URLs for bundle.min.js and fonts.css (must be rewritten)
+ * - Relative data URL "193.json" resolved via <base> tag
+ * - Interactive Control (xiboIC) with hostAddress pointing at CMS
+ */
+function makeRssTickerHtml() {
+  return `<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>RSS Ticker</title>
+<script src="${CMS_BASE}/pwa/file?file=bundle.min.js&fileType=bundle&${SIGNED_PARAMS}"></script>
+<link rel="stylesheet" href="${CMS_BASE}/pwa/file?file=fonts.css&fileType=fontCss&${SIGNED_PARAMS}">
+<style>.rss-item { padding: 10px; }</style>
+</head>
+<body>
+<div id="content">
+<script>
+var currentWidget = { url: "193.json", duration: 5 };
+var options = {hostAddress: "${CMS_BASE}"};
+xiboIC.init(options);
+function getWidgetData() {
+  $.ajax({ url: currentWidget.url, dataType: "json" });
+}
+</script>
+</div>
+</body>
+</html>`;
+}
+
+/** PDF widget (layout 472, region 221, widget 190) — simpler, no data URL */
+function makePdfWidgetHtml() {
+  return `<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<script src="${CMS_BASE}/pwa/file?file=bundle.min.js&fileType=bundle&${SIGNED_PARAMS}"></script>
+<link rel="stylesheet" href="${CMS_BASE}/pwa/file?file=fonts.css&fileType=fontCss&${SIGNED_PARAMS}"></link>
+</head>
+<body>
+<object data="11.pdf" type="application/pdf" width="100%" height="100%"></object>
+</body>
+</html>`;
+}
+
+/** Clock widget — uses xmds.php endpoint (older CMS versions) */
+function makeClockWidgetHtml() {
+  return `<html>
+<head>
+<script src="${CMS_BASE}/xmds.php?file=bundle.min.js&${SIGNED_PARAMS}"></script>
+<link rel="stylesheet" href="${CMS_BASE}/xmds.php?file=fonts.css&${SIGNED_PARAMS}">
+</head>
+<body><div class="clock"></div></body>
+</html>`;
+}
+
+// --- Mock Cache API ---
+
+const cacheStore = new Map();
+const mockCache = {
+  put: vi.fn(async (url, response) => {
+    const key = typeof url === 'string' ? url : url.toString();
+    const text = await response.clone().text();
+    cacheStore.set(key, text);
+  }),
+  match: vi.fn(async (key) => {
+    const url = typeof key === 'string' ? key : (key.url || key.toString());
+    const text = cacheStore.get(url);
+    return text ? new Response(text) : undefined;
+  }),
+};
+
+const fetchedUrls = [];
+global.fetch = vi.fn(async (url) => {
+  fetchedUrls.push(url);
+  if (url.includes('bundle.min.js')) {
+    return new Response('var xiboIC = { init: function(){} };', { status: 200 });
+  }
+  if (url.includes('fonts.css')) {
+    return new Response(`@font-face { font-family: "Poppins"; src: url("${CMS_BASE}/pwa/file?file=Poppins-Regular.ttf&${SIGNED_PARAMS}"); }`, { status: 200 });
+  }
+  if (url.includes('.ttf') || url.includes('.woff')) {
+    return new Response(new Blob([new Uint8Array(100)]), { status: 200 });
+  }
+  return new Response('', { status: 404 });
+});
+
+global.caches = {
+  open: vi.fn(async () => mockCache),
+};
+
+// --- Tests ---
+
+describe('cacheWidgetHtml', () => {
+  beforeEach(() => {
+    cacheStore.clear();
+    vi.clearAllMocks();
+    fetchedUrls.length = 0;
+  });
+
+  // --- Base tag injection ---
+
+  describe('base tag injection', () => {
+    it('injects <base> tag after <head>', async () => {
+      const html = '<html><head><title>Widget</title></head><body>content</body></html>';
+      await cacheWidgetHtml('472', '223', '193', html);
+
+      const stored = cacheStore.values().next().value;
+      expect(stored).toContain('<base href=');
+      expect(stored).toContain('/cache/media/">');
+    });
+
+    it('injects <base> tag when no <head> tag exists', async () => {
+      const html = '<div>no head tag</div>';
+      await cacheWidgetHtml('472', '223', '193', html);
+
+      const stored = cacheStore.values().next().value;
+      expect(stored).toContain('<base href=');
+    });
+  });
+
+  // --- RSS ticker: layout 472, region 223, widget 193 ---
+
+  describe('RSS ticker (layout 472 / region 223 / widget 193)', () => {
+    it('rewrites bundle.min.js and fonts.css signed URLs', async () => {
+      await cacheWidgetHtml('472', '223', '193', makeRssTickerHtml());
+
+      const stored = cacheStore.values().next().value;
+      expect(stored).not.toContain(CMS_BASE);
+      expect(stored).toContain('/cache/static/bundle.min.js');
+      expect(stored).toContain('/cache/static/fonts.css');
+    });
+
+    it('preserves the data URL (193.json) for SW interception', async () => {
+      await cacheWidgetHtml('472', '223', '193', makeRssTickerHtml());
+
+      const stored = cacheStore.values().next().value;
+      // 193.json is relative — resolved by <base> tag, not rewritten
+      expect(stored).toContain('"193.json"');
+    });
+
+    it('rewrites xiboIC hostAddress from CMS to local path', async () => {
+      await cacheWidgetHtml('472', '223', '193', makeRssTickerHtml());
+
+      const stored = cacheStore.values().next().value;
+      expect(stored).not.toContain(`hostAddress: "${CMS_BASE}"`);
+      expect(stored).toContain('/ic"');
+    });
+
+    it('fetches bundle.min.js and fonts.css from CMS for local caching', async () => {
+      await cacheWidgetHtml('472', '223', '193', makeRssTickerHtml());
+
+      const bundleFetched = fetchedUrls.some(u => u.includes('bundle.min.js'));
+      const fontsFetched = fetchedUrls.some(u => u.includes('fonts.css'));
+      expect(bundleFetched).toBe(true);
+      expect(fontsFetched).toBe(true);
+    });
+
+    it('stores processed HTML at correct cache key', async () => {
+      await cacheWidgetHtml('472', '223', '193', makeRssTickerHtml());
+
+      const keys = [...cacheStore.keys()];
+      const widgetKey = keys.find(k => k.includes('/cache/widget/472/223/193'));
+      expect(widgetKey).toBeTruthy();
+    });
+
+    it('caches font files referenced in fonts.css', async () => {
+      await cacheWidgetHtml('472', '223', '193', makeRssTickerHtml());
+
+      // fonts.css contains url("...Poppins-Regular.ttf") which should be fetched
+      const fontFetched = fetchedUrls.some(u => u.includes('Poppins-Regular.ttf'));
+      expect(fontFetched).toBe(true);
+    });
+  });
+
+  // --- PDF widget: layout 472, region 221, widget 190 ---
+
+  describe('PDF widget (layout 472 / region 221 / widget 190)', () => {
+    it('rewrites CMS URLs and preserves relative PDF path', async () => {
+      await cacheWidgetHtml('472', '221', '190', makePdfWidgetHtml());
+
+      const stored = cacheStore.values().next().value;
+      expect(stored).not.toContain(CMS_BASE);
+      expect(stored).toContain('/cache/static/bundle.min.js');
+      // PDF data attribute "11.pdf" is relative — resolved by <base> tag
+      expect(stored).toContain('"11.pdf"');
+    });
+
+    it('stores at correct widget cache key with layout/region/media IDs', async () => {
+      await cacheWidgetHtml('472', '221', '190', makePdfWidgetHtml());
+
+      const keys = [...cacheStore.keys()];
+      expect(keys.some(k => k.includes('/cache/widget/472/221/190'))).toBe(true);
+    });
+  });
+
+  // --- Clock widget: xmds.php endpoint (legacy) ---
+
+  describe('clock widget with xmds.php URLs', () => {
+    it('rewrites xmds.php signed URLs to local cache paths', async () => {
+      await cacheWidgetHtml('1', '1', '1', makeClockWidgetHtml());
+
+      const stored = cacheStore.values().next().value;
+      expect(stored).not.toContain('xmds.php');
+      expect(stored).toContain('/cache/static/bundle.min.js');
+      expect(stored).toContain('/cache/static/fonts.css');
+    });
+  });
+
+  // --- Idempotency (regression: duplicate base/style tags) ---
+
+  describe('idempotency', () => {
+    it('does not add duplicate <base> tags on re-processing', async () => {
+      await cacheWidgetHtml('472', '223', '193', makeRssTickerHtml());
+      const firstPass = cacheStore.values().next().value;
+
+      await cacheWidgetHtml('472', '223', '193', firstPass);
+      const secondPass = cacheStore.values().next().value;
+
+      expect(secondPass).toBe(firstPass);
+    });
+
+    it('does not add duplicate CSS fix tags on re-processing', async () => {
+      const html = '<html><head></head><body></body></html>';
+      await cacheWidgetHtml('472', '223', '193', html);
+      const firstPass = cacheStore.values().next().value;
+
+      await cacheWidgetHtml('472', '223', '193', firstPass);
+      const secondPass = cacheStore.values().next().value;
+
+      const baseCount = (secondPass.match(/<base /g) || []).length;
+      const styleCount = (secondPass.match(/object-position:center center/g) || []).length;
+      expect(baseCount).toBe(1);
+      expect(styleCount).toBe(1);
+    });
+  });
+
+  // --- SW pre-cache scenario (the bug we fixed) ---
+
+  describe('SW pre-cached raw HTML (regression)', () => {
+    it('processes raw HTML that SW cached without rewriting', async () => {
+      // Simulate: SW downloads getResource HTML and caches it raw
+      const rawCmsHtml = makeRssTickerHtml();
+
+      // Main thread finds it in cache and re-processes
+      await cacheWidgetHtml('472', '223', '193', rawCmsHtml);
+
+      const stored = cacheStore.values().next().value;
+      // CMS URLs must be rewritten even though HTML came from cache
+      expect(stored).not.toContain(CMS_BASE);
+      expect(stored).toContain('/cache/static/bundle.min.js');
+      expect(stored).toContain('/cache/static/fonts.css');
+      expect(stored).toContain('<base href=');
+    });
+
+    it('handles different widgets in different regions of same layout', async () => {
+      // Layout 472 has region 221 (PDF) and region 223 (RSS ticker)
+      await cacheWidgetHtml('472', '221', '190', makePdfWidgetHtml());
+      await cacheWidgetHtml('472', '223', '193', makeRssTickerHtml());
+
+      const keys = [...cacheStore.keys()];
+      const pdfKey = keys.find(k => k.includes('/cache/widget/472/221/190'));
+      const rssKey = keys.find(k => k.includes('/cache/widget/472/223/193'));
+      expect(pdfKey).toBeTruthy();
+      expect(rssKey).toBeTruthy();
+
+      // Both should have CMS URLs rewritten
+      expect(cacheStore.get(pdfKey)).not.toContain(CMS_BASE);
+      expect(cacheStore.get(rssKey)).not.toContain(CMS_BASE);
+    });
+  });
+});