@editframe/cli 0.7.0-beta.9 → 0.8.0-beta.1

package/dist/VERSION.d.ts

@@ -0,0 +1 @@
+export declare const VERSION = "0.8.0-beta.1";

package/dist/VERSION.js

@@ -0,0 +1,4 @@
+const VERSION = "0.8.0-beta.1";
+export {
+  VERSION
+};

package/dist/commands/auth.d.ts

@@ -0,0 +1,9 @@
+export interface APIOrgResult {
+    name: string;
+    id: string;
+    org_id: string;
+    created_at: unknown;
+    updated_at: unknown;
+    org_display_name: string;
+}
+export declare const getApiData: () => Promise<APIOrgResult>;

package/dist/commands/auth.js

@@ -0,0 +1,33 @@
+import { program } from "commander";
+import ora from "ora";
+import chalk from "chalk";
+import debug from "debug";
+import { getClient } from "../utils/index.js";
+const log = debug("ef:cli:auth");
+const getApiData = async () => {
+  const response = await getClient().authenticatedFetch("/api/org");
+  return response.json();
+};
+const authCommand = program.command("auth").description("Fetch organization data using API token").action(async () => {
+  const options = authCommand.opts();
+  log("Options:", options);
+  const spinner = ora("Loading...").start();
+  try {
+    const apiData = await getApiData();
+    spinner.succeed("You are authenticated! 🎉");
+    process.stderr.write(chalk.green(`Name: ${apiData.name}
+`));
+    process.stderr.write(
+      chalk.green(`Welcome to ${apiData.org_display_name}!
+`)
+    );
+  } catch (error) {
+    spinner.fail("Authentication failed!");
+    process.stderr.write(error?.message);
+    process.stderr.write("\n");
+    log("Error:", error);
+  }
+});
+export {
+  getApiData
+};

package/dist/commands/check.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/commands/check.js

@@ -0,0 +1,114 @@
+import { exec } from "node:child_process";
+import os from "node:os";
+import { program } from "commander";
+import ora from "ora";
+import chalk from "chalk";
+const checks = {
+  ffmpeg: {
+    message: () => {
+      const platform = os.platform();
+      const message = [
+        "Processing assets for <ef-video>, <ef-audio>, <ef-captions>, and <ef-waveform>\n elements requires ffmpeg to be installed."
+      ];
+      switch (platform) {
+        case "darwin": {
+          message.push(
+            "On platform=darwin you can install ffmpeg using Homebrew:"
+          );
+          message.push(" - brew install ffmpeg");
+          message.push(
+            "Or you can download ffmpeg from https://ffmpeg.org/download.html"
+          );
+          break;
+        }
+        case "linux": {
+          message.push(
+            "You can install ffmpeg using your distribution's package manager."
+          );
+          break;
+        }
+        case "win32": {
+          message.push(
+            "You can download ffmpeg from https://ffmpeg.org/download.html"
+          );
+          message.push(
+            "You can use package managers like Chocolatey or Scoop to install ffmpeg."
+          );
+          message.push(" - choco install ffmpeg-full");
+          message.push(" - scoop install ffmpeg");
+          message.push(" - winget install ffmpeg");
+          break;
+        }
+        default: {
+          message.push(`Unrecognized platform ${platform}`);
+          message.push(
+            "You can download ffmpeg from https://ffmpeg.org/download.html"
+          );
+          message.push(
+            "Or try installing it from your operating system's package manager"
+          );
+          break;
+        }
+      }
+      return message;
+    },
+    check: async () => {
+      return new Promise((resolve, reject) => {
+        exec("ffmpeg -version", (error, stdout, _stderr) => {
+          if (error) {
+            reject(error);
+            return;
+          }
+          resolve(stdout);
+        });
+      });
+    }
+  },
+  whisper_timestamped: {
+    message: () => {
+      const message = [
+        "<ef-captions> Requires whisper_timestamped to be installed."
+      ];
+      message.push("whisper_timestamped depends on python3");
+      message.push(" - pip3 install whisper_timestamped");
+      message.push("Alternate installation instructions are availble at:");
+      message.push(
+        "https://github.com/linto-ai/whisper-timestamped#installation"
+      );
+      return message;
+    },
+    check: async () => {
+      return new Promise((resolve, reject) => {
+        exec(
+          "whisper_timestamped --version",
+          (error, stdout, _stderr) => {
+            if (error) {
+              reject(error);
+              return;
+            }
+            resolve(stdout);
+          }
+        );
+      });
+    }
+  }
+};
+program.command("check").description("Check on dependencies and other requirements").action(async () => {
+  for (const checkName in checks) {
+    const check = checks[checkName];
+    if (!check) {
+      continue;
+    }
+    const spinner = ora(`Checking ${checkName}`).start();
+    try {
+      await check.check();
+      spinner.succeed(
+        chalk.white.bgGreen(` Check for ${checkName} passed  `)
+      );
+    } catch (error) {
+      spinner.fail(chalk.white.bgRed(`  Check for ${checkName} failed  `));
+      process.stderr.write(chalk.red(check.message().join("\n\n")));
+      process.stderr.write("\n");
+    }
+  }
+});

package/dist/commands/preview.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/commands/preview.js

@@ -0,0 +1,5 @@
+import { program } from "commander";
+import { spawn } from "node:child_process";
+program.command("preview [directory]").description("Preview a directory's index.html file").action(async (projectDirectory = ".") => {
+  spawn("npx", ["vite", "dev"], { cwd: projectDirectory, stdio: "inherit" });
+});

package/dist/commands/process-file.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/commands/process-file.js

@@ -0,0 +1,32 @@
+import { basename } from "node:path";
+import { program } from "commander";
+import { withSpinner } from "../utils/withSpinner.js";
+import { getClient } from "../utils/index.js";
+import { createReadStream } from "node:fs";
+import { createUnprocessedFile, uploadUnprocessedFile, updateUnprocessedFile } from "@editframe/api";
+import { md5FilePath } from "@editframe/assets";
+program.command("process-file <file>").description("Upload a audio/video to Editframe for processing.").action(async (path) => {
+  const client = getClient();
+  const fileId = await md5FilePath(path);
+  await withSpinner("Creating unprocessed file record", async () => {
+    await createUnprocessedFile(client, {
+      id: fileId,
+      processes: [],
+      filename: basename(path)
+    });
+  });
+  const readStream = createReadStream(path);
+  await withSpinner("Uploading file", async () => {
+    await uploadUnprocessedFile(client, fileId, readStream);
+  });
+  const unprocessedFile = await withSpinner(
+    "Marking for processing",
+    async () => {
+      return await updateUnprocessedFile(client, fileId, {
+        processes: ["isobmff"]
+      });
+    }
+  );
+  process.stderr.write("File uploaded and marked for processing.\n");
+  console.log(JSON.stringify(unprocessedFile, null, 2));
+});

package/dist/commands/process.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/commands/process.js

@@ -0,0 +1,35 @@
+import { spawnSync } from "node:child_process";
+import path from "node:path";
+import { program } from "commander";
+import { withSpinner } from "../utils/withSpinner.js";
+import { launchBrowserAndWaitForSDK } from "../utils/launchBrowserAndWaitForSDK.js";
+import { PreviewServer } from "../utils/startPreviewServer.js";
+import { getRenderInfo } from "../operations/getRenderInfo.js";
+import { processRenderInfo } from "../operations/processRenderInfo.js";
+program.command("process [directory]").description(
+  "Process's a directory's index.html file, analyzing assets and processing them for rendering"
+).action(async (directory) => {
+  directory ??= ".";
+  const distDir = path.join(directory, "dist");
+  await withSpinner("Building\n", async () => {
+    spawnSync("npx", ["vite", "build", directory], {
+      stdio: "inherit"
+    });
+  });
+  const previewServer = await PreviewServer.start(distDir);
+  process.stderr.write("Preview server started at ");
+  process.stderr.write(previewServer.url);
+  process.stderr.write("\n");
+  await launchBrowserAndWaitForSDK(
+    {
+      url: previewServer.url,
+      efInteractive: false,
+      interactive: false,
+      headless: true
+    },
+    async (page) => {
+      const renderInfo = await page.evaluate(getRenderInfo);
+      await processRenderInfo(renderInfo);
+    }
+  );
+});

package/dist/commands/render.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/commands/render.js

@@ -0,0 +1,151 @@
+import path from "node:path";
+import { readFile, writeFile } from "node:fs/promises";
+import { inspect } from "node:util";
+import { PassThrough } from "node:stream";
+import * as tar from "tar";
+import { program, Option } from "commander";
+import { parse } from "node-html-parser";
+import { build } from "vite";
+import { md5Directory, md5FilePath } from "@editframe/assets";
+import { withSpinner } from "../utils/withSpinner.js";
+import { syncAssetDirectory } from "../operations/syncAssetsDirectory.js";
+import { createRender, uploadRender } from "@editframe/api";
+import { launchBrowserAndWaitForSDK } from "../utils/launchBrowserAndWaitForSDK.js";
+import { PreviewServer } from "../utils/startPreviewServer.js";
+import { getClient } from "../utils/index.js";
+import { getRenderInfo } from "../operations/getRenderInfo.js";
+import { processRenderInfo } from "../operations/processRenderInfo.js";
+import { validateVideoResolution } from "../utils/validateVideoResolution.js";
+const buildProductionUrl = async (origin, tagName, assetPath) => {
+  const md5Sum = await md5FilePath(assetPath);
+  const basename = path.basename(assetPath);
+  switch (tagName) {
+    case "ef-audio":
+    case "ef-video": {
+      return `${origin}/api/video2/isobmff_files/${md5Sum}/${basename}`;
+    }
+    case "ef-captions": {
+      return `${origin}/api/video2/caption_files/${md5Sum}/${basename}`;
+    }
+    case "ef-image": {
+      return `${origin}/api/video2/image_files/${md5Sum}/${basename}`;
+    }
+    default: {
+      return assetPath;
+    }
+  }
+};
+class V1Builder {
+  async buildProductionUrl(tagName, assetPath) {
+    return buildProductionUrl("editframe://", tagName, assetPath);
+  }
+}
+class V2Builder {
+  async buildProductionUrl(tagName, assetPath) {
+    const efRenderHost = program.opts().efRenderHost;
+    return buildProductionUrl(efRenderHost, tagName, assetPath);
+  }
+}
+const strategyBuilders = {
+  v1: new V1Builder(),
+  v2: new V2Builder()
+};
+program.command("render [directory]").description(
+  "Render a directory's index.html file as a video in the editframe cloud"
+).addOption(
+  new Option("-s, --strategy <strategy>", "Render strategy").choices(["v1", "v2"]).default("v1")
+).action(async (directory, options) => {
+  directory ??= ".";
+  await syncAssetDirectory(directory);
+  const srcDir = path.join(directory, "src");
+  const distDir = path.join(directory, "dist");
+  const builder = strategyBuilders[options.strategy];
+  if (!builder) {
+    console.error("Invalid strategy", options.strategy);
+    return;
+  }
+  await withSpinner("Building\n", async () => {
+    try {
+      await build({
+        root: directory,
+        logLevel: "info",
+        // Optional: adjust log level as needed
+        clearScreen: false
+        // Optional: keep console output clean
+      });
+    } catch (error) {
+      console.error("Build failed:", error);
+    }
+  });
+  const previewServer = await PreviewServer.start(distDir);
+  process.stderr.write("Preview server started at:");
+  process.stderr.write(previewServer.url);
+  process.stderr.write("\n");
+  await launchBrowserAndWaitForSDK(
+    {
+      url: previewServer.url,
+      efInteractive: false,
+      interactive: false,
+      headless: true
+    },
+    async (page) => {
+      const renderInfo = await page.evaluate(getRenderInfo);
+      validateVideoResolution({
+        width: renderInfo.width,
+        height: renderInfo.height
+      });
+      await processRenderInfo(renderInfo);
+      const doc = parse(
+        await readFile(path.join(distDir, "index.html"), "utf-8")
+      );
+      const elements = doc.querySelectorAll(
+        "ef-audio, ef-video, ef-image, ef-captions"
+      );
+      for (const element of elements) {
+        const src = element.getAttribute("src");
+        if (!src) {
+          continue;
+        }
+        const assetPath = path.join(srcDir, src);
+        element.setAttribute(
+          "src",
+          await builder.buildProductionUrl(
+            element.tagName.toLowerCase(),
+            assetPath
+          )
+        );
+      }
+      await writeFile(path.join(distDir, "index.html"), doc.toString());
+      const md5 = await md5Directory(distDir);
+      const render = await createRender(getClient(), {
+        id: md5,
+        width: renderInfo.width,
+        height: renderInfo.height,
+        fps: renderInfo.fps,
+        duration_ms: renderInfo.durationMs,
+        work_slice_ms: 4e3,
+        strategy: options.strategy
+      });
+      if (render?.status !== "created") {
+        process.stderr.write(
+          `Render is in '${render?.status}' status. It cannot be recreated while in this status.
+`
+        );
+        return;
+      }
+      const tarStream = tar.create(
+        {
+          gzip: true,
+          cwd: distDir
+        },
+        ["."]
+      );
+      const readable = new PassThrough();
+      tarStream.pipe(readable);
+      await uploadRender(getClient(), md5, readable);
+      process.stderr.write("Render assets uploaded\n");
+      process.stderr.write(inspect(render));
+      process.stderr.write("\n");
+    }
+  );
+});

package/dist/commands/sync.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/commands/sync.js

@@ -0,0 +1,5 @@
+import { program } from "commander";
+import { syncAssetDirectory } from "../operations/syncAssetsDirectory.js";
+program.command("sync").description("Sync assets to Editframe servers for rendering").argument("[directory]", "Path to project directory to sync.").action(async (projectDirectory = ".") => {
+  await syncAssetDirectory(projectDirectory);
+});

package/dist/index.d.ts

@@ -0,0 +1 @@
+

package/dist/index.js

@@ -0,0 +1,17 @@
+#!/usr/bin/env node
+import "dotenv/config";
+import { program, Option } from "commander";
+import { VERSION } from "./VERSION.js";
+import "./commands/auth.js";
+import "./commands/sync.js";
+import "./commands/render.js";
+import "./commands/preview.js";
+import "./commands/process.js";
+import "./commands/process-file.js";
+import "./commands/check.js";
+program.name("editframe").addOption(new Option("-t, --token <token>", "API Token").env("EF_TOKEN")).addOption(
+  new Option("--ef-host <host>", "Editframe Host").env("EF_HOST").default("https://editframe.dev")
+).addOption(
+  new Option("--ef-render-host <host>", "Editframe Render Host").env("EF_RENDER_HOST").default("https://editframe.dev")
+).version(VERSION);
+program.parse(process.argv);

package/dist/operations/getRenderInfo.d.ts

@@ -0,0 +1,15 @@
+/**
+ * THIS MODULE DOESNT USE THE DEBUG LOGGER BECAUSE IT IS
+ * RUN IN A WEB BROWSER. LOGS ARE CAPTURED AND RE-LOGGED.
+ */
+export declare const getRenderInfo: () => Promise<{
+    width: number;
+    height: number;
+    fps: number;
+    durationMs: number;
+    assets: {
+        efMedia: Record<string, any>;
+        efCaptions: string[];
+        efImage: string[];
+    };
+}>;

package/dist/operations/getRenderInfo.js

@@ -0,0 +1,59 @@
+const getRenderInfo = async () => {
+  const rootTimeGroup = document.querySelector("ef-timegroup");
+  if (!rootTimeGroup) {
+    throw new Error("No ef-timegroup found");
+  }
+  console.error("Waiting for media durations", rootTimeGroup);
+  await rootTimeGroup.waitForMediaDurations();
+  const width = rootTimeGroup.clientWidth;
+  const height = rootTimeGroup.clientHeight;
+  const fps = 30;
+  const durationMs = Math.round(rootTimeGroup.durationMs);
+  const elements = document.querySelectorAll(
+    "ef-audio, ef-video, ef-image, ef-captions"
+  );
+  const assets = {
+    efMedia: {},
+    efCaptions: /* @__PURE__ */ new Set(),
+    efImage: /* @__PURE__ */ new Set()
+  };
+  for (const element of elements) {
+    switch (element.tagName) {
+      case "EF-AUDIO":
+      case "EF-VIDEO": {
+        const src = element.src;
+        console.error("Processing element", element.tagName, src);
+        assets.efMedia[src] = element.trackFragmentIndexLoader.value;
+        break;
+      }
+      case "EF-IMAGE": {
+        const src = element.src;
+        console.error("Processing element", element.tagName, src);
+        assets.efImage.add(src);
+        break;
+      }
+      case "EF-CAPTIONS": {
+        const src = element.targetElement?.src;
+        console.error("Processing element", element.tagName, src);
+        assets.efCaptions.add(src);
+        break;
+      }
+    }
+  }
+  const renderInfo = {
+    width,
+    height,
+    fps,
+    durationMs,
+    assets: {
+      efMedia: assets.efMedia,
+      efCaptions: Array.from(assets.efCaptions),
+      efImage: Array.from(assets.efImage)
+    }
+  };
+  console.error("Render info", renderInfo);
+  return renderInfo;
+};
+export {
+  getRenderInfo
+};

package/dist/operations/processRenderInfo.d.ts

@@ -0,0 +1,3 @@
+import { getRenderInfo } from './getRenderInfo.ts';
+
+export declare const processRenderInfo: (renderInfo: Awaited<ReturnType<typeof getRenderInfo>>) => Promise<void>;

package/dist/operations/processRenderInfo.js

@@ -0,0 +1,30 @@
+import { generateTrack, cacheImage, findOrCreateCaptions } from "@editframe/assets";
+const processRenderInfo = async (renderInfo) => {
+  for (const [src, tracks] of Object.entries(renderInfo.assets.efMedia)) {
+    process.stderr.write("Processing media asset: ");
+    process.stderr.write(src);
+    process.stderr.write("\n");
+    for (const trackId in tracks) {
+      await generateTrack(
+        "./src/assets",
+        `./src${src}`,
+        `src?trackId=${trackId}`
+      );
+    }
+  }
+  for (const imageAsset of renderInfo.assets.efImage) {
+    process.stderr.write("Processing image asset: ");
+    process.stderr.write(imageAsset);
+    process.stderr.write("\n");
+    await cacheImage("./src/assets", `./src${imageAsset}`);
+  }
+  for (const captionsAsset of renderInfo.assets.efCaptions) {
+    process.stderr.write("Processing captions asset: ");
+    process.stderr.write(captionsAsset);
+    process.stderr.write("\n");
+    await findOrCreateCaptions("./src/assets", `./src${captionsAsset}`);
+  }
+};
+export {
+  processRenderInfo
+};

package/dist/operations/syncAssetsDirectory.d.ts

@@ -0,0 +1 @@
+export declare const syncAssetDirectory: (projectDirectory: string) => Promise<void>;