Add Album comment to Album details

ui/src/album/AlbumDetails.js

@@ -1,15 +1,170 @@
-import React from 'react'
-import { Card, CardContent, CardMedia, Typography } from '@material-ui/core'
+import React, { useMemo } from 'react'
+import {
+  Card,
+  CardContent,
+  CardMedia,
+  Typography,
+  Collapse,
+  makeStyles,
+  IconButton,
+  Fab,
+  useMediaQuery,
+} from '@material-ui/core'
+import classnames from 'classnames'
 import { useTranslate } from 'react-admin'
 import Lightbox from 'react-image-lightbox'
 import 'react-image-lightbox/style.css'
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
 import subsonic from '../subsonic'
-import { DurationField, StarButton, SizeField } from '../common'
-import { ArtistLinkField, formatRange } from '../common'
+import {
+  DurationField,
+  StarButton,
+  SizeField,
+  ArtistLinkField,
+  formatRange,
+  MultiLineTextField,
+} from '../common'
 
-const AlbumDetails = ({ classes, record }) => {
+const useStyles = makeStyles((theme) => ({
+  container: {
+    [theme.breakpoints.down('xs')]: {
+      padding: '0.7em',
+      minWidth: '24em',
+    },
+    [theme.breakpoints.up('sm')]: {
+      padding: '1em',
+      minWidth: '32em',
+    },
+  },
+  starButton: {
+    bottom: theme.spacing(-1.5),
+    right: theme.spacing(-1.5),
+  },
+  albumCover: {
+    display: 'inline-flex',
+    justifyContent: 'flex-end',
+    alignItems: 'flex-end',
+    cursor: 'pointer',
+
+    [theme.breakpoints.down('xs')]: {
+      height: '8em',
+      width: '8em',
+    },
+    [theme.breakpoints.up('sm')]: {
+      height: '10em',
+      width: '10em',
+    },
+    [theme.breakpoints.up('lg')]: {
+      height: '15em',
+      width: '15em',
+    },
+  },
+
+  albumDetails: {
+    display: 'inline-block',
+    verticalAlign: 'top',
+    [theme.breakpoints.down('xs')]: {
+      width: '14em',
+    },
+    [theme.breakpoints.up('sm')]: {
+      width: '26em',
+    },
+    [theme.breakpoints.up('lg')]: {
+      width: '43em',
+    },
+  },
+  albumTitle: {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+  comment: {
+    whiteSpace: 'nowrap',
+    marginTop: '1em',
+    display: 'inline-block',
+    [theme.breakpoints.down('xs')]: {
+      width: '10em',
+    },
+    [theme.breakpoints.up('sm')]: {
+      width: '10em',
+    },
+    [theme.breakpoints.up('lg')]: {
+      width: '10em',
+    },
+  },
+  commentFirstLine: {
+    float: 'left',
+    marginRight: '5px',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+  expand: {
+    marginTop: '-5px',
+    transform: 'rotate(0deg)',
+    marginLeft: 'auto',
+    transition: theme.transitions.create('transform', {
+      duration: theme.transitions.duration.shortest,
+    }),
+  },
+  expandOpen: {
+    transform: 'rotate(180deg)',
+  },
+}))
+
+const AlbumComment = ({ classes, record, commentNumLines }) => {
+  const [expanded, setExpanded] = React.useState(false)
+
+  const handleExpandClick = React.useCallback(() => {
+    commentNumLines > 1 && setExpanded(!expanded)
+  }, [expanded, setExpanded, commentNumLines])
+
+  return (
+    <div className={classes.comment}>
+      <div onClick={handleExpandClick}>
+        <MultiLineTextField
+          record={record}
+          source={'comment'}
+          maxLines={1}
+          className={classes.commentFirstLine}
+        />
+      </div>
+      {commentNumLines > 1 && (
+        <IconButton
+          size={'small'}
+          className={classnames(classes.expand, {
+            [classes.expandOpen]: expanded,
+          })}
+          onClick={handleExpandClick}
+          aria-expanded={expanded}
+          aria-label="show more"
+        >
+          <ExpandMoreIcon />
+        </IconButton>
+      )}
+      <Collapse in={expanded} timeout="auto" unmountOnExit>
+        <MultiLineTextField
+          record={record}
+          source={'comment'}
+          firstLine={1}
+          className={classes.commentFirstLine}
+        />
+      </Collapse>
+    </div>
+  )
+}
+
+const AlbumDetails = ({ record }) => {
+  const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('lg'))
+  const classes = useStyles()
   const [isLightboxOpen, setLightboxOpen] = React.useState(false)
   const translate = useTranslate()
+
+  const commentNumLines = useMemo(
+    () => record.comment && record.comment.split('\n').length,
+    [record]
+  )
+
   const genreYear = (record) => {
     let genreDateLine = []
     if (record.genre) {
@@ -38,14 +193,23 @@ const AlbumDetails = ({ classes, record }) => {
     () => setLightboxOpen(false),
     []
   )
-
   return (
     <Card className={classes.container}>
       <CardMedia
         image={imageUrl}
         className={classes.albumCover}
         onClick={handleOpenLightbox}
-      ></CardMedia>
+      >
+        <StarButton
+          className={classes.starButton}
+          record={record}
+          resource={'album'}
+          size={isDesktop ? 'default' : 'small'}
+          aria-label="star"
+          color="primary"
+          component={Fab}
+        />
+      </CardMedia>
       <CardContent className={classes.albumDetails}>
         <Typography variant="h5" className={classes.albumTitle}>
           {record.name}
@@ -60,8 +224,23 @@ const AlbumDetails = ({ classes, record }) => {
           {' · '} <DurationField record={record} source={'duration'} /> {' · '}
           <SizeField record={record} source="size" />
         </Typography>
-        <StarButton record={record} resource={'album'} size={'large'} />
+        {isDesktop && record['comment'] && (
+          <AlbumComment
+            classes={classes}
+            record={record}
+            commentNumLines={commentNumLines}
+          />
+        )}
       </CardContent>
+      {!isDesktop && record['comment'] && (
+        <div>
+          <AlbumComment
+            classes={classes}
+            record={record}
+            commentNumLines={commentNumLines}
+          />
+        </div>
+      )}
 
       {isLightboxOpen && (
         <Lightbox