@signalcore/ui 0.1.0 → 1.0.0-beta.0

package/src/BrowserView.tsx

@@ -0,0 +1,442 @@
+import {
+  ArrowsInSimpleIcon,
+  ArrowsOutSimpleIcon,
+  HandIcon,
+  LockSimpleIcon,
+  XIcon,
+} from "@phosphor-icons/react";
+import {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type RefObject,
+} from "react";
+
+import { capture, handOverWaiting, painterOn, siteOf } from "./browser";
+import { classes } from "./classes";
+import { Button } from "./kit/Button";
+import type { BrowserState } from "./types";
+import type { LiveConversation } from "./useConversation";
+
+/** The words the browser says; a host gives its own, in its language. */
+export interface BrowserMessages {
+  /** Who holds it: the agent, by its name. */
+  agent: (name: string) => string;
+  /** Who holds it: the agent, in the owner's own Chrome. */
+  agentMine: (name: string) => string;
+  /** Who holds it: the person. */
+  person: string;
+  /** Take it from the agent. */
+  take: string;
+  /** Give it back to the agent, after taking it. */
+  giveBack: string;
+  /** The agent handed it over: what heads its reason. */
+  handedOver: (name: string) => string;
+  /** The person is done with what the agent handed over: the agent goes on. */
+  done: string;
+  /** A hand-over waits, but the browser closed meanwhile (nobody used it for a while). */
+  closed: string;
+  expand: string;
+  shrink: string;
+  /** The way to close it now: it stops running, and being billed. */
+  close: string;
+  /** Where the browser is when it shows no web page. */
+  blank: string;
+  /** The screen's name, for those who cannot see it. */
+  screen: (where: string) => string;
+}
+
+export const BROWSER_MESSAGES: BrowserMessages = {
+  agent: (name) => `${name} is browsing`,
+  agentMine: (name) => `${name}, in your Chrome`,
+  person: "You're in control",
+  take: "Take control",
+  giveBack: "Give it back",
+  handedOver: (name) => `${name} hands you the browser`,
+  done: "Done, go on",
+  closed: "The browser closed while it waited for you.",
+  expand: "Enlarge",
+  shrink: "Shrink",
+  close: "Close the browser",
+  blank: "Blank page",
+  screen: (where) => `Browser: ${where}`,
+};
+
+/** The browser's parts, by the class each carries; `classNames` adds a host's own under the same keys. */
+export type BrowserPart =
+  | "sc-browser"
+  | "sc-browser--large"
+  | "sc-browser--yours"
+  | "sc-browser--handed"
+  | "sc-browser--closed"
+  | "sc-browser__bar"
+  | "sc-browser__who"
+  | "sc-browser__address"
+  | "sc-browser__title"
+  | "sc-browser__controls"
+  | "sc-browser__handover"
+  | "sc-browser__screen"
+  | "sc-browser__screen--waiting"
+  | "sc-browser__canvas";
+
+export interface BrowserViewProps {
+  /** The conversation the browser is of (`useConversation`). */
+  live: LiveConversation;
+  /** The agent's name, for the words that say it holds the browser. */
+  name: string;
+  messages?: Partial<BrowserMessages> | undefined;
+  classNames?: Partial<Record<BrowserPart, string>> | undefined;
+}
+
+/**
+ * The browser the agent drives, live, while the conversation has one: a compact tile while the
+ * agent works (its screen small, where it is, who holds it), which the person can enlarge or
+ * take over. Taken, or handed over by the agent, it glides open large and the person's pointer
+ * and keys go to the page; a hand-over says why, ringed in the accent, and "done" gives the
+ * browser back, the panel gliding small again, and lets the agent go on. Draws nothing when
+ * there is no browser, unless a hand-over still waits for one that closed: then the person can
+ * go on without it.
+ */
+export function BrowserView({ live, name, messages, classNames }: BrowserViewProps) {
+  const words = { ...BROWSER_MESSAGES, ...messages };
+  const { browser } = live;
+  // The hand-over answered here, so it is never answered twice while its echo is on its way.
+  const [answered, setAnswered] = useState<string | null>(null);
+  const answer = (wait: string) => {
+    if (answered === wait) return;
+    if (live.act({ surface: wait, name: "done", data: {}, label: words.done })) setAnswered(wait);
+  };
+
+  if (browser === null) {
+    const waiting = handOverWaiting(live.messages, live.awaiting);
+    if (waiting === null || waiting === answered) return null;
+    return (
+      <section className={classes(classNames, "sc-browser", "sc-browser--closed")}>
+        <p className={classes(classNames, "sc-browser__handover")}>
+          <HandIcon aria-hidden weight="fill" />
+          <span>{words.closed}</span>
+          <Button tone="primary" size="sm" onClick={() => answer(waiting)}>
+            {words.done}
+          </Button>
+        </p>
+      </section>
+    );
+  }
+  return (
+    <Panel
+      live={live}
+      browser={browser}
+      name={name}
+      words={words}
+      classNames={classNames}
+      answered={answered}
+      onDone={answer}
+    />
+  );
+}
+
+/**
+ * How the panel is laid out: small, its screen beside its words; large, under them; or handed
+ * over, large with why the agent stopped and the way to go on.
+ */
+type Look = { shape: "small" | "large" } | { shape: "handed"; wait: string; reason: string | null };
+
+function Panel({
+  live,
+  browser,
+  name,
+  words,
+  classNames,
+  answered,
+  onDone,
+}: {
+  live: LiveConversation;
+  browser: BrowserState;
+  name: string;
+  words: BrowserMessages;
+  classNames: Partial<Record<BrowserPart, string>> | undefined;
+  answered: string | null;
+  onDone: (wait: string) => void;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  // A hand-over the person answered here is over for them at once: the panel goes back while
+  // the word that the agent holds the browser again is on its way.
+  const settling = browser.wait !== null && browser.wait === answered;
+  const yours = browser.control === "person" && !settling;
+  const panel = useRef<HTMLElement>(null);
+  const bar = useRef<HTMLElement>(null);
+  const canvas = useRef<HTMLCanvasElement>(null);
+  const look = useGlide(
+    browser.wait !== null && !settling
+      ? { shape: "handed", wait: browser.wait, reason: browser.reason }
+      : { shape: yours || expanded ? "large" : "small" },
+    panel,
+    bar,
+    canvas,
+  );
+  const large = look.shape !== "small";
+  const { host, rest } = siteOf(browser.url);
+  const where = browser.title || host || words.blank;
+  const looks: BrowserPart[] = [];
+  if (large) looks.push("sc-browser--large");
+  if (yours) looks.push("sc-browser--yours");
+  if (look.shape === "handed") looks.push("sc-browser--handed");
+
+  return (
+    <section
+      ref={panel}
+      aria-label={words.screen(where)}
+      className={classes(classNames, "sc-browser", ...looks)}
+    >
+      <header ref={bar} className={classes(classNames, "sc-browser__bar")}>
+        <p className={classes(classNames, "sc-browser__who")}>
+          <i aria-hidden />
+          <span>
+            {yours
+              ? words.person
+              : browser.where === "mine"
+                ? words.agentMine(name)
+                : words.agent(name)}
+          </span>
+        </p>
+        <p title={browser.url} className={classes(classNames, "sc-browser__address")}>
+          {host ? (
+            <>
+              <LockSimpleIcon aria-hidden weight="bold" />
+              <strong>{host}</strong>
+              <span>{rest}</span>
+            </>
+          ) : (
+            <span>{words.blank}</span>
+          )}
+        </p>
+        {!large && browser.title !== "" && (
+          <p className={classes(classNames, "sc-browser__title")}>{browser.title}</p>
+        )}
+        <div className={classes(classNames, "sc-browser__controls")}>
+          {look.shape !== "handed" &&
+            !settling &&
+            (yours ? (
+              <Button size="sm" onClick={() => live.control("agent")}>
+                {words.giveBack}
+              </Button>
+            ) : (
+              <Button size="sm" onClick={() => live.control("person")}>
+                {words.take}
+              </Button>
+            ))}
+          {!yours && (
+            <Button
+              size="sm"
+              tone="ghost"
+              icon={expanded ? ArrowsInSimpleIcon : ArrowsOutSimpleIcon}
+              aria-label={expanded ? words.shrink : words.expand}
+              title={expanded ? words.shrink : words.expand}
+              onClick={() => setExpanded((open) => !open)}
+            />
+          )}
+          <Button
+            size="sm"
+            tone="ghost"
+            icon={XIcon}
+            aria-label={words.close}
+            title={words.close}
+            onClick={() => live.closeBrowser()}
+          />
+        </div>
+      </header>
+      {look.shape === "handed" && (
+        <div className={classes(classNames, "sc-browser__handover")}>
+          <HandIcon aria-hidden weight="fill" />
+          <p>
+            <strong>{words.handedOver(name)}</strong>
+            {look.reason && <span>{look.reason}</span>}
+          </p>
+          <Button tone="primary" size="sm" onClick={() => onDone(look.wait)}>
+            {words.done}
+          </Button>
+        </div>
+      )}
+      <Screen
+        live={live}
+        browser={browser}
+        canvas={canvas}
+        interactive={yours}
+        label={words.screen(where)}
+        classNames={classNames}
+        onOpen={large ? undefined : () => setExpanded(true)}
+      />
+    </section>
+  );
+}
+
+/** v2's expand: half a second, quick to leave and slow to land. */
+const GLIDE: KeyframeAnimationOptions = {
+  duration: 500,
+  easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+};
+/** The words around the screen, laid out anew, come in once it is under way. */
+const ARRIVE: KeyframeAnimationOptions = {
+  duration: 240,
+  delay: 140,
+  easing: "ease-out",
+  fill: "backwards",
+};
+
+/** How tall the panel stands, and where its screen is within it, as shown. */
+interface Layout {
+  height: number;
+  x: number;
+  y: number;
+  width: number;
+  tall: number;
+}
+
+function layoutOf(panel: HTMLElement, screen: HTMLElement): Layout {
+  const outer = panel.getBoundingClientRect();
+  const inner = screen.getBoundingClientRect();
+  return {
+    height: outer.height,
+    x: inner.left - outer.left,
+    y: inner.top - outer.top,
+    width: inner.width,
+    tall: inner.height,
+  };
+}
+
+/** Whoever asked their system for less motion gets none. */
+function still(): boolean {
+  return (
+    typeof window.matchMedia === "function" &&
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  );
+}
+
+/**
+ * The look the panel shows: `wanted`, one layout later when its shape changes, so the panel is
+ * measured as it stands before it changes and glides from there to where it lands (its height,
+ * so the conversation above gives way smoothly, and its screen's place and size, by a
+ * transform) instead of jumping; its words come in over the move. A change midway starts from
+ * wherever the glide had got to. The same shape shows what is wanted at once.
+ */
+function useGlide(
+  wanted: Look,
+  panel: RefObject<HTMLElement | null>,
+  bar: RefObject<HTMLElement | null>,
+  canvas: RefObject<HTMLCanvasElement | null>,
+): Look {
+  const [shown, setShown] = useState(wanted);
+  const from = useRef<Layout | null>(null);
+  const moving = useRef<Animation[]>([]);
+  const changing = shown.shape !== wanted.shape;
+
+  useLayoutEffect(() => {
+    if (!changing) return;
+    const outer = panel.current;
+    const screen = canvas.current;
+    const glides = outer !== null && screen !== null && typeof outer.animate === "function";
+    from.current = glides && !still() ? layoutOf(outer, screen) : null;
+    for (const animation of moving.current) animation.cancel();
+    moving.current = [];
+    setShown(wanted);
+  });
+
+  useLayoutEffect(() => {
+    const first = from.current;
+    from.current = null;
+    const outer = panel.current;
+    const screen = canvas.current;
+    if (first === null || outer === null || screen === null) return;
+    const last = layoutOf(outer, screen);
+    if (last.width === 0 || last.tall === 0) return;
+    const shift = `translate(${first.x - last.x}px, ${first.y - last.y}px)`;
+    const scale = `scale(${first.width / last.width}, ${first.tall / last.tall})`;
+    moving.current = [
+      outer.animate([{ height: `${first.height}px` }, { height: `${last.height}px` }], GLIDE),
+      screen.animate([{ transform: `${shift} ${scale}` }, { transform: "none" }], GLIDE),
+    ];
+    if (bar.current) {
+      moving.current.push(bar.current.animate([{ opacity: 0 }, { opacity: 1 }], ARRIVE));
+    }
+  }, [shown.shape, panel, bar, canvas]);
+
+  return changing ? shown : wanted;
+}
+
+/**
+ * The screen: the browser's pictures painted on a canvas as they come, the latest only. While
+ * the person holds the browser it takes their pointer and keys (and the focus, so they can type
+ * at once); otherwise it is only watched, and the small one opens large on a click. Until the
+ * first picture lands, a quiet light sweeps where it will be.
+ */
+function Screen({
+  live,
+  browser,
+  canvas,
+  interactive,
+  label,
+  classNames,
+  onOpen,
+}: {
+  live: LiveConversation;
+  browser: BrowserState;
+  canvas: RefObject<HTMLCanvasElement | null>;
+  interactive: boolean;
+  label: string;
+  classNames: Partial<Record<BrowserPart, string>> | undefined;
+  onOpen: (() => void) | undefined;
+}) {
+  const { watchScreen, input } = live;
+  const { width, height } = browser;
+  const [painted, setPainted] = useState(false);
+
+  useEffect(() => {
+    const element = canvas.current;
+    if (!element) return undefined;
+    let first = true;
+    const painter = painterOn(element, () => {
+      if (!first) return;
+      first = false;
+      setPainted(true);
+    });
+    const stop = watchScreen((frame) => {
+      painter.paint(frame.jpeg);
+    });
+    return () => {
+      stop();
+      painter.dispose();
+    };
+  }, [watchScreen, width, height, canvas]);
+
+  // `input` is new each render; the capture reads the latest without starting over.
+  const send = useRef(input);
+  useLayoutEffect(() => {
+    send.current = input;
+  });
+  useEffect(() => {
+    const element = canvas.current;
+    if (!element || !interactive) return undefined;
+    element.focus({ preventScroll: true });
+    return capture(element, { width, height }, (event) => send.current(event));
+  }, [interactive, width, height, canvas]);
+
+  const parts: BrowserPart[] = ["sc-browser__screen"];
+  if (!painted) parts.push("sc-browser__screen--waiting");
+  return (
+    <div className={classes(classNames, ...parts)}>
+      <canvas
+        ref={canvas}
+        role="img"
+        aria-label={label}
+        width={width}
+        height={height}
+        tabIndex={interactive ? 0 : undefined}
+        style={{ "--_ratio": String(width / height) } as CSSProperties}
+        onClick={onOpen}
+        className={classes(classNames, "sc-browser__canvas")}
+      />
+    </div>
+  );
+}