unified-video-framework 1.4.435 → 1.4.437

package/packages/web/dist/drm/systems/WidevineDRM.js

@@ -5,9 +5,33 @@ import { DRMType as DRMTypeEnum } from "../../../../core/dist/index.js";
 export class WidevineDRM extends BaseDRM {
     async initialize() {
         this.log('Initializing Widevine DRM...');
+        this.log('Requested robustness - Video:', this.config.videoRobustness || 'SW_SECURE_CRYPTO', 'Audio:', this.config.audioRobustness || 'SW_SECURE_CRYPTO');
         try {
             const keySystemAccess = await navigator.requestMediaKeySystemAccess(this.getKeySystem(), this.getKeySystemConfiguration());
             this.log('Widevine key system access granted');
+
+            // Log the actual configuration that was accepted
+            const actualConfig = keySystemAccess.getConfiguration();
+            this.log('✅ GRANTED Configuration:', {
+                videoRobustness: actualConfig.videoCapabilities?.[0]?.robustness || 'unknown',
+                audioRobustness: actualConfig.audioCapabilities?.[0]?.robustness || 'unknown',
+                distinctiveIdentifier: actualConfig.distinctiveIdentifier,
+                persistentState: actualConfig.persistentState
+            });
+
+            // Check if fallback happened
+            const requestedVideoRobustness = this.config.videoRobustness || 'SW_SECURE_CRYPTO';
+            const grantedVideoRobustness = actualConfig.videoCapabilities?.[0]?.robustness;
+
+            if (requestedVideoRobustness !== grantedVideoRobustness) {
+                this.log('⚠️ WARNING: Browser fell back from', requestedVideoRobustness, 'to', grantedVideoRobustness);
+                this.log('⚠️ Screenshot blocking may not work - system does not support hardware overlay');
+            } else if (requestedVideoRobustness === 'HW_SECURE_DECODE' && grantedVideoRobustness === 'HW_SECURE_DECODE') {
+                this.log('✅ SUCCESS: Hardware overlay protection active - screenshots should show black screen');
+            } else {
+                this.log('ℹ️ Using software DRM - screenshots will be visible');
+            }
+
             this.mediaKeys = await keySystemAccess.createMediaKeys();
         }
         catch (error) {
@@ -22,12 +46,15 @@ export class WidevineDRM extends BaseDRM {
     getHLSConfig() {
         this.log('Generating HLS.js config for Widevine');
         const licenseUrl = this.config.licenseUrl || this.config.widevineOptions?.licenseUrl;
+        // Use videoRobustness from config if provided, otherwise fallback to SW_SECURE_CRYPTO
+        const robustness = this.config.videoRobustness || 'SW_SECURE_CRYPTO';
+        this.log(`Using video robustness level: ${robustness}`);
         return {
             emeEnabled: true,
             drmSystems: {
                 [this.getKeySystem()]: {
                     licenseUrl: licenseUrl,
-                    robustness: 'SW_SECURE_CRYPTO',
+                    robustness: robustness,
                 },
             },
             requestMediaKeySystemAccessFunc: navigator.requestMediaKeySystemAccess.bind(navigator),
@@ -70,12 +97,46 @@ export class WidevineDRM extends BaseDRM {
         return protectionData;
     }
     getKeySystemConfiguration() {
-        return [{
+        // Use robustness from config or fallback to SW_SECURE_CRYPTO (L3)
+        const videoRobustness = this.config.videoRobustness || 'SW_SECURE_CRYPTO';
+        const audioRobustness = this.config.audioRobustness || 'SW_SECURE_CRYPTO';
+
+        this.log(`Key system config - Video: ${videoRobustness}, Audio: ${audioRobustness}`);
+
+        // Create configuration with multiple robustness fallbacks
+        const configs = [];
+
+        // Try requested robustness first
+        configs.push({
+            initDataTypes: ['cenc'],
+            audioCapabilities: [{
+                contentType: 'audio/mp4; codecs="mp4a.40.2"',
+                robustness: audioRobustness,
+            }],
+            videoCapabilities: [
+                {
+                    contentType: 'video/mp4; codecs="avc1.42E01E"',
+                    robustness: videoRobustness,
+                },
+                {
+                    contentType: 'video/mp4; codecs="avc1.4d401f"',
+                    robustness: videoRobustness,
+                },
+            ],
+            distinctiveIdentifier: 'optional',
+            persistentState: 'optional',
+            sessionTypes: ['temporary'],
+        });
+
+        // Fallback to SW_SECURE_CRYPTO if hardware not available
+        if (videoRobustness !== 'SW_SECURE_CRYPTO') {
+            this.log('Adding fallback configuration with SW_SECURE_CRYPTO');
+            configs.push({
                 initDataTypes: ['cenc'],
                 audioCapabilities: [{
-                        contentType: 'audio/mp4; codecs="mp4a.40.2"',
-                        robustness: 'SW_SECURE_CRYPTO',
-                    }],
+                    contentType: 'audio/mp4; codecs="mp4a.40.2"',
+                    robustness: 'SW_SECURE_CRYPTO',
+                }],
                 videoCapabilities: [
                     {
                         contentType: 'video/mp4; codecs="avc1.42E01E"',
@@ -89,7 +150,10 @@ export class WidevineDRM extends BaseDRM {
                 distinctiveIdentifier: 'not-allowed',
                 persistentState: 'not-allowed',
                 sessionTypes: ['temporary'],
-            }];
+            });
+        }
+
+        return configs;
     }
 }
 //# sourceMappingURL=WidevineDRM.js.map

package/packages/web/dist/index.d.ts

@@ -2,5 +2,6 @@ export * from '../../core/dist/index';
 export { WebPlayer } from './WebPlayer';
 export { WebPlayerView } from './react/WebPlayerView';
 export * from './react/EPG';
+export type { FlashNewsTickerConfig, FlashNewsTickerItem, FlashNewsTickerAPI, TickerDisplayConfig, TickerStyleVariant, BroadcastTheme, BroadcastStyleConfig } from './react/types/FlashNewsTickerTypes';
 export declare const VERSION = "1.0.0";
 //# sourceMappingURL=index.d.ts.map

package/packages/web/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAMA,cAAc,uBAAuB,CAAC;AAGtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAGtD,cAAc,aAAa,CAAC;AAG5B,eAAO,MAAM,OAAO,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAMA,cAAc,uBAAuB,CAAC;AAGtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAGtD,cAAc,aAAa,CAAC;AAG5B,YAAY,EACV,qBAAqB,EACrB,mBAAmB,EACnB,kBAAkB,EAClB,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,EACd,oBAAoB,EACrB,MAAM,oCAAoC,CAAC;AAG5C,eAAO,MAAM,OAAO,UAAU,CAAC"}

package/packages/web/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAMA,cAAc,uBAAuB,CAAC;AAGtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAGtD,cAAc,aAAa,CAAC;AAG5B,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAMA,cAAc,uBAAuB,CAAC;AAGtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAGtD,cAAc,aAAa,CAAC;AAc5B,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,CAAC"}

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

@@ -1,3 +1,19 @@
+export type TickerStyleVariant = 'simple' | 'broadcast';
+export type BroadcastTheme = 'breaking-red' | 'breaking-blue' | 'alert-red' | 'news-blue' | 'custom';
+export interface BroadcastStyleConfig {
+    theme?: BroadcastTheme;
+    headerText?: string;
+    showGlobe?: boolean;
+    showLiveBadge?: boolean;
+    headerColor?: string;
+    headerTextColor?: string;
+    bodyColor?: string;
+    headerHeight?: number;
+    headerFontSize?: number;
+    subHeaderText?: string;
+    animateGlobe?: boolean;
+    pulseLiveBadge?: boolean;
+}
 export interface FlashNewsTickerItem {
     id: string;
     text: string;
@@ -18,11 +34,15 @@ export interface TickerDisplayConfig {
     gap?: number;
     separator?: string;
     offset?: number;
+    styleVariant?: TickerStyleVariant;
+    broadcastStyle?: BroadcastStyleConfig;
 }
 export interface FlashNewsTickerConfig {
     enabled?: boolean;
     items?: FlashNewsTickerItem[];
     position?: 'top' | 'bottom' | 'both';
+    styleVariant?: TickerStyleVariant;
+    broadcastStyle?: BroadcastStyleConfig;
     topConfig?: TickerDisplayConfig;
     bottomConfig?: TickerDisplayConfig;
     height?: 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":"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"}
+{"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

@@ -20,7 +20,7 @@ import {
   VideoSegment,
   ChapterEvents
 } from './chapters/types/ChapterTypes';
-import type { FlashNewsTickerConfig } from './react/types/FlashNewsTickerTypes';
+import type { FlashNewsTickerConfig, BroadcastStyleConfig, BroadcastTheme, TickerStyleVariant } from './react/types/FlashNewsTickerTypes';
 import YouTubeExtractor from './utils/YouTubeExtractor';
 import { DRMManager, DRMErrorHandler } from './drm';
 import type { DRMInitResult, DRMError } from './drm';
@@ -2468,8 +2468,18 @@ export class WebPlayer extends BasePlayer {
   }
 
   private createTickerElement(config: FlashNewsTickerConfig, position: 'top' | 'bottom'): HTMLDivElement {
+    // Route to broadcast style if configured
+    if (config.styleVariant === 'broadcast') {
+      return this.createBroadcastTickerElement(config, position);
+    }
+
+    // Simple style (original implementation)
+    return this.createSimpleTickerElement(config, position);
+  }
+
+  private createSimpleTickerElement(config: FlashNewsTickerConfig, position: 'top' | 'bottom'): HTMLDivElement {
     const ticker = document.createElement('div');
-    ticker.className = `uvf-flash-ticker ticker-${position}`;
+    ticker.className = `uvf-flash-ticker ticker-${position} ticker-simple`;
 
     const bottomOffset = config.bottomOffset || 0;
     const topOffset = config.topOffset || 0;
@@ -2567,6 +2577,262 @@ export class WebPlayer extends BasePlayer {
     ticker.appendChild(track);
 
     // Add animation keyframes to document if not exists
+    this.ensureTickerAnimations();
+
+    return ticker;
+  }
+
+  private createBroadcastTickerElement(config: FlashNewsTickerConfig, position: 'top' | 'bottom'): HTMLDivElement {
+    const broadcastStyle = config.broadcastStyle || {};
+    const theme = broadcastStyle.theme || 'breaking-red';
+
+    // Get theme colors
+    const themeColors = this.getBroadcastThemeColors(theme, broadcastStyle);
+
+    const ticker = document.createElement('div');
+    ticker.className = `uvf-flash-ticker ticker-${position} ticker-broadcast`;
+
+    const bottomOffset = config.bottomOffset || 0;
+    const topOffset = config.topOffset || 0;
+    const headerHeight = broadcastStyle.headerHeight || 28;
+    const bodyHeight = config.height || 36;
+    const totalHeight = headerHeight + bodyHeight;
+
+    ticker.style.cssText = `
+      position: absolute;
+      left: 0;
+      right: 0;
+      height: ${totalHeight}px;
+      ${position === 'top' ? `top: ${topOffset}px;` : `bottom: ${bottomOffset}px;`}
+      overflow: hidden;
+      pointer-events: none;
+      display: flex;
+      flex-direction: column;
+    `;
+
+    // Create header row (BREAKING NEWS with globe and LIVE badge)
+    const header = document.createElement('div');
+    header.className = 'uvf-ticker-header';
+    header.style.cssText = `
+      display: flex;
+      align-items: center;
+      height: ${headerHeight}px;
+      background: ${themeColors.headerBg};
+      padding: 0 12px;
+      position: relative;
+    `;
+
+    // Add globe graphic if enabled
+    if (broadcastStyle.showGlobe !== false) {
+      const globe = this.createGlobeElement(broadcastStyle.animateGlobe !== false);
+      header.appendChild(globe);
+    }
+
+    // Add header text (BREAKING NEWS)
+    const headerText = document.createElement('span');
+    headerText.className = 'uvf-ticker-header-text';
+    headerText.textContent = broadcastStyle.headerText || 'BREAKING NEWS';
+    headerText.style.cssText = `
+      color: ${broadcastStyle.headerTextColor || '#ffffff'};
+      font-size: ${broadcastStyle.headerFontSize || 16}px;
+      font-weight: 800;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      margin-left: ${broadcastStyle.showGlobe !== false ? '8px' : '0'};
+      text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
+    `;
+    header.appendChild(headerText);
+
+    // Add LIVE badge if enabled
+    if (broadcastStyle.showLiveBadge !== false) {
+      const liveBadge = this.createLiveBadgeElement(broadcastStyle.pulseLiveBadge !== false);
+      header.appendChild(liveBadge);
+    }
+
+    // Create body row (scrolling ticker)
+    const body = document.createElement('div');
+    body.className = 'uvf-ticker-body';
+    body.style.cssText = `
+      display: flex;
+      align-items: center;
+      height: ${bodyHeight}px;
+      background: ${themeColors.bodyBg};
+      overflow: hidden;
+      position: relative;
+    `;
+
+    // Create scrolling track
+    const track = document.createElement('div');
+    track.className = 'uvf-ticker-track';
+
+    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: 100%;
+    `;
+
+    // Calculate responsive font size
+    const containerWidth = this.container?.offsetWidth || 1920;
+    const baseFontSize = config.fontSize || 14;
+    let responsiveFontSize = baseFontSize;
+    if (containerWidth < 768) {
+      responsiveFontSize = Math.max(baseFontSize * 0.8, 12);
+    } else if (containerWidth < 1280) {
+      responsiveFontSize = Math.max(baseFontSize * 0.9, 13);
+    }
+
+    // Render items
+    const renderItems = () => {
+      if (!config.items) return;
+      config.items.forEach((item) => {
+        const span = document.createElement('span');
+        if (item.html) {
+          span.innerHTML = item.html;
+        } else {
+          span.textContent = item.text;
+        }
+        span.style.cssText = `
+          color: ${config.textColor || '#ffffff'};
+          font-size: ${responsiveFontSize}px;
+          font-weight: ${config.fontWeight || 600};
+          margin-right: ${config.gap || 100}px;
+          display: inline-flex;
+          align-items: center;
+        `;
+        track.appendChild(span);
+
+        if (config.separator) {
+          const sep = document.createElement('span');
+          sep.textContent = config.separator;
+          sep.style.cssText = `
+            color: ${config.textColor || '#ffffff'};
+            font-size: ${responsiveFontSize}px;
+            opacity: 0.5;
+            margin: 0 8px;
+          `;
+          track.appendChild(sep);
+        }
+      });
+    };
+
+    for (let i = 0; i < 10; i++) {
+      renderItems();
+    }
+
+    body.appendChild(track);
+    ticker.appendChild(header);
+    ticker.appendChild(body);
+
+    // Add all animation keyframes
+    this.ensureTickerAnimations();
+
+    return ticker;
+  }
+
+  private getBroadcastThemeColors(theme: BroadcastTheme, broadcastStyle: BroadcastStyleConfig): { headerBg: string; bodyBg: string } {
+    switch (theme) {
+      case 'breaking-red':
+        return {
+          headerBg: 'linear-gradient(90deg, #cc0000 0%, #ff0000 50%, #cc0000 100%)',
+          bodyBg: 'linear-gradient(90deg, #1a237e 0%, #283593 50%, #1a237e 100%)'
+        };
+      case 'breaking-blue':
+        return {
+          headerBg: 'linear-gradient(90deg, #0d47a1 0%, #1565c0 50%, #0d47a1 100%)',
+          bodyBg: 'linear-gradient(90deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%)'
+        };
+      case 'alert-red':
+        return {
+          headerBg: 'linear-gradient(90deg, #b71c1c 0%, #d32f2f 50%, #b71c1c 100%)',
+          bodyBg: 'linear-gradient(90deg, #7f0000 0%, #9a0000 50%, #7f0000 100%)'
+        };
+      case 'news-blue':
+        return {
+          headerBg: 'linear-gradient(90deg, #01579b 0%, #0277bd 50%, #01579b 100%)',
+          bodyBg: 'linear-gradient(90deg, #002171 0%, #003c8f 50%, #002171 100%)'
+        };
+      case 'custom':
+        return {
+          headerBg: broadcastStyle.headerColor || '#cc0000',
+          bodyBg: broadcastStyle.bodyColor || '#1a237e'
+        };
+      default:
+        return {
+          headerBg: 'linear-gradient(90deg, #cc0000 0%, #ff0000 50%, #cc0000 100%)',
+          bodyBg: 'linear-gradient(90deg, #1a237e 0%, #283593 50%, #1a237e 100%)'
+        };
+    }
+  }
+
+  private createGlobeElement(animate: boolean): HTMLDivElement {
+    const globeContainer = document.createElement('div');
+    globeContainer.className = 'uvf-ticker-globe';
+    globeContainer.style.cssText = `
+      width: 24px;
+      height: 24px;
+      position: relative;
+      flex-shrink: 0;
+    `;
+
+    // SVG Globe icon
+    globeContainer.innerHTML = `
+      <svg viewBox="0 0 24 24" fill="none" style="width: 100%; height: 100%; ${animate ? 'animation: globe-rotate 8s linear infinite;' : ''}">
+        <circle cx="12" cy="12" r="10" stroke="#ffffff" stroke-width="1.5" fill="none"/>
+        <ellipse cx="12" cy="12" rx="10" ry="4" stroke="#ffffff" stroke-width="1" fill="none"/>
+        <ellipse cx="12" cy="12" rx="4" ry="10" stroke="#ffffff" stroke-width="1" fill="none"/>
+        <line x1="2" y1="12" x2="22" y2="12" stroke="#ffffff" stroke-width="0.5"/>
+        <line x1="12" y1="2" x2="12" y2="22" stroke="#ffffff" stroke-width="0.5"/>
+        <path d="M4 8 Q12 6 20 8" stroke="#ffffff" stroke-width="0.5" fill="none"/>
+        <path d="M4 16 Q12 18 20 16" stroke="#ffffff" stroke-width="0.5" fill="none"/>
+      </svg>
+    `;
+
+    return globeContainer;
+  }
+
+  private createLiveBadgeElement(pulse: boolean): HTMLDivElement {
+    const badge = document.createElement('div');
+    badge.className = 'uvf-ticker-live-badge';
+    badge.style.cssText = `
+      display: flex;
+      align-items: center;
+      margin-left: auto;
+      padding: 2px 8px;
+      background: #ff0000;
+      border-radius: 3px;
+      ${pulse ? 'animation: live-pulse 1.5s ease-in-out infinite;' : ''}
+    `;
+
+    // Red dot
+    const dot = document.createElement('span');
+    dot.style.cssText = `
+      width: 8px;
+      height: 8px;
+      background: #ffffff;
+      border-radius: 50%;
+      margin-right: 4px;
+      ${pulse ? 'animation: dot-blink 1s ease-in-out infinite;' : ''}
+    `;
+    badge.appendChild(dot);
+
+    // LIVE text
+    const text = document.createElement('span');
+    text.textContent = 'LIVE';
+    text.style.cssText = `
+      color: #ffffff;
+      font-size: 11px;
+      font-weight: 800;
+      letter-spacing: 0.5px;
+    `;
+    badge.appendChild(text);
+
+    return badge;
+  }
+
+  private ensureTickerAnimations(): void {
     if (!document.querySelector('#uvf-ticker-animation')) {
       const style = document.createElement('style');
       style.id = 'uvf-ticker-animation';
@@ -2575,11 +2841,21 @@ export class WebPlayer extends BasePlayer {
           0% { transform: translateX(0%); }
           100% { transform: translateX(-100%); }
         }
+        @keyframes globe-rotate {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+        @keyframes live-pulse {
+          0%, 100% { opacity: 1; transform: scale(1); }
+          50% { opacity: 0.85; transform: scale(1.02); }
+        }
+        @keyframes dot-blink {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.3; }
+        }
       `;
       document.head.appendChild(style);
     }
-
-    return ticker;
   }
 
   private calculateTickerDuration(config: FlashNewsTickerConfig): number {

package/packages/web/src/index.ts

@@ -13,5 +13,16 @@ export { WebPlayerView } from './react/WebPlayerView';
 // Export EPG (Electronic Program Guide) components
 export * from './react/EPG';
 
+// Export Flash News Ticker types
+export type {
+  FlashNewsTickerConfig,
+  FlashNewsTickerItem,
+  FlashNewsTickerAPI,
+  TickerDisplayConfig,
+  TickerStyleVariant,
+  BroadcastTheme,
+  BroadcastStyleConfig
+} from './react/types/FlashNewsTickerTypes';
+
 // Version
 export const VERSION = '1.0.0';

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;