Video Trimmer Dialog
The Video Trimmer dialog allows you to set the start and end points for video and audio layers.
Dialog Title
“Video trimmer”
Appearance
The dialog opens as a large overlay on top of the studio.
Elements
Video Preview Area
- Video player: displays the video with play/pause controls
- Audio layers: show an audio placeholder image instead
Timeline Rail
| Component | Description |
|---|---|
| Frame thumbnails | Video frames displayed as a strip |
| Start handle | Blue draggable edge (left) |
| End handle | Blue draggable edge (right) |
| Selected range | Blue border showing the trimmed portion |
| Progress indicator | White vertical line showing the current position |
| Dimmed areas | Unselected portions appear grayed out |
Play/Pause Button
- Blue button below the preview
- Play icon when paused
- Pause icon when playing
Time Steppers
Two time input groups for precise control:
Start Time Stepper:
- Format:
H:MM:SS.D - Up/down arrows for each segment
- Click to type directly
End Time Stepper:
- Format:
H:MM:SS.D - Up/down arrows for each segment
- Click to type directly
Action Buttons
| Button | Style | Action |
|---|---|---|
| Cancel | Gray background | Close without saving |
| Done | Blue background | Save trim settings |
Keyboard Controls
| Key | Action |
|---|---|
| Escape | Close the dialog without saving |
| Arrow Up/Down | Adjust the focused time value |
| Arrow Left/Right | Move between time fields |
Interactions
Trimming by Drag
- Drag the start handle to set the trim start
- Drag the end handle to set the trim end
- Drag the selected range to move both handles together
Trimming by Click
- Click outside the selected range to extend it to that point
- Click the timeline to position the progress indicator
Preview
- Click play to preview the trimmed section
- Playback loops within the selected range
States
| State | Description |
|---|---|
| Loading | Spinning indicators while frame thumbnails are generated |
| Ready | All frames loaded, interaction enabled |
| Playing | Video preview playing |
| Dragging | A handle is being dragged |
Mobile Adaptation
- Full width minus margins
- Horizontal scroll for the timeline on narrow screens
- Stacked controls layout
- Touch-friendly handle sizes