Artist page improvements (#1391)

* Seperate mobile desktop components * Fix err * Rename classes and fix some styles * Add lastFM button and remove console log * Add Mbiz Icon * render bio as dangerouslySetInnerHTML and remove unused css classes * Add Fav and Stars * Remove unstandardised class selector * Remove ext link from m view * Fix naming and simplify rounded styling * Refactor ArtistShow: - Extracted DesktopArtistDetails to its own file - Removed album count as it was incorrect, it is not considering compilations - Show bio and image from Native API, if it is available, before calling `getArtistInfo` Co-authored-by: Deluan <deluan@navidrome.org>
2021-10-16 06:32:11 +05:30
parent 7505b5c554
commit 1d742cf8c7
8 changed files with 343 additions and 257 deletions
@@ -0,0 +1,134 @@
+import React, { useState } from 'react'
+import { Typography, Collapse } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core/styles'
+import Card from '@material-ui/core/Card'
+import CardMedia from '@material-ui/core/CardMedia'
+import config from '../config'
+import { LoveButton, RatingField } from '../common'
+
+const useStyles = makeStyles(
+  (theme) => ({
+    root: {
+      display: 'flex',
+      background: ({ img }) => `url(${img})`,
+    },
+    bgContainer: {
+      display: 'flex',
+      height: '15rem',
+      width: '100vw',
+      padding: 'unset',
+      backdropFilter: 'blur(1px)',
+      backgroundPosition: '50% 30%',
+      background: `linear-gradient(to bottom, rgba(52 52 52 / 72%), rgba(21 21 21))`,
+    },
+    link: {
+      margin: '1px',
+    },
+    details: {
+      display: 'flex',
+      alignItems: 'flex-start',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      marginLeft: '0.5rem',
+    },
+    biography: {
+      display: 'flex',
+      marginLeft: '3%',
+      marginRight: '3%',
+      marginTop: '-2em',
+      zIndex: '1',
+      '& p': {
+        whiteSpace: ({ expanded }) => (expanded ? 'unset' : 'nowrap'),
+        overflow: 'hidden',
+        width: '95vw',
+        textOverflow: 'ellipsis',
+      },
+    },
+    cover: {
+      width: 151,
+      boxShadow: '0px 0px 6px 0px #565656',
+      borderRadius: '5px',
+    },
+    artistImage: {
+      marginLeft: '1em',
+      maxHeight: '7rem',
+      backgroundColor: 'inherit',
+      marginTop: '4rem',
+      width: '7rem',
+      minWidth: '7rem',
+      display: 'flex',
+      borderRadius: '5em',
+    },
+    loveButton: {
+      top: theme.spacing(-0.2),
+      left: theme.spacing(0.5),
+    },
+    rating: {
+      marginTop: '5px',
+    },
+    artistName: {
+      wordBreak: 'break-word',
+    },
+  }),
+  { name: 'NDMobileArtistDetails' }
+)
+
+const MobileArtistDetails = ({ img, artistInfo, biography, record }) => {
+  const [expanded, setExpanded] = useState(false)
+  const classes = useStyles({ img, expanded })
+  const title = record.name
+
+  return (
+    <>
+      <div className={classes.root}>
+        <div className={classes.bgContainer}>
+          <Card className={classes.artistImage}>
+            {artistInfo && (
+              <CardMedia
+                className={classes.cover}
+                image={`${artistInfo.mediumImageUrl}`}
+                title={title}
+              />
+            )}
+          </Card>
+          <div className={classes.details}>
+            <Typography
+              component="h5"
+              variant="h5"
+              className={classes.artistName}
+            >
+              {title}
+              {config.enableFavourites && (
+                <LoveButton
+                  className={classes.loveButton}
+                  record={record}
+                  resource={'artist'}
+                  size={'small'}
+                  aria-label="love"
+                  color="primary"
+                />
+              )}
+            </Typography>
+            {config.enableStarRating && (
+              <RatingField
+                record={record}
+                resource={'artist'}
+                size={'small'}
+                className={classes.rating}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+      <div className={classes.biography}>
+        <Collapse collapsedHeight={'1.5em'} in={expanded} timeout={'auto'}>
+          <Typography variant={'body1'} onClick={() => setExpanded(!expanded)}>
+            <span dangerouslySetInnerHTML={{ __html: biography }} />
+          </Typography>
+        </Collapse>
+      </div>
+    </>
+  )
+}
+
+export default MobileArtistDetails