@docyrus/animaguru 0.6.0 → 0.7.1

package/templates/video/src/download.ts

@@ -1,4 +1,4 @@
-import config from "../film.config.json";
+import type { FilmConfig } from "./player-types";
 import { publicAsset } from "./assets";
 
 export function downloadUrl(url: string, filename: string) {
@@ -10,14 +10,14 @@ export function downloadUrl(url: string, filename: string) {
   link.remove();
 }
 
-export async function downloadHtml() {
+export async function downloadHtml(config: FilmConfig, endpoint = "/__animaguru/html") {
   const filename = `${config.slug}-html5.zip`;
   if (!import.meta.env.DEV) {
     // npm run build prepares this alongside the static player. No server API is needed.
     downloadUrl(publicAsset(`downloads/${filename}`), filename);
     return;
   }
-  const response = await fetch("/__animaguru/html", {
+  const response = await fetch(endpoint, {
     method: "POST", headers: { "X-AnimaGuru-Export": "html5" }, signal: AbortSignal.timeout(180000),
   });
   if (!response.ok) throw new Error(await response.text());

package/templates/video/src/film.ts

@@ -1,7 +1,9 @@
-import { Application, Container, Graphics, Text } from "pixi.js";
+import { Application, Container, Graphics, Sprite, Text } from "pixi.js";
 import config from "../film.config.json";
 import story from "../shared/locales/en/film.json";
 import { filmResources } from "./film-resources";
+import type { FilmContext } from "./player-types";
+import type { ResourceTrack } from "./timeline-model";
 
 export const chapters = story.chapters;
 const clamp = (value: number) => Math.max(0, Math.min(1, value));
@@ -14,7 +16,7 @@ function text(value: string, size: number, color = "#16232A", weight: "400" | "7
 /** Replace these demo scenes with the film. Keep all motion a function of seconds. */
 export class Film {
   readonly stage = new Container();
-  readonly resources = filmResources(story, config);
+  readonly resources: ResourceTrack[];
   private readonly scenes: { root: Container; art: Container; headline: Text; detail: Text }[] = [];
   private readonly caption = text("", 30, "#FFFFFF", "400");
   private readonly captionBack = new Graphics();
@@ -34,10 +36,12 @@ export class Film {
     visit(this.stage);return result;
   }
 
-  constructor(private readonly app: Application) {
+  constructor(private readonly app: Application, context?: FilmContext) {
+    const identity = { ...story, brand: context?.branding.name ?? story.brand, tagline: context?.branding.tagline ?? story.tagline };
+    this.resources = filmResources(identity, config);
     app.stage.addChild(this.stage);
     this.stage.scale.set(config.width / 1920, config.height / 1080);
-    this.stage.addChild(new Graphics().rect(0, 0, 1920, 1080).fill("#F4F1E9"));
+    this.stage.addChild(new Graphics().rect(0, 0, 1920, 1080).fill(context?.branding.colors.background ?? "#F4F1E9"));
     // Deterministic paper flecks: never use Math.random() during frame rendering.
     const grain = new Graphics();
     for (let i = 0; i < 850; i++) grain.circle((i * 137.51) % 1920, (i * 71.73) % 1080, 1).fill({ color: "#23302D", alpha: 0.055 });
@@ -60,16 +64,16 @@ export class Film {
       const shape = new Graphics();
       if (index === 0) {
         shape.ellipse(0, 160, 152, 20).fill({ color: "#000000", alpha: 0.07 });
-        shape.roundRect(-106, -126, 210, 290, 70).fill("#2C6BD0");
+        shape.roundRect(-106, -126, 210, 290, 70).fill(context?.branding.colors.primary ?? "#2C6BD0");
         shape.star(0, -4, 8, 104, 52).fill("#F2D68B");
         shape.circle(0, -4, 30).fill("#FDFBF4");
       } else if (index === 1) {
         shape.roundRect(-168, -144, 334, 270, 24).fill("#DCE7BC");
         shape.circle(88, -67, 36).fill("#F3D88D");
-        shape.poly([-166, 108, -55, -54, 32, 67, 95, 4, 166, 126, -166, 126]).fill("#2C6BD0");
+        shape.poly([-166, 108, -55, -54, 32, 67, 95, 4, 166, 126, -166, 126]).fill(context?.branding.colors.primary ?? "#2C6BD0");
         shape.star(-148, -137, 4, 62, 17).fill("#263B32");
       } else {
-        shape.circle(0, 0, 155).fill("#2C6BD0");
+        shape.circle(0, 0, 155).fill(context?.branding.colors.primary ?? "#2C6BD0");
         shape.poly([-34, -65, 75, 0, -34, 65]).fill("#FFFDFA");
       }
       paper.addChild(shape);
@@ -78,7 +82,7 @@ export class Film {
       cardCaption.position.set(-7, 216);
       paper.addChild(cardCaption);
       art.addChild(paper);
-      const sparkle = new Graphics().star(236, -310, 4, 67, 19).fill("#2C6BD0").star(-305, 230, 4, 34, 10).fill("#314B38");
+      const sparkle = new Graphics().star(236, -310, 4, 67, 19).fill(context?.branding.colors.primary ?? "#2C6BD0").star(-305, 230, 4, 34, 10).fill("#314B38");
       art.addChild(sparkle);
       const eyebrow = text(chapter.eyebrow, 23, "#4D6052");
       eyebrow.position.set(120, 250);
@@ -93,14 +97,24 @@ export class Film {
       this.stage.addChild(root);
       this.scenes.push({ root, art, headline, detail });
     });
-    const mark = text(story.brand, 22);
+    const mark = context?.logo ? new Sprite(context.logo) : text(identity.brand, 22, context?.branding.colors.text ?? "#16232A");
+    if (context?.logo) mark.scale.set(Math.min(170 / mark.width, 54 / mark.height));
     mark.position.set(120, 88);
-    const preview = text(story.tagline, 20, "#637166");
+    const preview = text(identity.tagline, 20, "#637166");
     preview.anchor.set(1, 0);
     preview.position.set(1800, 88);
     this.caption.anchor.set(0.5);
     this.caption.position.set(960, 991);
     this.stage.addChild(mark, preview, this.captionBack, this.caption);
+    if (context) {
+      const visit = (node: Container) => {
+        if (node instanceof Text) node.style.fontFamily = node.style.fontWeight === "700" ? context.branding.fonts.heading.family : context.branding.fonts.body.family;
+        for (const child of node.children) visit(child);
+      };
+      visit(this.stage);
+      if (context.branding.logo) this.resources = this.resources.filter((track) => track.id !== "branding");
+      if (context.branding.logo) this.resources.push({ id: "brand-logo", label: identity.brand, kind: "image", clips: [{ id: "brand-logo", label: identity.brand, source: context.branding.logo, start: 0, end: config.duration }] });
+    }
   }
 
   /** Await video seeks/font readiness here before returning when adding media. */

package/templates/video/src/main.ts

@@ -1,219 +1,5 @@
-import { Application } from "pixi.js";
 import config from "../film.config.json";
-import copy from "../shared/locales/en/player.json";
 import { Film, chapters } from "./film";
-import { publicAsset } from "./assets";
-import { downloadHtml, downloadUrl } from "./download";
-import type { ResourceTimeline } from "./resource-timeline";
-import "./style.css";
+import { mountPlayer } from "./player";
 
-const root = document.querySelector<HTMLDivElement>("#app")!;
-// All variable copy is inserted as text, including agent-authored film titles.
-root.innerHTML = `<header class="masthead"><a class="brand" href="https://animaguru.com" target="_blank" rel="noreferrer"><img src="${publicAsset("brand/logo-mark.svg")}" alt=""/><strong>AnimaGuru</strong><span data-copy="studio"></span></a><span class="template" data-copy="template"></span></header>
-<main>
-<section id="theater"><div id="canvas-host"><p id="loading" role="status" data-copy="loading"></p></div><div class="transport"><button id="play" class="primary" data-copy="play"></button><span id="time">0:00 / 0:24</span><input id="timeline" type="range" min="0" value="0" step="0.01"/><div class="tools"><button id="sound" data-copy="unmute" aria-pressed="false"></button><button id="captions" aria-pressed="true">CC</button><div class="download-control"><button id="download" class="icon-button" aria-haspopup="menu" aria-expanded="false" aria-controls="download-menu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v12m-5-5 5 5 5-5M4 16v5h16v-5"/></svg></button><div id="download-menu" role="menu" hidden><button id="save" role="menuitem" tabindex="-1"><span data-copy="saveFrame"></span><small data-copy="pngFormat"></small></button><button id="export-html" role="menuitem" tabindex="-1"><span data-copy="exportHtml"></span><small data-copy="htmlFormat"></small></button></div></div><button id="fullscreen" class="icon-button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3H3v5m13-5h5v5M3 16v5h5m13-5v5h-5"/></svg></button></div></div></section>
-<p class="player-note"><span class="preview-meta"><span class="specs"></span><span aria-hidden="true">·</span><span data-copy="starter"></span></span><span data-copy="exportHint"></span></p><p id="status" role="status"></p>
-<section id="resource-timeline"></section>
-<details><summary data-copy="transcript"></summary><div id="transcript"></div></details>
-</main><footer><span data-copy="footer"></span><span data-copy="footerTagline"></span></footer>`;
-for (const element of document.querySelectorAll<HTMLElement>("[data-copy]")) element.textContent = copy[element.dataset.copy as keyof typeof copy];
-const element = <T extends HTMLElement>(id: string) => document.getElementById(id) as T;
-const playButton = element<HTMLButtonElement>("play");
-const soundButton = element<HTMLButtonElement>("sound");
-const captionsButton = element<HTMLButtonElement>("captions");
-const timeline = element<HTMLInputElement>("timeline");
-const theater = element<HTMLElement>("theater");
-const status = element<HTMLElement>("status");
-const params = new URLSearchParams(location.search);
-const embed = import.meta.env.MODE === "embed" || params.has("embed");
-const capture = params.has("capture");
-const exporting = !embed && params.has("export");
-const autoplay = embed && params.get("autoplay") === "1" && !matchMedia("(prefers-reduced-motion: reduce)").matches;
-const loop = embed && params.get("loop") === "1";
-if (capture) document.body.classList.add("capture");
-if (embed) document.body.classList.add("embed");
-if (embed && autoplay && params.get("controls") === "0") document.body.classList.add("no-controls");
-document.documentElement.lang = config.language;
-document.title = `${config.title} · AnimaGuru`;
-document.querySelector(".specs")!.textContent = `${config.width} × ${config.height} / ${config.fps} FPS`;
-timeline.max = String(config.duration);
-theater.setAttribute("aria-label", copy.videoPlayer);
-element("canvas-host").style.aspectRatio = `${config.width} / ${config.height}`;
-timeline.setAttribute("aria-label", copy.timeline);
-captionsButton.setAttribute("aria-label", copy.captions);
-for (const [id, label] of [["download", copy.download], ["fullscreen", copy.fullscreen], ["download-menu", copy.download]] as const) {
-  element(id).setAttribute("aria-label", label);
-  if (id !== "download-menu") element(id).title = label;
-}
-const format = (time: number) => `${Math.floor(time / 60)}:${String(Math.floor(time % 60)).padStart(2, "0")}`;
-
-async function start() {
-  await document.fonts.ready;
-  const app = new Application();
-  await app.init({ width: config.width, height: config.height, resolution: 1, autoStart: false, antialias: true, background: "#F4F1E9", preference: "webgl", preserveDrawingBuffer: true });
-  app.canvas.setAttribute("aria-label", config.title);
-  element("canvas-host").append(app.canvas);
-  element("loading").remove();
-  const film = new Film(app);
-  const audio = config.audio ? new Audio(publicAsset(String(config.audio))) : null;
-  if (audio) { audio.preload = "auto"; audio.muted = true; }
-  let time = Math.max(0, Math.min(Number(params.get("t")) || 0, config.duration));
-  let playing = false;
-  let muted = true;
-  let last = performance.now();
-  let renderQueue = Promise.resolve();
-  let playbackRequest = 0;
-  let resources: ResourceTimeline | undefined;
-  const update = () => {
-    playButton.textContent = playing ? copy.pause : time >= config.duration ? copy.replay : copy.play;
-    playButton.setAttribute("aria-label", playButton.textContent);
-    element("time").textContent = `${format(time)} / ${format(config.duration)}`;
-    timeline.value = String(time);
-    timeline.setAttribute("aria-valuetext", `${format(time)} / ${format(config.duration)}`);
-    soundButton.textContent = !audio ? copy.noAudio : muted ? copy.unmute : copy.mute;
-    soundButton.disabled = !audio;
-    soundButton.setAttribute("aria-pressed", String(!muted));
-    captionsButton.setAttribute("aria-pressed", String(film.captions));
-    resources?.update({ time, playing, captions: film.captions, muted });
-  };
-  const render = (seconds: number) => {
-    // Seeking and frame capture are serialized so decoded video frames cannot race.
-    renderQueue = renderQueue.then(() => film.render(seconds));
-    return renderQueue;
-  };
-  function pause() { playbackRequest++; playing = false; audio?.pause(); update(); }
-  async function seek(seconds: number) {
-    if (!Number.isFinite(seconds)) throw new Error("Seek time must be finite.");
-    time = Math.max(0, Math.min(seconds, config.duration)); pause();
-    if (audio) audio.currentTime = time;
-    await render(time); update();
-  }
-  async function play() {
-    if (exporting) return;
-    if (time >= config.duration) await seek(0);
-    const request = ++playbackRequest;
-    if (audio) {
-      audio.currentTime = time;
-      try { await audio.play(); } catch { status.textContent = copy.audioFailed; }
-    }
-    if (request !== playbackRequest) { audio?.pause(); return; }
-    last = performance.now(); playing = true; update();
-  }
-  function toggleSound() {
-    if (!audio) return;
-    muted = !muted; audio.muted = muted; update();
-  }
-  function setCaptions(value: boolean) { film.captions = value; void render(time); update(); }
-  async function fullscreen() {
-    try { if (document.fullscreenElement) await document.exitFullscreen(); else await theater.requestFullscreen(); }
-    catch { status.textContent = copy.fullscreenFailed; }
-  }
-  async function saveFrame() {
-    pause(); await render(time);
-    app.canvas.toBlob((blob) => {
-      if (!blob) return;
-      const url = URL.createObjectURL(blob);
-      downloadUrl(url, `${config.slug}-${Math.round(time * config.fps)}.png`);
-      setTimeout(() => URL.revokeObjectURL(url), 1000);
-    }, "image/png");
-  }
-  const downloadButton = element<HTMLButtonElement>("download");
-  const downloadMenu = element<HTMLElement>("download-menu");
-  const downloadItems = [...downloadMenu.querySelectorAll<HTMLButtonElement>("button")];
-  function closeDownloads(restoreFocus = false) {
-    downloadMenu.hidden = true;
-    downloadButton.setAttribute("aria-expanded", "false");
-    if (restoreFocus) downloadButton.focus();
-  }
-  function openDownloads(last = false) {
-    downloadMenu.hidden = false;
-    downloadButton.setAttribute("aria-expanded", "true");
-    downloadItems[last ? downloadItems.length - 1 : 0].focus();
-  }
-  downloadButton.addEventListener("click", () => { if (downloadMenu.hidden) openDownloads(); else closeDownloads(true); });
-  downloadButton.addEventListener("keydown", (event) => {
-    if (event.key === "ArrowDown" || event.key === "ArrowUp") { event.preventDefault(); openDownloads(event.key === "ArrowUp"); }
-  });
-  downloadMenu.addEventListener("keydown", (event) => {
-    if (event.key === "Escape") { event.preventDefault(); closeDownloads(true); }
-    if (event.key === "Tab") { event.preventDefault(); closeDownloads(true); }
-    const index = downloadItems.indexOf(document.activeElement as HTMLButtonElement);
-    if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
-      event.preventDefault();
-      const next = event.key === "Home" ? 0 : event.key === "End" ? downloadItems.length - 1 : (index + (event.key === "ArrowDown" ? 1 : -1) + downloadItems.length) % downloadItems.length;
-      downloadItems[next].focus();
-    }
-  });
-  document.addEventListener("click", (event) => { if (event.target instanceof Node && !element("download").parentElement!.contains(event.target)) closeDownloads(); });
-  element("export-html").addEventListener("click", async () => {
-    closeDownloads(true);
-    downloadButton.disabled = true;
-    downloadButton.setAttribute("aria-busy", "true");
-    status.textContent = copy.exportPreparing;
-    try { await downloadHtml(); status.textContent = copy.exportReady; }
-    catch (error) { status.textContent = copy.exportFailed; console.error(error); }
-    finally { downloadButton.disabled = false; downloadButton.removeAttribute("aria-busy"); }
-  });
-  for (const chapter of chapters) {
-    const paragraph = document.createElement("p"); paragraph.textContent = `${format(chapter.start)} — ${chapter.caption}`;
-    element("transcript").append(paragraph);
-  }
-  if (!embed && !capture) {
-    const { ResourceTimeline } = await import("./resource-timeline");
-    resources = new ResourceTimeline(element("resource-timeline"), {
-      duration: config.duration, fps: config.fps, tracks: film.resources, seek,
-      onError: (error) => { status.textContent = copy.failed; console.error(error); },
-    });
-  }
-  playButton.addEventListener("click", () => { if (playing) pause(); else void play(); });
-  soundButton.addEventListener("click", toggleSound);
-  captionsButton.addEventListener("click", () => setCaptions(!film.captions));
-  element("fullscreen").addEventListener("click", () => { void fullscreen(); });
-  element("save").addEventListener("click", () => { closeDownloads(true); void saveFrame(); });
-  timeline.addEventListener("input", () => { void seek(Number(timeline.value)); });
-  document.addEventListener("visibilitychange", () => { if (document.hidden && !exporting) pause(); });
-  document.addEventListener("keydown", (event) => {
-    if (exporting || event.target instanceof HTMLElement && event.target.closest("button,input,a,summary,textarea,select,[contenteditable]")) return;
-    if (event.code === "Space") { event.preventDefault(); if (playing) pause(); else void play(); }
-    if (event.code === "ArrowRight") { event.preventDefault(); void seek(time + 5); }
-    if (event.code === "ArrowLeft") { event.preventDefault(); void seek(time - 5); }
-    if (event.key.toLowerCase() === "m") toggleSound();
-    if (event.key.toLowerCase() === "c") setCaptions(!film.captions);
-    if (event.key.toLowerCase() === "f") void fullscreen();
-  });
-  async function tick(now: number) {
-    try {
-      if (playing) {
-        time = Math.min(config.duration, audio && !audio.paused ? audio.currentTime : time + (now - last) / 1000);
-        await render(time);
-        if (time >= config.duration) { if (loop) { await seek(0); await play(); } else pause(); }
-        update();
-      }
-      last = now;
-      requestAnimationFrame((next) => { void tick(next); });
-    } catch (error) { pause(); status.textContent = copy.failed; console.error(error); }
-  }
-  await render(time); update();
-  const api = {
-    ready: true, width: config.width, height: config.height, duration: config.duration, fps: config.fps, language: config.language, canvas: app.canvas,
-    get state() { return { time, playing, muted, captions: film.captions }; },
-    resources: film.resources,
-    get texts() { return film.texts; },
-    get cues() { return film.cues; },
-    seek, play, pause, setCaptions, saveFrame,
-    async renderFrame(frame: number, fps = config.fps) { await seek(frame / fps); },
-  };
-  Object.assign(window, { animaguru: api });
-  window.dispatchEvent(new Event("animaguru:ready"));
-  if (!embed && params.has("review")) {
-    const { reviewFilm } = await import("./review");
-    await reviewFilm(api, params.get("review")!);
-  } else if (exporting) {
-    const { exportMp4 } = await import("./exporter");
-    await exportMp4(api, params.get("export")!);
-  } else {
-    if (autoplay) await play();
-    requestAnimationFrame((next) => { void tick(next); });
-  }
-}
-void start().catch((error) => { status.textContent = copy.failed; element("loading")?.remove(); console.error(error); });
+void mountPlayer({ config, Film, chapters });

package/templates/video/src/player-types.ts

@@ -0,0 +1,27 @@
+import type { Application, Texture } from "pixi.js";
+import type { ResourceTrack } from "./timeline-model";
+
+export type FilmConfig = {
+  title: string; slug: string; width: number; height: number; fps: number;
+  duration: number; language: string; audio: string | null;
+};
+export type Branding = {
+  name: string; tagline: string; logo: string | null; assets?: Record<string, string>;
+  colors: { primary: string; background: string; text: string };
+  fonts: { heading: { family: string; file: string | null }; body: { family: string; file: string | null } };
+};
+export type FilmContext = { branding: Branding; logo: Texture | null };
+export type FilmRenderer = {
+  captions: boolean; resources: ResourceTrack[];
+  texts: { id: string; text: string; x: number; y: number; width: number; height: number }[];
+  cues: unknown[];
+  render(seconds: number): void | Promise<void>;
+};
+export type PlayerOptions = {
+  config: FilmConfig;
+  Film: new (app: Application, context?: FilmContext) => FilmRenderer;
+  chapters: { start: number; end: number; label: string; caption: string }[];
+  branding?: Branding;
+  exportEndpoint?: string;
+  templateLabel?: string;
+};

package/templates/video/src/player.ts

@@ -0,0 +1,231 @@
+import { Application, Assets } from "pixi.js";
+import type { PlayerOptions } from "./player-types";
+import copy from "../shared/locales/en/player.json";
+import { publicAsset } from "./assets";
+import { downloadHtml, downloadUrl } from "./download";
+import type { ResourceTimeline } from "./resource-timeline";
+import "./style.css";
+
+export async function mountPlayer({ config, Film, chapters, branding, exportEndpoint, templateLabel }: PlayerOptions) {
+  const root = document.querySelector<HTMLDivElement>("#app")!;
+  // All variable copy is inserted as text, including agent-authored film titles.
+  root.innerHTML = `<header class="masthead"><a class="brand" href="https://animaguru.com" target="_blank" rel="noreferrer"><img src="${publicAsset("brand/logo-mark.svg")}" alt=""/><strong>AnimaGuru</strong><span data-copy="studio"></span></a><span class="template" data-copy="template"></span></header>
+  <main>
+  <section id="theater"><div id="canvas-host"><p id="loading" role="status" data-copy="loading"></p></div><div class="transport"><button id="play" class="primary" data-copy="play"></button><span id="time">0:00 / 0:24</span><input id="timeline" type="range" min="0" value="0" step="0.01"/><div class="tools"><button id="sound" data-copy="unmute" aria-pressed="false"></button><button id="captions" aria-pressed="true">CC</button><div class="download-control"><button id="download" class="icon-button" aria-haspopup="menu" aria-expanded="false" aria-controls="download-menu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v12m-5-5 5 5 5-5M4 16v5h16v-5"/></svg></button><div id="download-menu" role="menu" hidden><button id="save" role="menuitem" tabindex="-1"><span data-copy="saveFrame"></span><small data-copy="pngFormat"></small></button><button id="export-html" role="menuitem" tabindex="-1"><span data-copy="exportHtml"></span><small data-copy="htmlFormat"></small></button></div></div><button id="fullscreen" class="icon-button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3H3v5m13-5h5v5M3 16v5h5m13-5v5h-5"/></svg></button></div></div><p id="audio-status" role="status" hidden></p></section>
+  <p class="player-note"><span class="preview-meta"><span class="specs"></span><span aria-hidden="true">·</span><span data-copy="starter"></span></span><span data-copy="exportHint"></span></p><p id="status" role="status"></p>
+  <section id="resource-timeline"></section>
+  <details><summary data-copy="transcript"></summary><div id="transcript"></div></details>
+  </main><footer><span data-copy="footer"></span><span data-copy="footerTagline"></span></footer>`;
+  for (const element of document.querySelectorAll<HTMLElement>("[data-copy]")) element.textContent = copy[element.dataset.copy as keyof typeof copy];
+  const element = <T extends HTMLElement>(id: string) => document.getElementById(id) as T;
+  const playButton = element<HTMLButtonElement>("play");
+  const soundButton = element<HTMLButtonElement>("sound");
+  const captionsButton = element<HTMLButtonElement>("captions");
+  const timeline = element<HTMLInputElement>("timeline");
+  const theater = element<HTMLElement>("theater");
+  const status = element<HTMLElement>("status");
+  if (templateLabel) document.querySelector<HTMLElement>(".template")!.textContent = templateLabel;
+  const params = new URLSearchParams(location.search);
+  const embed = import.meta.env.MODE === "embed" || params.has("embed");
+  const capture = params.has("capture");
+  const exporting = !embed && params.has("export");
+  const autoplay = embed && params.get("autoplay") === "1" && !matchMedia("(prefers-reduced-motion: reduce)").matches;
+  const loop = embed && params.get("loop") === "1";
+  if (capture) document.body.classList.add("capture");
+  if (embed) document.body.classList.add("embed");
+  if (embed && autoplay && params.get("controls") === "0") document.body.classList.add("no-controls");
+  document.documentElement.lang = config.language;
+  document.title = `${config.title} · AnimaGuru`;
+  document.querySelector(".specs")!.textContent = `${config.width} × ${config.height} / ${config.fps} FPS`;
+  timeline.max = String(config.duration);
+  theater.setAttribute("aria-label", copy.videoPlayer);
+  element("canvas-host").style.aspectRatio = `${config.width} / ${config.height}`;
+  timeline.setAttribute("aria-label", copy.timeline);
+  captionsButton.setAttribute("aria-label", copy.captions);
+  for (const [id, label] of [["download", copy.download], ["fullscreen", copy.fullscreen], ["download-menu", copy.download]] as const) {
+    element(id).setAttribute("aria-label", label);
+    if (id !== "download-menu") element(id).title = label;
+  }
+  const format = (time: number) => `${Math.floor(time / 60)}:${String(Math.floor(time % 60)).padStart(2, "0")}`;
+
+  async function start() {
+    await document.fonts.ready;
+    const app = new Application();
+    await app.init({ width: config.width, height: config.height, resolution: 1, autoStart: false, antialias: true, background: "#F4F1E9", preference: "webgl", preserveDrawingBuffer: true });
+    app.canvas.setAttribute("aria-label", config.title);
+    element("canvas-host").append(app.canvas);
+    element("loading").remove();
+    if (branding) {
+      for (const font of Object.values(branding.fonts)) {
+        if (font.file) { const face = new FontFace(font.family, `url(${JSON.stringify(publicAsset(font.file))})`); document.fonts.add(await face.load()); }
+      }
+    }
+    const logo = branding?.logo ? await Assets.load(publicAsset(branding.logo)) : null;
+    const film = new Film(app, branding ? { branding, logo } : undefined);
+    const audio = config.audio ? new Audio() : null;
+    const audioStatus = element<HTMLElement>("audio-status");
+    const audioFailure = () => { audioStatus.hidden = false; audioStatus.textContent = copy.audioFailed; };
+    // User-initiated playback is audible. Browser autoplay and frame capture remain muted.
+    const initialMuted = autoplay || capture || exporting;
+    if (audio) { audio.crossOrigin = "anonymous"; audio.src = publicAsset(String(config.audio)); audio.preload = "auto"; audio.muted = initialMuted; audio.addEventListener("error", audioFailure); }
+    let time = Math.max(0, Math.min(Number(params.get("t")) || 0, config.duration));
+    let playing = false;
+    let muted = initialMuted;
+    let last = performance.now();
+    let renderQueue = Promise.resolve();
+    let playbackRequest = 0;
+    let resources: ResourceTimeline | undefined;
+    const update = () => {
+      playButton.textContent = playing ? copy.pause : time >= config.duration ? copy.replay : copy.play;
+      playButton.setAttribute("aria-label", playButton.textContent);
+      element("time").textContent = `${format(time)} / ${format(config.duration)}`;
+      timeline.value = String(time);
+      timeline.setAttribute("aria-valuetext", `${format(time)} / ${format(config.duration)}`);
+      soundButton.textContent = !audio ? copy.noAudio : muted ? copy.unmute : copy.mute;
+      soundButton.disabled = !audio;
+      soundButton.setAttribute("aria-pressed", String(Boolean(audio) && !muted));
+      captionsButton.setAttribute("aria-pressed", String(film.captions));
+      resources?.update({ time, playing, captions: film.captions, muted });
+    };
+    const render = (seconds: number) => {
+      // Seeking and frame capture are serialized so decoded video frames cannot race.
+      renderQueue = renderQueue.then(() => film.render(seconds));
+      return renderQueue;
+    };
+    function pause() { playbackRequest++; playing = false; audio?.pause(); update(); }
+    async function seek(seconds: number) {
+      if (!Number.isFinite(seconds)) throw new Error("Seek time must be finite.");
+      time = Math.max(0, Math.min(seconds, config.duration)); pause();
+      if (audio) audio.currentTime = time;
+      await render(time); update();
+    }
+    async function play() {
+      if (exporting) return;
+      if (time >= config.duration) await seek(0);
+      const request = ++playbackRequest;
+      if (audio) {
+        audio.currentTime = time;
+        try { await audio.play(); audioStatus.hidden = true; } catch { audioFailure(); }
+      }
+      if (request !== playbackRequest) { audio?.pause(); return; }
+      last = performance.now(); playing = true; update();
+    }
+    function toggleSound() {
+      if (!audio) return;
+      muted = !muted; audio.muted = muted; update();
+    }
+    function setCaptions(value: boolean) { film.captions = value; void render(time); update(); }
+    async function fullscreen() {
+      try { if (document.fullscreenElement) await document.exitFullscreen(); else await theater.requestFullscreen(); }
+      catch { status.textContent = copy.fullscreenFailed; }
+    }
+    async function saveFrame() {
+      pause(); await render(time);
+      app.canvas.toBlob((blob) => {
+        if (!blob) return;
+        const url = URL.createObjectURL(blob);
+        downloadUrl(url, `${config.slug}-${Math.round(time * config.fps)}.png`);
+        setTimeout(() => URL.revokeObjectURL(url), 1000);
+      }, "image/png");
+    }
+    const downloadButton = element<HTMLButtonElement>("download");
+    const downloadMenu = element<HTMLElement>("download-menu");
+    const downloadItems = [...downloadMenu.querySelectorAll<HTMLButtonElement>("button")];
+    function closeDownloads(restoreFocus = false) {
+      downloadMenu.hidden = true;
+      downloadButton.setAttribute("aria-expanded", "false");
+      if (restoreFocus) downloadButton.focus();
+    }
+    function openDownloads(last = false) {
+      downloadMenu.hidden = false;
+      downloadButton.setAttribute("aria-expanded", "true");
+      downloadItems[last ? downloadItems.length - 1 : 0].focus();
+    }
+    downloadButton.addEventListener("click", () => { if (downloadMenu.hidden) openDownloads(); else closeDownloads(true); });
+    downloadButton.addEventListener("keydown", (event) => {
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") { event.preventDefault(); openDownloads(event.key === "ArrowUp"); }
+    });
+    downloadMenu.addEventListener("keydown", (event) => {
+      if (event.key === "Escape") { event.preventDefault(); closeDownloads(true); }
+      if (event.key === "Tab") { event.preventDefault(); closeDownloads(true); }
+      const index = downloadItems.indexOf(document.activeElement as HTMLButtonElement);
+      if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+        event.preventDefault();
+        const next = event.key === "Home" ? 0 : event.key === "End" ? downloadItems.length - 1 : (index + (event.key === "ArrowDown" ? 1 : -1) + downloadItems.length) % downloadItems.length;
+        downloadItems[next].focus();
+      }
+    });
+    document.addEventListener("click", (event) => { if (event.target instanceof Node && !element("download").parentElement!.contains(event.target)) closeDownloads(); });
+    element("export-html").addEventListener("click", async () => {
+      closeDownloads(true);
+      downloadButton.disabled = true;
+      downloadButton.setAttribute("aria-busy", "true");
+      status.textContent = copy.exportPreparing;
+      try { await downloadHtml(config, exportEndpoint); status.textContent = copy.exportReady; }
+      catch (error) { status.textContent = copy.exportFailed; console.error(error); }
+      finally { downloadButton.disabled = false; downloadButton.removeAttribute("aria-busy"); }
+    });
+    for (const chapter of chapters) {
+      const paragraph = document.createElement("p"); paragraph.textContent = `${format(chapter.start)} — ${chapter.caption}`;
+      element("transcript").append(paragraph);
+    }
+    if (!embed && !capture) {
+      const { ResourceTimeline } = await import("./resource-timeline");
+      resources = new ResourceTimeline(element("resource-timeline"), {
+        duration: config.duration, fps: config.fps, tracks: film.resources, seek,
+        onError: (error) => { status.textContent = copy.failed; console.error(error); },
+      });
+    }
+    playButton.addEventListener("click", () => { if (playing) pause(); else void play(); });
+    soundButton.addEventListener("click", toggleSound);
+    captionsButton.addEventListener("click", () => setCaptions(!film.captions));
+    element("fullscreen").addEventListener("click", () => { void fullscreen(); });
+    element("save").addEventListener("click", () => { closeDownloads(true); void saveFrame(); });
+    timeline.addEventListener("input", () => { void seek(Number(timeline.value)); });
+    document.addEventListener("visibilitychange", () => { if (document.hidden && !exporting) pause(); });
+    document.addEventListener("keydown", (event) => {
+      if (exporting || event.target instanceof HTMLElement && event.target.closest("button,input,a,summary,textarea,select,[contenteditable]")) return;
+      if (event.code === "Space") { event.preventDefault(); if (playing) pause(); else void play(); }
+      if (event.code === "ArrowRight") { event.preventDefault(); void seek(time + 5); }
+      if (event.code === "ArrowLeft") { event.preventDefault(); void seek(time - 5); }
+      if (event.key.toLowerCase() === "m") toggleSound();
+      if (event.key.toLowerCase() === "c") setCaptions(!film.captions);
+      if (event.key.toLowerCase() === "f") void fullscreen();
+    });
+    async function tick(now: number) {
+      try {
+        if (playing) {
+          time = Math.min(config.duration, audio && !audio.paused ? audio.currentTime : time + (now - last) / 1000);
+          await render(time);
+          if (time >= config.duration) { if (loop) { await seek(0); await play(); } else pause(); }
+          update();
+        }
+        last = now;
+        requestAnimationFrame((next) => { void tick(next); });
+      } catch (error) { pause(); status.textContent = copy.failed; console.error(error); }
+    }
+    await render(time); update();
+    const api = {
+      ready: true, width: config.width, height: config.height, duration: config.duration, fps: config.fps, language: config.language, canvas: app.canvas,
+      get state() { return { time, playing, muted, captions: film.captions, audio: { configured: Boolean(audio), readyState: audio?.readyState ?? 0, error: audio?.error?.code ?? null } }; },
+      resources: film.resources,
+      get texts() { return film.texts; },
+      get cues() { return film.cues; },
+      seek, play, pause, setCaptions, saveFrame,
+      async renderFrame(frame: number, fps = config.fps) { await seek(frame / fps); },
+    };
+    Object.assign(window, { animaguru: api });
+    window.dispatchEvent(new Event("animaguru:ready"));
+    if (!embed && params.has("review")) {
+      const { reviewFilm } = await import("./review");
+      await reviewFilm(api, params.get("review")!);
+    } else if (exporting) {
+      const { exportMp4 } = await import("./exporter");
+      await exportMp4(api, params.get("export")!);
+    } else {
+      if (autoplay) await play();
+      requestAnimationFrame((next) => { void tick(next); });
+    }
+  }
+  await start().catch((error) => { status.textContent = copy.failed; element("loading")?.remove(); console.error(error); });
+}

package/templates/video/src/style.css

@@ -109,3 +109,6 @@ footer span:last-child { font-size: 8px; letter-spacing: 1.5px; }
   footer { padding: 25px 20px; }footer span:last-child { display: none; }
 }
 @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }
+
+#audio-status { margin: 0; padding: 9px 16px; font-size: 12px; color: #8b2f25; background: #fff1eb; }
+.capture #audio-status { display: none; }

package/templates/video/vite.config.mjs

@@ -1,9 +1,14 @@
 import { defineConfig } from "vite";
 import { fileURLToPath } from "node:url";
+import { workspaceInfo } from "./scripts/project-context.mjs";
+import { workspacePlugin } from "./scripts/workspace-plugin.mjs";
 import { htmlExportPlugin } from "./scripts/html-export-plugin.mjs";
 
+const root = fileURLToPath(new URL("./", import.meta.url));
+const workspace = await workspaceInfo(root);
 export default defineConfig({
   base: "./",
+  publicDir: workspace ? false : undefined,
   server: { watch: { ignored: ["**/production/exports/**"] } },
-  plugins: [htmlExportPlugin(fileURLToPath(new URL("./", import.meta.url)))],
+  plugins: [...(workspace ? [workspacePlugin(root)] : []), htmlExportPlugin(root)],
 });