Removed JS fullscreening for Android (#2013)

CHANGELOG.md

@@ -9,6 +9,7 @@
 - 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)
+- Reverted the JS fullscreening for Android. [#2013](https://github.com/react-native-community/react-native-video/pull/2013)
 
 ### Version 5.1.0-alpha5
 

README.md

@@ -455,7 +455,7 @@ Controls whether the player enters fullscreen on play.
 * **false (default)** - Don't display the video in fullscreen
 * **true** - Display the video in fullscreen
 
-Platforms: iOS, Android Exoplayer
+Platforms: iOS
 
 #### fullscreenAutorotate
 If a preferred [fullscreenOrientation](#fullscreenorientation) is set, causes the video to rotate to that orientation but permits rotation of the screen to orientation held by user. Defaults to TRUE.
@@ -468,8 +468,6 @@ Platforms: iOS
 * **landscape**
 * **portrait**
 
-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
 
 #### headers

Video.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { StyleSheet, requireNativeComponent, NativeModules, View, ViewPropTypes, Image, Platform, UIManager, findNodeHandle, Dimensions } from 'react-native';
+import { StyleSheet, requireNativeComponent, NativeModules, View, ViewPropTypes, Image, Platform, findNodeHandle } from 'react-native';
 import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
 import TextTrackType from './TextTrackType';
 import FilterType from './FilterType';
@@ -21,34 +21,7 @@ export default class Video extends Component {
 
     this.state = {
       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) {
@@ -172,7 +145,6 @@ export default class Video extends Component {
   };
 
   _onFullscreenPlayerWillPresent = (event) => {
-    Platform.OS === 'android' && this.setState({ androidFullScreen: true });
     if (this.props.onFullscreenPlayerWillPresent) {
       this.props.onFullscreenPlayerWillPresent(event.nativeEvent);
     }
@@ -185,7 +157,6 @@ export default class Video extends Component {
   };
 
   _onFullscreenPlayerWillDismiss = (event) => {
-    Platform.OS === 'android' && this.setState({ androidFullScreen: false });
     if (this.props.onFullscreenPlayerWillDismiss) {
       this.props.onFullscreenPlayerWillDismiss(event.nativeEvent);
     }
@@ -342,25 +313,8 @@ 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,
-      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 ref={(videoContainer) => {
+      <View style={nativeProps.style}>
-        this._videoContainer = videoContainer;
-        return videoContainer;
-        }} style={[nativeProps.style, videoStyle]}>
         <RCTVideo
           ref={this._assignRoot}
           {...nativeProps}

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

@@ -3,7 +3,6 @@ package com.brentvatne.exoplayer;
 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;
@@ -15,7 +14,6 @@ import android.view.Window;
 import android.view.accessibility.CaptioningManager;
 import android.widget.FrameLayout;
 import android.widget.ImageButton;
-import android.widget.ImageView;
 
 import com.brentvatne.react.R;
 import com.brentvatne.receiver.AudioBecomingNoisyReceiver;
@@ -101,7 +99,6 @@ class ReactExoplayerView extends FrameLayout implements
     private Player.EventListener eventListener;
 
     private ExoPlayerView exoPlayerView;
-    private int initialOrientation;
 
     private DataSource.Factory mediaDataSourceFactory;
     private SimpleExoPlayer player;
@@ -182,7 +179,6 @@ class ReactExoplayerView extends FrameLayout implements
     public ReactExoplayerView(ThemedReactContext context, ReactExoplayerConfig config) {
         super(context);
         this.themedReactContext = context;
-        this.initialOrientation = getResources().getConfiguration().orientation;
         this.eventEmitter = new VideoEventEmitter(context);
         this.config = config;
         this.bandwidthMeter = config.getBandwidthMeter();
@@ -335,16 +331,6 @@ class ReactExoplayerView extends FrameLayout implements
             }
         });
 
-        //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
@@ -373,33 +359,6 @@ class ReactExoplayerView extends FrameLayout implements
         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(!isPaused);
-            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
@@ -625,13 +584,10 @@ class ReactExoplayerView extends FrameLayout implements
 
     private void onStopPlayback() {
         if (isFullscreen) {
-            //When the video stopPlayback.
+            setFullscreen(false);
-            //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() {
@@ -730,7 +686,6 @@ class ReactExoplayerView extends FrameLayout implements
                 if (playerControlView != null) {
                     playerControlView.show();
                 }
-                enableFullScreenButton(true);
                 break;
             case Player.STATE_ENDED:
                 text += "ended";
@@ -1249,8 +1204,6 @@ class ReactExoplayerView extends FrameLayout implements
         if (fullscreen == isFullscreen) {
             return; // Avoid generating events when nothing is changing
         }
-
-        updateFullScreenIcon(fullscreen);
         isFullscreen = fullscreen;
 
         Activity activity = themedReactContext.getCurrentActivity();
@@ -1269,17 +1222,11 @@ class ReactExoplayerView extends FrameLayout implements
                 uiOptions = SYSTEM_UI_FLAG_HIDE_NAVIGATION
                         | SYSTEM_UI_FLAG_FULLSCREEN;
             }
-            activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR_LANDSCAPE);
             eventEmitter.fullscreenWillPresent();
             decorView.setSystemUiVisibility(uiOptions);
             eventEmitter.fullscreenDidPresent();
         } else {
             uiOptions = View.SYSTEM_UI_FLAG_VISIBLE;
-            //orientation, 1 is for Portrait and 2 for Landscape.
-            if(this.initialOrientation == 1)
-                activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
-            else
-                activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
             eventEmitter.fullscreenWillDismiss();
             decorView.setSystemUiVisibility(uiOptions);
             eventEmitter.fullscreenDidDismiss();

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

@@ -71,22 +71,6 @@
             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>