Skip to main content

Caption Editor Interface

Complete guide to the Scriptix Caption Editor interface and features.

Interface Overview​

The Caption Editor has a two-panel layout:

┌─────────────────────────────────────────┐
│            Toolbar & Controls            │
├──────────────────┬──────────────────────┤
│  Caption List    │   Media Player       │
│  (Left Panel)    │   (Right Panel)      │
│                  │   (if media avail.)  │
├──────────────────┴──────────────────────┤
│          Waveform (if available)         │
├─────────────────────────────────────────┤
│         Timing Shift Control             │
└─────────────────────────────────────────┘

Main Components​

1. Toolbar​

Top toolbar with document controls:

  • File name with edit button
  • Session info (duration, language, date)
  • Save status indicator (synced, saving, saved-locally, unsaved)
  • Search functionality
  • Export button
  • Translate button
  • Magic Link sharing button
  • Finalize toggle (editable ↔ finalized)

Save Status Indicators:

  • Green (Synced): Changes saved to server
  • Yellow (Saved Locally): Saved to browser, pending server sync
  • Blue (Saving): Currently saving
  • Red (Unsaved): Unsaved changes present

2. Caption List Panel (Left)​

Displays all caption segments in a scrollable virtualized list:

Features:

  • Virtualized scrolling for performance (handles thousands of segments)
  • Each segment shows:
    • Start → Stop times
    • Caption text
    • Speaker information (if applicable)
  • Click any segment to edit
  • Search/filter segments by text
  • Auto-scroll to current playback position (when media playing)
  • "Jump to View" button appears when current segment scrolls out of view

Segment Display:

[00:00:05.000 → 00:00:08.500]
Speaker Name (if applicable)
Caption text appears here

3. Media Player Panel (Right)​

Available when session has media (audio/video):

Components:

  • Video/audio player with draggable position
  • Playback controls (play/pause, speed, volume, mute)
  • Current time / total duration display
  • Audio thumbnail (for audio-only files)

Features:

  • Synchronized playback with caption highlighting
  • Draggable player window (can be repositioned)
  • Playback speed controls
  • Volume and mute controls

If No Media:

  • Shows audio thumbnail placeholder
  • Timing shift control still available

4. Waveform Visualization​

Appears when session has waveform data:

Features:

  • Visual representation of audio
  • Shows audio intensity over time
  • Helps with precise timing adjustments
  • Synced with playback position

Display:

  • Located below main editing area
  • Full width for better visibility
  • Auto-scrolls with playback

5. Timing Shift Control​

Tool for bulk timing adjustments:

Features:

  • Adjust timing for all segments or from active segment onward
  • Presets: −2s, −0.5s, +0.5s, +2s
  • Custom input: Seconds and milliseconds
  • Plus/minus buttons to apply offset
  • Scope indicator shows what will be affected:
    • "All segments" (when no segment active)
    • "From segment #X" (when segment active)

Location: Below waveform or in media panel area

Caption Segment Editor​

When you click a segment in the list, you can edit:

Text Editing:

  • Inline text editor for caption content
  • Multi-line support
  • Real-time character count
  • Auto-save on changes

Timing Controls:

  • Start time input (HH:MM:SS.mmm format)
  • Stop time input (HH:MM:SS.mmm format)
  • Duration display (calculated automatically)
  • Precise millisecond control

Segment Actions:

  • Edit text content
  • Adjust start/stop times
  • Delete segment
  • Merge segments
  • Split segments

Search & Filter​

Search Box in toolbar:

Features:

  • Search across all caption text
  • Filter segments by search query
  • Matches highlighted in results
  • Shows matching segments count
  • Clear search to show all segments

Usage:

  1. Type in search box
  2. Segments filter to matches only
  3. Click any result to jump to that segment
  4. Clear search to return to full list

Keyboard Shortcuts​

Undo/Redo​

ShortcutAction
Ctrl/Cmd+ZUndo last change
Ctrl/Cmd+Shift+ZRedo
Ctrl/Cmd+YRedo (alternative)

Media Playback (when available)​

ShortcutAction
SpacePlay/Pause
Media player controlsSpeed, volume, etc.

Note: The caption editor supports full undo/redo with a 20-level history stack stored in localStorage.

Auto-Save​

Auto-Save Features:

  • Saves every 2 minutes automatically
  • Saves to both localStorage and server
  • Undo/redo stack preserved
  • Shows save status in toolbar
  • Prompts before leaving with unsaved changes

Save Status:

  • Watch the save status indicator in toolbar
  • Green checkmark = fully synced with server
  • Yellow save icon = saved locally, syncing to server
  • Red warning = unsaved changes

Document Actions​

Edit Document Name​

  1. Click pencil icon next to document name in toolbar
  2. Enter new name in modal
  3. Click "Save" to update

Delete Session​

  1. Click trash icon in toolbar
  2. Confirm deletion in modal
  3. Session and all documents deleted
  4. Redirected to workspace

Warning: Deletion is permanent and cannot be undone.

Export Captions​

  1. Click "Export" button in toolbar
  2. Select export format (SRT, VTT, SBV, TTML, STL, HTML)
  3. Configure options:
    • Include/exclude speakers
    • Include/exclude timestamps (where applicable)
  4. Click format button to download

See Export Formats for details.

  1. Click "Magic Link" button in toolbar
  2. Toggle document to "Finalized" status first (if not already)
  3. Link is generated automatically
  4. Copy link or send via email
  5. Recipients can view/edit (based on permissions)

Note: Documents must be finalized before generating magic links.

Translate​

  1. Click "Translate" button in toolbar
  2. Enter translation name
  3. Select target language(s)
  4. Click "Translate"
  5. New translated documents created in workspace

Finalization Toggle​

Editable vs. Finalized:

Editable Status:

  • Document can be edited
  • Changes can be saved
  • Cannot generate magic links
  • Green "Editable" pill in toolbar

Finalized Status:

  • Document locked from editing
  • Can generate magic links for sharing
  • Can still view and export
  • Blue "Finalized" pill in toolbar

Toggle: Use switch in toolbar to change status

Performance Features​

Virtualized Scrolling​

The caption list uses virtualization to handle large documents efficiently:

  • Only visible segments rendered
  • Smooth scrolling for thousands of segments
  • No performance degradation with large files
  • Auto-scrolling to current segment

Jump to Current Segment​

When playback moves current segment out of view:

  • "Jump to View" button appears
  • Click to scroll to current segment
  • Button positioned at edge of viewport
  • Shows direction (up/down)

Next Steps​

Master the Caption Editor! Use these features to create professional, accurately-timed captions.