Browse Source
- Add settings for pagination size - Add view redux slice - Add pagination componentmaster
jeffvli
3 years ago
committed by
Jeff
Jeff
13 changed files with 672 additions and 30 deletions
@ -0,0 +1,356 @@ |
|||
import React, { useEffect, useRef, useState } from 'react'; |
|||
import _ from 'lodash'; |
|||
import settings from 'electron-settings'; |
|||
import { ButtonToolbar } from 'rsuite'; |
|||
import { useQuery, useQueryClient } from 'react-query'; |
|||
import ListViewType from '../viewtypes/ListViewType'; |
|||
import useSearchQuery from '../../hooks/useSearchQuery'; |
|||
import GenericPageHeader from '../layout/GenericPageHeader'; |
|||
import GenericPage from '../layout/GenericPage'; |
|||
import { useAppDispatch, useAppSelector } from '../../redux/hooks'; |
|||
import { |
|||
toggleSelected, |
|||
setRangeSelected, |
|||
toggleRangeSelected, |
|||
clearSelected, |
|||
} from '../../redux/multiSelectSlice'; |
|||
import { StyledInputPicker, StyledInputPickerContainer, StyledTag } from '../shared/styled'; |
|||
import { RefreshButton } from '../shared/ToolbarButtons'; |
|||
import { setSearchQuery } from '../../redux/miscSlice'; |
|||
import { apiController } from '../../api/controller'; |
|||
import { Item } from '../../types'; |
|||
import useColumnSort from '../../hooks/useColumnSort'; |
|||
import { fixPlayer2Index, setPlayQueueByRowClick, setStar } from '../../redux/playQueueSlice'; |
|||
import { setFilter, setPagination } from '../../redux/viewSlice'; |
|||
import { setStatus } from '../../redux/playerSlice'; |
|||
|
|||
export const MUSIC_SORT_TYPES = [ |
|||
{ label: 'A-Z (Name)', value: 'alphabeticalByName', role: 'Default' }, |
|||
{ label: 'A-Z (Album)', value: 'alphabeticalByAlbum', role: 'Default' }, |
|||
{ label: 'A-Z (Album Artist)', value: 'alphabeticalByArtist', role: 'Default' }, |
|||
{ label: 'A-Z (Artist)', value: 'alphabeticalByTrackArtist', replacement: 'Artist' }, |
|||
{ label: 'Most Played', value: 'frequent', role: 'Default' }, |
|||
{ label: 'Random', value: 'random', role: 'Default' }, |
|||
{ label: 'Recently Added', value: 'newest', role: 'Default' }, |
|||
{ label: 'Recently Played', value: 'recent', role: 'Default' }, |
|||
{ label: 'Release Date', value: 'year', role: 'Default' }, |
|||
]; |
|||
|
|||
const MusicList = () => { |
|||
const dispatch = useAppDispatch(); |
|||
const queryClient = useQueryClient(); |
|||
const folder = useAppSelector((state) => state.folder); |
|||
const config = useAppSelector((state) => state.config); |
|||
const misc = useAppSelector((state) => state.misc); |
|||
const view = useAppSelector((state) => state.view); |
|||
const [isRefreshing, setIsRefreshing] = useState(false); |
|||
const [sortTypes, setSortTypes] = useState<any[]>([]); |
|||
const [musicFolder, setMusicFolder] = useState({ loaded: false, id: undefined }); |
|||
|
|||
const musicFilterPickerContainerRef = useRef(null); |
|||
const [currentQueryKey, setCurrentQueryKey] = useState<any>(['musicList']); |
|||
|
|||
useEffect(() => { |
|||
if (folder.applied.music) { |
|||
setMusicFolder({ loaded: true, id: folder.musicFolder }); |
|||
} else { |
|||
setMusicFolder({ loaded: true, id: undefined }); |
|||
} |
|||
|
|||
setCurrentQueryKey([ |
|||
'musicList', |
|||
view.music.filter, |
|||
view.music.pagination.activePage, |
|||
musicFolder.id, |
|||
]); |
|||
}, [ |
|||
folder.applied.music, |
|||
folder.musicFolder, |
|||
musicFolder.id, |
|||
view.music.filter, |
|||
view.music.pagination.activePage, |
|||
]); |
|||
|
|||
const { isLoading, isError, data: musicData, error }: any = useQuery( |
|||
currentQueryKey, |
|||
() => |
|||
view.music.filter === 'random' || view.music.pagination.recordsPerPage !== 0 |
|||
? apiController({ |
|||
serverType: config.serverType, |
|||
endpoint: 'getSongs', |
|||
args: { |
|||
type: view.music.filter, |
|||
size: |
|||
view.music.pagination.recordsPerPage === 0 |
|||
? 100 |
|||
: view.music.pagination.recordsPerPage, |
|||
offset: (view.music.pagination.activePage - 1) * view.music.pagination.recordsPerPage, |
|||
recursive: false, |
|||
musicFolderId: musicFolder.id, |
|||
order: [ |
|||
'alphabeticalByName', |
|||
'alphabeticalByAlbum', |
|||
'alphabeticalByArtist', |
|||
'alphabeticalByTrackArtist', |
|||
'newest', |
|||
].includes(view.music.filter) |
|||
? 'asc' |
|||
: 'desc', |
|||
}, |
|||
}) |
|||
: apiController({ |
|||
serverType: config.serverType, |
|||
endpoint: 'getSongs', |
|||
args: { |
|||
type: view.music.filter, |
|||
recursive: true, |
|||
musicFolderId: musicFolder.id, |
|||
}, |
|||
}), |
|||
{ |
|||
// Due to extensive fetch times without pagination, we want to cache for the entire session
|
|||
cacheTime: view.music.pagination.recordsPerPage !== 0 ? 600000 : Infinity, |
|||
staleTime: view.music.pagination.recordsPerPage !== 0 ? 600000 : Infinity, |
|||
enabled: currentQueryKey !== ['musicList'] && musicFolder.loaded, |
|||
onSuccess: (e) => { |
|||
dispatch( |
|||
setPagination({ |
|||
listType: Item.Music, |
|||
data: { |
|||
pages: Math.floor(e.totalRecordCount / view.music.pagination.recordsPerPage) + 1, |
|||
}, |
|||
}) |
|||
); |
|||
}, |
|||
} |
|||
); |
|||
|
|||
const searchedData = useSearchQuery(misc.searchQuery, musicData?.data, [ |
|||
'title', |
|||
'artist', |
|||
'genre', |
|||
'year', |
|||
]); |
|||
|
|||
const { sortedData } = useColumnSort(musicData?.data, Item.Album, view.music.sort); |
|||
|
|||
useEffect(() => { |
|||
setSortTypes(MUSIC_SORT_TYPES); |
|||
}, []); |
|||
|
|||
let timeout: any = null; |
|||
const handleRowClick = (e: any, rowData: any, tableData: any) => { |
|||
if (timeout === null) { |
|||
timeout = window.setTimeout(() => { |
|||
timeout = null; |
|||
|
|||
if (e.ctrlKey) { |
|||
dispatch(toggleSelected(rowData)); |
|||
} else if (e.shiftKey) { |
|||
dispatch(setRangeSelected(rowData)); |
|||
dispatch(toggleRangeSelected(tableData)); |
|||
} |
|||
}, 100); |
|||
} |
|||
}; |
|||
|
|||
const handleRowDoubleClick = (rowData: any) => { |
|||
window.clearTimeout(timeout); |
|||
timeout = null; |
|||
|
|||
dispatch(clearSelected()); |
|||
dispatch( |
|||
setPlayQueueByRowClick({ |
|||
entries: musicData.data, |
|||
currentIndex: rowData.rowIndex, |
|||
currentSongId: rowData.id, |
|||
uniqueSongId: rowData.uniqueId, |
|||
filters: config.playback.filters, |
|||
}) |
|||
); |
|||
dispatch(setStatus('PLAYING')); |
|||
dispatch(fixPlayer2Index()); |
|||
}; |
|||
|
|||
const handleRefresh = async () => { |
|||
setIsRefreshing(true); |
|||
await queryClient.removeQueries(['musicList'], { exact: false }); |
|||
setIsRefreshing(false); |
|||
}; |
|||
|
|||
const handleRowFavorite = async (rowData: any) => { |
|||
if (!rowData.starred) { |
|||
await apiController({ |
|||
serverType: config.serverType, |
|||
endpoint: 'star', |
|||
args: { id: rowData.id, type: 'music' }, |
|||
}); |
|||
dispatch(setStar({ id: [rowData.id], type: 'star' })); |
|||
|
|||
queryClient.setQueryData(currentQueryKey, (oldData: any) => { |
|||
const starredIndices = _.keys(_.pickBy(oldData.data, { id: rowData.id })); |
|||
starredIndices.forEach((index) => { |
|||
oldData.data[index].starred = Date.now(); |
|||
}); |
|||
|
|||
return oldData; |
|||
}); |
|||
} else { |
|||
await apiController({ |
|||
serverType: config.serverType, |
|||
endpoint: 'unstar', |
|||
args: { id: rowData.id, type: 'music' }, |
|||
}); |
|||
dispatch(setStar({ id: [rowData.id], type: 'unstar' })); |
|||
|
|||
queryClient.setQueryData(currentQueryKey, (oldData: any) => { |
|||
const starredIndices = _.keys(_.pickBy(oldData.data, { id: rowData.id })); |
|||
starredIndices.forEach((index) => { |
|||
oldData.data[index].starred = undefined; |
|||
}); |
|||
|
|||
return oldData; |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
const handleRowRating = (rowData: any, e: number) => { |
|||
apiController({ |
|||
serverType: config.serverType, |
|||
endpoint: 'setRating', |
|||
args: { ids: [rowData.id], rating: e }, |
|||
}); |
|||
|
|||
queryClient.setQueryData(currentQueryKey, (oldData: any) => { |
|||
const ratedIndices = _.keys(_.pickBy(oldData.data, { id: rowData.id })); |
|||
ratedIndices.forEach((index) => { |
|||
oldData.data[index].userRating = e; |
|||
}); |
|||
|
|||
return oldData; |
|||
}); |
|||
}; |
|||
|
|||
return ( |
|||
<GenericPage |
|||
hideDivider |
|||
header={ |
|||
<GenericPageHeader |
|||
title={ |
|||
<> |
|||
Songs{' '} |
|||
<StyledTag style={{ verticalAlign: 'middle', cursor: 'default' }}> |
|||
{musicData?.totalRecordCount || '...'} |
|||
</StyledTag> |
|||
</> |
|||
} |
|||
subtitle={ |
|||
<> |
|||
<StyledInputPickerContainer ref={musicFilterPickerContainerRef}> |
|||
<ButtonToolbar> |
|||
<StyledInputPicker |
|||
container={() => musicFilterPickerContainerRef.current} |
|||
size="sm" |
|||
width={180} |
|||
defaultValue={view.music.filter} |
|||
value={view.music.filter} |
|||
data={sortTypes || MUSIC_SORT_TYPES} |
|||
cleanable={false} |
|||
placeholder="Sort Type" |
|||
onChange={async (value: string) => { |
|||
setIsRefreshing(true); |
|||
await queryClient.cancelQueries([ |
|||
'musicList', |
|||
view.music.filter, |
|||
musicFolder.id, |
|||
]); |
|||
dispatch(setSearchQuery('')); |
|||
dispatch(setFilter({ listType: Item.Music, data: value })); |
|||
dispatch(setPagination({ listType: Item.Music, data: { activePage: 1 } })); |
|||
localStorage.setItem('scroll_list_musicList', '0'); |
|||
setIsRefreshing(false); |
|||
}} |
|||
/> |
|||
<RefreshButton onClick={handleRefresh} size="sm" loading={isRefreshing} /> |
|||
</ButtonToolbar> |
|||
</StyledInputPickerContainer> |
|||
</> |
|||
} |
|||
/> |
|||
} |
|||
> |
|||
{isError && <div>Error: {error}</div>} |
|||
{!isError && ( |
|||
<ListViewType |
|||
data={misc.searchQuery !== '' ? searchedData : sortedData} |
|||
tableColumns={config.lookAndFeel.listView.music.columns} |
|||
rowHeight={config.lookAndFeel.listView.music.rowHeight} |
|||
fontSize={config.lookAndFeel.listView.music.fontSize} |
|||
handleRowClick={handleRowClick} |
|||
handleRowDoubleClick={handleRowDoubleClick} |
|||
handleRating={handleRowRating} |
|||
cacheImages={{ |
|||
enabled: settings.getSync('cacheImages'), |
|||
cacheType: 'album', |
|||
cacheIdProperty: 'albumId', |
|||
}} |
|||
page="musicListPage" |
|||
listType="music" |
|||
virtualized |
|||
disabledContextMenuOptions={[ |
|||
'moveSelectedTo', |
|||
'removeSelected', |
|||
'deletePlaylist', |
|||
'viewInModal', |
|||
'viewInFolder', |
|||
]} |
|||
loading={isLoading} |
|||
handleFavorite={handleRowFavorite} |
|||
initialScrollOffset={Number(localStorage.getItem('scroll_list_musicList'))} |
|||
onScroll={(scrollIndex: number) => { |
|||
localStorage.setItem('scroll_list_musicList', String(Math.abs(scrollIndex))); |
|||
}} |
|||
paginationProps={ |
|||
view.music.pagination.recordsPerPage !== 0 && { |
|||
pages: view.music.pagination.pages, |
|||
activePage: view.music.pagination.activePage, |
|||
maxButtons: 3, |
|||
prev: true, |
|||
next: true, |
|||
ellipsis: true, |
|||
boundaryLinks: true, |
|||
startIndex: |
|||
view.music.pagination.recordsPerPage * (view.music.pagination.activePage - 1) + 1, |
|||
endIndex: view.music.pagination.recordsPerPage * view.music.pagination.activePage, |
|||
handleGoToButton: (e: number) => { |
|||
localStorage.setItem('scroll_list_musicList', '0'); |
|||
dispatch( |
|||
setPagination({ |
|||
listType: Item.Music, |
|||
data: { |
|||
activePage: e, |
|||
}, |
|||
}) |
|||
); |
|||
}, |
|||
onSelect: async (e: number) => { |
|||
localStorage.setItem('scroll_list_musicList', '0'); |
|||
await queryClient.cancelQueries(['musicList'], { active: true }); |
|||
dispatch( |
|||
setPagination({ |
|||
listType: Item.Music, |
|||
data: { |
|||
activePage: e, |
|||
}, |
|||
}) |
|||
); |
|||
}, |
|||
} |
|||
} |
|||
/> |
|||
)} |
|||
</GenericPage> |
|||
); |
|||
}; |
|||
|
|||
export default MusicList; |
|||
@ -0,0 +1,102 @@ |
|||
import React from 'react'; |
|||
import { ButtonGroup, ButtonToolbar, FlexboxGrid, Icon, Whisper } from 'rsuite'; |
|||
import { |
|||
SecondaryTextWrapper, |
|||
StyledButton, |
|||
StyledIconButton, |
|||
StyledPagination, |
|||
StyledPopover, |
|||
} from './styled'; |
|||
|
|||
const Paginator = ({ startIndex, endIndex, handleGoToButton, children, ...rest }: any) => { |
|||
return ( |
|||
<> |
|||
<FlexboxGrid justify="space-between" style={{ paddingLeft: '10px', paddingTop: '10px' }}> |
|||
<FlexboxGrid.Item style={{ alignSelf: 'center' }}> |
|||
{children} |
|||
<SecondaryTextWrapper subtitle="true"> |
|||
{startIndex && startIndex} |
|||
{startIndex && endIndex && ` - ${endIndex}`} |
|||
</SecondaryTextWrapper> |
|||
</FlexboxGrid.Item> |
|||
<FlexboxGrid.Item style={{ alignSelf: 'center' }}> |
|||
<StyledPagination {...rest} /> |
|||
{handleGoToButton && ( |
|||
<Whisper |
|||
enterable |
|||
preventOverflow |
|||
placement="autoVerticalEnd" |
|||
trigger="click" |
|||
speaker={ |
|||
<StyledPopover> |
|||
<ButtonGroup> |
|||
<StyledButton |
|||
appearance="subtle" |
|||
onClick={() => |
|||
handleGoToButton( |
|||
rest.activePage + 5 < rest.pages ? rest.activePage + 5 : rest.pages |
|||
) |
|||
} |
|||
> |
|||
+5 |
|||
</StyledButton> |
|||
<StyledButton |
|||
appearance="subtle" |
|||
onClick={() => |
|||
handleGoToButton( |
|||
rest.activePage + 15 < rest.pages ? rest.activePage + 15 : rest.pages |
|||
) |
|||
} |
|||
> |
|||
+15 |
|||
</StyledButton> |
|||
<StyledButton |
|||
appearance="subtle" |
|||
onClick={() => |
|||
handleGoToButton( |
|||
rest.activePage + 50 < rest.pages ? rest.activePage + 50 : rest.pages |
|||
) |
|||
} |
|||
> |
|||
+50 |
|||
</StyledButton> |
|||
</ButtonGroup> |
|||
<ButtonToolbar> |
|||
<StyledButton |
|||
appearance="subtle" |
|||
onClick={() => |
|||
handleGoToButton(rest.activePage - 5 > 1 ? rest.activePage - 5 : 1) |
|||
} |
|||
> |
|||
-5 |
|||
</StyledButton> |
|||
<StyledButton |
|||
appearance="subtle" |
|||
onClick={() => |
|||
handleGoToButton(rest.activePage - 15 > 1 ? rest.activePage - 15 : 1) |
|||
} |
|||
> |
|||
-15 |
|||
</StyledButton> |
|||
<StyledButton |
|||
appearance="subtle" |
|||
onClick={() => |
|||
handleGoToButton(rest.activePage - 50 > 1 ? rest.activePage - 50 : 1) |
|||
} |
|||
> |
|||
-50 |
|||
</StyledButton> |
|||
</ButtonToolbar> |
|||
</StyledPopover> |
|||
} |
|||
> |
|||
<StyledIconButton size="sm" appearance="subtle" icon={<Icon icon="caret-right" />} /> |
|||
</Whisper> |
|||
)} |
|||
</FlexboxGrid.Item> |
|||
</FlexboxGrid> |
|||
</> |
|||
); |
|||
}; |
|||
|
|||
export default Paginator; |
|||
@ -0,0 +1,59 @@ |
|||
import { createSlice, PayloadAction } from '@reduxjs/toolkit'; |
|||
import settings from 'electron-settings'; |
|||
import { mockSettings } from '../shared/mockSettings'; |
|||
import { Item, Sort, Pagination } from '../types'; |
|||
|
|||
const parsedSettings: any = process.env.NODE_ENV === 'test' ? mockSettings : settings.getSync(); |
|||
|
|||
export interface View { |
|||
music: { |
|||
filter: string; |
|||
sort: Sort; |
|||
pagination: Pagination; |
|||
}; |
|||
} |
|||
|
|||
const initialState: any = { |
|||
music: { |
|||
filter: String(parsedSettings.musicSortDefault) || 'random', |
|||
sort: { |
|||
column: undefined, |
|||
type: 'asc', |
|||
}, |
|||
pagination: { |
|||
recordsPerPage: parsedSettings.pagination.music, |
|||
activePage: 1, |
|||
pages: 1, |
|||
}, |
|||
}, |
|||
}; |
|||
|
|||
const viewSlice = createSlice({ |
|||
name: 'view', |
|||
initialState, |
|||
reducers: { |
|||
setFilter: (state, action: PayloadAction<{ listType: Item; data: any }>) => { |
|||
if (action.payload.listType === Item.Music) { |
|||
state.music.filter = action.payload.data; |
|||
} |
|||
}, |
|||
|
|||
setPagination: ( |
|||
state, |
|||
action: PayloadAction<{ |
|||
listType: Item; |
|||
data: { enabled?: boolean; activePage?: number; pages?: number; recordsPerPage?: number }; |
|||
}> |
|||
) => { |
|||
if (action.payload.listType === Item.Music) { |
|||
state.music.pagination = { |
|||
...state.music.pagination, |
|||
...action.payload.data, |
|||
}; |
|||
} |
|||
}, |
|||
}, |
|||
}); |
|||
|
|||
export const { setFilter, setPagination } = viewSlice.actions; |
|||
export default viewSlice.reducer; |
|||
Loading…
Reference in new issue