chore: add setFullScreen to component's ref (#3855)
* chore: add setFullScreen to component's ref and remove presentFullscreenPlayer & dismissFullscreenPlayer
This commit is contained in:
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 {
|
||||||
|
Loading…
Reference in New Issue
Block a user