feat: add config prop support

Author: luwes

examples/react/src/App.tsx

@@ -202,6 +202,14 @@ class App extends Component {
               playbackRate={playbackRate}
               volume={volume}
               muted={muted}
+              config={{
+                youtube: {
+                  color: 'white'
+                },
+                vimeo: {
+                  color: 'ffffff'
+                }
+              }}
               onLoadStart={() => console.log('onLoadStart')}
               onReady={() => console.log('onReady')}
               onStart={(e) => console.log('onStart', e)}

package-lock.json

@@ -50,14 +50,14 @@
     "react-dom": "^17.0.2 || ^18"
   },
   "dependencies": {
-    "@mux/mux-player-react": "^2.7.0",
-    "cloudflare-video-element": "^1.1.6",
-    "dash-video-element": "^0.0.11",
+    "@mux/mux-player-react": "^3.3.1",
+    "cloudflare-video-element": "^1.3.1",
+    "dash-video-element": "^0.1.1",
     "deepmerge": "^4.0.0",
-    "hls-video-element": "^1.2.7",
-    "vimeo-video-element": "^1.1.6",
-    "wistia-video-element": "^1.1.7",
-    "youtube-video-element": "^1.1.6"
+    "hls-video-element": "^1.5.0",
+    "vimeo-video-element": "^1.4.1",
+    "wistia-video-element": "^1.3.1",
+    "youtube-video-element": "^1.5.1"
   },
   "devDependencies": {
     "@biomejs/biome": "1.8.2",

package.json

@@ -96,6 +96,7 @@ const Player: Player = React.forwardRef((props, ref) => {
       muted={props.muted}
       autoPlay={props.autoPlay}
       loop={props.loop}
+      config={props.config}
       onLoadStart={handleLoadStart}
       onPlay={handlePlay}
     >

src/Player.tsx

@@ -84,6 +84,7 @@ export const createReactPlayer = (players: PlayerEntry[], playerFallback: Player
           ref={ref}
           activePlayer={player.player ?? (player as unknown as PlayerEntry['player'])}
           style={wrapper ? { width: '100%', height: '100%' } : { ...style, width, height }}
+          config={config}
         />
       );
     };

src/ReactPlayer.tsx

@@ -19,7 +19,9 @@ const Players: PlayerEntry[] = [
     name: 'hls.js',
     canPlay: canPlay.hls,
     canEnablePIP: () => true,
-    player: lazy(() => import(/* webpackChunkName: 'reactPlayerHls' */ 'hls-video-element/react')),
+    player: lazy(
+      () => import(/* webpackChunkName: 'reactPlayerHls' */ 'hls-video-element/react')
+    ) as React.LazyExoticComponent<React.ComponentType<VideoElementProps>>,
   },
   {
     key: 'dash',
@@ -28,7 +30,7 @@ const Players: PlayerEntry[] = [
     canEnablePIP: () => true,
     player: lazy(
       () => import(/* webpackChunkName: 'reactPlayerDash' */ 'dash-video-element/react')
-    ),
+    ) as React.LazyExoticComponent<React.ComponentType<VideoElementProps>>,
   },
   {
     key: 'mux',
@@ -45,15 +47,15 @@ const Players: PlayerEntry[] = [
     canPlay: canPlay.youtube,
     player: lazy(
       () => import(/* webpackChunkName: 'reactPlayerYouTube' */ 'youtube-video-element/react')
-    ),
+    ) as React.LazyExoticComponent<React.ComponentType<VideoElementProps>>,
   },
   {
     key: 'vimeo',
     name: 'Vimeo',
     canPlay: canPlay.vimeo,
     player: lazy(
       () => import(/* webpackChunkName: 'reactPlayerVimeo' */ 'vimeo-video-element/react')
-    ),
+    ) as React.LazyExoticComponent<React.ComponentType<VideoElementProps>>,
   },
   {
     key: 'wistia',
@@ -62,7 +64,7 @@ const Players: PlayerEntry[] = [
     canEnablePIP: () => true,
     player: lazy(
       () => import(/* webpackChunkName: 'reactPlayerWistia' */ 'wistia-video-element/react')
-    ),
+    ) as React.LazyExoticComponent<React.ComponentType<VideoElementProps>>,
   },
   {
     key: 'html',

src/players.ts

@@ -15,6 +15,7 @@ export interface VideoElementProps
   extends React.DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement> {
   playbackRate?: number;
   volume?: number;
+  config?: Config;
 }
 
 export interface ReactPlayerProps extends PreviewProps, VideoElementProps {
@@ -38,11 +39,11 @@ export interface PreviewProps {
 }
 
 export interface Config {
-  html: Record<string, unknown>;
-  hls: Record<string, unknown>;
-  dash: Record<string, unknown>;
-  mux: Record<string, unknown>;
-  youtube: Record<string, unknown>;
-  vimeo: Record<string, unknown>;
-  wistia: Record<string, unknown>;
+  html?: Record<string, unknown>;
+  hls?: Record<string, unknown>;
+  dash?: Record<string, unknown>;
+  mux?: Record<string, unknown>;
+  youtube?: Record<string, unknown>;
+  vimeo?: Record<string, unknown>;
+  wistia?: Record<string, unknown>;
 }