@xiboplayer/cache 0.5.8 → 0.5.9

package/src/widget-html.js

@@ -1,30 +1,32 @@
 /**
- * Widget HTML caching — preprocesses widget HTML and stores in Cache API
+ * Widget HTML processing — preprocesses widget HTML and stores via REST
  *
  * Handles:
  * - <base> tag injection for relative path resolution
- * - CMS signed URL → local cache path rewriting
+ * - CMS signed URL → local store path rewriting
  * - CSS font URL rewriting and font file caching
  * - Interactive Control hostAddress rewriting
  * - CSS object-position fix for CMS template alignment
  *
  * Runs on the main thread (needs window.location for URL construction).
- * Uses Cache API directly — the SW also serves from the same cache.
+ * Stores content via PUT /store/... — no Cache API needed.
  */
 
 import { createLogger } from '@xiboplayer/utils';
-import { rewriteUrlForProxy } from './download-manager.js';
+import { toProxyUrl } from './download-manager.js';
 
 const log = createLogger('Cache');
-const CACHE_NAME = 'xibo-media-v1';
 
 // Dynamic base path for multi-variant deployment (pwa, pwa-xmds, pwa-xlr)
 const BASE = (typeof window !== 'undefined')
   ? window.location.pathname.replace(/\/[^/]*$/, '').replace(/\/$/, '') || '/player/pwa'
   : '/player/pwa';
 
+// Dedup concurrent static resource fetches (two widgets both need bundle.min.js)
+const _pendingStatic = new Map(); // filename → Promise<void>
+
 /**
- * Store widget HTML in cache for iframe loading
+ * Store widget HTML in ContentStore for iframe loading
  * @param {string} layoutId - Layout ID
  * @param {string} regionId - Region ID
  * @param {string} mediaId - Media ID
@@ -33,7 +35,6 @@ const BASE = (typeof window !== 'undefined')
  */
 export async function cacheWidgetHtml(layoutId, regionId, mediaId, html) {
   const cacheKey = `${BASE}/cache/widget/${layoutId}/${regionId}/${mediaId}`;
-  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 cache/media/
@@ -52,7 +53,7 @@ export async function cacheWidgetHtml(layoutId, regionId, mediaId, html) {
     }
   }
 
-  // Rewrite absolute CMS signed URLs to local cache paths
+  // Rewrite absolute CMS signed URLs to local store paths
   // Matches: https://cms/xmds.php?file=... or https://cms/pwa/file?file=...
   // These absolute URLs bypass the <base> tag entirely, causing slow CMS fetches
   const cmsUrlRegex = /https?:\/\/[^"'\s)]+(?:xmds\.php|pwa\/file)\?[^"'\s)]*file=([^&"'\s)]+)[^"'\s)]*/g;
@@ -65,8 +66,6 @@ export async function cacheWidgetHtml(layoutId, regionId, mediaId, html) {
   });
 
   // Inject CSS default for object-position to suppress CMS template warning
-  // 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('object-position:center center')) {
     if (modifiedHtml.includes('</head>')) {
@@ -77,9 +76,6 @@ export async function cacheWidgetHtml(layoutId, regionId, mediaId, html) {
   }
 
   // Rewrite Interactive Control hostAddress to SW-interceptable path
-  // The IC library uses hostAddress + '/info', '/trigger', etc.
-  // Original: hostAddress: "https://cms.example.com" → XHR to /info goes to CMS (fails)
-  // Rewritten: hostAddress: "/player/pwa/ic" → XHR to /player/pwa/ic/info (intercepted by SW)
   modifiedHtml = modifiedHtml.replace(
     /hostAddress\s*:\s*["']https?:\/\/[^"']+["']/g,
     `hostAddress: "${BASE}/ic"`
@@ -87,32 +83,26 @@ export async function cacheWidgetHtml(layoutId, regionId, mediaId, 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);
-
-  const response = new Response(modifiedHtml, {
-    headers: {
-      'Content-Type': 'text/html; charset=utf-8',
-      'Access-Control-Allow-Origin': '*'
-    }
-  });
-
-  await cache.put(cacheUrl, response);
-  log.info(`Stored widget HTML at ${cacheKey} (${modifiedHtml.length} bytes)`);
-
-  // Fetch and cache static resources (shared Cache API - accessible from main thread and SW)
+  // Store static resources FIRST — widget iframe loads immediately after HTML is stored,
+  // and its <script>/<link> tags will 404 if deps aren't ready yet
   if (staticResources.length > 0) {
-    const STATIC_CACHE_NAME = 'xibo-static-v1';
-    const staticCache = await caches.open(STATIC_CACHE_NAME);
+    await Promise.all(staticResources.map(({ filename, originalUrl }) => {
+      // Dedup: if another widget is already fetching the same resource, wait for it
+      if (_pendingStatic.has(filename)) {
+        return _pendingStatic.get(filename);
+      }
 
-    await Promise.all(staticResources.map(async ({ filename, originalUrl }) => {
-      const staticKey = `${BASE}/cache/static/${filename}`;
-      const existing = await staticCache.match(staticKey);
-      if (existing) return; // Already cached
+      const work = (async () => {
+      // Check if already stored
+      try {
+        const headResp = await fetch(`/store/static/${filename}`, { method: 'HEAD' });
+        if (headResp.ok) return; // Already stored
+      } catch { /* proceed to fetch */ }
 
       try {
-        const resp = await fetch(rewriteUrlForProxy(originalUrl));
+        const resp = await fetch(toProxyUrl(originalUrl));
         if (!resp.ok) {
+          resp.body?.cancel();
           log.warn(`Failed to fetch static resource: ${filename} (HTTP ${resp.status})`);
           return;
         }
@@ -127,7 +117,7 @@ export async function cacheWidgetHtml(layoutId, regionId, mediaId, html) {
           'svg': 'image/svg+xml'
         }[ext] || 'application/octet-stream';
 
-        // For CSS files, rewrite font URLs and cache referenced font files
+        // For CSS files, rewrite font URLs and store referenced font files
         if (ext === 'css') {
           let cssText = await resp.text();
           const fontResources = [];
@@ -138,20 +128,26 @@ export async function cacheWidgetHtml(layoutId, regionId, mediaId, html) {
             return `url(${quote}${BASE}/cache/static/${encodeURIComponent(fontFilename)}${quote})`;
           });
 
-          await staticCache.put(staticKey, new Response(cssText, {
-            headers: { 'Content-Type': 'text/css' }
-          }));
-          log.info(`Cached CSS with ${fontResources.length} rewritten font URLs: ${filename}`);
+          const cssResp = await fetch(`/store/static/${filename}`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'text/css' },
+            body: cssText,
+          });
+          cssResp.body?.cancel();
+          log.info(`Stored CSS with ${fontResources.length} rewritten font URLs: ${filename}`);
 
-          // Fetch and cache referenced font files
+          // Fetch and store referenced font files
           await Promise.all(fontResources.map(async ({ filename: fontFile, originalUrl: fontUrl }) => {
-            const fontKey = `${BASE}/cache/static/${encodeURIComponent(fontFile)}`;
-            const existingFont = await staticCache.match(fontKey);
-            if (existingFont) return; // Already cached (by SW or previous widget)
+            // Check if already stored
+            try {
+              const headResp = await fetch(`/store/static/${encodeURIComponent(fontFile)}`, { method: 'HEAD' });
+              if (headResp.ok) return;
+            } catch { /* proceed */ }
 
             try {
-              const fontResp = await fetch(rewriteUrlForProxy(fontUrl));
+              const fontResp = await fetch(toProxyUrl(fontUrl));
               if (!fontResp.ok) {
+                fontResp.body?.cancel();
                 log.warn(`Failed to fetch font: ${fontFile} (HTTP ${fontResp.status})`);
                 return;
               }
@@ -164,26 +160,46 @@ export async function cacheWidgetHtml(layoutId, regionId, mediaId, html) {
                 'svg': 'image/svg+xml'
               }[fontExt] || 'application/octet-stream';
 
-              await staticCache.put(fontKey, new Response(fontBlob, {
-                headers: { 'Content-Type': fontContentType }
-              }));
-              log.info(`Cached font: ${fontFile} (${fontContentType}, ${fontBlob.size} bytes)`);
+              const fontPutResp = await fetch(`/store/static/${encodeURIComponent(fontFile)}`, {
+                method: 'PUT',
+                headers: { 'Content-Type': fontContentType },
+                body: fontBlob,
+              });
+              fontPutResp.body?.cancel();
+              log.info(`Stored font: ${fontFile} (${fontContentType}, ${fontBlob.size} bytes)`);
             } catch (fontErr) {
-              log.warn(`Failed to cache font: ${fontFile}`, fontErr);
+              log.warn(`Failed to store font: ${fontFile}`, fontErr);
             }
           }));
         } else {
           const blob = await resp.blob();
-          await staticCache.put(staticKey, new Response(blob, {
-            headers: { 'Content-Type': contentType }
-          }));
-          log.info(`Cached static resource: ${filename} (${contentType}, ${blob.size} bytes)`);
+          const staticResp = await fetch(`/store/static/${filename}`, {
+            method: 'PUT',
+            headers: { 'Content-Type': contentType },
+            body: blob,
+          });
+          staticResp.body?.cancel();
+          log.info(`Stored static resource: ${filename} (${contentType}, ${blob.size} bytes)`);
         }
       } catch (error) {
-        log.warn(`Failed to cache static resource: ${filename}`, error);
+        log.warn(`Failed to store static resource: ${filename}`, error);
       }
+      })();
+
+      _pendingStatic.set(filename, work);
+      return work.finally(() => _pendingStatic.delete(filename));
     }));
   }
 
+  // Store widget HTML AFTER all static deps are ready — iframe loads instantly on store,
+  // so bundle.min.js/fonts.css/fonts must already be in the ContentStore
+  const putResp = await fetch(`/store/widget/${layoutId}/${regionId}/${mediaId}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'text/html; charset=utf-8' },
+    body: modifiedHtml,
+  });
+  putResp.body?.cancel();
+  log.info(`Stored widget HTML at ${cacheKey} (${modifiedHtml.length} bytes)`);
+
   return cacheKey;
 }

package/src/widget-html.test.js

@@ -9,8 +9,8 @@
  *   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
+ *   4. Widget iframe loads, SW serves bundle.min.js and fonts.css from ContentStore
+ *   5. bundle.min.js runs getWidgetData → $.ajax("193.json") → SW serves from store
  */
 
 import { describe, it, expect, beforeEach, vi } from 'vitest';
@@ -23,10 +23,6 @@ const SIGNED_PARAMS = 'displayId=152&type=P&itemId=1&X-Amz-Algorithm=AWS4-HMAC-S
 
 /**
  * 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>
@@ -79,50 +75,61 @@ function makeClockWidgetHtml() {
 </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;
-  }),
-};
+// --- Mock: track PUT /store/... calls via fetch() ---
 
+/** Map of storeKey → body text, populated by the fetch mock */
+const storeContents = new Map();
 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),
-};
+function createFetchMock() {
+  return vi.fn(async (url, opts) => {
+    fetchedUrls.push(url);
+
+    // PUT /store/... — store content
+    if (opts?.method === 'PUT' && url.startsWith('/store/')) {
+      const body = typeof opts.body === 'string' ? opts.body : await opts.body?.text?.() || '';
+      // Use full URL path as key (e.g. /store/widget/472/223/193)
+      storeContents.set(url, body);
+      return new Response(JSON.stringify({ ok: true }), { status: 200 });
+    }
+
+    // HEAD /store/... — check existence
+    if (opts?.method === 'HEAD' && url.startsWith('/store/')) {
+      return new Response(null, { status: 404 }); // nothing pre-stored
+    }
+
+    // Proxy fetch for CMS resources
+    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 });
+  });
+}
 
 // --- Tests ---
 
 describe('cacheWidgetHtml', () => {
   beforeEach(() => {
-    cacheStore.clear();
-    vi.clearAllMocks();
+    storeContents.clear();
     fetchedUrls.length = 0;
+    vi.clearAllMocks();
+    global.fetch = createFetchMock();
   });
 
+  // Helper: get stored widget HTML (first widget entry)
+  function getStoredWidget() {
+    for (const [key, value] of storeContents) {
+      if (key.startsWith('/store/widget/')) return value;
+    }
+    return undefined;
+  }
+
   // --- Base tag injection ---
 
   describe('base tag injection', () => {
@@ -130,7 +137,7 @@ describe('cacheWidgetHtml', () => {
       const html = '<html><head><title>Widget</title></head><body>content</body></html>';
       await cacheWidgetHtml('472', '223', '193', html);
 
-      const stored = cacheStore.values().next().value;
+      const stored = getStoredWidget();
       expect(stored).toContain('<base href=');
       expect(stored).toContain('/cache/media/">');
     });
@@ -139,7 +146,7 @@ describe('cacheWidgetHtml', () => {
       const html = '<div>no head tag</div>';
       await cacheWidgetHtml('472', '223', '193', html);
 
-      const stored = cacheStore.values().next().value;
+      const stored = getStoredWidget();
       expect(stored).toContain('<base href=');
     });
   });
@@ -150,7 +157,7 @@ describe('cacheWidgetHtml', () => {
     it('rewrites bundle.min.js and fonts.css signed URLs', async () => {
       await cacheWidgetHtml('472', '223', '193', makeRssTickerHtml());
 
-      const stored = cacheStore.values().next().value;
+      const stored = getStoredWidget();
       expect(stored).not.toContain(CMS_BASE);
       expect(stored).toContain('/cache/static/bundle.min.js');
       expect(stored).toContain('/cache/static/fonts.css');
@@ -159,7 +166,7 @@ describe('cacheWidgetHtml', () => {
     it('preserves the data URL (193.json) for SW interception', async () => {
       await cacheWidgetHtml('472', '223', '193', makeRssTickerHtml());
 
-      const stored = cacheStore.values().next().value;
+      const stored = getStoredWidget();
       // 193.json is relative — resolved by <base> tag, not rewritten
       expect(stored).toContain('"193.json"');
     });
@@ -167,7 +174,7 @@ describe('cacheWidgetHtml', () => {
     it('rewrites xiboIC hostAddress from CMS to local path', async () => {
       await cacheWidgetHtml('472', '223', '193', makeRssTickerHtml());
 
-      const stored = cacheStore.values().next().value;
+      const stored = getStoredWidget();
       expect(stored).not.toContain(`hostAddress: "${CMS_BASE}"`);
       expect(stored).toContain('/ic"');
     });
@@ -181,11 +188,11 @@ describe('cacheWidgetHtml', () => {
       expect(fontsFetched).toBe(true);
     });
 
-    it('stores processed HTML at correct cache key', async () => {
+    it('stores processed HTML at correct store key', async () => {
       await cacheWidgetHtml('472', '223', '193', makeRssTickerHtml());
 
-      const keys = [...cacheStore.keys()];
-      const widgetKey = keys.find(k => k.includes('/cache/widget/472/223/193'));
+      const keys = [...storeContents.keys()];
+      const widgetKey = keys.find(k => k.includes('/store/widget/472/223/193'));
       expect(widgetKey).toBeTruthy();
     });
 
@@ -204,18 +211,18 @@ describe('cacheWidgetHtml', () => {
     it('rewrites CMS URLs and preserves relative PDF path', async () => {
       await cacheWidgetHtml('472', '221', '190', makePdfWidgetHtml());
 
-      const stored = cacheStore.values().next().value;
+      const stored = getStoredWidget();
       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 () => {
+    it('stores at correct widget store 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);
+      const keys = [...storeContents.keys()];
+      expect(keys.some(k => k.includes('/store/widget/472/221/190'))).toBe(true);
     });
   });
 
@@ -225,7 +232,7 @@ describe('cacheWidgetHtml', () => {
     it('rewrites xmds.php signed URLs to local cache paths', async () => {
       await cacheWidgetHtml('1', '1', '1', makeClockWidgetHtml());
 
-      const stored = cacheStore.values().next().value;
+      const stored = getStoredWidget();
       expect(stored).not.toContain('xmds.php');
       expect(stored).toContain('/cache/static/bundle.min.js');
       expect(stored).toContain('/cache/static/fonts.css');
@@ -237,10 +244,11 @@ describe('cacheWidgetHtml', () => {
   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;
+      const firstPass = getStoredWidget();
 
+      storeContents.clear();
       await cacheWidgetHtml('472', '223', '193', firstPass);
-      const secondPass = cacheStore.values().next().value;
+      const secondPass = getStoredWidget();
 
       expect(secondPass).toBe(firstPass);
     });
@@ -248,10 +256,11 @@ describe('cacheWidgetHtml', () => {
     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;
+      const firstPass = getStoredWidget();
 
+      storeContents.clear();
       await cacheWidgetHtml('472', '223', '193', firstPass);
-      const secondPass = cacheStore.values().next().value;
+      const secondPass = getStoredWidget();
 
       const baseCount = (secondPass.match(/<base /g) || []).length;
       const styleCount = (secondPass.match(/object-position:center center/g) || []).length;
@@ -270,7 +279,7 @@ describe('cacheWidgetHtml', () => {
       // Main thread finds it in cache and re-processes
       await cacheWidgetHtml('472', '223', '193', rawCmsHtml);
 
-      const stored = cacheStore.values().next().value;
+      const stored = getStoredWidget();
       // 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');
@@ -283,15 +292,15 @@ describe('cacheWidgetHtml', () => {
       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'));
+      const keys = [...storeContents.keys()];
+      const pdfKey = keys.find(k => k.includes('/store/widget/472/221/190'));
+      const rssKey = keys.find(k => k.includes('/store/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);
+      expect(storeContents.get(pdfKey)).not.toContain(CMS_BASE);
+      expect(storeContents.get(rssKey)).not.toContain(CMS_BASE);
     });
   });
 });