@odori/cli 0.0.2

package/studio/src/views/HomeView.tsx

@@ -0,0 +1,122 @@
+import {entryDurationInFrames, framesFromDuration, resolveEntryLayout} from "odori";
+import {componentPreviews, project, videos} from "virtual:odori-project";
+import {Thumbnail} from "../components/Thumbnail";
+import {AudioClip} from "../components/AudioClip";
+import {SectionTitle} from "../components/ui";
+import {collectBrands} from "./BrandsView";
+import {entryFor} from "./ComponentsView";
+import type {StudioView} from "../Studio";
+
+/**
+ * What the project contains, shown rather than listed.
+ *
+ * Every other view answers a question about one thing. This one answers "what
+ * is in here", which is the question you have on arrival, so each card plays a
+ * frame of the real composition and opens the view that owns it.
+ */
+export const HomeView = ({onOpen}: {onOpen: (view: StudioView, selection?: string) => void}) => {
+  const brands = collectBrands();
+  const brand = brands[0];
+  const fonts = [
+    ...new Map(videos.flatMap((video) => resolveEntryLayout(video).brand.fonts).map((font) => [font.url, font])).values(),
+  ];
+
+  return (
+    <div className="home">
+      <section>
+        <SectionTitle>Videos</SectionTitle>
+        <div className="gallery">
+          {videos.map((video) => {
+            const layout = resolveEntryLayout(video);
+            return (
+              <button key={video.metadata.id} type="button" className="card" onClick={() => onOpen("videos", video.metadata.id)}>
+                <Thumbnail
+                  entry={video}
+                  frame={video.metadata.thumbnailFrame ?? Math.round(entryDurationInFrames(video, layout) * 0.4)}
+                  durationInFrames={entryDurationInFrames(video, layout)}
+                />
+                <div className="card-meta">
+                  <strong>{video.metadata.title}</strong>
+                  <span>
+                    {layout.format.width}x{layout.format.height} · {video.metadata.id}
+                  </span>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </section>
+
+      <section>
+        <SectionTitle>Components</SectionTitle>
+        <div className="gallery">
+          {componentPreviews.map((item) => {
+            const defaults = Object.fromEntries(
+              Object.entries(item.preview.controls ?? {}).map(([name, field]) => [name, field.defaultValue]),
+            );
+            const total = framesFromDuration(item.preview.canvas.duration, 30);
+            return (
+              <button key={item.id} type="button" className="card" onClick={() => onOpen("components", item.id)}>
+                <Thumbnail
+                  entry={entryFor(
+                    item,
+                    {...defaults, ...(item.preview.examples[0]?.props ?? {})},
+                    brand ?? resolveEntryLayout(videos[0]).brand,
+                    {width: 1920, height: 1080},
+                  )}
+                  frame={Math.round(total * 0.6)}
+                  durationInFrames={total}
+                />
+                <div className="card-meta">
+                  <strong>{item.preview.title}</strong>
+                  <span>{item.preview.category.toLowerCase()}</span>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </section>
+
+      <section>
+        <SectionTitle>Brands</SectionTitle>
+        <div className="home-swatches">
+          {brands.map((item) => (
+            <button key={item.name} type="button" className="brand-card" onClick={() => onOpen("brands", item.name)}>
+              <div className="swatch-colors">
+                {[item.colors.background, item.colors.surface, item.colors.foreground, item.colors.accent, item.colors.border].map(
+                  (color) => (
+                    <span key={color} style={{background: color}} />
+                  ),
+                )}
+              </div>
+              <div className="card-meta">
+                <strong>{item.name}</strong>
+                <span>
+                  {item.typography.sans.split(",")[0].replace(/"/g, "")} · {item.audio.targetLufs} LUFS
+                </span>
+              </div>
+            </button>
+          ))}
+        </div>
+      </section>
+
+      <section>
+        <SectionTitle>Assets</SectionTitle>
+        <ul className="asset-list">
+          {project.audio.slice(0, 4).map((entry) => (
+            <li key={entry.url}>
+              <AudioClip url={entry.url} label={entry.name} shape />
+              <div style={{display: "flex", flexDirection: "column", gap: 2, minWidth: 0}}>
+                <strong>{entry.name}</strong>
+                <code>{entry.url}</code>
+              </div>
+            </li>
+          ))}
+        </ul>
+        <button type="button" className="home-more" onClick={() => onOpen("assets")}>
+          {project.assets.length} declared assets · {project.audio.length} sounds · {fonts.length} fonts
+        </button>
+      </section>
+    </div>
+  );
+};

package/studio/src/views/VideosView.tsx

@@ -0,0 +1,343 @@
+import {useCallback, useEffect, useMemo, useRef, useState} from "react";
+import {
+  DUCK_GAIN,
+  OdoriRuntime,
+  entryDurationInFrames,
+  isOdoriSchema,
+  resolveEntryLayout,
+  usePlayback,
+  useAudioPlayback,
+  type AudioTrack,
+  type CompiledTimeline,
+  type FieldDescriptor,
+} from "odori";
+import {PreviewBoundary} from "odori/preview";
+import {project, videos} from "virtual:odori-project";
+import {CanvasStage} from "../components/CanvasStage";
+import {RATES, Transport} from "../components/Transport";
+import {Thumbnail} from "../components/Thumbnail";
+import {InputControls} from "../components/InputControls";
+import {ExportPanel} from "../components/ExportPanel";
+import {Diagnostics} from "../components/Diagnostics";
+import {Badge, Button, Empty, Fact, SectionTitle, Separator} from "../components/ui";
+import {measureTrack} from "../lib/mix-loudness";
+import {useShortcuts} from "../shortcuts";
+
+export const VideosView = ({
+  selection,
+  onSelect,
+  mode,
+}: {
+  selection: string | null;
+  onSelect: (id: string) => void;
+  mode: "player" | "gallery";
+}) => {
+  // Finding one by name is ⌘K; this list is for browsing them all.
+  const filtered = videos;
+  const selected = filtered.find((video) => video.metadata.id === selection) ?? filtered[0] ?? videos[0];
+  const [input, setInput] = useState<Record<string, unknown>>({});
+  const [timeline, setTimeline] = useState<CompiledTimeline | null>(null);
+  const [track, setTrack] = useState<AudioTrack | null>(null);
+  const [loop, setLoop] = useState(true);
+  const [muted, setMuted] = useState(false);
+  const [soloCue, setSoloCue] = useState<string | null>(null);
+  const [scrubbing, setScrubbing] = useState(false);
+  const [rate, setRate] = useState(1);
+  const [loudness, setLoudness] = useState<number | null>(null);
+  const [audioBlocked, setAudioBlocked] = useState(false);
+  const [audioFailed, setAudioFailed] = useState<string[]>([]);
+  const [showSafeArea, setShowSafeArea] = useState(false);
+
+  const layout = selected ? resolveEntryLayout(selected) : null;
+  const declared = selected && layout ? entryDurationInFrames(selected, layout) : 0;
+  const durationInFrames = Math.max(1, declared || timeline?.durationInFrames || 30);
+  const playback = usePlayback({
+    fps: layout?.format.fps ?? 30,
+    durationInFrames,
+    rate,
+    autoPlay: true,
+    loop,
+  });
+
+  // Store compiled output only when it changes, so a runtime report can never
+  // feed a render loop.
+  const handleTimeline = useCallback(
+    (next: CompiledTimeline) =>
+      setTimeline((current) => (JSON.stringify(current) === JSON.stringify(next) ? current : next)),
+    [],
+  );
+  // Measuring decodes and renders the whole track, so it runs when the track
+  // changes rather than on every frame.
+  useEffect(() => {
+    const fps = layout?.format.fps;
+    if (!track || track.cues.length === 0 || !fps) {
+      setLoudness(null);
+      return undefined;
+    }
+    let live = true;
+    setLoudness(null);
+    void measureTrack(track, fps, durationInFrames).then((value) => {
+      if (live) setLoudness(value);
+    });
+    return () => {
+      live = false;
+    };
+  }, [durationInFrames, layout?.format.fps, track]);
+
+  const handleAudio = useCallback(
+    (next: AudioTrack) => setTrack((current) => (JSON.stringify(current) === JSON.stringify(next) ? current : next)),
+    [],
+  );
+
+  useAudioPlayback({
+    track,
+    frame: playback.frame,
+    fps: layout?.format.fps ?? 30,
+    playing: playback.playing,
+    muted,
+    soloCue,
+    scrubbing,
+    rate,
+    onBlocked: setAudioBlocked,
+    onFailed: setAudioFailed,
+  });
+
+  // The runtime publishes the timeline and the audio track from its own
+  // effects, which commit before this component's. Clearing them in an effect
+  // therefore discarded what the newly selected video had just published, and
+  // the track never came back. Resetting during render instead puts the clear
+  // ahead of the publish, which is the order the data actually flows in.
+  const [renderedId, setRenderedId] = useState(selected?.metadata.id);
+  if (selected?.metadata.id !== renderedId) {
+    setRenderedId(selected?.metadata.id);
+    setInput({});
+    setTimeline(null);
+    setTrack(null);
+  }
+
+  const previousId = useRef(selected?.metadata.id);
+  useEffect(() => {
+    const id = selected?.metadata.id;
+    if (previousId.current === id) return;
+    previousId.current = id;
+    playback.seek(0);
+    playback.play();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selected?.metadata.id]);
+
+  const scenes = timeline?.scenes ?? [];
+  const sceneJump = (direction: 1 | -1) => {
+    const boundaries = [0, ...scenes.map((scene) => scene.start), durationInFrames - 1];
+    const next =
+      direction === 1
+        ? boundaries.find((boundary) => boundary > playback.frame)
+        : [...boundaries].reverse().find((boundary) => boundary < playback.frame);
+    playback.seek(next ?? playback.frame);
+  };
+
+  useShortcuts({
+    " ": () => playback.toggle(),
+    ArrowRight: (event) => playback.step(event.shiftKey ? (layout?.format.fps ?? 30) : 1),
+    ArrowLeft: (event) => playback.step(event.shiftKey ? -(layout?.format.fps ?? 30) : -1),
+    "-": () => setRate((value) => RATES[Math.max(0, RATES.indexOf(value) - 1)] ?? value),
+    "=": () => setRate((value) => RATES[Math.min(RATES.length - 1, RATES.indexOf(value) + 1)] ?? value),
+    Home: () => playback.seek(0),
+    End: () => playback.seek(durationInFrames - 1),
+    "]": () => sceneJump(1),
+    "[": () => sceneJump(-1),
+    l: () => setLoop((value) => !value),
+    m: () => setMuted((value) => !value),
+    s: () => setShowSafeArea((value) => !value),
+  });
+
+  if (!selected || !layout) {
+    return (
+      <Empty title="No videos yet">
+        Create <code>{project.videosDir}/launch/video.tsx</code> or run <code>odori new launch</code>. A video exists
+        because its file exists.
+      </Empty>
+    );
+  }
+
+  if (mode === "gallery") {
+    return (
+      <div className="gallery">
+        {filtered.map((video) => {
+          const videoLayout = resolveEntryLayout(video);
+          return (
+            <button
+              key={video.metadata.id}
+              type="button"
+              className="card"
+              data-active={video.metadata.id === selected.metadata.id ? "true" : undefined}
+              onClick={() => onSelect(video.metadata.id)}
+            >
+              <Thumbnail
+                entry={video}
+                frame={video.metadata.thumbnailFrame ?? Math.round(entryDurationInFrames(video, videoLayout) * 0.4)}
+                durationInFrames={entryDurationInFrames(video, videoLayout)}
+              />
+              <div className="card-meta">
+                <strong>{video.metadata.title}</strong>
+                <span>
+                  {videoLayout.format.width}x{videoLayout.format.height} · {String(video.metadata.duration ?? "auto")}
+                </span>
+              </div>
+            </button>
+          );
+        })}
+      </div>
+    );
+  }
+
+  const schema = selected.metadata.schema;
+  const fields: Record<string, FieldDescriptor> = isOdoriSchema(schema) ? schema.describe() : {};
+  const file = project.files.videos.find((entry) => entry.id === selected.metadata.id)?.file;
+
+  return (
+    <>
+      <aside className="sidebar">
+        <div className="sidebar-scroll">
+          <ul className="list">
+            {filtered.map((video) => (
+              <li key={video.metadata.id}>
+                <button
+                  type="button"
+                  className="list-item"
+                  data-active={video.metadata.id === selected.metadata.id ? "true" : undefined}
+                  onClick={() => onSelect(video.metadata.id)}
+                >
+                  {/* Format and duration are facts about the selection, and the
+                      inspector states both. The list is for choosing. */}
+                  <strong>{video.metadata.title}</strong>
+                </button>
+              </li>
+            ))}
+          </ul>
+
+        </div>
+      </aside>
+
+      <section className="stage">
+        <CanvasStage
+          width={layout.format.width}
+          height={layout.format.height}
+          safeArea={layout.safeArea}
+          showSafeArea={showSafeArea}
+        >
+          {/* A composition that throws costs the stage, not Studio: the
+              transport, the inspector, and the file list stay usable while
+              the error is read and fixed. */}
+          <PreviewBoundary resetKey={selected.metadata.id}>
+            <OdoriRuntime
+              entry={selected}
+              frame={playback.frame}
+              input={input}
+              assets={project.assets}
+              onTimeline={handleTimeline}
+              onAudio={handleAudio}
+            />
+          </PreviewBoundary>
+        </CanvasStage>
+        <Transport
+          playback={playback}
+          timeline={timeline}
+          track={track}
+          durationInFrames={durationInFrames}
+          fps={layout.format.fps}
+          loop={loop}
+          muted={muted}
+          soloCue={soloCue}
+          audioBlocked={audioBlocked}
+          onEnableAudio={() => setMuted(false)}
+          onSoloCue={setSoloCue}
+          onScrubbing={setScrubbing}
+          rate={rate}
+          onRate={setRate}
+          onToggleLoop={() => setLoop((value) => !value)}
+          onToggleMuted={() => setMuted((value) => !value)}
+        />
+      </section>
+
+      <aside className="inspector">
+        <SectionTitle>Video</SectionTitle>
+        <dl className="facts">
+          <Fact label="id">{selected.metadata.id}</Fact>
+          <Fact label="format">
+            {layout.format.width}x{layout.format.height} at {layout.format.fps}fps
+          </Fact>
+          <Fact label="duration">
+            {durationInFrames}f · {(durationInFrames / layout.format.fps).toFixed(2)}s
+          </Fact>
+          <Fact label="brand">{layout.brand.name}</Fact>
+          {file ? <Fact label="source">{file}</Fact> : null}
+          {(selected.metadata.tags ?? []).length > 0 ? (
+            <Fact label="tags">
+              <span style={{display: "flex", flexWrap: "wrap", gap: 6}}>
+                {(selected.metadata.tags ?? []).map((tag) => (
+                  <Badge key={tag}>{tag}</Badge>
+                ))}
+              </span>
+            </Fact>
+          ) : null}
+        </dl>
+        {selected.metadata.description ? <p className="hint">{selected.metadata.description}</p> : null}
+        <div style={{marginTop: 8}}>
+          <Button variant="outline" active={showSafeArea} onClick={() => setShowSafeArea((value) => !value)}>
+            Safe area
+          </Button>
+        </div>
+
+        {Object.keys(fields).length > 0 ? (
+          <>
+            <Separator />
+            <SectionTitle>Inputs</SectionTitle>
+            <InputControls fields={fields} value={input} onChange={setInput} />
+          </>
+        ) : null}
+
+        {/* A silent cut is audible as silence, and the cue lane is empty, so
+            the section appears once there is a track to describe. */}
+        {track && track.cues.length > 0 ? (
+          <>
+            <Separator />
+            <SectionTitle>Audio</SectionTitle>
+            <dl className="facts">
+              {track.cues.map((cue) => (
+                <Fact key={cue.id} label={cue.src.split("/").pop() ?? cue.src}>
+                  {cue.fromFrame}-{cue.fromFrame + cue.durationInFrames - 1} · gain {cue.gain}
+                  {cue.duckUnder ? ` · ducked to ${DUCK_GAIN}` : ""}
+                  {soloCue === cue.id ? " · solo" : ""}
+                  {/* A cue whose file will not load is silence with no other
+                      symptom, so it says so where its gain is read. */}
+                  {audioFailed.includes(cue.src) ? (
+                    <span style={{color: "var(--warning, #e5a663)"}}> · file will not load</span>
+                  ) : null}
+                </Fact>
+              ))}
+              {/* Declared policy, so the number the encoder normalizes to is
+                  visible while mixing rather than only after an export. */}
+              <Fact label="loudness">
+                {loudness === null ? "measuring" : `${loudness.toFixed(1)} LUFS`}
+                {" · "}
+                <span style={{color: "var(--subtle)"}}>
+                  target {layout.brand.audio.targetLufs}, normalized on export
+                </span>
+              </Fact>
+            </dl>
+          </>
+        ) : null}
+
+        <Diagnostics entry={selected} timeline={timeline} track={track} />
+
+        <Separator />
+        <ExportPanel
+          videoId={selected.metadata.id}
+          input={input}
+          frame={playback.frame}
+          exportDir={project.exportDir}
+        />
+      </aside>
+    </>
+  );
+};

package/studio/src/virtual.d.ts

@@ -0,0 +1,25 @@
+declare module "virtual:odori-project" {
+  import type {VideoEntry} from "odori";
+  import type {ComponentPreview} from "odori/preview";
+
+  import type {Brand} from "odori";
+
+  export const videos: VideoEntry[];
+  export const brands: Brand[];
+  export const componentPreviews: Array<{id: string; preview: ComponentPreview<any>}>;
+  export const project: {
+    root: string;
+    videosDir: string;
+    docsUrl: string;
+    exportDir: string;
+    audioDir: string;
+    audio: Array<{name: string; url: string; relativeFile: string; bytes: number}>;
+    sourceHash: string;
+    assets: Array<{reference: string; url: string}>;
+    files: {
+      videos: Array<{id: string; file: string}>;
+      previews: Array<{id: string; file: string}>;
+      brands: Array<{id: string; file: string}>;
+    };
+  };
+}