feat: filters with bottom sheet

2025-08-20 18:37:18 +02:00 · 2024-08-17 23:34:51 +02:00
parent 30781a6dfe
commit d56bb79ac2
13 changed files with 513 additions and 274 deletions
--- a/app/(auth)/(tabs)/library/collections/[collectionId].tsx
+++ b/app/(auth)/(tabs)/library/collections/[collectionId].tsx
@@ -2,14 +2,15 @@ import { ColumnItem } from "@/components/common/ColumnItem";
 import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import { FilterButton } from "@/components/filters/FilterButton";
 import { ResetFiltersButton } from "@/components/filters/ResetFiltersButton";
-import { SortButton } from "@/components/filters/SortButton";
 import { ItemCardText } from "@/components/ItemCardText";
 import MoviePoster from "@/components/posters/MoviePoster";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import {
  genreFilterAtom,
  sortByAtom,
+  sortOptions,
  sortOrderAtom,
+  sortOrderOptions,
  tagsFilterAtom,
  yearFilterAtom,
 } from "@/utils/atoms/filters";
@@ -35,8 +36,8 @@ const page: React.FC = () => {
  const [selectedGenres, setSelectedGenres] = useAtom(genreFilterAtom);
  const [selectedYears, setSelectedYears] = useAtom(yearFilterAtom);
  const [selectedTags, setSelectedTags] = useAtom(tagsFilterAtom);
-  const [sortBy] = useAtom(sortByAtom);
-  const [sortOrder] = useAtom(sortOrderAtom);
+  const [sortBy, setSortBy] = useAtom(sortByAtom);
+  const [sortOrder, setSortOrder] = useAtom(sortOrderAtom);

  const { data: collection } = useQuery({
    queryKey: ["collection", collectionId],
@@ -85,8 +86,8 @@ const page: React.FC = () => {
        parentId: collectionId,
        limit: 50,
        startIndex: pageParam,
-        sortBy: [sortBy.key, "SortName", "ProductionYear"],
-        sortOrder: [sortOrder.key],
+        sortBy: [sortBy[0].key, "SortName", "ProductionYear"],
+        sortOrder: [sortOrder[0].key],
        includeItemTypes,
        enableImageTypes: ["Primary", "Backdrop", "Banner", "Thumb"],
        recursive: true,
@@ -112,17 +113,7 @@ const page: React.FC = () => {
    ]
  );

-  const {
-    status,
-    data,
-    error,
-    isFetching,
-    isFetchingNextPage,
-    isFetchingPreviousPage,
-    fetchNextPage,
-    fetchPreviousPage,
-    hasPreviousPage,
-  } = useInfiniteQuery({
+  const { data, isFetching, fetchNextPage } = useInfiniteQuery({
    queryKey: [
      "library-items",
      collection,
@@ -205,6 +196,10 @@ const page: React.FC = () => {
                  set={setSelectedGenres}
                  values={selectedGenres}
                  title="Genres"
+                  renderItemLabel={(item) => item.toString()}
+                  searchFilter={(item, search) =>
+                    item.toLowerCase().includes(search.toLowerCase())
+                  }
                />
                <FilterButton
                  collectionId={collectionId}
@@ -223,6 +218,10 @@ const page: React.FC = () => {
                  set={setSelectedTags}
                  values={selectedTags}
                  title="Tags"
+                  renderItemLabel={(item) => item.toString()}
+                  searchFilter={(item, search) =>
+                    item.toLowerCase().includes(search.toLowerCase())
+                  }
                />
                <FilterButton
                  collectionId={collectionId}
@@ -245,8 +244,43 @@ const page: React.FC = () => {
                  set={setSelectedYears}
                  values={selectedYears}
                  title="Years"
+                  renderItemLabel={(item) => item.toString()}
+                  searchFilter={(item, search) =>
+                    item.toLowerCase().includes(search.toLowerCase())
+                  }
+                />
+                <FilterButton
+                  collectionId={collectionId}
+                  queryKey="sortByFilter"
+                  queryFn={async () => {
+                    return sortOptions;
+                  }}
+                  set={setSortBy}
+                  values={sortBy}
+                  title="Sort by"
+                  renderItemLabel={(item) => item.value}
+                  searchFilter={(item, search) =>
+                    item.value.toLowerCase().includes(search.toLowerCase()) ||
+                    item.value.toLowerCase().includes(search.toLowerCase())
+                  }
+                  showSearch={false}
+                />
+                <FilterButton
+                  showSearch={false}
+                  collectionId={collectionId}
+                  queryKey="orderByFilter"
+                  queryFn={async () => {
+                    return sortOrderOptions;
+                  }}
+                  set={setSortOrder}
+                  values={sortOrder}
+                  title="Order by"
+                  renderItemLabel={(item) => item.value}
+                  searchFilter={(item, search) =>
+                    item.value.toLowerCase().includes(search.toLowerCase()) ||
+                    item.value.toLowerCase().includes(search.toLowerCase())
+                  }
                />
-                <SortButton title="Sort by" />
              </View>
            </ScrollView>
            {!type && isFetching && (
--- a/app/+not-found.tsx
+++ b/app/+not-found.tsx
@@ -8,10 +8,6 @@ import { useEffect } from "react";
 export default function NotFoundScreen() {
  const pathname = usePathname();

-  useEffect(() => {
-    console.log(`Navigated to ${pathname}`);
-  }, [pathname]);
-
  return (
    <>
      <Stack.Screen options={{ title: "Oops!" }} />
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -16,6 +16,7 @@ import { JobQueueProvider } from "@/providers/JobQueueProvider";
 import { useKeepAwake } from "expo-keep-awake";
 import { useSettings } from "@/utils/atoms/settings";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";

 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
@@ -79,6 +80,7 @@ function Layout() {
      <QueryClientProvider client={queryClientRef.current}>
        <JobQueueProvider>
          <ActionSheetProvider>
+            <BottomSheetModalProvider>
              <JellyfinProvider>
                <StatusBar style="light" backgroundColor="#000" />
                <ThemeProvider value={DarkTheme}>
@@ -174,6 +176,7 @@ function Layout() {
                  <CurrentlyPlayingBar />
                </ThemeProvider>
              </JellyfinProvider>
+            </BottomSheetModalProvider>
          </ActionSheetProvider>
        </JobQueueProvider>
      </QueryClientProvider>
--- a/app/login.tsx
+++ b/app/login.tsx
@@ -6,7 +6,13 @@ import { Ionicons } from "@expo/vector-icons";
 import { AxiosError } from "axios";
 import { useAtom } from "jotai";
 import React, { useMemo, useState } from "react";
-import { KeyboardAvoidingView, Platform, View } from "react-native";
+import {
+  Alert,
+  KeyboardAvoidingView,
+  Platform,
+  SafeAreaView,
+  View,
+} from "react-native";

 import { z } from "zod";

@@ -46,19 +52,28 @@ const Login: React.FC = () => {
  };

  const handleConnect = (url: string) => {
+    if (!url.startsWith("http")) {
+      Alert.alert("Error", "URL needs to start with http or https.");
+      return;
+    }
    setServer({ address: url.trim() });
  };

  if (api?.basePath) {
    return (
+      <SafeAreaView style={{ flex: 1 }}>
        <KeyboardAvoidingView
          behavior={Platform.OS === "ios" ? "padding" : "height"}
-        style={{ flex: 1 }}
+          style={{ flex: 1, height: "100%" }}
        >
-        <View className="flex flex-col px-4 justify-center h-full gap-y-2">
+          <View className="flex flex-col justify-between px-4 h-full gap-y-2">
+            <View></View>
            <View>
-            <Text className="text-3xl font-bold">Streamyfin</Text>
-            <Text className="opacity-50 mb-2">Server: {api.basePath}</Text>
+              <View className="mb-4">
+                <Text className="text-3xl font-bold mb-2">Streamyfin</Text>
+                <Text className="text-neutral-500 mb-2">
+                  Server: {api.basePath}
+                </Text>
                <Button
                  color="black"
                  onPress={() => {
@@ -67,14 +82,22 @@ const Login: React.FC = () => {
                  }}
                  justify="between"
                  iconLeft={
-                <Ionicons name="arrow-back-outline" size={18} color={"white"} />
+                    <Ionicons
+                      name="arrow-back-outline"
+                      size={18}
+                      color={"white"}
+                    />
                  }
                >
                  Change server
                </Button>
              </View>
+
              <View className="flex flex-col space-y-2">
                <Text className="text-2xl font-bold">Log in</Text>
+                <Text className="text-neutral-500">
+                  Log in to any user account
+                </Text>
                <Input
                  placeholder="Username"
                  onChangeText={(text) =>
@@ -109,27 +132,36 @@ const Login: React.FC = () => {
              </View>

              <Text className="text-red-600 mb-2">{error}</Text>
+            </View>

-          <Button onPress={handleLogin} loading={loading}>
+            <Button
+              onPress={handleLogin}
+              loading={loading}
+              className="mt-auto mb-2"
+            >
              Log in
            </Button>
          </View>
        </KeyboardAvoidingView>
+      </SafeAreaView>
    );
  }

  return (
+    <SafeAreaView style={{ flex: 1 }}>
      <KeyboardAvoidingView
        behavior={Platform.OS === "ios" ? "padding" : "height"}
        style={{ flex: 1 }}
      >
-      <View className="flex flex-col px-4 justify-center h-full">
+        <View className="flex flex-col px-4 justify-between h-full">
+          <View></View>
          <View className="flex flex-col gap-y-2">
            <Text className="text-3xl font-bold">Streamyfin</Text>
-          <Text className="opacity-50">Enter a server adress</Text>
+            <Text className="text-neutral-500">
+              Connect to your Jellyfin server
+            </Text>
            <Input
-            className="mb-2"
-            placeholder="http(s)://..."
+              placeholder="Server URL"
              onChangeText={setServerURL}
              value={serverURL}
              keyboardType="url"
@@ -138,10 +170,16 @@ const Login: React.FC = () => {
              textContentType="URL"
              maxLength={500}
            />
-          <Button onPress={() => handleConnect(serverURL)}>Connect</Button>
+            <Text className="opacity-30">
+              Server URL requires http or https
+            </Text>
          </View>
+          <Button onPress={() => handleConnect(serverURL)} className="mb-2">
+            Connect
+          </Button>
        </View>
      </KeyboardAvoidingView>
+    </SafeAreaView>
  );
 };

--- a/bun.lockb
+++ b/bun.lockb
--- a/components/CurrentlyPlayingBar.tsx
+++ b/components/CurrentlyPlayingBar.tsx
@@ -45,7 +45,7 @@ export const CurrentlyPlayingBar: React.FC = () => {
  const [user] = useAtom(userAtom);
  const [playing, setPlaying] = useAtom(playingAtom);
  const [currentlyPlaying, setCurrentlyPlaying] = useAtom(
-    currentlyPlayingItemAtom,
+    currentlyPlayingItemAtom
  );
  const [fullScreen, setFullScreen] = useAtom(fullScreenAtom);

@@ -143,7 +143,7 @@ export const CurrentlyPlayingBar: React.FC = () => {
        sessionId: sessionData.PlaySessionId,
      });
    },
-    [sessionData?.PlaySessionId, api, playing, currentlyPlaying?.item.Id],
+    [sessionData?.PlaySessionId, api, playing, currentlyPlaying?.item.Id]
  );

  useEffect(() => {
@@ -185,7 +185,7 @@ export const CurrentlyPlayingBar: React.FC = () => {
      item?.UserData?.PlaybackPositionTicks
        ? Math.round(item.UserData.PlaybackPositionTicks / 10000)
        : 0,
-    [item],
+    [item]
  );

  const backdropUrl = useMemo(
@@ -196,7 +196,7 @@ export const CurrentlyPlayingBar: React.FC = () => {
        quality: 70,
        width: 200,
      }),
-    [item],
+    [item]
  );

  if (!currentlyPlaying || !api) return null;
@@ -283,7 +283,7 @@ export const CurrentlyPlayingBar: React.FC = () => {
                    console.log(e);
                    writeToLog(
                      "ERROR",
-                      "Video playback error: " + JSON.stringify(e),
+                      "Video playback error: " + JSON.stringify(e)
                    );
                    Alert.alert("Error", "Cannot play this video file.");
                    setPlaying(false);
@@ -302,7 +302,6 @@ export const CurrentlyPlayingBar: React.FC = () => {
            <View className="shrink text-xs">
              <TouchableOpacity
                onPress={() => {
-                  console.log(JSON.stringify(item));
                  if (item?.Type === "Audio")
                    router.push(`/albums/${item?.AlbumId}`);
                  else router.push(`/items/${item?.Id}`);
@@ -330,7 +329,6 @@ export const CurrentlyPlayingBar: React.FC = () => {
              {item?.Type === "Audio" && (
                <TouchableOpacity
                  onPress={() => {
-                    console.log(JSON.stringify(item));
                    router.push(`/albums/${item?.AlbumId}`);
                  }}
                >
--- a/components/common/Input.tsx
+++ b/components/common/Input.tsx
@@ -1,17 +1,9 @@
-import { useFocusEffect } from "expo-router";
-import React, { useEffect } from "react";
-import { TextInputProps, TextProps } from "react-native";
-import { TextInput } from "react-native";
+import React from "react";
+import { TextInput, TextInputProps } from "react-native";
 export function Input(props: TextInputProps) {
  const { style, ...otherProps } = props;
  const inputRef = React.useRef<TextInput>(null);

-  useFocusEffect(
-    React.useCallback(() => {
-      inputRef.current?.focus();
-    }, []),
-  );
-
  return (
    <TextInput
      ref={inputRef}
--- a/components/filters/FilterButton.tsx
+++ b/components/filters/FilterButton.tsx
@@ -1,33 +1,39 @@
-import * as DropdownMenu from "zeego/dropdown-menu";
 import { Text } from "@/components/common/Text";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { Ionicons } from "@expo/vector-icons";
 import { useQuery } from "@tanstack/react-query";
 import { useAtom } from "jotai";
+import { useState } from "react";
 import { TouchableOpacity, View, ViewProps } from "react-native";
+import { FilterSheet } from "./FilterSheet";

-interface Props extends ViewProps {
+interface FilterButtonProps<T> extends ViewProps {
  collectionId: string;
  queryFn: (params: any) => Promise<any>;
  queryKey: string;
-  set: (value: string[]) => void;
-  values: string[];
+  set: (value: T[]) => void;
+  values: T[];
  title: string;
+  searchFilter: (item: T, query: string) => boolean;
+  renderItemLabel: (item: T) => React.ReactNode;
+  showSearch?: boolean;
 }

-export const FilterButton: React.FC<Props> = ({
+export const FilterButton = <T,>({
  collectionId,
  queryFn,
  queryKey,
  set,
  values,
  title,
+  renderItemLabel,
+  searchFilter,
+  showSearch = true,
  ...props
-}) => {
-  const [api] = useAtom(apiAtom);
-  const [user] = useAtom(userAtom);
+}: FilterButtonProps<T>) => {
+  const [open, setOpen] = useState(false);

-  const { data: filters } = useQuery<string[]>({
+  const { data: filters } = useQuery<T[]>({
    queryKey: [queryKey, collectionId],
    queryFn,
    staleTime: 0,
@@ -36,9 +42,8 @@ export const FilterButton: React.FC<Props> = ({
  if (filters?.length === 0) return null;

  return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger>
-        <TouchableOpacity>
+    <>
+      <TouchableOpacity onPress={() => setOpen(true)}>
        <View
          className={`
            px-3 py-2 rounded-full flex flex-row items-center space-x-2
@@ -55,33 +60,17 @@ export const FilterButton: React.FC<Props> = ({
          />
        </View>
      </TouchableOpacity>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content
-        loop={true}
-        side="bottom"
-        align="start"
-        alignOffset={0}
-        avoidCollisions={true}
-        collisionPadding={8}
-        sideOffset={8}
-      >
-        {filters?.map((g) => (
-          <DropdownMenu.CheckboxItem
-            value={values.includes(g)}
-            onValueChange={(next, previous) => {
-              if (next === "on") {
-                set([...values, g]);
-              } else {
-                set(values.filter((v) => v !== g));
-              }
-            }}
-            key={g}
-            textValue={g}
-          >
-            <DropdownMenu.ItemIndicator />
-          </DropdownMenu.CheckboxItem>
-        ))}
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>
+      <FilterSheet<T>
+        title={title}
+        open={open}
+        setOpen={setOpen}
+        data={filters}
+        values={values}
+        set={set}
+        renderItemLabel={renderItemLabel}
+        searchFilter={searchFilter}
+        showSearch={showSearch}
+      />
+    </>
  );
 };
--- a/components/filters/FilterSheet.tsx
+++ b/components/filters/FilterSheet.tsx
@@ -0,0 +1,190 @@
+import {
+  BottomSheetBackdrop,
+  BottomSheetBackdropProps,
+  BottomSheetFlatList,
+  BottomSheetModal,
+  BottomSheetScrollView,
+  BottomSheetView,
+} from "@gorhom/bottom-sheet";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+import { Text } from "@/components/common/Text";
+import { StyleSheet, TouchableOpacity, View, ViewProps } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { Button } from "../Button";
+import { Input } from "../common/Input";
+
+interface Props<T> extends ViewProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  data?: T[] | null;
+  values: T[];
+  set: (value: T[]) => void;
+  title: string;
+  searchFilter: (item: T, query: string) => boolean;
+  renderItemLabel: (item: T) => React.ReactNode;
+  showSearch?: boolean;
+}
+
+const LIMIT = 100;
+
+export const FilterSheet = <T,>({
+  values,
+  data: _data,
+  open,
+  set,
+  setOpen,
+  title,
+  searchFilter,
+  renderItemLabel,
+  showSearch = true,
+  ...props
+}: Props<T>) => {
+  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
+  const snapPoints = useMemo(() => ["80%"], []);
+
+  const [data, setData] = useState<T[]>([]);
+  const [offset, setOffset] = useState<number>(0);
+
+  const [search, setSearch] = useState<string>("");
+
+  const filteredData = useMemo(() => {
+    if (!search) return _data;
+    const results = [];
+    for (let i = 0; i < (_data?.length || 0); i++) {
+      if (_data && searchFilter(_data[i], search)) {
+        results.push(_data[i]);
+      }
+    }
+    return results.slice(0, 100);
+  }, [search, _data, searchFilter]);
+
+  useEffect(() => {
+    if (!_data || _data.length === 0) return;
+    const tmp = new Set(data);
+    for (let i = offset; i < Math.min(_data.length, offset + LIMIT); i++) {
+      tmp.add(_data[i]);
+    }
+    setData(Array.from(tmp));
+  }, [offset, _data]);
+
+  useEffect(() => {
+    if (open) bottomSheetModalRef.current?.present();
+    else bottomSheetModalRef.current?.dismiss();
+  }, [open]);
+
+  const handleSheetChanges = useCallback((index: number) => {
+    if (index === -1) {
+      setOpen(false);
+    }
+  }, []);
+
+  const renderData = useMemo(() => {
+    if (search.length > 0 && showSearch) return filteredData;
+    return data;
+  }, [search, filteredData, data]);
+
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...props}
+        disappearsOnIndex={-1}
+        appearsOnIndex={0}
+      />
+    ),
+    []
+  );
+
+  return (
+    <BottomSheetModal
+      ref={bottomSheetModalRef}
+      index={0}
+      snapPoints={snapPoints}
+      onChange={handleSheetChanges}
+      backdropComponent={renderBackdrop}
+      handleIndicatorStyle={{
+        backgroundColor: "white",
+      }}
+      backgroundStyle={{
+        backgroundColor: "#171717",
+      }}
+      style={{}}
+    >
+      <BottomSheetScrollView
+        style={{
+          flex: 1,
+        }}
+      >
+        <View className="px-4 mt-2 mb-8">
+          <Text className="font-bold text-2xl">{title}</Text>
+          <Text className="mb-2 text-neutral-500">{_data?.length} items</Text>
+          {showSearch && (
+            <Input
+              placeholder="Search..."
+              className="my-2"
+              value={search}
+              onChangeText={(text) => {
+                setSearch(text);
+              }}
+              returnKeyType="done"
+            />
+          )}
+          <View
+            style={{
+              borderRadius: 20,
+              overflow: "hidden",
+            }}
+            className="mb-4 flex flex-col rounded-xl overflow-hidden"
+          >
+            {renderData?.map((item, index) => (
+              <>
+                <TouchableOpacity
+                  onPress={() => {
+                    set(
+                      values.includes(item)
+                        ? values.filter((i) => i !== item)
+                        : [item]
+                    );
+                    setTimeout(() => {
+                      setOpen(false);
+                    }, 250);
+                  }}
+                  key={index}
+                  className=" bg-neutral-800 px-4 py-3 flex flex-row items-center justify-between"
+                >
+                  <Text>{renderItemLabel(item)}</Text>
+                  {values.includes(item) ? (
+                    <Ionicons name="radio-button-on" size={24} color="white" />
+                  ) : (
+                    <Ionicons name="radio-button-off" size={24} color="white" />
+                  )}
+                </TouchableOpacity>
+                <View
+                  style={{
+                    height: StyleSheet.hairlineWidth,
+                  }}
+                  className="h-1 divide-neutral-700 "
+                ></View>
+              </>
+            ))}
+          </View>
+          {data.length < (_data?.length || 0) && (
+            <Button
+              onPress={() => {
+                setOffset(offset + 100);
+              }}
+            >
+              Load more
+            </Button>
+          )}
+        </View>
+      </BottomSheetScrollView>
+    </BottomSheetModal>
+  );
+};
--- a/components/filters/_SortButton.tsx
+++ b/components/filters/_SortButton.tsx
--- a/components/posters/AlbumCover.tsx
+++ b/components/posters/AlbumCover.tsx
@@ -21,7 +21,6 @@ const AlbumCover: React.FC<ArtistPosterProps> = ({ item, id }) => {
      api,
      item,
    });
-    console.log("Image A", u);
    return u;
  }, [item]);

@@ -32,7 +31,6 @@ const AlbumCover: React.FC<ArtistPosterProps> = ({ item, id }) => {
      quality: 85,
      width: 300,
    });
-    console.log("Image B", u);
    return u;
  }, [item]);

--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
    "@config-plugins/ffmpeg-kit-react-native": "^8.0.0",
    "@expo/react-native-action-sheet": "^4.1.0",
    "@expo/vector-icons": "^14.0.2",
+    "@gorhom/bottom-sheet": "^4",
    "@jellyfin/sdk": "^0.10.0",
    "@kesha-antonov/react-native-background-downloader": "^3.2.0",
    "@react-native-async-storage/async-storage": "1.23.1",
--- a/utils/atoms/filters.ts
+++ b/utils/atoms/filters.ts
@@ -41,7 +41,7 @@ export const sortOrderOptions: {
 export const genreFilterAtom = atom<string[]>([]);
 export const tagsFilterAtom = atom<string[]>([]);
 export const yearFilterAtom = atom<string[]>([]);
-export const sortByAtom = atom<(typeof sortOptions)[number]>(sortOptions[0]);
-export const sortOrderAtom = atom<(typeof sortOrderOptions)[number]>(
+export const sortByAtom = atom<[typeof sortOptions][number]>([sortOptions[0]]);
+export const sortOrderAtom = atom<[typeof sortOrderOptions][number]>([
  sortOrderOptions[0],
-);
+]);