main.jsx

import { createEffect } from "solid-js";
import { createStore } from "solid-js/store";
import { useTicker } from "@diffusionstudio/jsx";

import { W, H } from "./src/frame.js";
import { ASSETS } from "./src/assets.js";
import { C_BG } from "./src/theme.js";
import { build, snapshot } from "./src/timeline.js";
import { ColdOpen } from "./src/ColdOpen.jsx";
import { Install } from "./src/Install.jsx";
import { Prompt } from "./src/Prompt.jsx";
import { Analyze } from "./src/Analyze.jsx";
import { Watch } from "./src/Watch.jsx";
import { Compose } from "./src/Compose.jsx";
import { Compare } from "./src/Compare.jsx";
import { Credits } from "./src/Credits.jsx";
import { Logo } from "./src/Logo.jsx";
import { LOGO_END } from "./src/logo.js";

/* ── scene ───────────────────────────────────────────────────────────────── */

export default function Main() {
  const { time } = useTicker();
  const tl = build();
  // seeked before the first snapshot, so even the very first paint of a fresh
  // context is the current frame's pose, never the timeline's initial one
  tl.seek(Math.min(time() * 1000, tl.duration));
  const [v, setV] = createStore(snapshot());

  createEffect(() => {
    tl.seek(Math.min(time() * 1000, tl.duration));
    setV(snapshot());
  });

  return (
    <rect scene="main" name="Main scene" width={W} height={H} fill={C_BG}>
      <Compose v={v} />
      <Compare v={v} />
      <Credits v={v} />
      <Logo v={v} />
      <Watch v={v} />
      <Analyze v={v} />
      <Prompt v={v} />
      <Install v={v} />
      <ColdOpen v={v} />
      <group name="Thumbnail" start="0f" end={LOGO_END / 1000}>
        <image
          name="Poster frame"
          src={`${ASSETS}/thumbnail.png`}
          width={W}
          height={H}
          start="0f"
          end="1f"
        />
      </group>
    </rect>
  );
}