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