@editframe/react 0.23.8-beta.0 → 0.25.0-beta.0

package/dist/hooks/useTimingInfo.js

@@ -1,35 +1,65 @@
-import { useRef, useState, useEffect } from "react";
-class CurrentTimeController {
-  constructor(host, setCurrentTime) {
-    this.host = host;
-    this.setCurrentTime = setCurrentTime;
-    this.host.addController(this);
-  }
-  hostDisconnected() {
-    this.host.removeController(this);
-  }
-  hostUpdated() {
-    this.setCurrentTime({
-      ownCurrentTimeMs: this.host.ownCurrentTimeMs,
-      durationMs: this.host.durationMs,
-      percentComplete: this.host.ownCurrentTimeMs / this.host.durationMs
-    });
-  }
-}
-const useTimingInfo = (timegroupRef = useRef(null)) => {
-  const [timeInfo, setTimeInfo] = useState({
-    ownCurrentTimeMs: 0,
-    durationMs: 0,
-    percentComplete: 0
-  });
-  useEffect(() => {
-    if (!timegroupRef.current) {
-      throw new Error("Timegroup ref not set");
-    }
-    new CurrentTimeController(timegroupRef.current, setTimeInfo);
-  }, [timegroupRef.current]);
-  return { ...timeInfo, ref: timegroupRef };
+import { useEffect, useRef, useState } from "react";
+
+//#region src/hooks/useTimingInfo.ts
+var CurrentTimeController = class {
+	#lastTaskPromise = null;
+	#isConnected = false;
+	constructor(host, setCurrentTime) {
+		this.host = host;
+		this.setCurrentTime = setCurrentTime;
+		this.host.addController(this);
+	}
+	hostConnected() {
+		this.#isConnected = true;
+	}
+	hostDisconnected() {
+		this.#isConnected = false;
+		this.#lastTaskPromise = null;
+		this.host.removeController(this);
+	}
+	hostUpdated() {
+		const currentTaskPromise = this.host.frameTask.taskComplete;
+		if (currentTaskPromise !== this.#lastTaskPromise) {
+			this.#lastTaskPromise = currentTaskPromise;
+			currentTaskPromise.then(() => {
+				if (this.#isConnected) this.#updateReactState();
+			}).catch(() => {});
+		}
+	}
+	#updateReactState() {
+		this.setCurrentTime({
+			ownCurrentTimeMs: this.host.ownCurrentTimeMs,
+			durationMs: this.host.durationMs,
+			percentComplete: this.host.ownCurrentTimeMs / this.host.durationMs
+		});
+	}
+	syncNow() {
+		this.#updateReactState();
+	}
 };
-export {
-  useTimingInfo
+const useTimingInfo = (timegroupRef = useRef(null)) => {
+	const [timeInfo, setTimeInfo] = useState({
+		ownCurrentTimeMs: 0,
+		durationMs: 0,
+		percentComplete: 0
+	});
+	useEffect(() => {
+		if (!timegroupRef.current) throw new Error("Timegroup ref not set");
+		const controller = new CurrentTimeController(timegroupRef.current, setTimeInfo);
+		if (timegroupRef.current.isConnected) {
+			controller.hostConnected();
+			controller.syncNow();
+		}
+		return () => {
+			controller.hostDisconnected();
+		};
+	}, [timegroupRef.current]);
+	return {
+		...timeInfo,
+		ref: timegroupRef
+	};
 };
+
+//#endregion
+export { useTimingInfo };
+//# sourceMappingURL=useTimingInfo.js.map

package/dist/hooks/useTimingInfo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTimingInfo.js","names":["host: {\n      ownCurrentTimeMs: number;\n      durationMs: number;\n      frameTask: Task<readonly unknown[], unknown>;\n    } & ReactiveControllerHost","setCurrentTime: React.Dispatch<React.SetStateAction<TimeInfo>>","#isConnected","#lastTaskPromise","#updateReactState"],"sources":["../../src/hooks/useTimingInfo.ts"],"sourcesContent":["import type { EFTimegroup } from \"@editframe/elements\";\nimport type { Task } from \"@lit/task\";\nimport type { ReactiveController, ReactiveControllerHost } from \"lit\";\nimport { useEffect, useRef, useState } from \"react\";\n\ninterface TimeInfo {\n  ownCurrentTimeMs: number;\n  durationMs: number;\n  percentComplete: number;\n}\n\nclass CurrentTimeController implements ReactiveController {\n  #lastTaskPromise: Promise<unknown> | null = null;\n  #isConnected = false;\n\n  constructor(\n    private host: {\n      ownCurrentTimeMs: number;\n      durationMs: number;\n      frameTask: Task<readonly unknown[], unknown>;\n    } & ReactiveControllerHost,\n    private setCurrentTime: React.Dispatch<React.SetStateAction<TimeInfo>>,\n  ) {\n    this.host.addController(this);\n  }\n\n  hostConnected(): void {\n    this.#isConnected = true;\n  }\n\n  hostDisconnected(): void {\n    this.#isConnected = false;\n    this.#lastTaskPromise = null;\n    this.host.removeController(this);\n  }\n\n  hostUpdated(): void {\n    const currentTaskPromise = this.host.frameTask.taskComplete;\n\n    // Detect if a new frame task has started (promise reference changed)\n    if (currentTaskPromise !== this.#lastTaskPromise) {\n      this.#lastTaskPromise = currentTaskPromise;\n\n      // Wait for this specific task to complete, then update React\n      // This is async so it doesn't block the update cycle\n      currentTaskPromise\n        .then(() => {\n          // Only update if still connected\n          if (this.#isConnected) {\n            this.#updateReactState();\n          }\n        })\n        .catch(() => {\n          // Ignore task errors - we'll continue observing\n        });\n    }\n  }\n\n  #updateReactState(): void {\n    // Always update to ensure React has the latest state\n    this.setCurrentTime({\n      ownCurrentTimeMs: this.host.ownCurrentTimeMs,\n      durationMs: this.host.durationMs,\n      percentComplete: this.host.ownCurrentTimeMs / this.host.durationMs,\n    });\n  }\n\n  // Public method to manually trigger sync (for initialization)\n  syncNow(): void {\n    this.#updateReactState();\n  }\n}\n\nexport const useTimingInfo = (\n  timegroupRef: React.RefObject<EFTimegroup> = useRef<EFTimegroup>(null),\n) => {\n  const [timeInfo, setTimeInfo] = useState<TimeInfo>({\n    ownCurrentTimeMs: 0,\n    durationMs: 0,\n    percentComplete: 0,\n  });\n\n  useEffect(() => {\n    if (!timegroupRef.current) {\n      throw new Error(\"Timegroup ref not set\");\n    }\n\n    const controller = new CurrentTimeController(\n      timegroupRef.current,\n      setTimeInfo,\n    );\n\n    // Trigger initial update if the timegroup is already connected\n    if (timegroupRef.current.isConnected) {\n      controller.hostConnected();\n      // Sync initial state immediately\n      controller.syncNow();\n    }\n\n    // Cleanup function\n    return () => {\n      controller.hostDisconnected();\n    };\n  }, [timegroupRef.current]);\n\n  return { ...timeInfo, ref: timegroupRef };\n};\n"],"mappings":";;;AAWA,IAAM,wBAAN,MAA0D;CACxD,mBAA4C;CAC5C,eAAe;CAEf,YACE,AAAQA,MAKR,AAAQC,gBACR;EANQ;EAKA;AAER,OAAK,KAAK,cAAc,KAAK;;CAG/B,gBAAsB;AACpB,QAAKC,cAAe;;CAGtB,mBAAyB;AACvB,QAAKA,cAAe;AACpB,QAAKC,kBAAmB;AACxB,OAAK,KAAK,iBAAiB,KAAK;;CAGlC,cAAoB;EAClB,MAAM,qBAAqB,KAAK,KAAK,UAAU;AAG/C,MAAI,uBAAuB,MAAKA,iBAAkB;AAChD,SAAKA,kBAAmB;AAIxB,sBACG,WAAW;AAEV,QAAI,MAAKD,YACP,OAAKE,kBAAmB;KAE1B,CACD,YAAY,GAEX;;;CAIR,oBAA0B;AAExB,OAAK,eAAe;GAClB,kBAAkB,KAAK,KAAK;GAC5B,YAAY,KAAK,KAAK;GACtB,iBAAiB,KAAK,KAAK,mBAAmB,KAAK,KAAK;GACzD,CAAC;;CAIJ,UAAgB;AACd,QAAKA,kBAAmB;;;AAI5B,MAAa,iBACX,eAA6C,OAAoB,KAAK,KACnE;CACH,MAAM,CAAC,UAAU,eAAe,SAAmB;EACjD,kBAAkB;EAClB,YAAY;EACZ,iBAAiB;EAClB,CAAC;AAEF,iBAAgB;AACd,MAAI,CAAC,aAAa,QAChB,OAAM,IAAI,MAAM,wBAAwB;EAG1C,MAAM,aAAa,IAAI,sBACrB,aAAa,SACb,YACD;AAGD,MAAI,aAAa,QAAQ,aAAa;AACpC,cAAW,eAAe;AAE1B,cAAW,SAAS;;AAItB,eAAa;AACX,cAAW,kBAAkB;;IAE9B,CAAC,aAAa,QAAQ,CAAC;AAE1B,QAAO;EAAE,GAAG;EAAU,KAAK;EAAc"}

package/dist/index.d.ts

@@ -1,24 +1,25 @@
-export { TimeDisplay } from './components/TimeDisplay.js';
-export { Audio } from './elements/Audio.js';
-export { Captions, CaptionsActiveWord, CaptionsAfterActiveWord, CaptionsBeforeActiveWord, CaptionsSegment, } from './elements/Captions.js';
-export { Image } from './elements/Image.js';
-export { Surface } from './elements/Surface.js';
-export { ThumbnailStrip } from './elements/ThumbnailStrip.js';
-export { Timegroup } from './elements/Timegroup.js';
-export { Video } from './elements/Video.js';
-export { Waveform } from './elements/Waveform.js';
-export { Configuration } from './gui/Configuration.js';
-export { Controls } from './gui/Controls.js';
-export { Dial } from './gui/EFDial.js';
-export { ResizableBox } from './gui/EFResizableBox.js';
-export { Filmstrip } from './gui/Filmstrip.js';
-export { FitScale } from './gui/FitScale.js';
-export { FocusOverlay } from './gui/FocusOverlay.js';
-export { Pause } from './gui/Pause.js';
-export { Play } from './gui/Play.js';
-export { Preview } from './gui/Preview.js';
-export { Scrubber } from './gui/Scrubber.js';
-export { ToggleLoop } from './gui/ToggleLoop.js';
-export { TogglePlay } from './gui/TogglePlay.js';
-export { Workbench } from './gui/Workbench.js';
-export { useTimingInfo } from './hooks/useTimingInfo.js';
+import { TimeDisplay } from "./components/TimeDisplay.js";
+import { Audio } from "./elements/Audio.js";
+import { Captions, CaptionsActiveWord, CaptionsAfterActiveWord, CaptionsBeforeActiveWord, CaptionsSegment } from "./elements/Captions.js";
+import { Image } from "./elements/Image.js";
+import { Surface } from "./elements/Surface.js";
+import { ThumbnailStrip } from "./elements/ThumbnailStrip.js";
+import { Timegroup } from "./elements/Timegroup.js";
+import { Video } from "./elements/Video.js";
+import { Waveform } from "./elements/Waveform.js";
+import { Configuration } from "./gui/Configuration.js";
+import { Controls } from "./gui/Controls.js";
+import { Dial } from "./gui/EFDial.js";
+import { ResizableBox } from "./gui/EFResizableBox.js";
+import { Filmstrip } from "./gui/Filmstrip.js";
+import { FitScale } from "./gui/FitScale.js";
+import { FocusOverlay } from "./gui/FocusOverlay.js";
+import { Pause } from "./gui/Pause.js";
+import { Play } from "./gui/Play.js";
+import { Preview } from "./gui/Preview.js";
+import { Scrubber } from "./gui/Scrubber.js";
+import { ToggleLoop } from "./gui/ToggleLoop.js";
+import { TogglePlay } from "./gui/TogglePlay.js";
+import { Workbench } from "./gui/Workbench.js";
+import { useTimingInfo } from "./hooks/useTimingInfo.js";
+export { Audio, Captions, CaptionsActiveWord, CaptionsAfterActiveWord, CaptionsBeforeActiveWord, CaptionsSegment, Configuration, Controls, Dial, Filmstrip, FitScale, FocusOverlay, Image, Pause, Play, Preview, ResizableBox, Scrubber, Surface, ThumbnailStrip, TimeDisplay, Timegroup, ToggleLoop, TogglePlay, Video, Waveform, Workbench, useTimingInfo };

package/dist/index.js

@@ -22,33 +22,5 @@ import { ToggleLoop } from "./gui/ToggleLoop.js";
 import { TogglePlay } from "./gui/TogglePlay.js";
 import { Workbench } from "./gui/Workbench.js";
 import { useTimingInfo } from "./hooks/useTimingInfo.js";
-export {
-  Audio,
-  Captions,
-  CaptionsActiveWord,
-  CaptionsAfterActiveWord,
-  CaptionsBeforeActiveWord,
-  CaptionsSegment,
-  Configuration,
-  Controls,
-  Dial,
-  Filmstrip,
-  FitScale,
-  FocusOverlay,
-  Image,
-  Pause,
-  Play,
-  Preview,
-  ResizableBox,
-  Scrubber,
-  Surface,
-  ThumbnailStrip,
-  TimeDisplay,
-  Timegroup,
-  ToggleLoop,
-  TogglePlay,
-  Video,
-  Waveform,
-  Workbench,
-  useTimingInfo
-};
+
+export { Audio, Captions, CaptionsActiveWord, CaptionsAfterActiveWord, CaptionsBeforeActiveWord, CaptionsSegment, Configuration, Controls, Dial, Filmstrip, FitScale, FocusOverlay, Image, Pause, Play, Preview, ResizableBox, Scrubber, Surface, ThumbnailStrip, TimeDisplay, Timegroup, ToggleLoop, TogglePlay, Video, Waveform, Workbench, useTimingInfo };

package/package.json

@@ -1,32 +1,24 @@
 {
   "name": "@editframe/react",
-  "version": "0.23.8-beta.0",
+  "version": "0.25.0-beta.0",
   "description": "",
   "exports": {
-    ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      }
-    },
-    "./types.json": {
-      "import": {
-        "default": "./types.json"
-      }
-    }
+    ".": "./dist/index.js",
+    "./package.json": "./package.json"
   },
   "type": "module",
   "scripts": {
     "typecheck": "tsc --noEmit --emitDeclarationOnly false",
-    "build": "vite build",
-    "build:watch": "vite build --watch",
+    "build": "tsdown",
+    "build:watch": "tsdown --watch",
     "typedoc": "typedoc --json ./types.json --plugin typedoc-plugin-zod --excludeExternals ./src && jq -c . ./types.json > ./types.tmp.json && mv ./types.tmp.json ./types.json"
   },
   "author": "",
   "license": "UNLICENSED",
   "dependencies": {
-    "@editframe/elements": "0.23.8-beta.0",
+    "@editframe/elements": "0.25.0-beta.0",
     "@lit/react": "^1.0.8",
+    "@lit/task": "^1.0.1",
     "debug": "^4.3.5",
     "lit": "^3.3.1",
     "react": "^18.3.0",
@@ -36,10 +28,10 @@
     "@types/node": "^22.0.0",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
-    "rollup-plugin-tsconfig-paths": "^1.5.2",
     "typescript": "^5.5.4",
-    "vite-plugin-dts": "^4.5.4",
-    "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^1.6.0"
-  }
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts"
 }

package/src/hooks/useTimingInfo.browsertest.tsx

@@ -0,0 +1,371 @@
+import type { EFTimegroup } from "@editframe/elements";
+import { type FC, useEffect } from "react";
+import { createRoot } from "react-dom/client";
+import { assert, beforeEach, describe, test } from "vitest";
+import { Timegroup } from "../elements/Timegroup.js";
+import { Video } from "../elements/Video.js";
+import { Configuration } from "../gui/Configuration.js";
+import { Preview } from "../gui/Preview.js";
+import { useTimingInfo } from "./useTimingInfo.js";
+
+beforeEach(() => {
+  while (document.body.children.length) {
+    document.body.children[0]?.remove();
+  }
+});
+
+interface TimingDisplayProps {
+  onUpdate?: (info: {
+    ownCurrentTimeMs: number;
+    durationMs: number;
+    percentComplete: number;
+  }) => void;
+}
+
+const TimingDisplay: FC<TimingDisplayProps> = ({ onUpdate }) => {
+  const { ownCurrentTimeMs, durationMs, percentComplete, ref } =
+    useTimingInfo();
+
+  useEffect(() => {
+    if (onUpdate) {
+      onUpdate({ ownCurrentTimeMs, durationMs, percentComplete });
+    }
+  }, [ownCurrentTimeMs, durationMs, percentComplete, onUpdate]);
+
+  return (
+    // biome-ignore lint/correctness/useUniqueElementIds: OK for test fixture with single instance
+    <Preview id="test-preview">
+      <Timegroup mode="fixed" duration="3s" ref={ref}>
+        <Video
+          src="https://editframe-dev-assets.s3.us-east-1.amazonaws.com/test-assets/test_audio.mp4"
+          trim="0s-1s"
+        />
+      </Timegroup>
+    </Preview>
+  );
+};
+
+describe("useTimingInfo", () => {
+  test("provides initial timing information", async () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+
+    let receivedInfo: {
+      ownCurrentTimeMs: number;
+      durationMs: number;
+      percentComplete: number;
+    } | null = null;
+
+    const root = createRoot(container);
+    root.render(
+      <Configuration>
+        <TimingDisplay
+          onUpdate={(info) => {
+            receivedInfo = info;
+          }}
+        />
+      </Configuration>,
+    );
+
+    // Wait for the component to mount and update
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    const preview = container.querySelector("ef-preview");
+    const timegroup = preview?.querySelector("ef-timegroup") as EFTimegroup;
+
+    assert.ok(timegroup, "Timegroup should be rendered");
+    await timegroup.updateComplete;
+    await timegroup.waitForMediaDurations();
+
+    // Wait for initial frame task
+    await timegroup.frameTask.run();
+
+    assert.ok(receivedInfo, "Should receive timing info");
+    assert.equal(receivedInfo?.ownCurrentTimeMs, 0);
+    assert.equal(receivedInfo?.durationMs, 3000);
+    assert.equal(receivedInfo?.percentComplete, 0);
+
+    root.unmount();
+    container.remove();
+  }, 5000);
+
+  test("updates only on frame task completion, not on every Lit update", async () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+
+    const updates: number[] = [];
+
+    const root = createRoot(container);
+    root.render(
+      <Configuration>
+        <TimingDisplay
+          onUpdate={(info) => {
+            updates.push(info.ownCurrentTimeMs);
+          }}
+        />
+      </Configuration>,
+    );
+
+    // Wait for initial mount
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    const preview = container.querySelector("ef-preview");
+    const timegroup = preview?.querySelector("ef-timegroup") as EFTimegroup;
+
+    assert.ok(timegroup, "Timegroup should be rendered");
+    await timegroup.updateComplete;
+    await timegroup.waitForMediaDurations();
+
+    // Clear initial updates
+    updates.length = 0;
+
+    // Trigger multiple Lit updates without frame task
+    // These should NOT trigger React updates
+    timegroup.requestUpdate("mode");
+    await timegroup.updateComplete;
+    timegroup.requestUpdate("mode");
+    await timegroup.updateComplete;
+    timegroup.requestUpdate("mode");
+    await timegroup.updateComplete;
+
+    // Should have no updates since no frame tasks ran
+    assert.equal(
+      updates.length,
+      0,
+      "Should not update on Lit property changes",
+    );
+
+    // Now trigger frame task via seek (proper API that triggers both task and update)
+    await timegroup.seek(1000);
+    // Give React a chance to process the state update
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
+    // Should have exactly one update from frame task
+    assert.ok(updates.length >= 1, "Should update once per frame task");
+
+    root.unmount();
+    container.remove();
+  }, 5000);
+
+  test("updates synchronously with frame tasks during seek", async () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+
+    const updates: number[] = [];
+
+    const root = createRoot(container);
+    root.render(
+      <Configuration>
+        <TimingDisplay
+          onUpdate={(info) => {
+            updates.push(info.ownCurrentTimeMs);
+          }}
+        />
+      </Configuration>,
+    );
+
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    const preview = container.querySelector("ef-preview");
+    const timegroup = preview?.querySelector("ef-timegroup") as EFTimegroup;
+
+    assert.ok(timegroup, "Timegroup should be rendered");
+    await timegroup.updateComplete;
+    await timegroup.waitForMediaDurations();
+
+    // Clear initial updates
+    updates.length = 0;
+
+    // Seek to different times
+    await timegroup.seek(1000);
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    const updatesAfterFirstSeek = updates.length;
+    assert.ok(updatesAfterFirstSeek > 0, "Should update after first seek");
+
+    await timegroup.seek(2000);
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    const updatesAfterSecondSeek = updates.length;
+    assert.ok(
+      updatesAfterSecondSeek > updatesAfterFirstSeek,
+      "Should update after second seek",
+    );
+
+    // Verify the last update has the correct time
+    const lastUpdate = updates[updates.length - 1];
+    assert.equal(lastUpdate, 2000, "Should reflect the seeked time");
+
+    root.unmount();
+    container.remove();
+  }, 5000);
+
+  test("updates at controlled rate with sequential frame updates", async () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+
+    const updateTimestamps: number[] = [];
+    const updateTimes: number[] = [];
+
+    const root = createRoot(container);
+    root.render(
+      <Configuration>
+        <TimingDisplay
+          onUpdate={(info) => {
+            updateTimestamps.push(performance.now());
+            updateTimes.push(info.ownCurrentTimeMs);
+          }}
+        />
+      </Configuration>,
+    );
+
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    const preview = container.querySelector("ef-preview");
+    const timegroup = preview?.querySelector("ef-timegroup") as EFTimegroup;
+
+    assert.ok(timegroup, "Timegroup should be rendered");
+    await timegroup.updateComplete;
+    await timegroup.waitForMediaDurations();
+
+    // Clear initial updates
+    updateTimestamps.length = 0;
+    updateTimes.length = 0;
+
+    // Simulate frame-by-frame updates at a controlled rate (30fps)
+    // Note: We use seek() rather than play() because AudioContext-based playback
+    // doesn't work in headless browsers due to autoplay policies that require user interaction
+    const FPS = 30;
+    const MS_PER_FRAME = 1000 / FPS;
+    const DURATION_MS = 500;
+    const numFrames = Math.floor(DURATION_MS / MS_PER_FRAME);
+
+    for (let i = 0; i < numFrames; i++) {
+      const targetTime = i * MS_PER_FRAME;
+      await timegroup.seek(targetTime);
+      await new Promise((resolve) => setTimeout(resolve, MS_PER_FRAME));
+    }
+
+    // Should have received multiple updates during simulated playback
+    assert.ok(
+      updateTimestamps.length >= 10,
+      `Should have at least 10 updates during simulated playback (got ${updateTimestamps.length})`,
+    );
+
+    // Calculate update intervals
+    const intervals: number[] = [];
+    for (let i = 1; i < updateTimestamps.length; i++) {
+      intervals.push(updateTimestamps[i] - updateTimestamps[i - 1]);
+    }
+
+    // Average interval should be around 33ms (30fps) matching our simulated rate
+    const avgInterval = intervals.reduce((a, b) => a + b, 0) / intervals.length;
+
+    // Should be approximately 33ms per frame
+    // Allow generous variance for timing imprecision in CI
+    assert.ok(
+      avgInterval > 20 && avgInterval < 100,
+      `Update interval should be between 20-100ms (got ${avgInterval}ms), indicating controlled rate`,
+    );
+
+    root.unmount();
+    container.remove();
+  }, 5000);
+
+  test("continues observing after errors in frame task", async () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+
+    const updates: number[] = [];
+
+    const root = createRoot(container);
+    root.render(
+      <Configuration>
+        <TimingDisplay
+          onUpdate={(info) => {
+            updates.push(info.ownCurrentTimeMs);
+          }}
+        />
+      </Configuration>,
+    );
+
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    const preview = container.querySelector("ef-preview");
+    const timegroup = preview?.querySelector("ef-timegroup") as EFTimegroup;
+
+    assert.ok(timegroup, "Timegroup should be rendered");
+    await timegroup.updateComplete;
+    await timegroup.waitForMediaDurations();
+
+    updates.length = 0;
+
+    // First seek triggers frame task
+    await timegroup.seek(500);
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    assert.ok(updates.length >= 1, "Should update after first seek");
+
+    // Even if there's an error or the task rejects, the observer should continue
+    // (The implementation catches errors and continues observing)
+    const updatesAfterFirst = updates.length;
+
+    // Second seek triggers another frame task
+    await timegroup.seek(1000);
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    assert.ok(updates.length > updatesAfterFirst, "Should continue updating");
+
+    root.unmount();
+    container.remove();
+  }, 5000);
+
+  test("stops observing when component unmounts", async () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+
+    const updates: number[] = [];
+
+    const root = createRoot(container);
+    root.render(
+      <Configuration>
+        <TimingDisplay
+          onUpdate={(info) => {
+            updates.push(info.ownCurrentTimeMs);
+          }}
+        />
+      </Configuration>,
+    );
+
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    const preview = container.querySelector("ef-preview");
+    const timegroup = preview?.querySelector("ef-timegroup") as EFTimegroup;
+
+    assert.ok(timegroup, "Timegroup should be rendered");
+    await timegroup.updateComplete;
+    await timegroup.waitForMediaDurations();
+
+    updates.length = 0;
+
+    // Seek before unmount (triggers frame task)
+    await timegroup.seek(500);
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    assert.ok(updates.length >= 1, "Should update before unmount");
+
+    // Unmount the component
+    root.unmount();
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
+    // Seek after unmount should not cause updates
+    const updatesBeforePost = updates.length;
+    await timegroup.seek(1000);
+
+    // Give time for any potential updates
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
+    assert.equal(
+      updates.length,
+      updatesBeforePost,
+      "Should not update after unmount",
+    );
+
+    container.remove();
+  }, 5000);
+});