react-native-video - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

package.json

 {
     "name": "react-native-video",
-    "version": "2.0.0",
+    "version": "2.1.0",
     "description": "A <Video /> element for react-native",
@@ -9,2 +9,6 @@ "main": "Video.js",
     "contributors": [
+         {
+            "name": "Isaiah Grey",
+            "email": "[e-mail]"
+        },
         {
@@ -17,2 +21,6 @@ "name": "Johannes Lumpe",
             "email": "[e-mail]"
+        },
+        {
+            "name": "Hampton Maxwell",
+            "email": "[e-mail]"
         }
@@ -19,0 +27,0 @@ ],

README.md

@@ -8,8 +8,24 @@ ## react-native-video
 
-### 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.
@@ -32,5 +48,7 @@
 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.
@@ -55,7 +73,7 @@
 <img src="./docs/tvOS-step-4.jpg" width="40%">
+</details>
 
-That’s all, you can use react-native-video for your tvOS application
+<details>
+  <summary>Android</summary>
 
-#### Android
-
 Run `react-native link` to link the react-native-video library.
@@ -100,5 +118,6 @@
 ```
+</details>
 
-#### Windows
-
+<details>
+  <summary>Windows</summary>
 Make the following additions to the given files manually:
@@ -111,6 +130,5 @@
 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`
 
@@ -122,5 +140,4 @@ **windows/myapp/myapp.csproj**
 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.
 
@@ -152,2 +169,3 @@ **MainPage.cs**
 ```
+</details>
 
@@ -162,2 +180,3 @@ ## Usage
 <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
        ref={(ref) => {
@@ -176,8 +195,12 @@ this.player = ref
        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
@@ -189,2 +212,5 @@ style={styles.backgroundVideo} />
 
+// Disable fullscreen
+this.player.dismissFullscreenPlayer()
+
 // To set video position in seconds (seek)
@@ -204,35 +230,20 @@ this.player.seek(0)
 ```
+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:
 
-## Android Expansion File Usage
+<img src="./docs/AppTransportSecuritySetting.png" width="50%">
 
-```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.
-       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} />
+For more detailed info check this [article](https://cocoacasts.com/how-to-add-app-transport-security-exception-domains)
+</details>
 
-// 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.
 
@@ -245,6 +256,3 @@ ### Load files with the RN Asset System
 <Video
-  repeat
-  resizeMode='cover'
   source={require('../assets/video/turntable.mp4')}
-  style={styles.backgroundVideo}
 />
@@ -257,12 +265,2 @@ ```
 
-## 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
@@ -269,0 +267,0 @@

Video.js

 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {StyleSheet, requireNativeComponent, NativeModules, View, Image} from 'react-native';
+import {StyleSheet, requireNativeComponent, NativeModules, View, ViewPropTypes, Image} from 'react-native';
 import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
@@ -311,3 +311,3 @@ import VideoResizeMode from './VideoResizeMode.js';
   rotation: PropTypes.number,
-  ...View.propTypes,
+  ...ViewPropTypes,
 };
@@ -314,0 +314,0 @@

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

572008

increased by22.86%

Number of package files

81

increased by26.56%

Lines of code

3159

increased by4.26%

Worsened metrics

Number of lines in readme file

284

decreased by-0.7%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes