Tucker Kern
aa72d3d41b
* 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.
82 lines
2.5 KiB
JavaScript
82 lines
2.5 KiB
JavaScript
import { makeStyles } from '@material-ui/core/styles'
|
|
|
|
const useStyle = makeStyles(
|
|
(theme) => ({
|
|
audioTitle: {
|
|
textDecoration: 'none',
|
|
color: theme.palette.primary.dark,
|
|
},
|
|
songTitle: {
|
|
fontWeight: 'bold',
|
|
'&:hover + $qualityInfo': {
|
|
opacity: 1,
|
|
},
|
|
},
|
|
songInfo: {
|
|
display: 'block',
|
|
marginTop: '2px',
|
|
},
|
|
songAlbum: {
|
|
fontStyle: 'italic',
|
|
fontSize: 'smaller',
|
|
},
|
|
qualityInfo: {
|
|
marginTop: '-4px',
|
|
opacity: 0,
|
|
transition: 'all 500ms ease-out',
|
|
},
|
|
player: {
|
|
display: (props) => (props.visible ? 'block' : 'none'),
|
|
'@media screen and (max-width:810px)': {
|
|
'& .sound-operation': {
|
|
display: 'none',
|
|
},
|
|
},
|
|
'& .progress-bar-content': {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
},
|
|
'& .play-mode-title': {
|
|
'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',
|
|
},
|
|
'& .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' }
|
|
)
|
|
|
|
export default useStyle
|