The agent-first
video framework.

import {Audio, Scene, Video, defineVideoMetadata} from "odori";
import {CodeProof} from "../components/code-proof/code-proof";
import {EndCard} from "../components/end-card/end-card";
import {Stage} from "../components/stage/stage";
import {TitleReveal} from "../components/title-reveal/title-reveal";
import {productLayout} from "../layout";
import {launchInput} from "./schema";

export const metadata = defineVideoMetadata({
  id: "launch",
  title: "Odori launch",
  description: "A concise introduction to the odori authoring model.",
  duration: "12s",
  layout: productLayout,
  schema: launchInput,
  tags: ["launch", "framework"],
  thumbnailFrame: 45,
});

export default function LaunchVideo({
  headline,
  callToAction,
}: {
  headline: string;
  callToAction: string;
}) {
  return (
    <Video>
      {/* One bed under the whole cut, ducked so scene sounds stay audible. */}
      <Audio src="bed.main" gain={0.6} fadeIn="1s" fadeOut="1.5s" duckUnder="foreground" />

      <Scene id="opening" duration="4s" name="Opening">
        <Stage>
          <TitleReveal title={headline} detail="An independent React video framework." />
        </Stage>
      </Scene>
      <Scene id="proof" duration="5s" name="Proof">
        <Stage grid={false}>
          <CodeProof
            code={SOURCE}
            language="tsx"
            title="videos/launch/video.tsx"
            caption="Static metadata for discovery. Ordinary JSX for the timeline."
          />
        </Stage>
      </Scene>
      <Scene id="resolution" duration="3s" name="Resolution">
        <Audio group="foreground" src="ui.confirm" from="0.2s" duration="1s" gain={0.7} />
        <Stage>
          <EndCard
            title={"One definition.\nEvery render path."}
            detail="Preview needs no encode. Export freezes the approved cut."
            callToAction={callToAction}
          />
        </Stage>
      </Scene>
    </Video>
  );
}

/** The example entry the proof scene displays on screen. */
const SOURCE = `export const metadata = defineVideoMetadata({
  id: "launch",
  title: "Product launch",
  duration: "12s",
});

export default function LaunchVideo() {
  return (
    <Video>
      <Scene id="opening" duration="4s">
        <TitleReveal title="Author the story." />
      </Scene>
    </Video>
  );
}`;