Add Links to external sites
This commit is contained in:
Deluan
Deluan Quintão
parent
21cd50d81c
commit
58ee4c60ca
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
Loading…
Reference in New Issue