reelkit-cli 0.1.0

package/src/testing/fixtures.ts

@@ -0,0 +1,44 @@
+export function silentWav(durationSec: number, rate = 8000): Uint8Array {
+  const dataBytes = Math.round(durationSec * rate) * 2;
+  const buf = Buffer.alloc(44 + dataBytes);
+  buf.write("RIFF", 0); buf.writeUInt32LE(36 + dataBytes, 4); buf.write("WAVE", 8);
+  buf.write("fmt ", 12); buf.writeUInt32LE(16, 16); buf.writeUInt16LE(1, 20); buf.writeUInt16LE(1, 22);
+  buf.writeUInt32LE(rate, 24); buf.writeUInt32LE(rate * 2, 28); buf.writeUInt16LE(2, 32); buf.writeUInt16LE(16, 34);
+  buf.write("data", 36); buf.writeUInt32LE(dataBytes, 40);
+  return new Uint8Array(buf);
+}
+
+export const PIXEL_PNG = new Uint8Array(Buffer.from("iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==", "base64"));
+
+// A known-good composition, used as the worked example for composition authors.
+export const FIXTURE_COMPOSITION = `import React from "react";
+import { AbsoluteFill, useVideoConfig } from "remotion";
+import { BgMesh, Captions, FootageLayer, fonts, Grade, Grain, KenBurnsImage, palettes, SceneFrame, Vignette, Voiceover, WordReveal } from "reelkit/kit";
+import type { VideoProps } from "reelkit/kit";
+
+const palette = palettes.darkTech;
+
+export const Video: React.FC<VideoProps> = ({ manifest, urls }) => {
+  const { width } = useVideoConfig();
+  return (
+    <AbsoluteFill>
+      {manifest.footageKey ? <FootageLayer src={urls[manifest.footageKey]} dim={0.2} /> : <BgMesh bg={palette.bg} hero={palette.hero} accent={palette.accent} />}
+      {manifest.scenes.map((s, i) => (
+        <SceneFrame key={s.id} from={s.startFrame} durationInFrames={s.durationFrames}>
+          {s.imageKey ? <KenBurnsImage src={urls[s.imageKey]} direction={i % 2 ? "out" : "in"} /> : null}
+          {i === 0 && !manifest.footageKey ? (
+            <AbsoluteFill style={{ alignItems: "center", justifyContent: "center", padding: width * 0.08 }}>
+              <WordReveal text="Demo video" highlight="Demo" highlightColor={palette.hero} style={{ fontFamily: fonts.display, fontWeight: 800, fontSize: width * 0.1, color: palette.ink }} />
+            </AbsoluteFill>
+          ) : null}
+          <Captions words={s.words} />
+          {s.voiceoverKey ? <Voiceover src={urls[s.voiceoverKey]} /> : null}
+        </SceneFrame>
+      ))}
+      {manifest.footageKey ? null : <Grade color={palette.hero} />}
+      <Grain blend="overlay" />
+      <Vignette />
+    </AbsoluteFill>
+  );
+};
+`;

package/src/ui/CommandView.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Box, Text } from "ink";
+import Spinner from "ink-spinner";
+import type { Result } from "../context";
+
+export type ViewState = { title: string; lines: string[]; result?: Result };
+
+// One command's life on screen: a spinner and its latest progress, then a tick or cross and the summary.
+export const CommandView: React.FC<ViewState> = ({ title, lines, result }) => (
+  <Box flexDirection="column">
+    <Box>
+      {result ? <Text color={result.ok ? "green" : "red"}>{result.ok ? "✔" : "✖"}</Text> : <Text color="cyan"><Spinner type="dots" /></Text>}
+      <Text bold> {title}</Text>
+    </Box>
+    {lines.slice(-6).map((line, i) => <Text key={i} dimColor>  {line}</Text>)}
+    {result ? <Box marginTop={1}><Text color={result.ok ? undefined : "red"}>{result.summary}</Text></Box> : null}
+  </Box>
+);

package/src/ui/run.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { render } from "ink";
+import type { Result } from "../context";
+import { CommandView } from "./CommandView";
+
+// Runs a command with its progress drawn by Ink. A thrown error becomes a failed Result, so it is shown like any other.
+export async function runInk(title: string, fn: (log: (line: string) => void) => Promise<Result>): Promise<Result> {
+  const lines: string[] = [];
+  const app = render(<CommandView title={title} lines={lines} />);
+  const draw = (result?: Result) => app.rerender(<CommandView title={title} lines={[...lines]} result={result} />);
+  let result: Result;
+  try {
+    result = await fn((line) => { lines.push(line); draw(); });
+  } catch (e) {
+    result = { ok: false, summary: e instanceof Error ? e.message : String(e) };
+  }
+  draw(result);
+  app.unmount();
+  return result;
+}