Hide the player when queue is empty, instead of removing it from the DOM

ui/src/audioplayer/Player.js

@@ -24,16 +24,25 @@ const useStyle = makeStyles((theme) => ({
     textDecoration: 'none',
     color: theme.palette.primary.light,
   },
+  player: {
+    display: (props) => (props.visible ? 'block' : 'none'),
+  },
 }))
 
 let audioInstance = null
 
 const Player = () => {
-  const classes = useStyle()
   const translate = useTranslate()
   const currentTheme = useSelector((state) => state.theme)
   const theme = themes[currentTheme] || themes.DarkTheme
   const playerTheme = (theme.player && theme.player.theme) || 'dark'
+  const dataProvider = useDataProvider()
+  const dispatch = useDispatch()
+  const queue = useSelector((state) => state.queue)
+  const { authenticated } = useAuthState()
+
+  const visible = authenticated && queue.queue.length > 0
+  const classes = useStyle({ visible })
 
   const audioTitle = useCallback(
     (audioInfo) => (
@@ -95,12 +104,7 @@ const Player = () => {
     },
   }
 
-  const dataProvider = useDataProvider()
-  const dispatch = useDispatch()
-  const queue = useSelector((state) => state.queue)
-  const { authenticated } = useAuthState()
   const current = queue.current || {}
-
   const options = useMemo(() => {
     return {
       ...defaultOptions,
@@ -111,7 +115,14 @@ const Player = () => {
       extendsContent: <PlayerToolbar id={current.trackId} />,
       defaultVolume: queue.volume,
     }
-  }, [queue.clear, queue.queue, queue.volume, queue.playIndex, current, defaultOptions])
+  }, [
+    queue.clear,
+    queue.queue,
+    queue.volume,
+    queue.playIndex,
+    current,
+    defaultOptions,
+  ])
 
   const OnAudioListsChange = useCallback(
     (currentPlayIndex, audioLists) => {
@@ -196,7 +207,10 @@ const Player = () => {
     }
   }, [])
 
-  if (authenticated && options.audioLists.length > 0) {
+  if (!visible) {
+    document.title = 'Navidrome'
+  }
+
   return (
     <Hotkeys
       keyName="space"
@@ -207,6 +221,7 @@ const Player = () => {
       <ReactJkMusicPlayer
         {...options}
         quietUpdate
+        className={classes.player}
         onAudioListsChange={OnAudioListsChange}
         onAudioProgress={OnAudioProgress}
         onAudioPlay={OnAudioPlay}
@@ -220,9 +235,6 @@ const Player = () => {
       />
     </Hotkeys>
   )
-  }
-  document.title = 'Navidrome'
-  return null
 }
 
 export default Player