2731e25fd2
* fix(ui): use div for fragment, check lastfm url for artist page * use span instead of div for better compat * fix: implement isLastFmURL utility and add tests for URL validation --------- Co-authored-by: Deluan <deluan@navidrome.org>
66 lines
1.8 KiB
JavaScript
66 lines
1.8 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, isLastFmURL } from '../utils'
|
|
import config from '../config'
|
|
import { makeStyles } from '@material-ui/core/styles'
|
|
|
|
const useStyles = makeStyles({
|
|
linkBar: {
|
|
minHeight: '1.875em',
|
|
},
|
|
})
|
|
|
|
const ArtistExternalLinks = ({ artistInfo, record }) => {
|
|
const classes = useStyles()
|
|
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 && isLastFmURL(lastFMlink[2])) {
|
|
addLink(
|
|
lastFMlink[2],
|
|
'message.openIn.lastfm',
|
|
<ImLastfm2 className="lastfm-icon" />,
|
|
)
|
|
} else if (isLastFmURL(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 className={classes.linkBar}>{intersperse(linkButtons, ' ')}</div>
|
|
}
|
|
|
|
export default ArtistExternalLinks
|