@xiboplayer/renderer 0.6.2 → 0.6.4

package/src/renderer-lite.test.js

@@ -6,7 +6,7 @@
  */
 
 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;
@@ -964,48 +964,218 @@ 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);
+
+      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(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
+      );
 
-      // Import Transitions utility
-      const { Transitions } = await import('./renderer-lite.js');
-      const animation = Transitions.apply(element, transition, 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');
+    });
 
-      expect(animation).toBeTruthy();
-      expect(animation.effect.getKeyframes()).toEqual(
-        expect.arrayContaining([
-          expect.objectContaining({ opacity: '0' }),
-          expect.objectContaining({ opacity: '1' })
-        ])
+    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)');
     });
 
-    // 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 South', () => {
+      Transitions.apply(
+        element, { type: 'flyIn', duration: 500, direction: 'S' }, true, 1920, 1080
+      );
 
-      const transition = {
-        type: 'flyOut',
-        duration: 1500,
-        direction: 'S' // South
-      };
+      expect(capturedKeyframes[0].transform).toBe('translate(0px, 1080px)');
+    });
+
+    it('should apply fly in from West', () => {
+      Transitions.apply(
+        element, { type: 'flyIn', duration: 500, direction: 'W' }, true, 1920, 1080
+      );
+
+      expect(capturedKeyframes[0].transform).toBe('translate(-1920px, 0px)');
+    });
+
+    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)');
+
+      // SE
+      Transitions.apply(element, { type: 'flyIn', duration: 500, direction: 'SE' }, true, 1920, 1080);
+      expect(capturedKeyframes[0].transform).toBe('translate(1920px, 1080px)');
 
-      const { Transitions } = await import('./renderer-lite.js');
-      const animation = Transitions.apply(element, transition, false, 1920, 1080);
+      // 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>
+      `;
 
-      expect(animation).toBeTruthy();
-      const keyframes = animation.effect.getKeyframes();
+      const layout = renderer.parseXlf(xlf);
+      const widget = layout.regions[0].widgets[0];
 
-      // Should translate to south (positive Y)
-      expect(keyframes[1].transform).toContain('1080px'); // Height offset
+      expect(widget.transitions.in).toEqual({
+        type: 'fly',
+        duration: 500,
+        direction: 'E'
+      });
+      expect(widget.transitions.out).toEqual({
+        type: 'fly',
+        duration: 500,
+        direction: 'NW'
+      });
     });
   });
 
@@ -1789,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)', () => {
@@ -1897,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 ────────────────────────────────
@@ -2238,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

@@ -9,7 +9,9 @@ export default defineConfig({
     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
+      '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
     }
   }
 });