@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/files/AssetsTab.tsx

@@ -0,0 +1,656 @@
+// THE BOARD'S PROJECT ASSETS: everything this Project holds, in the order an
+// author reaches for it. A drop zone, the pictures, the other files, the
+// components, the colors, and the brand's rules in a fold.
+//
+// The rows are the shared resource parts (`resourceParts`), and the verbs
+// are the store's, so no panel can disagree on what a row is or what Remove
+// takes out. The board's right column shows it (`boardRightPanel` "assets"),
+// opened from the board's + menu.
+//
+// ── THE BOARD NEVER WRITES INTO A SHOT ───────────────────────────────────
+//
+// The board plans and the Studio makes, so on the board "Use in shot" is
+// refused with `placeInShotRefusal`'s sentence. On a shot board a picture's
+// button is "Add to sketch" instead (`addSketchItemFromAsset`).
+//
+// ── A FILE DRAGS ONLY WHERE A TARGET IS ON SCREEN ───────────────────────
+//
+// `assetDropTargetShown`: the board's canvas and its shot cards, which pin
+// the file as a card. A font never drags: it is applied to type, never placed.
+//
+// ── A LINK IS A PIN, A MEDIA LINK IS REFUSED ────────────────────────────
+//
+// A page address dropped or pasted on the zone becomes a Whole film link card
+// (`addLinkReference`, lane null). Links are never fetched, so an address
+// that names a media file is refused by name: its bytes would have to come
+// from somewhere, and the only honest source is the author's own download.
+import { useEffect, useId, useRef, useState } from "react";
+import type { ClipboardEvent, DragEvent, ReactNode } from "react";
+import { effectiveResources, planAssetRemoval, soundtrackOwner } from "@dailies-studio/shot/doc";
+import type { Doc3D, ScopedBrandItem3D, ShotAsset } from "@dailies-studio/shot/doc";
+import { loadPeaks } from "@dailies-studio/timeline";
+import { formatBytes } from "../../api.js";
+import { SEARCH_ICON } from "../../icons.js";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { useImageThumb } from "../../state/imageThumbs.js";
+import { projectComponents } from "../../state/projectComponents.js";
+import { assetPlaceTarget, placeInShotRefusal } from "../../state/store.js";
+import { inShotContext } from "../../state/viewMode.js";
+import { DOM_NOT_SUPPORTED, shotBoardOf } from "../../state/workspace.js";
+import { formatDuration } from "../timeline/model.js";
+import { STORYBOARD_MIME, urlFromTransfer } from "../storyboard/storyboardDrop.js";
+import { ASSET_DROP_COPY, ASSET_MIME, assetDropTargetShown, writeAssetDrag } from "./assetDrag.js";
+import {
+  BrandRow,
+  NameOf,
+  ResourceForm,
+  ResourceLane,
+  UPLOAD_ACCEPT,
+  actionForResource,
+  assetGlyph,
+  assetUsedInComposition,
+  fileNameOf,
+  selectedLayers,
+} from "./resourceParts.js";
+
+/**
+ * The board's Project assets panel in the right column: a head that names it
+ * and closes it, a search, and the tab under one scroller. A viewer reads
+ * every row locked.
+ */
+export function BoardAssets() {
+  const store = useStore();
+  const readOnly = useShotEditor((s) => s.readOnly);
+  const [query, setQuery] = useState("");
+  return (
+    <section className="board-assets" data-testid="board-assets" aria-label="Project assets">
+      <header className="board-assets-head">
+        <h2 className="board-assets-title">Project assets</h2>
+        <button
+          type="button"
+          className="btn is-icon"
+          data-testid="board-assets-close"
+          aria-label="Close Project assets"
+          title="Close Project assets"
+          onClick={() => store.setBoardAssetsOpen(false)}
+        >
+          ×
+        </button>
+      </header>
+      <div className="board-assets-search">
+        <label className="search-field">
+          {SEARCH_ICON}
+          <input
+            type="search"
+            value={query}
+            placeholder="Search files"
+            aria-label="Search files"
+            onChange={(event) => setQuery(event.target.value)}
+          />
+        </label>
+      </div>
+      <div className="rail-scroll">
+        <AssetsTab query={query} readOnly={readOnly} />
+      </div>
+    </section>
+  );
+}
+
+export function AssetsTab({
+  readOnly = false,
+  query = "",
+}: {
+  readOnly?: boolean;
+  /** The rail's search box. Filters every lane by the name the author sees. */
+  query?: string;
+}) {
+  const store = useStore();
+  const doc = useShotEditor((state) => state.doc);
+  const name = useShotEditor((state) => state.name);
+  const usage = useShotEditor((state) => state.assetUsage);
+  const library = useShotEditor((state) => state.library);
+  const libraryLoaded = useShotEditor((state) => state.libraryLoaded);
+  const homes = useShotEditor((state) => state.componentHomes);
+  // The Shot this tab works on. The board enters none, so a Shot the Studio
+  // left open behind it is not one: no "This shot only" lane, and no Apply
+  // onto layers selected there.
+  const enteredScene = useShotEditor((state) => (state.storyboardOpen ? null : state.enteredScene));
+  const editingDef = useShotEditor((state) => state.editingDef);
+  const selection = useShotEditor((state) => state.selection);
+  const dropShown = useShotEditor(assetDropTargetShown);
+  // The target's NAME, a string or null, so the selector allocates nothing.
+  const targetName = useShotEditor((state) => {
+    const id = assetPlaceTarget(state);
+    return id === null ? null : (state.doc?.scenesById[id]?.name ?? null);
+  });
+  // Why Use would refuse. One hidden copy that every Use points at, since the
+  // reason is the tab's state, not a row's.
+  const refusal = useShotEditor(placeInShotRefusal);
+  // A sound joins the Shot's audio, so a leaf isolation does not refuse it.
+  // It is either `refusal` or null, so the one hidden copy still describes it.
+  const soundRefusal = useShotEditor((state) => placeInShotRefusal(state, "sound"));
+  const refusalId = useId();
+  // A shot board's pictures go on its sketch.
+  const sketching = useShotEditor((state) => shotBoardOf(state) !== null);
+  const [form, setForm] = useState<"color" | "guidance" | null>(null);
+
+  // The meter is server truth, refreshed on entry rather than trusted stale.
+  useEffect(() => {
+    if (name !== null) void store.refreshAssetUsage();
+  }, [name, store]);
+  // The registry rows the Components lane lists are the Project's own
+  // (`projectComponents`), so the registry has to be read once.
+  useEffect(() => {
+    if (!libraryLoaded) void store.refreshLibrary();
+  }, [libraryLoaded, store]);
+  // And which Project holds which file (`componentHomes`), or a folder-mate
+  // another Project lists or uses folds in here as this Project's.
+  useEffect(() => {
+    if (homes === null) void store.refreshWorkspaceComponents();
+  }, [homes, store]);
+
+  if (doc === null) return null;
+  const needle = query.trim().toLowerCase();
+  const matches = (text: string): boolean => needle === "" || text.toLowerCase().includes(needle);
+  const report = (error: unknown): void => store.reportError(error instanceof Error ? error.message : String(error));
+
+  const assets = Object.values(doc.assets);
+  const unused = new Set(planAssetRemoval(doc).remove);
+  const sizeByHash = new Map((usage?.assets ?? []).map((a) => [a.hash, a.size]));
+  // Gone from storage. The stage's notice offers Relink and Remove.
+  const missing = new Set((usage?.missing ?? []).map((row) => row.id));
+  const shownAssets = assets.filter((asset) => matches(fileNameOf(asset)));
+  const images = shownAssets.filter((asset) => asset.kind === "image");
+  const files = shownAssets.filter((asset) => asset.kind !== "image");
+
+  // The Project's rows, whatever Shot is entered, and the entered Shot's own
+  // in their own lane.
+  const project = effectiveResources(doc, null).branding;
+  const shot = enteredScene === null ? undefined : doc.scenesById[enteredScene];
+  const shotBranding =
+    shot === undefined ? [] : effectiveResources(doc, enteredScene).branding.filter((item) => item.scope === "shot");
+  const shadowedKeys = new Set(shotBranding.map((item) => item.key));
+  const brandAssets = new Set(
+    [...project, ...shotBranding].flatMap((item) => (item.type === "asset" ? [item.asset] : [])),
+  );
+  const colors = project.filter((item) => item.type === "color" && matches(item.label));
+  const rules = project.filter((item) => item.type !== "color" && matches(item.label));
+  const shotRows = shotBranding.filter((item) => matches(item.label));
+
+  const definitions = Object.values(doc.components ?? {}).filter((def) => matches(def.name));
+  const registry = projectComponents(doc, library, homes).project.filter((row) => matches(row.name));
+
+  const inShot = inShotContext({ enteredScene, editingDef });
+  const selected = selectedLayers(doc, editingDef ?? enteredScene, selection);
+
+  /** Not on a soundtrack whose video stays: that link would name a file that
+   *  is gone. It leaves with its video. */
+  const removable = (asset: ShotAsset): boolean =>
+    !readOnly && unused.has(asset.id) && soundtrackOwner(doc, asset.id) === null;
+  const removeButton = (asset: ShotAsset): ReactNode => (
+    <button
+      type="button"
+      className="assets-tab-remove"
+      aria-label={`Remove ${asset.path} from this Project`}
+      title="Remove from this Project"
+      onClick={() => store.removeUnusedAssets([asset.id])}
+    >
+      ×
+    </button>
+  );
+  /** "Use in shot", or a refusal that says why: `aria-disabled` rather than
+   *  `disabled`, so Tab still reaches it and the click reports the sentence. */
+  const useButton = (
+    label: string,
+    onUse: () => void,
+    reason: string | null = refusal,
+    reasonId: string = refusalId,
+  ): ReactNode =>
+    readOnly ? null : (
+      <button
+        type="button"
+        className="btn assets-tab-use"
+        aria-label={`Use in shot: ${label}${targetName === null ? "" : `, ${targetName}`}`}
+        aria-disabled={reason === null ? undefined : "true"}
+        aria-describedby={reason === null ? undefined : reasonId}
+        title={reason ?? `Use in ${targetName}`}
+        onClick={() => {
+          if (reason !== null && reason !== refusal) {
+            store.reportError(reason);
+            return;
+          }
+          onUse();
+        }}
+      >
+        Use in shot
+      </button>
+    );
+  /** "Add to sketch" on a shot board, for an image or a video; else Use. */
+  const useOrSketch = (asset: ShotAsset, reason: string | null = refusal): ReactNode =>
+    sketching && (asset.kind === "image" || asset.kind === "video") ? (
+      readOnly ? null : (
+        <button
+          type="button"
+          className="btn assets-tab-use"
+          aria-label={`Add to sketch: ${fileNameOf(asset)}`}
+          onClick={() => void store.addSketchItemFromAsset(asset.id)}
+        >
+          Add to sketch
+        </button>
+      )
+    ) : (
+      useButton(fileNameOf(asset), () => void store.useAssetInShot(asset.id), reason)
+    );
+  const dragProps = (asset: ShotAsset) => {
+    // READ-ONLY IS NOT DRAGGABLE, a font never is, and neither is a file
+    // with no drop target on screen.
+    const draggable = !readOnly && dropShown && asset.kind !== "font";
+    return {
+      draggable,
+      ...(draggable
+        ? {
+            title: ASSET_DROP_COPY,
+            onDragStart: (event: DragEvent<HTMLElement>) => {
+              if (event.dataTransfer !== null) writeAssetDrag(event.dataTransfer, { asset: asset.id });
+            },
+          }
+        : {}),
+    };
+  };
+
+  const brandRow = (item: ScopedBrandItem3D) => {
+    const asset = item.type === "asset" ? doc.assets[item.asset] : undefined;
+    return (
+      <BrandRow
+        key={item.id}
+        item={item}
+        {...(asset === undefined ? {} : { asset })}
+        used={asset === undefined ? false : assetUsedInComposition(doc, asset.id)}
+        readOnly={readOnly}
+        canOverride={item.scope === "project" && shot !== undefined && !shadowedKeys.has(item.key)}
+        shadowed={item.scope === "project" && shadowedKeys.has(item.key)}
+        action={actionForResource(item, asset, selected, inShot)}
+        onUse={() => void store.useBrandResource(item.id).catch(report)}
+        onOverride={() => store.overrideBrandResource(item.id)}
+        onRemove={() => store.removeResource("branding", item.id, item.scope)}
+      />
+    );
+  };
+
+  return (
+    <div className={`assets-tab resource-stack${readOnly ? " is-readonly" : ""}`} data-testid="assets-tab">
+      {/* `hidden` keeps it off screen, and `aria-describedby` still reads it. */}
+      {refusal === null ? null : (
+        <span id={refusalId} hidden>
+          {refusal}
+        </span>
+      )}
+      {readOnly ? null : <AssetsDropZone />}
+
+      <div className="assets-tab-head">
+        {usage === null ? null : (
+          <span className="assets-tab-meter" data-testid="assets-tab-meter">
+            {formatBytes(usage.limitBytes - usage.remainingBytes)} / {formatBytes(usage.limitBytes)}
+          </span>
+        )}
+        {readOnly || unused.size === 0 ? null : (
+          <button
+            type="button"
+            title="Take the files nothing in this Project uses out of it. Undo brings them back."
+            onClick={() => store.removeUnusedAssets()}
+          >
+            Remove unused ({unused.size})
+          </button>
+        )}
+      </div>
+
+      <ResourceLane title="Images" count={images.length} readOnly={false} actions={null}>
+        {images.length === 0 ? (
+          <div className="resource-empty">{needle === "" ? "No images yet." : "No image names match this search."}</div>
+        ) : (
+          <ul className="assets-tab-images" data-testid="assets-tab-images">
+            {images.map((asset) => (
+              <li key={asset.id} className="assets-tab-image" data-asset={asset.id} {...dragProps(asset)}>
+                <span className="assets-tab-thumb">
+                  {/* Not draggable itself, so the drag is the TILE's and carries
+                      the registry id rather than the image's URL. */}
+                  <AssetThumb asset={asset} />
+                  {brandAssets.has(asset.id) ? <span className="assets-tab-chip is-brand">Brand</span> : null}
+                  {unused.has(asset.id) ? <span className="assets-tab-chip">Unused</span> : null}
+                  {missing.has(asset.id) ? <span className="assets-tab-chip">File missing</span> : null}
+                  {removable(asset) ? removeButton(asset) : null}
+                </span>
+                <NameOf asset={asset} bytes={sizeByHash.get(asset.hash)} />
+                {useOrSketch(asset)}
+              </li>
+            ))}
+          </ul>
+        )}
+      </ResourceLane>
+
+      <ResourceLane title="Files" count={files.length} readOnly={false} actions={null}>
+        {files.length === 0 ? (
+          <div className="resource-empty">{needle === "" ? "No other files yet." : "No file names match this search."}</div>
+        ) : (
+          <ul className="resource-list" data-testid="assets-tab-files">
+            {files.map((asset) => (
+              <li key={asset.id} className="resource-row assets-tab-file" data-asset={asset.id} {...dragProps(asset)}>
+                <div className="resource-asset-row">
+                  <span className="resource-thumb is-kind" aria-hidden="true">
+                    {assetGlyph(asset)}
+                  </span>
+                  <NameOf asset={asset} />
+                  <FileMeta doc={doc} asset={asset} />
+                  {brandAssets.has(asset.id) ? <span className="resource-badge">Brand</span> : null}
+                  {missing.has(asset.id) ? <span className="resource-badge">File missing</span> : null}
+                  {unused.has(asset.id) ? (
+                    <span className="resource-badge">Unused</span>
+                  ) : assetUsedInComposition(doc, asset.id) ? (
+                    <span className="resource-used">Used</span>
+                  ) : null}
+                  {sizeByHash.has(asset.hash) ? (
+                    <span className="asset-size">{formatBytes(sizeByHash.get(asset.hash)!)}</span>
+                  ) : null}
+                  {asset.kind === "font" ? null : useOrSketch(asset, asset.kind === "audio" ? soundRefusal : refusal)}
+                  {removable(asset) ? removeButton(asset) : null}
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </ResourceLane>
+
+      <ResourceLane
+        title="Components"
+        count={definitions.length + registry.length}
+        readOnly={false}
+        actions={
+          readOnly ? null : (
+            <div className="resource-add-actions">
+              <button type="button" onClick={() => store.setLibraryBrowserOpen(true, "component")}>
+                + From Library
+              </button>
+            </div>
+          )
+        }
+      >
+        {definitions.length + registry.length === 0 ? (
+          <div className="resource-empty">
+            {needle === "" ? "No components in this Project yet." : "No component names match this search."}
+          </div>
+        ) : (
+          <ul className="resource-list" data-testid="assets-tab-components">
+            {definitions.map((def) => (
+              <li key={def.id} className="resource-row" data-component={def.id}>
+                <div className="resource-asset-row">
+                  <span className="resource-thumb is-kind" aria-hidden="true">
+                    {"</>"}
+                  </span>
+                  <span className="resource-label">{def.name}</span>
+                  <span className="resource-badge">Project</span>
+                  {useButton(def.name, () => void store.useComponentInShot(def.id))}
+                </div>
+              </li>
+            ))}
+            {registry.map((row) => (
+              <li key={row.id} className="resource-row" data-component={row.id}>
+                <div className="resource-asset-row">
+                  <span className="resource-thumb is-kind" aria-hidden="true">
+                    {"</>"}
+                  </span>
+                  <span className="resource-label" title={row.rel}>
+                    {row.name}
+                  </span>
+                  <span className="resource-badge">{row.host === "three" ? "3D" : "2D"}</span>
+                  {row.host === "three" ? (
+                    useButton(row.name, () => void store.useComponentInShot(row.id))
+                  ) : (
+                    <>
+                      <span id={`${refusalId}-${row.id}`} hidden>
+                        {DOM_NOT_SUPPORTED}
+                      </span>
+                      {useButton(
+                        row.name,
+                        () => void store.useComponentInShot(row.id),
+                        DOM_NOT_SUPPORTED,
+                        `${refusalId}-${row.id}`,
+                      )}
+                    </>
+                  )}
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </ResourceLane>
+
+      <ResourceLane title="Colors" count={colors.length} readOnly={false} actions={null}>
+        <ul className="assets-tab-swatches" data-testid="assets-tab-colors">
+          {colors.map((item) =>
+            item.type !== "color" ? null : (
+              <li key={item.id} className="assets-tab-swatch" data-resource={item.id} title={`${item.label} ${item.value}`}>
+                <span className="assets-tab-swatch-chip" style={{ backgroundColor: item.value }} aria-hidden="true" />
+                <span className="assets-tab-swatch-label">{item.label}</span>
+                {readOnly ? null : (
+                  <button
+                    type="button"
+                    className="assets-tab-remove"
+                    aria-label={`Remove ${item.label}`}
+                    onClick={() => store.removeResource("branding", item.id, item.scope)}
+                  >
+                    ×
+                  </button>
+                )}
+              </li>
+            ),
+          )}
+          {readOnly ? null : (
+            <li>
+              <button
+                type="button"
+                className="assets-tab-swatch-add"
+                aria-label="Add a color"
+                aria-expanded={form === "color"}
+                onClick={() => setForm(form === "color" ? null : "color")}
+              >
+                +
+              </button>
+            </li>
+          )}
+        </ul>
+        {form === "color" ? (
+          <ResourceForm
+            kind="color"
+            onCancel={() => setForm(null)}
+            onSubmit={(label, value) => {
+              store.addBrandColor(label, value, "project");
+              setForm(null);
+            }}
+          />
+        ) : null}
+      </ResourceLane>
+
+      <ResourceLane
+        title="Brand rules"
+        count={rules.length}
+        readOnly={readOnly}
+        foldable
+        actions={
+          readOnly ? null : (
+            <div className="resource-add-actions">
+              <button type="button" onClick={() => setForm(form === "guidance" ? null : "guidance")}>
+                + Rule
+              </button>
+            </div>
+          )
+        }
+      >
+        {form === "guidance" ? (
+          <ResourceForm
+            kind="guidance"
+            onCancel={() => setForm(null)}
+            onSubmit={(label, value) => {
+              store.addBrandGuidance(label, value, "project");
+              setForm(null);
+            }}
+          />
+        ) : null}
+        {rules.length === 0 ? (
+          <div className="resource-empty">No brand rules yet.</div>
+        ) : (
+          <ul className="resource-list" data-testid="assets-tab-rules">
+            {rules.map(brandRow)}
+          </ul>
+        )}
+      </ResourceLane>
+
+      {/* ONLY WHEN THERE IS SOMETHING IN IT. */}
+      {shot === undefined || shotRows.length === 0 ? null : (
+        <ResourceLane title="This shot only" count={shotRows.length} meta={shot.name} readOnly={readOnly} actions={null}>
+          <ul className="resource-list" data-testid="assets-tab-shot-only">
+            {shotRows.map(brandRow)}
+          </ul>
+        </ResourceLane>
+      )}
+    </div>
+  );
+}
+
+/**
+ * The dashed zone at the top of the tab: a picker for many files, a drop of
+ * many files, and a paste. Files upload one at a time, in order, each its own
+ * undo entry (`addAsset`). With no files, a page address is a Whole film link
+ * card. Our own drags (an asset, a board card) are not taken.
+ */
+export function AssetsDropZone() {
+  const store = useStore();
+  const picker = useRef<HTMLInputElement | null>(null);
+  const [uploading, setUploading] = useState<string | null>(null);
+  const [over, setOver] = useState(false);
+
+  const upload = async (picked: readonly File[]): Promise<void> => {
+    for (const file of picked) {
+      setUploading(file.name);
+      try {
+        await store.addAsset(file);
+      } catch (error) {
+        store.reportError(error instanceof Error ? error.message : String(error));
+      }
+    }
+    setUploading(null);
+  };
+  const take = (transfer: DataTransfer): boolean => {
+    const types = Array.from(transfer.types ?? []);
+    if (types.includes(ASSET_MIME) || types.includes(STORYBOARD_MIME)) return false;
+    const picked = Array.from(transfer.files ?? []);
+    if (picked.length > 0) {
+      void upload(picked);
+      return true;
+    }
+    const url = urlFromTransfer(transfer);
+    if (url === null) return false;
+    store.addLinkReference(url, null, { select: false });
+    return true;
+  };
+  const accepts = (event: DragEvent<HTMLElement>): boolean => {
+    const types = Array.from(event.dataTransfer?.types ?? []);
+    if (types.includes(ASSET_MIME) || types.includes(STORYBOARD_MIME)) return false;
+    return types.includes("Files") || types.includes("text/uri-list") || types.includes("text/plain");
+  };
+
+  return (
+    <div
+      className={`assets-drop-zone${over ? " is-over" : ""}`}
+      data-testid="assets-drop-zone"
+      onDragOver={(event) => {
+        if (!accepts(event)) return;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = "copy";
+        setOver(true);
+      }}
+      onDragLeave={() => setOver(false)}
+      onDrop={(event) => {
+        setOver(false);
+        if (!accepts(event)) return;
+        event.preventDefault();
+        // A drop is on purpose, so one that adds nothing says why. A paste
+        // that adds nothing stays quiet: it falls through to the field.
+        if (!take(event.dataTransfer)) store.reportError("Drop files here, or an https link.");
+      }}
+      onPaste={(event: ClipboardEvent<HTMLElement>) => {
+        if (take(event.clipboardData)) event.preventDefault();
+      }}
+    >
+      <input
+        ref={picker}
+        type="file"
+        hidden
+        multiple
+        accept={UPLOAD_ACCEPT}
+        data-testid="assets-drop-input"
+        onChange={(event) => {
+          const picked = Array.from(event.target.files ?? []);
+          event.target.value = "";
+          void upload(picked);
+        }}
+      />
+      <button type="button" onClick={() => picker.current?.click()} disabled={uploading !== null}>
+        Add files
+      </button>
+      <span className="assets-drop-zone-hint">or drop files, or paste a link</span>
+      {uploading === null ? null : <span className="resource-pending">Uploading {uploading}…</span>}
+    </div>
+  );
+}
+
+/** A 100px tile's picture from the shared thumbnail cache (`useImageThumb`),
+ *  never the full-size original decoded for a tile. */
+function AssetThumb({ asset }: { asset: ShotAsset }) {
+  const thumb = useImageThumb(`/studio/assets/${encodeURIComponent(asset.path)}`, asset.hash, 100);
+  return thumb === null ? null : <img src={thumb} alt="" loading="lazy" draggable={false} />;
+}
+
+/**
+ * What a file row says after its name: a video's or a sound's length
+ * (`formatDuration`), a font's family, a model's format.
+ *
+ * A length is the probe's (`media.durationSeconds`, written at import), else
+ * for a sound the decode the timeline shares (`loadPeaks`, one per path). Its
+ * 0 is "could not decode", which is not a length, so it prints nothing.
+ */
+function FileMeta({ doc, asset }: { doc: Doc3D; asset: ShotAsset }) {
+  const probed = asset.media?.durationSeconds;
+  const [decoded, setDecoded] = useState<number | null>(null);
+  useEffect(() => {
+    if (asset.kind !== "audio" || probed !== undefined) return;
+    let alive = true;
+    loadPeaks(asset)
+      .then((data) => {
+        if (alive && data.sourceSeconds > 0) setDecoded(data.sourceSeconds);
+      })
+      .catch(() => {});
+    return () => {
+      alive = false;
+    };
+  }, [asset, probed]);
+
+  let text: string | null = null;
+  if (asset.kind === "video" || asset.kind === "audio") {
+    const seconds = probed ?? decoded;
+    text = seconds === null ? null : formatDuration(seconds);
+  } else if (asset.kind === "font") {
+    text = fontFamilyOf(doc, asset);
+  } else if (asset.kind === "model") {
+    text = /\.([a-z0-9]+)$/i.exec(asset.path)?.[1]?.toUpperCase() ?? null;
+  }
+  return text === null ? null : <span className="assets-tab-meta">{text}</span>;
+}
+
+/** A brand row's family for this font, else the file's stem. */
+function fontFamilyOf(doc: Doc3D, asset: ShotAsset): string {
+  const named = effectiveResources(doc, null).branding.find(
+    (item) => item.type === "asset" && item.asset === asset.id && item.fontFamily !== undefined,
+  );
+  if (named?.type === "asset" && named.fontFamily !== undefined) return named.fontFamily;
+  return fileNameOf(asset).replace(/\.[^.]+$/, "");
+}