chore: add setFullScreen to component's ref (#3855)
* chore: add setFullScreen to component's ref and remove presentFullscreenPlayer & dismissFullscreenPlayer
This commit is contained in:
		
				
					committed by
					
						
						GitHub
					
				
			
			
				
	
			
			
			
						parent
						
							016fca8a2a
						
					
				
				
					commit
					3a4a13011a
				
			@@ -468,7 +468,7 @@ public class ReactExoplayerView extends FrameLayout implements
 | 
				
			|||||||
        //Handling the fullScreenButton click event
 | 
					        //Handling the fullScreenButton click event
 | 
				
			||||||
        final ImageButton fullScreenButton = playerControlView.findViewById(R.id.exo_fullscreen);
 | 
					        final ImageButton fullScreenButton = playerControlView.findViewById(R.id.exo_fullscreen);
 | 
				
			||||||
        fullScreenButton.setOnClickListener(v -> setFullscreen(!isFullscreen));
 | 
					        fullScreenButton.setOnClickListener(v -> setFullscreen(!isFullscreen));
 | 
				
			||||||
        updateFullScreenButtonVisbility();
 | 
					        updateFullScreenButtonVisibility();
 | 
				
			||||||
        refreshProgressBarVisibility();
 | 
					        refreshProgressBarVisibility();
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        // Invoking onPlaybackStateChanged and onPlayWhenReadyChanged events for Player
 | 
					        // Invoking onPlaybackStateChanged and onPlayWhenReadyChanged events for Player
 | 
				
			||||||
@@ -2171,19 +2171,15 @@ public class ReactExoplayerView extends FrameLayout implements
 | 
				
			|||||||
        return preventsDisplaySleepDuringVideoPlayback;
 | 
					        return preventsDisplaySleepDuringVideoPlayback;
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    private void updateFullScreenButtonVisbility() {
 | 
					    private void updateFullScreenButtonVisibility() {
 | 
				
			||||||
        if (playerControlView != null) {
 | 
					        if (playerControlView != null) {
 | 
				
			||||||
            final ImageButton fullScreenButton = playerControlView.findViewById(R.id.exo_fullscreen);
 | 
					            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);
 | 
					                fullScreenButton.setVisibility(GONE);
 | 
				
			||||||
            } else {
 | 
					            } else {
 | 
				
			||||||
                fullScreenButton.setVisibility(VISIBLE);
 | 
					                fullScreenButton.setVisibility(VISIBLE);
 | 
				
			||||||
            }
 | 
					            }
 | 
				
			||||||
            } else {
 | 
					 | 
				
			||||||
                fullScreenButton.setVisibility(GONE);
 | 
					 | 
				
			||||||
            }
 | 
					 | 
				
			||||||
        }
 | 
					        }
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@@ -2206,7 +2202,7 @@ public class ReactExoplayerView extends FrameLayout implements
 | 
				
			|||||||
        WindowInsetsControllerCompat controller = new WindowInsetsControllerCompat(window, window.getDecorView());
 | 
					        WindowInsetsControllerCompat controller = new WindowInsetsControllerCompat(window, window.getDecorView());
 | 
				
			||||||
        if (isFullscreen) {
 | 
					        if (isFullscreen) {
 | 
				
			||||||
            eventEmitter.fullscreenWillPresent();
 | 
					            eventEmitter.fullscreenWillPresent();
 | 
				
			||||||
            if (controls && fullScreenPlayerView != null) {
 | 
					            if (fullScreenPlayerView != null) {
 | 
				
			||||||
                fullScreenPlayerView.show();
 | 
					                fullScreenPlayerView.show();
 | 
				
			||||||
            }
 | 
					            }
 | 
				
			||||||
            UiThreadUtil.runOnUiThread(() -> {
 | 
					            UiThreadUtil.runOnUiThread(() -> {
 | 
				
			||||||
@@ -2217,9 +2213,10 @@ public class ReactExoplayerView extends FrameLayout implements
 | 
				
			|||||||
            });
 | 
					            });
 | 
				
			||||||
        } else {
 | 
					        } else {
 | 
				
			||||||
            eventEmitter.fullscreenWillDismiss();
 | 
					            eventEmitter.fullscreenWillDismiss();
 | 
				
			||||||
            if (controls && fullScreenPlayerView != null) {
 | 
					            if (fullScreenPlayerView != null) {
 | 
				
			||||||
                fullScreenPlayerView.dismiss();
 | 
					                fullScreenPlayerView.dismiss();
 | 
				
			||||||
                reLayoutControls();
 | 
					                reLayoutControls();
 | 
				
			||||||
 | 
					                setControls(controls);
 | 
				
			||||||
            }
 | 
					            }
 | 
				
			||||||
            UiThreadUtil.runOnUiThread(() -> {
 | 
					            UiThreadUtil.runOnUiThread(() -> {
 | 
				
			||||||
                WindowCompat.setDecorFitsSystemWindows(window, true);
 | 
					                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
 | 
					        // need to be done at the end to avoid hiding fullscreen control button when fullScreenPlayerView is shown
 | 
				
			||||||
        updateFullScreenButtonVisbility();
 | 
					        updateFullScreenButtonVisibility();
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    public void setUseTextureView(boolean useTextureView) {
 | 
					    public void setUseTextureView(boolean useTextureView) {
 | 
				
			||||||
@@ -2311,7 +2308,7 @@ public class ReactExoplayerView extends FrameLayout implements
 | 
				
			|||||||
        this.controls = controls;
 | 
					        this.controls = controls;
 | 
				
			||||||
        if (controls) {
 | 
					        if (controls) {
 | 
				
			||||||
            addPlayerControl();
 | 
					            addPlayerControl();
 | 
				
			||||||
            updateFullScreenButtonVisbility();
 | 
					            updateFullScreenButtonVisibility();
 | 
				
			||||||
        } else {
 | 
					        } else {
 | 
				
			||||||
            int indexOfPC = indexOfChild(playerControlView);
 | 
					            int indexOfPC = indexOfChild(playerControlView);
 | 
				
			||||||
            if (indexOfPC != -1) {
 | 
					            if (indexOfPC != -1) {
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -69,6 +69,13 @@ class VideoManagerModule(reactContext: ReactApplicationContext?) : ReactContextB
 | 
				
			|||||||
        }
 | 
					        }
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    @ReactMethod
 | 
				
			||||||
 | 
					    fun setFullScreen(fullScreen: Boolean, reactTag: Int) {
 | 
				
			||||||
 | 
					        performOnPlayerView(reactTag) {
 | 
				
			||||||
 | 
					            it?.setFullscreen(fullScreen)
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    companion object {
 | 
					    companion object {
 | 
				
			||||||
        private const val REACT_CLASS = "VideoManager"
 | 
					        private const val REACT_CLASS = "VideoManager"
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -12,6 +12,9 @@ This page shows the list of available methods
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
Take the player out of fullscreen mode.
 | 
					Take the player out of fullscreen mode.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					> [!WARNING]
 | 
				
			||||||
 | 
					> deprecated, use setFullScreen method instead
 | 
				
			||||||
 | 
					
 | 
				
			||||||
### `pause`
 | 
					### `pause`
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<PlatformsList types={['Android', 'iOS']} />
 | 
					<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.
 | 
					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`
 | 
					### `resume`
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<PlatformsList types={['Android', 'iOS']} />
 | 
					<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 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.
 | 
					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
 | 
					### Example Usage
 | 
				
			||||||
 | 
					
 | 
				
			||||||
```tsx
 | 
					```tsx
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -436,11 +436,7 @@ class VideoPlayer extends Component {
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
  toggleDecoration() {
 | 
					  toggleDecoration() {
 | 
				
			||||||
    this.setState({decoration: !this.state.decoration});
 | 
					    this.setState({decoration: !this.state.decoration});
 | 
				
			||||||
    if (this.state.decoration) {
 | 
					    this.video?.setFullScreen(!this.state.decoration);
 | 
				
			||||||
      this.video?.dismissFullscreenPlayer();
 | 
					 | 
				
			||||||
    } else {
 | 
					 | 
				
			||||||
      this.video?.presentFullscreenPlayer();
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  toggleShowNotificationControls() {
 | 
					  toggleShowNotificationControls() {
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -1004,6 +1004,7 @@ class RCTVideo: UIView, RCTVideoPlayerViewControllerDelegate, RCTPlayerObserverH
 | 
				
			|||||||
            _presentingViewController?.dismiss(animated: true, completion: { [weak self] in
 | 
					            _presentingViewController?.dismiss(animated: true, completion: { [weak self] in
 | 
				
			||||||
                self?.videoPlayerViewControllerDidDismiss(playerViewController: _playerViewController)
 | 
					                self?.videoPlayerViewControllerDidDismiss(playerViewController: _playerViewController)
 | 
				
			||||||
            })
 | 
					            })
 | 
				
			||||||
 | 
					            setControls(_controls)
 | 
				
			||||||
        }
 | 
					        }
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -92,4 +92,7 @@ RCT_EXTERN_METHOD(getCurrentPosition
 | 
				
			|||||||
                  : (nonnull NSNumber*)reactTag resolver
 | 
					                  : (nonnull NSNumber*)reactTag resolver
 | 
				
			||||||
                  : (RCTPromiseResolveBlock)resolve rejecter
 | 
					                  : (RCTPromiseResolveBlock)resolve rejecter
 | 
				
			||||||
                  : (RCTPromiseRejectBlock)reject)
 | 
					                  : (RCTPromiseRejectBlock)reject)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					RCT_EXTERN_METHOD(setFullScreen : (BOOL)fullScreen reactTag : (nonnull NSNumber*)reactTag)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@end
 | 
					@end
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -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 {
 | 
					    override class func requiresMainQueueSetup() -> Bool {
 | 
				
			||||||
        return true
 | 
					        return true
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -66,6 +66,7 @@ export interface VideoRef {
 | 
				
			|||||||
  save: (options: object) => Promise<VideoSaveData>;
 | 
					  save: (options: object) => Promise<VideoSaveData>;
 | 
				
			||||||
  setVolume: (volume: number) => void;
 | 
					  setVolume: (volume: number) => void;
 | 
				
			||||||
  getCurrentPosition: () => Promise<number>;
 | 
					  getCurrentPosition: () => Promise<number>;
 | 
				
			||||||
 | 
					  setFullScreen: (fullScreen: boolean) => void;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const Video = forwardRef<VideoRef, ReactVideoProps>(
 | 
					const Video = forwardRef<VideoRef, ReactVideoProps>(
 | 
				
			||||||
@@ -300,6 +301,10 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
 | 
				
			|||||||
      return VideoManager.getCurrentPosition(getReactTag(nativeRef));
 | 
					      return VideoManager.getCurrentPosition(getReactTag(nativeRef));
 | 
				
			||||||
    }, []);
 | 
					    }, []);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    const setFullScreen = useCallback((fullScreen: boolean) => {
 | 
				
			||||||
 | 
					      return VideoManager.setFullScreen(fullScreen, getReactTag(nativeRef));
 | 
				
			||||||
 | 
					    }, []);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    const onVideoLoadStart = useCallback(
 | 
					    const onVideoLoadStart = useCallback(
 | 
				
			||||||
      (e: NativeSyntheticEvent<OnLoadStartData>) => {
 | 
					      (e: NativeSyntheticEvent<OnLoadStartData>) => {
 | 
				
			||||||
        hasPoster && setShowPoster(true);
 | 
					        hasPoster && setShowPoster(true);
 | 
				
			||||||
@@ -518,6 +523,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
 | 
				
			|||||||
        restoreUserInterfaceForPictureInPictureStopCompleted,
 | 
					        restoreUserInterfaceForPictureInPictureStopCompleted,
 | 
				
			||||||
        setVolume,
 | 
					        setVolume,
 | 
				
			||||||
        getCurrentPosition,
 | 
					        getCurrentPosition,
 | 
				
			||||||
 | 
					        setFullScreen,
 | 
				
			||||||
      }),
 | 
					      }),
 | 
				
			||||||
      [
 | 
					      [
 | 
				
			||||||
        seek,
 | 
					        seek,
 | 
				
			||||||
@@ -529,6 +535,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
 | 
				
			|||||||
        restoreUserInterfaceForPictureInPictureStopCompleted,
 | 
					        restoreUserInterfaceForPictureInPictureStopCompleted,
 | 
				
			||||||
        setVolume,
 | 
					        setVolume,
 | 
				
			||||||
        getCurrentPosition,
 | 
					        getCurrentPosition,
 | 
				
			||||||
 | 
					        setFullScreen,
 | 
				
			||||||
      ],
 | 
					      ],
 | 
				
			||||||
    );
 | 
					    );
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -391,6 +391,7 @@ export interface VideoManagerType {
 | 
				
			|||||||
  ) => Promise<void>;
 | 
					  ) => Promise<void>;
 | 
				
			||||||
  setVolume: (volume: number, reactTag: number) => Promise<void>;
 | 
					  setVolume: (volume: number, reactTag: number) => Promise<void>;
 | 
				
			||||||
  getCurrentPosition: (reactTag: number) => Promise<number>;
 | 
					  getCurrentPosition: (reactTag: number) => Promise<number>;
 | 
				
			||||||
 | 
					  setFullScreen: (fullScreen: boolean, reactTag: number) => Promise<void>;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export interface VideoDecoderPropertiesType {
 | 
					export interface VideoDecoderPropertiesType {
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user