@editframe/elements 0.12.0-beta.8 → 0.13.0-beta.2

package/src/elements/EFTimegroup.ts

@@ -4,17 +4,17 @@ import debug from "debug";
 import { LitElement, type PropertyValueMap, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE.ts";
-import { isContextMixin } from "../gui/ContextMixin.ts";
-import { deepGetMediaElements } from "./EFMedia.ts";
+import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
+import { isContextMixin } from "../gui/ContextMixin.js";
+import { deepGetMediaElements } from "./EFMedia.js";
 import {
   EFTemporal,
   isEFTemporal,
   shallowGetTemporalElements,
   timegroupContext,
-} from "./EFTemporal.ts";
-import { TimegroupController } from "./TimegroupController.ts";
-import { durationConverter } from "./durationConverter.ts";
+} from "./EFTemporal.js";
+import { TimegroupController } from "./TimegroupController.js";
+import { durationConverter } from "./durationConverter.js";
 
 const log = debug("ef:elements:EFTimegroup");
 
@@ -39,8 +39,8 @@ export class EFTimegroup extends EFTemporal(LitElement) {
       display: block;
       width: 100%;
       height: 100%;
-      position: absolute;
-      top: 0;
+      position: relative;
+      transform-origin: center center;
     }
   `;
 
@@ -62,6 +62,11 @@ export class EFTimegroup extends EFTemporal(LitElement) {
   })
   overlapMs = 0;
 
+  @property({ type: String })
+  fit: "none" | "contain" | "cover" = "none";
+
+  #resizeObserver?: ResizeObserver;
+
   @property({ type: Number })
   set currentTime(time: number) {
     this.#currentTime = Math.max(0, Math.min(time, this.durationMs / 1000));
@@ -115,6 +120,69 @@ export class EFTimegroup extends EFTemporal(LitElement) {
     if (this.shouldWrapWithWorkbench()) {
       this.wrapWithWorkbench();
     }
+
+    // Create resize observer to handle scaling
+    this.#resizeObserver = new ResizeObserver(() => this.updateScale());
+    if (this.parentElement) {
+      this.#resizeObserver.observe(this.parentElement);
+    }
+    this.updateScale();
+
+    // Initialize animations when component is first connected
+    // Regrettably, this doesn't work without the requestAnimationFrame
+    requestAnimationFrame(() => this.updateAnimations());
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#resizeObserver?.disconnect();
+  }
+
+  private get displayedParent(): Element | null {
+    let displayedParent = this.parentElement;
+    while (
+      displayedParent &&
+      getComputedStyle(displayedParent).display === "contents"
+    ) {
+      displayedParent = displayedParent.parentElement;
+    }
+    return displayedParent;
+  }
+
+  private updateScale() {
+    if (this.fit === "none") return;
+
+    const displayedParent = this.displayedParent;
+    if (!displayedParent) return;
+
+    // Get the natural size of the content
+    const contentWidth = this.clientWidth;
+    const contentHeight = this.clientHeight;
+
+    // Get the available space from displayed parent
+    const containerWidth = displayedParent.clientWidth;
+    const containerHeight = displayedParent.clientHeight;
+
+    // Calculate scale ratios
+    const widthRatio = containerWidth / contentWidth;
+    const heightRatio = containerHeight / contentHeight;
+
+    let scale: number;
+    if (this.fit === "contain") {
+      // Use height ratio for contain mode to ensure it fits vertically
+      scale = heightRatio;
+
+      // If width would overflow after scaling, use width ratio instead
+      if (contentWidth * scale > containerWidth) {
+        scale = widthRatio;
+      }
+    } else {
+      // cover
+      scale = Math.max(widthRatio, heightRatio);
+    }
+
+    // Apply transform with fixed center origin
+    this.style.transform = `scale(${scale})`;
   }
 
   get storageKey() {
@@ -178,74 +246,79 @@ export class EFTimegroup extends EFTemporal(LitElement) {
       changedProperties.has("currentTime") ||
       changedProperties.has("ownCurrentTimeMs")
     ) {
-      const timelineTimeMs = (this.rootTimegroup ?? this).currentTimeMs;
-      if (
-        this.startTimeMs > timelineTimeMs ||
-        this.endTimeMs < timelineTimeMs
-      ) {
-        this.style.display = "none";
+      this.updateAnimations();
+    }
+  }
+
+  private updateAnimations() {
+    this.style.setProperty(
+      "--ef-progress",
+      `${Math.max(0, Math.min(1, this.currentTimeMs / this.durationMs)) * 100}%`,
+    );
+    const timelineTimeMs = (this.rootTimegroup ?? this).currentTimeMs;
+    if (this.startTimeMs > timelineTimeMs || this.endTimeMs < timelineTimeMs) {
+      this.style.display = "none";
+      return;
+    }
+    this.style.display = "";
+
+    const animations = this.getAnimations({ subtree: true });
+    this.style.setProperty("--ef-duration", `${this.durationMs}ms`);
+    this.style.setProperty(
+      "--ef-transition-duration",
+      `${this.parentTimegroup?.overlapMs ?? 0}ms`,
+    );
+    this.style.setProperty(
+      "--ef-transition-out-start",
+      `${this.durationMs - (this.parentTimegroup?.overlapMs ?? 0)}ms`,
+    );
+
+    for (const animation of animations) {
+      if (animation.playState === "running") {
+        animation.pause();
+      }
+      const effect = animation.effect;
+      if (!(effect && effect instanceof KeyframeEffect)) {
         return;
       }
-      this.style.display = "";
-
-      const animations = this.getAnimations({ subtree: true });
-      this.style.setProperty("--ef-duration", `${this.durationMs}ms`);
-      this.style.setProperty(
-        "--ef-transition--duration",
-        `${this.parentTimegroup?.overlapMs ?? 0}ms`,
-      );
-      this.style.setProperty(
-        "--ef-transition-out-start",
-        `${this.durationMs - (this.parentTimegroup?.overlapMs ?? 0)}ms`,
-      );
-
-      for (const animation of animations) {
-        if (animation.playState === "running") {
-          animation.pause();
-        }
-        const effect = animation.effect;
-        if (!(effect && effect instanceof KeyframeEffect)) {
-          return;
-        }
-        const target = effect.target;
-        // TODO: better generalize work avoidance for temporal elements
-        if (!target) {
+      const target = effect.target;
+      // TODO: better generalize work avoidance for temporal elements
+      if (!target) {
+        return;
+      }
+      if (target.closest("ef-timegroup") !== this) {
+        return;
+      }
+
+      // Important to avoid going to the end of the animation
+      // or it will reset awkwardly.
+      if (isEFTemporal(target)) {
+        const timing = effect.getTiming();
+        const duration = Number(timing.duration) ?? 0;
+        const delay = Number(timing.delay);
+        const newTime = Math.floor(
+          Math.min(target.ownCurrentTimeMs, duration - 1 + delay),
+        );
+        if (Number.isNaN(newTime)) {
           return;
         }
-        if (target.closest("ef-timegroup") !== this) {
+        animation.currentTime = newTime;
+      } else if (target) {
+        const nearestTimegroup = target.closest("ef-timegroup");
+        if (!nearestTimegroup) {
           return;
         }
+        const timing = effect.getTiming();
+        const duration = Number(timing.duration) ?? 0;
+        const delay = Number(timing.delay);
+        const newTime = Math.floor(
+          Math.min(nearestTimegroup.ownCurrentTimeMs, duration - 1 + delay),
+        );
 
-        // Important to avoid going to the end of the animation
-        // or it will reset awkwardly.
-        if (isEFTemporal(target)) {
-          const timing = effect.getTiming();
-          const duration = Number(timing.duration) ?? 0;
-          const delay = Number(timing.delay);
-          const newTime = Math.floor(
-            Math.min(target.ownCurrentTimeMs, duration - 1 + delay),
-          );
-          if (Number.isNaN(newTime)) {
-            return;
-          }
-          animation.currentTime = newTime;
-        } else if (target) {
-          const nearestTimegroup = target.closest("ef-timegroup");
-          if (!nearestTimegroup) {
-            return;
-          }
-          const timing = effect.getTiming();
-          const duration = Number(timing.duration) ?? 0;
-          const delay = Number(timing.delay);
-          const newTime = Math.floor(
-            Math.min(nearestTimegroup.ownCurrentTimeMs, duration - 1 + delay),
-          );
-
-          if (Number.isNaN(newTime)) {
-            return;
-          }
-          animation.currentTime = newTime;
+        if (Number.isNaN(newTime)) {
+          return;
         }
+        animation.currentTime = newTime;
       }
     }
   }

package/src/elements/EFVideo.ts

@@ -3,8 +3,8 @@ import { css, html } from "lit";
 import { customElement } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 
-import { TWMixin } from "../gui/TWMixin.ts";
-import { EFMedia } from "./EFMedia.ts";
+import { TWMixin } from "../gui/TWMixin.js";
+import { EFMedia } from "./EFMedia.js";
 
 @customElement("ef-video")
 export class EFVideo extends TWMixin(EFMedia) {
@@ -78,9 +78,20 @@ export class EFVideo extends TWMixin(EFMedia) {
           return;
         }
 
-        this.canvasElement.width = frame?.codedWidth;
-        this.canvasElement.height = frame?.codedHeight;
+        if (frame?.codedWidth && frame?.codedHeight) {
+          if (
+            this.canvasElement.width !== frame.codedWidth ||
+            this.canvasElement.height !== frame.codedHeight
+          ) {
+            this.canvasElement.width = frame.codedWidth;
+            this.canvasElement.height = frame.codedHeight;
+          }
+        }
 
+        if (frame.format === null) {
+          console.warn("Frame format is null", frame);
+          return seekToMs;
+        }
         ctx.drawImage(
           frame,
           0,

package/src/elements/EFWaveform.ts

@@ -1,14 +1,14 @@
-import { EFAudio } from "./EFAudio.ts";
+import { EFAudio } from "./EFAudio.js";
 
 import { Task } from "@lit/task";
 import { LitElement, type PropertyValueMap, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { type Ref, createRef, ref } from "lit/directives/ref.js";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE.ts";
-import { TWMixin } from "../gui/TWMixin.ts";
-import { CrossUpdateController } from "./CrossUpdateController.ts";
-import { EFTemporal } from "./EFTemporal.ts";
-import { EFVideo } from "./EFVideo.ts";
+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";
 
 @customElement("ef-waveform")
 export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
@@ -24,6 +24,9 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
   canvasRef: Ref<HTMLCanvasElement> = createRef();
   private ctx: CanvasRenderingContext2D | null = null;
 
+  private resizeObserver?: ResizeObserver;
+  private mutationObserver?: MutationObserver;
+
   createRenderRoot() {
     return this;
   }
@@ -61,10 +64,43 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     if (this.targetElement) {
       new CrossUpdateController(this.targetElement, this);
     }
+
+    // Initialize ResizeObserver
+    this.resizeObserver = new ResizeObserver(() => {
+      this.resizeCanvas();
+    });
+
+    // Observe the host element
+    this.resizeObserver.observe(this);
+
+    // Initialize MutationObserver
+    this.mutationObserver = new MutationObserver((mutationsList) => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === "attributes") {
+          this.frameTask.run();
+        }
+      }
+    });
+
+    // Observe attribute changes on the element
+    this.mutationObserver.observe(this, { attributes: true });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    // Disconnect the observers when the element is removed from the DOM
+    this.resizeObserver?.disconnect();
+    this.mutationObserver?.disconnect();
+  }
+
+  private resizeCanvas() {
+    this.ctx = this.initCanvas();
+    if (this.ctx) {
+      this.frameTask.run(); // Redraw the canvas
+    }
   }
 
   protected initCanvas() {
-    console.count("initCanvas");
     const canvas = this.canvasRef.value;
     if (!canvas) return null;
 
@@ -87,9 +123,6 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
   }
 
   protected drawBars(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array) {
-    ctx.strokeStyle = this.color;
-    ctx.fillStyle = this.color;
-
     const canvas = ctx.canvas;
     const waveWidth = canvas.width / devicePixelRatio;
     const waveHeight = canvas.height / devicePixelRatio;
@@ -111,9 +144,6 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     ctx: CanvasRenderingContext2D,
     frequencyData: Uint8Array,
   ) {
-    ctx.strokeStyle = this.color;
-    ctx.fillStyle = this.color;
-
     const canvas = ctx.canvas;
     const waveWidth = canvas.width / devicePixelRatio;
     const waveHeight = canvas.height / devicePixelRatio;
@@ -144,9 +174,6 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
   }
 
   protected drawLine(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array) {
-    ctx.strokeStyle = this.color;
-    ctx.fillStyle = this.color;
-
     const canvas = ctx.canvas;
     const waveWidth = canvas.width / devicePixelRatio;
     const waveHeight = canvas.height / devicePixelRatio;
@@ -173,9 +200,6 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     ctx: CanvasRenderingContext2D,
     frequencyData: Uint8Array,
   ) {
-    ctx.strokeStyle = this.color;
-    ctx.fillStyle = this.color;
-
     const canvas = ctx.canvas;
     const waveWidth = canvas.width / devicePixelRatio;
     const waveHeight = canvas.height / devicePixelRatio;
@@ -202,9 +226,6 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     ctx: CanvasRenderingContext2D,
     frequencyData: Uint8Array,
   ) {
-    ctx.strokeStyle = this.color;
-    ctx.fillStyle = this.color;
-
     const canvas = ctx.canvas;
     const waveWidth = canvas.width / devicePixelRatio;
     const waveHeight = canvas.height / devicePixelRatio;
@@ -234,9 +255,6 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     ctx: CanvasRenderingContext2D,
     frequencyData: Uint8Array,
   ) {
-    ctx.strokeStyle = this.color;
-    ctx.fillStyle = this.color;
-
     const canvas = ctx.canvas;
     const waveWidth = canvas.width / devicePixelRatio;
     const waveHeight = canvas.height / devicePixelRatio;
@@ -263,9 +281,6 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     ctx: CanvasRenderingContext2D,
     frequencyData: Uint8Array,
   ) {
-    ctx.strokeStyle = this.color;
-    ctx.fillStyle = this.color;
-
     const canvas = ctx.canvas;
     const waveWidth = canvas.width / devicePixelRatio;
     const waveHeight = canvas.height / devicePixelRatio;
@@ -284,9 +299,6 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
   }
 
   protected drawWave(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array) {
-    ctx.strokeStyle = this.color;
-    ctx.fillStyle = this.color;
-
     const canvas = ctx.canvas;
     const waveWidth = canvas.width / devicePixelRatio;
     const waveHeight = canvas.height / devicePixelRatio;
@@ -300,7 +312,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     ctx.moveTo(0, baseline);
     ctx.lineTo(waveWidth, baseline);
     ctx.strokeStyle = this.color;
-    ctx.lineWidth = 2;
+    ctx.lineWidth = 1;
     ctx.stroke();
 
     // Draw bars
@@ -313,21 +325,10 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     });
   }
 
-  // Add this property to store the last frame timestamp
-  private lastFrameTime = 0;
-
   frameTask = new Task(this, {
     autoRun: EF_INTERACTIVE,
     args: () => [this.targetElement.audioBufferTask.status] as const,
     task: async () => {
-      // Calculate and log time since last frame
-      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;
       // Lazy initialize canvas, if we don't stash it, we re-init
       // every frame, which blanks the canvas, causing flicker.
@@ -338,61 +339,44 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
       if (!this.targetElement.audioBufferTask.value) return;
 
       if (this.targetElement.trimAdjustedOwnCurrentTimeMs > 0) {
-        const FRAMES_TO_ANALYZE = 4;
-        const FRAME_DURATION_MS = 48000 / 100;
-
-        const multiFrameData: Uint8Array[] = [];
-
-        for (let i = 0; i < FRAMES_TO_ANALYZE; i++) {
-          const frameOffset = i - Math.floor(FRAMES_TO_ANALYZE / 2);
-          const audioContext = new OfflineAudioContext(2, 48000 / 25, 48000);
-          const audioBufferSource = audioContext.createBufferSource();
-          audioBufferSource.buffer =
-            this.targetElement.audioBufferTask.value.buffer;
-          const analyser = audioContext.createAnalyser();
-
-          // Adjust FFT size for better frequency resolution
-          analyser.fftSize = 128 / 2;
-          // Adjust smoothing to make peaks more pronounced
-          analyser.smoothingTimeConstant = 0.1;
-
-          audioBufferSource.connect(analyser);
-
-          const startTime = Math.max(
-            0,
-            (this.targetElement.trimAdjustedOwnCurrentTimeMs -
-              this.targetElement.audioBufferTask.value.startOffsetMs) /
-              1000 +
-              (frameOffset * FRAME_DURATION_MS) / 1000,
-          );
-
-          audioBufferSource.start(0, startTime, FRAME_DURATION_MS / 1000);
-          await audioContext.startRendering();
-
-          const frameData = new Uint8Array(analyser.frequencyBinCount);
-          analyser.getByteFrequencyData(frameData);
-
-          multiFrameData.push(frameData);
-        }
-
-        const dataLength = multiFrameData[0]?.length ?? 0;
-
-        // Average and enhance dynamics
-        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;
-
-          // Enhance dynamics by applying a subtle exponential curve
-          avg = (avg / 255) ** 1.2 * 255;
-
-          smoothedData[i] = Math.round(avg);
+        const FRAME_DURATION_MS = 48000 / 1000;
+        const FRAME_SMEAR_MS = FRAME_DURATION_MS * 1;
+        const FRAME_SMEAR_S = FRAME_SMEAR_MS / 1000;
+
+        const audioContext = new OfflineAudioContext(2, 48000 / 25, 48000);
+        const audioBufferSource = audioContext.createBufferSource();
+        audioBufferSource.buffer =
+          this.targetElement.audioBufferTask.value.buffer;
+        const analyser = audioContext.createAnalyser();
+
+        // Adjust FFT size for better frequency resolution
+        analyser.fftSize = 128 * 8;
+
+        audioBufferSource.connect(analyser);
+
+        const startTime = Math.max(
+          0,
+          (this.targetElement.trimAdjustedOwnCurrentTimeMs -
+            this.targetElement.audioBufferTask.value.startOffsetMs) /
+            1000,
+        );
+
+        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;
+        } else {
         }
 
-        // Use smoothedData for rendering
         switch (this.mode) {
           case "bars":
             this.drawBars(ctx, smoothedData);
@@ -438,8 +422,8 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
   protected updated(changedProperties: PropertyValueMap<this>): void {
     super.updated(changedProperties);
 
-    // Trigger a redraw if color or mode changes
-    if (changedProperties.has("color") || changedProperties.has("mode")) {
+    // Trigger a redraw if any property changes
+    if (changedProperties.size > 0) {
       // Request a new frame
       this.frameTask.run();
     }

package/src/elements/FetchMixin.ts

@@ -1,8 +1,8 @@
-import type { LitElement } from "lit";
 import { consume } from "@lit/context";
+import type { LitElement } from "lit";
 import { state } from "lit/decorators/state.js";
 
-import { fetchContext } from "../gui/fetchContext.ts";
+import { fetchContext } from "../gui/fetchContext.js";
 
 export declare class FetchMixinInterface {
   fetch: typeof fetch;

package/src/elements/TimegroupController.ts

@@ -1,5 +1,5 @@
-import type { ReactiveController, LitElement } from "lit";
-import type { EFTimegroup } from "./EFTimegroup.ts";
+import type { LitElement, ReactiveController } from "lit";
+import type { EFTimegroup } from "./EFTimegroup.js";
 
 export class TimegroupController implements ReactiveController {
   constructor(

package/src/elements/durationConverter.ts

@@ -1,4 +1,4 @@
-import { parseTimeToMs } from "./parseTimeToMs.ts";
+import { parseTimeToMs } from "./parseTimeToMs.js";
 
 export const durationConverter = {
   fromAttribute: (value: string): number => parseTimeToMs(value),

package/src/elements/util.ts

@@ -1,4 +1,4 @@
-import { EFTimegroup } from "./EFTimegroup.ts";
+import { EFTimegroup } from "./EFTimegroup.js";
 
 export const getRootTimeGroup = (element: Element): EFTimegroup | null => {
   let bestCandidate: EFTimegroup | null = null;

package/src/gui/ContextMixin.browsertest.ts

@@ -3,11 +3,11 @@ import { customElement } from "lit/decorators/custom-element.js";
 import { describe, expect, test, vi } from "vitest";
 
 import { consume } from "@lit/context";
-import { ContextMixin } from "./ContextMixin.ts";
-import { apiHostContext } from "./apiHostContext.ts";
+import { ContextMixin } from "./ContextMixin.js";
+import { apiHostContext } from "./apiHostContext.js";
 
 // Required to test timeupdate event, we need a duration, and timegroups are a quick way to do that
-import "../elements/EFTimegroup.ts";
+import "../elements/EFTimegroup.js";
 
 @customElement("test-context")
 class TestContext extends ContextMixin(LitElement) {}