diff --git a/src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx b/src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx index b78da0ee9..61a7a1c2f 100644 --- a/src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx +++ b/src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx @@ -20,11 +20,14 @@ import { ListSearchInput } from '/@/renderer/features/shared/components/list-sea import { AppRoute } from '/@/renderer/router/routes'; import { useCurrentServer } from '/@/renderer/store'; import { formatDurationString } from '/@/renderer/utils'; +import { replaceURLWithHTMLLinks } from '/@/renderer/utils/linkify'; import { hasFeature } from '/@/shared/api/utils'; import { ActionIcon } from '/@/shared/components/action-icon/action-icon'; import { FileButton } from '/@/shared/components/file-button/file-button'; import { Group } from '/@/shared/components/group/group'; +import { Spoiler } from '/@/shared/components/spoiler/spoiler'; import { Stack } from '/@/shared/components/stack/stack'; +import { Text } from '/@/shared/components/text/text'; import { useLocalStorage } from '/@/shared/hooks/use-local-storage'; import { LibraryItem, Playlist, Song } from '/@/shared/types/domain-types'; import { ServerFeature } from '/@/shared/types/features-types'; @@ -110,6 +113,7 @@ export const PlaylistDetailSongListHeader = ({ }); const playlistDuration = detailQuery?.data?.duration; + const playlistDescription = detailQuery?.data?.description?.trim(); const [collapsed] = useLocalStorage({ defaultValue: false, @@ -170,10 +174,32 @@ export const PlaylistDetailSongListHeader = ({ title={detailQuery?.data?.name || ''} topRight={} > - handlePlay(type)} - onShuffle={() => handlePlay(Play.SHUFFLE)} - /> + + {playlistDescription ? ( + } + maxHeight={16} + showLabel={<>} + style={{ marginBottom: 0 }} + > + + {replaceURLWithHTMLLinks(playlistDescription)} + + + ) : null} + handlePlay(type)} + onShuffle={() => handlePlay(Play.SHUFFLE)} + /> + )} diff --git a/src/shared/components/spoiler/spoiler.tsx b/src/shared/components/spoiler/spoiler.tsx index 2ff111312..6005f37bf 100644 --- a/src/shared/components/spoiler/spoiler.tsx +++ b/src/shared/components/spoiler/spoiler.tsx @@ -7,9 +7,17 @@ import { Icon } from '/@/shared/components/icon/icon'; interface SpoilerProps extends Omit { children?: ReactNode; + hideLabel?: ReactNode; + showLabel?: ReactNode; } -export const Spoiler = ({ children, maxHeight = 56, ...props }: SpoilerProps) => { +export const Spoiler = ({ + children, + hideLabel, + maxHeight = 56, + showLabel, + ...props +}: SpoilerProps) => { const [expanded, setExpanded] = useState(false); return ( @@ -18,9 +26,9 @@ export const Spoiler = ({ children, maxHeight = 56, ...props }: SpoilerProps) => expanded={expanded} maxHeight={maxHeight} {...props} - hideLabel={} + hideLabel={hideLabel ?? } onClick={() => setExpanded(!expanded)} - showLabel={} + showLabel={showLabel ?? } > {children}