Desktop Interface¶

The desktop interface is a multi-panel layout optimized for precision editing with mouse and keyboard.

Layout Structure¶

┌──────────────────────────────────────────────────────────┐
│  Sidebar (collapsible)  │  Main Content                  │
│                         │  ┌────────────────────────────┐ │
│  - Project list         │  │  Video Player              │ │
│  - Navigation           │  │  (VideoWindow.tsx)         │ │
│                         │  └────────────────────────────┘ │
│                         │  ┌────────────────────────────┐ │
│                         │  │  Timeline Editor           │ │
│                         │  │  (card or expanded mode)   │ │
│                         │  └────────────────────────────┘ │
│                         │  Settings Sidebar (right)  ──┤ │
│                         │  - Export settings            │ │
│                         │  - Caption config             │ │
│                         │  - Asset management           │ │
└──────────────────────────────────────────────────────────┘

Settings Sidebar¶

The right-side settings panel has two states:

Timeline Modes¶

The timeline has two modes, toggled with the E key:

Card Mode (TimelineEditor)¶

A horizontal strip of edit cards. Each card represents one edit (keep/remove segment). Cards are color-coded by type and show duration labels.

• Scrolls horizontally
• Click a card to select and seek
• Simple overview of the edit structure

Expanded Mode (ExpandedTimelineEditor)¶

A multi-track waveform editor for power users:

┌──────────────────────────────────────────────┐
│  Waveform Track (audio visualization)        │
├──────────────────────────────────────────────┤
│  Edit Segments (draggable start/end handles) │
├──────────────────────────────────────────────┤
│  Inserts Track (asset overlay lanes)         │
│  └─ 20px per lane, stacked for overlaps      │
└──────────────────────────────────────────────┘

Waveform track: Renders ~200 samples as vertical bars. Intro/outro regions show blank (null) samples; silence shows as zero-height bars.

Edit segments: Each segment has left and right drag handles for adjusting cut points. Handles sit at z-30, above the content layer at z-10. Minimum width for showing a label: 40px.

Inserts track: Asset overlays (b-roll, images, audio) shown as colored strips. Height per lane: 20px. Overlapping assets stack into separate lanes.

Zoom and Scroll¶

• Mouse wheel: Zoom in (1.18x per tick) / zoom out (0.85x per tick)
• Horizontal scroll: Pan the visible time range
• Zoom is centered on the cursor position

Keyboard Shortcuts¶

All shortcuts require the project to be in editing state (workflowState === 'complete'). Disabled when focus is in a text input.

Global¶

Edit Navigation¶

Video Player¶

The VideoWindow component handles:

• Main video playback with seek bar
• B-roll video switching (swaps video source when playhead enters an asset overlay region)
• Asset audio mixing (useAssetAudio hook)
• Aspect ratio preview with letterbox backgrounds
• Timeline scrub preview — dragging the playhead shows a thumbnail tile tracking the cursor; seek commits on release (sprite-backed, zero network during drag)

Letterbox Colors¶

Available background colors for letterboxed content: #000000, #FFFFFF, #1a1a1a, #f5f5f5.

Aspect Ratio Presets¶

Edit Interactions¶

Selecting Edits¶

Click an edit segment in either timeline mode to select it. Selected edits:

• Highlight in the timeline
• Show an EditPopover with actions (toggle active, delete, adjust)
• Seek the video player to the edit's start time

Drag Handles¶

In expanded mode, each edit segment has left and right resize handles:

• Handles are positioned at the segment edges (z-30)
• Content interaction layer sits below at z-10
• Dragging adjusts the edit's start or end time
• Changes auto-save after 1000ms debounce

Creating Edits¶

Manual edits can be created by:

• Clicking the timeline at the desired position (in expanded mode)
• Using the edit popover actions

All positions are converted from effective timeline (what the user sees) to main-video-relative time (what the backend stores) before saving.

Caption Editing¶

Desktop caption editing happens through:

• Inline text editing in the caption track
• Caption style panel in settings sidebar

Caption Presets¶

← Principles Next: Mobile Interface →