From ae4ee5d0356219854c396d280b08f8a1547f4b28 Mon Sep 17 00:00:00 2001
From: markveronich <markveronich@gmail.com>
Date: Sat, 26 Oct 2019 14:24:45 +0100
Subject: [PATCH] Add playIcon prop

Fixes https://github.com/CookPete/react-player/issues/730
---
 README.md          |  1 +
 src/Preview.js     | 11 +++++++----
 src/ReactPlayer.js |  4 ++--
 src/props.js       |  3 ++-
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 727845f..042701d 100644
--- a/README.md
+++ b/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
diff --git a/src/Preview.js b/src/Preview.js
index b65829e..ec7f29a 100644
--- a/src/Preview.js
+++ b/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>
     )
   }
diff --git a/src/ReactPlayer.js b/src/ReactPlayer.js
index fac5ac8..b912ca4 100644
--- a/src/ReactPlayer.js
+++ b/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}
diff --git a/src/props.js b/src/props.js
index 71ed8b1..32ed1a0 100644
--- a/src/props.js
+++ b/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,