@editframe/elements 0.11.0-beta.9 → 0.12.0-beta.10

package/src/elements/EFMedia.ts

@@ -14,9 +14,8 @@ import { EF_INTERACTIVE } from "../EF_INTERACTIVE.ts";
 import { EF_RENDERING } from "../EF_RENDERING.ts";
 import { apiHostContext } from "../gui/apiHostContext.ts";
 import { EFSourceMixin } from "./EFSourceMixin.ts";
-import { EFTemporal } from "./EFTemporal.ts";
+import { EFTemporal, isEFTemporal } from "./EFTemporal.ts";
 import { FetchMixin } from "./FetchMixin.ts";
-import { getStartTimeMs } from "./util.ts";
 
 const log = debug("ef:elements:EFMedia");
 
@@ -57,11 +56,6 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
   #assetId: string | null = null;
   @property({ type: String, attribute: "asset-id", reflect: true })
   set assetId(value: string | null) {
-    if (!value?.match(/^.{8}-.{4}-.{4}-.{4}-.{12}:.*$/)) {
-      throw new Error(
-        "EFMedia: asset-id must match <uuid>:<basename>. (like: 550e8400-e29b-41d4-a716-446655440000:example.mp4)",
-      );
-    }
     this.#assetId = value;
   }
 
@@ -104,7 +98,7 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
     },
   });
 
-  protected initSegmentsLoader = new Task(this, {
+  public initSegmentsLoader = new Task(this, {
     autoRun: EF_INTERACTIVE,
     args: () =>
       [this.trackFragmentIndexLoader.value, this.src, this.fetch] as const,
@@ -115,10 +109,10 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
       return await Promise.all(
         Object.entries(fragmentIndex).map(async ([trackId, track]) => {
           const start = track.initSegment.offset;
-          const end = track.initSegment.offset + track.initSegment.size - 1;
+          const end = track.initSegment.offset + track.initSegment.size;
           const response = await fetch(this.fragmentTrackPath(trackId), {
             signal,
-            headers: { Range: `bytes=${start}-${end}` },
+            headers: { Range: `bytes=${start}-${end - 1}` },
           });
           const buffer =
             (await response.arrayBuffer()) as MP4Box.MP4ArrayBuffer;
@@ -225,7 +219,7 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
 
         const response = await fetch(this.fragmentTrackPath(trackId), {
           signal,
-          headers: { Range: `bytes=${start}-${end}` },
+          headers: { Range: `bytes=${start}-${end - 1}` },
         });
 
         if (nextSegment) {
@@ -233,7 +227,7 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
           const nextEnd = nextSegment.offset + nextSegment.size;
           fetch(this.fragmentTrackPath(trackId), {
             signal,
-            headers: { Range: `bytes=${nextStart}-${nextEnd}` },
+            headers: { Range: `bytes=${nextStart}-${nextEnd - 1}` },
           })
             .then(() => {
               log("Prefetched next segment");
@@ -302,6 +296,83 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
     if (changedProperties.has("ownCurrentTimeMs")) {
       this.executeSeek(this.trimAdjustedOwnCurrentTimeMs);
     }
+    // TODO: this is copied straight from EFTimegroup.ts
+    // and should be refactored to be shared/reduce bad duplication of
+    // critical logic.
+    if (
+      changedProperties.has("currentTime") ||
+      changedProperties.has("ownCurrentTimeMs")
+    ) {
+      const timelineTimeMs = (this.rootTimegroup ?? this).currentTimeMs;
+      if (
+        this.startTimeMs > timelineTimeMs ||
+        this.endTimeMs < timelineTimeMs
+      ) {
+        this.style.display = "none";
+        return;
+      }
+      this.style.display = "";
+
+      const animations = this.getAnimations({ subtree: true });
+      this.style.setProperty("--ef-duration", `${this.durationMs}ms`);
+      this.style.setProperty(
+        "--ef-transition--duration",
+        `${this.parentTimegroup?.overlapMs ?? 0}ms`,
+      );
+      this.style.setProperty(
+        "--ef-transition-out-start",
+        `${this.durationMs - (this.parentTimegroup?.overlapMs ?? 0)}ms`,
+      );
+
+      for (const animation of animations) {
+        if (animation.playState === "running") {
+          animation.pause();
+        }
+        const effect = animation.effect;
+        if (!(effect && effect instanceof KeyframeEffect)) {
+          return;
+        }
+        const target = effect.target;
+        // TODO: better generalize work avoidance for temporal elements
+        if (!target) {
+          return;
+        }
+        if (target.closest("ef-video, ef-audio") !== this) {
+          return;
+        }
+
+        // Important to avoid going to the end of the animation
+        // or it will reset awkwardly.
+        if (isEFTemporal(target)) {
+          const timing = effect.getTiming();
+          const duration = Number(timing.duration) ?? 0;
+          const delay = Number(timing.delay);
+          const newTime = Math.floor(
+            Math.min(target.ownCurrentTimeMs, duration - 1 + delay),
+          );
+          if (Number.isNaN(newTime)) {
+            return;
+          }
+          animation.currentTime = newTime;
+        } else if (target) {
+          const nearestTimegroup = target.closest("ef-timegroup");
+          if (!nearestTimegroup) {
+            return;
+          }
+          const timing = effect.getTiming();
+          const duration = Number(timing.duration) ?? 0;
+          const delay = Number(timing.delay);
+          const newTime = Math.floor(
+            Math.min(nearestTimegroup.ownCurrentTimeMs, duration - 1 + delay),
+          );
+
+          if (Number.isNaN(newTime)) {
+            return;
+          }
+          animation.currentTime = newTime;
+        }
+      }
+    }
   }
 
   get hasOwnDuration() {
@@ -356,10 +427,6 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
     return Math.max(...durations) - this.trimStartMs - this.trimEndMs;
   }
 
-  get startTimeMs() {
-    return getStartTimeMs(this);
-  }
-
   #audioContext = new OfflineAudioContext(2, 48000 / 30, 48000);
 
   audioBufferTask = new Task(this, {
@@ -418,11 +485,11 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
 
     const start = audioTrackIndex.initSegment.offset;
     const end =
-      audioTrackIndex.initSegment.offset + audioTrackIndex.initSegment.size - 1;
+      audioTrackIndex.initSegment.offset + audioTrackIndex.initSegment.size;
     const audioInitFragmentRequest = this.fetch(
       this.fragmentTrackPath(String(audioTrackId)),
       {
-        headers: { Range: `bytes=${start}-${end}` },
+        headers: { Range: `bytes=${start}-${end - 1}` },
       },
     );
 
@@ -448,12 +515,12 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
       return;
     }
     const fragmentStart = firstFragment.offset;
-    const fragmentEnd = lastFragment.offset + lastFragment.size - 1;
+    const fragmentEnd = lastFragment.offset + lastFragment.size;
 
     const audioFragmentRequest = this.fetch(
       this.fragmentTrackPath(String(audioTrackId)),
       {
-        headers: { Range: `bytes=${fragmentStart}-${fragmentEnd}` },
+        headers: { Range: `bytes=${fragmentStart}-${fragmentEnd - 1}` },
       },
     );
 

package/src/elements/EFTemporal.browsertest.ts

@@ -63,3 +63,17 @@ describe("trimstart and trimend", () => {
     expect(element.trimEndMs).toBe(5_000);
   });
 });
+
+describe("duration", () => {
+  test("duration is parsed correctly", () => {
+    const element = document.createElement("test-temporal");
+    element.setAttribute("duration", "10s");
+    expect(element.durationMs).toBe(10_000);
+  });
+
+  test("duration can be set directly on the element", () => {
+    const element = document.createElement("test-temporal");
+    element.duration = "10s";
+    expect(element.durationMs).toBe(10_000);
+  });
+});

package/src/elements/EFTemporal.ts

@@ -169,6 +169,14 @@ export const EFTemporal = <T extends Constructor<LitElement>>(
     })
     private _durationMs?: number;
 
+    set duration(value: string | undefined) {
+      if (value !== undefined) {
+        this.setAttribute("duration", value);
+      } else {
+        this.removeAttribute("duration");
+      }
+    }
+
     private _trimStartMs = 0;
     @property({
       type: Number,
@@ -179,6 +187,9 @@ export const EFTemporal = <T extends Constructor<LitElement>>(
       return this._trimStartMs;
     }
     public set trimStartMs(value: number) {
+      if (this._trimStartMs === value) {
+        return;
+      }
       this._trimStartMs = value;
       this.setAttribute(
         "trimstart",
@@ -203,6 +214,9 @@ export const EFTemporal = <T extends Constructor<LitElement>>(
       return this._trimEndMs;
     }
     public set trimEndMs(value: number) {
+      if (this._trimEndMs === value) {
+        return;
+      }
       this._trimEndMs = value;
       this.setAttribute("trimend", durationConverter.toAttribute(value / 1000));
     }

package/src/elements/EFTimegroup.browsertest.ts

@@ -8,7 +8,10 @@ import { assert, beforeEach, describe, test } from "vitest";
 import { EFTimegroup } from "./EFTimegroup.ts";
 import "./EFTimegroup.ts";
 import { customElement } from "lit/decorators/custom-element.js";
+import { ContextMixin } from "../gui/ContextMixin.ts";
 import { EFTemporal } from "./EFTemporal.ts";
+// Need workbench to make workbench wrapping occurs
+import "../gui/EFWorkbench.ts";
 
 beforeEach(() => {
   for (let i = 0; i < localStorage.length; i++) {
@@ -21,6 +24,9 @@ beforeEach(() => {
   }
 });
 
+@customElement("test-context")
+class TestContext extends ContextMixin(LitElement) {}
+
 @customElement("test-temporal")
 class TestTemporal extends EFTemporal(LitElement) {
   get hasOwnDuration(): boolean {
@@ -31,6 +37,7 @@ class TestTemporal extends EFTemporal(LitElement) {
 declare global {
   interface HTMLElementTagNameMap {
     "test-temporal": TestTemporal;
+    "test-context": TestContext;
   }
 }
 
@@ -331,3 +338,33 @@ describe("setting currentTime", () => {
     assert.equal(b.ownCurrentTimeMs, 2_500);
   });
 });
+
+describe("shouldWrapWithWorkbench", () => {
+  test.skip("should not wrap if EF_INTERACTIVE is false", () => {
+    // TODO: need a way to define EF_INTERACTIVE in a test
+  });
+
+  test("should wrap if root-most timegroup", () => {
+    const root = document.createElement("ef-timegroup");
+    const child = document.createElement("ef-timegroup");
+    root.appendChild(child);
+    assert.isTrue(child.shouldWrapWithWorkbench());
+  });
+
+  test("should not wrap if contained within a preview context", () => {
+    const timegorup = document.createElement("ef-timegroup");
+    const context = document.createElement("test-context");
+    context.append(timegorup);
+    assert.isFalse(timegorup.shouldWrapWithWorkbench());
+  });
+});
+
+describe("DOM nodes", () => {
+  test("can have mode and duration set as attributes", () => {
+    const timegroup = document.createElement("ef-timegroup");
+    timegroup.setAttribute("mode", "fixed");
+    timegroup.setAttribute("duration", "10s");
+    assert.equal(timegroup.mode, "fixed");
+    assert.equal(timegroup.durationMs, 10_000);
+  });
+});

package/src/elements/EFTimegroup.ts

@@ -1,9 +1,12 @@
-import { LitElement, html, css, type PropertyValueMap } from "lit";
 import { provide } from "@lit/context";
 import { Task } from "@lit/task";
-import { customElement, property } from "lit/decorators.js";
 import debug from "debug";
+import { LitElement, type PropertyValueMap, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
 
+import { EF_INTERACTIVE } from "../EF_INTERACTIVE.ts";
+import { isContextMixin } from "../gui/ContextMixin.ts";
+import { deepGetMediaElements } from "./EFMedia.ts";
 import {
   EFTemporal,
   isEFTemporal,
@@ -11,8 +14,6 @@ import {
   timegroupContext,
 } from "./EFTemporal.ts";
 import { TimegroupController } from "./TimegroupController.ts";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE.ts";
-import { deepGetMediaElements } from "./EFMedia.ts";
 import { durationConverter } from "./durationConverter.ts";
 
 const log = debug("ef:elements:EFTimegroup");
@@ -151,10 +152,16 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     }
   }
 
+  /**
+   * Wait for all media elements to load their initial segments.
+   * Ideally we would only need the extracted index json data, but
+   * that caused issues with constructing audio data. We had negative durations
+   * in calculations and it was not clear why.
+   */
   async waitForMediaDurations() {
     return await Promise.all(
       deepGetMediaElements(this).map(
-        (media) => media.trackFragmentIndexLoader.taskComplete,
+        (media) => media.initSegmentsLoader.taskComplete,
       ),
     );
   }
@@ -243,12 +250,34 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     }
   }
 
+  get contextProvider() {
+    let parent = this.parentNode;
+    while (parent) {
+      if (isContextMixin(parent)) {
+        return parent;
+      }
+      parent = parent.parentNode;
+    }
+    return null;
+  }
+
+  /**
+   * Returns true if the timegroup should be wrapped with a workbench.
+   *
+   * A timegroup should be wrapped with a workbench if it is the root-most timegroup
+   * and EF_INTERACTIVE is true.
+   *
+   * If the timegroup is already wrappedin a context provider like ef-preview,
+   * it should NOT be wrapped in a workbench.
+   *
+   */
   shouldWrapWithWorkbench() {
     return (
       EF_INTERACTIVE &&
       this.closest("ef-timegroup") === this &&
+      this.closest("ef-preview") === null &&
       this.closest("ef-workbench") === null &&
-      this.closest("ef-preview") === null
+      this.closest("test-context") === null
     );
   }
 
@@ -286,12 +315,8 @@ export class EFTimegroup extends EFTemporal(LitElement) {
   ) {
     await this.waitForMediaDurations();
 
-    const durationMs = toMs - fromMs;
-
     await Promise.all(
       deepGetMediaElements(this).map(async (mediaElement) => {
-        await mediaElement.trackFragmentIndexLoader.taskComplete;
-
         const mediaStartsBeforeEnd = mediaElement.startTimeMs <= toMs;
         const mediaEndsAfterStart = mediaElement.endTimeMs >= fromMs;
         const mediaOverlaps = mediaStartsBeforeEnd && mediaEndsAfterStart;
@@ -304,19 +329,19 @@ export class EFTimegroup extends EFTemporal(LitElement) {
           throw new Error("Failed to fetch audio");
         }
 
-        const ctxStartMs = Math.max(0, mediaElement.startTimeMs - fromMs);
-        const ctxEndMs = Math.min(durationMs, mediaElement.endTimeMs - fromMs);
-        const ctxDurationMs = ctxEndMs - ctxStartMs;
-
-        const offset =
-          Math.max(0, fromMs - mediaElement.startTimeMs) - audio.startMs;
-
         const bufferSource = audioContext.createBufferSource();
         bufferSource.buffer = await audioContext.decodeAudioData(
           await audio.blob.arrayBuffer(),
         );
         bufferSource.connect(audioContext.destination);
 
+        const ctxStartMs = Math.max(0, mediaElement.startTimeMs - fromMs);
+        const ctxEndMs = mediaElement.endTimeMs - fromMs;
+        const ctxDurationMs = ctxEndMs - ctxStartMs;
+
+        const offset =
+          Math.max(0, fromMs - mediaElement.startTimeMs) - audio.startMs;
+
         bufferSource.start(
           ctxStartMs / 1000,
           offset / 1000,

package/src/elements/EFVideo.ts

@@ -20,10 +20,7 @@ export class EFVideo extends TWMixin(EFMedia) {
   ];
   canvasRef = createRef<HTMLCanvasElement>();
   render() {
-    return html` <canvas
-      class="h-full w-full object-fill"
-      ${ref(this.canvasRef)}
-    ></canvas>`;
+    return html` <canvas ${ref(this.canvasRef)}></canvas>`;
   }
 
   get canvasElement() {