Browse Source
- add artist view/route - add album view/route - add links from other components to artist/album routes - separate viewtype settings by type - add list types for albumsmaster
jeffvli
3 years ago
20 changed files with 930 additions and 160 deletions
@ -0,0 +1,161 @@ |
|||
import React, { useState } from 'react'; |
|||
import settings from 'electron-settings'; |
|||
import { ButtonToolbar, Tag } from 'rsuite'; |
|||
import { useQuery } from 'react-query'; |
|||
import { useParams, useHistory } from 'react-router-dom'; |
|||
import { |
|||
DeleteButton, |
|||
EditButton, |
|||
PlayAppendButton, |
|||
PlayButton, |
|||
PlayShuffleAppendButton, |
|||
PlayShuffleButton, |
|||
} from '../shared/ToolbarButtons'; |
|||
import { getAlbum } from '../../api/api'; |
|||
import { useAppDispatch } from '../../redux/hooks'; |
|||
import { fixPlayer2Index, setPlayQueue } from '../../redux/playQueueSlice'; |
|||
import { |
|||
toggleSelected, |
|||
setRangeSelected, |
|||
toggleRangeSelected, |
|||
setSelected, |
|||
clearSelected, |
|||
} from '../../redux/multiSelectSlice'; |
|||
import useSearchQuery from '../../hooks/useSearchQuery'; |
|||
import GenericPage from '../layout/GenericPage'; |
|||
import ListViewType from '../viewtypes/ListViewType'; |
|||
import Loader from '../loader/Loader'; |
|||
import GenericPageHeader from '../layout/GenericPageHeader'; |
|||
import { TagLink } from './styled'; |
|||
|
|||
interface AlbumParams { |
|||
id: string; |
|||
} |
|||
|
|||
const AlbumView = () => { |
|||
const dispatch = useAppDispatch(); |
|||
const history = useHistory(); |
|||
const { id } = useParams<AlbumParams>(); |
|||
const { isLoading, isError, data, error }: any = useQuery(['album', id], () => |
|||
getAlbum(id) |
|||
); |
|||
const [searchQuery, setSearchQuery] = useState(''); |
|||
const filteredData = useSearchQuery(searchQuery, data?.song, [ |
|||
'title', |
|||
'artist', |
|||
'album', |
|||
'genre', |
|||
]); |
|||
|
|||
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(data.song)); |
|||
} else { |
|||
dispatch(setSelected(rowData)); |
|||
} |
|||
}, 300); |
|||
} |
|||
}; |
|||
|
|||
const handleRowDoubleClick = (e: any) => { |
|||
window.clearTimeout(timeout); |
|||
timeout = null; |
|||
const newPlayQueue = data.song.slice([e.index], data.song.length); |
|||
|
|||
dispatch(clearSelected()); |
|||
dispatch(setPlayQueue(newPlayQueue)); |
|||
dispatch(fixPlayer2Index()); |
|||
}; |
|||
|
|||
if (isLoading) { |
|||
return <Loader />; |
|||
} |
|||
|
|||
if (isError) { |
|||
return <span>Error: {error.message}</span>; |
|||
} |
|||
|
|||
return ( |
|||
<GenericPage |
|||
header={ |
|||
<GenericPageHeader |
|||
image={data.image} |
|||
title={data.name} |
|||
subtitle={ |
|||
<div> |
|||
<div |
|||
style={{ |
|||
overflow: 'hidden', |
|||
textOverflow: 'ellipsis', |
|||
whiteSpace: 'nowrap', |
|||
}} |
|||
> |
|||
{data.artist && ( |
|||
<Tag> |
|||
<TagLink |
|||
onClick={() => |
|||
history.push(`/library/artist/${data.artistId}`) |
|||
} |
|||
> |
|||
Artist: {data.artist} |
|||
</TagLink> |
|||
</Tag> |
|||
)} |
|||
{data.year && ( |
|||
<Tag> |
|||
<TagLink>Year: {data.year}</TagLink> |
|||
</Tag> |
|||
)} |
|||
{data.genre && ( |
|||
<Tag> |
|||
<TagLink>Genre: {data.genre}</TagLink> |
|||
</Tag> |
|||
)} |
|||
</div> |
|||
<div style={{ marginTop: '10px' }}> |
|||
<ButtonToolbar> |
|||
<PlayButton appearance="primary" size="lg" circle /> |
|||
<PlayShuffleButton /> |
|||
<PlayAppendButton /> |
|||
<PlayShuffleAppendButton /> |
|||
<EditButton /> |
|||
<DeleteButton /> |
|||
</ButtonToolbar> |
|||
</div> |
|||
</div> |
|||
} |
|||
searchQuery={searchQuery} |
|||
handleSearch={(e: any) => setSearchQuery(e)} |
|||
clearSearchQuery={() => setSearchQuery('')} |
|||
showSearchBar |
|||
/> |
|||
} |
|||
> |
|||
<ListViewType |
|||
data={searchQuery !== '' ? filteredData : data.song} |
|||
tableColumns={settings.getSync('songListColumns')} |
|||
handleRowClick={handleRowClick} |
|||
handleRowDoubleClick={handleRowDoubleClick} |
|||
tableHeight={700} |
|||
virtualized |
|||
rowHeight={Number(settings.getSync('songListRowHeight'))} |
|||
fontSize={Number(settings.getSync('songListFontSize'))} |
|||
cacheImages={{ |
|||
enabled: settings.getSync('cacheImages'), |
|||
cacheType: 'album', |
|||
}} |
|||
/> |
|||
</GenericPage> |
|||
); |
|||
}; |
|||
|
|||
export default AlbumView; |
|||
@ -0,0 +1,212 @@ |
|||
import React, { useState } from 'react'; |
|||
import settings from 'electron-settings'; |
|||
import { ButtonToolbar, Tag, Whisper, Button, Popover, TagGroup } from 'rsuite'; |
|||
import { useQuery } from 'react-query'; |
|||
import { useParams, useHistory } from 'react-router-dom'; |
|||
import { |
|||
PlayAppendButton, |
|||
PlayButton, |
|||
PlayShuffleAppendButton, |
|||
PlayShuffleButton, |
|||
EditButton, |
|||
} from '../shared/ToolbarButtons'; |
|||
import { getArtist, getArtistInfo } from '../../api/api'; |
|||
import { useAppDispatch } from '../../redux/hooks'; |
|||
import { fixPlayer2Index, setPlayQueue } from '../../redux/playQueueSlice'; |
|||
import { |
|||
toggleSelected, |
|||
setRangeSelected, |
|||
toggleRangeSelected, |
|||
setSelected, |
|||
clearSelected, |
|||
} from '../../redux/multiSelectSlice'; |
|||
import useSearchQuery from '../../hooks/useSearchQuery'; |
|||
import GenericPage from '../layout/GenericPage'; |
|||
import ListViewType from '../viewtypes/ListViewType'; |
|||
import GridViewType from '../viewtypes/GridViewType'; |
|||
import Loader from '../loader/Loader'; |
|||
import GenericPageHeader from '../layout/GenericPageHeader'; |
|||
import CustomTooltip from '../shared/CustomTooltip'; |
|||
import { TagLink } from './styled'; |
|||
|
|||
interface ArtistParams { |
|||
id: string; |
|||
} |
|||
|
|||
const ArtistView = () => { |
|||
const dispatch = useAppDispatch(); |
|||
const history = useHistory(); |
|||
const [viewType, setViewType] = useState( |
|||
settings.getSync('albumViewType') || 'list' |
|||
); |
|||
const { id } = useParams<ArtistParams>(); |
|||
const { isLoading, isError, data, error }: any = useQuery( |
|||
['artist', id], |
|||
() => getArtist(id) |
|||
); |
|||
const { |
|||
isLoading: isLoadingAI, |
|||
isError: isErrorAI, |
|||
data: artistInfo, |
|||
error: errorAI, |
|||
}: any = useQuery(['artistInfo', id], () => getArtistInfo(id, 8)); |
|||
|
|||
const [searchQuery, setSearchQuery] = useState(''); |
|||
const filteredData = useSearchQuery(searchQuery, data?.song, [ |
|||
'title', |
|||
'artist', |
|||
'album', |
|||
'genre', |
|||
]); |
|||
|
|||
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(data.album)); |
|||
} else { |
|||
dispatch(setSelected(rowData)); |
|||
} |
|||
}, 300); |
|||
} |
|||
}; |
|||
|
|||
const handleRowDoubleClick = (e: any) => { |
|||
window.clearTimeout(timeout); |
|||
timeout = null; |
|||
const newPlayQueue = data.album.slice([e.index], data.album.length); |
|||
|
|||
dispatch(clearSelected()); |
|||
dispatch(setPlayQueue(newPlayQueue)); |
|||
dispatch(fixPlayer2Index()); |
|||
}; |
|||
|
|||
if (isLoading || isLoadingAI) { |
|||
return <Loader />; |
|||
} |
|||
|
|||
if (isError || isErrorAI) { |
|||
return ( |
|||
<span> |
|||
Error: {error.message} {errorAI.message} |
|||
</span> |
|||
); |
|||
} |
|||
|
|||
return ( |
|||
<GenericPage |
|||
header={ |
|||
<GenericPageHeader |
|||
image={data.image} |
|||
imageHeight={145} |
|||
title={data.name} |
|||
subtitle={ |
|||
<> |
|||
<CustomTooltip |
|||
text={artistInfo.biography |
|||
?.replace(/<[^>]*>/, '') |
|||
.replace('Read more on Last.fm</a>', '')} |
|||
placement="bottomStart" |
|||
> |
|||
<span> |
|||
{artistInfo.biography |
|||
?.replace(/<[^>]*>/, '') |
|||
.replace('Read more on Last.fm</a>', '') !== '' |
|||
? `${artistInfo.biography |
|||
?.replace(/<[^>]*>/, '') |
|||
.replace('Read more on Last.fm</a>', '')}` |
|||
: 'No artist biography found'} |
|||
</span> |
|||
</CustomTooltip> |
|||
<div style={{ marginTop: '10px' }}> |
|||
<ButtonToolbar> |
|||
<PlayButton appearance="primary" size="lg" circle /> |
|||
<PlayShuffleButton /> |
|||
<PlayAppendButton /> |
|||
<PlayShuffleAppendButton /> |
|||
<EditButton style={{ marginRight: '10px' }} /> |
|||
<Whisper |
|||
placement="bottomStart" |
|||
trigger="click" |
|||
speaker={ |
|||
<Popover style={{ width: '400px' }}> |
|||
<TagGroup> |
|||
{artistInfo.similarArtist?.map((artist: any) => ( |
|||
<Tag key={artist.id}> |
|||
<TagLink |
|||
onClick={() => |
|||
history.push(`/library/artist/${artist.id}`) |
|||
} |
|||
> |
|||
{artist.name} |
|||
</TagLink> |
|||
</Tag> |
|||
))} |
|||
</TagGroup> |
|||
</Popover> |
|||
} |
|||
> |
|||
<Button>Related Artists</Button> |
|||
</Whisper> |
|||
</ButtonToolbar> |
|||
</div> |
|||
</> |
|||
} |
|||
searchQuery={searchQuery} |
|||
handleSearch={(e: any) => setSearchQuery(e)} |
|||
clearSearchQuery={() => setSearchQuery('')} |
|||
showSearchBar |
|||
showViewTypeButtons |
|||
viewTypeSetting="album" |
|||
handleListClick={() => setViewType('list')} |
|||
handleGridClick={() => setViewType('grid')} |
|||
/> |
|||
} |
|||
> |
|||
<> |
|||
{viewType === 'list' && ( |
|||
<ListViewType |
|||
data={searchQuery !== '' ? filteredData : data.album} |
|||
tableColumns={settings.getSync('albumListColumns')} |
|||
handleRowClick={handleRowClick} |
|||
handleRowDoubleClick={handleRowDoubleClick} |
|||
virtualized |
|||
rowHeight={Number(settings.getSync('albumListRowHeight'))} |
|||
fontSize={Number(settings.getSync('albumListFontSize'))} |
|||
cacheImages={{ |
|||
enabled: settings.getSync('cacheImages'), |
|||
cacheType: 'album', |
|||
}} |
|||
/> |
|||
)} |
|||
|
|||
{viewType === 'grid' && ( |
|||
<GridViewType |
|||
data={searchQuery === '' ? data.album : filteredData} |
|||
cardTitle={{ |
|||
prefix: '/library/album', |
|||
property: 'name', |
|||
urlProperty: 'albumId', |
|||
}} |
|||
cardSubtitle={{ |
|||
property: 'songCount', |
|||
unit: ' tracks', |
|||
}} |
|||
playClick={{ type: 'album', idProperty: 'id' }} |
|||
size="150px" |
|||
cacheType="album" |
|||
/> |
|||
)} |
|||
</> |
|||
</GenericPage> |
|||
); |
|||
}; |
|||
|
|||
export default ArtistView; |
|||
@ -0,0 +1,11 @@ |
|||
import styled from 'styled-components'; |
|||
|
|||
export const TagLink = styled.a` |
|||
color: #e9ebf0; |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
color: #e9ebf0; |
|||
text-decoration: none; |
|||
} |
|||
`;
|
|||
Loading…
Reference in new issue