Cache root folders and improve getting disk space for movie path roots

(cherry picked from commit 63fdf8ca8ff9b22ce4cf8764cc05aad5d1d0ae62)

Closes #10219

azure-pipelines.yml

@@ -9,18 +9,18 @@ variables:
   testsFolder: './_tests'
   yarnCacheFolder: $(Pipeline.Workspace)/.yarn
   nugetCacheFolder: $(Pipeline.Workspace)/.nuget/packages
-  majorVersion: '5.5.3'
+  majorVersion: '5.9.0'
   minorVersion: $[counter('minorVersion', 2000)]
   radarrVersion: '$(majorVersion).$(minorVersion)'
   buildName: '$(Build.SourceBranchName).$(radarrVersion)'
   sentryOrg: 'servarr'
   sentryUrl: 'https://sentry.servarr.com'
-  dotnetVersion: '6.0.421'
+  dotnetVersion: '6.0.424'
   nodeVersion: '20.X'
   innoVersion: '6.2.2'
   windowsImage: 'windows-2022'
   linuxImage: 'ubuntu-20.04'
-  macImage: 'macOS-11'
+  macImage: 'macOS-12'
 
 trigger:
   branches:
@@ -1116,7 +1116,7 @@ stages:
         vmImage: ${{ variables.windowsImage }}
       steps:
       - checkout: self # Need history for Sonar analysis
-      - task: SonarCloudPrepare@1
+      - task: SonarCloudPrepare@2
         env:
           SONAR_SCANNER_OPTS: ''
         inputs:
@@ -1128,7 +1128,7 @@ stages:
           cliProjectName: 'RadarrUI'
           cliProjectVersion: '$(radarrVersion)'
           cliSources: './frontend'
-      - task: SonarCloudAnalyze@1
+      - task: SonarCloudAnalyze@2
       
     - job: Api_Docs
       displayName: API Docs
@@ -1205,7 +1205,7 @@ stages:
         submodules: true
       - powershell: Set-Service SCardSvr -StartupType Manual
         displayName: Enable Windows Test Service
-      - task: SonarCloudPrepare@1
+      - task: SonarCloudPrepare@2
         condition: eq(variables['System.PullRequest.IsFork'], 'False')
         inputs:
           SonarCloud: 'SonarCloud'
@@ -1223,21 +1223,16 @@ stages:
           ./build.sh --backend -f net6.0 -r win-x64
           TEST_DIR=_tests/net6.0/win-x64/publish/ ./test.sh Windows Unit Coverage
         displayName: Coverage Unit Tests
-      - task: SonarCloudAnalyze@1
+      - task: SonarCloudAnalyze@2
         condition: eq(variables['System.PullRequest.IsFork'], 'False')
         displayName: Publish SonarCloud Results
-      - task: reportgenerator@4
+      - task: reportgenerator@5
         displayName: Generate Coverage Report
         inputs:
           reports: '$(Build.SourcesDirectory)/CoverageResults/**/coverage.opencover.xml'
           targetdir: '$(Build.SourcesDirectory)/CoverageResults/combined'
           reporttypes: 'HtmlInline_AzurePipelines;Cobertura;Badges'
-      - task: PublishCodeCoverageResults@1
-        displayName: Publish Coverage Report
-        inputs:
-          codeCoverageTool: 'cobertura'
-          summaryFileLocation: './CoverageResults/combined/Cobertura.xml'
-          reportDirectory: './CoverageResults/combined/'
+          publishCodeCoverageResults: true
 
   - stage: Report_Out
     dependsOn:

docs.sh

@@ -21,15 +21,21 @@ slnFile=src/Radarr.sln
 
 platform=Posix
 
+if [ "$PLATFORM" = "Windows" ]; then
+  application=Radarr.Console.dll
+else
+  application=Radarr.dll
+fi
+
 dotnet clean $slnFile -c Debug
 dotnet clean $slnFile -c Release
 
 dotnet msbuild -restore $slnFile -p:Configuration=Debug -p:Platform=$platform -p:RuntimeIdentifiers=$RUNTIME -t:PublishAllRids
 
 dotnet new tool-manifest
-dotnet tool install --version 6.5.0 Swashbuckle.AspNetCore.Cli
+dotnet tool install --version 6.6.2 Swashbuckle.AspNetCore.Cli
 
-dotnet tool run swagger tofile --output ./src/Radarr.Api.V3/openapi.json "$outputFolder/net6.0/$RUNTIME/radarr.console.dll" v3 &
+dotnet tool run swagger tofile --output ./src/Radarr.Api.V3/openapi.json "$outputFolder/net6.0/$RUNTIME/$application" v3 &
 
 sleep 45
 

frontend/.eslintrc.js

@@ -359,11 +359,16 @@ module.exports = {
       ],
 
       rules: Object.assign(typescriptEslintRecommended.rules, {
-        'no-shadow': 'off',
-        // These should be enabled after cleaning things up
-        '@typescript-eslint/no-unused-vars': 'warn',
+        '@typescript-eslint/no-unused-vars': [
+          'error',
+          {
+            args: 'after-used',
+            argsIgnorePattern: '^_',
+            ignoreRestSiblings: true
+          }
+        ],
         '@typescript-eslint/explicit-function-return-type': 'off',
-        'react/prop-types': 'off',
+        'no-shadow': 'off',
         'prettier/prettier': 'error',
         'simple-import-sort/imports': [
           'error',
@@ -376,7 +381,41 @@ module.exports = {
               ['^@?\\w', `^(${dirs})(/.*|$)`, '^\\.', '^\\..*css$']
             ]
           }
-        ]
+        ],
+
+        // React Hooks
+        'react-hooks/rules-of-hooks': 'error',
+        'react-hooks/exhaustive-deps': 'error',
+
+        // React
+        'react/function-component-definition': 'error',
+        'react/hook-use-state': 'error',
+        'react/jsx-boolean-value': ['error', 'always'],
+        'react/jsx-curly-brace-presence': [
+          'error',
+          { props: 'never', children: 'never' }
+        ],
+        'react/jsx-fragments': 'error',
+        'react/jsx-handler-names': [
+          'error',
+          {
+            eventHandlerPrefix: 'on',
+            eventHandlerPropPrefix: 'on'
+          }
+        ],
+        'react/jsx-no-bind': ['error', { ignoreRefs: true }],
+        'react/jsx-no-useless-fragment': ['error', { allowExpressions: true }],
+        'react/jsx-pascal-case': ['error', { allowAllCaps: true }],
+        'react/jsx-sort-props': [
+          'error',
+          {
+            callbacksLast: true,
+            noSortAlphabetically: true,
+            reservedFirst: true
+          }
+        ],
+        'react/prop-types': 'off',
+        'react/self-closing-comp': 'error'
       })
     },
     {

frontend/build/webpack.config.js

@@ -66,7 +66,7 @@ module.exports = (env) => {
     output: {
       path: distFolder,
       publicPath: '/',
-      filename: '[name]-[contenthash].js',
+      filename: isProduction ? '[name]-[contenthash].js' : '[name].js',
       sourceMapFilename: '[file].map'
     },
 
@@ -91,7 +91,7 @@ module.exports = (env) => {
 
       new MiniCssExtractPlugin({
         filename: 'Content/styles.css',
-        chunkFilename: 'Content/[id]-[chunkhash].css'
+        chunkFilename: isProduction ? 'Content/[id]-[chunkhash].css' : 'Content/[id].css'
       }),
 
       new HtmlWebpackPlugin({
@@ -201,7 +201,7 @@ module.exports = (env) => {
               options: {
                 importLoaders: 1,
                 modules: {
-                  localIdentName: '[name]/[local]/[hash:base64:5]'
+                  localIdentName: isProduction ? '[name]/[local]/[hash:base64:5]' : '[name]/[local]'
                 }
               }
             },

frontend/src/Activity/Blocklist/BlocklistRow.js

@@ -7,7 +7,7 @@ import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
 import TableRow from 'Components/Table/TableRow';
 import { icons, kinds } from 'Helpers/Props';
 import MovieFormats from 'Movie/MovieFormats';
-import MovieLanguage from 'Movie/MovieLanguage';
+import MovieLanguages from 'Movie/MovieLanguages';
 import MovieQuality from 'Movie/MovieQuality';
 import MovieTitleLink from 'Movie/MovieTitleLink';
 import translate from 'Utilities/String/translate';
@@ -104,7 +104,7 @@ class BlocklistRow extends Component {
             if (name === 'languages') {
               return (
                 <TableRowCell key={name}>
-                  <MovieLanguage
+                  <MovieLanguages
                     languages={languages}
                   />
                 </TableRowCell>

frontend/src/Activity/History/HistoryRow.js

@@ -7,7 +7,7 @@ import TableRow from 'Components/Table/TableRow';
 import Tooltip from 'Components/Tooltip/Tooltip';
 import { icons, tooltipPositions } from 'Helpers/Props';
 import MovieFormats from 'Movie/MovieFormats';
-import MovieLanguage from 'Movie/MovieLanguage';
+import MovieLanguages from 'Movie/MovieLanguages';
 import MovieQuality from 'Movie/MovieQuality';
 import MovieTitleLink from 'Movie/MovieTitleLink';
 import formatCustomFormatScore from 'Utilities/Number/formatCustomFormatScore';
@@ -113,7 +113,7 @@ class HistoryRow extends Component {
             if (name === 'languages') {
               return (
                 <TableRowCell key={name}>
-                  <MovieLanguage
+                  <MovieLanguages
                     languages={languages}
                   />
                 </TableRowCell>

frontend/src/Activity/Queue/Queue.js

@@ -219,6 +219,7 @@ class Queue extends Component {
           >
             <TableOptionsModalWrapper
               columns={columns}
+              maxPageSize={200}
               {...otherProps}
               optionsComponent={QueueOptionsConnector}
             >

frontend/src/Activity/Queue/QueueRow.css

@@ -26,4 +26,5 @@
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 70px;
+  text-align: right;
 }

frontend/src/Activity/Queue/QueueRow.js

@@ -12,7 +12,7 @@ import Tooltip from 'Components/Tooltip/Tooltip';
 import { icons, kinds, tooltipPositions } from 'Helpers/Props';
 import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
 import MovieFormats from 'Movie/MovieFormats';
-import MovieLanguage from 'Movie/MovieLanguage';
+import MovieLanguages from 'Movie/MovieLanguages';
 import MovieQuality from 'Movie/MovieQuality';
 import MovieTitleLink from 'Movie/MovieTitleLink';
 import formatBytes from 'Utilities/Number/formatBytes';
@@ -175,7 +175,7 @@ class QueueRow extends Component {
             if (name === 'languages') {
               return (
                 <TableRowCell key={name}>
-                  <MovieLanguage
+                  <MovieLanguages
                     languages={languages}
                   />
                 </TableRowCell>

frontend/src/Activity/Queue/QueueStatus.js

@@ -70,6 +70,11 @@ function QueueStatus(props) {
     iconName = icons.DOWNLOADED;
     title = translate('Downloaded');
 
+    if (trackedDownloadState === 'importBlocked') {
+      title += ` - ${translate('UnableToImportAutomatically')}`;
+      iconKind = kinds.WARNING;
+    }
+
     if (trackedDownloadState === 'importPending') {
       title += ` - ${translate('WaitingToImport')}`;
       iconKind = kinds.PURPLE;

frontend/src/Activity/Queue/RemoveQueueItemModal.tsx

@@ -118,6 +118,7 @@ function RemoveQueueItemModal(props: RemoveQueueItemModalProps) {
       {
         key: 'blocklistAndSearch',
         value: translate('BlocklistAndSearch'),
+        isDisabled: isPending,
         hint: multipleSelected
           ? translate('BlocklistAndSearchMultipleHint')
           : translate('BlocklistAndSearchHint'),
@@ -130,7 +131,7 @@ function RemoveQueueItemModal(props: RemoveQueueItemModalProps) {
           : translate('BlocklistOnlyHint'),
       },
     ];
-  }, [multipleSelected]);
+  }, [isPending, multipleSelected]);
 
   const handleRemovalMethodChange = useCallback(
     ({ value }: { value: RemovalMethod }) => {

frontend/src/AddMovie/AddNewMovie/AddNewMovieConnector.js

@@ -6,7 +6,6 @@ import { clearAddMovie, lookupMovie } from 'Store/Actions/addMovieActions';
 import { clearMovieFiles, fetchMovieFiles } from 'Store/Actions/movieFileActions';
 import { clearQueueDetails, fetchQueueDetails } from 'Store/Actions/queueActions';
 import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
-import { fetchImportExclusions } from 'Store/Actions/Settings/importExclusions';
 import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
 import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
 import selectUniqueIds from 'Utilities/Object/selectUniqueIds';
@@ -36,7 +35,6 @@ const mapDispatchToProps = {
   lookupMovie,
   clearAddMovie,
   fetchRootFolders,
-  fetchImportExclusions,
   fetchQueueDetails,
   clearQueueDetails,
   fetchMovieFiles,
@@ -56,7 +54,6 @@ class AddNewMovieConnector extends Component {
 
   componentDidMount() {
     this.props.fetchRootFolders();
-    this.props.fetchImportExclusions();
     this.props.fetchQueueDetails();
   }
 
@@ -131,7 +128,6 @@ AddNewMovieConnector.propTypes = {
   lookupMovie: PropTypes.func.isRequired,
   clearAddMovie: PropTypes.func.isRequired,
   fetchRootFolders: PropTypes.func.isRequired,
-  fetchImportExclusions: PropTypes.func.isRequired,
   fetchQueueDetails: PropTypes.func.isRequired,
   clearQueueDetails: PropTypes.func.isRequired,
   fetchMovieFiles: PropTypes.func.isRequired,

frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css

@@ -85,6 +85,7 @@
   margin-top: 20px;
 }
 
+.originalLanguage,
 .studio,
 .genres {
   margin-left: 5px;

frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css.d.ts

@@ -8,6 +8,7 @@ interface CssExports {
   'genres': string;
   'icons': string;
   'links': string;
+  'originalLanguage': string;
   'overlay': string;
   'overview': string;
   'poster': string;

frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js

@@ -62,6 +62,7 @@ class AddNewMovieSearchResult extends Component {
       titleSlug,
       year,
       studio,
+      originalLanguage,
       genres,
       status,
       overview,
@@ -70,7 +71,7 @@ class AddNewMovieSearchResult extends Component {
       images,
       existingMovieId,
       isExistingMovie,
-      isExclusionMovie,
+      isExcluded,
       isSmallScreen,
       colorImpairedMode,
       id,
@@ -166,7 +167,7 @@ class AddNewMovieSearchResult extends Component {
                 }
 
                 {
-                  isExclusionMovie &&
+                  isExcluded &&
                     <Icon
                       className={styles.exclusionIcon}
                       name={icons.DANGER}
@@ -213,17 +214,31 @@ class AddNewMovieSearchResult extends Component {
               }
 
               {
-                !!studio &&
+                originalLanguage?.name ?
+                  <Label size={sizes.LARGE}>
+                    <Icon
+                      name={icons.LANGUAGE}
+                      size={13}
+                    />
+                    <span className={styles.originalLanguage}>
+                      {originalLanguage.name}
+                    </span>
+                  </Label> :
+                  null
+              }
+
+              {
+                studio ?
                   <Label size={sizes.LARGE}>
                     <Icon
                       name={icons.STUDIO}
                       size={13}
                     />
-
                     <span className={styles.studio}>
                       {studio}
                     </span>
-                  </Label>
+                  </Label> :
+                  null
               }
 
               {
@@ -233,7 +248,6 @@ class AddNewMovieSearchResult extends Component {
                       name={icons.GENRE}
                       size={13}
                     />
-
                     <span className={styles.genres}>
                       {genres.slice(0, 3).join(', ')}
                     </span>
@@ -271,6 +285,7 @@ class AddNewMovieSearchResult extends Component {
               {
                 isExistingMovie && isSmallScreen &&
                   <MovieStatusLabel
+                    status={status}
                     hasMovieFiles={hasMovieFile}
                     monitored={monitored}
                     isAvailable={isAvailable}
@@ -311,6 +326,7 @@ AddNewMovieSearchResult.propTypes = {
   titleSlug: PropTypes.string.isRequired,
   year: PropTypes.number.isRequired,
   studio: PropTypes.string,
+  originalLanguage: PropTypes.object,
   genres: PropTypes.arrayOf(PropTypes.string),
   status: PropTypes.string.isRequired,
   overview: PropTypes.string,
@@ -319,7 +335,7 @@ AddNewMovieSearchResult.propTypes = {
   images: PropTypes.arrayOf(PropTypes.object).isRequired,
   existingMovieId: PropTypes.number,
   isExistingMovie: PropTypes.bool.isRequired,
-  isExclusionMovie: PropTypes.bool.isRequired,
+  isExcluded: PropTypes.bool,
   isSmallScreen: PropTypes.bool.isRequired,
   id: PropTypes.number,
   monitored: PropTypes.bool.isRequired,
@@ -333,7 +349,8 @@ AddNewMovieSearchResult.propTypes = {
 };
 
 AddNewMovieSearchResult.defaultProps = {
-  genres: []
+  genres: [],
+  isExcluded: false
 };
 
 export default AddNewMovieSearchResult;

frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResultConnector.js

@@ -1,27 +1,24 @@
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
-import createExclusionMovieSelector from 'Store/Selectors/createExclusionMovieSelector';
 import createExistingMovieSelector from 'Store/Selectors/createExistingMovieSelector';
 import AddNewMovieSearchResult from './AddNewMovieSearchResult';
 
 function createMapStateToProps() {
   return createSelector(
     createExistingMovieSelector(),
-    createExclusionMovieSelector(),
     createDimensionsSelector(),
     (state) => state.queue.details.items,
     (state) => state.movieFiles.items,
     (state, { internalId }) => internalId,
     (state) => state.settings.ui.item.movieRuntimeFormat,
-    (isExistingMovie, isExclusionMovie, dimensions, queueItems, movieFiles, internalId, movieRuntimeFormat) => {
+    (isExistingMovie, dimensions, queueItems, movieFiles, internalId, movieRuntimeFormat) => {
       const queueItem = queueItems.find((item) => internalId > 0 && item.movieId === internalId);
       const movieFile = movieFiles.find((item) => internalId > 0 && item.movieId === internalId);
 
       return {
         existingMovieId: internalId,
         isExistingMovie,
-        isExclusionMovie,
         isSmallScreen: dimensions.isSmallScreen,
         queueItem,
         movieFile,

frontend/src/App/AppRoutes.js

@@ -33,6 +33,8 @@ import Status from 'System/Status/Status';
 import Tasks from 'System/Tasks/Tasks';
 import UpdatesConnector from 'System/Updates/UpdatesConnector';
 import getPathWithUrlBase from 'Utilities/getPathWithUrlBase';
+import CutoffUnmetConnector from 'Wanted/CutoffUnmet/CutoffUnmetConnector';
+import MissingConnector from 'Wanted/Missing/MissingConnector';
 
 function AppRoutes(props) {
   const {
@@ -121,6 +123,20 @@ function AppRoutes(props) {
         component={BlocklistConnector}
       />
 
+      {/*
+        Wanted
+      */}
+
+      <Route
+        path="/wanted/missing"
+        component={MissingConnector}
+      />
+
+      <Route
+        path="/wanted/cutoffunmet"
+        component={CutoffUnmetConnector}
+      />
+
       {/*
         Settings
       */}

frontend/src/App/ApplyTheme.tsx

@@ -1,13 +1,9 @@
-import React, { Fragment, ReactNode, useCallback, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { createSelector } from 'reselect';
 import themes from 'Styles/Themes';
 import AppState from './State/AppState';
 
-interface ApplyThemeProps {
-  children: ReactNode;
-}
-
 function createThemeSelector() {
   return createSelector(
     (state: AppState) => state.settings.ui.item.theme || window.Radarr.theme,
@@ -17,7 +13,7 @@ function createThemeSelector() {
   );
 }
 
-function ApplyTheme({ children }: ApplyThemeProps) {
+function ApplyTheme() {
   const theme = useSelector(createThemeSelector());
 
   const updateCSSVariables = useCallback(() => {
@@ -31,7 +27,7 @@ function ApplyTheme({ children }: ApplyThemeProps) {
     updateCSSVariables();
   }, [updateCSSVariables, theme]);
 
-  return <Fragment>{children}</Fragment>;
+  return null;
 }
 
 export default ApplyTheme;

frontend/src/App/State/AppSectionState.ts

@@ -18,7 +18,10 @@ export interface AppSectionSaveState {
 }
 
 export interface PagedAppSectionState {
+  page: number;
   pageSize: number;
+  totalPages: number;
+  totalRecords?: number;
 }
 
 export interface AppSectionFilterState<T> {
@@ -38,6 +41,7 @@ export interface AppSectionItemState<T> {
   isFetching: boolean;
   isPopulated: boolean;
   error: Error;
+  pendingChanges: Partial<T>;
   item: T;
 }
 

frontend/src/App/State/MoviesAppState.ts

@@ -25,6 +25,7 @@ export interface MovieIndexAppState {
     showTmdbRating: boolean;
     showImdbRating: boolean;
     showRottenTomatoesRating: boolean;
+    showTags: boolean;
     showSearchAction: boolean;
   };
 
@@ -37,6 +38,7 @@ export interface MovieIndexAppState {
     showAdded: boolean;
     showPath: boolean;
     showSizeOnDisk: boolean;
+    showTags: boolean;
     showSearchAction: boolean;
   };
 

frontend/src/App/State/SettingsAppState.ts

@@ -3,10 +3,13 @@ import AppSectionState, {
   AppSectionItemState,
   AppSectionSaveState,
   AppSectionSchemaState,
+  PagedAppSectionState,
 } from 'App/State/AppSectionState';
 import Language from 'Language/Language';
 import DownloadClient from 'typings/DownloadClient';
 import ImportList from 'typings/ImportList';
+import ImportListExclusion from 'typings/ImportListExclusion';
+import ImportListOptionsSettings from 'typings/ImportListOptionsSettings';
 import Indexer from 'typings/Indexer';
 import IndexerFlag from 'typings/IndexerFlag';
 import Notification from 'typings/Notification';
@@ -36,12 +39,27 @@ export interface QualityProfilesAppState
   extends AppSectionState<QualityProfile>,
     AppSectionSchemaState<QualityProfile> {}
 
+export interface ImportListOptionsSettingsAppState
+  extends AppSectionItemState<ImportListOptionsSettings>,
+    AppSectionSaveState {}
+
+export interface ImportListExclusionsSettingsAppState
+  extends AppSectionState<ImportListExclusion>,
+    AppSectionSaveState,
+    PagedAppSectionState,
+    AppSectionDeleteState {
+  pendingChanges: Partial<ImportListExclusion>;
+}
+
 export type IndexerFlagSettingsAppState = AppSectionState<IndexerFlag>;
 export type LanguageSettingsAppState = AppSectionState<Language>;
 export type UiSettingsAppState = AppSectionItemState<UiSettings>;
 
 interface SettingsAppState {
+  advancedSettings: boolean;
   downloadClients: DownloadClientAppState;
+  importListExclusions: ImportListExclusionsSettingsAppState;
+  importListOptions: ImportListOptionsSettingsAppState;
   importLists: ImportListAppState;
   indexerFlags: IndexerFlagSettingsAppState;
   indexers: IndexerAppState;

frontend/src/Calendar/Agenda/AgendaEvent.js

@@ -3,10 +3,10 @@ import moment from 'moment';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import CalendarEventQueueDetails from 'Calendar/Events/CalendarEventQueueDetails';
+import getStatusStyle from 'Calendar/getStatusStyle';
 import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
 import { icons, kinds } from 'Helpers/Props';
-import getStatusStyle from 'Utilities/Movie/getStatusStyle';
 import translate from 'Utilities/String/translate';
 import styles from './AgendaEvent.css';
 
@@ -82,7 +82,7 @@ class AgendaEvent extends Component {
     startTime = moment(startTime);
     const downloading = !!(queueItem || grabbed);
     const isMonitored = monitored;
-    const statusStyle = getStatusStyle(null, isMonitored, hasFile, isAvailable, 'style', downloading);
+    const statusStyle = getStatusStyle(hasFile, downloading, isMonitored, isAvailable);
     const joinedGenres = genres.slice(0, 2).join(', ');
     const link = `/movie/${titleSlug}`;
 

frontend/src/Calendar/Events/CalendarEvent.js

@@ -2,10 +2,10 @@ import classNames from 'classnames';
 import moment from 'moment';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import getStatusStyle from 'Calendar/getStatusStyle';
 import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
 import { icons, kinds } from 'Helpers/Props';
-import getStatusStyle from 'Utilities/Movie/getStatusStyle';
 import translate from 'Utilities/String/translate';
 import CalendarEventQueueDetails from './CalendarEventQueueDetails';
 import styles from './CalendarEvent.css';
@@ -39,7 +39,7 @@ class CalendarEvent extends Component {
 
     const isDownloading = !!(queueItem || grabbed);
     const isMonitored = monitored;
-    const statusStyle = getStatusStyle(null, isMonitored, hasFile, isAvailable, 'style', isDownloading);
+    const statusStyle = getStatusStyle(hasFile, isDownloading, isMonitored, isAvailable);
     const joinedGenres = genres.slice(0, 2).join(', ');
     const link = `/movie/${titleSlug}`;
     const eventType = [];

frontend/src/Calendar/getStatusStyle.js

@@ -0,0 +1,25 @@
+function getStatusStyle(hasFile, downloading, isMonitored, isAvailable) {
+  if (downloading) {
+    return 'queue';
+  }
+
+  if (hasFile && isMonitored) {
+    return 'downloaded';
+  }
+
+  if (hasFile && !isMonitored) {
+    return 'unmonitored';
+  }
+
+  if (isAvailable && isMonitored) {
+    return 'missingMonitored';
+  }
+
+  if (!isMonitored) {
+    return 'missingUnmonitored';
+  }
+
+  return 'continuing';
+}
+
+export default getStatusStyle;

frontend/src/Collection/Overview/CollectionMovieLabel.js

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import MonitorToggleButton from 'Components/MonitorToggleButton';
-import getStatusStyle from 'Utilities/Movie/getStatusStyle';
+import getProgressBarKind from 'Utilities/Movie/getProgressBarKind';
 import translate from 'Utilities/String/translate';
 import styles from './CollectionMovieLabel.css';
 
@@ -45,7 +45,7 @@ class CollectionMovieLabel extends Component {
             <div
               className={classNames(
                 styles.movieStatus,
-                styles[getStatusStyle(status, monitored, hasFile, isAvailable, 'kinds')]
+                styles[getProgressBarKind(status, monitored, hasFile, isAvailable)]
               )}
             >
               {

frontend/src/Components/Error/ErrorBoundaryError.tsx

@@ -63,7 +63,7 @@ function ErrorBoundaryError(props: ErrorBoundaryErrorProps) {
           <div>{info.componentStack}</div>
         )}
 
-        {<div className={styles.version}>Version: {window.Radarr.version}</div>}
+        <div className={styles.version}>Version: {window.Radarr.version}</div>
       </details>
     </div>
   );

frontend/src/Components/Filter/Builder/FilterBuilderRow.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import SelectInput from 'Components/Form/SelectInput';
 import IconButton from 'Components/Link/IconButton';
 import { filterBuilderTypes, filterBuilderValueTypes, icons } from 'Helpers/Props';
+import sortByProp from 'Utilities/Array/sortByProp';
 import BoolFilterBuilderRowValue from './BoolFilterBuilderRowValue';
 import DateFilterBuilderRowValue from './DateFilterBuilderRowValue';
 import FilterBuilderRowValueConnector from './FilterBuilderRowValueConnector';
@@ -14,7 +15,7 @@ import MinimumAvailabilityFilterBuilderRowValue from './MinimumAvailabilityFilte
 import MovieFilterBuilderRowValue from './MovieFilterBuilderRowValue';
 import ProtocolFilterBuilderRowValue from './ProtocolFilterBuilderRowValue';
 import QualityFilterBuilderRowValueConnector from './QualityFilterBuilderRowValueConnector';
-import QualityProfileFilterBuilderRowValueConnector from './QualityProfileFilterBuilderRowValueConnector';
+import QualityProfileFilterBuilderRowValue from './QualityProfileFilterBuilderRowValue';
 import ReleaseStatusFilterBuilderRowValue from './ReleaseStatusFilterBuilderRowValue';
 import TagFilterBuilderRowValueConnector from './TagFilterBuilderRowValueConnector';
 import styles from './FilterBuilderRow.css';
@@ -77,7 +78,7 @@ function getRowValueConnector(selectedFilterBuilderProp) {
       return QualityFilterBuilderRowValueConnector;
 
     case filterBuilderValueTypes.QUALITY_PROFILE:
-      return QualityProfileFilterBuilderRowValueConnector;
+      return QualityProfileFilterBuilderRowValue;
 
     case filterBuilderValueTypes.MOVIE:
       return MovieFilterBuilderRowValue;
@@ -228,7 +229,7 @@ class FilterBuilderRow extends Component {
         key: name,
         value: typeof label === 'function' ? label() : label
       };
-    }).sort((a, b) => a.value.localeCompare(b.value));
+    }).sort(sortByProp('value'));
 
     const ValueComponent = getRowValueConnector(selectedFilterBuilderProp);
 

frontend/src/Components/Filter/Builder/FilterBuilderRowValueConnector.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { filterBuilderTypes } from 'Helpers/Props';
 import * as filterTypes from 'Helpers/Props/filterTypes';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import FilterBuilderRowValue from './FilterBuilderRowValue';
 
 function createTagListSelector() {
@@ -38,7 +38,7 @@ function createTagListSelector() {
           }
 
           return acc;
-        }, []).sort(sortByName);
+        }, []).sort(sortByProp('name'));
       }
 
       return _.uniqBy(items, 'id');

frontend/src/Components/Filter/Builder/MovieFilterBuilderRowValue.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import Movie from 'Movie/Movie';
 import createAllMoviesSelector from 'Store/Selectors/createAllMoviesSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import FilterBuilderRowValue from './FilterBuilderRowValue';
 import FilterBuilderRowValueProps from './FilterBuilderRowValueProps';
 
@@ -11,7 +11,7 @@ function MovieFilterBuilderRowValue(props: FilterBuilderRowValueProps) {
 
   const tagList = allMovies
     .map((movie) => ({ id: movie.id, name: movie.title }))
-    .sort(sortByName);
+    .sort(sortByProp('name'));
 
   return <FilterBuilderRowValue {...props} tagList={tagList} />;
 }

frontend/src/Components/Filter/Builder/QualityProfileFilterBuilderRowValue.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import FilterBuilderRowValueProps from 'Components/Filter/Builder/FilterBuilderRowValueProps';
+import sortByProp from 'Utilities/Array/sortByProp';
+import FilterBuilderRowValue from './FilterBuilderRowValue';
+
+function createQualityProfilesSelector() {
+  return createSelector(
+    (state: AppState) => state.settings.qualityProfiles.items,
+    (qualityProfiles) => {
+      return qualityProfiles;
+    }
+  );
+}
+
+function QualityProfileFilterBuilderRowValue(
+  props: FilterBuilderRowValueProps
+) {
+  const qualityProfiles = useSelector(createQualityProfilesSelector());
+
+  const tagList = qualityProfiles
+    .map(({ id, name }) => ({ id, name }))
+    .sort(sortByProp('name'));
+
+  return <FilterBuilderRowValue {...props} tagList={tagList} />;
+}
+
+export default QualityProfileFilterBuilderRowValue;

frontend/src/Components/Filter/Builder/QualityProfileFilterBuilderRowValueConnector.js

@@ -1,28 +0,0 @@
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import FilterBuilderRowValue from './FilterBuilderRowValue';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.settings.qualityProfiles,
-    (qualityProfiles) => {
-      const tagList = qualityProfiles.items.map((qualityProfile) => {
-        const {
-          id,
-          name
-        } = qualityProfile;
-
-        return {
-          id,
-          name
-        };
-      });
-
-      return {
-        tagList
-      };
-    }
-  );
-}
-
-export default connect(createMapStateToProps)(FilterBuilderRowValue);

frontend/src/Components/Filter/CustomFilters/CustomFiltersModalContent.js

@@ -5,6 +5,7 @@ import ModalBody from 'Components/Modal/ModalBody';
 import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
+import sortByProp from 'Utilities/Array/sortByProp';
 import translate from 'Utilities/String/translate';
 import CustomFilter from './CustomFilter';
 import styles from './CustomFiltersModalContent.css';
@@ -31,7 +32,7 @@ function CustomFiltersModalContent(props) {
       <ModalBody>
         {
           customFilters
-            .sort((a, b) => a.label.localeCompare(b.label))
+            .sort((a, b) => sortByProp(a, b, 'label'))
             .map((customFilter) => {
               return (
                 <CustomFilter

frontend/src/Components/Form/DownloadClientSelectInputConnector.js

@@ -4,7 +4,8 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { fetchDownloadClients } from 'Store/Actions/settingsActions';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
+import translate from 'Utilities/String/translate';
 import EnhancedSelectInput from './EnhancedSelectInput';
 
 function createMapStateToProps() {
@@ -22,7 +23,7 @@ function createMapStateToProps() {
 
       const filteredItems = items.filter((item) => item.protocol === protocolFilter);
 
-      const values = _.map(filteredItems.sort(sortByName), (downloadClient) => {
+      const values = _.map(filteredItems.sort(sortByProp('name')), (downloadClient) => {
         return {
           key: downloadClient.id,
           value: downloadClient.name,
@@ -33,7 +34,7 @@ function createMapStateToProps() {
       if (includeAny) {
         values.unshift({
           key: 0,
-          value: '(Any)'
+          value: `(${translate('Any')})`
         });
       }
 

frontend/src/Components/Form/EnhancedSelectInput.js

@@ -271,26 +271,32 @@ class EnhancedSelectInput extends Component {
     this.setState({ isOpen: !this.state.isOpen });
   };
 
-  onSelect = (value) => {
-    if (Array.isArray(this.props.value)) {
-      let newValue = null;
-      const index = this.props.value.indexOf(value);
+  onSelect = (newValue) => {
+    const { name, value, values, onChange } = this.props;
+    const additionalProperties = values.find((v) => v.key === newValue)?.additionalProperties;
+
+    if (Array.isArray(value)) {
+      let arrayValue = null;
+      const index = value.indexOf(newValue);
+
       if (index === -1) {
-        newValue = this.props.values.map((v) => v.key).filter((v) => (v === value) || this.props.value.includes(v));
+        arrayValue = values.map((v) => v.key).filter((v) => (v === newValue) || value.includes(v));
       } else {
-        newValue = [...this.props.value];
-        newValue.splice(index, 1);
+        arrayValue = [...value];
+        arrayValue.splice(index, 1);
       }
-      this.props.onChange({
-        name: this.props.name,
-        value: newValue
+      onChange({
+        name,
+        value: arrayValue,
+        additionalProperties
       });
     } else {
       this.setState({ isOpen: false });
 
-      this.props.onChange({
-        name: this.props.name,
-        value
+      onChange({
+        name,
+        value: newValue,
+        additionalProperties
       });
     }
   };
@@ -485,7 +491,7 @@ class EnhancedSelectInput extends Component {
                             values.map((v, index) => {
                               const hasParent = v.parentKey !== undefined;
                               const depth = hasParent ? 1 : 0;
-                              const parentSelected = hasParent && value.includes(v.parentKey);
+                              const parentSelected = hasParent && Array.isArray(value) && value.includes(v.parentKey);
                               return (
                                 <OptionComponent
                                   key={v.key}

frontend/src/Components/Form/EnhancedSelectInputConnector.js

@@ -9,7 +9,8 @@ import EnhancedSelectInput from './EnhancedSelectInput';
 const importantFieldNames = [
   'baseUrl',
   'apiPath',
-  'apiKey'
+  'apiKey',
+  'authToken'
 ];
 
 function getProviderDataKey(providerData) {
@@ -34,7 +35,9 @@ function getSelectOptions(items) {
       key: option.value,
       value: option.name,
       hint: option.hint,
-      parentKey: option.parentValue
+      parentKey: option.parentValue,
+      isDisabled: option.isDisabled,
+      additionalProperties: option.additionalProperties
     };
   });
 }
@@ -147,7 +150,7 @@ EnhancedSelectInputConnector.propTypes = {
   provider: PropTypes.string.isRequired,
   providerData: PropTypes.object.isRequired,
   name: PropTypes.string.isRequired,
-  value: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])).isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]).isRequired,
   values: PropTypes.arrayOf(PropTypes.object).isRequired,
   selectOptionsProviderAction: PropTypes.string,
   onChange: PropTypes.func.isRequired,

frontend/src/Components/Form/IndexerSelectInputConnector.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { fetchIndexers } from 'Store/Actions/settingsActions';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import EnhancedSelectInput from './EnhancedSelectInput';
 
 function createMapStateToProps() {
@@ -18,7 +18,7 @@ function createMapStateToProps() {
         items
       } = indexers;
 
-      const values = items.sort(sortByName).map((indexer) => ({
+      const values = items.sort(sortByProp('name')).map((indexer) => ({
         key: indexer.id,
         value: indexer.name
       }));

frontend/src/Components/Form/QualityProfileSelectInputConnector.js

@@ -4,13 +4,13 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
-import sortByName from 'Utilities/Array/sortByName';
+import sortByProp from 'Utilities/Array/sortByProp';
 import translate from 'Utilities/String/translate';
 import EnhancedSelectInput from './EnhancedSelectInput';
 
 function createMapStateToProps() {
   return createSelector(
-    createSortedSectionSelector('settings.qualityProfiles', sortByName),
+    createSortedSectionSelector('settings.qualityProfiles', sortByProp('name')),
     (state, { includeNoChange }) => includeNoChange,
     (state, { includeNoChangeDisabled }) => includeNoChangeDisabled,
     (state, { includeMixed }) => includeMixed,

frontend/src/Components/Form/SelectInput.js

@@ -52,6 +52,7 @@ class SelectInput extends Component {
             const {
               key,
               value: optionValue,
+              isDisabled: optionIsDisabled = false,
               ...otherOptionProps
             } = option;
 
@@ -59,6 +60,7 @@ class SelectInput extends Component {
               <option
                 key={key}
                 value={key}
+                disabled={optionIsDisabled}
                 {...otherOptionProps}
               >
                 {typeof optionValue === 'function' ? optionValue() : optionValue}

frontend/src/Components/Form/TagInput.css

@@ -12,6 +12,14 @@
   }
 }
 
+.hasError {
+  composes: hasError from '~Components/Form/Input.css';
+}
+
+.hasWarning {
+  composes: hasWarning from '~Components/Form/Input.css';
+}
+
 .internalInput {
   flex: 1 1 0%;
   margin-left: 3px;

frontend/src/Components/Form/TagInput.css.d.ts

@@ -1,6 +1,8 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
+  'hasError': string;
+  'hasWarning': string;
   'input': string;
   'internalInput': string;
   'isFocused': string;

frontend/src/Components/Form/TagInput.js

@@ -225,6 +225,8 @@ class TagInput extends Component {
     const {
       className,
       inputContainerClassName,
+      hasError,
+      hasWarning,
       ...otherProps
     } = this.props;
 
@@ -241,7 +243,9 @@ class TagInput extends Component {
         className={className}
         inputContainerClassName={classNames(
           inputContainerClassName,
-          isFocused && styles.isFocused
+          isFocused && styles.isFocused,
+          hasError && styles.hasError,
+          hasWarning && styles.hasWarning
         )}
         value={value}
         suggestions={suggestions}

frontend/src/Components/Form/TagInputTag.css

@@ -7,17 +7,11 @@
 }
 
 .link {
-  composes: link from '~Components/Link/Link.css';
-
   max-width: 100%;
-  line-height: 1px;
 }
 
 .linkWithEdit {
-  composes: link from '~Components/Link/Link.css';
-
   max-width: calc(100% - 9px - 4px - 2px);
-  line-height: 1px;
 }
 
 .editContainer {
@@ -36,5 +30,6 @@
 .label {
   composes: label from '~Components/Label.css';
 
+  display: flex;
   max-width: 100%;
 }

frontend/src/Components/InfoLabel.css

@@ -8,7 +8,7 @@
   cursor: default;
 }
 
-.title {
+.name {
   margin-bottom: 2px;
   color: var(--helpTextColor);
   font-size: 10px;

frontend/src/Components/InfoLabel.css.d.ts

@@ -4,9 +4,9 @@ interface CssExports {
   'label': string;
   'large': string;
   'medium': string;
+  'name': string;
   'outline': string;
   'small': string;
-  'title': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

frontend/src/Components/InfoLabel.js

@@ -7,7 +7,7 @@ import styles from './InfoLabel.css';
 function InfoLabel(props) {
   const {
     className,
-    title,
+    name,
     kind,
     size,
     outline,
@@ -25,8 +25,8 @@ function InfoLabel(props) {
       )}
       {...otherProps}
     >
-      <div className={styles.title}>
-        {title}
+      <div className={styles.name}>
+        {name}
       </div>
       <div>
         {children}
@@ -37,7 +37,7 @@ function InfoLabel(props) {
 
 InfoLabel.propTypes = {
   className: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
   kind: PropTypes.oneOf(kinds.all).isRequired,
   size: PropTypes.oneOf(sizes.all).isRequired,
   outline: PropTypes.bool.isRequired,

frontend/src/Components/Menu/FilterMenuContent.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import sortByProp from 'Utilities/Array/sortByProp';
 import translate from 'Utilities/String/translate';
 import FilterMenuItem from './FilterMenuItem';
 import MenuContent from './MenuContent';
@@ -47,7 +48,7 @@ class FilterMenuContent extends Component {
 
         {
           customFilters
-            .sort((a, b) => a.label.localeCompare(b.label))
+            .sort(sortByProp('label'))
             .map((filter) => {
               return (
                 <FilterMenuItem

frontend/src/Components/Page/Sidebar/PageSidebar.js

@@ -71,6 +71,22 @@ const links = [
     ]
   },
 
+  {
+    iconName: icons.WARNING,
+    title: () => translate('Wanted'),
+    to: '/wanted/missing',
+    children: [
+      {
+        title: () => translate('Missing'),
+        to: '/wanted/missing'
+      },
+      {
+        title: () => translate('CutoffUnmet'),
+        to: '/wanted/cutoffunmet'
+      }
+    ]
+  },
+
   {
     iconName: icons.SETTINGS,
     title: () => translate('Settings'),

frontend/src/Components/ProgressBar.css

@@ -21,6 +21,10 @@
     background-color: var(--darkGray);
   }
 
+  &.inverse {
+    background-color: var(--inverseLabelColor);
+  }
+
   &.primary {
     background-color: var(--primaryColor);
   }
@@ -61,10 +65,18 @@
 .frontTextContainer {
   z-index: 1;
   color: var(--progressBarFrontTextColor);
+
+  &.inverse {
+    color: var(--inverseLabelTextColor);
+  }
 }
 
 .backTextContainer {
   color: var(--progressBarBackTextColor);
+
+  &.inverse {
+    color: var(--inverseLabelTextColor);
+  }
 }
 
 .backTextContainer,

frontend/src/Components/ProgressBar.css.d.ts

@@ -9,6 +9,7 @@ interface CssExports {
   'frontText': string;
   'frontTextContainer': string;
   'info': string;
+  'inverse': string;
   'large': string;
   'medium': string;
   'primary': string;

frontend/src/Components/ProgressBar.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { ColorImpairedConsumer } from 'App/ColorImpairedContext';
 import { kinds, sizes } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import styles from './ProgressBar.css';
 
 function ProgressBar(props) {
@@ -57,7 +58,7 @@ function ProgressBar(props) {
                 enableColorImpairedMode && 'colorImpaired'
               )}
               role="meter"
-              aria-label={`Progress Bar at ${progress.toFixed(0)}%`}
+              aria-label={translate('ProgressBarProgress', { progress: progress.toFixed(0) })}
               aria-valuenow={progress.toFixed(0)}
               aria-valuemin="0"
               aria-valuemax="100"

frontend/src/Components/SignalRConnector.js

@@ -202,6 +202,8 @@ class SignalRConnector extends Component {
 
     if (action === 'updated') {
       this.props.dispatchUpdateItem({ section, ...body.resource });
+
+      repopulatePage('movieUpdated');
     } else if (action === 'deleted') {
       this.props.dispatchRemoveItem({ section, id: body.resource.id });
     }
@@ -244,6 +246,26 @@ class SignalRConnector extends Component {
     this.props.dispatchSetVersion({ version });
   };
 
+  handleWantedCutoff = (body) => {
+    if (body.action === 'updated') {
+      this.props.dispatchUpdateItem({
+        section: 'wanted.cutoffUnmet',
+        updateOnly: true,
+        ...body.resource
+      });
+    }
+  };
+
+  handleWantedMissing = (body) => {
+    if (body.action === 'updated') {
+      this.props.dispatchUpdateItem({
+        section: 'wanted.missing',
+        updateOnly: true,
+        ...body.resource
+      });
+    }
+  };
+
   handleSystemTask = () => {
     this.props.dispatchFetchCommands();
   };

frontend/src/Components/Table/Column.ts

@@ -5,6 +5,7 @@ type PropertyFunction<T> = () => T;
 interface Column {
   name: string;
   label: string | PropertyFunction<string> | React.ReactNode;
+  className?: string;
   columnLabel?: string;
   isSortable?: boolean;
   isVisible: boolean;

frontend/src/Components/Table/Table.js

@@ -66,7 +66,9 @@ function Table(props) {
             columns.map((column) => {
               const {
                 name,
-                isVisible
+                isVisible,
+                isSortable,
+                ...otherColumnProps
               } = column;
 
               if (!isVisible) {
@@ -84,6 +86,7 @@ function Table(props) {
                     name={name}
                     isSortable={false}
                     {...otherProps}
+                    {...otherColumnProps}
                   >
                     <TableOptionsModalWrapper
                       columns={columns}

frontend/src/Components/Table/TableOptions/TableOptionsModal.js

@@ -49,11 +49,12 @@ class TableOptionsModal extends Component {
 
   onPageSizeChange = ({ value }) => {
     let pageSizeError = null;
+    const maxPageSize = this.props.maxPageSize ?? 250;
 
     if (value < 5) {
       pageSizeError = translate('TablePageSizeMinimum', { minimumValue: '5' });
-    } else if (value > 250) {
-      pageSizeError = translate('TablePageSizeMaximum', { maximumValue: '250' });
+    } else if (value > maxPageSize) {
+      pageSizeError = translate('TablePageSizeMaximum', { maximumValue: `${maxPageSize}` });
     } else {
       this.props.onTableOptionChange({ pageSize: value });
     }
@@ -248,6 +249,7 @@ TableOptionsModal.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
   pageSize: PropTypes.number,
+  maxPageSize: PropTypes.number,
   canModifyColumns: PropTypes.bool.isRequired,
   optionsComponent: PropTypes.elementType,
   onTableOptionChange: PropTypes.func.isRequired,

frontend/src/Components/Table/usePaging.ts

@@ -0,0 +1,54 @@
+import { useCallback, useMemo } from 'react';
+import { useDispatch } from 'react-redux';
+
+interface PagingOptions {
+  page: number;
+  totalPages: number;
+  gotoPage: ({ page }: { page: number }) => void;
+}
+
+function usePaging(options: PagingOptions) {
+  const { page, totalPages, gotoPage } = options;
+  const dispatch = useDispatch();
+
+  const handleFirstPagePress = useCallback(() => {
+    dispatch(gotoPage({ page: 1 }));
+  }, [dispatch, gotoPage]);
+
+  const handlePreviousPagePress = useCallback(() => {
+    dispatch(gotoPage({ page: Math.max(page - 1, 1) }));
+  }, [page, dispatch, gotoPage]);
+
+  const handleNextPagePress = useCallback(() => {
+    dispatch(gotoPage({ page: Math.min(page + 1, totalPages) }));
+  }, [page, totalPages, dispatch, gotoPage]);
+
+  const handleLastPagePress = useCallback(() => {
+    dispatch(gotoPage({ page: totalPages }));
+  }, [totalPages, dispatch, gotoPage]);
+
+  const handlePageSelect = useCallback(
+    (page: number) => {
+      dispatch(gotoPage({ page }));
+    },
+    [dispatch, gotoPage]
+  );
+
+  return useMemo(() => {
+    return {
+      handleFirstPagePress,
+      handlePreviousPagePress,
+      handleNextPagePress,
+      handleLastPagePress,
+      handlePageSelect,
+    };
+  }, [
+    handleFirstPagePress,
+    handlePreviousPagePress,
+    handleNextPagePress,
+    handleLastPagePress,
+    handlePageSelect,
+  ]);
+}
+
+export default usePaging;

frontend/src/Components/TagList.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { kinds } from 'Helpers/Props';
+import sortByProp from 'Utilities/Array/sortByProp';
 import Label from './Label';
 import styles from './TagList.css';
 
@@ -8,7 +9,7 @@ function TagList({ tags, tagList }) {
   const sortedTags = tags
     .map((tagId) => tagList.find((tag) => tag.id === tagId))
     .filter((tag) => !!tag)
-    .sort((a, b) => a.label.localeCompare(b.label));
+    .sort(sortByProp('label'));
 
   return (
     <div className={styles.tags}>

frontend/src/DiscoverMovie/DiscoverMovieConnector.js

@@ -5,9 +5,8 @@ import { createSelector } from 'reselect';
 import * as commandNames from 'Commands/commandNames';
 import withScrollPosition from 'Components/withScrollPosition';
 import { executeCommand } from 'Store/Actions/commandActions';
-import { addImportExclusions, addMovies, clearAddMovie, fetchDiscoverMovies, setListMovieFilter, setListMovieSort, setListMovieTableOption, setListMovieView } from 'Store/Actions/discoverMovieActions';
+import { addImportListExclusions, addMovies, clearAddMovie, fetchDiscoverMovies, setListMovieFilter, setListMovieSort, setListMovieTableOption, setListMovieView } from 'Store/Actions/discoverMovieActions';
 import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
-import { fetchImportExclusions } from 'Store/Actions/Settings/importExclusions';
 import scrollPositions from 'Store/scrollPositions';
 import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
 import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
@@ -43,10 +42,6 @@ function createMapDispatchToProps(dispatch, props) {
       dispatch(fetchRootFolders());
     },
 
-    dispatchFetchImportExclusions() {
-      dispatch(fetchImportExclusions());
-    },
-
     dispatchClearListMovie() {
       dispatch(clearAddMovie());
     },
@@ -75,8 +70,8 @@ function createMapDispatchToProps(dispatch, props) {
       dispatch(addMovies({ ids, addOptions }));
     },
 
-    dispatchAddImportExclusions(exclusions) {
-      dispatch(addImportExclusions(exclusions));
+    dispatchAddImportListExclusions(exclusions) {
+      dispatch(addImportListExclusions(exclusions));
     },
 
     onImportListSyncPress() {
@@ -96,7 +91,6 @@ class DiscoverMovieConnector extends Component {
   componentDidMount() {
     registerPagePopulator(this.repopulate);
     this.props.dispatchFetchRootFolders();
-    this.props.dispatchFetchImportExclusions();
     this.props.dispatchFetchListMovies();
   }
 
@@ -121,7 +115,7 @@ class DiscoverMovieConnector extends Component {
   };
 
   onExcludeMoviesPress =({ ids }) => {
-    this.props.dispatchAddImportExclusions({ ids });
+    this.props.dispatchAddImportListExclusions({ ids });
   };
 
   //
@@ -144,13 +138,12 @@ class DiscoverMovieConnector extends Component {
 DiscoverMovieConnector.propTypes = {
   isSmallScreen: PropTypes.bool.isRequired,
   view: PropTypes.string.isRequired,
-  dispatchFetchImportExclusions: PropTypes.func.isRequired,
   dispatchFetchRootFolders: PropTypes.func.isRequired,
   dispatchFetchListMovies: PropTypes.func.isRequired,
   dispatchClearListMovie: PropTypes.func.isRequired,
   dispatchSetListMovieView: PropTypes.func.isRequired,
   dispatchAddMovies: PropTypes.func.isRequired,
-  dispatchAddImportExclusions: PropTypes.func.isRequired
+  dispatchAddImportListExclusions: PropTypes.func.isRequired
 };
 
 export default withScrollPosition(

frontend/src/DiscoverMovie/DiscoverMovieFooterConnector.js

@@ -8,9 +8,9 @@ import DiscoverMovieFooter from './DiscoverMovieFooter';
 function createMapStateToProps() {
   return createSelector(
     (state) => state.discoverMovie,
-    (state) => state.settings.importExclusions,
+    (state) => state.settings.importListExclusions,
     (state, { selectedIds }) => selectedIds,
-    (discoverMovie, importExclusions, selectedIds) => {
+    (discoverMovie, importListExclusions, selectedIds) => {
       const {
         monitor: defaultMonitor,
         qualityProfileId: defaultQualityProfileId,
@@ -25,7 +25,7 @@ function createMapStateToProps() {
 
       const {
         isSaving
-      } = importExclusions;
+      } = importListExclusions;
 
       return {
         selectedCount: selectedIds.length,

frontend/src/DiscoverMovie/Exclusion/ExcludeMovieModalContentConnector.js

@@ -1,11 +1,11 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { addImportExclusions } from 'Store/Actions/discoverMovieActions';
+import { addImportListExclusions } from 'Store/Actions/discoverMovieActions';
 import ExcludeMovieModalContent from './ExcludeMovieModalContent';
 
 const mapDispatchToProps = {
-  addImportExclusions
+  addImportListExclusions
 };
 
 class ExcludeMovieModalContentConnector extends Component {
@@ -14,7 +14,7 @@ class ExcludeMovieModalContentConnector extends Component {
   // Listeners
 
   onExcludePress = () => {
-    this.props.addImportExclusions({ ids: [this.props.tmdbId] });
+    this.props.addImportListExclusions({ ids: [this.props.tmdbId] });
 
     this.props.onModalClose(true);
   };
@@ -37,7 +37,7 @@ ExcludeMovieModalContentConnector.propTypes = {
   title: PropTypes.string.isRequired,
   year: PropTypes.number.isRequired,
   onModalClose: PropTypes.func.isRequired,
-  addImportExclusions: PropTypes.func.isRequired
+  addImportListExclusions: PropTypes.func.isRequired
 };
 
 export default connect(undefined, mapDispatchToProps)(ExcludeMovieModalContentConnector);

frontend/src/DiscoverMovie/Posters/DiscoverMoviePosterInfo.js

@@ -3,7 +3,7 @@ import React from 'react';
 import Icon from 'Components/Icon';
 import TmdbRating from 'Components/TmdbRating';
 import { icons } from 'Helpers/Props';
-import { getMovieStatusDetails } from 'Movie/MovieStatus';
+import getMovieStatusDetails from 'Movie/getMovieStatusDetails';
 import formatRuntime from 'Utilities/Date/formatRuntime';
 import getRelativeDate from 'Utilities/Date/getRelativeDate';
 import translate from 'Utilities/String/translate';

frontend/src/DiscoverMovie/Table/ListMovieStatusCell.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Icon from 'Components/Icon';
 import VirtualTableRowCell from 'Components/Table/Cells/TableRowCell';
-import { getMovieStatusDetails } from 'Movie/MovieStatus';
+import getMovieStatusDetails from 'Movie/getMovieStatusDetails';
 import styles from './ListMovieStatusCell.css';
 
 function ListMovieStatusCell(props) {

frontend/src/Helpers/Hooks/useCurrentPage.ts

@@ -0,0 +1,9 @@
+import { useHistory } from 'react-router-dom';
+
+function useCurrentPage() {
+  const history = useHistory();
+
+  return history.action === 'POP';
+}
+
+export default useCurrentPage;

frontend/src/Helpers/Hooks/useModalOpenState.ts

@@ -3,15 +3,15 @@ import { useCallback, useState } from 'react';
 export default function useModalOpenState(
   initialState: boolean
 ): [boolean, () => void, () => void] {
-  const [isOpen, setOpen] = useState(initialState);
+  const [isOpen, setIsOpen] = useState(initialState);
 
   const setModalOpen = useCallback(() => {
-    setOpen(true);
-  }, [setOpen]);
+    setIsOpen(true);
+  }, [setIsOpen]);
 
   const setModalClosed = useCallback(() => {
-    setOpen(false);
-  }, [setOpen]);
+    setIsOpen(false);
+  }, [setIsOpen]);
 
   return [isOpen, setModalOpen, setModalClosed];
 }

frontend/src/Helpers/Props/icons.js

@@ -179,6 +179,7 @@ export const IN_CINEMAS = fasTicketAlt;
 export const INFO = fasInfoCircle;
 export const INTERACTIVE = fasUser;
 export const KEYBOARD = farKeyboard;
+export const LANGUAGE = fasLanguage;
 export const LOGOUT = fasSignOutAlt;
 export const MANAGE = fasListCheck;
 export const MEDIA_INFO = farFileInvoice;

frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.css

@@ -18,12 +18,17 @@
 .leftButtons,
 .rightButtons {
   display: flex;
-  flex: 1 0 50%;
   flex-wrap: wrap;
+  min-width: 0;
+}
+
+.leftButtons {
+  flex: 0 1 auto;
 }
 
 .rightButtons {
   justify-content: flex-end;
+  flex: 1 1 50%;
 }
 
 .deleteButton {
@@ -37,6 +42,7 @@
   composes: select from '~Components/Form/SelectInput.css';
 
   margin-right: 10px;
+  max-width: 100%;
   width: auto;
 }
 
@@ -49,10 +55,12 @@
     .leftButtons,
     .rightButtons {
       flex-direction: column;
+      gap: 3px;
     }
 
     .leftButtons {
       align-items: flex-start;
+      max-width: fit-content;
     }
 
     .rightButtons {

frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.tsx

@@ -702,7 +702,7 @@ function InteractiveImportModalContent(
 
               <MenuContent>
                 <SelectedMenuItem
-                  name={'all'}
+                  name="all"
                   isSelected={!filterExistingFiles}
                   onPress={onFilterExistingFilesChange}
                 >
@@ -710,7 +710,7 @@ function InteractiveImportModalContent(
                 </SelectedMenuItem>
 
                 <SelectedMenuItem
-                  name={'new'}
+                  name="new"
                   isSelected={filterExistingFiles}
                   onPress={onFilterExistingFilesChange}
                 >
@@ -790,7 +790,7 @@ function InteractiveImportModalContent(
           <SelectInput
             className={styles.bulkSelect}
             name="select"
-            value={'select'}
+            value="select"
             values={bulkSelectOptions}
             isDisabled={!selectedIds.length}
             onChange={onSelectModalSelect}

frontend/src/InteractiveImport/Interactive/InteractiveImportRow.tsx

@@ -17,7 +17,7 @@ import Language from 'Language/Language';
 import IndexerFlags from 'Movie/IndexerFlags';
 import Movie from 'Movie/Movie';
 import MovieFormats from 'Movie/MovieFormats';
-import MovieLanguage from 'Movie/MovieLanguage';
+import MovieLanguages from 'Movie/MovieLanguages';
 import MovieQuality from 'Movie/MovieQuality';
 import { QualityModel } from 'Quality/Quality';
 import {
@@ -322,7 +322,7 @@ function InteractiveImportRow(props: InteractiveImportRowProps) {
         {showLanguagePlaceholder && <InteractiveImportRowCellPlaceholder />}
 
         {!showLanguagePlaceholder && !!languages && (
-          <MovieLanguage className={styles.label} languages={languages} />
+          <MovieLanguages className={styles.label} languages={languages} />
         )}
       </TableRowCellButton>
 

frontend/src/InteractiveImport/Language/SelectLanguageModal.tsx

@@ -17,7 +17,7 @@ function SelectLanguageModal(props: SelectLanguageModalProps) {
     props;
 
   return (
-    <Modal isOpen={isOpen} onModalClose={onModalClose} size={sizes.MEDIUM}>
+    <Modal isOpen={isOpen} size={sizes.MEDIUM} onModalClose={onModalClose}>
       <SelectLanguageModalContent
         languageIds={languageIds}
         modalTitle={modalTitle}

frontend/src/InteractiveImport/Movie/SelectMovieModalContent.tsx

@@ -21,6 +21,7 @@ import { scrollDirections } from 'Helpers/Props';
 import Movie from 'Movie/Movie';
 import createAllMoviesSelector from 'Store/Selectors/createAllMoviesSelector';
 import dimensions from 'Styles/Variables/dimensions';
+import sortByProp from 'Utilities/Array/sortByProp';
 import translate from 'Utilities/String/translate';
 import SelectMovieModalTableHeader from './SelectMovieModalTableHeader';
 import SelectMovieRow from './SelectMovieRow';
@@ -63,19 +64,20 @@ interface RowItemData {
   onMovieSelect(movieId: number): void;
 }
 
-const Row: React.FC<ListChildComponentProps<RowItemData>> = ({
-  index,
-  style,
-  data,
-}) => {
+function Row({ index, style, data }: ListChildComponentProps<RowItemData>) {
   const { items, columns, onMovieSelect } = data;
+  const movie = index >= items.length ? null : items[index];
 
-  if (index >= items.length) {
+  const handlePress = useCallback(() => {
+    if (movie?.id) {
+      onMovieSelect(movie.id);
+    }
+  }, [movie?.id, onMovieSelect]);
+
+  if (movie == null) {
     return null;
   }
 
-  const movie = items[index];
-
   return (
     <VirtualTableRowButton
       style={{
@@ -83,7 +85,7 @@ const Row: React.FC<ListChildComponentProps<RowItemData>> = ({
         justifyContent: 'space-between',
         ...style,
       }}
-      onPress={() => onMovieSelect(movie.id)}
+      onPress={handlePress}
     >
       <SelectMovieRow
         id={movie.id}
@@ -96,7 +98,7 @@ const Row: React.FC<ListChildComponentProps<RowItemData>> = ({
       />
     </VirtualTableRowButton>
   );
-};
+}
 
 function SelectMovieModalContent(props: SelectMovieModalContentProps) {
   const { modalTitle, onMovieSelect, onModalClose } = props;
@@ -161,18 +163,21 @@ function SelectMovieModalContent(props: SelectMovieModalContentProps) {
     [allMovies, onMovieSelect]
   );
 
-  const items = useMemo(() => {
-    const sorted = [...allMovies].sort((a, b) =>
-      a.sortTitle.localeCompare(b.sortTitle)
-    );
+  const sortedMovies = useMemo(
+    () => [...allMovies].sort(sortByProp('sortTitle')),
+    [allMovies]
+  );
 
-    return sorted.filter(
-      (item) =>
-        item.title.toLowerCase().includes(filter.toLowerCase()) ||
-        item.tmdbId.toString().includes(filter) ||
-        item.imdbId?.includes(filter)
-    );
-  }, [allMovies, filter]);
+  const items = useMemo(
+    () =>
+      sortedMovies.filter(
+        (item) =>
+          item.title.toLowerCase().includes(filter.toLowerCase()) ||
+          item.tmdbId.toString().includes(filter) ||
+          item.imdbId?.includes(filter)
+      ),
+    [sortedMovies, filter]
+  );
 
   return (
     <ModalContent onModalClose={onModalClose}>
@@ -192,9 +197,9 @@ function SelectMovieModalContent(props: SelectMovieModalContentProps) {
         />
 
         <Scroller
+          ref={scrollerRef}
           className={styles.scroller}
           autoFocus={false}
-          ref={scrollerRef}
         >
           <SelectMovieModalTableHeader columns={columns} />
           <List<RowItemData>

frontend/src/InteractiveSearch/InteractiveSearchRow.tsx

@@ -12,7 +12,7 @@ import type DownloadProtocol from 'DownloadClient/DownloadProtocol';
 import { icons, kinds, tooltipPositions } from 'Helpers/Props';
 import Language from 'Language/Language';
 import MovieFormats from 'Movie/MovieFormats';
-import MovieLanguage from 'Movie/MovieLanguage';
+import MovieLanguages from 'Movie/MovieLanguages';
 import MovieQuality from 'Movie/MovieQuality';
 import { QualityModel } from 'Quality/Quality';
 import CustomFormat from 'typings/CustomFormat';
@@ -262,7 +262,7 @@ function InteractiveSearchRow(props: InteractiveSearchRowProps) {
       </TableRowCell>
 
       <TableRowCell className={styles.languages}>
-        <MovieLanguage languages={languages} />
+        <MovieLanguages languages={languages} />
       </TableRowCell>
 
       <TableRowCell className={styles.quality}>

frontend/src/InteractiveSearch/OverrideMatch/DownloadClient/SelectDownloadClientModal.tsx

@@ -17,7 +17,7 @@ function SelectDownloadClientModal(props: SelectDownloadClientModalProps) {
     props;
 
   return (
-    <Modal isOpen={isOpen} onModalClose={onModalClose} size={sizes.MEDIUM}>
+    <Modal isOpen={isOpen} size={sizes.MEDIUM} onModalClose={onModalClose}>
       <SelectDownloadClientModalContent
         protocol={protocol}
         modalTitle={modalTitle}

frontend/src/InteractiveSearch/OverrideMatch/OverrideMatchModalContent.tsx

@@ -15,7 +15,7 @@ import SelectMovieModal from 'InteractiveImport/Movie/SelectMovieModal';
 import SelectQualityModal from 'InteractiveImport/Quality/SelectQualityModal';
 import Language from 'Language/Language';
 import Movie from 'Movie/Movie';
-import MovieLanguage from 'Movie/MovieLanguage';
+import MovieLanguages from 'Movie/MovieLanguages';
 import MovieQuality from 'Movie/MovieQuality';
 import { QualityModel } from 'Quality/Quality';
 import { grabRelease } from 'Store/Actions/releaseActions';
@@ -215,7 +215,7 @@ function OverrideMatchModalContent(props: OverrideMatchModalContentProps) {
             data={
               <OverrideMatchData
                 value={
-                  <MovieLanguage
+                  <MovieLanguages
                     className={styles.label}
                     languages={languages}
                   />

frontend/src/Movie/Delete/DeleteMovieModalContent.css

@@ -6,7 +6,17 @@
   margin-right: 8px;
 }
 
+.folderPath {
+  font-weight: bold;
+  font-family: var(--defaultFontFamily);
+}
+
 .deleteFilesMessage {
   margin-top: 20px;
   color: var(--dangerColor);
+
+  .deleteCount {
+    margin-top: 20px;
+    color: var(--warningColor);
+  }
 }

frontend/src/Movie/Delete/DeleteMovieModalContent.css.d.ts

@@ -1,7 +1,9 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
+  'deleteCount': string;
   'deleteFilesMessage': string;
+  'folderPath': string;
   'pathContainer': string;
   'pathIcon': string;
 }

frontend/src/Movie/Delete/DeleteMovieModalContent.js

@@ -5,6 +5,7 @@ import FormInputGroup from 'Components/Form/FormInputGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import Icon from 'Components/Icon';
 import Button from 'Components/Link/Button';
+import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
 import ModalBody from 'Components/Modal/ModalBody';
 import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
@@ -49,34 +50,26 @@ class DeleteMovieModalContent extends Component {
     const {
       title,
       path,
-      hasFile,
-      statistics,
+      statistics = {},
       deleteOptions,
       onModalClose,
       onDeleteOptionChange
     } = this.props;
 
     const {
+      movieFileCount = 0,
       sizeOnDisk = 0
     } = statistics;
 
     const deleteFiles = this.state.deleteFiles;
     const addImportExclusion = deleteOptions.addImportExclusion;
 
-    let deleteFilesLabel = hasFile ? translate('DeleteFileLabel', [1]) : translate('DeleteFilesLabel', [0]);
-    let deleteFilesHelpText = translate('DeleteFilesHelpText');
-
-    if (!hasFile) {
-      deleteFilesLabel = translate('DeleteMovieFolderLabel');
-      deleteFilesHelpText = translate('DeleteMovieFolderHelpText');
-    }
-
     return (
       <ModalContent
         onModalClose={onModalClose}
       >
         <ModalHeader>
-          {translate('DeleteHeader', [title])}
+          {translate('DeleteHeader', { title })}
         </ModalHeader>
 
         <ModalBody>
@@ -105,32 +98,32 @@ class DeleteMovieModalContent extends Component {
           </FormGroup>
 
           <FormGroup>
-            <FormLabel>{deleteFilesLabel}</FormLabel>
+            <FormLabel>{movieFileCount === 0 ? translate('DeleteMovieFolder') : translate('DeleteMovieFiles', { movieFileCount })}</FormLabel>
 
             <FormInputGroup
               type={inputTypes.CHECK}
               name="deleteFiles"
               value={deleteFiles}
-              helpText={deleteFilesHelpText}
+              helpText={movieFileCount === 0 ? translate('DeleteMovieFolderHelpText') : translate('DeleteMovieFilesHelpText')}
               kind={kinds.DANGER}
               onChange={this.onDeleteFilesChange}
             />
           </FormGroup>
 
           {
-            deleteFiles &&
+            deleteFiles ?
               <div className={styles.deleteFilesMessage}>
-                <div>
-                  {translate('DeleteTheMovieFolder', { path })}
-                </div>
+                <div><InlineMarkdown data={translate('DeleteMovieFolderConfirmation', { path })} blockClassName={styles.folderPath} /></div>
 
                 {
-                  !!hasFile &&
-                    <div>
-                      {hasFile} {translate('MovieFilesTotaling')} {formatBytes(sizeOnDisk)}
-                    </div>
+                  movieFileCount ?
+                    <div className={styles.deleteCount}>
+                      {translate('DeleteMovieFolderMovieCount', { movieFileCount, size: formatBytes(sizeOnDisk) })}
+                    </div> :
+                    null
                 }
-              </div>
+              </div> :
+              null
           }
 
         </ModalBody>

frontend/src/Movie/Details/MovieDetails.css

@@ -151,6 +151,7 @@
 .sizeOnDisk,
 .qualityProfileName,
 .statusName,
+.originalLanguage,
 .studio,
 .collection,
 .genres {

frontend/src/Movie/Details/MovieDetails.css.d.ts

@@ -21,6 +21,7 @@ interface CssExports {
   'monitorToggleButton': string;
   'movieNavigationButton': string;
   'movieNavigationButtons': string;
+  'originalLanguage': string;
   'overview': string;
   'path': string;
   'poster': string;

frontend/src/Movie/Details/MovieDetails.js

@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import TextTruncate from 'react-text-truncate';
@@ -25,6 +24,7 @@ import { icons, kinds, sizes, tooltipPositions } from 'Helpers/Props';
 import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
 import DeleteMovieModal from 'Movie/Delete/DeleteMovieModal';
 import EditMovieModalConnector from 'Movie/Edit/EditMovieModalConnector';
+import getMovieStatusDetails from 'Movie/getMovieStatusDetails';
 import MovieHistoryModal from 'Movie/History/MovieHistoryModal';
 import MoviePoster from 'Movie/MoviePoster';
 import MovieInteractiveSearchModalConnector from 'Movie/Search/MovieInteractiveSearchModalConnector';
@@ -51,7 +51,8 @@ const defaultFontSize = parseInt(fonts.defaultFontSize);
 const lineHeight = parseFloat(fonts.lineHeight);
 
 function getFanartUrl(images) {
-  return _.find(images, { coverType: 'fanart' })?.url;
+  const image = images.find((img) => img.coverType === 'fanart');
+  return image?.url ?? image?.remoteUrl;
 }
 
 class MovieDetails extends Component {
@@ -242,9 +243,11 @@ class MovieDetails extends Component {
       qualityProfileId,
       monitored,
       studio,
+      originalLanguage,
       genres,
       collection,
       overview,
+      status,
       youTubeTrailerId,
       isAvailable,
       images,
@@ -282,11 +285,15 @@ class MovieDetails extends Component {
       titleWidth
     } = this.state;
 
+    const statusDetails = getMovieStatusDetails(status);
+
     const fanartUrl = getFanartUrl(images);
     const marqueeWidth = isSmallScreen ? titleWidth : (titleWidth - 150);
 
+    const titleWithYear = `${title}${year > 0 ? ` (${year})` : ''}`;
+
     return (
-      <PageContent title={title}>
+      <PageContent title={titleWithYear}>
         <PageToolbar>
           <PageToolbarSection>
             <PageToolbarButton
@@ -368,7 +375,7 @@ class MovieDetails extends Component {
               <MoviePoster
                 className={styles.poster}
                 images={images}
-                size={250}
+                size={500}
                 lazy={false}
               />
 
@@ -521,7 +528,7 @@ class MovieDetails extends Component {
                 <div className={styles.detailsLabels}>
                   <InfoLabel
                     className={styles.detailsInfoLabel}
-                    title={translate('Path')}
+                    name={translate('Path')}
                     size={sizes.LARGE}
                   >
                     <span className={styles.path}>
@@ -531,12 +538,14 @@ class MovieDetails extends Component {
 
                   <InfoLabel
                     className={styles.detailsInfoLabel}
-                    title={translate('Status')}
+                    name={translate('Status')}
+                    title={statusDetails.message}
                     kind={kinds.DELETE}
                     size={sizes.LARGE}
                   >
                     <span className={styles.statusName}>
                       <MovieStatusLabel
+                        status={status}
                         hasMovieFiles={hasMovieFiles}
                         monitored={monitored}
                         isAvailable={isAvailable}
@@ -547,7 +556,7 @@ class MovieDetails extends Component {
 
                   <InfoLabel
                     className={styles.detailsInfoLabel}
-                    title={translate('QualityProfile')}
+                    name={translate('QualityProfile')}
                     size={sizes.LARGE}
                   >
                     <span className={styles.qualityProfileName}>
@@ -561,21 +570,19 @@ class MovieDetails extends Component {
 
                   <InfoLabel
                     className={styles.detailsInfoLabel}
-                    title={translate('Size')}
+                    name={translate('Size')}
                     size={sizes.LARGE}
                   >
                     <span className={styles.sizeOnDisk}>
-                      {
-                        formatBytes(sizeOnDisk || 0)
-                      }
+                      {formatBytes(sizeOnDisk)}
                     </span>
                   </InfoLabel>
 
                   {
-                    !!collection &&
+                    collection ?
                       <InfoLabel
                         className={styles.detailsInfoLabel}
-                        title={translate('Collection')}
+                        name={translate('Collection')}
                         size={sizes.LARGE}
                       >
                         <div className={styles.collection}>
@@ -583,33 +590,50 @@ class MovieDetails extends Component {
                             tmdbId={collection.tmdbId}
                           />
                         </div>
-                      </InfoLabel>
+                      </InfoLabel> :
+                      null
                   }
 
                   {
-                    !!studio && !isSmallScreen &&
+                    originalLanguage?.name && !isSmallScreen ?
                       <InfoLabel
                         className={styles.detailsInfoLabel}
-                        title={translate('Studio')}
+                        name={translate('OriginalLanguage')}
+                        size={sizes.LARGE}
+                      >
+                        <span className={styles.originalLanguage}>
+                          {originalLanguage.name}
+                        </span>
+                      </InfoLabel> :
+                      null
+                  }
+
+                  {
+                    studio && !isSmallScreen ?
+                      <InfoLabel
+                        className={styles.detailsInfoLabel}
+                        name={translate('Studio')}
                         size={sizes.LARGE}
                       >
                         <span className={styles.studio}>
                           {studio}
                         </span>
-                      </InfoLabel>
+                      </InfoLabel> :
+                      null
                   }
 
                   {
-                    !!genres.length && !isSmallScreen &&
+                    genres.length && !isSmallScreen ?
                       <InfoLabel
                         className={styles.detailsInfoLabel}
-                        title={translate('Genres')}
+                        name={translate('Genres')}
                         size={sizes.LARGE}
                       >
                         <span className={styles.genres}>
                           {genres.join(', ')}
                         </span>
-                      </InfoLabel>
+                      </InfoLabel> :
+                      null
                   }
                 </div>
 
@@ -719,6 +743,7 @@ class MovieDetails extends Component {
           <MovieInteractiveSearchModalConnector
             isOpen={isInteractiveSearchModalOpen}
             movieId={id}
+            movieTitle={title}
             onModalClose={this.onInteractiveSearchModalClose}
           />
         </PageContentBody>
@@ -743,6 +768,7 @@ MovieDetails.propTypes = {
   monitored: PropTypes.bool.isRequired,
   status: PropTypes.string.isRequired,
   studio: PropTypes.string,
+  originalLanguage: PropTypes.object,
   genres: PropTypes.arrayOf(PropTypes.string).isRequired,
   collection: PropTypes.object,
   youTubeTrailerId: PropTypes.string,

frontend/src/Movie/Details/MovieDetailsConnector.js

@@ -227,7 +227,7 @@ class MovieDetailsConnector extends Component {
   // Lifecycle
 
   componentDidMount() {
-    registerPagePopulator(this.populate);
+    registerPagePopulator(this.populate, ['movieUpdated']);
     this.populate();
   }
 

frontend/src/Movie/Details/MovieDetailsLinks.js

@@ -1,114 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Label from 'Components/Label';
-import Link from 'Components/Link/Link';
-import { kinds, sizes } from 'Helpers/Props';
-import translate from 'Utilities/String/translate';
-import styles from './MovieDetailsLinks.css';
-
-function MovieDetailsLinks(props) {
-  const {
-    tmdbId,
-    imdbId,
-    youTubeTrailerId
-  } = props;
-
-  return (
-    <div className={styles.links}>
-      <Link
-        className={styles.link}
-        to={`https://www.themoviedb.org/movie/${tmdbId}`}
-      >
-        <Label
-          className={styles.linkLabel}
-          kind={kinds.INFO}
-          size={sizes.LARGE}
-        >
-          {translate('TMDb')}
-        </Label>
-      </Link>
-
-      <Link
-        className={styles.link}
-        to={`https://trakt.tv/search/tmdb/${tmdbId}?id_type=movie`}
-      >
-        <Label
-          className={styles.linkLabel}
-          kind={kinds.INFO}
-          size={sizes.LARGE}
-        >
-          {translate('Trakt')}
-        </Label>
-      </Link>
-
-      <Link
-        className={styles.link}
-        to={`https://letterboxd.com/tmdb/${tmdbId}`}
-      >
-        <Label
-          className={styles.linkLabel}
-          kind={kinds.INFO}
-          size={sizes.LARGE}
-        >
-          {translate('Letterboxd')}
-        </Label>
-      </Link>
-
-      {
-        !!imdbId &&
-          <Link
-            className={styles.link}
-            to={`https://imdb.com/title/${imdbId}/`}
-          >
-            <Label
-              className={styles.linkLabel}
-              kind={kinds.INFO}
-              size={sizes.LARGE}
-            >
-              {translate('IMDb')}
-            </Label>
-          </Link>
-      }
-
-      {
-        !!imdbId &&
-          <Link
-            className={styles.link}
-            to={`https://moviechat.org/${imdbId}/`}
-          >
-            <Label
-              className={styles.linkLabel}
-              kind={kinds.INFO}
-              size={sizes.LARGE}
-            >
-              {translate('MovieChat')}
-            </Label>
-          </Link>
-      }
-
-      {
-        !!youTubeTrailerId &&
-          <Link
-            className={styles.link}
-            to={`https://www.youtube.com/watch?v=${youTubeTrailerId}/`}
-          >
-            <Label
-              className={styles.linkLabel}
-              kind={kinds.DANGER}
-              size={sizes.LARGE}
-            >
-              {translate('Trailer')}
-            </Label>
-          </Link>
-      }
-    </div>
-  );
-}
-
-MovieDetailsLinks.propTypes = {
-  tmdbId: PropTypes.number.isRequired,
-  imdbId: PropTypes.string,
-  youTubeTrailerId: PropTypes.string
-};
-
-export default MovieDetailsLinks;

frontend/src/Movie/Details/MovieDetailsLinks.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import Label from 'Components/Label';
+import Link from 'Components/Link/Link';
+import { kinds, sizes } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import styles from './MovieDetailsLinks.css';
+
+interface MovieDetailsLinksProps {
+  tmdbId: number;
+  imdbId?: string;
+  youTubeTrailerId?: string;
+}
+
+function MovieDetailsLinks(props: MovieDetailsLinksProps) {
+  const { tmdbId, imdbId, youTubeTrailerId } = props;
+
+  return (
+    <div className={styles.links}>
+      <Link
+        className={styles.link}
+        to={`https://www.themoviedb.org/movie/${tmdbId}`}
+      >
+        <Label
+          className={styles.linkLabel}
+          kind={kinds.INFO}
+          size={sizes.LARGE}
+        >
+          {translate('TMDb')}
+        </Label>
+      </Link>
+
+      <Link
+        className={styles.link}
+        to={`https://trakt.tv/search/tmdb/${tmdbId}?id_type=movie`}
+      >
+        <Label
+          className={styles.linkLabel}
+          kind={kinds.INFO}
+          size={sizes.LARGE}
+        >
+          {translate('Trakt')}
+        </Label>
+      </Link>
+
+      <Link
+        className={styles.link}
+        to={`https://letterboxd.com/tmdb/${tmdbId}`}
+      >
+        <Label
+          className={styles.linkLabel}
+          kind={kinds.INFO}
+          size={sizes.LARGE}
+        >
+          {translate('Letterboxd')}
+        </Label>
+      </Link>
+
+      {imdbId ? (
+        <Link className={styles.link} to={`https://imdb.com/title/${imdbId}/`}>
+          <Label
+            className={styles.linkLabel}
+            kind={kinds.INFO}
+            size={sizes.LARGE}
+          >
+            {translate('IMDb')}
+          </Label>
+        </Link>
+      ) : null}
+
+      {imdbId ? (
+        <Link className={styles.link} to={`https://moviechat.org/${imdbId}/`}>
+          <Label
+            className={styles.linkLabel}
+            kind={kinds.INFO}
+            size={sizes.LARGE}
+          >
+            {translate('MovieChat')}
+          </Label>
+        </Link>
+      ) : null}
+
+      {youTubeTrailerId ? (
+        <Link
+          className={styles.link}
+          to={`https://www.youtube.com/watch?v=${youTubeTrailerId}`}
+        >
+          <Label
+            className={styles.linkLabel}
+            kind={kinds.DANGER}
+            size={sizes.LARGE}
+          >
+            {translate('Trailer')}
+          </Label>
+        </Link>
+      ) : null}
+    </div>
+  );
+}
+
+export default MovieDetailsLinks;

frontend/src/Movie/Details/MovieReleaseDates.tsx

@@ -8,18 +8,29 @@ import translate from 'Utilities/String/translate';
 import styles from './MovieReleaseDates.css';
 
 interface MovieReleaseDatesProps {
-  inCinemas: string;
-  physicalRelease: string;
-  digitalRelease: string;
+  inCinemas?: string;
+  digitalRelease?: string;
+  physicalRelease?: string;
 }
 
 function MovieReleaseDates(props: MovieReleaseDatesProps) {
-  const { inCinemas, physicalRelease, digitalRelease } = props;
+  const { inCinemas, digitalRelease, physicalRelease } = props;
 
   const { showRelativeDates, shortDateFormat, timeFormat } = useSelector(
     createUISettingsSelector()
   );
 
+  if (!inCinemas && !physicalRelease && !digitalRelease) {
+    return (
+      <div>
+        <div className={styles.dateIcon}>
+          <Icon name={icons.MISSING} />
+        </div>
+        {translate('NoMovieReleaseDatesAvailable')}
+      </div>
+    );
+  }
+
   return (
     <div>
       {inCinemas ? (

frontend/src/Movie/Details/MovieStatusLabel.css

@@ -27,3 +27,9 @@
   padding-left: 2px;
   border-left: 4px solid var(--warningColor);
 }
+
+.deleted {
+  padding-left: 2px;
+  border-left: 4px solid var(--inverseLabelColor);
+  color: var(--dangerColor);
+}

frontend/src/Movie/Details/MovieStatusLabel.css.d.ts

@@ -3,6 +3,7 @@
 interface CssExports {
   'availNotMonitored': string;
   'continuing': string;
+  'deleted': string;
   'ended': string;
   'missingMonitored': string;
   'missingUnmonitored': string;

frontend/src/Movie/Details/MovieStatusLabel.js

@@ -7,7 +7,7 @@ import firstCharToUpper from 'Utilities/String/firstCharToUpper';
 import translate from 'Utilities/String/translate';
 import styles from './MovieStatusLabel.css';
 
-function getMovieStatus(hasFile, isMonitored, isAvailable, queueItem = false) {
+function getMovieStatus(status, hasFile, isMonitored, isAvailable, queueItem = false) {
   if (queueItem) {
     const queueStatus = queueItem.status;
     const queueState = queueItem.trackedDownloadStatus;
@@ -26,6 +26,10 @@ function getMovieStatus(hasFile, isMonitored, isAvailable, queueItem = false) {
     return 'ended';
   }
 
+  if (status === 'deleted') {
+    return 'deleted';
+  }
+
   if (isAvailable && !isMonitored && !hasFile) {
     return 'missingUnmonitored';
   }
@@ -39,6 +43,7 @@ function getMovieStatus(hasFile, isMonitored, isAvailable, queueItem = false) {
 
 function MovieStatusLabel(props) {
   const {
+    status,
     hasMovieFiles,
     monitored,
     isAvailable,
@@ -47,17 +52,15 @@ function MovieStatusLabel(props) {
     colorImpairedMode
   } = props;
 
-  let status = getMovieStatus(hasMovieFiles, monitored, isAvailable, queueItem);
-  let statusClass = status;
+  let movieStatus = getMovieStatus(status, hasMovieFiles, monitored, isAvailable, queueItem);
+  let statusClass = movieStatus;
 
-  if (status === 'availNotMonitored' || status === 'ended') {
-    status = 'downloaded';
-  }
-  if (status === 'missingMonitored' || status === 'missingUnmonitored') {
-    status = 'missing';
-  }
-  if (status === 'continuing') {
-    status = 'notAvailable';
+  if (movieStatus === 'availNotMonitored' || movieStatus === 'ended') {
+    movieStatus = 'downloaded';
+  } else if (movieStatus === 'missingMonitored' || movieStatus === 'missingUnmonitored') {
+    movieStatus = 'missing';
+  } else if (movieStatus === 'continuing') {
+    movieStatus = 'notAvailable';
   }
 
   if (queueItem) {
@@ -83,6 +86,9 @@ function MovieStatusLabel(props) {
       case 'missingUnmonitored':
         kind = kinds.WARNING;
         break;
+      case 'deleted':
+        kind = kinds.INVERSE;
+        break;
       default:
     }
 
@@ -92,7 +98,7 @@ function MovieStatusLabel(props) {
         size={sizes.LARGE}
         colorImpairedMode={colorImpairedMode}
       >
-        {translate(firstCharToUpper(status))}
+        {translate(firstCharToUpper(movieStatus))}
       </Label>
     );
   }
@@ -101,12 +107,13 @@ function MovieStatusLabel(props) {
     <span
       className={styles[statusClass]}
     >
-      {translate(firstCharToUpper(status))}
+      {translate(firstCharToUpper(movieStatus))}
     </span>
   );
 }
 
 MovieStatusLabel.propTypes = {
+  status: PropTypes.string.isRequired,
   hasMovieFiles: PropTypes.bool.isRequired,
   monitored: PropTypes.bool.isRequired,
   isAvailable: PropTypes.bool.isRequired,
@@ -115,4 +122,9 @@ MovieStatusLabel.propTypes = {
   colorImpairedMode: PropTypes.bool
 };
 
+MovieStatusLabel.defaultProps = {
+  useLabel: false,
+  colorImpairedMode: false
+};
+
 export default MovieStatusLabel;

frontend/src/Movie/Details/MovieTagsConnector.js

@@ -2,6 +2,7 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import createMovieSelector from 'Store/Selectors/createMovieSelector';
 import createTagsSelector from 'Store/Selectors/createTagsSelector';
+import sortByProp from 'Utilities/Array/sortByProp';
 import MovieTags from './MovieTags';
 
 function createMapStateToProps() {
@@ -12,8 +13,8 @@ function createMapStateToProps() {
       const tags = movie.tags
         .map((tagId) => tagList.find((tag) => tag.id === tagId))
         .filter((tag) => !!tag)
-        .map((tag) => tag.label)
-        .sort((a, b) => a.localeCompare(b));
+        .sort(sortByProp('label'))
+        .map((tag) => tag.label);
 
       return {
         tags

frontend/src/Movie/History/MovieHistoryRow.js

@@ -8,7 +8,7 @@ import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
 import { icons, kinds } from 'Helpers/Props';
 import MovieFormats from 'Movie/MovieFormats';
-import MovieLanguage from 'Movie/MovieLanguage';
+import MovieLanguages from 'Movie/MovieLanguages';
 import MovieQuality from 'Movie/MovieQuality';
 import formatDateTime from 'Utilities/Date/formatDateTime';
 import formatCustomFormatScore from 'Utilities/Number/formatCustomFormatScore';
@@ -89,7 +89,7 @@ class MovieHistoryRow extends Component {
         </TableRowCell>
 
         <TableRowCell>
-          <MovieLanguage
+          <MovieLanguages
             languages={languages}
           />
         </TableRowCell>

frontend/src/Movie/Index/Menus/MovieIndexSortMenu.tsx

@@ -189,6 +189,15 @@ function MovieIndexSortMenu(props: MovieIndexSortMenuProps) {
         >
           {translate('OriginalLanguage')}
         </SortMenuItem>
+
+        <SortMenuItem
+          name="tags"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          {translate('Tags')}
+        </SortMenuItem>
       </MenuContent>
     </SortMenu>
   );

frontend/src/Movie/Index/Overview/MovieIndexOverview.css

@@ -32,7 +32,7 @@ $hoverScale: 1.05;
   }
 }
 
-.ended {
+.deleted {
   position: absolute;
   top: 0;
   right: 0;
@@ -41,7 +41,7 @@ $hoverScale: 1.05;
   height: 0;
   border-width: 0 25px 25px 0;
   border-style: solid;
-  border-color: transparent var(--dangerColor) transparent transparent;
+  border-color: transparent var(--gray) transparent transparent;
   color: var(--white);
 }
 
@@ -80,14 +80,26 @@ $hoverScale: 1.05;
   flex: 1 0 auto;
 }
 
+.overviewContainer {
+  display: flex;
+  justify-content: space-between;
+  flex: 0 1 1000px;
+  flex-direction: column;
+}
+
 .overview {
   composes: link;
 
-  flex: 0 1 1000px;
   overflow: hidden;
   min-height: 0;
 }
 
+.tags {
+  display: flex;
+  justify-content: space-around;
+  overflow: hidden;
+}
+
 @media only screen and (max-width: $breakpointSmall) {
   .overview {
     display: none;

frontend/src/Movie/Index/Overview/MovieIndexOverview.css.d.ts

@@ -3,16 +3,18 @@
 interface CssExports {
   'actions': string;
   'content': string;
+  'deleted': string;
   'details': string;
   'editorSelect': string;
-  'ended': string;
   'externalLinks': string;
   'info': string;
   'link': string;
   'overview': string;
+  'overviewContainer': string;
   'poster': string;
   'posterContainer': string;
   'queue': string;
+  'tags': string;
   'title': string;
   'titleRow': string;
 }

frontend/src/Movie/Index/Overview/MovieIndexOverview.tsx

@@ -6,6 +6,7 @@ import Icon from 'Components/Icon';
 import IconButton from 'Components/Link/IconButton';
 import Link from 'Components/Link/Link';
 import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import TagListConnector from 'Components/TagListConnector';
 import Popover from 'Components/Tooltip/Popover';
 import { icons } from 'Helpers/Props';
 import DeleteMovieModal from 'Movie/Delete/DeleteMovieModal';
@@ -69,6 +70,7 @@ function MovieIndexOverview(props: MovieIndexOverviewProps) {
     overview,
     statistics = {} as Statistics,
     images,
+    tags,
     hasFile,
     isAvailable,
     tmdbId,
@@ -140,6 +142,11 @@ function MovieIndexOverview(props: MovieIndexOverviewProps) {
         <div className={styles.poster}>
           <div className={styles.posterContainer}>
             {isSelectMode ? <MovieIndexPosterSelect movieId={movieId} /> : null}
+
+            {status === 'deleted' ? (
+              <div className={styles.deleted} title={translate('Deleted')} />
+            ) : null}
+
             <Link className={styles.link} style={elementStyle} to={link}>
               <MoviePoster
                 className={styles.poster}
@@ -212,15 +219,22 @@ function MovieIndexOverview(props: MovieIndexOverviewProps) {
           </div>
 
           <div className={styles.details}>
-            <Link className={styles.overview} to={link}>
-              <TextTruncate
-                line={Math.floor(
-                  overviewHeight / (defaultFontSize * lineHeight)
-                )}
-                text={overview}
-              />
-            </Link>
+            <div className={styles.overviewContainer}>
+              <Link className={styles.overview} to={link}>
+                <TextTruncate
+                  line={Math.floor(
+                    overviewHeight / (defaultFontSize * lineHeight)
+                  )}
+                  text={overview}
+                />
+              </Link>
 
+              {overviewOptions.showTags ? (
+                <div className={styles.tags}>
+                  <TagListConnector tags={tags} />
+                </div>
+              ) : null}
+            </div>
             <MovieIndexOverviewInfo
               height={overviewHeight}
               monitored={monitored}

frontend/src/Movie/Index/Overview/MovieIndexOverviewInfo.tsx

@@ -134,10 +134,12 @@ function getInfoRowProps(
   }
 
   if (name === 'sizeOnDisk') {
+    const { sizeOnDisk = 0 } = props;
+
     return {
       title: 'Size on Disk',
       iconName: icons.DRIVE,
-      label: formatBytes(props.sizeOnDisk),
+      label: formatBytes(sizeOnDisk),
     };
   }
 

frontend/src/Movie/Index/Overview/MovieIndexOverviews.tsx

@@ -42,11 +42,7 @@ interface MovieIndexOverviewsProps {
   isSmallScreen: boolean;
 }
 
-const Row: React.FC<ListChildComponentProps<RowItemData>> = ({
-  index,
-  style,
-  data,
-}) => {
+function Row({ index, style, data }: ListChildComponentProps<RowItemData>) {
   const { items, ...otherData } = data;
 
   if (index >= items.length) {
@@ -60,7 +56,7 @@ const Row: React.FC<ListChildComponentProps<RowItemData>> = ({
       <MovieIndexOverview movieId={movie.id} {...otherData} />
     </div>
   );
-};
+}
 
 function getWindowScrollTopPosition() {
   return document.documentElement.scrollTop || document.body.scrollTop || 0;

frontend/src/Movie/Index/Overview/Options/MovieIndexOverviewOptionsModalContent.tsx

@@ -53,6 +53,7 @@ function MovieIndexOverviewOptionsModalContent(
     showAdded,
     showPath,
     showSizeOnDisk,
+    showTags,
     showSearchAction,
   } = useSelector(selectOverviewOptions);
 
@@ -161,6 +162,17 @@ function MovieIndexOverviewOptionsModalContent(
             />
           </FormGroup>
 
+          <FormGroup>
+            <FormLabel>{translate('ShowTags')}</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.CHECK}
+              name="showTags"
+              value={showTags}
+              onChange={onOverviewOptionChange}
+            />
+          </FormGroup>
+
           <FormGroup>
             <FormLabel>{translate('ShowSearch')}</FormLabel>
 

frontend/src/Movie/Index/Posters/MovieIndexPoster.css

@@ -75,7 +75,21 @@ $hoverScale: 1.05;
   }
 }
 
-.ended {
+.tags {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  padding: 0 3px;
+  height: 21px;
+  background-color: var(--movieBackgroundColor);
+}
+
+.tagsList {
+  display: flex;
+  overflow: hidden;
+}
+
+.deleted {
   position: absolute;
   top: 0;
   right: 0;
@@ -84,7 +98,7 @@ $hoverScale: 1.05;
   height: 0;
   border-width: 0 25px 25px 0;
   border-style: solid;
-  border-color: transparent var(--dangerColor) transparent transparent;
+  border-color: transparent var(--gray) transparent transparent;
   color: var(--white);
 }
 

frontend/src/Movie/Index/Posters/MovieIndexPoster.css.d.ts

@@ -5,14 +5,16 @@ interface CssExports {
   'container': string;
   'content': string;
   'controls': string;
+  'deleted': string;
   'editorSelect': string;
-  'ended': string;
   'externalLinks': string;
   'link': string;
   'nextAiring': string;
   'overlayTitle': string;
   'poster': string;
   'posterContainer': string;
+  'tags': string;
+  'tagsList': string;
   'title': string;
 }
 export const cssExports: CssExports;

frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx

@@ -8,6 +8,7 @@ import IconButton from 'Components/Link/IconButton';
 import Link from 'Components/Link/Link';
 import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
 import RottenTomatoRating from 'Components/RottenTomatoRating';
+import TagListConnector from 'Components/TagListConnector';
 import TmdbRating from 'Components/TmdbRating';
 import Popover from 'Components/Tooltip/Popover';
 import { icons } from 'Helpers/Props';
@@ -51,6 +52,7 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
     showTmdbRating,
     showImdbRating,
     showRottenTomatoesRating,
+    showTags,
     showSearchAction,
   } = useSelector(selectPosterOptions);
 
@@ -80,6 +82,7 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
     certification,
     originalTitle,
     originalLanguage,
+    tags = [],
   } = movie;
 
   const { sizeOnDisk = 0 } = statistics;
@@ -197,6 +200,10 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
           </span>
         </Label>
 
+        {status === 'deleted' ? (
+          <div className={styles.deleted} title={translate('Deleted')} />
+        ) : null}
+
         <Link className={styles.link} style={elementStyle} to={link}>
           <MoviePoster
             style={elementStyle}
@@ -284,6 +291,14 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
         </div>
       ) : null}
 
+      {showTags && tags.length ? (
+        <div className={styles.tags}>
+          <div className={styles.tagsList}>
+            <TagListConnector tags={tags} />
+          </div>
+        </div>
+      ) : null}
+
       <MovieIndexPosterInfo
         studio={studio}
         qualityProfile={qualityProfile}
@@ -306,9 +321,11 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
         certification={certification}
         originalTitle={originalTitle}
         originalLanguage={originalLanguage}
+        tags={tags}
         showTmdbRating={showTmdbRating}
         showImdbRating={showImdbRating}
         showRottenTomatoesRating={showRottenTomatoesRating}
+        showTags={showTags}
       />
 
       <EditMovieModalConnector

frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.css

@@ -9,3 +9,11 @@
 
   composes: info;
 }
+
+.tags {
+  composes: tags from '~./MovieIndexPoster.css';
+}
+
+.tagsList {
+  composes: tagsList from '~./MovieIndexPoster.css';
+}

frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.css.d.ts

@@ -2,6 +2,8 @@
 // Please do not change this file!
 interface CssExports {
   'info': string;
+  'tags': string;
+  'tagsList': string;
   'title': string;
 }
 export const cssExports: CssExports;

frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Icon from 'Components/Icon';
 import ImdbRating from 'Components/ImdbRating';
 import RottenTomatoRating from 'Components/RottenTomatoRating';
+import TagListConnector from 'Components/TagListConnector';
 import TmdbRating from 'Components/TmdbRating';
 import { icons } from 'Helpers/Props';
 import Language from 'Language/Language';
@@ -28,6 +29,7 @@ interface MovieIndexPosterInfoProps {
   originalTitle: string;
   originalLanguage: Language;
   sizeOnDisk?: number;
+  tags: number[];
   sortKey: string;
   showRelativeDates: boolean;
   showCinemaRelease: boolean;
@@ -38,6 +40,7 @@ interface MovieIndexPosterInfoProps {
   showTmdbRating: boolean;
   showImdbRating: boolean;
   showRottenTomatoesRating: boolean;
+  showTags: boolean;
 }
 
 function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
@@ -55,7 +58,8 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     certification,
     originalTitle,
     originalLanguage,
-    sizeOnDisk,
+    sizeOnDisk = 0,
+    tags = [],
     sortKey,
     showRelativeDates,
     showCinemaRelease,
@@ -66,6 +70,7 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     showTmdbRating,
     showImdbRating,
     showRottenTomatoesRating,
+    showTags,
   } = props;
 
   if (sortKey === 'studio' && studio) {
@@ -199,6 +204,16 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     );
   }
 
+  if (!showTags && sortKey === 'tags' && tags.length) {
+    return (
+      <div className={styles.tags}>
+        <div className={styles.tagsList}>
+          <TagListConnector tags={tags} />
+        </div>
+      </div>
+    );
+  }
+
   if (sortKey === 'path') {
     return (
       <div className={styles.info} title={translate('Path')}>