mirrors
/
navidrome
mirror of https://github.com/navidrome/navidrome.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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:
Dnouv 2021-04-24 04:34:37 +05:30 committed by GitHub
parent 9f39f062d8
commit e83a0b23a3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ui/src/audioplayer/Player.js
View File

@ -51,6 +51,11 @@ const useStyle = makeStyles(
},
player: {
display: (props) => (props.visible ? 'block' : 'none'),
'@media screen and (max-width:810px)': {
'& .sound-operation': {
display: 'none',
},
},
'& .progress-bar-content': {
display: 'flex',
flexDirection: 'column',
@ -71,7 +76,7 @@ let audioInstance = null
const AudioTitle = React.memo(({ audioInfo, isMobile }) => {
const classes = useStyle()
const className = classes.audioTitle
const isDesktop = useMediaQuery('(min-width:960px)')
const isDesktop = useMediaQuery('(min-width:810px)')
if (!audioInfo.name) {
return ''
@ -115,7 +120,7 @@ const Player = () => {
const classes = useStyle({ visible })
// Match the medium breakpoint defined in the material-ui theme
// See https://material-ui.com/customization/breakpoints/#breakpoints
const isDesktop = useMediaQuery('(min-width:960px)')
const isDesktop = useMediaQuery('(min-width:810px)')
const nextSong = useCallback(() => {
const idx = queue.queue.findIndex(