@editframe/elements 0.17.6-beta.0 → 0.18.3-beta.0

package/dist/elements/EFVideo.js

@@ -1,17 +1,29 @@
 import { EFMedia } from "./EFMedia.js";
-import { DelayedLoadingState } from "../DelayedLoadingState.js";
 import { TWMixin } from "../gui/TWMixin2.js";
-import { ScrubTrackManager } from "../ScrubTrackManager.js";
-import { printTaskStatus } from "./printTaskStatus.js";
+import { DelayedLoadingState } from "../DelayedLoadingState.js";
+import { makeVideoBufferTask } from "./EFMedia/videoTasks/makeVideoBufferTask.js";
+import { makeVideoInitSegmentFetchTask } from "./EFMedia/videoTasks/makeVideoInitSegmentFetchTask.js";
+import { makeVideoInputTask } from "./EFMedia/videoTasks/makeVideoInputTask.js";
+import { makeVideoSeekTask } from "./EFMedia/videoTasks/makeVideoSeekTask.js";
+import { makeVideoSegmentFetchTask } from "./EFMedia/videoTasks/makeVideoSegmentFetchTask.js";
+import { makeVideoSegmentIdTask } from "./EFMedia/videoTasks/makeVideoSegmentIdTask.js";
 import { Task } from "@lit/task";
 import debug from "debug";
 import { css, html } from "lit";
-import { customElement, state } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 import _decorate from "@oxc-project/runtime/helpers/decorate";
-import { VideoAsset } from "@editframe/assets/EncodedAsset.js";
 import { createRef, ref } from "lit/directives/ref.js";
 const log = debug("ef:elements:EFVideo");
 let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
+	static get observedAttributes() {
+		const parentAttributes = EFMedia.observedAttributes || [];
+		return [
+			...parentAttributes,
+			"video-buffer-duration",
+			"max-video-buffer-fetches",
+			"enable-video-buffering"
+		];
+	}
 	static {
 		this.styles = [css`
       :host {
@@ -76,7 +88,15 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 	constructor() {
 		super();
 		this.canvasRef = createRef();
-		this.lastSeekTimeMs = 0;
+		this.videoBufferDurationMs = 6e4;
+		this.maxVideoBufferFetches = 2;
+		this.enableVideoBuffering = true;
+		this.videoSegmentIdTask = makeVideoSegmentIdTask(this);
+		this.videoInitSegmentFetchTask = makeVideoInitSegmentFetchTask(this);
+		this.videoSegmentFetchTask = makeVideoSegmentFetchTask(this);
+		this.videoInputTask = makeVideoInputTask(this);
+		this.videoSeekTask = makeVideoSeekTask(this);
+		this.videoBufferTask = makeVideoBufferTask(this);
 		this.loadingState = {
 			isLoading: false,
 			operation: null,
@@ -87,71 +107,28 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 			onError: (error) => {
 				console.error("frameTask error", error);
 			},
+			onComplete: () => {},
 			task: async ([_desiredSeekTimeMs], { signal }) => {
-				await this.seekTask.taskComplete;
-				if (signal.aborted) return;
-				await this.fragmentIndexTask.taskComplete;
-				if (signal.aborted) return;
-				await this.mediaSegmentsTask.taskComplete;
-				if (signal.aborted) return;
-				await this.videoAssetTask.taskComplete;
-				if (signal.aborted) return;
+				await this.videoSeekTask.taskComplete;
 				await this.paintTask.taskComplete;
 				if (signal.aborted) return;
 			}
 		});
-		this.videoAssetTask = new Task(this, {
-			autoRun: true,
-			args: () => [this.effectiveMode, this.mediaSegmentsTask.value],
-			onError: (error) => {
-				console.error("videoAsset task error", error);
-			},
-			task: async ([mode, _files], { signal: _signal }) => {
-				await this.mediaSegmentsTask.taskComplete;
-				if (_signal.aborted) return void 0;
-				await this.fragmentIndexTask.taskComplete;
-				if (_signal.aborted) return void 0;
-				const files = this.mediaSegmentsTask.value;
-				const fragmentIndex = this.fragmentIndexTask.value;
-				if (!files) {
-					log("trace: videoAsset task aborted - no files");
-					throw new Error(`Video asset creation failed: No media segment files available. This indicates a problem with media segment loading for source: "${this.src}"`);
-				}
-				const computedVideoTrackId = Object.values(fragmentIndex ?? {}).find((track) => track.type === "video")?.track;
-				if (computedVideoTrackId === void 0) {
-					log("trace: videoAsset task aborted - no video track");
-					throw new Error(`Video asset creation failed: No video track found in media segments. Source may not contain video content: "${this.src}"`);
-				}
-				const videoFile = files[computedVideoTrackId];
-				if (!videoFile) {
-					log("trace: videoAsset task aborted - no video file");
-					throw new Error(`Video asset creation failed: Video file not available for track ${computedVideoTrackId}. Media segment loading may have failed for source: "${this.src}"`);
-				}
-				const existingAsset = this.videoAssetTask.value;
-				if (existingAsset) {
-					for (const frame of existingAsset?.decodedFrames || []) frame.close();
-					const decoder = existingAsset?.videoDecoder;
-					if (decoder && decoder.state !== "closed") decoder.close();
-				}
-				if (_signal.aborted) return void 0;
-				log("trace: creating video asset", { mode });
-				const videoTrackFragmentIndex = Object.values(fragmentIndex ?? {}).find((track) => track.type === "video");
-				const startTimeOffsetMs = Number((videoTrackFragmentIndex?.startTimeOffsetMs ?? 0).toFixed(5));
-				if (mode === "jit-transcode") {
-					const result$1 = await VideoAsset.createFromCompleteMP4(`jit-segment-${computedVideoTrackId}`, videoFile, { startTimeOffsetMs });
-					return result$1;
-				}
-				const result = await VideoAsset.createFromReadableStream("video.mp4", videoFile.stream(), videoFile, { startTimeOffsetMs });
-				return result;
-			}
-		});
 		this.paintTask = new Task(this, {
 			args: () => [this.desiredSeekTimeMs],
 			onError: (error) => {
 				console.error("paintTask error", error);
 			},
+			onComplete: () => {},
 			task: async ([_seekToMs], { signal }) => {
+				await this.videoSeekTask.taskComplete;
 				const isProductionRendering = this.isInProductionRenderingMode();
+				const sample = this.videoSeekTask.value;
+				if (sample) {
+					const videoFrame = sample.toVideoFrame();
+					this.displayFrame(videoFrame, _seekToMs);
+					videoFrame.close();
+				}
 				if (!isProductionRendering) {
 					if (!this.rootTimegroup || this.rootTimegroup.currentTimeMs === 0 && this.desiredSeekTimeMs === 0) return;
 				} else {
@@ -159,83 +136,6 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 					if (!this.isFrameRenderingActive()) return;
 				}
 				if (signal.aborted) return;
-				await this.mediaSegmentsTask.taskComplete;
-				if (signal.aborted) return;
-				await this.videoAssetTask.taskComplete;
-				if (signal.aborted) return;
-				const videoAsset = this.videoAssetTask.value;
-				const currentSeekToMs = this.desiredSeekTimeMs;
-				if (!videoAsset) {
-					log("trace: paintTask aborted - no video asset");
-					throw new Error(`Frame rendering failed: No video asset available. This may indicate a problem with video loading or an invalid source: "${this.src}"`);
-				}
-				if (this.#decoderNeedsReset) try {
-					if (videoAsset?.videoDecoder) videoAsset.configureDecoder();
-					else console.warn("No video decoder available for reset");
-					this.#decoderNeedsReset = false;
-				} catch (resetError) {
-					console.error("reset error", resetError);
-					throw new Error(`Frame rendering failed: Unable to reset video decoder after previous error. Decoder state: ${resetError instanceof Error ? resetError.message : "Unknown error"}. Try refreshing the page or reloading the video.`);
-				}
-				if (signal.aborted) return;
-				if (this.#decoderLock) return;
-				try {
-					this.#decoderLock = true;
-					const currentVideoAsset = this.videoAssetTask.value;
-					if (videoAsset !== currentVideoAsset) return;
-					const decoderState = videoAsset?.videoDecoder?.state;
-					if (decoderState === "closed") return;
-					if (this.effectiveMode === "jit-transcode" && this.scrubTrackManager) {
-						const shouldUseScrub = this.scrubTrackManager.shouldUseScrubTrack(currentSeekToMs);
-						const isFastSeeking = this.scrubTrackManager.isFastSeeking(this.lastSeekTimeMs, currentSeekToMs);
-						if (shouldUseScrub || isFastSeeking) try {
-							this.startDelayedLoading("scrub-segment-load", "Loading scrub segment...");
-							const scrubFrame = await this.scrubTrackManager.getScrubFrame(currentSeekToMs);
-							if (scrubFrame && this.canvasElement) {
-								this.scrubTrackManager.recordCacheMiss();
-								this.lastSeekTimeMs = currentSeekToMs;
-								this.clearDelayedLoading("scrub-segment-load");
-								return this.displayFrame(scrubFrame, currentSeekToMs);
-							}
-							console.warn("Scrub track returned null frame, falling back to normal video");
-							this.clearDelayedLoading("scrub-segment-load");
-							this.startDelayedLoading("video-segment-fallback", "Loading high quality video...");
-						} catch (error) {
-							this.clearDelayedLoading("scrub-segment-load");
-							console.warn("Scrub track failed, falling back to normal video:", error);
-							this.startDelayedLoading("video-segment-fallback", "Loading high quality video...");
-						}
-						else this.scrubTrackManager?.recordCacheHit();
-					}
-					const shouldShowLoading = !this.delayedLoadingState.isLoading && (this.effectiveMode !== "asset" || !videoAsset);
-					if (shouldShowLoading) this.startDelayedLoading("video-segment", "Loading video segment...");
-					this.lastSeekTimeMs = currentSeekToMs;
-					const result = await this.renderNormalVideo(videoAsset, currentSeekToMs);
-					this.clearDelayedLoading("video-segment");
-					this.clearDelayedLoading("video-segment-fallback");
-					return result;
-				} catch (error) {
-					this.clearDelayedLoading("scrub-segment-load");
-					this.clearDelayedLoading("video-segment");
-					this.clearDelayedLoading("video-segment-fallback");
-					if (error instanceof Error) {
-						if (error.name === "DataError" && error.message.includes("key frame is required")) {
-							console.warn("Decoder reset during VideoAsset due to key frame requirement");
-							this.#decoderNeedsReset = true;
-							if (this.effectiveMode === "jit-transcode") this.requestUpdate();
-							throw error;
-						}
-						if (error.name === "AbortError") throw new Error("Frame rendering cancelled: Operation was aborted, likely due to a new seek request or component unmounting.");
-						if (error.message.includes("VideoAsset decoder closed") || error.message.includes("recreation in progress")) return;
-						if (error.name === "InvalidStateError" && error.message.includes("closed codec")) return;
-						console.warn("Decoder reset during VideoAsset recreation", error);
-						this.#decoderNeedsReset = true;
-						throw error;
-					}
-					throw new Error(`Frame rendering failed: Unknown error during video rendering at ${currentSeekToMs}ms. Error: ${String(error)}`);
-				} finally {
-					this.#decoderLock = false;
-				}
 			}
 		});
 		this.delayedLoadingState = new DelayedLoadingState(250, (isLoading, message) => {
@@ -261,46 +161,8 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 	get canvasElement() {
 		return this.canvasRef.value;
 	}
-	#decoderLock = false;
-	#decoderNeedsReset = false;
-	get frameTaskStatus() {
-		return {
-			desiredSeekTimeMs: this.desiredSeekTimeMs,
-			fragmentIndexTask: printTaskStatus(this.fragmentIndexTask.status),
-			seekTask: printTaskStatus(this.seekTask.status),
-			mediaSegmentsTask: printTaskStatus(this.mediaSegmentsTask.status),
-			assetSegmentLoader: printTaskStatus(this.assetSegmentLoader.status),
-			assetSegmentKeysTask: printTaskStatus(this.assetSegmentKeysTask.status),
-			assetInitSegmentsTask: printTaskStatus(this.assetInitSegmentsTask.status),
-			videoAssetTask: printTaskStatus(this.videoAssetTask.status),
-			paintTask: printTaskStatus(this.paintTask.status),
-			frameTask: printTaskStatus(this.frameTask.status)
-		};
-	}
-	#lastVideoAsset = null;
 	updated(changedProperties) {
 		super.updated(changedProperties);
-		const currentVideoAsset = this.videoAssetTask.value;
-		if (currentVideoAsset !== this.#lastVideoAsset) this.#lastVideoAsset = currentVideoAsset;
-		this.initializeScrubTrackManager();
-	}
-	/**
-	* Initialize scrub track manager if needed
-	*/
-	async initializeScrubTrackManager() {
-		const mode = this.effectiveMode;
-		if (mode === "jit-transcode" && this.src && !this.scrubTrackManager) {
-			const jitClient = this.jitClientTask.value;
-			if (jitClient) try {
-				this.scrubTrackManager = new ScrubTrackManager(this.src, jitClient, { onLoadingStateChange: (isLoading, message) => {
-					if (isLoading) this.startDelayedLoading("scrub-segment", message || "Loading scrub track...");
-					else this.clearDelayedLoading("scrub-segment");
-				} });
-				await this.scrubTrackManager.initialize();
-			} catch (error) {
-				console.warn("Failed to initialize scrub track manager:", error);
-			}
-		}
 	}
 	/**
 	* Start a delayed loading operation for testing
@@ -325,34 +187,6 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 		};
 	}
 	/**
-	* Render normal video using existing logic
-	*/
-	async renderNormalVideo(videoAsset, seekToMs) {
-		let targetSeekTimeSeconds = seekToMs / 1e3;
-		try {
-			const currentVideoAsset = this.videoAssetTask.value;
-			if (videoAsset !== currentVideoAsset) throw new Error("VideoAsset decoder closed during seek - recreation in progress");
-			const decoderState = videoAsset?.videoDecoder?.state;
-			if (decoderState === "closed") throw new Error("VideoAsset decoder closed during seek - recreation in progress");
-			if (this.effectiveMode === "jit-transcode") targetSeekTimeSeconds %= 2;
-			const frame = await videoAsset.seekToTime(targetSeekTimeSeconds);
-			if (frame) {
-				const finalVideoAsset = this.videoAssetTask.value;
-				if (videoAsset !== finalVideoAsset) {
-					frame.close();
-					throw new Error("VideoAsset decoder closed during seek - recreation in progress");
-				}
-				const finalSeekToMs = this.desiredSeekTimeMs;
-				return this.displayFrame(frame, finalSeekToMs);
-			}
-			log("trace: no frame returned from seekToTime");
-			throw new Error(`Frame rendering failed: No frame available at time ${seekToMs}ms (${targetSeekTimeSeconds}s). This may indicate seeking beyond video duration, corrupted video data, or an incompatible video format.`);
-		} catch (error) {
-			if (error instanceof Error && (error.message.includes("VideoAsset decoder closed") || error.message.includes("recreation in progress"))) throw error;
-			throw error;
-		}
-	}
-	/**
 	* Display a video frame on the canvas
 	*/
 	displayFrame(frame, seekToMs) {
@@ -383,7 +217,7 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 			log("trace: displayFrame aborted - null frame format");
 			throw new Error(`Frame display failed: Video frame has null format at time ${seekToMs}ms. This indicates corrupted or incompatible video data.`);
 		}
-		log("trace: drawing frame to canvas");
+		log("trace: drawing frame to canvas", frame.timestamp / 1e3);
 		ctx.drawImage(frame, 0, 0, this.canvasElement.width, this.canvasElement.height);
 		log("trace: frame drawn to canvas", { seekToMs });
 		return seekToMs;
@@ -415,6 +249,60 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 		return this.scrubTrackManager?.getCacheStats() || null;
 	}
 	/**
+	* Effective mode - always returns "asset" for EFVideo
+	*/
+	get effectiveMode() {
+		return "asset";
+	}
+	/**
+	* Legacy getter for asset index loader (maps to mediaEngine task)
+	*/
+	get assetIndexLoader() {
+		return this.mediaEngineTask;
+	}
+	/**
+	* Legacy getter for fragment index task (maps to videoSegmentIdTask)
+	*/
+	get fragmentIndexTask() {
+		return this.videoSegmentIdTask;
+	}
+	/**
+	* Legacy getter for seek task (maps to videoSeekTask)
+	*/
+	get seekTask() {
+		return this.videoSeekTask;
+	}
+	/**
+	* Legacy getter for media segments task (maps to videoSegmentFetchTask)
+	*/
+	get mediaSegmentsTask() {
+		return this.videoSegmentFetchTask;
+	}
+	/**
+	* Legacy getter for asset segment keys task (maps to videoSegmentIdTask)
+	*/
+	get assetSegmentKeysTask() {
+		return this.videoSegmentIdTask;
+	}
+	/**
+	* Legacy getter for asset init segments task (maps to videoInitSegmentFetchTask)
+	*/
+	get assetInitSegmentsTask() {
+		return this.videoInitSegmentFetchTask;
+	}
+	/**
+	* Legacy getter for asset segment loader (maps to videoSegmentFetchTask)
+	*/
+	get assetSegmentLoader() {
+		return this.videoSegmentFetchTask;
+	}
+	/**
+	* Legacy getter for video asset task (maps to videoBufferTask)
+	*/
+	get videoAssetTask() {
+		return this.videoBufferTask;
+	}
+	/**
 	* Clean up resources when component is disconnected
 	*/
 	disconnectedCallback() {
@@ -423,6 +311,18 @@ let EFVideo = class EFVideo$1 extends TWMixin(EFMedia) {
 		this.delayedLoadingState.clearAllLoading();
 	}
 };
+_decorate([property({
+	type: Number,
+	attribute: "video-buffer-duration"
+})], EFVideo.prototype, "videoBufferDurationMs", void 0);
+_decorate([property({
+	type: Number,
+	attribute: "max-video-buffer-fetches"
+})], EFVideo.prototype, "maxVideoBufferFetches", void 0);
+_decorate([property({
+	type: Boolean,
+	attribute: "enable-video-buffering"
+})], EFVideo.prototype, "enableVideoBuffering", void 0);
 _decorate([state()], EFVideo.prototype, "loadingState", void 0);
 EFVideo = _decorate([customElement("ef-video")], EFVideo);
 export { EFVideo };

package/dist/elements/EFWaveform.js

@@ -1,9 +1,9 @@
 import { EF_INTERACTIVE } from "../EF_INTERACTIVE.js";
+import { EF_RENDERING } from "../EF_RENDERING.js";
 import { EFTemporal } from "./EFTemporal.js";
 import { TargetController } from "./TargetController.js";
 import { TWMixin } from "../gui/TWMixin2.js";
 import { CrossUpdateController } from "./CrossUpdateController.js";
-import { EF_RENDERING } from "../EF_RENDERING.js";
 import { Task } from "@lit/task";
 import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
@@ -80,8 +80,8 @@ let EFWaveform = class EFWaveform$1 extends EFTemporal(TWMixin(LitElement)) {
 	static {
 		this.styles = css`
       :host {
-        display: block;
         all: inherit;
+        display: block;
         position: relative;
       }
 

package/dist/elements/SampleBuffer.d.ts

@@ -0,0 +1,14 @@
+import { AudioSample, VideoSample } from 'mediabunny';
+export type MediaSample = VideoSample | AudioSample;
+export declare class SampleBuffer {
+    private buffer;
+    private bufferSize;
+    constructor(bufferSize?: number);
+    push(sample: MediaSample): void;
+    clear(): void;
+    peek(): MediaSample | undefined;
+    find(desiredSeekTimeMs: number): MediaSample | undefined;
+    get length(): number;
+    get firstTimestamp(): number;
+    getContents(): MediaSample[];
+}

package/dist/elements/SampleBuffer.js

@@ -0,0 +1,52 @@
+var SampleBuffer = class {
+	constructor(bufferSize = 10) {
+		this.buffer = [];
+		this.bufferSize = bufferSize;
+	}
+	push(sample) {
+		const currentBuffer = [...this.buffer];
+		currentBuffer.push(sample);
+		if (currentBuffer.length > this.bufferSize) {
+			const shifted = currentBuffer.shift();
+			if (shifted) try {
+				shifted.close();
+			} catch (_error) {}
+		}
+		this.buffer = currentBuffer;
+	}
+	clear() {
+		const toClose = this.buffer;
+		this.buffer = [];
+		for (const sample of toClose) try {
+			sample.close();
+		} catch (_error) {}
+	}
+	peek() {
+		const currentBuffer = this.buffer;
+		return currentBuffer[0];
+	}
+	find(desiredSeekTimeMs) {
+		const currentBuffer = [...this.buffer];
+		if (currentBuffer.length === 0) return void 0;
+		const roundToMicroseconds = (timeMs) => Math.round(timeMs * 1e3) / 1e3;
+		const targetTimeMs = roundToMicroseconds(desiredSeekTimeMs);
+		for (const sample of currentBuffer) {
+			const sampleStartMs = roundToMicroseconds((sample.timestamp || 0) * 1e3);
+			const sampleDurationMs = roundToMicroseconds((sample.duration || 0) * 1e3);
+			const sampleEndMs = sampleStartMs + sampleDurationMs;
+			if (targetTimeMs >= sampleStartMs && targetTimeMs < sampleEndMs) return sample;
+		}
+		return void 0;
+	}
+	get length() {
+		return this.buffer.length;
+	}
+	get firstTimestamp() {
+		const currentBuffer = this.buffer;
+		return currentBuffer[0]?.timestamp || 0;
+	}
+	getContents() {
+		return [...this.buffer];
+	}
+};
+export { SampleBuffer };

package/dist/getRenderInfo.d.ts

@@ -18,20 +18,20 @@ export declare const RenderInfo: z.ZodObject<{
         efImage: string[];
     }>;
 }, "strip", z.ZodTypeAny, {
+    fps: number;
     width: number;
     height: number;
     durationMs: number;
-    fps: number;
     assets: {
         efMedia: Record<string, any>;
         efCaptions: string[];
         efImage: string[];
     };
 }, {
+    fps: number;
     width: number;
     height: number;
     durationMs: number;
-    fps: number;
     assets: {
         efMedia: Record<string, any>;
         efCaptions: string[];

package/dist/getRenderInfo.js

@@ -30,7 +30,8 @@ const getRenderInfo = async () => {
 		case "EF-VIDEO": {
 			const src = element.src;
 			console.error("Processing element", element.tagName, src);
-			assets.efMedia[src] = element.fragmentIndexTask.value;
+			const mediaEngine = element.mediaEngineTask.value;
+			if (mediaEngine && "data" in mediaEngine) assets.efMedia[src] = mediaEngine.data;
 			break;
 		}
 		case "EF-IMAGE": {

package/dist/gui/ContextMixin.js

@@ -4,6 +4,8 @@ import { fetchContext } from "./fetchContext.js";
 import { focusContext } from "./focusContext.js";
 import { focusedElementContext } from "./focusedElementContext.js";
 import { loopContext, playingContext } from "./playingContext.js";
+import { ElementConnectionManager } from "./services/ElementConnectionManager.js";
+import { PlaybackController } from "./services/PlaybackController.js";
 import { consume, createContext, provide } from "@lit/context";
 import { property, state } from "lit/decorators.js";
 import _decorate from "@oxc-project/runtime/helpers/decorate";
@@ -40,6 +42,19 @@ function ContextMixin(superClass) {
 			this.loop = false;
 			this.rendering = false;
 			this.currentTimeMs = 0;
+			this._elementConnectionManager = new ElementConnectionManager(3e3);
+			this.playbackController = new PlaybackController({
+				fps: 30,
+				onTimeUpdate: (timeMs) => {
+					this.currentTimeMs = timeMs;
+				},
+				onPlayStateChange: (playing) => {
+					this.playing = playing;
+				},
+				onError: (error) => {
+					console.error("🎵 [PLAYBACK_ERROR]:", error);
+				}
+			});
 		}
 		static {
 			this[contextMixinSymbol] = true;
@@ -63,8 +78,6 @@ function ContextMixin(superClass) {
 		set signingURL(value) {
 			this.#signingURL = value;
 		}
-		#FPS = 30;
-		#MS_PER_FRAME = 1e3 / this.#FPS;
 		#timegroupObserver = new MutationObserver((mutations) => {
 			for (const mutation of mutations) if (mutation.type === "childList") {
 				const newTimegroup = this.querySelector("ef-timegroup");
@@ -106,79 +119,13 @@ function ContextMixin(superClass) {
 		pause() {
 			this.playing = false;
 		}
-		#playbackAudioContext = null;
-		#playbackAnimationFrameRequest = null;
-		#AUDIO_PLAYBACK_SLICE_MS = 1e3;
-		#syncPlayheadToAudioContext(target, startMs) {
-			const rawTimeMs = startMs + (this.#playbackAudioContext?.currentTime ?? 0) * 1e3;
-			const nextTimeMs = Math.round(rawTimeMs / this.#MS_PER_FRAME) * this.#MS_PER_FRAME;
-			if (nextTimeMs !== this.currentTimeMs) this.currentTimeMs = nextTimeMs;
-			this.#playbackAnimationFrameRequest = requestAnimationFrame(() => {
-				this.#syncPlayheadToAudioContext(target, startMs);
-			});
-		}
 		async stopPlayback() {
-			if (this.#playbackAudioContext) {
-				if (this.#playbackAudioContext.state !== "closed") await this.#playbackAudioContext.close();
-			}
-			if (this.#playbackAnimationFrameRequest) cancelAnimationFrame(this.#playbackAnimationFrameRequest);
-			this.#playbackAudioContext = null;
+			await this.playbackController.stopPlayback();
 		}
 		async startPlayback() {
-			await this.stopPlayback();
 			const timegroup = this.targetTimegroup;
 			if (!timegroup) return;
-			await timegroup.waitForMediaDurations();
-			let currentMs = timegroup.currentTimeMs;
-			const fromMs = currentMs;
-			const toMs = timegroup.endTimeMs;
-			if (fromMs >= toMs) {
-				this.pause();
-				return;
-			}
-			let bufferCount = 0;
-			this.#playbackAudioContext = new AudioContext({ latencyHint: "playback" });
-			if (this.#playbackAnimationFrameRequest) cancelAnimationFrame(this.#playbackAnimationFrameRequest);
-			this.#syncPlayheadToAudioContext(timegroup, currentMs);
-			const playbackContext = this.#playbackAudioContext;
-			if (playbackContext.state === "suspended") {
-				console.warn("AudioContext is suspended, media playback will not work until user has interacted with page.");
-				this.playing = false;
-				return;
-			}
-			await playbackContext.suspend();
-			const fillBuffer = async () => {
-				if (bufferCount > 1) return;
-				const canFillBuffer = await queueBufferSource();
-				if (canFillBuffer) fillBuffer();
-			};
-			const queueBufferSource = async () => {
-				if (currentMs >= toMs) return false;
-				const startMs = currentMs;
-				const endMs = currentMs + this.#AUDIO_PLAYBACK_SLICE_MS;
-				currentMs += this.#AUDIO_PLAYBACK_SLICE_MS;
-				const audioBuffer = await timegroup.renderAudio(startMs, endMs);
-				bufferCount++;
-				const source = playbackContext.createBufferSource();
-				source.buffer = audioBuffer;
-				source.connect(playbackContext.destination);
-				source.start((startMs - fromMs) / 1e3);
-				source.onended = () => {
-					bufferCount--;
-					if (endMs >= toMs) {
-						this.pause();
-						if (this.loop) this.updateComplete.then(() => {
-							this.currentTimeMs = 0;
-							this.updateComplete.then(() => {
-								this.play();
-							});
-						});
-					} else fillBuffer();
-				};
-				return true;
-			};
-			await fillBuffer();
-			await playbackContext.resume();
+			await this.playbackController.startPlayback(timegroup, timegroup.currentTimeMs);
 		}
 	}
 	_decorate([consume({

package/dist/gui/EFFilmstrip.d.ts

@@ -121,9 +121,9 @@ export declare class EFFilmstrip extends EFFilmstrip_base {
     scrub(e: MouseEvent): void;
     startScrub(e: MouseEvent): void;
     scrollScrub(e: WheelEvent): void;
-    gutterRef: import('lit-html/directives/ref.js').Ref<HTMLDivElement>;
-    hierarchyRef: import('lit-html/directives/ref.js').Ref<HTMLDivElement>;
-    playheadRef: import('lit-html/directives/ref.js').Ref<HTMLDivElement>;
+    gutterRef: import('lit-html/directives/ref').Ref<HTMLDivElement>;
+    hierarchyRef: import('lit-html/directives/ref').Ref<HTMLDivElement>;
+    playheadRef: import('lit-html/directives/ref').Ref<HTMLDivElement>;
     get gutter(): HTMLDivElement | undefined;
     render(): TemplateResult<1>;
     updated(changes: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;

package/dist/gui/EFFilmstrip.js

@@ -5,8 +5,8 @@ import { targetTimegroupContext } from "./ContextMixin.js";
 import { TimegroupController } from "../elements/TimegroupController.js";
 import { EFTimegroup } from "../elements/EFTimegroup.js";
 import { EFImage } from "../elements/EFImage.js";
-import { EFAudio } from "../elements/EFAudio.js";
 import { TWMixin } from "./TWMixin2.js";
+import { EFAudio } from "../elements/EFAudio.js";
 import { EFVideo } from "../elements/EFVideo.js";
 import { EFCaptions, EFCaptionsActiveWord } from "../elements/EFCaptions.js";
 import { EFWaveform } from "../elements/EFWaveform.js";

package/dist/gui/EFFitScale.d.ts

@@ -1,7 +1,7 @@
 import { LitElement } from 'lit';
 export declare class EFFitScale extends LitElement {
-    containerRef: import('lit-html/directives/ref.js').Ref<HTMLDivElement>;
-    contentRef: import('lit-html/directives/ref.js').Ref<HTMLSlotElement>;
+    containerRef: import('lit-html/directives/ref').Ref<HTMLDivElement>;
+    contentRef: import('lit-html/directives/ref').Ref<HTMLSlotElement>;
     createRenderRoot(): this;
     uniqueId: string;
     private scale;