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 (