Architecture

Local video cutter

The cutter is designed as a browser-native tool for opening a local video, trimming it on a timeline, and exporting the selected MP4 segment.

Privacy model

Videos are imported with browser File APIs and rendered through object URLs. Source files remain on the user's device; cuts are produced locally with FFmpeg.wasm.

Component structure

The cutter lives under /editor with a client-only LocalVideoEditor component, lightweight Zustand timeline state, and a lazy FFmpeg export service.

State strategy

Zustand stores the active project and trim start/end values. Large File objects stay in component refs instead of persisted state.

Timeline plan

The timeline uses generated frame thumbnails plus draggable in/out handles, matching the mental model of a simple editor cut range.

Export pipeline

Export loads FFmpeg.wasm only when needed, writes the local file into the WASM filesystem, cuts the selected segment, and returns a downloadable MP4 blob.

Performance guardrails

The cutter caps import size and export duration, revokes object URLs, avoids hidden uploads, and keeps heavy work outside initial route bundles.