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