navidrome/ui/src/artist/ArtistExternalLink.js

59 lines
1.6 KiB
JavaScript

import React from 'react'
import { useTranslate } from 'react-admin'
import { IconButton, Tooltip, Link } from '@material-ui/core'
import { ImLastfm2 } from 'react-icons/im'
import MusicBrainz from '../icons/MusicBrainz'
import { intersperse } from '../utils'
import config from '../config'
const ArtistExternalLinks = ({ artistInfo, record }) => {
const translate = useTranslate()
let linkButtons = []
const lastFMlink = artistInfo?.biography?.match(
/<a\s+(?:[^>]*?\s+)?href=(["'])(.*?)\1/
)
const addLink = (url, title, icon) => {
const translatedTitle = translate(title)
const link = (
<Link href={url} target="_blank" rel="noopener noreferrer">
<Tooltip title={translatedTitle}>
<IconButton size={'small'} aria-label={translatedTitle}>
{icon}
</IconButton>
</Tooltip>
</Link>
)
const id = linkButtons.length
linkButtons.push(<span key={`link-${record.id}-${id}`}>{link}</span>)
}
if (config.lastFMEnabled) {
if (lastFMlink) {
addLink(
lastFMlink[2],
'message.openIn.lastfm',
<ImLastfm2 className="lastfm-icon" />
)
} else if (artistInfo?.lastFmUrl) {
addLink(
artistInfo?.lastFmUrl,
'message.openIn.lastfm',
<ImLastfm2 className="lastfm-icon" />
)
}
}
artistInfo?.musicBrainzId &&
addLink(
`https://musicbrainz.org/artist/${artistInfo.musicBrainzId}`,
'message.openIn.musicbrainz',
<MusicBrainz className="musicbrainz-icon" />
)
return <div>{intersperse(linkButtons, ' ')}</div>
}
export default ArtistExternalLinks