Add an onLoad callback to fetch video details

RCTVideo.h

@@ -1,5 +1,9 @@
-#import <UIKit/UIKit.h>
+#import "RCTView.h"
+
+@class RCTEventDispatcher;
 
 @interface RCTVideo : UIView
 
+- (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher NS_DESIGNATED_INITIALIZER;
+
 @end

RCTVideo.m

@@ -1,32 +1,51 @@
 #import "RCTVideo.h"
 #import "RCTLog.h"
+#import "RCTBridgeModule.h"
+#import "RCTEventDispatcher.h"
+#import "UIView+React.h"
 #import <AVFoundation/AVFoundation.h>
 
 @implementation RCTVideo
 {
     AVPlayer *_player;
     AVPlayerLayer *_playerLayer;
+    NSURL *_videoURL;
+    RCTEventDispatcher *_eventDispatcher;
 }
 
-- (id)init
+- (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher
 {
   if ((self = [super init])) {
-
+    _eventDispatcher = eventDispatcher;
   }
   return self;
 }
 
 - (void)setSrc:(NSString *)source
 {
-  NSURL *videoURL = [[NSURL alloc] initFileURLWithPath:[[NSBundle mainBundle] pathForResource:source ofType:@"mp4"]];
+  _videoURL = [[NSURL alloc] initFileURLWithPath:[[NSBundle mainBundle] pathForResource:source ofType:@"mp4"]];
-  _player = [AVPlayer playerWithURL:videoURL];
+  _player = [AVPlayer playerWithURL:_videoURL];
   _player.actionAtItemEnd = AVPlayerActionAtItemEndNone;
   _playerLayer = [AVPlayerLayer playerLayerWithPlayer:_player];
   _playerLayer.frame = self.bounds;
   _playerLayer.needsDisplayOnBoundsChange = YES;
+
   [self.layer addSublayer:_playerLayer];
   self.layer.needsDisplayOnBoundsChange = YES;
-  [_player play];
+
+  AVPlayerItem *video = [_player currentItem];
+
+  [_eventDispatcher sendInputEventWithName:@"videoLoaded" body:@{
+    @"duration": [NSNumber numberWithFloat:CMTimeGetSeconds(video.asset.duration)],
+    @"currentTime": [NSNumber numberWithFloat:CMTimeGetSeconds(video.currentTime)],
+    @"canPlayReverse": [NSNumber numberWithBool:video.canPlayReverse],
+    @"canPlayFastForward": [NSNumber numberWithBool:video.canPlayFastForward],
+    @"canPlaySlowForward": [NSNumber numberWithBool:video.canPlaySlowForward],
+    @"canPlaySlowReverse": [NSNumber numberWithBool:video.canPlaySlowReverse],
+    @"canStepBackward": [NSNumber numberWithBool:video.canStepBackward],
+    @"canStepForward": [NSNumber numberWithBool:video.canStepForward],
+    @"target": self.reactTag
+  }];
 }
 
 - (void)setResizeMode:(NSString*)mode
@@ -36,11 +55,11 @@
 
 - (void)setPause:(BOOL)wantsToPause
 {
-  if (wantsToPause) {
+    if (wantsToPause) {
-    [_player pause];
+        [_player pause];
-  } else {
+    } else {
-    [_player play];
+        [_player play];
-  }
+    }
 }
 
 

RCTVideoManager.m

@@ -9,7 +9,18 @@
 
 - (UIView *)view
 {
-  return [[RCTVideo alloc] init];
+  return [[RCTVideo alloc] initWithEventDispatcher:self.bridge.eventDispatcher];
+}
+
+/* onLoadStart, onLoad, and onError to stay consistent with Image */
+
+- (NSDictionary *)customDirectEventTypes
+{
+  return @{
+    @"videoLoaded": @{
+      @"registrationName": @"onLoad"
+    },
+  };
 }
 
 RCT_EXPORT_VIEW_PROPERTY(src, NSString);
@@ -25,4 +36,4 @@ RCT_EXPORT_VIEW_PROPERTY(pause, BOOL);
            @"ScaleAspectFill": AVLayerVideoGravityResizeAspectFill};
 }
 
-@end
+@end

Video.ios.js

@@ -1,4 +1,4 @@
-var React = require('React');
+var React = require('react-native');
 var NativeModules = require('NativeModules');
 var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
 var StyleSheet = require('StyleSheet');
@@ -18,6 +18,7 @@ var Video = React.createClass({
     resizeMode: PropTypes.string,
     repeat: PropTypes.bool,
     pause: PropTypes.bool,
+    onLoad: PropTypes.func,
   },
 
   mixins: [NativeMethodsMixin],
@@ -27,7 +28,11 @@ var Video = React.createClass({
     validAttributes: ReactIOSViewAttributes.UIView
   },
 
-  render: function() {
+  _onLoad(event) {
+    this.props.onLoad && this.props.onLoad(event.nativeEvent);
+  },
+
+  render() {
     var style = flattenStyle([styles.base, this.props.style]);
     var source = this.props.source;
 
@@ -46,6 +51,7 @@ var Video = React.createClass({
       style,
       resizeMode: resizeMode,
       src: source,
+      onLoad: this._onLoad,
     });
 
     return <RCTVideo {... nativeProps} />
@@ -54,7 +60,7 @@ var Video = React.createClass({
 
 var RCTVideo = createReactIOSNativeComponentClass({
   validAttributes: merge(ReactIOSViewAttributes.UIView,
-                         {src: true, resizeMode: true, repeat: true, pause: true}),
+    {src: true, resizeMode: true, repeat: true, pause: true}),
   uiViewClassName: 'RCTVideo',
 });
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-video",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "A <Video> element for react-native",
   "main": "Video.ios.js",
   "author": "Brent Vatne <brentvatne@gmail.com> (https://github.com/brentvatne)",