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

package/src/gui/EFFilmstrip.ts

@@ -103,7 +103,7 @@ class FilmstripItem extends TWMixin(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>
@@ -112,7 +112,7 @@ class FilmstripItem extends TWMixin(LitElement) {
   }
 
   renderChildren(): Array<TemplateResult<1> | typeof nothing> | typeof nothing {
-    return renderFilmStripChildren(
+    return renderFilmstripChildren(
       Array.from(this.element.children),
       this.pixelsPerMs,
     );
@@ -228,7 +228,7 @@ export class EFTimegroupFilmstrip extends FilmstripItem {
   contents() {
     return html`
       <span>TIME GROUP</span>
-      ${renderFilmStripChildren(
+      ${renderFilmstripChildren(
         Array.from(this.element.children || []),
         this.pixelsPerMs,
       )}
@@ -242,7 +242,7 @@ export class EFHTMLFilmstrip extends FilmstripItem {
   contents() {
     return html`
       <span>${this.element.tagName}</span>
-      ${renderFilmStripChildren(
+      ${renderFilmstripChildren(
         Array.from(this.element.children || []),
         this.pixelsPerMs,
       )}
@@ -282,8 +282,8 @@ class EFHierarchyItem<
         <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;
@@ -328,7 +328,7 @@ class EFAudioHierarchyItem extends EFHierarchyItem {
   }
 
   displayLabel() {
-    return this.element.getAttribute("src") ?? "(no src)";
+    return this.element.src ?? "(no src)";
   }
 }
 
@@ -339,7 +339,7 @@ class EFVideoHierarchyItem extends EFHierarchyItem {
   }
 
   displayLabel() {
-    return this.element.getAttribute("src") ?? "(no src)";
+    return this.element.src ?? "(no src)";
   }
 }
 
@@ -375,7 +375,7 @@ class EFImageHierarchyItem extends EFHierarchyItem {
   }
 
   displayLabel() {
-    return this.element.getAttribute("src") ?? "(no src)";
+    return this.element.src ?? "(no src)";
   }
 }
 
@@ -431,7 +431,7 @@ const renderHierarchyChildren = (
   });
 };
 
-const renderFilmStripChildren = (
+const renderFilmstripChildren = (
   children: Element[],
   pixelsPerMs: number,
 ): Array<TemplateResult<1> | typeof nothing> => {
@@ -481,7 +481,7 @@ const renderFilmStripChildren = (
 };
 
 @customElement("ef-filmstrip")
-export class EFFilmStrip extends TWMixin(LitElement) {
+export class EFFilmstrip extends TWMixin(LitElement) {
   @property({ type: Number })
   pixelsPerMs = 0.04;
 
@@ -511,8 +511,34 @@ export class EFFilmStrip extends TWMixin(LitElement) {
       // where the filmstrip clobbers the time loaded from localStorage
       this.currentTimeMs = target.currentTimeMs;
     }
+
+    window.addEventListener("keypress", this.#handleKeyPress);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    window.removeEventListener("keypress", this.#handleKeyPress);
   }
 
+  #handleKeyPress = (event: KeyboardEvent) => {
+    // On spacebar, toggle playback
+    if (event.key === " ") {
+      // CSS selector to match all interactive elements
+      const interactiveSelector =
+        "input, textarea, button, select, a, [contenteditable]";
+
+      // Check if the event target or its ancestor matches an interactive element
+      const closestInteractive = (event.target as HTMLElement | null)?.closest(
+        interactiveSelector,
+      );
+      if (closestInteractive) {
+        return;
+      }
+      event.preventDefault();
+      this.playing = !this.playing;
+    }
+  };
+
   @eventOptions({ passive: false })
   syncGutterScroll() {
     if (this.gutter && this.hierarchyRef.value) {
@@ -531,6 +557,90 @@ export class EFFilmStrip extends TWMixin(LitElement) {
 
   #lastTick?: DOMHighResTimeStamp;
 
+  #playbackAudioContext: AudioContext | null = null;
+  #playbackAnimationFrameRequest: number | null = null;
+  #AUDIO_PLAYBACK_SLICE_MS = 1000;
+
+  #syncPlayheadToAudioContext(target: EFTimegroup, startMs: number) {
+    target.currentTimeMs =
+      startMs + (this.#playbackAudioContext?.currentTime ?? 0) * 1000;
+    this.#playbackAnimationFrameRequest = requestAnimationFrame(() => {
+      this.#syncPlayheadToAudioContext(target, startMs);
+    });
+  }
+
+  async #stopPlayback() {
+    if (this.#playbackAudioContext) {
+      if (this.#playbackAudioContext.state !== "closed") {
+        await this.#playbackAudioContext.close();
+      }
+    }
+    if (this.#playbackAnimationFrameRequest) {
+      cancelAnimationFrame(this.#playbackAnimationFrameRequest);
+    }
+    this.#playbackAudioContext = null;
+  }
+
+  async #startPlayback() {
+    await this.#stopPlayback();
+    const timegroup = this.target;
+    if (!timegroup) {
+      return;
+    }
+
+    let currentMs = timegroup.currentTimeMs;
+    let bufferCount = 0;
+    this.#playbackAudioContext = new AudioContext({
+      latencyHint: "playback",
+    });
+    if (this.#playbackAnimationFrameRequest) {
+      cancelAnimationFrame(this.#playbackAnimationFrameRequest);
+    }
+    this.#syncPlayheadToAudioContext(timegroup, currentMs);
+    const playbackContext = 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 + this.#AUDIO_PLAYBACK_SLICE_MS;
+      currentMs += 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) / 1000);
+      source.onended = () => {
+        bufferCount--;
+        if (endMs >= toMs) {
+          this.playing = false;
+        } else {
+          fillBuffer();
+        }
+      };
+      return true;
+    };
+
+    await fillBuffer();
+    await playbackContext.resume();
+  }
+
   advancePlayhead = (tick?: DOMHighResTimeStamp) => {
     if (this.#lastTick && tick && this.target) {
       this.target.currentTimeMs += tick - this.#lastTick;
@@ -702,7 +812,7 @@ export class EFFilmStrip extends TWMixin(LitElement) {
             ${ref(this.playheadRef)}
           ></div>
 
-          ${renderFilmStripChildren(
+          ${renderFilmstripChildren(
             Array.from(target?.children || []),
             this.pixelsPerMs,
           )}
@@ -714,7 +824,9 @@ export class EFFilmStrip extends TWMixin(LitElement) {
   update(changedProperties: Map<string | number | symbol, unknown>) {
     if (changedProperties.has("playing")) {
       if (this.playing) {
-        this.advancePlayhead(0);
+        this.#startPlayback();
+      } else {
+        this.#stopPlayback();
       }
     }
     super.update(changedProperties);
@@ -746,7 +858,7 @@ export class EFFilmStrip extends TWMixin(LitElement) {
 
 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;