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

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, loopContext } from "./playingContext.ts";
+import type { EFWorkbench } from "./EFWorkbench.ts";
+import type { EFPreview } from "./EFPreview.ts";
 
 class ElementFilmstripController implements ReactiveController {
   constructor(
@@ -68,31 +73,38 @@ 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 })
   pixelsPerMs = 0.04;
 
-  get styles() {
+  get gutterStyles() {
     return {
       position: "relative",
-      left: `${this.pixelsPerMs * this.element.startTimeWithinParentMs}px`,
+      left: `${this.pixelsPerMs * (this.element.startTimeWithinParentMs - this.element.trimStartMs)}px`,
+      width: `${this.pixelsPerMs * (this.element.durationMs + this.element.trimStartMs + this.element.trimEndMs)}px`,
+    };
+  }
+
+  get trimPortionStyles() {
+    return {
       width: `${this.pixelsPerMs * this.element.durationMs}px`,
+      left: `${this.pixelsPerMs * this.element.trimStartMs}px`,
     };
   }
 
   render() {
-    return html` <div class="" style=${styleMap(this.styles)}>
+    return html`<div style=${styleMap(this.gutterStyles)}>
       <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"
+        class="bg-slate-300"
         ?data-focused=${this.isFocused}
         @mouseenter=${() => {
           if (this.focusContext) {
@@ -105,7 +117,13 @@ class FilmstripItem extends TWMixin(LitElement) {
           }
         }}
       >
-        ${this.animations()}
+        <div
+          ?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"
+          style=${styleMap(this.trimPortionStyles)}
+        >
+          ${this.animations()}
+        </div>
       </div>
       ${this.renderChildren()}
     </div>`;
@@ -254,14 +272,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 +503,25 @@ 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;
+
+  @consume({ context: loopContext, subscribe: true })
+  @state()
+  loop?: boolean;
 
   timegroupController?: TimegroupController;
 
+  @state()
+  currentTimeMs = 0;
+
   connectedCallback(): void {
     super.connectedCallback();
     this.#bindToTargetTimegroup();
@@ -529,19 +549,22 @@ export class EFFilmstrip extends TWMixin(LitElement) {
   #handleKeyPress = (event: KeyboardEvent) => {
     // On spacebar, toggle playback
     if (event.key === " ") {
+      const [target] = event.composedPath();
       // 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(
+      const closestInteractive = (target as HTMLElement | null)?.closest(
         interactiveSelector,
       );
       if (closestInteractive) {
         return;
       }
       event.preventDefault();
-      this.playing = !this.playing;
+      if (this.#contextElement) {
+        this.#contextElement.playing = !this.#contextElement.playing;
+      }
     }
   };
 
@@ -561,108 +584,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) {
@@ -773,23 +694,8 @@ export class EFFilmstrip extends TWMixin(LitElement) {
         />
         <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>`
-        }
+        <ef-toggle-play><button>${this.playing ? "⏸️" : "▶️"}</button></ef-toggle-play>
+        <ef-toggle-loop><button>${this.loop ? "🔁" : html`<span class="opacity-50">🔁</span>`}</button></ef-toggle-loop>
       </div>
       <div
         class="z-10 pl-1 pr-1 pt-2 shadow shadow-slate-600 overflow-auto"
@@ -826,17 +732,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 +741,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;
+  }
+}

package/src/gui/EFToggleLoop.ts

@@ -0,0 +1,34 @@
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+import { consume } from "@lit/context";
+
+import { efContext } from "./efContext.ts";
+import type { ContextMixinInterface } from "./ContextMixin.ts";
+
+@customElement("ef-toggle-loop")
+export class EFToggleLoop extends LitElement {
+  static styles = [
+    css`
+      :host {}
+    `,
+  ];
+
+  @consume({ context: efContext })
+  context?: ContextMixinInterface | null;
+
+  render() {
+    return html`
+      <slot @click=${() => {
+        if (this.context) {
+          this.context.loop = !this.context.loop;
+        }
+      }}></slot>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-toggle-loop": EFToggleLoop;
+  }
+}

package/src/gui/EFTogglePlay.ts

@@ -0,0 +1,38 @@
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
+import { consume } from "@lit/context";
+
+import { efContext } from "./efContext.ts";
+import type { ContextMixinInterface } from "./ContextMixin.ts";
+
+@customElement("ef-toggle-play")
+export class EFTogglePlay extends LitElement {
+  static styles = [
+    css`
+      :host {}
+    `,
+  ];
+
+  @consume({ context: efContext })
+  context?: ContextMixinInterface | null;
+
+  render() {
+    return html`
+      <slot @click=${() => {
+        if (this.context) {
+          if (this.context.playing) {
+            this.context.pause();
+          } else {
+            this.context.play();
+          }
+        }
+      }}></slot>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-toggle-play": EFTogglePlay;
+  }
+}

package/src/gui/EFWorkbench.ts

@@ -1,34 +1,15 @@
-import { createContext, provide } from "@lit/context";
 import { LitElement, html, css, type PropertyValueMap } from "lit";
 import { TaskStatus } from "@lit/task";
-import {
-  customElement,
-  eventOptions,
-  property,
-  state,
-} from "lit/decorators.js";
+import { customElement, eventOptions } from "lit/decorators.js";
 import { ref, createRef } from "lit/directives/ref.js";
 
-import { awaitMicrotask } from "@/util/awaitMicrotask";
-import { deepGetTemporalElements } from "../elements/EFTemporal";
-import { TWMixin } from "./TWMixin";
-import { shallowGetTimegroups } from "../elements/EFTimegroup";
-
-export interface FocusContext {
-  focusedElement: HTMLElement | null;
-}
-export const focusContext = createContext<FocusContext>(Symbol("focusContext"));
-
-export const focusedElement = createContext<HTMLElement | undefined>(
-  Symbol("focusedElement"),
-);
-
-export const fetchContext = createContext<typeof fetch>(Symbol("fetchContext"));
-
-export const apiHostContext = createContext<string>(Symbol("apiHostContext"));
+import { deepGetTemporalElements } from "../elements/EFTemporal.ts";
+import { TWMixin } from "./TWMixin.ts";
+import { shallowGetTimegroups } from "../elements/EFTimegroup.ts";
+import { ContextMixin } from "./ContextMixin.ts";
 
 @customElement("ef-workbench")
-export class EFWorkbench extends TWMixin(LitElement) {
+export class EFWorkbench extends ContextMixin(TWMixin(LitElement)) {
   static styles = [
     css`
       :host {
@@ -38,51 +19,6 @@ export class EFWorkbench extends TWMixin(LitElement) {
       }
     `,
   ];
-  stageRef = createRef<HTMLDivElement>();
-  canvasRef = createRef<HTMLSlotElement>();
-
-  @state()
-  stageScale = 1;
-
-  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 correctl. So we use requestAnimationFrame as a stop-gap.
-    requestAnimationFrame(this.setStageScale);
-  }
 
   disconnectedCallback(): void {
     super.disconnectedCallback();
@@ -93,40 +29,6 @@ export class EFWorkbench extends TWMixin(LitElement) {
     event.preventDefault();
   }
 
-  @provide({ context: focusContext })
-  focusContext = this as FocusContext;
-
-  @provide({ context: focusedElement })
-  @state()
-  focusedElement?: HTMLElement;
-
-  @provide({ context: fetchContext })
-  fetch = (path: URL | RequestInfo, 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}`,
-      });
-    }
-
-    return fetch(path, init);
-  };
-
-  @property({ type: String })
-  apiToken?: string;
-
-  @provide({ context: apiHostContext })
-  @property({ type: String })
-  apiHost = "";
-
-  @property({ type: Boolean })
-  rendering = false;
-
   focusOverlay = createRef<HTMLDivElement>();
 
   update(
@@ -176,21 +78,21 @@ export class EFWorkbench extends TWMixin(LitElement) {
       >
         <div
           ${ref(this.stageRef)}
-          class="relative grid h-full w-full place-content-center place-items-center overflow-hidden"
+          class="relative grid h-full w-full justify-center overflow-hidden"
           @wheel=${this.handleStageWheel}
         >
           <slot
             ${ref(this.canvasRef)}
-            class="inline-block"
             name="canvas"
+            class="inline-block"
           ></slot>
           <div
-            class="border border-blue-500 bg-blue-200 bg-opacity-20"
+            class="border border-blue-500 bg-blue-200 bg-opacity-20 absolute"
             ${ref(this.focusOverlay)}
           ></div>
         </div>
 
-        <slot class="overflow" name="timeline"></slot>
+        <slot class="overflow inline-block" name="timeline"></slot>
       </div>
     `;
   }
@@ -215,7 +117,7 @@ export class EFWorkbench extends TWMixin(LitElement) {
 
     for (let i = 0; i < frameCount; i++) {
       firstGroup.currentTimeMs = i * stepDurationMs;
-      await awaitMicrotask();
+      await new Promise<void>(queueMicrotask);
       const busyTasks = temporals
         .filter((temporal) => temporal.frameTask.status < TaskStatus.COMPLETE)
         .map((temporal) => temporal.frameTask);

package/src/gui/TWMixin.ts

@@ -2,8 +2,11 @@ import type { LitElement } from "lit";
 // @ts-expect-error cannot figure out how to declare this module as a string
 import twStyle from "./TWMixin.css?inline";
 
-const twSheet = new CSSStyleSheet();
-twSheet.replaceSync(twStyle);
+let twSheet: CSSStyleSheet | null = null;
+if (typeof window !== "undefined") {
+  twSheet = new CSSStyleSheet();
+  twSheet.replaceSync(twStyle);
+}
 export function TWMixin<T extends new (...args: any[]) => LitElement>(Base: T) {
   class TWElement extends Base {
     createRenderRoot() {
@@ -13,7 +16,11 @@ export function TWMixin<T extends new (...args: any[]) => LitElement>(Base: T) {
           "TWMixin can only be applied to elements with shadow roots",
         );
       }
-
+      if (!twSheet) {
+        throw new Error(
+          "twSheet not found. Probable cause: CSSStyleSheet not supported in this environment",
+        );
+      }
       if (renderRoot?.adoptedStyleSheets) {
         renderRoot.adoptedStyleSheets = [
           twSheet,

package/src/gui/apiHostContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from "@lit/context";
+
+export const apiHostContext = createContext<string>(Symbol("apiHostContext"));

package/src/gui/efContext.ts

@@ -0,0 +1,6 @@
+import { createContext } from "@lit/context";
+import type { ContextMixinInterface } from "./ContextMixin.ts";
+
+export const efContext = createContext<ContextMixinInterface | null>(
+  Symbol("efContext"),
+);

package/src/gui/fetchContext.ts

@@ -0,0 +1,5 @@
+import { createContext } from "@lit/context";
+
+export const fetchContext = createContext<
+  (url: string, init?: RequestInit) => Promise<Response>
+>(Symbol("fetchContext"));

package/src/gui/focusContext.ts

@@ -0,0 +1,7 @@
+import { createContext } from "@lit/context";
+
+export interface FocusContext {
+  focusedElement: HTMLElement | null;
+}
+
+export const focusContext = createContext<FocusContext>(Symbol("focusContext"));