@editframe/elements 0.16.8-beta.0 → 0.18.3-beta.0

package/dist/gui/EFFilmstrip.js

@@ -1,111 +1,84 @@
-import { consume } from "@lit/context";
-import { LitElement, css, html, nothing } from "lit";
-import { property, customElement, state, eventOptions } from "lit/decorators.js";
-import { createRef, ref } from "lit/directives/ref.js";
-import { styleMap } from "lit/directives/style-map.js";
-import { EFAudio } from "../elements/EFAudio.js";
-import { EFCaptions, EFCaptionsActiveWord } from "../elements/EFCaptions.js";
-import { EFImage } from "../elements/EFImage.js";
+import { focusContext } from "./focusContext.js";
+import { focusedElementContext } from "./focusedElementContext.js";
+import { loopContext, playingContext } from "./playingContext.js";
+import { targetTimegroupContext } from "./ContextMixin.js";
+import { TimegroupController } from "../elements/TimegroupController.js";
 import { EFTimegroup } from "../elements/EFTimegroup.js";
+import { EFImage } from "../elements/EFImage.js";
+import { TWMixin } from "./TWMixin2.js";
+import { EFAudio } from "../elements/EFAudio.js";
 import { EFVideo } from "../elements/EFVideo.js";
+import { EFCaptions, EFCaptionsActiveWord } from "../elements/EFCaptions.js";
 import { EFWaveform } from "../elements/EFWaveform.js";
-import { TimegroupController } from "../elements/TimegroupController.js";
 import { msToTimeCode } from "../msToTimeCode.js";
-import { targetTimegroupContext } from "./ContextMixin.js";
-import { TWMixin } from "./TWMixin.js";
-import { focusContext } from "./focusContext.js";
-import { focusedElementContext } from "./focusedElementContext.js";
-import { playingContext, loopContext } from "./playingContext.js";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
+import { consume } from "@lit/context";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, eventOptions, property, state } from "lit/decorators.js";
+import _decorate from "@oxc-project/runtime/helpers/decorate";
+import { createRef, ref } from "lit/directives/ref.js";
+import { styleMap } from "lit/directives/style-map.js";
+var ElementFilmstripController = class {
+	constructor(host, filmstrip) {
+		this.host = host;
+		this.filmstrip = filmstrip;
+		this.host.addController(this);
+	}
+	remove() {
+		this.host.removeController(this);
+	}
+	hostDisconnected() {
+		this.host.removeController(this);
+	}
+	hostUpdated() {
+		this.filmstrip.requestUpdate();
+	}
 };
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-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 __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _EFFilmstrip_instances, bindToTargetTimegroup_fn, _handleKeyPress, contextElement_get;
-class ElementFilmstripController {
-  constructor(host, filmstrip) {
-    this.host = host;
-    this.filmstrip = filmstrip;
-    this.host.addController(this);
-  }
-  remove() {
-    this.host.removeController(this);
-  }
-  hostDisconnected() {
-    this.host.removeController(this);
-  }
-  hostUpdated() {
-    this.filmstrip.requestUpdate();
-  }
-}
-const CommonEffectKeys = /* @__PURE__ */ new Set([
-  "offset",
-  "easing",
-  "composite",
-  "computedOffset"
+const CommonEffectKeys = new Set([
+	"offset",
+	"easing",
+	"composite",
+	"computedOffset"
 ]);
-class FilmstripItem extends TWMixin(LitElement) {
-  constructor() {
-    super(...arguments);
-    this.element = new EFTimegroup();
-    this.pixelsPerMs = 0.04;
-  }
-  static {
-    this.styles = [
-      css`
+var FilmstripItem = class extends TWMixin(LitElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.element = new EFTimegroup();
+		this.pixelsPerMs = .04;
+	}
+	static {
+		this.styles = [css`
       :host {
         display: block;
       }
-    `
-    ];
-  }
-  get isFocused() {
-    return this.element && this.focusContext?.focusedElement === this.element;
-  }
-  // Gutter styles represent the entire source media.
-  // If there is no trim, then the gutter and trim portion are the same.
-  get gutterStyles() {
-    return {
-      position: "relative",
-      left: `${this.pixelsPerMs * (this.element.startTimeWithinParentMs - this.element.sourceStartMs)}px`,
-      width: `${this.pixelsPerMs * (this.element.intrinsicDurationMs ?? this.element.durationMs)}px`
-    };
-  }
-  // Trim portion is the section of source that will be placed in the timeline
-  // If there is no trim, then the gutter and trim portion are the same.
-  get trimPortionStyles() {
-    return {
-      width: `${this.pixelsPerMs * this.element.durationMs}px`,
-      left: `${this.pixelsPerMs * this.element.sourceStartMs}px`
-    };
-  }
-  render() {
-    return html`<div style=${styleMap(this.gutterStyles)}>
+    `];
+	}
+	get isFocused() {
+		return this.element && this.focusContext?.focusedElement === this.element;
+	}
+	get gutterStyles() {
+		return {
+			position: "relative",
+			left: `${this.pixelsPerMs * (this.element.startTimeWithinParentMs - this.element.sourceStartMs)}px`,
+			width: `${this.pixelsPerMs * (this.element.intrinsicDurationMs ?? this.element.durationMs)}px`
+		};
+	}
+	get trimPortionStyles() {
+		return {
+			width: `${this.pixelsPerMs * this.element.durationMs}px`,
+			left: `${this.pixelsPerMs * this.element.sourceStartMs}px`
+		};
+	}
+	render() {
+		return html`<div style=${styleMap(this.gutterStyles)}>
       <div
         class="bg-slate-300"
         ?data-focused=${this.isFocused}
         @mouseenter=${() => {
-      if (this.focusContext) {
-        this.focusContext.focusedElement = this.element;
-      }
-    }}
+			if (this.focusContext) this.focusContext.focusedElement = this.element;
+		}}
         @mouseleave=${() => {
-      if (this.focusContext) {
-        this.focusContext.focusedElement = null;
-      }
-    }}
+			if (this.focusContext) this.focusContext.focusedElement = null;
+		}}
       >
         <div
           ?data-focused=${this.isFocused}
@@ -117,168 +90,133 @@ class FilmstripItem extends TWMixin(LitElement) {
       </div>
       ${this.renderChildren()}
     </div>`;
-  }
-  renderChildren() {
-    return renderFilmstripChildren(
-      Array.from(this.element.children),
-      this.pixelsPerMs
-    );
-  }
-  contents() {
-    return html``;
-  }
-  animations() {
-    const animations = this.element.getAnimations();
-    return animations.map((animation) => {
-      const effect = animation.effect;
-      if (!(effect instanceof KeyframeEffect)) {
-        return nothing;
-      }
-      const start = effect.getTiming().delay ?? 0;
-      const duration = effect.getTiming().duration;
-      if (duration === null) {
-        return nothing;
-      }
-      const keyframes = effect.getKeyframes();
-      const firstKeyframe = keyframes[0];
-      if (!firstKeyframe) {
-        return nothing;
-      }
-      const properties = new Set(Object.keys(firstKeyframe));
-      for (const key of CommonEffectKeys) {
-        properties.delete(key);
-      }
-      return html`<div
+	}
+	renderChildren() {
+		return renderFilmstripChildren(Array.from(this.element.children), this.pixelsPerMs);
+	}
+	contents() {
+		return html``;
+	}
+	animations() {
+		const animations = this.element.getAnimations();
+		return animations.map((animation) => {
+			const effect = animation.effect;
+			if (!(effect instanceof KeyframeEffect)) return nothing;
+			const start = effect.getTiming().delay ?? 0;
+			const duration = effect.getTiming().duration;
+			if (duration === null) return nothing;
+			const keyframes = effect.getKeyframes();
+			const firstKeyframe = keyframes[0];
+			if (!firstKeyframe) return nothing;
+			const properties = new Set(Object.keys(firstKeyframe));
+			for (const key of CommonEffectKeys) properties.delete(key);
+			return html`<div
         class="relative h-[5px] bg-blue-500 opacity-50"
         label="animation"
         style=${styleMap({
-        left: `${this.pixelsPerMs * start}px`,
-        width: `${this.pixelsPerMs * Number(duration)}px`
-      })}
+				left: `${this.pixelsPerMs * start}px`,
+				width: `${this.pixelsPerMs * Number(duration)}px`
+			})}
       >
         <!-- <div class="text-nowrap">${Array.from(properties).join(" ")}</div> -->
         ${effect.getKeyframes().map((keyframe) => {
-        return html`<div
+				return html`<div
             class="absolute top-0 h-full w-1 bg-red-500"
-            style=${styleMap({
-          left: `${this.pixelsPerMs * keyframe.computedOffset * Number(duration)}px`
-        })}
+            style=${styleMap({ left: `${this.pixelsPerMs * keyframe.computedOffset * Number(duration)}px` })}
           ></div>`;
-      })}
+			})}
       </div>`;
-    });
-  }
-  update(changedProperties) {
-    if (changedProperties.has("element") && this.element instanceof LitElement) {
-      this.filmstripController?.remove();
-      this.filmstripController = new ElementFilmstripController(
-        this.element,
-        this
-      );
-    }
-    super.update(changedProperties);
-  }
-}
-__decorateClass([
-  consume({ context: focusContext, subscribe: true })
-], FilmstripItem.prototype, "focusContext", 2);
-__decorateClass([
-  consume({ context: focusedElementContext, subscribe: true })
-], FilmstripItem.prototype, "focusedElement", 2);
-__decorateClass([
-  property({ type: Object, attribute: false })
-], FilmstripItem.prototype, "element", 2);
-__decorateClass([
-  property({ type: Number })
-], FilmstripItem.prototype, "pixelsPerMs", 2);
-let EFAudioFilmstrip = class extends FilmstripItem {
-  contents() {
-    return html``;
-  }
+		});
+	}
+	update(changedProperties) {
+		if (changedProperties.has("element") && this.element instanceof LitElement) {
+			this.filmstripController?.remove();
+			this.filmstripController = new ElementFilmstripController(this.element, this);
+		}
+		super.update(changedProperties);
+	}
 };
-EFAudioFilmstrip = __decorateClass([
-  customElement("ef-audio-filmstrip")
-], EFAudioFilmstrip);
-let EFVideoFilmstrip = class extends FilmstripItem {
-  contents() {
-    return html` 📼 `;
-  }
+_decorate([consume({
+	context: focusContext,
+	subscribe: true
+})], FilmstripItem.prototype, "focusContext", void 0);
+_decorate([consume({
+	context: focusedElementContext,
+	subscribe: true
+})], FilmstripItem.prototype, "focusedElement", void 0);
+_decorate([property({
+	type: Object,
+	attribute: false
+})], FilmstripItem.prototype, "element", void 0);
+_decorate([property({ type: Number })], FilmstripItem.prototype, "pixelsPerMs", void 0);
+let EFAudioFilmstrip = class EFAudioFilmstrip$1 extends FilmstripItem {
+	contents() {
+		return html``;
+	}
 };
-EFVideoFilmstrip = __decorateClass([
-  customElement("ef-video-filmstrip")
-], EFVideoFilmstrip);
-let EFCaptionsFilmstrip = class extends FilmstripItem {
-  contents() {
-    return html` 📝 `;
-  }
+EFAudioFilmstrip = _decorate([customElement("ef-audio-filmstrip")], EFAudioFilmstrip);
+let EFVideoFilmstrip = class EFVideoFilmstrip$1 extends FilmstripItem {
+	contents() {
+		return html` 📼 `;
+	}
 };
-EFCaptionsFilmstrip = __decorateClass([
-  customElement("ef-captions-filmstrip")
-], EFCaptionsFilmstrip);
-let EFWaveformFilmstrip = class extends FilmstripItem {
-  contents() {
-    return html` 🌊 `;
-  }
-  renderChildren() {
-    return nothing;
-  }
+EFVideoFilmstrip = _decorate([customElement("ef-video-filmstrip")], EFVideoFilmstrip);
+let EFCaptionsFilmstrip = class EFCaptionsFilmstrip$1 extends FilmstripItem {
+	contents() {
+		return html` 📝 `;
+	}
 };
-EFWaveformFilmstrip = __decorateClass([
-  customElement("ef-waveform-filmstrip")
-], EFWaveformFilmstrip);
-let EFImageFilmstrip = class extends FilmstripItem {
-  contents() {
-    return html` 🖼️ `;
-  }
+EFCaptionsFilmstrip = _decorate([customElement("ef-captions-filmstrip")], EFCaptionsFilmstrip);
+let EFWaveformFilmstrip = class EFWaveformFilmstrip$1 extends FilmstripItem {
+	contents() {
+		return html` 🌊 `;
+	}
+	renderChildren() {
+		return nothing;
+	}
 };
-EFImageFilmstrip = __decorateClass([
-  customElement("ef-image-filmstrip")
-], EFImageFilmstrip);
-let EFTimegroupFilmstrip = class extends FilmstripItem {
-  contents() {
-    return html`
+EFWaveformFilmstrip = _decorate([customElement("ef-waveform-filmstrip")], EFWaveformFilmstrip);
+let EFImageFilmstrip = class EFImageFilmstrip$1 extends FilmstripItem {
+	contents() {
+		return html` 🖼️ `;
+	}
+};
+EFImageFilmstrip = _decorate([customElement("ef-image-filmstrip")], EFImageFilmstrip);
+let EFTimegroupFilmstrip = class EFTimegroupFilmstrip$1 extends FilmstripItem {
+	contents() {
+		return html`
       <span>TIME GROUP</span>
-      ${renderFilmstripChildren(
-      Array.from(this.element.children || []),
-      this.pixelsPerMs
-    )}
+      ${renderFilmstripChildren(Array.from(this.element.children || []), this.pixelsPerMs)}
     </div>
     `;
-  }
+	}
 };
-EFTimegroupFilmstrip = __decorateClass([
-  customElement("ef-timegroup-filmstrip")
-], EFTimegroupFilmstrip);
-let EFHTMLFilmstrip = class extends FilmstripItem {
-  contents() {
-    return html`
+EFTimegroupFilmstrip = _decorate([customElement("ef-timegroup-filmstrip")], EFTimegroupFilmstrip);
+let EFHTMLFilmstrip = class EFHTMLFilmstrip$1 extends FilmstripItem {
+	contents() {
+		return html`
       <span>${this.element.tagName}</span>
-      ${renderFilmstripChildren(
-      Array.from(this.element.children || []),
-      this.pixelsPerMs
-    )}
+      ${renderFilmstripChildren(Array.from(this.element.children || []), this.pixelsPerMs)}
     `;
-  }
+	}
 };
-EFHTMLFilmstrip = __decorateClass([
-  customElement("ef-html-filmstrip")
-], EFHTMLFilmstrip);
-let EFHierarchyItem = class extends TWMixin(LitElement) {
-  constructor() {
-    super(...arguments);
-    this.element = new EFTimegroup();
-  }
-  get icon() {
-    return "📼";
-  }
-  get isFocused() {
-    return this.element && this.focusContext?.focusedElement === this.element;
-  }
-  displayLabel() {
-    return nothing;
-  }
-  render() {
-    return html` 
+EFHTMLFilmstrip = _decorate([customElement("ef-html-filmstrip")], EFHTMLFilmstrip);
+let EFHierarchyItem = class EFHierarchyItem$1 extends TWMixin(LitElement) {
+	constructor(..._args2) {
+		super(..._args2);
+		this.element = new EFTimegroup();
+	}
+	get icon() {
+		return "📼";
+	}
+	get isFocused() {
+		return this.element && this.focusContext?.focusedElement === this.element;
+	}
+	displayLabel() {
+		return nothing;
+	}
+	render() {
+		return html` 
       <div>
         <div
           class="peer 
@@ -286,15 +224,11 @@ let EFHierarchyItem = class extends TWMixin(LitElement) {
           bg-slate-200 pl-2 text-xs font-mono hover:bg-slate-400 data-[focused]:bg-slate-400"
           ?data-focused=${this.isFocused}
           @mouseenter=${() => {
-      if (this.focusContext) {
-        this.focusContext.focusedElement = this.element;
-      }
-    }}
+			if (this.focusContext) this.focusContext.focusedElement = this.element;
+		}}
           @mouseleave=${() => {
-      if (this.focusContext) {
-        this.focusContext.focusedElement = null;
-      }
-    }}
+			if (this.focusContext) this.focusContext.focusedElement = null;
+		}}
         >
           ${this.icon} ${this.displayLabel()}
         </div>
@@ -304,328 +238,273 @@ let EFHierarchyItem = class extends TWMixin(LitElement) {
           ${this.renderChildren()}
         </div>
       </div>`;
-  }
-  renderChildren() {
-    return renderHierarchyChildren(Array.from(this.element.children));
-  }
+	}
+	renderChildren() {
+		return renderHierarchyChildren(Array.from(this.element.children));
+	}
 };
-__decorateClass([
-  property({ type: Object, attribute: false })
-], EFHierarchyItem.prototype, "element", 2);
-__decorateClass([
-  consume({ context: focusContext })
-], EFHierarchyItem.prototype, "focusContext", 2);
-__decorateClass([
-  consume({ context: focusedElementContext, subscribe: true })
-], EFHierarchyItem.prototype, "focusedElement", 2);
-EFHierarchyItem = __decorateClass([
-  customElement("ef-hierarchy-item")
-], EFHierarchyItem);
-let EFTimegroupHierarchyItem = class extends EFHierarchyItem {
-  get icon() {
-    return "🕒";
-  }
-  displayLabel() {
-    return this.element.mode ?? "(no mode)";
-  }
+_decorate([property({
+	type: Object,
+	attribute: false
+})], EFHierarchyItem.prototype, "element", void 0);
+_decorate([consume({ context: focusContext })], EFHierarchyItem.prototype, "focusContext", void 0);
+_decorate([consume({
+	context: focusedElementContext,
+	subscribe: true
+})], EFHierarchyItem.prototype, "focusedElement", void 0);
+EFHierarchyItem = _decorate([customElement("ef-hierarchy-item")], EFHierarchyItem);
+let EFTimegroupHierarchyItem = class EFTimegroupHierarchyItem$1 extends EFHierarchyItem {
+	get icon() {
+		return "🕒";
+	}
+	displayLabel() {
+		return this.element.mode ?? "(no mode)";
+	}
 };
-EFTimegroupHierarchyItem = __decorateClass([
-  customElement("ef-timegroup-hierarchy-item")
-], EFTimegroupHierarchyItem);
-let EFAudioHierarchyItem = class extends EFHierarchyItem {
-  get icon() {
-    return "🔊";
-  }
-  displayLabel() {
-    return this.element.src ?? "(no src)";
-  }
+EFTimegroupHierarchyItem = _decorate([customElement("ef-timegroup-hierarchy-item")], EFTimegroupHierarchyItem);
+let EFAudioHierarchyItem = class EFAudioHierarchyItem$1 extends EFHierarchyItem {
+	get icon() {
+		return "🔊";
+	}
+	displayLabel() {
+		return this.element.src ?? "(no src)";
+	}
 };
-EFAudioHierarchyItem = __decorateClass([
-  customElement("ef-audio-hierarchy-item")
-], EFAudioHierarchyItem);
-let EFVideoHierarchyItem = class extends EFHierarchyItem {
-  get icon() {
-    return "📼";
-  }
-  displayLabel() {
-    return this.element.src ?? "(no src)";
-  }
+EFAudioHierarchyItem = _decorate([customElement("ef-audio-hierarchy-item")], EFAudioHierarchyItem);
+let EFVideoHierarchyItem = class EFVideoHierarchyItem$1 extends EFHierarchyItem {
+	get icon() {
+		return "📼";
+	}
+	displayLabel() {
+		return this.element.src ?? "(no src)";
+	}
 };
-EFVideoHierarchyItem = __decorateClass([
-  customElement("ef-video-hierarchy-item")
-], EFVideoHierarchyItem);
-let EFCaptionsHierarchyItem = class extends EFHierarchyItem {
-  get icon() {
-    return "📝 Captions";
-  }
+EFVideoHierarchyItem = _decorate([customElement("ef-video-hierarchy-item")], EFVideoHierarchyItem);
+let EFCaptionsHierarchyItem = class EFCaptionsHierarchyItem$1 extends EFHierarchyItem {
+	get icon() {
+		return "📝 Captions";
+	}
 };
-EFCaptionsHierarchyItem = __decorateClass([
-  customElement("ef-captions-hierarchy-item")
-], EFCaptionsHierarchyItem);
-let EFCaptionsActiveWordHierarchyItem = class extends EFHierarchyItem {
-  get icon() {
-    return "🗣️ Active Word";
-  }
+EFCaptionsHierarchyItem = _decorate([customElement("ef-captions-hierarchy-item")], EFCaptionsHierarchyItem);
+let EFCaptionsActiveWordHierarchyItem = class EFCaptionsActiveWordHierarchyItem$1 extends EFHierarchyItem {
+	get icon() {
+		return "🗣️ Active Word";
+	}
 };
-EFCaptionsActiveWordHierarchyItem = __decorateClass([
-  customElement("ef-captions-active-word-hierarchy-item")
-], EFCaptionsActiveWordHierarchyItem);
-let EFWaveformHierarchyItem = class extends EFHierarchyItem {
-  get icon() {
-    return "🌊";
-  }
-  renderChildren() {
-    return nothing;
-  }
+EFCaptionsActiveWordHierarchyItem = _decorate([customElement("ef-captions-active-word-hierarchy-item")], EFCaptionsActiveWordHierarchyItem);
+let EFWaveformHierarchyItem = class EFWaveformHierarchyItem$1 extends EFHierarchyItem {
+	get icon() {
+		return "🌊";
+	}
+	renderChildren() {
+		return nothing;
+	}
 };
-EFWaveformHierarchyItem = __decorateClass([
-  customElement("ef-waveform-hierarchy-item")
-], EFWaveformHierarchyItem);
-let EFImageHierarchyItem = class extends EFHierarchyItem {
-  get icon() {
-    return "🖼️";
-  }
-  displayLabel() {
-    return this.element.src ?? "(no src)";
-  }
+EFWaveformHierarchyItem = _decorate([customElement("ef-waveform-hierarchy-item")], EFWaveformHierarchyItem);
+let EFImageHierarchyItem = class EFImageHierarchyItem$1 extends EFHierarchyItem {
+	get icon() {
+		return "🖼️";
+	}
+	displayLabel() {
+		return this.element.src ?? "(no src)";
+	}
 };
-EFImageHierarchyItem = __decorateClass([
-  customElement("ef-image-hierarchy-item")
-], EFImageHierarchyItem);
-let EFHTMLHierarchyItem = class extends EFHierarchyItem {
-  get icon() {
-    return html`<code>${`<${this.element.tagName.toLowerCase()}>`}</code>`;
-  }
+EFImageHierarchyItem = _decorate([customElement("ef-image-hierarchy-item")], EFImageHierarchyItem);
+let EFHTMLHierarchyItem = class EFHTMLHierarchyItem$1 extends EFHierarchyItem {
+	get icon() {
+		return html`<code>${`<${this.element.tagName.toLowerCase()}>`}</code>`;
+	}
 };
-EFHTMLHierarchyItem = __decorateClass([
-  customElement("ef-html-hierarchy-item")
-], EFHTMLHierarchyItem);
+EFHTMLHierarchyItem = _decorate([customElement("ef-html-hierarchy-item")], EFHTMLHierarchyItem);
 const renderHierarchyChildren = (children) => {
-  return children.map((child) => {
-    if (child instanceof HTMLElement && child.dataset?.efHidden) {
-      return nothing;
-    }
-    if (child instanceof EFTimegroup) {
-      return html`<ef-timegroup-hierarchy-item
+	return children.map((child) => {
+		if (child instanceof HTMLElement && child.dataset?.efHidden) return nothing;
+		if (child instanceof EFTimegroup) return html`<ef-timegroup-hierarchy-item
         .element=${child}
       ></ef-timegroup-hierarchy-item>`;
-    }
-    if (child instanceof EFImage) {
-      return html`<ef-image-hierarchy-item
+		if (child instanceof EFImage) return html`<ef-image-hierarchy-item
         .element=${child}
       ></ef-image-hierarchy-item>`;
-    }
-    if (child instanceof EFAudio) {
-      return html`<ef-audio-hierarchy-item
+		if (child instanceof EFAudio) return html`<ef-audio-hierarchy-item
         .element=${child}
       ></ef-audio-hierarchy-item>`;
-    }
-    if (child instanceof EFVideo) {
-      return html`<ef-video-hierarchy-item
+		if (child instanceof EFVideo) return html`<ef-video-hierarchy-item
         .element=${child}
       ></ef-video-hierarchy-item>`;
-    }
-    if (child instanceof EFCaptions) {
-      return html`<ef-captions-hierarchy-item
+		if (child instanceof EFCaptions) return html`<ef-captions-hierarchy-item
         .element=${child}
       ></ef-captions-hierarchy-item>`;
-    }
-    if (child instanceof EFCaptionsActiveWord) {
-      return html`<ef-captions-active-word-hierarchy-item
+		if (child instanceof EFCaptionsActiveWord) return html`<ef-captions-active-word-hierarchy-item
         .element=${child}
       ></ef-captions-active-word-hierarchy-item>`;
-    }
-    if (child instanceof EFWaveform) {
-      return html`<ef-waveform-hierarchy-item
+		if (child instanceof EFWaveform) return html`<ef-waveform-hierarchy-item
         .element=${child}
       ></ef-waveform-hierarchy-item>`;
-    }
-    return html`<ef-html-hierarchy-item
+		return html`<ef-html-hierarchy-item
       .element=${child}
     ></ef-html-hierarchy-item>`;
-  });
+	});
 };
 const renderFilmstripChildren = (children, pixelsPerMs) => {
-  return children.map((child) => {
-    if (child instanceof HTMLElement && child.dataset?.efHidden) {
-      return nothing;
-    }
-    if (child instanceof EFTimegroup) {
-      return html`<ef-timegroup-filmstrip
+	return children.map((child) => {
+		if (child instanceof HTMLElement && child.dataset?.efHidden) return nothing;
+		if (child instanceof EFTimegroup) return html`<ef-timegroup-filmstrip
         .element=${child}
         .pixelsPerMs=${pixelsPerMs}
       >
       </ef-timegroup-filmstrip>`;
-    }
-    if (child instanceof EFImage) {
-      return html`<ef-image-filmstrip
+		if (child instanceof EFImage) return html`<ef-image-filmstrip
         .element=${child}
         .pixelsPerMs=${pixelsPerMs}
       ></ef-image-filmstrip>`;
-    }
-    if (child instanceof EFAudio) {
-      return html`<ef-audio-filmstrip
+		if (child instanceof EFAudio) return html`<ef-audio-filmstrip
         .element=${child}
         .pixelsPerMs=${pixelsPerMs}
       ></ef-audio-filmstrip>`;
-    }
-    if (child instanceof EFVideo) {
-      return html`<ef-video-filmstrip
+		if (child instanceof EFVideo) return html`<ef-video-filmstrip
         .element=${child}
         .pixelsPerMs=${pixelsPerMs}
       ></ef-video-filmstrip>`;
-    }
-    if (child instanceof EFCaptions) {
-      return html`<ef-captions-filmstrip
+		if (child instanceof EFCaptions) return html`<ef-captions-filmstrip
         .element=${child}
         .pixelsPerMs=${pixelsPerMs}
       ></ef-captions-filmstrip>`;
-    }
-    if (child instanceof EFWaveform) {
-      return html`<ef-waveform-filmstrip
+		if (child instanceof EFWaveform) return html`<ef-waveform-filmstrip
         .element=${child}
         .pixelsPerMs=${pixelsPerMs}
       ></ef-waveform-filmstrip>`;
-    }
-    return html`<ef-html-filmstrip
+		return html`<ef-html-filmstrip
       .element=${child}
       .pixelsPerMs=${pixelsPerMs}
     ></ef-html-filmstrip>`;
-  });
+	});
 };
-let EFFilmstrip = class extends TWMixin(LitElement) {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _EFFilmstrip_instances);
-    this.pixelsPerMs = 0.04;
-    this.scrubbing = false;
-    this.timelineScrolltop = 0;
-    this.currentTimeMs = 0;
-    this.autoScale = false;
-    this.resizeObserver = new ResizeObserver(() => {
-      if (this.autoScale) {
-        this.updatePixelsPerMs();
-      }
-    });
-    __privateAdd(this, _handleKeyPress, (event) => {
-      if (event.key === " ") {
-        const [target] = event.composedPath();
-        const interactiveSelector = "input, textarea, button, select, a, [contenteditable]";
-        const closestInteractive = target?.closest(
-          interactiveSelector
-        );
-        if (closestInteractive) {
-          return;
-        }
-        event.preventDefault();
-        if (__privateGet(this, _EFFilmstrip_instances, contextElement_get)) {
-          __privateGet(this, _EFFilmstrip_instances, contextElement_get).playing = !__privateGet(this, _EFFilmstrip_instances, contextElement_get).playing;
-        }
-      }
-    });
-    this.gutterRef = createRef();
-    this.hierarchyRef = createRef();
-    this.playheadRef = createRef();
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    __privateMethod(this, _EFFilmstrip_instances, bindToTargetTimegroup_fn).call(this);
-    window.addEventListener("keypress", __privateGet(this, _handleKeyPress));
-    this.resizeObserver.observe(this);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    window.removeEventListener("keypress", __privateGet(this, _handleKeyPress));
-    this.resizeObserver.disconnect();
-  }
-  updatePixelsPerMs() {
-    const target = this.targetTimegroup;
-    const gutter = this.gutterRef.value;
-    if (target && gutter && gutter.clientWidth > 0) {
-      this.pixelsPerMs = gutter.clientWidth / (target.durationMs || 1);
-    }
-  }
-  syncGutterScroll() {
-    if (this.gutter && this.hierarchyRef.value) {
-      this.hierarchyRef.value.scrollTop = this.gutter.scrollTop;
-      this.timelineScrolltop = this.gutter.scrollTop;
-    }
-  }
-  syncHierarchyScroll() {
-    if (this.gutter && this.hierarchyRef.value) {
-      this.gutter.scrollTop = this.hierarchyRef.value.scrollTop;
-      this.timelineScrolltop = this.hierarchyRef.value.scrollTop;
-    }
-  }
-  scrub(e) {
-    if (this.playing) {
-      return;
-    }
-    if (!this.scrubbing) {
-      return;
-    }
-    const gutter = this.shadowRoot?.querySelector("#gutter");
-    if (!gutter) {
-      return;
-    }
-    const rect = gutter.getBoundingClientRect();
-    if (this.targetTimegroup) {
-      const layerX = e.pageX - rect.left + gutter.scrollLeft;
-      this.targetTimegroup.currentTimeMs = layerX / this.pixelsPerMs;
-    }
-  }
-  startScrub(e) {
-    e.preventDefault();
-    this.scrubbing = true;
-    queueMicrotask(() => {
-      const gutter = this.shadowRoot?.querySelector("#gutter");
-      if (!gutter) {
-        return;
-      }
-      const rect = gutter.getBoundingClientRect();
-      if (this.targetTimegroup) {
-        const layerX = e.pageX - rect.left + gutter.scrollLeft;
-        this.targetTimegroup.currentTimeMs = layerX / this.pixelsPerMs;
-      }
-    });
-    addEventListener(
-      "mouseup",
-      () => {
-        this.scrubbing = false;
-      },
-      { once: true }
-    );
-  }
-  scrollScrub(e) {
-    if (this.targetTimegroup && this.gutter && !this.playing) {
-      if (e.deltaX !== 0) {
-        e.preventDefault();
-      }
-      if (this.gutterRef.value && this.gutterRef.value.scrollLeft === 0 && e.deltaX < 0) {
-        this.gutter.scrollBy(0, e.deltaY);
-        return;
-      }
-      if (this.gutter.scrollWidth - this.gutter.scrollLeft === this.gutter.clientWidth && e.deltaX > 0) {
-        this.gutter.scrollBy(0, e.deltaY);
-        return;
-      }
-      if (this) {
-        this.gutter.scrollBy(e.deltaX, e.deltaY);
-        this.targetTimegroup.currentTimeMs += e.deltaX / this.pixelsPerMs;
+let EFFilmstrip = class EFFilmstrip$1 extends TWMixin(LitElement) {
+	constructor(..._args3) {
+		super(..._args3);
+		this.pixelsPerMs = .04;
+		this.scrubbing = false;
+		this.timelineScrolltop = 0;
+		this.currentTimeMs = 0;
+		this.autoScale = false;
+		this.resizeObserver = new ResizeObserver(() => {
+			if (this.autoScale) this.updatePixelsPerMs();
+		});
+		this.gutterRef = createRef();
+		this.hierarchyRef = createRef();
+		this.playheadRef = createRef();
+	}
+	static {
+		this.styles = [css`
+      :host {
+        display: block;
+        overflow: hidden;
+        width: 100%;
+        height: 100%;
       }
-    }
-  }
-  get gutter() {
-    return this.gutterRef.value;
-  }
-  render() {
-    const target = this.targetTimegroup;
-    return html` <div
+    `];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.#bindToTargetTimegroup();
+		window.addEventListener("keypress", this.#handleKeyPress);
+		this.resizeObserver.observe(this);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		window.removeEventListener("keypress", this.#handleKeyPress);
+		this.resizeObserver.disconnect();
+	}
+	updatePixelsPerMs() {
+		const target = this.targetTimegroup;
+		const gutter = this.gutterRef.value;
+		if (target && gutter && gutter.clientWidth > 0) this.pixelsPerMs = gutter.clientWidth / (target.durationMs || 1);
+	}
+	#bindToTargetTimegroup() {
+		if (this.timegroupController) this.timegroupController.remove();
+		const target = this.targetTimegroup;
+		if (target) {
+			this.timegroupController = new TimegroupController(target, this);
+			this.currentTimeMs = target.currentTimeMs;
+		}
+	}
+	#handleKeyPress = (event) => {
+		if (event.key === " ") {
+			const [target] = event.composedPath();
+			const interactiveSelector = "input, textarea, button, select, a, [contenteditable]";
+			const closestInteractive = target?.closest(interactiveSelector);
+			if (closestInteractive) return;
+			event.preventDefault();
+			if (this.#contextElement) this.#contextElement.playing = !this.#contextElement.playing;
+		}
+	};
+	syncGutterScroll() {
+		if (this.gutter && this.hierarchyRef.value) {
+			this.hierarchyRef.value.scrollTop = this.gutter.scrollTop;
+			this.timelineScrolltop = this.gutter.scrollTop;
+		}
+	}
+	syncHierarchyScroll() {
+		if (this.gutter && this.hierarchyRef.value) {
+			this.gutter.scrollTop = this.hierarchyRef.value.scrollTop;
+			this.timelineScrolltop = this.hierarchyRef.value.scrollTop;
+		}
+	}
+	scrub(e) {
+		if (this.playing) return;
+		if (!this.scrubbing) return;
+		const gutter = this.shadowRoot?.querySelector("#gutter");
+		if (!gutter) return;
+		const rect = gutter.getBoundingClientRect();
+		if (this.targetTimegroup) {
+			const layerX = e.pageX - rect.left + gutter.scrollLeft;
+			this.targetTimegroup.currentTimeMs = layerX / this.pixelsPerMs;
+		}
+	}
+	startScrub(e) {
+		e.preventDefault();
+		this.scrubbing = true;
+		queueMicrotask(() => {
+			const gutter = this.shadowRoot?.querySelector("#gutter");
+			if (!gutter) return;
+			const rect = gutter.getBoundingClientRect();
+			if (this.targetTimegroup) {
+				const layerX = e.pageX - rect.left + gutter.scrollLeft;
+				this.targetTimegroup.currentTimeMs = layerX / this.pixelsPerMs;
+			}
+		});
+		addEventListener("mouseup", () => {
+			this.scrubbing = false;
+		}, { once: true });
+	}
+	scrollScrub(e) {
+		if (this.targetTimegroup && this.gutter && !this.playing) {
+			if (e.deltaX !== 0) e.preventDefault();
+			if (this.gutterRef.value && this.gutterRef.value.scrollLeft === 0 && e.deltaX < 0) {
+				this.gutter.scrollBy(0, e.deltaY);
+				return;
+			}
+			if (this.gutter.scrollWidth - this.gutter.scrollLeft === this.gutter.clientWidth && e.deltaX > 0) {
+				this.gutter.scrollBy(0, e.deltaY);
+				return;
+			}
+			if (this) {
+				this.gutter.scrollBy(e.deltaX, e.deltaY);
+				this.targetTimegroup.currentTimeMs += e.deltaX / this.pixelsPerMs;
+			}
+		}
+	}
+	get gutter() {
+		return this.gutterRef.value;
+	}
+	render() {
+		const target = this.targetTimegroup;
+		return html` <div
       class="grid h-full bg-slate-100"
       style=${styleMap({
-      gridTemplateColumns: "200px 1fr",
-      gridTemplateRows: "1.5rem 1fr"
-    })}
+			gridTemplateColumns: "200px 1fr",
+			gridTemplateRows: "1.5rem 1fr"
+		})}
     >
       <div
         class="z-20 col-span-2 border-b-slate-600 bg-slate-100 shadow shadow-slate-300"
@@ -637,9 +516,9 @@ let EFFilmstrip = class extends TWMixin(LitElement) {
               max="0.1"
               step="0.001"
               @input=${(e) => {
-      const target2 = e.target;
-      this.pixelsPerMs = Number.parseFloat(target2.value);
-    }}
+			const target$1 = e.target;
+			this.pixelsPerMs = Number.parseFloat(target$1.value);
+		}}
             />` : nothing}
         <code>${msToTimeCode(this.currentTimeMs, true)} </code> /
         <code>${msToTimeCode(target?.durationMs ?? 0, true)}</code>
@@ -676,9 +555,9 @@ let EFFilmstrip = class extends TWMixin(LitElement) {
           <div
             class="border-red pointer-events-none absolute z-10 h-full w-[2px] border-r-2 border-red-700"
             style=${styleMap({
-      left: `${this.pixelsPerMs * this.currentTimeMs}px`,
-      top: `${this.timelineScrolltop}px`
-    })}
+			left: `${this.pixelsPerMs * this.currentTimeMs}px`,
+			top: `${this.timelineScrolltop}px`
+		})}
             ${ref(this.playheadRef)}
           ></div>
 
@@ -686,107 +565,48 @@ let EFFilmstrip = class extends TWMixin(LitElement) {
         </div>
       </div>
     </div>`;
-  }
-  updated(changes) {
-    if (!this.targetTimegroup) {
-      return;
-    }
-    if (changes.has("currentTimeMs")) {
-      if (this.targetTimegroup.currentTimeMs !== this.currentTimeMs) {
-        this.targetTimegroup.currentTimeMs = this.currentTimeMs;
-      }
-    }
-  }
-  willUpdate(changedProperties) {
-    if (changedProperties.has("targetTimegroup")) {
-      __privateMethod(this, _EFFilmstrip_instances, bindToTargetTimegroup_fn).call(this);
-    }
-    if (this.autoScale) {
-      this.updatePixelsPerMs();
-    }
-    super.willUpdate(changedProperties);
-  }
-};
-_EFFilmstrip_instances = /* @__PURE__ */ new WeakSet();
-bindToTargetTimegroup_fn = function() {
-  if (this.timegroupController) {
-    this.timegroupController.remove();
-  }
-  const target = this.targetTimegroup;
-  if (target) {
-    this.timegroupController = new TimegroupController(target, this);
-    this.currentTimeMs = target.currentTimeMs;
-  }
-};
-_handleKeyPress = /* @__PURE__ */ new WeakMap();
-contextElement_get = function() {
-  return this.closest("ef-workbench, ef-preview");
-};
-EFFilmstrip.styles = [
-  css`
-      :host {
-        display: block;
-        overflow: hidden;
-        width: 100%;
-        height: 100%;
-      }
-    `
-];
-__decorateClass([
-  property({ type: Number })
-], EFFilmstrip.prototype, "pixelsPerMs", 2);
-__decorateClass([
-  state()
-], EFFilmstrip.prototype, "scrubbing", 2);
-__decorateClass([
-  state()
-], EFFilmstrip.prototype, "timelineScrolltop", 2);
-__decorateClass([
-  consume({ context: playingContext, subscribe: true }),
-  state()
-], EFFilmstrip.prototype, "playing", 2);
-__decorateClass([
-  consume({ context: loopContext, subscribe: true }),
-  state()
-], EFFilmstrip.prototype, "loop", 2);
-__decorateClass([
-  state()
-], EFFilmstrip.prototype, "currentTimeMs", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "auto-scale" })
-], EFFilmstrip.prototype, "autoScale", 2);
-__decorateClass([
-  eventOptions({ passive: false })
-], EFFilmstrip.prototype, "syncGutterScroll", 1);
-__decorateClass([
-  eventOptions({ passive: false })
-], EFFilmstrip.prototype, "syncHierarchyScroll", 1);
-__decorateClass([
-  eventOptions({ capture: false })
-], EFFilmstrip.prototype, "scrub", 1);
-__decorateClass([
-  eventOptions({ capture: false })
-], EFFilmstrip.prototype, "startScrub", 1);
-__decorateClass([
-  eventOptions({ passive: false })
-], EFFilmstrip.prototype, "scrollScrub", 1);
-__decorateClass([
-  property({ type: String })
-], EFFilmstrip.prototype, "target", 2);
-__decorateClass([
-  consume({ context: targetTimegroupContext, subscribe: true }),
-  state()
-], EFFilmstrip.prototype, "targetTimegroup", 2);
-EFFilmstrip = __decorateClass([
-  customElement("ef-filmstrip")
-], EFFilmstrip);
-export {
-  EFAudioFilmstrip,
-  EFCaptionsFilmstrip,
-  EFFilmstrip,
-  EFHTMLFilmstrip,
-  EFImageFilmstrip,
-  EFTimegroupFilmstrip,
-  EFVideoFilmstrip,
-  EFWaveformFilmstrip
+	}
+	updated(changes) {
+		if (!this.targetTimegroup) return;
+		if (changes.has("currentTimeMs")) {
+			if (this.targetTimegroup.currentTimeMs !== this.currentTimeMs) this.targetTimegroup.currentTimeMs = this.currentTimeMs;
+		}
+	}
+	get #contextElement() {
+		return this.closest("ef-workbench, ef-preview");
+	}
+	willUpdate(changedProperties) {
+		if (changedProperties.has("targetTimegroup")) this.#bindToTargetTimegroup();
+		if (this.autoScale) this.updatePixelsPerMs();
+		super.willUpdate(changedProperties);
+	}
 };
+_decorate([property({ type: Number })], EFFilmstrip.prototype, "pixelsPerMs", void 0);
+_decorate([state()], EFFilmstrip.prototype, "scrubbing", void 0);
+_decorate([state()], EFFilmstrip.prototype, "timelineScrolltop", void 0);
+_decorate([consume({
+	context: playingContext,
+	subscribe: true
+}), state()], EFFilmstrip.prototype, "playing", void 0);
+_decorate([consume({
+	context: loopContext,
+	subscribe: true
+}), state()], EFFilmstrip.prototype, "loop", void 0);
+_decorate([state()], EFFilmstrip.prototype, "currentTimeMs", void 0);
+_decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "auto-scale"
+})], EFFilmstrip.prototype, "autoScale", void 0);
+_decorate([eventOptions({ passive: false })], EFFilmstrip.prototype, "syncGutterScroll", null);
+_decorate([eventOptions({ passive: false })], EFFilmstrip.prototype, "syncHierarchyScroll", null);
+_decorate([eventOptions({ capture: false })], EFFilmstrip.prototype, "scrub", null);
+_decorate([eventOptions({ capture: false })], EFFilmstrip.prototype, "startScrub", null);
+_decorate([eventOptions({ passive: false })], EFFilmstrip.prototype, "scrollScrub", null);
+_decorate([property({ type: String })], EFFilmstrip.prototype, "target", void 0);
+_decorate([consume({
+	context: targetTimegroupContext,
+	subscribe: true
+}), state()], EFFilmstrip.prototype, "targetTimegroup", void 0);
+EFFilmstrip = _decorate([customElement("ef-filmstrip")], EFFilmstrip);
+export { EFFilmstrip };