ReplayGain support + audio normalization (web player) (#1988)

* ReplayGain support

- extract ReplayGain tags from files, expose via native api
- use metadata to normalize audio in web player

* make pre-push happy

* remove unnecessary prints

* remove another unnecessary print

* add tooltips, see metadata

* address comments, use settings instead

* remove console.log

* use better language for gain modes

ui/src/common/QualityInfo.js

@@ -19,7 +19,7 @@ const useStyle = makeStyles(
   }
 )
 
-export const QualityInfo = ({ record, size, className }) => {
+export const QualityInfo = ({ record, size, gainMode, preAmp, className }) => {
   const classes = useStyle()
   let { suffix, bitRate } = record
   let info = placeholder
@@ -32,6 +32,12 @@ export const QualityInfo = ({ record, size, className }) => {
     }
   }
 
+  if (gainMode !== 'none') {
+    info += ` (${
+      (gainMode === 'album' ? record.albumGain : record.trackGain) + preAmp
+    } dB)`
+  }
+
   return (
     <Chip
       className={clsx(classes.chip, className)}
@@ -46,9 +52,11 @@ QualityInfo.propTypes = {
   record: PropTypes.object.isRequired,
   size: PropTypes.string,
   className: PropTypes.string,
+  gainMode: PropTypes.string,
 }
 
 QualityInfo.defaultProps = {
   record: {},
   size: 'small',
+  gainMode: 'none',
 }

ui/src/common/SongInfo.js

@@ -17,15 +17,21 @@ import inflection from 'inflection'
 import { BitrateField, SizeField } from './index'
 import { MultiLineTextField } from './MultiLineTextField'
 import { makeStyles } from '@material-ui/core/styles'
+import config from '../config'
 
 const useStyles = makeStyles({
+  gain: {
+    '&:after': {
+      content: (props) => (props.gain ? " ' db'" : ''),
+    },
+  },
   tableCell: {
     width: '17.5%',
   },
 })
 
 export const SongInfo = (props) => {
-  const classes = useStyles()
+  const classes = useStyles({ gain: config.enableReplayGain })
   const translate = useTranslate()
   const record = useRecordContext(props)
   const data = {
@@ -54,6 +60,15 @@ export const SongInfo = (props) => {
     data.playDate = <DateField record={record} source="playDate" showTime />
   }
 
+  if (config.enableReplayGain) {
+    data.albumGain = (
+      <NumberField source="rgAlbumGain" className={classes.gain} />
+    )
+    data.trackGain = (
+      <NumberField source="rgTrackGain" className={classes.gain} />
+    )
+  }
+
   return (
     <TableContainer>
       <Table aria-label="song details" size="small">