@editframe/elements 0.46.2 → 0.47.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (71) hide show
  1. package/dist/elements/EFCaptions.d.ts +2 -2
  2. package/dist/elements/EFMedia/BufferedSeekingInput.d.ts +50 -0
  3. package/dist/elements/EFMedia/BufferedSeekingInput.js +6 -5
  4. package/dist/elements/EFMedia/BufferedSeekingInput.js.map +1 -1
  5. package/dist/elements/EFMedia/CachedFetcher.js +23 -33
  6. package/dist/elements/EFMedia/CachedFetcher.js.map +1 -1
  7. package/dist/elements/EFMedia/SegmentTransport.d.ts +2 -2
  8. package/dist/elements/EFMedia/SegmentTransport.js.map +1 -1
  9. package/dist/elements/EFMedia/shared/ThumbnailExtractor.js +53 -0
  10. package/dist/elements/EFMedia/shared/ThumbnailExtractor.js.map +1 -1
  11. package/dist/elements/EFMedia/videoTasks/MainVideoInputCache.js +20 -5
  12. package/dist/elements/EFMedia/videoTasks/MainVideoInputCache.js.map +1 -1
  13. package/dist/elements/EFMedia/videoTasks/ScrubInputCache.d.ts +48 -0
  14. package/dist/elements/EFMedia/videoTasks/ScrubInputCache.js +36 -7
  15. package/dist/elements/EFMedia/videoTasks/ScrubInputCache.js.map +1 -1
  16. package/dist/elements/EFMedia.d.ts +2 -2
  17. package/dist/elements/EFMotionBlur.d.ts +130 -0
  18. package/dist/elements/EFMotionBlur.js +808 -0
  19. package/dist/elements/EFMotionBlur.js.map +1 -0
  20. package/dist/elements/EFTemporal.js +1 -2
  21. package/dist/elements/EFTemporal.js.map +1 -1
  22. package/dist/elements/EFText.d.ts +20 -0
  23. package/dist/elements/EFText.js +66 -9
  24. package/dist/elements/EFText.js.map +1 -1
  25. package/dist/elements/EFTimegroup.d.ts +12 -0
  26. package/dist/elements/EFTimegroup.js +43 -4
  27. package/dist/elements/EFTimegroup.js.map +1 -1
  28. package/dist/elements/EFVideo.d.ts +26 -0
  29. package/dist/elements/EFVideo.js +114 -36
  30. package/dist/elements/EFVideo.js.map +1 -1
  31. package/dist/elements/SampleBuffer.d.ts +19 -0
  32. package/dist/elements/updateAnimations.js +132 -27
  33. package/dist/elements/updateAnimations.js.map +1 -1
  34. package/dist/gui/EFWorkbench.d.ts +1 -0
  35. package/dist/gui/EFWorkbench.js +15 -0
  36. package/dist/gui/EFWorkbench.js.map +1 -1
  37. package/dist/gui/EFWorkbench.spacebar.js +26 -0
  38. package/dist/gui/EFWorkbench.spacebar.js.map +1 -0
  39. package/dist/gui/TWMixin.js +1 -1
  40. package/dist/gui/TWMixin.js.map +1 -1
  41. package/dist/gui/timeline/EFTimeline.d.ts +18 -1
  42. package/dist/gui/timeline/EFTimeline.js +119 -25
  43. package/dist/gui/timeline/EFTimeline.js.map +1 -1
  44. package/dist/gui/timeline/timelineStateContext.d.ts +2 -0
  45. package/dist/gui/timeline/timelineStateContext.js.map +1 -1
  46. package/dist/gui/timeline/tracks/EFThumbnailStrip.js +14 -8
  47. package/dist/gui/timeline/tracks/EFThumbnailStrip.js.map +1 -1
  48. package/dist/index.d.ts +2 -1
  49. package/dist/index.js +2 -1
  50. package/dist/index.js.map +1 -1
  51. package/dist/preview/FrameController.d.ts +22 -1
  52. package/dist/preview/FrameController.js +26 -5
  53. package/dist/preview/FrameController.js.map +1 -1
  54. package/dist/preview/QualityUpgradeScheduler.d.ts +11 -2
  55. package/dist/preview/QualityUpgradeScheduler.js +31 -21
  56. package/dist/preview/QualityUpgradeScheduler.js.map +1 -1
  57. package/dist/preview/renderTimegroupToCanvas.d.ts +4 -3
  58. package/dist/preview/renderTimegroupToCanvas.js +35 -33
  59. package/dist/preview/renderTimegroupToCanvas.js.map +1 -1
  60. package/dist/preview/renderTimegroupToCanvas.types.d.ts +2 -0
  61. package/dist/preview/renderTimegroupToVideo.js +3 -0
  62. package/dist/preview/renderTimegroupToVideo.js.map +1 -1
  63. package/dist/preview/rendering/renderToImageNative.js +7 -2
  64. package/dist/preview/rendering/renderToImageNative.js.map +1 -1
  65. package/dist/preview/rendering/serializeTimelineDirect.js +30 -35
  66. package/dist/preview/rendering/serializeTimelineDirect.js.map +1 -1
  67. package/dist/style.css +7 -0
  68. package/dist/utils/LRUCache.js +17 -5
  69. package/dist/utils/LRUCache.js.map +1 -1
  70. package/dist/version.js +1 -1
  71. package/package.json +2 -2
@@ -1 +1 @@
1
- {"version":3,"file":"EFVideo.js","names":["#resolve","EFVideo","#currentRenditionId","#cachedVideoSample","#cachedVideoSampleTimeMs","#delayedLoadingState","#fetchVideoSampleForFrame","#getMainVideoSampleForFrame","#getScrubVideoSampleForFrame","#maybeScheduleQualityUpgrade","initSegment: ArrayBuffer | undefined","mediaSegment: ArrayBuffer | undefined","#invalidateUpgradeState","#prewarmQualityUpgrade","videoSample: any","#renderingToVideo","#upgradeState","#upgradeOwnerId","scheduler","#computeLookaheadSegments","#fetchStandalone","results: { segmentId: number; deadlineMs: number }[]","#standaloneUpgradeController"],"sources":["../../src/elements/EFVideo.ts"],"sourcesContent":["import { context, trace } from \"@opentelemetry/api\";\nimport debug from \"debug\";\nimport { css, html, type PropertyValueMap } from \"lit\";\nimport { customElement, state } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport type { VideoSample } from \"mediabunny\";\nimport { DelayedLoadingState } from \"../DelayedLoadingState.js\";\nimport { TWMixin } from \"../gui/TWMixin.js\";\nimport { withSpanSync } from \"../otel/tracingHelpers.js\";\nimport {\n type FrameRenderable,\n type FrameState,\n PRIORITY_VIDEO,\n} from \"../preview/FrameController.js\";\nimport type { MediaEngine } from \"../transcoding/types/index.ts\";\nimport { MainVideoInputCache } from \"./EFMedia/videoTasks/MainVideoInputCache.ts\";\nimport { ScrubInputCache } from \"./EFMedia/videoTasks/ScrubInputCache.ts\";\nimport { EFMedia } from \"./EFMedia.js\";\nimport { updateAnimations } from \"./updateAnimations.js\";\n\n// Shared caches for video seeking\nconst mainVideoInputCache = new MainVideoInputCache();\nconst scrubInputCache = new ScrubInputCache();\n\n// EF_FRAMEGEN is a global instance created in EF_FRAMEGEN.ts\ndeclare global {\n var EF_FRAMEGEN: import(\"../EF_FRAMEGEN.js\").EFFramegen;\n}\n\nconst log = debug(\"ef:elements:EFVideo\");\n\ninterface LoadingState {\n isLoading: boolean;\n operation: \"scrub-segment\" | \"video-segment\" | \"seeking\" | \"decoding\" | null;\n message: string;\n}\n\n/**\n * Event detail for scrub segment loading progress.\n * Dispatched during prefetchScrubSegments to indicate network activity.\n */\nexport interface ScrubSegmentLoadingDetail {\n /** The segment ID being loaded (0-indexed) */\n segmentId: number;\n /** Time range covered by this segment [startMs, endMs] */\n timeRangeMs: [number, number];\n /** Number of segments loaded so far */\n loaded: number;\n /** Total number of segments to load */\n total: number;\n /** Current status: \"loading\" or \"loaded\" */\n status: \"loading\" | \"loaded\";\n}\n\nclass VideoSeekTask {\n value: VideoSample | undefined = undefined;\n task: ((...args: any[]) => any) | undefined = undefined;\n\n #resolve: ((v: VideoSample | undefined) => void) | undefined;\n taskComplete: Promise<VideoSample | undefined> = Promise.resolve(undefined);\n\n begin(): void {\n this.taskComplete = new Promise<VideoSample | undefined>((resolve) => {\n this.#resolve = resolve;\n });\n }\n\n complete(sample: VideoSample | undefined): void {\n this.value = sample;\n this.#resolve?.(sample);\n }\n\n abort(): void {\n this.#resolve?.(undefined);\n }\n}\n\n@customElement(\"ef-video\")\nexport class EFVideo extends TWMixin(EFMedia) implements FrameRenderable {\n static styles = [\n css`\n :host {\n display: block;\n position: relative;\n object-fit: contain;\n object-position: center;\n }\n canvas {\n overflow: hidden;\n position: static;\n width: 100%;\n height: 100%;\n object-fit: inherit;\n object-position: inherit;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n box-shadow: none;\n }\n .loading-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 2px;\n overflow: hidden;\n z-index: 10;\n pointer-events: none;\n background: var(--ef-color-loading-spinner-track, rgba(255, 255, 255, 0.1));\n }\n .loading-bar {\n position: absolute;\n top: 0;\n height: 100%;\n width: 40%;\n background: var(--ef-color-loading-spinner-fill, rgba(255, 255, 255, 0.8));\n animation: loading-sweep 1.4s ease-in-out infinite;\n }\n @keyframes loading-sweep {\n 0% { left: -40%; }\n 100% { left: 140%; }\n }\n `,\n ];\n canvasRef = createRef<HTMLCanvasElement>();\n unifiedVideoSeekTask = new VideoSeekTask();\n\n // ============================================================================\n // FrameRenderable Implementation\n // Centralized frame control - no more Lit Tasks\n // ============================================================================\n\n /**\n * Cached video sample for the current frame.\n * Set by prepareFrame(), consumed by renderFrame().\n */\n #cachedVideoSample: VideoSample | undefined = undefined;\n #cachedVideoSampleTimeMs: number | undefined = undefined;\n\n /**\n * Quality upgrade intent tracking.\n * Tracks what upgrade tasks were last submitted to avoid redundant scheduler calls.\n */\n #upgradeState: {\n sourceTimeMs: number;\n segmentId: number;\n startTimeMs: number;\n submittedKeys: Set<string>;\n } | null = null;\n\n /**\n * Standalone upgrade controller for elements without a timegroup.\n */\n #standaloneUpgradeController: AbortController | null = null;\n\n /**\n * Set to true while renderToVideo is executing to suppress background\n * quality upgrade tasks that would race with the render pipeline.\n */\n #renderingToVideo = false;\n\n /**\n * Stable per-instance identifier for the quality upgrade scheduler.\n * Uses this.id when available; falls back to a generated unique string so\n * elements without an id attribute never collide with each other.\n */\n #upgradeOwnerId: string = crypto.randomUUID();\n\n /**\n * Current rendition being displayed (for observability).\n */\n #currentRenditionId: \"main\" | \"scrub\" | undefined = undefined;\n\n /**\n * Get the current rendition being displayed.\n * @public\n */\n get currentRenditionId(): \"main\" | \"scrub\" | undefined {\n return this.#currentRenditionId;\n }\n\n /**\n * Query readiness state for a given time.\n * @implements FrameRenderable\n *\n * Note: The timeMs parameter is the root timegroup's time. We check against\n * this.currentSourceTimeMs since that's what we cache in prepareFrame.\n */\n getFrameState(_timeMs: number): FrameState {\n // Use element's source time to match what prepareFrame caches\n const sourceTimeMs = this.currentSourceTimeMs;\n\n // Check if we have a cached sample for this exact source time\n const hasCache =\n this.#cachedVideoSample !== undefined && this.#cachedVideoSampleTimeMs === sourceTimeMs;\n\n return {\n needsPreparation: !hasCache,\n isReady: hasCache,\n priority: PRIORITY_VIDEO,\n };\n }\n\n /**\n * Async preparation - seeks video and caches the sample.\n * @implements FrameRenderable\n *\n * Note: The timeMs parameter is the root timegroup's time. We ignore it and\n * use this.currentSourceTimeMs instead, which accounts for:\n * - Our position within the parent timegroup (ownCurrentTimeMs)\n * - Source trimming (sourceIn/sourceOut or trimStart/trimEnd)\n */\n async prepareFrame(_timeMs: number, signal: AbortSignal): Promise<void> {\n signal.throwIfAborted();\n this.unifiedVideoSeekTask.begin();\n this.#delayedLoadingState.startLoading(\"prepare-frame\", \"\");\n\n try {\n // Use element's source time, not the passed root timegroup time.\n // currentSourceTimeMs = ownCurrentTimeMs + (sourceIn || trimStart || 0)\n // This correctly maps timeline position to actual media time.\n const sourceTimeMs = this.currentSourceTimeMs;\n\n const mediaEngine = await this.getMediaEngine(signal);\n if (!mediaEngine) {\n this.#cachedVideoSample = undefined;\n this.#cachedVideoSampleTimeMs = sourceTimeMs;\n this.unifiedVideoSeekTask.complete(undefined);\n return;\n }\n\n signal.throwIfAborted();\n\n // Fetch video sample at the correct source time\n // Handle errors gracefully so one failed seek doesn't break subsequent frames\n try {\n const videoSample = await this.#fetchVideoSampleForFrame(mediaEngine, sourceTimeMs, signal);\n\n signal.throwIfAborted();\n\n // Cache the result\n this.#cachedVideoSample = videoSample;\n this.#cachedVideoSampleTimeMs = sourceTimeMs;\n this.unifiedVideoSeekTask.complete(videoSample);\n } catch (error) {\n // Re-throw abort errors to properly handle cancellation\n if (error instanceof DOMException && error.name === \"AbortError\") {\n this.unifiedVideoSeekTask.abort();\n throw error;\n }\n\n // For seek errors (NoSample, out of bounds, etc.), just clear cache\n // This allows subsequent frames to retry instead of being stuck\n console.warn(`Video seek error at ${sourceTimeMs}ms:`, error);\n this.#cachedVideoSample = undefined;\n this.#cachedVideoSampleTimeMs = sourceTimeMs;\n this.unifiedVideoSeekTask.complete(undefined);\n }\n } finally {\n this.#delayedLoadingState.clearLoading(\"prepare-frame\");\n }\n }\n\n /**\n * Synchronous render - paints cached video sample to canvas.\n * @implements FrameRenderable\n *\n * Note: The timeMs parameter is the root timegroup's time. We use\n * this.currentSourceTimeMs to match what prepareFrame cached.\n */\n renderFrame(_timeMs: number): void {\n // Use element's source time to match what was cached in prepareFrame\n const sourceTimeMs = this.currentSourceTimeMs;\n\n // Use cached sample if available for this source time\n if (this.#cachedVideoSampleTimeMs === sourceTimeMs && this.#cachedVideoSample) {\n const videoFrame = this.#cachedVideoSample.toVideoFrame();\n try {\n this.displayFrame(videoFrame, sourceTimeMs);\n } finally {\n videoFrame.close();\n }\n }\n\n // Update animations if not in parent timegroup\n if (!this.parentTimegroup) {\n updateAnimations(this);\n }\n }\n\n /**\n * Fetch video sample for a given time.\n *\n * Uses a quality routing strategy:\n * - In production rendering: always use main (full quality) track\n * - In preview mode: try scrub track first for faster scrubbing, fall back to main\n * - If main track segment is already cached: use it (avoid redundant lower-quality fetch)\n */\n async #fetchVideoSampleForFrame(\n mediaEngine: MediaEngine,\n desiredSeekTimeMs: number,\n signal: AbortSignal,\n ): Promise<VideoSample | undefined> {\n const mainTrack = mediaEngine.tracks.video;\n\n // FIRST: Check if main quality content is already cached - use it if so\n if (mainTrack) {\n const mainSegmentId = mediaEngine.index.segmentAt(desiredSeekTimeMs, mainTrack);\n if (mainSegmentId !== undefined && mediaEngine.transport.isCached(mainSegmentId, mainTrack)) {\n this.#currentRenditionId = \"main\";\n return this.#getMainVideoSampleForFrame(mediaEngine, desiredSeekTimeMs, signal);\n }\n }\n\n // SECOND: In production rendering mode, always use main (full quality) track\n if (this.isInProductionRenderingMode()) {\n this.#currentRenditionId = \"main\";\n return this.#getMainVideoSampleForFrame(mediaEngine, desiredSeekTimeMs, signal);\n }\n\n // THIRD: In preview mode, try scrub track first for faster scrubbing\n const scrubTrack = mediaEngine.tracks.scrub;\n if (scrubTrack) {\n const scrubSample = await this.#getScrubVideoSampleForFrame(\n mediaEngine,\n desiredSeekTimeMs,\n signal,\n );\n if (scrubSample) {\n this.#currentRenditionId = \"scrub\";\n // Got scrub - schedule background quality upgrade\n this.#maybeScheduleQualityUpgrade(mediaEngine, desiredSeekTimeMs);\n return scrubSample;\n }\n }\n\n // FOURTH: Fall back to main video path\n this.#currentRenditionId = \"main\";\n return this.#getMainVideoSampleForFrame(mediaEngine, desiredSeekTimeMs, signal);\n }\n\n /**\n * Get scrub (low-resolution) video sample for fast preview scrubbing.\n * Used in preview mode for faster response during timeline scrubbing.\n */\n async #getScrubVideoSampleForFrame(\n mediaEngine: MediaEngine,\n desiredSeekTimeMs: number,\n signal: AbortSignal,\n ): Promise<VideoSample | undefined> {\n const scrubTrack = mediaEngine.tracks.scrub;\n if (!scrubTrack) {\n return undefined;\n }\n\n const segmentId = mediaEngine.index.segmentAt(desiredSeekTimeMs, scrubTrack);\n if (segmentId === undefined) {\n return undefined;\n }\n\n const scrubInput = await scrubInputCache.getOrCreateInput(\n mediaEngine.src,\n segmentId,\n async () => {\n let initSegment: ArrayBuffer | undefined;\n let mediaSegment: ArrayBuffer | undefined;\n\n try {\n const initP = mediaEngine.transport.fetchInitSegment(scrubTrack, signal);\n const mediaP = mediaEngine.transport.fetchMediaSegment(segmentId, scrubTrack, signal);\n initP.catch(() => {});\n mediaP.catch(() => {});\n [initSegment, mediaSegment] = await Promise.all([initP, mediaP]);\n } catch (error) {\n if (error instanceof DOMException && error.name === \"AbortError\") {\n throw error;\n }\n return undefined;\n }\n\n if (!initSegment || !mediaSegment) {\n return undefined;\n }\n signal.throwIfAborted();\n\n const combinedBlob = new Blob([initSegment, mediaSegment]);\n signal.throwIfAborted();\n\n const arrayBuffer = await combinedBlob.arrayBuffer();\n signal.throwIfAborted();\n\n const { BufferedSeekingInput } = await import(\"./EFMedia/BufferedSeekingInput.js\");\n\n return new BufferedSeekingInput(arrayBuffer, {\n videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,\n audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,\n startTimeOffsetMs: scrubTrack.startTimeOffsetMs,\n });\n },\n );\n\n if (!scrubInput) {\n return undefined;\n }\n\n signal.throwIfAborted();\n\n const videoTrack = await scrubInput.getFirstVideoTrack();\n if (!videoTrack) {\n return undefined;\n }\n\n signal.throwIfAborted();\n\n return scrubInput.seek(videoTrack.id, desiredSeekTimeMs) as Promise<VideoSample | undefined>;\n }\n\n /**\n * Get main video sample for a given time.\n */\n async #getMainVideoSampleForFrame(\n mediaEngine: MediaEngine,\n desiredSeekTimeMs: number,\n signal: AbortSignal,\n ): Promise<VideoSample | undefined> {\n const videoTrack = mediaEngine.tracks.video;\n if (!videoTrack) {\n return undefined;\n }\n\n const segmentId = mediaEngine.index.segmentAt(desiredSeekTimeMs, videoTrack);\n if (segmentId === undefined) {\n return undefined;\n }\n\n const mainInput = await mainVideoInputCache.getOrCreateInput(\n mediaEngine.src,\n segmentId,\n String(videoTrack.id),\n async () => {\n let initSegment: ArrayBuffer | undefined;\n let mediaSegment: ArrayBuffer | undefined;\n\n try {\n const initP = mediaEngine.transport.fetchInitSegment(videoTrack, signal);\n const mediaP = mediaEngine.transport.fetchMediaSegment(segmentId, videoTrack, signal);\n initP.catch(() => {});\n mediaP.catch(() => {});\n [initSegment, mediaSegment] = await Promise.all([initP, mediaP]);\n } catch (error) {\n if (error instanceof DOMException && error.name === \"AbortError\") {\n throw error;\n }\n if (\n error instanceof Error &&\n (error.message.includes(\"401\") ||\n error.message.includes(\"UNAUTHORIZED\") ||\n error.message.includes(\"Failed to fetch\") ||\n error.message.includes(\"File not found\") ||\n error.message.includes(\"Media segment not found\") ||\n error.message.includes(\"Init segment not found\") ||\n error.message.includes(\"Track not found\"))\n ) {\n return undefined;\n }\n throw error;\n }\n\n if (!initSegment || !mediaSegment) {\n return undefined;\n }\n signal.throwIfAborted();\n\n const combinedBlob = new Blob([initSegment, mediaSegment]);\n signal.throwIfAborted();\n\n const arrayBuffer = await combinedBlob.arrayBuffer();\n signal.throwIfAborted();\n\n const { BufferedSeekingInput } = await import(\"./EFMedia/BufferedSeekingInput.js\");\n\n return new BufferedSeekingInput(arrayBuffer, {\n videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,\n audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,\n startTimeOffsetMs: videoTrack.startTimeOffsetMs,\n });\n },\n );\n\n if (!mainInput) {\n return undefined;\n }\n\n signal.throwIfAborted();\n\n const videoTrackInfo = await mainInput.getFirstVideoTrack();\n if (!videoTrackInfo) {\n return undefined;\n }\n\n signal.throwIfAborted();\n\n const sample = (await mainInput.seek(videoTrackInfo.id, desiredSeekTimeMs)) as\n | VideoSample\n | undefined;\n return sample;\n }\n\n // ============================================================================\n // End FrameRenderable Implementation\n // ============================================================================\n\n /**\n * Delayed loading state manager for user feedback\n */\n #delayedLoadingState: DelayedLoadingState;\n\n /**\n * Loading state for user feedback\n */\n @state()\n loadingState = {\n isLoading: false,\n operation: null as LoadingState[\"operation\"],\n message: \"\",\n };\n\n constructor() {\n super();\n\n // Initialize delayed loading state with callback to update UI\n this.#delayedLoadingState = new DelayedLoadingState(100, (isLoading, message) => {\n this.setLoadingState(isLoading, null, message);\n });\n }\n\n protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {\n super.updated(changedProperties);\n\n // Invalidate upgrade state on src/fileId change\n if (changedProperties.has(\"src\") || changedProperties.has(\"fileId\")) {\n this.#invalidateUpgradeState(\"src-change\");\n this.#prewarmQualityUpgrade();\n }\n\n // Invalidate upgrade state on trim/source changes\n const durationAffectingProps = [\"_trimStartMs\", \"_trimEndMs\", \"_sourceInMs\", \"_sourceOutMs\"];\n const hasDurationChange = durationAffectingProps.some((prop) => changedProperties.has(prop));\n if (hasDurationChange) {\n this.#invalidateUpgradeState(\"bounds-change\");\n this.#prewarmQualityUpgrade();\n }\n\n // No need to clear canvas - displayFrame() overwrites it completely\n // and clearing creates blank frame gaps during transitions\n }\n\n /**\n * Eagerly load the media engine and pre-warm main-quality segments for the\n * start of this clip. Called when src/fileId or source bounds change so that\n * segments are already in cache by the time the element first becomes visible.\n *\n * Without pre-warming, quality upgrade only begins after the first scrub frame\n * is displayed, causing ~12 frames of blur at the cold-start of every clip.\n */\n #prewarmQualityUpgrade(): void {\n if (this.isInProductionRenderingMode()) return;\n if (!this.src && !this.fileId) return;\n\n this.getMediaEngine()\n .then((engine) => {\n if (!engine) return;\n const sourceInMs = this.sourceInMs ?? 0;\n this.#maybeScheduleQualityUpgrade(engine, sourceInMs);\n })\n .catch(() => {});\n }\n\n render() {\n return html`\n <canvas ${ref(this.canvasRef)}></canvas>\n ${\n this.loadingState.isLoading\n ? html`<div class=\"loading-overlay\"><div class=\"loading-bar\"></div></div>`\n : \"\"\n }\n `;\n }\n\n get canvasElement() {\n const referencedCanvas = this.canvasRef.value;\n if (referencedCanvas) {\n return referencedCanvas;\n }\n const shadowCanvas = this.shadowRoot?.querySelector(\"canvas\");\n if (shadowCanvas) {\n return shadowCanvas;\n }\n return undefined;\n }\n\n /**\n * Start a delayed loading operation for testing\n */\n startDelayedLoading(\n operationId: string,\n message: string,\n options: { background?: boolean } = {},\n ): void {\n this.#delayedLoadingState.startLoading(operationId, message, options);\n }\n\n /**\n * Clear a delayed loading operation for testing\n */\n clearDelayedLoading(operationId: string): void {\n this.#delayedLoadingState.clearLoading(operationId);\n }\n\n /**\n * Set loading state for user feedback\n */\n private setLoadingState(\n isLoading: boolean,\n operation: LoadingState[\"operation\"] = null,\n message = \"\",\n ): void {\n this.loadingState = {\n isLoading,\n operation,\n message,\n };\n }\n\n /**\n * Paint the current video frame to canvas\n */\n paint(seekToMs: number, parentSpan?: any): void {\n const parentContext = parentSpan ? trace.setSpan(context.active(), parentSpan) : undefined;\n\n withSpanSync(\n \"video.paint\",\n {\n elementId: this.id || \"unknown\",\n seekToMs,\n src: this.src || \"none\",\n },\n parentContext,\n (span) => {\n const t0 = performance.now();\n\n // Check if we're in production rendering mode vs preview mode\n const isProductionRendering = this.isInProductionRenderingMode();\n const t1 = performance.now();\n span.setAttribute(\"isProductionRendering\", isProductionRendering);\n span.setAttribute(\"modeCheckMs\", t1 - t0);\n\n // Use cached video sample from prepareFrame\n try {\n const t2 = performance.now();\n const videoSample = this.#cachedVideoSample;\n span.setAttribute(\"hasVideoSample\", !!videoSample);\n span.setAttribute(\"valueAccessMs\", t2 - t1);\n\n if (videoSample) {\n const t3 = performance.now();\n const videoFrame = videoSample.toVideoFrame();\n const t4 = performance.now();\n span.setAttribute(\"toVideoFrameMs\", t4 - t3);\n\n try {\n const t5 = performance.now();\n this.displayFrame(videoFrame, seekToMs, span);\n const t6 = performance.now();\n span.setAttribute(\"displayFrameMs\", t6 - t5);\n } finally {\n videoFrame.close();\n }\n }\n } catch (error) {\n console.warn(\"Video pipeline error:\", error);\n }\n\n // EF_FRAMEGEN-aware rendering mode detection\n if (!isProductionRendering) {\n // Preview mode: always render\n // Visibility is handled by the phase/visibility system (CSS display:none)\n // No need to skip initialization frames - if element shouldn't be visible,\n // it will be hidden by CSS\n } else {\n // Production rendering mode: only render when EF_FRAMEGEN has explicitly started frame rendering\n // This prevents initialization frames before the actual render sequence begins\n if (!this.rootTimegroup) {\n span.setAttribute(\"skipped\", \"no-root-timegroup\");\n return;\n }\n\n if (!this.isFrameRenderingActive()) {\n span.setAttribute(\"skipped\", \"frame-rendering-not-active\");\n return; // Wait for EF_FRAMEGEN to start frame sequence\n }\n\n // Production mode: EF_FRAMEGEN has started frame sequence, proceed with rendering\n }\n\n const tEnd = performance.now();\n span.setAttribute(\"totalPaintMs\", tEnd - t0);\n },\n );\n }\n\n /**\n * Clear the canvas when element becomes inactive\n */\n clearCanvas(): void {\n if (!this.canvasElement) return;\n\n const ctx = this.canvasElement.getContext(\"2d\", {\n willReadFrequently: true,\n });\n if (ctx) {\n ctx.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);\n }\n }\n\n /**\n * Display a video frame on the canvas\n */\n displayFrame(frame: VideoFrame, seekToMs: number, parentSpan?: any): void {\n const parentContext = parentSpan ? trace.setSpan(context.active(), parentSpan) : undefined;\n\n withSpanSync(\n \"video.displayFrame\",\n {\n elementId: this.id || \"unknown\",\n seekToMs,\n format: frame.format || \"unknown\",\n width: frame.codedWidth,\n height: frame.codedHeight,\n },\n parentContext,\n (span) => {\n const t0 = performance.now();\n\n log(\"trace: displayFrame start\", {\n seekToMs,\n frameFormat: frame.format,\n });\n\n if (!this.canvasElement) {\n log(\"trace: displayFrame aborted - no canvas element\");\n throw new Error(\n `Frame display failed: Canvas element is not available at time ${seekToMs}ms. The video component may not be properly initialized.`,\n );\n }\n const t1 = performance.now();\n span.setAttribute(\"getCanvasMs\", Math.round((t1 - t0) * 100) / 100);\n\n const ctx = this.canvasElement.getContext(\"2d\", {\n willReadFrequently: true,\n });\n const t2 = performance.now();\n span.setAttribute(\"getCtxMs\", Math.round((t2 - t1) * 100) / 100);\n\n if (!ctx) {\n log(\"trace: displayFrame aborted - no canvas context\");\n throw new Error(\n `Frame display failed: Unable to get 2D canvas context at time ${seekToMs}ms. This may indicate a browser compatibility issue or canvas corruption.`,\n );\n }\n\n const frameWidth = frame.displayWidth;\n const frameHeight = frame.displayHeight;\n\n let resized = false;\n if (frameWidth && frameHeight) {\n const needsResize =\n frameWidth > this.canvasElement.width || frameHeight > this.canvasElement.height;\n if (needsResize) {\n const newWidth = Math.max(this.canvasElement.width, frameWidth);\n const newHeight = Math.max(this.canvasElement.height, frameHeight);\n log(\"trace: updating canvas dimensions\", {\n width: newWidth,\n height: newHeight,\n });\n this.canvasElement.width = newWidth;\n this.canvasElement.height = newHeight;\n resized = true;\n const t3 = performance.now();\n span.setAttribute(\"resizeMs\", Math.round((t3 - t2) * 100) / 100);\n }\n }\n span.setAttribute(\"canvasResized\", resized);\n\n if (frame.format === null) {\n log(\"trace: displayFrame aborted - null frame format\");\n throw new Error(\n `Frame display failed: Video frame has null format at time ${seekToMs}ms. This indicates corrupted or incompatible video data.`,\n );\n }\n\n const tDrawStart = performance.now();\n ctx.drawImage(frame, 0, 0, this.canvasElement.width, this.canvasElement.height);\n const tDrawEnd = performance.now();\n span.setAttribute(\"drawImageMs\", Math.round((tDrawEnd - tDrawStart) * 100) / 100);\n span.setAttribute(\"totalDisplayMs\", Math.round((tDrawEnd - t0) * 100) / 100);\n span.setAttribute(\"canvasWidth\", this.canvasElement.width);\n span.setAttribute(\"canvasHeight\", this.canvasElement.height);\n\n log(\"trace: frame drawn to canvas\", { seekToMs });\n },\n );\n }\n\n /**\n * Check if we're in production rendering mode (EF_FRAMEGEN active) vs preview mode\n */\n private isInProductionRenderingMode(): boolean {\n // Check if EF_RENDERING function exists and returns true (production rendering)\n if (typeof window.EF_RENDERING === \"function\") {\n return window.EF_RENDERING();\n }\n\n // Check if workbench is in rendering mode\n const workbench = document.querySelector(\"ef-workbench\") as any;\n if (workbench?.rendering) {\n return true;\n }\n\n // Check if EF_FRAMEGEN exists and has render options (indicates active rendering)\n if (window.EF_FRAMEGEN?.renderOptions) {\n return true;\n }\n\n // Default to preview mode\n return false;\n }\n\n /**\n * Check if EF_FRAMEGEN has explicitly started frame rendering (not just initialization)\n */\n private isFrameRenderingActive(): boolean {\n if (!window.EF_FRAMEGEN?.renderOptions) {\n return false;\n }\n\n // In production mode, only render when EF_FRAMEGEN has actually begun frame sequence\n // Check if we're past the initialization phase by looking for explicit frame control\n const renderOptions = window.EF_FRAMEGEN.renderOptions;\n const renderStartTime = renderOptions.encoderOptions.fromMs;\n const currentTime = this.rootTimegroup?.currentTimeMs || 0;\n\n // We're in active frame rendering if:\n // 1. currentTime >= renderStartTime (includes the starting frame)\n return currentTime >= renderStartTime;\n }\n\n /**\n * Get a decoded VideoFrame at a specific source media timestamp.\n * Returns a standard WebCodecs VideoFrame — caller MUST call .close() when done.\n *\n * Uses the same routing logic as the unified video system:\n * - \"auto\": main track for production rendering, follows normal routing otherwise\n * - \"scrub\": force low-res scrub track (for thumbnails)\n * - \"main\": force full-quality main track\n *\n * @param sourceTimeMs - Timestamp in source media coordinates (not timeline)\n * @param options - Quality and abort signal\n * @returns VideoFrame that the caller must close()\n * @public\n */\n async getVideoFrameAtSourceTime(\n sourceTimeMs: number,\n options: {\n quality?: \"auto\" | \"scrub\" | \"main\";\n signal?: AbortSignal;\n } = {},\n ): Promise<VideoFrame> {\n const { quality = \"auto\", signal: providedSignal } = options;\n\n const signal = providedSignal ?? new AbortController().signal;\n signal.throwIfAborted();\n\n this.playbackController?.suspendSelfRender();\n try {\n const mediaEngine = await this.getMediaEngine(signal);\n signal.throwIfAborted();\n\n if (!mediaEngine) {\n throw new Error(\"No media engine available for frame capture\");\n }\n\n const useMainTrack =\n quality === \"main\" || (quality === \"auto\" && this.isInProductionRenderingMode());\n\n let videoSample: any;\n\n const { BufferedSeekingInput } = await import(\"./EFMedia/BufferedSeekingInput.js\");\n signal.throwIfAborted();\n\n if (useMainTrack) {\n const videoTrack = mediaEngine.tracks.video;\n if (!videoTrack) {\n throw new Error(\"No video rendition available\");\n }\n\n const segmentId = mediaEngine.index.segmentAt(sourceTimeMs, videoTrack);\n if (segmentId === undefined) {\n throw new Error(`Cannot compute segment ID for time ${sourceTimeMs}ms`);\n }\n\n const seekingInput = await mainVideoInputCache.getOrCreateInput(\n mediaEngine.src,\n segmentId,\n String(videoTrack.id),\n async () => {\n const initP = mediaEngine.transport.fetchInitSegment(videoTrack, signal);\n const mediaP = mediaEngine.transport.fetchMediaSegment(segmentId, videoTrack, signal);\n initP.catch(() => {});\n mediaP.catch(() => {});\n const [initSegment, mediaSegment] = await Promise.all([initP, mediaP]);\n\n if (!initSegment || !mediaSegment) {\n return undefined;\n }\n\n const combinedBlob = new Blob([initSegment, mediaSegment]);\n const arrayBuffer = await combinedBlob.arrayBuffer();\n\n return new BufferedSeekingInput(arrayBuffer, {\n videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,\n audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,\n startTimeOffsetMs: videoTrack.startTimeOffsetMs,\n });\n },\n );\n signal.throwIfAborted();\n\n if (!seekingInput) {\n throw new Error(`Failed to fetch video segments for time ${sourceTimeMs}ms`);\n }\n\n const seekingVideoTrack = await seekingInput.getFirstVideoTrack();\n signal.throwIfAborted();\n\n if (!seekingVideoTrack) {\n throw new Error(\"No video track found in segment\");\n }\n\n videoSample = await seekingInput.seek(seekingVideoTrack.id, sourceTimeMs);\n signal.throwIfAborted();\n } else {\n const scrubTrack = mediaEngine.tracks.scrub;\n if (!scrubTrack) {\n return this.getVideoFrameAtSourceTime(sourceTimeMs, {\n quality: \"main\",\n signal,\n });\n }\n\n const segmentId = mediaEngine.index.segmentAt(sourceTimeMs, scrubTrack);\n\n if (segmentId === undefined) {\n throw new Error(`Cannot compute scrub segment ID for time ${sourceTimeMs}ms`);\n }\n\n const seekingInput = await scrubInputCache.getOrCreateInput(\n mediaEngine.src,\n segmentId,\n async () => {\n const initP = mediaEngine.transport.fetchInitSegment(scrubTrack, signal);\n const mediaP = mediaEngine.transport.fetchMediaSegment(segmentId, scrubTrack, signal);\n initP.catch(() => {});\n mediaP.catch(() => {});\n const [initSegment, mediaSegment] = await Promise.all([initP, mediaP]);\n\n if (!initSegment || !mediaSegment) {\n return undefined;\n }\n\n const combinedBlob = new Blob([initSegment, mediaSegment]);\n const arrayBuffer = await combinedBlob.arrayBuffer();\n\n return new BufferedSeekingInput(arrayBuffer, {\n videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,\n audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,\n startTimeOffsetMs: scrubTrack.startTimeOffsetMs,\n });\n },\n );\n signal.throwIfAborted();\n\n if (!seekingInput) {\n return this.getVideoFrameAtSourceTime(sourceTimeMs, {\n quality: \"main\",\n signal,\n });\n }\n\n const seekingVideoTrack = await seekingInput.getFirstVideoTrack();\n signal.throwIfAborted();\n\n if (!seekingVideoTrack) {\n return this.getVideoFrameAtSourceTime(sourceTimeMs, {\n quality: \"main\",\n signal,\n });\n }\n\n videoSample = await seekingInput.seek(seekingVideoTrack.id, sourceTimeMs);\n signal.throwIfAborted();\n }\n\n if (!videoSample) {\n throw new Error(`No video sample found at ${sourceTimeMs}ms`);\n }\n\n return videoSample.toVideoFrame();\n } finally {\n this.playbackController?.resumeSelfRender();\n }\n }\n\n /**\n * Capture a video frame directly at a source media timestamp.\n * Designed for export/rendering.\n * Does NOT paint to the element's internal canvas.\n *\n * Uses the same routing logic as unified video system:\n * - \"auto\": main track for production rendering, follows normal routing otherwise\n * - \"scrub\": force low-res scrub track (for thumbnails)\n * - \"main\": force full-quality main track\n *\n * @param sourceTimeMs - Timestamp in source media coordinates (not timeline)\n * @param options - Capture options including quality and abort signal\n * @returns Frame data for serialization\n * @public\n */\n async captureFrameAtSourceTime(\n sourceTimeMs: number,\n options: {\n quality?: \"auto\" | \"scrub\" | \"main\";\n signal?: AbortSignal;\n } = {},\n ): Promise<{\n dataUrl: string;\n width: number;\n height: number;\n }> {\n const videoFrame = await this.getVideoFrameAtSourceTime(sourceTimeMs, options);\n\n try {\n options.signal?.throwIfAborted();\n\n const canvas = new OffscreenCanvas(videoFrame.codedWidth, videoFrame.codedHeight);\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) {\n throw new Error(\"Failed to get 2d context from OffscreenCanvas\");\n }\n ctx.drawImage(videoFrame, 0, 0);\n\n options.signal?.throwIfAborted();\n\n const blob = await canvas.convertToBlob({\n type: \"image/jpeg\",\n quality: 0.92,\n });\n options.signal?.throwIfAborted();\n\n const dataUrl = await new Promise<string>((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = () => resolve(reader.result as string);\n reader.onerror = reject;\n reader.readAsDataURL(blob);\n });\n options.signal?.throwIfAborted();\n\n return {\n dataUrl,\n width: videoFrame.codedWidth,\n height: videoFrame.codedHeight,\n };\n } finally {\n videoFrame.close();\n }\n }\n\n /**\n * Pre-fetch scrub segments for given timestamps.\n * Loads 30-second segments sequentially, emitting progress events.\n * This ensures scrub track is cached for fast thumbnail generation.\n *\n * @param timestamps - Array of timestamps (in ms) that will be captured\n * @param onProgress - Optional callback for loading progress\n * @param signal - Optional AbortSignal for cancellation\n * @returns Promise that resolves when all segments are cached\n * @public\n */\n async prefetchScrubSegments(\n timestamps: number[],\n onProgress?: (loaded: number, total: number, segmentTimeRange: [number, number]) => void,\n signal?: AbortSignal,\n ): Promise<void> {\n // Wait for media engine to be ready\n const mediaEngine = await this.getMediaEngine(signal);\n if (!mediaEngine) {\n log(\"prefetchScrubSegments: no media engine available\");\n return;\n }\n\n const scrubTrack = mediaEngine.tracks.scrub;\n if (!scrubTrack) {\n log(\"prefetchScrubSegments: no scrub rendition available\");\n return;\n }\n\n // Compute unique segment IDs needed for all timestamps\n const segmentIds = new Set<number>();\n for (const ts of timestamps) {\n const segmentId = mediaEngine.index.segmentAt(ts, scrubTrack);\n if (segmentId !== undefined) {\n segmentIds.add(segmentId);\n }\n }\n\n if (segmentIds.size === 0) {\n log(\"prefetchScrubSegments: no segments to prefetch\");\n return;\n }\n\n // Check if ANY segment is already cached (meaning the file is loaded).\n const firstSegmentId = Array.from(segmentIds)[0]!;\n if (mediaEngine.transport.isCached(firstSegmentId, scrubTrack)) {\n log(\"prefetchScrubSegments: scrub track already cached\");\n return;\n }\n\n log(`prefetchScrubSegments: fetching scrub track for ${segmentIds.size} segments...`);\n\n const durationMs = mediaEngine.durationMs || 0;\n this.dispatchEvent(\n new CustomEvent(\"scrub-segment-loading\", {\n detail: {\n segmentId: 0,\n timeRangeMs: [0, durationMs] as [number, number],\n loaded: 0,\n total: 1,\n status: \"loading\",\n },\n bubbles: true,\n composed: true,\n }),\n );\n\n const fetchSignal = signal ?? new AbortController().signal;\n try {\n await mediaEngine.transport.fetchMediaSegment(firstSegmentId, scrubTrack, fetchSignal);\n log(`prefetchScrubSegments: scrub track loaded`);\n } catch (error) {\n log(`prefetchScrubSegments: failed to load scrub track`, error);\n }\n\n this.dispatchEvent(\n new CustomEvent(\"scrub-segment-loading\", {\n detail: {\n segmentId: 0,\n timeRangeMs: [0, durationMs] as [number, number],\n loaded: 1,\n total: 1,\n status: \"loaded\",\n },\n bubbles: true,\n composed: true,\n }),\n );\n\n onProgress?.(1, 1, [0, durationMs]);\n log(`prefetchScrubSegments: complete`);\n }\n\n /**\n * Maybe schedule quality upgrade tasks for this element.\n * Called when returning a scrub sample - checks if state has changed and submits tasks.\n */\n #maybeScheduleQualityUpgrade(mediaEngine: MediaEngine, sourceTimeMs: number): void {\n if (this.#renderingToVideo) return;\n const mainTrack = mediaEngine.tracks.video;\n if (!mainTrack) return;\n\n const segmentId = mediaEngine.index.segmentAt(sourceTimeMs, mainTrack);\n if (segmentId === undefined) return;\n\n const startTimeMs = this.startTimeMs;\n\n const stateChanged =\n this.#upgradeState === null ||\n this.#upgradeState.segmentId !== segmentId ||\n this.#upgradeState.startTimeMs !== startTimeMs;\n\n if (!stateChanged) {\n // State matches what we previously submitted. Check if the task is still\n // active or waiting in the queue — either way it will populate the cache.\n const currentTaskKey = `${this.#upgradeOwnerId}:${segmentId}:${mainTrack.id}`;\n const scheduler = this.rootTimegroup?.qualityUpgradeScheduler;\n if (scheduler?.isActive(currentTaskKey) || scheduler?.isPending(currentTaskKey)) {\n return;\n }\n // Task is neither running nor queued — it completed (or failed) and the\n // segment may have been evicted. Re-submit.\n this.rootTimegroup?.qualityUpgradeScheduler?.cancelForOwner(this.#upgradeOwnerId);\n this.#upgradeState = null;\n // Fall through to re-submit\n }\n\n const segments = this.#computeLookaheadSegments(mediaEngine, sourceTimeMs, mainTrack);\n if (segments.length === 0) return;\n\n const tasks = segments.map((seg) => ({\n key: `${this.#upgradeOwnerId}:${seg.segmentId}:${mainTrack.id}`,\n fetch: async (signal: AbortSignal) => {\n await mediaEngine.transport.fetchInitSegment(mainTrack, signal);\n await mediaEngine.transport.fetchMediaSegment(seg.segmentId, mainTrack, signal);\n },\n deadlineMs: seg.deadlineMs,\n owner: this.#upgradeOwnerId,\n }));\n\n const scheduler = this.rootTimegroup?.qualityUpgradeScheduler;\n if (scheduler) {\n scheduler.replaceForOwner(this.#upgradeOwnerId, tasks);\n } else {\n this.#fetchStandalone(tasks);\n }\n\n this.#upgradeState = {\n sourceTimeMs,\n segmentId,\n startTimeMs,\n submittedKeys: new Set(tasks.map((t) => t.key)),\n };\n }\n\n /**\n * Compute lookahead segments with deadlines in timeline space.\n */\n #computeLookaheadSegments(\n mediaEngine: MediaEngine,\n currentSourceTimeMs: number,\n track: import(\"./EFMedia/SegmentIndex.js\").TrackRef,\n maxLookahead: number = 5,\n ): { segmentId: number; deadlineMs: number }[] {\n const results: { segmentId: number; deadlineMs: number }[] = [];\n const playheadMs = this.rootTimegroup?.currentTimeMs ?? 0;\n const seen = new Set<number>();\n\n let probeTimeMs = currentSourceTimeMs;\n\n while (seen.size < maxLookahead) {\n const segmentId = mediaEngine.index.segmentAt(probeTimeMs, track);\n if (segmentId === undefined) break;\n if (seen.has(segmentId)) break;\n\n seen.add(segmentId);\n\n if (!mediaEngine.transport.isCached(segmentId, track)) {\n const offsetFromCurrentMs = probeTimeMs - currentSourceTimeMs;\n const deadlineMs = playheadMs + offsetFromCurrentMs;\n results.push({ segmentId, deadlineMs });\n }\n\n const thisDuration =\n track.segmentDurationsMs?.[segmentId - 1] ?? track.segmentDurationMs ?? 2000;\n probeTimeMs += thisDuration;\n }\n\n return results;\n }\n\n /**\n * Standalone mode: fetch tasks sequentially without scheduler.\n */\n #fetchStandalone(tasks: any[]): void {\n // Abort any previous standalone batch (e.g., after seek)\n this.#standaloneUpgradeController?.abort();\n this.#standaloneUpgradeController = new AbortController();\n const signal = this.#standaloneUpgradeController.signal;\n\n // Process sequentially\n (async () => {\n for (const task of tasks) {\n if (signal.aborted) break;\n try {\n await task.fetch(signal);\n } catch {\n // Continue on error\n }\n }\n // After all tasks complete, trigger re-render\n if (!signal.aborted) {\n this.playbackController?.runThrottledFrameTask().catch(() => {});\n }\n })().catch(() => {});\n }\n\n /**\n * Invalidate upgrade state and optionally cancel queued tasks.\n */\n #invalidateUpgradeState(reason: \"src-change\" | \"bounds-change\" | \"disconnect\"): void {\n if (reason === \"src-change\" || reason === \"disconnect\") {\n // Full cancel - old tasks reference a stale media engine\n this.rootTimegroup?.qualityUpgradeScheduler?.cancelForOwner(this.#upgradeOwnerId);\n }\n // For bounds-change, don't cancel - old tasks may still be valid segments,\n // just with stale deadlines. replaceForOwner on next prepareFrame handles it.\n this.#upgradeState = null;\n }\n\n /**\n * Clean up resources when component is disconnected\n */\n disconnectedCallback(): void {\n super.disconnectedCallback();\n\n // Clean up delayed loading state\n this.#delayedLoadingState.clearAllLoading();\n\n // Cancel upgrade tasks (centralized or standalone)\n this.#invalidateUpgradeState(\"disconnect\");\n this.#standaloneUpgradeController?.abort();\n this.#standaloneUpgradeController = null;\n }\n\n didBecomeRoot() {\n super.didBecomeRoot();\n }\n didBecomeChild() {\n super.didBecomeChild();\n }\n\n /**\n * Get the natural dimensions of the video (coded width and height).\n * Returns null if the video hasn't loaded yet or canvas isn't available.\n *\n * @public\n */\n getNaturalDimensions(): { width: number; height: number } | null {\n const canvas = this.canvasElement;\n if (!canvas || canvas.width === 0 || canvas.height === 0) {\n return null;\n }\n return {\n width: canvas.width,\n height: canvas.height,\n };\n }\n\n /**\n * Render this video element to an MP4 using the direct video-to-video fast path.\n * Bypasses DOM serialization — decodes frames directly and re-encodes to MP4.\n * Respects trim, CSS filter, and opacity.\n *\n * @param options - Rendering options (fps, codec, bitrate, etc.)\n * @returns Promise resolving to video buffer (if returnBuffer), or undefined\n * @public\n */\n async renderToVideo(\n options?: import(\"../preview/renderTimegroupToVideo.types.js\").RenderToVideoOptions,\n ): Promise<Uint8Array | undefined> {\n this.#renderingToVideo = true;\n try {\n const { renderVideoToVideo } = await import(\"../preview/renderVideoToVideo.js\");\n return await renderVideoToVideo(this, options);\n } finally {\n this.#renderingToVideo = false;\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"ef-video\": EFVideo;\n }\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"EFVideo.js","names":["#resolve","EFVideo","#currentRenditionId","#cachedVideoSample","#cachedVideoSampleTimeMs","#delayedLoadingState","#fetchVideoSampleForFrame","#getMainVideoSampleForFrame","#getScrubVideoSampleForFrame","#maybeScheduleQualityUpgrade","#scrubInputCache","initSegment: ArrayBuffer | undefined","mediaSegment: ArrayBuffer | undefined","#mainVideoInputCache","#invalidateUpgradeState","#prewarmQualityUpgrade","videoSample: any","#renderingToVideo","#upgradeState","#upgradeOwnerId","scheduler","#computeLookaheadSegments","#fetchStandalone","results: { segmentId: number; deadlineMs: number }[]","#standaloneUpgradeController"],"sources":["../../src/elements/EFVideo.ts"],"sourcesContent":["import { context, trace } from \"@opentelemetry/api\";\nimport debug from \"debug\";\nimport { css, html, type PropertyValueMap } from \"lit\";\nimport { customElement, state } from \"lit/decorators.js\";\nimport { createRef, ref } from \"lit/directives/ref.js\";\nimport type { VideoSample } from \"mediabunny\";\nimport { DelayedLoadingState } from \"../DelayedLoadingState.js\";\nimport { TWMixin } from \"../gui/TWMixin.js\";\nimport { withSpanSync } from \"../otel/tracingHelpers.js\";\nimport {\n type FrameRenderable,\n type FrameState,\n PRIORITY_VIDEO,\n} from \"../preview/FrameController.js\";\nimport type { MediaEngine } from \"../transcoding/types/index.ts\";\nimport { MainVideoInputCache } from \"./EFMedia/videoTasks/MainVideoInputCache.ts\";\nimport { ScrubInputCache } from \"./EFMedia/videoTasks/ScrubInputCache.ts\";\nimport { EFMedia } from \"./EFMedia.js\";\nimport { updateAnimations } from \"./updateAnimations.js\";\n\n// NOTE: These caches are intentionally per-instance (created in EFVideo class body),\n// not module-level singletons. Sharing between live player and render clones causes\n// seek-lock deadlocks: the thumbnail generator holds a BufferedSeekingInput seek lock\n// while the live player waits on the same lock indefinitely.\n\n// EF_FRAMEGEN is a global instance created in EF_FRAMEGEN.ts\ndeclare global {\n var EF_FRAMEGEN: import(\"../EF_FRAMEGEN.js\").EFFramegen;\n}\n\nconst log = debug(\"ef:elements:EFVideo\");\n\ninterface LoadingState {\n isLoading: boolean;\n operation: \"scrub-segment\" | \"video-segment\" | \"seeking\" | \"decoding\" | null;\n message: string;\n}\n\n/**\n * Event detail for scrub segment loading progress.\n * Dispatched during prefetchScrubSegments to indicate network activity.\n */\nexport interface ScrubSegmentLoadingDetail {\n /** The segment ID being loaded (0-indexed) */\n segmentId: number;\n /** Time range covered by this segment [startMs, endMs] */\n timeRangeMs: [number, number];\n /** Number of segments loaded so far */\n loaded: number;\n /** Total number of segments to load */\n total: number;\n /** Current status: \"loading\" or \"loaded\" */\n status: \"loading\" | \"loaded\";\n}\n\nclass VideoSeekTask {\n value: VideoSample | undefined = undefined;\n task: ((...args: any[]) => any) | undefined = undefined;\n\n #resolve: ((v: VideoSample | undefined) => void) | undefined;\n taskComplete: Promise<VideoSample | undefined> = Promise.resolve(undefined);\n\n begin(): void {\n this.taskComplete = new Promise<VideoSample | undefined>((resolve) => {\n this.#resolve = resolve;\n });\n }\n\n complete(sample: VideoSample | undefined): void {\n this.value = sample;\n this.#resolve?.(sample);\n }\n\n abort(): void {\n this.#resolve?.(undefined);\n }\n}\n\n@customElement(\"ef-video\")\nexport class EFVideo extends TWMixin(EFMedia) implements FrameRenderable {\n static styles = [\n css`\n :host {\n display: block;\n position: relative;\n object-fit: contain;\n object-position: center;\n }\n canvas {\n overflow: hidden;\n position: static;\n width: 100%;\n height: 100%;\n object-fit: inherit;\n object-position: inherit;\n margin: 0;\n padding: 0;\n border: none;\n outline: none;\n box-shadow: none;\n }\n .loading-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 2px;\n overflow: hidden;\n z-index: 10;\n pointer-events: none;\n background: var(--ef-color-loading-spinner-track, rgba(255, 255, 255, 0.1));\n }\n .loading-bar {\n position: absolute;\n top: 0;\n height: 100%;\n width: 40%;\n background: var(--ef-color-loading-spinner-fill, rgba(255, 255, 255, 0.8));\n animation: loading-sweep 1.4s ease-in-out infinite;\n }\n @keyframes loading-sweep {\n 0% { left: -40%; }\n 100% { left: 140%; }\n }\n `,\n ];\n canvasRef = createRef<HTMLCanvasElement>();\n unifiedVideoSeekTask = new VideoSeekTask();\n\n // ============================================================================\n // FrameRenderable Implementation\n // Centralized frame control - no more Lit Tasks\n // ============================================================================\n\n /**\n * Cached video sample for the current frame.\n * Set by prepareFrame(), consumed by renderFrame().\n */\n #cachedVideoSample: VideoSample | undefined = undefined;\n #cachedVideoSampleTimeMs: number | undefined = undefined;\n\n /**\n * Quality upgrade intent tracking.\n * Tracks what upgrade tasks were last submitted to avoid redundant scheduler calls.\n */\n #upgradeState: {\n sourceTimeMs: number;\n segmentId: number;\n startTimeMs: number;\n submittedKeys: Set<string>;\n } | null = null;\n\n /**\n * Standalone upgrade controller for elements without a timegroup.\n */\n #standaloneUpgradeController: AbortController | null = null;\n\n // Per-instance caches. NOT module-level singletons: sharing BufferedSeekingInput\n // instances between the live player and render clones causes seek-lock deadlocks —\n // the thumbnail generator holds a lock while the live player waits on it indefinitely.\n #mainVideoInputCache = new MainVideoInputCache();\n #scrubInputCache = new ScrubInputCache();\n\n /**\n * Set to true while renderToVideo is executing to suppress background\n * quality upgrade tasks that would race with the render pipeline.\n */\n #renderingToVideo = false;\n\n /**\n * Stable per-instance identifier for the quality upgrade scheduler.\n * Uses this.id when available; falls back to a generated unique string so\n * elements without an id attribute never collide with each other.\n */\n #upgradeOwnerId: string = crypto.randomUUID();\n\n /**\n * Current rendition being displayed (for observability).\n */\n #currentRenditionId: \"main\" | \"scrub\" | undefined = undefined;\n\n /**\n * Get the current rendition being displayed.\n * @public\n */\n get currentRenditionId(): \"main\" | \"scrub\" | undefined {\n return this.#currentRenditionId;\n }\n\n /**\n * Query readiness state for a given time.\n * @implements FrameRenderable\n *\n * Note: The timeMs parameter is the root timegroup's time. We check against\n * this.currentSourceTimeMs since that's what we cache in prepareFrame.\n */\n getFrameState(_timeMs: number): FrameState {\n // Use element's source time to match what prepareFrame caches\n const sourceTimeMs = this.currentSourceTimeMs;\n\n // Check if we have a cached sample for this exact source time\n const hasCache =\n this.#cachedVideoSample !== undefined && this.#cachedVideoSampleTimeMs === sourceTimeMs;\n\n // If we're on scrub quality and main segment is cached, signal upgrade needed.\n // Skip in render clones — they must stay on scrub for thumbnail generation speed.\n if (this.#currentRenditionId === \"scrub\" && !this.rootTimegroup?.isRenderClone) {\n const mediaEngine = this.mediaEngineTask.value;\n if (mediaEngine) {\n const mainTrack = mediaEngine.tracks.video;\n if (mainTrack) {\n const mainSegmentId = mediaEngine.index.segmentAt(sourceTimeMs, mainTrack);\n if (\n mainSegmentId !== undefined &&\n mediaEngine.transport.isCached(mainSegmentId, mainTrack)\n ) {\n return { needsPreparation: true, isReady: false, priority: PRIORITY_VIDEO };\n }\n }\n }\n }\n\n return { needsPreparation: !hasCache, isReady: hasCache, priority: PRIORITY_VIDEO };\n }\n\n /**\n * Async preparation - seeks video and caches the sample.\n * @implements FrameRenderable\n *\n * Note: The timeMs parameter is the root timegroup's time. We ignore it and\n * use this.currentSourceTimeMs instead, which accounts for:\n * - Our position within the parent timegroup (ownCurrentTimeMs)\n * - Source trimming (sourceIn/sourceOut or trimStart/trimEnd)\n */\n async prepareFrame(_timeMs: number, signal: AbortSignal): Promise<void> {\n signal.throwIfAborted();\n this.unifiedVideoSeekTask.begin();\n this.#delayedLoadingState.startLoading(\"prepare-frame\", \"\");\n\n try {\n // Use element's source time, not the passed root timegroup time.\n // currentSourceTimeMs = ownCurrentTimeMs + (sourceIn || trimStart || 0)\n // This correctly maps timeline position to actual media time.\n const sourceTimeMs = this.currentSourceTimeMs;\n\n const mediaEngine = await this.getMediaEngine(signal);\n if (!mediaEngine) {\n this.#cachedVideoSample = undefined;\n this.#cachedVideoSampleTimeMs = sourceTimeMs;\n this.unifiedVideoSeekTask.complete(undefined);\n return;\n }\n\n signal.throwIfAborted();\n\n // Fetch video sample at the correct source time\n // Handle errors gracefully so one failed seek doesn't break subsequent frames\n try {\n const videoSample = await this.#fetchVideoSampleForFrame(mediaEngine, sourceTimeMs, signal);\n\n // Cache before checking abort: a successful seek result is valuable even\n // if the render is being superseded. Writing the cache here ensures the\n // next render (triggered by the same abort) finds a warm cache and avoids\n // re-seeking. Without this ordering the abort fires, cache is never written,\n // the next render re-seeks, gets aborted again — infinite loop, black canvas.\n this.#cachedVideoSample = videoSample;\n this.#cachedVideoSampleTimeMs = sourceTimeMs;\n this.unifiedVideoSeekTask.complete(videoSample);\n\n signal.throwIfAborted();\n } catch (error) {\n // Re-throw abort errors to properly handle cancellation.\n // If complete() was already called above, abort() is a no-op on the\n // already-resolved promise and does not clear .value.\n if (error instanceof DOMException && error.name === \"AbortError\") {\n this.unifiedVideoSeekTask.abort();\n throw error;\n }\n\n // For seek errors (NoSample, out of bounds, etc.), just clear cache\n // This allows subsequent frames to retry instead of being stuck\n console.warn(`Video seek error at ${sourceTimeMs}ms:`, error);\n this.#cachedVideoSample = undefined;\n this.#cachedVideoSampleTimeMs = sourceTimeMs;\n this.unifiedVideoSeekTask.complete(undefined);\n }\n } finally {\n this.#delayedLoadingState.clearLoading(\"prepare-frame\");\n }\n }\n\n /**\n * Synchronous render - paints cached video sample to canvas.\n * @implements FrameRenderable\n *\n * Note: The timeMs parameter is the root timegroup's time. We use\n * this.currentSourceTimeMs to match what prepareFrame cached.\n */\n renderFrame(_timeMs: number): void {\n // Use element's source time to match what was cached in prepareFrame\n const sourceTimeMs = this.currentSourceTimeMs;\n\n // Use cached sample if available for this source time\n if (this.#cachedVideoSampleTimeMs === sourceTimeMs && this.#cachedVideoSample) {\n try {\n const videoFrame = this.#cachedVideoSample.toVideoFrame();\n try {\n this.displayFrame(videoFrame, sourceTimeMs);\n } finally {\n videoFrame.close();\n }\n } catch {\n // VideoSample was evicted from SampleBuffer between prepareFrame and renderFrame.\n // Clear the cache so the next render cycle re-seeks.\n this.#cachedVideoSample = undefined;\n }\n }\n\n // Update animations if not in parent timegroup\n if (!this.parentTimegroup) {\n updateAnimations(this);\n }\n }\n\n /**\n * Fetch video sample for a given time.\n *\n * Uses a quality routing strategy:\n * - In production rendering: always use main (full quality) track\n * - In preview mode: try scrub track first for faster scrubbing, fall back to main\n * - If main track segment is already cached: use it (avoid redundant lower-quality fetch)\n */\n async #fetchVideoSampleForFrame(\n mediaEngine: MediaEngine,\n desiredSeekTimeMs: number,\n signal: AbortSignal,\n ): Promise<VideoSample | undefined> {\n const mainTrack = mediaEngine.tracks.video;\n\n // FIRST: Check if main quality content is already cached - use it if so\n if (mainTrack) {\n const mainSegmentId = mediaEngine.index.segmentAt(desiredSeekTimeMs, mainTrack);\n const mainCached =\n mainSegmentId !== undefined && mediaEngine.transport.isCached(mainSegmentId, mainTrack);\n if (mainCached) {\n this.#currentRenditionId = \"main\";\n return this.#getMainVideoSampleForFrame(mediaEngine, desiredSeekTimeMs, signal);\n }\n }\n\n // SECOND: In production rendering mode, always use main (full quality) track\n if (this.isInProductionRenderingMode()) {\n this.#currentRenditionId = \"main\";\n return this.#getMainVideoSampleForFrame(mediaEngine, desiredSeekTimeMs, signal);\n }\n\n // THIRD: In preview mode, try scrub track first for faster scrubbing\n const scrubTrack = mediaEngine.tracks.scrub;\n if (scrubTrack) {\n const scrubSample = await this.#getScrubVideoSampleForFrame(\n mediaEngine,\n desiredSeekTimeMs,\n signal,\n );\n if (scrubSample) {\n this.#currentRenditionId = \"scrub\";\n // Got scrub - schedule background quality upgrade\n this.#maybeScheduleQualityUpgrade(mediaEngine, desiredSeekTimeMs);\n return scrubSample;\n }\n }\n\n // FOURTH: Fall back to main video path\n this.#currentRenditionId = \"main\";\n return this.#getMainVideoSampleForFrame(mediaEngine, desiredSeekTimeMs, signal);\n }\n\n /**\n * Get scrub (low-resolution) video sample for fast preview scrubbing.\n * Used in preview mode for faster response during timeline scrubbing.\n */\n async #getScrubVideoSampleForFrame(\n mediaEngine: MediaEngine,\n desiredSeekTimeMs: number,\n signal: AbortSignal,\n ): Promise<VideoSample | undefined> {\n const scrubTrack = mediaEngine.tracks.scrub;\n if (!scrubTrack) {\n return undefined;\n }\n\n const segmentId = mediaEngine.index.segmentAt(desiredSeekTimeMs, scrubTrack);\n if (segmentId === undefined) {\n return undefined;\n }\n\n const scrubInput = await this.#scrubInputCache.getOrCreateInput(\n mediaEngine.src,\n segmentId,\n async () => {\n // Do NOT use the caller's signal — same reasoning as #getMainVideoSampleForFrame:\n // aborting this caller must not cancel the shared BufferedSeekingInput construction\n // for all other callers waiting on the same segment.\n let initSegment: ArrayBuffer | undefined;\n let mediaSegment: ArrayBuffer | undefined;\n\n try {\n [initSegment, mediaSegment] = await Promise.all([\n mediaEngine.transport.fetchInitSegment(scrubTrack),\n mediaEngine.transport.fetchMediaSegment(segmentId, scrubTrack),\n ]);\n } catch (error) {\n return undefined;\n }\n\n if (!initSegment || !mediaSegment) {\n return undefined;\n }\n\n const combinedBlob = new Blob([initSegment, mediaSegment]);\n const arrayBuffer = await combinedBlob.arrayBuffer();\n\n const { BufferedSeekingInput } = await import(\"./EFMedia/BufferedSeekingInput.js\");\n\n return new BufferedSeekingInput(arrayBuffer, {\n videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,\n audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,\n startTimeOffsetMs: scrubTrack.startTimeOffsetMs,\n });\n },\n );\n\n if (!scrubInput) {\n return undefined;\n }\n\n signal.throwIfAborted();\n\n const videoTrack = await scrubInput.getFirstVideoTrack();\n if (!videoTrack) {\n return undefined;\n }\n\n signal.throwIfAborted();\n\n return scrubInput.seek(videoTrack.id, desiredSeekTimeMs) as Promise<VideoSample | undefined>;\n }\n\n /**\n * Get main video sample for a given time.\n */\n async #getMainVideoSampleForFrame(\n mediaEngine: MediaEngine,\n desiredSeekTimeMs: number,\n signal: AbortSignal,\n ): Promise<VideoSample | undefined> {\n const videoTrack = mediaEngine.tracks.video;\n if (!videoTrack) {\n return undefined;\n }\n\n const segmentId = mediaEngine.index.segmentAt(desiredSeekTimeMs, videoTrack);\n if (segmentId === undefined) {\n return undefined;\n }\n\n const mainInput = await this.#mainVideoInputCache.getOrCreateInput(\n mediaEngine.src,\n segmentId,\n String(videoTrack.id),\n async () => {\n // Do NOT use the caller's signal here. This factory creates a shared\n // BufferedSeekingInput that will be reused by all callers for this\n // segment. If the caller aborts (e.g. seek away mid-upgrade), we must\n // still complete construction and cache the result — otherwise every\n // upgrade attempt that gets aborted restarts from scratch, and the\n // element is stuck on scrub quality indefinitely.\n let initSegment: ArrayBuffer | undefined;\n let mediaSegment: ArrayBuffer | undefined;\n\n try {\n const initP = mediaEngine.transport.fetchInitSegment(videoTrack);\n const mediaP = mediaEngine.transport.fetchMediaSegment(segmentId, videoTrack);\n [initSegment, mediaSegment] = await Promise.all([initP, mediaP]);\n } catch (error) {\n if (\n error instanceof Error &&\n (error.message.includes(\"401\") ||\n error.message.includes(\"UNAUTHORIZED\") ||\n error.message.includes(\"Failed to fetch\") ||\n error.message.includes(\"File not found\") ||\n error.message.includes(\"Media segment not found\") ||\n error.message.includes(\"Init segment not found\") ||\n error.message.includes(\"Track not found\"))\n ) {\n return undefined;\n }\n throw error;\n }\n\n if (!initSegment || !mediaSegment) {\n return undefined;\n }\n\n const combinedBlob = new Blob([initSegment, mediaSegment]);\n const arrayBuffer = await combinedBlob.arrayBuffer();\n\n const { BufferedSeekingInput } = await import(\"./EFMedia/BufferedSeekingInput.js\");\n\n return new BufferedSeekingInput(arrayBuffer, {\n videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,\n audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,\n startTimeOffsetMs: videoTrack.startTimeOffsetMs,\n });\n },\n );\n\n if (!mainInput) {\n return undefined;\n }\n\n signal.throwIfAborted();\n\n const videoTrackInfo = await mainInput.getFirstVideoTrack();\n if (!videoTrackInfo) {\n return undefined;\n }\n\n signal.throwIfAborted();\n\n const sample = (await mainInput.seek(videoTrackInfo.id, desiredSeekTimeMs)) as\n | VideoSample\n | undefined;\n return sample;\n }\n\n // ============================================================================\n // End FrameRenderable Implementation\n // ============================================================================\n\n /**\n * Delayed loading state manager for user feedback\n */\n #delayedLoadingState: DelayedLoadingState;\n\n /**\n * Loading state for user feedback\n */\n @state()\n loadingState = {\n isLoading: false,\n operation: null as LoadingState[\"operation\"],\n message: \"\",\n };\n\n constructor() {\n super();\n\n // Initialize delayed loading state with callback to update UI\n this.#delayedLoadingState = new DelayedLoadingState(100, (isLoading, message) => {\n this.setLoadingState(isLoading, null, message);\n });\n }\n\n protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {\n super.updated(changedProperties);\n\n // Invalidate upgrade state on src/fileId change\n if (changedProperties.has(\"src\") || changedProperties.has(\"fileId\")) {\n this.#cachedVideoSample = undefined;\n this.#cachedVideoSampleTimeMs = undefined;\n this.#mainVideoInputCache.clear();\n this.#scrubInputCache.clear();\n this.#invalidateUpgradeState(\"src-change\");\n this.#prewarmQualityUpgrade();\n }\n\n // Invalidate upgrade state on trim/source changes\n const durationAffectingProps = [\"_trimStartMs\", \"_trimEndMs\", \"_sourceInMs\", \"_sourceOutMs\"];\n const hasDurationChange = durationAffectingProps.some((prop) => changedProperties.has(prop));\n if (hasDurationChange) {\n this.#invalidateUpgradeState(\"bounds-change\");\n this.#prewarmQualityUpgrade();\n }\n\n // No need to clear canvas - displayFrame() overwrites it completely\n // and clearing creates blank frame gaps during transitions\n }\n\n /**\n * Eagerly load the media engine and pre-warm main-quality segments for the\n * start of this clip. Called when src/fileId or source bounds change so that\n * segments are already in cache by the time the element first becomes visible.\n *\n * Without pre-warming, quality upgrade only begins after the first scrub frame\n * is displayed, causing ~12 frames of blur at the cold-start of every clip.\n */\n #prewarmQualityUpgrade(): void {\n if (this.isInProductionRenderingMode()) return;\n if (!this.src && !this.fileId) return;\n\n this.getMediaEngine()\n .then((engine) => {\n if (!engine) return;\n // Use currentSourceTimeMs so the prewarm targets wherever the playhead\n // actually is, not just the clip start. Falls back to sourceInMs if the\n // element has no temporal context yet (e.g. not yet parented to a timegroup).\n const targetTimeMs = this.currentSourceTimeMs ?? this.sourceInMs ?? 0;\n this.#maybeScheduleQualityUpgrade(engine, targetTimeMs);\n })\n .catch(() => {});\n }\n\n render() {\n return html`\n <canvas ${ref(this.canvasRef)}></canvas>\n ${\n this.loadingState.isLoading\n ? html`<div class=\"loading-overlay\"><div class=\"loading-bar\"></div></div>`\n : \"\"\n }\n `;\n }\n\n get canvasElement() {\n const referencedCanvas = this.canvasRef.value;\n if (referencedCanvas) {\n return referencedCanvas;\n }\n const shadowCanvas = this.shadowRoot?.querySelector(\"canvas\");\n if (shadowCanvas) {\n return shadowCanvas;\n }\n return undefined;\n }\n\n /**\n * Start a delayed loading operation for testing\n */\n startDelayedLoading(\n operationId: string,\n message: string,\n options: { background?: boolean } = {},\n ): void {\n this.#delayedLoadingState.startLoading(operationId, message, options);\n }\n\n /**\n * Clear a delayed loading operation for testing\n */\n clearDelayedLoading(operationId: string): void {\n this.#delayedLoadingState.clearLoading(operationId);\n }\n\n /**\n * Set loading state for user feedback\n */\n private setLoadingState(\n isLoading: boolean,\n operation: LoadingState[\"operation\"] = null,\n message = \"\",\n ): void {\n this.loadingState = {\n isLoading,\n operation,\n message,\n };\n }\n\n /**\n * Paint the current video frame to canvas\n */\n paint(seekToMs: number, parentSpan?: any): void {\n const parentContext = parentSpan ? trace.setSpan(context.active(), parentSpan) : undefined;\n\n withSpanSync(\n \"video.paint\",\n {\n elementId: this.id || \"unknown\",\n seekToMs,\n src: this.src || \"none\",\n },\n parentContext,\n (span) => {\n const t0 = performance.now();\n\n // Check if we're in production rendering mode vs preview mode\n const isProductionRendering = this.isInProductionRenderingMode();\n const t1 = performance.now();\n span.setAttribute(\"isProductionRendering\", isProductionRendering);\n span.setAttribute(\"modeCheckMs\", t1 - t0);\n\n // Use cached video sample from prepareFrame\n try {\n const t2 = performance.now();\n const videoSample = this.#cachedVideoSample;\n span.setAttribute(\"hasVideoSample\", !!videoSample);\n span.setAttribute(\"valueAccessMs\", t2 - t1);\n\n if (videoSample) {\n const t3 = performance.now();\n const videoFrame = videoSample.toVideoFrame();\n const t4 = performance.now();\n span.setAttribute(\"toVideoFrameMs\", t4 - t3);\n\n try {\n const t5 = performance.now();\n this.displayFrame(videoFrame, seekToMs, span);\n const t6 = performance.now();\n span.setAttribute(\"displayFrameMs\", t6 - t5);\n } finally {\n videoFrame.close();\n }\n }\n } catch (error) {\n console.warn(\"Video pipeline error:\", error);\n }\n\n // EF_FRAMEGEN-aware rendering mode detection\n if (!isProductionRendering) {\n // Preview mode: always render\n // Visibility is handled by the phase/visibility system (CSS display:none)\n // No need to skip initialization frames - if element shouldn't be visible,\n // it will be hidden by CSS\n } else {\n // Production rendering mode: only render when EF_FRAMEGEN has explicitly started frame rendering\n // This prevents initialization frames before the actual render sequence begins\n if (!this.rootTimegroup) {\n span.setAttribute(\"skipped\", \"no-root-timegroup\");\n return;\n }\n\n if (!this.isFrameRenderingActive()) {\n span.setAttribute(\"skipped\", \"frame-rendering-not-active\");\n return; // Wait for EF_FRAMEGEN to start frame sequence\n }\n\n // Production mode: EF_FRAMEGEN has started frame sequence, proceed with rendering\n }\n\n const tEnd = performance.now();\n span.setAttribute(\"totalPaintMs\", tEnd - t0);\n },\n );\n }\n\n /**\n * Clear the canvas when element becomes inactive\n */\n clearCanvas(): void {\n if (!this.canvasElement) return;\n\n const ctx = this.canvasElement.getContext(\"2d\", {\n willReadFrequently: true,\n });\n if (ctx) {\n ctx.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);\n }\n }\n\n /**\n * Display a video frame on the canvas\n */\n displayFrame(frame: VideoFrame, seekToMs: number, parentSpan?: any): void {\n const parentContext = parentSpan ? trace.setSpan(context.active(), parentSpan) : undefined;\n\n withSpanSync(\n \"video.displayFrame\",\n {\n elementId: this.id || \"unknown\",\n seekToMs,\n format: frame.format || \"unknown\",\n width: frame.codedWidth,\n height: frame.codedHeight,\n },\n parentContext,\n (span) => {\n const t0 = performance.now();\n\n log(\"trace: displayFrame start\", {\n seekToMs,\n frameFormat: frame.format,\n });\n\n if (!this.canvasElement) {\n log(\"trace: displayFrame aborted - no canvas element\");\n throw new Error(\n `Frame display failed: Canvas element is not available at time ${seekToMs}ms. The video component may not be properly initialized.`,\n );\n }\n const t1 = performance.now();\n span.setAttribute(\"getCanvasMs\", Math.round((t1 - t0) * 100) / 100);\n\n const ctx = this.canvasElement.getContext(\"2d\", {\n willReadFrequently: true,\n });\n const t2 = performance.now();\n span.setAttribute(\"getCtxMs\", Math.round((t2 - t1) * 100) / 100);\n\n if (!ctx) {\n log(\"trace: displayFrame aborted - no canvas context\");\n throw new Error(\n `Frame display failed: Unable to get 2D canvas context at time ${seekToMs}ms. This may indicate a browser compatibility issue or canvas corruption.`,\n );\n }\n\n const frameWidth = frame.displayWidth;\n const frameHeight = frame.displayHeight;\n\n let resized = false;\n if (frameWidth && frameHeight) {\n const needsResize =\n frameWidth > this.canvasElement.width || frameHeight > this.canvasElement.height;\n if (needsResize) {\n const newWidth = Math.max(this.canvasElement.width, frameWidth);\n const newHeight = Math.max(this.canvasElement.height, frameHeight);\n log(\"trace: updating canvas dimensions\", {\n width: newWidth,\n height: newHeight,\n });\n this.canvasElement.width = newWidth;\n this.canvasElement.height = newHeight;\n resized = true;\n const t3 = performance.now();\n span.setAttribute(\"resizeMs\", Math.round((t3 - t2) * 100) / 100);\n }\n }\n span.setAttribute(\"canvasResized\", resized);\n\n if (frame.format === null) {\n log(\"trace: displayFrame aborted - null frame format\");\n throw new Error(\n `Frame display failed: Video frame has null format at time ${seekToMs}ms. This indicates corrupted or incompatible video data.`,\n );\n }\n\n const tDrawStart = performance.now();\n ctx.drawImage(frame, 0, 0, this.canvasElement.width, this.canvasElement.height);\n const tDrawEnd = performance.now();\n span.setAttribute(\"drawImageMs\", Math.round((tDrawEnd - tDrawStart) * 100) / 100);\n span.setAttribute(\"totalDisplayMs\", Math.round((tDrawEnd - t0) * 100) / 100);\n span.setAttribute(\"canvasWidth\", this.canvasElement.width);\n span.setAttribute(\"canvasHeight\", this.canvasElement.height);\n\n log(\"trace: frame drawn to canvas\", { seekToMs });\n },\n );\n }\n\n /**\n * Check if we're in production rendering mode (EF_FRAMEGEN active) vs preview mode\n */\n private isInProductionRenderingMode(): boolean {\n // Check if EF_RENDERING function exists and returns true (production rendering)\n if (typeof window.EF_RENDERING === \"function\") {\n return window.EF_RENDERING();\n }\n\n // Check if workbench is in rendering mode\n const workbench = document.querySelector(\"ef-workbench\") as any;\n if (workbench?.rendering) {\n return true;\n }\n\n // Check if EF_FRAMEGEN exists and has render options (indicates active rendering)\n if (window.EF_FRAMEGEN?.renderOptions) {\n return true;\n }\n\n // Default to preview mode\n return false;\n }\n\n /**\n * Check if EF_FRAMEGEN has explicitly started frame rendering (not just initialization)\n */\n private isFrameRenderingActive(): boolean {\n if (!window.EF_FRAMEGEN?.renderOptions) {\n return false;\n }\n\n // In production mode, only render when EF_FRAMEGEN has actually begun frame sequence\n // Check if we're past the initialization phase by looking for explicit frame control\n const renderOptions = window.EF_FRAMEGEN.renderOptions;\n const renderStartTime = renderOptions.encoderOptions.fromMs;\n const currentTime = this.rootTimegroup?.currentTimeMs || 0;\n\n // We're in active frame rendering if:\n // 1. currentTime >= renderStartTime (includes the starting frame)\n return currentTime >= renderStartTime;\n }\n\n /**\n * Get a decoded VideoFrame at a specific source media timestamp.\n * Returns a standard WebCodecs VideoFrame — caller MUST call .close() when done.\n *\n * Uses the same routing logic as the unified video system:\n * - \"auto\": main track for production rendering, follows normal routing otherwise\n * - \"scrub\": force low-res scrub track (for thumbnails)\n * - \"main\": force full-quality main track\n *\n * @param sourceTimeMs - Timestamp in source media coordinates (not timeline)\n * @param options - Quality and abort signal\n * @returns VideoFrame that the caller must close()\n * @public\n */\n async getVideoFrameAtSourceTime(\n sourceTimeMs: number,\n options: {\n quality?: \"auto\" | \"scrub\" | \"main\";\n signal?: AbortSignal;\n } = {},\n ): Promise<VideoFrame> {\n const { quality = \"auto\", signal: providedSignal } = options;\n\n const signal = providedSignal ?? new AbortController().signal;\n signal.throwIfAborted();\n\n this.playbackController?.suspendSelfRender();\n try {\n const mediaEngine = await this.getMediaEngine(signal);\n signal.throwIfAborted();\n\n if (!mediaEngine) {\n throw new Error(\"No media engine available for frame capture\");\n }\n\n const useMainTrack =\n quality === \"main\" || (quality === \"auto\" && this.isInProductionRenderingMode());\n\n let videoSample: any;\n\n const { BufferedSeekingInput } = await import(\"./EFMedia/BufferedSeekingInput.js\");\n signal.throwIfAborted();\n\n if (useMainTrack) {\n const videoTrack = mediaEngine.tracks.video;\n if (!videoTrack) {\n throw new Error(\"No video rendition available\");\n }\n\n const segmentId = mediaEngine.index.segmentAt(sourceTimeMs, videoTrack);\n if (segmentId === undefined) {\n throw new Error(`Cannot compute segment ID for time ${sourceTimeMs}ms`);\n }\n\n const seekingInput = await this.#mainVideoInputCache.getOrCreateInput(\n mediaEngine.src,\n segmentId,\n String(videoTrack.id),\n async () => {\n // Do NOT use the caller's signal — same reasoning as #getMainVideoSampleForFrame:\n // aborting this caller must not cancel the shared BufferedSeekingInput construction\n // for all other callers waiting on the same segment.\n const initP = mediaEngine.transport.fetchInitSegment(videoTrack);\n const mediaP = mediaEngine.transport.fetchMediaSegment(segmentId, videoTrack);\n initP.catch(() => {});\n mediaP.catch(() => {});\n const [initSegment, mediaSegment] = await Promise.all([initP, mediaP]);\n\n if (!initSegment || !mediaSegment) {\n return undefined;\n }\n\n const combinedBlob = new Blob([initSegment, mediaSegment]);\n const arrayBuffer = await combinedBlob.arrayBuffer();\n\n return new BufferedSeekingInput(arrayBuffer, {\n videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,\n audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,\n startTimeOffsetMs: videoTrack.startTimeOffsetMs,\n });\n },\n );\n signal.throwIfAborted();\n\n if (!seekingInput) {\n throw new Error(`Failed to fetch video segments for time ${sourceTimeMs}ms`);\n }\n\n const seekingVideoTrack = await seekingInput.getFirstVideoTrack();\n signal.throwIfAborted();\n\n if (!seekingVideoTrack) {\n throw new Error(\"No video track found in segment\");\n }\n\n videoSample = await seekingInput.seek(seekingVideoTrack.id, sourceTimeMs);\n signal.throwIfAborted();\n } else {\n const scrubTrack = mediaEngine.tracks.scrub;\n if (!scrubTrack) {\n return this.getVideoFrameAtSourceTime(sourceTimeMs, {\n quality: \"main\",\n signal,\n });\n }\n\n const segmentId = mediaEngine.index.segmentAt(sourceTimeMs, scrubTrack);\n\n if (segmentId === undefined) {\n throw new Error(`Cannot compute scrub segment ID for time ${sourceTimeMs}ms`);\n }\n\n const seekingInput = await this.#scrubInputCache.getOrCreateInput(\n mediaEngine.src,\n segmentId,\n async () => {\n // Do NOT use the caller's signal — same reasoning as #getScrubVideoSampleForFrame:\n // aborting this caller must not cancel the shared BufferedSeekingInput construction\n // for all other callers waiting on the same segment.\n const initP = mediaEngine.transport.fetchInitSegment(scrubTrack);\n const mediaP = mediaEngine.transport.fetchMediaSegment(segmentId, scrubTrack);\n initP.catch(() => {});\n mediaP.catch(() => {});\n const [initSegment, mediaSegment] = await Promise.all([initP, mediaP]);\n\n if (!initSegment || !mediaSegment) {\n return undefined;\n }\n\n const combinedBlob = new Blob([initSegment, mediaSegment]);\n const arrayBuffer = await combinedBlob.arrayBuffer();\n\n return new BufferedSeekingInput(arrayBuffer, {\n videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,\n audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,\n startTimeOffsetMs: scrubTrack.startTimeOffsetMs,\n });\n },\n );\n signal.throwIfAborted();\n\n if (!seekingInput) {\n return this.getVideoFrameAtSourceTime(sourceTimeMs, {\n quality: \"main\",\n signal,\n });\n }\n\n const seekingVideoTrack = await seekingInput.getFirstVideoTrack();\n signal.throwIfAborted();\n\n if (!seekingVideoTrack) {\n return this.getVideoFrameAtSourceTime(sourceTimeMs, {\n quality: \"main\",\n signal,\n });\n }\n\n videoSample = await seekingInput.seek(seekingVideoTrack.id, sourceTimeMs);\n signal.throwIfAborted();\n }\n\n if (!videoSample) {\n throw new Error(`No video sample found at ${sourceTimeMs}ms`);\n }\n\n return videoSample.toVideoFrame();\n } finally {\n this.playbackController?.resumeSelfRender();\n }\n }\n\n /**\n * Capture a video frame directly at a source media timestamp.\n * Designed for export/rendering.\n * Does NOT paint to the element's internal canvas.\n *\n * Uses the same routing logic as unified video system:\n * - \"auto\": main track for production rendering, follows normal routing otherwise\n * - \"scrub\": force low-res scrub track (for thumbnails)\n * - \"main\": force full-quality main track\n *\n * @param sourceTimeMs - Timestamp in source media coordinates (not timeline)\n * @param options - Capture options including quality and abort signal\n * @returns Frame data for serialization\n * @public\n */\n async captureFrameAtSourceTime(\n sourceTimeMs: number,\n options: {\n quality?: \"auto\" | \"scrub\" | \"main\";\n signal?: AbortSignal;\n } = {},\n ): Promise<{\n dataUrl: string;\n width: number;\n height: number;\n }> {\n const videoFrame = await this.getVideoFrameAtSourceTime(sourceTimeMs, options);\n\n try {\n options.signal?.throwIfAborted();\n\n const canvas = new OffscreenCanvas(videoFrame.codedWidth, videoFrame.codedHeight);\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) {\n throw new Error(\"Failed to get 2d context from OffscreenCanvas\");\n }\n ctx.drawImage(videoFrame, 0, 0);\n\n options.signal?.throwIfAborted();\n\n const blob = await canvas.convertToBlob({\n type: \"image/jpeg\",\n quality: 0.92,\n });\n options.signal?.throwIfAborted();\n\n const dataUrl = await new Promise<string>((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = () => resolve(reader.result as string);\n reader.onerror = reject;\n reader.readAsDataURL(blob);\n });\n options.signal?.throwIfAborted();\n\n return {\n dataUrl,\n width: videoFrame.codedWidth,\n height: videoFrame.codedHeight,\n };\n } finally {\n videoFrame.close();\n }\n }\n\n /**\n * Pre-fetch scrub segments for given timestamps.\n * Loads 30-second segments sequentially, emitting progress events.\n * This ensures scrub track is cached for fast thumbnail generation.\n *\n * @param timestamps - Array of timestamps (in ms) that will be captured\n * @param onProgress - Optional callback for loading progress\n * @param signal - Optional AbortSignal for cancellation\n * @returns Promise that resolves when all segments are cached\n * @public\n */\n async prefetchScrubSegments(\n timestamps: number[],\n onProgress?: (loaded: number, total: number, segmentTimeRange: [number, number]) => void,\n signal?: AbortSignal,\n ): Promise<void> {\n // Wait for media engine to be ready\n const mediaEngine = await this.getMediaEngine(signal);\n if (!mediaEngine) {\n log(\"prefetchScrubSegments: no media engine available\");\n return;\n }\n\n const scrubTrack = mediaEngine.tracks.scrub;\n if (!scrubTrack) {\n log(\"prefetchScrubSegments: no scrub rendition available\");\n return;\n }\n\n // Compute unique segment IDs needed for all timestamps\n const segmentIds = new Set<number>();\n for (const ts of timestamps) {\n const segmentId = mediaEngine.index.segmentAt(ts, scrubTrack);\n if (segmentId !== undefined) {\n segmentIds.add(segmentId);\n }\n }\n\n if (segmentIds.size === 0) {\n log(\"prefetchScrubSegments: no segments to prefetch\");\n return;\n }\n\n // Check if ANY segment is already cached (meaning the file is loaded).\n const firstSegmentId = Array.from(segmentIds)[0]!;\n if (mediaEngine.transport.isCached(firstSegmentId, scrubTrack)) {\n log(\"prefetchScrubSegments: scrub track already cached\");\n return;\n }\n\n log(`prefetchScrubSegments: fetching scrub track for ${segmentIds.size} segments...`);\n\n const durationMs = mediaEngine.durationMs || 0;\n this.dispatchEvent(\n new CustomEvent(\"scrub-segment-loading\", {\n detail: {\n segmentId: 0,\n timeRangeMs: [0, durationMs] as [number, number],\n loaded: 0,\n total: 1,\n status: \"loading\",\n },\n bubbles: true,\n composed: true,\n }),\n );\n\n const fetchSignal = signal ?? new AbortController().signal;\n try {\n await mediaEngine.transport.fetchMediaSegment(firstSegmentId, scrubTrack, fetchSignal);\n log(`prefetchScrubSegments: scrub track loaded`);\n } catch (error) {\n log(`prefetchScrubSegments: failed to load scrub track`, error);\n }\n\n this.dispatchEvent(\n new CustomEvent(\"scrub-segment-loading\", {\n detail: {\n segmentId: 0,\n timeRangeMs: [0, durationMs] as [number, number],\n loaded: 1,\n total: 1,\n status: \"loaded\",\n },\n bubbles: true,\n composed: true,\n }),\n );\n\n onProgress?.(1, 1, [0, durationMs]);\n log(`prefetchScrubSegments: complete`);\n }\n\n /**\n * Warm the scrub BufferedSeekingInput cache for all segments covering [fromMs, toMs].\n *\n * Unlike prefetchScrubSegments (which only warms the network layer), this method\n * constructs BufferedSeekingInput instances for each segment so that subsequent\n * scrub seeks within the range complete without a network round-trip or BSI\n * construction overhead.\n *\n * Returns a Promise that resolves after the range has been computed and segment\n * fetches have been kicked off (but before individual fetches complete).\n * Callers may await this or discard the promise — both are valid.\n */\n async warmScrubCacheForRange(fromMs: number, toMs: number, signal?: AbortSignal): Promise<void> {\n const mediaEngine = await this.getMediaEngine(signal);\n if (!mediaEngine) return;\n if (signal?.aborted) return;\n\n const scrubTrack = mediaEngine.tracks.scrub;\n if (!scrubTrack) return;\n\n const segments = mediaEngine.index.segmentsInRange(fromMs, toMs, scrubTrack);\n if (segments.length === 0) return;\n\n const { src } = mediaEngine;\n\n // Kick off all segment fetches concurrently. ScrubInputCache deduplicates\n // concurrent requests for the same segment, so this is safe.\n for (const { segmentId } of segments) {\n if (signal?.aborted) return;\n\n // getOrCreateInput is idempotent — returns immediately if already cached.\n const capturedSegmentId = segmentId;\n this.#scrubInputCache\n .getOrCreateInput(src, capturedSegmentId, async () => {\n if (signal?.aborted) return undefined;\n let initSegment: ArrayBuffer | undefined;\n let mediaSegment: ArrayBuffer | undefined;\n try {\n [initSegment, mediaSegment] = await Promise.all([\n mediaEngine.transport.fetchInitSegment(scrubTrack),\n mediaEngine.transport.fetchMediaSegment(capturedSegmentId, scrubTrack),\n ]);\n } catch {\n return undefined;\n }\n if (!initSegment || !mediaSegment) return undefined;\n\n const combinedBlob = new Blob([initSegment, mediaSegment]);\n const arrayBuffer = await combinedBlob.arrayBuffer();\n const { BufferedSeekingInput } = await import(\"./EFMedia/BufferedSeekingInput.js\");\n return new BufferedSeekingInput(arrayBuffer, {\n videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,\n audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,\n startTimeOffsetMs: scrubTrack.startTimeOffsetMs,\n });\n })\n .catch(() => {\n // Ignore prefetch errors — they're best-effort\n });\n }\n }\n\n /**\n * Maybe schedule quality upgrade tasks for this element.\n * Called when returning a scrub sample - checks if state has changed and submits tasks.\n */\n #maybeScheduleQualityUpgrade(mediaEngine: MediaEngine, sourceTimeMs: number): void {\n if (this.#renderingToVideo) return;\n if (this.rootTimegroup?.isRenderClone) return;\n const mainTrack = mediaEngine.tracks.video;\n if (!mainTrack) return;\n\n const segmentId = mediaEngine.index.segmentAt(sourceTimeMs, mainTrack);\n if (segmentId === undefined) return;\n\n const startTimeMs = this.startTimeMs;\n\n const stateChanged =\n this.#upgradeState === null ||\n this.#upgradeState.segmentId !== segmentId ||\n this.#upgradeState.startTimeMs !== startTimeMs;\n\n if (!stateChanged) {\n const currentTaskKey = `${this.#upgradeOwnerId}:${segmentId}:${mainTrack.id}`;\n const scheduler = this.rootTimegroup?.qualityUpgradeScheduler;\n if (scheduler?.isActive(currentTaskKey) || scheduler?.isPending(currentTaskKey)) {\n return;\n }\n this.rootTimegroup?.qualityUpgradeScheduler?.cancelForOwner(this.#upgradeOwnerId);\n this.#upgradeState = null;\n }\n\n const segments = this.#computeLookaheadSegments(mediaEngine, sourceTimeMs, mainTrack);\n if (segments.length === 0) return;\n\n // Capture src at task-creation time to guard the isCached closure against\n // stale mediaEngine references after a src change.\n const capturedSrc = mediaEngine.src;\n const tasks = segments.map((seg) => ({\n key: `${this.#upgradeOwnerId}:${seg.segmentId}:${mainTrack.id}`,\n fetch: async (signal: AbortSignal) => {\n await mediaEngine.transport.fetchInitSegment(mainTrack, signal);\n await mediaEngine.transport.fetchMediaSegment(seg.segmentId, mainTrack, signal);\n },\n isCached: () => {\n // Guard: if src changed since tasks were created, treat as not cached so\n // replaceForOwner does not skip re-queuing for the new video's segments.\n if (this.mediaEngineTask?.value?.src !== capturedSrc) return false;\n return mediaEngine.transport.isCached(seg.segmentId, mainTrack);\n },\n deadlineMs: seg.deadlineMs,\n owner: this.#upgradeOwnerId,\n }));\n\n const scheduler = this.rootTimegroup?.qualityUpgradeScheduler;\n if (scheduler) {\n scheduler.replaceForOwner(this.#upgradeOwnerId, tasks);\n } else {\n this.#fetchStandalone(tasks);\n }\n\n this.#upgradeState = {\n sourceTimeMs,\n segmentId,\n startTimeMs,\n submittedKeys: new Set(tasks.map((t) => t.key)),\n };\n }\n\n /**\n * Compute lookahead segments with deadlines in timeline space.\n */\n #computeLookaheadSegments(\n mediaEngine: MediaEngine,\n currentSourceTimeMs: number,\n track: import(\"./EFMedia/SegmentIndex.js\").TrackRef,\n maxLookahead: number = 5,\n ): { segmentId: number; deadlineMs: number }[] {\n const results: { segmentId: number; deadlineMs: number }[] = [];\n const playheadMs = this.rootTimegroup?.currentTimeMs ?? 0;\n const seen = new Set<number>();\n\n let probeTimeMs = currentSourceTimeMs;\n\n while (seen.size < maxLookahead) {\n const segmentId = mediaEngine.index.segmentAt(probeTimeMs, track);\n if (segmentId === undefined) break;\n if (seen.has(segmentId)) break;\n\n seen.add(segmentId);\n\n if (!mediaEngine.transport.isCached(segmentId, track)) {\n const offsetFromCurrentMs = probeTimeMs - currentSourceTimeMs;\n const deadlineMs = playheadMs + offsetFromCurrentMs;\n results.push({ segmentId, deadlineMs });\n }\n\n const thisDuration =\n track.segmentDurationsMs?.[segmentId - 1] ?? track.segmentDurationMs ?? 2000;\n probeTimeMs += thisDuration;\n }\n\n return results;\n }\n\n /**\n * Standalone mode: fetch tasks sequentially without scheduler.\n */\n #fetchStandalone(tasks: any[]): void {\n // Abort any previous standalone batch (e.g., after seek)\n this.#standaloneUpgradeController?.abort();\n this.#standaloneUpgradeController = new AbortController();\n const signal = this.#standaloneUpgradeController.signal;\n\n // Process sequentially\n (async () => {\n for (const task of tasks) {\n if (signal.aborted) break;\n try {\n await task.fetch(signal);\n } catch {\n // Continue on error\n }\n }\n // After all tasks complete, trigger re-render.\n // By the time the fetch completes the element is typically connected to a\n // timegroup, so prefer rootTimegroup.requestFrameRender(). Fall back to\n // playbackController for the standalone (no-timegroup) case.\n if (!signal.aborted) {\n if (this.rootTimegroup) {\n this.rootTimegroup.requestFrameRender();\n } else {\n this.playbackController?.runThrottledFrameTask().catch(() => {});\n }\n }\n })().catch(() => {});\n }\n\n /**\n * Invalidate upgrade state and optionally cancel queued tasks.\n */\n #invalidateUpgradeState(reason: \"src-change\" | \"bounds-change\" | \"disconnect\"): void {\n if (reason === \"src-change\" || reason === \"disconnect\") {\n // Full cancel - old tasks reference a stale media engine\n this.rootTimegroup?.qualityUpgradeScheduler?.cancelForOwner(this.#upgradeOwnerId);\n }\n // For bounds-change, don't cancel - old tasks may still be valid segments,\n // just with stale deadlines. replaceForOwner on next prepareFrame handles it.\n this.#upgradeState = null;\n }\n\n /**\n * Reset per-instance caches and rendition state. Allows tests to force\n * the scrub fallback path on the next render without clearing the shared\n * mediaCache (which races with in-flight fetches from other elements).\n * @public – test-only\n */\n clearInstanceCaches(): void {\n this.#cachedVideoSample = undefined;\n this.#cachedVideoSampleTimeMs = undefined;\n this.#currentRenditionId = undefined;\n this.#upgradeState = null;\n this.#mainVideoInputCache.clear();\n this.#scrubInputCache.clear();\n }\n\n /**\n * Returns scrub cache statistics for inspection in tests.\n * @public – test-only\n */\n getScrubCacheStats(): ReturnType<ScrubInputCache[\"getStats\"]> {\n return this.#scrubInputCache.getStats();\n }\n\n /**\n * Clean up resources when component is disconnected\n */\n disconnectedCallback(): void {\n super.disconnectedCallback();\n\n this.#cachedVideoSample = undefined;\n this.#cachedVideoSampleTimeMs = undefined;\n\n // Clean up delayed loading state\n this.#delayedLoadingState.clearAllLoading();\n\n // Cancel upgrade tasks (centralized or standalone)\n this.#invalidateUpgradeState(\"disconnect\");\n this.#standaloneUpgradeController?.abort();\n this.#standaloneUpgradeController = null;\n }\n\n didBecomeRoot() {\n super.didBecomeRoot();\n }\n didBecomeChild() {\n super.didBecomeChild();\n }\n\n /**\n * Get the natural dimensions of the video (coded width and height).\n * Returns null if the video hasn't loaded yet or canvas isn't available.\n *\n * @public\n */\n getNaturalDimensions(): { width: number; height: number } | null {\n const canvas = this.canvasElement;\n if (!canvas || canvas.width === 0 || canvas.height === 0) {\n return null;\n }\n return {\n width: canvas.width,\n height: canvas.height,\n };\n }\n\n /**\n * Render this video element to an MP4 using the direct video-to-video fast path.\n * Bypasses DOM serialization — decodes frames directly and re-encodes to MP4.\n * Respects trim, CSS filter, and opacity.\n *\n * @param options - Rendering options (fps, codec, bitrate, etc.)\n * @returns Promise resolving to video buffer (if returnBuffer), or undefined\n * @public\n */\n async renderToVideo(\n options?: import(\"../preview/renderTimegroupToVideo.types.js\").RenderToVideoOptions,\n ): Promise<Uint8Array | undefined> {\n this.#renderingToVideo = true;\n try {\n const { renderVideoToVideo } = await import(\"../preview/renderVideoToVideo.js\");\n return await renderVideoToVideo(this, options);\n } finally {\n this.#renderingToVideo = false;\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"ef-video\": EFVideo;\n }\n}\n"],"mappings":"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"}
@@ -0,0 +1,19 @@
1
+ import { AudioSample, VideoSample } from "mediabunny";
2
+
3
+ //#region src/elements/SampleBuffer.d.ts
4
+ type MediaSample = VideoSample | AudioSample;
5
+ declare class SampleBuffer {
6
+ private buffer;
7
+ private bufferSize;
8
+ constructor(bufferSize?: number);
9
+ push(sample: MediaSample): void;
10
+ clear(): void;
11
+ peek(): MediaSample | undefined;
12
+ find(desiredSeekTimeMs: number): MediaSample | undefined;
13
+ get length(): number;
14
+ get firstTimestamp(): number;
15
+ getContents(): MediaSample[];
16
+ }
17
+ //#endregion
18
+ export { MediaSample, SampleBuffer };
19
+ //# sourceMappingURL=SampleBuffer.d.ts.map
@@ -30,6 +30,14 @@ const lastAnimationCount = /* @__PURE__ */ new WeakMap();
30
30
  */
31
31
  const validatedAnimations = /* @__PURE__ */ new Set();
32
32
  /**
33
+ * Tracks animations that have already been taken under manual control.
34
+ * Once an animation is here, its playState is known to be "paused" or "idle" —
35
+ * both accept currentTime writes without preconditions and without causing reflow.
36
+ * This lets prepareAnimation skip cancel()/pause() on every subsequent frame.
37
+ */
38
+ const preparedAnimations = /* @__PURE__ */ new WeakSet();
39
+ const animationCache = /* @__PURE__ */ new WeakMap();
40
+ /**
33
41
  * Validates that an animation is still valid and controllable.
34
42
  * Animations become invalid when:
35
43
  * - They've been cancelled (idle state and not in getAnimations())
@@ -37,7 +45,6 @@ const validatedAnimations = /* @__PURE__ */ new Set();
37
45
  * - Their target is no longer in the DOM
38
46
  */
39
47
  const isAnimationValid = (animation, currentAnimations) => {
40
- if (animation.playState === "idle" && !currentAnimations.includes(animation)) return false;
41
48
  const effect = animation.effect;
42
49
  if (!effect) return false;
43
50
  if (effect instanceof KeyframeEffect) {
@@ -46,6 +53,8 @@ const isAnimationValid = (animation, currentAnimations) => {
46
53
  if (!target.isConnected) return false;
47
54
  }
48
55
  }
56
+ if (preparedAnimations.has(animation)) return true;
57
+ if (!currentAnimations.includes(animation)) return false;
49
58
  return true;
50
59
  };
51
60
  /**
@@ -113,6 +122,57 @@ const discoverAndTrackAnimations = (element, providedAnimations) => {
113
122
  };
114
123
  };
115
124
  /**
125
+ * Returns all tracked animations for an element and its subtree.
126
+ *
127
+ * Unlike `element.getAnimations({ subtree: true })`, this includes animations that
128
+ * have been cancelled by `prepareAnimation()` (which puts them in the `idle` play
129
+ * state, making them invisible to `getAnimations()`). Once `updateAnimations` takes
130
+ * control of a CSS animation it cancels it, so callers that need to seek those
131
+ * animations for side-effects (e.g. `EFMotionBlur` reading positions at t−shutterMs)
132
+ * must use this function instead of `getAnimations()`.
133
+ *
134
+ * Walks `element` and every descendant, collecting the union of all tracked sets.
135
+ * Returns an empty array when no animations have been tracked yet.
136
+ */
137
+ const getTrackedAnimationsForSubtree = (element) => {
138
+ const result = [];
139
+ const seen = /* @__PURE__ */ new Set();
140
+ const collect = (el) => {
141
+ const tracked = animationTracker.get(el);
142
+ if (tracked) {
143
+ for (const anim of tracked) if (!seen.has(anim)) {
144
+ seen.add(anim);
145
+ result.push(anim);
146
+ }
147
+ }
148
+ for (const child of el.children) collect(child);
149
+ };
150
+ collect(element);
151
+ return result;
152
+ };
153
+ /**
154
+ * Cancels all tracked animations for an element and removes them from tracking.
155
+ * Called when an element is hidden so paused WAAPI animations leave getAnimations(),
156
+ * preventing unbounded growth of getAnimations({subtree:true}) during scrubbing.
157
+ */
158
+ const cancelTrackedAnimations = (element) => {
159
+ const tracked = animationTracker.get(element);
160
+ if (tracked) {
161
+ for (const animation of tracked) {
162
+ animation.cancel();
163
+ preparedAnimations.delete(animation);
164
+ animationCache.delete(animation);
165
+ }
166
+ tracked.clear();
167
+ }
168
+ const subtreeAnims = element.getAnimations?.({ subtree: true });
169
+ if (subtreeAnims) for (const animation of subtreeAnims) {
170
+ animation.cancel();
171
+ preparedAnimations.delete(animation);
172
+ animationCache.delete(animation);
173
+ }
174
+ };
175
+ /**
116
176
  * Cleans up tracked animations when an element is disconnected.
117
177
  * This prevents memory leaks.
118
178
  */
@@ -431,11 +491,18 @@ const validateAnimationFillMode = (animation, timing) => {
431
491
  }
432
492
  };
433
493
  /**
434
- * Prepares animation for manual control by ensuring it's paused
494
+ * Prepares animation for manual control on first encounter.
495
+ *
496
+ * Reading animation.playState forces style recalculation in Chromium (layout thrash).
497
+ * Instead we track prepared animations in a WeakSet. On first encounter we optimistically
498
+ * cancel the animation — cancel() is safe on any state (paused/running/finished/idle)
499
+ * and leaves the animation in "idle", from which currentTime writes work freely.
500
+ * On subsequent frames the animation is already under our control so we skip this entirely.
435
501
  */
436
502
  const prepareAnimation = (animation) => {
437
- if (animation.playState === "finished") animation.cancel();
438
- else if (animation.playState === "running") animation.pause();
503
+ if (preparedAnimations.has(animation)) return;
504
+ animation.cancel();
505
+ preparedAnimations.add(animation);
439
506
  };
440
507
  /**
441
508
  * Maps element time to animation currentTime and sets it on the animation.
@@ -445,7 +512,6 @@ const prepareAnimation = (animation) => {
445
512
  */
446
513
  const mapAndSetAnimationTime = (animation, element, timing, effectiveDelay) => {
447
514
  const elementTime = element.ownCurrentTimeMs ?? 0;
448
- if (animation.playState === "running") animation.pause();
449
515
  const adjustedTime = elementTime - effectiveDelay;
450
516
  if (adjustedTime < 0) {
451
517
  if (timing.delay > 0) animation.currentTime = elementTime - (effectiveDelay - timing.delay);
@@ -469,28 +535,19 @@ const mapAndSetAnimationTime = (animation, element, timing, effectiveDelay) => {
469
535
  }
470
536
  };
471
537
  /**
472
- * Synchronizes a single animation with the timeline using the element as the time source.
473
- *
474
- * For animations in this element's subtree, always use this element as the time source.
475
- * This handles both animations directly on the temporal element and on its non-temporal children.
538
+ * Builds and caches per-animation data derived from immutable properties.
539
+ * Called once per animation on first synchronization; subsequent frames use the cache.
476
540
  */
477
- const synchronizeAnimation = (animation, element) => {
478
- const effect = animation.effect;
479
- if (!validateAnimationEffect(effect)) return;
541
+ const buildAnimationCache = (animation, effect, fallbackElement) => {
480
542
  const timing = extractAnimationTiming(effect);
481
- if (timing.duration <= 0) {
482
- animation.currentTime = 0;
483
- return;
484
- }
485
- validateAnimationFillMode(animation, timing);
486
543
  const target = effect.target;
487
- let timeSource = element;
488
- if (target && target instanceof HTMLElement) {
544
+ let timeSource = null;
545
+ if (target instanceof HTMLElement) {
489
546
  const nearestTimegroup = target.closest("ef-timegroup");
490
547
  if (nearestTimegroup && isEFTemporal(nearestTimegroup)) timeSource = nearestTimegroup;
491
548
  }
492
- let staggerElement = timeSource;
493
- if (target && target instanceof HTMLElement) {
549
+ let staggerElement = null;
550
+ if (target instanceof HTMLElement) {
494
551
  const targetAsAnimatable = target;
495
552
  if (supportsStaggerOffset(targetAsAnimatable)) staggerElement = targetAsAnimatable;
496
553
  else {
@@ -498,8 +555,36 @@ const synchronizeAnimation = (animation, element) => {
498
555
  if (parentSegment && supportsStaggerOffset(parentSegment)) staggerElement = parentSegment;
499
556
  }
500
557
  }
501
- const effectiveDelay = calculateEffectiveDelay(timing.delay, staggerElement);
502
- mapAndSetAnimationTime(animation, timeSource, timing, effectiveDelay);
558
+ const resolvedStagger = staggerElement ?? timeSource ?? fallbackElement;
559
+ const effectiveDelay = calculateEffectiveDelay(timing.delay, resolvedStagger);
560
+ const data = {
561
+ timing,
562
+ timeSource,
563
+ staggerElement,
564
+ effectiveDelay
565
+ };
566
+ animationCache.set(animation, data);
567
+ validateAnimationFillMode(animation, timing);
568
+ return data;
569
+ };
570
+ /**
571
+ * Synchronizes a single animation with the timeline using the element as the time source.
572
+ *
573
+ * Timing, time-source, and stagger lookups are cached per animation — they are derived
574
+ * from immutable properties (keyframe timing, DOM parent chain) and never change during
575
+ * the lifetime of an animation.
576
+ */
577
+ const synchronizeAnimation = (animation, element) => {
578
+ const effect = animation.effect;
579
+ if (!validateAnimationEffect(effect)) return;
580
+ let cached = animationCache.get(animation);
581
+ if (!cached) cached = buildAnimationCache(animation, effect, element);
582
+ const { timing } = cached;
583
+ if (timing.duration <= 0) {
584
+ animation.currentTime = 0;
585
+ return;
586
+ }
587
+ mapAndSetAnimationTime(animation, cached.timeSource ?? element, timing, cached.effectiveDelay);
503
588
  };
504
589
  /**
505
590
  * Coordinates animations for a single element and its subtree, using the element as the time source.
@@ -516,8 +601,10 @@ const coordinateElementAnimations = (element, providedAnimations) => {
516
601
  const { tracked: trackedAnimations, current: currentAnimations } = discoverAndTrackAnimations(element, providedAnimations);
517
602
  for (const animation of trackedAnimations) {
518
603
  if (!isAnimationValid(animation, currentAnimations)) continue;
604
+ const wasFinished = animation.playState === "finished";
519
605
  prepareAnimation(animation);
520
- synchronizeAnimation(animation, element);
606
+ const playStateAfter = animation.playState;
607
+ if (!(wasFinished && playStateAfter === "idle")) synchronizeAnimation(animation, element);
521
608
  }
522
609
  };
523
610
  /**
@@ -530,6 +617,7 @@ const applyVisualState = (element, state) => {
530
617
  element.style.setProperty(PROGRESS_PROPERTY, `${state.progress}`);
531
618
  if (!state.isVisible) {
532
619
  element.style.setProperty("display", "none");
620
+ cancelTrackedAnimations(element);
533
621
  return;
534
622
  }
535
623
  element.style.removeProperty("display");
@@ -609,11 +697,14 @@ const evaluateElementState = (element) => {
609
697
  * 4. Apply visual state (update CSS and display based on phase and policies)
610
698
  */
611
699
  const updateAnimations = (element) => {
612
- const allAnimations = element.getAnimations({ subtree: true });
613
700
  const rootContext = evaluateElementState(element);
614
701
  const timelineTimeMs = (element.rootTimegroup ?? element).currentTimeMs;
615
702
  const { elements: collectedElements, pruned } = deepGetTemporalElements(element, timelineTimeMs);
616
- for (const prunedElement of pruned) prunedElement.style.setProperty("display", "none");
703
+ for (const prunedElement of pruned) {
704
+ prunedElement.style.setProperty("display", "none");
705
+ cancelTrackedAnimations(prunedElement);
706
+ }
707
+ const allAnimations = element.getAnimations({ subtree: true });
617
708
  const childContexts = [];
618
709
  for (const temporalElement of collectedElements) if (!pruned.has(temporalElement)) childContexts.push(evaluateElementState(temporalElement));
619
710
  const visibleChildContexts = [];
@@ -645,8 +736,22 @@ const updateAnimations = (element) => {
645
736
  for (const context of childContexts) applyVisualState(context.element, context.state);
646
737
  synchronizeSvgAnimations(element);
647
738
  synchronizeMediaElements(element);
739
+ const motionBlurElements = element.querySelectorAll("ef-motionblur");
740
+ for (const mb of motionBlurElements) {
741
+ let hidden = false;
742
+ let node = mb.parentElement;
743
+ while (node) {
744
+ if (node.style?.display === "none") {
745
+ hidden = true;
746
+ break;
747
+ }
748
+ node = node.parentElement;
749
+ }
750
+ if (hidden) continue;
751
+ mb.sample?.();
752
+ }
648
753
  };
649
754
 
650
755
  //#endregion
651
- export { cleanupTrackedAnimations, updateAnimations };
756
+ export { cleanupTrackedAnimations, getTrackedAnimationsForSubtree, updateAnimations };
652
757
  //# sourceMappingURL=updateAnimations.js.map