Pre_Seg_Server/src/components/FrameTimeline.tsx

import React, { useEffect, useMemo, useState } from 'react';
import { Play, Pause } from 'lucide-react';
import { cn } from '../lib/utils';
import { useStore } from '../store/useStore';

export function FrameTimeline() {
  const frames = useStore((state) => state.frames);
  const currentProject = useStore((state) => state.currentProject);
  const currentFrameIndex = useStore((state) => state.currentFrameIndex);
  const setCurrentFrame = useStore((state) => state.setCurrentFrame);
  const [isPlaying, setIsPlaying] = useState(false);

  const totalFrames = frames.length;
  const currentFrame = totalFrames > 0 ? currentFrameIndex + 1 : 0;
  const playbackFps = useMemo(() => {
    const fps = currentProject?.parse_fps || currentProject?.original_fps || 12;
    return Math.min(Math.max(fps, 1), 30);
  }, [currentProject?.original_fps, currentProject?.parse_fps]);

  useEffect(() => {
    if (!isPlaying || totalFrames <= 1) return;

    const timer = window.setTimeout(() => {
      if (currentFrameIndex >= totalFrames - 1) {
        setIsPlaying(false);
        return;
      }

      setCurrentFrame(currentFrameIndex + 1);
    }, 1000 / playbackFps);

    return () => window.clearTimeout(timer);
  }, [currentFrameIndex, isPlaying, playbackFps, setCurrentFrame, totalFrames]);

  useEffect(() => {
    if (totalFrames === 0) {
      setIsPlaying(false);
    }
  }, [totalFrames]);

  // show frames around current frame
  const frameWindow = 20;
  const displayIndices = totalFrames > 0
    ? Array.from({ length: 41 }, (_, i) => currentFrameIndex - frameWindow + i)
    : [];

  return (
    <div className="h-32 bg-[#111] border-t border-white/5 flex flex-col shrink-0 z-20">
      <div className="h-4 bg-[#0d0d0d] flex items-center group relative">
        <input 
          type="range" 
          min="1" 
          max={Math.max(totalFrames, 1)} 
          value={currentFrame} 
          onChange={(e) => setCurrentFrame(parseInt(e.target.value) - 1)}
          className="w-full absolute inset-0 opacity-0 cursor-ew-resize z-20"
          disabled={totalFrames === 0}
        />
        <div className="h-1 bg-white/10 w-full relative group-hover:h-2 transition-all">
          <div 
            className="h-full bg-cyan-500 absolute left-0" 
            style={{ width: `${totalFrames > 0 ? (currentFrame / totalFrames) * 100 : 0}%` }}
          />
          <div 
             className="w-3 h-3 bg-white rounded-full absolute top-1/2 -translate-y-1/2 -ml-1.5 shadow-sm transform scale-0 group-hover:scale-100 transition-transform shadow-cyan-500/50"
             style={{ left: `${totalFrames > 0 ? (currentFrame / totalFrames) * 100 : 0}%` }}
          />
        </div>
      </div>
      
      <div className="flex-1 flex items-center px-4 gap-6">
        <div className="flex flex-col items-center gap-2 px-4 border-r border-white/10 shrink-0">
           <button 
             className="p-2 rounded-full bg-white/5 text-white hover:bg-white/10 disabled:opacity-40 disabled:cursor-not-allowed"
             disabled={totalFrames <= 1}
             onClick={() => {
               if (currentFrameIndex >= totalFrames - 1) {
                 setCurrentFrame(0);
               }
               setIsPlaying(!isPlaying);
             }}
           >
             {isPlaying ? <Pause size={20} fill="currentColor" /> : <Play size={20} fill="currentColor" />}
           </button>
           <span className="text-[10px] font-mono text-gray-500">{isPlaying ? '暂停 (SPACE)' : '播放序列 (F5)'}</span>
        </div>
        
        <div 
           className="flex-1 flex gap-px flex-nowrap items-center overflow-hidden justify-center"
           style={{ WebkitMaskImage: 'linear-gradient(to right, transparent, black 10%, black 90%, transparent)' }}
        >
          {totalFrames === 0 ? (
            <div className="text-xs text-gray-600 font-mono">暂无帧数据</div>
          ) : (
            displayIndices.map((idx) => {
              if (idx < 0 || idx >= totalFrames) {
                return <div key={`empty-${idx}`} className="w-16 h-12 opacity-0 shrink-0" />
              }
              const frame = frames[idx];
              const isCurrent = idx === currentFrameIndex;
              return (
                <div 
                  key={frame.id} 
                  onClick={() => setCurrentFrame(idx)}
                  className={cn(
                    "relative shrink-0 rounded-sm transition-all cursor-pointer flex items-center justify-center overflow-hidden group mx-0.5",
                    isCurrent ? "w-28 h-16 border-2 border-cyan-500 bg-gray-700 shadow-[0_0_15px_rgba(6,182,212,0.3)] z-10" : "w-16 h-12 border border-white/5 bg-gray-800/50 opacity-40 hover:opacity-100"
                  )}
                >
                    {frame.url ? (
                      <img 
                        src={frame.url} 
                        alt={`frame-${idx}`}
                        className="absolute inset-0 w-full h-full object-cover"
                        loading="lazy"
                        draggable={false}
                      />
                    ) : (
                      <div className="absolute inset-0 bg-gradient-to-br from-gray-800 to-gray-900 opacity-20" />
                    )}
                    <span className={cn("text-[9px] font-mono text-white text-center z-10 drop-shadow", isCurrent ? "text-[10px] font-bold" : "")}>
                      {(idx + 1).toString().padStart(4, '0')}
                    </span>
                </div>
              );
            })
          )}
        </div>

        <div className="w-48 text-right shrink-0">
          <div className="text-2xl font-mono text-white">{currentFrame}<span className="text-xs text-gray-500"> / {totalFrames}</span></div>
          <div className="text-[10px] text-gray-500 uppercase tracking-widest mt-1">底层时序视频图层截帧导航轴</div>
        </div>
      </div>
    </div>
  );
}