diff --git a/.eslintrc b/.eslintrc index bb38fe3b82..24a2055d3c 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,4 +1,3 @@ { - "extends": "airbnb", - "parser": "babel-eslint" + "extends": "@react-native-community", } \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000000..1d4c3eff7a --- /dev/null +++ b/.prettierrc @@ -0,0 +1,8 @@ +{ + "requirePragma": true, + "singleQuote": true, + "trailingComma": "all", + "bracketSpacing": false, + "jsxBracketSameLine": true, + "parser": "flow" +} \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index d410045dd2..53e2518cf7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,139 +1,201 @@ ## Changelog +### Version 5.1.0-alpha9 + +- Add ARM64 support for windows [#2137](https://github.com/react-native-community/react-native-video/pull/2137) + +### Version 5.1.0-alpha8 + +- Fixing ID3 Frame Error When Receiving EventMessage in TimedMetadata [#2116](https://github.com/react-native-community/react-native-video/pull/2116) + +### Version 5.1.0-alpha7 + +- Basic support for DRM on iOS and Android [#1445](https://github.com/react-native-community/react-native-video/pull/1445) + +### Version 5.1.0-alpha6 + +- Fix iOS bug which would break size of views when video is displayed with controls on a non full-screen React view. [#1931](https://github.com/react-native-community/react-native-video/pull/1931) +- Fix video dimensions being undefined when playing HLS in ios. [#1992](https://github.com/react-native-community/react-native-video/pull/1992) +- Add support for audio mix with other apps for iOS. [#1978](https://github.com/react-native-community/react-native-video/pull/1978) +- Properly implement pending seek for iOS. [#1994](https://github.com/react-native-community/react-native-video/pull/1994) +- Added `preferredForwardBufferDuration` (iOS) - the duration the player should buffer media from the network ahead of the playhead to guard against playback disruption. (#1944) +- Added `currentPlaybackTime` (Android ExoPlayer, iOS) - when playing an HLS live stream with a `EXT-X-PROGRAM-DATE-TIME` tag configured, then this property will contain the epoch value in msec. (#1944) +- Added `trackId` (Android ExoPlayer) - Configure an identifier for the video stream to link the playback context to the events emitted. (#1944) +- Added preventsDisplaySleepDuringVideoPlayback (#2019) +- Reverted the JS fullscreening for Android. [#2013](https://github.com/react-native-community/react-native-video/pull/2013) +- Set iOS request headers without needing to edit RCTVideo.m. [#2014](https://github.com/react-native-community/react-native-video/pull/2014) +- Fix exoplayer aspect ratio update on source changes [#2053](https://github.com/react-native-community/react-native-video/pull/2053) + +### Version 5.1.0-alpha5 + +- Add support for react-native Windows Cpp/WinRT [#1893]((https://github.com/react-native-community/react-native-video/pull/1893)) + +### Version 5.1.0-alpha4 + +- Fix android play/pause bug related to full-screen mode [#1916](https://github.com/react-native-community/react-native-video/pull/1916) + +### Version 5.1.0-alpha3 + +- Improve Android Audio Focus [#1897](https://github.com/react-native-community/react-native-video/pull/1897) + +### Version 5.1.0-alpha2 + +- Added support for full-screen functionality in Android Exoplayer [#1730](https://github.com/react-native-community/react-native-video/pull/1730) + ### Version 5.1.0-alpha1 -* Fixed Exoplayer doesn't work with mute=true (Android). [#1696](https://github.com/react-native-community/react-native-video/pull/1696) -* Added support for automaticallyWaitsToMinimizeStalling property (iOS) [#1723](https://github.com/react-native-community/react-native-video/pull/1723) -* Bump Exoplayer to 2.10.4, remove deprecated usages of Exoplayer methods (Android). [#1753](https://github.com/react-native-community/react-native-video/pull/1753) -* Preserve Exoplayer BandwidthMeter instance across video plays, this should noticeably improve streaming bandwidth detection (Android). + +- Fixed Exoplayer doesn't work with mute=true (Android). [#1696](https://github.com/react-native-community/react-native-video/pull/1696) +- Added support for automaticallyWaitsToMinimizeStalling property (iOS) [#1723](https://github.com/react-native-community/react-native-video/pull/1723) +- Bump Exoplayer to 2.10.4, remove deprecated usages of Exoplayer methods (Android). [#1753](https://github.com/react-native-community/react-native-video/pull/1753) +- Preserve Exoplayer BandwidthMeter instance across video plays, this should noticeably improve streaming bandwidth detection (Android). ### Version 5.0.2 -* Fix crash when RCTVideo's superclass doesn't observe the keyPath 'frame' (iOS) [#1720](https://github.com/react-native-community/react-native-video/pull/1720) + +- Fix crash when RCTVideo's superclass doesn't observe the keyPath 'frame' (iOS) [#1720](https://github.com/react-native-community/react-native-video/pull/1720) ### Version 5.0.1 -* Fix AndroidX Support bad merge + +- Fix AndroidX Support bad merge ### Version 5.0.0 [Deprecated] -* AndroidX Support + +- AndroidX Support ### Version 4.4.4 -* Handle racing conditions when props are setted on exoplayer + +- Handle racing conditions when props are settled on Exoplayer ### Version 4.4.3 -* Fix mute/unmute when controls are present (iOS) [#1654](https://github.com/react-native-community/react-native-video/pull/1654) -* Fix Android videos being able to play with background music/audio from other apps. -* Fixed memory leak on iOS when using `controls` [#1647](https://github.com/react-native-community/react-native-video/pull/1647) -* (Android) Update gradle and target SDK [#1629](https://github.com/react-native-community/react-native-video/pull/1629) -* Fix iOS stressed mount/unmount crash [#1646](https://github.com/react-native-community/react-native-video/pull/1646) + +- Fix mute/unmute when controls are present (iOS) [#1654](https://github.com/react-native-community/react-native-video/pull/1654) +- Fix Android videos being able to play with background music/audio from other apps. +- Fixed memory leak on iOS when using `controls` [#1647](https://github.com/react-native-community/react-native-video/pull/1647) +- (Android) Update gradle and target SDK [#1629](https://github.com/react-native-community/react-native-video/pull/1629) +- Fix iOS stressed mount/unmount crash [#1646](https://github.com/react-native-community/react-native-video/pull/1646) ### Version 4.4.2 -* Change compileOnly to implementation on gradle (for newer gradle versions and react-native 0.59 support) [#1592](https://github.com/react-native-community/react-native-video/pull/1592) -* Replaced RCTBubblingEventBlock events by RCTDirectEventBlock to avoid event name collisions [#1625](https://github.com/react-native-community/react-native-video/pull/1625) -* Added `onPlaybackRateChange` to README [#1578](https://github.com/react-native-community/react-native-video/pull/1578) -* Added `onReadyForDisplay` to README [#1627](https://github.com/react-native-community/react-native-video/pull/1627) -* Improved handling of poster image. Fixes bug with displaying video and poster simultaneously. [#1627](https://github.com/react-native-community/react-native-video/pull/1627) -* Fix background audio stopping on iOS when using `controls` [#1614](https://github.com/react-native-community/react-native-video/pull/1614) + +- Change compileOnly to implementation on gradle (for newer gradle versions and react-native 0.59 support) [#1592](https://github.com/react-native-community/react-native-video/pull/1592) +- Replaced RCTBubblingEventBlock events by RCTDirectEventBlock to avoid event name collisions [#1625](https://github.com/react-native-community/react-native-video/pull/1625) +- Added `onPlaybackRateChange` to README [#1578](https://github.com/react-native-community/react-native-video/pull/1578) +- Added `onReadyForDisplay` to README [#1627](https://github.com/react-native-community/react-native-video/pull/1627) +- Improved handling of poster image. Fixes bug with displaying video and poster simultaneously. [#1627](https://github.com/react-native-community/react-native-video/pull/1627) +- Fix background audio stopping on iOS when using `controls` [#1614](https://github.com/react-native-community/react-native-video/pull/1614) ### Version 4.4.1 -* Fix tvOS picture-in-picture compilation regression [#1518](https://github.com/react-native-community/react-native-video/pull/1518) -* fullscreen rotation issues with iOS built-in controls [#1441](https://github.com/react-native-community/react-native-video/pull/1441) -* Fix player freeze when playing audio files on ExoPlayer [#1529](https://github.com/react-native-community/react-native-video/pull/1529) + +- Fix tvOS picture-in-picture compilation regression [#1518](https://github.com/react-native-community/react-native-video/pull/1518) +- fullscreen rotation issues with iOS built-in controls [#1441](https://github.com/react-native-community/react-native-video/pull/1441) +- Fix player freeze when playing audio files on ExoPlayer [#1529](https://github.com/react-native-community/react-native-video/pull/1529) ### Version 4.4.0 -* Fix runtime warning by replacing `UIManager.RCTVideo` with `UIManager.getViewManagerConfig('RCTVideo')` (and ensuring backwards compat) [#1487](https://github.com/react-native-community/react-native-video/pull/1487) -* Fix loading package resolved videos when using video-caching [#1438](https://github.com/react-native-community/react-native-video/pull/1438) -* Fix "message sent to deallocated instance" crash on ios [#1482](https://github.com/react-native-community/react-native-video/pull/1482) -* Display a warning when source is empty [#1478](https://github.com/react-native-community/react-native-video/pull/1478) -* Don't crash on iOS for an empty source [#1246](https://github.com/react-native-community/react-native-video/pull/1246) -* Recover from from transient internet failures when loading on ExoPlayer [#1448](https://github.com/react-native-community/react-native-video/pull/1448) -* Add controls support for ExoPlayer [#1414](https://github.com/react-native-community/react-native-video/pull/1414) -* Fix check for text tracks when iOS caching enabled [#1387](https://github.com/react-native-community/react-native-video/pull/1387) -* Add support for Picture in Picture on iOS [#1325](https://github.com/react-native-community/react-native-video/pull/1325) -* Fix UIManager undefined variable [#1488](https://github.com/react-native-community/react-native-video/pull/1488) + +- Fix runtime warning by replacing `UIManager.RCTVideo` with `UIManager.getViewManagerConfig('RCTVideo')` (and ensuring backwards compat) [#1487](https://github.com/react-native-community/react-native-video/pull/1487) +- Fix loading package resolved videos when using video-caching [#1438](https://github.com/react-native-community/react-native-video/pull/1438) +- Fix "message sent to deallocated instance" crash on ios [#1482](https://github.com/react-native-community/react-native-video/pull/1482) +- Display a warning when source is empty [#1478](https://github.com/react-native-community/react-native-video/pull/1478) +- Don't crash on iOS for an empty source [#1246](https://github.com/react-native-community/react-native-video/pull/1246) +- Recover from from transient internet failures when loading on ExoPlayer [#1448](https://github.com/react-native-community/react-native-video/pull/1448) +- Add controls support for ExoPlayer [#1414](https://github.com/react-native-community/react-native-video/pull/1414) +- Fix check for text tracks when iOS caching enabled [#1387](https://github.com/react-native-community/react-native-video/pull/1387) +- Add support for Picture in Picture on iOS [#1325](https://github.com/react-native-community/react-native-video/pull/1325) +- Fix UIManager undefined variable [#1488](https://github.com/react-native-community/react-native-video/pull/1488) ### Version 4.3.0 -* Fix iOS video not displaying after switching source [#1395](https://github.com/react-native-community/react-native-video/pull/1395) -* Add the filterEnabled flag, fixes iOS video start time regression [#1384](https://github.com/react-native-community/react-native-video/pull/1384) -* Fix text not appearing in release builds of Android apps [#1373](https://github.com/react-native-community/react-native-video/pull/1373) -* Update to ExoPlayer 2.9.3 [#1406](https://github.com/react-native-community/react-native-video/pull/1406) -* Add video track selection & onBandwidthUpdate [#1199](https://github.com/react-native-community/react-native-video/pull/1199) -* Recovery from transient internet failures and props to configure the custom retry count [#1448](https://github.com/react-native-community/react-native-video/pull/1448) + +- Fix iOS video not displaying after switching source [#1395](https://github.com/react-native-community/react-native-video/pull/1395) +- Add the filterEnabled flag, fixes iOS video start time regression [#1384](https://github.com/react-native-community/react-native-video/pull/1384) +- Fix text not appearing in release builds of Android apps [#1373](https://github.com/react-native-community/react-native-video/pull/1373) +- Update to ExoPlayer 2.9.3 [#1406](https://github.com/react-native-community/react-native-video/pull/1406) +- Add video track selection & onBandwidthUpdate [#1199](https://github.com/react-native-community/react-native-video/pull/1199) +- Recovery from transient internet failures and props to configure the custom retry count [#1448](https://github.com/react-native-community/react-native-video/pull/1448) ### Version 4.2.0 -* Don't initialize filters on iOS unless a filter is set. This was causing a startup performance regression [#1360](https://github.com/react-native-community/react-native-video/pull/1360) -* Support setting the maxBitRate [#1310](https://github.com/react-native-community/react-native-video/pull/1310) -* Fix useTextureView not defaulting to true [#1383](https://github.com/react-native-community/react-native-video/pull/1383) -* Fix crash on MediaPlayer w/ Android 4.4 & avoid memory leak [#1328](https://github.com/react-native-community/react-native-video/pull/1328) + +- Don't initialize filters on iOS unless a filter is set. This was causing a startup performance regression [#1360](https://github.com/react-native-community/react-native-video/pull/1360) +- Support setting the maxBitRate [#1310](https://github.com/react-native-community/react-native-video/pull/1310) +- Fix useTextureView not defaulting to true [#1383](https://github.com/react-native-community/react-native-video/pull/1383) +- Fix crash on MediaPlayer w/ Android 4.4 & avoid memory leak [#1328](https://github.com/react-native-community/react-native-video/pull/1328) ### Version 4.1.0 -* Generate onSeek on Android ExoPlayer & MediaPlayer after seek completes [#1351](https://github.com/react-native-community/react-native-video/pull/1351) -* Remove unneeded onVideoSaved event [#1350](https://github.com/react-native-community/react-native-video/pull/1350) -* Disable AirPlay if sidecar text tracks are enabled [#1304](https://github.com/react-native-community/react-native-video/pull/1304) -* Add possibility to remove black screen while video is loading in Exoplayer [#1355](https://github.com/react-native-community/react-native-video/pull/1355) + +- Generate onSeek on Android ExoPlayer & MediaPlayer after seek completes [#1351](https://github.com/react-native-community/react-native-video/pull/1351) +- Remove unneeded onVideoSaved event [#1350](https://github.com/react-native-community/react-native-video/pull/1350) +- Disable AirPlay if sidecar text tracks are enabled [#1304](https://github.com/react-native-community/react-native-video/pull/1304) +- Add possibility to remove black screen while video is loading in Exoplayer [#1355](https://github.com/react-native-community/react-native-video/pull/1355) ### Version 4.0.1 -* Add missing files to package.json [#1342](https://github.com/react-native-community/react-native-video/pull/1342) + +- Add missing files to package.json [#1342](https://github.com/react-native-community/react-native-video/pull/1342) ### Version 4.0.0 -* Partial support for timed metadata on Android MediaPlayer [#707](https://github.com/react-native-community/react-native-video/pull/707) -* Support video caching for iOS [#955](https://github.com/react-native-community/react-native-video/pull/955) -* Video caching cleanups [#1172](https://github.com/react-native-community/react-native-video/pull/1172) -* Add ipod-library support [#926](https://github.com/react-native-community/react-native-video/pull/926/files) -* Fix crash on ExoPlayer when there are no audio tracks [#1233](https://github.com/react-native-community/react-native-video/pull/1233) -* Reduce package size [#1231](https://github.com/react-native-community/react-native-video/pull/1231) -* Remove unnecessary import in TextTrackType [#1229](https://github.com/react-native-community/react-native-video/pull/1229) -* Prevent flash between poster and video [#1167](https://github.com/react-native-community/react-native-video/pull/1167) -* Support react-native-dom [#1253](https://github.com/react-native-community/react-native-video/pull/1253) -* Update to ExoPlayer 2.8.2. Android SDK 26 now required [#1170](https://github.com/react-native-community/react-native-video/pull/1170) -* Update to ExoPlayer 2.8.4 [#1266](https://github.com/react-native-community/react-native-video/pull/1266) -* Add fullscreenOrientation option for iOS [#1215](https://github.com/react-native-community/react-native-video/pull/1215) -* Update to ExoPlayer 2.9.0 [#1285](https://github.com/react-native-community/react-native-video/pull/1285) -* Switch useTextureView to default to `true` [#1286](https://github.com/react-native-community/react-native-video/pull/1286) -* Re-add fullscreenAutorotate prop [#1303](https://github.com/react-native-community/react-native-video/pull/1303) -* Make seek throw a useful error for NaN values [#1283](https://github.com/react-native-community/react-native-video/pull/1283) -* Video Filters and Save Video [#1306](https://github.com/react-native-community/react-native-video/pull/1306) -* Fix: volume should not change on onAudioFocusChange event [#1327](https://github.com/react-native-community/react-native-video/pull/1327) -* Update ExoPlayer to 2.9.1 and OkHTTP to 3.12.0 [#1338](https://github.com/react-native-community/react-native-video/pull/1338) + +- Partial support for timed metadata on Android MediaPlayer [#707](https://github.com/react-native-community/react-native-video/pull/707) +- Support video caching for iOS [#955](https://github.com/react-native-community/react-native-video/pull/955) +- Video caching cleanups [#1172](https://github.com/react-native-community/react-native-video/pull/1172) +- Add ipod-library support [#926](https://github.com/react-native-community/react-native-video/pull/926/files) +- Fix crash on ExoPlayer when there are no audio tracks [#1233](https://github.com/react-native-community/react-native-video/pull/1233) +- Reduce package size [#1231](https://github.com/react-native-community/react-native-video/pull/1231) +- Remove unnecessary import in TextTrackType [#1229](https://github.com/react-native-community/react-native-video/pull/1229) +- Prevent flash between poster and video [#1167](https://github.com/react-native-community/react-native-video/pull/1167) +- Support react-native-dom [#1253](https://github.com/react-native-community/react-native-video/pull/1253) +- Update to ExoPlayer 2.8.2. Android SDK 26 now required [#1170](https://github.com/react-native-community/react-native-video/pull/1170) +- Update to ExoPlayer 2.8.4 [#1266](https://github.com/react-native-community/react-native-video/pull/1266) +- Add fullscreenOrientation option for iOS [#1215](https://github.com/react-native-community/react-native-video/pull/1215) +- Update to ExoPlayer 2.9.0 [#1285](https://github.com/react-native-community/react-native-video/pull/1285) +- Switch useTextureView to default to `true` [#1286](https://github.com/react-native-community/react-native-video/pull/1286) +- Re-add fullscreenAutorotate prop [#1303](https://github.com/react-native-community/react-native-video/pull/1303) +- Make seek throw a useful error for NaN values [#1283](https://github.com/react-native-community/react-native-video/pull/1283) +- Video Filters and Save Video [#1306](https://github.com/react-native-community/react-native-video/pull/1306) +- Fix: volume should not change on onAudioFocusChange event [#1327](https://github.com/react-native-community/react-native-video/pull/1327) +- Update ExoPlayer to 2.9.1 and OkHTTP to 3.12.0 [#1338](https://github.com/react-native-community/react-native-video/pull/1338) ### Version 3.2.0 -* Basic fullscreen support for Android MediaPlayer [#1138](https://github.com/react-native-community/react-native-video/pull/1138) -* Simplify default Android SDK code [#1145](https://github.com/react-native-community/react-native-video/pull/1145) [#1146](https://github.com/react-native-community/react-native-video/pull/1146) -* Various iOS sideloaded text track fixes [#1157](https://github.com/react-native-community/react-native-video/pull/1157) -* Fix #1150 where assets with bundled assets don't work on iOS in release mode [#1162](https://github.com/react-native-community/react-native-video/pull/1162) -* Support configuring the buffer on Android ExoPlayer [#1160](https://github.com/react-native-community/react-native-video/pull/1160) -* Prevent sleep from sleeping while videos are playing on Android MediaPlayer [#1117](https://github.com/react-native-community/react-native-video/pull/1117) -* Update NewtonSoft JSON to match react-native-windows version [#1169](https://github.com/react-native-community/react-native-video/pull/1169) + +- Basic fullscreen support for Android MediaPlayer [#1138](https://github.com/react-native-community/react-native-video/pull/1138) +- Simplify default Android SDK code [#1145](https://github.com/react-native-community/react-native-video/pull/1145) [#1146](https://github.com/react-native-community/react-native-video/pull/1146) +- Various iOS sideloaded text track fixes [#1157](https://github.com/react-native-community/react-native-video/pull/1157) +- Fix #1150 where assets with bundled assets don't work on iOS in release mode [#1162](https://github.com/react-native-community/react-native-video/pull/1162) +- Support configuring the buffer on Android ExoPlayer [#1160](https://github.com/react-native-community/react-native-video/pull/1160) +- Prevent sleep from sleeping while videos are playing on Android MediaPlayer [#1117](https://github.com/react-native-community/react-native-video/pull/1117) +- Update NewtonSoft JSON to match react-native-windows version [#1169](https://github.com/react-native-community/react-native-video/pull/1169) ### Version 3.1.0 -* Support sidecar text tracks on iOS [#1109](https://github.com/react-native-community/react-native-video/pull/1109) -* Support onAudioBecomingNoisy on iOS [#1131](https://github.com/react-native-community/react-native-video/pull/1131) + +- Support sidecar text tracks on iOS [#1109](https://github.com/react-native-community/react-native-video/pull/1109) +- Support onAudioBecomingNoisy on iOS [#1131](https://github.com/react-native-community/react-native-video/pull/1131) ### 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) + +- 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) + +- 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) -* Fix bug that caused ExoPlayer to start paused if playInBackground was set [#833](https://github.com/react-native-community/react-native-video/pull/833) -* Fix crash if clearing an observer on iOS that was already cleared [#1075](https://github.com/react-native-community/react-native-video/pull/1075) -* Add audioOnly prop for music files [#1039](https://github.com/react-native-community/react-native-video/pull/1039) -* Support seeking with more exact tolerance on iOS [#1076](https://github.com/react-native-community/react-native-video/pull/1076) + +- 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) +- Fix bug that caused ExoPlayer to start paused if playInBackground was set [#833](https://github.com/react-native-community/react-native-video/pull/833) +- Fix crash if clearing an observer on iOS that was already cleared [#1075](https://github.com/react-native-community/react-native-video/pull/1075) +- Add audioOnly prop for music files [#1039](https://github.com/react-native-community/react-native-video/pull/1039) +- Support seeking with more exact tolerance on iOS [#1076](https://github.com/react-native-community/react-native-video/pull/1076) ### Version 2.2.0 -* Text track selection support for iOS & ExoPlayer [#1049](https://github.com/react-native-community/react-native-video/pull/1049) -* Support outputting to a TextureView on Android ExoPlayer [#1058](https://github.com/react-native-community/react-native-video/pull/1058) -* Support changing the left/right balance on Android MediaPlayer [#1051](https://github.com/react-native-community/react-native-video/pull/1051) -* Prevent multiple onEnd notifications on iOS [#832](https://github.com/react-native-community/react-native-video/pull/832) -* Fix doing a partial swipe on iOS causing a black screen [#1048](https://github.com/react-native-community/react-native-video/pull/1048) -* Fix crash when switching to a new source on iOS [#974](https://github.com/react-native-community/react-native-video/pull/974) -* Add cookie support for ExoPlayer [#922](https://github.com/react-native-community/react-native-video/pull/922) -* Remove ExoPlayer onMetadata that wasn't being used [#1040](https://github.com/react-native-community/react-native-video/pull/1040) -* Fix bug where setting the progress interval on iOS didn't work [#800](https://github.com/react-native-community/react-native-video/pull/800) -* Support setting the poster resize mode [#595](https://github.com/react-native-community/react-native-video/pull/595) + +- Text track selection support for iOS & ExoPlayer [#1049](https://github.com/react-native-community/react-native-video/pull/1049) +- Support outputting to a TextureView on Android ExoPlayer [#1058](https://github.com/react-native-community/react-native-video/pull/1058) +- Support changing the left/right balance on Android MediaPlayer [#1051](https://github.com/react-native-community/react-native-video/pull/1051) +- Prevent multiple onEnd notifications on iOS [#832](https://github.com/react-native-community/react-native-video/pull/832) +- Fix doing a partial swipe on iOS causing a black screen [#1048](https://github.com/react-native-community/react-native-video/pull/1048) +- Fix crash when switching to a new source on iOS [#974](https://github.com/react-native-community/react-native-video/pull/974) +- Add cookie support for ExoPlayer [#922](https://github.com/react-native-community/react-native-video/pull/922) +- Remove ExoPlayer onMetadata that wasn't being used [#1040](https://github.com/react-native-community/react-native-video/pull/1040) +- Fix bug where setting the progress interval on iOS didn't work [#800](https://github.com/react-native-community/react-native-video/pull/800) +- Support setting the poster resize mode [#595](https://github.com/react-native-community/react-native-video/pull/595) diff --git a/DRM.md b/DRM.md new file mode 100644 index 0000000000..d0ce88bf22 --- /dev/null +++ b/DRM.md @@ -0,0 +1,139 @@ +# DRM + +## Provide DRM data (only tested with http/https assets) + +You can provide some configuration to allow DRM playback. +This feature will disable the use of `TextureView` on Android. + +DRM object allows this members: + +| Property | Type | Default | Platform | Description | +| --- | --- | --- | --- | --- | +| [`type`](#type) | DRMType | undefined | iOS/Android | Specifies which type of DRM you are going to use, DRMType is an enum exposed on the JS module ('fairplay', 'playready', ...) | +| [`licenseServer`](#licenseserver) | string | undefined | iOS/Android | Specifies the license server URL | +| [`headers`](#headers) | Object | undefined | iOS/Android | Specifies the headers send to the license server URL on license acquisition | +| [`contentId`](#contentid) | string | undefined | iOS | Specify the content id of the stream, otherwise it will take the host value from `loadingRequest.request.URL.host` (f.e: `skd://testAsset` -> will take `testAsset`) | +| [`certificateUrl`](#certificateurl) | string | undefined | iOS | Specifies the url to obtain your ios certificate for fairplay, Url to the .cer file | +| [`base64Certificate`](#base64certificate) | bool | false | iOS | Specifies whether or not the certificate returned by the `certificateUrl` is on base64 | +| [`getLicense`](#getlicense)| function | undefined | iOS | Rather than setting the `licenseServer` url to get the license, you can manually get the license on the JS part, and send the result to the native part to configure FairplayDRM for the stream | + +### `base64Certificate` + +Whether or not the certificate url returns it on base64. + +Platforms: iOS + +### `certificateUrl` + +URL to fetch a valid certificate for FairPlay. + +Platforms: iOS + +### `getLicense` + +`licenseServer` and `headers` will be ignored. You will obtain as argument the `SPC` (as ASCII string, you will probably need to convert it to base 64) obtained from your `contentId` + the provided certificate via `[loadingRequest streamingContentKeyRequestDataForApp:certificateData contentIdentifier:contentIdData options:nil error:&spcError];`. + You should return on this method a `CKC` in Base64, either by just returning it or returning a `Promise` that resolves with the `CKC`. + +With this prop you can override the license acquisition flow, as an example: + +```js +getLicense: (spcString) => { + const base64spc = Base64.encode(spcString); + const formData = new FormData(); + formData.append('spc', base64spc); + return fetch(`https://license.pallycon.com/ri/licenseManager.do`, { + method: 'POST', + headers: { + 'pallycon-customdata-v2': 'd2VpcmRiYXNlNjRzdHJpbmcgOlAgRGFuaWVsIE1hcmnxbyB3YXMgaGVyZQ==', + 'Content-Type': 'application/x-www-form-urlencoded', + }, + body: formData + }).then(response => response.text()).then((response) => { + return response; + }).catch((error) => { + console.error('Error', error); + }); +} +``` + +Platforms: iOS + +### `headers` + +You can customize headers send to the licenseServer. + +Example: + +```js +source={{ + uri: 'https://media.axprod.net/TestVectors/v7-MultiDRM-SingleKey/Manifest_1080p.mpd', +}} +drm={{ + type: DRMType.WIDEVINE, + licenseServer: 'https://drm-widevine-licensing.axtest.net/AcquireLicense', + headers: { + 'X-AxDRM-Message': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ2ZXJzaW9uIjoxLCJjb21fa2V5X2lkIjoiYjMzNjRlYjUtNTFmNi00YWUzLThjOTgtMzNjZWQ1ZTMxYzc4IiwibWVzc2FnZSI6eyJ0eXBlIjoiZW50aXRsZW1lbnRfbWVzc2FnZSIsImZpcnN0X3BsYXlfZXhwaXJhdGlvbiI6NjAsInBsYXlyZWFkeSI6eyJyZWFsX3RpbWVfZXhwaXJhdGlvbiI6dHJ1ZX0sImtleXMiOlt7ImlkIjoiOWViNDA1MGQtZTQ0Yi00ODAyLTkzMmUtMjdkNzUwODNlMjY2IiwiZW5jcnlwdGVkX2tleSI6ImxLM09qSExZVzI0Y3Iya3RSNzRmbnc9PSJ9XX19.FAbIiPxX8BHi9RwfzD7Yn-wugU19ghrkBFKsaCPrZmU' + }, +}} +``` + +### `licenseServer` + +The URL pointing to the licenseServer that will provide the authorization to play the protected stream. + +### `type` + +You can specify the DRM type, either by string or using the exported DRMType enum. +Valid values are, for Android: DRMType.WIDEVINE / DRMType.PLAYREADY / DRMType.CLEARKEY. +for iOS: DRMType.FAIRPLAY + +## Common Usage Scenarios + +### Send cookies to license server + +You can send Cookies to the license server via `headers` prop. Example: + +```js +drm: { + type: DRMType.WIDEVINE + licenseServer: 'https://drm-widevine-licensing.axtest.net/AcquireLicense', + headers: { + 'Cookie': 'PHPSESSID=etcetc; csrftoken=mytoken; _gat=1; foo=bar' + }, +} +``` + +### Custom License Acquisition (only iOS for now) + +```js +drm: { + type: DRMType.FAIRPLAY, + getLicense: (spcString) => { + const base64spc = Base64.encode(spcString); + return fetch('YOUR LICENSE SERVER HERE', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Accept: 'application/json', + }, + body: JSON.stringify({ + getFairplayLicense: { + foo: 'bar', + spcMessage: base64spc, + } + }) + }) + .then(response => response.json()) + .then((response) => { + if (response && response.getFairplayLicenseResponse + && response.getFairplayLicenseResponse.ckcResponse) { + return response.getFairplayLicenseResponse.ckcResponse; + } + throw new Error('No correct response'); + }) + .catch((error) => { + console.error('CKC error', error); + }); + } +} +``` diff --git a/DRMType.js b/DRMType.js new file mode 100644 index 0000000000..473536b249 --- /dev/null +++ b/DRMType.js @@ -0,0 +1,6 @@ +export default { + WIDEVINE: 'widevine', + PLAYREADY: 'playready', + CLEARKEY: 'clearkey', + FAIRPLAY: 'fairplay' +}; diff --git a/FilterType.js b/FilterType.js index bd477d73ba..3d8d9cb40c 100644 --- a/FilterType.js +++ b/FilterType.js @@ -14,5 +14,5 @@ export default { PROCESS: 'CIPhotoEffectProcess', TONAL: 'CIPhotoEffectTonal', TRANSFER: 'CIPhotoEffectTransfer', - SEPIA: 'CISepiaTone' + SEPIA: 'CISepiaTone', }; diff --git a/README.md b/README.md index a1c7ebc989..0d125070fd 100644 --- a/README.md +++ b/README.md @@ -61,7 +61,7 @@ Then follow the instructions for your platform to link react-native-video into y **React Native 0.60 and above** -Run `pod install` in the `ios` directory. Linking is not required in 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** @@ -117,8 +117,9 @@ Select RCTVideo-tvOS ### Android installation
Android details - -Run `react-native link react-native-video` to link the react-native-video library. + +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: @@ -140,7 +141,7 @@ project(':react-native-video').projectDir = new File(rootProject.projectDir, '.. #### **android/app/build.gradle** -From version >= 5.0.0, you have to apply this changes: +From version >= 5.0.0, you have to apply these changes: ```diff dependencies { @@ -184,52 +185,34 @@ protected List getPackages() { ### Windows installation
- Windows details + Windows RNW C++/WinRT details Make the following additions to the given files manually: #### **windows/myapp.sln** -Add the `ReactNativeVideo` project to your solution. +Add the `ReactNativeVideoCPP` project to your solution. -1. Open the solution in Visual Studio 2015 +1. Open the solution in Visual Studio 2019 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` + Select `node_modules\react-native-video\windows\ReactNativeVideoCPP\ReactNativeVideoCPP.vcxproj` -#### **windows/myapp/myapp.csproj** +#### **windows/myapp/myapp.vcxproj** -Add a reference to `ReactNativeVideo` to your main application project. From Visual Studio 2015: +Add a reference to `ReactNativeVideoCPP` to your main application project. From Visual Studio 2019: 1. Right-click main application project > Add > Reference... - * UWP: Check `ReactNativeVideo` from Solution Projects. - * WPF: Check `ReactNativeVideo.Net46` from Solution Projects. + Check `ReactNativeVideoCPP` from Solution Projects. -#### **MainPage.cs** +2. Modify files below to add the video package providers to your main application project +#### **pch.h** + +Add `#include "winrt/ReactNativeVideoCPP.h"`. + +#### **app.cpp** + +Add `PackageProviders().Append(winrt::ReactNativeVideoCPP::ReactPackageProvider());` before `InitializeComponent();`. -Add the `ReactVideoPackage` class to your list of exported packages. -```cs -using ReactNative; -using ReactNative.Modules.Core; -using ReactNative.Shell; -using ReactNativeVideo; // <-- Add this -using System.Collections.Generic; -... - - public override List Packages - { - get - { - return new List - { - new MainReactPackage(), - new ReactVideoPackage(), // <-- Add this - }; - } - } - -... -```
### react-native-dom installation @@ -295,6 +278,7 @@ var styles = StyleSheet.create({ * [automaticallyWaitsToMinimizeStalling](#automaticallyWaitsToMinimizeStalling) * [bufferConfig](#bufferconfig) * [controls](#controls) +* [currentPlaybackTime](#currentPlaybackTime) * [disableFocus](#disableFocus) * [filter](#filter) * [filterEnabled](#filterEnabled) @@ -307,6 +291,7 @@ var styles = StyleSheet.create({ * [ignoreSilentSwitch](#ignoresilentswitch) * [maxBitRate](#maxbitrate) * [minLoadRetryCount](#minLoadRetryCount) +* [mixWithOthers](#mixWithOthers) * [muted](#muted) * [paused](#paused) * [pictureInPicture](#pictureinpicture) @@ -314,6 +299,8 @@ var styles = StyleSheet.create({ * [playWhenInactive](#playwheninactive) * [poster](#poster) * [posterResizeMode](#posterresizemode) +* [preferredForwardBufferDuration](#preferredForwardBufferDuration) +* [preventsDisplaySleepDuringVideoPlayback](#preventsDisplaySleepDuringVideoPlayback) * [progressUpdateInterval](#progressupdateinterval) * [rate](#rate) * [repeat](#repeat) @@ -325,6 +312,7 @@ var styles = StyleSheet.create({ * [source](#source) * [stereoPan](#stereopan) * [textTracks](#texttracks) +* [trackId](#trackId) * [useTextureView](#usetextureview) * [volume](#volume) @@ -387,7 +375,7 @@ Property | Type | Description minBufferMs | number | The default minimum duration of media that the player will attempt to ensure is buffered at all times, in milliseconds. maxBufferMs | number | The default maximum duration of media that the player will attempt to buffer, in milliseconds. bufferForPlaybackMs | number | The default duration of media that must be buffered for playback to start or resume following a user action such as a seek, in milliseconds. -playbackAfterRebufferMs | number | The default duration of media that must be buffered for playback to resume after a rebuffer, in milliseconds. A rebuffer is defined to be caused by buffer depletion rather than a user action. +bufferForPlaybackAfterRebufferMs | number | The default duration of media that must be buffered for playback to resume after a rebuffer, in milliseconds. A rebuffer is defined to be caused by buffer depletion rather than a user action. This prop should only be set when you are setting the source, changing it after the media is loaded will cause it to be reloaded. @@ -405,6 +393,11 @@ bufferConfig={{ Platforms: Android ExoPlayer, iOS +#### currentPlaybackTime +When playing an HLS live stream with a `EXT-X-PROGRAM-DATE-TIME` tag configured, then this property will contain the epoch value in msec. + +Platforms: Android ExoPlayer, iOS + #### controls Determines whether to show player controls. * ** false (default)** - Don't show player controls @@ -414,6 +407,8 @@ Note on iOS, controls are always shown when in fullscreen mode. For Android MediaPlayer, you will need to build your own controls or use a package like [react-native-video-controls](https://github.com/itsnubix/react-native-video-controls) or [react-native-video-player](https://github.com/cornedor/react-native-video-player). +Note on Android ExoPlayer, native controls are available by default. If needed, you can also add your controls or use a package like [react-native-video-controls]. + Platforms: Android ExoPlayer, iOS, react-native-dom #### disableFocus @@ -423,6 +418,11 @@ Determines whether video audio should override background music/audio in Android Platforms: Android Exoplayer +### DRM +To setup DRM please follow [this guide](./DRM.md) + +Platforms: Android Exoplayer, iOS + #### filter Add video filter * **FilterType.NONE (default)** - No Filter @@ -482,8 +482,6 @@ Platforms: iOS #### headers Pass headers to the HTTP client. Can be used for authorization. Headers must be a part of the source object. -To enable this on iOS, you will need to manually edit RCTVideo.m and uncomment the header code in the playerItemForSource function. This is because the code used a private API and may cause your app to be rejected by the App Store. Use at your own risk. - Example: ``` source={{ @@ -547,6 +545,14 @@ minLoadRetryCount={5} // retry 5 times Platforms: Android ExoPlayer +#### mixWithOthers +Controls how Audio mix with other apps. +* **"inherit" (default)** - Use the default AVPlayer behavior +* **"mix"** - Audio from this video mixes with audio from other apps. +* **"duck"** - Reduces the volume of other apps while audio from this video plays. + +Platforms: iOS + #### muted Controls whether the audio is muted * **false (default)** - Don't mute audio @@ -603,6 +609,20 @@ Determines how to resize the poster image when the frame doesn't match the raw v Platforms: all +#### preferredForwardBufferDuration +The duration the player should buffer media from the network ahead of the playhead to guard against playback disruption. Sets the [preferredForwardBufferDuration](https://developer.apple.com/documentation/avfoundation/avplayeritem/1643630-preferredforwardbufferduration) instance property on AVPlayerItem. + +Default: 0 + +Platforms: iOS + +#### preventsDisplaySleepDuringVideoPlayback +Controls whether or not the display should be allowed to sleep while playing the video. Default is not to allow display to sleep. + +Default: true + +Platforms: iOS, Android + #### progressUpdateInterval Delay in milliseconds between onProgress events in milliseconds. @@ -787,6 +807,17 @@ Note: Using this feature adding an entry for NSAppleMusicUsageDescription to you Platforms: iOS +##### Explicit mimetype for the stream + +Provide a member `type` with value (`mpd`/`m3u8`/`ism`) inside the source object. +Sometimes is needed when URL extension does not match with the mimetype that you are expecting, as seen on the next example. (Extension is .ism -smooth streaming- but file served is on format mpd -mpeg dash-) + +Example: +``` +source={{ uri: 'http://host-serving-a-type-different-than-the-extension.ism/manifest(format=mpd-time-csf)', +type: 'mpd' }} +``` + ###### Other protocols The following other types are supported on some platforms, but aren't fully documented yet: @@ -838,6 +869,11 @@ textTracks={[ Platforms: Android ExoPlayer, iOS +#### trackId +Configure an identifier for the video stream to link the playback context to the events emitted. + +Platforms: Android ExoPlayer + #### useTextureView Controls whether to output to a TextureView or SurfaceView. @@ -955,6 +991,7 @@ duration | number | Length of the media in seconds naturalSize | object | Properties:
* width - Width in pixels that the video was encoded at
* height - Height in pixels that the video was encoded at
* orientation - "portrait" or "landscape" audioTracks | array | An array of audio track info objects with the following properties:
* index - Index number
* title - Description of the track
* language - 2 letter [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) or 3 letter [ISO639-2](https://en.wikipedia.org/wiki/List_of_ISO_639-2_codes) language code
* type - Mime type of track textTracks | array | An array of text track info objects with the following properties:
* index - Index number
* title - Description of the track
* language - 2 letter [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) or 3 letter [ISO 639-2](https://en.wikipedia.org/wiki/List_of_ISO_639-2_codes) language code
* type - Mime type of track +videoTracks | array | An array of video track info objects with the following properties:
* trackId - ID for the track
* bitrate - Bit rate in bits per second
* codecs - Comma separated list of codecs
* height - Height of the video
* width - Width of the video Example: ``` @@ -980,6 +1017,11 @@ Example: { title: '#1 French', language: 'fr', index: 0, type: 'text/vtt' }, { title: '#2 English CC', language: 'en', index: 1, type: 'text/vtt' }, { title: '#3 English Director Commentary', language: 'en', index: 2, type: 'text/vtt' } + ], + videoTracks: [ + { bitrate: 3987904, codecs: "avc1.640028", height: 720, trackId: "f1-v1-x3", width: 1280 }, + { bitrate: 7981888, codecs: "avc1.640028", height: 1080, trackId: "f2-v1-x3", width: 1920 }, + { bitrate: 1994979, codecs: "avc1.4d401f", height: 480, trackId: "f3-v1-x3", width: 848 } ] } ``` @@ -1131,7 +1173,7 @@ Methods operate on a ref to the Video element. You can create a ref using code l ``` return (