Skip to content

Commit

Permalink
pass configuration options to players via props
Browse files Browse the repository at this point in the history
  • Loading branch information
Fauntleroy committed Oct 23, 2015
1 parent 4eab6bd commit f1395d1
Show file tree
Hide file tree
Showing 7 changed files with 68 additions and 10 deletions.
3 changes: 3 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
27 changes: 23 additions & 4 deletions src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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')}
Expand All @@ -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>
)
}
Expand Down
11 changes: 8 additions & 3 deletions src/players/SoundCloud.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}
Expand All @@ -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) {
Expand Down
15 changes: 14 additions & 1 deletion src/players/Vimeo.js
Original file line number Diff line number Diff line change
@@ -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)
}
Expand Down Expand Up @@ -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'
/>
Expand Down
10 changes: 9 additions & 1 deletion src/players/YouTube.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}
Expand Down Expand Up @@ -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
Expand Down
9 changes: 9 additions & 0 deletions src/propTypes.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down

0 comments on commit f1395d1

Please sign in to comment.