From 63965c9e64659cbc4ea2e3bfdbcf8434196651ec Mon Sep 17 00:00:00 2001
From: Fredrik Burmester <fredrik.burmester@gmail.com>
Date: Fri, 11 Oct 2024 16:41:44 +0200
Subject: [PATCH 1/2] fix: video rotation bug

---
 app/(auth)/play-video.tsx | 27 +++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/app/(auth)/play-video.tsx b/app/(auth)/play-video.tsx
index 59ef2733..098674b9 100644
--- a/app/(auth)/play-video.tsx
+++ b/app/(auth)/play-video.tsx
@@ -17,7 +17,13 @@ import { getPlaystateApi } from "@jellyfin/sdk/lib/utils/api";
 import * as Haptics from "expo-haptics";
 import { useFocusEffect } from "expo-router";
 import { useAtomValue } from "jotai";
-import React, { useCallback, useMemo, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { Dimensions, Pressable, StatusBar, View } from "react-native";
 import { useSharedValue } from "react-native-reanimated";
 import Video, {
@@ -35,7 +41,24 @@ export default function page() {
   const videoSource = useVideoSource(playSettings, api, poster, playUrl);
   const firstTime = useRef(true);
 
-  const screenDimensions = Dimensions.get("screen");
+  const [screenDimensions, setScreenDimensions] = useState(
+    Dimensions.get("screen")
+  );
+
+  useEffect(() => {
+    const updateDimensions = () => {
+      setScreenDimensions(Dimensions.get("screen"));
+    };
+
+    const dimensionsListener = Dimensions.addEventListener(
+      "change",
+      updateDimensions
+    );
+
+    return () => {
+      dimensionsListener.remove();
+    };
+  }, []);
 
   const [isPlaybackStopped, setIsPlaybackStopped] = useState(false);
   const [showControls, setShowControls] = useState(true);

From eeaa0275791164620de9b9ad55a5ad0c27c30e44 Mon Sep 17 00:00:00 2001
From: Fredrik Burmester <fredrik.burmester@gmail.com>
Date: Fri, 11 Oct 2024 19:03:15 +0200
Subject: [PATCH 2/2] fix: turn into hook

---
 app/(auth)/play-video.tsx    | 21 ++-------------------
 hooks/useScreenDimensions.ts | 27 +++++++++++++++++++++++++++
 2 files changed, 29 insertions(+), 19 deletions(-)
 create mode 100644 hooks/useScreenDimensions.ts

diff --git a/app/(auth)/play-video.tsx b/app/(auth)/play-video.tsx
index 098674b9..cce91dcc 100644
--- a/app/(auth)/play-video.tsx
+++ b/app/(auth)/play-video.tsx
@@ -2,6 +2,7 @@ import { Controls } from "@/components/video-player/Controls";
 import { useAndroidNavigationBar } from "@/hooks/useAndroidNavigationBar";
 import { useOrientation } from "@/hooks/useOrientation";
 import { useOrientationSettings } from "@/hooks/useOrientationSettings";
+import useScreenDimensions from "@/hooks/useScreenDimensions";
 import { useWebSocket } from "@/hooks/useWebsockets";
 import { apiAtom } from "@/providers/JellyfinProvider";
 import {
@@ -40,25 +41,7 @@ export default function page() {
   const poster = usePoster(playSettings, api);
   const videoSource = useVideoSource(playSettings, api, poster, playUrl);
   const firstTime = useRef(true);
-
-  const [screenDimensions, setScreenDimensions] = useState(
-    Dimensions.get("screen")
-  );
-
-  useEffect(() => {
-    const updateDimensions = () => {
-      setScreenDimensions(Dimensions.get("screen"));
-    };
-
-    const dimensionsListener = Dimensions.addEventListener(
-      "change",
-      updateDimensions
-    );
-
-    return () => {
-      dimensionsListener.remove();
-    };
-  }, []);
+  const screenDimensions = useScreenDimensions();
 
   const [isPlaybackStopped, setIsPlaybackStopped] = useState(false);
   const [showControls, setShowControls] = useState(true);
diff --git a/hooks/useScreenDimensions.ts b/hooks/useScreenDimensions.ts
new file mode 100644
index 00000000..22fa33ff
--- /dev/null
+++ b/hooks/useScreenDimensions.ts
@@ -0,0 +1,27 @@
+import { useState, useEffect } from "react";
+import { Dimensions, ScaledSize } from "react-native";
+
+const useScreenDimensions = (): ScaledSize => {
+  const [screenDimensions, setScreenDimensions] = useState(
+    Dimensions.get("screen")
+  );
+
+  useEffect(() => {
+    const updateDimensions = () => {
+      setScreenDimensions(Dimensions.get("screen"));
+    };
+
+    const dimensionsListener = Dimensions.addEventListener(
+      "change",
+      updateDimensions
+    );
+
+    return () => {
+      dimensionsListener.remove();
+    };
+  }, []);
+
+  return screenDimensions;
+};
+
+export default useScreenDimensions;