@editframe/elements 0.7.0-beta.6 → 0.7.0-beta.9

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @editframe/elements
+
+## 0.7.0-beta.9
+
+### Patch Changes
+
+- [#33](https://github.com/editframe/elements/pull/33) [`17c4452`](https://github.com/editframe/elements/commit/17c4452f679b042ac0accd9bf520728455e8cc2c) Thanks [@IliasHad](https://github.com/IliasHad)! - resolve lit global package issue

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editframe/elements",
-  "version": "0.7.0-beta.6",
+  "version": "0.7.0-beta.9",
   "description": "",
   "exports": {
     ".": {
@@ -24,7 +24,7 @@
   "author": "",
   "license": "UNLICENSED",
   "dependencies": {
-    "@editframe/assets": "0.7.0-beta.6",
+    "@editframe/assets": "0.7.0-beta.8",
     "@lit/context": "^1.1.2",
     "@lit/task": "^1.0.1",
     "d3": "^7.9.0",

package/postcss.config.cjs

@@ -0,0 +1,12 @@
+const path = require("node:path");
+module.exports = {
+  plugins: {
+    autoprefixer: {},
+    "postcss-import": {},
+    tailwindcss: {
+      config: {
+        content: [path.join(__dirname, "src/**/*.ts")],
+      },
+    },
+  },
+};

package/{dist/packages/elements/src/EF_FRAMEGEN.js → src/EF_FRAMEGEN.ts}

@@ -1,10 +1,49 @@
 import debug from "debug";
 import { TaskStatus } from "@lit/task";
-import { awaitMicrotask } from "../../../lib/util/awaitMicrotask.js";
-import { deepGetElementsWithFrameTasks } from "./elements/EFTemporal.js";
-import { shallowGetTimegroups } from "./elements/EFTimegroup.js";
+
+import type { VideoRenderOptions } from "@editframe/assets";
+import { awaitMicrotask } from "@/util/awaitMicrotask";
+
+import { deepGetElementsWithFrameTasks } from "./elements/EFTemporal";
+import { shallowGetTimegroups } from "./elements/EFTimegroup";
+
 const log = debug("ef:elements:EF_FRAMEGEN");
+
+declare global {
+  interface Window {
+    EF_FRAMEGEN?: EfFramegen;
+    FRAMEGEN_BRIDGE?: {
+      onInitialize: (
+        callback: (renderId: string, renderOptions: VideoRenderOptions) => void,
+      ) => void;
+
+      initialized(renderId: string): void;
+
+      onBeginFrame(
+        callback: (
+          renderId: string,
+          frameNumber: number,
+          isLast: boolean,
+        ) => void,
+      ): void;
+
+      onTriggerCanvas(callback: () => void): void;
+
+      frameReady(
+        renderId: string,
+        frameNumber: number,
+        audioSamples: ArrayBuffer,
+      ): void;
+
+      error(renderId: string, error: Error): void;
+    };
+  }
+}
+
 class TriggerCanvas {
+  private canvas: HTMLCanvasElement;
+  private ctx: CanvasRenderingContext2D;
+
   constructor() {
     this.canvas = document.createElement("canvas");
     this.canvas.width = 1;
@@ -15,7 +54,7 @@ class TriggerCanvas {
       left: "0px",
       width: "1px",
       height: "1px",
-      zIndex: "100000"
+      zIndex: "100000",
     });
     document.body.prepend(this.canvas);
     const ctx = this.canvas.getContext("2d", { willReadFrequently: true });
@@ -23,54 +62,70 @@ class TriggerCanvas {
     this.ctx = ctx;
     this.ctx.fillStyle = "black";
   }
+
   trigger() {
     log("TRIGGERING CANVAS");
     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
   }
 }
-class EfFramegen {
+
+export class EfFramegen {
+  time = 0;
+  frameDurationMs = 0;
+  initialBusyTasks: Promise<unknown[]> = Promise.resolve([]);
+  audioBufferPromise?: Promise<AudioBuffer>;
+  renderOptions?: VideoRenderOptions;
+  frameBox = document.createElement("div");
+  BRIDGE = window.FRAMEGEN_BRIDGE;
+  triggerCanvas = new TriggerCanvas();
+
+  trace(...args: any[]) {
+    console.trace("[EF_FRAMEGEN]", ...args);
+  }
+
   constructor() {
-    this.time = 0;
-    this.frameDurationMs = 0;
-    this.initialBusyTasks = Promise.resolve([]);
-    this.frameBox = document.createElement("div");
-    this.BRIDGE = window.FRAMEGEN_BRIDGE;
-    this.triggerCanvas = new TriggerCanvas();
     if (this.BRIDGE) {
       this.connectToBridge();
     }
   }
-  trace(...args) {
-    console.trace("[EF_FRAMEGEN]", ...args);
-  }
+
   connectToBridge() {
     const BRIDGE = this.BRIDGE;
     if (!BRIDGE) {
       throw new Error("No BRIDGE when attempting to connect to bridge");
     }
+
     BRIDGE.onInitialize(async (renderId, renderOptions) => {
       log("BRIDGE.onInitialize", renderId, renderOptions);
       await this.initialize(renderId, renderOptions);
       BRIDGE.initialized(renderId);
     });
+
     BRIDGE.onBeginFrame((renderId, frameNumber, isLast) => {
       log("BRIDGE.onBeginFrame", renderId, frameNumber, isLast);
       this.beginFrame(renderId, frameNumber, isLast);
     });
+
+    // BRIDGE.onTriggerCanvas(() => {
+    //   // this.triggerCanvas.trigger();
+    // });
   }
-  async initialize(renderId, renderOptions) {
+
+  async initialize(renderId: string, renderOptions: VideoRenderOptions) {
     addEventListener("unhandledrejection", (event) => {
       this.trace("Unhandled rejection:", event.reason);
       if (this.BRIDGE) {
         this.BRIDGE.error(renderId, event.reason);
       }
     });
+
     addEventListener("error", (event) => {
       this.trace("Uncaught error", event.error);
       if (this.BRIDGE) {
         this.BRIDGE.error(renderId, event.error);
       }
     });
+
     this.renderOptions = renderOptions;
     const workbench = document.querySelector("ef-workbench");
     if (!workbench) {
@@ -80,14 +135,21 @@ class EfFramegen {
     const timegroups = shallowGetTimegroups(workbench);
     const temporals = deepGetElementsWithFrameTasks(workbench);
     const firstGroup = timegroups[0];
+
     if (!firstGroup) {
       throw new Error("No temporal elements found");
     }
     firstGroup.currentTimeMs = renderOptions.encoderOptions.fromMs;
-    this.frameDurationMs = 1e3 / renderOptions.encoderOptions.video.framerate;
+
+    this.frameDurationMs = 1000 / renderOptions.encoderOptions.video.framerate;
+
     this.initialBusyTasks = Promise.all(
-      temporals.filter((temporal) => temporal.frameTask.status < TaskStatus.COMPLETE).map((temporal) => temporal.frameTask).map((task) => task.taskComplete)
+      temporals
+        .filter((temporal) => temporal.frameTask.status < TaskStatus.COMPLETE)
+        .map((temporal) => temporal.frameTask)
+        .map((task) => task.taskComplete),
     );
+
     this.time = 0;
     if (renderOptions.showFrameBox) {
       Object.assign(this.frameBox.style, {
@@ -98,20 +160,21 @@ class EfFramegen {
         position: "absolute",
         top: "0px",
         left: "0px",
-        zIndex: "100000"
+        zIndex: "100000",
       });
       document.body.prepend(this.frameBox);
     }
+
     this.audioBufferPromise = firstGroup.renderAudio(
-      renderOptions.encoderOptions.alignedFromUs / 1e3,
-      renderOptions.encoderOptions.alignedToUs / 1e3
+      renderOptions.encoderOptions.alignedFromUs / 1000,
+      renderOptions.encoderOptions.alignedToUs / 1000,
       // renderOptions.encoderOptions.fromMs,
       // renderOptions.encoderOptions.toMs,
     );
     log("Initialized");
   }
-  async beginFrame(renderId, frameNumber, isLast) {
-    if (this.renderOptions === void 0) {
+  async beginFrame(renderId: string, frameNumber: number, isLast: boolean) {
+    if (this.renderOptions === undefined) {
       throw new Error("No renderOptions");
     }
     if (this.renderOptions.showFrameBox) {
@@ -131,40 +194,60 @@ class EfFramegen {
     if (!firstGroup) {
       throw new Error("No temporal elements found");
     }
-    this.time = this.renderOptions.encoderOptions.fromMs + frameNumber * this.frameDurationMs;
+
+    this.time =
+      this.renderOptions.encoderOptions.fromMs +
+      frameNumber * this.frameDurationMs;
+
     firstGroup.currentTimeMs = this.time;
+
     log("Awaiting initialBusyTasks");
     await this.initialBusyTasks;
+
     log("Awaiting microtask");
     await awaitMicrotask();
+
     log("Awaiting frame tasks");
     const now = performance.now();
     await Promise.all(
-      temporals.filter((temporal) => temporal.frameTask.status < TaskStatus.COMPLETE).map((temporal) => {
-        return temporal.frameTask;
-      }).map((task) => task.taskComplete)
+      temporals
+        .filter((temporal) => temporal.frameTask.status < TaskStatus.COMPLETE)
+        .map((temporal) => {
+          return temporal.frameTask;
+        })
+        .map((task) => task.taskComplete),
     );
+
     log(`frame:${frameNumber} All tasks complete ${performance.now() - now}ms`);
+
     if (isLast && this.audioBufferPromise) {
+      // Currently we emit the audio in one belch at the end of the render.
+      // This is not ideal, but it's the simplest thing that could possibly work.
+      // We could either emit it slices, or in parallel with the video.
+      // But in any case, it's fine for now.
       const renderedAudio = await this.audioBufferPromise;
+
       const channelCount = renderedAudio.numberOfChannels;
+
       const interleavedSamples = new Float32Array(
-        channelCount * renderedAudio.length
+        channelCount * renderedAudio.length,
       );
+
       for (let i = 0; i < renderedAudio.length; i++) {
         for (let j = 0; j < channelCount; j++) {
           interleavedSamples.set(
             renderedAudio.getChannelData(j).slice(i, i + 1),
-            i * channelCount + j
+            i * channelCount + j,
           );
         }
       }
+
       if (this.BRIDGE) {
         this.triggerCanvas.trigger();
         this.BRIDGE.frameReady(
           renderId,
           frameNumber,
-          interleavedSamples.buffer
+          interleavedSamples.buffer,
         );
       } else {
         const fileReader = new FileReader();
@@ -191,7 +274,5 @@ class EfFramegen {
     }
   }
 }
+
 window.EF_FRAMEGEN = new EfFramegen();
-export {
-  EfFramegen
-};

package/src/EF_INTERACTIVE.ts

@@ -0,0 +1,2 @@
+export const EF_INTERACTIVE =
+  !window.location.search.includes("EF_NONINTERACTIVE");

package/src/elements.css

@@ -0,0 +1,22 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html {
+  @apply h-full w-full;
+}
+body {
+  @apply h-full w-full bg-black;
+}
+
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}

package/src/index.ts

@@ -0,0 +1,33 @@
+import "./elements.css";
+
+import "./elements/EFTimegroup";
+export { EFTimegroup } from "./elements/EFTimegroup";
+
+import "./elements/EFImage";
+export { EFImage } from "./elements/EFImage";
+
+import "./elements/EFMedia";
+export type { EFMedia } from "./elements/EFMedia";
+
+import "./elements/EFAudio";
+export { EFAudio } from "./elements/EFAudio";
+
+import "./elements/EFVideo";
+export { EFVideo } from "./elements/EFVideo";
+
+import "./elements/EFCaptions";
+export { EFCaptions, EFCaptionsActiveWord } from "./elements/EFCaptions";
+
+import "./elements/EFWaveform";
+export { EFWaveform } from "./elements/EFWaveform";
+
+import "./gui/EFWorkbench";
+export { EFWorkbench } from "./gui/EFWorkbench";
+
+import "./gui/EFFilmstrip";
+export { EFFilmstrip } from "./gui/EFFilmstrip";
+
+// @ts-expect-error
+window.EF_REGISTERED = true;
+
+import "./EF_FRAMEGEN";

package/tailwind.config.ts

@@ -0,0 +1,10 @@
+import type { Config } from "tailwindcss";
+
+module.exports = {
+  content: ["./src/**/*.ts"],
+
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+} satisfies Config;

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "include": ["src/**/*.ts"],
+  "extends": "../../tsconfig.json"
+}

package/vite.config.ts

@@ -0,0 +1,8 @@
+import path from "node:path";
+
+import { defineViteBuildConfig } from "../defineViteBuildConfig";
+
+export default defineViteBuildConfig({
+  root: path.dirname(new URL(import.meta.url).pathname),
+  name: "editframe-elements",
+});