@videojs/react 10.0.0-beta.26 → 10.0.0-beta.27

package/dist/dev/player/container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"container.d.ts","names":[],"sources":["../../../src/player/container.tsx"],"mappings":";;UASiB,uBAAuB,eAAe;EACrD,WAAW;;cAGA,2BAAS,0BAAA,iCAAA,cAAA;kBA+CL;OACH,QAAQ"}
+{"version":3,"file":"container.d.ts","names":[],"sources":["../../../src/player/container.tsx"],"mappings":";;UAuBiB,uBAAuB,eAAe;EACrD,WAAW;;cAGA,2BAAS,0BAAA,iCAAA,cAAA;kBAgDL;OACH,QAAQ"}

package/dist/dev/player/container.js

@@ -2,14 +2,16 @@
 import { useTranslator } from "../i18n/context.js";
 import { useComposedRefs } from "../utils/use-composed-refs.js";
 import { useContainerAttach } from "./context.js";
-import { DEFAULT_CONTAINER_ROLE, DEFAULT_CONTAINER_TAB_INDEX, focusContainer } from "@videojs/core/dom";
-import { forwardRef, useEffect, useRef } from "react";
+import { PopupGroupProvider } from "./popup-group-context.js";
+import { DEFAULT_CONTAINER_ROLE, DEFAULT_CONTAINER_TAB_INDEX, createPopupGroup, focusContainer } from "@videojs/core/dom";
+import { forwardRef, useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { labelText } from "@videojs/core/i18n/text/container";
 //#region src/player/container.tsx
 const Container = forwardRef(function Container({ children, tabIndex = DEFAULT_CONTAINER_TAB_INDEX, role = DEFAULT_CONTAINER_ROLE, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) {
 	const setContainer = useContainerAttach();
 	const translator = useTranslator();
+	const [popupGroup] = useState(() => createPopupGroup());
 	const internalRef = useRef(null);
 	const composedRef = useComposedRefs(ref, internalRef);
 	useEffect(() => {
@@ -32,7 +34,10 @@ const Container = forwardRef(function Container({ children, tabIndex = DEFAULT_C
 		} : { "aria-label": translator(labelText) },
 		...props,
 		onPointerUp: handlePointerUp,
-		children
+		children: /* @__PURE__ */ jsx(PopupGroupProvider, {
+			value: popupGroup,
+			children
+		})
 	});
 });
 //#endregion

package/dist/dev/player/container.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.js","names":[],"sources":["../../../src/player/container.tsx"],"sourcesContent":["'use client';\n\nimport { DEFAULT_CONTAINER_ROLE, DEFAULT_CONTAINER_TAB_INDEX, focusContainer } from '@videojs/core/dom';\nimport { labelText } from '@videojs/core/i18n/text/container';\nimport { forwardRef, type HTMLAttributes, type PointerEventHandler, type ReactNode, useEffect, useRef } from 'react';\nimport { useTranslator } from '../i18n/context';\nimport { useComposedRefs } from '../utils/use-composed-refs';\nimport { useContainerAttach } from './context';\n\nexport interface ContainerProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n}\n\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(function Container(\n  {\n    children,\n    tabIndex = DEFAULT_CONTAINER_TAB_INDEX,\n    role = DEFAULT_CONTAINER_ROLE,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    ...props\n  },\n  ref\n) {\n  const setContainer = useContainerAttach();\n  const translator = useTranslator();\n  const internalRef = useRef<HTMLDivElement>(null);\n  const composedRef = useComposedRefs(ref, internalRef);\n\n  useEffect(() => {\n    setContainer?.(internalRef.current);\n    return () => setContainer?.(null);\n  }, [setContainer]);\n\n  const handlePointerUp: PointerEventHandler<HTMLDivElement> = (event) => {\n    props.onPointerUp?.(event);\n    const el = internalRef.current;\n    if (!el) return;\n    focusContainer(el);\n  };\n\n  const accessibleNameProps =\n    ariaLabel !== undefined || ariaLabelledBy !== undefined\n      ? { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy }\n      : { 'aria-label': translator(labelText) };\n\n  return (\n    <div\n      ref={composedRef}\n      role={role}\n      tabIndex={tabIndex}\n      {...accessibleNameProps}\n      {...props}\n      onPointerUp={handlePointerUp}\n    >\n      {children}\n    </div>\n  );\n});\n\nexport namespace Container {\n  export type Props = ContainerProps;\n}\n"],"mappings":";;;;;;;;;AAaA,MAAa,YAAY,WAA2C,SAAS,UAC3E,EACE,UACA,WAAW,6BACX,OAAO,wBACP,cAAc,WACd,mBAAmB,gBACnB,GAAG,SAEL,KACA;CACA,MAAM,eAAe,mBAAmB;CACxC,MAAM,aAAa,cAAc;CACjC,MAAM,cAAc,OAAuB,IAAI;CAC/C,MAAM,cAAc,gBAAgB,KAAK,WAAW;CAEpD,gBAAgB;EACd,eAAe,YAAY,OAAO;EAClC,aAAa,eAAe,IAAI;CAClC,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,mBAAwD,UAAU;EACtE,MAAM,cAAc,KAAK;EACzB,MAAM,KAAK,YAAY;EACvB,IAAI,CAAC,IAAI;EACT,eAAe,EAAE;CACnB;CAOA,OACE,oBAAC,OAAD;EACE,KAAK;EACC;EACI;EACV,GATF,cAAc,KAAA,KAAa,mBAAmB,KAAA,IAC1C;GAAE,cAAc;GAAW,mBAAmB;EAAe,IAC7D,EAAE,cAAc,WAAW,SAAS,EAAE;EAQxC,GAAI;EACJ,aAAa;EAEZ;CACE,CAAA;AAET,CAAC"}
+{"version":3,"file":"container.js","names":[],"sources":["../../../src/player/container.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createPopupGroup,\n  DEFAULT_CONTAINER_ROLE,\n  DEFAULT_CONTAINER_TAB_INDEX,\n  focusContainer,\n} from '@videojs/core/dom';\nimport { labelText } from '@videojs/core/i18n/text/container';\nimport {\n  forwardRef,\n  type HTMLAttributes,\n  type PointerEventHandler,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useTranslator } from '../i18n/context';\nimport { useComposedRefs } from '../utils/use-composed-refs';\nimport { useContainerAttach } from './context';\nimport { PopupGroupProvider } from './popup-group-context';\n\nexport interface ContainerProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n}\n\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(function Container(\n  {\n    children,\n    tabIndex = DEFAULT_CONTAINER_TAB_INDEX,\n    role = DEFAULT_CONTAINER_ROLE,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    ...props\n  },\n  ref\n) {\n  const setContainer = useContainerAttach();\n  const translator = useTranslator();\n  const [popupGroup] = useState(() => createPopupGroup());\n  const internalRef = useRef<HTMLDivElement>(null);\n  const composedRef = useComposedRefs(ref, internalRef);\n\n  useEffect(() => {\n    setContainer?.(internalRef.current);\n    return () => setContainer?.(null);\n  }, [setContainer]);\n\n  const handlePointerUp: PointerEventHandler<HTMLDivElement> = (event) => {\n    props.onPointerUp?.(event);\n    const el = internalRef.current;\n    if (!el) return;\n    focusContainer(el);\n  };\n\n  const accessibleNameProps =\n    ariaLabel !== undefined || ariaLabelledBy !== undefined\n      ? { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy }\n      : { 'aria-label': translator(labelText) };\n\n  return (\n    <div\n      ref={composedRef}\n      role={role}\n      tabIndex={tabIndex}\n      {...accessibleNameProps}\n      {...props}\n      onPointerUp={handlePointerUp}\n    >\n      <PopupGroupProvider value={popupGroup}>{children}</PopupGroupProvider>\n    </div>\n  );\n});\n\nexport namespace Container {\n  export type Props = ContainerProps;\n}\n"],"mappings":";;;;;;;;;;AA2BA,MAAa,YAAY,WAA2C,SAAS,UAC3E,EACE,UACA,WAAW,6BACX,OAAO,wBACP,cAAc,WACd,mBAAmB,gBACnB,GAAG,SAEL,KACA;CACA,MAAM,eAAe,mBAAmB;CACxC,MAAM,aAAa,cAAc;CACjC,MAAM,CAAC,cAAc,eAAe,iBAAiB,CAAC;CACtD,MAAM,cAAc,OAAuB,IAAI;CAC/C,MAAM,cAAc,gBAAgB,KAAK,WAAW;CAEpD,gBAAgB;EACd,eAAe,YAAY,OAAO;EAClC,aAAa,eAAe,IAAI;CAClC,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,mBAAwD,UAAU;EACtE,MAAM,cAAc,KAAK;EACzB,MAAM,KAAK,YAAY;EACvB,IAAI,CAAC,IAAI;EACT,eAAe,EAAE;CACnB;CAOA,OACE,oBAAC,OAAD;EACE,KAAK;EACC;EACI;EACV,GATF,cAAc,KAAA,KAAa,mBAAmB,KAAA,IAC1C;GAAE,cAAc;GAAW,mBAAmB;EAAe,IAC7D,EAAE,cAAc,WAAW,SAAS,EAAE;EAQxC,GAAI;EACJ,aAAa;EAEb,UAAA,oBAAC,oBAAD;GAAoB,OAAO;GAAa;EAA6B,CAAA;CAClE,CAAA;AAET,CAAC"}

package/dist/dev/player/context.d.ts

@@ -1,4 +1,4 @@
-import { MediaContainer, PopupGroup } from "@videojs/core/dom";
+import { MediaContainer } from "@videojs/core/dom";
 import { Media } from "@videojs/media";
 import { UnknownState, UnknownStore } from "@videojs/store";
 import { Dispatch, ReactNode, SetStateAction } from "react";
@@ -9,12 +9,11 @@ interface PlayerContextValue {
   setMedia: Dispatch<SetStateAction<Media | null>>;
   container: MediaContainer | null;
   setContainer: Dispatch<SetStateAction<HTMLElement | null>>;
-  popupGroup?: PopupGroup;
 }
-/** Access the full player context value. Throws if used outside a Player Provider. */
+/** Access the full player context value. Throws if used outside a Player. */
 declare function usePlayerContext(): PlayerContextValue;
 /**
- * Access the player store from within a Player Provider.
+ * Access the player store from within a Player.
  *
  * This standalone hook has no knowledge of your configured features, so it
  * returns an untyped `UnknownStore` whose state properties are typed as
@@ -35,7 +34,7 @@ declare function usePlayer(): UnknownStore;
  */
 declare function usePlayer<R>(selector: (state: UnknownState) => R): R;
 /**
- * Access player state when available, but return `undefined` outside Provider.
+ * Access player state when available, but return `undefined` outside a Player.
  *
  * This is useful for components that can operate without player context
  * (e.g. they accept fully explicit props as a fallback).
@@ -44,11 +43,11 @@ declare function usePlayer<R>(selector: (state: UnknownState) => R): R;
 declare function useOptionalPlayer(): UnknownStore | undefined;
 /** @label With Selector */
 declare function useOptionalPlayer<R>(selector: (state: UnknownState) => R): R | undefined;
-/** Access the media element from within a Player Provider. */
+/** Access the media element from within a Player. */
 declare function useMedia(): Media | null;
-/** Access the container element from within a Player Provider. */
+/** Access the container element from within a Player. */
 declare function useContainer(): MediaContainer | null;
-/** Access the container element when a Player Provider is available. */
+/** Access the container element when a Player is available. */
 declare function useOptionalContainer(): MediaContainer | null;
 /** Access the media attach setter for connecting a media element to the player. */
 declare function useMediaAttach(): Dispatch<SetStateAction<Media | null>> | undefined;

package/dist/dev/player/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","names":[],"sources":["../../../src/player/context.tsx"],"mappings":";;;;;UASiB;EACf,OAAO;EACP,OAAO;EACP,UAAU,SAAS,eAAe;EAClC,WAAW;EACX,cAAc,SAAS,eAAe;EACtC,aAAa;;;iBAqBC,oBAAoB;;;;;;;;;;;iBAgBpB,aAAa;;;;;;;;;;iBAUb,UAAU,GAAG,WAAW,OAAO,iBAAiB,IAAI;;;;;;;;iBAapD,qBAAqB;;iBAErB,kBAAkB,GAAG,WAAW,OAAO,iBAAiB,IAAI;;iBAS5D,YAAY;;iBAMZ,gBAAgB;;iBAMhB,wBAAwB;;iBAYxB,kBAAkB,SAAS,eAAe;;iBAM1C,sBAAsB,SAAS,eAAe"}
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../../src/player/context.tsx"],"mappings":";;;;;UASiB;EACf,OAAO;EACP,OAAO;EACP,UAAU,SAAS,eAAe;EAClC,WAAW;EACX,cAAc,SAAS,eAAe;;;iBAqBxB,oBAAoB;;;;;;;;;;;iBAgBpB,aAAa;;;;;;;;;;iBAUb,UAAU,GAAG,WAAW,OAAO,iBAAiB,IAAI;;;;;;;;iBAapD,qBAAqB;;iBAErB,kBAAkB,GAAG,WAAW,OAAO,iBAAiB,IAAI;;iBAS5D,YAAY;;iBAMZ,gBAAgB;;iBAMhB,wBAAwB;;iBAMxB,kBAAkB,SAAS,eAAe;;iBAM1C,sBAAsB,SAAS,eAAe"}

package/dist/dev/player/context.js

@@ -15,10 +15,10 @@ function PlayerContextProvider({ value, children }) {
 		children
 	});
 }
-/** Access the full player context value. Throws if used outside a Player Provider. */
+/** Access the full player context value. Throws if used outside a Player. */
 function usePlayerContext() {
 	const ctx = useContext(PlayerContext);
-	if (!ctx) throw new Error("usePlayerContext must be used within a Player Provider");
+	if (!ctx) throw new Error("usePlayerContext must be used within a Player");
 	return ctx;
 }
 function usePlayer(selector) {
@@ -30,24 +30,20 @@ function useOptionalPlayer(selector) {
 	const value = useStore(ctx?.store ?? EMPTY_STORE, ctx ? selector : void 0);
 	return ctx ? value : void 0;
 }
-/** Access the media element from within a Player Provider. */
+/** Access the media element from within a Player. */
 function useMedia() {
 	const { media } = usePlayerContext();
 	return media;
 }
-/** Access the container element from within a Player Provider. */
+/** Access the container element from within a Player. */
 function useContainer() {
 	const { container } = usePlayerContext();
 	return container;
 }
-/** Access the container element when a Player Provider is available. */
+/** Access the container element when a Player is available. */
 function useOptionalContainer() {
 	return useContext(PlayerContext)?.container ?? null;
 }
-/** Access the interactive popup group when a Player Provider is available. */
-function useOptionalPopupGroup() {
-	return useContext(PlayerContext)?.popupGroup;
-}
 /** Access the media attach setter for connecting a media element to the player. */
 function useMediaAttach() {
 	return useContext(PlayerContext)?.setMedia;
@@ -57,6 +53,6 @@ function useContainerAttach() {
 	return useContext(PlayerContext)?.setContainer;
 }
 //#endregion
-export { PlayerContextProvider, useContainer, useContainerAttach, useMedia, useMediaAttach, useOptionalContainer, useOptionalPlayer, useOptionalPopupGroup, usePlayer, usePlayerContext };
+export { PlayerContextProvider, useContainer, useContainerAttach, useMedia, useMediaAttach, useOptionalContainer, useOptionalPlayer, usePlayer, usePlayerContext };
 
 //# sourceMappingURL=context.js.map

package/dist/dev/player/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/player/context.tsx"],"sourcesContent":["'use client';\n\nimport type { MediaContainer, PopupGroup } from '@videojs/core/dom';\nimport type { Media } from '@videojs/media';\nimport type { UnknownState, UnknownStore } from '@videojs/store';\nimport { useStore } from '@videojs/store/react';\nimport type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport { createContext, useContext } from 'react';\n\nexport interface PlayerContextValue {\n  store: UnknownStore;\n  media: Media | null;\n  setMedia: Dispatch<SetStateAction<Media | null>>;\n  container: MediaContainer | null;\n  setContainer: Dispatch<SetStateAction<HTMLElement | null>>;\n  popupGroup?: PopupGroup;\n}\n\nconst PlayerContext = createContext<PlayerContextValue | null>(null);\nconst EMPTY_UNSUBSCRIBE = () => {};\nconst EMPTY_STORE = {\n  state: {} as UnknownState,\n  subscribe: () => EMPTY_UNSUBSCRIBE,\n} as Pick<UnknownStore, 'state' | 'subscribe'>;\n\nexport function PlayerContextProvider({\n  value,\n  children,\n}: {\n  value: PlayerContextValue;\n  children: ReactNode;\n}): ReactNode {\n  return <PlayerContext.Provider value={value}>{children}</PlayerContext.Provider>;\n}\n\n/** Access the full player context value. Throws if used outside a Player Provider. */\nexport function usePlayerContext(): PlayerContextValue {\n  const ctx = useContext(PlayerContext);\n  if (!ctx) throw new Error('usePlayerContext must be used within a Player Provider');\n  return ctx;\n}\n\n/**\n * Access the player store from within a Player Provider.\n *\n * This standalone hook has no knowledge of your configured features, so it\n * returns an untyped `UnknownStore` whose state properties are typed as\n * `unknown`. For typed access, use the `usePlayer` returned by `createPlayer()`,\n * or pass a premade selector to recover the type from its return value.\n *\n * @label Without Selector\n */\nexport function usePlayer(): UnknownStore;\n/**\n * Select a value from the player store. Re-renders when the selected value changes.\n *\n * The selector receives `UnknownState`, so an inline selector returns `unknown`.\n * Pass a premade selector (e.g. `selectPlayback`) to get a typed result.\n *\n * @label With Selector\n * @param selector - Derives a value from the player store state.\n */\nexport function usePlayer<R>(selector: (state: UnknownState) => R): R;\nexport function usePlayer<R>(selector?: (state: UnknownState) => R) {\n  const { store } = usePlayerContext();\n  return useStore(store, selector as any);\n}\n\n/**\n * Access player state when available, but return `undefined` outside Provider.\n *\n * This is useful for components that can operate without player context\n * (e.g. they accept fully explicit props as a fallback).\n */\n/** @label Without Selector */\nexport function useOptionalPlayer(): UnknownStore | undefined;\n/** @label With Selector */\nexport function useOptionalPlayer<R>(selector: (state: UnknownState) => R): R | undefined;\nexport function useOptionalPlayer<R>(selector?: (state: UnknownState) => R) {\n  const ctx = useContext(PlayerContext);\n  const store = (ctx?.store ?? (EMPTY_STORE as unknown as UnknownStore)) as UnknownStore;\n  const value = useStore(store, (ctx ? selector : undefined) as any);\n  return ctx ? value : undefined;\n}\n\n/** Access the media element from within a Player Provider. */\nexport function useMedia(): Media | null {\n  const { media } = usePlayerContext();\n  return media;\n}\n\n/** Access the container element from within a Player Provider. */\nexport function useContainer(): MediaContainer | null {\n  const { container } = usePlayerContext();\n  return container;\n}\n\n/** Access the container element when a Player Provider is available. */\nexport function useOptionalContainer(): MediaContainer | null {\n  const ctx = useContext(PlayerContext);\n  return ctx?.container ?? null;\n}\n\n/** Access the interactive popup group when a Player Provider is available. */\nexport function useOptionalPopupGroup(): PopupGroup | undefined {\n  const ctx = useContext(PlayerContext);\n  return ctx?.popupGroup;\n}\n\n/** Access the media attach setter for connecting a media element to the player. */\nexport function useMediaAttach(): Dispatch<SetStateAction<Media | null>> | undefined {\n  const ctx = useContext(PlayerContext);\n  return ctx?.setMedia;\n}\n\n/** Access the container attach setter for connecting a container element to the player. */\nexport function useContainerAttach(): Dispatch<SetStateAction<HTMLElement | null>> | undefined {\n  const ctx = useContext(PlayerContext);\n  return ctx?.setContainer;\n}\n"],"mappings":";;;;;AAkBA,MAAM,gBAAgB,cAAyC,IAAI;AACnE,MAAM,0BAA0B,CAAC;AACjC,MAAM,cAAc;CAClB,OAAO,CAAC;CACR,iBAAiB;AACnB;AAEA,SAAgB,sBAAsB,EACpC,OACA,YAIY;CACZ,OAAO,oBAAC,cAAc,UAAf;EAA+B;EAAQ;CAAiC,CAAA;AACjF;;AAGA,SAAgB,mBAAuC;CACrD,MAAM,MAAM,WAAW,aAAa;CACpC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,wDAAwD;CAClF,OAAO;AACT;AAuBA,SAAgB,UAAa,UAAuC;CAClE,MAAM,EAAE,UAAU,iBAAiB;CACnC,OAAO,SAAS,OAAO,QAAe;AACxC;AAYA,SAAgB,kBAAqB,UAAuC;CAC1E,MAAM,MAAM,WAAW,aAAa;CAEpC,MAAM,QAAQ,SADC,KAAK,SAAU,aACC,MAAM,WAAW,KAAA,CAAiB;CACjE,OAAO,MAAM,QAAQ,KAAA;AACvB;;AAGA,SAAgB,WAAyB;CACvC,MAAM,EAAE,UAAU,iBAAiB;CACnC,OAAO;AACT;;AAGA,SAAgB,eAAsC;CACpD,MAAM,EAAE,cAAc,iBAAiB;CACvC,OAAO;AACT;;AAGA,SAAgB,uBAA8C;CAE5D,OADY,WAAW,aACd,CAAC,EAAE,aAAa;AAC3B;;AAGA,SAAgB,wBAAgD;CAE9D,OADY,WAAW,aACd,CAAC,EAAE;AACd;;AAGA,SAAgB,iBAAqE;CAEnF,OADY,WAAW,aACd,CAAC,EAAE;AACd;;AAGA,SAAgB,qBAA+E;CAE7F,OADY,WAAW,aACd,CAAC,EAAE;AACd"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/player/context.tsx"],"sourcesContent":["'use client';\n\nimport type { MediaContainer } from '@videojs/core/dom';\nimport type { Media } from '@videojs/media';\nimport type { UnknownState, UnknownStore } from '@videojs/store';\nimport { useStore } from '@videojs/store/react';\nimport type { Dispatch, ReactNode, SetStateAction } from 'react';\nimport { createContext, useContext } from 'react';\n\nexport interface PlayerContextValue {\n  store: UnknownStore;\n  media: Media | null;\n  setMedia: Dispatch<SetStateAction<Media | null>>;\n  container: MediaContainer | null;\n  setContainer: Dispatch<SetStateAction<HTMLElement | null>>;\n}\n\nconst PlayerContext = createContext<PlayerContextValue | null>(null);\nconst EMPTY_UNSUBSCRIBE = () => {};\nconst EMPTY_STORE = {\n  state: {} as UnknownState,\n  subscribe: () => EMPTY_UNSUBSCRIBE,\n} as Pick<UnknownStore, 'state' | 'subscribe'>;\n\nexport function PlayerContextProvider({\n  value,\n  children,\n}: {\n  value: PlayerContextValue;\n  children: ReactNode;\n}): ReactNode {\n  return <PlayerContext.Provider value={value}>{children}</PlayerContext.Provider>;\n}\n\n/** Access the full player context value. Throws if used outside a Player. */\nexport function usePlayerContext(): PlayerContextValue {\n  const ctx = useContext(PlayerContext);\n  if (!ctx) throw new Error('usePlayerContext must be used within a Player');\n  return ctx;\n}\n\n/**\n * Access the player store from within a Player.\n *\n * This standalone hook has no knowledge of your configured features, so it\n * returns an untyped `UnknownStore` whose state properties are typed as\n * `unknown`. For typed access, use the `usePlayer` returned by `createPlayer()`,\n * or pass a premade selector to recover the type from its return value.\n *\n * @label Without Selector\n */\nexport function usePlayer(): UnknownStore;\n/**\n * Select a value from the player store. Re-renders when the selected value changes.\n *\n * The selector receives `UnknownState`, so an inline selector returns `unknown`.\n * Pass a premade selector (e.g. `selectPlayback`) to get a typed result.\n *\n * @label With Selector\n * @param selector - Derives a value from the player store state.\n */\nexport function usePlayer<R>(selector: (state: UnknownState) => R): R;\nexport function usePlayer<R>(selector?: (state: UnknownState) => R) {\n  const { store } = usePlayerContext();\n  return useStore(store, selector as any);\n}\n\n/**\n * Access player state when available, but return `undefined` outside a Player.\n *\n * This is useful for components that can operate without player context\n * (e.g. they accept fully explicit props as a fallback).\n */\n/** @label Without Selector */\nexport function useOptionalPlayer(): UnknownStore | undefined;\n/** @label With Selector */\nexport function useOptionalPlayer<R>(selector: (state: UnknownState) => R): R | undefined;\nexport function useOptionalPlayer<R>(selector?: (state: UnknownState) => R) {\n  const ctx = useContext(PlayerContext);\n  const store = (ctx?.store ?? (EMPTY_STORE as unknown as UnknownStore)) as UnknownStore;\n  const value = useStore(store, (ctx ? selector : undefined) as any);\n  return ctx ? value : undefined;\n}\n\n/** Access the media element from within a Player. */\nexport function useMedia(): Media | null {\n  const { media } = usePlayerContext();\n  return media;\n}\n\n/** Access the container element from within a Player. */\nexport function useContainer(): MediaContainer | null {\n  const { container } = usePlayerContext();\n  return container;\n}\n\n/** Access the container element when a Player is available. */\nexport function useOptionalContainer(): MediaContainer | null {\n  const ctx = useContext(PlayerContext);\n  return ctx?.container ?? null;\n}\n\n/** Access the media attach setter for connecting a media element to the player. */\nexport function useMediaAttach(): Dispatch<SetStateAction<Media | null>> | undefined {\n  const ctx = useContext(PlayerContext);\n  return ctx?.setMedia;\n}\n\n/** Access the container attach setter for connecting a container element to the player. */\nexport function useContainerAttach(): Dispatch<SetStateAction<HTMLElement | null>> | undefined {\n  const ctx = useContext(PlayerContext);\n  return ctx?.setContainer;\n}\n"],"mappings":";;;;;AAiBA,MAAM,gBAAgB,cAAyC,IAAI;AACnE,MAAM,0BAA0B,CAAC;AACjC,MAAM,cAAc;CAClB,OAAO,CAAC;CACR,iBAAiB;AACnB;AAEA,SAAgB,sBAAsB,EACpC,OACA,YAIY;CACZ,OAAO,oBAAC,cAAc,UAAf;EAA+B;EAAQ;CAAiC,CAAA;AACjF;;AAGA,SAAgB,mBAAuC;CACrD,MAAM,MAAM,WAAW,aAAa;CACpC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,+CAA+C;CACzE,OAAO;AACT;AAuBA,SAAgB,UAAa,UAAuC;CAClE,MAAM,EAAE,UAAU,iBAAiB;CACnC,OAAO,SAAS,OAAO,QAAe;AACxC;AAYA,SAAgB,kBAAqB,UAAuC;CAC1E,MAAM,MAAM,WAAW,aAAa;CAEpC,MAAM,QAAQ,SADC,KAAK,SAAU,aACC,MAAM,WAAW,KAAA,CAAiB;CACjE,OAAO,MAAM,QAAQ,KAAA;AACvB;;AAGA,SAAgB,WAAyB;CACvC,MAAM,EAAE,UAAU,iBAAiB;CACnC,OAAO;AACT;;AAGA,SAAgB,eAAsC;CACpD,MAAM,EAAE,cAAc,iBAAiB;CACvC,OAAO;AACT;;AAGA,SAAgB,uBAA8C;CAE5D,OADY,WAAW,aACd,CAAC,EAAE,aAAa;AAC3B;;AAGA,SAAgB,iBAAqE;CAEnF,OADY,WAAW,aACd,CAAC,EAAE;AACd;;AAGA,SAAgB,qBAA+E;CAE7F,OADY,WAAW,aACd,CAAC,EAAE;AACd"}

package/dist/dev/player/create-player.d.ts

@@ -1,5 +1,4 @@
-import { Container } from "./container.js";
-import { AnyPlayerFeature, AudioFeatures, AudioPlayerStore, PlayerStore, VideoFeatures, VideoPlayerStore } from "@videojs/core/dom";
+import { AnyPlayerFeature, AudioFeatures, AudioPlayerStore, InferPlayerConfig, PlayerStore, VideoFeatures, VideoPlayerStore } from "@videojs/core/dom";
 import { Media } from "@videojs/media/dom";
 import { InferStoreState } from "@videojs/store";
 import { FC, ReactNode } from "react";
@@ -8,12 +7,11 @@ interface CreatePlayerConfig<Features extends AnyPlayerFeature[]> {
   features: Features;
   displayName?: string;
 }
-interface ProviderProps {
+type PlayerProps<Config = object> = { [Key in keyof Config]?: Config[Key] | undefined; } & {
   children: ReactNode;
-}
+};
 interface CreatePlayerResult<Store extends PlayerStore> {
-  Provider: FC<ProviderProps>;
-  Container: typeof Container;
+  Player: FC<PlayerProps<InferPlayerConfig<Store>>>;
   usePlayer: UsePlayerHook<Store>;
   useMedia: () => Media | null;
 }
@@ -22,7 +20,7 @@ type UsePlayerHook<Store extends PlayerStore> = {
   <R>(selector: (state: InferStoreState<Store>) => R): R;
 };
 /**
- * Create a player instance with typed store, Provider component, Container, and hooks.
+ * Create a player instance with a typed Player component and hooks.
  *
  * @label Video
  * @param config - Player configuration with features and optional display name.
@@ -43,5 +41,5 @@ declare function createPlayer(config: CreatePlayerConfig<AudioFeatures>): Create
  */
 declare function createPlayer<const Features extends AnyPlayerFeature[]>(config: CreatePlayerConfig<Features>): CreatePlayerResult<PlayerStore<Features>>;
 //#endregion
-export { CreatePlayerConfig, CreatePlayerResult, ProviderProps, UsePlayerHook, createPlayer };
+export { CreatePlayerConfig, CreatePlayerResult, PlayerProps, UsePlayerHook, createPlayer };
 //# sourceMappingURL=create-player.d.ts.map

package/dist/dev/player/create-player.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create-player.d.ts","names":[],"sources":["../../../src/player/create-player.tsx"],"mappings":";;;;;;UAwBiB,mBAAmB,iBAAiB;EACnD,UAAU;EACV;;UAGe;EACf,UAAU;;UAGK,mBAAmB,cAAc;EAChD,UAAU,GAAG;EACb,kBAAkB;EAClB,WAAW,cAAc;EACzB,gBAAgB;;KAGN,cAAc,cAAc;MAClC;GACH,GAAG,WAAW,OAAO,gBAAgB,WAAW,IAAI;;;;;;;;iBASvC,aAAa,QAAQ,mBAAmB,iBAAiB,mBAAmB;;;;;;;iBAQ5E,aAAa,QAAQ,mBAAmB,iBAAiB,mBAAmB;;;;;;;iBAQ5E,mBAAmB,iBAAiB,oBAClD,QAAQ,mBAAmB,YAC1B,mBAAmB,YAAY"}
+{"version":3,"file":"create-player.d.ts","names":[],"sources":["../../../src/player/create-player.tsx"],"mappings":";;;;;UA2BiB,mBAAmB,iBAAiB;EACnD,UAAU;EACV;;KAGU,YAAY,sBACrB,aAAa,UAAU,OAAO;EAE/B,UAAU;;UAGK,mBAAmB,cAAc;EAChD,QAAQ,GAAG,YAAY,kBAAkB;EACzC,WAAW,cAAc;EACzB,gBAAgB;;KAGN,cAAc,cAAc;MAClC;GACH,GAAG,WAAW,OAAO,gBAAgB,WAAW,IAAI;;;;;;;;iBASvC,aAAa,QAAQ,mBAAmB,iBAAiB,mBAAmB;;;;;;;iBAQ5E,aAAa,QAAQ,mBAAmB,iBAAiB,mBAAmB;;;;;;;iBAQ5E,mBAAmB,iBAAiB,oBAClD,QAAQ,mBAAmB,YAC1B,mBAAmB,YAAY"}

package/dist/dev/player/create-player.js

@@ -1,24 +1,55 @@
 "use client";
 import { PlayerContextProvider, useMedia, usePlayerContext } from "./context.js";
-import { Container } from "./container.js";
 import { useDestroy } from "../utils/use-destroy.js";
-import { createPopupGroup } from "@videojs/core/dom";
+import { combinePlayerFeatureConfigs, setPlayerConfigValue } from "@videojs/core/dom";
 import { combine, createStore } from "@videojs/store";
 import { useStore } from "@videojs/store/react";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
+import { pick } from "@videojs/utils/object";
 //#region src/player/create-player.tsx
 function createPlayer(config) {
-	function Provider({ children }) {
-		const [store, setStore] = useState(() => createStore()(combine(...config.features)));
-		const [popupGroup] = useState(() => createPopupGroup());
+	const slice = combine(...config.features);
+	const featureConfig = combinePlayerFeatureConfigs(config.features);
+	const configKeys = Object.keys(featureConfig);
+	function createConfiguredStore(values) {
+		const store = createStore()(slice);
+		applyConfigValues(store, featureConfig, values);
+		return store;
+	}
+	function Player(props) {
+		const { children } = props;
+		const configValues = pick(props, configKeys);
+		const [store, setStore] = useState(() => createConfiguredStore(configValues));
+		const syncedValues = useRef({
+			store,
+			values: configValues
+		});
 		const [media, setMedia] = useState(null);
 		const [container, setContainer] = useState(null);
 		useDestroy(store);
+		useLayoutEffect(() => {
+			const previous = syncedValues.current;
+			if (previous.store !== store) {
+				syncedValues.current = {
+					store,
+					values: configValues
+				};
+				return;
+			}
+			for (const key of configKeys) {
+				if (Object.is(previous.values[key], configValues[key])) continue;
+				setPlayerConfigValue(store, featureConfig[key], configValues[key]);
+			}
+			syncedValues.current = {
+				store,
+				values: configValues
+			};
+		});
 		useEffect(() => {
 			if (!media) return;
 			if (store.destroyed) {
-				setStore(createStore()(combine(...config.features)));
+				setStore(createConfiguredStore(syncedValues.current.values));
 				return;
 			}
 			return store.attach({
@@ -36,29 +67,29 @@ function createPlayer(config) {
 				media,
 				setMedia,
 				container,
-				setContainer,
-				popupGroup
+				setContainer
 			}), [
 				store,
 				media,
-				container,
-				popupGroup
+				container
 			]),
 			children
 		});
 	}
-	if (config.displayName) Provider.displayName = `${config.displayName}.Provider`;
+	if (config.displayName) Player.displayName = config.displayName;
 	function usePlayer(selector) {
 		const { store } = usePlayerContext();
 		return useStore(store, selector);
 	}
 	return {
-		Provider,
-		Container,
+		Player,
 		usePlayer,
 		useMedia
 	};
 }
+function applyConfigValues(store, config, values) {
+	for (const key of Object.keys(config)) setPlayerConfigValue(store, config[key], values[key]);
+}
 //#endregion
 export { createPlayer };
 

package/dist/dev/player/create-player.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-player.js","names":[],"sources":["../../../src/player/create-player.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type AnyPlayerFeature,\n  type AnyPlayerStore,\n  type AudioFeatures,\n  type AudioPlayerStore,\n  createPopupGroup,\n  type PlayerStore,\n  type PlayerTarget,\n  type VideoFeatures,\n  type VideoPlayerStore,\n} from '@videojs/core/dom';\nimport type { Media } from '@videojs/media/dom';\nimport type { InferStoreState } from '@videojs/store';\nimport { combine, createStore } from '@videojs/store';\nimport { useStore } from '@videojs/store/react';\nimport type { FC, ReactNode } from 'react';\nimport { useEffect, useMemo, useState } from 'react';\n\nimport { useDestroy } from '../utils/use-destroy';\nimport { Container } from './container';\nimport { PlayerContextProvider, useMedia, usePlayerContext } from './context';\n\nexport interface CreatePlayerConfig<Features extends AnyPlayerFeature[]> {\n  features: Features;\n  displayName?: string;\n}\n\nexport interface ProviderProps {\n  children: ReactNode;\n}\n\nexport interface CreatePlayerResult<Store extends PlayerStore> {\n  Provider: FC<ProviderProps>;\n  Container: typeof Container;\n  usePlayer: UsePlayerHook<Store>;\n  useMedia: () => Media | null;\n}\n\nexport type UsePlayerHook<Store extends PlayerStore> = {\n  (): Store;\n  <R>(selector: (state: InferStoreState<Store>) => R): R;\n};\n\n/**\n * Create a player instance with typed store, Provider component, Container, and hooks.\n *\n * @label Video\n * @param config - Player configuration with features and optional display name.\n */\nexport function createPlayer(config: CreatePlayerConfig<VideoFeatures>): CreatePlayerResult<VideoPlayerStore>;\n\n/**\n * Create a player for audio media.\n *\n * @label Audio\n * @param config - Player configuration with features and optional display name.\n */\nexport function createPlayer(config: CreatePlayerConfig<AudioFeatures>): CreatePlayerResult<AudioPlayerStore>;\n\n/**\n * Create a player with custom features.\n *\n * @label Generic\n * @param config - Player configuration with features and optional display name.\n */\nexport function createPlayer<const Features extends AnyPlayerFeature[]>(\n  config: CreatePlayerConfig<Features>\n): CreatePlayerResult<PlayerStore<Features>>;\n\nexport function createPlayer(config: CreatePlayerConfig<AnyPlayerFeature[]>): CreatePlayerResult<AnyPlayerStore> {\n  function Provider({ children }: ProviderProps): ReactNode {\n    const [store, setStore] = useState(() => createStore<PlayerTarget>()(combine(...config.features)));\n    const [popupGroup] = useState(() => createPopupGroup());\n    const [media, setMedia] = useState<Media | null>(null);\n    const [container, setContainer] = useState<HTMLElement | null>(null);\n\n    useDestroy(store);\n\n    useEffect(() => {\n      if (!media) return;\n\n      // The store may have been destroyed during an asynchronous gap between React\n      // effect cleanup and re-setup (e.g., React <Activity> hide → reveal). The\n      // useState initializer does not re-run in this case.\n      if (store.destroyed) {\n        setStore(createStore<PlayerTarget>()(combine(...config.features)));\n        return;\n      }\n\n      return store.attach({ media, container });\n    }, [media, container, store]);\n\n    const value = useMemo(\n      () => ({ store, media, setMedia, container, setContainer, popupGroup }),\n      [store, media, container, popupGroup]\n    );\n\n    return <PlayerContextProvider value={value}>{children}</PlayerContextProvider>;\n  }\n\n  if (__DEV__ && config.displayName) {\n    Provider.displayName = `${config.displayName}.Provider`;\n  }\n\n  function usePlayer<R>(selector?: (state: object) => R): AnyPlayerStore | R {\n    const { store } = usePlayerContext();\n    return useStore(store, selector as any);\n  }\n\n  return {\n    Provider,\n    Container,\n    usePlayer,\n    useMedia,\n  };\n}\n"],"mappings":";;;;;;;;;;AAuEA,SAAgB,aAAa,QAAoF;CAC/G,SAAS,SAAS,EAAE,YAAsC;EACxD,MAAM,CAAC,OAAO,YAAY,eAAe,YAA0B,CAAC,CAAC,QAAQ,GAAG,OAAO,QAAQ,CAAC,CAAC;EACjG,MAAM,CAAC,cAAc,eAAe,iBAAiB,CAAC;EACtD,MAAM,CAAC,OAAO,YAAY,SAAuB,IAAI;EACrD,MAAM,CAAC,WAAW,gBAAgB,SAA6B,IAAI;EAEnE,WAAW,KAAK;EAEhB,gBAAgB;GACd,IAAI,CAAC,OAAO;GAKZ,IAAI,MAAM,WAAW;IACnB,SAAS,YAA0B,CAAC,CAAC,QAAQ,GAAG,OAAO,QAAQ,CAAC,CAAC;IACjE;GACF;GAEA,OAAO,MAAM,OAAO;IAAE;IAAO;GAAU,CAAC;EAC1C,GAAG;GAAC;GAAO;GAAW;EAAK,CAAC;EAO5B,OAAO,oBAAC,uBAAD;GAAuB,OALhB,eACL;IAAE;IAAO;IAAO;IAAU;IAAW;IAAc;GAAW,IACrE;IAAC;IAAO;IAAO;IAAW;GAAU,CAGG;GAAI;EAAgC,CAAA;CAC/E;CAEA,IAAe,OAAO,aACpB,SAAS,cAAc,GAAG,OAAO,YAAY;CAG/C,SAAS,UAAa,UAAqD;EACzE,MAAM,EAAE,UAAU,iBAAiB;EACnC,OAAO,SAAS,OAAO,QAAe;CACxC;CAEA,OAAO;EACL;EACA;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"create-player.js","names":[],"sources":["../../../src/player/create-player.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type AnyPlayerFeature,\n  type AnyPlayerStore,\n  type AudioFeatures,\n  type AudioPlayerStore,\n  combinePlayerFeatureConfigs,\n  type InferPlayerConfig,\n  type PlayerFeatureConfig,\n  type PlayerStore,\n  type PlayerTarget,\n  setPlayerConfigValue,\n  type VideoFeatures,\n  type VideoPlayerStore,\n} from '@videojs/core/dom';\nimport type { Media } from '@videojs/media/dom';\nimport type { InferStoreState } from '@videojs/store';\nimport { combine, createStore } from '@videojs/store';\nimport { useStore } from '@videojs/store/react';\nimport { pick } from '@videojs/utils/object';\nimport type { FC, ReactNode } from 'react';\nimport { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport { useDestroy } from '../utils/use-destroy';\nimport { PlayerContextProvider, useMedia, usePlayerContext } from './context';\n\nexport interface CreatePlayerConfig<Features extends AnyPlayerFeature[]> {\n  features: Features;\n  displayName?: string;\n}\n\nexport type PlayerProps<Config = object> = {\n  [Key in keyof Config]?: Config[Key] | undefined;\n} & {\n  children: ReactNode;\n};\n\nexport interface CreatePlayerResult<Store extends PlayerStore> {\n  Player: FC<PlayerProps<InferPlayerConfig<Store>>>;\n  usePlayer: UsePlayerHook<Store>;\n  useMedia: () => Media | null;\n}\n\nexport type UsePlayerHook<Store extends PlayerStore> = {\n  (): Store;\n  <R>(selector: (state: InferStoreState<Store>) => R): R;\n};\n\n/**\n * Create a player instance with a typed Player component and hooks.\n *\n * @label Video\n * @param config - Player configuration with features and optional display name.\n */\nexport function createPlayer(config: CreatePlayerConfig<VideoFeatures>): CreatePlayerResult<VideoPlayerStore>;\n\n/**\n * Create a player for audio media.\n *\n * @label Audio\n * @param config - Player configuration with features and optional display name.\n */\nexport function createPlayer(config: CreatePlayerConfig<AudioFeatures>): CreatePlayerResult<AudioPlayerStore>;\n\n/**\n * Create a player with custom features.\n *\n * @label Generic\n * @param config - Player configuration with features and optional display name.\n */\nexport function createPlayer<const Features extends AnyPlayerFeature[]>(\n  config: CreatePlayerConfig<Features>\n): CreatePlayerResult<PlayerStore<Features>>;\n\nexport function createPlayer(config: CreatePlayerConfig<AnyPlayerFeature[]>): CreatePlayerResult<AnyPlayerStore> {\n  const slice = combine(...config.features);\n  const featureConfig = combinePlayerFeatureConfigs(config.features);\n  const configKeys = Object.keys(featureConfig);\n\n  function createConfiguredStore(values: Record<string, unknown>) {\n    const store = createStore<PlayerTarget>()(slice);\n    applyConfigValues(store, featureConfig, values);\n    return store;\n  }\n\n  function Player(props: PlayerProps<any>): ReactNode {\n    const { children } = props;\n    // Only inputs declared by selected features are forwarded to store actions.\n    const configValues = pick(props, configKeys);\n    const [store, setStore] = useState(() => createConfiguredStore(configValues));\n    const syncedValues = useRef({ store, values: configValues });\n    const [media, setMedia] = useState<Media | null>(null);\n    const [container, setContainer] = useState<HTMLElement | null>(null);\n\n    useDestroy(store);\n\n    // Sync committed configuration props to the existing store.\n    useLayoutEffect(() => {\n      const previous = syncedValues.current;\n\n      // Replacement stores are seeded from this render's props during creation.\n      if (previous.store !== store) {\n        syncedValues.current = { store, values: configValues };\n        return;\n      }\n\n      for (const key of configKeys) {\n        if (Object.is(previous.values[key], configValues[key])) continue;\n        setPlayerConfigValue(store, featureConfig[key]!, configValues[key]);\n      }\n\n      syncedValues.current = { store, values: configValues };\n    });\n\n    useEffect(() => {\n      if (!media) return;\n\n      // The store may have been destroyed during an asynchronous gap between React\n      // effect cleanup and re-setup (e.g., React <Activity> hide → reveal). The\n      // useState initializer does not re-run in this case.\n      if (store.destroyed) {\n        setStore(createConfiguredStore(syncedValues.current.values));\n        return;\n      }\n\n      return store.attach({ media, container });\n    }, [media, container, store]);\n\n    const value = useMemo(() => ({ store, media, setMedia, container, setContainer }), [store, media, container]);\n\n    return <PlayerContextProvider value={value}>{children}</PlayerContextProvider>;\n  }\n\n  if (__DEV__ && config.displayName) {\n    Player.displayName = config.displayName;\n  }\n\n  function usePlayer<R>(selector?: (state: object) => R): AnyPlayerStore | R {\n    const { store } = usePlayerContext();\n    return useStore(store, selector as any);\n  }\n\n  return {\n    Player,\n    usePlayer,\n    useMedia,\n  };\n}\n\nfunction applyConfigValues(store: object, config: PlayerFeatureConfig, values: Record<string, unknown>): void {\n  for (const key of Object.keys(config)) {\n    setPlayerConfigValue(store, config[key]!, values[key]);\n  }\n}\n"],"mappings":";;;;;;;;;;AA2EA,SAAgB,aAAa,QAAoF;CAC/G,MAAM,QAAQ,QAAQ,GAAG,OAAO,QAAQ;CACxC,MAAM,gBAAgB,4BAA4B,OAAO,QAAQ;CACjE,MAAM,aAAa,OAAO,KAAK,aAAa;CAE5C,SAAS,sBAAsB,QAAiC;EAC9D,MAAM,QAAQ,YAA0B,CAAC,CAAC,KAAK;EAC/C,kBAAkB,OAAO,eAAe,MAAM;EAC9C,OAAO;CACT;CAEA,SAAS,OAAO,OAAoC;EAClD,MAAM,EAAE,aAAa;EAErB,MAAM,eAAe,KAAK,OAAO,UAAU;EAC3C,MAAM,CAAC,OAAO,YAAY,eAAe,sBAAsB,YAAY,CAAC;EAC5E,MAAM,eAAe,OAAO;GAAE;GAAO,QAAQ;EAAa,CAAC;EAC3D,MAAM,CAAC,OAAO,YAAY,SAAuB,IAAI;EACrD,MAAM,CAAC,WAAW,gBAAgB,SAA6B,IAAI;EAEnE,WAAW,KAAK;EAGhB,sBAAsB;GACpB,MAAM,WAAW,aAAa;GAG9B,IAAI,SAAS,UAAU,OAAO;IAC5B,aAAa,UAAU;KAAE;KAAO,QAAQ;IAAa;IACrD;GACF;GAEA,KAAK,MAAM,OAAO,YAAY;IAC5B,IAAI,OAAO,GAAG,SAAS,OAAO,MAAM,aAAa,IAAI,GAAG;IACxD,qBAAqB,OAAO,cAAc,MAAO,aAAa,IAAI;GACpE;GAEA,aAAa,UAAU;IAAE;IAAO,QAAQ;GAAa;EACvD,CAAC;EAED,gBAAgB;GACd,IAAI,CAAC,OAAO;GAKZ,IAAI,MAAM,WAAW;IACnB,SAAS,sBAAsB,aAAa,QAAQ,MAAM,CAAC;IAC3D;GACF;GAEA,OAAO,MAAM,OAAO;IAAE;IAAO;GAAU,CAAC;EAC1C,GAAG;GAAC;GAAO;GAAW;EAAK,CAAC;EAI5B,OAAO,oBAAC,uBAAD;GAAuB,OAFhB,eAAe;IAAE;IAAO;IAAO;IAAU;IAAW;GAAa,IAAI;IAAC;IAAO;IAAO;GAAS,CAElE;GAAI;EAAgC,CAAA;CAC/E;CAEA,IAAe,OAAO,aACpB,OAAO,cAAc,OAAO;CAG9B,SAAS,UAAa,UAAqD;EACzE,MAAM,EAAE,UAAU,iBAAiB;EACnC,OAAO,SAAS,OAAO,QAAe;CACxC;CAEA,OAAO;EACL;EACA;EACA;CACF;AACF;AAEA,SAAS,kBAAkB,OAAe,QAA6B,QAAuC;CAC5G,KAAK,MAAM,OAAO,OAAO,KAAK,MAAM,GAClC,qBAAqB,OAAO,OAAO,MAAO,OAAO,IAAI;AAEzD"}

package/dist/dev/player/popup-group-context.js

@@ -0,0 +1,18 @@
+"use client";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/player/popup-group-context.tsx
+const PopupGroupContext = createContext(void 0);
+function PopupGroupProvider({ value, children }) {
+	return /* @__PURE__ */ jsx(PopupGroupContext.Provider, {
+		value,
+		children
+	});
+}
+function useOptionalPopupGroup() {
+	return useContext(PopupGroupContext);
+}
+//#endregion
+export { PopupGroupProvider, useOptionalPopupGroup };
+
+//# sourceMappingURL=popup-group-context.js.map

package/dist/dev/player/popup-group-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup-group-context.js","names":[],"sources":["../../../src/player/popup-group-context.tsx"],"sourcesContent":["'use client';\n\nimport type { PopupGroup } from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { createContext, useContext } from 'react';\n\nconst PopupGroupContext = createContext<PopupGroup | undefined>(undefined);\n\nexport function PopupGroupProvider({ value, children }: { value: PopupGroup; children: ReactNode }): ReactNode {\n  return <PopupGroupContext.Provider value={value}>{children}</PopupGroupContext.Provider>;\n}\n\nexport function useOptionalPopupGroup(): PopupGroup | undefined {\n  return useContext(PopupGroupContext);\n}\n"],"mappings":";;;;AAMA,MAAM,oBAAoB,cAAsC,KAAA,CAAS;AAEzE,SAAgB,mBAAmB,EAAE,OAAO,YAAmE;CAC7G,OAAO,oBAAC,kBAAkB,UAAnB;EAAmC;EAAQ;CAAqC,CAAA;AACzF;AAEA,SAAgB,wBAAgD;CAC9D,OAAO,WAAW,iBAAiB;AACrC"}

package/dist/dev/presets/audio/index.d.ts

@@ -1,7 +1,8 @@
 import { Audio, AudioProps } from "../../media/audio.js";
 import { MinimalAudioSkin, MinimalAudioSkinProps } from "./minimal-skin.js";
 import { MinimalAudioSkinTailwind } from "./minimal-skin.tailwind.js";
+import { AudioPlayer, usePlayer } from "./player.js";
 import { AudioSkin, AudioSkinProps } from "./skin.js";
 import { AudioSkinTailwind } from "./skin.tailwind.js";
 import { audioFeatures } from "@videojs/core/dom";
-export { Audio, type AudioProps, AudioSkin, AudioSkinProps, AudioSkinTailwind, MinimalAudioSkin, MinimalAudioSkinProps, MinimalAudioSkinTailwind, audioFeatures };
+export { Audio, AudioPlayer, type AudioProps, AudioSkin, AudioSkinProps, AudioSkinTailwind, MinimalAudioSkin, MinimalAudioSkinProps, MinimalAudioSkinTailwind, audioFeatures, usePlayer };

package/dist/dev/presets/audio/index.js

@@ -1,7 +1,14 @@
+"use client";
 import { Audio } from "../../media/audio.js";
 import { MinimalAudioSkin } from "./minimal-skin.js";
 import { MinimalAudioSkinTailwind } from "./minimal-skin.tailwind.js";
+import { AudioPlayer, usePlayer } from "./player.js";
 import { AudioSkin } from "./skin.js";
 import { AudioSkinTailwind } from "./skin.tailwind.js";
 import { audioFeatures } from "@videojs/core/dom";
-export { Audio, AudioSkin, AudioSkinTailwind, MinimalAudioSkin, MinimalAudioSkinTailwind, audioFeatures };
+//#region src/presets/audio/index.ts
+/** Audio-only player preset with playback and volume controls. */
+//#endregion
+export { Audio, AudioPlayer, AudioSkin, AudioSkinTailwind, MinimalAudioSkin, MinimalAudioSkinTailwind, audioFeatures, usePlayer };
+
+//# sourceMappingURL=index.js.map

package/dist/dev/presets/audio/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/presets/audio/index.ts"],"sourcesContent":["/** Audio-only player preset with playback and volume controls. */\n'use client';\n\nexport { audioFeatures } from '@videojs/core/dom';\nexport { Audio, type AudioProps } from '@/media/audio';\nexport * from './minimal-skin';\nexport * from './minimal-skin.tailwind';\nexport { AudioPlayer, usePlayer } from './player';\nexport * from './skin';\nexport * from './skin.tailwind';\n"],"mappings":""}