@docyrus/animaguru 0.19.0 → 0.22.0

package/templates/video/src/story.ts

@@ -0,0 +1,112 @@
+import { validateStory, type StoryGraph, type StorySegment } from "../scripts/story.mjs";
+import type { Branding } from "./player-types";
+
+export type { StoryGraph, StorySegment };
+export type StoryCopy = { theEnd: string; playAgain: string; back: string; choose: string };
+/** What the panel over the picture shows: nothing, the segment's choices, or its ending. */
+export type StoryView =
+  | { kind: "none" }
+  | { kind: "choices"; segment: StorySegment; picked: number | null; remaining: number | null }
+  | { kind: "ending"; segment: StorySegment; canGoBack: boolean };
+
+/** The story's segments by id and by time; the graph is checked once, against the film's duration. */
+export class StoryMap {
+  private readonly byId: Map<string, StorySegment>;
+  private readonly ordered: StorySegment[];
+  constructor(readonly graph: StoryGraph, duration: number) {
+    validateStory(graph, { duration });
+    this.byId = new Map(graph.segments.map((segment) => [segment.id, segment]));
+    this.ordered = [...graph.segments].sort((a, b) => a.start - b.start);
+  }
+  get first() { return this.get(this.graph.start); }
+  get(id: string) {
+    const segment = this.byId.get(id);
+    if (!segment) throw new Error(`The story has no segment ${id}.`);
+    return segment;
+  }
+  /** The segment playing at a time of the film's timeline; a boundary belongs to the segment that starts there. */
+  at(time: number) {
+    let found = this.ordered[0];
+    for (const segment of this.ordered) if (segment.start <= time + 1e-6) found = segment;
+    return found;
+  }
+  /** When a segment's choices appear. */
+  choiceAt(segment: StorySegment) { return segment.choiceAt ?? segment.end; }
+}
+
+/**
+ * The choice and ending panels over the picture. They are HTML buttons, so a viewer can tab to them, a screen reader
+ * reads them and a touch picks them; 1–4 on the keyboard choose too. The panels are rebuilt only when what they show
+ * changes, so focus and hover survive every frame's update.
+ */
+export class StoryOverlay {
+  readonly element = document.createElement("div");
+  private readonly live = document.createElement("p");
+  private shown = "";
+  private timer: HTMLElement | null = null;
+
+  constructor(host: HTMLElement, graph: StoryGraph, private readonly copy: StoryCopy, branding: Branding | undefined,
+    private readonly actions: { choose(index: number): void; restart(): void; back(): void }) {
+    this.element.className = "story-layer";
+    const theme = graph.theme ?? {};
+    this.element.style.setProperty("--story-accent", theme.accent ?? branding?.colors.primary ?? "#2c6bd0");
+    this.element.style.setProperty("--story-surface", theme.surface ?? "#fffdfa");
+    this.element.style.setProperty("--story-text", theme.text ?? branding?.colors.text ?? "#16232a");
+    if (branding) this.element.style.setProperty("--story-font", branding.fonts.heading.family);
+    this.live.className = "story-live"; this.live.setAttribute("role", "status");
+    host.append(this.element, this.live);
+  }
+
+  render(view: StoryView) {
+    const key = view.kind === "none" ? "none" : `${view.kind}:${view.segment.id}:${view.kind === "choices" ? view.picked : view.canGoBack}`;
+    if (key !== this.shown) { this.shown = key; this.build(view); }
+    if (view.kind === "choices" && this.timer) this.timer.style.transform = `scaleX(${Math.max(0, view.remaining ?? 0)})`;
+  }
+
+  private build(view: StoryView) {
+    this.element.replaceChildren(); this.timer = null;
+    this.element.dataset.view = view.kind;
+    if (view.kind === "none") return;
+    const panel = document.createElement("div");
+    panel.className = `story-panel story-panel-${view.kind}`;
+    const button = (label: string, action: () => void, className = "") => {
+      const element = document.createElement("button");
+      element.type = "button"; element.className = className; element.textContent = label;
+      // A click on a choice is not a click on the picture, which would pause the film.
+      element.addEventListener("click", (event) => { event.stopPropagation(); action(); });
+      return element;
+    };
+    if (view.kind === "choices") {
+      const { segment, picked } = view;
+      panel.setAttribute("role", "group");
+      const prompt = segment.prompt ?? this.copy.choose;
+      panel.setAttribute("aria-label", prompt);
+      if (segment.prompt) {
+        const heading = document.createElement("p"); heading.className = "story-prompt"; heading.textContent = segment.prompt;
+        panel.append(heading);
+      }
+      if (segment.timeout !== undefined && picked === null) {
+        const track = document.createElement("div"); track.className = "story-timer"; track.setAttribute("aria-hidden", "true");
+        this.timer = document.createElement("span"); track.append(this.timer); panel.append(track);
+      }
+      const choices = document.createElement("div"); choices.className = "story-choices";
+      segment.choices!.forEach((choice, index) => {
+        const element = button(choice.label, () => this.actions.choose(index), picked === index ? "picked" : "");
+        element.dataset.key = String(index + 1);
+        if (picked !== null) { element.disabled = picked !== index; element.setAttribute("aria-pressed", String(picked === index)); }
+        choices.append(element);
+      });
+      panel.append(choices);
+      this.live.textContent = picked === null ? `${prompt} ${segment.choices!.map((choice, index) => `${index + 1}: ${choice.label}.`).join(" ")}` : segment.choices![picked].label;
+    } else {
+      const eyebrow = document.createElement("p"); eyebrow.className = "story-eyebrow"; eyebrow.textContent = this.copy.theEnd;
+      const title = document.createElement("h2"); title.className = "story-title"; title.textContent = view.segment.ending!;
+      const actions = document.createElement("div"); actions.className = "story-choices";
+      actions.append(button(this.copy.playAgain, this.actions.restart, "picked"));
+      if (view.canGoBack) actions.append(button(this.copy.back, this.actions.back));
+      panel.append(eyebrow, title, actions);
+      this.live.textContent = `${this.copy.theEnd}: ${view.segment.ending}`;
+    }
+    this.element.append(panel);
+  }
+}

package/templates/video/src/style.css

@@ -15,7 +15,18 @@ button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visibl
 main { max-width: 1380px; margin: auto; padding: 45px 48px 15px; }
 .eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 1.9px; margin: 0 0 12px; color: #667660; }
 .specs { font: 10px monospace; color: #6a7668; white-space: nowrap; }
-#theater { border-radius: 17px; overflow: hidden; border: 1px solid #d9ddcf; background: #f4f1e9; box-shadow: 0 16px 60px #1726240d; }
+#theater { container: theater / inline-size; border-radius: 17px; overflow: hidden; border: 1px solid #d9ddcf; background: #f4f1e9; box-shadow: 0 16px 60px #1726240d; }
+/* The page's player fits the window: its width follows the height left for the picture below the page header and above
+   the controls, so the picture and the controls show without scrolling and the timeline follows below. The player
+   measures that header and those controls (--player-above, --player-controls). The small viewport height keeps the
+   size steady while a phone's toolbars come and go. The picture keeps 240px of height where the window has it: a header
+   that leaves less scrolls away instead, as on a phone on its side. The player keeps a width its controls fit, and a
+   tall film narrower than that shows with bars at its sides, as on a phone. */
+.fit-window { --player-room: calc(100vh - var(--player-controls) - 16px); }
+@supports (height: 100svh) { .fit-window { --player-room: calc(100svh - var(--player-controls) - 16px); } }
+.fit-window { --player-fit: max(var(--player-room) - var(--player-above), min(var(--player-room), 240px)); }
+.fit-window #theater:not(.expanded):not(:fullscreen), .fit-window .player-note { min-width: min(100%, 360px); max-width: calc(var(--player-fit) * var(--film-aspect) + 2px); margin-inline: auto; }
+.fit-window #theater:not(.expanded):not(:fullscreen) #canvas-host { max-height: var(--player-fit); }
 #canvas-host { width: 100%; position: relative; aspect-ratio: 16 / 9; }
 #canvas-host canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
 #loading { position: absolute; inset: 45% 0 auto; text-align: center; color: #788073; }
@@ -33,7 +44,7 @@ main { max-width: 1380px; margin: auto; padding: 45px 48px 15px; }
 #download-menu button { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 12px 10px; text-align: left; font-size: 12px; }
 #download-menu small { color: #77836f; font-size: 10px; }
 #captions[aria-pressed="true"] { background: #e7ecdc; font-weight: 700; }
-.player-note { display: flex; justify-content: space-between; gap: 15px; color: #7b8174; font-size: 10px; margin: 14px 2px 0; }
+.player-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 15px; color: #7b8174; font-size: 10px; margin: 14px 2px 0; }
 .preview-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
 #status { color: #9a391c; font-size: 13px; margin: 10px 0; }
 .resource-timeline { min-width: 0; margin: 32px 0; border: 1px solid #daddcf; border-radius: 12px; overflow: hidden; background: #fbf9f3; }
@@ -108,12 +119,104 @@ body:not(.capture) #canvas-host canvas { cursor: pointer; }
 @media (max-width: 750px) {
   .masthead { padding: 20px; }.brand span { display: none; }.brand strong { font-size: 20px; }.template { font-size: 9px; padding: 8px 10px; }
   main { padding: 30px 20px 10px; }
-  .transport { flex-wrap: wrap; gap: 12px; padding: 12px; }.tools { justify-content: space-between; width: 100%; }.tools button { min-height: 36px; }
   .player-note { flex-direction: column; gap: 6px; font-size: 9px; }
   .timeline-toolbar { flex-wrap: wrap; padding: 13px; }.timeline-zoom { margin-left: auto; }.timeline-clock { margin-right: 4px; }
   footer { padding: 25px 20px; }footer span:last-child { display: none; }
 }
+/* A short window, such as a phone on its side, keeps more of its height for the picture. */
+@media (max-height: 560px) { .masthead { padding-block: 12px; } main { padding-top: 16px; } }
+/* The transport wraps by the player's width, which a tall film keeps narrow on a wide screen too. */
+@container theater (max-width: 600px) {
+  .transport { flex-wrap: wrap; gap: 12px; padding: 12px; }.tools { justify-content: space-between; width: 100%; }.tools button { min-height: 36px; }
+}
 @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; }
+
+/* A branching story's choice and ending panels, over the picture. Sizes follow the player's width (cqi), so the panels
+   keep their proportions from a phone to full screen; the minimums keep text readable and buttons easy to tap. */
+#canvas-host { container-type: inline-size; }
+.story-layer { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; font-family: var(--story-font, inherit); }
+.story-layer[data-view="choices"] { background: linear-gradient(to top, rgb(8 12 11 / .66), rgb(8 12 11 / 0) 52%); }
+.story-layer[data-view="ending"] { align-items: center; background: rgb(8 12 11 / .62); pointer-events: auto; }
+.story-panel { pointer-events: auto; width: min(94%, 70cqi); padding: 0 0 4.5cqi; display: grid; justify-items: center; gap: 1.5cqi; text-align: center; animation: story-in .35s ease-out both; }
+.story-panel-ending { padding: 0; }
+.story-prompt { margin: 0; color: #fff; font-size: clamp(15px, 2.6cqi, 42px); font-weight: 700; line-height: 1.15; text-shadow: 0 2px 14px rgb(0 0 0 / .5); }
+.story-timer { width: min(100%, 34cqi); height: max(3px, .35cqi); border-radius: 9px; background: rgb(255 255 255 / .3); overflow: hidden; }
+.story-timer span { display: block; height: 100%; background: var(--story-accent); transform-origin: left; }
+.story-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: max(8px, 1.2cqi); width: 100%; }
+.story-choices button { display: flex; align-items: center; justify-content: center; gap: .7em; flex: 1 1 0; min-width: min(100%, 18cqi); max-width: 33cqi; min-height: 44px; padding: 1.1cqi 2.2cqi; border: 2px solid transparent; border-radius: 999px; background: var(--story-surface); color: var(--story-text); font: inherit; font-size: clamp(13px, 1.8cqi, 30px); font-weight: 700; line-height: 1.2; box-shadow: 0 10px 30px -12px rgb(0 0 0 / .65); transition: transform .15s, border-color .15s; }
+.story-choices button::before { content: attr(data-key); display: grid; place-items: center; flex: none; width: 1.6em; height: 1.6em; border-radius: 50%; background: color-mix(in srgb, var(--story-accent) 16%, transparent); color: var(--story-accent); font-size: .72em; }
+.story-panel-ending .story-choices button::before { content: none; }
+.story-choices button:hover:enabled, .story-choices button:focus-visible { transform: translateY(-2px); border-color: var(--story-accent); }
+/* A picked choice keeps the story's text color on a tint of the accent, readable whatever the accent is. */
+.story-choices button.picked { border-color: var(--story-accent); background: color-mix(in srgb, var(--story-accent) 24%, var(--story-surface)); }
+.story-choices button.picked::before { background: var(--story-accent); color: var(--story-surface); }
+.story-eyebrow { margin: 0; color: rgb(255 255 255 / .78); font-size: clamp(11px, 1.3cqi, 20px); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
+.story-title { margin: 0 0 1cqi; color: #fff; font-size: clamp(22px, 4.8cqi, 78px); line-height: 1.05; text-wrap: balance; }
+.story-live { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); }
+@keyframes story-in { from { opacity: 0; transform: translateY(12px); } }
+@container (max-width: 560px) { .story-panel { width: 96%; padding-bottom: 10px; gap: 8px; } .story-choices button { max-width: none; } }
+@media (prefers-reduced-motion: reduce) { .story-panel { animation: none; } .story-choices button { transition: none; } }
+.capture .story-layer { display: none; }
+/* A quiz's question and score cards, centered over the dimmed picture. Sizes follow the player's width (cqi) like the
+   story panels; a card taller than a small player scrolls inside it. Right and wrong carry an icon as well as a color. */
+.quiz-layer { --quiz-right: #1d8a4e; --quiz-wrong: #c8412f; position: absolute; inset: 0; z-index: 3; display: grid; overflow-y: auto; overscroll-behavior: contain; padding: clamp(8px, 2.4cqi, 40px); box-sizing: border-box; background: rgb(8 12 11 / .6); font-family: var(--quiz-font, inherit); }
+.quiz-layer[hidden] { display: none; }
+.quiz-card { margin: auto; width: min(100%, 64cqi); box-sizing: border-box; display: grid; gap: clamp(8px, 1.25cqi, 22px); padding: clamp(14px, 2.7cqi, 48px); border-radius: clamp(14px, 1.7cqi, 30px); background: var(--quiz-surface); color: var(--quiz-text); box-shadow: 0 30px 80px -30px rgb(0 0 0 / .75); }
+.quiz-card-in { animation: quiz-in .3s ease-out both; }
+.quiz-eyebrow { margin: 0; color: color-mix(in srgb, var(--quiz-accent) 72%, var(--quiz-text)); font-size: clamp(11px, 1.15cqi, 19px); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
+.quiz-prompt { margin: 0; font-size: clamp(16px, 2.45cqi, 42px); font-weight: 800; line-height: 1.18; text-wrap: balance; }
+.quiz-hint { margin: -.2em 0 0; font-size: clamp(12px, 1.3cqi, 21px); opacity: .72; }
+.quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(6px, .95cqi, 16px); }
+.quiz-options.quiz-long, .quiz-options.quiz-odd { grid-template-columns: 1fr; }
+.quiz-option { display: flex; align-items: center; gap: .7em; min-height: 44px; padding: clamp(8px, 1cqi, 18px) clamp(10px, 1.35cqi, 24px); border: 2px solid color-mix(in srgb, var(--quiz-text) 14%, transparent); border-radius: clamp(10px, 1.1cqi, 18px); background: color-mix(in srgb, var(--quiz-text) 3%, var(--quiz-surface)); color: inherit; font: inherit; font-size: clamp(13px, 1.6cqi, 28px); font-weight: 650; line-height: 1.25; text-align: left; cursor: pointer; transition: border-color .15s, background-color .15s, transform .15s; }
+.quiz-option:hover:enabled, .quiz-option:focus-visible { border-color: var(--quiz-accent); transform: translateY(-1px); }
+.quiz-option:focus-visible, .quiz-actions button:focus-visible { outline: 3px solid color-mix(in srgb, var(--quiz-accent) 50%, transparent); outline-offset: 2px; }
+.quiz-option:disabled { cursor: default; opacity: 1; }
+.quiz-key { flex: none; display: grid; place-items: center; width: 1.75em; height: 1.75em; border-radius: 50%; background: color-mix(in srgb, var(--quiz-accent) 18%, transparent); color: color-mix(in srgb, var(--quiz-accent) 62%, var(--quiz-text)); font-size: .78em; font-weight: 800; }
+.quiz-multi .quiz-key { border-radius: 28%; }
+.quiz-option-text { flex: 1; min-width: 0; }
+.quiz-option.selected { border-color: var(--quiz-accent); background: color-mix(in srgb, var(--quiz-accent) 15%, var(--quiz-surface)); }
+.quiz-option.selected .quiz-key { background: var(--quiz-accent); color: var(--quiz-on-accent); }
+.quiz-option.correct { border-color: var(--quiz-right); background: color-mix(in srgb, var(--quiz-right) 13%, var(--quiz-surface)); }
+.quiz-option.wrong { border-color: var(--quiz-wrong); background: color-mix(in srgb, var(--quiz-wrong) 11%, var(--quiz-surface)); }
+.quiz-option.missed { border-style: dashed; }
+.quiz-option.correct .quiz-key { background: var(--quiz-right); color: #fff; }
+.quiz-option.wrong .quiz-key { background: var(--quiz-wrong); color: #fff; }
+.quiz-option.dim { opacity: .5; }
+.quiz-icon { display: grid; place-items: center; width: 100%; height: 100%; }
+.quiz-icon svg { width: 62%; height: 62%; }
+.quiz-feedback { margin: 0; padding: clamp(8px, 1.05cqi, 18px) clamp(10px, 1.35cqi, 22px); border-left: 4px solid var(--quiz-right); border-radius: clamp(8px, .9cqi, 14px); background: color-mix(in srgb, var(--quiz-right) 11%, var(--quiz-surface)); font-size: clamp(13px, 1.45cqi, 25px); line-height: 1.42; }
+.quiz-feedback.wrong { border-left-color: var(--quiz-wrong); background: color-mix(in srgb, var(--quiz-wrong) 9%, var(--quiz-surface)); }
+.quiz-answer { font-weight: 700; }
+.quiz-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: clamp(6px, 1cqi, 14px); }
+.quiz-actions button { min-height: 44px; padding: 0 clamp(14px, 2cqi, 34px); border-radius: 999px; font: inherit; font-size: clamp(13px, 1.45cqi, 25px); font-weight: 750; cursor: pointer; transition: transform .15s, filter .15s; }
+.quiz-actions button:hover:enabled { transform: translateY(-1px); filter: brightness(1.06); }
+.quiz-actions button:disabled { opacity: .45; cursor: default; }
+.quiz-primary { border: 2px solid var(--quiz-accent); background: var(--quiz-accent); color: var(--quiz-on-accent); }
+.quiz-secondary { border: 2px solid color-mix(in srgb, var(--quiz-text) 24%, transparent); background: transparent; color: inherit; }
+.quiz-results { justify-items: center; text-align: center; }
+.quiz-results .quiz-actions { justify-content: center; }
+.quiz-score { margin: 0; color: color-mix(in srgb, var(--quiz-accent) 75%, var(--quiz-text)); font-size: clamp(38px, 7cqi, 124px); font-weight: 900; line-height: 1; }
+.quiz-score span { font-size: .42em; opacity: .62; }
+.quiz-verdict { margin: 0; font-size: clamp(13px, 1.6cqi, 27px); font-weight: 750; }
+.quiz-verdict.passed { color: color-mix(in srgb, var(--quiz-right) 80%, var(--quiz-text)); }
+.quiz-marks { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(4px, .6cqi, 10px); margin: 0; padding: 0; list-style: none; }
+.quiz-marks li { width: clamp(22px, 2.5cqi, 42px); height: clamp(22px, 2.5cqi, 42px); border-radius: 50%; background: var(--quiz-right); color: #fff; }
+.quiz-marks li.wrong { background: var(--quiz-wrong); }
+.quiz-marks li.skipped { background: color-mix(in srgb, var(--quiz-text) 22%, transparent); color: var(--quiz-text); }
+@keyframes quiz-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
+@container (max-width: 560px) {
+  .quiz-layer { padding: 6px; }
+  .quiz-card { width: 100%; padding: 12px; gap: 8px; border-radius: 12px; }
+  .quiz-options, .quiz-options.quiz-odd { grid-template-columns: 1fr 1fr; gap: 6px; }
+  /* A small player keeps the answer in the feedback's words and the next step in reach. */
+  .quiz-card.answered .quiz-options { display: none; }
+  .quiz-actions { position: sticky; bottom: -12px; margin: 0 -12px -12px; padding: 8px 12px 12px; background: var(--quiz-surface); border-radius: 0 0 12px 12px; }
+  .quiz-option { min-height: 40px; padding: 6px 8px; font-size: 12.5px; }
+  .quiz-feedback { font-size: 12.5px; padding: 7px 9px; }
+  .quiz-actions button { min-height: 40px; padding: 0 14px; font-size: 13px; }
+}
+@media (prefers-reduced-motion: reduce) { .quiz-card-in { animation: none; } .quiz-option, .quiz-actions button { transition: none; } }