First commit

cookpete · Aug 18, 2015 · a4deecf · a4deecf
commit a4deecf
Show file tree

Hide file tree

Showing 16 changed files with 673 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "stage": 0
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+npm-debug.log
+.DS_Store
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Dan Abramov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,71 @@
+react-player
+============
+
+A react component for playing media from YouTube, SoundCloud or Vimeo.
+
+### Usage
+
+```bash
+npm install --save git://github.com/cookpete/react-player
+```
+
+```js
+import React, { Component } from 'react'
+import ReactPlayer from 'react-player'
+
+class App extends Component {
+  render () {
+    <ReactPlayer
+      url='https://www.youtube.com/watch?v=ysz5S6PUM-U'
+      playing={true}
+      volume={0.8}
+    />
+  }
+}
+```
+
+See `App.js` for a full example
+
+### Demo
+
+The quickest way to see it in action is to checkout the repo and run the demo:
+
+```bash
+git clone http://github.com/cookpete/react-player
+cd react-player
+npm install
+npm start
+open http://localhost:3000
+```
+
+### Props
+
+Prop | Description
+---- | -----------
+url | The url of a video or song to play
+playing | Set to `true` or `false` to pause or play the media
+volume | Sets the volume of the appropriate player
+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
+onBuffer | Called when media starts buffering
+onEnded | Called when media finishes playing
+onError | Called when an error occurs whilst attempting to play media
+
+### Methods
+
+There is a static method  `ReactPlayer.canPlay(url)` to determine if a URL can be played by the media player. Note that this does *not* detect media that is unplayable due to streaming permissions etc. In that case, `onError` will occur after attemping to play.
+
+To seek to a certain part of the media, there is a `seekTo(fraction)` instance method that will seek to the appropriate place in the media. See `App.js` for an example of this using `refs`.
+
+### Linting
+
+This project uses [standard](https://github.com/feross/standard) code style.
+
+```bash
+npm run lint
+```
+
+### Thanks
+
+* Big thanks to [gaearon](https://github.com/gaearon) for his [react-hot-boilerplate](https://github.com/gaearon/react-hot-boilerplate), which this repo is roughly based on.
diff --git a/index.html b/index.html
@@ -0,0 +1,10 @@
+<html>
+  <head>
+    <title>ReactPlayer Demo</title>
+  </head>
+  <body>
+    <div id='app'>
+    </div>
+    <script src="/static/bundle.js"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,49 @@
+{
+  "name": "react-player",
+  "version": "0.0.1",
+  "description": "A react component for playing media from YouTube, SoundCloud or Vimeo",
+  "main": "src/ReactPlayer.js",
+  "scripts": {
+    "start": "node server.js",
+    "lint": "standard"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/CookPete/react-player.git"
+  },
+  "keywords": [
+    "react",
+    "media",
+    "player",
+    "video",
+    "audio",
+    "youtube",
+    "soundcloud",
+    "vimeo"
+  ],
+  "author": "Pete Cook <pete@cookpete.com> (http://github.com/cookpete)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/CookPete/react-player/issues"
+  },
+  "homepage": "https://github.com/CookPete/react-player",
+  "devDependencies": {
+    "babel-core": "^5.4.7",
+    "babel-eslint": "^4.0.10",
+    "babel-loader": "^5.1.2",
+    "react-hot-loader": "^1.2.7",
+    "standard": "^5.1.0",
+    "webpack": "^1.9.6",
+    "webpack-dev-server": "^1.8.2"
+  },
+  "dependencies": {
+    "load-script": "^1.0.0",
+    "react": "^0.13.0"
+  },
+  "standard": {
+    "parser": "babel-eslint",
+    "global": [
+      "fetch"
+    ]
+  }
+}
diff --git a/server.js b/server.js
@@ -0,0 +1,15 @@
+var webpack = require('webpack')
+var WebpackDevServer = require('webpack-dev-server')
+var config = require('./webpack.config')
+
+new WebpackDevServer(webpack(config), {
+  publicPath: config.output.publicPath,
+  hot: true,
+  historyApiFallback: true
+}).listen(3000, 'localhost', function (err, result) {
+  if (err) {
+    console.log(err)
+  }
+
+  console.log('Listening at localhost:3000')
+})
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,78 @@
+import React, { Component } from 'react'
+
+import ReactPlayer from './ReactPlayer'
+
+export default class App extends Component {
+  state = {
+    url: null,
+    playing: false,
+    volume: 0.8,
+    played: 0,
+    loaded: 0
+  }
+  load = url => {
+    this.setState({ url, playing: true })
+  }
+  playPause = () => {
+    this.setState({ playing: !this.state.playing })
+  }
+  stop = () => {
+    this.setState({ url: null, playing: false })
+  }
+  setVolume = e => {
+    this.setState({ volume: parseFloat(e.target.value) })
+  }
+  onSeekMouseDown = e => {
+    this.setState({ seeking: true })
+  }
+  onSeekChange = e => {
+    this.setState({ played: parseFloat(e.target.value) })
+  }
+  onSeekMouseUp = e => {
+    this.setState({ seeking: false })
+    this.refs.player.seekTo(parseFloat(e.target.value))
+  }
+  onProgress = state => {
+    // We only want to update time slider if we are not currently seeking
+    if (!this.state.seeking) {
+      this.setState(state)
+    }
+  }
+  render () {
+    return (
+      <div>
+        <h1>rmp</h1>
+        <ReactPlayer
+          ref='player'
+          url={this.state.url}
+          playing={this.state.playing}
+          volume={this.state.volume}
+          onProgress={this.onProgress}
+          onPlay={() => console.log('onPlay')}
+          onPause={() => console.log('onPause')}
+          onBuffer={() => console.log('onBuffer')}
+          onEnded={() => console.log('onEnded')}
+        />
+        <button onClick={this.stop}>Stop</button>
+        <button onClick={this.playPause}>{this.state.playing ? 'Pause' : 'Play'}</button>
+        <button onClick={this.load.bind(this, 'https://www.youtube.com/watch?v=oUFJJNQGwhk')}>Youtube video</button>
+        <button onClick={this.load.bind(this, 'https://soundcloud.com/miami-nights-1984/accelerated')}>Soundcloud song</button>
+        <button onClick={this.load.bind(this, 'https://vimeo.com/90509568')}>Vimeo video</button>
+        <input
+          type='range' min={0} max={1} step='any'
+          value={this.state.played}
+          onMouseDown={this.onSeekMouseDown}
+          onChange={this.onSeekChange}
+          onMouseUp={this.onSeekMouseUp}
+        />
+        <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} />
+      </div>
+    )
+  }
+}
diff --git a/src/ReactPlayer.js b/src/ReactPlayer.js
@@ -0,0 +1,58 @@
+import React, { Component, PropTypes } from 'react'
+
+import players from './players'
+
+export default class MediaPlayer extends Component {
+  static propTypes = {
+    url: PropTypes.string,
+    playing: PropTypes.bool,
+    volume: PropTypes.number,
+    width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
+    height: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
+    onPlay: PropTypes.func,
+    onPause: PropTypes.func,
+    onBuffer: PropTypes.func,
+    onEnded: PropTypes.func,
+    onError: PropTypes.func
+  }
+  static defaultProps = {
+    volume: 0.8,
+    width: 640,
+    height: 360,
+    onPlay: function () {}, // TODO: Empty func var in react?
+    onPause: function () {},
+    onBuffer: function () {},
+    onEnded: function () {}
+  }
+  static canPlay (url) {
+    return players.some(player => player.canPlay(url))
+  }
+  state = {
+    Player: null
+  }
+  componentWillReceiveProps (nextProps) {
+    if (this.props.url !== nextProps.url) {
+      this.setState({
+        Player: players.find(Player => Player.canPlay(nextProps.url))
+      })
+    }
+  }
+  seekTo = fraction => {
+    let player = this.refs.player
+    if (player) {
+      player.seekTo(fraction)
+    }
+  }
+  render () {
+    let Player = this.state.Player
+    let style = {
+      width: this.props.width,
+      height: this.props.height
+    }
+    return (
+      <div style={style}>
+        { Player && <Player ref='player' {...this.props} /> }
+      </div>
+    )
+  }
+}
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,4 @@
+import React from 'react'
+import App from './App'
+
+React.render(<App />, document.getElementById('app'))
diff --git a/src/players/Base.js b/src/players/Base.js
@@ -0,0 +1,57 @@
+import { Component, PropTypes } from 'react'
+
+const UPDATE_FREQUENCY = 500
+
+export default class Base extends Component {
+  static propTypes = {
+    url: PropTypes.string,
+    playing: PropTypes.bool,
+    volume: PropTypes.number,
+    width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
+    height: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
+    onPlay: PropTypes.func,
+    onPause: PropTypes.func,
+    onBuffer: PropTypes.func,
+    onEnded: PropTypes.func,
+    onError: PropTypes.func
+  }
+  static defaultProps = {
+    onProgress: function () {}
+  }
+  componentDidMount () {
+    this.play(this.props.url)
+    this.update()
+  }
+  componentWillUnmount () {
+    this.stop()
+    clearTimeout(this.updateTimeout)
+  }
+  componentWillReceiveProps (nextProps) {
+    // Invoke player methods based on incoming props
+    if (this.props.url !== nextProps.url) {
+      this.play(nextProps.url)
+      this.onProgress({ played: 0, loaded: 0 })
+    } else if (!this.props.playing && nextProps.playing) {
+      this.play()
+    } else if (this.props.playing && !nextProps.playing) {
+      this.pause()
+    } else if (this.props.volume !== nextProps.volume) {
+      this.setVolume(nextProps.volume)
+    }
+  }
+  update = () => {
+    let progress = {}
+    let loaded = this.getFractionLoaded()
+    let played = this.getFractionPlayed()
+    if (!this.prevLoaded || loaded !== this.prevLoaded) {
+      progress.loaded = this.prevLoaded = loaded
+    }
+    if (!this.prevPlayed || played !== this.prevPlayed) {
+      progress.played = this.prevPlayed = played
+    }
+    if (progress.loaded || progress.played) {
+      this.props.onProgress(progress)
+    }
+    this.updateTimeout = setTimeout(this.update, UPDATE_FREQUENCY)
+  }
+}