@editframe/elements 0.15.0-beta.9 → 0.16.0-beta.1

package/src/elements/EFTemporal.browsertest.ts

@@ -3,76 +3,109 @@ import { customElement } from "lit/decorators/custom-element.js";
 import { describe, expect, test } from "vitest";
 import { EFTemporal } from "./EFTemporal.js";
 
-@customElement("test-temporal")
-class TestTemporal extends EFTemporal(LitElement) {}
+@customElement("ten-seconds")
+class TenSeconds extends EFTemporal(LitElement) {
+  get intrinsicDurationMs() {
+    return 10_000;
+  }
+}
 
 declare global {
   interface HTMLElementTagNameMap {
-    "test-temporal": TestTemporal;
+    "ten-seconds": TenSeconds;
   }
 }
 
 describe("sourcein and sourceout", () => {
   test("sourcein and sourceout are parsed correctly", () => {
-    const element = document.createElement("test-temporal");
+    const element = document.createElement("ten-seconds");
     element.setAttribute("sourcein", "1s");
     element.setAttribute("sourceout", "5s");
     expect(element.sourceInMs).toBe(1_000);
     expect(element.sourceOutMs).toBe(5_000);
+    expect(element.durationMs).toBe(4_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);
+  describe("only srcin is set", () => {
+    test("duration is calculated", () => {
+      const element = document.createElement("ten-seconds");
+      element.sourceInMs = 1_000;
+      expect(element.durationMs).toBe(9_000);
+    });
+  });
+
+  describe("only srcout is set", () => {
+    test("duration is calculated", () => {
+      const element = document.createElement("ten-seconds");
+      element.sourceOutMs = 5_000;
+      expect(element.durationMs).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("srcout is before srcin", () => {
+    test("duration is zero", () => {
+      const element = document.createElement("ten-seconds");
+      element.sourceInMs = 5_000;
+      element.sourceOutMs = 1_000;
+      console.log(element.sourceInMs, element.sourceOutMs, element.durationMs);
+      expect(element.durationMs).toBe(0);
+    });
+  });
+
+  describe("srcin is negative", () => {
+    test("srcin is normalized to 0 ", () => {
+      const element = document.createElement("ten-seconds");
+      element.sourceInMs = -1_000;
+      expect(element.sourceInMs).toBe(0);
+      expect(element.durationMs).toBe(10_000);
+    });
+  });
+
+  describe("srcout is beyond the intrinsic duration", () => {
+    test("srcout is normalized to the intrinsic duration", () => {
+      const element = document.createElement("ten-seconds");
+      element.sourceOutMs = 15_000;
+      expect(element.sourceOutMs).toBe(10_000);
+    });
   });
 });
 
 describe("trimstart and trimend", () => {
   test("trimstart and trimend attributes are parsed correctly", () => {
-    const element = document.createElement("test-temporal");
+    const element = document.createElement("ten-seconds");
     element.setAttribute("trimstart", "1s");
     element.setAttribute("trimend", "5s");
     expect(element.trimStartMs).toBe(1_000);
     expect(element.trimEndMs).toBe(5_000);
+    expect(element.durationMs).toBe(4_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");
+  describe("trimstart is beyond the intrinsic duration", () => {
+    test("trimstart is normalized to the intrinsic duration", () => {
+      const element = document.createElement("ten-seconds");
+      element.trimStartMs = 15_000;
+      expect(element.trimStartMs).toBe(10_000);
+    });
   });
 
-  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("trimend is beyond the intrinsic duration", () => {
+    test("trimend is normalized to the intrinsic duration", () => {
+      const element = document.createElement("ten-seconds");
+      element.trimEndMs = 15_000;
+      expect(element.trimEndMs).toBe(10_000);
+    });
   });
 });
 
 describe("duration", () => {
   test("duration is parsed correctly", () => {
-    const element = document.createElement("test-temporal");
+    const element = document.createElement("ten-seconds");
     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");
+    const element = document.createElement("ten-seconds");
     element.duration = "10s";
     expect(element.durationMs).toBe(10_000);
   });

package/src/elements/EFTemporal.ts

@@ -18,6 +18,8 @@ export declare class TemporalMixinInterface {
    */
   get hasExplicitDuration(): boolean;
 
+  get sourceStartMs(): number;
+
   /**
    * Used to trim the start of the media.
    *
@@ -27,7 +29,7 @@ export declare class TemporalMixinInterface {
    *
    * @domAttribute "trimstart"
    */
-  get trimStartMs(): number;
+  get trimStartMs(): number | undefined;
 
   /**
    * Used to trim the end of the media.
@@ -40,10 +42,10 @@ export declare class TemporalMixinInterface {
    */
   get trimEndMs(): number;
 
-  set trimStartMs(value: number);
-  set trimEndMs(value: number);
-  set trimstart(value: string);
-  set trimend(value: string);
+  set trimStartMs(value: number | undefined);
+  set trimEndMs(value: number | undefined);
+  set trimstart(value: string | undefined);
+  set trimend(value: string | undefined);
 
   /**
    * The source in time of the element.
@@ -64,7 +66,7 @@ export declare class TemporalMixinInterface {
    *
    * @domAttribute "sourcein"
    */
-  get sourceInMs(): number;
+  get sourceInMs(): number | undefined;
 
   /**
    * The source out time of the element.
@@ -87,18 +89,22 @@ export declare class TemporalMixinInterface {
    *
    * @domAttribute "sourceout"
    */
-  get sourceOutMs(): number;
+  get sourceOutMs(): number | undefined;
 
-  set sourceInMs(value: number);
-  set sourceOutMs(value: number);
-  set sourcein(value: string);
-  set sourceout(value: string);
+  set sourceInMs(value: number | undefined);
+  set sourceOutMs(value: number | undefined);
+  set sourcein(value: string | undefined);
+  set sourceout(value: string | undefined);
 
   /**
    * @domAttribute "duration"
    */
   get durationMs(): number;
 
+  get explicitDurationMs(): number | undefined;
+
+  get intrinsicDurationMs(): number | undefined;
+
   /**
    * The start time of the element within its root timegroup in milliseconds.
    *
@@ -338,109 +344,85 @@ export const EFTemporal = <T extends Constructor<LitElement>>(
       }
     }
 
-    private _trimStartMs = 0;
     @property({
       type: Number,
       attribute: "trimstart",
       converter: durationConverter,
     })
-    public get trimStartMs(): number {
-      return this._trimStartMs;
-    }
-    public set trimStartMs(value: number) {
-      if (this._trimStartMs === value) {
-        return;
+    _trimStartMs: number | undefined = undefined;
+
+    get trimStartMs() {
+      if (this._trimStartMs === undefined) {
+        return undefined;
       }
-      this._trimStartMs = value;
-      this.setAttribute(
-        "trimstart",
-        durationConverter.toAttribute(value / 1000),
+      return Math.min(
+        Math.max(this._trimStartMs, 0),
+        this.intrinsicDurationMs ?? 0,
       );
     }
-    set trimstart(value: string | undefined) {
-      if (value !== undefined) {
-        this.setAttribute("trimstart", value);
-      } else {
-        this.removeAttribute("trimstart");
-      }
+
+    set trimStartMs(value: number | undefined) {
+      this._trimStartMs = value;
     }
 
-    private _trimEndMs = 0;
     @property({
       type: Number,
       attribute: "trimend",
       converter: durationConverter,
     })
-    public get trimEndMs(): number {
-      return this._trimEndMs;
-    }
-    public set trimEndMs(value: number) {
-      if (this._trimEndMs === value) {
-        return;
+    _trimEndMs: number | undefined = undefined;
+
+    get trimEndMs() {
+      if (this._trimEndMs === undefined) {
+        return undefined;
       }
-      this._trimEndMs = value;
-      this.setAttribute("trimend", durationConverter.toAttribute(value / 1000));
+      return Math.min(this._trimEndMs, this.intrinsicDurationMs ?? 0);
     }
-    set trimend(value: string | undefined) {
-      if (value !== undefined) {
-        this.setAttribute("trimend", value);
-      } else {
-        this.removeAttribute("trimend");
-      }
+
+    set trimEndMs(value: number | undefined) {
+      this._trimEndMs = value;
     }
 
-    private _sourceInMs: number | undefined;
     @property({
       type: Number,
       attribute: "sourcein",
       converter: durationConverter,
-      reflect: true,
     })
-    get sourceInMs(): number | undefined {
-      return this._sourceInMs;
+    _sourceInMs: number | undefined = undefined;
+
+    get sourceInMs() {
+      if (this._sourceInMs === undefined) {
+        return undefined;
+      }
+      return Math.max(this._sourceInMs, 0);
     }
+
     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;
+    _sourceOutMs: number | undefined = undefined;
+
+    get sourceOutMs() {
+      if (this._sourceOutMs === undefined) {
+        return undefined;
+      }
+      if (
+        this.intrinsicDurationMs &&
+        this._sourceOutMs > this.intrinsicDurationMs
+      ) {
+        return this.intrinsicDurationMs;
+      }
+      return Math.max(this._sourceOutMs, 0);
     }
+
     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({
@@ -469,28 +451,51 @@ export const EFTemporal = <T extends Constructor<LitElement>>(
       return this._durationMs !== undefined;
     }
 
+    get explicitDurationMs() {
+      if (this.hasExplicitDuration) {
+        return this._durationMs;
+      }
+      return undefined;
+    }
+
     get hasOwnDuration() {
       return false;
     }
 
-    // Defining this as a getter to a private property allows us to
-    // override it classes that include this mixin.
+    get intrinsicDurationMs() {
+      return undefined;
+    }
+
     get durationMs() {
-      if (this.sourceInMs) {
-        return (
-          this._durationMs ||
-          this.parentTimegroup?.durationMs ||
-          0 - this.sourceInMs
-        );
+      if (this.intrinsicDurationMs === undefined) {
+        return this._durationMs || this.parentTimegroup?.durationMs || 0;
       }
-      if (this.sourceOutMs) {
-        return (
-          this._durationMs ||
-          this.parentTimegroup?.durationMs ||
-          0 - this.sourceOutMs
-        );
+
+      if (this.trimStartMs || this.trimEndMs) {
+        const trimmedDurationMs =
+          this.intrinsicDurationMs -
+          (this.trimStartMs ?? 0) -
+          (this.trimEndMs ?? 0);
+        if (trimmedDurationMs < 0) {
+          return 0;
+        }
+        return trimmedDurationMs;
+      }
+
+      if (this.sourceInMs || this.sourceOutMs) {
+        const sourceInMs = this.sourceInMs ?? 0;
+        const sourceOutMs = this.sourceOutMs ?? this.intrinsicDurationMs;
+        if (sourceInMs >= sourceOutMs) {
+          return 0;
+        }
+        return sourceOutMs - sourceInMs;
       }
-      return this._durationMs || this.parentTimegroup?.durationMs || 0;
+
+      return this.intrinsicDurationMs;
+    }
+
+    get sourceStartMs() {
+      return this.trimStartMs ?? this.sourceInMs ?? 0;
     }
 
     get offsetMs() {
@@ -586,33 +591,8 @@ export const EFTemporal = <T extends Constructor<LitElement>>(
      * for mapping to internal media time codes for audio/video elements.
      */
     get currentSourceTimeMs() {
-      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,
-            this.rootTimegroup.currentTimeMs -
-              this.startTimeMs +
-              this.trimStartMs,
-          ),
-          this.durationMs + Math.abs(this.startOffsetMs) + this.trimStartMs,
-        );
-      }
-      return 0;
+      const leadingTrimMs = this.sourceInMs || this.trimStartMs || 0;
+      return this.ownCurrentTimeMs + leadingTrimMs;
     }
 
     frameTask = new Task(this, {

package/src/elements/EFTimegroup.ts

@@ -9,12 +9,12 @@ import { isContextMixin } from "../gui/ContextMixin.js";
 import { deepGetMediaElements } from "./EFMedia.js";
 import {
   EFTemporal,
-  isEFTemporal,
   shallowGetTemporalElements,
   timegroupContext,
 } from "./EFTemporal.js";
 import { TimegroupController } from "./TimegroupController.js";
 import { durationConverter } from "./durationConverter.js";
+import { updateAnimations } from "./updateAnimations.ts";
 
 const log = debug("ef:elements:EFTimegroup");
 
@@ -40,7 +40,8 @@ export class EFTimegroup extends EFTemporal(LitElement) {
       width: 100%;
       height: 100%;
       position: absolute;
-      transform-origin: center center;
+      top: 0;
+      left: 0;
     }
   `;
 
@@ -121,16 +122,9 @@ export class EFTimegroup extends EFTemporal(LitElement) {
       this.wrapWithWorkbench();
     }
 
-    // Create resize observer to handle scaling
-    this.#resizeObserver = new ResizeObserver(() => this.updateScale());
-    if (this.parentElement) {
-      this.#resizeObserver.observe(this.parentElement);
-    }
-    this.updateScale();
-
-    // Initialize animations when component is first connected
-    // Regrettably, this doesn't work without the requestAnimationFrame
-    requestAnimationFrame(() => this.updateAnimations());
+    requestAnimationFrame(() => {
+      this.updateAnimations();
+    });
   }
 
   disconnectedCallback() {
@@ -138,53 +132,6 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     this.#resizeObserver?.disconnect();
   }
 
-  private get displayedParent(): Element | null {
-    let displayedParent = this.parentElement;
-    while (
-      displayedParent &&
-      getComputedStyle(displayedParent).display === "contents"
-    ) {
-      displayedParent = displayedParent.parentElement;
-    }
-    return displayedParent;
-  }
-
-  private updateScale() {
-    if (this.fit === "none") return;
-
-    const displayedParent = this.displayedParent;
-    if (!displayedParent) return;
-
-    // Get the natural size of the content
-    const contentWidth = this.clientWidth;
-    const contentHeight = this.clientHeight;
-
-    // Get the available space from displayed parent
-    const containerWidth = displayedParent.clientWidth;
-    const containerHeight = displayedParent.clientHeight;
-
-    // Calculate scale ratios
-    const widthRatio = containerWidth / contentWidth;
-    const heightRatio = containerHeight / contentHeight;
-
-    let scale: number;
-    if (this.fit === "contain") {
-      // Use height ratio for contain mode to ensure it fits vertically
-      scale = heightRatio;
-
-      // If width would overflow after scaling, use width ratio instead
-      if (contentWidth * scale > containerWidth) {
-        scale = widthRatio;
-      }
-    } else {
-      // cover
-      scale = Math.max(widthRatio, heightRatio);
-    }
-
-    // Apply transform with fixed center origin
-    this.style.transform = `scale(${scale})`;
-  }
-
   get storageKey() {
     if (!this.id) {
       throw new Error("Timegroup must have an id to use localStorage.");
@@ -192,6 +139,13 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     return `ef-timegroup-${this.id}`;
   }
 
+  get intrinsicDurationMs() {
+    if (this.hasExplicitDuration) {
+      return this.explicitDurationMs;
+    }
+    return undefined;
+  }
+
   get durationMs() {
     switch (this.mode) {
       case "fixed":
@@ -209,7 +163,7 @@ export class EFTimegroup extends EFTemporal(LitElement) {
       case "contain": {
         let maxDuration = 0;
         for (const node of this.childTemporals) {
-          if (node.hasOwnDuration) {
+          if (node.intrinsicDurationMs !== undefined) {
             maxDuration = Math.max(maxDuration, node.durationMs);
           }
         }
@@ -250,75 +204,7 @@ export class EFTimegroup extends EFTemporal(LitElement) {
   }
 
   private updateAnimations() {
-    this.style.setProperty(
-      "--ef-progress",
-      `${Math.max(0, Math.min(1, this.currentTimeMs / this.durationMs)) * 100}%`,
-    );
-    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-timegroup") !== 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;
-      }
-    }
+    updateAnimations(this);
   }
 
   get contextProvider() {
@@ -366,10 +252,6 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     workbench.append(filmstrip);
   }
 
-  get hasOwnDuration() {
-    return true;
-  }
-
   get efElements() {
     return Array.from(
       this.querySelectorAll(

package/src/elements/EFVideo.ts

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