@videojs/react 0.1.0-preview.8 → 10.0.0-alpha.3

package/README.md

@@ -2,7 +2,7 @@
 
 [![package-badge]][package]
 
-> **⚠️ Technical Preview - SUBJECT TO CHANGE** Not recommended for production use.
+> **⚠️ Alpha - SUBJECT TO CHANGE** Not recommended for production use.
 
 ## Overview
 

package/dist/default/_virtual/_rolldown/runtime.js

@@ -0,0 +1,18 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) {
+		__defProp(target, name, {
+			get: all[name],
+			enumerable: true
+		});
+	}
+	if (!no_symbols) {
+		__defProp(target, Symbol.toStringTag, { value: "Module" });
+	}
+	return target;
+};
+
+//#endregion
+export { __exportAll };

package/dist/default/index.js

@@ -0,0 +1,22 @@
+'use client';
+
+import { Container, useMedia, useMediaRegistration, usePlayer, usePlayerContext } from "./player/context.js";
+import { createPlayer } from "./player/create-player.js";
+import { mergeProps } from "./utils/merge-props.js";
+import { renderElement } from "./utils/use-render.js";
+import { BufferingIndicator } from "./ui/buffering-indicator/buffering-indicator.js";
+import { index_parts_exports } from "./ui/controls/index.parts.js";
+import { useButton } from "./ui/hooks/use-button.js";
+import { FullscreenButton } from "./ui/fullscreen-button/fullscreen-button.js";
+import { MuteButton } from "./ui/mute-button/mute-button.js";
+import { PiPButton } from "./ui/pip-button/pip-button.js";
+import { PlayButton } from "./ui/play-button/play-button.js";
+import { Poster } from "./ui/poster/poster.js";
+import { SeekButton } from "./ui/seek-button/seek-button.js";
+import { index_parts_exports as index_parts_exports$1 } from "./ui/time/index.parts.js";
+import { createSelector, shallowEqual } from "@videojs/store";
+import { useSelector, useStore } from "@videojs/store/react";
+
+export * from "@videojs/core/dom"
+
+export { BufferingIndicator, Container, index_parts_exports as Controls, FullscreenButton, MuteButton, PiPButton, PlayButton, Poster, SeekButton, index_parts_exports$1 as Time, createPlayer, createSelector, mergeProps, renderElement, shallowEqual, useButton, useMedia, useMediaRegistration, usePlayer, usePlayerContext, useSelector, useStore };

package/dist/default/media/audio.js

@@ -0,0 +1,22 @@
+'use client';
+
+import { useComposedRefs } from "../utils/use-composed-refs.js";
+import { useMediaRegistration } from "../player/context.js";
+import { forwardRef, useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/media/audio.tsx
+const Audio = forwardRef(function Audio({ children, ...props }, ref) {
+	const setMedia = useMediaRegistration();
+	return /* @__PURE__ */ jsx("audio", {
+		ref: useComposedRefs(ref, useCallback((el) => {
+			setMedia?.(el);
+		}, [setMedia])),
+		...props,
+		children
+	});
+});
+
+//#endregion
+export { Audio };
+//# sourceMappingURL=audio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"audio.js","names":[],"sources":["../../../src/media/audio.tsx"],"sourcesContent":["'use client';\n\nimport type { AudioHTMLAttributes } from 'react';\nimport { forwardRef, useCallback } from 'react';\n\nimport { useMediaRegistration } from '../player/context';\nimport { useComposedRefs } from '../utils/use-composed-refs';\n\nexport interface AudioProps extends AudioHTMLAttributes<HTMLAudioElement> {}\n\nexport const Audio = forwardRef<HTMLAudioElement, AudioProps>(function Audio({ children, ...props }, ref) {\n  const setMedia = useMediaRegistration();\n\n  const mediaRef = useCallback(\n    (el: HTMLAudioElement | null) => {\n      setMedia?.(el);\n    },\n    [setMedia]\n  );\n\n  const composedRef = useComposedRefs(ref, mediaRef);\n\n  return (\n    <audio ref={composedRef} {...props}>\n      {children}\n    </audio>\n  );\n});\n\nexport namespace Audio {\n  export type Props = AudioProps;\n}\n"],"mappings":";;;;;;;;AAUA,MAAa,QAAQ,WAAyC,SAAS,MAAM,EAAE,UAAU,GAAG,SAAS,KAAK;CACxG,MAAM,WAAW,sBAAsB;AAWvC,QACE,oBAAC;EAAM,KAHW,gBAAgB,KAPnB,aACd,OAAgC;AAC/B,cAAW,GAAG;KAEhB,CAAC,SAAS,CACX,CAEiD;EAGvB,GAAI;EAC1B;GACK;EAEV"}

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

@@ -0,0 +1,28 @@
+'use client';
+
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { useMediaRegistration } from "../../player/context.js";
+import { forwardRef, useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/media/background-video/index.tsx
+const BackgroundVideo = forwardRef(function BackgroundVideo({ children, ...props }, ref) {
+	const setMedia = useMediaRegistration();
+	return /* @__PURE__ */ jsx("video", {
+		ref: useComposedRefs(ref, useCallback((el) => {
+			setMedia?.(el);
+		}, [setMedia])),
+		muted: true,
+		autoPlay: true,
+		loop: true,
+		playsInline: true,
+		disableRemotePlayback: true,
+		disablePictureInPicture: true,
+		...props,
+		children
+	});
+});
+
+//#endregion
+export { BackgroundVideo };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/background-video/index.tsx"],"sourcesContent":["'use client';\n\nimport type { VideoHTMLAttributes } from 'react';\nimport { forwardRef, useCallback } from 'react';\n\nimport { useMediaRegistration } from '../../player/context';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\n\nexport interface BackgroundVideoProps extends VideoHTMLAttributes<HTMLVideoElement> {}\n\nexport const BackgroundVideo = forwardRef<HTMLVideoElement, BackgroundVideoProps>(function BackgroundVideo(\n  { children, ...props },\n  ref\n) {\n  const setMedia = useMediaRegistration();\n\n  const mediaRef = useCallback(\n    (el: HTMLVideoElement | null) => {\n      setMedia?.(el);\n    },\n    [setMedia]\n  );\n\n  const composedRef = useComposedRefs(ref, mediaRef);\n\n  return (\n    <video ref={composedRef} muted autoPlay loop playsInline disableRemotePlayback disablePictureInPicture {...props}>\n      {children}\n    </video>\n  );\n});\n\nexport namespace BackgroundVideo {\n  export type Props = BackgroundVideoProps;\n}\n"],"mappings":";;;;;;;;AAUA,MAAa,kBAAkB,WAAmD,SAAS,gBACzF,EAAE,UAAU,GAAG,SACf,KACA;CACA,MAAM,WAAW,sBAAsB;AAWvC,QACE,oBAAC;EAAM,KAHW,gBAAgB,KAPnB,aACd,OAAgC;AAC/B,cAAW,GAAG;KAEhB,CAAC,SAAS,CACX,CAEiD;EAGvB;EAAM;EAAS;EAAK;EAAY;EAAsB;EAAwB,GAAI;EACxG;GACK;EAEV"}

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

@@ -0,0 +1,25 @@
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { useMediaRegistration } from "../../player/context.js";
+import { attachMediaElement } from "../../utils/attach-media-element.js";
+import { mediaProps } from "../../utils/media-props.js";
+import { forwardRef, useEffect, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { HlsMedia } from "@videojs/core/dom/media/hls";
+
+//#region src/media/hls-video/index.tsx
+const HlsVideo = forwardRef(({ children, ...props }, ref) => {
+	const mediaApi = useMemo(() => new HlsMedia(), []);
+	const setMedia = useMediaRegistration();
+	useEffect(() => {
+		setMedia?.(mediaApi);
+	}, [mediaApi, setMedia]);
+	return /* @__PURE__ */ jsx("video", {
+		ref: useComposedRefs(attachMediaElement(mediaApi), ref),
+		...mediaProps(mediaApi, props),
+		children
+	});
+});
+
+//#endregion
+export { HlsVideo, HlsVideo as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/media/hls-video/index.tsx"],"sourcesContent":["import { HlsMedia } from '@videojs/core/dom/media/hls';\nimport type { PropsWithChildren, VideoHTMLAttributes } from 'react';\nimport { forwardRef, useEffect, useMemo } from 'react';\nimport { useMediaRegistration } from '../../player/context';\nimport { attachMediaElement } from '../../utils/attach-media-element';\nimport { mediaProps } from '../../utils/media-props';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\n\nexport type HlsVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>>;\n\nexport const HlsVideo = forwardRef<HTMLVideoElement, HlsVideoProps>(({ children, ...props }, ref) => {\n  const mediaApi = useMemo(() => new HlsMedia(), []);\n  const setMedia = useMediaRegistration();\n\n  useEffect(() => {\n    setMedia?.(mediaApi);\n  }, [mediaApi, setMedia]);\n\n  const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);\n  return (\n    <video ref={composedRef} {...mediaProps(mediaApi, props)}>\n      {children}\n    </video>\n  );\n});\n\nexport default HlsVideo;\n"],"mappings":";;;;;;;;;AAUA,MAAa,WAAW,YAA6C,EAAE,UAAU,GAAG,SAAS,QAAQ;CACnG,MAAM,WAAW,cAAc,IAAI,UAAU,EAAE,EAAE,CAAC;CAClD,MAAM,WAAW,sBAAsB;AAEvC,iBAAgB;AACd,aAAW,SAAS;IACnB,CAAC,UAAU,SAAS,CAAC;AAGxB,QACE,oBAAC;EAAM,KAFW,gBAAgB,mBAAmB,SAAS,EAAE,IAAI;EAE3C,GAAI,WAAW,UAAU,MAAM;EACrD;GACK;EAEV"}

package/dist/default/media/video.js

@@ -0,0 +1,22 @@
+'use client';
+
+import { useComposedRefs } from "../utils/use-composed-refs.js";
+import { useMediaRegistration } from "../player/context.js";
+import { forwardRef, useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/media/video.tsx
+const Video = forwardRef(function Video({ children, ...props }, ref) {
+	const setMedia = useMediaRegistration();
+	return /* @__PURE__ */ jsx("video", {
+		ref: useComposedRefs(ref, useCallback((el) => {
+			setMedia?.(el);
+		}, [setMedia])),
+		...props,
+		children
+	});
+});
+
+//#endregion
+export { Video };
+//# sourceMappingURL=video.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"video.js","names":[],"sources":["../../../src/media/video.tsx"],"sourcesContent":["'use client';\n\nimport type { VideoHTMLAttributes } from 'react';\nimport { forwardRef, useCallback } from 'react';\n\nimport { useMediaRegistration } 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 = useMediaRegistration();\n\n  const mediaRef = useCallback(\n    (el: HTMLVideoElement | null) => {\n      setMedia?.(el);\n    },\n    [setMedia]\n  );\n\n  const composedRef = useComposedRefs(ref, mediaRef);\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;CACxG,MAAM,WAAW,sBAAsB;AAWvC,QACE,oBAAC;EAAM,KAHW,gBAAgB,KAPnB,aACd,OAAgC;AAC/B,cAAW,GAAG;KAEhB,CAAC,SAAS,CACX,CAEiD;EAGvB,GAAI;EAC1B;GACK;EAEV"}

package/dist/default/player/context.js

@@ -0,0 +1,55 @@
+'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);
+function PlayerContextProvider({ value, children }) {
+	return /* @__PURE__ */ jsx(PlayerContext.Provider, {
+		value,
+		children
+	});
+}
+/** Access the full player context value. Throws if used outside a Player Provider. */
+function usePlayerContext() {
+	const ctx = useContext(PlayerContext);
+	if (!ctx) throw new Error("usePlayerContext must be used within a Player Provider");
+	return ctx;
+}
+function usePlayer(selector) {
+	const { store } = usePlayerContext();
+	return useStore(store, selector);
+}
+/** Access the media element from within a Player Provider. */
+function useMedia() {
+	const { media } = usePlayerContext();
+	return media;
+}
+/** Access the media registration setter for connecting a media element to the player. */
+function useMediaRegistration() {
+	return useContext(PlayerContext)?.setMedia;
+}
+const Container = forwardRef(function Container({ children, ...props }, ref) {
+	const { store, media } = usePlayerContext();
+	const internalRef = useRef(null);
+	const composedRef = useComposedRefs(ref, internalRef);
+	useEffect(() => {
+		if (!media) return;
+		return store.attach({
+			media,
+			container: internalRef.current
+		});
+	}, [media, store]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: composedRef,
+		...props,
+		children
+	});
+});
+
+//#endregion
+export { Container, PlayerContextProvider, useMedia, useMediaRegistration, usePlayer, usePlayerContext };
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/player/context.tsx"],"sourcesContent":["'use client';\n\nimport type { Media } 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}\n\nconst PlayerContext = createContext<PlayerContextValue | null>(null);\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/** 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 media registration setter for connecting a media element to the player. */\nexport function useMediaRegistration(): Dispatch<SetStateAction<Media | null>> | undefined {\n  const ctx = useContext(PlayerContext);\n  return ctx?.setMedia;\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 { store, media } = usePlayerContext();\n  const internalRef = useRef<HTMLDivElement>(null);\n  const composedRef = useComposedRefs(ref, internalRef);\n\n  useEffect(() => {\n    if (!media) return;\n    return store.attach({ media, container: internalRef.current });\n  }, [media, store]);\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":";;;;;;;;AAgBA,MAAM,gBAAgB,cAAyC,KAAK;AAEpE,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;;;AAIzC,SAAgB,WAAyB;CACvC,MAAM,EAAE,UAAU,kBAAkB;AACpC,QAAO;;;AAIT,SAAgB,uBAA2E;AAEzF,QADY,WAAW,cAAc,EACzB;;AAOd,MAAa,YAAY,WAA2C,SAAS,UAAU,EAAE,UAAU,GAAG,SAAS,KAAK;CAClH,MAAM,EAAE,OAAO,UAAU,kBAAkB;CAC3C,MAAM,cAAc,OAAuB,KAAK;CAChD,MAAM,cAAc,gBAAgB,KAAK,YAAY;AAErD,iBAAgB;AACd,MAAI,CAAC,MAAO;AACZ,SAAO,MAAM,OAAO;GAAE;GAAO,WAAW,YAAY;GAAS,CAAC;IAC7D,CAAC,OAAO,MAAM,CAAC;AAElB,QACE,oBAAC;EAAI,KAAK;EAAa,GAAI;EACxB;GACG;EAER"}

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

@@ -0,0 +1,38 @@
+'use client';
+
+import { Container, PlayerContextProvider, useMedia, usePlayerContext } from "./context.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 }) {
+		const [store] = useState(() => createStore()(combine(...config.features)));
+		const [media, setMedia] = useState(null);
+		useEffect(() => () => store.destroy(), [store]);
+		return /* @__PURE__ */ jsx(PlayerContextProvider, {
+			value: {
+				store,
+				media,
+				setMedia
+			},
+			children
+		});
+	}
+	function usePlayer(selector) {
+		const { store } = usePlayerContext();
+		return useStore(store, selector);
+	}
+	return {
+		Provider,
+		Container,
+		usePlayer,
+		useMedia
+	};
+}
+
+//#endregion
+export { createPlayer };
+//# sourceMappingURL=create-player.js.map

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

@@ -0,0 +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 { 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\n    useEffect(() => () => store.destroy(), [store]);\n\n    return <PlayerContextProvider value={{ store, media, setMedia }}>{children}</PlayerContextProvider>;\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":";;;;;;;;;AAoEA,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;AAEtD,wBAAsB,MAAM,SAAS,EAAE,CAAC,MAAM,CAAC;AAE/C,SAAO,oBAAC;GAAsB,OAAO;IAAE;IAAO;IAAO;IAAU;GAAG;IAAiC;;CAOrG,SAAS,UAAa,UAAqD;EACzE,MAAM,EAAE,UAAU,kBAAkB;AACpC,SAAO,SAAS,OAAO,SAAgB;;AAGzC,QAAO;EACL;EACA;EACA;EACA;EACD"}

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

@@ -0,0 +1,5 @@
+import { Audio } from "../../media/audio.js";
+import { MinimalAudioSkin } from "./minimal-skin.js";
+import { AudioSkin } from "./skin.js";
+
+export { Audio, AudioSkin, MinimalAudioSkin };

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

@@ -0,0 +1,3 @@
+.media-minimal-skin {
+  color: var(--media-color, red);
+}

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

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+
+//#region src/presets/audio/minimal-skin.tsx
+function MinimalAudioSkin(props) {
+	const { children } = props;
+	return /* @__PURE__ */ jsx("div", { children });
+}
+
+//#endregion
+export { MinimalAudioSkin };
+//# sourceMappingURL=minimal-skin.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"minimal-skin.js","names":[],"sources":["../../../../src/presets/audio/minimal-skin.tsx"],"sourcesContent":["import type { BaseSkinProps } from '../types';\n\nexport type MinimalAudioSkinProps = BaseSkinProps;\n\nexport function MinimalAudioSkin(props: MinimalAudioSkinProps) {\n  const { children } = props;\n  return <div>{children}</div>;\n}\n"],"mappings":";;;AAIA,SAAgB,iBAAiB,OAA8B;CAC7D,MAAM,EAAE,aAAa;AACrB,QAAO,oBAAC,SAAK,WAAe"}

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

@@ -0,0 +1,3 @@
+.media-skin {
+  color: var(--media-color, red);
+}

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

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+
+//#region src/presets/audio/skin.tsx
+function AudioSkin(props) {
+	const { children } = props;
+	return /* @__PURE__ */ jsx("div", { children });
+}
+
+//#endregion
+export { AudioSkin };
+//# sourceMappingURL=skin.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skin.js","names":[],"sources":["../../../../src/presets/audio/skin.tsx"],"sourcesContent":["import type { BaseSkinProps } from '../types';\n\nexport type AudioSkinProps = BaseSkinProps;\n\nexport function AudioSkin(props: AudioSkinProps) {\n  const { children } = props;\n  return <div>{children}</div>;\n}\n"],"mappings":";;;AAIA,SAAgB,UAAU,OAAuB;CAC/C,MAAM,EAAE,aAAa;AACrB,QAAO,oBAAC,SAAK,WAAe"}

package/dist/default/presets/background/index.js

@@ -0,0 +1,4 @@
+import { BackgroundVideo } from "../../media/background-video/index.js";
+import { BackgroundVideoSkin } from "./skin.js";
+
+export { BackgroundVideo, BackgroundVideoSkin };

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

@@ -0,0 +1,3 @@
+.media-skin {
+  color: var(--media-color, red);
+}

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

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+
+//#region src/presets/background/skin.tsx
+function BackgroundVideoSkin(props) {
+	const { children } = props;
+	return /* @__PURE__ */ jsx("div", { children });
+}
+
+//#endregion
+export { BackgroundVideoSkin };
+//# sourceMappingURL=skin.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skin.js","names":[],"sources":["../../../../src/presets/background/skin.tsx"],"sourcesContent":["import type { BaseSkinProps } from '../types';\n\nexport type BackgroundVideoSkinProps = BaseSkinProps;\n\nexport function BackgroundVideoSkin(props: BackgroundVideoSkinProps) {\n  const { children } = props;\n  return <div>{children}</div>;\n}\n"],"mappings":";;;AAIA,SAAgB,oBAAoB,OAAiC;CACnE,MAAM,EAAE,aAAa;AACrB,QAAO,oBAAC,SAAK,WAAe"}

package/dist/default/presets/video/index.js

@@ -0,0 +1,7 @@
+import { Video } from "../../media/video.js";
+import { MinimalVideoSkin } from "./minimal-skin.js";
+import { MinimalVideoSkinTailwind } from "./minimal-skin.tailwind.js";
+import { VideoSkin } from "./skin.js";
+import { VideoSkinTailwind } from "./skin.tailwind.js";
+
+export { MinimalVideoSkin, MinimalVideoSkinTailwind, Video, VideoSkin, VideoSkinTailwind };