Add onPlaybackRateChange callback prop

README.md

@@ -114,6 +114,7 @@ Prop | Description
 `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
+`onPlaybackRateChange` | Called when playback rate of the player changed<br />&nbsp; ◦ &nbsp;Only supported by YouTube, Wistia, and file paths
 `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
 `onClickPreview` | Called when user clicks the `light` mode preview

src/demo/App.js

@@ -73,6 +73,10 @@ class App extends Component {
     this.setState({ playbackRate: parseFloat(e.target.value) })
   }
 
+  handleOnPlaybackRateChange = (speed) => {
+    this.setState({ playbackRate: parseFloat(speed) })
+  }
+
   handleTogglePIP = () => {
     this.setState({ pip: !this.state.pip })
   }
@@ -174,6 +178,7 @@ class App extends Component {
               onDisablePIP={this.handleDisablePIP}
               onPause={this.handlePause}
               onBuffer={() => console.log('onBuffer')}
+              onPlaybackRateChange={this.handleOnPlaybackRateChange}
               onSeek={e => console.log('onSeek', e)}
               onEnded={this.handleEnded}
               onError={e => console.log('onError', e)}
@@ -390,6 +395,10 @@ class App extends Component {
                 <th>volume</th>
                 <td>{volume.toFixed(3)}</td>
               </tr>
+              <tr>
+                <th>speed</th>
+                <td>{playbackRate}</td>
+              </tr>
               <tr>
                 <th>played</th>
                 <td>{played.toFixed(3)}</td>

src/players/FilePlayer.js

@@ -58,6 +58,7 @@ export default class FilePlayer extends Component {
     player.addEventListener('seeked', this.onSeek)
     player.addEventListener('ended', this.onEnded)
     player.addEventListener('error', this.onError)
+    player.addEventListener('ratechange', this.onPlayBackRateChange)
     player.addEventListener('enterpictureinpicture', this.onEnablePIP)
     player.addEventListener('leavepictureinpicture', this.onDisablePIP)
     player.addEventListener('webkitpresentationmodechanged', this.onPresentationModeChange)
@@ -80,6 +81,7 @@ export default class FilePlayer extends Component {
     player.removeEventListener('seeked', this.onSeek)
     player.removeEventListener('ended', this.onEnded)
     player.removeEventListener('error', this.onError)
+    player.removeEventListener('ratechange', this.onPlayBackRateChange)
     player.removeEventListener('enterpictureinpicture', this.onEnablePIP)
     player.removeEventListener('leavepictureinpicture', this.onDisablePIP)
     player.removeEventListener('webkitpresentationmodechanged', this.onPresentationModeChange)
@@ -96,6 +98,7 @@ export default class FilePlayer extends Component {
   onPause = (...args) => this.props.onPause(...args)
   onEnded = (...args) => this.props.onEnded(...args)
   onError = (...args) => this.props.onError(...args)
+  onPlayBackRateChange = (event) => this.props.onPlaybackRateChange(event.target.playbackRate)
   onEnablePIP = (...args) => this.props.onEnablePIP(...args)
 
   onDisablePIP = e => {

src/players/Wistia.js

@@ -48,6 +48,7 @@ export default class Wistia extends Component {
           this.player.bind('pause', this.onPause)
           this.player.bind('seek', this.onSeek)
           this.player.bind('end', this.onEnded)
+          this.player.bind('playbackratechange', this.onPlaybackRateChange)
           onReady()
         }
       })
@@ -59,13 +60,15 @@ export default class Wistia extends Component {
     this.player.unbind('pause', this.onPause)
     this.player.unbind('seek', this.onSeek)
     this.player.unbind('end', this.onEnded)
+    this.player.unbind('playbackratechange', this.onPlaybackRateChange)
   }
 
   // Proxy methods to prevent listener leaks
   onPlay = (...args) => this.props.onPlay(...args)
   onPause = (...args) => this.props.onPause(...args)
   onSeek = (...args) => this.props.onSeek(...args)
   onEnded = (...args) => this.props.onEnded(...args)
+  onPlaybackRateChange = (...args) => this.props.onPlaybackRateChange(...args)
 
   play () {
     this.callPlayer('play')

src/players/YouTube.js

@@ -67,6 +67,7 @@ export default class YouTube extends Component {
             }
             this.props.onReady()
           },
+          onPlaybackRateChange: event => this.props.onPlaybackRateChange(event.data),
           onStateChange: this.onStateChange,
           onError: event => onError(event.data)
         },

src/props.js

@@ -86,6 +86,7 @@ export const propTypes = {
   onError: func,
   onDuration: func,
   onSeek: func,
+  onPlaybackRateChange: func,
   onProgress: func,
   onClickPreview: func,
   onEnablePIP: func,
@@ -196,6 +197,7 @@ export const defaultProps = {
   onError: noop,
   onDuration: noop,
   onSeek: noop,
+  onPlaybackRateChange: noop,
   onProgress: noop,
   onClickPreview: noop,
   onEnablePIP: noop,