docs: add custom player demo

README.md

@@ -242,7 +242,7 @@ export default function Page() {
 ```
 
 
-### Custom Player
+### Custom Player ([Demo](https://next-video-demo.vercel.app/custom-player))
 
 You can customize the player by passing a custom player component to the `as` prop.  
 The custom player component accepts the following props:
@@ -254,23 +254,31 @@ The custom player component accepts the following props:
 
 ```tsx
 import Video from 'next-video';
-import { ReactPlayerAsVideo } from './player';
+import ReactPlayer from './player';
 import awesomeVideo from '/videos/awesome-video.mp4';
 
 export default function Page() {
-  return <Video as={ReactPlayerAsVideo} src={awesomeVideo} />;
+  return <Video as={ReactPlayer} src={awesomeVideo} />;
 }
 ```
 
 ```tsx
-// player.js
-import ReactPlayer from 'react-player';
+// player.tsx
+'use client';
 
-export function ReactPlayerAsVideo(props) {
-  let { asset, src, poster, blurDataURL, ...rest } = props;
+import ReactPlayer, { ReactPlayerProps } from 'react-player';
+
+export default function Player(props: ReactPlayerProps) {
+  let { asset, src, poster, blurDataURL, thumbnailTime, ...rest } = props;
   let config = { file: { attributes: { poster } } };
 
-  return <ReactPlayer url={src} config={config} {...rest} />;
+  return <ReactPlayer
+    url={src}
+    config={config}
+    width="100%"
+    height="100%"
+    {...rest}
+  />;
 }
 ```
 

examples/default-provider/app/custom-player/player.tsx

@@ -1,10 +1,9 @@
 'use client';
 
-import ReactPlayer from 'react-player';
+import ReactPlayer, { ReactPlayerProps } from 'react-player';
 
-export default function Player(props) {
+export default function Player(props: ReactPlayerProps) {
   let { asset, src, poster, blurDataURL, thumbnailTime, ...rest } = props;
-
   let config = { file: { attributes: { poster } } };
 
   return <ReactPlayer