New: Optionally show Custom Format Score for tracks on Album Details

(cherry picked from commit eadd0c4e101af0386360bbff859f80e008a5be7c)

Closes #3872

frontend/src/Album/Details/TrackRow.css

@@ -28,3 +28,9 @@
 
   width: 100px;
 }
+
+.customFormatScore {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 55px;
+}

frontend/src/Album/Details/TrackRow.css.d.ts

@@ -2,6 +2,7 @@
 // Please do not change this file!
 interface CssExports {
   'audio': string;
+  'customFormatScore': string;
   'duration': string;
   'monitored': string;
   'status': string;

frontend/src/Album/Details/TrackRow.js

@@ -1,11 +1,15 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import AlbumFormats from 'Album/AlbumFormats';
 import EpisodeStatusConnector from 'Album/EpisodeStatusConnector';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
+import Tooltip from 'Components/Tooltip/Tooltip';
+import { tooltipPositions } from 'Helpers/Props';
 import MediaInfoConnector from 'TrackFile/MediaInfoConnector';
 import * as mediaInfoTypes from 'TrackFile/mediaInfoTypes';
 import formatTimeSpan from 'Utilities/Date/formatTimeSpan';
+import formatPreferredWordScore from 'Utilities/Number/formatPreferredWordScore';
 import TrackActionsCell from './TrackActionsCell';
 import styles from './TrackRow.css';
 
@@ -24,6 +28,8 @@ class TrackRow extends Component {
       title,
       duration,
       trackFilePath,
+      customFormats,
+      customFormatScore,
       columns,
       deleteTrackFile
     } = this.props;
@@ -111,6 +117,34 @@ class TrackRow extends Component {
               );
             }
 
+            if (name === 'customFormats') {
+              return (
+                <TableRowCell key={name}>
+                  <AlbumFormats
+                    formats={customFormats}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'customFormatScore') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.customFormatScore}
+                >
+                  <Tooltip
+                    anchor={formatPreferredWordScore(
+                      customFormatScore,
+                      customFormats.length
+                    )}
+                    tooltip={<AlbumFormats formats={customFormats} />}
+                    position={tooltipPositions.BOTTOM}
+                  />
+                </TableRowCell>
+              );
+            }
+
             if (name === 'status') {
               return (
                 <TableRowCell
@@ -158,8 +192,14 @@ TrackRow.propTypes = {
   duration: PropTypes.number.isRequired,
   isSaving: PropTypes.bool,
   trackFilePath: PropTypes.string,
+  customFormats: PropTypes.arrayOf(PropTypes.object),
+  customFormatScore: PropTypes.number.isRequired,
   mediaInfo: PropTypes.object,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired
 };
 
+TrackRow.defaultProps = {
+  customFormats: []
+};
+
 export default TrackRow;

frontend/src/Album/Details/TrackRowConnector.js

@@ -10,7 +10,9 @@ function createMapStateToProps() {
     createTrackFileSelector(),
     (id, trackFile) => {
       return {
-        trackFilePath: trackFile ? trackFile.path : null
+        trackFilePath: trackFile ? trackFile.path : null,
+        customFormats: trackFile ? trackFile.customFormats : [],
+        customFormatScore: trackFile ? trackFile.customFormatScore : 0
       };
     }
   );

frontend/src/Store/Actions/trackActions.js

@@ -1,5 +1,7 @@
+import React from 'react';
 import { createAction } from 'redux-actions';
-import { sortDirections } from 'Helpers/Props';
+import Icon from 'Components/Icon';
+import { icons, sortDirections } from 'Helpers/Props';
 import { createThunk, handleThunks } from 'Store/thunks';
 import translate from 'Utilities/String/translate';
 import createFetchHandler from './Creators/createFetchHandler';
@@ -56,6 +58,20 @@ export const defaultState = {
       label: translate('AudioInfo'),
       isVisible: true
     },
+    {
+      name: 'customFormats',
+      label: 'Formats',
+      isVisible: false
+    },
+    {
+      name: 'customFormatScore',
+      columnLabel: translate('CustomFormatScore'),
+      label: React.createElement(Icon, {
+        name: icons.SCORE,
+        title: translate('CustomFormatScore')
+      }),
+      isVisible: false
+    },
     {
       name: 'status',
       label: translate('Status'),