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

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,16 @@ 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";
+import { getFolderSize } from "../utils/getFolderSize.ts";
 
 interface StrategyBuilder {
   buildProductionUrl: (tagName: string, assetPath: string) => Promise<string>;
@@ -114,6 +116,12 @@ program
       },
       async (page) => {
         const renderInfo = await page.evaluate(getRenderInfo);
+
+        validateVideoResolution({
+          width: renderInfo.width,
+          height: renderInfo.height,
+        });
+
         await processRenderInfo(renderInfo);
 
         const doc = parseHTML(
@@ -172,7 +180,8 @@ program
         );
         const readable = new PassThrough();
         tarStream.pipe(readable);
-        await uploadRender(getClient(), md5, readable);
+        const folderSize = await getFolderSize(distDir);
+        await uploadRender(getClient(), md5, readable, folderSize);
         process.stderr.write("Render assets uploaded\n");
         process.stderr.write(inspect(render));
         process.stderr.write("\n");

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/commands/webhook.ts

@@ -0,0 +1,76 @@
+import { program, Option } from "commander";
+import ora from "ora";
+import chalk from "chalk";
+import debug from "debug";
+import { input, select } from "@inquirer/prompts";
+
+import { getClient } from "../utils/index.ts";
+
+const log = debug("ef:cli:auth");
+
+export interface APITestWebhhokResult {
+  message: string;
+}
+const topics = [
+  "render.created",
+  "render.rendering",
+  "render.pending",
+  "render.failed",
+  "render.completed",
+];
+
+export const testWebhookURL = async ({
+  webhookURL,
+  topic,
+}: {
+  webhookURL: string;
+  topic: string;
+}) => {
+  const response = await getClient().authenticatedFetch(
+    "/api/v1/test_webhook",
+    {
+      method: "POST",
+      body: JSON.stringify({
+        webhookURL,
+        topic,
+      }),
+    },
+  );
+  return response.json() as Promise<APITestWebhhokResult>;
+};
+
+const webhookCommand = program
+  .command("webhook")
+  .description("Test webhook URL with a topic")
+  .option("-u, --webhookURL <webhookURL>", "Webhook URL")
+  .addOption(new Option("-t, --topic <topic>", "Topic").choices(topics))
+  .action(async () => {
+    const options = webhookCommand.opts();
+    log("Options:", options);
+    let { webhookURL, topic } = options;
+
+    if (!webhookURL) {
+      const answer = await input({ message: "Enter a webhook URL:" });
+      webhookURL = answer;
+    }
+
+    if (!topic) {
+      const answer = await select({
+        message: "Select a topic:",
+        choices: [...topics.map((topic) => ({ title: topic, value: topic }))],
+      });
+      topic = answer;
+    }
+
+    const spinner = ora("Testing...").start();
+    try {
+      const apiData = await testWebhookURL({ webhookURL, topic });
+      spinner.succeed("Webhook URL is working! 🎉");
+      process.stderr.write(chalk.green(`${apiData.message}\n`));
+    } catch (error: any) {
+      spinner.fail("Webhook URL is not working!");
+      process.stderr.write(error?.message);
+      process.stderr.write("\n");
+      log("Error:", error);
+    }
+  });

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

@@ -12,10 +12,11 @@ import {
   uploadISOBMFFTrack,
   type CreateISOBMFFTrackPayload,
 } from "@editframe/api";
+import { statSync } from "node:fs";
 
 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;
@@ -62,6 +63,7 @@ export const syncAssetDirectory = async (
     }
     throw error;
   });
+
   if (!stat?.isDirectory()) {
     console.error(`No assets cache directory found at ${fullPath}`);
     return;
@@ -70,12 +72,28 @@ export const syncAssetDirectory = async (
 
   process.stderr.write(`Syncing asset dir: ${fullPath}\n`);
 
+  const errors: Record<string, string[]> = {};
+
+  const reportError = (path: string, message: string) => {
+    errors[path] ||= [];
+    errors[path].push(message);
+    process.stderr.write(` 🚫 ${message}\n`);
+  };
+
+  const reportSuccess = (_path: string, message: string) => {
+    process.stderr.write(` ✅ ${message}\n`);
+  };
+
+  const reportInfo = (_path: string, message: string) => {
+    process.stderr.write(` ${message}\n`);
+  };
+
   for (const asset of assets) {
-    process.stderr.write(`Syncing asset: ${asset}\n`);
+    reportInfo(asset, `Syncing asset: ${asset}`);
     const assetDir = path.join(fullPath, asset);
     const stat = await fs.stat(assetDir);
     if (!stat.isDirectory()) {
-      process.stderr.write("Invalid asset. Did not find asset directory.\n");
+      reportError(asset, "Invalid asset. Did not find asset directory.");
       return;
     }
     const subAssets = await fs.readdir(assetDir);
@@ -88,8 +106,9 @@ export const syncAssetDirectory = async (
       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}\n`,
+        reportInfo(
+          subAsset,
+          `✔ Sub-asset has already been synced: ${subAsset}`,
         );
         continue;
       }
@@ -97,10 +116,9 @@ export const syncAssetDirectory = async (
         case imageMatch.test(subAsset): {
           const probeResult = await Probe.probePath(subAssetPath);
           const [videoProbe] = probeResult.videoStreams;
+          const { format } = probeResult;
           if (!videoProbe) {
-            process.stderr.write(
-              `🚫 No video stream found in image: ${subAsset}\n`,
-            );
+            reportError(subAsset, `No media info found in image: ${subAsset}`);
             break;
           }
           const ext = path.extname(subAsset).slice(1);
@@ -112,34 +130,45 @@ export const syncAssetDirectory = async (
               ext === "webp"
             )
           ) {
-            process.stderr.write(`🚫 Invalid image format: ${subAsset}\n`);
+            reportError(subAsset, `Invalid image format: ${subAsset}`);
             break;
           }
-          process.stderr.write(`🖼️  Syncing image: ${subAsset}\n`);
+          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) {
-              process.stderr.write("  ✔ Image has already been synced.\n");
+              reportInfo(subAsset, " ✔ Image has already been synced");
+              await syncStatus.markSynced();
             } else {
               await uploadImageFile(
                 getClient(),
                 created.id,
                 createReadStream(subAssetPath),
-              );
-              process.stderr.write("  ✅ Image has been synced.\n");
+                Number.parseInt(format.size || "0"),
+              )
+                .then(() => {
+                  reportSuccess(subAsset, "Image has been synced.");
+                  return syncStatus.markSynced();
+                })
+                .catch((error) => {
+                  reportError(
+                    subAsset,
+                    `Error uploading image: ${error.message}`,
+                  );
+                });
             }
-            await syncStatus.markSynced();
           }
           break;
         }
         case trackMatch.test(subAsset): {
-          process.stderr.write(`📼 Syncing a/v track: ${subAsset}\n`);
+          reportInfo(subAsset, `📼 Syncing a/v track: ${subAsset}`);
           const createdFile = await createISOBMFFFile(getClient(), {
             id: asset,
             filename: subAsset.replace(/\.track-[\d]+.mp4$/, ""),
@@ -148,29 +177,26 @@ export const syncAssetDirectory = async (
             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}\n`,
-              );
+              reportError(subAsset, `No track ID found for track: ${subAsset}`);
               break;
             }
             const [track] = probe.streams;
             if (!track) {
-              process.stderr.write(
-                `🚫 No track stream found in track: ${subAsset}\n`,
+              reportError(
+                subAsset,
+                `No track stream found in track: ${subAsset}`,
               );
               break;
             }
             if (track.duration === undefined) {
-              process.stderr.write(
-                `🚫 No duration found in track: ${subAsset}\n`,
-              );
+              reportError(subAsset, `No duration found in track: ${subAsset}`);
               break;
             }
 
             const stat = await fs.stat(subAssetPath);
 
             /**
-             * Because the payload is a discriminated union, we nede to create these objects
+             * Because the payload is a discriminated union, we need to create these objects
              * only after the value for type has been narrowed, otherwise the object will
              * have type: "audio" | "video" which doesnt' match the payload type that
              * looks more like { type: "audio", ... } | { type: "video", ... }
@@ -201,79 +227,126 @@ export const syncAssetDirectory = async (
             );
 
             if (createdTrack) {
-              if (
-                createdTrack.last_received_byte ===
-                createdTrack.byte_size - 1
-              ) {
-                process.stderr.write("  ✔ Track has already been synced.\n");
+              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),
-                );
-                process.stderr.write("  ✅ Track has been synced.\n");
+                  createdTrack.byte_size,
+                )
+                  .then(() => {
+                    reportSuccess(subAsset, "Track has been synced.");
+                    return syncStatus.markSynced();
+                  })
+                  .catch((error) => {
+                    reportError(
+                      subAsset,
+                      `Error uploading track: ${error.message}`,
+                    );
+                  });
               }
-              await syncStatus.markSynced();
             }
           }
 
           break;
         }
         case fragmentIndexMatch.test(subAsset): {
-          process.stderr.write(`📋 Syncing fragment index: ${subAsset}\n`);
+          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) {
-              process.stderr.write(
-                "  ✔ Fragment index has already been synced.\n",
-              );
+              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);
-              process.stderr.write("  ✅ Fragment index has been synced.\n");
+              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}`,
+                  );
+                });
             }
-            await syncStatus.markSynced();
           } else {
-            process.stderr.write(
-              `🚫 No file found for fragment index: ${subAsset}\n`,
+            reportError(
+              subAsset,
+              `No file found for fragment index: ${subAsset}`,
             );
             break;
           }
           break;
         }
         case captionsMatch.test(subAsset): {
-          process.stderr.write(`📝 Syncing captions: ${subAsset}\n`);
+          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) {
-              process.stderr.write("  ✔ Captions have already been synced.\n");
+              reportInfo(subAsset, "✔ Captions have already been synced.");
+              await syncStatus.markSynced();
             } else {
               const readStream = createReadStream(subAssetPath);
-              await uploadCaptionFile(getClient(), asset, readStream);
-              process.stderr.write("  ✅ Captions have been synced.\n");
+              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}`,
+                  );
+                });
             }
-            await syncStatus.markSynced();
           } else {
-            process.stderr.write(
-              `🚫 No file found for captions: ${subAsset}\n`,
-            );
+            reportError(subAsset, `No file found for captions: ${subAsset}`);
             break;
           }
           break;
         }
         default: {
-          process.stderr.write(`🚫 Unknown sub-asset: ${subAsset}\n`);
+          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(`\n🚫 ${asset}\n`);
+      for (const message of messages) {
+        process.stderr.write(`  - ${message}\n`);
+      }
+    }
+
+    throw new Error("Failed to sync assets");
+  }
 };

package/src/utils/getFolderSize.ts

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

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) {

package/src/utils/startPreviewServer.ts

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

package/src/utils/validateVideoResolution.ts

@@ -0,0 +1,36 @@
+import { z } from "zod";
+import ora from "ora";
+import debug from "debug";
+
+const log = debug("ef:cli:validateVideoResolution");
+
+type VideoPayload = {
+  width: number;
+  height: number;
+};
+
+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",
+  });
+export const validateVideoResolution = async (rawPayload: VideoPayload) => {
+  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);
+};

package/.env

@@ -1 +0,0 @@
-EF_HOST=http://localhost:3000

package/.env.example

@@ -1 +0,0 @@
-EF_HOST=http://localhost:3000

package/CHANGELOG.md

@@ -1,8 +0,0 @@
-# @editframe/cli
-
-## 0.7.0-beta.9
-
-### Patch Changes
-
-- Updated dependencies [[`17c4452`](https://github.com/editframe/elements/commit/17c4452f679b042ac0accd9bf520728455e8cc2c)]:
-  - @editframe/elements@0.7.0-beta.9

package/src/VERSION.ts

@@ -1 +0,0 @@
-export const VERSION = "0.7.0-beta.8";

package/src/index.ts

@@ -1,29 +0,0 @@
-#!/usr/bin/env node
-import "dotenv/config";
-import { program, Option } from "commander";
-
-import { VERSION } from "./VERSION";
-
-program
-  .name("editframe")
-  .addOption(new Option("-t, --token <token>", "API Token").env("EF_TOKEN"))
-  .addOption(
-    new Option("--ef-host <host>", "Editframe Host")
-      .env("EF_HOST")
-      .default("https://editframe.dev"),
-  )
-  .addOption(
-    new Option("--ef-render-host <host>", "Editframe Render Host")
-      .env("EF_RENDER_HOST")
-      .default("https://editframe.dev"),
-  )
-  .version(VERSION);
-
-import "./commands/auth";
-import "./commands/sync";
-import "./commands/render";
-import "./commands/preview";
-import "./commands/process";
-import "./commands/check";
-
-program.parse(process.argv);

package/tsconfig.json

@@ -1,5 +0,0 @@
-{
-  "include": ["src/**/*.ts", "../api/src/util/authenticatedFetch.ts"],
-  "exclude": [""],
-  "extends": "../../tsconfig.json"
-}

package/vite.config.ts

@@ -1,22 +0,0 @@
-import { execPromise } from "../../lib/util/execPromise";
-
-import path from "node:path";
-
-import { defineViteBuildConfig } from "../defineViteBuildConfig";
-
-const root = path.dirname(new URL(import.meta.url).pathname);
-
-export default defineViteBuildConfig({
-  root: root,
-  name: "editframe-cli",
-  plugins: [
-    {
-      name: "chmod-executables",
-      async closeBundle() {
-        const cliExecPath = path.join(__dirname, "dist/index.js");
-        process.stderr.write(`marking ${cliExecPath} as executable\n`);
-        await execPromise(`chmod +x ${cliExecPath}`);
-      },
-    },
-  ],
-});