@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/timeline/ShotRow.tsx

@@ -0,0 +1,400 @@
+// ONE ROW PER SHOT, at the head of that shot's group of element rows.
+//
+// ── WHAT THIS REPLACED, AND WHY ────────────────────────────────────────────
+//
+// `SceneStrip` drew every shot as a bar in ONE 26px lane above the tracks,
+// while `dock-tracks` underneath it already rendered one GROUP per shot,
+// stacked. So the document's coarsest structure was drawn twice, in two
+// different shapes, and only the thin one carried the verbs.
+//
+// It is one drawing now: the group's first row IS its shot. The bar sits at the
+// shot's own master position, the label cell carries the name and the
+// disclosure into that shot's elements, and every verb the strip owned moved
+// here unchanged — create, reorder, trim, delete, transition, open. The strip's
+// argument stands and this is still the one place a verb about a SHOT (rather
+// than about time) lives; it is just no longer a second picture of a list.
+//
+// ── THE THREE THINGS THAT MUST NOT CHANGE IN THE MOVE ──────────────────────
+//
+//   POSITIONS STAY DERIVED. `start`/`end` come from `sceneWindows`' prefix sum
+//     (through `masterRows`), so trimming writes one field and every shot after
+//     it moves for free. Nothing here stores an offset.
+//   `originFrames` IS A DRAWING OFFSET. Inside a shot the lane is re-zeroed on
+//     it; every edit still speaks master time. Same split every other row in
+//     this dock keeps.
+//   THE CUT DIAMOND BELONGS TO THE OUTGOING SHOT. A transition is stored on the
+//     shot before the seam, so it is drawn at this row's END and the last shot
+//     has none.
+import { framesToSeconds } from "@dailies-studio/engine";
+import { frameToPx, startDrag } from "@dailies-studio/timeline";
+import { MIN_SCENE_FRAMES, MIN_TRANSITION_FRAMES } from "@dailies-studio/shot/doc";
+import { useEffect, useRef, useState } from "react";
+import type { DragEvent as ReactDragEvent, PointerEvent as ReactPointerEvent } from "react";
+import { useShotEditor, useShotEditorHot, useStore } from "../../state/context.js";
+import { SHOT_MENU_OPTIONS, shotMenuEntries } from "../../state/menu.js";
+import { formatDuration, frameDelta } from "./model.js";
+import { isSnapSuppressed } from "./snap.js";
+import type { SnapPress } from "./snap.js";
+import type { UseContextMenuResult } from "@dailies-studio/ui";
+
+/** A Shot bar's reorder drag. Nothing else in the app sets it. */
+const SHOT_MIME = "application/x-dailies-shot";
+
+/** The dock's ONE menu opener, threaded down. One `useContextMenu` for every
+ *  shot row rather than one each: the hook holds an open/closed state and a
+ *  focus-restore ref, and only one menu can be open at a time. */
+type OpenMenu = UseContextMenuResult["open"];
+
+export function ShotRow({
+  id,
+  name,
+  start,
+  end,
+  index,
+  isLast,
+  blendFrames,
+  ppf,
+  labelWidth,
+  originFrames,
+  expandable,
+  expanded,
+  layerCount,
+  onToggle,
+  openMenu,
+  beginSnap,
+}: {
+  id: string;
+  name: string;
+  /** MASTER frames, half-open [start, end) — the prefix sum's own numbers. */
+  start: number;
+  end: number;
+  index: number;
+  isLast: boolean;
+  /** The stored blend length into the next shot, or null for a hard cut. Fills
+   *  the cut diamond and sizes the ribbon beside it.
+   *
+   *  THE STORED NUMBER, not the resolved one. `transitionAt` clamps the blend
+   *  to whatever the incoming shot can hold, and drawing the clamped length
+   *  would make the ribbon shrink when the author trimmed the NEXT shot — a bar
+   *  moving because of an edit somewhere else. The inspector says so in words
+   *  when the two differ. */
+  blendFrames: number | null;
+  ppf: number;
+  labelWidth: number;
+  /** The shot context's re-zero. DRAWING ONLY. */
+  originFrames: number;
+  /** Whether the row offers the fold. The layers fold into the shot's row in
+   *  the Project and shot contexts alike ("9 layers"). */
+  expandable: boolean;
+  expanded: boolean;
+  /** How many layer rows the fold holds, for its "N layers" readout. */
+  layerCount?: number;
+  onToggle(): void;
+  openMenu: OpenMenu;
+  beginSnap: SnapPress;
+}) {
+  const store = useStore();
+  // HOT, as a boolean: the cold lane sleeps through a cut the transport plays
+  // (store `set`), and this is the bar that says what is playing. A row
+  // re-renders only when the answer flips, as `useLive`'s bars do.
+  const current = useShotEditorHot((s) => s.sceneId === id);
+  // A viewer cannot reorder, so the bar does not lift.
+  const readOnly = useShotEditor((s) => s.readOnly);
+  const entered = useShotEditor((s) => s.enteredScene === id);
+  // Two primitives, not the Rational: a selector returning a fresh object
+  // would re-render every shot row on every store change.
+  const fpsNum = useShotEditor((s) => s.doc?.fps.num ?? 0);
+  const fpsDen = useShotEditor((s) => s.doc?.fps.den ?? 1);
+  const seconds = fpsNum > 0 ? framesToSeconds(end - start, { num: fpsNum, den: fpsDen }) : null;
+  const [renaming, setRenaming] = useState(false);
+  const input = useRef<HTMLInputElement | null>(null);
+  /** The ribbon's stored length AT THE PRESS, so every move is absolute from
+   *  it. Read from the store, not the prop: each capture re-renders this row
+   *  with the new length, and a delta added to that would compound. */
+  const pressBlend = useRef<number | null>(null);
+  /** The out trim's snap, frozen at the press (`beginSnap`). */
+  const snapOut = useRef<((frame: number) => number) | null>(null);
+  /** Which side of this bar a dragged shot would land on, for the drop line. */
+  const [dropSide, setDropSide] = useState<"before" | "after" | null>(null);
+  useEffect(() => {
+    if (renaming) input.current?.select();
+  }, [renaming]);
+
+  /** Select the shot and put the playhead in it. The bar's own click, and the
+   *  first half of every gesture that follows: the stage draws one shot, so a
+   *  verb aimed at a shot the playhead is not in would act somewhere the author
+   *  cannot see. */
+  const pick = (): void => {
+    store.setScene(id);
+    const frame = store.getState().frame;
+    if (frame < start || frame >= end) store.seek(start);
+  };
+
+  const menu = (e: { clientX: number; clientY: number; preventDefault(): void; stopPropagation(): void }): void => {
+    e.preventDefault();
+    e.stopPropagation();
+    pick();
+    openMenu(
+      { x: e.clientX, y: e.clientY },
+      shotMenuEntries(store, store.getState(), id, () => setRenaming(true)),
+      SHOT_MENU_OPTIONS,
+    );
+  };
+
+  const commitName = (next: string): void => {
+    setRenaming(false);
+    store.renameScene(id, next);
+  };
+
+  const sideOf = (e: ReactDragEvent<HTMLDivElement>): "before" | "after" => {
+    const box = e.currentTarget.getBoundingClientRect();
+    return e.clientX < box.left + box.width / 2 ? "before" : "after";
+  };
+
+  return (
+    <div
+      className={`shot-row${current ? " is-current" : ""}${entered ? " is-entered" : ""}`}
+      data-shot-row={id}
+      data-testid={`shot-row-${id}`}
+    >
+      <div className="shot-label-cell" style={{ width: labelWidth }}>
+        <span className="shot-swatch" aria-hidden="true" />
+        {renaming ? (
+          <input
+            ref={input}
+            className="shot-rename"
+            defaultValue={name}
+            aria-label={`Rename ${name}`}
+            data-testid={`shot-rename-${id}`}
+            // Commit on blur AND on Enter, discard on Escape. Escape has to stop
+            // propagating or the dock's drag-cancel listener and `leaveScene`
+            // both hear the same key.
+            onBlur={(e) => commitName(e.currentTarget.value)}
+            onKeyDown={(e) => {
+              e.stopPropagation();
+              if (e.key === "Enter") commitName(e.currentTarget.value);
+              else if (e.key === "Escape") setRenaming(false);
+            }}
+          />
+        ) : (
+          <button
+            type="button"
+            className="shot-name"
+            data-testid={`shot-name-${id}`}
+            onClick={pick}
+            // THE WAY IN. Opening a shot changes the dock, the stage, the
+            // breadcrumb and what the playhead can reach, and it is the most
+            // common navigation in the product — so it gets the gesture every
+            // file browser gives "go inside", on the row and on the bar alike.
+            onDoubleClick={() => store.enterScene(id)}
+            // F2 (the layers outline's key) or Enter on the focused name renames.
+            onKeyDown={(e) => {
+              if (e.key !== "F2" && e.key !== "Enter") return;
+              e.preventDefault();
+              e.stopPropagation();
+              if (!store.viewOnly()) setRenaming(true);
+            }}
+            onContextMenu={menu}
+            title={`${name}: double-click to open it, F2 to rename`}
+          >
+            {entered ? "Shot" : name}
+          </button>
+        )}
+        {/* THE FOLD, at the end of the label: the layer count and its chevron
+            in one target. The camera and the sound stay out of it inside a
+            shot, so a first look is three rows. */}
+        {expandable ? (
+          <button
+            type="button"
+            className="shot-disclosure"
+            aria-expanded={expanded}
+            aria-label={expanded ? `Hide ${name}'s layers` : `Show ${name}'s layers`}
+            title={expanded ? "Fold the layers into the shot" : "Show the layers"}
+            onClick={onToggle}
+          >
+            {layerCount === undefined ? null : (
+              <span className="shot-layer-count">
+                {layerCount} {layerCount === 1 ? "layer" : "layers"}
+              </span>
+            )}
+            <svg
+              className={`shot-fold-chevron${expanded ? " is-open" : ""}`}
+              width="12"
+              height="12"
+              viewBox="0 0 12 12"
+              fill="none"
+              aria-hidden="true"
+            >
+              <path d="M4.5 3L7.5 6L4.5 9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+          </button>
+        ) : null}
+      </div>
+      <div className="shot-lane">
+        <div
+          className={`shot-bar${current && !entered ? " is-current" : ""}${dropSide === null ? "" : ` is-drop-${dropSide}`}`}
+          style={{ left: frameToPx(start - originFrames, ppf), width: Math.max(8, frameToPx(end - start, ppf)) }}
+          data-scene={id}
+          // Reorder is HTML5 drag-and-drop: a splice of `doc.scenes`, never a
+          // written offset. The hovered half picks the side, and the line on
+          // that edge says so before the drop. Only a Shot bar's own MIME
+          // lights it: a file or asset drag would promise a reorder.
+          draggable={!readOnly}
+          onDragStart={(e) => e.dataTransfer.setData(SHOT_MIME, id)}
+          onDragOver={(e) => {
+            if (!Array.from(e.dataTransfer.types).includes(SHOT_MIME)) return;
+            e.preventDefault();
+            setDropSide(sideOf(e));
+          }}
+          onDragLeave={() => setDropSide(null)}
+          onDrop={(e) => {
+            e.preventDefault();
+            setDropSide(null);
+            const from = e.dataTransfer.getData(SHOT_MIME);
+            const fromIndex = store.getState().doc?.scenes.indexOf(from) ?? -1;
+            if (fromIndex < 0 || from === id) return;
+            // `reorderScene` takes the index AFTER the shot is lifted out.
+            const slot = sideOf(e) === "after" ? index + 1 : index;
+            store.reorderScene(from, fromIndex < slot ? slot - 1 : slot);
+          }}
+          onClick={pick}
+          onDoubleClick={() => store.enterScene(id)}
+          onContextMenu={menu}
+          title={`${name}: double-click to open it, drag to reorder, drag the right edge to trim`}
+        >
+          <span className="shot-bar-name">{name}</span>
+          {/* The length, at the clip's far end ("18.00s"). */}
+          {seconds === null ? null : <span className="shot-frames">{formatDuration(seconds)}</span>}
+          {/* The aimed target, kept beside the double-click rather than replaced
+              by it: a chevron is discoverable and a double-click is fast, and
+              the two cost one 12px button between them. */}
+          <button
+            type="button"
+            className="scene-open"
+            data-testid={`scene-open-${id}`}
+            aria-label={`Open ${name}`}
+            title={`Open ${name}: add and animate its elements`}
+            onPointerDown={(e) => e.stopPropagation()}
+            onClick={(e) => {
+              e.stopPropagation();
+              store.enterScene(id);
+            }}
+          >
+            ›
+          </button>
+          <ShotTrimHandle
+            // Snaps like every other edge, to the targets a ripple trim leaves
+            // still: the playhead, the markers, and edges before this shot's end.
+            onStart={(e) => {
+              snapOut.current = beginSnap(
+                { rippleFromFrame: end },
+                isSnapSuppressed(e),
+                { min: start + MIN_SCENE_FRAMES, max: Infinity },
+              );
+              store.beginBlockDrag();
+            }}
+            onDrag={(deltaPx) => {
+              const out = snapOut.current?.(end + deltaPx / ppf) ?? end + frameDelta(deltaPx, ppf);
+              store.trimScene(id, out - start);
+            }}
+            onEnd={(commit) => {
+              snapOut.current = null;
+              store.endBlockDrag(commit);
+            }}
+          />
+        </div>
+        {/* No seam inside the ENTERED shot: its out frame is the lane's right
+            edge there, so the diamond drew half clipped into the clip's end,
+            and the next shot it leads into is not on screen. `isLast` is the
+            Project's answer and says nothing about which shot is entered. */}
+        {isLast || entered ? null : (
+          <button
+            type="button"
+            className={`scene-cut${blendFrames === null ? "" : " is-blend"}`}
+            style={{ left: frameToPx(end - originFrames, ppf) }}
+            aria-label={`Transition after ${name}`}
+            title={blendFrames === null ? `Cut after ${name}` : `Blend after ${name}`}
+            onClick={(e) => {
+              e.stopPropagation();
+              // Select the OUTGOING shot: that is where the transition is stored
+              // and where the inspector edits it. The playhead goes to the last
+              // frame it owns, so the stage shows the frame the blend starts from.
+              store.setScene(id);
+              store.seek(Math.max(start, end - 1));
+            }}
+          />
+        )}
+        {/* ── THE BLEND RIBBON ────────────────────────────────────────────
+            Drawn FORWARD from the cut, because that is where the window is:
+            `transitionAt` puts it on the INCOMING side, [cut, cut + d), which
+            is what keeps the master timeline from retiming when a transition is
+            added. A ribbon reaching backwards would draw a Premiere-style
+            handle that this lane deliberately does not have.
+
+            It overhangs this row's own bar on purpose — the blend belongs to
+            the seam, not to either shot — and is pointer-transparent except
+            for its handle, so it cannot swallow clicks meant for the row under
+            it. There is no drag-to-CREATE: the diamond already opens the
+            inspector, which is where a preset gets chosen. */}
+        {isLast || entered || blendFrames === null ? null : (
+          <div
+            className="scene-blend"
+            style={{
+              left: frameToPx(end - originFrames, ppf),
+              width: frameToPx(blendFrames, ppf),
+            }}
+            aria-hidden="true"
+          >
+            <ShotTrimHandle
+              onStart={() => {
+                pressBlend.current = store.getState().doc?.scenesById[id]?.transition?.durationFrames ?? null;
+                store.beginBlockDrag();
+              }}
+              onDrag={(deltaPx) => {
+                // Read the transition LIVE from the store rather than closing
+                // over a prop: a drag re-derives from its own base every move,
+                // so the object it spreads has to be the current one. The
+                // length is the press's, plus the move from the press.
+                const current = store.getState().doc?.scenesById[id]?.transition;
+                const base = pressBlend.current;
+                if (current === undefined || base === null) return;
+                store.setSceneTransition(id, {
+                  ...current,
+                  durationFrames: Math.max(MIN_TRANSITION_FRAMES, base + frameDelta(deltaPx, ppf)),
+                });
+              }}
+              onEnd={(commit) => {
+                pressBlend.current = null;
+                store.endBlockDrag(commit);
+              }}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function ShotTrimHandle({
+  onStart,
+  onDrag,
+  onEnd,
+}: {
+  onStart(press: { metaKey: boolean; ctrlKey: boolean }): void;
+  onDrag(deltaPx: number): void;
+  onEnd(commit: boolean): void;
+}) {
+  const onPointerDown = (e: ReactPointerEvent<HTMLSpanElement>): void => {
+    e.preventDefault();
+    e.stopPropagation();
+    const startX = e.clientX;
+    onStart(e);
+    // Absolute from the PRESS, never cumulative — the rule every drag in this
+    // lane follows, and the reason a coalesced move cannot make it drift.
+    startDrag(e, {
+      onMove: (ev) => onDrag(ev.clientX - startX),
+      onEnd: (commit) => onEnd(commit),
+    });
+  };
+  return <span className="scene-trim" data-handle="scene-out" onPointerDown={onPointerDown} aria-hidden="true" />;
+}