diff --git a/packages/react/src/components/SimpleVideo.tsx b/packages/react/src/components/SimpleVideo.tsx new file mode 100644 index 00000000..4ef7d512 --- /dev/null +++ b/packages/react/src/components/SimpleVideo.tsx @@ -0,0 +1,54 @@ +'use client'; + +import type { + CSSProperties, + DetailedHTMLProps, + PropsWithChildren, + VideoHTMLAttributes, +} from 'react'; + +import React, { forwardRef } from 'react'; +import { useMediaRef } from '@/store'; + +export type SimpleVideoProps = PropsWithChildren< + DetailedHTMLProps, HTMLVideoElement> & { + className?: string | undefined; + style?: CSSProperties | undefined; + } +>; + +/** + * SimpleVideo - A basic video component that works with native HTML5 video formats (MP4, WebM, etc.) + * without using a playback engine. Use this for simple MP4 files. For HLS/DASH streaming, use the + * regular Video component instead. + * + * This component connects to MediaProvider for play/pause state but sets the src directly on the + * video element without going through HLS.js or other playback engines. + * + * @example + * ```tsx + * + * + * + * + * + * ``` + */ +export const SimpleVideo: React.ForwardRefExoticComponent< + SimpleVideoProps & React.RefAttributes +> = forwardRef( + ({ children, ...props }, _ref) => { + const mediaRefCallback = useMediaRef(); + + return ( + // eslint-disable-next-line jsx-a11y/media-has-caption + + ); + }, +); + +SimpleVideo.displayName = 'SimpleVideo'; + +export default SimpleVideo; diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index da6680eb..f0664152 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -6,6 +6,7 @@ export { MuteButton } from './components/MuteButton'; export { PlayButton } from './components/PlayButton'; export { Popover } from './components/Popover'; export { PreviewTimeDisplay } from './components/PreviewTimeDisplay'; +export { SimpleVideo } from './components/SimpleVideo'; export { TimeSlider } from './components/TimeSlider'; export { Tooltip } from './components/Tooltip'; export { MediaElementVideo, Video } from './components/Video';