@videojs/spf 10.0.0-beta.2 → 10.0.0-beta.21

package/dist/default/dom/features/setup-mediasource.js

@@ -0,0 +1,48 @@
+import { effect } from "../../core/signals/effect.js";
+import { computed } from "../../core/signals/primitives.js";
+import { attachMediaSource, createMediaSource, observeMediaSourceReadyState } from "../media/mediasource-setup.js";
+//#region src/dom/features/setup-mediasource.ts
+/**
+* Setup MediaSource orchestration.
+*
+* Creates and attaches MediaSource when:
+* - mediaElement exists in owners
+* - presentation.url exists in state
+*
+* Updates owners.mediaSource after successful setup.
+*/
+function setupMediaSource({ state, owners }) {
+	const abortController = new AbortController();
+	const mediaElementSignal = computed(() => owners.get().mediaElement);
+	const presentationUrlSignal = computed(() => state.get().presentation?.url);
+	const canSetupSignal = computed(() => !!mediaElementSignal.get() && !!presentationUrlSignal.get());
+	const mediaElementSrcSignal = computed(() => mediaElementSignal.get()?.src);
+	const mediaSourceSignal = computed(() => owners.get().mediaSource);
+	const shouldSetupSignal = computed(() => !mediaElementSrcSignal.get());
+	const cleanupEffect = effect(() => {
+		if (!canSetupSignal.get() || !shouldSetupSignal.get()) return;
+		const mediaElement = mediaElementSignal.get();
+		const { signal } = abortController;
+		const mediaSource = createMediaSource({ preferManaged: true });
+		const mediaSourceReadyState = observeMediaSourceReadyState(mediaSource, signal);
+		attachMediaSource(mediaSource, mediaElement);
+		const cleanupOwnersUpdateEffect = effect(() => {
+			if (!!mediaSourceSignal.get() || mediaSourceReadyState.get() !== "open") return;
+			owners.set(Object.assign({}, owners.get(), {
+				mediaSource,
+				mediaSourceReadyState
+			}));
+		});
+		return () => {
+			cleanupOwnersUpdateEffect();
+		};
+	});
+	return () => {
+		abortController?.abort();
+		cleanupEffect();
+	};
+}
+//#endregion
+export { setupMediaSource };
+
+//# sourceMappingURL=setup-mediasource.js.map

package/dist/default/dom/features/setup-mediasource.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup-mediasource.js","names":[],"sources":["../../../../src/dom/features/setup-mediasource.ts"],"sourcesContent":["import { effect } from '../../core/signals/effect';\nimport { computed, type ReadonlySignal, type Signal } from '../../core/signals/primitives';\nimport type { Presentation } from '../../core/types';\nimport { attachMediaSource, createMediaSource, observeMediaSourceReadyState } from '../media/mediasource-setup';\n\n/**\n * State shape required for MediaSource setup.\n */\nexport interface MediaSourceState {\n  presentation?: Presentation;\n}\n\n/**\n * Owners shape for MediaSource setup.\n */\nexport interface MediaSourceOwners {\n  mediaElement?: HTMLMediaElement | undefined;\n  mediaSource?: MediaSource;\n  /** Reactive mirror of `mediaSource.readyState` — updated via DOM events. */\n  mediaSourceReadyState?: ReadonlySignal<MediaSource['readyState']>;\n}\n\n/**\n * Setup MediaSource orchestration.\n *\n * Creates and attaches MediaSource when:\n * - mediaElement exists in owners\n * - presentation.url exists in state\n *\n * Updates owners.mediaSource after successful setup.\n */\nexport function setupMediaSource<S extends MediaSourceState, O extends MediaSourceOwners>({\n  state,\n  owners,\n}: {\n  state: Signal<S>;\n  owners: Signal<O>;\n}): () => void {\n  const abortController = new AbortController();\n\n  // Get the latest mediaElement (even if nullish)\n  const mediaElementSignal = computed(() => owners.get().mediaElement);\n  // Get the latest presentationUrl (even if nullish)\n  const presentationUrlSignal = computed(() => state.get().presentation?.url);\n\n  const canSetupSignal = computed(() => !!mediaElementSignal.get() && !!presentationUrlSignal.get());\n\n  const mediaElementSrcSignal = computed(() => mediaElementSignal.get()?.src);\n  const mediaSourceSignal = computed(() => owners.get().mediaSource);\n  const shouldSetupSignal = computed(() => !mediaElementSrcSignal.get());\n\n  // NOTE: This should be cleaner and less brittle if/when Reactors have their own internal finite state. This is planned as followup work.\n  // (here, e.g. something like: \"preconditions_unmet\"|\"pending\"|\"setting_up\"|\"tearing_down\"|\"set_up\")\n  // This should also avoid needing nested effect().\n  const cleanupEffect = effect(() => {\n    if (!canSetupSignal.get() || !shouldSetupSignal.get()) return;\n    const mediaElement = mediaElementSignal.get() as HTMLMediaElement;\n    const { signal } = abortController;\n\n    const mediaSource = createMediaSource({ preferManaged: true });\n    // NOTE: Consider making MediaSource an Actor and using this in it.\n    const mediaSourceReadyState = observeMediaSourceReadyState(mediaSource, signal);\n    attachMediaSource(mediaSource, mediaElement);\n\n    const cleanupOwnersUpdateEffect = effect(() => {\n      // If we already have a MediaSource or the *internal* mediaSource is not yet fully attached, wait to add it to owners;\n      if (!!mediaSourceSignal.get() || mediaSourceReadyState.get() !== 'open') return;\n      owners.set(Object.assign({}, owners.get(), { mediaSource, mediaSourceReadyState }) as O);\n    });\n\n    return () => {\n      cleanupOwnersUpdateEffect();\n    };\n  });\n\n  return () => {\n    abortController?.abort();\n    cleanupEffect();\n  };\n}\n"],"mappings":";;;;;;;;;;;;;AA+BA,SAAgB,iBAA0E,EACxF,OACA,UAIa;CACb,MAAM,kBAAkB,IAAI,iBAAiB;CAG7C,MAAM,qBAAqB,eAAe,OAAO,KAAK,CAAC,aAAa;CAEpE,MAAM,wBAAwB,eAAe,MAAM,KAAK,CAAC,cAAc,IAAI;CAE3E,MAAM,iBAAiB,eAAe,CAAC,CAAC,mBAAmB,KAAK,IAAI,CAAC,CAAC,sBAAsB,KAAK,CAAC;CAElG,MAAM,wBAAwB,eAAe,mBAAmB,KAAK,EAAE,IAAI;CAC3E,MAAM,oBAAoB,eAAe,OAAO,KAAK,CAAC,YAAY;CAClE,MAAM,oBAAoB,eAAe,CAAC,sBAAsB,KAAK,CAAC;CAKtE,MAAM,gBAAgB,aAAa;AACjC,MAAI,CAAC,eAAe,KAAK,IAAI,CAAC,kBAAkB,KAAK,CAAE;EACvD,MAAM,eAAe,mBAAmB,KAAK;EAC7C,MAAM,EAAE,WAAW;EAEnB,MAAM,cAAc,kBAAkB,EAAE,eAAe,MAAM,CAAC;EAE9D,MAAM,wBAAwB,6BAA6B,aAAa,OAAO;AAC/E,oBAAkB,aAAa,aAAa;EAE5C,MAAM,4BAA4B,aAAa;AAE7C,OAAI,CAAC,CAAC,kBAAkB,KAAK,IAAI,sBAAsB,KAAK,KAAK,OAAQ;AACzE,UAAO,IAAI,OAAO,OAAO,EAAE,EAAE,OAAO,KAAK,EAAE;IAAE;IAAa;IAAuB,CAAC,CAAM;IACxF;AAEF,eAAa;AACX,8BAA2B;;GAE7B;AAEF,cAAa;AACX,mBAAiB,OAAO;AACxB,iBAAe"}

package/dist/default/dom/features/setup-sourcebuffer.js

@@ -0,0 +1,78 @@
+import { effect } from "../../core/signals/effect.js";
+import { computed, update } from "../../core/signals/primitives.js";
+import { isResolvedTrack } from "../../core/types/index.js";
+import { BufferKeyByType, getSelectedTrack } from "../../core/utils/track-selection.js";
+import { createSourceBuffer } from "../media/mediasource-setup.js";
+import { createSourceBufferActor } from "../media/source-buffer-actor.js";
+//#region src/dom/features/setup-sourcebuffer.ts
+const ActorKeyByType = {
+	video: "videoBufferActor",
+	audio: "audioBufferActor"
+};
+/**
+* Build MIME codec string from track metadata.
+*
+* @param track - Resolved track with mimeType and codecs
+* @returns MIME codec string (e.g., 'video/mp4; codecs="avc1.42E01E,mp4a.40.2"')
+*
+* @example
+* buildMimeCodec({ mimeType: 'video/mp4', codecs: ['avc1.42E01E'] })
+* // => 'video/mp4; codecs="avc1.42E01E"'
+*/
+function buildMimeCodec(track) {
+	const codecString = track.codecs?.join(",") ?? "";
+	return `${track.mimeType}; codecs="${codecString}"`;
+}
+/**
+* Setup all needed SourceBuffers as a single coordinated operation.
+*
+* Waits until ALL media tracks in the presentation are resolved with codecs,
+* then creates every SourceBuffer in one synchronous block before setting
+* 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.
+*
+* Handles video-only, audio-only, and combined presentations correctly:
+* track types are derived from the presentation rather than hardcoded.
+*
+* @example
+* const cleanup = setupSourceBuffers({ state, owners });
+*/
+function setupSourceBuffers({ state, owners }) {
+	const presentationTypesSignal = computed(() => {
+		const { presentation } = state.get();
+		if (!presentation || !("selectionSets" in presentation)) return [];
+		return presentation.selectionSets.map(({ type }) => type).filter((type) => type === "video" || type === "audio");
+	});
+	const canSetupSignal = computed(() => {
+		const types = presentationTypesSignal.get();
+		if (!owners.get().mediaSource || types.length === 0) return false;
+		const s = state.get();
+		return types.every((type) => {
+			const track = getSelectedTrack(s, type);
+			return track && isResolvedTrack(track) && !!track.codecs?.length;
+		});
+	});
+	const shouldSetupSignal = computed(() => {
+		const o = owners.get();
+		return presentationTypesSignal.get().every((type) => !o[BufferKeyByType[type]]);
+	});
+	return effect(() => {
+		if (!canSetupSignal.get() || !shouldSetupSignal.get()) return;
+		const s = state.get();
+		const o = owners.get();
+		const patch = {};
+		for (const type of presentationTypesSignal.get()) {
+			const track = getSelectedTrack(s, type);
+			const buffer = createSourceBuffer(o.mediaSource, buildMimeCodec(track));
+			patch[BufferKeyByType[type]] = buffer;
+			patch[ActorKeyByType[type]] = createSourceBufferActor(buffer);
+		}
+		update(owners, patch);
+	});
+}
+//#endregion
+export { setupSourceBuffers };
+
+//# sourceMappingURL=setup-sourcebuffer.js.map

package/dist/default/dom/features/setup-sourcebuffer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup-sourcebuffer.js","names":[],"sources":["../../../../src/dom/features/setup-sourcebuffer.ts"],"sourcesContent":["import { effect } from '../../core/signals/effect';\nimport { computed, type Signal, update } from '../../core/signals/primitives';\nimport type { Presentation, ResolvedTrack } from '../../core/types';\nimport { isResolvedTrack } from '../../core/types';\nimport { BufferKeyByType, getSelectedTrack, type TrackSelectionState } from '../../core/utils/track-selection';\nimport { createSourceBuffer } from '../media/mediasource-setup';\nimport { createSourceBufferActor, type SourceBufferActor } from '../media/source-buffer-actor';\n\n/**\n * Media track type for SourceBuffer setup.\n * Text tracks are excluded as they don't use MSE SourceBuffers.\n */\nexport type MediaTrackType = 'video' | 'audio';\n\nconst ActorKeyByType = {\n  video: 'videoBufferActor',\n  audio: 'audioBufferActor',\n} as const satisfies Record<MediaTrackType, keyof SourceBufferOwners>;\n\n/**\n * State shape for SourceBuffer setup.\n */\nexport interface SourceBufferState extends TrackSelectionState {\n  presentation?: Presentation;\n  selectedVideoTrackId?: string;\n  selectedAudioTrackId?: string;\n}\n\n/**\n * Owners shape for SourceBuffer setup.\n */\nexport interface SourceBufferOwners {\n  mediaSource?: MediaSource;\n  videoBuffer?: SourceBuffer;\n  audioBuffer?: SourceBuffer;\n  videoBufferActor?: SourceBufferActor;\n  audioBufferActor?: SourceBufferActor;\n}\n\n/**\n * Build MIME codec string from track metadata.\n *\n * @param track - Resolved track with mimeType and codecs\n * @returns MIME codec string (e.g., 'video/mp4; codecs=\"avc1.42E01E,mp4a.40.2\"')\n *\n * @example\n * buildMimeCodec({ mimeType: 'video/mp4', codecs: ['avc1.42E01E'] })\n * // => 'video/mp4; codecs=\"avc1.42E01E\"'\n */\nexport function buildMimeCodec(track: ResolvedTrack): string {\n  const codecString = track.codecs?.join(',') ?? '';\n  return `${track.mimeType}; codecs=\"${codecString}\"`;\n}\n\n/**\n * Setup all needed SourceBuffers as a single coordinated operation.\n *\n * Waits until ALL media tracks in the presentation are resolved with codecs,\n * then creates every SourceBuffer in one synchronous block before setting\n * owners. This guarantees that downstream consumers (e.g. loadSegments) never\n * see a partial set of SourceBuffers — preventing the Firefox bug where\n * appending to a video SourceBuffer before the audio SourceBuffer exists\n * causes mozHasAudio to be permanently false.\n *\n * Handles video-only, audio-only, and combined presentations correctly:\n * track types are derived from the presentation rather than hardcoded.\n *\n * @example\n * const cleanup = setupSourceBuffers({ state, owners });\n */\nexport function setupSourceBuffers<S extends SourceBufferState, O extends SourceBufferOwners>({\n  state,\n  owners,\n}: {\n  state: Signal<S>;\n  owners: Signal<O>;\n}): () => void {\n  // Derive which media track types this presentation actually contains\n  const presentationTypesSignal = computed((): MediaTrackType[] => {\n    const { presentation } = state.get();\n    if (!presentation || !('selectionSets' in presentation)) return [];\n    return presentation.selectionSets\n      .map(({ type }) => type)\n      .filter((type): type is MediaTrackType => type === 'video' || type === 'audio');\n  });\n\n  // All presentation track types must have a selected, resolved track with codecs\n  const canSetupSignal = computed(() => {\n    const types = presentationTypesSignal.get();\n    if (!owners.get().mediaSource || types.length === 0) return false;\n    const s = state.get();\n    return types.every((type) => {\n      const track = getSelectedTrack(s, type);\n      return track && isResolvedTrack(track) && !!track.codecs?.length;\n    });\n  });\n\n  // DOM-observable \"already done\" guard — once all presentation buffers exist in owners, setup has run\n  const shouldSetupSignal = computed(() => {\n    const o = owners.get();\n    return presentationTypesSignal.get().every((type) => !o[BufferKeyByType[type]]);\n  });\n\n  const cleanupEffect = effect(() => {\n    if (!canSetupSignal.get() || !shouldSetupSignal.get()) return;\n\n    const s = state.get();\n    const o = owners.get();\n\n    // Create all SourceBuffers synchronously — no await between addSourceBuffer\n    // calls — then set owners once so subscribers see all buffers simultaneously.\n    const patch: Partial<SourceBufferOwners> = {};\n\n    for (const type of presentationTypesSignal.get()) {\n      const track = getSelectedTrack(s, type) as ResolvedTrack;\n      const buffer = createSourceBuffer(o.mediaSource!, buildMimeCodec(track));\n      patch[BufferKeyByType[type]] = buffer;\n      patch[ActorKeyByType[type]] = createSourceBufferActor(buffer);\n    }\n\n    update(owners, patch);\n  });\n\n  return cleanupEffect;\n}\n"],"mappings":";;;;;;;AAcA,MAAM,iBAAiB;CACrB,OAAO;CACP,OAAO;CACR;;;;;;;;;;;AAgCD,SAAgB,eAAe,OAA8B;CAC3D,MAAM,cAAc,MAAM,QAAQ,KAAK,IAAI,IAAI;AAC/C,QAAO,GAAG,MAAM,SAAS,YAAY,YAAY;;;;;;;;;;;;;;;;;;AAmBnD,SAAgB,mBAA8E,EAC5F,OACA,UAIa;CAEb,MAAM,0BAA0B,eAAiC;EAC/D,MAAM,EAAE,iBAAiB,MAAM,KAAK;AACpC,MAAI,CAAC,gBAAgB,EAAE,mBAAmB,cAAe,QAAO,EAAE;AAClE,SAAO,aAAa,cACjB,KAAK,EAAE,WAAW,KAAK,CACvB,QAAQ,SAAiC,SAAS,WAAW,SAAS,QAAQ;GACjF;CAGF,MAAM,iBAAiB,eAAe;EACpC,MAAM,QAAQ,wBAAwB,KAAK;AAC3C,MAAI,CAAC,OAAO,KAAK,CAAC,eAAe,MAAM,WAAW,EAAG,QAAO;EAC5D,MAAM,IAAI,MAAM,KAAK;AACrB,SAAO,MAAM,OAAO,SAAS;GAC3B,MAAM,QAAQ,iBAAiB,GAAG,KAAK;AACvC,UAAO,SAAS,gBAAgB,MAAM,IAAI,CAAC,CAAC,MAAM,QAAQ;IAC1D;GACF;CAGF,MAAM,oBAAoB,eAAe;EACvC,MAAM,IAAI,OAAO,KAAK;AACtB,SAAO,wBAAwB,KAAK,CAAC,OAAO,SAAS,CAAC,EAAE,gBAAgB,OAAO;GAC/E;AAsBF,QApBsB,aAAa;AACjC,MAAI,CAAC,eAAe,KAAK,IAAI,CAAC,kBAAkB,KAAK,CAAE;EAEvD,MAAM,IAAI,MAAM,KAAK;EACrB,MAAM,IAAI,OAAO,KAAK;EAItB,MAAM,QAAqC,EAAE;AAE7C,OAAK,MAAM,QAAQ,wBAAwB,KAAK,EAAE;GAChD,MAAM,QAAQ,iBAAiB,GAAG,KAAK;GACvC,MAAM,SAAS,mBAAmB,EAAE,aAAc,eAAe,MAAM,CAAC;AACxE,SAAM,gBAAgB,SAAS;AAC/B,SAAM,eAAe,SAAS,wBAAwB,OAAO;;AAG/D,SAAO,QAAQ,MAAM;GACrB"}

package/dist/default/dom/features/sync-text-tracks.js

@@ -0,0 +1,95 @@
+import { computed, untrack, update } from "../../core/signals/primitives.js";
+import { createMachineReactor } from "../../core/create-machine-reactor.js";
+import { listen } from "@videojs/utils/dom";
+//#region src/dom/features/sync-text-tracks.ts
+function createTrackElement(track) {
+	const el = document.createElement("track");
+	el.id = track.id;
+	el.kind = track.kind;
+	el.label = track.label;
+	el.toggleAttribute("data-src-track", true);
+	if (track.language) el.srclang = track.language;
+	if (track.default) el.default = true;
+	return el;
+}
+function getModelTextTracks(presentation) {
+	return presentation?.selectionSets?.find((s) => s.type === "text")?.switchingSets[0]?.tracks;
+}
+function syncModes(textTracks, selectedId) {
+	for (let i = 0; i < textTracks.length; i++) {
+		const track = textTracks[i];
+		if (track.kind !== "subtitles" && track.kind !== "captions") continue;
+		track.mode = track.id === selectedId ? "showing" : "disabled";
+	}
+}
+/**
+* Text track sync orchestration.
+*
+* A single `always` monitor keeps the reactor in sync with preconditions.
+* `'set-up'` owns the full lifecycle of `<track>` elements:
+*
+* - **Effect 1** — creates `<track>` elements on entry; exit cleanup removes
+*   them and clears `selectedTextTrackId` on any outbound transition.
+* - **Effect 2** — owns mode sync, the Chromium settling-window guard, and
+*   the `'change'` listener that bridges DOM state back to
+*   `selectedTextTrackId`.
+*
+* @example
+* const reactor = syncTextTracks({ state, owners });
+* // later:
+* reactor.destroy();
+*/
+function syncTextTracks({ state, owners }) {
+	const mediaElementSignal = computed(() => owners.get().mediaElement);
+	const modelTextTracksSignal = computed(() => getModelTextTracks(state.get().presentation), { equals(prevTextTracks, nextTextTracks) {
+		if (prevTextTracks === nextTextTracks) return true;
+		if (typeof prevTextTracks !== typeof nextTextTracks) return false;
+		if (prevTextTracks?.length !== nextTextTracks?.length) return false;
+		return !!nextTextTracks && nextTextTracks.every((nextTextTrack) => prevTextTracks?.some((prevTextTrack) => prevTextTrack.id === nextTextTrack.id));
+	} });
+	const selectedTextTrackIdSignal = computed(() => state.get().selectedTextTrackId);
+	const preconditionsMetSignal = computed(() => !!mediaElementSignal.get() && !!modelTextTracksSignal.get()?.length);
+	return createMachineReactor({
+		initial: "preconditions-unmet",
+		monitor: () => preconditionsMetSignal.get() ? "set-up" : "preconditions-unmet",
+		states: {
+			"preconditions-unmet": {},
+			"set-up": {
+				entry: () => {
+					const mediaElement = mediaElementSignal.get();
+					modelTextTracksSignal.get().forEach((track) => mediaElement.appendChild(createTrackElement(track)));
+					return () => {
+						mediaElement.querySelectorAll("track[data-src-track]:is([kind=\"subtitles\"],[kind=\"captions\"]").forEach((trackEl) => trackEl.remove());
+						update(state, { selectedTextTrackId: void 0 });
+					};
+				},
+				effects: () => {
+					const mediaElement = untrack(() => mediaElementSignal.get());
+					const selectedId = selectedTextTrackIdSignal.get();
+					syncModes(mediaElement.textTracks, selectedId);
+					let syncTimeout = setTimeout(() => {
+						syncTimeout = void 0;
+					}, 0);
+					const onChange = () => {
+						if (syncTimeout) {
+							syncModes(mediaElement.textTracks, untrack(() => selectedTextTrackIdSignal.get()));
+							return;
+						}
+						const newId = Array.from(mediaElement.textTracks).find((t) => t.mode === "showing" && (t.kind === "subtitles" || t.kind === "captions"))?.id;
+						if (newId === untrack(() => selectedTextTrackIdSignal.get())) return;
+						update(state, { selectedTextTrackId: newId });
+					};
+					const unlisten = listen(mediaElement.textTracks, "change", onChange);
+					return () => {
+						clearTimeout(syncTimeout ?? void 0);
+						unlisten();
+					};
+				}
+			}
+		}
+	});
+}
+//#endregion
+export { syncTextTracks };
+
+//# sourceMappingURL=sync-text-tracks.js.map

package/dist/default/dom/features/sync-text-tracks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sync-text-tracks.js","names":[],"sources":["../../../../src/dom/features/sync-text-tracks.ts"],"sourcesContent":["import { listen } from '@videojs/utils/dom';\nimport type { Reactor } from '../../core/create-machine-reactor';\nimport { createMachineReactor } from '../../core/create-machine-reactor';\nimport { computed, type Signal, untrack, update } from '../../core/signals/primitives';\nimport type { PartiallyResolvedTextTrack, Presentation, TextTrack } from '../../core/types';\n\n/**\n * FSM states for text track sync.\n *\n * ```\n * 'preconditions-unmet' ──── mediaElement + tracks available ────→ 'set-up'\n *        ↑                                                              |\n *        └──────────────── preconditions lost (exit cleanup) ──────────┘\n *\n * any state ──── destroy() ────→ 'destroying' ────→ 'destroyed'\n * ```\n */\n/**\n * State shape for text track sync.\n */\nexport interface TextTrackSyncState {\n  presentation?: Presentation | undefined;\n  selectedTextTrackId?: string | undefined;\n}\n\n/**\n * Owners shape for text track sync.\n */\nexport interface TextTrackSyncOwners {\n  mediaElement?: HTMLMediaElement | undefined;\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction createTrackElement(track: PartiallyResolvedTextTrack | TextTrack): HTMLTrackElement {\n  const el = document.createElement('track');\n  el.id = track.id;\n  el.kind = track.kind;\n  el.label = track.label;\n  el.toggleAttribute('data-src-track', true);\n  if (track.language) el.srclang = track.language;\n  if (track.default) el.default = true;\n  return el;\n}\n\nfunction getModelTextTracks(\n  presentation: Presentation | undefined\n): (PartiallyResolvedTextTrack | TextTrack)[] | undefined {\n  return presentation?.selectionSets?.find((s) => s.type === 'text')?.switchingSets[0]?.tracks;\n}\n\nfunction syncModes(textTracks: TextTrackList, selectedId: string | undefined): void {\n  for (let i = 0; i < textTracks.length; i++) {\n    const track = textTracks[i]!;\n    if (track.kind !== 'subtitles' && track.kind !== 'captions') continue;\n    track.mode = track.id === selectedId ? 'showing' : 'disabled';\n  }\n}\n\n// ============================================================================\n// Main export\n// ============================================================================\n\n/**\n * Text track sync orchestration.\n *\n * A single `always` monitor keeps the reactor in sync with preconditions.\n * `'set-up'` owns the full lifecycle of `<track>` elements:\n *\n * - **Effect 1** — creates `<track>` elements on entry; exit cleanup removes\n *   them and clears `selectedTextTrackId` on any outbound transition.\n * - **Effect 2** — owns mode sync, the Chromium settling-window guard, and\n *   the `'change'` listener that bridges DOM state back to\n *   `selectedTextTrackId`.\n *\n * @example\n * const reactor = syncTextTracks({ state, owners });\n * // later:\n * reactor.destroy();\n */\nexport function syncTextTracks<S extends TextTrackSyncState, O extends TextTrackSyncOwners>({\n  state,\n  owners,\n}: {\n  state: Signal<S>;\n  owners: Signal<O>;\n}): Reactor<'preconditions-unmet' | 'set-up' | 'destroying' | 'destroyed'> {\n  const mediaElementSignal = computed(() => owners.get().mediaElement);\n  const modelTextTracksSignal = computed(() => getModelTextTracks(state.get().presentation), {\n    /** @TODO Make generic and abstract away for Array<T> | undefined (CJP) */\n    equals(prevTextTracks, nextTextTracks) {\n      if (prevTextTracks === nextTextTracks) return true;\n      if (typeof prevTextTracks !== typeof nextTextTracks) return false;\n      if (prevTextTracks?.length !== nextTextTracks?.length) return false;\n      // NOTE: This could probably be optimized, but the set should generally be small (CJP)\n      return (\n        !!nextTextTracks &&\n        nextTextTracks.every((nextTextTrack) =>\n          prevTextTracks?.some((prevTextTrack) => prevTextTrack.id === nextTextTrack.id)\n        )\n      );\n    },\n  });\n  const selectedTextTrackIdSignal = computed(() => state.get().selectedTextTrackId);\n  const preconditionsMetSignal = computed(() => !!mediaElementSignal.get() && !!modelTextTracksSignal.get()?.length);\n\n  return createMachineReactor<'preconditions-unmet' | 'set-up'>({\n    initial: 'preconditions-unmet',\n    monitor: () => (preconditionsMetSignal.get() ? 'set-up' : 'preconditions-unmet'),\n    states: {\n      'preconditions-unmet': {},\n\n      'set-up': {\n        // Entry: create <track> elements once on state entry; exit cleanup removes\n        // them and clears selectedTextTrackId on any outbound transition.\n        // The fn body is automatically untracked — no untrack() needed.\n        entry: () => {\n          const mediaElement = mediaElementSignal.get() as HTMLMediaElement;\n          const modelTextTracks = modelTextTracksSignal.get() as PartiallyResolvedTextTrack[];\n          modelTextTracks.forEach((track) => mediaElement.appendChild(createTrackElement(track)));\n          return () => {\n            mediaElement\n              .querySelectorAll('track[data-src-track]:is([kind=\"subtitles\"],[kind=\"captions\"]')\n              .forEach((trackEl) => trackEl.remove());\n            update(state, { selectedTextTrackId: undefined } as Partial<S>);\n          };\n        },\n\n        // Reaction: mode sync + DOM change listener; re-runs when selectedId changes.\n        // mediaElement is read with untrack() since element changes go through the\n        // always monitor (preconditions-unmet path), not this effect.\n        effects: () => {\n          const mediaElement = untrack(() => mediaElementSignal.get() as HTMLMediaElement);\n          const selectedId = selectedTextTrackIdSignal.get();\n\n          syncModes(mediaElement.textTracks, selectedId);\n          let syncTimeout: ReturnType<typeof setTimeout> | undefined = setTimeout(() => {\n            syncTimeout = undefined;\n          }, 0);\n\n          const onChange = () => {\n            if (syncTimeout) {\n              // Inside the settling window: browser auto-selection is overriding our\n              // modes. Re-apply to restore the intended state without touching state.\n              // change events are queued as tasks (async), so no re-entrancy risk.\n              syncModes(\n                mediaElement.textTracks,\n                untrack(() => selectedTextTrackIdSignal.get())\n              );\n              return;\n            }\n\n            const showingTrack = Array.from(mediaElement.textTracks).find(\n              (t) => t.mode === 'showing' && (t.kind === 'subtitles' || t.kind === 'captions')\n            );\n\n            // showingTrack.id matches the SPF track ID set by createTrackElement above.\n            // Fall back to undefined for empty-string IDs (non-SPF-managed tracks).\n            const newId = showingTrack?.id;\n            const currentModelId = untrack(() => selectedTextTrackIdSignal.get());\n            if (newId === currentModelId) return;\n            update(state, { selectedTextTrackId: newId } as Partial<S>);\n          };\n\n          const unlisten = listen(mediaElement.textTracks, 'change', onChange);\n\n          return () => {\n            clearTimeout(syncTimeout ?? undefined);\n            unlisten();\n          };\n        },\n      },\n    },\n  });\n}\n"],"mappings":";;;;AAoCA,SAAS,mBAAmB,OAAiE;CAC3F,MAAM,KAAK,SAAS,cAAc,QAAQ;AAC1C,IAAG,KAAK,MAAM;AACd,IAAG,OAAO,MAAM;AAChB,IAAG,QAAQ,MAAM;AACjB,IAAG,gBAAgB,kBAAkB,KAAK;AAC1C,KAAI,MAAM,SAAU,IAAG,UAAU,MAAM;AACvC,KAAI,MAAM,QAAS,IAAG,UAAU;AAChC,QAAO;;AAGT,SAAS,mBACP,cACwD;AACxD,QAAO,cAAc,eAAe,MAAM,MAAM,EAAE,SAAS,OAAO,EAAE,cAAc,IAAI;;AAGxF,SAAS,UAAU,YAA2B,YAAsC;AAClF,MAAK,IAAI,IAAI,GAAG,IAAI,WAAW,QAAQ,KAAK;EAC1C,MAAM,QAAQ,WAAW;AACzB,MAAI,MAAM,SAAS,eAAe,MAAM,SAAS,WAAY;AAC7D,QAAM,OAAO,MAAM,OAAO,aAAa,YAAY;;;;;;;;;;;;;;;;;;;;AAyBvD,SAAgB,eAA4E,EAC1F,OACA,UAIyE;CACzE,MAAM,qBAAqB,eAAe,OAAO,KAAK,CAAC,aAAa;CACpE,MAAM,wBAAwB,eAAe,mBAAmB,MAAM,KAAK,CAAC,aAAa,EAAE,EAEzF,OAAO,gBAAgB,gBAAgB;AACrC,MAAI,mBAAmB,eAAgB,QAAO;AAC9C,MAAI,OAAO,mBAAmB,OAAO,eAAgB,QAAO;AAC5D,MAAI,gBAAgB,WAAW,gBAAgB,OAAQ,QAAO;AAE9D,SACE,CAAC,CAAC,kBACF,eAAe,OAAO,kBACpB,gBAAgB,MAAM,kBAAkB,cAAc,OAAO,cAAc,GAAG,CAC/E;IAGN,CAAC;CACF,MAAM,4BAA4B,eAAe,MAAM,KAAK,CAAC,oBAAoB;CACjF,MAAM,yBAAyB,eAAe,CAAC,CAAC,mBAAmB,KAAK,IAAI,CAAC,CAAC,sBAAsB,KAAK,EAAE,OAAO;AAElH,QAAO,qBAAuD;EAC5D,SAAS;EACT,eAAgB,uBAAuB,KAAK,GAAG,WAAW;EAC1D,QAAQ;GACN,uBAAuB,EAAE;GAEzB,UAAU;IAIR,aAAa;KACX,MAAM,eAAe,mBAAmB,KAAK;AACrB,2BAAsB,KAAK,CACnC,SAAS,UAAU,aAAa,YAAY,mBAAmB,MAAM,CAAC,CAAC;AACvF,kBAAa;AACX,mBACG,iBAAiB,oEAAgE,CACjF,SAAS,YAAY,QAAQ,QAAQ,CAAC;AACzC,aAAO,OAAO,EAAE,qBAAqB,KAAA,GAAW,CAAe;;;IAOnE,eAAe;KACb,MAAM,eAAe,cAAc,mBAAmB,KAAK,CAAqB;KAChF,MAAM,aAAa,0BAA0B,KAAK;AAElD,eAAU,aAAa,YAAY,WAAW;KAC9C,IAAI,cAAyD,iBAAiB;AAC5E,oBAAc,KAAA;QACb,EAAE;KAEL,MAAM,iBAAiB;AACrB,UAAI,aAAa;AAIf,iBACE,aAAa,YACb,cAAc,0BAA0B,KAAK,CAAC,CAC/C;AACD;;MASF,MAAM,QANe,MAAM,KAAK,aAAa,WAAW,CAAC,MACtD,MAAM,EAAE,SAAS,cAAc,EAAE,SAAS,eAAe,EAAE,SAAS,YACtE,EAI2B;AAE5B,UAAI,UADmB,cAAc,0BAA0B,KAAK,CAAC,CACvC;AAC9B,aAAO,OAAO,EAAE,qBAAqB,OAAO,CAAe;;KAG7D,MAAM,WAAW,OAAO,aAAa,YAAY,UAAU,SAAS;AAEpE,kBAAa;AACX,mBAAa,eAAe,KAAA,EAAU;AACtC,gBAAU;;;IAGf;GACF;EACF,CAAC"}

package/dist/default/dom/features/text-track-segment-loader-actor.js

@@ -0,0 +1,55 @@
+import { getSegmentsToLoad } from "../../core/buffer/forward-buffer.js";
+import { untrack } from "../../core/signals/primitives.js";
+import { SerialRunner, Task } from "../../core/task.js";
+import { parseVttSegment } from "../text/parse-vtt-segment.js";
+//#region src/dom/features/text-track-segment-loader-actor.ts
+/**
+* Loads VTT segments for a text track and delegates cue management to a
+* TextTracksActor. Mirrors the SegmentLoaderActor/SourceBufferActor pattern
+* for the text track equivalent.
+*
+* Planning is done in the load handler: segments already recorded in
+* TextTracksActor's context are skipped. Each load preempts in-flight work
+* via abortAll() before scheduling fresh tasks.
+*/
+function createTextTrackSegmentLoaderActor(textTracksActor) {
+	const runner = new SerialRunner();
+	let destroyed = false;
+	return {
+		send({ track, currentTime }) {
+			if (destroyed) return;
+			const trackId = track.id;
+			const bufferedSegments = untrack(() => textTracksActor.snapshot.get().context.segments[trackId] ?? []);
+			const segmentsToLoad = getSegmentsToLoad(track.segments, bufferedSegments, currentTime);
+			runner.abortAll();
+			for (const segment of segmentsToLoad) runner.schedule(new Task(async (signal) => {
+				if (signal.aborted) return;
+				try {
+					const cues = await parseVttSegment(segment.url);
+					if (signal.aborted) return;
+					textTracksActor.send({
+						type: "add-cues",
+						meta: {
+							trackId,
+							id: segment.id,
+							startTime: segment.startTime,
+							duration: segment.duration
+						},
+						cues
+					});
+				} catch (error) {
+					console.error("Failed to load VTT segment:", error);
+				}
+			}));
+		},
+		destroy() {
+			if (destroyed) return;
+			destroyed = true;
+			runner.destroy();
+		}
+	};
+}
+//#endregion
+export { createTextTrackSegmentLoaderActor };
+
+//# sourceMappingURL=text-track-segment-loader-actor.js.map

package/dist/default/dom/features/text-track-segment-loader-actor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-track-segment-loader-actor.js","names":[],"sources":["../../../../src/dom/features/text-track-segment-loader-actor.ts"],"sourcesContent":["import type { CallbackActor } from '../../core/actor';\nimport { getSegmentsToLoad } from '../../core/buffer/forward-buffer';\nimport { untrack } from '../../core/signals/primitives';\nimport { SerialRunner, Task } from '../../core/task';\nimport type { TextTrack } from '../../core/types';\nimport { parseVttSegment } from '../text/parse-vtt-segment';\nimport type { TextTracksActor } from './text-tracks-actor';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport type TextTrackSegmentLoaderMessage = {\n  type: 'load';\n  track: TextTrack;\n  currentTime: number;\n};\n\nexport type TextTrackSegmentLoaderActor = CallbackActor<TextTrackSegmentLoaderMessage>;\n\n// =============================================================================\n// Implementation\n// =============================================================================\n\n/**\n * Loads VTT segments for a text track and delegates cue management to a\n * TextTracksActor. Mirrors the SegmentLoaderActor/SourceBufferActor pattern\n * for the text track equivalent.\n *\n * Planning is done in the load handler: segments already recorded in\n * TextTracksActor's context are skipped. Each load preempts in-flight work\n * via abortAll() before scheduling fresh tasks.\n */\nexport function createTextTrackSegmentLoaderActor(textTracksActor: TextTracksActor): TextTrackSegmentLoaderActor {\n  const runner = new SerialRunner();\n  let destroyed = false;\n\n  return {\n    send({ track, currentTime }: TextTrackSegmentLoaderMessage): void {\n      if (destroyed) return;\n      const trackId = track.id;\n      const bufferedSegments = untrack(() => textTracksActor.snapshot.get().context.segments[trackId] ?? []);\n      const segmentsToLoad = getSegmentsToLoad(track.segments, bufferedSegments, currentTime);\n\n      runner.abortAll();\n      for (const segment of segmentsToLoad) {\n        runner.schedule(\n          new Task(async (signal) => {\n            if (signal.aborted) return;\n            try {\n              const cues = await parseVttSegment(segment.url);\n              if (signal.aborted) return;\n              textTracksActor.send({\n                type: 'add-cues',\n                meta: { trackId, id: segment.id, startTime: segment.startTime, duration: segment.duration },\n                cues,\n              });\n            } catch (error) {\n              // Graceful degradation: log and continue to the next segment.\n              console.error('Failed to load VTT segment:', error);\n            }\n          })\n        );\n      }\n    },\n\n    destroy(): void {\n      if (destroyed) return;\n      destroyed = true;\n      runner.destroy();\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;AAiCA,SAAgB,kCAAkC,iBAA+D;CAC/G,MAAM,SAAS,IAAI,cAAc;CACjC,IAAI,YAAY;AAEhB,QAAO;EACL,KAAK,EAAE,OAAO,eAAoD;AAChE,OAAI,UAAW;GACf,MAAM,UAAU,MAAM;GACtB,MAAM,mBAAmB,cAAc,gBAAgB,SAAS,KAAK,CAAC,QAAQ,SAAS,YAAY,EAAE,CAAC;GACtG,MAAM,iBAAiB,kBAAkB,MAAM,UAAU,kBAAkB,YAAY;AAEvF,UAAO,UAAU;AACjB,QAAK,MAAM,WAAW,eACpB,QAAO,SACL,IAAI,KAAK,OAAO,WAAW;AACzB,QAAI,OAAO,QAAS;AACpB,QAAI;KACF,MAAM,OAAO,MAAM,gBAAgB,QAAQ,IAAI;AAC/C,SAAI,OAAO,QAAS;AACpB,qBAAgB,KAAK;MACnB,MAAM;MACN,MAAM;OAAE;OAAS,IAAI,QAAQ;OAAI,WAAW,QAAQ;OAAW,UAAU,QAAQ;OAAU;MAC3F;MACD,CAAC;aACK,OAAO;AAEd,aAAQ,MAAM,+BAA+B,MAAM;;KAErD,CACH;;EAIL,UAAgB;AACd,OAAI,UAAW;AACf,eAAY;AACZ,UAAO,SAAS;;EAEnB"}

package/dist/default/dom/features/text-tracks-actor.js

@@ -0,0 +1,42 @@
+import { createTransitionActor } from "../../core/create-transition-actor.js";
+//#region src/dom/features/text-tracks-actor.ts
+function isDuplicateCue(cue, existing) {
+	return existing.some((r) => r.startTime === cue.startTime && r.endTime === cue.endTime && r.text === cue.text);
+}
+/** TextTrack actor: wraps all text tracks on a media element, owns cue operations. */
+function createTextTracksActor(mediaElement) {
+	return createTransitionActor({
+		loaded: {},
+		segments: {}
+	}, (context, message) => {
+		const { meta, cues } = message;
+		const { trackId, id: segmentId, startTime, duration } = meta;
+		const textTrack = Array.from(mediaElement.textTracks).find((t) => t.id === trackId);
+		if (!textTrack) return context;
+		const existingCues = context.loaded[trackId] ?? [];
+		const existingSegments = context.segments[trackId] ?? [];
+		const prunedCues = cues.filter((cue) => !isDuplicateCue(cue, existingCues));
+		const segmentAlreadyLoaded = existingSegments.some((s) => s.id === segmentId);
+		if (prunedCues.length === 0 && segmentAlreadyLoaded) return context;
+		for (const cue of prunedCues) textTrack.addCue(cue);
+		return {
+			...context,
+			loaded: {
+				...context.loaded,
+				[trackId]: [...existingCues, ...prunedCues]
+			},
+			segments: segmentAlreadyLoaded ? context.segments : {
+				...context.segments,
+				[trackId]: [...existingSegments, {
+					id: segmentId,
+					startTime,
+					duration
+				}]
+			}
+		};
+	});
+}
+//#endregion
+export { createTextTracksActor };
+
+//# sourceMappingURL=text-tracks-actor.js.map

package/dist/default/dom/features/text-tracks-actor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-tracks-actor.js","names":[],"sources":["../../../../src/dom/features/text-tracks-actor.ts"],"sourcesContent":["import type { TransitionActor } from '../../core/create-transition-actor';\nimport { createTransitionActor } from '../../core/create-transition-actor';\nimport type { Segment } from '../../core/types';\n\n// =============================================================================\n// Types\n// =============================================================================\n\n/** Minimal cue record — enough for deduplication and snapshot observability. */\nexport interface CueRecord {\n  startTime: number;\n  endTime: number;\n  text: string;\n}\n\n/** Segment identity and timing — mirrors AppendSegmentMeta without trackId (keyed separately). */\nexport type CueSegmentMeta = Pick<Segment, 'id' | 'startTime' | 'duration'> & { trackId: string };\n\n/** Non-finite (extended) data managed by the actor — the XState \"context\". */\nexport interface TextTracksActorContext {\n  /** Cues added per track ID. Used for duplicate detection and snapshot observability. */\n  loaded: Record<string, CueRecord[]>;\n  /** Segments whose cues have been fully added, keyed by track ID. Used for load planning. */\n  segments: Record<string, Array<Pick<Segment, 'id' | 'startTime' | 'duration'>>>;\n}\n\nexport type AddCuesMessage = { type: 'add-cues'; meta: CueSegmentMeta; cues: VTTCue[] };\nexport type TextTracksActorMessage = AddCuesMessage;\n\nexport type TextTracksActor = TransitionActor<TextTracksActorContext, TextTracksActorMessage>;\n\n// =============================================================================\n// Helpers\n// =============================================================================\n\nfunction isDuplicateCue(cue: VTTCue, existing: CueRecord[]): boolean {\n  return existing.some((r) => r.startTime === cue.startTime && r.endTime === cue.endTime && r.text === cue.text);\n}\n\n// =============================================================================\n// Implementation\n// =============================================================================\n\n/** TextTrack actor: wraps all text tracks on a media element, owns cue operations. */\nexport function createTextTracksActor(mediaElement: HTMLMediaElement): TextTracksActor {\n  return createTransitionActor({ loaded: {}, segments: {} } as TextTracksActorContext, (context, message) => {\n    // NOTE: Currently assumes cues are applied to a non-disabled TextTrack. Discuss different approaches here, including:\n    // - Making the message responsible for auto-selection of the textTrack (changes logic in sync-text-tracks)\n    // - Silent gating/console warning + early bail\n    // - throwing a domain-specific error\n    // - accepting as is (which would result in errors, but also \"shouldn't ever happen\" unless a bug is introduced)\n    // (CJP)\n    const { meta, cues } = message;\n    const { trackId, id: segmentId, startTime, duration } = meta;\n    const textTrack = Array.from(mediaElement.textTracks).find((t) => t.id === trackId);\n    if (!textTrack) return context;\n\n    const existingCues = context.loaded[trackId] ?? [];\n    const existingSegments = context.segments[trackId] ?? [];\n    const prunedCues = cues.filter((cue) => !isDuplicateCue(cue, existingCues));\n    const segmentAlreadyLoaded = existingSegments.some((s) => s.id === segmentId);\n\n    if (prunedCues.length === 0 && segmentAlreadyLoaded) return context;\n\n    for (const cue of prunedCues) textTrack.addCue(cue);\n    return {\n      ...context,\n      loaded: {\n        ...context.loaded,\n        [trackId]: [...existingCues, ...prunedCues],\n      },\n      segments: segmentAlreadyLoaded\n        ? context.segments\n        : {\n            ...context.segments,\n            [trackId]: [...existingSegments, { id: segmentId, startTime, duration }],\n          },\n    };\n  });\n}\n"],"mappings":";;AAmCA,SAAS,eAAe,KAAa,UAAgC;AACnE,QAAO,SAAS,MAAM,MAAM,EAAE,cAAc,IAAI,aAAa,EAAE,YAAY,IAAI,WAAW,EAAE,SAAS,IAAI,KAAK;;;AAQhH,SAAgB,sBAAsB,cAAiD;AACrF,QAAO,sBAAsB;EAAE,QAAQ,EAAE;EAAE,UAAU,EAAE;EAAE,GAA6B,SAAS,YAAY;EAOzG,MAAM,EAAE,MAAM,SAAS;EACvB,MAAM,EAAE,SAAS,IAAI,WAAW,WAAW,aAAa;EACxD,MAAM,YAAY,MAAM,KAAK,aAAa,WAAW,CAAC,MAAM,MAAM,EAAE,OAAO,QAAQ;AACnF,MAAI,CAAC,UAAW,QAAO;EAEvB,MAAM,eAAe,QAAQ,OAAO,YAAY,EAAE;EAClD,MAAM,mBAAmB,QAAQ,SAAS,YAAY,EAAE;EACxD,MAAM,aAAa,KAAK,QAAQ,QAAQ,CAAC,eAAe,KAAK,aAAa,CAAC;EAC3E,MAAM,uBAAuB,iBAAiB,MAAM,MAAM,EAAE,OAAO,UAAU;AAE7E,MAAI,WAAW,WAAW,KAAK,qBAAsB,QAAO;AAE5D,OAAK,MAAM,OAAO,WAAY,WAAU,OAAO,IAAI;AACnD,SAAO;GACL,GAAG;GACH,QAAQ;IACN,GAAG,QAAQ;KACV,UAAU,CAAC,GAAG,cAAc,GAAG,WAAW;IAC5C;GACD,UAAU,uBACN,QAAQ,WACR;IACE,GAAG,QAAQ;KACV,UAAU,CAAC,GAAG,kBAAkB;KAAE,IAAI;KAAW;KAAW;KAAU,CAAC;IACzE;GACN;GACD"}

package/dist/default/dom/features/track-current-time.js

@@ -0,0 +1,49 @@
+import { effect } from "../../core/signals/effect.js";
+import { update } from "../../core/signals/primitives.js";
+import { listen } from "@videojs/utils/dom";
+//#region src/dom/features/track-current-time.ts
+/**
+* Track current playback position from the media element.
+*
+* Mirrors `mediaElement.currentTime` into reactive state on:
+* - `timeupdate` — fires during playback (~4 Hz)
+* - `seeking` — fires when a seek begins; per spec, `currentTime` is
+*   already at the new position when this event dispatches, so buffer
+*   management can react immediately rather than waiting for `timeupdate`,
+*   which does not fire while paused.
+*
+* Also syncs immediately when a media element becomes available.
+*
+* @example
+* const cleanup = trackCurrentTime({ state, owners });
+*/
+function trackCurrentTime({ state, owners }) {
+	let lastMediaElement;
+	let removeListeners = null;
+	const cleanupEffect = effect(() => {
+		const { mediaElement } = owners.get();
+		if (mediaElement === lastMediaElement) return;
+		removeListeners?.();
+		removeListeners = null;
+		lastMediaElement = mediaElement;
+		if (!mediaElement) return;
+		const sync = () => {
+			update(state, { currentTime: mediaElement.currentTime });
+		};
+		sync();
+		const removeTimeupdate = listen(mediaElement, "timeupdate", sync);
+		const removeSeeking = listen(mediaElement, "seeking", sync);
+		removeListeners = () => {
+			removeTimeupdate();
+			removeSeeking();
+		};
+	});
+	return () => {
+		removeListeners?.();
+		cleanupEffect();
+	};
+}
+//#endregion
+export { trackCurrentTime };
+
+//# sourceMappingURL=track-current-time.js.map

package/dist/default/dom/features/track-current-time.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"track-current-time.js","names":[],"sources":["../../../../src/dom/features/track-current-time.ts"],"sourcesContent":["import { listen } from '@videojs/utils/dom';\nimport { effect } from '../../core/signals/effect';\nimport { type Signal, update } from '../../core/signals/primitives';\n\n/**\n * State shape for current time tracking.\n */\nexport interface CurrentTimeState {\n  currentTime?: number;\n}\n\n/**\n * Owners shape for current time tracking.\n */\nexport interface CurrentTimeOwners {\n  mediaElement?: HTMLMediaElement | undefined;\n}\n\n/**\n * Check if we can track current time.\n *\n * Requires:\n * - mediaElement exists in owners\n */\nexport function canTrackCurrentTime(owners: CurrentTimeOwners): boolean {\n  return !!owners.mediaElement;\n}\n\n/**\n * Track current playback position from the media element.\n *\n * Mirrors `mediaElement.currentTime` into reactive state on:\n * - `timeupdate` — fires during playback (~4 Hz)\n * - `seeking` — fires when a seek begins; per spec, `currentTime` is\n *   already at the new position when this event dispatches, so buffer\n *   management can react immediately rather than waiting for `timeupdate`,\n *   which does not fire while paused.\n *\n * Also syncs immediately when a media element becomes available.\n *\n * @example\n * const cleanup = trackCurrentTime({ state, owners });\n */\nexport function trackCurrentTime<S extends CurrentTimeState, O extends CurrentTimeOwners>({\n  state,\n  owners,\n}: {\n  state: Signal<S>;\n  owners: Signal<O>;\n}): () => void {\n  let lastMediaElement: HTMLMediaElement | undefined;\n  let removeListeners: (() => void) | null = null;\n\n  const cleanupEffect = effect(() => {\n    const { mediaElement } = owners.get();\n\n    if (mediaElement === lastMediaElement) return;\n\n    removeListeners?.();\n    removeListeners = null;\n    lastMediaElement = mediaElement;\n\n    if (!mediaElement) return;\n\n    const sync = () => {\n      const patch: Partial<CurrentTimeState> = { currentTime: mediaElement.currentTime };\n      update(state, patch);\n    };\n\n    // Sync immediately so consumers don't wait for the first event\n    sync();\n    const removeTimeupdate = listen(mediaElement, 'timeupdate', sync);\n    const removeSeeking = listen(mediaElement, 'seeking', sync);\n    removeListeners = () => {\n      removeTimeupdate();\n      removeSeeking();\n    };\n  });\n\n  return () => {\n    removeListeners?.();\n    cleanupEffect();\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA2CA,SAAgB,iBAA0E,EACxF,OACA,UAIa;CACb,IAAI;CACJ,IAAI,kBAAuC;CAE3C,MAAM,gBAAgB,aAAa;EACjC,MAAM,EAAE,iBAAiB,OAAO,KAAK;AAErC,MAAI,iBAAiB,iBAAkB;AAEvC,qBAAmB;AACnB,oBAAkB;AAClB,qBAAmB;AAEnB,MAAI,CAAC,aAAc;EAEnB,MAAM,aAAa;AAEjB,UAAO,OADkC,EAAE,aAAa,aAAa,aAAa,CAC9D;;AAItB,QAAM;EACN,MAAM,mBAAmB,OAAO,cAAc,cAAc,KAAK;EACjE,MAAM,gBAAgB,OAAO,cAAc,WAAW,KAAK;AAC3D,0BAAwB;AACtB,qBAAkB;AAClB,kBAAe;;GAEjB;AAEF,cAAa;AACX,qBAAmB;AACnB,iBAAe"}

package/dist/default/dom/features/track-playback-initiated.js

@@ -0,0 +1,66 @@
+import { computed, update } from "../../core/signals/primitives.js";
+import { createMachineReactor } from "../../core/create-machine-reactor.js";
+import { listen } from "@videojs/utils/dom";
+//#region src/dom/features/track-playback-initiated.ts
+/**
+* FSM states for playback initiation tracking.
+*
+* ```
+* 'preconditions-unmet' ──── element + URL ────→ 'monitoring'
+*         ↑                        ↑                  │
+*         │   preconditions lost   │             play / !paused
+*         │                        │                  ↓
+*         └────────────── 'playback-initiated' ←──────┘
+*                (exit cleanup resets state.playbackInitiated → false)
+*
+* any state ──── destroy() ────→ 'destroying' ────→ 'destroyed'
+* ```
+*/
+function deriveState(state, owners) {
+	if (!owners.mediaElement || !state.presentation?.url) return "preconditions-unmet";
+	if (state.playbackInitiated) return "playback-initiated";
+	return "monitoring";
+}
+/**
+* Track whether playback has been initiated for the current presentation URL.
+*
+* A three-state Reactor FSM driven by `state.playbackInitiated` and the
+* `deriveState` pattern:
+* - `'preconditions-unmet'` — no element or URL yet; no effects.
+* - `'monitoring'` — checks `!el.paused` on entry; listens for `play`.
+* - `'playback-initiated'` — tracks element and URL; exit cleanup resets
+*   `state.playbackInitiated` to `false` on any change or lost preconditions.
+*
+* @example
+* const reactor = trackPlaybackInitiated({ state, owners });
+* // later:
+* reactor.destroy();
+*/
+function trackPlaybackInitiated({ state, owners }) {
+	const derivedStateSignal = computed(() => deriveState(state.get(), owners.get()));
+	const mediaElementSignal = computed(() => owners.get().mediaElement);
+	const urlSignal = computed(() => state.get().presentation?.url);
+	return createMachineReactor({
+		initial: "preconditions-unmet",
+		monitor: () => derivedStateSignal.get(),
+		states: {
+			"preconditions-unmet": {},
+			monitoring: { entry: () => {
+				const el = mediaElementSignal.get();
+				update(state, { playbackInitiated: !el.paused });
+				return listen(el, "play", () => {
+					update(state, { playbackInitiated: !el.paused });
+				});
+			} },
+			"playback-initiated": { effects: () => {
+				mediaElementSignal.get();
+				urlSignal.get();
+				return () => update(state, { playbackInitiated: false });
+			} }
+		}
+	});
+}
+//#endregion
+export { trackPlaybackInitiated };
+
+//# sourceMappingURL=track-playback-initiated.js.map

package/dist/default/dom/features/track-playback-initiated.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"track-playback-initiated.js","names":[],"sources":["../../../../src/dom/features/track-playback-initiated.ts"],"sourcesContent":["import { listen } from '@videojs/utils/dom';\nimport type { Reactor } from '../../core/create-machine-reactor';\nimport { createMachineReactor } from '../../core/create-machine-reactor';\nimport { computed, type Signal, update } from '../../core/signals/primitives';\n\n/**\n * State shape for playback initiation tracking.\n */\nexport interface PlaybackInitiatedState {\n  /** True once play has been requested for the current presentation URL. */\n  playbackInitiated?: boolean;\n  /** Current presentation — URL is used to detect source changes. */\n  presentation?: { url?: string };\n}\n\n/**\n * Owners shape for playback initiation tracking.\n */\nexport interface PlaybackInitiatedOwners {\n  mediaElement?: HTMLMediaElement | undefined;\n}\n\n/**\n * FSM states for playback initiation tracking.\n *\n * ```\n * 'preconditions-unmet' ──── element + URL ────→ 'monitoring'\n *         ↑                        ↑                  │\n *         │   preconditions lost   │             play / !paused\n *         │                        │                  ↓\n *         └────────────── 'playback-initiated' ←──────┘\n *                (exit cleanup resets state.playbackInitiated → false)\n *\n * any state ──── destroy() ────→ 'destroying' ────→ 'destroyed'\n * ```\n */\nfunction deriveState(\n  state: PlaybackInitiatedState,\n  owners: PlaybackInitiatedOwners\n): 'preconditions-unmet' | 'monitoring' | 'playback-initiated' {\n  if (!owners.mediaElement || !state.presentation?.url) return 'preconditions-unmet';\n  if (state.playbackInitiated) return 'playback-initiated';\n  return 'monitoring';\n}\n\n/**\n * Track whether playback has been initiated for the current presentation URL.\n *\n * A three-state Reactor FSM driven by `state.playbackInitiated` and the\n * `deriveState` pattern:\n * - `'preconditions-unmet'` — no element or URL yet; no effects.\n * - `'monitoring'` — checks `!el.paused` on entry; listens for `play`.\n * - `'playback-initiated'` — tracks element and URL; exit cleanup resets\n *   `state.playbackInitiated` to `false` on any change or lost preconditions.\n *\n * @example\n * const reactor = trackPlaybackInitiated({ state, owners });\n * // later:\n * reactor.destroy();\n */\nexport function trackPlaybackInitiated<S extends PlaybackInitiatedState, O extends PlaybackInitiatedOwners>({\n  state,\n  owners,\n}: {\n  state: Signal<S>;\n  owners: Signal<O>;\n}): Reactor<'preconditions-unmet' | 'monitoring' | 'playback-initiated' | 'destroying' | 'destroyed'> {\n  const derivedStateSignal = computed(() => deriveState(state.get(), owners.get()));\n  const mediaElementSignal = computed(() => owners.get().mediaElement);\n  const urlSignal = computed(() => state.get().presentation?.url);\n\n  return createMachineReactor<'preconditions-unmet' | 'monitoring' | 'playback-initiated'>({\n    initial: 'preconditions-unmet',\n    monitor: () => derivedStateSignal.get(),\n    states: {\n      'preconditions-unmet': {},\n\n      monitoring: {\n        // Entry: check if already playing; otherwise listen for play.\n        // The fn body is automatically untracked — el is read at entry time only.\n        entry: () => {\n          const el = mediaElementSignal.get()!;\n          update(state, { playbackInitiated: !el.paused } as Partial<S>);\n          return listen(el, 'play', () => {\n            update(state, { playbackInitiated: !el.paused } as Partial<S>);\n          });\n        },\n      },\n\n      'playback-initiated': {\n        // Reaction: tracks element and URL while initiated. When either changes,\n        // the effect re-runs — the exit cleanup fires first, resetting\n        // state.playbackInitiated to false. deriveState then returns 'monitoring'\n        // on the next microtask, and the always monitor drives the transition.\n        //\n        // This covers both the preconditions-lost path (element/URL → undefined,\n        // which also triggers a deriveState → 'preconditions-unmet' transition)\n        // and the URL-change / element-swap path (preconditions still met but\n        // values changed, handled entirely by this effect's cleanup).\n        effects: () => {\n          mediaElementSignal.get(); // tracked — re-run on element change\n          urlSignal.get(); // tracked — re-run on URL change\n          return () => update(state, { playbackInitiated: false } as Partial<S>);\n        },\n      },\n    },\n  });\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAoCA,SAAS,YACP,OACA,QAC6D;AAC7D,KAAI,CAAC,OAAO,gBAAgB,CAAC,MAAM,cAAc,IAAK,QAAO;AAC7D,KAAI,MAAM,kBAAmB,QAAO;AACpC,QAAO;;;;;;;;;;;;;;;;;AAkBT,SAAgB,uBAA4F,EAC1G,OACA,UAIoG;CACpG,MAAM,qBAAqB,eAAe,YAAY,MAAM,KAAK,EAAE,OAAO,KAAK,CAAC,CAAC;CACjF,MAAM,qBAAqB,eAAe,OAAO,KAAK,CAAC,aAAa;CACpE,MAAM,YAAY,eAAe,MAAM,KAAK,CAAC,cAAc,IAAI;AAE/D,QAAO,qBAAkF;EACvF,SAAS;EACT,eAAe,mBAAmB,KAAK;EACvC,QAAQ;GACN,uBAAuB,EAAE;GAEzB,YAAY,EAGV,aAAa;IACX,MAAM,KAAK,mBAAmB,KAAK;AACnC,WAAO,OAAO,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAe;AAC9D,WAAO,OAAO,IAAI,cAAc;AAC9B,YAAO,OAAO,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAe;MAC9D;MAEL;GAED,sBAAsB,EAUpB,eAAe;AACb,uBAAmB,KAAK;AACxB,cAAU,KAAK;AACf,iBAAa,OAAO,OAAO,EAAE,mBAAmB,OAAO,CAAe;MAEzE;GACF;EACF,CAAC"}

package/dist/default/dom/features/track-playback-rate.js

@@ -0,0 +1,32 @@
+import { effect } from "../../core/signals/effect.js";
+import { computed, update } from "../../core/signals/primitives.js";
+import { listen } from "@videojs/utils/dom";
+//#region src/dom/features/track-playback-rate.ts
+/**
+* Track playback rate from the media element.
+*
+* Mirrors `mediaElement.playbackRate` into reactive state on each `ratechange`
+* event. Also syncs immediately when a media element becomes available.
+*
+* @example
+* const cleanup = trackPlaybackRate({ state, owners });
+*/
+function trackPlaybackRate({ state, owners }) {
+	const mediaElementSignal = computed(() => owners.get().mediaElement);
+	const canTrackPlaybackRate = computed(() => !!mediaElementSignal.get());
+	const cleanupEffect = effect(() => {
+		if (!canTrackPlaybackRate.get()) return;
+		const mediaElement = mediaElementSignal.get();
+		update(state, { playbackRate: mediaElement.playbackRate });
+		return listen(mediaElement, "ratechange", () => {
+			update(state, { playbackRate: mediaElement.playbackRate });
+		});
+	});
+	return () => {
+		cleanupEffect();
+	};
+}
+//#endregion
+export { trackPlaybackRate };
+
+//# sourceMappingURL=track-playback-rate.js.map

package/dist/default/dom/features/track-playback-rate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"track-playback-rate.js","names":[],"sources":["../../../../src/dom/features/track-playback-rate.ts"],"sourcesContent":["import { listen } from '@videojs/utils/dom';\nimport { effect } from '../../core/signals/effect';\nimport { computed, type Signal, update } from '../../core/signals/primitives';\n\n/**\n * State shape for playback rate tracking.\n */\nexport interface PlaybackRateState {\n  playbackRate?: number;\n}\n\n/**\n * Owners shape for playback rate tracking.\n */\nexport interface PlaybackRateOwners {\n  mediaElement?: HTMLMediaElement | undefined;\n}\n\n/**\n * Track playback rate from the media element.\n *\n * Mirrors `mediaElement.playbackRate` into reactive state on each `ratechange`\n * event. Also syncs immediately when a media element becomes available.\n *\n * @example\n * const cleanup = trackPlaybackRate({ state, owners });\n */\nexport function trackPlaybackRate<O extends PlaybackRateOwners>({\n  state,\n  owners,\n}: {\n  state: Signal<PlaybackRateState>;\n  owners: Signal<O>;\n}): () => void {\n  const mediaElementSignal = computed(() => owners.get().mediaElement);\n  const canTrackPlaybackRate = computed(() => !!mediaElementSignal.get());\n\n  const cleanupEffect = effect(() => {\n    if (!canTrackPlaybackRate.get()) return;\n    const mediaElement = mediaElementSignal.get() as HTMLMediaElement;\n\n    update(state, { playbackRate: mediaElement.playbackRate });\n\n    return listen(mediaElement, 'ratechange', () => {\n      update(state, { playbackRate: mediaElement.playbackRate });\n    });\n  });\n\n  return () => {\n    cleanupEffect();\n  };\n}\n"],"mappings":";;;;;;;;;;;;;AA2BA,SAAgB,kBAAgD,EAC9D,OACA,UAIa;CACb,MAAM,qBAAqB,eAAe,OAAO,KAAK,CAAC,aAAa;CACpE,MAAM,uBAAuB,eAAe,CAAC,CAAC,mBAAmB,KAAK,CAAC;CAEvE,MAAM,gBAAgB,aAAa;AACjC,MAAI,CAAC,qBAAqB,KAAK,CAAE;EACjC,MAAM,eAAe,mBAAmB,KAAK;AAE7C,SAAO,OAAO,EAAE,cAAc,aAAa,cAAc,CAAC;AAE1D,SAAO,OAAO,cAAc,oBAAoB;AAC9C,UAAO,OAAO,EAAE,cAAc,aAAa,cAAc,CAAC;IAC1D;GACF;AAEF,cAAa;AACX,iBAAe"}