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

package/dist/elements/EFMedia/tasks/makeMediaEngineTask.js

@@ -0,0 +1,60 @@
+import { EF_INTERACTIVE } from "../../../EF_INTERACTIVE.js";
+import { AssetMediaEngine } from "../AssetMediaEngine.js";
+import { AssetIdMediaEngine } from "../AssetIdMediaEngine.js";
+import { JitMediaEngine } from "../JitMediaEngine.js";
+import { Task } from "@lit/task";
+const getLatestMediaEngine = async (host, signal) => {
+	const mediaEngine = await host.mediaEngineTask.taskComplete;
+	signal.throwIfAborted();
+	if (!mediaEngine) throw new Error("Media engine is not available");
+	return mediaEngine;
+};
+const getVideoRendition = (mediaEngine) => {
+	const videoRendition = mediaEngine.videoRendition;
+	if (!videoRendition) throw new Error("Video rendition is not available");
+	return videoRendition;
+};
+/**
+* Core logic for creating a MediaEngine with explicit dependencies.
+* Pure function that requires all dependencies to be provided.
+*/
+const createMediaEngine = (host) => {
+	const { src, assetId, urlGenerator, apiHost } = host;
+	if (assetId !== null && assetId !== void 0 && assetId.trim() !== "") {
+		if (!apiHost) return Promise.reject(/* @__PURE__ */ new Error("API host is required for AssetID mode"));
+		return AssetIdMediaEngine.fetchByAssetId(host, urlGenerator, assetId, apiHost);
+	}
+	if (!src || typeof src !== "string" || src.trim() === "") {
+		console.error(`Unsupported media source: ${src}, assetId: ${assetId}`);
+		return Promise.reject(/* @__PURE__ */ new Error("Unsupported media source"));
+	}
+	const lowerSrc = src.toLowerCase();
+	if (lowerSrc.startsWith("http://") || lowerSrc.startsWith("https://")) {
+		const url = urlGenerator.generateManifestUrl(src);
+		return JitMediaEngine.fetch(host, urlGenerator, url);
+	}
+	return AssetMediaEngine.fetch(host, urlGenerator, src);
+};
+/**
+* Handle completion of media engine task - triggers necessary updates.
+* Extracted for testability.
+*/
+const handleMediaEngineComplete = (host) => {
+	host.requestUpdate("intrinsicDurationMs");
+	host.requestUpdate("ownCurrentTimeMs");
+	host.rootTimegroup?.requestUpdate("ownCurrentTimeMs");
+	host.rootTimegroup?.requestUpdate("durationMs");
+};
+const makeMediaEngineTask = (host) => {
+	return new Task(host, {
+		autoRun: EF_INTERACTIVE,
+		args: () => [host.src, host.assetId],
+		task: async () => {
+			return createMediaEngine(host);
+		},
+		onComplete: (_value) => {
+			handleMediaEngineComplete(host);
+		}
+	});
+};
+export { getLatestMediaEngine, getVideoRendition, makeMediaEngineTask };

package/dist/elements/EFMedia/tasks/makeMediaEngineTask.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/elements/EFMedia/videoTasks/makeVideoBufferTask.browsertest.d.ts

@@ -0,0 +1,9 @@
+import { EFVideo } from '../../EFVideo';
+declare class TestMediaVideoBuffer extends EFVideo {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "test-media-video-buffer": TestMediaVideoBuffer;
+    }
+}
+export {};

package/dist/elements/EFMedia/videoTasks/makeVideoBufferTask.d.ts

@@ -0,0 +1,16 @@
+import { Task } from '@lit/task';
+import { EFVideo } from '../../EFVideo';
+import { MediaBufferConfig, MediaBufferState } from '../shared/BufferUtils';
+/**
+ * Configuration for video buffering - extends the generic interface
+ */
+export interface VideoBufferConfig extends MediaBufferConfig {
+}
+/**
+ * State of the video buffer - uses the generic interface
+ */
+export interface VideoBufferState extends MediaBufferState {
+}
+type VideoBufferTask = Task<readonly [number], VideoBufferState>;
+export declare const makeVideoBufferTask: (host: EFVideo) => VideoBufferTask;
+export {};

package/dist/elements/EFMedia/videoTasks/makeVideoBufferTask.js

@@ -0,0 +1,46 @@
+import { EF_INTERACTIVE } from "../../../EF_INTERACTIVE.js";
+import { EF_RENDERING } from "../../../EF_RENDERING.js";
+import { manageMediaBuffer } from "../shared/BufferUtils.js";
+import { getLatestMediaEngine, getVideoRendition } from "../tasks/makeMediaEngineTask.js";
+import { Task } from "@lit/task";
+const makeVideoBufferTask = (host) => {
+	let currentState = {
+		currentSeekTimeMs: 0,
+		activeRequests: /* @__PURE__ */ new Set(),
+		cachedSegments: /* @__PURE__ */ new Set(),
+		requestQueue: []
+	};
+	return new Task(host, {
+		autoRun: EF_INTERACTIVE,
+		args: () => [host.desiredSeekTimeMs],
+		onError: (error) => {
+			console.error("videoBufferTask error", error);
+		},
+		onComplete: (value) => {
+			currentState = value;
+		},
+		task: async ([seekTimeMs], { signal }) => {
+			const currentConfig = {
+				bufferDurationMs: host.videoBufferDurationMs,
+				maxParallelFetches: host.maxVideoBufferFetches,
+				enableBuffering: host.enableVideoBuffering && !EF_RENDERING
+			};
+			return manageMediaBuffer(seekTimeMs, currentConfig, currentState, host.intrinsicDurationMs || 1e4, signal, {
+				computeSegmentId: async (timeMs, rendition) => {
+					const mediaEngine = await getLatestMediaEngine(host, signal);
+					return mediaEngine.computeSegmentId(timeMs, rendition);
+				},
+				fetchSegment: async (segmentId, rendition) => {
+					const mediaEngine = await getLatestMediaEngine(host, signal);
+					return mediaEngine.fetchMediaSegment(segmentId, rendition);
+				},
+				getRendition: async () => {
+					const mediaEngine = await getLatestMediaEngine(host, signal);
+					return getVideoRendition(mediaEngine);
+				},
+				logError: console.error
+			});
+		}
+	});
+};
+export { makeVideoBufferTask };

package/dist/elements/EFMedia/videoTasks/makeVideoInitSegmentFetchTask.browsertest.d.ts

@@ -0,0 +1,9 @@
+import { EFVideo } from '../../EFVideo';
+declare class TestMediaVideoInitSegmentFetch extends EFVideo {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "test-media-video-init-segment-fetch": TestMediaVideoInitSegmentFetch;
+    }
+}
+export {};

package/dist/elements/EFMedia/videoTasks/makeVideoInitSegmentFetchTask.d.ts

@@ -0,0 +1,4 @@
+import { Task } from '@lit/task';
+import { MediaEngine } from '../../../transcoding/types';
+import { EFVideo } from '../../EFVideo';
+export declare const makeVideoInitSegmentFetchTask: (host: EFVideo) => Task<readonly [MediaEngine | undefined], ArrayBuffer>;

package/dist/elements/EFMedia/videoTasks/makeVideoInitSegmentFetchTask.js

@@ -0,0 +1,16 @@
+import { getLatestMediaEngine } from "../tasks/makeMediaEngineTask.js";
+import { Task } from "@lit/task";
+const makeVideoInitSegmentFetchTask = (host) => {
+	return new Task(host, {
+		args: () => [host.mediaEngineTask.value],
+		onError: (error) => {
+			console.error("videoInitSegmentFetchTask error", error);
+		},
+		onComplete: (_value) => {},
+		task: async ([_mediaEngine], { signal }) => {
+			const mediaEngine = await getLatestMediaEngine(host, signal);
+			return mediaEngine.fetchInitSegment(mediaEngine.getVideoRendition(), signal);
+		}
+	});
+};
+export { makeVideoInitSegmentFetchTask };

package/dist/elements/EFMedia/videoTasks/makeVideoInputTask.browsertest.d.ts

@@ -0,0 +1,9 @@
+import { EFVideo } from '../../EFVideo';
+declare class TestMediaVideoInput extends EFVideo {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "test-media-video-input": TestMediaVideoInput;
+    }
+}
+export {};

package/dist/elements/EFMedia/videoTasks/makeVideoInputTask.d.ts

@@ -0,0 +1,3 @@
+import { EFVideo } from '../../EFVideo';
+import { InputTask } from '../shared/MediaTaskUtils';
+export declare const makeVideoInputTask: (host: EFVideo) => InputTask;

package/dist/elements/EFMedia/videoTasks/makeVideoInputTask.js

@@ -0,0 +1,27 @@
+import { BufferedSeekingInput } from "../BufferedSeekingInput.js";
+import { EFMedia } from "../../EFMedia.js";
+import { Task } from "@lit/task";
+const makeVideoInputTask = (host) => {
+	return new Task(host, {
+		args: () => [host.videoInitSegmentFetchTask.value, host.videoSegmentFetchTask.value],
+		onError: (error) => {
+			console.error("videoInputTask error", error);
+		},
+		onComplete: (_value) => {},
+		task: async () => {
+			const initSegment = await host.videoInitSegmentFetchTask.taskComplete;
+			const segment = await host.videoSegmentFetchTask.taskComplete;
+			if (!initSegment || !segment) throw new Error("Init segment or segment is not available");
+			const mediaEngine = await host.mediaEngineTask.taskComplete;
+			const videoRendition = mediaEngine?.videoRendition;
+			const startTimeOffsetMs = videoRendition?.startTimeOffsetMs;
+			const input = new BufferedSeekingInput(await new Blob([initSegment, segment]).arrayBuffer(), {
+				videoBufferSize: EFMedia.VIDEO_SAMPLE_BUFFER_SIZE,
+				audioBufferSize: EFMedia.AUDIO_SAMPLE_BUFFER_SIZE,
+				startTimeOffsetMs
+			});
+			return input;
+		}
+	});
+};
+export { makeVideoInputTask };

package/dist/elements/EFMedia/videoTasks/makeVideoSeekTask.d.ts

@@ -0,0 +1,7 @@
+import { Task } from '@lit/task';
+import { VideoSample } from 'mediabunny';
+import { EFVideo } from '../../EFVideo';
+import { BufferedSeekingInput } from '../BufferedSeekingInput';
+type VideoSeekTask = Task<readonly [number, BufferedSeekingInput | undefined], VideoSample | undefined>;
+export declare const makeVideoSeekTask: (host: EFVideo) => VideoSeekTask;
+export {};

package/dist/elements/EFMedia/videoTasks/makeVideoSeekTask.js

@@ -0,0 +1,25 @@
+import { IgnorableError } from "../../EFMedia.js";
+import { Task } from "@lit/task";
+const makeVideoSeekTask = (host) => {
+	return new Task(host, {
+		args: () => [host.desiredSeekTimeMs, host.videoInputTask.value],
+		onError: (error) => {
+			if (error instanceof IgnorableError) console.info("videoSeekTask aborted");
+			console.error("videoSeekTask error", error);
+		},
+		onComplete: (_value) => {},
+		task: async (_) => {
+			await host.mediaEngineTask.taskComplete;
+			await host.videoSegmentIdTask.taskComplete;
+			await host.videoSegmentFetchTask.taskComplete;
+			await host.videoInitSegmentFetchTask.taskComplete;
+			const videoInput = await host.videoInputTask.taskComplete;
+			if (!videoInput) throw new Error("Video input is not available");
+			const videoTrack = await videoInput.getFirstVideoTrack();
+			if (!videoTrack) throw new Error("Video track is not available");
+			const sample = await videoInput.seek(videoTrack.id, host.desiredSeekTimeMs);
+			return sample;
+		}
+	});
+};
+export { makeVideoSeekTask };

package/dist/elements/EFMedia/videoTasks/makeVideoSegmentFetchTask.browsertest.d.ts

@@ -0,0 +1,9 @@
+import { EFVideo } from '../../EFVideo';
+declare class TestMediaVideoSegmentFetch extends EFVideo {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "test-media-video-segment-fetch": TestMediaVideoSegmentFetch;
+    }
+}
+export {};

package/dist/elements/EFMedia/videoTasks/makeVideoSegmentFetchTask.d.ts

@@ -0,0 +1,4 @@
+import { Task } from '@lit/task';
+import { MediaEngine } from '../../../transcoding/types';
+import { EFVideo } from '../../EFVideo';
+export declare const makeVideoSegmentFetchTask: (host: EFVideo) => Task<readonly [MediaEngine | undefined, number | undefined], ArrayBuffer>;

package/dist/elements/EFMedia/videoTasks/makeVideoSegmentFetchTask.js

@@ -0,0 +1,18 @@
+import { getLatestMediaEngine } from "../tasks/makeMediaEngineTask.js";
+import { Task } from "@lit/task";
+const makeVideoSegmentFetchTask = (host) => {
+	return new Task(host, {
+		args: () => [host.mediaEngineTask.value, host.videoSegmentIdTask.value],
+		onError: (error) => {
+			console.error("videoSegmentFetchTask error", error);
+		},
+		onComplete: (_value) => {},
+		task: async (_, { signal }) => {
+			const mediaEngine = await getLatestMediaEngine(host, signal);
+			const segmentId = await host.videoSegmentIdTask.taskComplete;
+			if (segmentId === void 0) throw new Error("Segment ID is not available");
+			return mediaEngine.fetchMediaSegment(segmentId, mediaEngine.getVideoRendition(), signal);
+		}
+	});
+};
+export { makeVideoSegmentFetchTask };

package/dist/elements/EFMedia/videoTasks/makeVideoSegmentIdTask.browsertest.d.ts

@@ -0,0 +1,9 @@
+import { EFVideo } from '../../EFVideo';
+declare class TestMediaVideoSegment extends EFVideo {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "test-media-video-segment": TestMediaVideoSegment;
+    }
+}
+export {};

package/dist/elements/EFMedia/videoTasks/makeVideoSegmentIdTask.d.ts

@@ -0,0 +1,4 @@
+import { Task } from '@lit/task';
+import { MediaEngine } from '../../../transcoding/types';
+import { EFVideo } from '../../EFVideo';
+export declare const makeVideoSegmentIdTask: (host: EFVideo) => Task<readonly [MediaEngine | undefined, number], number | undefined>;

package/dist/elements/EFMedia/videoTasks/makeVideoSegmentIdTask.js

@@ -0,0 +1,16 @@
+import { getLatestMediaEngine } from "../tasks/makeMediaEngineTask.js";
+import { Task } from "@lit/task";
+const makeVideoSegmentIdTask = (host) => {
+	return new Task(host, {
+		args: () => [host.mediaEngineTask.value, host.desiredSeekTimeMs],
+		onError: (error) => {
+			console.error("videoSegmentIdTask error", error);
+		},
+		onComplete: (_value) => {},
+		task: async (_, { signal }) => {
+			const mediaEngine = await getLatestMediaEngine(host, signal);
+			return mediaEngine.computeSegmentId(host.desiredSeekTimeMs, mediaEngine.getVideoRendition());
+		}
+	});
+};
+export { makeVideoSegmentIdTask };

package/dist/elements/EFMedia.browsertest.d.ts

@@ -1,5 +1,6 @@
 import { EFMedia } from './EFMedia.js';
 declare class TestMedia extends EFMedia {
+    static styles: import('lit').CSSResult[];
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/elements/EFMedia.d.ts

@@ -1,81 +1,110 @@
-import { Task } from '@lit/task';
 import { LitElement, PropertyValueMap } from 'lit';
-import { TrackFragmentIndex, TrackSegment } from '../../../assets/src/index.ts';
-import { VideoAsset } from '../../../assets/src/EncodedAsset.ts';
-import { MP4File } from '../../../assets/src/MP4File.ts';
-import type * as MP4Box from "mp4box";
+import { AudioSpan } from '../transcoding/types/index.ts';
+import { UrlGenerator } from '../transcoding/utils/UrlGenerator.ts';
+declare global {
+    var EF_FRAMEGEN: import("../EF_FRAMEGEN.js").EFFramegen;
+}
+export declare class IgnorableError extends Error {
+}
 export declare const deepGetMediaElements: (element: Element, medias?: EFMedia[]) => EFMedia[];
 declare const EFMedia_base: (new (...args: any[]) => import('./EFSourceMixin.js').EFSourceMixinInterface) & (new (...args: any[]) => import('./EFTemporal.js').TemporalMixinInterface) & (new (...args: any[]) => import('./FetchMixin.js').FetchMixinInterface) & typeof LitElement;
 export declare class EFMedia extends EFMedia_base {
-    #private;
+    static readonly VIDEO_SAMPLE_BUFFER_SIZE = 30;
+    static readonly AUDIO_SAMPLE_BUFFER_SIZE = 120;
+    static get observedAttributes(): string[];
+    private mediaSourceService;
+    private audioElementFactory;
     static styles: import('lit').CSSResult[];
     currentTimeMs: number;
+    /**
+     * Duration in milliseconds for audio buffering ahead of current time
+     * @domAttribute "audio-buffer-duration"
+     */
+    audioBufferDurationMs: number;
+    /**
+     * Maximum number of concurrent audio segment fetches for buffering
+     * @domAttribute "max-audio-buffer-fetches"
+     */
+    maxAudioBufferFetches: number;
+    /**
+     * Enable/disable audio buffering system
+     * @domAttribute "enable-audio-buffering"
+     */
+    enableAudioBuffering: boolean;
+    /**
+     * Mute/unmute the media element
+     * @domAttribute "mute"
+     */
+    mute: boolean;
+    /**
+     * FFT size for frequency analysis
+     * @domAttribute "fft-size"
+     */
+    fftSize: number;
+    /**
+     * FFT decay rate for frequency analysis
+     * @domAttribute "fft-decay"
+     */
+    fftDecay: number;
+    /**
+     * FFT gain for frequency analysis
+     * @domAttribute "fft-gain"
+     */
+    fftGain: number;
+    /**
+     * Enable/disable frequency interpolation
+     * @domAttribute "interpolate-frequencies"
+     */
+    interpolateFrequencies: boolean;
+    get FREQ_WEIGHTS(): Float32Array;
+    get shouldInterpolateFrequencies(): boolean;
+    get urlGenerator(): UrlGenerator;
+    mediaEngineTask: import('@lit/task').Task<readonly [string, string | null], import('../transcoding/types/index.ts').MediaEngine>;
+    audioSegmentIdTask: import('@lit/task').Task<readonly [import('../transcoding/types/index.ts').MediaEngine | undefined, number], number | undefined>;
+    audioInitSegmentFetchTask: import('@lit/task').Task<readonly [import('../transcoding/types/index.ts').MediaEngine | undefined], ArrayBuffer>;
+    audioSegmentFetchTask: import('@lit/task').Task<readonly [import('../transcoding/types/index.ts').MediaEngine | undefined, number | undefined], ArrayBuffer>;
+    audioInputTask: import('./EFMedia/shared/MediaTaskUtils.ts').InputTask;
+    audioSeekTask: import('@lit/task').Task<readonly [number, import('./EFMedia/BufferedSeekingInput.ts').BufferedSeekingInput | undefined], import('mediabunny').VideoSample | undefined>;
+    audioBufferTask: import('@lit/task').Task<readonly [number], import('./EFMedia/audioTasks/makeAudioBufferTask.ts').AudioBufferState>;
+    byteTimeDomainTask: import('@lit/task').Task<readonly [import('@lit/task').TaskStatus, number, number, number, number, boolean], Uint8Array | null>;
+    frequencyDataTask: import('@lit/task').Task<readonly [import('@lit/task').TaskStatus, number, number, number, number, boolean], Uint8Array | null>;
     /**
      * The unique identifier for the media asset.
      * This property can be set programmatically or via the "asset-id" attribute.
      * @domAttribute "asset-id"
      */
-    set assetId(value: string | null);
-    get assetId(): string | null;
-    fragmentIndexPath(): string;
-    fragmentTrackPath(trackId: string): string;
-    trackFragmentIndexLoader: Task<readonly [string, typeof fetch], Record<number, TrackFragmentIndex> | undefined>;
-    initSegmentsLoader: Task<readonly [Record<number, TrackFragmentIndex> | undefined, string, typeof fetch], {
-        trackId: string;
-        buffer: MP4Box.MP4ArrayBuffer;
-        mp4File: MP4File;
-    }[] | undefined>;
-    get defaultVideoTrackId(): number | undefined;
-    get defaultAudioTrackId(): number | undefined;
-    seekTask: Task<readonly [number, Record<number, TrackFragmentIndex> | undefined, {
-        trackId: string;
-        buffer: MP4Box.MP4ArrayBuffer;
-        mp4File: MP4File;
-    }[] | undefined], Record<string, {
-        segment: TrackSegment;
-        track: MP4Box.TrackInfo;
-        nextSegment?: TrackSegment;
-    }> | undefined>;
-    fetchSeekTask: Task<readonly [{
-        trackId: string;
-        buffer: MP4Box.MP4ArrayBuffer;
-        mp4File: MP4File;
-    }[] | undefined, Record<string, {
-        segment: TrackSegment;
-        track: MP4Box.TrackInfo;
-        nextSegment?: TrackSegment;
-    }> | undefined, typeof fetch], Record<string, File> | undefined>;
-    videoAssetTask: Task<readonly [Record<string, File> | undefined], VideoAsset | undefined>;
-    desiredSeekTimeMs: number;
-    protected executeSeek(seekToMs: number): Promise<void>;
+    assetId: string | null;
+    get intrinsicDurationMs(): number;
     protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     get hasOwnDuration(): boolean;
-    get intrinsicDurationMs(): number;
-    audioBufferTask: Task<readonly [Record<string, File> | undefined, Record<string, {
-        segment: TrackSegment;
-        track: MP4Box.TrackInfo;
-        nextSegment?: TrackSegment;
-    }> | undefined], {
-        buffer: AudioBuffer;
-        startOffsetMs: number;
-    } | undefined>;
-    fetchAudioSpanningTime(fromMs: number, toMs: number): Promise<{
-        blob: Blob;
-        startMs: number;
-        endMs: number;
-    } | undefined>;
-    set fftSize(value: number);
-    set fftDecay(value: number);
-    get fftSize(): number;
-    get fftDecay(): number;
-    set interpolateFrequencies(value: boolean);
-    get interpolateFrequencies(): boolean;
-    get shouldInterpolateFrequencies(): boolean;
-    private static readonly DECAY_WEIGHT;
-    get FREQ_WEIGHTS(): Float32Array;
-    byteTimeDomainTask: Task<readonly [import('@lit/task').TaskStatus, number, number, number, number, boolean], Uint8Array | null>;
-    frequencyDataTask: Task<readonly [import('@lit/task').TaskStatus, number, number, number, number, boolean], Uint8Array | null>;
-    set fftGain(value: number);
-    get fftGain(): number;
+    private _desiredSeekTimeMs;
+    get desiredSeekTimeMs(): number;
+    set desiredSeekTimeMs(value: number);
+    protected executeSeek(seekToMs: number): Promise<void>;
+    /**
+     * Main integration method for EFTimegroup audio playback
+     * Now powered by clean, testable utility functions
+     */
+    fetchAudioSpanningTime(fromMs: number, toMs: number, signal?: AbortSignal): Promise<AudioSpan>;
+    /**
+     * Get the HTML audio element for ContextMixin integration
+     */
+    get audioElement(): HTMLAudioElement | null;
+    /**
+     * Check if an audio segment is cached in the unified buffer system
+     * Now uses the same caching approach as video for consistency
+     */
+    getCachedAudioSegment(segmentId: number): boolean;
+    /**
+     * Get cached audio segments from the unified buffer system
+     * Now uses the same caching approach as video for consistency
+     */
+    getCachedAudioSegments(segmentIds: number[]): Set<number>;
+    /**
+     * Get MediaElementAudioSourceNode for ContextMixin integration
+     * Uses AudioElementFactory for proper caching and lifecycle management
+     */
+    getMediaElementSource(audioContext: AudioContext): Promise<MediaElementAudioSourceNode>;
+    disconnectedCallback(): void;
 }
 export {};