Labyricorn/voicebox
1
0
Fork 0
mirror of https://github.com/jamiepine/voicebox.git synced 2026-10-03 09:05:17 -07:00
Code Issues Packages Projects Releases Wiki Activity

Implement auto-scroll feature in StoryTrackEditor to keep playhead centered during playback

Browse Source 
- 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.
This commit is contained in:
Jamie Pine
2026-01-29 15:32:34 -08:00
parent bb6cea24ba
commit 341d71470c
1 changed files with 16 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/components/StoriesTab/StoryTrackEditor.tsx
+16
View File
@@ -679,6 +679,22 @@ export function StoryTrackEditor({ storyId, items }: StoryTrackEditorProps) {
// Playhead position // Playhead position
const playheadLeft = msToPixels(currentTimeMs); 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 // Calculate tracks area height
const tracksAreaHeight = tracks.length * TRACK_HEIGHT; const tracksAreaHeight = tracks.length * TRACK_HEIGHT;
const timelineContainerHeight = editorHeight - 40; // Subtract toolbar height const timelineContainerHeight = editorHeight - 40; // Subtract toolbar height