feat: video player orientation

apps/expo/src/app/video-player.tsx

@@ -1,7 +1,9 @@
 import React, { Component } from 'react';
-import { StyleSheet, View, ActivityIndicator } from 'react-native';
+import { StyleSheet, ActivityIndicator } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import type { VideoRef } from 'react-native-video';
 import Video from 'react-native-video';
+import * as ScreenOrientation from 'expo-screen-orientation';
 
 interface VideoPlayerState {
   videoUrl: string;
@@ -16,7 +18,7 @@ class VideoPlayer extends Component<object, VideoPlayerState> {
   constructor(props: object) {
     super(props);
     this.state = {
-      videoUrl: 'your_video_url',
+      videoUrl: '',
       fullscreen: true,
       isLoading: true,
       paused: false
@@ -25,9 +27,25 @@ class VideoPlayer extends Component<object, VideoPlayerState> {
   }
 
   componentDidMount() {
-    if (this.videoPlayer.current) {
-      this.videoPlayer.current.presentFullscreenPlayer();
-    }
+	const lockOrientation = async () => {
+	  await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);
+	};
+  
+	if (this.videoPlayer.current) {
+	  this.videoPlayer.current.presentFullscreenPlayer();
+	  void lockOrientation();
+	}
+  }
+
+  componentWillUnmount() {
+	const unlockOrientation = async () => {
+	  await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP);
+	}
+
+	if (this.videoPlayer.current) {
+	  this.videoPlayer.current.dismissFullscreenPlayer();
+	}
+	void unlockOrientation();
   }
 
   onVideoLoadStart = () => {
@@ -38,27 +56,28 @@ class VideoPlayer extends Component<object, VideoPlayerState> {
     this.setState({ isLoading: false });
   };
 
-  onVideoError = () => {
-    console.log("Video playback error");
-  };
+//   onVideoError = () => {  // probably useful later
+//     console.log("Video playback error");
+//   };
 
   render() {
     return (
-      <View style={styles.container}>
+      <SafeAreaView style={styles.container}>
         <Video
           ref={this.videoPlayer}
           source={{ uri: this.state.videoUrl }}
           style={styles.fullScreen}
           fullscreen={this.state.fullscreen}
           paused={this.state.paused}
+		  controls={true}
           onLoadStart={this.onVideoLoadStart}
           onReadyForDisplay={this.onReadyForDisplay}
-          onError={this.onVideoError}
+          // onError={this.onVideoError}
         />
         {this.state.isLoading && (
           <ActivityIndicator size="large" color="#0000ff" />
         )}
-      </View>
+      </SafeAreaView>
     );
   }
 }
@@ -76,7 +95,8 @@ const styles = StyleSheet.create({
     left: 0,
     bottom: 0,
     right: 0,
-  }
+  },
+    
 });
 
 export default VideoPlayer;