@editframe/elements 0.38.0 → 0.39.0

package/dist/render/EFRenderAPI.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFRenderAPI.js","names":["api: IEFRenderAPI"],"sources":["../../src/render/EFRenderAPI.ts"],"sourcesContent":["/**\n * Window API for programmatic video rendering.\n *\n * Exposes renderTimegroupToVideo for use from Playwright/CLI.\n * Supports streaming output and custom data injection.\n */\n\nimport type { EFTimegroup } from \"../elements/EFTimegroup.js\";\nimport type { EFWorkbench } from \"../gui/EFWorkbench.js\";\nimport { getRenderInfo, type RenderInfo } from \"../getRenderInfo.js\";\n// Import only types - actual function loaded dynamically\nimport type {\n  RenderToVideoOptions,\n  RenderProgress,\n} from \"../preview/renderTimegroupToVideo.types.js\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface IEFRenderAPI {\n  /**\n   * Render with streaming output (calls window.onRenderChunk for each chunk).\n   * Use this for CLI/Playwright to avoid memory buffering.\n   */\n  renderStreaming(options?: RenderToVideoOptions): Promise<void>;\n\n  /**\n   * Render and return buffer (for shorter videos or in-browser use).\n   * Returns the video as Uint8Array.\n   */\n  render(options?: RenderToVideoOptions): Promise<Uint8Array>;\n\n  /**\n   * Get render info (dimensions, duration, assets).\n   * Same as the exported getRenderInfo function.\n   */\n  getRenderInfo(): Promise<RenderInfo>;\n\n  /**\n   * Check if SDK is ready for rendering.\n   * Returns true if a root timegroup is found.\n   */\n  isReady(): boolean;\n}\n\ndeclare global {\n  interface Window {\n    EF_RENDER?: IEFRenderAPI;\n    EF_RENDER_DATA?: Record<string, unknown>;\n    onRenderChunk?: (chunk: Uint8Array) => void; // Set by Playwright\n    onRenderProgress?: (progress: RenderProgress) => void; // Optional progress callback\n  }\n}\n\n// ============================================================================\n// Implementation\n// ============================================================================\n\nfunction findRootTimegroup(): EFTimegroup | null {\n  // Try to find timegroup from workbench first\n  const workbench = document.querySelector(\n    \"ef-workbench\",\n  ) as EFWorkbench | null;\n  if (workbench) {\n    const timegroup = workbench.querySelector(\n      \"ef-timegroup\",\n    ) as EFTimegroup | null;\n    if (timegroup) {\n      return timegroup;\n    }\n  }\n\n  // Fallback: find first root timegroup\n  const rootTimegroup = document.querySelector(\n    \"ef-timegroup\",\n  ) as EFTimegroup | null;\n  return rootTimegroup;\n}\n\nfunction setWorkbenchRendering(rendering: boolean): void {\n  const workbench = document.querySelector(\n    \"ef-workbench\",\n  ) as EFWorkbench | null;\n  if (workbench) {\n    workbench.rendering = rendering;\n  }\n}\n\nasync function waitForTimegroupDimensions(\n  timegroup: EFTimegroup,\n): Promise<void> {\n  await Promise.all(\n    Array.from(document.styleSheets).map((sheet) => {\n      if (sheet.href) {\n        const link = Array.from(\n          document.querySelectorAll('link[rel=\"stylesheet\"]'),\n        ).find((l) => (l as HTMLLinkElement).href === sheet.href);\n        if (link && !(link as HTMLLinkElement).sheet) {\n          return new Promise((resolve) => {\n            link.addEventListener(\"load\", resolve);\n            link.addEventListener(\"error\", resolve);\n          });\n        }\n      }\n      return Promise.resolve();\n    }),\n  );\n\n  // Force layout immediately after stylesheets load\n  void timegroup.offsetHeight;\n\n  const rect = timegroup.getBoundingClientRect();\n  const hasOffset = timegroup.offsetWidth > 0 && timegroup.offsetHeight > 0;\n  const hasRect = rect.width > 0 && rect.height > 0;\n  const computedWidth = getComputedStyle(timegroup).width;\n  const computedHeight = getComputedStyle(timegroup).height;\n  const hasComputed =\n    parseFloat(computedWidth) > 0 && parseFloat(computedHeight) > 0;\n\n  if (!hasOffset && !hasRect && !hasComputed) {\n    throw new Error(\n      `Timegroup has no dimensions (${timegroup.offsetWidth}x${timegroup.offsetHeight}). ` +\n        `Computed styles: width=${computedWidth}, height=${computedHeight}. ` +\n        `Classes: \"${timegroup.className}\". ` +\n        `\\n\\nTailwind CSS did not generate styles for these classes. ` +\n        `Check that:\\n` +\n        `1. Your Tailwind config 'content' array includes the HTML file\\n` +\n        `2. Tailwind CSS is properly configured in your project\\n` +\n        `3. The dev server successfully compiled CSS (check for Tailwind warnings above)`,\n    );\n  }\n\n}\n\nconst api: IEFRenderAPI = {\n  async renderStreaming(options: RenderToVideoOptions = {}): Promise<void> {\n    const timegroup = findRootTimegroup();\n    if (!timegroup) {\n      throw new Error(\"No ef-timegroup found. Cannot render.\");\n    }\n\n    // Check if window.onRenderChunk is available\n    if (typeof window === \"undefined\" || !window.onRenderChunk) {\n      throw new Error(\n        \"window.onRenderChunk is not set. \" +\n          \"Call page.exposeFunction('onRenderChunk', callback) from Playwright first.\",\n      );\n    }\n\n    // Hide workbench UI during render\n    setWorkbenchRendering(true);\n\n    try {\n      // Wait for timegroup to have dimensions\n      await waitForTimegroupDimensions(timegroup);\n\n      // Wait for media to be ready\n      await timegroup.waitForMediaDurations();\n\n      // Create custom writable stream that calls window.onRenderChunk\n      const chunkWriter = new WritableStream<Uint8Array>({\n        write(chunk: Uint8Array) {\n          if (window.onRenderChunk) {\n            window.onRenderChunk(chunk);\n          }\n        },\n      });\n\n      // Merge progress callback if window.onRenderProgress is set\n      const onProgress = options.onProgress || window.onRenderProgress;\n\n      // Render with custom stream\n      // Dynamic import to avoid loading render utilities during module initialization\n      const { renderTimegroupToVideo } =\n        await import(\"../preview/renderTimegroupToVideo.js\");\n      await renderTimegroupToVideo(timegroup, {\n        ...options,\n        customWritableStream: chunkWriter,\n        onProgress,\n        returnBuffer: false,\n      });\n    } finally {\n      // Restore workbench UI\n      setWorkbenchRendering(false);\n    }\n  },\n\n  async render(options: RenderToVideoOptions = {}): Promise<Uint8Array> {\n    const timegroup = findRootTimegroup();\n    if (!timegroup) {\n      throw new Error(\"No ef-timegroup found. Cannot render.\");\n    }\n\n    // Hide workbench UI during render\n    setWorkbenchRendering(true);\n\n    try {\n      // Wait for timegroup to have dimensions\n      await waitForTimegroupDimensions(timegroup);\n\n      // Wait for media to be ready\n      await timegroup.waitForMediaDurations();\n\n      // Merge progress callback if window.onRenderProgress is set\n      const onProgress = options.onProgress || window.onRenderProgress;\n\n      // Dynamic import to avoid loading render utilities during module initialization\n      const { renderTimegroupToVideo } =\n        await import(\"../preview/renderTimegroupToVideo.js\");\n      const buffer = await renderTimegroupToVideo(timegroup, {\n        ...options,\n        returnBuffer: true,\n        onProgress,\n      });\n\n      if (!buffer) {\n        throw new Error(\"Render failed: no buffer returned\");\n      }\n\n      return buffer;\n    } finally {\n      // Restore workbench UI\n      setWorkbenchRendering(false);\n    }\n  },\n\n  async getRenderInfo(): Promise<RenderInfo> {\n    return getRenderInfo();\n  },\n\n  isReady(): boolean {\n    return findRootTimegroup() !== null;\n  },\n};\n\n// Export and register on window\nif (typeof window !== \"undefined\") {\n  window.EF_RENDER = api;\n}\n\nexport { api as EFRenderAPI };\nexport type { IEFRenderAPI as EFRenderAPIInterface };\n"],"mappings":";;;AA2DA,SAAS,oBAAwC;CAE/C,MAAM,YAAY,SAAS,cACzB,eACD;AACD,KAAI,WAAW;EACb,MAAM,YAAY,UAAU,cAC1B,eACD;AACD,MAAI,UACF,QAAO;;AAQX,QAHsB,SAAS,cAC7B,eACD;;AAIH,SAAS,sBAAsB,WAA0B;CACvD,MAAM,YAAY,SAAS,cACzB,eACD;AACD,KAAI,UACF,WAAU,YAAY;;AAI1B,eAAe,2BACb,WACe;AACf,OAAM,QAAQ,IACZ,MAAM,KAAK,SAAS,YAAY,CAAC,KAAK,UAAU;AAC9C,MAAI,MAAM,MAAM;GACd,MAAM,OAAO,MAAM,KACjB,SAAS,iBAAiB,2BAAyB,CACpD,CAAC,MAAM,MAAO,EAAsB,SAAS,MAAM,KAAK;AACzD,OAAI,QAAQ,CAAE,KAAyB,MACrC,QAAO,IAAI,SAAS,YAAY;AAC9B,SAAK,iBAAiB,QAAQ,QAAQ;AACtC,SAAK,iBAAiB,SAAS,QAAQ;KACvC;;AAGN,SAAO,QAAQ,SAAS;GACxB,CACH;AAGD,CAAK,UAAU;CAEf,MAAM,OAAO,UAAU,uBAAuB;CAC9C,MAAM,YAAY,UAAU,cAAc,KAAK,UAAU,eAAe;CACxE,MAAM,UAAU,KAAK,QAAQ,KAAK,KAAK,SAAS;CAChD,MAAM,gBAAgB,iBAAiB,UAAU,CAAC;CAClD,MAAM,iBAAiB,iBAAiB,UAAU,CAAC;AAInD,KAAI,CAAC,aAAa,CAAC,WAAW,EAF5B,WAAW,cAAc,GAAG,KAAK,WAAW,eAAe,GAAG,GAG9D,OAAM,IAAI,MACR,gCAAgC,UAAU,YAAY,GAAG,UAAU,aAAa,4BACpD,cAAc,WAAW,eAAe,cACrD,UAAU,UAAU,qRAMpC;;AAKL,MAAMA,MAAoB;CACxB,MAAM,gBAAgB,UAAgC,EAAE,EAAiB;EACvE,MAAM,YAAY,mBAAmB;AACrC,MAAI,CAAC,UACH,OAAM,IAAI,MAAM,wCAAwC;AAI1D,MAAI,OAAO,WAAW,eAAe,CAAC,OAAO,cAC3C,OAAM,IAAI,MACR,8GAED;AAIH,wBAAsB,KAAK;AAE3B,MAAI;AAEF,SAAM,2BAA2B,UAAU;AAG3C,SAAM,UAAU,uBAAuB;GAGvC,MAAM,cAAc,IAAI,eAA2B,EACjD,MAAM,OAAmB;AACvB,QAAI,OAAO,cACT,QAAO,cAAc,MAAM;MAGhC,CAAC;GAGF,MAAM,aAAa,QAAQ,cAAc,OAAO;GAIhD,MAAM,EAAE,2BACN,MAAM,OAAO;AACf,SAAM,uBAAuB,WAAW;IACtC,GAAG;IACH,sBAAsB;IACtB;IACA,cAAc;IACf,CAAC;YACM;AAER,yBAAsB,MAAM;;;CAIhC,MAAM,OAAO,UAAgC,EAAE,EAAuB;EACpE,MAAM,YAAY,mBAAmB;AACrC,MAAI,CAAC,UACH,OAAM,IAAI,MAAM,wCAAwC;AAI1D,wBAAsB,KAAK;AAE3B,MAAI;AAEF,SAAM,2BAA2B,UAAU;AAG3C,SAAM,UAAU,uBAAuB;GAGvC,MAAM,aAAa,QAAQ,cAAc,OAAO;GAGhD,MAAM,EAAE,2BACN,MAAM,OAAO;GACf,MAAM,SAAS,MAAM,uBAAuB,WAAW;IACrD,GAAG;IACH,cAAc;IACd;IACD,CAAC;AAEF,OAAI,CAAC,OACH,OAAM,IAAI,MAAM,oCAAoC;AAGtD,UAAO;YACC;AAER,yBAAsB,MAAM;;;CAIhC,MAAM,gBAAqC;AACzC,SAAO,eAAe;;CAGxB,UAAmB;AACjB,SAAO,mBAAmB,KAAK;;CAElC;AAGD,IAAI,OAAO,WAAW,YACpB,QAAO,YAAY"}
+{"version":3,"file":"EFRenderAPI.js","names":["api: IEFRenderAPI"],"sources":["../../src/render/EFRenderAPI.ts"],"sourcesContent":["/**\n * Window API for programmatic video rendering.\n *\n * Exposes renderTimegroupToVideo for use from Playwright/CLI.\n * Supports streaming output and custom data injection.\n */\n\nimport type { EFTimegroup } from \"../elements/EFTimegroup.js\";\nimport type { EFWorkbench } from \"../gui/EFWorkbench.js\";\nimport { getRenderInfo, type RenderInfo } from \"../getRenderInfo.js\";\n// Import only types - actual function loaded dynamically\nimport type {\n  RenderToVideoOptions,\n  RenderProgress,\n} from \"../preview/renderTimegroupToVideo.types.js\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface IEFRenderAPI {\n  /**\n   * Render with streaming output (calls window.onRenderChunk for each chunk).\n   * Use this for CLI/Playwright to avoid memory buffering.\n   */\n  renderStreaming(options?: RenderToVideoOptions): Promise<void>;\n\n  /**\n   * Render and return buffer (for shorter videos or in-browser use).\n   * Returns the video as Uint8Array.\n   */\n  render(options?: RenderToVideoOptions): Promise<Uint8Array>;\n\n  /**\n   * Get render info (dimensions, duration, assets).\n   * Same as the exported getRenderInfo function.\n   */\n  getRenderInfo(): Promise<RenderInfo>;\n\n  /**\n   * Check if SDK is ready for rendering.\n   * Returns true if a root timegroup is found.\n   */\n  isReady(): boolean;\n}\n\ndeclare global {\n  interface Window {\n    EF_RENDER?: IEFRenderAPI;\n    EF_RENDER_DATA?: Record<string, unknown>;\n    onRenderChunk?: (chunk: Uint8Array) => void; // Set by Playwright\n    onRenderProgress?: (progress: RenderProgress) => void; // Optional progress callback\n  }\n}\n\n// ============================================================================\n// Implementation\n// ============================================================================\n\nfunction findRootTimegroup(): EFTimegroup | null {\n  // Try to find timegroup from workbench first\n  const workbench = document.querySelector(\n    \"ef-workbench\",\n  ) as EFWorkbench | null;\n  if (workbench) {\n    const timegroup = workbench.querySelector(\n      \"ef-timegroup\",\n    ) as EFTimegroup | null;\n    if (timegroup) {\n      return timegroup;\n    }\n  }\n\n  // Fallback: find first root timegroup\n  const rootTimegroup = document.querySelector(\n    \"ef-timegroup\",\n  ) as EFTimegroup | null;\n  return rootTimegroup;\n}\n\nfunction setWorkbenchRendering(rendering: boolean): void {\n  const workbench = document.querySelector(\n    \"ef-workbench\",\n  ) as EFWorkbench | null;\n  if (workbench) {\n    workbench.rendering = rendering;\n  }\n}\n\nasync function waitForTimegroupDimensions(\n  timegroup: EFTimegroup,\n): Promise<void> {\n  await Promise.all(\n    Array.from(document.styleSheets).map((sheet) => {\n      if (sheet.href) {\n        const link = Array.from(\n          document.querySelectorAll('link[rel=\"stylesheet\"]'),\n        ).find((l) => (l as HTMLLinkElement).href === sheet.href);\n        if (link && !(link as HTMLLinkElement).sheet) {\n          return new Promise((resolve) => {\n            link.addEventListener(\"load\", resolve);\n            link.addEventListener(\"error\", resolve);\n          });\n        }\n      }\n      return Promise.resolve();\n    }),\n  );\n\n  // Force layout immediately after stylesheets load\n  void timegroup.offsetHeight;\n\n  const rect = timegroup.getBoundingClientRect();\n  const hasOffset = timegroup.offsetWidth > 0 && timegroup.offsetHeight > 0;\n  const hasRect = rect.width > 0 && rect.height > 0;\n  const computedWidth = getComputedStyle(timegroup).width;\n  const computedHeight = getComputedStyle(timegroup).height;\n  const hasComputed =\n    parseFloat(computedWidth) > 0 && parseFloat(computedHeight) > 0;\n\n  if (!hasOffset && !hasRect && !hasComputed) {\n    throw new Error(\n      `Timegroup has no dimensions (${timegroup.offsetWidth}x${timegroup.offsetHeight}). ` +\n        `Computed styles: width=${computedWidth}, height=${computedHeight}. ` +\n        `Classes: \"${timegroup.className}\". ` +\n        `\\n\\nTailwind CSS did not generate styles for these classes. ` +\n        `Check that:\\n` +\n        `1. Your Tailwind config 'content' array includes the HTML file\\n` +\n        `2. Tailwind CSS is properly configured in your project\\n` +\n        `3. The dev server successfully compiled CSS (check for Tailwind warnings above)`,\n    );\n  }\n}\n\nconst api: IEFRenderAPI = {\n  async renderStreaming(options: RenderToVideoOptions = {}): Promise<void> {\n    const timegroup = findRootTimegroup();\n    if (!timegroup) {\n      throw new Error(\"No ef-timegroup found. Cannot render.\");\n    }\n\n    // Check if window.onRenderChunk is available\n    if (typeof window === \"undefined\" || !window.onRenderChunk) {\n      throw new Error(\n        \"window.onRenderChunk is not set. \" +\n          \"Call page.exposeFunction('onRenderChunk', callback) from Playwright first.\",\n      );\n    }\n\n    // Hide workbench UI during render\n    setWorkbenchRendering(true);\n\n    try {\n      // Wait for timegroup to have dimensions\n      await waitForTimegroupDimensions(timegroup);\n\n      // Wait for media to be ready\n      await timegroup.waitForMediaDurations();\n\n      // Create custom writable stream that calls window.onRenderChunk\n      const chunkWriter = new WritableStream<Uint8Array>({\n        write(chunk: Uint8Array) {\n          if (window.onRenderChunk) {\n            window.onRenderChunk(chunk);\n          }\n        },\n      });\n\n      // Merge progress callback if window.onRenderProgress is set\n      const onProgress = options.onProgress || window.onRenderProgress;\n\n      // Render with custom stream\n      // Dynamic import to avoid loading render utilities during module initialization\n      const { renderTimegroupToVideo } =\n        await import(\"../preview/renderTimegroupToVideo.js\");\n      await renderTimegroupToVideo(timegroup, {\n        ...options,\n        customWritableStream: chunkWriter,\n        onProgress,\n        returnBuffer: false,\n      });\n    } finally {\n      // Restore workbench UI\n      setWorkbenchRendering(false);\n    }\n  },\n\n  async render(options: RenderToVideoOptions = {}): Promise<Uint8Array> {\n    const timegroup = findRootTimegroup();\n    if (!timegroup) {\n      throw new Error(\"No ef-timegroup found. Cannot render.\");\n    }\n\n    // Hide workbench UI during render\n    setWorkbenchRendering(true);\n\n    try {\n      // Wait for timegroup to have dimensions\n      await waitForTimegroupDimensions(timegroup);\n\n      // Wait for media to be ready\n      await timegroup.waitForMediaDurations();\n\n      // Merge progress callback if window.onRenderProgress is set\n      const onProgress = options.onProgress || window.onRenderProgress;\n\n      // Dynamic import to avoid loading render utilities during module initialization\n      const { renderTimegroupToVideo } =\n        await import(\"../preview/renderTimegroupToVideo.js\");\n      const buffer = await renderTimegroupToVideo(timegroup, {\n        ...options,\n        returnBuffer: true,\n        onProgress,\n      });\n\n      if (!buffer) {\n        throw new Error(\"Render failed: no buffer returned\");\n      }\n\n      return buffer;\n    } finally {\n      // Restore workbench UI\n      setWorkbenchRendering(false);\n    }\n  },\n\n  async getRenderInfo(): Promise<RenderInfo> {\n    return getRenderInfo();\n  },\n\n  isReady(): boolean {\n    return findRootTimegroup() !== null;\n  },\n};\n\n// Export and register on window\nif (typeof window !== \"undefined\") {\n  window.EF_RENDER = api;\n}\n\nexport { api as EFRenderAPI };\nexport type { IEFRenderAPI as EFRenderAPIInterface };\n"],"mappings":";;;AA2DA,SAAS,oBAAwC;CAE/C,MAAM,YAAY,SAAS,cACzB,eACD;AACD,KAAI,WAAW;EACb,MAAM,YAAY,UAAU,cAC1B,eACD;AACD,MAAI,UACF,QAAO;;AAQX,QAHsB,SAAS,cAC7B,eACD;;AAIH,SAAS,sBAAsB,WAA0B;CACvD,MAAM,YAAY,SAAS,cACzB,eACD;AACD,KAAI,UACF,WAAU,YAAY;;AAI1B,eAAe,2BACb,WACe;AACf,OAAM,QAAQ,IACZ,MAAM,KAAK,SAAS,YAAY,CAAC,KAAK,UAAU;AAC9C,MAAI,MAAM,MAAM;GACd,MAAM,OAAO,MAAM,KACjB,SAAS,iBAAiB,2BAAyB,CACpD,CAAC,MAAM,MAAO,EAAsB,SAAS,MAAM,KAAK;AACzD,OAAI,QAAQ,CAAE,KAAyB,MACrC,QAAO,IAAI,SAAS,YAAY;AAC9B,SAAK,iBAAiB,QAAQ,QAAQ;AACtC,SAAK,iBAAiB,SAAS,QAAQ;KACvC;;AAGN,SAAO,QAAQ,SAAS;GACxB,CACH;AAGD,CAAK,UAAU;CAEf,MAAM,OAAO,UAAU,uBAAuB;CAC9C,MAAM,YAAY,UAAU,cAAc,KAAK,UAAU,eAAe;CACxE,MAAM,UAAU,KAAK,QAAQ,KAAK,KAAK,SAAS;CAChD,MAAM,gBAAgB,iBAAiB,UAAU,CAAC;CAClD,MAAM,iBAAiB,iBAAiB,UAAU,CAAC;AAInD,KAAI,CAAC,aAAa,CAAC,WAAW,EAF5B,WAAW,cAAc,GAAG,KAAK,WAAW,eAAe,GAAG,GAG9D,OAAM,IAAI,MACR,gCAAgC,UAAU,YAAY,GAAG,UAAU,aAAa,4BACpD,cAAc,WAAW,eAAe,cACrD,UAAU,UAAU,qRAMpC;;AAIL,MAAMA,MAAoB;CACxB,MAAM,gBAAgB,UAAgC,EAAE,EAAiB;EACvE,MAAM,YAAY,mBAAmB;AACrC,MAAI,CAAC,UACH,OAAM,IAAI,MAAM,wCAAwC;AAI1D,MAAI,OAAO,WAAW,eAAe,CAAC,OAAO,cAC3C,OAAM,IAAI,MACR,8GAED;AAIH,wBAAsB,KAAK;AAE3B,MAAI;AAEF,SAAM,2BAA2B,UAAU;AAG3C,SAAM,UAAU,uBAAuB;GAGvC,MAAM,cAAc,IAAI,eAA2B,EACjD,MAAM,OAAmB;AACvB,QAAI,OAAO,cACT,QAAO,cAAc,MAAM;MAGhC,CAAC;GAGF,MAAM,aAAa,QAAQ,cAAc,OAAO;GAIhD,MAAM,EAAE,2BACN,MAAM,OAAO;AACf,SAAM,uBAAuB,WAAW;IACtC,GAAG;IACH,sBAAsB;IACtB;IACA,cAAc;IACf,CAAC;YACM;AAER,yBAAsB,MAAM;;;CAIhC,MAAM,OAAO,UAAgC,EAAE,EAAuB;EACpE,MAAM,YAAY,mBAAmB;AACrC,MAAI,CAAC,UACH,OAAM,IAAI,MAAM,wCAAwC;AAI1D,wBAAsB,KAAK;AAE3B,MAAI;AAEF,SAAM,2BAA2B,UAAU;AAG3C,SAAM,UAAU,uBAAuB;GAGvC,MAAM,aAAa,QAAQ,cAAc,OAAO;GAGhD,MAAM,EAAE,2BACN,MAAM,OAAO;GACf,MAAM,SAAS,MAAM,uBAAuB,WAAW;IACrD,GAAG;IACH,cAAc;IACd;IACD,CAAC;AAEF,OAAI,CAAC,OACH,OAAM,IAAI,MAAM,oCAAoC;AAGtD,UAAO;YACC;AAER,yBAAsB,MAAM;;;CAIhC,MAAM,gBAAqC;AACzC,SAAO,eAAe;;CAGxB,UAAmB;AACjB,SAAO,mBAAmB,KAAK;;CAElC;AAGD,IAAI,OAAO,WAAW,YACpB,QAAO,YAAY"}

package/dist/transcoding/types/index.d.ts

@@ -1,93 +1,10 @@
+import { SegmentIndex, SegmentTimeRange, TrackRef, TrackRole, TrackSet } from "../../elements/EFMedia/SegmentIndex.js";
+import { SegmentTransport } from "../../elements/EFMedia/SegmentTransport.js";
+import { TimingModel } from "../../elements/EFMedia/TimingModel.js";
+import { MediaEngine } from "../../elements/EFMedia/MediaEngine.js";
+
 //#region src/transcoding/types/index.d.ts
 
-type RenditionId = "high" | "medium" | "low" | "audio" | "scrub";
-interface AudioRendition {
-  id?: RenditionId;
-  trackId: number | undefined;
-  src: string;
-  segmentDurationMs?: number;
-  segmentDurationsMs?: number[];
-  startTimeOffsetMs?: number;
-}
-interface VideoRendition {
-  id?: RenditionId;
-  trackId: number | undefined;
-  src: string;
-  segmentDurationMs?: number;
-  segmentDurationsMs?: number[];
-  startTimeOffsetMs?: number;
-}
-/**
- * Union type representing either an audio or video rendition.
- * Used in methods that can work with either type of media rendition.
- */
-type MediaRendition = AudioRendition | VideoRendition;
-interface MediaEngine {
-  durationMs: number;
-  src: string;
-  audioRendition?: AudioRendition;
-  videoRendition?: VideoRendition;
-  templates: {
-    initSegment: string;
-    mediaSegment: string;
-  };
-  fetchInitSegment: (rendition: {
-    id?: RenditionId;
-    trackId: number | undefined;
-    src: string;
-  }, signal: AbortSignal) => Promise<ArrayBuffer>;
-  fetchMediaSegment: (segmentId: number, rendition: {
-    id?: RenditionId;
-    trackId: number | undefined;
-    src: string;
-  }, signal: AbortSignal) => Promise<ArrayBuffer>;
-  computeSegmentId: (desiredSeekTimeMs: number, rendition: MediaRendition) => number | undefined;
-  /**
-   * Get the video rendition if available, otherwise return undefined.
-   * Callers should handle undefined appropriately.
-   */
-  getVideoRendition: () => VideoRendition | undefined;
-  /**
-   * Get the audio rendition if available, otherwise return undefined.
-   * Callers should handle undefined appropriately.
-   */
-  getAudioRendition: () => AudioRendition | undefined;
-  /**
-   * Check if a segment is cached for a given rendition
-   */
-  isSegmentCached: (segmentId: number, rendition: AudioRendition | VideoRendition) => boolean;
-  /**
-   * Get scrub video rendition if available, otherwise return undefined
-   * Each engine implements this based on their capabilities:
-   * - JitMediaEngine: looks for "scrub" rendition in manifest
-   * - AssetMediaEngine: returns regular video rendition (no separate scrub)
-   */
-  getScrubVideoRendition(): VideoRendition | undefined;
-  /**
-   * Calculate audio segments needed for a time range
-   * Each media engine implements this based on their segment structure
-   */
-  calculateAudioSegmentRange: (fromMs: number, toMs: number, rendition: AudioRendition, durationMs: number) => SegmentTimeRange[];
-  /**
-   * Get buffer configuration for this media engine
-   * Returns preferred buffer settings that may override host defaults
-   */
-  getBufferConfig: () => {
-    videoBufferDurationMs: number;
-    audioBufferDurationMs: number;
-    maxVideoBufferFetches: number;
-    maxAudioBufferFetches: number;
-    bufferThresholdMs: number;
-  };
-  /**
-   * Extract thumbnail canvases at multiple timestamps efficiently
-   * Uses scrub rendition and batches by segment for optimal performance
-   * Returns thumbnail objects in same order as input timestamps
-   * Returns null for any timestamps that fail to extract
-   * @param signal - Optional AbortSignal to cancel in-flight requests when element is disconnected
-   */
-  extractThumbnails(timestamps: number[], signal?: AbortSignal): Promise<(ThumbnailResult | null)[]>;
-}
 interface ThumbnailResult {
   timestamp: number;
   thumbnail: HTMLCanvasElement | OffscreenCanvas;
@@ -97,11 +14,6 @@ interface AudioSpan {
   endMs: number;
   blob: Blob;
 }
-interface SegmentTimeRange {
-  segmentId: number;
-  startMs: number;
-  endMs: number;
-}
 //#endregion
-export { AudioSpan, MediaEngine, RenditionId };
+export { AudioSpan, ThumbnailResult };
 //# sourceMappingURL=index.d.ts.map

package/dist/transcoding/utils/UrlGenerator.d.ts

@@ -1,7 +1,7 @@
-import { MediaEngine, RenditionId } from "../types/index.js";
-
 //#region src/transcoding/utils/UrlGenerator.d.ts
-
+/**
+ * URL generation utilities for transcoding endpoints
+ */
 declare class UrlGenerator {
   private baseUrl;
   constructor(baseUrl: () => string);
@@ -9,10 +9,6 @@ declare class UrlGenerator {
    * Get the base URL for constructing absolute URLs
    */
   getBaseUrl(): string;
-  /**
-   * Generate video segment URL
-   */
-  generateSegmentUrl(segmentId: "init" | number, renditionId: RenditionId, metadata: MediaEngine): string;
   /**
    * Generate init segment URL
    */
@@ -21,11 +17,6 @@ declare class UrlGenerator {
    * Generate manifest URL
    */
   generateManifestUrl(mediaUrl: string): string;
-  /**
-   * Generate track fragment index URL using production API format
-   * @deprecated Use MD5-based URL generation in AssetMediaEngine.fetch() instead
-   */
-  generateTrackFragmentIndexUrl(mediaUrl: string): string;
   /**
    * Generate quality presets URL
    */

package/dist/transcoding/utils/UrlGenerator.js

@@ -1,4 +1,7 @@
 //#region src/transcoding/utils/UrlGenerator.ts
+/**
+* URL generation utilities for transcoding endpoints
+*/
 var UrlGenerator = class {
 	constructor(baseUrl) {
 		this.baseUrl = baseUrl;
@@ -10,26 +13,6 @@ var UrlGenerator = class {
 		return this.baseUrl();
 	}
 	/**
-	* Generate video segment URL
-	*/
-	generateSegmentUrl(segmentId, renditionId, metadata) {
-		const audioRendition = metadata.audioRendition;
-		const videoRendition = metadata.videoRendition;
-		let rendition;
-		if (renditionId === "audio") rendition = audioRendition;
-		else rendition = videoRendition;
-		if (!rendition) {
-			console.error("Rendition not found", {
-				renditionId,
-				hasAudio: !!audioRendition,
-				hasVideo: !!videoRendition,
-				metadata
-			});
-			throw new Error(`Rendition ${renditionId} not found (hasAudio=${!!audioRendition}, hasVideo=${!!videoRendition})`);
-		}
-		return (segmentId === "init" ? metadata.templates.initSegment : metadata.templates.mediaSegment).replace("{rendition}", renditionId).replace("{segmentId}", segmentId.toString()).replace("{src}", metadata.src).replace("{trackId}", rendition.trackId?.toString() ?? "");
-	}
-	/**
 	* Generate init segment URL
 	*/
 	generateInitSegmentUrl(mediaUrl, rendition) {
@@ -42,15 +25,6 @@ var UrlGenerator = class {
 		return `${this.baseUrl()}/api/v1/transcode/manifest.json?url=${encodeURIComponent(mediaUrl)}`;
 	}
 	/**
-	* Generate track fragment index URL using production API format
-	* @deprecated Use MD5-based URL generation in AssetMediaEngine.fetch() instead
-	*/
-	generateTrackFragmentIndexUrl(mediaUrl) {
-		let normalizedSrc = mediaUrl.startsWith("/") ? mediaUrl.slice(1) : mediaUrl;
-		normalizedSrc = normalizedSrc.replace(/^\/+/, "");
-		return `@ef-track-fragment-index/${normalizedSrc}`;
-	}
-	/**
 	* Generate quality presets URL
 	*/
 	generatePresetsUrl() {

package/dist/transcoding/utils/UrlGenerator.js.map

@@ -1 +1 @@
-{"version":3,"file":"UrlGenerator.js","names":["baseUrl: () => string"],"sources":["../../../src/transcoding/utils/UrlGenerator.ts"],"sourcesContent":["/**\n * URL generation utilities for transcoding endpoints\n */\n\nimport type { RenditionId } from \"../types/index.js\";\nimport type { MediaEngine } from \"../types/index.ts\";\n\nexport class UrlGenerator {\n  constructor(private baseUrl: () => string) {}\n\n  /**\n   * Get the base URL for constructing absolute URLs\n   */\n  getBaseUrl(): string {\n    return this.baseUrl();\n  }\n\n  /**\n   * Generate video segment URL\n   */\n  generateSegmentUrl(\n    segmentId: \"init\" | number,\n    renditionId: RenditionId,\n    metadata: MediaEngine,\n  ): string {\n    // Determine which rendition to use based on renditionId\n    // Audio renditions: \"audio\"\n    // Video renditions: \"high\", \"scrub\", \"low\", \"medium\", etc.\n    const audioRendition = metadata.audioRendition;\n    const videoRendition = metadata.videoRendition;\n\n    let rendition;\n    if (renditionId === \"audio\") {\n      rendition = audioRendition;\n    } else {\n      // For all other rendition IDs (high, scrub, low, medium), use video rendition\n      rendition = videoRendition;\n    }\n\n    if (!rendition) {\n      console.error(\"Rendition not found\", {\n        renditionId,\n        hasAudio: !!audioRendition,\n        hasVideo: !!videoRendition,\n        metadata,\n      });\n      throw new Error(\n        `Rendition ${renditionId} not found (hasAudio=${!!audioRendition}, hasVideo=${!!videoRendition})`,\n      );\n    }\n\n    const template =\n      segmentId === \"init\"\n        ? metadata.templates.initSegment\n        : metadata.templates.mediaSegment;\n    return template\n      .replace(\"{rendition}\", renditionId)\n      .replace(\"{segmentId}\", segmentId.toString())\n      .replace(\"{src}\", metadata.src)\n      .replace(\"{trackId}\", rendition.trackId?.toString() ?? \"\");\n  }\n\n  /**\n   * Generate init segment URL\n   */\n  generateInitSegmentUrl(mediaUrl: string, rendition: string): string {\n    return `${this.baseUrl()}/api/v1/transcode/${rendition}/init.mp4?url=${encodeURIComponent(mediaUrl)}`;\n  }\n\n  /**\n   * Generate manifest URL\n   */\n  generateManifestUrl(mediaUrl: string): string {\n    return `${this.baseUrl()}/api/v1/transcode/manifest.json?url=${encodeURIComponent(mediaUrl)}`;\n  }\n\n  /**\n   * Generate track fragment index URL using production API format\n   * @deprecated Use MD5-based URL generation in AssetMediaEngine.fetch() instead\n   */\n  generateTrackFragmentIndexUrl(mediaUrl: string): string {\n    // Normalize the path: remove leading slash and any double slashes\n    let normalizedSrc = mediaUrl.startsWith(\"/\") ? mediaUrl.slice(1) : mediaUrl;\n    // Remove any remaining leading slashes (handles cases like \"//assets/video.mp4\")\n    normalizedSrc = normalizedSrc.replace(/^\\/+/, \"\");\n    // Legacy format - kept for backward compatibility but should not be used\n    return `@ef-track-fragment-index/${normalizedSrc}`;\n  }\n\n  /**\n   * Generate quality presets URL\n   */\n  generatePresetsUrl(): string {\n    return `${this.baseUrl()}/api/v1/transcode/presets`;\n  }\n}\n"],"mappings":";AAOA,IAAa,eAAb,MAA0B;CACxB,YAAY,AAAQA,SAAuB;EAAvB;;;;;CAKpB,aAAqB;AACnB,SAAO,KAAK,SAAS;;;;;CAMvB,mBACE,WACA,aACA,UACQ;EAIR,MAAM,iBAAiB,SAAS;EAChC,MAAM,iBAAiB,SAAS;EAEhC,IAAI;AACJ,MAAI,gBAAgB,QAClB,aAAY;MAGZ,aAAY;AAGd,MAAI,CAAC,WAAW;AACd,WAAQ,MAAM,uBAAuB;IACnC;IACA,UAAU,CAAC,CAAC;IACZ,UAAU,CAAC,CAAC;IACZ;IACD,CAAC;AACF,SAAM,IAAI,MACR,aAAa,YAAY,uBAAuB,CAAC,CAAC,eAAe,aAAa,CAAC,CAAC,eAAe,GAChG;;AAOH,UAHE,cAAc,SACV,SAAS,UAAU,cACnB,SAAS,UAAU,cAEtB,QAAQ,eAAe,YAAY,CACnC,QAAQ,eAAe,UAAU,UAAU,CAAC,CAC5C,QAAQ,SAAS,SAAS,IAAI,CAC9B,QAAQ,aAAa,UAAU,SAAS,UAAU,IAAI,GAAG;;;;;CAM9D,uBAAuB,UAAkB,WAA2B;AAClE,SAAO,GAAG,KAAK,SAAS,CAAC,oBAAoB,UAAU,gBAAgB,mBAAmB,SAAS;;;;;CAMrG,oBAAoB,UAA0B;AAC5C,SAAO,GAAG,KAAK,SAAS,CAAC,sCAAsC,mBAAmB,SAAS;;;;;;CAO7F,8BAA8B,UAA0B;EAEtD,IAAI,gBAAgB,SAAS,WAAW,IAAI,GAAG,SAAS,MAAM,EAAE,GAAG;AAEnE,kBAAgB,cAAc,QAAQ,QAAQ,GAAG;AAEjD,SAAO,4BAA4B;;;;;CAMrC,qBAA6B;AAC3B,SAAO,GAAG,KAAK,SAAS,CAAC"}
+{"version":3,"file":"UrlGenerator.js","names":["baseUrl: () => string"],"sources":["../../../src/transcoding/utils/UrlGenerator.ts"],"sourcesContent":["/**\n * URL generation utilities for transcoding endpoints\n */\n\nexport class UrlGenerator {\n  constructor(private baseUrl: () => string) {}\n\n  /**\n   * Get the base URL for constructing absolute URLs\n   */\n  getBaseUrl(): string {\n    return this.baseUrl();\n  }\n\n  /**\n   * Generate init segment URL\n   */\n  generateInitSegmentUrl(mediaUrl: string, rendition: string): string {\n    return `${this.baseUrl()}/api/v1/transcode/${rendition}/init.mp4?url=${encodeURIComponent(mediaUrl)}`;\n  }\n\n  /**\n   * Generate manifest URL\n   */\n  generateManifestUrl(mediaUrl: string): string {\n    return `${this.baseUrl()}/api/v1/transcode/manifest.json?url=${encodeURIComponent(mediaUrl)}`;\n  }\n\n  /**\n   * Generate quality presets URL\n   */\n  generatePresetsUrl(): string {\n    return `${this.baseUrl()}/api/v1/transcode/presets`;\n  }\n}\n"],"mappings":";;;;AAIA,IAAa,eAAb,MAA0B;CACxB,YAAY,AAAQA,SAAuB;EAAvB;;;;;CAKpB,aAAqB;AACnB,SAAO,KAAK,SAAS;;;;;CAMvB,uBAAuB,UAAkB,WAA2B;AAClE,SAAO,GAAG,KAAK,SAAS,CAAC,oBAAoB,UAAU,gBAAgB,mBAAmB,SAAS;;;;;CAMrG,oBAAoB,UAA0B;AAC5C,SAAO,GAAG,KAAK,SAAS,CAAC,sCAAsC,mBAAmB,SAAS;;;;;CAM7F,qBAA6B;AAC3B,SAAO,GAAG,KAAK,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editframe/elements",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "description": "",
   "repository": {
     "type": "git",
@@ -18,7 +18,7 @@
   "license": "UNLICENSED",
   "dependencies": {
     "@bramus/style-observer": "^1.3.0",
-    "@editframe/assets": "0.38.0",
+    "@editframe/assets": "0.39.0",
     "@lit/context": "^1.1.6",
     "@opentelemetry/api": "^1.9.0",
     "@opentelemetry/context-zone": "^1.26.0",
@@ -55,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"
@@ -79,6 +91,18 @@
           "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",

package/test/setup.ts

@@ -7,7 +7,7 @@ import { beforeEach, afterAll } from "vitest";
 import {
   globalRequestDeduplicator,
   mediaCache,
-} from "../src/elements/EFMedia/BaseMediaEngine.js";
+} from "../src/elements/EFMedia/CachedFetcher.js";
 import { globalURLTokenDeduplicator } from "../src/transcoding/cache/URLTokenDeduplicator.js";
 import { TEST_SERVER_PORT } from "./constants.js";
 

package/test/useAssetMSW.ts

@@ -1,106 +1,6 @@
-/**
- * Asset-specific MSW handlers for testing
- * Provides pre-configured handlers for asset fragment indexes and track data
- */
-
 import { HttpResponse, http } from "msw";
 
-/**
- * Asset MSW handlers that redirect requests to real test assets
- * Use with MSW worker.use() to proxy asset requests to /test-assets/asset-mode/
- */
 export const assetMSWHandlers = [
-  // Fragment index handler - rewrite to test asset
-  http.get("/@ef-track-fragment-index/*", async () => {
-    const response = await fetch("/asset-mode/index.json");
-    const data = await response.json();
-    return HttpResponse.json(data);
-  }),
-
-  // Track data handler - rewrite to test asset with proper range support
-  http.get("/@ef-track/*", async ({ request }) => {
-    const url = new URL(request.url);
-    const trackId = url.searchParams.get("trackId");
-    if (!trackId) {
-      return new HttpResponse(null, { status: 400 });
-    }
-
-    const rangeHeader = request.headers.get("range");
-    const response = await fetch(`/asset-mode/track-${trackId}.mp4`, {
-      headers: {
-        ...(rangeHeader && {
-          range: rangeHeader,
-        }),
-      },
-    });
-
-    const contentRangeHeader = response.headers.get("Content-Range");
-    return new HttpResponse(await response.arrayBuffer(), {
-      status: response.status,
-      headers: {
-        "Content-Type": "video/mp4",
-        "Accept-Ranges": "bytes",
-        ...(contentRangeHeader && {
-          "Content-Range": contentRangeHeader,
-        }),
-      },
-    });
-  }),
-
-  // Asset ID API handlers - these are needed when tests set assetId properties
-  http.get("/api/v1/isobmff_files/:assetId/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/isobmff_tracks/:assetId/:trackId", async ({ request }) => {
-    // Check if this is a range request
-    const rangeHeader = request.headers.get("range");
-
-    if (rangeHeader) {
-      // Return a mock MP4 segment with proper range headers
-      const mockData = new ArrayBuffer(1024); // 1KB mock data
-      return new HttpResponse(mockData, {
-        status: 206,
-        headers: {
-          "Content-Type": "video/mp4",
-          "Accept-Ranges": "bytes",
-          "Content-Range": rangeHeader,
-          "Content-Length": "1024",
-        },
-      });
-    }
-
-    // Return the full mock track
-    const mockData = new ArrayBuffer(1024);
-    return new HttpResponse(mockData, {
-      status: 200,
-      headers: {
-        "Content-Type": "video/mp4",
-        "Accept-Ranges": "bytes",
-        "Content-Length": "1024",
-      },
-    });
-  }),
-
   http.get("/api/v1/files/:id/index", async () => {
     const mockIndex = {
       0: {

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