Add onStart prop

Resolves cookpete/react-player#61

README.md

@@ -90,6 +90,7 @@ Prop | Description
 ---- | -----------
 `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
 `onPause` | Called when media is paused
 `onBuffer` | Called when media starts buffering

src/demo/App.js

@@ -92,6 +92,7 @@ export default class App extends Component {
             soundcloudConfig={soundcloudConfig}
             vimeoConfig={vimeoConfig}
             youtubeConfig={youtubeConfig}
+            onStart={() => console.log('onStart')}
             onPlay={() => this.setState({ playing: true })}
             onPause={() => this.setState({ playing: false })}
             onBuffer={() => console.log('onBuffer')}

src/players/Base.js

@@ -7,6 +7,8 @@ const SEEK_ON_READY_EXPIRY = 5000
 export default class Base extends Component {
   static propTypes = propTypes
   static defaultProps = defaultProps
+  isReady = false
+  startOnPlay = true
   componentDidMount () {
     if (this.props.url) {
       this.load(this.props.url)
@@ -18,8 +20,9 @@ export default class Base extends Component {
   componentWillReceiveProps (nextProps) {
     // Invoke player methods based on incoming props
     if (this.props.url !== nextProps.url && nextProps.url) {
-      this.load(nextProps.url)
       this.seekOnReady = null
+      this.startOnPlay = true
+      this.load(nextProps.url)
     } else if (this.props.url && !nextProps.url) {
       this.stop()
       clearTimeout(this.updateTimeout)
@@ -34,7 +37,6 @@ export default class Base extends Component {
   shouldComponentUpdate (nextProps) {
     return this.props.url !== nextProps.url
   }
-  isReady = false
   seekTo (fraction) {
     // When seeking before player is ready, store value and seek later
     if (!this.isReady && fraction !== 0) {
@@ -43,6 +45,10 @@ export default class Base extends Component {
     }
   }
   onPlay = () => {
+    if (this.startOnPlay) {
+      this.props.onStart()
+      this.startOnPlay = false
+    }
     this.props.onPlay()
     this.setVolume(this.props.volume)
     if (this.seekOnReady) {

src/props.js

@@ -19,6 +19,7 @@ export const propTypes = {
     iframeParams: PropTypes.object,
     preload: PropTypes.bool
   }),
+  onStart: PropTypes.func,
   onPlay: PropTypes.func,
   onPause: PropTypes.func,
   onBuffer: PropTypes.func,
@@ -45,6 +46,7 @@ export const defaultProps = {
     iframeParams: {},
     preload: false
   },
+  onStart: function () {},
   onPlay: function () {},
   onPause: function () {},
   onBuffer: function () {},

test/karma/ReactPlayer.js

@@ -27,8 +27,12 @@ describe('ReactPlayer', () => {
     document.body.removeChild(div)
   })
 
-  const testPlay = (url, onPlay) => {
-    render(<ReactPlayer url={url} playing onPlay={onPlay} />, div)
+  const testStart = (url, done) => {
+    render(<ReactPlayer url={url} playing onStart={done} />, div)
+  }
+
+  const testPlay = (url, done) => {
+    render(<ReactPlayer url={url} playing onPlay={done} />, div)
   }
 
   const testPause = (url, done) => {
@@ -52,6 +56,7 @@ describe('ReactPlayer', () => {
   }
 
   describe('YouTube', () => {
+    it('fires onStart', (done) => testStart(TEST_YOUTUBE_URL, done))
     it('fires onPlay', (done) => testPlay(TEST_YOUTUBE_URL, done))
     it('fires onPause', (done) => testPause(TEST_YOUTUBE_URL, done))
     it('fires onDuration', (done) => testDuration(TEST_YOUTUBE_URL, done))
@@ -66,19 +71,22 @@ describe('ReactPlayer', () => {
   })
 
   describe('SoundCloud', () => {
+    it('fires onStart', (done) => testStart(TEST_SOUNDCLOUD_URL, done))
     it('fires onPlay', (done) => testPlay(TEST_SOUNDCLOUD_URL, done))
     it('fires onPause', (done) => testPause(TEST_SOUNDCLOUD_URL, done))
     it('fires onDuration', (done) => testDuration(TEST_SOUNDCLOUD_URL, done))
     it('fires onError', (done) => testError(TEST_SOUNDCLOUD_ERROR, done))
   })
 
   describe('Vimeo', () => {
+    it('fires onStart', (done) => testStart(TEST_VIMEO_URL, done))
     it('fires onPlay', (done) => testPlay(TEST_VIMEO_URL, done))
     it('fires onPause', (done) => testPause(TEST_VIMEO_URL, done))
     it('fires onDuration', (done) => testDuration(TEST_VIMEO_URL, done))
   })
 
   describe('FilePlayer', () => {
+    it('fires onStart', (done) => testStart(TEST_FILE_URL, done))
     it('fires onPlay', (done) => testPlay(TEST_FILE_URL, done))
     it('fires onPause', (done) => testPause(TEST_FILE_URL, done))
     it('fires onDuration', (done) => testDuration(TEST_FILE_URL, done))