feat: add background video components (#567)

packages/react/src/media/background-video/index.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import type { VideoHTMLAttributes } from 'react';
+import { forwardRef, useCallback } from 'react';
+
+import { useMediaRegistration } from '../../player/context';
+import { useComposedRefs } from '../../utils/use-composed-refs';
+
+export interface BackgroundVideoProps extends VideoHTMLAttributes<HTMLVideoElement> {}
+
+export const BackgroundVideo = forwardRef<HTMLVideoElement, BackgroundVideoProps>(function BackgroundVideo(
+  { children, ...props },
+  ref
+) {
+  const setMedia = useMediaRegistration();
+
+  const mediaRef = useCallback(
+    (el: HTMLVideoElement | null) => {
+      setMedia?.(el);
+    },
+    [setMedia]
+  );
+
+  const composedRef = useComposedRefs(ref, mediaRef);
+
+  return (
+    <video ref={composedRef} muted autoPlay loop playsInline disableRemotePlayback disablePictureInPicture {...props}>
+      {children}
+    </video>
+  );
+});
+
+export namespace BackgroundVideo {
+  export type Props = BackgroundVideoProps;
+}

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

@@ -1 +1,2 @@
+export { BackgroundVideo, type BackgroundVideoProps } from '@/media/background-video';
 export * from './skin';