react-native-video - npm Package Compare versions

Comparing version 5.1.0-alpha1 to 5.1.0-alpha2

CHANGELOG.md

 ## Changelog
 
-### next
+### 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)
@@ -5,0 +8,0 @@ * Added support for automaticallyWaitsToMinimizeStalling property (iOS) [#1723](https://github.com/react-native-community/react-native-video/pull/1723)

package.json

 {
     "name": "react-native-video",
-    "version": "5.1.0-alpha1",
+    "version": "5.1.0-alpha2",
     "description": "A <Video /> element for react-native",
@@ -5,0 +5,0 @@ "main": "Video.js",

README.md

@@ -97,3 +97,3 @@ ## react-native-video
   <summary>tvOS details</summary>
-  
+
 `react-native link react-native-video` doesn’t work properly with the tvOS target so we need to add the library manually.
@@ -299,2 +299,3 @@
 * [controls](#controls)
+* [disableFocus](#disableFocus)
 * [filter](#filter)
@@ -416,2 +417,4 @@ * [filterEnabled](#filterEnabled)
 
+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
@@ -467,3 +470,3 @@
 
-Platforms: iOS
+Platforms: iOS, Android Exoplayer
 
@@ -481,2 +484,4 @@ #### fullscreenAutorotate
 
+Note on Android ExoPlayer, the full-screen mode by default goes into landscape mode. Exiting from the full-screen mode will display the video in Initial orientation.
+
 Platforms: iOS
@@ -635,4 +640,4 @@
 
-* **false (default)** - Generate onBandwidthUpdate events
-* **true** - Don't generate onBandwidthUpdate events
+* **false (default)** - Don't generate onBandwidthUpdate events
+* **true** - Generate onBandwidthUpdate events
 
@@ -1176,3 +1181,3 @@ Platforms: Android ExoPlayer
 ```
-let response = await this.save();
+let response = await this.player.save();
 let path = response.uri;
@@ -1189,3 +1194,3 @@ ```
  - If the video is buffering then the save function promise will return after the video has finished buffering and processing.
- 
+
 Future: 
@@ -1195,3 +1200,3 @@ - Will support multiple qualities through options
  - Will support custom directory and file name through options
- 
+
 Platforms: iOS
@@ -1198,0 +1203,0 @@

Video.js

@@ -1,4 +0,4 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import {StyleSheet, requireNativeComponent, NativeModules, View, ViewPropTypes, Image, Platform, findNodeHandle} from 'react-native';
+import { StyleSheet, requireNativeComponent, NativeModules, View, ViewPropTypes, Image, Platform, UIManager, findNodeHandle, Dimensions } from 'react-native';
 import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
@@ -23,15 +23,42 @@ import TextTrackType from './TextTrackType';
     this.state = {
-      showPoster: !!props.poster
+      showPoster: !!props.poster,
+      androidFullScreen: false,
+      videoContainerLayout_x: 0,
+      videoContainerLayout_y: 0
     };
+    this.getDimension();
   }
 
+  /**
+   * @description this is will set the width and height needs to be considered for full screen
+   */
+  getDimension() {
+    if (Dimensions.get('window').width < Dimensions.get('window').height) {
+      this.width = Math.round(Dimensions.get('window').height);
+      this.height = Math.round(Dimensions.get('window').width);
+    }
+    else {
+      this.width = Math.round(Dimensions.get('window').width);
+      this.height = Math.round(Dimensions.get('window').height);
+    }
+  }
+
+  componentDidMount() {
+    UIManager.measure(findNodeHandle(this._videoContainer), (x, y) => {
+      this.setState({
+        videoContainerLayout_x: x,
+        videoContainerLayout_y: y
+      })
+    })
+  }
+
   setNativeProps(nativeProps) {
     this._root.setNativeProps(nativeProps);
   }
-  
+
   toTypeString(x) {
     switch (typeof x) {
       case "object":
-        return x instanceof Date 
-          ? x.toISOString() 
+        return x instanceof Date
+          ? x.toISOString()
           : JSON.stringify(x); // object, null
@@ -41,3 +68,3 @@ case "undefined":
       default: // boolean, number, string
-        return x.toString();      
+        return x.toString();
     }
@@ -58,3 +85,3 @@ }
     if (isNaN(time)) throw new Error('Specified time is not a number');
-    
+
     if (Platform.OS === 'ios') {
@@ -94,3 +121,3 @@ this.setNativeProps({
     if (this.state.showPoster) {
-      this.setState({showPoster: false});
+      this.setState({ showPoster: false });
     }
@@ -131,3 +158,3 @@ }
     }
-  };  
+  };
 
@@ -153,2 +180,3 @@ _onSeek = (event) => {
   _onFullscreenPlayerWillPresent = (event) => {
+    Platform.OS === 'android' && this.setState({ androidFullScreen: true })
     if (this.props.onFullscreenPlayerWillPresent) {
@@ -166,2 +194,3 @@ this.props.onFullscreenPlayerWillPresent(event.nativeEvent);
   _onFullscreenPlayerWillDismiss = (event) => {
+    Platform.OS === 'android' && this.setState({ androidFullScreen: false })
     if (this.props.onFullscreenPlayerWillDismiss) {
@@ -179,3 +208,6 @@ this.props.onFullscreenPlayerWillDismiss(event.nativeEvent);
   _onReadyForDisplay = (event) => {
-    this._hidePoster();
+    if (!this.props.audioOnly) {
+      this._hidePoster();
+    }
+    
     if (this.props.onReadyForDisplay) {
@@ -203,3 +235,3 @@ this.props.onReadyForDisplay(event.nativeEvent);
   };
-  
+
   _onExternalPlaybackChange = (event) => {
@@ -224,3 +256,3 @@ if (this.props.onExternalPlaybackChange) {
   _onRestoreUserInterfaceForPictureInPictureStop = (event) => {
-  	if (this.props.onRestoreUserInterfaceForPictureInPictureStop) {
+    if (this.props.onRestoreUserInterfaceForPictureInPictureStop) {
       this.props.onRestoreUserInterfaceForPictureInPictureStop();
@@ -258,3 +290,3 @@ }
     }
-    
+
     if (!uri) {
@@ -324,4 +356,18 @@ console.warn('Trying to load empty source.');
 
+    //androidFullScreen property will only impact on android. It will be always false for iOS.
+    const videoStyle = this.state.androidFullScreen ? {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: this.width,
+      height: this.height,
+      backgroundColor: '#ffffff',
+      justifyContent: "center",
+      zIndex: 99999,
+      marginTop: -1 * (this.state.videoContainerLayout_y ? parseFloat(this.state.videoContainerLayout_y) : 0), //margin: 0 - is not working properly. So, updated all the margin individually with 0.
+      marginLeft: -1 * (this.state.videoContainerLayout_x ? parseFloat(this.state.videoContainerLayout_x) : 0)
+    } : {}
+
     return (
-      <View style={nativeProps.style}>
+      <View ref={(videoContainer) => this._videoContainer = videoContainer} style={[nativeProps.style, videoStyle]}>
         <RCTVideo
@@ -342,18 +388,18 @@ ref={this._assignRoot}
   filter: PropTypes.oneOf([
-      FilterType.NONE,
-      FilterType.INVERT,
-      FilterType.MONOCHROME,
-      FilterType.POSTERIZE,
-      FilterType.FALSE,
-      FilterType.MAXIMUMCOMPONENT,
-      FilterType.MINIMUMCOMPONENT,
-      FilterType.CHROME,
-      FilterType.FADE,
-      FilterType.INSTANT,
-      FilterType.MONO,
-      FilterType.NOIR,
-      FilterType.PROCESS,
-      FilterType.TONAL,
-      FilterType.TRANSFER,
-      FilterType.SEPIA
+    FilterType.NONE,
+    FilterType.INVERT,
+    FilterType.MONOCHROME,
+    FilterType.POSTERIZE,
+    FilterType.FALSE,
+    FilterType.MAXIMUMCOMPONENT,
+    FilterType.MINIMUMCOMPONENT,
+    FilterType.CHROME,
+    FilterType.FADE,
+    FilterType.INSTANT,
+    FilterType.MONO,
+    FilterType.NOIR,
+    FilterType.PROCESS,
+    FilterType.TONAL,
+    FilterType.TRANSFER,
+    FilterType.SEPIA
   ]),
@@ -413,3 +459,3 @@ filterEnabled: PropTypes.bool,
     ])
-  }),  
+  }),
   selectedTextTrack: PropTypes.shape({
@@ -455,3 +501,3 @@ type: PropTypes.string.isRequired,
   fullscreenAutorotate: PropTypes.bool,
-  fullscreenOrientation: PropTypes.oneOf(['all','landscape','portrait']),
+  fullscreenOrientation: PropTypes.oneOf(['all', 'landscape', 'portrait']),
   progressUpdateInterval: PropTypes.number,
@@ -458,0 +504,0 @@ useTextureView: PropTypes.bool,

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

Lines of code

4673

2.21%

Number of lines in readme file

1431

0.35%

Worsened metrics

Total package byte prevSize

414259

-20.12%

Number of package files

75

-13.79%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes