Browse Source
- - Add genre sort to getAllAlbums api - Add genres to sortType picker - Add router query param for sortType on album list - Remove deprecated LibraryView pagemaster
jeffvli
3 years ago
8 changed files with 303 additions and 166 deletions
@ -0,0 +1,93 @@ |
|||||
|
import React, { useState } from 'react'; |
||||
|
import settings from 'electron-settings'; |
||||
|
import { useQuery } from 'react-query'; |
||||
|
import { useHistory } from 'react-router'; |
||||
|
import useSearchQuery from '../../hooks/useSearchQuery'; |
||||
|
import GenericPage from '../layout/GenericPage'; |
||||
|
import GenericPageHeader from '../layout/GenericPageHeader'; |
||||
|
import ListViewType from '../viewtypes/ListViewType'; |
||||
|
import PageLoader from '../loader/PageLoader'; |
||||
|
import { useAppDispatch } from '../../redux/hooks'; |
||||
|
import { |
||||
|
clearSelected, |
||||
|
setRangeSelected, |
||||
|
toggleRangeSelected, |
||||
|
toggleSelected, |
||||
|
} from '../../redux/multiSelectSlice'; |
||||
|
import { getGenres } from '../../api/api'; |
||||
|
|
||||
|
const GenreList = () => { |
||||
|
const dispatch = useAppDispatch(); |
||||
|
const history = useHistory(); |
||||
|
const { isLoading, isError, data: genres, error }: any = useQuery(['genreList'], () => |
||||
|
getGenres() |
||||
|
); |
||||
|
const [searchQuery, setSearchQuery] = useState(''); |
||||
|
const filteredData = useSearchQuery(searchQuery, genres, ['value']); |
||||
|
|
||||
|
let timeout: any = null; |
||||
|
const handleRowClick = (e: any, rowData: any) => { |
||||
|
if (timeout === null) { |
||||
|
timeout = window.setTimeout(() => { |
||||
|
timeout = null; |
||||
|
|
||||
|
if (e.ctrlKey) { |
||||
|
dispatch(toggleSelected(rowData)); |
||||
|
} else if (e.shiftKey) { |
||||
|
dispatch(setRangeSelected(rowData)); |
||||
|
dispatch(toggleRangeSelected(searchQuery !== '' ? filteredData : genres)); |
||||
|
} |
||||
|
}, 100); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
const handleRowDoubleClick = (rowData: any) => { |
||||
|
window.clearTimeout(timeout); |
||||
|
timeout = null; |
||||
|
|
||||
|
dispatch(clearSelected()); |
||||
|
history.push(`/library/album?sortType=${rowData.value}`); |
||||
|
}; |
||||
|
|
||||
|
return ( |
||||
|
<GenericPage |
||||
|
hideDivider |
||||
|
header={ |
||||
|
<GenericPageHeader |
||||
|
title="Genres" |
||||
|
searchQuery={searchQuery} |
||||
|
handleSearch={(e: any) => setSearchQuery(e)} |
||||
|
clearSearchQuery={() => setSearchQuery('')} |
||||
|
viewTypeSetting="genre" |
||||
|
showSearchBar |
||||
|
/> |
||||
|
} |
||||
|
> |
||||
|
{isLoading && <PageLoader />} |
||||
|
{isError && <div>Error: {error}</div>} |
||||
|
{!isLoading && !isError && ( |
||||
|
<ListViewType |
||||
|
data={searchQuery !== '' ? filteredData : genres} |
||||
|
tableColumns={settings.getSync('genreListColumns')} |
||||
|
rowHeight={Number(settings.getSync('genreListRowHeight'))} |
||||
|
fontSize={settings.getSync('genreListFontSize')} |
||||
|
handleRowClick={handleRowClick} |
||||
|
handleRowDoubleClick={handleRowDoubleClick} |
||||
|
listType="genre" |
||||
|
virtualized |
||||
|
disabledContextMenuOptions={[ |
||||
|
'addToQueue', |
||||
|
'moveSelectedTo', |
||||
|
'removeFromCurrent', |
||||
|
'addToPlaylist', |
||||
|
'deletePlaylist', |
||||
|
'addToFavorites', |
||||
|
'removeFromFavorites', |
||||
|
]} |
||||
|
/> |
||||
|
)} |
||||
|
</GenericPage> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default GenreList; |
||||
@ -1,133 +0,0 @@ |
|||||
import React, { useState } from 'react'; |
|
||||
import { Nav, SelectPicker } from 'rsuite'; |
|
||||
import { useQuery } from 'react-query'; |
|
||||
import VisibilitySensor from 'react-visibility-sensor'; |
|
||||
import settings from 'electron-settings'; |
|
||||
import _ from 'lodash'; |
|
||||
import useSearchQuery from '../../hooks/useSearchQuery'; |
|
||||
import { getAlbumsDirect, getArtists } from '../../api/api'; |
|
||||
import GenericPage from '../layout/GenericPage'; |
|
||||
import GenericPageHeader from '../layout/GenericPageHeader'; |
|
||||
import ArtistList from './ArtistList'; |
|
||||
import PageLoader from '../loader/PageLoader'; |
|
||||
|
|
||||
const ALBUM_SORT_TYPES = [ |
|
||||
{ label: 'A-Z (Name)', value: 'alphabeticalByName' }, |
|
||||
{ |
|
||||
label: 'A-Z (Artist)', |
|
||||
value: 'alphabeticalByArtist', |
|
||||
}, |
|
||||
{ label: 'Most Played', value: 'frequent' }, |
|
||||
{ label: 'Newly Added', value: 'newest' }, |
|
||||
{ label: 'Recently Played', value: 'recent' }, |
|
||||
]; |
|
||||
|
|
||||
const LibraryView = () => { |
|
||||
const [currentPage, setCurrentPage] = useState('albums'); |
|
||||
const [sortBy, setSortBy] = useState(null); |
|
||||
const [data, setData] = useState<any[]>([]); |
|
||||
const [offset, setOffset] = useState(0); |
|
||||
const [viewType, setViewType] = useState(settings.getSync('albumViewType')); |
|
||||
const { isLoading: isLoadingArtists, data: artists }: any = useQuery('artists', getArtists, { |
|
||||
enabled: currentPage === 'artists', |
|
||||
}); |
|
||||
const [searchQuery, setSearchQuery] = useState(''); |
|
||||
const filteredData = useSearchQuery( |
|
||||
searchQuery, |
|
||||
currentPage === 'artists' ? artists : currentPage === 'albums' ? data : data, |
|
||||
['name', 'artist'] |
|
||||
); |
|
||||
|
|
||||
const onChange = (isVisible: boolean) => { |
|
||||
if (isVisible) { |
|
||||
setOffset(offset + 50); |
|
||||
|
|
||||
setTimeout(async () => { |
|
||||
const res = await getAlbumsDirect({ |
|
||||
type: sortBy || 'random', |
|
||||
size: 50, |
|
||||
offset, |
|
||||
}); |
|
||||
|
|
||||
const combinedData = data.concat(res); |
|
||||
|
|
||||
// Ensure that no duplicates are added in the case of random fetching
|
|
||||
const uniqueCombinedData = _.uniqBy(combinedData, (e: any) => e.id); |
|
||||
|
|
||||
return setData(uniqueCombinedData); |
|
||||
}, 0); |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
const handleNavClick = (e: React.SetStateAction<string>) => { |
|
||||
setData([]); |
|
||||
setOffset(0); |
|
||||
setCurrentPage(e); |
|
||||
}; |
|
||||
|
|
||||
return ( |
|
||||
<GenericPage |
|
||||
header={ |
|
||||
<GenericPageHeader |
|
||||
title="Library" |
|
||||
subtitle={ |
|
||||
<Nav activeKey={currentPage} onSelect={handleNavClick}> |
|
||||
<Nav.Item eventKey="albums">Albums</Nav.Item> |
|
||||
<Nav.Item eventKey="artists">Artists</Nav.Item> |
|
||||
<Nav.Item eventKey="genres">Genres</Nav.Item> |
|
||||
</Nav> |
|
||||
} |
|
||||
subsidetitle={ |
|
||||
currentPage === 'albums' ? ( |
|
||||
<SelectPicker |
|
||||
data={ALBUM_SORT_TYPES} |
|
||||
searchable={false} |
|
||||
placeholder="Sort Type" |
|
||||
menuAutoWidth |
|
||||
onChange={(value) => { |
|
||||
setData([]); |
|
||||
setOffset(0); |
|
||||
setSortBy(value); |
|
||||
}} |
|
||||
/> |
|
||||
) : undefined |
|
||||
} |
|
||||
searchQuery={searchQuery} |
|
||||
handleSearch={(e: any) => setSearchQuery(e)} |
|
||||
clearSearchQuery={() => setSearchQuery('')} |
|
||||
showViewTypeButtons={currentPage === 'albums'} |
|
||||
viewTypeSetting="album" |
|
||||
showSearchBar |
|
||||
handleListClick={() => setViewType('list')} |
|
||||
handleGridClick={() => setViewType('grid')} |
|
||||
/> |
|
||||
} |
|
||||
> |
|
||||
{isLoadingArtists && <PageLoader />} |
|
||||
|
|
||||
{artists && ( |
|
||||
<> |
|
||||
{currentPage === 'artists' && ( |
|
||||
<ArtistList viewType={viewType} data={searchQuery === '' ? artists : filteredData} /> |
|
||||
)} |
|
||||
</> |
|
||||
)} |
|
||||
|
|
||||
{data.length !== 1 && searchQuery === '' && currentPage === 'albums' && ( |
|
||||
<VisibilitySensor onChange={onChange}> |
|
||||
<div |
|
||||
style={{ |
|
||||
textAlign: 'center', |
|
||||
marginTop: '25px', |
|
||||
marginBottom: '25px', |
|
||||
}} |
|
||||
> |
|
||||
<PageLoader size="md" /> |
|
||||
</div> |
|
||||
</VisibilitySensor> |
|
||||
)} |
|
||||
</GenericPage> |
|
||||
); |
|
||||
}; |
|
||||
|
|
||||
export default LibraryView; |
|
||||
Loading…
Reference in new issue