unified-video-framework 1.4.440 → 1.4.441

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

@@ -118,6 +118,15 @@ export interface FlashNewsTickerConfig {
     gap?: number;
     loop?: boolean;
     separator?: string;
+    variant?: 'standard' | 'breaking' | 'live' | 'broadcast1' | 'broadcast2' | 'broadcast3' | 'broadcast4' | 'custom';
+    badgeText?: string;
+    badgeColor?: string;
+    badgeTextColor?: string;
+    accentColor?: string;
+    pulseBadge?: boolean;
+    iconUrl?: string;
+    headline?: string;
+    secondaryItems?: FlashNewsTickerItem[];
     topOffset?: number;
     bottomOffset?: number;
 }

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":"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"}
+{"version":3,"file":"FlashNewsTickerTypes.d.ts","sourceRoot":"","sources":["../../../src/react/types/FlashNewsTickerTypes.ts"],"names":[],"mappings":"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"}

package/packages/web/src/WebPlayer.ts

@@ -2573,10 +2573,17 @@ export class WebPlayer extends BasePlayer {
   }
 
   private createTickerElement(config: FlashNewsTickerConfig, position: 'top' | 'bottom'): HTMLDivElement {
-    // Route to broadcast style if configured
-    if (config.styleVariant === 'broadcast') {
+    const variant = config.variant || 'standard';
+
+    // Route to specific broadcast layouts
+    if (variant === 'broadcast1') return this.createBroadcast1Element(config, position);
+    if (variant === 'broadcast2') return this.createBroadcast2Element(config, position);
+    if (variant === 'broadcast3') return this.createBroadcast3Element(config, position);
+    if (variant === 'broadcast4') return this.createBroadcast4Element(config, position);
+
+    // Route to specific broadcast style if configured (older style)
+    if (config.styleVariant === 'broadcast' || variant === 'breaking' || variant === 'live') {
       const layoutStyle = config.broadcastStyle?.layoutStyle || 'broadcast';
-      // Route to professional ticker for two-line or professional layouts
       if (layoutStyle === 'two-line' || layoutStyle === 'professional') {
         return this.createProfessionalTickerElement(config, position);
       }
@@ -2877,6 +2884,449 @@ export class WebPlayer extends BasePlayer {
     }
   }
 
+  private createBroadcast1Element(config: FlashNewsTickerConfig, position: 'top' | 'bottom'): HTMLDivElement {
+    const ticker = document.createElement('div');
+    ticker.className = `uvf-ticker-broadcast1 ticker-${position}`;
+
+    const height = config.height || 70;
+    const bottomOffset = config.bottomOffset || 0;
+    const topOffset = config.topOffset || 10;
+
+    ticker.style.cssText = `
+      position: absolute;
+      left: 10%;
+      right: 10%;
+      height: ${height}px;
+      ${position === 'top' ? `top: ${topOffset}px;` : `bottom: ${bottomOffset}px;`}
+      display: flex;
+      font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+      z-index: 100;
+      pointer-events: none;
+    `;
+
+    // 1. Globe Block (Left)
+    const globeBlock = document.createElement('div');
+    globeBlock.style.cssText = `
+      width: ${height}px;
+      height: ${height}px;
+      background: linear-gradient(135deg, #cc0000 0%, #880000 100%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);
+      z-index: 10;
+      box-shadow: 5px 0 15px rgba(0,0,0,0.5);
+    `;
+    const globe = this.createGlobeElement(true);
+    globe.style.width = '60%';
+    globe.style.height = '60%';
+    globeBlock.appendChild(globe);
+    ticker.appendChild(globeBlock);
+
+    // 2. Right Content (Dual Bars)
+    const content = document.createElement('div');
+    content.style.cssText = `
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      margin-left: -${height * 0.15}px;
+    `;
+
+    // Row 1: Top Blue Bar (Headline)
+    const topBar = document.createElement('div');
+    topBar.style.cssText = `
+      height: 60%;
+      background: linear-gradient(90deg, #1e3c72 0%, #2a5298 100%);
+      clip-path: polygon(5% 0, 100% 0, 98% 100%, 0% 100%);
+      display: flex;
+      align-items: center;
+      padding: 0 40px;
+      color: white;
+    `;
+
+    const breakingText = document.createElement('span');
+    breakingText.textContent = 'BREAKING NEWS';
+    breakingText.style.cssText = `
+      font-weight: 900;
+      font-style: italic;
+      font-size: ${height * 0.22}px;
+      margin-right: 20px;
+      border-bottom: 2px solid white;
+    `;
+    topBar.appendChild(breakingText);
+
+    const headlineText = document.createElement('span');
+    headlineText.textContent = config.headline || 'LOREM IPSUM DOLOR SIT AMET, CONSECTETUER';
+    headlineText.style.cssText = `
+      font-weight: 700;
+      font-size: ${height * 0.25}px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    `;
+    topBar.appendChild(headlineText);
+    content.appendChild(topBar);
+
+    // Row 2: Bottom Black Bar (Scrolling Items)
+    const bottomBar = document.createElement('div');
+    bottomBar.style.cssText = `
+      height: 40%;
+      background: #000;
+      display: flex;
+      align-items: center;
+      clip-path: polygon(1% 0, 100% 0, 100% 100%, 0% 100%);
+    `;
+
+    // LIVE badge
+    const liveBadge = document.createElement('div');
+    liveBadge.textContent = 'LIVE';
+    liveBadge.style.cssText = `
+      background: #f1c40f;
+      color: black;
+      font-weight: 900;
+      font-size: ${height * 0.15}px;
+      padding: 2px 10px;
+      margin-left: 20px;
+      clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
+    `;
+    bottomBar.appendChild(liveBadge);
+
+    // Scrolling track
+    const trackContainer = document.createElement('div');
+    trackContainer.style.cssText = `flex-grow: 1; overflow: hidden; height: 100%; display: flex; align-items: center;`;
+
+    const track = this.createSeamlessScrollingTrack(config.items || [], config);
+    track.style.fontSize = `${height * 0.18}px`;
+    trackContainer.appendChild(track);
+    bottomBar.appendChild(trackContainer);
+
+    content.appendChild(bottomBar);
+    ticker.appendChild(content);
+
+    this.ensureTickerAnimations();
+    return ticker;
+  }
+
+  private createBroadcast2Element(config: FlashNewsTickerConfig, position: 'top' | 'bottom'): HTMLDivElement {
+    const ticker = document.createElement('div');
+    ticker.className = `uvf-ticker-broadcast2 ticker-${position}`;
+
+    const height = config.height || 75;
+    const bottomOffset = config.bottomOffset || 0;
+    const topOffset = config.topOffset || 10;
+
+    ticker.style.cssText = `
+      position: absolute;
+      left: 5%;
+      right: 5%;
+      height: ${height}px;
+      ${position === 'top' ? `top: ${topOffset}px;` : `bottom: ${bottomOffset}px;`}
+      display: flex;
+      align-items: flex-end;
+      font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+      z-index: 100;
+      pointer-events: none;
+    `;
+
+    // Globe icon (floating on left)
+    const globeContainer = document.createElement('div');
+    globeContainer.style.cssText = `
+      width: ${height * 0.8}px;
+      height: ${height * 0.8}px;
+      background: rgba(255,255,255,0.1);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 15px;
+      box-shadow: 0 0 20px rgba(0,0,0,0.5);
+      border: 2px solid rgba(255,255,255,0.2);
+    `;
+    const globe = this.createGlobeElement(true);
+    globe.style.width = '70%';
+    globe.style.height = '70%';
+    globeContainer.appendChild(globe);
+    ticker.appendChild(globeContainer);
+
+    const content = document.createElement('div');
+    content.style.cssText = `flex-grow: 1; display: flex; flex-direction: column;`;
+
+    // Row 1: Yellow/Red Header
+    const row1 = document.createElement('div');
+    row1.style.cssText = `display: flex; height: 50%;`;
+
+    const badge = document.createElement('div');
+    badge.textContent = 'BREAKING NEWS';
+    badge.style.cssText = `
+      background: #f1c40f;
+      color: black;
+      font-weight: 900;
+      padding: 0 20px;
+      display: flex;
+      align-items: center;
+      clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
+      font-size: ${height * 0.18}px;
+    `;
+    row1.appendChild(badge);
+
+    const headline = document.createElement('div');
+    headline.textContent = config.headline || 'LOREM IPSUM DOLOR SIT AMET, CONSECTETUER';
+    headline.style.cssText = `
+      background: #e74c3c;
+      color: white;
+      font-weight: 700;
+      padding: 0 30px;
+      display: flex;
+      align-items: center;
+      flex-grow: 1;
+      margin-left: -10px;
+      clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%);
+      font-size: ${height * 0.22}px;
+    `;
+    row1.appendChild(headline);
+    content.appendChild(row1);
+
+    // Row 2: Blue Ticker
+    const row2 = document.createElement('div');
+    row2.style.cssText = `
+      height: 40%;
+      background: #2980b9;
+      display: flex;
+      align-items: center;
+      margin-top: 2px;
+      clip-path: polygon(0 0, 100% 0, 100% 100%, 1% 100%);
+    `;
+
+    const live = document.createElement('div');
+    live.textContent = 'LIVE';
+    live.style.cssText = `
+      background: white;
+      color: #2980b9;
+      font-weight: 900;
+      padding: 0 15px;
+      margin: 0 10px;
+      font-size: ${height * 0.15}px;
+    `;
+    row2.appendChild(live);
+
+    const trackCont = document.createElement('div');
+    trackCont.style.cssText = `flex-grow: 1; overflow: hidden; height: 100%; display: flex; align-items: center; color: white;`;
+    const track = this.createSeamlessScrollingTrack(config.items || [], config);
+    track.style.fontSize = `${height * 0.16}px`;
+    trackCont.appendChild(track);
+    row2.appendChild(trackCont);
+    content.appendChild(row2);
+
+    ticker.appendChild(content);
+    this.ensureTickerAnimations();
+    return ticker;
+  }
+
+  private createBroadcast3Element(config: FlashNewsTickerConfig, position: 'top' | 'bottom'): HTMLDivElement {
+    const ticker = document.createElement('div');
+    ticker.className = `uvf-ticker-broadcast3 ticker-${position}`;
+
+    const height = config.height || 60;
+    const bottomOffset = config.bottomOffset || 0;
+    const topOffset = config.topOffset || 10;
+
+    ticker.style.cssText = `
+      position: absolute;
+      left: 10%;
+      right: 10%;
+      height: ${height}px;
+      ${position === 'top' ? `top: ${topOffset}px;` : `bottom: ${bottomOffset}px;`}
+      display: flex;
+      flex-direction: column;
+      font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+      z-index: 100;
+      pointer-events: none;
+    `;
+
+    // Row 1: Split Red/Blue
+    const row1 = document.createElement('div');
+    row1.style.cssText = `display: flex; height: 55%;`;
+
+    const b1 = document.createElement('div');
+    b1.textContent = 'BREAKING NEWS';
+    b1.style.cssText = `
+      background: #c0392b;
+      color: white;
+      font-weight: 900;
+      padding: 0 20px;
+      display: flex;
+      align-items: center;
+      clip-path: polygon(0 0, 95% 0, 100% 100%, 0 100%);
+      font-size: ${height * 0.22}px;
+    `;
+    row1.appendChild(b1);
+
+    const b2 = document.createElement('div');
+    b2.textContent = config.headline || 'LOREM IPSUM DOLOR SIT AMET, CONS';
+    b2.style.cssText = `
+      background: #2980b9;
+      color: white;
+      font-weight: 700;
+      padding: 0 30px;
+      display: flex;
+      align-items: center;
+      flex-grow: 1;
+      margin-left: -10px;
+      clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%);
+      font-size: ${height * 0.25}px;
+    `;
+    row1.appendChild(b2);
+    ticker.appendChild(row1);
+
+    // Row 2: Black scrolling
+    const row2 = document.createElement('div');
+    row2.style.cssText = `
+      height: 35%;
+      background: #111;
+      display: flex;
+      align-items: center;
+      margin-top: 2px;
+      clip-path: polygon(1% 0, 99% 0, 100% 100%, 0 100%);
+    `;
+
+    const lbadge = document.createElement('div');
+    lbadge.textContent = 'LIVE';
+    lbadge.style.cssText = `
+      background: #f1c40f;
+      color: black;
+      font-weight: 900;
+      padding: 0 10px;
+      margin: 0 15px;
+      font-size: ${height * 0.15}px;
+      clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
+    `;
+    row2.appendChild(lbadge);
+
+    const tCont = document.createElement('div');
+    tCont.style.cssText = `flex-grow: 1; overflow: hidden; height: 100%; display: flex; align-items: center; color: white;`;
+    const track = this.createSeamlessScrollingTrack(config.items || [], config);
+    track.style.fontSize = `${height * 0.16}px`;
+    tCont.appendChild(track);
+    row2.appendChild(tCont);
+    ticker.appendChild(row2);
+
+    this.ensureTickerAnimations();
+    return ticker;
+  }
+
+  private createBroadcast4Element(config: FlashNewsTickerConfig, position: 'top' | 'bottom'): HTMLDivElement {
+    const ticker = document.createElement('div');
+    ticker.className = `uvf-ticker-broadcast4 ticker-${position}`;
+
+    const height = config.height || 65;
+    const bottomOffset = config.bottomOffset || 0;
+    const topOffset = config.topOffset || 10;
+
+    ticker.style.cssText = `
+      position: absolute;
+      left: 15%;
+      right: 15%;
+      height: ${height}px;
+      ${position === 'top' ? `top: ${topOffset}px;` : `bottom: ${bottomOffset}px;`}
+      display: flex;
+      align-items: flex-end;
+      font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+      z-index: 100;
+      pointer-events: none;
+    `;
+
+    // Large Blue Box
+    const newsBox = document.createElement('div');
+    newsBox.style.cssText = `
+      width: ${height * 1.5}px;
+      height: 100%;
+      background: #1e3c72;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      padding-left: 15px;
+      position: relative;
+      clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
+      flex-shrink: 0;
+    `;
+
+    const bt = document.createElement('div');
+    bt.style.cssText = `display: flex; gap: 5px; margin-bottom: 5px;`;
+
+    const b1 = document.createElement('span');
+    b1.textContent = 'BREAKING';
+    b1.style.cssText = `background: #c0392b; font-size: 10px; font-weight: 800; padding: 2px 5px; border-radius: 2px; color: white;`;
+    bt.appendChild(b1);
+
+    const b2 = document.createElement('span');
+    b2.textContent = 'LIVE';
+    b2.style.cssText = `background: #f1c40f; font-size: 10px; font-weight: 800; padding: 2px 5px; border-radius: 2px; color: black;`;
+    bt.appendChild(b2);
+    newsBox.appendChild(bt);
+
+    const nt = document.createElement('div');
+    nt.textContent = 'NEWS';
+    nt.style.cssText = `font-size: ${height * 0.4}px; font-weight: 900; color: white; letter-spacing: 2px;`;
+    newsBox.appendChild(nt);
+    ticker.appendChild(newsBox);
+
+    // Red Scrolling Bar
+    const redBar = document.createElement('div');
+    redBar.style.cssText = `
+      flex-grow: 1;
+      height: 50%;
+      background: #c0392b;
+      margin-left: -${height * 0.1}px;
+      display: flex;
+      align-items: center;
+      padding-left: 20px;
+      clip-path: polygon(2% 0, 100% 0, 100% 100%, 0 100%);
+    `;
+
+    const tCont = document.createElement('div');
+    tCont.style.cssText = `flex-grow: 1; overflow: hidden; height: 100%; display: flex; align-items: center; color: white;`;
+    const track = this.createSeamlessScrollingTrack(config.items || [], config);
+    track.style.fontSize = `${height * 0.25}px`;
+    track.style.fontWeight = '700';
+    tCont.appendChild(track);
+    redBar.appendChild(tCont);
+    ticker.appendChild(redBar);
+
+    this.ensureTickerAnimations();
+    return ticker;
+  }
+
+  private createSeamlessScrollingTrack(items: FlashNewsTickerItem[], config: FlashNewsTickerConfig): HTMLDivElement {
+    const track = document.createElement('div');
+    track.className = 'uvf-ticker-track-seamless';
+
+    const duration = this.calculateTickerDuration(config);
+    track.style.cssText = `
+      display: flex;
+      white-space: nowrap;
+      animation: ticker-scroll ${duration}s linear infinite;
+      will-change: transform;
+      padding-left: 50%;
+    `;
+
+    const content = items.map(item => item.html || item.text).join(config.separator || ' • ');
+
+    // Duplicate content for horizontal seamless loop
+    const span1 = document.createElement('span');
+    span1.innerHTML = content;
+    span1.style.paddingRight = `${config.gap || 100}px`;
+
+    const span2 = document.createElement('span');
+    span2.innerHTML = content;
+    span2.style.paddingRight = `${config.gap || 100}px`;
+
+    track.appendChild(span1);
+    track.appendChild(span2);
+
+    return track;
+  }
+
   private createGlobeElement(animate: boolean): HTMLDivElement {
     const globeContainer = document.createElement('div');
     globeContainer.className = 'uvf-ticker-globe';

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

@@ -429,7 +429,44 @@ export interface FlashNewsTickerConfig {
   /** Separator text between items. Default: ' • ' */
   separator?: string;
 
-  // Safe areas
+  /**
+   * Ticker variant/layout style. Options:
+   * - 'standard': Original simple scrolling ticker
+   * - 'breaking': Red badge + gradient (TV style)
+   * - 'live': Yellow/Black badge + gradient (TV style)
+   * - 'broadcast1': Blue/Red/Black dual-bar layout with globe
+   * - 'broadcast2': Yellow/Red/Blue dual-bar layout with globe
+   * - 'broadcast3': Triple-segment single bar (Red/Blue/Black)
+   * - 'broadcast4': Blue box "NEWS" + Red scrolling bar
+   * - 'custom': User-defined colors and badges
+   */
+  variant?: 'standard' | 'breaking' | 'live' | 'broadcast1' | 'broadcast2' | 'broadcast3' | 'broadcast4' | 'custom';
+
+  /** Fixed badge text (e.g. "BREAKING NEWS") */
+  badgeText?: string;
+
+  /** Badge background color (e.g. "#e74c3c") */
+  badgeColor?: string;
+
+  /** Badge text color (e.g. "#ffffff") */
+  badgeTextColor?: string;
+
+  /** Accent/gradient color for the ticker (e.g. "#c0392b") */
+  accentColor?: string;
+
+  /** Enable pulse animation for the badge. Default: true for breaking/live */
+  pulseBadge?: boolean;
+
+  /** URL for the left-side icon (e.g. globe graphic) */
+  iconUrl?: string;
+
+  /** Static headline text for multi-bar layouts */
+  headline?: string;
+
+  /** Items for the second scrolling track (if applicable to layout) */
+  secondaryItems?: FlashNewsTickerItem[];
+
+  /** Safe areas */
 
   /** Top offset in pixels for safe area. Default: 10 */
   topOffset?: number;