@editframe/elements 0.12.0-beta.2 → 0.12.0-beta.21

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");
 

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) {}

package/src/gui/ContextMixin.ts

@@ -3,13 +3,13 @@ import type { LitElement } from "lit";
 import { property, state } from "lit/decorators.js";
 
 import { createRef } from "lit/directives/ref.js";
-import type { EFTimegroup } from "../elements/EFTimegroup.ts";
-import { apiHostContext } from "./apiHostContext.ts";
-import { efContext } from "./efContext.ts";
-import { fetchContext } from "./fetchContext.ts";
-import { type FocusContext, focusContext } from "./focusContext.ts";
-import { focusedElementContext } from "./focusedElementContext.ts";
-import { loopContext, playingContext } from "./playingContext.ts";
+import type { EFTimegroup } from "../elements/EFTimegroup.js";
+import { apiHostContext } from "./apiHostContext.js";
+import { efContext } from "./efContext.js";
+import { fetchContext } from "./fetchContext.js";
+import { type FocusContext, focusContext } from "./focusContext.js";
+import { focusedElementContext } from "./focusedElementContext.js";
+import { loopContext, playingContext } from "./playingContext.js";
 
 export declare class ContextMixinInterface extends LitElement {
   signingURL?: string;
@@ -136,18 +136,19 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
           const canvasHeight = canvasElement.clientHeight;
           const stageRatio = stageWidth / stageHeight;
           const canvasRatio = canvasWidth / canvasHeight;
+
           if (stageRatio > canvasRatio) {
             const scale = stageHeight / canvasHeight;
             if (this.stageScale !== scale) {
               canvasElement.style.transform = `scale(${scale})`;
-              canvasElement.style.transformOrigin = "top";
+              canvasElement.style.transformOrigin = "center";
             }
             this.stageScale = scale;
           } else {
             const scale = stageWidth / canvasWidth;
             if (this.stageScale !== scale) {
               canvasElement.style.transform = `scale(${scale})`;
-              canvasElement.style.transformOrigin = "top";
+              canvasElement.style.transformOrigin = "center";
             }
             this.stageScale = scale;
           }
@@ -251,6 +252,14 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
       await timegroup.waitForMediaDurations();
 
       let currentMs = timegroup.currentTimeMs;
+      const fromMs = currentMs;
+      const toMs = timegroup.endTimeMs;
+
+      if (fromMs >= toMs) {
+        this.pause();
+        return;
+      }
+
       let bufferCount = 0;
       this.#playbackAudioContext = new AudioContext({
         latencyHint: "playback",
@@ -280,9 +289,6 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
         }
       };
 
-      const fromMs = currentMs;
-      const toMs = timegroup.endTimeMs;
-
       const queueBufferSource = async () => {
         if (currentMs >= toMs) {
           return false;

package/src/gui/EFFilmstrip.ts

@@ -17,21 +17,21 @@ import {
 import { createRef, ref } from "lit/directives/ref.js";
 import { styleMap } from "lit/directives/style-map.js";
 
-import { EFAudio } from "../elements/EFAudio.ts";
-import { EFCaptions, EFCaptionsActiveWord } from "../elements/EFCaptions.ts";
-import { EFImage } from "../elements/EFImage.ts";
-import type { TemporalMixinInterface } from "../elements/EFTemporal.ts";
-import { EFTimegroup } from "../elements/EFTimegroup.ts";
-import { EFVideo } from "../elements/EFVideo.ts";
-import { EFWaveform } from "../elements/EFWaveform.ts";
-import { TimegroupController } from "../elements/TimegroupController.ts";
-import { msToTimeCode } from "../msToTimeCode.ts";
-import type { EFPreview } from "./EFPreview.ts";
-import type { EFWorkbench } from "./EFWorkbench.ts";
-import { TWMixin } from "./TWMixin.ts";
-import { type FocusContext, focusContext } from "./focusContext.ts";
-import { focusedElementContext } from "./focusedElementContext.ts";
-import { loopContext, playingContext } from "./playingContext.ts";
+import { EFAudio } from "../elements/EFAudio.js";
+import { EFCaptions, EFCaptionsActiveWord } from "../elements/EFCaptions.js";
+import { EFImage } from "../elements/EFImage.js";
+import type { TemporalMixinInterface } from "../elements/EFTemporal.js";
+import { EFTimegroup } from "../elements/EFTimegroup.js";
+import { EFVideo } from "../elements/EFVideo.js";
+import { EFWaveform } from "../elements/EFWaveform.js";
+import { TimegroupController } from "../elements/TimegroupController.js";
+import { msToTimeCode } from "../msToTimeCode.js";
+import type { EFPreview } from "./EFPreview.js";
+import type { EFWorkbench } from "./EFWorkbench.js";
+import { TWMixin } from "./TWMixin.js";
+import { type FocusContext, focusContext } from "./focusContext.js";
+import { focusedElementContext } from "./focusedElementContext.js";
+import { loopContext, playingContext } from "./playingContext.js";
 
 class ElementFilmstripController implements ReactiveController {
   constructor(

package/src/gui/EFPreview.ts

@@ -1,9 +1,9 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
 import { ref } from "lit/directives/ref.js";
 
-import { TWMixin } from "./TWMixin.ts";
-import { ContextMixin } from "./ContextMixin.ts";
+import { ContextMixin } from "./ContextMixin.js";
+import { TWMixin } from "./TWMixin.js";
 
 @customElement("ef-preview")
 export class EFPreview extends ContextMixin(TWMixin(LitElement)) {
@@ -26,7 +26,9 @@ export class EFPreview extends ContextMixin(TWMixin(LitElement)) {
         <slot
           ${ref(this.canvasRef)}
           class="inline-block"
+          name="canvas"
         ></slot>
+        <slot name="controls"></slot>
       </div>
     `;
   }

package/src/gui/EFScrubber.ts

@@ -3,9 +3,9 @@ import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 
 import { ref } from "lit/directives/ref.js";
-import type { ContextMixinInterface } from "./ContextMixin.ts";
-import { efContext } from "./efContext.ts";
-import { playingContext } from "./playingContext.ts";
+import type { ContextMixinInterface } from "./ContextMixin.js";
+import { efContext } from "./efContext.js";
+import { playingContext } from "./playingContext.js";
 
 @customElement("ef-scrubber")
 export class EFScrubber extends LitElement {

package/src/gui/EFTimeDisplay.ts

@@ -1,8 +1,8 @@
 import { consume } from "@lit/context";
 import { LitElement, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
-import type { ContextMixinInterface } from "./ContextMixin.ts";
-import { efContext } from "./efContext.ts";
+import type { ContextMixinInterface } from "./ContextMixin.js";
+import { efContext } from "./efContext.js";
 
 @customElement("ef-time-display")
 export class EFTimeDisplay extends LitElement {

package/src/gui/EFToggleLoop.ts

@@ -1,9 +1,9 @@
-import { css, html, LitElement } from "lit";
-import { customElement } from "lit/decorators.js";
 import { consume } from "@lit/context";
+import { LitElement, css, html } from "lit";
+import { customElement } from "lit/decorators.js";
 
-import { efContext } from "./efContext.ts";
-import type { ContextMixinInterface } from "./ContextMixin.ts";
+import type { ContextMixinInterface } from "./ContextMixin.js";
+import { efContext } from "./efContext.js";
 
 @customElement("ef-toggle-loop")
 export class EFToggleLoop extends LitElement {

package/src/gui/EFTogglePlay.ts

@@ -1,10 +1,10 @@
 import { consume } from "@lit/context";
 import { LitElement, css, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement } from "lit/decorators.js";
 
-import type { ContextMixinInterface } from "./ContextMixin.ts";
-import { efContext } from "./efContext.ts";
-import { playingContext } from "./playingContext.ts";
+import type { ContextMixinInterface } from "./ContextMixin.js";
+import { efContext } from "./efContext.js";
+import { playingContext } from "./playingContext.js";
 
 @customElement("ef-toggle-play")
 export class EFTogglePlay extends LitElement {
@@ -23,12 +23,6 @@ export class EFTogglePlay extends LitElement {
   @consume({ context: playingContext, subscribe: true })
   playing = false;
 
-  @property({ type: String })
-  play = '<button class="text-2xl cursor-pointer">▶️</button>';
-
-  @property({ type: String })
-  pause = '<button class="text-2xl cursor-pointer">⏸️</button>';
-
   render() {
     return html`
       <div

package/src/gui/EFWorkbench.ts

@@ -2,8 +2,8 @@ import { LitElement, type PropertyValueMap, css, html } from "lit";
 import { customElement, eventOptions } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 
-import { ContextMixin } from "./ContextMixin.ts";
-import { TWMixin } from "./TWMixin.ts";
+import { ContextMixin } from "./ContextMixin.js";
+import { TWMixin } from "./TWMixin.js";
 
 @customElement("ef-workbench")
 export class EFWorkbench extends ContextMixin(TWMixin(LitElement)) {

package/src/gui/efContext.ts

@@ -1,5 +1,5 @@
 import { createContext } from "@lit/context";
-import type { ContextMixinInterface } from "./ContextMixin.ts";
+import type { ContextMixinInterface } from "./ContextMixin.js";
 
 export const efContext = createContext<ContextMixinInterface | null>(
   Symbol("efContext"),