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

package/dist/elements/EFTemporal.js

@@ -76,8 +76,10 @@ const EFTemporal = (superClass) => {
     constructor() {
       super(...arguments);
       this._offsetMs = 0;
-      this._trimStartMs = 0;
-      this._trimEndMs = 0;
+      this._trimStartMs = void 0;
+      this._trimEndMs = void 0;
+      this._sourceInMs = void 0;
+      this._sourceOutMs = void 0;
       this._startOffsetMs = 0;
       this.rootTimegroup = this.getRootTimegroup();
       this.frameTask = new Task(this, {
@@ -118,75 +120,46 @@ const EFTemporal = (superClass) => {
       }
     }
     get trimStartMs() {
-      return this._trimStartMs;
-    }
-    set trimStartMs(value) {
-      if (this._trimStartMs === value) {
-        return;
+      if (this._trimStartMs === void 0) {
+        return void 0;
       }
-      this._trimStartMs = value;
-      this.setAttribute(
-        "trimstart",
-        durationConverter.toAttribute(value / 1e3)
+      return Math.min(
+        Math.max(this._trimStartMs, 0),
+        this.intrinsicDurationMs ?? 0
       );
     }
-    set trimstart(value) {
-      if (value !== void 0) {
-        this.setAttribute("trimstart", value);
-      } else {
-        this.removeAttribute("trimstart");
-      }
+    set trimStartMs(value) {
+      this._trimStartMs = value;
     }
     get trimEndMs() {
-      return this._trimEndMs;
+      if (this._trimEndMs === void 0) {
+        return void 0;
+      }
+      return Math.min(this._trimEndMs, this.intrinsicDurationMs ?? 0);
     }
     set trimEndMs(value) {
-      if (this._trimEndMs === value) {
-        return;
-      }
       this._trimEndMs = value;
-      this.setAttribute("trimend", durationConverter.toAttribute(value / 1e3));
-    }
-    set trimend(value) {
-      if (value !== void 0) {
-        this.setAttribute("trimend", value);
-      } else {
-        this.removeAttribute("trimend");
-      }
     }
     get sourceInMs() {
-      return this._sourceInMs;
+      if (this._sourceInMs === void 0) {
+        return void 0;
+      }
+      return Math.max(this._sourceInMs, 0);
     }
     set sourceInMs(value) {
       this._sourceInMs = value;
-      value !== void 0 ? this.setAttribute(
-        "sourcein",
-        durationConverter.toAttribute(value / 1e3)
-      ) : this.removeAttribute("sourcein");
-    }
-    set sourcein(value) {
-      if (value !== void 0) {
-        this.setAttribute("sourcein", value);
-      } else {
-        this.removeAttribute("sourcein");
-      }
     }
     get sourceOutMs() {
-      return this._sourceOutMs;
+      if (this._sourceOutMs === void 0) {
+        return void 0;
+      }
+      if (this.intrinsicDurationMs && this._sourceOutMs > this.intrinsicDurationMs) {
+        return this.intrinsicDurationMs;
+      }
+      return Math.max(this._sourceOutMs, 0);
     }
     set sourceOutMs(value) {
       this._sourceOutMs = value;
-      value !== void 0 ? this.setAttribute(
-        "sourceout",
-        durationConverter.toAttribute(value / 1e3)
-      ) : this.removeAttribute("sourceout");
-    }
-    set sourceout(value) {
-      if (value !== void 0) {
-        this.setAttribute("sourceout", value);
-      } else {
-        this.removeAttribute("sourceout");
-      }
     }
     get startOffsetMs() {
       return this._startOffsetMs;
@@ -201,19 +174,41 @@ const EFTemporal = (superClass) => {
     get hasExplicitDuration() {
       return this._durationMs !== void 0;
     }
+    get explicitDurationMs() {
+      if (this.hasExplicitDuration) {
+        return this._durationMs;
+      }
+      return void 0;
+    }
     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 void 0;
+    }
     get durationMs() {
-      if (this.sourceInMs) {
-        return this._durationMs || this.parentTimegroup?.durationMs || 0 - this.sourceInMs;
+      if (this.intrinsicDurationMs === void 0) {
+        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() {
       return this._offsetMs || 0;
@@ -296,25 +291,8 @@ const EFTemporal = (superClass) => {
      * 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;
     }
     updated(changedProperties) {
       super.updated(changedProperties);
@@ -352,30 +330,28 @@ const EFTemporal = (superClass) => {
       attribute: "trimstart",
       converter: durationConverter
     })
-  ], TemporalMixinClass.prototype, "trimStartMs", 1);
+  ], TemporalMixinClass.prototype, "_trimStartMs", 2);
   __decorateClass([
     property({
       type: Number,
       attribute: "trimend",
       converter: durationConverter
     })
-  ], TemporalMixinClass.prototype, "trimEndMs", 1);
+  ], TemporalMixinClass.prototype, "_trimEndMs", 2);
   __decorateClass([
     property({
       type: Number,
       attribute: "sourcein",
-      converter: durationConverter,
-      reflect: true
+      converter: durationConverter
     })
-  ], TemporalMixinClass.prototype, "sourceInMs", 1);
+  ], TemporalMixinClass.prototype, "_sourceInMs", 2);
   __decorateClass([
     property({
       type: Number,
       attribute: "sourceout",
-      converter: durationConverter,
-      reflect: true
+      converter: durationConverter
     })
-  ], TemporalMixinClass.prototype, "sourceOutMs", 1);
+  ], TemporalMixinClass.prototype, "_sourceOutMs", 2);
   __decorateClass([
     property({
       type: Number,

package/dist/elements/EFTimegroup.d.ts

@@ -17,9 +17,8 @@ export declare class EFTimegroup extends EFTimegroup_base {
     maybeLoadTimeFromLocalStorage(): number;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    private get displayedParent();
-    private updateScale;
     get storageKey(): string;
+    get intrinsicDurationMs(): number | undefined;
     get durationMs(): number;
     /**
      * Wait for all media elements to load their initial segments.
@@ -27,7 +26,7 @@ export declare class EFTimegroup extends EFTimegroup_base {
      * that caused issues with constructing audio data. We had negative durations
      * in calculations and it was not clear why.
      */
-    waitForMediaDurations(): Promise<Record<number, import('../../../assets/src/index.ts').TrackFragmentIndex>[]>;
+    waitForMediaDurations(): Promise<(Record<number, import('../../../assets/src/index.ts').TrackFragmentIndex> | undefined)[]>;
     get childTemporals(): import('./EFTemporal.js').TemporalMixinInterface[];
     protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     private updateAnimations;
@@ -43,7 +42,6 @@ export declare class EFTimegroup extends EFTimegroup_base {
      */
     shouldWrapWithWorkbench(): boolean;
     wrapWithWorkbench(): void;
-    get hasOwnDuration(): boolean;
     get efElements(): Element[];
     renderAudio(fromMs: number, toMs: number): Promise<AudioBuffer>;
     loadMd5Sums(): Promise<void>;

package/dist/elements/EFTimegroup.js

@@ -6,9 +6,10 @@ import { property, customElement } from "lit/decorators.js";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 import { isContextMixin } from "../gui/ContextMixin.js";
 import { deepGetMediaElements } from "./EFMedia.js";
-import { EFTemporal, shallowGetTemporalElements, isEFTemporal, timegroupContext } from "./EFTemporal.js";
+import { EFTemporal, shallowGetTemporalElements, timegroupContext } from "./EFTemporal.js";
 import { TimegroupController } from "./TimegroupController.js";
 import { durationConverter } from "./durationConverter.js";
+import { updateAnimations } from "./updateAnimations.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __typeError = (msg) => {
@@ -107,51 +108,26 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
     if (this.shouldWrapWithWorkbench()) {
       this.wrapWithWorkbench();
     }
-    __privateSet(this, _resizeObserver, new ResizeObserver(() => this.updateScale()));
-    if (this.parentElement) {
-      __privateGet(this, _resizeObserver).observe(this.parentElement);
-    }
-    this.updateScale();
-    requestAnimationFrame(() => this.updateAnimations());
+    requestAnimationFrame(() => {
+      this.updateAnimations();
+    });
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     __privateGet(this, _resizeObserver)?.disconnect();
   }
-  get displayedParent() {
-    let displayedParent = this.parentElement;
-    while (displayedParent && getComputedStyle(displayedParent).display === "contents") {
-      displayedParent = displayedParent.parentElement;
-    }
-    return displayedParent;
-  }
-  updateScale() {
-    if (this.fit === "none") return;
-    const displayedParent = this.displayedParent;
-    if (!displayedParent) return;
-    const contentWidth = this.clientWidth;
-    const contentHeight = this.clientHeight;
-    const containerWidth = displayedParent.clientWidth;
-    const containerHeight = displayedParent.clientHeight;
-    const widthRatio = containerWidth / contentWidth;
-    const heightRatio = containerHeight / contentHeight;
-    let scale;
-    if (this.fit === "contain") {
-      scale = heightRatio;
-      if (contentWidth * scale > containerWidth) {
-        scale = widthRatio;
-      }
-    } else {
-      scale = Math.max(widthRatio, heightRatio);
-    }
-    this.style.transform = `scale(${scale})`;
-  }
   get storageKey() {
     if (!this.id) {
       throw new Error("Timegroup must have an id to use localStorage.");
     }
     return `ef-timegroup-${this.id}`;
   }
+  get intrinsicDurationMs() {
+    if (this.hasExplicitDuration) {
+      return this.explicitDurationMs;
+    }
+    return void 0;
+  }
   get durationMs() {
     switch (this.mode) {
       case "fixed":
@@ -169,7 +145,7 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
       case "contain": {
         let maxDuration = 0;
         for (const node of this.childTemporals) {
-          if (node.hasOwnDuration) {
+          if (node.intrinsicDurationMs !== void 0) {
             maxDuration = Math.max(maxDuration, node.durationMs);
           }
         }
@@ -201,69 +177,7 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
     }
   }
   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;
-      if (!target) {
-        return;
-      }
-      if (target.closest("ef-timegroup") !== this) {
-        return;
-      }
-      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() {
     let parent = this.parentNode;
@@ -300,9 +214,6 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
     filmstrip.setAttribute("target", this.id);
     workbench.append(filmstrip);
   }
-  get hasOwnDuration() {
-    return true;
-  }
   get efElements() {
     return Array.from(
       this.querySelectorAll(
@@ -378,7 +289,8 @@ EFTimegroup.styles = css`
       width: 100%;
       height: 100%;
       position: absolute;
-      transform-origin: center center;
+      top: 0;
+      left: 0;
     }
   `;
 __decorateClass([

package/dist/elements/EFVideo.js

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

package/dist/elements/EFWaveform.d.ts

@@ -16,6 +16,7 @@ export declare class EFWaveform extends EFWaveform_base {
     mode: "roundBars" | "bars" | "bricks" | "line" | "curve" | "pixel" | "wave" | "spikes";
     color: string;
     target: string;
+    barSpacing: number;
     targetElement: EFAudio | EFVideo | null;
     lineWidth: number;
     targetController: TargetController;
@@ -26,7 +27,6 @@ export declare class EFWaveform extends EFWaveform_base {
     protected drawBars(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
     protected drawBricks(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
     protected drawRoundBars(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
-    protected drawEqualizer(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
     protected drawLine(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
     protected drawCurve(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
     protected drawPixel(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;

package/dist/elements/EFWaveform.js

@@ -28,6 +28,7 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     this.mode = "bars";
     this.color = "currentColor";
     this.target = "";
+    this.barSpacing = 0.5;
     this.targetElement = null;
     this.lineWidth = 4;
     this.targetController = new TargetController(this);
@@ -152,14 +153,14 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     const waveWidth = canvas.width;
     const waveHeight = canvas.height;
     const totalBars = frequencyData.length;
-    const paddingInner = 0.5;
+    const paddingInner = this.barSpacing;
     const paddingOuter = 0.01;
     const availableWidth = waveWidth;
     const barWidth = availableWidth / (totalBars + (totalBars - 1) * paddingInner);
     ctx.clearRect(0, 0, waveWidth, waveHeight);
     const path = new Path2D();
     frequencyData.forEach((value, i) => {
-      const normalizedValue = Math.min(value / 255 * 2, 1);
+      const normalizedValue = value / 255;
       const barHeight = normalizedValue * waveHeight;
       const y = (waveHeight - barHeight) / 2;
       const x = waveWidth * paddingOuter + i * (barWidth * (1 + paddingInner));
@@ -178,7 +179,7 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     const verticalGap = boxSize * 0.2;
     const maxBricks = Math.floor(waveHeight / (boxSize + verticalGap));
     frequencyData.forEach((value, i) => {
-      const normalizedValue = Math.min(value / 255 * 2, 1);
+      const normalizedValue = value / 255;
       const brickCount = Math.floor(normalizedValue * maxBricks);
       for (let j = 0; j < brickCount; j++) {
         const x = columnWidth * i;
@@ -193,14 +194,14 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     const waveWidth = canvas.width;
     const waveHeight = canvas.height;
     const totalBars = frequencyData.length;
-    const paddingInner = 0.5;
+    const paddingInner = this.barSpacing;
     const paddingOuter = 0.01;
     const availableWidth = waveWidth;
     const barWidth = availableWidth / (totalBars + (totalBars - 1) * paddingInner);
     ctx.clearRect(0, 0, waveWidth, waveHeight);
     const path = new Path2D();
     frequencyData.forEach((value, i) => {
-      const normalizedValue = Math.min(value / 255 * 2, 1);
+      const normalizedValue = value / 255;
       const height = normalizedValue * waveHeight;
       const x = waveWidth * paddingOuter + i * (barWidth * (1 + paddingInner));
       const y = (waveHeight - height) / 2;
@@ -208,34 +209,13 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     });
     ctx.fill(path);
   }
-  drawEqualizer(ctx, frequencyData) {
-    const canvas = ctx.canvas;
-    const waveWidth = canvas.width;
-    const waveHeight = canvas.height;
-    const baseline = waveHeight / 2;
-    const barWidth = waveWidth / frequencyData.length * 0.8;
-    ctx.clearRect(0, 0, waveWidth, waveHeight);
-    const baselinePath = new Path2D();
-    const barsPath = new Path2D();
-    baselinePath.moveTo(0, baseline);
-    baselinePath.lineTo(waveWidth, baseline);
-    frequencyData.forEach((value, i) => {
-      const height = value / 255 * (waveHeight / 2);
-      const x = i * (waveWidth / frequencyData.length);
-      const y = baseline - height;
-      barsPath.rect(x, y, barWidth, Math.max(height * 2, 1));
-    });
-    ctx.lineWidth = 2;
-    ctx.stroke(baselinePath);
-    ctx.fill(barsPath);
-  }
   drawLine(ctx, frequencyData) {
     const canvas = ctx.canvas;
     const waveWidth = canvas.width;
     const waveHeight = canvas.height;
     ctx.clearRect(0, 0, waveWidth, waveHeight);
     const path = new Path2D();
-    const sampleRate = 4;
+    const sampleRate = 1;
     for (let i = 0; i < frequencyData.length; i += sampleRate) {
       const x = i / frequencyData.length * waveWidth;
       const y = (1 - (frequencyData[i] ?? 0) / 255) * waveHeight;
@@ -282,7 +262,7 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     ctx.clearRect(0, 0, waveWidth, waveHeight);
     const path = new Path2D();
     frequencyData.forEach((value, i) => {
-      const normalizedValue = Math.min(value / 255 * 2, 1);
+      const normalizedValue = value / 255;
       const x = i * (waveWidth / frequencyData.length);
       const barHeight = normalizedValue * (waveHeight / 2);
       const y = baseline - barHeight;
@@ -432,6 +412,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String, reflect: true })
 ], EFWaveform.prototype, "target", 2);
+__decorateClass([
+  property({ type: Number, attribute: "bar-spacing" })
+], EFWaveform.prototype, "barSpacing", 2);
 __decorateClass([
   state()
 ], EFWaveform.prototype, "targetElement", 2);

package/dist/elements/durationConverter.d.ts

@@ -1,16 +1,16 @@
 export declare const durationConverter: {
-    fromAttribute: (value: string) => number;
-    toAttribute: (value: number) => string;
+    fromAttribute: (value: string | null) => number | null;
+    toAttribute: (value: number | null) => string | null;
 };
 export declare const trimDurationConverter: {
-    fromAttribute: (value: string) => number;
-    toAttribute: (value: number) => string;
+    fromAttribute: (value: string | null) => number | null;
+    toAttribute: (value: number | null) => string | null;
 };
 export declare const imageDurationConverter: {
-    fromAttribute: (value: string) => number;
-    toAttribute: (value: number) => string;
+    fromAttribute: (value: string | null) => number | null;
+    toAttribute: (value: number | null) => string | null;
 };
 export declare const sourceDurationConverter: {
-    fromAttribute: (value: string) => number;
-    toAttribute: (value: number) => string;
+    fromAttribute: (value: string | null) => number | null;
+    toAttribute: (value: number | null) => string | null;
 };

package/dist/elements/durationConverter.js

@@ -1,7 +1,7 @@
 import { parseTimeToMs } from "./parseTimeToMs.js";
 const durationConverter = {
-  fromAttribute: (value) => parseTimeToMs(value),
-  toAttribute: (value) => `${value}s`
+  fromAttribute: (value) => value === null ? null : parseTimeToMs(value),
+  toAttribute: (value) => value === null ? null : `${value}s`
 };
 export {
   durationConverter

package/dist/elements/updateAnimations.d.ts

@@ -0,0 +1,9 @@
+import { EFTimegroup } from './EFTimegroup.ts';
+export declare const updateAnimations: (element: HTMLElement & {
+    currentTimeMs: number;
+    durationMs: number;
+    rootTimegroup?: EFTimegroup;
+    parentTimegroup?: EFTimegroup;
+    startTimeMs: number;
+    endTimeMs: number;
+}) => void;

package/dist/elements/updateAnimations.js

@@ -0,0 +1,62 @@
+import { isEFTemporal } from "./EFTemporal.js";
+const updateAnimations = (element) => {
+  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;
+    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;
+    if (currentTime < delay) {
+      animation.currentTime = 0;
+      continue;
+    }
+    const currentIteration = Math.floor((currentTime - delay) / duration);
+    const currentIterationTime = (currentTime - delay) % duration;
+    if (currentIteration >= iterations) {
+      animation.currentTime = duration - 0.01;
+      continue;
+    }
+    animation.currentTime = Math.min(currentIterationTime, duration - 0.01) + delay;
+  }
+};
+export {
+  updateAnimations
+};