Add missing song information to players and apply EnableCoverAnimation to mobile player. (#1268)

* Disable mobile player cover animation when EnableCoverAnimation is set to false. Also increase cover art size and remove rounded borders.

* Display song album and year in mobile player view

* Remove default singer element from mobile player and reduce vertical white space

* Only add song year if it exists

* Add song year to desktop player when present

* Increase non-animated cover size to 85% and set a limit on the width of 600px.

* Explain what what the styles impact

* Remove unused style for songArtist

* Apply prettier

* Adjust player styles to handle nonsquare album art better. Should probably push this upstream too

* Also fix desktop player's handling of non square cover art.

ui/src/audioplayer/AudioTitle.js

@@ -28,11 +28,20 @@ const AudioTitle = React.memo(({ audioInfo, isMobile }) => {
         )}
       </span>
       {!isMobile && (
-        <div className={classes.artistAlbum}>
-          <span className={clsx(classes.songInfo, 'songInfo')}>
-            {`${song.artist} - ${song.album}`}
+        <span className={clsx(classes.songInfo)}>
+          {`${song.artist} - ${song.album}` +
+            (song.year ? ` - ${song.year}` : '')}
+        </span>
+      )}
+      {isMobile && (
+        <>
+          <span className={clsx(classes.songInfo, classes.songArtist)}>
+            {`${song.artist}`}
           </span>
-        </div>
+          <span className={clsx(classes.songInfo, classes.songAlbum)}>
+            {song.year ? `${song.album} - ${song.year}` : `${song.album}`}
+          </span>
+        </>
       )}
     </Link>
   )

ui/src/audioplayer/styles.js

@@ -14,6 +14,11 @@ const useStyle = makeStyles(
     },
     songInfo: {
       display: 'block',
+      marginTop: '2px',
+    },
+    songAlbum: {
+      fontStyle: 'italic',
+      fontSize: 'smaller',
     },
     qualityInfo: {
       marginTop: '-4px',
@@ -35,12 +40,39 @@ const useStyle = makeStyles(
         'pointer-events': 'none',
       },
       '& .music-player-panel .panel-content div.img-rotate': {
+        // Customize desktop player when cover animation is disabled
         animationDuration: (props) => !props.enableCoverAnimation && '0s',
         borderRadius: (props) => !props.enableCoverAnimation && '0',
+        // Fix cover display when image is not square
+        backgroundSize: 'contain',
+        backgroundPosition: 'center',
       },
-    },
-    artistAlbum: {
-      marginTop: '2px',
+      '& .react-jinke-music-player-mobile .react-jinke-music-player-mobile-cover':
+        {
+          // Customize mobile player when cover animation is disabled
+          borderRadius: (props) => !props.enableCoverAnimation && '0',
+          width: (props) => !props.enableCoverAnimation && '85%',
+          maxWidth: (props) => !props.enableCoverAnimation && '600px',
+          height: (props) => !props.enableCoverAnimation && 'auto',
+          // Fix cover display when image is not square
+          aspectRatio: '1/1',
+          display: 'flex',
+        },
+      '& .react-jinke-music-player-mobile .react-jinke-music-player-mobile-cover img.cover':
+        {
+          animationDuration: (props) => !props.enableCoverAnimation && '0s',
+          objectFit: 'contain', // Fix cover display when image is not square
+        },
+      // Hide old singer display
+      '& .react-jinke-music-player-mobile .react-jinke-music-player-mobile-singer':
+        {
+          display: 'none',
+        },
+      // Hide extra whitespace from switch div
+      '& .react-jinke-music-player-mobile .react-jinke-music-player-mobile-switch':
+        {
+          display: 'none',
+        },
     },
   }),
   { name: 'NDAudioPlayer' }