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) {
+	const lockOrientation = async () => {
-      this.videoPlayer.current.presentFullscreenPlayer();
+	  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 = () => {
+//   onVideoError = () => {  // probably useful later
-    console.log("Video playback error");
+//     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;

pnpm-lock.yaml

@@ -55,6 +55,9 @@ importers:
       expo-router:
         specifier: ~3.4.6
         version: 3.4.6(expo-constants@15.4.5)(expo-linking@6.2.2)(expo-modules-autolinking@1.10.2)(expo-status-bar@1.11.1)(expo@50.0.5)(react-dom@18.2.0)(react-native-reanimated@3.6.2)(react-native-safe-area-context@4.8.2)(react-native-screens@3.29.0)(react-native@0.73.2)(react@18.2.0)
+      expo-screen-orientation:
+        specifier: ~6.4.1
+        version: 6.4.1(expo@50.0.5)
       expo-splash-screen:
         specifier: ~0.26.4
         version: 0.26.4(expo-modules-autolinking@1.10.2)(expo@50.0.5)
@@ -5378,6 +5381,14 @@ packages:
       - supports-color
     dev: false
 
+  /expo-screen-orientation@6.4.1(expo@50.0.5):
+    resolution: {integrity: sha512-VM0C9ORNL1aT6Dr2OUeryzV519n0FjtXI2m+HlijOMi1QT2bPg4tBkCd7HLgywU4dZ1Esa46ewUudmk+fOqmMQ==}
+    peerDependencies:
+      expo: '*'
+    dependencies:
+      expo: 50.0.5(@babel/core@7.23.9)(@react-native/babel-preset@0.73.20)
+    dev: false
+
   /expo-splash-screen@0.26.4(expo-modules-autolinking@1.10.2)(expo@50.0.5):
     resolution: {integrity: sha512-2DwofTQ0FFQCsvDysm/msENsbyNsJiAJwK3qK/oXeizECAPqD7bK19J4z9kuEbr7ORPX9MLnTQYKl6kmX3keUg==}
     peerDependencies: