diff --git a/ui/src/album/AlbumDetails.js b/ui/src/album/AlbumDetails.js index 64775e7a6..0d6697f1e 100644 --- a/ui/src/album/AlbumDetails.js +++ b/ui/src/album/AlbumDetails.js @@ -4,6 +4,7 @@ import { CardContent, CardMedia, Collapse, + IconButton, makeStyles, Typography, useMediaQuery, @@ -29,6 +30,9 @@ import { } from '../common' import config from '../config' import { intersperse } from '../utils' +import Link from '@material-ui/core/Link' +import MusicBrainz from '../icons/MusicBrainz' +import { ImLastfm2 } from 'react-icons/im' const useStyles = makeStyles( (theme) => ({ @@ -93,7 +97,10 @@ const useStyles = makeStyles( recordArtist: {}, recordMeta: {}, genreList: { - marginTop: theme.spacing(1), + marginTop: theme.spacing(0.5), + }, + links: { + marginTop: theme.spacing(1.5), }, }), { @@ -174,6 +181,51 @@ const Details = (props) => { return <>{intersperse(details, ' ยท ')} } +const Links = (props) => { + const classes = useStyles() + const translate = useTranslate() + const record = useRecordContext(props) + let links = [] + const addLink = (obj) => { + const id = links.length + links.push({obj}) + } + + addLink( + + + + + + ) + + record.mbzAlbumId && + addLink( + + + + + + ) + + return
{intersperse(links, ' ')}
+} + const AlbumDetails = (props) => { const record = useRecordContext(props) const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('lg')) @@ -220,10 +272,10 @@ const AlbumDetails = (props) => { /> )} - + - +
{config.enableStarRating && ( @@ -235,7 +287,16 @@ const AlbumDetails = (props) => { /> )} - + {isDesktop ? ( + + ) : ( + {record.genre} + )} + {isDesktop && ( + + + + )} {isDesktop && record['comment'] && } diff --git a/ui/src/i18n/en.json b/ui/src/i18n/en.json index e7069a582..abbad6056 100644 --- a/ui/src/i18n/en.json +++ b/ui/src/i18n/en.json @@ -303,7 +303,11 @@ "lastfmLinkSuccess": "Last.fm successfully linked and scrobbling enabled", "lastfmLinkFailure": "Last.fm could not be linked", "lastfmUnlinkSuccess": "Last.fm unlinked and scrobbling disabled", - "lastfmUnlinkFailure": "Last.fm could not unlinked" + "lastfmUnlinkFailure": "Last.fm could not unlinked", + "openIn": { + "lastfm": "Open in Last.fm", + "musicbrainz": "Open in MusicBrainz" + } }, "menu": { "library": "Library", diff --git a/ui/src/icons/MusicBrainz.js b/ui/src/icons/MusicBrainz.js new file mode 100644 index 000000000..298098c5d --- /dev/null +++ b/ui/src/icons/MusicBrainz.js @@ -0,0 +1,12 @@ +import React from 'react' +import SvgIcon from '@material-ui/core/SvgIcon' + +const MusicBrainz = (props) => { + return ( + + + + ) +} + +export default MusicBrainz