@editframe/elements 0.18.26-beta.0 → 0.19.2-beta.0

package/src/elements/updateAnimations.ts

@@ -1,94 +1,157 @@
-import { isEFTemporal } from "./EFTemporal.ts";
-import type { EFTimegroup } from "./EFTimegroup.ts";
-
-export const updateAnimations = (
-  element: HTMLElement & {
-    currentTimeMs: number;
-    durationMs: number;
-    rootTimegroup?: EFTimegroup;
-    parentTimegroup?: EFTimegroup;
-    startTimeMs: number;
-    endTimeMs: number;
-  },
-) => {
-  element.style.setProperty(
-    "--ef-progress",
-    `${Math.max(0, Math.min(1, element.currentTimeMs / element.durationMs)) * 100}%`,
-  );
+import {
+  deepGetTemporalElements,
+  isEFTemporal,
+  type TemporalMixinInterface,
+} from "./EFTemporal.ts";
+
+// All animatable elements are temporal elements with HTMLElement interface
+export type AnimatableElement = TemporalMixinInterface & HTMLElement;
+
+// Constants
+const ANIMATION_PRECISION_OFFSET = Number.EPSILON;
+const DEFAULT_ANIMATION_ITERATIONS = 1;
+const PROGRESS_PROPERTY = "--ef-progress";
+const DURATION_PROPERTY = "--ef-duration";
+const TRANSITION_DURATION_PROPERTY = "--ef-transition-duration";
+const TRANSITION_OUT_START_PROPERTY = "--ef-transition-out-start";
+const TIMEGROUP_TAGNAME = "ef-timegroup";
+
+/**
+ * Represents the temporal state of an element relative to the timeline
+ */
+interface TemporalState {
+  progress: number;
+  isVisible: boolean;
+  timelineTimeMs: number;
+}
+
+/**
+ * Evaluates what the element's state should be based on the timeline
+ */
+export const evaluateTemporalState = (
+  element: AnimatableElement,
+): TemporalState => {
+  // Get timeline time from root timegroup, or use element's own time if it IS a timegroup
   const timelineTimeMs = (element.rootTimegroup ?? element).currentTimeMs;
-  if (
-    element.startTimeMs > timelineTimeMs ||
-    element.endTimeMs < timelineTimeMs
-  ) {
-    element.style.display = "none";
+
+  const progress =
+    element.durationMs <= 0
+      ? 1
+      : Math.max(0, Math.min(1, element.currentTimeMs / element.durationMs));
+
+  const isVisible =
+    element.startTimeMs <= timelineTimeMs && element.endTimeMs > timelineTimeMs;
+
+  return { progress, isVisible, timelineTimeMs };
+};
+
+/**
+ * Updates the visual state (CSS + display) to match temporal state
+ */
+const updateVisualState = (
+  element: AnimatableElement,
+  state: TemporalState,
+): void => {
+  // Always set progress (needed for many use cases)
+  element.style.setProperty(PROGRESS_PROPERTY, `${state.progress * 100}%`);
+
+  // Handle visibility
+  if (!state.isVisible) {
+    if (element.style.display !== "none") {
+      element.style.display = "none";
+    }
     return;
   }
-  element.style.display = "";
 
-  // Check if getAnimations is available (Web Animations API - not available in Node.js)
-  if (typeof element.getAnimations !== "function") {
-    return;
+  if (element.style.display === "none") {
+    element.style.display = "";
   }
 
-  const animations = element.getAnimations({ subtree: true });
-  element.style.setProperty("--ef-duration", `${element.durationMs}ms`);
+  // Set other CSS properties for visible elements only
+  element.style.setProperty(DURATION_PROPERTY, `${element.durationMs}ms`);
   element.style.setProperty(
-    "--ef-transition-duration",
+    TRANSITION_DURATION_PROPERTY,
     `${element.parentTimegroup?.overlapMs ?? 0}ms`,
   );
   element.style.setProperty(
-    "--ef-transition-out-start",
+    TRANSITION_OUT_START_PROPERTY,
     `${element.durationMs - (element.parentTimegroup?.overlapMs ?? 0)}ms`,
   );
+};
+
+/**
+ * Coordinates animations to match timeline
+ */
+const coordinateAnimations = (element: AnimatableElement): void => {
+  const animations = element.getAnimations({ subtree: true });
 
   for (const animation of animations) {
     if (animation.playState === "running") {
       animation.pause();
     }
+
     const effect = animation.effect;
     if (!(effect && effect instanceof KeyframeEffect)) {
       continue;
     }
+
     const target = effect.target;
-    // TODO: better generalize work avoidance for temporal elements
-    if (!target) {
+    if (!target || target.closest(TIMEGROUP_TAGNAME) !== element) {
       continue;
     }
-    if (target.closest("ef-timegroup") !== element) {
+
+    const timeTarget = isEFTemporal(target)
+      ? target
+      : target.closest(TIMEGROUP_TAGNAME);
+    if (!timeTarget) {
       continue;
     }
 
     const timing = effect.getTiming();
-    const duration = Number(timing.duration) ?? 0;
-    const delay = Number(timing.delay) ?? 0;
-    const iterations = Number(timing.iterations) ?? 1;
+    const duration = Number(timing.duration) || 0;
+    const delay = Number(timing.delay) || 0;
+    const iterations =
+      Number(timing.iterations) || DEFAULT_ANIMATION_ITERATIONS;
 
-    const timeTarget = isEFTemporal(target)
-      ? target
-      : target.closest("ef-timegroup");
-    if (!timeTarget) {
+    if (duration <= 0) {
+      animation.currentTime = 0;
       continue;
     }
 
-    const currentTime = timeTarget.ownCurrentTimeMs;
+    // All timegroups are temporal, so always use ownCurrentTimeMs for local time coordination
+    const currentTime = timeTarget.ownCurrentTimeMs ?? 0;
 
-    // Handle delay - don't start animation until delay is complete
     if (currentTime < delay) {
       animation.currentTime = 0;
       continue;
     }
 
-    const currentIteration = Math.floor((currentTime - delay) / duration);
-    const currentIterationTime = (currentTime - delay) % duration;
+    const adjustedTime = currentTime - delay;
+    const currentIteration = Math.floor(adjustedTime / duration);
+    const currentIterationTime = adjustedTime % duration;
 
     if (currentIteration >= iterations) {
-      // Stop just before the end to prevent DOM removal
-      animation.currentTime = duration - 0.01;
-      continue;
+      animation.currentTime = duration - ANIMATION_PRECISION_OFFSET;
+    } else {
+      animation.currentTime =
+        Math.min(currentIterationTime, duration - ANIMATION_PRECISION_OFFSET) +
+        delay;
     }
+  }
+};
+
+/**
+ * Main function: synchronizes DOM element with timeline
+ */
+export const updateAnimations = (element: AnimatableElement): void => {
+  const temporalState = evaluateTemporalState(element);
+  deepGetTemporalElements(element).forEach((temporalElement) => {
+    const temporalState = evaluateTemporalState(temporalElement);
+    updateVisualState(temporalElement, temporalState);
+  });
+  updateVisualState(element, temporalState);
 
-    // Ensure we never reach exactly duration
-    animation.currentTime =
-      Math.min(currentIterationTime, duration - 0.01) + delay;
+  if (temporalState.isVisible) {
+    coordinateAnimations(element);
   }
 };

package/src/gui/ContextMixin.browsertest.ts

@@ -269,7 +269,7 @@ describe("ContextMixin", () => {
       expect(mockFetch).toHaveBeenCalledTimes(7); // 3 signing + 4 media requests (URL2 reused token)
     }, 1000);
 
-    test("should clear token cache on component disconnect", async () => {
+    test("should reuse global token cache across component disconnections", async () => {
       const futureTime = Date.now() + 60 * 60 * 1000; // 1 hour from now
       const token1 = createJWTToken(futureTime);
 
@@ -296,13 +296,7 @@ describe("ContextMixin", () => {
       element.signingURL = "https://test.com/api/v1/url-token";
       document.body.appendChild(element);
 
-      const token2 = createJWTToken(futureTime);
-
-      mockFetch.mockResolvedValueOnce({
-        ok: true,
-        json: () => Promise.resolve({ token: token2 }),
-      });
-
+      // No need to mock additional token request - should reuse from global cache
       mockFetch.mockResolvedValueOnce({
         ok: true,
         text: () => Promise.resolve("success2"),
@@ -310,7 +304,8 @@ describe("ContextMixin", () => {
 
       await element.fetch("https://example.com/media.mp4");
 
-      expect(mockFetch).toHaveBeenCalledTimes(4); // 2 signing + 2 media requests
+      // With global caching: 1 signing + 2 media requests (token is reused)
+      expect(mockFetch).toHaveBeenCalledTimes(3);
     }, 1000);
 
     test("should use single token for multiple transcode segments with same source URL", async () => {

package/src/gui/ContextMixin.ts

@@ -1,7 +1,9 @@
 import { consume, createContext, provide } from "@lit/context";
 import type { LitElement } from "lit";
 import { property, state } from "lit/decorators.js";
+import { EF_RENDERING } from "../EF_RENDERING.ts";
 import type { EFTimegroup } from "../elements/EFTimegroup.js";
+import { globalURLTokenDeduplicator } from "../transcoding/cache/URLTokenDeduplicator.js";
 import {
   type EFConfiguration,
   efConfigurationContext,
@@ -89,32 +91,33 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
         "Content-Type": "application/json",
       });
 
-      if (this.signingURL) {
-        const now = Date.now();
+      if (!EF_RENDERING() && this.signingURL) {
         const { cacheKey, signingPayload } = this.#getTokenCacheKey(url);
-        const tokenExpiration = this.#URLTokenExpirations[cacheKey] || 0;
-
-        // Check if we need to fetch a new token (no token exists or token is expired)
-        if (!this.#URLTokens[cacheKey] || now >= tokenExpiration) {
-          this.#URLTokens[cacheKey] = fetch(this.signingURL, {
-            method: "POST",
-            body: JSON.stringify(signingPayload),
-          }).then(async (response) => {
-            if (response.ok) {
-              const tokenData = await response.json();
-              const token = tokenData.token;
-              // Parse and store the token's actual expiration time
-              this.#URLTokenExpirations[cacheKey] =
-                this.#parseTokenExpiration(token);
-              return token;
-            }
-            throw new Error(
-              `Failed to sign URL: ${url}. SigningURL: ${this.signingURL} ${response.status} ${response.statusText}`,
-            );
-          });
-        }
 
-        const urlToken = await this.#URLTokens[cacheKey];
+        // Use global token deduplicator to share tokens across all context providers
+        const urlToken = await globalURLTokenDeduplicator.getToken(
+          cacheKey,
+          async () => {
+            try {
+              const response = await fetch(this.signingURL, {
+                method: "POST",
+                body: JSON.stringify(signingPayload),
+              });
+
+              if (response.ok) {
+                const tokenData = await response.json();
+                return tokenData.token;
+              }
+              throw new Error(
+                `Failed to sign URL: ${url}. SigningURL: ${this.signingURL} ${response.status} ${response.statusText}`,
+              );
+            } catch (error) {
+              console.error("ContextMixin urlToken fetch error", url, error);
+              throw error;
+            }
+          },
+          (token: string) => this.#parseTokenExpiration(token),
+        );
 
         Object.assign(init.headers, {
           authorization: `Bearer ${urlToken}`,
@@ -123,11 +126,21 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
         init.credentials = "include";
       }
 
-      return fetch(url, init);
+      try {
+        return fetch(url, init);
+      } catch (error) {
+        console.error(
+          "ContextMixin fetch error",
+          url,
+          error,
+          window.location.href,
+        );
+        throw error;
+      }
     };
 
-    #URLTokens: Record<string, Promise<string>> = {};
-    #URLTokenExpirations: Record<string, number> = {};
+    // Note: URL token caching is now handled globally via URLTokenDeduplicator
+    // Keeping these for any potential backwards compatibility, but they're no longer used
 
     /**
      * Generate a cache key for URL token based on signing strategy
@@ -236,7 +249,7 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
     rendering = false;
 
     @state()
-    currentTimeMs = 0;
+    currentTimeMs = Number.NaN;
 
     #FPS = 30;
     #MS_PER_FRAME = 1000 / this.#FPS;
@@ -306,9 +319,8 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
       super.disconnectedCallback();
       this.#timegroupObserver.disconnect();
       this.stopPlayback();
-      // Clear token cache on disconnect to prevent stale tokens
-      this.#URLTokens = {};
-      this.#URLTokenExpirations = {};
+      // Note: Global token cache is shared across all context providers
+      // No need to clear per-instance cache on disconnect
     }
 
     update(changedProperties: Map<string | number | symbol, unknown>) {
@@ -319,10 +331,17 @@ export function ContextMixin<T extends Constructor<LitElement>>(superClass: T) {
           this.stopPlayback();
         }
       }
-      if (changedProperties.has("currentTimeMs") && this.targetTimegroup) {
+      if (
+        changedProperties.has("currentTimeMs") &&
+        this.targetTimegroup &&
+        !Number.isNaN(this.currentTimeMs)
+      ) {
         if (this.targetTimegroup.currentTimeMs !== this.currentTimeMs) {
-          this.targetTimegroup.currentTimeMs = this.currentTimeMs;
           if (this.isConnected) {
+            if (this.targetTimegroup.currentTimeMs === this.currentTimeMs) {
+              return;
+            }
+            this.targetTimegroup.currentTimeMs = this.currentTimeMs;
             this.dispatchEvent(
               new CustomEvent("timeupdate", {
                 detail: {

package/src/gui/EFConfiguration.ts

@@ -23,7 +23,7 @@ export class EFConfiguration extends LitElement {
   apiHost?: string;
 
   @property({ type: String, attribute: "signing-url" })
-  signingURL?: string;
+  signingURL = "/@ef-sign-url";
 
   @property({ type: String, attribute: "media-engine" })
   mediaEngine?: "cloud" | "local" = "cloud";

package/src/gui/EFFilmstrip.ts

@@ -633,15 +633,7 @@ export class EFFilmstrip extends TWMixin(LitElement) {
     if (!this.scrubbing) {
       return;
     }
-    const gutter = this.shadowRoot?.querySelector("#gutter");
-    if (!gutter) {
-      return;
-    }
-    const rect = gutter.getBoundingClientRect();
-    if (this.targetTimegroup) {
-      const layerX = e.pageX - rect.left + gutter.scrollLeft;
-      this.targetTimegroup.currentTimeMs = layerX / this.pixelsPerMs;
-    }
+    this.applyScrub(e);
   }
 
   @eventOptions({ capture: false })
@@ -651,15 +643,7 @@ export class EFFilmstrip extends TWMixin(LitElement) {
     // Running scrub in the current microtask doesn't
     // result in an actual update. Not sure why.
     queueMicrotask(() => {
-      const gutter = this.shadowRoot?.querySelector("#gutter");
-      if (!gutter) {
-        return;
-      }
-      const rect = gutter.getBoundingClientRect();
-      if (this.targetTimegroup) {
-        const layerX = e.pageX - rect.left + gutter.scrollLeft;
-        this.targetTimegroup.currentTimeMs = layerX / this.pixelsPerMs;
-      }
+      this.applyScrub(e);
     });
     addEventListener(
       "mouseup",
@@ -670,6 +654,19 @@ export class EFFilmstrip extends TWMixin(LitElement) {
     );
   }
 
+  applyScrub(e: MouseEvent) {
+    const gutter = this.shadowRoot?.querySelector("#gutter");
+    if (!gutter) {
+      return;
+    }
+    const rect = gutter.getBoundingClientRect();
+    if (this.targetTimegroup) {
+      const layerX = e.pageX - rect.left + gutter.scrollLeft;
+      const scrubTimeMs = layerX / this.pixelsPerMs;
+      this.targetTimegroup.currentTimeMs = scrubTimeMs;
+    }
+  }
+
   @eventOptions({ passive: false })
   scrollScrub(e: WheelEvent) {
     if (this.targetTimegroup && this.gutter && !this.playing) {

package/src/transcoding/cache/URLTokenDeduplicator.test.ts

@@ -0,0 +1,182 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { URLTokenDeduplicator } from "./URLTokenDeduplicator.js";
+
+describe("URLTokenDeduplicator", () => {
+  let deduplicator: URLTokenDeduplicator;
+
+  beforeEach(() => {
+    deduplicator = new URLTokenDeduplicator();
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("should deduplicate concurrent requests for same cache key", async () => {
+    const mockTokenFactory = vi.fn().mockResolvedValue("test-token");
+    const mockParseExpiration = vi.fn().mockReturnValue(Date.now() + 60000);
+
+    // Make 3 concurrent requests for the same cache key
+    const promises = [
+      deduplicator.getToken("key1", mockTokenFactory, mockParseExpiration),
+      deduplicator.getToken("key1", mockTokenFactory, mockParseExpiration),
+      deduplicator.getToken("key1", mockTokenFactory, mockParseExpiration),
+    ];
+
+    const results = await Promise.all(promises);
+
+    // All should return the same token
+    expect(results).toEqual(["test-token", "test-token", "test-token"]);
+
+    // Factory should only be called once due to deduplication
+    expect(mockTokenFactory).toHaveBeenCalledTimes(1);
+    expect(mockParseExpiration).toHaveBeenCalledTimes(1);
+  });
+
+  it("should use separate tokens for different cache keys", async () => {
+    const mockTokenFactory1 = vi.fn().mockResolvedValue("token1");
+    const mockTokenFactory2 = vi.fn().mockResolvedValue("token2");
+    const mockParseExpiration = vi.fn().mockReturnValue(Date.now() + 60000);
+
+    const [token1, token2] = await Promise.all([
+      deduplicator.getToken("key1", mockTokenFactory1, mockParseExpiration),
+      deduplicator.getToken("key2", mockTokenFactory2, mockParseExpiration),
+    ]);
+
+    expect(token1).toBe("token1");
+    expect(token2).toBe("token2");
+    expect(mockTokenFactory1).toHaveBeenCalledTimes(1);
+    expect(mockTokenFactory2).toHaveBeenCalledTimes(1);
+  });
+
+  it("should reuse cached tokens that haven't expired", async () => {
+    const futureTime = Date.now() + 60000;
+    const mockTokenFactory = vi.fn().mockResolvedValue("cached-token");
+    const mockParseExpiration = vi.fn().mockReturnValue(futureTime);
+
+    // First request
+    const token1 = await deduplicator.getToken(
+      "key1",
+      mockTokenFactory,
+      mockParseExpiration,
+    );
+
+    // Second request for same key should reuse cached token
+    const token2 = await deduplicator.getToken(
+      "key1",
+      vi.fn(),
+      mockParseExpiration,
+    );
+
+    expect(token1).toBe("cached-token");
+    expect(token2).toBe("cached-token");
+    expect(mockTokenFactory).toHaveBeenCalledTimes(1);
+  });
+
+  it("should fetch new token when cached token is expired", async () => {
+    const pastTime = Date.now() - 1000; // Expired 1 second ago
+    const futureTime = Date.now() + 60000; // New token expires in 1 minute
+
+    const mockTokenFactory1 = vi.fn().mockResolvedValue("expired-token");
+    const mockTokenFactory2 = vi.fn().mockResolvedValue("fresh-token");
+    const mockParseExpiration1 = vi.fn().mockReturnValue(pastTime);
+    const mockParseExpiration2 = vi.fn().mockReturnValue(futureTime);
+
+    // First request with expired token
+    await deduplicator.getToken(
+      "key1",
+      mockTokenFactory1,
+      mockParseExpiration1,
+    );
+
+    // Advance time to simulate token expiration
+    vi.advanceTimersByTime(2000);
+
+    // Second request should fetch new token due to expiration
+    const token2 = await deduplicator.getToken(
+      "key1",
+      mockTokenFactory2,
+      mockParseExpiration2,
+    );
+
+    expect(token2).toBe("fresh-token");
+    expect(mockTokenFactory1).toHaveBeenCalledTimes(1);
+    expect(mockTokenFactory2).toHaveBeenCalledTimes(1);
+  });
+
+  it("should handle token factory errors by removing from cache", async () => {
+    const mockTokenFactory1 = vi
+      .fn()
+      .mockRejectedValue(new Error("Network error"));
+    const mockTokenFactory2 = vi.fn().mockResolvedValue("retry-token");
+    const mockParseExpiration = vi.fn().mockReturnValue(Date.now() + 60000);
+
+    // First request fails
+    await expect(
+      deduplicator.getToken("key1", mockTokenFactory1, mockParseExpiration),
+    ).rejects.toThrow("Network error");
+
+    // Retry should work and not be blocked by failed request
+    const token = await deduplicator.getToken(
+      "key1",
+      mockTokenFactory2,
+      mockParseExpiration,
+    );
+
+    expect(token).toBe("retry-token");
+    expect(mockTokenFactory1).toHaveBeenCalledTimes(1);
+    expect(mockTokenFactory2).toHaveBeenCalledTimes(1);
+  });
+
+  it("should provide utility methods for cache management", () => {
+    const mockParseExpiration = vi.fn().mockReturnValue(Date.now() + 60000);
+
+    expect(deduplicator.getCachedCount()).toBe(0);
+    expect(deduplicator.getCachedKeys()).toEqual([]);
+    expect(deduplicator.hasValidToken("nonexistent")).toBe(false);
+
+    // Add a token to cache
+    deduplicator.getToken(
+      "key1",
+      vi.fn().mockResolvedValue("token"),
+      mockParseExpiration,
+    );
+
+    expect(deduplicator.getCachedCount()).toBe(1);
+    expect(deduplicator.getCachedKeys()).toEqual(["key1"]);
+    expect(deduplicator.hasValidToken("key1")).toBe(true);
+
+    // Clear cache
+    deduplicator.clear();
+    expect(deduplicator.getCachedCount()).toBe(0);
+  });
+
+  it("should cleanup expired tokens", async () => {
+    const pastTime = Date.now() - 1000;
+    const futureTime = Date.now() + 60000;
+
+    const mockParseExpiration1 = vi.fn().mockReturnValue(pastTime);
+    const mockParseExpiration2 = vi.fn().mockReturnValue(futureTime);
+
+    // Add expired and valid tokens
+    await deduplicator.getToken(
+      "expired",
+      vi.fn().mockResolvedValue("token1"),
+      mockParseExpiration1,
+    );
+    await deduplicator.getToken(
+      "valid",
+      vi.fn().mockResolvedValue("token2"),
+      mockParseExpiration2,
+    );
+
+    expect(deduplicator.getCachedCount()).toBe(2);
+
+    // Cleanup should remove expired tokens
+    deduplicator.cleanup();
+
+    expect(deduplicator.getCachedCount()).toBe(1);
+    expect(deduplicator.getCachedKeys()).toEqual(["valid"]);
+  });
+});