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.
This commit is contained in:
parent
a20bd5fe05
commit
aa72d3d41b
|
@ -28,11 +28,20 @@ const AudioTitle = React.memo(({ audioInfo, isMobile }) => {
|
||||||
)}
|
)}
|
||||||
</span>
|
</span>
|
||||||
{!isMobile && (
|
{!isMobile && (
|
||||||
<div className={classes.artistAlbum}>
|
<span className={clsx(classes.songInfo)}>
|
||||||
<span className={clsx(classes.songInfo, 'songInfo')}>
|
{`${song.artist} - ${song.album}` +
|
||||||
{`${song.artist} - ${song.album}`}
|
(song.year ? ` - ${song.year}` : '')}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{isMobile && (
|
||||||
|
<>
|
||||||
|
<span className={clsx(classes.songInfo, classes.songArtist)}>
|
||||||
|
{`${song.artist}`}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
<span className={clsx(classes.songInfo, classes.songAlbum)}>
|
||||||
|
{song.year ? `${song.album} - ${song.year}` : `${song.album}`}
|
||||||
|
</span>
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
</Link>
|
</Link>
|
||||||
)
|
)
|
||||||
|
|
|
@ -14,6 +14,11 @@ const useStyle = makeStyles(
|
||||||
},
|
},
|
||||||
songInfo: {
|
songInfo: {
|
||||||
display: 'block',
|
display: 'block',
|
||||||
|
marginTop: '2px',
|
||||||
|
},
|
||||||
|
songAlbum: {
|
||||||
|
fontStyle: 'italic',
|
||||||
|
fontSize: 'smaller',
|
||||||
},
|
},
|
||||||
qualityInfo: {
|
qualityInfo: {
|
||||||
marginTop: '-4px',
|
marginTop: '-4px',
|
||||||
|
@ -35,12 +40,39 @@ const useStyle = makeStyles(
|
||||||
'pointer-events': 'none',
|
'pointer-events': 'none',
|
||||||
},
|
},
|
||||||
'& .music-player-panel .panel-content div.img-rotate': {
|
'& .music-player-panel .panel-content div.img-rotate': {
|
||||||
|
// Customize desktop player when cover animation is disabled
|
||||||
animationDuration: (props) => !props.enableCoverAnimation && '0s',
|
animationDuration: (props) => !props.enableCoverAnimation && '0s',
|
||||||
borderRadius: (props) => !props.enableCoverAnimation && '0',
|
borderRadius: (props) => !props.enableCoverAnimation && '0',
|
||||||
|
// Fix cover display when image is not square
|
||||||
|
backgroundSize: 'contain',
|
||||||
|
backgroundPosition: 'center',
|
||||||
},
|
},
|
||||||
},
|
'& .react-jinke-music-player-mobile .react-jinke-music-player-mobile-cover':
|
||||||
artistAlbum: {
|
{
|
||||||
marginTop: '2px',
|
// 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' }
|
{ name: 'NDAudioPlayer' }
|
||||||
|
|
Loading…
Reference in New Issue