Commit ca7d9603 authored by Genar Trias Ortiz's avatar Genar Trias Ortiz 🎉

fixing cover rendering

parent 17f3904c
Pipeline #56576782 passed with stages
in 6 minutes and 13 seconds
......@@ -13,54 +13,65 @@ type Props = {
albumName: string
}
const CoverImage = (props: Props) => {
const Content = (props: any) => {
const placeholderUrl = 'logo.png'
const imageUrl = props.noImage ? placeholderUrl : props.src
const Content = (props: any) => {
const placeholderUrl = 'logo.png'
const imageUrl = props.noImage ? placeholderUrl : props.src
return (
<div
className='cover-image'
style={{backgroundImage: `url(${imageUrl})`}}
data-alt={ props.alt }
/>
)
}
return (
<div
className='cover-image'
style={{backgroundImage: `url(${imageUrl})`}}
data-alt={ props.alt }
/>
)
}
const Img = (props) => {
return (
<LazyImage
src={props.src}
srcAlt={props.alt}
>
<Content src={props.src} />
</LazyImage>
)
}
const Img = (props) => {
return (
<LazyImage
src={props.src}
srcAlt={props.alt}
>
<Content src={props.src} />
</LazyImage>
)
}
if (props.size === 'thumbnail' && props.cover && props.cover.thumbnailUrl) {
return (
<Img
alt={ `${props.albumName} cover` }
src={ props.cover.thumbnailUrl }
/>
)
class CoverImage extends React.Component<Props> {
// Update component only if the src has changed
shouldComponentUpdate(nextProps) {
if (nextProps.cover !== this.props.cover) {
return false
}
return true
}
if (props.size === 'full' && props.cover && props.cover.fullUrl) {
render() {
if (this.props.size === 'thumbnail' && this.props.cover && this.props.cover.thumbnailUrl) {
return (
<Img
alt={ `${this.props.albumName} cover` }
src={ this.props.cover.thumbnailUrl }
/>
)
}
if (this.props.size === 'full' && this.props.cover && this.props.cover.fullUrl) {
return (
<Img
alt={ `${this.props.albumName} cover` }
src={ this.props.cover.fullUrl }
/>
)
}
return (
<Img
alt={ `${props.albumName} cover` }
src={ props.cover.fullUrl }
<i
className='cover-image fa fa-music'
/>
)
}
return (
<i
className='cover-image fa fa-music'
/>
)
}
export default CoverImage
......@@ -11,6 +11,7 @@
.cover-image {
background-size: contain;
background-position: center 10px;
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment