Hide volume bar in lower resolutions (#889)
This gives more space for the song and artist names in the player * fix min-width of AlbumDetails * Fix song play time display * Song duration display fix#2 * Removed important * Resolve conflicts * Update Player.js * Change breakdown and hide volume Co-authored-by: Deluan <deluan@navidrome.org>
This commit is contained in:
parent
9f39f062d8
commit
e83a0b23a3
|
@ -51,6 +51,11 @@ const useStyle = makeStyles(
|
||||||
},
|
},
|
||||||
player: {
|
player: {
|
||||||
display: (props) => (props.visible ? 'block' : 'none'),
|
display: (props) => (props.visible ? 'block' : 'none'),
|
||||||
|
'@media screen and (max-width:810px)': {
|
||||||
|
'& .sound-operation': {
|
||||||
|
display: 'none',
|
||||||
|
},
|
||||||
|
},
|
||||||
'& .progress-bar-content': {
|
'& .progress-bar-content': {
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
flexDirection: 'column',
|
flexDirection: 'column',
|
||||||
|
@ -71,7 +76,7 @@ let audioInstance = null
|
||||||
const AudioTitle = React.memo(({ audioInfo, isMobile }) => {
|
const AudioTitle = React.memo(({ audioInfo, isMobile }) => {
|
||||||
const classes = useStyle()
|
const classes = useStyle()
|
||||||
const className = classes.audioTitle
|
const className = classes.audioTitle
|
||||||
const isDesktop = useMediaQuery('(min-width:960px)')
|
const isDesktop = useMediaQuery('(min-width:810px)')
|
||||||
|
|
||||||
if (!audioInfo.name) {
|
if (!audioInfo.name) {
|
||||||
return ''
|
return ''
|
||||||
|
@ -115,7 +120,7 @@ const Player = () => {
|
||||||
const classes = useStyle({ visible })
|
const classes = useStyle({ visible })
|
||||||
// Match the medium breakpoint defined in the material-ui theme
|
// Match the medium breakpoint defined in the material-ui theme
|
||||||
// See https://material-ui.com/customization/breakpoints/#breakpoints
|
// See https://material-ui.com/customization/breakpoints/#breakpoints
|
||||||
const isDesktop = useMediaQuery('(min-width:960px)')
|
const isDesktop = useMediaQuery('(min-width:810px)')
|
||||||
|
|
||||||
const nextSong = useCallback(() => {
|
const nextSong = useCallback(() => {
|
||||||
const idx = queue.queue.findIndex(
|
const idx = queue.queue.findIndex(
|
||||||
|
|
Loading…
Reference in New Issue