navidrome/ui/src/album/AlbumExternalLinks.js

53 lines
1.5 KiB
JavaScript

import React from 'react'
import { useRecordContext, 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 AlbumExternalLinks = (props) => {
const { className } = props
const translate = useTranslate()
const record = useRecordContext(props)
let links = []
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 = links.length
links.push(<span key={`link-${record.id}-${id}`}>{link}</span>)
}
if (config.lastFMEnabled) {
addLink(
`https://last.fm/music/${
encodeURIComponent(record.albumArtist) +
'/' +
encodeURIComponent(record.name)
}`,
'message.openIn.lastfm',
<ImLastfm2 className="lastfm-icon" />
)
}
record.mbzAlbumId &&
addLink(
`https://musicbrainz.org/release/${record.mbzAlbumId}`,
'message.openIn.musicbrainz',
<MusicBrainz className="musicbrainz-icon" />
)
return <div className={className}>{intersperse(links, ' ')}</div>
}
export default AlbumExternalLinks