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

package/dist/operations/syncAssetsDirectory.js

@@ -0,0 +1,302 @@
+import { Probe } from "@editframe/assets";
+import fs from "node:fs/promises";
+import path from "node:path";
+import { createCaptionFile, uploadCaptionFile, createISOBMFFFile, uploadFragmentIndex, createISOBMFFTrack, uploadISOBMFFTrack, createImageFile, uploadImageFile } from "@editframe/api";
+import { createReadStream, statSync } from "node:fs";
+import { getClient } from "../utils/index.js";
+const imageMatch = /\.(png|jpe?g|gif|webp)$/i;
+const trackMatch = /\.track-[\d]+.mp4$/i;
+const fragmentIndexMatch = /\.tracks.json$/i;
+const captionsMatch = /\.captions.json$/i;
+class SyncStatus {
+  constructor(assetPath) {
+    this.assetPath = assetPath;
+    this.infoPath = `${this.assetPath}.info`;
+  }
+  async isSynced() {
+    const result = await fs.stat(this.infoPath).catch((error) => {
+      if (error.code === "ENOENT") {
+        return false;
+      }
+      throw error;
+    });
+    return !!result;
+  }
+  async markSynced() {
+    process.stderr.write(`✏️  Marking asset as synced: ${this.assetPath}
+`);
+    await fs.writeFile(this.infoPath, "{}", "utf-8");
+  }
+}
+const syncAssetDirectory = async (projectDirectory) => {
+  const fullPath = path.join(
+    process.cwd(),
+    projectDirectory,
+    "src",
+    "assets",
+    ".cache"
+  );
+  const stat = await fs.stat(fullPath).catch((error) => {
+    if (error.code === "ENOENT") {
+      return;
+    }
+    throw error;
+  });
+  if (!stat?.isDirectory()) {
+    console.error(`No assets cache directory found at ${fullPath}`);
+    return;
+  }
+  const assets = await fs.readdir(fullPath);
+  process.stderr.write(`Syncing asset dir: ${fullPath}
+`);
+  const errors = {};
+  const reportError = (path2, message) => {
+    errors[path2] ||= [];
+    errors[path2].push(message);
+    process.stderr.write(` 🚫 ${message}
+`);
+  };
+  const reportSuccess = (_path, message) => {
+    process.stderr.write(` ✅ ${message}
+`);
+  };
+  const reportInfo = (_path, message) => {
+    process.stderr.write(` ${message}
+`);
+  };
+  for (const asset of assets) {
+    reportInfo(asset, `Syncing asset: ${asset}`);
+    const assetDir = path.join(fullPath, asset);
+    const stat2 = await fs.stat(assetDir);
+    if (!stat2.isDirectory()) {
+      reportError(asset, "Invalid asset. Did not find asset directory.");
+      return;
+    }
+    const subAssets = await fs.readdir(assetDir);
+    for (const subAsset of subAssets) {
+      if (subAsset.endsWith(".info")) {
+        continue;
+      }
+      const subAssetPath = path.join(assetDir, subAsset);
+      const syncStatus = new SyncStatus(subAssetPath);
+      if (await syncStatus.isSynced()) {
+        reportInfo(
+          subAsset,
+          `✔ Sub-asset has already been synced: ${subAsset}`
+        );
+        continue;
+      }
+      switch (true) {
+        case imageMatch.test(subAsset): {
+          const probeResult = await Probe.probePath(subAssetPath);
+          const [videoProbe] = probeResult.videoStreams;
+          const { format } = probeResult;
+          if (!videoProbe) {
+            reportError(subAsset, `No media info found in image: ${subAsset}`);
+            break;
+          }
+          const ext = path.extname(subAsset).slice(1);
+          if (!(ext === "jpg" || ext === "jpeg" || ext === "png" || ext === "webp")) {
+            reportError(subAsset, `Invalid image format: ${subAsset}`);
+            break;
+          }
+          reportInfo(subAsset, `🖼️  Syncing image: ${subAsset}`);
+          const created = await createImageFile(getClient(), {
+            id: asset,
+            filename: subAsset,
+            width: videoProbe.width,
+            height: videoProbe.height,
+            mime_type: `image/${ext}`,
+            byte_size: (await fs.stat(subAssetPath)).size
+          });
+          if (created) {
+            if (created.complete) {
+              reportInfo(subAsset, " ✔ Image has already been synced");
+              await syncStatus.markSynced();
+            } else {
+              await uploadImageFile(
+                getClient(),
+                created.id,
+                createReadStream(subAssetPath),
+                Number.parseInt(format.size || "0")
+              ).then(() => {
+                reportSuccess(subAsset, "Image has been synced.");
+                return syncStatus.markSynced();
+              }).catch((error) => {
+                reportError(
+                  subAsset,
+                  `Error uploading image: ${error.message}`
+                );
+              });
+            }
+          }
+          break;
+        }
+        case trackMatch.test(subAsset): {
+          reportInfo(subAsset, `📼 Syncing a/v track: ${subAsset}`);
+          const createdFile = await createISOBMFFFile(getClient(), {
+            id: asset,
+            filename: subAsset.replace(/\.track-[\d]+.mp4$/, "")
+          });
+          if (createdFile) {
+            const probe = await Probe.probePath(subAssetPath);
+            const trackId = subAsset.match(/track-([\d]+).mp4/)?.[1];
+            if (!trackId) {
+              reportError(subAsset, `No track ID found for track: ${subAsset}`);
+              break;
+            }
+            const [track] = probe.streams;
+            if (!track) {
+              reportError(
+                subAsset,
+                `No track stream found in track: ${subAsset}`
+              );
+              break;
+            }
+            if (track.duration === void 0) {
+              reportError(subAsset, `No duration found in track: ${subAsset}`);
+              break;
+            }
+            const stat3 = await fs.stat(subAssetPath);
+            const createPayload = track.codec_type === "audio" ? {
+              type: track.codec_type,
+              file_id: asset,
+              track_id: Number(trackId),
+              probe_info: track,
+              duration_ms: Math.round(track.duration * 1e3),
+              codec_name: track.codec_name,
+              byte_size: stat3.size
+            } : {
+              type: track.codec_type,
+              file_id: asset,
+              track_id: Number(trackId),
+              probe_info: track,
+              duration_ms: Math.round(track.duration * 1e3),
+              codec_name: track.codec_name,
+              byte_size: stat3.size
+            };
+            const createdTrack = await createISOBMFFTrack(
+              getClient(),
+              createPayload
+            );
+            if (createdTrack) {
+              if (createdTrack.next_byte === createdTrack.byte_size) {
+                reportInfo(subAsset, "✔ Track has already been synced.");
+                await syncStatus.markSynced();
+              } else {
+                await uploadISOBMFFTrack(
+                  getClient(),
+                  createdFile.id,
+                  Number(trackId),
+                  createReadStream(subAssetPath),
+                  createdTrack.byte_size
+                ).then(() => {
+                  reportSuccess(subAsset, "Track has been synced.");
+                  return syncStatus.markSynced();
+                }).catch((error) => {
+                  reportError(
+                    subAsset,
+                    `Error uploading track: ${error.message}`
+                  );
+                });
+              }
+            }
+          }
+          break;
+        }
+        case fragmentIndexMatch.test(subAsset): {
+          reportInfo(subAsset, `📋 Syncing fragment index: ${subAsset}`);
+          const createdFile = await createISOBMFFFile(getClient(), {
+            id: asset,
+            filename: subAsset.replace(/\.tracks.json$/, "")
+          });
+          if (createdFile) {
+            if (createdFile.fragment_index_complete) {
+              reportInfo(subAsset, "✔ Fragment index has already been synced.");
+              await syncStatus.markSynced();
+            } else {
+              const stats = statSync(subAssetPath);
+              const readStream = createReadStream(subAssetPath);
+              await uploadFragmentIndex(
+                getClient(),
+                asset,
+                readStream,
+                stats.size
+              ).then(() => {
+                reportSuccess(subAsset, "Fragment index has been synced.");
+                return syncStatus.markSynced();
+              }).catch((error) => {
+                reportError(
+                  subAsset,
+                  `Error uploading fragment index: ${error.message}`
+                );
+              });
+            }
+          } else {
+            reportError(
+              subAsset,
+              `No file found for fragment index: ${subAsset}`
+            );
+            break;
+          }
+          break;
+        }
+        case captionsMatch.test(subAsset): {
+          reportInfo(subAsset, `📝 Syncing captions: ${subAsset}`);
+          const createdFile = await createCaptionFile(getClient(), {
+            id: asset,
+            filename: subAsset.replace(/\.captions.json$/, ""),
+            byte_size: (await fs.stat(subAsset)).size
+          });
+          if (createdFile) {
+            if (createdFile.complete) {
+              reportInfo(subAsset, "✔ Captions have already been synced.");
+              await syncStatus.markSynced();
+            } else {
+              const readStream = createReadStream(subAssetPath);
+              const stats = statSync(subAssetPath);
+              await uploadCaptionFile(
+                getClient(),
+                asset,
+                readStream,
+                stats.size
+              ).then(() => {
+                reportSuccess(subAsset, "Captions have been synced.");
+                return syncStatus.markSynced();
+              }).catch((error) => {
+                reportError(
+                  subAsset,
+                  `Error uploading captions: ${error.message}`
+                );
+              });
+            }
+          } else {
+            reportError(subAsset, `No file found for captions: ${subAsset}`);
+            break;
+          }
+          break;
+        }
+        default: {
+          reportError(subAsset, `Unknown sub-asset: ${subAsset}`);
+          break;
+        }
+      }
+    }
+  }
+  if (Object.keys(errors).length) {
+    process.stderr.write("\n\n❌ Encountered errors while syncing assets:\n");
+    for (const [asset, messages] of Object.entries(errors)) {
+      process.stderr.write(`
+🚫 ${asset}
+`);
+      for (const message of messages) {
+        process.stderr.write(`  - ${message}
+`);
+      }
+    }
+    throw new Error("Failed to sync assets");
+  }
+};
+export {
+  syncAssetDirectory
+};

package/dist/utils/attachWorkbench.d.ts

@@ -0,0 +1,2 @@
+import { Page } from 'playwright';
+export declare const attachWorkbench: (page: Page) => void;

package/dist/utils/getFolderSize.d.ts

@@ -0,0 +1 @@
+export declare const getFolderSize: (folderPath: string) => Promise<number>;

package/dist/utils/getFolderSize.js

@@ -0,0 +1,22 @@
+import { promises } from "node:fs";
+import path from "node:path";
+const getFolderSize = async (folderPath) => {
+  let totalSize = 0;
+  async function calculateSize(dir) {
+    const files = await promises.readdir(dir);
+    for (const file of files) {
+      const filePath = path.join(dir, file);
+      const stats = await promises.stat(filePath);
+      if (stats.isDirectory()) {
+        await calculateSize(filePath);
+      } else {
+        totalSize += stats.size;
+      }
+    }
+  }
+  await calculateSize(folderPath);
+  return totalSize;
+};
+export {
+  getFolderSize
+};

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+import { Client } from '../../../api/src';
+export declare const getClient: () => Client;

package/dist/utils/index.js

@@ -0,0 +1,14 @@
+import { program } from "commander";
+import "dotenv/config";
+import { Client } from "@editframe/api";
+let client;
+const getClient = () => {
+  if (!client) {
+    const programOpts = program.opts();
+    client = new Client(programOpts.token, programOpts.efHost);
+  }
+  return client;
+};
+export {
+  getClient
+};

package/dist/utils/launchBrowserAndWaitForSDK.d.ts

@@ -0,0 +1,9 @@
+import { Page } from 'playwright';
+interface LaunchOptions {
+    url: string;
+    headless?: boolean;
+    interactive?: boolean;
+    efInteractive?: boolean;
+}
+export declare function launchBrowserAndWaitForSDK(options: LaunchOptions, fn: (page: Page) => Promise<void>): Promise<void>;
+export {};

package/dist/utils/launchBrowserAndWaitForSDK.js

@@ -0,0 +1,49 @@
+import chalk from "chalk";
+import { chromium } from "playwright";
+import debug from "debug";
+import { withSpinner } from "./withSpinner.js";
+const browserLog = debug("ef:cli::browser");
+async function launchBrowserAndWaitForSDK(options, fn) {
+  const browser = await withSpinner("Launching chrome", async () => {
+    return chromium.launch({
+      channel: "chrome",
+      headless: options.headless ?? true,
+      // headless: false,
+      devtools: options.interactive === true
+    });
+  });
+  const page = await withSpinner("Loading EditFrame SDK", async () => {
+    const pageOptions = {};
+    if (options.interactive === true) {
+      pageOptions.viewport = null;
+    }
+    const page2 = await browser.newPage(pageOptions);
+    page2.on("console", (msg) => {
+      browserLog(chalk.blue(`browser (${msg.type()}) |`), msg.text());
+    });
+    const url = options.url + (options.efInteractive ? "" : "?EF_NONINTERACTIVE=1");
+    process.stderr.write("\nLoading url: ");
+    process.stderr.write(url);
+    process.stderr.write("\n");
+    await page2.goto(url);
+    await page2.waitForFunction(
+      () => {
+        return (
+          // @ts-expect-error
+          window.EF_REGISTERED
+        );
+      },
+      [],
+      { timeout: 1e4 }
+    );
+    return page2;
+  });
+  await fn(page);
+  if (options.interactive !== true) {
+    await browser.close();
+    process.exit(0);
+  }
+}
+export {
+  launchBrowserAndWaitForSDK
+};

package/dist/utils/startDevServer.d.ts

@@ -0,0 +1,7 @@
+import { ViteDevServer } from 'vite';
+export declare class DevServer {
+    private devServer;
+    static start(directory: string): Promise<DevServer>;
+    constructor(devServer: ViteDevServer);
+    get url(): string;
+}

package/dist/utils/startPreviewServer.d.ts

@@ -0,0 +1,7 @@
+import { ViteDevServer } from 'vite';
+export declare class PreviewServer {
+    private previewServer;
+    static start(directory: string): Promise<PreviewServer>;
+    constructor(previewServer: ViteDevServer);
+    get url(): string;
+}

package/dist/utils/startPreviewServer.js

@@ -0,0 +1,38 @@
+import { createServer } from "vite";
+import path from "node:path";
+import { vitePluginEditframe } from "@editframe/vite-plugin";
+import { withSpinner } from "./withSpinner.js";
+class PreviewServer {
+  constructor(previewServer) {
+    this.previewServer = previewServer;
+  }
+  static async start(directory) {
+    return new PreviewServer(await startPreviewServer(directory));
+  }
+  get url() {
+    return `http://localhost:${this.previewServer.config.server.port}`;
+  }
+}
+const startPreviewServer = async (directory) => {
+  return await withSpinner("Starting vite...", async () => {
+    const resolvedDirectory = path.resolve(process.cwd(), directory);
+    const cacheRoot = path.join(resolvedDirectory, "assets");
+    const devServer = await createServer({
+      server: {
+        watch: null
+      },
+      root: resolvedDirectory,
+      plugins: [
+        vitePluginEditframe({
+          root: resolvedDirectory,
+          cacheRoot
+        })
+      ]
+    });
+    await devServer.listen();
+    return devServer;
+  });
+};
+export {
+  PreviewServer
+};

package/dist/utils/validateVideoResolution.d.ts

@@ -0,0 +1,9 @@
+type VideoPayload = {
+    width: number;
+    height: number;
+};
+export declare const validateVideoResolution: (rawPayload: VideoPayload) => Promise<{
+    height: number;
+    width: number;
+}>;
+export {};

package/dist/utils/validateVideoResolution.js

@@ -0,0 +1,29 @@
+import { z } from "zod";
+import ora from "ora";
+import debug from "debug";
+const log = debug("ef:cli:validateVideoResolution");
+const schema = z.object({
+  width: z.number().int(),
+  height: z.number().int()
+}).refine((data) => data.width % 2 === 0, {
+  message: "Width must be divisible by 2",
+  path: ["width"]
+}).refine((data) => data.height % 2 === 0, {
+  message: "Height must be divisible by 2"
+});
+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/dist/utils/withSpinner.d.ts

@@ -0,0 +1 @@
+export declare const withSpinner: <T extends unknown>(label: string, fn: () => Promise<T>) => Promise<T>;

package/dist/utils/withSpinner.js

@@ -0,0 +1,15 @@
+import ora from "ora";
+const withSpinner = async (label, fn) => {
+  const spinner = ora(label).start();
+  try {
+    const result = await fn();
+    spinner.succeed();
+    return result;
+  } catch (error) {
+    spinner.fail();
+    throw error;
+  }
+};
+export {
+  withSpinner
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editframe/cli",
-  "version": "0.7.0-beta.9",
+  "version": "0.8.0-beta.10",
   "description": "Command line interface for EditFrame",
   "bin": {
     "editframe": "./dist/index.js"
@@ -15,17 +15,19 @@
   "license": "UNLICENSED",
   "devDependencies": {
     "@types/dom-webcodecs": "^0.1.11",
-    "@types/node": "^20.14.9",
+    "@types/node": "^20.14.13",
     "@types/promptly": "^3.0.5",
     "@types/tar": "^6.1.13",
-    "vite-plugin-dts": "^3.9.1",
+    "typescript": "^5.5.4",
+    "vite-plugin-dts": "^4.0.3",
     "vite-tsconfig-paths": "^4.3.2"
   },
   "dependencies": {
-    "@editframe/api": "0.7.0-beta.8",
-    "@editframe/assets": "0.7.0-beta.8",
-    "@editframe/elements": "0.7.0-beta.9",
-    "@editframe/vite-plugin": "0.7.0-beta.8",
+    "@editframe/api": "0.8.0-beta.10",
+    "@editframe/assets": "0.8.0-beta.10",
+    "@editframe/elements": "0.8.0-beta.10",
+    "@editframe/vite-plugin": "0.8.0-beta.10",
+    "@inquirer/prompts": "^5.3.8",
     "axios": "^1.6.8",
     "chalk": "^5.3.0",
     "commander": "^12.0.0",
@@ -41,7 +43,6 @@
     "promptly": "^3.2.0",
     "tailwindcss": "^3.4.3",
     "tar": "^7.1.0",
-    "typescript": "^5.2.2",
     "vite": "^5.2.11",
     "zod": "^3.23.8"
   }

package/src/commands/auth.ts

@@ -3,7 +3,7 @@ import ora from "ora";
 import chalk from "chalk";
 import debug from "debug";
 
-import { getClient } from "../utils";
+import { getClient } from "../utils/index.ts";
 
 const log = debug("ef:cli:auth");
 

package/src/commands/process-file.ts

@@ -0,0 +1,54 @@
+import { basename } from "node:path";
+import { stat } from "node:fs/promises";
+import { createReadStream } from "node:fs";
+
+import { program } from "commander";
+
+import { withSpinner } from "../utils/withSpinner.ts";
+
+import { getClient } from "../utils/index.ts";
+import {
+  createUnprocessedFile,
+  updateUnprocessedFile,
+  uploadUnprocessedFile,
+} 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: string) => {
+    const client = getClient();
+
+    const fileId = await md5FilePath(path);
+
+    const byte_size = (await stat(path)).size;
+
+    await withSpinner("Creating unprocessed file record", async () => {
+      await createUnprocessedFile(client, {
+        id: fileId,
+        processes: [],
+        filename: basename(path),
+        byte_size,
+      });
+    });
+
+    const readStream = createReadStream(path);
+
+    await withSpinner("Uploading file", async () => {
+      await uploadUnprocessedFile(client, fileId, readStream, byte_size);
+    });
+
+    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/src/commands/process.ts

@@ -3,11 +3,11 @@ import path from "node:path";
 
 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";
+import { withSpinner } from "../utils/withSpinner.ts";
+import { launchBrowserAndWaitForSDK } from "../utils/launchBrowserAndWaitForSDK.ts";
+import { PreviewServer } from "../utils/startPreviewServer.ts";
+import { getRenderInfo } from "../operations/getRenderInfo.ts";
+import { processRenderInfo } from "../operations/processRenderInfo.ts";
 
 program
   .command("process [directory]")