重构逐句视频播放器

src/app/(features)/srt-player/components/atoms/FileInput.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import React, { useRef } from "react";
+import { FileInputProps } from "../../types/controls";
+
+interface FileInputComponentProps extends FileInputProps {
+  children: React.ReactNode;
+}
+
+export default function FileInput({ accept, onFileSelect, disabled, className, children }: FileInputComponentProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleClick = React.useCallback(() => {
+    if (!disabled && inputRef.current) {
+      inputRef.current.click();
+    }
+  }, [disabled]);
+
+  const handleChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      onFileSelect(file);
+    }
+  }, [onFileSelect]);
+
+  return (
+    <>
+      <input
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        onChange={handleChange}
+        disabled={disabled}
+        className="hidden"
+      />
+      <button
+        onClick={handleClick}
+        disabled={disabled}
+        className={`px-2 py-1 rounded shadow font-bold hover:cursor-pointer hover:bg-gray-200 text-gray-800 bg-white ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className || ''}`}
+      >
+        {children}
+      </button>
+    </>
+  );
+}

src/app/(features)/srt-player/components/atoms/PlayButton.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import React from "react";
+import { useTranslations } from "next-intl";
+import LightButton from "@/components/ui/buttons/LightButton";
+import { PlayButtonProps } from "../../types/player";
+
+export default function PlayButton({ isPlaying, onToggle, disabled, className }: PlayButtonProps) {
+  const t = useTranslations("srt_player");
+  
+  return (
+    <LightButton
+      onClick={disabled ? undefined : onToggle}
+      disabled={disabled}
+      className={`px-4 py-2 ${className || ''}`}
+    >
+      {isPlaying ? t("pause") : t("play")}
+    </LightButton>
+  );
+}

src/app/(features)/srt-player/components/atoms/SeekBar.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import React from "react";
+import { SeekBarProps } from "../../types/player";
+
+export default function SeekBar({ value, max, onChange, disabled, className }: SeekBarProps) {
+  const handleChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = parseInt(event.target.value);
+    onChange(newValue);
+  }, [onChange]);
+
+  return (
+    <input
+      type="range"
+      min={0}
+      max={max}
+      value={value}
+      onChange={handleChange}
+      disabled={disabled}
+      className={`w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className || ''}`}
+      style={{
+        background: `linear-gradient(to right, #374151 0%, #374151 ${(value / max) * 100}%, #e5e7eb ${(value / max) * 100}%, #e5e7eb 100%)`
+      }}
+    />
+  );
+}

src/app/(features)/srt-player/components/atoms/SpeedControl.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import React from "react";
+import LightButton from "@/components/ui/buttons/LightButton";
+import { SpeedControlProps } from "../../types/player";
+import { getPlaybackRateOptions, getPlaybackRateLabel } from "../../utils/timeUtils";
+
+export default function SpeedControl({ playbackRate, onPlaybackRateChange, disabled, className }: SpeedControlProps) {
+  const speedOptions = getPlaybackRateOptions();
+  
+  const handleSpeedChange = React.useCallback(() => {
+    const currentIndex = speedOptions.indexOf(playbackRate);
+    const nextIndex = (currentIndex + 1) % speedOptions.length;
+    onPlaybackRateChange(speedOptions[nextIndex]);
+  }, [playbackRate, onPlaybackRateChange, speedOptions]);
+
+  return (
+    <LightButton
+      onClick={disabled ? undefined : handleSpeedChange}
+      className={`${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className || ''}`}
+    >
+      {getPlaybackRateLabel(playbackRate)}
+    </LightButton>
+  );
+}

src/app/(features)/srt-player/components/atoms/SubtitleText.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import React from "react";
+import { SubtitleTextProps } from "../../types/subtitle";
+
+export default function SubtitleText({ text, onWordClick, style, className }: SubtitleTextProps) {
+  const handleWordClick = React.useCallback((word: string) => {
+    onWordClick?.(word);
+  }, [onWordClick]);
+
+  // 将文本分割成单词，保持标点符号
+  const renderTextWithClickableWords = () => {
+    if (!text) return null;
+    
+    // 匹配单词和标点符号
+    const parts = text.match(/[\w']+|[^\w\s]+|\s+/g) || [];
+    
+    return parts.map((part, index) => {
+      // 如果是单词（字母和撇号组成）
+      if (/^[\w']+$/.test(part)) {
+        return (
+          <span
+            key={index}
+            onClick={() => handleWordClick(part)}
+            className="hover:bg-gray-700 hover:underline hover:cursor-pointer rounded px-1 transition-colors"
+          >
+            {part}
+          </span>
+        );
+      }
+      // 如果是空格或其他字符，直接渲染
+      return <span key={index}>{part}</span>;
+    });
+  };
+
+  return (
+    <div 
+      className={`overflow-auto h-16 mt-2 wrap-break-words font-sans text-white text-center text-2xl ${className || ''}`}
+      style={style}
+    >
+      {renderTextWithClickableWords()}
+    </div>
+  );
+}

src/app/(features)/srt-player/components/atoms/VideoElement.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import React, { forwardRef } from "react";
+import { VideoElementProps } from "../../types/player";
+
+const VideoElement = forwardRef<HTMLVideoElement, VideoElementProps>(
+  ({ src, onTimeUpdate, onLoadedMetadata, onPlay, onPause, onEnded, className }, ref) => {
+    const handleTimeUpdate = React.useCallback((event: React.SyntheticEvent<HTMLVideoElement>) => {
+      const video = event.currentTarget;
+      onTimeUpdate?.(video.currentTime);
+    }, [onTimeUpdate]);
+
+    const handleLoadedMetadata = React.useCallback((event: React.SyntheticEvent<HTMLVideoElement>) => {
+      const video = event.currentTarget;
+      onLoadedMetadata?.(video.duration);
+    }, [onLoadedMetadata]);
+
+    const handlePlay = React.useCallback((event: React.SyntheticEvent<HTMLVideoElement>) => {
+      onPlay?.();
+    }, [onPlay]);
+
+    const handlePause = React.useCallback((event: React.SyntheticEvent<HTMLVideoElement>) => {
+      onPause?.();
+    }, [onPause]);
+
+    const handleEnded = React.useCallback((event: React.SyntheticEvent<HTMLVideoElement>) => {
+      onEnded?.();
+    }, [onEnded]);
+
+    return (
+      <video
+        ref={ref}
+        src={src}
+        onTimeUpdate={handleTimeUpdate}
+        onLoadedMetadata={handleLoadedMetadata}
+        onPlay={handlePlay}
+        onPause={handlePause}
+        onEnded={handleEnded}
+        className={`bg-gray-200 w-full ${className || ""}`}
+        playsInline
+        controls={false}
+      />
+    );
+  }
+);
+
+VideoElement.displayName = "VideoElement";
+
+export default VideoElement;

src/app/(features)/srt-player/components/compounds/ControlBar.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import React from "react";
+import { useTranslations } from "next-intl";
+import { ChevronLeft, ChevronRight, RotateCcw, Pause } from "lucide-react";
+import DarkButton from "@/components/ui/buttons/DarkButton";
+import { ControlBarProps } from "../../types/controls";
+import PlayButton from "../atoms/PlayButton";
+import SpeedControl from "../atoms/SpeedControl";
+
+export default function ControlBar({
+  isPlaying,
+  onPlayPause,
+  onPrevious,
+  onNext,
+  onRestart,
+  playbackRate,
+  onPlaybackRateChange,
+  autoPause,
+  onAutoPauseToggle,
+  disabled,
+  className
+}: ControlBarProps) {
+  const t = useTranslations("srt_player");
+  
+  return (
+    <div className={`flex flex-wrap gap-2 justify-center ${className || ''}`}>
+      <PlayButton
+        isPlaying={isPlaying}
+        onToggle={onPlayPause}
+        disabled={disabled}
+      />
+      
+      <DarkButton
+        onClick={disabled ? undefined : onPrevious}
+        disabled={disabled}
+        className="flex items-center px-3 py-2"
+      >
+        <ChevronLeft className="w-4 h-4 mr-2" />
+        {t("previous")}
+      </DarkButton>
+      
+      <DarkButton
+        onClick={disabled ? undefined : onNext}
+        disabled={disabled}
+        className="flex items-center px-3 py-2"
+      >
+        {t("next")}
+        <ChevronRight className="w-4 h-4 ml-2" />
+      </DarkButton>
+      
+      <DarkButton
+        onClick={disabled ? undefined : onRestart}
+        disabled={disabled}
+        className="flex items-center px-3 py-2"
+      >
+        <RotateCcw className="w-4 h-4 mr-2" />
+        {t("restart")}
+      </DarkButton>
+      
+      <SpeedControl
+        playbackRate={playbackRate}
+        onPlaybackRateChange={onPlaybackRateChange}
+        disabled={disabled}
+      />
+      
+      <DarkButton
+        onClick={disabled ? undefined : onAutoPauseToggle}
+        disabled={disabled}
+        className="flex items-center px-3 py-2"
+      >
+        <Pause className="w-4 h-4 mr-2" />
+        {t("autoPause", { enabled: autoPause ? t("on") : t("off") })}
+      </DarkButton>
+    </div>
+  );
+}

src/app/(features)/srt-player/components/compounds/SubtitleArea.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import React from "react";
+import { SubtitleDisplayProps } from "../../types/subtitle";
+import SubtitleText from "../atoms/SubtitleText";
+
+export default function SubtitleArea({ subtitle, onWordClick, settings, className }: SubtitleDisplayProps) {
+  const handleWordClick = React.useCallback((word: string) => {
+    // 打开有道词典页面查询单词
+    window.open(
+      `https://www.youdao.com/result?word=${encodeURIComponent(word)}&lang=en`,
+      "_blank"
+    );
+    onWordClick?.(word);
+  }, [onWordClick]);
+
+  const subtitleStyle = React.useMemo(() => {
+    if (!settings) return { backgroundColor: 'rgba(0, 0, 0, 0.5)' };
+    
+    return {
+      backgroundColor: settings.backgroundColor,
+      color: settings.textColor,
+      fontSize: `${settings.fontSize}px`,
+      fontFamily: settings.fontFamily,
+      opacity: settings.opacity,
+    };
+  }, [settings]);
+
+  return (
+    <SubtitleText
+      text={subtitle}
+      onWordClick={handleWordClick}
+      style={subtitleStyle}
+      className={className}
+    />
+  );
+}

src/app/(features)/srt-player/components/compounds/UploadZone.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import React from "react";
+import { useTranslations } from "next-intl";
+import { toast } from "sonner";
+import { Video, FileText } from "lucide-react";
+import DarkButton from "@/components/ui/buttons/DarkButton";
+import { FileUploadProps } from "../../types/controls";
+import { useFileUpload } from "../../hooks/useFileUpload";
+
+export default function UploadZone({ onVideoUpload, onSubtitleUpload, className }: FileUploadProps) {
+  const t = useTranslations("srt_player");
+  const { uploadVideo, uploadSubtitle } = useFileUpload();
+
+  const handleVideoUpload = React.useCallback(() => {
+    uploadVideo(onVideoUpload, (error) => {
+      toast.error(t("videoUploadFailed") + ": " + error.message);
+    });
+  }, [uploadVideo, onVideoUpload, t]);
+
+  const handleSubtitleUpload = React.useCallback(() => {
+    uploadSubtitle(onSubtitleUpload, (error) => {
+      toast.error(t("subtitleUploadFailed") + ": " + error.message);
+    });
+  }, [uploadSubtitle, onSubtitleUpload, t]);
+
+  return (
+    <div className={`flex gap-3 ${className || ''}`}>
+      <DarkButton
+        onClick={handleVideoUpload}
+        className="flex-1 py-2 px-3 text-sm"
+      >
+        <Video className="w-4 h-4 mr-2" />
+        {t("uploadVideo")}
+      </DarkButton>
+      
+      <DarkButton
+        onClick={handleSubtitleUpload}
+        className="flex-1 py-2 px-3 text-sm"
+      >
+        <FileText className="w-4 h-4 mr-2" />
+        {t("uploadSubtitle")}
+      </DarkButton>
+    </div>
+  );
+}

src/app/(features)/srt-player/components/compounds/VideoPlayer.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import React, { forwardRef } from "react";
+import { VideoElementProps } from "../../types/player";
+import VideoElement from "../atoms/VideoElement";
+
+interface VideoPlayerComponentProps extends VideoElementProps {
+  children?: React.ReactNode;
+}
+
+const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerComponentProps>(
+  ({
+    src,
+    onTimeUpdate,
+    onLoadedMetadata,
+    onPlay,
+    onPause,
+    onEnded,
+    className,
+    children
+  }, ref) => {
+    return (
+      <div className={`w-full flex flex-col ${className || ''}`}>
+        <VideoElement
+          ref={ref}
+          src={src}
+          onTimeUpdate={onTimeUpdate}
+          onLoadedMetadata={onLoadedMetadata}
+          onPlay={onPlay}
+          onPause={onPause}
+          onEnded={onEnded}
+        />
+        {children}
+      </div>
+    );
+  }
+);
+
+VideoPlayer.displayName = "VideoPlayer";
+
+export default VideoPlayer;