From 0eaf3b2698591e4af18f59ffd6ef43592d9b0c11 Mon Sep 17 00:00:00 2001
From: Josh Habdas <jhabdas@gmail.com>
Date: Tue, 16 Aug 2016 15:34:14 -0500
Subject: [PATCH] Add instructions for Asset System usage

---
 README.md | 71 ++++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 47 insertions(+), 24 deletions(-)

diff --git a/README.md b/README.md
index 35a96916..5e673c7f 100644
--- a/README.md
+++ b/README.md
@@ -7,16 +7,17 @@ Requires react-native >= 0.19.0
 
 ### Add it to your project
 
-Run `npm install react-native-video --save`
+Run `npm i -S react-native-video`
 
 #### iOS
 
-Install [rnpm](https://github.com/rnpm/rnpm) and run `rnpm link react-native-video`
+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**
-```
+
+```objective-c
 #import <AVFoundation/AVFoundation.h>  // import
 
 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
@@ -34,12 +35,14 @@ Install [rnpm](https://github.com/rnpm/rnpm) and run `rnpm link react-native-vid
 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 ':react-native-video'
 project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android')
 ```
 
 **android/app/build.gradle**
+
 ```
 dependencies {
    ...
@@ -50,53 +53,56 @@ dependencies {
 **MainActivity.java**
 
 On top, where imports are:
+
 ```java
 import com.brentvatne.react.ReactVideoPackage;
 ```
 
 Under `.addPackage(new MainReactPackage())`:
+
 ```java
 .addPackage(new ReactVideoPackage())
 ```
 
-
-### Note:In react-native >= 0.29.0 you have to edit MainApplication.java
+### 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
 
 ```javascript
 // Within your render function, assuming you have a file called
 // "background.mp4" in your project. You can include multiple videos
 // on a single screen if you like.
-<Video source={{uri: "background"}} // Can be a URL or a local file.
-       rate={1.0}                   // 0 is paused, 1 is normal.
-       volume={1.0}                 // 0 is muted, 1 is normal.
-       muted={false}                // Mutes the audio entirely.
-       paused={false}               // Pauses playback entirely.
-       resizeMode="cover"           // Fill the whole screen at aspect ratio.
-       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
-       onLoad={this.setDuration}    // Callback when video loads
-       onProgress={this.setTime}    // Callback every ~250ms with currentTime
-       onEnd={this.onEnd}           // Callback when playback finishes
-       onError={this.videoError}    // Callback when video cannot be loaded
-       style={styles.backgroundVideo} />
+<Video
+  source={{uri: "background"}} // Can be a URL or a local file.
+  rate={1.0}                   // 0 is paused, 1 is normal.
+  volume={1.0}                 // 0 is muted, 1 is normal.
+  muted={false}                // Mutes the audio entirely.
+  paused={false}               // Pauses playback entirely.
+  resizeMode="cover"           // Fill the whole screen at aspect ratio.
+  repeat={true}                // Repeat forever.
+  playInBackground={false}     // Audio continues to play when aentering background.
+  playWhenInactive={false}     // [iOS] Video continues to play whcontrol or notification center are shown.
+  onLoadStart={this.loadStart} // Callback when video starts to load
+  onLoad={this.setDuration}    // Callback when video loads
+  onProgress={this.setTime}    // Callback every ~250ms with currentTime
+  onEnd={this.onEnd}           // Callback when playback finishes
+  onError={this.videoError}    // Callback when video cannot be loaded
+  style={styles.backgroundVideo}
+/>
 
 // Later on in your styles..
 var styles = StyleSheet.create({
@@ -110,9 +116,24 @@ var styles = StyleSheet.create({
 });
 ```
 
+### Load files with the RN Asset System
+
+The asset system [introduced in RN `0.14`](http://www.reactnative.com/react-native-v0-14-0-released/) allows loading local static resources using a `require` statement. As of version `react-native-video@0.9.0`, it's also be used to load video files in the same manner, e.g.
+
+```
+<Video
+  repeat
+  resizeMode='cover'
+  source={require('../assets/video/turntable-loop-1920x500-h264-512kbps-h264.mp4')}
+  style={styles.backgroundVideo}
+/>
+```
+
+**Tip**: When loading files locally on iOS it's necessary to add static video file to the _Copy Bundle Resources_ section of _Build Phases_ for your project's build target in Xcode.
+
 ### 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].
+To enable audio to play in background on iOS the audio session needs to be set to `AVAudioSessionCategoryPlayback`. See [Apple documentation][3] for additional details.
 
 ## Static Methods
 
@@ -122,7 +143,7 @@ Seeks the video to the specified time (in seconds). Access using a ref to the co
 
 ## Examples
 
-- See an [Example integration][1] in `react-native-login` *note that this example uses an older version of this library, before we used `export default` -- if you use `require` you will need to do `require('react-native-video').default` as per instructions above.
+- See an [Example integration][1] in `react-native-login` *note that this example uses an older version of this library, before we used `export default` -- if you use `require` you will need to do `require('react-native-video').default` as per instructions above.*
 - Try the included [VideoPlayer example][2] yourself:
 
    ```sh
@@ -135,6 +156,8 @@ Seeks the video to the specified time (in seconds). Access using a ref to the co
 
    Then `Cmd+R` to start the React Packager, build and run the project in the simulator.
 
+- [Lumpen Radio](https://github.com/jhabdas/lumpen-radio) contains another example integration using local files and full screen background video.
+
 ## TODOS
 
 - [ ] Add support for captions