@editframe/elements 0.5.0-beta.9 → 0.6.0-beta.10

package/dist/packages/elements/src/elements/{EFTimegroup.mjs → EFTimegroup.js}

@@ -1,10 +1,10 @@
 import { html, css, LitElement } from "lit";
 import { provide } from "@lit/context";
 import { property, customElement } from "lit/decorators.js";
-import { EFTemporal, shallowGetTemporalElements, isEFTemporal, timegroupContext } from "./EFTemporal.mjs";
-import { TimegroupController } from "./TimegroupController.mjs";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE.mjs";
-import { deepGetMediaElements } from "./EFMedia.mjs";
+import { EFTemporal, shallowGetTemporalElements, isEFTemporal, timegroupContext } from "./EFTemporal.js";
+import { TimegroupController } from "./TimegroupController.js";
+import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
+import { deepGetMediaElements } from "./EFMedia.js";
 import { Task } from "@lit/task";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -44,7 +44,7 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
     this.frameTask = new Task(this, {
       autoRun: EF_INTERACTIVE,
       args: () => [this.ownCurrentTimeMs, this.currentTimeMs],
-      task: async ([], { signal }) => {
+      task: async ([], { signal: _signal }) => {
         let fullyUpdated = await this.updateComplete;
         while (!fullyUpdated) {
           fullyUpdated = await this.updateComplete;
@@ -79,7 +79,7 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
   maybeLoadTimeFromLocalStorage() {
     if (this.id) {
       try {
-        return parseFloat(localStorage.getItem(this.storageKey) || "0");
+        return Number.parseFloat(localStorage.getItem(this.storageKey) || "0");
       } catch (error) {
         console.warn("Failed to load time from localStorage", error);
       }
@@ -122,20 +122,22 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
     switch (this.mode) {
       case "fixed":
         return super.durationMs || 0;
-      case "sequence":
+      case "sequence": {
         let duration = 0;
-        this.childTemporals.forEach((node) => {
+        for (const node of this.childTemporals) {
           duration += node.durationMs;
-        });
+        }
         return duration;
-      case "contain":
+      }
+      case "contain": {
         let maxDuration = 0;
-        this.childTemporals.forEach((node) => {
+        for (const node of this.childTemporals) {
           if (node.hasOwnDuration) {
             maxDuration = Math.max(maxDuration, node.durationMs);
           }
-        });
+        }
         return maxDuration;
+      }
       default:
         throw new Error(`Invalid time mode: ${this.mode}`);
     }
@@ -164,7 +166,7 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
         "--ef-duration",
         `${this.durationMs + this.crossoverEndMs + this.crossoverStartMs}ms`
       );
-      animations.forEach((animation) => {
+      for (const animation of animations) {
         if (animation.playState === "running") {
           animation.pause();
         }
@@ -206,7 +208,7 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
           }
           animation.currentTime = newTime;
         }
-      });
+      }
     }
   }
   shouldWrapWithWorkbench() {
@@ -277,13 +279,13 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
   async loadMd5Sums() {
     const efElements = this.efElements;
     const loaderTasks = [];
-    efElements.forEach((el) => {
+    for (const el of efElements) {
       const md5SumLoader = el.md5SumLoader;
       if (md5SumLoader instanceof Task) {
         md5SumLoader.run();
         loaderTasks.push(md5SumLoader.taskComplete);
       }
-    });
+    }
     await Promise.all(loaderTasks);
     efElements.map((el) => {
       if ("productionSrc" in el && el.productionSrc instanceof Function) {
@@ -320,15 +322,14 @@ __decorateClass([
     converter: {
       fromAttribute: (value) => {
         if (value.endsWith("ms")) {
-          return parseFloat(value);
+          return Number.parseFloat(value);
         }
         if (value.endsWith("s")) {
-          return parseFloat(value) * 1e3;
-        } else {
-          throw new Error(
-            "`crossover` MUST be in milliseconds or seconds (10s, 10000ms)"
-          );
+          return Number.parseFloat(value) * 1e3;
         }
+        throw new Error(
+          "`crossover` MUST be in milliseconds or seconds (10s, 10000ms)"
+        );
       },
       toAttribute: (value) => `${value}ms`
     }

package/dist/packages/elements/src/elements/EFTimeline.cjs

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+class EFTimeline extends HTMLElement {
+  get durationMs() {
+    let duration = 0;
+    for (const node of this.childNodes) {
+      if ("durationMs" in node && typeof node.durationMs === "number") {
+        duration += node.durationMs;
+      }
+    }
+    return duration;
+  }
+}
+window.customElements.define("ef-timeline", EFTimeline);
+exports.EFTimeline = EFTimeline;

package/dist/packages/elements/src/elements/EFTimeline.d.ts

@@ -0,0 +1,3 @@
+export declare class EFTimeline extends HTMLElement {
+    get durationMs(): number;
+}

package/dist/packages/elements/src/elements/{EFTimeline.mjs → EFTimeline.js}

@@ -1,12 +1,15 @@
 class EFTimeline extends HTMLElement {
   get durationMs() {
     let duration = 0;
-    this.childNodes.forEach((node) => {
+    for (const node of this.childNodes) {
       if ("durationMs" in node && typeof node.durationMs === "number") {
         duration += node.durationMs;
       }
-    });
+    }
     return duration;
   }
 }
 window.customElements.define("ef-timeline", EFTimeline);
+export {
+  EFTimeline
+};

package/dist/packages/elements/src/elements/EFVideo.cjs

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lit = require("lit");
+const task = require("@lit/task");
+const ref_js = require("lit/directives/ref.js");
+const decorators_js = require("lit/decorators.js");
+const EFMedia = require("./EFMedia.cjs");
+const TWMixin = require("../gui/TWMixin.cjs");
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
+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 _decoderLock;
+exports.EFVideo = class EFVideo extends TWMixin.TWMixin(EFMedia.EFMedia) {
+  constructor() {
+    super(...arguments);
+    this.canvasRef = ref_js.createRef();
+    __privateAdd(this, _decoderLock, false);
+    this.frameTask = new task.Task(this, {
+      args: () => [
+        this.trackFragmentIndexLoader.status,
+        this.initSegmentsLoader.status,
+        this.seekTask.status,
+        this.fetchSeekTask.status,
+        this.videoAssetTask.status,
+        this.paintTask.status
+      ],
+      task: async () => {
+        await this.trackFragmentIndexLoader.taskComplete;
+        await this.initSegmentsLoader.taskComplete;
+        await this.seekTask.taskComplete;
+        await this.fetchSeekTask.taskComplete;
+        await this.videoAssetTask.taskComplete;
+        await this.paintTask.taskComplete;
+        this.rootTimegroup?.requestUpdate();
+      }
+    });
+    this.paintTask = new task.Task(this, {
+      args: () => [this.videoAssetTask.value, this.desiredSeekTimeMs],
+      task: async ([videoAsset, seekToMs], {
+        signal: _signal
+      }) => {
+        if (!videoAsset) {
+          return;
+        }
+        if (__privateGet(this, _decoderLock)) {
+          return;
+        }
+        try {
+          __privateSet(this, _decoderLock, true);
+          const frame = await videoAsset.seekToTime(seekToMs / 1e3);
+          if (!this.canvasElement) {
+            return;
+          }
+          const ctx = this.canvasElement.getContext("2d");
+          if (!(frame && ctx)) {
+            return;
+          }
+          this.canvasElement.width = frame?.codedWidth;
+          this.canvasElement.height = frame?.codedHeight;
+          ctx.drawImage(
+            frame,
+            0,
+            0,
+            this.canvasElement.width,
+            this.canvasElement.height
+          );
+          return seekToMs;
+        } catch (error) {
+          console.trace("Unexpected error while seeking video", error);
+        } finally {
+          __privateSet(this, _decoderLock, false);
+        }
+      }
+    });
+  }
+  render() {
+    return lit.html` <canvas
+      class="h-full w-full object-fill"
+      ${ref_js.ref(this.canvasRef)}
+    ></canvas>`;
+  }
+  get canvasElement() {
+    return this.canvasRef.value;
+  }
+};
+_decoderLock = /* @__PURE__ */ new WeakMap();
+exports.EFVideo.styles = [
+  lit.css`
+      :host {
+        display: block;
+      }
+    `
+];
+exports.EFVideo = __decorateClass([
+  decorators_js.customElement("ef-video")
+], exports.EFVideo);

package/dist/packages/elements/src/elements/EFVideo.d.ts

@@ -0,0 +1,14 @@
+import { Task } from '@lit/task';
+import { EFMedia } from './EFMedia';
+
+declare const EFVideo_base: typeof EFMedia;
+export declare class EFVideo extends EFVideo_base {
+    #private;
+    static styles: import('lit').CSSResult[];
+    canvasRef: import('lit-html/directives/ref').Ref<HTMLCanvasElement>;
+    render(): import('lit-html').TemplateResult<1>;
+    get canvasElement(): HTMLCanvasElement | undefined;
+    frameTask: Task<readonly [import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus, import('@lit/task').TaskStatus], void>;
+    paintTask: Task<readonly [import('../../../../lib/av/EncodedAsset').VideoAsset | undefined, number], number | undefined>;
+}
+export {};

package/dist/packages/elements/src/elements/{EFVideo.mjs → EFVideo.js}

@@ -2,8 +2,8 @@ import { css, html } from "lit";
 import { Task } from "@lit/task";
 import { createRef, ref } from "lit/directives/ref.js";
 import { customElement } from "lit/decorators.js";
-import { EFMedia } from "./EFMedia.mjs";
-import { TWMixin } from "../gui/TWMixin.mjs";
+import { EFMedia } from "./EFMedia.js";
+import { TWMixin } from "../gui/TWMixin.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __typeError = (msg) => {

package/dist/packages/elements/src/elements/EFWaveform.cjs

@@ -0,0 +1,235 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const EFAudio = require("./EFAudio.cjs");
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const EFVideo = require("./EFVideo.cjs");
+const EFTemporal = require("./EFTemporal.cjs");
+const CrossUpdateController = require("./CrossUpdateController.cjs");
+const TWMixin = require("../gui/TWMixin.cjs");
+const task = require("@lit/task");
+const d3 = require("d3");
+const ref_js = require("lit/directives/ref.js");
+const EF_INTERACTIVE = require("../EF_INTERACTIVE.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const d3__namespace = /* @__PURE__ */ _interopNamespaceDefault(d3);
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+exports.EFWaveform = class EFWaveform extends EFTemporal.EFTemporal(TWMixin.TWMixin(lit.LitElement)) {
+  constructor() {
+    super(...arguments);
+    this.svgRef = ref_js.createRef();
+    this.mode = "bars";
+    this.color = "currentColor";
+    this.frameTask = new task.Task(this, {
+      autoRun: EF_INTERACTIVE.EF_INTERACTIVE,
+      args: () => [this.target.audioBufferTask.status],
+      task: async () => {
+        await this.target.audioBufferTask.taskComplete;
+      }
+    });
+  }
+  createRenderRoot() {
+    return this;
+  }
+  render() {
+    return lit.html` <svg ${ref_js.ref(this.svgRef)} class="h-full w-full" store></svg> `;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.target) {
+      new CrossUpdateController.CrossUpdateController(this.target, this);
+    }
+  }
+  drawBars(svg, frequencyData) {
+    const waveWidth = svg.clientWidth * devicePixelRatio;
+    const waveHeight = svg.clientHeight;
+    const waveLeft = 0;
+    const waveRight = waveWidth;
+    const barX = d3__namespace.scaleBand().paddingInner(0.5).paddingOuter(0.01).domain(d3__namespace.range(frequencyData.length).map((n) => String(n))).rangeRound([waveLeft, waveRight]);
+    const height = d3__namespace.scaleLinear().domain([0, 255]).range([0, waveHeight / 2]);
+    const baseline = waveHeight / 2;
+    const bars = d3__namespace.select(svg).selectAll("rect").data(frequencyData);
+    const minBarHeight = 2;
+    bars.enter().append("rect").merge(bars).attr("x", (_, i) => barX(String(i)) || 0).attr("y", (value) => baseline - height(value)).attr("width", barX.bandwidth() / 1.2).attr("height", (value) => Math.max(height(value) * 2, minBarHeight));
+    bars.exit().remove();
+  }
+  drawBricks(svg, frequencyData) {
+    const waveWidth = svg.clientWidth * devicePixelRatio;
+    const waveHeight = svg.clientHeight * devicePixelRatio;
+    const brickWidth = waveWidth / frequencyData.length;
+    const brickHeightFactor = waveHeight / 255 / 2;
+    const brickPadding = 2;
+    const midHeight = waveHeight / 2;
+    d3__namespace.select(svg).selectAll("line.brickBaseLine").data([0]).join("line").attr("class", "brickBaseLine").attr("x1", 0).attr("x2", waveWidth).attr("y1", midHeight).attr("y2", midHeight).attr("stroke", "currentColor").attr("stroke-width", 4).attr("stroke-dasharray", "2");
+    d3__namespace.select(svg).selectAll("rect.brick").data(frequencyData).join("rect").attr("class", "brick").attr("x", (_d, i) => i * brickWidth).attr("y", (d) => midHeight - d * brickHeightFactor).attr("width", brickWidth - brickPadding).attr("height", (d) => d * brickHeightFactor * 2);
+  }
+  drawLine(svg, frequencyData) {
+    const waveWidth = svg.clientWidth * devicePixelRatio;
+    const waveHeight = svg.clientHeight * devicePixelRatio;
+    const xScale = d3__namespace.scaleLinear().domain([0, frequencyData.length - 1]).range([0, waveWidth]);
+    const yScale = d3__namespace.scaleLinear().domain([0, 255]).range([waveHeight, 0]);
+    const lineGenerator = d3__namespace.line().x((_, i) => xScale(i)).y((d) => yScale(d));
+    const pathData = lineGenerator(frequencyData);
+    d3__namespace.select(svg).selectAll("path.line").data([frequencyData]).join("path").attr("class", "line").attr("d", pathData).attr("fill", "none").attr("stroke", "currentColor").attr("stroke-width", 4);
+  }
+  drawRoundBars(svg, frequencyData) {
+    const waveWidth = svg.clientWidth * devicePixelRatio;
+    const waveHeight = svg.clientHeight;
+    const waveLeft = 0;
+    const waveRight = waveWidth;
+    const barX = d3__namespace.scaleBand().paddingInner(0.5).paddingOuter(0.01).domain(d3__namespace.range(frequencyData.length).map((n) => String(n))).rangeRound([waveLeft, waveRight]);
+    const height = d3__namespace.scaleLinear().domain([0, 255]).range([0, waveHeight / 2]);
+    const baseline = waveHeight / 2;
+    const bars = d3__namespace.select(svg).selectAll("rect").data(frequencyData);
+    const minBarHeight = 2;
+    bars.enter().append("rect").merge(bars).attr("x", (_, i) => barX(String(i)) || 0).attr("y", (value) => baseline - height(value)).attr("width", barX.bandwidth() / 1.2).attr("height", (value) => Math.max(height(value) * 2, minBarHeight)).attr("rx", barX.bandwidth()).attr("ry", barX.bandwidth());
+    bars.exit().remove();
+  }
+  drawEqualizer(svg, frequencyData) {
+    const waveWidth = svg.clientWidth * devicePixelRatio;
+    const waveHeight = svg.clientHeight * devicePixelRatio;
+    const barWidth = waveWidth / frequencyData.length;
+    const barPadding = 1;
+    const minHeight = 1;
+    const heightScale = d3__namespace.scaleLinear().domain([0, 255]).range([0, waveHeight / 2]);
+    d3__namespace.select(svg).selectAll("line.equalizerBaseLine").data([0]).join("line").attr("class", "equalizerBaseLine").attr("x1", 0).attr("x2", waveWidth).attr("y1", waveHeight / 2).attr("y2", waveHeight / 2).attr("stroke-width", 2);
+    d3__namespace.select(svg).selectAll("rect.equalizerBar").data(frequencyData).join("rect").attr("class", "equalizerBar").attr("x", (_d, i) => i * barWidth + barPadding / 2).attr(
+      "y",
+      (d) => waveHeight / 2 - Math.max(heightScale(d) / 2, minHeight)
+    ).attr("width", barWidth - barPadding).attr("height", (d) => Math.max(heightScale(d), minHeight));
+    d3__namespace.select(svg).selectAll("rect.equalizerBar").transition().duration(100).attr(
+      "y",
+      (d) => waveHeight / 2 - Math.max(heightScale(Number(d)) / 2, minHeight)
+    ).attr("height", (d) => Math.max(heightScale(Number(d)), minHeight));
+  }
+  drawCurve(svg, frequencyData) {
+    const waveWidth = svg.clientWidth * devicePixelRatio;
+    const waveHeight = svg.clientHeight * devicePixelRatio;
+    const xScale = d3__namespace.scaleLinear().domain([0, frequencyData.length]).range([0, waveWidth]);
+    const yScale = d3__namespace.scaleLinear().domain([0, 255]).range([waveHeight, 0]);
+    const curveGenerator = d3__namespace.line().x((_, i) => xScale(i)).y((d) => yScale(d)).curve(d3__namespace.curveNatural);
+    const pathData = curveGenerator(frequencyData);
+    d3__namespace.select(svg).selectAll("path.curve").data([frequencyData]).join("path").attr("class", "curve").attr("d", pathData).attr("fill", "none").attr("stroke", "currentColor").attr("stroke-width", 4);
+  }
+  drawPixel(svg, frequencyData) {
+    const waveWidth = svg.clientWidth * devicePixelRatio;
+    const waveHeight = svg.clientHeight;
+    const baseline = waveHeight / 2;
+    const barX = d3__namespace.scaleBand().domain(d3__namespace.range(frequencyData.length).map(String)).rangeRound([0, waveWidth]).paddingInner(0.03).paddingOuter(0.02);
+    const height = d3__namespace.scaleLinear().domain([0, 255]).range([0, baseline]);
+    const bars = d3__namespace.select(svg).selectAll("rect").data(frequencyData);
+    bars.enter().append("rect").merge(bars).attr("x", (_, i) => barX(String(i)) || 0).attr("y", (value) => baseline - height(value)).attr("width", barX.bandwidth()).attr("height", (value) => height(value) * 2);
+    bars.exit().remove();
+  }
+  drawWave(svg, frequencyData) {
+    const waveWidth = svg.clientWidth * devicePixelRatio;
+    const waveHeight = svg.clientHeight;
+    const barX = d3__namespace.scaleBand().domain(d3__namespace.range(frequencyData.length).map(String)).rangeRound([0, waveWidth]).paddingInner(0.03).paddingOuter(0.02);
+    const height = d3__namespace.scaleLinear().domain([0, 255]).range([0, waveHeight / 2]);
+    d3__namespace.select(svg).selectAll("line.baseline").data([0]).join("line").attr("class", "baseline").attr("x1", (_, i) => barX(String(i)) || 0).attr("x2", waveWidth).attr("y1", waveHeight / 2).attr("y2", waveHeight / 2).attr("stroke", "currentColor").attr("stroke-width", 2);
+    const bars = d3__namespace.select(svg).selectAll("rect").data(frequencyData);
+    bars.enter().append("rect").merge(bars).attr("x", (_, i) => barX(String(i)) || 0).attr("y", (value) => waveHeight / 2 - height(value)).attr("width", barX.bandwidth()).attr("height", (value) => height(value) * 2);
+    bars.exit().remove();
+  }
+  async updated() {
+    const svg = this.svgRef.value;
+    if (!svg) {
+      return;
+    }
+    if (!this.target.audioBufferTask.value) {
+      return;
+    }
+    if (this.target.ownCurrentTimeMs > 0) {
+      const audioContext = new OfflineAudioContext(2, 48e3 / 25, 48e3);
+      const audioBufferSource = audioContext.createBufferSource();
+      audioBufferSource.buffer = this.target.audioBufferTask.value.buffer;
+      const analyser = audioContext.createAnalyser();
+      analyser.fftSize = 256;
+      audioBufferSource.connect(analyser);
+      audioBufferSource.start(
+        0,
+        Math.max(
+          0,
+          (this.target.ownCurrentTimeMs - this.target.audioBufferTask.value.startOffsetMs) / 1e3
+        ),
+        48e3 / 1e3
+      );
+      await audioContext.startRendering();
+      const frequencyData = new Uint8Array(analyser.frequencyBinCount);
+      analyser.getByteFrequencyData(frequencyData);
+      const rect = this.getBoundingClientRect();
+      svg.setAttribute("width", (rect.width * devicePixelRatio).toString());
+      svg.setAttribute("height", (rect.height * devicePixelRatio).toString());
+      switch (this.mode) {
+        case "bars":
+          this.drawBars(svg, frequencyData);
+          break;
+        case "bricks":
+          this.drawBricks(svg, frequencyData);
+          break;
+        case "curve":
+          this.drawCurve(svg, frequencyData);
+          break;
+        case "line":
+          this.drawLine(svg, frequencyData);
+          break;
+        case "pixel":
+          this.drawPixel(svg, frequencyData);
+          break;
+        case "wave":
+          this.drawWave(svg, frequencyData);
+          break;
+        case "roundBars":
+          this.drawRoundBars(svg, frequencyData);
+          break;
+        case "equalizer":
+          this.drawEqualizer(svg, frequencyData);
+          break;
+      }
+    }
+  }
+  get target() {
+    const target = document.querySelector(this.getAttribute("target") ?? "");
+    if (target instanceof EFAudio.EFAudio || target instanceof EFVideo.EFVideo) {
+      return target;
+    }
+    throw new Error("Invalid target, must be an EFAudio element");
+  }
+};
+exports.EFWaveform.styles = [];
+__decorateClass([
+  decorators_js.property({
+    type: String,
+    attribute: "mode"
+  })
+], exports.EFWaveform.prototype, "mode", 2);
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.EFWaveform.prototype, "color", 2);
+exports.EFWaveform = __decorateClass([
+  decorators_js.customElement("ef-waveform")
+], exports.EFWaveform);

package/dist/packages/elements/src/elements/EFWaveform.d.ts

@@ -0,0 +1,28 @@
+import { EFAudio } from './EFAudio';
+import { LitElement } from 'lit';
+import { EFVideo } from './EFVideo';
+import { Task } from '@lit/task';
+import { Ref } from 'lit/directives/ref.js';
+
+declare const EFWaveform_base: (new (...args: any[]) => import('./EFTemporal').TemporalMixinInterface) & typeof LitElement;
+export declare class EFWaveform extends EFWaveform_base {
+    static styles: never[];
+    svgRef: Ref<SVGElement>;
+    createRenderRoot(): this;
+    render(): import('lit-html').TemplateResult<1>;
+    mode: "roundBars" | "bars" | "bricks" | "equalizer" | "curve" | "line" | "pixel" | "wave";
+    color: string;
+    connectedCallback(): void;
+    protected drawBars(svg: SVGElement, frequencyData: Uint8Array): void;
+    protected drawBricks(svg: SVGElement, frequencyData: Uint8Array): void;
+    protected drawLine(svg: SVGElement, frequencyData: Uint8Array): void;
+    protected drawRoundBars(svg: SVGElement, frequencyData: Uint8Array): void;
+    protected drawEqualizer(svg: SVGElement, frequencyData: Uint8Array): void;
+    protected drawCurve(svg: SVGElement, frequencyData: Uint8Array): void;
+    protected drawPixel(svg: SVGElement, frequencyData: Uint8Array): void;
+    protected drawWave(svg: SVGElement, frequencyData: Uint8Array): void;
+    frameTask: Task<readonly [import('@lit/task').TaskStatus], void>;
+    protected updated(): Promise<void>;
+    get target(): EFAudio | EFVideo;
+}
+export {};

package/dist/packages/elements/src/elements/{EFWaveform.mjs → EFWaveform.js}

@@ -1,14 +1,14 @@
-import { EFAudio } from "./EFAudio.mjs";
+import { EFAudio } from "./EFAudio.js";
 import { html, LitElement } from "lit";
 import { property, customElement } from "lit/decorators.js";
-import { EFVideo } from "./EFVideo.mjs";
-import { EFTemporal } from "./EFTemporal.mjs";
-import { CrossUpdateController } from "./CrossUpdateController.mjs";
-import { TWMixin } from "../gui/TWMixin.mjs";
+import { EFVideo } from "./EFVideo.js";
+import { EFTemporal } from "./EFTemporal.js";
+import { CrossUpdateController } from "./CrossUpdateController.js";
+import { TWMixin } from "../gui/TWMixin.js";
 import { Task } from "@lit/task";
 import * as d3 from "d3";
 import { createRef, ref } from "lit/directives/ref.js";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE.mjs";
+import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -55,7 +55,7 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     const baseline = waveHeight / 2;
     const bars = d3.select(svg).selectAll("rect").data(frequencyData);
     const minBarHeight = 2;
-    bars.enter().append("rect").merge(bars).attr("x", (_, i) => barX(String(i))).attr("y", (value) => baseline - height(value)).attr("width", barX.bandwidth() / 1.2).attr("height", (value) => Math.max(height(value) * 2, minBarHeight));
+    bars.enter().append("rect").merge(bars).attr("x", (_, i) => barX(String(i)) || 0).attr("y", (value) => baseline - height(value)).attr("width", barX.bandwidth() / 1.2).attr("height", (value) => Math.max(height(value) * 2, minBarHeight));
     bars.exit().remove();
   }
   drawBricks(svg, frequencyData) {
@@ -87,7 +87,7 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     const baseline = waveHeight / 2;
     const bars = d3.select(svg).selectAll("rect").data(frequencyData);
     const minBarHeight = 2;
-    bars.enter().append("rect").merge(bars).attr("x", (_, i) => barX(String(i))).attr("y", (value) => baseline - height(value)).attr("width", barX.bandwidth() / 1.2).attr("height", (value) => Math.max(height(value) * 2, minBarHeight)).attr("rx", barX.bandwidth()).attr("ry", barX.bandwidth());
+    bars.enter().append("rect").merge(bars).attr("x", (_, i) => barX(String(i)) || 0).attr("y", (value) => baseline - height(value)).attr("width", barX.bandwidth() / 1.2).attr("height", (value) => Math.max(height(value) * 2, minBarHeight)).attr("rx", barX.bandwidth()).attr("ry", barX.bandwidth());
     bars.exit().remove();
   }
   drawEqualizer(svg, frequencyData) {
@@ -98,14 +98,14 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     const minHeight = 1;
     const heightScale = d3.scaleLinear().domain([0, 255]).range([0, waveHeight / 2]);
     d3.select(svg).selectAll("line.equalizerBaseLine").data([0]).join("line").attr("class", "equalizerBaseLine").attr("x1", 0).attr("x2", waveWidth).attr("y1", waveHeight / 2).attr("y2", waveHeight / 2).attr("stroke-width", 2);
-    d3.select(svg).selectAll("rect.equalizerBar").data(frequencyData).join("rect").attr("class", "equalizerBar").attr("x", (d, i) => i * barWidth + barPadding / 2).attr(
+    d3.select(svg).selectAll("rect.equalizerBar").data(frequencyData).join("rect").attr("class", "equalizerBar").attr("x", (_d, i) => i * barWidth + barPadding / 2).attr(
       "y",
       (d) => waveHeight / 2 - Math.max(heightScale(d) / 2, minHeight)
     ).attr("width", barWidth - barPadding).attr("height", (d) => Math.max(heightScale(d), minHeight));
     d3.select(svg).selectAll("rect.equalizerBar").transition().duration(100).attr(
       "y",
-      (d) => waveHeight / 2 - Math.max(heightScale(d) / 2, minHeight)
-    ).attr("height", (d) => Math.max(heightScale(d), minHeight));
+      (d) => waveHeight / 2 - Math.max(heightScale(Number(d)) / 2, minHeight)
+    ).attr("height", (d) => Math.max(heightScale(Number(d)), minHeight));
   }
   drawCurve(svg, frequencyData) {
     const waveWidth = svg.clientWidth * devicePixelRatio;
@@ -123,7 +123,7 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     const barX = d3.scaleBand().domain(d3.range(frequencyData.length).map(String)).rangeRound([0, waveWidth]).paddingInner(0.03).paddingOuter(0.02);
     const height = d3.scaleLinear().domain([0, 255]).range([0, baseline]);
     const bars = d3.select(svg).selectAll("rect").data(frequencyData);
-    bars.enter().append("rect").merge(bars).attr("x", (_, i) => barX(String(i))).attr("y", (value) => baseline - height(value)).attr("width", barX.bandwidth()).attr("height", (value) => height(value) * 2);
+    bars.enter().append("rect").merge(bars).attr("x", (_, i) => barX(String(i)) || 0).attr("y", (value) => baseline - height(value)).attr("width", barX.bandwidth()).attr("height", (value) => height(value) * 2);
     bars.exit().remove();
   }
   drawWave(svg, frequencyData) {
@@ -131,9 +131,9 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     const waveHeight = svg.clientHeight;
     const barX = d3.scaleBand().domain(d3.range(frequencyData.length).map(String)).rangeRound([0, waveWidth]).paddingInner(0.03).paddingOuter(0.02);
     const height = d3.scaleLinear().domain([0, 255]).range([0, waveHeight / 2]);
-    d3.select(svg).selectAll("line.baseline").data([0]).join("line").attr("class", "baseline").attr("x1", (_, i) => barX(String(i))).attr("x2", waveWidth).attr("y1", waveHeight / 2).attr("y2", waveHeight / 2).attr("stroke", "currentColor").attr("stroke-width", 2);
+    d3.select(svg).selectAll("line.baseline").data([0]).join("line").attr("class", "baseline").attr("x1", (_, i) => barX(String(i)) || 0).attr("x2", waveWidth).attr("y1", waveHeight / 2).attr("y2", waveHeight / 2).attr("stroke", "currentColor").attr("stroke-width", 2);
     const bars = d3.select(svg).selectAll("rect").data(frequencyData);
-    bars.enter().append("rect").merge(bars).attr("x", (_, i) => barX(String(i))).attr("y", (value) => waveHeight / 2 - height(value)).attr("width", barX.bandwidth()).attr("height", (value) => height(value) * 2);
+    bars.enter().append("rect").merge(bars).attr("x", (_, i) => barX(String(i)) || 0).attr("y", (value) => waveHeight / 2 - height(value)).attr("width", barX.bandwidth()).attr("height", (value) => height(value) * 2);
     bars.exit().remove();
   }
   async updated() {