FEAT: customize fallback through props for lazy loading (#1133)

* FEAT: customize fallback through props for lazy loading

* README.md updated

* linter issues fixed

* Partial revert to keep changes minimal

Co-authored-by: Pete Cook <pete@cookpete.com>

README.md

@@ -93,6 +93,7 @@ Prop | Description | Default
 `playsinline` | Applies the `playsinline` attribute where supported | `false`
 `pip` | Set to `true` or `false` to enable or disable [picture-in-picture mode](https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture)<br/>&nbsp; ◦ &nbsp;Only available when playing file URLs in [certain browsers](https://caniuse.com/#feat=picture-in-picture) | `false`
 `stopOnUnmount` | If you are using `pip` you may want to use `stopOnUnmount={false}` to continue playing in picture-in-picture mode even after ReactPlayer unmounts | `true`
+`fallback` | Element or component to use as a fallback if you are using lazy loading | `null`
 `wrapper` | Element or component to use as the container element | `div`
 `playIcon` | Element or component to use as the play icon in light mode
 `config` | Override options for the various players, see [config prop](#config-prop)

index.d.ts

@@ -98,6 +98,7 @@ export interface ReactPlayerProps {
   pip?: boolean;
   stopOnUnmount?: boolean;
   light?: boolean | string;
+  fallback?: React.ReactNode;
   wrapper?: any;
   config?: Config;
   onReady?(player: ReactPlayer): void;

src/ReactPlayer.js

@@ -162,12 +162,12 @@ export const createReactPlayer = (players, fallback) => {
     }
 
     render () {
-      const { url, style, width, height, wrapper: Wrapper } = this.props
+      const { url, style, width, height, fallback, wrapper: Wrapper } = this.props
       const { showPreview } = this.state
       const attributes = this.getAttributes(url)
       return (
         <Wrapper ref={this.references.wrapper} style={{ ...style, width, height }} {...attributes}>
-          <UniversalSuspense fallback={null}>
+          <UniversalSuspense fallback={fallback}>
             {showPreview
               ? this.renderPreview(url)
               : this.renderActivePlayer(url)}

src/props.js

@@ -19,6 +19,7 @@ export const propTypes = {
   stopOnUnmount: bool,
   light: oneOfType([bool, string]),
   playIcon: node,
+  fallback: node,
   wrapper: oneOfType([
     string,
     func,
@@ -106,6 +107,7 @@ export const defaultProps = {
   pip: false,
   stopOnUnmount: true,
   light: false,
+  fallback: null,
   wrapper: 'div',
   config: {
     soundcloud: {