Made the Player behaviour more consistent

ui/src/App.js

@@ -19,7 +19,7 @@ import customRoutes from './routes'
 import {
   themeReducer,
   addToPlaylistDialogReducer,
-  playQueueReducer,
+  playerReducer,
   albumViewReducer,
   activityReducer,
   settingsReducer,
@@ -48,7 +48,7 @@ const App = () => (
       dataProvider,
       history,
       customReducers: {
-        queue: playQueueReducer,
+        player: playerReducer,
         albumView: albumViewReducer,
         theme: themeReducer,
         addToPlaylistDialog: addToPlaylistDialogReducer,

ui/src/actions/index.js

@@ -1,4 +1,4 @@
-export * from './audioplayer'
+export * from './player'
 export * from './themes'
 export * from './albumView'
 export * from './dialogs'

ui/src/actions/audioplayer.js → ui/src/actions/player.js

@@ -3,7 +3,6 @@ export const PLAYER_PLAY_NEXT = 'PLAYER_PLAY_NEXT'
 export const PLAYER_SET_TRACK = 'PLAYER_SET_TRACK'
 export const PLAYER_SYNC_QUEUE = 'PLAYER_SYNC_QUEUE'
 export const PLAYER_CLEAR_QUEUE = 'PLAYER_CLEAR_QUEUE'
-export const PLAYER_SCROBBLE = 'PLAYER_SCROBBLE'
 export const PLAYER_PLAY_TRACKS = 'PLAYER_PLAY_TRACKS'
 export const PLAYER_CURRENT = 'PLAYER_CURRENT'
 export const PLAYER_SET_VOLUME = 'PLAYER_SET_VOLUME'
@@ -79,12 +78,6 @@ export const clearQueue = () => ({
   type: PLAYER_CLEAR_QUEUE,
 })
 
-export const scrobble = (id, submit) => ({
-  type: PLAYER_SCROBBLE,
-  id,
-  submit,
-})
-
 export const currentPlaying = (audioInfo) => ({
   type: PLAYER_CURRENT,
   data: audioInfo,

ui/src/audioplayer/AudioTitle.js

@@ -0,0 +1,41 @@
+import React from 'react'
+import { useMediaQuery } from '@material-ui/core'
+import { Link } from 'react-router-dom'
+import clsx from 'clsx'
+import { QualityInfo } from '../common'
+import useStyle from './styles'
+
+const AudioTitle = React.memo(({ audioInfo, isMobile }) => {
+  const classes = useStyle()
+  const className = classes.audioTitle
+  const isDesktop = useMediaQuery('(min-width:810px)')
+
+  if (!audioInfo.song) {
+    return ''
+  }
+
+  const song = audioInfo.song
+  const qi = { suffix: song.suffix, bitRate: song.bitRate }
+
+  return (
+    <Link to={`/album/${song.albumId}/show`} className={className}>
+      <span>
+        <span className={clsx(classes.songTitle, 'songTitle')}>
+          {song.title}
+        </span>
+        {isDesktop && (
+          <QualityInfo record={qi} className={classes.qualityInfo} />
+        )}
+      </span>
+      {!isMobile && (
+        <div className={classes.artistAlbum}>
+          <span className={clsx(classes.songInfo, 'songInfo')}>
+            {`${song.artist} - ${song.album}`}
+          </span>
+        </div>
+      )}
+    </Link>
+  )
+})
+
+export default AudioTitle