Linkify urls in playlist comments

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) => ({

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)

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>