Merge https://github.com/brentvatne/react-native-video

Examples/VideoPlayer/android/app/build.gradle

@@ -114,5 +114,5 @@ dependencies {
     compile project(':react-native-video')
     compile fileTree(dir: "libs", include: ["*.jar"])
     compile "com.android.support:appcompat-v7:23.0.1"
-    compile "com.facebook.react:react-native:0.19.+"
+    compile "com.facebook.react:react-native:0.20.+"
 }

Examples/VideoPlayer/index.android.js

@@ -1,8 +1,11 @@
 'use strict';
 
-import React, {
+import {
+  Component
+} from 'react';
+
+import {
   AppRegistry,
-  Component,
   StyleSheet,
   Text,
   TouchableOpacity,

Examples/VideoPlayer/index.ios.js

@@ -1,9 +1,11 @@
 'use strict';
-
 import React, {
+  Component
+} from 'react';
+
+import {
   AlertIOS,
   AppRegistry,
-  Component,
   StyleSheet,
   Text,
   TouchableOpacity,

RCTVideo.m

@@ -7,6 +7,8 @@
 static NSString *const statusKeyPath = @"status";
 static NSString *const playbackLikelyToKeepUpKeyPath = @"playbackLikelyToKeepUp";
 static NSString *const playbackBufferEmptyKeyPath = @"playbackBufferEmpty";
+static NSString *const readyForDisplayKeyPath = @"readyForDisplay";
+static NSString *const playbackRate = @"rate";
 
 @implementation RCTVideo
 {
@@ -36,6 +38,7 @@ static NSString *const playbackBufferEmptyKeyPath = @"playbackBufferEmpty";
   BOOL _muted;
   BOOL _paused;
   BOOL _repeat;
+  BOOL _playbackStalled;
   BOOL _playInBackground;
   BOOL _playWhenInactive;
   NSString * _resizeMode;
@@ -48,6 +51,7 @@ static NSString *const playbackBufferEmptyKeyPath = @"playbackBufferEmpty";
   if ((self = [super init])) {
     _eventDispatcher = eventDispatcher;
 
+    _playbackStalled = NO;
     _rate = 1.0;
     _volume = 1.0;
     _resizeMode = @"AVLayerVideoGravityResizeAspectFill";
@@ -233,13 +237,13 @@ static NSString *const playbackBufferEmptyKeyPath = @"playbackBufferEmpty";
   [self addPlayerItemObservers];
 
   [_player pause];
-  [_playerLayer removeFromSuperlayer];
+  [self removePlayerLayer];
-  _playerLayer = nil;
   [_playerViewController.view removeFromSuperview];
   _playerViewController = nil;
 
   _player = [AVPlayer playerWithPlayerItem:_playerItem];
   _player.actionAtItemEnd = AVPlayerActionAtItemEndNone;
+  [_player addObserver:self forKeyPath:playbackRate options:0 context:nil];
 
   const Float64 progressUpdateIntervalMS = _progressUpdateInterval / 1000;
   // @see endScrubbing in AVPlayerDemoPlaybackViewController.m of https://developer.apple.com/library/ios/samplecode/AVPlayerDemo/Introduction/Intro.html
@@ -290,9 +294,21 @@ static NSString *const playbackBufferEmptyKeyPath = @"playbackBufferEmpty";
           
         NSObject *width = @"undefined";
         NSObject *height = @"undefined";
+        NSString *orientation = @"undefined";
+
         if ([_playerItem.asset tracksWithMediaType:AVMediaTypeVideo].count > 0) {
-          width = [NSNumber numberWithFloat:[_playerItem.asset tracksWithMediaType:AVMediaTypeVideo][0].naturalSize.width];
+          AVAssetTrack *videoTrack = [[_playerItem.asset tracksWithMediaType:AVMediaTypeVideo] objectAtIndex:0];
-          height = [NSNumber numberWithFloat:[_playerItem.asset tracksWithMediaType:AVMediaTypeVideo][0].naturalSize.height];
+          width = [NSNumber numberWithFloat:videoTrack.naturalSize.width];
+          height = [NSNumber numberWithFloat:videoTrack.naturalSize.height];
+          CGAffineTransform preferredTransform = [videoTrack preferredTransform];
+
+          if ((videoTrack.naturalSize.width == preferredTransform.tx
+            && videoTrack.naturalSize.height == preferredTransform.ty)
+            || (preferredTransform.tx == 0 && preferredTransform.ty == 0))
+          {
+            orientation = @"landscape";
+          } else
+            orientation = @"portrait";
         }
 
         [_eventDispatcher sendInputEventWithName:@"onVideoLoad"
@@ -306,7 +322,8 @@ static NSString *const playbackBufferEmptyKeyPath = @"playbackBufferEmpty";
                                                    @"canStepForward": [NSNumber numberWithBool:_playerItem.canStepForward],
                                                    @"naturalSize": @{
                                                         @"width": width,
-                                                        @"height": height
+                                                        @"height": height,
+                                                        @"orientation": orientation
                                                         },
                                                    @"target": self.reactTag}];
 
@@ -328,6 +345,25 @@ static NSString *const playbackBufferEmptyKeyPath = @"playbackBufferEmpty";
       }
       _playerBufferEmpty = NO;
     }
+   } else if (object == _playerLayer) {
+      if([keyPath isEqualToString:readyForDisplayKeyPath] && [change objectForKey:NSKeyValueChangeNewKey]) {
+        if([change objectForKey:NSKeyValueChangeNewKey]) {
+          [_eventDispatcher sendInputEventWithName:@"onReadyForDisplay"
+                                              body:@{@"target": self.reactTag}];
+        }
+    }
+  } else if (object == _player) {
+      if([keyPath isEqualToString:playbackRate]) {
+          [_eventDispatcher sendInputEventWithName:@"onPlaybackRateChange"
+                                              body:@{@"playbackRate": [NSNumber numberWithFloat:_player.rate],
+                                                     @"target": self.reactTag}];
+          if(_playbackStalled && _player.rate > 0) {
+              [_eventDispatcher sendInputEventWithName:@"onPlaybackResume"
+                                                  body:@{@"playbackRate": [NSNumber numberWithFloat:_player.rate],
+                                                         @"target": self.reactTag}];
+              _playbackStalled = NO;
+          }
+      }
   } else {
       [super observeValueForKeyPath:keyPath ofObject:object change:change context:context];
   }
@@ -340,6 +376,16 @@ static NSString *const playbackBufferEmptyKeyPath = @"playbackBufferEmpty";
                                            selector:@selector(playerItemDidReachEnd:)
                                                name:AVPlayerItemDidPlayToEndTimeNotification
                                              object:[_player currentItem]];
+  [[NSNotificationCenter defaultCenter] addObserver:self
+                                           selector:@selector(playbackStalled:)
+                                               name:AVPlayerItemPlaybackStalledNotification
+                                             object:nil];
+}
+
+- (void)playbackStalled:(NSNotification *)notification
+{
+  [_eventDispatcher sendInputEventWithName:@"onPlaybackStalled" body:@{@"target": self.reactTag}];
+  _playbackStalled = YES;
 }
 
 - (void)playerItemDidReachEnd:(NSNotification *)notification
@@ -535,6 +581,8 @@ static NSString *const playbackBufferEmptyKeyPath = @"playbackBufferEmpty";
       _playerLayer.frame = self.bounds;
       _playerLayer.needsDisplayOnBoundsChange = YES;
         
+      [_playerLayer addObserver:self forKeyPath:readyForDisplayKeyPath options:NSKeyValueObservingOptionNew context:nil];
+    
       [self.layer addSublayer:_playerLayer];
       self.layer.needsDisplayOnBoundsChange = YES;
     }
@@ -547,8 +595,7 @@ static NSString *const playbackBufferEmptyKeyPath = @"playbackBufferEmpty";
         _controls = controls;
         if( _controls )
         {
-            [_playerLayer removeFromSuperlayer];
+            [self removePlayerLayer];
-            _playerLayer = nil;
             [self usePlayerViewController];
         }
         else
@@ -560,6 +607,13 @@ static NSString *const playbackBufferEmptyKeyPath = @"playbackBufferEmpty";
     }
 }
 
+- (void)removePlayerLayer
+{
+    [_playerLayer removeFromSuperlayer];
+    [_playerLayer removeObserver:self forKeyPath:readyForDisplayKeyPath];
+    _playerLayer = nil;
+}
+
 #pragma mark - RCTVideoPlayerViewControllerDelegate
 
 - (void)videoPlayerViewControllerWillDismiss:(AVPlayerViewController *)playerViewController
@@ -643,10 +697,10 @@ static NSString *const playbackBufferEmptyKeyPath = @"playbackBufferEmpty";
 - (void)removeFromSuperview
 {
   [_player pause];
+  [_player removeObserver:self forKeyPath:playbackRate];
   _player = nil;
 
-  [_playerLayer removeFromSuperlayer];
+  [self removePlayerLayer];
-  _playerLayer = nil;
   
   [_playerViewController.view removeFromSuperview];
   _playerViewController = nil;

RCTVideoManager.m

@@ -28,7 +28,11 @@ RCT_EXPORT_MODULE();
     @"onVideoFullscreenPlayerWillPresent",
     @"onVideoFullscreenPlayerDidPresent",
     @"onVideoFullscreenPlayerWillDismiss",
-    @"onVideoFullscreenPlayerDidDismiss"
+    @"onVideoFullscreenPlayerDidDismiss",
+    @"onReadyForDisplay",
+    @"onPlaybackStalled",
+    @"onPlaybackResume",
+    @"onPlaybackRateChange"
   ];
 }
 

README.md

@@ -1,6 +1,6 @@
 ## react-native-video
 
-A <Video> component for react-native, as seen in
+A `<Video>` component for react-native, as seen in
 [react-native-login](https://github.com/brentvatne/react-native-login)!
 
 Requires react-native >= 0.19.0
@@ -13,6 +13,20 @@ Run `npm install react-native-video --save`
 
 Install [rnpm](https://github.com/rnpm/rnpm) and run `rnpm link react-native-video`
 
+If you would like to allow other apps to play music over your video component, add:
+
+**AppDelegate.m**
+```
+#import <AVFoundation/AVFoundation.h>  // import
+
+- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
+{
+  ...
+  [[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryAmbient error:nil];  // allow
+  ...
+}
+```
+
 #### Android
 
 First, copy your video file to `android/app/src/main/res/raw/`, then

Video.js

@@ -1,14 +1,18 @@
-import React from 'react-native';
+import React from 'react';
+import ReactNative from 'react-native';
 import VideoResizeMode from './VideoResizeMode.js';
 
 const {
   Component,
+  PropTypes,
+} = React;
+
+const {
   StyleSheet,
   requireNativeComponent,
-  PropTypes,
   NativeModules,
   View,
-} = React;
+} = ReactNative;
 
 const styles = StyleSheet.create({
   base: {
@@ -34,6 +38,10 @@ export default class Video extends Component {
     this._onFullscreenPlayerDidPresent = this._onFullscreenPlayerDidPresent.bind(this);
     this._onFullscreenPlayerWillDismiss = this._onFullscreenPlayerWillDismiss.bind(this);
     this._onFullscreenPlayerDidDismiss = this._onFullscreenPlayerDidDismiss.bind(this);
+    this._onReadyForDisplay = this._onReadyForDisplay.bind(this);
+    this._onPlaybackStalled = this._onPlaybackStalled.bind(this);
+    this._onPlaybackResume = this._onPlaybackResume.bind(this);
+    this._onPlaybackRateChange = this._onPlaybackRateChange.bind(this);
   }
 
   setNativeProps(nativeProps) {
@@ -116,6 +124,30 @@ export default class Video extends Component {
     }
   }
 
+  _onReadyForDisplay(event) {
+    if (this.props.onReadyForDisplay) {
+      this.props.onReadyForDisplay(event.nativeEvent);
+    }
+  }
+
+  _onPlaybackStalled(event) {
+    if (this.props.onPlaybackStalled) {
+      this.props.onPlaybackStalled(event.nativeEvent);
+    }
+  }
+
+  _onPlaybackResume(event) {
+    if (this.props.onPlaybackResume) {
+      this.props.onPlaybackResume(event.nativeEvent);
+    }
+  }
+
+  _onPlaybackRateChange(event) {
+    if (this.props.onPlaybackRateChange) {
+      this.props.onPlaybackRateChange(event.nativeEvent);
+    }
+  }
+
   render() {
     const {
       source,
@@ -161,6 +193,10 @@ export default class Video extends Component {
       onVideoFullscreenPlayerDidPresent: this._onFullscreenPlayerDidPresent,
       onVideoFullscreenPlayerWillDismiss: this._onFullscreenPlayerWillDismiss,
       onVideoFullscreenPlayerDidDismiss: this._onFullscreenPlayerDidDismiss,
+      onReadyForDisplay: this._onReadyForDisplay,
+      onPlaybackStalled: this._onPlaybackStalled,
+      onPlaybackResume: this._onPlaybackResume,
+      onPlaybackRateChange: this._onPlaybackRateChange,
     });
 
     return (
@@ -200,6 +236,10 @@ Video.propTypes = {
   onFullscreenPlayerDidPresent: PropTypes.func,
   onFullscreenPlayerWillDismiss: PropTypes.func,
   onFullscreenPlayerDidDismiss: PropTypes.func,
+  onReadyForDisplay: PropTypes.func,
+  onPlaybackStalled: PropTypes.func,
+  onPlaybackResume: PropTypes.func,
+  onPlaybackRateChange: PropTypes.func,
 
   /* Required by react-native */
   scaleX: React.PropTypes.number,

android/src/main/java/com/brentvatne/react/ReactVideoView.java

@@ -3,6 +3,10 @@ package com.brentvatne.react;
 import android.media.MediaPlayer;
 import android.os.Handler;
 import android.util.Log;
+import android.net.Uri;
+import android.webkit.CookieManager;
+import java.util.Map;
+import java.util.HashMap;
 import com.facebook.react.bridge.Arguments;
 import com.facebook.react.bridge.WritableMap;
 import com.facebook.react.uimanager.ThemedReactContext;
@@ -122,8 +126,30 @@ public class ReactVideoView extends ScalableVideoView implements MediaPlayer.OnP
         mMediaPlayer.reset();
 
         try {
-            if (isNetwork || isAsset) {
+            if (isNetwork) {
-                setDataSource(uriString);
+                // Use the shared CookieManager to access the cookies
+                // set by WebViews inside the same app
+                CookieManager cookieManager = CookieManager.getInstance();
+
+                Uri parsedUrl = Uri.parse(uriString);
+                Uri.Builder builtUrl = parsedUrl.buildUpon();
+
+                String cookie = cookieManager.getCookie(builtUrl.build().toString());
+
+                Map<String, String> headers = new HashMap<String, String>();
+
+                if (cookie != null) {
+                    headers.put("Cookie", cookie);
+                }
+
+                setDataSource(mThemedReactContext, parsedUrl, headers);
+            } else if (isAsset) {
+                if (uriString.startsWith("content://")) {
+                    Uri parsedUrl = Uri.parse(uriString);
+                    setDataSource(mThemedReactContext, parsedUrl);
+                } else {
+                    setDataSource(uriString);
+                }
             } else {
                 setRawData(mThemedReactContext.getResources().getIdentifier(
                         uriString,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-video",
-  "version": "0.8.0-beta",
+  "version": "0.8.0-rc",
   "description": "A <Video /> element for react-native",
   "main": "Video.js",
   "license": "MIT",