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

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

@@ -1,235 +0,0 @@
-"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

@@ -1,28 +0,0 @@
-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.js

@@ -1,219 +0,0 @@
-import { EFAudio } from "./EFAudio.js";
-import { html, LitElement } from "lit";
-import { property, customElement } from "lit/decorators.js";
-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.js";
-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;
-};
-let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
-  constructor() {
-    super(...arguments);
-    this.svgRef = createRef();
-    this.mode = "bars";
-    this.color = "currentColor";
-    this.frameTask = new Task(this, {
-      autoRun: EF_INTERACTIVE,
-      args: () => [this.target.audioBufferTask.status],
-      task: async () => {
-        await this.target.audioBufferTask.taskComplete;
-      }
-    });
-  }
-  createRenderRoot() {
-    return this;
-  }
-  render() {
-    return html` <svg ${ref(this.svgRef)} class="h-full w-full" store></svg> `;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    if (this.target) {
-      new 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.scaleBand().paddingInner(0.5).paddingOuter(0.01).domain(d3.range(frequencyData.length).map((n) => String(n))).rangeRound([waveLeft, waveRight]);
-    const height = d3.scaleLinear().domain([0, 255]).range([0, waveHeight / 2]);
-    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)) || 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.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.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.scaleLinear().domain([0, frequencyData.length - 1]).range([0, waveWidth]);
-    const yScale = d3.scaleLinear().domain([0, 255]).range([waveHeight, 0]);
-    const lineGenerator = d3.line().x((_, i) => xScale(i)).y((d) => yScale(d));
-    const pathData = lineGenerator(frequencyData);
-    d3.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.scaleBand().paddingInner(0.5).paddingOuter(0.01).domain(d3.range(frequencyData.length).map((n) => String(n))).rangeRound([waveLeft, waveRight]);
-    const height = d3.scaleLinear().domain([0, 255]).range([0, waveHeight / 2]);
-    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)) || 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.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(
-      "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(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.scaleLinear().domain([0, frequencyData.length]).range([0, waveWidth]);
-    const yScale = d3.scaleLinear().domain([0, 255]).range([waveHeight, 0]);
-    const curveGenerator = d3.line().x((_, i) => xScale(i)).y((d) => yScale(d)).curve(d3.curveNatural);
-    const pathData = curveGenerator(frequencyData);
-    d3.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.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)) || 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.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)) || 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)) || 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 || target instanceof EFVideo) {
-      return target;
-    }
-    throw new Error("Invalid target, must be an EFAudio element");
-  }
-};
-EFWaveform.styles = [];
-__decorateClass([
-  property({
-    type: String,
-    attribute: "mode"
-  })
-], EFWaveform.prototype, "mode", 2);
-__decorateClass([
-  property({ type: String })
-], EFWaveform.prototype, "color", 2);
-EFWaveform = __decorateClass([
-  customElement("ef-waveform")
-], EFWaveform);
-export {
-  EFWaveform
-};

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

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const context = require("@lit/context");
-const EFWorkbench = require("../gui/EFWorkbench.cjs");
-const state_js = require("lit/decorators/state.js");
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = decorator(target, key, result) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-function FetchMixin(superClass) {
-  class FetchElement extends superClass {
-    constructor() {
-      super(...arguments);
-      this.fetch = fetch.bind(window);
-    }
-  }
-  __decorateClass([
-    context.consume({ context: EFWorkbench.fetchContext, subscribe: true }),
-    state_js.state()
-  ], FetchElement.prototype, "fetch");
-  return FetchElement;
-}
-exports.FetchMixin = FetchMixin;

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

@@ -1,8 +0,0 @@
-import { LitElement } from 'lit';
-
-export declare class FetchMixinInterface {
-    fetch: typeof fetch;
-}
-type Constructor<T = {}> = new (...args: any[]) => T;
-export declare function FetchMixin<T extends Constructor<LitElement>>(superClass: T): Constructor<FetchMixinInterface> & T;
-export {};

package/dist/packages/elements/src/elements/FetchMixin.js

@@ -1,28 +0,0 @@
-import { consume } from "@lit/context";
-import { fetchContext } from "../gui/EFWorkbench.js";
-import { state } from "lit/decorators/state.js";
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = decorator(target, key, result) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-function FetchMixin(superClass) {
-  class FetchElement extends superClass {
-    constructor() {
-      super(...arguments);
-      this.fetch = fetch.bind(window);
-    }
-  }
-  __decorateClass([
-    consume({ context: fetchContext, subscribe: true }),
-    state()
-  ], FetchElement.prototype, "fetch");
-  return FetchElement;
-}
-export {
-  FetchMixin
-};

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

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-class TimegroupController {
-  constructor(host, child) {
-    this.host = host;
-    this.child = child;
-    this.host.addController(this);
-  }
-  remove() {
-    this.host.removeController(this);
-  }
-  hostDisconnected() {
-    this.host.removeController(this);
-  }
-  hostUpdated() {
-    this.child.requestUpdate();
-    this.child.currentTimeMs = this.host.currentTimeMs - (this.child.startTimeMs ?? 0);
-  }
-}
-exports.TimegroupController = TimegroupController;

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

@@ -1,14 +0,0 @@
-import { ReactiveController, LitElement } from 'lit';
-import { EFTimegroup } from './EFTimegroup';
-
-export declare class TimegroupController implements ReactiveController {
-    private host;
-    private child;
-    constructor(host: EFTimegroup, child: {
-        currentTimeMs: number;
-        startTimeMs?: number;
-    } & LitElement);
-    remove(): void;
-    hostDisconnected(): void;
-    hostUpdated(): void;
-}

package/dist/packages/elements/src/elements/TimegroupController.js

@@ -1,20 +0,0 @@
-class TimegroupController {
-  constructor(host, child) {
-    this.host = host;
-    this.child = child;
-    this.host.addController(this);
-  }
-  remove() {
-    this.host.removeController(this);
-  }
-  hostDisconnected() {
-    this.host.removeController(this);
-  }
-  hostUpdated() {
-    this.child.requestUpdate();
-    this.child.currentTimeMs = this.host.currentTimeMs - (this.child.startTimeMs ?? 0);
-  }
-}
-export {
-  TimegroupController
-};

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

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const parseTimeToMs = require("./parseTimeToMs.cjs");
-const durationConverter = {
-  fromAttribute: (value) => parseTimeToMs.parseTimeToMs(value),
-  toAttribute: (value) => `${value}s`
-};
-exports.durationConverter = durationConverter;

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

@@ -1,4 +0,0 @@
-export declare const durationConverter: {
-    fromAttribute: (value: string) => number;
-    toAttribute: (value: number) => string;
-};

package/dist/packages/elements/src/elements/durationConverter.js

@@ -1,8 +0,0 @@
-import { parseTimeToMs } from "./parseTimeToMs.js";
-const durationConverter = {
-  fromAttribute: (value) => parseTimeToMs(value),
-  toAttribute: (value) => `${value}s`
-};
-export {
-  durationConverter
-};

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

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const parseTimeToMs = (time) => {
-  if (time.endsWith("ms")) {
-    return Number.parseFloat(time);
-  }
-  if (time.endsWith("s")) {
-    return Number.parseFloat(time) * 1e3;
-  }
-  throw new Error("Time must be in milliseconds or seconds (10s, 10000ms)");
-};
-exports.parseTimeToMs = parseTimeToMs;

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

@@ -1 +0,0 @@
-export declare const parseTimeToMs: (time: string) => number;

package/dist/packages/elements/src/elements/parseTimeToMs.js

@@ -1,12 +0,0 @@
-const parseTimeToMs = (time) => {
-  if (time.endsWith("ms")) {
-    return Number.parseFloat(time);
-  }
-  if (time.endsWith("s")) {
-    return Number.parseFloat(time) * 1e3;
-  }
-  throw new Error("Time must be in milliseconds or seconds (10s, 10000ms)");
-};
-export {
-  parseTimeToMs
-};