Merge remote-tracking branch 'upstream/master'

## Changelog

### Version 3.0

* Inherit Android buildtools and SDK version from the root project [#1081](https://github.com/react-native-community/react-native-video/pull/1081)

* Automatically play on ExoPlayer when the paused prop is not set [#1083](https://github.com/react-native-community/react-native-video/pull/1083)

* Preserve Android MediaPlayer paused prop when backgrounding [#1082](https://github.com/react-native-community/react-native-video/pull/1082)

* Support specifying headers on ExoPlayer as part of the source [#805](https://github.com/react-native-community/react-native-video/pull/805)

* Prevent iOS onLoad event during seeking [#1088](https://github.com/react-native-community/react-native-video/pull/1088)

* ExoPlayer playableDuration incorrect [#1089](https://github.com/react-native-community/react-native-video/pull/1089)

### Version 2.3.1

* Revert PR to inherit Android SDK versions from root project. Re-add in 3.0 [#1080](https://github.com/react-native-community/react-native-video/pull/1080)

### Version 2.3.0

* Support allowsExternalPlayback on iOS [#1057](https://github.com/react-native-community/react-native-video/pull/1057)

* Inherit Android buildtools and SDK version from the root project [#999](https://github.com/react-native-community/react-native-video/pull/999)

Requires react-native >= 0.40.0, for RN support of 0.19.0 - 0.39.0 please use a pre 1.0 version.

### Version 3.0 breaking changes

Version 3.0 features a number of changes to existing behavior. See [Updating](#updating) for changes.

## TOC

* [Installation](#installation)

* [Usage](#usage)

* [Updating](#updating)

## Installation

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.

`react-native link` doesn’t work properly with the tvOS target so we need to add the library manually.

First select your project in Xcode.

       onFullscreenPlayerDidPresent={this.fullScreenPlayerDidPresent}   // Callback after fullscreen started

       onFullscreenPlayerWillDismiss={this.fullScreenPlayerWillDismiss} // Callback before fullscreen stops

       onFullscreenPlayerDidDismiss={this.fullScreenPlayerDidDismiss}  // Callback after fullscreen stopped

       onProgress={this.setTime}               // Callback every ~250ms with currentTime

       onTimedMetadata={this.onTimedMetadata}  // Callback when the stream receive some metadata

       style={styles.backgroundVideo} />

// Later to trigger fullscreen

### Event props

* [onLoad](#onload)

* [onLoadStart](#onloadstart)

* [onProgress](#onprogress)

* [onTimedMetadata](#ontimedmetadata)

### Methods

* [seek](#seek)

Property | Description

--- | ---

isNetwork | Boolean indicating if the media is being loaded from the network

type | Type of the media. Not available on Windows

uri | URI for the media source. Not available on Windows

isNetwork | boolean | Boolean indicating if the media is being loaded from the network

type | string | Type of the media. Not available on Windows

uri | string | URI for the media source. Not available on Windows

Example:

```

Platforms: all

#### onProgress

Callback function that is called every progressInterval seconds with info about which position the media is currently playing.

Property | Description

--- | ---

currentTime | number | Current position in seconds

playableDuration | number | Position to where the media can be played to using just the buffer in seconds

seekableDuration | number | Position to where the media can be seeked to in seconds. Typically, the total length of the media

Example:

```

{

  currentTime: 5.2,

  playableDuration: 34.6,

  seekableDuration: 888

}

```

#### onTimedMetadata

Callback function that is called when timed metadata becomes available

Payload:

Property | Type | Description

--- | --- | ---

metadata | array | Array of metadata objects

Example:

```

{

  metadata: [

    { value: 'Streaming Encoder', identifier: 'TRSN' },

    { value: 'Internet Stream', identifier: 'TRSO' },

    { value: 'Any Time You Like', identifier: 'TIT2' }

  ]

}

```

Platforms: Android ExoPlayer, iOS

### Methods

Methods operate on a ref to the Video element. You can create a ref using code like:

```

</details>

### 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}}

/>

Expansions files allow you to ship assets that exceed the 100MB apk size limit and don't need to be updated each time you push an app update.

This only supports mp4 files and they must not be compressed. Example command line for preventing compression:

```bash

zip -r -n .mp4 *.mp4 player.video.example.com

```

This will look for an .mp4 file (background.mp4) in the given expansion version.

```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.

       resizeMode="cover"           // Fill the whole screen at aspect ratio.

       style={styles.backgroundVideo} />

### Load files with the RN Asset System

- [Lumpen Radio](https://github.com/jhabdas/lumpen-radio) contains another example integration using local files and full screen background video.

## Updating

### Version 3.0

#### All platforms now auto-play

Previously, on Android ExoPlayer if the paused prop was not set, the media would not automatically start playing. The only way it would work was if you set `paused={false}`. This has been changed to automatically play if paused is not set so that the behavior is consistent across platforms.

#### All platforms now keep their paused state when returning from the background

Previously, on Android MediaPlayer if you setup an AppState event when the app went into the background and set a paused prop so that when you returned to the app the video would be paused it would be ignored.

Note, Windows does not have a concept of an app going into the background, so this doesn't apply there.

#### Use Android SDK 27 by default

Version 3.0 updates the Android build tools and SDK to version 27. React Native is in the process of [switchting over](https://github.com/facebook/react-native/issues/18095#issuecomment-395596130) to SDK 27 in preparation for Google's requirement that new Android apps [use SDK 26](https://android-developers.googleblog.com/2017/12/improving-app-security-and-performance.html) by August 2018.

You will either need to install the version 27 SDK and version 27.0.3 buildtools or modify your build.gradle file to configure react-native-video to use the same build settings as the rest of your app as described below.

##### Using app build settings

You will need to create a `project.ext` section in the top-level build.gradle file (not app/build.gradle). Fill in the values from the example below using the values found in your app/build.gradle file.

```

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {

    ... // Various other settings go here

}

allprojects {

    ... // Various other settings go here

    project.ext {

        compileSdkVersion = 23

        buildToolsVersion = "23.0.1"

        minSdkVersion = 16

        targetSdkVersion = 22

    }

}

```

If you encounter an error `Could not find com.android.support:support-annotations:27.0.0.` reinstall your Android Support Repository.

## TODOS

- [ ] Add support for captions

- [ ] Add support for playing multiple videos in a sequence (will interfere with current `repeat` implementation)

- [x] Callback to get buffering progress for remote videos

- [ ] Bring API closer to HTML5 `<Video>` [reference](http://devdocs.io/html/element/video)

    this._root.setNativeProps(nativeProps);

  }

  toTypeString(x) {

    switch (typeof x) {

      case "object":

        return x instanceof Date 

          ? x.toISOString() 

          : JSON.stringify(x); // object, null

      case "undefined":

        return "";

      default: // boolean, number, string

        return x.toString();      

    }

  }

  stringsOnlyObject(obj) {

    const strObj = {};

    Object.keys(obj).forEach(x => {

      strObj[x] = this.toTypeString(obj[x]);

    });

    return strObj;

  }

  seek = (time, tolerance = 100) => {

    if (Platform.OS === 'ios') {

      this.setNativeProps({

        type: source.type || '',

        mainVer: source.mainVer || 0,

        patchVer: source.patchVer || 0,

        requestHeaders: source.headers ? this.stringsOnlyObject(source.headers) : {}

      },

      onVideoLoadStart: this._onLoadStart,

      onVideoLoad: this._onLoad,

import okhttp3.Cookie;

import okhttp3.JavaNetCookieJar;

import okhttp3.OkHttpClient;

import java.util.Map;

public class DataSourceUtil {

        DataSourceUtil.rawDataSourceFactory = factory;

    }

    public static DataSource.Factory getDefaultDataSourceFactory(ReactContext context, DefaultBandwidthMeter bandwidthMeter) {

        if (defaultDataSourceFactory == null) {

            defaultDataSourceFactory = buildDataSourceFactory(context, bandwidthMeter);

    public static DataSource.Factory getDefaultDataSourceFactory(ReactContext context, DefaultBandwidthMeter bandwidthMeter, Map<String, String> requestHeaders) {

        if (defaultDataSourceFactory == null || (requestHeaders != null && !requestHeaders.isEmpty())) {

            defaultDataSourceFactory = buildDataSourceFactory(context, bandwidthMeter, requestHeaders);

        }

        return defaultDataSourceFactory;

    }

        return new RawResourceDataSourceFactory(context.getApplicationContext());

    }

    private static DataSource.Factory buildDataSourceFactory(ReactContext context, DefaultBandwidthMeter bandwidthMeter) {

    private static DataSource.Factory buildDataSourceFactory(ReactContext context, DefaultBandwidthMeter bandwidthMeter, Map<String, String> requestHeaders) {

        return new DefaultDataSourceFactory(context, bandwidthMeter,

                buildHttpDataSourceFactory(context, bandwidthMeter));

                buildHttpDataSourceFactory(context, bandwidthMeter, requestHeaders));

    }

    private static HttpDataSource.Factory buildHttpDataSourceFactory(ReactContext context, DefaultBandwidthMeter bandwidthMeter) {

    private static HttpDataSource.Factory buildHttpDataSourceFactory(ReactContext context, DefaultBandwidthMeter bandwidthMeter, Map<String, String> requestHeaders) {

        OkHttpClient client = OkHttpClientProvider.getOkHttpClient();

        CookieJarContainer container = (CookieJarContainer) client.cookieJar();

        ForwardingCookieHandler handler = new ForwardingCookieHandler(context);

        container.setCookieJar(new JavaNetCookieJar(handler));

        return new OkHttpDataSourceFactory(client, getUserAgent(context), bandwidthMeter);

    }

        OkHttpDataSourceFactory okHttpDataSourceFactory = new OkHttpDataSourceFactory(client, getUserAgent(context), bandwidthMeter);

        if (requestHeaders != null)

            okHttpDataSourceFactory.getDefaultRequestProperties().set(requestHeaders);

        return okHttpDataSourceFactory;

    }

}

import java.net.CookieManager;

import java.net.CookiePolicy;

import java.lang.Math;

import java.util.Map;

import java.lang.Object;

import java.util.ArrayList;

    private boolean loadVideoStarted;

    private boolean isFullscreen;

    private boolean isInBackground;

    private boolean isPaused = true;

    private boolean isPaused;

    private boolean isBuffering;

    private float rate = 1f;

    private float mProgressUpdateInterval = 250.0f;

    private boolean playInBackground = false;

    private boolean useTextureView = false;

    private Map<String, String> requestHeaders;

    // \ End props

    // React

                            && player.getPlayWhenReady()

                            ) {

                        long pos = player.getCurrentPosition();

                        long bufferedDuration = player.getBufferedPercentage() * player.getDuration();

                        long bufferedDuration = player.getBufferedPercentage() * player.getDuration() / 100;

                        eventEmitter.progressChanged(pos, bufferedDuration, player.getDuration());

                        msg = obtainMessage(SHOW_PROGRESS);

                        sendMessageDelayed(msg, Math.round(mProgressUpdateInterval));

     * @return A new DataSource factory.

     */

    private DataSource.Factory buildDataSourceFactory(boolean useBandwidthMeter) {

        return DataSourceUtil.getDefaultDataSourceFactory(this.themedReactContext, useBandwidthMeter ? BANDWIDTH_METER : null);

        return DataSourceUtil.getDefaultDataSourceFactory(this.themedReactContext, useBandwidthMeter ? BANDWIDTH_METER : null, requestHeaders);

    }

    // AudioManager.OnAudioFocusChangeListener implementation

    // ReactExoplayerViewManager public api

    public void setSrc(final Uri uri, final String extension) {

    public void setSrc(final Uri uri, final String extension, Map<String, String> headers) {

        if (uri != null) {

            boolean isOriginalSourceNull = srcUri == null;

            boolean isSourceEqual = uri.equals(srcUri);

            this.srcUri = uri;

            this.extension = extension;

            this.mediaDataSourceFactory = DataSourceUtil.getDefaultDataSourceFactory(this.themedReactContext, BANDWIDTH_METER);

            this.requestHeaders = headers;

            this.mediaDataSourceFactory = DataSourceUtil.getDefaultDataSourceFactory(this.themedReactContext, BANDWIDTH_METER, this.requestHeaders);

            if (!isOriginalSourceNull && !isSourceEqual) {

                reloadSource();