diff --git a/components/jellyseerr/discover/TVDiscoverSlide.tsx b/components/jellyseerr/discover/TVDiscoverSlide.tsx index 5f98fcf5..65f7e883 100644 --- a/components/jellyseerr/discover/TVDiscoverSlide.tsx +++ b/components/jellyseerr/discover/TVDiscoverSlide.tsx @@ -7,6 +7,7 @@ import { useTranslation } from "react-i18next"; import { Animated, FlatList, Pressable, View } from "react-native"; import { Text } from "@/components/common/Text"; import { useTVFocusAnimation } from "@/components/tv/hooks/useTVFocusAnimation"; +import { useScaledTVSizes } from "@/constants/TVSizes"; import { useScaledTVTypography } from "@/constants/TVTypography"; import useRouter from "@/hooks/useAppRouter"; import { @@ -166,6 +167,7 @@ export const TVDiscoverSlide: React.FC = ({ isFirstSlide = false, }) => { const typography = useScaledTVTypography(); + const sizes = useScaledTVSizes(); const { t } = useTranslation(); const { jellyseerrApi, isJellyseerrMovieOrTvResult } = useJellyseerr(); @@ -238,7 +240,7 @@ export const TVDiscoverSlide: React.FC = ({ fontWeight: "bold", color: "#FFFFFF", marginBottom: 16, - marginLeft: SCALE_PADDING, + marginLeft: sizes.padding.horizontal, }} > {slideTitle} @@ -249,7 +251,7 @@ export const TVDiscoverSlide: React.FC = ({ keyExtractor={(item) => item.id.toString()} showsHorizontalScrollIndicator={false} contentContainerStyle={{ - paddingHorizontal: SCALE_PADDING, + paddingHorizontal: sizes.padding.horizontal, paddingVertical: SCALE_PADDING, gap: 20, }} diff --git a/components/search/TVJellyseerrSearchResults.tsx b/components/search/TVJellyseerrSearchResults.tsx index 699c5040..f811479b 100644 --- a/components/search/TVJellyseerrSearchResults.tsx +++ b/components/search/TVJellyseerrSearchResults.tsx @@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next"; import { Animated, FlatList, Pressable, View } from "react-native"; import { Text } from "@/components/common/Text"; import { useTVFocusAnimation } from "@/components/tv/hooks/useTVFocusAnimation"; +import { useScaledTVSizes } from "@/constants/TVSizes"; import { useScaledTVTypography } from "@/constants/TVTypography"; import { useJellyseerr } from "@/hooks/useJellyseerr"; import { MediaStatus } from "@/utils/jellyseerr/server/constants/media"; @@ -233,6 +234,7 @@ const TVJellyseerrMovieSection: React.FC = ({ onItemPress, }) => { const typography = useScaledTVTypography(); + const sizes = useScaledTVSizes(); if (!items || items.length === 0) return null; return ( @@ -243,7 +245,7 @@ const TVJellyseerrMovieSection: React.FC = ({ fontWeight: "bold", color: "#FFFFFF", marginBottom: 16, - marginLeft: SCALE_PADDING, + marginLeft: sizes.padding.horizontal, }} > {title} @@ -254,7 +256,7 @@ const TVJellyseerrMovieSection: React.FC = ({ keyExtractor={(item) => item.id.toString()} showsHorizontalScrollIndicator={false} contentContainerStyle={{ - paddingHorizontal: SCALE_PADDING, + paddingHorizontal: sizes.padding.horizontal, paddingVertical: SCALE_PADDING, gap: 20, }} @@ -285,6 +287,7 @@ const TVJellyseerrTvSection: React.FC = ({ onItemPress, }) => { const typography = useScaledTVTypography(); + const sizes = useScaledTVSizes(); if (!items || items.length === 0) return null; return ( @@ -295,7 +298,7 @@ const TVJellyseerrTvSection: React.FC = ({ fontWeight: "bold", color: "#FFFFFF", marginBottom: 16, - marginLeft: SCALE_PADDING, + marginLeft: sizes.padding.horizontal, }} > {title} @@ -306,7 +309,7 @@ const TVJellyseerrTvSection: React.FC = ({ keyExtractor={(item) => item.id.toString()} showsHorizontalScrollIndicator={false} contentContainerStyle={{ - paddingHorizontal: SCALE_PADDING, + paddingHorizontal: sizes.padding.horizontal, paddingVertical: SCALE_PADDING, gap: 20, }} @@ -337,6 +340,7 @@ const TVJellyseerrPersonSection: React.FC = ({ onItemPress, }) => { const typography = useScaledTVTypography(); + const sizes = useScaledTVSizes(); if (!items || items.length === 0) return null; return ( @@ -347,7 +351,7 @@ const TVJellyseerrPersonSection: React.FC = ({ fontWeight: "bold", color: "#FFFFFF", marginBottom: 16, - marginLeft: SCALE_PADDING, + marginLeft: sizes.padding.horizontal, }} > {title} @@ -358,7 +362,7 @@ const TVJellyseerrPersonSection: React.FC = ({ keyExtractor={(item) => item.id.toString()} showsHorizontalScrollIndicator={false} contentContainerStyle={{ - paddingHorizontal: SCALE_PADDING, + paddingHorizontal: sizes.padding.horizontal, paddingVertical: SCALE_PADDING, gap: 20, }} diff --git a/components/search/TVSearchPage.tsx b/components/search/TVSearchPage.tsx index 24e6120d..264f5c28 100644 --- a/components/search/TVSearchPage.tsx +++ b/components/search/TVSearchPage.tsx @@ -22,7 +22,6 @@ import { TVJellyseerrSearchResults } from "./TVJellyseerrSearchResults"; import { TVSearchSection } from "./TVSearchSection"; import { TVSearchTabBadges } from "./TVSearchTabBadges"; -const HORIZONTAL_PADDING = 60; const TOP_PADDING = 100; // Height of the native search bar itself. The tvOS grid keyboard presents as // its own overlay when the field is focused, so we only reserve the bar height @@ -163,6 +162,7 @@ export const TVSearchPage: React.FC = ({ discoverSliders, }) => { const typography = useScaledTVTypography(); + const sizes = useScaledTVSizes(); const { t } = useTranslation(); const insets = useSafeAreaInsets(); const [api] = useAtom(apiAtom); @@ -251,7 +251,7 @@ export const TVSearchPage: React.FC = ({ ) : ( @@ -285,7 +285,7 @@ export const TVSearchPage: React.FC = ({ > {/* Search Type Tab Badges */} {showDiscover && ( - +