@videojs/react 10.0.0-beta.15 → 10.0.0-beta.17

package/dist/default/index.js

@@ -10,13 +10,19 @@ import { renderElement } from "./utils/use-render.js";
 import { index_parts_exports } from "./ui/alert-dialog/index.parts.js";
 import { BufferingIndicator } from "./ui/buffering-indicator/buffering-indicator.js";
 import { useButton } from "./ui/hooks/use-button.js";
+import { useAriaKeyShortcuts } from "./ui/hotkey/use-aria-key-shortcuts.js";
 import { useTooltipContext } from "./ui/tooltip/context.js";
 import { CaptionsButton } from "./ui/captions-button/captions-button.js";
 import { index_parts_exports as index_parts_exports$1 } from "./ui/controls/index.parts.js";
 import { useErrorDialogContext } from "./ui/error-dialog/context.js";
 import { index_parts_exports as index_parts_exports$2 } from "./ui/error-dialog/index.parts.js";
 import { FullscreenButton } from "./ui/fullscreen-button/fullscreen-button.js";
+import { MediaGesture } from "./ui/gesture/media-gesture.js";
+import { useDoubleTapGesture } from "./ui/gesture/use-doubletap-gesture.js";
+import { useTapGesture } from "./ui/gesture/use-tap-gesture.js";
 import { useSlider } from "./ui/hooks/use-slider.js";
+import { MediaHotkey } from "./ui/hotkey/media-hotkey.js";
+import { useHotkey } from "./ui/hotkey/use-hotkey.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";
@@ -38,4 +44,4 @@ import { DelegateMixin } from "@videojs/core";
 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, Container, index_parts_exports$1 as Controls, DelegateMixin, index_parts_exports$2 as ErrorDialog, FullscreenButton, 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, attachMediaElement, composeRefs, createPlayer, createSelector, mediaProps, mergeProps, renderElement, shallowEqual, useAlertDialogContext, useButton, useComposedRefs, useContainer, useContainerAttach, useDestroy, useErrorDialogContext, useLatestRef, useMedia, useMediaAttach, useMediaInstance, useOptionalPlayer, usePlayer, usePlayerContext, usePopoverContext, useSelector, useSlider, useStore, useTooltipContext };
+export { index_parts_exports as AlertDialog, BufferingIndicator, CaptionsButton, Container, index_parts_exports$1 as Controls, DelegateMixin, index_parts_exports$2 as ErrorDialog, FullscreenButton, 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, attachMediaElement, composeRefs, createPlayer, createSelector, mediaProps, mergeProps, renderElement, shallowEqual, useAlertDialogContext, useAriaKeyShortcuts, useButton, useComposedRefs, useContainer, useContainerAttach, useDestroy, useDoubleTapGesture, useErrorDialogContext, useHotkey, useLatestRef, useMedia, useMediaAttach, useMediaInstance, useOptionalPlayer, usePlayer, usePlayerContext, usePopoverContext, useSelector, useSlider, useStore, useTapGesture, useTooltipContext };

package/dist/default/media/dash-video/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { useComposedRefs } from "../../utils/use-composed-refs.js";
 import { attachMediaElement } from "../../utils/attach-media-element.js";
 import { mediaProps } from "../../utils/media-props.js";
@@ -6,7 +7,7 @@ import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { DashMedia, DashMediaDelegate } from "@videojs/core/dom/media/dash";
 //#region src/media/dash-video/index.tsx
-const DashVideo = forwardRef(({ children, ...props }, ref) => {
+const DashVideo = forwardRef(function DashVideo({ children, ...props }, ref) {
 	const mediaApi = useMediaInstance(DashMedia);
 	return /* @__PURE__ */ jsx("video", {
 		ref: useComposedRefs(attachMediaElement(mediaApi), ref),
@@ -15,6 +16,6 @@ const DashVideo = forwardRef(({ children, ...props }, ref) => {
 	});
 });
 //#endregion
-export { DashVideo, DashVideo as default };
+export { DashVideo };
 
 //# sourceMappingURL=index.js.map

package/dist/default/media/dash-video/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/dash-video/index.tsx"],"sourcesContent":["import type { InferDelegateProps } from '@videojs/core';\nimport { DashMedia, DashMediaDelegate } from '@videojs/core/dom/media/dash';\nimport type { PropsWithChildren, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { attachMediaElement } from '../../utils/attach-media-element';\nimport { mediaProps } from '../../utils/media-props';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\n\nexport type DashVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>> &\n  InferDelegateProps<typeof DashMediaDelegate>;\n\nexport const DashVideo = forwardRef<HTMLVideoElement, DashVideoProps>(({ children, ...props }, ref) => {\n  const mediaApi = useMediaInstance(DashMedia);\n\n  const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);\n\n  return (\n    <video ref={composedRef} {...mediaProps(mediaApi, DashMediaDelegate, props)}>\n      {children}\n    </video>\n  );\n});\n\nexport default DashVideo;\n"],"mappings":";;;;;;;;AAYA,MAAa,YAAY,YAA8C,EAAE,UAAU,GAAG,SAAS,QAAQ;CACrG,MAAM,WAAW,iBAAiB,UAAU;AAI5C,QACE,oBAAC,SAAD;EAAO,KAHW,gBAAgB,mBAAmB,SAAS,EAAE,IAAI;EAG3C,GAAI,WAAW,UAAU,mBAAmB,MAAM;EACxE;EACK,CAAA;EAEV"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/dash-video/index.tsx"],"sourcesContent":["'use client';\n\nimport type { InferDelegateProps } from '@videojs/core';\nimport { DashMedia, DashMediaDelegate } from '@videojs/core/dom/media/dash';\nimport type { PropsWithChildren, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { attachMediaElement } from '../../utils/attach-media-element';\nimport { mediaProps } from '../../utils/media-props';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\n\nexport type DashVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>> &\n  InferDelegateProps<typeof DashMediaDelegate>;\n\nexport const DashVideo = forwardRef<HTMLVideoElement, DashVideoProps>(function DashVideo({ children, ...props }, ref) {\n  const mediaApi = useMediaInstance(DashMedia);\n\n  const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);\n\n  return (\n    <video ref={composedRef} {...mediaProps(mediaApi, DashMediaDelegate, props)}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace DashVideo {\n  export type Props = DashVideoProps;\n}\n"],"mappings":";;;;;;;;;AAcA,MAAa,YAAY,WAA6C,SAAS,UAAU,EAAE,UAAU,GAAG,SAAS,KAAK;CACpH,MAAM,WAAW,iBAAiB,UAAU;AAI5C,QACE,oBAAC,SAAD;EAAO,KAHW,gBAAgB,mBAAmB,SAAS,EAAE,IAAI;EAG3C,GAAI,WAAW,UAAU,mBAAmB,MAAM;EACxE;EACK,CAAA;EAEV"}

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

@@ -1,3 +1,4 @@
+"use client";
 import { useComposedRefs } from "../../utils/use-composed-refs.js";
 import { attachMediaElement } from "../../utils/attach-media-element.js";
 import { mediaProps } from "../../utils/media-props.js";
@@ -6,7 +7,7 @@ import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { HlsMedia, HlsMediaDelegate } from "@videojs/core/dom/media/hls";
 //#region src/media/hls-video/index.tsx
-const HlsVideo = forwardRef(({ children, ...props }, ref) => {
+const HlsVideo = forwardRef(function HlsVideo({ children, ...props }, ref) {
 	const mediaApi = useMediaInstance(HlsMedia);
 	return /* @__PURE__ */ jsx("video", {
 		ref: useComposedRefs(attachMediaElement(mediaApi), ref),
@@ -15,6 +16,6 @@ const HlsVideo = forwardRef(({ children, ...props }, ref) => {
 	});
 });
 //#endregion
-export { HlsVideo, HlsVideo as default };
+export { HlsVideo };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/hls-video/index.tsx"],"sourcesContent":["import type { InferDelegateProps } from '@videojs/core';\nimport { HlsMedia, HlsMediaDelegate } from '@videojs/core/dom/media/hls';\nimport type { PropsWithChildren, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { attachMediaElement } from '../../utils/attach-media-element';\nimport { mediaProps } from '../../utils/media-props';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\n\nexport type HlsVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>> &\n  InferDelegateProps<typeof HlsMediaDelegate>;\n\nexport const HlsVideo = forwardRef<HTMLVideoElement, HlsVideoProps>(({ children, ...props }, ref) => {\n  const mediaApi = useMediaInstance(HlsMedia);\n\n  const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);\n\n  return (\n    <video ref={composedRef} {...mediaProps(mediaApi, HlsMediaDelegate, props)}>\n      {children}\n    </video>\n  );\n});\n\nexport default HlsVideo;\n"],"mappings":";;;;;;;;AAYA,MAAa,WAAW,YAA6C,EAAE,UAAU,GAAG,SAAS,QAAQ;CACnG,MAAM,WAAW,iBAAiB,SAAS;AAI3C,QACE,oBAAC,SAAD;EAAO,KAHW,gBAAgB,mBAAmB,SAAS,EAAE,IAAI;EAG3C,GAAI,WAAW,UAAU,kBAAkB,MAAM;EACvE;EACK,CAAA;EAEV"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/hls-video/index.tsx"],"sourcesContent":["'use client';\n\nimport type { InferDelegateProps } from '@videojs/core';\nimport { HlsMedia, HlsMediaDelegate } from '@videojs/core/dom/media/hls';\nimport type { PropsWithChildren, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { attachMediaElement } from '../../utils/attach-media-element';\nimport { mediaProps } from '../../utils/media-props';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\n\nexport type HlsVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>> &\n  InferDelegateProps<typeof HlsMediaDelegate>;\n\nexport const HlsVideo = forwardRef<HTMLVideoElement, HlsVideoProps>(function HlsVideo({ children, ...props }, ref) {\n  const mediaApi = useMediaInstance(HlsMedia);\n\n  const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);\n\n  return (\n    <video ref={composedRef} {...mediaProps(mediaApi, HlsMediaDelegate, props)}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace HlsVideo {\n  export type Props = HlsVideoProps;\n}\n"],"mappings":";;;;;;;;;AAcA,MAAa,WAAW,WAA4C,SAAS,SAAS,EAAE,UAAU,GAAG,SAAS,KAAK;CACjH,MAAM,WAAW,iBAAiB,SAAS;AAI3C,QACE,oBAAC,SAAD;EAAO,KAHW,gBAAgB,mBAAmB,SAAS,EAAE,IAAI;EAG3C,GAAI,WAAW,UAAU,kBAAkB,MAAM;EACvE;EACK,CAAA;EAEV"}

package/dist/default/media/mux-audio/index.js

@@ -0,0 +1,20 @@
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { attachMediaElement } from "../../utils/attach-media-element.js";
+import { mediaProps } from "../../utils/media-props.js";
+import { useMediaInstance } from "../../utils/use-media-instance.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { MuxAudio as MuxAudio$1, MuxMediaDelegate } from "@videojs/core/dom/media/mux";
+//#region src/media/mux-audio/index.tsx
+const MuxAudio = forwardRef(({ children, ...props }, ref) => {
+	const mediaApi = useMediaInstance(MuxAudio$1);
+	return /* @__PURE__ */ jsx("audio", {
+		ref: useComposedRefs(attachMediaElement(mediaApi), ref),
+		...mediaProps(mediaApi, MuxMediaDelegate, props),
+		children
+	});
+});
+//#endregion
+export { MuxAudio, MuxAudio as default };
+
+//# sourceMappingURL=index.js.map

package/dist/default/media/mux-audio/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["MuxAudioApi"],"sources":["../../../../src/media/mux-audio/index.tsx"],"sourcesContent":["import type { InferDelegateProps } from '@videojs/core';\nimport { MuxAudio as MuxAudioApi, MuxMediaDelegate } from '@videojs/core/dom/media/mux';\nimport type { AudioHTMLAttributes, PropsWithChildren } from 'react';\nimport { forwardRef } from 'react';\nimport { attachMediaElement } from '../../utils/attach-media-element';\nimport { mediaProps } from '../../utils/media-props';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\n\nexport type MuxAudioProps = PropsWithChildren<AudioHTMLAttributes<HTMLAudioElement>> &\n  InferDelegateProps<typeof MuxMediaDelegate>;\n\nexport const MuxAudio = forwardRef<HTMLAudioElement, MuxAudioProps>(({ children, ...props }, ref) => {\n  const mediaApi = useMediaInstance(MuxAudioApi);\n\n  const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);\n\n  return (\n    <audio ref={composedRef} {...mediaProps(mediaApi, MuxMediaDelegate, props)}>\n      {children}\n    </audio>\n  );\n});\n\nexport default MuxAudio;\n"],"mappings":";;;;;;;;AAYA,MAAa,WAAW,YAA6C,EAAE,UAAU,GAAG,SAAS,QAAQ;CACnG,MAAM,WAAW,iBAAiBA,WAAY;AAI9C,QACE,oBAAC,SAAD;EAAO,KAHW,gBAAgB,mBAAmB,SAAS,EAAE,IAAI;EAG3C,GAAI,WAAW,UAAU,kBAAkB,MAAM;EACvE;EACK,CAAA;EAEV"}

package/dist/default/media/mux-video/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { useComposedRefs } from "../../utils/use-composed-refs.js";
 import { attachMediaElement } from "../../utils/attach-media-element.js";
 import { mediaProps } from "../../utils/media-props.js";
@@ -6,7 +7,7 @@ import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { MuxMediaDelegate, MuxVideo as MuxVideo$1 } from "@videojs/core/dom/media/mux";
 //#region src/media/mux-video/index.tsx
-const MuxVideo = forwardRef(({ children, ...props }, ref) => {
+const MuxVideo = forwardRef(function MuxVideo({ children, ...props }, ref) {
 	const mediaApi = useMediaInstance(MuxVideo$1);
 	return /* @__PURE__ */ jsx("video", {
 		ref: useComposedRefs(attachMediaElement(mediaApi), ref),
@@ -15,6 +16,6 @@ const MuxVideo = forwardRef(({ children, ...props }, ref) => {
 	});
 });
 //#endregion
-export { MuxVideo, MuxVideo as default };
+export { MuxVideo };
 
 //# sourceMappingURL=index.js.map

package/dist/default/media/mux-video/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["MuxVideoApi"],"sources":["../../../../src/media/mux-video/index.tsx"],"sourcesContent":["import type { InferDelegateProps } from '@videojs/core';\nimport { MuxMediaDelegate, MuxVideo as MuxVideoApi } from '@videojs/core/dom/media/mux';\nimport type { PropsWithChildren, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { attachMediaElement } from '../../utils/attach-media-element';\nimport { mediaProps } from '../../utils/media-props';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\n\nexport type MuxVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>> &\n  InferDelegateProps<typeof MuxMediaDelegate>;\n\nexport const MuxVideo = forwardRef<HTMLVideoElement, MuxVideoProps>(({ children, ...props }, ref) => {\n  const mediaApi = useMediaInstance(MuxVideoApi);\n\n  const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);\n\n  return (\n    <video ref={composedRef} {...mediaProps(mediaApi, MuxMediaDelegate, props)}>\n      {children}\n    </video>\n  );\n});\n\nexport default MuxVideo;\n"],"mappings":";;;;;;;;AAYA,MAAa,WAAW,YAA6C,EAAE,UAAU,GAAG,SAAS,QAAQ;CACnG,MAAM,WAAW,iBAAiBA,WAAY;AAI9C,QACE,oBAAC,SAAD;EAAO,KAHW,gBAAgB,mBAAmB,SAAS,EAAE,IAAI;EAG3C,GAAI,WAAW,UAAU,kBAAkB,MAAM;EACvE;EACK,CAAA;EAEV"}
+{"version":3,"file":"index.js","names":["MuxVideoApi"],"sources":["../../../../src/media/mux-video/index.tsx"],"sourcesContent":["'use client';\n\nimport type { InferDelegateProps } from '@videojs/core';\nimport { MuxMediaDelegate, MuxVideo as MuxVideoApi } from '@videojs/core/dom/media/mux';\nimport type { PropsWithChildren, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { attachMediaElement } from '../../utils/attach-media-element';\nimport { mediaProps } from '../../utils/media-props';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\n\nexport type MuxVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>> &\n  InferDelegateProps<typeof MuxMediaDelegate>;\n\nexport const MuxVideo = forwardRef<HTMLVideoElement, MuxVideoProps>(function MuxVideo({ children, ...props }, ref) {\n  const mediaApi = useMediaInstance(MuxVideoApi);\n\n  const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);\n\n  return (\n    <video ref={composedRef} {...mediaProps(mediaApi, MuxMediaDelegate, props)}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace MuxVideo {\n  export type Props = MuxVideoProps;\n}\n"],"mappings":";;;;;;;;;AAcA,MAAa,WAAW,WAA4C,SAAS,SAAS,EAAE,UAAU,GAAG,SAAS,KAAK;CACjH,MAAM,WAAW,iBAAiBA,WAAY;AAI9C,QACE,oBAAC,SAAD;EAAO,KAHW,gBAAgB,mBAAmB,SAAS,EAAE,IAAI;EAG3C,GAAI,WAAW,UAAU,kBAAkB,MAAM;EACvE;EACK,CAAA;EAEV"}

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

@@ -1,3 +1,4 @@
+"use client";
 import { useComposedRefs } from "../../utils/use-composed-refs.js";
 import { attachMediaElement } from "../../utils/attach-media-element.js";
 import { mediaProps } from "../../utils/media-props.js";
@@ -6,7 +7,7 @@ import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { NativeHlsMedia, NativeHlsMediaDelegate } from "@videojs/core/dom/media/native-hls";
 //#region src/media/native-hls-video/index.tsx
-const NativeHlsVideo = forwardRef(({ children, ...props }, ref) => {
+const NativeHlsVideo = forwardRef(function NativeHlsVideo({ children, ...props }, ref) {
 	const mediaApi = useMediaInstance(NativeHlsMedia);
 	return /* @__PURE__ */ jsx("video", {
 		ref: useComposedRefs(attachMediaElement(mediaApi), ref),
@@ -15,6 +16,6 @@ const NativeHlsVideo = forwardRef(({ children, ...props }, ref) => {
 	});
 });
 //#endregion
-export { NativeHlsVideo, NativeHlsVideo as default };
+export { NativeHlsVideo };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/native-hls-video/index.tsx"],"sourcesContent":["import type { InferDelegateProps } from '@videojs/core';\nimport { NativeHlsMedia, NativeHlsMediaDelegate } from '@videojs/core/dom/media/native-hls';\nimport type { PropsWithChildren, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { attachMediaElement } from '../../utils/attach-media-element';\nimport { mediaProps } from '../../utils/media-props';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\n\nexport type NativeHlsVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>> &\n  InferDelegateProps<typeof NativeHlsMediaDelegate>;\n\nexport const NativeHlsVideo = forwardRef<HTMLVideoElement, NativeHlsVideoProps>(({ children, ...props }, ref) => {\n  const mediaApi = useMediaInstance(NativeHlsMedia);\n\n  const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);\n\n  return (\n    <video ref={composedRef} {...mediaProps(mediaApi, NativeHlsMediaDelegate, props)}>\n      {children}\n    </video>\n  );\n});\n\nexport default NativeHlsVideo;\n"],"mappings":";;;;;;;;AAYA,MAAa,iBAAiB,YAAmD,EAAE,UAAU,GAAG,SAAS,QAAQ;CAC/G,MAAM,WAAW,iBAAiB,eAAe;AAIjD,QACE,oBAAC,SAAD;EAAO,KAHW,gBAAgB,mBAAmB,SAAS,EAAE,IAAI;EAG3C,GAAI,WAAW,UAAU,wBAAwB,MAAM;EAC7E;EACK,CAAA;EAEV"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/native-hls-video/index.tsx"],"sourcesContent":["'use client';\n\nimport type { InferDelegateProps } from '@videojs/core';\nimport { NativeHlsMedia, NativeHlsMediaDelegate } from '@videojs/core/dom/media/native-hls';\nimport type { PropsWithChildren, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { attachMediaElement } from '../../utils/attach-media-element';\nimport { mediaProps } from '../../utils/media-props';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\n\nexport type NativeHlsVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>> &\n  InferDelegateProps<typeof NativeHlsMediaDelegate>;\n\nexport const NativeHlsVideo = forwardRef<HTMLVideoElement, NativeHlsVideoProps>(function NativeHlsVideo(\n  { children, ...props },\n  ref\n) {\n  const mediaApi = useMediaInstance(NativeHlsMedia);\n\n  const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);\n\n  return (\n    <video ref={composedRef} {...mediaProps(mediaApi, NativeHlsMediaDelegate, props)}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace NativeHlsVideo {\n  export type Props = NativeHlsVideoProps;\n}\n"],"mappings":";;;;;;;;;AAcA,MAAa,iBAAiB,WAAkD,SAAS,eACvF,EAAE,UAAU,GAAG,SACf,KACA;CACA,MAAM,WAAW,iBAAiB,eAAe;AAIjD,QACE,oBAAC,SAAD;EAAO,KAHW,gBAAgB,mBAAmB,SAAS,EAAE,IAAI;EAG3C,GAAI,WAAW,UAAU,wBAAwB,MAAM;EAC7E;EACK,CAAA;EAEV"}

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

@@ -1,3 +1,4 @@
+"use client";
 import { useComposedRefs } from "../../utils/use-composed-refs.js";
 import { attachMediaElement } from "../../utils/attach-media-element.js";
 import { mediaProps } from "../../utils/media-props.js";
@@ -7,7 +8,7 @@ import { jsx } from "react/jsx-runtime";
 import { SimpleHlsMedia } from "@videojs/core/dom/media/simple-hls";
 import { SpfMedia } from "@videojs/spf/dom";
 //#region src/media/simple-hls-video/index.tsx
-const SimpleHlsVideo = forwardRef(({ children, ...props }, ref) => {
+const SimpleHlsVideo = forwardRef(function SimpleHlsVideo({ children, ...props }, ref) {
 	const mediaApi = useMediaInstance(SimpleHlsMedia);
 	return /* @__PURE__ */ jsx("video", {
 		ref: useComposedRefs(attachMediaElement(mediaApi), ref),
@@ -16,6 +17,6 @@ const SimpleHlsVideo = forwardRef(({ children, ...props }, ref) => {
 	});
 });
 //#endregion
-export { SimpleHlsVideo, SimpleHlsVideo as default };
+export { SimpleHlsVideo };
 
 //# sourceMappingURL=index.js.map

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":["import { SimpleHlsMedia } from '@videojs/core/dom/media/simple-hls';\nimport { SpfMedia } from '@videojs/spf/dom';\nimport type { PropsWithChildren, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { attachMediaElement } from '../../utils/attach-media-element';\nimport { mediaProps } from '../../utils/media-props';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\n\nexport type SimpleHlsVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>>;\n\nexport const SimpleHlsVideo = forwardRef<HTMLVideoElement, SimpleHlsVideoProps>(({ children, ...props }, ref) => {\n  const mediaApi = useMediaInstance(SimpleHlsMedia);\n\n  const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);\n\n  return (\n    <video ref={composedRef} {...mediaProps(mediaApi, SpfMedia, props)}>\n      {children}\n    </video>\n  );\n});\n\nexport default SimpleHlsVideo;\n"],"mappings":";;;;;;;;;AAWA,MAAa,iBAAiB,YAAmD,EAAE,UAAU,GAAG,SAAS,QAAQ;CAC/G,MAAM,WAAW,iBAAiB,eAAe;AAIjD,QACE,oBAAC,SAAD;EAAO,KAHW,gBAAgB,mBAAmB,SAAS,EAAE,IAAI;EAG3C,GAAI,WAAW,UAAU,UAAU,MAAM;EAC/D;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 { SpfMedia } from '@videojs/spf/dom';\nimport type { PropsWithChildren, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { attachMediaElement } from '../../utils/attach-media-element';\nimport { mediaProps } from '../../utils/media-props';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\n\nexport type SimpleHlsVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>>;\n\nexport const SimpleHlsVideo = forwardRef<HTMLVideoElement, SimpleHlsVideoProps>(function SimpleHlsVideo(\n  { children, ...props },\n  ref\n) {\n  const mediaApi = useMediaInstance(SimpleHlsMedia);\n\n  const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);\n\n  return (\n    <video ref={composedRef} {...mediaProps(mediaApi, SpfMedia, props)}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace SimpleHlsVideo {\n  export type Props = SimpleHlsVideoProps;\n}\n"],"mappings":";;;;;;;;;;AAaA,MAAa,iBAAiB,WAAkD,SAAS,eACvF,EAAE,UAAU,GAAG,SACf,KACA;CACA,MAAM,WAAW,iBAAiB,eAAe;AAIjD,QACE,oBAAC,SAAD;EAAO,KAHW,gBAAgB,mBAAmB,SAAS,EAAE,IAAI;EAG3C,GAAI,WAAW,UAAU,UAAU,MAAM;EAC/D;EACK,CAAA;EAEV"}

package/dist/default/player/context.js

@@ -49,7 +49,7 @@ function useMediaAttach() {
 function useContainerAttach() {
 	return useContext(PlayerContext)?.setContainer;
 }
-const Container = forwardRef(function Container({ children, ...props }, ref) {
+const Container = forwardRef(function Container({ children, tabIndex = 0, ...props }, ref) {
 	const setContainer = useContainerAttach();
 	const internalRef = useRef(null);
 	const composedRef = useComposedRefs(ref, internalRef);
@@ -57,9 +57,17 @@ const Container = forwardRef(function Container({ children, ...props }, ref) {
 		setContainer?.(internalRef.current);
 		return () => setContainer?.(null);
 	}, [setContainer]);
+	const handlePointerUp = (event) => {
+		props.onPointerUp?.(event);
+		const el = internalRef.current;
+		if (!el) return;
+		if (!el.contains(document.activeElement) || document.activeElement === document.body) el.focus({ preventScroll: true });
+	};
 	return /* @__PURE__ */ jsx("div", {
 		ref: composedRef,
+		tabIndex,
 		...props,
+		onPointerUp: handlePointerUp,
 		children
 	});
 });

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, MediaContainer } from '@videojs/core/dom';\nimport type { UnknownState, UnknownStore } from '@videojs/store';\nimport { useStore } from '@videojs/store/react';\nimport type { Dispatch, HTMLAttributes, ReactNode, 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({ children, ...props }, ref) {\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  return (\n    <div ref={composedRef} {...props}>\n      {children}\n    </div>\n  );\n});\n\nexport namespace Container {\n  export type Props = ContainerProps;\n}\n"],"mappings":";;;;;;AAkBA,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,UAAU,EAAE,UAAU,GAAG,SAAS,KAAK;CAClH,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;AAElB,QACE,oBAAC,OAAD;EAAK,KAAK;EAAa,GAAI;EACxB;EACG,CAAA;EAER"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/player/context.tsx"],"sourcesContent":["'use client';\n\nimport type { Media, 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":";;;;;;AAkBA,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"}

package/dist/default/presets/audio/minimal-skin.css

@@ -34,6 +34,12 @@
   height: 100%;
   width: 100%;
   border-radius: var(--media-border-radius, 0.75rem);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+
+  &:focus-visible {
+    outline-color: currentColor;
+  }
   font-family:
     Inter Variable,
     Inter,
@@ -464,6 +470,23 @@
   }
 }
 
+/* Dragging — thumb and fill follow the pointer position */
+.media-minimal-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation="horizontal"] {
+  left: var(--media-slider-pointer);
+}
+
+.media-minimal-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation="vertical"] {
+  top: calc(100% - var(--media-slider-pointer));
+}
+
+.media-minimal-skin .media-slider[data-dragging] .media-slider__fill[data-orientation="horizontal"] {
+  width: var(--media-slider-pointer);
+}
+
+.media-minimal-skin .media-slider[data-dragging] .media-slider__fill[data-orientation="vertical"] {
+  height: var(--media-slider-pointer);
+}
+
 /* ==========================================================================
    Popups & Animations
    ========================================================================== */

package/dist/default/presets/audio/skin.css

@@ -34,6 +34,12 @@
   height: 100%;
   width: 100%;
   border-radius: var(--media-border-radius, 2rem);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+
+  &:focus-visible {
+    outline-color: currentColor;
+  }
   font-family:
     Inter Variable,
     Inter,
@@ -482,6 +488,23 @@
   }
 }
 
+/* Dragging — thumb and fill follow the pointer position */
+.media-default-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation="horizontal"] {
+  left: var(--media-slider-pointer);
+}
+
+.media-default-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation="vertical"] {
+  top: calc(100% - var(--media-slider-pointer));
+}
+
+.media-default-skin .media-slider[data-dragging] .media-slider__fill[data-orientation="horizontal"] {
+  width: var(--media-slider-pointer);
+}
+
+.media-default-skin .media-slider[data-dragging] .media-slider__fill[data-orientation="vertical"] {
+  height: var(--media-slider-pointer);
+}
+
 /* ==========================================================================
    Popups & Tooltips
    ========================================================================== */

package/dist/default/presets/audio/skin.js

@@ -4,6 +4,7 @@ import { AlertDialogPopup } from "../../ui/alert-dialog/alert-dialog-popup.js";
 import { AlertDialogTitle } from "../../ui/alert-dialog/alert-dialog-title.js";
 import { ErrorDialogDescription } from "../../ui/error-dialog/error-dialog-description.js";
 import { ErrorDialogRoot } from "../../ui/error-dialog/error-dialog-root.js";
+import { MediaHotkey } from "../../ui/hotkey/media-hotkey.js";
 import { MuteButton } from "../../ui/mute-button/mute-button.js";
 import { PlayButton } from "../../ui/play-button/play-button.js";
 import { PlaybackRateButton } from "../../ui/playback-rate-button/playback-rate-button.js";
@@ -197,6 +198,70 @@ function AudioSkin(props) {
 						}), /* @__PURE__ */ jsx(VolumePopover, {})]
 					})
 				] })
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "Space",
+				action: "togglePaused"
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "k",
+				action: "togglePaused"
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "m",
+				action: "toggleMuted"
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "ArrowRight",
+				action: "seekStep",
+				value: 5
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "ArrowLeft",
+				action: "seekStep",
+				value: -5
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "l",
+				action: "seekStep",
+				value: 10
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "j",
+				action: "seekStep",
+				value: -10
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "ArrowUp",
+				action: "volumeStep",
+				value: .05
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "ArrowDown",
+				action: "volumeStep",
+				value: -.05
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "0-9",
+				action: "seekToPercent"
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "Home",
+				action: "seekToPercent",
+				value: 0
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "End",
+				action: "seekToPercent",
+				value: 100
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: ">",
+				action: "speedUp"
+			}),
+			/* @__PURE__ */ jsx(MediaHotkey, {
+				keys: "<",
+				action: "speedDown"
 			})
 		]
 	});

package/dist/default/presets/audio/skin.js.map

@@ -1 +1 @@
-{"version":3,"file":"skin.js","names":["Popover.Root","Popover.Trigger","Popover.Popup","VolumeSlider.Root","VolumeSlider.Track","VolumeSlider.Fill","VolumeSlider.Thumb","ErrorDialog.Root","ErrorDialog.Popup","ErrorDialog.Title","ErrorDialog.Description","ErrorDialog.Close","Tooltip.Provider","Tooltip.Root","Tooltip.Trigger","Tooltip.Popup","Time.Value","TimeSlider.Root","TimeSlider.Track","TimeSlider.Fill","TimeSlider.Buffer","TimeSlider.Thumb"],"sources":["../../../../src/presets/audio/skin.tsx"],"sourcesContent":["import {\n  PauseIcon,\n  PlayIcon,\n  RestartIcon,\n  SeekIcon,\n  VolumeHighIcon,\n  VolumeLowIcon,\n  VolumeOffIcon,\n} from '@videojs/icons/react';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container, usePlayer } from '@/player/context';\nimport { ErrorDialog } from '@/ui/error-dialog';\nimport { MuteButton } from '@/ui/mute-button';\nimport { PlayButton } from '@/ui/play-button';\nimport { PlaybackRateButton } from '@/ui/playback-rate-button';\nimport { Popover } from '@/ui/popover';\nimport { SeekButton } from '@/ui/seek-button';\nimport { Time } from '@/ui/time';\nimport { TimeSlider } from '@/ui/time-slider';\nimport { Tooltip } from '@/ui/tooltip';\nimport { VolumeSlider } from '@/ui/volume-slider';\nimport type { BaseSkinProps } from '../types';\n\nconst SEEK_TIME = 10;\n\nexport type AudioSkinProps = BaseSkinProps;\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={cn('media-button media-button--subtle media-button--icon', className)}\n      {...props}\n    />\n  );\n});\n\nfunction VolumePopover(): ReactNode {\n  const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');\n\n  const muteButton = (\n    <MuteButton className=\"media-button--mute\" render={<Button />}>\n      <VolumeOffIcon className=\"media-icon media-icon--volume-off\" />\n      <VolumeLowIcon className=\"media-icon media-icon--volume-low\" />\n      <VolumeHighIcon className=\"media-icon media-icon--volume-high\" />\n    </MuteButton>\n  );\n\n  if (volumeUnsupported) return muteButton;\n\n  return (\n    <Popover.Root openOnHover delay={200} closeDelay={100} side=\"top\">\n      <Popover.Trigger render={muteButton} />\n      <Popover.Popup className=\"media-surface media-popover media-popover--volume\">\n        <VolumeSlider.Root className=\"media-slider\" orientation=\"vertical\" thumbAlignment=\"edge\">\n          <VolumeSlider.Track className=\"media-slider__track\">\n            <VolumeSlider.Fill className=\"media-slider__fill\" />\n          </VolumeSlider.Track>\n          <VolumeSlider.Thumb className=\"media-slider__thumb media-slider__thumb--persistent\" />\n        </VolumeSlider.Root>\n      </Popover.Popup>\n    </Popover.Root>\n  );\n}\n\nexport function AudioSkin(props: AudioSkinProps): ReactNode {\n  const { children, className, ...rest } = props;\n\n  return (\n    <Container className={cn('media-default-skin media-default-skin--audio', className)} {...rest}>\n      {children}\n\n      <ErrorDialog.Root>\n        <ErrorDialog.Popup className=\"media-error\">\n          <div className=\"media-error__dialog\">\n            <div className=\"media-error__content\">\n              <ErrorDialog.Title className=\"media-error__title\">Something went wrong.</ErrorDialog.Title>\n              <ErrorDialog.Description className=\"media-error__description\" />\n            </div>\n            <div className=\"media-error__actions\">\n              <ErrorDialog.Close className=\"media-button media-button--subtle\">OK</ErrorDialog.Close>\n            </div>\n          </div>\n        </ErrorDialog.Popup>\n      </ErrorDialog.Root>\n\n      <div className=\"media-surface media-controls\">\n        <Tooltip.Provider>\n          <div className=\"media-button-group\">\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={\n                  <PlayButton className=\"media-button--play\" render={<Button />}>\n                    <RestartIcon className=\"media-icon media-icon--restart\" />\n                    <PlayIcon className=\"media-icon media-icon--play\" />\n                    <PauseIcon className=\"media-icon media-icon--pause\" />\n                  </PlayButton>\n                }\n              />\n              <Tooltip.Popup className=\"media-surface media-tooltip\" />\n            </Tooltip.Root>\n\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={\n                  <SeekButton seconds={-SEEK_TIME} className=\"media-button--seek\" render={<Button />}>\n                    <span className=\"media-icon__container\">\n                      <SeekIcon className=\"media-icon media-icon--seek media-icon--flipped\" />\n                      <span className=\"media-icon__label\">{SEEK_TIME}</span>\n                    </span>\n                  </SeekButton>\n                }\n              />\n              <Tooltip.Popup className=\"media-surface media-tooltip\">Seek backward {SEEK_TIME} seconds</Tooltip.Popup>\n            </Tooltip.Root>\n\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={\n                  <SeekButton seconds={SEEK_TIME} className=\"media-button--seek\" render={<Button />}>\n                    <span className=\"media-icon__container\">\n                      <SeekIcon className=\"media-icon media-icon--seek\" />\n                      <span className=\"media-icon__label\">{SEEK_TIME}</span>\n                    </span>\n                  </SeekButton>\n                }\n              />\n              <Tooltip.Popup className=\"media-surface media-tooltip\">Seek forward {SEEK_TIME} seconds</Tooltip.Popup>\n            </Tooltip.Root>\n          </div>\n\n          <div className=\"media-time-controls\">\n            <Time.Value type=\"current\" className=\"media-time\" />\n            <TimeSlider.Root className=\"media-slider\">\n              <TimeSlider.Track className=\"media-slider__track\">\n                <TimeSlider.Fill className=\"media-slider__fill\" />\n                <TimeSlider.Buffer className=\"media-slider__buffer\" />\n              </TimeSlider.Track>\n              <TimeSlider.Thumb className=\"media-slider__thumb\" />\n            </TimeSlider.Root>\n            <Time.Value type=\"duration\" className=\"media-time\" />\n          </div>\n\n          <div className=\"media-button-group\">\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={<PlaybackRateButton className=\"media-button--playback-rate\" render={<Button />} />}\n              />\n              <Tooltip.Popup className=\"media-surface media-tooltip\">Toggle playback rate</Tooltip.Popup>\n            </Tooltip.Root>\n\n            <VolumePopover />\n          </div>\n        </Tooltip.Provider>\n      </div>\n    </Container>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"skin.js","names":["Popover.Root","Popover.Trigger","Popover.Popup","VolumeSlider.Root","VolumeSlider.Track","VolumeSlider.Fill","VolumeSlider.Thumb","ErrorDialog.Root","ErrorDialog.Popup","ErrorDialog.Title","ErrorDialog.Description","ErrorDialog.Close","Tooltip.Provider","Tooltip.Root","Tooltip.Trigger","Tooltip.Popup","Time.Value","TimeSlider.Root","TimeSlider.Track","TimeSlider.Fill","TimeSlider.Buffer","TimeSlider.Thumb"],"sources":["../../../../src/presets/audio/skin.tsx"],"sourcesContent":["import {\n  PauseIcon,\n  PlayIcon,\n  RestartIcon,\n  SeekIcon,\n  VolumeHighIcon,\n  VolumeLowIcon,\n  VolumeOffIcon,\n} from '@videojs/icons/react';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container, usePlayer } from '@/player/context';\nimport { ErrorDialog } from '@/ui/error-dialog';\nimport { MediaHotkey } from '@/ui/hotkey/media-hotkey';\nimport { MuteButton } from '@/ui/mute-button';\nimport { PlayButton } from '@/ui/play-button';\nimport { PlaybackRateButton } from '@/ui/playback-rate-button';\nimport { Popover } from '@/ui/popover';\nimport { SeekButton } from '@/ui/seek-button';\nimport { Time } from '@/ui/time';\nimport { TimeSlider } from '@/ui/time-slider';\nimport { Tooltip } from '@/ui/tooltip';\nimport { VolumeSlider } from '@/ui/volume-slider';\nimport type { BaseSkinProps } from '../types';\n\nconst SEEK_TIME = 10;\n\nexport type AudioSkinProps = BaseSkinProps;\n\nconst Button = forwardRef<HTMLButtonElement, ComponentProps<'button'>>(function Button({ className, ...props }, ref) {\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={cn('media-button media-button--subtle media-button--icon', className)}\n      {...props}\n    />\n  );\n});\n\nfunction VolumePopover(): ReactNode {\n  const volumeUnsupported = usePlayer((s) => s.volumeAvailability === 'unsupported');\n\n  const muteButton = (\n    <MuteButton className=\"media-button--mute\" render={<Button />}>\n      <VolumeOffIcon className=\"media-icon media-icon--volume-off\" />\n      <VolumeLowIcon className=\"media-icon media-icon--volume-low\" />\n      <VolumeHighIcon className=\"media-icon media-icon--volume-high\" />\n    </MuteButton>\n  );\n\n  if (volumeUnsupported) return muteButton;\n\n  return (\n    <Popover.Root openOnHover delay={200} closeDelay={100} side=\"top\">\n      <Popover.Trigger render={muteButton} />\n      <Popover.Popup className=\"media-surface media-popover media-popover--volume\">\n        <VolumeSlider.Root className=\"media-slider\" orientation=\"vertical\" thumbAlignment=\"edge\">\n          <VolumeSlider.Track className=\"media-slider__track\">\n            <VolumeSlider.Fill className=\"media-slider__fill\" />\n          </VolumeSlider.Track>\n          <VolumeSlider.Thumb className=\"media-slider__thumb media-slider__thumb--persistent\" />\n        </VolumeSlider.Root>\n      </Popover.Popup>\n    </Popover.Root>\n  );\n}\n\nexport function AudioSkin(props: AudioSkinProps): ReactNode {\n  const { children, className, ...rest } = props;\n\n  return (\n    <Container className={cn('media-default-skin media-default-skin--audio', className)} {...rest}>\n      {children}\n\n      <ErrorDialog.Root>\n        <ErrorDialog.Popup className=\"media-error\">\n          <div className=\"media-error__dialog\">\n            <div className=\"media-error__content\">\n              <ErrorDialog.Title className=\"media-error__title\">Something went wrong.</ErrorDialog.Title>\n              <ErrorDialog.Description className=\"media-error__description\" />\n            </div>\n            <div className=\"media-error__actions\">\n              <ErrorDialog.Close className=\"media-button media-button--subtle\">OK</ErrorDialog.Close>\n            </div>\n          </div>\n        </ErrorDialog.Popup>\n      </ErrorDialog.Root>\n\n      <div className=\"media-surface media-controls\">\n        <Tooltip.Provider>\n          <div className=\"media-button-group\">\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={\n                  <PlayButton className=\"media-button--play\" render={<Button />}>\n                    <RestartIcon className=\"media-icon media-icon--restart\" />\n                    <PlayIcon className=\"media-icon media-icon--play\" />\n                    <PauseIcon className=\"media-icon media-icon--pause\" />\n                  </PlayButton>\n                }\n              />\n              <Tooltip.Popup className=\"media-surface media-tooltip\" />\n            </Tooltip.Root>\n\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={\n                  <SeekButton seconds={-SEEK_TIME} className=\"media-button--seek\" render={<Button />}>\n                    <span className=\"media-icon__container\">\n                      <SeekIcon className=\"media-icon media-icon--seek media-icon--flipped\" />\n                      <span className=\"media-icon__label\">{SEEK_TIME}</span>\n                    </span>\n                  </SeekButton>\n                }\n              />\n              <Tooltip.Popup className=\"media-surface media-tooltip\">Seek backward {SEEK_TIME} seconds</Tooltip.Popup>\n            </Tooltip.Root>\n\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={\n                  <SeekButton seconds={SEEK_TIME} className=\"media-button--seek\" render={<Button />}>\n                    <span className=\"media-icon__container\">\n                      <SeekIcon className=\"media-icon media-icon--seek\" />\n                      <span className=\"media-icon__label\">{SEEK_TIME}</span>\n                    </span>\n                  </SeekButton>\n                }\n              />\n              <Tooltip.Popup className=\"media-surface media-tooltip\">Seek forward {SEEK_TIME} seconds</Tooltip.Popup>\n            </Tooltip.Root>\n          </div>\n\n          <div className=\"media-time-controls\">\n            <Time.Value type=\"current\" className=\"media-time\" />\n            <TimeSlider.Root className=\"media-slider\">\n              <TimeSlider.Track className=\"media-slider__track\">\n                <TimeSlider.Fill className=\"media-slider__fill\" />\n                <TimeSlider.Buffer className=\"media-slider__buffer\" />\n              </TimeSlider.Track>\n              <TimeSlider.Thumb className=\"media-slider__thumb\" />\n            </TimeSlider.Root>\n            <Time.Value type=\"duration\" className=\"media-time\" />\n          </div>\n\n          <div className=\"media-button-group\">\n            <Tooltip.Root side=\"top\">\n              <Tooltip.Trigger\n                render={<PlaybackRateButton className=\"media-button--playback-rate\" render={<Button />} />}\n              />\n              <Tooltip.Popup className=\"media-surface media-tooltip\">Toggle playback rate</Tooltip.Popup>\n            </Tooltip.Root>\n\n            <VolumePopover />\n          </div>\n        </Tooltip.Provider>\n      </div>\n\n      {/* Hotkeys */}\n      <MediaHotkey keys=\"Space\" action=\"togglePaused\" />\n      <MediaHotkey keys=\"k\" action=\"togglePaused\" />\n      <MediaHotkey keys=\"m\" action=\"toggleMuted\" />\n      <MediaHotkey keys=\"ArrowRight\" action=\"seekStep\" value={5} />\n      <MediaHotkey keys=\"ArrowLeft\" action=\"seekStep\" value={-5} />\n      <MediaHotkey keys=\"l\" action=\"seekStep\" value={10} />\n      <MediaHotkey keys=\"j\" action=\"seekStep\" value={-10} />\n      <MediaHotkey keys=\"ArrowUp\" action=\"volumeStep\" value={0.05} />\n      <MediaHotkey keys=\"ArrowDown\" action=\"volumeStep\" value={-0.05} />\n      <MediaHotkey keys=\"0-9\" action=\"seekToPercent\" />\n      <MediaHotkey keys=\"Home\" action=\"seekToPercent\" value={0} />\n      <MediaHotkey keys=\"End\" action=\"seekToPercent\" value={100} />\n      <MediaHotkey keys=\">\" action=\"speedUp\" />\n      <MediaHotkey keys=\"<\" action=\"speedDown\" />\n    </Container>\n  );\n}\n"],"mappings":"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"}

package/dist/default/presets/video/minimal-skin.css

@@ -34,6 +34,12 @@
   height: 100%;
   width: 100%;
   border-radius: var(--media-border-radius, 0.75rem);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+
+  &:focus-visible {
+    outline-color: currentColor;
+  }
   font-family:
     Inter Variable,
     Inter,
@@ -607,6 +613,23 @@
   }
 }
 
+/* Dragging — thumb and fill follow the pointer position */
+.media-minimal-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation="horizontal"] {
+  left: var(--media-slider-pointer);
+}
+
+.media-minimal-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation="vertical"] {
+  top: calc(100% - var(--media-slider-pointer));
+}
+
+.media-minimal-skin .media-slider[data-dragging] .media-slider__fill[data-orientation="horizontal"] {
+  width: var(--media-slider-pointer);
+}
+
+.media-minimal-skin .media-slider[data-dragging] .media-slider__fill[data-orientation="vertical"] {
+  height: var(--media-slider-pointer);
+}
+
 /* ==========================================================================
    Popups & Animations
    ========================================================================== */

package/dist/default/presets/video/skin.css

@@ -34,6 +34,12 @@
   height: 100%;
   width: 100%;
   border-radius: var(--media-border-radius, 2rem);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+
+  &:focus-visible {
+    outline-color: currentColor;
+  }
   font-family:
     Inter Variable,
     Inter,
@@ -633,6 +639,23 @@
   }
 }
 
+/* Dragging — thumb and fill follow the pointer position */
+.media-default-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation="horizontal"] {
+  left: var(--media-slider-pointer);
+}
+
+.media-default-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation="vertical"] {
+  top: calc(100% - var(--media-slider-pointer));
+}
+
+.media-default-skin .media-slider[data-dragging] .media-slider__fill[data-orientation="horizontal"] {
+  width: var(--media-slider-pointer);
+}
+
+.media-default-skin .media-slider[data-dragging] .media-slider__fill[data-orientation="vertical"] {
+  height: var(--media-slider-pointer);
+}
+
 /* ==========================================================================
    Popups & Tooltips
    ========================================================================== */