diff --git a/ui/src/album/AlbumDetails.js b/ui/src/album/AlbumDetails.js
index 3260360e..27072e6b 100644
--- a/ui/src/album/AlbumDetails.js
+++ b/ui/src/album/AlbumDetails.js
@@ -1,27 +1,23 @@
-import React, { useMemo } from 'react'
+import React, { useMemo, useCallback } from 'react'
import {
Card,
CardContent,
CardMedia,
- Typography,
Collapse,
makeStyles,
- IconButton,
+ Typography,
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,
ArtistLinkField,
+ DurationField,
formatRange,
- MultiLineTextField,
+ SizeField,
+ StarButton,
} from '../common'
const useStyles = makeStyles((theme) => ({
@@ -73,79 +69,45 @@ const useStyles = makeStyles((theme) => ({
top: theme.spacing(-0.2),
left: theme.spacing(0.5),
},
- comment: {
- whiteSpace: 'nowrap',
- marginTop: '1em',
+ commentBlock: {
display: 'inline-block',
- [theme.breakpoints.down('xs')]: {
- width: '10em',
- },
- [theme.breakpoints.up('sm')]: {
- width: '10em',
- },
- [theme.breakpoints.up('lg')]: {
- width: '10em',
- },
- },
- commentFirstLine: {
+ marginTop: '1em',
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 AlbumComment = ({ record }) => {
+ const classes = useStyles()
const [expanded, setExpanded] = React.useState(false)
- const handleExpandClick = React.useCallback(() => {
- commentNumLines > 1 && setExpanded(!expanded)
- }, [expanded, setExpanded, commentNumLines])
+ const formatted = useMemo(() => {
+ return record.comment.split('\n').map((line) => (
+ <>
+ {line}
+
+ >
+ ))
+ }, [record.comment])
+
+ const handleExpandClick = useCallback(() => {
+ setExpanded(!expanded)
+ }, [expanded, setExpanded])
return (
-