Add Album comment to Album details

ui/src/common/MultiLineTextField.js

@@ -4,10 +4,22 @@ import Typography from '@material-ui/core/Typography'
 import sanitizeFieldRestProps from './sanitizeFieldRestProps'
 import md5 from 'md5-hex'
 
-const MultiLineTextField = memo(
-  ({ className, emptyText, source, record = {}, stripTags, ...rest }) => {
+export const MultiLineTextField = memo(
+  ({
+    className,
+    emptyText,
+    source,
+    record,
+    firstLine,
+    maxLines,
+    addLabel,
+    ...rest
+  }) => {
     const value = get(record, source)
-    const lines = value ? value.split('\n') : []
+    let lines = value ? value.split('\n') : []
+    if (maxLines || firstLine) {
+      lines = lines.slice(firstLine, maxLines)
+    }
 
     return (
       <Typography
@@ -18,20 +30,24 @@ const MultiLineTextField = memo(
       >
         {lines.length === 0 && emptyText
           ? emptyText
-          : lines.map((line, idx) => (
-              <div
-                data-testid={`${source}.${idx}`}
-                key={md5(line)}
-                dangerouslySetInnerHTML={{ __html: line }}
-              />
-            ))}
+          : lines.map((line, idx) =>
+              line === '' ? (
+                <br key={md5(line + idx)} />
+              ) : (
+                <div
+                  data-testid={`${source}.${idx}`}
+                  key={md5(line + idx)}
+                  dangerouslySetInnerHTML={{ __html: line }}
+                />
+              )
+            )}
       </Typography>
     )
   }
 )
 
 MultiLineTextField.defaultProps = {
+  record: {},
   addLabel: true,
+  firstLine: 0,
 }
-
-export default MultiLineTextField

ui/src/common/SongDetails.js

@@ -8,7 +8,7 @@ import TableRow from '@material-ui/core/TableRow'
 import { BooleanField, DateField, TextField, useTranslate } from 'react-admin'
 import inflection from 'inflection'
 import { BitrateField, SizeField } from './index'
-import MultiLineTextField from './MultiLineTextField'
+import { MultiLineTextField } from './MultiLineTextField'
 
 export const SongDetails = (props) => {
   const translate = useTranslate()

ui/src/common/StarButton.js

@@ -15,7 +15,16 @@ const useStyles = makeStyles({
   },
 })
 
-export const StarButton = ({ resource, record, color, visible, size }) => {
+export const StarButton = ({
+  resource,
+  record,
+  color,
+  visible,
+  size,
+  component: Button,
+  addLabel,
+  ...rest
+}) => {
   const [loading, setLoading] = useState(false)
   const classes = useStyles({ color, visible, starred: record.starred })
   const notify = useNotify()
@@ -56,18 +65,19 @@ export const StarButton = ({ resource, record, color, visible, size }) => {
   }
 
   return (
-    <IconButton
+    <Button
       onClick={handleToggleStar}
       size={'small'}
       disabled={loading}
       className={classes.star}
+      {...rest}
     >
       {record.starred ? (
         <StarIcon fontSize={size} />
       ) : (
         <StarBorderIcon fontSize={size} />
       )}
-    </IconButton>
+    </Button>
   )
 }
 
@@ -77,6 +87,7 @@ StarButton.propTypes = {
   visible: PropTypes.bool,
   color: PropTypes.string,
   size: PropTypes.string,
+  component: PropTypes.object,
 }
 
 StarButton.defaultProps = {
@@ -85,4 +96,5 @@ StarButton.defaultProps = {
   visible: true,
   size: 'small',
   color: 'inherit',
+  component: IconButton,
 }

ui/src/common/index.js

@@ -6,6 +6,7 @@ export * from './ContextMenus'
 export * from './DocLink'
 export * from './DurationField'
 export * from './List'
+export * from './MultiLineTextField'
 export * from './Pagination'
 export * from './PlayButton'
 export * from './QuickFilter'