From 47a84824f7a70653eb78f33df8fe2e71d1d221de Mon Sep 17 00:00:00 2001
From: Wesley Luyten <me@wesleyluyten.com>
Date: Fri, 19 Apr 2024 13:08:17 -0500
Subject: [PATCH] docs: add custom player demo

---
 README.md | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 70a02ed..c8ca2e2 100644
--- a/README.md
+++ b/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,19 +254,21 @@ 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
+// player.tsx
+'use client';
+
 import ReactPlayer from 'react-player';
 
-export function ReactPlayerAsVideo(props) {
+export default function Player(props) {
   let { asset, src, poster, blurDataURL, ...rest } = props;
   let config = { file: { attributes: { poster } } };