New: Add Custom Formats to episode details modal

frontend/src/Episode/Summary/EpisodeFileRow.css

@@ -11,6 +11,12 @@
   width: 100px;
 }
 
+.customFormats {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 175px;
+}
+
 .actions {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 

frontend/src/Episode/Summary/EpisodeFileRow.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Icon from 'Components/Icon';
+import Label from 'Components/Label';
 import IconButton from 'Components/Link/IconButton';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
@@ -52,6 +53,7 @@ class EpisodeFileRow extends Component {
       size,
       languages,
       quality,
+      customFormats,
       languageCutoffNotMet,
       qualityCutoffNotMet,
       mediaInfo,
@@ -115,6 +117,25 @@ class EpisodeFileRow extends Component {
               );
             }
 
+            if (name === 'customFormats') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.customFormats}
+                >
+                  {
+                    customFormats.map((format) => {
+                      return (
+                        <Label key={format.id}>
+                          {format.name}
+                        </Label>
+                      );
+                    })
+                  }
+                </TableRowCell>
+              );
+            }
+
             if (name === 'actions') {
               return (
                 <TableRowCell
@@ -171,6 +192,7 @@ EpisodeFileRow.propTypes = {
   languageCutoffNotMet: PropTypes.bool.isRequired,
   quality: PropTypes.object.isRequired,
   qualityCutoffNotMet: PropTypes.bool.isRequired,
+  customFormats: PropTypes.arrayOf(PropTypes.object),
   mediaInfo: PropTypes.object,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
   onDeleteEpisodeFile: PropTypes.func.isRequired

frontend/src/Episode/Summary/EpisodeSummary.js

@@ -35,6 +35,12 @@ const columns = [
     isSortable: false,
     isVisible: true
   },
+  {
+    name: 'customFormats',
+    label: 'Formats',
+    isSortable: false,
+    isVisible: true
+  },
   {
     name: 'actions',
     label: '',
@@ -86,6 +92,7 @@ class EpisodeSummary extends Component {
       size,
       languages,
       quality,
+      customFormats,
       languageCutoffNotMet,
       qualityCutoffNotMet,
       onDeleteEpisodeFile
@@ -136,6 +143,7 @@ class EpisodeSummary extends Component {
                   languageCutoffNotMet={languageCutoffNotMet}
                   quality={quality}
                   qualityCutoffNotMet={qualityCutoffNotMet}
+                  customFormats={customFormats}
                   mediaInfo={mediaInfo}
                   columns={columns}
                   onDeleteEpisodeFile={onDeleteEpisodeFile}
@@ -172,6 +180,7 @@ EpisodeSummary.propTypes = {
   languageCutoffNotMet: PropTypes.bool,
   quality: PropTypes.object,
   qualityCutoffNotMet: PropTypes.bool,
+  customFormats: PropTypes.arrayOf(PropTypes.object),
   onDeleteEpisodeFile: PropTypes.func.isRequired
 };
 

frontend/src/Episode/Summary/EpisodeSummaryConnector.js

@@ -31,7 +31,8 @@ function createMapStateToProps() {
         languages,
         languageCutoffNotMet,
         quality,
-        qualityCutoffNotMet
+        qualityCutoffNotMet,
+        customFormats
       } = episodeFile;
 
       return {
@@ -45,7 +46,8 @@ function createMapStateToProps() {
         languages,
         languageCutoffNotMet,
         quality,
-        qualityCutoffNotMet
+        qualityCutoffNotMet,
+        customFormats
       };
     }
   );