coverart se puede abrir en nueva tab
This commit is contained in:
@@ -6,6 +6,7 @@ import './CoverArt.scss';
|
|||||||
export const CoverArt = (props) => {
|
export const CoverArt = (props) => {
|
||||||
const disc = props.disc
|
const disc = props.disc
|
||||||
const release = props.release
|
const release = props.release
|
||||||
|
const popup = props.popup
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [coverArt, setCoverArt] = useState(null)
|
const [coverArt, setCoverArt] = useState(null)
|
||||||
|
|
||||||
@@ -23,16 +24,24 @@ export const CoverArt = (props) => {
|
|||||||
|
|
||||||
const handleLoad = () => setLoading(false)
|
const handleLoad = () => setLoading(false)
|
||||||
|
|
||||||
|
const handleClick = () => {
|
||||||
|
if(popup && coverArt && !loading){
|
||||||
|
window.open(coverArt.image)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (coverArt) {
|
if (coverArt) {
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<img src={coverArt.image} className={'coverart loading'} alt={props.alt} onLoad={handleLoad}/>
|
<img src={coverArt.image} className={'coverart loading'} alt={props.alt}
|
||||||
|
onLoad={handleLoad}/>
|
||||||
<div className={'coverart pulsating'}/>
|
<div className={'coverart pulsating'}/>
|
||||||
</Fragment>
|
</Fragment>
|
||||||
)
|
)
|
||||||
} else {
|
} else {
|
||||||
return <img src={coverArt.image} className={'coverart'} alt={props.alt}/>
|
return <img src={coverArt.image} className={'coverart'} alt={props.alt}
|
||||||
|
onClick={handleClick}/>
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
return <DiscSVG className='coverart'/>
|
return <DiscSVG className='coverart'/>
|
||||||
|
|||||||
@@ -3,6 +3,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
outline: 1px var(--gray-2) solid;
|
outline: 1px var(--gray-2) solid;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
&.loading {
|
&.loading {
|
||||||
display: none;
|
display: none;
|
||||||
|
|||||||
@@ -68,7 +68,7 @@ const Disc = (props) => {
|
|||||||
return <Entity title={disc.title}
|
return <Entity title={disc.title}
|
||||||
subtitle={subtitle}
|
subtitle={subtitle}
|
||||||
buttonText='Agregar a mi lista'
|
buttonText='Agregar a mi lista'
|
||||||
cover={<CoverArt disc={disc}/>}/>
|
cover={<CoverArt disc={disc} popup={true}/>}/>
|
||||||
}else {
|
}else {
|
||||||
return <Fragment></Fragment>
|
return <Fragment></Fragment>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -53,7 +53,7 @@ const Release = (props) => {
|
|||||||
return <Entity title={release.title}
|
return <Entity title={release.title}
|
||||||
subtitle={subtitle}
|
subtitle={subtitle}
|
||||||
buttonText='Agregar a mi lista'
|
buttonText='Agregar a mi lista'
|
||||||
cover={<CoverArt release={release}/>}/>
|
cover={<CoverArt release={release} popup={true}/>}/>
|
||||||
}else {
|
}else {
|
||||||
return <Fragment></Fragment>
|
return <Fragment></Fragment>
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user