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.
51 lines
1.4 KiB
JavaScript
51 lines
1.4 KiB
JavaScript
import React from 'react'
|
|
import { useMediaQuery } from '@material-ui/core'
|
|
import { Link } from 'react-router-dom'
|
|
import clsx from 'clsx'
|
|
import { QualityInfo } from '../common'
|
|
import useStyle from './styles'
|
|
|
|
const AudioTitle = React.memo(({ audioInfo, isMobile }) => {
|
|
const classes = useStyle()
|
|
const className = classes.audioTitle
|
|
const isDesktop = useMediaQuery('(min-width:810px)')
|
|
|
|
if (!audioInfo.song) {
|
|
return ''
|
|
}
|
|
|
|
const song = audioInfo.song
|
|
const qi = { suffix: song.suffix, bitRate: song.bitRate }
|
|
|
|
return (
|
|
<Link to={`/album/${song.albumId}/show`} className={className}>
|
|
<span>
|
|
<span className={clsx(classes.songTitle, 'songTitle')}>
|
|
{song.title}
|
|
</span>
|
|
{isDesktop && (
|
|
<QualityInfo record={qi} className={classes.qualityInfo} />
|
|
)}
|
|
</span>
|
|
{!isMobile && (
|
|
<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>
|
|
<span className={clsx(classes.songInfo, classes.songAlbum)}>
|
|
{song.year ? `${song.album} - ${song.year}` : `${song.album}`}
|
|
</span>
|
|
</>
|
|
)}
|
|
</Link>
|
|
)
|
|
})
|
|
|
|
export default AudioTitle
|