refactor: 删除 useStep5Preview - 前端预览不再依赖后端FFmpeg渲染

apps/web/src/pages/generate/hooks/useStep5Preview.ts

@@ -1,476 +0,0 @@
-/**
- * Step 5 生成预览 Hook（支持多预览 + voice_ids）
- * 调用 /generation/preview 接口创建多个预览任务，轮询状态直到全部完成
- */
-import { useState, useCallback, useMemo, useEffect, useRef } from "react"
-import { createPreview, getPreviewStatus } from "@/api/generation"
-import { updateEditPlan } from "@/api/template-editor/editPlans"
-import type { PreviewTaskResponse, PreviewStatus as ApiPreviewStatus } from "@/api/generation"
-import type { EditingTemplate } from "@/api/editing-planner"
-import { safeExtractError } from "./generate-video/errorUtils"
-import type { TitleSettings } from "../types"
-
-/** 安全地将值转为字符串，防止对象被直接渲染导致 React Error #31 */
-const safeString = (val: unknown, fallback: string): string => {
-  if (val == null) return fallback
-  const s = safeExtractError(val)
-  return s || fallback
-}
-
-/** 安全地将值转为数字，防止非数字值进入渲染 */
-const safeNumber = (val: unknown, fallback = 0): number => {
-  if (typeof val === "number" && !Number.isNaN(val)) return val
-  if (typeof val === "string") {
-    const n = Number(val)
-    return Number.isNaN(n) ? fallback : n
-  }
-  return fallback
-}
-
-interface UseStep5PreviewProps {
-  templates: EditingTemplate[]
-  selectedTemplate: string
-  materialMode: "manual" | "auto"
-  selectedMaterials: string[]
-  smartSelectedIds: string[]
-  duration: number
-  videoRatio: string
-  /** 配音 voice_ids（传给后端，让预览包含配音音频） */
-  voiceIds?: string[]
-  /** 配音素材库ID（用户选择的上传音频或AI配音素材） */
-  voiceLibraryId?: string
-  /** 要生成的预览数量 */
-  previewCount?: number
-  /** 标题设置（传递给后端，让预览视频包含标题） */
-  titleSettings?: TitleSettings
-}
-
-export type PreviewStatus = "idle" | "pending" | "generating" | "ready" | "error"
-
-/** 单个预览生成结果 */
-export interface PreviewResult {
-  taskId: string
-  videoUrl: string
-  clipCount: number
-  transitionCount: number
-  materialUsage: number
-  duration: number
-  fileSize: number
-  generateDuration: number
-  progress: number
-}
-
-/** 单个预览项的完整状态（用于多预览） */
-export interface PreviewItem {
-  index: number
-  status: PreviewStatus
-  result: PreviewResult | null
-  error: string
-  progress: number
-}
-
-// 轮询超时时间（10 分钟）
-const POLL_TIMEOUT_MS = 10 * 60 * 1000
-
-/** 初始单项状态 */
-const createInitialItem = (index: number): PreviewItem => ({
-  index,
-  status: "idle",
-  result: null,
-  error: "",
-  progress: 0,
-})
-
-export function useStep5Preview({
-  templates,
-  selectedTemplate,
-  materialMode,
-  selectedMaterials,
-  smartSelectedIds,
-  duration,
-  videoRatio,
-  voiceIds,
-  voiceLibraryId,
-  previewCount = 1,
-  titleSettings,
-}: UseStep5PreviewProps) {
-  const templateName = useMemo(
-    () => templates.find((t) => t.id === selectedTemplate)?.name ?? "未选择",
-    [templates, selectedTemplate],
-  )
-
-  const materialCount = useMemo(() => {
-    if (materialMode === "auto") {
-      return `${smartSelectedIds.length} 个素材（智能匹配）`
-    }
-    return `${selectedMaterials.length} 个素材`
-  }, [materialMode, selectedMaterials.length, smartSelectedIds.length])
-
-  const materialTotal = materialMode === "auto" ? smartSelectedIds.length : selectedMaterials.length
-
-  /* ── 多预览状态 ── */
-  const [items, setItems] = useState<PreviewItem[]>(() =>
-    Array.from({ length: previewCount }, (_, i) => createInitialItem(i)),
-  )
-  const [selectedIndex, setSelectedIndex] = useState(0)
-
-  // 每个任务 ID + 轮询定时器，用于防止竞态条件（按 index 存储）
-  const taskIdsRef = useRef<Map<number, string>>(new Map())
-  const pollTimersRef = useRef<Map<number, ReturnType<typeof setTimeout>>>(new Map())
-  const startTimeRef = useRef<number>(0)
-
-  const clearPollTimer = useCallback((index?: number) => {
-    if (index !== undefined) {
-      const timer = pollTimersRef.current.get(index)
-      if (timer) {
-        clearTimeout(timer)
-        pollTimersRef.current.delete(index)
-      }
-    } else {
-      pollTimersRef.current.forEach((timer) => clearTimeout(timer))
-      pollTimersRef.current.clear()
-    }
-  }, [])
-
-  // 同步 previewCount 变化（增减项）
-  useEffect(() => {
-    setItems((prev) => {
-      if (prev.length === previewCount) return prev
-      if (prev.length > previewCount) return prev.slice(0, previewCount)
-      return [
-        ...prev,
-        ...Array.from({ length: previewCount - prev.length }, (_, i) =>
-          createInitialItem(prev.length + i),
-        ),
-      ]
-    })
-    // 如果 selectedIndex 超出范围，重置
-    setSelectedIndex((prev) => Math.min(prev, previewCount - 1))
-  }, [previewCount])
-
-  /* ── 参数变化时重置所有预览状态 ── */
-  const prevDepsRef = useRef({
-    selectedTemplate,
-    materialMode,
-    selectedMaterials: [...selectedMaterials].sort().join(","),
-    smartSelectedIds: [...smartSelectedIds].sort().join(","),
-    duration,
-    videoRatio,
-    voiceIds: [...(voiceIds || [])].sort().join(","),
-    titleSettings: titleSettings?.title || "",
-  })
-
-  useEffect(() => {
-    const currentKey = [
-      selectedTemplate,
-      materialMode,
-      [...selectedMaterials].sort().join(","),
-      [...smartSelectedIds].sort().join(","),
-      duration,
-      videoRatio,
-      [...(voiceIds || [])].sort().join(","),
-      titleSettings?.title || "",
-    ].join("|")
-
-    const prevKey = [
-      prevDepsRef.current.selectedTemplate,
-      prevDepsRef.current.materialMode,
-      prevDepsRef.current.selectedMaterials,
-      prevDepsRef.current.smartSelectedIds,
-      prevDepsRef.current.duration,
-      prevDepsRef.current.videoRatio,
-      prevDepsRef.current.voiceIds,
-      prevDepsRef.current.titleSettings,
-    ].join("|")
-
-    if (prevKey !== currentKey && items.some((it) => it.status !== "idle")) {
-      taskIdsRef.current.clear()
-      clearPollTimer()
-      setItems(Array.from({ length: previewCount }, (_, i) => createInitialItem(i)))
-      setSelectedIndex(0)
-    }
-
-    prevDepsRef.current = {
-      selectedTemplate,
-      materialMode,
-      selectedMaterials: [...selectedMaterials].sort().join(","),
-      smartSelectedIds: [...smartSelectedIds].sort().join(","),
-      duration,
-      videoRatio,
-      voiceIds: [...(voiceIds || [])].sort().join(","),
-      titleSettings: titleSettings?.title || "",
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    selectedTemplate,
-    materialMode,
-    selectedMaterials,
-    smartSelectedIds,
-    duration,
-    videoRatio,
-    voiceIds,
-    previewCount,
-    titleSettings,
-  ])
-
-  // 组件卸载时清理所有轮询
-  useEffect(() => {
-    return () => {
-      clearPollTimer()
-    }
-  }, [clearPollTimer])
-
-  /** 轮询单个预览任务状态 */
-  const pollPreviewStatus = useCallback(
-    (index: number, taskId: string) => {
-      const poll = async () => {
-        // 竞态检查
-        if (taskIdsRef.current.get(index) !== taskId) return
-
-        // 超时检查
-        if (Date.now() - startTimeRef.current > POLL_TIMEOUT_MS) {
-          setItems((prev) =>
-            prev.map((it) =>
-              it.index === index ? { ...it, status: "error", error: "预览生成超时，请重试" } : it,
-            ),
-          )
-          return
-        }
-
-        try {
-          const data: PreviewTaskResponse = await getPreviewStatus(taskId)
-
-          if (taskIdsRef.current.get(index) !== taskId) return
-
-          const status = data.status as ApiPreviewStatus
-
-          if (status === "completed") {
-            const result: PreviewResult = {
-              taskId: safeString(data.task_id, ""),
-              videoUrl: safeString(data.video_url, ""),
-              clipCount: safeNumber(data.clip_count),
-              transitionCount: safeNumber(data.transition_count),
-              materialUsage: safeNumber(data.material_usage),
-              duration: safeNumber(data.duration),
-              fileSize: safeNumber(data.file_size),
-              generateDuration: safeNumber(data.generate_duration),
-              progress: 100,
-            }
-            setItems((prev) =>
-              prev.map((it) =>
-                it.index === index ? { ...it, status: "ready", result, progress: 100 } : it,
-              ),
-            )
-
-            // 保存预览视频 URL 到 plan config，供封面生成使用
-            if (result.videoUrl && selectedTemplate) {
-              updateEditPlan(selectedTemplate, {
-                config: { rendered_storage_key: result.videoUrl },
-              }).catch((err) => {
-                console.warn("[Step4] 保存预览视频URL到plan config失败:", err)
-              })
-            }
-            return
-          }
-
-          if (status === "failed") {
-            setItems((prev) =>
-              prev.map((it) =>
-                it.index === index
-                  ? {
-                      ...it,
-                      status: "error",
-                      error: safeString(data.error_message, "预览生成失败，请重试"),
-                    }
-                  : it,
-              ),
-            )
-            return
-          }
-
-          if (status === "cancelled") {
-            setItems((prev) =>
-              prev.map((it) =>
-                it.index === index ? { ...it, status: "error", error: "预览任务已取消" } : it,
-              ),
-            )
-            return
-          }
-
-          // pending / generating 状态继续轮询
-          const prog = safeNumber(data.progress)
-          const nextStatus: PreviewStatus = status === "pending" ? "pending" : "generating"
-          setItems((prev) =>
-            prev.map((it) =>
-              it.index === index ? { ...it, status: nextStatus, progress: prog } : it,
-            ),
-          )
-          const delay = status === "pending" ? 5000 : 2000
-          pollTimersRef.current.set(index, setTimeout(poll, delay))
-        } catch {
-          if (taskIdsRef.current.get(index) !== taskId) return
-          pollTimersRef.current.set(index, setTimeout(poll, 3000))
-        }
-      }
-
-      pollTimersRef.current.set(index, setTimeout(poll, 1000))
-    },
-    [selectedTemplate],
-  )
-
-  /** 生成所有预览 */
-  const generatePreview = useCallback(async () => {
-    if (!selectedTemplate) {
-      setItems((prev) => prev.map((it) => ({ ...it, status: "error", error: "请先选择模板" })))
-      return
-    }
-    if (materialTotal === 0) {
-      setItems((prev) => prev.map((it) => ({ ...it, status: "error", error: "请先选择素材" })))
-      return
-    }
-
-    // 取消之前的所有轮询
-    clearPollTimer()
-    taskIdsRef.current.clear()
-
-    // 初始化所有项为 pending
-    setItems(
-      Array.from({ length: previewCount }, (_, i) => ({
-        index: i,
-        status: "pending" as PreviewStatus,
-        result: null,
-        error: "",
-        progress: 0,
-      })),
-    )
-    setSelectedIndex(0)
-    startTimeRef.current = Date.now()
-
-    const assetIds = materialMode === "auto" ? smartSelectedIds : selectedMaterials
-
-    // 并发创建所有预览任务（Promise.all 并行请求，减少串行等待）
-    const createTasks = Array.from({ length: previewCount }, async (_, i) => {
-      try {
-        const response = await createPreview({
-          template_id: selectedTemplate,
-          asset_ids: assetIds,
-          duration: duration || undefined,
-          video_ratio: videoRatio,
-          voice_ids: voiceIds && voiceIds.length > 0 ? voiceIds : undefined,
-          voice_library_id: voiceLibraryId || undefined,
-          // 标题烧录配置
-          title_config: titleSettings?.title
-            ? {
-                text: titleSettings.title,
-                font: titleSettings.font,
-                font_size: titleSettings.size,
-                font_color: titleSettings.color,
-                position: titleSettings.position,
-                bold: titleSettings.bold,
-                stroke: titleSettings.stroke,
-                shadow: titleSettings.shadow,
-              }
-            : undefined,
-        })
-
-        if (startTimeRef.current === 0) return
-
-        taskIdsRef.current.set(i, response.task_id)
-        pollPreviewStatus(i, response.task_id)
-      } catch (e) {
-        const errMsg = safeString(e instanceof Error ? e.message : e, "预览生成失败")
-        setItems((prev) =>
-          prev.map((it) => (it.index === i ? { ...it, status: "error", error: errMsg } : it)),
-        )
-      }
-    })
-    await Promise.all(createTasks)
-  }, [
-    selectedTemplate,
-    materialTotal,
-    materialMode,
-    smartSelectedIds,
-    selectedMaterials,
-    duration,
-    videoRatio,
-    voiceIds,
-    voiceLibraryId,
-    previewCount,
-    titleSettings,
-    clearPollTimer,
-    pollPreviewStatus,
-  ])
-
-  /** 重新生成所有预览 */
-  const regeneratePreview = useCallback(() => {
-    generatePreview()
-  }, [generatePreview])
-
-  /** 是否所有预览都已完成 */
-  const allReady = items.length > 0 && items.every((it) => it.status === "ready")
-  /** 是否至少有一个预览已完成 */
-  const anyReady = items.some((it) => it.status === "ready")
-  /** 是否有任一正在生成中 */
-  const anyGenerating = items.some((it) => it.status === "pending" || it.status === "generating")
-
-  /** 当前选中的预览结果 */
-  const selectedResult = items[selectedIndex]?.result ?? null
-
-  /** 综合状态（兼容旧逻辑） */
-  const previewStatus: PreviewStatus = useMemo(() => {
-    if (items.every((it) => it.status === "idle")) return "idle"
-    if (items.some((it) => it.status === "pending" || it.status === "generating"))
-      return "generating"
-    if (allReady) return "ready"
-    if (items.every((it) => it.status === "error")) return "error"
-    // 部分完成部分出错
-    if (anyReady) return "ready"
-    return "error"
-  }, [items, allReady, anyReady])
-
-  /** 综合进度（取平均） */
-  const progress = useMemo(() => {
-    if (items.length === 0) return 0
-    return Math.round(items.reduce((sum, it) => sum + it.progress, 0) / items.length)
-  }, [items])
-
-  /** 综合错误信息 */
-  const previewError = useMemo(() => {
-    const errorItems = items.filter((it) => it.status === "error" && it.error)
-    if (errorItems.length === 0) return ""
-    if (errorItems.length === 1) return errorItems[0].error
-    return `${errorItems.length} 个预览生成失败`
-  }, [items])
-
-  const canProceed = anyReady
-
-  /** 当前选中预览的 taskId（用于确认生成时复用预览产物） */
-  const selectedTaskId = selectedResult?.taskId ?? ""
-
-  return {
-    templateName,
-    materialCount,
-    duration,
-    videoRatio,
-    // 多预览状态
-    items,
-    selectedIndex,
-    setSelectedIndex,
-    previewCount,
-    // 综合状态
-    previewStatus,
-    previewResult: selectedResult,
-    previewError,
-    progress,
-    canProceed,
-    allReady,
-    anyReady,
-    anyGenerating,
-    generatePreview,
-    regeneratePreview,
-    // 确认生成复用预览产物
-    selectedTaskId,
-  }
-}
-
-export default useStep5Preview