diff --git a/app/(auth)/player/direct-player.tsx b/app/(auth)/player/direct-player.tsx index 44b0eb34..86851db6 100644 --- a/app/(auth)/player/direct-player.tsx +++ b/app/(auth)/player/direct-player.tsx @@ -48,6 +48,7 @@ import { import { useSharedValue } from "react-native-reanimated"; import settings from "../(tabs)/(home)/settings"; import { useSettings } from "@/utils/atoms/settings"; +import { useSafeAreaInsets } from "react-native-safe-area-context"; export default function page() { const videoRef = useRef(null); @@ -413,6 +414,8 @@ export default function page() { } } + const insets = useSafeAreaInsets(); + if (!item || isLoadingItem || isLoadingStreamUrl || !stream) return ( @@ -437,6 +440,8 @@ export default function page() { position: "relative", flexDirection: "column", justifyContent: "center", + paddingLeft: ignoreSafeAreas ? 0 : insets.left, + paddingRight: ignoreSafeAreas ? 0 : insets.right, }} > = ({ const insets = useSafeAreaInsets(); const [api] = useAtom(apiAtom); + const { height: screenHeight, width: screenWidth } = useWindowDimensions(); const { previousItem, nextItem } = useAdjacentItems({ item }); const { trickPlayUrl, @@ -505,9 +509,13 @@ export const Controls: React.FC = ({ }} style={{ position: "absolute", - width: Dimensions.get("window").width, - height: Dimensions.get("window").height, + width: screenWidth, + height: screenHeight, backgroundColor: "black", + left: 0, + right: 0, + top: 0, + bottom: 0, opacity: showControls ? 0.5 : 0, }} > @@ -519,8 +527,8 @@ export const Controls: React.FC = ({ top: settings?.safeAreaInControlsEnabled ? insets.top : 0, right: settings?.safeAreaInControlsEnabled ? insets.right : 0, width: settings?.safeAreaInControlsEnabled - ? Dimensions.get("window").width - insets.left - insets.right - : Dimensions.get("window").width, + ? screenWidth - insets.left - insets.right + : screenWidth, opacity: showControls ? 1 : 0, }, ]} @@ -572,21 +580,24 @@ export const Controls: React.FC = ({ )} - {mediaSource?.TranscodingUrl && ( - - - - )} + {/* {mediaSource?.TranscodingUrl && ( */} + + + + {/* )} */} { lightHapticFeedback(); + await ScreenOrientation.lockAsync( + ScreenOrientation.OrientationLock.PORTRAIT_UP + ); router.back(); }} className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2" diff --git a/hooks/useOrientationSettings.ts b/hooks/useOrientationSettings.ts index 85b8a113..907e9bf2 100644 --- a/hooks/useOrientationSettings.ts +++ b/hooks/useOrientationSettings.ts @@ -7,7 +7,9 @@ export const useOrientationSettings = () => { useEffect(() => { if (settings?.autoRotate) { - // Don't need to do anything + ScreenOrientation.lockAsync( + ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT + ); } else if (settings?.defaultVideoOrientation) { ScreenOrientation.lockAsync(settings.defaultVideoOrientation); }