fix(visualizer): reset player to first frame after autoplay completes (#2181)

* fix(visualizer): reset player to first frame after autoplay completes

- Reset currentFrame to 0 instead of staying at the last frame when
  playback finishes, so the first frame subtitle and full-screen view
  are restored.
- Clear playingTaskId when player is not playing, removing the sidebar
  shimmer animation highlight when playback is stopped.

* fix(visualizer): stay at last task frame with full view after autoplay

- Stay at the last frame (duration-1) when playback finishes, then
  seek back to the last frame with a taskId to skip the End card.
- Disable autoZoom when player is stopped so the view shows full screen.
- Clear playingTaskId on stop to remove sidebar shimmer animation.
- Extract resetIfAtEnd() to deduplicate play/toggle logic.

Author: quanru

packages/visualizer/src/component/player/index.tsx

@@ -124,15 +124,36 @@ export function Player(props?: {
     playbackRate: playbackSpeed,
   });
 
-  // Track frame for taskId callback
+  // When playback stops, seek to the last frame with a taskId (skip the End card)
+  useEffect(() => {
+    if (!frameMap || player.playing) return;
+    const { scriptFrames, totalDurationInFrames } = frameMap;
+    if (player.currentFrame < totalDurationInFrames - 1) return;
+    for (let i = scriptFrames.length - 1; i >= 0; i--) {
+      const sf = scriptFrames[i];
+      if (sf.taskId) {
+        player.seekTo(sf.startFrame + sf.durationInFrames - 1);
+        break;
+      }
+    }
+  }, [frameMap, player.playing]);
+
+  // Sync taskId to parent: report current task while playing, clear on stop
   useEffect(() => {
     if (!frameMap || !props?.onTaskChange) return;
+    if (!player.playing) {
+      if (lastTaskIdRef.current !== null) {
+        lastTaskIdRef.current = null;
+        props.onTaskChange(null);
+      }
+      return;
+    }
     const taskId = deriveTaskId(frameMap.scriptFrames, player.currentFrame);
     if (taskId !== lastTaskIdRef.current) {
       lastTaskIdRef.current = taskId;
       props.onTaskChange(taskId);
     }
-  }, [frameMap, props?.onTaskChange, player.currentFrame]);
+  }, [frameMap, props?.onTaskChange, player.currentFrame, player.playing]);
 
   const currentFrameState = useMemo(() => {
     if (!frameMap) return null;
@@ -350,7 +371,7 @@ export function Player(props?: {
                   >
                     <StepsTimeline
                       frameMap={frameMap}
-                      autoZoom={autoZoom}
+                      autoZoom={autoZoom && player.playing}
                       frame={player.currentFrame}
                       width={compositionWidth}
                       height={compositionHeight}

packages/visualizer/src/component/player/use-frame-player.ts

@@ -76,11 +76,15 @@ export function useFramePlayer(options: UseFramePlayerOptions): FramePlayer {
     return () => cancelAnimationFrame(rafId);
   }, [playing]);
 
-  const play = useCallback(() => {
+  const resetIfAtEnd = () => {
     if (frameRef.current >= durationRef.current - 1) {
       frameRef.current = 0;
       setCurrentFrame(0);
     }
+  };
+
+  const play = useCallback(() => {
+    resetIfAtEnd();
     setPlaying(true);
   }, []);
 
@@ -90,10 +94,7 @@ export function useFramePlayer(options: UseFramePlayerOptions): FramePlayer {
     if (playingRef.current) {
       setPlaying(false);
     } else {
-      if (frameRef.current >= durationRef.current - 1) {
-        frameRef.current = 0;
-        setCurrentFrame(0);
-      }
+      resetIfAtEnd();
       setPlaying(true);
     }
   }, []);