New: Optionally show Custom Format Score for episodes on Series Details

frontend/src/Series/Details/EpisodeRow.css

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

frontend/src/Series/Details/EpisodeRow.css.d.ts

@@ -3,6 +3,7 @@
 interface CssExports {
   'audio': string;
   'audioLanguages': string;
+  'customFormatScore': string;
   'episodeNumber': string;
   'episodeNumberAnime': string;
   'languages': string;

frontend/src/Series/Details/EpisodeRow.js

@@ -4,6 +4,7 @@ import MonitorToggleButton from 'Components/MonitorToggleButton';
 import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
+import Tooltip from 'Components/Tooltip/Tooltip';
 import EpisodeFormats from 'Episode/EpisodeFormats';
 import EpisodeNumber from 'Episode/EpisodeNumber';
 import EpisodeSearchCellConnector from 'Episode/EpisodeSearchCellConnector';
@@ -12,7 +13,9 @@ import EpisodeTitleLink from 'Episode/EpisodeTitleLink';
 import EpisodeFileLanguageConnector from 'EpisodeFile/EpisodeFileLanguageConnector';
 import MediaInfoConnector from 'EpisodeFile/MediaInfoConnector';
 import * as mediaInfoTypes from 'EpisodeFile/mediaInfoTypes';
+import { tooltipPositions } from 'Helpers/Props';
 import formatBytes from 'Utilities/Number/formatBytes';
+import formatPreferredWordScore from 'Utilities/Number/formatPreferredWordScore';
 import formatRuntime from 'Utilities/Number/formatRuntime';
 import styles from './EpisodeRow.css';
 
@@ -72,6 +75,7 @@ class EpisodeRow extends Component {
       episodeFileSize,
       releaseGroup,
       customFormats,
+      customFormatScore,
       alternateTitles,
       columns
     } = this.props;
@@ -193,6 +197,24 @@ class EpisodeRow extends Component {
               );
             }
 
+            if (name === 'customFormatScore') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.customFormatScore}
+                >
+                  <Tooltip
+                    anchor={formatPreferredWordScore(
+                      customFormatScore,
+                      customFormats.length
+                    )}
+                    tooltip={<EpisodeFormats formats={customFormats} />}
+                    position={tooltipPositions.BOTTOM}
+                  />
+                </TableRowCell>
+              );
+            }
+
             if (name === 'languages') {
               return (
                 <TableRowCell
@@ -355,6 +377,7 @@ EpisodeRow.propTypes = {
   episodeFileSize: PropTypes.number,
   releaseGroup: PropTypes.string,
   customFormats: PropTypes.arrayOf(PropTypes.object),
+  customFormatScore: PropTypes.number.isRequired,
   mediaInfo: PropTypes.object,
   alternateTitles: PropTypes.arrayOf(PropTypes.object).isRequired,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,

frontend/src/Series/Details/EpisodeRowConnector.js

@@ -19,6 +19,7 @@ function createMapStateToProps() {
         episodeFileSize: episodeFile ? episodeFile.size : null,
         releaseGroup: episodeFile ? episodeFile.releaseGroup : null,
         customFormats: episodeFile ? episodeFile.customFormats : [],
+        customFormatScore: episodeFile ? episodeFile.customFormatScore : 0,
         alternateTitles: series.alternateTitles
       };
     }