@editframe/elements 0.7.0-beta.8 → 0.7.0-beta.9

package/dist/packages/elements/src/gui/EFFilmstrip.cjs

@@ -1,825 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const EFTimegroup = require("../elements/EFTimegroup.cjs");
-const lit = require("lit");
-const decorators_js = require("lit/decorators.js");
-const styleMap_js = require("lit/directives/style-map.js");
-const ref_js = require("lit/directives/ref.js");
-const EFImage = require("../elements/EFImage.cjs");
-const EFAudio = require("../elements/EFAudio.cjs");
-const EFVideo = require("../elements/EFVideo.cjs");
-const EFCaptions = require("../elements/EFCaptions.cjs");
-const EFWaveform = require("../elements/EFWaveform.cjs");
-const TimegroupController = require("../elements/TimegroupController.cjs");
-const context = require("@lit/context");
-const EFWorkbench = require("./EFWorkbench.cjs");
-const TWMixin = require("./TWMixin.cjs");
-const msToTimeCode = require("../../../../lib/av/msToTimeCode.cjs");
-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;
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), 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 __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 _EFFilmstrip_instances, bindToTargetTimegroup_fn, _handleKeyPress, _lastTick, _playbackAudioContext, _playbackAnimationFrameRequest, _AUDIO_PLAYBACK_SLICE_MS, syncPlayheadToAudioContext_fn, stopPlayback_fn, startPlayback_fn;
-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"
-]);
-class FilmstripItem extends TWMixin.TWMixin(lit.LitElement) {
-  constructor() {
-    super(...arguments);
-    this.element = new EFTimegroup.EFTimegroup();
-    this.pixelsPerMs = 0.04;
-  }
-  static {
-    this.styles = [
-      lit.css`
-      :host {
-        display: block;
-      }
-    `
-    ];
-  }
-  get isFocused() {
-    return this.element && this.focusContext?.focusedElement === this.element;
-  }
-  get styles() {
-    return {
-      position: "relative",
-      left: `${this.pixelsPerMs * this.element.startTimeWithinParentMs}px`,
-      width: `${this.pixelsPerMs * this.element.durationMs}px`
-    };
-  }
-  render() {
-    return lit.html` <div class="" style=${styleMap_js.styleMap(this.styles)}>
-      <div
-        class="border-outset relative mb-[1px] block h-[1.1rem] text-nowrap border border-slate-500 bg-blue-200 hover:bg-blue-400 text-sm data-[focused]:bg-slate-400"
-        ?data-focused=${this.isFocused}
-        @mouseenter=${() => {
-      if (this.focusContext) {
-        this.focusContext.focusedElement = this.element;
-      }
-    }}
-        @mouseleave=${() => {
-      if (this.focusContext) {
-        this.focusContext.focusedElement = null;
-      }
-    }}
-      >
-        ${this.animations()}
-      </div>
-      ${this.renderChildren()}
-    </div>`;
-  }
-  renderChildren() {
-    return renderFilmstripChildren(
-      Array.from(this.element.children),
-      this.pixelsPerMs
-    );
-  }
-  contents() {
-    return lit.html``;
-  }
-  animations() {
-    const animations = this.element.getAnimations();
-    return animations.map((animation) => {
-      const effect = animation.effect;
-      if (!(effect instanceof KeyframeEffect)) {
-        return lit.nothing;
-      }
-      const start = effect.getTiming().delay ?? 0;
-      const duration = effect.getTiming().duration;
-      if (duration === null) {
-        return lit.nothing;
-      }
-      const keyframes = effect.getKeyframes();
-      const firstKeyframe = keyframes[0];
-      if (!firstKeyframe) {
-        return lit.nothing;
-      }
-      const properties = new Set(Object.keys(firstKeyframe));
-      for (const key of CommonEffectKeys) {
-        properties.delete(key);
-      }
-      return lit.html`<div
-        class="relative h-[5px] bg-blue-500 opacity-50"
-        label="animation"
-        style=${styleMap_js.styleMap({
-        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 lit.html`<div
-            class="absolute top-0 h-full w-1 bg-red-500"
-            style=${styleMap_js.styleMap({
-          left: `${this.pixelsPerMs * keyframe.computedOffset * Number(duration)}px`
-        })}
-          ></div>`;
-      })}
-      </div>`;
-    });
-  }
-  update(changedProperties) {
-    if (changedProperties.has("element") && this.element instanceof lit.LitElement) {
-      this.filmstripController?.remove();
-      this.filmstripController = new ElementFilmstripController(
-        this.element,
-        this
-      );
-    }
-    super.update(changedProperties);
-  }
-}
-__decorateClass([
-  context.consume({ context: EFWorkbench.focusContext, subscribe: true })
-], FilmstripItem.prototype, "focusContext", 2);
-__decorateClass([
-  context.consume({ context: EFWorkbench.focusedElement, subscribe: true })
-], FilmstripItem.prototype, "focusedElement", 2);
-__decorateClass([
-  decorators_js.property({ type: HTMLElement, attribute: false })
-], FilmstripItem.prototype, "element", 2);
-__decorateClass([
-  decorators_js.property({ type: Number })
-], FilmstripItem.prototype, "pixelsPerMs", 2);
-exports.EFAudioFilmstrip = class EFAudioFilmstrip extends FilmstripItem {
-  contents() {
-    return lit.html``;
-  }
-};
-exports.EFAudioFilmstrip = __decorateClass([
-  decorators_js.customElement("ef-audio-filmstrip")
-], exports.EFAudioFilmstrip);
-exports.EFVideoFilmstrip = class EFVideoFilmstrip extends FilmstripItem {
-  contents() {
-    return lit.html` 📼 `;
-  }
-};
-exports.EFVideoFilmstrip = __decorateClass([
-  decorators_js.customElement("ef-video-filmstrip")
-], exports.EFVideoFilmstrip);
-exports.EFCaptionsFilmstrip = class EFCaptionsFilmstrip extends FilmstripItem {
-  contents() {
-    return lit.html` 📝 `;
-  }
-};
-exports.EFCaptionsFilmstrip = __decorateClass([
-  decorators_js.customElement("ef-captions-filmstrip")
-], exports.EFCaptionsFilmstrip);
-exports.EFWaveformFilmstrip = class EFWaveformFilmstrip extends FilmstripItem {
-  contents() {
-    return lit.html` 🌊 `;
-  }
-  renderChildren() {
-    return lit.nothing;
-  }
-};
-exports.EFWaveformFilmstrip = __decorateClass([
-  decorators_js.customElement("ef-waveform-filmstrip")
-], exports.EFWaveformFilmstrip);
-exports.EFImageFilmstrip = class EFImageFilmstrip extends FilmstripItem {
-  contents() {
-    return lit.html` 🖼️ `;
-  }
-};
-exports.EFImageFilmstrip = __decorateClass([
-  decorators_js.customElement("ef-image-filmstrip")
-], exports.EFImageFilmstrip);
-exports.EFTimegroupFilmstrip = class EFTimegroupFilmstrip extends FilmstripItem {
-  contents() {
-    return lit.html`
-      <span>TIME GROUP</span>
-      ${renderFilmstripChildren(
-      Array.from(this.element.children || []),
-      this.pixelsPerMs
-    )}
-    </div>
-    `;
-  }
-};
-exports.EFTimegroupFilmstrip = __decorateClass([
-  decorators_js.customElement("ef-timegroup-filmstrip")
-], exports.EFTimegroupFilmstrip);
-exports.EFHTMLFilmstrip = class EFHTMLFilmstrip extends FilmstripItem {
-  contents() {
-    return lit.html`
-      <span>${this.element.tagName}</span>
-      ${renderFilmstripChildren(
-      Array.from(this.element.children || []),
-      this.pixelsPerMs
-    )}
-    `;
-  }
-};
-exports.EFHTMLFilmstrip = __decorateClass([
-  decorators_js.customElement("ef-html-filmstrip")
-], exports.EFHTMLFilmstrip);
-let EFHierarchyItem = class extends TWMixin.TWMixin(lit.LitElement) {
-  constructor() {
-    super(...arguments);
-    this.element = new EFTimegroup.EFTimegroup();
-  }
-  get icon() {
-    return "📼";
-  }
-  get isFocused() {
-    return this.element && this.focusContext?.focusedElement === this.element;
-  }
-  displayLabel() {
-    return lit.nothing;
-  }
-  render() {
-    return lit.html` 
-      <div>
-        <div
-          class="peer 
-            flex h-[1.1rem] items-center overflow-hidden text-nowrap  border border-slate-500
-          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;
-      }
-    }}
-          @mouseleave=${() => {
-      if (this.focusContext) {
-        this.focusContext.focusedElement = null;
-      }
-    }}
-        >
-          ${this.icon} ${this.displayLabel()}
-        </div>
-        <div
-          class="p-[1px] pb-0 pl-2 pr-0 peer-hover:bg-slate-300 peer-data-[focused]:bg-slate-300 peer-hover:border-slate-400 peer-data-[focused]:border-slate-400""
-        >
-          ${this.renderChildren()}
-        </div>
-      </div>`;
-  }
-  renderChildren() {
-    return renderHierarchyChildren(Array.from(this.element.children));
-  }
-};
-__decorateClass([
-  decorators_js.property({ type: HTMLElement, attribute: false })
-], EFHierarchyItem.prototype, "element", 2);
-__decorateClass([
-  context.consume({ context: EFWorkbench.focusContext })
-], EFHierarchyItem.prototype, "focusContext", 2);
-__decorateClass([
-  context.consume({ context: EFWorkbench.focusedElement, subscribe: true })
-], EFHierarchyItem.prototype, "focusedElement", 2);
-EFHierarchyItem = __decorateClass([
-  decorators_js.customElement("ef-hierarchy-item")
-], EFHierarchyItem);
-let EFTimegroupHierarchyItem = class extends EFHierarchyItem {
-  get icon() {
-    return "🕒";
-  }
-  displayLabel() {
-    return this.element.mode ?? "(no mode)";
-  }
-};
-EFTimegroupHierarchyItem = __decorateClass([
-  decorators_js.customElement("ef-timegroup-hierarchy-item")
-], EFTimegroupHierarchyItem);
-let EFAudioHierarchyItem = class extends EFHierarchyItem {
-  get icon() {
-    return "🔊";
-  }
-  displayLabel() {
-    return this.element.src ?? "(no src)";
-  }
-};
-EFAudioHierarchyItem = __decorateClass([
-  decorators_js.customElement("ef-audio-hierarchy-item")
-], EFAudioHierarchyItem);
-let EFVideoHierarchyItem = class extends EFHierarchyItem {
-  get icon() {
-    return "📼";
-  }
-  displayLabel() {
-    return this.element.src ?? "(no src)";
-  }
-};
-EFVideoHierarchyItem = __decorateClass([
-  decorators_js.customElement("ef-video-hierarchy-item")
-], EFVideoHierarchyItem);
-let EFCaptionsHierarchyItem = class extends EFHierarchyItem {
-  get icon() {
-    return "📝 Captions";
-  }
-};
-EFCaptionsHierarchyItem = __decorateClass([
-  decorators_js.customElement("ef-captions-hierarchy-item")
-], EFCaptionsHierarchyItem);
-let EFCaptionsActiveWordHierarchyItem = class extends EFHierarchyItem {
-  get icon() {
-    return "🗣️ Active Word";
-  }
-};
-EFCaptionsActiveWordHierarchyItem = __decorateClass([
-  decorators_js.customElement("ef-captions-active-word-hierarchy-item")
-], EFCaptionsActiveWordHierarchyItem);
-let EFWaveformHierarchyItem = class extends EFHierarchyItem {
-  get icon() {
-    return "🌊";
-  }
-  renderChildren() {
-    return lit.nothing;
-  }
-};
-EFWaveformHierarchyItem = __decorateClass([
-  decorators_js.customElement("ef-waveform-hierarchy-item")
-], EFWaveformHierarchyItem);
-let EFImageHierarchyItem = class extends EFHierarchyItem {
-  get icon() {
-    return "🖼️";
-  }
-  displayLabel() {
-    return this.element.src ?? "(no src)";
-  }
-};
-EFImageHierarchyItem = __decorateClass([
-  decorators_js.customElement("ef-image-hierarchy-item")
-], EFImageHierarchyItem);
-let EFHTMLHierarchyItem = class extends EFHierarchyItem {
-  get icon() {
-    return lit.html`<code>${`<${this.element.tagName.toLowerCase()}>`}</code>`;
-  }
-};
-EFHTMLHierarchyItem = __decorateClass([
-  decorators_js.customElement("ef-html-hierarchy-item")
-], EFHTMLHierarchyItem);
-const renderHierarchyChildren = (children) => {
-  return children.map((child) => {
-    if (child instanceof EFTimegroup.EFTimegroup) {
-      return lit.html`<ef-timegroup-hierarchy-item
-        .element=${child}
-      ></ef-timegroup-hierarchy-item>`;
-    }
-    if (child instanceof EFImage.EFImage) {
-      return lit.html`<ef-image-hierarchy-item
-        .element=${child}
-      ></ef-image-hierarchy-item>`;
-    }
-    if (child instanceof EFAudio.EFAudio) {
-      return lit.html`<ef-audio-hierarchy-item
-        .element=${child}
-      ></ef-audio-hierarchy-item>`;
-    }
-    if (child instanceof EFVideo.EFVideo) {
-      return lit.html`<ef-video-hierarchy-item
-        .element=${child}
-      ></ef-video-hierarchy-item>`;
-    }
-    if (child instanceof EFCaptions.EFCaptions) {
-      return lit.html`<ef-captions-hierarchy-item
-        .element=${child}
-      ></ef-captions-hierarchy-item>`;
-    }
-    if (child instanceof EFCaptions.EFCaptionsActiveWord) {
-      return lit.html`<ef-captions-active-word-hierarchy-item
-        .element=${child}
-      ></ef-captions-active-word-hierarchy-item>`;
-    }
-    if (child instanceof EFWaveform.EFWaveform) {
-      return lit.html`<ef-waveform-hierarchy-item
-        .element=${child}
-      ></ef-waveform-hierarchy-item>`;
-    }
-    return lit.html`<ef-html-hierarchy-item
-      .element=${child}
-    ></ef-html-hierarchy-item>`;
-  });
-};
-const renderFilmstripChildren = (children, pixelsPerMs) => {
-  return children.map((child) => {
-    if (child instanceof EFTimegroup.EFTimegroup) {
-      return lit.html`<ef-timegroup-filmstrip
-        .element=${child}
-        .pixelsPerMs=${pixelsPerMs}
-      >
-      </ef-timegroup-filmstrip>`;
-    }
-    if (child instanceof EFImage.EFImage) {
-      return lit.html`<ef-image-filmstrip
-        .element=${child}
-        .pixelsPerMs=${pixelsPerMs}
-      ></ef-image-filmstrip>`;
-    }
-    if (child instanceof EFAudio.EFAudio) {
-      return lit.html`<ef-audio-filmstrip
-        .element=${child}
-        .pixelsPerMs=${pixelsPerMs}
-      ></ef-audio-filmstrip>`;
-    }
-    if (child instanceof EFVideo.EFVideo) {
-      return lit.html`<ef-video-filmstrip
-        .element=${child}
-        .pixelsPerMs=${pixelsPerMs}
-      ></ef-video-filmstrip>`;
-    }
-    if (child instanceof EFCaptions.EFCaptions) {
-      return lit.html`<ef-captions-filmstrip
-        .element=${child}
-        .pixelsPerMs=${pixelsPerMs}
-      ></ef-captions-filmstrip>`;
-    }
-    if (child instanceof EFWaveform.EFWaveform) {
-      return lit.html`<ef-waveform-filmstrip
-        .element=${child}
-        .pixelsPerMs=${pixelsPerMs}
-      ></ef-waveform-filmstrip>`;
-    }
-    return lit.html`<ef-html-filmstrip
-      .element=${child}
-      .pixelsPerMs=${pixelsPerMs}
-    ></ef-html-filmstrip>`;
-  });
-};
-exports.EFFilmstrip = class EFFilmstrip extends TWMixin.TWMixin(lit.LitElement) {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _EFFilmstrip_instances);
-    this.pixelsPerMs = 0.04;
-    this.currentTimeMs = 0;
-    this.targetSelector = "";
-    this.scrubbing = false;
-    this.playing = false;
-    this.timelineScrolltop = 0;
-    __privateAdd(this, _handleKeyPress, (event) => {
-      if (event.key === " ") {
-        const interactiveSelector = "input, textarea, button, select, a, [contenteditable]";
-        const closestInteractive = event.target?.closest(
-          interactiveSelector
-        );
-        if (closestInteractive) {
-          return;
-        }
-        event.preventDefault();
-        this.playing = !this.playing;
-      }
-    });
-    __privateAdd(this, _lastTick);
-    __privateAdd(this, _playbackAudioContext, null);
-    __privateAdd(this, _playbackAnimationFrameRequest, null);
-    __privateAdd(this, _AUDIO_PLAYBACK_SLICE_MS, 1e3);
-    this.advancePlayhead = (tick) => {
-      if (__privateGet(this, _lastTick) && tick && this.targetTimegroup) {
-        this.targetTimegroup.currentTimeMs += tick - __privateGet(this, _lastTick);
-        if (this.targetTimegroup.currentTimeMs >= this.targetTimegroup.durationMs) {
-          this.playing = false;
-        }
-      }
-      __privateSet(this, _lastTick, tick);
-      if (this.playing) {
-        requestAnimationFrame(this.advancePlayhead);
-      }
-    };
-    this.gutterRef = ref_js.createRef();
-    this.hierarchyRef = ref_js.createRef();
-    this.playheadRef = ref_js.createRef();
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    __privateMethod(this, _EFFilmstrip_instances, bindToTargetTimegroup_fn).call(this);
-    window.addEventListener("keypress", __privateGet(this, _handleKeyPress));
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    window.removeEventListener("keypress", __privateGet(this, _handleKeyPress));
-  }
-  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) {
-      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 lit.html` <div
-      class="grid h-full bg-slate-100"
-      style=${styleMap_js.styleMap({
-      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"
-      >
-        <input
-          type="range"
-          .value=${this.pixelsPerMs}
-          min="0.01"
-          max="0.1"
-          step="0.001"
-          @input=${(e) => {
-      const target2 = e.target;
-      this.pixelsPerMs = Number.parseFloat(target2.value);
-    }}
-        />
-        <code>${msToTimeCode.msToTimeCode(this.currentTimeMs, true)} </code> /
-        <code>${msToTimeCode.msToTimeCode(target?.durationMs ?? 0, true)}</code>
-        ${this.playing ? lit.html`<button
-              @click=${() => {
-      this.playing = false;
-    }}
-            >
-              ⏸️
-            </button>` : lit.html`<button
-              @click=${() => {
-      this.playing = true;
-    }}
-            >
-              ▶️
-            </button>`}
-      </div>
-      <div
-        class="z-10 pl-1 pr-1 pt-2 shadow shadow-slate-600 overflow-auto"
-        ${ref_js.ref(this.hierarchyRef)}
-        @scroll=${this.syncHierarchyScroll}
-      >
-        ${renderHierarchyChildren(target ? [target] : [])}
-      </div>
-      <div
-        class="h-full w-full cursor-crosshair overflow-auto bg-slate-200 pt-2"
-        id="gutter"
-        ${ref_js.ref(this.gutterRef)}
-        @scroll=${this.syncGutterScroll}
-        @wheel=${this.scrollScrub}
-      >
-        <div
-          class="relative h-full w-full"
-          style="width: ${this.pixelsPerMs * (target?.durationMs ?? 0)}px;"
-          @mousemove=${this.scrub}
-          @mousedown=${this.startScrub}
-        >
-          <div
-            class="border-red pointer-events-none absolute z-10 h-full w-[2px] border-r-2 border-red-700"
-            style=${styleMap_js.styleMap({
-      left: `${this.pixelsPerMs * this.currentTimeMs}px`,
-      top: `${this.timelineScrolltop}px`
-    })}
-            ${ref_js.ref(this.playheadRef)}
-          ></div>
-
-          ${renderFilmstripChildren(target ? [target] : [], this.pixelsPerMs)}
-        </div>
-      </div>
-    </div>`;
-  }
-  update(changedProperties) {
-    if (changedProperties.has("playing")) {
-      if (this.playing) {
-        __privateMethod(this, _EFFilmstrip_instances, startPlayback_fn).call(this);
-      } else {
-        __privateMethod(this, _EFFilmstrip_instances, stopPlayback_fn).call(this);
-      }
-    }
-    super.update(changedProperties);
-  }
-  updated(changes) {
-    if (!this.targetTimegroup) {
-      return;
-    }
-    if (changes.has("currentTimeMs")) {
-      if (this.targetTimegroup.currentTimeMs !== this.currentTimeMs) {
-        this.targetTimegroup.currentTimeMs = this.currentTimeMs;
-      }
-    }
-    if (changes.has("target")) {
-      __privateMethod(this, _EFFilmstrip_instances, bindToTargetTimegroup_fn).call(this);
-    }
-  }
-  get targetTimegroup() {
-    if (this.getAttribute("target")) {
-      const target = document.getElementById(this.getAttribute("target") ?? "");
-      if (target instanceof EFTimegroup.EFTimegroup) {
-        return target;
-      }
-    }
-    return void 0;
-  }
-};
-_EFFilmstrip_instances = /* @__PURE__ */ new WeakSet();
-bindToTargetTimegroup_fn = function() {
-  if (this.timegroupController) {
-    this.timegroupController.remove();
-  }
-  const target = this.targetTimegroup;
-  if (target) {
-    this.timegroupController = new TimegroupController.TimegroupController(target, this);
-    this.currentTimeMs = target.currentTimeMs;
-  }
-};
-_handleKeyPress = /* @__PURE__ */ new WeakMap();
-_lastTick = /* @__PURE__ */ new WeakMap();
-_playbackAudioContext = /* @__PURE__ */ new WeakMap();
-_playbackAnimationFrameRequest = /* @__PURE__ */ new WeakMap();
-_AUDIO_PLAYBACK_SLICE_MS = /* @__PURE__ */ new WeakMap();
-syncPlayheadToAudioContext_fn = function(target, startMs) {
-  target.currentTimeMs = startMs + (__privateGet(this, _playbackAudioContext)?.currentTime ?? 0) * 1e3;
-  __privateSet(this, _playbackAnimationFrameRequest, requestAnimationFrame(() => {
-    __privateMethod(this, _EFFilmstrip_instances, syncPlayheadToAudioContext_fn).call(this, target, startMs);
-  }));
-};
-stopPlayback_fn = async function() {
-  if (__privateGet(this, _playbackAudioContext)) {
-    if (__privateGet(this, _playbackAudioContext).state !== "closed") {
-      await __privateGet(this, _playbackAudioContext).close();
-    }
-  }
-  if (__privateGet(this, _playbackAnimationFrameRequest)) {
-    cancelAnimationFrame(__privateGet(this, _playbackAnimationFrameRequest));
-  }
-  __privateSet(this, _playbackAudioContext, null);
-};
-startPlayback_fn = async function() {
-  await __privateMethod(this, _EFFilmstrip_instances, stopPlayback_fn).call(this);
-  const timegroup = this.targetTimegroup;
-  if (!timegroup) {
-    return;
-  }
-  let currentMs = timegroup.currentTimeMs;
-  let bufferCount = 0;
-  __privateSet(this, _playbackAudioContext, new AudioContext({
-    latencyHint: "playback"
-  }));
-  if (__privateGet(this, _playbackAnimationFrameRequest)) {
-    cancelAnimationFrame(__privateGet(this, _playbackAnimationFrameRequest));
-  }
-  __privateMethod(this, _EFFilmstrip_instances, syncPlayheadToAudioContext_fn).call(this, timegroup, currentMs);
-  const playbackContext = __privateGet(this, _playbackAudioContext);
-  await playbackContext.suspend();
-  const fillBuffer = async () => {
-    if (bufferCount > 1) {
-      return;
-    }
-    const canFillBuffer = await queueBufferSource();
-    if (canFillBuffer) {
-      fillBuffer();
-    }
-  };
-  const fromMs = currentMs;
-  const toMs = timegroup.endTimeMs;
-  const queueBufferSource = async () => {
-    if (currentMs >= toMs) {
-      return false;
-    }
-    const startMs = currentMs;
-    const endMs = currentMs + __privateGet(this, _AUDIO_PLAYBACK_SLICE_MS);
-    currentMs += __privateGet(this, _AUDIO_PLAYBACK_SLICE_MS);
-    const audioBuffer = await timegroup.renderAudio(startMs, endMs);
-    bufferCount++;
-    const source = playbackContext.createBufferSource();
-    source.buffer = audioBuffer;
-    source.connect(playbackContext.destination);
-    source.start((startMs - fromMs) / 1e3);
-    source.onended = () => {
-      bufferCount--;
-      if (endMs >= toMs) {
-        this.playing = false;
-      } else {
-        fillBuffer();
-      }
-    };
-    return true;
-  };
-  await fillBuffer();
-  await playbackContext.resume();
-};
-__decorateClass([
-  decorators_js.property({ type: Number })
-], exports.EFFilmstrip.prototype, "pixelsPerMs", 2);
-__decorateClass([
-  decorators_js.property({ type: Number })
-], exports.EFFilmstrip.prototype, "currentTimeMs", 2);
-__decorateClass([
-  decorators_js.property({ type: String, attribute: "target", reflect: true })
-], exports.EFFilmstrip.prototype, "targetSelector", 2);
-__decorateClass([
-  decorators_js.state()
-], exports.EFFilmstrip.prototype, "scrubbing", 2);
-__decorateClass([
-  decorators_js.state()
-], exports.EFFilmstrip.prototype, "playing", 2);
-__decorateClass([
-  decorators_js.state()
-], exports.EFFilmstrip.prototype, "timelineScrolltop", 2);
-__decorateClass([
-  decorators_js.eventOptions({ passive: false })
-], exports.EFFilmstrip.prototype, "syncGutterScroll", 1);
-__decorateClass([
-  decorators_js.eventOptions({ passive: false })
-], exports.EFFilmstrip.prototype, "syncHierarchyScroll", 1);
-__decorateClass([
-  decorators_js.eventOptions({ capture: false })
-], exports.EFFilmstrip.prototype, "scrub", 1);
-__decorateClass([
-  decorators_js.eventOptions({ capture: false })
-], exports.EFFilmstrip.prototype, "startScrub", 1);
-__decorateClass([
-  decorators_js.eventOptions({ passive: false })
-], exports.EFFilmstrip.prototype, "scrollScrub", 1);
-exports.EFFilmstrip = __decorateClass([
-  decorators_js.customElement("ef-filmstrip")
-], exports.EFFilmstrip);