unified-video-framework 1.4.438 → 1.4.440

package/packages/web/src/WebPlayer.ts

@@ -20,7 +20,19 @@ import {
   VideoSegment,
   ChapterEvents
 } from './chapters/types/ChapterTypes';
-import type { FlashNewsTickerConfig, BroadcastStyleConfig, BroadcastTheme, TickerStyleVariant } from './react/types/FlashNewsTickerTypes';
+import type {
+  FlashNewsTickerConfig,
+  FlashNewsTickerItem,
+  BroadcastStyleConfig,
+  BroadcastTheme,
+  TickerStyleVariant,
+  TickerLayoutStyle,
+  IntroAnimationType,
+  TwoLineDisplayConfig,
+  DecorativeShapesConfig,
+  ItemCyclingConfig,
+  SeparatorType
+} from './react/types/FlashNewsTickerTypes';
 import YouTubeExtractor from './utils/YouTubeExtractor';
 import { DRMManager, DRMErrorHandler } from './drm';
 import type { DRMInitResult, DRMError } from './drm';
@@ -71,6 +83,19 @@ export class WebPlayer extends BasePlayer {
   private flashTickerTopElement: HTMLDivElement | null = null;
   private flashTickerBottomElement: HTMLDivElement | null = null;
 
+  // Professional Ticker State (for item cycling and intro animations)
+  private tickerCurrentItemIndex: number = 0;
+  private tickerCycleTimer: number | null = null;
+  private tickerConfig: FlashNewsTickerConfig | null = null;
+  private tickerHeadlineElement: HTMLDivElement | null = null;
+  private tickerDetailElement: HTMLDivElement | null = null;
+  private tickerIntroOverlay: HTMLDivElement | null = null;
+  private tickerProgressBar: HTMLDivElement | null = null;
+  private tickerProgressFill: HTMLDivElement | null = null;
+  private tickerIsPaused: boolean = false;
+  private tickerPauseStartTime: number = 0;
+  private tickerRemainingTime: number = 0;
+
   // Free preview gate state
   private previewGateHit: boolean = false;
   private paymentSuccessTime: number = 0;
@@ -2550,6 +2575,11 @@ export class WebPlayer extends BasePlayer {
   private createTickerElement(config: FlashNewsTickerConfig, position: 'top' | 'bottom'): HTMLDivElement {
     // Route to broadcast style if configured
     if (config.styleVariant === 'broadcast') {
+      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);
+      }
       return this.createBroadcastTickerElement(config, position);
     }
 
@@ -2917,14 +2947,19 @@ export class WebPlayer extends BasePlayer {
       const style = document.createElement('style');
       style.id = 'uvf-ticker-animation';
       style.textContent = `
+        /* Basic ticker scroll */
         @keyframes ticker-scroll {
           0% { transform: translateX(0%); }
           100% { transform: translateX(-100%); }
         }
+
+        /* Globe rotation */
         @keyframes globe-rotate {
           0% { transform: rotate(0deg); }
           100% { transform: rotate(360deg); }
         }
+
+        /* LIVE badge animations */
         @keyframes live-pulse {
           0%, 100% { opacity: 1; transform: scale(1); }
           50% { opacity: 0.85; transform: scale(1.02); }
@@ -2933,6 +2968,85 @@ export class WebPlayer extends BasePlayer {
           0%, 100% { opacity: 1; }
           50% { opacity: 0.3; }
         }
+
+        /* Intro Animations */
+        @keyframes intro-slide-in {
+          0% { transform: translateX(-100%); opacity: 0; }
+          20% { transform: translateX(0); opacity: 1; }
+          80% { transform: translateX(0); opacity: 1; }
+          100% { transform: translateX(100%); opacity: 0; }
+        }
+
+        @keyframes intro-flash {
+          0%, 100% { opacity: 0; }
+          10%, 30%, 50%, 70%, 90% { opacity: 1; background: rgba(255,255,255,0.3); }
+          20%, 40%, 60%, 80% { opacity: 1; background: transparent; }
+        }
+
+        @keyframes intro-scale {
+          0% { transform: scale(0); opacity: 0; }
+          20% { transform: scale(1.2); opacity: 1; }
+          30% { transform: scale(1); }
+          80% { transform: scale(1); opacity: 1; }
+          100% { transform: scale(0); opacity: 0; }
+        }
+
+        @keyframes intro-pulse {
+          0% { transform: scale(0.8); opacity: 0; }
+          25% { transform: scale(1.1); opacity: 1; }
+          50% { transform: scale(1); opacity: 1; }
+          75% { transform: scale(1); opacity: 1; }
+          100% { transform: scale(0.8); opacity: 0; }
+        }
+
+        @keyframes intro-shake {
+          0% { transform: translateX(0); opacity: 0; }
+          10% { opacity: 1; }
+          15%, 35%, 55%, 75% { transform: translateX(-5px); }
+          25%, 45%, 65%, 85% { transform: translateX(5px); }
+          90% { transform: translateX(0); opacity: 1; }
+          100% { transform: translateX(0); opacity: 0; }
+        }
+
+        @keyframes intro-none {
+          0% { opacity: 1; }
+          80% { opacity: 1; }
+          100% { opacity: 0; }
+        }
+
+        /* Item Transitions */
+        @keyframes item-fade-out {
+          from { opacity: 1; }
+          to { opacity: 0; }
+        }
+        @keyframes item-fade-in {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+        @keyframes item-slide-out {
+          from { transform: translateY(0); opacity: 1; }
+          to { transform: translateY(-100%); opacity: 0; }
+        }
+        @keyframes item-slide-in {
+          from { transform: translateY(100%); opacity: 0; }
+          to { transform: translateY(0); opacity: 1; }
+        }
+
+        /* Decorative Separator Animations */
+        @keyframes separator-pulse {
+          0%, 100% { opacity: 0.8; transform: scaleY(1); }
+          50% { opacity: 1; transform: scaleY(1.1); }
+        }
+
+        @keyframes chevron-pulse {
+          0%, 100% { transform: translateX(0); opacity: 0.8; }
+          50% { transform: translateX(3px); opacity: 1; }
+        }
+
+        @keyframes diamond-spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
       `;
       document.head.appendChild(style);
     }
@@ -2951,6 +3065,775 @@ export class WebPlayer extends BasePlayer {
     return Math.max(totalWidth / speed, 15); // Minimum 15s for smooth scrolling
   }
 
+  /**
+   * Create professional TV-style ticker with two-line display and item cycling
+   */
+  private createProfessionalTickerElement(config: FlashNewsTickerConfig, position: 'top' | 'bottom'): HTMLDivElement {
+    const broadcastStyle = config.broadcastStyle || {};
+    const theme = broadcastStyle.theme || 'breaking-red';
+    const twoLineConfig = broadcastStyle.twoLineDisplay || {};
+    const itemCycling = config.itemCycling || {};
+
+    // Store config for item cycling
+    this.tickerConfig = config;
+    this.tickerCurrentItemIndex = 0;
+
+    // Get theme colors
+    const themeColors = this.getBroadcastThemeColors(theme, broadcastStyle);
+
+    const ticker = document.createElement('div');
+    ticker.className = `uvf-flash-ticker ticker-${position} ticker-professional`;
+
+    const bottomOffset = config.bottomOffset || 0;
+    const topOffset = config.topOffset || 0;
+    const headerHeight = broadcastStyle.headerHeight || 28;
+
+    // Calculate body height based on two-line config
+    const topLineConfig = twoLineConfig.topLine || {};
+    const bottomLineConfig = twoLineConfig.bottomLine || {};
+    const topLineHeight = topLineConfig.minHeight || 32;
+    const bottomLineHeight = bottomLineConfig.height || 28;
+    const bodyHeight = twoLineConfig.enabled !== false ? topLineHeight + bottomLineHeight : (config.height || 36);
+    const progressHeight = itemCycling.showProgress ? (itemCycling.progressHeight || 3) : 0;
+    const totalHeight = headerHeight + bodyHeight + progressHeight;
+
+    ticker.style.cssText = `
+      position: absolute;
+      left: 0;
+      right: 0;
+      height: ${totalHeight}px;
+      ${position === 'top' ? `top: ${topOffset}px;` : `bottom: ${bottomOffset}px;`}
+      overflow: hidden;
+      pointer-events: ${itemCycling.pauseOnHover !== false ? 'auto' : 'none'};
+      display: flex;
+      flex-direction: column;
+    `;
+
+    // Create header row
+    const header = this.createProfessionalHeader(broadcastStyle, themeColors, headerHeight);
+    ticker.appendChild(header);
+
+    // Create body with two-line display
+    const body = this.createTwoLineBody(config, twoLineConfig, themeColors.bodyBg, bodyHeight);
+    ticker.appendChild(body);
+
+    // Create progress bar if enabled
+    if (itemCycling.showProgress) {
+      const progressBar = this.createProgressBar(itemCycling);
+      ticker.appendChild(progressBar);
+    }
+
+    // Create intro overlay (hidden by default)
+    const introOverlay = this.createIntroOverlay(broadcastStyle);
+    ticker.appendChild(introOverlay);
+    this.tickerIntroOverlay = introOverlay;
+
+    // Add hover pause functionality
+    if (itemCycling.pauseOnHover !== false && itemCycling.enabled) {
+      ticker.addEventListener('mouseenter', () => this.pauseItemCycling());
+      ticker.addEventListener('mouseleave', () => this.resumeItemCycling());
+    }
+
+    // Add all animation keyframes
+    this.ensureTickerAnimations();
+
+    // Start item cycling if enabled
+    if (itemCycling.enabled && config.items && config.items.length > 1) {
+      // Initial display with intro animation if configured
+      const firstItem = config.items[0];
+      if (firstItem.showIntro) {
+        this.playIntroAnimation(firstItem).then(() => {
+          this.startItemCycling();
+        });
+      } else {
+        this.startItemCycling();
+      }
+    }
+
+    return ticker;
+  }
+
+  /**
+   * Create professional header row with globe, separator, text, and LIVE badge
+   */
+  private createProfessionalHeader(
+    broadcastStyle: BroadcastStyleConfig,
+    themeColors: { headerBg: string; bodyBg: string },
+    headerHeight: number
+  ): HTMLDivElement {
+    const header = document.createElement('div');
+    header.className = 'uvf-ticker-header-row';
+    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 decorative separator between globe and text
+    if (broadcastStyle.decorativeShapes?.headerSeparator) {
+      const separator = this.createDecorativeSeparator(broadcastStyle.decorativeShapes.headerSeparator);
+      header.appendChild(separator);
+    } else if (broadcastStyle.showGlobe !== false) {
+      // Default simple separator
+      const defaultSeparator = document.createElement('div');
+      defaultSeparator.className = 'uvf-ticker-separator';
+      defaultSeparator.style.cssText = `
+        width: 2px;
+        height: 18px;
+        background: rgba(255,255,255,0.6);
+        margin: 0 10px;
+      `;
+      header.appendChild(defaultSeparator);
+    }
+
+    // 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;
+      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);
+    }
+
+    return header;
+  }
+
+  /**
+   * Create decorative separator element
+   */
+  private createDecorativeSeparator(config: NonNullable<DecorativeShapesConfig['headerSeparator']>): HTMLDivElement {
+    const separator = document.createElement('div');
+    separator.className = 'uvf-ticker-separator';
+
+    const width = config.width || 2;
+    const height = config.height || 20;
+    const color = config.color || '#ffffff';
+    const animated = config.animated !== false;
+    const type = config.type || 'line';
+
+    let animationStyle = '';
+    let content = '';
+
+    switch (type) {
+      case 'pulse-line':
+        animationStyle = animated ? 'animation: separator-pulse 1.5s ease-in-out infinite;' : '';
+        break;
+      case 'chevron':
+        content = '›';
+        animationStyle = animated ? 'animation: chevron-pulse 1s ease-in-out infinite;' : '';
+        break;
+      case 'diamond':
+        content = '◆';
+        animationStyle = animated ? 'animation: diamond-spin 3s linear infinite;' : '';
+        break;
+      case 'dot':
+        content = '•';
+        animationStyle = animated ? 'animation: dot-blink 1s ease-in-out infinite;' : '';
+        break;
+      default:
+        // Simple line
+        break;
+    }
+
+    if (type === 'line' || type === 'pulse-line') {
+      separator.style.cssText = `
+        width: ${width}px;
+        height: ${height}px;
+        background: ${color};
+        margin: 0 10px;
+        opacity: 0.8;
+        ${animationStyle}
+      `;
+    } else {
+      separator.textContent = content;
+      separator.style.cssText = `
+        color: ${color};
+        font-size: ${height}px;
+        margin: 0 10px;
+        opacity: 0.8;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        ${animationStyle}
+      `;
+    }
+
+    return separator;
+  }
+
+  /**
+   * Create two-line body with static headline and scrolling detail
+   */
+  private createTwoLineBody(
+    config: FlashNewsTickerConfig,
+    twoLineConfig: TwoLineDisplayConfig,
+    bodyBg: string,
+    bodyHeight: number
+  ): HTMLDivElement {
+    const body = document.createElement('div');
+    body.className = 'uvf-ticker-body-row';
+    body.style.cssText = `
+      display: flex;
+      flex-direction: column;
+      height: ${bodyHeight}px;
+      background: ${bodyBg};
+      overflow: hidden;
+      position: relative;
+    `;
+
+    const topLineConfig = twoLineConfig.topLine || {};
+    const bottomLineConfig = twoLineConfig.bottomLine || {};
+
+    // Get first item for initial display
+    const firstItem = config.items?.[0];
+
+    // Create headline line (top - static)
+    const headlineLine = document.createElement('div');
+    headlineLine.className = 'uvf-ticker-headline-line';
+    this.tickerHeadlineElement = headlineLine;
+
+    const topLineHeight = topLineConfig.minHeight || 32;
+    const topLineFontSize = topLineConfig.fontSize || 16;
+    const topLineLineHeight = topLineConfig.lineHeight || 1.3;
+    const topLineMultiLine = topLineConfig.multiLine !== false;
+    const topLineMaxLines = topLineConfig.maxLines || 2;
+
+    headlineLine.style.cssText = `
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: ${topLineHeight}px;
+      padding: ${topLineConfig.padding || 8}px 12px;
+      background: ${topLineConfig.backgroundColor || 'transparent'};
+      overflow: hidden;
+      text-align: center;
+    `;
+
+    const headlineText = document.createElement('span');
+    headlineText.className = 'uvf-ticker-headline-text';
+
+    // Support multi-line text with CSS
+    headlineText.style.cssText = `
+      color: ${topLineConfig.textColor || config.textColor || '#ffffff'};
+      font-size: ${topLineFontSize}px;
+      font-weight: 700;
+      line-height: ${topLineLineHeight};
+      text-align: center;
+      width: 100%;
+      ${topLineMultiLine ? `
+        display: -webkit-box;
+        -webkit-line-clamp: ${topLineMaxLines};
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: normal;
+        word-wrap: break-word;
+      ` : `
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      `}
+    `;
+
+    // Set initial headline content
+    if (firstItem) {
+      const headlineContent = firstItem.headline || firstItem.text;
+      if (firstItem.headlineHtml) {
+        headlineText.innerHTML = this.formatHeadlineText(firstItem.headlineHtml, topLineConfig, true);
+      } else if (headlineContent) {
+        headlineText.innerHTML = this.formatHeadlineText(headlineContent, topLineConfig, false);
+      }
+    }
+
+    headlineLine.appendChild(headlineText);
+    body.appendChild(headlineLine);
+
+    // Add separator line between headline and detail
+    if (twoLineConfig.showSeparator !== false) {
+      const separatorLine = document.createElement('div');
+      separatorLine.style.cssText = `
+        height: 1px;
+        background: ${twoLineConfig.separatorColor || 'rgba(255,255,255,0.2)'};
+        margin: 0 12px;
+      `;
+      body.appendChild(separatorLine);
+    }
+
+    // Create detail line (bottom - scrolling)
+    const detailLine = document.createElement('div');
+    detailLine.className = 'uvf-ticker-detail-line';
+    this.tickerDetailElement = detailLine;
+
+    const bottomLineHeight = bottomLineConfig.height || 28;
+    const bottomLineFontSize = bottomLineConfig.fontSize || 14;
+    const bottomLineSpeed = bottomLineConfig.speed || 80;
+
+    detailLine.style.cssText = `
+      display: flex;
+      align-items: center;
+      height: ${bottomLineHeight}px;
+      background: ${bottomLineConfig.backgroundColor || 'transparent'};
+      overflow: hidden;
+      position: relative;
+    `;
+
+    // Create scrolling track for detail
+    const track = document.createElement('div');
+    track.className = 'uvf-ticker-track';
+
+    // Calculate scroll duration based on content
+    const detailText = firstItem?.text || '';
+    const textWidth = detailText.length * 10; // Approximate
+    const duration = Math.max(textWidth / bottomLineSpeed, 10);
+
+    track.style.cssText = `
+      display: flex;
+      white-space: nowrap;
+      animation: ticker-scroll ${duration}s linear infinite;
+      will-change: transform;
+      padding-left: 100%;
+    `;
+
+    // Render detail text multiple times for seamless loop
+    const renderDetail = (text: string, html?: string) => {
+      for (let i = 0; i < 10; i++) {
+        const span = document.createElement('span');
+        if (html) {
+          span.innerHTML = html;
+        } else {
+          span.textContent = text;
+        }
+        span.style.cssText = `
+          color: ${bottomLineConfig.textColor || config.textColor || '#ffffff'};
+          font-size: ${bottomLineFontSize}px;
+          font-weight: 500;
+          margin-right: 100px;
+          display: inline-flex;
+          align-items: center;
+        `;
+        track.appendChild(span);
+      }
+    };
+
+    if (firstItem) {
+      renderDetail(firstItem.text, firstItem.html);
+    }
+
+    detailLine.appendChild(track);
+    body.appendChild(detailLine);
+
+    return body;
+  }
+
+  /**
+   * Create progress bar for item cycling
+   */
+  private createProgressBar(itemCycling: ItemCyclingConfig): HTMLDivElement {
+    const progressBar = document.createElement('div');
+    progressBar.className = 'uvf-ticker-progress';
+    this.tickerProgressBar = progressBar;
+
+    const height = itemCycling.progressHeight || 3;
+    progressBar.style.cssText = `
+      height: ${height}px;
+      background: rgba(0,0,0,0.3);
+      position: relative;
+      overflow: hidden;
+    `;
+
+    const progressFill = document.createElement('div');
+    progressFill.className = 'uvf-progress-fill';
+    this.tickerProgressFill = progressFill;
+
+    progressFill.style.cssText = `
+      height: 100%;
+      width: 0%;
+      background: ${itemCycling.progressColor || '#ffffff'};
+      transition: width 0.1s linear;
+    `;
+
+    progressBar.appendChild(progressFill);
+    return progressBar;
+  }
+
+  /**
+   * Create intro overlay for "JUST IN" / "BREAKING" animations
+   */
+  private createIntroOverlay(broadcastStyle: BroadcastStyleConfig): HTMLDivElement {
+    const overlay = document.createElement('div');
+    overlay.className = 'uvf-ticker-intro-overlay';
+    overlay.style.cssText = `
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: none;
+      align-items: center;
+      justify-content: center;
+      background: rgba(200, 0, 0, 0.95);
+      z-index: 10;
+    `;
+
+    const introText = document.createElement('span');
+    introText.className = 'uvf-intro-text';
+    introText.style.cssText = `
+      color: #ffffff;
+      font-size: 24px;
+      font-weight: 900;
+      text-transform: uppercase;
+      letter-spacing: 3px;
+      text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+    `;
+    introText.textContent = 'BREAKING';
+
+    overlay.appendChild(introText);
+    return overlay;
+  }
+
+  /**
+   * Play intro animation for a news item
+   */
+  private playIntroAnimation(item: FlashNewsTickerItem): Promise<void> {
+    return new Promise((resolve) => {
+      if (!this.tickerIntroOverlay || !item.showIntro) {
+        resolve();
+        return;
+      }
+
+      const broadcastStyle = this.tickerConfig?.broadcastStyle || {};
+      const animation = item.introAnimation || broadcastStyle.defaultIntroAnimation || 'slide-in';
+      const duration = item.introDuration || broadcastStyle.defaultIntroDuration || 2000;
+      const introText = item.introText || 'BREAKING';
+
+      // Update intro text
+      const textElement = this.tickerIntroOverlay.querySelector('.uvf-intro-text') as HTMLSpanElement;
+      if (textElement) {
+        textElement.textContent = introText;
+      }
+
+      // Apply animation
+      this.tickerIntroOverlay.style.display = 'flex';
+      this.tickerIntroOverlay.style.animation = `intro-${animation} ${duration}ms ease-out forwards`;
+
+      // Hide after animation completes
+      setTimeout(() => {
+        if (this.tickerIntroOverlay) {
+          this.tickerIntroOverlay.style.display = 'none';
+          this.tickerIntroOverlay.style.animation = '';
+        }
+        resolve();
+      }, duration);
+    });
+  }
+
+  /**
+   * Start automatic item cycling
+   */
+  private startItemCycling(): void {
+    if (!this.tickerConfig?.items || this.tickerConfig.items.length <= 1) return;
+
+    const itemCycling = this.tickerConfig.itemCycling || {};
+    if (!itemCycling.enabled) return;
+
+    const currentItem = this.tickerConfig.items[this.tickerCurrentItemIndex];
+    const duration = (currentItem.duration || itemCycling.defaultDuration || 10) * 1000;
+
+    // Start progress animation
+    this.animateProgress(duration);
+
+    // Set timer for next item
+    this.tickerCycleTimer = window.setTimeout(() => {
+      this.transitionToNextItem();
+    }, duration);
+  }
+
+  /**
+   * Stop item cycling
+   */
+  private stopItemCycling(): void {
+    if (this.tickerCycleTimer) {
+      clearTimeout(this.tickerCycleTimer);
+      this.tickerCycleTimer = null;
+    }
+  }
+
+  /**
+   * Pause item cycling (for hover)
+   */
+  private pauseItemCycling(): void {
+    if (!this.tickerCycleTimer || this.tickerIsPaused) return;
+
+    this.tickerIsPaused = true;
+    this.tickerPauseStartTime = Date.now();
+
+    // Calculate remaining time
+    const itemCycling = this.tickerConfig?.itemCycling || {};
+    const currentItem = this.tickerConfig?.items?.[this.tickerCurrentItemIndex];
+    const totalDuration = (currentItem?.duration || itemCycling.defaultDuration || 10) * 1000;
+
+    // Stop the timer
+    clearTimeout(this.tickerCycleTimer);
+    this.tickerCycleTimer = null;
+
+    // Pause progress bar animation
+    if (this.tickerProgressFill) {
+      const computedWidth = window.getComputedStyle(this.tickerProgressFill).width;
+      this.tickerProgressFill.style.transition = 'none';
+      this.tickerProgressFill.style.width = computedWidth;
+    }
+  }
+
+  /**
+   * Resume item cycling (after hover)
+   */
+  private resumeItemCycling(): void {
+    if (!this.tickerIsPaused) return;
+
+    this.tickerIsPaused = false;
+
+    // Calculate remaining time based on progress
+    const itemCycling = this.tickerConfig?.itemCycling || {};
+    const currentItem = this.tickerConfig?.items?.[this.tickerCurrentItemIndex];
+    const totalDuration = (currentItem?.duration || itemCycling.defaultDuration || 10) * 1000;
+
+    // Get current progress percentage
+    let remainingTime = totalDuration;
+    if (this.tickerProgressFill) {
+      const currentWidth = parseFloat(this.tickerProgressFill.style.width) || 0;
+      remainingTime = totalDuration * (1 - currentWidth / 100);
+    }
+
+    // Resume progress animation
+    this.animateProgress(remainingTime);
+
+    // Set timer for remaining time
+    this.tickerCycleTimer = window.setTimeout(() => {
+      this.transitionToNextItem();
+    }, remainingTime);
+  }
+
+  /**
+   * Animate progress bar
+   */
+  private animateProgress(duration: number): void {
+    if (!this.tickerProgressFill) return;
+
+    // Reset to start
+    this.tickerProgressFill.style.transition = 'none';
+    this.tickerProgressFill.style.width = '0%';
+
+    // Force reflow
+    this.tickerProgressFill.offsetHeight;
+
+    // Animate to 100%
+    this.tickerProgressFill.style.transition = `width ${duration}ms linear`;
+    this.tickerProgressFill.style.width = '100%';
+  }
+
+  /**
+   * Transition to the next news item
+   */
+  private async transitionToNextItem(): Promise<void> {
+    if (!this.tickerConfig?.items || this.tickerConfig.items.length <= 1) return;
+
+    const itemCycling = this.tickerConfig.itemCycling || {};
+    const transitionType = itemCycling.transitionType || 'fade';
+    const transitionDuration = itemCycling.transitionDuration || 500;
+
+    // Move to next item
+    this.tickerCurrentItemIndex = (this.tickerCurrentItemIndex + 1) % this.tickerConfig.items.length;
+    const nextItem = this.tickerConfig.items[this.tickerCurrentItemIndex];
+
+    // Play intro animation if configured
+    if (nextItem.showIntro) {
+      await this.playIntroAnimation(nextItem);
+    }
+
+    // Apply transition animation
+    await this.applyItemTransition(transitionType, transitionDuration, nextItem);
+
+    // Continue cycling
+    this.startItemCycling();
+  }
+
+  /**
+   * Apply transition animation between items
+   */
+  private applyItemTransition(
+    transitionType: string,
+    duration: number,
+    item: FlashNewsTickerItem
+  ): Promise<void> {
+    return new Promise((resolve) => {
+      const headline = this.tickerHeadlineElement?.querySelector('.uvf-ticker-headline-text') as HTMLSpanElement;
+      const detailTrack = this.tickerDetailElement?.querySelector('.uvf-ticker-track') as HTMLDivElement;
+
+      if (!headline || !detailTrack) {
+        this.updateItemContent(item);
+        resolve();
+        return;
+      }
+
+      if (transitionType === 'none') {
+        this.updateItemContent(item);
+        resolve();
+        return;
+      }
+
+      // Apply fade or slide out animation
+      const outAnimation = transitionType === 'slide' ? 'item-slide-out' : 'item-fade-out';
+      const inAnimation = transitionType === 'slide' ? 'item-slide-in' : 'item-fade-in';
+
+      headline.style.animation = `${outAnimation} ${duration / 2}ms ease-out forwards`;
+
+      setTimeout(() => {
+        // Update content
+        this.updateItemContent(item);
+
+        // Apply fade or slide in animation
+        headline.style.animation = `${inAnimation} ${duration / 2}ms ease-out forwards`;
+
+        setTimeout(() => {
+          headline.style.animation = '';
+          resolve();
+        }, duration / 2);
+      }, duration / 2);
+    });
+  }
+
+  /**
+   * Format headline text with optional forced line breaks
+   */
+  private formatHeadlineText(text: string, topLineConfig: { forceMultiLine?: boolean; breakAt?: number | string }, isHtml: boolean = false): string {
+    if (!topLineConfig.forceMultiLine) {
+      // If it's HTML, return as-is; otherwise escape for safety
+      return isHtml ? text : this.escapeHtml(text);
+    }
+
+    // Calculate break position
+    let breakPosition: number;
+    const breakAt = topLineConfig.breakAt || '50%';
+
+    if (typeof breakAt === 'string' && breakAt.endsWith('%')) {
+      const percentage = parseFloat(breakAt) / 100;
+      breakPosition = Math.floor(text.length * percentage);
+    } else {
+      breakPosition = typeof breakAt === 'number' ? breakAt : Math.floor(text.length / 2);
+    }
+
+    // Find the nearest space to break at (for better readability)
+    let actualBreakPos = breakPosition;
+
+    // Look for a space near the break position
+    const searchRange = Math.min(15, Math.floor(text.length / 4)); // Search within ~15 chars or 25% of text
+    for (let i = 0; i <= searchRange; i++) {
+      // Check forward first, then backward
+      if (breakPosition + i < text.length && text[breakPosition + i] === ' ') {
+        actualBreakPos = breakPosition + i;
+        break;
+      }
+      if (breakPosition - i >= 0 && text[breakPosition - i] === ' ') {
+        actualBreakPos = breakPosition - i;
+        break;
+      }
+    }
+
+    // Split and join with <br>
+    const line1 = text.substring(0, actualBreakPos).trim();
+    const line2 = text.substring(actualBreakPos).trim();
+
+    if (isHtml) {
+      // For HTML content, try to insert <br> at a reasonable position
+      return `${line1}<br>${line2}`;
+    }
+
+    return `${this.escapeHtml(line1)}<br>${this.escapeHtml(line2)}`;
+  }
+
+  /**
+   * Escape HTML special characters
+   */
+  private escapeHtml(text: string): string {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  /**
+   * Update headline and detail content for current item
+   */
+  private updateItemContent(item: FlashNewsTickerItem): void {
+    // Update headline
+    const headline = this.tickerHeadlineElement?.querySelector('.uvf-ticker-headline-text') as HTMLSpanElement;
+    if (headline) {
+      const topLineConfig = this.tickerConfig?.broadcastStyle?.twoLineDisplay?.topLine || {};
+      const headlineContent = item.headline || item.text;
+
+      if (item.headlineHtml) {
+        headline.innerHTML = this.formatHeadlineText(item.headlineHtml, topLineConfig, true);
+      } else if (headlineContent) {
+        headline.innerHTML = this.formatHeadlineText(headlineContent, topLineConfig, false);
+      }
+    }
+
+    // Update detail track
+    const detailTrack = this.tickerDetailElement?.querySelector('.uvf-ticker-track') as HTMLDivElement;
+    if (detailTrack) {
+      // Clear existing content
+      detailTrack.innerHTML = '';
+
+      // Get style config
+      const bottomLineConfig = this.tickerConfig?.broadcastStyle?.twoLineDisplay?.bottomLine || {};
+      const bottomLineFontSize = bottomLineConfig.fontSize || 14;
+
+      // Re-render detail text
+      for (let i = 0; i < 10; i++) {
+        const span = document.createElement('span');
+        if (item.html) {
+          span.innerHTML = item.html;
+        } else {
+          span.textContent = item.text;
+        }
+        span.style.cssText = `
+          color: ${bottomLineConfig.textColor || this.tickerConfig?.textColor || '#ffffff'};
+          font-size: ${bottomLineFontSize}px;
+          font-weight: 500;
+          margin-right: 100px;
+          display: inline-flex;
+          align-items: center;
+        `;
+        detailTrack.appendChild(span);
+      }
+
+      // Update scroll speed
+      const bottomLineSpeed = bottomLineConfig.speed || 80;
+      const textWidth = item.text.length * 10;
+      const duration = Math.max(textWidth / bottomLineSpeed, 10);
+      detailTrack.style.animation = `ticker-scroll ${duration}s linear infinite`;
+    }
+  }
+
   setAutoQuality(enabled: boolean): void {
     this.autoQuality = enabled;