A Black-Box Contract for a Browser Video Trimming Flow
This is a public-interface design note. It does not claim knowledge of private source code, codecs, queues, storage, or performance. A visible workflow is still enough to describe the states a frontend should make legible. Start with the user-visible state The public Video Trimmer page presents a local browser workflow: choose a file, move range handles, then export. A user should be able to…
This document outlines a proposed interface design for a browser-based video trimming tool. The workflow begins with a user selecting a file and adjusting the range of the video using two handles. The three key questions to assess during any point are: which file is selected, what range of the video will remain, and whether an export is ready.
The trim process is modeled separately from the media type, with the TrimRange type defined as a range in milliseconds, and the ClipDraft type consisting of the file name, duration in milliseconds, and range. The ExportState type has five possible states: idle, editing, exporting, ready, and failed.
This document emphasizes testing edge cases and user behaviors. Starting at the beginning, the left handle should remain selectable, and the final frame should be retainable without any off-by-one errors. Handles should move predictably with keyboard input, and the export process should be blocked or provide a clear explanation if the minimum allowed range is not met. Keyboard adjustments should be seamless, and a failed export should preserve the chosen range, offering a safe retry option.
The document also emphasizes not exposing private claims in test plans. The user should be aware that all processing happens in the browser and that files are not uploaded. Supported formats and export behavior should be covered through browser-level tests. A useful acceptance question is whether a user can recover after accidentally moving one handle. If the answer is clear, the interface likely exposes enough state for a good trimming experience.
Before styling the timeline, define invariants to ensure that the start and end times of the clip always add up to the duration of the original video. This central invariant (0 = startMs + endMs = durationMs) should be used consistently across components such as dragging, numeric entry, keyboard control, labels, validation, and export enablement.
Separate preview time from committed time to avoid discrepancies in screen-reader labels, thumbnails, and export payloads. The UI may display an optimistic preview value while a user is moving the pointer, and it can commit a rounded value upon release. This prevents silent disagreements between the preview, UI, and export.
Cancellation should be testable, with the Escape key restoring the committed range. Automated tests should cover ordering, focus, error recovery, and responsive labels. However, a human should still manually check touch targets and whether duration labels make sense for longer files.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
