@editframe/elements 0.8.0-beta.1 → 0.8.0-beta.10

package/dist/EF_FRAMEGEN.d.ts

@@ -1,5 +1,4 @@
 import { VideoRenderOptions } from '../../assets/src';
-
 declare global {
     interface Window {
         EF_FRAMEGEN?: EfFramegen;

package/dist/elements/CrossUpdateController.d.ts

@@ -1,5 +1,4 @@
 import { LitElement, ReactiveController, ReactiveControllerHost } from 'lit';
-
 export declare class CrossUpdateController implements ReactiveController {
     private host;
     private target;

package/dist/elements/EFAudio.d.ts

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

package/dist/elements/EFCaptions.d.ts

@@ -2,7 +2,6 @@ import { LitElement, PropertyValueMap } from 'lit';
 import { Task } from '@lit/task';
 import { EFVideo } from './EFVideo.ts';
 import { EFAudio } from './EFAudio.ts';
-
 declare const EFCaptionsActiveWord_base: (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & typeof LitElement;
 export declare class EFCaptionsActiveWord extends EFCaptionsActiveWord_base {
     static styles: import('lit').CSSResult[];
@@ -16,11 +15,12 @@ export declare class EFCaptionsActiveWord extends EFCaptionsActiveWord_base {
 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;
 export declare class EFCaptions extends EFCaptions_base {
     static styles: import('lit').CSSResult[];
-    target: null;
+    targetSelector: string;
+    set target(value: string);
     wordStyle: string;
     activeWordContainers: HTMLCollectionOf<EFCaptionsActiveWord>;
     captionsPath(): string;
-    protected md5SumLoader: Task<readonly [null, typeof fetch], string | undefined>;
+    protected md5SumLoader: Task<readonly [string, typeof fetch], string | undefined>;
     private captionsDataTask;
     frameTask: Task<import('@lit/task').TaskStatus[], void>;
     connectedCallback(): void;

package/dist/elements/EFImage.d.ts

@@ -1,6 +1,5 @@
 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;
 export declare class EFImage extends EFImage_base {
     static styles: import('lit').CSSResult[];

package/dist/elements/EFMedia.d.ts

@@ -1,9 +1,8 @@
 import { LitElement, PropertyValueMap } from 'lit';
 import { Task } from '@lit/task';
 import { TrackFragmentIndex, TrackSegment } from '../../../assets/src';
-import { MP4File } from '../../../assets/MP4File.js/src';
-import { VideoAsset } from '../../../assets/EncodedAsset.js/src';
-
+import { MP4File } from '@editframe/assets/MP4File.js';
+import { VideoAsset } from '@editframe/assets/EncodedAsset.js';
 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;
@@ -29,6 +28,7 @@ export declare class EFMedia extends EFMedia_base {
     }[] | undefined], Record<string, {
         segment: TrackSegment;
         track: MP4Box.TrackInfo;
+        nextSegment?: TrackSegment;
     }> | undefined>;
     fetchSeekTask: Task<readonly [{
         trackId: string;
@@ -37,6 +37,7 @@ export declare class EFMedia extends EFMedia_base {
     }[] | undefined, Record<string, {
         segment: TrackSegment;
         track: MP4Box.TrackInfo;
+        nextSegment?: TrackSegment;
     }> | undefined, typeof fetch], Record<string, File> | undefined>;
     videoAssetTask: Task<readonly [Record<string, File> | undefined], VideoAsset | undefined>;
     desiredSeekTimeMs: number;
@@ -48,6 +49,7 @@ export declare class EFMedia extends EFMedia_base {
     audioBufferTask: Task<readonly [Record<string, File> | undefined, Record<string, {
         segment: TrackSegment;
         track: MP4Box.TrackInfo;
+        nextSegment?: TrackSegment;
     }> | undefined], {
         buffer: AudioBuffer;
         startOffsetMs: number;

package/dist/elements/EFSourceMixin.d.ts

@@ -1,5 +1,4 @@
 import { LitElement } from 'lit';
-
 export declare class EFSourceMixinInterface {
     productionSrc(): string;
     src: string;

package/dist/elements/EFTemporal.d.ts

@@ -1,17 +1,19 @@
 import { LitElement, ReactiveController } from 'lit';
 import { EFTimegroup } from './EFTimegroup.ts';
 import { Task } from '@lit/task';
-
 export declare const timegroupContext: {
     __context__: EFTimegroup;
 };
 export declare class TemporalMixinInterface {
     get hasOwnDuration(): boolean;
+    get trimStartMs(): number;
+    get trimEndMs(): number;
     get durationMs(): number;
     get startTimeMs(): number;
     get startTimeWithinParentMs(): number;
     get endTimeMs(): number;
     get ownCurrentTimeMs(): number;
+    get trimAdjustedOwnCurrentTimeMs(): number;
     set duration(value: string);
     get duration(): string;
     parentTimegroup?: EFTimegroup;

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

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

package/dist/elements/EFTimegroup.d.ts

@@ -1,6 +1,5 @@
 import { LitElement, PropertyValueMap } from 'lit';
 import { Task } from '@lit/task';
-
 export declare const shallowGetTimegroups: (element: Element, groups?: EFTimegroup[]) => EFTimegroup[];
 declare const EFTimegroup_base: (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & typeof LitElement;
 export declare class EFTimegroup extends EFTimegroup_base {
@@ -8,19 +7,17 @@ export declare class EFTimegroup extends EFTimegroup_base {
     static styles: import('lit').CSSResult;
     _timeGroupContext: this;
     mode: "fixed" | "sequence" | "contain";
+    overlapMs: number;
     set currentTime(time: number);
     get currentTime(): number;
     get currentTimeMs(): number;
     set currentTimeMs(ms: number);
-    crossoverMs: number;
     render(): import('lit-html').TemplateResult<1>;
     maybeLoadTimeFromLocalStorage(): number;
     connectedCallback(): void;
     get storageKey(): string;
-    get crossoverStartMs(): number;
-    get crossoverEndMs(): number;
     get durationMs(): number;
-    waitForMediaDurations(): Promise<(Record<number, import('packages/assets/dist/Probe.js').TrackFragmentIndex> | undefined)[]>;
+    waitForMediaDurations(): Promise<(Record<number, import('packages/assets/src/Probe.ts').TrackFragmentIndex> | undefined)[]>;
     get childTemporals(): import('./EFTemporal.ts').TemporalMixinInterface[];
     protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     shouldWrapWithWorkbench(): boolean;

package/dist/elements/EFVideo.d.ts

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

package/dist/elements/EFWaveform.d.ts

@@ -3,7 +3,6 @@ import { LitElement } from 'lit';
 import { EFVideo } from './EFVideo.ts';
 import { Task } from '@lit/task';
 import { Ref } from 'lit/directives/ref.js';
-
 declare const EFWaveform_base: (new (...args: any[]) => import('./EFTemporal.ts').TemporalMixinInterface) & typeof LitElement;
 export declare class EFWaveform extends EFWaveform_base {
     static styles: never[];

package/dist/elements/FetchMixin.d.ts

@@ -1,5 +1,4 @@
 import { LitElement } from 'lit';
-
 export declare class FetchMixinInterface {
     fetch: typeof fetch;
 }

package/dist/elements/TimegroupController.d.ts

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

package/dist/elements/durationConverter.d.ts

@@ -2,3 +2,11 @@ export declare const durationConverter: {
     fromAttribute: (value: string) => number;
     toAttribute: (value: number) => string;
 };
+export declare const trimDurationConverter: {
+    fromAttribute: (value: string) => number;
+    toAttribute: (value: number) => string;
+};
+export declare const imageDurationConverter: {
+    fromAttribute: (value: string) => number;
+    toAttribute: (value: number) => string;
+};

package/dist/elements/src/elements/EFCaptions.js

@@ -60,7 +60,7 @@ let EFCaptions = class extends EFSourceMixin(
 ) {
   constructor() {
     super(...arguments);
-    this.target = null;
+    this.targetSelector = "";
     this.wordStyle = "";
     this.activeWordContainers = this.getElementsByTagName("ef-captions-active-word");
     this.md5SumLoader = new Task(this, {
@@ -88,6 +88,9 @@ let EFCaptions = class extends EFSourceMixin(
       }
     });
   }
+  set target(value) {
+    this.targetSelector = value;
+  }
   captionsPath() {
     const targetSrc = this.targetElement.src;
     if (targetSrc.startsWith("editframe://") || targetSrc.startsWith("http")) {
@@ -120,9 +123,9 @@ let EFCaptions = class extends EFSourceMixin(
     let startMs = 0;
     let endMs = 0;
     for (const segment of caption.segments) {
-      if (this.targetElement.ownCurrentTimeMs >= segment.start * 1e3 && this.targetElement.ownCurrentTimeMs <= segment.end * 1e3) {
+      if (this.targetElement.trimAdjustedOwnCurrentTimeMs >= segment.start * 1e3 && this.targetElement.trimAdjustedOwnCurrentTimeMs <= segment.end * 1e3) {
         for (const word of segment.words) {
-          if (this.targetElement.ownCurrentTimeMs >= word.start * 1e3 && this.targetElement.ownCurrentTimeMs <= word.end * 1e3) {
+          if (this.targetElement.trimAdjustedOwnCurrentTimeMs >= word.start * 1e3 && this.targetElement.trimAdjustedOwnCurrentTimeMs <= word.end * 1e3) {
             words.push(word.text);
             startMs = word.start * 1e3;
             endMs = word.end * 1e3;
@@ -137,11 +140,11 @@ let EFCaptions = class extends EFSourceMixin(
     }
   }
   get targetElement() {
-    const target = document.getElementById(this.getAttribute("target") ?? "");
+    const target = document.getElementById(this.targetSelector ?? "");
     if (target instanceof EFAudio || target instanceof EFVideo) {
       return target;
     }
-    throw new Error("Invalid target, must be an EFAudio  or EFVideo element");
+    throw new Error("Invalid target, must be an EFAudio or EFVideo element");
   }
 };
 EFCaptions.styles = [
@@ -152,8 +155,8 @@ EFCaptions.styles = [
     `
 ];
 __decorateClass([
-  property({ type: String, attribute: "target" })
-], EFCaptions.prototype, "target", 2);
+  property({ type: String, attribute: "target", reflect: true })
+], EFCaptions.prototype, "targetSelector", 2);
 __decorateClass([
   property({ attribute: "word-style" })
 ], EFCaptions.prototype, "wordStyle", 2);

package/dist/elements/src/elements/EFMedia.js

@@ -101,10 +101,13 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
           const segment = index.segments.toReversed().find((segment2) => {
             return segment2.dts / track.timescale * 1e3 <= seekToMs;
           });
+          const nextSegment = index.segments.find((segment2) => {
+            return segment2.dts / track.timescale * 1e3 > seekToMs;
+          });
           if (!segment) {
             return;
           }
-          result[index.track] = { segment, track };
+          result[index.track] = { segment, track, nextSegment };
         }
         return result;
       }
@@ -121,13 +124,27 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
           return;
         }
         const files = {};
-        for (const [trackId, { segment, track }] of Object.entries(seekResult)) {
+        for (const [trackId, { segment, track, nextSegment }] of Object.entries(
+          seekResult
+        )) {
           const start = segment.offset;
           const end = segment.offset + segment.size;
           const response = await fetch(this.fragmentTrackPath(trackId), {
             signal,
             headers: { Range: `bytes=${start}-${end}` }
           });
+          if (nextSegment) {
+            const nextStart = nextSegment.offset;
+            const nextEnd = nextSegment.offset + nextSegment.size;
+            fetch(this.fragmentTrackPath(trackId), {
+              signal,
+              headers: { Range: `bytes=${nextStart}-${nextEnd}` }
+            }).then(() => {
+              log("Prefetched next segment");
+            }).catch((error) => {
+              log("Failed to prefetch next segment", error);
+            });
+          }
           const initSegment = Object.values(initSegments).find(
             (initSegment2) => initSegment2.trackId === String(track.id)
           );
@@ -238,7 +255,7 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
   }
   updated(changedProperties) {
     if (changedProperties.has("ownCurrentTimeMs")) {
-      this.executeSeek(this.ownCurrentTimeMs);
+      this.executeSeek(this.trimAdjustedOwnCurrentTimeMs);
     }
   }
   get hasOwnDuration() {
@@ -256,15 +273,15 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
     if (durations.length === 0) {
       return 0;
     }
-    return Math.max(...durations);
+    return Math.max(...durations) - this.trimStartMs - this.trimEndMs;
   }
   get startTimeMs() {
     return getStartTimeMs(this);
   }
   #audioContext;
   async fetchAudioSpanningTime(fromMs, toMs) {
-    fromMs -= this.startTimeMs;
-    toMs -= this.startTimeMs;
+    fromMs -= this.startTimeMs - this.trimStartMs;
+    toMs -= this.startTimeMs - this.trimStartMs;
     await this.trackFragmentIndexLoader.taskComplete;
     const audioTrackId = this.defaultAudioTrackId;
     if (!audioTrackId) {
@@ -318,8 +335,8 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
     });
     return {
       blob: audioBlob,
-      startMs: firstFragment.dts / audioTrackIndex.timescale * 1e3,
-      endMs: lastFragment.dts / audioTrackIndex.timescale * 1e3 + lastFragment.duration / audioTrackIndex.timescale * 1e3
+      startMs: firstFragment.dts / audioTrackIndex.timescale * 1e3 - this.trimStartMs,
+      endMs: lastFragment.dts / audioTrackIndex.timescale * 1e3 + lastFragment.duration / audioTrackIndex.timescale * 1e3 - this.trimEndMs
     };
   }
 }

package/dist/elements/src/elements/EFTemporal.js

@@ -85,6 +85,9 @@ const EFTemporal = (superClass) => {
     constructor() {
       super(...arguments);
       this._offsetMs = 0;
+      this._trimStartMs = 0;
+      this._trimEndMs = 0;
+      this._startOffsetMs = 0;
       this.rootTimegroup = this.getRootTimegroup();
       this.frameTask = new Task(this, {
         autoRun: EF_INTERACTIVE,
@@ -112,6 +115,15 @@ const EFTemporal = (superClass) => {
     get parentTimegroup() {
       return this.#parentTimegroup;
     }
+    get trimStartMs() {
+      return this._trimStartMs;
+    }
+    get trimEndMs() {
+      return this._trimEndMs;
+    }
+    get startOffsetMs() {
+      return this._startOffsetMs;
+    }
     getRootTimegroup() {
       let parent = this.tagName === "EF-TIMEGROUP" ? this : this.parentTimegroup;
       while (parent?.parentTimegroup) {
@@ -169,9 +181,9 @@ const EFTemporal = (superClass) => {
           }
           startTimeMsCache.set(
             this,
-            previous.startTimeMs + previous.durationMs
+            previous.startTimeMs + previous.durationMs - parentTimegroup.overlapMs
           );
-          return previous.startTimeMs + previous.durationMs;
+          return previous.startTimeMs + previous.durationMs - parentTimegroup.overlapMs;
         }
         case "contain":
         case "fixed":
@@ -196,6 +208,22 @@ const EFTemporal = (superClass) => {
       }
       return 0;
     }
+    /**
+     * Used to calculate the internal currentTimeMs of the element. This is useful
+     * for mapping to internal media time codes for audio/video elements.
+     */
+    get trimAdjustedOwnCurrentTimeMs() {
+      if (this.rootTimegroup) {
+        return Math.min(
+          Math.max(
+            0,
+            this.rootTimegroup.currentTimeMs - this.startTimeMs + this.trimStartMs
+          ),
+          this.durationMs + Math.abs(this.startOffsetMs) + this.trimStartMs
+        );
+      }
+      return 0;
+    }
   }
   __decorateClass([
     consume({ context: timegroupContext, subscribe: true }),
@@ -215,6 +243,27 @@ const EFTemporal = (superClass) => {
       converter: durationConverter
     })
   ], TemporalMixinClass.prototype, "_durationMs", 2);
+  __decorateClass([
+    property({
+      type: Number,
+      attribute: "trimstart",
+      converter: durationConverter
+    })
+  ], TemporalMixinClass.prototype, "_trimStartMs", 2);
+  __decorateClass([
+    property({
+      type: Number,
+      attribute: "trimend",
+      converter: durationConverter
+    })
+  ], TemporalMixinClass.prototype, "_trimEndMs", 2);
+  __decorateClass([
+    property({
+      type: Number,
+      attribute: "startoffset",
+      converter: durationConverter
+    })
+  ], TemporalMixinClass.prototype, "_startOffsetMs", 2);
   __decorateClass([
     state()
   ], TemporalMixinClass.prototype, "rootTimegroup", 2);

package/dist/elements/src/elements/EFTimegroup.js

@@ -7,6 +7,7 @@ import { EFTemporal, shallowGetTemporalElements, isEFTemporal, timegroupContext
 import { TimegroupController } from "./TimegroupController.js";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 import { deepGetMediaElements } from "./EFMedia.js";
+import { durationConverter } from "./durationConverter.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __typeError = (msg) => {
@@ -44,7 +45,7 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
     this._timeGroupContext = this;
     __privateAdd(this, _currentTime, 0);
     this.mode = "sequence";
-    this.crossoverMs = 0;
+    this.overlapMs = 0;
     this.frameTask = new Task(this, {
       autoRun: EF_INTERACTIVE,
       args: () => [this.ownCurrentTimeMs, this.currentTimeMs],
@@ -110,29 +111,18 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
     }
     return `ef-timegroup-${this.id}`;
   }
-  get crossoverStartMs() {
-    const parentTimeGroup = this.parentTimegroup;
-    if (!parentTimeGroup || !this.previousElementSibling) {
-      return 0;
-    }
-    return parentTimeGroup.crossoverMs;
-  }
-  get crossoverEndMs() {
-    const parentTimeGroup = this.parentTimegroup;
-    if (!parentTimeGroup || !this.nextElementSibling) {
-      return 0;
-    }
-    return parentTimeGroup.crossoverMs;
-  }
   get durationMs() {
     switch (this.mode) {
       case "fixed":
         return super.durationMs;
       case "sequence": {
         let duration = 0;
-        for (const node of this.childTemporals) {
+        this.childTemporals.forEach((node, index) => {
+          if (index > 0) {
+            duration -= this.overlapMs;
+          }
           duration += node.durationMs;
-        }
+        });
         return duration;
       }
       case "contain": {
@@ -168,9 +158,14 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
       }
       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-duration",
-        `${this.durationMs + this.crossoverEndMs + this.crossoverStartMs}ms`
+        "--ef-transition-out-start",
+        `${this.durationMs - (this.parentTimegroup?.overlapMs ?? 0)}ms`
       );
       for (const animation of animations) {
         if (animation.playState === "running") {
@@ -311,7 +306,7 @@ EFTimegroup.styles = css`
       display: block;
       width: 100%;
       height: 100%;
-      position: relative;
+      position: absolute;
       top: 0;
     }
   `;
@@ -324,28 +319,16 @@ __decorateClass([
     attribute: "mode"
   })
 ], EFTimegroup.prototype, "mode", 2);
-__decorateClass([
-  property({ type: Number })
-], EFTimegroup.prototype, "currentTime", 1);
 __decorateClass([
   property({
-    attribute: "crossover",
-    converter: {
-      fromAttribute: (value) => {
-        if (value.endsWith("ms")) {
-          return Number.parseFloat(value);
-        }
-        if (value.endsWith("s")) {
-          return Number.parseFloat(value) * 1e3;
-        }
-        throw new Error(
-          "`crossover` MUST be in milliseconds or seconds (10s, 10000ms)"
-        );
-      },
-      toAttribute: (value) => `${value}ms`
-    }
+    type: Number,
+    converter: durationConverter,
+    attribute: "overlap"
   })
-], EFTimegroup.prototype, "crossoverMs", 2);
+], EFTimegroup.prototype, "overlapMs", 2);
+__decorateClass([
+  property({ type: Number })
+], EFTimegroup.prototype, "currentTime", 1);
 EFTimegroup = __decorateClass([
   customElement("ef-timegroup")
 ], EFTimegroup);

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

@@ -148,7 +148,7 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     if (!this.targetElement.audioBufferTask.value) {
       return;
     }
-    if (this.targetElement.ownCurrentTimeMs > 0) {
+    if (this.targetElement.trimAdjustedOwnCurrentTimeMs > 0) {
       const audioContext = new OfflineAudioContext(2, 48e3 / 25, 48e3);
       const audioBufferSource = audioContext.createBufferSource();
       audioBufferSource.buffer = this.targetElement.audioBufferTask.value.buffer;
@@ -159,7 +159,7 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
         0,
         Math.max(
           0,
-          (this.targetElement.ownCurrentTimeMs - this.targetElement.audioBufferTask.value.startOffsetMs) / 1e3
+          (this.targetElement.trimAdjustedOwnCurrentTimeMs - this.targetElement.audioBufferTask.value.startOffsetMs) / 1e3
         ),
         48e3 / 1e3
       );
@@ -202,7 +202,7 @@ let EFWaveform = class extends EFTemporal(TWMixin(LitElement)) {
     if (target instanceof EFAudio || target instanceof EFVideo) {
       return target;
     }
-    throw new Error("Invalid target, must be an EFAudio element");
+    throw new Error("Invalid target, must be an EFAudio or EFVideo element");
   }
 };
 EFWaveform.styles = [];

package/dist/elements/src/elements/parseTimeToMs.js

@@ -1,4 +1,5 @@
 const parseTimeToMs = (time) => {
+  console.log("parseTimeToMs", time);
   if (time.endsWith("ms")) {
     return Number.parseFloat(time);
   }