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

package/docs/reference/use-player-context.md

@@ -10,7 +10,7 @@ DebugPanel.tsx
 import { usePlayerContext } from "@videojs/react";
 
 function DebugPanel() {
-  const { store, media, container, popupGroup } = usePlayerContext();
+  const { store, media, container } = usePlayerContext();
 
   return (
     <pre>
@@ -19,7 +19,6 @@ function DebugPanel() {
           hasStore: !!store,
           hasMedia: !!media,
           hasContainer: !!container,
-          hasPopupGroup: !!popupGroup,
           tagName: media?.tagName,
         },
         null,
@@ -88,8 +87,4 @@ Details
 
 Type
 
-`Dispatch<SetStateAction<HTMLElement | null>>`
-
-`popupGroup`
-
-`PopupGroup`
+`Dispatch<SetStateAction<HTMLElement | null>>`

package/docs/reference/use-player.md

@@ -1,8 +1,14 @@
-# Player.usePlayer
+# usePlayer
 
-Hook to access the player store from within a Player.Provider
+Hook to access the player store from within a Player
 
-`Player.usePlayer` (from [`createPlayer`](./create-player.md)) gives you access to the player store from any component within a `Player.Provider`. It’s typed to the features you passed to `createPlayer`, and has two overloads — without arguments for direct store access, or with a selector for reactive state subscriptions.
+The `usePlayer` hook returned by [`createPlayer`](./create-player.md) gives you access to the player store from any component within its `Player`. It’s typed to the features you passed to `createPlayer`, and has two overloads — without arguments for direct store access, or with a selector for reactive state subscriptions.
+
+tsx
+
+```
+const { Player, usePlayer } = createPlayer({ features: videoFeatures });
+```
 
 `usePlayer` is also available as a standalone import (`import { usePlayer } from '@videojs/react'`), but the standalone version returns an untyped `UnknownStore`. Pass a premade selector to recover typing:
 
@@ -19,7 +25,7 @@ usePlayer(selectPlayback); // PlaybackState | undefined
 
 ### Store Access
 
-Call `Player.usePlayer()` without arguments to get the store instance. Use this for imperative actions like play, pause, and volume changes. The component does not re-render on state changes.
+Call `usePlayer()` without arguments to get the store instance. Use this for imperative actions like play, pause, and volume changes. The component does not re-render on state changes.
 
 PlayPause
 
@@ -28,15 +34,15 @@ App.tsx
 App.css
 
 ```
-import { createPlayer } from '@videojs/react';
+import { Container, createPlayer } from '@videojs/react';
 import { Video, videoFeatures } from '@videojs/react/video';
 
-const Player = createPlayer({
+const { Player, usePlayer } = createPlayer({
   features: videoFeatures,
 });
 
 function Controls() {
-  const store = Player.usePlayer();
+  const store = usePlayer();
 
   return (
     <div className="controls">
@@ -52,12 +58,12 @@ function Controls() {
 
 export default function StoreAccess() {
   return (
-    <Player.Provider>
-      <Player.Container className="media-container">
+    <Player>
+      <Container className="media-container">
         <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoPlay muted playsInline loop />
         <Controls />
-      </Player.Container>
-    </Player.Provider>
+      </Container>
+    </Player>
   );
 }
 ```
@@ -105,15 +111,15 @@ App.tsx
 App.css
 
 ```
-import { createPlayer } from '@videojs/react';
+import { Container, createPlayer } from '@videojs/react';
 import { Video, videoFeatures } from '@videojs/react/video';
 
-const Player = createPlayer({
+const { Player, usePlayer } = createPlayer({
   features: videoFeatures,
 });
 
 function StateDisplay() {
-  const state = Player.usePlayer((s) => ({
+  const state = usePlayer((s) => ({
     paused: s.paused,
     currentTime: s.currentTime,
     duration: s.duration,
@@ -137,12 +143,12 @@ function StateDisplay() {
 
 export default function Selector() {
   return (
-    <Player.Provider>
-      <Player.Container className="media-container">
+    <Player>
+      <Container className="media-container">
         <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoPlay muted playsInline loop />
         <StateDisplay />
-      </Player.Container>
-    </Player.Provider>
+      </Container>
+    </Player>
   );
 }
 ```
@@ -184,7 +190,7 @@ export default function Selector() {
 
 ### Without Selector
 
-Access the player store from within a Player Provider.
+Access the player store from within a Player.
 
 This standalone hook has no knowledge of your configured features, so it returns an untyped `UnknownStore` whose state properties are typed as `unknown`. For typed access, use the `usePlayer` returned by `createPlayer()`, or pass a premade selector to recover the type from its return value.
 

package/docs/reference/use-store.md

@@ -2,7 +2,7 @@
 
 Hook to access store state and actions with optional selector-based subscriptions
 
-`useStore` subscribes to a store instance directly. It has the same two overloads as [`usePlayer`](./use-player.md) — without a selector for store access, or with a selector for reactive state. Within a player provider, `usePlayer` is usually simpler since it reads the store from context. Reach for `useStore` when you have a store instance directly or need to derive computed values from the store.
+`useStore` subscribes to a store instance directly. It has the same two overloads as [`usePlayer`](./use-player.md) — without a selector for store access, or with a selector for reactive state. Within `Player`, `usePlayer` is usually simpler since it reads the store from context. Reach for `useStore` when you have a store instance directly or need to derive computed values from the store.
 
 ## Examples
 
@@ -17,15 +17,15 @@ App.tsx
 App.css
 
 ```
-import { createPlayer, useStore } from '@videojs/react';
+import { Container, createPlayer, useStore } from '@videojs/react';
 import { Video, videoFeatures } from '@videojs/react/video';
 
-const Player = createPlayer({
+const { Player, usePlayer } = createPlayer({
   features: videoFeatures,
 });
 
 function SeekControls() {
-  const store = Player.usePlayer();
+  const store = usePlayer();
   const s = useStore(store);
 
   return (
@@ -42,12 +42,12 @@ function SeekControls() {
 
 export default function StoreAccess() {
   return (
-    <Player.Provider>
-      <Player.Container className="media-container">
+    <Player>
+      <Container className="media-container">
         <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoPlay muted playsInline loop />
         <SeekControls />
-      </Player.Container>
-    </Player.Provider>
+      </Container>
+    </Player>
   );
 }
 ```
@@ -95,15 +95,15 @@ App.tsx
 App.css
 
 ```
-import { createPlayer, useStore } from '@videojs/react';
+import { Container, createPlayer, useStore } from '@videojs/react';
 import { Video, videoFeatures } from '@videojs/react/video';
 
-const Player = createPlayer({
+const { Player, usePlayer } = createPlayer({
   features: videoFeatures,
 });
 
 function DerivedState() {
-  const store = Player.usePlayer();
+  const store = usePlayer();
   const derived = useStore(store, (s) => ({
     remaining: s.duration - s.currentTime,
     progress: s.duration > 0 ? (s.currentTime / s.duration) * 100 : 0,
@@ -125,12 +125,12 @@ function DerivedState() {
 
 export default function Selector() {
   return (
-    <Player.Provider>
-      <Player.Container className="media-container">
+    <Player>
+      <Container className="media-container">
         <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoPlay muted playsInline loop />
         <DerivedState />
-      </Player.Container>
-    </Player.Provider>
+      </Container>
+    </Player>
   );
 }
 ```

package/docs/reference/volume-slider.md

@@ -12,7 +12,7 @@ tsx
 
 ## Behavior
 
-Controls the media volume level. The slider maps its 0–100 internal range to the media’s 0–1 volume scale. When the media is muted, the fill level drops to 0 regardless of the stored volume value.
+Controls the media volume level. The slider maps its 0–100 internal range to the media’s 0–1 volume scale. When the media is muted, the fill level drops to 0 regardless of the stored volume value. When volume control is unavailable, the HTML custom element receives native `hidden`, `data-hidden`, and disabled ARIA semantics; the React component returns `null`.
 
 ## Styling
 
@@ -45,24 +45,20 @@ Scroll wheel support:
 
 Nest sub-components for full control over the slider’s DOM structure. This example includes a track, fill bar, draggable thumb, and a tooltip that shows the volume percentage on hover.
 
-Mute
-
-0%
-
 App.tsx
 
 App.css
 
 ```
-import { createPlayer, MuteButton, VolumeSlider } from '@videojs/react';
+import { Container, createPlayer, MuteButton, VolumeSlider } from '@videojs/react';
 import { Video, videoFeatures } from '@videojs/react/video';
 
-const Player = createPlayer({ features: videoFeatures });
+const { Player } = createPlayer({ features: videoFeatures });
 
 export default function WithParts() {
   return (
-    <Player.Provider>
-      <Player.Container className="media-container">
+    <Player>
+      <Container className="media-container">
         <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoPlay muted playsInline loop />
         <MuteButton
           className="media-mute-button"
@@ -75,8 +71,8 @@ export default function WithParts() {
           <VolumeSlider.Thumb className="media-slider-thumb" />
           <VolumeSlider.Value type="pointer" className="media-slider-value" />
         </VolumeSlider.Root>
-      </Player.Container>
-    </Player.Provider>
+      </Container>
+    </Player>
   );
 }
 ```
@@ -323,6 +319,10 @@ Type
 
 `'available' | 'unavailable' | 'unsupported'`
 
+`hidden`
+
+`boolean`
+
 `value`
 
 `number`
@@ -451,6 +451,8 @@ Type
 
 `'available' | 'unavailable' | 'unsupported'`
 
+`data-hidden`
+
 #### CSS custom properties
 
 Variable

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@videojs/react",
   "type": "module",
-  "version": "10.0.0-beta.26",
+  "version": "10.0.0-beta.27",
   "description": "React library for building media players",
   "license": "Apache-2.0",
   "repository": {
@@ -36,6 +36,26 @@
       "development": "./dist/dev/icons/*/index.js",
       "default": "./dist/default/icons/*/index.js"
     },
+    "./media/mux-video/hls-js": {
+      "types": "./dist/dev/media/mux-video/hls-js.d.ts",
+      "development": "./dist/dev/media/mux-video/hls-js.js",
+      "default": "./dist/default/media/mux-video/hls-js.js"
+    },
+    "./media/mux-video/spf": {
+      "types": "./dist/dev/media/mux-video/spf.d.ts",
+      "development": "./dist/dev/media/mux-video/spf.js",
+      "default": "./dist/default/media/mux-video/spf.js"
+    },
+    "./media/mux-audio/hls-js": {
+      "types": "./dist/dev/media/mux-audio/hls-js.d.ts",
+      "development": "./dist/dev/media/mux-audio/hls-js.js",
+      "default": "./dist/default/media/mux-audio/hls-js.js"
+    },
+    "./media/mux-audio/spf": {
+      "types": "./dist/dev/media/mux-audio/spf.d.ts",
+      "development": "./dist/dev/media/mux-audio/spf.js",
+      "default": "./dist/default/media/mux-audio/spf.js"
+    },
     "./media/*": {
       "types": "./dist/dev/media/*/index.d.ts",
       "development": "./dist/dev/media/*/index.js",
@@ -112,11 +132,11 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@videojs/core": "10.0.0-beta.26",
-    "@videojs/media": "10.0.0-beta.26",
-    "@videojs/spf": "10.0.0-beta.26",
-    "@videojs/store": "10.0.0-beta.26",
-    "@videojs/utils": "10.0.0-beta.26"
+    "@videojs/core": "10.0.0-beta.27",
+    "@videojs/media": "10.0.0-beta.27",
+    "@videojs/utils": "10.0.0-beta.27",
+    "@videojs/store": "10.0.0-beta.27",
+    "@videojs/spf": "10.0.0-beta.27"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",
@@ -126,8 +146,8 @@
     "react-dom": "^19.2.8",
     "tsdown": "^0.22.14",
     "vitest": "^4.1.10",
-    "@videojs/icons": "10.0.0-beta.26",
-    "@videojs/skins": "10.0.0-beta.26"
+    "@videojs/icons": "10.0.0-beta.27",
+    "@videojs/skins": "10.0.0-beta.27"
   },
   "publishConfig": {
     "access": "public"

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

@@ -1 +0,0 @@
-{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/mux-audio/media.tsx"],"sourcesContent":["'use client';\n\nimport type { HlsMediaProps } from '@videojs/media/dom/hls-js';\nimport { hlsMediaDefaultProps } from '@videojs/media/dom/hls-js';\nimport type { MuxMediaProps } from '@videojs/media/dom/mux';\nimport { MuxMedia, muxMediaDefaultProps } from '@videojs/media/dom/mux';\nimport type { AudioHTMLAttributes, ReactNode } 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 MuxAudioProps\n  extends Omit<AudioHTMLAttributes<HTMLAudioElement>, keyof HlsMediaProps | keyof MuxMediaProps>,\n    Partial<HlsMediaProps>,\n    Partial<MuxMediaProps> {\n  children?: ReactNode;\n}\n\nconst muxAudioDefaultProps: HlsMediaProps & MuxMediaProps = { ...hlsMediaDefaultProps, ...muxMediaDefaultProps };\n\nexport const MuxAudio = forwardRef<HTMLAudioElement, MuxAudioProps>(function MuxAudio({ children, ...props }, ref) {\n  const media = useMediaInstance(MuxMedia);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, muxAudioDefaultProps);\n\n  return (\n    <audio ref={composedRef} {...htmlProps}>\n      {children}\n    </audio>\n  );\n});\n\nexport namespace MuxAudio {\n  export type Props = MuxAudioProps;\n}\n"],"mappings":";;;;;;;;;;AAoBA,MAAM,uBAAsD;CAAE,GAAG;CAAsB,GAAG;AAAqB;AAE/G,MAAa,WAAW,WAA4C,SAAS,SAAS,EAAE,UAAU,GAAG,SAAS,KAAK;CACjH,MAAM,QAAQ,iBAAiB,QAAQ;CAKvC,OACE,oBAAC,SAAD;EAAO,KAJW,gBADF,eAAe,KACW,GAAG,GAIvB;EAAG,GAHT,aAAa,OAAO,OAAO,oBAGN;EAClC;CACI,CAAA;AAEX,CAAC"}

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

@@ -1,56 +0,0 @@
-"use client";
-import { useComposedRefs } from "../../utils/use-composed-refs.js";
-import { useAttachMedia } from "../../utils/use-attach-media.js";
-import { useMediaInstance } from "../../utils/use-media-instance.js";
-import { useSyncProps } from "../../utils/use-sync-props.js";
-import { forwardRef, useCallback, useSyncExternalStore } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { StreamTypes, hlsMediaDefaultProps } from "@videojs/media/dom/hls-js";
-import { MuxMedia, muxMediaDefaultProps } from "@videojs/media/dom/mux";
-//#region src/media/mux-video/media.tsx
-const muxVideoDefaultProps = {
-	...hlsMediaDefaultProps,
-	...muxMediaDefaultProps
-};
-const MuxVideo = forwardRef(function MuxVideo({ children, ...props }, ref) {
-	const media = useMediaInstance(MuxMedia);
-	return /* @__PURE__ */ jsxs("video", {
-		ref: useComposedRefs(useAttachMedia(media), ref),
-		...useSyncProps(media, props, muxVideoDefaultProps),
-		children: [/* @__PURE__ */ jsx(MuxStoryboard, { media }), children]
-	});
-});
-function MuxStoryboard({ media }) {
-	const subscribe = useCallback((onChange) => {
-		let cancelled = false;
-		let scheduled = false;
-		const notify = () => {
-			if (scheduled) return;
-			scheduled = true;
-			queueMicrotask(() => {
-				scheduled = false;
-				if (!cancelled) onChange();
-			});
-		};
-		media.addEventListener("streamtypechange", notify);
-		media.addEventListener("sourcechange", notify);
-		return () => {
-			cancelled = true;
-			media.removeEventListener("streamtypechange", notify);
-			media.removeEventListener("sourcechange", notify);
-		};
-	}, [media]);
-	const getSnapshot = () => media.streamType === StreamTypes.LIVE ? "" : media.storyboard;
-	const src = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-	if (!src) return null;
-	return /* @__PURE__ */ jsx("track", {
-		kind: "metadata",
-		label: "thumbnails",
-		src,
-		default: true
-	});
-}
-//#endregion
-export { MuxVideo };
-
-//# sourceMappingURL=media.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/mux-video/media.tsx"],"sourcesContent":["'use client';\n\nimport type { HlsMediaProps } from '@videojs/media/dom/hls-js';\nimport { hlsMediaDefaultProps, StreamTypes } from '@videojs/media/dom/hls-js';\nimport type { MuxMediaProps } from '@videojs/media/dom/mux';\nimport { MuxMedia, muxMediaDefaultProps } from '@videojs/media/dom/mux';\nimport type { ReactNode, VideoHTMLAttributes } from 'react';\nimport { forwardRef, useCallback, useSyncExternalStore } 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 MuxVideoProps\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof HlsMediaProps | keyof MuxMediaProps>,\n    Partial<HlsMediaProps>,\n    Partial<MuxMediaProps> {\n  children?: ReactNode;\n}\n\nconst muxVideoDefaultProps: HlsMediaProps & MuxMediaProps = { ...hlsMediaDefaultProps, ...muxMediaDefaultProps };\n\nexport const MuxVideo = forwardRef<HTMLVideoElement, MuxVideoProps>(function MuxVideo({ children, ...props }, ref) {\n  const media = useMediaInstance(MuxMedia);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, muxVideoDefaultProps);\n\n  return (\n    <video ref={composedRef} {...htmlProps}>\n      <MuxStoryboard media={media} />\n      {children}\n    </video>\n  );\n});\n\nexport namespace MuxVideo {\n  export type Props = MuxVideoProps;\n}\n\n// Renders the storyboard track in its own component so media changes don't re-render the whole media component.\nfunction MuxStoryboard({ media }: { media: MuxMedia }) {\n  const subscribe = useCallback(\n    (onChange: () => void) => {\n      // `useSyncProps` writes `src` / `source` during render and those setters\n      // dispatch `sourcechange` synchronously. Defer (and coalesce) notifications\n      // so we never schedule an update while another component is rendering.\n      let cancelled = false;\n      let scheduled = false;\n      const notify = () => {\n        if (scheduled) return;\n        scheduled = true;\n        queueMicrotask(() => {\n          scheduled = false;\n          if (!cancelled) onChange();\n        });\n      };\n      media.addEventListener('streamtypechange', notify);\n      media.addEventListener('sourcechange', notify);\n      return () => {\n        cancelled = true;\n        media.removeEventListener('streamtypechange', notify);\n        media.removeEventListener('sourcechange', notify);\n      };\n    },\n    [media]\n  );\n\n  // The stream type is detected at runtime and live streams have no storyboard.\n  const getSnapshot = () => (media.streamType === StreamTypes.LIVE ? '' : media.storyboard);\n  const src = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n\n  if (!src) return null;\n  return <track kind=\"metadata\" label=\"thumbnails\" src={src} default />;\n}\n"],"mappings":";;;;;;;;;;AAoBA,MAAM,uBAAsD;CAAE,GAAG;CAAsB,GAAG;AAAqB;AAE/G,MAAa,WAAW,WAA4C,SAAS,SAAS,EAAE,UAAU,GAAG,SAAS,KAAK;CACjH,MAAM,QAAQ,iBAAiB,QAAQ;CAKvC,OACE,qBAAC,SAAD;EAAO,KAJW,gBADF,eAAe,KACW,GAAG,GAIvB;EAAG,GAHT,aAAa,OAAO,OAAO,oBAGN;EAArC,UAAA,CACE,oBAAC,eAAD,EAAsB,MAAQ,CAAA,GAC7B,QACI;;AAEX,CAAC;AAOD,SAAS,cAAc,EAAE,SAA8B;CACrD,MAAM,YAAY,aACf,aAAyB;EAIxB,IAAI,YAAY;EAChB,IAAI,YAAY;EAChB,MAAM,eAAe;GACnB,IAAI,WAAW;GACf,YAAY;GACZ,qBAAqB;IACnB,YAAY;IACZ,IAAI,CAAC,WAAW,SAAS;GAC3B,CAAC;EACH;EACA,MAAM,iBAAiB,oBAAoB,MAAM;EACjD,MAAM,iBAAiB,gBAAgB,MAAM;EAC7C,aAAa;GACX,YAAY;GACZ,MAAM,oBAAoB,oBAAoB,MAAM;GACpD,MAAM,oBAAoB,gBAAgB,MAAM;EAClD;CACF,GACA,CAAC,KAAK,CACR;CAGA,MAAM,oBAAqB,MAAM,eAAe,YAAY,OAAO,KAAK,MAAM;CAC9E,MAAM,MAAM,qBAAqB,WAAW,aAAa,WAAW;CAEpE,IAAI,CAAC,KAAK,OAAO;CACjB,OAAO,oBAAC,SAAD;EAAO,MAAK;EAAW,OAAM;EAAkB;EAAK,SAAA;CAAS,CAAA;AACtE"}

package/dist/default/media/simple-hls-audio-only/index.js

@@ -1,2 +0,0 @@
-import { SimpleHlsAudioOnly } from "./media.js";
-export { SimpleHlsAudioOnly };

package/dist/default/media/simple-hls-audio-only/media.js

@@ -1,22 +0,0 @@
-"use client";
-import { useComposedRefs } from "../../utils/use-composed-refs.js";
-import { useAttachMedia } from "../../utils/use-attach-media.js";
-import { useMediaInstance } from "../../utils/use-media-instance.js";
-import { useSyncProps } from "../../utils/use-sync-props.js";
-import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
-import { SimpleHlsAudioOnlyMedia } from "@videojs/media/dom/simple-hls-audio-only";
-import { simpleHlsAudioOnlyMediaDefaultProps } from "@videojs/spf/hls";
-//#region src/media/simple-hls-audio-only/media.tsx
-const SimpleHlsAudioOnly = forwardRef(function SimpleHlsAudioOnly({ children, ...props }, ref) {
-	const media = useMediaInstance(SimpleHlsAudioOnlyMedia);
-	return /* @__PURE__ */ jsx("audio", {
-		ref: useComposedRefs(useAttachMedia(media), ref),
-		...useSyncProps(media, props, simpleHlsAudioOnlyMediaDefaultProps),
-		children
-	});
-});
-//#endregion
-export { SimpleHlsAudioOnly };
-
-//# sourceMappingURL=media.js.map

package/dist/default/media/simple-hls-audio-only/media.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/simple-hls-audio-only/media.tsx"],"sourcesContent":["'use client';\n\nimport { SimpleHlsAudioOnlyMedia } from '@videojs/media/dom/simple-hls-audio-only';\nimport type { SimpleHlsAudioOnlyMediaProps } from '@videojs/spf/hls';\nimport { simpleHlsAudioOnlyMediaDefaultProps } from '@videojs/spf/hls';\nimport type { AudioHTMLAttributes, ReactNode } 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 SimpleHlsAudioOnlyProps\n  extends Omit<AudioHTMLAttributes<HTMLAudioElement>, keyof SimpleHlsAudioOnlyMediaProps>,\n    Partial<SimpleHlsAudioOnlyMediaProps> {\n  children?: ReactNode;\n}\n\nexport const SimpleHlsAudioOnly = forwardRef<HTMLAudioElement, SimpleHlsAudioOnlyProps>(function SimpleHlsAudioOnly(\n  { children, ...props },\n  ref\n) {\n  const media = useMediaInstance(SimpleHlsAudioOnlyMedia);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, simpleHlsAudioOnlyMediaDefaultProps);\n\n  return (\n    <audio ref={composedRef} {...htmlProps}>\n      {children}\n    </audio>\n  );\n});\n\nexport namespace SimpleHlsAudioOnly {\n  export type Props = SimpleHlsAudioOnlyProps;\n}\n"],"mappings":";;;;;;;;;;AAkBA,MAAa,qBAAqB,WAAsD,SAAS,mBAC/F,EAAE,UAAU,GAAG,SACf,KACA;CACA,MAAM,QAAQ,iBAAiB,uBAAuB;CAKtD,OACE,oBAAC,SAAD;EAAO,KAJW,gBADF,eAAe,KACW,GAAG,GAIvB;EAAG,GAHT,aAAa,OAAO,OAAO,mCAGN;EAClC;CACI,CAAA;AAEX,CAAC"}

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

@@ -1,2 +0,0 @@
-import { SimpleHlsVideo } from "./media.js";
-export { SimpleHlsVideo };

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

@@ -1 +0,0 @@
-{"version":3,"file":"media.js","names":[],"sources":["../../../../src/media/simple-hls-video/media.tsx"],"sourcesContent":["'use client';\n\nimport { SimpleHlsMedia } from '@videojs/media/dom/simple-hls';\nimport type { SimpleHlsMediaProps } from '@videojs/spf/hls';\nimport { simpleHlsMediaDefaultProps } from '@videojs/spf/hls';\nimport type { ReactNode, VideoHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport { useAttachMedia } from '../../utils/use-attach-media';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useMediaInstance } from '../../utils/use-media-instance';\nimport { useSyncProps } from '../../utils/use-sync-props';\n\nexport interface SimpleHlsVideoProps\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof SimpleHlsMediaProps>,\n    Partial<SimpleHlsMediaProps> {\n  children?: ReactNode;\n}\n\nexport const SimpleHlsVideo = forwardRef<HTMLVideoElement, SimpleHlsVideoProps>(function SimpleHlsVideo(\n  { children, ...props },\n  ref\n) {\n  const media = useMediaInstance(SimpleHlsMedia);\n  const attachRef = useAttachMedia(media);\n  const composedRef = useComposedRefs(attachRef, ref);\n  const htmlProps = useSyncProps(media, props, simpleHlsMediaDefaultProps);\n\n  return (\n    <video ref={composedRef} {...htmlProps}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace SimpleHlsVideo {\n  export type Props = SimpleHlsVideoProps;\n}\n"],"mappings":";;;;;;;;;;AAkBA,MAAa,iBAAiB,WAAkD,SAAS,eACvF,EAAE,UAAU,GAAG,SACf,KACA;CACA,MAAM,QAAQ,iBAAiB,cAAc;CAK7C,OACE,oBAAC,SAAD;EAAO,KAJW,gBADF,eAAe,KACW,GAAG,GAIvB;EAAG,GAHT,aAAa,OAAO,OAAO,0BAGN;EAClC;CACI,CAAA;AAEX,CAAC"}

package/dist/default/skins/dist/default/default/tailwind/components/input-feedback.js

@@ -1,40 +0,0 @@
-import { cn } from "@videojs/utils/style";
-//#region ../skins/dist/default/default/tailwind/components/input-feedback.js
-/**
-* NOTE: tailwind.css is required to support the `@property --media-progress-fill` registration and animation keyframes. You should import from either:
-- "@videojs/html/tailwind.css" for HTML skins
-- "@videojs/react/tailwind.css" for React skins
-*/
-const inputFeedback = {
-	root: cn("absolute inset-0 pointer-events-none", "grid grid-cols-3 items-center justify-items-center", "[color:var(--media-color-primary,oklch(1_0_0))]"),
-	island: {
-		base: cn("group/input-indicator", "[--media-surface-background-color:oklch(0_0_0/0.25)]", "absolute top-3 rounded-full origin-top pointer-events-none", "text-inherit font-medium", "duration-100 ease-out", "data-starting-style:opacity-0", "data-ending-style:opacity-0", "data-starting-style:duration-250", "data-starting-style:ease-in", "data-ending-style:duration-250", "data-ending-style:ease-in", "pointer-coarse:will-change-[scale,translate,opacity]", "pointer-coarse:transition-[scale,translate,opacity]", "pointer-fine:motion-safe:will-change-[scale,translate,filter,opacity]", "pointer-fine:motion-safe:transition-[scale,translate,filter,opacity]", "pointer-fine:motion-safe:data-starting-style:blur-sm", "pointer-fine:motion-safe:data-starting-style:scale-90", "pointer-fine:motion-safe:data-ending-style:blur-sm", "pointer-fine:motion-safe:data-ending-style:scale-90", "motion-safe:data-ending-style:-translate-y-1/4", "[@media(prefers-reduced-transparency:reduce)]:[--media-surface-background-color:oklch(0_0_0)]", "contrast-more:[--media-surface-background-color:oklch(0_0_0)]"),
-		content: cn("flex justify-between items-center gap-2 px-2.5 py-1 w-full", "**:mix-blend-difference"),
-		volume: cn("w-[min(80%,--spacing(48))]", "*:[--media-progress-fill:var(--media-volume-fill)]", "*:rounded-[inherit]", "*:[background-image:linear-gradient(to_right,currentColor_0%,currentColor_var(--media-progress-fill),transparent_var(--media-progress-fill),transparent_100%)]", "*:[transition:--media-progress-fill_200ms_linear]"),
-		shownVolume: cn("data-open:duration-100", "data-min:animate-media-shake", "data-max:animate-media-shake", "motion-reduce:data-min:animate-none", "motion-reduce:data-max:animate-none"),
-		shownStatus: cn("data-open:duration-100"),
-		icon: cn("hidden shrink-0"),
-		shownVolumeHigh: "group-data-[level=high]/input-indicator:block",
-		shownVolumeLow: "group-data-[level=low]/input-indicator:block",
-		shownVolumeOff: "group-data-[level=off]/input-indicator:block",
-		shownCaptionsOn: "group-data-[status=captions-on]/input-indicator:block",
-		shownCaptionsOff: "group-data-[status=captions-off]/input-indicator:block",
-		shownFullscreenEnter: "group-data-[status=fullscreen]/input-indicator:block",
-		shownFullscreenExit: "group-data-[status=exit-fullscreen]/input-indicator:block",
-		shownPipEnter: "group-data-[status=pip]/input-indicator:block",
-		shownPipExit: "group-data-[status=exit-pip]/input-indicator:block",
-		value: "ml-auto"
-	},
-	bubble: {
-		base: cn("group/input-indicator", "col-start-2 row-start-1", "grid place-content-center text-center p-4", "data-direction:gap-1", "@2xl/media-root:data-direction:p-6", "not-data-direction:bg-black/35 not-data-direction:rounded-full not-data-direction:backdrop-blur-sm", "not-data-direction:[transition-property:opacity,scale]", "not-data-direction:duration-200 not-data-direction:ease-out", "motion-reduce:not-data-direction:transition-opacity", "motion-reduce:not-data-direction:duration-50", "not-data-direction:data-starting-style:opacity-0", "not-data-direction:data-ending-style:opacity-0", "not-data-direction:data-starting-style:scale-[0.85]", "not-data-direction:data-ending-style:scale-[0.85]", "not-data-direction:data-ending-style:duration-100", "not-data-direction:data-ending-style:ease-in", "data-[direction=backward]:col-start-1 data-[direction=backward]:justify-self-start", "data-[direction=forward]:col-start-3 data-[direction=forward]:justify-self-end"),
-		icon: "hidden size-[calc(var(--media-icon-size)*1.5)]",
-		shownSeek: cn("group-data-direction/input-indicator:block", "group-data-[direction=backward]/input-indicator:[scale:-1_1]", "motion-safe:transition-[translate,opacity] motion-safe:duration-200 motion-safe:ease-in-out", "motion-safe:group-data-starting-style/input-indicator:opacity-0", "motion-safe:group-data-ending-style/input-indicator:opacity-0", "motion-safe:group-data-[direction=forward]/input-indicator:group-data-starting-style/input-indicator:[translate:-60%_0]", "motion-safe:group-data-[direction=backward]/input-indicator:group-data-starting-style/input-indicator:[translate:60%_0]"),
-		shownPause: "group-data-[status=pause]/input-indicator:block",
-		shownPlay: cn("group-data-[status=play]/input-indicator:block", "group-data-[status=play]/input-indicator:translate-x-px"),
-		time: "tabular-nums"
-	}
-};
-//#endregion
-export { inputFeedback };
-
-//# sourceMappingURL=input-feedback.js.map

package/dist/default/skins/dist/default/default/tailwind/components/input-feedback.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"input-feedback.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/input-feedback.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n//#region src/default/tailwind/components/input-feedback.ts\n/**\n* NOTE: tailwind.css is required to support the `@property --media-progress-fill` registration and animation keyframes. You should import from either:\n- \"@videojs/html/tailwind.css\" for HTML skins\n- \"@videojs/react/tailwind.css\" for React skins\n*/\nconst inputFeedback = {\n\troot: cn(\"absolute inset-0 pointer-events-none\", \"grid grid-cols-3 items-center justify-items-center\", \"[color:var(--media-color-primary,oklch(1_0_0))]\"),\n\tisland: {\n\t\tbase: cn(\"group/input-indicator\", \"[--media-surface-background-color:oklch(0_0_0/0.25)]\", \"absolute top-3 rounded-full origin-top pointer-events-none\", \"text-inherit font-medium\", \"duration-100 ease-out\", \"data-starting-style:opacity-0\", \"data-ending-style:opacity-0\", \"data-starting-style:duration-250\", \"data-starting-style:ease-in\", \"data-ending-style:duration-250\", \"data-ending-style:ease-in\", \"pointer-coarse:will-change-[scale,translate,opacity]\", \"pointer-coarse:transition-[scale,translate,opacity]\", \"pointer-fine:motion-safe:will-change-[scale,translate,filter,opacity]\", \"pointer-fine:motion-safe:transition-[scale,translate,filter,opacity]\", \"pointer-fine:motion-safe:data-starting-style:blur-sm\", \"pointer-fine:motion-safe:data-starting-style:scale-90\", \"pointer-fine:motion-safe:data-ending-style:blur-sm\", \"pointer-fine:motion-safe:data-ending-style:scale-90\", \"motion-safe:data-ending-style:-translate-y-1/4\", \"[@media(prefers-reduced-transparency:reduce)]:[--media-surface-background-color:oklch(0_0_0)]\", \"contrast-more:[--media-surface-background-color:oklch(0_0_0)]\"),\n\t\tcontent: cn(\"flex justify-between items-center gap-2 px-2.5 py-1 w-full\", \"**:mix-blend-difference\"),\n\t\tvolume: cn(\"w-[min(80%,--spacing(48))]\", \"*:[--media-progress-fill:var(--media-volume-fill)]\", \"*:rounded-[inherit]\", \"*:[background-image:linear-gradient(to_right,currentColor_0%,currentColor_var(--media-progress-fill),transparent_var(--media-progress-fill),transparent_100%)]\", \"*:[transition:--media-progress-fill_200ms_linear]\"),\n\t\tshownVolume: cn(\"data-open:duration-100\", \"data-min:animate-media-shake\", \"data-max:animate-media-shake\", \"motion-reduce:data-min:animate-none\", \"motion-reduce:data-max:animate-none\"),\n\t\tshownStatus: cn(\"data-open:duration-100\"),\n\t\ticon: cn(\"hidden shrink-0\"),\n\t\tshownVolumeHigh: \"group-data-[level=high]/input-indicator:block\",\n\t\tshownVolumeLow: \"group-data-[level=low]/input-indicator:block\",\n\t\tshownVolumeOff: \"group-data-[level=off]/input-indicator:block\",\n\t\tshownCaptionsOn: \"group-data-[status=captions-on]/input-indicator:block\",\n\t\tshownCaptionsOff: \"group-data-[status=captions-off]/input-indicator:block\",\n\t\tshownFullscreenEnter: \"group-data-[status=fullscreen]/input-indicator:block\",\n\t\tshownFullscreenExit: \"group-data-[status=exit-fullscreen]/input-indicator:block\",\n\t\tshownPipEnter: \"group-data-[status=pip]/input-indicator:block\",\n\t\tshownPipExit: \"group-data-[status=exit-pip]/input-indicator:block\",\n\t\tvalue: \"ml-auto\"\n\t},\n\tbubble: {\n\t\tbase: cn(\"group/input-indicator\", \"col-start-2 row-start-1\", \"grid place-content-center text-center p-4\", \"data-direction:gap-1\", \"@2xl/media-root:data-direction:p-6\", \"not-data-direction:bg-black/35 not-data-direction:rounded-full not-data-direction:backdrop-blur-sm\", \"not-data-direction:[transition-property:opacity,scale]\", \"not-data-direction:duration-200 not-data-direction:ease-out\", \"motion-reduce:not-data-direction:transition-opacity\", \"motion-reduce:not-data-direction:duration-50\", \"not-data-direction:data-starting-style:opacity-0\", \"not-data-direction:data-ending-style:opacity-0\", \"not-data-direction:data-starting-style:scale-[0.85]\", \"not-data-direction:data-ending-style:scale-[0.85]\", \"not-data-direction:data-ending-style:duration-100\", \"not-data-direction:data-ending-style:ease-in\", \"data-[direction=backward]:col-start-1 data-[direction=backward]:justify-self-start\", \"data-[direction=forward]:col-start-3 data-[direction=forward]:justify-self-end\"),\n\t\ticon: \"hidden size-[calc(var(--media-icon-size)*1.5)]\",\n\t\tshownSeek: cn(\"group-data-direction/input-indicator:block\", \"group-data-[direction=backward]/input-indicator:[scale:-1_1]\", \"motion-safe:transition-[translate,opacity] motion-safe:duration-200 motion-safe:ease-in-out\", \"motion-safe:group-data-starting-style/input-indicator:opacity-0\", \"motion-safe:group-data-ending-style/input-indicator:opacity-0\", \"motion-safe:group-data-[direction=forward]/input-indicator:group-data-starting-style/input-indicator:[translate:-60%_0]\", \"motion-safe:group-data-[direction=backward]/input-indicator:group-data-starting-style/input-indicator:[translate:60%_0]\"),\n\t\tshownPause: \"group-data-[status=pause]/input-indicator:block\",\n\t\tshownPlay: cn(\"group-data-[status=play]/input-indicator:block\", \"group-data-[status=play]/input-indicator:translate-x-px\"),\n\t\ttime: \"tabular-nums\"\n\t}\n};\n//#endregion\nexport { inputFeedback };\n\n//# sourceMappingURL=input-feedback.js.map"],"mappings":";;;;;;;AAOA,MAAM,gBAAgB;CACrB,MAAM,GAAG,wCAAwC,sDAAsD,iDAAiD;CACxJ,QAAQ;EACP,MAAM,GAAG,yBAAyB,wDAAwD,8DAA8D,4BAA4B,yBAAyB,iCAAiC,+BAA+B,oCAAoC,+BAA+B,kCAAkC,6BAA6B,wDAAwD,uDAAuD,yEAAyE,wEAAwE,wDAAwD,yDAAyD,sDAAsD,uDAAuD,kDAAkD,iGAAiG,+DAA+D;EAC/jC,SAAS,GAAG,8DAA8D,yBAAyB;EACnG,QAAQ,GAAG,8BAA8B,sDAAsD,uBAAuB,kKAAkK,mDAAmD;EAC3U,aAAa,GAAG,0BAA0B,gCAAgC,gCAAgC,uCAAuC,qCAAqC;EACtL,aAAa,GAAG,wBAAwB;EACxC,MAAM,GAAG,iBAAiB;EAC1B,iBAAiB;EACjB,gBAAgB;EAChB,gBAAgB;EAChB,iBAAiB;EACjB,kBAAkB;EAClB,sBAAsB;EACtB,qBAAqB;EACrB,eAAe;EACf,cAAc;EACd,OAAO;CACR;CACA,QAAQ;EACP,MAAM,GAAG,yBAAyB,2BAA2B,6CAA6C,wBAAwB,sCAAsC,sGAAsG,0DAA0D,+DAA+D,uDAAuD,gDAAgD,oDAAoD,kDAAkD,uDAAuD,qDAAqD,qDAAqD,gDAAgD,sFAAsF,gFAAgF;EAC38B,MAAM;EACN,WAAW,GAAG,8CAA8C,gEAAgE,+FAA+F,mEAAmE,iEAAiE,2HAA2H,yHAAyH;EACnlB,YAAY;EACZ,WAAW,GAAG,kDAAkD,yDAAyD;EACzH,MAAM;CACP;AACD"}

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

@@ -1,8 +0,0 @@
-import { reset } from "./reset.js";
-import { cn } from "@videojs/utils/style";
-//#region ../skins/dist/default/default/tailwind/components/root.js
-const root = cn(reset, "block relative isolate h-full w-full @container/media-root", "rounded-(--media-border-radius,1.75rem)", "font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-(length:--font-size-base) leading-normal subpixel-antialiased", "outline-2 outline-transparent -outline-offset-4", "transition-[outline-offset,outline-color] duration-100 ease-out", "focus-visible:outline-current focus-visible:outline-offset-2", "scrollbar-thin scrollbar-thumb-current/30", "[@media_(prefers-reduced-transparency:reduce)_or_(prefers-contrast:more)]:scrollbar-auto", "[@media_(prefers-reduced-transparency:reduce)_or_(prefers-contrast:more)]:scrollbar-thumb-current/80", "[--media-current-shadow-color:oklch(from_currentColor_0_0_0/clamp(0,calc((l-0.5)*0.5),0.15))]", "[--media-current-shadow-color-subtle:oklch(from_var(--media-current-shadow-color)_l_c_h/calc(alpha*0.4))]", "[--scale:1]", "[--font-size-base:calc(0.8125rem*var(--scale))]", "[--font-size-small:calc(0.6875rem*var(--scale))]", "[--font-size-medium:calc(0.9375rem*var(--scale))]", "[--font-size-tiny:calc(0.5625rem*var(--scale))]", "[--media-icon-size:calc(--spacing(4.5)*var(--scale))]", "[--spacing-proxy:var(--spacing)]", "[&>*]:[--spacing:calc(var(--spacing-proxy)*var(--scale))]");
-//#endregion
-export { root };
-
-//# sourceMappingURL=root.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"root.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/root.js"],"sourcesContent":["import { reset } from \"./reset.js\";\nimport { cn } from \"@videojs/utils/style\";\n//#region src/default/tailwind/components/root.ts\nconst root = cn(reset, \"block relative isolate h-full w-full @container/media-root\", \"rounded-(--media-border-radius,1.75rem)\", \"font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-(length:--font-size-base) leading-normal subpixel-antialiased\", \"outline-2 outline-transparent -outline-offset-4\", \"transition-[outline-offset,outline-color] duration-100 ease-out\", \"focus-visible:outline-current focus-visible:outline-offset-2\", \"scrollbar-thin scrollbar-thumb-current/30\", \"[@media_(prefers-reduced-transparency:reduce)_or_(prefers-contrast:more)]:scrollbar-auto\", \"[@media_(prefers-reduced-transparency:reduce)_or_(prefers-contrast:more)]:scrollbar-thumb-current/80\", \"[--media-current-shadow-color:oklch(from_currentColor_0_0_0/clamp(0,calc((l-0.5)*0.5),0.15))]\", \"[--media-current-shadow-color-subtle:oklch(from_var(--media-current-shadow-color)_l_c_h/calc(alpha*0.4))]\", \"[--scale:1]\", \"[--font-size-base:calc(0.8125rem*var(--scale))]\", \"[--font-size-small:calc(0.6875rem*var(--scale))]\", \"[--font-size-medium:calc(0.9375rem*var(--scale))]\", \"[--font-size-tiny:calc(0.5625rem*var(--scale))]\", \"[--media-icon-size:calc(--spacing(4.5)*var(--scale))]\", \"[--spacing-proxy:var(--spacing)]\", \"[&>*]:[--spacing:calc(var(--spacing-proxy)*var(--scale))]\");\n//#endregion\nexport { root };\n\n//# sourceMappingURL=root.js.map"],"mappings":";;;AAGA,MAAM,OAAO,GAAG,OAAO,8DAA8D,2CAA2C,qIAAqI,mDAAmD,mEAAmE,gEAAgE,6CAA6C,4FAA4F,wGAAwG,iGAAiG,6GAA6G,eAAe,mDAAmD,oDAAoD,qDAAqD,mDAAmD,yDAAyD,oCAAoC,2DAA2D"}

package/dist/default/skins/dist/default/minimal/tailwind/components/input-feedback.js

@@ -1,41 +0,0 @@
-import { cn } from "@videojs/utils/style";
-//#region ../skins/dist/default/minimal/tailwind/components/input-feedback.js
-/**
-* NOTE: tailwind.css is required to support the `@property --media-progress-fill` registration and animation keyframes. You should import from either:
-- "@videojs/html/tailwind.css" for HTML skins
-- "@videojs/react/tailwind.css" for React skins
-*/
-const inputFeedback = {
-	root: cn("absolute inset-0 pointer-events-none", "grid grid-cols-3 items-center justify-items-center overflow-hidden", "rounded-[inherit]", "[color:var(--media-color-primary,oklch(1_0_0))]"),
-	island: {
-		base: cn("group/input-indicator", "absolute top-0 inset-x-0", "pt-3 pb-32", "flex justify-center", "text-inherit font-medium", "origin-top pointer-events-none", "duration-100 ease-out", "data-starting-style:opacity-0", "data-ending-style:opacity-0", "data-starting-style:duration-400", "data-starting-style:ease-in", "data-ending-style:duration-400", "data-ending-style:ease-in", "[background-image:linear-gradient(to_bottom,oklch(0_0_0/0.35),oklch(0_0_0/0.2)_--spacing(12),oklch(0_0_0/0))]", "text-shadow-2xs text-shadow-(color:--media-current-shadow-color)", "pointer-fine:will-change-[translate,filter,opacity]", "pointer-fine:transition-[translate,filter,opacity]", "pointer-coarse:will-change-[translate,opacity]", "pointer-coarse:transition-[translate,opacity]", "pointer-fine:motion-safe:data-starting-style:blur-sm", "pointer-fine:motion-safe:data-ending-style:blur-sm", "motion-safe:data-ending-style:-translate-y-full"),
-		content: cn("flex justify-between items-center gap-2 px-2.5 py-1", "*:last:ml-auto", "[@media(prefers-reduced-transparency:reduce)]:bg-(--media-controls-background-color)", "[@media(prefers-reduced-transparency:reduce)]:rounded-[--spacing(2)]", "contrast-more:bg-(--media-controls-background-color) contrast-more:rounded-[--spacing(2)]"),
-		volume: cn("*:data-feedback-island-content:w-[min(80%,--spacing(56))]"),
-		volumeProgress: cn("[--media-progress-fill:var(--media-volume-fill)]", "w-full h-0.75 rounded-full", "[background-image:linear-gradient(to_right,currentColor_0%,currentColor_var(--media-progress-fill),oklch(from_currentColor_l_c_h/0.2)_var(--media-progress-fill),oklch(from_currentColor_l_c_h/0.2)_100%)]", "shadow-[0_1px_0_var(--media-current-shadow-color-subtle)]"),
-		shownVolume: cn("data-open:duration-100", "data-min:*:data-feedback-island-content:animate-media-shake", "data-max:*:data-feedback-island-content:animate-media-shake", "motion-reduce:data-min:*:data-feedback-island-content:animate-none", "motion-reduce:data-max:*:data-feedback-island-content:animate-none"),
-		shownStatus: cn("data-open:duration-100"),
-		icon: cn("hidden shrink-0", "drop-shadow-[0_1px_0_var(--media-current-shadow-color)]"),
-		shownVolumeHigh: "group-data-[level=high]/input-indicator:block",
-		shownVolumeLow: "group-data-[level=low]/input-indicator:block",
-		shownVolumeOff: "group-data-[level=off]/input-indicator:block",
-		shownCaptionsOn: "group-data-[status=captions-on]/input-indicator:block",
-		shownCaptionsOff: "group-data-[status=captions-off]/input-indicator:block",
-		shownFullscreenEnter: "group-data-[status=fullscreen]/input-indicator:block",
-		shownFullscreenExit: "group-data-[status=exit-fullscreen]/input-indicator:block",
-		shownPipEnter: "group-data-[status=pip]/input-indicator:block",
-		shownPipExit: "group-data-[status=exit-pip]/input-indicator:block",
-		value: "ml-auto"
-	},
-	bubble: {
-		base: cn("group/input-indicator", "col-start-2 row-start-1", "grid place-content-center text-center p-4", "data-direction:gap-1", "@2xl/media-root:data-direction:p-6", "not-data-direction:[transition-property:opacity,scale]", "not-data-direction:duration-200 not-data-direction:ease-out", "motion-reduce:not-data-direction:transition-opacity", "motion-reduce:not-data-direction:duration-50", "not-data-direction:data-starting-style:opacity-0", "not-data-direction:data-ending-style:opacity-0", "not-data-direction:data-starting-style:scale-[0.85]", "not-data-direction:data-ending-style:scale-[0.85]", "not-data-direction:data-ending-style:duration-100", "not-data-direction:data-ending-style:ease-in", "data-[direction=backward]:col-start-1 data-[direction=backward]:justify-self-start", "data-[direction=forward]:col-start-3 data-[direction=forward]:justify-self-end"),
-		icon: "hidden size-[calc(var(--media-icon-size)*2)]",
-		shownSeek: cn("group-data-direction/input-indicator:size-[calc(var(--media-icon-size)*1.5)]", "group-data-direction/input-indicator:block", "group-data-[direction=backward]/input-indicator:[scale:-1_1]", "motion-safe:transition-[translate,opacity] motion-safe:duration-200 motion-safe:ease-in-out", "motion-safe:group-data-starting-style/input-indicator:opacity-0", "motion-safe:group-data-ending-style/input-indicator:opacity-0", "motion-safe:group-data-[direction=forward]/input-indicator:group-data-starting-style/input-indicator:[translate:-60%_0]", "motion-safe:group-data-[direction=backward]/input-indicator:group-data-starting-style/input-indicator:[translate:60%_0]"),
-		shownPause: "group-data-[status=pause]/input-indicator:block",
-		shownPlay: "group-data-[status=play]/input-indicator:block",
-		time: "tabular-nums"
-	}
-};
-//#endregion
-export { inputFeedback };
-
-//# sourceMappingURL=input-feedback.js.map

package/dist/default/skins/dist/default/minimal/tailwind/components/input-feedback.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"input-feedback.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/input-feedback.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n//#region src/minimal/tailwind/components/input-feedback.ts\n/**\n* NOTE: tailwind.css is required to support the `@property --media-progress-fill` registration and animation keyframes. You should import from either:\n- \"@videojs/html/tailwind.css\" for HTML skins\n- \"@videojs/react/tailwind.css\" for React skins\n*/\nconst inputFeedback = {\n\troot: cn(\"absolute inset-0 pointer-events-none\", \"grid grid-cols-3 items-center justify-items-center overflow-hidden\", \"rounded-[inherit]\", \"[color:var(--media-color-primary,oklch(1_0_0))]\"),\n\tisland: {\n\t\tbase: cn(\"group/input-indicator\", \"absolute top-0 inset-x-0\", \"pt-3 pb-32\", \"flex justify-center\", \"text-inherit font-medium\", \"origin-top pointer-events-none\", \"duration-100 ease-out\", \"data-starting-style:opacity-0\", \"data-ending-style:opacity-0\", \"data-starting-style:duration-400\", \"data-starting-style:ease-in\", \"data-ending-style:duration-400\", \"data-ending-style:ease-in\", \"[background-image:linear-gradient(to_bottom,oklch(0_0_0/0.35),oklch(0_0_0/0.2)_--spacing(12),oklch(0_0_0/0))]\", \"text-shadow-2xs text-shadow-(color:--media-current-shadow-color)\", \"pointer-fine:will-change-[translate,filter,opacity]\", \"pointer-fine:transition-[translate,filter,opacity]\", \"pointer-coarse:will-change-[translate,opacity]\", \"pointer-coarse:transition-[translate,opacity]\", \"pointer-fine:motion-safe:data-starting-style:blur-sm\", \"pointer-fine:motion-safe:data-ending-style:blur-sm\", \"motion-safe:data-ending-style:-translate-y-full\"),\n\t\tcontent: cn(\"flex justify-between items-center gap-2 px-2.5 py-1\", \"*:last:ml-auto\", \"[@media(prefers-reduced-transparency:reduce)]:bg-(--media-controls-background-color)\", \"[@media(prefers-reduced-transparency:reduce)]:rounded-[--spacing(2)]\", \"contrast-more:bg-(--media-controls-background-color) contrast-more:rounded-[--spacing(2)]\"),\n\t\tvolume: cn(\"*:data-feedback-island-content:w-[min(80%,--spacing(56))]\"),\n\t\tvolumeProgress: cn(\"[--media-progress-fill:var(--media-volume-fill)]\", \"w-full h-0.75 rounded-full\", \"[background-image:linear-gradient(to_right,currentColor_0%,currentColor_var(--media-progress-fill),oklch(from_currentColor_l_c_h/0.2)_var(--media-progress-fill),oklch(from_currentColor_l_c_h/0.2)_100%)]\", \"shadow-[0_1px_0_var(--media-current-shadow-color-subtle)]\"),\n\t\tshownVolume: cn(\"data-open:duration-100\", \"data-min:*:data-feedback-island-content:animate-media-shake\", \"data-max:*:data-feedback-island-content:animate-media-shake\", \"motion-reduce:data-min:*:data-feedback-island-content:animate-none\", \"motion-reduce:data-max:*:data-feedback-island-content:animate-none\"),\n\t\tshownStatus: cn(\"data-open:duration-100\"),\n\t\ticon: cn(\"hidden shrink-0\", \"drop-shadow-[0_1px_0_var(--media-current-shadow-color)]\"),\n\t\tshownVolumeHigh: \"group-data-[level=high]/input-indicator:block\",\n\t\tshownVolumeLow: \"group-data-[level=low]/input-indicator:block\",\n\t\tshownVolumeOff: \"group-data-[level=off]/input-indicator:block\",\n\t\tshownCaptionsOn: \"group-data-[status=captions-on]/input-indicator:block\",\n\t\tshownCaptionsOff: \"group-data-[status=captions-off]/input-indicator:block\",\n\t\tshownFullscreenEnter: \"group-data-[status=fullscreen]/input-indicator:block\",\n\t\tshownFullscreenExit: \"group-data-[status=exit-fullscreen]/input-indicator:block\",\n\t\tshownPipEnter: \"group-data-[status=pip]/input-indicator:block\",\n\t\tshownPipExit: \"group-data-[status=exit-pip]/input-indicator:block\",\n\t\tvalue: \"ml-auto\"\n\t},\n\tbubble: {\n\t\tbase: cn(\"group/input-indicator\", \"col-start-2 row-start-1\", \"grid place-content-center text-center p-4\", \"data-direction:gap-1\", \"@2xl/media-root:data-direction:p-6\", \"not-data-direction:[transition-property:opacity,scale]\", \"not-data-direction:duration-200 not-data-direction:ease-out\", \"motion-reduce:not-data-direction:transition-opacity\", \"motion-reduce:not-data-direction:duration-50\", \"not-data-direction:data-starting-style:opacity-0\", \"not-data-direction:data-ending-style:opacity-0\", \"not-data-direction:data-starting-style:scale-[0.85]\", \"not-data-direction:data-ending-style:scale-[0.85]\", \"not-data-direction:data-ending-style:duration-100\", \"not-data-direction:data-ending-style:ease-in\", \"data-[direction=backward]:col-start-1 data-[direction=backward]:justify-self-start\", \"data-[direction=forward]:col-start-3 data-[direction=forward]:justify-self-end\"),\n\t\ticon: \"hidden size-[calc(var(--media-icon-size)*2)]\",\n\t\tshownSeek: cn(\"group-data-direction/input-indicator:size-[calc(var(--media-icon-size)*1.5)]\", \"group-data-direction/input-indicator:block\", \"group-data-[direction=backward]/input-indicator:[scale:-1_1]\", \"motion-safe:transition-[translate,opacity] motion-safe:duration-200 motion-safe:ease-in-out\", \"motion-safe:group-data-starting-style/input-indicator:opacity-0\", \"motion-safe:group-data-ending-style/input-indicator:opacity-0\", \"motion-safe:group-data-[direction=forward]/input-indicator:group-data-starting-style/input-indicator:[translate:-60%_0]\", \"motion-safe:group-data-[direction=backward]/input-indicator:group-data-starting-style/input-indicator:[translate:60%_0]\"),\n\t\tshownPause: \"group-data-[status=pause]/input-indicator:block\",\n\t\tshownPlay: \"group-data-[status=play]/input-indicator:block\",\n\t\ttime: \"tabular-nums\"\n\t}\n};\n//#endregion\nexport { inputFeedback };\n\n//# sourceMappingURL=input-feedback.js.map"],"mappings":";;;;;;;AAOA,MAAM,gBAAgB;CACrB,MAAM,GAAG,wCAAwC,sEAAsE,qBAAqB,iDAAiD;CAC7L,QAAQ;EACP,MAAM,GAAG,yBAAyB,4BAA4B,cAAc,uBAAuB,4BAA4B,kCAAkC,yBAAyB,iCAAiC,+BAA+B,oCAAoC,+BAA+B,kCAAkC,6BAA6B,iHAAiH,oEAAoE,uDAAuD,sDAAsD,kDAAkD,iDAAiD,wDAAwD,sDAAsD,iDAAiD;EACh6B,SAAS,GAAG,uDAAuD,kBAAkB,wFAAwF,wEAAwE,2FAA2F;EAChV,QAAQ,GAAG,2DAA2D;EACtE,gBAAgB,GAAG,oDAAoD,8BAA8B,8MAA8M,2DAA2D;EAC9W,aAAa,GAAG,0BAA0B,+DAA+D,+DAA+D,sEAAsE,oEAAoE;EAClT,aAAa,GAAG,wBAAwB;EACxC,MAAM,GAAG,mBAAmB,yDAAyD;EACrF,iBAAiB;EACjB,gBAAgB;EAChB,gBAAgB;EAChB,iBAAiB;EACjB,kBAAkB;EAClB,sBAAsB;EACtB,qBAAqB;EACrB,eAAe;EACf,cAAc;EACd,OAAO;CACR;CACA,QAAQ;EACP,MAAM,GAAG,yBAAyB,2BAA2B,6CAA6C,wBAAwB,sCAAsC,0DAA0D,+DAA+D,uDAAuD,gDAAgD,oDAAoD,kDAAkD,uDAAuD,qDAAqD,qDAAqD,gDAAgD,sFAAsF,gFAAgF;EACr2B,MAAM;EACN,WAAW,GAAG,gFAAgF,8CAA8C,gEAAgE,+FAA+F,mEAAmE,iEAAiE,2HAA2H,yHAAyH;EACnqB,YAAY;EACZ,WAAW;EACX,MAAM;CACP;AACD"}

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

@@ -1,8 +0,0 @@
-import { reset } from "./reset.js";
-import { cn } from "@videojs/utils/style";
-//#region ../skins/dist/default/minimal/tailwind/components/root.js
-const root = cn(reset, "block relative isolate h-full w-full @container/media-root", "rounded-(--media-border-radius,0.75rem)", "font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-(length:--font-size-base) leading-normal subpixel-antialiased", "outline-2 outline-transparent -outline-offset-4", "transition-[outline-offset,outline-color] duration-100 ease-out", "focus-visible:outline-current focus-visible:outline-offset-2", "scrollbar-thin scrollbar-thumb-current/30", "[@media_(prefers-reduced-transparency:reduce)_or_(prefers-contrast:more)]:scrollbar-auto", "[@media_(prefers-reduced-transparency:reduce)_or_(prefers-contrast:more)]:scrollbar-thumb-current/80", "[--media-current-shadow-color:oklch(from_currentColor_0_0_0/clamp(0,calc((l-0.5)*0.5),0.15))]", "[--media-current-shadow-color-subtle:oklch(from_var(--media-current-shadow-color)_l_c_h/calc(alpha*0.4))]", "[--scale:1]", "[--font-size-base:calc(0.8125rem*var(--scale))]", "[--font-size-small:calc(0.6875rem*var(--scale))]", "[--font-size-medium:calc(0.9375rem*var(--scale))]", "[--font-size-tiny:calc(0.5625rem*var(--scale))]", "[--media-icon-size:calc(--spacing(4.5)*var(--scale))]", "[--spacing-proxy:var(--spacing)]", "[&>*]:[--spacing:calc(var(--spacing-proxy)*var(--scale))]");
-//#endregion
-export { root };
-
-//# sourceMappingURL=root.js.map