@videojs/react 10.0.0-beta.23 → 10.0.0-beta.24

package/dist/default/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { composeRefs, useComposedRefs } from "./utils/use-composed-refs.js";
-import { Container, useContainer, useContainerAttach, useMedia, useMediaAttach, useOptionalPlayer, usePlayer, usePlayerContext } from "./player/context.js";
+import { Container, useContainer, useContainerAttach, useMedia, useMediaAttach, useOptionalContainer, useOptionalPlayer, usePlayer, usePlayerContext } from "./player/context.js";
 import { useLatestRef } from "./utils/use-latest-ref.js";
 import { useDestroy } from "./utils/use-destroy.js";
 import { createPlayer } from "./player/create-player.js";
@@ -24,23 +24,32 @@ import { useTapGesture } from "./ui/gesture/use-tap-gesture.js";
 import { useSlider } from "./ui/hooks/use-slider.js";
 import { Hotkey, MediaHotkey } from "./ui/hotkey/hotkey.js";
 import { useHotkey } from "./ui/hotkey/use-hotkey.js";
+import { LiveButton } from "./ui/live-button/live-button.js";
+import { useMenuContext, useOptionalMenuContext } from "./ui/menu/context.js";
+import { index_parts_exports as index_parts_exports$3 } from "./ui/menu/index.parts.js";
 import { MuteButton } from "./ui/mute-button/mute-button.js";
 import { PiPButton } from "./ui/pip-button/pip-button.js";
 import { PlayButton } from "./ui/play-button/play-button.js";
 import { PlaybackRateButton } from "./ui/playback-rate-button/playback-rate-button.js";
+import { usePlaybackRateMenu } from "./ui/playback-rate-menu/use-playback-rate-menu.js";
+import { index_parts_exports as index_parts_exports$4 } from "./ui/playback-rate-menu/index.parts.js";
 import { usePopoverContext } from "./ui/popover/context.js";
-import { index_parts_exports as index_parts_exports$3 } from "./ui/popover/index.parts.js";
+import { index_parts_exports as index_parts_exports$5 } from "./ui/popover/index.parts.js";
 import { Poster } from "./ui/poster/poster.js";
 import { SeekButton } from "./ui/seek-button/seek-button.js";
+import { index_parts_exports as index_parts_exports$6 } from "./ui/seek-indicator/index.parts.js";
 import { Thumbnail } from "./ui/thumbnail/thumbnail.js";
-import { index_parts_exports as index_parts_exports$4 } from "./ui/slider/index.parts.js";
-import { index_parts_exports as index_parts_exports$5 } from "./ui/time/index.parts.js";
-import { index_parts_exports as index_parts_exports$6 } from "./ui/time-slider/index.parts.js";
-import { index_parts_exports as index_parts_exports$7 } from "./ui/tooltip/index.parts.js";
-import { index_parts_exports as index_parts_exports$8 } from "./ui/volume-slider/index.parts.js";
+import { index_parts_exports as index_parts_exports$7 } from "./ui/slider/index.parts.js";
+import { StatusAnnouncer } from "./ui/status-announcer/status-announcer.js";
+import { index_parts_exports as index_parts_exports$8 } from "./ui/status-indicator/index.parts.js";
+import { index_parts_exports as index_parts_exports$9 } from "./ui/time/index.parts.js";
+import { index_parts_exports as index_parts_exports$10 } from "./ui/time-slider/index.parts.js";
+import { index_parts_exports as index_parts_exports$11 } from "./ui/tooltip/index.parts.js";
+import { index_parts_exports as index_parts_exports$12 } from "./ui/volume-indicator/index.parts.js";
+import { index_parts_exports as index_parts_exports$13 } from "./ui/volume-slider/index.parts.js";
 import { useAttachMedia } from "./utils/use-attach-media.js";
 import { useMediaInstance } from "./utils/use-media-instance.js";
 import { createSelector, shallowEqual } from "@videojs/store";
 import { useSelector, useStore } from "@videojs/store/react";
 export * from "@videojs/core/dom";
-export { index_parts_exports as AlertDialog, BufferingIndicator, CaptionsButton, CastButton, Container, index_parts_exports$1 as Controls, index_parts_exports$2 as ErrorDialog, FullscreenButton, Gesture, Hotkey, MediaGesture, MediaHotkey, MuteButton, PiPButton, PlayButton, PlaybackRateButton, index_parts_exports$3 as Popover, Poster, SeekButton, index_parts_exports$4 as Slider, Thumbnail, index_parts_exports$5 as Time, index_parts_exports$6 as TimeSlider, index_parts_exports$7 as Tooltip, index_parts_exports$8 as VolumeSlider, composeRefs, createPlayer, createSelector, mergeProps, renderElement, shallowEqual, useAlertDialogContext, useAriaKeyShortcuts, useAttachMedia, useButton, useComposedRefs, useContainer, useContainerAttach, useDestroy, useDoubleTapGesture, useErrorDialogContext, useHotkey, useLatestRef, useMedia, useMediaAttach, useMediaInstance, useOptionalPlayer, usePlayer, usePlayerContext, usePopoverContext, useSelector, useSlider, useStore, useTapGesture, useTooltipContext };
+export { index_parts_exports as AlertDialog, BufferingIndicator, CaptionsButton, CastButton, Container, index_parts_exports$1 as Controls, index_parts_exports$2 as ErrorDialog, FullscreenButton, Gesture, Hotkey, LiveButton, MediaGesture, MediaHotkey, index_parts_exports$3 as Menu, MuteButton, PiPButton, PlayButton, PlaybackRateButton, index_parts_exports$4 as PlaybackRateMenu, index_parts_exports$5 as Popover, Poster, SeekButton, index_parts_exports$6 as SeekIndicator, index_parts_exports$7 as Slider, StatusAnnouncer, index_parts_exports$8 as StatusIndicator, Thumbnail, index_parts_exports$9 as Time, index_parts_exports$10 as TimeSlider, index_parts_exports$11 as Tooltip, index_parts_exports$12 as VolumeIndicator, index_parts_exports$13 as VolumeSlider, composeRefs, createPlayer, createSelector, mergeProps, renderElement, shallowEqual, useAlertDialogContext, useAriaKeyShortcuts, useAttachMedia, useButton, useComposedRefs, useContainer, useContainerAttach, useDestroy, useDoubleTapGesture, useErrorDialogContext, useHotkey, useLatestRef, useMedia, useMediaAttach, useMediaInstance, useMenuContext, useOptionalContainer, useOptionalMenuContext, useOptionalPlayer, usePlaybackRateMenu, usePlayer, usePlayerContext, usePopoverContext, useSelector, useSlider, useStore, useTapGesture, useTooltipContext };

package/dist/default/media/simple-hls-video/index.js

@@ -6,13 +6,13 @@ import { useSyncProps } from "../../utils/use-sync-props.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { SimpleHlsMedia } from "@videojs/core/dom/media/simple-hls";
-import { spfMediaDefaultProps } from "@videojs/spf/dom";
+import { simpleHlsMediaDefaultProps } from "@videojs/spf/hls";
 //#region src/media/simple-hls-video/index.tsx
 const SimpleHlsVideo = forwardRef(function SimpleHlsVideo({ children, ...props }, ref) {
 	const media = useMediaInstance(SimpleHlsMedia);
 	return /* @__PURE__ */ jsx("video", {
 		ref: useComposedRefs(useAttachMedia(media), ref),
-		...useSyncProps(media, props, spfMediaDefaultProps),
+		...useSyncProps(media, props, simpleHlsMediaDefaultProps),
 		children
 	});
 });

package/dist/default/media/simple-hls-video/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/simple-hls-video/index.tsx"],"sourcesContent":["'use client';\n\nimport { SimpleHlsMedia } from '@videojs/core/dom/media/simple-hls';\nimport type { SpfMediaProps } from '@videojs/spf/dom';\nimport { spfMediaDefaultProps } from '@videojs/spf/dom';\nimport type { ReactNode, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface SimpleHlsVideoProps\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof SpfMediaProps>,\n    Partial<SpfMediaProps> {\n  children?: ReactNode;\n}\n\nexport const SimpleHlsVideo = forwardRef<HTMLVideoElement, SimpleHlsVideoProps>(function SimpleHlsVideo(\n  { children, ...props },\n  ref\n) {\n  const media = useMediaInstance(SimpleHlsMedia);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, spfMediaDefaultProps);\n\n  return (\n    <video ref={composedRef} {...htmlProps}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace SimpleHlsVideo {\n  export type Props = SimpleHlsVideoProps;\n}\n"],"mappings":";;;;;;;;;;AAkBA,MAAa,iBAAiB,WAAkD,SAAS,eACvF,EAAE,UAAU,GAAG,SACf,KACA;CACA,MAAM,QAAQ,iBAAiB,eAAe;AAK9C,QACE,oBAAC,SAAD;EAAO,KAJW,gBADF,eAAe,MAAM,EACQ,IAAI;EAIxB,GAHT,aAAa,OAAO,OAAO,qBAAqB;EAI7D;EACK,CAAA;EAEV"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/simple-hls-video/index.tsx"],"sourcesContent":["'use client';\n\nimport { SimpleHlsMedia } from '@videojs/core/dom/media/simple-hls';\nimport type { SimpleHlsMediaProps } from '@videojs/spf/hls';\nimport { simpleHlsMediaDefaultProps } from '@videojs/spf/hls';\nimport type { ReactNode, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface SimpleHlsVideoProps\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof SimpleHlsMediaProps>,\n    Partial<SimpleHlsMediaProps> {\n  children?: ReactNode;\n}\n\nexport const SimpleHlsVideo = forwardRef<HTMLVideoElement, SimpleHlsVideoProps>(function SimpleHlsVideo(\n  { children, ...props },\n  ref\n) {\n  const media = useMediaInstance(SimpleHlsMedia);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, simpleHlsMediaDefaultProps);\n\n  return (\n    <video ref={composedRef} {...htmlProps}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace SimpleHlsVideo {\n  export type Props = SimpleHlsVideoProps;\n}\n"],"mappings":";;;;;;;;;;AAkBA,MAAa,iBAAiB,WAAkD,SAAS,eACvF,EAAE,UAAU,GAAG,SACf,KACA;CACA,MAAM,QAAQ,iBAAiB,eAAe;AAK9C,QACE,oBAAC,SAAD;EAAO,KAJW,gBADF,eAAe,MAAM,EACQ,IAAI;EAIxB,GAHT,aAAa,OAAO,OAAO,2BAA2B;EAInE;EACK,CAAA;EAEV"}

package/dist/default/player/context.js

@@ -41,6 +41,14 @@ function useContainer() {
 	const { container } = usePlayerContext();
 	return container;
 }
+/** Access the container element when a Player Provider 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;
@@ -72,6 +80,6 @@ const Container = forwardRef(function Container({ children, tabIndex = 0, ...pro
 	});
 });
 //#endregion
-export { Container, PlayerContextProvider, useContainer, useContainerAttach, useMedia, useMediaAttach, useOptionalPlayer, usePlayer, usePlayerContext };
+export { Container, PlayerContextProvider, useContainer, useContainerAttach, useMedia, useMediaAttach, useOptionalContainer, useOptionalPlayer, useOptionalPopupGroup, usePlayer, usePlayerContext };
 
 //# sourceMappingURL=context.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/player/context.tsx"],"sourcesContent":["'use client';\n\nimport type { Media } from '@videojs/core';\nimport type { MediaContainer } from '@videojs/core/dom';\nimport type { UnknownState, UnknownStore } from '@videojs/store';\nimport { useStore } from '@videojs/store/react';\nimport type { Dispatch, HTMLAttributes, ReactNode, PointerEvent as ReactPointerEvent, SetStateAction } from 'react';\nimport { createContext, forwardRef, useContext, useEffect, useRef } from 'react';\n\nimport { useComposedRefs } from '../utils/use-composed-refs';\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 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 * @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 * @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 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\nexport interface ContainerProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n}\n\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(function Container(\n  { children, tabIndex = 0, ...props },\n  ref\n) {\n  const setContainer = useContainerAttach();\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 = (event: ReactPointerEvent<HTMLDivElement>) => {\n    props.onPointerUp?.(event);\n    const el = internalRef.current;\n    if (!el) return;\n    // If nothing inside has focus, grab it so keyboard events reach hotkey listeners.\n    if (!el.contains(document.activeElement) || document.activeElement === document.body) {\n      el.focus({ preventScroll: true });\n    }\n  };\n\n  return (\n    <div ref={composedRef} tabIndex={tabIndex} {...props} onPointerUp={handlePointerUp}>\n      {children}\n    </div>\n  );\n});\n\nexport namespace Container {\n  export type Props = ContainerProps;\n}\n"],"mappings":";;;;;;AAmBA,MAAM,gBAAgB,cAAyC,KAAK;AACpE,MAAM,0BAA0B;AAChC,MAAM,cAAc;CAClB,OAAO,EAAE;CACT,iBAAiB;CAClB;AAED,SAAgB,sBAAsB,EACpC,OACA,YAIY;AACZ,QAAO,oBAAC,cAAc,UAAf;EAA+B;EAAQ;EAAkC,CAAA;;;AAIlF,SAAgB,mBAAuC;CACrD,MAAM,MAAM,WAAW,cAAc;AACrC,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,yDAAyD;AACnF,QAAO;;AAgBT,SAAgB,UAAa,UAAuC;CAClE,MAAM,EAAE,UAAU,kBAAkB;AACpC,QAAO,SAAS,OAAO,SAAgB;;AAazC,SAAgB,kBAAqB,UAAuC;CAC1E,MAAM,MAAM,WAAW,cAAc;CAErC,MAAM,QAAQ,SADC,KAAK,SAAU,aACC,MAAM,WAAW,KAAA,EAAkB;AAClE,QAAO,MAAM,QAAQ,KAAA;;;AAIvB,SAAgB,WAAyB;CACvC,MAAM,EAAE,UAAU,kBAAkB;AACpC,QAAO;;;AAIT,SAAgB,eAAsC;CACpD,MAAM,EAAE,cAAc,kBAAkB;AACxC,QAAO;;;AAIT,SAAgB,iBAAqE;AAEnF,QADY,WAAW,cAAc,EACzB;;;AAId,SAAgB,qBAA+E;AAE7F,QADY,WAAW,cAAc,EACzB;;AAOd,MAAa,YAAY,WAA2C,SAAS,UAC3E,EAAE,UAAU,WAAW,GAAG,GAAG,SAC7B,KACA;CACA,MAAM,eAAe,oBAAoB;CACzC,MAAM,cAAc,OAAuB,KAAK;CAChD,MAAM,cAAc,gBAAgB,KAAK,YAAY;AAErD,iBAAgB;AACd,iBAAe,YAAY,QAAQ;AACnC,eAAa,eAAe,KAAK;IAChC,CAAC,aAAa,CAAC;CAElB,MAAM,mBAAmB,UAA6C;AACpE,QAAM,cAAc,MAAM;EAC1B,MAAM,KAAK,YAAY;AACvB,MAAI,CAAC,GAAI;AAET,MAAI,CAAC,GAAG,SAAS,SAAS,cAAc,IAAI,SAAS,kBAAkB,SAAS,KAC9E,IAAG,MAAM,EAAE,eAAe,MAAM,CAAC;;AAIrC,QACE,oBAAC,OAAD;EAAK,KAAK;EAAuB;EAAU,GAAI;EAAO,aAAa;EAChE;EACG,CAAA;EAER"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/player/context.tsx"],"sourcesContent":["'use client';\n\nimport type { Media } from '@videojs/core';\nimport type { MediaContainer, PopupGroup } from '@videojs/core/dom';\nimport type { UnknownState, UnknownStore } from '@videojs/store';\nimport { useStore } from '@videojs/store/react';\nimport type { Dispatch, HTMLAttributes, ReactNode, PointerEvent as ReactPointerEvent, SetStateAction } from 'react';\nimport { createContext, forwardRef, useContext, useEffect, useRef } from 'react';\n\nimport { useComposedRefs } from '../utils/use-composed-refs';\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 * @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 * @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\nexport interface ContainerProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n}\n\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(function Container(\n  { children, tabIndex = 0, ...props },\n  ref\n) {\n  const setContainer = useContainerAttach();\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 = (event: ReactPointerEvent<HTMLDivElement>) => {\n    props.onPointerUp?.(event);\n    const el = internalRef.current;\n    if (!el) return;\n    // If nothing inside has focus, grab it so keyboard events reach hotkey listeners.\n    if (!el.contains(document.activeElement) || document.activeElement === document.body) {\n      el.focus({ preventScroll: true });\n    }\n  };\n\n  return (\n    <div ref={composedRef} tabIndex={tabIndex} {...props} onPointerUp={handlePointerUp}>\n      {children}\n    </div>\n  );\n});\n\nexport namespace Container {\n  export type Props = ContainerProps;\n}\n"],"mappings":";;;;;;AAoBA,MAAM,gBAAgB,cAAyC,KAAK;AACpE,MAAM,0BAA0B;AAChC,MAAM,cAAc;CAClB,OAAO,EAAE;CACT,iBAAiB;CAClB;AAED,SAAgB,sBAAsB,EACpC,OACA,YAIY;AACZ,QAAO,oBAAC,cAAc,UAAf;EAA+B;EAAQ;EAAkC,CAAA;;;AAIlF,SAAgB,mBAAuC;CACrD,MAAM,MAAM,WAAW,cAAc;AACrC,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,yDAAyD;AACnF,QAAO;;AAgBT,SAAgB,UAAa,UAAuC;CAClE,MAAM,EAAE,UAAU,kBAAkB;AACpC,QAAO,SAAS,OAAO,SAAgB;;AAazC,SAAgB,kBAAqB,UAAuC;CAC1E,MAAM,MAAM,WAAW,cAAc;CAErC,MAAM,QAAQ,SADC,KAAK,SAAU,aACC,MAAM,WAAW,KAAA,EAAkB;AAClE,QAAO,MAAM,QAAQ,KAAA;;;AAIvB,SAAgB,WAAyB;CACvC,MAAM,EAAE,UAAU,kBAAkB;AACpC,QAAO;;;AAIT,SAAgB,eAAsC;CACpD,MAAM,EAAE,cAAc,kBAAkB;AACxC,QAAO;;;AAIT,SAAgB,uBAA8C;AAE5D,QADY,WAAW,cAAc,EACzB,aAAa;;;AAI3B,SAAgB,wBAAgD;AAE9D,QADY,WAAW,cAAc,EACzB;;;AAId,SAAgB,iBAAqE;AAEnF,QADY,WAAW,cAAc,EACzB;;;AAId,SAAgB,qBAA+E;AAE7F,QADY,WAAW,cAAc,EACzB;;AAOd,MAAa,YAAY,WAA2C,SAAS,UAC3E,EAAE,UAAU,WAAW,GAAG,GAAG,SAC7B,KACA;CACA,MAAM,eAAe,oBAAoB;CACzC,MAAM,cAAc,OAAuB,KAAK;CAChD,MAAM,cAAc,gBAAgB,KAAK,YAAY;AAErD,iBAAgB;AACd,iBAAe,YAAY,QAAQ;AACnC,eAAa,eAAe,KAAK;IAChC,CAAC,aAAa,CAAC;CAElB,MAAM,mBAAmB,UAA6C;AACpE,QAAM,cAAc,MAAM;EAC1B,MAAM,KAAK,YAAY;AACvB,MAAI,CAAC,GAAI;AAET,MAAI,CAAC,GAAG,SAAS,SAAS,cAAc,IAAI,SAAS,kBAAkB,SAAS,KAC9E,IAAG,MAAM,EAAE,eAAe,MAAM,CAAC;;AAIrC,QACE,oBAAC,OAAD;EAAK,KAAK;EAAuB;EAAU,GAAI;EAAO,aAAa;EAChE;EACG,CAAA;EAER"}

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

@@ -1,6 +1,7 @@
 "use client";
 import { Container, PlayerContextProvider, useMedia, usePlayerContext } from "./context.js";
 import { useDestroy } from "../utils/use-destroy.js";
+import { createPopupGroup } from "@videojs/core/dom";
 import { combine, createStore } from "@videojs/store";
 import { useStore } from "@videojs/store/react";
 import { useEffect, useState } from "react";
@@ -9,6 +10,7 @@ import { jsx } from "react/jsx-runtime";
 function createPlayer(config) {
 	function Provider({ children }) {
 		const [store] = useState(() => createStore()(combine(...config.features)));
+		const [popupGroup] = useState(() => createPopupGroup());
 		const [media, setMedia] = useState(null);
 		const [container, setContainer] = useState(null);
 		useDestroy(store);
@@ -29,7 +31,8 @@ function createPlayer(config) {
 				media,
 				setMedia,
 				container,
-				setContainer
+				setContainer,
+				popupGroup
 			},
 			children
 		});

package/dist/default/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 type {\n  AnyPlayerFeature,\n  AnyPlayerStore,\n  AudioFeatures,\n  AudioPlayerStore,\n  Media,\n  PlayerStore,\n  PlayerTarget,\n  VideoFeatures,\n  VideoPlayerStore,\n} from '@videojs/core/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, useState } from 'react';\n\nimport { useDestroy } from '../utils/use-destroy';\nimport { Container, 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] = useState(() => createStore<PlayerTarget>()(combine(...config.features)));\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      return store.attach({ media, container });\n    }, [media, container, store]);\n\n    return (\n      <PlayerContextProvider value={{ store, media, setMedia, container, setContainer }}>\n        {children}\n      </PlayerContextProvider>\n    );\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":";;;;;;;;AAqEA,SAAgB,aAAa,QAAoF;CAC/G,SAAS,SAAS,EAAE,YAAsC;EACxD,MAAM,CAAC,SAAS,eAAe,aAA2B,CAAC,QAAQ,GAAG,OAAO,SAAS,CAAC,CAAC;EACxF,MAAM,CAAC,OAAO,YAAY,SAAuB,KAAK;EACtD,MAAM,CAAC,WAAW,gBAAgB,SAA6B,KAAK;AAEpE,aAAW,MAAM;AAEjB,kBAAgB;AACd,OAAI,CAAC,MAAO;AACZ,UAAO,MAAM,OAAO;IAAE;IAAO;IAAW,CAAC;KACxC;GAAC;GAAO;GAAW;GAAM,CAAC;AAE7B,SACE,oBAAC,uBAAD;GAAuB,OAAO;IAAE;IAAO;IAAO;IAAU;IAAW;IAAc;GAC9E;GACqB,CAAA;;CAQ5B,SAAS,UAAa,UAAqD;EACzE,MAAM,EAAE,UAAU,kBAAkB;AACpC,SAAO,SAAS,OAAO,SAAgB;;AAGzC,QAAO;EACL;EACA;EACA;EACA;EACD"}
+{"version":3,"file":"create-player.js","names":[],"sources":["../../../src/player/create-player.tsx"],"sourcesContent":["'use client';\n\nimport type {\n  AnyPlayerFeature,\n  AnyPlayerStore,\n  AudioFeatures,\n  AudioPlayerStore,\n  Media,\n  PlayerStore,\n  PlayerTarget,\n  VideoFeatures,\n  VideoPlayerStore,\n} from '@videojs/core/dom';\nimport { createPopupGroup } from '@videojs/core/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, useState } from 'react';\n\nimport { useDestroy } from '../utils/use-destroy';\nimport { Container, 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] = 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      return store.attach({ media, container });\n    }, [media, container, store]);\n\n    return (\n      <PlayerContextProvider value={{ store, media, setMedia, container, setContainer, popupGroup }}>\n        {children}\n      </PlayerContextProvider>\n    );\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":";;;;;;;;;AAsEA,SAAgB,aAAa,QAAoF;CAC/G,SAAS,SAAS,EAAE,YAAsC;EACxD,MAAM,CAAC,SAAS,eAAe,aAA2B,CAAC,QAAQ,GAAG,OAAO,SAAS,CAAC,CAAC;EACxF,MAAM,CAAC,cAAc,eAAe,kBAAkB,CAAC;EACvD,MAAM,CAAC,OAAO,YAAY,SAAuB,KAAK;EACtD,MAAM,CAAC,WAAW,gBAAgB,SAA6B,KAAK;AAEpE,aAAW,MAAM;AAEjB,kBAAgB;AACd,OAAI,CAAC,MAAO;AACZ,UAAO,MAAM,OAAO;IAAE;IAAO;IAAW,CAAC;KACxC;GAAC;GAAO;GAAW;GAAM,CAAC;AAE7B,SACE,oBAAC,uBAAD;GAAuB,OAAO;IAAE;IAAO;IAAO;IAAU;IAAW;IAAc;IAAY;GAC1F;GACqB,CAAA;;CAQ5B,SAAS,UAAa,UAAqD;EACzE,MAAM,EAAE,UAAU,kBAAkB;AACpC,SAAO,SAAS,OAAO,SAAgB;;AAGzC,QAAO;EACL;EACA;EACA;EACA;EACD"}