@editframe/elements 0.37.3-beta → 0.38.1

package/dist/utils/frameTime.js

@@ -1,5 +1,27 @@
 //#region src/utils/frameTime.ts
 /**
+* Frame timing utilities for quantizing time values to frame boundaries.
+* These utilities ensure consistent frame-aligned timing across the codebase.
+*/
+/** Default FPS when none is specified */
+const DEFAULT_FPS = 30;
+/**
+* Calculate the duration of a single frame in milliseconds.
+*/
+function calculateFrameIntervalMs(fps) {
+	if (fps <= 0) return 1e3 / DEFAULT_FPS;
+	return 1e3 / fps;
+}
+/**
+* Quantize a time value (in milliseconds) to the nearest frame boundary.
+* This ensures frame markers align perfectly with playhead position.
+*/
+function quantizeToFrameTimeMs(timeMs, fps) {
+	if (!fps || fps <= 0) return timeMs;
+	const frameDurationMs = calculateFrameIntervalMs(fps);
+	return Math.round(timeMs / frameDurationMs) * frameDurationMs;
+}
+/**
 * Quantize a time value (in seconds) to the nearest frame boundary.
 * This ensures time values align with frame boundaries for consistent rendering.
 */
@@ -10,5 +32,5 @@ function quantizeToFrameTimeS(timeSeconds, fps) {
 }
 
 //#endregion
-export { quantizeToFrameTimeS };
+export { quantizeToFrameTimeMs, quantizeToFrameTimeS };
 //# sourceMappingURL=frameTime.js.map

package/dist/utils/frameTime.js.map

@@ -1 +1 @@
-{"version":3,"file":"frameTime.js","names":[],"sources":["../../src/utils/frameTime.ts"],"sourcesContent":["/**\n * Frame timing utilities for quantizing time values to frame boundaries.\n * These utilities ensure consistent frame-aligned timing across the codebase.\n */\n\n/** Default FPS when none is specified */\nexport const DEFAULT_FPS = 30;\n\n/**\n * Calculate the duration of a single frame in milliseconds.\n */\nexport function calculateFrameIntervalMs(fps: number): number {\n  if (fps <= 0) return 1000 / DEFAULT_FPS;\n  return 1000 / fps;\n}\n\n/**\n * Quantize a time value (in milliseconds) to the nearest frame boundary.\n * This ensures frame markers align perfectly with playhead position.\n */\nexport function quantizeToFrameTimeMs(timeMs: number, fps: number): number {\n  if (!fps || fps <= 0) return timeMs;\n  const frameDurationMs = calculateFrameIntervalMs(fps);\n  return Math.round(timeMs / frameDurationMs) * frameDurationMs;\n}\n\n/**\n * Quantize a time value (in seconds) to the nearest frame boundary.\n * This ensures time values align with frame boundaries for consistent rendering.\n */\nexport function quantizeToFrameTimeS(timeSeconds: number, fps: number): number {\n  if (!fps || fps <= 0) return timeSeconds;\n  const frameDurationS = 1 / fps;\n  return Math.round(timeSeconds / frameDurationS) * frameDurationS;\n}\n\n/**\n * Clamp and quantize a seek time to valid range.\n * Prevents \"Sample not found\" errors at video boundaries.\n * \n * @param desiredSeekTimeMs - The desired seek time in milliseconds\n * @param durationMs - The total duration in milliseconds\n * @param fps - Frames per second (defaults to 30)\n * @returns Clamped and quantized time in milliseconds\n */\nexport function clampAndQuantizeSeekTimeMs(\n  desiredSeekTimeMs: number,\n  durationMs: number,\n  fps: number = DEFAULT_FPS,\n): number {\n  if (durationMs <= 0) return 0;\n\n  // Quantize to frame boundaries\n  const quantizedMs = quantizeToFrameTimeMs(desiredSeekTimeMs, fps);\n\n  // Clamp to valid range [0, lastFrameTime]\n  // The last valid frame is at durationMs - frameDurationMs to ensure we don't\n  // seek past the last decodable frame\n  const frameDurationMs = calculateFrameIntervalMs(fps);\n  const maxValidTime = Math.max(0, durationMs - frameDurationMs);\n  return Math.max(0, Math.min(quantizedMs, maxValidTime));\n}\n\n\n\n\n"],"mappings":";;;;;AA8BA,SAAgB,qBAAqB,aAAqB,KAAqB;AAC7E,KAAI,CAAC,OAAO,OAAO,EAAG,QAAO;CAC7B,MAAM,iBAAiB,IAAI;AAC3B,QAAO,KAAK,MAAM,cAAc,eAAe,GAAG"}
+{"version":3,"file":"frameTime.js","names":[],"sources":["../../src/utils/frameTime.ts"],"sourcesContent":["/**\n * Frame timing utilities for quantizing time values to frame boundaries.\n * These utilities ensure consistent frame-aligned timing across the codebase.\n */\n\n/** Default FPS when none is specified */\nexport const DEFAULT_FPS = 30;\n\n/**\n * Calculate the duration of a single frame in milliseconds.\n */\nexport function calculateFrameIntervalMs(fps: number): number {\n  if (fps <= 0) return 1000 / DEFAULT_FPS;\n  return 1000 / fps;\n}\n\n/**\n * Quantize a time value (in milliseconds) to the nearest frame boundary.\n * This ensures frame markers align perfectly with playhead position.\n */\nexport function quantizeToFrameTimeMs(timeMs: number, fps: number): number {\n  if (!fps || fps <= 0) return timeMs;\n  const frameDurationMs = calculateFrameIntervalMs(fps);\n  return Math.round(timeMs / frameDurationMs) * frameDurationMs;\n}\n\n/**\n * Quantize a time value (in seconds) to the nearest frame boundary.\n * This ensures time values align with frame boundaries for consistent rendering.\n */\nexport function quantizeToFrameTimeS(timeSeconds: number, fps: number): number {\n  if (!fps || fps <= 0) return timeSeconds;\n  const frameDurationS = 1 / fps;\n  return Math.round(timeSeconds / frameDurationS) * frameDurationS;\n}\n\n/**\n * Clamp and quantize a seek time to valid range.\n * Prevents \"Sample not found\" errors at video boundaries.\n *\n * @param desiredSeekTimeMs - The desired seek time in milliseconds\n * @param durationMs - The total duration in milliseconds\n * @param fps - Frames per second (defaults to 30)\n * @returns Clamped and quantized time in milliseconds\n */\nexport function clampAndQuantizeSeekTimeMs(\n  desiredSeekTimeMs: number,\n  durationMs: number,\n  fps: number = DEFAULT_FPS,\n): number {\n  if (durationMs <= 0) return 0;\n\n  // Quantize to frame boundaries\n  const quantizedMs = quantizeToFrameTimeMs(desiredSeekTimeMs, fps);\n\n  // Clamp to valid range [0, lastFrameTime]\n  // The last valid frame is at durationMs - frameDurationMs to ensure we don't\n  // seek past the last decodable frame\n  const frameDurationMs = calculateFrameIntervalMs(fps);\n  const maxValidTime = Math.max(0, durationMs - frameDurationMs);\n  return Math.max(0, Math.min(quantizedMs, maxValidTime));\n}\n"],"mappings":";;;;;;AAMA,MAAa,cAAc;;;;AAK3B,SAAgB,yBAAyB,KAAqB;AAC5D,KAAI,OAAO,EAAG,QAAO,MAAO;AAC5B,QAAO,MAAO;;;;;;AAOhB,SAAgB,sBAAsB,QAAgB,KAAqB;AACzE,KAAI,CAAC,OAAO,OAAO,EAAG,QAAO;CAC7B,MAAM,kBAAkB,yBAAyB,IAAI;AACrD,QAAO,KAAK,MAAM,SAAS,gBAAgB,GAAG;;;;;;AAOhD,SAAgB,qBAAqB,aAAqB,KAAqB;AAC7E,KAAI,CAAC,OAAO,OAAO,EAAG,QAAO;CAC7B,MAAM,iBAAiB,IAAI;AAC3B,QAAO,KAAK,MAAM,cAAc,eAAe,GAAG"}

package/package.json

@@ -1,10 +1,15 @@
 {
   "name": "@editframe/elements",
-  "version": "0.37.3-beta",
+  "version": "0.38.1",
   "description": "",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/editframe/elements.git",
+    "directory": "packages/elements"
+  },
   "type": "module",
   "scripts": {
-    "typecheck": "tsc --noEmit --emitDeclarationOnly false",
+    "typecheck": "tsc --noEmit",
     "build": "tsdown && node scripts/build-css.js",
     "build:watch": "tsdown --watch",
     "typedoc": "(typedoc --json ./types.json --plugin typedoc-plugin-zod --excludeExternals ./src || true) && ([ -f ./types.json ] && jq -c . ./types.json > ./types.tmp.json && mv ./types.tmp.json ./types.json || true)"
@@ -13,7 +18,7 @@
   "license": "UNLICENSED",
   "dependencies": {
     "@bramus/style-observer": "^1.3.0",
-    "@editframe/assets": "0.37.3-beta",
+    "@editframe/assets": "0.38.1",
     "@lit/context": "^1.1.6",
     "@opentelemetry/api": "^1.9.0",
     "@opentelemetry/context-zone": "^1.26.0",
@@ -28,15 +33,14 @@
     "zod": "^3.24.1"
   },
   "devDependencies": {
+    "@jridgewell/trace-mapping": "^0.3.28",
     "@types/dom-webcodecs": "^0.1.11",
-    "@types/node": "^20.14.13",
+    "@types/node": "^22.0.0",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.3",
-    "typescript": "^5.5.4"
+    "typescript": "^5.9.3"
   },
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
@@ -51,6 +55,18 @@
         "default": "./dist/node.js"
       }
     },
+    "./preview/renderTimegroupToCanvas": {
+      "import": {
+        "types": "./dist/preview/renderTimegroupToCanvas.d.ts",
+        "default": "./dist/preview/renderTimegroupToCanvas.js"
+      }
+    },
+    "./preview/renderTimegroupToVideo": {
+      "import": {
+        "types": "./dist/preview/renderTimegroupToVideo.d.ts",
+        "default": "./dist/preview/renderTimegroupToVideo.js"
+      }
+    },
     "./package.json": "./package.json",
     "./styles.css": "./dist/style.css",
     "./types.json": "./types.json"
@@ -63,15 +79,36 @@
           "default": "./dist/index.js"
         }
       },
+      "./server": {
+        "import": {
+          "types": "./dist/server.d.ts",
+          "default": "./dist/server.js"
+        }
+      },
       "./node": {
         "import": {
           "types": "./dist/node.d.ts",
           "default": "./dist/node.js"
         }
       },
+      "./preview/renderTimegroupToVideo": {
+        "import": {
+          "types": "./dist/preview/renderTimegroupToVideo.d.ts",
+          "default": "./dist/preview/renderTimegroupToVideo.js"
+        }
+      },
+      "./preview/renderTimegroupToCanvas": {
+        "import": {
+          "types": "./dist/preview/renderTimegroupToCanvas.d.ts",
+          "default": "./dist/preview/renderTimegroupToCanvas.js"
+        }
+      },
       "./package.json": "./package.json",
       "./styles.css": "./dist/style.css",
+      "./theme.css": "./dist/gui/ef-theme.css",
       "./types.json": "./types.json"
     }
-  }
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js"
 }

package/scripts/build-css.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { mkdirSync, readFileSync, writeFileSync, cpSync } from "node:fs";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
 import autoprefixer from "autoprefixer";
@@ -14,6 +14,7 @@ const configPath = join(__dirname, "..", "tailwind.config.ts");
 
 // Ensure dist directory exists
 mkdirSync(distDir, { recursive: true });
+mkdirSync(join(distDir, "gui"), { recursive: true });
 
 // Read source CSS
 const cssPath = join(srcDir, "elements.css");
@@ -30,6 +31,12 @@ postcss([tailwindcss({ config: configPath }), autoprefixer()])
       writeFileSync(join(distDir, "style.css.map"), result.map.toString());
     }
     console.log("✅ CSS processed and written to dist/style.css");
+
+    // Copy theme CSS file
+    const themeCssPath = join(srcDir, "gui", "ef-theme.css");
+    const themeDistPath = join(distDir, "gui", "ef-theme.css");
+    cpSync(themeCssPath, themeDistPath);
+    console.log("✅ Theme CSS copied to dist/gui/ef-theme.css");
   })
   .catch((error) => {
     console.error("❌ CSS processing failed:", error);

package/test/setup.ts

@@ -62,7 +62,6 @@ afterAll(() => {
   if (typeof window !== "undefined") {
     // Always set the flag, creating it if it doesn't exist
     // This handles both profiled and non-profiled test runs
-    console.log("[Profiler] Signaling stop...");
     (window as any).__PROFILER_STOP_REQUESTED__ = true;
 
     // Give profiler time to detect the signal and retrieve profile data

package/test/useAssetMSW.ts

@@ -100,4 +100,54 @@ export const assetMSWHandlers = [
       },
     });
   }),
+
+  http.get("/api/v1/files/:id/index", async () => {
+    const mockIndex = {
+      0: {
+        duration: 10000,
+        timescale: 1000,
+        fragments: [
+          {
+            offset: 0,
+            size: 1024,
+            timestamp: 0,
+            duration: 10000,
+          },
+        ],
+      },
+    };
+
+    return HttpResponse.json(mockIndex, {
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  }),
+
+  http.get("/api/v1/files/:id/tracks/:trackId", async ({ request }) => {
+    const rangeHeader = request.headers.get("range");
+
+    if (rangeHeader) {
+      const mockData = new ArrayBuffer(1024);
+      return new HttpResponse(mockData, {
+        status: 206,
+        headers: {
+          "Content-Type": "video/mp4",
+          "Accept-Ranges": "bytes",
+          "Content-Range": rangeHeader,
+          "Content-Length": "1024",
+        },
+      });
+    }
+
+    const mockData = new ArrayBuffer(1024);
+    return new HttpResponse(mockData, {
+      status: 200,
+      headers: {
+        "Content-Type": "video/mp4",
+        "Accept-Ranges": "bytes",
+        "Content-Length": "1024",
+      },
+    });
+  }),
 ];

package/test/visualRegressionUtils.ts

@@ -15,14 +15,28 @@ export interface SnapshotComparisonResult {
 }
 
 /**
- * Capture a canvas element as a data URL.
+ * Capture a canvas or image as a data URL.
  * Uses JPEG format with configurable quality for smaller file sizes.
  */
 export function captureCanvasAsDataUrl(
-  canvas: HTMLCanvasElement,
+  source: CanvasImageSource | HTMLCanvasElement,
   format: "image/png" | "image/jpeg" = "image/jpeg",
   quality: number = 0.85,
 ): string {
+  // If it's already a canvas, use toDataURL directly
+  if (source instanceof HTMLCanvasElement) {
+    return source.toDataURL(format, quality);
+  }
+
+  // Otherwise, draw to temp canvas first
+  const canvas = document.createElement("canvas");
+  canvas.width = (source as any).width as number;
+  canvas.height = (source as any).height as number;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error("Failed to get canvas 2d context");
+  }
+  ctx.drawImage(source, 0, 0);
   return canvas.toDataURL(format, quality);
 }
 
@@ -178,7 +192,7 @@ export async function assertCanvasSnapshot(
  * Throws an assertion error if the diff exceeds the acceptable threshold.
  */
 export async function expectCanvasToMatchSnapshot(
-  canvas: HTMLCanvasElement,
+  source: CanvasImageSource | HTMLCanvasElement,
   testName: string,
   snapshotName: string,
   options: {
@@ -187,7 +201,7 @@ export async function expectCanvasToMatchSnapshot(
   } = {},
 ): Promise<void> {
   const result = await assertCanvasSnapshot(
-    canvas,
+    source as unknown as HTMLCanvasElement,
     testName,
     snapshotName,
     options,
@@ -210,12 +224,12 @@ export async function expectCanvasToMatchSnapshot(
 }
 
 /**
- * Compare two canvases directly against each other.
+ * Compare two canvases or images directly against each other.
  * Returns comparison results including diff percentage.
  */
 export async function compareTwoCanvases(
-  canvas1: HTMLCanvasElement,
-  canvas2: HTMLCanvasElement,
+  source1: CanvasImageSource | HTMLCanvasElement,
+  source2: CanvasImageSource | HTMLCanvasElement,
   testName: string,
   comparisonName: string,
   options: {
@@ -226,8 +240,8 @@ export async function compareTwoCanvases(
   const { threshold = 0.1, acceptableDiffPercentage = 1.0 } = options;
 
   // Use PNG format for consistent comparison (odiff works best with PNG)
-  const dataUrl1 = captureCanvasAsDataUrl(canvas1, "image/png");
-  const dataUrl2 = captureCanvasAsDataUrl(canvas2, "image/png");
+  const dataUrl1 = captureCanvasAsDataUrl(source1, "image/png");
+  const dataUrl2 = captureCanvasAsDataUrl(source2, "image/png");
 
   const response = await fetch("/@ef-compare-two-images", {
     method: "POST",

package/tsdown.config.ts

@@ -48,7 +48,12 @@ const inlineCssPlugin = (): Plugin => ({
 
 export default defineConfig(
   createTsdownConfig({
-    entry: ["src/index.ts", "src/node.ts"],
+    entry: [
+      "src/index.ts",
+      "src/node.ts",
+      "src/preview/renderTimegroupToVideo.ts",
+      "src/preview/renderTimegroupToCanvas.ts",
+    ],
     plugins: [inlineCssPlugin()],
     external: [/@editframe\/assets/],
     publint: false, // Disabled because CSS is built after tsdown

package/dist/_virtual/rolldown_runtime.js

@@ -1,27 +0,0 @@
-//#region rolldown:runtime
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __commonJS = (cb, mod) => function() {
-	return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
-};
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-		key = keys[i];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k) => from[k]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-		});
-	}
-	return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
-
-//#endregion
-export { __commonJS, __toESM };

package/dist/elements/EFMedia/AssetIdMediaEngine.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AssetIdMediaEngine.js","names":["data: Record<number, TrackFragmentIndex>","assetId: string","apiHost: string","paths: InitSegmentPaths"],"sources":["../../../src/elements/EFMedia/AssetIdMediaEngine.ts"],"sourcesContent":["import type { TrackFragmentIndex } from \"@editframe/assets\";\nimport type {\n  InitSegmentPaths,\n  MediaEngine,\n  VideoRendition,\n} from \"../../transcoding/types\";\nimport type { UrlGenerator } from \"../../transcoding/utils/UrlGenerator\";\nimport type { EFMedia } from \"../EFMedia\";\nimport { AssetMediaEngine } from \"./AssetMediaEngine\";\n\nexport class AssetIdMediaEngine\n  extends AssetMediaEngine\n  implements MediaEngine\n{\n  static async fetchByAssetId(\n    host: EFMedia,\n    _urlGenerator: UrlGenerator,\n    assetId: string,\n    apiHost: string,\n    requiredTracks: \"audio\" | \"video\" | \"both\" = \"both\",\n    signal?: AbortSignal,\n  ) {\n    const url = `${apiHost}/api/v1/isobmff_files/${assetId}/index`;\n    const response = await host.fetch(url, { signal });\n    \n    // Check for abort after potentially slow network operation\n    signal?.throwIfAborted();\n    \n    // Check if response is ok before parsing JSON\n    if (!response.ok) {\n      const text = await response.text();\n      throw new Error(`Failed to fetch asset index: ${response.status} ${text}`);\n    }\n    \n    // Check content type to avoid parsing non-JSON responses\n    const contentType = response.headers.get(\"content-type\");\n    if (contentType && !contentType.includes(\"application/json\")) {\n      const text = await response.text();\n      throw new Error(`Expected JSON but got ${contentType}: ${text.substring(0, 100)}`);\n    }\n    \n    let data: Record<number, TrackFragmentIndex>;\n    try {\n      data = (await response.json()) as Record<number, TrackFragmentIndex>;\n      \n      // Check for abort after potentially slow JSON parsing\n      signal?.throwIfAborted();\n    } catch (error) {\n      // If aborted during JSON parsing, re-throw to propagate cancellation\n      if (error instanceof DOMException && error.name === \"AbortError\") {\n        throw error;\n      }\n      // If JSON parse fails, the response might be \"File not found\" or similar text\n      const text = await response.text();\n      throw new Error(`Failed to parse JSON response: ${text.substring(0, 100)}`);\n    }\n    \n    const engine = new AssetIdMediaEngine(host, assetId, data, apiHost, _urlGenerator);\n    \n    // Check for abort after engine construction\n    signal?.throwIfAborted();\n    \n    // Validate that segments are accessible by trying to fetch the first init segment\n    // This prevents creating a media engine that will fail on all subsequent segment fetches\n    // If segments require authentication that's not available, fail early\n    // Only validate tracks that are actually required by the consumer (e.g., EFAudio only needs audio)\n    // Skip validation if no signal provided (backwards compatibility) - validation is optional\n    if (signal) {\n      const videoTrack = engine.getVideoTrackIndex();\n      const audioTrack = engine.getAudioTrackIndex();\n      const needsVideo = requiredTracks === \"video\" || requiredTracks === \"both\";\n      const needsAudio = requiredTracks === \"audio\" || requiredTracks === \"both\";\n      \n      // Validate video track if required and available\n      if (needsVideo && videoTrack && videoTrack.track !== undefined) {\n        try {\n          await engine.fetchInitSegment(\n            { trackId: videoTrack.track, src: engine.src },\n            signal,\n          );\n        } catch (error) {\n          // If aborted, re-throw to propagate cancellation\n          if (error instanceof DOMException && error.name === \"AbortError\") {\n            throw error;\n          }\n          // If fetch fails with 401, segments require authentication that's not available\n          // Fail media engine creation early to avoid all subsequent fetch calls\n          if (\n            error instanceof Error &&\n            (error.message.includes(\"401\") ||\n              error.message.includes(\"UNAUTHORIZED\") ||\n              (error.message.includes(\"Failed to fetch\") && error.message.includes(\"401\")))\n          ) {\n            throw new Error(`Video segments require authentication: ${error.message}`);\n          }\n          // For other errors (404, network errors, etc.), allow media engine creation\n          // These might be transient or expected in some test scenarios\n        }\n      }\n      \n      // Check for abort between validations\n      signal?.throwIfAborted();\n      \n      // Validate audio track if required and available\n      if (needsAudio && audioTrack && audioTrack.track !== undefined) {\n        try {\n          await engine.fetchInitSegment(\n            { trackId: audioTrack.track, src: engine.src },\n            signal,\n          );\n        } catch (error) {\n          // If aborted, re-throw to propagate cancellation\n          if (error instanceof DOMException && error.name === \"AbortError\") {\n            throw error;\n          }\n          // If fetch fails with 401, segments require authentication that's not available\n          // Fail media engine creation early to avoid all subsequent fetch calls\n          if (\n            error instanceof Error &&\n            (error.message.includes(\"401\") ||\n              error.message.includes(\"UNAUTHORIZED\") ||\n              (error.message.includes(\"Failed to fetch\") && error.message.includes(\"401\")))\n          ) {\n            throw new Error(`Audio segments require authentication: ${error.message}`);\n          }\n          // For other errors (404, network errors, etc.), allow media engine creation\n          // These might be transient or expected in some test scenarios\n        }\n      }\n    }\n    \n    return engine;\n  }\n\n  constructor(\n    host: EFMedia,\n    public assetId: string,\n    data: Record<number, TrackFragmentIndex>,\n    private apiHost: string,\n    urlGenerator: UrlGenerator,\n  ) {\n    // Pass assetId as src to parent constructor for compatibility\n    super(host, assetId, urlGenerator);\n    // Initialize data after parent constructor\n    this.data = data;\n\n    // Calculate duration from the data\n    const longestFragment = Object.values(this.data).reduce(\n      (max, fragment) => Math.max(max, fragment.duration / fragment.timescale),\n      0,\n    );\n    this.durationMs = longestFragment * 1000;\n    \n    // Initialize MediaEngine interface properties\n    this.templates = {\n      initSegment: `${apiHost}/api/v1/isobmff_tracks/${assetId}/{trackId}`,\n      mediaSegment: `${apiHost}/api/v1/isobmff_tracks/${assetId}/{trackId}`,\n    };\n  }\n\n  // Override URL-building methods to use API endpoints instead of file paths\n  getInitSegmentPaths(): InitSegmentPaths {\n    const paths: InitSegmentPaths = {};\n    const audioTrack = this.getAudioTrackIndex();\n    const videoTrack = this.getVideoTrackIndex();\n\n    if (audioTrack !== undefined) {\n      paths.audio = {\n        path: `${this.apiHost}/api/v1/isobmff_tracks/${this.assetId}/${audioTrack.track}`,\n        pos: audioTrack.initSegment.offset,\n        size: audioTrack.initSegment.size,\n      };\n    }\n\n    if (videoTrack !== undefined) {\n      paths.video = {\n        path: `${this.apiHost}/api/v1/isobmff_tracks/${this.assetId}/${videoTrack.track}`,\n        pos: videoTrack.initSegment.offset,\n        size: videoTrack.initSegment.size,\n      };\n    }\n\n    return paths;\n  }\n\n  // MediaEngine interface property - initialized in constructor/static fetch\n  templates!: { initSegment: string; mediaSegment: string };\n\n  buildInitSegmentUrl(trackId: number) {\n    return `${this.apiHost}/api/v1/isobmff_tracks/${this.assetId}/${trackId}`;\n  }\n\n  buildMediaSegmentUrl(trackId: number, _segmentId: number) {\n    return `${this.apiHost}/api/v1/isobmff_tracks/${this.assetId}/${trackId}`;\n  }\n\n  convertToSegmentRelativeTimestamps(\n    globalTimestamps: number[],\n    segmentId: number,\n    rendition: VideoRendition,\n  ): number[] {\n    if (!rendition.trackId) {\n      throw new Error(\n        \"[convertToSegmentRelativeTimestamps] Track ID is required for asset metadata\",\n      );\n    }\n    // For AssetMediaEngine, we need to calculate the actual segment start time\n    // using the precise segment boundaries from the track fragment index\n    const trackData = this.data[rendition.trackId];\n    if (!trackData) {\n      throw new Error(\"Track not found\");\n    }\n    const segment = trackData.segments?.[segmentId];\n    if (!segment) {\n      throw new Error(\"Segment not found\");\n    }\n    const segmentStartMs = (segment.cts / trackData.timescale) * 1000;\n\n    return globalTimestamps.map(\n      (globalMs) => (globalMs - segmentStartMs) / 1000,\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/elements/EFThumbnailStrip.d.ts

@@ -1,167 +0,0 @@
-import { EFVideo } from "./EFVideo.js";
-import { EFTimegroup } from "./EFTimegroup.js";
-import * as lit27 from "lit";
-import { LitElement } from "lit";
-import * as lit_html26 from "lit-html";
-import * as lit_html_directives_ref4 from "lit-html/directives/ref";
-
-//#region src/elements/EFThumbnailStrip.d.ts
-declare class EFThumbnailStrip extends LitElement {
-  static styles: lit27.CSSResult[];
-  canvasRef: lit_html_directives_ref4.Ref<HTMLCanvasElement>;
-  target: string;
-  thumbnailWidth: number;
-  gap: number;
-  startTimeMs?: number;
-  endTimeMs?: number;
-  useIntrinsicDuration: boolean;
-  pixelsPerMs: number;
-  /** Timeline state context for viewport info */
-  private _timelineState?;
-  /** Target element controller */
-  private _targetController;
-  private _targetElement;
-  get targetElement(): EFVideo | EFTimegroup | null;
-  set targetElement(value: EFVideo | EFTimegroup | null);
-  /** Host element dimensions */
-  private _width;
-  private _height;
-  /** Scroll container reference */
-  private _scrollContainer;
-  private _currentScrollLeft;
-  /**
-   * Offset from scroll container's left edge to this element's track.
-   * Used for sticky positioning when track doesn't start at x=0 (e.g., labels column).
-   */
-  private _trackLeftOffset;
-  /** Current thumbnail slots */
-  private _thumbnailSlots;
-  /** Capture in progress flag */
-  private _captureInProgress;
-  /** Resize observer */
-  private _resizeObserver?;
-  /** Mutation observer for target element changes */
-  private _mutationObserver?;
-  /** Animation frame for scroll updates */
-  private _scrollFrame?;
-  /** Render request tracking */
-  private _renderRequested;
-  /** Track if any thumbnails have been loaded (for ready event) */
-  private _hasLoadedThumbnails;
-  /** Track the last epoch we loaded thumbnails for */
-  private _lastLoadedEpoch;
-  /** Track layout parameters to avoid unnecessary slot recreation */
-  private _lastLayoutParams;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
-  updated(changedProperties: Map<string | number | symbol, unknown>): void;
-  private _findScrollContainer;
-  /**
-   * Calculate the horizontal offset from scroll container's left edge to this element's track.
-   * This accounts for sticky labels or other elements that precede the track area.
-   *
-   * We look for our specific timeline elements (ef-timeline-row) and measure their label width.
-   */
-  private _calculateTrackOffset;
-  /**
-   * Find the ef-timeline-row ancestor by walking up through shadow DOM boundaries.
-   */
-  private _findTimelineRow;
-  /**
-   * Get the label width from an ef-timeline-row element.
-   * Queries the shadow root for .row-label and returns its width.
-   */
-  private _getTimelineRowLabelWidth;
-  /**
-   * Get this strip's absolute position in the timeline (pixels from timeline origin).
-   * Uses the target element's startTimeMs to determine position.
-   */
-  private _getStripTimelinePosition;
-  private _attachScrollListener;
-  private _detachScrollListener;
-  private _onScroll;
-  private _onContextScroll;
-  private get _viewportWidth();
-  /**
-   * Watch for async content loading from child media elements.
-   * When media finishes loading, increment the epoch to invalidate cached thumbnails.
-   */
-  private _watchChildContentLoading;
-  private _setupTargetObserver;
-  private _scheduleRender;
-  /**
-   * Check if thumbnails are ready and dispatch event if not already done.
-   */
-  private _checkAndDispatchReady;
-  /**
-   * Calculate thumbnail layout based on current dimensions and time range.
-   * Only recreates slots if layout parameters have actually changed.
-   */
-  private _calculateLayout;
-  /**
-   * Get effective time range for thumbnails.
-   */
-  private _getTimeRange;
-  /**
-   * Calculate effective thumbnail width (auto or specified).
-   */
-  private _getEffectiveThumbnailWidth;
-  /**
-   * Check cache for existing thumbnails.
-   */
-  private _checkCache;
-  /**
-   * Draw the canvas with current thumbnail state.
-   * Canvas is absolutely positioned at the visible portion of the strip.
-   * Uses virtual rendering - only draws thumbnails in the visible region.
-   */
-  private _drawCanvas;
-  /**
-   * Draw a thumbnail image with cover mode scaling.
-   */
-  private _drawThumbnailImage;
-  /**
-   * Load thumbnails that are visible in the current viewport.
-   * Skips loading if the epoch hasn't changed since last load.
-   */
-  private _loadVisibleThumbnails;
-  /**
-   * Capture thumbnails from a timegroup target.
-   */
-  private _captureTimegroupThumbnails;
-  /**
-   * Capture thumbnails from a video target using MediaEngine.
-   */
-  private _captureVideoThumbnails;
-  /**
-   * Convert canvas to ImageData.
-   */
-  private _canvasToImageData;
-  /**
-   * Returns a promise that resolves when thumbnails are ready.
-   * Resolves immediately if thumbnails are already loaded.
-   */
-  whenReady(): Promise<void>;
-  /**
-   * Check if thumbnails have been loaded.
-   */
-  get isReady(): boolean;
-  /**
-   * Invalidate cached thumbnails for this element within a time range.
-   * Call this when content changes at specific times.
-   */
-  invalidateTimeRange(startTimeMs: number, endTimeMs: number): void;
-  /**
-   * Invalidate all cached thumbnails for this element.
-   */
-  invalidateAll(): void;
-  render(): lit_html26.TemplateResult<1>;
-}
-declare global {
-  interface HTMLElementTagNameMap {
-    "ef-thumbnail-strip": EFThumbnailStrip;
-  }
-}
-//#endregion
-export { EFThumbnailStrip };
-//# sourceMappingURL=EFThumbnailStrip.d.ts.map