From 3441b3fece78624c404c3857fa460876f995fde4 Mon Sep 17 00:00:00 2001
From: xiaoxia <xiaoxia@xiaoxiajianji.com>
Date: Fri, 21 Aug 2026 00:46:41 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20Canvas=20=E6=92=AD=E6=94=BE=E9=BB=91?=
 =?UTF-8?q?=E5=B1=8F=E4=BA=8C=E6=AC=A1=E4=BF=AE=E5=A4=8D=20=E2=80=94=20Fra?=
 =?UTF-8?q?meQueue=20=E6=89=A9=E5=AE=B9=E5=88=B0=20600=20+=20=E6=8C=89?=
 =?UTF-8?q?=E9=9C=80=E8=A7=A3=E7=A0=81=E9=99=90=E5=88=B6=20300=20=E5=B8=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

根因：按需解码 decodeAroundPosition 调用 decodeSegment 时未传 maxFrames，
导致一次解码整个片段（~300帧）全部 push 进 maxSize=60 的队列，前 240 帧被淘汰，
只剩末尾帧（pts≈8~10s），getCurrentFrame(0) 找不到帧 → 黑屏 3~4 秒。

修复：
- FrameQueue maxSize: 60 → 600（覆盖约 20 秒 @30fps）
- decodeAroundPosition 中 decodeSegment 传入 maxFrames=300，
  限制单次按需解码帧数，避免远超队列容量的帧挤兑
---
 apps/web/src/pages/generate/hooks/useCanvasPlayer.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/pages/generate/hooks/useCanvasPlayer.ts b/apps/web/src/pages/generate/hooks/useCanvasPlayer.ts
index 00afb22b6..15deeb87a 100644
--- a/apps/web/src/pages/generate/hooks/useCanvasPlayer.ts
+++ b/apps/web/src/pages/generate/hooks/useCanvasPlayer.ts
@@ -221,7 +221,7 @@ export function useCanvasPlayer(
 
   // ── 内部引用 ──
   const decoderRef = useRef<VideoDecoder | null>(null)
-  const frameQueueRef = useRef(new FrameQueue(60))
+  const frameQueueRef = useRef(new FrameQueue(600))
   /** 已解码的片段索引集合，用于按需解码（先标记防重入，失败时移除允许重试） */
   const decodedSegmentsRef = useRef(new Set<number>())
   /** 解码代数计数器，seek 时递增以作废正在进行的异步解码 */
@@ -609,7 +609,7 @@ export function useCanvasPlayer(
         // 先标记为解码中，防止下一帧渲染时重复发起解码
         decodedSegmentsRef.current.add(i)
         try {
-          await decodeSegment(buffer, meta)
+          await decodeSegment(buffer, meta, 300)
         } catch (e) {
           // 解码失败则移除标记，允许后续重试
           decodedSegmentsRef.current.delete(i)