feat: add background video preset (#607)

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';