@editframe/elements 0.18.19-beta.0 → 0.18.20-beta.0

package/dist/elements/EFTemporal.d.ts

@@ -187,6 +187,7 @@ export declare const deepGetElementsWithFrameTasks: (element: Element, elements?
 }>) => (HTMLElement & {
     frameTask: Task;
 })[];
+export declare const clearTemporalCacheForElement: (element: Element) => void;
 export declare const shallowGetTemporalElements: (element: Element, temporals?: TemporalMixinInterface[]) => TemporalMixinInterface[];
 export declare class OwnCurrentTimeController implements ReactiveController {
     private host;

package/dist/elements/EFTemporal.js

@@ -15,17 +15,21 @@ const deepGetElementsWithFrameTasks = (element, elements = []) => {
 	return elements;
 };
 let temporalCache;
+let modifiedElements = /* @__PURE__ */ new WeakSet();
 const resetTemporalCache = () => {
 	temporalCache = /* @__PURE__ */ new Map();
+	modifiedElements = /* @__PURE__ */ new WeakSet();
 	if (typeof requestAnimationFrame !== "undefined") requestAnimationFrame(resetTemporalCache);
 };
 resetTemporalCache();
+const clearTemporalCacheForElement = (element) => {
+	temporalCache.delete(element);
+	modifiedElements.add(element);
+};
 const shallowGetTemporalElements = (element, temporals = []) => {
-	const cachedResult = temporalCache.get(element);
-	if (cachedResult) return cachedResult;
+	temporals.length = 0;
 	for (const child of element.children) if (isEFTemporal(child)) temporals.push(child);
 	else shallowGetTemporalElements(child, temporals);
-	temporalCache.set(element, temporals);
 	return temporals;
 };
 var OwnCurrentTimeController = class {
@@ -281,4 +285,4 @@ const EFTemporal = (superClass) => {
 	Object.defineProperty(TemporalMixinClass.prototype, EF_TEMPORAL, { value: true });
 	return TemporalMixinClass;
 };
-export { EFTemporal, deepGetElementsWithFrameTasks, flushStartTimeMsCache, isEFTemporal, shallowGetTemporalElements, timegroupContext };
+export { EFTemporal, clearTemporalCacheForElement, deepGetElementsWithFrameTasks, flushStartTimeMsCache, isEFTemporal, shallowGetTemporalElements, timegroupContext };

package/dist/elements/EFTimegroup.js

@@ -53,6 +53,7 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 	}
 	#currentTime = 0;
 	#resizeObserver;
+	#childObserver;
 	set currentTime(time) {
 		const newTime = Math.max(0, Math.min(time, this.durationMs / 1e3));
 		if (this.isRootTimegroup && this.isFrameUpdateInProgress) {
@@ -128,6 +129,25 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 		});
 		if (this.parentTimegroup) new TimegroupController(this.parentTimegroup, this);
 		if (this.shouldWrapWithWorkbench()) this.wrapWithWorkbench();
+		this.#childObserver = new MutationObserver((mutations) => {
+			let shouldUpdate = false;
+			for (const mutation of mutations) if (mutation.type === "childList") shouldUpdate = true;
+			else if (mutation.type === "attributes") {
+				if (mutation.attributeName === "duration" || mutation.attributeName === "mode") shouldUpdate = true;
+			}
+			if (shouldUpdate) {
+				import("./EFTemporal.js").then(({ clearTemporalCacheForElement }) => {
+					clearTemporalCacheForElement(this);
+				});
+				this.requestUpdate();
+			}
+		});
+		this.#childObserver.observe(this, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			attributeFilter: ["duration", "mode"]
+		});
 		requestAnimationFrame(() => {
 			this.updateAnimations();
 		});
@@ -135,6 +155,7 @@ let EFTimegroup = class EFTimegroup$1 extends EFTemporal(LitElement) {
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.#resizeObserver?.disconnect();
+		this.#childObserver?.disconnect();
 	}
 	get storageKey() {
 		if (!this.id) throw new Error("Timegroup must have an id to use localStorage.");

package/dist/getRenderInfo.d.ts

@@ -18,9 +18,9 @@ export declare const RenderInfo: z.ZodObject<{
         efImage: string[];
     }>;
 }, "strip", z.ZodTypeAny, {
+    durationMs: number;
     width: number;
     height: number;
-    durationMs: number;
     fps: number;
     assets: {
         efMedia: Record<string, any>;
@@ -28,9 +28,9 @@ export declare const RenderInfo: z.ZodObject<{
         efImage: string[];
     };
 }, {
+    durationMs: number;
     width: number;
     height: number;
-    durationMs: number;
     fps: number;
     assets: {
         efMedia: Record<string, any>;

package/dist/gui/ContextMixin.browsertest.d.ts

@@ -2,9 +2,14 @@ import { LitElement } from 'lit';
 declare const TestContext_base: (new (...args: any[]) => import('./ContextMixin.js').ContextMixinInterface) & typeof LitElement;
 declare class TestContext extends TestContext_base {
 }
+declare const TestContextElement_base: (new (...args: any[]) => import('./ContextMixin.js').ContextMixinInterface) & typeof LitElement;
+declare class TestContextElement extends TestContextElement_base {
+    render(): import('../elements/EFTimegroup.js').EFTimegroup & Element;
+}
 declare global {
     interface HTMLElementTagNameMap {
         "test-context": TestContext;
+        "test-context-reactivity": TestContextElement;
     }
 }
 export {};

package/dist/gui/ContextMixin.js

@@ -24,14 +24,22 @@ function ContextMixin(superClass) {
 				init.headers ||= {};
 				Object.assign(init.headers, { "Content-Type": "application/json" });
 				if (this.signingURL) {
-					if (!this.#URLTokens[url]) this.#URLTokens[url] = fetch(this.signingURL, {
+					const now = Date.now();
+					const { cacheKey, signingPayload } = this.#getTokenCacheKey(url);
+					const tokenExpiration = this.#URLTokenExpirations[cacheKey] || 0;
+					if (!this.#URLTokens[cacheKey] || now >= tokenExpiration) this.#URLTokens[cacheKey] = fetch(this.signingURL, {
 						method: "POST",
-						body: JSON.stringify({ url })
+						body: JSON.stringify(signingPayload)
 					}).then(async (response) => {
-						if (response.ok) return (await response.json()).token;
+						if (response.ok) {
+							const tokenData = await response.json();
+							const token = tokenData.token;
+							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[url];
+					const urlToken = await this.#URLTokens[cacheKey];
 					Object.assign(init.headers, { authorization: `Bearer ${urlToken}` });
 				} else init.credentials = "include";
 				return fetch(url, init);
@@ -51,7 +59,76 @@ function ContextMixin(superClass) {
 		set apiHost(value) {
 			this.#apiHost = value;
 		}
+		get durationMs() {
+			return this.targetTimegroup?.durationMs ?? 0;
+		}
+		get endTimeMs() {
+			return this.targetTimegroup?.endTimeMs ?? 0;
+		}
 		#URLTokens = {};
+		#URLTokenExpirations = {};
+		/**
+		* Generate a cache key for URL token based on signing strategy
+		*
+		* Uses unified prefix + parameter matching approach:
+		* - For transcode URLs: signs base "/api/v1/transcode" + params like {url: "source.mp4"}
+		* - For regular URLs: signs full URL with empty params {}
+		* - All validation uses prefix matching + exhaustive parameter matching
+		* - Multiple transcode segments with same source share one token (reduces round-trips)
+		*/
+		#getTokenCacheKey(url) {
+			try {
+				const urlObj = new URL(url);
+				if (urlObj.pathname.includes("/api/v1/transcode/")) {
+					const urlParam = urlObj.searchParams.get("url");
+					if (urlParam) {
+						const basePath = `${urlObj.origin}/api/v1/transcode`;
+						const cacheKey = `${basePath}?url=${urlParam}`;
+						return {
+							cacheKey,
+							signingPayload: {
+								url: basePath,
+								params: { url: urlParam }
+							}
+						};
+					}
+				}
+				return {
+					cacheKey: url,
+					signingPayload: { url }
+				};
+			} catch {
+				return {
+					cacheKey: url,
+					signingPayload: { url }
+				};
+			}
+		}
+		/**
+		* Parse JWT token to extract safe expiration time (with buffer)
+		* @param token JWT token string
+		* @returns Safe expiration timestamp in milliseconds (actual expiry minus buffer), or 0 if parsing fails
+		*/
+		#parseTokenExpiration(token) {
+			try {
+				const parts = token.split(".");
+				if (parts.length !== 3) return 0;
+				const payload = parts[1];
+				if (!payload) return 0;
+				const decoded = atob(payload.replace(/-/g, "+").replace(/_/g, "/"));
+				const parsed = JSON.parse(decoded);
+				const exp = parsed.exp;
+				const iat = parsed.iat;
+				if (!exp) return 0;
+				const lifetimeSeconds = iat ? exp - iat : 3600;
+				const tenPercentBufferMs = lifetimeSeconds * .1 * 1e3;
+				const fiveMinutesMs = 5 * 60 * 1e3;
+				const bufferMs = Math.min(fiveMinutesMs, tenPercentBufferMs);
+				return exp * 1e3 - bufferMs;
+			} catch {
+				return 0;
+			}
+		}
 		#signingURL;
 		/**
 		* A URL that will be used to generated signed tokens for accessing media files from the
@@ -66,10 +143,20 @@ function ContextMixin(superClass) {
 		#FPS = 30;
 		#MS_PER_FRAME = 1e3 / this.#FPS;
 		#timegroupObserver = new MutationObserver((mutations) => {
+			let shouldUpdate = false;
 			for (const mutation of mutations) if (mutation.type === "childList") {
 				const newTimegroup = this.querySelector("ef-timegroup");
-				if (newTimegroup !== this.targetTimegroup) this.targetTimegroup = newTimegroup;
+				if (newTimegroup !== this.targetTimegroup) {
+					this.targetTimegroup = newTimegroup;
+					shouldUpdate = true;
+				}
+			} else if (mutation.type === "attributes") {
+				if (mutation.attributeName === "duration" || mutation.attributeName === "mode" || mutation.target instanceof Element && (mutation.target.tagName === "EF-TIMEGROUP" || mutation.target.closest("ef-timegroup"))) shouldUpdate = true;
 			}
+			if (shouldUpdate) queueMicrotask(() => {
+				this.requestUpdate();
+				if (this.targetTimegroup) this.targetTimegroup.requestUpdate();
+			});
 		});
 		connectedCallback() {
 			super.connectedCallback();
@@ -85,6 +172,8 @@ function ContextMixin(superClass) {
 			super.disconnectedCallback();
 			this.#timegroupObserver.disconnect();
 			this.stopPlayback();
+			this.#URLTokens = {};
+			this.#URLTokenExpirations = {};
 		}
 		update(changedProperties) {
 			if (changedProperties.has("playing")) if (this.playing) this.startPlayback();
@@ -194,6 +283,8 @@ function ContextMixin(superClass) {
 	})], ContextElement.prototype, "apiHost", null);
 	_decorate([provide({ context: efContext })], ContextElement.prototype, "efContext", void 0);
 	_decorate([provide({ context: targetTimegroupContext }), state()], ContextElement.prototype, "targetTimegroup", void 0);
+	_decorate([state()], ContextElement.prototype, "durationMs", null);
+	_decorate([state()], ContextElement.prototype, "endTimeMs", null);
 	_decorate([provide({ context: fetchContext })], ContextElement.prototype, "fetch", void 0);
 	_decorate([property({
 		type: String,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editframe/elements",
-  "version": "0.18.19-beta.0",
+  "version": "0.18.20-beta.0",
   "description": "",
   "exports": {
     ".": {
@@ -27,7 +27,7 @@
   "license": "UNLICENSED",
   "dependencies": {
     "@bramus/style-observer": "^1.3.0",
-    "@editframe/assets": "0.18.19-beta.0",
+    "@editframe/assets": "0.18.20-beta.0",
     "@lit/context": "^1.1.2",
     "@lit/task": "^1.0.1",
     "d3": "^7.9.0",

package/src/elements/EFTemporal.ts

@@ -236,22 +236,32 @@ export const deepGetElementsWithFrameTasks = (
 };
 
 let temporalCache: Map<Element, TemporalMixinInterface[]>;
+let modifiedElements = new WeakSet<Element>();
+
 const resetTemporalCache = () => {
   temporalCache = new Map();
+  modifiedElements = new WeakSet();
   if (typeof requestAnimationFrame !== "undefined") {
     requestAnimationFrame(resetTemporalCache);
   }
 };
 resetTemporalCache();
 
+export const clearTemporalCacheForElement = (element: Element) => {
+  temporalCache.delete(element);
+  modifiedElements.add(element);
+};
+
 export const shallowGetTemporalElements = (
   element: Element,
   temporals: TemporalMixinInterface[] = [],
 ) => {
-  const cachedResult = temporalCache.get(element);
-  if (cachedResult) {
-    return cachedResult;
-  }
+  // Temporarily disable caching to ensure reactivity works correctly
+  // TODO: Implement proper cache invalidation mechanism
+
+  // Clear the temporals array to ensure fresh results
+  temporals.length = 0;
+
   for (const child of element.children) {
     if (isEFTemporal(child)) {
       temporals.push(child);
@@ -259,7 +269,7 @@ export const shallowGetTemporalElements = (
       shallowGetTemporalElements(child, temporals);
     }
   }
-  temporalCache.set(element, temporals);
+
   return temporals;
 };
 

package/src/elements/EFTimegroup.ts

@@ -73,6 +73,7 @@ export class EFTimegroup extends EFTemporal(LitElement) {
   fit: "none" | "contain" | "cover" = "none";
 
   #resizeObserver?: ResizeObserver;
+  #childObserver?: MutationObserver;
 
   @property({ type: Number, attribute: "currenttime" })
   set currentTime(time: number) {
@@ -185,6 +186,44 @@ export class EFTimegroup extends EFTemporal(LitElement) {
       this.wrapWithWorkbench();
     }
 
+    // Set up observer to detect child changes that affect duration
+    this.#childObserver = new MutationObserver((mutations) => {
+      let shouldUpdate = false;
+
+      for (const mutation of mutations) {
+        if (mutation.type === "childList") {
+          // Child added/removed - this affects duration for contain/sequence modes
+          shouldUpdate = true;
+        } else if (mutation.type === "attributes") {
+          // Attribute changes that might affect duration
+          if (
+            mutation.attributeName === "duration" ||
+            mutation.attributeName === "mode"
+          ) {
+            shouldUpdate = true;
+          }
+        }
+      }
+
+      if (shouldUpdate) {
+        // Clear the temporal cache for this element to ensure childTemporals is up to date
+        import("./EFTemporal.js").then(({ clearTemporalCacheForElement }) => {
+          clearTemporalCacheForElement(this);
+        });
+
+        // Trigger an update to recalculate computed properties
+        this.requestUpdate();
+      }
+    });
+
+    // Observe this element for child changes
+    this.#childObserver.observe(this, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["duration", "mode"],
+    });
+
     requestAnimationFrame(() => {
       this.updateAnimations();
     });
@@ -193,6 +232,7 @@ export class EFTimegroup extends EFTemporal(LitElement) {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.#resizeObserver?.disconnect();
+    this.#childObserver?.disconnect();
   }
 
   get storageKey() {