fix: setExtractionOptions 改为 nbSamples: Infinity，提取全部样本

fix: Canvas播放器全量修复 - nbSamples/description/调试日志 (#1448 )
fix: demuxSegment添加5秒超时保护+防重复resolve (#1447 )
2026-08-19 19:53:34 +08:00 · 2026-08-19 19:27:09 +08:00 · 2026-08-19 19:19:35 +08:00 · 2026-08-19 19:01:17 +08:00 · 2026-08-19 18:42:13 +08:00 · 2026-08-19 18:26:55 +08:00
6 changed files with 415 additions and 114 deletions
@@ -18,6 +18,10 @@ import { useCloneProgress } from "@/hooks/useCloneProgress"
 import { getAssetsByKind } from "@/api/assets"
 import CloneModal from "@/components/voice/CloneModal"
 import GenerateHeader from "./components/GenerateHeader"
+import {
+  calculateTotalVideoDuration,
+  estimateTotalVideoDuration,
+} from "./utils/calculateTotalVideoDuration"
 import GenerateStepsBar from "./components/GenerateStepsBar"
 import GenerateResultPanel from "./components/GenerateResultPanel"
 import PreviewVideoPanel from "./components/PreviewVideoPanel"
@@ -109,16 +113,10 @@ const GeneratePage: React.FC = () => {

  /* ── 视频总时长计算（用于配音时长校验） ── */
  const totalVideoDuration = useMemo(() => {
-    if (!previewAssets.length || !currentTemplate) return 0
-    const templateSegments = currentTemplate.segments || []
-    return previewAssets.reduce((sum, asset, i) => {
-      const assetDuration = asset.duration || asset.metadata?.duration || 30
-      const tplSeg = templateSegments[i] || templateSegments[templateSegments.length - 1]
-      const segDuration = tplSeg
-        ? Math.min(tplSeg.duration_max, Math.max(tplSeg.duration_min, assetDuration))
-        : Math.min(assetDuration, 10)
-      return sum + segDuration
-    }, 0)
+    // 优先用素材精确时长；素材未加载时用模板 segments 的 duration_max 之和估算
+    const exact = calculateTotalVideoDuration(previewAssets, currentTemplate ?? undefined)
+    if (exact > 0) return exact
+    return estimateTotalVideoDuration(currentTemplate ?? undefined)
  }, [previewAssets, currentTemplate])

  /* ── 配音音频 URL ── */
@@ -289,6 +287,7 @@ const GeneratePage: React.FC = () => {

      {/* ── 视频预览弹窗 ── */}
      <Modal
+        className="xx-preview-modal"
        open={previewModalOpen}
        onCancel={() => setPreviewModalOpen(false)}
        footer={null}
@@ -272,21 +272,22 @@ const Step5VoiceSelect: React.FC<Step5VoiceSelectProps> = ({
              >
                <span style={{ display: "flex", alignItems: "center", gap: 4 }}>
                  {formatDuration(item.duration)}
-                  {totalVideoDuration > 0 && (item.duration || 0) < totalVideoDuration && (
-                    <span
-                      style={{
-                        color: "#ff4d4f",
-                        fontSize: 11,
-                        fontWeight: 500,
-                        display: "inline-flex",
-                        alignItems: "center",
-                        gap: 2,
-                      }}
-                    >
-                      <WarningOutlined />
-                      时长不足
-                    </span>
-                  )}
+                  {totalVideoDuration > 0 &&
+                    (Number(item.duration) || 0) < Number(totalVideoDuration) && (
+                      <span
+                        style={{
+                          color: "#ff4d4f",
+                          fontSize: 11,
+                          fontWeight: 500,
+                          display: "inline-flex",
+                          alignItems: "center",
+                          gap: 2,
+                        }}
+                      >
+                        <WarningOutlined />
+                        时长不足
+                      </span>
+                    )}
                </span>
                <span>{formatFileSize(item.file_size)}</span>
              </div>
@@ -2881,11 +2881,11 @@
  overflow: hidden;
 }

-.ant-modal-content {
+.xx-preview-modal .ant-modal-content {
  padding: 0 !important;
 }

-.ant-modal-close {
+.xx-preview-modal .ant-modal-close {
  color: #fff !important;
 }

@@ -8,6 +8,59 @@ import { useRef, useCallback, useEffect, useState } from "react"
 import { createFile } from "mp4box"
 import type { Movie, Sample } from "mp4box"

+// ── MP4 Box 解析辅助函数 ──
+
+/** 在指定范围内查找 avcC / hvcC box，返回其数据 */
+function findCodecConfig(buffer: ArrayBuffer, start: number, end: number): ArrayBuffer | undefined {
+  const view = new DataView(buffer)
+  let offset = start
+
+  while (offset < end - 8) {
+    const size = view.getUint32(offset)
+    if (size < 8) break
+    const type = String.fromCharCode(
+      view.getUint8(offset + 4),
+      view.getUint8(offset + 5),
+      view.getUint8(offset + 6),
+      view.getUint8(offset + 7),
+    )
+
+    // 容器 box（fullbox 多 4 字节）
+    const containerBoxes = ["trak", "mdia", "minf", "stbl"]
+    if (containerBoxes.includes(type)) {
+      // fullbox: size(4) + type(4) + version(1) + flags(3) = 12 bytes header
+      const contentStart = offset + 12
+      const result = findCodecConfig(buffer, contentStart, offset + size)
+      if (result) return result
+    } else if (type === "stsd") {
+      // SampleDescriptionBox 是 fullbox: 8 header + 4 version/flags + 4 entry_count
+      const entryCount = view.getUint32(offset + 12)
+      let entryOffset = offset + 16
+      for (let i = 0; i < entryCount && entryOffset < offset + size; i++) {
+        const entrySize = view.getUint32(entryOffset)
+        // 视觉样本条目: 8 header + 6 reserved + 2 data_ref_index + remaining
+        // 子 box 从 entryOffset + 16 + 62 开始 (skip reserved + data_ref_index + predefined)
+        // 实际结构: 8(header) + 6(reserved) + 2(data_ref_index) + 16(predefined+reserved) + 2(width) + 2(height) + ...
+        // 子 box 从 entryOffset + 8 + 6 + 2 + 16 + 2 + 2 + 2 + 2 + 4 + 2 + 2 + 2 + 2 = entryOffset + 78
+        // 更简单的做法：扫描 entry 内的子 box
+        const entryEnd = entryOffset + entrySize
+        const subBoxStart = entryOffset + 8 + 70 // VisualSampleEntry 固定字段共 70 字节
+        const result = findCodecConfig(buffer, subBoxStart, entryEnd)
+        if (result) return result
+        entryOffset += entrySize
+      }
+    } else if (type === "avcC" || type === "hvcC") {
+      // 找到目标 box，返回完整 box（含 header）
+      // 返回完整 box（含 size + type header），WebCodecs HEVC decoder 需要
+      return buffer.slice(offset, offset + size)
+    }
+
+    if (size === 0) break
+    offset += size
+  }
+  return undefined
+}
+
 // ── 帧队列（环形缓冲区） ──
 interface FrameEntry {
  frame: VideoFrame
@@ -81,6 +134,10 @@ interface SegmentMeta {
  videoWidth: number
  /** 视频高度（像素） */
  videoHeight: number
+  /** 解码器配置数据（HEVC hvcC / H.264 avcC），WebCodecs 必需 */
+  description?: ArrayBuffer
+  /** 前端提取的样本数据（已按时间范围过滤，从关键帧开始） */
+  samples: Sample[]
 }

 // ── 播放器状态 ──
@@ -149,6 +206,7 @@ export function useCanvasPlayer(
  const videoDimRef = useRef<{ width: number; height: number }>({ width: 0, height: 0 })
  const isDestroyedRef = useRef(false)
  const lastProgressUpdateRef = useRef<number>(0)
+  const descriptionCache = useRef<Map<string, ArrayBuffer>>(new Map())

  // 计算总时长
  const totalDuration = segments.reduce((sum, seg) => sum + (seg.endTime - seg.startTime), 0)
@@ -171,11 +229,43 @@ export function useCanvasPlayer(
    }
  }, [])

-  // ── 解封装单个片段，提取轨道元数据 ──
+  // ── 从 MP4 buffer 提取编解码器配置数据（avcC / hvcC） ──
+  // WebCodecs VideoDecoder 对 HEVC/H.265 必须提供 description 字段
+  const extractCodecDescription = useCallback((buffer: ArrayBuffer): ArrayBuffer | undefined => {
+    try {
+      const view = new DataView(buffer)
+      let offset = 0
+
+      // 查找 moov box
+      while (offset < buffer.byteLength - 8) {
+        const size = view.getUint32(offset)
+        const type = String.fromCharCode(
+          view.getUint8(offset + 4),
+          view.getUint8(offset + 5),
+          view.getUint8(offset + 6),
+          view.getUint8(offset + 7),
+        )
+        if (type === "moov") {
+          return findCodecConfig(buffer, offset + 8, offset + size)
+        }
+        if (size === 0) break
+        offset += size
+      }
+    } catch (e) {
+      console.warn("[useCanvasPlayer] extractCodecDescription failed:", e)
+    }
+    return undefined
+  }, [])
+
+  // ── 解封装单个片段，提取轨道元数据 + 按时间范围过滤样本 ──
+  // ✅ 关键修复：改为异步函数，等待 MP4Box.js 的 onSamples 回调完成后再返回
  const demuxSegment = useCallback(
-    (buffer: ArrayBuffer, segIndex: number): SegmentMeta | null => {
-      const segment = segments[segIndex]
-      if (!segment) return null
+    async (buffer: ArrayBuffer, segIndex: number): Promise<SegmentMeta | null> => {
+      const segment = segments?.[segIndex]
+      if (!segment) {
+        console.warn("[useCanvasPlayer] No segment at index", segIndex)
+        return null
+      }

      // 计算全局偏移
      let globalStart = 0
@@ -184,55 +274,164 @@ export function useCanvasPlayer(
      }

      const mp4File = createFile()
-      let meta: SegmentMeta | null = null

-      mp4File.onReady = (info: Movie) => {
-        const videoTrack = info.videoTracks[0]
-        if (!videoTrack) {
-          console.error("[useCanvasPlayer] No video track found for segment", segIndex)
-          return
+      return new Promise<SegmentMeta | null>((resolve) => {
+        let meta: SegmentMeta | null = null
+        let resolved = false
+
+        // ✅ 超时保护：5秒后如果 onSamples 没有触发，返回 null
+        const timeout = setTimeout(() => {
+          if (!resolved) {
+            console.error(
+              `[useCanvasPlayer] Timeout: onSamples not triggered for segment ${segIndex}`,
+            )
+            resolved = true
+            resolve(null)
+          }
+        }, 5000)
+
+        mp4File.onReady = (info: Movie) => {
+          const videoTrack = info?.videoTracks?.[0]
+
+          console.log("[useCanvasPlayer] demuxSegment:", {
+            segIndex,
+            startTime: segment.startTime,
+            endTime: segment.endTime,
+            nbSamples: videoTrack?.nb_samples,
+            codec: videoTrack?.codec,
+            videoWidth: videoTrack?.track_width,
+            videoHeight: videoTrack?.track_height,
+          })
+
+          if (!videoTrack) {
+            console.warn("[useCanvasPlayer] No video track found for segment", segIndex)
+            clearTimeout(timeout)
+            resolved = true
+            resolve(null)
+            return
+          }
+
+          // 提取编解码器配置数据（HEVC 必需，H.264 也需要）
+          let description = extractCodecDescription(buffer)
+
+          // 如果当前分片没有 description，尝试从缓存获取
+          if (!description) {
+            for (const cached of descriptionCache.current.values()) {
+              description = cached
+              break
+            }
+          }
+
+          // ✅ 如果 description 缺失，无法解码 HEVC
+          if (!description) {
+            console.error(
+              `[useCanvasPlayer] No description found for segment ${segIndex}, cannot decode HEVC`,
+            )
+            clearTimeout(timeout)
+            resolved = true
+            resolve(null)
+            return
+          }
+
+          // 缓存 description 供后续分片使用
+          descriptionCache.current.set(segment.assetId, description)
+
+          meta = {
+            assetId: segment.assetId,
+            videoUrl: segment.videoUrl,
+            globalStartTime: globalStart,
+            globalEndTime: globalStart + (segment.endTime - segment.startTime),
+            trackId: videoTrack.id ?? 1,
+            timescale: videoTrack.timescale ?? 90000,
+            codec: videoTrack.codec ?? "avc1.42E01E",
+            videoWidth: videoTrack.track_width || 1280,
+            videoHeight: videoTrack.track_height || 720,
+            description,
+            samples: [],
+          }
+
+          // 提取所有 samples
+          mp4File.setExtractionOptions(videoTrack.id ?? 1, null, {
+            nbSamples: Infinity, // 提取所有 sample
+          })
+          mp4File.start()
        }

-        meta = {
-          assetId: segment.assetId,
-          videoUrl: segment.videoUrl,
-          globalStartTime: globalStart,
-          globalEndTime: globalStart + (segment.endTime - segment.startTime),
-          trackId: videoTrack.id,
-          timescale: videoTrack.timescale,
-          codec: videoTrack.codec,
-          videoWidth: videoTrack.track_width || 1280,
-          videoHeight: videoTrack.track_height || 720,
+        mp4File.onSamples = (_trackId: number, _user: unknown, samples: Sample[]) => {
+          if (resolved) return // ✅ 防止重复 resolve
+
+          if (!meta) {
+            clearTimeout(timeout)
+            resolved = true
+            resolve(null)
+            return
+          }
+
+          // 前端切片：按 [startTime, endTime] 时间范围过滤样本
+          const timescale = meta.timescale
+          const startCts = segment.startTime * timescale
+          const endCts = segment.endTime * timescale
+
+          // 过滤出时间范围内的样本
+          let filtered = samples.filter((s) => (s?.cts ?? 0) >= startCts && (s?.cts ?? 0) < endCts)
+
+          // 确保从关键帧开始（跳过第一个 sync 之前的非关键帧）
+          let foundSync = false
+          filtered = filtered.filter((s) => {
+            if (s.is_sync) {
+              foundSync = true
+              return true
+            }
+            return foundSync
+          })
+
+          // Fallback：如果时间范围内没有样本，使用全部样本从第一个关键帧开始
+          if (filtered.length === 0) {
+            console.warn(
+              `[useCanvasPlayer] No samples in range [${segment.startTime}s, ${segment.endTime}s] for segment ${segIndex}, fallback to all from keyframe`,
+            )
+            let sync = false
+            filtered = samples.filter((s) => {
+              if (s.is_sync) {
+                sync = true
+                return true
+              }
+              return sync
+            })
+          }
+
+          meta.samples = filtered
+          console.log(
+            `[useCanvasPlayer] Segment ${segIndex}: ${filtered.length}/${samples.length} samples (range ${segment.startTime}s-${segment.endTime}s)`,
+          )
+
+          // ✅ 关键修复：等待 onSamples 完成后再返回
+          clearTimeout(timeout)
+          resolved = true
+          resolve(meta)
        }

-        // 提取所有 samples（start() 会同步触发 onSamples）
-        mp4File.setExtractionOptions(videoTrack.id, null, {
-          nbSamples: videoTrack.nb_samples,
-        })
-        mp4File.start()
-      }
+        mp4File.onError = (_module: string, message: string) => {
+          console.error(`[useCanvasPlayer] MP4Box error: ${message}`)
+          clearTimeout(timeout)
+          resolved = true
+          resolve(null)
+        }

-      mp4File.onError = (_module: string, message: string) => {
-        console.error(`[useCanvasPlayer] MP4Box error: ${message}`)
-      }
-
-      // mp4box 需要在 buffer 上设置 fileStart 属性
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      ;(buffer as any).fileStart = 0
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      mp4File.appendBuffer(buffer as any)
-
-      return meta
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ;(buffer as any).fileStart = 0
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        mp4File.appendBuffer(buffer as any)
+      })
    },
-    [segments],
+    [segments, extractCodecDescription],
  )

  // ── 初始化 VideoDecoder 并解码指定片段 ──
  const decodeSegment = useCallback(
-    async (buffer: ArrayBuffer, meta: SegmentMeta): Promise<void> => {
+    async (_buffer: ArrayBuffer, meta: SegmentMeta): Promise<void> => {
      if (isDestroyedRef.current) return

-      const mp4File = createFile()
      let decoderReady = false

      // 配置解码器（每个片段可能需要不同的 codec/分辨率）
@@ -251,11 +450,20 @@ export function useCanvasPlayer(
        },
      })

+      console.log("[useCanvasPlayer] configure:", {
+        codec: meta.codec,
+        description: meta.description,
+        descriptionByteLength: meta.description?.byteLength,
+        videoWidth: meta.videoWidth,
+        videoHeight: meta.videoHeight,
+      })
+
      try {
        await decoder.configure({
          codec: meta.codec,
          codedWidth: meta.videoWidth,
          codedHeight: meta.videoHeight,
+          ...(meta.description ? { description: meta.description } : {}),
        })
        decoderRef.current = decoder
        decoderReady = true
@@ -271,45 +479,24 @@ export function useCanvasPlayer(

      if (!decoderReady) return

-      // 收集 samples
-      const samplesCollected: Sample[] = []
-
-      mp4File.onReady = (info: Movie) => {
-        const videoTrack = info.videoTracks[0]
-        if (!videoTrack) return
-
-        mp4File.setExtractionOptions(videoTrack.id, null, {
-          nbSamples: videoTrack.nb_samples,
-        })
-        mp4File.start()
+      // 使用 demuxSegment 中已提取并过滤的 samples（前端切片）
+      const samplesCollected = meta.samples
+      if (samplesCollected.length === 0) {
+        console.warn("[useCanvasPlayer] No samples to decode for segment", meta.assetId)
+        return
      }

-      mp4File.onSamples = (_trackId: number, _user: unknown, samples: Sample[]) => {
-        samplesCollected.push(...samples)
-      }
-
-      mp4File.onError = (_module: string, message: string) => {
-        console.error(`[useCanvasPlayer] MP4Box decode error: ${message}`)
-      }
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      ;(buffer as any).fileStart = 0
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      mp4File.appendBuffer(buffer as any)
-
-      // 等待 samples 收集完成（mp4box start() 是同步的）
-      await new Promise((resolve) => setTimeout(resolve, 10))
-
      // 送入解码器
      for (const sample of samplesCollected) {
        if (!sample.data || isDestroyedRef.current) continue
        if (decoder.state === "closed") break

+        if (!sample.data) continue
        const chunk = new EncodedVideoChunk({
          type: sample.is_sync ? "key" : "delta",
-          timestamp: (sample.cts / meta.timescale) * 1_000_000,
-          duration: (sample.duration / meta.timescale) * 1_000_000,
-          data: sample.data.buffer as ArrayBuffer,
+          timestamp: ((sample.cts ?? 0) / (meta.timescale || 90000)) * 1_000_000,
+          duration: ((sample.duration ?? 0) / (meta.timescale || 90000)) * 1_000_000,
+          data: sample.data,
        })

        try {
@@ -341,17 +528,24 @@ export function useCanvasPlayer(
      ctx.fillStyle = title.color
      ctx.textAlign = "center"

-      let y: number
+      // 按 "/" 分割为多行（"/" 作为手动换行符）
+      const lines = title.text.split(/[/／⁄∕]/)
+      console.log("[drawTitle] 原始标题:", JSON.stringify(title.text), "分割后:", lines)
+      const lineHeight = fontSize * 1.3
+      const totalHeight = lines.length * lineHeight
+
+      // 根据 position 计算第一行的 Y 坐标
+      let startY: number
      switch (title.position) {
        case "top":
-          y = fontSize + canvas.height * 0.08
+          startY = fontSize + canvas.height * 0.08
          break
        case "bottom":
-          y = canvas.height - canvas.height * 0.08
+          startY = canvas.height - canvas.height * 0.08 - totalHeight + lineHeight
          break
        case "center":
        default:
-          y = canvas.height / 2
+          startY = (canvas.height - totalHeight) / 2 + lineHeight
          break
      }

@@ -362,13 +556,15 @@ export function useCanvasPlayer(
        ctx.shadowOffsetY = 2
      }

-      if (title.stroke) {
-        ctx.strokeStyle = "#000000"
-        ctx.lineWidth = 1
-        ctx.strokeText(title.text, canvas.width / 2, y)
-      }
-
-      ctx.fillText(title.text, canvas.width / 2, y)
+      lines.forEach((line, idx) => {
+        const y = startY + idx * lineHeight
+        if (title.stroke) {
+          ctx.strokeStyle = "#000000"
+          ctx.lineWidth = 1
+          ctx.strokeText(line, canvas.width / 2, y)
+        }
+        ctx.fillText(line, canvas.width / 2, y)
+      })

      ctx.shadowColor = "transparent"
      ctx.shadowBlur = 0
@@ -428,7 +624,6 @@ export function useCanvasPlayer(
    if (frame) {
      const rect = computeDrawRect(canvas.width, canvas.height)
      ctx.drawImage(frame, rect.dx, rect.dy, rect.dw, rect.dh)
-      frame.close()
    }

    if (titleSettings?.text) {
@@ -494,6 +689,7 @@ export function useCanvasPlayer(
    frameQueueRef.current.clear()
    segmentDataRef.current.clear()
    segmentMetaRef.current = []
+    descriptionCache.current.clear()
  }, [])

  // ── 预加载下一个片段的数据 ──
@@ -522,12 +718,12 @@ export function useCanvasPlayer(

      if (isDestroyedRef.current) return

-      // 2. 解析每个片段的轨道元数据
+      // 2. 解析每个片段的轨道元数据（await 等待 onSamples 回调完成）
      const metas: SegmentMeta[] = []
      for (let i = 0; i < segments.length; i++) {
        const buffer = segmentDataRef.current.get(segments[i].assetId)
        if (!buffer) continue
-        const meta = demuxSegment(buffer, i)
+        const meta = await demuxSegment(buffer, i)
        if (meta) metas.push(meta)
      }

@@ -6,6 +6,7 @@ import { useCallback, useEffect, useState } from "react"
 import { message } from "antd"
 import type { CoverConfig, CoverTemplate } from "../types/cover"
 import { generateCover } from "@/api/generation"
+import { createPreview, getPreviewStatus } from "@/api/generation/preview"
 import {
  fetchCoverTemplates,
  createCoverTemplate,
@@ -111,8 +112,58 @@ export function useStep6Cover({
      // 提取详细错误信息
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      const anyErr = err as any
-      // 如果 API 拦截器已经弹出了后端返回的具体错误信息，这里跳过重复 toast
-      if (anyErr?.__msgShown) {
+      const statusCode = anyErr?.response?.status
+
+      // 400 错误：后端缺少预览视频，自动创建后重试
+      if (statusCode === 400) {
+        console.log("[Step6] 后端返回 400，尝试自动创建预览渲染任务...")
+        message.info("正在准备预览视频，请稍候...")
+        try {
+          const previewResp = await createPreview({
+            template_id: selectedTemplate,
+            asset_ids: assetIds,
+            duration: duration || 30,
+          })
+          // 轮询等待预览渲染完成
+          await new Promise<void>((resolve, reject) => {
+            const poll = setInterval(async () => {
+              try {
+                const status = await getPreviewStatus(previewResp.task_id)
+                if (status.status === "completed") {
+                  clearInterval(poll)
+                  resolve()
+                } else if (status.status === "failed") {
+                  clearInterval(poll)
+                  reject(new Error(status.error_message || "预览渲染失败"))
+                }
+              } catch (e) {
+                clearInterval(poll)
+                reject(e)
+              }
+            }, 3000)
+          })
+          message.success("预览视频就绪，重新生成封面...")
+          // 重试封面生成
+          const retryResp = await generateCover(selectedTemplate, {
+            asset_ids: assetIds,
+            cover_type: "ai_frame",
+          })
+          const retryUrl = retryResp.cover?.image_url || ""
+          if (retryUrl) {
+            onCoverSettingsChange({
+              ...coverSettings,
+              thumbnail_url: retryUrl,
+              ai_suggested_time: retryResp.cover?.frame_time ?? null,
+            })
+            message.success("封面生成成功")
+          } else {
+            message.warning("封面生成未返回图片，请重试")
+          }
+        } catch (retryErr) {
+          console.error("[Step6] 自动创建预览后重试失败:", retryErr)
+          message.error("预览视频创建失败，请稍后重试")
+        }
+      } else if (anyErr?.__msgShown) {
        // 拦截器已处理，不再重复弹出
      } else {
        let errorMsg = "封面生成失败"
@@ -137,7 +188,7 @@ export function useStep6Cover({
      clearTimeout(timeoutId)
      setGenerating(false)
    }
-  }, [selectedTemplate, assetIds, coverSettings, onCoverSettingsChange, generating])
+  }, [selectedTemplate, assetIds, coverSettings, onCoverSettingsChange, generating, duration])

  // ── 模板操作方法 ──
  const handleSelectTemplate = useCallback((id: string) => {
@@ -0,0 +1,54 @@
+/**
+ * 共享：根据素材列表和模板片段计算总视频时长
+ * GeneratePage（配音校验）和 FrontendPreviewPlayer（播放控制）共用
+ */
+
+export interface DurationAsset {
+  id?: string
+  duration?: number
+  metadata?: { duration?: number }
+}
+
+export interface DurationTemplateSegment {
+  duration_min?: number
+  duration_max?: number
+}
+
+/**
+ * 计算总视频时长
+ * @param assets 素材列表
+ * @param template 模板（含 segments）
+ * @returns 总时长（秒），无有效数据时返回 0
+ */
+export function calculateTotalVideoDuration(
+  assets: DurationAsset[] | undefined,
+  template: { segments?: DurationTemplateSegment[] } | undefined,
+): number {
+  if (!assets || assets.length === 0 || !template) return 0
+
+  const templateSegments = template.segments || []
+
+  return assets.reduce((sum, asset, i) => {
+    const assetDuration = asset.duration || asset.metadata?.duration || 30
+    const tplSeg = templateSegments[i] || templateSegments[templateSegments.length - 1]
+    const segDuration = tplSeg
+      ? Math.min(
+          tplSeg.duration_max ?? assetDuration,
+          Math.max(tplSeg.duration_min ?? 0, assetDuration),
+        )
+      : Math.min(assetDuration, 10)
+    return sum + segDuration
+  }, 0)
+}
+
+/**
+ * 估算总视频时长（仅依赖模板 segments）
+ * 当素材未加载或加载失败时，用各片段 duration_max 之和作为估算值
+ * 确保配音时长校验不会因素材未就绪而跳过
+ */
+export function estimateTotalVideoDuration(
+  template: { segments?: DurationTemplateSegment[] } | undefined,
+): number {
+  if (!template?.segments || template.segments.length === 0) return 0
+  return template.segments.reduce((sum, seg) => sum + (seg.duration_max || 0), 0)
+}