Change size and position of QualityInfo in the Player

ui/src/audioplayer/Player.js

@@ -25,6 +25,7 @@ import PlayerToolbar from './PlayerToolbar'
 import { sendNotification } from '../utils'
 import { keyMap } from '../hotkeys'
 import useCurrentTheme from '../themes/useCurrentTheme'
+import { QualityInfo } from '../common/QualityInfo'
 
 const useStyle = makeStyles(
   (theme) => ({
@@ -35,6 +36,9 @@ const useStyle = makeStyles(
         fontWeight: 'bold',
       },
     },
+    qualityInfo: {
+      marginTop: '-2px',
+    },
     player: {
       display: (props) => (props.visible ? 'block' : 'none'),
     },
@@ -47,14 +51,22 @@ let audioInstance = null
 const AudioTitle = React.memo(({ audioInfo, isMobile }) => {
   const classes = useStyle()
   const className = classes.audioTitle
+  const isDesktop = useMediaQuery('(min-width:960px)')
 
   if (!audioInfo.name) {
     return ''
   }
 
+  const qi = { suffix: audioInfo.suffix, bitRate: audioInfo.bitRate }
+
   return (
     <Link to={`/album/${audioInfo.albumId}/show`} className={className}>
-      <span className={`${className} songTitle`}>{audioInfo.name}</span>
+      <span className={`${className} songTitle`}>
+        {audioInfo.name}
+        {isDesktop && (
+          <QualityInfo record={qi} className={classes.qualityInfo} />
+        )}
+      </span>
       {!isMobile && (
         <>
           <br />

ui/src/audioplayer/PlayerToolbar.js

@@ -4,7 +4,6 @@ import { useGetOne } from 'react-admin'
 import { GlobalHotKeys } from 'react-hotkeys'
 import { LoveButton, useToggleLove } from '../common'
 import { keyMap } from '../hotkeys'
-import { QualityInfo } from '../common/QualityInfo'
 import config from '../config'
 
 const Placeholder = () =>
@@ -21,7 +20,6 @@ const Toolbar = ({ id }) => {
   }
   return (
     <>
-      {data && <QualityInfo record={data} sortable={false} />}
       <GlobalHotKeys keyMap={keyMap} handlers={handlers} allowChanges />
       {config.enableFavourites && (
         <LoveButton

ui/src/common/QualityInfo.js

@@ -2,11 +2,25 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import Chip from '@material-ui/core/Chip'
 import config from '../config'
+import { makeStyles } from '@material-ui/core'
+import clsx from 'clsx'
 
 const llFormats = new Set(config.losslessFormats.split(','))
 const placeholder = 'N/A'
 
-export const QualityInfo = ({ record, size }) => {
+const useStyle = makeStyles(
+  (theme) => ({
+    chip: {
+      transform: 'scale(0.8)',
+    },
+  }),
+  {
+    name: 'NDQualityInfo',
+  }
+)
+
+export const QualityInfo = ({ record, size, className }) => {
+  const classes = useStyle()
   let { suffix, bitRate } = record
   let info = placeholder
 
@@ -18,12 +32,20 @@ export const QualityInfo = ({ record, size }) => {
     }
   }
 
-  return <Chip variant="outlined" size={size} label={info} />
+  return (
+    <Chip
+      className={clsx(classes.chip, className)}
+      variant="outlined"
+      size={size}
+      label={info}
+    />
+  )
 }
 
 QualityInfo.propTypes = {
   record: PropTypes.object.isRequired,
   size: PropTypes.string,
+  className: PropTypes.string,
 }
 
 QualityInfo.defaultProps = {

ui/src/reducers/playQueue.js

@@ -27,6 +27,8 @@ const mapToAudioLists = (item) => {
     albumId: item.albumId,
     artistId: item.albumArtistId,
     duration: item.duration,
+    suffix: item.suffix,
+    bitRate: item.bitRate,
     musicSrc: subsonic.url('stream', id, { ts: true }),
     cover: subsonic.getCoverArtUrl(
       {