pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Allow deselect of music folder

Browse source
This commit is contained in:
jeffvli 2022-12-25 16:27:09 -08:00
parent df9aad36c4
commit a8243c476c
1 changed files with 39 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
src/renderer/features/albums/components/album-list-header.tsx
View file

@ -1,16 +1,21 @@
import type { MouseEvent, ChangeEvent, MutableRefObject } from 'react';
import { useCallback } from 'react';
import { Flex, Slider } from '@mantine/core'; import { Flex, Slider } from '@mantine/core';
import { useQueryClient } from '@tanstack/react-query'; import { useQueryClient } from '@tanstack/react-query';
import debounce from 'lodash/debounce'; import debounce from 'lodash/debounce';
import throttle from 'lodash/throttle'; import throttle from 'lodash/throttle';
import type { ChangeEvent, MouseEvent, MutableRefObject } from 'react';
import { useCallback } from 'react';
import { import {
RiArrowDownSLine, RiArrowDownSLine,
RiFilter3Line, RiFilter3Line,
RiFolder2Line, RiFolder2Line,
RiMoreFill,
RiSortAsc, RiSortAsc,
RiSortDesc, RiSortDesc,
} from 'react-icons/ri'; } from 'react-icons/ri';
import styled from 'styled-components';
import { api } from '/@/renderer/api';
import { controller } from '/@/renderer/api/controller';
import { queryKeys } from '/@/renderer/api/query-keys';
import { AlbumListSort, ServerType, SortOrder } from '/@/renderer/api/types'; import { AlbumListSort, ServerType, SortOrder } from '/@/renderer/api/types';
import { import {
Button, Button,
@ -21,22 +26,18 @@ import {
TextTitle, TextTitle,
VirtualInfiniteGridRef, VirtualInfiniteGridRef,
} from '/@/renderer/components'; } from '/@/renderer/components';
import { JellyfinAlbumFilters } from '/@/renderer/features/albums/components/jellyfin-album-filters';
import { NavidromeAlbumFilters } from '/@/renderer/features/albums/components/navidrome-album-filters';
import { useMusicFolders } from '/@/renderer/features/shared';
import { useContainerQuery } from '/@/renderer/hooks';
import { import {
useCurrentServer, AlbumListFilter,
useAlbumListStore, useAlbumListStore,
useCurrentServer,
useSetAlbumFilters, useSetAlbumFilters,
useSetAlbumStore, useSetAlbumStore,
AlbumListFilter,
} from '/@/renderer/store'; } from '/@/renderer/store';
import { CardDisplayType } from '/@/renderer/types'; import { CardDisplayType } from '/@/renderer/types';
import { useMusicFolders } from '/@/renderer/features/shared';
import styled from 'styled-components';
import { NavidromeAlbumFilters } from '/@/renderer/features/albums/components/navidrome-album-filters';
import { JellyfinAlbumFilters } from '/@/renderer/features/albums/components/jellyfin-album-filters';
import { api } from '/@/renderer/api';
import { controller } from '/@/renderer/api/controller';
import { queryKeys } from '/@/renderer/api/query-keys';
import { useContainerQuery } from '/@/renderer/hooks';
const FILTERS = { const FILTERS = {
jellyfin: [ jellyfin: [
@ -171,10 +172,17 @@ export const AlbumListHeader = ({ gridRef }: AlbumListHeaderProps) => {
const handleSetMusicFolder = useCallback( const handleSetMusicFolder = useCallback(
(e: MouseEvent<HTMLButtonElement>) => { (e: MouseEvent<HTMLButtonElement>) => {
if (!e.currentTarget?.value) return; if (!e.currentTarget?.value) return;
const updatedFilters = setFilter({ musicFolderId: e.currentTarget.value });
let updatedFilters = null;
if (e.currentTarget.value === String(page.filter.musicFolderId)) {
updatedFilters = setFilter({ musicFolderId: undefined });
} else {
updatedFilters = setFilter({ musicFolderId: e.currentTarget.value });
}
handleFilterChange(updatedFilters); handleFilterChange(updatedFilters);
}, },
[handleFilterChange, setFilter], [handleFilterChange, page.filter.musicFolderId, setFilter],
); );
const handleSetOrder = useCallback( const handleSetOrder = useCallback(
@ -364,12 +372,28 @@ export const AlbumListHeader = ({ gridRef }: AlbumListHeaderProps) => {
</Popover.Dropdown> </Popover.Dropdown>
</Popover> </Popover>
</Flex> </Flex>
<Flex> <Flex gap="md">
<SearchInput <SearchInput
defaultValue={page.filter.searchTerm} defaultValue={page.filter.searchTerm}
openedWidth={cq.isLg ? 300 : cq.isMd ? 250 : cq.isSm ? 150 : 75} openedWidth={cq.isLg ? 300 : cq.isMd ? 250 : cq.isSm ? 150 : 75}
onChange={handleSearch} onChange={handleSearch}
/> />
<DropdownMenu>
<DropdownMenu.Target>
<Button
px="sm"
variant="subtle"
>
<RiMoreFill size={15} />
</Button>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
<DropdownMenu.Item disabled>Play</DropdownMenu.Item>
<DropdownMenu.Item disabled>Play last</DropdownMenu.Item>
<DropdownMenu.Item disabled>Play next</DropdownMenu.Item>
<DropdownMenu.Item disabled>Add to playlist</DropdownMenu.Item>
</DropdownMenu.Dropdown>
</DropdownMenu>
</Flex> </Flex>
</HeaderItems> </HeaderItems>
</PageHeader> </PageHeader>