@editframe/cli 0.7.0-beta.1 → 0.7.0-beta.11

package/dist/utils/validateVideoResolution.js

@@ -0,0 +1,27 @@
+import { z } from "zod";
+import ora from "ora";
+import debug from "debug";
+const log = debug("ef:cli:auth");
+const schema = z.object({
+  width: z.number().int(),
+  height: z.number().int()
+}).refine((data) => data.width % 2 === 0 && data.height % 2 === 0, {
+  message: "Both width and height must be divisible by 2.",
+  path: ["width", "height"]
+});
+const validateVideoResolution = async (rawPayload) => {
+  const spinner = ora("Validating video resolution").start();
+  const result = schema.safeParse(rawPayload);
+  if (result.success) {
+    spinner.succeed("Video resolution is valid");
+    return result.data;
+  }
+  spinner.fail("Invalid video resolution");
+  process.stderr.write(result.error?.errors.map((e) => e.message).join("\n"));
+  process.stderr.write("\n");
+  log("Error:", result.error?.errors.map((e) => e.message).join("\n"));
+  process.exit(1);
+};
+export {
+  validateVideoResolution
+};

package/package.json

@@ -1,17 +1,10 @@
 {
   "name": "@editframe/cli",
-  "version": "0.7.0-beta.1",
+  "version": "0.7.0-beta.11",
   "description": "Command line interface for EditFrame",
   "bin": {
     "editframe": "./dist/index.js"
   },
-  "exports": {
-    "./api": {
-      "import": "./dist/api/index.js",
-      "require": "./dist/api/index.cjs"
-    }
-  },
-  "types": "./dist/index.d.ts",
   "type": "module",
   "scripts": {
     "typecheck": "tsc --noEmit --emitDeclarationOnly false",
@@ -29,13 +22,14 @@
     "vite-tsconfig-paths": "^4.3.2"
   },
   "dependencies": {
-    "@editframe/assets": "0.7.0-beta.1",
-    "@editframe/elements": "0.7.0-beta.1",
-    "@editframe/vite-plugin": "0.7.0-beta.1",
+    "@editframe/api": "0.7.0-beta.11",
+    "@editframe/assets": "0.7.0-beta.11",
+    "@editframe/elements": "0.7.0-beta.11",
+    "@editframe/vite-plugin": "0.7.0-beta.11",
     "axios": "^1.6.8",
     "chalk": "^5.3.0",
     "commander": "^12.0.0",
-    "debug": "^4.3.4",
+    "debug": "^4.3.5",
     "dotenv": "^16.4.5",
     "mime": "^4.0.3",
     "mp4box": "^0.5.2",

package/src/commands/auth.ts

@@ -1,7 +1,11 @@
 import { program } from "commander";
 import ora from "ora";
 import chalk from "chalk";
-import { authenticatedFetch } from "../utils";
+import debug from "debug";
+
+import { getClient } from "../utils";
+
+const log = debug("ef:cli:auth");
 
 export interface APIOrgResult {
   name: string;
@@ -13,32 +17,30 @@ export interface APIOrgResult {
 }
 
 export const getApiData = async () => {
-  const response = await authenticatedFetch("/api/org");
+  const response = await getClient().authenticatedFetch("/api/org");
   return response.json() as Promise<APIOrgResult>;
 };
 
 const authCommand = program
   .command("auth")
   .description("Fetch organization data using API token")
-  .option("-d, --debug", "output extra debugging")
   .action(async () => {
     const options = authCommand.opts();
-    if (options.debug) {
-      console.log("Options:", options);
-    }
+    log("Options:", options);
 
     const spinner = ora("Loading...").start();
 
     try {
       const apiData = await getApiData();
       spinner.succeed("You are authenticated! 🎉");
-      console.log(chalk.green(`Name: ${apiData.name}`));
-      console.log(chalk.green(`Welcome to ${apiData.org_display_name}!`));
+      process.stderr.write(chalk.green(`Name: ${apiData.name}\n`));
+      process.stderr.write(
+        chalk.green(`Welcome to ${apiData.org_display_name}!\n`),
+      );
     } catch (error: any) {
       spinner.fail("Authentication failed!");
-      console.error(error?.message);
-      if (options.debug) {
-        console.error(error);
-      }
+      process.stderr.write(error?.message);
+      process.stderr.write("\n");
+      log("Error:", error);
     }
   });

package/src/commands/check.ts

@@ -122,8 +122,8 @@ program
         );
       } catch (error) {
         spinner.fail(chalk.white.bgRed(`  Check for ${checkName} failed  `));
-        console.log(chalk.red(check.message().join("\n\n")));
-        console.log();
+        process.stderr.write(chalk.red(check.message().join("\n\n")));
+        process.stderr.write("\n");
       }
     }
   });

package/src/commands/process.ts

@@ -1,38 +1,44 @@
-// import { program, Option } from "commander";
-// import { withSpinner } from "../utils/withSpinner";
-// import type {} from "@/elements/elements";
-// import { launchBrowserAndWaitForSDK } from "../utils/launchBrowserAndWaitForSDK";
+import { spawnSync } from "node:child_process";
+import path from "node:path";
 
-// program
-//   .command("process <url>")
-//   .description("Process a URL")
-//   .addOption(
-//     new Option("-h, --host <host>", "Editframe host")
-//       .env("EF_HOST")
-//       .makeOptionMandatory(),
-//   )
-//   .action(async (url: string, options) => {
-//     await launchBrowserAndWaitForSDK({ url }, async (page) => {
-//       const htmlWithProductionSrcs = await withSpinner(
-//         "Fingerprinting assets",
-//         () =>
-//           page.evaluate(
-//             async ([host]) => {
-//               const workbench = document.querySelector("ef-workbench");
-//               if (!workbench) {
-//                 throw new Error("Workbench not found");
-//               }
-//               workbench.apiHost = host;
-//               await workbench.loadMd5Sums();
-//               for (const sheet of document.styleSheets) {
-//                 // sheet.
-//               }
-//               document.styleSheets;
-//               return document.documentElement.outerHTML;
-//             },
-//             [options.host] as [host: string],
-//           ),
-//       );
-//       process.stdout.write(htmlWithProductionSrcs);
-//     });
-//   });
+import { program } from "commander";
+
+import { withSpinner } from "../utils/withSpinner";
+import { launchBrowserAndWaitForSDK } from "../utils/launchBrowserAndWaitForSDK";
+import { PreviewServer } from "../utils/startPreviewServer";
+import { getRenderInfo } from "../operations/getRenderInfo";
+import { processRenderInfo } from "../operations/processRenderInfo";
+
+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 srcDir = path.join(directory, "src");
+    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/src/commands/render.ts

@@ -1,20 +1,24 @@
-import { spawnSync } from "node:child_process";
 import path from "node:path";
 import { readFile, writeFile } from "node:fs/promises";
 
 import * as tar from "tar";
 import { program, Option } from "commander";
 import { parse as parseHTML } from "node-html-parser";
+import { build } from "vite";
 
 import { md5Directory, md5FilePath } from "@editframe/assets";
-import type { EFTimegroup } from "@editframe/elements";
 
 import { withSpinner } from "../utils/withSpinner";
-import { createRender, uploadRender } from "../api/renders";
+import { createRender, uploadRender } from "@editframe/api";
 import { launchBrowserAndWaitForSDK } from "../utils/launchBrowserAndWaitForSDK";
 import { PreviewServer } from "../utils/startPreviewServer";
 import { PassThrough } from "node:stream";
 import { syncAssetDirectory } from "../operations/syncAssetsDirectory";
+import { getClient } from "../utils";
+import { getRenderInfo } from "../operations/getRenderInfo";
+import { processRenderInfo } from "../operations/processRenderInfo";
+import { inspect } from "node:util";
+import { validateVideoResolution } from "../utils/validateVideoResolution";
 
 interface StrategyBuilder {
   buildProductionUrl: (tagName: string, assetPath: string) => Promise<string>;
@@ -87,13 +91,21 @@ program
       return;
     }
     await withSpinner("Building\n", async () => {
-      spawnSync("npx", ["vite", "build", directory], {
-        stdio: "inherit",
-      });
+      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);
-    console.log("Preview server started at", previewServer.url);
+    process.stderr.write("Preview server started at:");
+    process.stderr.write(previewServer.url);
+    process.stderr.write("\n");
     await launchBrowserAndWaitForSDK(
       {
         url: previewServer.url,
@@ -102,26 +114,15 @@ program
         headless: true,
       },
       async (page) => {
-        const renderInfo = await page.evaluate(async () => {
-          const rootTimeGroup = document.querySelector("ef-timegroup") as
-            | EFTimegroup
-            | undefined;
-          if (!rootTimeGroup) {
-            throw new Error("No ef-timegroup found");
-          }
-
-          console.log("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 renderInfo = await page.evaluate(getRenderInfo);
 
-          return { width, height, fps, durationMs };
+        validateVideoResolution({
+          width: renderInfo.width,
+          height: renderInfo.height,
         });
 
-        console.log("RENDER INFO", renderInfo);
+        await processRenderInfo(renderInfo);
+
         const doc = parseHTML(
           await readFile(path.join(distDir, "index.html"), "utf-8"),
         );
@@ -147,7 +148,7 @@ program
         await writeFile(path.join(distDir, "index.html"), doc.toString());
 
         const md5 = await md5Directory(distDir);
-        const render = await createRender({
+        const render = await createRender(getClient(), {
           id: md5,
           width: renderInfo.width,
           height: renderInfo.height,
@@ -157,8 +158,8 @@ program
           strategy: options.strategy,
         });
         if (render?.status !== "created") {
-          console.error(
-            `Render is in '${render?.status}' status. It cannot be recreated while in this status.`,
+          process.stderr.write(
+            `Render is in '${render?.status}' status. It cannot be recreated while in this status.\n`,
           );
           return;
         }
@@ -178,9 +179,10 @@ program
         );
         const readable = new PassThrough();
         tarStream.pipe(readable);
-        await uploadRender(md5, readable);
-        console.log("Render assets uploaded");
-        console.log(render);
+        await uploadRender(getClient(), md5, readable);
+        process.stderr.write("Render assets uploaded\n");
+        process.stderr.write(inspect(render));
+        process.stderr.write("\n");
       },
     );
   });

package/src/operations/getRenderInfo.ts

@@ -0,0 +1,80 @@
+/**
+ * THIS MODULE DOESNT USE THE DEBUG LOGGER BECAUSE IT IS
+ * RUN IN A WEB BROWSER. LOGS ARE CAPTURED AND RE-LOGGED.
+ */
+
+import type {
+  EFCaptions,
+  EFImage,
+  EFMedia,
+  EFTimegroup,
+} from "@editframe/elements";
+
+export const getRenderInfo = async () => {
+  const rootTimeGroup = document.querySelector("ef-timegroup") as
+    | EFTimegroup
+    | undefined;
+  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: <Record<string, any>>{},
+    efCaptions: new Set<string>(),
+    efImage: new Set<string>(),
+  };
+
+  for (const element of elements) {
+    switch (element.tagName) {
+      case "EF-AUDIO":
+      case "EF-VIDEO": {
+        const src = (element as EFMedia).src;
+        console.error("Processing element", element.tagName, src);
+        assets.efMedia[src] = (
+          element as EFMedia
+        ).trackFragmentIndexLoader.value;
+        break;
+      }
+      case "EF-IMAGE": {
+        const src = (element as EFImage).src;
+        console.error("Processing element", element.tagName, src);
+        assets.efImage.add(src);
+        break;
+      }
+      case "EF-CAPTIONS": {
+        const src = (element as EFCaptions).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;
+};

package/src/operations/processRenderInfo.ts

@@ -0,0 +1,37 @@
+import {
+  generateTrack,
+  cacheImage,
+  findOrCreateCaptions,
+} from "@editframe/assets";
+import type { getRenderInfo } from "./getRenderInfo";
+
+export const processRenderInfo = async (
+  renderInfo: Awaited<ReturnType<typeof getRenderInfo>>,
+) => {
+  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}`);
+  }
+};