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

package/src/elements/EFCaptions.ts

@@ -36,11 +36,12 @@ export class EFCaptionsActiveWord extends EFTemporal(LitElement) {
     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;
       }
     `,
   ];
@@ -57,7 +58,7 @@ export class EFCaptionsActiveWord extends EFTemporal(LitElement) {
     const seedValue = seed / 233; // Normalize to 0-1 range
     this.style.setProperty("--ef-word-seed", seedValue.toString());
 
-    return html` ${this.wordText.trim()} `;
+    return html`${this.wordText}`;
   }
 
   @property({ type: Number, attribute: false })
@@ -98,10 +99,9 @@ export class EFCaptionsSegment extends EFTemporal(LitElement) {
   static styles = [
     css`
       :host {
-        display: block;
-      }
-      :host([hidden]) {
-        display: none;
+        display: inline-block;
+        white-space: normal;
+        line-height: 1;
       }
     `,
   ];
@@ -152,9 +152,11 @@ export class EFCaptionsBeforeActiveWord extends EFCaptionsSegment {
       :host {
         display: inline-block;
         white-space: pre;
+        line-height: 1;
       }
       :host([hidden]) {
-        display: none;
+        opacity: 0;
+        pointer-events: none;
       }
     `,
   ];
@@ -165,7 +167,14 @@ export class EFCaptionsBeforeActiveWord extends EFCaptionsSegment {
       return undefined;
     }
     this.hidden = false;
-    return html` ${this.segmentText}`;
+
+    // Check if there's an active word by looking for sibling active word element
+    const activeWord = this.closest("ef-captions")?.querySelector(
+      "ef-captions-active-word",
+    );
+    const hasActiveWord = activeWord?.wordText && !activeWord.hidden;
+
+    return html`${this.segmentText}${hasActiveWord ? " " : ""}`;
   }
 
   @property({ type: Boolean, reflect: true })
@@ -205,9 +214,11 @@ export class EFCaptionsAfterActiveWord extends EFCaptionsSegment {
       :host {
         display: inline-block;
         white-space: pre;
+        line-height: 1;
       }
       :host([hidden]) {
-        display: none;
+        opacity: 0;
+        pointer-events: none;
       }
     `,
   ];
@@ -218,7 +229,14 @@ export class EFCaptionsAfterActiveWord extends EFCaptionsSegment {
       return undefined;
     }
     this.hidden = false;
-    return html`${this.segmentText} `;
+
+    // Check if there's an active word by looking for sibling active word element
+    const activeWord = this.closest("ef-captions")?.querySelector(
+      "ef-captions-active-word",
+    );
+    const hasActiveWord = activeWord?.wordText && !activeWord.hidden;
+
+    return html`${hasActiveWord ? " " : ""}${this.segmentText}`;
   }
 
   @property({ type: Boolean, reflect: true })
@@ -260,31 +278,18 @@ export class EFCaptions extends EFSourceMixin(
     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;
-      }
     `,
   ];
 
-  @property({ type: String, attribute: "display-mode", reflect: true })
-  displayMode: "word" | "segment" | "context" = "segment";
-
-  @property({ type: Number, attribute: "context-words", reflect: true })
-  contextWords = 3;
-
   @property({ type: String, attribute: "target", reflect: true })
   targetSelector = "";
 
@@ -499,9 +504,11 @@ export class EFCaptions extends EFSourceMixin(
 
   frameTask = new Task(this, {
     autoRun: EF_INTERACTIVE,
-    args: () => [this.unifiedCaptionsDataTask.status],
+    args: () => [this.unifiedCaptionsDataTask.status, this.ownCurrentTimeMs],
     task: async () => {
       await this.unifiedCaptionsDataTask.taskComplete;
+      // Trigger updateTextContainers when data is ready or time changes
+      this.updateTextContainers();
     },
   });
 
@@ -519,6 +526,18 @@ export class EFCaptions extends EFSourceMixin(
     else if (this.hasCustomCaptionsData && this.rootTimegroup) {
       new CrossUpdateController(this.rootTimegroup, this);
     }
+
+    // Prevent display:none from being set on caption elements
+    // This maintains constant width in the parent flex container
+    const observer = new MutationObserver(() => {
+      if (this.style.display === "none") {
+        // Remove the display:none and use opacity instead
+        this.style.removeProperty("display");
+        this.style.opacity = "0";
+        this.style.pointerEvents = "none";
+      }
+    });
+    observer.observe(this, { attributes: true, attributeFilter: ["style"] });
   }
 
   protected updated(
@@ -557,10 +576,8 @@ export class EFCaptions extends EFSourceMixin(
       return;
     }
 
-    // Get current time from target element or parent timegroup
-    const currentTimeMs = this.targetElement
-      ? this.targetElement.currentSourceTimeMs
-      : this.ownCurrentTimeMs;
+    // Use ownCurrentTimeMs which is synchronized with the timegroup
+    const currentTimeMs = this.ownCurrentTimeMs;
     const currentTimeSec = currentTimeMs / 1000;
 
     // Find the current word from word_segments
@@ -611,6 +628,7 @@ export class EFCaptions extends EFSourceMixin(
         segmentContainer.segmentStartMs = 0;
         segmentContainer.segmentEndMs = 0;
       }
+      segmentContainer.requestUpdate();
     }
 
     // Process context for both word and segment cases
@@ -645,6 +663,7 @@ export class EFCaptions extends EFSourceMixin(
           container.segmentText = beforeWords;
           container.segmentStartMs = currentWord.start * 1000;
           container.segmentEndMs = currentWord.end * 1000;
+          container.requestUpdate();
         }
 
         // Update after containers - should be visible at the same time as active word
@@ -652,6 +671,7 @@ export class EFCaptions extends EFSourceMixin(
           container.segmentText = afterWords;
           container.segmentStartMs = currentWord.start * 1000;
           container.segmentEndMs = currentWord.end * 1000;
+          container.requestUpdate();
         }
       }
     } else if (currentSegment) {
@@ -673,12 +693,14 @@ export class EFCaptions extends EFSourceMixin(
           container.segmentText = ""; // Nothing before yet
           container.segmentStartMs = currentSegment.start * 1000;
           container.segmentEndMs = currentSegment.end * 1000;
+          container.requestUpdate();
         }
 
         for (const container of this.afterActiveWordContainers) {
           container.segmentText = allWords; // All words are upcoming
           container.segmentStartMs = currentSegment.start * 1000;
           container.segmentEndMs = currentSegment.end * 1000;
+          container.requestUpdate();
         }
       } else {
         // After last word ends - show all completed words in "before" container
@@ -690,12 +712,14 @@ export class EFCaptions extends EFSourceMixin(
           container.segmentText = allCompletedWords;
           container.segmentStartMs = currentSegment.start * 1000;
           container.segmentEndMs = currentSegment.end * 1000;
+          container.requestUpdate();
         }
 
         for (const container of this.afterActiveWordContainers) {
           container.segmentText = "";
           container.segmentStartMs = currentSegment.start * 1000;
           container.segmentEndMs = currentSegment.end * 1000;
+          container.requestUpdate();
         }
       }
     } else {
@@ -704,12 +728,14 @@ export class EFCaptions extends EFSourceMixin(
         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();
       }
     }
   }

package/src/elements/EFImage.browsertest.ts

@@ -6,11 +6,10 @@ import { v4 } from "uuid";
 describe("EFImage", () => {
   describe("when rendering", () => {
     beforeEach(() => {
-      // @ts-ignore
+      // @ts-expect-error
       window.FRAMEGEN_BRIDGE = true;
     });
     afterEach(() => {
-      // @ts-ignore
       delete window.FRAMEGEN_BRIDGE;
     });
     test("assetPath uses http:// protocol", () => {

package/src/elements/EFMedia/AssetMediaEngine.ts

@@ -1,5 +1,6 @@
 import type { TrackFragmentIndex } from "@editframe/assets";
 
+import { withSpan } from "../../otel/tracingHelpers.js";
 import type {
   AudioRendition,
   InitSegmentPaths,
@@ -121,23 +122,36 @@ export class AssetMediaEngine extends BaseMediaEngine implements MediaEngine {
     rendition: { trackId: number | undefined; src: string },
     signal: AbortSignal,
   ) {
-    if (!rendition.trackId) {
-      throw new Error(
-        "[fetchInitSegment] Track ID is required for asset metadata",
-      );
-    }
-    const url = this.buildInitSegmentUrl(rendition.trackId);
-    const initSegment = this.data[rendition.trackId]?.initSegment;
-    if (!initSegment) {
-      throw new Error("Init segment not found");
-    }
-
-    // Use unified fetch method with Range headers
-    const headers = {
-      Range: `bytes=${initSegment.offset}-${initSegment.offset + initSegment.size - 1}`,
-    };
-
-    return this.fetchMediaWithHeaders(url, headers, signal);
+    return withSpan(
+      "assetEngine.fetchInitSegment",
+      {
+        trackId: rendition.trackId || -1,
+        src: rendition.src,
+      },
+      undefined,
+      async (span) => {
+        if (!rendition.trackId) {
+          throw new Error(
+            "[fetchInitSegment] Track ID is required for asset metadata",
+          );
+        }
+        const url = this.buildInitSegmentUrl(rendition.trackId);
+        const initSegment = this.data[rendition.trackId]?.initSegment;
+        if (!initSegment) {
+          throw new Error("Init segment not found");
+        }
+
+        span.setAttribute("offset", initSegment.offset);
+        span.setAttribute("size", initSegment.size);
+
+        // Use unified fetch method with Range headers
+        const headers = {
+          Range: `bytes=${initSegment.offset}-${initSegment.offset + initSegment.size - 1}`,
+        };
+
+        return this.fetchMediaWithHeaders(url, headers, signal);
+      },
+    );
   }
 
   async fetchMediaSegment(
@@ -145,26 +159,40 @@ export class AssetMediaEngine extends BaseMediaEngine implements MediaEngine {
     rendition: { trackId: number | undefined; src: string },
     signal?: AbortSignal,
   ) {
-    if (!rendition.trackId) {
-      throw new Error(
-        "[fetchMediaSegment] Track ID is required for asset metadata",
-      );
-    }
-    if (segmentId === undefined) {
-      throw new Error("Segment ID is not available");
-    }
-    const url = this.buildMediaSegmentUrl(rendition.trackId, segmentId);
-    const mediaSegment = this.data[rendition.trackId]?.segments[segmentId];
-    if (!mediaSegment) {
-      throw new Error("Media segment not found");
-    }
-
-    // Use unified fetch method with Range headers
-    const headers = {
-      Range: `bytes=${mediaSegment.offset}-${mediaSegment.offset + mediaSegment.size - 1}`,
-    };
-
-    return this.fetchMediaWithHeaders(url, headers, signal);
+    return withSpan(
+      "assetEngine.fetchMediaSegment",
+      {
+        segmentId,
+        trackId: rendition.trackId || -1,
+        src: rendition.src,
+      },
+      undefined,
+      async (span) => {
+        if (!rendition.trackId) {
+          throw new Error(
+            "[fetchMediaSegment] Track ID is required for asset metadata",
+          );
+        }
+        if (segmentId === undefined) {
+          throw new Error("Segment ID is not available");
+        }
+        const url = this.buildMediaSegmentUrl(rendition.trackId, segmentId);
+        const mediaSegment = this.data[rendition.trackId]?.segments[segmentId];
+        if (!mediaSegment) {
+          throw new Error("Media segment not found");
+        }
+
+        span.setAttribute("offset", mediaSegment.offset);
+        span.setAttribute("size", mediaSegment.size);
+
+        // Use unified fetch method with Range headers
+        const headers = {
+          Range: `bytes=${mediaSegment.offset}-${mediaSegment.offset + mediaSegment.size - 1}`,
+        };
+
+        return this.fetchMediaWithHeaders(url, headers, signal);
+      },
+    );
   }
 
   /**

package/src/elements/EFMedia/BaseMediaEngine.ts

@@ -1,3 +1,4 @@
+import { withSpan } from "../../otel/tracingHelpers.js";
 import { RequestDeduplicator } from "../../transcoding/cache/RequestDeduplicator.js";
 import type {
   AudioRendition,
@@ -61,65 +62,122 @@ export abstract class BaseMediaEngine {
       signal?: AbortSignal;
     },
   ): Promise<any> {
-    const { responseType, headers, signal } = options;
-
-    // Create cache key that includes URL and headers for proper isolation
-    // Note: We don't include signal in cache key as it would prevent proper deduplication
-    const cacheKey = headers ? `${url}:${JSON.stringify(headers)}` : url;
-
-    // Check cache first
-    const cached = mediaCache.get(cacheKey);
-    if (cached) {
-      // If we have a cached promise, we need to handle the caller's abort signal
-      // without affecting the underlying request that other instances might be using
-      if (signal) {
-        return this.handleAbortForCachedRequest(cached, signal);
-      }
-      return cached;
-    }
-
-    // Use global deduplicator to prevent concurrent requests for the same resource
-    // Note: We do NOT pass the signal to the deduplicator - each caller manages their own abort
-    const promise = globalRequestDeduplicator.executeRequest(
-      cacheKey,
-      async () => {
-        try {
-          // Make the fetch request WITHOUT the signal - let each caller handle their own abort
-          // This prevents one instance's abort from affecting other instances using the shared cache
-          const response = await this.host.fetch(url, { headers });
-
-          if (responseType === "json") {
-            return response.json();
+    return withSpan(
+      "mediaEngine.fetchWithCache",
+      {
+        url: url.length > 100 ? `${url.substring(0, 100)}...` : url,
+        responseType: options.responseType,
+        hasHeaders: !!options.headers,
+      },
+      undefined,
+      async (span) => {
+        const t0 = performance.now();
+        const { responseType, headers, signal } = options;
+
+        // Create cache key that includes URL and headers for proper isolation
+        // Note: We don't include signal in cache key as it would prevent proper deduplication
+        const cacheKey = headers ? `${url}:${JSON.stringify(headers)}` : url;
+
+        // Check cache first
+        const t1 = performance.now();
+        const cached = mediaCache.get(cacheKey);
+        const t2 = performance.now();
+        span.setAttribute("cacheLookupMs", Math.round((t2 - t1) * 1000) / 1000);
+
+        if (cached) {
+          span.setAttribute("cacheHit", true);
+          // If we have a cached promise, we need to handle the caller's abort signal
+          // without affecting the underlying request that other instances might be using
+          if (signal) {
+            const t3 = performance.now();
+            const result = await this.handleAbortForCachedRequest(
+              cached,
+              signal,
+            );
+            const t4 = performance.now();
+            span.setAttribute(
+              "handleAbortMs",
+              Math.round((t4 - t3) * 100) / 100,
+            );
+            span.setAttribute(
+              "totalCacheHitMs",
+              Math.round((t4 - t0) * 100) / 100,
+            );
+            return result;
           }
-          return response.arrayBuffer();
-        } catch (error) {
-          // If the request was aborted, don't cache the error
+          span.setAttribute(
+            "totalCacheHitMs",
+            Math.round((t2 - t0) * 100) / 100,
+          );
+          return cached;
+        }
+
+        span.setAttribute("cacheHit", false);
+
+        // Use global deduplicator to prevent concurrent requests for the same resource
+        // Note: We do NOT pass the signal to the deduplicator - each caller manages their own abort
+        const promise = globalRequestDeduplicator.executeRequest(
+          cacheKey,
+          async () => {
+            const fetchStart = performance.now();
+            try {
+              // Make the fetch request WITHOUT the signal - let each caller handle their own abort
+              // This prevents one instance's abort from affecting other instances using the shared cache
+              const response = await this.host.fetch(url, { headers });
+              const fetchEnd = performance.now();
+              span.setAttribute("fetchMs", fetchEnd - fetchStart);
+
+              if (responseType === "json") {
+                return response.json();
+              }
+              const buffer = await response.arrayBuffer();
+              span.setAttribute("sizeBytes", buffer.byteLength);
+              return buffer;
+            } catch (error) {
+              // If the request was aborted, don't cache the error
+              if (
+                error instanceof DOMException &&
+                error.name === "AbortError"
+              ) {
+                // Remove from cache so other requests can retry
+                mediaCache.delete(cacheKey);
+              }
+              throw error;
+            }
+          },
+        );
+
+        // Cache the promise (not the result) to handle concurrent requests
+        mediaCache.set(cacheKey, promise);
+
+        // Handle the case where the promise might be aborted
+        promise.catch((error) => {
+          // If the request was aborted, remove it from cache to prevent corrupted data
           if (error instanceof DOMException && error.name === "AbortError") {
-            // Remove from cache so other requests can retry
             mediaCache.delete(cacheKey);
           }
-          throw error;
+        });
+
+        // If the caller has a signal, handle abort logic without affecting the underlying request
+        if (signal) {
+          const result = await this.handleAbortForCachedRequest(
+            promise,
+            signal,
+          );
+          const tEnd = performance.now();
+          span.setAttribute(
+            "totalFetchMs",
+            Math.round((tEnd - t0) * 100) / 100,
+          );
+          return result;
         }
+
+        const result = await promise;
+        const tEnd = performance.now();
+        span.setAttribute("totalFetchMs", Math.round((tEnd - t0) * 100) / 100);
+        return result;
       },
     );
-
-    // Cache the promise (not the result) to handle concurrent requests
-    mediaCache.set(cacheKey, promise);
-
-    // Handle the case where the promise might be aborted
-    promise.catch((error) => {
-      // If the request was aborted, remove it from cache to prevent corrupted data
-      if (error instanceof DOMException && error.name === "AbortError") {
-        mediaCache.delete(cacheKey);
-      }
-    });
-
-    // If the caller has a signal, handle abort logic without affecting the underlying request
-    if (signal) {
-      return this.handleAbortForCachedRequest(promise, signal);
-    }
-
-    return promise;
   }
 
   /**