From 8f9ed1b99466e42792e4e477eab49fdfda1e5ae6 Mon Sep 17 00:00:00 2001 From: Tim Date: Fri, 26 Apr 2024 02:28:25 +0200 Subject: [PATCH] Handling long playlist comments (#2973) Closes #1737 * wrapping playlist comment in a element * Extract common collapsible logic into a component --------- Co-authored-by: Deluan --- ui/src/album/AlbumDetails.js | 66 +++++------------------------ ui/src/common/CollapsibleComment.js | 57 +++++++++++++++++++++++++ ui/src/common/index.js | 1 + ui/src/playlist/PlaylistDetails.js | 8 +--- ui/src/themes/ligera.js | 2 + ui/src/themes/nord.js | 2 + ui/src/themes/spotify.js | 2 + 7 files changed, 77 insertions(+), 61 deletions(-) create mode 100644 ui/src/common/CollapsibleComment.js diff --git a/ui/src/album/AlbumDetails.js b/ui/src/album/AlbumDetails.js index e5fcb5eb..dccecd4d 100644 --- a/ui/src/album/AlbumDetails.js +++ b/ui/src/album/AlbumDetails.js @@ -1,4 +1,4 @@ -import React, { useMemo, useCallback, useState, useEffect } from 'react' +import { useState, useEffect, useCallback } from 'react' import { Card, CardContent, @@ -17,7 +17,6 @@ import { ChipField, Link, } from 'react-admin' -import clsx from 'clsx' import Lightbox from 'react-image-lightbox' import 'react-image-lightbox/style.css' import subsonic from '../subsonic' @@ -29,11 +28,11 @@ import { LoveButton, RatingField, useAlbumsPerPage, + CollapsibleComment, } from '../common' import config from '../config' import { formatFullDate, intersperse } from '../utils' import AlbumExternalLinks from './AlbumExternalLinks' -import AnchorMe from '../common/Linkify' const useStyles = makeStyles( (theme) => ({ @@ -85,12 +84,6 @@ const useStyles = makeStyles( top: theme.spacing(-0.2), left: theme.spacing(0.5), }, - commentBlock: { - display: 'inline-block', - marginTop: '1em', - float: 'left', - wordBreak: 'break-word', - }, notes: { display: 'inline-block', marginTop: '1em', @@ -98,9 +91,6 @@ const useStyles = makeStyles( wordBreak: 'break-word', cursor: 'pointer', }, - pointerCursor: { - cursor: 'pointer', - }, recordName: {}, recordArtist: {}, recordMeta: {}, @@ -116,41 +106,6 @@ const useStyles = makeStyles( }, ) -const AlbumComment = ({ record }) => { - const classes = useStyles() - const [expanded, setExpanded] = React.useState(false) - - const lines = record.comment.split('\n') - const formatted = useMemo(() => { - return lines.map((line, idx) => ( - - -
- - )) - }, [lines, record.id]) - - const handleExpandClick = useCallback(() => { - setExpanded(!expanded) - }, [expanded, setExpanded]) - - return ( - 1 && classes.pointerCursor, - )} - > - - {formatted} - - - ) -} - export const useGetHandleGenreClick = (width) => { const [perPage] = useAlbumsPerPage(width) @@ -268,7 +223,7 @@ const AlbumDetails = (props) => { const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs')) const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('lg')) const classes = useStyles() - const [isLightboxOpen, setLightboxOpen] = React.useState(false) + const [isLightboxOpen, setLightboxOpen] = useState(false) const [expanded, setExpanded] = useState(false) const [albumInfo, setAlbumInfo] = useState() @@ -296,11 +251,8 @@ const AlbumDetails = (props) => { const imageUrl = subsonic.getCoverArtUrl(record, 300) const fullImageUrl = subsonic.getCoverArtUrl(record) - const handleOpenLightbox = React.useCallback(() => setLightboxOpen(true), []) - const handleCloseLightbox = React.useCallback( - () => setLightboxOpen(false), - [], - ) + const handleOpenLightbox = useCallback(() => setLightboxOpen(true), []) + const handleCloseLightbox = useCallback(() => setLightboxOpen(false), []) return (
@@ -373,11 +325,15 @@ const AlbumDetails = (props) => { )} - {isDesktop && record['comment'] && } + {isDesktop && record['comment'] && ( + + )}
- {!isDesktop && record['comment'] && } + {!isDesktop && record['comment'] && ( + + )} {!isDesktop && (
diff --git a/ui/src/common/CollapsibleComment.js b/ui/src/common/CollapsibleComment.js new file mode 100644 index 00000000..f0485b2e --- /dev/null +++ b/ui/src/common/CollapsibleComment.js @@ -0,0 +1,57 @@ +import { useCallback, useMemo, useState } from 'react' +import { Typography, Collapse } from '@material-ui/core' +import { makeStyles } from '@material-ui/core/styles' +import AnchorMe from './Linkify' +import clsx from 'clsx' + +const useStyles = makeStyles( + (theme) => ({ + commentBlock: { + display: 'inline-block', + marginTop: '1em', + float: 'left', + wordBreak: 'break-word', + }, + pointerCursor: { + cursor: 'pointer', + }, + }), + { + name: 'NDCollapsibleComment', + }, +) + +export const CollapsibleComment = ({ record }) => { + const classes = useStyles() + const [expanded, setExpanded] = useState(false) + + const lines = record.comment.split('\n') + const formatted = useMemo(() => { + return lines.map((line, idx) => ( + + +
+ + )) + }, [lines, record.id]) + + const handleExpandClick = useCallback(() => { + setExpanded(!expanded) + }, [expanded, setExpanded]) + + return ( + 1 && classes.pointerCursor, + )} + > + + {formatted} + + + ) +} diff --git a/ui/src/common/index.js b/ui/src/common/index.js index c9d139ef..e4bed700 100644 --- a/ui/src/common/index.js +++ b/ui/src/common/index.js @@ -2,6 +2,7 @@ export * from './AddToPlaylistButton' export * from './ArtistLinkField' export * from './BatchPlayButton' export * from './BitrateField' +export * from './CollapsibleComment' export * from './ContextMenus' export * from './DateField' export * from './DocLink' diff --git a/ui/src/playlist/PlaylistDetails.js b/ui/src/playlist/PlaylistDetails.js index 4e80b666..80ac07c3 100644 --- a/ui/src/playlist/PlaylistDetails.js +++ b/ui/src/playlist/PlaylistDetails.js @@ -1,9 +1,7 @@ -import React from 'react' import { Card, CardContent, Typography } from '@material-ui/core' import { makeStyles } from '@material-ui/core/styles' import { useTranslate } from 'react-admin' -import { DurationField, SizeField } from '../common' -import Linkify from '../common/Linkify' +import { CollapsibleComment, DurationField, SizeField } from '../common' const useStyles = makeStyles( (theme) => ({ @@ -52,9 +50,7 @@ const PlaylistDetails = (props) => { {record.name || translate('ra.page.loading')} - - - + {record.songCount ? ( diff --git a/ui/src/themes/ligera.js b/ui/src/themes/ligera.js index 1c1a9074..824cf7e6 100644 --- a/ui/src/themes/ligera.js +++ b/ui/src/themes/ligera.js @@ -300,6 +300,8 @@ export default { fontSize: '.875rem', color: 'rgb(113 113 113 / 80%)', }, + }, + NDCollapsibleComment: { commentBlock: { fontSize: '.875rem', color: 'rgb(113 113 113 / 80%)', diff --git a/ui/src/themes/nord.js b/ui/src/themes/nord.js index 492de9c0..e1f064bb 100644 --- a/ui/src/themes/nord.js +++ b/ui/src/themes/nord.js @@ -289,6 +289,8 @@ export default { fontSize: '.875rem', color: 'rgba(255,255,255, 0.8)', }, + }, + NDCollapsibleComment: { commentBlock: { fontSize: '.875rem', color: 'rgba(255,255,255, 0.8)', diff --git a/ui/src/themes/spotify.js b/ui/src/themes/spotify.js index 7813291a..703d8159 100644 --- a/ui/src/themes/spotify.js +++ b/ui/src/themes/spotify.js @@ -230,6 +230,8 @@ export default { fontSize: '.875rem', color: 'rgba(255,255,255, 0.8)', }, + }, + NDCollapsibleComment: { commentBlock: { fontSize: '.875rem', color: 'rgba(255,255,255, 0.8)',