@editframe/elements 0.30.1-beta.0 → 0.31.0-beta.0

package/dist/canvas/selection/SelectionModel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionModel.js","names":[],"sources":["../../../src/canvas/selection/SelectionModel.ts"],"sourcesContent":["import type { SelectionState } from \"../api/types.js\";\n\n/**\n * Create a DOMRect-like object. Polyfill for Node.js environments.\n */\nfunction createRect(\n  x: number,\n  y: number,\n  width: number,\n  height: number,\n): DOMRect {\n  if (typeof DOMRect !== \"undefined\") {\n    return new DOMRect(x, y, width, height);\n  }\n  // Polyfill for Node.js\n  return {\n    x,\n    y,\n    width,\n    height,\n    left: x,\n    top: y,\n    right: x + width,\n    bottom: y + height,\n    toJSON: () => ({ x, y, width, height }),\n  } as DOMRect;\n}\n\n/**\n * Pure selection logic - semantics separate from mechanism.\n * Manages selection state and operations.\n */\nexport class SelectionModel extends EventTarget {\n  private _selectedIds = new Set<string>();\n  private _primaryId: string | null = null;\n  private _selectionMode: SelectionState = \"none\";\n  private _boxSelectStart: { x: number; y: number } | null = null;\n  private _boxSelectCurrent: { x: number; y: number } | null = null;\n  private _groups = new Map<string, Set<string>>();\n  private _elementToGroup = new Map<string, string>();\n\n  /**\n   * Emit selectionchange event with current selection state.\n   */\n  private _emitSelectionChange(): void {\n    // Convert Set to array with primary first\n    const selectedIdsArray =\n      this._primaryId && this._selectedIds.has(this._primaryId)\n        ? [\n            this._primaryId,\n            ...Array.from(this._selectedIds).filter(\n              (id) => id !== this._primaryId,\n            ),\n          ]\n        : Array.from(this._selectedIds);\n\n    this.dispatchEvent(\n      new CustomEvent(\"selectionchange\", {\n        detail: {\n          selectedIds: selectedIdsArray,\n          selectionMode: this._selectionMode,\n        },\n        bubbles: false,\n        composed: false,\n      }),\n    );\n  }\n\n  /**\n   * Get current selection state.\n   */\n  get selectedIds(): ReadonlySet<string> {\n    return this._selectedIds;\n  }\n\n  /**\n   * Get current selection mode.\n   */\n  get selectionMode(): SelectionState {\n    return this._selectionMode;\n  }\n\n  /**\n   * Get current box selection bounds, if active.\n   */\n  get boxSelectBounds(): DOMRect | null {\n    if (!this._boxSelectStart || !this._boxSelectCurrent) {\n      return null;\n    }\n    const left = Math.min(this._boxSelectStart.x, this._boxSelectCurrent.x);\n    const top = Math.min(this._boxSelectStart.y, this._boxSelectCurrent.y);\n    const right = Math.max(this._boxSelectStart.x, this._boxSelectCurrent.x);\n    const bottom = Math.max(this._boxSelectStart.y, this._boxSelectCurrent.y);\n    return createRect(left, top, right - left, bottom - top);\n  }\n\n  /**\n   * Select a single element.\n   */\n  select(id: string): void {\n    this._selectedIds.clear();\n    this._selectedIds.add(id);\n    this._primaryId = id;\n    this._selectionMode = \"single\";\n    this._emitSelectionChange();\n  }\n\n  /**\n   * Select multiple elements.\n   */\n  selectMultiple(ids: string[]): void {\n    this._selectedIds.clear();\n    for (const id of ids) {\n      this._selectedIds.add(id);\n    }\n    this._primaryId = ids.length > 0 ? (ids[0] ?? null) : null;\n    this._selectionMode =\n      ids.length === 0 ? \"none\" : ids.length === 1 ? \"single\" : \"multiple\";\n    this._emitSelectionChange();\n  }\n\n  /**\n   * Add element to selection (for multi-select).\n   */\n  addToSelection(id: string): void {\n    this._selectedIds.add(id);\n    if (!this._primaryId) {\n      this._primaryId = id;\n    }\n    this._updateSelectionMode();\n    this._emitSelectionChange();\n  }\n\n  /**\n   * Remove element from selection.\n   */\n  deselect(id: string): void {\n    this._selectedIds.delete(id);\n    if (this._primaryId === id) {\n      // Set primary to first remaining, or null if none\n      const remaining = Array.from(this._selectedIds);\n      this._primaryId = remaining.length > 0 ? (remaining[0] ?? null) : null;\n    }\n    this._updateSelectionMode();\n    this._emitSelectionChange();\n  }\n\n  /**\n   * Toggle element selection state.\n   */\n  toggle(id: string): void {\n    if (this._selectedIds.has(id)) {\n      this.deselect(id);\n    } else {\n      this.addToSelection(id);\n    }\n  }\n\n  /**\n   * Clear all selections.\n   */\n  clear(): void {\n    this._selectedIds.clear();\n    this._primaryId = null;\n    this._selectionMode = \"none\";\n    this._boxSelectStart = null;\n    this._boxSelectCurrent = null;\n    this._emitSelectionChange();\n  }\n\n  /**\n   * Start box selection.\n   */\n  startBoxSelect(x: number, y: number): void {\n    this._boxSelectStart = { x, y };\n    this._boxSelectCurrent = { x, y };\n    this._selectionMode = \"box-selecting\";\n  }\n\n  /**\n   * Update box selection.\n   */\n  updateBoxSelect(x: number, y: number): void {\n    if (this._selectionMode !== \"box-selecting\") {\n      return;\n    }\n    this._boxSelectCurrent = { x, y };\n  }\n\n  /**\n   * End box selection and select elements within bounds.\n   * @param hitTest - Function to find elements within bounds\n   * @param addToSelection - If true, add to existing selection; if false, replace selection\n   */\n  endBoxSelect(\n    hitTest: (bounds: DOMRect) => string[],\n    addToSelection = false,\n  ): void {\n    if (\n      this._selectionMode !== \"box-selecting\" ||\n      !this._boxSelectStart ||\n      !this._boxSelectCurrent\n    ) {\n      return;\n    }\n    const bounds = this.boxSelectBounds;\n    if (bounds) {\n      const ids = hitTest(bounds);\n      if (addToSelection) {\n        // Add each element to selection\n        for (const id of ids) {\n          this.addToSelection(id);\n        }\n      } else {\n        // Replace selection\n        this.selectMultiple(ids);\n      }\n    }\n    this._boxSelectStart = null;\n    this._boxSelectCurrent = null;\n    // Note: selectMultiple/addToSelection already emit events, so no need to emit again\n  }\n\n  /**\n   * Create a group from selected elements.\n   */\n  createGroup(ids: string[]): string {\n    if (ids.length === 0) {\n      throw new Error(\"Cannot create group with no elements\");\n    }\n    const groupId = `group-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\n    const groupSet = new Set(ids);\n    this._groups.set(groupId, groupSet);\n    for (const id of ids) {\n      this._elementToGroup.set(id, groupId);\n    }\n    return groupId;\n  }\n\n  /**\n   * Ungroup a group.\n   */\n  ungroup(groupId: string): void {\n    const group = this._groups.get(groupId);\n    if (!group) {\n      return;\n    }\n    for (const id of group) {\n      this._elementToGroup.delete(id);\n    }\n    this._groups.delete(groupId);\n  }\n\n  /**\n   * Select all elements in a group.\n   */\n  selectGroup(groupId: string): void {\n    const group = this._groups.get(groupId);\n    if (!group) {\n      return;\n    }\n    this.selectMultiple(Array.from(group));\n    // Note: selectMultiple already emits event\n  }\n\n  /**\n   * Get group ID for an element, if any.\n   */\n  getGroupId(elementId: string): string | undefined {\n    return this._elementToGroup.get(elementId);\n  }\n\n  /**\n   * Get all element IDs in a group.\n   */\n  getGroupElements(groupId: string): string[] {\n    const group = this._groups.get(groupId);\n    return group ? Array.from(group) : [];\n  }\n\n  /**\n   * Update selection mode based on current selection count.\n   */\n  private _updateSelectionMode(): void {\n    const count = this._selectedIds.size;\n    if (count === 0) {\n      this._selectionMode = \"none\";\n    } else if (count === 1) {\n      this._selectionMode = \"single\";\n    } else {\n      this._selectionMode = \"multiple\";\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/canvas/selection/selectionContext.d.ts

@@ -0,0 +1,31 @@
+import { SelectionState } from "../api/types.js";
+
+//#region src/canvas/selection/selectionContext.d.ts
+
+/**
+ * Selection context interface for Lit context.
+ */
+interface SelectionContext {
+  selectedIds: ReadonlySet<string>;
+  selectionMode: SelectionState;
+  boxSelectBounds: DOMRect | null;
+  select: (id: string) => void;
+  selectMultiple: (ids: string[]) => void;
+  addToSelection: (id: string) => void;
+  deselect: (id: string) => void;
+  toggle: (id: string) => void;
+  clear: () => void;
+  startBoxSelect: (x: number, y: number) => void;
+  updateBoxSelect: (x: number, y: number) => void;
+  endBoxSelect: (hitTest: (bounds: DOMRect) => string[], addToSelection?: boolean) => void;
+  createGroup: (ids: string[]) => string;
+  ungroup: (groupId: string) => void;
+  selectGroup: (groupId: string) => void;
+  getGroupId: (elementId: string) => string | undefined;
+  getGroupElements: (groupId: string) => string[];
+  addEventListener: (type: "selectionchange", listener: (event: CustomEvent) => void) => void;
+  removeEventListener: (type: "selectionchange", listener: (event: CustomEvent) => void) => void;
+}
+//#endregion
+export { SelectionContext };
+//# sourceMappingURL=selectionContext.d.ts.map

package/dist/canvas/selection/selectionContext.js

@@ -0,0 +1,12 @@
+import { createContext } from "@lit/context";
+
+//#region src/canvas/selection/selectionContext.ts
+/**
+* Lit context for selection state.
+* Provided by EFCanvas, consumed by child elements.
+*/
+const selectionContext = createContext(Symbol("selectionContext"));
+
+//#endregion
+export { selectionContext };
+//# sourceMappingURL=selectionContext.js.map

package/dist/canvas/selection/selectionContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectionContext.js","names":[],"sources":["../../../src/canvas/selection/selectionContext.ts"],"sourcesContent":["import { createContext } from \"@lit/context\";\nimport type { SelectionState } from \"../api/types.js\";\n\n/**\n * Selection context interface for Lit context.\n */\nexport interface SelectionContext {\n  selectedIds: ReadonlySet<string>;\n  selectionMode: SelectionState;\n  boxSelectBounds: DOMRect | null;\n  select: (id: string) => void;\n  selectMultiple: (ids: string[]) => void;\n  addToSelection: (id: string) => void;\n  deselect: (id: string) => void;\n  toggle: (id: string) => void;\n  clear: () => void;\n  startBoxSelect: (x: number, y: number) => void;\n  updateBoxSelect: (x: number, y: number) => void;\n  endBoxSelect: (\n    hitTest: (bounds: DOMRect) => string[],\n    addToSelection?: boolean,\n  ) => void;\n  createGroup: (ids: string[]) => string;\n  ungroup: (groupId: string) => void;\n  selectGroup: (groupId: string) => void;\n  getGroupId: (elementId: string) => string | undefined;\n  getGroupElements: (groupId: string) => string[];\n  addEventListener: (\n    type: \"selectionchange\",\n    listener: (event: CustomEvent) => void,\n  ) => void;\n  removeEventListener: (\n    type: \"selectionchange\",\n    listener: (event: CustomEvent) => void,\n  ) => void;\n}\n\n/**\n * Lit context for selection state.\n * Provided by EFCanvas, consumed by child elements.\n */\nexport const selectionContext = createContext<SelectionContext>(\n  Symbol(\"selectionContext\"),\n);\n"],"mappings":";;;;;;;AAyCA,MAAa,mBAAmB,cAC9B,OAAO,mBAAmB,CAC3B"}

package/dist/elements/ContainerInfo.d.ts

@@ -0,0 +1,29 @@
+//#region src/elements/ContainerInfo.d.ts
+/**
+ * Container information interface for elements that can contain children.
+ * Provides information about container capabilities and display mode.
+ */
+interface ContainerInfo {
+  /**
+   * Whether this element is a container that can contain children.
+   */
+  isContainer: boolean;
+  /**
+   * The display mode of the container.
+   * "flex" | "grid" | "block" | null
+   */
+  displayMode: "flex" | "grid" | "block" | null;
+  /**
+   * Whether this container can contain children.
+   * This may differ from isContainer if the container is not configured to accept children.
+   */
+  canContainChildren: boolean;
+}
+/**
+ * Helper function to get container info from any HTMLElement.
+ * Reads computed styles to determine display mode.
+ */
+declare function getContainerInfoFromElement(element: HTMLElement | null): ContainerInfo;
+//#endregion
+export { ContainerInfo, getContainerInfoFromElement };
+//# sourceMappingURL=ContainerInfo.d.ts.map

package/dist/elements/ContainerInfo.js

@@ -0,0 +1,30 @@
+//#region src/elements/ContainerInfo.ts
+/**
+* Helper function to get container info from any HTMLElement.
+* Reads computed styles to determine display mode.
+*/
+function getContainerInfoFromElement(element) {
+	if (!element) return {
+		isContainer: false,
+		displayMode: null,
+		canContainChildren: false
+	};
+	const display = window.getComputedStyle(element).display;
+	const isGrid = display === "grid" || display === "inline-grid";
+	const isFlex = display === "flex" || display === "inline-flex";
+	const isBlock = display === "block" || display === "inline-block";
+	const isContainer = isGrid || isFlex || isBlock;
+	let displayMode = null;
+	if (isFlex) displayMode = "flex";
+	else if (isGrid) displayMode = "grid";
+	else if (isBlock) displayMode = "block";
+	return {
+		isContainer,
+		displayMode,
+		canContainChildren: isContainer
+	};
+}
+
+//#endregion
+export { getContainerInfoFromElement };
+//# sourceMappingURL=ContainerInfo.js.map

package/dist/elements/ContainerInfo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContainerInfo.js","names":["displayMode: \"flex\" | \"grid\" | \"block\" | null"],"sources":["../../src/elements/ContainerInfo.ts"],"sourcesContent":["/**\n * Container information interface for elements that can contain children.\n * Provides information about container capabilities and display mode.\n */\n\nexport interface ContainerInfo {\n  /**\n   * Whether this element is a container that can contain children.\n   */\n  isContainer: boolean;\n\n  /**\n   * The display mode of the container.\n   * \"flex\" | \"grid\" | \"block\" | null\n   */\n  displayMode: \"flex\" | \"grid\" | \"block\" | null;\n\n  /**\n   * Whether this container can contain children.\n   * This may differ from isContainer if the container is not configured to accept children.\n   */\n  canContainChildren: boolean;\n}\n\n/**\n * Helper function to get container info from any HTMLElement.\n * Reads computed styles to determine display mode.\n */\nexport function getContainerInfoFromElement(\n  element: HTMLElement | null,\n): ContainerInfo {\n  if (!element) {\n    return {\n      isContainer: false,\n      displayMode: null,\n      canContainChildren: false,\n    };\n  }\n\n  const computedStyle = window.getComputedStyle(element);\n  const display = computedStyle.display;\n\n  // Determine if it's a container (grid or flex)\n  const isGrid = display === \"grid\" || display === \"inline-grid\";\n  const isFlex = display === \"flex\" || display === \"inline-flex\";\n  const isBlock = display === \"block\" || display === \"inline-block\";\n\n  const isContainer = isGrid || isFlex || isBlock;\n\n  let displayMode: \"flex\" | \"grid\" | \"block\" | null = null;\n  if (isFlex) {\n    displayMode = \"flex\";\n  } else if (isGrid) {\n    displayMode = \"grid\";\n  } else if (isBlock) {\n    displayMode = \"block\";\n  }\n\n  return {\n    isContainer,\n    displayMode,\n    canContainChildren: isContainer,\n  };\n}\n"],"mappings":";;;;;AA4BA,SAAgB,4BACd,SACe;AACf,KAAI,CAAC,QACH,QAAO;EACL,aAAa;EACb,aAAa;EACb,oBAAoB;EACrB;CAIH,MAAM,UADgB,OAAO,iBAAiB,QAAQ,CACxB;CAG9B,MAAM,SAAS,YAAY,UAAU,YAAY;CACjD,MAAM,SAAS,YAAY,UAAU,YAAY;CACjD,MAAM,UAAU,YAAY,WAAW,YAAY;CAEnD,MAAM,cAAc,UAAU,UAAU;CAExC,IAAIA,cAAgD;AACpD,KAAI,OACF,eAAc;UACL,OACT,eAAc;UACL,QACT,eAAc;AAGhB,QAAO;EACL;EACA;EACA,oBAAoB;EACrB"}

package/dist/elements/EFAudio.d.ts

@@ -2,15 +2,25 @@ import { MediaEngine } from "../transcoding/types/index.js";
 import { EFMedia } from "./EFMedia.js";
 import * as _lit_task8 from "@lit/task";
 import { Task } from "@lit/task";
-import * as lit_html2 from "lit-html";
+import * as lit_html1 from "lit-html";
 import * as lit_html_directives_ref_js1 from "lit-html/directives/ref.js";
 
 //#region src/elements/EFAudio.d.ts
 declare const EFAudio_base: typeof EFMedia;
 declare class EFAudio extends EFAudio_base {
-  private _propertyHack;
+  /**
+   * EFAudio only requires audio tracks - skip video track validation
+   * to avoid unnecessary network requests to transcoding service.
+   */
+  get requiredTracks(): "audio" | "video" | "both";
+  /**
+   * Audio volume level (0.0 to 1.0)
+   * @domAttribute "volume"
+   */
+  volume: number;
   audioElementRef: lit_html_directives_ref_js1.Ref<HTMLAudioElement>;
-  render(): lit_html2.TemplateResult<1>;
+  protected updated(changedProperties: Map<PropertyKey, unknown>): void;
+  render(): lit_html1.TemplateResult<1>;
   frameTask: Task<readonly [_lit_task8.TaskStatus, _lit_task8.TaskStatus, _lit_task8.TaskStatus, _lit_task8.TaskStatus], void>;
   /**
    * Legacy getter for fragment index task (maps to audioSegmentIdTask)

package/dist/elements/EFAudio.js

@@ -11,7 +11,7 @@ import { createRef, ref } from "lit/directives/ref.js";
 let EFAudio = class EFAudio$1 extends TWMixin(EFMedia) {
 	constructor(..._args) {
 		super(..._args);
-		this._propertyHack = false;
+		this.volume = 1;
 		this.audioElementRef = createRef();
 		this.frameTask = new Task(this, {
 			autoRun: EF_INTERACTIVE,
@@ -21,15 +21,68 @@ let EFAudio = class EFAudio$1 extends TWMixin(EFMedia) {
 				this.audioSegmentFetchTask.status,
 				this.mediaEngineTask.status
 			],
-			task: async () => {
-				await this.mediaEngineTask.taskComplete;
-				await this.audioSegmentFetchTask.taskComplete;
-				await this.audioSeekTask.taskComplete;
-				await this.audioBufferTask.taskComplete;
-				this.rootTimegroup?.requestUpdate();
+			onError: (error) => {
+				this.frameTask.taskComplete.catch(() => {});
+				if (error instanceof DOMException && error.name === "AbortError" || error instanceof Error && (error.name === "AbortError" || error.message?.includes("signal is aborted") || error.message?.includes("The user aborted a request"))) return;
+				console.error("EFAudio frameTask error", error);
+			},
+			task: async ([_audioBufferStatus, _audioSeekStatus, _audioSegmentFetchStatus, _mediaEngineStatus], { signal }) => {
+				try {
+					await this.mediaEngineTask.taskComplete;
+				} catch (error) {
+					if (error instanceof DOMException && error.name === "AbortError") {
+						signal?.throwIfAborted();
+						return;
+					}
+					throw error;
+				}
+				signal?.throwIfAborted();
+				try {
+					await this.audioSegmentFetchTask.taskComplete;
+				} catch (error) {
+					if (error instanceof DOMException && error.name === "AbortError") {
+						signal?.throwIfAborted();
+						return;
+					}
+					throw error;
+				}
+				signal?.throwIfAborted();
+				try {
+					await this.audioSeekTask.taskComplete;
+				} catch (error) {
+					if (error instanceof DOMException && error.name === "AbortError") {
+						signal?.throwIfAborted();
+						return;
+					}
+					throw error;
+				}
+				signal?.throwIfAborted();
+				try {
+					await this.audioBufferTask.taskComplete;
+				} catch (error) {
+					if (error instanceof DOMException && error.name === "AbortError") {
+						signal?.throwIfAborted();
+						return;
+					}
+					throw error;
+				}
+				signal?.throwIfAborted();
 			}
 		});
 	}
+	/**
+	* EFAudio only requires audio tracks - skip video track validation
+	* to avoid unnecessary network requests to transcoding service.
+	*/
+	get requiredTracks() {
+		return "audio";
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (this.audioElementRef.value) {
+			if (changedProperties.has("volume") || changedProperties.size === 0) this.audioElementRef.value.volume = this.volume;
+		}
+	}
 	render() {
 		return html`<audio ${ref(this.audioElementRef)}></audio>`;
 	}
@@ -42,9 +95,10 @@ let EFAudio = class EFAudio$1 extends TWMixin(EFMedia) {
 	}
 };
 __decorate([property({
-	type: Boolean,
-	attribute: "dummy-property"
-})], EFAudio.prototype, "_propertyHack", void 0);
+	type: Number,
+	attribute: "volume",
+	reflect: true
+})], EFAudio.prototype, "volume", void 0);
 EFAudio = __decorate([customElement("ef-audio")], EFAudio);
 
 //#endregion

package/dist/elements/EFAudio.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFAudio.js","names":["EFAudio"],"sources":["../../src/elements/EFAudio.ts"],"sourcesContent":["import { Task } from \"@lit/task\";\nimport { html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport { EF_INTERACTIVE } from \"../EF_INTERACTIVE.js\";\nimport { TWMixin } from \"../gui/TWMixin.js\";\nimport { EFMedia } from \"./EFMedia.js\";\n\n@customElement(\"ef-audio\")\nexport class EFAudio extends TWMixin(EFMedia) {\n  // HACK: This dummy property is needed to activate Lit's property processing system\n  // Without it, inherited properties from EFMedia don't work correctly\n  // TODO: Remove this as soon as we have an audio-specific property that needs @property\n  @property({ type: Boolean, attribute: \"dummy-property\" })\n  // @ts-expect-error - This is a hack to activate Lit's property processing system\n  // biome-ignore lint/correctness/noUnusedPrivateClassMembers: Used to activate Lit's property processing\n  private _propertyHack = false;\n\n  audioElementRef = createRef<HTMLAudioElement>();\n\n  render() {\n    return html`<audio ${ref(this.audioElementRef)}></audio>`;\n  }\n\n  frameTask = new Task(this, {\n    autoRun: EF_INTERACTIVE,\n    args: () =>\n      [\n        this.audioBufferTask.status,\n        this.audioSeekTask.status,\n        this.audioSegmentFetchTask.status,\n        this.mediaEngineTask.status,\n      ] as const,\n    task: async () => {\n      await this.mediaEngineTask.taskComplete;\n      await this.audioSegmentFetchTask.taskComplete;\n      await this.audioSeekTask.taskComplete;\n      await this.audioBufferTask.taskComplete;\n      this.rootTimegroup?.requestUpdate();\n    },\n  });\n\n  /**\n   * Legacy getter for fragment index task (maps to audioSegmentIdTask)\n   * Still used by EFCaptions\n   */\n  get fragmentIndexTask() {\n    return this.audioSegmentIdTask;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-audio\": EFAudio;\n  }\n}\n"],"mappings":";;;;;;;;;;AASO,oBAAMA,kBAAgB,QAAQ,QAAQ,CAAC;;;uBAOpB;yBAEN,WAA6B;mBAMnC,IAAI,KAAK,MAAM;GACzB,SAAS;GACT,YACE;IACE,KAAK,gBAAgB;IACrB,KAAK,cAAc;IACnB,KAAK,sBAAsB;IAC3B,KAAK,gBAAgB;IACtB;GACH,MAAM,YAAY;AAChB,UAAM,KAAK,gBAAgB;AAC3B,UAAM,KAAK,sBAAsB;AACjC,UAAM,KAAK,cAAc;AACzB,UAAM,KAAK,gBAAgB;AAC3B,SAAK,eAAe,eAAe;;GAEtC,CAAC;;CApBF,SAAS;AACP,SAAO,IAAI,UAAU,IAAI,KAAK,gBAAgB,CAAC;;;;;;CAyBjD,IAAI,oBAAoB;AACtB,SAAO,KAAK;;;YAlCb,SAAS;CAAE,MAAM;CAAS,WAAW;CAAkB,CAAC;sBAL1D,cAAc,WAAW"}
+{"version":3,"file":"EFAudio.js","names":["EFAudio"],"sources":["../../src/elements/EFAudio.ts"],"sourcesContent":["import { Task } from \"@lit/task\";\nimport { html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport { EF_INTERACTIVE } from \"../EF_INTERACTIVE.js\";\nimport { TWMixin } from \"../gui/TWMixin.js\";\nimport { EFMedia } from \"./EFMedia.js\";\n\n@customElement(\"ef-audio\")\nexport class EFAudio extends TWMixin(EFMedia) {\n  /**\n   * EFAudio only requires audio tracks - skip video track validation\n   * to avoid unnecessary network requests to transcoding service.\n   */\n  override get requiredTracks(): \"audio\" | \"video\" | \"both\" {\n    return \"audio\";\n  }\n\n  /**\n   * Audio volume level (0.0 to 1.0)\n   * @domAttribute \"volume\"\n   */\n  @property({ type: Number, attribute: \"volume\", reflect: true })\n  volume = 1.0;\n\n  audioElementRef = createRef<HTMLAudioElement>();\n\n  protected updated(\n    changedProperties: Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(changedProperties);\n    \n    // Sync volume property to HTMLAudioElement whenever it changes or element is first rendered\n    if (this.audioElementRef.value) {\n      if (changedProperties.has(\"volume\") || changedProperties.size === 0) {\n        this.audioElementRef.value.volume = this.volume;\n      }\n    }\n  }\n\n  render() {\n    return html`<audio ${ref(this.audioElementRef)}></audio>`;\n  }\n\n  frameTask = new Task(this, {\n    autoRun: EF_INTERACTIVE,\n    args: () =>\n      [\n        this.audioBufferTask.status,\n        this.audioSeekTask.status,\n        this.audioSegmentFetchTask.status,\n        this.mediaEngineTask.status,\n      ] as const,\n    onError: (error) => {\n      // CRITICAL: Attach .catch() handler to taskComplete BEFORE the promise is rejected.\n      // This prevents unhandled rejection when hostUpdate() triggers _performTask() without awaiting.\n      this.frameTask.taskComplete.catch(() => {});\n      \n      // Don't log AbortErrors - these are expected when tasks are cancelled\n      const isAbortError = \n        (error instanceof DOMException && error.name === \"AbortError\") ||\n        (error instanceof Error && (\n          error.name === \"AbortError\" ||\n          error.message?.includes(\"signal is aborted\") ||\n          error.message?.includes(\"The user aborted a request\")\n        ));\n      \n      if (isAbortError) {\n        return;\n      }\n      \n      console.error(\"EFAudio frameTask error\", error);\n    },\n    task: async ([_audioBufferStatus, _audioSeekStatus, _audioSegmentFetchStatus, _mediaEngineStatus], { signal }) => {\n      // Wrap all taskComplete awaits in try/catch to handle AbortErrors\n      try {\n        await this.mediaEngineTask.taskComplete;\n      } catch (error) {\n        if (error instanceof DOMException && error.name === \"AbortError\") {\n          signal?.throwIfAborted();\n          return;\n        }\n        throw error;\n      }\n      signal?.throwIfAborted();\n      \n      try {\n        await this.audioSegmentFetchTask.taskComplete;\n      } catch (error) {\n        if (error instanceof DOMException && error.name === \"AbortError\") {\n          signal?.throwIfAborted();\n          return;\n        }\n        throw error;\n      }\n      signal?.throwIfAborted();\n      \n      try {\n        await this.audioSeekTask.taskComplete;\n      } catch (error) {\n        if (error instanceof DOMException && error.name === \"AbortError\") {\n          signal?.throwIfAborted();\n          return;\n        }\n        throw error;\n      }\n      signal?.throwIfAborted();\n      \n      try {\n        await this.audioBufferTask.taskComplete;\n      } catch (error) {\n        if (error instanceof DOMException && error.name === \"AbortError\") {\n          signal?.throwIfAborted();\n          return;\n        }\n        throw error;\n      }\n      signal?.throwIfAborted();\n      // REMOVED: this.rootTimegroup?.requestUpdate() was causing infinite update loops.\n      // When EFAudio's frameTask ran, it would trigger root to update, which triggered\n      // OwnCurrentTimeController.hostUpdated on all children, which triggered more\n      // frameTask runs, creating an infinite cycle.\n      // The root timegroup already updates when currentTime changes - no need to force it here.\n    },\n  });\n\n  /**\n   * Legacy getter for fragment index task (maps to audioSegmentIdTask)\n   * Still used by EFCaptions\n   */\n  get fragmentIndexTask() {\n    return this.audioSegmentIdTask;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-audio\": EFAudio;\n  }\n}\n"],"mappings":";;;;;;;;;;AASO,oBAAMA,kBAAgB,QAAQ,QAAQ,CAAC;;;gBAcnC;yBAES,WAA6B;mBAmBnC,IAAI,KAAK,MAAM;GACzB,SAAS;GACT,YACE;IACE,KAAK,gBAAgB;IACrB,KAAK,cAAc;IACnB,KAAK,sBAAsB;IAC3B,KAAK,gBAAgB;IACtB;GACH,UAAU,UAAU;AAGlB,SAAK,UAAU,aAAa,YAAY,GAAG;AAW3C,QAPG,iBAAiB,gBAAgB,MAAM,SAAS,gBAChD,iBAAiB,UAChB,MAAM,SAAS,gBACf,MAAM,SAAS,SAAS,oBAAoB,IAC5C,MAAM,SAAS,SAAS,6BAA6B,EAIvD;AAGF,YAAQ,MAAM,2BAA2B,MAAM;;GAEjD,MAAM,OAAO,CAAC,oBAAoB,kBAAkB,0BAA0B,qBAAqB,EAAE,aAAa;AAEhH,QAAI;AACF,WAAM,KAAK,gBAAgB;aACpB,OAAO;AACd,SAAI,iBAAiB,gBAAgB,MAAM,SAAS,cAAc;AAChE,cAAQ,gBAAgB;AACxB;;AAEF,WAAM;;AAER,YAAQ,gBAAgB;AAExB,QAAI;AACF,WAAM,KAAK,sBAAsB;aAC1B,OAAO;AACd,SAAI,iBAAiB,gBAAgB,MAAM,SAAS,cAAc;AAChE,cAAQ,gBAAgB;AACxB;;AAEF,WAAM;;AAER,YAAQ,gBAAgB;AAExB,QAAI;AACF,WAAM,KAAK,cAAc;aAClB,OAAO;AACd,SAAI,iBAAiB,gBAAgB,MAAM,SAAS,cAAc;AAChE,cAAQ,gBAAgB;AACxB;;AAEF,WAAM;;AAER,YAAQ,gBAAgB;AAExB,QAAI;AACF,WAAM,KAAK,gBAAgB;aACpB,OAAO;AACd,SAAI,iBAAiB,gBAAgB,MAAM,SAAS,cAAc;AAChE,cAAQ,gBAAgB;AACxB;;AAEF,WAAM;;AAER,YAAQ,gBAAgB;;GAO3B,CAAC;;;;;;CA9GF,IAAa,iBAA6C;AACxD,SAAO;;CAYT,AAAU,QACR,mBACM;AACN,QAAM,QAAQ,kBAAkB;AAGhC,MAAI,KAAK,gBAAgB,OACvB;OAAI,kBAAkB,IAAI,SAAS,IAAI,kBAAkB,SAAS,EAChE,MAAK,gBAAgB,MAAM,SAAS,KAAK;;;CAK/C,SAAS;AACP,SAAO,IAAI,UAAU,IAAI,KAAK,gBAAgB,CAAC;;;;;;CAyFjD,IAAI,oBAAoB;AACtB,SAAO,KAAK;;;YA7Gb,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAU,SAAS;CAAM,CAAC;sBAdhE,cAAc,WAAW"}

package/dist/elements/EFCaptions.d.ts

@@ -1,12 +1,12 @@
-import { TemporalMixinInterface } from "./EFTemporal.js";
 import { EFSourceMixinInterface } from "./EFSourceMixin.js";
+import { TemporalMixinInterface } from "./EFTemporal.js";
 import { FetchMixinInterface } from "./FetchMixin.js";
-import { EFAudio } from "./EFAudio.js";
 import { EFVideo } from "./EFVideo.js";
+import { EFAudio } from "./EFAudio.js";
 import { Task, TaskStatus } from "@lit/task";
-import * as lit4 from "lit";
+import * as lit3 from "lit";
 import { LitElement, PropertyValueMap } from "lit";
-import * as lit_html4 from "lit-html";
+import * as lit_html3 from "lit-html";
 
 //#region src/elements/EFCaptions.d.ts
 interface WordSegment {
@@ -25,8 +25,8 @@ interface Caption {
 }
 declare const EFCaptionsActiveWord_base: (new (...args: any[]) => TemporalMixinInterface) & typeof LitElement;
 declare class EFCaptionsActiveWord extends EFCaptionsActiveWord_base {
-  static styles: lit4.CSSResult[];
-  render(): lit_html4.TemplateResult<1> | undefined;
+  static styles: lit3.CSSResult[];
+  render(): lit_html3.TemplateResult<1> | undefined;
   wordStartMs: number;
   wordEndMs: number;
   wordText: string;
@@ -38,8 +38,8 @@ declare class EFCaptionsActiveWord extends EFCaptionsActiveWord_base {
 }
 declare const EFCaptionsSegment_base: (new (...args: any[]) => TemporalMixinInterface) & typeof LitElement;
 declare class EFCaptionsSegment extends EFCaptionsSegment_base {
-  static styles: lit4.CSSResult[];
-  render(): lit_html4.TemplateResult<1> | undefined;
+  static styles: lit3.CSSResult[];
+  render(): lit_html3.TemplateResult<1> | undefined;
   segmentStartMs: number;
   segmentEndMs: number;
   segmentText: string;
@@ -49,8 +49,8 @@ declare class EFCaptionsSegment extends EFCaptionsSegment_base {
   get durationMs(): number;
 }
 declare class EFCaptionsBeforeActiveWord extends EFCaptionsSegment {
-  static styles: lit4.CSSResult[];
-  render(): lit_html4.TemplateResult<1> | undefined;
+  static styles: lit3.CSSResult[];
+  render(): lit_html3.TemplateResult<1> | undefined;
   hidden: boolean;
   segmentText: string;
   segmentStartMs: number;
@@ -60,8 +60,8 @@ declare class EFCaptionsBeforeActiveWord extends EFCaptionsSegment {
   get durationMs(): number;
 }
 declare class EFCaptionsAfterActiveWord extends EFCaptionsSegment {
-  static styles: lit4.CSSResult[];
-  render(): lit_html4.TemplateResult<1> | undefined;
+  static styles: lit3.CSSResult[];
+  render(): lit_html3.TemplateResult<1> | undefined;
   hidden: boolean;
   segmentText: string;
   segmentStartMs: number;
@@ -72,7 +72,8 @@ declare class EFCaptionsAfterActiveWord extends EFCaptionsSegment {
 }
 declare const EFCaptions_base: (new (...args: any[]) => EFSourceMixinInterface) & (new (...args: any[]) => TemporalMixinInterface) & (new (...args: any[]) => FetchMixinInterface) & typeof LitElement;
 declare class EFCaptions extends EFCaptions_base {
-  static styles: lit4.CSSResult[];
+  #private;
+  static styles: lit3.CSSResult[];
   targetSelector: string;
   set target(value: string);
   wordStyle: string;
@@ -95,10 +96,10 @@ declare class EFCaptions extends EFCaptions_base {
   segmentContainers: HTMLCollectionOf<EFCaptionsSegment>;
   beforeActiveWordContainers: HTMLCollectionOf<EFCaptionsBeforeActiveWord>;
   afterActiveWordContainers: HTMLCollectionOf<EFCaptionsAfterActiveWord>;
-  render(): lit_html4.TemplateResult<1>;
+  render(): lit_html3.TemplateResult<1>;
   transcriptionsPath(): string | null;
   captionsPath(): string | null;
-  protected md5SumLoader: Task<readonly [string, typeof fetch], string | null | undefined>;
+  protected md5SumLoader: Task<readonly [string, typeof fetch], any>;
   private transcriptionDataTask;
   private transcriptionFragmentPath;
   private fragmentIndexTask;
@@ -107,6 +108,7 @@ declare class EFCaptions extends EFCaptions_base {
   unifiedCaptionsDataTask: Task<readonly [Caption | null | undefined, Caption | null | undefined], Caption | null | undefined>;
   frameTask: Task<readonly [TaskStatus, number], void>;
   connectedCallback(): void;
+  disconnectedCallback(): void;
   protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
   updateTextContainers(): void;
   get targetElement(): EFAudio | EFVideo | null;
@@ -124,5 +126,5 @@ declare global {
   }
 }
 //#endregion
-export { Caption, EFCaptions, EFCaptionsActiveWord, EFCaptionsAfterActiveWord, EFCaptionsBeforeActiveWord, EFCaptionsSegment };
+export { EFCaptions, EFCaptionsActiveWord, EFCaptionsAfterActiveWord, EFCaptionsBeforeActiveWord, EFCaptionsSegment };
 //# sourceMappingURL=EFCaptions.d.ts.map

package/dist/elements/EFCaptions.js

@@ -3,10 +3,10 @@ import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/dec
 import { EFTemporal, flushStartTimeMsCache } from "./EFTemporal.js";
 import { EFSourceMixin } from "./EFSourceMixin.js";
 import { FetchMixin } from "./FetchMixin.js";
-import { flushSequenceDurationCache } from "./EFTimegroup.js";
 import { EFAudio } from "./EFAudio.js";
-import { EFVideo } from "./EFVideo.js";
 import { CrossUpdateController } from "./CrossUpdateController.js";
+import { EFVideo } from "./EFVideo.js";
+import { flushSequenceDurationCache } from "./EFTimegroup.js";
 import { Task, TaskStatus } from "@lit/task";
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
@@ -266,10 +266,12 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 			args: () => [this.target, this.fetch],
 			task: async ([_target, fetch], { signal }) => {
 				if (!this.targetElement) return null;
-				return (await fetch(`/@ef-asset/${this.targetElement.src ?? ""}`, {
-					method: "HEAD",
-					signal
-				})).headers.get("etag") ?? void 0;
+				const src = this.targetElement.src ?? "";
+				let normalizedSrc = src.startsWith("/") ? src.slice(1) : src;
+				normalizedSrc = normalizedSrc.replace(/^\/+/, "");
+				const response = await fetch(`/api/v1/isobmff_files/local/md5?src=${encodeURIComponent(normalizedSrc)}`, { signal });
+				if (!response.ok) return;
+				return (await response.json()).md5 ?? void 0;
 			}
 		});
 		this.transcriptionDataTask = new Task(this, {
@@ -287,7 +289,8 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 		this.fragmentIndexTask = new Task(this, {
 			autoRun: EF_INTERACTIVE,
 			args: () => [this.transcriptionDataTask.value, this.ownCurrentTimeMs],
-			task: async ([transcription, ownCurrentTimeMs]) => {
+			task: async ([transcription, ownCurrentTimeMs], { signal }) => {
+				signal?.throwIfAborted();
 				if (!transcription) return null;
 				return Math.floor(ownCurrentTimeMs / transcription.work_slice_ms);
 			}
@@ -335,17 +338,38 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 		this.unifiedCaptionsDataTask = new Task(this, {
 			autoRun: EF_INTERACTIVE,
 			args: () => [this.customCaptionsDataTask.value, this.transcriptionFragmentDataTask.value],
-			task: async ([_customData, _transcriptionData]) => {
-				if (this.customCaptionsDataTask.status === TaskStatus.PENDING) await this.customCaptionsDataTask.taskComplete;
-				if (this.transcriptionFragmentDataTask.status === TaskStatus.PENDING) await this.transcriptionFragmentDataTask.taskComplete;
+			task: async ([_customData, _transcriptionData], { signal }) => {
+				signal?.throwIfAborted();
+				if (this.customCaptionsDataTask.status === TaskStatus.PENDING) {
+					await this.customCaptionsDataTask.taskComplete;
+					signal?.throwIfAborted();
+				}
+				if (this.transcriptionFragmentDataTask.status === TaskStatus.PENDING) {
+					await this.transcriptionFragmentDataTask.taskComplete;
+					signal?.throwIfAborted();
+				}
 				return this.customCaptionsDataTask.value || this.transcriptionFragmentDataTask.value;
 			}
 		});
 		this.frameTask = new Task(this, {
 			autoRun: EF_INTERACTIVE,
 			args: () => [this.unifiedCaptionsDataTask.status, this.ownCurrentTimeMs],
-			task: async () => {
-				await this.unifiedCaptionsDataTask.taskComplete;
+			onError: (error) => {
+				this.frameTask.taskComplete.catch(() => {});
+				if (error instanceof DOMException && error.name === "AbortError" || error instanceof Error && (error.name === "AbortError" || error.message?.includes("signal is aborted") || error.message?.includes("The user aborted a request"))) return;
+				console.error("EFCaptions frameTask error", error);
+			},
+			task: async ([_status, _ownCurrentTimeMs], { signal }) => {
+				try {
+					await this.unifiedCaptionsDataTask.taskComplete;
+				} catch (error) {
+					if (error instanceof DOMException && error.name === "AbortError") {
+						signal?.throwIfAborted();
+						return;
+					}
+					throw error;
+				}
+				signal?.throwIfAborted();
 				this.updateTextContainers();
 			}
 		});
@@ -368,6 +392,7 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 	set target(value) {
 		this.targetSelector = value;
 	}
+	#cachedIntrinsicDurationMs = null;
 	render() {
 		return html`<slot></slot>`;
 	}
@@ -379,30 +404,78 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 	captionsPath() {
 		if (!this.targetElement) return null;
 		if (this.targetElement.assetId) return `${this.apiHost}/api/v1/caption_files/${this.targetElement.assetId}`;
-		return `/@ef-captions/${this.targetElement.src}`;
+		const targetSrc = this.targetElement.src;
+		let normalizedSrc = targetSrc.startsWith("/") ? targetSrc.slice(1) : targetSrc;
+		normalizedSrc = normalizedSrc.replace(/^\/+/, "");
+		return `/api/v1/assets/local/captions?src=${encodeURIComponent(normalizedSrc)}`;
 	}
 	transcriptionFragmentPath(transcriptionId, fragmentIndex) {
 		return `${this.apiHost}/api/v1/transcriptions/${transcriptionId}/fragments/${fragmentIndex}`;
 	}
+	#rootTimegroupUpdateController;
 	connectedCallback() {
 		super.connectedCallback();
 		const target = this.targetSelector ? document.getElementById(this.targetSelector) : null;
 		if (target && (target instanceof EFAudio || target instanceof EFVideo)) new CrossUpdateController(target, this);
 		else if (this.hasCustomCaptionsData && this.rootTimegroup) new CrossUpdateController(this.rootTimegroup, this);
+		if (this.rootTimegroup) {
+			this.#rootTimegroupUpdateController = {
+				hostUpdated: () => {
+					Promise.resolve().then(() => {
+						this.updateTextContainers();
+					});
+				},
+				hostDisconnected: () => {
+					this.#rootTimegroupUpdateController = void 0;
+				}
+			};
+			this.rootTimegroup.addController(this.#rootTimegroupUpdateController);
+		}
 		new MutationObserver(() => {
 			if (this.style.display === "none") {
 				this.style.removeProperty("display");
 				this.style.opacity = "0";
 				this.style.pointerEvents = "none";
+			} else if (!this.style.display || this.style.display === "") {
+				this.style.removeProperty("opacity");
+				this.style.removeProperty("pointer-events");
 			}
 		}).observe(this, {
 			attributes: true,
 			attributeFilter: ["style"]
 		});
 	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this.#rootTimegroupUpdateController && this.rootTimegroup) {
+			this.rootTimegroup.removeController(this.#rootTimegroupUpdateController);
+			this.#rootTimegroupUpdateController = void 0;
+		}
+	}
 	updated(changedProperties) {
+		if (this.rootTimegroup && !this.#rootTimegroupUpdateController) {
+			this.#rootTimegroupUpdateController = {
+				hostUpdated: () => {
+					Promise.resolve().then(() => {
+						this.updateTextContainers();
+					});
+				},
+				hostDisconnected: () => {
+					this.#rootTimegroupUpdateController = void 0;
+				}
+			};
+			this.rootTimegroup.addController(this.#rootTimegroupUpdateController);
+		}
+		if (changedProperties.has("rootTimegroup") && this.#rootTimegroupUpdateController) {
+			const oldRootTimegroup = changedProperties.get("rootTimegroup");
+			if (oldRootTimegroup && oldRootTimegroup !== this.rootTimegroup) {
+				oldRootTimegroup.removeController(this.#rootTimegroupUpdateController);
+				this.#rootTimegroupUpdateController = void 0;
+			}
+		}
 		this.updateTextContainers();
 		if (changedProperties.has("captionsData") || changedProperties.has("captionsSrc") || changedProperties.has("captionsScript")) {
+			this.#cachedIntrinsicDurationMs = null;
 			this.requestUpdate("intrinsicDurationMs");
 			flushSequenceDurationCache();
 			flushStartTimeMsCache();
@@ -416,7 +489,16 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 	updateTextContainers() {
 		const captionsData = this.unifiedCaptionsDataTask.value;
 		if (!captionsData) return;
-		const currentTimeSec = this.ownCurrentTimeMs / 1e3;
+		let currentTimeMs = this.ownCurrentTimeMs;
+		if (this.hasCustomCaptionsData && this.parentTimegroup) {
+			const videoElement = Array.from(this.parentTimegroup.children).find((child) => child instanceof EFVideo);
+			if (videoElement) {
+				const sourceInMs = videoElement.sourceInMs ?? 0;
+				currentTimeMs = videoElement.currentSourceTimeMs - sourceInMs;
+				currentTimeMs = Math.max(0, Math.min(currentTimeMs, this.durationMs));
+			}
+		}
+		const currentTimeSec = currentTimeMs / 1e3;
 		const currentWord = captionsData.word_segments.find((word) => currentTimeSec >= word.start && currentTimeSec < word.end);
 		const currentSegment = captionsData.segments.find((segment) => currentTimeSec >= segment.start && currentTimeSec < segment.end);
 		for (const wordContainer of this.activeWordContainers) if (currentWord) {
@@ -520,6 +602,7 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 		return !!(this.captionsData || this.captionsSrc || this.captionsScript);
 	}
 	get intrinsicDurationMs() {
+		if (this.#cachedIntrinsicDurationMs !== null) return this.#cachedIntrinsicDurationMs;
 		let captionsData = null;
 		if (this.captionsData) captionsData = this.captionsData;
 		else if (this.captionsScript) {
@@ -528,11 +611,19 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 				captionsData = JSON.parse(scriptElement.textContent);
 			} catch {}
 		} else if (this.customCaptionsDataTask.value) captionsData = this.customCaptionsDataTask.value;
-		if (!captionsData) return;
-		if (captionsData.segments.length === 0 && captionsData.word_segments.length === 0) return 0;
-		const maxSegmentEnd = captionsData.segments.length > 0 ? Math.max(...captionsData.segments.map((s) => s.end)) : 0;
-		const maxWordEnd = captionsData.word_segments.length > 0 ? Math.max(...captionsData.word_segments.map((w) => w.end)) : 0;
-		return Math.max(maxSegmentEnd, maxWordEnd) * 1e3;
+		if (!captionsData) {
+			if (!this.captionsData && !this.captionsScript && !this.captionsSrc) this.#cachedIntrinsicDurationMs = void 0;
+			return;
+		}
+		let result;
+		if (captionsData.segments.length === 0 && captionsData.word_segments.length === 0) result = 0;
+		else {
+			const maxSegmentEnd = captionsData.segments.length > 0 ? captionsData.segments.reduce((max, s) => s.end > max ? s.end : max, 0) : 0;
+			const maxWordEnd = captionsData.word_segments.length > 0 ? captionsData.word_segments.reduce((max, w) => w.end > max ? w.end : max, 0) : 0;
+			result = Math.max(maxSegmentEnd, maxWordEnd) * 1e3;
+		}
+		this.#cachedIntrinsicDurationMs = result;
+		return result;
 	}
 	get hasOwnDuration() {
 		return !!(this.captionsData || this.captionsScript || this.customCaptionsDataTask.value);