railbird/react-native-video
10
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
9 changed files with 56 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java
View File

@@ -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,19 +2171,15 @@ 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 {
fullScreenButton.setVisibility(GONE);
}
}
}
@@ -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) {

7
android/src/main/java/com/brentvatne/react/VideoManagerModule.kt
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 {
private const val REACT_CLASS = "VideoManager"
}

18
docs/pages/component/methods.mdx
View File

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

6
examples/basic/src/VideoPlayer.tsx
View File

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

1
ios/Video/RCTVideo.swift
View File

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

3
ios/Video/RCTVideoManager.m
View File

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

7
ios/Video/RCTVideoManager.swift
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 {
return true
}

7
src/Video.tsx
View File

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

1
src/specs/VideoNativeComponent.ts
View File

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