unified-video-framework 1.4.342 → 1.4.344

package/packages/web/src/react/WebPlayerView.tsx

@@ -7,11 +7,10 @@ import { GoogleAdsManager } from '../ads/GoogleAdsManager';
 // EPG imports - conditionally loaded
 import type { EPGData, EPGConfig, EPGProgram, EPGProgramRow } from './types/EPGTypes';
 import type { VCManifest, VCProduct, VCEvent } from './types/VideoCommerceTypes';
-import type { FlashNewsTickerConfig, FlashNewsTickerAPI } from './types/FlashNewsTickerTypes';
+import type { FlashNewsTickerConfig } from './types/FlashNewsTickerTypes';
 import { useCommerceSync } from './hooks/useCommerceSync';
 import ProductBadge from './components/commerce/ProductBadge';
 import ProductPanel from './components/commerce/ProductPanel';
-import FlashNewsTicker from './components/FlashNewsTicker';
 let EPGOverlay: React.ComponentType<any> | null = null;
 
 // Lazy load EPG components to avoid bundle size impact when not used
@@ -433,7 +432,6 @@ export type WebPlayerViewProps = {
 
   // Flash News Ticker
   flashNewsTicker?: FlashNewsTickerConfig;                                         // Flash news ticker configuration
-  onFlashNewsTickerAPI?: (api: FlashNewsTickerAPI) => void;                        // Callback to receive ticker API
 };
 
 export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
@@ -441,7 +439,6 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
   const internalPlayerRef = useRef<WebPlayer | null>(null);
   // Use external ref if provided, otherwise use internal
   const playerRef = props.playerRef || internalPlayerRef;
-  const flashNewsTickerAPIRef = useRef<FlashNewsTickerAPI | null>(null);
   const [dimensions, setDimensions] = useState({
     width: typeof window !== 'undefined' ? window.innerWidth : 1920,
     height: typeof window !== 'undefined' ? window.innerHeight : 1080,
@@ -1559,6 +1556,18 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
     } catch (_) {}
   }, [JSON.stringify(props.playerTheme)]);
 
+  // Update flash news ticker when config changes
+  useEffect(() => {
+    const p = playerRef.current as any;
+    if (p && typeof p.setFlashNewsTicker === 'function' && props.flashNewsTicker) {
+      try {
+        p.setFlashNewsTicker(props.flashNewsTicker);
+      } catch (err) {
+        console.warn('[WebPlayerView] Failed to update flash news ticker:', err);
+      }
+    }
+  }, [JSON.stringify(props.flashNewsTicker)]);
+
   const responsiveStyle = getResponsiveDimensions();
   
   // Prepare EPG config with action handlers
@@ -1730,33 +1739,6 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
       />
     )}
 
-    {/* Flash News Ticker Overlays */}
-    {props.flashNewsTicker?.enabled && (
-      <>
-        {(props.flashNewsTicker.position === 'top' ||
-          props.flashNewsTicker.position === 'both') && (
-          <FlashNewsTicker
-            config={{ ...props.flashNewsTicker, position: 'top' }}
-            onAPIReady={(api) => {
-              flashNewsTickerAPIRef.current = api;
-              props.onFlashNewsTickerAPI?.(api);
-            }}
-          />
-        )}
-        {(props.flashNewsTicker.position === 'bottom' ||
-          props.flashNewsTicker.position === 'both') && (
-          <FlashNewsTicker
-            config={{ ...props.flashNewsTicker, position: 'bottom' }}
-            onAPIReady={(api) => {
-              if (!flashNewsTickerAPIRef.current) {
-                flashNewsTickerAPIRef.current = api;
-                props.onFlashNewsTickerAPI?.(api);
-              }
-            }}
-          />
-        )}
-      </>
-    )}
     </>
   );
 };

package/packages/web/src/react/components/FlashNewsTicker.tsx

@@ -1,220 +0,0 @@
-import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
-import type {
-  FlashNewsTickerConfig,
-  FlashNewsTickerItem,
-  FlashNewsTickerAPI,
-} from '../types/FlashNewsTickerTypes';
-
-interface Props {
-  config: FlashNewsTickerConfig;
-  onAPIReady?: (api: FlashNewsTickerAPI) => void;
-}
-
-export const FlashNewsTicker: React.FC<Props> = ({ config, onAPIReady }) => {
-  // State
-  const [visible, setVisible] = useState(config.enabled ?? true);
-  const [items, setItems] = useState<FlashNewsTickerItem[]>(config.items || []);
-  const [isPaused, setIsPaused] = useState(false);
-  const [contentWidth, setContentWidth] = useState(0);
-  const [controlsHeight, setControlsHeight] = useState(60);
-
-  // Refs
-  const contentRef = useRef<HTMLDivElement>(null);
-  const apiRef = useRef<FlashNewsTickerAPI | null>(null);
-  const resizeObserverRef = useRef<ResizeObserver | null>(null);
-
-  // Merge config with defaults
-  const mergedConfig = useMemo(
-    () => ({
-      position: 'bottom' as 'top' | 'bottom' | 'both',
-      height: 40,
-      backgroundColor: 'rgba(0, 0, 0, 0.7)',
-      textColor: '#ffffff',
-      fontSize: 14,
-      fontWeight: 600,
-      speed: 50,
-      gap: 100,
-      loop: true,
-      separator: ' • ',
-      topOffset: 10,
-      bottomOffset: 10,
-      ...config,
-    }),
-    [config]
-  );
-
-  // Calculate animation duration based on content width
-  const animationDuration = useMemo(() => {
-    return contentWidth > 0 ? contentWidth / mergedConfig.speed : 20;
-  }, [contentWidth, mergedConfig.speed]);
-
-  // Filter active items by time range and priority
-  const activeItems = useMemo(() => {
-    const now = Date.now();
-    return items
-      .filter((item) => {
-        if (item.startTime && now < item.startTime) return false;
-        if (item.endTime && now > item.endTime) return false;
-        return true;
-      })
-      .sort((a, b) => (b.priority || 0) - (a.priority || 0));
-  }, [items]);
-
-  // Measure content width when items change
-  useEffect(() => {
-    if (!contentRef.current) return;
-
-    const measureWidth = () => {
-      if (contentRef.current) {
-        setContentWidth(contentRef.current.scrollWidth);
-      }
-    };
-
-    // Initial measurement
-    measureWidth();
-
-    // Set up ResizeObserver for dynamic resizing
-    if (typeof ResizeObserver !== 'undefined') {
-      resizeObserverRef.current = new ResizeObserver(() => {
-        measureWidth();
-      });
-      resizeObserverRef.current.observe(contentRef.current);
-    }
-
-    return () => {
-      if (resizeObserverRef.current) {
-        resizeObserverRef.current.disconnect();
-      }
-    };
-  }, [activeItems]);
-
-  // Update items when config changes
-  useEffect(() => {
-    setItems(config.items || []);
-  }, [config.items]);
-
-  // Detect controls height dynamically
-  useEffect(() => {
-    const detectControlsHeight = () => {
-      // Try to find the video controls element
-      const controls = document.querySelector('.uvf-controls, .video-controls, [class*="controls"]') as HTMLElement;
-      if (controls) {
-        const height = controls.offsetHeight;
-        if (height > 0) {
-          setControlsHeight(height);
-        }
-      }
-    };
-
-    // Initial detection
-    detectControlsHeight();
-
-    // Re-detect periodically in case controls appear later
-    const interval = setInterval(detectControlsHeight, 1000);
-
-    return () => clearInterval(interval);
-  }, []);
-
-  // Create and expose API
-  useEffect(() => {
-    const api: FlashNewsTickerAPI = {
-      show: () => setVisible(true),
-      hide: () => setVisible(false),
-      isVisible: () => visible,
-      updateItems: (newItems) => setItems(newItems),
-      addItem: (item) => setItems((prev) => [...prev, item]),
-      removeItem: (id) => setItems((prev) => prev.filter((i) => i.id !== id)),
-      clearItems: () => setItems([]),
-      updateConfig: () => {
-        // Config is controlled via props, no local update needed
-      },
-      pause: () => setIsPaused(true),
-      resume: () => setIsPaused(false),
-      isPaused: () => isPaused,
-    };
-
-    apiRef.current = api;
-    onAPIReady?.(api);
-  }, [visible, isPaused, onAPIReady]);
-
-  // Don't render if hidden or no items
-  if (!visible || activeItems.length === 0) return null;
-
-  // Responsive adjustments
-  const isMobile = typeof window !== 'undefined' && window.innerWidth <= 768;
-  const height = isMobile ? 32 : mergedConfig.height;
-  const fontSize = isMobile ? 12 : mergedConfig.fontSize;
-
-  // Position styles - for bottom position, add controls height to the offset
-  const positionStyles =
-    mergedConfig.position === 'top'
-      ? { top: mergedConfig.topOffset }
-      : { bottom: (mergedConfig.bottomOffset || 10) + controlsHeight };
-
-  return (
-    <>
-      <div
-        className={`uvf-flash-news-ticker ticker-${mergedConfig.position}`}
-        style={{
-          position: 'fixed',
-          left: 0,
-          right: 0,
-          height: `${height}px`,
-          backgroundColor: mergedConfig.backgroundColor,
-          zIndex: 275,
-          overflow: 'hidden',
-          pointerEvents: 'none',
-          display: 'flex',
-          alignItems: 'center',
-          ...positionStyles,
-        }}
-      >
-        <div
-          ref={contentRef}
-          style={{
-            display: 'flex',
-            whiteSpace: 'nowrap',
-            animation:
-              isPaused || !mergedConfig.loop
-                ? 'none'
-                : `ticker-scroll ${animationDuration}s linear infinite`,
-            willChange: 'transform',
-          }}
-        >
-          {/* Render items twice for seamless loop */}
-          {[...activeItems, ...activeItems].map((item, idx) => (
-            <span
-              key={`${item.id}-${idx}`}
-              style={{
-                color: mergedConfig.textColor,
-                fontSize: `${fontSize}px`,
-                fontWeight: mergedConfig.fontWeight,
-                marginRight: `${mergedConfig.gap}px`,
-              }}
-            >
-              {item.text}
-              {mergedConfig.separator && idx < activeItems.length * 2 - 1 && (
-                <span style={{ opacity: 0.5, margin: '0 8px' }}>
-                  {mergedConfig.separator}
-                </span>
-              )}
-            </span>
-          ))}
-        </div>
-      </div>
-
-      <style>{`
-        @keyframes ticker-scroll {
-          0% {
-            transform: translateX(0);
-          }
-          100% {
-            transform: translateX(-50%);
-          }
-        }
-      `}</style>
-    </>
-  );
-};
-
-export default FlashNewsTicker;