@editframe/elements 0.6.0-beta.16 → 0.6.0-beta.18

package/dist/lib/av/EncodedAsset.cjs

@@ -436,7 +436,10 @@ const _VideoAsset = class _VideoAsset2 extends ISOFileAsset {
     this.removeEventListener("frame", maybeFrame);
     if (frame) {
       if (this.lastSoughtFrame && !this.decodedFrames.includes(this.lastSoughtFrame)) {
-        this.lastSoughtFrame.close();
+        try {
+          this.lastSoughtFrame.close();
+        } catch (error) {
+        }
       }
       this.lastSoughtFrame = frame;
     }

package/dist/lib/av/EncodedAsset.js

@@ -417,7 +417,10 @@ const _VideoAsset = class _VideoAsset2 extends ISOFileAsset {
     this.removeEventListener("frame", maybeFrame);
     if (frame) {
       if (this.lastSoughtFrame && !this.decodedFrames.includes(this.lastSoughtFrame)) {
-        this.lastSoughtFrame.close();
+        try {
+          this.lastSoughtFrame.close();
+        } catch (error) {
+        }
       }
       this.lastSoughtFrame = frame;
     }

package/dist/packages/elements/src/EF_FRAMEGEN.d.ts

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

package/dist/packages/elements/src/elements/EFMedia.cjs

@@ -212,7 +212,7 @@ class EFMedia extends EFSourceMixin.EFSourceMixin(EFTemporal.EFTemporal(FetchMix
     if (this.src.startsWith("editframe://") || this.src.startsWith("http")) {
       return `${this.src}/index`;
     }
-    return `/@ef-track-fragment-index/${this.getAttribute("src") ?? ""}`;
+    return `/@ef-track-fragment-index/${this.src ?? ""}`;
   }
   fragmentTrackPath(trackId) {
     if (this.src.startsWith("editframe://") || this.src.startsWith("http")) {

package/dist/packages/elements/src/elements/EFMedia.d.ts

@@ -1,7 +1,7 @@
 import { LitElement, PropertyValueMap } from 'lit';
 import { Task } from '@lit/task';
 import { MP4File } from '../../../../lib/av/MP4File';
-import { TrackFragmentIndex, TrackSegment } from '../../../assets';
+import { TrackFragmentIndex, TrackSegment } from '../../../assets/src';
 import { VideoAsset } from '../../../../lib/av/EncodedAsset';
 
 import type * as MP4Box from "mp4box";

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

@@ -210,7 +210,7 @@ class EFMedia extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), {
     if (this.src.startsWith("editframe://") || this.src.startsWith("http")) {
       return `${this.src}/index`;
     }
-    return `/@ef-track-fragment-index/${this.getAttribute("src") ?? ""}`;
+    return `/@ef-track-fragment-index/${this.src ?? ""}`;
   }
   fragmentTrackPath(trackId) {
     if (this.src.startsWith("editframe://") || this.src.startsWith("http")) {

package/dist/packages/elements/src/elements/EFTimegroup.cjs

@@ -25,7 +25,8 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 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 __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
-var _currentTime;
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _currentTime, _EFTimegroup_instances, addAudioToContext_fn;
 const shallowGetTimegroups = (element, groups = []) => {
   for (const child of Array.from(element.children)) {
     if (child instanceof exports.EFTimegroup) {
@@ -39,6 +40,7 @@ const shallowGetTimegroups = (element, groups = []) => {
 exports.EFTimegroup = class EFTimegroup extends EFTemporal.EFTemporal(lit.LitElement) {
   constructor() {
     super(...arguments);
+    __privateAdd(this, _EFTimegroup_instances);
     this._timeGroupContext = this;
     __privateAdd(this, _currentTime, 0);
     this.mode = "sequence";
@@ -240,42 +242,13 @@ exports.EFTimegroup = class EFTimegroup extends EFTemporal.EFTemporal(lit.LitEle
     );
   }
   async renderAudio(fromMs, toMs) {
-    await this.waitForMediaDurations();
     const durationMs = toMs - fromMs;
     const audioContext = new OfflineAudioContext(
       2,
       Math.round(48e3 * durationMs / 1e3),
       48e3
     );
-    await Promise.all(
-      EFMedia.deepGetMediaElements(this).map(async (mediaElement) => {
-        await mediaElement.trackFragmentIndexLoader.taskComplete;
-        const mediaStartsBeforeEnd = mediaElement.startTimeMs <= toMs;
-        const mediaEndsAfterStart = mediaElement.endTimeMs >= fromMs;
-        const mediaOverlaps = mediaStartsBeforeEnd && mediaEndsAfterStart;
-        if (!mediaOverlaps || mediaElement.defaultAudioTrackId === void 0) {
-          return;
-        }
-        const audio = await mediaElement.fetchAudioSpanningTime(fromMs, toMs);
-        if (!audio) {
-          throw new Error("Failed to fetch audio");
-        }
-        const ctxStartMs = Math.max(0, mediaElement.startTimeMs - fromMs);
-        const ctxEndMs = Math.min(durationMs, mediaElement.endTimeMs - fromMs);
-        const ctxDurationMs = ctxEndMs - ctxStartMs;
-        const offset = Math.max(0, fromMs - mediaElement.startTimeMs) - audio.startMs;
-        const bufferSource = audioContext.createBufferSource();
-        bufferSource.buffer = await audioContext.decodeAudioData(
-          await audio.blob.arrayBuffer()
-        );
-        bufferSource.connect(audioContext.destination);
-        bufferSource.start(
-          ctxStartMs / 1e3,
-          offset / 1e3,
-          ctxDurationMs / 1e3
-        );
-      })
-    );
+    await __privateMethod(this, _EFTimegroup_instances, addAudioToContext_fn).call(this, audioContext, fromMs, toMs);
     return await audioContext.startRendering();
   }
   async loadMd5Sums() {
@@ -297,6 +270,40 @@ exports.EFTimegroup = class EFTimegroup extends EFTemporal.EFTemporal(lit.LitEle
   }
 };
 _currentTime = /* @__PURE__ */ new WeakMap();
+_EFTimegroup_instances = /* @__PURE__ */ new WeakSet();
+addAudioToContext_fn = async function(audioContext, fromMs, toMs) {
+  await this.waitForMediaDurations();
+  const durationMs = toMs - fromMs;
+  await Promise.all(
+    EFMedia.deepGetMediaElements(this).map(async (mediaElement) => {
+      await mediaElement.trackFragmentIndexLoader.taskComplete;
+      const mediaStartsBeforeEnd = mediaElement.startTimeMs <= toMs;
+      const mediaEndsAfterStart = mediaElement.endTimeMs >= fromMs;
+      const mediaOverlaps = mediaStartsBeforeEnd && mediaEndsAfterStart;
+      if (!mediaOverlaps || mediaElement.defaultAudioTrackId === void 0) {
+        return;
+      }
+      const audio = await mediaElement.fetchAudioSpanningTime(fromMs, toMs);
+      if (!audio) {
+        throw new Error("Failed to fetch audio");
+      }
+      const ctxStartMs = Math.max(0, mediaElement.startTimeMs - fromMs);
+      const ctxEndMs = Math.min(durationMs, mediaElement.endTimeMs - fromMs);
+      const ctxDurationMs = ctxEndMs - ctxStartMs;
+      const offset = Math.max(0, fromMs - mediaElement.startTimeMs) - audio.startMs;
+      const bufferSource = audioContext.createBufferSource();
+      bufferSource.buffer = await audioContext.decodeAudioData(
+        await audio.blob.arrayBuffer()
+      );
+      bufferSource.connect(audioContext.destination);
+      bufferSource.start(
+        ctxStartMs / 1e3,
+        offset / 1e3,
+        ctxDurationMs / 1e3
+      );
+    })
+  );
+};
 exports.EFTimegroup.styles = lit.css`
     :host {
       display: block;

package/dist/packages/elements/src/elements/EFTimegroup.d.ts

@@ -20,7 +20,7 @@ export declare class EFTimegroup extends EFTimegroup_base {
     get crossoverStartMs(): number;
     get crossoverEndMs(): number;
     get durationMs(): number;
-    waitForMediaDurations(): Promise<Record<number, import('../../../assets/dist/packages/assets/src').TrackFragmentIndex>[]>;
+    waitForMediaDurations(): Promise<Record<number, import('../../../assets/src').TrackFragmentIndex>[]>;
     get childTemporals(): import('./EFTemporal').TemporalMixinInterface[];
     protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     shouldWrapWithWorkbench(): boolean;

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

@@ -23,7 +23,8 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 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 __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
-var _currentTime;
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _currentTime, _EFTimegroup_instances, addAudioToContext_fn;
 const shallowGetTimegroups = (element, groups = []) => {
   for (const child of Array.from(element.children)) {
     if (child instanceof EFTimegroup) {
@@ -37,6 +38,7 @@ const shallowGetTimegroups = (element, groups = []) => {
 let EFTimegroup = class extends EFTemporal(LitElement) {
   constructor() {
     super(...arguments);
+    __privateAdd(this, _EFTimegroup_instances);
     this._timeGroupContext = this;
     __privateAdd(this, _currentTime, 0);
     this.mode = "sequence";
@@ -238,42 +240,13 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
     );
   }
   async renderAudio(fromMs, toMs) {
-    await this.waitForMediaDurations();
     const durationMs = toMs - fromMs;
     const audioContext = new OfflineAudioContext(
       2,
       Math.round(48e3 * durationMs / 1e3),
       48e3
     );
-    await Promise.all(
-      deepGetMediaElements(this).map(async (mediaElement) => {
-        await mediaElement.trackFragmentIndexLoader.taskComplete;
-        const mediaStartsBeforeEnd = mediaElement.startTimeMs <= toMs;
-        const mediaEndsAfterStart = mediaElement.endTimeMs >= fromMs;
-        const mediaOverlaps = mediaStartsBeforeEnd && mediaEndsAfterStart;
-        if (!mediaOverlaps || mediaElement.defaultAudioTrackId === void 0) {
-          return;
-        }
-        const audio = await mediaElement.fetchAudioSpanningTime(fromMs, toMs);
-        if (!audio) {
-          throw new Error("Failed to fetch audio");
-        }
-        const ctxStartMs = Math.max(0, mediaElement.startTimeMs - fromMs);
-        const ctxEndMs = Math.min(durationMs, mediaElement.endTimeMs - fromMs);
-        const ctxDurationMs = ctxEndMs - ctxStartMs;
-        const offset = Math.max(0, fromMs - mediaElement.startTimeMs) - audio.startMs;
-        const bufferSource = audioContext.createBufferSource();
-        bufferSource.buffer = await audioContext.decodeAudioData(
-          await audio.blob.arrayBuffer()
-        );
-        bufferSource.connect(audioContext.destination);
-        bufferSource.start(
-          ctxStartMs / 1e3,
-          offset / 1e3,
-          ctxDurationMs / 1e3
-        );
-      })
-    );
+    await __privateMethod(this, _EFTimegroup_instances, addAudioToContext_fn).call(this, audioContext, fromMs, toMs);
     return await audioContext.startRendering();
   }
   async loadMd5Sums() {
@@ -295,6 +268,40 @@ let EFTimegroup = class extends EFTemporal(LitElement) {
   }
 };
 _currentTime = /* @__PURE__ */ new WeakMap();
+_EFTimegroup_instances = /* @__PURE__ */ new WeakSet();
+addAudioToContext_fn = async function(audioContext, fromMs, toMs) {
+  await this.waitForMediaDurations();
+  const durationMs = toMs - fromMs;
+  await Promise.all(
+    deepGetMediaElements(this).map(async (mediaElement) => {
+      await mediaElement.trackFragmentIndexLoader.taskComplete;
+      const mediaStartsBeforeEnd = mediaElement.startTimeMs <= toMs;
+      const mediaEndsAfterStart = mediaElement.endTimeMs >= fromMs;
+      const mediaOverlaps = mediaStartsBeforeEnd && mediaEndsAfterStart;
+      if (!mediaOverlaps || mediaElement.defaultAudioTrackId === void 0) {
+        return;
+      }
+      const audio = await mediaElement.fetchAudioSpanningTime(fromMs, toMs);
+      if (!audio) {
+        throw new Error("Failed to fetch audio");
+      }
+      const ctxStartMs = Math.max(0, mediaElement.startTimeMs - fromMs);
+      const ctxEndMs = Math.min(durationMs, mediaElement.endTimeMs - fromMs);
+      const ctxDurationMs = ctxEndMs - ctxStartMs;
+      const offset = Math.max(0, fromMs - mediaElement.startTimeMs) - audio.startMs;
+      const bufferSource = audioContext.createBufferSource();
+      bufferSource.buffer = await audioContext.decodeAudioData(
+        await audio.blob.arrayBuffer()
+      );
+      bufferSource.connect(audioContext.destination);
+      bufferSource.start(
+        ctxStartMs / 1e3,
+        offset / 1e3,
+        ctxDurationMs / 1e3
+      );
+    })
+  );
+};
 EFTimegroup.styles = css`
     :host {
       display: block;

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

@@ -32,7 +32,8 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 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 _lastTick;
+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;
@@ -94,7 +95,7 @@ class FilmstripItem extends TWMixin.TWMixin(lit.LitElement) {
       }
     }}
         ?data-focused=${this.isFocused}
-        class="border-outset relative mb-[1px] block h-[1.25rem] text-nowrap border border-slate-500 bg-blue-200 text-sm data-[focused]:bg-slate-400"
+        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>
@@ -102,7 +103,7 @@ class FilmstripItem extends TWMixin.TWMixin(lit.LitElement) {
     </div>`;
   }
   renderChildren() {
-    return renderFilmStripChildren(
+    return renderFilmstripChildren(
       Array.from(this.element.children),
       this.pixelsPerMs
     );
@@ -221,7 +222,7 @@ exports.EFTimegroupFilmstrip = class EFTimegroupFilmstrip extends FilmstripItem
   contents() {
     return lit.html`
       <span>TIME GROUP</span>
-      ${renderFilmStripChildren(
+      ${renderFilmstripChildren(
       Array.from(this.element.children || []),
       this.pixelsPerMs
     )}
@@ -236,7 +237,7 @@ exports.EFHTMLFilmstrip = class EFHTMLFilmstrip extends FilmstripItem {
   contents() {
     return lit.html`
       <span>${this.element.tagName}</span>
-      ${renderFilmStripChildren(
+      ${renderFilmstripChildren(
       Array.from(this.element.children || []),
       this.pixelsPerMs
     )}
@@ -266,8 +267,8 @@ let EFHierarchyItem = class extends TWMixin.TWMixin(lit.LitElement) {
         <div
           ?data-focused=${this.isFocused}
           class="peer 
-            flex h-[1.25rem] items-center overflow-hidden text-nowrap  border border-slate-500
-          bg-slate-200 pl-2 text-sm hover:bg-slate-400 data-[focused]:bg-slate-400"
+            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;
@@ -320,7 +321,7 @@ let EFAudioHierarchyItem = class extends EFHierarchyItem {
     return "🔊";
   }
   displayLabel() {
-    return this.element.getAttribute("src") ?? "(no src)";
+    return this.element.src ?? "(no src)";
   }
 };
 EFAudioHierarchyItem = __decorateClass([
@@ -331,7 +332,7 @@ let EFVideoHierarchyItem = class extends EFHierarchyItem {
     return "📼";
   }
   displayLabel() {
-    return this.element.getAttribute("src") ?? "(no src)";
+    return this.element.src ?? "(no src)";
   }
 };
 EFVideoHierarchyItem = __decorateClass([
@@ -369,7 +370,7 @@ let EFImageHierarchyItem = class extends EFHierarchyItem {
     return "🖼️";
   }
   displayLabel() {
-    return this.element.getAttribute("src") ?? "(no src)";
+    return this.element.src ?? "(no src)";
   }
 };
 EFImageHierarchyItem = __decorateClass([
@@ -425,7 +426,7 @@ const renderHierarchyChildren = (children) => {
     ></ef-html-hierarchy-item>`;
   });
 };
-const renderFilmStripChildren = (children, pixelsPerMs) => {
+const renderFilmstripChildren = (children, pixelsPerMs) => {
   return children.map((child) => {
     if (child instanceof EFTimegroup.EFTimegroup) {
       return lit.html`<ef-timegroup-filmstrip
@@ -470,16 +471,33 @@ const renderFilmStripChildren = (children, pixelsPerMs) => {
     ></ef-html-filmstrip>`;
   });
 };
-exports.EFFilmStrip = class EFFilmStrip extends TWMixin.TWMixin(lit.LitElement) {
+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.target) {
         this.target.currentTimeMs += tick - __privateGet(this, _lastTick);
@@ -503,6 +521,11 @@ exports.EFFilmStrip = class EFFilmStrip extends TWMixin.TWMixin(lit.LitElement)
       this.timegroupController = new TimegroupController.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) {
@@ -643,7 +666,7 @@ exports.EFFilmStrip = class EFFilmStrip extends TWMixin.TWMixin(lit.LitElement)
             ${ref_js.ref(this.playheadRef)}
           ></div>
 
-          ${renderFilmStripChildren(
+          ${renderFilmstripChildren(
       Array.from(target?.children || []),
       this.pixelsPerMs
     )}
@@ -654,7 +677,9 @@ exports.EFFilmStrip = class EFFilmStrip extends TWMixin.TWMixin(lit.LitElement)
   update(changedProperties) {
     if (changedProperties.has("playing")) {
       if (this.playing) {
-        this.advancePlayhead(0);
+        __privateMethod(this, _EFFilmstrip_instances, startPlayback_fn).call(this);
+      } else {
+        __privateMethod(this, _EFFilmstrip_instances, stopPlayback_fn).call(this);
       }
     }
     super.update(changedProperties);
@@ -680,40 +705,116 @@ exports.EFFilmStrip = class EFFilmStrip extends TWMixin.TWMixin(lit.LitElement)
     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.target;
+  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);
+], exports.EFFilmstrip.prototype, "pixelsPerMs", 2);
 __decorateClass([
   decorators_js.property({ type: Number })
-], exports.EFFilmStrip.prototype, "currentTimeMs", 2);
+], exports.EFFilmstrip.prototype, "currentTimeMs", 2);
 __decorateClass([
   decorators_js.property({ type: String, attribute: "target" })
-], exports.EFFilmStrip.prototype, "targetSelector", 2);
+], exports.EFFilmstrip.prototype, "targetSelector", 2);
 __decorateClass([
   decorators_js.state()
-], exports.EFFilmStrip.prototype, "scrubbing", 2);
+], exports.EFFilmstrip.prototype, "scrubbing", 2);
 __decorateClass([
   decorators_js.state()
-], exports.EFFilmStrip.prototype, "playing", 2);
+], exports.EFFilmstrip.prototype, "playing", 2);
 __decorateClass([
   decorators_js.state()
-], exports.EFFilmStrip.prototype, "timelineScrolltop", 2);
+], exports.EFFilmstrip.prototype, "timelineScrolltop", 2);
 __decorateClass([
   decorators_js.eventOptions({ passive: false })
-], exports.EFFilmStrip.prototype, "syncGutterScroll", 1);
+], exports.EFFilmstrip.prototype, "syncGutterScroll", 1);
 __decorateClass([
   decorators_js.eventOptions({ passive: false })
-], exports.EFFilmStrip.prototype, "syncHierarchyScroll", 1);
+], exports.EFFilmstrip.prototype, "syncHierarchyScroll", 1);
 __decorateClass([
   decorators_js.eventOptions({ capture: false })
-], exports.EFFilmStrip.prototype, "scrub", 1);
+], exports.EFFilmstrip.prototype, "scrub", 1);
 __decorateClass([
   decorators_js.eventOptions({ capture: false })
-], exports.EFFilmStrip.prototype, "startScrub", 1);
+], exports.EFFilmstrip.prototype, "startScrub", 1);
 __decorateClass([
   decorators_js.eventOptions({ passive: false })
-], exports.EFFilmStrip.prototype, "scrollScrub", 1);
-exports.EFFilmStrip = __decorateClass([
+], exports.EFFilmstrip.prototype, "scrollScrub", 1);
+exports.EFFilmstrip = __decorateClass([
   decorators_js.customElement("ef-filmstrip")
-], exports.EFFilmStrip);
+], exports.EFFilmstrip);

package/dist/packages/elements/src/gui/EFFilmstrip.d.ts

@@ -71,11 +71,11 @@ declare class EFTimegroupHierarchyItem extends EFHierarchyItem<EFTimegroup> {
 }
 declare class EFAudioHierarchyItem extends EFHierarchyItem {
     get icon(): string;
-    displayLabel(): string;
+    displayLabel(): any;
 }
 declare class EFVideoHierarchyItem extends EFHierarchyItem {
     get icon(): string;
-    displayLabel(): string;
+    displayLabel(): any;
 }
 declare class EFCaptionsHierarchyItem extends EFHierarchyItem {
     get icon(): string;
@@ -89,13 +89,13 @@ declare class EFWaveformHierarchyItem extends EFHierarchyItem {
 }
 declare class EFImageHierarchyItem extends EFHierarchyItem {
     get icon(): string;
-    displayLabel(): string;
+    displayLabel(): any;
 }
 declare class EFHTMLHierarchyItem extends EFHierarchyItem {
     get icon(): TemplateResult<1>;
 }
-declare const EFFilmStrip_base: typeof LitElement;
-export declare class EFFilmStrip extends EFFilmStrip_base {
+declare const EFFilmstrip_base: typeof LitElement;
+export declare class EFFilmstrip extends EFFilmstrip_base {
     #private;
     pixelsPerMs: number;
     currentTimeMs: number;
@@ -105,6 +105,7 @@ export declare class EFFilmStrip extends EFFilmStrip_base {
     timelineScrolltop: number;
     timegroupController?: TimegroupController;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     syncGutterScroll(): void;
     syncHierarchyScroll(): void;
     advancePlayhead: (tick?: DOMHighResTimeStamp) => void;
@@ -122,7 +123,7 @@ export declare class EFFilmStrip extends EFFilmStrip_base {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        "ef-filmstrip": EFFilmStrip;
+        "ef-filmstrip": EFFilmstrip;
         "ef-timegroup-hierarchy-item": EFTimegroupHierarchyItem;
         "ef-audio-hierarchy-item": EFAudioHierarchyItem;
         "ef-video-hierarchy-item": EFVideoHierarchyItem;