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

* chore: add setFullScreen to component's ref and remove presentFullscreenPlayer & dismissFullscreenPlayer
This commit is contained in:
Seyed Mostafa Hasani 2024-06-11 00:11:26 +03:30 committed by GitHub
parent 016fca8a2a
commit 3a4a13011a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 56 additions and 19 deletions

View File

@ -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) {

View File

@ -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"
} }

View File

@ -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

View File

@ -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() {

View File

@ -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)
} }
} }

View File

@ -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

View File

@ -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
} }

View File

@ -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,
], ],
); );

View File

@ -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 {