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

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,12 +5,17 @@ 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[];
     currentTimeMs: number;
     efHost?: string;
+    /**
+     * The unique identifier for the media asset.
+     * This property can be set programmatically or via the "asset-id" attribute.
+     * @domAttribute "asset-id"
+     */
     set assetId(value: string | null);
     get assetId(): string | null;
     fragmentIndexPath(): string;

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

@@ -4,8 +4,8 @@ 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";
@@ -279,7 +279,7 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
       const animations = this.getAnimations({ subtree: true });
       this.style.setProperty("--ef-duration", `${this.durationMs}ms`);
       this.style.setProperty(
-        "--ef-transition--duration",
+        "--ef-transition-duration",
         `${this.parentTimegroup?.overlapMs ?? 0}ms`
       );
       this.style.setProperty(

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,32 +1,175 @@
 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;
 };
 export declare class TemporalMixinInterface {
     get hasOwnDuration(): boolean;
+    /**
+     * Used to trim the start of the media.
+     *
+     * This can be set in either seconds or milliseconds.
+     *
+     * For example, `trimstart="10s"` is equivalent to `trimstart="10000ms"`.
+     *
+     * @domAttribute "trimstart"
+     */
     get trimStartMs(): number;
+    /**
+     * Used to trim the end of the media.
+     *
+     * This can be set in either seconds or milliseconds.
+     *
+     * For example, `trimend="10s"` is equivalent to `trimend="10000ms"`.
+     *
+     * @domAttribute "trimend"
+     */
     get trimEndMs(): number;
     set trimStartMs(value: number);
     set trimEndMs(value: number);
     set trimstart(value: string);
     set trimend(value: string);
+    /**
+     * The source in time of the element.
+     *
+     * This is an amount of time to trim off the beginning of the media.
+     *
+     * This can be set in either seconds or milliseconds.
+     *
+     * For example, `sourcein="10s"` is equivalent to `sourcein="10000ms"`.
+     *
+     * If the sourcein time is greater than the duration of the media, the media
+     * will not be played.
+     *
+     * If the media is 20 seconds long, and the `sourcein` value is set to `10s`, the
+     * media will play for 10 seconds, starting at the 10 second mark.
+     *
+     * Can be used in conjunction with `sourceout` to create a trimmed media.
+     *
+     * @domAttribute "sourcein"
+     */
     get sourceInMs(): number;
+    /**
+     * The source out time of the element.
+     *
+     * This is the point in time in the media that will be treated as the end of
+     * the media.
+     *
+     * This can be set in either seconds or milliseconds.
+     *
+     * For example, `sourceout="10s"` is equivalent to `sourceout="10000ms"`.
+     *
+     * If the sourceout time is greater than the duration of the media, the media
+     * will play until the end of the media.
+     *
+     * If the media is 20 seconds long, and the `sourceout` value is set to `10s`,
+     * the media will play for 10 seconds, starting at zero seconds and ending at
+     * the 10 second mark.
+     *
+     * Can be used in conjunction with `sourcein` to create a trimmed media.
+     *
+     * @domAttribute "sourceout"
+     */
     get sourceOutMs(): number;
     set sourceInMs(value: number);
     set sourceOutMs(value: number);
     set sourcein(value: string);
     set sourceout(value: string);
+    /**
+     * @domAttribute "duration"
+     */
     get durationMs(): number;
+    /**
+     * The start time of the element within its root timegroup in milliseconds.
+     *
+     * This is an absolute time according to the highest scoped timegroup the media element is contained within.
+     *
+     * The calculated value will depend on the mode of the timegroup and the offset of the media element.
+     *
+     * If the parent time group is in `sequence` mode, the start time will be the
+     * start time of the previous sibling element plus the previous sibling's duration
+     * minus the overlap of the previous sibling and the current sibling.
+     *
+     * If the parent time group is in `contain` or `fixed` mode, the start time will be
+     * the start time of the parent time group plus the offset of the media element.
+     */
     get startTimeMs(): number;
-    get startTimeWithinParentMs(): number;
+    /**
+     * The end time of the element within its root timegroup in milliseconds.
+     *
+     * This is an absolute time according to the highest scoped timegroup the media
+     * element is contained within. Computed by adding the media's duration to its
+     * start time.
+     *
+     * If the media element has been trimmed, its end time will be calculated according it
+     * its trimmed duration, not its original duration.
+     */
     get endTimeMs(): number;
+    /**
+     * The start time of the element within its parent timegroup in milliseconds.
+     *
+     * This is a relative time according to the closest timegroup the media element
+     * is contained within. Unless the media element has been given any kind of specific offset
+     * it is common for this time to be zero.
+     */
+    get startTimeWithinParentMs(): number;
+    /**
+     * The current time of the element in milliseconds.
+     *
+     * This is a relative time according to the closest timegroup the media element
+     * is contained within.
+     *
+     * This is suitable for determining the percentage of the media that has been
+     * played.
+     */
     get ownCurrentTimeMs(): number;
+    /**
+     * The current time of the element in milliseconds, adjusted for trimming.
+     *
+     * This is suitable for mapping to internal media time codes for audio/video
+     * elements.
+     *
+     * For example, if the media has a `sourcein` value of 10s, when `ownCurrentTimeMs` is 0s,
+     * `trimAdjustedOwnCurrentTimeMs` will be 10s.
+     *
+     *            sourcein=10s     sourceout=10s
+     * /         /                /
+     * |--------|=================|---------|
+     *          ^
+     *          |_
+     *            trimAdjustedOwnCurrentTimeMs === 10s
+     *          |_
+     *            ownCurrentTimeMs === 0s
+     */
     get trimAdjustedOwnCurrentTimeMs(): number;
     set duration(value: string);
     get duration(): string;
+    /**
+     * The offset of the element within its parent timegroup in milliseconds.
+     *
+     * This can be set in either seconds or milliseconds.
+     *
+     * For example, `offset="10s"` is equivalent to `offset="10000ms"`.
+     *
+     * This can be used to create a negative or positive offset for the start time of the media.
+     *
+     * This will change the start time of the media relative to it's otherwise normal start time.
+     *
+     * The duration of the element, or it's parent, or the start and end time of it's temporal siblings will not
+     * be affected by this offset.
+     *
+     * @domAttribute "offset"
+     */
+    set offset(value: string);
+    get offset(): string;
+    /**
+     * A convenience property for getting the nearest containing timegroup of the media element.
+     */
     parentTimegroup?: EFTimegroup;
+    /**
+     * A convenience property for getting the root timegroup of the media element.
+     */
     rootTimegroup?: EFTimegroup;
     frameTask: Task<readonly unknown[], unknown>;
 }

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,13 +1,14 @@
 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;
     _timeGroupContext: this;
     mode: "fixed" | "sequence" | "contain";
     overlapMs: number;
+    fit: "none" | "contain" | "cover";
     set currentTime(time: number);
     get currentTime(): number;
     get currentTimeMs(): number;
@@ -15,6 +16,9 @@ export declare class EFTimegroup extends EFTimegroup_base {
     render(): import('lit-html').TemplateResult<1>;
     maybeLoadTimeFromLocalStorage(): number;
     connectedCallback(): void;
+    disconnectedCallback(): void;
+    private get displayedParent();
+    private updateScale;
     get storageKey(): string;
     get durationMs(): number;
     /**
@@ -28,9 +32,10 @@ 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;
+    private updateAnimations;
+    get contextProvider(): import('../gui/ContextMixin.js').ContextMixinInterface | null;
     /**
      * Returns true if the timegroup should be wrapped with a workbench.
      *

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

@@ -27,7 +27,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _currentTime, _EFTimegroup_instances, addAudioToContext_fn;
+var _currentTime, _resizeObserver, _EFTimegroup_instances, addAudioToContext_fn;
 const log = debug("ef:elements:EFTimegroup");
 const shallowGetTimegroups = (element, groups = []) => {
   for (const child of Array.from(element.children)) {
@@ -47,6 +47,8 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
     __privateAdd(this, _currentTime, 0);
     this.mode = "sequence";
     this.overlapMs = 0;
+    this.fit = "none";
+    __privateAdd(this, _resizeObserver);
     this.frameTask = new Task(this, {
       autoRun: EF_INTERACTIVE,
       args: () => [this.ownCurrentTimeMs, this.currentTimeMs],
@@ -105,6 +107,44 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
     if (this.shouldWrapWithWorkbench()) {
       this.wrapWithWorkbench();
     }
+    __privateSet(this, _resizeObserver, new ResizeObserver(() => this.updateScale()));
+    if (this.parentElement) {
+      __privateGet(this, _resizeObserver).observe(this.parentElement);
+    }
+    this.updateScale();
+    requestAnimationFrame(() => this.updateAnimations());
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    __privateGet(this, _resizeObserver)?.disconnect();
+  }
+  get displayedParent() {
+    let displayedParent = this.parentElement;
+    while (displayedParent && getComputedStyle(displayedParent).display === "contents") {
+      displayedParent = displayedParent.parentElement;
+    }
+    return displayedParent;
+  }
+  updateScale() {
+    if (this.fit === "none") return;
+    const displayedParent = this.displayedParent;
+    if (!displayedParent) return;
+    const contentWidth = this.clientWidth;
+    const contentHeight = this.clientHeight;
+    const containerWidth = displayedParent.clientWidth;
+    const containerHeight = displayedParent.clientHeight;
+    const widthRatio = containerWidth / contentWidth;
+    const heightRatio = containerHeight / contentHeight;
+    let scale;
+    if (this.fit === "contain") {
+      scale = heightRatio;
+      if (contentWidth * scale > containerWidth) {
+        scale = widthRatio;
+      }
+    } else {
+      scale = Math.max(widthRatio, heightRatio);
+    }
+    this.style.transform = `scale(${scale})`;
   }
   get storageKey() {
     if (!this.id) {
@@ -158,64 +198,71 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
   updated(changedProperties) {
     super.updated(changedProperties);
     if (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();
+    }
+  }
+  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)) {
+      const target = effect.target;
+      if (!target) {
+        return;
+      }
+      if (target.closest("ef-timegroup") !== 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;
         }
-        const target = effect.target;
-        if (!target) {
+        animation.currentTime = newTime;
+      } else if (target) {
+        const nearestTimegroup = target.closest("ef-timegroup");
+        if (!nearestTimegroup) {
           return;
         }
-        if (target.closest("ef-timegroup") !== this) {
+        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;
         }
-        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;
-        }
+        animation.currentTime = newTime;
       }
     }
   }
@@ -294,6 +341,7 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
   }
 };
 _currentTime = /* @__PURE__ */ new WeakMap();
+_resizeObserver = /* @__PURE__ */ new WeakMap();
 _EFTimegroup_instances = /* @__PURE__ */ new WeakSet();
 addAudioToContext_fn = async function(audioContext, fromMs, toMs) {
   await this.waitForMediaDurations();
@@ -331,8 +379,8 @@ EFTimegroup.styles = css`
       display: block;
       width: 100%;
       height: 100%;
-      position: absolute;
-      top: 0;
+      position: relative;
+      transform-origin: center center;
     }
   `;
 __decorateClass([
@@ -351,6 +399,9 @@ __decorateClass([
     attribute: "overlap"
   })
 ], EFTimegroup.prototype, "overlapMs", 2);
+__decorateClass([
+  property({ type: String })
+], EFTimegroup.prototype, "fit", 2);
 __decorateClass([
   property({ type: Number })
 ], EFTimegroup.prototype, "currentTime", 1);

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;