@editframe/elements 0.5.0-beta.8 → 0.6.0-beta.1

package/src/elements/EFWaveform.ts

@@ -1,407 +0,0 @@
-import { EFAudio } from "./EFAudio";
-
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { EFVideo } from "./EFVideo";
-import { EFTemporal } from "./EFTemporal";
-import { CrossUpdateController } from "./CrossUpdateController";
-import { TWMixin } from "../gui/TWMixin";
-import { Task } from "@lit/task";
-import * as d3 from "d3";
-import { Ref, createRef, ref } from "lit/directives/ref.js";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE";
-
-@customElement("ef-waveform")
-export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
-  static styles = [];
-  svgRef: Ref<SVGElement> = createRef();
-  createRenderRoot() {
-    return this;
-  }
-  render() {
-    return html` <svg ${ref(this.svgRef)} class="h-full w-full" store></svg> `;
-  }
-
-  @property({
-    type: String,
-    attribute: "mode",
-  })
-  mode:
-    | "roundBars"
-    | "bars"
-    | "bricks"
-    | "equalizer"
-    | "curve"
-    | "line"
-    | "pixel"
-    | "wave" = "bars";
-
-  @property({ type: String })
-  color: string = "currentColor";
-
-  connectedCallback() {
-    super.connectedCallback();
-    if (this.target) {
-      new CrossUpdateController(this.target, this);
-    }
-  }
-
-  protected drawBars(svg: SVGElement, frequencyData: Uint8Array) {
-    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)))
-      .attr("y", (value) => baseline - height(value))
-      .attr("width", barX.bandwidth() / 1.2)
-      .attr("height", (value) => Math.max(height(value) * 2, minBarHeight));
-
-    bars.exit().remove();
-  }
-
-  protected drawBricks(svg: SVGElement, frequencyData: Uint8Array) {
-    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);
-  }
-
-  protected drawLine(svg: SVGElement, frequencyData: Uint8Array) {
-    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<Uint8Array[number]>()
-      .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);
-  }
-
-  protected drawRoundBars(svg: SVGElement, frequencyData: Uint8Array) {
-    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)))
-      .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();
-  }
-  protected drawEqualizer(svg: SVGElement, frequencyData: Uint8Array) {
-    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(d) / 2, minHeight),
-      )
-      .attr("height", (d) => Math.max(heightScale(d), minHeight));
-  }
-
-  protected drawCurve(svg: SVGElement, frequencyData: Uint8Array) {
-    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<Uint8Array[number]>()
-      .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);
-  }
-
-  protected drawPixel(svg: SVGElement, frequencyData: Uint8Array) {
-    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)))
-      .attr("y", (value) => baseline - height(value))
-      .attr("width", barX.bandwidth())
-      .attr("height", (value) => height(value) * 2);
-
-    bars.exit().remove();
-  }
-  protected drawWave(svg: SVGElement, frequencyData: Uint8Array) {
-    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)))
-      .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.exit().remove();
-  }
-  
-
-  // update(arg) {
-  //   super.update(arg);
-  // }
-
-  frameTask = new Task(this, {
-    autoRun: EF_INTERACTIVE,
-    args: () => [this.target.audioBufferTask.status] as const,
-    task: async () => {
-      await this.target.audioBufferTask.taskComplete;
-    },
-  });
-
-  protected 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, 48000 / 25, 48000);
-      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) /
-            1000,
-        ),
-        48000 / 1000,
-      );
-      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");
-  }
-}

package/src/elements/FetchMixin.ts

@@ -1,18 +0,0 @@
-import { consume } from "@lit/context";
-import { LitElement } from "lit";
-import { fetchContext } from "../gui/EFWorkbench";
-import { state } from "lit/decorators/state.js";
-
-export declare class FetchMixinInterface {
-  fetch: typeof fetch;
-}
-
-export function FetchMixin<T extends Constructor<LitElement>>(superClass: T) {
-  class FetchElement extends superClass {
-    @consume({ context: fetchContext, subscribe: true })
-    @state()
-    fetch = fetch.bind(window);
-  }
-
-  return FetchElement as Constructor<FetchMixinInterface> & T;
-}

package/src/elements/TimegroupController.ts

@@ -1,25 +0,0 @@
-import { ReactiveController, LitElement } from "lit";
-import { EFTimegroup } from "./EFTimegroup";
-
-export class TimegroupController implements ReactiveController {
-  constructor(
-    private host: EFTimegroup,
-    private child: { currentTimeMs: number; startTimeMs?: number } & LitElement,
-  ) {
-    this.host.addController(this);
-  }
-
-  remove() {
-    this.host.removeController(this);
-  }
-
-  hostDisconnected(): void {
-    this.host.removeController(this);
-  }
-
-  hostUpdated(): void {
-    this.child.requestUpdate();
-    this.child.currentTimeMs =
-      this.host.currentTimeMs - (this.child.startTimeMs ?? 0);
-  }
-}

package/src/elements/buildLitFixture.ts

@@ -1,13 +0,0 @@
-import { render, TemplateResult } from "lit";
-
-export const buildLitFixture = <EL extends HTMLElement>(
-  templateResult: TemplateResult<1>,
-) => {
-  return async (
-    { container }: { container: HTMLDivElement },
-    use: (value: EL) => Promise<any>,
-  ) => {
-    render(templateResult, container);
-    await use(container.firstElementChild as EL);
-  };
-};

package/src/elements/durationConverter.ts

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

package/src/elements/parseTimeToMs.ts

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

package/src/elements/util.ts

@@ -1,24 +0,0 @@
-import { EFTimegroup } from "./EFTimegroup";
-
-export const getRootTimeGroup = (element: Element): EFTimegroup | null => {
-  let bestCandidate: EFTimegroup | null = null;
-
-  let currentElement: Element | null = element;
-  while (currentElement) {
-    if (currentElement instanceof EFTimegroup) {
-      bestCandidate = currentElement;
-    }
-    currentElement = currentElement.parentElement;
-  }
-
-  return bestCandidate;
-};
-
-export const getStartTimeMs = (element: Element): number => {
-  const nearestTimeGroup = element.closest("ef-timegroup");
-  if (!(nearestTimeGroup instanceof EFTimegroup)) {
-    return 0;
-  }
-
-  return nearestTimeGroup.startTimeMs;
-};