Implemented onBufferEnd cb prop for FilePlayer, YouTube and Facebook (#…

…615) * FilePlayer calls onBuffer when "waiting" is fired * FilePlayer onBufferEnd * Facebook player onBufferEnd * YouTube player onBufferEnd * README: onBufferEnd callback documented * proptypes: added onBufferEnd * YouTube player testcase fixed * Fixed wording in README.md Co-Authored-By: me-andre <[email protected]> * Added onBufferEnd cb to ReactPlayerProps in index.d.ts
cookpete · Apr 10, 2019 · e4450bc · e4450bc
1 parent 35d957e
commit e4450bc
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 7 deletions.
diff --git a/README.md b/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<br />&nbsp; ◦ &nbsp;Works for files, YouTube and Facebook
 `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

diff --git a/index.d.ts b/index.d.ts
@@ -98,6 +98,7 @@ export interface ReactPlayerProps {
   onPlay?(): void;
   onPause?(): void;
   onBuffer?(): void;
+  onBufferEnd?(): void;
   onEnded?(): void;
   onEnablePIP?(): void;
   onDisablePIP?(): void;

diff --git a/src/players/Facebook.js b/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

diff --git a/src/players/FilePlayer.js b/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)

diff --git a/src/players/YouTube.js b/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) {

diff --git a/src/props.js b/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 () {},

diff --git a/test/players/YouTube.js b/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 => {