@oh-story/dsh 0.1.10 → 0.1.12

package/lib/drama/skills/short-drama-edit/assets/remotion/src/rules.mjs

@@ -0,0 +1,188 @@
+// Decisions the overlay makes that do not need a browser. Plain JavaScript so
+// the suite's tests can import this file with Node and no build step.
+
+// ---------------------------------------------------------------- fonts
+
+/** The faces the overlay draws with, as `document.fonts.load` names them. */
+export const FACES = {
+  heavy: '900 16px "Noto Sans SC"',
+  bold: '700 16px "Noto Sans SC"',
+  mono: '800 16px "JetBrains Mono"',
+};
+
+/** Fixed words the panels draw themselves, so their glyphs are loaded too. */
+export const CHROME_TEXT = "【系统提示】【新任务】进度传说史诗稀有·";
+const DIGITS = "0123456789天:/, ";
+
+/**
+ * Which characters each face must have loaded before the first frame.
+ *
+ * The faces are split by unicode range, and a browser fetches a range only
+ * when text in it is laid out -- after the frame has been captured. Asking for
+ * every character the film will draw, up front, is what makes frame 0 look
+ * like frame 1000.
+ *
+ * @param {{ text: string }[]} cues
+ * @param {{ items: { text: string }[] }[]} screenTexts
+ */
+export const fontLoadPlan = (cues, screenTexts) => {
+  const unique = (/** @type {string} */ text) => [...new Set(Array.from(text))].join("");
+  const drawn = unique(
+    [...cues.map((cue) => cue.text), ...screenTexts.flatMap((piece) => piece.items.map((item) => item.text)),
+      CHROME_TEXT, DIGITS].join(""),
+  );
+  return [
+    { font: FACES.heavy, text: drawn },
+    { font: FACES.bold, text: drawn },
+    { font: FACES.mono, text: DIGITS },
+  ];
+};
+
+export const TIMED_OUT = "timed out";
+
+/**
+ * What is wrong with a finished load, or null when every face is ready.
+ *
+ * A face that no stylesheet declares loads as an empty list and raises
+ * nothing; the browser would substitute and the film would ship in the wrong
+ * typeface. So an empty list is a failure, as is a load that never finished.
+ *
+ * @param {{ font: string, text: string }[]} plan
+ * @param {unknown} outcome what `settleWithin(Promise.all(loads))` resolved to
+ * @param {(font: string, text: string) => boolean} check `document.fonts.check`
+ */
+export const fontLoadProblem = (plan, outcome, check) => {
+  if (outcome === TIMED_OUT) return `字体在 ${FONT_WAIT_MS / 1000} 秒内没有加载完：${plan.map((p) => p.font).join("、")}`;
+  if (outcome instanceof Error) return `字体加载失败：${outcome.message}`;
+  const loaded = /** @type {unknown[][]} */ (outcome);
+  const undeclared = plan.filter((_, index) => !loaded[index] || loaded[index].length === 0);
+  if (undeclared.length) {
+    return `没有声明这些字体（Remotion 工作区的字体包没装？）：${undeclared.map((p) => p.font).join("、")}`;
+  }
+  const pending = plan.filter((p) => !check(p.font, p.text));
+  if (pending.length) return `字体还没就绪：${pending.map((p) => p.font).join("、")}`;
+  return null;
+};
+
+export const FONT_WAIT_MS = 10000;
+
+/**
+ * Resolves with `promise`'s value, its error, or `TIMED_OUT` after `ms` --
+ * whichever comes first -- so a load that never settles cannot hold a frame
+ * until the whole render times out, and never resolves as if it had succeeded.
+ *
+ * @param {Promise<unknown>} promise
+ * @param {number} ms
+ * @returns {Promise<unknown>}
+ */
+export const settleWithin = (promise, ms) =>
+  new Promise((resolve) => {
+    const timer = setTimeout(() => resolve(TIMED_OUT), ms);
+    promise.then(
+      (value) => {
+        clearTimeout(timer);
+        resolve(value);
+      },
+      (error) => {
+        clearTimeout(timer);
+        resolve(error instanceof Error ? error : new Error(String(error)));
+      },
+    );
+  });
+
+const GENERIC_FAMILIES = new Set([
+  "serif", "sans-serif", "monospace", "cursive", "fantasy", "system-ui", "math",
+  "emoji", "fangsong", "ui-serif", "ui-sans-serif", "ui-monospace", "ui-rounded",
+]);
+
+/** The named families in a CSS font stack; generic keywords always resolve, so they prove nothing. */
+export const namedFamilies = (/** @type {string} */ stack) =>
+  stack
+    .split(",")
+    .map((part) => part.trim())
+    .filter((part) => part && !GENERIC_FAMILIES.has(part.replace(/^["']|["']$/g, "").toLowerCase()));
+
+// Latin glyphs in the probe, because a CJK-only probe cannot tell PingFang from
+// "nothing installed" on a machine whose CJK fallback is PingFang itself.
+const LATIN_PROBE = " Hamburgefonstiv 0123456789";
+// Two generic tails that never share Latin glyphs. A family that happens to
+// look like one of them still differs from the other.
+const PROBE_TAILS = ["serif", "monospace"];
+
+/**
+ * True when none of the stack's named families resolves.
+ *
+ * `measure(stack, text)` returns the rendered width of `text` in that stack.
+ * A family that resolves changes the width against at least one tail; only
+ * when the stack measures exactly like both bare tails did nothing resolve.
+ *
+ * @param {(stack: string, text: string) => number} measure
+ * @param {string} stack
+ * @param {string} sample
+ */
+export const familyIsMissing = (measure, stack, sample) => {
+  const named = namedFamilies(stack);
+  if (named.length === 0) return false;
+  const text = sample + LATIN_PROBE;
+  return PROBE_TAILS.every(
+    (tail) => measure(`${named.join(", ")}, ${tail}`, text) === measure(tail, text),
+  );
+};
+
+// ---------------------------------------------------------------- text
+
+/** Width of a line in ems: CJK and full-width forms are one, the rest a little over half. */
+export const lineEms = (/** @type {string} */ text) =>
+  Array.from(text).reduce((sum, ch) => sum + (ch.charCodeAt(0) > 0x2e7f ? 1 : 0.58), 0);
+
+/** Characters of `text` a typewriter shows `elapsed` seconds in, at 35 ms each after `delay`. */
+export const typedLength = (/** @type {number} */ elapsed, delay = 0) =>
+  Math.max(0, Math.floor((elapsed - delay) / 0.035 + 1e-9));
+
+/**
+ * `2 / 1,000,000` → { done: 2, total: 1000000, ratio }, or null when the item is
+ * not a progress reading. The ratio is clamped so the bar never overruns.
+ *
+ * @param {string} text
+ */
+export const parseProgress = (text) => {
+  const found = text.match(/^\s*([0-9][0-9,]*)\s*\/\s*([0-9][0-9,]*)\s*$/);
+  if (!found) return null;
+  const done = Number(found[1].replace(/,/g, ""));
+  const total = Number(found[2].replace(/,/g, ""));
+  if (!(total > 0)) return null;
+  return { done, total, ratio: Math.min(1, Math.max(0, done / total)) };
+};
+
+// ---------------------------------------------------------------- countdown
+
+/**
+ * Whole seconds still showing `elapsed` seconds after a countdown that read
+ * `countdown` at its first frame. Rounded up, as a timer reads: it shows its
+ * starting value for the whole first second. A pure function of the frame, so
+ * every render of the same frame shows the same digits.
+ *
+ * @param {number} countdown
+ * @param {number} elapsed
+ */
+export const secondsLeft = (countdown, elapsed) =>
+  Math.max(0, Math.ceil(countdown - elapsed - 1e-6));
+
+/** Seconds since the displayed digit last changed; drives the per-second pulse. */
+export const sinceTick = (/** @type {number} */ countdown, /** @type {number} */ elapsed) => {
+  const remaining = countdown - elapsed;
+  return Math.ceil(remaining - 1e-6) - remaining;
+};
+
+const two = (/** @type {number} */ n) => String(n).padStart(2, "0");
+
+/** `4天 23:59:58`, `01:05:00` or `00:42`, by the largest unit still in play. */
+export const formatCountdown = (/** @type {number} */ seconds) => {
+  const days = Math.floor(seconds / 86400);
+  const hours = Math.floor((seconds % 86400) / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  const rest = seconds % 60;
+  if (days > 0) return `${days}天 ${two(hours)}:${two(minutes)}:${two(rest)}`;
+  if (hours > 0) return `${two(hours)}:${two(minutes)}:${two(rest)}`;
+  return `${two(minutes)}:${two(rest)}`;
+};

package/lib/drama/skills/short-drama-edit/assets/remotion/src/schema.ts

@@ -1,32 +1,45 @@
+export type CueKind = "line" | "vo" | "system";
+
 export type Cue = {
   /** Output-time seconds, measured from the rendered segments. */
   start: number;
   end: number;
-  /** The line as written in 剧本.md. Never a transcription. */
+  /** One on-screen line of a 剧本.md line in its burned form. */
   text: string;
+  /** Dialogue, an inner or narrating voice, or the system's voice -- read from 剧本.md. */
+  kind: CueKind;
+  /** Words to highlight, each occurring in `text`. */
+  keys: string[];
+};
+
+export type ScreenTextStyle = "card" | "system" | "task" | "corner";
+export type Rarity = "传说" | "史诗" | "稀有";
+
+export type ScreenText = {
+  /** Output-time seconds. */
+  start: number;
+  end: number;
+  style: ScreenTextStyle;
+  /** Rows or items, each traced to a [画面文字] line in 剧本.md. */
+  items: { text: string; rarity: Rarity | null }[];
+  /** Seconds left at `start`, already resolved for 「接续」; null when nothing counts down. */
+  countdown: number | null;
 };
 
-export type SubtitleProps = {
+export type OverlayProps = {
   cues: Cue[];
+  screenTexts: ScreenText[];
   width: number;
   height: number;
   fps: number;
   durationInSeconds: number;
-  /** Type size as a fraction of frame height, so one number survives any delivery. */
-  fontScale: number;
-  /** Distance from the bottom edge, also a fraction of frame height. */
-  bottomScale: number;
-  fontFamily: string;
 };
 
-export const defaultProps: SubtitleProps = {
+export const defaultProps: OverlayProps = {
   cues: [],
+  screenTexts: [],
   width: 1080,
   height: 1920,
-  fps: 24,
+  fps: 30,
   durationInSeconds: 1,
-  fontScale: 0.034,
-  bottomScale: 0.055,
-  fontFamily:
-    '"PingFang SC", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif',
 };

package/lib/drama/skills/short-drama-edit/assets/remotion/src/screen/Card.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { AbsoluteFill, useCurrentFrame, useVideoConfig } from "remotion";
+import { COLOURS, MONO, SANS, StyleProps, TOP_U, entrance, exit, unit } from "./tokens";
+
+/**
+ * "主号 2" → name 主号, value 2; "主号 粉丝 2" adds 粉丝 as a small unit before
+ * the value. A row with one word is all name.
+ */
+const splitRow = (row: string): { name: string; unit: string; value: string } => {
+  const words = row.split(/[\s　]+/).filter(Boolean);
+  if (words.length < 2) return { name: row, unit: "", value: "" };
+  return { name: words[0], unit: words.slice(1, -1).join(" "), value: words[words.length - 1] };
+};
+
+/** A clean app dashboard card: white, rounded, a coloured dot per row, big red numbers. */
+export const Card: React.FC<StyleProps> = ({ text }) => {
+  const frame = useCurrentFrame();
+  const { fps, height, width } = useVideoConfig();
+  const u = unit(height);
+  const shown = entrance(frame, fps, 0, 15);
+  return (
+    <AbsoluteFill style={{ alignItems: "center", paddingTop: u * TOP_U.card, opacity: exit(frame, fps, text, 0.15) }}>
+      <div
+        style={{
+          width: width * 0.8,
+          background: COLOURS.cardSurface,
+          borderRadius: u * 1.6,
+          boxShadow: `0 ${u}px ${u * 4}px rgba(0,0,0,0.5)`,
+          padding: `${u * 0.7}px ${u * 2.2}px`,
+          fontFamily: SANS,
+          transform: `translateY(${(1 - shown) * u * 4}px) scale(${0.94 + 0.06 * shown})`,
+          opacity: shown,
+        }}
+      >
+        {text.items.map((item, index) => {
+          const row = splitRow(item.text);
+          return (
+            <div
+              key={index}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: u * 1.2,
+                padding: `${u * 1.1}px 0`,
+                borderTop: index ? `1px solid ${COLOURS.cardRule}` : "none",
+                opacity: entrance(frame, fps, 0.08 + index * 0.07),
+              }}
+            >
+              <span
+                style={{
+                  width: u * 3,
+                  height: u * 3,
+                  borderRadius: "50%",
+                  background: COLOURS.cardDots[index % COLOURS.cardDots.length],
+                }}
+              />
+              <span style={{ flex: 1, fontSize: u * 2.5, fontWeight: 700, color: COLOURS.cardName }}>{row.name}</span>
+              {row.unit ? (
+                <span style={{ fontSize: u * 1.7, fontWeight: 700, color: COLOURS.cardUnit, marginRight: u * 0.6 }}>
+                  {row.unit}
+                </span>
+              ) : null}
+              <span style={{ fontFamily: MONO, fontSize: u * 3.6, fontWeight: 800, color: COLOURS.cardValue }}>
+                {row.value}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </AbsoluteFill>
+  );
+};

package/lib/drama/skills/short-drama-edit/assets/remotion/src/screen/CornerChip.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { AbsoluteFill, useCurrentFrame, useVideoConfig } from "remotion";
+import { formatCountdown, secondsLeft } from "../rules.mjs";
+import { Frame } from "./chrome";
+import { COLOURS, MONO, StyleProps, TOP_U, entrance, exit, unit } from "./tokens";
+
+/** The task chrome in miniature, top right: the label, and the countdown when there is one. */
+export const CornerChip: React.FC<StyleProps> = ({ text }) => {
+  const frame = useCurrentFrame();
+  const { fps, height } = useVideoConfig();
+  const u = unit(height);
+  const shown = entrance(frame, fps);
+  return (
+    <AbsoluteFill
+      style={{ alignItems: "flex-end", paddingTop: u * TOP_U.corner, paddingRight: u * 2.4, opacity: exit(frame, fps, text) }}
+    >
+      <div style={{ opacity: shown, transform: `translateX(${(1 - shown) * u * 6}px)` }}>
+        <Frame colour={COLOURS.task} width={u * 24} style={{ padding: `${u * 0.7}px ${u * 1.1}px` }}>
+          <div style={{ fontSize: u * 1.35, color: COLOURS.chipLabel, fontWeight: 700, letterSpacing: u * 0.2 }}>
+            {text.items.map((item) => item.text).join(" · ")}
+          </div>
+          {text.countdown === null ? null : (
+            <div
+              style={{
+                fontFamily: MONO,
+                fontWeight: 800,
+                fontSize: u * 2.4,
+                color: COLOURS.alarm,
+                textShadow: `0 0 ${u * 0.4}px ${COLOURS.alarm}`,
+              }}
+            >
+              {formatCountdown(secondsLeft(text.countdown, frame / fps))}
+            </div>
+          )}
+        </Frame>
+      </div>
+    </AbsoluteFill>
+  );
+};

package/lib/drama/skills/short-drama-edit/assets/remotion/src/screen/ScreenText.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { Sequence, useVideoConfig } from "remotion";
+import { ScreenTextStyle } from "../schema";
+import { assertFamilyResolves } from "../font";
+import { Card } from "./Card";
+import { CornerChip } from "./CornerChip";
+import { SystemPanel } from "./SystemPanel";
+import { TaskPanel } from "./TaskPanel";
+import { SANS, StyleProps } from "./tokens";
+
+/** One component per style; swapping a look never touches parsing or timing. */
+const STYLES: Record<ScreenTextStyle, React.FC<StyleProps>> = {
+  card: Card,
+  system: SystemPanel,
+  task: TaskPanel,
+  corner: CornerChip,
+};
+
+const Checked: React.FC<StyleProps> = ({ text }) => {
+  assertFamilyResolves(SANS, text.items.map((item) => item.text).join(""));
+  const Style = STYLES[text.style];
+  return <Style text={text} />;
+};
+
+/** Places one piece in output time; inside it, frame 0 is the piece's first frame. */
+export const ScreenTextLayer: React.FC<StyleProps> = ({ text }) => {
+  const { fps } = useVideoConfig();
+  const from = Math.round(text.start * fps);
+  const until = Math.round(text.end * fps);
+  if (until <= from) return null;
+  return (
+    <Sequence from={from} durationInFrames={until - from} layout="none">
+      <Checked text={text} />
+    </Sequence>
+  );
+};

package/lib/drama/skills/short-drama-edit/assets/remotion/src/screen/SystemPanel.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { AbsoluteFill, useCurrentFrame, useVideoConfig } from "remotion";
+import { Frame, Header, Reward, Typed } from "./chrome";
+import { COLOURS, StyleProps, TOP_U, entrance, exit, glitch, unit } from "./tokens";
+
+const TYPE_DELAY = 0.15;
+
+/**
+ * 【系统提示】: the first item types out as the status line, the rest arrive as
+ * rarity-coloured reward rows once it has finished.
+ */
+export const SystemPanel: React.FC<StyleProps> = ({ text }) => {
+  const frame = useCurrentFrame();
+  const { fps, height, width } = useVideoConfig();
+  const u = unit(height);
+  const shown = entrance(frame, fps, 0, 13);
+  const jitter = glitch(frame);
+  const leaving = exit(frame, fps, text);
+  const [status, ...rewards] = text.items;
+  const rewardsFrom = TYPE_DELAY + Array.from(status.text).length * 0.035 + 0.15;
+  return (
+    <AbsoluteFill style={{ alignItems: "center", paddingTop: u * TOP_U.system, opacity: leaving * jitter.opacity }}>
+      <div style={{ transform: `translate(${jitter.dx}px, ${(1 - leaving) * -u * 2}px) scale(${0.9 + 0.1 * shown})` }}>
+        <Frame colour={COLOURS.system} width={width * 0.82}>
+          <Header text="【系统提示】" colour={COLOURS.system} />
+          <Typed
+            text={status.text}
+            delay={TYPE_DELAY}
+            style={{
+              fontSize: u * 4.4,
+              fontWeight: 900,
+              letterSpacing: u * 0.3,
+              textShadow: `0 0 ${u * 1.4}px ${COLOURS.system}`,
+              margin: `${u * 0.4}px 0 ${rewards.length ? u * 1.2 : 0}px`,
+            }}
+          />
+          {rewards.map((item, index) => (
+            <Reward key={index} name={item.text} rarity={item.rarity} delay={rewardsFrom + index * 0.28} />
+          ))}
+        </Frame>
+      </div>
+    </AbsoluteFill>
+  );
+};

package/lib/drama/skills/short-drama-edit/assets/remotion/src/screen/TaskPanel.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import { AbsoluteFill, useCurrentFrame, useVideoConfig } from "remotion";
+import { formatCountdown, parseProgress, secondsLeft, sinceTick } from "../rules.mjs";
+import { Frame, Header, RewardTag, Typed } from "./chrome";
+import { COLOURS, MONO, StyleProps, TOP_U, entrance, exit, glitch, unit } from "./tokens";
+
+/**
+ * 【新任务】: title, the goal typed out, reward tags, an `N / M` item as the
+ * 进度 line with its bar, and the countdown pulsing on each second.
+ */
+export const TaskPanel: React.FC<StyleProps> = ({ text }) => {
+  const frame = useCurrentFrame();
+  const { fps, height, width } = useVideoConfig();
+  const u = unit(height);
+  const shown = entrance(frame, fps, 0, 13);
+  const jitter = glitch(frame);
+  const leaving = exit(frame, fps, text);
+  const [title, goal, ...rest] = text.items;
+  const progressItem = rest.find((item) => parseProgress(item.text));
+  const progress = progressItem ? parseProgress(progressItem.text) : null;
+  const rewards = rest.filter((item) => item !== progressItem);
+  const elapsed = frame / fps;
+  const beat =
+    text.countdown === null ? 1 : 1 + 0.05 * Math.max(0, 1 - sinceTick(text.countdown, elapsed) / 0.15);
+  return (
+    <AbsoluteFill style={{ alignItems: "center", paddingTop: u * TOP_U.task, opacity: leaving * jitter.opacity }}>
+      <div style={{ transform: `translate(${jitter.dx}px, ${(1 - leaving) * -u * 2}px) scale(${0.9 + 0.1 * shown})` }}>
+        <Frame colour={COLOURS.task} width={width * 0.86}>
+          <Header text="【新任务】" colour={COLOURS.task} />
+          <div
+            style={{
+              fontSize: u * 4.2,
+              fontWeight: 900,
+              letterSpacing: u * 0.3,
+              color: COLOURS.taskTitle,
+              textShadow: `0 0 ${u * 1.2}px ${COLOURS.task}`,
+              margin: `${u * 0.2}px 0 ${u * 0.8}px`,
+            }}
+          >
+            {title.text}
+          </div>
+          {goal ? (
+            <Typed text={goal.text} delay={0.25} style={{ fontSize: u * 2.35, fontWeight: 700, lineHeight: 1.45 }} />
+          ) : null}
+          {rewards.length ? (
+            <div style={{ marginTop: u * 1.2, display: "flex", flexWrap: "wrap", gap: `${u * 0.6}px ${u}px` }}>
+              {rewards.map((item, index) => (
+                <RewardTag key={index} name={item.text} rarity={item.rarity} delay={0.5 + index * 0.12} />
+              ))}
+            </div>
+          ) : null}
+          {progress && progressItem ? (
+            <>
+              <div
+                style={{
+                  marginTop: u * 1.4,
+                  fontSize: u * 1.7,
+                  fontWeight: 700,
+                  color: COLOURS.muted,
+                  display: "flex",
+                  justifyContent: "space-between",
+                }}
+              >
+                <span>进度</span>
+                <span style={{ fontFamily: MONO, fontWeight: 800 }}>{progressItem.text}</span>
+              </div>
+              <div style={{ height: u * 0.6, background: "#ffffff1c", marginTop: u * 0.4 }}>
+                <div
+                  style={{
+                    // A sliver stays visible at zero, so the bar reads as a bar.
+                    width: `${Math.max(1.2, progress.ratio * 100)}%`,
+                    height: "100%",
+                    background: COLOURS.alarm,
+                    boxShadow: `0 0 ${u * 0.6}px ${COLOURS.alarm}`,
+                  }}
+                />
+              </div>
+            </>
+          ) : null}
+          {text.countdown === null ? null : (
+            <div
+              style={{
+                marginTop: u * 1.3,
+                fontFamily: MONO,
+                fontWeight: 800,
+                fontSize: u * 4.2,
+                color: COLOURS.alarm,
+                textShadow: `0 0 ${u}px ${COLOURS.alarm}`,
+                transform: `scale(${beat})`,
+                transformOrigin: "left center",
+              }}
+            >
+              {formatCountdown(secondsLeft(text.countdown, elapsed))}
+            </div>
+          )}
+        </Frame>
+      </div>
+    </AbsoluteFill>
+  );
+};