@videojs/react 10.0.0-beta.11 → 10.0.0-beta.13

package/dist/dev/media/native-hls-video/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 { NativeHlsMedia, NativeHlsMediaDelegate } from "@videojs/core/dom/media/native-hls";
+//#region src/media/native-hls-video/index.tsx
+const NativeHlsVideo = forwardRef(({ children, ...props }, ref) => {
+	const mediaApi = useMediaInstance(NativeHlsMedia);
+	return /* @__PURE__ */ jsx("video", {
+		ref: useComposedRefs(attachMediaElement(mediaApi), ref),
+		...mediaProps(mediaApi, NativeHlsMediaDelegate, props),
+		children
+	});
+});
+//#endregion
+export { NativeHlsVideo, NativeHlsVideo as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"}

package/dist/dev/media/simple-hls-video/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/simple-hls-video/index.tsx"],"mappings":";;;;KAQY,mBAAA,GAAsB,iBAAA,CAAkB,mBAAA,CAAoB,gBAAA;AAAA,cAE3D,cAAA,QAAc,yBAAA,CAAA,mBAAA,CAAA,gBAAA;aAAA,KAAA,CAAA,SAAA;AAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/simple-hls-video/index.tsx"],"mappings":";;;;KASY,mBAAA,GAAsB,iBAAA,CAAkB,mBAAA,CAAoB,gBAAA;AAAA,cAE3D,cAAA,QAAc,yBAAA,CAAA,mBAAA,CAAA,gBAAA;aAAA,KAAA,CAAA,SAAA;AAAA"}

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

@@ -5,17 +5,17 @@ import { useMediaInstance } from "../../utils/use-media-instance.js";
 import { forwardRef } from "react";
 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 mediaApi = useMediaInstance(SimpleHlsMedia);
 	return /* @__PURE__ */ jsx("video", {
 		ref: useComposedRefs(attachMediaElement(mediaApi), ref),
-		...mediaProps(mediaApi, props),
+		...mediaProps(mediaApi, SpfMedia, props),
 		children
 	});
 });
-
 //#endregion
 export { SimpleHlsVideo, SimpleHlsVideo as default };
+
 //# sourceMappingURL=index.js.map

package/dist/dev/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 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, props)}>\n      {children}\n    </video>\n  );\n});\n\nexport default SimpleHlsVideo;\n"],"mappings":";;;;;;;;;AAUA,MAAa,iBAAiB,YAAmD,EAAE,UAAU,GAAG,SAAS,QAAQ;CAC/G,MAAM,WAAW,iBAAiB,eAAe;AAIjD,QACE,oBAAC;EAAM,KAHW,gBAAgB,mBAAmB,SAAS,EAAE,IAAI;EAG3C,GAAI,WAAW,UAAU,MAAM;EACrD;GACK;EAEV"}
+{"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"}

package/dist/dev/media/video.js

@@ -1,10 +1,8 @@
-'use client';
-
+"use client";
 import { useComposedRefs } from "../utils/use-composed-refs.js";
 import { useMediaAttach } from "../player/context.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/media/video.tsx
 const Video = forwardRef(function Video({ children, ...props }, ref) {
 	return /* @__PURE__ */ jsx("video", {
@@ -13,7 +11,7 @@ const Video = forwardRef(function Video({ children, ...props }, ref) {
 		children
 	});
 });
-
 //#endregion
 export { Video };
+
 //# sourceMappingURL=video.js.map

package/dist/dev/media/video.js.map

@@ -1 +1 @@
-{"version":3,"file":"video.js","names":[],"sources":["../../../src/media/video.tsx"],"sourcesContent":["'use client';\n\nimport type { VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\n\nimport { useMediaAttach } from '../player/context';\nimport { useComposedRefs } from '../utils/use-composed-refs';\n\nexport interface VideoProps extends VideoHTMLAttributes<HTMLVideoElement> {}\n\nexport const Video = forwardRef<HTMLVideoElement, VideoProps>(function Video({ children, ...props }, ref) {\n  const setMedia = useMediaAttach();\n  const composedRef = useComposedRefs(ref, setMedia);\n\n  return (\n    <video ref={composedRef} {...props}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace Video {\n  export type Props = VideoProps;\n}\n"],"mappings":";;;;;;;;AAUA,MAAa,QAAQ,WAAyC,SAAS,MAAM,EAAE,UAAU,GAAG,SAAS,KAAK;AAIxG,QACE,oBAAC;EAAM,KAHW,gBAAgB,KADnB,gBAAgB,CACiB;EAGvB,GAAI;EAC1B;GACK;EAEV"}
+{"version":3,"file":"video.js","names":[],"sources":["../../../src/media/video.tsx"],"sourcesContent":["'use client';\n\nimport type { VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\n\nimport { useMediaAttach } from '../player/context';\nimport { useComposedRefs } from '../utils/use-composed-refs';\n\nexport interface VideoProps extends VideoHTMLAttributes<HTMLVideoElement> {}\n\nexport const Video = forwardRef<HTMLVideoElement, VideoProps>(function Video({ children, ...props }, ref) {\n  const setMedia = useMediaAttach();\n  const composedRef = useComposedRefs(ref, setMedia);\n\n  return (\n    <video ref={composedRef} {...props}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace Video {\n  export type Props = VideoProps;\n}\n"],"mappings":";;;;;;AAUA,MAAa,QAAQ,WAAyC,SAAS,MAAM,EAAE,UAAU,GAAG,SAAS,KAAK;AAIxG,QACE,oBAAC,SAAD;EAAO,KAHW,gBAAgB,KADnB,gBAAgB,CACiB;EAGvB,GAAI;EAC1B;EACK,CAAA;EAEV"}

package/dist/dev/player/context.js

@@ -1,10 +1,8 @@
-'use client';
-
+"use client";
 import { useComposedRefs } from "../utils/use-composed-refs.js";
 import { useStore } from "@videojs/store/react";
 import { createContext, forwardRef, useContext, useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/player/context.tsx
 const PlayerContext = createContext(null);
 const EMPTY_UNSUBSCRIBE = () => {};
@@ -65,7 +63,7 @@ const Container = forwardRef(function Container({ children, ...props }, ref) {
 		children
 	});
 });
-
 //#endregion
 export { Container, PlayerContextProvider, useContainer, useContainerAttach, useMedia, useMediaAttach, useOptionalPlayer, usePlayer, usePlayerContext };
+
 //# sourceMappingURL=context.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/player/context.tsx"],"sourcesContent":["'use client';\n\nimport type { 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;EAAgB;EAAQ;GAAkC;;;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,OAAkB;AAClE,QAAO,MAAM,QAAQ;;;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;EAAI,KAAK;EAAa,GAAI;EACxB;GACG;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, 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"}

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

@@ -1,12 +1,10 @@
-'use client';
-
+"use client";
 import { Container, PlayerContextProvider, useMedia, usePlayerContext } from "./context.js";
 import { useDestroy } from "../utils/use-destroy.js";
 import { combine, createStore } from "@videojs/store";
 import { useStore } from "@videojs/store/react";
 import { useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/player/create-player.tsx
 function createPlayer(config) {
 	function Provider({ children }) {
@@ -48,7 +46,7 @@ function createPlayer(config) {
 		useMedia
 	};
 }
-
 //#endregion
 export { createPlayer };
+
 //# sourceMappingURL=create-player.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"create-player.js","names":[],"sources":["../../../src/player/create-player.tsx"],"sourcesContent":["'use client';\n\nimport 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;GAAsB,OAAO;IAAE;IAAO;IAAO;IAAU;IAAW;IAAc;GAC9E;IACqB;;AAI5B,KAAe,OAAO,YACpB,UAAS,cAAc,GAAG,OAAO,YAAY;CAG/C,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 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;;AAI5B,KAAe,OAAO,YACpB,UAAS,cAAc,GAAG,OAAO,YAAY;CAG/C,SAAS,UAAa,UAAqD;EACzE,MAAM,EAAE,UAAU,kBAAkB;AACpC,SAAO,SAAS,OAAO,SAAgB;;AAGzC,QAAO;EACL;EACA;EACA;EACA;EACD"}

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

@@ -4,5 +4,4 @@ import { MinimalAudioSkinTailwind } from "./minimal-skin.tailwind.js";
 import { AudioSkin } from "./skin.js";
 import { AudioSkinTailwind } from "./skin.tailwind.js";
 import { audioFeatures } from "@videojs/core/dom";
-
-export { Audio, AudioSkin, AudioSkinTailwind, MinimalAudioSkin, MinimalAudioSkinTailwind, audioFeatures };
+export { Audio, AudioSkin, AudioSkinTailwind, MinimalAudioSkin, MinimalAudioSkinTailwind, audioFeatures };

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

@@ -27,12 +27,12 @@
    ========================================================================== */
 
 .media-minimal-skin {
+  container: media-root / inline-size;
   position: relative;
   isolation: isolate;
   display: block;
   height: 100%;
   width: 100%;
-  container: media-root / inline-size;
   border-radius: var(--media-border-radius, 0.75rem);
   font-family:
     Inter Variable,
@@ -40,13 +40,20 @@
     ui-sans-serif,
     system-ui,
     sans-serif;
-  font-size: 0.8125rem;
   line-height: 1.5;
   letter-spacing: normal;
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
 
-  --media-controls-radius: var(--media-border-radius, 1rem);
+  & > * {
+    font-size: 0.75rem; /* 12px at 100% font size */
+  }
+
+  @container media-root (width > 48rem) {
+    & > * {
+      font-size: 0.875rem; /* 14px at 100% font size */
+    }
+  }
 }
 
 /* ==========================================================================
@@ -71,6 +78,10 @@
    Error Dialog
    ========================================================================== */
 
+.media-minimal-skin .media-error:not([data-open]) {
+  display: none;
+}
+
 .media-minimal-skin .media-error__title {
   font-weight: 600;
   line-height: 1.25;
@@ -107,6 +118,8 @@
     from var(--media-controls-current-shadow-color) l c h /
     calc(alpha * 0.4)
   );
+  background-color: var(--media-controls-background-color);
+  backdrop-filter: var(--media-controls-backdrop-filter);
   text-shadow: 0 1px 0 var(--media-controls-current-shadow-color);
 }
 
@@ -115,49 +128,42 @@
    ========================================================================== */
 
 .media-minimal-skin .media-time-controls {
+  container: media-time-controls / inline-size;
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
   flex: 1;
   gap: 0.75rem;
 }
-.media-minimal-skin .media-time {
+
+.media-minimal-skin .media-time-group {
   display: flex;
   align-items: center;
   gap: 0.25rem;
 }
-.media-minimal-skin .media-time__value {
+
+.media-minimal-skin .media-time {
   font-variant-numeric: tabular-nums;
 }
-.media-minimal-skin .media-time__value--current,
-.media-minimal-skin .media-time__separator {
+
+.media-minimal-skin .media-time--current,
+.media-minimal-skin .media-time-separator {
   display: none;
 }
-@container media-controls (width > 28rem) {
+
+@container media-root (width > 42rem) {
   .media-minimal-skin .media-time-controls {
     flex-direction: row;
   }
-  .media-minimal-skin .media-time__value--duration,
-  .media-minimal-skin .media-time__separator {
+
+  .media-minimal-skin .media-time--duration,
+  .media-minimal-skin .media-time-separator {
     color: oklch(from currentColor l c h / 0.6);
   }
-  .media-minimal-skin .media-time__value--current,
-  .media-minimal-skin .media-time__separator {
-    display: inline;
-  }
-}
 
-/* ==========================================================================
-   Button Groups
-   ========================================================================== */
-
-.media-minimal-skin .media-button-group {
-  display: flex;
-  align-items: center;
-  gap: 0.075rem;
-
-  @container media-root (width > 40rem) {
-    gap: 0.125rem;
+  .media-minimal-skin .media-time--current,
+  .media-minimal-skin .media-time-separator {
+    display: inline;
   }
 }
 
@@ -173,10 +179,12 @@
   flex-shrink: 0;
   padding: 0.5rem 1rem;
   border: none;
-  border-radius: calc(var(--media-controls-radius) - var(--media-controls-padding));
+  border-radius: 0.5rem;
   outline: 2px solid transparent;
   outline-offset: -2px;
   transition-property: background-color, outline-offset, scale;
+  /* Fix weird jumping when clicking on the buttons in Safari. */
+  will-change: scale;
   transition-duration: 150ms;
   transition-timing-function: ease-out;
   cursor: pointer;
@@ -207,7 +215,7 @@
 /* biome-ignore lint/correctness/noUnknownProperty: corner-shape is an emerging CSS spec */
 @supports (corner-shape: squircle) {
   .media-minimal-skin .media-button {
-    border-radius: var(--media-controls-radius);
+    border-radius: 1rem;
     /* biome-ignore lint/correctness/noUnknownProperty: corner-shape is an emerging CSS spec */
     corner-shape: squircle;
   }
@@ -256,7 +264,7 @@
     position: absolute;
     right: -1px;
     bottom: -3px;
-    font-size: 10px;
+    font-size: 10px; /* Hard coded due to size limitations. */
     font-weight: 480;
     font-variant-numeric: tabular-nums;
   }
@@ -265,10 +273,6 @@
     right: unset;
     left: -1px;
   }
-
-  @container media-controls (width < 28rem) {
-    display: none;
-  }
 }
 
 /* Playback rate button */
@@ -282,6 +286,20 @@
   }
 }
 
+/* ==========================================================================
+   Button Groups
+   ========================================================================== */
+
+.media-minimal-skin .media-button-group {
+  display: flex;
+  align-items: center;
+  gap: 0.075rem;
+
+  @container media-root (width > 42rem) {
+    gap: 0.125rem;
+  }
+}
+
 /* ==========================================================================
    Icons
    ========================================================================== */
@@ -321,11 +339,11 @@
   &[data-orientation="horizontal"] {
     min-width: 5rem;
     width: 100%;
-    height: 1.25rem;
+    height: 2rem;
   }
 
   &[data-orientation="vertical"] {
-    width: 1.25rem;
+    width: 2rem;
     height: 4.5rem;
   }
 }
@@ -529,15 +547,16 @@
 
 .media-minimal-skin .media-tooltip {
   padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-  background-color: oklch(1 0 0 / 0.1);
-  backdrop-filter: blur(16px) saturate(1.5);
+  border-radius: 0.5rem;
+  background-color: var(--media-tooltip-background-color);
+  backdrop-filter: var(--media-tooltip-backdrop-filter);
   box-shadow:
+    0 0 0 1px var(--media-tooltip-border-color),
     0 4px 6px -1px oklch(0 0 0 / 0.1),
     0 2px 4px -2px oklch(0 0 0 / 0.1);
-  font-size: 0.75rem;
+  color: var(--media-tooltip-text-color);
+  font-size: 0.75rem; /* 12px at 100% font size */
   white-space: nowrap;
-  --media-tooltip-side-offset: 0.75rem;
 
   &[data-side="top"]::before,
   &[data-side="bottom"]::before {
@@ -547,14 +566,6 @@
   &[data-side="right"]::before {
     width: var(--media-tooltip-side-offset);
   }
-
-  @media (prefers-reduced-transparency: reduce) {
-    background-color: oklch(0 0 0 / 0.7);
-  }
-
-  @media (prefers-contrast: more) {
-    background-color: oklch(0 0 0 / 0.9);
-  }
 }
 
 .media-minimal-skin .media-popover--volume:has(media-volume-slider[data-availability="unsupported"]) {
@@ -632,13 +643,19 @@
 
 .media-minimal-skin--audio {
   --media-controls-background-color: oklch(1 0 0);
-  --media-controls-border-color: oklch(0 0 0 / 0.1);
-  --media-controls-padding: 0.375rem;
-  --media-text-color: var(--media-color-primary, oklch(0 0 0));
+  --media-controls-backdrop-filter: blur(16px) saturate(1.5);
+  --media-controls-border-color: oklch(0 0 0 / 0.05);
+  --media-controls-text-color: var(--media-color-primary, oklch(0 0 0));
   --media-error-dialog-transition-duration: 250ms;
   --media-error-dialog-transition-delay: 100ms;
   --media-popup-transition-duration: 100ms;
   --media-popup-transition-timing-function: ease-out;
+  --media-tooltip-background-color: oklch(1 0 0 / 0.1);
+  --media-tooltip-border-color: oklch(0 0 0 / 0.05);
+  --media-tooltip-backdrop-filter: blur(16px) saturate(1.5);
+  --media-tooltip-text-color: currentColor;
+  --media-tooltip-side-offset: 0.75rem;
+  --media-popover-side-offset: 0.75rem;
 
   @media (prefers-reduced-motion: reduce) {
     --media-error-dialog-transition-duration: 50ms;
@@ -649,7 +666,15 @@
   @media (prefers-color-scheme: dark) {
     --media-controls-background-color: oklch(0 0 0);
     --media-controls-border-color: oklch(1 0 0 / 0.1);
-    --media-text-color: var(--media-color-primary, oklch(1 0 0));
+    --media-controls-text-color: var(--media-color-primary, oklch(1 0 0));
+  }
+
+  @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {
+    --media-tooltip-background-color: oklch(1 0 0);
+  }
+
+  @media (prefers-color-scheme: dark) and ((prefers-reduced-transparency: reduce) or (prefers-contrast: more)) {
+    --media-tooltip-background-color: oklch(0 0 0);
   }
 }
 
@@ -695,13 +720,11 @@
   ========================================================================== */
 
 .media-minimal-skin--audio .media-controls {
+  padding: 0.375rem;
   gap: 0.5rem;
-  padding: var(--media-controls-padding);
-  background-color: var(--media-controls-background-color);
-  backdrop-filter: blur(16px) saturate(1.5);
-  border-radius: var(--media-controls-radius);
-  color: var(--media-text-color);
+  color: var(--media-controls-text-color);
   box-shadow: 0 0 0 1px var(--media-controls-border-color);
+  border-radius: var(--media-border-radius, 1rem);
 }
 
 /* ==========================================================================
@@ -710,7 +733,6 @@
 
 .media-minimal-skin--audio .media-popover--volume {
   background: linear-gradient(to left, var(--media-controls-background-color) 80%, transparent 100%);
-  padding: 0.5rem 0 0.5rem 4rem;
-  --media-popover-side-offset: 0.75rem;
+  padding: 0 0 0 4rem;
 }
 

package/dist/dev/presets/audio/minimal-skin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"minimal-skin.d.ts","names":[],"sources":["../../../../src/presets/audio/minimal-skin.tsx"],"mappings":";;;;KAwBY,qBAAA,GAAwB,aAAA;AAAA,iBA4DpB,gBAAA,CAAiB,KAAA,EAAO,qBAAA,GAAwB,SAAA"}
+{"version":3,"file":"minimal-skin.d.ts","names":[],"sources":["../../../../src/presets/audio/minimal-skin.tsx"],"mappings":";;;;KAwBY,qBAAA,GAAwB,aAAA;AAAA,iBAkDpB,gBAAA,CAAiB,KAAA,EAAO,qBAAA,GAAwB,SAAA"}

package/dist/dev/presets/audio/minimal-skin.js

@@ -1,4 +1,9 @@
 import { Container, usePlayer } from "../../player/context.js";
+import { AlertDialogClose } from "../../ui/alert-dialog/alert-dialog-close.js";
+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 { 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";
@@ -26,22 +31,11 @@ import SeekIcon from "../../icons/dist/react/minimal/seek.js";
 import VolumeHighIcon from "../../icons/dist/react/minimal/volume-high.js";
 import VolumeLowIcon from "../../icons/dist/react/minimal/volume-low.js";
 import VolumeOffIcon from "../../icons/dist/react/minimal/volume-off.js";
-import { ErrorDialog } from "../error-dialog.js";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@videojs/utils/style";
-
 //#region src/presets/audio/minimal-skin.tsx
 const SEEK_TIME = 10;
-const ERROR_CLASSNAMES = {
-	root: "media-error",
-	dialog: "media-error__dialog",
-	content: "media-error__content",
-	title: "media-error__title",
-	description: "media-error__description",
-	actions: "media-error__actions",
-	close: "media-button media-button--subtle"
-};
 const Button = forwardRef(function Button({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx("button", {
 		ref,
@@ -93,7 +87,25 @@ function MinimalAudioSkin(props) {
 		...rest,
 		children: [
 			children,
-			/* @__PURE__ */ jsx(ErrorDialog, { classNames: ERROR_CLASSNAMES }),
+			/* @__PURE__ */ jsx(ErrorDialogRoot, { children: /* @__PURE__ */ jsx(AlertDialogPopup, {
+				className: "media-error",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "media-error__dialog",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "media-error__content",
+						children: [/* @__PURE__ */ jsx(AlertDialogTitle, {
+							className: "media-error__title",
+							children: "Something went wrong."
+						}), /* @__PURE__ */ jsx(ErrorDialogDescription, { className: "media-error__description" })]
+					}), /* @__PURE__ */ jsx("div", {
+						className: "media-error__actions",
+						children: /* @__PURE__ */ jsx(AlertDialogClose, {
+							className: "media-button media-button--subtle",
+							children: "OK"
+						})
+					})]
+				})
+			}) }),
 			/* @__PURE__ */ jsx("div", {
 				className: "media-controls",
 				children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
@@ -164,16 +176,16 @@ function MinimalAudioSkin(props) {
 					/* @__PURE__ */ jsxs("div", {
 						className: "media-time-controls",
 						children: [/* @__PURE__ */ jsxs(Group, {
-							className: "media-time",
+							className: "media-time-group",
 							children: [
 								/* @__PURE__ */ jsx(Value, {
 									type: "current",
-									className: "media-time__value media-time__value--current"
+									className: "media-time media-time--current"
 								}),
-								/* @__PURE__ */ jsx(Separator, { className: "media-time__separator" }),
+								/* @__PURE__ */ jsx(Separator, { className: "media-time-separator" }),
 								/* @__PURE__ */ jsx(Value, {
 									type: "duration",
-									className: "media-time__value media-time__value--duration"
+									className: "media-time media-time--duration"
 								})
 							]
 						}), /* @__PURE__ */ jsxs(TimeSliderRoot, {
@@ -202,7 +214,7 @@ function MinimalAudioSkin(props) {
 		]
 	});
 }
-
 //#endregion
 export { MinimalAudioSkin };
+
 //# sourceMappingURL=minimal-skin.js.map

package/dist/dev/presets/audio/minimal-skin.js.map

@@ -1 +1 @@
-{"version":3,"file":"minimal-skin.js","names":["Popover.Root","Popover.Trigger","Popover.Popup","VolumeSlider.Root","VolumeSlider.Track","VolumeSlider.Fill","VolumeSlider.Thumb","Tooltip.Provider","Tooltip.Root","Tooltip.Trigger","Tooltip.Popup","Time.Group","Time.Value","Time.Separator","TimeSlider.Root","TimeSlider.Track","TimeSlider.Fill","TimeSlider.Buffer","TimeSlider.Thumb"],"sources":["../../../../src/presets/audio/minimal-skin.tsx"],"sourcesContent":["import {\n  PauseIcon,\n  PlayIcon,\n  RestartIcon,\n  SeekIcon,\n  VolumeHighIcon,\n  VolumeLowIcon,\n  VolumeOffIcon,\n} from '@videojs/icons/react/minimal';\nimport { cn } from '@videojs/utils/style';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\nimport { Container, usePlayer } from '@/player/context';\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 { ErrorDialog } from '../error-dialog';\nimport type { BaseSkinProps } from '../types';\n\nexport type MinimalAudioSkinProps = BaseSkinProps;\n\nconst SEEK_TIME = 10;\n\nconst ERROR_CLASSNAMES = {\n  root: 'media-error',\n  dialog: 'media-error__dialog',\n  content: 'media-error__content',\n  title: 'media-error__title',\n  description: 'media-error__description',\n  actions: 'media-error__actions',\n  close: 'media-button media-button--subtle',\n};\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 PlayLabel(): string {\n  const paused = usePlayer((s) => Boolean(s.paused));\n  const ended = usePlayer((s) => Boolean(s.ended));\n  if (ended) return 'Replay';\n  return paused ? 'Play' : 'Pause';\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=\"left\">\n      <Popover.Trigger render={muteButton} />\n      <Popover.Popup className=\"media-popover media-popover--volume\">\n        <VolumeSlider.Root className=\"media-slider\" orientation=\"horizontal\" 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 MinimalAudioSkin(props: MinimalAudioSkinProps): ReactNode {\n  const { children, className, ...rest } = props;\n\n  return (\n    <Container className={cn('media-minimal-skin media-minimal-skin--audio', className)} {...rest}>\n      {children}\n\n      <ErrorDialog classNames={ERROR_CLASSNAMES} />\n\n      <div className=\"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-tooltip\">\n                <PlayLabel />\n              </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 media-icon--flipped\" />\n                      <span className=\"media-icon__label\">{SEEK_TIME}</span>\n                    </span>\n                  </SeekButton>\n                }\n              />\n              <Tooltip.Popup className=\"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-tooltip\">Seek forward {SEEK_TIME} seconds</Tooltip.Popup>\n            </Tooltip.Root>\n          </div>\n\n          <div className=\"media-time-controls\">\n            <Time.Group className=\"media-time\">\n              <Time.Value type=\"current\" className=\"media-time__value media-time__value--current\" />\n              <Time.Separator className=\"media-time__separator\" />\n              <Time.Value type=\"duration\" className=\"media-time__value media-time__value--duration\" />\n            </Time.Group>\n\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          </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-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":"minimal-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.Group","Time.Value","Time.Separator","TimeSlider.Root","TimeSlider.Track","TimeSlider.Fill","TimeSlider.Buffer","TimeSlider.Thumb"],"sources":["../../../../src/presets/audio/minimal-skin.tsx"],"sourcesContent":["import {\n  PauseIcon,\n  PlayIcon,\n  RestartIcon,\n  SeekIcon,\n  VolumeHighIcon,\n  VolumeLowIcon,\n  VolumeOffIcon,\n} from '@videojs/icons/react/minimal';\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\nexport type MinimalAudioSkinProps = BaseSkinProps;\n\nconst SEEK_TIME = 10;\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 PlayLabel(): string {\n  const paused = usePlayer((s) => Boolean(s.paused));\n  const ended = usePlayer((s) => Boolean(s.ended));\n  if (ended) return 'Replay';\n  return paused ? 'Play' : 'Pause';\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=\"left\">\n      <Popover.Trigger render={muteButton} />\n      <Popover.Popup className=\"media-popover media-popover--volume\">\n        <VolumeSlider.Root className=\"media-slider\" orientation=\"horizontal\" 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 MinimalAudioSkin(props: MinimalAudioSkinProps): ReactNode {\n  const { children, className, ...rest } = props;\n\n  return (\n    <Container className={cn('media-minimal-skin media-minimal-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-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-tooltip\">\n                <PlayLabel />\n              </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 media-icon--flipped\" />\n                      <span className=\"media-icon__label\">{SEEK_TIME}</span>\n                    </span>\n                  </SeekButton>\n                }\n              />\n              <Tooltip.Popup className=\"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-tooltip\">Seek forward {SEEK_TIME} seconds</Tooltip.Popup>\n            </Tooltip.Root>\n          </div>\n\n          <div className=\"media-time-controls\">\n            <Time.Group className=\"media-time-group\">\n              <Time.Value type=\"current\" className=\"media-time media-time--current\" />\n              <Time.Separator className=\"media-time-separator\" />\n              <Time.Value type=\"duration\" className=\"media-time media-time--duration\" />\n            </Time.Group>\n\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          </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-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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"}