mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
fix(react): align media component conventions (#1281)
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user