diff --git a/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java b/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java index 41f5ada2..69ef919b 100644 --- a/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java +++ b/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 - if (isFullscreen && fullScreenPlayerView != null && !fullScreenPlayerView.isShowing()) { - fullScreenButton.setVisibility(GONE); - } else { - fullScreenButton.setVisibility(VISIBLE); - } - } else { + //Handling the fullScreenButton click event + if (isFullscreen && fullScreenPlayerView != null && !fullScreenPlayerView.isShowing()) { 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) { diff --git a/android/src/main/java/com/brentvatne/react/VideoManagerModule.kt b/android/src/main/java/com/brentvatne/react/VideoManagerModule.kt index c736cf01..716f337d 100644 --- a/android/src/main/java/com/brentvatne/react/VideoManagerModule.kt +++ b/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" } diff --git a/docs/pages/component/methods.mdx b/docs/pages/component/methods.mdx index 112fccaa..4043dc5e 100644 --- a/docs/pages/component/methods.mdx +++ b/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` @@ -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` @@ -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` + + + +`setFullScreen(fullscreen): Promise` + +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 diff --git a/examples/basic/src/VideoPlayer.tsx b/examples/basic/src/VideoPlayer.tsx index f712e013..3b4b9a00 100644 --- a/examples/basic/src/VideoPlayer.tsx +++ b/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?.dismissFullscreenPlayer(); - } else { - this.video?.presentFullscreenPlayer(); - } + this.video?.setFullScreen(!this.state.decoration); } toggleShowNotificationControls() { diff --git a/ios/Video/RCTVideo.swift b/ios/Video/RCTVideo.swift index e1a5d9f8..37435b3a 100644 --- a/ios/Video/RCTVideo.swift +++ b/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) } } diff --git a/ios/Video/RCTVideoManager.m b/ios/Video/RCTVideoManager.m index d65901bb..8c4bad60 100644 --- a/ios/Video/RCTVideoManager.m +++ b/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 diff --git a/ios/Video/RCTVideoManager.swift b/ios/Video/RCTVideoManager.swift index 7f762fca..12ac4222 100644 --- a/ios/Video/RCTVideoManager.swift +++ b/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 } diff --git a/src/Video.tsx b/src/Video.tsx index c2dba261..05c5c083 100644 --- a/src/Video.tsx +++ b/src/Video.tsx @@ -66,6 +66,7 @@ export interface VideoRef { save: (options: object) => Promise; setVolume: (volume: number) => void; getCurrentPosition: () => Promise; + setFullScreen: (fullScreen: boolean) => void; } const Video = forwardRef( @@ -300,6 +301,10 @@ const Video = forwardRef( return VideoManager.getCurrentPosition(getReactTag(nativeRef)); }, []); + const setFullScreen = useCallback((fullScreen: boolean) => { + return VideoManager.setFullScreen(fullScreen, getReactTag(nativeRef)); + }, []); + const onVideoLoadStart = useCallback( (e: NativeSyntheticEvent) => { hasPoster && setShowPoster(true); @@ -518,6 +523,7 @@ const Video = forwardRef( restoreUserInterfaceForPictureInPictureStopCompleted, setVolume, getCurrentPosition, + setFullScreen, }), [ seek, @@ -529,6 +535,7 @@ const Video = forwardRef( restoreUserInterfaceForPictureInPictureStopCompleted, setVolume, getCurrentPosition, + setFullScreen, ], ); diff --git a/src/specs/VideoNativeComponent.ts b/src/specs/VideoNativeComponent.ts index 7193771f..f6e8ee6f 100644 --- a/src/specs/VideoNativeComponent.ts +++ b/src/specs/VideoNativeComponent.ts @@ -391,6 +391,7 @@ export interface VideoManagerType { ) => Promise; setVolume: (volume: number, reactTag: number) => Promise; getCurrentPosition: (reactTag: number) => Promise; + setFullScreen: (fullScreen: boolean, reactTag: number) => Promise; } export interface VideoDecoderPropertiesType {