From 58ee4c60ca4e1d4c53d9c4285e39aa1320bed0f2 Mon Sep 17 00:00:00 2001
From: Deluan <deluan@navidrome.org>
Date: Sat, 17 Jul 2021 23:29:52 -0400
Subject: [PATCH] Add Links to external sites

---
 ui/src/album/AlbumDetails.js | 69 +++++++++++++++++++++++++++++++++---
 ui/src/i18n/en.json          |  6 +++-
 ui/src/icons/MusicBrainz.js  | 12 +++++++
 3 files changed, 82 insertions(+), 5 deletions(-)
 create mode 100644 ui/src/icons/MusicBrainz.js

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(<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>
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 (
+    <SvgIcon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+      <path d="M11.582 0L1.418 5.832v12.336L11.582 24V10.01L7.1 12.668v3.664c.01.111.01.225 0 .336-.103.435-.54.804-1 1.111-.802.537-1.752.509-2.166-.111-.413-.62-.141-1.631.666-2.168.384-.28.863-.399 1.334-.332V6.619c0-.154.134-.252.226-.308L11.582 3zm.836 0v6.162c.574.03 1.14.16 1.668.387a2.225 2.225 0 0 0 1.656-.717 1.02 1.02 0 1 1 1.832-.803l.004.006a1.022 1.022 0 0 1-1.295 1.197c-.34.403-.792.698-1.297.85.34.263.641.576.891.928a1.04 1.04 0 0 1 .777.125c.768.486.568 1.657-.318 1.857-.886.2-1.574-.77-1.09-1.539.02-.03.042-.06.065-.09a3.598 3.598 0 0 0-1.436-1.166 4.142 4.142 0 0 0-1.457-.369v4.01c.855.06 1.256.493 1.555.834.227.256.356.39.578.402.323.018.568.008.806 0a5.44 5.44 0 0 1 .895.022c.94-.017 1.272-.226 1.605-.446a2.533 2.533 0 0 1 1.131-.463 1.027 1.027 0 0 1 .12-.263 1.04 1.04 0 0 1 .105-.137c.023-.025.047-.044.07-.066a4.775 4.775 0 0 1 0-2.405l-.012-.01a1.02 1.02 0 1 1 .692.272h-.057a4.288 4.288 0 0 0 0 1.877h.063a1.02 1.02 0 1 1-.545 1.883l-.047-.033a1 1 0 0 1-.352-.442 1.885 1.885 0 0 0-.814.354 3.03 3.03 0 0 1-.703.365c.757.555 1.772 1.6 2.199 2.299a1.03 1.03 0 0 1 .256-.033 1.02 1.02 0 1 1-.545 1.88l-.047-.03a1.017 1.017 0 0 1-.27-1.376.72.72 0 0 1 .051-.072c-.445-.775-2.026-2.28-2.46-2.387a4.037 4.037 0 0 0-1.31-.117c-.24.008-.513.018-.866 0-.515-.027-.783-.333-1.043-.629-.26-.296-.51-.56-1.055-.611V18.5a1.877 1.877 0 0 0 .426-.135.333.333 0 0 1 .058-.027c.56-.267 1.421-.91 2.096-2.447a1.02 1.02 0 0 1-.27-1.344 1.02 1.02 0 1 1 .915 1.54 6.273 6.273 0 0 1-1.432 2.136 1.785 1.785 0 0 1 .691.306.667.667 0 0 0 .37.168 3.31 3.31 0 0 0 .888-.222 1.02 1.02 0 0 1 1.787-.79v-.005a1.02 1.02 0 0 1-.773 1.683 1.022 1.022 0 0 1-.719-.287 3.935 3.935 0 0 1-1.168.287h-.05a1.313 1.313 0 0 1-.71-.275c-.262-.177-.51-.345-1.402-.12a2.098 2.098 0 0 1-.707.2V24l10.164-5.832V5.832zm4.154 4.904a.352.352 0 0 0-.197.639l.018.01c.163.1.378.053.484-.108v-.002a.352.352 0 0 0-.303-.539zm-4.99 1.928L7.082 9.5v2l4.5-2.668zm8.385.38a.352.352 0 0 0-.295.165v.002a.35.35 0 0 0 .096.473l.013.01a.357.357 0 0 0 .487-.108.352.352 0 0 0-.301-.541zM16.09 8.647a.352.352 0 0 0-.277.163.355.355 0 0 0 .296.54c.482 0 .463-.73-.02-.703zm3.877 2.477a.352.352 0 0 0-.295.164.35.35 0 0 0 .094.475l.015.01a.357.357 0 0 0 .485-.11.352.352 0 0 0-.3-.539zm-4.375 3.594a.352.352 0 0 0-.291.172.35.35 0 0 0-.04.265.352.352 0 1 0 .33-.437zm4.375.789a.352.352 0 0 0-.295.164v.002a.352.352 0 0 0 .094.473l.015.01a.357.357 0 0 0 .485-.108.352.352 0 0 0-.3-.54zm-2.803 2.488v.002a.347.347 0 0 0-.223.084.352.352 0 0 0 .23.62.347.347 0 0 0 .23-.085.348.348 0 0 0 .12-.24.353.353 0 0 0-.35-.38.347.347 0 0 0-.007 0Z" />
+    </SvgIcon>
+  )
+}
+
+export default MusicBrainz