Merge remote-tracking branch 'upstream/master'

Author: keenjoe007

CHANGELOG.md

@@ -0,0 +1,6 @@
+## Changelog
+
+Upcoming release
+* Remove ExoPlayer onMetadata that wasn't being used (https://github.com/react-native-community/react-native-video/pull/1040)
+* Fix bug where setting the progress interval on iOS didn't work (https://github.com/react-native-community/react-native-video/pull/800)
+* Support setting the poster resize mode (https://github.com/react-native-community/react-native-video/pull/595)

README.md

@@ -5,11 +5,27 @@ A `<Video>` component for react-native, as seen in
 
 Requires react-native >= 0.40.0, for RN support of 0.19.0 - 0.39.0 please use a pre 1.0 version.
 
-### Add it to your project
+## TOC
 
-Run `npm i -S react-native-video`
+* [Installation](#installation)
+* [Usage](#usage)
 
-#### iOS
+## Installation
+
+Using npm:
+
+```shell
+npm install --save react-native-video
+```
+
+or using yarn:
+
+```shell
+yarn add react-native-video
+```
+
+<details>
+  <summary>iOS</summary>
 
 Run `react-native link` to link the react-native-video library.
 
@@ -28,9 +44,11 @@ If you would like to allow other apps to play music over your video component, a
 }
 ```
 Note: you can also use the `ignoreSilentSwitch` prop, shown below.
+</details>
 
-#### tvOS
-
+<details>
+  <summary>tvOS</summary>
+  
 Run `react-native link` to link the react-native-video library.
 
 `react-native link` don’t works properly with the tvOS target so we need to add the library manually.
@@ -50,22 +68,32 @@ Scroll to « Linked Frameworks and Libraries » and tap on the + button
 Select RCTVideo-tvOS
 
 <img src="./docs/tvOS-step-4.jpg" width="40%">
+</details>
 
-That’s all, you can use react-native-video for your tvOS application
-
-#### Android
+<details>
+  <summary>Android</summary>
 
 Run `react-native link` to link the react-native-video library.
 
 Or if you have trouble, make the following additions to the given files manually:
 
 **android/settings.gradle**
 
+The newer ExoPlayer library will work for most people.
+
+```gradle
+include ':react-native-video'
+project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer')
+```
+
+If you need to use the old Android media player based player, use the following instead:
+
 ```gradle
 include ':react-native-video'
 project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android')
 ```
 
+
 **android/app/build.gradle**
 
 ```gradle
@@ -94,8 +122,10 @@ protected List<ReactPackage> getPackages() {
     );
 }
 ```
+</details>
 
-#### Windows
+<details>
+  <summary>Windows</summary>
 
 Make the following additions to the given files manually:
 
@@ -104,19 +134,17 @@ Make the following additions to the given files manually:
 Add the `ReactNativeVideo` project to your solution.
 
 1. Open the solution in Visual Studio 2015
-2. Right-click Solution icon in Solution Explorer > Add > Existing Project...
-3.
-  UWP: Select `node_modules\react-native-video\windows\ReactNativeVideo\ReactNativeVideo.csproj`
-  WPF: Select `node_modules\react-native-video\windows\ReactNativeVideo.Net46\ReactNativeVideo.Net46.csproj`
+2. Right-click Solution icon in Solution Explorer > Add > Existing Project
+  * UWP: Select `node_modules\react-native-video\windows\ReactNativeVideo\ReactNativeVideo.csproj`
+  * WPF: Select `node_modules\react-native-video\windows\ReactNativeVideo.Net46\ReactNativeVideo.Net46.csproj`
 
 **windows/myapp/myapp.csproj**
 
 Add a reference to `ReactNativeVideo` to your main application project. From Visual Studio 2015:
 
 1. Right-click main application project > Add > Reference...
-2.
-  UWP: Check `ReactNativeVideo` from Solution Projects.
-  WPF: Check `ReactNativeVideo.Net46` from Solution Projects.
+  * UWP: Check `ReactNativeVideo` from Solution Projects.
+  * WPF: Check `ReactNativeVideo.Net46` from Solution Projects.
 
 **MainPage.cs**
 
@@ -143,6 +171,7 @@ using System.Collections.Generic;
 
 ...
 ```
+</details>
 
 ## Usage
 
@@ -153,31 +182,39 @@ using System.Collections.Generic;
 
 <Video source={{uri: "background"}}   // Can be a URL or a local file.
        poster="https://baconmockup.com/300/200/" // uri to an image to display until the video plays
+       posterResizeMode="contain"              // Poster resize mode. One of contain (default), cover, stretch, center, repeat
        ref={(ref) => {
          this.player = ref
        }}                                      // Store reference
        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.
+       muted={true|false}                      // Mutes the audio entirely. Default false
+       paused={true|false}                     // Pauses playback entirely. Default false
        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.
+       repeat={true|false}                     // Repeat forever. Default false
+       playInBackground={true|false}           // Audio continues to play when app entering background. Default false
+       playWhenInactive={true|false}           // [iOS] Video continues to play when control or notification center are shown. Default false
        ignoreSilentSwitch={"ignore"}           // [iOS] ignore | obey - When 'ignore', audio will still play with the iOS hard silent switch set to silent. When 'obey', audio will toggle with the switch. When not specified, will inherit audio settings as usual.
        progressUpdateInterval={250.0}          // [iOS] Interval to fire onProgress (default to ~250ms)
+       onBuffer={this.onBuffer}                // Callback when remote video is buffering
+       onEnd={this.onEnd}                      // Callback when playback finishes
+       onError={this.videoError}               // Callback when video cannot be loaded
+       onFullscreenPlayerWillPresent={this.fullScreenPlayerWillPresent} // Callback before fullscreen starts
+       onFullscreenPlayerDidPresent={this.fullScreenPlayerDidPresent}   // Callback after fullscreen started
+       onFullscreenPlayerWillDismiss={this.fullScreenPlayerWillDismiss} // Callback before fullscreen stops
+       onFullscreenPlayerDidDismiss={this.fullScreenPlayerDidDissmiss}  // Callback after fullscreen stopped
        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
-       onBuffer={this.onBuffer}                // Callback when remote video is buffering
        onTimedMetadata={this.onTimedMetadata}  // Callback when the stream receive some metadata
        style={styles.backgroundVideo} />
 
 // Later to trigger fullscreen
 this.player.presentFullscreenPlayer()
 
+// Disable fullscreen
+this.player.dismissFullscreenPlayer()
+
 // To set video position in seconds (seek)
 this.player.seek(0)
 
@@ -192,70 +229,39 @@ var styles = StyleSheet.create({
   },
 });
 ```
+To see the full list of available props, you can check the [propTypes](https://github.com/react-native-community/react-native-video/blob/master/Video.js#L246) of the Video.js component.
 
-- * *For iOS you also need to specify muted for this to work*
+- By default, iOS 9+ will only load encrypted HTTPS urls. If you need to load content from a webserver that only supports HTTP, you will need to modify your Info.plist file and add the following entry:
 
-To see full list of available props, you can check [the propTypes](https://github.com/react-native-community/react-native-video/blob/master/Video.js#L246) of the Video.js component.
+<img src="./docs/AppTransportSecuritySetting.png" width="50%">
 
-## Android Expansion File Usage
+For more detailed info check this [article](https://cocoacasts.com/how-to-add-app-transport-security-exception-domains)
+</details>
 
-```javascript
-// Within your render function, assuming you have a file called
-// "background.mp4" in your expansion file. Just add your main and (if applicable) patch version
-<Video source={{uri: "background", mainVer: 1, patchVer: 0}} // Looks for .mp4 file (background.mp4) in the given expansion version.
-       poster="https://baconmockup.com/300/200/" // uri to an image to display until the video plays
-       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.
-       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({
-  backgroundVideo: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    bottom: 0,
-    right: 0,
-  },
-});
+### Android Expansion File Usage
+Within your render function, assuming you have a file called
+"background.mp4" in your expansion file. Just add your main and (if applicable) patch version
+```
+<Video
+  source={{uri: "background", mainVer: 1, patchVer: 0}}
+/>
 ```
+This will look for an .mp4 file (background.mp4) in the given expansion version.
 
 ### 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 image resources shared across iOS and Android without touching native code. As of RN `0.31` [the same is true](https://github.com/facebook/react-native/commit/91ff6868a554c4930fd5fda6ba8044dbd56c8374) of mp4 video assets for Android. As of [RN `0.33`](https://github.com/facebook/react-native/releases/tag/v0.33.0) iOS is also supported. Requires `[email protected]`.
 
 ```
 <Video
-  repeat
-  resizeMode='cover'
   source={require('../assets/video/turntable.mp4')}
-  style={styles.backgroundVideo}
 />
 ```
 
 ### 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] for additional details. (NOTE: there is now a ticket to [expose this as a prop]( https://github.com/react-native-community/react-native-video/issues/310) )
 
-## Static Methods
-
-`seek(seconds)`
-
-Seeks the video to the specified time (in seconds). Access using a ref to the component
-
-`presentFullscreenPlayer()`
-
-Toggles a fullscreen player. Access using a ref to the component.
-
 ## 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.*

Video.js

@@ -218,7 +218,7 @@ export default class Video extends Component {
         top: 0,
         right: 0,
         bottom: 0,
-        resizeMode: 'contain',
+        resizeMode: this.props.posterResizeMode || 'contain'
       };
 
       return (
@@ -272,6 +272,7 @@ Video.propTypes = {
   ]),
   resizeMode: PropTypes.string,
   poster: PropTypes.string,
+  posterResizeMode: Image.propTypes.resizeMode,
   repeat: PropTypes.bool,
   paused: PropTypes.bool,
   muted: PropTypes.bool,

android-exoplayer/build.gradle

@@ -12,9 +12,9 @@ android {
 
 dependencies {
     provided 'com.facebook.react:react-native:+'
-    compile 'com.google.android.exoplayer:exoplayer:r2.4.0'
-    compile('com.google.android.exoplayer:extension-okhttp:r2.4.0') {
+    compile 'com.google.android.exoplayer:exoplayer:2.7.3'
+    compile('com.google.android.exoplayer:extension-okhttp:2.7.3') {
         exclude group: 'com.squareup.okhttp3', module: 'okhttp'
     }
-    compile 'com.squareup.okhttp3:okhttp:3.4.2'
+    compile 'com.squareup.okhttp3:okhttp:3.9.1'
 }

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

@@ -18,15 +18,14 @@
 import com.google.android.exoplayer2.PlaybackParameters;
 import com.google.android.exoplayer2.SimpleExoPlayer;
 import com.google.android.exoplayer2.Timeline;
-import com.google.android.exoplayer2.metadata.Metadata;
-import com.google.android.exoplayer2.metadata.MetadataRenderer;
 import com.google.android.exoplayer2.source.TrackGroupArray;
 import com.google.android.exoplayer2.text.Cue;
 import com.google.android.exoplayer2.text.TextRenderer;
 import com.google.android.exoplayer2.trackselection.TrackSelectionArray;
 import com.google.android.exoplayer2.ui.SubtitleView;
 
 import java.util.List;
+import java.lang.Object;
 
 @TargetApi(16)
 public final class ExoPlayerView extends FrameLayout {
@@ -100,7 +99,6 @@ public void setPlayer(SimpleExoPlayer player) {
             this.player.setVideoListener(null);
             this.player.removeListener(componentListener);
             this.player.setVideoSurface(null);
-            this.player.setMetadataOutput(componentListener);
         }
         this.player = player;
         shutterView.setVisibility(VISIBLE);
@@ -113,7 +111,6 @@ public void setPlayer(SimpleExoPlayer player) {
             player.setVideoListener(componentListener);
             player.addListener(componentListener);
             player.setTextOutput(componentListener);
-            player.setMetadataOutput(componentListener);
         }
     }
 
@@ -167,7 +164,7 @@ private void updateForCurrentTrackSelections() {
     }
 
     private final class ComponentListener implements SimpleExoPlayer.VideoListener,
-            TextRenderer.Output, ExoPlayer.EventListener, MetadataRenderer.Output {
+            TextRenderer.Output, ExoPlayer.EventListener {
 
         // TextRenderer.Output implementation
 
@@ -212,12 +209,12 @@ public void onPlayerError(ExoPlaybackException e) {
         }
 
         @Override
-        public void onPositionDiscontinuity() {
+        public void onPositionDiscontinuity(int reason) {
             // Do nothing.
         }
 
         @Override
-        public void onTimelineChanged(Timeline timeline, Object manifest) {
+        public void onTimelineChanged(Timeline timeline, Object manifest, int reason) {
             // Do nothing.
         }
 
@@ -232,8 +229,18 @@ public void onPlaybackParametersChanged(PlaybackParameters params) {
         }
 
         @Override
-        public void onMetadata(Metadata metadata) {
-            Log.d("onMetadata", "onMetadata");
+        public void onSeekProcessed() {
+            // Do nothing.
+        }
+
+        @Override
+        public void onShuffleModeEnabledChanged(boolean shuffleModeEnabled) {
+            // Do nothing.
+        }
+
+        @Override
+        public void onRepeatModeChanged(int repeatMode) {
+            // Do nothing.
         }
     }