feat: add epg info

src/components/EpgScrollableRow.tsx

@@ -0,0 +1,290 @@
+import { Clock, Tv, Target } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { parseCustomTimeFormat, formatTimeToHHMM } from '@/lib/time';
+
+interface EpgProgram {
+  start: string;
+  end: string;
+  title: string;
+}
+
+interface EpgScrollableRowProps {
+  programs: EpgProgram[];
+  currentTime?: Date;
+  isLoading?: boolean;
+}
+
+export default function EpgScrollableRow({
+  programs,
+  currentTime = new Date(),
+  isLoading = false,
+}: EpgScrollableRowProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isHovered, setIsHovered] = useState(false);
+  const [currentPlayingIndex, setCurrentPlayingIndex] = useState<number>(-1);
+
+  // 处理滚轮事件，实现横向滚动
+  const handleWheel = (e: WheelEvent) => {
+    if (isHovered && containerRef.current) {
+      e.preventDefault(); // 阻止默认的竖向滚动
+
+      const container = containerRef.current;
+      const scrollAmount = e.deltaY * 4; // 增加滚动速度
+
+      // 根据滚轮方向进行横向滚动
+      container.scrollBy({
+        left: scrollAmount,
+        behavior: 'smooth'
+      });
+    }
+  };
+
+  // 阻止页面竖向滚动
+  const preventPageScroll = (e: WheelEvent) => {
+    if (isHovered) {
+      e.preventDefault();
+    }
+  };
+
+  // 自动滚动到正在播放的节目
+  const scrollToCurrentProgram = () => {
+    if (containerRef.current) {
+      const currentProgramIndex = programs.findIndex(program => isCurrentlyPlaying(program));
+      if (currentProgramIndex !== -1) {
+        const programElement = containerRef.current.children[currentProgramIndex] as HTMLElement;
+        if (programElement) {
+          const container = containerRef.current;
+          const programLeft = programElement.offsetLeft;
+          const containerWidth = container.clientWidth;
+          const programWidth = programElement.offsetWidth;
+
+          // 计算滚动位置，使正在播放的节目居中显示
+          const scrollLeft = programLeft - (containerWidth / 2) + (programWidth / 2);
+
+          container.scrollTo({
+            left: Math.max(0, scrollLeft),
+            behavior: 'smooth'
+          });
+        }
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (isHovered) {
+      // 鼠标悬停时阻止页面滚动
+      document.addEventListener('wheel', preventPageScroll, { passive: false });
+      document.addEventListener('wheel', handleWheel, { passive: false });
+    } else {
+      // 鼠标离开时恢复页面滚动
+      document.removeEventListener('wheel', preventPageScroll);
+      document.removeEventListener('wheel', handleWheel);
+    }
+
+    return () => {
+      document.removeEventListener('wheel', preventPageScroll);
+      document.removeEventListener('wheel', handleWheel);
+    };
+  }, [isHovered]);
+
+  // 组件加载后自动滚动到正在播放的节目
+  useEffect(() => {
+    // 延迟执行，确保DOM完全渲染
+    const timer = setTimeout(() => {
+      // 初始化当前正在播放的节目索引
+      const initialPlayingIndex = programs.findIndex(program => isCurrentlyPlaying(program));
+      setCurrentPlayingIndex(initialPlayingIndex);
+      scrollToCurrentProgram();
+    }, 100);
+
+    return () => clearTimeout(timer);
+  }, [programs, currentTime]);
+
+  // 定时刷新正在播放状态
+  useEffect(() => {
+    // 每分钟刷新一次正在播放状态
+    const interval = setInterval(() => {
+      // 更新当前正在播放的节目索引
+      const newPlayingIndex = programs.findIndex(program => {
+        try {
+          const start = parseCustomTimeFormat(program.start);
+          const end = parseCustomTimeFormat(program.end);
+          return currentTime >= start && currentTime < end;
+        } catch {
+          return false;
+        }
+      });
+
+      if (newPlayingIndex !== currentPlayingIndex) {
+        setCurrentPlayingIndex(newPlayingIndex);
+        // 如果正在播放的节目发生变化，自动滚动到新位置
+        scrollToCurrentProgram();
+      }
+    }, 60000); // 60秒 = 1分钟
+
+    return () => clearInterval(interval);
+  }, [programs, currentTime, currentPlayingIndex]);
+
+  // 格式化时间显示
+  const formatTime = (timeString: string) => {
+    return formatTimeToHHMM(timeString);
+  };
+
+  // 判断节目是否正在播放
+  const isCurrentlyPlaying = (program: EpgProgram) => {
+    try {
+      const start = parseCustomTimeFormat(program.start);
+      const end = parseCustomTimeFormat(program.end);
+      return currentTime >= start && currentTime < end;
+    } catch {
+      return false;
+    }
+  };
+
+  // 加载中状态
+  if (isLoading) {
+    return (
+      <div className="pt-4">
+        <div className="mb-3 flex items-center justify-between">
+          <h4 className="text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300 flex items-center gap-2">
+            <Clock className="w-3 h-3 sm:w-4 sm:h-4" />
+            今日节目单
+          </h4>
+          <div className="w-16 sm:w-20"></div>
+        </div>
+        <div className="min-h-[100px] sm:min-h-[120px] flex items-center justify-center">
+          <div className="flex items-center gap-3 sm:gap-4 text-gray-500 dark:text-gray-400">
+            <div className="w-5 h-5 sm:w-6 sm:h-6 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin"></div>
+            <span className="text-sm sm:text-base">加载节目单...</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // 无节目单状态
+  if (!programs || programs.length === 0) {
+    return (
+      <div className="pt-4">
+        <div className="mb-3 flex items-center justify-between">
+          <h4 className="text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300 flex items-center gap-2">
+            <Clock className="w-3 h-3 sm:w-4 sm:h-4" />
+            今日节目单
+          </h4>
+          <div className="w-16 sm:w-20"></div>
+        </div>
+        <div className="min-h-[100px] sm:min-h-[120px] flex items-center justify-center">
+          <div className="flex items-center gap-2 sm:gap-3 text-gray-400 dark:text-gray-500">
+            <Tv className="w-4 h-4 sm:w-5 sm:h-5" />
+            <span className="text-sm sm:text-base">暂无节目单数据</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="pt-4 mt-2">
+      <div className="mb-3 flex items-center justify-between">
+        <h4 className="text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300 flex items-center gap-2">
+          <Clock className="w-3 h-3 sm:w-4 sm:h-4" />
+          今日节目单
+        </h4>
+        {currentPlayingIndex !== -1 && (
+          <button
+            onClick={scrollToCurrentProgram}
+            className="flex items-center gap-1 sm:gap-1.5 px-2 sm:px-2.5 py-1.5 sm:py-2 text-xs font-medium text-gray-600 dark:text-gray-400 hover:text-green-600 dark:hover:text-green-400 bg-gray-300/50 dark:bg-gray-800 hover:bg-green-50 dark:hover:bg-green-900/20 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-green-300 dark:hover:border-green-700 transition-all duration-200"
+            title="滚动到当前播放位置"
+          >
+            <Target className="w-2.5 h-2.5 sm:w-3 sm:h-3" />
+            <span className="hidden sm:inline">当前播放</span>
+            <span className="sm:hidden">当前</span>
+          </button>
+        )}
+      </div>
+
+      <div
+        className='relative'
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        <div
+          ref={containerRef}
+          className='flex overflow-x-auto scrollbar-hide py-2 pb-4 px-2 sm:px-4 min-h-[100px] sm:min-h-[120px]'
+        >
+          {programs.map((program, index) => {
+            // 使用 currentPlayingIndex 来判断播放状态，确保样式能正确更新
+            const isPlaying = index === currentPlayingIndex;
+            const isFinishedProgram = index < currentPlayingIndex;
+            const isUpcomingProgram = index > currentPlayingIndex;
+
+            return (
+              <div
+                key={index}
+                className={`flex-shrink-0 w-36 sm:w-48 p-2 sm:p-3 rounded-lg border transition-all duration-200 flex flex-col min-h-[100px] sm:min-h-[120px] ${isPlaying
+                  ? 'bg-green-500/10 dark:bg-green-500/20 border-green-500/30'
+                  : isFinishedProgram
+                    ? 'bg-gray-300/50 dark:bg-gray-800 border-gray-300 dark:border-gray-700'
+                    : isUpcomingProgram
+                      ? 'bg-blue-500/10 dark:bg-blue-500/20 border-blue-500/30'
+                      : 'bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
+                  }`}
+              >
+                {/* 时间显示在顶部 */}
+                <div className="flex items-center justify-between mb-2 sm:mb-3 flex-shrink-0">
+                  <span className={`text-xs font-medium ${isPlaying
+                    ? 'text-green-600 dark:text-green-400'
+                    : isFinishedProgram
+                      ? 'text-gray-500 dark:text-gray-400'
+                      : isUpcomingProgram
+                        ? 'text-blue-600 dark:text-blue-400'
+                        : 'text-gray-600 dark:text-gray-300'
+                    }`}>
+                    {formatTime(program.start)}
+                  </span>
+                  <span className="text-xs text-gray-400 dark:text-gray-500">
+                    {formatTime(program.end)}
+                  </span>
+                </div>
+
+                {/* 标题在中间，占据剩余空间 */}
+                <div
+                  className={`text-xs sm:text-sm font-medium flex-1 ${isPlaying
+                    ? 'text-green-900 dark:text-green-100'
+                    : isFinishedProgram
+                      ? 'text-gray-600 dark:text-gray-400'
+                      : isUpcomingProgram
+                        ? 'text-blue-900 dark:text-blue-100'
+                        : 'text-gray-900 dark:text-gray-100'
+                    }`}
+                  style={{
+                    display: '-webkit-box',
+                    WebkitLineClamp: 2,
+                    WebkitBoxOrient: 'vertical',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    lineHeight: '1.4',
+                    maxHeight: '2.8em'
+                  }}
+                  title={program.title}
+                >
+                  {program.title}
+                </div>
+
+                {/* 正在播放状态在底部 */}
+                {isPlaying && (
+                  <div className="mt-auto pt-1 sm:pt-2 flex items-center gap-1 sm:gap-1.5 flex-shrink-0">
+                    <div className="w-1.5 h-1.5 sm:w-2 sm:h-2 bg-green-500 rounded-full animate-pulse"></div>
+                    <span className="text-xs text-green-600 dark:text-green-400 font-medium">
+                      正在播放
+                    </span>
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}