Trimmer timeline zoom

[kentcdodds]

Add timeline zoom and navigation controls to the video trimmer page to improve precision and ease of making trims.

The original timeline lacked the ability to focus on specific segments, making precise trim adjustments difficult, especially for short durations. These controls address that by allowing users to magnify sections, pan through the video, and quickly jump to key points or existing trims.

---

 

---

Note

Adds interactive zooming and navigation to the trimmer timeline for precise edits.

• Introduces zoom/window state (MIN/MAX_ZOOM, setZoom, setWindowStart, panWindow, ensurePlayheadVisible, zoomToRange), with timeline ticks and playhead positioning relative to the view
• Waveform rendering slices samples to the visible window; ranges are clipped/indicated in-view with gradients; clicking the track moves the playhead
• New controls: navigate (start/end, ±1s, prev/next trim, center view), zoom (slider ±, fit), and view window slider with pan; "Zoom to selection" action
• CSS: new classes for interactive track, clipped ranges, playhead state, timeline controls/layout; responsive tweaks for controls

^{Written by Cursor Bugbot for commit 9cea5b4. This will update automatically on new commits. Configure here.}

[cursor]

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}

[github-actions]

🎉 This PR is included in version 1.14.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀