@editframe/cli 0.10.0-beta.4 → 0.10.0-beta.6

package/dist/VERSION.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.10.0-beta.4";
+export declare const VERSION = "0.10.0-beta.6";

package/dist/VERSION.js

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

package/dist/commands/render.d.ts

@@ -1 +1 @@
-export declare const buildAssetId: (assetPath: string) => Promise<string>;
+export declare const buildAssetId: (srcDir: string, src: string, basename: string) => Promise<string>;

package/dist/commands/render.js

@@ -1,63 +1,69 @@
-import path from "node:path";
 import { readFile, writeFile } from "node:fs/promises";
-import { inspect } from "node:util";
+import path, { join, basename } from "node:path";
 import { PassThrough } from "node:stream";
-import * as tar from "tar";
+import { inspect } from "node:util";
 import { program, Option } from "commander";
 import { parse } from "node-html-parser";
-import { build } from "vite";
+import * as tar from "tar";
 import { md5Directory, md5FilePath } from "@editframe/assets";
-import { withSpinner } from "../utils/withSpinner.js";
-import { syncAssetDirectory } from "../operations/syncAssetsDirectory.js";
+import { spawnSync } from "node:child_process";
 import { createRender, uploadRender } from "@editframe/api";
+import debug from "debug";
+import { RenderInfo, getRenderInfo } from "../operations/getRenderInfo.js";
+import { processRenderInfo } from "../operations/processRenderInfo.js";
+import { syncAssetDirectory } from "../operations/syncAssetsDirectory.js";
+import { SyncStatus } from "../operations/syncAssetsDirectory/SyncStatus.js";
+import { getFolderSize } from "../utils/getFolderSize.js";
+import { getClient } from "../utils/index.js";
 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";
-import { getFolderSize } from "../utils/getFolderSize.js";
-const buildAssetId = async (assetPath) => {
-  const md5Sum = await md5FilePath(assetPath);
-  const basename = path.basename(assetPath);
-  return `${md5Sum}:${basename}`;
-};
-class V1Builder {
-  async buildAssetId(assetPath) {
-    return buildAssetId(assetPath);
-  }
-}
-class V2Builder {
-  async buildAssetId(assetPath) {
-    return buildAssetId(assetPath);
+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}`);
   }
-}
-const strategyBuilders = {
-  v1: new V1Builder(),
-  v2: new V2Builder()
+  return info.asset_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", "v2"]).default("v1")
+  new Option("-s, --strategy <strategy>", "Render strategy").choices(["v1"]).default("v1")
 ).action(async (directory, options) => {
   directory ??= ".";
-  await syncAssetDirectory(directory);
+  await syncAssetDirectory(
+    join(process.cwd(), directory, "src", "assets", ".cache")
+  );
   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
+      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);
@@ -75,7 +81,7 @@ program.command("render [directory]").description(
       headless: true
     },
     async (page) => {
-      const renderInfo = await page.evaluate(getRenderInfo);
+      const renderInfo = RenderInfo.parse(await page.evaluate(getRenderInfo));
       validateVideoResolution({
         width: renderInfo.width,
         height: renderInfo.height
@@ -84,19 +90,39 @@ program.command("render [directory]").description(
       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) {
+      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;
         }
-        const assetPath = path.join(srcDir, src);
-        element.setAttribute(
-          "asset-id",
-          await builder.buildAssetId(assetPath)
-        );
+        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);
@@ -126,7 +152,7 @@ program.command("render [directory]").description(
       const readable = new PassThrough();
       tarStream.pipe(readable);
       const folderSize = await getFolderSize(distDir);
-      await uploadRender(getClient(), md5, readable, folderSize);
+      await uploadRender(getClient(), render.id, readable, folderSize);
       process.stderr.write("Render assets uploaded\n");
       process.stderr.write(inspect(render));
       process.stderr.write("\n");

package/dist/commands/sync.js

@@ -1,5 +1,8 @@
+import { join } from "node:path";
 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);
+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")
+  );
 });

package/dist/operations/getRenderInfo.d.ts

@@ -1,7 +1,43 @@
-/**
- * THIS MODULE DOESNT USE THE DEBUG LOGGER BECAUSE IT IS
- * RUN IN A WEB BROWSER. LOGS ARE CAPTURED AND RE-LOGGED.
- */
+import { z } from 'zod';
+export declare const RenderInfo: z.ZodObject<{
+    width: z.ZodNumber;
+    height: z.ZodNumber;
+    fps: z.ZodNumber;
+    durationMs: z.ZodNumber;
+    assets: z.ZodObject<{
+        efMedia: z.ZodRecord<z.ZodString, z.ZodAny>;
+        efCaptions: z.ZodArray<z.ZodString, "many">;
+        efImage: z.ZodArray<z.ZodString, "many">;
+    }, "strip", z.ZodTypeAny, {
+        efMedia: Record<string, any>;
+        efCaptions: string[];
+        efImage: string[];
+    }, {
+        efMedia: Record<string, any>;
+        efCaptions: string[];
+        efImage: string[];
+    }>;
+}, "strip", z.ZodTypeAny, {
+    height: number;
+    width: number;
+    fps: number;
+    assets: {
+        efMedia: Record<string, any>;
+        efCaptions: string[];
+        efImage: string[];
+    };
+    durationMs: number;
+}, {
+    height: number;
+    width: number;
+    fps: number;
+    assets: {
+        efMedia: Record<string, any>;
+        efCaptions: string[];
+        efImage: string[];
+    };
+    durationMs: number;
+}>;
 export declare const getRenderInfo: () => Promise<{
     width: number;
     height: number;

package/dist/operations/getRenderInfo.js

@@ -1,3 +1,15 @@
+import { z } from "zod";
+const RenderInfo = z.object({
+  width: z.number().positive(),
+  height: z.number().positive(),
+  fps: z.number().positive(),
+  durationMs: z.number().positive(),
+  assets: z.object({
+    efMedia: z.record(z.any()),
+    efCaptions: z.array(z.string()),
+    efImage: z.array(z.string())
+  })
+});
 const getRenderInfo = async () => {
   const rootTimeGroup = document.querySelector("ef-timegroup");
   if (!rootTimeGroup) {
@@ -55,5 +67,6 @@ const getRenderInfo = async () => {
   return renderInfo;
 };
 export {
+  RenderInfo,
   getRenderInfo
 };

package/dist/operations/processRenderInfo.js

@@ -5,6 +5,9 @@ const processRenderInfo = async (renderInfo) => {
     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}`,

package/dist/operations/syncAssetsDirectory/SubAssetSync.d.ts

@@ -0,0 +1,20 @@
+import { SyncStatus } from './SyncStatus.ts';
+import { SyncCaption } from './SyncCaption.ts';
+import { SyncFragmentIndex } from './SyncFragmentIndex.ts';
+import { SyncImage } from './SyncImage.ts';
+import { SyncTrack } from './SyncTrack.ts';
+export interface SubAssetSync<CreationType> {
+    icon: string;
+    label: string;
+    path: string;
+    md5: string;
+    prepare: () => Promise<void>;
+    validate: () => Promise<void>;
+    create: () => Promise<void>;
+    upload: () => Promise<void>;
+    syncStatus: SyncStatus;
+    isComplete: () => boolean;
+    markSynced: () => Promise<void>;
+    created: CreationType | null;
+}
+export declare const getAssetSync: (subAssetPath: string, md5: string) => SyncCaption | SyncFragmentIndex | SyncImage | SyncTrack;

package/dist/operations/syncAssetsDirectory/SubAssetSync.js

@@ -0,0 +1,26 @@
+import { SyncCaption } from "./SyncCaption.js";
+import { SyncFragmentIndex } from "./SyncFragmentIndex.js";
+import { SyncImage } from "./SyncImage.js";
+import { SyncTrack } from "./SyncTrack.js";
+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 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
+};

package/dist/operations/syncAssetsDirectory/SyncCaption.d.ts

@@ -0,0 +1,19 @@
+import { CreateCaptionFileResult } from '../../../../api/src';
+import { SubAssetSync } from './SubAssetSync.ts';
+import { SyncStatus } from './SyncStatus.ts';
+export declare class SyncCaption implements SubAssetSync<CreateCaptionFileResult> {
+    path: string;
+    md5: string;
+    icon: string;
+    label: string;
+    syncStatus: SyncStatus;
+    created: CreateCaptionFileResult | null;
+    constructor(path: string, md5: string);
+    byteSize(): Promise<number>;
+    prepare(): Promise<void>;
+    validate(): Promise<void>;
+    create(): Promise<void>;
+    isComplete(): boolean;
+    upload(): Promise<void>;
+    markSynced(): Promise<void>;
+}

package/dist/operations/syncAssetsDirectory/SyncCaption.js

@@ -0,0 +1,66 @@
+import fs from "node:fs/promises";
+import { createCaptionFile, uploadCaptionFile } from "@editframe/api";
+import { Readable } from "node:stream";
+import { getClient } from "../../utils/index.js";
+import { SyncStatus } from "./SyncStatus.js";
+class SyncCaption {
+  constructor(path, md5) {
+    this.path = path;
+    this.md5 = md5;
+    this.icon = "📝";
+    this.label = "captions";
+    this.syncStatus = new SyncStatus(this.path);
+    this.created = null;
+  }
+  async byteSize() {
+    return (await fs.stat(this.path)).size;
+  }
+  async prepare() {
+  }
+  async validate() {
+  }
+  async create() {
+    this.created = await createCaptionFile(getClient(), {
+      md5: this.md5,
+      filename: this.path.replace(/\.captions.json$/, ""),
+      byte_size: await this.byteSize()
+    });
+  }
+  isComplete() {
+    return !!this.created?.complete;
+  }
+  async upload() {
+    if (!this.created) {
+      throw new Error(
+        "Caption not created. Should have been prevented by .isComplete()"
+      );
+    }
+    await uploadCaptionFile(
+      getClient(),
+      this.created.id,
+      // It's not clear why we need to use Readable.from here, but it seems
+      // to fix an issue where the request is closed early in tests
+      Readable.from(await fs.readFile(this.path)),
+      await this.byteSize()
+    );
+  }
+  async markSynced() {
+    if (!this.created) {
+      throw new Error(
+        "Caption not created. Should have been prevented by .isComplete()"
+      );
+    }
+    const byteSize = await this.byteSize();
+    await this.syncStatus.markSynced({
+      version: "1",
+      complete: true,
+      id: this.created.id,
+      md5: this.md5,
+      asset_id: this.created.asset_id,
+      byte_size: byteSize
+    });
+  }
+}
+export {
+  SyncCaption
+};

package/dist/operations/syncAssetsDirectory/SyncCaption.test.d.ts

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

package/dist/operations/syncAssetsDirectory/SyncFragmentIndex.d.ts

@@ -0,0 +1,20 @@
+import { CreateISOBMFFFileResult } from '../../../../api/src';
+import { SubAssetSync } from './SubAssetSync.ts';
+import { SyncStatus } from './SyncStatus.ts';
+export declare class SyncFragmentIndex implements SubAssetSync<CreateISOBMFFFileResult> {
+    path: string;
+    md5: string;
+    icon: string;
+    label: string;
+    syncStatus: SyncStatus;
+    fileSyncStatus: SyncStatus;
+    created: CreateISOBMFFFileResult | null;
+    constructor(path: string, md5: string);
+    byteSize(): Promise<number>;
+    prepare(): Promise<void>;
+    validate(): Promise<void>;
+    create(): Promise<void>;
+    isComplete(): boolean;
+    upload(): Promise<void>;
+    markSynced(): Promise<void>;
+}

package/dist/operations/syncAssetsDirectory/SyncFragmentIndex.js

@@ -0,0 +1,79 @@
+import fs from "node:fs/promises";
+import { join, dirname } from "node:path";
+import { Readable } from "node:stream";
+import { createISOBMFFFile, uploadFragmentIndex } from "@editframe/api";
+import { getClient } from "../../utils/index.js";
+import { SyncStatus } from "./SyncStatus.js";
+class SyncFragmentIndex {
+  constructor(path, md5) {
+    this.path = path;
+    this.md5 = md5;
+    this.icon = "📋";
+    this.label = "fragment index";
+    this.syncStatus = new SyncStatus(this.path);
+    this.fileSyncStatus = new SyncStatus(
+      join(dirname(this.path), "isobmff")
+    );
+    this.created = null;
+  }
+  async byteSize() {
+    return (await fs.stat(this.path)).size;
+  }
+  async prepare() {
+  }
+  async validate() {
+  }
+  async create() {
+    this.created = await createISOBMFFFile(getClient(), {
+      md5: this.md5,
+      filename: this.path.replace(/\.tracks.json$/, "")
+    });
+  }
+  isComplete() {
+    return !!this.created?.fragment_index_complete;
+  }
+  async upload() {
+    if (!this.created) {
+      throw new Error(
+        "Fragment index not created. Should have been prevented by .isComplete()"
+      );
+    }
+    await uploadFragmentIndex(
+      getClient(),
+      this.created.id,
+      // It is unclear why we need to use Readable.from here
+      // Tests fail when using createReadStream
+      Readable.from(await fs.readFile(this.path)),
+      await this.byteSize()
+    );
+  }
+  async markSynced() {
+    if (!this.created) {
+      throw new Error(
+        "Fragment index not created. Should have been prevented by .isComplete()"
+      );
+    }
+    const byteSize = await this.byteSize();
+    await Promise.all([
+      this.syncStatus.markSynced({
+        version: "1",
+        complete: true,
+        id: this.created.id,
+        md5: this.md5,
+        asset_id: this.created.asset_id,
+        byte_size: byteSize
+      }),
+      this.fileSyncStatus.markSynced({
+        version: "1",
+        complete: true,
+        id: this.created.id,
+        md5: this.md5,
+        asset_id: this.created.asset_id,
+        byte_size: byteSize
+      })
+    ]);
+  }
+}
+export {
+  SyncFragmentIndex
+};

package/dist/operations/syncAssetsDirectory/SyncFragmentIndex.test.d.ts

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

package/dist/operations/syncAssetsDirectory/SyncImage.d.ts

@@ -0,0 +1,23 @@
+import { CreateImageFileResult } from '../../../../api/src';
+import { Probe } from '../../../../assets/src';
+import { SubAssetSync } from './SubAssetSync.ts';
+import { SyncStatus } from './SyncStatus.ts';
+export declare class SyncImage implements SubAssetSync<CreateImageFileResult> {
+    path: string;
+    md5: string;
+    icon: string;
+    label: string;
+    syncStatus: SyncStatus;
+    created: CreateImageFileResult | null;
+    constructor(path: string, md5: string);
+    private _probeResult;
+    prepare(): Promise<void>;
+    get probeResult(): Probe;
+    get extension(): string;
+    byteSize(): Promise<number>;
+    validate(): Promise<void>;
+    create(): Promise<void>;
+    isComplete(): boolean;
+    upload(): Promise<void>;
+    markSynced(): Promise<void>;
+}

package/dist/operations/syncAssetsDirectory/SyncImage.js

@@ -0,0 +1,95 @@
+import { createReadStream } from "node:fs";
+import fs from "node:fs/promises";
+import path, { basename } from "node:path";
+import { createImageFile, uploadImageFile } from "@editframe/api";
+import { Probe } from "@editframe/assets";
+import { getClient } from "../../utils/index.js";
+import { SyncStatus } from "./SyncStatus.js";
+class SyncImage {
+  constructor(path2, md5) {
+    this.path = path2;
+    this.md5 = md5;
+    this.icon = "🖼️";
+    this.label = "image";
+    this.syncStatus = new SyncStatus(this.path);
+    this.created = null;
+    this._probeResult = null;
+  }
+  async prepare() {
+    this._probeResult = await Probe.probePath(this.path);
+  }
+  get probeResult() {
+    if (!this._probeResult) {
+      throw new Error("Probe result not found. Call prepare() first.");
+    }
+    return this._probeResult;
+  }
+  get extension() {
+    return path.extname(this.path).slice(1);
+  }
+  async byteSize() {
+    return (await fs.stat(this.path)).size;
+  }
+  async validate() {
+    const [videoProbe] = this.probeResult.videoStreams;
+    if (!videoProbe) {
+      throw new Error(`No media info found in image: ${this.path}`);
+    }
+    const ext = this.extension;
+    if (!(ext === "jpg" || ext === "jpeg" || ext === "png" || ext === "webp")) {
+      throw new Error(`Invalid image format: ${this.path}`);
+    }
+  }
+  async create() {
+    const byteSize = (await fs.stat(this.path)).size;
+    const [videoProbe] = this.probeResult.videoStreams;
+    if (!videoProbe) {
+      throw new Error(
+        "No video stream found in image. Should have been prevented by .validate()"
+      );
+    }
+    this.created = await createImageFile(getClient(), {
+      md5: this.md5,
+      filename: basename(this.path),
+      width: videoProbe.width,
+      height: videoProbe.height,
+      mime_type: `image/${this.extension}`,
+      byte_size: byteSize
+    });
+  }
+  isComplete() {
+    return !!this.created?.complete;
+  }
+  upload() {
+    if (!this.created) {
+      throw new Error(
+        "Image not created. Should have been prevented by .isComplete()"
+      );
+    }
+    return uploadImageFile(
+      getClient(),
+      this.created.id,
+      createReadStream(this.path),
+      Number.parseInt(this.probeResult.format.size || "0")
+    );
+  }
+  async markSynced() {
+    if (!this.created) {
+      throw new Error(
+        "Image not created. Should have been prevented by .isComplete()"
+      );
+    }
+    const byteSize = await this.byteSize();
+    return this.syncStatus.markSynced({
+      version: "1",
+      complete: true,
+      id: this.created.id,
+      md5: this.md5,
+      asset_id: this.created.asset_id,
+      byte_size: byteSize
+    });
+  }
+}
+export {
+  SyncImage
+};

package/dist/operations/syncAssetsDirectory/SyncImage.test.d.ts

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