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) {
+  const image = coverArt ? coverArt.image : null;
-    if (loading) {
+  const size = props.size ? props.size : 2;
-      return (
+
-        <Fragment>
+  return <ResponsiveImage image={image} alt={''} onClick={handleClick}
-          <img src={coverArt.image} className={'coverart loading'} alt={props.alt}
+    placeholder={<DiscSVG/>} size={size}/>
-               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'/>
-  }
 }

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-3 {width: 250px;}
-  &.size-4 {width: 400px;}
+  &.size-4 {width: 300px;}
   &.size-5 {width: 500px;}
   &.size-6 {width: 600px;}
 

src/views/Artist.jsx

@@ -22,7 +22,7 @@ const Discs = (props) => {
   if (discs) {
     if(discs.length > 0){
       const items = discs.map((disc) => ({
-        'cover': <CoverArt disc={disc}/>,
+        'cover': <CoverArt disc={disc} size={3}/>,
         'link': `/disc/${disc.id}`,
         'title': disc.title,
         'subtitle': disc.artist.name

src/views/Disc.jsx

@@ -22,7 +22,7 @@ const Versions = (props) => {
   let versionsComponent = <EntityList placeholder={true} size={10} cover={true}/>;
   if(versions) {
     const items = versions.map((version) => ({
-      'cover': <CoverArt release={version}/>,
+      'cover': <CoverArt release={version} size={2}/>,
       'link': `/release/${version.id}`,
       'title': version.title,
       'subtitle': <Fragment>
@@ -69,7 +69,7 @@ const Disc = (props) => {
     return <Entity title={disc.title}
       subtitle={subtitle}
       buttonText='Agregar a mi lista'
-      cover={<CoverArt disc={disc} popup={true}/>}/>
+      cover={<CoverArt disc={disc} popup={true} size={4}/>}/>
   }else {
     return <Fragment></Fragment>
   }

src/views/Recomended.jsx

@@ -47,7 +47,7 @@ const PopularDiscs = () => {
     return <EntityList placeholder={true} size={4}/>
   }else {
     const items = discs.map((disc) => ({
-      'cover': <CoverArt disc={disc}/>,
+      'cover': <CoverArt disc={disc} size={2}/>,
     'link': `/disc/${disc.id}`,
     'title': disc.title,
     'subtitle': disc.artist.name,

src/views/Release.jsx

@@ -54,7 +54,7 @@ const Release = (props) => {
     return <Entity title={release.title}
       subtitle={subtitle}
       buttonText='Agregar a mi lista'
-      cover={<CoverArt release={release} popup={true}/>}/>
+      cover={<CoverArt release={release} popup={true} size={4}/>}/>
   }else {
     return <Fragment></Fragment>
   }