@editframe/elements 0.23.7-beta.0 → 0.24.1-beta.0

package/dist/elements/EFTimegroup.d.ts

@@ -15,8 +15,21 @@ export declare class EFTimegroup extends EFTimegroup_base {
     efContext: this;
     mode: "fit" | "fixed" | "sequence" | "contain";
     overlapMs: number;
+    fps: number;
     attributeChangedCallback(name: string, old: string | null, value: string | null): void;
     fit: "none" | "contain" | "cover";
+    /**
+     * Get the effective FPS for this timegroup.
+     * During rendering, uses the render options FPS if available.
+     * Otherwise uses the configured fps property.
+     */
+    get effectiveFps(): number;
+    /**
+     * Quantize a time value to the nearest frame boundary based on effectiveFps.
+     * @param timeSeconds - Time in seconds
+     * @returns Time quantized to frame boundaries in seconds
+     */
+    private quantizeToFrameTime;
     private runThrottledFrameTask;
     set currentTime(time: number);
     get currentTime(): number;

package/dist/elements/EFTimegroup.js

@@ -38,6 +38,7 @@ var EFTimegroup = class EFTimegroup$1 extends EFTargetable(EFTemporal(TWMixin(Li
 		this.efContext = this;
 		this.mode = "contain";
 		this.overlapMs = 0;
+		this.fps = 30;
 		this.fit = "none";
 		this.mediaDurationsPromise = void 0;
 		this.frameTask = new Task(this, {
@@ -88,7 +89,8 @@ var EFTimegroup = class EFTimegroup$1 extends EFTargetable(EFTemporal(TWMixin(Li
 			"mode",
 			"overlap",
 			"currenttime",
-			"fit"
+			"fit",
+			"fps"
 		];
 	}
 	static {
@@ -112,6 +114,7 @@ var EFTimegroup = class EFTimegroup$1 extends EFTargetable(EFTemporal(TWMixin(Li
 	attributeChangedCallback(name, old, value) {
 		if (name === "mode" && value) this.mode = value;
 		if (name === "overlap" && value) this.overlapMs = parseTimeToMs(value);
+		if (name === "fps" && value) this.fps = Number.parseFloat(value);
 		super.attributeChangedCallback(name, old, value);
 	}
 	#resizeObserver;
@@ -119,11 +122,22 @@ var EFTimegroup = class EFTimegroup$1 extends EFTargetable(EFTemporal(TWMixin(Li
 	#seekInProgress = false;
 	#pendingSeekTime;
 	#processingPendingSeek = false;
+	get effectiveFps() {
+		if (typeof window !== "undefined" && window.EF_FRAMEGEN?.renderOptions) return window.EF_FRAMEGEN.renderOptions.encoderOptions.video.framerate;
+		return this.fps;
+	}
+	quantizeToFrameTime(timeSeconds) {
+		const fps = this.effectiveFps;
+		if (!fps || fps <= 0) return timeSeconds;
+		const frameDurationS = 1 / fps;
+		return Math.round(timeSeconds / frameDurationS) * frameDurationS;
+	}
 	async runThrottledFrameTask() {
 		if (this.playbackController) return this.playbackController.runThrottledFrameTask();
 		await this.frameTask.run();
 	}
 	set currentTime(time) {
+		time = this.quantizeToFrameTime(time);
 		if (this.playbackController) {
 			this.playbackController.currentTime = time;
 			return;
@@ -409,6 +423,7 @@ var EFTimegroup = class EFTimegroup$1 extends EFTargetable(EFTemporal(TWMixin(Li
 };
 __decorate([provide({ context: timegroupContext })], EFTimegroup.prototype, "_timeGroupContext", void 0);
 __decorate([provide({ context: efContext })], EFTimegroup.prototype, "efContext", void 0);
+__decorate([property({ type: Number })], EFTimegroup.prototype, "fps", void 0);
 __decorate([property({ type: String })], EFTimegroup.prototype, "fit", void 0);
 __decorate([property({
 	type: Number,

package/dist/elements/EFVideo.js

@@ -27,7 +27,6 @@ var EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
         position: relative;
       }
       canvas {
-        all: inherit;
         overflow: hidden;
         position: static;
         width: 100%;

package/dist/gui/PlaybackController.js

@@ -68,7 +68,11 @@ var PlaybackController = class {
 		});
 	}
 	get currentTime() {
-		return this.#currentTime ?? 0;
+		const rawTime = this.#currentTime ?? 0;
+		const fps = this.#host.fps ?? 30;
+		if (!fps || fps <= 0) return rawTime;
+		const frameDurationS = 1 / fps;
+		return Math.round(rawTime / frameDurationS) * frameDurationS;
 	}
 	set currentTime(time) {
 		time = Math.max(0, Math.min(this.#host.durationMs / 1e3, time));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editframe/elements",
-  "version": "0.23.7-beta.0",
+  "version": "0.24.1-beta.0",
   "description": "",
   "exports": {
     ".": {
@@ -27,7 +27,7 @@
   "license": "UNLICENSED",
   "dependencies": {
     "@bramus/style-observer": "^1.3.0",
-    "@editframe/assets": "0.23.7-beta.0",
+    "@editframe/assets": "0.24.1-beta.0",
     "@lit/context": "^1.1.6",
     "@lit/task": "^1.0.3",
     "@opentelemetry/api": "^1.9.0",

package/src/elements/EFCaptions.browsertest.ts

@@ -874,16 +874,16 @@ describe("EFCaptions", () => {
       const captionsTask = captions.customCaptionsDataTask;
       await captionsTask.taskComplete;
 
-      // Test just before boundary 2.599s - should show " timing"
-      timegroup.currentTimeMs = 2599;
+      // Test at frame before boundary (frame 77 at 30fps = ~2567ms) - should show " timing"
+      timegroup.currentTimeMs = 2567;
       await timegroup.seekTask.taskComplete;
       await captions.frameTask.taskComplete;
       await wordContainer.updateComplete;
 
-      console.log(`At 2599ms: wordText="${wordContainer.wordText}"`);
+      console.log(`At 2567ms: wordText="${wordContainer.wordText}"`);
       expect(wordContainer.wordText).toBe(" timing");
 
-      // Test at exact boundary 2.6s - should show " test" (the starting word)
+      // Test at exact boundary frame (frame 78 at 30fps = 2600ms) - should show " test" (the starting word)
       timegroup.currentTimeMs = 2600;
       await timegroup.seekTask.taskComplete;
       await captions.frameTask.taskComplete;
@@ -916,14 +916,14 @@ describe("EFCaptions", () => {
       const captionsTask = captions.customCaptionsDataTask;
       await captionsTask.taskComplete;
 
-      // Test just before boundary
-      timegroup.currentTimeMs = 2590;
+      // Test at frame before boundary (frame 77 at 30fps = ~2567ms)
+      timegroup.currentTimeMs = 2567;
       await timegroup.seekTask.taskComplete;
       await captions.frameTask.taskComplete;
       await wordContainer.updateComplete;
 
       console.log(
-        `Demo case - At 2590ms: wordText="${wordContainer.wordText}", hidden=${wordContainer.hidden}`,
+        `Demo case - At 2567ms: wordText="${wordContainer.wordText}", hidden=${wordContainer.hidden}`,
       );
       expect(wordContainer.wordText).toBe(" captions");
 

package/src/elements/EFTimegroup.ts

@@ -60,7 +60,14 @@ export class EFTimegroup extends EFTargetable(EFTemporal(TWMixin(LitElement))) {
   static get observedAttributes(): string[] {
     // biome-ignore lint/complexity/noThisInStatic: It's okay to use this here
     const parentAttributes = super.observedAttributes || [];
-    return [...parentAttributes, "mode", "overlap", "currenttime", "fit"];
+    return [
+      ...parentAttributes,
+      "mode",
+      "overlap",
+      "currenttime",
+      "fit",
+      "fps",
+    ];
   }
 
   static styles = css`
@@ -89,6 +96,9 @@ export class EFTimegroup extends EFTargetable(EFTemporal(TWMixin(LitElement))) {
   mode: "fit" | "fixed" | "sequence" | "contain" = "contain";
   overlapMs = 0;
 
+  @property({ type: Number })
+  fps = 30;
+
   attributeChangedCallback(
     name: string,
     old: string | null,
@@ -100,6 +110,9 @@ export class EFTimegroup extends EFTargetable(EFTemporal(TWMixin(LitElement))) {
     if (name === "overlap" && value) {
       this.overlapMs = parseTimeToMs(value);
     }
+    if (name === "fps" && value) {
+      this.fps = Number.parseFloat(value);
+    }
     super.attributeChangedCallback(name, old, value);
   }
 
@@ -113,6 +126,31 @@ export class EFTimegroup extends EFTargetable(EFTemporal(TWMixin(LitElement))) {
   #pendingSeekTime: number | undefined;
   #processingPendingSeek = false;
 
+  /**
+   * Get the effective FPS for this timegroup.
+   * During rendering, uses the render options FPS if available.
+   * Otherwise uses the configured fps property.
+   */
+  get effectiveFps(): number {
+    // During rendering, prefer the render options FPS
+    if (typeof window !== "undefined" && window.EF_FRAMEGEN?.renderOptions) {
+      return window.EF_FRAMEGEN.renderOptions.encoderOptions.video.framerate;
+    }
+    return this.fps;
+  }
+
+  /**
+   * Quantize a time value to the nearest frame boundary based on effectiveFps.
+   * @param timeSeconds - Time in seconds
+   * @returns Time quantized to frame boundaries in seconds
+   */
+  private quantizeToFrameTime(timeSeconds: number): number {
+    const fps = this.effectiveFps;
+    if (!fps || fps <= 0) return timeSeconds;
+    const frameDurationS = 1 / fps;
+    return Math.round(timeSeconds / frameDurationS) * frameDurationS;
+  }
+
   private async runThrottledFrameTask(): Promise<void> {
     if (this.playbackController) {
       return this.playbackController.runThrottledFrameTask();
@@ -122,6 +160,10 @@ export class EFTimegroup extends EFTargetable(EFTemporal(TWMixin(LitElement))) {
 
   @property({ type: Number, attribute: "currenttime" })
   set currentTime(time: number) {
+    // Quantize time to frame boundaries based on fps
+    // Do this BEFORE delegating to playbackController to ensure consistency
+    time = this.quantizeToFrameTime(time);
+
     if (this.playbackController) {
       this.playbackController.currentTime = time;
       return;

package/src/elements/EFVideo.ts

@@ -40,7 +40,6 @@ export class EFVideo extends TWMixin(EFMedia) {
         position: relative;
       }
       canvas {
-        all: inherit;
         overflow: hidden;
         position: static;
         width: 100%;

package/src/gui/PlaybackController.ts

@@ -120,7 +120,12 @@ export class PlaybackController implements ReactiveController {
   }
 
   get currentTime(): number {
-    return this.#currentTime ?? 0;
+    const rawTime = this.#currentTime ?? 0;
+    // Quantize to frame boundaries based on host's fps
+    const fps = (this.#host as any).fps ?? 30;
+    if (!fps || fps <= 0) return rawTime;
+    const frameDurationS = 1 / fps;
+    return Math.round(rawTime / frameDurationS) * frameDurationS;
   }
 
   set currentTime(time: number) {