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

@@ -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>

ui/src/playlist/PlaylistList.js

@@ -71,7 +71,6 @@ const PlaylistList = ({ permissions, ...props }) => (
       <Writable>
         <EditButton />
       </Writable>
-      />
     </Datagrid>
   </List>
 )