@editframe/elements 0.11.0-beta.1 → 0.11.0-beta.14

package/src/elements/EFMedia.browsertest.ts

@@ -1,9 +1,12 @@
-import { describe, expect, test, beforeEach, afterEach } from "vitest";
-import { v4 } from "uuid";
 import { customElement } from "lit/decorators.js";
+import { v4 } from "uuid";
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
 import { EFMedia } from "./EFMedia.ts";
 import "../gui/EFWorkbench.ts";
 import "../gui/EFPreview.ts";
+import { createTestFragmentIndex } from "TEST/createTestFragmentIndex.ts";
+import { useMockWorker } from "TEST/useMockWorker.ts";
+import { http, HttpResponse } from "msw";
 
 @customElement("test-media")
 class TestMedia extends EFMedia {}
@@ -15,6 +18,8 @@ declare global {
 }
 
 describe("EFMedia", () => {
+  const worker = useMockWorker();
+
   test("should be defined", () => {
     const element = document.createElement("test-media");
     expect(element.tagName).toBe("TEST-MEDIA");
@@ -107,4 +112,228 @@ describe("EFMedia", () => {
       );
     });
   });
+
+  describe("calculating duration", () => {
+    test("Computes duration from track fragment index", async () => {
+      // Mock the request for the track fragment index, responds with a 10 second duration
+      worker.use(
+        http.get("/@ef-track-fragment-index//assets/10s-bars.mp4", () => {
+          return HttpResponse.json(
+            createTestFragmentIndex({
+              audio: { duration: 10_000 },
+              video: { duration: 10_000 },
+            }),
+          );
+        }),
+      );
+
+      const element = document.createElement("test-media");
+      element.src = "/assets/10s-bars.mp4";
+
+      const preview = document.createElement("ef-preview");
+      preview.appendChild(element);
+      document.body.appendChild(preview);
+
+      // Await the next tick to ensure the element has a chance to load the track fragment
+      await Promise.resolve();
+
+      await element.trackFragmentIndexLoader.taskComplete;
+
+      expect(element.durationMs).toBe(10_000);
+    });
+    test("Computes duration from track fragment index sourcein", async () => {
+      // Mock the request for the track fragment index, responds with a 10 second duration
+      worker.use(
+        http.get("/@ef-track-fragment-index//assets/10s-bars.mp4", () => {
+          return HttpResponse.json(
+            createTestFragmentIndex({
+              audio: { duration: 10_000 },
+              video: { duration: 10_000 },
+            }),
+          );
+        }),
+      );
+
+      const timegroup = document.createElement("ef-timegroup");
+      timegroup.mode = "sequence";
+      const element = document.createElement("test-media");
+      element.src = "/assets/10s-bars.mp4";
+      element.sourcein = "1s";
+
+      const preview = document.createElement("ef-preview");
+      timegroup.appendChild(element);
+      preview.appendChild(timegroup);
+      document.body.appendChild(preview);
+
+      // Await the next tick to ensure the element has a chance to load the track fragment
+      await Promise.resolve();
+
+      await element.trackFragmentIndexLoader.taskComplete;
+
+      expect(element.durationMs).toBe(9_000);
+      expect(timegroup.durationMs).toBe(9_000);
+    });
+    test("Computes duration from track fragment index sourcein", async () => {
+      // Mock the request for the track fragment index, responds with a 10 second duration
+      worker.use(
+        http.get("/@ef-track-fragment-index//assets/10s-bars.mp4", () => {
+          return HttpResponse.json(
+            createTestFragmentIndex({
+              audio: { duration: 10_000 },
+              video: { duration: 10_000 },
+            }),
+          );
+        }),
+      );
+
+      const timegroup = document.createElement("ef-timegroup");
+      timegroup.mode = "sequence";
+      const element = document.createElement("test-media");
+      element.src = "/assets/10s-bars.mp4";
+      element.sourcein = "6s";
+
+      const preview = document.createElement("ef-preview");
+      timegroup.appendChild(element);
+      preview.appendChild(timegroup);
+      document.body.appendChild(preview);
+
+      // Await the next tick to ensure the element has a chance to load the track fragment
+      await Promise.resolve();
+
+      await element.trackFragmentIndexLoader.taskComplete;
+
+      expect(element.durationMs).toBe(4_000);
+      expect(timegroup.durationMs).toBe(4_000);
+    });
+    test("Computes duration from track fragment index sourceout", async () => {
+      // Mock the request for the track fragment index, responds with a 10 second duration
+      worker.use(
+        http.get("/@ef-track-fragment-index//assets/10s-bars.mp4", () => {
+          return HttpResponse.json(
+            createTestFragmentIndex({
+              audio: { duration: 10_000 },
+              video: { duration: 10_000 },
+            }),
+          );
+        }),
+      );
+
+      const timegroup = document.createElement("ef-timegroup");
+      timegroup.mode = "sequence";
+      const element = document.createElement("test-media");
+      element.src = "/assets/10s-bars.mp4";
+      element.sourceout = "6s";
+
+      const preview = document.createElement("ef-preview");
+      timegroup.appendChild(element);
+      preview.appendChild(timegroup);
+      document.body.appendChild(preview);
+
+      // Await the next tick to ensure the element has a chance to load the track fragment
+      await Promise.resolve();
+
+      await element.trackFragmentIndexLoader.taskComplete;
+
+      expect(element.durationMs).toBe(4_000);
+      expect(timegroup.durationMs).toBe(4_000);
+    });
+    test("Computes duration from track fragment index sourceout", async () => {
+      // Mock the request for the track fragment index, responds with a 10 second duration
+      worker.use(
+        http.get("/@ef-track-fragment-index//assets/10s-bars.mp4", () => {
+          return HttpResponse.json(
+            createTestFragmentIndex({
+              audio: { duration: 10_000 },
+              video: { duration: 10_000 },
+            }),
+          );
+        }),
+      );
+
+      const timegroup = document.createElement("ef-timegroup");
+      timegroup.mode = "sequence";
+      const element = document.createElement("test-media");
+      element.src = "/assets/10s-bars.mp4";
+      element.sourceout = "5s";
+
+      const preview = document.createElement("ef-preview");
+      timegroup.appendChild(element);
+      preview.appendChild(timegroup);
+      document.body.appendChild(preview);
+
+      // Await the next tick to ensure the element has a chance to load the track fragment
+      await Promise.resolve();
+
+      await element.trackFragmentIndexLoader.taskComplete;
+
+      expect(element.durationMs).toBe(5_000);
+      expect(timegroup.durationMs).toBe(5_000);
+    });
+    test("Computes duration from track fragment index sourceout and sourcein", async () => {
+      // Mock the request for the track fragment index, responds with a 10 second duration
+      worker.use(
+        http.get("/@ef-track-fragment-index//assets/10s-bars.mp4", () => {
+          return HttpResponse.json(
+            createTestFragmentIndex({
+              audio: { duration: 10_000 },
+              video: { duration: 10_000 },
+            }),
+          );
+        }),
+      );
+
+      const timegroup = document.createElement("ef-timegroup");
+      timegroup.mode = "sequence";
+      const element = document.createElement("test-media");
+      element.src = "/assets/10s-bars.mp4";
+      element.sourcein = "1s";
+      element.sourceout = "5s";
+
+      const preview = document.createElement("ef-preview");
+      timegroup.appendChild(element);
+      preview.appendChild(timegroup);
+      document.body.appendChild(preview);
+
+      // Await the next tick to ensure the element has a chance to load the track fragment
+      await Promise.resolve();
+
+      await element.trackFragmentIndexLoader.taskComplete;
+
+      expect(element.durationMs).toBe(4_000);
+      expect(timegroup.durationMs).toBe(4_000);
+    });
+    test("Computes duration from track fragment index sourceout and sourcein", async () => {
+      // Mock the request for the track fragment index, responds with a 10 second duration
+      worker.use(
+        http.get("/@ef-track-fragment-index//assets/10s-bars.mp4", () => {
+          return HttpResponse.json(
+            createTestFragmentIndex({
+              audio: { duration: 10_000 },
+              video: { duration: 10_000 },
+            }),
+          );
+        }),
+      );
+
+      const timegroup = document.createElement("ef-timegroup");
+      timegroup.mode = "sequence";
+      const element = document.createElement("test-media");
+      element.src = "/assets/10s-bars.mp4";
+      element.sourcein = "9s";
+      element.sourceout = "10s";
+
+      const preview = document.createElement("ef-preview");
+      timegroup.appendChild(element);
+      preview.appendChild(timegroup);
+      document.body.appendChild(preview);
+
+      // Await the next tick to ensure the element has a chance to load the track fragment
+      await Promise.resolve();
+
+      await element.trackFragmentIndexLoader.taskComplete;
+
+      expect(element.durationMs).toBe(1_000);
+      expect(timegroup.durationMs).toBe(1_000);
+    });
+  });
 });

package/src/elements/EFMedia.ts

@@ -1,22 +1,22 @@
+import { consume } from "@lit/context";
+import { Task } from "@lit/task";
+import { deepArrayEquals } from "@lit/task/deep-equals.js";
+import debug from "debug";
 import { LitElement, type PropertyValueMap, css } from "lit";
 import { property, state } from "lit/decorators.js";
-import { deepArrayEquals } from "@lit/task/deep-equals.js";
-import { Task } from "@lit/task";
 import type * as MP4Box from "mp4box";
-import { consume } from "@lit/context";
-import debug from "debug";
 
 import type { TrackFragmentIndex, TrackSegment } from "@editframe/assets";
 
-import { MP4File } from "@editframe/assets/MP4File.js";
 import { VideoAsset } from "@editframe/assets/EncodedAsset.js";
+import { MP4File } from "@editframe/assets/MP4File.js";
+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 { FetchMixin } from "./FetchMixin.ts";
-import { EFSourceMixin } from "./EFSourceMixin.ts";
 import { getStartTimeMs } from "./util.ts";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE.ts";
-import { apiHostContext } from "../gui/apiHostContext.ts";
-import { EF_RENDERING } from "../EF_RENDERING.ts";
 
 const log = debug("ef:elements:EFMedia");
 
@@ -321,6 +321,38 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
     if (durations.length === 0) {
       return 0;
     }
+    if (
+      this.sourceInMs &&
+      this.sourceOutMs &&
+      this.sourceOutMs > this.sourceInMs
+    ) {
+      return Math.max(this.sourceOutMs - this.sourceInMs);
+    }
+    if (this.sourceInMs) {
+      return (
+        Math.max(...durations) -
+        this.trimStartMs -
+        this.trimEndMs -
+        this.sourceInMs
+      );
+    }
+    if (this.sourceOutMs) {
+      return (
+        Math.max(...durations) -
+        this.trimStartMs -
+        this.trimEndMs -
+        this.sourceOutMs
+      );
+    }
+    if (this.sourceInMs && this.sourceOutMs) {
+      return (
+        Math.max(...durations) -
+        this.trimStartMs -
+        this.trimEndMs -
+        this.sourceOutMs -
+        this.sourceInMs
+      );
+    }
     return Math.max(...durations) - this.trimStartMs - this.trimEndMs;
   }
 
@@ -362,6 +394,12 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
 
   async fetchAudioSpanningTime(fromMs: number, toMs: number) {
     // Adjust range for track's own time
+    if (this.sourceInMs) {
+      fromMs -= this.startTimeMs - this.trimStartMs - this.sourceInMs;
+    }
+    if (this.sourceOutMs) {
+      toMs -= this.startTimeMs - this.trimStartMs - this.sourceOutMs;
+    }
     fromMs -= this.startTimeMs - this.trimStartMs;
     toMs -= this.startTimeMs - this.trimStartMs;
 
@@ -371,6 +409,7 @@ export class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
       log("No audio track found");
       return;
     }
+
     const audioTrackIndex = this.trackFragmentIndexLoader.value?.[audioTrackId];
     if (!audioTrackIndex) {
       log("No audio track found");

package/src/elements/EFTemporal.browsertest.ts

@@ -0,0 +1,79 @@
+import { LitElement } from "lit";
+import { customElement } from "lit/decorators/custom-element.js";
+import { describe, expect, test } from "vitest";
+import { EFTemporal } from "./EFTemporal.ts";
+
+@customElement("test-temporal")
+class TestTemporal extends EFTemporal(LitElement) {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "test-temporal": TestTemporal;
+  }
+}
+
+describe("sourcein and sourceout", () => {
+  test("sourcein and sourceout are parsed correctly", () => {
+    const element = document.createElement("test-temporal");
+    element.setAttribute("sourcein", "1s");
+    element.setAttribute("sourceout", "5s");
+    expect(element.sourceInMs).toBe(1_000);
+    expect(element.sourceOutMs).toBe(5_000);
+  });
+
+  test("sourcein and sourceout can be set directly on the element", () => {
+    const element = document.createElement("test-temporal");
+    element.sourcein = "1s";
+    element.sourceout = "5s";
+    expect(element.sourceInMs).toBe(1_000);
+    expect(element.sourceOutMs).toBe(5_000);
+  });
+
+  test("sourcein and sourceout are reflected correctly", () => {
+    const element = document.createElement("test-temporal");
+    element.sourceInMs = 1_000;
+    element.sourceOutMs = 5_000;
+    expect(element.getAttribute("sourcein")).toBe("1s");
+    expect(element.getAttribute("sourceout")).toBe("5s");
+  });
+});
+
+describe("trimstart and trimend", () => {
+  test("trimstart and trimend attributes are parsed correctly", () => {
+    const element = document.createElement("test-temporal");
+    element.setAttribute("trimstart", "1s");
+    element.setAttribute("trimend", "5s");
+    expect(element.trimStartMs).toBe(1_000);
+    expect(element.trimEndMs).toBe(5_000);
+  });
+
+  test("trimstart and trimend properties are reflected correctly", () => {
+    const element = document.createElement("test-temporal");
+    element.trimStartMs = 1_000;
+    element.trimEndMs = 5_000;
+    expect(element.getAttribute("trimstart")).toBe("1s");
+    expect(element.getAttribute("trimend")).toBe("5s");
+  });
+
+  test("trimstart and trimend can be set directly on the element", () => {
+    const element = document.createElement("test-temporal");
+    element.trimstart = "1s";
+    element.trimend = "5s";
+    expect(element.trimStartMs).toBe(1_000);
+    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

@@ -1,11 +1,11 @@
-import type { LitElement, ReactiveController } from "lit";
 import { consume, createContext } from "@lit/context";
+import type { LitElement, ReactiveController } from "lit";
 import { property, state } from "lit/decorators.js";
 import type { EFTimegroup } from "./EFTimegroup.ts";
 
-import { durationConverter } from "./durationConverter.ts";
 import { Task } from "@lit/task";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.ts";
+import { durationConverter } from "./durationConverter.ts";
 
 export const timegroupContext = createContext<EFTimegroup>(
   Symbol("timeGroupContext"),
@@ -15,6 +15,19 @@ export declare class TemporalMixinInterface {
   get hasOwnDuration(): boolean;
   get trimStartMs(): number;
   get trimEndMs(): number;
+  set trimStartMs(value: number);
+  set trimEndMs(value: number);
+  set trimstart(value: string);
+  set trimend(value: string);
+
+  get sourceInMs(): number;
+  get sourceOutMs(): number;
+
+  set sourceInMs(value: number);
+  set sourceOutMs(value: number);
+  set sourcein(value: string);
+  set sourceout(value: string);
+
   get durationMs(): number;
   get startTimeMs(): number;
   get startTimeWithinParentMs(): number;
@@ -24,8 +37,6 @@ export declare class TemporalMixinInterface {
 
   set duration(value: string);
   get duration(): string;
-  set trimstart(value: string);
-  set trimend(value: string);
 
   parentTimegroup?: EFTimegroup;
   rootTimegroup?: EFTimegroup;
@@ -158,25 +169,118 @@ 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,
       attribute: "trimstart",
       converter: durationConverter,
     })
-    private _trimStartMs = 0;
     public get trimStartMs(): number {
       return this._trimStartMs;
     }
+    public set trimStartMs(value: number) {
+      if (this._trimStartMs === value) {
+        return;
+      }
+      this._trimStartMs = value;
+      this.setAttribute(
+        "trimstart",
+        durationConverter.toAttribute(value / 1000),
+      );
+    }
+    set trimstart(value: string | undefined) {
+      if (value !== undefined) {
+        this.setAttribute("trimstart", value);
+      } else {
+        this.removeAttribute("trimstart");
+      }
+    }
 
+    private _trimEndMs = 0;
     @property({
       type: Number,
       attribute: "trimend",
       converter: durationConverter,
     })
-    private _trimEndMs = 0;
     public get trimEndMs(): number {
       return this._trimEndMs;
     }
+    public set trimEndMs(value: number) {
+      if (this._trimEndMs === value) {
+        return;
+      }
+      this._trimEndMs = value;
+      this.setAttribute("trimend", durationConverter.toAttribute(value / 1000));
+    }
+    set trimend(value: string | undefined) {
+      if (value !== undefined) {
+        this.setAttribute("trimend", value);
+      } else {
+        this.removeAttribute("trimend");
+      }
+    }
+
+    private _sourceInMs: number | undefined;
+    @property({
+      type: Number,
+      attribute: "sourcein",
+      converter: durationConverter,
+      reflect: true,
+    })
+    get sourceInMs(): number | undefined {
+      return this._sourceInMs;
+    }
+    set sourceInMs(value: number | undefined) {
+      this._sourceInMs = value;
+      value !== undefined
+        ? this.setAttribute(
+            "sourcein",
+            durationConverter.toAttribute(value / 1000),
+          )
+        : this.removeAttribute("sourcein");
+    }
+    set sourcein(value: string | undefined) {
+      if (value !== undefined) {
+        this.setAttribute("sourcein", value);
+      } else {
+        this.removeAttribute("sourcein");
+      }
+    }
+
+    private _sourceOutMs: number | undefined;
+    @property({
+      type: Number,
+      attribute: "sourceout",
+      converter: durationConverter,
+      reflect: true,
+    })
+    get sourceOutMs(): number | undefined {
+      return this._sourceOutMs;
+    }
+    set sourceOutMs(value: number | undefined) {
+      this._sourceOutMs = value;
+      value !== undefined
+        ? this.setAttribute(
+            "sourceout",
+            durationConverter.toAttribute(value / 1000),
+          )
+        : this.removeAttribute("sourceout");
+    }
+    set sourceout(value: string | undefined) {
+      if (value !== undefined) {
+        this.setAttribute("sourceout", value);
+      } else {
+        this.removeAttribute("sourceout");
+      }
+    }
 
     @property({
       type: Number,
@@ -207,6 +311,20 @@ export const EFTemporal = <T extends Constructor<LitElement>>(
     // Defining this as a getter to a private property allows us to
     // override it classes that include this mixin.
     get durationMs() {
+      if (this.sourceInMs) {
+        return (
+          this._durationMs ||
+          this.parentTimegroup?.durationMs ||
+          0 - this.sourceInMs
+        );
+      }
+      if (this.sourceOutMs) {
+        return (
+          this._durationMs ||
+          this.parentTimegroup?.durationMs ||
+          0 - this.sourceOutMs
+        );
+      }
       return this._durationMs || this.parentTimegroup?.durationMs || 0;
     }
 
@@ -297,6 +415,21 @@ export const EFTemporal = <T extends Constructor<LitElement>>(
      */
     get trimAdjustedOwnCurrentTimeMs() {
       if (this.rootTimegroup) {
+        if (this.sourceInMs && this.sourceOutMs) {
+          return Math.min(
+            Math.max(
+              0,
+              this.rootTimegroup.currentTimeMs -
+                this.startTimeMs +
+                this.trimStartMs +
+                this.sourceInMs,
+            ),
+            this.durationMs +
+              Math.abs(this.startOffsetMs) +
+              this.trimStartMs +
+              this.sourceInMs,
+          );
+        }
         return Math.min(
           Math.max(
             0,

package/src/elements/EFTimegroup.browsertest.ts

@@ -1,14 +1,17 @@
-import { describe, test, assert, beforeEach } from "vitest";
 import {
   LitElement,
   type TemplateResult,
   html,
   render as litRender,
 } from "lit";
+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);
+  });
+});