@editframe/elements 0.11.0-beta.8 → 0.12.0-beta.1

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

@@ -1,14 +1,13 @@
 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 { html, css, LitElement } from "lit";
+import { property, customElement } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
+import { TWMixin } from "../gui/TWMixin.js";
+import { CrossUpdateController } from "./CrossUpdateController.js";
+import { EFTemporal } from "./EFTemporal.js";
+import { EFVideo } from "./EFVideo.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -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)} class="h-full w-full" 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,8 +304,21 @@ 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 = [];
+EFWaveform.styles = [
+  css`
+      :host {
+        display: block;
+        all: inherit;
+      }
+    `
+];
 __decorateClass([
   property({
     type: String,

package/dist/elements/src/gui/ContextMixin.js

@@ -1,12 +1,12 @@
 import { provide } from "@lit/context";
 import { state, property } from "lit/decorators.js";
+import { createRef } from "lit/directives/ref.js";
+import { apiHostContext } from "./apiHostContext.js";
+import { efContext } from "./efContext.js";
+import { fetchContext } from "./fetchContext.js";
 import { focusContext } from "./focusContext.js";
 import { focusedElementContext } from "./focusedElementContext.js";
-import { fetchContext } from "./fetchContext.js";
-import { createRef } from "lit/directives/ref.js";
 import { playingContext, loopContext } from "./playingContext.js";
-import { efContext } from "./efContext.js";
-import { apiHostContext } from "./apiHostContext.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -16,8 +16,13 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
+const contextMixinSymbol = Symbol("contextMixin");
+function isContextMixin(value) {
+  return typeof value === "object" && value !== null && contextMixinSymbol in value.constructor;
+}
 function ContextMixin(superClass) {
-  class ContextElement extends superClass {
+  var _a, _b;
+  class ContextElement extends (_b = superClass, _a = contextMixinSymbol, _b) {
     constructor() {
       super(...arguments);
       this.focusContext = this;
@@ -45,6 +50,8 @@ function ContextMixin(superClass) {
           Object.assign(init.headers, {
             authorization: `Bearer ${urlToken}`
           });
+        } else {
+          init.credentials = "include";
         }
         return fetch(url, init);
       };
@@ -56,6 +63,8 @@ function ContextMixin(superClass) {
       this.currentTimeMs = 0;
       this.stageRef = createRef();
       this.canvasRef = createRef();
+      this.#FPS = 30;
+      this.#MS_PER_FRAME = 1e3 / this.#FPS;
       this.setStageScale = () => {
         if (this.isConnected && !this.rendering) {
           const canvasElement = this.canvasRef.value;
@@ -95,7 +104,12 @@ function ContextMixin(superClass) {
       this.#playbackAnimationFrameRequest = null;
       this.#AUDIO_PLAYBACK_SLICE_MS = 1e3;
     }
+    static {
+      this[_a] = true;
+    }
     #URLTokens;
+    #FPS;
+    #MS_PER_FRAME;
     connectedCallback() {
       super.connectedCallback();
       requestAnimationFrame(this.setStageScale);
@@ -118,6 +132,16 @@ function ContextMixin(superClass) {
       if (changedProperties.has("currentTimeMs") && this.targetTimegroup) {
         if (this.targetTimegroup.currentTimeMs !== this.currentTimeMs) {
           this.targetTimegroup.currentTimeMs = this.currentTimeMs;
+          if (this.isConnected) {
+            this.dispatchEvent(
+              new CustomEvent("timeupdate", {
+                detail: {
+                  currentTimeMs: this.currentTimeMs,
+                  progress: this.currentTimeMs / this.targetTimegroup.durationMs
+                }
+              })
+            );
+          }
         }
       }
       super.update(changedProperties);
@@ -135,7 +159,11 @@ function ContextMixin(superClass) {
     #playbackAnimationFrameRequest;
     #AUDIO_PLAYBACK_SLICE_MS;
     #syncPlayheadToAudioContext(target, startMs) {
-      this.currentTimeMs = startMs + (this.#playbackAudioContext?.currentTime ?? 0) * 1e3;
+      const rawTimeMs = startMs + (this.#playbackAudioContext?.currentTime ?? 0) * 1e3;
+      const nextTimeMs = Math.round(rawTimeMs / this.#MS_PER_FRAME) * this.#MS_PER_FRAME;
+      if (nextTimeMs !== this.currentTimeMs) {
+        this.currentTimeMs = nextTimeMs;
+      }
       this.#playbackAnimationFrameRequest = requestAnimationFrame(() => {
         this.#syncPlayheadToAudioContext(target, startMs);
       });
@@ -262,5 +290,6 @@ function ContextMixin(superClass) {
   return ContextElement;
 }
 export {
-  ContextMixin
+  ContextMixin,
+  isContextMixin
 };

package/dist/elements/src/gui/EFFilmstrip.js

@@ -74,16 +74,29 @@ class FilmstripItem extends TWMixin(LitElement) {
     return this.element && this.focusContext?.focusedElement === this.element;
   }
   get gutterStyles() {
+    if (this.element.sourceInMs || this.element.sourceOutMs) {
+      return {
+        position: "relative",
+        left: `${this.pixelsPerMs * (this.element.startTimeWithinParentMs - this.element.trimStartMs - this.element.sourceInMs)}px`,
+        width: `${this.pixelsPerMs * (this.element.durationMs + this.element.trimStartMs + this.element.trimEndMs + this.element.sourceOutMs + this.element.sourceInMs)}px`
+      };
+    }
     return {
       position: "relative",
-      left: `${this.pixelsPerMs * (this.element.startTimeWithinParentMs - this.element.trimStartMs - this.element.sourceInMs)}px`,
-      width: `${this.pixelsPerMs * (this.element.durationMs + this.element.trimStartMs + this.element.trimEndMs + this.element.sourceOutMs + this.element.sourceInMs)}px`
+      left: `${this.pixelsPerMs * (this.element.startTimeWithinParentMs - this.element.trimStartMs)}px`,
+      width: `${this.pixelsPerMs * (this.element.durationMs + this.element.trimStartMs + this.element.trimEndMs)}px`
     };
   }
   get trimPortionStyles() {
+    if (this.element.sourceInMs || this.element.sourceOutMs) {
+      return {
+        width: `${this.pixelsPerMs * this.element.durationMs}px`,
+        left: `${this.pixelsPerMs * (this.element.trimStartMs + this.element.sourceInMs)}px`
+      };
+    }
     return {
       width: `${this.pixelsPerMs * this.element.durationMs}px`,
-      left: `${this.pixelsPerMs * (this.element.trimStartMs + this.element.sourceInMs)}px`
+      left: `${this.pixelsPerMs * this.element.trimStartMs}px`
     };
   }
   render() {