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

package/src/elements/EFWaveform.ts

@@ -1,15 +1,15 @@
-import { EFAudio } from "./EFAudio";
+import { EFAudio } from "./EFAudio.ts";
 
 import { LitElement, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { EFVideo } from "./EFVideo";
-import { EFTemporal } from "./EFTemporal";
-import { CrossUpdateController } from "./CrossUpdateController";
-import { TWMixin } from "../gui/TWMixin";
+import { EFVideo } from "./EFVideo.ts";
+import { EFTemporal } from "./EFTemporal.ts";
+import { CrossUpdateController } from "./CrossUpdateController.ts";
+import { TWMixin } from "../gui/TWMixin.ts";
 import { Task } from "@lit/task";
 import * as d3 from "d3";
 import { type Ref, createRef, ref } from "lit/directives/ref.js";
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE";
+import { EF_INTERACTIVE } from "../EF_INTERACTIVE.ts";
 
 @customElement("ef-waveform")
 export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
@@ -351,7 +351,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     if (!this.targetElement.audioBufferTask.value) {
       return;
     }
-    if (this.targetElement.ownCurrentTimeMs > 0) {
+    if (this.targetElement.trimAdjustedOwnCurrentTimeMs > 0) {
       const audioContext = new OfflineAudioContext(2, 48000 / 25, 48000);
       const audioBufferSource = audioContext.createBufferSource();
       audioBufferSource.buffer =
@@ -364,7 +364,7 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
         0,
         Math.max(
           0,
-          (this.targetElement.ownCurrentTimeMs -
+          (this.targetElement.trimAdjustedOwnCurrentTimeMs -
             this.targetElement.audioBufferTask.value.startOffsetMs) /
             1000,
         ),
@@ -412,6 +412,6 @@ export class EFWaveform extends EFTemporal(TWMixin(LitElement)) {
     if (target instanceof EFAudio || target instanceof EFVideo) {
       return target;
     }
-    throw new Error("Invalid target, must be an EFAudio element");
+    throw new Error("Invalid target, must be an EFAudio or EFVideo element");
   }
 }

package/src/elements/FetchMixin.ts

@@ -1,8 +1,9 @@
-import { consume } from "@lit/context";
 import type { LitElement } from "lit";
-import { fetchContext } from "../gui/EFWorkbench";
+import { consume } from "@lit/context";
 import { state } from "lit/decorators/state.js";
 
+import { fetchContext } from "../gui/fetchContext.ts";
+
 export declare class FetchMixinInterface {
   fetch: typeof fetch;
 }
@@ -12,7 +13,8 @@ export function FetchMixin<T extends Constructor<LitElement>>(superClass: T) {
   class FetchElement extends superClass {
     @consume({ context: fetchContext, subscribe: true })
     @state()
-    fetch = fetch.bind(window);
+    fetch: (url: string, init?: RequestInit) => Promise<Response> =
+      fetch.bind(window);
   }
 
   return FetchElement as Constructor<FetchMixinInterface> & T;

package/src/elements/TimegroupController.ts

@@ -1,5 +1,5 @@
 import type { ReactiveController, LitElement } from "lit";
-import type { EFTimegroup } from "./EFTimegroup";
+import type { EFTimegroup } from "./EFTimegroup.ts";
 
 export class TimegroupController implements ReactiveController {
   constructor(

package/src/elements/durationConverter.ts

@@ -1,6 +1,26 @@
-import { parseTimeToMs } from "./parseTimeToMs";
+import { parseTimeToMs } from "./parseTimeToMs.ts";
 
 export const durationConverter = {
   fromAttribute: (value: string): number => parseTimeToMs(value),
   toAttribute: (value: number) => `${value}s`,
 };
+
+const positiveDurationConverter = (error: string) => {
+  return {
+    fromAttribute: (value: string): number => {
+      if (value.startsWith("-")) {
+        throw new Error(error);
+      }
+      return parseTimeToMs(value);
+    },
+    toAttribute: (value: number) => `${value}s`,
+  };
+};
+
+export const trimDurationConverter = positiveDurationConverter(
+  "Trimstart & trimend must be a positive value in milliseconds or seconds (1s, 1000ms)",
+);
+
+export const imageDurationConverter = positiveDurationConverter(
+  "Image duration must be a positive value in milliseconds or seconds (1s, 1000ms)",
+);

package/src/elements/parseTimeToMs.ts

@@ -1,4 +1,5 @@
 export const parseTimeToMs = (time: string) => {
+  console.log("parseTimeToMs", time);
   if (time.endsWith("ms")) {
     return Number.parseFloat(time);
   }

package/src/elements/util.ts

@@ -1,4 +1,4 @@
-import { EFTimegroup } from "./EFTimegroup";
+import { EFTimegroup } from "./EFTimegroup.ts";
 
 export const getRootTimeGroup = (element: Element): EFTimegroup | null => {
   let bestCandidate: EFTimegroup | null = null;

package/src/gui/ContextMixin.ts

@@ -0,0 +1,268 @@
+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 { createRef } from "lit/directives/ref.js";
+import { loopContext, playingContext } from "./playingContext.ts";
+import type { EFTimegroup } from "../elements/EFTimegroup.ts";
+import { efContext } from "./efContext.ts";
+
+export declare class ContextMixinInterface {
+  signingURL?: string;
+  rendering: boolean;
+  playing: boolean;
+  loop: boolean;
+  currentTimeMs: number;
+  focusedElement?: HTMLElement;
+  stageRef: ReturnType<typeof createRef<HTMLDivElement>>;
+  canvasRef: ReturnType<typeof createRef<HTMLElement>>;
+  targetTimegroup: EFTimegroup | null;
+  play(): void;
+  pause(): void;
+}
+
+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: efContext })
+    efContext = this;
+
+    @provide({ context: fetchContext })
+    fetch = async (url: string, init: RequestInit = {}) => {
+      init.headers ||= {};
+      Object.assign(init.headers, {
+        "Content-Type": "application/json",
+      });
+
+      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>> = {};
+
+    /**
+     * A URL that will be used to generated signed tokens for accessing media files from the
+     * editframe API. This is used to authenticate media requests per-user.
+     */
+    @property({ type: String })
+    signingURL?: string;
+
+    @provide({ context: playingContext })
+    @property({ type: Boolean, reflect: true })
+    playing = false;
+
+    @provide({ context: loopContext })
+    @property({ type: Boolean, reflect: true })
+    loop = false;
+
+    @state()
+    private 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;
+        const canvasChild = canvasElement?.assignedElements()[0];
+        if (stageElement && canvasElement && canvasChild) {
+          // Determine the appropriate scale factor to make the canvas fit into
+          canvasElement.style.width = `${canvasChild.clientWidth}px`;
+          canvasElement.style.height = `${canvasChild.clientHeight}px`;
+          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})`;
+              canvasElement.style.transformOrigin = "top";
+            }
+            this.stageScale = scale;
+          } else {
+            const scale = stageWidth / canvasWidth;
+            if (this.stageScale !== scale) {
+              canvasElement.style.transform = `scale(${scale})`;
+              canvasElement.style.transformOrigin = "top";
+            }
+            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");
+    }
+
+    play() {
+      this.playing = true;
+    }
+
+    pause() {
+      this.playing = false;
+    }
+
+    #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.pause();
+            if (this.loop) {
+              this.updateComplete.then(() => {
+                this.currentTimeMs = 0;
+                this.updateComplete.then(() => {
+                  this.play();
+                });
+              });
+            }
+          } else {
+            fillBuffer();
+          }
+        };
+        return true;
+      };
+
+      await fillBuffer();
+      await playbackContext.resume();
+    }
+  }
+
+  return ContextElement as Constructor<ContextMixinInterface> & T;
+}