|
@ -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,10 +182,24 @@ const AlbumView = ({ ...rest }: any) => { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
|
|
|
<> |
|
|
|
|
|
{!rest.isModal && ( |
|
|
|
|
|
<BlurredBackgroundWrapper |
|
|
|
|
|
image={!data?.image.match('placeholder') ? data.image : null} |
|
|
|
|
|
expanded={misc.expandSidebar} |
|
|
|
|
|
> |
|
|
|
|
|
<BlurredBackground |
|
|
|
|
|
image={!data?.image.match('placeholder') ? data.image : null} |
|
|
|
|
|
expanded={misc.expandSidebar} |
|
|
|
|
|
/> |
|
|
|
|
|
</BlurredBackgroundWrapper> |
|
|
|
|
|
)} |
|
|
|
|
|
|
|
|
<GenericPage |
|
|
<GenericPage |
|
|
hideDivider |
|
|
hideDivider |
|
|
header={ |
|
|
header={ |
|
|
<GenericPageHeader |
|
|
<GenericPageHeader |
|
|
|
|
|
isDark={!rest.isModal} |
|
|
image={ |
|
|
image={ |
|
|
isCached(`${misc.imageCachePath}album_${albumId}.jpg`) |
|
|
isCached(`${misc.imageCachePath}album_${albumId}.jpg`) |
|
|
? `${misc.imageCachePath}album_${albumId}.jpg` |
|
|
? `${misc.imageCachePath}album_${albumId}.jpg` |
|
@ -185,20 +210,29 @@ const AlbumView = ({ ...rest }: any) => { |
|
|
cacheType: 'album', |
|
|
cacheType: 'album', |
|
|
id: data.albumId, |
|
|
id: data.albumId, |
|
|
}} |
|
|
}} |
|
|
|
|
|
imageHeight={200} |
|
|
title={data.name} |
|
|
title={data.name} |
|
|
showTitleTooltip |
|
|
showTitleTooltip |
|
|
subtitle={ |
|
|
subtitle={ |
|
|
<div> |
|
|
<div> |
|
|
<div |
|
|
<PageHeaderSubtitleDataLine $top> |
|
|
style={{ |
|
|
<strong>ALBUM</strong> {' • '} {data.songCount} songs,{' '} |
|
|
overflow: 'hidden', |
|
|
{formatDuration(data.duration)} |
|
|
textOverflow: 'ellipsis', |
|
|
{data.year && ( |
|
|
whiteSpace: 'nowrap', |
|
|
<> |
|
|
}} |
|
|
{' • '} |
|
|
> |
|
|
{data.year} |
|
|
|
|
|
</> |
|
|
|
|
|
)} |
|
|
|
|
|
</PageHeaderSubtitleDataLine> |
|
|
|
|
|
<PageHeaderSubtitleDataLine> |
|
|
|
|
|
Added {formatDate(data.created)} |
|
|
|
|
|
</PageHeaderSubtitleDataLine> |
|
|
|
|
|
<PageHeaderSubtitleDataLine> |
|
|
{data.artist && ( |
|
|
{data.artist && ( |
|
|
<StyledLink |
|
|
<StyledTagLink |
|
|
tabIndex={0} |
|
|
tabIndex={0} |
|
|
|
|
|
tooltip={data.artist} |
|
|
onClick={() => { |
|
|
onClick={() => { |
|
|
if (!rest.isModal) { |
|
|
if (!rest.isModal) { |
|
|
history.push(`/library/artist/${data.artistId}`); |
|
|
history.push(`/library/artist/${data.artistId}`); |
|
@ -228,13 +262,13 @@ const AlbumView = ({ ...rest }: any) => { |
|
|
}} |
|
|
}} |
|
|
> |
|
|
> |
|
|
{data.artist} |
|
|
{data.artist} |
|
|
</StyledLink> |
|
|
</StyledTagLink> |
|
|
)} |
|
|
)} |
|
|
{data.genre && ( |
|
|
{data.genre && ( |
|
|
<> |
|
|
<> |
|
|
{' • '} |
|
|
<StyledTagLink |
|
|
<StyledLink |
|
|
|
|
|
tabIndex={0} |
|
|
tabIndex={0} |
|
|
|
|
|
tooltip={data.genre} |
|
|
onClick={() => { |
|
|
onClick={() => { |
|
|
if (!rest.isModal) { |
|
|
if (!rest.isModal) { |
|
|
dispatch(setActive({ ...album.active, filter: data.genre })); |
|
|
dispatch(setActive({ ...album.active, filter: data.genre })); |
|
@ -270,31 +304,24 @@ const AlbumView = ({ ...rest }: any) => { |
|
|
}} |
|
|
}} |
|
|
> |
|
|
> |
|
|
{data.genre} |
|
|
{data.genre} |
|
|
</StyledLink> |
|
|
</StyledTagLink> |
|
|
</> |
|
|
|
|
|
)} |
|
|
|
|
|
|
|
|
|
|
|
{data.year && ( |
|
|
|
|
|
<> |
|
|
|
|
|
{' • '} |
|
|
|
|
|
{data.year} |
|
|
|
|
|
</> |
|
|
</> |
|
|
)} |
|
|
)} |
|
|
</div> |
|
|
</PageHeaderSubtitleDataLine> |
|
|
<div style={{ marginTop: '10px' }}> |
|
|
<div style={{ marginTop: '10px' }}> |
|
|
<ButtonToolbar> |
|
|
<ButtonToolbar> |
|
|
<PlayButton appearance="primary" size="md" onClick={handlePlay} /> |
|
|
<PlayButton appearance="primary" size="lg" onClick={handlePlay} /> |
|
|
<PlayAppendNextButton |
|
|
<PlayAppendNextButton |
|
|
appearance="primary" |
|
|
appearance="primary" |
|
|
size="md" |
|
|
size="lg" |
|
|
onClick={() => handlePlayAppend('next')} |
|
|
onClick={() => handlePlayAppend('next')} |
|
|
/> |
|
|
/> |
|
|
<PlayAppendButton |
|
|
<PlayAppendButton |
|
|
appearance="primary" |
|
|
appearance="primary" |
|
|
size="md" |
|
|
size="lg" |
|
|
onClick={() => handlePlayAppend('later')} |
|
|
onClick={() => handlePlayAppend('later')} |
|
|
/> |
|
|
/> |
|
|
<FavoriteButton size="md" isFavorite={data.starred} onClick={handleFavorite} /> |
|
|
<FavoriteButton size="lg" isFavorite={data.starred} onClick={handleFavorite} /> |
|
|
</ButtonToolbar> |
|
|
</ButtonToolbar> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
@ -331,6 +358,7 @@ const AlbumView = ({ ...rest }: any) => { |
|
|
handleFavorite={handleRowFavorite} |
|
|
handleFavorite={handleRowFavorite} |
|
|
/> |
|
|
/> |
|
|
</GenericPage> |
|
|
</GenericPage> |
|
|
|
|
|
</> |
|
|
); |
|
|
); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|