@xiboplayer/renderer 0.6.2 → 0.6.3

package/package.json

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

package/src/layout.js

@@ -303,10 +303,16 @@ window.Transitions = {
     const direction = transitionConfig.direction || 'N';
 
     switch (type) {
+      case 'fade':
+        return isIn ? this.fadeIn(element, duration) : this.fadeOut(element, duration);
       case 'fadein':
         return isIn ? this.fadeIn(element, duration) : null;
       case 'fadeout':
         return isIn ? null : this.fadeOut(element, duration);
+      case 'fly':
+        return isIn
+          ? this.flyIn(element, duration, direction, regionWidth, regionHeight)
+          : this.flyOut(element, duration, direction, regionWidth, regionHeight);
       case 'flyin':
         return isIn ? this.flyIn(element, duration, direction, regionWidth, regionHeight) : null;
       case 'flyout':

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

@@ -0,0 +1,203 @@
+/**
+ * RendererLite Interactive Control (XIC) Tests
+ *
+ * Tests for the XIC event handlers: interactiveTrigger, widgetExpire,
+ * widgetExtendDuration, widgetSetDuration.
+ */
+
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { RendererLite } from './renderer-lite.js';
+
+/**
+ * Create a minimal RendererLite instance with stubbed DOM and methods.
+ */
+function createRenderer() {
+  const container = document.createElement('div');
+  const renderer = new RendererLite(
+    { cmsUrl: 'http://localhost', hardwareKey: 'test' },
+    container,
+    { logLevel: 'silent' }
+  );
+
+  // Stub methods that touch DOM or async operations
+  renderer.renderWidget = vi.fn();
+  renderer.stopWidget = vi.fn();
+  renderer.checkLayoutComplete = vi.fn();
+  renderer._startRegionCycle = vi.fn();
+  renderer.navigateToWidget = vi.fn();
+
+  return renderer;
+}
+
+/**
+ * Populate renderer with a fake region containing widgets.
+ */
+function addRegion(renderer, regionId, widgets) {
+  renderer.regions.set(regionId, {
+    element: document.createElement('div'),
+    config: { id: regionId },
+    widgets,
+    currentIndex: 0,
+    timer: null,
+    width: 100,
+    height: 100,
+    complete: false,
+    isDrawer: false,
+    widgetElements: new Map()
+  });
+}
+
+describe('RendererLite XIC', () => {
+  let renderer;
+
+  beforeEach(() => {
+    renderer = createRenderer();
+    addRegion(renderer, 'region-1', [
+      { id: 'w1', type: 'text', duration: 10, options: {} },
+      { id: 'w2', type: 'image', duration: 20, options: {} },
+      { id: 'w3', type: 'video', duration: 30, options: {} }
+    ]);
+  });
+
+  describe('_findRegionByWidgetId', () => {
+    it('should find a widget in main regions', () => {
+      const result = renderer._findRegionByWidgetId('w2');
+      expect(result).not.toBeNull();
+      expect(result.regionId).toBe('region-1');
+      expect(result.widgetIndex).toBe(1);
+      expect(result.widget.id).toBe('w2');
+      expect(result.regionMap).toBe(renderer.regions);
+    });
+
+    it('should return null for unknown widget', () => {
+      const result = renderer._findRegionByWidgetId('w-unknown');
+      expect(result).toBeNull();
+    });
+
+    it('should find a widget in overlay regions', () => {
+      const overlayRegions = new Map();
+      overlayRegions.set('overlay-r1', {
+        element: document.createElement('div'),
+        config: { id: 'overlay-r1' },
+        widgets: [{ id: 'ow1', type: 'text', duration: 5, options: {} }],
+        currentIndex: 0,
+        timer: null,
+        width: 50,
+        height: 50,
+        complete: false,
+        isDrawer: false,
+        widgetElements: new Map()
+      });
+      renderer.activeOverlays.set(100, { regions: overlayRegions });
+
+      const result = renderer._findRegionByWidgetId('ow1');
+      expect(result).not.toBeNull();
+      expect(result.regionId).toBe('overlay-r1');
+      expect(result.widgetIndex).toBe(0);
+      expect(result.regionMap).toBe(overlayRegions);
+    });
+  });
+
+  describe('_handleInteractiveTrigger', () => {
+    it('should call navigateToWidget when target exists', () => {
+      renderer.emit('interactiveTrigger', { targetId: 'w2', triggerCode: 'btn1' });
+      expect(renderer.navigateToWidget).toHaveBeenCalledWith('w2');
+    });
+
+    it('should not call navigateToWidget when target is unknown', () => {
+      renderer.emit('interactiveTrigger', { targetId: 'w-missing', triggerCode: 'btn1' });
+      expect(renderer.navigateToWidget).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('_handleWidgetExpire', () => {
+    it('should clear timer, stop widget, and advance region', () => {
+      const region = renderer.regions.get('region-1');
+      region.timer = setTimeout(() => {}, 99999);
+      region.currentIndex = 0;
+
+      renderer.emit('widgetExpire', { widgetId: 'w1' });
+
+      expect(region.timer).toBeNull();
+      expect(renderer.stopWidget).toHaveBeenCalledWith('region-1', 0);
+      expect(renderer._startRegionCycle).toHaveBeenCalled();
+    });
+
+    it('should do nothing for unknown widget', () => {
+      renderer.emit('widgetExpire', { widgetId: 'w-missing' });
+      expect(renderer.stopWidget).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('_handleWidgetExtendDuration', () => {
+    it('should clear existing timer and re-arm with extended duration', () => {
+      vi.useFakeTimers();
+      const region = renderer.regions.get('region-1');
+      region.timer = setTimeout(() => {}, 99999);
+
+      renderer.emit('widgetExtendDuration', { widgetId: 'w1', duration: 15 });
+
+      // Timer should be re-armed (not null)
+      expect(region.timer).not.toBeNull();
+      // stopWidget should NOT have been called yet (timer hasn't fired)
+      expect(renderer.stopWidget).not.toHaveBeenCalled();
+
+      // Advance time to fire the new timer
+      vi.advanceTimersByTime(15000);
+      expect(renderer.stopWidget).toHaveBeenCalledWith('region-1', 0);
+
+      vi.useRealTimers();
+    });
+
+    it('should do nothing for unknown widget', () => {
+      renderer.emit('widgetExtendDuration', { widgetId: 'w-missing', duration: 10 });
+      expect(renderer.stopWidget).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('_handleWidgetSetDuration', () => {
+    it('should clear existing timer and set absolute duration', () => {
+      vi.useFakeTimers();
+      const region = renderer.regions.get('region-1');
+      region.timer = setTimeout(() => {}, 99999);
+
+      renderer.emit('widgetSetDuration', { widgetId: 'w2', duration: 5 });
+
+      expect(region.timer).not.toBeNull();
+      expect(renderer.stopWidget).not.toHaveBeenCalled();
+
+      vi.advanceTimersByTime(5000);
+      // w2 is at index 1, but the region's currentIndex determines what gets stopped
+      expect(renderer.stopWidget).toHaveBeenCalled();
+
+      vi.useRealTimers();
+    });
+
+    it('should do nothing for unknown widget', () => {
+      renderer.emit('widgetSetDuration', { widgetId: 'w-missing', duration: 10 });
+      expect(renderer.stopWidget).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('_advanceRegion', () => {
+    it('should increment currentIndex and call _startRegionCycle', () => {
+      const region = renderer.regions.get('region-1');
+      region.currentIndex = 0;
+
+      renderer._advanceRegion('region-1', renderer.regions);
+
+      expect(region.currentIndex).toBe(1);
+      expect(renderer._startRegionCycle).toHaveBeenCalled();
+    });
+
+    it('should wrap around at end of widget list', () => {
+      const region = renderer.regions.get('region-1');
+      region.currentIndex = 2; // last widget
+
+      renderer._advanceRegion('region-1', renderer.regions);
+
+      expect(region.currentIndex).toBe(0);
+      expect(renderer._startRegionCycle).toHaveBeenCalled();
+    });
+  });
+});

package/src/renderer-lite.js

@@ -47,7 +47,7 @@ import { LayoutPool } from './layout-pool.js';
 /**
  * Transition utilities for widget animations
  */
-const Transitions = {
+export const Transitions = {
   /**
    * Apply fade in transition
    */
@@ -162,11 +162,15 @@ const Transitions = {
 
     switch (type) {
       case 'fade':
+        return isIn ? this.fadeIn(element, duration) : this.fadeOut(element, duration);
       case 'fadein':
         return isIn ? this.fadeIn(element, duration) : null;
       case 'fadeout':
         return isIn ? null : this.fadeOut(element, duration);
       case 'fly':
+        return isIn
+          ? this.flyIn(element, duration, direction, regionWidth, regionHeight)
+          : this.flyOut(element, duration, direction, regionWidth, regionHeight);
       case 'flyin':
         return isIn ? this.flyIn(element, duration, direction, regionWidth, regionHeight) : null;
       case 'flyout':
@@ -239,6 +243,12 @@ export class RendererLite {
     // Setup container styles
     this.setupContainer();
 
+    // Interactive Control (XIC) event handlers
+    this.emitter.on('interactiveTrigger', (data) => this._handleInteractiveTrigger(data));
+    this.emitter.on('widgetExpire', (data) => this._handleWidgetExpire(data));
+    this.emitter.on('widgetExtendDuration', (data) => this._handleWidgetExtendDuration(data));
+    this.emitter.on('widgetSetDuration', (data) => this._handleWidgetSetDuration(data));
+
     this.log.info('Initialized');
   }
 
@@ -411,6 +421,7 @@ export class RendererLite {
     const regionAndDrawerEls = layoutEl.querySelectorAll(':scope > region, :scope > drawer');
     for (const regionEl of regionAndDrawerEls) {
       const isDrawer = regionEl.tagName === 'drawer';
+      const regionType = regionEl.getAttribute('type') || null;
       const region = {
         id: regionEl.getAttribute('id'),
         width: parseInt(regionEl.getAttribute('width') || '0'),
@@ -426,6 +437,7 @@ export class RendererLite {
         transitionDirection: null,
         loop: true, // Default: cycle widgets. Spec: loop=0 means single media stays visible
         isDrawer,
+        isCanvas: regionType === 'canvas', // Canvas regions render all widgets simultaneously
         widgets: []
       };
 
@@ -468,11 +480,21 @@ export class RendererLite {
         region.widgets.push(widget);
       }
 
+      // Auto-detect canvas from CMS "global" widget (CMS bundles canvas sub-widgets
+      // into a single type="global" media element in the XLF)
+      if (!region.isCanvas && region.widgets.some(w => w.type === 'global')) {
+        region.isCanvas = true;
+      }
+
       layout.regions.push(region);
 
       if (isDrawer) {
         this.log.info(`Parsed drawer: id=${region.id} with ${region.widgets.length} widgets`);
       }
+
+      if (region.isCanvas) {
+        this.log.info(`Parsed canvas region: id=${region.id} with ${region.widgets.length} widgets (all render simultaneously)`);
+      }
     }
 
     // Calculate layout duration if not specified (duration=0)
@@ -858,6 +880,133 @@ export class RendererLite {
     }
   }
 
+  // ── Interactive Control (XIC) ─────────────────────────────────────
+
+  /**
+   * Find a region containing a widget by widget ID.
+   * Searches main regions first, then overlay regions.
+   * @param {string} widgetId
+   * @returns {{ regionId: string, region: Object, widget: Object, widgetIndex: number, regionMap: Map }|null}
+   */
+  _findRegionByWidgetId(widgetId) {
+    // Search main regions
+    for (const [regionId, region] of this.regions) {
+      const widgetIndex = region.widgets.findIndex(w => w.id === widgetId);
+      if (widgetIndex !== -1) {
+        return { regionId, region, widget: region.widgets[widgetIndex], widgetIndex, regionMap: this.regions };
+      }
+    }
+    // Search overlay regions
+    for (const overlay of this.activeOverlays.values()) {
+      if (!overlay.regions) continue;
+      for (const [regionId, region] of overlay.regions) {
+        const widgetIndex = region.widgets.findIndex(w => w.id === widgetId);
+        if (widgetIndex !== -1) {
+          return { regionId, region, widget: region.widgets[widgetIndex], widgetIndex, regionMap: overlay.regions };
+        }
+      }
+    }
+    return null;
+  }
+
+  /**
+   * Advance a region to its next widget using the standard cycle.
+   * @param {string} regionId
+   * @param {Map} regionMap - The Map containing this region (main or overlay)
+   */
+  _advanceRegion(regionId, regionMap) {
+    const region = regionMap.get(regionId);
+    if (!region) return;
+    region.currentIndex = (region.currentIndex + 1) % region.widgets.length;
+    const isMain = regionMap === this.regions;
+    this._startRegionCycle(
+      region, regionId,
+      isMain ? (rid, idx) => this.renderWidget(rid, idx) : (rid, idx) => this.renderWidget(rid, idx),
+      isMain ? (rid, idx) => this.stopWidget(rid, idx) : (rid, idx) => this.stopWidget(rid, idx),
+      isMain ? () => this.checkLayoutComplete() : undefined
+    );
+  }
+
+  /**
+   * Handle interactiveTrigger XIC event — navigate to a target widget.
+   * @param {{ targetId: string, triggerCode: string }} data
+   */
+  _handleInteractiveTrigger({ targetId, triggerCode }) {
+    this.log.info(`XIC interactiveTrigger: target=${targetId} code=${triggerCode}`);
+    const found = this._findRegionByWidgetId(targetId);
+    if (found) {
+      this.navigateToWidget(targetId);
+    } else {
+      this.log.warn(`XIC interactiveTrigger: widget ${targetId} not found`);
+    }
+  }
+
+  /**
+   * Handle widgetExpire XIC event — immediately expire a widget and advance.
+   * @param {{ widgetId: string }} data
+   */
+  _handleWidgetExpire({ widgetId }) {
+    const found = this._findRegionByWidgetId(widgetId);
+    if (!found) {
+      this.log.warn(`XIC widgetExpire: widget ${widgetId} not found`);
+      return;
+    }
+    const { regionId, region, widgetIndex, regionMap } = found;
+    this.log.info(`XIC widgetExpire: widget=${widgetId} region=${regionId}`);
+    if (region.timer) {
+      clearTimeout(region.timer);
+      region.timer = null;
+    }
+    this.stopWidget(regionId, widgetIndex);
+    this._advanceRegion(regionId, regionMap);
+  }
+
+  /**
+   * Handle widgetExtendDuration XIC event — extend the current widget timer.
+   * @param {{ widgetId: string, duration: number }} data - duration in seconds (added to remaining)
+   */
+  _handleWidgetExtendDuration({ widgetId, duration }) {
+    const found = this._findRegionByWidgetId(widgetId);
+    if (!found) {
+      this.log.warn(`XIC widgetExtendDuration: widget ${widgetId} not found`);
+      return;
+    }
+    const { regionId, region } = found;
+    this.log.info(`XIC widgetExtendDuration: widget=${widgetId} +${duration}s`);
+    if (region.timer) {
+      clearTimeout(region.timer);
+      region.timer = null;
+    }
+    // Re-arm timer with the extended duration
+    region.timer = setTimeout(() => {
+      this.stopWidget(regionId, region.currentIndex);
+      this._advanceRegion(regionId, found.regionMap);
+    }, duration * 1000);
+  }
+
+  /**
+   * Handle widgetSetDuration XIC event — replace the widget timer with an absolute duration.
+   * @param {{ widgetId: string, duration: number }} data - duration in seconds (absolute)
+   */
+  _handleWidgetSetDuration({ widgetId, duration }) {
+    const found = this._findRegionByWidgetId(widgetId);
+    if (!found) {
+      this.log.warn(`XIC widgetSetDuration: widget ${widgetId} not found`);
+      return;
+    }
+    const { regionId, region } = found;
+    this.log.info(`XIC widgetSetDuration: widget=${widgetId} ${duration}s`);
+    if (region.timer) {
+      clearTimeout(region.timer);
+      region.timer = null;
+    }
+    // Set timer with the absolute duration
+    region.timer = setTimeout(() => {
+      this.stopWidget(regionId, region.currentIndex);
+      this._advanceRegion(regionId, found.regionMap);
+    }, duration * 1000);
+  }
+
   /**
    * Navigate to a specific widget within a region (for navWidget actions)
    */
@@ -894,6 +1043,9 @@ export class RendererLite {
           if (region.isDrawer && nextIndex === 0) {
             region.element.style.display = 'none';
             this.log.info(`Drawer region ${regionId} hidden (cycle complete)`);
+          } else if (region.isDrawer) {
+            // Continue cycling through remaining drawer widgets (will hide on wrap to 0)
+            this.navigateToWidget(region.widgets[nextIndex].id);
           } else {
             this.startRegion(regionId);
           }
@@ -1176,6 +1328,7 @@ export class RendererLite {
       height: regionConfig.height * sf,
       complete: false, // Track if region has played all widgets once
       isDrawer: regionConfig.isDrawer || false,
+      isCanvas: regionConfig.isCanvas || false, // Canvas regions render all widgets simultaneously
       widgetElements: new Map() // widgetId -> DOM element (for element reuse)
     });
   }
@@ -1449,13 +1602,15 @@ export class RendererLite {
       region.element.appendChild(element);
     }
 
-    // Hide all other widgets in region
+    // Hide all other widgets in region (skip for canvas — all widgets stay visible)
     // Cancel fill:forwards animations first — they override inline styles
-    for (const [widgetId, widgetEl] of region.widgetElements) {
-      if (widgetId !== widget.id) {
-        widgetEl.getAnimations?.().forEach(a => a.cancel());
-        widgetEl.style.visibility = 'hidden';
-        widgetEl.style.opacity = '0';
+    if (!region.isCanvas) {
+      for (const [widgetId, widgetEl] of region.widgetElements) {
+        if (widgetId !== widget.id) {
+          widgetEl.getAnimations?.().forEach(a => a.cancel());
+          widgetEl.style.visibility = 'hidden';
+          widgetEl.style.opacity = '0';
+        }
       }
     }
 
@@ -1698,10 +1853,17 @@ export class RendererLite {
         const idx = Math.floor(Math.random() * groupWidgets.length);
         selectedWidget = groupWidgets[idx];
       } else {
-        // Round-robin based on cycle index
-        const cycleIdx = this._subPlaylistCycleIndex.get(groupId) || 0;
-        selectedWidget = groupWidgets[cycleIdx % groupWidgets.length];
-        this._subPlaylistCycleIndex.set(groupId, cycleIdx + 1);
+        // Round-robin based on cycle index, respecting playCount
+        const state = this._subPlaylistCycleIndex.get(groupId) || { widgetIdx: 0, playsDone: 0 };
+        selectedWidget = groupWidgets[state.widgetIdx % groupWidgets.length];
+        const effectivePlayCount = selectedWidget.playCount || 1;
+
+        state.playsDone++;
+        if (state.playsDone >= effectivePlayCount) {
+          state.widgetIdx++;
+          state.playsDone = 0;
+        }
+        this._subPlaylistCycleIndex.set(groupId, state);
       }
 
       this.log.info(`Sub-playlist cycle: group ${groupId} selected widget ${selectedWidget.id} (${groupWidgets.length} in group)`);
@@ -1722,6 +1884,13 @@ export class RendererLite {
   _startRegionCycle(region, regionId, showFn, hideFn, onCycleComplete) {
     if (!region || region.widgets.length === 0) return;
 
+    // Canvas regions: render ALL widgets simultaneously (stacked), no cycling.
+    // Duration = max widget duration; region completes when the longest widget expires.
+    if (region.isCanvas) {
+      this._startCanvasRegion(region, regionId, showFn, onCycleComplete);
+      return;
+    }
+
     // Non-looping region with a single widget: show it and stay (spec: loop=0)
     if (region.widgets.length === 1) {
       showFn(regionId, 0);
@@ -1744,6 +1913,37 @@ export class RendererLite {
     playNext();
   }
 
+  /**
+   * Start a canvas region — render all widgets simultaneously (stacked).
+   * Canvas regions show every widget at once rather than cycling through them.
+   * The region duration is the maximum widget duration.
+   * @param {Object} region - Region state
+   * @param {string} regionId - Region ID
+   * @param {Function} showFn - Show widget function (regionId, widgetIndex)
+   * @param {Function} onCycleComplete - Callback when region completes
+   */
+  _startCanvasRegion(region, regionId, showFn, onCycleComplete) {
+    // Show all widgets at once
+    for (let i = 0; i < region.widgets.length; i++) {
+      showFn(regionId, i);
+    }
+
+    // Mark region as complete after max widget duration
+    const maxDuration = Math.max(...region.widgets.map(w => w.duration)) * 1000;
+    if (maxDuration > 0) {
+      region.timer = setTimeout(() => {
+        if (!region.complete) {
+          region.complete = true;
+          onCycleComplete?.();
+        }
+      }, maxDuration);
+    } else {
+      // No duration — immediately complete
+      region.complete = true;
+      onCycleComplete?.();
+    }
+  }
+
   /**
    * Handle widget cycle end — shared logic for timer-based and event-based cycling
    */
@@ -2947,6 +3147,7 @@ export class RendererLite {
           width: regionConfig.width * sf,
           height: regionConfig.height * sf,
           complete: false,
+          isCanvas: regionConfig.isCanvas || false,
           widgetElements: new Map()
         });
       }

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
     }
   }
 });