From 3bf02a1b2c0256655ed18286191beb821c9e61a4 Mon Sep 17 00:00:00 2001
From: Daniel Cortes <daniel.cortes.p159@gmail.com>
Date: Wed, 17 Jun 2020 07:33:02 -0400
Subject: [PATCH] coverart se puede abrir en nueva tab

---
 src/components/CoverArt.jsx  | 13 +++++++++++--
 src/components/CoverArt.scss |  1 +
 src/views/Disc.jsx           |  2 +-
 src/views/Release.jsx        |  2 +-
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/CoverArt.jsx b/src/components/CoverArt.jsx
index ca8b980..d8cc6a5 100644
--- a/src/components/CoverArt.jsx
+++ b/src/components/CoverArt.jsx
@@ -6,6 +6,7 @@ import './CoverArt.scss';
 export const CoverArt = (props) => {
   const disc = props.disc
   const release = props.release
+  const popup = props.popup
   const [loading, setLoading] = useState(true);
   const [coverArt, setCoverArt] = useState(null)
 
@@ -23,16 +24,24 @@ export const CoverArt = (props) => {
 
   const handleLoad = () => setLoading(false)
 
+  const handleClick = () => {
+    if(popup && coverArt && !loading){
+      window.open(coverArt.image)
+    }
+  }
+
   if (coverArt) {
     if (loading) {
       return (
         <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'}/>
         </Fragment>
       )
     } else {
-      return <img src={coverArt.image} className={'coverart'} alt={props.alt}/>
+      return <img src={coverArt.image} className={'coverart'} alt={props.alt}
+                  onClick={handleClick}/>
     }
   } else {
     return <DiscSVG className='coverart'/>
diff --git a/src/components/CoverArt.scss b/src/components/CoverArt.scss
index 58afa04..310f4cf 100644
--- a/src/components/CoverArt.scss
+++ b/src/components/CoverArt.scss
@@ -3,6 +3,7 @@
   width: 100%;
   height: 100%;
   outline: 1px var(--gray-2) solid;
+  cursor: pointer;
 
   &.loading {
     display: none;
diff --git a/src/views/Disc.jsx b/src/views/Disc.jsx
index d0f03f6..4b56c79 100644
--- a/src/views/Disc.jsx
+++ b/src/views/Disc.jsx
@@ -68,7 +68,7 @@ const Disc = (props) => {
     return <Entity title={disc.title}
       subtitle={subtitle}
       buttonText='Agregar a mi lista'
-      cover={<CoverArt disc={disc}/>}/>
+      cover={<CoverArt disc={disc} popup={true}/>}/>
   }else {
     return <Fragment></Fragment>
   }
diff --git a/src/views/Release.jsx b/src/views/Release.jsx
index a39049d..fc601bb 100644
--- a/src/views/Release.jsx
+++ b/src/views/Release.jsx
@@ -53,7 +53,7 @@ const Release = (props) => {
     return <Entity title={release.title}
       subtitle={subtitle}
       buttonText='Agregar a mi lista'
-      cover={<CoverArt release={release}/>}/>
+      cover={<CoverArt release={release} popup={true}/>}/>
   }else {
     return <Fragment></Fragment>
   }