@xiboplayer/renderer 0.6.2 → 0.6.4

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
    */
@@ -1951,7 +2151,7 @@ export class RendererLite {
     // NOT update the current layout's duration with a different layout's video.
     const createdForLayoutId = this.currentLayoutId;
     const onLoadedMetadata = () => {
-      const videoDuration = Math.floor(video.duration);
+      const videoDuration = video.duration;
       this.log.info(`Video ${storedAs} duration detected: ${videoDuration}s`);
 
       if (widget.duration === 0 || widget.useDuration === 0) {
@@ -2947,6 +3147,7 @@ export class RendererLite {
           width: regionConfig.width * sf,
           height: regionConfig.height * sf,
           complete: false,
+          isCanvas: regionConfig.isCanvas || false,
           widgetElements: new Map()
         });
       }