@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/export/ExportScrim.tsx

@@ -0,0 +1,57 @@
+// The veil over the stage while an IN-BROWSER export renders.
+//
+// ── WHY THE STAGE IS BUSY AT ALL ─────────────────────────────────────────
+//
+// Tier 1 captures the LIVE stage canvas: `ShotRuntime` is flipped into export
+// framing and the capture loop seeks it frame by frame (see docs/exporting.md,
+// "Shot Tier 1"). So the author watches their timeline play through, on a tab
+// that is pegged for the duration. That is the design, not a defect — the stage
+// IS the renderer — and the honest response is to say so on the stage rather
+// than to leave it looking like the editor decided to run away on its own.
+//
+// ── AND WHY IT LIVES IN THE CHROME ───────────────────────────────────────
+//
+// A SIBLING of `<StagePanel>`, never a wrapper and never inside the iframe.
+// The stage is a GL document that must not remount (App.tsx's one structural
+// rule), and anything drawn inside it would be captured by the very export it
+// is describing.
+//
+// No scrim for a SERVER render: the machine is busy but the canvas is still the
+// author's to look at, and veiling it for minutes would be the opposite of
+// honest. The header badge carries that one.
+import { useShotEditor, useStore } from "../../state/context.js";
+import type { ShotEditorState } from "../../state/types.js";
+
+/**
+ * The lock's counter, for the scrim and the dialog alike. Once every frame is
+ * captured the export is still running: the file is being encoded (a GIF's
+ * palette pass and every frame's encode, ffmpeg's GIF passes on the server),
+ * which for a long GIF is minutes. A counter parked at N/N read as finished.
+ * Before the first frame there is no count at all: the server is starting its
+ * browser (or downloading it once), and "frame 0/?" read as frozen.
+ */
+export function exportLockCount(lock: NonNullable<ShotEditorState["exportLock"]>): string {
+  if (lock.total === 0) return lock.note ?? "Preparing the render…";
+  return lock.done >= lock.total
+    ? `Encoding the file (${lock.total} frames)`
+    : `Rendering frame ${lock.done}/${lock.total}`;
+}
+
+export function ExportScrim(): React.ReactElement | null {
+  const store = useStore();
+  const exportLock = useShotEditor((s) => s.exportLock);
+  if (exportLock === null || exportLock.where !== "browser") return null;
+  return (
+    <div className="export-scrim" data-testid="export-scrim">
+      {/* The COUNTER is not announced: it changes per frame, and a live region
+          that fires a hundred times would bury the sentence that matters. */}
+      <p className="export-scrim-count">{exportLockCount(exportLock)} in this browser</p>
+      <p className="export-scrim-note" role="status">
+        The stage is the renderer while this runs. Playback is held.
+      </p>
+      <button type="button" className="btn" onClick={() => store.cancelExport()}>
+        Cancel export
+      </button>
+    </div>
+  );
+}