完成转录功能，中文脚本搜索，播放界面显示脚本

2025-10-25 19:22:41 +08:00
parent d1b4fb6be0
commit 0d18595b68
34 changed files with 1827 additions and 404 deletions
@@ -0,0 +1,154 @@
+"use client";
+
+import { X, Copy, CheckCheck, Check } from "lucide-react";
+import { useState } from "react";
+import type { VideoTranscript } from "../types";
+
+interface TranscriptPanelProps {
+  open: boolean;
+  onClose: () => void;
+  transcript: VideoTranscript | null;
+}
+
+export function TranscriptPanel({ open, onClose, transcript }: TranscriptPanelProps) {
+  const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
+  const [copiedAll, setCopiedAll] = useState(false);
+
+  if (!open) return null;
+
+  const handleCopy = (text: string, index: number) => {
+    navigator.clipboard.writeText(text).then(() => {
+      setCopiedIndex(index);
+      setTimeout(() => setCopiedIndex(null), 2000);
+    });
+  };
+
+  const handleCopyAll = () => {
+    if (!transcript?.transcript) return;
+    const allText = transcript.transcript.join("\n");
+    navigator.clipboard.writeText(allText).then(() => {
+      setCopiedAll(true);
+      setTimeout(() => setCopiedAll(false), 2000);
+    });
+  };
+
+  if (!transcript?.speech_detected || !transcript.transcript?.length) {
+    return (
+      <div
+        className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+        onClick={onClose}
+      >
+        <div
+          className="relative w-full max-w-2xl max-h-[80vh] m-4 bg-zinc-900/95 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {/* 头部 */}
+          <div className="flex items-center justify-between p-4 border-b border-white/10">
+            <h2 className="text-lg font-semibold text-white">语音转录</h2>
+            <button
+              onClick={onClose}
+              className="p-2 rounded-full hover:bg-white/10 transition-colors"
+              aria-label="关闭"
+            >
+              <X size={20} className="text-white/80" />
+            </button>
+          </div>
+
+          {/* 内容 */}
+          <div className="p-8 text-center text-white/60">
+            <p>该视频暂无语音转录内容</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div
+        className="relative w-full max-w-2xl max-h-[80vh] m-4 bg-zinc-900/95 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl flex flex-col"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* 头部 */}
+        <div className="flex items-center justify-between p-4 border-b border-white/10 flex-shrink-0">
+          <div>
+            <h2 className="text-lg font-semibold text-white">语音转录</h2>
+            {transcript.language && (
+              <p className="text-xs text-white/50 mt-1">
+                语言: {transcript.language}
+              </p>
+            )}
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={handleCopyAll}
+              className="flex items-center gap-2 px-3 py-2 text-sm bg-blue-600/20 text-blue-300 rounded-lg hover:bg-blue-600/30 transition-colors"
+            >
+              {copiedAll ? (
+                <>
+                  <CheckCheck size={16} />
+                  已复制全部
+                </>
+              ) : (
+                <>
+                  <Copy size={16} />
+                  复制全部
+                </>
+              )}
+            </button>
+            <button
+              onClick={onClose}
+              className="p-2 rounded-full hover:bg-white/10 transition-colors"
+              aria-label="关闭"
+            >
+              <X size={20} className="text-white/80" />
+            </button>
+          </div>
+        </div>
+
+        {/* 转录列表 */}
+        <div className="flex-1 overflow-y-auto p-4 space-y-2">
+          {transcript.transcript.map((text, index) => (
+            <div
+              key={index}
+              className="group bg-white/5 rounded-lg p-3 hover:bg-white/10 transition-colors cursor-pointer"
+              onClick={() => handleCopy(text, index)}
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 mb-1">
+                    <span className="text-xs font-mono text-blue-400">
+                      #{index + 1}
+                    </span>
+                  </div>
+                  <p className="text-sm text-white/90 leading-relaxed break-words">
+                    {text}
+                  </p>
+                </div>
+                <button
+                  onClick={() => handleCopy(text, index)}
+                  className="flex-shrink-0 p-2 rounded-lg opacity-0 group-hover:opacity-100 hover:bg-white/10 transition-all"
+                  aria-label="复制"
+                >
+                  {copiedIndex === index ? (
+                    <Check size={16} className="text-green-400" />
+                  ) : (
+                    <Copy size={16} className="text-white/60" />
+                  )}
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* 底部统计 */}
+        <div className="flex-shrink-0 p-3 border-t border-white/10 text-center text-xs text-white/50">
+          共 {transcript.transcript.length} 段转录内容
+        </div>
+      </div>
+    </div>
+  );
+}