Add Links to external sites

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(<span key={`link-${record.id}-${id}`}>{obj}</span>)
+  }
+
+  addLink(
+    <Link
+      href={`https://last.fm/music/${
+        encodeURIComponent(record.albumArtist) +
+        '/' +
+        encodeURIComponent(record.name)
+      }`}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <IconButton size={'small'} title={translate('message.openIn.lastfm')}>
+        <ImLastfm2 />
+      </IconButton>
+    </Link>
+  )
+
+  record.mbzAlbumId &&
+    addLink(
+      <Link
+        href={`https://musicbrainz.org/release/${record.mbzAlbumId}`}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <IconButton
+          size={'small'}
+          title={translate('message.openIn.musicbrainz')}
+        >
+          <MusicBrainz />
+        </IconButton>
+      </Link>
+    )
+
+  return <div className={classes.links}>{intersperse(links, ' ')}</div>
+}
+
 const AlbumDetails = (props) => {
   const record = useRecordContext(props)
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('lg'))
@@ -220,10 +272,10 @@ const AlbumDetails = (props) => {
                 />
               )}
             </Typography>
-            <Typography component="h6" className={classes.recordArtist}>
+            <Typography component={'h6'} className={classes.recordArtist}>
               <ArtistLinkField record={record} />
             </Typography>
-            <Typography component="p" className={classes.recordMeta}>
+            <Typography component={'p'} className={classes.recordMeta}>
               <Details />
             </Typography>
             {config.enableStarRating && (
@@ -235,7 +287,16 @@ const AlbumDetails = (props) => {
                 />
               </div>
             )}
-            <GenreList />
+            {isDesktop ? (
+              <GenreList />
+            ) : (
+              <Typography component={'p'}>{record.genre}</Typography>
+            )}
+            {isDesktop && (
+              <Typography component={'p'} className={classes.recordMeta}>
+                <Links />
+              </Typography>
+            )}
             {isDesktop && record['comment'] && <AlbumComment record={record} />}
           </CardContent>
         </div>