chore: add setFullScreen to component's ref (#3855)

* chore: add setFullScreen to component's ref and remove presentFullscreenPlayer & dismissFullscreenPlayer

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

@@ -468,7 +468,7 @@ public class ReactExoplayerView extends FrameLayout implements
         //Handling the fullScreenButton click event
         final ImageButton fullScreenButton = playerControlView.findViewById(R.id.exo_fullscreen);
         fullScreenButton.setOnClickListener(v -> setFullscreen(!isFullscreen));
-        updateFullScreenButtonVisbility();
+        updateFullScreenButtonVisibility();
         refreshProgressBarVisibility();
 
         // Invoking onPlaybackStateChanged and onPlayWhenReadyChanged events for Player
@@ -2171,18 +2171,14 @@ public class ReactExoplayerView extends FrameLayout implements
         return preventsDisplaySleepDuringVideoPlayback;
     }
 
-    private void updateFullScreenButtonVisbility() {
+    private void updateFullScreenButtonVisibility() {
         if (playerControlView != null) {
             final ImageButton fullScreenButton = playerControlView.findViewById(R.id.exo_fullscreen);
-            if (controls) {
+            //Handling the fullScreenButton click event
-                //Handling the fullScreenButton click event
+            if (isFullscreen && fullScreenPlayerView != null && !fullScreenPlayerView.isShowing()) {
-                if (isFullscreen && fullScreenPlayerView != null && !fullScreenPlayerView.isShowing()) {
-                    fullScreenButton.setVisibility(GONE);
-                } else {
-                    fullScreenButton.setVisibility(VISIBLE);
-                }
-            } else {
                 fullScreenButton.setVisibility(GONE);
+            } else {
+                fullScreenButton.setVisibility(VISIBLE);
             }
         }
     }
@@ -2206,7 +2202,7 @@ public class ReactExoplayerView extends FrameLayout implements
         WindowInsetsControllerCompat controller = new WindowInsetsControllerCompat(window, window.getDecorView());
         if (isFullscreen) {
             eventEmitter.fullscreenWillPresent();
-            if (controls && fullScreenPlayerView != null) {
+            if (fullScreenPlayerView != null) {
                 fullScreenPlayerView.show();
             }
             UiThreadUtil.runOnUiThread(() -> {
@@ -2217,9 +2213,10 @@ public class ReactExoplayerView extends FrameLayout implements
             });
         } else {
             eventEmitter.fullscreenWillDismiss();
-            if (controls && fullScreenPlayerView != null) {
+            if (fullScreenPlayerView != null) {
                 fullScreenPlayerView.dismiss();
                 reLayoutControls();
+                setControls(controls);
             }
             UiThreadUtil.runOnUiThread(() -> {
                 WindowCompat.setDecorFitsSystemWindows(window, true);
@@ -2228,7 +2225,7 @@ public class ReactExoplayerView extends FrameLayout implements
             });
         }
         // need to be done at the end to avoid hiding fullscreen control button when fullScreenPlayerView is shown
-        updateFullScreenButtonVisbility();
+        updateFullScreenButtonVisibility();
     }
 
     public void setUseTextureView(boolean useTextureView) {
@@ -2311,7 +2308,7 @@ public class ReactExoplayerView extends FrameLayout implements
         this.controls = controls;
         if (controls) {
             addPlayerControl();
-            updateFullScreenButtonVisbility();
+            updateFullScreenButtonVisibility();
         } else {
             int indexOfPC = indexOfChild(playerControlView);
             if (indexOfPC != -1) {

android/src/main/java/com/brentvatne/react/VideoManagerModule.kt

@@ -69,6 +69,13 @@ class VideoManagerModule(reactContext: ReactApplicationContext?) : ReactContextB
         }
     }
 
+    @ReactMethod
+    fun setFullScreen(fullScreen: Boolean, reactTag: Int) {
+        performOnPlayerView(reactTag) {
+            it?.setFullscreen(fullScreen)
+        }
+    }
+
     companion object {
         private const val REACT_CLASS = "VideoManager"
     }

docs/pages/component/methods.mdx

@@ -12,6 +12,9 @@ This page shows the list of available methods
 
 Take the player out of fullscreen mode.
 
+> [!WARNING]
+> deprecated, use setFullScreen method instead
+
 ### `pause`
 
 <PlatformsList types={['Android', 'iOS']} />
@@ -32,6 +35,9 @@ On iOS, this displays the video in a fullscreen view controller with controls.
 
 On Android, this puts the navigation controls in fullscreen mode. It is not a complete fullscreen implementation, so you will still need to apply a style that makes the width and height match your screen dimensions to get a fullscreen video.
 
+> [!WARNING]
+> deprecated, use setFullScreen method instead
+
 ### `resume`
 
 <PlatformsList types={['Android', 'iOS']} />
@@ -109,6 +115,18 @@ This function will change the volume exactly like [volume](./props#volume) prope
 This function retrieves and returns the precise current position of the video playback, measured in seconds.
 This function will throw an error if player is not initialized.
 
+### `setFullScreen`
+
+<PlatformsList types={['Android', 'iOS']} />
+
+`setFullScreen(fullscreen): Promise<void>`
+
+If you set it to `true`, the player enters fullscreen mode. If you set it to `false`, the player exits fullscreen mode.
+
+On iOS, this displays the video in a fullscreen view controller with controls.
+
+On Android, this puts the navigation controls in fullscreen mode. It is not a complete fullscreen implementation, so you will still need to apply a style that makes the width and height match your screen dimensions to get a fullscreen video.
+
 ### Example Usage
 
 ```tsx

examples/basic/src/VideoPlayer.tsx

@@ -436,11 +436,7 @@ class VideoPlayer extends Component {
 
   toggleDecoration() {
     this.setState({decoration: !this.state.decoration});
-    if (this.state.decoration) {
+    this.video?.setFullScreen(!this.state.decoration);
-      this.video?.dismissFullscreenPlayer();
-    } else {
-      this.video?.presentFullscreenPlayer();
-    }
   }
 
   toggleShowNotificationControls() {

ios/Video/RCTVideo.swift

@@ -1004,6 +1004,7 @@ class RCTVideo: UIView, RCTVideoPlayerViewControllerDelegate, RCTPlayerObserverH
             _presentingViewController?.dismiss(animated: true, completion: { [weak self] in
                 self?.videoPlayerViewControllerDidDismiss(playerViewController: _playerViewController)
             })
+            setControls(_controls)
         }
     }
 

ios/Video/RCTVideoManager.m

@@ -92,4 +92,7 @@ RCT_EXTERN_METHOD(getCurrentPosition
                   : (nonnull NSNumber*)reactTag resolver
                   : (RCTPromiseResolveBlock)resolve rejecter
                   : (RCTPromiseRejectBlock)reject)
+
+RCT_EXTERN_METHOD(setFullScreen : (BOOL)fullScreen reactTag : (nonnull NSNumber*)reactTag)
+
 @end

ios/Video/RCTVideoManager.swift

@@ -93,6 +93,13 @@ class RCTVideoManager: RCTViewManager {
         })
     }
 
+    @objc(setFullScreen:reactTag:)
+    func setFullScreen(fullScreen: Bool, reactTag: NSNumber) {
+        performOnVideoView(withReactTag: reactTag, callback: { videoView in
+            videoView?.setFullscreen(fullScreen)
+        })
+    }
+
     override class func requiresMainQueueSetup() -> Bool {
         return true
     }

src/Video.tsx

@@ -66,6 +66,7 @@ export interface VideoRef {
   save: (options: object) => Promise<VideoSaveData>;
   setVolume: (volume: number) => void;
   getCurrentPosition: () => Promise<number>;
+  setFullScreen: (fullScreen: boolean) => void;
 }
 
 const Video = forwardRef<VideoRef, ReactVideoProps>(
@@ -300,6 +301,10 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       return VideoManager.getCurrentPosition(getReactTag(nativeRef));
     }, []);
 
+    const setFullScreen = useCallback((fullScreen: boolean) => {
+      return VideoManager.setFullScreen(fullScreen, getReactTag(nativeRef));
+    }, []);
+
     const onVideoLoadStart = useCallback(
       (e: NativeSyntheticEvent<OnLoadStartData>) => {
         hasPoster && setShowPoster(true);
@@ -518,6 +523,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
         restoreUserInterfaceForPictureInPictureStopCompleted,
         setVolume,
         getCurrentPosition,
+        setFullScreen,
       }),
       [
         seek,
@@ -529,6 +535,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
         restoreUserInterfaceForPictureInPictureStopCompleted,
         setVolume,
         getCurrentPosition,
+        setFullScreen,
       ],
     );
 

src/specs/VideoNativeComponent.ts

@@ -391,6 +391,7 @@ export interface VideoManagerType {
   ) => Promise<void>;
   setVolume: (volume: number, reactTag: number) => Promise<void>;
   getCurrentPosition: (reactTag: number) => Promise<number>;
+  setFullScreen: (fullScreen: boolean, reactTag: number) => Promise<void>;
 }
 
 export interface VideoDecoderPropertiesType {