@videojs/html 10.0.0-beta.2 → 10.0.0-beta.4

package/cdn/media/simple-hls-video.dev.js

@@ -320,7 +320,6 @@ function CustomMediaMixin(superclass, { tag, is }) {
 		}
 		connectedCallback() {
 			this.#init();
-			this.setAttribute("data-media-element", "");
 		}
 	};
 }
@@ -368,15 +367,12 @@ function listen(target, type, listener, options) {
 
 //#endregion
 //#region ../utils/dist/predicate/predicate.js
-function isUndefined(value) {
-	return typeof value === "undefined";
-}
 function isNil(value) {
 	return value == null;
 }
 
 //#endregion
-//#region ../spf/dist/adapter-CMw-rvbk.js
+//#region ../spf/dist/adapter-ClnRGbQf.js
 /**
 * Reactive state container with selectors, custom equality, and batched updates.
 *
@@ -1405,6 +1401,50 @@ function isCodecSupported(mimeCodec) {
 	if (!supportsMediaSource()) return false;
 	return MediaSource.isTypeSupported(mimeCodec);
 }
+const DEFAULT_MIN_CHUNK_SIZE = 2 ** 17;
+/**
+* Adapts a `ReadableStream<Uint8Array>` (e.g. `response.body`) into an
+* `AsyncIterable<Uint8Array>` that yields chunks no smaller than
+* `minChunkSize` bytes. Smaller network chunks are accumulated and yielded
+* together once the threshold is met. Any remainder is flushed on stream end.
+*
+* Errors from the underlying stream propagate naturally — the reader lock is
+* always released via `finally`.
+*/
+var ChunkedStreamIterable = class {
+	minChunkSize;
+	#readableStream;
+	constructor(readableStream, { minChunkSize = DEFAULT_MIN_CHUNK_SIZE } = {}) {
+		this.#readableStream = readableStream;
+		this.minChunkSize = minChunkSize;
+	}
+	async *[Symbol.asyncIterator]() {
+		let pending;
+		const reader = this.#readableStream.getReader();
+		try {
+			while (true) {
+				const { done, value } = await reader.read();
+				if (done) {
+					if (pending) yield pending;
+					break;
+				}
+				pending = pending ? concat(pending, value) : value;
+				if (pending.length >= this.minChunkSize) {
+					yield pending;
+					pending = void 0;
+				}
+			}
+		} finally {
+			reader.releaseLock();
+		}
+	}
+};
+function concat(a, b) {
+	const result = new Uint8Array(a.length + b.length);
+	result.set(a);
+	result.set(b, a.length);
+	return result;
+}
 /**
 * Fetch resolvable from AddressableObject.
 *
@@ -1439,16 +1479,6 @@ async function fetchResolvable(addressable, options) {
 	return fetch(request);
 }
 /**
-* Fetch resolvable as bytes.
-*
-* Convenience wrapper around fetchResolvable that resolves the body as an
-* ArrayBuffer. Use this when you need the raw bytes (e.g. segment appends).
-* For text or streaming consumption, use fetchResolvable directly.
-*/
-async function fetchResolvableBytes(addressable, options) {
-	return (await fetchResolvable(addressable, options)).arrayBuffer();
-}
-/**
 * Extract text from Response.
 *
 * Accepts minimal Response-like object (just needs text() method).
@@ -1732,14 +1762,6 @@ const SelectedTrackIdKeyByType = {
 	text: "selectedTextTrackId"
 };
 /**
-* Map track type to buffer owner property key.
-* Used for SourceBuffer references in owners.
-*/
-const BufferKeyByType = {
-	video: "videoBuffer",
-	audio: "audioBuffer"
-};
-/**
 * Get selected track from state by type.
 * Returns properly typed track (partially or fully resolved) or undefined.
 * Type parameter T is inferred from the type argument.
@@ -1770,7 +1792,9 @@ function getSelectedTrack(state, type) {
 * operation (if still needed) or preempts it.
 *
 * @param sourceBufferActor - Shared SourceBufferActor reference (not owned)
-* @param fetchBytes - Tracked fetch closure (owns throughput sampling)
+* @param fetchBytes - Tracked fetch closure (owns throughput sampling for segments).
+*   Accepts an optional `minChunkSize` in options; init segments pass `Infinity`
+*   so the entire body accumulates as one chunk before appending.
 */
 function createSegmentLoaderActor(sourceBufferActor, fetchBytes) {
 	let pendingTasks = null;
@@ -1780,7 +1804,7 @@ function createSegmentLoaderActor(sourceBufferActor, fetchBytes) {
 	let running = false;
 	let destroyed = false;
 	const getBufferedSegments = (allSegments) => {
-		const bufferedIds = new Set(sourceBufferActor.snapshot.context.segments.map((s) => s.id));
+		const bufferedIds = new Set(sourceBufferActor.snapshot.context.segments.filter((s) => !s.partial).map((s) => s.id));
 		return allSegments.filter((s) => bufferedIds.has(s.id));
 	};
 	/**
@@ -1821,12 +1845,14 @@ function createSegmentLoaderActor(sourceBufferActor, fetchBytes) {
 		if (actorCtx.initTrackId !== track.id) tasks.push({
 			type: "append-init",
 			meta: { trackId: track.id },
-			url: track.initialization.url
+			url: track.initialization.url,
+			...track.initialization.byteRange !== void 0 && { byteRange: track.initialization.byteRange }
 		});
 		if (range) {
 			const EPSILON = 1e-4;
 			const segmentsToLoad = getSegmentsToLoad(track.segments, bufferedSegments, currentTime).filter((seg) => {
 				const existing = actorCtx.segments.find((s) => Math.abs(s.startTime - seg.startTime) < EPSILON);
+				if (existing?.partial) return true;
 				if (!existing?.trackBandwidth || !track.bandwidth) return true;
 				return track.bandwidth > existing.trackBandwidth;
 			});
@@ -1839,7 +1865,8 @@ function createSegmentLoaderActor(sourceBufferActor, fetchBytes) {
 					trackId: track.id,
 					trackBandwidth: track.bandwidth
 				},
-				url: segment.url
+				url: segment.url,
+				...segment.byteRange !== void 0 && { byteRange: segment.byteRange }
 			});
 		}
 		return tasks;
@@ -1861,7 +1888,10 @@ function createSegmentLoaderActor(sourceBufferActor, fetchBytes) {
 			if (task.type === "append-init") {
 				inFlightInitTrackId = task.meta.trackId;
 				if (!signal.aborted) {
-					const data = await fetchBytes(task, { signal });
+					const data = await fetchBytes(task, {
+						signal,
+						minChunkSize: Infinity
+					});
 					const isTrackSwitch = pendingTasks?.some((t) => t.type === "append-init" && t.meta.trackId !== task.meta.trackId);
 					if (!signal.aborted || !isTrackSwitch) {
 						const appendSignal = signal.aborted ? new AbortController().signal : signal;
@@ -1876,10 +1906,10 @@ function createSegmentLoaderActor(sourceBufferActor, fetchBytes) {
 			}
 			inFlightSegmentId = task.meta.id;
 			if (!signal.aborted) {
-				const data = await fetchBytes(task, { signal });
+				const stream = await fetchBytes(task, { signal });
 				if (!signal.aborted) await sourceBufferActor.send({
 					type: "append-segment",
-					data,
+					data: stream,
 					meta: task.meta
 				}, signal);
 			}
@@ -1938,32 +1968,42 @@ function createSegmentLoaderActor(sourceBufferActor, fetchBytes) {
 		}
 	};
 }
-const ActorKeyByType$1 = {
+const ActorKeyByType = {
 	video: "videoBufferActor",
 	audio: "audioBufferActor"
 };
-/**
-* Creates a fetch function that transparently samples bandwidth after each
-* completed request. Callers receive bytes; throughput tracking is invisible.
-*
-* `onSample` is an optional callback invoked after each sample is recorded,
-* used for bridging throughput state outward (e.g. migration bridge to global
-* state). A callback is used rather than a subscription so that no immediate
-* fire occurs at setup time — subscriptions fire on registration and would
-* trigger spurious state changes before any work has started.
-*/
 function createTrackedFetch(throughput, onSample) {
 	return async (addressable, options) => {
-		const start = performance.now();
-		const data = await fetchResolvableBytes(addressable, options);
-		const elapsed = performance.now() - start;
-		const next = sampleBandwidth(throughput.current, elapsed, data.byteLength);
-		throughput.patch(next);
-		throughput.flush();
-		onSample?.(next);
-		return data;
+		const { minChunkSize, ...fetchOptions } = options ?? {};
+		const response = await fetchResolvable(addressable, fetchOptions);
+		if (!response.body) throw new Error("Response has no body");
+		const body = response.body;
+		return { [Symbol.asyncIterator]: async function* () {
+			let chunkStart = performance.now();
+			for await (const chunk of new ChunkedStreamIterable(body, ...minChunkSize !== void 0 ? [{ minChunkSize }] : [])) {
+				const elapsed = performance.now() - chunkStart;
+				const next = sampleBandwidth(throughput.current, elapsed, chunk.byteLength);
+				throughput.patch(next);
+				throughput.flush();
+				onSample?.(next);
+				yield chunk;
+				chunkStart = performance.now();
+			}
+		} };
 	};
 }
+/**
+* Non-tracking fetch: eagerly starts the request and returns the response body
+* as a lazy chunk iterable. Used for audio tracks which don't sample bandwidth.
+* Pass `minChunkSize: Infinity` to accumulate the full body as a single chunk
+* (equivalent to arrayBuffer() but through the same streaming path).
+*/
+async function fetchStream(addressable, options) {
+	const { minChunkSize, ...fetchOptions } = options ?? {};
+	const response = await fetchResolvable(addressable, fetchOptions);
+	if (!response.body) throw new Error("Response has no body");
+	return new ChunkedStreamIterable(response.body, ...minChunkSize !== void 0 ? [{ minChunkSize }] : []);
+}
 function selectLoadingInputs([segmentsCanLoad, state], type) {
 	const { playbackInitiated, preload, currentTime } = state;
 	return {
@@ -2046,7 +2086,7 @@ function loadingInputsEq(prevState, curState) {
 */
 function loadSegments({ state, owners }, config) {
 	const { type } = config;
-	const actorKey = ActorKeyByType$1[type];
+	const actorKey = ActorKeyByType[type];
 	const initialBandwidth = state.current.bandwidthState;
 	const throughput = createState(initialBandwidth ?? {
 		fastEstimate: 0,
@@ -2058,7 +2098,7 @@ function loadSegments({ state, owners }, config) {
 	const fetchBytes = type === "video" ? createTrackedFetch(throughput, initialBandwidth !== void 0 ? (next) => {
 		state.patch({ bandwidthState: next });
 		state.flush();
-	} : void 0) : fetchResolvableBytes;
+	} : void 0) : fetchStream;
 	const segmentLoader = createState(void 0);
 	const unsubActorLifecycle = owners.subscribe((o) => o[actorKey], (actor) => {
 		if (actor) segmentLoader.patch(createSegmentLoaderActor(actor, fetchBytes));
@@ -2380,25 +2420,23 @@ function trackPlaybackInitiated({ state, owners, events }) {
 	};
 }
 /**
-* Segment appender helper (P11)
-*
-* Appends media segments (ArrayBuffer) to SourceBuffer.
-*/
-/**
-* Append a media segment to a SourceBuffer.
-*
-* Waits for the SourceBuffer to be ready (not updating), then appends
-* the segment data. Returns a promise that resolves when append completes.
+* Append media data to a SourceBuffer.
 *
-* @param sourceBuffer - The SourceBuffer to append to
-* @param segmentData - The segment data as ArrayBuffer
-* @returns Promise that resolves when append completes
+* Accepts either a full ArrayBuffer (single append) or an AsyncIterable of
+* Uint8Array chunks (one append per chunk, in order). Waits for `updateend`
+* between each call so appends are serialized correctly.
 *
-* @example
-* const data = await fetch(segmentUrl).then(r => r.arrayBuffer());
-* await appendSegment(videoSourceBuffer, data);
+* Errors from the SourceBuffer (`error` event) or from the iterable are
+* propagated as rejections.
 */
-async function appendSegment(sourceBuffer, segmentData) {
+async function appendSegment(sourceBuffer, data, signal) {
+	if (data instanceof ArrayBuffer) await appendChunk(sourceBuffer, data);
+	else for await (const chunk of data) {
+		if (signal?.aborted) throw signal.reason ?? new DOMException("Aborted", "AbortError");
+		await appendChunk(sourceBuffer, chunk);
+	}
+}
+async function appendChunk(sourceBuffer, data) {
 	if (sourceBuffer.updating) await new Promise((resolve) => {
 		const onUpdateEnd = () => {
 			sourceBuffer.removeEventListener("updateend", onUpdateEnd);
@@ -2422,7 +2460,7 @@ async function appendSegment(sourceBuffer, segmentData) {
 		sourceBuffer.addEventListener("updateend", onUpdateEnd);
 		sourceBuffer.addEventListener("error", onError);
 		try {
-			sourceBuffer.appendBuffer(segmentData);
+			sourceBuffer.appendBuffer(data);
 		} catch (error) {
 			cleanup();
 			reject(error);
@@ -2852,7 +2890,7 @@ function isLastSegmentAppended(segments, actor) {
 	if (segments.length === 0) return true;
 	const lastSeg = segments[segments.length - 1];
 	if (!lastSeg) return false;
-	return actor?.snapshot.context.segments.some((s) => s.id === lastSeg.id) ?? false;
+	return actor?.snapshot.context.segments.some((s) => s.id === lastSeg.id && !s.partial) ?? false;
 }
 /**
 * Check if the last segment has been appended for each selected track.
@@ -3076,14 +3114,26 @@ function appendInitTask(message, { signal, getCtx, sourceBuffer }) {
 		};
 	}, { signal });
 }
-function appendSegmentTask(message, { signal, getCtx, sourceBuffer }) {
+function appendSegmentTask(message, { signal, getCtx, sourceBuffer, onPartialContext }) {
 	return new Task(async (taskSignal) => {
 		const ctx = getCtx();
 		if (taskSignal.aborted) return ctx;
-		await appendSegment(sourceBuffer, message.data);
 		const { meta } = message;
 		const EPSILON = 1e-4;
 		const filtered = ctx.segments.filter((s) => Math.abs(s.startTime - meta.startTime) >= EPSILON);
+		if (!(message.data instanceof ArrayBuffer)) onPartialContext({
+			...ctx,
+			segments: [...filtered, {
+				id: meta.id,
+				startTime: meta.startTime,
+				duration: meta.duration,
+				trackId: meta.trackId,
+				...meta.trackBandwidth !== void 0 && { trackBandwidth: meta.trackBandwidth },
+				partial: true
+			}],
+			bufferedRanges: ctx.bufferedRanges
+		});
+		await appendSegment(sourceBuffer, message.data, taskSignal);
 		return {
 			...ctx,
 			segments: [...filtered, {
@@ -3158,10 +3208,18 @@ function createSourceBufferActor(sourceBuffer, initialContext) {
 		send(message, signal) {
 			if (state.current.status !== "idle") return Promise.reject(new SourceBufferActorError(`send() called while actor is ${state.current.status}`));
 			state.patch({ status: "updating" });
+			const onPartialContext = (ctx) => {
+				state.patch({
+					status: "updating",
+					context: ctx
+				});
+				state.flush();
+			};
 			const task = messageToTask(message, {
 				signal,
 				getCtx: () => state.current.context,
-				sourceBuffer
+				sourceBuffer,
+				onPartialContext
 			});
 			return runner.schedule(task).then(applyResult).catch(handleError);
 		},
@@ -3170,11 +3228,19 @@ function createSourceBufferActor(sourceBuffer, initialContext) {
 			if (messages.length === 0) return Promise.resolve();
 			state.patch({ status: "updating" });
 			let workingCtx = state.current.context;
+			const onPartialContext = (ctx) => {
+				state.patch({
+					status: "updating",
+					context: ctx
+				});
+				state.flush();
+			};
 			for (const message of messages.slice(0, -1)) {
 				const task = messageToTask(message, {
 					signal,
 					getCtx: () => workingCtx,
-					sourceBuffer
+					sourceBuffer,
+					onPartialContext
 				});
 				runner.schedule(task).then((newCtx) => {
 					workingCtx = newCtx;
@@ -3183,7 +3249,8 @@ function createSourceBufferActor(sourceBuffer, initialContext) {
 			const lastTask = messageToTask(messages[messages.length - 1], {
 				signal,
 				getCtx: () => workingCtx,
-				sourceBuffer
+				sourceBuffer,
+				onPartialContext
 			});
 			return runner.schedule(lastTask).then(applyResult).catch(handleError);
 		},
@@ -3194,30 +3261,6 @@ function createSourceBufferActor(sourceBuffer, initialContext) {
 		}
 	};
 }
-/** Map track type to SourceBufferActor owner property key. */
-const ActorKeyByType = {
-	video: "videoBufferActor",
-	audio: "audioBufferActor"
-};
-/**
-* Setup SourceBuffer task (module-level, pure).
-* Creates SourceBuffer for resolved track and waits a frame before completing.
-*/
-const setupSourceBufferTask = async ({ currentState, currentOwners }, context) => {
-	const track = getSelectedTrack(currentState, context.config.type);
-	if (!track || !isResolvedTrack(track)) return;
-	if (!track.codecs || track.codecs.length === 0) return;
-	const mimeCodec = buildMimeCodec(track);
-	const buffer = createSourceBuffer(currentOwners.mediaSource, mimeCodec);
-	const actor = createSourceBufferActor(buffer);
-	const bufferKey = BufferKeyByType[context.config.type];
-	const actorKey = ActorKeyByType[context.config.type];
-	context.owners.patch({
-		[bufferKey]: buffer,
-		[actorKey]: actor
-	});
-	await new Promise((resolve) => requestAnimationFrame(resolve));
-};
 /**
 * Build MIME codec string from track metadata.
 *
@@ -3233,66 +3276,47 @@ function buildMimeCodec(track) {
 	return `${track.mimeType}; codecs="${codecString}"`;
 }
 /**
-* Check if we can setup SourceBuffer for track type.
-*
-* Requires:
-* - MediaSource exists in owners
-* - Track is selected
-*
-* Note: We don't check mediaSource.readyState because owners holds references
-* to mutable objects. Changes to properties on those objects won't trigger
-* observations. Instead, setupMediaSource only patches owners.mediaSource after
-* it's already open, so if it exists in owners, it's ready to use.
-*
-* Note: Track does not need to be resolved yet. The orchestration will wait
-* for the track to be resolved (via resolveTrack) before creating the SourceBuffer.
-*/
-function canSetupBuffer(state, owners, type) {
-	if (!owners.mediaSource) return false;
-	if (!getSelectedTrack(state, type)) return false;
-	return true;
-}
-/**
-* Check if we should create SourceBuffer (not already created).
-*/
-function shouldSetupBuffer(owners, type) {
-	const bufferKey = BufferKeyByType[type];
-	return isUndefined(owners[bufferKey]);
-}
-/**
-* Setup SourceBuffer orchestration.
+* Setup all needed SourceBuffers as a single coordinated operation.
 *
-* Triggers when:
-* - MediaSource exists and is in 'open' state
-* - Track is selected (same condition as resolveTrack)
-*
-* Creates SourceBuffer when track becomes resolved with codecs.
-* This allows setupSourceBuffer to run in parallel with resolveTrack.
+* Waits until ALL selected tracks (video and/or audio) are resolved with
+* codecs, then creates every SourceBuffer in one synchronous block before
+* patching owners. This guarantees that downstream consumers (e.g.
+* loadSegments) never see a partial set of SourceBuffers — preventing the
+* Firefox bug where appending to a video SourceBuffer before the audio
+* SourceBuffer exists causes mozHasAudio to be permanently false.
 *
-* Note: Text tracks don't use SourceBuffers and should be handled separately.
+* Handles video-only, audio-only, and combined presentations correctly:
+* only the tracks that are actually selected are waited on and created.
 *
-* Generic over track type - create one orchestration per track type:
 * @example
-* const videoCleanup = setupSourceBuffer({ state, owners }, { type: 'video' });
-* const audioCleanup = setupSourceBuffer({ state, owners }, { type: 'audio' });
+* const cleanup = setupSourceBuffers({ state, owners });
 */
-function setupSourceBuffer({ state, owners }, config) {
-	let currentTask = null;
+function setupSourceBuffers({ state, owners }) {
+	let setupDone = false;
 	return combineLatest([state, owners]).subscribe(async ([currentState, currentOwners]) => {
-		if (currentTask) return;
-		if (!canSetupBuffer(currentState, currentOwners, config.type) || !shouldSetupBuffer(currentOwners, config.type)) return;
-		currentTask = setupSourceBufferTask({
-			currentState,
-			currentOwners
-		}, {
-			owners,
-			config
-		});
-		try {
-			await currentTask;
-		} finally {
-			currentTask = null;
-		}
+		if (setupDone) return;
+		if (!currentOwners.mediaSource) return;
+		const videoSelected = !!currentState.selectedVideoTrackId;
+		const audioSelected = !!currentState.selectedAudioTrackId;
+		if (!videoSelected && !audioSelected) return;
+		const videoTrack = videoSelected ? getSelectedTrack(currentState, "video") : null;
+		const audioTrack = audioSelected ? getSelectedTrack(currentState, "audio") : null;
+		if (videoSelected && (!videoTrack || !isResolvedTrack(videoTrack) || !videoTrack.codecs?.length)) return;
+		if (audioSelected && (!audioTrack || !isResolvedTrack(audioTrack) || !audioTrack.codecs?.length)) return;
+		setupDone = true;
+		const patch = {};
+		if (videoSelected && videoTrack && isResolvedTrack(videoTrack)) {
+			const buffer = createSourceBuffer(currentOwners.mediaSource, buildMimeCodec(videoTrack));
+			patch.videoBuffer = buffer;
+			patch.videoBufferActor = createSourceBufferActor(buffer);
+		}
+		if (audioSelected && audioTrack && isResolvedTrack(audioTrack)) {
+			const buffer = createSourceBuffer(currentOwners.mediaSource, buildMimeCodec(audioTrack));
+			patch.audioBuffer = buffer;
+			patch.audioBufferActor = createSourceBufferActor(buffer);
+		}
+		owners.patch(patch);
+		await new Promise((resolve) => requestAnimationFrame(resolve));
 	});
 }
 /**
@@ -3629,14 +3653,10 @@ function createPlaybackEngine(config = {}) {
 			state,
 			owners
 		}),
-		setupSourceBuffer({
+		setupSourceBuffers({
 			state,
 			owners
-		}, { type: "video" }),
-		setupSourceBuffer({
-			state,
-			owners
-		}, { type: "audio" }),
+		}),
 		trackCurrentTime({
 			state,
 			owners