Add controls prop

Now that SoundCloud uses filePlayer we can have a generic `controls` prop
The only quirk is that Vimeo controls are not configurable and will always display
Serves as a better solution for #59 and #11

Author: cookpete

README.md

@@ -77,6 +77,7 @@ Prop | Description | Default
 `url` | The url of a video or song to play
 `playing` | Set to `true` or `false` to pause or play the media | `false`
 `loop` | Set to `true` or `false` to loop the media | `false`
+`controls` | Set to `true` or `false` to display native player controls<br />*Note: Vimeo player controls are not configurable and will always display* | `false`
 `volume` | Sets the volume of the appropriate player | `0.8`
 `width` | Sets the width of the player | `640`
 `height` | Sets the height of the player | `360`
@@ -85,11 +86,11 @@ Prop | Description | Default
 
 #### Callback props
 
-Callback props take a function that gets fired on various player events
+Callback props take a function that gets fired on various player events:
 
 Prop | Description
 ---- | -----------
-`onProgress` | Callback containing `played` and `loaded` progress as a fraction<br/>eg `{ played: 0.12, loaded: 0.34 }`
+`onProgress` | Callback containing `played` and `loaded` progress as a fraction<br />eg `{ played: 0.12, loaded: 0.34 }`
 `onDuration` | Callback containing duration of the media, in seconds
 `onStart` | Called when media starts playing
 `onPlay` | Called when media starts or resumes playing after pausing or buffering
@@ -100,14 +101,14 @@ Prop | Description
 
 #### Config props
 
-These props allow you to override the parameters for the various players
+These props allow you to override the parameters for the various players:
 
 Prop | Description
 ---- | -----------
-`soundcloudConfig` | Configuration object for the SoundCloud player. Set `clientId` to your own SoundCloud app [client ID](https://soundcloud.com/you/apps)
-`vimeoConfig` | Configuration object for the Vimeo player. Set `iframeParams` to override the [default params](https://developer.vimeo.com/player/embedding#universal-parameters). Set `preload` for [preloading](#preloading)
-`youtubeConfig` | Configuration object for the YouTube player. Set `playerVars` to override the [default player vars](https://developers.google.com/youtube/player_parameters?playerVersion=HTML5). Set `preload` for [preloading](#preloading)
-`fileConfig` | Configuration object for the file player. Set `attributes` to apply [element attributes](https://developer.mozilla.org/en/docs/Web/HTML/Element/video#Attributes)
+`soundcloudConfig` | Configuration object for the SoundCloud player.<br />Set `clientId` to your own SoundCloud app [client ID](https://soundcloud.com/you/apps).
+`vimeoConfig` | Configuration object for the Vimeo player.<br />Set `iframeParams` to override the [default params](https://developer.vimeo.com/player/embedding#universal-parameters).<br />Set `preload` for [preloading](#preloading).
+`youtubeConfig` | Configuration object for the YouTube player.<br />Set `playerVars` to override the [default player vars](https://developers.google.com/youtube/player_parameters?playerVersion=HTML5).<br />Set `preload` for [preloading](#preloading).
+`fileConfig` | Configuration object for the file player.<br />Set `attributes` to apply [element attributes](https://developer.mozilla.org/en/docs/Web/HTML/Element/video#Attributes).
 
 ##### Preloading
 

src/players/FilePlayer.js

@@ -52,13 +52,21 @@ export default class FilePlayer extends Base {
     return this.player.buffered.end(0) / this.getDuration()
   }
   render () {
+    const { controls, fileConfig } = this.props
     const Media = AUDIO_EXTENSIONS.test(this.props.url) ? 'audio' : 'video'
-    const attributes = this.props.fileConfig.attributes
     const style = {
       width: '100%',
       height: '100%',
       display: this.props.url ? 'block' : 'none'
     }
-    return <Media ref='player' style={style} preload='auto' {...attributes} />
+    return (
+      <Media
+        ref='player'
+        style={style}
+        preload='auto'
+        controls={controls}
+        {...fileConfig.attributes}
+      />
+    )
   }
 }

src/players/SoundCloud.js

@@ -54,8 +54,9 @@ export default class SoundCloud extends FilePlayer {
     }, this.props.onError)
   }
   render () {
+    const { url, controls } = this.props
     const style = {
-      display: this.props.url ? 'block' : 'none',
+      display: url ? 'block' : 'none',
       height: '100%',
       backgroundImage: this.state.image ? 'url(' + this.state.image + ')' : null,
       backgroundSize: 'cover',
@@ -68,6 +69,7 @@ export default class SoundCloud extends FilePlayer {
           type='audio/mpeg'
           preload='auto'
           style={{ width: '100%', height: '100%' }}
+          controls={controls}
         />
       </div>
     )

src/players/YouTube.js

@@ -12,7 +12,6 @@ const PLAYER_ID = 'youtube-player'
 const BLANK_VIDEO_URL = 'https://www.youtube.com/watch?v=GlCmAC4MHek'
 const DEFAULT_PLAYER_VARS = {
   autoplay: 0,
-  controls: 0,
   playsinline: 1,
   showinfo: 0,
   rel: 0,
@@ -70,6 +69,7 @@ export default class YouTube extends Base {
         videoId: id,
         playerVars: {
           ...DEFAULT_PLAYER_VARS,
+          controls: this.props.controls ? 1 : 0,
           ...this.props.youtubeConfig.playerVars,
           start: parseStartTime(url),
           origin: window.location.origin

src/props.js

@@ -4,6 +4,7 @@ export const propTypes = {
   url: PropTypes.string,
   playing: PropTypes.bool,
   loop: PropTypes.bool,
+  controls: PropTypes.bool,
   volume: PropTypes.number,
   width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
   height: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
@@ -36,6 +37,7 @@ export const propTypes = {
 export const defaultProps = {
   playing: false,
   loop: false,
+  controls: false,
   volume: 0.8,
   width: 640,
   height: 360,