New: Custom Format Updates (#8067)

frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.js

@@ -64,6 +64,15 @@ const columns = [
     isSortable: true,
     isVisible: true
   },
+  {
+    name: 'customFormats',
+    label: React.createElement(Icon, {
+      name: icons.INTERACTIVE,
+      title: translate('CustomFormat')
+    }),
+    isSortable: true,
+    isVisible: true
+  },
   {
     name: 'rejections',
     label: React.createElement(Icon, {

frontend/src/InteractiveImport/Interactive/InteractiveImportRow.css

@@ -5,8 +5,10 @@
 }
 
 .quality,
-.language {
+.languages {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  text-align: center;
 }
 
 .label {
@@ -21,3 +23,7 @@
   margin-top: 0;
   text-align: start;
 }
+
+.customFormatTooltip {
+  max-width: 250px;
+}

frontend/src/InteractiveImport/Interactive/InteractiveImportRow.js

@@ -12,6 +12,7 @@ import SelectLanguageModal from 'InteractiveImport/Language/SelectLanguageModal'
 import SelectMovieModal from 'InteractiveImport/Movie/SelectMovieModal';
 import SelectQualityModal from 'InteractiveImport/Quality/SelectQualityModal';
 import SelectReleaseGroupModal from 'InteractiveImport/ReleaseGroup/SelectReleaseGroupModal';
+import MovieFormats from 'Movie/MovieFormats';
 import MovieLanguage from 'Movie/MovieLanguage';
 import MovieQuality from 'Movie/MovieQuality';
 import formatBytes from 'Utilities/Number/formatBytes';
@@ -150,6 +151,7 @@ class InteractiveImportRow extends Component {
       languages,
       releaseGroup,
       size,
+      customFormats,
       rejections,
       isReprocessing,
       isSelected,
@@ -226,7 +228,7 @@ class InteractiveImportRow extends Component {
         </TableRowCellButton>
 
         <TableRowCellButton
-          className={styles.language}
+          className={styles.languages}
           title={translate('ClickToChangeLanguage')}
           onPress={this.onSelectLanguagePress}
         >
@@ -259,7 +261,26 @@ class InteractiveImportRow extends Component {
 
         <TableRowCell>
           {
-            !!rejections.length &&
+            customFormats?.length ?
+              <Popover
+                anchor={
+                  <Icon name={icons.INTERACTIVE} />
+                }
+                title="Formats"
+                body={
+                  <div className={styles.customFormatTooltip}>
+                    <MovieFormats formats={customFormats} />
+                  </div>
+                }
+                position={tooltipPositions.LEFT}
+              /> :
+              null
+          }
+        </TableRowCell>
+
+        <TableRowCell>
+          {
+            rejections.length ?
               <Popover
                 anchor={
                   <Icon
@@ -282,7 +303,9 @@ class InteractiveImportRow extends Component {
                   </ul>
                 }
                 position={tooltipPositions.LEFT}
-              />
+                canFlip={false}
+              /> :
+              null
           }
         </TableRowCell>
 
@@ -330,6 +353,7 @@ InteractiveImportRow.propTypes = {
   languages: PropTypes.arrayOf(PropTypes.object),
   releaseGroup: PropTypes.string,
   size: PropTypes.number.isRequired,
+  customFormats: PropTypes.arrayOf(PropTypes.object),
   rejections: PropTypes.arrayOf(PropTypes.object).isRequired,
   isReprocessing: PropTypes.bool,
   isSelected: PropTypes.bool,