fix: Canvas 预览黑屏修复 - 增大帧缓冲 + 限制初始化预解码 + play 同步清空帧队列

- FrameQueue maxSize 从 10 改为 60（约 2 秒 @30fps），给按需解码留出足够预缓冲空间
- 新增 MAX_INIT_FRAMES=60 常量，decodeSegment 支持 maxFrames 参数，初始化阶段只解码前 60 帧避免帧挤兑
- play() 重播时同步清空 frameQueue（之前只清 decodedSegments 标记没清帧缓冲）
- play() 启动渲染循环后立即触发 decodeAroundPosition，不等 200ms 节流延迟

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

@@ -8,6 +8,10 @@ import { useRef, useCallback, useEffect, useState } from "react"
 import { createFile } from "mp4box"
 import type { Movie, Sample } from "mp4box"
 
+// ── 常量 ──
+/** 初始化预解码最大帧数（约 2 秒 @30fps），后续帧通过 decodeAroundPosition 按需解码 */
+const MAX_INIT_FRAMES = 60
+
 // ── MP4 Box 解析辅助函数 ──
 
 // MP4 标准容器 box 列表（递归时会进入这些 box 内部搜索子 box）
@@ -217,7 +221,7 @@ export function useCanvasPlayer(
 
   // ── 内部引用 ──
   const decoderRef = useRef<VideoDecoder | null>(null)
-  const frameQueueRef = useRef(new FrameQueue(10))
+  const frameQueueRef = useRef(new FrameQueue(60))
   /** 已解码的片段索引集合，用于按需解码（先标记防重入，失败时移除允许重试） */
   const decodedSegmentsRef = useRef(new Set<number>())
   /** 解码代数计数器，seek 时递增以作废正在进行的异步解码 */
@@ -449,7 +453,7 @@ export function useCanvasPlayer(
 
   // ── 初始化 VideoDecoder 并解码指定片段 ──
   const decodeSegment = useCallback(
-    async (_buffer: ArrayBuffer, meta: SegmentMeta): Promise<void> => {
+    async (_buffer: ArrayBuffer, meta: SegmentMeta, maxFrames?: number): Promise<void> => {
       if (isDestroyedRef.current) return
 
       let decoderReady = false
@@ -521,6 +525,13 @@ export function useCanvasPlayer(
           continue
         }
         if (decoder.state === "closed") break
+        // 初始化阶段限制解码帧数，避免帧缓冲溢出
+        if (maxFrames && decodedCount >= maxFrames) {
+          console.log(
+            `[useCanvasPlayer] Segment ${meta.assetId}: init decode limited to ${maxFrames} frames`,
+          )
+          break
+        }
 
         const chunk = new EncodedVideoChunk({
           type: sample.is_sync ? "key" : "delta",
@@ -758,6 +769,8 @@ export function useCanvasPlayer(
     if (state.currentTime <= 0.1 && decodedSegmentsRef.current.size > 0) {
       decodeGenerationRef.current++
       decodedSegmentsRef.current.clear()
+      // 同步清空帧缓冲，避免旧帧残留导致 getCurrentFrame 返回 null
+      frameQueueRef.current.clear()
     }
 
     setState((s) => ({ ...s, isPlaying: true }))
@@ -765,7 +778,9 @@ export function useCanvasPlayer(
     playStartOffsetRef.current = state.currentTime
     lastProgressUpdateRef.current = 0
     rafRef.current = requestAnimationFrame(renderFrame)
-  }, [state.hasSupport, state.currentTime, renderFrame])
+    // 立即触发一次按需解码，不等渲染循环 200ms 节流
+    decodeAroundPosition(state.currentTime)
+  }, [state.hasSupport, state.currentTime, renderFrame, decodeAroundPosition])
 
   const pause = useCallback(() => {
     setState((s) => ({ ...s, isPlaying: false }))
@@ -887,7 +902,7 @@ export function useCanvasPlayer(
         // 先标记为解码中，防止重复解码
         decodedSegmentsRef.current.add(i)
         try {
-          await decodeSegment(buffer, meta)
+          await decodeSegment(buffer, meta, MAX_INIT_FRAMES)
         } catch (e) {
           // 解码失败则移除标记，允许后续重试
           decodedSegmentsRef.current.delete(i)