From 07f040a5495d2827f689dbcb09864d93a897a261 Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Sat, 30 May 2026 16:54:03 +0800
Subject: [PATCH] =?UTF-8?q?fix(video):=20=E5=85=A8=E5=B1=8F=E5=85=B3?=
 =?UTF-8?q?=E9=97=AD=E5=90=8E=E5=86=85=E5=B5=8C=E8=BF=9B=E5=BA=A6=E6=9D=A1?=
 =?UTF-8?q?=E8=B7=B3=E5=8F=98=E8=80=8C=E9=9D=9E=E4=BB=8E0=E6=89=AB?=
 =?UTF-8?q?=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

程序化 seek 同步全屏播放进度时,新增 snapProgress 抑制进度条
的宽度过渡动画,使其直接落到观看位置,恢复播放时再启用过渡。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../messageStream/MessageInlineVideo.tsx      | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/messageStream/MessageInlineVideo.tsx b/src/components/messageStream/MessageInlineVideo.tsx
index c4ae03b..5418f2a 100644
--- a/src/components/messageStream/MessageInlineVideo.tsx
+++ b/src/components/messageStream/MessageInlineVideo.tsx
@@ -120,13 +120,22 @@ export function MessageInlineVideo({
   const [currentTime, setCurrentTime] = useState(initialTime);
   const [duration, setDuration] = useState(attachment.durationSec ?? 0);
   const [isScrubbing, setIsScrubbing] = useState(false);
+  // When we programmatically seek (e.g. syncing the playhead back from the
+  // fullscreen overlay) the progress fill should jump straight to the watched
+  // position instead of sweeping up from its old width via the CSS transition.
+  // Cleared as soon as real playback resumes so live progress stays smooth.
+  const [snapProgress, setSnapProgress] = useState(false);
 
   const t = TOKENS[size];
 
   useEffect(() => {
     const v = videoRef.current;
     if (!v) return;
-    const onPlay = () => setIsPlaying(true);
+    const onPlay = () => {
+      setIsPlaying(true);
+      // Real playback advances the fill smoothly again; re-enable transitions.
+      setSnapProgress(false);
+    };
     const onPause = () => setIsPlaying(false);
     const onTime = () => {
       setCurrentTime(v.currentTime);
@@ -232,7 +241,9 @@ export function MessageInlineVideo({
           // Update React state synchronously so the progress bar paints the
           // new playhead in the next frame, before the <video> seek round-
           // trip emits its own events (paused videos don't fire timeupdate
-          // and `seeked` can lag ~hundreds of ms).
+          // and `seeked` can lag ~hundreds of ms). Snap the fill to the new
+          // position so it doesn't sweep up from its pre-fullscreen width.
+          setSnapProgress(true);
           setCurrentTime(finalTime);
           onTimeUpdate?.(finalTime);
           const apply = () => {
@@ -334,7 +345,9 @@ export function MessageInlineVideo({
           >
             <div
               className={`h-full bg-white ${
-                isScrubbing ? "" : "transition-[width] duration-150 ease-out"
+                isScrubbing || snapProgress
+                  ? ""
+                  : "transition-[width] duration-150 ease-out"
               }`}
               style={{ width: `${progressPct}%` }}
             />