Documentation
Back to Dashboard

Studio

A timeline video editor inside BlackOps. Trim, splice, and re-order raw footage on a horizontal canvas; auto-transcribe with word-level timestamps; cut by selecting words; render through the existing video pipeline; publish straight to YouTube.

How It Works

Studio sits on top of the existing render pipeline. You author an Edit Decision List (EDL) on the timeline; a compiler translates it into the same VideoSpec the Video Generation engine uses. The renderer doesn't change — Studio is the editing surface for it.

Three ways to ingest a clip

  • • Upload — mp4 / webm / mov, up to 1 GB, direct browser → Supabase
  • • Import URL — any direct video URL or YouTube link (whole video)
  • • Record — hit Record at any playhead position; webcam + mic capture rolls in sync with project playback so you can voice over what's on screen. Lands on the overlay lane as a circular bottom-right picture-in-picture and is also added to the library for reuse.

Two ways to cut

  • • Drag the trim handles on a clip; the to-be-cut head/tail show as red diagonal stripes with a Cut/× CTA
  • • Select words in the transcript and click "Trim to selection" to bound the cut to word boundaries

End-to-End Workflow

1

Create a project

Studio (beta) in the admin nav → New Project. Pick a format (1920×1080, 1080×1080, 1080×1920, etc.) — the timeline canvas matches.

2

Get clips into the library

Upload from disk, or hit Import to grab any direct video URL or YouTube link. Each library row shows a poster frame (first half-second), title, duration + dimensions, and a transcription status badge (auto-fired in the background via OpenAI Whisper, "Transcribing" → word-count when done). Hover to reveal a trash button that removes the clip from storage + library.

3

Drop clips on the timeline + cut

Drag a library row onto the video lane to use it as a scene, or onto the overlay lane to use it as a picture-in-picture overlay (today defaults to a circular bottom-right webcam style). Drag handles on a clip to trim — you see the cut region as red diagonal stripes with a Cut button to commit, × to cancel. Or click words in the transcript panel: drag a range, hit "Trim to selection," commit. Selection follows the playhead, so click anywhere on the timeline to seek and the active clip becomes the one you're editing. Hover any block to reveal an X for quick removal; overlay blocks have edge handles to trim and a body grab to slide them along the timeline.

4

Preview without rendering

Hit Play on the transport bar. A native video element above the timeline plays the cut, swapping source as the playhead crosses clip boundaries — and any active overlay renders as a synced picture-in-picture on top, positioned in actual video pixels (the preview letterboxes itself to the clip's aspect ratio). No render needed to check your edit. Space toggles play/pause, Arrow keys ±1 second.

5

Render

Click Render. For raw video clips Studio bypasses the HTML→MP4 renderer and runs ffmpeg directly — trim, scale, letterbox-pad to your project format, re-encode to H.264 + AAC, stitch all segments. Renders in seconds, not minutes. The completion banner gives you a direct MP4 link.

6

Publish to YouTube

The render-complete banner has a "Publish to YouTube" button. First time you connect via Google OAuth (one-time per site); after that, the dialog shows your channel + title/description/privacy fields. Privacy defaults to unlisted so accidental publishes don't go public.

The Editor Surface

Horizontal timeline canvas

Time-proportional clip blocks on a single track lane. Time ruler at the top with second-tick marks (interval scales with zoom: 1s/2s/5s/10s). Zoom slider 20–200 px/sec. Click anywhere to seek. Draggable red playhead diamond.

Two-step trim with explicit Cut

Trim handles don't commit on release. The clip block keeps its original extent visually; the would-be-cut head and tail render as red diagonal-stripe overlays carrying a Cut button (full word at ≥60px, scissors-only at ≥24px) and a small × cancel. You see what you're cutting before committing.

Live preview without rendering

Native <video> element above the timeline drives playback by swapping source + currentTime as the playhead crosses clip boundaries. No render needed to check the cut.

Transcript-driven edits

Each clip auto-transcribes via Whisper. The active clip's words appear inline; click a word to seek, drag a range to select, "Trim to selection" stages a cut bounded by word timings. The active word highlights amber and auto-scrolls during playback.

Setting Up YouTube Publishing

One-time configuration per BlackOps deployment:

  1. In Google Cloud Console, enable the YouTube Data API v3
  2. Create OAuth credentials (Web application)
  3. Add authorized redirect URIs:
    • • https://<your-domain>/api/auth/youtube/callback
    • • http://localhost:3000/api/auth/youtube/callback (for dev)
  4. Configure the OAuth consent screen with the youtube.upload + youtube.readonly scopes (Testing mode is fine for personal use; add yourself as a test user)
  5. Set three env vars on the deployment + locally:
    • • YOUTUBE_CLIENT_ID
    • • YOUTUBE_CLIENT_SECRET
    • • YOUTUBE_REDIRECT_URI
  6. The Google account being connected must own at least one YouTube channel — create one at studio.youtube.com if you don't already

The publish dialog shows a setup hint if any of these are missing.

Current Limits & Caveats

Clip uploads / imports

  • • 1 GB per clip (matches the storage bucket cap)
  • • mp4 / webm / mov
  • • YouTube imports may occasionally 403 — Vercel IPs get rate-limited

Transcription

  • • OpenAI Whisper, word-level timestamps
  • • 25 MB upload cap on Whisper's side = ~50 minutes of mono 64 kbps audio
  • • Failed transcriptions show a Retry button on the panel

Render

  • • Source audio is preserved (re-encoded to AAC stereo 44.1kHz)
  • • Audio-less clips get a silent track injected so concat doesn't drop audio when mixing
  • • Letterbox-pads non-matching aspect ratios (e.g. portrait clip in a 1920×1080 project)

YouTube upload

  • • 500 MB cap on the rendered MP4 (Lambda RAM limit)
  • • Privacy defaults to unlisted
  • • Section-import ("only seconds X-Y") coming later — for now, full video then trim on the timeline

What's Next

Studio Phase 1 is shipping with overlays, drag-and-drop, and webcam recording. Active build queue:

  • • Reclassify clip ↔ overlay in place — today a clip is locked into "scene" or "webcam overlay" at drop time; right-click chip menu to convert without losing trims
  • • Generalize overlay kinds beyond webcam — picture-in-picture (free positioning, any shape), lower-thirds, chyrons, slides; today overlays default to circular bottom-right with voiceover audio assumptions
  • • Side-by-side / split-screen layouts — co-equal videos in 2-up grids; needs a new layout primitive separate from overlays
  • • Drag-to-move clips on the video timeline — clips currently re-pack sequentially on every trim
  • • Voiceover capture (no video) — MediaRecorder audio-only capture with teleprompter mode
  • • AI edit assistance — filler-word detection, quotable-moment extraction, brain-aware overlay suggestions