@editframe/elements 0.11.0-beta.8 → 0.12.0-beta.1

package/src/elements/EFMedia.browsertest.ts

@@ -57,58 +57,47 @@ describe("EFMedia", () => {
   });
 
   describe("attribute: asset-id", () => {
-    test("must match :id/basename", () => {
-      const element = document.createElement("test-media");
-      expect(() => {
-        element.assetId = "1234:example.mp4";
-      }).toThrowError(
-        new Error(
-          "EFMedia: asset-id must match <uuid>:<basename>. (like: 550e8400-e29b-41d4-a716-446655440000:example.mp4)",
-        ),
-      );
-    });
-
     test("determines fragmentIndexPath", () => {
       const id = v4();
       const element = document.createElement("test-media");
-      element.setAttribute("asset-id", `${id}:example.mp4`);
+      element.setAttribute("asset-id", id);
       expect(element.fragmentIndexPath()).toBe(
-        `https://editframe.dev/api/v1/isobmff_files/${id}:example.mp4/index`,
+        `https://editframe.dev/api/v1/isobmff_files/${id}/index`,
       );
     });
 
     test("determines fragmentTrackPath", () => {
       const id = v4();
       const element = document.createElement("test-media");
-      element.setAttribute("asset-id", `${id}:example.mp4`);
+      element.setAttribute("asset-id", id);
       expect(element.fragmentTrackPath("1")).toBe(
-        `https://editframe.dev/api/v1/isobmff_tracks/${id}:example.mp4/1`,
+        `https://editframe.dev/api/v1/isobmff_tracks/${id}/1`,
       );
     });
 
     test("honors apiHost in fragmentIndexPath", () => {
       const id = v4();
       const element = document.createElement("test-media");
-      element.setAttribute("asset-id", `${id}:example.mp4`);
+      element.setAttribute("asset-id", id);
       const preview = document.createElement("ef-preview");
       preview.appendChild(element);
       preview.apiHost = "test://";
       document.body.appendChild(preview);
       expect(element.fragmentIndexPath()).toBe(
-        `test:///api/v1/isobmff_files/${id}:example.mp4/index`,
+        `test:///api/v1/isobmff_files/${id}/index`,
       );
     });
 
     test("honors apiHost in fragmentTrackPath", () => {
       const id = v4();
       const element = document.createElement("test-media");
-      element.setAttribute("asset-id", `${id}:example.mp4`);
+      element.setAttribute("asset-id", id);
       const preview = document.createElement("ef-preview");
       preview.appendChild(element);
       preview.apiHost = "test://";
       document.body.appendChild(preview);
       expect(element.fragmentTrackPath("1")).toBe(
-        `test:///api/v1/isobmff_tracks/${id}:example.mp4/1`,
+        `test:///api/v1/isobmff_tracks/${id}/1`,
       );
     });
   });

package/src/elements/EFMedia.ts

@@ -57,11 +57,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 +99,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,

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

@@ -1,10 +1,10 @@
-import { html, css } from "lit";
 import { Task } from "@lit/task";
-import { createRef, ref } from "lit/directives/ref.js";
+import { css, html } from "lit";
 import { customElement } from "lit/decorators.js";
+import { createRef, ref } from "lit/directives/ref.js";
 
-import { EFMedia } from "./EFMedia.ts";
 import { TWMixin } from "../gui/TWMixin.ts";
+import { EFMedia } from "./EFMedia.ts";
 
 @customElement("ef-video")
 export class EFVideo extends TWMixin(EFMedia) {
@@ -13,15 +13,14 @@ export class EFVideo extends TWMixin(EFMedia) {
       :host {
         display: block;
       }
+      canvas {
+        all: inherit;
+      }
     `,
   ];
   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() {