react-native-video - npm Package Compare versions

Comparing version 0.8.0 to 0.9.0

package.json

 {
   "name": "react-native-video",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "A <Video /> element for react-native",
@@ -5,0 +5,0 @@ "main": "Video.js",

README.md

@@ -32,9 +32,10 @@ ## react-native-video
 
-First, copy your video file to `android/app/src/main/res/raw/`, then
-make the following additions to the given files:
+Install [rnpm](https://github.com/rnpm/rnpm) and run `rnpm link react-native-video`
 
+Or if you have trouble using [rnpm](https://github.com/rnpm/rnpm), make the following additions to the given files manually:
+
 **android/settings.gradle**
 ```
-include ':RCTVideo', ':app'
-project(':RCTVideo').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android')
+include ':react-native-video'
+project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android')
 ```
@@ -46,3 +47,3 @@
    ...
-   compile project(':RCTVideo')
+   compile project(':react-native-video')
 }
@@ -63,2 +64,19 @@ ```
 
+
+### Note:In react-native >= 0.29.0 you have to edit MainApplication.java
+
+**MainApplication.java** (react-native >= 0.29.0)
+
+On top, where imports are:
+```java
+import com.brentvatne.react.ReactVideoPackage;
+```
+
+Under `.addPackage(new MainReactPackage())`:
+```java
+.addPackage(new ReactVideoPackage())
+```
+
+
+
 ## Usage
@@ -77,2 +95,4 @@
        repeat={true}                // Repeat forever.
+       playInBackground={false}     // Audio continues to play when app entering background.
+       playWhenInactive={false}     // [iOS] Video continues to play when control or notification center are shown.
        onLoadStart={this.loadStart} // Callback when video starts to load
@@ -97,2 +117,6 @@ onLoad={this.setDuration}    // Callback when video loads
 
+### Play in background on iOS
+
+To enable audio to play in background on iOS the audio session needs to be set to `AVAudioSessionCategoryPlayback`. See [Apple documentation][3].
+
 ## Static Methods
@@ -128,2 +152,3 @@
 [2]: https://github.com/brentvatne/react-native-video/tree/master/Examples/VideoPlayer
+[3]: https://developer.apple.com/library/ios/qa/qa1668/_index.html
 
@@ -130,0 +155,0 @@ ---

Video.js

@@ -1,17 +0,6 @@
-import React from 'react';
-import ReactNative from 'react-native';
+import React, {Component, PropTypes} from 'react';
+import {StyleSheet, requireNativeComponent, NativeModules, View} from 'react-native';
+import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
 import VideoResizeMode from './VideoResizeMode.js';
 
-const {
-  Component,
-  PropTypes,
-} = React;
-
-const {
-  StyleSheet,
-  requireNativeComponent,
-  NativeModules,
-  View,
-} = ReactNative;
-
 const styles = StyleSheet.create({
@@ -25,24 +14,2 @@ base: {
 
-  constructor(props, context) {
-    super(props, context);
-    this.seek = this.seek.bind(this);
-    this.presentFullscreenPlayer = this.presentFullscreenPlayer.bind(this);
-    this.dismissFullscreenPlayer = this.dismissFullscreenPlayer.bind(this);
-    this._assignRoot = this._assignRoot.bind(this);
-    this._onLoadStart = this._onLoadStart.bind(this);
-    this._onLoad = this._onLoad.bind(this);
-    this._onError = this._onError.bind(this);
-    this._onProgress = this._onProgress.bind(this);
-    this._onSeek = this._onSeek.bind(this);
-    this._onEnd = this._onEnd.bind(this);
-    this._onFullscreenPlayerWillPresent = this._onFullscreenPlayerWillPresent.bind(this);
-    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) {
@@ -52,107 +19,105 @@ this._root.setNativeProps(nativeProps);
 
-  seek(time) {
+  seek = (time) => {
     this.setNativeProps({ seek: time });
-  }
+  };
 
-  presentFullscreenPlayer() {
+  presentFullscreenPlayer = () => {
     this.setNativeProps({ fullscreen: true });
-  }
+  };
 
-  dismissFullscreenPlayer() {
+  dismissFullscreenPlayer = () => {
     this.setNativeProps({ fullscreen: false });
-  }
+  };
 
-  _assignRoot(component) {
+  _assignRoot = (component) => {
     this._root = component;
-  }
+  };
 
-  _onLoadStart(event) {
+  _onLoadStart = (event) => {
     if (this.props.onLoadStart) {
       this.props.onLoadStart(event.nativeEvent);
     }
-  }
+  };
 
-  _onLoad(event) {
+  _onLoad = (event) => {
     if (this.props.onLoad) {
       this.props.onLoad(event.nativeEvent);
     }
-  }
+  };
 
-  _onError(event) {
+  _onError = (event) => {
     if (this.props.onError) {
       this.props.onError(event.nativeEvent);
     }
-  }
+  };
 
-  _onProgress(event) {
+  _onProgress = (event) => {
     if (this.props.onProgress) {
       this.props.onProgress(event.nativeEvent);
     }
-  }
+  };
 
-  _onSeek(event) {
+  _onSeek = (event) => {
     if (this.props.onSeek) {
       this.props.onSeek(event.nativeEvent);
     }
-  }
+  };
 
-  _onEnd(event) {
+  _onEnd = (event) => {
     if (this.props.onEnd) {
       this.props.onEnd(event.nativeEvent);
     }
-  }
+  };
 
-  _onFullscreenPlayerWillPresent(event) {
+  _onFullscreenPlayerWillPresent = (event) => {
     if (this.props.onFullscreenPlayerWillPresent) {
       this.props.onFullscreenPlayerWillPresent(event.nativeEvent);
     }
-  }
+  };
 
-  _onFullscreenPlayerDidPresent(event) {
+  _onFullscreenPlayerDidPresent = (event) => {
     if (this.props.onFullscreenPlayerDidPresent) {
       this.props.onFullscreenPlayerDidPresent(event.nativeEvent);
     }
-  }
+  };
 
-  _onFullscreenPlayerWillDismiss(event) {
+  _onFullscreenPlayerWillDismiss = (event) => {
     if (this.props.onFullscreenPlayerWillDismiss) {
       this.props.onFullscreenPlayerWillDismiss(event.nativeEvent);
     }
-  }
+  };
 
-  _onFullscreenPlayerDidDismiss(event) {
+  _onFullscreenPlayerDidDismiss = (event) => {
     if (this.props.onFullscreenPlayerDidDismiss) {
       this.props.onFullscreenPlayerDidDismiss(event.nativeEvent);
     }
-  }
+  };
 
-  _onReadyForDisplay(event) {
+  _onReadyForDisplay = (event) => {
     if (this.props.onReadyForDisplay) {
       this.props.onReadyForDisplay(event.nativeEvent);
     }
-  }
+  };
 
-  _onPlaybackStalled(event) {
+  _onPlaybackStalled = (event) => {
     if (this.props.onPlaybackStalled) {
       this.props.onPlaybackStalled(event.nativeEvent);
     }
-  }
+  };
 
-  _onPlaybackResume(event) {
+  _onPlaybackResume = (event) => {
     if (this.props.onPlaybackResume) {
       this.props.onPlaybackResume(event.nativeEvent);
     }
-  }
+  };
 
-  _onPlaybackRateChange(event) {
+  _onPlaybackRateChange = (event) => {
     if (this.props.onPlaybackRateChange) {
       this.props.onPlaybackRateChange(event.nativeEvent);
     }
-  }
+  };
 
   render() {
-    const {
-      source,
-      resizeMode,
-    } = this.props;
+    const resizeMode = this.props.resizeMode;
+    const source = resolveAssetSource(this.props.source) || {};
 
@@ -220,3 +185,9 @@ let uri = source.uri;
   /* Wrapper component */
-  source: PropTypes.object,
+  source: PropTypes.oneOfType([
+    PropTypes.shape({
+      uri: PropTypes.string
+    }),
+    // Opaque type returned by require('./video.mp4')
+    PropTypes.number
+  ]),
   resizeMode: PropTypes.string,
@@ -228,2 +199,4 @@ repeat: PropTypes.bool,
   rate: PropTypes.number,
+  playInBackground: PropTypes.bool,
+  playWhenInactive: PropTypes.bool,
   controls: PropTypes.bool,
@@ -247,7 +220,7 @@ currentTime: PropTypes.number,
   /* Required by react-native */
-  scaleX: React.PropTypes.number,
-  scaleY: React.PropTypes.number,
-  translateX: React.PropTypes.number,
-  translateY: React.PropTypes.number,
-  rotation: React.PropTypes.number,
+  scaleX: PropTypes.number,
+  scaleY: PropTypes.number,
+  translateX: PropTypes.number,
+  translateY: PropTypes.number,
+  rotation: PropTypes.number,
   ...View.propTypes,
@@ -254,0 +227,0 @@ };

No alert changes

Improved metrics

Lines of code

639

5.79%

Number of lines in readme file

152

19.69%

Worsened metrics

Total package byte prevSize

82690

-10.07%

Number of package files

23

-14.81%

No dependency changes