I want to switch the player to landscape mode on click of the full-screen button on the player gui. I am using expo so i used expo orientation, I am able to switch to the landscape mode by calling a function on onfullscreenchange prop, but after exiting fullscreen mode the app is locked in landscape mode. How do i fix it?
my code:
VideoPlayer.js
import React from "react";
import { View, Dimensions } from "react-native";
import YoutubePlayer from "react-native-youtube-iframe";
import * as ScreenOrientation from "expo-screen-orientation";
const VideoPlayer = () => {
function setOrientation() {
if (Dimensions.get("window").height > Dimensions.get("window").width) {
//Device is in portrait mode, rotate to landscape mode.
ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);
} else {
//Device is in landscape mode, rotate to portrait mode.
ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT);
}
}
return (
<View
style={{
width: "100%",
height: 220,
}}
>
<YoutubePlayer
height={300}
play={false}
videoId={"Dv7gLpW91DM"}
onFullScreenChange={setOrientation}
/>
</View>
);
};
export default VideoPlayer;
CodePudding user response:
You can use the boolean returned from onFullScreenChange to determine if the player is in fullscreen or not and from there, set the correct orientation, I'm unable to test now but it should be something like that
onFullScreenChange={isFullscreen => {
if(isFullscreen) { setOrientationToPortrait() }
else { setOrientationToLandscape() }
}