inline issues after toggling from full screen about react-native-af-video-player

[abbasfreestyle]

@assafb81,

I closed this issue assuming it was resolved with the code you used.

Standard video ratios are 16:9 which is why the video height is multiplied by 0.562. Videos with these ratios should never see black bars inline in theory. With the different videos I've used I've never had seen black bars until I use a video with a unique ratio.

It looks like you're trying to display the entire content of a video where the ratio is not 16:9, naturally you'll either see black bars or need to zoom to cover the player. You've applied a specific height and added marginHorizontal: 30 outside the scope of the video player and quoting from the readme:

Avoid adding alignItems: 'center' to the container, it can cause fullscreen mode to disappear :D

Perhaps you may want to re-consider your container styling.

However, if your video is 16:9 this could be an issue related to react-native-video. Maybe it might be worth looking at the issues in that module.

[abbasfreestyle]

Hi @assafb81 do you have images/videos + code to demonstrate your issue?

[b-asaf]

See this screenshot, when clicking play the video is actually take part of its container and not filling the entire video container -> there are black bar on top and at the bottom of the video:

the relevant code is:

<View style={isFullScreen
                ? [styles.fullScreen, { height }]
                : [styles.background, styles.inline, containerStyle ]}
>
    <Video
    style={isFullScreen ? [styles.fullScreen, { height }] : styles.inline}
            .....
    />
</View>

the relevant style classes are:

background: {
    backgroundColor: '#000',
    justifyContent: 'center',
    alignItems: 'center',
},
inline: {
    height: Win.width * INLINE_VIDEO_RATIO,
    alignSelf: 'stretch',
},
fullScreen: {
    ...StyleSheet.absoluteFillObject,
    zIndex: 3,
},
containerStyle: {
    marginLeft: 30,
    marginRight: 30,
    marginTop: '20%',
},

The height is taken from:

const Win = Dimensions.get('window');
const INLINE_VIDEO_RATIO = 0.5625;
constructor() {
   this.state: {
      height: Win.width * INLINE_VIDEO_RATIO,
   },
}

height field is changed in onRotate method:
const { width, height } = Dimensions.get('window');
in landscape its:

this.setState({
    height,
});

in portrait its:

this.setState({
    height: width * INLINE_VIDEO_RATIO,
});

UPDATE
when I change resizeMode from contain to cover the video fill the entire space, not seeing the black bars above and at the bottom but the video is "zoomed-in" and the edges are cut.

After deeper investigation I think I know what is the issue - the problem is the containerStyle class.
I want the video have space from the left and right - for some reason marginLeft and marginRight also affect the height of the video container children - video and controls.

videoContainer style class looks in the end when in inline:

alignItems: "center",
justifyContent: "center",
marginLeft: 30,
marginRight: 30,
marginTop: "20%",
height: 202.5,
alignSelf: "stretch"

[b-asaf]

@abbasfreestyle
why did you close this.
I added the code as you can see above and also image.
I will refine the issue:

when the videoContainer class contain the following:

marginLeft: 30,
marginRight: 30,

I can see the black bars.
I am adding the margin because I want to place the video element when inline in the center of the screen and not spread on the entire width of the screen.
When I remove the marginLeft and marginRight the issue is solved but the video is not in the center of the screen and its spread on the entire width of the screen.