feat: add native hls media + refactor (#1154)

packages/react/src/index.ts

@@ -1,7 +1,6 @@
 'use client';
 
 // Core
-export type { Delegate } from '@videojs/core';
 export { DelegateMixin } from '@videojs/core';
 export * from '@videojs/core/dom';
 

packages/react/src/media/native-hls-video/index.tsx

@@ -0,0 +1,25 @@
+import type { InferDelegateProps } from '@videojs/core';
+import { NativeHlsMedia, NativeHlsMediaDelegate } from '@videojs/core/dom/media/native-hls';
+import type { PropsWithChildren, VideoHTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+import { attachMediaElement } from '../../utils/attach-media-element';
+import { mediaProps } from '../../utils/media-props';
+import { useComposedRefs } from '../../utils/use-composed-refs';
+import { useMediaInstance } from '../../utils/use-media-instance';
+
+export type NativeHlsVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>> &
+  InferDelegateProps<typeof NativeHlsMediaDelegate>;
+
+export const NativeHlsVideo = forwardRef<HTMLVideoElement, NativeHlsVideoProps>(({ children, ...props }, ref) => {
+  const mediaApi = useMediaInstance(NativeHlsMedia);
+
+  const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);
+
+  return (
+    <video ref={composedRef} {...mediaProps(mediaApi, NativeHlsMediaDelegate, props)}>
+      {children}
+    </video>
+  );
+});
+
+export default NativeHlsVideo;