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

package/dist/elements/EFAudio.d.ts

@@ -1,5 +1,5 @@
-import { EFMedia } from './EFMedia.ts';
 import { Task } from '@lit/task';
+import { EFMedia } from './EFMedia.js';
 export declare class EFAudio extends EFMedia {
     audioElementRef: import('lit-html/directives/ref.js').Ref<HTMLAudioElement>;
     src: string;

package/dist/elements/EFCaptions.d.ts

@@ -1,8 +1,8 @@
 import { Task } from '@lit/task';
 import { LitElement, PropertyValueMap } from 'lit';
-import { EFAudio } from './EFAudio.ts';
-import { EFVideo } from './EFVideo.ts';
-declare const EFCaptionsActiveWord_base: (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & typeof LitElement;
+import { EFAudio } from './EFAudio.js';
+import { EFVideo } from './EFVideo.js';
+declare const EFCaptionsActiveWord_base: (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & typeof LitElement;
 export declare class EFCaptionsActiveWord extends EFCaptionsActiveWord_base {
     static styles: import('lit').CSSResult[];
     render(): import('lit-html').TemplateResult<1> | undefined;
@@ -13,7 +13,7 @@ export declare class EFCaptionsActiveWord extends EFCaptionsActiveWord_base {
     get startTimeMs(): number;
     get durationMs(): number;
 }
-declare const EFCaptionsSegment_base: (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & typeof LitElement;
+declare const EFCaptionsSegment_base: (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & typeof LitElement;
 export declare class EFCaptionsSegment extends EFCaptionsSegment_base {
     static styles: import('lit').CSSResult[];
     render(): import('lit-html').TemplateResult<1> | undefined;
@@ -44,7 +44,7 @@ export declare class EFCaptionsAfterActiveWord extends EFCaptionsSegment {
     get startTimeMs(): number;
     get durationMs(): number;
 }
-declare const EFCaptions_base: (new (...args: any[]) => import('./EFSourceMixin.ts').EFSourceMixinInterface) & (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & (new (...args: any[]) => import('./FetchMixin.ts').FetchMixinInterface) & typeof LitElement;
+declare const EFCaptions_base: (new (...args: any[]) => import('./EFSourceMixin.js').EFSourceMixinInterface) & (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & (new (...args: any[]) => import('./FetchMixin.js').FetchMixinInterface) & typeof LitElement;
 export declare class EFCaptions extends EFCaptions_base {
     static styles: import('lit').CSSResult[];
     displayMode: "word" | "segment" | "context";

package/dist/elements/EFImage.d.ts

@@ -1,6 +1,6 @@
 import { Task } from '@lit/task';
 import { LitElement } from 'lit';
-declare const EFImage_base: (new (...args: any[]) => import('./EFSourceMixin.ts').EFSourceMixinInterface) & (new (...args: any[]) => import('./FetchMixin.ts').FetchMixinInterface) & typeof LitElement;
+declare const EFImage_base: (new (...args: any[]) => import('./EFSourceMixin.js').EFSourceMixinInterface) & (new (...args: any[]) => import('./FetchMixin.js').FetchMixinInterface) & typeof LitElement;
 export declare class EFImage extends EFImage_base {
     #private;
     static styles: import('lit').CSSResult[];

package/dist/elements/EFMedia.browsertest.d.ts

@@ -1,4 +1,4 @@
-import { EFMedia } from './EFMedia.ts';
+import { EFMedia } from './EFMedia.js';
 declare class TestMedia extends EFMedia {
 }
 declare global {

package/dist/elements/EFMedia.d.ts

@@ -5,7 +5,7 @@ import { VideoAsset } from '../../../assets/src/EncodedAsset.ts';
 import { MP4File } from '../../../assets/src/MP4File.ts';
 import type * as MP4Box from "mp4box";
 export declare const deepGetMediaElements: (element: Element, medias?: EFMedia[]) => EFMedia[];
-declare const EFMedia_base: (new (...args: any[]) => import('./EFSourceMixin.ts').EFSourceMixinInterface) & (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & (new (...args: any[]) => import('./FetchMixin.ts').FetchMixinInterface) & typeof LitElement;
+declare const EFMedia_base: (new (...args: any[]) => import('./EFSourceMixin.js').EFSourceMixinInterface) & (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & (new (...args: any[]) => import('./FetchMixin.js').FetchMixinInterface) & typeof LitElement;
 export declare class EFMedia extends EFMedia_base {
     #private;
     static styles: import('lit').CSSResult[];
@@ -47,7 +47,6 @@ export declare class EFMedia extends EFMedia_base {
     protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     get hasOwnDuration(): boolean;
     get durationMs(): number;
-    get startTimeMs(): number;
     audioBufferTask: Task<readonly [Record<string, File> | undefined, Record<string, {
         segment: TrackSegment;
         track: MP4Box.TrackInfo;

package/dist/elements/{src/elements/EFMedia.js → EFMedia.js}

@@ -4,15 +4,14 @@ import { deepArrayEquals } from "@lit/task/deep-equals.js";
 import debug from "debug";
 import { css, LitElement } from "lit";
 import { property, state } from "lit/decorators.js";
-import { VideoAsset } from "../../../assets/src/EncodedAsset.js";
-import { MP4File } from "../../../assets/src/MP4File.js";
+import { VideoAsset } from "@editframe/assets/EncodedAsset.js";
+import { MP4File } from "@editframe/assets/MP4File.js";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 import { EF_RENDERING } from "../EF_RENDERING.js";
 import { apiHostContext } from "../gui/apiHostContext.js";
 import { EFSourceMixin } from "./EFSourceMixin.js";
-import { EFTemporal } from "./EFTemporal.js";
+import { EFTemporal, isEFTemporal } from "./EFTemporal.js";
 import { FetchMixin } from "./FetchMixin.js";
-import { getStartTimeMs } from "./util.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -62,10 +61,10 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
         return await Promise.all(
           Object.entries(fragmentIndex).map(async ([trackId, track]) => {
             const start = track.initSegment.offset;
-            const end = track.initSegment.offset + track.initSegment.size - 1;
+            const end = track.initSegment.offset + track.initSegment.size;
             const response = await fetch(this.fragmentTrackPath(trackId), {
               signal,
-              headers: { Range: `bytes=${start}-${end}` }
+              headers: { Range: `bytes=${start}-${end - 1}` }
             });
             const buffer = await response.arrayBuffer();
             buffer.fileStart = 0;
@@ -131,14 +130,14 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
           const end = segment.offset + segment.size;
           const response = await fetch(this.fragmentTrackPath(trackId), {
             signal,
-            headers: { Range: `bytes=${start}-${end}` }
+            headers: { Range: `bytes=${start}-${end - 1}` }
           });
           if (nextSegment) {
             const nextStart = nextSegment.offset;
             const nextEnd = nextSegment.offset + nextSegment.size;
             fetch(this.fragmentTrackPath(trackId), {
               signal,
-              headers: { Range: `bytes=${nextStart}-${nextEnd}` }
+              headers: { Range: `bytes=${nextStart}-${nextEnd - 1}` }
             }).then(() => {
               log("Prefetched next segment");
             }).catch((error) => {
@@ -270,6 +269,67 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
     if (changedProperties.has("ownCurrentTimeMs")) {
       this.executeSeek(this.trimAdjustedOwnCurrentTimeMs);
     }
+    if (changedProperties.has("currentTime") || changedProperties.has("ownCurrentTimeMs")) {
+      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;
+        }
+        const target = effect.target;
+        if (!target) {
+          return;
+        }
+        if (target.closest("ef-video, ef-audio") !== this) {
+          return;
+        }
+        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;
+        }
+      }
+    }
   }
   get hasOwnDuration() {
     return true;
@@ -300,9 +360,6 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
     }
     return Math.max(...durations) - this.trimStartMs - this.trimEndMs;
   }
-  get startTimeMs() {
-    return getStartTimeMs(this);
-  }
   #audioContext;
   async fetchAudioSpanningTime(fromMs, toMs) {
     if (this.sourceInMs) {
@@ -325,11 +382,11 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
       return;
     }
     const start = audioTrackIndex.initSegment.offset;
-    const end = audioTrackIndex.initSegment.offset + audioTrackIndex.initSegment.size - 1;
+    const end = audioTrackIndex.initSegment.offset + audioTrackIndex.initSegment.size;
     const audioInitFragmentRequest = this.fetch(
       this.fragmentTrackPath(String(audioTrackId)),
       {
-        headers: { Range: `bytes=${start}-${end}` }
+        headers: { Range: `bytes=${start}-${end - 1}` }
       }
     );
     const fragments = Object.values(audioTrackIndex.segments).filter(
@@ -350,11 +407,11 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
       return;
     }
     const fragmentStart = firstFragment.offset;
-    const fragmentEnd = lastFragment.offset + lastFragment.size - 1;
+    const fragmentEnd = lastFragment.offset + lastFragment.size;
     const audioFragmentRequest = this.fetch(
       this.fragmentTrackPath(String(audioTrackId)),
       {
-        headers: { Range: `bytes=${fragmentStart}-${fragmentEnd}` }
+        headers: { Range: `bytes=${fragmentStart}-${fragmentEnd - 1}` }
       }
     );
     const initResponse = await audioInitFragmentRequest;

package/dist/elements/EFTemporal.browsertest.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-declare const TestTemporal_base: (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & typeof LitElement;
+declare const TestTemporal_base: (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & typeof LitElement;
 declare class TestTemporal extends TestTemporal_base {
 }
 declare global {

package/dist/elements/EFTemporal.d.ts

@@ -1,5 +1,5 @@
 import { LitElement, ReactiveController } from 'lit';
-import { EFTimegroup } from './EFTimegroup.ts';
+import { EFTimegroup } from './EFTimegroup.js';
 import { Task } from '@lit/task';
 export declare const timegroupContext: {
     __context__: EFTimegroup;
@@ -20,6 +20,9 @@ export declare class TemporalMixinInterface {
     set sourceout(value: string);
     get durationMs(): number;
     get startTimeMs(): number;
+    /**
+     * The start time of the element within its parent timegroup.
+     */
     get startTimeWithinParentMs(): number;
     get endTimeMs(): number;
     get ownCurrentTimeMs(): number;

package/dist/elements/{src/elements/EFTemporal.js → EFTemporal.js}

@@ -218,6 +218,9 @@ const EFTemporal = (superClass) => {
       }
       return parent;
     }
+    /**
+     * The start time of the element within its parent timegroup.
+     */
     get startTimeWithinParentMs() {
       if (!this.parentTemporal) {
         return 0;

package/dist/elements/EFTimegroup.browsertest.d.ts

@@ -1,8 +1,8 @@
 import { LitElement } from 'lit';
-declare const TestContext_base: (new (...args: any[]) => import('../gui/ContextMixin.ts').ContextMixinInterface) & typeof LitElement;
+declare const TestContext_base: (new (...args: any[]) => import('../gui/ContextMixin.js').ContextMixinInterface) & typeof LitElement;
 declare class TestContext extends TestContext_base {
 }
-declare const TestTemporal_base: (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & typeof LitElement;
+declare const TestTemporal_base: (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & typeof LitElement;
 declare class TestTemporal extends TestTemporal_base {
     get hasOwnDuration(): boolean;
 }

package/dist/elements/EFTimegroup.d.ts

@@ -1,7 +1,7 @@
 import { Task } from '@lit/task';
 import { LitElement, PropertyValueMap } from 'lit';
 export declare const shallowGetTimegroups: (element: Element, groups?: EFTimegroup[]) => EFTimegroup[];
-declare const EFTimegroup_base: (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & typeof LitElement;
+declare const EFTimegroup_base: (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & typeof LitElement;
 export declare class EFTimegroup extends EFTimegroup_base {
     #private;
     static styles: import('lit').CSSResult;
@@ -28,9 +28,9 @@ export declare class EFTimegroup extends EFTimegroup_base {
         buffer: import('mp4box').MP4ArrayBuffer;
         mp4File: import('../../../assets/src/MP4File.ts').MP4File;
     }[] | undefined)[]>;
-    get childTemporals(): import('./EFTemporal.ts').TemporalMixinInterface[];
+    get childTemporals(): import('./EFTemporal.js').TemporalMixinInterface[];
     protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
-    get contextProvider(): import('../gui/ContextMixin.ts').ContextMixinInterface | null;
+    get contextProvider(): import('../gui/ContextMixin.js').ContextMixinInterface | null;
     /**
      * Returns true if the timegroup should be wrapped with a workbench.
      *

package/dist/elements/EFVideo.d.ts

@@ -1,5 +1,5 @@
 import { Task } from '@lit/task';
-import { EFMedia } from './EFMedia.ts';
+import { EFMedia } from './EFMedia.js';
 declare const EFVideo_base: typeof EFMedia;
 export declare class EFVideo extends EFVideo_base {
     #private;

package/dist/elements/{src/elements/EFVideo.js → EFVideo.js}

@@ -66,8 +66,16 @@ let EFVideo = class extends TWMixin(EFMedia) {
           if (!(frame && ctx)) {
             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/dist/elements/EFWaveform.d.ts

@@ -1,13 +1,15 @@
-import { EFAudio } from './EFAudio.ts';
+import { EFAudio } from './EFAudio.js';
 import { Task } from '@lit/task';
 import { LitElement, PropertyValueMap } from 'lit';
 import { Ref } from 'lit/directives/ref.js';
-import { EFVideo } from './EFVideo.ts';
-declare const EFWaveform_base: (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & typeof LitElement;
+import { EFVideo } from './EFVideo.js';
+declare const EFWaveform_base: (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & typeof LitElement;
 export declare class EFWaveform extends EFWaveform_base {
     static styles: import('lit').CSSResult[];
     canvasRef: Ref<HTMLCanvasElement>;
     private ctx;
+    private resizeObserver?;
+    private mutationObserver?;
     createRenderRoot(): this;
     render(): import('lit-html').TemplateResult<1>;
     mode: "roundBars" | "bars" | "bricks" | "equalizer" | "curve" | "line" | "pixel" | "wave";
@@ -15,6 +17,8 @@ export declare class EFWaveform extends EFWaveform_base {
     targetSelector: string;
     set target(value: string);
     connectedCallback(): void;
+    disconnectedCallback(): void;
+    private resizeCanvas;
     protected initCanvas(): CanvasRenderingContext2D | null;
     protected drawBars(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
     protected drawBricks(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
@@ -24,7 +28,6 @@ export declare class EFWaveform extends EFWaveform_base {
     protected drawCurve(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
     protected drawPixel(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
     protected drawWave(ctx: CanvasRenderingContext2D, frequencyData: Uint8Array): void;
-    private lastFrameTime;
     frameTask: Task<readonly [import('@lit/task').TaskStatus], void>;
     get durationMs(): number;
     get targetElement(): EFAudio | EFVideo;

package/dist/elements/{src/elements/EFWaveform.js → EFWaveform.js}

@@ -26,53 +26,39 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     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);
+          const FRAME_DURATION_MS = 48e3 / 1e3;
+          const FRAME_SMEAR_MS = FRAME_DURATION_MS * 1;
+          const FRAME_SMEAR_S = FRAME_SMEAR_MS / 1e3;
+          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 * 8;
+          audioBufferSource.connect(analyser);
+          const startTime = Math.max(
+            0,
+            (this.targetElement.trimAdjustedOwnCurrentTimeMs - this.targetElement.audioBufferTask.value.startOffsetMs) / 1e3
+          );
+          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;
           }
           switch (this.mode) {
             case "bars":
@@ -118,9 +104,31 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     if (this.targetElement) {
       new CrossUpdateController(this.targetElement, this);
     }
+    this.resizeObserver = new ResizeObserver(() => {
+      this.resizeCanvas();
+    });
+    this.resizeObserver.observe(this);
+    this.mutationObserver = new MutationObserver((mutationsList) => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === "attributes") {
+          this.frameTask.run();
+        }
+      }
+    });
+    this.mutationObserver.observe(this, { attributes: true });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.resizeObserver?.disconnect();
+    this.mutationObserver?.disconnect();
+  }
+  resizeCanvas() {
+    this.ctx = this.initCanvas();
+    if (this.ctx) {
+      this.frameTask.run();
+    }
   }
   initCanvas() {
-    console.count("initCanvas");
     const canvas = this.canvasRef.value;
     if (!canvas) return null;
     const rect = this.getBoundingClientRect();
@@ -135,8 +143,6 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     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;
@@ -151,8 +157,6 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     });
   }
   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;
@@ -176,8 +180,6 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     });
   }
   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;
@@ -196,8 +198,6 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     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;
@@ -216,8 +216,6 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     });
   }
   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;
@@ -237,8 +235,6 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     });
   }
   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;
@@ -257,8 +253,6 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     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;
@@ -273,8 +267,6 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     });
   }
   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;
@@ -285,7 +277,7 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     ctx.moveTo(0, baseline);
     ctx.lineTo(waveWidth, baseline);
     ctx.strokeStyle = this.color;
-    ctx.lineWidth = 2;
+    ctx.lineWidth = 1;
     ctx.stroke();
     frequencyData.forEach((value, i) => {
       const x = i * (waveWidth / frequencyData.length);
@@ -306,7 +298,7 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
   }
   updated(changedProperties) {
     super.updated(changedProperties);
-    if (changedProperties.has("color") || changedProperties.has("mode")) {
+    if (changedProperties.size > 0) {
       this.frameTask.run();
     }
   }

package/dist/elements/TimegroupController.d.ts

@@ -1,5 +1,5 @@
-import { ReactiveController, LitElement } from 'lit';
-import { EFTimegroup } from './EFTimegroup.ts';
+import { LitElement, ReactiveController } from 'lit';
+import { EFTimegroup } from './EFTimegroup.js';
 export declare class TimegroupController implements ReactiveController {
     private host;
     private child;

package/dist/elements/util.d.ts

@@ -1,3 +1,3 @@
-import { EFTimegroup } from './EFTimegroup.ts';
+import { EFTimegroup } from './EFTimegroup.js';
 export declare const getRootTimeGroup: (element: Element) => EFTimegroup | null;
 export declare const getStartTimeMs: (element: Element) => number;

package/dist/gui/ContextMixin.browsertest.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-declare const TestContext_base: (new (...args: any[]) => import('./ContextMixin.ts').ContextMixinInterface) & typeof LitElement;
+declare const TestContext_base: (new (...args: any[]) => import('./ContextMixin.js').ContextMixinInterface) & typeof LitElement;
 declare class TestContext extends TestContext_base {
 }
 declare global {

package/dist/gui/ContextMixin.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 import { createRef } from 'lit/directives/ref.js';
-import { EFTimegroup } from '../elements/EFTimegroup.ts';
+import { EFTimegroup } from '../elements/EFTimegroup.js';
 export declare class ContextMixinInterface extends LitElement {
     signingURL?: string;
     apiHost?: string;

package/dist/{elements/src/gui → gui}/ContextMixin.js

@@ -83,14 +83,14 @@ function ContextMixin(superClass) {
               const scale = stageHeight / canvasHeight;
               if (this.stageScale !== scale) {
                 canvasElement.style.transform = `scale(${scale})`;
-                canvasElement.style.transformOrigin = "top";
+                canvasElement.style.transformOrigin = "center left";
               }
               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 left";
               }
               this.stageScale = scale;
             }
@@ -187,6 +187,12 @@ function ContextMixin(superClass) {
       }
       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"
@@ -213,8 +219,6 @@ function ContextMixin(superClass) {
           fillBuffer();
         }
       };
-      const fromMs = currentMs;
-      const toMs = timegroup.endTimeMs;
       const queueBufferSource = async () => {
         if (currentMs >= toMs) {
           return false;

package/dist/gui/EFFilmstrip.d.ts

@@ -1,11 +1,11 @@
 import { LitElement, PropertyValueMap, ReactiveController, TemplateResult, nothing } from 'lit';
-import { EFAudio } from '../elements/EFAudio.ts';
-import { EFImage } from '../elements/EFImage.ts';
-import { TemporalMixinInterface } from '../elements/EFTemporal.ts';
-import { EFTimegroup } from '../elements/EFTimegroup.ts';
-import { EFVideo } from '../elements/EFVideo.ts';
-import { TimegroupController } from '../elements/TimegroupController.ts';
-import { FocusContext } from './focusContext.ts';
+import { EFAudio } from '../elements/EFAudio.js';
+import { EFImage } from '../elements/EFImage.js';
+import { TemporalMixinInterface } from '../elements/EFTemporal.js';
+import { EFTimegroup } from '../elements/EFTimegroup.js';
+import { EFVideo } from '../elements/EFVideo.js';
+import { TimegroupController } from '../elements/TimegroupController.js';
+import { FocusContext } from './focusContext.js';
 declare class ElementFilmstripController implements ReactiveController {
     private host;
     private filmstrip;