@editframe/elements 0.15.0-beta.18 → 0.15.0-beta.19

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,14 +122,6 @@ 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);
-    // }
-
-    // Initialize animations when component is first connected
-    // Regrettably, this doesn't work without the requestAnimationFrame
     requestAnimationFrame(() => {
       this.updateAnimations();
     });
@@ -139,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.");
@@ -193,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":
@@ -210,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);
           }
         }
@@ -251,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() {
@@ -367,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() {

package/src/elements/durationConverter.ts

@@ -1,19 +1,24 @@
 import { parseTimeToMs } from "./parseTimeToMs.js";
 
 export const durationConverter = {
-  fromAttribute: (value: string): number => parseTimeToMs(value),
-  toAttribute: (value: number) => `${value}s`,
+  fromAttribute: (value: string | null) =>
+    value === null ? null : parseTimeToMs(value),
+  toAttribute: (value: number | null) => (value === null ? null : `${value}s`),
 };
 
 const positiveDurationConverter = (error: string) => {
   return {
-    fromAttribute: (value: string): number => {
+    fromAttribute: (value: string | null): number | null => {
+      if (value === null) {
+        return null;
+      }
       if (value.startsWith("-")) {
         throw new Error(error);
       }
       return parseTimeToMs(value);
     },
-    toAttribute: (value: number) => `${value}s`,
+    toAttribute: (value: number | null) =>
+      value === null ? null : `${value}s`,
   };
 };
 

package/src/elements/updateAnimations.ts

@@ -0,0 +1,88 @@
+import { isEFTemporal } from "./EFTemporal.ts";
+import type { EFTimegroup } from "./EFTimegroup.ts";
+
+export const updateAnimations = (
+  element: HTMLElement & {
+    currentTimeMs: number;
+    durationMs: number;
+    rootTimegroup?: EFTimegroup;
+    parentTimegroup?: EFTimegroup;
+    startTimeMs: number;
+    endTimeMs: number;
+  },
+) => {
+  element.style.setProperty(
+    "--ef-progress",
+    `${Math.max(0, Math.min(1, element.currentTimeMs / element.durationMs)) * 100}%`,
+  );
+  const timelineTimeMs = (element.rootTimegroup ?? element).currentTimeMs;
+  if (
+    element.startTimeMs > timelineTimeMs ||
+    element.endTimeMs < timelineTimeMs
+  ) {
+    element.style.display = "none";
+    return;
+  }
+  element.style.display = "";
+  const animations = element.getAnimations({ subtree: true });
+  element.style.setProperty("--ef-duration", `${element.durationMs}ms`);
+  element.style.setProperty(
+    "--ef-transition-duration",
+    `${element.parentTimegroup?.overlapMs ?? 0}ms`,
+  );
+  element.style.setProperty(
+    "--ef-transition-out-start",
+    `${element.durationMs - (element.parentTimegroup?.overlapMs ?? 0)}ms`,
+  );
+
+  for (const animation of animations) {
+    if (animation.playState === "running") {
+      animation.pause();
+    }
+    const effect = animation.effect;
+    if (!(effect && effect instanceof KeyframeEffect)) {
+      continue;
+    }
+    const target = effect.target;
+    // TODO: better generalize work avoidance for temporal elements
+    if (!target) {
+      continue;
+    }
+    if (target.closest("ef-timegroup") !== element) {
+      continue;
+    }
+
+    const timing = effect.getTiming();
+    const duration = Number(timing.duration) ?? 0;
+    const delay = Number(timing.delay) ?? 0;
+    const iterations = Number(timing.iterations) ?? 1;
+
+    const timeTarget = isEFTemporal(target)
+      ? target
+      : target.closest("ef-timegroup");
+    if (!timeTarget) {
+      continue;
+    }
+
+    const currentTime = timeTarget.ownCurrentTimeMs;
+
+    // Handle delay - don't start animation until delay is complete
+    if (currentTime < delay) {
+      animation.currentTime = 0;
+      continue;
+    }
+
+    const currentIteration = Math.floor((currentTime - delay) / duration);
+    const currentIterationTime = (currentTime - delay) % duration;
+
+    if (currentIteration >= iterations) {
+      // Stop just before the end to prevent DOM removal
+      animation.currentTime = duration - 0.01;
+      continue;
+    }
+
+    // Ensure we never reach exactly duration
+    animation.currentTime =
+      Math.min(currentIterationTime, duration - 0.01) + delay;
+  }
+};

package/src/gui/EFFilmstrip.ts

@@ -87,31 +87,22 @@ class FilmstripItem extends TWMixin(LitElement) {
   @property({ type: Number })
   pixelsPerMs = 0.04;
 
+  // Gutter styles represent the entire source media.
+  // If there is no trim, then the gutter and trim portion are the same.
   get gutterStyles() {
-    if (this.element.sourceInMs || this.element.sourceOutMs) {
-      return {
-        position: "relative",
-        left: `${this.pixelsPerMs * (this.element.startTimeWithinParentMs - this.element.trimStartMs - this.element.sourceInMs)}px`,
-        width: `${this.pixelsPerMs * (this.element.durationMs + this.element.trimStartMs + this.element.trimEndMs + this.element.sourceOutMs + this.element.sourceInMs)}px`,
-      };
-    }
     return {
       position: "relative",
-      left: `${this.pixelsPerMs * (this.element.startTimeWithinParentMs - this.element.trimStartMs)}px`,
-      width: `${this.pixelsPerMs * (this.element.durationMs + this.element.trimStartMs + this.element.trimEndMs)}px`,
+      left: `${this.pixelsPerMs * (this.element.startTimeWithinParentMs - this.element.sourceStartMs)}px`,
+      width: `${this.pixelsPerMs * (this.element.intrinsicDurationMs ?? this.element.durationMs)}px`,
     };
   }
 
+  // Trim portion is the section of source that will be placed in the timeline
+  // If there is no trim, then the gutter and trim portion are the same.
   get trimPortionStyles() {
-    if (this.element.sourceInMs || this.element.sourceOutMs) {
-      return {
-        width: `${this.pixelsPerMs * this.element.durationMs}px`,
-        left: `${this.pixelsPerMs * (this.element.trimStartMs + this.element.sourceInMs)}px`,
-      };
-    }
     return {
       width: `${this.pixelsPerMs * this.element.durationMs}px`,
-      left: `${this.pixelsPerMs * this.element.trimStartMs}px`,
+      left: `${this.pixelsPerMs * this.element.sourceStartMs}px`,
     };
   }