zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(packages)!: replace DelegateMixin & ProxyMixin with MediaHost base classes (#1292)

Browse Source
This commit is contained in:
Wesley Luyten
2026-04-14 00:18:11 -05:00
committed by GitHub
parent f609373cd7
commit 8f1653efcd
91 changed files with 2840 additions and 1816 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react/src/index.ts
-1
View File
@@ -1,7 +1,6 @@
'use client';
// Core
export { DelegateMixin } from '@videojs/core';
export * from '@videojs/core/dom';
// Store
packages/react/src/media/dash-video/index.tsx
+4 -4
View File
@@ -1,7 +1,7 @@
'use client';
import type { InferDelegateProps } from '@videojs/core';
import { DashMedia, DashMediaDelegate } from '@videojs/core/dom/media/dash';
import { DashMedia } from '@videojs/core/dom/media/dash';
import type { InferClassProps } from '@videojs/utils/types';
import type { PropsWithChildren, VideoHTMLAttributes } from 'react';
import { forwardRef } from 'react';
import { attachMediaElement } from '../../utils/attach-media-element';
@@ -10,7 +10,7 @@ import { useComposedRefs } from '../../utils/use-composed-refs';
import { useMediaInstance } from '../../utils/use-media-instance';
export type DashVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>> &
InferDelegateProps<typeof DashMediaDelegate>;
InferClassProps<typeof DashMedia>;
export const DashVideo = forwardRef<HTMLVideoElement, DashVideoProps>(function DashVideo({ children, ...props }, ref) {
const mediaApi = useMediaInstance(DashMedia);
@@ -18,7 +18,7 @@ export const DashVideo = forwardRef<HTMLVideoElement, DashVideoProps>(function D
const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);
return (
<video ref={composedRef} {...mediaProps(mediaApi, DashMediaDelegate, props)}>
<video ref={composedRef} {...mediaProps(mediaApi, DashMedia, props)}>
{children}
</video>
);
packages/react/src/media/hls-video/index.tsx
+4 -5
View File
@@ -1,7 +1,7 @@
'use client';
import type { InferDelegateProps } from '@videojs/core';
import { HlsMedia, HlsMediaDelegate } from '@videojs/core/dom/media/hls';
import { HlsMedia } from '@videojs/core/dom/media/hls';
import type { InferClassProps } from '@videojs/utils/types';
import type { PropsWithChildren, VideoHTMLAttributes } from 'react';
import { forwardRef } from 'react';
import { attachMediaElement } from '../../utils/attach-media-element';
@@ -9,8 +9,7 @@ import { mediaProps } from '../../utils/media-props';
import { useComposedRefs } from '../../utils/use-composed-refs';
import { useMediaInstance } from '../../utils/use-media-instance';
export type HlsVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>> &
InferDelegateProps<typeof HlsMediaDelegate>;
export type HlsVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>> & InferClassProps<typeof HlsMedia>;
export const HlsVideo = forwardRef<HTMLVideoElement, HlsVideoProps>(function HlsVideo({ children, ...props }, ref) {
const mediaApi = useMediaInstance(HlsMedia);
@@ -18,7 +17,7 @@ export const HlsVideo = forwardRef<HTMLVideoElement, HlsVideoProps>(function Hls
const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);
return (
<video ref={composedRef} {...mediaProps(mediaApi, HlsMediaDelegate, props)}>
<video ref={composedRef} {...mediaProps(mediaApi, HlsMedia, props)}>
{children}
</video>
);
packages/react/src/media/mux-audio/index.tsx
+5 -5
View File
@@ -1,5 +1,5 @@
import type { InferDelegateProps } from '@videojs/core';
import { MuxAudio as MuxAudioApi, MuxMediaDelegate } from '@videojs/core/dom/media/mux';
import { MuxAudioMedia } from '@videojs/core/dom/media/mux';
import type { InferClassProps } from '@videojs/utils/types';
import type { AudioHTMLAttributes, PropsWithChildren } from 'react';
import { forwardRef } from 'react';
import { attachMediaElement } from '../../utils/attach-media-element';
@@ -8,15 +8,15 @@ import { useComposedRefs } from '../../utils/use-composed-refs';
import { useMediaInstance } from '../../utils/use-media-instance';
export type MuxAudioProps = PropsWithChildren<AudioHTMLAttributes<HTMLAudioElement>> &
InferDelegateProps<typeof MuxMediaDelegate>;
InferClassProps<typeof MuxAudioMedia>;
export const MuxAudio = forwardRef<HTMLAudioElement, MuxAudioProps>(({ children, ...props }, ref) => {
const mediaApi = useMediaInstance(MuxAudioApi);
const mediaApi = useMediaInstance(MuxAudioMedia);
const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);
return (
<audio ref={composedRef} {...mediaProps(mediaApi, MuxMediaDelegate, props)}>
<audio ref={composedRef} {...mediaProps(mediaApi, MuxAudioMedia, props)}>
{children}
</audio>
);
packages/react/src/media/mux-video/index.tsx
+5 -5
View File
@@ -1,7 +1,7 @@
'use client';
import type { InferDelegateProps } from '@videojs/core';
import { MuxMediaDelegate, MuxVideo as MuxVideoApi } from '@videojs/core/dom/media/mux';
import { MuxVideoMedia } from '@videojs/core/dom/media/mux';
import type { InferClassProps } from '@videojs/utils/types';
import type { PropsWithChildren, VideoHTMLAttributes } from 'react';
import { forwardRef } from 'react';
import { attachMediaElement } from '../../utils/attach-media-element';
@@ -10,15 +10,15 @@ import { useComposedRefs } from '../../utils/use-composed-refs';
import { useMediaInstance } from '../../utils/use-media-instance';
export type MuxVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>> &
InferDelegateProps<typeof MuxMediaDelegate>;
InferClassProps<typeof MuxVideoMedia>;
export const MuxVideo = forwardRef<HTMLVideoElement, MuxVideoProps>(function MuxVideo({ children, ...props }, ref) {
const mediaApi = useMediaInstance(MuxVideoApi);
const mediaApi = useMediaInstance(MuxVideoMedia);
const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);
return (
<video ref={composedRef} {...mediaProps(mediaApi, MuxMediaDelegate, props)}>
<video ref={composedRef} {...mediaProps(mediaApi, MuxVideoMedia, props)}>
{children}
</video>
);
packages/react/src/media/native-hls-video/index.tsx
+4 -4
View File
@@ -1,7 +1,7 @@
'use client';
import type { InferDelegateProps } from '@videojs/core';
import { NativeHlsMedia, NativeHlsMediaDelegate } from '@videojs/core/dom/media/native-hls';
import { NativeHlsMedia } from '@videojs/core/dom/media/native-hls';
import type { InferClassProps } from '@videojs/utils/types';
import type { PropsWithChildren, VideoHTMLAttributes } from 'react';
import { forwardRef } from 'react';
import { attachMediaElement } from '../../utils/attach-media-element';
@@ -10,7 +10,7 @@ import { useComposedRefs } from '../../utils/use-composed-refs';
import { useMediaInstance } from '../../utils/use-media-instance';
export type NativeHlsVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>> &
InferDelegateProps<typeof NativeHlsMediaDelegate>;
InferClassProps<typeof NativeHlsMedia>;
export const NativeHlsVideo = forwardRef<HTMLVideoElement, NativeHlsVideoProps>(function NativeHlsVideo(
{ children, ...props },
@@ -21,7 +21,7 @@ export const NativeHlsVideo = forwardRef<HTMLVideoElement, NativeHlsVideoProps>(
const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);
return (
<video ref={composedRef} {...mediaProps(mediaApi, NativeHlsMediaDelegate, props)}>
<video ref={composedRef} {...mediaProps(mediaApi, NativeHlsMedia, props)}>
{children}
</video>
);
packages/react/src/media/simple-hls-video/index.tsx
+1 -2
View File
@@ -1,7 +1,6 @@
'use client';
import { SimpleHlsMedia } from '@videojs/core/dom/media/simple-hls';
import { SpfMedia } from '@videojs/spf/dom';
import type { PropsWithChildren, VideoHTMLAttributes } from 'react';
import { forwardRef } from 'react';
import { attachMediaElement } from '../../utils/attach-media-element';
@@ -20,7 +19,7 @@ export const SimpleHlsVideo = forwardRef<HTMLVideoElement, SimpleHlsVideoProps>(
const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);
return (
<video ref={composedRef} {...mediaProps(mediaApi, SpfMedia, props)}>
<video ref={composedRef} {...mediaProps(mediaApi, SimpleHlsMedia, props)}>
{children}
</video>
);
packages/react/src/player/context.tsx
+2 -1
View File
@@ -1,6 +1,7 @@
'use client';
import type { Media, MediaContainer } from '@videojs/core/dom';
import type { Media } from '@videojs/core';
import type { MediaContainer } from '@videojs/core/dom';
import type { UnknownState, UnknownStore } from '@videojs/store';
import { useStore } from '@videojs/store/react';
import type { Dispatch, HTMLAttributes, ReactNode, PointerEvent as ReactPointerEvent, SetStateAction } from 'react';
packages/react/src/utils/media-props.ts
+2 -2
View File
@@ -1,4 +1,4 @@
import type { MediaApi } from '@videojs/core/dom';
import type { Media } from '@videojs/core';
type AnyClass = abstract new (...args: any[]) => any;
@@ -13,7 +13,7 @@ function getSettableProps(DelegateClass: AnyClass): Set<string> {
return props;
}
export function mediaProps(media: MediaApi, DelegateClass: AnyClass, props: Record<string, any>) {
export function mediaProps(media: Media, DelegateClass: AnyClass, props: Record<string, any>) {
const delegateKeys = getSettableProps(DelegateClass);
const rest: Record<string, any> = {};
packages/react/src/utils/use-media-instance.ts
+1 -1
View File
@@ -1,6 +1,6 @@
'use client';
import type { Media } from '@videojs/core/dom';
import type { Media } from '@videojs/core';
import { useState } from 'react';
import { useMediaAttach } from '../player/context';