New: Custom Formats on Movie Details File Tab

frontend/src/MovieFile/Editor/MovieFileEditorRow.css

@@ -5,6 +5,7 @@
 }
 
 .quality,
+.formats,
 .language {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 }

frontend/src/MovieFile/Editor/MovieFileEditorRow.js

@@ -7,6 +7,7 @@ import TableRow from 'Components/Table/TableRow';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRowCellButton from 'Components/Table/Cells/TableRowCellButton';
 import MovieQuality from 'Movie/MovieQuality';
+import MovieFormats from 'Movie/MovieFormats';
 import MovieLanguage from 'Movie/MovieLanguage';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import Icon from 'Components/Icon';
@@ -160,6 +161,14 @@ class MovieFileEditorRow extends Component {
           }
         </TableRowCellButton>
 
+        <TableRowCell
+          className={styles.formats}
+        >
+          <MovieFormats
+            formats={quality.customFormats}
+          />
+        </TableRowCell>
+
         <TableRowCell className={styles.actions}>
           <Popover
             anchor={

frontend/src/MovieFile/Editor/MovieFileEditorTableContent.js

@@ -1,5 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import { icons } from 'Helpers/Props';
+import Icon from 'Components/Icon';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import MovieFileEditorRow from './MovieFileEditorRow';
@@ -36,9 +38,14 @@ const columns = [
     label: 'Quality',
     isVisible: true
   },
+  {
+    name: 'quality.customFormats',
+    label: 'Formats',
+    isVisible: true
+  },
   {
     name: 'action',
-    label: 'Action',
+    label: React.createElement(Icon, { name: icons.ADVANCED_SETTINGS }),
     isVisible: true
   }
 ];