@editframe/elements 0.6.0-beta.19 → 0.6.0-beta.22

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

@@ -0,0 +1,828 @@
+import { EFTimegroup } from "../elements/EFTimegroup.js";
+import { css, html, nothing, LitElement } from "lit";
+import { property, customElement, state, eventOptions } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { EFImage } from "../elements/EFImage.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 { consume } from "@lit/context";
+import { focusContext, focusedElement } from "./EFWorkbench.js";
+import { TWMixin } from "./TWMixin.js";
+import { msToTimeCode } from "../../../../lib/av/msToTimeCode.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;
+};
+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 _handleKeyPress, _lastTick, _playbackAudioContext, _playbackAnimationFrameRequest, _AUDIO_PLAYBACK_SLICE_MS, _EFFilmstrip_instances, 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(LitElement) {
+  constructor() {
+    super(...arguments);
+    this.element = new EFTimegroup();
+    this.pixelsPerMs = 0.04;
+  }
+  static {
+    this.styles = [
+      css`
+      :host {
+        display: block;
+      }
+    `
+    ];
+  }
+  get isFocused() {
+    return this.element && this.focusedElement === this.element;
+  }
+  get styles() {
+    return {
+      position: "relative",
+      left: `${this.pixelsPerMs * this.element.startTimeWithinParentMs}px`,
+      width: `${this.pixelsPerMs * this.element.durationMs}px`
+    };
+  }
+  render() {
+    return html` <div class="" style=${styleMap(this.styles)}>
+      <div
+        @mouseenter=${() => {
+      if (this.focusContext) {
+        this.focusContext.focusedElement = this.element;
+      }
+    }}
+        @mouseleave=${() => {
+      if (this.focusContext) {
+        this.focusContext.focusedElement = null;
+      }
+    }}
+        ?data-focused=${this.isFocused}
+        class="border-outset relative mb-[1px] block h-[1.1rem] text-nowrap border border-slate-500 bg-blue-200 text-sm data-[focused]:bg-slate-400"
+      >
+        ${this.animations()}
+      </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
+        class="relative h-[5px] bg-blue-500 opacity-50"
+        label="animation"
+        style=${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 html`<div
+            class="absolute top-0 h-full w-1 bg-red-500"
+            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 })
+], FilmstripItem.prototype, "focusContext", 2);
+__decorateClass([
+  consume({ context: focusedElement, subscribe: true })
+], FilmstripItem.prototype, "focusedElement", 2);
+__decorateClass([
+  property({ type: HTMLElement, attribute: false })
+], FilmstripItem.prototype, "element", 2);
+__decorateClass([
+  property({ type: Number })
+], FilmstripItem.prototype, "pixelsPerMs", 2);
+let EFAudioFilmstrip = class extends FilmstripItem {
+  contents() {
+    return html``;
+  }
+};
+EFAudioFilmstrip = __decorateClass([
+  customElement("ef-audio-filmstrip")
+], EFAudioFilmstrip);
+let EFVideoFilmstrip = class extends FilmstripItem {
+  contents() {
+    return html` 📼 `;
+  }
+};
+EFVideoFilmstrip = __decorateClass([
+  customElement("ef-video-filmstrip")
+], EFVideoFilmstrip);
+let EFCaptionsFilmstrip = class extends FilmstripItem {
+  contents() {
+    return html` 📝 `;
+  }
+};
+EFCaptionsFilmstrip = __decorateClass([
+  customElement("ef-captions-filmstrip")
+], EFCaptionsFilmstrip);
+let EFWaveformFilmstrip = class extends FilmstripItem {
+  contents() {
+    return html` 🌊 `;
+  }
+  renderChildren() {
+    return nothing;
+  }
+};
+EFWaveformFilmstrip = __decorateClass([
+  customElement("ef-waveform-filmstrip")
+], EFWaveformFilmstrip);
+let EFImageFilmstrip = class extends FilmstripItem {
+  contents() {
+    return html` 🖼️ `;
+  }
+};
+EFImageFilmstrip = __decorateClass([
+  customElement("ef-image-filmstrip")
+], EFImageFilmstrip);
+let EFTimegroupFilmstrip = class extends FilmstripItem {
+  contents() {
+    return html`
+      <span>TIME GROUP</span>
+      ${renderFilmstripChildren(
+      Array.from(this.element.children || []),
+      this.pixelsPerMs
+    )}
+    </div>
+    `;
+  }
+};
+EFTimegroupFilmstrip = __decorateClass([
+  customElement("ef-timegroup-filmstrip")
+], EFTimegroupFilmstrip);
+let EFHTMLFilmstrip = class extends FilmstripItem {
+  contents() {
+    return html`
+      <span>${this.element.tagName}</span>
+      ${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.focusedElement === this.element;
+  }
+  displayLabel() {
+    return nothing;
+  }
+  render() {
+    return html` 
+      <div>
+        <div
+          ?data-focused=${this.isFocused}
+          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"
+          @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([
+  property({ type: HTMLElement, attribute: false })
+], EFHierarchyItem.prototype, "element", 2);
+__decorateClass([
+  consume({ context: focusContext })
+], EFHierarchyItem.prototype, "focusContext", 2);
+__decorateClass([
+  consume({ context: focusedElement, 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)";
+  }
+};
+EFTimegroupHierarchyItem = __decorateClass([
+  customElement("ef-timegroup-hierarchy-item")
+], EFTimegroupHierarchyItem);
+let EFAudioHierarchyItem = class 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)";
+  }
+};
+EFVideoHierarchyItem = __decorateClass([
+  customElement("ef-video-hierarchy-item")
+], EFVideoHierarchyItem);
+let EFCaptionsHierarchyItem = class extends EFHierarchyItem {
+  get icon() {
+    return "📝 Captions";
+  }
+};
+EFCaptionsHierarchyItem = __decorateClass([
+  customElement("ef-captions-hierarchy-item")
+], EFCaptionsHierarchyItem);
+let EFCaptionsActiveWordHierarchyItem = class 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;
+  }
+};
+EFWaveformHierarchyItem = __decorateClass([
+  customElement("ef-waveform-hierarchy-item")
+], EFWaveformHierarchyItem);
+let EFImageHierarchyItem = class 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>`;
+  }
+};
+EFHTMLHierarchyItem = __decorateClass([
+  customElement("ef-html-hierarchy-item")
+], EFHTMLHierarchyItem);
+const renderHierarchyChildren = (children) => {
+  return children.map((child) => {
+    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
+        .element=${child}
+      ></ef-image-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
+        .element=${child}
+      ></ef-video-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
+        .element=${child}
+      ></ef-captions-active-word-hierarchy-item>`;
+    }
+    if (child instanceof EFWaveform) {
+      return html`<ef-waveform-hierarchy-item
+        .element=${child}
+      ></ef-waveform-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 EFTimegroup) {
+      return html`<ef-timegroup-filmstrip
+        .element=${child}
+        .pixelsPerMs=${pixelsPerMs}
+      >
+      </ef-timegroup-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
+        .element=${child}
+        .pixelsPerMs=${pixelsPerMs}
+      ></ef-audio-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
+        .element=${child}
+        .pixelsPerMs=${pixelsPerMs}
+      ></ef-captions-filmstrip>`;
+    }
+    if (child instanceof EFWaveform) {
+      return html`<ef-waveform-filmstrip
+        .element=${child}
+        .pixelsPerMs=${pixelsPerMs}
+      ></ef-waveform-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.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 = createRef();
+    this.hierarchyRef = createRef();
+    this.playheadRef = createRef();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const target = this.targetTimegroup;
+    if (target) {
+      this.timegroupController = new TimegroupController(target, this);
+      this.currentTimeMs = target.currentTimeMs;
+    }
+    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 html` <div
+      class="grid h-full bg-slate-100"
+      style=${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(this.currentTimeMs, true)} </code> /
+        <code>${msToTimeCode(target?.durationMs ?? 0, true)}</code>
+        ${this.playing ? html`<button
+              @click=${() => {
+      this.playing = false;
+    }}
+            >
+              ⏸️
+            </button>` : 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(this.hierarchyRef)}
+        @scroll=${this.syncHierarchyScroll}
+      >
+        ${renderHierarchyChildren(Array.from(target?.children ?? []))}
+      </div>
+      <div
+        class="h-full w-full cursor-crosshair overflow-auto bg-slate-200 pt-2"
+        id="gutter"
+        ${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({
+      left: `${this.pixelsPerMs * this.currentTimeMs}px`,
+      top: `${this.timelineScrolltop}px`
+    })}
+            ${ref(this.playheadRef)}
+          ></div>
+
+          ${renderFilmstripChildren(
+      Array.from(target?.children || []),
+      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;
+      }
+    }
+  }
+  get targetTimegroup() {
+    if (this.getAttribute("target")) {
+      const target = document.querySelector(this.getAttribute("target") ?? "");
+      if (target instanceof EFTimegroup) {
+        return target;
+      }
+      throw new Error("Invalid target, must be an EFTimegroup element");
+    }
+    return void 0;
+  }
+};
+_handleKeyPress = /* @__PURE__ */ new WeakMap();
+_lastTick = /* @__PURE__ */ new WeakMap();
+_playbackAudioContext = /* @__PURE__ */ new WeakMap();
+_playbackAnimationFrameRequest = /* @__PURE__ */ new WeakMap();
+_AUDIO_PLAYBACK_SLICE_MS = /* @__PURE__ */ new WeakMap();
+_EFFilmstrip_instances = /* @__PURE__ */ new WeakSet();
+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([
+  property({ type: Number })
+], EFFilmstrip.prototype, "pixelsPerMs", 2);
+__decorateClass([
+  property({ type: Number })
+], EFFilmstrip.prototype, "currentTimeMs", 2);
+__decorateClass([
+  property({ type: String, attribute: "target", reflect: true })
+], EFFilmstrip.prototype, "targetSelector", 2);
+__decorateClass([
+  state()
+], EFFilmstrip.prototype, "scrubbing", 2);
+__decorateClass([
+  state()
+], EFFilmstrip.prototype, "playing", 2);
+__decorateClass([
+  state()
+], EFFilmstrip.prototype, "timelineScrolltop", 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);
+EFFilmstrip = __decorateClass([
+  customElement("ef-filmstrip")
+], EFFilmstrip);
+export {
+  EFAudioFilmstrip,
+  EFCaptionsFilmstrip,
+  EFFilmstrip,
+  EFHTMLFilmstrip,
+  EFImageFilmstrip,
+  EFTimegroupFilmstrip,
+  EFVideoFilmstrip,
+  EFWaveformFilmstrip
+};