@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/share/ShareComponentDialog.tsx

@@ -0,0 +1,247 @@
+// Share (C3): a share link and Publish to Community for the open component.
+//
+// Studio-made components only. A code component never leaves its workspace,
+// and the dialog says so instead of offering anything.
+//
+// Every write that lists a component happens on the main host, so both
+// buttons open `/c/share` there in a new tab with the fields filled in (this
+// host 302s `/c/*` to the main one, as it does `/market`). This dialog only
+// reads: the owner line comes from this host's `owned` route.
+import { useEffect, useState } from "react";
+import { Dialog } from "@dailies-studio/ui";
+import * as api from "../../api.js";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { isCloudWorkspace } from "../../state/posterCapture.js";
+import { useSubjectRow, useSubjectVersions } from "../studio/componentParts.js";
+
+/** Lane K's "Browse Community": the component shelf on the main host. */
+export function communityBrowseHref(): string {
+  return "/market?type=components";
+}
+
+export interface ComponentShareFields {
+  workspace: string;
+  component: string;
+  name: string;
+  tags: readonly string[];
+  remixable: boolean;
+  action: "link" | "publish";
+}
+
+/** `/c/share` with the dialog's fields: the Community app's share step reads
+ *  exactly these (community router.ts `component-share`). */
+export function componentShareHref(f: ComponentShareFields): string {
+  const params = new URLSearchParams({ ws: f.workspace, component: f.component });
+  if (f.name.trim() !== "") params.set("name", f.name.trim());
+  if (f.tags.length > 0) params.set("tags", f.tags.join(","));
+  params.set("remix", f.remixable ? "1" : "0");
+  params.set("do", f.action);
+  return `/c/share?${params.toString()}`;
+}
+
+/** What a person typed in Tags, as the server's tag grammar wants it. */
+export function tagsOf(text: string): string[] {
+  const out: string[] = [];
+  for (const raw of text.split(",")) {
+    const tag = raw.trim().toLowerCase().replace(/\s+/g, "-");
+    if (tag !== "" && !out.includes(tag)) out.push(tag);
+  }
+  return out.slice(0, 8);
+}
+
+/** "3 people added v2", or null when nobody has. */
+export function addedLine(listing: api.OwnedComponentListing | null): string | null {
+  if (listing === null || listing.version === null) return null;
+  const n = listing.people.find((p) => p.version === listing.version)?.people ?? 0;
+  if (n === 0) return null;
+  return `${n} ${n === 1 ? "person" : "people"} added v${listing.version}`;
+}
+
+const HOSTED_ONLY = "Community is part of the hosted studio.";
+
+export function ShareComponentDialog() {
+  const store = useStore();
+  const open = useShotEditor((s) => s.shareComponentOpen);
+  const projectName = useShotEditor((s) => s.name);
+  const codeComponent = useShotEditor((s) => s.codeComponent);
+  const row = useSubjectRow();
+  const versions = useSubjectVersions();
+  const hosted = isCloudWorkspace();
+
+  const [workspace, setWorkspace] = useState<string | null>(null);
+  const [owned, setOwned] = useState<api.OwnedComponentListing | null>(null);
+  const [name, setName] = useState("");
+  const [tags, setTags] = useState("");
+  const [remixable, setRemixable] = useState(true);
+
+  const isCode = codeComponent !== null || row?.kind === "code";
+  const componentId = row?.kind === "studio" ? row.id : null;
+
+  // Fresh fields each time it opens, from the listing when there is one.
+  useEffect(() => {
+    if (!open) return;
+    setName(row?.name ?? "");
+    setTags("");
+    setRemixable(true);
+    setOwned(null);
+  }, [open, row?.name]);
+
+  useEffect(() => {
+    if (!open || !hosted || componentId === null) return;
+    let live = true;
+    api
+      .ownedComponentListing(componentId)
+      .then((listing) => {
+        if (!live) return;
+        setOwned(listing);
+        if (listing !== null) setName(listing.name);
+      })
+      .catch(() => {});
+    return () => {
+      live = false;
+    };
+  }, [open, hosted, componentId]);
+
+  // The workspace this tab is in, so `/c/share` can refuse a session that sits
+  // in another one rather than listing the wrong component.
+  useEffect(() => {
+    if (!open || !hosted || projectName === null) return;
+    let live = true;
+    void fetch(`/auth/me?project=${encodeURIComponent(`shot/${projectName}`)}`, { credentials: "same-origin" })
+      .then((res) => (res.ok ? (res.json() as Promise<{ workspace?: { id?: string } | null }>) : null))
+      .then((me) => {
+        const id = me?.workspace?.id;
+        if (live && typeof id === "string") setWorkspace(id);
+      })
+      .catch(() => {});
+    return () => {
+      live = false;
+    };
+  }, [open, hosted, projectName]);
+
+  const close = (): void => store.closeShareComponent();
+  const latest = versions?.[0];
+  const version = row?.version ?? latest?.version ?? null;
+  const propCount = latest?.propKeys.length ?? 0;
+  const ready = hosted && componentId !== null && workspace !== null;
+  const reason = !hosted
+    ? HOSTED_ONLY
+    : componentId === null
+      ? "Save a version of this component first."
+      : workspace === null
+        ? "Checking your workspace…"
+        : null;
+
+  const go = (action: "link" | "publish"): void => {
+    if (!ready || componentId === null || workspace === null) return;
+    const href = componentShareHref({ workspace, component: componentId, name, tags: tagsOf(tags), remixable, action });
+    window.open(href, "_blank", "noopener");
+  };
+
+  const status =
+    owned === null
+      ? null
+      : [owned.status === "published" ? "On Community" : "Shared by link", addedLine(owned)]
+          .filter((s): s is string => s !== null)
+          .join(" · ");
+
+  return (
+    <Dialog
+      open={open}
+      className="share-component"
+      title="Share component"
+      onClose={close}
+      actions={
+        <button type="button" className="btn" data-testid="share-component-close" onClick={close}>
+          Close
+        </button>
+      }
+    >
+      {isCode ? (
+        <p className="dialog-message" data-testid="share-component-code">
+          Code components stay in your workspace.
+        </p>
+      ) : (
+        <div className="share-component-body" data-testid="share-component-body">
+          {status !== null && (
+            <p className="share-component-status" data-testid="share-component-status">
+              {status}
+            </p>
+          )}
+
+          <section className="share-component-section" aria-label="Share link">
+            <h3 className="share-component-heading">Share link</h3>
+            <p className="dialog-message">Anyone with the link can: View and remix</p>
+            <button
+              type="button"
+              className="btn"
+              data-testid="share-component-link"
+              disabled={!ready}
+              title={reason ?? undefined}
+              onClick={() => go("link")}
+            >
+              Copy link
+            </button>
+          </section>
+
+          <section className="share-component-section" aria-label="Publish to Community">
+            <h3 className="share-component-heading">Publish to Community</h3>
+            <label className="dialog-field">
+              <span className="dialog-label">Name</span>
+              <input
+                className="text-input is-field"
+                value={name}
+                maxLength={80}
+                onChange={(e) => setName(e.currentTarget.value)}
+              />
+            </label>
+            <label className="dialog-field">
+              <span className="dialog-label">Tags</span>
+              <input
+                className="text-input is-field"
+                value={tags}
+                placeholder="title, lower-third"
+                onChange={(e) => setTags(e.currentTarget.value)}
+              />
+            </label>
+            <label className="share-component-check">
+              <input
+                className="checkbox"
+                type="checkbox"
+                checked={remixable}
+                onChange={(e) => setRemixable(e.currentTarget.checked)}
+              />
+              Others can remix
+            </label>
+            <div className="share-component-contents" data-testid="share-component-contents">
+              <p>
+                <span className="dialog-label">Included:</span> Component
+                {version === null ? "" : ` v${version}`}, the images, {propCount} prop{propCount === 1 ? "" : "s"}
+              </p>
+              <p>
+                <span className="dialog-label">Not included:</span> shots, board, notes, other components
+              </p>
+            </div>
+            <button
+              type="button"
+              className="btn is-primary"
+              data-testid="share-component-publish"
+              disabled={!ready}
+              title={reason ?? undefined}
+              onClick={() => go("publish")}
+            >
+              Publish…
+            </button>
+            <p className="share-component-foot">Later edits stay private until you publish again</p>
+          </section>
+
+          {reason !== null && reason !== "Checking your workspace…" && (
+            <p className="dialog-message share-component-reason" data-testid="share-component-reason">
+              {reason}
+            </p>
+          )}
+        </div>
+      )}
+    </Dialog>
+  );
+}

package/src/panels/stage/StageMenu.tsx

@@ -12,8 +12,9 @@
 // and a different EVENT. The effect keys on the object, so the store minting a
 // fresh one per press is what makes the menu open again rather than once.
 import { useEffect } from "react";
-import { useContextMenu } from "@dailies-studio/ui";
-import { layerMenuEntries, menuTargetsFor } from "../../state/menu.js";
+import { useContextMenu, usePrompt } from "@dailies-studio/ui";
+import { homeOf, parentOf } from "@dailies-studio/shot/doc";
+import { layerMenuEntries, menuTargetsFor, pathKeyMenuEntries } from "../../state/menu.js";
 import { useShotEditor, useStore } from "../../state/context.js";
 
 export function StageMenu() {
@@ -21,6 +22,7 @@ export function StageMenu() {
   const request = useShotEditor((s) => s.stageMenu);
   const menu = useContextMenu();
   const { open, close } = menu;
+  const { prompt, dialog } = usePrompt();
   useEffect(() => {
     if (request === null) {
       close();
@@ -30,9 +32,37 @@ export function StageMenu() {
     // applied this press's selection policy by the time the mailbox lands, so
     // the entries describe what is actually selected rather than what was.
     const state = store.getState();
-    const entries = layerMenuEntries(store, state, menuTargetsFor(state, state.selection));
+    // A motion path dot's menu is that key's own.
+    if (request.pathKey !== undefined) {
+      open(request.at, pathKeyMenuEntries(store, state, request.pathKey));
+      return;
+    }
+    // The layer under the pointer, or the selected container holding it: the
+    // one "Use as mask" turns into the mask (Paper page 25).
+    const container = state.editingDef ?? state.sceneId;
+    const home = state.doc === null || container === null ? null : homeOf(state.doc, container);
+    let subject: string | null = request.hits[0] ?? null;
+    while (subject !== null && home !== null && !state.selection.includes(subject)) subject = parentOf(home, subject);
+    // Rename on the stage asks for the name, the app menu's way: the canvas
+    // has no label to edit in place.
+    const entries = layerMenuEntries(store, state, menuTargetsFor(state, state.selection), {
+      ...(subject === null || home === null ? {} : { subject }),
+      onRename: (layerId) => {
+        const s = store.getState();
+        const container = s.editingDef ?? s.sceneId;
+        const layer = s.doc === null || container === null ? undefined : homeOf(s.doc, container)?.layersById[layerId];
+        void prompt({ title: "Rename layer", label: "Name", initialValue: layer?.label ?? "" }).then((name) => {
+          if (name !== null && name.trim() !== "") store.renameLayer(layerId, name.trim());
+        });
+      },
+    });
     if (entries.length === 0) return;
     open(request.at, entries);
-  }, [request, store, open, close]);
-  return <>{menu.menu}</>;
+  }, [request, store, open, close, prompt]);
+  return (
+    <>
+      {menu.menu}
+      {dialog}
+    </>
+  );
 }