@editframe/elements 0.7.0-beta.9 → 0.8.0-beta.2

package/src/gui/ContextMixin.ts

@@ -0,0 +1,256 @@
+import type { LitElement } from "lit";
+import { provide } from "@lit/context";
+import { property, state } from "lit/decorators.js";
+
+import { focusContext, type FocusContext } from "./focusContext.ts";
+import { focusedElementContext } from "./focusedElementContext.ts";
+import { fetchContext } from "./fetchContext.ts";
+import { apiHostContext } from "./apiHostContext.ts";
+import { createRef } from "lit/directives/ref.js";
+import { playingContext } from "./playingContext.ts";
+import type { EFTimegroup } from "../elements/EFTimegroup.ts";
+
+declare class ContextMixinInterface {
+  focusContext: FocusContext;
+  focusedElement?: HTMLElement;
+  fetch: typeof fetch;
+  signingURL?: string;
+  apiToken?: string;
+  apiHost: string;
+  stageScale: number;
+  rendering: boolean;
+  stageRef: ReturnType<typeof createRef<HTMLDivElement>>;
+  canvasRef: ReturnType<typeof createRef<HTMLElement>>;
+  playing: boolean;
+  targetTimegroup?: EFTimegroup;
+  currentTimeMs: number;
+}
+
+type Constructor<T = {}> = new (...args: any[]) => T;
+export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
+  class ContextElement extends superClass {
+    @provide({ context: focusContext })
+    focusContext = this as FocusContext;
+
+    @provide({ context: focusedElementContext })
+    @state()
+    focusedElement?: HTMLElement;
+
+    @provide({ context: fetchContext })
+    fetch = async (url: string, init: RequestInit = {}) => {
+      init.headers ||= {};
+      Object.assign(init.headers, {
+        "Content-Type": "application/json",
+      });
+
+      const bearerToken = this.apiToken;
+      if (bearerToken) {
+        Object.assign(init.headers, {
+          Authorization: `Bearer ${bearerToken}`,
+        });
+      }
+
+      if (this.signingURL) {
+        if (!this.#URLTokens[url]) {
+          this.#URLTokens[url] = fetch(this.signingURL, {
+            method: "POST",
+            body: JSON.stringify({ url }),
+          }).then(async (response) => {
+            if (response.ok) {
+              return (await response.json()).token;
+            }
+            throw new Error(
+              `Failed to sign URL: ${url}. SigningURL: ${this.signingURL} ${response.status} ${response.statusText}`,
+            );
+          });
+        }
+
+        const urlToken = await this.#URLTokens[url];
+
+        Object.assign(init.headers, {
+          authorization: `Bearer ${urlToken}`,
+        });
+      }
+
+      return fetch(url, init);
+    };
+
+    #URLTokens: Record<string, Promise<string>> = {};
+
+    @property({ type: String })
+    signingURL?: string;
+
+    @property({ type: String })
+    apiToken?: string;
+
+    @provide({ context: apiHostContext })
+    @property({ type: String })
+    apiHost = "";
+
+    @provide({ context: playingContext })
+    @property({ type: Boolean, reflect: true })
+    playing = false;
+
+    @property({ type: Boolean, reflect: true })
+    loop = false;
+
+    @state()
+    stageScale = 1;
+
+    @property({ type: Boolean })
+    rendering = false;
+
+    @state()
+    currentTimeMs = 0;
+
+    stageRef = createRef<HTMLDivElement>();
+    canvasRef = createRef<HTMLSlotElement>();
+
+    setStageScale = () => {
+      if (this.isConnected && !this.rendering) {
+        const canvasElement = this.canvasRef.value;
+        const stageElement = this.stageRef.value;
+        if (stageElement && canvasElement) {
+          // Determine the appropriate scale factor to make the canvas fit into
+          // it's parent element.
+          const stageWidth = stageElement.clientWidth;
+          const stageHeight = stageElement.clientHeight;
+          const canvasWidth = canvasElement.clientWidth;
+          const canvasHeight = canvasElement.clientHeight;
+          const stageRatio = stageWidth / stageHeight;
+          const canvasRatio = canvasWidth / canvasHeight;
+          if (stageRatio > canvasRatio) {
+            const scale = stageHeight / canvasHeight;
+            if (this.stageScale !== scale) {
+              canvasElement.style.transform = `scale(${scale})`;
+            }
+            this.stageScale = scale;
+          } else {
+            const scale = stageWidth / canvasWidth;
+            if (this.stageScale !== scale) {
+              canvasElement.style.transform = `scale(${scale})`;
+            }
+            this.stageScale = scale;
+          }
+        }
+      }
+      if (this.isConnected) {
+        requestAnimationFrame(this.setStageScale);
+      }
+    };
+
+    connectedCallback(): void {
+      super.connectedCallback();
+      // Preferrably we would use a resizeObserver, but it is difficult to get the first resize
+      // timed correctly. So we use requestAnimationFrame as a stop-gap.
+      requestAnimationFrame(this.setStageScale);
+    }
+
+    update(changedProperties: Map<string | number | symbol, unknown>) {
+      if (changedProperties.has("playing")) {
+        if (this.playing) {
+          this.#startPlayback();
+        } else {
+          this.#stopPlayback();
+        }
+      }
+
+      if (changedProperties.has("currentTimeMs") && this.targetTimegroup) {
+        if (this.targetTimegroup.currentTimeMs !== this.currentTimeMs) {
+          this.targetTimegroup.currentTimeMs = this.currentTimeMs;
+        }
+      }
+      super.update(changedProperties);
+    }
+
+    get targetTimegroup() {
+      return this.querySelector("ef-timegroup");
+    }
+
+    #playbackAudioContext: AudioContext | null = null;
+    #playbackAnimationFrameRequest: number | null = null;
+    #AUDIO_PLAYBACK_SLICE_MS = 1000;
+
+    #syncPlayheadToAudioContext(target: EFTimegroup, startMs: number) {
+      this.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.targetTimegroup;
+      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();
+    }
+  }
+
+  return ContextElement as Constructor<ContextMixinInterface> & T;
+}

package/src/gui/EFFilmstrip.ts

@@ -1,4 +1,3 @@
-import { EFTimegroup } from "../elements/EFTimegroup";
 import {
   LitElement,
   html,
@@ -14,19 +13,25 @@ import {
   eventOptions,
   state,
 } from "lit/decorators.js";
+import { consume } from "@lit/context";
 import { styleMap } from "lit/directives/style-map.js";
 import { ref, createRef } from "lit/directives/ref.js";
-import { EFImage } from "../elements/EFImage";
-import { EFAudio } from "../elements/EFAudio";
-import { EFVideo } from "../elements/EFVideo";
-import { EFCaptions, EFCaptionsActiveWord } from "../elements/EFCaptions";
-import { EFWaveform } from "../elements/EFWaveform";
-import type { TemporalMixinInterface } from "../elements/EFTemporal";
-import { TimegroupController } from "../elements/TimegroupController";
-import { consume } from "@lit/context";
-import { type FocusContext, focusContext, focusedElement } from "./EFWorkbench";
-import { TWMixin } from "./TWMixin";
-import { msToTimeCode } from "@/av/msToTimeCode";
+
+import { EFImage } from "../elements/EFImage.ts";
+import { EFAudio } from "../elements/EFAudio.ts";
+import { EFVideo } from "../elements/EFVideo.ts";
+import { EFCaptions, EFCaptionsActiveWord } from "../elements/EFCaptions.ts";
+import { EFWaveform } from "../elements/EFWaveform.ts";
+import { EFTimegroup } from "../elements/EFTimegroup.ts";
+import type { TemporalMixinInterface } from "../elements/EFTemporal.ts";
+import { TimegroupController } from "../elements/TimegroupController.ts";
+import { TWMixin } from "./TWMixin.ts";
+import { msToTimeCode } from "../msToTimeCode.ts";
+import { focusedElementContext } from "./focusedElementContext.ts";
+import { type FocusContext, focusContext } from "./focusContext.ts";
+import { playingContext } from "./playingContext.ts";
+import type { EFWorkbench } from "./EFWorkbench.ts";
+import type { EFPreview } from "./EFPreview.ts";
 
 class ElementFilmstripController implements ReactiveController {
   constructor(
@@ -68,14 +73,14 @@ class FilmstripItem extends TWMixin(LitElement) {
   @consume({ context: focusContext, subscribe: true })
   focusContext?: FocusContext;
 
-  @consume({ context: focusedElement, subscribe: true })
+  @consume({ context: focusedElementContext, subscribe: true })
   focusedElement?: HTMLElement | null;
 
   get isFocused() {
     return this.element && this.focusContext?.focusedElement === this.element;
   }
 
-  @property({ type: HTMLElement, attribute: false })
+  @property({ type: Object, attribute: false })
   element: TemporalMixinInterface & LitElement = new EFTimegroup();
 
   @property({ type: Number })
@@ -254,14 +259,14 @@ export class EFHTMLFilmstrip extends FilmstripItem {
 class EFHierarchyItem<
   ElementType extends HTMLElement = HTMLElement,
 > extends TWMixin(LitElement) {
-  @property({ type: HTMLElement, attribute: false })
+  @property({ type: Object, attribute: false })
   // @ts-expect-error This could be initialzed with any HTMLElement
   element: ElementType = new EFTimegroup();
 
   @consume({ context: focusContext })
   focusContext?: FocusContext;
 
-  @consume({ context: focusedElement, subscribe: true })
+  @consume({ context: focusedElementContext, subscribe: true })
   focusedElement?: HTMLElement | null;
 
   get icon(): TemplateResult<1> | string {
@@ -485,23 +490,21 @@ export class EFFilmstrip extends TWMixin(LitElement) {
   @property({ type: Number })
   pixelsPerMs = 0.04;
 
-  @property({ type: Number })
-  currentTimeMs = 0;
-
-  @property({ type: String, attribute: "target", reflect: true })
-  targetSelector = "";
-
   @state()
   scrubbing = false;
 
   @state()
-  playing = false;
+  timelineScrolltop = 0;
 
+  @consume({ context: playingContext, subscribe: true })
   @state()
-  timelineScrolltop = 0;
+  playing?: boolean;
 
   timegroupController?: TimegroupController;
 
+  @state()
+  currentTimeMs = 0;
+
   connectedCallback(): void {
     super.connectedCallback();
     this.#bindToTargetTimegroup();
@@ -541,7 +544,9 @@ export class EFFilmstrip extends TWMixin(LitElement) {
         return;
       }
       event.preventDefault();
-      this.playing = !this.playing;
+      if (this.#contextElement) {
+        this.#contextElement.playing = !this.#contextElement.playing;
+      }
     }
   };
 
@@ -561,108 +566,6 @@ 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.targetTimegroup;
-    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.targetTimegroup) {
-      this.targetTimegroup.currentTimeMs += tick - this.#lastTick;
-      if (
-        this.targetTimegroup.currentTimeMs >= this.targetTimegroup.durationMs
-      ) {
-        this.playing = false;
-      }
-    }
-    this.#lastTick = tick;
-
-    if (this.playing) {
-      requestAnimationFrame(this.advancePlayhead);
-    }
-  };
-
   @eventOptions({ capture: false })
   scrub(e: MouseEvent) {
     if (this.playing) {
@@ -777,14 +680,18 @@ export class EFFilmstrip extends TWMixin(LitElement) {
           this.playing
             ? html`<button
               @click=${() => {
-                this.playing = false;
+                if (this.#contextElement) {
+                  this.#contextElement.playing = false;
+                }
               }}
             >
               ⏸️
             </button>`
             : html`<button
               @click=${() => {
-                this.playing = true;
+                if (this.#contextElement) {
+                  this.#contextElement.playing = true;
+                }
               }}
             >
               ▶️
@@ -826,17 +733,6 @@ export class EFFilmstrip extends TWMixin(LitElement) {
     </div>`;
   }
 
-  update(changedProperties: Map<string | number | symbol, unknown>) {
-    if (changedProperties.has("playing")) {
-      if (this.playing) {
-        this.#startPlayback();
-      } else {
-        this.#stopPlayback();
-      }
-    }
-    super.update(changedProperties);
-  }
-
   updated(changes: PropertyValueMap<any> | Map<PropertyKey, unknown>) {
     if (!this.targetTimegroup) {
       return;
@@ -846,19 +742,14 @@ export class EFFilmstrip extends TWMixin(LitElement) {
         this.targetTimegroup.currentTimeMs = this.currentTimeMs;
       }
     }
-    if (changes.has("target")) {
-      this.#bindToTargetTimegroup();
-    }
+  }
+
+  get #contextElement(): EFWorkbench | EFPreview | null {
+    return this.closest("ef-workbench, ef-preview") as EFWorkbench | EFPreview;
   }
 
   get targetTimegroup() {
-    if (this.getAttribute("target")) {
-      const target = document.getElementById(this.getAttribute("target") ?? "");
-      if (target instanceof EFTimegroup) {
-        return target;
-      }
-    }
-    return undefined;
+    return this.#contextElement?.targetTimegroup;
   }
 }
 

package/src/gui/EFPreview.ts

@@ -0,0 +1,39 @@
+import { LitElement, html, css } from "lit";
+import { customElement } from "lit/decorators.js";
+import { ref } from "lit/directives/ref.js";
+
+import { TWMixin } from "./TWMixin.ts";
+import { ContextMixin } from "./ContextMixin.ts";
+
+@customElement("ef-preview")
+export class EFPreview extends ContextMixin(TWMixin(LitElement)) {
+  static styles = [
+    css`
+      :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <div
+        ${ref(this.stageRef)}
+        class="relative grid h-full w-full place-content-center place-items-center overflow-hidden"
+      >
+        <slot
+          ${ref(this.canvasRef)}
+          class="inline-block"
+        ></slot>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-preview": EFPreview;
+  }
+}