From ed42371353520574d0bbd884df2168537e114daf Mon Sep 17 00:00:00 2001 From: ryan0204 Date: Mon, 6 Jan 2025 20:27:34 +0800 Subject: [PATCH 1/5] Change ScreenOrientation to landscape right by default --- hooks/useOrientationSettings.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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); } From c86a8438e56bd040b0f33aebe2e83f29244ac9da Mon Sep 17 00:00:00 2001 From: ryan0204 Date: Mon, 6 Jan 2025 23:15:00 +0800 Subject: [PATCH 2/5] Bring back toggleSafeArea button for all videos --- app/(auth)/player/direct-player.tsx | 5 ++++ components/video-player/controls/Controls.tsx | 24 +++++++++---------- 2 files changed, 17 insertions(+), 12 deletions(-) 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, }} > = ({ )} - {mediaSource?.TranscodingUrl && ( - - - - )} + {/* {mediaSource?.TranscodingUrl && ( */} + + + + {/* )} */} { lightHapticFeedback(); From cfe39d504c70d57017f4b481b73840def720a2e6 Mon Sep 17 00:00:00 2001 From: ryan0204 Date: Tue, 7 Jan 2025 14:13:22 +0800 Subject: [PATCH 3/5] Rotate ScreenOrientation back on exit player --- components/video-player/controls/Controls.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/components/video-player/controls/Controls.tsx b/components/video-player/controls/Controls.tsx index cef265ec..7ba3426b 100644 --- a/components/video-player/controls/Controls.tsx +++ b/components/video-player/controls/Controls.tsx @@ -56,6 +56,7 @@ import DropdownViewTranscoding from "./dropdown/DropdownViewTranscoding"; import { EpisodeList } from "./EpisodeList"; import NextEpisodeCountDownButton from "./NextEpisodeCountDownButton"; import SkipButton from "./SkipButton"; +import * as ScreenOrientation from "expo-screen-orientation"; interface Props { item: BaseItemDto; @@ -587,6 +588,9 @@ export const Controls: React.FC = ({ { 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" From 4e80f58823db692786e9314acf8b393d4004557a Mon Sep 17 00:00:00 2001 From: Fredrik Burmester Date: Tue, 7 Jan 2025 10:27:30 +0100 Subject: [PATCH 4/5] fix: backdrop not filling screen --- components/video-player/controls/Controls.tsx | 33 ++++++++++++------- 1 file changed, 21 insertions(+), 12 deletions(-) diff --git a/components/video-player/controls/Controls.tsx b/components/video-player/controls/Controls.tsx index 7ba3426b..894d07c4 100644 --- a/components/video-player/controls/Controls.tsx +++ b/components/video-player/controls/Controls.tsx @@ -1,8 +1,8 @@ -import React, { useCallback, useEffect, useRef, useState } from "react"; import { Text } from "@/components/common/Text"; import { Loader } from "@/components/Loader"; import { useAdjacentItems } from "@/hooks/useAdjacentEpisodes"; import { useCreditSkipper } from "@/hooks/useCreditSkipper"; +import { useHaptic } from "@/hooks/useHaptic"; import { useIntroSkipper } from "@/hooks/useIntroSkipper"; import { useTrickplay } from "@/hooks/useTrickplay"; import { @@ -29,12 +29,19 @@ import { BaseItemDto, MediaSourceInfo, } from "@jellyfin/sdk/lib/generated-client"; -import { useHaptic } from "@/hooks/useHaptic"; import { Image } from "expo-image"; import { useLocalSearchParams, useRouter } from "expo-router"; +import * as ScreenOrientation from "expo-screen-orientation"; import { useAtom } from "jotai"; import { debounce } from "lodash"; -import { Dimensions, Pressable, TouchableOpacity, View } from "react-native"; +import React, { useCallback, useEffect, useRef, useState } from "react"; +import { + Dimensions, + Pressable, + TouchableOpacity, + useWindowDimensions, + View, +} from "react-native"; import { Slider } from "react-native-awesome-slider"; import { runOnJS, @@ -42,10 +49,7 @@ import { useAnimatedReaction, useSharedValue, } from "react-native-reanimated"; -import { - SafeAreaView, - useSafeAreaInsets, -} from "react-native-safe-area-context"; +import { useSafeAreaInsets } from "react-native-safe-area-context"; import { VideoRef } from "react-native-video"; import AudioSlider from "./AudioSlider"; import BrightnessSlider from "./BrightnessSlider"; @@ -56,7 +60,7 @@ import DropdownViewTranscoding from "./dropdown/DropdownViewTranscoding"; import { EpisodeList } from "./EpisodeList"; import NextEpisodeCountDownButton from "./NextEpisodeCountDownButton"; import SkipButton from "./SkipButton"; -import * as ScreenOrientation from "expo-screen-orientation"; +import { useOrientation } from "@/hooks/useOrientation"; interface Props { item: BaseItemDto; @@ -119,6 +123,7 @@ export const Controls: React.FC = ({ const insets = useSafeAreaInsets(); const [api] = useAtom(apiAtom); + const { height: screenHeight, width: screenWidth } = useWindowDimensions(); const { previousItem, nextItem } = useAdjacentItems({ item }); const { trickPlayUrl, @@ -506,9 +511,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, }} > @@ -520,8 +529,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, }, ]} From c63cea891d2957cf47aebf4b757cf3881450984f Mon Sep 17 00:00:00 2001 From: Fredrik Burmester Date: Tue, 7 Jan 2025 10:27:56 +0100 Subject: [PATCH 5/5] chore: remove imports --- components/video-player/controls/Controls.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/components/video-player/controls/Controls.tsx b/components/video-player/controls/Controls.tsx index 894d07c4..1f436f7f 100644 --- a/components/video-player/controls/Controls.tsx +++ b/components/video-player/controls/Controls.tsx @@ -36,7 +36,6 @@ import { useAtom } from "jotai"; import { debounce } from "lodash"; import React, { useCallback, useEffect, useRef, useState } from "react"; import { - Dimensions, Pressable, TouchableOpacity, useWindowDimensions, @@ -60,7 +59,6 @@ import DropdownViewTranscoding from "./dropdown/DropdownViewTranscoding"; import { EpisodeList } from "./EpisodeList"; import NextEpisodeCountDownButton from "./NextEpisodeCountDownButton"; import SkipButton from "./SkipButton"; -import { useOrientation } from "@/hooks/useOrientation"; interface Props { item: BaseItemDto;