feat: video player orientation

apps/expo/app.config.ts

@@ -5,7 +5,6 @@ const defineConfig = (): ExpoConfig => ({
   slug: "mw-mobile",
   scheme: "dev.movieweb.app",
   version: "0.1.0",
-  orientation: "portrait",
   icon: "./assets/images/icon.png",
   userInterfaceStyle: "automatic",
   splash: {
@@ -20,6 +19,7 @@ const defineConfig = (): ExpoConfig => ({
   ios: {
     bundleIdentifier: "dev.movieweb.app",
     supportsTablet: true,
+	requireFullScreen: true,
   },
   android: {
     package: "dev.movieweb.app",
@@ -41,7 +41,13 @@ const defineConfig = (): ExpoConfig => ({
     tsconfigPaths: true,
     typedRoutes: true,
   },
-  plugins: ["expo-router"],
+  plugins: ["expo-router", [
+	"expo-screen-orientation",
+	{
+	  initialOrientation: "DEFAULT"
+	}
+  ]
+],
 });
 
 export default defineConfig;

apps/expo/package.json

@@ -26,6 +26,7 @@
     "expo-constants": "~15.4.5",
     "expo-linking": "~6.2.2",
     "expo-router": "~3.4.6",
+    "expo-screen-orientation": "~6.4.1",
     "expo-splash-screen": "~0.26.4",
     "expo-status-bar": "~1.11.1",
     "expo-web-browser": "^12.8.2",

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;