npm - @xiboplayer/renderer - Versions diffs - 0.6.1 → 0.6.3 - Mend

@xiboplayer/renderer 0.6.1 → 0.6.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/package.json +4 -3
package/src/index.d.ts +1 -1
package/src/layout-pool.test.js +1 -14
package/src/layout.js +6 -0
package/src/renderer-lite.ic.test.js +203 -0
package/src/renderer-lite.js +349 -292
package/src/renderer-lite.overlays.test.js +1 -27
package/src/renderer-lite.test.js +511 -60
package/vitest.config.js +9 -0

package/src/renderer-lite.test.js CHANGED Viewed

@@ -6,12 +6,11 @@
  */
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import { RendererLite } from './renderer-lite.js';
+import { RendererLite, Transitions } 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 () => {
@@ -968,66 +964,222 @@ describe('RendererLite', () => {
   });
   describe('Transitions', () => {
-    // Skip: jsdom doesn't support Web Animations API
-    it.skip('should apply fade in transition', async () => {
-      const element = document.createElement('div');
-      element.style.opacity = '0';
+    let element;
+    let mockAnimate;
+    let capturedKeyframes;
+    let capturedTiming;
+    beforeEach(() => {
+      element = document.createElement('div');
+      capturedKeyframes = null;
+      capturedTiming = null;
+      mockAnimate = vi.fn((keyframes, timing) => {
+        capturedKeyframes = keyframes;
+        capturedTiming = timing;
+        return { onfinish: null, cancel: vi.fn() };
+      });
+      element.animate = mockAnimate;
+    });
-      const transition = {
-        type: 'fadeIn',
-        duration: 1000,
-        direction: 'N'
-      };
+    it('should apply fade in transition', () => {
+      const result = Transitions.apply(element, { type: 'fadeIn', duration: 1000 }, true, 1920, 1080);
+      expect(result).toBeTruthy();
+      expect(capturedKeyframes).toEqual([{ opacity: 0 }, { opacity: 1 }]);
+      expect(capturedTiming.duration).toBe(1000);
+      expect(capturedTiming.easing).toBe('linear');
+    });
+    it('should apply fade out transition', () => {
+      const result = Transitions.apply(element, { type: 'fadeOut', duration: 800 }, false, 1920, 1080);
-      // Import Transitions utility
-      const { Transitions } = await import('./renderer-lite.js');
-      const animation = Transitions.apply(element, transition, true, 1920, 1080);
+      expect(result).toBeTruthy();
+      expect(capturedKeyframes).toEqual([{ opacity: 1 }, { opacity: 0 }]);
+      expect(capturedTiming.duration).toBe(800);
+    });
+    it('should apply generic "fade" as fadeIn when isIn=true', () => {
+      const result = Transitions.apply(element, { type: 'fade', duration: 500 }, true, 1920, 1080);
+      expect(result).toBeTruthy();
+      expect(capturedKeyframes).toEqual([{ opacity: 0 }, { opacity: 1 }]);
+    });
+    it('should apply generic "fade" as fadeOut when isIn=false', () => {
+      const result = Transitions.apply(element, { type: 'fade', duration: 500 }, false, 1920, 1080);
-      expect(animation).toBeTruthy();
-      expect(animation.effect.getKeyframes()).toEqual(
-        expect.arrayContaining([
-          expect.objectContaining({ opacity: '0' }),
-          expect.objectContaining({ opacity: '1' })
-        ])
+      expect(result).toBeTruthy();
+      expect(capturedKeyframes).toEqual([{ opacity: 1 }, { opacity: 0 }]);
+    });
+    it('should apply fly in from North', () => {
+      const result = Transitions.apply(
+        element, { type: 'flyIn', duration: 500, direction: 'N' }, true, 1920, 1080
       );
+      expect(result).toBeTruthy();
+      expect(capturedKeyframes[0].transform).toBe('translate(0px, -1080px)');
+      expect(capturedKeyframes[1].transform).toBe('translate(0, 0)');
+      expect(capturedTiming.easing).toBe('ease-out');
     });
-    // Skip: jsdom doesn't support Web Animations API
-    it.skip('should apply fly out transition with direction', async () => {
-      const element = document.createElement('div');
+    it('should apply fly in from East', () => {
+      Transitions.apply(
+        element, { type: 'flyIn', duration: 500, direction: 'E' }, true, 1920, 1080
+      );
+      expect(capturedKeyframes[0].transform).toBe('translate(1920px, 0px)');
+      expect(capturedKeyframes[1].transform).toBe('translate(0, 0)');
+    });
-      const transition = {
-        type: 'flyOut',
-        duration: 1500,
-        direction: 'S' // South
-      };
+    it('should apply fly in from South', () => {
+      Transitions.apply(
+        element, { type: 'flyIn', duration: 500, direction: 'S' }, true, 1920, 1080
+      );
-      const { Transitions } = await import('./renderer-lite.js');
-      const animation = Transitions.apply(element, transition, false, 1920, 1080);
+      expect(capturedKeyframes[0].transform).toBe('translate(0px, 1080px)');
+    });
-      expect(animation).toBeTruthy();
-      const keyframes = animation.effect.getKeyframes();
+    it('should apply fly in from West', () => {
+      Transitions.apply(
+        element, { type: 'flyIn', duration: 500, direction: 'W' }, true, 1920, 1080
+      );
-      // Should translate to south (positive Y)
-      expect(keyframes[1].transform).toContain('1080px'); // Height offset
+      expect(capturedKeyframes[0].transform).toBe('translate(-1920px, 0px)');
     });
-  });
-  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>`;
+    it('should apply fly in from diagonal directions (NE, SE, SW, NW)', () => {
+      // NE
+      Transitions.apply(element, { type: 'flyIn', duration: 500, direction: 'NE' }, true, 1920, 1080);
+      expect(capturedKeyframes[0].transform).toBe('translate(1920px, -1080px)');
-      await renderer.renderLayout(xlf1, 1);
-      renderer.mediaUrlCache.set(1, 'blob://test-1');
+      // SE
+      Transitions.apply(element, { type: 'flyIn', duration: 500, direction: 'SE' }, true, 1920, 1080);
+      expect(capturedKeyframes[0].transform).toBe('translate(1920px, 1080px)');
-      // Switch to different layout
-      await renderer.renderLayout(xlf2, 2);
+      // SW
+      Transitions.apply(element, { type: 'flyIn', duration: 500, direction: 'SW' }, true, 1920, 1080);
+      expect(capturedKeyframes[0].transform).toBe('translate(-1920px, 1080px)');
+      // NW
+      Transitions.apply(element, { type: 'flyIn', duration: 500, direction: 'NW' }, true, 1920, 1080);
+      expect(capturedKeyframes[0].transform).toBe('translate(-1920px, -1080px)');
+    });
+    it('should apply fly out with direction S', () => {
+      const result = Transitions.apply(
+        element, { type: 'flyOut', duration: 1500, direction: 'S' }, false, 1920, 1080
+      );
+      expect(result).toBeTruthy();
+      expect(capturedKeyframes[0].transform).toBe('translate(0, 0)');
+      expect(capturedKeyframes[1].transform).toBe('translate(0px, -1080px)');
+      expect(capturedTiming.easing).toBe('ease-in');
+    });
+    it('should apply generic "fly" as flyIn when isIn=true', () => {
+      const result = Transitions.apply(
+        element, { type: 'fly', duration: 500, direction: 'E' }, true, 1920, 1080
+      );
+      expect(result).toBeTruthy();
+      expect(capturedKeyframes[0].transform).toBe('translate(1920px, 0px)');
+      expect(capturedKeyframes[1].transform).toBe('translate(0, 0)');
+      expect(capturedTiming.easing).toBe('ease-out');
+    });
+    it('should apply generic "fly" as flyOut when isIn=false', () => {
+      const result = Transitions.apply(
+        element, { type: 'fly', duration: 500, direction: 'W' }, false, 1920, 1080
+      );
+      expect(result).toBeTruthy();
+      expect(capturedKeyframes[0].transform).toBe('translate(0, 0)');
+      expect(capturedKeyframes[1].transform).toContain('px');
+      expect(capturedTiming.easing).toBe('ease-in');
+    });
+    it('should not apply flyIn when isIn=false', () => {
+      const result = Transitions.apply(
+        element, { type: 'flyIn', duration: 500, direction: 'N' }, false, 1920, 1080
+      );
+      expect(result).toBeNull();
+    });
+    it('should not apply flyOut when isIn=true', () => {
+      const result = Transitions.apply(
+        element, { type: 'flyOut', duration: 500, direction: 'N' }, true, 1920, 1080
+      );
+      expect(result).toBeNull();
+    });
+    it('should default direction to N when missing', () => {
+      Transitions.apply(element, { type: 'flyIn', duration: 500 }, true, 1920, 1080);
+      // N direction: translateY(-height)
+      expect(capturedKeyframes[0].transform).toBe('translate(0px, -1080px)');
+    });
+    it('should default duration to 1000 when missing', () => {
+      Transitions.apply(element, { type: 'fadeIn' }, true, 1920, 1080);
+      expect(capturedTiming.duration).toBe(1000);
+    });
+    it('should return null for unknown transition type', () => {
+      const result = Transitions.apply(element, { type: 'slide' }, true, 1920, 1080);
+      expect(result).toBeNull();
+    });
+    it('should return null when config is null', () => {
+      expect(Transitions.apply(element, null, true, 1920, 1080)).toBeNull();
+    });
+    it('should return null when config has no type', () => {
+      expect(Transitions.apply(element, { duration: 500 }, true, 1920, 1080)).toBeNull();
+    });
+    it('should be case-insensitive for type matching', () => {
+      const result = Transitions.apply(element, { type: 'FadeIn', duration: 500 }, true, 1920, 1080);
+      expect(result).toBeTruthy();
+      expect(capturedKeyframes).toEqual([{ opacity: 0 }, { opacity: 1 }]);
+    });
+    it('should parse fly transitions from XLF with generic "fly" type', () => {
+      const xlf = `
+        <layout>
+          <region id="r1">
+            <media id="m1" type="image" duration="10">
+              <options>
+                <transIn>fly</transIn>
+                <transInDuration>500</transInDuration>
+                <transInDirection>E</transInDirection>
+                <transOut>fly</transOut>
+                <transOutDuration>500</transOutDuration>
+                <transOutDirection>NW</transOutDirection>
+              </options>
+            </media>
+          </region>
+        </layout>
+      `;
-      // Cache should be cleared
-      expect(renderer.mediaUrlCache.size).toBe(0);
+      const layout = renderer.parseXlf(xlf);
+      const widget = layout.regions[0].widgets[0];
+      expect(widget.transitions.in).toEqual({
+        type: 'fly',
+        duration: 500,
+        direction: 'E'
+      });
+      expect(widget.transitions.out).toEqual({
+        type: 'fly',
+        duration: 500,
+        direction: 'NW'
+      });
     });
+  });
+  describe('Memory Management', () => {
     it('should clear regions on stopCurrentLayout', async () => {
       const xlf = `
         <layout>
@@ -1111,8 +1263,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 +1295,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();
     });
   });
@@ -1798,6 +1959,57 @@ describe('RendererLite', () => {
       vi.useRealTimers();
     });
+    it('should hide multi-widget drawer after cycling through all widgets', async () => {
+      vi.useFakeTimers();
+      const xlf = `
+        <layout width="1920" height="1080" duration="60">
+          <region id="r1" width="1920" height="1080" top="0" left="0">
+            <media id="m1" type="image" duration="60" fileId="1">
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+          <drawer id="d1" width="400" height="300" top="100" left="100">
+            <media id="dm1" type="image" duration="3" fileId="2">
+              <options><uri>d1.png</uri></options>
+            </media>
+            <media id="dm2" type="image" duration="3" fileId="3">
+              <options><uri>d2.png</uri></options>
+            </media>
+            <media id="dm3" type="image" duration="3" fileId="4">
+              <options><uri>d3.png</uri></options>
+            </media>
+          </drawer>
+        </layout>
+      `;
+      const renderPromise = renderer.renderLayout(xlf, 1);
+      await vi.advanceTimersByTimeAsync(100);
+      await renderPromise;
+      const drawerRegion = renderer.regions.get('d1');
+      expect(drawerRegion.element.style.display).toBe('none');
+      // Navigate to first drawer widget
+      renderer.navigateToWidget('dm1');
+      expect(drawerRegion.element.style.display).toBe('');
+      expect(drawerRegion.currentIndex).toBe(0);
+      // After dm1 duration → advances to dm2, still visible
+      await vi.advanceTimersByTimeAsync(3100);
+      expect(drawerRegion.element.style.display).toBe('');
+      // After dm2 duration → advances to dm3, still visible
+      await vi.advanceTimersByTimeAsync(3100);
+      expect(drawerRegion.element.style.display).toBe('');
+      // After dm3 duration → wraps to 0, drawer hidden
+      await vi.advanceTimersByTimeAsync(3100);
+      expect(drawerRegion.element.style.display).toBe('none');
+      vi.useRealTimers();
+    });
   });
   describe('Sub-Playlist (#10)', () => {
@@ -1906,6 +2118,65 @@ describe('RendererLite', () => {
       expect(ids.some(id => id.startsWith('a'))).toBe(true);
       expect(ids.some(id => id.startsWith('b'))).toBe(true);
     });
+    it('should repeat widget playCount times before advancing (#188)', () => {
+      const widgets = [
+        { id: 'm1', type: 'image', duration: 10, parentWidgetId: 'sp1',
+          displayOrder: 1, cyclePlayback: true, playCount: 2, isRandom: false },
+        { id: 'm2', type: 'image', duration: 10, parentWidgetId: 'sp1',
+          displayOrder: 2, cyclePlayback: true, playCount: 2, isRandom: false },
+      ];
+      renderer._subPlaylistCycleIndex = new Map();
+      const r1 = renderer._applyCyclePlayback(widgets);
+      const r2 = renderer._applyCyclePlayback(widgets);
+      const r3 = renderer._applyCyclePlayback(widgets);
+      const r4 = renderer._applyCyclePlayback(widgets);
+      // m1 plays twice, then m2 plays twice
+      expect(r1[0].id).toBe('m1');
+      expect(r2[0].id).toBe('m1');
+      expect(r3[0].id).toBe('m2');
+      expect(r4[0].id).toBe('m2');
+    });
+    it('should treat playCount=0 or missing as 1 (#188)', () => {
+      const widgets = [
+        { id: 'm1', type: 'image', duration: 10, parentWidgetId: 'sp1',
+          displayOrder: 1, cyclePlayback: true, playCount: 0, isRandom: false },
+        { id: 'm2', type: 'image', duration: 10, parentWidgetId: 'sp1',
+          displayOrder: 2, cyclePlayback: true, isRandom: false },
+      ];
+      renderer._subPlaylistCycleIndex = new Map();
+      const r1 = renderer._applyCyclePlayback(widgets);
+      const r2 = renderer._applyCyclePlayback(widgets);
+      // Should advance every cycle (playCount defaults to 1)
+      expect(r1[0].id).toBe('m1');
+      expect(r2[0].id).toBe('m2');
+    });
+    it('should repeat playCount=3 times before advancing (#188)', () => {
+      const widgets = [
+        { id: 'm1', type: 'image', duration: 10, parentWidgetId: 'sp1',
+          displayOrder: 1, cyclePlayback: true, playCount: 3, isRandom: false },
+        { id: 'm2', type: 'image', duration: 10, parentWidgetId: 'sp1',
+          displayOrder: 2, cyclePlayback: true, playCount: 3, isRandom: false },
+      ];
+      renderer._subPlaylistCycleIndex = new Map();
+      const results = [];
+      for (let i = 0; i < 6; i++) {
+        results.push(renderer._applyCyclePlayback(widgets)[0].id);
+      }
+      // m1 x3, m2 x3
+      expect(results).toEqual(['m1', 'm1', 'm1', 'm2', 'm2', 'm2']);
+    });
   });
   // ── Medium-Priority Spec Compliance ────────────────────────────────
@@ -2247,4 +2518,184 @@ describe('RendererLite', () => {
       expect(layout.regions[0].widgets[0].commands).toEqual([]);
     });
   });
+  describe('Canvas Regions (#186)', () => {
+    it('should parse region with type="canvas" as isCanvas', () => {
+      const xlf = `
+        <layout width="1920" height="1080" duration="60">
+          <region id="r1" type="canvas" width="1920" height="1080" top="0" left="0">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <options><uri>img1.png</uri></options>
+            </media>
+            <media id="m2" type="image" duration="15" fileId="2">
+              <options><uri>img2.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+      const layout = renderer.parseXlf(xlf);
+      expect(layout.regions).toHaveLength(1);
+      expect(layout.regions[0].isCanvas).toBe(true);
+      expect(layout.regions[0].widgets).toHaveLength(2);
+    });
+    it('should auto-detect canvas from type="global" widget', () => {
+      const xlf = `
+        <layout width="1920" height="1080" duration="60">
+          <region id="r1" width="1920" height="1080" top="0" left="0">
+            <media id="m1" type="global" duration="30" fileId="1">
+              <options></options>
+            </media>
+          </region>
+        </layout>
+      `;
+      const layout = renderer.parseXlf(xlf);
+      expect(layout.regions[0].isCanvas).toBe(true);
+    });
+    it('should NOT mark normal regions as canvas', () => {
+      const xlf = `
+        <layout width="1920" height="1080" duration="60">
+          <region id="r1" width="1920" height="1080" top="0" left="0">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <options><uri>test.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+      const layout = renderer.parseXlf(xlf);
+      expect(layout.regions[0].isCanvas).toBe(false);
+    });
+    it('should store isCanvas flag in region state after createRegion', async () => {
+      const regionConfig = {
+        id: 'r1',
+        width: 1920,
+        height: 1080,
+        top: 0,
+        left: 0,
+        zindex: 0,
+        isCanvas: true,
+        widgets: []
+      };
+      await renderer.createRegion(regionConfig);
+      const region = renderer.regions.get('r1');
+      expect(region.isCanvas).toBe(true);
+    });
+    it('should render all canvas widgets simultaneously', async () => {
+      vi.useFakeTimers();
+      const xlf = `
+        <layout width="1920" height="1080" duration="60">
+          <region id="r1" type="canvas" width="1920" height="1080" top="0" left="0">
+            <media id="m1" type="image" duration="10" fileId="1">
+              <options><uri>img1.png</uri></options>
+            </media>
+            <media id="m2" type="image" duration="15" fileId="2">
+              <options><uri>img2.png</uri></options>
+            </media>
+            <media id="m3" type="image" duration="20" fileId="3">
+              <options><uri>img3.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+      const renderPromise = renderer.renderLayout(xlf, 1);
+      await vi.advanceTimersByTimeAsync(5000);
+      const region = renderer.regions.get('r1');
+      expect(region).toBeDefined();
+      expect(region.isCanvas).toBe(true);
+      // All 3 widgets should be visible simultaneously
+      let visibleCount = 0;
+      for (const [, el] of region.widgetElements) {
+        if (el.style.visibility === 'visible') visibleCount++;
+      }
+      expect(visibleCount).toBe(3);
+      // Clean up
+      await vi.advanceTimersByTimeAsync(60000);
+      await renderPromise;
+      vi.useRealTimers();
+    });
+    it('should not cycle canvas region widgets', async () => {
+      vi.useFakeTimers();
+      const xlf = `
+        <layout width="1920" height="1080" duration="60">
+          <region id="r1" type="canvas" width="1920" height="1080" top="0" left="0">
+            <media id="m1" type="image" duration="5" fileId="1">
+              <options><uri>img1.png</uri></options>
+            </media>
+            <media id="m2" type="image" duration="5" fileId="2">
+              <options><uri>img2.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+      const renderPromise = renderer.renderLayout(xlf, 1);
+      await vi.advanceTimersByTimeAsync(2000);
+      const region = renderer.regions.get('r1');
+      // After widget durations expire, both should still be visible (no cycling)
+      await vi.advanceTimersByTimeAsync(10000);
+      let visibleCount = 0;
+      for (const [, el] of region.widgetElements) {
+        if (el.style.visibility === 'visible') visibleCount++;
+      }
+      expect(visibleCount).toBe(2);
+      // Clean up
+      await vi.advanceTimersByTimeAsync(60000);
+      await renderPromise;
+      vi.useRealTimers();
+    });
+    it('should mark canvas region complete after max widget duration', async () => {
+      vi.useFakeTimers();
+      const xlf = `
+        <layout width="1920" height="1080">
+          <region id="r1" type="canvas" width="1920" height="1080" top="0" left="0">
+            <media id="m1" type="image" duration="5" fileId="1">
+              <options><uri>img1.png</uri></options>
+            </media>
+            <media id="m2" type="image" duration="10" fileId="2">
+              <options><uri>img2.png</uri></options>
+            </media>
+          </region>
+        </layout>
+      `;
+      const renderPromise = renderer.renderLayout(xlf, 1);
+      await vi.advanceTimersByTimeAsync(2000);
+      const region = renderer.regions.get('r1');
+      expect(region.complete).toBe(false);
+      // Advance past max widget duration (10s)
+      await vi.advanceTimersByTimeAsync(9000);
+      expect(region.complete).toBe(true);
+      // Clean up
+      await vi.advanceTimersByTimeAsync(60000);
+      await renderPromise;
+      vi.useRealTimers();
+    });
+  });
 });

package/vitest.config.js CHANGED Viewed

@@ -4,5 +4,14 @@ 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,
+      '@xiboplayer/schedule': new URL('../schedule/src/index.js', import.meta.url).pathname,
+      '@xiboplayer/utils': new URL('../utils/src/index.js', import.meta.url).pathname
+    }
   }
 });