Fix orientation race condition (#841)

Co-authored-by: Alex Kim <alexkim@Alexs-MacBook-Pro.local>

app/(auth)/player/_layout.tsx

@@ -1,33 +1,8 @@
-import * as ScreenOrientation from "@/packages/expo-screen-orientation";
-import { useSettings } from "@/utils/atoms/settings";
 import { Stack } from "expo-router";
-import React, { useLayoutEffect } from "react";
-import { Platform } from "react-native";
+import React from "react";
 import { SystemBars } from "react-native-edge-to-edge";
 
 export default function Layout() {
-  const [settings] = useSettings();
-
-  useLayoutEffect(() => {
-    if (Platform.isTV) return;
-
-    if (!settings.followDeviceOrientation && settings.defaultVideoOrientation) {
-      ScreenOrientation.lockAsync(settings.defaultVideoOrientation);
-    }
-
-    return () => {
-      if (Platform.isTV) return;
-
-      if (settings.followDeviceOrientation === true) {
-        ScreenOrientation.unlockAsync();
-      } else {
-        ScreenOrientation.lockAsync(
-          ScreenOrientation.OrientationLock.PORTRAIT_UP,
-        );
-      }
-    };
-  });
-
   return (
     <>
       <SystemBars hidden />

app/_layout.tsx

@@ -414,21 +414,32 @@ function Layout() {
     }, []);
 
     useEffect(() => {
-      if (Platform.isTV) return;
-      if (segments.includes("direct-player" as never)) {
+      if (Platform.isTV) {
+        return;
+      }
+
+      if (segments.includes("direct-player" as never)) {
+        if (
+          !settings.followDeviceOrientation &&
+          settings.defaultVideoOrientation
+        ) {
+          ScreenOrientation.lockAsync(settings.defaultVideoOrientation);
+        }
         return;
       }
 
-      // If the user has auto rotate enabled, unlock the orientation
       if (settings.followDeviceOrientation === true) {
         ScreenOrientation.unlockAsync();
       } else {
-        // If the user has auto rotate disabled, lock the orientation to portrait
         ScreenOrientation.lockAsync(
           ScreenOrientation.OrientationLock.PORTRAIT_UP,
         );
       }
-    }, [settings.followDeviceOrientation, segments]);
+    }, [
+      settings.followDeviceOrientation,
+      settings.defaultVideoOrientation,
+      segments,
+    ]);
 
     useEffect(() => {
       const subscription = AppState.addEventListener(

components/video-player/controls/Controls.tsx

@@ -522,9 +522,6 @@ export const Controls: FC<Props> = ({
 
   const onClose = async () => {
     lightHapticFeedback();
-    await ScreenOrientation.lockAsync(
-      ScreenOrientation.OrientationLock.PORTRAIT_UP,
-    );
     router.back();
   };