Implemented onBufferEnd cb prop for FilePlayer, YouTube and Facebook

README.md

@@ -92,6 +92,7 @@ Prop | Description
 `onDuration` | Callback containing duration of the media, in seconds
 `onPause` | Called when media is paused
 `onBuffer` | Called when media starts buffering
+`onBufferEnd` | Called when media has finished buffering (works for file paths, YouTube and Facebook players)
 `onSeek` | Called when media seeks with `seconds` parameter
 `onEnded` | Called when media finishes playing<br />&nbsp; ◦ &nbsp;Does not fire when `loop` is set to `true`
 `onError` | Called when an error occurs whilst attempting to play media

src/players/Facebook.js

@@ -39,6 +39,7 @@ export class Facebook extends Component {
           this.player.subscribe('paused', this.props.onPause)
           this.player.subscribe('finishedPlaying', this.props.onEnded)
           this.player.subscribe('startedBuffering', this.props.onBuffer)
+          this.player.subscribe('finishedBuffering', this.props.onBufferEnd)
           this.player.subscribe('error', this.props.onError)
           if (!this.props.muted) {
             // Player is muted by default

src/players/FilePlayer.js

@@ -66,9 +66,11 @@ export class FilePlayer extends Component {
     this.removeListeners()
   }
   addListeners () {
-    const { onReady, onPlay, onPause, onEnded, onError, playsinline, onEnablePIP } = this.props
+    const { onReady, onPlay, onBuffer, onBufferEnd, onPause, onEnded, onError, playsinline, onEnablePIP } = this.props
     this.player.addEventListener('canplay', onReady)
     this.player.addEventListener('play', onPlay)
+    this.player.addEventListener('waiting', onBuffer)
+    this.player.addEventListener('playing', onBufferEnd)
     this.player.addEventListener('pause', onPause)
     this.player.addEventListener('seeked', this.onSeek)
     this.player.addEventListener('ended', onEnded)
@@ -82,9 +84,11 @@ export class FilePlayer extends Component {
     }
   }
   removeListeners () {
-    const { onReady, onPlay, onPause, onEnded, onError, onEnablePIP } = this.props
+    const { onReady, onPlay, onBuffer, onBufferEnd, onPause, onEnded, onError, onEnablePIP } = this.props
     this.player.removeEventListener('canplay', onReady)
     this.player.removeEventListener('play', onPlay)
+    this.player.removeEventListener('waiting', onBuffer)
+    this.player.removeEventListener('playing', onBufferEnd)
     this.player.removeEventListener('pause', onPause)
     this.player.removeEventListener('seeked', this.onSeek)
     this.player.removeEventListener('ended', onEnded)

src/players/YouTube.js

@@ -71,9 +71,12 @@ export class YouTube extends Component {
     }, onError)
   }
   onStateChange = ({ data }) => {
-    const { onPlay, onPause, onBuffer, onEnded, onReady, loop } = this.props
+    const { onPlay, onPause, onBuffer, onBufferEnd, onEnded, onReady, loop } = this.props
     const { PLAYING, PAUSED, BUFFERING, ENDED, CUED } = window[SDK_GLOBAL].PlayerState
-    if (data === PLAYING) onPlay()
+    if (data === PLAYING) {
+      onPlay()
+      onBufferEnd()
+    }
     if (data === PAUSED) onPause()
     if (data === BUFFERING) onBuffer()
     if (data === ENDED) {

src/props.js

@@ -69,6 +69,7 @@ export const propTypes = {
   onPlay: func,
   onPause: func,
   onBuffer: func,
+  onBufferEnd: func,
   onEnded: func,
   onError: func,
   onDuration: func,
@@ -163,6 +164,7 @@ export const defaultProps = {
   onPlay: function () {},
   onPause: function () {},
   onBuffer: function () {},
+  onBufferEnd: function () {},
   onEnded: function () {},
   onError: function () {},
   onDuration: function () {},

test/players/YouTube.js

@@ -83,10 +83,13 @@ test('load() when ready', t => {
   getSDK.restore()
 })
 
-test('onStateChange() - play', async t => {
-  const onPlay = () => t.pass()
-  const instance = shallow(<YouTube url={TEST_URL} onPlay={onPlay} />).instance()
+test('onStateChange() - play', t => {
+  const called = {}
+  const onPlay = () => { called.onPlay = true }
+  const onBufferEnd = () => { called.onBufferEnd = true }
+  const instance = shallow(<YouTube url={TEST_URL} onPlay={onPlay} onBufferEnd={onBufferEnd} />).instance()
   instance.onStateChange({ data: 'PLAYING' })
+  t.true(called.onPlay && called.onBufferEnd)
 })
 
 test('onStateChange() - pause', async t => {