Skip to content

feat(studio): show both sides of the cut while trimming - #3343

Open
miguel-heygen wants to merge 1 commit into
feat/studio-trim-toolsfrom
feat/studio-precision-trim-view
Open

feat(studio): show both sides of the cut while trimming#3343
miguel-heygen wants to merge 1 commit into
feat/studio-trim-toolsfrom
feat/studio-precision-trim-view

Conversation

@miguel-heygen

@miguel-heygen miguel-heygen commented Aug 19, 2026

Copy link
Copy Markdown
Collaborator

Stacked on #3341 (the trim tools). Review that one first; this branch is
only the last commit. Before merging the stack, retarget this PR to main
and rebase — deleting #3341's branch on merge would auto-close this one.

What

The FCP-style precision view from #3285: while a trim tool is active, a two-up
panel above the timeline holds the frame on each side of the edit point, live,
as you drag it.

The precision view: outgoing and incoming frames either side of a cut, following a roll drag

Left pane is the outgoing frame, right is the incoming one, with the running
trim amount between them. A finished trim leaves its cut on screen rather than
snapping back — it is the frame you just made.

Why

The trim tools move an edit point, but the preview only ever shows one frame,
so the frame you are cutting away and the frame you are cutting to were
never on screen at the same time. That is exactly what the issue asked for, and
it is the part of a trim you cannot judge from the timeline bars.

How

  • Each pane is its own preview iframe of the current composition, seeked to its
    own time — the same live-preview-in-an-iframe pattern the composition cards
    already use, so no new rendering machinery. Seeks are imperative: re-rendering
    the iframe per pointer move would reload the composition every frame.
  • The gesture and the panel meet through one small store slice: the trim
    publishes the pair of composition times it is editing, the panel reads them.
    The gesture lives deep in the timeline's drag hook and the panel renders above
    the timeline, so props would have meant threading state through five
    components.
  • Slip has no edit point, so it shows the clip's own first and last frame —
    what its drag actually changes — labelled "Clip in" / "Clip out".
  • Panes are letterboxed to the composition's authored size, so a 1920×1080 comp
    shows the whole frame rather than the top-left corner of it.
  • Idle (tool armed, nothing dragging) the panes straddle the playhead, which
    also keeps them warm: a composition takes a moment to load and a pane that
    arrives after the gesture is over is worth nothing.

On the cost. Two extra composition renders is real, so the panel exists only
while a trim tool is active, and a toolbar toggle (persisted in the studio UI
preferences, default on) turns it off. Switching it off tears the iframes down
rather than hiding them — verified below.

Test plan

  • Unit tests added/updated — 3 new tests covering which edit point each mode
    frames (out-point ripple follows the drag, head ripple pins the start,
    roll and slide follow their moving boundary), slip framing the clip's own
    in/out, and the clamp that stops a negative preview time.

  • Manual testing performed — drove a real Chrome against Studio and read the
    panel's own labels back out of the DOM:

    Step Observed
    Select tool panel hidden
    Roll tool panel shown, 3 preview iframes alive (main + 2 panes)
    Toggle off panel gone, back to 1 preview iframe
    Toggle on panel shown again
    Roll the A|B cut +2s Outgoing · 9.97s │ ROLL +2.00s │ Incoming · 10.00s
    Release the trimmed cut stays on screen

    Frames verified by eye, not just by label — the panel after that roll:

    The panel after a +2s roll: outgoing at 9.97s, incoming at 10.00s
  • Full packages/studio suite green (4311 tests), typecheck, oxlint, oxfmt.

Not covered

  • Dragging the cut inside the panel itself. FCP lets you trim from the
    precision editor; here it is a readout and the timeline stays the input
    surface. Worth adding if the view earns its keep.
  • Filmstrips of the surrounding source either side of the cut. Two frames,
    not two strips.
  • The panel is a fixed 132px band above the timeline; it is not resizable.

The trim tools move an edit point, but the preview only ever shows one
frame, so the frame you are cutting away and the frame you are cutting to
were never on screen together. A two-up panel above the timeline now holds
both, live, while the gesture runs.

Each pane is its own preview iframe of the current composition seeked to its
own time — the pattern the composition cards already use — so the frames
track the drag with no server round-trip. The gesture publishes the pair of
times it is editing; the panes read them. A finished trim leaves its cut on
screen instead of snapping back, since that is the frame you just made.

Slip has no edit point, so it shows the clip's own first and last frame,
which is what its drag actually changes.

Two extra composition renders is a real cost, so the panel only exists while
a trim tool is active and a toolbar toggle (persisted) turns it off — both
panes and their iframes are torn down when it does.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant