@dailies-studio/shot-editor 0.1.0

package/src/panels/timeline/MarkerLane.tsx

@@ -0,0 +1,146 @@
+// The marker strip: one diamond per marker, at its MASTER frame.
+//
+// ── WHY THE STRIP SITS ABOVE THE AUDIO AND BELOW THE TRACKS ─────────────
+//
+// A marker is a note about the WHOLE video — `MarkerRef.frame` is a master
+// frame and nothing scene-local can address one — so it cannot live inside a
+// scene group. It sits directly over the audio lane because the marks are
+// almost always beats in that audio, and reading a diamond against the waveform
+// under it is the entire reason the strip is drawn rather than listed.
+//
+// ── ANCHORING: THE MARKS FOLLOW THE MUSIC ───────────────────────────────
+//
+// A beat marker that stays put when the music moves is the most-filed complaint
+// against Premiere's sequence markers, and it is why Final Cut made clip
+// ownership a fiat. The behaviour lives in `writeAudioDrag`, not here: a body
+// drag on an audio clip carries every marker inside the clip's window, in the
+// same scrub capture, so it is one undo entry and Escape restores the clip and
+// its marks together.
+//
+// It is DERIVED CONTAINMENT and not a stored `marker.clipId`, and that choice is
+// argued in model.ts's header. The short version: a stored owner needs an answer
+// for clip-deleted, clip-trimmed-past-the-marker, two-clips-overlapping and
+// marker-dragged-out, and each answer is a rule the author cannot see. What is
+// on screen is the rule: the marks under the bar move with the bar.
+//
+// So this lane's own drag is the simple one. It moves ONE marker to a frame,
+// through the dock's shared scrub and the shared `snap.ts` — there is no second
+// snapper here either.
+import type { PointerEvent as ReactPointerEvent } from "react";
+import { frameToPx, startDrag } from "@dailies-studio/timeline";
+import type { Rational } from "@dailies-studio/engine";
+import type { MarkerRef } from "@dailies-studio/shot/doc";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { frameDelta, timecode } from "./model.js";
+import { isSnapSuppressed } from "./snap.js";
+import type { SnapPress } from "./snap.js";
+
+export function MarkerLane(props: { ppf: number; labelWidth: number; beginSnap?: SnapPress }) {
+  const { ppf, labelWidth, beginSnap } = props;
+  const store = useStore();
+  const doc = useShotEditor((s) => s.doc);
+  const selected = useShotEditor((s) => s.selectedMarker);
+  if (doc === null) return null;
+  const markers = doc.markers ?? [];
+
+  return (
+    <div className="marker-lane" data-testid="marker-lane">
+      <div className="marker-label-cell" style={{ width: labelWidth }}>
+        <span className="marker-lane-name">Markers</span>
+        <button
+          type="button"
+          className="marker-add"
+          title="Add a marker at the playhead (M)"
+          aria-label="Add a marker at the playhead"
+          onClick={() => store.addMarkerAtPlayhead()}
+        >
+          +
+        </button>
+      </div>
+      <div className="marker-track">
+        {markers.length === 0 ? (
+          <span className="marker-empty">Press M to mark this frame</span>
+        ) : (
+          markers.map((marker) => (
+            <MarkerPin
+              key={marker.id}
+              marker={marker}
+              selected={marker.id === selected}
+              ppf={ppf}
+              fps={doc.fps}
+              beginSnap={beginSnap}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
+function MarkerPin(props: {
+  marker: MarkerRef;
+  selected: boolean;
+  ppf: number;
+  fps: Rational;
+  beginSnap: SnapPress | undefined;
+}) {
+  const { marker, selected, ppf, fps, beginSnap } = props;
+  const store = useStore();
+  // Subscribed to the BOOLEAN, not the frame: useSyncExternalStore only
+  // notifies when the selected value changes, so a pin re-renders exactly
+  // twice per playhead pass-through instead of once per playback frame — and
+  // the lane above it never re-renders at all.
+  const atPlayhead = useShotEditor((s) => s.frame === marker.frame);
+
+  const drag = (e: ReactPointerEvent<HTMLElement>): void => {
+    e.preventDefault();
+    e.stopPropagation();
+    // Selecting on the PRESS and not on a click: the press is what opens the
+    // inspector on the thing about to move, and a drag never fires a click.
+    store.selectMarker(marker.id);
+    const startX = e.clientX;
+    // Its OWN frame is excluded, or the diamond sits on its own snap target and
+    // the drag never leaves the ground.
+    const snap = beginSnap?.({ markerId: marker.id }, isSnapSuppressed(e));
+    store.beginBlockDrag();
+    startDrag(e, {
+      onMove(ev) {
+        // Measured from the PRESS, never accumulated: every capture re-derives
+        // from the scrub's base, so a coalesced move or a snap that bites and
+        // un-bites cannot make the mark drift.
+        const raw = marker.frame + frameDelta(ev.clientX - startX, ppf);
+        store.dragMarker(marker.id, snap === undefined ? raw : snap(raw));
+      },
+      onEnd: (commit) => store.endBlockDrag(commit),
+    });
+  };
+
+  const label = marker.label === undefined || marker.label === "" ? "Marker" : marker.label;
+  return (
+    <span
+      className={`marker-pin${selected ? " is-selected" : ""}${atPlayhead ? " is-at-playhead" : ""}`}
+      data-marker={marker.id}
+      style={{ left: frameToPx(marker.frame, ppf) }}
+      role="button"
+      tabIndex={-1}
+      aria-label={`${label} at ${timecode(marker.frame, fps)}`}
+      aria-pressed={selected}
+      title={`${label} · ${timecode(marker.frame, fps)} · drag to move it, ⌘drag to ignore snapping`}
+      onPointerDown={drag}
+    >
+      {/* The diamond is a rotated square rather than an SVG: it is 8px of
+          decoration on a lane that may hold a hundred of them, and a rotation
+          on a span costs no node the browser has to lay out separately. Its own
+          `color` overrides the lane's default, which is the only thing
+          `MarkerRef.color` is for. */}
+      <span
+        className="marker-diamond"
+        style={marker.color === undefined ? undefined : { background: marker.color }}
+        aria-hidden="true"
+      />
+      {/* Hover (and selection) only, in CSS. Always-on labels turn a strip of
+          beats into a wall of overlapping text at any useful zoom. */}
+      <span className="marker-pin-label">{label}</span>
+    </span>
+  );
+}

package/src/panels/timeline/SceneStrip.tsx

@@ -0,0 +1,145 @@
+// The SCENE LANE: scenes back to back over the master strip.
+//
+// Slim and secondary, and the ONLY home for the three verbs that are about
+// scenes rather than about time — create, reorder, trim. The tracks below show
+// every scene at once now, so this lane no longer decides what is on screen; it
+// is the handle on the document's coarsest structure, sitting directly above the
+// boundaries it draws.
+//
+// A bar's WIDTH is `scene.durationFrames` and its POSITION is a prefix sum over
+// `doc.scenes` — derived, never stored. So trimming a bar writes one field and
+// every bar after it moves for free, and reordering is a splice. Storing
+// per-scene offsets would desync on both, and the desync only shows up in an
+// export.
+import { frameToPx, startDrag } from "@dailies-studio/timeline";
+import type { PointerEvent as ReactPointerEvent } from "react";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { frameDelta, sceneBars } from "./model.js";
+
+/** Its own component so the per-frame tick re-renders one absolutely
+ *  positioned div, not every scene bar above it. */
+function ScenePlayhead({ ppf }: { ppf: number }) {
+  const frame = useShotEditor((s) => s.frame);
+  return <div className="scene-playhead" style={{ left: frameToPx(frame, ppf) }} />;
+}
+
+export function SceneStrip({ ppf, labelWidth }: { ppf: number; labelWidth: number }) {
+  const store = useStore();
+  const doc = useShotEditor((s) => s.doc);
+  const sceneId = useShotEditor((s) => s.sceneId);
+  if (doc === null) return null;
+  const bars = sceneBars(doc);
+
+  return (
+    <div className="scene-strip" data-testid="scene-strip">
+      <div className="scene-strip-label" style={{ width: labelWidth }}>
+        <span>Shots</span>
+        <button
+          type="button"
+          className="scene-strip-add"
+          aria-label="Add shot"
+          title="Add a shot at the end, and go to it"
+          onClick={() => store.addScene()}
+        >
+          +
+        </button>
+      </div>
+      <div className="scene-strip-lane">
+        {bars.map((bar, index) => (
+          <div
+            key={bar.id}
+            className={`scene-bar${bar.id === sceneId ? " is-current" : ""}`}
+            style={{ left: frameToPx(bar.start, ppf), width: Math.max(8, frameToPx(bar.end - bar.start, ppf)) }}
+            data-scene={bar.id}
+            draggable
+            onDragStart={(e) => e.dataTransfer.setData("text/plain", bar.id)}
+            onDragOver={(e) => e.preventDefault()}
+            onDrop={(e) => {
+              e.preventDefault();
+              const from = e.dataTransfer.getData("text/plain");
+              if (from.length > 0 && from !== bar.id) store.reorderScene(from, index);
+            }}
+            onClick={() => {
+              // Clicking a scene both SELECTS it and moves the playhead into
+              // it: the micro lane follows the playhead, so selecting without
+              // seeking would show one scene's tracks under another's ruler.
+              // The frame is read AT THE CLICK, not subscribed: a handler
+              // needs the current value once, and the subscription was what
+              // re-rendered every bar on every playback frame.
+              store.setScene(bar.id);
+              const frame = store.getState().frame;
+              if (frame < bar.start || frame >= bar.end) store.seek(bar.start);
+            }}
+            // Zoom the dock to this shot. A COMPOUND on purpose: the single
+            // click above fires first on both clicks, so the shot is selected
+            // and the playhead is inside it before the lane reframes around
+            // it. `\` (fit) is the way back out.
+            onDoubleClick={() => store.fitDock(bar.id)}
+            title="Double-click to zoom the timeline to this shot"
+          >
+            <span className="scene-bar-name">{bar.name}</span>
+            <SceneTrimHandle
+              onDrag={(deltaPx) => store.trimScene(bar.id, bar.end - bar.start + frameDelta(deltaPx, ppf))}
+              onStart={() => store.beginBlockDrag()}
+              onEnd={(commit) => store.endBlockDrag(commit)}
+            />
+          </div>
+        ))}
+        {/* The boundaries themselves. A diamond per cut, filled when the shot
+            before it blends into the one after — strip geometry rather than bar
+            geometry, because a transition is about the SEAM and the bars stay
+            scene-local. Nothing after the last bar: there is no seam there. */}
+        {bars.slice(0, -1).map((bar) => (
+          <button
+            key={`cut-${bar.id}`}
+            type="button"
+            className={`scene-cut${doc.scenesById[bar.id]?.transition !== undefined ? " is-blend" : ""}`}
+            style={{ left: frameToPx(bar.end, ppf) }}
+            aria-label={`Transition after ${bar.name}`}
+            title={
+              doc.scenesById[bar.id]?.transition === undefined
+                ? `Cut after ${bar.name}`
+                : `${doc.scenesById[bar.id]!.transition!.kind} after ${bar.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(bar.id);
+              store.seek(Math.max(bar.start, bar.end - 1));
+            }}
+          />
+        ))}
+        {/* One playhead across the whole master timeline, so the macro lane
+            always shows where the export is. */}
+        <ScenePlayhead ppf={ppf} />
+      </div>
+    </div>
+  );
+}
+
+function SceneTrimHandle({
+  onStart,
+  onDrag,
+  onEnd,
+}: {
+  onStart(): void;
+  onDrag(deltaPx: number): void;
+  onEnd(commit: boolean): void;
+}) {
+  const onPointerDown = (e: ReactPointerEvent<HTMLSpanElement>): void => {
+    e.preventDefault();
+    e.stopPropagation();
+    const startX = e.clientX;
+    onStart();
+    // Absolute from the PRESS, never cumulative — the same 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" />;
+}