From e83a0b23a34898f3612bc59b8d08666cc67402c8 Mon Sep 17 00:00:00 2001 From: Dnouv <61188295+Dnouv@users.noreply.github.com> Date: Sat, 24 Apr 2021 04:34:37 +0530 Subject: [PATCH] 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 --- ui/src/audioplayer/Player.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/ui/src/audioplayer/Player.js b/ui/src/audioplayer/Player.js index 4f984b14..14b0363e 100644 --- a/ui/src/audioplayer/Player.js +++ b/ui/src/audioplayer/Player.js @@ -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(