@editframe/cli 0.10.0-beta.5 → 0.10.0-beta.7

package/dist/VERSION.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.10.0-beta.5";
+export declare const VERSION = "0.10.0-beta.7";

package/dist/VERSION.js

@@ -1,4 +1,4 @@
-const VERSION = "0.10.0-beta.5";
+const VERSION = "0.10.0-beta.7";
 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,55 +1,50 @@
-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 * 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 { launchBrowserAndWaitForSDK } from "../utils/launchBrowserAndWaitForSDK.js";
-import { PreviewServer } from "../utils/startPreviewServer.js";
-import { getClient } from "../utils/index.js";
+import debug from "debug";
 import { RenderInfo, getRenderInfo } from "../operations/getRenderInfo.js";
 import { processRenderInfo } from "../operations/processRenderInfo.js";
-import { validateVideoResolution } from "../utils/validateVideoResolution.js";
+import { syncAssetDirectory } from "../operations/syncAssetsDirectory.js";
+import { SyncStatus } from "../operations/syncAssetsDirectory/SyncStatus.js";
 import { getFolderSize } from "../utils/getFolderSize.js";
-import { spawnSync } from "node:child_process";
-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 { 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}`);
   }
-}
-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 withSpinner("Building\n", async () => {
@@ -95,22 +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);

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/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 {};

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

@@ -0,0 +1,41 @@
+import { z } from 'zod';
+declare const SyncStatusSchema: z.ZodObject<{
+    version: z.ZodString;
+    complete: z.ZodBoolean;
+    id: z.ZodString;
+    md5: z.ZodString;
+    asset_id: z.ZodString;
+    byte_size: z.ZodNumber;
+}, "strip", z.ZodTypeAny, {
+    md5: string;
+    byte_size: number;
+    complete: boolean;
+    version: string;
+    id: string;
+    asset_id: string;
+}, {
+    md5: string;
+    byte_size: number;
+    complete: boolean;
+    version: string;
+    id: string;
+    asset_id: string;
+}>;
+export interface SyncStatusInfo extends z.infer<typeof SyncStatusSchema> {
+}
+export declare class SyncStatus {
+    private basePath;
+    constructor(basePath: string);
+    infoPath: string;
+    isSynced(): Promise<boolean>;
+    readInfo(): Promise<{
+        md5: string;
+        byte_size: number;
+        complete: boolean;
+        version: string;
+        id: string;
+        asset_id: string;
+    } | null>;
+    markSynced(info: SyncStatusInfo): Promise<void>;
+}
+export {};

package/dist/operations/syncAssetsDirectory/SyncStatus.js

@@ -0,0 +1,43 @@
+import fs from "node:fs/promises";
+import { z } from "zod";
+const SYNC_VERSION = "1";
+const SyncStatusSchema = z.object({
+  version: z.string(),
+  complete: z.boolean(),
+  id: z.string(),
+  md5: z.string(),
+  asset_id: z.string(),
+  byte_size: z.number()
+});
+class SyncStatus {
+  constructor(basePath) {
+    this.basePath = basePath;
+    this.infoPath = `${this.basePath}.info`;
+  }
+  async isSynced() {
+    const syncInfo = await this.readInfo();
+    if (!syncInfo) {
+      return false;
+    }
+    return syncInfo.version === SYNC_VERSION && syncInfo.complete;
+  }
+  async readInfo() {
+    try {
+      const info = await fs.readFile(this.infoPath, "utf-8");
+      return SyncStatusSchema.parse(JSON.parse(info));
+    } catch (error) {
+      if (error instanceof Error && "code" in error && error.code === "ENOENT") {
+        return null;
+      }
+      throw error;
+    }
+  }
+  async markSynced(info) {
+    process.stderr.write(`✏️  Marking asset as synced: ${this.basePath}
+`);
+    await fs.writeFile(this.infoPath, JSON.stringify(info, null, 2), "utf-8");
+  }
+}
+export {
+  SyncStatus
+};