@editframe/elements 0.33.0-beta → 0.34.6-beta

package/dist/elements/EFCaptions.js

@@ -1,13 +1,13 @@
-import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
-import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
 import { EFTemporal, flushStartTimeMsCache } from "./EFTemporal.js";
+import { PRIORITY_CAPTIONS, createFrameTaskWrapper } from "../preview/FrameController.js";
 import { EFSourceMixin } from "./EFSourceMixin.js";
 import { FetchMixin } from "./FetchMixin.js";
+import { AsyncValue } from "./EFMedia.js";
 import { EFAudio } from "./EFAudio.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";
 
@@ -19,239 +19,99 @@ const stopWords = new Set([
 	"?",
 	","
 ]);
-let EFCaptionsActiveWord = class EFCaptionsActiveWord$1 extends EFTemporal(LitElement) {
-	constructor(..._args) {
-		super(..._args);
-		this.wordStartMs = 0;
-		this.wordEndMs = 0;
-		this.wordText = "";
-		this.wordIndex = 0;
-		this.hidden = false;
-	}
-	static {
-		this.styles = [css`
-      :host {
-        display: inline-block;
-        white-space: normal;
-        line-height: 1;
-      }
-      :host([hidden]) {
-        opacity: 0;
-        pointer-events: none;
-      }
-    `];
-	}
-	render() {
-		if (stopWords.has(this.wordText)) {
-			this.hidden = true;
-			return;
+let EFCaptionsActiveWord = class EFCaptionsActiveWord$1 extends HTMLElement {
+	#wordText = "";
+	#wordIndex = 0;
+	constructor() {
+		super();
+		this.style.display = "inline-block";
+		this.style.whiteSpace = "normal";
+		this.style.lineHeight = "1";
+	}
+	set wordText(text) {
+		this.#wordText = text;
+		if (!text || stopWords.has(text)) {
+			this.style.display = "none";
+			this.textContent = "";
+		} else {
+			this.style.display = "inline-block";
+			this.textContent = text;
 		}
-		this.hidden = false;
-		const seedValue = this.wordIndex * 9007 % 233 / 233;
-		this.style.setProperty("--ef-word-seed", seedValue.toString());
-		return html`${this.wordText}`;
 	}
-	get startTimeMs() {
-		return (this.closest("ef-captions")?.startTimeMs || 0) + (this.wordStartMs || 0);
+	get wordText() {
+		return this.#wordText;
 	}
-	get endTimeMs() {
-		return (this.closest("ef-captions")?.startTimeMs || 0) + (this.wordEndMs || 0);
+	set wordIndex(index) {
+		this.#wordIndex = index;
+		const seedValue = index * 9007 % 233 / 233;
+		this.style.setProperty("--ef-word-seed", seedValue.toString());
 	}
-	get durationMs() {
-		return this.wordEndMs - this.wordStartMs;
+	get wordIndex() {
+		return this.#wordIndex;
 	}
 };
-__decorate([property({
-	type: Number,
-	attribute: false
-})], EFCaptionsActiveWord.prototype, "wordStartMs", void 0);
-__decorate([property({
-	type: Number,
-	attribute: false
-})], EFCaptionsActiveWord.prototype, "wordEndMs", void 0);
-__decorate([property({
-	type: String,
-	attribute: false
-})], EFCaptionsActiveWord.prototype, "wordText", void 0);
-__decorate([property({
-	type: Number,
-	attribute: false
-})], EFCaptionsActiveWord.prototype, "wordIndex", void 0);
-__decorate([property({
-	type: Boolean,
-	reflect: true
-})], EFCaptionsActiveWord.prototype, "hidden", void 0);
 EFCaptionsActiveWord = __decorate([customElement("ef-captions-active-word")], EFCaptionsActiveWord);
-let EFCaptionsSegment = class EFCaptionsSegment$1 extends EFTemporal(LitElement) {
-	constructor(..._args2) {
-		super(..._args2);
-		this.segmentStartMs = 0;
-		this.segmentEndMs = 0;
-		this.segmentText = "";
-		this.hidden = false;
-	}
-	static {
-		this.styles = [css`
-      :host {
-        display: inline-block;
-        white-space: normal;
-        line-height: 1;
-      }
-    `];
-	}
-	render() {
-		if (stopWords.has(this.segmentText)) {
-			this.hidden = true;
-			return;
+let EFCaptionsSegment = class EFCaptionsSegment$1 extends HTMLElement {
+	#segmentText = "";
+	constructor() {
+		super();
+		this.style.display = "inline-block";
+		this.style.whiteSpace = "normal";
+		this.style.lineHeight = "1";
+	}
+	set segmentText(text) {
+		this.#segmentText = text;
+		if (!text || stopWords.has(text)) {
+			this.style.display = "none";
+			this.textContent = "";
+		} else {
+			this.style.display = "inline-block";
+			this.textContent = text;
 		}
-		this.hidden = false;
-		return html`${this.segmentText}`;
-	}
-	get startTimeMs() {
-		return (this.closest("ef-captions")?.startTimeMs || 0) + (this.segmentStartMs || 0);
 	}
-	get endTimeMs() {
-		return (this.closest("ef-captions")?.startTimeMs || 0) + (this.segmentEndMs || 0);
-	}
-	get durationMs() {
-		return this.segmentEndMs - this.segmentStartMs;
+	get segmentText() {
+		return this.#segmentText;
 	}
 };
-__decorate([property({
-	type: Number,
-	attribute: false
-})], EFCaptionsSegment.prototype, "segmentStartMs", void 0);
-__decorate([property({
-	type: Number,
-	attribute: false
-})], EFCaptionsSegment.prototype, "segmentEndMs", void 0);
-__decorate([property({
-	type: String,
-	attribute: false
-})], EFCaptionsSegment.prototype, "segmentText", void 0);
-__decorate([property({
-	type: Boolean,
-	reflect: true
-})], EFCaptionsSegment.prototype, "hidden", void 0);
 EFCaptionsSegment = __decorate([customElement("ef-captions-segment")], EFCaptionsSegment);
 let EFCaptionsBeforeActiveWord = class EFCaptionsBeforeActiveWord$1 extends EFCaptionsSegment {
-	constructor(..._args3) {
-		super(..._args3);
-		this.hidden = false;
-		this.segmentText = "";
-		this.segmentStartMs = 0;
-		this.segmentEndMs = 0;
-	}
-	static {
-		this.styles = [css`
-      :host {
-        display: inline-block;
-        white-space: pre;
-        line-height: 1;
-      }
-      :host([hidden]) {
-        opacity: 0;
-        pointer-events: none;
-      }
-    `];
-	}
-	render() {
-		if (stopWords.has(this.segmentText)) {
-			this.hidden = true;
-			return;
+	constructor() {
+		super();
+		this.style.whiteSpace = "pre";
+	}
+	set segmentText(text) {
+		const hasActiveWord = (this.closest("ef-captions")?.querySelector("ef-captions-active-word"))?.wordText;
+		const finalText = text && hasActiveWord ? text + " " : text;
+		if (!finalText || stopWords.has(finalText)) {
+			this.style.display = "none";
+			this.textContent = "";
+		} else {
+			this.style.display = "inline-block";
+			this.textContent = finalText;
 		}
-		this.hidden = false;
-		const activeWord = this.closest("ef-captions")?.querySelector("ef-captions-active-word");
-		const hasActiveWord = activeWord?.wordText && !activeWord.hidden;
-		return html`${this.segmentText}${hasActiveWord ? " " : ""}`;
-	}
-	get startTimeMs() {
-		return (this.closest("ef-captions")?.startTimeMs || 0) + (this.segmentStartMs || 0);
-	}
-	get endTimeMs() {
-		return (this.closest("ef-captions")?.startTimeMs || 0) + (this.segmentEndMs || 0);
-	}
-	get durationMs() {
-		return this.segmentEndMs - this.segmentStartMs;
 	}
 };
-__decorate([property({
-	type: Boolean,
-	reflect: true
-})], EFCaptionsBeforeActiveWord.prototype, "hidden", void 0);
-__decorate([property({
-	type: String,
-	attribute: false
-})], EFCaptionsBeforeActiveWord.prototype, "segmentText", void 0);
-__decorate([property({
-	type: Number,
-	attribute: false
-})], EFCaptionsBeforeActiveWord.prototype, "segmentStartMs", void 0);
-__decorate([property({
-	type: Number,
-	attribute: false
-})], EFCaptionsBeforeActiveWord.prototype, "segmentEndMs", void 0);
 EFCaptionsBeforeActiveWord = __decorate([customElement("ef-captions-before-active-word")], EFCaptionsBeforeActiveWord);
 let EFCaptionsAfterActiveWord = class EFCaptionsAfterActiveWord$1 extends EFCaptionsSegment {
-	constructor(..._args4) {
-		super(..._args4);
-		this.hidden = false;
-		this.segmentText = "";
-		this.segmentStartMs = 0;
-		this.segmentEndMs = 0;
-	}
-	static {
-		this.styles = [css`
-      :host {
-        display: inline-block;
-        white-space: pre;
-        line-height: 1;
-      }
-      :host([hidden]) {
-        opacity: 0;
-        pointer-events: none;
-      }
-    `];
-	}
-	render() {
-		if (stopWords.has(this.segmentText)) {
-			this.hidden = true;
-			return;
+	constructor() {
+		super();
+		this.style.whiteSpace = "pre";
+	}
+	set segmentText(text) {
+		const finalText = text ? " " + text : text;
+		if (!finalText || stopWords.has(finalText)) {
+			this.style.display = "none";
+			this.textContent = "";
+		} else {
+			this.style.display = "inline-block";
+			this.textContent = finalText;
 		}
-		this.hidden = false;
-		const activeWord = this.closest("ef-captions")?.querySelector("ef-captions-active-word");
-		return html`${activeWord?.wordText && !activeWord.hidden ? " " : ""}${this.segmentText}`;
-	}
-	get startTimeMs() {
-		return (this.closest("ef-captions")?.startTimeMs || 0) + (this.segmentStartMs || 0);
-	}
-	get endTimeMs() {
-		return (this.closest("ef-captions")?.startTimeMs || 0) + (this.segmentEndMs || 0);
-	}
-	get durationMs() {
-		return this.segmentEndMs - this.segmentStartMs;
 	}
 };
-__decorate([property({
-	type: Boolean,
-	reflect: true
-})], EFCaptionsAfterActiveWord.prototype, "hidden", void 0);
-__decorate([property({
-	type: String,
-	attribute: false
-})], EFCaptionsAfterActiveWord.prototype, "segmentText", void 0);
-__decorate([property({
-	type: Number,
-	attribute: false
-})], EFCaptionsAfterActiveWord.prototype, "segmentStartMs", void 0);
-__decorate([property({
-	type: Number,
-	attribute: false
-})], EFCaptionsAfterActiveWord.prototype, "segmentEndMs", void 0);
 EFCaptionsAfterActiveWord = __decorate([customElement("ef-captions-after-active-word")], EFCaptionsAfterActiveWord);
 let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), { assetType: "caption_files" }) {
-	constructor(..._args5) {
-		super(..._args5);
+	constructor(..._args) {
+		super(..._args);
 		this.targetSelector = "";
 		this.wordStyle = "";
 		this.captionsSrc = "";
@@ -261,118 +121,8 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 		this.segmentContainers = this.getElementsByTagName("ef-captions-segment");
 		this.beforeActiveWordContainers = this.getElementsByTagName("ef-captions-before-active-word");
 		this.afterActiveWordContainers = this.getElementsByTagName("ef-captions-after-active-word");
-		this.md5SumLoader = new Task(this, {
-			autoRun: false,
-			args: () => [this.target, this.fetch],
-			task: async ([_target, fetch], { signal }) => {
-				if (!this.targetElement) return null;
-				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, {
-			autoRun: EF_INTERACTIVE,
-			args: () => [
-				this.transcriptionsPath(),
-				this.fetch,
-				this.hasCustomCaptionsData
-			],
-			task: async ([transcriptionsPath, fetch, hasCustomData], { signal }) => {
-				if (hasCustomData || !transcriptionsPath) return null;
-				return (await fetch(transcriptionsPath, { signal })).json();
-			}
-		});
-		this.fragmentIndexTask = new Task(this, {
-			autoRun: EF_INTERACTIVE,
-			args: () => [this.transcriptionDataTask.value, this.ownCurrentTimeMs],
-			task: async ([transcription, ownCurrentTimeMs], { signal }) => {
-				signal?.throwIfAborted();
-				if (!transcription) return null;
-				return Math.floor(ownCurrentTimeMs / transcription.work_slice_ms);
-			}
-		});
-		this.customCaptionsDataTask = new Task(this, {
-			autoRun: EF_INTERACTIVE,
-			args: () => [
-				this.captionsSrc,
-				this.captionsData,
-				this.captionsScript,
-				this.fetch
-			],
-			task: async ([captionsSrc, captionsData, captionsScript, fetch], { signal }) => {
-				if (captionsData) return captionsData;
-				if (captionsScript) {
-					const scriptElement = document.getElementById(captionsScript);
-					if (scriptElement?.textContent) try {
-						return JSON.parse(scriptElement.textContent);
-					} catch (error) {
-						console.error(`Failed to parse captions from script #${captionsScript}:`, error);
-						return null;
-					}
-				}
-				if (captionsSrc) try {
-					return await (await fetch(captionsSrc, { signal })).json();
-				} catch (error) {
-					console.error(`Failed to load captions from ${captionsSrc}:`, error);
-					return null;
-				}
-				return null;
-			}
-		});
-		this.transcriptionFragmentDataTask = new Task(this, {
-			autoRun: EF_INTERACTIVE,
-			args: () => [
-				this.transcriptionDataTask.value,
-				this.fragmentIndexTask.value,
-				this.fetch
-			],
-			task: async ([transcription, fragmentIndex, fetch], { signal }) => {
-				if (transcription === null || transcription === void 0 || fragmentIndex === null || fragmentIndex === void 0) return null;
-				return (await fetch(this.transcriptionFragmentPath(transcription.id, fragmentIndex), { signal })).json();
-			}
-		});
-		this.unifiedCaptionsDataTask = new Task(this, {
-			autoRun: EF_INTERACTIVE,
-			args: () => [this.customCaptionsDataTask.value, this.transcriptionFragmentDataTask.value],
-			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],
-			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();
-			}
-		});
+		this.unifiedCaptionsDataTask = new AsyncValue();
+		this.frameTask = createFrameTaskWrapper(this);
 	}
 	static {
 		this.styles = [css`
@@ -409,12 +159,103 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 		normalizedSrc = normalizedSrc.replace(/^\/+/, "");
 		return `/api/v1/assets/local/captions?src=${encodeURIComponent(normalizedSrc)}`;
 	}
-	transcriptionFragmentPath(transcriptionId, fragmentIndex) {
-		return `${this.apiHost}/api/v1/transcriptions/${transcriptionId}/fragments/${fragmentIndex}`;
+	#captionsDataLoaded = false;
+	#captionsDataPromise = null;
+	#captionsDataValue = null;
+	#transcriptionData = null;
+	/**
+	* Load captions data from all possible sources
+	*/
+	async loadCaptionsData(signal) {
+		if (this.#captionsDataLoaded && this.#captionsDataValue) return this.#captionsDataValue;
+		if (this.#captionsDataPromise) return this.#captionsDataPromise;
+		this.unifiedCaptionsDataTask.startPending();
+		this.#captionsDataPromise = this.#doLoadCaptionsData(signal);
+		try {
+			this.#captionsDataValue = await this.#captionsDataPromise;
+			this.#captionsDataLoaded = true;
+			if (this.#captionsDataValue) this.unifiedCaptionsDataTask.setValue(this.#captionsDataValue);
+			return this.#captionsDataValue;
+		} catch (error) {
+			if (error instanceof DOMException && error.name === "AbortError") throw error;
+			console.error("Failed to load captions data:", error);
+			return null;
+		} finally {
+			this.#captionsDataPromise = null;
+		}
+	}
+	async #doLoadCaptionsData(signal) {
+		if (this.captionsData) return this.captionsData;
+		if (this.captionsScript) {
+			const scriptElement = document.getElementById(this.captionsScript);
+			if (scriptElement?.textContent) try {
+				return JSON.parse(scriptElement.textContent);
+			} catch (error) {
+				console.error(`Failed to parse captions from script #${this.captionsScript}:`, error);
+			}
+		}
+		if (this.captionsSrc) try {
+			return await (await this.fetch(this.captionsSrc, { signal })).json();
+		} catch (error) {
+			if (error instanceof DOMException && error.name === "AbortError") throw error;
+			console.error(`Failed to load captions from ${this.captionsSrc}:`, error);
+		}
+		if (this.targetElement && !this.hasCustomCaptionsData) {
+			const transcriptionPath = this.transcriptionsPath();
+			if (transcriptionPath) try {
+				this.#transcriptionData = await (await this.fetch(transcriptionPath, { signal })).json();
+				signal?.throwIfAborted();
+				if (this.#transcriptionData) return this.#loadTranscriptionFragment(signal);
+			} catch (error) {
+				if (error instanceof DOMException && error.name === "AbortError") throw error;
+			}
+		}
+		return null;
+	}
+	async #loadTranscriptionFragment(signal) {
+		if (!this.#transcriptionData) return null;
+		const fragmentIndex = Math.floor(this.ownCurrentTimeMs / this.#transcriptionData.work_slice_ms);
+		const fragmentPath = `${this.apiHost}/api/v1/transcriptions/${this.#transcriptionData.id}/fragments/${fragmentIndex}`;
+		try {
+			return await (await this.fetch(fragmentPath, { signal })).json();
+		} catch (error) {
+			if (error instanceof DOMException && error.name === "AbortError") throw error;
+			console.error("Failed to load transcription fragment:", error);
+			return null;
+		}
+	}
+	/**
+	* Query readiness state for a given time.
+	* @implements FrameRenderable
+	*/
+	getFrameState(_timeMs) {
+		const hasData = this.#captionsDataLoaded && this.#captionsDataValue !== null;
+		return {
+			needsPreparation: !hasData,
+			isReady: hasData,
+			priority: PRIORITY_CAPTIONS
+		};
+	}
+	/**
+	* Async preparation - waits for captions data to load.
+	* @implements FrameRenderable
+	*/
+	async prepareFrame(_timeMs, signal) {
+		await this.loadCaptionsData(signal);
+		signal.throwIfAborted();
+	}
+	/**
+	* Synchronous render - updates caption text containers.
+	* Sets textContent directly on child elements (light DOM).
+	* @implements FrameRenderable
+	*/
+	renderFrame(_timeMs) {
+		this.updateTextContainers();
 	}
 	#rootTimegroupUpdateController;
 	connectedCallback() {
 		super.connectedCallback();
+		this.loadCaptionsData().catch(() => {});
 		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);
@@ -476,6 +317,9 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 		this.updateTextContainers();
 		if (changedProperties.has("captionsData") || changedProperties.has("captionsSrc") || changedProperties.has("captionsScript")) {
 			this.#cachedIntrinsicDurationMs = null;
+			this.#captionsDataLoaded = false;
+			this.#captionsDataValue = null;
+			this.loadCaptionsData().catch(() => {});
 			this.requestUpdate("intrinsicDurationMs");
 			flushSequenceDurationCache();
 			flushStartTimeMsCache();
@@ -487,7 +331,7 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 		if (changedProperties.has("ownCurrentTimeMs")) this.updateTextContainers();
 	}
 	updateTextContainers() {
-		const captionsData = this.unifiedCaptionsDataTask.value;
+		const captionsData = this.#captionsDataValue;
 		if (!captionsData) return;
 		let currentTimeMs = this.ownCurrentTimeMs;
 		if (this.hasCustomCaptionsData && this.parentTimegroup) {
@@ -502,94 +346,36 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 		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) {
-			wordContainer.wordText = currentWord.text;
-			wordContainer.wordStartMs = currentWord.start * 1e3;
-			wordContainer.wordEndMs = currentWord.end * 1e3;
 			const wordIndex = captionsData.word_segments.findIndex((w) => w.start === currentWord.start && w.end === currentWord.end && w.text === currentWord.text);
 			wordContainer.wordIndex = wordIndex >= 0 ? wordIndex : 0;
-			wordContainer.requestUpdate();
-		} else {
-			wordContainer.wordText = "";
-			wordContainer.wordStartMs = 0;
-			wordContainer.wordEndMs = 0;
-			wordContainer.requestUpdate();
-		}
-		for (const segmentContainer of this.segmentContainers) {
-			if (currentSegment) {
-				segmentContainer.segmentText = currentSegment.text;
-				segmentContainer.segmentStartMs = currentSegment.start * 1e3;
-				segmentContainer.segmentEndMs = currentSegment.end * 1e3;
-			} else {
-				segmentContainer.segmentText = "";
-				segmentContainer.segmentStartMs = 0;
-				segmentContainer.segmentEndMs = 0;
-			}
-			segmentContainer.requestUpdate();
-		}
+			wordContainer.wordText = currentWord.text;
+		} else wordContainer.wordText = "";
+		for (const segmentContainer of this.segmentContainers) if (currentSegment) segmentContainer.segmentText = currentSegment.text;
+		else segmentContainer.segmentText = "";
 		if (currentWord && currentSegment) {
 			const segmentWords = captionsData.word_segments.filter((word) => word.start >= currentSegment.start && word.end <= currentSegment.end);
 			const currentWordIndex = segmentWords.findIndex((word) => word.start === currentWord.start && word.end === currentWord.end);
 			if (currentWordIndex !== -1) {
 				const beforeWords = segmentWords.slice(0, currentWordIndex).map((w) => w.text.trim()).join(" ");
 				const afterWords = segmentWords.slice(currentWordIndex + 1).map((w) => w.text.trim()).join(" ");
-				for (const container of this.beforeActiveWordContainers) {
-					container.segmentText = beforeWords;
-					container.segmentStartMs = currentWord.start * 1e3;
-					container.segmentEndMs = currentWord.end * 1e3;
-					container.requestUpdate();
-				}
-				for (const container of this.afterActiveWordContainers) {
-					container.segmentText = afterWords;
-					container.segmentStartMs = currentWord.start * 1e3;
-					container.segmentEndMs = currentWord.end * 1e3;
-					container.requestUpdate();
-				}
+				for (const container of this.beforeActiveWordContainers) container.segmentText = beforeWords;
+				for (const container of this.afterActiveWordContainers) container.segmentText = afterWords;
 			}
 		} else if (currentSegment) {
 			const segmentWords = captionsData.word_segments.filter((word) => word.start >= currentSegment.start && word.end <= currentSegment.end);
 			const firstWord = segmentWords[0];
 			if (firstWord && currentTimeSec < firstWord.start) {
 				const allWords = segmentWords.map((w) => w.text.trim()).join(" ");
-				for (const container of this.beforeActiveWordContainers) {
-					container.segmentText = "";
-					container.segmentStartMs = currentSegment.start * 1e3;
-					container.segmentEndMs = currentSegment.end * 1e3;
-					container.requestUpdate();
-				}
-				for (const container of this.afterActiveWordContainers) {
-					container.segmentText = allWords;
-					container.segmentStartMs = currentSegment.start * 1e3;
-					container.segmentEndMs = currentSegment.end * 1e3;
-					container.requestUpdate();
-				}
+				for (const container of this.beforeActiveWordContainers) container.segmentText = "";
+				for (const container of this.afterActiveWordContainers) container.segmentText = allWords;
 			} else {
 				const allCompletedWords = segmentWords.map((w) => w.text.trim()).join(" ");
-				for (const container of this.beforeActiveWordContainers) {
-					container.segmentText = allCompletedWords;
-					container.segmentStartMs = currentSegment.start * 1e3;
-					container.segmentEndMs = currentSegment.end * 1e3;
-					container.requestUpdate();
-				}
-				for (const container of this.afterActiveWordContainers) {
-					container.segmentText = "";
-					container.segmentStartMs = currentSegment.start * 1e3;
-					container.segmentEndMs = currentSegment.end * 1e3;
-					container.requestUpdate();
-				}
+				for (const container of this.beforeActiveWordContainers) container.segmentText = allCompletedWords;
+				for (const container of this.afterActiveWordContainers) container.segmentText = "";
 			}
 		} else {
-			for (const container of this.beforeActiveWordContainers) {
-				container.segmentText = "";
-				container.segmentStartMs = 0;
-				container.segmentEndMs = 0;
-				container.requestUpdate();
-			}
-			for (const container of this.afterActiveWordContainers) {
-				container.segmentText = "";
-				container.segmentStartMs = 0;
-				container.segmentEndMs = 0;
-				container.requestUpdate();
-			}
+			for (const container of this.beforeActiveWordContainers) container.segmentText = "";
+			for (const container of this.afterActiveWordContainers) container.segmentText = "";
 		}
 	}
 	get targetElement() {
@@ -610,7 +396,7 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 			if (scriptElement?.textContent) try {
 				captionsData = JSON.parse(scriptElement.textContent);
 			} catch {}
-		} else if (this.customCaptionsDataTask.value) captionsData = this.customCaptionsDataTask.value;
+		} else if (this.#captionsDataValue) captionsData = this.#captionsDataValue;
 		if (!captionsData) {
 			if (!this.captionsData && !this.captionsScript && !this.captionsSrc) this.#cachedIntrinsicDurationMs = void 0;
 			return;
@@ -626,7 +412,7 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 		return result;
 	}
 	get hasOwnDuration() {
-		return !!(this.captionsData || this.captionsScript || this.customCaptionsDataTask.value);
+		return !!(this.captionsData || this.captionsScript || this.#captionsDataValue);
 	}
 };
 __decorate([property({