@editframe/cli 0.16.8-beta.0 → 0.18.3-beta.0

package/dist/commands/render.js

@@ -1,167 +1,127 @@
+import { getClient } from "../utils/index.js";
+import { createReadableStreamFromReadable } from "../utils/createReadableStreamFromReadable.js";
+import { SyncStatus } from "../operations/syncAssetsDirectory/SyncStatus.js";
+import { syncAssetDirectory } from "../operations/syncAssetsDirectory.js";
+import { processRenderInfo } from "../operations/processRenderInfo.js";
+import { withSpinner } from "../utils/withSpinner.js";
+import { launchBrowserAndWaitForSDK } from "../utils/launchBrowserAndWaitForSDK.js";
+import { PreviewServer } from "../utils/startPreviewServer.js";
+import { validateVideoResolution } from "../utils/validateVideoResolution.js";
+import { Option, program } from "commander";
+import debug from "debug";
+import { createRender, uploadRender } from "@editframe/api";
+import path, { basename, join } from "node:path";
 import { readFile, writeFile } from "node:fs/promises";
-import path, { join, basename } from "node:path";
 import { PassThrough } from "node:stream";
+import { md5Directory, md5FilePath } from "@editframe/assets";
 import { inspect } from "node:util";
-import { program, Option } from "commander";
 import { parse } from "node-html-parser";
 import * as tar from "tar";
-import { md5Directory, md5FilePath } from "@editframe/assets";
 import { spawnSync } from "node:child_process";
-import { createRender, uploadRender } from "@editframe/api";
 import { RenderInfo, getRenderInfo } from "@editframe/elements";
-import debug from "debug";
-import { processRenderInfo } from "../operations/processRenderInfo.js";
-import { syncAssetDirectory } from "../operations/syncAssetsDirectory.js";
-import { SyncStatus } from "../operations/syncAssetsDirectory/SyncStatus.js";
-import { createReadableStreamFromReadable } from "../utils/createReadableStreamFromReadable.js";
-import { getClient } from "../utils/index.js";
-import { launchBrowserAndWaitForSDK } from "../utils/launchBrowserAndWaitForSDK.js";
-import { PreviewServer } from "../utils/startPreviewServer.js";
-import { validateVideoResolution } from "../utils/validateVideoResolution.js";
-import { withSpinner } from "../utils/withSpinner.js";
 const log = debug("ef:cli:render");
-const buildAssetId = async (srcDir, src, basename2) => {
-  log(`Building image asset id for ${src}
-`);
-  const assetPath = path.join(srcDir, src);
-  const assetMd5 = await md5FilePath(assetPath);
-  const syncStatus = new SyncStatus(
-    join(srcDir, "assets", ".cache", assetMd5, basename2)
-  );
-  const info = await syncStatus.readInfo();
-  if (!info) {
-    throw new Error(`SyncStatus info is not found for ${syncStatus.infoPath}`);
-  }
-  return info.id;
+const buildAssetId = async (srcDir, src, basename$1) => {
+	log(`Building image asset id for ${src}\n`);
+	const assetPath = path.join(srcDir, src);
+	const assetMd5 = await md5FilePath(assetPath);
+	const syncStatus = new SyncStatus(join(srcDir, "assets", ".cache", assetMd5, basename$1));
+	const info = await syncStatus.readInfo();
+	if (!info) throw new Error(`SyncStatus info is not found for ${syncStatus.infoPath}`);
+	return info.id;
 };
-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"]).default("v1")
-).action(async (directory, options) => {
-  directory ??= ".";
-  await syncAssetDirectory(
-    join(process.cwd(), directory, "src", "assets", ".cache")
-  );
-  const srcDir = path.join(directory, "src");
-  const distDir = path.join(directory, "dist");
-  await withSpinner("Building\n", async () => {
-    try {
-      await withSpinner("Building\n", async () => {
-        spawnSync(
-          "npx",
-          // biome-ignore format: Grouping CLI arguments
-          [
-            "vite",
-            "build",
-            directory,
-            "--clearScreen",
-            "false",
-            "--logLevel",
-            "debug"
-          ],
-          {
-            stdio: "inherit"
-          }
-        );
-      });
-    } 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 = RenderInfo.parse(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")
-      );
-      log("Building asset IDs");
-      for (const element of doc.querySelectorAll(
-        "ef-image, ef-audio, ef-video"
-      )) {
-        log(`Processing ${element.tagName}`);
-        if (element.hasAttribute("asset-id")) {
-          log(
-            `Asset ID for ${element.tagName} ${element.getAttribute("src")} is ${element.getAttribute("asset-id")}`
-          );
-          continue;
-        }
-        const src = element.getAttribute("src");
-        if (!src) {
-          log(`No src attribute for ${element.tagName}`);
-          continue;
-        }
-        switch (element.tagName) {
-          case "EF-IMAGE":
-            element.setAttribute(
-              "asset-id",
-              await buildAssetId(srcDir, src, basename(src))
-            );
-            break;
-          case "EF-AUDIO":
-          case "EF-VIDEO":
-            element.setAttribute(
-              "asset-id",
-              await buildAssetId(srcDir, src, "isobmff")
-            );
-            break;
-          default:
-            log(`Unknown element type: ${element.tagName}`);
-        }
-      }
-      await writeFile(path.join(distDir, "index.html"), doc.toString());
-      const md5 = await md5Directory(distDir);
-      const render = await createRender(getClient(), {
-        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(),
-        render.id,
-        createReadableStreamFromReadable(readable)
-      );
-      process.stderr.write("Render assets uploaded\n");
-      process.stderr.write(inspect(render));
-      process.stderr.write("\n");
-    }
-  );
+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"]).default("v1")).action(async (directory, options) => {
+	directory ??= ".";
+	await syncAssetDirectory(join(process.cwd(), directory, "src", "assets", ".cache"));
+	const srcDir = path.join(directory, "src");
+	const distDir = path.join(directory, "dist");
+	await withSpinner("Building\n", async () => {
+		try {
+			await withSpinner("Building\n", async () => {
+				spawnSync("npx", [
+					"vite",
+					"build",
+					directory,
+					"--clearScreen",
+					"false",
+					"--logLevel",
+					"debug"
+				], { stdio: "inherit" });
+			});
+		} 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 = RenderInfo.parse(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"));
+		log("Building asset IDs");
+		for (const element of doc.querySelectorAll("ef-image, ef-audio, ef-video")) {
+			log(`Processing ${element.tagName}`);
+			if (element.hasAttribute("asset-id")) {
+				log(`Asset ID for ${element.tagName} ${element.getAttribute("src")} is ${element.getAttribute("asset-id")}`);
+				continue;
+			}
+			const src = element.getAttribute("src");
+			if (!src) {
+				log(`No src attribute for ${element.tagName}`);
+				continue;
+			}
+			switch (element.tagName) {
+				case "EF-IMAGE":
+					element.setAttribute("asset-id", await buildAssetId(srcDir, src, basename(src)));
+					break;
+				case "EF-AUDIO":
+				case "EF-VIDEO":
+					element.setAttribute("asset-id", await buildAssetId(srcDir, src, "isobmff"));
+					break;
+				default: log(`Unknown element type: ${element.tagName}`);
+			}
+		}
+		await writeFile(path.join(distDir, "index.html"), doc.toString());
+		const md5 = await md5Directory(distDir);
+		const render = await createRender(getClient(), {
+			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.\n`);
+			return;
+		}
+		/**
+		* This tar stream is created with the dist directory as the root.
+		* This is acheived by setting the cwd option to the dist directory.
+		* And the files to be included in the tar stream are all files in the dist directory.
+		*
+		* The renderer expects to find the index.html file at the root of the tar stream.
+		*/
+		const tarStream = tar.create({
+			gzip: true,
+			cwd: distDir
+		}, ["."]);
+		const readable = new PassThrough();
+		tarStream.pipe(readable);
+		await uploadRender(getClient(), render.id, createReadableStreamFromReadable(readable));
+		process.stderr.write("Render assets uploaded\n");
+		process.stderr.write(inspect(render));
+		process.stderr.write("\n");
+	});
 });
-export {
-  buildAssetId
-};

package/dist/commands/sync.js

@@ -1,8 +1,6 @@
-import { join } from "node:path";
-import { program } from "commander";
 import { syncAssetDirectory } from "../operations/syncAssetsDirectory.js";
+import { program } from "commander";
+import { join } from "node:path";
 program.command("sync").description("Sync assets to Editframe servers for rendering").argument("[directory]", "Path to project directory to sync.").action(async (directory = ".") => {
-  await syncAssetDirectory(
-    join(process.cwd(), directory, "src", "assets", ".cache")
-  );
+	await syncAssetDirectory(join(process.cwd(), directory, "src", "assets", ".cache"));
 });

package/dist/commands/webhook.js

@@ -1,61 +1,57 @@
-import { input, select } from "@inquirer/prompts";
+import { getClient } from "../utils/index.js";
+import { Option, program } from "commander";
 import chalk from "chalk";
-import { program, Option } from "commander";
 import debug from "debug";
 import ora from "ora";
-import { getClient } from "../utils/index.js";
+import { input, select } from "@inquirer/prompts";
 const log = debug("ef:cli:auth");
 const topics = [
-  "render.created",
-  "render.rendering",
-  "render.pending",
-  "render.failed",
-  "render.completed"
+	"render.created",
+	"render.rendering",
+	"render.pending",
+	"render.failed",
+	"render.completed"
 ];
-const testWebhookURL = async ({
-  webhookURL,
-  topic
-}) => {
-  const response = await getClient().authenticatedFetch(
-    "/api/v1/test_webhook",
-    {
-      method: "POST",
-      body: JSON.stringify({
-        webhookURL,
-        topic
-      })
-    }
-  );
-  return response.json();
+const testWebhookURL = async ({ webhookURL, topic }) => {
+	const response = await getClient().authenticatedFetch("/api/v1/test_webhook", {
+		method: "POST",
+		body: JSON.stringify({
+			webhookURL,
+			topic
+		})
+	});
+	return response.json();
 };
 const webhookCommand = program.command("webhook").description("Test webhook URL with a topic").option("-u, --webhookURL <webhookURL>", "Webhook URL").addOption(new Option("-t, --topic <topic>", "Topic").choices(topics)).action(async () => {
-  const options = webhookCommand.opts();
-  log("Options:", options);
-  let { webhookURL, topic } = options;
-  if (!webhookURL) {
-    const answer = await input({ message: "Enter a webhook URL:" });
-    webhookURL = answer;
-  }
-  if (!topic) {
-    const answer = await select({
-      message: "Select a topic:",
-      choices: [...topics.map((topic2) => ({ title: topic2, value: topic2 }))]
-    });
-    topic = answer;
-  }
-  const spinner = ora("Testing...").start();
-  try {
-    const apiData = await testWebhookURL({ webhookURL, topic });
-    spinner.succeed("Webhook URL is working! 🎉");
-    process.stderr.write(chalk.green(`${apiData.message}
-`));
-  } catch (error) {
-    spinner.fail("Webhook URL is not working!");
-    process.stderr.write(error?.message);
-    process.stderr.write("\n");
-    log("Error:", error);
-  }
+	const options = webhookCommand.opts();
+	log("Options:", options);
+	let { webhookURL, topic } = options;
+	if (!webhookURL) {
+		const answer = await input({ message: "Enter a webhook URL:" });
+		webhookURL = answer;
+	}
+	if (!topic) {
+		const answer = await select({
+			message: "Select a topic:",
+			choices: [...topics.map((topic$1) => ({
+				title: topic$1,
+				value: topic$1
+			}))]
+		});
+		topic = answer;
+	}
+	const spinner = ora("Testing...").start();
+	try {
+		const apiData = await testWebhookURL({
+			webhookURL,
+			topic
+		});
+		spinner.succeed("Webhook URL is working! 🎉");
+		process.stderr.write(chalk.green(`${apiData.message}\n`));
+	} catch (error) {
+		spinner.fail("Webhook URL is not working!");
+		process.stderr.write(error?.message);
+		process.stderr.write("\n");
+		log("Error:", error);
+	}
 });
-export {
-  testWebhookURL
-};

package/dist/index.js

@@ -1,6 +1,4 @@
 #!/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";
@@ -10,9 +8,7 @@ import "./commands/process.js";
 import "./commands/process-file.js";
 import "./commands/check.js";
 import "./commands/webhook.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);
+import "dotenv/config";
+import { Option, program } from "commander";
+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/processRenderInfo.js

@@ -1,33 +1,27 @@
-import { generateTrack, cacheImage, findOrCreateCaptions } from "@editframe/assets";
+import { cacheImage, findOrCreateCaptions, generateTrack } 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) {
-      process.stderr.write("Generating track: ");
-      process.stderr.write(trackId);
-      process.stderr.write("\n");
-      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
+	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) {
+			process.stderr.write("Generating track: ");
+			process.stderr.write(trackId);
+			process.stderr.write("\n");
+			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/SubAssetSync.js

@@ -1,29 +1,22 @@
-import debug from "debug";
 import { SyncCaption } from "./SyncCaption.js";
 import { SyncFragmentIndex } from "./SyncFragmentIndex.js";
 import { SyncImage } from "./SyncImage.js";
 import { SyncTrack } from "./SyncTrack.js";
+import debug from "debug";
 const trackMatch = /\.track-[\d]+.mp4$/i;
 const fragmentIndexMatch = /\.tracks.json$/i;
 const captionsMatch = /\.captions.json$/i;
 const imageMatch = /\.(png|jpe?g|gif|webp)$/i;
 const log = debug("ef:SubAssetSync");
 const getAssetSync = (subAssetPath, md5) => {
-  log("getAssetSync", { subAssetPath, md5 });
-  if (imageMatch.test(subAssetPath)) {
-    return new SyncImage(subAssetPath, md5);
-  }
-  if (trackMatch.test(subAssetPath)) {
-    return new SyncTrack(subAssetPath, md5);
-  }
-  if (fragmentIndexMatch.test(subAssetPath)) {
-    return new SyncFragmentIndex(subAssetPath, md5);
-  }
-  if (captionsMatch.test(subAssetPath)) {
-    return new SyncCaption(subAssetPath, md5);
-  }
-  throw new Error(`Unrecognized sub-asset type: ${subAssetPath}`);
-};
-export {
-  getAssetSync
+	log("getAssetSync", {
+		subAssetPath,
+		md5
+	});
+	if (imageMatch.test(subAssetPath)) return new SyncImage(subAssetPath, md5);
+	if (trackMatch.test(subAssetPath)) return new SyncTrack(subAssetPath, md5);
+	if (fragmentIndexMatch.test(subAssetPath)) return new SyncFragmentIndex(subAssetPath, md5);
+	if (captionsMatch.test(subAssetPath)) return new SyncCaption(subAssetPath, md5);
+	throw new Error(`Unrecognized sub-asset type: ${subAssetPath}`);
 };
+export { getAssetSync };