@editframe/elements 0.16.8-beta.0 → 0.18.3-beta.0

package/dist/getRenderInfo.js

@@ -1,72 +1,64 @@
 import { z } from "zod";
 const RenderInfo = z.object({
-  width: z.number().positive(),
-  height: z.number().positive(),
-  fps: z.number().positive(),
-  durationMs: z.number().positive(),
-  assets: z.object({
-    efMedia: z.record(z.any()),
-    efCaptions: z.array(z.string()),
-    efImage: z.array(z.string())
-  })
+	width: z.number().positive(),
+	height: z.number().positive(),
+	fps: z.number().positive(),
+	durationMs: z.number().positive(),
+	assets: z.object({
+		efMedia: z.record(z.any()),
+		efCaptions: z.array(z.string()),
+		efImage: z.array(z.string())
+	})
 });
 const getRenderInfo = async () => {
-  const rootTimeGroup = document.querySelector("ef-timegroup");
-  if (!rootTimeGroup) {
-    throw new Error("No ef-timegroup found");
-  }
-  console.error("Waiting for media durations", rootTimeGroup);
-  await rootTimeGroup.waitForMediaDurations();
-  const width = rootTimeGroup.clientWidth;
-  const height = rootTimeGroup.clientHeight;
-  const fps = 30;
-  const durationMs = Math.round(rootTimeGroup.durationMs);
-  const elements = document.querySelectorAll(
-    "ef-audio, ef-video, ef-image, ef-captions"
-  );
-  const assets = {
-    efMedia: {},
-    efCaptions: /* @__PURE__ */ new Set(),
-    efImage: /* @__PURE__ */ new Set()
-  };
-  for (const element of elements) {
-    switch (element.tagName) {
-      case "EF-AUDIO":
-      case "EF-VIDEO": {
-        const src = element.src;
-        console.error("Processing element", element.tagName, src);
-        assets.efMedia[src] = element.trackFragmentIndexLoader.value;
-        break;
-      }
-      case "EF-IMAGE": {
-        const src = element.src;
-        console.error("Processing element", element.tagName, src);
-        assets.efImage.add(src);
-        break;
-      }
-      case "EF-CAPTIONS": {
-        const src = element.targetElement?.src;
-        console.error("Processing element", element.tagName, src);
-        assets.efCaptions.add(src);
-        break;
-      }
-    }
-  }
-  const renderInfo = {
-    width,
-    height,
-    fps,
-    durationMs,
-    assets: {
-      efMedia: assets.efMedia,
-      efCaptions: Array.from(assets.efCaptions),
-      efImage: Array.from(assets.efImage)
-    }
-  };
-  console.error("Render info", renderInfo);
-  return renderInfo;
-};
-export {
-  RenderInfo,
-  getRenderInfo
+	const rootTimeGroup = document.querySelector("ef-timegroup");
+	if (!rootTimeGroup) throw new Error("No ef-timegroup found");
+	console.error("Waiting for media durations", rootTimeGroup);
+	await rootTimeGroup.waitForMediaDurations();
+	const width = rootTimeGroup.clientWidth;
+	const height = rootTimeGroup.clientHeight;
+	const fps = 30;
+	const durationMs = Math.round(rootTimeGroup.durationMs);
+	const elements = document.querySelectorAll("ef-audio, ef-video, ef-image, ef-captions");
+	const assets = {
+		efMedia: {},
+		efCaptions: /* @__PURE__ */ new Set(),
+		efImage: /* @__PURE__ */ new Set()
+	};
+	for (const element of elements) switch (element.tagName) {
+		case "EF-AUDIO":
+		case "EF-VIDEO": {
+			const src = element.src;
+			console.error("Processing element", element.tagName, src);
+			const mediaEngine = element.mediaEngineTask.value;
+			if (mediaEngine && "data" in mediaEngine) assets.efMedia[src] = mediaEngine.data;
+			break;
+		}
+		case "EF-IMAGE": {
+			const src = element.src;
+			console.error("Processing element", element.tagName, src);
+			assets.efImage.add(src);
+			break;
+		}
+		case "EF-CAPTIONS": {
+			const src = element.targetElement?.src;
+			console.error("Processing element", element.tagName, src);
+			assets.efCaptions.add(src);
+			break;
+		}
+	}
+	const renderInfo = {
+		width,
+		height,
+		fps,
+		durationMs,
+		assets: {
+			efMedia: assets.efMedia,
+			efCaptions: Array.from(assets.efCaptions),
+			efImage: Array.from(assets.efImage)
+		}
+	};
+	console.error("Render info", renderInfo);
+	return renderInfo;
 };
+export { RenderInfo, getRenderInfo };

package/dist/gui/ContextMixin.js

@@ -1,298 +1,160 @@
-import { createContext, consume, provide } from "@lit/context";
-import { state, property } from "lit/decorators.js";
 import { efConfigurationContext } from "./EFConfiguration.js";
 import { efContext } from "./efContext.js";
 import { fetchContext } from "./fetchContext.js";
 import { focusContext } from "./focusContext.js";
 import { focusedElementContext } from "./focusedElementContext.js";
-import { playingContext, loopContext } from "./playingContext.js";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-const targetTimegroupContext = createContext(
-  "target-timegroup"
-);
+import { loopContext, playingContext } from "./playingContext.js";
+import { ElementConnectionManager } from "./services/ElementConnectionManager.js";
+import { PlaybackController } from "./services/PlaybackController.js";
+import { consume, createContext, provide } from "@lit/context";
+import { property, state } from "lit/decorators.js";
+import _decorate from "@oxc-project/runtime/helpers/decorate";
+const targetTimegroupContext = createContext("target-timegroup");
 const contextMixinSymbol = Symbol("contextMixin");
 function isContextMixin(value) {
-  return typeof value === "object" && value !== null && contextMixinSymbol in value.constructor;
+	return typeof value === "object" && value !== null && contextMixinSymbol in value.constructor;
 }
 function ContextMixin(superClass) {
-  var _a, _b;
-  class ContextElement extends (_b = superClass, _a = contextMixinSymbol, _b) {
-    constructor() {
-      super(...arguments);
-      this.efConfiguration = null;
-      this.focusContext = this;
-      this.efContext = this;
-      this.targetTimegroup = null;
-      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}`
-          });
-        } else {
-          init.credentials = "include";
-        }
-        return fetch(url, init);
-      };
-      this.#URLTokens = {};
-      this.playing = false;
-      this.loop = false;
-      this.rendering = false;
-      this.currentTimeMs = 0;
-      this.#FPS = 30;
-      this.#MS_PER_FRAME = 1e3 / this.#FPS;
-      this.#timegroupObserver = new MutationObserver((mutations) => {
-        for (const mutation of mutations) {
-          if (mutation.type === "childList") {
-            const newTimegroup = this.querySelector("ef-timegroup");
-            if (newTimegroup !== this.targetTimegroup) {
-              this.targetTimegroup = newTimegroup;
-            }
-          }
-        }
-      });
-      this.#playbackAudioContext = null;
-      this.#playbackAnimationFrameRequest = null;
-      this.#AUDIO_PLAYBACK_SLICE_MS = 1e3;
-    }
-    static {
-      this[_a] = true;
-    }
-    #apiHost;
-    get apiHost() {
-      return this.#apiHost ?? this.efConfiguration?.apiHost ?? "";
-    }
-    set apiHost(value) {
-      this.#apiHost = value;
-    }
-    #URLTokens;
-    #signingURL;
-    get signingURL() {
-      return this.#signingURL ?? this.efConfiguration?.signingURL ?? "";
-    }
-    set signingURL(value) {
-      this.#signingURL = value;
-    }
-    #FPS;
-    #MS_PER_FRAME;
-    #timegroupObserver;
-    connectedCallback() {
-      super.connectedCallback();
-      this.targetTimegroup = this.querySelector("ef-timegroup");
-      this.#timegroupObserver.observe(this, {
-        childList: true,
-        subtree: true,
-        attributes: true
-      });
-      if (this.playing) {
-        this.startPlayback();
-      }
-    }
-    disconnectedCallback() {
-      super.disconnectedCallback();
-      this.#timegroupObserver.disconnect();
-      this.stopPlayback();
-    }
-    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;
-          if (this.isConnected) {
-            this.dispatchEvent(
-              new CustomEvent("timeupdate", {
-                detail: {
-                  currentTimeMs: this.currentTimeMs,
-                  progress: this.currentTimeMs / this.targetTimegroup.durationMs
-                }
-              })
-            );
-          }
-        }
-      }
-      super.update(changedProperties);
-    }
-    play() {
-      this.playing = true;
-    }
-    pause() {
-      this.playing = false;
-    }
-    #playbackAudioContext;
-    #playbackAnimationFrameRequest;
-    #AUDIO_PLAYBACK_SLICE_MS;
-    #syncPlayheadToAudioContext(target, startMs) {
-      const rawTimeMs = startMs + (this.#playbackAudioContext?.currentTime ?? 0) * 1e3;
-      const nextTimeMs = Math.round(rawTimeMs / this.#MS_PER_FRAME) * this.#MS_PER_FRAME;
-      if (nextTimeMs !== this.currentTimeMs) {
-        this.currentTimeMs = nextTimeMs;
-      }
-      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;
-      }
-      await timegroup.waitForMediaDurations();
-      let currentMs = timegroup.currentTimeMs;
-      const fromMs = currentMs;
-      const toMs = timegroup.endTimeMs;
-      if (fromMs >= toMs) {
-        this.pause();
-        return;
-      }
-      let bufferCount = 0;
-      this.#playbackAudioContext = new AudioContext({
-        latencyHint: "playback"
-      });
-      if (this.#playbackAnimationFrameRequest) {
-        cancelAnimationFrame(this.#playbackAnimationFrameRequest);
-      }
-      this.#syncPlayheadToAudioContext(timegroup, currentMs);
-      const playbackContext = this.#playbackAudioContext;
-      if (playbackContext.state === "suspended") {
-        console.warn(
-          "AudioContext is suspended, media playback will not work until user has interacted with page."
-        );
-        this.playing = false;
-        return;
-      }
-      await playbackContext.suspend();
-      const fillBuffer = async () => {
-        if (bufferCount > 1) {
-          return;
-        }
-        const canFillBuffer = await queueBufferSource();
-        if (canFillBuffer) {
-          fillBuffer();
-        }
-      };
-      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([
-    consume({ context: efConfigurationContext, subscribe: true })
-  ], ContextElement.prototype, "efConfiguration", 2);
-  __decorateClass([
-    provide({ context: focusContext })
-  ], ContextElement.prototype, "focusContext", 2);
-  __decorateClass([
-    provide({ context: focusedElementContext }),
-    state()
-  ], ContextElement.prototype, "focusedElement", 2);
-  __decorateClass([
-    property({ type: String, attribute: "api-host" })
-  ], ContextElement.prototype, "apiHost", 1);
-  __decorateClass([
-    provide({ context: efContext })
-  ], ContextElement.prototype, "efContext", 2);
-  __decorateClass([
-    provide({ context: targetTimegroupContext }),
-    state()
-  ], ContextElement.prototype, "targetTimegroup", 2);
-  __decorateClass([
-    provide({ context: fetchContext })
-  ], ContextElement.prototype, "fetch", 2);
-  __decorateClass([
-    property({ type: String, attribute: "signing-url" })
-  ], ContextElement.prototype, "signingURL", 1);
-  __decorateClass([
-    provide({ context: playingContext }),
-    property({ type: Boolean, reflect: true })
-  ], ContextElement.prototype, "playing", 2);
-  __decorateClass([
-    provide({ context: loopContext }),
-    property({ type: Boolean, reflect: true })
-  ], ContextElement.prototype, "loop", 2);
-  __decorateClass([
-    property({ type: Boolean })
-  ], ContextElement.prototype, "rendering", 2);
-  __decorateClass([
-    state()
-  ], ContextElement.prototype, "currentTimeMs", 2);
-  return ContextElement;
+	class ContextElement extends superClass {
+		constructor(..._args) {
+			super(..._args);
+			this.efConfiguration = null;
+			this.focusContext = this;
+			this.efContext = this;
+			this.targetTimegroup = null;
+			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}` });
+				} else init.credentials = "include";
+				return fetch(url, init);
+			};
+			this.playing = false;
+			this.loop = false;
+			this.rendering = false;
+			this.currentTimeMs = 0;
+			this._elementConnectionManager = new ElementConnectionManager(3e3);
+			this.playbackController = new PlaybackController({
+				fps: 30,
+				onTimeUpdate: (timeMs) => {
+					this.currentTimeMs = timeMs;
+				},
+				onPlayStateChange: (playing) => {
+					this.playing = playing;
+				},
+				onError: (error) => {
+					console.error("🎵 [PLAYBACK_ERROR]:", error);
+				}
+			});
+		}
+		static {
+			this[contextMixinSymbol] = true;
+		}
+		#apiHost;
+		get apiHost() {
+			return this.#apiHost ?? this.efConfiguration?.apiHost ?? "";
+		}
+		set apiHost(value) {
+			this.#apiHost = value;
+		}
+		#URLTokens = {};
+		#signingURL;
+		/**
+		* 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.
+		*/
+		get signingURL() {
+			return this.#signingURL ?? this.efConfiguration?.signingURL ?? "";
+		}
+		set signingURL(value) {
+			this.#signingURL = value;
+		}
+		#timegroupObserver = new MutationObserver((mutations) => {
+			for (const mutation of mutations) if (mutation.type === "childList") {
+				const newTimegroup = this.querySelector("ef-timegroup");
+				if (newTimegroup !== this.targetTimegroup) this.targetTimegroup = newTimegroup;
+			}
+		});
+		connectedCallback() {
+			super.connectedCallback();
+			this.targetTimegroup = this.querySelector("ef-timegroup");
+			this.#timegroupObserver.observe(this, {
+				childList: true,
+				subtree: true,
+				attributes: true
+			});
+			if (this.playing) this.startPlayback();
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback();
+			this.#timegroupObserver.disconnect();
+			this.stopPlayback();
+		}
+		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;
+					if (this.isConnected) this.dispatchEvent(new CustomEvent("timeupdate", { detail: {
+						currentTimeMs: this.currentTimeMs,
+						progress: this.currentTimeMs / this.targetTimegroup.durationMs
+					} }));
+				}
+			}
+			super.update(changedProperties);
+		}
+		play() {
+			this.playing = true;
+		}
+		pause() {
+			this.playing = false;
+		}
+		async stopPlayback() {
+			await this.playbackController.stopPlayback();
+		}
+		async startPlayback() {
+			const timegroup = this.targetTimegroup;
+			if (!timegroup) return;
+			await this.playbackController.startPlayback(timegroup, timegroup.currentTimeMs);
+		}
+	}
+	_decorate([consume({
+		context: efConfigurationContext,
+		subscribe: true
+	})], ContextElement.prototype, "efConfiguration", void 0);
+	_decorate([provide({ context: focusContext })], ContextElement.prototype, "focusContext", void 0);
+	_decorate([provide({ context: focusedElementContext }), state()], ContextElement.prototype, "focusedElement", void 0);
+	_decorate([property({
+		type: String,
+		attribute: "api-host"
+	})], ContextElement.prototype, "apiHost", null);
+	_decorate([provide({ context: efContext })], ContextElement.prototype, "efContext", void 0);
+	_decorate([provide({ context: targetTimegroupContext }), state()], ContextElement.prototype, "targetTimegroup", void 0);
+	_decorate([provide({ context: fetchContext })], ContextElement.prototype, "fetch", void 0);
+	_decorate([property({
+		type: String,
+		attribute: "signing-url"
+	})], ContextElement.prototype, "signingURL", null);
+	_decorate([provide({ context: playingContext }), property({
+		type: Boolean,
+		reflect: true
+	})], ContextElement.prototype, "playing", void 0);
+	_decorate([provide({ context: loopContext }), property({
+		type: Boolean,
+		reflect: true
+	})], ContextElement.prototype, "loop", void 0);
+	_decorate([property({ type: Boolean })], ContextElement.prototype, "rendering", void 0);
+	_decorate([state()], ContextElement.prototype, "currentTimeMs", void 0);
+	return ContextElement;
 }
-export {
-  ContextMixin,
-  isContextMixin,
-  targetTimegroupContext
-};
+export { ContextMixin, isContextMixin, targetTimegroupContext };

package/dist/gui/EFConfiguration.js

@@ -1,48 +1,32 @@
 import { createContext, provide } from "@lit/context";
-import { css, LitElement, html } from "lit";
-import { property, customElement } from "lit/decorators.js";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-const efConfigurationContext = createContext(
-  Symbol("efConfigurationContext")
-);
-let EFConfiguration = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.efConfiguration = this;
-  }
-  render() {
-    return html`<slot></slot>`;
-  }
-};
-EFConfiguration.styles = [
-  css`
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import _decorate from "@oxc-project/runtime/helpers/decorate";
+const efConfigurationContext = createContext(Symbol("efConfigurationContext"));
+let EFConfiguration = class EFConfiguration$1 extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.efConfiguration = this;
+	}
+	static {
+		this.styles = [css`
       :host {
         display: contents;
       }
-    `
-];
-__decorateClass([
-  provide({ context: efConfigurationContext })
-], EFConfiguration.prototype, "efConfiguration", 2);
-__decorateClass([
-  property({ type: String, attribute: "api-host" })
-], EFConfiguration.prototype, "apiHost", 2);
-__decorateClass([
-  property({ type: String, attribute: "signing-url" })
-], EFConfiguration.prototype, "signingURL", 2);
-EFConfiguration = __decorateClass([
-  customElement("ef-configuration")
-], EFConfiguration);
-export {
-  EFConfiguration,
-  efConfigurationContext
+    `];
+	}
+	render() {
+		return html`<slot></slot>`;
+	}
 };
+_decorate([provide({ context: efConfigurationContext })], EFConfiguration.prototype, "efConfiguration", void 0);
+_decorate([property({
+	type: String,
+	attribute: "api-host"
+})], EFConfiguration.prototype, "apiHost", void 0);
+_decorate([property({
+	type: String,
+	attribute: "signing-url"
+})], EFConfiguration.prototype, "signingURL", void 0);
+EFConfiguration = _decorate([customElement("ef-configuration")], EFConfiguration);
+export { EFConfiguration, efConfigurationContext };