diff --git a/ui/src/audioplayer/AudioTitle.js b/ui/src/audioplayer/AudioTitle.js index 87860519..39c2389d 100644 --- a/ui/src/audioplayer/AudioTitle.js +++ b/ui/src/audioplayer/AudioTitle.js @@ -28,11 +28,20 @@ const AudioTitle = React.memo(({ audioInfo, isMobile }) => { )} {!isMobile && ( -
- - {`${song.artist} - ${song.album}`} + + {`${song.artist} - ${song.album}` + + (song.year ? ` - ${song.year}` : '')} + + )} + {isMobile && ( + <> + + {`${song.artist}`} -
+ + {song.year ? `${song.album} - ${song.year}` : `${song.album}`} + + )} ) diff --git a/ui/src/audioplayer/styles.js b/ui/src/audioplayer/styles.js index 257bdadb..99a84ed7 100644 --- a/ui/src/audioplayer/styles.js +++ b/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' }