From 6da9dee7d345b654fae3ab22688496d8bd880841 Mon Sep 17 00:00:00 2001
From: Shishir A S <shishir.srik@gmail.com>
Date: Thu, 22 Apr 2021 19:23:33 +0530
Subject: [PATCH] Fade in QualityInfo while hovering on Song title  (#1041)

* feat(Player/QualityInfo) : Animate Quality Info + Increased audio player dimensions

Signed-off-by: Shishir <shishir.srik@gmail.com>

* fix(Player.js) : Converted JS hover functionality to pure CSS

Signed-off-by: Shishir <shishir.srik@gmail.com>

* Removed unused useState

* fix(Player) : Reverted player height adjustment

Signed-off-by: Shishir <shishir.srik@gmail.com>
---
 ui/src/audioplayer/Player.js    | 22 +++++++++++++++++-----
 ui/src/playlist/PlaylistList.js |  1 -
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/ui/src/audioplayer/Player.js b/ui/src/audioplayer/Player.js
index 536dce127..5a5e3f57e 100644
--- a/ui/src/audioplayer/Player.js
+++ b/ui/src/audioplayer/Player.js
@@ -37,10 +37,20 @@ const useStyle = makeStyles(
       },
     },
     qualityInfo: {
-      marginTop: '-2px',
+      marginTop: '-4px',
+      opacity: 0,
+      transition: 'all 500ms ease-out',
+    },
+    audioName: {
+      '&:hover + $qualityInfo': {
+        opacity: 1,
+      },
     },
     player: {
       display: (props) => (props.visible ? 'block' : 'none'),
+    },
+    artistAlbum: {
+      marginTop: '2px',
       '& .play-mode-title': {
         'pointer-events': 'none',
       },
@@ -65,7 +75,7 @@ const AudioTitle = React.memo(({ audioInfo, isMobile }) => {
   return (
     <Link to={`/album/${audioInfo.albumId}/show`} className={className}>
       <span className={`${className} songTitle`}>
-        {audioInfo.name}
+        <span className={classes.audioName}>{audioInfo.name}</span>
         {isDesktop && (
           <QualityInfo record={qi} className={classes.qualityInfo} />
         )}
@@ -73,9 +83,11 @@ const AudioTitle = React.memo(({ audioInfo, isMobile }) => {
       {!isMobile && (
         <>
           <br />
-          <span className={`${className} songInfo`}>
-            {`${audioInfo.singer} - ${audioInfo.album}`}
-          </span>
+          <div className={classes.artistAlbum}>
+            <span className={`${className} songInfo`}>
+              {`${audioInfo.singer} - ${audioInfo.album}`}
+            </span>
+          </div>
         </>
       )}
     </Link>
diff --git a/ui/src/playlist/PlaylistList.js b/ui/src/playlist/PlaylistList.js
index 56d0e5d98..1baf9015f 100644
--- a/ui/src/playlist/PlaylistList.js
+++ b/ui/src/playlist/PlaylistList.js
@@ -71,7 +71,6 @@ const PlaylistList = ({ permissions, ...props }) => (
       <Writable>
         <EditButton />
       </Writable>
-      />
     </Datagrid>
   </List>
 )