diff --git a/ui/src/audioplayer/Player.js b/ui/src/audioplayer/Player.js index 6fa2e0230..5131ce97b 100644 --- a/ui/src/audioplayer/Player.js +++ b/ui/src/audioplayer/Player.js @@ -1,4 +1,4 @@ -import React, { useCallback, useMemo, useState } from 'react' +import React, { useCallback, useEffect, useMemo, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import { useMediaQuery } from '@material-ui/core' import { ThemeProvider } from '@material-ui/core/styles' @@ -36,6 +36,9 @@ const Player = () => { const [preloaded, setPreload] = useState(false) const [audioInstance, setAudioInstance] = useState(null) const isDesktop = useMediaQuery('(min-width:810px)') + const isMobilePlayer = useMediaQuery( + '(max-width: 768px) and (orientation : portrait)' + ) const { authenticated } = useAuthState() const visible = authenticated && playerState.queue.length > 0 const classes = useStyle({ @@ -86,9 +89,9 @@ const Player = () => { autoPlay: playerState.clear || playerState.playIndex === 0, clearPriorAudioLists: playerState.clear, extendsContent: , - defaultVolume: playerState.volume, + defaultVolume: isMobilePlayer ? 1 : playerState.volume, } - }, [playerState, defaultOptions]) + }, [playerState, defaultOptions, isMobilePlayer]) const onAudioListsChange = useCallback( (_, audioLists, audioInfo) => dispatch(syncQueue(audioInfo, audioLists)), @@ -215,6 +218,12 @@ const Player = () => { [audioInstance, playerState] ) + useEffect(() => { + if (isMobilePlayer && audioInstance) { + audioInstance.volume = 1 + } + }, [isMobilePlayer, audioInstance]) + return (