-
Notifications
You must be signed in to change notification settings - Fork 10
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[BUG] Trying to exit fullscreen on Android doesn't exit fullscreen or crashes #52
Comments
Looking at the logs it looks like a null pointer exception caused in this function: jwplayer-react-native/android/src/main/java/com/jwplayer/rnjwplayer/RNJWPlayerView.java Line 457 in 8493364
Seems like Perhaps because I tried to exit fullscreen but nothing really happened, so this was executed: // Remove the player view from the root ViewGroup.
mRootView.removeView(mPlayerView); And then I try and press the fullscreen button again, only this time the |
@dominictobias I think the full-screen handler here needs a refactor. It's a pretty dated implementation. I'll make sure to follow up if we can get a quick fix in place. Out of curiosity, what is your preference for full-screen? Do you expect the player to go into full-screen portrait or landscape? Would you like to have a method for overriding the behavior? I'm considering how best to refactor this piece, and any input would be appreciated. |
It would be great to control that as we will have "normal" landscape videos which we might want to open fullscreen in horizontal mode and the user can rotate the screen. But we will also have Insta/TikTok/YT style Shorts which are portrait, and clicking these should definitely open in portrait fullscreen |
Thanks @dominictobias. I am starting work on this refactor this week and will update you as we progress. My goal right now is to get closer to what existed before a change in the Android SDK altered the experience and be crash-free. You should be able to dictate what type of full-screen is favored, as was the past experience. As always, if you need a non-standard use case, you can fork this repository and create your own full-screen handler class to extend your needs. |
@dominictobias, the issue turned out to be that you were using the player in a Modal (or so it seemed). For now, I took the simple(r) path of allowing you (the developer) to set a prop for Once approved and released, when using the player in a Modal (or dialog), you must set the prop |
You are right it is in a |
Hello, is there a fix for this already. We currently have an app in production and we are facing the same issue. Although our player isn't embedded in a modal, however the app crashes with the same error when you attempt to exitfullscreen |
Hey @Tactica-Zone , could you share your implementation? Are you able to recreate this inside a sample app (or ideally the Example app in the repository) you can share with us? |
@dominictobias We have merged a PR that we hope will resolve this. Can you test the master branch in your app to see if it resolves your crash? I can push a build to NPM, but I would like to ensure it fixes your issue first. |
@Jmilham21 Trying out master the behavior is still quite strange. It only crashes some of the time, other times it just minimizes the app. Another issue I noticed is that the video becomes dimmer in fullscreen. Full screen X button doesn't work correct, pressing [ ] button closes app: Same thing but this time pressing [ ] button crashes the app, screen dimming is more noticeable in this vid: If only the [ ] button is pressed, the behavior is also odd - the first 1-2 clicks it doesn't do much, next it crashes: On IOS side same code works nicely:
VideoModal.ts import {
Modal,
Pressable,
StyleSheet,
View,
useWindowDimensions,
} from 'react-native'
import { VideoItemResponse } from '@api/types/external/jwVideo'
import { VideoPlayer } from './VideoPlayer'
interface VideoModalProps {
visible: boolean
video: VideoItemResponse
onRequestClose: () => void
}
export function VideoModal({
visible,
video,
onRequestClose,
}: VideoModalProps) {
const { width } = useWindowDimensions()
const videoHeight = (width / 8) * 5 // JW is 8/5
return (
<Modal
animationType="slide"
transparent
visible={visible}
onRequestClose={onRequestClose}
>
<View style={styles.modalContainer}>
<Pressable style={styles.bgPress} onPress={onRequestClose} />
<View pointerEvents="box-none">
<VideoPlayer
height={videoHeight}
autoStart={true}
playlist={video.playlist}
onComplete={() => onRequestClose()}
/>
</View>
</View>
</Modal>
)
}
const styles = StyleSheet.create({
modalContainer: {
flex: 1,
position: 'relative',
justifyContent: 'center',
backgroundColor: 'rgba(0,0,0,0.5)',
},
bgPress: {
position: 'absolute',
width: '100%',
height: '100%',
},
}) VideoPlayer.ts import JWPlayer, {
JwConfig,
JwPlaylistItem,
} from '@jwplayer/jwplayer-react-native'
import { useRef, useState } from 'react'
import { Platform, View } from 'react-native'
interface VideoPlayerProps {
playlist: JwPlaylistItem[]
autoStart?: boolean
height: number
onPlay?: (player: JWPlayer) => void
onPause?: (player: JWPlayer) => void
onComplete?: (player: JWPlayer) => void
}
export function VideoPlayer({
playlist,
autoStart = false,
height,
onPlay,
onPause,
onComplete,
}: VideoPlayerProps) {
const jwPlayerRef = useRef<JWPlayer>(null)
const [isFullScreen, setIsFullScreen] = useState(false)
// JWPlayer isn't reactive to playlist changes so don't render until we have one.
if (!playlist.length) {
return null
}
const config: JwConfig = {
license:
Platform.OS === 'android'
? process.env.EXPO_PUBLIC_LICENSE_KEY_ANDROID || ''
: process.env.EXPO_PUBLIC_LICENSE_KEY_IOS || '',
autostart: autoStart,
playlist,
}
const onVideoPlay = () => {
onPlay?.(jwPlayerRef.current!)
}
const onVideoPause = () => {
onPause?.(jwPlayerRef.current!)
}
const onVideoComplete = () => {
onComplete?.(jwPlayerRef.current!)
}
return (
<View>
<JWPlayer
ref={jwPlayerRef}
style={isFullScreen ? undefined : { height }}
config={config}
onFullScreen={() => setIsFullScreen(true)}
onFullScreenExit={() => setIsFullScreen(false)}
onPlay={onVideoPlay}
onPause={onVideoPause}
onComplete={onVideoComplete}
/>
</View>
)
} |
Thanks @dominictobias. I'll follow up when I can dig into this with your configuration. Thanks for the info. |
@dominictobias do you have the prop |
Sorry you are right I forgot to add it. It works great with |
Unfortunately the published version 1.0.1 is completely broken (videos are sometimes black, there are low level exceptions when going between them) while the master version mostly works (only occasional low level exception crashes when swiping too fast between videos) with or without Sadly doing |
@dominictobias I published our changes in version |
The |
Yes It's intended to be a I'll make a new |
Describe the bug
On Android when going fullscreen you can't exit it.
To Reproduce
Simple component I'm not doing anything unusual just config, not using
jwPlayerRef
yet.// Press Fullscreen, then close X (still fullscreen), then Fullscreen [ ] = crash
https://github.com/jwplayer/jwplayer-react-native/assets/160451465/508fea32-0e50-4fa9-8161-efebd8900388
// Open with Fullscreen and try to close with Fullscreen [ ]. After a couple of attempts of it only slightly changing it crashes
https://github.com/jwplayer/jwplayer-react-native/assets/160451465/d63e1c35-318f-4e59-bb02-cfe7e36abbfa
Desktop (please complete the following information):
Additional context
Tested on Samsung S22 with latest software updates (Android 14 + latest everything)
The text was updated successfully, but these errors were encountered: