diff --git a/apps/expo/app.config.ts b/apps/expo/app.config.ts index 223d040..9fd8780 100644 --- a/apps/expo/app.config.ts +++ b/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; diff --git a/apps/expo/package.json b/apps/expo/package.json index 61f1a05..b5f3093 100644 --- a/apps/expo/package.json +++ b/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", diff --git a/apps/expo/src/app/video-player.tsx b/apps/expo/src/app/video-player.tsx index d92ccd0..d6343d6 100644 --- a/apps/expo/src/app/video-player.tsx +++ b/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 { 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 { } 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 { this.setState({ isLoading: false }); }; - onVideoError = () => { - console.log("Video playback error"); - }; +// onVideoError = () => { // probably useful later +// console.log("Video playback error"); +// }; render() { return ( - + + ); } } @@ -76,7 +95,8 @@ const styles = StyleSheet.create({ left: 0, bottom: 0, right: 0, - } + }, + }); export default VideoPlayer; \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 59e37b0..9775945 100644 --- a/pnpm-lock.yaml +++ b/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: