@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/storyboard/shotboard/ComponentPicker.tsx

@@ -0,0 +1,373 @@
+// "ADD A COMPONENT" (Paper SB4): the Component tool's picker, hung above its
+// button. Four sections, each from the builder the surface that owns it
+// already reads, so the picker never lists a set of its own:
+//
+//   In this project     Components' This project (`componentsListOf`), then
+//                       the folder-mates the board has always offered
+//                       (`projectComponents`, which leaves out a file another
+//                       Project holds): written for this film, not placed yet
+//   Your library        Components' other half (`libraryComponentsOf`): code
+//                       made for no Project, a Dailies Library install, or
+//                       what someone added to the library; a Studio-made one
+//                       of another Project is COPIED IN first
+//                       (`importWorkspaceComponent`, which reuses a copy
+//                       already here)
+//   Built in            the catalog's built-ins under the server's groups, by
+//                       the Insert drawer's names. A built-in's row id is its
+//                       registry id, so it is added as itself and never
+//                       installed
+//   Dailies Library     the shipped components (`shippedRows`), which install
+//                       on add
+//
+// Every add lands as a CARD PINNED TO THIS SHOT (a requirement, "In the shot")
+// and then its item in the middle of the open sketch, so the Studio's
+// checklist still works ("Every item points at a card. Nothing floats."). A
+// card the plan already holds for the same component is reused. Only a
+// `three` component can draw in the shot: a dom one the Project or the
+// workspace holds shows disabled with the reason, as Components shows it, and
+// the catalogs offer three only. "Browse the Dailies Library…" opens the whole
+// Library, whose Pin to board lands a Style card the sketch can take by drag.
+import { useEffect, useMemo, useState } from "react";
+import type { RefObject } from "react";
+import { addReference } from "@dailies-studio/shot/doc";
+import type { Doc3D, ReferenceItem3D } from "@dailies-studio/shot/doc";
+import { Popover } from "@dailies-studio/ui";
+import { promotedBuiltinLabel } from "../../../addFamilies.js";
+import type { ComponentFileHome, ComponentRow, LibraryItem, WorkspaceComponent } from "../../../api.js";
+import { ADD_ICON, CHEVRON_RIGHT_ICON, CLOSE_ICON, COMPONENT_ICON, SEARCH_ICON } from "../../../icons.js";
+import { useShotEditor, useStore } from "../../../state/context.js";
+import { projectComponents } from "../../../state/projectComponents.js";
+import type { ShotEditorStore } from "../../../state/store.js";
+import { componentsListOf, libraryComponentsOf, libraryHomeLabel } from "../../../state/workspace.js";
+import type { ComponentsListRow } from "../../../state/workspace.js";
+import { placesAsLayer, shippedRows } from "../../library/libraryModel.js";
+import { partNumberOf } from "../PlanPanel.js";
+
+/** Where a row lists, top to bottom. */
+export type ComponentPickSection = "project" | "workspace" | "builtin" | "library";
+
+/** One picker row, and what adding it does. */
+export interface ComponentPickRow {
+  key: string;
+  name: string;
+  kind: "code" | "studio";
+  section: ComponentPickSection;
+  /** A built-in's server group, its sub-head under Built in. */
+  group?: string;
+  /** Where a Your library component comes from (`libraryHomeLabel`). */
+  where?: string;
+  thumb?: string;
+  /** Why it cannot be a sketch item (a dom component): shown disabled. */
+  refusal?: string;
+  /** What a press does, where the name alone does not say. */
+  title?: string;
+  add: (store: ShotEditorStore, partId: string) => Promise<void>;
+}
+
+const cardIds = (doc: Doc3D | null): Set<string> => new Set((doc?.resources?.references ?? []).map((r) => r.id));
+
+/** The plan's own card for a component (`matches`), or the component card
+ *  the add `make` pins to the plan; then its item. */
+async function landCard(
+  store: ShotEditorStore,
+  partId: string,
+  matches: (card: ReferenceItem3D) => boolean,
+  make: () => Promise<void> | void,
+): Promise<void> {
+  let card = store.getState().doc?.resources?.references?.find((r) => r.part === partId && matches(r));
+  if (card === undefined) {
+    const before = cardIds(store.getState().doc);
+    await make();
+    card = (store.getState().doc?.resources?.references ?? []).find((r) => !before.has(r.id) && r.part === partId && r.type === "component");
+  }
+  if (card !== undefined) await store.addSketchItemFromCard(card.id);
+}
+
+/** A definition of this document, as a card pinned to the part. */
+const addDefinition =
+  (defId: string) =>
+  (store: ShotEditorStore, partId: string): Promise<void> =>
+    landCard(
+      store,
+      partId,
+      (card) => card.type === "component" && card.def === defId,
+      () => {
+        const label = store.getState().doc?.components?.[defId]?.name ?? "Component";
+        store.edit((base) => addReference(base, {}, { type: "component", label, def: defId, props: {}, use: "asset", part: partId }, "component"));
+      },
+    );
+
+/** A registry component, as the card `addStoryboardComponent` pins. */
+const addRegistered =
+  (componentId: string) =>
+  (store: ShotEditorStore, partId: string): Promise<void> =>
+    landCard(
+      store,
+      partId,
+      (card) => card.type === "component" && card.component === componentId,
+      () => store.addStoryboardComponent(componentId, partId, { use: "asset", select: false }),
+    );
+
+/** A row that never adds: a press says why instead. */
+const refused =
+  (refusal: string) =>
+  async (store: ShotEditorStore): Promise<void> => {
+    store.reportError(refusal);
+  };
+
+/** Every row the picker offers, filtered by `query` on the name. */
+export function componentRows(
+  doc: Doc3D,
+  library: readonly ComponentRow[],
+  workspace: readonly WorkspaceComponent[] | null,
+  homes: readonly ComponentFileHome[] | null,
+  catalog: readonly LibraryItem[],
+  query: string,
+): ComponentPickRow[] {
+  const q = query.trim().toLowerCase();
+  const rows: ComponentPickRow[] = [];
+  const codeRow = (componentId: string, name: string, section: ComponentPickSection, refusal: string | null): ComponentPickRow => ({
+    key: `code:${componentId}`,
+    name,
+    kind: "code",
+    section,
+    ...(refusal === null ? { add: addRegistered(componentId) } : { refusal, add: refused(refusal) }),
+  });
+
+  // IN THIS PROJECT. A folder-mate the stage cannot draw is left out, as it
+  // always was: the Project's own generated film sits in the fold, and it is
+  // dom by design.
+  const listed = componentsListOf(doc, library);
+  const mates = projectComponents(doc, library, homes)
+    .project.filter((row) => row.host === "three" && !listed.some((r) => r.sel.kind === "code" && r.sel.module === row.id))
+    .map((row): ComponentsListRow => ({ sel: { kind: "code", module: row.id }, name: row.name, refusal: null }));
+  const projectRows = [...listed, ...mates];
+  for (const r of projectRows) {
+    const sel = r.sel;
+    rows.push(
+      sel.kind === "studio"
+        ? { key: `def:${sel.def}`, name: r.name, kind: "studio", section: "project", add: addDefinition(sel.def) }
+        : codeRow(sel.module, r.name, "project", r.refusal),
+    );
+  }
+  const shown = new Set(projectRows.flatMap((r) => (r.sel.kind === "code" ? [r.sel.module] : [])));
+
+  // YOUR LIBRARY. Its code is the registry's own rows, so each is pinned by
+  // its module, recorded or not.
+  for (const entry of libraryComponentsOf(doc, library, workspace, homes, projectRows)) {
+    const where = libraryHomeLabel(entry);
+    if (entry.kind === "code") {
+      shown.add(entry.module);
+      rows.push({ ...codeRow(entry.module, entry.name, "workspace", entry.refusal), key: `ws:${entry.module}`, where });
+      continue;
+    }
+    const c = entry.component;
+    rows.push({
+      key: `ws:${c.id}`,
+      name: c.name,
+      kind: "studio",
+      section: "workspace",
+      where,
+      title: `Adds a copy of ${c.name} to this Project`,
+      add: async (store, partId) => {
+        // ITS BODY LIVES IN ITS HOME PROJECT: copied in first, then pinned.
+        const defId = await store.importWorkspaceComponent(c.id);
+        if (defId !== null) await addDefinition(defId)(store, partId);
+      },
+    });
+  }
+
+  // BUILT IN, by the server's groups ("GROUPING IS SERVER-SIDE",
+  // libraryCatalog.ts).
+  for (const item of catalog) {
+    if (item.source !== "builtin" || !placesAsLayer(item)) continue;
+    rows.push({
+      key: `builtin:${item.id}`,
+      name: promotedBuiltinLabel(item.id) ?? item.displayName ?? item.name,
+      kind: "code",
+      section: "builtin",
+      group: item.group,
+      ...(item.thumb === undefined ? {} : { thumb: item.thumb }),
+      add: addRegistered(item.id),
+    });
+  }
+
+  // THE DAILIES LIBRARY, less what the sections above already show.
+  for (const item of shippedRows(catalog)) {
+    if (!placesAsLayer(item) || (item.installedAs !== undefined && shown.has(item.installedAs))) continue;
+    rows.push({
+      key: `lib:${item.id}`,
+      name: item.displayName ?? item.name,
+      kind: "code",
+      section: "library",
+      ...(item.thumb === undefined ? {} : { thumb: item.thumb }),
+      add: (store, partId) =>
+        landCard(
+          store,
+          partId,
+          // NOT INSTALLED YET, no card can be its: any other component card
+          // the plan holds is a different component.
+          (card) => card.type === "component" && item.installedAs !== undefined && card.component === item.installedAs,
+          () => store.addStoryboardLibraryItem(item.id, partId, { use: "asset", select: false }),
+        ),
+    });
+  }
+  return rows.filter((row) => q === "" || row.name.toLowerCase().includes(q));
+}
+
+/** "effects" -> "Effects": a server group as its sub-head. */
+const groupLabel = (group: string): string => group.charAt(0).toUpperCase() + group.slice(1);
+
+export function ComponentPicker(props: { open: boolean; anchor: RefObject<HTMLElement | null>; onClose(): void; partId: string }) {
+  const store = useStore();
+  const doc = useShotEditor((s) => s.doc);
+  const library = useShotEditor((s) => s.library);
+  const libraryLoaded = useShotEditor((s) => s.libraryLoaded);
+  const workspace = useShotEditor((s) => s.workspaceComponents);
+  const homes = useShotEditor((s) => s.componentHomes);
+  const catalog = useShotEditor((s) => s.libraryCatalog);
+  const catalogLoaded = useShotEditor((s) => s.libraryCatalogLoaded);
+  const [query, setQuery] = useState("");
+  const [adding, setAdding] = useState<string | null>(null);
+
+  // THE REGISTRY AND THE CATALOG, fetched on open as the board fetches them.
+  useEffect(() => {
+    if (!props.open) return;
+    if (!libraryLoaded) void store.refreshLibrary();
+    if (!catalogLoaded) void store.refreshLibraryCatalog();
+  }, [props.open, libraryLoaded, catalogLoaded, store]);
+  // AND THE WORKSPACE'S COMPONENTS AND HOMES, read on every open as
+  // Components reads them once a visit: one added since shows the next time.
+  // A read that fails keeps both as they were, null included, so the section
+  // never says it is reading: it says what it would hold, as Components does.
+  useEffect(() => {
+    if (props.open) void store.refreshWorkspaceComponents();
+  }, [props.open, store]);
+
+  const rows = useMemo(
+    () => (doc === null ? [] : componentRows(doc, library, workspace, homes, catalog, query)),
+    [doc, library, workspace, homes, catalog, query],
+  );
+  if (doc === null) return null;
+  const number = partNumberOf(doc, props.partId) ?? "this shot";
+  const searching = query.trim() !== "";
+
+  const add = (row: ComponentPickRow): void => {
+    if (adding !== null) return;
+    if (row.refusal !== undefined) {
+      store.reportError(row.refusal);
+      return;
+    }
+    setAdding(row.key);
+    void row.add(store, props.partId).finally(() => {
+      setAdding(null);
+      props.onClose();
+    });
+  };
+
+  const list = (of: readonly ComponentPickRow[]) => (
+    <ul className="sketch-picker-rows">
+      {of.map((row) => (
+        <li key={row.key} className="sketch-picker-row">
+          <button
+            type="button"
+            className="sketch-picker-row-main"
+            data-testid={`component-picker-${row.key}`}
+            disabled={adding !== null}
+            aria-disabled={row.refusal === undefined ? undefined : true}
+            aria-label={`Add ${row.name}`}
+            title={row.refusal ?? row.title}
+            onClick={() => add(row)}
+          >
+            <span className="sketch-picker-thumb" aria-hidden="true">
+              {row.thumb === undefined ? COMPONENT_ICON : <img src={row.thumb} alt="" draggable={false} />}
+            </span>
+            <span className="sketch-picker-name">{row.name}</span>
+            {row.where === undefined ? null : <span className="sketch-picker-where">{row.where}</span>}
+            <span className="sketch-picker-kind">
+              <span className="badge">{row.kind === "studio" ? "3D" : "CODE"}</span>
+            </span>
+            <span className="sketch-picker-add" aria-hidden="true">
+              {ADD_ICON}
+            </span>
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+
+  /** One section: its head, then its rows (Built in under its groups), or
+   *  what it would hold. A search hides a section it emptied. */
+  const section = (id: ComponentPickSection, title: string, none: string, hint?: string) => {
+    const of = rows.filter((row) => row.section === id);
+    if (searching && of.length === 0) return null;
+    const groups = id === "builtin" ? [...new Set(of.map((row) => row.group ?? ""))] : null;
+    return (
+      <div className="sketch-picker-section" data-testid={`component-picker-section-${id}`}>
+        <div className="sketch-picker-section-head">
+          <h4 className="caps">{title}</h4>
+          {hint === undefined ? null : <span className="sketch-picker-hint">{hint}</span>}
+        </div>
+        {of.length === 0 ? (
+          <p className="sketch-picker-none">{none}</p>
+        ) : groups === null ? (
+          list(of)
+        ) : (
+          groups.map((group) => (
+            <div key={group}>
+              <h5 className="sketch-picker-group">{groupLabel(group)}</h5>
+              {list(of.filter((row) => (row.group ?? "") === group))}
+            </div>
+          ))
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <Popover open={props.open} anchor={props.anchor} onClose={props.onClose} side="above" gap={10} className="sketch-picker">
+      <section className="sketch-picker-body" aria-label="Add a component" data-testid="component-picker">
+        <header className="sketch-picker-head">
+          <h3 className="sketch-picker-title">Add a component</h3>
+          <button type="button" className="sketch-icon-button" aria-label="Close" onClick={props.onClose}>
+            {CLOSE_ICON}
+          </button>
+        </header>
+        <label className="sketch-picker-search">
+          {SEARCH_ICON}
+          <input value={query} placeholder="Search components" aria-label="Search components" onChange={(event) => setQuery(event.target.value)} />
+        </label>
+        <div className="sketch-picker-sections">
+          {section("project", "In this project", libraryLoaded ? "No components in this Project yet." : "Reading the components…")}
+          {section(
+            "workspace",
+            "Your library",
+            "Code made for no Project, Dailies Library installs and components you add to your library show here.",
+          )}
+          {section("builtin", "Built in", catalogLoaded ? "No built-in components in this build." : "Reading the Library…")}
+          {section(
+            "library",
+            "Dailies Library",
+            catalogLoaded ? "Nothing more to add from the Dailies Library." : "Reading the Library…",
+            "Installs on add",
+          )}
+          {searching && rows.length === 0 ? <p className="sketch-picker-none">{`No component matches “${query.trim()}”.`}</p> : null}
+        </div>
+        <footer className="sketch-picker-foot is-split">
+          <button
+            type="button"
+            className="link-button sketch-picker-browse"
+            onClick={() => {
+              props.onClose();
+              store.setLibraryBrowserOpen(true, "component");
+            }}
+          >
+            Browse the Dailies Library…
+            {CHEVRON_RIGHT_ICON}
+          </button>
+          <span className="sketch-picker-hint">{`Lands as a card on ${number}`}</span>
+        </footer>
+      </section>
+    </Popover>
+  );
+}

package/src/panels/storyboard/shotboard/ImagePicker.tsx

@@ -0,0 +1,145 @@
+// "ADD AN IMAGE" (Paper SB4): the Image tool's picker, hung above its button.
+//
+// Two lists: the Project's pictures (its image and video assets) and the
+// Style's picture cards. A pick lands as an item in the middle of the open
+// sketch through the store's verbs, which pin a requirement card for a
+// Project file the plan does not hold yet (`addSketchItemFromAsset`) and take
+// a Style card as it is (`addSketchItemFromCard`). Upload is the board's own
+// file lane (`addSketchItemsFromFiles`). One picker at a time; a pick, the
+// close button, Escape or a press outside closes it back to Select.
+//
+// `onPick` replaces what a pick does: the image inspector's Replace.
+import { useMemo, useRef, useState } from "react";
+import type { RefObject } from "react";
+import type { Doc3D, ShotAsset } from "@dailies-studio/shot/doc";
+import { Popover, SegmentedControl } from "@dailies-studio/ui";
+import { CLOSE_ICON, IMAGE_UP_ICON, SEARCH_ICON } from "../../../icons.js";
+import { useShotEditor, useStore } from "../../../state/context.js";
+import { useImageThumb } from "../../../state/imageThumbs.js";
+import { styleItemsOf } from "../../../state/storyboardModel.js";
+import { MediaPoster } from "../ReferencePreview.js";
+import { assetUrl } from "../ReferencePreview.js";
+import { ACCEPTED_MEDIA_EXTENSIONS } from "../storyboardDrop.js";
+import { fileNameOf } from "./sketchModel.js";
+
+/** What a pick names: a Project file, or a Style card. */
+export type ImagePick = { kind: "asset"; asset: string } | { kind: "card"; card: string };
+
+interface Tile {
+  key: string;
+  name: string;
+  asset: ShotAsset;
+  pick: ImagePick;
+}
+
+/** The picker's two lists, filtered by `query` on the name. */
+export function imageTiles(doc: Doc3D, query: string): { assets: Tile[]; style: Tile[] } {
+  const q = query.trim().toLowerCase();
+  const hit = (name: string): boolean => q === "" || name.toLowerCase().includes(q);
+  const pictures = (asset: ShotAsset | undefined): asset is ShotAsset => asset?.kind === "image" || asset?.kind === "video";
+  const assets = Object.values(doc.assets)
+    .filter(pictures)
+    .map((asset) => ({ key: asset.id, name: fileNameOf(asset.path), asset, pick: { kind: "asset" as const, asset: asset.id } }));
+  const style = styleItemsOf(doc).flatMap((card) => {
+    const asset = card.type === "asset" ? doc.assets[card.asset] : undefined;
+    return pictures(asset) ? [{ key: card.id, name: card.label, asset, pick: { kind: "card" as const, card: card.id } }] : [];
+  });
+  return { assets: assets.filter((t) => hit(t.name)), style: style.filter((t) => hit(t.name)) };
+}
+
+export function ImagePicker(props: {
+  open: boolean;
+  anchor: RefObject<HTMLElement | null>;
+  onClose(): void;
+  title?: string;
+  onPick?: (pick: ImagePick) => void;
+}) {
+  const store = useStore();
+  const doc = useShotEditor((s) => s.doc);
+  const [query, setQuery] = useState("");
+  const [list, setList] = useState<"assets" | "style">("assets");
+  const upload = useRef<HTMLInputElement>(null);
+  const tiles = useMemo(() => (doc === null ? { assets: [], style: [] } : imageTiles(doc, query)), [doc, query]);
+  if (doc === null) return null;
+  const shown = tiles[list];
+
+  const pick = (choice: ImagePick): void => {
+    props.onClose();
+    if (props.onPick !== undefined) props.onPick(choice);
+    else if (choice.kind === "asset") void store.addSketchItemFromAsset(choice.asset);
+    else void store.addSketchItemFromCard(choice.card);
+  };
+
+  return (
+    <Popover open={props.open} anchor={props.anchor} onClose={props.onClose} side="above" gap={10} className="sketch-picker">
+      <section className="sketch-picker-body" aria-label={props.title ?? "Add an image"} data-testid="image-picker">
+        <header className="sketch-picker-head">
+          <h3 className="sketch-picker-title">{props.title ?? "Add an image"}</h3>
+          <button type="button" className="sketch-icon-button" aria-label="Close" onClick={props.onClose}>
+            {CLOSE_ICON}
+          </button>
+        </header>
+        <label className="sketch-picker-search">
+          {SEARCH_ICON}
+          <input value={query} placeholder="Search images" aria-label="Search images" onChange={(event) => setQuery(event.target.value)} />
+        </label>
+        <SegmentedControl
+          ariaLabel="Where from"
+          value={list}
+          options={[
+            { value: "assets", label: <>Project assets <span className="sketch-picker-count">{tiles.assets.length}</span></>, testId: "image-picker-assets" },
+            { value: "style", label: <>Style <span className="sketch-picker-count">{tiles.style.length}</span></>, testId: "image-picker-style" },
+          ]}
+          onChange={(value) => setList(value === "style" ? "style" : "assets")}
+        />
+        {shown.length === 0 ? (
+          <p className="sketch-picker-none">{list === "style" ? "No Style pictures yet." : "No pictures in this Project yet. Upload one."}</p>
+        ) : (
+          <div className="sketch-picker-grid">
+            {shown.map((tile) => (
+              <PictureTile key={tile.key} tile={tile} onPick={() => pick(tile.pick)} />
+            ))}
+          </div>
+        )}
+        {props.onPick === undefined ? (
+          <footer className="sketch-picker-foot">
+            <button type="button" className="btn" onClick={() => upload.current?.click()}>
+              {IMAGE_UP_ICON}
+              Upload…
+            </button>
+            <span className="sketch-picker-hint">or drop files on the sketch, or paste</span>
+            <input
+              ref={upload}
+              type="file"
+              hidden
+              multiple
+              accept={`${ACCEPTED_MEDIA_EXTENSIONS.join(",")},image/*,video/*`}
+              data-testid="image-picker-upload"
+              onChange={(event) => {
+                const files = Array.from(event.currentTarget.files ?? []);
+                event.currentTarget.value = "";
+                if (files.length === 0) return;
+                props.onClose();
+                void store.addSketchItemsFromFiles(files);
+              }}
+            />
+          </footer>
+        ) : null}
+      </section>
+    </Popover>
+  );
+}
+
+function PictureTile({ tile, onPick }: { tile: Tile; onPick(): void }) {
+  const image = tile.asset.kind === "image";
+  const thumb = useImageThumb(image ? assetUrl(tile.asset.path) : "", image ? tile.asset.hash : "", 106);
+  return (
+    <button type="button" className="sketch-picker-tile" title={tile.name} aria-label={tile.name} onClick={onPick}>
+      {image ? (
+        thumb === null ? null : <img src={thumb} alt="" draggable={false} />
+      ) : (
+        <MediaPoster className="sketch-picker-media" src={assetUrl(tile.asset.path)} atSeconds={null} />
+      )}
+    </button>
+  );
+}