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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@videojs/react",
   "type": "module",
-  "version": "10.0.0-beta.23",
+  "version": "10.0.0-beta.25",
   "description": "React library for building media players",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,8 @@
   "types": "dist/dev/index.d.ts",
   "sideEffects": false,
   "files": [
-    "dist"
+    "dist",
+    "docs"
   ],
   "exports": {
     ".": {
@@ -22,6 +23,17 @@
       "development": "./dist/dev/index.js",
       "default": "./dist/default/index.js"
     },
+    "./*.css": "./dist/default/*.css",
+    "./icons": {
+      "types": "./dist/dev/icons/index.d.ts",
+      "development": "./dist/dev/icons/index.js",
+      "default": "./dist/default/icons/index.js"
+    },
+    "./icons/*": {
+      "types": "./dist/dev/icons/*/index.d.ts",
+      "development": "./dist/dev/icons/*/index.js",
+      "default": "./dist/default/icons/*/index.js"
+    },
     "./media/*": {
       "types": "./dist/dev/media/*/index.d.ts",
       "development": "./dist/dev/media/*/index.js",
@@ -84,13 +96,14 @@
     }
   },
   "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@videojs/core": "10.0.0-beta.23",
-    "@videojs/spf": "10.0.0-beta.23",
-    "@videojs/store": "10.0.0-beta.23",
-    "@videojs/utils": "10.0.0-beta.23"
+    "@videojs/core": "10.0.0-beta.25",
+    "@videojs/spf": "10.0.0-beta.25",
+    "@videojs/store": "10.0.0-beta.25",
+    "@videojs/utils": "10.0.0-beta.25"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",
@@ -100,8 +113,8 @@
     "react-dom": "^19.2.4",
     "tsdown": "^0.21.9",
     "vitest": "^4.1.0",
-    "@videojs/icons": "10.0.0-beta.23",
-    "@videojs/skins": "10.0.0-beta.23"
+    "@videojs/icons": "10.0.0-beta.25",
+    "@videojs/skins": "10.0.0-beta.25"
   },
   "publishConfig": {
     "access": "public"
@@ -120,6 +133,6 @@
     "dev": "pnpm build:watch",
     "test": "vitest run",
     "test:watch": "vitest",
-    "clean": "rimraf --glob dist types '*.tsbuildinfo'"
+    "clean": "rimraf --glob dist docs types '*.tsbuildinfo'"
   }
 }

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/hls-video/index.tsx"],"sourcesContent":["'use client';\n\nimport type { HlsMediaProps } from '@videojs/core/dom/media/hls';\nimport { HlsMedia, hlsMediaDefaultProps } from '@videojs/core/dom/media/hls';\nimport type { ReactNode, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface HlsVideoProps\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof HlsMediaProps>,\n    Partial<HlsMediaProps> {\n  children?: ReactNode;\n}\n\nexport const HlsVideo = forwardRef<HTMLVideoElement, HlsVideoProps>(function HlsVideo({ children, ...props }, ref) {\n  const media = useMediaInstance(HlsMedia);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, hlsMediaDefaultProps);\n\n  return (\n    <video ref={composedRef} {...htmlProps}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace HlsVideo {\n  export type Props = HlsVideoProps;\n}\n"],"mappings":";;;;;;;;;AAiBA,MAAa,WAAW,WAA4C,SAAS,SAAS,EAAE,UAAU,GAAG,SAAS,KAAK;CACjH,MAAM,QAAQ,iBAAiB,SAAS;AAKxC,QACE,oBAAC,SAAD;EAAO,KAJW,gBADF,eAAe,MAAM,EACQ,IAAI;EAIxB,GAHT,aAAa,OAAO,OAAO,qBAAqB;EAI7D;EACK,CAAA;EAEV"}

package/dist/default/skins/dist/default/default/tailwind/components/preview.js

@@ -1,12 +0,0 @@
-import { cn } from "@videojs/utils/style";
-//#region ../skins/dist/default/default/tailwind/components/preview.js
-const preview = {
-	root: cn("group/preview pointer-events-none bg-black/90 rounded-xl"),
-	thumbnail: cn("block relative overflow-clip rounded-[inherit]", "transition-opacity duration-150 ease-out", "after:absolute after:inset-0 after:rounded-[inherit]", "after:bg-linear-to-t after:from-black/80 after:via-black/30 after:to-black/0", "data-loading:opacity-0"),
-	time: "absolute bottom-2 inset-x-0 text-center tabular-nums",
-	spinner: cn("absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0", "transition-opacity duration-150 ease-out", "group-has-[[role=img][data-loading]]/preview:opacity-100")
-};
-//#endregion
-export { preview };
-
-//# sourceMappingURL=preview.js.map

package/dist/default/skins/dist/default/default/tailwind/components/preview.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"preview.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/preview.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n//#region src/default/tailwind/components/preview.ts\nconst preview = {\n\troot: cn(\"group/preview pointer-events-none bg-black/90 rounded-xl\"),\n\tthumbnail: cn(\"block relative overflow-clip rounded-[inherit]\", \"transition-opacity duration-150 ease-out\", \"after:absolute after:inset-0 after:rounded-[inherit]\", \"after:bg-linear-to-t after:from-black/80 after:via-black/30 after:to-black/0\", \"data-loading:opacity-0\"),\n\ttime: \"absolute bottom-2 inset-x-0 text-center tabular-nums\",\n\tspinner: cn(\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0\", \"transition-opacity duration-150 ease-out\", \"group-has-[[role=img][data-loading]]/preview:opacity-100\")\n};\n//#endregion\nexport { preview };\n\n//# sourceMappingURL=preview.js.map"],"mappings":";;AAEA,MAAM,UAAU;CACf,MAAM,GAAG,2DAA2D;CACpE,WAAW,GAAG,kDAAkD,4CAA4C,wDAAwD,gFAAgF,yBAAyB;CAC7Q,MAAM;CACN,SAAS,GAAG,yEAAyE,4CAA4C,2DAA2D;CAC5L"}

package/dist/default/skins/dist/default/minimal/tailwind/components/preview.js

@@ -1,13 +0,0 @@
-import { cn } from "@videojs/utils/style";
-//#region ../skins/dist/default/minimal/tailwind/components/preview.js
-const preview = {
-	root: "group/preview pointer-events-none",
-	thumbnailWrapper: "relative rounded-lg bg-black/90",
-	thumbnail: cn("block rounded-[inherit] transition-opacity duration-150 ease-out", "data-loading:opacity-0"),
-	time: "mt-2 block text-center tabular-nums",
-	spinner: cn("absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0", "transition-opacity duration-150 ease-out", "group-has-[[role=img][data-loading]]/preview:opacity-100")
-};
-//#endregion
-export { preview };
-
-//# sourceMappingURL=preview.js.map

package/dist/default/skins/dist/default/minimal/tailwind/components/preview.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"preview.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/preview.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n//#region src/minimal/tailwind/components/preview.ts\nconst preview = {\n\troot: \"group/preview pointer-events-none\",\n\tthumbnailWrapper: \"relative rounded-lg bg-black/90\",\n\tthumbnail: cn(\"block rounded-[inherit] transition-opacity duration-150 ease-out\", \"data-loading:opacity-0\"),\n\ttime: \"mt-2 block text-center tabular-nums\",\n\tspinner: cn(\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0\", \"transition-opacity duration-150 ease-out\", \"group-has-[[role=img][data-loading]]/preview:opacity-100\")\n};\n//#endregion\nexport { preview };\n\n//# sourceMappingURL=preview.js.map"],"mappings":";;AAEA,MAAM,UAAU;CACf,MAAM;CACN,kBAAkB;CAClB,WAAW,GAAG,oEAAoE,yBAAyB;CAC3G,MAAM;CACN,SAAS,GAAG,yEAAyE,4CAA4C,2DAA2D;CAC5L"}

package/dist/default/ui/hotkey/use-aria-key-shortcuts.js

@@ -1,16 +0,0 @@
-"use client";
-import { useContainer } from "../../player/context.js";
-import { findHotkeyCoordinator } from "@videojs/core/dom";
-import { useMemo } from "react";
-//#region src/ui/hotkey/use-aria-key-shortcuts.ts
-function useAriaKeyShortcuts(action) {
-	const container = useContainer();
-	return useMemo(() => {
-		if (!container || !action) return void 0;
-		return findHotkeyCoordinator(container)?.getAriaKeys(action);
-	}, [container, action]);
-}
-//#endregion
-export { useAriaKeyShortcuts };
-
-//# sourceMappingURL=use-aria-key-shortcuts.js.map

package/dist/default/ui/hotkey/use-aria-key-shortcuts.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-aria-key-shortcuts.js","names":[],"sources":["../../../../src/ui/hotkey/use-aria-key-shortcuts.ts"],"sourcesContent":["'use client';\n\nimport { findHotkeyCoordinator } from '@videojs/core/dom';\nimport { useMemo } from 'react';\n\nimport { useContainer } from '../../player/context';\n\nexport function useAriaKeyShortcuts(action: string | undefined): string | undefined {\n  const container = useContainer();\n  return useMemo(() => {\n    if (!container || !action) return undefined;\n    return findHotkeyCoordinator(container)?.getAriaKeys(action);\n  }, [container, action]);\n}\n"],"mappings":";;;;;AAOA,SAAgB,oBAAoB,QAAgD;CAClF,MAAM,YAAY,cAAc;AAChC,QAAO,cAAc;AACnB,MAAI,CAAC,aAAa,CAAC,OAAQ,QAAO,KAAA;AAClC,SAAO,sBAAsB,UAAU,EAAE,YAAY,OAAO;IAC3D,CAAC,WAAW,OAAO,CAAC"}

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

@@ -1,15 +0,0 @@
-import * as _$react from "react";
-import { ReactNode, VideoHTMLAttributes } from "react";
-import { HlsMediaProps } from "@videojs/core/dom/media/hls";
-
-//#region src/media/hls-video/index.d.ts
-interface HlsVideoProps extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof HlsMediaProps>, Partial<HlsMediaProps> {
-  children?: ReactNode;
-}
-declare const HlsVideo: _$react.ForwardRefExoticComponent<HlsVideoProps & _$react.RefAttributes<HTMLVideoElement>>;
-declare namespace HlsVideo {
-  type Props = HlsVideoProps;
-}
-//#endregion
-export { HlsVideo, HlsVideoProps };
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/media/hls-video/index.tsx"],"mappings":";;;;;UAWiB,aAAA,SACP,IAAA,CAAK,mBAAA,CAAoB,gBAAA,SAAyB,aAAA,GACxD,OAAA,CAAQ,aAAA;EACV,QAAA,GAAW,SAAA;AAAA;AAAA,cAGA,QAAA,EAAQ,OAAA,CAAA,yBAAA,CAAA,aAAA,GAAA,OAAA,CAAA,aAAA,CAAA,gBAAA;AAAA,kBAaJ,QAAA;EAAA,KACH,KAAA,GAAQ,aAAA;AAAA"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/hls-video/index.tsx"],"sourcesContent":["'use client';\n\nimport type { HlsMediaProps } from '@videojs/core/dom/media/hls';\nimport { HlsMedia, hlsMediaDefaultProps } from '@videojs/core/dom/media/hls';\nimport type { ReactNode, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface HlsVideoProps\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof HlsMediaProps>,\n    Partial<HlsMediaProps> {\n  children?: ReactNode;\n}\n\nexport const HlsVideo = forwardRef<HTMLVideoElement, HlsVideoProps>(function HlsVideo({ children, ...props }, ref) {\n  const media = useMediaInstance(HlsMedia);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, hlsMediaDefaultProps);\n\n  return (\n    <video ref={composedRef} {...htmlProps}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace HlsVideo {\n  export type Props = HlsVideoProps;\n}\n"],"mappings":";;;;;;;;;AAiBA,MAAa,WAAW,WAA4C,SAAS,SAAS,EAAE,UAAU,GAAG,SAAS,KAAK;CACjH,MAAM,QAAQ,iBAAiB,SAAS;AAKxC,QACE,oBAAC,SAAD;EAAO,KAJW,gBADF,eAAe,MAAM,EACQ,IAAI;EAIxB,GAHT,aAAa,OAAO,OAAO,qBAAqB;EAI7D;EACK,CAAA;EAEV"}

package/dist/dev/skins/dist/default/default/tailwind/components/preview.js

@@ -1,12 +0,0 @@
-import { cn } from "@videojs/utils/style";
-//#region ../skins/dist/default/default/tailwind/components/preview.js
-const preview = {
-	root: cn("group/preview pointer-events-none bg-black/90 rounded-xl"),
-	thumbnail: cn("block relative overflow-clip rounded-[inherit]", "transition-opacity duration-150 ease-out", "after:absolute after:inset-0 after:rounded-[inherit]", "after:bg-linear-to-t after:from-black/80 after:via-black/30 after:to-black/0", "data-loading:opacity-0"),
-	time: "absolute bottom-2 inset-x-0 text-center tabular-nums",
-	spinner: cn("absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0", "transition-opacity duration-150 ease-out", "group-has-[[role=img][data-loading]]/preview:opacity-100")
-};
-//#endregion
-export { preview };
-
-//# sourceMappingURL=preview.js.map

package/dist/dev/skins/dist/default/default/tailwind/components/preview.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"preview.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/preview.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n//#region src/default/tailwind/components/preview.ts\nconst preview = {\n\troot: cn(\"group/preview pointer-events-none bg-black/90 rounded-xl\"),\n\tthumbnail: cn(\"block relative overflow-clip rounded-[inherit]\", \"transition-opacity duration-150 ease-out\", \"after:absolute after:inset-0 after:rounded-[inherit]\", \"after:bg-linear-to-t after:from-black/80 after:via-black/30 after:to-black/0\", \"data-loading:opacity-0\"),\n\ttime: \"absolute bottom-2 inset-x-0 text-center tabular-nums\",\n\tspinner: cn(\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0\", \"transition-opacity duration-150 ease-out\", \"group-has-[[role=img][data-loading]]/preview:opacity-100\")\n};\n//#endregion\nexport { preview };\n\n//# sourceMappingURL=preview.js.map"],"mappings":";;AAEA,MAAM,UAAU;CACf,MAAM,GAAG,2DAA2D;CACpE,WAAW,GAAG,kDAAkD,4CAA4C,wDAAwD,gFAAgF,yBAAyB;CAC7Q,MAAM;CACN,SAAS,GAAG,yEAAyE,4CAA4C,2DAA2D;CAC5L"}

package/dist/dev/skins/dist/default/minimal/tailwind/components/preview.js

@@ -1,13 +0,0 @@
-import { cn } from "@videojs/utils/style";
-//#region ../skins/dist/default/minimal/tailwind/components/preview.js
-const preview = {
-	root: "group/preview pointer-events-none",
-	thumbnailWrapper: "relative rounded-lg bg-black/90",
-	thumbnail: cn("block rounded-[inherit] transition-opacity duration-150 ease-out", "data-loading:opacity-0"),
-	time: "mt-2 block text-center tabular-nums",
-	spinner: cn("absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0", "transition-opacity duration-150 ease-out", "group-has-[[role=img][data-loading]]/preview:opacity-100")
-};
-//#endregion
-export { preview };
-
-//# sourceMappingURL=preview.js.map

package/dist/dev/skins/dist/default/minimal/tailwind/components/preview.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"preview.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/preview.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n//#region src/minimal/tailwind/components/preview.ts\nconst preview = {\n\troot: \"group/preview pointer-events-none\",\n\tthumbnailWrapper: \"relative rounded-lg bg-black/90\",\n\tthumbnail: cn(\"block rounded-[inherit] transition-opacity duration-150 ease-out\", \"data-loading:opacity-0\"),\n\ttime: \"mt-2 block text-center tabular-nums\",\n\tspinner: cn(\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0\", \"transition-opacity duration-150 ease-out\", \"group-has-[[role=img][data-loading]]/preview:opacity-100\")\n};\n//#endregion\nexport { preview };\n\n//# sourceMappingURL=preview.js.map"],"mappings":";;AAEA,MAAM,UAAU;CACf,MAAM;CACN,kBAAkB;CAClB,WAAW,GAAG,oEAAoE,yBAAyB;CAC3G,MAAM;CACN,SAAS,GAAG,yEAAyE,4CAA4C,2DAA2D;CAC5L"}

package/dist/dev/ui/hotkey/use-aria-key-shortcuts.d.ts

@@ -1,5 +0,0 @@
-//#region src/ui/hotkey/use-aria-key-shortcuts.d.ts
-declare function useAriaKeyShortcuts(action: string | undefined): string | undefined;
-//#endregion
-export { useAriaKeyShortcuts };
-//# sourceMappingURL=use-aria-key-shortcuts.d.ts.map

package/dist/dev/ui/hotkey/use-aria-key-shortcuts.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-aria-key-shortcuts.d.ts","names":[],"sources":["../../../../src/ui/hotkey/use-aria-key-shortcuts.ts"],"mappings":";iBAOgB,mBAAA,CAAoB,MAAA"}

package/dist/dev/ui/hotkey/use-aria-key-shortcuts.js

@@ -1,16 +0,0 @@
-"use client";
-import { useContainer } from "../../player/context.js";
-import { findHotkeyCoordinator } from "@videojs/core/dom";
-import { useMemo } from "react";
-//#region src/ui/hotkey/use-aria-key-shortcuts.ts
-function useAriaKeyShortcuts(action) {
-	const container = useContainer();
-	return useMemo(() => {
-		if (!container || !action) return void 0;
-		return findHotkeyCoordinator(container)?.getAriaKeys(action);
-	}, [container, action]);
-}
-//#endregion
-export { useAriaKeyShortcuts };
-
-//# sourceMappingURL=use-aria-key-shortcuts.js.map

package/dist/dev/ui/hotkey/use-aria-key-shortcuts.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-aria-key-shortcuts.js","names":[],"sources":["../../../../src/ui/hotkey/use-aria-key-shortcuts.ts"],"sourcesContent":["'use client';\n\nimport { findHotkeyCoordinator } from '@videojs/core/dom';\nimport { useMemo } from 'react';\n\nimport { useContainer } from '../../player/context';\n\nexport function useAriaKeyShortcuts(action: string | undefined): string | undefined {\n  const container = useContainer();\n  return useMemo(() => {\n    if (!container || !action) return undefined;\n    return findHotkeyCoordinator(container)?.getAriaKeys(action);\n  }, [container, action]);\n}\n"],"mappings":";;;;;AAOA,SAAgB,oBAAoB,QAAgD;CAClF,MAAM,YAAY,cAAc;AAChC,QAAO,cAAc;AACnB,MAAI,CAAC,aAAa,CAAC,OAAQ,QAAO,KAAA;AAClC,SAAO,sBAAsB,UAAU,EAAE,YAAY,OAAO;IAC3D,CAAC,WAAW,OAAO,CAAC"}