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

app/aweme/[awemeId]/Client.tsx

@@ -1,15 +1,16 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import { useMemo, useRef } from "react";
+import { useMemo, useRef, useState } from "react";
 import { Pause, Play } from "lucide-react";
-import type { AwemeData, ImageData, Neighbors, VideoData } from "./types.ts";
+import type { AwemeData, ImageData, Neighbors, VideoData, VideoTranscript } from "./types.ts";
 import { BackgroundCanvas } from "./components/BackgroundCanvas";
 import { CommentPanel } from "./components/CommentPanel";
 import { ImageCarousel } from "./components/ImageCarousel";
 import { ImageNavigationButtons } from "./components/ImageNavigationButtons";
 import { MediaControls } from "./components/MediaControls";
 import { NavigationButtons } from "./components/NavigationButtons";
+import { TranscriptPanel } from "./components/TranscriptPanel";
 import { VideoPlayer } from "./components/VideoPlayer";
 import { useBackgroundCanvas } from "./hooks/useBackgroundCanvas";
 import { useCommentState } from "./hooks/useCommentState";
@@ -17,21 +18,24 @@ import { useImageCarousel } from "./hooks/useImageCarousel";
 import { useNavigation } from "./hooks/useNavigation";
 import { usePlayerState } from "./hooks/usePlayerState";
 import { useVideoPlayer } from "./hooks/useVideoPlayer";
+import { Prisma } from "@prisma/client";
 
 const SEGMENT_MS = 4000;
 
 interface AwemeDetailClientProps {
   data: AwemeData;
   neighbors: Neighbors;
+  transcript: VideoTranscript | null;
 }
 
-export default function AwemeDetailClient({ data, neighbors }: AwemeDetailClientProps) {
+export default function AwemeDetailClient({ data, neighbors, transcript }: AwemeDetailClientProps) {
   const router = useRouter();
   const isVideo = data.type === "video";
 
   // 状态管理
   const playerState = usePlayerState();
   const commentState = useCommentState();
+  const [transcriptOpen, setTranscriptOpen] = useState(false);
 
   // 引用
   const mediaContainerRef = useRef<HTMLDivElement | null>(null);
@@ -284,6 +288,8 @@ export default function AwemeDetailClient({ data, neighbors }: AwemeDetailClient
               segmentProgress={imageCarouselState.segProgress}
               musicUrl={isVideo ? undefined : (data as ImageData).music_url}
               audioRef={audioRef}
+              hasTranscript={isVideo && !!transcript?.speech_detected}
+              onShowTranscript={() => setTranscriptOpen(true)}
               onTogglePlay={togglePlay}
               onSeek={seekTo}
               onVolumeChange={playerState.setVolume}
@@ -316,6 +322,13 @@ export default function AwemeDetailClient({ data, neighbors }: AwemeDetailClient
           awemeId={data.aweme_id}
           mounted={commentState.mounted}
         />
+
+        {/* 转录面板 */}
+        <TranscriptPanel
+          open={transcriptOpen}
+          onClose={() => setTranscriptOpen(false)}
+          transcript={transcript}
+        />
       </div>
     </div>
   );

app/aweme/[awemeId]/components/MediaControls.tsx

@@ -12,12 +12,14 @@ import {
   RotateCw,
   Volume2,
   VolumeX,
+  FileText,
 } from "lucide-react";
 import type { RefObject } from "react";
 import type { LoopMode, ObjectFit, User } from "../types.ts";
 import { formatRelativeTime, formatTime, formatAbsoluteUTC } from "../utils";
 import { ProgressBar } from "./ProgressBar";
 import { SegmentedProgressBar } from "./SegmentedProgressBar";
+import { MoreMenu, MoreMenuItem } from "./MoreMenu";
 
 interface MediaControlsProps {
   isVideo: boolean;
@@ -40,6 +42,9 @@ interface MediaControlsProps {
   segmentProgress?: number;
   musicUrl?: string | null;
   audioRef?: RefObject<HTMLAudioElement | null>;
+  // 转录相关
+  hasTranscript?: boolean;
+  onShowTranscript?: () => void;
   // 回调
   onTogglePlay: () => void;
   onSeek: (ratio: number) => void;
@@ -71,6 +76,8 @@ export function MediaControls({
   segmentProgress = 0,
   musicUrl,
   audioRef,
+  hasTranscript = false,
+  onShowTranscript,
   onTogglePlay,
   onSeek,
   onVolumeChange,
@@ -228,6 +235,18 @@ export function MediaControls({
             {objectFit === "contain" ? <Maximize2 size={18} /> : <Minimize size={18} />}
           </button>
 
+          {/* 转录文本 - 仅视频且有转录时显示，中等屏幕以上 */}
+          {isVideo && hasTranscript && onShowTranscript && (
+            <button
+              className="hidden md:inline-flex w-[34px] h-[34px] items-center justify-center rounded-full bg-white/15 text-white border border-white/20 backdrop-blur-sm cursor-pointer"
+              onClick={onShowTranscript}
+              aria-label="显示转录文本"
+              title="显示转录文本"
+            >
+              <FileText size={18} />
+            </button>
+          )}
+
           {/* 下载 - 中等屏幕以上显示 */}
           <button
             className="hidden md:inline-flex w-[34px] h-[34px] items-center justify-center rounded-full bg-white/15 text-white border border-white/20 backdrop-blur-sm cursor-pointer"
@@ -238,6 +257,66 @@ export function MediaControls({
             <Download size={18} />
           </button>
 
+          {/* 更多菜单 - 只在有按钮被折叠时显示 */}
+          {/* sm屏幕以下会隐藏适配模式，md屏幕以下会隐藏循环、转录、下载、倍速 */}
+          <div className="sm:block md:hidden">
+            <MoreMenu>
+              {/* 小屏幕隐藏的适配模式 */}
+              <div className="sm:hidden">
+                <MoreMenuItem
+                  icon={objectFit === "contain" ? <Maximize2 size={18} /> : <Minimize size={18} />}
+                  label={objectFit === "contain" ? "填充模式" : "适应模式"}
+                  onClick={() => onObjectFitChange(objectFit === "contain" ? "cover" : "contain")}
+                />
+              </div>
+
+              {/* 中等屏幕以下隐藏的循环模式 */}
+              <div className="md:hidden">
+                <MoreMenuItem
+                  icon={loopMode === "loop" ? <Repeat1 size={18} /> : <ArrowDownUp size={18} />}
+                  label={loopMode === "loop" ? "循环播放" : "顺序播放"}
+                  onClick={() => onLoopModeChange(loopMode === "loop" ? "sequential" : "loop")}
+                />
+              </div>
+
+              {/* 中等屏幕以下隐藏的转录按钮 */}
+              {isVideo && hasTranscript && onShowTranscript && (
+                <div className="md:hidden">
+                  <MoreMenuItem
+                    icon={<FileText size={18} />}
+                    label="显示转录"
+                    onClick={onShowTranscript}
+                  />
+                </div>
+              )}
+
+              {/* 中等屏幕以下隐藏的下载 */}
+              <div className="md:hidden">
+                <MoreMenuItem
+                  icon={<Download size={18} />}
+                  label={isVideo ? "下载视频" : "下载图片"}
+                  onClick={onDownload}
+                />
+              </div>
+
+              {/* 仅在视频模式下显示的倍速（中等屏幕以下） */}
+              {isVideo && (
+                <div className="md:hidden">
+                  <MoreMenuItem
+                    icon={<span className="text-sm font-mono">{rate}x</span>}
+                    label="播放速度"
+                    onClick={() => {
+                      const steps = [1, 1.25, 1.5, 2, 0.75, 0.5];
+                      const i = steps.indexOf(rate);
+                      const next = steps[(i + 1) % steps.length];
+                      onRateChange(next);
+                    }}
+                  />
+                </div>
+              )}
+            </MoreMenu>
+          </div>
+
           {/* 全屏 - 所有设备都显示 */}
           <button
             className="w-[34px] h-[34px] inline-flex items-center justify-center rounded-full bg-white/15 text-white border border-white/20 backdrop-blur-sm cursor-pointer"
@@ -246,6 +325,8 @@ export function MediaControls({
           >
             {isFullscreen ? <Minimize2 size={18} /> : <Maximize size={18} />}
           </button>
+
+
         </div>
       </div>
 

app/aweme/[awemeId]/components/MoreMenu.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { MoreVertical, X } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+
+interface MoreMenuProps {
+  children: React.ReactNode;
+}
+
+export function MoreMenu({ children }: MoreMenuProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  // 点击外部关闭菜单
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        menuRef.current &&
+        buttonRef.current &&
+        !menuRef.current.contains(event.target as Node) &&
+        !buttonRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen]);
+
+  return (
+    <div className="relative">
+      {/* 更多按钮 */}
+      <button
+        ref={buttonRef}
+        className="w-[34px] h-[34px] inline-flex items-center justify-center rounded-full bg-white/15 text-white border border-white/20 backdrop-blur-sm cursor-pointer"
+        onClick={() => setIsOpen(!isOpen)}
+        aria-label="更多选项"
+        title="更多选项"
+      >
+        {isOpen ? <X size={18} /> : <MoreVertical size={18} />}
+      </button>
+
+      {/* 弹出菜单 */}
+      {isOpen && (
+        <div
+          ref={menuRef}
+          className="absolute bottom-full right-0 mb-2 bg-zinc-900/95 backdrop-blur-xl border border-white/20 rounded-xl shadow-2xl overflow-hidden animate-in fade-in slide-in-from-bottom-2 duration-200"
+          style={{ minWidth: "200px" }}
+        >
+          <div className="p-2 flex flex-col gap-1">
+            {children}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface MoreMenuItemProps {
+  icon: React.ReactNode;
+  label: string;
+  onClick: () => void;
+}
+
+export function MoreMenuItem({ icon, label, onClick }: MoreMenuItemProps) {
+  return (
+    <button
+      className="flex items-center gap-3 px-3 py-2.5 text-white/90 hover:bg-white/10 rounded-lg transition-colors text-left w-full"
+      onClick={onClick}
+    >
+      <span className="flex-shrink-0">{icon}</span>
+      <span className="text-sm">{label}</span>
+    </button>
+  );
+}

app/aweme/[awemeId]/components/TranscriptPanel.tsx

@@ -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>
+  );
+}

app/aweme/[awemeId]/page.tsx

@@ -3,7 +3,7 @@ import BackButton from "@/app/components/BackButton";
 import AwemeDetailClient from "./Client";
 import type { Metadata } from "next";
 import { getFileUrl } from "@/lib/minio";
-import { AwemeData } from "./types";
+import { AwemeData, VideoTranscript } from "./types";
 
 export async function generateMetadata({ params }: { params: Promise<{ awemeId: string }> }): Promise<Metadata> {
   const id = (await params).awemeId;
@@ -82,13 +82,16 @@ export default async function AwemeDetail({ params }: { params: Promise<{ awemeI
         const aweme = post!
         return {
           type: "image" as const,
-          images: aweme!.images.map(img => ({ ...img, url: getFileUrl(img.url), animated: getFileUrl(img.animated??'default-animated.png'), })),
+          images: aweme!.images.map(img => ({ ...img, url: getFileUrl(img.url), animated: getFileUrl(img.animated ?? 'default-animated.png'), })),
           music_url: getFileUrl(aweme!.music_url || 'default-music.mp3'),
         };
       }
     })()
   }
 
+  const transcript: VideoTranscript | null = isVideo ? await prisma.videoTranscript.findUnique({
+    where: { videoId: id },
+  }) : null;
 
   // Compute prev/next neighbors by created_at across videos and image posts
   const currentCreatedAt = (isVideo ? video!.created_at : post!.created_at);
@@ -125,7 +128,7 @@ export default async function AwemeDetail({ params }: { params: Promise<{ awemeI
           className="inline-flex items-center justify-center w-9 h-9 rounded-full bg-white/15 text-white border border-white/20 backdrop-blur hover:bg-white/25"
         />
       </div>
-      <AwemeDetailClient data={data} neighbors={neighbors} />
+      <AwemeDetailClient data={data} neighbors={neighbors} transcript={transcript} />
     </main>
   );
 }

app/aweme/[awemeId]/types.ts

@@ -37,6 +37,12 @@ export type ImageData = {
 
 export type AwemeData = VideoData | ImageData;
 
+export type VideoTranscript = {
+  speech_detected: boolean;
+  language: string | null;
+  transcript: string[];
+};
+
 export type Neighbors = {
   prev: { aweme_id: string } | null;
   next: { aweme_id: string } | null;