@editframe/elements 0.16.7-beta.0 → 0.17.6-beta.0

package/dist/elements/EFTimegroup.js

@@ -1,305 +1,44 @@
-import { provide } from "@lit/context";
-import { Task } from "@lit/task";
-import debug from "debug";
-import { LitElement, html, css } from "lit";
-import { property, customElement } from "lit/decorators.js";
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 import { isContextMixin } from "../gui/ContextMixin.js";
-import { deepGetMediaElements } from "./EFMedia.js";
-import { EFTemporal, shallowGetTemporalElements, timegroupContext } from "./EFTemporal.js";
-import { TimegroupController } from "./TimegroupController.js";
 import { durationConverter } from "./durationConverter.js";
+import { EFTemporal, deepGetElementsWithFrameTasks, flushStartTimeMsCache, shallowGetTemporalElements, timegroupContext } from "./EFTemporal.js";
 import { updateAnimations } from "./updateAnimations.js";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-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;
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _currentTime, _resizeObserver, _EFTimegroup_instances, addAudioToContext_fn;
+import { deepGetMediaElements } from "./EFMedia.js";
+import { TimegroupController } from "./TimegroupController.js";
+import { provide } from "@lit/context";
+import { Task, TaskStatus } from "@lit/task";
+import debug from "debug";
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import _decorate from "@oxc-project/runtime/helpers/decorate";
+var _EFTimegroup;
 const log = debug("ef:elements:EFTimegroup");
 const shallowGetTimegroups = (element, groups = []) => {
-  for (const child of Array.from(element.children)) {
-    if (child instanceof EFTimegroup) {
-      groups.push(child);
-    } else {
-      shallowGetTimegroups(child, groups);
-    }
-  }
-  return groups;
-};
-let EFTimegroup = class extends EFTemporal(LitElement) {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _EFTimegroup_instances);
-    this._timeGroupContext = this;
-    __privateAdd(this, _currentTime, 0);
-    this.mode = "contain";
-    this.overlapMs = 0;
-    this.fit = "none";
-    __privateAdd(this, _resizeObserver);
-    this.frameTask = new Task(this, {
-      autoRun: EF_INTERACTIVE,
-      args: () => [this.ownCurrentTimeMs, this.currentTimeMs],
-      task: async ([], { signal: _signal }) => {
-        let fullyUpdated = await this.updateComplete;
-        while (!fullyUpdated) {
-          fullyUpdated = await this.updateComplete;
-        }
-      }
-    });
-  }
-  set currentTime(time) {
-    __privateSet(this, _currentTime, Math.max(0, Math.min(time, this.durationMs / 1e3)));
-    try {
-      if (this.id) {
-        if (this.isConnected) {
-          localStorage.setItem(this.storageKey, time.toString());
-        }
-      }
-    } catch (error) {
-      log("Failed to save time to localStorage", error);
-    }
-  }
-  get currentTime() {
-    return __privateGet(this, _currentTime);
-  }
-  get currentTimeMs() {
-    return this.currentTime * 1e3;
-  }
-  set currentTimeMs(ms) {
-    this.currentTime = ms / 1e3;
-  }
-  render() {
-    return html`<slot></slot> `;
-  }
-  maybeLoadTimeFromLocalStorage() {
-    if (this.id) {
-      try {
-        return Number.parseFloat(localStorage.getItem(this.storageKey) || "0");
-      } catch (error) {
-        log("Failed to load time from localStorage", error);
-      }
-    }
-    return 0;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    if (this.id) {
-      this.waitForMediaDurations().then(() => {
-        __privateSet(this, _currentTime, this.maybeLoadTimeFromLocalStorage());
-      });
-    }
-    if (this.parentTimegroup) {
-      new TimegroupController(this.parentTimegroup, this);
-    }
-    if (this.shouldWrapWithWorkbench()) {
-      this.wrapWithWorkbench();
-    }
-    requestAnimationFrame(() => {
-      this.updateAnimations();
-    });
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    __privateGet(this, _resizeObserver)?.disconnect();
-  }
-  get storageKey() {
-    if (!this.id) {
-      throw new Error("Timegroup must have an id to use localStorage.");
-    }
-    return `ef-timegroup-${this.id}`;
-  }
-  get intrinsicDurationMs() {
-    if (this.hasExplicitDuration) {
-      return this.explicitDurationMs;
-    }
-    return void 0;
-  }
-  get hasOwnDuration() {
-    return this.mode === "contain" || this.mode === "sequence" || this.mode === "fixed" && this.hasExplicitDuration;
-  }
-  get durationMs() {
-    switch (this.mode) {
-      case "fit": {
-        if (!this.parentTimegroup) {
-          return 0;
-        }
-        return this.parentTimegroup.durationMs;
-      }
-      case "fixed":
-        return super.durationMs;
-      case "sequence": {
-        let duration = 0;
-        this.childTemporals.forEach((child, index) => {
-          if (child instanceof EFTimegroup && child.mode === "fit") {
-            return;
-          }
-          if (index > 0) {
-            duration -= this.overlapMs;
-          }
-          duration += child.durationMs;
-        });
-        return duration;
-      }
-      case "contain": {
-        let maxDuration = 0;
-        for (const child of this.childTemporals) {
-          if (child instanceof EFTimegroup && child.mode === "fit") {
-            continue;
-          }
-          if (!child.hasOwnDuration) {
-            continue;
-          }
-          maxDuration = Math.max(maxDuration, child.durationMs);
-        }
-        return maxDuration;
-      }
-      default:
-        throw new Error(`Invalid time mode: ${this.mode}`);
-    }
-  }
-  /**
-   * Wait for all media elements to load their initial segments.
-   * Ideally we would only need the extracted index json data, but
-   * that caused issues with constructing audio data. We had negative durations
-   * in calculations and it was not clear why.
-   */
-  async waitForMediaDurations() {
-    const mediaElements = deepGetMediaElements(this);
-    return await Promise.all(
-      mediaElements.map((m) => m.trackFragmentIndexLoader.taskComplete)
-    );
-  }
-  get childTemporals() {
-    return shallowGetTemporalElements(this);
-  }
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    if (changedProperties.has("currentTime") || changedProperties.has("ownCurrentTimeMs")) {
-      this.updateAnimations();
-    }
-  }
-  updateAnimations() {
-    updateAnimations(this);
-  }
-  get contextProvider() {
-    let parent = this.parentNode;
-    while (parent) {
-      if (isContextMixin(parent)) {
-        return parent;
-      }
-      parent = parent.parentNode;
-    }
-    return null;
-  }
-  /**
-   * Returns true if the timegroup should be wrapped with a workbench.
-   *
-   * A timegroup should be wrapped with a workbench if it is the root-most timegroup
-   * and EF_INTERACTIVE is true.
-   *
-   * If the timegroup is already wrappedin a context provider like ef-preview,
-   * it should NOT be wrapped in a workbench.
-   */
-  shouldWrapWithWorkbench() {
-    return EF_INTERACTIVE && this.closest("ef-timegroup") === this && this.closest("ef-preview") === null && this.closest("ef-workbench") === null && this.closest("test-context") === null;
-  }
-  wrapWithWorkbench() {
-    const workbench = document.createElement("ef-workbench");
-    this.parentElement?.append(workbench);
-    if (!this.hasAttribute("id")) {
-      this.setAttribute("id", "root-this");
-    }
-    this.setAttribute("slot", "canvas");
-    workbench.append(this);
-    const filmstrip = document.createElement("ef-filmstrip");
-    filmstrip.setAttribute("slot", "timeline");
-    filmstrip.setAttribute("target", this.id);
-    workbench.append(filmstrip);
-  }
-  get efElements() {
-    return Array.from(
-      this.querySelectorAll(
-        "ef-audio, ef-video, ef-image, ef-captions, ef-waveform"
-      )
-    );
-  }
-  async renderAudio(fromMs, toMs) {
-    const durationMs = toMs - fromMs;
-    const audioContext = new OfflineAudioContext(
-      2,
-      Math.round(48e3 * durationMs / 1e3),
-      48e3
-    );
-    await __privateMethod(this, _EFTimegroup_instances, addAudioToContext_fn).call(this, audioContext, fromMs, toMs);
-    return await audioContext.startRendering();
-  }
-  async loadMd5Sums() {
-    const efElements = this.efElements;
-    const loaderTasks = [];
-    for (const el of efElements) {
-      const md5SumLoader = el.md5SumLoader;
-      if (md5SumLoader instanceof Task) {
-        md5SumLoader.run();
-        loaderTasks.push(md5SumLoader.taskComplete);
-      }
-    }
-    await Promise.all(loaderTasks);
-    efElements.map((el) => {
-      if ("productionSrc" in el && el.productionSrc instanceof Function) {
-        el.setAttribute("src", el.productionSrc());
-      }
-    });
-  }
-};
-_currentTime = /* @__PURE__ */ new WeakMap();
-_resizeObserver = /* @__PURE__ */ new WeakMap();
-_EFTimegroup_instances = /* @__PURE__ */ new WeakSet();
-addAudioToContext_fn = async function(audioContext, fromMs, toMs) {
-  await this.waitForMediaDurations();
-  await Promise.all(
-    deepGetMediaElements(this).map(async (mediaElement) => {
-      const mediaStartsBeforeEnd = mediaElement.startTimeMs <= toMs;
-      const mediaEndsAfterStart = mediaElement.endTimeMs >= fromMs;
-      const mediaOverlaps = mediaStartsBeforeEnd && mediaEndsAfterStart;
-      if (!mediaOverlaps || mediaElement.defaultAudioTrackId === void 0) {
-        return;
-      }
-      const audio = await mediaElement.fetchAudioSpanningTime(fromMs, toMs);
-      if (!audio) {
-        throw new Error("Failed to fetch audio");
-      }
-      const bufferSource = audioContext.createBufferSource();
-      bufferSource.buffer = await audioContext.decodeAudioData(
-        await audio.blob.arrayBuffer()
-      );
-      bufferSource.connect(audioContext.destination);
-      const ctxStartMs = Math.max(0, mediaElement.startTimeMs - fromMs);
-      const ctxEndMs = mediaElement.endTimeMs - fromMs;
-      const ctxDurationMs = ctxEndMs - ctxStartMs;
-      const offset = Math.max(0, fromMs - mediaElement.startTimeMs) - audio.startMs;
-      bufferSource.start(
-        ctxStartMs / 1e3,
-        offset / 1e3,
-        ctxDurationMs / 1e3
-      );
-    })
-  );
+	for (const child of Array.from(element.children)) if (child instanceof EFTimegroup) groups.push(child);
+	else shallowGetTimegroups(child, groups);
+	return groups;
 };
-EFTimegroup.styles = css`
+let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
+	static {
+		_EFTimegroup = this;
+	}
+	constructor(..._args) {
+		super(..._args);
+		this._timeGroupContext = this;
+		this.mode = "contain";
+		this.overlapMs = 0;
+		this.fit = "none";
+		this.frameTask = new Task(this, {
+			autoRun: EF_INTERACTIVE,
+			args: () => [this.ownCurrentTimeMs, this.currentTimeMs],
+			task: async ([], { signal: _signal }) => {
+				let fullyUpdated = await this.updateComplete;
+				while (!fullyUpdated) fullyUpdated = await this.updateComplete;
+			}
+		});
+	}
+	static {
+		this.styles = css`
     :host {
       display: block;
       width: 100%;
@@ -309,32 +48,232 @@ EFTimegroup.styles = css`
       left: 0;
     }
   `;
-__decorateClass([
-  provide({ context: timegroupContext })
-], EFTimegroup.prototype, "_timeGroupContext", 2);
-__decorateClass([
-  property({
-    type: String,
-    attribute: "mode"
-  })
-], EFTimegroup.prototype, "mode", 2);
-__decorateClass([
-  property({
-    type: Number,
-    converter: durationConverter,
-    attribute: "overlap"
-  })
-], EFTimegroup.prototype, "overlapMs", 2);
-__decorateClass([
-  property({ type: String })
-], EFTimegroup.prototype, "fit", 2);
-__decorateClass([
-  property({ type: Number, attribute: "currenttime" })
-], EFTimegroup.prototype, "currentTime", 1);
-EFTimegroup = __decorateClass([
-  customElement("ef-timegroup")
-], EFTimegroup);
-export {
-  EFTimegroup,
-  shallowGetTimegroups
+	}
+	#currentTime = 0;
+	#resizeObserver;
+	set currentTime(time) {
+		this.#currentTime = Math.max(0, Math.min(time, this.durationMs / 1e3));
+		try {
+			if (this.id) {
+				if (this.isConnected) localStorage.setItem(this.storageKey, time.toString());
+			}
+		} catch (error) {
+			log("Failed to save time to localStorage", error);
+		}
+	}
+	get currentTime() {
+		return this.#currentTime;
+	}
+	get currentTimeMs() {
+		return this.currentTime * 1e3;
+	}
+	set currentTimeMs(ms) {
+		this.currentTime = ms / 1e3;
+	}
+	render() {
+		return html`<slot></slot> `;
+	}
+	maybeLoadTimeFromLocalStorage() {
+		if (this.id) try {
+			return Number.parseFloat(localStorage.getItem(this.storageKey) || "0");
+		} catch (error) {
+			log("Failed to load time from localStorage", error);
+		}
+		return 0;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.id) this.waitForMediaDurations().then(() => {
+			this.currentTime = this.maybeLoadTimeFromLocalStorage();
+		});
+		if (this.parentTimegroup) new TimegroupController(this.parentTimegroup, this);
+		if (this.shouldWrapWithWorkbench()) this.wrapWithWorkbench();
+		requestAnimationFrame(() => {
+			this.updateAnimations();
+		});
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#resizeObserver?.disconnect();
+	}
+	get storageKey() {
+		if (!this.id) throw new Error("Timegroup must have an id to use localStorage.");
+		return `ef-timegroup-${this.id}`;
+	}
+	get intrinsicDurationMs() {
+		if (this.hasExplicitDuration) return this.explicitDurationMs;
+		return void 0;
+	}
+	get hasOwnDuration() {
+		return this.mode === "contain" || this.mode === "sequence" || this.mode === "fixed" && this.hasExplicitDuration;
+	}
+	get durationMs() {
+		switch (this.mode) {
+			case "fit": {
+				if (!this.parentTimegroup) return 0;
+				return this.parentTimegroup.durationMs;
+			}
+			case "fixed": return super.durationMs;
+			case "sequence": {
+				let duration = 0;
+				this.childTemporals.forEach((child, index) => {
+					if (child instanceof _EFTimegroup && child.mode === "fit") return;
+					if (index > 0) duration -= this.overlapMs;
+					duration += child.durationMs;
+				});
+				return duration;
+			}
+			case "contain": {
+				let maxDuration = 0;
+				for (const child of this.childTemporals) {
+					if (child instanceof _EFTimegroup && child.mode === "fit") continue;
+					if (!child.hasOwnDuration) continue;
+					maxDuration = Math.max(maxDuration, child.durationMs);
+				}
+				return maxDuration;
+			}
+			default: throw new Error(`Invalid time mode: ${this.mode}`);
+		}
+	}
+	async getPendingFrameTasks() {
+		await this.updateComplete;
+		const temporals = deepGetElementsWithFrameTasks(this);
+		return temporals.map((temporal) => temporal.frameTask).filter((task) => task.status < TaskStatus.COMPLETE);
+	}
+	async waitForFrameTasks() {
+		const limit = 10;
+		let step = 0;
+		await this.updateComplete;
+		while (step < limit) {
+			step++;
+			let pendingTasks = await this.getPendingFrameTasks();
+			await Promise.all(pendingTasks.map((task) => task.taskComplete));
+			await this.updateComplete;
+			pendingTasks = await this.getPendingFrameTasks();
+			if (pendingTasks.length === 0) break;
+		}
+	}
+	/**
+	* Wait for all media elements to load their initial segments.
+	* Ideally we would only need the extracted index json data, but
+	* that caused issues with constructing audio data. We had negative durations
+	* in calculations and it was not clear why.
+	*/
+	async waitForMediaDurations() {
+		await this.updateComplete;
+		const mediaElements = deepGetMediaElements(this);
+		await Promise.all(mediaElements.map((m) => m.fragmentIndexTask.taskComplete));
+		flushStartTimeMsCache();
+		this.requestUpdate("currentTime");
+		await this.updateComplete;
+	}
+	get childTemporals() {
+		return shallowGetTemporalElements(this);
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("currentTime") || changedProperties.has("ownCurrentTimeMs")) this.updateAnimations();
+	}
+	updateAnimations() {
+		updateAnimations(this);
+	}
+	get contextProvider() {
+		let parent = this.parentNode;
+		while (parent) {
+			if (isContextMixin(parent)) return parent;
+			parent = parent.parentNode;
+		}
+		return null;
+	}
+	/**
+	* Returns true if the timegroup should be wrapped with a workbench.
+	*
+	* A timegroup should be wrapped with a workbench if it is the root-most timegroup
+	* and EF_INTERACTIVE is true.
+	*
+	* If the timegroup is already wrappedin a context provider like ef-preview,
+	* it should NOT be wrapped in a workbench.
+	*/
+	shouldWrapWithWorkbench() {
+		return EF_INTERACTIVE && this.closest("ef-timegroup") === this && this.closest("ef-preview") === null && this.closest("ef-workbench") === null && this.closest("test-context") === null;
+	}
+	wrapWithWorkbench() {
+		const workbench = document.createElement("ef-workbench");
+		this.parentElement?.append(workbench);
+		if (!this.hasAttribute("id")) this.setAttribute("id", "root-this");
+		this.setAttribute("slot", "canvas");
+		workbench.append(this);
+		const filmstrip = document.createElement("ef-filmstrip");
+		filmstrip.setAttribute("slot", "timeline");
+		filmstrip.setAttribute("target", this.id);
+		workbench.append(filmstrip);
+	}
+	get efElements() {
+		return Array.from(this.querySelectorAll("ef-audio, ef-video, ef-image, ef-captions, ef-waveform"));
+	}
+	async #addAudioToContext(audioContext, fromMs, toMs) {
+		await this.waitForMediaDurations();
+		await Promise.all(deepGetMediaElements(this).map(async (mediaElement) => {
+			const mediaStartsBeforeEnd = mediaElement.startTimeMs <= toMs;
+			const mediaEndsAfterStart = mediaElement.endTimeMs >= fromMs;
+			const mediaOverlaps = mediaStartsBeforeEnd && mediaEndsAfterStart;
+			if (!mediaOverlaps || mediaElement.defaultAudioTrackId === void 0) return;
+			const audio = await mediaElement.fetchAudioSpanningTime(fromMs, toMs);
+			if (!audio) throw new Error("Failed to fetch audio");
+			const bufferSource = audioContext.createBufferSource();
+			bufferSource.buffer = await audioContext.decodeAudioData(await audio.blob.arrayBuffer());
+			bufferSource.connect(audioContext.destination);
+			const ctxStartMs = Math.max(0, mediaElement.startTimeMs - fromMs);
+			const ctxEndMs = mediaElement.endTimeMs - fromMs;
+			const ctxDurationMs = ctxEndMs - ctxStartMs;
+			const offset = Math.max(0, fromMs - mediaElement.startTimeMs) - audio.startMs;
+			bufferSource.start(ctxStartMs / 1e3, offset / 1e3, ctxDurationMs / 1e3);
+		}));
+	}
+	async renderAudio(fromMs, toMs) {
+		const durationMs = toMs - fromMs;
+		const contextSize = Math.round(48e3 * durationMs / 1e3);
+		if (contextSize <= 0) throw new Error(`Duration must be greater than 0 when rendering audio. ${contextSize}ms`);
+		let audioContext;
+		try {
+			audioContext = new OfflineAudioContext(2, contextSize, 48e3);
+		} catch (error) {
+			throw new Error(`[EFTimegroup.renderAudio] Failed to create OfflineAudioContext(2, ${contextSize}, 48000) for renderAudio(${fromMs}, ${toMs}) with contextSize=${contextSize}: ${error instanceof Error ? error.message : String(error)}. This typically happens when audio parameters are invalid (e.g., contextSize <= 0).`);
+		}
+		await this.#addAudioToContext(audioContext, fromMs, toMs);
+		const renderedBuffer = await audioContext.startRendering();
+		return renderedBuffer;
+	}
+	async loadMd5Sums() {
+		const efElements = this.efElements;
+		const loaderTasks = [];
+		for (const el of efElements) {
+			const md5SumLoader = el.md5SumLoader;
+			if (md5SumLoader instanceof Task) {
+				md5SumLoader.run();
+				loaderTasks.push(md5SumLoader.taskComplete);
+			}
+		}
+		await Promise.all(loaderTasks);
+		efElements.map((el) => {
+			if ("productionSrc" in el && el.productionSrc instanceof Function) el.setAttribute("src", el.productionSrc());
+		});
+	}
 };
+_decorate([provide({ context: timegroupContext })], EFTimegroup.prototype, "_timeGroupContext", void 0);
+_decorate([property({
+	type: String,
+	attribute: "mode"
+})], EFTimegroup.prototype, "mode", void 0);
+_decorate([property({
+	type: Number,
+	converter: durationConverter,
+	attribute: "overlap"
+})], EFTimegroup.prototype, "overlapMs", void 0);
+_decorate([property({ type: String })], EFTimegroup.prototype, "fit", void 0);
+_decorate([property({
+	type: Number,
+	attribute: "currenttime"
+})], EFTimegroup.prototype, "currentTime", null);
+EFTimegroup = _EFTimegroup = _decorate([customElement("ef-timegroup")], EFTimegroup);
+export { EFTimegroup, shallowGetTimegroups };