Broken page on changing the orientation while playing in full screen mode

[akhilsanker]

Bug

The screen is completely broken on changing the device orientation, while playing the video in full screen mode.

Environment info

React native info output:

  react: 16.8.3 
  react-native: 0.59.8 

Library version: react-native-video: 4.4.1

Steps To Reproduce

1. Play the video in full screen mode.
2. While playing, change the device orientation.
3. Close the video, with the close button control, and the page will be broken.
   ...

Describe what you expected to happen:

1. Not to break the screen while changing the orientation.

Reproducible sample code

		<SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
			<HeaderRootComponent title={language.studentSupport} />
			<Container>
				<Content>
					<List>
						<ListItem itemDivider>
							<View style={style.listHeaderWrapper}>
								<Icon name='videocam' style={{fontSize: 25}}/>
								<View style={style.listTextWrapper}>
									<Text>{language.videoText}</Text>
								</View>
							</View>
						</ListItem>                    
						<ListItem>
							<Video source ={{uri: language.videoUrl}}
								poster = {language.videoThumbUrl}
								ref={(ref) => {this.player = ref}}   
								repeat= {true}
								resizeMode= {"cover"}
								posterResizeMode = {"cover"}
								paused={this.state.isPaused}
								style={style.backgroundVideo} />
						</ListItem>
					</List>
				</Content>
			</Container>
		</SafeAreaView>

Thanks

[CHaNGeTe]

Are you handling onLayout?
If you don't enter fullscreen and rotate, the page behaves well? (A video of this scenario will be cool)

[akhilsanker]

Hi @CHaNGeTe ,

Not handling onLayout.
Its working fine in normal mode, without entering in full screen mode.

Thanks

[jonathangreco]

This bug is already known here #1319

@ashnfb already provided a fix for this on his repository. But the video still broke the layout if inside a scrollView.

That's the current state of this bug.

We need the help of @cobarx now to fix the Video inside a ScrollView Component

[akhilsanker]

Hi @jonathangreco ,

But the layout is breaking even if it is outside scrollview.

Thanks

[jonathangreco]

@ashnfb In the meantime, do we have a props to disable fullscreen button for iOS ? Can't go to production with this...

And I just decided to use 'react-native-video' for controls now since it's also available with android. I really hope that we can fix this quick now. I'm not sure fullscreen on iOS is mandatory (could be a boolean on props) since it's broke the layout for everyone.

[jonathangreco]

@akhilsanker Yes, it does break the layout, read again what I wrote.

@ashnfb fixed this on his repository (a fork of this repo)... It's not merged yet.

[akhilsanker]

Hi @jonathangreco ,

Do you have any workaround to solve this issue temporarily?

Thanks

[jonathangreco]

@akhilsanker No.

Edit : A workaround is possible ? See #1319

[ashnfb]

@ashnfb In the meantime, do we have a props to disable fullscreen button for iOS ? Can't go to production with this...

And I just decided to use 'react-native-video' for controls now since it's also available with android. I really hope that we can fix this quick now. I'm not sure fullscreen on iOS is mandatory (could be a boolean on props) since it's broke the layout for everyone.

@jonathangreco agreed. Let me see about adding a props for hiding the button. It's unfortunate, but this is due to using legacy APIs for displaying fullscreen content. Upgrading to newer APIs is a bigger undertaking. I will post updates about the fullscreen button in #1319

[akhilsanker]

Hi @cobarx ,
Any solution?

Thanks

[mehthabux]

any luck ?

[jwillingham789]

I'm still getting this issue