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

package/dist/elements/EFWaveform.js

@@ -1,13 +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) => {
@@ -23,83 +24,76 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     super(...arguments);
     this.canvasRef = createRef();
     this.ctx = null;
+    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.audioBufferTask.status],
+      args: () => {
+        return [
+          this.targetElement,
+          this.targetElement?.frequencyDataTask.value
+        ];
+      },
       task: async () => {
-        await this.targetElement.audioBufferTask.taskComplete;
+        if (!this.targetElement) return;
+        await this.targetElement.frequencyDataTask.taskComplete;
         this.ctx ||= this.initCanvas();
         const ctx = this.ctx;
         if (!ctx) return;
-        if (!this.targetElement.audioBufferTask.value) return;
-        if (this.targetElement.trimAdjustedOwnCurrentTimeMs > 0) {
-          const FRAME_DURATION_MS = 48e3 / 1e3;
-          const FRAME_SMEAR_MS = FRAME_DURATION_MS * 1;
-          const FRAME_SMEAR_S = FRAME_SMEAR_MS / 1e3;
-          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 * 8;
-          audioBufferSource.connect(analyser);
-          const startTime = Math.max(
-            0,
-            (this.targetElement.trimAdjustedOwnCurrentTimeMs - this.targetElement.audioBufferTask.value.startOffsetMs) / 1e3
-          );
-          audioBufferSource.start(0, startTime, FRAME_SMEAR_S);
-          await audioContext.startRendering();
-          const frameData = new Uint8Array(analyser.frequencyBinCount);
-          analyser.getByteFrequencyData(frameData);
-          const smoothedData = frameData.slice(0, frameData.length / 2);
-          if (this.color === "currentColor") {
-            const computedStyle = getComputedStyle(this);
-            const currentColor = computedStyle.color;
-            ctx.strokeStyle = currentColor;
-            ctx.fillStyle = currentColor;
-          }
-          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;
-          }
+        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":
+            this.drawBars(ctx, frequencyData);
+            break;
+          case "bricks":
+            this.drawBricks(ctx, frequencyData);
+            break;
+          case "line":
+            this.drawLine(ctx, frequencyData);
+            break;
+          case "pixel":
+            this.drawPixel(ctx, frequencyData);
+            break;
+          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();
-    if (this.targetElement) {
-      new CrossUpdateController(this.targetElement, this);
+    try {
+      if (this.targetElement) {
+        new CrossUpdateController(this.targetElement, this);
+      }
+    } catch (e) {
     }
     this.resizeObserver = new ResizeObserver(() => {
       this.resizeCanvas();
@@ -113,11 +107,18 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
       }
     });
     this.mutationObserver.observe(this, { attributes: true });
+    if (!EF_RENDERING()) {
+      this.styleObserver = new CSSStyleObserver(["color"], () => {
+        this.frameTask.run();
+      });
+      this.styleObserver.attach(this);
+    }
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.resizeObserver?.disconnect();
     this.mutationObserver?.disconnect();
+    this.styleObserver?.detach();
   }
   resizeCanvas() {
     this.ctx = this.initCanvas();
@@ -128,7 +129,10 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
   initCanvas() {
     const canvas = this.canvasRef.value;
     if (!canvas) return null;
-    const rect = this.getBoundingClientRect();
+    const rect = {
+      width: this.offsetWidth,
+      height: this.offsetHeight
+    };
     const dpr = window.devicePixelRatio;
     canvas.style.width = `${rect.width}px`;
     canvas.style.height = `${rect.height}px`;
@@ -137,163 +141,233 @@ 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 / devicePixelRatio;
-    const waveHeight = canvas.height / devicePixelRatio;
-    const barWidth = waveWidth / frequencyData.length * 0.8;
-    const baseline = waveHeight / 2;
+    const waveWidth = canvas.width;
+    const waveHeight = canvas.height;
+    const totalBars = frequencyData.length;
+    const paddingInner = 0.5;
+    const paddingOuter = 0.01;
+    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 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));
+      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));
+      path.rect(x, y, barWidth, barHeight);
     });
+    ctx.fill(path);
   }
   drawBricks(ctx, frequencyData) {
     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;
-    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) {
-    const canvas = ctx.canvas;
-    const waveWidth = canvas.width / devicePixelRatio;
-    const waveHeight = canvas.height / devicePixelRatio;
+    const waveWidth = canvas.width;
+    const waveHeight = canvas.height;
     ctx.clearRect(0, 0, waveWidth, waveHeight);
-    ctx.beginPath();
+    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 x = i / frequencyData.length * waveWidth;
-      const y = (1 - value / 255) * waveHeight;
-      if (i === 0) {
-        ctx.moveTo(x, y);
-      } else {
-        ctx.lineTo(x, y);
+      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 + 1) * (boxSize + verticalGap);
+        path.rect(x, y, boxSize, boxSize);
       }
     });
-    ctx.lineWidth = 4;
-    ctx.stroke();
+    ctx.fill(path);
   }
   drawRoundBars(ctx, frequencyData) {
     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 maxHeight = waveHeight / 2;
+    const waveWidth = canvas.width;
+    const waveHeight = canvas.height;
+    const totalBars = frequencyData.length;
+    const paddingInner = 0.5;
+    const paddingOuter = 0.01;
+    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 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();
+      const normalizedValue = Math.min(value / 255 * 2, 1);
+      const height = normalizedValue * waveHeight;
+      const x = waveWidth * paddingOuter + i * (barWidth * (1 + paddingInner));
+      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 / devicePixelRatio;
-    const waveHeight = canvas.height / devicePixelRatio;
-    const barWidth = waveWidth / frequencyData.length * 0.8;
+    const waveWidth = canvas.width;
+    const waveHeight = canvas.height;
     const baseline = waveHeight / 2;
+    const barWidth = waveWidth / frequencyData.length * 0.8;
     ctx.clearRect(0, 0, waveWidth, waveHeight);
-    ctx.beginPath();
-    ctx.lineWidth = 2;
-    ctx.moveTo(0, baseline);
-    ctx.lineTo(waveWidth, baseline);
-    ctx.stroke();
+    const baselinePath = new Path2D();
+    const barsPath = new Path2D();
+    baselinePath.moveTo(0, baseline);
+    baselinePath.lineTo(waveWidth, baseline);
     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));
+      barsPath.rect(x, y, barWidth, Math.max(height * 2, 1));
     });
+    ctx.lineWidth = 2;
+    ctx.stroke(baselinePath);
+    ctx.fill(barsPath);
   }
-  drawCurve(ctx, frequencyData) {
+  drawLine(ctx, frequencyData) {
     const canvas = ctx.canvas;
-    const waveWidth = canvas.width / devicePixelRatio;
-    const waveHeight = canvas.height / devicePixelRatio;
+    const waveWidth = canvas.width;
+    const waveHeight = canvas.height;
     ctx.clearRect(0, 0, waveWidth, waveHeight);
-    ctx.beginPath();
+    const path = new Path2D();
     frequencyData.forEach((value, i) => {
       const x = i / frequencyData.length * waveWidth;
       const y = (1 - value / 255) * waveHeight;
       if (i === 0) {
-        ctx.moveTo(x, y);
+        path.moveTo(x, y);
       } else {
-        ctx.lineTo(x, y);
+        path.lineTo(x, y);
       }
     });
-    ctx.lineWidth = 4;
-    ctx.stroke();
+    ctx.lineWidth = this.lineWidth;
+    ctx.stroke(path);
   }
   drawPixel(ctx, frequencyData) {
     const canvas = ctx.canvas;
-    const waveWidth = canvas.width / devicePixelRatio;
-    const waveHeight = canvas.height / devicePixelRatio;
+    const waveWidth = canvas.width;
+    const waveHeight = canvas.height;
     const baseline = waveHeight / 2;
-    const barWidth = waveWidth / frequencyData.length * 0.97;
+    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;
-      ctx.fillRect(x, y, barWidth, barHeight * 2);
+      path.rect(x, y, barWidth, barHeight * 2);
     });
+    ctx.fill(path);
   }
   drawWave(ctx, frequencyData) {
     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;
+    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);
-    ctx.beginPath();
-    ctx.moveTo(0, baseline);
-    ctx.lineTo(waveWidth, baseline);
-    ctx.strokeStyle = this.color;
-    ctx.lineWidth = 1;
-    ctx.stroke();
+    const path = new Path2D();
+    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 x = i * (waveWidth / frequencyData.length);
-      const barHeight = value / 255 * (waveHeight / 2);
-      const y = baseline - barHeight;
-      ctx.fillRect(x, y, barWidth, barHeight * 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 = 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 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 = 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 = startX + (i + 1) / (frequencyData.length - 1) * availableWidth;
+        const nextValue = (frequencyData[i + 1] ?? 0) / 255;
+        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;
-    }
-    throw new Error("Invalid target, must be an EFAudio or EFVideo element");
-  }
   updated(changedProperties) {
     super.updated(changedProperties);
     if (changedProperties.size > 0) {
@@ -326,8 +400,14 @@ __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);
 EFWaveform = __decorateClass([
   customElement("ef-waveform")
 ], EFWaveform);

package/dist/elements/TargetController.d.ts

@@ -0,0 +1,25 @@
+import { LitElement, ReactiveController } from 'lit';
+type Constructor<T = {}> = new (...args: any[]) => T;
+export declare class TargetableMixinInterface {
+    id: string;
+}
+export declare const isEFTargetable: (obj: any) => obj is TargetableMixinInterface;
+export declare const EFTargetable: <T extends Constructor<LitElement>>(superClass: T) => T;
+export declare class TargetController implements ReactiveController {
+    private host;
+    private targetController;
+    private currentTargetString;
+    constructor(host: LitElement & {
+        targetElement: Element | null;
+        target: string;
+    });
+    private registryCallback;
+    private updateTarget;
+    private connectToTarget;
+    private disconnectFromTarget;
+    private get registry();
+    hostDisconnected(): void;
+    hostConnected(): void;
+    hostUpdate(): void;
+}
+export {};