unified-video-framework 1.4.343 → 1.4.344

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

@@ -1,197 +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);
-
-  // 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]);
-
-  // 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 - overlay on video, just above where controls appear
-  const positionStyles =
-    mergedConfig.position === 'top'
-      ? { top: mergedConfig.topOffset }
-      : { bottom: mergedConfig.bottomOffset || 10 };
-
-  return (
-    <>
-      <div
-        className={`uvf-flash-news-ticker ticker-${mergedConfig.position}`}
-        style={{
-          position: 'fixed',
-          left: 0,
-          right: 0,
-          height: `${height}px`,
-          backgroundColor: mergedConfig.backgroundColor,
-          zIndex: 90,
-          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;