@editframe/elements 0.20.4-beta.0 → 0.23.6-beta.0

package/dist/elements/EFCaptions.js

@@ -1,6 +1,7 @@
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
-import { EFSourceMixin } from "./EFSourceMixin.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
 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";
@@ -9,15 +10,14 @@ import { CrossUpdateController } from "./CrossUpdateController.js";
 import { Task, TaskStatus } from "@lit/task";
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import _decorate from "@oxc-project/runtime/helpers/decorate";
-const stopWords = new Set([
+var stopWords = new Set([
 	"",
 	".",
 	"!",
 	"?",
 	","
 ]);
-let EFCaptionsActiveWord = class EFCaptionsActiveWord$1 extends EFTemporal(LitElement) {
+var EFCaptionsActiveWord = class EFCaptionsActiveWord$1 extends EFTemporal(LitElement) {
 	constructor(..._args) {
 		super(..._args);
 		this.wordStartMs = 0;
@@ -30,61 +30,57 @@ let EFCaptionsActiveWord = class EFCaptionsActiveWord$1 extends EFTemporal(LitEl
 		this.styles = [css`
       :host {
         display: inline-block;
-        white-space: pre;
-        transform-origin: center;
+        white-space: normal;
+        line-height: 1;
       }
       :host([hidden]) {
-        display: none;
+        opacity: 0;
+        pointer-events: none;
       }
     `];
 	}
 	render() {
 		if (stopWords.has(this.wordText)) {
 			this.hidden = true;
-			return void 0;
+			return;
 		}
 		this.hidden = false;
-		const seed = this.wordIndex * 9007 % 233;
-		const seedValue = seed / 233;
+		const seedValue = this.wordIndex * 9007 % 233 / 233;
 		this.style.setProperty("--ef-word-seed", seedValue.toString());
-		return html` ${this.wordText.trim()} `;
+		return html`${this.wordText}`;
 	}
 	get startTimeMs() {
-		const parentCaptions = this.closest("ef-captions");
-		const parentStartTime = parentCaptions?.startTimeMs || 0;
-		return parentStartTime + (this.wordStartMs || 0);
+		return (this.closest("ef-captions")?.startTimeMs || 0) + (this.wordStartMs || 0);
 	}
 	get endTimeMs() {
-		const parentCaptions = this.closest("ef-captions");
-		const parentStartTime = parentCaptions?.startTimeMs || 0;
-		return parentStartTime + (this.wordEndMs || 0);
+		return (this.closest("ef-captions")?.startTimeMs || 0) + (this.wordEndMs || 0);
 	}
 	get durationMs() {
 		return this.wordEndMs - this.wordStartMs;
 	}
 };
-_decorate([property({
+__decorate([property({
 	type: Number,
 	attribute: false
 })], EFCaptionsActiveWord.prototype, "wordStartMs", void 0);
-_decorate([property({
+__decorate([property({
 	type: Number,
 	attribute: false
 })], EFCaptionsActiveWord.prototype, "wordEndMs", void 0);
-_decorate([property({
+__decorate([property({
 	type: String,
 	attribute: false
 })], EFCaptionsActiveWord.prototype, "wordText", void 0);
-_decorate([property({
+__decorate([property({
 	type: Number,
 	attribute: false
 })], EFCaptionsActiveWord.prototype, "wordIndex", void 0);
-_decorate([property({
+__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) {
+EFCaptionsActiveWord = __decorate([customElement("ef-captions-active-word")], EFCaptionsActiveWord);
+var EFCaptionsSegment = class EFCaptionsSegment$1 extends EFTemporal(LitElement) {
 	constructor(..._args2) {
 		super(..._args2);
 		this.segmentStartMs = 0;
@@ -95,53 +91,48 @@ let EFCaptionsSegment = class EFCaptionsSegment$1 extends EFTemporal(LitElement)
 	static {
 		this.styles = [css`
       :host {
-        display: block;
-      }
-      :host([hidden]) {
-        display: none;
+        display: inline-block;
+        white-space: normal;
+        line-height: 1;
       }
     `];
 	}
 	render() {
 		if (stopWords.has(this.segmentText)) {
 			this.hidden = true;
-			return void 0;
+			return;
 		}
 		this.hidden = false;
 		return html`${this.segmentText}`;
 	}
 	get startTimeMs() {
-		const parentCaptions = this.closest("ef-captions");
-		const parentStartTime = parentCaptions?.startTimeMs || 0;
-		return parentStartTime + (this.segmentStartMs || 0);
+		return (this.closest("ef-captions")?.startTimeMs || 0) + (this.segmentStartMs || 0);
 	}
 	get endTimeMs() {
-		const parentCaptions = this.closest("ef-captions");
-		const parentStartTime = parentCaptions?.startTimeMs || 0;
-		return parentStartTime + (this.segmentEndMs || 0);
+		return (this.closest("ef-captions")?.startTimeMs || 0) + (this.segmentEndMs || 0);
 	}
 	get durationMs() {
 		return this.segmentEndMs - this.segmentStartMs;
 	}
 };
-_decorate([property({
+__decorate([property({
 	type: Number,
 	attribute: false
 })], EFCaptionsSegment.prototype, "segmentStartMs", void 0);
-_decorate([property({
+__decorate([property({
 	type: Number,
 	attribute: false
 })], EFCaptionsSegment.prototype, "segmentEndMs", void 0);
-_decorate([property({
+__decorate([property({
 	type: String,
 	attribute: false
 })], EFCaptionsSegment.prototype, "segmentText", void 0);
-_decorate([property({
+__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 {
+EFCaptionsSegment = __decorate([customElement("ef-captions-segment")], EFCaptionsSegment);
+var EFCaptionsBeforeActiveWord = class EFCaptionsBeforeActiveWord$1 extends EFCaptionsSegment {
 	constructor(..._args3) {
 		super(..._args3);
 		this.hidden = false;
@@ -154,52 +145,52 @@ let EFCaptionsBeforeActiveWord = class EFCaptionsBeforeActiveWord$1 extends EFCa
       :host {
         display: inline-block;
         white-space: pre;
+        line-height: 1;
       }
       :host([hidden]) {
-        display: none;
+        opacity: 0;
+        pointer-events: none;
       }
     `];
 	}
 	render() {
 		if (stopWords.has(this.segmentText)) {
 			this.hidden = true;
-			return void 0;
+			return;
 		}
 		this.hidden = false;
-		return html` ${this.segmentText}`;
+		const activeWord = this.closest("ef-captions")?.querySelector("ef-captions-active-word");
+		const hasActiveWord = activeWord?.wordText && !activeWord.hidden;
+		return html`${this.segmentText}${hasActiveWord ? " " : ""}`;
 	}
 	get startTimeMs() {
-		const parentCaptions = this.closest("ef-captions");
-		const parentStartTime = parentCaptions?.startTimeMs || 0;
-		return parentStartTime + (this.segmentStartMs || 0);
+		return (this.closest("ef-captions")?.startTimeMs || 0) + (this.segmentStartMs || 0);
 	}
 	get endTimeMs() {
-		const parentCaptions = this.closest("ef-captions");
-		const parentStartTime = parentCaptions?.startTimeMs || 0;
-		return parentStartTime + (this.segmentEndMs || 0);
+		return (this.closest("ef-captions")?.startTimeMs || 0) + (this.segmentEndMs || 0);
 	}
 	get durationMs() {
 		return this.segmentEndMs - this.segmentStartMs;
 	}
 };
-_decorate([property({
+__decorate([property({
 	type: Boolean,
 	reflect: true
 })], EFCaptionsBeforeActiveWord.prototype, "hidden", void 0);
-_decorate([property({
+__decorate([property({
 	type: String,
 	attribute: false
 })], EFCaptionsBeforeActiveWord.prototype, "segmentText", void 0);
-_decorate([property({
+__decorate([property({
 	type: Number,
 	attribute: false
 })], EFCaptionsBeforeActiveWord.prototype, "segmentStartMs", void 0);
-_decorate([property({
+__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 {
+EFCaptionsBeforeActiveWord = __decorate([customElement("ef-captions-before-active-word")], EFCaptionsBeforeActiveWord);
+var EFCaptionsAfterActiveWord = class EFCaptionsAfterActiveWord$1 extends EFCaptionsSegment {
 	constructor(..._args4) {
 		super(..._args4);
 		this.hidden = false;
@@ -212,56 +203,53 @@ let EFCaptionsAfterActiveWord = class EFCaptionsAfterActiveWord$1 extends EFCapt
       :host {
         display: inline-block;
         white-space: pre;
+        line-height: 1;
       }
       :host([hidden]) {
-        display: none;
+        opacity: 0;
+        pointer-events: none;
       }
     `];
 	}
 	render() {
 		if (stopWords.has(this.segmentText)) {
 			this.hidden = true;
-			return void 0;
+			return;
 		}
 		this.hidden = false;
-		return html`${this.segmentText} `;
+		const activeWord = this.closest("ef-captions")?.querySelector("ef-captions-active-word");
+		return html`${activeWord?.wordText && !activeWord.hidden ? " " : ""}${this.segmentText}`;
 	}
 	get startTimeMs() {
-		const parentCaptions = this.closest("ef-captions");
-		const parentStartTime = parentCaptions?.startTimeMs || 0;
-		return parentStartTime + (this.segmentStartMs || 0);
+		return (this.closest("ef-captions")?.startTimeMs || 0) + (this.segmentStartMs || 0);
 	}
 	get endTimeMs() {
-		const parentCaptions = this.closest("ef-captions");
-		const parentStartTime = parentCaptions?.startTimeMs || 0;
-		return parentStartTime + (this.segmentEndMs || 0);
+		return (this.closest("ef-captions")?.startTimeMs || 0) + (this.segmentEndMs || 0);
 	}
 	get durationMs() {
 		return this.segmentEndMs - this.segmentStartMs;
 	}
 };
-_decorate([property({
+__decorate([property({
 	type: Boolean,
 	reflect: true
 })], EFCaptionsAfterActiveWord.prototype, "hidden", void 0);
-_decorate([property({
+__decorate([property({
 	type: String,
 	attribute: false
 })], EFCaptionsAfterActiveWord.prototype, "segmentText", void 0);
-_decorate([property({
+__decorate([property({
 	type: Number,
 	attribute: false
 })], EFCaptionsAfterActiveWord.prototype, "segmentStartMs", void 0);
-_decorate([property({
+__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" }) {
+EFCaptionsAfterActiveWord = __decorate([customElement("ef-captions-after-active-word")], EFCaptionsAfterActiveWord);
+var EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(LitElement)), { assetType: "caption_files" }) {
 	constructor(..._args5) {
 		super(..._args5);
-		this.displayMode = "segment";
-		this.contextWords = 3;
 		this.targetSelector = "";
 		this.wordStyle = "";
 		this.captionsSrc = "";
@@ -276,12 +264,10 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 			args: () => [this.target, this.fetch],
 			task: async ([_target, fetch], { signal }) => {
 				if (!this.targetElement) return null;
-				const md5Path = `/@ef-asset/${this.targetElement.src ?? ""}`;
-				const response = await fetch(md5Path, {
+				return (await fetch(`/@ef-asset/${this.targetElement.src ?? ""}`, {
 					method: "HEAD",
 					signal
-				});
-				return response.headers.get("etag") ?? void 0;
+				})).headers.get("etag") ?? void 0;
 			}
 		});
 		this.transcriptionDataTask = new Task(this, {
@@ -293,8 +279,7 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 			],
 			task: async ([transcriptionsPath, fetch, hasCustomData], { signal }) => {
 				if (hasCustomData || !transcriptionsPath) return null;
-				const response = await fetch(transcriptionsPath, { signal });
-				return response.json();
+				return (await fetch(transcriptionsPath, { signal })).json();
 			}
 		});
 		this.fragmentIndexTask = new Task(this, {
@@ -302,8 +287,7 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 			args: () => [this.transcriptionDataTask.value, this.ownCurrentTimeMs],
 			task: async ([transcription, ownCurrentTimeMs]) => {
 				if (!transcription) return null;
-				const fragmentIndex = Math.floor(ownCurrentTimeMs / transcription.work_slice_ms);
-				return fragmentIndex;
+				return Math.floor(ownCurrentTimeMs / transcription.work_slice_ms);
 			}
 		});
 		this.customCaptionsDataTask = new Task(this, {
@@ -326,8 +310,7 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 					}
 				}
 				if (captionsSrc) try {
-					const response = await fetch(captionsSrc, { signal });
-					return await response.json();
+					return await (await fetch(captionsSrc, { signal })).json();
 				} catch (error) {
 					console.error(`Failed to load captions from ${captionsSrc}:`, error);
 					return null;
@@ -344,9 +327,7 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 			],
 			task: async ([transcription, fragmentIndex, fetch], { signal }) => {
 				if (transcription === null || transcription === void 0 || fragmentIndex === null || fragmentIndex === void 0) return null;
-				const fragmentPath = this.transcriptionFragmentPath(transcription.id, fragmentIndex);
-				const response = await fetch(fragmentPath, { signal });
-				return response.json();
+				return (await fetch(this.transcriptionFragmentPath(transcription.id, fragmentIndex), { signal })).json();
 			}
 		});
 		this.unifiedCaptionsDataTask = new Task(this, {
@@ -360,9 +341,10 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 		});
 		this.frameTask = new Task(this, {
 			autoRun: EF_INTERACTIVE,
-			args: () => [this.unifiedCaptionsDataTask.status],
+			args: () => [this.unifiedCaptionsDataTask.status, this.ownCurrentTimeMs],
 			task: async () => {
 				await this.unifiedCaptionsDataTask.taskComplete;
+				this.updateTextContainers();
 			}
 		});
 	}
@@ -370,22 +352,15 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 		this.styles = [css`
       :host {
         display: inline-flex;
-        width: fit-content;
-        align-items: baseline;
+        white-space: normal;
+        line-height: 1;
+        gap: 0;
       }
       ::slotted(*) {
+        display: inline-block;
         margin: 0;
         padding: 0;
       }
-      ::slotted(ef-captions-active-word) {
-        min-width: 0.5ch; /* Maintain minimum width when empty */
-        min-height: 1em; /* Maintain height for baseline alignment */
-      }
-      ::slotted(ef-captions-active-word[hidden]) {
-        opacity: 0; /* Hide when empty but maintain layout */
-        min-width: 0.5ch;
-        min-height: 1em;
-      }
     `];
 	}
 	set target(value) {
@@ -402,8 +377,7 @@ 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}`;
-		const targetSrc = this.targetElement.src;
-		return `/@ef-captions/${targetSrc}`;
+		return `/@ef-captions/${this.targetElement.src}`;
 	}
 	transcriptionFragmentPath(transcriptionId, fragmentIndex) {
 		return `${this.apiHost}/api/v1/transcriptions/${transcriptionId}/fragments/${fragmentIndex}`;
@@ -413,6 +387,16 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 		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);
+		new MutationObserver(() => {
+			if (this.style.display === "none") {
+				this.style.removeProperty("display");
+				this.style.opacity = "0";
+				this.style.pointerEvents = "none";
+			}
+		}).observe(this, {
+			attributes: true,
+			attributeFilter: ["style"]
+		});
 	}
 	updated(changedProperties) {
 		this.updateTextContainers();
@@ -430,8 +414,7 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 	updateTextContainers() {
 		const captionsData = this.unifiedCaptionsDataTask.value;
 		if (!captionsData) return;
-		const currentTimeMs = this.targetElement ? this.targetElement.currentSourceTimeMs : this.ownCurrentTimeMs;
-		const currentTimeSec = currentTimeMs / 1e3;
+		const currentTimeSec = this.ownCurrentTimeMs / 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) {
@@ -447,14 +430,17 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 			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;
+		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();
 		}
 		if (currentWord && currentSegment) {
 			const segmentWords = captionsData.word_segments.filter((word) => word.start >= currentSegment.start && word.end <= currentSegment.end);
@@ -466,28 +452,31 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 					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();
 				}
 			}
 		} else if (currentSegment) {
 			const segmentWords = captionsData.word_segments.filter((word) => word.start >= currentSegment.start && word.end <= currentSegment.end);
 			const firstWord = segmentWords[0];
-			const isBeforeFirstWord = firstWord && currentTimeSec < firstWord.start;
-			if (isBeforeFirstWord) {
+			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();
 				}
 			} else {
 				const allCompletedWords = segmentWords.map((w) => w.text.trim()).join(" ");
@@ -495,11 +484,13 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 					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();
 				}
 			}
 		} else {
@@ -507,11 +498,13 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 				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();
 			}
 		}
 	}
@@ -533,7 +526,7 @@ 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 void 0;
+		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;
@@ -543,35 +536,25 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 		return !!(this.captionsData || this.captionsScript || this.customCaptionsDataTask.value);
 	}
 };
-_decorate([property({
-	type: String,
-	attribute: "display-mode",
-	reflect: true
-})], EFCaptions.prototype, "displayMode", void 0);
-_decorate([property({
-	type: Number,
-	attribute: "context-words",
-	reflect: true
-})], EFCaptions.prototype, "contextWords", void 0);
-_decorate([property({
+__decorate([property({
 	type: String,
 	attribute: "target",
 	reflect: true
 })], EFCaptions.prototype, "targetSelector", void 0);
-_decorate([property({ attribute: "word-style" })], EFCaptions.prototype, "wordStyle", void 0);
-_decorate([property({
+__decorate([property({ attribute: "word-style" })], EFCaptions.prototype, "wordStyle", void 0);
+__decorate([property({
 	type: String,
 	attribute: "captions-src",
 	reflect: true
 })], EFCaptions.prototype, "captionsSrc", void 0);
-_decorate([property({
+__decorate([property({
 	type: Object,
 	attribute: false
 })], EFCaptions.prototype, "captionsData", void 0);
-_decorate([property({
+__decorate([property({
 	type: String,
 	attribute: "captions-script",
 	reflect: true
 })], EFCaptions.prototype, "captionsScript", void 0);
-EFCaptions = _decorate([customElement("ef-captions")], EFCaptions);
+EFCaptions = __decorate([customElement("ef-captions")], EFCaptions);
 export { EFCaptions, EFCaptionsActiveWord, EFCaptionsAfterActiveWord, EFCaptionsBeforeActiveWord, EFCaptionsSegment };

package/dist/elements/EFImage.js

@@ -1,13 +1,13 @@
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
-import { EFSourceMixin } from "./EFSourceMixin.js";
+import { __decorate } from "../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
 import { EFTemporal } from "./EFTemporal.js";
+import { EFSourceMixin } from "./EFSourceMixin.js";
 import { FetchMixin } from "./FetchMixin.js";
 import { Task } from "@lit/task";
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import _decorate from "@oxc-project/runtime/helpers/decorate";
 import { createRef, ref } from "lit/directives/ref.js";
-let EFImage = class EFImage$1 extends EFTemporal(EFSourceMixin(FetchMixin(LitElement), { assetType: "image_files" })) {
+var EFImage = class EFImage$1 extends EFTemporal(EFSourceMixin(FetchMixin(LitElement), { assetType: "image_files" })) {
 	constructor(..._args) {
 		super(..._args);
 		this.imageRef = createRef();
@@ -65,8 +65,7 @@ let EFImage = class EFImage$1 extends EFTemporal(EFSourceMixin(FetchMixin(LitEle
 	}
 	render() {
 		const assetPath = this.assetPath();
-		const isDirectUrl = this.isDirectUrl(assetPath);
-		return isDirectUrl ? html`<img ${ref(this.imageRef)} src=${assetPath} />` : html`<canvas ${ref(this.canvasRef)}></canvas>`;
+		return this.isDirectUrl(assetPath) ? html`<img ${ref(this.imageRef)} src=${assetPath} />` : html`<canvas ${ref(this.canvasRef)}></canvas>`;
 	}
 	isDirectUrl(src) {
 		return src.startsWith("http://") || src.startsWith("https://");
@@ -80,10 +79,10 @@ let EFImage = class EFImage$1 extends EFTemporal(EFSourceMixin(FetchMixin(LitEle
 		return this.hasExplicitDuration;
 	}
 };
-_decorate([property({
+__decorate([property({
 	type: String,
 	attribute: "asset-id",
 	reflect: true
 })], EFImage.prototype, "assetId", null);
-EFImage = _decorate([customElement("ef-image")], EFImage);
+EFImage = __decorate([customElement("ef-image")], EFImage);
 export { EFImage };

package/dist/elements/EFMedia/AssetIdMediaEngine.js

@@ -2,17 +2,14 @@ import { AssetMediaEngine } from "./AssetMediaEngine.js";
 var AssetIdMediaEngine = class AssetIdMediaEngine extends AssetMediaEngine {
 	static async fetchByAssetId(host, _urlGenerator, assetId, apiHost) {
 		const url = `${apiHost}/api/v1/isobmff_files/${assetId}/index`;
-		const response = await host.fetch(url);
-		const data = await response.json();
-		return new AssetIdMediaEngine(host, assetId, data, apiHost);
+		return new AssetIdMediaEngine(host, assetId, await (await host.fetch(url)).json(), apiHost);
 	}
 	constructor(host, assetId, data, apiHost) {
 		super(host, assetId);
 		this.assetId = assetId;
 		this.apiHost = apiHost;
 		this.data = data;
-		const longestFragment = Object.values(this.data).reduce((max, fragment) => Math.max(max, fragment.duration / fragment.timescale), 0);
-		this.durationMs = longestFragment * 1e3;
+		this.durationMs = Object.values(this.data).reduce((max, fragment) => Math.max(max, fragment.duration / fragment.timescale), 0) * 1e3;
 	}
 	get initSegmentPaths() {
 		const paths = {};