diff --git a/CHANGELOG.md b/CHANGELOG.md index 6a5bdef7..a751c389 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,23 @@ ## Changelog ### Version 6.0.0-alpha1 - +- Support disabling buffering [#2689](https://github.com/react-native-video/react-native-video/pull/2689) +- Fix AudioFocus bug that could cause the player to stop responding to play/pause in some instances. [#2689](https://github.com/react-native-video/react-native-video/pull/2689) +- Fix player crashing when it is being cleared. [#2689](https://github.com/react-native-video/react-native-video/pull/2689) +- Add support for customising back buffer duration and handle network errors gracefully to prevent releasing the player when network is lost. [#2689](https://github.com/react-native-video/react-native-video/pull/2689) +- Allow player to be init before source is provided, and later update once a source is provided. [#2689](https://github.com/react-native-video/react-native-video/pull/2689) +- Adds handling for providing a empty source in order to stop playback and clear out any existing content [#2689](https://github.com/react-native-video/react-native-video/pull/2689) +- Add support for detecting if format is supported and exclude unsupported resolutions from auto quality selection and video track info in RN. [#2689](https://github.com/react-native-video/react-native-video/pull/2689) +- Improve error handling [#2689](https://github.com/react-native-video/react-native-video/pull/2689) +- Add support for L1 to L3 Widevine fallback if playback fails initially. [#2689](https://github.com/react-native-video/react-native-video/pull/2689) +- Reduce buffer size based on available heap [#2689](https://github.com/react-native-video/react-native-video/pull/2689) +- Force garbage collection when there is no available memory [#2689](https://github.com/react-native-video/react-native-video/pull/2689) +- Improve memory usage [#2689](https://github.com/react-native-video/react-native-video/pull/2689) +- Support disabling screen recording [#2689](https://github.com/react-native-video/react-native-video/pull/2689) +- Improved error capturing [#2689](https://github.com/react-native-video/react-native-video/pull/2689) +- Fix DRM init crashes [#2689](https://github.com/react-native-video/react-native-video/pull/2689) +- Improve progress reporting [#2689](https://github.com/react-native-video/react-native-video/pull/2689) +- Fix progress loss when network connection is regained [#2689](https://github.com/react-native-video/react-native-video/pull/2689) - Add Google's maven repository to avoid build error [#2552](https://github.com/react-native-video/react-native-video/pull/2552) - Fix iOS 15.4 HLS playback race condition [#2633](https://github.com/react-native-video/react-native-video/pull/2633) - Fix app crash from NPE in Exoplayer error handler [#2575](https://github.com/react-native-video/react-native-video/pull/2575) diff --git a/README.md b/README.md index 6dc7b1c7..998d7ded 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,1627 @@ Version 4.x requires react-native >= 0.57.0 Version 3.x requires react-native >= 0.40.0 +### Version 5.0.0 breaking changes + +Version 5 introduces breaking changes on Android, please check carefully the steps described there: [Android Installation](#Android-installation) + +### Version 4.0.0 breaking changes +Version 4.0.0 changes some behaviors and may require updates to your Gradle files. See [Updating](#updating) for details. + +Version 4.0.0 now requires Android target SDK 26+ and Gradle 3 plugin in order to support ExoPlayer 2.9.0. Google is dropping support for apps using target SDKs older than 26 as of October 2018 and Gradle 2 as of January 2019. React Native 0.57 defaults to Gradle 3 & SDK 27. + +If you need to support an older React Native version, you should use react-native-video 3.2.1. + +### Version 3.0.0 breaking changes +Version 3.0 features a number of changes to existing behavior. See [Updating](#updating) for changes. + +## Table of Contents + +* [Installation](#installation) + * [iOS](#ios-installation) + * [tvOS](#tvos-installation) + * [Android](#android-installation) + * [Windows](#windows-installation) + * [react-native-dom](#react-native-dom-installation) +* [Examples](#examples) + * [iOS](#ios-example) + * [Android](#android-example) + * [Windows](#windows-example) +* [Usage](#usage) +* [iOS App Transport Security](#ios-app-transport-security) +* [Audio Mixing](#audio-mixing) +* [Android Expansion File Usage](#android-expansion-file-usage) +* [Updating](#updating) + +## Installation + +Using npm: + +```shell +npm install --save react-native-video +``` + +or using yarn: + +```shell +yarn add react-native-video +``` + +Then follow the instructions for your platform to link react-native-video into your project: + +### iOS installation +
+ iOS details + +#### Standard Method + +**React Native 0.60 and above** + +Run `npx pod-install`. Linking is not required in React Native 0.60 and above. + +**React Native 0.59 and below** + +Run `react-native link react-native-video` to link the react-native-video library. + +#### Enable Static Linking for dependencies in your ios project Podfile + +Add `use_frameworks! :linkage => :static` just under `platform :ios` in your ios project Podfile. + +[See the example ios project for reference](examples/basic/ios/Podfile#L5) + +#### Using CocoaPods (required to enable caching) + +Setup your Podfile like it is described in the [react-native documentation](https://facebook.github.io/react-native/docs/integration-with-existing-apps#configuring-cocoapods-dependencies). + +Depending on your requirements you have to choose between the two possible subpodspecs: + +Video only: + +```diff + pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec' ++ `pod 'react-native-video', :path => '../node_modules/react-native-video/react-native-video.podspec'` +end +``` + +Video with caching ([more info](docs/caching.md)): + +```diff + pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec' ++ `pod 'react-native-video/VideoCaching', :path => '../node_modules/react-native-video/react-native-video.podspec'` +end +``` + +
+ +### tvOS installation +
+ tvOS details + +`react-native link react-native-video` doesn’t work properly with the tvOS target so we need to add the library manually. + +First select your project in Xcode. + + + +After that, select the tvOS target of your application and select « General » tab + + + +Scroll to « Linked Frameworks and Libraries » and tap on the + button + + + +Select RCTVideo-tvOS + + +
+ +### Android installation +
+ Android details + +Linking is not required in React Native 0.60 and above. +If your project is using React Native < 0.60, run `react-native link react-native-video` 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 MediaPlayer 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** + +From version >= 5.0.0, you have to apply these changes: + +```diff +dependencies { + ... + compile project(':react-native-video') ++ implementation "androidx.appcompat:appcompat:1.0.0" +- implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}" + +} +``` + +#### **android/gradle.properties** + +Migrating to AndroidX (needs version >= 5.0.0): + +```gradle.properties +android.useAndroidX=true +android.enableJetifier=true +``` + +#### **MainApplication.java** + +If using com.facebook.react.PackageList to auto import native dependencies, there are no updates required here. Please see the android example project for more details. +/examples/basic/android/app/src/main/java/com/videoplayer/MainApplication.java + +##### For manual linking + +On top, where imports are: + +```java +import com.brentvatne.react.ReactVideoPackage; +``` + +Add the `ReactVideoPackage` class to your list of exported packages. + +```java +@Override +protected List getPackages() { + return Arrays.asList( + new MainReactPackage(), + new ReactVideoPackage() + ); +} +``` +
+ +### Windows installation +
+ Windows RNW C++/WinRT details + +#### Autolinking + +**React Native Windows 0.63 and above** + +Autolinking should automatically add react-native-video to your app. + +#### Manual Linking + +**React Native Windows 0.62** + +Make the following additions to the given files manually: + +##### **windows\myapp.sln** + +Add the _ReactNativeVideoCPP_ project to your solution (eg. `windows\myapp.sln`): + +1. Open your solution in Visual Studio 2019 +2. Right-click Solution icon in Solution Explorer > Add > Existing Project... +3. Select `node_modules\react-native-video\windows\ReactNativeVideoCPP\ReactNativeVideoCPP.vcxproj` + +##### **windows\myapp\myapp.vcxproj** + +Add a reference to _ReactNativeVideoCPP_ to your main application project (eg. `windows\myapp\myapp.vcxproj`): + +1. Open your solution in Visual Studio 2019 +2. Right-click main application project > Add > Reference... +3. Check _ReactNativeVideoCPP_ from Solution Projects + +##### **pch.h** + +Add `#include "winrt/ReactNativeVideoCPP.h"`. + +##### **app.cpp** + +Add `PackageProviders().Append(winrt::ReactNativeVideoCPP::ReactPackageProvider());` before `InitializeComponent();`. + +**React Native Windows 0.61 and below** + +Follow the manual linking instuctions for React Native Windows 0.62 above, but substitute _ReactNativeVideoCPP61_ for _ReactNativeVideoCPP_. + +
+ +### react-native-dom installation +
+ react-native-dom details + +Make the following additions to the given files manually: + +#### **dom/bootstrap.js** + +Import RCTVideoManager and add it to the list of nativeModules: + +```javascript +import { RNDomInstance } from "react-native-dom"; +import { name as appName } from "../app.json"; +import RCTVideoManager from 'react-native-video/dom/RCTVideoManager'; // Add this + +// Path to RN Bundle Entrypoint ================================================ +const rnBundlePath = "./entry.bundle?platform=dom&dev=true"; + +// React Native DOM Runtime Options ============================================= +const ReactNativeDomOptions = { + enableHotReload: false, + nativeModules: [RCTVideoManager] // Add this +}; +``` +
+ +## Examples + +Run `yarn xbasic install` before running any of the examples. + +### iOS Example +``` +yarn xbasic ios +``` + +### Android Example +``` +yarn xbasic android +``` + +### Windows Example +``` +yarn xbasic windows +``` + +## Usage + +```javascript +// Load the module + +import Video from 'react-native-video'; + +// 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. + +