VEX-6350: add onPlaybackStateChanged prop (#25)

* Adds the new prop onPlaybackStateChanged

README.md

@@ -332,6 +332,7 @@ var styles = StyleSheet.create({
 * [onFullscreenPlayerDidDismiss](#onfullscreenplayerdiddismiss)
 * [onLoad](#onload)
 * [onLoadStart](#onloadstart)
+* [onPlaybackStateChanged]($onPlaybackStateChanged)
 * [onReadyForDisplay](#onreadyfordisplay)
 * [onPictureInPictureStatusChanged](#onpictureinpicturestatuschanged)
 * [onPlaybackRateChange](#onplaybackratechange)
@@ -1110,6 +1111,24 @@ Example:
 
 Platforms: all
 
+#### onPlaybackStateChanged
+Callback function that is called when the playback state changes.
+
+Payload:
+
+Property | Description
+--- | ---
+isPlaying | boolean | Boolean indicating if the media is playing or not
+
+Example:
+```
+{
+  isPlaying: true,
+}
+```
+
+Platforms: Android ExoPlayer
+
 #### onReadyForDisplay
 Callback function that is called when the first video frame is ready for display. This is when the poster is removed.
 

Video.js

@@ -99,6 +99,12 @@ export default class Video extends Component {
     }
   };
 
+  _onPlaybackStateChanged = (event) => {
+    if (this.props.onPlaybackStateChanged) {
+      this.props.onPlaybackStateChanged(event.nativeEvent);
+    }
+  };
+
   _onLoad = (event) => {
     // Need to hide poster here for windows as onReadyForDisplay is not implemented
     if (Platform.OS === 'windows') {
@@ -311,6 +317,7 @@ export default class Video extends Component {
         requestHeaders: source.headers ? this.stringsOnlyObject(source.headers) : {},
       },
       onVideoLoadStart: this._onLoadStart,
+      onVideoPlaybackStateChanged: this._onPlaybackStateChanged,
       onVideoLoad: this._onLoad,
       onVideoError: this._onError,
       onVideoProgress: this._onProgress,
@@ -491,6 +498,7 @@ Video.propTypes = {
   useSecureView: PropTypes.bool,
   hideShutterView: PropTypes.bool,
   onLoadStart: PropTypes.func,
+  onPlaybackStateChanged: PropTypes.func,
   onLoad: PropTypes.func,
   onBuffer: PropTypes.func,
   onError: PropTypes.func,

android-exoplayer/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java

@@ -1243,6 +1243,11 @@ class ReactExoplayerView extends FrameLayout implements
         eventEmitter.playbackRateChange(params.speed);
     }
 
+    @Override
+    public void onIsPlayingChanged(boolean isPlaying) {
+        eventEmitter.playbackStateChanged(isPlaying);
+    }
+
     @Override
     public void onPlayerError(ExoPlaybackException e) {
         String errorString = "ExoPlaybackException type : " + e.type;

android-exoplayer/src/main/java/com/brentvatne/exoplayer/VideoEventEmitter.java

@@ -44,6 +44,7 @@ class VideoEventEmitter {
     private static final String EVENT_RESUME = "onPlaybackResume";
     private static final String EVENT_READY = "onReadyForDisplay";
     private static final String EVENT_BUFFER = "onVideoBuffer";
+    private static final String EVENT_PLAYBACK_STATE_CHANGED = "onVideoPlaybackStateChanged";
     private static final String EVENT_BUFFER_PROGRESS = "onVideoBufferProgress";
     private static final String EVENT_IDLE = "onVideoIdle";
     private static final String EVENT_TIMED_METADATA = "onTimedMetadata";
@@ -66,6 +67,7 @@ class VideoEventEmitter {
             EVENT_RESUME,
             EVENT_READY,
             EVENT_BUFFER,
+            EVENT_PLAYBACK_STATE_CHANGED,
             EVENT_BUFFER_PROGRESS,
             EVENT_IDLE,
             EVENT_TIMED_METADATA,
@@ -91,6 +93,7 @@ class VideoEventEmitter {
             EVENT_RESUME,
             EVENT_READY,
             EVENT_BUFFER,
+            EVENT_PLAYBACK_STATE_CHANGED,
             EVENT_BUFFER_PROGRESS,
             EVENT_IDLE,
             EVENT_TIMED_METADATA,
@@ -139,6 +142,7 @@ class VideoEventEmitter {
 
     private static final String EVENT_PROP_BITRATE = "bitrate";
 
+    private static final String EVENT_PROP_IS_PLAYING = "isPlaying";
 
     void setViewId(int viewId) {
         this.viewId = viewId;
@@ -215,6 +219,12 @@ class VideoEventEmitter {
         receiveEvent(EVENT_BUFFER, map);
     }
 
+    void playbackStateChanged(boolean isPlaying) {
+        WritableMap map = Arguments.createMap();
+        map.putBoolean(EVENT_PROP_IS_PLAYING, isPlaying);
+        receiveEvent(EVENT_PLAYBACK_STATE_CHANGED, map);
+    }
+
     void bufferProgress(double start, double end) {
         WritableMap map = Arguments.createMap();
         map.putDouble(EVENT_PROP_BUFFER_START, start);