@editframe/elements 0.5.0-beta.4 → 0.5.0-beta.5

package/dist/elements/elements/EFWaveform.mjs

@@ -0,0 +1,203 @@
+import { EFAudio } from "./EFAudio.mjs";
+import { html, LitElement } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { EFVideo } from "./EFVideo.mjs";
+import { EFTemporal } from "./EFTemporal.mjs";
+import { CrossUpdateController } from "./CrossUpdateController.mjs";
+import { TWMixin } from "../gui/TWMixin.mjs";
+import { Task } from "@lit/task";
+import * as d3 from "d3";
+import { createRef, ref } from "lit/directives/ref.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, {
+      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 baseline = waveHeight / 2;
+    const barX = d3.scaleBand().domain(d3.range(frequencyData.length).map(String)).rangeRound([0, waveWidth]).paddingInner(0.5).paddingOuter(0.01);
+    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();
+  }
+  drawBricks(svg, frequencyData) {
+    const waveWidth = svg.clientWidth * devicePixelRatio;
+    const waveHeight = svg.clientHeight * devicePixelRatio;
+    const brickWidth = waveWidth / frequencyData.length;
+    const brickHeightFactor = waveHeight / 255;
+    const brickPadding = 2;
+    d3.select(svg).selectAll("rect.brick").data(frequencyData).join("rect").attr("class", "brick").attr("x", (_d, i) => i * brickWidth).attr("y", (d) => waveHeight - d * brickHeightFactor).attr("width", brickWidth - brickPadding).attr("height", (d) => d * brickHeightFactor);
+  }
+  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((_d, i) => xScale(i)).y((d) => yScale(d)).curve(d3.curveCardinal);
+    d3.select(svg).selectAll("path").data([frequencyData]).join("path").attr("d", lineGenerator).attr("fill", "none");
+  }
+  drawRoundBars(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.5).paddingOuter(0.01);
+    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).attr("fill", "white").attr("rx", barX.bandwidth() * 0.1).attr("ry", barX.bandwidth() * 0.1);
+    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 heightScale = d3.scaleLinear().domain([0, 255]).range([0, waveHeight]);
+    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 - heightScale(d)).attr("width", barWidth - barPadding).attr("height", (d) => heightScale(d));
+    svg.selectAll("rect.equalizerBar").transition().duration(100).attr("y", (d) => waveHeight - heightScale(d)).attr("height", (d) => heightScale(d));
+  }
+  drawCurve(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 curveGenerator = d3.line().x((_, i) => xScale(i)).y((d) => yScale(d)).curve(d3.curveNatural);
+    d3.select(svg).selectAll("path.curve").data([frequencyData]).join("path").attr("class", "curve").attr("d", curveGenerator).attr("fill", "none");
+  }
+  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.01).paddingOuter(0.01);
+    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();
+  }
+  drawWave(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]);
+    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();
+  }
+  update(arg) {
+    super.update(arg);
+  }
+  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(1, 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/elements/elements/FetchMixin.mjs

@@ -0,0 +1,30 @@
+import { consume } from "@lit/context";
+import { fetchContext } from "../gui/EFWorkbench.mjs";
+import { state } from "lit/decorators/state.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;
+};
+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", 2);
+  return FetchElement;
+}
+export {
+  FetchMixin
+};

package/dist/elements/elements/TimegroupController.mjs

@@ -0,0 +1,20 @@
+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/elements/elements/durationConverter.mjs

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

package/dist/elements/elements/parseTimeToMs.mjs

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

package/dist/elements/elements/util.mjs

@@ -0,0 +1,11 @@
+import { EFTimegroup } from "./EFTimegroup.mjs";
+const getStartTimeMs = (element) => {
+  const nearestTimeGroup = element.closest("ef-timegroup");
+  if (!(nearestTimeGroup instanceof EFTimegroup)) {
+    return 0;
+  }
+  return nearestTimeGroup.startTimeMs;
+};
+export {
+  getStartTimeMs
+};

package/dist/elements/elements.css.mjs

@@ -0,0 +1 @@
+

package/dist/elements/elements.mjs

@@ -0,0 +1,11 @@
+import "./elements.css.mjs";
+import "./elements/EFTimegroup.mjs";
+import "./elements/EFTimeline.mjs";
+import "./elements/EFImage.mjs";
+import "./elements/EFAudio.mjs";
+import "./elements/EFVideo.mjs";
+import "./elements/EFCaptions.mjs";
+import "./elements/EFWaveform.mjs";
+import "./gui/EFWorkbench.mjs";
+import "./gui/EFFilmstrip.mjs";
+window.EF_REGISTERED = true;