@editframe/elements 0.11.0-beta.9 → 0.12.0-beta.10

package/dist/elements/src/elements/EFTimegroup.js

@@ -1,12 +1,13 @@
-import { html, css, LitElement } from "lit";
 import { provide } from "@lit/context";
 import { Task } from "@lit/task";
-import { property, customElement } from "lit/decorators.js";
 import debug from "debug";
-import { EFTemporal, shallowGetTemporalElements, isEFTemporal, timegroupContext } from "./EFTemporal.js";
-import { TimegroupController } from "./TimegroupController.js";
+import { html, css, LitElement } from "lit";
+import { property, customElement } from "lit/decorators.js";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
+import { isContextMixin } from "../gui/ContextMixin.js";
 import { deepGetMediaElements } from "./EFMedia.js";
+import { EFTemporal, shallowGetTemporalElements, isEFTemporal, timegroupContext } from "./EFTemporal.js";
+import { TimegroupController } from "./TimegroupController.js";
 import { durationConverter } from "./durationConverter.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -138,10 +139,16 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
         throw new Error(`Invalid time mode: ${this.mode}`);
     }
   }
+  /**
+   * Wait for all media elements to load their initial segments.
+   * Ideally we would only need the extracted index json data, but
+   * that caused issues with constructing audio data. We had negative durations
+   * in calculations and it was not clear why.
+   */
   async waitForMediaDurations() {
     return await Promise.all(
       deepGetMediaElements(this).map(
-        (media) => media.trackFragmentIndexLoader.taskComplete
+        (media) => media.initSegmentsLoader.taskComplete
       )
     );
   }
@@ -212,8 +219,28 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
       }
     }
   }
+  get contextProvider() {
+    let parent = this.parentNode;
+    while (parent) {
+      if (isContextMixin(parent)) {
+        return parent;
+      }
+      parent = parent.parentNode;
+    }
+    return null;
+  }
+  /**
+   * Returns true if the timegroup should be wrapped with a workbench.
+   *
+   * A timegroup should be wrapped with a workbench if it is the root-most timegroup
+   * and EF_INTERACTIVE is true.
+   *
+   * If the timegroup is already wrappedin a context provider like ef-preview,
+   * it should NOT be wrapped in a workbench.
+   *
+   */
   shouldWrapWithWorkbench() {
-    return EF_INTERACTIVE && this.closest("ef-timegroup") === this && this.closest("ef-workbench") === null && this.closest("ef-preview") === null;
+    return EF_INTERACTIVE && this.closest("ef-timegroup") === this && this.closest("ef-preview") === null && this.closest("ef-workbench") === null && this.closest("test-context") === null;
   }
   wrapWithWorkbench() {
     const workbench = document.createElement("ef-workbench");
@@ -270,10 +297,8 @@ _currentTime = /* @__PURE__ */ new WeakMap();
 _EFTimegroup_instances = /* @__PURE__ */ new WeakSet();
 addAudioToContext_fn = async function(audioContext, fromMs, toMs) {
   await this.waitForMediaDurations();
-  const durationMs = toMs - fromMs;
   await Promise.all(
     deepGetMediaElements(this).map(async (mediaElement) => {
-      await mediaElement.trackFragmentIndexLoader.taskComplete;
       const mediaStartsBeforeEnd = mediaElement.startTimeMs <= toMs;
       const mediaEndsAfterStart = mediaElement.endTimeMs >= fromMs;
       const mediaOverlaps = mediaStartsBeforeEnd && mediaEndsAfterStart;
@@ -284,15 +309,15 @@ addAudioToContext_fn = async function(audioContext, fromMs, toMs) {
       if (!audio) {
         throw new Error("Failed to fetch audio");
       }
-      const ctxStartMs = Math.max(0, mediaElement.startTimeMs - fromMs);
-      const ctxEndMs = Math.min(durationMs, mediaElement.endTimeMs - fromMs);
-      const ctxDurationMs = ctxEndMs - ctxStartMs;
-      const offset = Math.max(0, fromMs - mediaElement.startTimeMs) - audio.startMs;
       const bufferSource = audioContext.createBufferSource();
       bufferSource.buffer = await audioContext.decodeAudioData(
         await audio.blob.arrayBuffer()
       );
       bufferSource.connect(audioContext.destination);
+      const ctxStartMs = Math.max(0, mediaElement.startTimeMs - fromMs);
+      const ctxEndMs = mediaElement.endTimeMs - fromMs;
+      const ctxDurationMs = ctxEndMs - ctxStartMs;
+      const offset = Math.max(0, fromMs - mediaElement.startTimeMs) - audio.startMs;
       bufferSource.start(
         ctxStartMs / 1e3,
         offset / 1e3,

package/dist/elements/src/elements/EFVideo.js

@@ -85,10 +85,7 @@ let EFVideo = class extends TWMixin(EFMedia) {
     });
   }
   render() {
-    return html` <canvas
-      class="h-full w-full object-fill"
-      ${ref(this.canvasRef)}
-    ></canvas>`;
+    return html` <canvas ${ref(this.canvasRef)}></canvas>`;
   }
   get canvasElement() {
     return this.canvasRef.value;

package/dist/elements/src/elements/EFWaveform.js

@@ -1,6 +1,5 @@
 import { EFAudio } from "./EFAudio.js";
 import { Task } from "@lit/task";
-import * as d3 from "d3";
 import { html, css, LitElement } from "lit";
 import { property, customElement } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
@@ -22,15 +21,86 @@ var __decorateClass = (decorators, target, key, kind) => {
 let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
   constructor() {
     super(...arguments);
-    this.svgRef = createRef();
+    this.canvasRef = createRef();
+    this.ctx = null;
     this.mode = "bars";
     this.color = "currentColor";
     this.targetSelector = "";
+    this.lastFrameTime = 0;
     this.frameTask = new Task(this, {
       autoRun: EF_INTERACTIVE,
       args: () => [this.targetElement.audioBufferTask.status],
       task: async () => {
+        const currentTime = performance.now();
+        const timeSinceLastFrame = this.lastFrameTime ? currentTime - this.lastFrameTime : 0;
+        console.log(`Time since last frame: ${timeSinceLastFrame.toFixed(2)}ms`);
+        this.lastFrameTime = currentTime;
         await this.targetElement.audioBufferTask.taskComplete;
+        this.ctx ||= this.initCanvas();
+        const ctx = this.ctx;
+        if (!ctx) return;
+        if (!this.targetElement.audioBufferTask.value) return;
+        if (this.targetElement.trimAdjustedOwnCurrentTimeMs > 0) {
+          const FRAMES_TO_ANALYZE = 4;
+          const FRAME_DURATION_MS = 48e3 / 100;
+          const multiFrameData = [];
+          for (let i = 0; i < FRAMES_TO_ANALYZE; i++) {
+            const frameOffset = i - Math.floor(FRAMES_TO_ANALYZE / 2);
+            const audioContext = new OfflineAudioContext(2, 48e3 / 25, 48e3);
+            const audioBufferSource = audioContext.createBufferSource();
+            audioBufferSource.buffer = this.targetElement.audioBufferTask.value.buffer;
+            const analyser = audioContext.createAnalyser();
+            analyser.fftSize = 128 / 2;
+            analyser.smoothingTimeConstant = 0.1;
+            audioBufferSource.connect(analyser);
+            const startTime = Math.max(
+              0,
+              (this.targetElement.trimAdjustedOwnCurrentTimeMs - this.targetElement.audioBufferTask.value.startOffsetMs) / 1e3 + frameOffset * FRAME_DURATION_MS / 1e3
+            );
+            audioBufferSource.start(0, startTime, FRAME_DURATION_MS / 1e3);
+            await audioContext.startRendering();
+            const frameData = new Uint8Array(analyser.frequencyBinCount);
+            analyser.getByteFrequencyData(frameData);
+            multiFrameData.push(frameData);
+          }
+          const dataLength = multiFrameData[0]?.length ?? 0;
+          const smoothedData = new Uint8Array(dataLength);
+          for (let i = 0; i < smoothedData.length; i++) {
+            let sum = 0;
+            for (const frameData of multiFrameData) {
+              sum += frameData[i] ?? 0;
+            }
+            let avg = sum / FRAMES_TO_ANALYZE;
+            avg = (avg / 255) ** 1.2 * 255;
+            smoothedData[i] = Math.round(avg);
+          }
+          switch (this.mode) {
+            case "bars":
+              this.drawBars(ctx, smoothedData);
+              break;
+            case "bricks":
+              this.drawBricks(ctx, smoothedData);
+              break;
+            case "curve":
+              this.drawCurve(ctx, smoothedData);
+              break;
+            case "line":
+              this.drawLine(ctx, smoothedData);
+              break;
+            case "pixel":
+              this.drawPixel(ctx, smoothedData);
+              break;
+            case "wave":
+              this.drawWave(ctx, smoothedData);
+              break;
+            case "roundBars":
+              this.drawRoundBars(ctx, smoothedData);
+              break;
+            case "equalizer":
+              this.drawEqualizer(ctx, smoothedData);
+              break;
+          }
+        }
       }
     });
   }
@@ -38,7 +108,7 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     return this;
   }
   render() {
-    return html` <svg ${ref(this.svgRef)} store></svg> `;
+    return html`<canvas ${ref(this.canvasRef)}></canvas>`;
   }
   set target(value) {
     this.targetSelector = value;
@@ -49,153 +119,183 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
       new CrossUpdateController(this.targetElement, 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]);
+  initCanvas() {
+    console.count("initCanvas");
+    const canvas = this.canvasRef.value;
+    if (!canvas) return null;
+    const rect = this.getBoundingClientRect();
+    const dpr = window.devicePixelRatio;
+    canvas.style.width = `${rect.width}px`;
+    canvas.style.height = `${rect.height}px`;
+    canvas.width = rect.width * dpr;
+    canvas.height = rect.height * dpr;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return null;
+    ctx.scale(dpr, dpr);
+    return ctx;
+  }
+  drawBars(ctx, frequencyData) {
+    ctx.strokeStyle = this.color;
+    ctx.fillStyle = this.color;
+    const canvas = ctx.canvas;
+    const waveWidth = canvas.width / devicePixelRatio;
+    const waveHeight = canvas.height / devicePixelRatio;
+    const barWidth = waveWidth / frequencyData.length * 0.8;
     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;
+    ctx.clearRect(0, 0, waveWidth, waveHeight);
+    frequencyData.forEach((value, i) => {
+      const height = value / 255 * (waveHeight / 2);
+      const x = i * (waveWidth / frequencyData.length);
+      const y = baseline - height;
+      ctx.fillRect(x, y, barWidth, Math.max(height * 2, 2));
+    });
+  }
+  drawBricks(ctx, frequencyData) {
+    ctx.strokeStyle = this.color;
+    ctx.fillStyle = this.color;
+    const canvas = ctx.canvas;
+    const waveWidth = canvas.width / devicePixelRatio;
+    const waveHeight = canvas.height / 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]);
+    ctx.clearRect(0, 0, waveWidth, waveHeight);
+    ctx.beginPath();
+    ctx.setLineDash([2]);
+    ctx.lineWidth = 4;
+    ctx.moveTo(0, midHeight);
+    ctx.lineTo(waveWidth, midHeight);
+    ctx.stroke();
+    ctx.setLineDash([]);
+    frequencyData.forEach((value, i) => {
+      const x = i * brickWidth;
+      const height = value * brickHeightFactor * 2;
+      const y = midHeight - height / 2;
+      ctx.fillRect(x, y, brickWidth - brickPadding, height);
+    });
+  }
+  drawLine(ctx, frequencyData) {
+    ctx.strokeStyle = this.color;
+    ctx.fillStyle = this.color;
+    const canvas = ctx.canvas;
+    const waveWidth = canvas.width / devicePixelRatio;
+    const waveHeight = canvas.height / devicePixelRatio;
+    ctx.clearRect(0, 0, waveWidth, waveHeight);
+    ctx.beginPath();
+    frequencyData.forEach((value, i) => {
+      const x = i / frequencyData.length * waveWidth;
+      const y = (1 - value / 255) * waveHeight;
+      if (i === 0) {
+        ctx.moveTo(x, y);
+      } else {
+        ctx.lineTo(x, y);
+      }
+    });
+    ctx.lineWidth = 4;
+    ctx.stroke();
+  }
+  drawRoundBars(ctx, frequencyData) {
+    ctx.strokeStyle = this.color;
+    ctx.fillStyle = this.color;
+    const canvas = ctx.canvas;
+    const waveWidth = canvas.width / devicePixelRatio;
+    const waveHeight = canvas.height / devicePixelRatio;
+    const barWidth = waveWidth / frequencyData.length * 0.5;
     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 maxHeight = waveHeight / 2;
+    ctx.clearRect(0, 0, waveWidth, waveHeight);
+    frequencyData.forEach((value, i) => {
+      const height = value / 255 * maxHeight;
+      const x = i * (waveWidth / frequencyData.length);
+      const y = baseline - height;
+      const radius = barWidth / 2;
+      ctx.beginPath();
+      ctx.roundRect(x, y, barWidth, Math.max(height * 2, 2), radius);
+      ctx.fill();
+    });
+  }
+  drawEqualizer(ctx, frequencyData) {
+    ctx.strokeStyle = this.color;
+    ctx.fillStyle = this.color;
+    const canvas = ctx.canvas;
+    const waveWidth = canvas.width / devicePixelRatio;
+    const waveHeight = canvas.height / devicePixelRatio;
+    const barWidth = waveWidth / frequencyData.length * 0.8;
     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.targetElement.audioBufferTask.value) {
-      return;
-    }
-    if (this.targetElement.trimAdjustedOwnCurrentTimeMs > 0) {
-      const audioContext = new OfflineAudioContext(2, 48e3 / 25, 48e3);
-      const audioBufferSource = audioContext.createBufferSource();
-      audioBufferSource.buffer = this.targetElement.audioBufferTask.value.buffer;
-      const analyser = audioContext.createAnalyser();
-      analyser.fftSize = 256;
-      audioBufferSource.connect(analyser);
-      audioBufferSource.start(
-        0,
-        Math.max(
-          0,
-          (this.targetElement.trimAdjustedOwnCurrentTimeMs - this.targetElement.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;
+    ctx.clearRect(0, 0, waveWidth, waveHeight);
+    ctx.beginPath();
+    ctx.lineWidth = 2;
+    ctx.moveTo(0, baseline);
+    ctx.lineTo(waveWidth, baseline);
+    ctx.stroke();
+    frequencyData.forEach((value, i) => {
+      const height = value / 255 * (waveHeight / 2);
+      const x = i * (waveWidth / frequencyData.length);
+      const y = baseline - height;
+      ctx.fillRect(x, y, barWidth, Math.max(height * 2, 1));
+    });
+  }
+  drawCurve(ctx, frequencyData) {
+    ctx.strokeStyle = this.color;
+    ctx.fillStyle = this.color;
+    const canvas = ctx.canvas;
+    const waveWidth = canvas.width / devicePixelRatio;
+    const waveHeight = canvas.height / devicePixelRatio;
+    ctx.clearRect(0, 0, waveWidth, waveHeight);
+    ctx.beginPath();
+    frequencyData.forEach((value, i) => {
+      const x = i / frequencyData.length * waveWidth;
+      const y = (1 - value / 255) * waveHeight;
+      if (i === 0) {
+        ctx.moveTo(x, y);
+      } else {
+        ctx.lineTo(x, y);
       }
-    }
+    });
+    ctx.lineWidth = 4;
+    ctx.stroke();
+  }
+  drawPixel(ctx, frequencyData) {
+    ctx.strokeStyle = this.color;
+    ctx.fillStyle = this.color;
+    const canvas = ctx.canvas;
+    const waveWidth = canvas.width / devicePixelRatio;
+    const waveHeight = canvas.height / devicePixelRatio;
+    const baseline = waveHeight / 2;
+    const barWidth = waveWidth / frequencyData.length * 0.97;
+    ctx.clearRect(0, 0, waveWidth, waveHeight);
+    frequencyData.forEach((value, i) => {
+      const x = i * (waveWidth / frequencyData.length);
+      const barHeight = value / 255 * baseline;
+      const y = baseline - barHeight;
+      ctx.fillRect(x, y, barWidth, barHeight * 2);
+    });
+  }
+  drawWave(ctx, frequencyData) {
+    ctx.strokeStyle = this.color;
+    ctx.fillStyle = this.color;
+    const canvas = ctx.canvas;
+    const waveWidth = canvas.width / devicePixelRatio;
+    const waveHeight = canvas.height / devicePixelRatio;
+    const baseline = waveHeight / 2;
+    const barWidth = waveWidth / frequencyData.length * 0.97;
+    ctx.clearRect(0, 0, waveWidth, waveHeight);
+    ctx.beginPath();
+    ctx.moveTo(0, baseline);
+    ctx.lineTo(waveWidth, baseline);
+    ctx.strokeStyle = this.color;
+    ctx.lineWidth = 2;
+    ctx.stroke();
+    frequencyData.forEach((value, i) => {
+      const x = i * (waveWidth / frequencyData.length);
+      const barHeight = value / 255 * (waveHeight / 2);
+      const y = baseline - barHeight;
+      ctx.fillRect(x, y, barWidth, barHeight * 2);
+    });
+  }
+  get durationMs() {
+    return this.targetElement.durationMs;
   }
   get targetElement() {
     const target = document.getElementById(this.targetSelector ?? "");
@@ -204,10 +304,17 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     }
     throw new Error("Invalid target, must be an EFAudio or EFVideo element");
   }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("color") || changedProperties.has("mode")) {
+      this.frameTask.run();
+    }
+  }
 };
 EFWaveform.styles = [
   css`
-      svg {
+      :host {
+        display: block;
         all: inherit;
       }
     `