feat: add background video preset (#607)

packages/react/package.json

@@ -28,20 +28,10 @@
       "default": "./dist/default/media/*/index.js"
     },
     "./*.css": "./dist/default/presets/*.css",
-    "./audio": {
-      "types": "./dist/dev/presets/audio/index.d.ts",
-      "development": "./dist/dev/presets/audio/index.js",
-      "default": "./dist/default/presets/audio/index.js"
-    },
-    "./background": {
-      "types": "./dist/dev/presets/background/index.d.ts",
-      "development": "./dist/dev/presets/background/index.js",
-      "default": "./dist/default/presets/background/index.js"
-    },
-    "./video": {
-      "types": "./dist/dev/presets/video/index.d.ts",
-      "development": "./dist/dev/presets/video/index.js",
-      "default": "./dist/default/presets/video/index.js"
+    "./*": {
+      "types": "./dist/dev/presets/*/index.d.ts",
+      "development": "./dist/dev/presets/*/index.js",
+      "default": "./dist/default/presets/*/index.js"
     }
   },
   "scripts": {

packages/react/src/presets/audio/index.ts

@@ -1,3 +1,10 @@
+import { createPlayer, features } from '../..';
+
+const { Provider: AudioProvider } = createPlayer({
+  features: features.audio,
+});
+
+export { AudioProvider };
 export { Audio, type AudioProps } from '@/media/audio';
 export * from './minimal-skin';
 export * from './skin';

packages/react/src/presets/background/index.ts

@@ -1,2 +1,9 @@
+import { createPlayer, features } from '../..';
+
+const { Provider: BackgroundVideoProvider } = createPlayer({
+  features: features.background,
+});
+
+export { BackgroundVideoProvider };
 export { BackgroundVideo, type BackgroundVideoProps } from '@/media/background-video';
 export * from './skin';

packages/react/src/presets/background/skin.css

@@ -1,3 +1,21 @@
-.media-skin {
-  color: var(--media-color, red);
+.media-background-skin {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.media-background-skin > video,
+.media-background-skin > .media {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: inherit;
+}
+
+.media-background-skin > :where(img, picture) {
+  width: 100%;
+  height: 100%;
+  object-fit: inherit;
 }

packages/react/src/presets/background/skin.tsx

@@ -1,8 +1,13 @@
+import { cn } from '@videojs/utils/style';
 import type { BaseSkinProps } from '../types';
 
 export type BackgroundVideoSkinProps = BaseSkinProps;
 
 export function BackgroundVideoSkin(props: BackgroundVideoSkinProps) {
-  const { children } = props;
-  return <div>{children}</div>;
+  const { children, className, ...rest } = props;
+  return (
+    <div className={cn('media-background-skin', className)} {...rest}>
+      {children}
+    </div>
+  );
 }

packages/react/src/presets/video/index.ts

@@ -1,3 +1,10 @@
+import { createPlayer, features } from '../..';
+
+const { Provider: VideoProvider } = createPlayer({
+  features: features.video,
+});
+
+export { VideoProvider };
 export { Video, type VideoProps } from '@/media/video';
 export * from './minimal-skin';
 export * from './minimal-skin.tailwind';