diff --git a/app/(auth)/(tabs)/(search)/index.tsx b/app/(auth)/(tabs)/(search)/index.tsx index 5a95ad48..72e56cf2 100644 --- a/app/(auth)/(tabs)/(search)/index.tsx +++ b/app/(auth)/(tabs)/(search)/index.tsx @@ -24,8 +24,6 @@ import ContinueWatchingPoster from "@/components/ContinueWatchingPoster"; import { Input } from "@/components/common/Input"; import { Text } from "@/components/common/Text"; import { TouchableItemRouter } from "@/components/common/TouchableItemRouter"; -import { FilterButton } from "@/components/filters/FilterButton"; -import { Tag } from "@/components/GenreTags"; import { ItemCardText } from "@/components/ItemCardText"; import { JellyseerrSearchSort, @@ -33,8 +31,10 @@ import { } from "@/components/jellyseerr/JellyseerrIndexPage"; import MoviePoster from "@/components/posters/MoviePoster"; import SeriesPoster from "@/components/posters/SeriesPoster"; +import { DiscoverFilters } from "@/components/search/DiscoverFilters"; import { LoadingSkeleton } from "@/components/search/LoadingSkeleton"; import { SearchItemWrapper } from "@/components/search/SearchItemWrapper"; +import { SearchTabButtons } from "@/components/search/SearchTabButtons"; import { useJellyseerr } from "@/hooks/useJellyseerr"; import { apiAtom, userAtom } from "@/providers/JellyfinProvider"; import { useSettings } from "@/utils/atoms/settings"; @@ -282,69 +282,29 @@ export default function search() { maxLength={500} /> )} - + {jellyseerrApi && ( - - setSearchType("Library")}> - - - setSearchType("Discover")}> - - + + {searchType === "Discover" && !loading && noResults && debouncedSearch.length > 0 && ( - - - Object.keys(JellyseerrSearchSort).filter((v) => - Number.isNaN(Number(v)), - ) - } - set={(value) => setJellyseerrOrderBy(value[0])} - values={[jellyseerrOrderBy]} - title={t("library.filters.sort_by")} - renderItemLabel={(item) => - t(`home.settings.plugins.jellyseerr.order_by.${item}`) - } - disableSearch={true} - /> - ["asc", "desc"]} - set={(value) => setJellyseerrSortOrder(value[0])} - values={[jellyseerrSortOrder]} - title={t("library.filters.sort_order")} - renderItemLabel={(item) => t(`library.filters.${item}`)} - disableSearch={true} - /> - + )} - + )} diff --git a/components/search/DiscoverFilters.tsx b/components/search/DiscoverFilters.tsx new file mode 100644 index 00000000..2e844c88 --- /dev/null +++ b/components/search/DiscoverFilters.tsx @@ -0,0 +1,115 @@ +import { Button, ContextMenu, Host, Picker } from "@expo/ui/swift-ui"; +import { Platform, View } from "react-native"; +import { FilterButton } from "@/components/filters/FilterButton"; +import { JellyseerrSearchSort } from "@/components/jellyseerr/JellyseerrIndexPage"; + +interface DiscoverFiltersProps { + searchFilterId: string; + orderFilterId: string; + jellyseerrOrderBy: JellyseerrSearchSort; + setJellyseerrOrderBy: (value: JellyseerrSearchSort) => void; + jellyseerrSortOrder: "asc" | "desc"; + setJellyseerrSortOrder: (value: "asc" | "desc") => void; + t: (key: string) => string; +} + +const sortOptions = Object.keys(JellyseerrSearchSort).filter((v) => + Number.isNaN(Number(v)), +); + +const orderOptions = ["asc", "desc"] as const; + +export const DiscoverFilters: React.FC = ({ + searchFilterId, + orderFilterId, + jellyseerrOrderBy, + setJellyseerrOrderBy, + jellyseerrSortOrder, + setJellyseerrSortOrder, + t, +}) => { + if (Platform.OS === "ios") { + return ( + + + + + + + + t(`home.settings.plugins.jellyseerr.order_by.${item}`), + )} + variant='menu' + selectedIndex={sortOptions.indexOf( + jellyseerrOrderBy as unknown as string, + )} + onOptionSelected={(event: any) => { + const index = event.nativeEvent.index; + setJellyseerrOrderBy( + sortOptions[index] as unknown as JellyseerrSearchSort, + ); + }} + /> + t(`library.filters.${item}`))} + variant='menu' + selectedIndex={orderOptions.indexOf(jellyseerrSortOrder)} + onOptionSelected={(event: any) => { + const index = event.nativeEvent.index; + setJellyseerrSortOrder(orderOptions[index]); + }} + /> + + + + ); + } + + // Android UI + return ( + + + Object.keys(JellyseerrSearchSort).filter((v) => + Number.isNaN(Number(v)), + ) + } + set={(value) => setJellyseerrOrderBy(value[0])} + values={[jellyseerrOrderBy]} + title={t("library.filters.sort_by")} + renderItemLabel={(item) => + t(`home.settings.plugins.jellyseerr.order_by.${item}`) + } + disableSearch={true} + /> + ["asc", "desc"]} + set={(value) => setJellyseerrSortOrder(value[0])} + values={[jellyseerrSortOrder]} + title={t("library.filters.sort_order")} + renderItemLabel={(item) => t(`library.filters.${item}`)} + disableSearch={true} + /> + + ); +}; diff --git a/components/search/SearchTabButtons.tsx b/components/search/SearchTabButtons.tsx new file mode 100644 index 00000000..b312b82e --- /dev/null +++ b/components/search/SearchTabButtons.tsx @@ -0,0 +1,76 @@ +import { Button, Host } from "@expo/ui/swift-ui"; +import { Platform, TouchableOpacity, View } from "react-native"; +import { Tag } from "@/components/GenreTags"; + +type SearchType = "Library" | "Discover"; + +interface SearchTabButtonsProps { + searchType: SearchType; + setSearchType: (type: SearchType) => void; + t: (key: string) => string; +} + +export const SearchTabButtons: React.FC = ({ + searchType, + setSearchType, + t, +}) => { + if (Platform.OS === "ios") { + return ( + <> + + + + + + + + ); + } + + // Android UI + return ( + + setSearchType("Library")}> + + + setSearchType("Discover")}> + + + + ); +};