unified-video-framework 1.4.438 → 1.4.440

package/packages/web/src/index.ts

@@ -20,8 +20,17 @@ export type {
   FlashNewsTickerAPI,
   TickerDisplayConfig,
   TickerStyleVariant,
+  TickerLayoutStyle,
   BroadcastTheme,
-  BroadcastStyleConfig
+  BroadcastStyleConfig,
+  IntroAnimationType,
+  ItemTransitionType,
+  TwoLineDisplayConfig,
+  TopLineConfig,
+  BottomLineConfig,
+  DecorativeShapesConfig,
+  SeparatorType,
+  ItemCyclingConfig
 } from './react/types/FlashNewsTickerTypes';
 
 // Version

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

@@ -13,6 +13,34 @@
  */
 export type TickerStyleVariant = 'simple' | 'broadcast';
 
+/**
+ * Layout styles for broadcast ticker
+ * - 'simple': Single scrolling line
+ * - 'broadcast': Header + single scrolling line
+ * - 'two-line': Header + static headline + scrolling detail
+ * - 'professional': Full TV-style with all features (header, two-line, intro animations)
+ */
+export type TickerLayoutStyle = 'simple' | 'broadcast' | 'two-line' | 'professional';
+
+/**
+ * Intro animation types for news items
+ * - 'none': No intro animation
+ * - 'slide-in': Slide in from left
+ * - 'scale': Scale up from center
+ * - 'flash': Flashing effect
+ * - 'pulse': Pulsing effect
+ * - 'shake': Shake effect
+ */
+export type IntroAnimationType = 'none' | 'slide-in' | 'scale' | 'flash' | 'pulse' | 'shake';
+
+/**
+ * Item transition types
+ * - 'fade': Fade out/in
+ * - 'slide': Slide up out, slide in from bottom
+ * - 'none': Instant switch
+ */
+export type ItemTransitionType = 'fade' | 'slide' | 'none';
+
 /**
  * Broadcast style theme presets
  */
@@ -23,6 +51,145 @@ export type BroadcastTheme =
   | 'news-blue'         // Professional blue theme
   | 'custom';           // Custom colors via headerColor/bodyColor
 
+/**
+ * Configuration for the top line (static headline) in two-line display
+ */
+export interface TopLineConfig {
+  /** Display mode: 'static' keeps headline visible, 'scroll' makes it scroll slowly */
+  mode?: 'static' | 'scroll';
+
+  /** Enable multi-line text wrapping. Default: false */
+  multiLine?: boolean;
+
+  /** Maximum lines before truncation with ellipsis. Default: 2 */
+  maxLines?: number;
+
+  /**
+   * Force text to split into multiple lines even if short.
+   * When true, text will be split at approximately the midpoint.
+   * Default: false
+   */
+  forceMultiLine?: boolean;
+
+  /**
+   * Custom line break position (character index or percentage like '50%').
+   * Only used when forceMultiLine is true.
+   * Default: '50%' (midpoint)
+   */
+  breakAt?: number | string;
+
+  /** Minimum height in pixels. Default: 32 */
+  minHeight?: number;
+
+  /** Font size in pixels. Default: 16 */
+  fontSize?: number;
+
+  /** CSS line-height for multi-line text spacing. Default: 1.3 */
+  lineHeight?: number;
+
+  /** Text color. Defaults to parent textColor */
+  textColor?: string;
+
+  /** Background color. Defaults to transparent */
+  backgroundColor?: string;
+
+  /** Padding in pixels. Default: 8 */
+  padding?: number;
+}
+
+/**
+ * Configuration for the bottom line (scrolling detail) in two-line display
+ */
+export interface BottomLineConfig {
+  /** Scroll speed in pixels per second. Default: 80 */
+  speed?: number;
+
+  /** Height in pixels. Default: 28 */
+  height?: number;
+
+  /** Font size in pixels. Default: 14 */
+  fontSize?: number;
+
+  /** Text color. Defaults to parent textColor */
+  textColor?: string;
+
+  /** Background color. Defaults to transparent */
+  backgroundColor?: string;
+}
+
+/**
+ * Configuration for two-line display (headline + scrolling detail)
+ */
+export interface TwoLineDisplayConfig {
+  /** Enable two-line display mode. Default: false */
+  enabled?: boolean;
+
+  /** Top line (headline) configuration */
+  topLine?: TopLineConfig;
+
+  /** Bottom line (scrolling detail) configuration */
+  bottomLine?: BottomLineConfig;
+
+  /** Separator line between top and bottom. Default: true */
+  showSeparator?: boolean;
+
+  /** Separator color. Default: 'rgba(255,255,255,0.2)' */
+  separatorColor?: string;
+}
+
+/**
+ * Decorative separator type
+ */
+export type SeparatorType = 'line' | 'pulse-line' | 'chevron' | 'diamond' | 'dot';
+
+/**
+ * Configuration for decorative shapes and separators
+ */
+export interface DecorativeShapesConfig {
+  /** Separator between globe and header text */
+  headerSeparator?: {
+    /** Separator type. Default: 'line' */
+    type?: SeparatorType;
+    /** Enable animation. Default: true */
+    animated?: boolean;
+    /** Color. Default: '#ffffff' */
+    color?: string;
+    /** Width in pixels. Default: 2 */
+    width?: number;
+    /** Height in pixels. Default: 20 */
+    height?: number;
+  };
+}
+
+/**
+ * Configuration for automatic item cycling
+ */
+export interface ItemCyclingConfig {
+  /** Enable automatic item cycling. Default: false */
+  enabled?: boolean;
+
+  /** Default duration per item in seconds. Default: 10 */
+  defaultDuration?: number;
+
+  /** Transition type between items. Default: 'fade' */
+  transitionType?: ItemTransitionType;
+
+  /** Transition duration in ms. Default: 500 */
+  transitionDuration?: number;
+
+  /** Show progress bar for current item. Default: false */
+  showProgress?: boolean;
+
+  /** Progress bar color. Default: '#ffffff' */
+  progressColor?: string;
+
+  /** Progress bar height in pixels. Default: 3 */
+  progressHeight?: number;
+
+  /** Pause cycling on hover. Default: true */
+  pauseOnHover?: boolean;
+}
+
 /**
  * Configuration for broadcast-style banner appearance
  */
@@ -30,6 +197,9 @@ export interface BroadcastStyleConfig {
   /** Theme preset. Default: 'breaking-red' */
   theme?: BroadcastTheme;
 
+  /** Layout style. Default: 'broadcast' */
+  layoutStyle?: TickerLayoutStyle;
+
   /** Header text (e.g., "BREAKING NEWS", "LIVE", "ALERT"). Default: 'BREAKING NEWS' */
   headerText?: string;
 
@@ -62,6 +232,18 @@ export interface BroadcastStyleConfig {
 
   /** LIVE badge pulse animation. Default: true */
   pulseLiveBadge?: boolean;
+
+  /** Two-line display configuration (for 'two-line' and 'professional' layouts) */
+  twoLineDisplay?: TwoLineDisplayConfig;
+
+  /** Decorative shapes configuration */
+  decorativeShapes?: DecorativeShapesConfig;
+
+  /** Default intro animation for items. Default: 'none' */
+  defaultIntroAnimation?: IntroAnimationType;
+
+  /** Default intro duration in ms. Default: 2000 */
+  defaultIntroDuration?: number;
 }
 
 /**
@@ -71,7 +253,7 @@ export interface FlashNewsTickerItem {
   /** Unique identifier for this item */
   id: string;
 
-  /** Text content to display */
+  /** Text content to display (used as scrolling detail in two-line mode) */
   text: string;
 
   /**
@@ -81,6 +263,18 @@ export interface FlashNewsTickerItem {
    */
   html?: string;
 
+  /**
+   * Headline text for two-line display (static top line)
+   * Used only when layoutStyle is 'two-line' or 'professional'
+   */
+  headline?: string;
+
+  /**
+   * HTML content for headline (supports rich formatting)
+   * If provided, this takes precedence over 'headline'
+   */
+  headlineHtml?: string;
+
   /** Priority for ordering (higher = shown first). Default: 0 */
   priority?: number;
 
@@ -90,6 +284,36 @@ export interface FlashNewsTickerItem {
   /** Unix timestamp (ms) - when to stop showing this item */
   endTime?: number;
 
+  /**
+   * Display duration in seconds for this specific item
+   * Used when itemCycling is enabled. Overrides defaultDuration.
+   */
+  duration?: number;
+
+  /**
+   * Show intro animation for this item (e.g., "JUST IN", "BREAKING")
+   * Default: false
+   */
+  showIntro?: boolean;
+
+  /**
+   * Custom intro text (e.g., "JUST IN", "BREAKING", "EXCLUSIVE")
+   * Default: 'BREAKING'
+   */
+  introText?: string;
+
+  /**
+   * Intro animation type for this item
+   * Overrides broadcastStyle.defaultIntroAnimation
+   */
+  introAnimation?: IntroAnimationType;
+
+  /**
+   * Intro animation duration in ms
+   * Overrides broadcastStyle.defaultIntroDuration
+   */
+  introDuration?: number;
+
   /** Custom metadata for application-specific data */
   metadata?: Record<string, any>;
 }
@@ -162,6 +386,9 @@ export interface FlashNewsTickerConfig {
   /** Configuration for broadcast-style appearance (only used when styleVariant is 'broadcast') */
   broadcastStyle?: BroadcastStyleConfig;
 
+  /** Configuration for automatic item cycling (used in 'professional' layout) */
+  itemCycling?: ItemCyclingConfig;
+
   /** Configuration for top ticker (only used when position is 'both') */
   topConfig?: TickerDisplayConfig;