unified-video-framework 1.4.436 → 1.4.438

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

@@ -2,9 +2,68 @@
  * Flash News Ticker Types
  *
  * Type definitions for the flash news ticker feature that displays
- * scrolling text overlays on the video player.
+ * scrolling text overlays on the video player. Supports both simple
+ * tickers and broadcast-style breaking news banners.
  */
 
+/**
+ * Style variant for the ticker
+ * - 'simple': Basic scrolling ticker with single background
+ * - 'broadcast': Professional broadcast-style with header, body, globe, and LIVE badge
+ */
+export type TickerStyleVariant = 'simple' | 'broadcast';
+
+/**
+ * Broadcast style theme presets
+ */
+export type BroadcastTheme =
+  | 'breaking-red'      // Red header with blue body (classic breaking news)
+  | 'breaking-blue'     // Blue header with dark body
+  | 'alert-red'         // Full red theme for urgent alerts
+  | 'news-blue'         // Professional blue theme
+  | 'custom';           // Custom colors via headerColor/bodyColor
+
+/**
+ * Configuration for broadcast-style banner appearance
+ */
+export interface BroadcastStyleConfig {
+  /** Theme preset. Default: 'breaking-red' */
+  theme?: BroadcastTheme;
+
+  /** Header text (e.g., "BREAKING NEWS", "LIVE", "ALERT"). Default: 'BREAKING NEWS' */
+  headerText?: string;
+
+  /** Show the globe/world graphic on the left. Default: true */
+  showGlobe?: boolean;
+
+  /** Show LIVE badge indicator. Default: true */
+  showLiveBadge?: boolean;
+
+  /** Custom header background color (only used when theme is 'custom') */
+  headerColor?: string;
+
+  /** Custom header text color. Default: '#ffffff' */
+  headerTextColor?: string;
+
+  /** Custom body/ticker background color (only used when theme is 'custom') */
+  bodyColor?: string;
+
+  /** Header height in pixels. Default: 28 */
+  headerHeight?: number;
+
+  /** Header font size in pixels. Default: 16 */
+  headerFontSize?: number;
+
+  /** Secondary text shown below header (optional) */
+  subHeaderText?: string;
+
+  /** Globe animation enabled. Default: true */
+  animateGlobe?: boolean;
+
+  /** LIVE badge pulse animation. Default: true */
+  pulseLiveBadge?: boolean;
+}
+
 /**
  * Individual news item to display in the ticker
  */
@@ -44,7 +103,7 @@ export interface TickerDisplayConfig {
 
   // Visual styling
 
-  /** Height of ticker in pixels. Default: 40 */
+  /** Height of ticker in pixels. Default: 40 for simple, 60 for broadcast */
   height?: number;
 
   /** Background color with alpha. Default: 'rgba(0,0,0,0.7)' */
@@ -72,6 +131,12 @@ export interface TickerDisplayConfig {
 
   /** Offset in pixels for safe area. Default: 0 for bottom, 10 for top */
   offset?: number;
+
+  /** Style variant for this specific ticker. Overrides parent styleVariant */
+  styleVariant?: TickerStyleVariant;
+
+  /** Broadcast style config for this specific ticker. Overrides parent broadcastStyle */
+  broadcastStyle?: BroadcastStyleConfig;
 }
 
 /**
@@ -87,6 +152,16 @@ export interface FlashNewsTickerConfig {
   /** Position on screen. Default: 'bottom' */
   position?: 'top' | 'bottom' | 'both';
 
+  /**
+   * Style variant for the ticker. Default: 'simple'
+   * - 'simple': Basic scrolling ticker (original style)
+   * - 'broadcast': Professional broadcast-style breaking news banner
+   */
+  styleVariant?: TickerStyleVariant;
+
+  /** Configuration for broadcast-style appearance (only used when styleVariant is 'broadcast') */
+  broadcastStyle?: BroadcastStyleConfig;
+
   /** Configuration for top ticker (only used when position is 'both') */
   topConfig?: TickerDisplayConfig;