feat: filters with bottom sheet

2026-04-17 22:42:03 +01:00 · 2024-08-17 23:34:51 +02:00
parent 30781a6dfe
commit d56bb79ac2
13 changed files with 513 additions and 274 deletions
--- 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,52 +42,35 @@ export const FilterButton: React.FC<Props> = ({
  if (filters?.length === 0) return null;

  return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger>
-        <TouchableOpacity>
-          <View
-            className={`
+    <>
+      <TouchableOpacity onPress={() => setOpen(true)}>
+        <View
+          className={`
            px-3 py-2 rounded-full flex flex-row items-center space-x-2
            ${values.length > 0 ? "bg-purple-600" : "bg-neutral-900"}
            `}
-            {...props}
-          >
-            <Text>{title}</Text>
-            <Ionicons
-              name="filter"
-              size={16}
-              color="white"
-              style={{ opacity: 0.5 }}
-            />
-          </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>
+          {...props}
+        >
+          <Text>{title}</Text>
+          <Ionicons
+            name="filter"
+            size={16}
+            color="white"
+            style={{ opacity: 0.5 }}
+          />
+        </View>
+      </TouchableOpacity>
+      <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]);