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

package/dist/elements/EFMedia.d.ts

@@ -50,7 +50,7 @@ export declare class EFMedia extends EFMedia_base {
     protected executeSeek(seekToMs: number): Promise<void>;
     protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     get hasOwnDuration(): boolean;
-    get durationMs(): number;
+    get intrinsicDurationMs(): number;
     audioBufferTask: Task<readonly [Record<string, File> | undefined, Record<string, {
         segment: TrackSegment;
         track: MP4Box.TrackInfo;
@@ -68,10 +68,14 @@ export declare class EFMedia extends EFMedia_base {
     set fftDecay(value: number);
     get fftSize(): number;
     get fftDecay(): number;
+    set interpolateFrequencies(value: boolean);
+    get interpolateFrequencies(): boolean;
     get shouldInterpolateFrequencies(): boolean;
     private static readonly DECAY_WEIGHT;
     get FREQ_WEIGHTS(): Float32Array;
-    byteTimeDomainTask: Task<readonly [import('@lit/task').TaskStatus, number, number, number], Uint8Array | null>;
-    frequencyDataTask: Task<readonly [import('@lit/task').TaskStatus, number, number, number], Uint8Array | null>;
+    byteTimeDomainTask: Task<readonly [import('@lit/task').TaskStatus, number, number, number, number, boolean], Uint8Array | null>;
+    frequencyDataTask: Task<readonly [import('@lit/task').TaskStatus, number, number, number, number, boolean], Uint8Array | null>;
+    set fftGain(value: number);
+    get fftGain(): number;
 }
 export {};

package/dist/elements/EFMedia.js

@@ -8,9 +8,10 @@ import { MP4File } from "@editframe/assets/MP4File.js";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 import { EF_RENDERING } from "../EF_RENDERING.js";
 import { EFSourceMixin } from "./EFSourceMixin.js";
-import { EFTemporal, isEFTemporal } from "./EFTemporal.js";
+import { EFTemporal } from "./EFTemporal.js";
 import { FetchMixin } from "./FetchMixin.js";
 import { EFTargetable } from "./TargetController.js";
+import { updateAnimations } from "./updateAnimations.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -254,7 +255,9 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
         this.audioBufferTask.status,
         this.currentSourceTimeMs,
         this.fftSize,
-        this.fftDecay
+        this.fftDecay,
+        this.fftGain,
+        this.shouldInterpolateFrequencies
       ],
       task: async () => {
         await this.audioBufferTask.taskComplete;
@@ -263,7 +266,7 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
         const currentTimeMs = this.currentSourceTimeMs;
         const startOffsetMs = this.audioBufferTask.value.startOffsetMs;
         const audioBuffer = this.audioBufferTask.value.buffer;
-        const smoothedKey = `${this.fftSize}:${this.fftDecay}:${startOffsetMs}:${currentTimeMs}`;
+        const smoothedKey = `${this.shouldInterpolateFrequencies}:${this.fftSize}:${this.fftDecay}:${this.fftGain}:${startOffsetMs}:${currentTimeMs}`;
         const cachedData = this.#byteTimeDomainCache.get(smoothedKey);
         if (cachedData) return cachedData;
         const framesData = await Promise.all(
@@ -273,7 +276,7 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
               0,
               (currentTimeMs - frameOffset - startOffsetMs) / 1e3
             );
-            const cacheKey = `${this.fftSize}:${startOffsetMs}:${startTime}`;
+            const cacheKey = `${this.shouldInterpolateFrequencies}:${this.fftSize}:${this.fftGain}:${startOffsetMs}:${startTime}`;
             const cachedFrame = this.#byteTimeDomainCache.get(cacheKey);
             if (cachedFrame) return cachedFrame;
             const audioContext = new OfflineAudioContext(
@@ -288,7 +291,7 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
             analyser.minDecibels = -90;
             analyser.maxDecibels = -20;
             const gainNode = audioContext.createGain();
-            gainNode.gain.value = 2;
+            gainNode.gain.value = this.fftGain;
             source.connect(gainNode);
             gainNode.connect(analyser);
             analyser.connect(audioContext.destination);
@@ -346,9 +349,9 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
         this.audioBufferTask.status,
         this.currentSourceTimeMs,
         this.fftSize,
-        // Add fftSize to dependency array
-        this.fftDecay
-        // Add fftDecay to dependency array
+        this.fftDecay,
+        this.fftGain,
+        this.shouldInterpolateFrequencies
       ],
       task: async () => {
         await this.audioBufferTask.taskComplete;
@@ -357,7 +360,7 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
         const currentTimeMs = this.currentSourceTimeMs;
         const startOffsetMs = this.audioBufferTask.value.startOffsetMs;
         const audioBuffer = this.audioBufferTask.value.buffer;
-        const smoothedKey = `${this.fftSize}:${this.fftDecay}:${startOffsetMs}:${currentTimeMs}`;
+        const smoothedKey = `${this.shouldInterpolateFrequencies}:${this.fftSize}:${this.fftDecay}:${this.fftGain}:${startOffsetMs}:${currentTimeMs}`;
         const cachedSmoothedData = this.#frequencyDataCache.get(smoothedKey);
         if (cachedSmoothedData) {
           return cachedSmoothedData;
@@ -369,7 +372,7 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
               0,
               (currentTimeMs - frameOffset - startOffsetMs) / 1e3
             );
-            const cacheKey = `${this.fftSize}:${startOffsetMs}:${startTime}`;
+            const cacheKey = `${this.shouldInterpolateFrequencies}:${this.fftSize}:${this.fftGain}:${startOffsetMs}:${startTime}`;
             const cachedFrame = this.#frequencyDataCache.get(cacheKey);
             if (cachedFrame) {
               return cachedFrame;
@@ -384,7 +387,7 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
             analyser.minDecibels = -90;
             analyser.maxDecibels = -10;
             const gainNode = audioContext.createGain();
-            gainNode.gain.value = 3;
+            gainNode.gain.value = this.fftGain;
             const filter = audioContext.createBiquadFilter();
             filter.type = "bandpass";
             filter.frequency.value = 15e3;
@@ -488,71 +491,13 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
       this.executeSeek(this.currentSourceTimeMs);
     }
     if (changedProperties.has("currentTime") || changedProperties.has("ownCurrentTimeMs")) {
-      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-video, ef-audio") !== 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 hasOwnDuration() {
     return true;
   }
-  get durationMs() {
+  get intrinsicDurationMs() {
     if (!this.trackFragmentIndexLoader.value) {
       return 0;
     }
@@ -564,30 +509,18 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
     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;
+    return Math.max(...durations);
   }
   #audioContext;
   async fetchAudioSpanningTime(fromMs, toMs) {
     if (this.sourceInMs) {
-      fromMs -= this.startTimeMs - this.trimStartMs - this.sourceInMs;
+      fromMs -= this.startTimeMs - (this.trimStartMs ?? 0) - (this.sourceInMs ?? 0);
     }
     if (this.sourceOutMs) {
-      toMs -= this.startTimeMs - this.trimStartMs - this.sourceOutMs;
+      toMs -= this.startTimeMs - (this.trimStartMs ?? 0) - (this.sourceOutMs ?? 0);
     }
-    fromMs -= this.startTimeMs - this.trimStartMs;
-    toMs -= this.startTimeMs - this.trimStartMs;
+    fromMs -= this.startTimeMs - (this.trimStartMs ?? 0);
+    toMs -= this.startTimeMs - (this.trimStartMs ?? 0);
     await this.trackFragmentIndexLoader.taskComplete;
     const audioTrackId = this.defaultAudioTrackId;
     if (!audioTrackId) {
@@ -641,8 +574,8 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
     });
     return {
       blob: audioBlob,
-      startMs: firstFragment.dts / audioTrackIndex.timescale * 1e3 - this.trimStartMs,
-      endMs: lastFragment.dts / audioTrackIndex.timescale * 1e3 + lastFragment.duration / audioTrackIndex.timescale * 1e3 - this.trimEndMs
+      startMs: firstFragment.dts / audioTrackIndex.timescale * 1e3 - (this.trimStartMs ?? 0),
+      endMs: lastFragment.dts / audioTrackIndex.timescale * 1e3 + lastFragment.duration / audioTrackIndex.timescale * 1e3 - (this.trimEndMs ?? 0)
     };
   }
   set fftSize(value) {
@@ -661,6 +594,14 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
   get fftDecay() {
     return Number.parseInt(this.getAttribute("fft-decay") ?? "8", 10);
   }
+  set interpolateFrequencies(value) {
+    const oldValue = this.interpolateFrequencies;
+    this.setAttribute("interpolate-frequencies", String(value));
+    this.requestUpdate("interpolate-frequencies", oldValue);
+  }
+  get interpolateFrequencies() {
+    return this.getAttribute("interpolate-frequencies") !== "false";
+  }
   get shouldInterpolateFrequencies() {
     if (this.hasAttribute("interpolate-frequencies")) {
       return this.getAttribute("interpolate-frequencies") !== "false";
@@ -690,6 +631,14 @@ const _EFMedia = class _EFMedia2 extends EFTargetable(
   }
   #byteTimeDomainCache;
   #frequencyDataCache;
+  set fftGain(value) {
+    const oldValue = this.fftGain;
+    this.setAttribute("fft-gain", String(value));
+    this.requestUpdate("fft-gain", oldValue);
+  }
+  get fftGain() {
+    return Number.parseFloat(this.getAttribute("fft-gain") ?? "3.0");
+  }
 };
 __decorateClass([
   property({ type: Number })

package/dist/elements/EFTemporal.browsertest.d.ts

@@ -1,10 +1,11 @@
 import { LitElement } from 'lit';
-declare const TestTemporal_base: (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & typeof LitElement;
-declare class TestTemporal extends TestTemporal_base {
+declare const TenSeconds_base: (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & typeof LitElement;
+declare class TenSeconds extends TenSeconds_base {
+    get intrinsicDurationMs(): number;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        "test-temporal": TestTemporal;
+        "ten-seconds": TenSeconds;
     }
 }
 export {};

package/dist/elements/EFTemporal.d.ts

@@ -10,6 +10,7 @@ export declare class TemporalMixinInterface {
      * Whether the element has a duration set as an attribute.
      */
     get hasExplicitDuration(): boolean;
+    get sourceStartMs(): number;
     /**
      * Used to trim the start of the media.
      *
@@ -19,7 +20,7 @@ export declare class TemporalMixinInterface {
      *
      * @domAttribute "trimstart"
      */
-    get trimStartMs(): number;
+    get trimStartMs(): number | undefined;
     /**
      * Used to trim the end of the media.
      *
@@ -30,10 +31,10 @@ export declare class TemporalMixinInterface {
      * @domAttribute "trimend"
      */
     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.
      *
@@ -53,7 +54,7 @@ export declare class TemporalMixinInterface {
      *
      * @domAttribute "sourcein"
      */
-    get sourceInMs(): number;
+    get sourceInMs(): number | undefined;
     /**
      * The source out time of the element.
      *
@@ -75,15 +76,17 @@ export declare class TemporalMixinInterface {
      *
      * @domAttribute "sourceout"
      */
-    get sourceOutMs(): number;
-    set sourceInMs(value: number);
-    set sourceOutMs(value: number);
-    set sourcein(value: string);
-    set sourceout(value: string);
+    get sourceOutMs(): number | undefined;
+    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.
      *

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

@@ -18,6 +18,7 @@ export declare class EFTimegroup extends EFTimegroup_base {
     connectedCallback(): void;
     disconnectedCallback(): void;
     get storageKey(): string;
+    get intrinsicDurationMs(): number | undefined;
     get durationMs(): number;
     /**
      * Wait for all media elements to load their initial segments.
@@ -41,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>;