unified-video-framework 1.4.354 → 1.4.356

package/packages/web/dist/react/types/FlashNewsTickerTypes.d.ts

@@ -1,15 +1,30 @@
 export interface FlashNewsTickerItem {
     id: string;
     text: string;
+    html?: string;
     priority?: number;
     startTime?: number;
     endTime?: number;
     metadata?: Record<string, any>;
 }
+export interface TickerDisplayConfig {
+    items: FlashNewsTickerItem[];
+    height?: number;
+    backgroundColor?: string;
+    textColor?: string;
+    fontSize?: number;
+    fontWeight?: number | string;
+    speed?: number;
+    gap?: number;
+    separator?: string;
+    offset?: number;
+}
 export interface FlashNewsTickerConfig {
     enabled?: boolean;
-    items: FlashNewsTickerItem[];
+    items?: FlashNewsTickerItem[];
     position?: 'top' | 'bottom' | 'both';
+    topConfig?: TickerDisplayConfig;
+    bottomConfig?: TickerDisplayConfig;
     height?: number;
     backgroundColor?: string;
     textColor?: string;

package/packages/web/dist/react/types/FlashNewsTickerTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FlashNewsTickerTypes.d.ts","sourceRoot":"","sources":["../../../src/react/types/FlashNewsTickerTypes.ts"],"names":[],"mappings":"AAUA,MAAM,WAAW,mBAAmB;IAElC,EAAE,EAAE,MAAM,CAAC;IAGX,IAAI,EAAE,MAAM,CAAC;IAGb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAChC;AAKD,MAAM,WAAW,qBAAqB;IAEpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAGlB,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAG7B,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IAKrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,eAAe,CAAC,EAAE,MAAM,CAAC;IAGzB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAK7B,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,GAAG,CAAC,EAAE,MAAM,CAAC;IAGb,IAAI,CAAC,EAAE,OAAO,CAAC;IAGf,SAAS,CAAC,EAAE,MAAM,CAAC;IAKnB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAKD,MAAM,WAAW,kBAAkB;IAEjC,IAAI,EAAE,MAAM,IAAI,CAAC;IAGjB,IAAI,EAAE,MAAM,IAAI,CAAC;IAGjB,SAAS,EAAE,MAAM,OAAO,CAAC;IAGzB,WAAW,EAAE,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,IAAI,CAAC;IAGpD,OAAO,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAG7C,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAGrC,UAAU,EAAE,MAAM,IAAI,CAAC;IAGvB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,qBAAqB,CAAC,KAAK,IAAI,CAAC;IAG/D,KAAK,EAAE,MAAM,IAAI,CAAC;IAGlB,MAAM,EAAE,MAAM,IAAI,CAAC;IAGnB,QAAQ,EAAE,MAAM,OAAO,CAAC;CACzB"}
+{"version":3,"file":"FlashNewsTickerTypes.d.ts","sourceRoot":"","sources":["../../../src/react/types/FlashNewsTickerTypes.ts"],"names":[],"mappings":"AAUA,MAAM,WAAW,mBAAmB;IAElC,EAAE,EAAE,MAAM,CAAC;IAGX,IAAI,EAAE,MAAM,CAAC;IAOb,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAChC;AAKD,MAAM,WAAW,mBAAmB;IAElC,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAK7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,eAAe,CAAC,EAAE,MAAM,CAAC;IAGzB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAK7B,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,GAAG,CAAC,EAAE,MAAM,CAAC;IAGb,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAKD,MAAM,WAAW,qBAAqB;IAEpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAGlB,KAAK,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAG9B,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IAGrC,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAGhC,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAKnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,eAAe,CAAC,EAAE,MAAM,CAAC;IAGzB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAK7B,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,GAAG,CAAC,EAAE,MAAM,CAAC;IAGb,IAAI,CAAC,EAAE,OAAO,CAAC;IAGf,SAAS,CAAC,EAAE,MAAM,CAAC;IAKnB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAKD,MAAM,WAAW,kBAAkB;IAEjC,IAAI,EAAE,MAAM,IAAI,CAAC;IAGjB,IAAI,EAAE,MAAM,IAAI,CAAC;IAGjB,SAAS,EAAE,MAAM,OAAO,CAAC;IAGzB,WAAW,EAAE,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,IAAI,CAAC;IAGpD,OAAO,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAG7C,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAGrC,UAAU,EAAE,MAAM,IAAI,CAAC;IAGvB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,qBAAqB,CAAC,KAAK,IAAI,CAAC;IAG/D,KAAK,EAAE,MAAM,IAAI,CAAC;IAGlB,MAAM,EAAE,MAAM,IAAI,CAAC;IAGnB,QAAQ,EAAE,MAAM,OAAO,CAAC;CACzB"}

package/packages/web/src/WebPlayer.ts

@@ -2281,20 +2281,46 @@ export class WebPlayer extends BasePlayer {
     this.flashTickerTopElement = null;
     this.flashTickerBottomElement = null;
 
-    if (!config.enabled || !config.items || config.items.length === 0) {
+    if (!config.enabled) {
       return;
     }
 
-    // Create top ticker if needed
-    if (config.position === 'top' || config.position === 'both') {
-      this.flashTickerTopElement = this.createTickerElement(config, 'top');
-      this.flashTickerContainer.appendChild(this.flashTickerTopElement);
+    // Handle 'both' position with separate configs
+    if (config.position === 'both') {
+      // Create top ticker with topConfig or fallback to main config
+      if (config.topConfig && config.topConfig.items && config.topConfig.items.length > 0) {
+        const topConfig = { ...config, ...config.topConfig };
+        this.flashTickerTopElement = this.createTickerElement(topConfig, 'top');
+        this.flashTickerContainer.appendChild(this.flashTickerTopElement);
+      } else if (config.items && config.items.length > 0) {
+        this.flashTickerTopElement = this.createTickerElement(config, 'top');
+        this.flashTickerContainer.appendChild(this.flashTickerTopElement);
+      }
+
+      // Create bottom ticker with bottomConfig or fallback to main config
+      if (config.bottomConfig && config.bottomConfig.items && config.bottomConfig.items.length > 0) {
+        const bottomConfig = { ...config, ...config.bottomConfig };
+        this.flashTickerBottomElement = this.createTickerElement(bottomConfig, 'bottom');
+        this.flashTickerContainer.appendChild(this.flashTickerBottomElement);
+      } else if (config.items && config.items.length > 0) {
+        this.flashTickerBottomElement = this.createTickerElement(config, 'bottom');
+        this.flashTickerContainer.appendChild(this.flashTickerBottomElement);
+      }
     }
+    // Handle single position (top or bottom)
+    else {
+      if (!config.items || config.items.length === 0) {
+        return;
+      }
 
-    // Create bottom ticker if needed
-    if (config.position === 'bottom' || config.position === 'both' || !config.position) {
-      this.flashTickerBottomElement = this.createTickerElement(config, 'bottom');
-      this.flashTickerContainer.appendChild(this.flashTickerBottomElement);
+      if (config.position === 'top') {
+        this.flashTickerTopElement = this.createTickerElement(config, 'top');
+        this.flashTickerContainer.appendChild(this.flashTickerTopElement);
+      } else {
+        // Default to bottom
+        this.flashTickerBottomElement = this.createTickerElement(config, 'bottom');
+        this.flashTickerContainer.appendChild(this.flashTickerBottomElement);
+      }
     }
   }
 
@@ -2332,16 +2358,46 @@ export class WebPlayer extends BasePlayer {
       padding-left: 100%;
     `;
 
+    // Calculate responsive font size based on container width
+    const calculateResponsiveFontSize = (): number => {
+      const containerWidth = this.container?.offsetWidth || 1920;
+      const baseFontSize = config.fontSize || 14;
+
+      // Scale font size based on container width
+      // Base: 14px at 1920px width
+      if (containerWidth < 768) {
+        // Mobile: smaller font
+        return Math.max(baseFontSize * 0.8, 12);
+      } else if (containerWidth < 1280) {
+        // Tablet: slightly smaller
+        return Math.max(baseFontSize * 0.9, 13);
+      }
+      // Desktop: use configured size
+      return baseFontSize;
+    };
+
+    const responsiveFontSize = calculateResponsiveFontSize();
+
     // Render items multiple times for continuous seamless loop
     const renderItems = () => {
+      if (!config.items) return;
       config.items.forEach((item) => {
         const span = document.createElement('span');
-        span.textContent = item.text;
+
+        // Support HTML content for rich formatting (e.g., colored "Breaking:")
+        if (item.html) {
+          span.innerHTML = item.html;
+        } else {
+          span.textContent = item.text;
+        }
+
         span.style.cssText = `
           color: ${config.textColor || '#ffffff'};
-          font-size: ${config.fontSize || 14}px;
+          font-size: ${responsiveFontSize}px;
           font-weight: ${config.fontWeight || 600};
           margin-right: ${config.gap || 100}px;
+          display: inline-flex;
+          align-items: center;
         `;
         track.appendChild(span);
 
@@ -2351,7 +2407,7 @@ export class WebPlayer extends BasePlayer {
           sep.textContent = config.separator;
           sep.style.cssText = `
             color: ${config.textColor || '#ffffff'};
-            font-size: ${config.fontSize || 14}px;
+            font-size: ${responsiveFontSize}px;
             opacity: 0.5;
             margin: 0 8px;
           `;
@@ -2385,6 +2441,9 @@ export class WebPlayer extends BasePlayer {
 
   private calculateTickerDuration(config: FlashNewsTickerConfig): number {
     const speed = config.speed || 50;
+    if (!config.items || config.items.length === 0) {
+      return 15; // Default minimum duration
+    }
     const itemsLength = config.items.reduce((acc, item) => acc + item.text.length, 0);
     const avgCharWidth = 10; // Approximate pixel width per character
     const gap = config.gap || 100;

package/packages/web/src/react/types/FlashNewsTickerTypes.ts

@@ -15,6 +15,13 @@ export interface FlashNewsTickerItem {
   /** Text content to display */
   text: string;
 
+  /**
+   * HTML content to display (supports rich formatting like colors, bold, etc.)
+   * If provided, this takes precedence over 'text'
+   * Example: '<span style="color: red;">Breaking:</span> News content'
+   */
+  html?: string;
+
   /** Priority for ordering (higher = shown first). Default: 0 */
   priority?: number;
 
@@ -28,6 +35,45 @@ export interface FlashNewsTickerItem {
   metadata?: Record<string, any>;
 }
 
+/**
+ * Configuration for a single ticker (top or bottom)
+ */
+export interface TickerDisplayConfig {
+  /** Array of news items to display */
+  items: FlashNewsTickerItem[];
+
+  // Visual styling
+
+  /** Height of ticker in pixels. Default: 40 */
+  height?: number;
+
+  /** Background color with alpha. Default: 'rgba(0,0,0,0.7)' */
+  backgroundColor?: string;
+
+  /** Text color. Default: '#ffffff' */
+  textColor?: string;
+
+  /** Font size in pixels. Default: 14 */
+  fontSize?: number;
+
+  /** Font weight. Default: 600 */
+  fontWeight?: number | string;
+
+  // Animation
+
+  /** Animation speed in pixels per second. Default: 50 */
+  speed?: number;
+
+  /** Space between items in pixels. Default: 100 */
+  gap?: number;
+
+  /** Separator text between items. Default: ' • ' */
+  separator?: string;
+
+  /** Offset in pixels for safe area. Default: 0 for bottom, 10 for top */
+  offset?: number;
+}
+
 /**
  * Configuration for the flash news ticker
  */
@@ -35,13 +81,19 @@ export interface FlashNewsTickerConfig {
   /** Enable or disable the ticker. Default: true */
   enabled?: boolean;
 
-  /** Array of news items to display */
-  items: FlashNewsTickerItem[];
+  /** Array of news items to display (for backward compatibility when position is 'top' or 'bottom') */
+  items?: FlashNewsTickerItem[];
 
   /** Position on screen. Default: 'bottom' */
   position?: 'top' | 'bottom' | 'both';
 
-  // Visual styling
+  /** Configuration for top ticker (only used when position is 'both') */
+  topConfig?: TickerDisplayConfig;
+
+  /** Configuration for bottom ticker (only used when position is 'both') */
+  bottomConfig?: TickerDisplayConfig;
+
+  // Visual styling (applies to both if position is 'both' and no specific config provided)
 
   /** Height of ticker in pixels. Default: 40 */
   height?: number;
@@ -80,7 +132,7 @@ export interface FlashNewsTickerConfig {
   /** Top offset in pixels for safe area. Default: 10 */
   topOffset?: number;
 
-  /** Bottom offset in pixels for safe area. Default: 10 */
+  /** Bottom offset in pixels for safe area. Default: 0 */
   bottomOffset?: number;
 }