|
@ -20,16 +20,15 @@ import ListViewType from '../viewtypes/ListViewType'; |
|
|
import GridViewType from '../viewtypes/GridViewType'; |
|
|
import GridViewType from '../viewtypes/GridViewType'; |
|
|
import { setStatus } from '../../redux/playerSlice'; |
|
|
import { setStatus } from '../../redux/playerSlice'; |
|
|
import { StyledNavItem } from '../shared/styled'; |
|
|
import { StyledNavItem } from '../shared/styled'; |
|
|
import useRouterQuery from '../../hooks/useRouterQuery'; |
|
|
import { setActive } from '../../redux/favoriteSlice'; |
|
|
|
|
|
|
|
|
const StarredView = () => { |
|
|
const StarredView = () => { |
|
|
const history = useHistory(); |
|
|
const history = useHistory(); |
|
|
const dispatch = useAppDispatch(); |
|
|
const dispatch = useAppDispatch(); |
|
|
const query = useRouterQuery(); |
|
|
|
|
|
const queryClient = useQueryClient(); |
|
|
const queryClient = useQueryClient(); |
|
|
const multiSelect = useAppSelector((state) => state.multiSelect); |
|
|
const multiSelect = useAppSelector((state) => state.multiSelect); |
|
|
const folder = useAppSelector((state) => state.folder); |
|
|
const folder = useAppSelector((state) => state.folder); |
|
|
const [page, setPage] = useState(query.get('page') || 'tracks'); |
|
|
const favorite = useAppSelector((state) => state.favorite); |
|
|
const [viewType, setViewType] = useState(settings.getSync('albumViewType') || 'list'); |
|
|
const [viewType, setViewType] = useState(settings.getSync('albumViewType') || 'list'); |
|
|
const [musicFolder, setMusicFolder] = useState(undefined); |
|
|
const [musicFolder, setMusicFolder] = useState(undefined); |
|
|
|
|
|
|
|
@ -49,10 +48,14 @@ const StarredView = () => { |
|
|
const [searchQuery, setSearchQuery] = useState(''); |
|
|
const [searchQuery, setSearchQuery] = useState(''); |
|
|
const filteredData = useSearchQuery( |
|
|
const filteredData = useSearchQuery( |
|
|
searchQuery, |
|
|
searchQuery, |
|
|
page === 'tracks' ? data?.song : page === 'albums' ? data?.album : data?.artist, |
|
|
favorite.active.tab === 'tracks' |
|
|
page === 'tracks' |
|
|
? data?.song |
|
|
|
|
|
: favorite.active.tab === 'albums' |
|
|
|
|
|
? data?.album |
|
|
|
|
|
: data?.artist, |
|
|
|
|
|
favorite.active.tab === 'tracks' |
|
|
? ['title', 'artist', 'album', 'name', 'genre'] |
|
|
? ['title', 'artist', 'album', 'name', 'genre'] |
|
|
: page === 'albums' |
|
|
: favorite.active.tab === 'albums' |
|
|
? ['name', 'artist', 'genre', 'year'] |
|
|
? ['name', 'artist', 'genre', 'year'] |
|
|
: ['name'] |
|
|
: ['name'] |
|
|
); |
|
|
); |
|
@ -66,14 +69,14 @@ const StarredView = () => { |
|
|
if (e.ctrlKey) { |
|
|
if (e.ctrlKey) { |
|
|
dispatch(toggleSelected(rowData)); |
|
|
dispatch(toggleSelected(rowData)); |
|
|
} else if (e.shiftKey) { |
|
|
} else if (e.shiftKey) { |
|
|
if (page === 'tracks') { |
|
|
if (favorite.active.tab === 'tracks') { |
|
|
dispatch(setRangeSelected(rowData)); |
|
|
dispatch(setRangeSelected(rowData)); |
|
|
if (searchQuery !== '') { |
|
|
if (searchQuery !== '') { |
|
|
dispatch(toggleRangeSelected(filteredData)); |
|
|
dispatch(toggleRangeSelected(filteredData)); |
|
|
} else { |
|
|
} else { |
|
|
dispatch(toggleRangeSelected(data.song)); |
|
|
dispatch(toggleRangeSelected(data.song)); |
|
|
} |
|
|
} |
|
|
} else if (page === 'albums') { |
|
|
} else if (favorite.active.tab === 'albums') { |
|
|
dispatch(setRangeSelected(rowData)); |
|
|
dispatch(setRangeSelected(rowData)); |
|
|
dispatch(toggleRangeSelected(searchQuery !== '' ? filteredData : data?.album)); |
|
|
dispatch(toggleRangeSelected(searchQuery !== '' ? filteredData : data?.album)); |
|
|
} |
|
|
} |
|
@ -87,7 +90,7 @@ const StarredView = () => { |
|
|
timeout = null; |
|
|
timeout = null; |
|
|
dispatch(clearSelected()); |
|
|
dispatch(clearSelected()); |
|
|
|
|
|
|
|
|
if (page === 'tracks') { |
|
|
if (favorite.active.tab === 'tracks') { |
|
|
dispatch( |
|
|
dispatch( |
|
|
setPlayQueueByRowClick({ |
|
|
setPlayQueueByRowClick({ |
|
|
entries: data.song, |
|
|
entries: data.song, |
|
@ -98,7 +101,7 @@ const StarredView = () => { |
|
|
); |
|
|
); |
|
|
dispatch(setStatus('PLAYING')); |
|
|
dispatch(setStatus('PLAYING')); |
|
|
dispatch(fixPlayer2Index()); |
|
|
dispatch(fixPlayer2Index()); |
|
|
} else if (page === 'albums') { |
|
|
} else if (favorite.active.tab === 'albums') { |
|
|
history.push(`/library/album/${e.id}`); |
|
|
history.push(`/library/album/${e.id}`); |
|
|
} else { |
|
|
} else { |
|
|
history.push(`/library/artist/${e.id}`); |
|
|
history.push(`/library/artist/${e.id}`); |
|
@ -138,7 +141,7 @@ const StarredView = () => { |
|
|
<GenericPageHeader |
|
|
<GenericPageHeader |
|
|
title="Favorites" |
|
|
title="Favorites" |
|
|
subtitle={ |
|
|
subtitle={ |
|
|
<Nav activeKey={page} onSelect={(e) => setPage(e)}> |
|
|
<Nav activeKey={favorite.active.tab} onSelect={(e) => dispatch(setActive({ tab: e }))}> |
|
|
<StyledNavItem eventKey="tracks">Tracks</StyledNavItem> |
|
|
<StyledNavItem eventKey="tracks">Tracks</StyledNavItem> |
|
|
<StyledNavItem eventKey="albums">Albums</StyledNavItem> |
|
|
<StyledNavItem eventKey="albums">Albums</StyledNavItem> |
|
|
<StyledNavItem eventKey="artists">Artists</StyledNavItem> |
|
|
<StyledNavItem eventKey="artists">Artists</StyledNavItem> |
|
@ -147,7 +150,7 @@ const StarredView = () => { |
|
|
searchQuery={searchQuery} |
|
|
searchQuery={searchQuery} |
|
|
handleSearch={(e: any) => setSearchQuery(e)} |
|
|
handleSearch={(e: any) => setSearchQuery(e)} |
|
|
clearSearchQuery={() => setSearchQuery('')} |
|
|
clearSearchQuery={() => setSearchQuery('')} |
|
|
showViewTypeButtons={page !== 'tracks'} |
|
|
showViewTypeButtons={favorite.active.tab !== 'tracks'} |
|
|
viewTypeSetting="album" |
|
|
viewTypeSetting="album" |
|
|
showSearchBar |
|
|
showSearchBar |
|
|
handleListClick={() => setViewType('list')} |
|
|
handleListClick={() => setViewType('list')} |
|
@ -159,7 +162,7 @@ const StarredView = () => { |
|
|
<PageLoader /> |
|
|
<PageLoader /> |
|
|
) : ( |
|
|
) : ( |
|
|
<> |
|
|
<> |
|
|
{page === 'tracks' && ( |
|
|
{favorite.active.tab === 'tracks' && ( |
|
|
<ListViewType |
|
|
<ListViewType |
|
|
data={searchQuery !== '' ? filteredData : data.song} |
|
|
data={searchQuery !== '' ? filteredData : data.song} |
|
|
tableColumns={settings.getSync('musicListColumns')} |
|
|
tableColumns={settings.getSync('musicListColumns')} |
|
@ -183,7 +186,7 @@ const StarredView = () => { |
|
|
handleFavorite={handleRowFavorite} |
|
|
handleFavorite={handleRowFavorite} |
|
|
/> |
|
|
/> |
|
|
)} |
|
|
)} |
|
|
{page === 'albums' && ( |
|
|
{favorite.active.tab === 'albums' && ( |
|
|
<> |
|
|
<> |
|
|
{viewType === 'list' && ( |
|
|
{viewType === 'list' && ( |
|
|
<ListViewType |
|
|
<ListViewType |
|
@ -230,7 +233,7 @@ const StarredView = () => { |
|
|
)} |
|
|
)} |
|
|
</> |
|
|
</> |
|
|
)} |
|
|
)} |
|
|
{page === 'artists' && ( |
|
|
{favorite.active.tab === 'artists' && ( |
|
|
<> |
|
|
<> |
|
|
{viewType === 'list' && ( |
|
|
{viewType === 'list' && ( |
|
|
<ListViewType |
|
|
<ListViewType |
|
|