@odori/cli 0.0.2 → 0.0.4

package/studio/src/components/Thumbnail.tsx

@@ -1,29 +1,49 @@
-import {useState} from "react";
-import {OdoriRuntime, resolveEntryLayout, usePlayback, type VideoEntry} from "odori";
+import {useEffect, useRef, useState} from "react";
+import {OdoriRuntime, resolveEntryLayout, usePlayback, type AudioTrack, type VideoEntry} from "odori";
 import {PreviewBoundary} from "odori/preview";
 import {project} from "virtual:odori-project";
 import {useFitScale} from "./CanvasStage";
+import {Icon} from "./ui";
 
 /**
- * A gallery thumbnail is the real composition at a chosen frame, letterboxed
- * into a uniform card. Hovering plays it through the same runtime, so the
- * catalog can never drift from the render.
+ * A gallery thumbnail is the real composition, playing, letterboxed into a
+ * uniform card. It plays while it is on screen and rests while it is not —
+ * motion is what these cards are for, and asking for a hover to see any of it
+ * made the gallery read as a wall of stills. Offscreen cards pause, so a
+ * library of eighty costs what the visible rows cost.
  */
 export const Thumbnail = ({
   entry,
   frame = 0,
   durationInFrames,
-  playOnHover = true,
+  audioBadge = false,
 }: {
   entry: VideoEntry;
   frame?: number;
   durationInFrames?: number;
-  playOnHover?: boolean;
+  /** Mark the card when the composition declares sound. Videos only; a cue
+      card is nothing but sound and the chip would restate every one. */
+  audioBadge?: boolean;
 }) => {
   const layout = resolveEntryLayout(entry);
   const {width, height, fps} = layout.format;
   const [container, scale] = useFitScale(width, height);
-  const [hovering, setHovering] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const [hasAudio, setHasAudio] = useState(false);
+  const [fontsReady, setFontsReady] = useState(false);
+
+  // Brand fonts load after the composition mounts, and text set in a face
+  // that arrives late repaints as a visible shift across every card. The
+  // 16:9 box holds the layout; the pixels wait for the faces.
+  useEffect(() => {
+    let live = true;
+    void document.fonts.ready.then(() => {
+      if (live) setFontsReady(true);
+    });
+    return () => {
+      live = false;
+    };
+  }, []);
   const playback = usePlayback({
     fps,
     durationInFrames: Math.max(1, durationInFrames ?? fps * 8),
@@ -32,23 +52,39 @@ export const Thumbnail = ({
     loop: true,
   });
 
-  const hover = (next: boolean) => {
-    if (!playOnHover) return;
-    setHovering(next);
-    if (next) playback.play();
-    else {
-      playback.pause();
-      playback.seek(frame);
+  // usePlayback's play/pause identities follow its internal state; keeping
+  // them out of the dependencies makes visibility the only trigger.
+  const playbackRef = useRef(playback);
+  playbackRef.current = playback;
+
+  useEffect(() => {
+    const element = container.current;
+    if (!element) return undefined;
+    const observer = new IntersectionObserver(
+      ([intersection]) => setVisible(intersection?.isIntersecting ?? false),
+      {rootMargin: "64px"},
+    );
+    observer.observe(element);
+    return () => observer.disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (visible) {
+      playbackRef.current.play();
+      return;
     }
-  };
+    playbackRef.current.pause();
+    playbackRef.current.seek(frame);
+  }, [visible, frame]);
 
   return (
-    <div
-      className="card-canvas"
-      ref={container}
-      onPointerEnter={() => hover(true)}
-      onPointerLeave={() => hover(false)}
-    >
+    <div className="card-canvas" ref={container}>
+      {audioBadge && hasAudio ? (
+        <span className="card-audio" title="Has audio">
+          <Icon name="sound" />
+        </span>
+      ) : null}
       {/* Absolutely positioned so the composition never sizes the card. */}
       <div
         style={{
@@ -57,13 +93,19 @@ export const Thumbnail = ({
           position: "absolute",
           top: "50%",
           transform: `translate(-50%, -50%) scale(${scale})`,
+          visibility: fontsReady ? undefined : "hidden",
           width,
         }}
       >
         {/* A card in a grid of forty: one broken component must not blank
             the library it is listed in. */}
         <PreviewBoundary resetKey={entry.metadata.id} label="Threw">
-          <OdoriRuntime entry={entry} frame={hovering ? playback.frame : frame} assets={project.assets} />
+          <OdoriRuntime
+            entry={entry}
+            frame={visible ? playback.frame : frame}
+            assets={project.assets}
+            onAudio={audioBadge ? (track: AudioTrack) => setHasAudio(track.cues.length > 0) : undefined}
+          />
         </PreviewBoundary>
       </div>
     </div>

package/studio/src/components/ui.tsx

@@ -35,9 +35,9 @@ export const Separator = () => <div className="separator" />;
 
 export const SectionTitle = ({children}: {children: ReactNode}) => <h2 className="section-title">{children}</h2>;
 
-export const Fact = ({label, children}: {label: string; children: ReactNode}) => (
+export const Fact = ({label, title, children}: {label: string; title?: string; children: ReactNode}) => (
   <div className="fact">
-    <dt>{label}</dt>
+    <dt title={title}>{label}</dt>
     <dd>{children}</dd>
   </div>
 );
@@ -68,6 +68,7 @@ export const Icon = ({
     | "moon"
     | "display"
     | "external"
+    | "sidebar"
     | "search";
 }) => {
   const paths: Record<string, ReactNode> = {
@@ -92,6 +93,12 @@ export const Icon = ({
       </>
     ),
     caret: <path d="M3.6 5.6 7 9l3.4-3.4" fill="none" stroke="currentColor" strokeWidth="1.4" />,
+    sidebar: (
+      <>
+        <rect x="1.9" y="2.4" width="10.2" height="9.2" rx="1.2" fill="none" stroke="currentColor" strokeWidth="1.2" />
+        <path d="M8.9 2.4v9.2" fill="none" stroke="currentColor" strokeWidth="1.2" />
+      </>
+    ),
     search: (
       <>
         <circle cx="6.2" cy="6.2" r="3.4" fill="none" stroke="currentColor" strokeWidth="1.3" />

package/studio/src/lib/highlight.ts

@@ -0,0 +1,85 @@
+/**
+ * A small TypeScript and TSX tokenizer, for reading source in the inspector.
+ *
+ * Studio ships inside `@odori/cli`, so anything it imports is something every
+ * consumer downloads. A real highlighter is megabytes of grammars to colour a
+ * read-only panel, which is a bad trade for a dev tool; this is one pass of
+ * one regex over files we already know the shape of. It is deliberately not a
+ * parser: it does not resolve types, it will not know a word is a variable
+ * rather than a call, and it does not need to. What it has to get right is
+ * that a keyword inside a string stays a string, and a slash that opens a
+ * comment is not division, which ordering the alternation handles.
+ */
+export type Token = {text: string; kind: TokenKind};
+
+export type TokenKind =
+  | "plain"
+  | "comment"
+  | "string"
+  | "keyword"
+  | "number"
+  | "tag"
+  | "attr"
+  | "fn"
+  | "punct";
+
+const KEYWORDS = new Set([
+  "as", "async", "await", "break", "case", "catch", "class", "const", "continue", "declare", "default", "delete",
+  "do", "else", "enum", "export", "extends", "false", "finally", "for", "from", "function", "if", "implements",
+  "import", "in", "instanceof", "interface", "keyof", "let", "new", "null", "of", "readonly", "return", "satisfies",
+  "static", "super", "switch", "this", "throw", "true", "try", "type", "typeof", "undefined", "var", "void", "while",
+  "yield",
+]);
+
+/*
+ * Order is the whole design. Comments and strings come first so their contents
+ * are never read as code; the JSX tag rule follows, because `<Scene` is a tag
+ * and `a < b` is not; words and numbers come last.
+ */
+const PATTERN = new RegExp(
+  [
+    "(?<comment>//[^\\n]*|/\\*[\\s\\S]*?\\*/)",
+    "(?<string>`(?:\\\\.|[^`\\\\])*`|\"(?:\\\\.|[^\"\\\\\\n])*\"|'(?:\\\\.|[^'\\\\\\n])*')",
+    "(?<tag></?[A-Za-z][\\w.]*(?=[\\s/>]))",
+    "(?<number>\\b\\d[\\w.]*\\b)",
+    "(?<word>[A-Za-z_$][\\w$]*)",
+    "(?<punct>[{}()[\\].,;:=+\\-*/<>!?&|%^~]+)",
+  ].join("|"),
+  "g",
+);
+
+export const tokenize = (source: string): Token[] => {
+  const tokens: Token[] = [];
+  let last = 0;
+
+  const push = (text: string, kind: TokenKind) => {
+    if (text) tokens.push({text, kind});
+  };
+
+  for (const match of source.matchAll(PATTERN)) {
+    const groups = match.groups ?? {};
+    const index = match.index ?? 0;
+    push(source.slice(last, index), "plain");
+    last = index + match[0].length;
+
+    if (groups.comment) push(match[0], "comment");
+    else if (groups.string) push(match[0], "string");
+    else if (groups.tag) push(match[0], "tag");
+    else if (groups.number) push(match[0], "number");
+    else if (groups.punct) push(match[0], "punct");
+    else if (groups.word) {
+      const word = match[0];
+      // A word followed by `(` is being called; one followed by `=` inside a
+      // tag is an attribute. Both are guesses from the next character, which
+      // is as far as a tokenizer can honestly go.
+      const next = source[last];
+      if (KEYWORDS.has(word)) push(word, "keyword");
+      else if (next === "(") push(word, "fn");
+      else if (next === "=" && source[last + 1] !== "=") push(word, "attr");
+      else push(word, "plain");
+    }
+  }
+
+  push(source.slice(last), "plain");
+  return tokens;
+};