fix(react): align media component conventions (#1281)

This commit is contained in:
rahim
2026-04-08 17:35:54 +10:00
committed by GitHub
parent 11f305713b
commit 42abf88095
5 changed files with 36 additions and 10 deletions
@@ -1,3 +1,5 @@
'use client';
import type { InferDelegateProps } from '@videojs/core';
import { DashMedia, DashMediaDelegate } from '@videojs/core/dom/media/dash';
import type { PropsWithChildren, VideoHTMLAttributes } from 'react';
@@ -10,7 +12,7 @@ import { useMediaInstance } from '../../utils/use-media-instance';
export type DashVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>> &
InferDelegateProps<typeof DashMediaDelegate>;
export const DashVideo = forwardRef<HTMLVideoElement, DashVideoProps>(({ children, ...props }, ref) => {
export const DashVideo = forwardRef<HTMLVideoElement, DashVideoProps>(function DashVideo({ children, ...props }, ref) {
const mediaApi = useMediaInstance(DashMedia);
const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);
@@ -22,4 +24,6 @@ export const DashVideo = forwardRef<HTMLVideoElement, DashVideoProps>(({ childre
);
});
export default DashVideo;
export namespace DashVideo {
export type Props = DashVideoProps;
}
+6 -2
View File
@@ -1,3 +1,5 @@
'use client';
import type { InferDelegateProps } from '@videojs/core';
import { HlsMedia, HlsMediaDelegate } from '@videojs/core/dom/media/hls';
import type { PropsWithChildren, VideoHTMLAttributes } from 'react';
@@ -10,7 +12,7 @@ import { useMediaInstance } from '../../utils/use-media-instance';
export type HlsVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>> &
InferDelegateProps<typeof HlsMediaDelegate>;
export const HlsVideo = forwardRef<HTMLVideoElement, HlsVideoProps>(({ children, ...props }, ref) => {
export const HlsVideo = forwardRef<HTMLVideoElement, HlsVideoProps>(function HlsVideo({ children, ...props }, ref) {
const mediaApi = useMediaInstance(HlsMedia);
const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);
@@ -22,4 +24,6 @@ export const HlsVideo = forwardRef<HTMLVideoElement, HlsVideoProps>(({ children,
);
});
export default HlsVideo;
export namespace HlsVideo {
export type Props = HlsVideoProps;
}
+6 -2
View File
@@ -1,3 +1,5 @@
'use client';
import type { InferDelegateProps } from '@videojs/core';
import { MuxMediaDelegate, MuxVideo as MuxVideoApi } from '@videojs/core/dom/media/mux';
import type { PropsWithChildren, VideoHTMLAttributes } from 'react';
@@ -10,7 +12,7 @@ import { useMediaInstance } from '../../utils/use-media-instance';
export type MuxVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>> &
InferDelegateProps<typeof MuxMediaDelegate>;
export const MuxVideo = forwardRef<HTMLVideoElement, MuxVideoProps>(({ children, ...props }, ref) => {
export const MuxVideo = forwardRef<HTMLVideoElement, MuxVideoProps>(function MuxVideo({ children, ...props }, ref) {
const mediaApi = useMediaInstance(MuxVideoApi);
const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);
@@ -22,4 +24,6 @@ export const MuxVideo = forwardRef<HTMLVideoElement, MuxVideoProps>(({ children,
);
});
export default MuxVideo;
export namespace MuxVideo {
export type Props = MuxVideoProps;
}
@@ -1,3 +1,5 @@
'use client';
import type { InferDelegateProps } from '@videojs/core';
import { NativeHlsMedia, NativeHlsMediaDelegate } from '@videojs/core/dom/media/native-hls';
import type { PropsWithChildren, VideoHTMLAttributes } from 'react';
@@ -10,7 +12,10 @@ 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) => {
export const NativeHlsVideo = forwardRef<HTMLVideoElement, NativeHlsVideoProps>(function NativeHlsVideo(
{ children, ...props },
ref
) {
const mediaApi = useMediaInstance(NativeHlsMedia);
const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);
@@ -22,4 +27,6 @@ export const NativeHlsVideo = forwardRef<HTMLVideoElement, NativeHlsVideoProps>(
);
});
export default NativeHlsVideo;
export namespace NativeHlsVideo {
export type Props = NativeHlsVideoProps;
}
@@ -1,3 +1,5 @@
'use client';
import { SimpleHlsMedia } from '@videojs/core/dom/media/simple-hls';
import { SpfMedia } from '@videojs/spf/dom';
import type { PropsWithChildren, VideoHTMLAttributes } from 'react';
@@ -9,7 +11,10 @@ import { useMediaInstance } from '../../utils/use-media-instance';
export type SimpleHlsVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>>;
export const SimpleHlsVideo = forwardRef<HTMLVideoElement, SimpleHlsVideoProps>(({ children, ...props }, ref) => {
export const SimpleHlsVideo = forwardRef<HTMLVideoElement, SimpleHlsVideoProps>(function SimpleHlsVideo(
{ children, ...props },
ref
) {
const mediaApi = useMediaInstance(SimpleHlsMedia);
const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);
@@ -21,4 +26,6 @@ export const SimpleHlsVideo = forwardRef<HTMLVideoElement, SimpleHlsVideoProps>(
);
});
export default SimpleHlsVideo;
export namespace SimpleHlsVideo {
export type Props = SimpleHlsVideoProps;
}