Use episode runtime for size limits when available

Closes #3482

frontend/src/Series/Details/EpisodeRow.css

@@ -22,6 +22,12 @@
   width: 95px;
 }
 
+.runtime {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 80px;
+}
+
 .size {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 

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

@@ -8,6 +8,7 @@ interface CssExports {
   'languages': string;
   'monitored': string;
   'releaseGroup': string;
+  'runtime': string;
   'size': string;
   'status': string;
   'subtitles': string;

frontend/src/Series/Details/EpisodeRow.js

@@ -13,6 +13,7 @@ import EpisodeFileLanguageConnector from 'EpisodeFile/EpisodeFileLanguageConnect
 import MediaInfoConnector from 'EpisodeFile/MediaInfoConnector';
 import * as mediaInfoTypes from 'EpisodeFile/mediaInfoTypes';
 import formatBytes from 'Utilities/Number/formatBytes';
+import formatRuntime from 'Utilities/Number/formatRuntime';
 import styles from './EpisodeRow.css';
 
 class EpisodeRow extends Component {
@@ -59,6 +60,7 @@ class EpisodeRow extends Component {
       sceneEpisodeNumber,
       sceneAbsoluteEpisodeNumber,
       airDateUtc,
+      runtime,
       title,
       useSceneNumbering,
       unverifiedSceneNumbering,
@@ -170,6 +172,17 @@ class EpisodeRow extends Component {
               );
             }
 
+            if (name === 'runtime') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.runtime}
+                >
+                  { formatRuntime(runtime) }
+                </TableRowCell>
+              );
+            }
+
             if (name === 'customFormats') {
               return (
                 <TableRowCell key={name}>
@@ -330,6 +343,7 @@ EpisodeRow.propTypes = {
   sceneEpisodeNumber: PropTypes.number,
   sceneAbsoluteEpisodeNumber: PropTypes.number,
   airDateUtc: PropTypes.string,
+  runtime: PropTypes.number,
   title: PropTypes.string.isRequired,
   isSaving: PropTypes.bool,
   useSceneNumbering: PropTypes.bool,

frontend/src/Store/Actions/episodeActions.js

@@ -59,6 +59,11 @@ export const defaultState = {
       label: 'Air Date',
       isVisible: true
     },
+    {
+      name: 'runtime',
+      label: 'Runtime',
+      isVisible: false
+    },
     {
       name: 'languages',
       label: 'Languages',

frontend/src/Utilities/Number/formatRuntime.ts

@@ -0,0 +1,21 @@
+function formatRuntime(runtime: number) {
+  if (!runtime) {
+    return '';
+  }
+
+  const hours = Math.floor(runtime / 60);
+  const minutes = runtime % 60;
+  const result = [];
+
+  if (hours) {
+    result.push(`${hours}h`);
+  }
+
+  if (minutes) {
+    result.push(`${minutes}m`);
+  }
+
+  return result.join(' ');
+}
+
+export default formatRuntime;