unified-video-framework 1.4.438 → 1.4.439

package/packages/web/dist/WebPlayer.js

@@ -34,6 +34,17 @@ export class WebPlayer extends BasePlayer {
         this.flashTickerContainer = null;
         this.flashTickerTopElement = null;
         this.flashTickerBottomElement = null;
+        this.tickerCurrentItemIndex = 0;
+        this.tickerCycleTimer = null;
+        this.tickerConfig = null;
+        this.tickerHeadlineElement = null;
+        this.tickerDetailElement = null;
+        this.tickerIntroOverlay = null;
+        this.tickerProgressBar = null;
+        this.tickerProgressFill = null;
+        this.tickerIsPaused = false;
+        this.tickerPauseStartTime = 0;
+        this.tickerRemainingTime = 0;
         this.previewGateHit = false;
         this.paymentSuccessTime = 0;
         this.paymentSuccessful = false;
@@ -1939,6 +1950,10 @@ export class WebPlayer extends BasePlayer {
     }
     createTickerElement(config, position) {
         if (config.styleVariant === 'broadcast') {
+            const layoutStyle = config.broadcastStyle?.layoutStyle || 'broadcast';
+            if (layoutStyle === 'two-line' || layoutStyle === 'professional') {
+                return this.createProfessionalTickerElement(config, position);
+            }
             return this.createBroadcastTickerElement(config, position);
         }
         return this.createSimpleTickerElement(config, position);
@@ -2241,14 +2256,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); }
@@ -2257,6 +2277,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);
         }
@@ -2273,6 +2372,516 @@ export class WebPlayer extends BasePlayer {
         const totalWidth = (itemsLength * avgCharWidth) + (config.items.length * gap) + (config.items.length * separatorWidth);
         return Math.max(totalWidth / speed, 15);
     }
+    createProfessionalTickerElement(config, position) {
+        const broadcastStyle = config.broadcastStyle || {};
+        const theme = broadcastStyle.theme || 'breaking-red';
+        const twoLineConfig = broadcastStyle.twoLineDisplay || {};
+        const itemCycling = config.itemCycling || {};
+        this.tickerConfig = config;
+        this.tickerCurrentItemIndex = 0;
+        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;
+        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;
+    `;
+        const header = this.createProfessionalHeader(broadcastStyle, themeColors, headerHeight);
+        ticker.appendChild(header);
+        const body = this.createTwoLineBody(config, twoLineConfig, themeColors.bodyBg, bodyHeight);
+        ticker.appendChild(body);
+        if (itemCycling.showProgress) {
+            const progressBar = this.createProgressBar(itemCycling);
+            ticker.appendChild(progressBar);
+        }
+        const introOverlay = this.createIntroOverlay(broadcastStyle);
+        ticker.appendChild(introOverlay);
+        this.tickerIntroOverlay = introOverlay;
+        if (itemCycling.pauseOnHover !== false && itemCycling.enabled) {
+            ticker.addEventListener('mouseenter', () => this.pauseItemCycling());
+            ticker.addEventListener('mouseleave', () => this.resumeItemCycling());
+        }
+        this.ensureTickerAnimations();
+        if (itemCycling.enabled && config.items && config.items.length > 1) {
+            const firstItem = config.items[0];
+            if (firstItem.showIntro) {
+                this.playIntroAnimation(firstItem).then(() => {
+                    this.startItemCycling();
+                });
+            }
+            else {
+                this.startItemCycling();
+            }
+        }
+        return ticker;
+    }
+    createProfessionalHeader(broadcastStyle, themeColors, headerHeight) {
+        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;
+    `;
+        if (broadcastStyle.showGlobe !== false) {
+            const globe = this.createGlobeElement(broadcastStyle.animateGlobe !== false);
+            header.appendChild(globe);
+        }
+        if (broadcastStyle.decorativeShapes?.headerSeparator) {
+            const separator = this.createDecorativeSeparator(broadcastStyle.decorativeShapes.headerSeparator);
+            header.appendChild(separator);
+        }
+        else if (broadcastStyle.showGlobe !== false) {
+            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);
+        }
+        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);
+        if (broadcastStyle.showLiveBadge !== false) {
+            const liveBadge = this.createLiveBadgeElement(broadcastStyle.pulseLiveBadge !== false);
+            header.appendChild(liveBadge);
+        }
+        return header;
+    }
+    createDecorativeSeparator(config) {
+        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:
+                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;
+    }
+    createTwoLineBody(config, twoLineConfig, bodyBg, bodyHeight) {
+        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 || {};
+        const firstItem = config.items?.[0];
+        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;
+      min-height: ${topLineHeight}px;
+      padding: ${topLineConfig.padding || 8}px 12px;
+      background: ${topLineConfig.backgroundColor || 'transparent'};
+      overflow: hidden;
+      ${topLineMultiLine ? '' : 'white-space: nowrap;'}
+    `;
+        const headlineText = document.createElement('span');
+        headlineText.className = 'uvf-ticker-headline-text';
+        headlineText.style.cssText = `
+      color: ${topLineConfig.textColor || config.textColor || '#ffffff'};
+      font-size: ${topLineFontSize}px;
+      font-weight: 700;
+      line-height: ${topLineLineHeight};
+      ${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;
+      `}
+    `;
+        if (firstItem) {
+            if (firstItem.headlineHtml) {
+                headlineText.innerHTML = firstItem.headlineHtml;
+            }
+            else if (firstItem.headline) {
+                headlineText.textContent = firstItem.headline;
+            }
+            else {
+                headlineText.textContent = firstItem.text;
+            }
+        }
+        headlineLine.appendChild(headlineText);
+        body.appendChild(headlineLine);
+        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);
+        }
+        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;
+    `;
+        const track = document.createElement('div');
+        track.className = 'uvf-ticker-track';
+        const detailText = firstItem?.text || '';
+        const textWidth = detailText.length * 10;
+        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%;
+    `;
+        const renderDetail = (text, html) => {
+            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;
+    }
+    createProgressBar(itemCycling) {
+        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;
+    }
+    createIntroOverlay(broadcastStyle) {
+        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;
+    }
+    playIntroAnimation(item) {
+        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';
+            const textElement = this.tickerIntroOverlay.querySelector('.uvf-intro-text');
+            if (textElement) {
+                textElement.textContent = introText;
+            }
+            this.tickerIntroOverlay.style.display = 'flex';
+            this.tickerIntroOverlay.style.animation = `intro-${animation} ${duration}ms ease-out forwards`;
+            setTimeout(() => {
+                if (this.tickerIntroOverlay) {
+                    this.tickerIntroOverlay.style.display = 'none';
+                    this.tickerIntroOverlay.style.animation = '';
+                }
+                resolve();
+            }, duration);
+        });
+    }
+    startItemCycling() {
+        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;
+        this.animateProgress(duration);
+        this.tickerCycleTimer = window.setTimeout(() => {
+            this.transitionToNextItem();
+        }, duration);
+    }
+    stopItemCycling() {
+        if (this.tickerCycleTimer) {
+            clearTimeout(this.tickerCycleTimer);
+            this.tickerCycleTimer = null;
+        }
+    }
+    pauseItemCycling() {
+        if (!this.tickerCycleTimer || this.tickerIsPaused)
+            return;
+        this.tickerIsPaused = true;
+        this.tickerPauseStartTime = Date.now();
+        const itemCycling = this.tickerConfig?.itemCycling || {};
+        const currentItem = this.tickerConfig?.items?.[this.tickerCurrentItemIndex];
+        const totalDuration = (currentItem?.duration || itemCycling.defaultDuration || 10) * 1000;
+        clearTimeout(this.tickerCycleTimer);
+        this.tickerCycleTimer = null;
+        if (this.tickerProgressFill) {
+            const computedWidth = window.getComputedStyle(this.tickerProgressFill).width;
+            this.tickerProgressFill.style.transition = 'none';
+            this.tickerProgressFill.style.width = computedWidth;
+        }
+    }
+    resumeItemCycling() {
+        if (!this.tickerIsPaused)
+            return;
+        this.tickerIsPaused = false;
+        const itemCycling = this.tickerConfig?.itemCycling || {};
+        const currentItem = this.tickerConfig?.items?.[this.tickerCurrentItemIndex];
+        const totalDuration = (currentItem?.duration || itemCycling.defaultDuration || 10) * 1000;
+        let remainingTime = totalDuration;
+        if (this.tickerProgressFill) {
+            const currentWidth = parseFloat(this.tickerProgressFill.style.width) || 0;
+            remainingTime = totalDuration * (1 - currentWidth / 100);
+        }
+        this.animateProgress(remainingTime);
+        this.tickerCycleTimer = window.setTimeout(() => {
+            this.transitionToNextItem();
+        }, remainingTime);
+    }
+    animateProgress(duration) {
+        if (!this.tickerProgressFill)
+            return;
+        this.tickerProgressFill.style.transition = 'none';
+        this.tickerProgressFill.style.width = '0%';
+        this.tickerProgressFill.offsetHeight;
+        this.tickerProgressFill.style.transition = `width ${duration}ms linear`;
+        this.tickerProgressFill.style.width = '100%';
+    }
+    async transitionToNextItem() {
+        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;
+        this.tickerCurrentItemIndex = (this.tickerCurrentItemIndex + 1) % this.tickerConfig.items.length;
+        const nextItem = this.tickerConfig.items[this.tickerCurrentItemIndex];
+        if (nextItem.showIntro) {
+            await this.playIntroAnimation(nextItem);
+        }
+        await this.applyItemTransition(transitionType, transitionDuration, nextItem);
+        this.startItemCycling();
+    }
+    applyItemTransition(transitionType, duration, item) {
+        return new Promise((resolve) => {
+            const headline = this.tickerHeadlineElement?.querySelector('.uvf-ticker-headline-text');
+            const detailTrack = this.tickerDetailElement?.querySelector('.uvf-ticker-track');
+            if (!headline || !detailTrack) {
+                this.updateItemContent(item);
+                resolve();
+                return;
+            }
+            if (transitionType === 'none') {
+                this.updateItemContent(item);
+                resolve();
+                return;
+            }
+            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(() => {
+                this.updateItemContent(item);
+                headline.style.animation = `${inAnimation} ${duration / 2}ms ease-out forwards`;
+                setTimeout(() => {
+                    headline.style.animation = '';
+                    resolve();
+                }, duration / 2);
+            }, duration / 2);
+        });
+    }
+    updateItemContent(item) {
+        const headline = this.tickerHeadlineElement?.querySelector('.uvf-ticker-headline-text');
+        if (headline) {
+            if (item.headlineHtml) {
+                headline.innerHTML = item.headlineHtml;
+            }
+            else if (item.headline) {
+                headline.textContent = item.headline;
+            }
+            else {
+                headline.textContent = item.text;
+            }
+        }
+        const detailTrack = this.tickerDetailElement?.querySelector('.uvf-ticker-track');
+        if (detailTrack) {
+            detailTrack.innerHTML = '';
+            const bottomLineConfig = this.tickerConfig?.broadcastStyle?.twoLineDisplay?.bottomLine || {};
+            const bottomLineFontSize = bottomLineConfig.fontSize || 14;
+            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);
+            }
+            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) {
         this.autoQuality = enabled;
         if (this.hls) {