@editframe/elements 0.16.0-beta.1 → 0.16.2-beta.0

package/dist/EF_FRAMEGEN.d.ts

@@ -19,7 +19,9 @@ declare global {
 declare class TriggerCanvas {
     private canvas;
     private ctx;
+    private canvasInitialized;
     constructor();
+    initialize(): void;
     trigger(): void;
 }
 export declare class EFFramegen {

package/dist/EF_FRAMEGEN.js

@@ -3,27 +3,30 @@ import { deepGetElementsWithFrameTasks } from "./elements/EFTemporal.js";
 import { shallowGetTimegroups } from "./elements/EFTimegroup.js";
 class TriggerCanvas {
   constructor() {
+    this.canvasInitialized = false;
     this.canvas = document.createElement("canvas");
+    const ctx = this.canvas.getContext("2d", { willReadFrequently: true });
+    if (!ctx) throw new Error("Canvas 2d context not ready");
+    this.ctx = ctx;
+    this.ctx.fillStyle = "transparent";
+  }
+  initialize() {
+    if (this.canvasInitialized) return;
+    this.canvasInitialized = true;
     this.canvas.width = 1;
     this.canvas.height = 1;
     Object.assign(this.canvas.style, {
       position: "fixed",
       top: "0px",
       left: "0px",
-      width: "1px",
-      height: "1px",
+      width: "100%",
+      height: "100%",
       zIndex: "100000"
     });
     document.body.appendChild(this.canvas);
-    const ctx = this.canvas.getContext("2d", { willReadFrequently: true });
-    if (!ctx) throw new Error("Canvas 2d context not ready");
-    this.ctx = ctx;
-    this.ctx.fillStyle = "transparent";
   }
   trigger() {
-    console.log("TRIGGERING CANVAS");
     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-    this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
   }
 }
 class EFFramegen {
@@ -119,13 +122,9 @@ class EFFramegen {
     }
     this.time = this.renderOptions.encoderOptions.fromMs + frameNumber * this.frameDurationMs;
     firstGroup.currentTimeMs = this.time;
-    console.log("trace: Awaiting initialBusyTasks");
     await this.initialBusyTasks;
-    console.log("trace: Awaiting microtask");
     await new Promise(queueMicrotask);
-    console.log("trace: Awaiting frame tasks");
     const now = performance.now();
-    console.log("trace: HTML", document.body.innerHTML);
     await Promise.all(
       temporals.filter((temporal) => temporal.frameTask.status < TaskStatus.COMPLETE).map((temporal) => {
         return temporal.frameTask;

package/dist/elements/EFTemporal.js

@@ -259,6 +259,7 @@ const EFTemporal = (superClass) => {
           );
           return previous.startTimeMs + previous.durationMs - parentTimegroup.overlapMs;
         }
+        case "fit":
         case "contain":
         case "fixed":
           startTimeMsCache.set(

package/dist/elements/EFTimegroup.d.ts

@@ -6,7 +6,7 @@ export declare class EFTimegroup extends EFTimegroup_base {
     #private;
     static styles: import('lit').CSSResult;
     _timeGroupContext: this;
-    mode: "fixed" | "sequence" | "contain";
+    mode: "fit" | "fixed" | "sequence" | "contain";
     overlapMs: number;
     fit: "none" | "contain" | "cover";
     set currentTime(time: number);
@@ -19,6 +19,7 @@ export declare class EFTimegroup extends EFTimegroup_base {
     disconnectedCallback(): void;
     get storageKey(): string;
     get intrinsicDurationMs(): number | undefined;
+    get hasOwnDuration(): boolean;
     get durationMs(): number;
     /**
      * Wait for all media elements to load their initial segments.

package/dist/elements/EFTimegroup.js

@@ -128,26 +128,42 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
     }
     return void 0;
   }
+  get hasOwnDuration() {
+    return this.mode === "contain" || this.mode === "sequence" || this.mode === "fixed" && this.hasExplicitDuration;
+  }
   get durationMs() {
     switch (this.mode) {
+      case "fit": {
+        if (!this.parentTimegroup) {
+          return 0;
+        }
+        return this.parentTimegroup.durationMs;
+      }
       case "fixed":
         return super.durationMs;
       case "sequence": {
         let duration = 0;
-        this.childTemporals.forEach((node, index) => {
+        this.childTemporals.forEach((child, index) => {
+          if (child instanceof EFTimegroup && child.mode === "fit") {
+            return;
+          }
           if (index > 0) {
             duration -= this.overlapMs;
           }
-          duration += node.durationMs;
+          duration += child.durationMs;
         });
         return duration;
       }
       case "contain": {
         let maxDuration = 0;
-        for (const node of this.childTemporals) {
-          if (node.intrinsicDurationMs !== void 0) {
-            maxDuration = Math.max(maxDuration, node.durationMs);
+        for (const child of this.childTemporals) {
+          if (child instanceof EFTimegroup && child.mode === "fit") {
+            continue;
+          }
+          if (!child.hasOwnDuration) {
+            continue;
           }
+          maxDuration = Math.max(maxDuration, child.durationMs);
         }
         return maxDuration;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editframe/elements",
-  "version": "0.16.0-beta.1",
+  "version": "0.16.2-beta.0",
   "description": "",
   "exports": {
     ".": {
@@ -27,7 +27,7 @@
   "license": "UNLICENSED",
   "dependencies": {
     "@bramus/style-observer": "^1.3.0",
-    "@editframe/assets": "0.16.0-beta.1",
+    "@editframe/assets": "0.16.2-beta.0",
     "@lit/context": "^1.1.2",
     "@lit/task": "^1.0.1",
     "d3": "^7.9.0",

package/src/elements/EFTemporal.ts

@@ -556,6 +556,7 @@ export const EFTemporal = <T extends Constructor<LitElement>>(
             parentTimegroup.overlapMs
           );
         }
+        case "fit":
         case "contain":
         case "fixed":
           startTimeMsCache.set(

package/src/elements/EFTimegroup.browsertest.ts

@@ -55,6 +55,72 @@ const renderTimegroup = (result: TemplateResult) => {
   return firstChild;
 };
 
+describe(`<ef-timegroup mode='fit'>`, () => {
+  test("duration is zero when there is no parent to fit into", () => {
+    const timegroup = renderTimegroup(
+      html`<ef-timegroup mode="fit"></ef-timegroup>`,
+    );
+    assert.equal(timegroup.durationMs, 0);
+  });
+
+  test("duration is zero when there is no parent to fit into, even if there are children with duration", () => {
+    const timegroup = renderTimegroup(
+      html`<ef-timegroup mode="fit">
+        <ef-timegroup mode="fixed" duration="5s"></ef-timegroup>
+      </ef-timegroup>`,
+    );
+    assert.equal(timegroup.durationMs, 0);
+  });
+
+  test("duration is the duration of the parent timegroup", () => {
+    const timegroup = renderTimegroup(
+      html`<ef-timegroup mode="fixed" duration="10s">
+        <ef-timegroup id="child" mode="fit"></ef-timegroup>
+      </ef-timegroup>`,
+    );
+    const child = timegroup.querySelector("#child") as EFTimegroup;
+    assert.equal(child.durationMs, 10_000);
+  });
+
+  test("fit mode items inside a sequence are given zero duration and do not factor into the duration of the sequence", () => {
+    const timegroup = renderTimegroup(
+      html`<ef-timegroup mode="sequence">
+        <ef-timegroup id="child" mode="fit"></ef-timegroup>
+      </ef-timegroup>`,
+    );
+    const child = timegroup.querySelector("#child") as EFTimegroup;
+    assert.equal(child.durationMs, 0);
+    assert.equal(timegroup.durationMs, 0);
+  });
+
+  test("fit mode can be used to constrain a 'background' timegroup into a 'foreground' sequence", async () => {
+    const timegroup = renderTimegroup(
+      html`
+        <ef-timegroup mode="contain">
+          <ef-timegroup id="foreground" mode="sequence">
+            <ef-timegroup mode="fixed" duration="10s"></ef-timegroup>
+            <ef-timegroup mode="fixed" duration="10s"></ef-timegroup>
+          </ef-timegroup>
+          <ef-timegroup id="background" mode="fit">
+            <ef-timegroup mode="fixed" duration="30s"></ef-timegroup>
+          </ef-timegroup>
+        </ef-timegroup>
+      `,
+    );
+
+    const foreground = timegroup.querySelector("#foreground") as EFTimegroup;
+    const background = timegroup.querySelector("#background") as EFTimegroup;
+    assert.equal(foreground.durationMs, 20_000);
+    console.log("INFO", {
+      mode: background.mode,
+      duration: background.durationMs,
+      parentTimegroup: background.parentTimegroup,
+    });
+    console.log(background.parentTimegroup?.durationMs);
+    assert.equal(background.durationMs, 20_000);
+  });
+});
+
 describe(`<ef-timegroup mode="fixed">`, () => {
   test("can explicitly set a duration in seconds", async () => {
     const timegroup = renderTimegroup(

package/src/elements/EFTimegroup.ts

@@ -54,7 +54,7 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     type: String,
     attribute: "mode",
   })
-  mode: "fixed" | "sequence" | "contain" = "contain";
+  mode: "fit" | "fixed" | "sequence" | "contain" = "contain";
 
   @property({
     type: Number,
@@ -146,26 +146,49 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     return undefined;
   }
 
-  get durationMs() {
+  get hasOwnDuration() {
+    return (
+      this.mode === "contain" ||
+      this.mode === "sequence" ||
+      (this.mode === "fixed" && this.hasExplicitDuration)
+    );
+  }
+
+  get durationMs(): number {
     switch (this.mode) {
+      case "fit": {
+        if (!this.parentTimegroup) {
+          return 0;
+        }
+        return this.parentTimegroup.durationMs;
+      }
       case "fixed":
         return super.durationMs;
       case "sequence": {
         let duration = 0;
-        this.childTemporals.forEach((node, index) => {
+        this.childTemporals.forEach((child, index) => {
+          if (child instanceof EFTimegroup && child.mode === "fit") {
+            return;
+          }
           if (index > 0) {
             duration -= this.overlapMs;
           }
-          duration += node.durationMs;
+          duration += child.durationMs;
         });
         return duration;
       }
       case "contain": {
         let maxDuration = 0;
-        for (const node of this.childTemporals) {
-          if (node.intrinsicDurationMs !== undefined) {
-            maxDuration = Math.max(maxDuration, node.durationMs);
+        for (const child of this.childTemporals) {
+          // fit timegroups look "up" to their parent timegroup for their duration
+          // so we need to skip them to avoid an infinite loop
+          if (child instanceof EFTimegroup && child.mode === "fit") {
+            continue;
+          }
+          if (!child.hasOwnDuration) {
+            continue;
           }
+          maxDuration = Math.max(maxDuration, child.durationMs);
         }
         return maxDuration;
       }