@editframe/elements 0.14.0-beta.3 → 0.15.0-beta.1

package/dist/elements/EFImage.d.ts

@@ -1,6 +1,6 @@
 import { Task } from '@lit/task';
 import { LitElement } from 'lit';
-declare const EFImage_base: (new (...args: any[]) => import('./EFSourceMixin.js').EFSourceMixinInterface) & (new (...args: any[]) => import('./FetchMixin.js').FetchMixinInterface) & typeof LitElement;
+declare const EFImage_base: (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & (new (...args: any[]) => import('./EFSourceMixin.js').EFSourceMixinInterface) & (new (...args: any[]) => import('./FetchMixin.js').FetchMixinInterface) & typeof LitElement;
 export declare class EFImage extends EFImage_base {
     #private;
     static styles: import('lit').CSSResult[];
@@ -10,6 +10,7 @@ export declare class EFImage extends EFImage_base {
     get assetId(): string | null;
     render(): import('lit-html').TemplateResult<1>;
     assetPath(): string;
+    get hasOwnDuration(): boolean;
     fetchImage: Task<readonly [string, typeof fetch], void>;
     frameTask: Task<readonly [import('@lit/task').TaskStatus], void>;
 }

package/dist/elements/EFImage.js

@@ -5,6 +5,7 @@ import { createRef, ref } from "lit/directives/ref.js";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 import { EF_RENDERING } from "../EF_RENDERING.js";
 import { EFSourceMixin } from "./EFSourceMixin.js";
+import { EFTemporal } from "./EFTemporal.js";
 import { FetchMixin } from "./FetchMixin.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -24,9 +25,11 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
 var _assetId;
-let EFImage = class extends EFSourceMixin(FetchMixin(LitElement), {
-  assetType: "image_files"
-}) {
+let EFImage = class extends EFTemporal(
+  EFSourceMixin(FetchMixin(LitElement), {
+    assetType: "image_files"
+  })
+) {
   constructor() {
     super(...arguments);
     this.imageRef = createRef();
@@ -76,6 +79,9 @@ let EFImage = class extends EFSourceMixin(FetchMixin(LitElement), {
     }
     return `/@ef-image/${this.src}`;
   }
+  get hasOwnDuration() {
+    return this.hasExplicitDuration;
+  }
 };
 _assetId = /* @__PURE__ */ new WeakMap();
 EFImage.styles = [

package/dist/elements/EFMedia.d.ts

@@ -64,5 +64,12 @@ export declare class EFMedia extends EFMedia_base {
         startMs: number;
         endMs: number;
     } | undefined>;
+    fftSize: number;
+    fftDecay: number;
+    private static readonly MIN_DB;
+    private static readonly MAX_DB;
+    private static readonly DECAY_WEIGHT;
+    get FREQ_WEIGHTS(): Float32Array;
+    frequencyDataTask: Task<readonly [import('@lit/task').TaskStatus, number], Uint8Array | null>;
 }
 export {};

package/dist/elements/EFMedia.js

@@ -21,6 +21,31 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 const log = debug("ef:elements:EFMedia");
+const freqWeightsCache = /* @__PURE__ */ new Map();
+class LRUCache {
+  constructor(maxSize) {
+    this.cache = /* @__PURE__ */ new Map();
+    this.maxSize = maxSize;
+  }
+  get(key) {
+    const value = this.cache.get(key);
+    if (value) {
+      this.cache.delete(key);
+      this.cache.set(key, value);
+    }
+    return value;
+  }
+  set(key, value) {
+    if (this.cache.has(key)) {
+      this.cache.delete(key);
+    } else if (this.cache.size >= this.maxSize) {
+      const firstKey = this.cache.keys().next().value;
+      this.cache.delete(firstKey);
+    }
+    this.cache.set(key, value);
+  }
+}
+const frequencyDataCache = new LRUCache(100);
 const deepGetMediaElements = (element, medias = []) => {
   for (const child of Array.from(element.children)) {
     if (child instanceof EFMedia) {
@@ -31,7 +56,7 @@ const deepGetMediaElements = (element, medias = []) => {
   }
   return medias;
 };
-class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
+const _EFMedia = class _EFMedia2 extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
   assetType: "isobmff_files"
 }) {
   constructor() {
@@ -213,6 +238,75 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
         };
       }
     });
+    this.fftSize = 512;
+    this.fftDecay = 8;
+    this.frequencyDataTask = new Task(this, {
+      autoRun: EF_INTERACTIVE,
+      args: () => [this.audioBufferTask.status, this.trimAdjustedOwnCurrentTimeMs],
+      task: async () => {
+        await this.audioBufferTask.taskComplete;
+        if (!this.audioBufferTask.value) return null;
+        if (this.trimAdjustedOwnCurrentTimeMs <= 0) return null;
+        const currentTimeMs = this.trimAdjustedOwnCurrentTimeMs;
+        const startOffsetMs = this.audioBufferTask.value.startOffsetMs;
+        const audioBuffer = this.audioBufferTask.value.buffer;
+        const framesData = await Promise.all(
+          Array.from({ length: this.fftDecay }, async (_, i) => {
+            const frameOffset = i * (1e3 / 30);
+            const startTime = Math.max(
+              0,
+              (currentTimeMs - frameOffset - startOffsetMs) / 1e3
+            );
+            const cacheKey = `${startOffsetMs},${startTime}`;
+            const cachedFrame = frequencyDataCache.get(cacheKey);
+            if (cachedFrame) {
+              return cachedFrame;
+            }
+            const audioContext = new OfflineAudioContext(
+              2,
+              48e3 * (1 / 30),
+              48e3
+            );
+            const analyser = audioContext.createAnalyser();
+            analyser.fftSize = this.fftSize;
+            analyser.minDecibels = _EFMedia2.MIN_DB;
+            analyser.maxDecibels = _EFMedia2.MAX_DB;
+            const audioBufferSource = audioContext.createBufferSource();
+            audioBufferSource.buffer = audioBuffer;
+            audioBufferSource.connect(analyser);
+            analyser.connect(audioContext.destination);
+            audioBufferSource.start(0, startTime, 1 / 30);
+            try {
+              await audioContext.startRendering();
+              const frameData = new Uint8Array(analyser.frequencyBinCount);
+              analyser.getByteFrequencyData(frameData);
+              frequencyDataCache.set(cacheKey, frameData);
+              return frameData;
+            } finally {
+              audioBufferSource.disconnect();
+              analyser.disconnect();
+            }
+          })
+        );
+        const frameLength = framesData[0]?.length ?? 0;
+        const smoothedData = new Uint8Array(frameLength);
+        for (let i = 0; i < frameLength; i++) {
+          let weightedSum = 0;
+          let weightSum = 0;
+          framesData.forEach((frame, frameIndex) => {
+            const decayWeight = _EFMedia2.DECAY_WEIGHT ** frameIndex;
+            weightedSum += frame[i] * decayWeight;
+            weightSum += decayWeight;
+          });
+          smoothedData[i] = Math.min(255, Math.round(weightedSum / weightSum));
+        }
+        smoothedData.forEach((value, i) => {
+          const freqWeight = this.FREQ_WEIGHTS[i];
+          smoothedData[i] = Math.min(255, Math.round(value * freqWeight));
+        });
+        return smoothedData;
+      }
+    });
   }
   static {
     this.styles = [
@@ -425,16 +519,50 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
       endMs: lastFragment.dts / audioTrackIndex.timescale * 1e3 + lastFragment.duration / audioTrackIndex.timescale * 1e3 - this.trimEndMs
     };
   }
-}
+  static {
+    this.MIN_DB = -90;
+  }
+  static {
+    this.MAX_DB = -20;
+  }
+  static {
+    this.DECAY_WEIGHT = 0.7;
+  }
+  // Update FREQ_WEIGHTS to use the instance fftSize instead of a static value
+  get FREQ_WEIGHTS() {
+    if (freqWeightsCache.has(this.fftSize)) {
+      return freqWeightsCache.get(this.fftSize);
+    }
+    const weights = new Float32Array(this.fftSize / 2).map((_, i) => {
+      const frequency = i * 48e3 / this.fftSize;
+      if (frequency < 60) return 0.3;
+      if (frequency < 250) return 0.4;
+      if (frequency < 500) return 0.6;
+      if (frequency < 2e3) return 0.8;
+      if (frequency < 4e3) return 1.2;
+      if (frequency < 8e3) return 1.6;
+      return 2;
+    });
+    freqWeightsCache.set(this.fftSize, weights);
+    return weights;
+  }
+};
 __decorateClass([
   property({ type: Number })
-], EFMedia.prototype, "currentTimeMs", 2);
+], _EFMedia.prototype, "currentTimeMs", 2);
 __decorateClass([
   property({ type: String, attribute: "asset-id", reflect: true })
-], EFMedia.prototype, "assetId", 1);
+], _EFMedia.prototype, "assetId", 1);
 __decorateClass([
   state()
-], EFMedia.prototype, "desiredSeekTimeMs", 2);
+], _EFMedia.prototype, "desiredSeekTimeMs", 2);
+__decorateClass([
+  property({ type: Number })
+], _EFMedia.prototype, "fftSize", 2);
+__decorateClass([
+  property({ type: Number })
+], _EFMedia.prototype, "fftDecay", 2);
+let EFMedia = _EFMedia;
 export {
   EFMedia,
   deepGetMediaElements

package/dist/elements/EFTemporal.d.ts

@@ -6,6 +6,10 @@ export declare const timegroupContext: {
 };
 export declare class TemporalMixinInterface {
     get hasOwnDuration(): boolean;
+    /**
+     * Whether the element has a duration set as an attribute.
+     */
+    get hasExplicitDuration(): boolean;
     /**
      * Used to trim the start of the media.
      *

package/dist/elements/EFTemporal.js

@@ -198,6 +198,9 @@ const EFTemporal = (superClass) => {
       }
       return parent;
     }
+    get hasExplicitDuration() {
+      return this._durationMs !== void 0;
+    }
     get hasOwnDuration() {
       return false;
     }
@@ -309,6 +312,17 @@ const EFTemporal = (superClass) => {
       }
       return 0;
     }
+    updated(changedProperties) {
+      super.updated(changedProperties);
+      if (changedProperties.has("currentTime") || changedProperties.has("ownCurrentTimeMs")) {
+        const timelineTimeMs = (this.rootTimegroup ?? this).ownCurrentTimeMs;
+        if (this.startTimeMs >= timelineTimeMs || this.endTimeMs <= timelineTimeMs) {
+          this.style.display = "none";
+          return;
+        }
+        this.style.display = "";
+      }
+    }
   }
   __decorateClass([
     consume({ context: timegroupContext, subscribe: true }),

package/dist/elements/EFTimegroup.js

@@ -378,7 +378,7 @@ EFTimegroup.styles = css`
       display: block;
       width: 100%;
       height: 100%;
-      position: relative;
+      position: absolute;
       transform-origin: center center;
     }
   `;

package/dist/elements/EFWaveform.d.ts

@@ -8,12 +8,14 @@ export declare class EFWaveform extends EFWaveform_base {
     static styles: import('lit').CSSResult;
     canvasRef: Ref<HTMLCanvasElement>;
     private ctx;
+    private styleObserver;
     private resizeObserver?;
     private mutationObserver?;
     render(): import('lit-html').TemplateResult<1>;
-    mode: "roundBars" | "bars" | "bricks" | "equalizer" | "curve" | "line" | "pixel" | "wave";
+    mode: "roundBars" | "bars" | "bricks" | "line" | "pixel" | "wave";
     color: string;
     targetSelector: string;
+    lineWidth: number;
     set target(value: string);
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -21,15 +23,14 @@ export declare class EFWaveform extends EFWaveform_base {
     protected initCanvas(): CanvasRenderingContext2D | null;
     protected drawBars(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
     protected drawBricks(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
-    protected drawLine(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
     protected drawRoundBars(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
     protected drawEqualizer(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
-    protected drawCurve(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
+    protected drawLine(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
     protected drawPixel(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
     protected drawWave(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
-    frameTask: Task<readonly [import('@lit/task').TaskStatus], void>;
+    frameTask: Task<readonly [import('@lit/task').TaskStatus | undefined], void>;
     get durationMs(): number;
-    get targetElement(): EFAudio | EFVideo;
+    get targetElement(): EFAudio | EFVideo | null;
     protected updated(changedProperties: PropertyValueMap<this>): void;
 }
 export {};