Update src/components/Timeline.tsx

src/components/Timeline.tsx

@@ -12,9 +12,13 @@ const Timeline: React.FC = () => {
     addKeyframe, removeKeyframe,
   } = useStudioStore();
 
-  const rafRef       = useRef<number>(0);
-  const lastTimeRef  = useRef<number>(0);
-  const rulerRef     = useRef<HTMLDivElement>(null);
+  const rafRef      = useRef<number>(0);
+  const lastTimeRef = useRef<number>(0);
+  const playheadRef = useRef<number>(playhead);   // ← ref so tick closure stays fresh
+  const rulerRef    = useRef<HTMLDivElement>(null);
+
+  // Keep ref in sync with store value
+  useEffect(() => { playheadRef.current = playhead; }, [playhead]);
 
   // ── Playback loop ─────────────────────────────────────────────
   useEffect(() => {
@@ -25,14 +29,13 @@ const Timeline: React.FC = () => {
     const tick = (now: number) => {
       const delta = (now - lastTimeRef.current) / 1000;
       lastTimeRef.current = now;
-      setPlayhead((prev: number) => {
-        const next = prev + delta;
-        if (next >= timelineDuration) {
-          setTimelinePlaying(false);
-          return timelineDuration;
-        }
-        return next;
-      });
+      const next = playheadRef.current + delta;
+      if (next >= timelineDuration) {
+        setPlayhead(timelineDuration);
+        setTimelinePlaying(false);
+        return;
+      }
+      setPlayhead(next);
       rafRef.current = requestAnimationFrame(tick);
     };
     lastTimeRef.current = performance.now();
@@ -47,14 +50,14 @@ const Timeline: React.FC = () => {
     if (!obj) return;
     const kf: Keyframe = {
       id:       Math.random().toString(36).slice(2),
-      time:     parseFloat(playhead.toFixed(3)),
-      position: [...obj.position] as [number,number,number],
-      rotation: [...obj.rotation] as [number,number,number],
-      scale:    [...obj.scale]    as [number,number,number],
+      time:     parseFloat(playheadRef.current.toFixed(3)),
+      position: [...obj.position] as [number, number, number],
+      rotation: [...obj.rotation] as [number, number, number],
+      scale:    [...obj.scale]    as [number, number, number],
       easing:   'ease-in-out',
     };
     addKeyframe(selectedId, kf);
-  }, [selectedId, objects, playhead, addKeyframe]);
+  }, [selectedId, objects, addKeyframe]);
 
   // ── Keyboard shortcut: I = insert keyframe ────────────────────
   useEffect(() => {
@@ -76,7 +79,7 @@ const Timeline: React.FC = () => {
   const fmt = (t: number) => {
     const s = Math.floor(t);
     const f = Math.floor((t % 1) * 30);
-    return `${String(s).padStart(2,'0')}:${String(f).padStart(2,'0')}`;
+    return `${String(s).padStart(2, '0')}:${String(f).padStart(2, '0')}`;
   };
 
   const playheadPct = (playhead / timelineDuration) * 100;
@@ -153,14 +156,13 @@ const Timeline: React.FC = () => {
                 <span>{i}s</span>
               </div>
             ))}
-            {/* Playhead needle */}
             <div className="tl-playhead" style={{ left: `${playheadPct}%` }} />
           </div>
 
           {/* Keyframe tracks */}
           <div className="tl-tracks">
             {objects.map(obj => {
-              const track = tracks.find(t => t.objectId === obj.id);
+              const track  = tracks.find(t => t.objectId === obj.id);
               const sorted = track
                 ? [...track.keyframes].sort((a, b) => a.time - b.time)
                 : [];
@@ -168,11 +170,11 @@ const Timeline: React.FC = () => {
                 <div key={obj.id}
                   className={`tl-track ${selectedId === obj.id ? 'active' : ''}`}>
 
-                  {/* Connection lines between consecutive keyframes */}
+                  {/* Connection lines */}
                   {sorted.map((kf, i) => {
                     if (i === sorted.length - 1) return null;
-                    const x1 = (kf.time           / timelineDuration) * 100;
-                    const x2 = (sorted[i+1].time  / timelineDuration) * 100;
+                    const x1 = (kf.time          / timelineDuration) * 100;
+                    const x2 = (sorted[i+1].time / timelineDuration) * 100;
                     return (
                       <div key={kf.id + '-line'} className="tl-kf-line"
                         style={{ left: `${x1}%`, width: `${x2 - x1}%` }} />
@@ -181,19 +183,15 @@ const Timeline: React.FC = () => {
 
                   {/* Keyframe diamonds */}
                   {sorted.map(kf => (
-                    <div
-                      key={kf.id}
+                    <div key={kf.id}
                       className="tl-kf-diamond"
                       style={{ left: `${(kf.time / timelineDuration) * 100}%` }}
                       title={`${kf.time.toFixed(2)}s  •  click to delete`}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        removeKeyframe(obj.id, kf.id);
-                      }}
+                      onClick={(e) => { e.stopPropagation(); removeKeyframe(obj.id, kf.id); }}
                     >◆</div>
                   ))}
 
-                  {/* Playhead ghost line on each track */}
+                  {/* Playhead ghost line */}
                   <div className="tl-track-playhead"
                     style={{ left: `${playheadPct}%` }} />
                 </div>