fix: player types & update readme

README.md

@@ -266,9 +266,10 @@ export default function Page() {
 // player.tsx
 'use client';
 
-import ReactPlayer, { ReactPlayerProps } from 'react-player';
+import type { PlayerProps } from 'next-video';
+import ReactPlayer from 'react-player';
 
-export default function Player(props: ReactPlayerProps) {
+export default function Player(props: PlayerProps) {
   let { asset, src, poster, blurDataURL, thumbnailTime, ...rest } = props;
   let config = { file: { attributes: { poster } } };
 

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

@@ -11,11 +11,7 @@ export default function Page() {
   return (
     <>
       <section>
-        <Video
-          as={ReactPlayer}
-          src={getStarted}
-          style={{ aspectRatio: '16 / 9' }}
-        />
+        <Video as={ReactPlayer} src={getStarted} />
       </section>
     </>
   );

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

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

src/components/players/background-player.tsx

@@ -12,17 +12,8 @@ import { svgBlurImage } from '../utils.js';
 export type BackgroundPlayerProps = Omit<DefaultPlayerProps, 'src'>;
 
 export const BackgroundPlayer = forwardRef((allProps: BackgroundPlayerProps, forwardedRef: any) => {
-  let {
-    style,
-    children,
-    asset,
-    controls,
-    poster,
-    blurDataURL,
-    onPlaying,
-    onLoadStart,
-    ...rest
-  } = allProps;
+  let { style, children, asset, controls, poster, blurDataURL, onPlaying, onLoadStart, ...rest } =
+    allProps;
 
   const slottedPoster = Children.toArray(children).find((child) => {
     return typeof child === 'object' && 'type' in child && child.props.slot === 'poster';
@@ -75,7 +66,7 @@ export const BackgroundPlayer = forwardRef((allProps: BackgroundPlayerProps, for
   }
 
   // Remove props that are not supported by MuxVideo.
-  delete props.thumbnailTime
+  delete props.thumbnailTime;
 
   const [posterHidden, setPosterHidden] = useState(false);
 

src/components/types.ts

@@ -120,9 +120,19 @@ export interface PlayerProps {
    */
   controls?: boolean;
 
+  /**
+   * The poster image for the video.
+   */
+  poster?: StaticImageData | string;
+
   /**
    * Set a manual data URL to be used as a placeholder image before the poster image successfully loads.
    * For imported videos this will be automatically generated.
    */
   blurDataURL?: string;
+
+  /**
+   * The thumbnail time in seconds to use for the video poster image.
+   */
+  thumbnailTime?: number;
 }

src/components/video.tsx

@@ -4,12 +4,19 @@ import { forwardRef, useState } from 'react';
 import { DefaultPlayer } from './players/default-player.js';
 import { Alert } from './alert.js';
 import { createVideoRequest, defaultLoader } from './video-loader.js';
-import { config, camelCase, toSymlinkPath, usePolling, isReactComponent, getUrlExtension } from './utils.js';
 import * as transformers from '../providers/transformers.js';
+import {
+  config,
+  camelCase,
+  toSymlinkPath,
+  usePolling,
+  isReactComponent,
+  getUrlExtension,
+} from './utils.js';
 
 import type { DefaultPlayerProps } from './players/default-player.js';
 import type { Asset } from '../assets.js';
-import type { VideoLoaderProps, VideoProps, VideoPropsInternal } from './types.js';
+import type { VideoLoaderProps, VideoProps, VideoPropsInternal, PlayerProps } from './types.js';
 
 const NextVideo = forwardRef((props: VideoProps, forwardedRef) => {
   // Keep in component so we can emulate the DEV_MODE.
@@ -52,22 +59,16 @@ const NextVideo = forwardRef((props: VideoProps, forwardedRef) => {
 
   usePolling(request, needsPolling ? 1000 : null);
 
-  const videoProps = getVideoProps(
-    { ...props, transform, src } as VideoPropsInternal,
-    { asset }
-  );
+  const videoProps = getVideoProps({ ...props, transform, src } as VideoPropsInternal, { asset });
 
   if (!isReactComponent(VideoPlayer)) {
     console.warn('The `as` property is not a valid component:', VideoPlayer);
   }
 
   return (
-    <div
-      className={`${className ? `${className} ` : ''}next-video-container`}
-      style={style}
-    >
+    <div className={`${className ? `${className} ` : ''}next-video-container`} style={style}>
       <style>{
-        /* css */`
+        /* css */ `
         .next-video-container {
           position: relative;
           width: 100%;
@@ -102,10 +103,9 @@ const NextVideo = forwardRef((props: VideoProps, forwardedRef) => {
         {...videoProps}
       ></VideoPlayer>
 
-      {DEV_MODE && <Alert
-        hidden={Boolean(playing || !status || status === 'ready')}
-        status={status}
-      />}
+      {DEV_MODE && (
+        <Alert hidden={Boolean(playing || !status || status === 'ready')} status={status} />
+      )}
     </div>
   );
 });
@@ -130,7 +130,7 @@ export function getVideoProps(allProps: VideoPropsInternal, state: { asset?: Ass
     src: src as string | undefined,
     controls,
     blurDataURL,
-    ...rest
+    ...rest,
   };
 
   // Handle StaticImageData which are image imports that resolve to an object.
@@ -171,8 +171,4 @@ function defaultTransformer(asset: Asset, props: Record<string, any>) {
 
 export default NextVideo;
 
-export type {
-  VideoLoaderProps,
-  VideoProps,
-  DefaultPlayerProps,
-};
+export type { VideoLoaderProps, VideoProps, DefaultPlayerProps, PlayerProps };