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

package/dist/operations/syncAssetsDirectory.js

@@ -0,0 +1,250 @@
+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 } 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}
+`);
+  for (const asset of assets) {
+    process.stderr.write(`Syncing asset: ${asset}
+`);
+    const assetDir = path.join(fullPath, asset);
+    const stat2 = await fs.stat(assetDir);
+    if (!stat2.isDirectory()) {
+      process.stderr.write("Invalid asset. Did not find asset directory.\n");
+      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()) {
+        process.stderr.write(
+          `  ✔ Sub-asset has already been synced: ${subAsset}
+`
+        );
+        continue;
+      }
+      switch (true) {
+        case imageMatch.test(subAsset): {
+          const probeResult = await Probe.probePath(subAssetPath);
+          const [videoProbe] = probeResult.videoStreams;
+          if (!videoProbe) {
+            process.stderr.write(
+              `🚫 No video stream found in image: ${subAsset}
+`
+            );
+            break;
+          }
+          const ext = path.extname(subAsset).slice(1);
+          if (!(ext === "jpg" || ext === "jpeg" || ext === "png" || ext === "webp")) {
+            process.stderr.write(`🚫 Invalid image format: ${subAsset}
+`);
+            break;
+          }
+          process.stderr.write(`🖼️  Syncing image: ${subAsset}
+`);
+          const created = await createImageFile(getClient(), {
+            id: asset,
+            filename: subAsset,
+            width: videoProbe.width,
+            height: videoProbe.height,
+            mime_type: `image/${ext}`
+          });
+          if (created) {
+            if (created.complete) {
+              process.stderr.write("  ✔ Image has already been synced.\n");
+            } else {
+              await uploadImageFile(
+                getClient(),
+                created.id,
+                createReadStream(subAssetPath)
+              );
+              process.stderr.write("  ✅ Image has been synced.\n");
+            }
+            await syncStatus.markSynced();
+          }
+          break;
+        }
+        case trackMatch.test(subAsset): {
+          process.stderr.write(`📼 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) {
+              process.stderr.write(
+                `🚫 No track ID found for track: ${subAsset}
+`
+              );
+              break;
+            }
+            const [track] = probe.streams;
+            if (!track) {
+              process.stderr.write(
+                `🚫 No track stream found in track: ${subAsset}
+`
+              );
+              break;
+            }
+            if (track.duration === void 0) {
+              process.stderr.write(
+                `🚫 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.last_received_byte === createdTrack.byte_size - 1) {
+                process.stderr.write("  ✔ Track has already been synced.\n");
+              } else {
+                await uploadISOBMFFTrack(
+                  getClient(),
+                  createdFile.id,
+                  Number(trackId),
+                  createReadStream(subAssetPath)
+                );
+                process.stderr.write("  ✅ Track has been synced.\n");
+              }
+              await syncStatus.markSynced();
+            }
+          }
+          break;
+        }
+        case fragmentIndexMatch.test(subAsset): {
+          process.stderr.write(`📋 Syncing fragment index: ${subAsset}
+`);
+          const createdFile = await createISOBMFFFile(getClient(), {
+            id: asset,
+            filename: subAsset.replace(/\.tracks.json$/, "")
+          });
+          if (createdFile) {
+            if (createdFile.fragment_index_complete) {
+              process.stderr.write(
+                "  ✔ Fragment index has already been synced.\n"
+              );
+            } else {
+              const readStream = createReadStream(subAssetPath);
+              await uploadFragmentIndex(getClient(), asset, readStream);
+              process.stderr.write("  ✅ Fragment index has been synced.\n");
+            }
+            await syncStatus.markSynced();
+          } else {
+            process.stderr.write(
+              `🚫 No file found for fragment index: ${subAsset}
+`
+            );
+            break;
+          }
+          break;
+        }
+        case captionsMatch.test(subAsset): {
+          process.stderr.write(`📝 Syncing captions: ${subAsset}
+`);
+          const createdFile = await createCaptionFile(getClient(), {
+            id: asset,
+            filename: subAsset.replace(/\.captions.json$/, "")
+          });
+          if (createdFile) {
+            if (createdFile.complete) {
+              process.stderr.write("  ✔ Captions have already been synced.\n");
+            } else {
+              const readStream = createReadStream(subAssetPath);
+              await uploadCaptionFile(getClient(), asset, readStream);
+              process.stderr.write("  ✅ Captions have been synced.\n");
+            }
+            await syncStatus.markSynced();
+          } else {
+            process.stderr.write(
+              `🚫 No file found for captions: ${subAsset}
+`
+            );
+            break;
+          }
+          break;
+        }
+        default: {
+          process.stderr.write(`🚫 Unknown sub-asset: ${subAsset}
+`);
+          break;
+        }
+      }
+    }
+  }
+};
+export {
+  syncAssetDirectory
+};

package/dist/utils/attachWorkbench.d.ts

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

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+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,10 @@
+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,8 @@
+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,8 @@
+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<{
+    width: number;
+    height: 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.2",
   "description": "Command line interface for EditFrame",
   "bin": {
     "editframe": "./dist/index.js"
@@ -15,17 +15,18 @@
   "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",
+    "typescript": "^5.5.4",
     "vite-plugin-dts": "^3.9.1",
     "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.2",
+    "@editframe/assets": "0.8.0-beta.2",
+    "@editframe/elements": "0.8.0-beta.2",
+    "@editframe/vite-plugin": "0.8.0-beta.2",
     "axios": "^1.6.8",
     "chalk": "^5.3.0",
     "commander": "^12.0.0",
@@ -41,7 +42,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,50 @@
+import { basename } from "node:path";
+
+import { program } from "commander";
+
+import { withSpinner } from "../utils/withSpinner.ts";
+
+import { getClient } from "../utils/index.ts";
+import { createReadStream } from "node:fs";
+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);
+
+    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/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]")

package/src/commands/render.ts

@@ -1,5 +1,7 @@
 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";
@@ -8,16 +10,15 @@ import { build } from "vite";
 
 import { md5Directory, md5FilePath } from "@editframe/assets";
 
-import { withSpinner } from "../utils/withSpinner";
+import { withSpinner } from "../utils/withSpinner.ts";
+import { syncAssetDirectory } from "../operations/syncAssetsDirectory.ts";
 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 { launchBrowserAndWaitForSDK } from "../utils/launchBrowserAndWaitForSDK.ts";
+import { PreviewServer } from "../utils/startPreviewServer.ts";
+import { getClient } from "../utils/index.ts";
+import { getRenderInfo } from "../operations/getRenderInfo.ts";
+import { processRenderInfo } from "../operations/processRenderInfo.ts";
+import { validateVideoResolution } from "../utils/validateVideoResolution.ts";
 
 interface StrategyBuilder {
   buildProductionUrl: (tagName: string, assetPath: string) => Promise<string>;
@@ -114,6 +115,12 @@ program
       },
       async (page) => {
         const renderInfo = await page.evaluate(getRenderInfo);
+
+        validateVideoResolution({
+          width: renderInfo.width,
+          height: renderInfo.height,
+        });
+
         await processRenderInfo(renderInfo);
 
         const doc = parseHTML(

package/src/commands/sync.ts

@@ -1,5 +1,5 @@
 import { program } from "commander";
-import { syncAssetDirectory } from "../operations/syncAssetsDirectory";
+import { syncAssetDirectory } from "../operations/syncAssetsDirectory.ts";
 
 program
   .command("sync")

package/src/operations/processRenderInfo.ts

@@ -3,7 +3,7 @@ import {
   cacheImage,
   findOrCreateCaptions,
 } from "@editframe/assets";
-import type { getRenderInfo } from "./getRenderInfo";
+import type { getRenderInfo } from "./getRenderInfo.ts";
 
 export const processRenderInfo = async (
   renderInfo: Awaited<ReturnType<typeof getRenderInfo>>,

package/src/operations/syncAssetsDirectory.ts

@@ -15,7 +15,7 @@ import {
 
 import { createReadStream } from "node:fs";
 import type { z } from "zod";
-import { getClient } from "../utils";
+import { getClient } from "../utils/index.ts";
 
 const imageMatch = /\.(png|jpe?g|gif|webp)$/i;
 const trackMatch = /\.track-[\d]+.mp4$/i;

package/src/utils/launchBrowserAndWaitForSDK.ts

@@ -2,7 +2,7 @@ import chalk from "chalk";
 import { type Browser, type Page, chromium } from "playwright";
 import debug from "debug";
 
-import { withSpinner } from "./withSpinner";
+import { withSpinner } from "./withSpinner.ts";
 
 const browserLog = debug("ef:cli::browser");
 

package/src/utils/startDevServer.ts

@@ -5,7 +5,7 @@ import tailwindcss from "tailwindcss";
 
 import { vitePluginEditframe as editframe } from "@editframe/vite-plugin";
 
-import { withSpinner } from "./withSpinner";
+import { withSpinner } from "./withSpinner.ts";
 
 export class DevServer {
   static async start(directory: string) {