|
@ -34,9 +34,20 @@ import GenericPageHeader from '../layout/GenericPageHeader'; |
|
|
import { setStatus } from '../../redux/playerSlice'; |
|
|
import { setStatus } from '../../redux/playerSlice'; |
|
|
import { addModalPage } from '../../redux/miscSlice'; |
|
|
import { addModalPage } from '../../redux/miscSlice'; |
|
|
import { notifyToast } from '../shared/toast'; |
|
|
import { notifyToast } from '../shared/toast'; |
|
|
import { filterPlayQueue, getPlayedSongsNotification, isCached } from '../../shared/utils'; |
|
|
import { |
|
|
import { StyledLink } from '../shared/styled'; |
|
|
filterPlayQueue, |
|
|
|
|
|
formatDate, |
|
|
|
|
|
formatDuration, |
|
|
|
|
|
getPlayedSongsNotification, |
|
|
|
|
|
isCached, |
|
|
|
|
|
} from '../../shared/utils'; |
|
|
|
|
|
import { StyledTagLink } from '../shared/styled'; |
|
|
import { setActive } from '../../redux/albumSlice'; |
|
|
import { setActive } from '../../redux/albumSlice'; |
|
|
|
|
|
import { |
|
|
|
|
|
BlurredBackground, |
|
|
|
|
|
BlurredBackgroundWrapper, |
|
|
|
|
|
PageHeaderSubtitleDataLine, |
|
|
|
|
|
} from '../layout/styled'; |
|
|
|
|
|
|
|
|
interface AlbumParams { |
|
|
interface AlbumParams { |
|
|
id: string; |
|
|
id: string; |
|
@ -171,76 +182,60 @@ const AlbumView = ({ ...rest }: any) => { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<GenericPage |
|
|
<> |
|
|
hideDivider |
|
|
{!rest.isModal && ( |
|
|
header={ |
|
|
<BlurredBackgroundWrapper |
|
|
<GenericPageHeader |
|
|
image={!data?.image.match('placeholder') ? data.image : null} |
|
|
image={ |
|
|
expanded={misc.expandSidebar} |
|
|
isCached(`${misc.imageCachePath}album_${albumId}.jpg`) |
|
|
> |
|
|
? `${misc.imageCachePath}album_${albumId}.jpg` |
|
|
<BlurredBackground |
|
|
: data.image |
|
|
image={!data?.image.match('placeholder') ? data.image : null} |
|
|
} |
|
|
expanded={misc.expandSidebar} |
|
|
cacheImages={{ |
|
|
/> |
|
|
enabled: settings.getSync('cacheImages'), |
|
|
</BlurredBackgroundWrapper> |
|
|
cacheType: 'album', |
|
|
)} |
|
|
id: data.albumId, |
|
|
|
|
|
}} |
|
|
<GenericPage |
|
|
title={data.name} |
|
|
hideDivider |
|
|
showTitleTooltip |
|
|
header={ |
|
|
subtitle={ |
|
|
<GenericPageHeader |
|
|
<div> |
|
|
isDark={!rest.isModal} |
|
|
<div |
|
|
image={ |
|
|
style={{ |
|
|
isCached(`${misc.imageCachePath}album_${albumId}.jpg`) |
|
|
overflow: 'hidden', |
|
|
? `${misc.imageCachePath}album_${albumId}.jpg` |
|
|
textOverflow: 'ellipsis', |
|
|
: data.image |
|
|
whiteSpace: 'nowrap', |
|
|
} |
|
|
}} |
|
|
cacheImages={{ |
|
|
> |
|
|
enabled: settings.getSync('cacheImages'), |
|
|
{data.artist && ( |
|
|
cacheType: 'album', |
|
|
<StyledLink |
|
|
id: data.albumId, |
|
|
tabIndex={0} |
|
|
}} |
|
|
onClick={() => { |
|
|
imageHeight={200} |
|
|
if (!rest.isModal) { |
|
|
title={data.name} |
|
|
history.push(`/library/artist/${data.artistId}`); |
|
|
showTitleTooltip |
|
|
} else { |
|
|
subtitle={ |
|
|
dispatch( |
|
|
<div> |
|
|
addModalPage({ |
|
|
<PageHeaderSubtitleDataLine $top> |
|
|
pageType: 'artist', |
|
|
<strong>ALBUM</strong> {' • '} {data.songCount} songs,{' '} |
|
|
id: data.artistId, |
|
|
{formatDuration(data.duration)} |
|
|
}) |
|
|
{data.year && ( |
|
|
); |
|
|
<> |
|
|
} |
|
|
{' • '} |
|
|
}} |
|
|
{data.year} |
|
|
onKeyDown={(e: any) => { |
|
|
</> |
|
|
if (e.key === ' ' || e.key === 'Enter') { |
|
|
)} |
|
|
e.preventDefault(); |
|
|
</PageHeaderSubtitleDataLine> |
|
|
if (!rest.isModal) { |
|
|
<PageHeaderSubtitleDataLine> |
|
|
history.push(`/library/artist/${data.artistId}`); |
|
|
Added {formatDate(data.created)} |
|
|
} else { |
|
|
</PageHeaderSubtitleDataLine> |
|
|
dispatch( |
|
|
<PageHeaderSubtitleDataLine> |
|
|
addModalPage({ |
|
|
{data.artist && ( |
|
|
pageType: 'artist', |
|
|
<StyledTagLink |
|
|
id: data.artistId, |
|
|
|
|
|
}) |
|
|
|
|
|
); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
}} |
|
|
|
|
|
> |
|
|
|
|
|
{data.artist} |
|
|
|
|
|
</StyledLink> |
|
|
|
|
|
)} |
|
|
|
|
|
{data.genre && ( |
|
|
|
|
|
<> |
|
|
|
|
|
{' • '} |
|
|
|
|
|
<StyledLink |
|
|
|
|
|
tabIndex={0} |
|
|
tabIndex={0} |
|
|
|
|
|
tooltip={data.artist} |
|
|
onClick={() => { |
|
|
onClick={() => { |
|
|
if (!rest.isModal) { |
|
|
if (!rest.isModal) { |
|
|
dispatch(setActive({ ...album.active, filter: data.genre })); |
|
|
history.push(`/library/artist/${data.artistId}`); |
|
|
setTimeout(() => { |
|
|
|
|
|
history.push(`/library/album?sortType=${data.genre}`); |
|
|
|
|
|
}, 50); |
|
|
|
|
|
} else { |
|
|
} else { |
|
|
dispatch( |
|
|
dispatch( |
|
|
addModalPage({ |
|
|
addModalPage({ |
|
@ -253,6 +248,28 @@ const AlbumView = ({ ...rest }: any) => { |
|
|
onKeyDown={(e: any) => { |
|
|
onKeyDown={(e: any) => { |
|
|
if (e.key === ' ' || e.key === 'Enter') { |
|
|
if (e.key === ' ' || e.key === 'Enter') { |
|
|
e.preventDefault(); |
|
|
e.preventDefault(); |
|
|
|
|
|
if (!rest.isModal) { |
|
|
|
|
|
history.push(`/library/artist/${data.artistId}`); |
|
|
|
|
|
} else { |
|
|
|
|
|
dispatch( |
|
|
|
|
|
addModalPage({ |
|
|
|
|
|
pageType: 'artist', |
|
|
|
|
|
id: data.artistId, |
|
|
|
|
|
}) |
|
|
|
|
|
); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
}} |
|
|
|
|
|
> |
|
|
|
|
|
{data.artist} |
|
|
|
|
|
</StyledTagLink> |
|
|
|
|
|
)} |
|
|
|
|
|
{data.genre && ( |
|
|
|
|
|
<> |
|
|
|
|
|
<StyledTagLink |
|
|
|
|
|
tabIndex={0} |
|
|
|
|
|
tooltip={data.genre} |
|
|
|
|
|
onClick={() => { |
|
|
if (!rest.isModal) { |
|
|
if (!rest.isModal) { |
|
|
dispatch(setActive({ ...album.active, filter: data.genre })); |
|
|
dispatch(setActive({ ...album.active, filter: data.genre })); |
|
|
setTimeout(() => { |
|
|
setTimeout(() => { |
|
@ -266,71 +283,82 @@ const AlbumView = ({ ...rest }: any) => { |
|
|
}) |
|
|
}) |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|
} |
|
|
}} |
|
|
}} |
|
|
onKeyDown={(e: any) => { |
|
|
> |
|
|
if (e.key === ' ' || e.key === 'Enter') { |
|
|
{data.genre} |
|
|
e.preventDefault(); |
|
|
</StyledLink> |
|
|
if (!rest.isModal) { |
|
|
</> |
|
|
dispatch(setActive({ ...album.active, filter: data.genre })); |
|
|
)} |
|
|
setTimeout(() => { |
|
|
|
|
|
history.push(`/library/album?sortType=${data.genre}`); |
|
|
{data.year && ( |
|
|
}, 50); |
|
|
<> |
|
|
} else { |
|
|
{' • '} |
|
|
dispatch( |
|
|
{data.year} |
|
|
addModalPage({ |
|
|
</> |
|
|
pageType: 'artist', |
|
|
)} |
|
|
id: data.artistId, |
|
|
</div> |
|
|
}) |
|
|
<div style={{ marginTop: '10px' }}> |
|
|
); |
|
|
<ButtonToolbar> |
|
|
} |
|
|
<PlayButton appearance="primary" size="md" onClick={handlePlay} /> |
|
|
} |
|
|
<PlayAppendNextButton |
|
|
}} |
|
|
appearance="primary" |
|
|
> |
|
|
size="md" |
|
|
{data.genre} |
|
|
onClick={() => handlePlayAppend('next')} |
|
|
</StyledTagLink> |
|
|
/> |
|
|
</> |
|
|
<PlayAppendButton |
|
|
)} |
|
|
appearance="primary" |
|
|
</PageHeaderSubtitleDataLine> |
|
|
size="md" |
|
|
<div style={{ marginTop: '10px' }}> |
|
|
onClick={() => handlePlayAppend('later')} |
|
|
<ButtonToolbar> |
|
|
/> |
|
|
<PlayButton appearance="primary" size="lg" onClick={handlePlay} /> |
|
|
<FavoriteButton size="md" isFavorite={data.starred} onClick={handleFavorite} /> |
|
|
<PlayAppendNextButton |
|
|
</ButtonToolbar> |
|
|
appearance="primary" |
|
|
|
|
|
size="lg" |
|
|
|
|
|
onClick={() => handlePlayAppend('next')} |
|
|
|
|
|
/> |
|
|
|
|
|
<PlayAppendButton |
|
|
|
|
|
appearance="primary" |
|
|
|
|
|
size="lg" |
|
|
|
|
|
onClick={() => handlePlayAppend('later')} |
|
|
|
|
|
/> |
|
|
|
|
|
<FavoriteButton size="lg" isFavorite={data.starred} onClick={handleFavorite} /> |
|
|
|
|
|
</ButtonToolbar> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
} |
|
|
} |
|
|
searchQuery={searchQuery} |
|
|
searchQuery={searchQuery} |
|
|
handleSearch={(e: any) => setSearchQuery(e)} |
|
|
handleSearch={(e: any) => setSearchQuery(e)} |
|
|
clearSearchQuery={() => setSearchQuery('')} |
|
|
clearSearchQuery={() => setSearchQuery('')} |
|
|
showSearchBar |
|
|
showSearchBar |
|
|
/> |
|
|
|
|
|
} |
|
|
|
|
|
> |
|
|
|
|
|
<ListViewType |
|
|
|
|
|
data={searchQuery !== '' ? filteredData : data.song} |
|
|
|
|
|
tableColumns={settings.getSync('musicListColumns')} |
|
|
|
|
|
handleRowClick={handleRowClick} |
|
|
|
|
|
handleRowDoubleClick={handleRowDoubleClick} |
|
|
|
|
|
tableHeight={700} |
|
|
|
|
|
virtualized |
|
|
|
|
|
rowHeight={Number(settings.getSync('musicListRowHeight'))} |
|
|
|
|
|
fontSize={Number(settings.getSync('musicListFontSize'))} |
|
|
|
|
|
cacheImages={{ |
|
|
|
|
|
enabled: settings.getSync('cacheImages'), |
|
|
|
|
|
cacheType: 'album', |
|
|
|
|
|
cacheIdProperty: 'albumId', |
|
|
|
|
|
}} |
|
|
|
|
|
listType="music" |
|
|
|
|
|
isModal={rest.isModal} |
|
|
|
|
|
disabledContextMenuOptions={[ |
|
|
|
|
|
'removeSelected', |
|
|
|
|
|
'moveSelectedTo', |
|
|
|
|
|
'deletePlaylist', |
|
|
|
|
|
'viewInModal', |
|
|
|
|
|
]} |
|
|
|
|
|
handleFavorite={handleRowFavorite} |
|
|
/> |
|
|
/> |
|
|
} |
|
|
</GenericPage> |
|
|
> |
|
|
</> |
|
|
<ListViewType |
|
|
|
|
|
data={searchQuery !== '' ? filteredData : data.song} |
|
|
|
|
|
tableColumns={settings.getSync('musicListColumns')} |
|
|
|
|
|
handleRowClick={handleRowClick} |
|
|
|
|
|
handleRowDoubleClick={handleRowDoubleClick} |
|
|
|
|
|
tableHeight={700} |
|
|
|
|
|
virtualized |
|
|
|
|
|
rowHeight={Number(settings.getSync('musicListRowHeight'))} |
|
|
|
|
|
fontSize={Number(settings.getSync('musicListFontSize'))} |
|
|
|
|
|
cacheImages={{ |
|
|
|
|
|
enabled: settings.getSync('cacheImages'), |
|
|
|
|
|
cacheType: 'album', |
|
|
|
|
|
cacheIdProperty: 'albumId', |
|
|
|
|
|
}} |
|
|
|
|
|
listType="music" |
|
|
|
|
|
isModal={rest.isModal} |
|
|
|
|
|
disabledContextMenuOptions={[ |
|
|
|
|
|
'removeSelected', |
|
|
|
|
|
'moveSelectedTo', |
|
|
|
|
|
'deletePlaylist', |
|
|
|
|
|
'viewInModal', |
|
|
|
|
|
]} |
|
|
|
|
|
handleFavorite={handleRowFavorite} |
|
|
|
|
|
/> |
|
|
|
|
|
</GenericPage> |
|
|
|
|
|
); |
|
|
); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|