Added the full screen support in Android Exoplayer

Video.js

@@ -1,6 +1,6 @@
-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, findNodeHandle, Dimensions } from 'react-native';
 import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
 import TextTrackType from './TextTrackType';
 import FilterType from './FilterType';
@@ -20,24 +20,40 @@ export default class Video extends Component {
     super(props);
 
     this.state = {
-      showPoster: !!props.poster
+      showPoster: !!props.poster,
+      androidFullScreen: false
     };
+    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);
+    }
   }
 
   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
       case "undefined":
         return "";
       default: // boolean, number, string
-        return x.toString();      
+        return x.toString();
     }
   }
 
@@ -53,7 +69,7 @@ export default class Video extends Component {
 
   seek = (time, tolerance = 100) => {
     if (isNaN(time)) throw new Error('Specified time is not a number');
-    
+
     if (Platform.OS === 'ios') {
       this.setNativeProps({
         seek: {
@@ -88,7 +104,7 @@ export default class Video extends Component {
 
   _hidePoster = () => {
     if (this.state.showPoster) {
-      this.setState({showPoster: false});
+      this.setState({ showPoster: false });
     }
   }
 
@@ -124,7 +140,7 @@ export default class Video extends Component {
     if (this.props.onBandwidthUpdate) {
       this.props.onBandwidthUpdate(event.nativeEvent);
     }
-  };  
+  };
 
   _onSeek = (event) => {
     if (this.props.onSeek) {
@@ -145,6 +161,7 @@ export default class Video extends Component {
   };
 
   _onFullscreenPlayerWillPresent = (event) => {
+    Platform.OS === 'android' && this.setState({ androidFullScreen: true })
     if (this.props.onFullscreenPlayerWillPresent) {
       this.props.onFullscreenPlayerWillPresent(event.nativeEvent);
     }
@@ -157,6 +174,7 @@ export default class Video extends Component {
   };
 
   _onFullscreenPlayerWillDismiss = (event) => {
+    Platform.OS === 'android' && this.setState({ androidFullScreen: false })
     if (this.props.onFullscreenPlayerWillDismiss) {
       this.props.onFullscreenPlayerWillDismiss(event.nativeEvent);
     }
@@ -192,7 +210,7 @@ export default class Video extends Component {
       this.props.onPlaybackRateChange(event.nativeEvent);
     }
   };
-  
+
   _onExternalPlaybackChange = (event) => {
     if (this.props.onExternalPlaybackChange) {
       this.props.onExternalPlaybackChange(event.nativeEvent);
@@ -212,7 +230,7 @@ export default class Video extends Component {
   };
 
   _onRestoreUserInterfaceForPictureInPictureStop = (event) => {
-  	if (this.props.onRestoreUserInterfaceForPictureInPictureStop) {
+    if (this.props.onRestoreUserInterfaceForPictureInPictureStop) {
       this.props.onRestoreUserInterfaceForPictureInPictureStop();
     }
   };
@@ -245,7 +263,7 @@ export default class Video extends Component {
     if (uri && uri.match(/^\//)) {
       uri = `file://${uri}`;
     }
-    
+
     if (!uri) {
       console.warn('Trying to load empty source.');
     }
@@ -310,8 +328,24 @@ export default class Video extends Component {
       resizeMode: this.props.posterResizeMode || 'contain',
     };
 
+    //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,
+      marginLeft: 0,  //margin: 0 - is not working properly. So, updated all the margin individually with 0.
+      marginRight: 0,
+      marginTop: 0,
+      marginBottom: 0
+    } : {}
+
     return (
-      <View style={nativeProps.style}>
+      <View style={[nativeProps.style, videoStyle]}>
         <RCTVideo
           ref={this._assignRoot}
           {...nativeProps}
@@ -327,22 +361,22 @@ export default class Video extends Component {
 
 Video.propTypes = {
   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
   ]),
   filterEnabled: PropTypes.bool,
   /* Native only */
@@ -396,7 +430,7 @@ Video.propTypes = {
       PropTypes.string,
       PropTypes.number
     ])
-  }),  
+  }),
   selectedTextTrack: PropTypes.shape({
     type: PropTypes.string.isRequired,
     value: PropTypes.oneOfType([
@@ -437,7 +471,7 @@ Video.propTypes = {
   audioOnly: PropTypes.bool,
   currentTime: PropTypes.number,
   fullscreenAutorotate: PropTypes.bool,
-  fullscreenOrientation: PropTypes.oneOf(['all','landscape','portrait']),
+  fullscreenOrientation: PropTypes.oneOf(['all', 'landscape', 'portrait']),
   progressUpdateInterval: PropTypes.number,
   useTextureView: PropTypes.bool,
   hideShutterView: PropTypes.bool,

android-exoplayer/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java

@@ -3,6 +3,7 @@
 import android.annotation.SuppressLint;
 import android.app.Activity;
 import android.content.Context;
+import android.content.pm.ActivityInfo;
 import android.media.AudioManager;
 import android.net.Uri;
 import android.os.Handler;
@@ -13,6 +14,7 @@
 import android.view.Window;
 import android.view.accessibility.CaptioningManager;
 import android.widget.FrameLayout;
+import android.widget.ImageView;
 
 import com.brentvatne.react.R;
 import com.brentvatne.receiver.AudioBecomingNoisyReceiver;
@@ -298,6 +300,16 @@ public void onClick(View v) {
             }
         });
 
+        //Handling the fullScreenButton click event
+        FrameLayout fullScreenButton = playerControlView.findViewById(R.id.exo_fullscreen_button);
+        fullScreenButton.setOnClickListener(new View.OnClickListener() {
+            @Override
+            public void onClick(View v) {
+                setFullscreen(!isFullscreen);
+            }
+        });
+        updateFullScreenIcon(isFullscreen);
+
         // Invoking onPlayerStateChanged event for Player
         eventListener = new Player.EventListener() {
             @Override
@@ -326,6 +338,33 @@ private void addPlayerControl() {
         addView(playerControlView, 1, layoutParams);
     }
 
+    /**
+     * Update fullscreen icon
+     */
+    private void updateFullScreenIcon(Boolean fullScreen) {
+        if(playerControlView != null && player != null) {
+            //Play the video whenever the user clicks minimize or maximise button. In order to enable the controls
+            player.setPlayWhenReady(true);
+            ImageView fullScreenIcon = playerControlView.findViewById(R.id.exo_fullscreen_icon);
+            if (fullScreen) {
+                fullScreenIcon.setImageResource(R.drawable.fullscreen_shrink);
+            } else {
+                fullScreenIcon.setImageResource(R.drawable.fullscreen_expand);
+            }
+        }
+    }
+
+    /**
+     * Enable or Disable fullscreen button
+     */
+    private void enableFullScreenButton(Boolean enable) {
+        if(playerControlView != null) {
+            FrameLayout fullScreenButton = playerControlView.findViewById(R.id.exo_fullscreen_button);
+            fullScreenButton.setAlpha(enable ? 1.0f : 0.5f);
+            fullScreenButton.setEnabled(enable);
+        }
+    }
+
     /**
      * Update the layout
      * @param view  view needs to update layout
@@ -530,10 +569,13 @@ private void stopPlayback() {
 
     private void onStopPlayback() {
         if (isFullscreen) {
-            setFullscreen(false);
+            //When the video stopPlayback.
+            //If the video is in fullscreen, then we will update the video to normal mode.
+            setFullscreen(!isFullscreen);
         }
         setKeepScreenOn(false);
         audioManager.abandonAudioFocus(this);
+        enableFullScreenButton(false);
     }
 
     private void updateResumePosition() {
@@ -620,6 +662,7 @@ public void onPlayerStateChanged(boolean playWhenReady, int playbackState) {
                 if(playerControlView != null) {
                     playerControlView.show();
                 }
+                enableFullScreenButton(true);
                 break;
             case ExoPlayer.STATE_ENDED:
                 text += "ended";
@@ -1125,6 +1168,8 @@ public void setFullscreen(boolean fullscreen) {
         if (fullscreen == isFullscreen) {
             return; // Avoid generating events when nothing is changing
         }
+
+        updateFullScreenIcon(fullscreen);
         isFullscreen = fullscreen;
 
         Activity activity = themedReactContext.getCurrentActivity();
@@ -1143,11 +1188,13 @@ public void setFullscreen(boolean fullscreen) {
                 uiOptions = SYSTEM_UI_FLAG_HIDE_NAVIGATION
                         | SYSTEM_UI_FLAG_FULLSCREEN;
             }
+            activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
             eventEmitter.fullscreenWillPresent();
             decorView.setSystemUiVisibility(uiOptions);
             eventEmitter.fullscreenDidPresent();
         } else {
             uiOptions = View.SYSTEM_UI_FLAG_VISIBLE;
+            activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
             eventEmitter.fullscreenWillDismiss();
             decorView.setSystemUiVisibility(uiOptions);
             eventEmitter.fullscreenDidDismiss();

android-exoplayer/src/main/res/layout/exo_player_control_view.xml

@@ -71,6 +71,22 @@
             android:paddingRight="4dp"
             android:includeFontPadding="false"
             android:textColor="#FFBEBEBE"/>
+        <FrameLayout
+            android:id="@+id/exo_fullscreen_button"
+            android:layout_width="32dp"
+            android:layout_height="32dp"
+            android:layout_gravity="right">
+
+            <ImageView
+                android:id="@+id/exo_fullscreen_icon"
+                android:layout_width="18dp"
+                android:layout_height="18dp"
+                android:layout_gravity="center"
+                android:adjustViewBounds="true"
+                android:scaleType="fitCenter"
+                android:src="@drawable/fullscreen_expand"/>
+
+        </FrameLayout>
     </LinearLayout>
 
 </LinearLayout>