FullScreen issues

[giambafiume]

Bug

I've installed the latest version of react-native-video. I'm using Android Exoplayer, when I click on the full screen button it works in a strange way:

• the screen rotates automatically in landscape but the video is not in full screen
• the video controls are not available (they aren't visible)
• I use createMaterialTopTabNavigator from react-navigation and all the tabs are still visible and clickable
• I've three buttons that are linked to different video stream that work perfectly in portrait mode but in "full-screen" go on the video frame but they don't work anymore.
• It is not possible to return in landscape mode even if I click on the other tabs. The only way is to close completely the app and reopen it.
• Since I've upgraded to the alpha version, the props "paused" doesn't work anymore.
• I've tried all the possible combination with "fullscreen, fullScreenOrientation" etc etc

Platform

ANDROID EXOPLAYER

Which player are you experiencing the problem on:

• Android ExoPlayer

Environment info

System:
OS: Windows 10 10.0.17763
CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
Memory: 19.79 GB / 31.81 GB
Binaries:
Node: 13.7.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.21.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.13.6 - C:\Program Files\nodejs\npm.CMD
SDKs:
Android SDK:
API Levels: 28, 29
Build Tools: 28.0.3, 29.0.2
System Images: android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom
IDEs:
Android Studio: Version 3.5.0.0 AI-191.8026.42.35.6010548
npmPackages:
react: 16.9.0 => 16.9.0
react-native: 0.61.5 => 0.61.5

Library version: 5.1.0-alpha2

Reproducible sample code

import React, { Component } from 'react'
import { Text, View, StyleSheet, ScrollView, Button } from 'react-native'
import Icon from 'react-native-vector-icons/FontAwesome';
import Video from 'react-native-video'

class Test extends Component {

static navigationOptions= {
tabBarIcon: ({tintColor, focused}) =>(

)
}
state = {
uri: {
video1: "",
video2: "",
video3: "",
video4: "https://irtdashreference-i.akamaihd.net/dash/live/901161/bfs/manifestARD.mpd"
},
selected: "https://irtdashreference-i.akamaihd.net/dash/live/901161/bfs/manifestARD.mpd"
}

  render() {
    //console.log("selected", this.state.selected)
    return  (
      <ScrollView >
        <View style={styles.videoContainer}>
          <Video source= {{uri : this.state.selected}}
            ref={(ref) => {
              this.player = ref
            }}
            onBuffer={this.onBuffer} onError={this.videoError}
            style={styles.backgroundVideo}
            controls = {true}
            fullscreen = {true}
            fullscreenOrientation = {"landscape"}
            //resizeMode = {"contain"}
            paused= {true}
            />
        </View>

                    
        <View style = {styles.buttonsContainer}>
          <Button 
            title= "Video 1"
            onPress = {()=> {this.setState({selected : this.state.uri.video1}, console.log(this.state.uri.video1))}} 
            style = {{flex: 1}} >
              <Text>Prova</Text>
            </Button>
          <Button 
            title = "Video 2" 
            onPress = {()=> {this.setState({selected : this.state.uri.video2})}} 
            style = {{flex: 1}} >
              
            </Button>
          <Button 
            title = "Video 3" 
            onPress = {()=> {this.setState({selected : this.state.uri.video3})}} 
            style = {{flex: 1}} >
              
            </Button>
            <Button 
                title = "Video 4" 
                onPress = {()=> {this.setState({selected : this.state.uri.video4})}} 
                style = {{flex: 1}} >
              
            </Button>
      </View>
    </ScrollView>
      

    )
  }

}

export default Test

const styles = StyleSheet.create({
backgroundVideo: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
},
videoContainer: {
marginLeft:'auto',
marginRight: 'auto',
width: 360,
height: 360 * 9 / 16,
padding: 15,
marginTop: 15,
marginBottom: 15
},
buttonsContainer: {
flexDirection: "row",
justifyContent: "space-between",
marginHorizontal: "20%"
},
buttonText: {
fontSize: 10,
textAlign: "center"
}
});

[giambafiume]

I've deleted the video links because they where pointing to an internal server.

[chrissnape]

I believe you have to add some styling for it to appear full screen after looking at this
#1730 (comment)

[IbrahimSulai]

@chrissnape @giambafiume- I will take a look at this code and provide a solution for your problem ASAP.

[giambafiume]

@chrissnape and @IbrahimSulai thank you so much for your help.

[hokasan]

I have the same problem. Im using react-native-router-flux, when I show a video without navigating through the router fullscreen works. Pause is broken for me too.

[IbrahimSulai]

@chrissnape @giambafiume @hokasan - Found the root cause for this issue. Will confirm and test thoroughly and raise separate PR for the same.

[giambafiume]

@chrissnape @giambafiume @hokasan - Found the root cause for this issue. Will confirm and test thoroughly and raise separate PR for the same.

I really appreciate your help. Thank you very much.

[IbrahimSulai]

@chrissnape @JerakRus @benoitdion @jsunwoo
Resolved the play and pause issue with the full-screen functionality. I have raised PR for the same.
#1916

Please review the PR.

[Zzzhuk]

Not working full screen on Samsung

[349989153]

Is that problem solved? Any workaround here ?

[giambafiume]

Is that problem solved? Any workaround here ?

@349989153 not yet. To have something similar to a full screen mode, I've used a screen only for the video component and I've set the style of the component to 100% width. In this way, putting the device in landscape the video takes all the space available.

Hope that this helps

[349989153]

@giambafiume Do you mean that once you click the 'expand' button on that video controls, it just jumps to a screen that renders only <Video /> element with full size?

The question is, how do you keep the playing time of small video and full screen video consistent ?

[giambafiume]

No no, I'm sorry. the video component has its own screen. I don't have the expand button. The video is always in full size.

[349989153]

No no, I'm sorry. the video component has its own screen. I don't have the expand button. The video is always in full size.

Thank you for your help anyway ^_^

[349989153]

@IbrahimSulai I updated react-native-video to 5.1.0-alpha6, and I believe that your hard work is included according to changelog.md.

However, the problem that @giambafiume described is still exist, any idea of that bug?

The existing problem I'm talking about is not really full screen, like screenshot shows, and controls is not visible in fullscreen mode in android.

[349989153]

@IbrahimSulai Ok, I started to get to know that what you trying to do to support full screen, is by changing the video container's position to absolute, and changing activity's orientation to SCREEN_ORIENTATION_LANDSCAPE.

However, this solution won't work if we put our Video in to a deeply nested View, or we put Video in to some scroll container like FlatList or ScrollView.

[mpereal]

Hi all,
Any solution for puting fullscreen a video that is initially in a FlatList on android ? Working perfectly with ios.
Thanks

[jonra1993]

Hello @giambafiume Do you know what I am doing wrong? I have configurated the component but I am not able to see full-screen button

      <Video                  
          source={{ uri: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" }}
          resizeMode="cover"
          repeat
          controls 
          fullscreen = {true}
          fullscreenOrientation = {"landscape"}        
          //onBuffer={this.onBuffer}                // Callback when remote video is buffering
          //onError={this.videoError}               // Callback when video cannot be loaded
          style={styles.backgroundVideo}
        />  

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. If you are having a similar problem, please open a new issue and reference this one instead of commenting on a stale or closed issue.