Add album list search

2024-11-20 06:27:09 +01:00 · 2022-12-21 01:27:19 -08:00 · 2022-12-21 01:27:19 -08:00 · 19f55b4a2e
commit 19f55b4a2e
parent b742b814c0
8 changed files with 275 additions and 181 deletions
--- a/src/renderer/api/jellyfin.api.ts
+++ b/src/renderer/api/jellyfin.api.ts
@ -252,9 +252,11 @@ const getAlbumList = async (args: AlbumListArgs): Promise<JFAlbumList> => {
    limit: query.limit,
    parentId: query.musicFolderId,
    recursive: true,
+    searchTerm: query.searchTerm,
    sortBy: albumListSortMap.jellyfin[query.sortBy],
    sortOrder: sortOrderMap.jellyfin[query.sortOrder],
    startIndex: query.startIndex,
+    ...query.jfParams,
  };

  const data = await api
--- a/src/renderer/api/navidrome.api.ts
+++ b/src/renderer/api/navidrome.api.ts
@ -208,6 +208,7 @@ const getAlbumList = async (args: AlbumListArgs): Promise<NDAlbumList> => {
    _order: sortOrderMap.navidrome[query.sortOrder],
    _sort: albumListSortMap.navidrome[query.sortBy],
    _start: query.startIndex,
+    name: query.searchTerm,
    ...query.ndParams,
  };

--- a/src/renderer/api/types.ts
+++ b/src/renderer/api/types.ts
@ -40,13 +40,33 @@ import {
  SSAlbumArtistDetail,
  SSMusicFolderList,
 } from '/@/renderer/api/subsonic.types';
-import { ServerListItem, ServerType } from '/@/renderer/types';

 export enum SortOrder {
  ASC = 'ASC',
  DESC = 'DESC',
 }

+export type ServerListItem = {
+  credential: string;
+  id: string;
+  name: string;
+  ndCredential?: string;
+  type: ServerType;
+  url: string;
+  userId: string | null;
+  username: string;
+};
+
+export enum ServerType {
+  JELLYFIN = 'jellyfin',
+  NAVIDROME = 'navidrome',
+  SUBSONIC = 'subsonic',
+}
+
+export type QueueSong = Song & {
+  uniqueId: string;
+};
+
 type SortOrderMap = {
  jellyfin: Record<SortOrder, JFSortOrder>;
  navidrome: Record<SortOrder, NDSortOrder>;
@ -281,6 +301,7 @@ export type AlbumListQuery = {
    starred?: boolean;
    year?: number;
  };
+  searchTerm?: string;
  sortBy: AlbumListSort;
  sortOrder: SortOrder;
  startIndex: number;
--- a/src/renderer/components/index.ts
+++ b/src/renderer/components/index.ts
@ -27,3 +27,4 @@ export * from './grid-carousel';
 export * from './card';
 export * from './feature-carousel';
 export * from './badge';
+export * from './search-input';
--- a/src/renderer/components/input/index.tsx
+++ b/src/renderer/components/input/index.tsx
@ -82,6 +82,8 @@ const StyledTextInput = styled(MantineTextInput)<TextInputProps>`
  & .mantine-TextInput-disabled {
    opacity: 0.6;
  }
+
+  transition: width 0.3s ease-in-out;
 `;

 const StyledNumberInput = styled(MantineNumberInput)<NumberInputProps>`
@ -125,6 +127,8 @@ const StyledNumberInput = styled(MantineNumberInput)<NumberInputProps>`
  & .mantine-NumberInput-disabled {
    opacity: 0.6;
  }
+
+  transition: width 0.3s ease-in-out;
 `;

 const StyledPasswordInput = styled(MantinePasswordInput)<PasswordInputProps>`
@ -152,6 +156,8 @@ const StyledPasswordInput = styled(MantinePasswordInput)<PasswordInputProps>`
  & .mantine-PasswordInput-disabled {
    opacity: 0.6;
  }
+
+  transition: width 0.3s ease-in-out;
 `;

 const StyledFileInput = styled(MantineFileInput)<FileInputProps>`
@ -179,6 +185,8 @@ const StyledFileInput = styled(MantineFileInput)<FileInputProps>`
  & .mantine-FileInput-disabled {
    opacity: 0.6;
  }
+
+  transition: width 0.3s ease-in-out;
 `;

 const StyledJsonInput = styled(MantineJsonInput)<JsonInputProps>`
@ -206,6 +214,8 @@ const StyledJsonInput = styled(MantineJsonInput)<JsonInputProps>`
  & .mantine-JsonInput-disabled {
    opacity: 0.6;
  }
+
+  transition: width 0.3s ease-in-out;
 `;

 const StyledTextarea = styled(MantineTextarea)<TextareaProps>`
@ -233,6 +243,8 @@ const StyledTextarea = styled(MantineTextarea)<TextareaProps>`
  & .mantine-Textarea-disabled {
    opacity: 0.6;
  }
+
+  transition: width 0.3s ease-in-out;
 `;

 export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
--- a/src/renderer/components/search-input/index.tsx
+++ b/src/renderer/components/search-input/index.tsx
@ -0,0 +1,50 @@
+import { ChangeEvent } from 'react';
+import { TextInputProps } from '@mantine/core';
+import { useFocusWithin, useHotkeys, useMergedRef } from '@mantine/hooks';
+import { RiSearchLine } from 'react-icons/ri';
+import { TextInput } from '/@/renderer/components/input';
+
+interface SearchInputProps extends TextInputProps {
+  initialWidth?: number;
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+  openedWidth?: number;
+  value?: string;
+}
+
+export const SearchInput = ({
+  initialWidth,
+  onChange,
+  openedWidth,
+  ...props
+}: SearchInputProps) => {
+  const { ref, focused } = useFocusWithin();
+  const mergedRef = useMergedRef<HTMLInputElement>(ref);
+
+  const isOpened = focused || ref.current?.value;
+
+  useHotkeys([
+    [
+      'ctrl+F',
+      () => {
+        ref.current.select();
+      },
+    ],
+  ]);
+
+  return (
+    <TextInput
+      ref={mergedRef}
+      {...props}
+      icon={<RiSearchLine size={15} />}
+      styles={{
+        input: {
+          backgroundColor: isOpened ? 'inherit' : 'transparent !important',
+          border: 'none !important',
+          padding: isOpened ? '10px' : 0,
+        },
+      }}
+      width={isOpened ? openedWidth || 200 : initialWidth || 50}
+      onChange={onChange}
+    />
+  );
+};
--- a/src/renderer/features/albums/components/album-list-header.tsx
+++ b/src/renderer/features/albums/components/album-list-header.tsx
@ -1,13 +1,20 @@
-import type { MouseEvent } from 'react';
+import type { MouseEvent, ChangeEvent } from 'react';
 import { useCallback } from 'react';
-import { Group, Slider } from '@mantine/core';
+import { Flex, Slider } from '@mantine/core';
+import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import { RiArrowDownSLine } from 'react-icons/ri';
 import { AlbumListSort, SortOrder } from '/@/renderer/api/types';
-import { Button, DropdownMenu, PageHeader } from '/@/renderer/components';
-import { useCurrentServer, useAppStoreActions, useAlbumRouteStore } from '/@/renderer/store';
+import { Button, DropdownMenu, PageHeader, SearchInput } from '/@/renderer/components';
+import {
+  useCurrentServer,
+  useAlbumListStore,
+  useSetAlbumFilters,
+  useSetAlbumStore,
+} from '/@/renderer/store';
 import { CardDisplayType } from '/@/renderer/types';
 import { useMusicFolders } from '/@/renderer/features/shared';
+import styled from 'styled-components';

 const FILTERS = {
  jellyfin: [
@ -39,11 +46,18 @@ const ORDER = [
  { name: 'Descending', value: SortOrder.DESC },
 ];

+const HeaderItems = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
 export const AlbumListHeader = () => {
  const server = useCurrentServer();
-  const { setPage } = useAppStoreActions();
-  const page = useAlbumRouteStore();
-  const filters = page.list.filter;
+  const setPage = useSetAlbumStore();
+  const setFilter = useSetAlbumFilters();
+  const page = useAlbumListStore();
+  const filters = page.filter;

  const musicFoldersQuery = useMusicFolders();

@ -58,59 +72,44 @@ export const AlbumListHeader = () => {

  const setSize = throttle(
    (e: number) =>
-      setPage('albums', {
-        ...page,
-        list: { ...page.list, size: e },
+      setPage({
+        list: { ...page, grid: { ...page.grid, size: e } },
      }),
    200,
  );

-  const handleSetFilter = useCallback(
+  const handleSetSortBy = useCallback(
    (e: MouseEvent<HTMLButtonElement>) => {
      if (!e.currentTarget?.value) return;
-      setPage('albums', {
-        list: {
-          ...page.list,
-          filter: {
-            ...page.list.filter,
-            sortBy: e.currentTarget.value as AlbumListSort,
-          },
-        },
+      setFilter({
+        sortBy: e.currentTarget.value as AlbumListSort,
      });
    },
-    [page.list, setPage],
+    [setFilter],
  );

  const handleSetMusicFolder = useCallback(
    (e: MouseEvent<HTMLButtonElement>) => {
      if (!e.currentTarget?.value) return;
-      setPage('albums', {
-        list: {
-          ...page.list,
-          filter: {
-            ...page.list.filter,
-            musicFolderId: e.currentTarget.value,
-          },
-        },
+      setFilter({
+        musicFolderId: e.currentTarget.value,
      });
    },
-    [page.list, setPage],
+    [setFilter],
  );

  const handleSetOrder = useCallback(
    (e: MouseEvent<HTMLButtonElement>) => {
      if (!e.currentTarget?.value) return;
-      setPage('albums', {
-        list: {
-          ...page.list,
-          filter: {
-            ...page.list.filter,
+      debounce(
+        () =>
+          setFilter({
            sortOrder: e.currentTarget.value as SortOrder,
-          },
-        },
-      });
+          }),
+        1000,
+      );
    },
-    [page.list, setPage],
+    [setFilter],
  );

  const handleSetViewType = useCallback(
@ -118,29 +117,24 @@ export const AlbumListHeader = () => {
      if (!e.currentTarget?.value) return;
      const type = e.currentTarget.value;
      if (type === CardDisplayType.CARD) {
-        setPage('albums', {
-          ...page,
+        setPage({
          list: {
-            ...page.list,
+            ...page,
            display: CardDisplayType.CARD,
-            type: 'grid',
          },
        });
      } else if (type === CardDisplayType.POSTER) {
-        setPage('albums', {
-          ...page,
+        setPage({
          list: {
-            ...page.list,
+            ...page,
            display: CardDisplayType.POSTER,
-            type: 'grid',
          },
        });
      } else {
-        setPage('albums', {
-          ...page,
+        setPage({
          list: {
-            ...page.list,
-            type: 'list',
+            ...page,
+            display: CardDisplayType.TABLE,
          },
        });
      }
@ -148,127 +142,142 @@ export const AlbumListHeader = () => {
    [page, setPage],
  );

+  const handleSearch = debounce((e: ChangeEvent<HTMLInputElement>) => {
+    setFilter({
+      searchTerm: e.target.value,
+    });
+  }, 500);
+
  return (
    <PageHeader>
-      <Group>
-        <DropdownMenu
-          position="bottom-end"
-          width={100}
+      <HeaderItems>
+        <Flex
+          align="center"
+          gap="sm"
+          justify="center"
        >
-          <DropdownMenu.Target>
-            <Button
-              compact
-              rightIcon={<RiArrowDownSLine size={15} />}
-              size="xl"
-              sx={{ paddingLeft: 0, paddingRight: 0 }}
-              variant="subtle"
-            >
-              Albums
-            </Button>
-          </DropdownMenu.Target>
-          <DropdownMenu.Dropdown>
-            <DropdownMenu.Item>
-              <Slider
-                defaultValue={page.list?.size || 0}
-                label={null}
-                onChange={setSize}
-              />
-            </DropdownMenu.Item>
-            <DropdownMenu.Divider />
-            <DropdownMenu.Item
-              $isActive={page.list.type === 'grid' && page.list.display === CardDisplayType.CARD}
-              value={CardDisplayType.CARD}
-              onClick={handleSetViewType}
-            >
-              Card
-            </DropdownMenu.Item>
-            <DropdownMenu.Item
-              $isActive={page.list.type === 'grid' && page.list.display === CardDisplayType.POSTER}
-              value={CardDisplayType.POSTER}
-              onClick={handleSetViewType}
-            >
-              Poster
-            </DropdownMenu.Item>
-            <DropdownMenu.Item
-              disabled
-              $isActive={page.list.type === 'list'}
-              value="list"
-              onClick={handleSetViewType}
-            >
-              List
-            </DropdownMenu.Item>
-          </DropdownMenu.Dropdown>
-        </DropdownMenu>
-        <DropdownMenu position="bottom-start">
-          <DropdownMenu.Target>
-            <Button
-              compact
-              fw="normal"
-              variant="subtle"
-            >
-              {sortByLabel}
-            </Button>
-          </DropdownMenu.Target>
-          <DropdownMenu.Dropdown>
-            {FILTERS[server?.type as keyof typeof FILTERS].map((filter) => (
-              <DropdownMenu.Item
-                key={`filter-${filter.name}`}
-                $isActive={filter.value === filters.sortBy}
-                value={filter.value}
-                onClick={handleSetFilter}
+          <DropdownMenu position="bottom-end">
+            <DropdownMenu.Target>
+              <Button
+                compact
+                rightIcon={<RiArrowDownSLine size={15} />}
+                size="xl"
+                sx={{ paddingLeft: 0, paddingRight: 0 }}
+                variant="subtle"
              >
-                {filter.name}
+                Albums
+              </Button>
+            </DropdownMenu.Target>
+            <DropdownMenu.Dropdown>
+              <DropdownMenu.Item>
+                <Slider
+                  defaultValue={page.grid.size || 0}
+                  label={null}
+                  onChange={setSize}
+                />
              </DropdownMenu.Item>
-            ))}
-          </DropdownMenu.Dropdown>
-        </DropdownMenu>
-        <DropdownMenu position="bottom-start">
-          <DropdownMenu.Target>
-            <Button
-              compact
-              fw="normal"
-              variant="subtle"
-            >
-              {sortOrderLabel}
-            </Button>
-          </DropdownMenu.Target>
-          <DropdownMenu.Dropdown>
-            {ORDER.map((sort) => (
+              <DropdownMenu.Divider />
              <DropdownMenu.Item
-                key={`sort-${sort.value}`}
-                $isActive={sort.value === filters.sortOrder}
-                value={sort.value}
-                onClick={handleSetOrder}
+                $isActive={page.display === CardDisplayType.CARD}
+                value={CardDisplayType.CARD}
+                onClick={handleSetViewType}
              >
-                {sort.name}
+                Card
              </DropdownMenu.Item>
-            ))}
-          </DropdownMenu.Dropdown>
-        </DropdownMenu>
-        <DropdownMenu position="bottom-start">
-          <DropdownMenu.Target>
-            <Button
-              compact
-              fw="normal"
-              variant="subtle"
-            >
-              Folder
-            </Button>
-          </DropdownMenu.Target>
-          <DropdownMenu.Dropdown>
-            {musicFoldersQuery.data?.map((folder) => (
              <DropdownMenu.Item
-                key={`musicFolder-${folder.id}`}
-                $isActive={filters.musicFolderId === folder.id}
-                value={folder.id}
-                onClick={handleSetMusicFolder}
+                $isActive={page.display === CardDisplayType.POSTER}
+                value={CardDisplayType.POSTER}
+                onClick={handleSetViewType}
              >
-                {folder.name}
+                Poster
              </DropdownMenu.Item>
-            ))}
-          </DropdownMenu.Dropdown>
-        </DropdownMenu>
-      </Group>
+              <DropdownMenu.Item
+                disabled
+                $isActive={page.display === CardDisplayType.TABLE}
+                value="list"
+                onClick={handleSetViewType}
+              >
+                List
+              </DropdownMenu.Item>
+            </DropdownMenu.Dropdown>
+          </DropdownMenu>
+          <DropdownMenu position="bottom-start">
+            <DropdownMenu.Target>
+              <Button
+                compact
+                fw="normal"
+                variant="subtle"
+              >
+                {sortByLabel}
+              </Button>
+            </DropdownMenu.Target>
+            <DropdownMenu.Dropdown>
+              {FILTERS[server?.type as keyof typeof FILTERS].map((filter) => (
+                <DropdownMenu.Item
+                  key={`filter-${filter.name}`}
+                  $isActive={filter.value === filters.sortBy}
+                  value={filter.value}
+                  onClick={handleSetSortBy}
+                >
+                  {filter.name}
+                </DropdownMenu.Item>
+              ))}
+            </DropdownMenu.Dropdown>
+          </DropdownMenu>
+          <DropdownMenu position="bottom-start">
+            <DropdownMenu.Target>
+              <Button
+                compact
+                fw="normal"
+                variant="subtle"
+              >
+                {sortOrderLabel}
+              </Button>
+            </DropdownMenu.Target>
+            <DropdownMenu.Dropdown>
+              {ORDER.map((sort) => (
+                <DropdownMenu.Item
+                  key={`sort-${sort.value}`}
+                  $isActive={sort.value === filters.sortOrder}
+                  value={sort.value}
+                  onClick={handleSetOrder}
+                >
+                  {sort.name}
+                </DropdownMenu.Item>
+              ))}
+            </DropdownMenu.Dropdown>
+          </DropdownMenu>
+          <DropdownMenu position="bottom-start">
+            <DropdownMenu.Target>
+              <Button
+                compact
+                fw="normal"
+                variant="subtle"
+              >
+                Folder
+              </Button>
+            </DropdownMenu.Target>
+            <DropdownMenu.Dropdown>
+              {musicFoldersQuery.data?.map((folder) => (
+                <DropdownMenu.Item
+                  key={`musicFolder-${folder.id}`}
+                  $isActive={filters.musicFolderId === folder.id}
+                  value={folder.id}
+                  onClick={handleSetMusicFolder}
+                >
+                  {folder.name}
+                </DropdownMenu.Item>
+              ))}
+            </DropdownMenu.Dropdown>
+          </DropdownMenu>
+        </Flex>
+        <Flex>
+          <SearchInput
+            defaultValue={page.filter.searchTerm}
+            onChange={handleSearch}
+          />
+        </Flex>
+      </HeaderItems>
    </PageHeader>
  );
 };
--- a/src/renderer/features/albums/routes/album-list-route.tsx
+++ b/src/renderer/features/albums/routes/album-list-route.tsx
@ -10,7 +10,7 @@ import {
  VirtualInfiniteGrid,
 } from '/@/renderer/components';
 import { AppRoute } from '/@/renderer/router/routes';
-import { useAlbumRouteStore, useAppStoreActions, useCurrentServer } from '/@/renderer/store';
+import { useAlbumListStore, useCurrentServer, useSetAlbumStore } from '/@/renderer/store';
 import { LibraryItem, CardDisplayType } from '/@/renderer/types';
 import { useAlbumList } from '../queries/album-list-query';
 import { controller } from '/@/renderer/api/controller';
@ -22,17 +22,15 @@ import { useHandlePlayQueueAdd } from '/@/renderer/features/player/hooks/use-han
 const AlbumListRoute = () => {
  const queryClient = useQueryClient();
  const server = useCurrentServer();
-  const { setPage } = useAppStoreActions();
-  const page = useAlbumRouteStore();
-  const filters = page.list.filter;
+  const setPage = useSetAlbumStore();
+
+  const page = useAlbumListStore();
  const handlePlayQueueAdd = useHandlePlayQueueAdd();

  const albumListQuery = useAlbumList({
    limit: 1,
-    musicFolderId: filters.musicFolderId,
-    sortBy: filters.sortBy,
-    sortOrder: filters.sortOrder,
    startIndex: 0,
+    ...page.filter,
  });

  const fetch = useCallback(
@ -40,17 +38,15 @@ const AlbumListRoute = () => {
      const queryKey = queryKeys.albums.list(server?.id || '', {
        limit: take,
        startIndex: skip,
-        ...filters,
+        ...page.filter,
      });

      const albums = await queryClient.fetchQuery(queryKey, async ({ signal }) =>
        controller.getAlbumList({
          query: {
            limit: take,
-            musicFolderId: filters.musicFolderId,
-            sortBy: filters.sortBy,
-            sortOrder: filters.sortOrder,
            startIndex: skip,
+            ...page.filter,
          },
          server,
          signal,
@ -59,16 +55,18 @@ const AlbumListRoute = () => {

      return api.normalize.albumList(albums, server);
    },
-    [filters, queryClient, server],
+    [page.filter, queryClient, server],
  );

  const handleGridScroll = useCallback(
    (e: ListOnScrollProps) => {
-      setPage('albums', {
-        ...page,
+      setPage({
        list: {
-          ...page.list,
-          gridScrollOffset: e.scrollOffset,
+          ...page,
+          grid: {
+            ...page.grid,
+            scrollOffset: e.scrollOffset,
+          },
        },
      });
    },
@ -103,17 +101,17 @@ const AlbumListRoute = () => {
                    property: 'releaseYear',
                  },
                ]}
-                display={page.list?.display || CardDisplayType.CARD}
+                display={page.display || CardDisplayType.CARD}
                fetchFn={fetch}
                handlePlayQueueAdd={handlePlayQueueAdd}
                height={height}
-                initialScrollOffset={page.list?.gridScrollOffset || 0}
+                initialScrollOffset={page?.grid.scrollOffset || 0}
                itemCount={albumListQuery?.data?.totalRecordCount || 0}
                itemGap={20}
-                itemSize={150 + page.list?.size}
+                itemSize={150 + page.grid?.size}
                itemType={LibraryItem.ALBUM}
                minimumBatchSize={40}
-                refresh={filters.musicFolderId}
+                refresh={page.filter}
                route={{
                  route: AppRoute.LIBRARY_ALBUMS_DETAIL,
                  slugs: [{ idProperty: 'id', slugProperty: 'albumId' }],