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

package/dist/EF_FRAMEGEN.js

@@ -104,8 +104,6 @@ class EfFramegen {
     this.audioBufferPromise = firstGroup.renderAudio(
       renderOptions.encoderOptions.alignedFromUs / 1e3,
       renderOptions.encoderOptions.alignedToUs / 1e3
-      // renderOptions.encoderOptions.fromMs,
-      // renderOptions.encoderOptions.toMs,
     );
     console.log("Initialized");
   }

package/dist/elements/EFAudio.d.ts

@@ -2,7 +2,6 @@ import { Task } from '@lit/task';
 import { EFMedia } from './EFMedia.js';
 export declare class EFAudio extends EFMedia {
     audioElementRef: import('lit-html/directives/ref.js').Ref<HTMLAudioElement>;
-    src: string;
     render(): import('lit-html').TemplateResult<1>;
     get audioElement(): HTMLAudioElement | undefined;
     frameTask: Task<readonly [import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus], void>;

package/dist/elements/EFAudio.js

@@ -1,6 +1,6 @@
 import { Task } from "@lit/task";
 import { html } from "lit";
-import { property, customElement } from "lit/decorators.js";
+import { customElement } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { EFMedia } from "./EFMedia.js";
 var __defProp = Object.defineProperty;
@@ -17,7 +17,6 @@ let EFAudio = class extends EFMedia {
   constructor() {
     super(...arguments);
     this.audioElementRef = createRef();
-    this.src = "";
     this.frameTask = new Task(this, {
       args: () => [
         this.trackFragmentIndexLoader.status,
@@ -43,9 +42,6 @@ let EFAudio = class extends EFMedia {
     return this.audioElementRef.value;
   }
 };
-__decorateClass([
-  property({ type: String })
-], EFAudio.prototype, "src", 2);
 EFAudio = __decorateClass([
   customElement("ef-audio")
 ], EFAudio);

package/dist/elements/EFCaptions.js

@@ -335,7 +335,7 @@ let EFCaptions = class extends EFSourceMixin(
     if (!transcriptionFragment) {
       return;
     }
-    const currentTimeMs = this.targetElement.trimAdjustedOwnCurrentTimeMs;
+    const currentTimeMs = this.targetElement.currentSourceTimeMs;
     const currentTimeSec = currentTimeMs / 1e3;
     const currentWord = transcriptionFragment.word_segments.find(
       (word) => currentTimeSec >= word.start && currentTimeSec <= word.end

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,13 @@ 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;
+    byteTimeDomainTask: Task<readonly [import('@lit/task').TaskStatus, number, number, number], Uint8Array | null>;
+    frequencyDataTask: Task<readonly [import('@lit/task').TaskStatus, number, number, number], Uint8Array | null>;
 }
 export {};

package/dist/elements/EFMedia.js

@@ -10,6 +10,7 @@ import { EF_RENDERING } from "../EF_RENDERING.js";
 import { EFSourceMixin } from "./EFSourceMixin.js";
 import { EFTemporal, isEFTemporal } from "./EFTemporal.js";
 import { FetchMixin } from "./FetchMixin.js";
+import { EFTargetable } from "./TargetController.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -21,6 +22,32 @@ 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;
+      if (firstKey) {
+        this.cache.delete(firstKey);
+      }
+    }
+    this.cache.set(key, value);
+  }
+}
 const deepGetMediaElements = (element, medias = []) => {
   for (const child of Array.from(element.children)) {
     if (child instanceof EFMedia) {
@@ -31,9 +58,11 @@ const deepGetMediaElements = (element, medias = []) => {
   }
   return medias;
 };
-class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
-  assetType: "isobmff_files"
-}) {
+const _EFMedia = class _EFMedia2 extends EFTargetable(
+  EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
+    assetType: "isobmff_files"
+  })
+) {
   constructor() {
     super(...arguments);
     this.currentTimeMs = 0;
@@ -213,6 +242,180 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
         };
       }
     });
+    this.fftSize = 512;
+    this.fftDecay = 8;
+    this.#byteTimeDomainCache = new LRUCache(100);
+    this.byteTimeDomainTask = new Task(this, {
+      autoRun: EF_INTERACTIVE,
+      args: () => [
+        this.audioBufferTask.status,
+        this.currentSourceTimeMs,
+        this.fftSize,
+        this.fftDecay
+      ],
+      task: async () => {
+        await this.audioBufferTask.taskComplete;
+        if (!this.audioBufferTask.value) return null;
+        if (this.currentSourceTimeMs <= 0) return null;
+        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 cachedSmoothedData = this.#byteTimeDomainCache.get(smoothedKey);
+        if (cachedSmoothedData) {
+          return cachedSmoothedData;
+        }
+        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 = `${this.fftSize}:${startOffsetMs}:${startTime}`;
+            const cachedFrame = this.#byteTimeDomainCache.get(cacheKey);
+            if (cachedFrame) {
+              return cachedFrame;
+            }
+            const audioContext = new OfflineAudioContext(
+              2,
+              48e3 * (1 / 30),
+              48e3
+            );
+            const analyser = audioContext.createAnalyser();
+            analyser.fftSize = this.fftSize;
+            const gainNode = audioContext.createGain();
+            gainNode.gain.value = 10;
+            analyser.smoothingTimeConstant = 0.4;
+            analyser.minDecibels = -90;
+            analyser.maxDecibels = -10;
+            const audioBufferSource = audioContext.createBufferSource();
+            audioBufferSource.buffer = audioBuffer;
+            const filter = audioContext.createBiquadFilter();
+            filter.type = "bandpass";
+            filter.frequency.value = 1e3;
+            filter.Q.value = 0.5;
+            audioBufferSource.connect(gainNode);
+            gainNode.connect(filter);
+            filter.connect(analyser);
+            analyser.connect(audioContext.destination);
+            audioBufferSource.start(0, startTime, 1 / 30);
+            try {
+              await audioContext.startRendering();
+              const frameData = new Uint8Array(analyser.fftSize);
+              analyser.getByteTimeDomainData(frameData);
+              this.#byteTimeDomainCache.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));
+        }
+        this.#byteTimeDomainCache.set(
+          smoothedKey,
+          smoothedData.slice(0, Math.floor(smoothedData.length * 0.8))
+        );
+        return smoothedData;
+      }
+    });
+    this.#frequencyDataCache = new LRUCache(100);
+    this.frequencyDataTask = new Task(this, {
+      autoRun: EF_INTERACTIVE,
+      args: () => [
+        this.audioBufferTask.status,
+        this.currentSourceTimeMs,
+        this.fftSize,
+        // Add fftSize to dependency array
+        this.fftDecay
+        // Add fftDecay to dependency array
+      ],
+      task: async () => {
+        await this.audioBufferTask.taskComplete;
+        if (!this.audioBufferTask.value) return null;
+        if (this.currentSourceTimeMs <= 0) return null;
+        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 cachedSmoothedData = this.#frequencyDataCache.get(smoothedKey);
+        if (cachedSmoothedData) {
+          return cachedSmoothedData;
+        }
+        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 = `${this.fftSize}:${startOffsetMs}:${startTime}`;
+            const cachedFrame = this.#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(this.fftSize / 2);
+              analyser.getByteFrequencyData(frameData);
+              this.#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));
+        });
+        const slicedData = smoothedData.slice(
+          0,
+          Math.floor(smoothedData.length / 2)
+        );
+        this.#frequencyDataCache.set(smoothedKey, slicedData);
+        return slicedData;
+      }
+    });
   }
   static {
     this.styles = [
@@ -265,7 +468,7 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
   }
   updated(changedProperties) {
     if (changedProperties.has("ownCurrentTimeMs")) {
-      this.executeSeek(this.trimAdjustedOwnCurrentTimeMs);
+      this.executeSeek(this.currentSourceTimeMs);
     }
     if (changedProperties.has("currentTime") || changedProperties.has("ownCurrentTimeMs")) {
       const timelineTimeMs = (this.rootTimegroup ?? this).currentTimeMs;
@@ -425,16 +628,52 @@ 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;
+  }
+  #byteTimeDomainCache;
+  #frequencyDataCache;
+};
 __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.
      *
@@ -131,18 +135,18 @@ export declare class TemporalMixinInterface {
      * elements.
      *
      * For example, if the media has a `sourcein` value of 10s, when `ownCurrentTimeMs` is 0s,
-     * `trimAdjustedOwnCurrentTimeMs` will be 10s.
+     * `currentSourceTimeMs` will be 10s.
      *
      *            sourcein=10s     sourceout=10s
      * /         /                /
      * |--------|=================|---------|
      *          ^
      *          |_
-     *            trimAdjustedOwnCurrentTimeMs === 10s
+     *            currentSourceTimeMs === 10s
      *          |_
      *            ownCurrentTimeMs === 0s
      */
-    get trimAdjustedOwnCurrentTimeMs(): number;
+    get currentSourceTimeMs(): number;
     set duration(value: string);
     get duration(): string;
     /**

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;
     }
@@ -275,6 +278,10 @@ const EFTemporal = (superClass) => {
     get endTimeMs() {
       return this.startTimeMs + this.durationMs;
     }
+    /**
+     * The current time of the element within itself.
+     * Compare with `currentTimeMs` to see the current time with respect to the root timegroup
+     */
     get ownCurrentTimeMs() {
       if (this.rootTimegroup) {
         return Math.min(
@@ -288,7 +295,7 @@ const EFTemporal = (superClass) => {
      * Used to calculate the internal currentTimeMs of the element. This is useful
      * for mapping to internal media time codes for audio/video elements.
      */
-    get trimAdjustedOwnCurrentTimeMs() {
+    get currentSourceTimeMs() {
       if (this.rootTimegroup) {
         if (this.sourceInMs && this.sourceOutMs) {
           return Math.min(
@@ -309,6 +316,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.d.ts

@@ -27,11 +27,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<({
-        trackId: string;
-        buffer: import('mp4box').MP4ArrayBuffer;
-        mp4File: import('../../../assets/src/MP4File.ts').MP4File;
-    }[] | undefined)[]>;
+    waitForMediaDurations(): Promise<Record<number, import('../../../assets/src/index.ts').TrackFragmentIndex>[]>;
     get childTemporals(): import('./EFTemporal.js').TemporalMixinInterface[];
     protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     private updateAnimations;

package/dist/elements/EFTimegroup.js

@@ -45,7 +45,7 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
     __privateAdd(this, _EFTimegroup_instances);
     this._timeGroupContext = this;
     __privateAdd(this, _currentTime, 0);
-    this.mode = "sequence";
+    this.mode = "contain";
     this.overlapMs = 0;
     this.fit = "none";
     __privateAdd(this, _resizeObserver);
@@ -186,10 +186,9 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
    * in calculations and it was not clear why.
    */
   async waitForMediaDurations() {
+    const mediaElements = deepGetMediaElements(this);
     return await Promise.all(
-      deepGetMediaElements(this).map(
-        (media) => media.initSegmentsLoader.taskComplete
-      )
+      mediaElements.map((m) => m.trackFragmentIndexLoader.taskComplete)
     );
   }
   get childTemporals() {
@@ -378,7 +377,7 @@ EFTimegroup.styles = css`
       display: block;
       width: 100%;
       height: 100%;
-      position: relative;
+      position: absolute;
       transform-origin: center center;
     }
   `;
@@ -402,7 +401,7 @@ __decorateClass([
   property({ type: String })
 ], EFTimegroup.prototype, "fit", 2);
 __decorateClass([
-  property({ type: Number })
+  property({ type: Number, attribute: "currenttime" })
 ], EFTimegroup.prototype, "currentTime", 1);
 EFTimegroup = __decorateClass([
   customElement("ef-timegroup")

package/dist/elements/EFWaveform.d.ts

@@ -1,35 +1,44 @@
-import { EFAudio } from './EFAudio.js';
 import { Task } from '@lit/task';
 import { LitElement, PropertyValueMap } from 'lit';
 import { Ref } from 'lit/directives/ref.js';
+import { EFAudio } from './EFAudio.js';
 import { EFVideo } from './EFVideo.js';
+import { TargetController } from './TargetController.ts';
 declare const EFWaveform_base: (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & typeof LitElement;
 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" | "curve" | "pixel" | "wave" | "spikes";
     color: string;
-    targetSelector: string;
-    set target(value: string);
+    target: string;
+    targetElement: EFAudio | EFVideo | null;
+    lineWidth: number;
+    targetController: TargetController;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private resizeCanvas;
     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 drawLine(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
     protected drawCurve(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>;
+    protected drawSpikes(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
+    frameTask: Task<readonly [EFAudio | EFVideo | null, Uint8Array | null | undefined], void>;
     get durationMs(): number;
-    get targetElement(): EFAudio | EFVideo;
     protected updated(changedProperties: PropertyValueMap<this>): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        "ef-waveform": EFWaveform & Element;
+    }
+}
 export {};