New: Show CustomFormats on Interactive Search Results

frontend/src/InteractiveSearch/InteractiveSearchContent.js

@@ -60,6 +60,12 @@ const columns = [
     isSortable: true,
     isVisible: true
   },
+  {
+    name: 'customFormat',
+    label: 'Formats',
+    isSortable: true,
+    isVisible: true
+  },
   {
     name: 'rejections',
     label: React.createElement(Icon, { name: icons.DANGER }),

frontend/src/InteractiveSearch/InteractiveSearchRow.css

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

frontend/src/InteractiveSearch/InteractiveSearchRow.js

@@ -15,6 +15,7 @@ import ProtocolLabel from 'Activity/Queue/ProtocolLabel';
 import Peers from './Peers';
 import styles from './InteractiveSearchRow.css';
 import MovieQuality from 'Movie/MovieQuality';
+import MovieFormats from 'Movie/MovieFormats';
 import MovieLanguage from 'Movie/MovieLanguage';
 
 function getDownloadIcon(isGrabbing, isGrabbed, grabError) {
@@ -173,6 +174,12 @@ class InteractiveSearchRow extends Component {
           />
         </TableRowCell>
 
+        <TableRowCell className={styles.customFormat}>
+          <MovieFormats
+            formats={quality.customFormats}
+          />
+        </TableRowCell>
+
         <TableRowCell className={styles.rejected}>
           {
             !!rejections.length &&

frontend/src/Movie/MovieFormats.js

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { kinds } from 'Helpers/Props';
+import Label from 'Components/Label';
+
+function MovieFormats({ formats }) {
+  return (
+    <div>
+      {
+        formats.map((format) => {
+          return (
+            <Label
+              key={format.id}
+              kind={kinds.INFO}
+            >
+              {format.name}
+            </Label>
+          );
+        })
+      }
+    </div>
+  );
+}
+
+MovieFormats.propTypes = {
+  formats: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+
+export default MovieFormats;