Merge pull request #177 from fredrikburmester/fix/video-rotation-bug

fix: video rotation bug by updating screen dimensions dynamically using an event listener

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 {
@@ -17,7 +18,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, {
@@ -34,8 +41,7 @@ export default function page() {
   const poster = usePoster(playSettings, api);
   const videoSource = useVideoSource(playSettings, api, poster, playUrl);
   const firstTime = useRef(true);
-
-  const screenDimensions = Dimensions.get("screen");
+  const screenDimensions = useScreenDimensions();
 
   const [isPlaybackStopped, setIsPlaybackStopped] = useState(false);
   const [showControls, setShowControls] = useState(true);

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;