Manual Import episode improvements

New: Show absolute episode number (for anime series) and title in manual import
New: Show absolute episode number (for anime series) in manual import episode selection

frontend/src/InteractiveImport/Episode/SelectEpisodeModalContent.js

@@ -93,6 +93,7 @@ class SelectEpisodeModalContent extends Component {
       error,
       items,
       relativePath,
+      isAnime,
       sortKey,
       sortDirection,
       onSortPress,
@@ -172,8 +173,10 @@ class SelectEpisodeModalContent extends Component {
                               key={item.id}
                               id={item.id}
                               episodeNumber={item.episodeNumber}
+                              absoluteEpisodeNumber={item.absoluteEpisodeNumber}
                               title={item.title}
                               airDate={item.airDate}
+                              isAnime={isAnime}
                               isSelected={selectedState[item.id]}
                               onSelectedChange={this.onSelectedChange}
                             />
@@ -229,6 +232,7 @@ SelectEpisodeModalContent.propTypes = {
   error: PropTypes.object,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
   relativePath: PropTypes.string,
+  isAnime: PropTypes.bool.isRequired,
   sortKey: PropTypes.string,
   sortDirection: PropTypes.string,
   onSortPress: PropTypes.func.isRequired,

frontend/src/InteractiveImport/Episode/SelectEpisodeRow.js

@@ -25,8 +25,10 @@ class SelectEpisodeRow extends Component {
     const {
       id,
       episodeNumber,
+      absoluteEpisodeNumber,
       title,
       airDate,
+      isAnime,
       isSelected,
       onSelectedChange
     } = this.props;
@@ -41,6 +43,7 @@ class SelectEpisodeRow extends Component {
 
         <TableRowCell>
           {episodeNumber}
+          {isAnime ? ` (${absoluteEpisodeNumber})` : ''}
         </TableRowCell>
 
         <TableRowCell>
@@ -58,8 +61,10 @@ class SelectEpisodeRow extends Component {
 SelectEpisodeRow.propTypes = {
   id: PropTypes.number.isRequired,
   episodeNumber: PropTypes.number.isRequired,
+  absoluteEpisodeNumber: PropTypes.number.isRequired,
   title: PropTypes.string.isRequired,
   airDate: PropTypes.string.isRequired,
+  isAnime: PropTypes.bool.isRequired,
   isSelected: PropTypes.bool,
   onSelectedChange: PropTypes.func.isRequired
 };

frontend/src/InteractiveImport/Interactive/InteractiveImportRow.js

@@ -187,8 +187,17 @@ class InteractiveImportRow extends Component {
     } = this.state;
 
     const seriesTitle = series ? series.title : '';
-    const episodeNumbers = episodes.map((episode) => episode.episodeNumber)
-      .join(', ');
+    const isAnime = series ? series.seriesType === 'anime' : false;
+
+    const episodeInfo = episodes.map((episode) => {
+      return (
+        <div key={episode.id}>
+          {episode.episodeNumber}
+          {isAnime ? ` (${episode.absoluteEpisodeNumber})` : ''}
+          {` - ${episode.title}`}
+        </div>
+      );
+    });
 
     const showSeriesPlaceholder = isSelected && !series;
     const showSeasonNumberPlaceholder = isSelected && !!series && isNaN(seasonNumber) && !isReprocessing;
@@ -246,7 +255,7 @@ class InteractiveImportRow extends Component {
           onPress={this.onSelectEpisodePress}
         >
           {
-            showEpisodeNumbersPlaceholder ? <InteractiveImportRowCellPlaceholder /> : episodeNumbers
+            showEpisodeNumbersPlaceholder ? <InteractiveImportRowCellPlaceholder /> : episodeInfo
           }
         </TableRowCellButton>
 
@@ -339,6 +348,7 @@ class InteractiveImportRow extends Component {
           isOpen={isSelectEpisodeModalOpen}
           ids={[id]}
           seriesId={series && series.id}
+          isAnime={isAnime}
           seasonNumber={seasonNumber}
           relativePath={relativePath}
           onModalClose={this.onSelectEpisodeModalClose}

frontend/src/InteractiveImport/InteractiveImportModal.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import { sizes } from 'Helpers/Props';
 import Modal from 'Components/Modal/Modal';
 import InteractiveImportSelectFolderModalContentConnector from './Folder/InteractiveImportSelectFolderModalContentConnector';
 import InteractiveImportModalContentConnector from './Interactive/InteractiveImportModalContentConnector';
@@ -47,6 +48,7 @@ class InteractiveImportModal extends Component {
     return (
       <Modal
         isOpen={isOpen}
+        size={sizes.EXTRA_LARGE}
         closeOnBackgroundClick={false}
         onModalClose={onModalClose}
       >