react-native-video - npm Package Compare versions

Comparing version 4.2.0 to 4.3.0

CHANGELOG.md

 ## Changelog
 
+### 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)
+
 ### Version 4.2.0
@@ -4,0 +11,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)

package.json

 {
     "name": "react-native-video",
-    "version": "4.2.0",
+    "version": "4.3.0",
     "description": "A <Video /> element for react-native",
@@ -31,11 +31,15 @@ "main": "Video.js",
     "devDependencies": {
+        "babel-eslint": "5.0.0-beta8",
         "eslint": "1.10.3",
-        "babel-eslint": "5.0.0-beta8",
+        "eslint-config-airbnb": "4.0.0",
         "eslint-plugin-react": "3.16.1",
-        "eslint-config-airbnb": "4.0.0"
+        "react": "^16.7.0",
+        "react-dom": "^16.7.0",
+        "react-hot-loader": "^4.6.3",
+        "react-native": "^0.57.8"
     },
     "dependencies": {
-        "keymirror": "0.1.1",
+        "keymirror": "^0.1.1",
         "prop-types": "^15.5.10",
-	"shaka-player": "2.4.4"
+        "shaka-player": "^2.4.4"
     },
@@ -50,3 +54,3 @@ "scripts": {
     },
-    "files":[
+    "files": [
         "android-exoplayer",
@@ -53,0 +57,0 @@ "android",

README.md

@@ -263,2 +263,3 @@ ## react-native-video
 * [filter](#filter)
+* [filterEnabled](#filterEnabled)
 * [fullscreen](#fullscreen)
@@ -281,5 +282,7 @@ * [fullscreenAutorotate](#fullscreenautorotate)
 * [repeat](#repeat)
+* [reportBandwidth](#reportbandwidth)
 * [resizeMode](#resizemode)
 * [selectedAudioTrack](#selectedaudiotrack)
 * [selectedTextTrack](#selectedtexttrack)
+* [selectedVideoTrack](#selectedvideotrack)
 * [source](#source)
@@ -293,2 +296,3 @@ * [stereoPan](#stereopan)
 * [onAudioBecomingNoisy](#onaudiobecomingnoisy)
+* [onBandwidthUpdate](#onbandwidthupdate)
 * [onEnd](#onend)
@@ -361,2 +365,4 @@ * [onExternalPlaybackChange](#onexternalplaybackchange)
 
+Controls are not available Android because the system does not provide a stock set of controls. You will need to build your own 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).
+
 Platforms: iOS, react-native-dom
@@ -388,5 +394,14 @@
 2. Video filter is currently not supported on HLS playlists.
+3. `filterEnabled` must be set to `true`
 
 Platforms: iOS
 
+#### filterEnabled
+Enable video filter. 
+
+* **false (default)** - Don't enable filter
+* **true** - Enable filter
+
+Platforms: iOS
+
 #### fullscreen
@@ -538,2 +553,10 @@ Controls whether the player enters fullscreen on play.
 
+#### reportBandwidth
+Determine whether to generate onBandwidthUpdate events. This is needed due to the high frequency of these events on ExoPlayer.
+
+* **false (default)** - Generate onBandwidthUpdate events
+* **true** - Don't generate onBandwidthUpdate events
+
+Platforms: Android ExoPlayer
+
 #### resizeMode
@@ -610,2 +633,31 @@ Determines how to resize the video when the frame doesn't match the raw video dimensions.
 
+#### selectedVideoTrack
+Configure which video track should be played. By default, the player uses Adaptive Bitrate Streaming to automatically select the stream it thinks will perform best based on available bandwidth.
+
+```
+selectedVideoTrack={{
+  type: Type,
+  value: Value
+}}
+```
+
+Example:
+```
+selectedVideoTrack={{
+  type: "resolution",
+  value: 480
+}}
+```
+
+Type | Value | Description
+--- | --- | ---
+"auto" (default) | N/A | Let the player determine which track to play using ABR
+"disabled" | N/A | Turn off video
+"resolution" | number | Play the video track with the height specified, e.g. 480 for the 480p stream
+"index" | number | Play the video track with the index specified as the value, e.g. 0
+
+If a track matching the specified Type (and Value if appropriate) is unavailable, ABR will be used.
+
+Platforms: Android ExoPlayer
+
 #### source
@@ -634,3 +686,3 @@ Sets the media source. You can pass an asset loaded via require or an object with a uri.
 ```
-source={ uri: 'https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_10mb.mp4' }
+source={{uri: 'https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_10mb.mp4' }}
 ```
@@ -644,3 +696,3 @@
 ```
-source={ uri: 'file:///sdcard/Movies/sintel.mp4' }
+source={{ uri: 'file:///sdcard/Movies/sintel.mp4' }}
 ```
@@ -658,3 +710,3 @@
 ```
-source={ uri: 'ipod-library:///path/to/music.mp3' }
+source={{ uri: 'ipod-library:///path/to/music.mp3' }}
 ```
@@ -749,2 +801,22 @@
 
+#### onBandwidthUpdate
+Callback function that is called when the available bandwidth changes.
+
+Payload:
+
+Property | Type | Description
+--- | --- | ---
+bitrate | number | The estimated bitrate in bits/sec
+
+Example:
+```
+{
+  bitrate: 1000000
+}
+```
+
+Note: On Android ExoPlayer, you must set the [reportBandwidth](#reportbandwidth) prop to enable this event. This is due to the high volume of events generated.
+
+Platforms: Android ExoPlayer
+
 #### onEnd
@@ -751,0 +823,0 @@ Callback function that is called when the player reaches the end of the media.

Video.js

@@ -109,2 +109,8 @@ import React, {Component} from 'react';
 
+  _onBandwidthUpdate = (event) => {
+    if (this.props.onBandwidthUpdate) {
+      this.props.onBandwidthUpdate(event.nativeEvent);
+    }
+  };  
+
   _onSeek = (event) => {
@@ -251,2 +257,3 @@ if (this.state.showPoster && !this.props.audioOnly) {
       onVideoBuffer: this._onBuffer,
+      onVideoBandwidthUpdate: this._onBandwidthUpdate,
       onTimedMetadata: this._onTimedMetadata,
@@ -305,2 +312,3 @@ onVideoAudioBecomingNoisy: this._onAudioBecomingNoisy,
   ]),
+  filterEnabled: PropTypes.bool,
   /* Native only */
@@ -318,2 +326,3 @@ src: PropTypes.object,
   onVideoProgress: PropTypes.func,
+  onVideoBandwidthUpdate: PropTypes.func,
   onVideoSeek: PropTypes.func,
@@ -350,2 +359,9 @@ onVideoEnd: PropTypes.func,
   }),
+  selectedVideoTrack: PropTypes.shape({
+    type: PropTypes.string.isRequired,
+    value: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number
+    ])
+  }),  
   selectedTextTrack: PropTypes.shape({
@@ -384,2 +400,3 @@ type: PropTypes.string.isRequired,
   ignoreSilentSwitch: PropTypes.oneOf(['ignore', 'obey']),
+  reportBandwidth: PropTypes.bool,
   disableFocus: PropTypes.bool,
@@ -399,2 +416,3 @@ controls: PropTypes.bool,
   onProgress: PropTypes.func,
+  onBandwidthUpdate: PropTypes.func,
   onSeek: PropTypes.func,
@@ -401,0 +419,0 @@ onEnd: PropTypes.func,

No alert changes

Improved metrics

Total package byte prevSize

1163213

increased by196.51%

Number of package files

204

increased by179.45%

Lines of code

8345

increased by98.08%

Number of lines in readme file

1251

increased by6.11%

Worsened metrics

Dev dependency count

8

increased by100%

Dependency changes

• + Addedeme-encryption-scheme-polyfill@2.2.1(transitive)

• + Addedshaka-player@2.5.23(transitive)

• - Removedshaka-player@2.4.4(transitive)

• Updatedkeymirror@^0.1.1

• Updatedshaka-player@^2.4.4