npm - @editframe/elements - Versions diffs - 0.36.0-beta → 0.36.2-beta - Mend

@editframe/elements 0.36.0-beta → 0.36.2-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/elements/EFCaptions.d.ts +0 -4
package/dist/elements/EFCaptions.js +12 -32
package/dist/elements/EFCaptions.js.map +1 -1
package/dist/elements/updateAnimations.js +75 -0
package/dist/elements/updateAnimations.js.map +1 -1
package/dist/gui/EFWorkbench.js +28 -0
package/dist/gui/EFWorkbench.js.map +1 -1
package/dist/style.css +33 -0
package/package.json +2 -2

package/dist/elements/EFCaptions.d.ts CHANGED Viewed

@@ -30,7 +30,6 @@ interface Caption {
  */
 declare class EFCaptionsActiveWord extends HTMLElement {
   #private;
-  constructor();
   set wordText(text: string);
   get wordText(): string;
   set wordIndex(index: number);
@@ -42,7 +41,6 @@ declare class EFCaptionsActiveWord extends HTMLElement {
  */
 declare class EFCaptionsSegment extends HTMLElement {
   #private;
-  constructor();
   set segmentText(text: string);
   get segmentText(): string;
 }
@@ -51,7 +49,6 @@ declare class EFCaptionsSegment extends HTMLElement {
  * Uses light DOM for simplicity - parent sets textContent directly.
  */
 declare class EFCaptionsBeforeActiveWord extends EFCaptionsSegment {
-  constructor();
   set segmentText(text: string);
 }
 /**
@@ -59,7 +56,6 @@ declare class EFCaptionsBeforeActiveWord extends EFCaptionsSegment {
  * Uses light DOM for simplicity - parent sets textContent directly.
  */
 declare class EFCaptionsAfterActiveWord extends EFCaptionsSegment {
-  constructor();
   set segmentText(text: string);
 }
 declare const EFCaptions_base: (new (...args: any[]) => EFSourceMixinInterface) & (new (...args: any[]) => TemporalMixinInterface) & (new (...args: any[]) => FetchMixinInterface) & typeof LitElement;

package/dist/elements/EFCaptions.js CHANGED Viewed

@@ -22,20 +22,14 @@ const stopWords = new Set([
 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.hidden = true;
 			this.textContent = "";
 		} else {
-			this.style.display = "inline-block";
-			this.textContent = text;
+			this.hidden = false;
+			this.textContent = text + " ";
 		}
 	}
 	get wordText() {
@@ -53,19 +47,13 @@ let EFCaptionsActiveWord = class EFCaptionsActiveWord$1 extends HTMLElement {
 EFCaptionsActiveWord = __decorate([customElement("ef-captions-active-word")], EFCaptionsActiveWord);
 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.hidden = true;
 			this.textContent = "";
 		} else {
-			this.style.display = "inline-block";
+			this.hidden = false;
 			this.textContent = text;
 		}
 	}
@@ -75,35 +63,27 @@ let EFCaptionsSegment = class EFCaptionsSegment$1 extends HTMLElement {
 };
 EFCaptionsSegment = __decorate([customElement("ef-captions-segment")], EFCaptionsSegment);
 let EFCaptionsBeforeActiveWord = class EFCaptionsBeforeActiveWord$1 extends EFCaptionsSegment {
-	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.hidden = true;
 			this.textContent = "";
 		} else {
-			this.style.display = "inline-block";
+			this.hidden = false;
 			this.textContent = finalText;
 		}
 	}
 };
 EFCaptionsBeforeActiveWord = __decorate([customElement("ef-captions-before-active-word")], EFCaptionsBeforeActiveWord);
 let EFCaptionsAfterActiveWord = class EFCaptionsAfterActiveWord$1 extends EFCaptionsSegment {
-	constructor() {
-		super();
-		this.style.whiteSpace = "pre";
-	}
 	set segmentText(text) {
-		const finalText = text ? " " + text : text;
+		const finalText = text;
 		if (!finalText || stopWords.has(finalText)) {
-			this.style.display = "none";
+			this.hidden = true;
 			this.textContent = "";
 		} else {
-			this.style.display = "inline-block";
+			this.hidden = false;
 			this.textContent = finalText;
 		}
 	}
@@ -127,13 +107,13 @@ let EFCaptions = class EFCaptions$1 extends EFSourceMixin(EFTemporal(FetchMixin(
 	static {
 		this.styles = [css`
       :host {
-        display: inline-flex;
+        display: block;
         white-space: normal;
         line-height: 1;
         gap: 0;
       }
       ::slotted(*) {
-        display: inline-block;
+        display: inline;
         margin: 0;
         padding: 0;
       }

package/dist/elements/EFCaptions.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EFCaptions.js","names":["EFCaptionsActiveWord","#wordText","#wordIndex","EFCaptionsSegment","#segmentText","EFCaptionsBeforeActiveWord","EFCaptionsAfterActiveWord","EFCaptions","#captionsDataLoaded","#captionsDataValue","#captionsDataPromise","#doLoadCaptionsData","#transcriptionData","#loadTranscriptionFragment","#rootTimegroupUpdateController","#cachedIntrinsicDurationMs","captionsData: Caption \| null","result: number"],"sources":["../../src/elements/EFCaptions.ts"],"sourcesContent":["import { css, html, LitElement, type PropertyValueMap } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport type { ReactiveController } from \"lit\";\nimport type { GetISOBMFFFileTranscriptionResult } from \"../../../api/src/index.js\";\nimport {\n type FrameRenderable,\n type FrameState,\n createFrameTaskWrapper,\n PRIORITY_CAPTIONS,\n} from \"../preview/FrameController.js\";\nimport { AsyncValue } from \"./EFMedia.js\";\nimport { CrossUpdateController } from \"./CrossUpdateController.js\";\nimport { EFAudio } from \"./EFAudio.js\";\nimport { EFSourceMixin } from \"./EFSourceMixin.js\";\nimport { EFTemporal, flushStartTimeMsCache } from \"./EFTemporal.js\";\nimport {\n flushSequenceDurationCache,\n EFTimegroup,\n} from \"./EFTimegroup.js\";\nimport { EFVideo } from \"./EFVideo.js\";\nimport { FetchMixin } from \"./FetchMixin.js\";\n\nexport interface WordSegment {\n text: string;\n start: number;\n end: number;\n}\n\nexport interface Segment {\n start: number;\n end: number;\n text: string;\n}\n\nexport interface Caption {\n segments: Segment[];\n word_segments: WordSegment[];\n}\n\nconst stopWords = new Set([\"\", \".\", \"!\", \"?\", \",\"]);\n\n/*\n Caption active word element - displays the currently spoken word.\n * Uses light DOM for simplicity - parent sets textContent directly.\n /\n@customElement(\"ef-captions-active-word\")\nexport class EFCaptionsActiveWord extends HTMLElement {\n #wordText = \"\";\n #wordIndex = 0;\n \n constructor() {\n super();\n // Apply default styles via inline style\n this.style.display = \"inline-block\";\n this.style.whiteSpace = \"normal\";\n this.style.lineHeight = \"1\";\n }\n \n set wordText(text: string) {\n this.#wordText = text;\n // Hide element if no content or only stop words\n if (!text \|\| stopWords.has(text)) {\n this.style.display = \"none\";\n this.textContent = \"\";\n } else {\n this.style.display = \"inline-block\";\n this.textContent = text;\n }\n }\n \n get wordText(): string {\n return this.#wordText;\n }\n \n set wordIndex(index: number) {\n this.#wordIndex = index;\n // Set deterministic --ef-word-seed value based on word index\n const seed = (index 9007) % 233; // Prime numbers for better distribution\n const seedValue = seed / 233; // Normalize to 0-1 range\n this.style.setProperty(\"--ef-word-seed\", seedValue.toString());\n }\n \n get wordIndex(): number {\n return this.#wordIndex;\n }\n}\n\n/*\n Caption segment element - displays a full caption segment.\n * Uses light DOM for simplicity - parent sets textContent directly.\n /\n@customElement(\"ef-captions-segment\")\nexport class EFCaptionsSegment extends HTMLElement {\n #segmentText = \"\";\n \n constructor() {\n super();\n // Apply default styles via inline style\n this.style.display = \"inline-block\";\n this.style.whiteSpace = \"normal\";\n this.style.lineHeight = \"1\";\n }\n \n set segmentText(text: string) {\n this.#segmentText = text;\n // Hide element if no content or only stop words\n if (!text \|\| stopWords.has(text)) {\n this.style.display = \"none\";\n this.textContent = \"\";\n } else {\n this.style.display = \"inline-block\";\n this.textContent = text;\n }\n }\n \n get segmentText(): string {\n return this.#segmentText;\n }\n}\n\n/\n Caption before-active-word element - displays words before the current word.\n * Uses light DOM for simplicity - parent sets textContent directly.\n /\n@customElement(\"ef-captions-before-active-word\")\nexport class EFCaptionsBeforeActiveWord extends EFCaptionsSegment {\n constructor() {\n super();\n // Override whiteSpace to preserve spacing\n this.style.whiteSpace = \"pre\";\n }\n \n set segmentText(text: string) {\n // Check if there's an active word by looking for sibling active word element\n const activeWord = this.closest(\"ef-captions\")?.querySelector(\n \"ef-captions-active-word\",\n ) as EFCaptionsActiveWord;\n const hasActiveWord = activeWord?.wordText;\n \n // Add trailing space if there's an active word coming after us\n const finalText = text && hasActiveWord ? text + \" \" : text;\n \n // Hide element if no content or only stop words\n if (!finalText \|\| stopWords.has(finalText)) {\n this.style.display = \"none\";\n this.textContent = \"\";\n } else {\n this.style.display = \"inline-block\";\n this.textContent = finalText;\n }\n }\n}\n\n/\n Caption after-active-word element - displays words after the current word.\n * Uses light DOM for simplicity - parent sets textContent directly.\n /\n@customElement(\"ef-captions-after-active-word\")\nexport class EFCaptionsAfterActiveWord extends EFCaptionsSegment {\n constructor() {\n super();\n // Override whiteSpace to preserve spacing\n this.style.whiteSpace = \"pre\";\n }\n \n set segmentText(text: string) {\n // Add leading space if there's text\n const finalText = text ? \" \" + text : text;\n \n // Hide element if no content or only stop words\n if (!finalText \|\| stopWords.has(finalText)) {\n this.style.display = \"none\";\n this.textContent = \"\";\n } else {\n this.style.display = \"inline-block\";\n this.textContent = finalText;\n }\n }\n}\n\n@customElement(\"ef-captions\")\nexport class EFCaptions extends EFSourceMixin(\n EFTemporal(FetchMixin(LitElement)),\n { assetType: \"caption_files\" },\n) implements FrameRenderable {\n static styles = [\n css`\n :host {\n display: inline-flex;\n white-space: normal;\n line-height: 1;\n gap: 0;\n }\n ::slotted() {\n display: inline-block;\n margin: 0;\n padding: 0;\n }\n `,\n ];\n\n @property({ type: String, attribute: \"target\", reflect: true })\n targetSelector = \"\";\n\n set target(value: string) {\n this.targetSelector = value;\n }\n\n @property({ attribute: \"word-style\" })\n wordStyle = \"\";\n\n /*\n URL or path to a JSON file containing custom captions data.\n * The JSON should conform to the Caption interface with 'segments' and 'word_segments' arrays.\n /\n @property({ type: String, attribute: \"captions-src\", reflect: true })\n captionsSrc = \"\";\n\n /\n Direct captions data object. Takes priority over captions-src and captions-script.\n * Should conform to the Caption interface with 'segments' and 'word_segments' arrays.\n /\n @property({ type: Object, attribute: false })\n captionsData: Caption \| null = null;\n\n /\n ID of a <script> element containing JSON captions data.\n * The script's textContent should be valid JSON conforming to the Caption interface.\n /\n @property({ type: String, attribute: \"captions-script\", reflect: true })\n captionsScript = \"\";\n\n activeWordContainers = this.getElementsByTagName(\"ef-captions-active-word\");\n segmentContainers = this.getElementsByTagName(\"ef-captions-segment\");\n beforeActiveWordContainers = this.getElementsByTagName(\n \"ef-captions-before-active-word\",\n );\n afterActiveWordContainers = this.getElementsByTagName(\n \"ef-captions-after-active-word\",\n );\n\n // Cache for intrinsicDurationMs to avoid expensive O(n) recalculation every frame\n #cachedIntrinsicDurationMs: number \| undefined \| null = null; // null = not computed, undefined = no duration\n\n render() {\n return html`<slot></slot>`;\n }\n\n transcriptionsPath() {\n if (!this.targetElement) {\n return null;\n }\n if (this.targetElement.assetId) {\n return `${this.apiHost}/api/v1/isobmff_files/${this.targetElement.assetId}/transcription`;\n }\n return null;\n }\n\n captionsPath() {\n if (!this.targetElement) {\n return null;\n }\n if (this.targetElement.assetId) {\n return `${this.apiHost}/api/v1/caption_files/${this.targetElement.assetId}`;\n }\n const targetSrc = this.targetElement.src;\n // Normalize the path: remove leading slash and any double slashes\n let normalizedSrc = targetSrc.startsWith(\"/\")\n ? targetSrc.slice(1)\n : targetSrc;\n normalizedSrc = normalizedSrc.replace(/^\\/+/, \"\");\n // Use production API format for local files\n return `/api/v1/assets/local/captions?src=${encodeURIComponent(normalizedSrc)}`;\n }\n\n // ============================================================================\n // Captions Data Loading - async methods instead of Tasks\n // ============================================================================\n\n #captionsDataLoaded = false;\n #captionsDataPromise: Promise<Caption \| null> \| null = null;\n #captionsDataValue: Caption \| null = null;\n #transcriptionData: GetISOBMFFFileTranscriptionResult \| null = null;\n\n /\n AsyncValue wrapper for backwards compatibility\n /\n unifiedCaptionsDataTask = new AsyncValue<Caption \| null>();\n\n /\n Load captions data from all possible sources\n /\n async loadCaptionsData(signal?: AbortSignal): Promise<Caption \| null> {\n // Return cached if already loaded\n if (this.#captionsDataLoaded && this.#captionsDataValue) {\n return this.#captionsDataValue;\n }\n\n // Return in-flight promise\n if (this.#captionsDataPromise) {\n return this.#captionsDataPromise;\n }\n\n this.unifiedCaptionsDataTask.startPending();\n this.#captionsDataPromise = this.#doLoadCaptionsData(signal);\n\n try {\n this.#captionsDataValue = await this.#captionsDataPromise;\n this.#captionsDataLoaded = true;\n if (this.#captionsDataValue) {\n this.unifiedCaptionsDataTask.setValue(this.#captionsDataValue);\n }\n return this.#captionsDataValue;\n } catch (error) {\n if (error instanceof DOMException && error.name === \"AbortError\") {\n throw error;\n }\n console.error(\"Failed to load captions data:\", error);\n return null;\n } finally {\n this.#captionsDataPromise = null;\n }\n }\n\n async #doLoadCaptionsData(signal?: AbortSignal): Promise<Caption \| null> {\n // Priority 1: Direct captionsData property\n if (this.captionsData) {\n return this.captionsData;\n }\n\n // Priority 2: Script element reference\n if (this.captionsScript) {\n const scriptElement = document.getElementById(this.captionsScript);\n if (scriptElement?.textContent) {\n try {\n return JSON.parse(scriptElement.textContent) as Caption;\n } catch (error) {\n console.error(`Failed to parse captions from script #${this.captionsScript}:`, error);\n }\n }\n }\n\n // Priority 3: External captions file\n if (this.captionsSrc) {\n try {\n const response = await this.fetch(this.captionsSrc, { signal });\n return await response.json() as Caption;\n } catch (error) {\n if (error instanceof DOMException && error.name === \"AbortError\") {\n throw error;\n }\n console.error(`Failed to load captions from ${this.captionsSrc}:`, error);\n }\n }\n\n // Priority 4: Transcription from target element\n if (this.targetElement && !this.hasCustomCaptionsData) {\n const transcriptionPath = this.transcriptionsPath();\n if (transcriptionPath) {\n try {\n const response = await this.fetch(transcriptionPath, { signal });\n this.#transcriptionData = await response.json() as GetISOBMFFFileTranscriptionResult;\n signal?.throwIfAborted();\n\n // Load fragment for current time\n if (this.#transcriptionData) {\n return this.#loadTranscriptionFragment(signal);\n }\n } catch (error) {\n if (error instanceof DOMException && error.name === \"AbortError\") {\n throw error;\n }\n // Transcription not available - not an error\n }\n }\n }\n\n return null;\n }\n\n async #loadTranscriptionFragment(signal?: AbortSignal): Promise<Caption \| null> {\n if (!this.#transcriptionData) return null;\n\n const fragmentIndex = Math.floor(this.ownCurrentTimeMs / this.#transcriptionData.work_slice_ms);\n const fragmentPath = `${this.apiHost}/api/v1/transcriptions/${this.#transcriptionData.id}/fragments/${fragmentIndex}`;\n\n try {\n const response = await this.fetch(fragmentPath, { signal });\n return await response.json() as Caption;\n } catch (error) {\n if (error instanceof DOMException && error.name === \"AbortError\") {\n throw error;\n }\n console.error(\"Failed to load transcription fragment:\", error);\n return null;\n }\n }\n\n /\n @deprecated Use FrameRenderable methods (prepareFrame, renderFrame) via FrameController instead.\n * This is a compatibility wrapper that delegates to the new system.\n /\n frameTask = createFrameTaskWrapper(this);\n\n // ============================================================================\n // FrameRenderable Implementation\n // Centralized frame control - no Lit Tasks\n // ============================================================================\n\n /\n Query readiness state for a given time.\n * @implements FrameRenderable\n /\n getFrameState(_timeMs: number): FrameState {\n // Check if captions data is loaded\n const hasData = this.#captionsDataLoaded && this.#captionsDataValue !== null;\n\n return {\n needsPreparation: !hasData,\n isReady: hasData,\n priority: PRIORITY_CAPTIONS,\n };\n }\n\n /\n Async preparation - waits for captions data to load.\n * @implements FrameRenderable\n /\n async prepareFrame(_timeMs: number, signal: AbortSignal): Promise<void> {\n await this.loadCaptionsData(signal);\n signal.throwIfAborted();\n }\n\n /\n Synchronous render - updates caption text containers.\n * Sets textContent directly on child elements (light DOM).\n * @implements FrameRenderable\n /\n renderFrame(_timeMs: number): void {\n // Update text containers by setting properties\n // Child elements update their textContent directly (light DOM)\n this.updateTextContainers();\n }\n\n // ============================================================================\n // End FrameRenderable Implementation\n // ============================================================================\n\n #rootTimegroupUpdateController?: ReactiveController;\n\n connectedCallback() {\n super.connectedCallback();\n\n // Start loading captions data\n this.loadCaptionsData().catch(() => {});\n\n // Try to get target element safely\n const target = this.targetSelector\n ? document.getElementById(this.targetSelector)\n : null;\n if (target && (target instanceof EFAudio \|\| target instanceof EFVideo)) {\n new CrossUpdateController(target, this);\n }\n // For standalone captions with custom data, ensure proper timeline sync\n else if (this.hasCustomCaptionsData && this.rootTimegroup) {\n new CrossUpdateController(this.rootTimegroup, this);\n }\n\n // Ensure captions update when root timegroup's currentTimeMs changes\n if (this.rootTimegroup) {\n this.#rootTimegroupUpdateController = {\n hostUpdated: () => {\n Promise.resolve().then(() => {\n this.updateTextContainers();\n });\n },\n hostDisconnected: () => {\n this.#rootTimegroupUpdateController = undefined;\n },\n };\n this.rootTimegroup.addController(this.#rootTimegroupUpdateController);\n }\n\n // Prevent display:none from being set on the parent caption element.\n // IMPORTANT: This only applies to the parent <ef-captions> element, NOT to\n // caption child elements (<ef-captions-segment>, <ef-captions-active-word>, etc.).\n // Child elements MUST respect display:none for proper temporal visibility\n // in video rendering. Video export relies on display:none to hide elements\n // outside their time range.\n const observer = new MutationObserver(() => {\n if (this.style.display === \"none\") {\n this.style.removeProperty(\"display\");\n this.style.opacity = \"0\";\n this.style.pointerEvents = \"none\";\n } else if (!this.style.display \|\| this.style.display === \"\") {\n this.style.removeProperty(\"opacity\");\n this.style.removeProperty(\"pointer-events\");\n }\n });\n observer.observe(this, { attributes: true, attributeFilter: [\"style\"] });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n if (this.#rootTimegroupUpdateController && this.rootTimegroup) {\n this.rootTimegroup.removeController(this.#rootTimegroupUpdateController);\n this.#rootTimegroupUpdateController = undefined;\n }\n }\n\n protected updated(\n changedProperties: PropertyValueMap<any> \| Map<PropertyKey, unknown>,\n ): void {\n // Set up root timegroup controller if rootTimegroup is now available\n if (this.rootTimegroup && !this.#rootTimegroupUpdateController) {\n this.#rootTimegroupUpdateController = {\n hostUpdated: () => {\n Promise.resolve().then(() => {\n this.updateTextContainers();\n });\n },\n hostDisconnected: () => {\n this.#rootTimegroupUpdateController = undefined;\n },\n };\n this.rootTimegroup.addController(this.#rootTimegroupUpdateController);\n }\n\n // Clean up controller if rootTimegroup changed\n if (\n changedProperties.has(\"rootTimegroup\") &&\n this.#rootTimegroupUpdateController\n ) {\n const oldRootTimegroup = changedProperties.get(\"rootTimegroup\") as\n \| EFTimegroup\n \| undefined;\n if (oldRootTimegroup && oldRootTimegroup !== this.rootTimegroup) {\n oldRootTimegroup.removeController(this.#rootTimegroupUpdateController);\n this.#rootTimegroupUpdateController = undefined;\n }\n }\n\n this.updateTextContainers();\n\n // Force duration recalculation when custom captions data changes\n if (\n changedProperties.has(\"captionsData\") \|\|\n changedProperties.has(\"captionsSrc\") \|\|\n changedProperties.has(\"captionsScript\")\n ) {\n // Invalidate caches and reload\n this.#cachedIntrinsicDurationMs = null;\n this.#captionsDataLoaded = false;\n this.#captionsDataValue = null;\n this.loadCaptionsData().catch(() => {});\n\n this.requestUpdate(\"intrinsicDurationMs\");\n\n flushSequenceDurationCache();\n flushStartTimeMsCache();\n\n if (this.parentTimegroup) {\n this.parentTimegroup.requestUpdate(\"durationMs\");\n this.parentTimegroup.requestUpdate(\"currentTime\");\n }\n }\n\n // Update captions when timeline position changes\n if (changedProperties.has(\"ownCurrentTimeMs\")) {\n this.updateTextContainers();\n }\n }\n\n updateTextContainers() {\n const captionsData = this.#captionsDataValue;\n if (!captionsData) {\n return;\n }\n\n // For captions with custom data, try to use the video's source time\n let currentTimeMs = this.ownCurrentTimeMs;\n if (this.hasCustomCaptionsData && this.parentTimegroup) {\n const videoElement = Array.from(this.parentTimegroup.children).find(\n (child): child is EFVideo => child instanceof EFVideo,\n );\n if (videoElement) {\n const sourceInMs = videoElement.sourceInMs ?? 0;\n currentTimeMs = videoElement.currentSourceTimeMs - sourceInMs;\n currentTimeMs = Math.max(0, Math.min(currentTimeMs, this.durationMs));\n }\n }\n\n const currentTimeSec = currentTimeMs / 1000;\n\n // Find the current word from word_segments\n const currentWord = captionsData.word_segments.find(\n (word) => currentTimeSec >= word.start && currentTimeSec < word.end,\n );\n\n // Find the current segment\n const currentSegment = captionsData.segments.find(\n (segment) =>\n currentTimeSec >= segment.start && currentTimeSec < segment.end,\n );\n\n for (const wordContainer of this.activeWordContainers) {\n if (currentWord) {\n const wordIndex = captionsData.word_segments.findIndex(\n (w) =>\n w.start === currentWord.start &&\n w.end === currentWord.end &&\n w.text === currentWord.text,\n );\n wordContainer.wordIndex = wordIndex >= 0 ? wordIndex : 0;\n wordContainer.wordText = currentWord.text; // Sets textContent directly\n } else {\n wordContainer.wordText = \"\"; // Hides element\n }\n }\n\n for (const segmentContainer of this.segmentContainers) {\n if (currentSegment) {\n segmentContainer.segmentText = currentSegment.text; // Sets textContent directly\n } else {\n segmentContainer.segmentText = \"\"; // Hides element\n }\n }\n\n // Process context for both word and segment cases\n if (currentWord && currentSegment) {\n const segmentWords = captionsData.word_segments.filter(\n (word) =>\n word.start >= currentSegment.start && word.end <= currentSegment.end,\n );\n\n const currentWordIndex = segmentWords.findIndex(\n (word) =>\n word.start === currentWord.start && word.end === currentWord.end,\n );\n\n if (currentWordIndex !== -1) {\n const beforeWords = segmentWords\n .slice(0, currentWordIndex)\n .map((w) => w.text.trim())\n .join(\" \");\n\n const afterWords = segmentWords\n .slice(currentWordIndex + 1)\n .map((w) => w.text.trim())\n .join(\" \");\n\n for (const container of this.beforeActiveWordContainers) {\n container.segmentText = beforeWords; // Sets textContent directly\n }\n\n for (const container of this.afterActiveWordContainers) {\n container.segmentText = afterWords; // Sets textContent directly\n }\n }\n } else if (currentSegment) {\n const segmentWords = captionsData.word_segments.filter(\n (word) =>\n word.start >= currentSegment.start && word.end <= currentSegment.end,\n );\n\n const firstWord = segmentWords[0];\n const isBeforeFirstWord = firstWord && currentTimeSec < firstWord.start;\n\n if (isBeforeFirstWord) {\n const allWords = segmentWords.map((w) => w.text.trim()).join(\" \");\n\n for (const container of this.beforeActiveWordContainers) {\n container.segmentText = \"\"; // Hides element\n }\n\n for (const container of this.afterActiveWordContainers) {\n container.segmentText = allWords; // Sets textContent directly\n }\n } else {\n const allCompletedWords = segmentWords\n .map((w) => w.text.trim())\n .join(\" \");\n\n for (const container of this.beforeActiveWordContainers) {\n container.segmentText = allCompletedWords; // Sets textContent directly\n }\n\n for (const container of this.afterActiveWordContainers) {\n container.segmentText = \"\"; // Hides element\n }\n }\n } else {\n for (const container of this.beforeActiveWordContainers) {\n container.segmentText = \"\"; // Hides element\n }\n\n for (const container of this.afterActiveWordContainers) {\n container.segmentText = \"\"; // Hides element\n }\n }\n }\n\n get targetElement() {\n const target = document.getElementById(this.targetSelector ?? \"\");\n if (target instanceof EFAudio \|\| target instanceof EFVideo) {\n return target;\n }\n if (this.hasCustomCaptionsData) {\n return null;\n }\n return null;\n }\n\n get hasCustomCaptionsData(): boolean {\n return !!(this.captionsData \|\| this.captionsSrc \|\| this.captionsScript);\n }\n\n get intrinsicDurationMs(): number \| undefined {\n if (this.#cachedIntrinsicDurationMs !== null) {\n return this.#cachedIntrinsicDurationMs;\n }\n\n let captionsData: Caption \| null = null;\n\n if (this.captionsData) {\n captionsData = this.captionsData;\n } else if (this.captionsScript) {\n const scriptElement = document.getElementById(this.captionsScript);\n if (scriptElement?.textContent) {\n try {\n captionsData = JSON.parse(scriptElement.textContent) as Caption;\n } catch {\n // Invalid JSON\n }\n }\n } else if (this.#captionsDataValue) {\n captionsData = this.#captionsDataValue;\n }\n\n if (!captionsData) {\n if (!this.captionsData && !this.captionsScript && !this.captionsSrc) {\n this.#cachedIntrinsicDurationMs = undefined;\n }\n return undefined;\n }\n\n let result: number;\n if (\n captionsData.segments.length === 0 &&\n captionsData.word_segments.length === 0\n ) {\n result = 0;\n } else {\n const maxSegmentEnd =\n captionsData.segments.length > 0\n ? captionsData.segments.reduce(\n (max, s) => (s.end > max ? s.end : max),\n 0,\n )\n : 0;\n const maxWordEnd =\n captionsData.word_segments.length > 0\n ? captionsData.word_segments.reduce(\n (max, w) => (w.end > max ? w.end : max),\n 0,\n )\n : 0;\n\n result = Math.max(maxSegmentEnd, maxWordEnd) 1000;\n }\n\n this.#cachedIntrinsicDurationMs = result;\n return result;\n }\n\n get hasOwnDuration(): boolean {\n return !!(\n this.captionsData \|\|\n this.captionsScript \|\|\n this.#captionsDataValue\n );\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"ef-captions\": EFCaptions;\n \"ef-captions-active-word\": EFCaptionsActiveWord;\n \"ef-captions-segment\": EFCaptionsSegment;\n \"ef-captions-before-active-word\": EFCaptionsBeforeActiveWord;\n \"ef-captions-after-active-word\": EFCaptionsAfterActiveWord;\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"EFCaptions.js","names":["EFCaptionsActiveWord","#wordText","#wordIndex","EFCaptionsSegment","#segmentText","EFCaptionsBeforeActiveWord","EFCaptionsAfterActiveWord","EFCaptions","#captionsDataLoaded","#captionsDataValue","#captionsDataPromise","#doLoadCaptionsData","#transcriptionData","#loadTranscriptionFragment","#rootTimegroupUpdateController","#cachedIntrinsicDurationMs","captionsData: Caption \| null","result: number"],"sources":["../../src/elements/EFCaptions.ts"],"sourcesContent":["import { css, html, LitElement, type PropertyValueMap } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport type { ReactiveController } from \"lit\";\nimport type { GetISOBMFFFileTranscriptionResult } from \"../../../api/src/index.js\";\nimport {\n type FrameRenderable,\n type FrameState,\n createFrameTaskWrapper,\n PRIORITY_CAPTIONS,\n} from \"../preview/FrameController.js\";\nimport { AsyncValue } from \"./EFMedia.js\";\nimport { CrossUpdateController } from \"./CrossUpdateController.js\";\nimport { EFAudio } from \"./EFAudio.js\";\nimport { EFSourceMixin } from \"./EFSourceMixin.js\";\nimport { EFTemporal, flushStartTimeMsCache } from \"./EFTemporal.js\";\nimport {\n flushSequenceDurationCache,\n EFTimegroup,\n} from \"./EFTimegroup.js\";\nimport { EFVideo } from \"./EFVideo.js\";\nimport { FetchMixin } from \"./FetchMixin.js\";\n\nexport interface WordSegment {\n text: string;\n start: number;\n end: number;\n}\n\nexport interface Segment {\n start: number;\n end: number;\n text: string;\n}\n\nexport interface Caption {\n segments: Segment[];\n word_segments: WordSegment[];\n}\n\nconst stopWords = new Set([\"\", \".\", \"!\", \"?\", \",\"]);\n\n/*\n Caption active word element - displays the currently spoken word.\n * Uses light DOM for simplicity - parent sets textContent directly.\n /\n@customElement(\"ef-captions-active-word\")\nexport class EFCaptionsActiveWord extends HTMLElement {\n #wordText = \"\";\n #wordIndex = 0;\n \n set wordText(text: string) {\n this.#wordText = text;\n // Hide element if no content or only stop words\n if (!text \|\| stopWords.has(text)) {\n this.hidden = true;\n this.textContent = \"\";\n } else {\n this.hidden = false;\n // Add trailing space to maintain consistent spacing with surrounding words\n this.textContent = text + \" \";\n }\n }\n \n get wordText(): string {\n return this.#wordText;\n }\n \n set wordIndex(index: number) {\n this.#wordIndex = index;\n // Set deterministic --ef-word-seed value based on word index\n const seed = (index 9007) % 233; // Prime numbers for better distribution\n const seedValue = seed / 233; // Normalize to 0-1 range\n this.style.setProperty(\"--ef-word-seed\", seedValue.toString());\n }\n \n get wordIndex(): number {\n return this.#wordIndex;\n }\n}\n\n/*\n Caption segment element - displays a full caption segment.\n * Uses light DOM for simplicity - parent sets textContent directly.\n /\n@customElement(\"ef-captions-segment\")\nexport class EFCaptionsSegment extends HTMLElement {\n #segmentText = \"\";\n \n set segmentText(text: string) {\n this.#segmentText = text;\n // Hide element if no content or only stop words\n if (!text \|\| stopWords.has(text)) {\n this.hidden = true;\n this.textContent = \"\";\n } else {\n this.hidden = false;\n this.textContent = text;\n }\n }\n \n get segmentText(): string {\n return this.#segmentText;\n }\n}\n\n/\n Caption before-active-word element - displays words before the current word.\n * Uses light DOM for simplicity - parent sets textContent directly.\n /\n@customElement(\"ef-captions-before-active-word\")\nexport class EFCaptionsBeforeActiveWord extends EFCaptionsSegment {\n set segmentText(text: string) {\n // Check if there's an active word by looking for sibling active word element\n const activeWord = this.closest(\"ef-captions\")?.querySelector(\n \"ef-captions-active-word\",\n ) as EFCaptionsActiveWord;\n const hasActiveWord = activeWord?.wordText;\n \n // Add trailing space if there's an active word coming after us\n const finalText = text && hasActiveWord ? text + \" \" : text;\n \n // Hide element if no content or only stop words\n if (!finalText \|\| stopWords.has(finalText)) {\n this.hidden = true;\n this.textContent = \"\";\n } else {\n this.hidden = false;\n this.textContent = finalText;\n }\n }\n}\n\n/\n Caption after-active-word element - displays words after the current word.\n * Uses light DOM for simplicity - parent sets textContent directly.\n /\n@customElement(\"ef-captions-after-active-word\")\nexport class EFCaptionsAfterActiveWord extends EFCaptionsSegment {\n set segmentText(text: string) {\n // No leading space - active word will add trailing space\n const finalText = text;\n \n // Hide element if no content or only stop words\n if (!finalText \|\| stopWords.has(finalText)) {\n this.hidden = true;\n this.textContent = \"\";\n } else {\n this.hidden = false;\n this.textContent = finalText;\n }\n }\n}\n\n@customElement(\"ef-captions\")\nexport class EFCaptions extends EFSourceMixin(\n EFTemporal(FetchMixin(LitElement)),\n { assetType: \"caption_files\" },\n) implements FrameRenderable {\n static styles = [\n css`\n :host {\n display: block;\n white-space: normal;\n line-height: 1;\n gap: 0;\n }\n ::slotted() {\n display: inline;\n margin: 0;\n padding: 0;\n }\n `,\n ];\n\n @property({ type: String, attribute: \"target\", reflect: true })\n targetSelector = \"\";\n\n set target(value: string) {\n this.targetSelector = value;\n }\n\n @property({ attribute: \"word-style\" })\n wordStyle = \"\";\n\n /*\n URL or path to a JSON file containing custom captions data.\n * The JSON should conform to the Caption interface with 'segments' and 'word_segments' arrays.\n /\n @property({ type: String, attribute: \"captions-src\", reflect: true })\n captionsSrc = \"\";\n\n /\n Direct captions data object. Takes priority over captions-src and captions-script.\n * Should conform to the Caption interface with 'segments' and 'word_segments' arrays.\n /\n @property({ type: Object, attribute: false })\n captionsData: Caption \| null = null;\n\n /\n ID of a <script> element containing JSON captions data.\n * The script's textContent should be valid JSON conforming to the Caption interface.\n /\n @property({ type: String, attribute: \"captions-script\", reflect: true })\n captionsScript = \"\";\n\n activeWordContainers = this.getElementsByTagName(\"ef-captions-active-word\");\n segmentContainers = this.getElementsByTagName(\"ef-captions-segment\");\n beforeActiveWordContainers = this.getElementsByTagName(\n \"ef-captions-before-active-word\",\n );\n afterActiveWordContainers = this.getElementsByTagName(\n \"ef-captions-after-active-word\",\n );\n\n // Cache for intrinsicDurationMs to avoid expensive O(n) recalculation every frame\n #cachedIntrinsicDurationMs: number \| undefined \| null = null; // null = not computed, undefined = no duration\n\n render() {\n return html`<slot></slot>`;\n }\n\n transcriptionsPath() {\n if (!this.targetElement) {\n return null;\n }\n if (this.targetElement.assetId) {\n return `${this.apiHost}/api/v1/isobmff_files/${this.targetElement.assetId}/transcription`;\n }\n return null;\n }\n\n captionsPath() {\n if (!this.targetElement) {\n return null;\n }\n if (this.targetElement.assetId) {\n return `${this.apiHost}/api/v1/caption_files/${this.targetElement.assetId}`;\n }\n const targetSrc = this.targetElement.src;\n // Normalize the path: remove leading slash and any double slashes\n let normalizedSrc = targetSrc.startsWith(\"/\")\n ? targetSrc.slice(1)\n : targetSrc;\n normalizedSrc = normalizedSrc.replace(/^\\/+/, \"\");\n // Use production API format for local files\n return `/api/v1/assets/local/captions?src=${encodeURIComponent(normalizedSrc)}`;\n }\n\n // ============================================================================\n // Captions Data Loading - async methods instead of Tasks\n // ============================================================================\n\n #captionsDataLoaded = false;\n #captionsDataPromise: Promise<Caption \| null> \| null = null;\n #captionsDataValue: Caption \| null = null;\n #transcriptionData: GetISOBMFFFileTranscriptionResult \| null = null;\n\n /\n AsyncValue wrapper for backwards compatibility\n /\n unifiedCaptionsDataTask = new AsyncValue<Caption \| null>();\n\n /\n Load captions data from all possible sources\n /\n async loadCaptionsData(signal?: AbortSignal): Promise<Caption \| null> {\n // Return cached if already loaded\n if (this.#captionsDataLoaded && this.#captionsDataValue) {\n return this.#captionsDataValue;\n }\n\n // Return in-flight promise\n if (this.#captionsDataPromise) {\n return this.#captionsDataPromise;\n }\n\n this.unifiedCaptionsDataTask.startPending();\n this.#captionsDataPromise = this.#doLoadCaptionsData(signal);\n\n try {\n this.#captionsDataValue = await this.#captionsDataPromise;\n this.#captionsDataLoaded = true;\n if (this.#captionsDataValue) {\n this.unifiedCaptionsDataTask.setValue(this.#captionsDataValue);\n }\n return this.#captionsDataValue;\n } catch (error) {\n if (error instanceof DOMException && error.name === \"AbortError\") {\n throw error;\n }\n console.error(\"Failed to load captions data:\", error);\n return null;\n } finally {\n this.#captionsDataPromise = null;\n }\n }\n\n async #doLoadCaptionsData(signal?: AbortSignal): Promise<Caption \| null> {\n // Priority 1: Direct captionsData property\n if (this.captionsData) {\n return this.captionsData;\n }\n\n // Priority 2: Script element reference\n if (this.captionsScript) {\n const scriptElement = document.getElementById(this.captionsScript);\n if (scriptElement?.textContent) {\n try {\n return JSON.parse(scriptElement.textContent) as Caption;\n } catch (error) {\n console.error(`Failed to parse captions from script #${this.captionsScript}:`, error);\n }\n }\n }\n\n // Priority 3: External captions file\n if (this.captionsSrc) {\n try {\n const response = await this.fetch(this.captionsSrc, { signal });\n return await response.json() as Caption;\n } catch (error) {\n if (error instanceof DOMException && error.name === \"AbortError\") {\n throw error;\n }\n console.error(`Failed to load captions from ${this.captionsSrc}:`, error);\n }\n }\n\n // Priority 4: Transcription from target element\n if (this.targetElement && !this.hasCustomCaptionsData) {\n const transcriptionPath = this.transcriptionsPath();\n if (transcriptionPath) {\n try {\n const response = await this.fetch(transcriptionPath, { signal });\n this.#transcriptionData = await response.json() as GetISOBMFFFileTranscriptionResult;\n signal?.throwIfAborted();\n\n // Load fragment for current time\n if (this.#transcriptionData) {\n return this.#loadTranscriptionFragment(signal);\n }\n } catch (error) {\n if (error instanceof DOMException && error.name === \"AbortError\") {\n throw error;\n }\n // Transcription not available - not an error\n }\n }\n }\n\n return null;\n }\n\n async #loadTranscriptionFragment(signal?: AbortSignal): Promise<Caption \| null> {\n if (!this.#transcriptionData) return null;\n\n const fragmentIndex = Math.floor(this.ownCurrentTimeMs / this.#transcriptionData.work_slice_ms);\n const fragmentPath = `${this.apiHost}/api/v1/transcriptions/${this.#transcriptionData.id}/fragments/${fragmentIndex}`;\n\n try {\n const response = await this.fetch(fragmentPath, { signal });\n return await response.json() as Caption;\n } catch (error) {\n if (error instanceof DOMException && error.name === \"AbortError\") {\n throw error;\n }\n console.error(\"Failed to load transcription fragment:\", error);\n return null;\n }\n }\n\n /\n @deprecated Use FrameRenderable methods (prepareFrame, renderFrame) via FrameController instead.\n * This is a compatibility wrapper that delegates to the new system.\n /\n frameTask = createFrameTaskWrapper(this);\n\n // ============================================================================\n // FrameRenderable Implementation\n // Centralized frame control - no Lit Tasks\n // ============================================================================\n\n /\n Query readiness state for a given time.\n * @implements FrameRenderable\n /\n getFrameState(_timeMs: number): FrameState {\n // Check if captions data is loaded\n const hasData = this.#captionsDataLoaded && this.#captionsDataValue !== null;\n\n return {\n needsPreparation: !hasData,\n isReady: hasData,\n priority: PRIORITY_CAPTIONS,\n };\n }\n\n /\n Async preparation - waits for captions data to load.\n * @implements FrameRenderable\n /\n async prepareFrame(_timeMs: number, signal: AbortSignal): Promise<void> {\n await this.loadCaptionsData(signal);\n signal.throwIfAborted();\n }\n\n /\n Synchronous render - updates caption text containers.\n * Sets textContent directly on child elements (light DOM).\n * @implements FrameRenderable\n /\n renderFrame(_timeMs: number): void {\n // Update text containers by setting properties\n // Child elements update their textContent directly (light DOM)\n this.updateTextContainers();\n }\n\n // ============================================================================\n // End FrameRenderable Implementation\n // ============================================================================\n\n #rootTimegroupUpdateController?: ReactiveController;\n\n connectedCallback() {\n super.connectedCallback();\n\n // Start loading captions data\n this.loadCaptionsData().catch(() => {});\n\n // Try to get target element safely\n const target = this.targetSelector\n ? document.getElementById(this.targetSelector)\n : null;\n if (target && (target instanceof EFAudio \|\| target instanceof EFVideo)) {\n new CrossUpdateController(target, this);\n }\n // For standalone captions with custom data, ensure proper timeline sync\n else if (this.hasCustomCaptionsData && this.rootTimegroup) {\n new CrossUpdateController(this.rootTimegroup, this);\n }\n\n // Ensure captions update when root timegroup's currentTimeMs changes\n if (this.rootTimegroup) {\n this.#rootTimegroupUpdateController = {\n hostUpdated: () => {\n Promise.resolve().then(() => {\n this.updateTextContainers();\n });\n },\n hostDisconnected: () => {\n this.#rootTimegroupUpdateController = undefined;\n },\n };\n this.rootTimegroup.addController(this.#rootTimegroupUpdateController);\n }\n\n // Prevent display:none from being set on the parent caption element.\n // IMPORTANT: This only applies to the parent <ef-captions> element, NOT to\n // caption child elements (<ef-captions-segment>, <ef-captions-active-word>, etc.).\n // Child elements MUST respect display:none for proper temporal visibility\n // in video rendering. Video export relies on display:none to hide elements\n // outside their time range.\n const observer = new MutationObserver(() => {\n if (this.style.display === \"none\") {\n this.style.removeProperty(\"display\");\n this.style.opacity = \"0\";\n this.style.pointerEvents = \"none\";\n } else if (!this.style.display \|\| this.style.display === \"\") {\n this.style.removeProperty(\"opacity\");\n this.style.removeProperty(\"pointer-events\");\n }\n });\n observer.observe(this, { attributes: true, attributeFilter: [\"style\"] });\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n if (this.#rootTimegroupUpdateController && this.rootTimegroup) {\n this.rootTimegroup.removeController(this.#rootTimegroupUpdateController);\n this.#rootTimegroupUpdateController = undefined;\n }\n }\n\n protected updated(\n changedProperties: PropertyValueMap<any> \| Map<PropertyKey, unknown>,\n ): void {\n // Set up root timegroup controller if rootTimegroup is now available\n if (this.rootTimegroup && !this.#rootTimegroupUpdateController) {\n this.#rootTimegroupUpdateController = {\n hostUpdated: () => {\n Promise.resolve().then(() => {\n this.updateTextContainers();\n });\n },\n hostDisconnected: () => {\n this.#rootTimegroupUpdateController = undefined;\n },\n };\n this.rootTimegroup.addController(this.#rootTimegroupUpdateController);\n }\n\n // Clean up controller if rootTimegroup changed\n if (\n changedProperties.has(\"rootTimegroup\") &&\n this.#rootTimegroupUpdateController\n ) {\n const oldRootTimegroup = changedProperties.get(\"rootTimegroup\") as\n \| EFTimegroup\n \| undefined;\n if (oldRootTimegroup && oldRootTimegroup !== this.rootTimegroup) {\n oldRootTimegroup.removeController(this.#rootTimegroupUpdateController);\n this.#rootTimegroupUpdateController = undefined;\n }\n }\n\n this.updateTextContainers();\n\n // Force duration recalculation when custom captions data changes\n if (\n changedProperties.has(\"captionsData\") \|\|\n changedProperties.has(\"captionsSrc\") \|\|\n changedProperties.has(\"captionsScript\")\n ) {\n // Invalidate caches and reload\n this.#cachedIntrinsicDurationMs = null;\n this.#captionsDataLoaded = false;\n this.#captionsDataValue = null;\n this.loadCaptionsData().catch(() => {});\n\n this.requestUpdate(\"intrinsicDurationMs\");\n\n flushSequenceDurationCache();\n flushStartTimeMsCache();\n\n if (this.parentTimegroup) {\n this.parentTimegroup.requestUpdate(\"durationMs\");\n this.parentTimegroup.requestUpdate(\"currentTime\");\n }\n }\n\n // Update captions when timeline position changes\n if (changedProperties.has(\"ownCurrentTimeMs\")) {\n this.updateTextContainers();\n }\n }\n\n updateTextContainers() {\n const captionsData = this.#captionsDataValue;\n if (!captionsData) {\n return;\n }\n\n // For captions with custom data, try to use the video's source time\n let currentTimeMs = this.ownCurrentTimeMs;\n if (this.hasCustomCaptionsData && this.parentTimegroup) {\n const videoElement = Array.from(this.parentTimegroup.children).find(\n (child): child is EFVideo => child instanceof EFVideo,\n );\n if (videoElement) {\n const sourceInMs = videoElement.sourceInMs ?? 0;\n currentTimeMs = videoElement.currentSourceTimeMs - sourceInMs;\n currentTimeMs = Math.max(0, Math.min(currentTimeMs, this.durationMs));\n }\n }\n\n const currentTimeSec = currentTimeMs / 1000;\n\n // Find the current word from word_segments\n const currentWord = captionsData.word_segments.find(\n (word) => currentTimeSec >= word.start && currentTimeSec < word.end,\n );\n\n // Find the current segment\n const currentSegment = captionsData.segments.find(\n (segment) =>\n currentTimeSec >= segment.start && currentTimeSec < segment.end,\n );\n\n for (const wordContainer of this.activeWordContainers) {\n if (currentWord) {\n const wordIndex = captionsData.word_segments.findIndex(\n (w) =>\n w.start === currentWord.start &&\n w.end === currentWord.end &&\n w.text === currentWord.text,\n );\n wordContainer.wordIndex = wordIndex >= 0 ? wordIndex : 0;\n wordContainer.wordText = currentWord.text; // Sets textContent directly\n } else {\n wordContainer.wordText = \"\"; // Hides element\n }\n }\n\n for (const segmentContainer of this.segmentContainers) {\n if (currentSegment) {\n segmentContainer.segmentText = currentSegment.text; // Sets textContent directly\n } else {\n segmentContainer.segmentText = \"\"; // Hides element\n }\n }\n\n // Process context for both word and segment cases\n if (currentWord && currentSegment) {\n const segmentWords = captionsData.word_segments.filter(\n (word) =>\n word.start >= currentSegment.start && word.end <= currentSegment.end,\n );\n\n const currentWordIndex = segmentWords.findIndex(\n (word) =>\n word.start === currentWord.start && word.end === currentWord.end,\n );\n\n if (currentWordIndex !== -1) {\n const beforeWords = segmentWords\n .slice(0, currentWordIndex)\n .map((w) => w.text.trim())\n .join(\" \");\n\n const afterWords = segmentWords\n .slice(currentWordIndex + 1)\n .map((w) => w.text.trim())\n .join(\" \");\n\n for (const container of this.beforeActiveWordContainers) {\n container.segmentText = beforeWords; // Sets textContent directly\n }\n\n for (const container of this.afterActiveWordContainers) {\n container.segmentText = afterWords; // Sets textContent directly\n }\n }\n } else if (currentSegment) {\n const segmentWords = captionsData.word_segments.filter(\n (word) =>\n word.start >= currentSegment.start && word.end <= currentSegment.end,\n );\n\n const firstWord = segmentWords[0];\n const isBeforeFirstWord = firstWord && currentTimeSec < firstWord.start;\n\n if (isBeforeFirstWord) {\n const allWords = segmentWords.map((w) => w.text.trim()).join(\" \");\n\n for (const container of this.beforeActiveWordContainers) {\n container.segmentText = \"\"; // Hides element\n }\n\n for (const container of this.afterActiveWordContainers) {\n container.segmentText = allWords; // Sets textContent directly\n }\n } else {\n const allCompletedWords = segmentWords\n .map((w) => w.text.trim())\n .join(\" \");\n\n for (const container of this.beforeActiveWordContainers) {\n container.segmentText = allCompletedWords; // Sets textContent directly\n }\n\n for (const container of this.afterActiveWordContainers) {\n container.segmentText = \"\"; // Hides element\n }\n }\n } else {\n for (const container of this.beforeActiveWordContainers) {\n container.segmentText = \"\"; // Hides element\n }\n\n for (const container of this.afterActiveWordContainers) {\n container.segmentText = \"\"; // Hides element\n }\n }\n }\n\n get targetElement() {\n const target = document.getElementById(this.targetSelector ?? \"\");\n if (target instanceof EFAudio \|\| target instanceof EFVideo) {\n return target;\n }\n if (this.hasCustomCaptionsData) {\n return null;\n }\n return null;\n }\n\n get hasCustomCaptionsData(): boolean {\n return !!(this.captionsData \|\| this.captionsSrc \|\| this.captionsScript);\n }\n\n get intrinsicDurationMs(): number \| undefined {\n if (this.#cachedIntrinsicDurationMs !== null) {\n return this.#cachedIntrinsicDurationMs;\n }\n\n let captionsData: Caption \| null = null;\n\n if (this.captionsData) {\n captionsData = this.captionsData;\n } else if (this.captionsScript) {\n const scriptElement = document.getElementById(this.captionsScript);\n if (scriptElement?.textContent) {\n try {\n captionsData = JSON.parse(scriptElement.textContent) as Caption;\n } catch {\n // Invalid JSON\n }\n }\n } else if (this.#captionsDataValue) {\n captionsData = this.#captionsDataValue;\n }\n\n if (!captionsData) {\n if (!this.captionsData && !this.captionsScript && !this.captionsSrc) {\n this.#cachedIntrinsicDurationMs = undefined;\n }\n return undefined;\n }\n\n let result: number;\n if (\n captionsData.segments.length === 0 &&\n captionsData.word_segments.length === 0\n ) {\n result = 0;\n } else {\n const maxSegmentEnd =\n captionsData.segments.length > 0\n ? captionsData.segments.reduce(\n (max, s) => (s.end > max ? s.end : max),\n 0,\n )\n : 0;\n const maxWordEnd =\n captionsData.word_segments.length > 0\n ? captionsData.word_segments.reduce(\n (max, w) => (w.end > max ? w.end : max),\n 0,\n )\n : 0;\n\n result = Math.max(maxSegmentEnd, maxWordEnd) 1000;\n }\n\n this.#cachedIntrinsicDurationMs = result;\n return result;\n }\n\n get hasOwnDuration(): boolean {\n return !!(\n this.captionsData \|\|\n this.captionsScript \|\|\n this.#captionsDataValue\n );\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"ef-captions\": EFCaptions;\n \"ef-captions-active-word\": EFCaptionsActiveWord;\n \"ef-captions-segment\": EFCaptionsSegment;\n \"ef-captions-before-active-word\": EFCaptionsBeforeActiveWord;\n \"ef-captions-after-active-word\": EFCaptionsAfterActiveWord;\n }\n}\n"],"mappings":"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"}

package/dist/elements/updateAnimations.js CHANGED Viewed

@@ -25,6 +25,10 @@ const domStructureChanged = /* @__PURE__ */ new WeakMap();
 */
 const lastAnimationCount = /* @__PURE__ */ new WeakMap();
 /**
+* Tracks which animations have already been validated to avoid duplicate warnings.
+*/
+const validatedAnimations = /* @__PURE__ */ new WeakSet();
+/**
 * Checks if an element is in a render clone (static DOM context).
 * Render clones are in containers with class "ef-render-clone-container".
 */
@@ -392,6 +396,76 @@ const extractAnimationTiming = (effect) => {
 	};
 };
 /**
+* Analyzes keyframes to detect if animation is a fade-in or fade-out effect.
+* Returns 'fade-in', 'fade-out', 'both', or null.
+*/
+const detectFadePattern = (keyframes) => {
+	if (!keyframes || keyframes.length < 2) return null;
+	const firstFrame = keyframes[0];
+	const lastFrame = keyframes[keyframes.length - 1];
+	const firstOpacity = firstFrame && "opacity" in firstFrame ? Number(firstFrame.opacity) : null;
+	const lastOpacity = lastFrame && "opacity" in lastFrame ? Number(lastFrame.opacity) : null;
+	if (firstOpacity === null || lastOpacity === null) return null;
+	const isFadeIn = firstOpacity < lastOpacity;
+	const isFadeOut = firstOpacity > lastOpacity;
+	if (isFadeIn && isFadeOut) return "both";
+	if (isFadeIn) return "fade-in";
+	if (isFadeOut) return "fade-out";
+	return null;
+};
+/**
+* Analyzes keyframes to detect if animation has transform changes (slide, scale, etc).
+*/
+const hasTransformAnimation = (keyframes) => {
+	if (!keyframes || keyframes.length < 2) return false;
+	return keyframes.some((frame) => "transform" in frame || "translate" in frame || "scale" in frame || "rotate" in frame);
+};
+/**
+* Validates CSS animation fill-mode to prevent flashing issues.
+*
+* CRITICAL: Editframe's timeline system pauses animations and manually controls them
+* via animation.currentTime. This means elements exist in the DOM before their animations
+* start. Without proper fill-mode, elements will "flash" to their natural state before
+* the animation begins.
+*
+* Common issues:
+* - Delayed animations without 'backwards': Element shows natural state during delay
+* - Fade-in without 'backwards': Element visible before fade starts
+* - Fade-out without 'forwards': Element snaps back after fade completes
+*
+* Only runs in development mode to avoid performance impact in production.
+*/
+const validateAnimationFillMode = (animation, timing) => {
+	if (validatedAnimations.has(animation)) return;
+	validatedAnimations.add(animation);
+	const effect = animation.effect;
+	if (!validateAnimationEffect(effect)) return;
+	const fill = effect.getTiming().fill || "none";
+	const target = effect.target;
+	let animationName = "unknown";
+	if (animation.id) animationName = animation.id;
+	else if (target instanceof HTMLElement) {
+		const animationNameValue = window.getComputedStyle(target).animationName;
+		if (animationNameValue && animationNameValue !== "none") animationName = animationNameValue.split(",")[0]?.trim() || "unknown";
+	}
+	const warnings = [];
+	if (timing.delay > 0 && fill !== "backwards" && fill !== "both") warnings.push(`⚠️  Animation "${animationName}" has a ${timing.delay}ms delay but no 'backwards' fill-mode.`, `   This will cause the element to show its natural state during the delay, then suddenly jump when the animation starts.`, `   Fix: Add 'backwards' or 'both' to the animation shorthand.`, `   Example: animation: ${animationName} ${timing.duration}ms ${timing.delay}ms backwards;`);
+	try {
+		const keyframes = effect.getKeyframes();
+		const fadePattern = detectFadePattern(keyframes);
+		const hasTransform = hasTransformAnimation(keyframes);
+		if ((fadePattern === "fade-in" || hasTransform) && fill !== "backwards" && fill !== "both") warnings.push(`⚠️  Animation "${animationName}" appears to be a fade-in or slide-in effect but lacks 'backwards' fill-mode.`, `   The element will be visible in its natural state before the animation starts.`, `   Fix: Add 'backwards' or 'both' to the animation.`, `   Example: animation: ${animationName} ${timing.duration}ms backwards;`);
+		if (fadePattern === "fade-out" && fill !== "forwards" && fill !== "both") warnings.push(`⚠️  Animation "${animationName}" appears to be a fade-out effect but lacks 'forwards' fill-mode.`, `   The element will snap back to its natural state after the animation completes.`, `   Fix: Add 'forwards' or 'both' to the animation.`, `   Example: animation: ${animationName} ${timing.duration}ms forwards;`);
+		if (fadePattern === "both" && fill !== "both") warnings.push(`⚠️  Animation "${animationName}" has both fade-in and fade-out keyframes but doesn't use 'both' fill-mode.`, `   Fix: Use 'both' to apply initial and final states.`, `   Example: animation: ${animationName} ${timing.duration}ms both;`);
+	} catch (e) {}
+	if (warnings.length > 0) {
+		console.group("%c🎬 Editframe Animation Fill-Mode Warning", "color: #f59e0b; font-weight: bold");
+		warnings.forEach((warning) => console.log(warning));
+		console.log("\n📚 Learn more: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode");
+		console.groupEnd();
+	}
+};
+/**
 * Prepares animation for manual control by ensuring it's paused
 */
 const prepareAnimation = (animation) => {
@@ -441,6 +515,7 @@ const synchronizeAnimation = (animation, element) => {
 		animation.currentTime = 0;
 		return;
 	}
+	validateAnimationFillMode(animation, timing);
 	const target = effect.target;
 	let timeSource = element;
 	if (target && target instanceof HTMLElement) {