Add full screen support to Android Exoplayer (#1730)

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

@@ -3,6 +3,7 @@ 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;
@@ -13,6 +14,7 @@ import android.view.View;
 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;
@@ -97,6 +99,7 @@ class ReactExoplayerView extends FrameLayout implements
     private Player.EventListener eventListener;
 
     private ExoPlayerView exoPlayerView;
+    private int initialOrientation;
 
     private DataSource.Factory mediaDataSourceFactory;
     private SimpleExoPlayer player;
@@ -169,6 +172,7 @@ 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();
@@ -292,6 +296,16 @@ 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
@@ -320,6 +334,33 @@ 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(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
@@ -545,10 +586,13 @@ class ReactExoplayerView extends FrameLayout implements
 
     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() {
@@ -642,6 +686,7 @@ class ReactExoplayerView extends FrameLayout implements
                 if (playerControlView != null) {
                     playerControlView.show();
                 }
+                enableFullScreenButton(true);
                 break;
             case Player.STATE_ENDED:
                 text += "ended";
@@ -1160,6 +1205,8 @@ class ReactExoplayerView extends FrameLayout implements
         if (fullscreen == isFullscreen) {
             return; // Avoid generating events when nothing is changing
         }
+
+        updateFullScreenIcon(fullscreen);
         isFullscreen = fullscreen;
 
         Activity activity = themedReactContext.getCurrentActivity();
@@ -1178,11 +1225,17 @@ 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,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>