Add playIcon prop

Fixes cookpete/react-player#730

README.md

@@ -77,6 +77,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`
 `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)
 
 #### Callback props

src/Preview.js

@@ -41,7 +41,7 @@ export default class Preview extends Component {
   }
 
   render () {
-    const { onClick } = this.props
+    const { onClick, playIcon } = this.props
     const { image } = this.state
     const flexCenter = {
       display: 'flex',
@@ -72,11 +72,14 @@ export default class Preview extends Component {
         marginLeft: '7px'
       }
     }
+    const defaultPlayIcon = (
+      <div style={styles.shadow} className='react-player__shadow'>
+        <div style={styles.playIcon} className='react-player__play-icon' />
+      </div>
+    )
     return (
       <div style={styles.preview} className='react-player__preview' onClick={onClick}>
-        <div style={styles.shadow} className='react-player__shadow'>
-          <div style={styles.playIcon} className='react-player__play-icon' />
-        </div>
+        {playIcon || defaultPlayIcon}
       </div>
     )
   }

src/ReactPlayer.js

@@ -147,14 +147,14 @@ export default class ReactPlayer extends Component {
   }
 
   render () {
-    const { url, controls, style, width, height, light, wrapper: Wrapper } = this.props
+    const { url, controls, style, width, height, light, playIcon, wrapper: Wrapper } = this.props
     const showPreview = this.state.showPreview && url
     const otherProps = omit(this.props, SUPPORTED_PROPS, DEPRECATED_CONFIG_PROPS)
     const activePlayer = this.getActivePlayer(url)
     const renderedActivePlayer = this.renderActivePlayer(url, activePlayer)
     const preloadPlayers = renderPreloadPlayers(url, controls, this.config)
     const players = [renderedActivePlayer, ...preloadPlayers].sort(this.sortPlayers)
-    const preview = <Preview url={url} light={light} onClick={this.handleClickPreview} />
+    const preview = <Preview url={url} light={light} playIcon={playIcon} onClick={this.handleClickPreview} />
     return (
       <Wrapper ref={this.wrapperRef} style={{ ...style, width, height }} {...otherProps}>
         {showPreview ? preview : players}

src/props.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 
-const { string, bool, number, array, oneOfType, shape, object, func } = PropTypes
+const { string, bool, number, array, oneOfType, shape, object, func, node } = PropTypes
 
 export const propTypes = {
   url: oneOfType([string, array, object]),
@@ -17,6 +17,7 @@ export const propTypes = {
   playsinline: bool,
   pip: bool,
   light: oneOfType([bool, string]),
+  playIcon: node,
   wrapper: oneOfType([
     string,
     func,