From 341d71470c6130359ef16100f19939354d65c7b9 Mon Sep 17 00:00:00 2001
From: Jamie Pine <ijamespine@me.com>
Date: Thu, 29 Jan 2026 15:32:34 -0800
Subject: [PATCH] Implement auto-scroll feature in StoryTrackEditor to keep
 playhead centered during playback

- Added a useEffect hook to automatically scroll the timeline when the playhead moves past the halfway point of the visible area, enhancing user experience during playback.
---
 .../components/StoriesTab/StoryTrackEditor.tsx   | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/app/src/components/StoriesTab/StoryTrackEditor.tsx b/app/src/components/StoriesTab/StoryTrackEditor.tsx
index 16ff2da4..bc3758dd 100644
--- a/app/src/components/StoriesTab/StoryTrackEditor.tsx
+++ b/app/src/components/StoriesTab/StoryTrackEditor.tsx
@@ -679,6 +679,22 @@ export function StoryTrackEditor({ storyId, items }: StoryTrackEditorProps) {
   // Playhead position
   const playheadLeft = msToPixels(currentTimeMs);
 
+  // Auto-scroll timeline to follow playhead during playback
+  useEffect(() => {
+    if (!isCurrentlyPlaying || !tracksRef.current) return;
+
+    const container = tracksRef.current;
+    const containerWidth = container.clientWidth;
+    const scrollLeft = container.scrollLeft;
+    const halfwayPoint = scrollLeft + containerWidth / 2;
+
+    // If playhead is past the halfway point, scroll to keep it centered
+    if (playheadLeft > halfwayPoint) {
+      const targetScroll = playheadLeft - containerWidth / 2;
+      container.scrollLeft = targetScroll;
+    }
+  }, [isCurrentlyPlaying, playheadLeft]);
+
   // Calculate tracks area height
   const tracksAreaHeight = tracks.length * TRACK_HEIGHT;
   const timelineContainerHeight = editorHeight - 40; // Subtract toolbar height