Issue #9: Integradas nuevas imagenes en coverart

src/components/CoverArt.jsx

@@ -1,13 +1,15 @@
-import React, {Fragment, useEffect, useState} from "react";
+import React, {useEffect, useState} from "react";
 import {ReactComponent as DiscSVG} from "../svg/disc.svg";
 import {getDiscCoverArt, getReleaseCoverArt} from "../services/entity_service";
+import {ResponsiveImage} from './ResponsiveImage';
+
 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)
 
   useEffect(() => {
@@ -22,28 +24,15 @@ export const CoverArt = (props) => {
     }
   }, [disc, release])
 
-  const handleLoad = () => setLoading(false)
-
   const handleClick = () => {
-    if(popup && coverArt && !loading){
+    if(popup && coverArt){
       window.open(coverArt.image)
     }
   }
 
-  if (coverArt) {
-    if (loading) {
-      return (
-        <Fragment>
-          <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}
-                  onClick={handleClick}/>
-    }
-  } else {
-    return <DiscSVG className='coverart'/>
-  }
+  const image = coverArt ? coverArt.image : null;
+  const size = props.size ? props.size : 2;
+
+  return <ResponsiveImage image={image} alt={''} onClick={handleClick}
+    placeholder={<DiscSVG/>} size={size}/>
 }

src/components/CoverArt.scss

@@ -1,11 +0,0 @@
-.coverart {
-  object-fit: cover;
-  width: 100%;
-  height: 100%;
-  outline: 1px var(--gray-2) solid;
-  cursor: pointer;
-
-  &.loading {
-    display: none;
-  }
-}

src/components/ResponsiveImage.jsx

@@ -1,17 +1,22 @@
-import React, {useState} from 'react';
+import React, {Fragment, useState} from 'react';
 import './ResponsiveImage.scss';
 
 export const ResponsiveImage = (props) => {
   /* Link de la imagen */
   const image = props.image;
+
   /* Alt text de la imagen */
   const alt = props.alt;
+
   /* Accion al hacer click en la imagen */
   const handleClick = props.onClick;
+
   /* Placeholder a usar mientras la imagen carga */
-  const placeholder = props.placeholder ? React.cloneElement(props.placeholder, {className: 'responsive-image'}) : null;
+  const placeholder = props.placeholder ? React.cloneElement(props.placeholder, {className: 'responsive-image'}) : <Fragment/>;
+
   /* Tamaño de la imagen, de 1 a 6 */
   const size = props.size ? props.size : 1;
+
   /* Ratio de aspecto de la imagen 4by3, 1by1, 16by9, auto*/
   const ratio = props.ratio ? props.ratio : '1by1';
 

src/components/ResponsiveImage.scss

@@ -3,8 +3,8 @@
 
   &.size-1 {width: 100px;}
   &.size-2 {width: 200px;}
-  &.size-3 {width: 300px;}
-  &.size-4 {width: 400px;}
+  &.size-3 {width: 250px;}
+  &.size-4 {width: 300px;}
   &.size-5 {width: 500px;}
   &.size-6 {width: 600px;}