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

package/dist/elements/src/elements/FetchMixin.js

@@ -0,0 +1,28 @@
+import { consume } from "@lit/context";
+import { state } from "lit/decorators/state.js";
+import { fetchContext } from "../gui/fetchContext.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+function FetchMixin(superClass) {
+  class FetchElement extends superClass {
+    constructor() {
+      super(...arguments);
+      this.fetch = fetch.bind(window);
+    }
+  }
+  __decorateClass([
+    consume({ context: fetchContext, subscribe: true }),
+    state()
+  ], FetchElement.prototype, "fetch");
+  return FetchElement;
+}
+export {
+  FetchMixin
+};

package/dist/elements/src/elements/TimegroupController.js

@@ -0,0 +1,20 @@
+class TimegroupController {
+  constructor(host, child) {
+    this.host = host;
+    this.child = child;
+    this.host.addController(this);
+  }
+  remove() {
+    this.host.removeController(this);
+  }
+  hostDisconnected() {
+    this.host.removeController(this);
+  }
+  hostUpdated() {
+    this.child.requestUpdate();
+    this.child.currentTimeMs = this.host.currentTimeMs - (this.child.startTimeMs ?? 0);
+  }
+}
+export {
+  TimegroupController
+};

package/dist/elements/src/elements/durationConverter.js

@@ -0,0 +1,8 @@
+import { parseTimeToMs } from "./parseTimeToMs.js";
+const durationConverter = {
+  fromAttribute: (value) => parseTimeToMs(value),
+  toAttribute: (value) => `${value}s`
+};
+export {
+  durationConverter
+};

package/dist/elements/src/elements/parseTimeToMs.js

@@ -0,0 +1,13 @@
+const parseTimeToMs = (time) => {
+  console.log("parseTimeToMs", time);
+  if (time.endsWith("ms")) {
+    return Number.parseFloat(time);
+  }
+  if (time.endsWith("s")) {
+    return Number.parseFloat(time) * 1e3;
+  }
+  throw new Error("Time must be in milliseconds or seconds (10s, 10000ms)");
+};
+export {
+  parseTimeToMs
+};

package/dist/elements/src/elements/util.js

@@ -0,0 +1,11 @@
+import { EFTimegroup } from "./EFTimegroup.js";
+const getStartTimeMs = (element) => {
+  const nearestTimeGroup = element.closest("ef-timegroup");
+  if (!(nearestTimeGroup instanceof EFTimegroup)) {
+    return 0;
+  }
+  return nearestTimeGroup.startTimeMs;
+};
+export {
+  getStartTimeMs
+};

package/dist/elements/src/gui/ContextMixin.js

@@ -0,0 +1,246 @@
+import { provide } from "@lit/context";
+import { state, property } from "lit/decorators.js";
+import { focusContext } from "./focusContext.js";
+import { focusedElementContext } from "./focusedElementContext.js";
+import { fetchContext } from "./fetchContext.js";
+import { createRef } from "lit/directives/ref.js";
+import { playingContext, loopContext } from "./playingContext.js";
+import { efContext } from "./efContext.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+function ContextMixin(superClass) {
+  class ContextElement extends superClass {
+    constructor() {
+      super(...arguments);
+      this.focusContext = this;
+      this.efContext = this;
+      this.fetch = async (url, init = {}) => {
+        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);
+      };
+      this.#URLTokens = {};
+      this.playing = false;
+      this.loop = false;
+      this.stageScale = 1;
+      this.rendering = false;
+      this.currentTimeMs = 0;
+      this.stageRef = createRef();
+      this.canvasRef = createRef();
+      this.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) {
+            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);
+        }
+      };
+      this.#playbackAudioContext = null;
+      this.#playbackAnimationFrameRequest = null;
+      this.#AUDIO_PLAYBACK_SLICE_MS = 1e3;
+    }
+    #URLTokens;
+    connectedCallback() {
+      super.connectedCallback();
+      requestAnimationFrame(this.setStageScale);
+    }
+    update(changedProperties) {
+      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;
+    #playbackAnimationFrameRequest;
+    #AUDIO_PLAYBACK_SLICE_MS;
+    #syncPlayheadToAudioContext(target, startMs) {
+      this.currentTimeMs = startMs + (this.#playbackAudioContext?.currentTime ?? 0) * 1e3;
+      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) / 1e3);
+        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();
+    }
+  }
+  __decorateClass([
+    provide({ context: focusContext })
+  ], ContextElement.prototype, "focusContext");
+  __decorateClass([
+    provide({ context: focusedElementContext }),
+    state()
+  ], ContextElement.prototype, "focusedElement");
+  __decorateClass([
+    provide({ context: efContext })
+  ], ContextElement.prototype, "efContext");
+  __decorateClass([
+    provide({ context: fetchContext })
+  ], ContextElement.prototype, "fetch");
+  __decorateClass([
+    property({ type: String })
+  ], ContextElement.prototype, "signingURL");
+  __decorateClass([
+    provide({ context: playingContext }),
+    property({ type: Boolean, reflect: true })
+  ], ContextElement.prototype, "playing");
+  __decorateClass([
+    provide({ context: loopContext }),
+    property({ type: Boolean, reflect: true })
+  ], ContextElement.prototype, "loop");
+  __decorateClass([
+    state()
+  ], ContextElement.prototype, "stageScale");
+  __decorateClass([
+    property({ type: Boolean })
+  ], ContextElement.prototype, "rendering");
+  __decorateClass([
+    state()
+  ], ContextElement.prototype, "currentTimeMs");
+  return ContextElement;
+}
+export {
+  ContextMixin
+};