From 53a4ea673bf15c9e86b4bbb972411f6e8aced402 Mon Sep 17 00:00:00 2001
From: Deluan <deluan@navidrome.org>
Date: Fri, 7 Oct 2022 16:12:07 -0400
Subject: [PATCH] Linkify urls in playlist comments

---
 ui/src/album/AlbumDetails.js              | 2 +-
 ui/src/common/{AnchorMe.js => Linkify.js} | 6 +++---
 ui/src/playlist/PlaylistDetails.js        | 5 ++++-
 3 files changed, 8 insertions(+), 5 deletions(-)
 rename ui/src/common/{AnchorMe.js => Linkify.js} (94%)

diff --git a/ui/src/album/AlbumDetails.js b/ui/src/album/AlbumDetails.js
index c22805879..2bf3c4e16 100644
--- a/ui/src/album/AlbumDetails.js
+++ b/ui/src/album/AlbumDetails.js
@@ -33,7 +33,7 @@ import {
 import config from '../config'
 import { intersperse } from '../utils'
 import AlbumExternalLinks from './AlbumExternalLinks'
-import AnchorMe from '../common/AnchorMe'
+import AnchorMe from '../common/Linkify'
 
 const useStyles = makeStyles(
   (theme) => ({
diff --git a/ui/src/common/AnchorMe.js b/ui/src/common/Linkify.js
similarity index 94%
rename from ui/src/common/AnchorMe.js
rename to ui/src/common/Linkify.js
index dadd06ef3..65d5c70af 100644
--- a/ui/src/common/AnchorMe.js
+++ b/ui/src/common/Linkify.js
@@ -13,7 +13,7 @@ const useStyles = makeStyles(
   { name: 'RaLink' }
 )
 
-const AnchorMe = ({ text, ...rest }) => {
+const Linkify = ({ text, ...rest }) => {
   const classes = useStyles()
   const linkify = useCallback((text) => {
     const urlRegex =
@@ -66,8 +66,8 @@ const AnchorMe = ({ text, ...rest }) => {
   return <>{parsedText}</>
 }
 
-AnchorMe.propTypes = {
+Linkify.propTypes = {
   text: PropTypes.string,
 }
 
-export default React.memo(AnchorMe)
+export default React.memo(Linkify)
diff --git a/ui/src/playlist/PlaylistDetails.js b/ui/src/playlist/PlaylistDetails.js
index 6b5e629d5..954f0c841 100644
--- a/ui/src/playlist/PlaylistDetails.js
+++ b/ui/src/playlist/PlaylistDetails.js
@@ -3,6 +3,7 @@ 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'
 
 const useStyles = makeStyles(
   (theme) => ({
@@ -51,7 +52,9 @@ const PlaylistDetails = (props) => {
         <Typography variant="h5" className={classes.title}>
           {record.name || translate('ra.page.loading')}
         </Typography>
-        <Typography component="h6">{record.comment}</Typography>
+        <Typography component="h6">
+          <Linkify text={record.comment} />
+        </Typography>
         <Typography component="p">
           {record.songCount ? (
             <span>