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

package/dist/elements/FetchMixin.js

@@ -1,28 +1,18 @@
+import { fetchContext } from "../gui/fetchContext.js";
 import { consume } from "@lit/context";
+import _decorate from "@oxc-project/runtime/helpers/decorate";
 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;
+	class FetchElement extends superClass {
+		constructor(..._args) {
+			super(..._args);
+			this.fetch = fetch.bind(window);
+		}
+	}
+	_decorate([consume({
+		context: fetchContext,
+		subscribe: true
+	}), state()], FetchElement.prototype, "fetch", void 0);
+	return FetchElement;
 }
-export {
-  FetchMixin
-};
+export { FetchMixin };

package/dist/elements/MediaController.d.ts

@@ -0,0 +1,30 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+export declare class MediaController implements ReactiveController {
+    #private;
+    private host;
+    constructor(host: ReactiveControllerHost & {
+        src: string;
+        assetId: string | null;
+        mode: "asset" | "jit-transcode" | "auto";
+    });
+    get mode(): "asset" | "jit-transcode";
+    get src(): string | null;
+    set src(value: string | null);
+    get assetId(): string | null;
+    set assetId(value: string | null);
+    changes: Map<string, {
+        oldValue: any;
+        newValue: any;
+    }> | null;
+    updatePending: boolean;
+    trackUpdate(key: string, oldValue: any, newValue: any): void;
+    endUpdate(): void;
+    handleUpdate(changes: Map<string, {
+        oldValue: any;
+        newValue: any;
+    }>): void;
+    hostUpdated(): void;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    updated(): void;
+}

package/dist/elements/SampleBuffer.d.ts

@@ -0,0 +1,14 @@
+import { AudioSample, VideoSample } from 'mediabunny';
+export type MediaSample = VideoSample | AudioSample;
+export declare class SampleBuffer {
+    private buffer;
+    private bufferSize;
+    constructor(bufferSize?: number);
+    push(sample: MediaSample): void;
+    clear(): void;
+    peek(): MediaSample | undefined;
+    find(desiredSeekTimeMs: number): MediaSample | undefined;
+    get length(): number;
+    get firstTimestamp(): number;
+    getContents(): MediaSample[];
+}

package/dist/elements/SampleBuffer.js

@@ -0,0 +1,52 @@
+var SampleBuffer = class {
+	constructor(bufferSize = 10) {
+		this.buffer = [];
+		this.bufferSize = bufferSize;
+	}
+	push(sample) {
+		const currentBuffer = [...this.buffer];
+		currentBuffer.push(sample);
+		if (currentBuffer.length > this.bufferSize) {
+			const shifted = currentBuffer.shift();
+			if (shifted) try {
+				shifted.close();
+			} catch (_error) {}
+		}
+		this.buffer = currentBuffer;
+	}
+	clear() {
+		const toClose = this.buffer;
+		this.buffer = [];
+		for (const sample of toClose) try {
+			sample.close();
+		} catch (_error) {}
+	}
+	peek() {
+		const currentBuffer = this.buffer;
+		return currentBuffer[0];
+	}
+	find(desiredSeekTimeMs) {
+		const currentBuffer = [...this.buffer];
+		if (currentBuffer.length === 0) return void 0;
+		const roundToMicroseconds = (timeMs) => Math.round(timeMs * 1e3) / 1e3;
+		const targetTimeMs = roundToMicroseconds(desiredSeekTimeMs);
+		for (const sample of currentBuffer) {
+			const sampleStartMs = roundToMicroseconds((sample.timestamp || 0) * 1e3);
+			const sampleDurationMs = roundToMicroseconds((sample.duration || 0) * 1e3);
+			const sampleEndMs = sampleStartMs + sampleDurationMs;
+			if (targetTimeMs >= sampleStartMs && targetTimeMs < sampleEndMs) return sample;
+		}
+		return void 0;
+	}
+	get length() {
+		return this.buffer.length;
+	}
+	get firstTimestamp() {
+		const currentBuffer = this.buffer;
+		return currentBuffer[0]?.timestamp || 0;
+	}
+	getContents() {
+		return [...this.buffer];
+	}
+};
+export { SampleBuffer };

package/dist/elements/TargetController.js

@@ -1,164 +1,138 @@
 import { LitElement } from "lit";
 const EF_TARGETABLE = Symbol("EF_TARGETABLE");
-class TargetRegistry {
-  constructor() {
-    this.idMap = /* @__PURE__ */ new Map();
-    this.callbacks = /* @__PURE__ */ new Map();
-  }
-  subscribe(id, callback) {
-    this.callbacks.set(id, this.callbacks.get(id) ?? /* @__PURE__ */ new Set());
-    this.callbacks.get(id)?.add(callback);
-  }
-  unsubscribe(id, callback) {
-    if (id === null) {
-      return;
-    }
-    this.callbacks.get(id)?.delete(callback);
-    if (this.callbacks.get(id)?.size === 0) {
-      this.callbacks.delete(id);
-    }
-  }
-  get(id) {
-    return this.idMap.get(id);
-  }
-  register(id, target) {
-    this.idMap.set(id, target);
-    for (const callback of this.callbacks.get(id) ?? []) {
-      callback(target);
-    }
-  }
-  unregister(id) {
-    for (const callback of this.callbacks.get(id) ?? []) {
-      callback(void 0);
-    }
-    this.idMap.delete(id);
-    this.callbacks.delete(id);
-  }
-}
+var TargetRegistry = class {
+	constructor() {
+		this.idMap = /* @__PURE__ */ new Map();
+		this.callbacks = /* @__PURE__ */ new Map();
+	}
+	subscribe(id, callback) {
+		this.callbacks.set(id, this.callbacks.get(id) ?? /* @__PURE__ */ new Set());
+		this.callbacks.get(id)?.add(callback);
+	}
+	unsubscribe(id, callback) {
+		if (id === null) return;
+		this.callbacks.get(id)?.delete(callback);
+		if (this.callbacks.get(id)?.size === 0) this.callbacks.delete(id);
+	}
+	get(id) {
+		return this.idMap.get(id);
+	}
+	register(id, target) {
+		this.idMap.set(id, target);
+		for (const callback of this.callbacks.get(id) ?? []) callback(target);
+	}
+	unregister(id) {
+		for (const callback of this.callbacks.get(id) ?? []) callback(void 0);
+		this.idMap.delete(id);
+		this.callbacks.delete(id);
+	}
+};
 const documentRegistries = /* @__PURE__ */ new WeakMap();
 const getRegistry = (root) => {
-  let registry = documentRegistries.get(root);
-  if (!registry) {
-    registry = new TargetRegistry();
-    documentRegistries.set(root, registry);
-  }
-  return registry;
+	let registry = documentRegistries.get(root);
+	if (!registry) {
+		registry = new TargetRegistry();
+		documentRegistries.set(root, registry);
+	}
+	return registry;
 };
 const EFTargetable = (superClass) => {
-  class TargetableElement extends superClass {
-    #registry = null;
-    static get observedAttributes() {
-      const parentAttributes = superClass.observedAttributes || [];
-      return [.../* @__PURE__ */ new Set([...parentAttributes, "id"])];
-    }
-    updateRegistry(oldValue, newValue) {
-      if (!this.#registry) return;
-      if (oldValue === newValue) return;
-      if (oldValue) {
-        this.#registry.unregister(oldValue);
-      }
-      if (newValue) {
-        this.#registry.register(newValue, this);
-      }
-    }
-    connectedCallback() {
-      super.connectedCallback();
-      this.#registry = getRegistry(this.getRootNode());
-      const initialId = this.getAttribute("id");
-      if (initialId) {
-        this.updateRegistry("", initialId);
-      }
-    }
-    attributeChangedCallback(name, old, value) {
-      super.attributeChangedCallback(name, old, value);
-      if (name === "id") {
-        this.updateRegistry(old ?? "", value ?? "");
-      }
-    }
-    disconnectedCallback() {
-      if (this.#registry) {
-        this.updateRegistry(this.id, "");
-        this.#registry = null;
-      }
-      super.disconnectedCallback();
-    }
-  }
-  Object.defineProperty(TargetableElement.prototype, EF_TARGETABLE, {
-    value: true
-  });
-  return TargetableElement;
+	class TargetableElement extends superClass {
+		#registry = null;
+		static get observedAttributes() {
+			const parentAttributes = superClass.observedAttributes || [];
+			return [...new Set([...parentAttributes, "id"])];
+		}
+		updateRegistry(oldValue, newValue) {
+			if (!this.#registry) return;
+			if (oldValue === newValue) return;
+			if (oldValue) this.#registry.unregister(oldValue);
+			if (newValue) this.#registry.register(newValue, this);
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			this.#registry = getRegistry(this.getRootNode());
+			const initialId = this.getAttribute("id");
+			if (initialId) this.updateRegistry("", initialId);
+		}
+		attributeChangedCallback(name, old, value) {
+			super.attributeChangedCallback(name, old, value);
+			if (name === "id") this.updateRegistry(old ?? "", value ?? "");
+		}
+		disconnectedCallback() {
+			if (this.#registry) {
+				this.updateRegistry(this.id, "");
+				this.#registry = null;
+			}
+			super.disconnectedCallback();
+		}
+	}
+	Object.defineProperty(TargetableElement.prototype, EF_TARGETABLE, { value: true });
+	return TargetableElement;
+};
+var TargetUpdateController = class {
+	constructor(host) {
+		this.host = host;
+	}
+	hostConnected() {
+		this.host.requestUpdate();
+	}
+	hostDisconnected() {
+		this.host.requestUpdate();
+	}
+	hostUpdate() {
+		this.host.requestUpdate();
+	}
 };
-class TargetUpdateController {
-  constructor(host) {
-    this.host = host;
-  }
-  hostConnected() {
-    this.host.requestUpdate();
-  }
-  hostDisconnected() {
-    this.host.requestUpdate();
-  }
-  hostUpdate() {
-    this.host.requestUpdate();
-  }
-}
-class TargetController {
-  constructor(host) {
-    this.targetController = null;
-    this.currentTargetString = null;
-    this.registryCallback = (target) => {
-      this.host.targetElement = target ?? null;
-    };
-    this.host = host;
-    this.host.addController(this);
-    this.currentTargetString = this.host.target;
-    if (this.currentTargetString) {
-      this.registry.subscribe(this.currentTargetString, this.registryCallback);
-    }
-  }
-  updateTarget() {
-    const newTarget = this.registry.get(this.host.target);
-    if (this.host.targetElement !== newTarget) {
-      this.disconnectFromTarget();
-      this.host.targetElement = newTarget ?? null;
-      this.connectToTarget();
-    }
-  }
-  connectToTarget() {
-    if (this.host.targetElement instanceof LitElement) {
-      this.targetController = new TargetUpdateController(this.host);
-      this.host.targetElement.addController(this.targetController);
-    }
-  }
-  disconnectFromTarget() {
-    if (this.host.targetElement instanceof LitElement && this.targetController) {
-      this.host.targetElement.removeController(this.targetController);
-      this.targetController = null;
-    }
-  }
-  get registry() {
-    const root = this.host.getRootNode();
-    return getRegistry(root);
-  }
-  hostDisconnected() {
-    this.disconnectFromTarget();
-  }
-  hostConnected() {
-    this.updateTarget();
-  }
-  hostUpdate() {
-    if (this.currentTargetString !== this.host.target) {
-      this.registry.unsubscribe(
-        this.currentTargetString,
-        this.registryCallback
-      );
-      this.registry.subscribe(this.host.target, this.registryCallback);
-      this.updateTarget();
-      this.currentTargetString = this.host.target;
-    }
-  }
-}
-export {
-  EFTargetable,
-  TargetController
+var TargetController = class {
+	constructor(host) {
+		this.targetController = null;
+		this.currentTargetString = null;
+		this.registryCallback = (target) => {
+			this.host.targetElement = target ?? null;
+		};
+		this.host = host;
+		this.host.addController(this);
+		this.currentTargetString = this.host.target;
+		if (this.currentTargetString) this.registry.subscribe(this.currentTargetString, this.registryCallback);
+	}
+	updateTarget() {
+		const newTarget = this.registry.get(this.host.target);
+		if (this.host.targetElement !== newTarget) {
+			this.disconnectFromTarget();
+			this.host.targetElement = newTarget ?? null;
+			this.connectToTarget();
+		}
+	}
+	connectToTarget() {
+		if (this.host.targetElement instanceof LitElement) {
+			this.targetController = new TargetUpdateController(this.host);
+			this.host.targetElement.addController(this.targetController);
+		}
+	}
+	disconnectFromTarget() {
+		if (this.host.targetElement instanceof LitElement && this.targetController) {
+			this.host.targetElement.removeController(this.targetController);
+			this.targetController = null;
+		}
+	}
+	get registry() {
+		const root = this.host.getRootNode();
+		return getRegistry(root);
+	}
+	hostDisconnected() {
+		this.disconnectFromTarget();
+	}
+	hostConnected() {
+		this.updateTarget();
+	}
+	hostUpdate() {
+		if (this.currentTargetString !== this.host.target) {
+			this.registry.unsubscribe(this.currentTargetString, this.registryCallback);
+			this.registry.subscribe(this.host.target, this.registryCallback);
+			this.updateTarget();
+			this.currentTargetString = this.host.target;
+		}
+	}
 };
+export { EFTargetable, TargetController };

package/dist/elements/TimegroupController.js

@@ -1,20 +1,18 @@
-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
+var TimegroupController = class {
+	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/durationConverter.js

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

package/dist/elements/parseTimeToMs.js

@@ -1,12 +1,6 @@
 const 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
+	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/printTaskStatus.d.ts

@@ -0,0 +1,2 @@
+import { TaskStatus } from '@lit/task';
+export declare const printTaskStatus: (status: TaskStatus) => "INITIAL" | "ERROR" | "PENDING" | "COMPLETE" | "UNKNOWN";

package/dist/elements/updateAnimations.js

@@ -1,62 +1,42 @@
 import { isEFTemporal } from "./EFTemporal.js";
 const updateAnimations = (element) => {
-  element.style.setProperty(
-    "--ef-progress",
-    `${Math.max(0, Math.min(1, element.currentTimeMs / element.durationMs)) * 100}%`
-  );
-  const timelineTimeMs = (element.rootTimegroup ?? element).currentTimeMs;
-  if (element.startTimeMs > timelineTimeMs || element.endTimeMs < timelineTimeMs) {
-    element.style.display = "none";
-    return;
-  }
-  element.style.display = "";
-  const animations = element.getAnimations({ subtree: true });
-  element.style.setProperty("--ef-duration", `${element.durationMs}ms`);
-  element.style.setProperty(
-    "--ef-transition-duration",
-    `${element.parentTimegroup?.overlapMs ?? 0}ms`
-  );
-  element.style.setProperty(
-    "--ef-transition-out-start",
-    `${element.durationMs - (element.parentTimegroup?.overlapMs ?? 0)}ms`
-  );
-  for (const animation of animations) {
-    if (animation.playState === "running") {
-      animation.pause();
-    }
-    const effect = animation.effect;
-    if (!(effect && effect instanceof KeyframeEffect)) {
-      continue;
-    }
-    const target = effect.target;
-    if (!target) {
-      continue;
-    }
-    if (target.closest("ef-timegroup") !== element) {
-      continue;
-    }
-    const timing = effect.getTiming();
-    const duration = Number(timing.duration) ?? 0;
-    const delay = Number(timing.delay) ?? 0;
-    const iterations = Number(timing.iterations) ?? 1;
-    const timeTarget = isEFTemporal(target) ? target : target.closest("ef-timegroup");
-    if (!timeTarget) {
-      continue;
-    }
-    const currentTime = timeTarget.ownCurrentTimeMs;
-    if (currentTime < delay) {
-      animation.currentTime = 0;
-      continue;
-    }
-    const currentIteration = Math.floor((currentTime - delay) / duration);
-    const currentIterationTime = (currentTime - delay) % duration;
-    if (currentIteration >= iterations) {
-      animation.currentTime = duration - 0.01;
-      continue;
-    }
-    animation.currentTime = Math.min(currentIterationTime, duration - 0.01) + delay;
-  }
-};
-export {
-  updateAnimations
+	element.style.setProperty("--ef-progress", `${Math.max(0, Math.min(1, element.currentTimeMs / element.durationMs)) * 100}%`);
+	const timelineTimeMs = (element.rootTimegroup ?? element).currentTimeMs;
+	if (element.startTimeMs > timelineTimeMs || element.endTimeMs < timelineTimeMs) {
+		element.style.display = "none";
+		return;
+	}
+	element.style.display = "";
+	if (typeof element.getAnimations !== "function") return;
+	const animations = element.getAnimations({ subtree: true });
+	element.style.setProperty("--ef-duration", `${element.durationMs}ms`);
+	element.style.setProperty("--ef-transition-duration", `${element.parentTimegroup?.overlapMs ?? 0}ms`);
+	element.style.setProperty("--ef-transition-out-start", `${element.durationMs - (element.parentTimegroup?.overlapMs ?? 0)}ms`);
+	for (const animation of animations) {
+		if (animation.playState === "running") animation.pause();
+		const effect = animation.effect;
+		if (!(effect && effect instanceof KeyframeEffect)) continue;
+		const target = effect.target;
+		if (!target) continue;
+		if (target.closest("ef-timegroup") !== element) continue;
+		const timing = effect.getTiming();
+		const duration = Number(timing.duration) ?? 0;
+		const delay = Number(timing.delay) ?? 0;
+		const iterations = Number(timing.iterations) ?? 1;
+		const timeTarget = isEFTemporal(target) ? target : target.closest("ef-timegroup");
+		if (!timeTarget) continue;
+		const currentTime = timeTarget.ownCurrentTimeMs;
+		if (currentTime < delay) {
+			animation.currentTime = 0;
+			continue;
+		}
+		const currentIteration = Math.floor((currentTime - delay) / duration);
+		const currentIterationTime = (currentTime - delay) % duration;
+		if (currentIteration >= iterations) {
+			animation.currentTime = duration - .01;
+			continue;
+		}
+		animation.currentTime = Math.min(currentIterationTime, duration - .01) + delay;
+	}
 };
+export { updateAnimations };

package/dist/getRenderInfo.d.ts

@@ -18,20 +18,20 @@ export declare const RenderInfo: z.ZodObject<{
         efImage: string[];
     }>;
 }, "strip", z.ZodTypeAny, {
+    fps: number;
     width: number;
     height: number;
     durationMs: number;
-    fps: number;
     assets: {
         efMedia: Record<string, any>;
         efCaptions: string[];
         efImage: string[];
     };
 }, {
+    fps: number;
     width: number;
     height: number;
     durationMs: number;
-    fps: number;
     assets: {
         efMedia: Record<string, any>;
         efCaptions: string[];