From 528b4ad7acdaf5d66dd45e4436cab7b0208797fc Mon Sep 17 00:00:00 2001
From: Fredrik Burmester <fredrik.burmester@gmail.com>
Date: Sun, 9 Feb 2025 11:45:32 +0100
Subject: [PATCH] fix: orientation in video player and app i general

---
 app/(auth)/player/_layout.tsx            | 22 ++++++++++++++++++++-
 app/(auth)/player/direct-player.tsx      | 16 +++++++--------
 app/(auth)/player/transcoding-player.tsx |  5 ++---
 app/_layout.tsx                          | 25 ++++++++++++++----------
 4 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/app/(auth)/player/_layout.tsx b/app/(auth)/player/_layout.tsx
index 4b0ae1c1..1d6c7188 100644
--- a/app/(auth)/player/_layout.tsx
+++ b/app/(auth)/player/_layout.tsx
@@ -1,8 +1,28 @@
 import { Stack } from "expo-router";
-import React from "react";
+import React, { useEffect } from "react";
 import { SystemBars } from "react-native-edge-to-edge";
+import * as ScreenOrientation from "@/packages/expo-screen-orientation";
+import { useSettings } from "@/utils/atoms/settings";
 
 export default function Layout() {
+  const [settings] = useSettings();
+
+  useEffect(() => {
+    if (settings.defaultVideoOrientation) {
+      ScreenOrientation.lockAsync(settings.defaultVideoOrientation);
+    }
+
+    return () => {
+      if (settings.autoRotate === true) {
+        ScreenOrientation.unlockAsync();
+      } else {
+        ScreenOrientation.lockAsync(
+          ScreenOrientation.OrientationLock.PORTRAIT_UP
+        );
+      }
+    };
+  }, [settings]);
+
   return (
     <>
       <SystemBars hidden />
diff --git a/app/(auth)/player/direct-player.tsx b/app/(auth)/player/direct-player.tsx
index 4a85bcaa..5a2e2587 100644
--- a/app/(auth)/player/direct-player.tsx
+++ b/app/(auth)/player/direct-player.tsx
@@ -55,6 +55,7 @@ import { useTranslation } from "react-i18next";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 export default function page() {
+  console.log("Direct Player");
   const videoRef = useRef<VlcPlayerViewRef>(null);
   const user = useAtomValue(userAtom);
   const api = useAtomValue(apiAtom);
@@ -72,7 +73,7 @@ export default function page() {
   const cacheProgress = useSharedValue(0);
   let getDownloadedItem = null;
   if (!Platform.isTV) {
-    getDownloadedItem  = downloadProvider.useDownload();
+    getDownloadedItem = downloadProvider.useDownload();
   }
 
   const revalidateProgressCache = useInvalidatePlaybackProgressCache();
@@ -303,9 +304,6 @@ export default function page() {
     [item?.Id, isPlaying, api, isPlaybackStopped, audioIndex, subtitleIndex]
   );
 
-  useOrientation();
-  useOrientationSettings();
-
   useWebSocket({
     isPlaying: isPlaying,
     togglePlay: togglePlay,
@@ -386,16 +384,18 @@ export default function page() {
 
   const allSubs =
     stream?.mediaSource.MediaStreams?.filter(
-      (sub: { Type: string; }) => sub.Type === "Subtitle"
+      (sub: { Type: string }) => sub.Type === "Subtitle"
     ) || [];
   const chosenSubtitleTrack = allSubs.find(
-    (sub: { Index: number; }) => sub.Index === subtitleIndex
+    (sub: { Index: number }) => sub.Index === subtitleIndex
   );
   const allAudio =
     stream?.mediaSource.MediaStreams?.filter(
-      (audio: { Type: string; }) => audio.Type === "Audio"
+      (audio: { Type: string }) => audio.Type === "Audio"
     ) || [];
-  const chosenAudioTrack = allAudio.find((audio: { Index: number | undefined; }) => audio.Index === audioIndex);
+  const chosenAudioTrack = allAudio.find(
+    (audio: { Index: number | undefined }) => audio.Index === audioIndex
+  );
 
   // Direct playback CASE
   if (!bitrateValue) {
diff --git a/app/(auth)/player/transcoding-player.tsx b/app/(auth)/player/transcoding-player.tsx
index 38a2b2e5..b1768b36 100644
--- a/app/(auth)/player/transcoding-player.tsx
+++ b/app/(auth)/player/transcoding-player.tsx
@@ -42,6 +42,8 @@ import { SubtitleHelper } from "@/utils/SubtitleHelper";
 import { useTranslation } from "react-i18next";
 
 const Player = () => {
+  console.log("Transcoding Player");
+
   const api = useAtomValue(apiAtom);
   const user = useAtomValue(userAtom);
   const [settings] = useSettings();
@@ -295,9 +297,6 @@ const Player = () => {
     ]
   );
 
-  useOrientation();
-  useOrientationSettings();
-
   useWebSocket({
     isPlaying: isPlaying,
     togglePlay: togglePlay,
diff --git a/app/_layout.tsx b/app/_layout.tsx
index e360df9c..55652930 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -71,15 +71,17 @@ function useNotificationObserver() {
       }
     }
 
-    Notifications.getLastNotificationResponseAsync().then((response: { notification: any; }) => {
-      if (!isMounted || !response?.notification) {
-        return;
+    Notifications.getLastNotificationResponseAsync().then(
+      (response: { notification: any }) => {
+        if (!isMounted || !response?.notification) {
+          return;
+        }
+        redirect(response?.notification);
       }
-      redirect(response?.notification);
-    });
+    );
 
     const subscription = Notifications.addNotificationResponseReceivedListener(
-      (response: { notification: any; }) => {
+      (response: { notification: any }) => {
         redirect(response.notification);
       }
     );
@@ -127,7 +129,7 @@ if (!Platform.isTV) {
         const downloadUrl = url + "download/" + job.id;
         const tasks = await BackGroundDownloader.checkForExistingDownloads();
 
-        if (tasks.find((task: { id: string; }) => task.id === job.id)) {
+        if (tasks.find((task: { id: string }) => task.id === job.id)) {
           console.log("TaskManager ~ Download already in progress: ", job.id);
           continue;
         }
@@ -269,12 +271,15 @@ function Layout() {
     }, []);
 
     useEffect(() => {
-      if (settings?.autoRotate === true)
-        ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.DEFAULT);
-      else
+      // If the user has auto rotate enabled, unlock the orientation
+      if (settings.autoRotate === true) {
+        ScreenOrientation.unlockAsync();
+      } else {
+        // If the user has auto rotate disabled, lock the orientation to portrait
         ScreenOrientation.lockAsync(
           ScreenOrientation.OrientationLock.PORTRAIT_UP
         );
+      }
     }, [settings]);
 
     useEffect(() => {