From bc72f41180f640e6a17e067072fd8bef52b26129 Mon Sep 17 00:00:00 2001
From: Steve Richter <steve@nerdbra.in>
Date: Tue, 24 Nov 2020 22:46:37 -0500
Subject: [PATCH] Adjust AudioTitle in Player

- Show info on 2 lines
- Show album
---
 ui/src/audioplayer/Player.js | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/ui/src/audioplayer/Player.js b/ui/src/audioplayer/Player.js
index 3bda8adf8..d411c5052 100644
--- a/ui/src/audioplayer/Player.js
+++ b/ui/src/audioplayer/Player.js
@@ -24,6 +24,15 @@ const useStyle = makeStyles((theme) => ({
   audioTitle: {
     textDecoration: 'none',
     color: theme.palette.primary.light,
+    '&.songTitle': {
+      fontWeight: 'bold',
+    },
+    '&.songInfo': {
+      // 768 is where the player swaps views
+      [theme.breakpoints.down(769)]: {
+        display: 'none',
+      },
+    },
   },
   player: {
     display: (props) => (props.visible ? 'block' : 'none'),
@@ -37,10 +46,17 @@ const audioTitle = (audioInfo) => {
 }
 
 const AudioTitle = ({ audioInfo, className }) => {
-  const title = audioTitle(audioInfo)
+  if (!audioInfo.name) {
+    return ''
+  }
+
   return (
     <Link to={`/album/${audioInfo.albumId}/show`} className={className}>
-      {title}
+      <span className={`${className} songTitle`}>{audioInfo.name}</span>
+      <br />
+      <span className={`${className} songInfo`}>
+        {`${audioInfo.singer} - ${audioInfo.album}`}
+      </span>
     </Link>
   )
 }