diff --git a/app/(auth)/play-video.tsx b/app/(auth)/play-video.tsx index 59ef2733..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 { @@ -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); 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;