@editframe/elements 0.19.4-beta.0 → 0.20.1-beta.0

package/dist/elements/ContextProxiesController.d.ts

@@ -0,0 +1,40 @@
+import { Context } from '@lit/context';
+import { LitElement, ReactiveController } from 'lit';
+/**
+ * Configuration for context proxying
+ */
+export type ContextProxyConfig = {
+    target: () => HTMLElement | null;
+    contexts: Context<any, any>[];
+};
+/**
+ * A ReactiveController that proxies context requests to a target element.
+ *
+ * Usage:
+ * ```typescript
+ * @customElement('my-proxy')
+ * class MyProxy extends LitElement {
+ *   @state()
+ *   targetElement: HTMLElement | null = null;
+ *
+ *   // @ts-expect-error controller is intentionally not referenced directly
+ *   #contextProxyController = new ContextProxyController(this, {
+ *     target: () => this.targetElement,
+ *     contexts: [playingContext, loopContext, targetTimegroupContext]
+ *   });
+ * }
+ * ```
+ */
+export declare class ContextProxyController implements ReactiveController {
+    private host;
+    private proxyMap;
+    private boundHandler;
+    private pendingRequests;
+    constructor(host: LitElement, config: ContextProxyConfig);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdate(): void;
+    private processPendingRequests;
+    private handleContextRequest;
+    private processContextRequest;
+}

package/dist/elements/ContextProxiesController.js

@@ -0,0 +1,69 @@
+import { ContextEvent } from "@lit/context";
+/**
+* A ReactiveController that proxies context requests to a target element.
+*
+* Usage:
+* ```typescript
+* @customElement('my-proxy')
+* class MyProxy extends LitElement {
+*   @state()
+*   targetElement: HTMLElement | null = null;
+*
+*   // @ts-expect-error controller is intentionally not referenced directly
+*   #contextProxyController = new ContextProxyController(this, {
+*     target: () => this.targetElement,
+*     contexts: [playingContext, loopContext, targetTimegroupContext]
+*   });
+* }
+* ```
+*/
+var ContextProxyController = class {
+	constructor(host, config) {
+		this.proxyMap = /* @__PURE__ */ new Map();
+		this.pendingRequests = [];
+		this.host = host;
+		this.host.addController(this);
+		this.boundHandler = this.handleContextRequest.bind(this);
+		for (const context of config.contexts) this.proxyMap.set(context, config.target);
+	}
+	hostConnected() {
+		this.host.addEventListener("context-request", this.boundHandler);
+	}
+	hostDisconnected() {
+		this.host.removeEventListener("context-request", this.boundHandler);
+	}
+	hostUpdate() {
+		this.processPendingRequests();
+	}
+	processPendingRequests() {
+		if (this.pendingRequests.length === 0) return;
+		const requestsToProcess = [...this.pendingRequests];
+		this.pendingRequests = [];
+		for (const contextEvent of requestsToProcess) this.processContextRequest(contextEvent);
+	}
+	handleContextRequest(event) {
+		const contextEvent = event;
+		const targetGetter = this.proxyMap.get(contextEvent.context);
+		if (targetGetter) {
+			contextEvent.stopPropagation();
+			const processed = this.processContextRequest(contextEvent);
+			if (!processed) this.pendingRequests.push(contextEvent);
+		}
+	}
+	processContextRequest(contextEvent) {
+		const targetGetter = this.proxyMap.get(contextEvent.context);
+		if (!targetGetter) return false;
+		const targetElement = targetGetter();
+		if (!targetElement) return false;
+		const tempElement = document.createElement("div");
+		targetElement.appendChild(tempElement);
+		try {
+			const newEvent = new ContextEvent(contextEvent.context, contextEvent.callback, contextEvent.subscribe);
+			tempElement.dispatchEvent(newEvent);
+			return true;
+		} finally {
+			targetElement.removeChild(tempElement);
+		}
+	}
+};
+export { ContextProxyController };

package/dist/elements/EFCaptions.d.ts

@@ -1,7 +1,21 @@
-import { Task } from '@lit/task';
+import { Task, TaskStatus } from '@lit/task';
 import { LitElement, PropertyValueMap } from 'lit';
 import { EFAudio } from './EFAudio.js';
 import { EFVideo } from './EFVideo.js';
+export interface WordSegment {
+    text: string;
+    start: number;
+    end: number;
+}
+export interface Segment {
+    start: number;
+    end: number;
+    text: string;
+}
+export interface Caption {
+    segments: Segment[];
+    word_segments: WordSegment[];
+}
 declare const EFCaptionsActiveWord_base: (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & typeof LitElement;
 export declare class EFCaptionsActiveWord extends EFCaptionsActiveWord_base {
     static styles: import('lit').CSSResult[];
@@ -9,8 +23,10 @@ export declare class EFCaptionsActiveWord extends EFCaptionsActiveWord_base {
     wordStartMs: number;
     wordEndMs: number;
     wordText: string;
+    wordIndex: number;
     hidden: boolean;
     get startTimeMs(): number;
+    get endTimeMs(): number;
     get durationMs(): number;
 }
 declare const EFCaptionsSegment_base: (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & typeof LitElement;
@@ -22,6 +38,7 @@ export declare class EFCaptionsSegment extends EFCaptionsSegment_base {
     segmentText: string;
     hidden: boolean;
     get startTimeMs(): number;
+    get endTimeMs(): number;
     get durationMs(): number;
 }
 export declare class EFCaptionsBeforeActiveWord extends EFCaptionsSegment {
@@ -32,6 +49,7 @@ export declare class EFCaptionsBeforeActiveWord extends EFCaptionsSegment {
     segmentStartMs: number;
     segmentEndMs: number;
     get startTimeMs(): number;
+    get endTimeMs(): number;
     get durationMs(): number;
 }
 export declare class EFCaptionsAfterActiveWord extends EFCaptionsSegment {
@@ -42,6 +60,7 @@ export declare class EFCaptionsAfterActiveWord extends EFCaptionsSegment {
     segmentStartMs: number;
     segmentEndMs: number;
     get startTimeMs(): number;
+    get endTimeMs(): number;
     get durationMs(): number;
 }
 declare const EFCaptions_base: (new (...args: any[]) => import('./EFSourceMixin.js').EFSourceMixinInterface) & (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & (new (...args: any[]) => import('./FetchMixin.js').FetchMixinInterface) & typeof LitElement;
@@ -52,23 +71,43 @@ export declare class EFCaptions extends EFCaptions_base {
     targetSelector: string;
     set target(value: string);
     wordStyle: string;
+    /**
+     * URL or path to a JSON file containing custom captions data.
+     * The JSON should conform to the Caption interface with 'segments' and 'word_segments' arrays.
+     */
+    captionsSrc: string;
+    /**
+     * Direct captions data object. Takes priority over captions-src and captions-script.
+     * Should conform to the Caption interface with 'segments' and 'word_segments' arrays.
+     */
+    captionsData: Caption | null;
+    /**
+     * ID of a <script> element containing JSON captions data.
+     * The script's textContent should be valid JSON conforming to the Caption interface.
+     */
+    captionsScript: string;
     activeWordContainers: HTMLCollectionOf<EFCaptionsActiveWord>;
     segmentContainers: HTMLCollectionOf<EFCaptionsSegment>;
     beforeActiveWordContainers: HTMLCollectionOf<EFCaptionsBeforeActiveWord>;
     afterActiveWordContainers: HTMLCollectionOf<EFCaptionsAfterActiveWord>;
     render(): import('lit-html').TemplateResult<1>;
     transcriptionsPath(): string | null;
-    captionsPath(): string;
-    protected md5SumLoader: Task<readonly [string, typeof fetch], string | undefined>;
+    captionsPath(): string | null;
+    protected md5SumLoader: Task<readonly [string, typeof fetch], string | null | undefined>;
     private transcriptionDataTask;
     private transcriptionFragmentPath;
     private fragmentIndexTask;
+    private customCaptionsDataTask;
     private transcriptionFragmentDataTask;
-    frameTask: Task<import('@lit/task').TaskStatus[], void>;
+    unifiedCaptionsDataTask: Task<readonly [Caption | null | undefined, Caption | null | undefined], Caption | null | undefined>;
+    frameTask: Task<TaskStatus[], void>;
     connectedCallback(): void;
-    protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     updateTextContainers(): void;
-    get targetElement(): EFAudio | EFVideo;
+    get targetElement(): EFAudio | EFVideo | null;
+    get hasCustomCaptionsData(): boolean;
+    get intrinsicDurationMs(): number | undefined;
+    get hasOwnDuration(): boolean;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/elements/EFCaptions.js

@@ -1,11 +1,12 @@
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
 import { EFSourceMixin } from "./EFSourceMixin.js";
-import { EFTemporal } from "./EFTemporal.js";
+import { EFTemporal, flushStartTimeMsCache } from "./EFTemporal.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 { Task } from "@lit/task";
+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";
@@ -22,6 +23,7 @@ let EFCaptionsActiveWord = class EFCaptionsActiveWord$1 extends EFTemporal(LitEl
 		this.wordStartMs = 0;
 		this.wordEndMs = 0;
 		this.wordText = "";
+		this.wordIndex = 0;
 		this.hidden = false;
 	}
 	static {
@@ -29,6 +31,7 @@ let EFCaptionsActiveWord = class EFCaptionsActiveWord$1 extends EFTemporal(LitEl
       :host {
         display: inline-block;
         white-space: pre;
+        transform-origin: center;
       }
       :host([hidden]) {
         display: none;
@@ -41,10 +44,20 @@ let EFCaptionsActiveWord = class EFCaptionsActiveWord$1 extends EFTemporal(LitEl
 			return void 0;
 		}
 		this.hidden = false;
+		const seed = this.wordIndex * 9007 % 233;
+		const seedValue = seed / 233;
+		this.style.setProperty("--ef-word-seed", seedValue.toString());
 		return html` ${this.wordText.trim()} `;
 	}
 	get startTimeMs() {
-		return this.wordStartMs || 0;
+		const parentCaptions = this.closest("ef-captions");
+		const parentStartTime = parentCaptions?.startTimeMs || 0;
+		return parentStartTime + (this.wordStartMs || 0);
+	}
+	get endTimeMs() {
+		const parentCaptions = this.closest("ef-captions");
+		const parentStartTime = parentCaptions?.startTimeMs || 0;
+		return parentStartTime + (this.wordEndMs || 0);
 	}
 	get durationMs() {
 		return this.wordEndMs - this.wordStartMs;
@@ -62,6 +75,10 @@ _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
@@ -94,7 +111,14 @@ let EFCaptionsSegment = class EFCaptionsSegment$1 extends EFTemporal(LitElement)
 		return html`${this.segmentText}`;
 	}
 	get startTimeMs() {
-		return this.segmentStartMs || 0;
+		const parentCaptions = this.closest("ef-captions");
+		const parentStartTime = parentCaptions?.startTimeMs || 0;
+		return parentStartTime + (this.segmentStartMs || 0);
+	}
+	get endTimeMs() {
+		const parentCaptions = this.closest("ef-captions");
+		const parentStartTime = parentCaptions?.startTimeMs || 0;
+		return parentStartTime + (this.segmentEndMs || 0);
 	}
 	get durationMs() {
 		return this.segmentEndMs - this.segmentStartMs;
@@ -145,7 +169,14 @@ let EFCaptionsBeforeActiveWord = class EFCaptionsBeforeActiveWord$1 extends EFCa
 		return html` ${this.segmentText}`;
 	}
 	get startTimeMs() {
-		return this.segmentStartMs || 0;
+		const parentCaptions = this.closest("ef-captions");
+		const parentStartTime = parentCaptions?.startTimeMs || 0;
+		return parentStartTime + (this.segmentStartMs || 0);
+	}
+	get endTimeMs() {
+		const parentCaptions = this.closest("ef-captions");
+		const parentStartTime = parentCaptions?.startTimeMs || 0;
+		return parentStartTime + (this.segmentEndMs || 0);
 	}
 	get durationMs() {
 		return this.segmentEndMs - this.segmentStartMs;
@@ -196,7 +227,14 @@ let EFCaptionsAfterActiveWord = class EFCaptionsAfterActiveWord$1 extends EFCapt
 		return html`${this.segmentText} `;
 	}
 	get startTimeMs() {
-		return this.segmentStartMs || 0;
+		const parentCaptions = this.closest("ef-captions");
+		const parentStartTime = parentCaptions?.startTimeMs || 0;
+		return parentStartTime + (this.segmentStartMs || 0);
+	}
+	get endTimeMs() {
+		const parentCaptions = this.closest("ef-captions");
+		const parentStartTime = parentCaptions?.startTimeMs || 0;
+		return parentStartTime + (this.segmentEndMs || 0);
 	}
 	get durationMs() {
 		return this.segmentEndMs - this.segmentStartMs;
@@ -226,6 +264,9 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 		this.contextWords = 3;
 		this.targetSelector = "";
 		this.wordStyle = "";
+		this.captionsSrc = "";
+		this.captionsData = null;
+		this.captionsScript = "";
 		this.activeWordContainers = this.getElementsByTagName("ef-captions-active-word");
 		this.segmentContainers = this.getElementsByTagName("ef-captions-segment");
 		this.beforeActiveWordContainers = this.getElementsByTagName("ef-captions-before-active-word");
@@ -234,6 +275,7 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 			autoRun: false,
 			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, {
 					method: "HEAD",
@@ -244,9 +286,13 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 		});
 		this.transcriptionDataTask = new Task(this, {
 			autoRun: EF_INTERACTIVE,
-			args: () => [this.transcriptionsPath(), this.fetch],
-			task: async ([transcriptionsPath, fetch], { signal }) => {
-				if (!transcriptionsPath) return null;
+			args: () => [
+				this.transcriptionsPath(),
+				this.fetch,
+				this.hasCustomCaptionsData
+			],
+			task: async ([transcriptionsPath, fetch, hasCustomData], { signal }) => {
+				if (hasCustomData || !transcriptionsPath) return null;
 				const response = await fetch(transcriptionsPath, { signal });
 				return response.json();
 			}
@@ -260,6 +306,35 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 				return fragmentIndex;
 			}
 		});
+		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 {
+					const response = await fetch(captionsSrc, { signal });
+					return await response.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: () => [
@@ -274,26 +349,43 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 				return response.json();
 			}
 		});
+		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;
+				return this.customCaptionsDataTask.value || this.transcriptionFragmentDataTask.value;
+			}
+		});
 		this.frameTask = new Task(this, {
 			autoRun: EF_INTERACTIVE,
-			args: () => [this.transcriptionFragmentDataTask.status],
+			args: () => [this.unifiedCaptionsDataTask.status],
 			task: async () => {
-				await this.transcriptionFragmentDataTask.taskComplete;
+				await this.unifiedCaptionsDataTask.taskComplete;
 			}
 		});
 	}
 	static {
 		this.styles = [css`
       :host {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: baseline;
+        display: inline-flex;
         width: fit-content;
+        align-items: baseline;
       }
       ::slotted(*) {
         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) {
@@ -303,10 +395,12 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 		return html`<slot></slot>`;
 	}
 	transcriptionsPath() {
+		if (!this.targetElement) return null;
 		if (this.targetElement.assetId) return `${this.apiHost}/api/v1/isobmff_files/${this.targetElement.assetId}/transcription`;
 		return null;
 	}
 	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}`;
@@ -316,51 +410,137 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 	}
 	connectedCallback() {
 		super.connectedCallback();
-		if (this.targetElement) new CrossUpdateController(this.targetElement, this);
+		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);
 	}
-	updated(_changedProperties) {
+	updated(changedProperties) {
 		this.updateTextContainers();
+		if (changedProperties.has("captionsData") || changedProperties.has("captionsSrc") || changedProperties.has("captionsScript")) {
+			this.requestUpdate("intrinsicDurationMs");
+			flushSequenceDurationCache();
+			flushStartTimeMsCache();
+			if (this.parentTimegroup) {
+				this.parentTimegroup.requestUpdate("durationMs");
+				this.parentTimegroup.requestUpdate("currentTime");
+			}
+		}
+		if (changedProperties.has("ownCurrentTimeMs")) this.updateTextContainers();
 	}
 	updateTextContainers() {
-		const transcriptionFragment = this.transcriptionFragmentDataTask.value;
-		if (!transcriptionFragment) return;
-		const currentTimeMs = this.targetElement.currentSourceTimeMs;
+		const captionsData = this.unifiedCaptionsDataTask.value;
+		if (!captionsData) return;
+		const currentTimeMs = this.targetElement ? this.targetElement.currentSourceTimeMs : this.ownCurrentTimeMs;
 		const currentTimeSec = currentTimeMs / 1e3;
-		const currentWord = transcriptionFragment.word_segments.find((word) => currentTimeSec >= word.start && currentTimeSec <= word.end);
-		const currentSegment = transcriptionFragment.segments.find((segment) => currentTimeSec >= segment.start && currentTimeSec <= segment.end);
+		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;
 		}
 		if (currentWord && currentSegment) {
-			const segmentWords = transcriptionFragment.word_segments.filter((word) => word.start >= currentSegment.start && word.end <= currentSegment.end);
+			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 = currentSegment.start * 1e3;
-					container.segmentEndMs = currentWord.start * 1e3;
+					container.segmentStartMs = currentWord.start * 1e3;
+					container.segmentEndMs = currentWord.end * 1e3;
 				}
 				for (const container of this.afterActiveWordContainers) {
 					container.segmentText = afterWords;
-					container.segmentStartMs = currentWord.end * 1e3;
+					container.segmentStartMs = currentWord.start * 1e3;
+					container.segmentEndMs = currentWord.end * 1e3;
+				}
+			}
+		} 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) {
+				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;
+				}
+				for (const container of this.afterActiveWordContainers) {
+					container.segmentText = allWords;
+					container.segmentStartMs = currentSegment.start * 1e3;
+					container.segmentEndMs = currentSegment.end * 1e3;
+				}
+			} 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;
+				}
+				for (const container of this.afterActiveWordContainers) {
+					container.segmentText = "";
+					container.segmentStartMs = currentSegment.start * 1e3;
 					container.segmentEndMs = currentSegment.end * 1e3;
 				}
 			}
+		} else {
+			for (const container of this.beforeActiveWordContainers) {
+				container.segmentText = "";
+				container.segmentStartMs = 0;
+				container.segmentEndMs = 0;
+			}
+			for (const container of this.afterActiveWordContainers) {
+				container.segmentText = "";
+				container.segmentStartMs = 0;
+				container.segmentEndMs = 0;
+			}
 		}
 	}
 	get targetElement() {
 		const target = document.getElementById(this.targetSelector ?? "");
 		if (target instanceof EFAudio || target instanceof EFVideo) return target;
-		throw new Error("Invalid target, must be an EFAudio or EFVideo element");
+		if (this.hasCustomCaptionsData) return null;
+		return null;
+	}
+	get hasCustomCaptionsData() {
+		return !!(this.captionsData || this.captionsSrc || this.captionsScript);
+	}
+	get intrinsicDurationMs() {
+		let captionsData = null;
+		if (this.captionsData) captionsData = this.captionsData;
+		else if (this.captionsScript) {
+			const scriptElement = document.getElementById(this.captionsScript);
+			if (scriptElement?.textContent) try {
+				captionsData = JSON.parse(scriptElement.textContent);
+			} catch {}
+		} else if (this.customCaptionsDataTask.value) captionsData = this.customCaptionsDataTask.value;
+		if (!captionsData) return void 0;
+		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;
+	}
+	get hasOwnDuration() {
+		return !!(this.captionsData || this.captionsScript || this.customCaptionsDataTask.value);
 	}
 };
 _decorate([property({
@@ -379,5 +559,19 @@ _decorate([property({
 	reflect: true
 })], EFCaptions.prototype, "targetSelector", void 0);
 _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({
+	type: Object,
+	attribute: false
+})], EFCaptions.prototype, "captionsData", void 0);
+_decorate([property({
+	type: String,
+	attribute: "captions-script",
+	reflect: true
+})], EFCaptions.prototype, "captionsScript", void 0);
 EFCaptions = _decorate([customElement("ef-captions")], EFCaptions);
 export { EFCaptions, EFCaptionsActiveWord, EFCaptionsAfterActiveWord, EFCaptionsBeforeActiveWord, EFCaptionsSegment };

package/dist/elements/EFImage.js

@@ -49,7 +49,10 @@ let EFImage = class EFImage$1 extends EFTemporal(EFSourceMixin(FetchMixin(LitEle
         justify-content: center;
       }
       canvas, img {
-        all: inherit;
+        position: static;
+        all: initial;
+        width: 100%;
+        height: 100%;
       }
     `];
 	}

package/dist/elements/EFMedia/AssetIdMediaEngine.d.ts

@@ -1,5 +1,5 @@
 import { TrackFragmentIndex } from '../../../../assets/src/index.ts';
-import { InitSegmentPaths, MediaEngine } from '../../transcoding/types';
+import { InitSegmentPaths, MediaEngine, VideoRendition } from '../../transcoding/types';
 import { UrlGenerator } from '../../transcoding/utils/UrlGenerator';
 import { EFMedia } from '../EFMedia';
 import { AssetMediaEngine } from './AssetMediaEngine';
@@ -15,4 +15,5 @@ export declare class AssetIdMediaEngine extends AssetMediaEngine implements Medi
     };
     buildInitSegmentUrl(trackId: number): string;
     buildMediaSegmentUrl(trackId: number, _segmentId: number): string;
+    convertToSegmentRelativeTimestamps(globalTimestamps: number[], segmentId: number, rendition: VideoRendition): number[];
 }

package/dist/elements/EFMedia/AssetIdMediaEngine.js

@@ -40,5 +40,14 @@ var AssetIdMediaEngine = class AssetIdMediaEngine extends AssetMediaEngine {
 	buildMediaSegmentUrl(trackId, _segmentId) {
 		return `${this.apiHost}/api/v1/isobmff_tracks/${this.assetId}/${trackId}`;
 	}
+	convertToSegmentRelativeTimestamps(globalTimestamps, segmentId, rendition) {
+		if (!rendition.trackId) throw new Error("Track ID is required for asset metadata");
+		const trackData = this.data[rendition.trackId];
+		if (!trackData) throw new Error("Track not found");
+		const segment = trackData.segments?.[segmentId];
+		if (!segment) throw new Error("Segment not found");
+		const segmentStartMs = segment.cts / trackData.timescale * 1e3;
+		return globalTimestamps.map((globalMs) => (globalMs - segmentStartMs) / 1e3);
+	}
 };
 export { AssetIdMediaEngine };

package/dist/elements/EFMedia/AssetMediaEngine.d.ts

@@ -52,4 +52,5 @@ export declare class AssetMediaEngine extends BaseMediaEngine implements MediaEn
         maxVideoBufferFetches: number;
         maxAudioBufferFetches: number;
     };
+    convertToSegmentRelativeTimestamps(globalTimestamps: number[], segmentId: number, rendition: VideoRendition): number[];
 }