pass configuration options to players via props

Author: takempf

README.md

@@ -48,6 +48,9 @@ playing | Set to `true` or `false` to pause or play the media
 volume | Sets the volume of the appropriate player
 width | Sets the width of the player
 height | Sets the height of the player
+soundcloudConfig | An object containing configuration for the SoundCloud player. Includes `clientId`, which can be used to override the default `client_id`
+vimeoConfig | An object containing configuration for the Vimeo player. Includes `iframeParams`, which maps to the [parameters accepted by the Vimeo iframe player](https://developer.vimeo.com/player/embedding#universal-parameters)
+youtubeConfig | An object containing configuration for the YouTube player. Includes `playerVars`, which maps to the [parameters accepted by the YouTube iframe player](https://developers.google.com/youtube/player_parameters?playerVersion=HTML5)
 onProgress | Callback containing `played` and `loaded` progress as a fraction eg `{ played: 0.12, loaded: 0.34 }`
 onPlay | Called when media starts or resumes playing after pausing or buffering
 onPause | Called when media is paused

package.json

@@ -53,7 +53,8 @@
   },
   "dependencies": {
     "array.prototype.find": "^1.0.0",
-    "load-script": "^1.0.0"
+    "load-script": "^1.0.0",
+    "query-string": "^3.0.0"
   },
   "standard": {
     "parser": "babel-eslint",

src/App.js

@@ -38,6 +38,16 @@ export default class App extends Component {
       this.setState(state)
     }
   }
+  onConfigSubmit = () => {
+    let config
+    try {
+      config = JSON.parse(this.refs.config.value)
+    } catch (error) {
+      config = {}
+      console.error('Error setting config:', error)
+    }
+    this.setState(config)
+  }
   render () {
     return (
       <div>
@@ -48,6 +58,9 @@ export default class App extends Component {
           playing={this.state.playing}
           volume={this.state.volume}
           onProgress={this.onProgress}
+          soundcloudConfig={this.state.soundcloudConfig}
+          vimeoConfig={this.state.vimeoConfig}
+          youtubeConfig={this.state.youtubeConfig}
           onPlay={() => console.log('onPlay')}
           onPause={() => console.log('onPause')}
           onBuffer={() => console.log('onBuffer')}
@@ -61,20 +74,26 @@ export default class App extends Component {
         <button onClick={this.load.bind(this, 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')}>MP4 video</button>
         <button onClick={this.load.bind(this, 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv')}>OGV video</button>
         <button onClick={this.load.bind(this, 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm')}>WEBM video</button>
-        <input
+        <input ref='url' placeholder='url' />
+        <button onClick={() => { this.load(this.refs.url.value) }}>Load URL</button>
+        <hr />
+        seek: <input
           type='range' min={0} max={1} step='any'
           value={this.state.played}
           onMouseDown={this.onSeekMouseDown}
           onChange={this.onSeekChange}
           onMouseUp={this.onSeekMouseUp}
         />
-        <input
+        played: <progress max={1} value={this.state.played} />
+        loaded: <progress max={1} value={this.state.loaded} />
+        volume: <input
           type='range' min={0} max={1} step='any'
           value={this.state.volume}
           onChange={this.setVolume}
         />
-        played: <progress max={1} value={this.state.played} />
-        loaded: <progress max={1} value={this.state.loaded} />
+        <hr />
+        <textarea ref='config' placeholder='Config JSON' style={{width: '200px', height: '200px'}}></textarea>
+        <button onClick={this.onConfigSubmit}>Update Config</button>
       </div>
     )
   }

src/players/SoundCloud.js

@@ -4,14 +4,19 @@ import loadScript from 'load-script'
 import propTypes from '../propTypes'
 import Base from './Base'
 
-const CLIENT_ID = 'e8b6f84fbcad14c301ca1355cae1dea2'
+const DEFAULT_CLIENT_ID = 'e8b6f84fbcad14c301ca1355cae1dea2'
 const SDK_URL = '//connect.soundcloud.com/sdk-2.0.0.js'
 const SDK_GLOBAL = 'SC'
 const RESOLVE_URL = '//api.soundcloud.com/resolve.json'
 const MATCH_URL = /^https?:\/\/(soundcloud.com|snd.sc)\/([a-z0-9-]+\/[a-z0-9-]+)$/
 
 export default class SoundCloud extends Base {
   static propTypes = propTypes
+  static defaultProps = {
+    soundcloudConfig: {
+      clientId: DEFAULT_CLIENT_ID
+    }
+  }
   static canPlay (url) {
     return MATCH_URL.test(url)
   }
@@ -30,14 +35,14 @@ export default class SoundCloud extends Base {
         if (err) {
           reject(err)
         } else {
-          window[SDK_GLOBAL].initialize({ client_id: CLIENT_ID })
+          window[SDK_GLOBAL].initialize({ client_id: this.props.soundcloudConfig.clientId })
           resolve(window[SDK_GLOBAL])
         }
       })
     })
   }
   getSongData (url) {
-    return fetch(RESOLVE_URL + '?url=' + url + '&client_id=' + CLIENT_ID)
+    return fetch(RESOLVE_URL + '?url=' + url + '&client_id=' + this.props.soundcloudConfig.clientId)
       .then(response => response.json())
   }
   play (url) {

src/players/Vimeo.js

@@ -1,14 +1,26 @@
 import React from 'react'
+import queryString from 'query-string'
 
 import propTypes from '../propTypes'
 import Base from './Base'
 
 const IFRAME_SRC = 'https://player.vimeo.com/video/'
 const MATCH_URL = /https?:\/\/(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^\/]*)\/videos\/|album\/(\d+)\/video\/|video\/|)(\d+)(?:$|\/|\?)/
 const MATCH_MESSAGE_ORIGIN = /^https?:\/\/player.vimeo.com/
+const DEFAULT_IFRAME_PARAMS = {
+  api: 1,
+  autoplay: 1,
+  badge: 0,
+  byline: 0,
+  portrait: 0,
+  title: 0
+}
 
 export default class Vimeo extends Base {
   static propTypes = propTypes
+  static defaultProps = {
+    vimeoConfig: {}
+  }
   static canPlay (url) {
     return MATCH_URL.test(url)
   }
@@ -73,10 +85,11 @@ export default class Vimeo extends Base {
       width: '100%',
       height: '100%'
     }
+    const iframeParams = { ...DEFAULT_IFRAME_PARAMS, ...this.props.vimeoConfig.iframeParams }
     return (
       <iframe
         ref='iframe'
-        src={IFRAME_SRC + id + '?api=1&autoplay=1&badge=0&byline=0&portrait=0&title=0'}
+        src={IFRAME_SRC + id + '?' + queryString.stringify(iframeParams)}
         style={style}
         frameBorder='0'
       />

src/players/YouTube.js

@@ -8,9 +8,17 @@ const SDK_URL = '//www.youtube.com/iframe_api'
 const SDK_GLOBAL = 'YT'
 const MATCH_URL = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/
 const PLAYER_ID = 'youtube-player'
+const DEFAULT_PLAYER_VARS = {
+  autoplay: 1,
+  controls: 0,
+  showinfo: 0
+}
 
 export default class YouTube extends Base {
   static propTypes = propTypes
+  static defaultProps = {
+    youtubeConfig: {}
+  }
   static canPlay (url) {
     return MATCH_URL.test(url)
   }
@@ -45,7 +53,7 @@ export default class YouTube extends Base {
         width: '100%',
         height: '100%',
         videoId: id,
-        playerVars: { autoplay: 1, controls: 0, showinfo: 0 },
+        playerVars: { ...DEFAULT_PLAYER_VARS, ...this.props.youtubeConfig.playerVars },
         events: {
           onStateChange: this.onStateChange,
           onError: this.props.onError

src/propTypes.js

@@ -6,6 +6,15 @@ export default {
   volume: PropTypes.number,
   width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
   height: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
+  soundcloudConfig: PropTypes.shape({
+    clientId: PropTypes.string
+  }),
+  youtubeConfig: PropTypes.shape({
+    playerVars: PropTypes.object
+  }),
+  vimeoConfig: PropTypes.shape({
+    iframeParams: PropTypes.object
+  }),
   onPlay: PropTypes.func,
   onPause: PropTypes.func,
   onBuffer: PropTypes.func,