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

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/EFMedia.d.ts

@@ -70,6 +70,6 @@ export declare class EFMedia extends EFMedia_base {
     private static readonly MAX_DB;
     private static readonly DECAY_WEIGHT;
     get FREQ_WEIGHTS(): Float32Array;
-    frequencyDataTask: Task<readonly [import('@lit/task').TaskStatus, 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) => {
@@ -40,12 +41,13 @@ class LRUCache {
       this.cache.delete(key);
     } else if (this.cache.size >= this.maxSize) {
       const firstKey = this.cache.keys().next().value;
-      this.cache.delete(firstKey);
+      if (firstKey) {
+        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) {
@@ -56,9 +58,11 @@ const deepGetMediaElements = (element, medias = []) => {
   }
   return medias;
 };
-const _EFMedia = class _EFMedia2 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;
@@ -240,16 +244,29 @@ const _EFMedia = class _EFMedia2 extends EFSourceMixin(EFTemporal(FetchMixin(Lit
     });
     this.fftSize = 512;
     this.fftDecay = 8;
+    this.#frequencyDataCache = new LRUCache(100);
     this.frequencyDataTask = new Task(this, {
       autoRun: EF_INTERACTIVE,
-      args: () => [this.audioBufferTask.status, this.trimAdjustedOwnCurrentTimeMs],
+      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.trimAdjustedOwnCurrentTimeMs <= 0) return null;
-        const currentTimeMs = this.trimAdjustedOwnCurrentTimeMs;
+        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);
@@ -257,8 +274,8 @@ const _EFMedia = class _EFMedia2 extends EFSourceMixin(EFTemporal(FetchMixin(Lit
               0,
               (currentTimeMs - frameOffset - startOffsetMs) / 1e3
             );
-            const cacheKey = `${startOffsetMs},${startTime}`;
-            const cachedFrame = frequencyDataCache.get(cacheKey);
+            const cacheKey = `${this.fftSize}:${startOffsetMs}:${startTime}`;
+            const cachedFrame = this.#frequencyDataCache.get(cacheKey);
             if (cachedFrame) {
               return cachedFrame;
             }
@@ -278,9 +295,9 @@ const _EFMedia = class _EFMedia2 extends EFSourceMixin(EFTemporal(FetchMixin(Lit
             audioBufferSource.start(0, startTime, 1 / 30);
             try {
               await audioContext.startRendering();
-              const frameData = new Uint8Array(analyser.frequencyBinCount);
+              const frameData = new Uint8Array(this.fftSize / 2);
               analyser.getByteFrequencyData(frameData);
-              frequencyDataCache.set(cacheKey, frameData);
+              this.#frequencyDataCache.set(cacheKey, frameData);
               return frameData;
             } finally {
               audioBufferSource.disconnect();
@@ -304,7 +321,12 @@ const _EFMedia = class _EFMedia2 extends EFSourceMixin(EFTemporal(FetchMixin(Lit
           const freqWeight = this.FREQ_WEIGHTS[i];
           smoothedData[i] = Math.min(255, Math.round(value * freqWeight));
         });
-        return smoothedData;
+        const slicedData = smoothedData.slice(
+          0,
+          Math.floor(smoothedData.length / 2)
+        );
+        this.#frequencyDataCache.set(smoothedKey, slicedData);
+        return slicedData;
       }
     });
   }
@@ -359,7 +381,7 @@ const _EFMedia = class _EFMedia2 extends EFSourceMixin(EFTemporal(FetchMixin(Lit
   }
   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;
@@ -546,6 +568,7 @@ const _EFMedia = class _EFMedia2 extends EFSourceMixin(EFTemporal(FetchMixin(Lit
     freqWeightsCache.set(this.fftSize, weights);
     return weights;
   }
+  #frequencyDataCache;
 };
 __decorateClass([
   property({ type: Number })

package/dist/elements/EFTemporal.d.ts

@@ -135,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

@@ -278,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(
@@ -291,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(
@@ -316,7 +320,7 @@ const EFTemporal = (superClass) => {
       super.updated(changedProperties);
       if (changedProperties.has("currentTime") || changedProperties.has("ownCurrentTimeMs")) {
         const timelineTimeMs = (this.rootTimegroup ?? this).ownCurrentTimeMs;
-        if (this.startTimeMs >= timelineTimeMs || this.endTimeMs <= timelineTimeMs) {
+        if (this.startTimeMs > timelineTimeMs || this.endTimeMs < timelineTimeMs) {
           this.style.display = "none";
           return;
         }

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() {
@@ -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,8 +1,9 @@
-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;
@@ -12,11 +13,12 @@ export declare class EFWaveform extends EFWaveform_base {
     private resizeObserver?;
     private mutationObserver?;
     render(): import('lit-html').TemplateResult<1>;
-    mode: "roundBars" | "bars" | "bricks" | "line" | "pixel" | "wave";
+    mode: "roundBars" | "bars" | "bricks" | "line" | "pixel" | "wave" | "spikes";
     color: string;
-    targetSelector: string;
+    target: string;
+    targetElement: EFAudio | EFVideo | null;
     lineWidth: number;
-    set target(value: string);
+    targetController: TargetController;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private resizeCanvas;
@@ -28,9 +30,14 @@ export declare class EFWaveform extends EFWaveform_base {
     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 | undefined], 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 | null;
     protected updated(changedProperties: PropertyValueMap<this>): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        "ef-waveform": EFWaveform & Element;
+    }
+}
 export {};

package/dist/elements/EFWaveform.js

@@ -1,15 +1,14 @@
-import { EFAudio } from "./EFAudio.js";
 import { CSSStyleObserver } from "@bramus/style-observer";
 import { Task } from "@lit/task";
 import { html, css, LitElement } from "lit";
-import { property, customElement } from "lit/decorators.js";
+import { property, state, customElement } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 import { EF_RENDERING } from "../EF_RENDERING.js";
 import { TWMixin } from "../gui/TWMixin.js";
 import { CrossUpdateController } from "./CrossUpdateController.js";
 import { EFTemporal } from "./EFTemporal.js";
-import { EFVideo } from "./EFVideo.js";
+import { TargetController } from "./TargetController.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -28,11 +27,18 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     this.styleObserver = null;
     this.mode = "bars";
     this.color = "currentColor";
-    this.targetSelector = "";
+    this.target = "";
+    this.targetElement = null;
     this.lineWidth = 4;
+    this.targetController = new TargetController(this);
     this.frameTask = new Task(this, {
       autoRun: EF_INTERACTIVE,
-      args: () => [this.targetElement?.frequencyDataTask.status],
+      args: () => {
+        return [
+          this.targetElement,
+          this.targetElement?.frequencyDataTask.value
+        ];
+      },
       task: async () => {
         if (!this.targetElement) return;
         await this.targetElement.frequencyDataTask.taskComplete;
@@ -41,11 +47,15 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
         if (!ctx) return;
         const frequencyData = this.targetElement.frequencyDataTask.value;
         if (!frequencyData) return;
+        ctx.save();
         if (this.color === "currentColor") {
           const computedStyle = getComputedStyle(this);
           const currentColor = computedStyle.color;
           ctx.strokeStyle = currentColor;
           ctx.fillStyle = currentColor;
+        } else {
+          ctx.strokeStyle = this.color;
+          ctx.fillStyle = this.color;
         }
         switch (this.mode) {
           case "bars":
@@ -63,19 +73,20 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
           case "wave":
             this.drawWave(ctx, frequencyData);
             break;
+          case "spikes":
+            this.drawSpikes(ctx, frequencyData);
+            break;
           case "roundBars":
             this.drawRoundBars(ctx, frequencyData);
             break;
         }
+        ctx.restore();
       }
     });
   }
   render() {
     return html`<canvas ${ref(this.canvasRef)}></canvas>`;
   }
-  set target(value) {
-    this.targetSelector = value;
-  }
   connectedCallback() {
     super.connectedCallback();
     try {
@@ -130,27 +141,25 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     const ctx = canvas.getContext("2d");
     if (!ctx) return null;
     ctx.reset();
-    ctx.scale(dpr, dpr);
     return ctx;
   }
   drawBars(ctx, frequencyData) {
     const canvas = ctx.canvas;
     const waveWidth = canvas.width;
     const waveHeight = canvas.height;
-    const baseline = waveHeight / 4;
     const totalBars = frequencyData.length;
     const paddingInner = 0.5;
     const paddingOuter = 0.01;
-    const availableWidth = waveWidth * (1 - 2 * paddingOuter);
+    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 = value / 255;
-      const height = normalizedValue * (waveHeight / 2);
+      const normalizedValue = Math.min(value / 255 * 2, 1);
+      const barHeight = normalizedValue * waveHeight;
+      const y = (waveHeight - barHeight) / 2;
       const x = waveWidth * paddingOuter + i * (barWidth * (1 + paddingInner));
-      const y = baseline - height;
-      path.rect(x, y, barWidth, height * 2);
+      path.rect(x, y, barWidth, barHeight);
     });
     ctx.fill(path);
   }
@@ -162,11 +171,14 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     const path = new Path2D();
     const columnWidth = waveWidth / frequencyData.length;
     const boxSize = columnWidth * 0.9;
+    const verticalGap = boxSize * 0.2;
+    const maxBricks = Math.floor(waveHeight / (boxSize + verticalGap));
     frequencyData.forEach((value, i) => {
-      const brickHeight = value / 255 * waveHeight;
-      for (let j = 0; j <= brickHeight; j++) {
+      const normalizedValue = Math.min(value / 255 * 2, 1);
+      const brickCount = Math.floor(normalizedValue * maxBricks);
+      for (let j = 0; j < brickCount; j++) {
         const x = columnWidth * i;
-        const y = waveHeight - (j * columnWidth + boxSize);
+        const y = waveHeight - (j + 1) * (boxSize + verticalGap);
         path.rect(x, y, boxSize, boxSize);
       }
     });
@@ -176,29 +188,28 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     const canvas = ctx.canvas;
     const waveWidth = canvas.width;
     const waveHeight = canvas.height;
-    const baseline = waveHeight / 4;
     const totalBars = frequencyData.length;
     const paddingInner = 0.5;
     const paddingOuter = 0.01;
-    const availableWidth = waveWidth * (1 - 2 * paddingOuter);
+    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 = value / 255;
-      const height = normalizedValue * (waveHeight / 2);
+      const normalizedValue = Math.min(value / 255 * 2, 1);
+      const height = normalizedValue * waveHeight;
       const x = waveWidth * paddingOuter + i * (barWidth * (1 + paddingInner));
-      const y = baseline - height;
-      path.roundRect(x, y, barWidth, height * 2, barWidth / 2);
+      const y = (waveHeight - height) / 2;
+      path.roundRect(x, y, barWidth, height, barWidth / 2);
     });
     ctx.fill(path);
   }
   drawEqualizer(ctx, frequencyData) {
     const canvas = ctx.canvas;
     const waveWidth = canvas.width;
-    const waveHeight = canvas.height / 2;
-    const barWidth = waveWidth / frequencyData.length * 0.8;
+    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();
@@ -217,7 +228,7 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
   drawLine(ctx, frequencyData) {
     const canvas = ctx.canvas;
     const waveWidth = canvas.width;
-    const waveHeight = canvas.height / 2;
+    const waveHeight = canvas.height;
     ctx.clearRect(0, 0, waveWidth, waveHeight);
     const path = new Path2D();
     frequencyData.forEach((value, i) => {
@@ -235,14 +246,15 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
   drawPixel(ctx, frequencyData) {
     const canvas = ctx.canvas;
     const waveWidth = canvas.width;
-    const waveHeight = canvas.height / 2;
+    const waveHeight = canvas.height;
     const baseline = waveHeight / 2;
     const barWidth = waveWidth / frequencyData.length;
     ctx.clearRect(0, 0, waveWidth, waveHeight);
     const path = new Path2D();
     frequencyData.forEach((value, i) => {
+      const normalizedValue = Math.min(value / 255 * 2, 1);
       const x = i * (waveWidth / frequencyData.length);
-      const barHeight = value / 255 * baseline;
+      const barHeight = normalizedValue * (waveHeight / 2);
       const y = baseline - barHeight;
       path.rect(x, y, barWidth, barHeight * 2);
     });
@@ -252,53 +264,110 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     const canvas = ctx.canvas;
     const waveWidth = canvas.width;
     const waveHeight = canvas.height;
-    const baseline = canvas.height / 4;
+    const paddingOuter = 0.01;
+    const availableWidth = waveWidth * (1 - 2 * paddingOuter);
+    const startX = waveWidth * paddingOuter;
     ctx.clearRect(0, 0, waveWidth, waveHeight);
     const path = new Path2D();
-    path.moveTo(0, baseline);
+    const firstValue = Math.min((frequencyData[0] ?? 0) / 255 * 2, 1);
+    const firstY = (waveHeight - firstValue * waveHeight) / 2;
+    path.moveTo(startX, firstY);
     frequencyData.forEach((value, i) => {
-      const normalizedValue = value / 255;
-      const x = i / (frequencyData.length - 1) * waveWidth;
-      const y = baseline - normalizedValue * (waveHeight / 2);
+      const normalizedValue = Math.min(value / 255 * 2, 1);
+      const x = startX + i / (frequencyData.length - 1) * availableWidth;
+      const barHeight = normalizedValue * waveHeight;
+      const y = (waveHeight - barHeight) / 2;
       if (i === 0) {
         path.moveTo(x, y);
       } else {
-        const prevX = (i - 1) / (frequencyData.length - 1) * waveWidth;
+        const prevX = startX + (i - 1) / (frequencyData.length - 1) * availableWidth;
+        const prevValue = Math.min((frequencyData[i - 1] ?? 0) / 255 * 2, 1);
+        const prevBarHeight = prevValue * waveHeight;
+        const prevY = (waveHeight - prevBarHeight) / 2;
+        const xc = (prevX + x) / 2;
+        const yc = (prevY + y) / 2;
+        path.quadraticCurveTo(prevX, prevY, xc, yc);
+      }
+    });
+    for (let i = frequencyData.length - 1; i >= 0; i--) {
+      const normalizedValue = Math.min((frequencyData[i] ?? 0) / 255 * 2, 1);
+      const x = startX + i / (frequencyData.length - 1) * availableWidth;
+      const barHeight = normalizedValue * waveHeight;
+      const y = (waveHeight + barHeight) / 2;
+      if (i === frequencyData.length - 1) {
+        path.lineTo(x, y);
+      } else {
+        const nextX = startX + (i + 1) / (frequencyData.length - 1) * availableWidth;
+        const nextValue = Math.min((frequencyData[i + 1] ?? 0) / 255 * 2, 1);
+        const nextBarHeight = nextValue * waveHeight;
+        const nextY = (waveHeight + nextBarHeight) / 2;
+        const xc = (nextX + x) / 2;
+        const yc = (nextY + y) / 2;
+        path.quadraticCurveTo(nextX, nextY, xc, yc);
+      }
+    }
+    const lastY = (waveHeight + firstValue * waveHeight) / 2;
+    const controlX = startX;
+    const controlY = (lastY + firstY) / 2;
+    path.quadraticCurveTo(controlX, controlY, startX, firstY);
+    ctx.fill(path);
+  }
+  drawSpikes(ctx, frequencyData) {
+    const canvas = ctx.canvas;
+    const waveWidth = canvas.width;
+    const waveHeight = canvas.height;
+    const paddingOuter = 0.01;
+    const availableWidth = waveWidth * (1 - 2 * paddingOuter);
+    const startX = waveWidth * paddingOuter;
+    ctx.clearRect(0, 0, waveWidth, waveHeight);
+    const path = new Path2D();
+    const firstValue = (frequencyData[0] ?? 0) / 255;
+    const firstY = (waveHeight - firstValue * waveHeight) / 2;
+    path.moveTo(startX, firstY);
+    frequencyData.forEach((value, i) => {
+      const normalizedValue = Math.min(value / 255 * 2, 1);
+      const x = startX + i / (frequencyData.length - 1) * availableWidth;
+      const barHeight = normalizedValue * (waveHeight / 2);
+      const y = (waveHeight - barHeight * 2) / 2;
+      if (i === 0) {
+        path.moveTo(x, y);
+      } else {
+        const prevX = startX + (i - 1) / (frequencyData.length - 1) * availableWidth;
         const prevValue = (frequencyData[i - 1] ?? 0) / 255;
-        const prevY = baseline - prevValue * (waveHeight / 2);
+        const prevBarHeight = prevValue * (waveHeight / 2);
+        const prevY = (waveHeight - prevBarHeight * 2) / 2;
         const xc = (prevX + x) / 2;
         const yc = (prevY + y) / 2;
         path.quadraticCurveTo(prevX, prevY, xc, yc);
       }
     });
     for (let i = frequencyData.length - 1; i >= 0; i--) {
-      const normalizedValue = (frequencyData[i] ?? 0) / 255;
-      const x = i / (frequencyData.length - 1) * waveWidth;
-      const y = baseline + normalizedValue * (waveHeight / 2);
+      const normalizedValue = Math.min((frequencyData[i] ?? 0) / 255 * 2, 1);
+      const x = startX + i / (frequencyData.length - 1) * availableWidth;
+      const barHeight = normalizedValue * (waveHeight / 2);
+      const y = (waveHeight + barHeight * 2) / 2;
       if (i === frequencyData.length - 1) {
         path.lineTo(x, y);
       } else {
-        const nextX = (i + 1) / (frequencyData.length - 1) * waveWidth;
+        const nextX = startX + (i + 1) / (frequencyData.length - 1) * availableWidth;
         const nextValue = (frequencyData[i + 1] ?? 0) / 255;
-        const nextY = baseline + nextValue * (waveHeight / 2);
+        const nextBarHeight = nextValue * (waveHeight / 2);
+        const nextY = (waveHeight + nextBarHeight * 2) / 2;
         const xc = (nextX + x) / 2;
         const yc = (nextY + y) / 2;
         path.quadraticCurveTo(nextX, nextY, xc, yc);
       }
     }
+    const lastY = (waveHeight + firstValue * waveHeight) / 2;
+    const controlX = startX;
+    const controlY = (lastY + firstY) / 2;
+    path.quadraticCurveTo(controlX, controlY, startX, firstY);
     ctx.fill(path);
   }
   get durationMs() {
     if (!this.targetElement) return 0;
     return this.targetElement.durationMs;
   }
-  get targetElement() {
-    const target = document.getElementById(this.targetSelector ?? "");
-    if (target instanceof EFAudio || target instanceof EFVideo) {
-      return target;
-    }
-    return null;
-  }
   updated(changedProperties) {
     super.updated(changedProperties);
     if (changedProperties.size > 0) {
@@ -331,8 +400,11 @@ __decorateClass([
   property({ type: String })
 ], EFWaveform.prototype, "color", 2);
 __decorateClass([
-  property({ type: String, attribute: "target", reflect: true })
-], EFWaveform.prototype, "targetSelector", 2);
+  property({ type: String, reflect: true })
+], EFWaveform.prototype, "target", 2);
+__decorateClass([
+  state()
+], EFWaveform.prototype, "targetElement", 2);
 __decorateClass([
   property({ type: Number, attribute: "line-width" })
 ], EFWaveform.prototype, "lineWidth", 2);