@assistkick/create 1.6.0 → 1.8.0

package/templates/assistkick-product-system/packages/video/components/video_split_layout.tsx

@@ -0,0 +1,84 @@
+/** @jsxImportSource react */
+import { AbsoluteFill } from "remotion";
+import { Video } from "@remotion/media";
+import { useCallback, useState } from "react";
+import { fonts } from "./theme";
+
+type VideoSplitLayoutProps = {
+  video?: string;
+  backgroundColor: string;
+  accentColor: string;
+  children: (hasVideo: boolean) => React.ReactNode;
+};
+
+export const VideoSplitLayout: React.FC<VideoSplitLayoutProps> = ({
+  video,
+  backgroundColor,
+  accentColor,
+  children,
+}) => {
+  const [videoError, setVideoError] = useState(false);
+  const onVideoError = useCallback(() => {
+    setVideoError(true);
+    return "fail" as const;
+  }, []);
+  const hasVideo = !!video && !videoError;
+
+  const panelLeft = hasVideo ? "60%" : 0;
+  const panelPadding = hasVideo ? 48 : 80;
+
+  return (
+    <AbsoluteFill
+      style={{
+        backgroundColor,
+        fontFamily: fonts.sans,
+      }}
+    >
+      {hasVideo && (
+        <AbsoluteFill
+          style={{
+            width: "60%",
+            overflow: "hidden",
+          }}
+        >
+          <Video
+            src={video}
+            muted
+            onError={onVideoError}
+            style={{
+              width: "100%",
+              height: "100%",
+              objectFit: "contain",
+            }}
+          />
+        </AbsoluteFill>
+      )}
+
+      <div
+        style={{
+          position: "absolute",
+          top: 0,
+          left: panelLeft,
+          right: 0,
+          bottom: 0,
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          padding: `60px ${panelPadding}px`,
+        }}
+      >
+        <div
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            height: 6,
+            backgroundColor: accentColor,
+          }}
+        />
+        {children(hasVideo)}
+      </div>
+    </AbsoluteFill>
+  );
+};

package/templates/assistkick-product-system/packages/video/index.ts

@@ -0,0 +1,4 @@
+import { registerRoot } from "remotion";
+import { RemotionRoot } from "./Root";
+
+registerRoot(RemotionRoot);

package/templates/assistkick-product-system/packages/video/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@assistkick/video",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "studio": "remotion studio index.ts --config remotion.config.ts",
+    "render": "remotion render index.ts --config remotion.config.ts --log warn",
+    "process-script": "tsx scripts/process_script.ts"
+  },
+  "dependencies": {
+    "@remotion/cli": "^4.0.431",
+    "@remotion/media": "^4.0.431",
+    "@remotion/player": "^4.0.431",
+    "@remotion/tailwind-v4": "^4.0.431",
+    "@remotion/transitions": "^4.0.431",
+    "remotion": "^4.0.431",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "tailwindcss": "^4.2.1",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3"
+  }
+}

package/templates/assistkick-product-system/packages/video/remotion.config.ts

@@ -0,0 +1,11 @@
+import { Config } from "@remotion/cli/config";
+import { enableTailwind } from "@remotion/tailwind-v4";
+
+Config.setPublicDir("./public");
+Config.setOutputLocation("/data/videos/");
+Config.setConcurrency("100%");
+Config.setOffthreadVideoCacheSizeInBytes(1024 * 1024 * 1024); // 1 GB
+
+Config.overrideWebpackConfig((currentConfiguration) => {
+  return enableTailwind(currentConfiguration);
+});

package/templates/assistkick-product-system/packages/video/scripts/process_script.test.ts

@@ -0,0 +1,326 @@
+import { describe, it } from "node:test";
+import assert from "node:assert/strict";
+import { writeFileSync, unlinkSync, mkdirSync, rmSync, readFileSync } from "fs";
+import { join } from "path";
+import {
+  parseNarrations,
+  parseScreenCaptures,
+  hashText,
+  getAudioDuration,
+  getMp4Duration,
+  processScript,
+} from "./process_script";
+
+describe("parseNarrations", () => {
+  it("parses single narration directive", () => {
+    const md = `:::narration intro
+Hello world, this is the intro.
+:::`;
+
+    const result = parseNarrations(md);
+    assert.equal(result.length, 1);
+    assert.equal(result[0].id, "intro");
+    assert.equal(result[0].src, "audio/intro.mp3");
+    assert.equal(result[0].text, "Hello world, this is the intro.");
+  });
+
+  it("parses multiple narration directives", () => {
+    const md = `# Scene 1
+:::narration title
+Welcome to the video.
+:::
+
+# Scene 2
+:::narration step1-login
+First, log in to the dashboard.
+Then enter your credentials.
+:::`;
+
+    const result = parseNarrations(md);
+    assert.equal(result.length, 2);
+    assert.equal(result[0].id, "title");
+    assert.equal(result[0].text, "Welcome to the video.");
+    assert.equal(result[1].id, "step1-login");
+    assert.equal(result[1].text, "First, log in to the dashboard. Then enter your credentials.");
+  });
+
+  it("returns empty array when no directives found", () => {
+    const result = parseNarrations("# Just a heading\n\nSome text.");
+    assert.equal(result.length, 0);
+  });
+
+  it("handles hyphenated IDs", () => {
+    const md = `:::narration my-scene
+Text
+:::`;
+    const result = parseNarrations(md);
+    assert.equal(result[0].id, "my-scene");
+    assert.equal(result[0].src, "audio/my-scene.mp3");
+  });
+
+  it("collapses newlines in narration text", () => {
+    const md = `:::narration multi
+Line one.
+
+Line two.
+
+Line three.
+:::`;
+    const result = parseNarrations(md);
+    assert.equal(result[0].text, "Line one. Line two. Line three.");
+  });
+
+  it("trims whitespace from narration text", () => {
+    const md = `:::narration padded
+   Some padded text.
+:::`;
+    const result = parseNarrations(md);
+    assert.equal(result[0].text, "Some padded text.");
+  });
+
+  it("does not match XML-style narration tags", () => {
+    const md = `<narration src="audio/old.mp3">Old format text</narration>`;
+    const result = parseNarrations(md);
+    assert.equal(result.length, 0);
+  });
+});
+
+describe("parseScreenCaptures", () => {
+  it("parses screencapture directives", () => {
+    const md = `:::screencapture step1
+Screen recording of the login flow
+:::`;
+
+    const result = parseScreenCaptures(md);
+    assert.equal(result.length, 1);
+    assert.equal(result[0].id, "step1");
+    assert.equal(result[0].src, "video/step1.mp4");
+    assert.equal(result[0].description, "Screen recording of the login flow");
+  });
+
+  it("parses multiple screencapture directives", () => {
+    const md = `:::screencapture a
+Desc A
+:::
+
+:::screencapture b
+Desc B
+:::`;
+
+    const result = parseScreenCaptures(md);
+    assert.equal(result.length, 2);
+    assert.equal(result[0].id, "a");
+    assert.equal(result[1].id, "b");
+  });
+
+  it("returns empty array when no directives found", () => {
+    const result = parseScreenCaptures("No captures here.");
+    assert.equal(result.length, 0);
+  });
+
+  it("does not match XML-style screencapture tags", () => {
+    const md = `<screencapture src="video/old.mp4">Old format</screencapture>`;
+    const result = parseScreenCaptures(md);
+    assert.equal(result.length, 0);
+  });
+});
+
+describe("hashText", () => {
+  it("returns consistent hash for same input", () => {
+    const h1 = hashText("hello world");
+    const h2 = hashText("hello world");
+    assert.equal(h1, h2);
+  });
+
+  it("returns different hash for different input", () => {
+    const h1 = hashText("hello world");
+    const h2 = hashText("hello world!");
+    assert.notEqual(h1, h2);
+  });
+
+  it("returns 16-character hex string", () => {
+    const h = hashText("test");
+    assert.equal(h.length, 16);
+    assert.match(h, /^[0-9a-f]{16}$/);
+  });
+});
+
+describe("getAudioDuration", () => {
+  it("returns null for non-existent file", () => {
+    const result = getAudioDuration("/nonexistent/file.mp3");
+    assert.equal(result, null);
+  });
+
+  it("returns null for empty file", () => {
+    const tmpFile = join(import.meta.dirname!, "_test_empty.mp3");
+    writeFileSync(tmpFile, Buffer.alloc(0));
+    try {
+      const result = getAudioDuration(tmpFile);
+      assert.equal(result, null);
+    } finally {
+      unlinkSync(tmpFile);
+    }
+  });
+});
+
+describe("getMp4Duration", () => {
+  it("returns null for non-existent file", () => {
+    const result = getMp4Duration("/nonexistent/file.mp4");
+    assert.equal(result, null);
+  });
+
+  it("returns null for non-MP4 data", () => {
+    const tmpFile = join(import.meta.dirname!, "_test_bad.mp4");
+    writeFileSync(tmpFile, Buffer.from("not a real mp4 file"));
+    try {
+      const result = getMp4Duration(tmpFile);
+      assert.equal(result, null);
+    } finally {
+      unlinkSync(tmpFile);
+    }
+  });
+});
+
+describe("processScript", () => {
+  it("throws when script file does not exist", async () => {
+    await assert.rejects(
+      () => processScript({
+        scriptPath: "/nonexistent/script.md",
+        projectId: "proj_test",
+        featureId: "feat_test",
+      }),
+      { message: /Script file not found/ },
+    );
+  });
+
+  it("throws when no narration directives found", async () => {
+    const tmpDir = join(import.meta.dirname!, "_test_no_narration");
+    mkdirSync(tmpDir, { recursive: true });
+    const scriptFile = join(tmpDir, "script.md");
+    writeFileSync(scriptFile, "# Just a heading\n\nNo narrations here.");
+
+    try {
+      await assert.rejects(
+        () => processScript({
+          scriptPath: scriptFile,
+          projectId: "proj_test",
+          featureId: "feat_test",
+          mediaBase: tmpDir,
+        }),
+        { message: /No :::narration directives found/ },
+      );
+    } finally {
+      rmSync(tmpDir, { recursive: true, force: true });
+    }
+  });
+
+  it("processes script in dry-run mode without calling ElevenLabs", async () => {
+    const tmpDir = join(import.meta.dirname!, "_test_dry_run");
+    mkdirSync(tmpDir, { recursive: true });
+    const scriptFile = join(tmpDir, "script.md");
+    writeFileSync(scriptFile, `# Scene 1
+:::narration intro
+Welcome to the demo.
+:::
+
+:::narration step1
+Now let's get started.
+:::
+`);
+
+    try {
+      const result = await processScript({
+        scriptPath: scriptFile,
+        projectId: "proj_test",
+        featureId: "feat_dry",
+        mediaBase: tmpDir,
+        dryRun: true,
+      });
+
+      assert.equal(result.processed, 2);
+      assert.equal(result.generated, 0); // dry run — nothing generated
+      assert.equal(result.skipped, 0);
+      assert.equal(result.errors.length, 0);
+
+      // Hashes should still be written
+      const hashesFile = join(tmpDir, "feat_dry", "audio", "hashes.json");
+      const hashes = JSON.parse(readFileSync(hashesFile, "utf-8"));
+      assert.equal(Object.keys(hashes).length, 2);
+      assert.ok(hashes["intro"]);
+      assert.ok(hashes["step1"]);
+    } finally {
+      rmSync(tmpDir, { recursive: true, force: true });
+    }
+  });
+
+  it("detects text changes via hash comparison", async () => {
+    const tmpDir = join(import.meta.dirname!, "_test_hash_change");
+    const audioDir = join(tmpDir, "feat_hash", "audio");
+    mkdirSync(audioDir, { recursive: true });
+
+    const scriptFile = join(tmpDir, "script.md");
+    writeFileSync(scriptFile, `:::narration intro
+Original text.
+:::
+`);
+
+    // Write a pre-existing hashes.json with a different hash
+    const hashesFile = join(audioDir, "hashes.json");
+    writeFileSync(hashesFile, JSON.stringify({ intro: "differenthash12345" }));
+
+    // Write a dummy audio file so it's not "missing"
+    writeFileSync(join(audioDir, "intro.mp3"), Buffer.from("fake mp3"));
+
+    try {
+      const result = await processScript({
+        scriptPath: scriptFile,
+        projectId: "proj_test",
+        featureId: "feat_hash",
+        mediaBase: tmpDir,
+        dryRun: true,
+      });
+
+      // Should detect text changed (hash mismatch) → processed but not generated (dry run)
+      assert.equal(result.processed, 1);
+      assert.equal(result.generated, 0); // dry run
+      assert.equal(result.skipped, 0); // not skipped because hash changed
+    } finally {
+      rmSync(tmpDir, { recursive: true, force: true });
+    }
+  });
+
+  it("skips narration when hash matches and audio exists", async () => {
+    const tmpDir = join(import.meta.dirname!, "_test_skip");
+    const audioDir = join(tmpDir, "feat_skip", "audio");
+    mkdirSync(audioDir, { recursive: true });
+
+    const narrationText = "This text has not changed.";
+    const scriptFile = join(tmpDir, "script.md");
+    writeFileSync(scriptFile, `:::narration unchanged
+${narrationText}
+:::
+`);
+
+    // Write matching hash
+    const { createHash } = await import("crypto");
+    const hash = createHash("sha256").update(narrationText).digest("hex").slice(0, 16);
+    writeFileSync(join(audioDir, "hashes.json"), JSON.stringify({ unchanged: hash }));
+    writeFileSync(join(audioDir, "unchanged.mp3"), Buffer.from("fake mp3"));
+
+    try {
+      const result = await processScript({
+        scriptPath: scriptFile,
+        projectId: "proj_test",
+        featureId: "feat_skip",
+        mediaBase: tmpDir,
+        dryRun: true,
+      });
+
+      assert.equal(result.processed, 1);
+      assert.equal(result.skipped, 1);
+      assert.equal(result.generated, 0);
+    } finally {
+      rmSync(tmpDir, { recursive: true, force: true });
+    }
+  });
+});