videojs-vue 0.2.0 → 0.3.0

package/dist/media/events.js

@@ -0,0 +1,30 @@
+//#region src/media/events.ts
+const MEDIA_EVENTS = [
+	"abort",
+	"canplay",
+	"canplaythrough",
+	"durationchange",
+	"emptied",
+	"ended",
+	"error",
+	"loadeddata",
+	"loadedmetadata",
+	"loadstart",
+	"pause",
+	"play",
+	"playing",
+	"progress",
+	"ratechange",
+	"seeked",
+	"seeking",
+	"stalled",
+	"suspend",
+	"timeupdate",
+	"volumechange",
+	"waiting",
+	"enterpictureinpicture",
+	"leavepictureinpicture"
+];
+const mediaEmits = Object.fromEntries(MEDIA_EVENTS.map((name) => [name, (_event) => true]));
+//#endregion
+export { MEDIA_EVENTS, mediaEmits };

package/dist/media/hls.d.ts

@@ -1,5 +1,4 @@
-import { t as MediaTrack } from "../types-wAkjM01D.js";
-import "../index-DhJ5A5TI.js";
+import { MediaTrack } from "./types.js";
 import { PropType } from "vue";
 import { HlsEngineConfig, HlsSource, HlsSource as HlsSource$1 } from "@videojs/hlsjs-video";
 //#region src/media/hls.d.ts

package/dist/media/hls.js

@@ -1,4 +1,6 @@
-import { a as mediaEmits, r as mediaProps, t as useMediaElement } from "../useMediaElement-CO_r--i0.js";
+import { mediaEmits } from "./events.js";
+import { mediaProps } from "./props.js";
+import { useMediaElement } from "./useMediaElement.js";
 import { defineComponent } from "vue";
 import { HlsJsVideoElement } from "@videojs/html/media/hlsjs-video";
 //#region src/media/hls.ts

package/dist/media/props.d.ts

@@ -0,0 +1,45 @@
+import { MediaTrack } from "./types.js";
+import { ExtractPropTypes, PropType } from "vue";
+//#region src/media/props.d.ts
+export declare const commonMediaProps: {
+  readonly src: PropType<string | undefined>;
+  readonly autoplay: BooleanConstructor;
+  readonly loop: BooleanConstructor;
+  readonly preload: {
+    readonly type: PropType<'none' | 'metadata' | 'auto'>;
+    readonly default: 'metadata';
+  };
+  readonly crossorigin: PropType<'' | 'anonymous' | 'use-credentials' | undefined>;
+  readonly tracks: PropType<readonly MediaTrack[] | undefined>;
+  readonly volume: PropType<number | undefined>;
+  readonly muted: {
+    readonly type: PropType<boolean | undefined>;
+    readonly default: undefined;
+  };
+  readonly playbackRate: PropType<number | undefined>;
+};
+export declare const mediaProps: {
+  readonly src: PropType<string | undefined>;
+  readonly autoplay: BooleanConstructor;
+  readonly loop: BooleanConstructor;
+  readonly preload: {
+    readonly type: PropType<'none' | 'metadata' | 'auto'>;
+    readonly default: 'metadata';
+  };
+  readonly crossorigin: PropType<'' | 'anonymous' | 'use-credentials' | undefined>;
+  readonly tracks: PropType<readonly MediaTrack[] | undefined>;
+  readonly volume: PropType<number | undefined>;
+  readonly muted: {
+    readonly type: PropType<boolean | undefined>;
+    readonly default: undefined;
+  };
+  readonly playbackRate: PropType<number | undefined>;
+  readonly poster: PropType<string | undefined>;
+  readonly playsinline: {
+    readonly type: BooleanConstructor;
+    readonly default: true;
+  };
+};
+export type CommonMediaProps = ExtractPropTypes<typeof commonMediaProps>;
+export type MediaProps = ExtractPropTypes<typeof mediaProps>;
+//#endregion

package/dist/media/props.js

@@ -0,0 +1,28 @@
+//#region src/media/props.ts
+const commonMediaProps = {
+	src: String,
+	autoplay: Boolean,
+	loop: Boolean,
+	preload: {
+		type: String,
+		default: "metadata"
+	},
+	crossorigin: String,
+	tracks: Array,
+	volume: Number,
+	muted: {
+		type: Boolean,
+		default: void 0
+	},
+	playbackRate: Number
+};
+const mediaProps = {
+	...commonMediaProps,
+	poster: String,
+	playsinline: {
+		type: Boolean,
+		default: true
+	}
+};
+//#endregion
+export { commonMediaProps, mediaProps };

package/dist/media/types.d.ts

@@ -0,0 +1,23 @@
+//#region src/media/types.d.ts
+/**
+ * Common native and adapter media surface. Adapter-specific APIs remain on the element.
+ */
+export interface PlayerMedia extends HTMLElement {
+  src: string;
+  volume: number;
+  muted: boolean;
+  playbackRate: number;
+  readonly paused: boolean;
+  readonly currentTime: number;
+  readonly error: MediaError | null;
+  play: () => Promise<void>;
+  pause: () => void;
+}
+export interface MediaTrack {
+  src: string;
+  kind?: 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata';
+  srclang?: string;
+  label?: string;
+  default?: boolean;
+}
+//#endregion

package/dist/media/useMediaElement.d.ts

@@ -0,0 +1,18 @@
+import { PlayerMedia } from "./types.js";
+import { mediaEmits } from "./events.js";
+import { CommonMediaProps, MediaProps } from "./props.js";
+import { EmitFn, SetupContext } from "vue";
+//#region src/media/useMediaElement.d.ts
+interface MediaElementOptions {
+  tag: string;
+  props: CommonMediaProps & Partial<Pick<MediaProps, 'poster' | 'playsinline'>>;
+  context: Pick<SetupContext, 'attrs' | 'slots' | 'expose'>;
+  emit: EmitFn<typeof mediaEmits>;
+  extraProps?: () => Record<string, unknown>;
+  onUnmount?: (media: PlayerMedia) => void;
+}
+export declare function useMediaElement({ tag, props, context, emit, extraProps, onUnmount }: MediaElementOptions): () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>;
+//#endregion
+export {};

package/dist/media/useMediaElement.js

@@ -0,0 +1,91 @@
+import { MEDIA_EVENTS } from "./events.js";
+import { MEDIA_CONTEXT } from "../player/context.js";
+import { h, inject, onActivated, onBeforeUnmount, onDeactivated, shallowRef, watch } from "vue";
+//#region src/media/useMediaElement.ts
+function useMediaElement({ tag, props, context, emit, extraProps = () => ({}), onUnmount }) {
+	const emitMedia = emit;
+	const player = inject(MEDIA_CONTEXT, null);
+	const element = shallowRef(null);
+	const isActive = shallowRef(true);
+	const initialMuted = props.muted;
+	onActivated(() => {
+		isActive.value = true;
+	});
+	onDeactivated(() => {
+		isActive.value = false;
+	});
+	context.expose({ get element() {
+		return element.value;
+	} });
+	function syncSettings(media) {
+		const store = (player === null || player === void 0 ? void 0 : player.handle.media) === media ? player.handle.store : null;
+		const muteRequest = props.muted ?? media.muted;
+		if (props.volume !== void 0 && Number.isFinite(props.volume)) {
+			const volume = Math.min(1, Math.max(0, props.volume));
+			if (store) store.setVolume(volume);
+			else if (media.volume !== volume) media.volume = volume;
+		}
+		if (store && (store.muted !== muteRequest || media.muted !== muteRequest)) store.setMuted(muteRequest);
+		else if (media.muted !== muteRequest) media.muted = muteRequest;
+		if (props.playbackRate !== void 0 && Number.isFinite(props.playbackRate) && props.playbackRate > 0) {
+			if (store) store.setPlaybackRate(props.playbackRate);
+			else if (media.playbackRate !== props.playbackRate) media.playbackRate = props.playbackRate;
+		}
+	}
+	watch([element, isActive], ([media, active], [previous], onCleanup) => {
+		if (previous && previous !== media && (player === null || player === void 0 ? void 0 : player.handle.media) === previous) player.setMedia(null);
+		if (!media || !active) return;
+		player === null || player === void 0 || player.setMedia(media);
+		const listeners = MEDIA_EVENTS.map((name) => {
+			const listener = (event) => {
+				if (name === "loadedmetadata") syncSettings(media);
+				emitMedia(name, event);
+				player === null || player === void 0 || player.onMediaEvent(name, event);
+			};
+			media.addEventListener(name, listener);
+			return () => media.removeEventListener(name, listener);
+		});
+		onCleanup(() => {
+			for (const remove of listeners) remove();
+		});
+	}, { flush: "sync" });
+	watch([
+		element,
+		() => player === null || player === void 0 ? void 0 : player.handle.store,
+		() => props.volume,
+		() => props.muted,
+		() => props.playbackRate
+	], ([media]) => {
+		if (media) syncSettings(media);
+	}, { flush: "post" });
+	onBeforeUnmount(() => {
+		const media = element.value;
+		media === null || media === void 0 || media.removeAttribute("keep-alive");
+		media === null || media === void 0 || media.pause();
+		if (media) onUnmount === null || onUnmount === void 0 || onUnmount(media);
+		if ((player === null || player === void 0 ? void 0 : player.handle.media) === element.value) player === null || player === void 0 || player.setMedia(null);
+		element.value = null;
+	});
+	return () => {
+		var _props$tracks, _context$slots$defaul, _context$slots;
+		return h(tag, {
+			...context.attrs,
+			ref: element,
+			...tag === "video" || tag === "audio" ? {} : { "keep-alive": "" },
+			...props.src === void 0 ? {} : { src: props.src },
+			poster: props.poster,
+			autoplay: props.autoplay ? "" : void 0,
+			loop: props.loop ? "" : void 0,
+			preload: props.preload,
+			playsinline: props.playsinline ? "" : void 0,
+			crossorigin: props.crossorigin,
+			"^muted": initialMuted ? "" : void 0,
+			...extraProps()
+		}, [...((_props$tracks = props.tracks) === null || _props$tracks === void 0 ? void 0 : _props$tracks.map((track) => h("track", {
+			...track,
+			key: `${track.kind}:${track.src}:${track.srclang}`
+		}))) ?? [], (_context$slots$defaul = (_context$slots = context.slots)["default"]) === null || _context$slots$defaul === void 0 ? void 0 : _context$slots$defaul.call(_context$slots)]);
+	};
+}
+//#endregion
+export { useMediaElement };

package/dist/node_modules/.pnpm/@vue_reactivity@3.5.43/node_modules/@vue/reactivity/dist/reactivity.d.ts

@@ -0,0 +1,3 @@
+//#region node_modules/.pnpm/@vue+reactivity@3.5.43/node_modules/@vue/reactivity/dist/reactivity.d.ts
+export type OnCleanup = (cleanupFn: () => void) => void;
+//#endregion

package/dist/player/PlayerRoot.d.ts

@@ -0,0 +1,109 @@
+import "../register/video/player.js";
+import { PlayerHandle } from "./types.js";
+import { PropType } from "vue";
+//#region src/player/PlayerRoot.d.ts
+export declare const playerEmits: {
+  ready: (_player: PlayerHandle) => boolean;
+  'update:volume': (_volume: number) => boolean;
+  'update:muted': (_muted: boolean) => boolean;
+  'update:playbackRate': (_rate: number) => boolean;
+  abort: (event: Event) => boolean;
+  canplay: (event: Event) => boolean;
+  canplaythrough: (event: Event) => boolean;
+  durationchange: (event: Event) => boolean;
+  emptied: (event: Event) => boolean;
+  ended: (event: Event) => boolean;
+  enterpictureinpicture: (event: Event) => boolean;
+  error: (event: Event) => boolean;
+  leavepictureinpicture: (event: Event) => boolean;
+  loadeddata: (event: Event) => boolean;
+  loadedmetadata: (event: Event) => boolean;
+  loadstart: (event: Event) => boolean;
+  pause: (event: Event) => boolean;
+  play: (event: Event) => boolean;
+  playing: (event: Event) => boolean;
+  progress: (event: Event) => boolean;
+  ratechange: (event: Event) => boolean;
+  seeked: (event: Event) => boolean;
+  seeking: (event: Event) => boolean;
+  stalled: (event: Event) => boolean;
+  suspend: (event: Event) => boolean;
+  timeupdate: (event: Event) => boolean;
+  volumechange: (event: Event) => boolean;
+  waiting: (event: Event) => boolean;
+};
+declare const component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  title: PropType<string | undefined>;
+  poster: PropType<string | undefined>;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  ready: (_player: PlayerHandle) => boolean;
+  'update:volume': (_volume: number) => boolean;
+  'update:muted': (_muted: boolean) => boolean;
+  'update:playbackRate': (_rate: number) => boolean;
+  abort: (event: Event) => boolean;
+  canplay: (event: Event) => boolean;
+  canplaythrough: (event: Event) => boolean;
+  durationchange: (event: Event) => boolean;
+  emptied: (event: Event) => boolean;
+  ended: (event: Event) => boolean;
+  enterpictureinpicture: (event: Event) => boolean;
+  error: (event: Event) => boolean;
+  leavepictureinpicture: (event: Event) => boolean;
+  loadeddata: (event: Event) => boolean;
+  loadedmetadata: (event: Event) => boolean;
+  loadstart: (event: Event) => boolean;
+  pause: (event: Event) => boolean;
+  play: (event: Event) => boolean;
+  playing: (event: Event) => boolean;
+  progress: (event: Event) => boolean;
+  ratechange: (event: Event) => boolean;
+  seeked: (event: Event) => boolean;
+  seeking: (event: Event) => boolean;
+  stalled: (event: Event) => boolean;
+  suspend: (event: Event) => boolean;
+  timeupdate: (event: Event) => boolean;
+  volumechange: (event: Event) => boolean;
+  waiting: (event: Event) => boolean;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  title: PropType<string | undefined>;
+  poster: PropType<string | undefined>;
+}>> & Readonly<{
+  onAbort?: (event: Event) => any;
+  onCanplay?: (event: Event) => any;
+  onCanplaythrough?: (event: Event) => any;
+  onDurationchange?: (event: Event) => any;
+  onEmptied?: (event: Event) => any;
+  onEnded?: (event: Event) => any;
+  onEnterpictureinpicture?: (event: Event) => any;
+  onError?: (event: Event) => any;
+  onLeavepictureinpicture?: (event: Event) => any;
+  onLoadeddata?: (event: Event) => any;
+  onLoadedmetadata?: (event: Event) => any;
+  onLoadstart?: (event: Event) => any;
+  onPause?: (event: Event) => any;
+  onPlay?: (event: Event) => any;
+  onPlaying?: (event: Event) => any;
+  onProgress?: (event: Event) => any;
+  onRatechange?: (event: Event) => any;
+  onReady?: (_player: PlayerHandle) => any;
+  onSeeked?: (event: Event) => any;
+  onSeeking?: (event: Event) => any;
+  onStalled?: (event: Event) => any;
+  onSuspend?: (event: Event) => any;
+  onTimeupdate?: (event: Event) => any;
+  "onUpdate:muted"?: (_muted: boolean) => any;
+  "onUpdate:playbackRate"?: (_rate: number) => any;
+  "onUpdate:volume"?: (_volume: number) => any;
+  onVolumechange?: (event: Event) => any;
+  onWaiting?: (event: Event) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * Vue component ref exposes the player handle alongside the standard instance.
+ */
+export declare const PlayerRoot: typeof component & {
+  new (): InstanceType<typeof component> & PlayerHandle;
+};
+//#endregion
+export {};

package/dist/player/PlayerRoot.js

@@ -0,0 +1,43 @@
+import "../register/video/player.js";
+import { PLAYER_CONTEXT } from "./context.js";
+import { createPlayerActions } from "./actions.js";
+import { createPlayerEmits } from "./events.js";
+import { preservePlayerTree } from "./preservePlayerTree.js";
+import { usePlayerRoot } from "./usePlayerRoot.js";
+import { defineComponent, h, provide, withDirectives } from "vue";
+//#region src/player/PlayerRoot.ts
+const playerEmits = createPlayerEmits();
+/**
+* Vue component ref exposes the player handle alongside the standard instance.
+*/
+const PlayerRoot = defineComponent({
+	name: "PlayerRoot",
+	inheritAttrs: false,
+	props: {
+		title: String,
+		poster: String
+	},
+	emits: playerEmits,
+	setup(props, { attrs, slots, emit, expose }) {
+		const { element, handle } = usePlayerRoot(createPlayerActions, {
+			onReady: () => emit("ready", handle),
+			onMediaEvent: emit,
+			onVolume: (volume) => emit("update:volume", volume),
+			onMuted: (muted) => emit("update:muted", muted),
+			onPlaybackRate: (rate) => emit("update:playbackRate", rate)
+		});
+		provide(PLAYER_CONTEXT, handle);
+		expose(handle);
+		return () => {
+			var _slots$default;
+			return withDirectives(h("video-player", {
+				...attrs,
+				ref: element,
+				"content-title": props.title,
+				poster: props.poster
+			}, (_slots$default = slots["default"]) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)), [[preservePlayerTree]]);
+		};
+	}
+});
+//#endregion
+export { PlayerRoot, playerEmits };

package/dist/player/actions.d.ts

@@ -0,0 +1,17 @@
+import { PlayerActions, PlayerStore } from "./types.js";
+import { AudioPlayerStore } from "@videojs/html";
+//#region src/player/actions.d.ts
+export type CommonPlayerActions = Pick<AudioPlayerStore, 'play' | 'pause' | 'seek' | 'setVolume' | 'setMuted' | 'setPlaybackRate'>;
+/**
+ * Resolve shared playback commands against the active store on every call.
+ * @param {() => AudioPlayerStore | null} getStore - Reads the currently active audio or video store.
+ * @returns {CommonPlayerActions} Commands bound to the current player.
+ */
+export declare function createCommonPlayerActions(getStore: () => AudioPlayerStore | null): CommonPlayerActions;
+/**
+ * Resolve on every call so actions cannot retain an unmounted player's store.
+ * @param {() => PlayerStore | null} getStore - Reads the currently active store.
+ * @returns {PlayerActions} Commands bound to the current player.
+ */
+export declare function createPlayerActions(getStore: () => PlayerStore | null): PlayerActions;
+//#endregion

package/dist/{actions-CRZ5C4-3.js → player/actions.js}

@@ -56,4 +56,4 @@ function createPlayerActions(getStore) {
 	};
 }
 //#endregion
-export { createPlayerActions as n, createCommonPlayerActions as t };
+export { createCommonPlayerActions, createPlayerActions };

package/dist/player/context.d.ts

@@ -0,0 +1,18 @@
+import { PlayerMedia } from "../media/types.js";
+import { PlayerHandle, PlayerTarget } from "./types.js";
+import { MediaEventName } from "../media/events.js";
+import { AudioPlayerHandle } from "../audio/types.js";
+import { InjectionKey, MaybeRefOrGetter } from "vue";
+//#region src/player/context.d.ts
+interface MediaContext {
+  handle: Pick<AudioPlayerHandle, 'media' | 'store'>;
+  setMedia: (media: PlayerMedia | null) => void;
+  onMediaEvent: (name: MediaEventName, event: Event) => void;
+}
+export declare const MEDIA_CONTEXT: InjectionKey<MediaContext>;
+export declare const PLAYER_CONTEXT: InjectionKey<PlayerHandle>;
+export declare const AUDIO_PLAYER_CONTEXT: InjectionKey<AudioPlayerHandle>;
+export declare function useTarget<Handle>(key: InjectionKey<Handle>, rootName: string, target?: MaybeRefOrGetter<Handle | null | undefined>): import("vue").ComputedRef<Handle | null | undefined>;
+export declare function usePlayerTarget(target?: PlayerTarget): import("vue").ComputedRef<PlayerHandle | null | undefined>;
+//#endregion
+export {};

package/dist/{context-Zjy9Z5Uy.js → player/context.js}

@@ -13,4 +13,4 @@ function usePlayerTarget(target) {
 	return useTarget(PLAYER_CONTEXT, "PlayerRoot", target);
 }
 //#endregion
-export { useTarget as a, usePlayerTarget as i, MEDIA_CONTEXT as n, PLAYER_CONTEXT as r, AUDIO_PLAYER_CONTEXT as t };
+export { AUDIO_PLAYER_CONTEXT, MEDIA_CONTEXT, PLAYER_CONTEXT, usePlayerTarget, useTarget };

package/dist/player/events.d.ts

@@ -0,0 +1,32 @@
+//#region src/player/events.d.ts
+export declare function createPlayerEmits<Handle>(): {
+  ready: (_player: Handle) => boolean;
+  'update:volume': (_volume: number) => boolean;
+  'update:muted': (_muted: boolean) => boolean;
+  'update:playbackRate': (_rate: number) => boolean;
+  abort: (event: Event) => boolean;
+  canplay: (event: Event) => boolean;
+  canplaythrough: (event: Event) => boolean;
+  durationchange: (event: Event) => boolean;
+  emptied: (event: Event) => boolean;
+  ended: (event: Event) => boolean;
+  enterpictureinpicture: (event: Event) => boolean;
+  error: (event: Event) => boolean;
+  leavepictureinpicture: (event: Event) => boolean;
+  loadeddata: (event: Event) => boolean;
+  loadedmetadata: (event: Event) => boolean;
+  loadstart: (event: Event) => boolean;
+  pause: (event: Event) => boolean;
+  play: (event: Event) => boolean;
+  playing: (event: Event) => boolean;
+  progress: (event: Event) => boolean;
+  ratechange: (event: Event) => boolean;
+  seeked: (event: Event) => boolean;
+  seeking: (event: Event) => boolean;
+  stalled: (event: Event) => boolean;
+  suspend: (event: Event) => boolean;
+  timeupdate: (event: Event) => boolean;
+  volumechange: (event: Event) => boolean;
+  waiting: (event: Event) => boolean;
+};
+//#endregion

package/dist/player/events.js

@@ -0,0 +1,13 @@
+import { mediaEmits } from "../media/events.js";
+//#region src/player/events.ts
+function createPlayerEmits() {
+	return {
+		...mediaEmits,
+		ready: (_player) => true,
+		"update:volume": (_volume) => true,
+		"update:muted": (_muted) => true,
+		"update:playbackRate": (_rate) => true
+	};
+}
+//#endregion
+export { createPlayerEmits };

package/dist/player/preservePlayerTree.d.ts

@@ -0,0 +1,8 @@
+import { ObjectDirective } from "vue";
+//#region src/player/preservePlayerTree.d.ts
+/**
+ * Vue owns disposal of a player's custom elements, including skin shadow controls.
+ * Upstream otherwise permanently destroys them after two disconnected frames.
+ */
+export declare const preservePlayerTree: ObjectDirective<HTMLElement>;
+//#endregion

package/dist/player/preservePlayerTree.js

@@ -0,0 +1,64 @@
+//#region src/player/preservePlayerTree.ts
+function isDestroyable(element) {
+	return "destroy" in element && typeof element.destroy === "function" && "destroyed" in element && typeof element.destroyed === "boolean";
+}
+const disposals = /* @__PURE__ */ new WeakMap();
+/**
+* Vue owns disposal of a player's custom elements, including skin shadow controls.
+* Upstream otherwise permanently destroys them after two disconnected frames.
+*/
+const preservePlayerTree = {
+	beforeMount(root) {
+		const retained = /* @__PURE__ */ new Map();
+		const observer = new MutationObserver((records) => {
+			if (records.some((record) => [...record.addedNodes, ...record.removedNodes].some((node) => node.nodeType === 1))) sync();
+		});
+		function release(element, hadKeepAlive) {
+			if (!hadKeepAlive) element.removeAttribute("keep-alive");
+			if (!element.isConnected && !element.destroyed) element.destroy();
+		}
+		function sync() {
+			observer.disconnect();
+			observer.observe(root, {
+				childList: true,
+				subtree: true
+			});
+			const current = /* @__PURE__ */ new Set();
+			function visit(element) {
+				if (isDestroyable(element)) {
+					current.add(element);
+					if (!retained.has(element)) {
+						retained.set(element, element.hasAttribute("keep-alive"));
+						element.setAttribute("keep-alive", "");
+					}
+				}
+				for (const child of element.children) visit(child);
+				if (element.shadowRoot) {
+					observer.observe(element.shadowRoot, {
+						childList: true,
+						subtree: true
+					});
+					for (const child of element.shadowRoot.children) visit(child);
+				}
+			}
+			visit(root);
+			for (const [element, hadKeepAlive] of retained) if (!current.has(element)) {
+				retained.delete(element);
+				release(element, hadKeepAlive);
+			}
+		}
+		sync();
+		disposals.set(root, () => {
+			observer.disconnect();
+			for (const [element, hadKeepAlive] of retained) release(element, hadKeepAlive);
+			retained.clear();
+		});
+	},
+	unmounted(root) {
+		var _disposals$get;
+		(_disposals$get = disposals.get(root)) === null || _disposals$get === void 0 || _disposals$get();
+		disposals.delete(root);
+	}
+};
+//#endregion
+export { preservePlayerTree };

package/dist/player/types.d.ts

@@ -0,0 +1,22 @@
+import { MediaTrack, PlayerMedia } from "../media/types.js";
+import { MaybeRefOrGetter } from "vue";
+import { VideoPlayerStore } from "@videojs/html";
+import { VideoPlayerElement } from "@videojs/html/video";
+//#region src/player/types.d.ts
+export type PlayerStore = VideoPlayerStore;
+export type PlayerElement = Omit<VideoPlayerElement, 'store'> & {
+  readonly store: PlayerStore;
+};
+export type PlayerState = PlayerStore['state'];
+export type PlayerActions = Pick<PlayerStore, 'play' | 'pause' | 'seek' | 'setVolume' | 'setMuted' | 'setPlaybackRate' | 'requestFullscreen' | 'exitFullscreen' | 'requestPictureInPicture' | 'exitPictureInPicture'>;
+/**
+ * Live getters become null when the player is inactive or unmounted.
+ */
+export interface PlayerHandle extends PlayerActions {
+  readonly element: PlayerElement | null;
+  readonly store: PlayerStore | null;
+  readonly media: PlayerMedia | null;
+}
+export type PlayerTarget = MaybeRefOrGetter<PlayerHandle | null | undefined>;
+//#endregion
+export type { MediaTrack, PlayerMedia };

package/dist/player/usePlayerRoot.d.ts

@@ -0,0 +1,32 @@
+import { PlayerMedia } from "../media/types.js";
+import { MediaEventName } from "../media/events.js";
+import { CommonPlayerActions } from "./actions.js";
+import { ShallowRef } from "vue";
+import { AudioPlayerStore } from "@videojs/html";
+//#region src/player/usePlayerRoot.d.ts
+interface RootCallbacks {
+  onReady: () => void;
+  onMediaEvent: (name: MediaEventName, event: Event) => void;
+  onVolume: (volume: number) => void;
+  onMuted: (muted: boolean) => void;
+  onPlaybackRate: (rate: number) => void;
+}
+/**
+ * Share lifecycle and media synchronization without registering either preset.
+ * @param {(getStore: () => Store | null) => Actions} createActions - Binds the preset's commands to the active store.
+ * @param {RootCallbacks} callbacks - Forward lifecycle, media, and confirmed setting events.
+ * @returns {object} The root element ref and live player handle.
+ */
+export declare function usePlayerRoot<Store extends AudioPlayerStore, Element extends HTMLElement & {
+  readonly store: Store;
+  readonly updateComplete: Promise<boolean>;
+}, Actions extends CommonPlayerActions>(createActions: (getStore: () => Store | null) => Actions, callbacks: RootCallbacks): {
+  element: ShallowRef<Element | null>;
+  handle: Actions & {
+    readonly element: Element | null;
+    readonly store: Store | null;
+    readonly media: PlayerMedia | null;
+  };
+};
+//#endregion
+export {};