agentreel 0.1.1 → 0.1.3

package/README.md

@@ -2,7 +2,9 @@
 
 Turn your Claude Code sessions into viral demo videos.
 
-https://github.com/user-attachments/assets/070ee610-298c-4989-8d7e-369ca495469e
+https://github.com/user-attachments/assets/474fd85d-3b35-48f4-82b8-1b337840fb51
+
+> 🔊 Turn on sound
 
 ## Install
 

package/bin/agentreel.mjs

@@ -258,7 +258,7 @@ function extractBrowserHighlights(videoPath, task) {
 
 // ── Render ──────────────────────────────────────────────────
 
-function renderVideo(props, output, musicPath) {
+async function renderVideo(props, output, musicPath) {
   const publicDir = join(ROOT, "public");
   if (!existsSync(publicDir)) mkdirSync(publicDir, { recursive: true });
   if (musicPath && existsSync(musicPath)) {
@@ -267,11 +267,37 @@ function renderVideo(props, output, musicPath) {
 
   const absOutput = resolve(output);
   const propsJSON = JSON.stringify(props);
-  const remotion = join(ROOT, "node_modules", ".bin", "remotion");
 
-  execFileSync(remotion, ["render", "CastVideo", absOutput, "--props", propsJSON], {
-    cwd: ROOT,
-    stdio: ["ignore", "inherit", "inherit"],
+  // Render using Remotion's Node.js API — no CLI binary needed
+  const { bundle } = await import("@remotion/bundler");
+  const { renderMedia, selectComposition } = await import("@remotion/renderer");
+
+  const entryPoint = join(ROOT, "src", "index.ts");
+
+  console.error("  Bundling...");
+  const serveUrl = await bundle({
+    entryPoint,
+    webpackOverride: (config) => config,
+  });
+
+  console.error("  Preparing renderer...");
+  const composition = await selectComposition({
+    serveUrl,
+    id: "CastVideo",
+    inputProps: props,
+    onBrowserDownload: () => {
+      console.error("  Downloading renderer (one-time, ~90MB)...");
+      return () => {}; // suppress progress logs
+    },
+  });
+
+  console.error("  Rendering...");
+  await renderMedia({
+    composition,
+    serveUrl,
+    codec: "h264",
+    outputLocation: absOutput,
+    inputProps: props,
   });
 
   const size = statSync(absOutput).size;
@@ -280,46 +306,40 @@ function renderVideo(props, output, musicPath) {
 
 // ── Upload + Share ──────────────────────────────────────────
 
-async function uploadToStreamable(filePath) {
-  const { FormData, File } = await import("node:buffer")
-    .then(() => globalThis)
-    .catch(() => globalThis);
-
-  const fileBuffer = readFileSync(filePath);
-  const fileName = basename(filePath);
-
-  // Use multipart form upload via fetch
-  const boundary = "----agentreel" + Date.now();
-  const CRLF = "\r\n";
-
-  const header = [
-    `--${boundary}`,
-    `Content-Disposition: form-data; name="file"; filename="${fileName}"`,
-    "Content-Type: video/mp4",
-    "",
-  ].join(CRLF);
-
-  const footer = `${CRLF}--${boundary}--${CRLF}`;
-
-  const headerBuf = Buffer.from(header + CRLF);
-  const footerBuf = Buffer.from(footer);
-  const body = Buffer.concat([headerBuf, fileBuffer, footerBuf]);
-
-  const resp = await fetch("https://api.streamable.com/upload", {
-    method: "POST",
-    headers: {
-      "Content-Type": `multipart/form-data; boundary=${boundary}`,
-    },
-    body,
-  });
-
-  if (!resp.ok) {
-    const text = await resp.text();
-    throw new Error(`Streamable upload failed (${resp.status}): ${text}`);
+async function uploadVideo(filePath) {
+  // Try uploading via curl to Streamable (works if user has STREAMABLE_EMAIL/PASSWORD set)
+  const email = process.env.STREAMABLE_EMAIL;
+  const password = process.env.STREAMABLE_PASSWORD;
+
+  if (email && password) {
+    try {
+      const result = execFileSync("curl", [
+        "-s", "-u", `${email}:${password}`,
+        "-F", `file=@${filePath}`,
+        "https://api.streamable.com/upload",
+      ], { timeout: 60000 });
+      const data = JSON.parse(result.toString());
+      if (data.shortcode) {
+        return `https://streamable.com/${data.shortcode}`;
+      }
+    } catch { /* fall through */ }
   }
 
-  const data = await resp.json();
-  return `https://streamable.com/${data.shortcode}`;
+  // Try Imgur as fallback (supports anonymous video upload)
+  try {
+    const result = execFileSync("curl", [
+      "-s",
+      "-H", "Authorization: Client-ID 546c25a59c58ad7",
+      "-F", `video=@${filePath}`,
+      "https://api.imgur.com/3/upload",
+    ], { timeout: 120000 });
+    const data = JSON.parse(result.toString());
+    if (data.data?.link) {
+      return data.data.link;
+    }
+  } catch { /* fall through */ }
+
+  return null;
 }
 
 function openShareURL(videoURL, text) {
@@ -353,14 +373,25 @@ async function shareFlow(outputPath, title) {
   const shouldShare = await askYesNo("Share to Twitter? [Y/n] ");
   if (!shouldShare) return;
 
-  console.error("Uploading to Streamable...");
-  try {
-    const url = await uploadToStreamable(outputPath);
-    const text = `${title}\n\nMade with @agentreel`;
+  console.error("Uploading video...");
+  const url = await uploadVideo(outputPath);
+
+  if (url) {
+    const text = `${title}\n\nMade with agentreel`;
     openShareURL(url, text);
-  } catch (err) {
-    console.error(`Upload failed: ${err.message}`);
-    console.error("You can manually upload the video and share it.");
+  } else {
+    // No upload worked — open Twitter with just the text, user attaches video manually
+    console.error("Could not auto-upload. Opening Twitter — drag your video into the tweet.");
+    const text = `${title}\n\nMade with agentreel`;
+    const tweetText = encodeURIComponent(text);
+    const intentURL = `https://twitter.com/intent/tweet?text=${tweetText}`;
+    const cmd = process.platform === "darwin" ? "open" : "xdg-open";
+    try {
+      execFileSync(cmd, [intentURL], { stdio: "ignore" });
+    } catch {
+      console.error(`  Tweet link: ${intentURL}`);
+    }
+    console.error(`  Video: ${resolve(outputPath)}`);
   }
 }
 
@@ -413,7 +444,7 @@ async function main() {
     console.error(`  ${highlights.length} highlights extracted`);
 
     console.error("Step 3/3: Rendering video...");
-    renderVideo({
+    await renderVideo({
       title: videoTitle,
       subtitle: prompt,
       highlights,
@@ -443,7 +474,7 @@ async function main() {
     console.error(`  ${highlights.length} highlights extracted`);
 
     console.error("Step 3/3: Rendering video...");
-    renderVideo({
+    await renderVideo({
       title: videoTitle,
       subtitle: prompt,
       highlights,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentreel",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Turn Claude Code sessions into viral demo videos",
   "bin": {
     "agentreel": "./bin/agentreel.mjs"
@@ -10,6 +10,8 @@
     "render": "remotion render CastVideo out/cast.mp4"
   },
   "dependencies": {
+    "@remotion/bundler": "^4",
+    "@remotion/renderer": "^4",
     "@remotion/cli": "^4",
     "remotion": "^4",
     "react": "^18",

package/src/CastVideo.tsx

@@ -115,7 +115,7 @@ export const CastVideo: React.FC<CastProps> = ({
           letterSpacing: 2,
         }}
       >
-        made with ♥ by agentreel
+        made with agentreel
       </div>
 
       <MusicTrack />
@@ -1010,7 +1010,7 @@ const EndCard: React.FC<{ text: string; url?: string }> = ({ text, url }) => {
           letterSpacing: 3,
         }}
       >
-        made with ♥ by agentreel
+        made with agentreel
       </div>
     </AbsoluteFill>
   );