From ee8943f338ecdfeec99aa329de95180ccd2fb528 Mon Sep 17 00:00:00 2001
From: Deluan <deluan@navidrome.org>
Date: Thu, 7 Oct 2021 19:49:27 -0400
Subject: [PATCH] Fix semantic classes for currently playing song

Fix #1364
---
 ui/src/audioplayer/AudioTitle.js | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/ui/src/audioplayer/AudioTitle.js b/ui/src/audioplayer/AudioTitle.js
index 39c2389db..bf509c668 100644
--- a/ui/src/audioplayer/AudioTitle.js
+++ b/ui/src/audioplayer/AudioTitle.js
@@ -27,21 +27,22 @@ const AudioTitle = React.memo(({ audioInfo, isMobile }) => {
           <QualityInfo record={qi} className={classes.qualityInfo} />
         )}
       </span>
-      {!isMobile && (
-        <span className={clsx(classes.songInfo)}>
-          {`${song.artist} - ${song.album}` +
-            (song.year ? ` - ${song.year}` : '')}
-        </span>
-      )}
-      {isMobile && (
+      {isMobile ? (
         <>
-          <span className={clsx(classes.songInfo, classes.songArtist)}>
-            {`${song.artist}`}
+          <span className={classes.songInfo}>
+            <span className={'songArtist'}>{song.artist}</span>
           </span>
           <span className={clsx(classes.songInfo, classes.songAlbum)}>
-            {song.year ? `${song.album} - ${song.year}` : `${song.album}`}
+            <span className={'songAlbum'}>{song.album}</span>
+            {song.year ? ` - ${song.year}` : ''}
           </span>
         </>
+      ) : (
+        <span className={classes.songInfo}>
+          <span className={'songArtist'}>{song.artist}</span> -{' '}
+          <span className={'songAlbum'}>{song.album}</span>
+          {song.year ? ` - ${song.year}` : ''}
+        </span>
       )}
     </Link>
   )