Ensure movies without year are first in descending order

(cherry picked from commit b407eba61284d5fb855df6a2868805853aa6f448)

.editorconfig

@@ -270,7 +270,7 @@ dotnet_diagnostic.CA5397.severity = suggestion
 
 dotnet_diagnostic.SYSLIB0006.severity = none
 
-[*.{js,html,js,hbs,less,css}]
+[*.{js,html,hbs,less,css,ts,tsx}]
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -76,7 +76,7 @@ body:
 - type: checkboxes
   attributes:
     label: Trace Logs have been provided as applicable. Reports may be closed if the required logs are not provided.
-    description: Trace logs are generally required for all bug reports
+    description: Trace logs are generally required for all bug reports and contain `trace`. Info logs are invalid for bug reports and do not contain `debug` nor `trace`
     options:
-    - label: I have followed the steps in the wiki link above and provided the required trace logs that are relevant and show this issue.
+    - label: I have read and followed the steps in the wiki link above and provided the required trace logs - the logs contain `trace` - that are relevant and show this issue.
       required: true

azure-pipelines.yml

@@ -9,7 +9,7 @@ variables:
   testsFolder: './_tests'
   yarnCacheFolder: $(Pipeline.Workspace)/.yarn
   nugetCacheFolder: $(Pipeline.Workspace)/.nuget/packages
-  majorVersion: '4.6.0'
+  majorVersion: '4.7.3'
   minorVersion: $[counter('minorVersion', 2000)]
   radarrVersion: '$(majorVersion).$(minorVersion)'
   buildName: '$(Build.SourceBranchName).$(radarrVersion)'
@@ -363,7 +363,7 @@ stages:
       - bash: |
           echo "Uploading source maps to sentry"
           curl -sL https://sentry.io/get-cli/ | bash
-          RELEASENAME="${RADARRVERSION}-${BUILD_SOURCEBRANCHNAME}"
+          RELEASENAME="Radarr@${RADARRVERSION}-${BUILD_SOURCEBRANCHNAME}"
           sentry-cli releases new --finalize -p radarr -p radarr-ui -p radarr-update "${RELEASENAME}"
           sentry-cli releases -p radarr-ui files "${RELEASENAME}" upload-sourcemaps _output/UI/ --rewrite
           sentry-cli releases set-commits --auto "${RELEASENAME}"

frontend/build/webpack.config.js

@@ -36,7 +36,7 @@ module.exports = (env) => {
     },
 
     entry: {
-      index: 'index.js'
+      index: 'index.ts'
     },
 
     resolve: {
@@ -66,23 +66,23 @@ module.exports = (env) => {
     output: {
       path: distFolder,
       publicPath: '/',
-      filename: '[name].js',
+      filename: '[name]-[contenthash].js',
       sourceMapFilename: '[file].map'
     },
 
     optimization: {
       moduleIds: 'deterministic',
-      chunkIds: 'named',
-      splitChunks: {
-        chunks: 'initial',
-        name: 'vendors'
-      }
+      chunkIds: isProduction ? 'deterministic' : 'named'
     },
 
     performance: {
       hints: false
     },
 
+    experiments: {
+      topLevelAwait: true
+    },
+
     plugins: [
       new webpack.DefinePlugin({
         __DEV__: !isProduction,
@@ -90,13 +90,15 @@ module.exports = (env) => {
       }),
 
       new MiniCssExtractPlugin({
-        filename: 'Content/styles.css'
+        filename: 'Content/styles.css',
+        chunkFilename: 'Content/[id]-[chunkhash].css'
       }),
 
       new HtmlWebpackPlugin({
         template: 'frontend/src/index.ejs',
         filename: 'index.html',
-        publicPath: '/'
+        publicPath: '/',
+        inject: false
       }),
 
       new FileManagerPlugin({
@@ -233,6 +235,7 @@ module.exports = (env) => {
             {
               loader: 'url-loader',
               options: {
+                limit: 10240,
                 mimetype: 'application/font-woff',
                 emitFile: false,
                 name: 'Content/Fonts/[name].[ext]'

frontend/src/Activity/Blocklist/Blocklist.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import PageContent from 'Components/Page/PageContent';
@@ -156,16 +157,16 @@ class Blocklist extends Component {
 
           {
             !isFetching && !!error &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadBlocklist')}
-              </div>
+              </Alert>
           }
 
           {
             isPopulated && !error && !items.length &&
-              <div>
-                {translate('NoHistory')}
-              </div>
+              <Alert kind={kinds.INFO}>
+                {translate('NoHistoryBlocklist')}
+              </Alert>
           }
 
           {
@@ -209,7 +210,7 @@ class Blocklist extends Component {
           isOpen={isConfirmRemoveModalOpen}
           kind={kinds.DANGER}
           title={translate('RemoveSelected')}
-          message={translate('AreYouSureYouWantToRemoveTheSelectedItemsFromBlocklist')}
+          message={translate('RemoveSelectedItemBlocklistMessageText')}
           confirmLabel={translate('RemoveSelected')}
           onConfirm={this.onRemoveSelectedConfirmed}
           onCancel={this.onConfirmRemoveModalClose}

frontend/src/Activity/History/History.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import FilterMenu from 'Components/Menu/FilterMenu';
 import PageContent from 'Components/Page/PageContent';
@@ -11,7 +12,7 @@ import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import TablePager from 'Components/Table/TablePager';
-import { align, icons } from 'Helpers/Props';
+import { align, icons, kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import HistoryRowConnector from './HistoryRowConnector';
 
@@ -83,9 +84,9 @@ class History extends Component {
 
           {
             !isFetchingAny && hasError &&
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadHistory')}
-              </div>
+              </Alert>
           }
 
           {
@@ -93,9 +94,9 @@ class History extends Component {
             // wait for the episodes to populate because they are never coming.
 
             isPopulated && !hasError && !items.length &&
-              <div>
+              <Alert kind={kinds.INFO}>
                 {translate('NoHistory')}
-              </div>
+              </Alert>
           }
 
           {

frontend/src/Activity/History/HistoryRow.js

@@ -4,7 +4,8 @@ import IconButton from 'Components/Link/IconButton';
 import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
-import { icons } from 'Helpers/Props';
+import Tooltip from 'Components/Tooltip/Tooltip';
+import { icons, tooltipPositions } from 'Helpers/Props';
 import MovieFormats from 'Movie/MovieFormats';
 import MovieLanguage from 'Movie/MovieLanguage';
 import MovieQuality from 'Movie/MovieQuality';
@@ -176,7 +177,14 @@ class HistoryRow extends Component {
                   key={name}
                   className={styles.customFormatScore}
                 >
-                  {formatCustomFormatScore(customFormatScore)}
+                  <Tooltip
+                    anchor={formatCustomFormatScore(
+                      customFormatScore,
+                      customFormats.length
+                    )}
+                    tooltip={<MovieFormats formats={customFormats} />}
+                    position={tooltipPositions.BOTTOM}
+                  />
                 </TableRowCell>
               );
             }
@@ -257,4 +265,8 @@ HistoryRow.propTypes = {
   onMarkAsFailedPress: PropTypes.func.isRequired
 };
 
+HistoryRow.defaultProps = {
+  customFormats: []
+};
+
 export default HistoryRow;

frontend/src/Activity/Queue/Queue.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
@@ -12,7 +13,7 @@ import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import TablePager from 'Components/Table/TablePager';
-import { align, icons } from 'Helpers/Props';
+import { align, icons, kinds } from 'Helpers/Props';
 import getRemovedItems from 'Utilities/Object/getRemovedItems';
 import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
 import translate from 'Utilities/String/translate';
@@ -231,17 +232,17 @@ class Queue extends Component {
 
           {
             !isRefreshing && hasError ?
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('FailedToLoadQueue')}
-              </div> :
+              </Alert> :
               null
           }
 
           {
             isAllPopulated && !hasError && !items.length ?
-              <div>
+              <Alert kind={kinds.INFO}>
                 {translate('QueueIsEmpty')}
-              </div> :
+              </Alert> :
               null
           }
 

frontend/src/Activity/Queue/QueueRow.css

@@ -16,6 +16,12 @@
   width: 150px;
 }
 
+.customFormatScore {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 55px;
+}
+
 .actions {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 

frontend/src/Activity/Queue/QueueRow.css.d.ts

@@ -2,6 +2,7 @@
 // Please do not change this file!
 interface CssExports {
   'actions': string;
+  'customFormatScore': string;
   'progress': string;
   'protocol': string;
   'quality': string;

frontend/src/Activity/Queue/QueueRow.js

@@ -8,13 +8,15 @@ import ProgressBar from 'Components/ProgressBar';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
 import TableRow from 'Components/Table/TableRow';
-import { icons, kinds } from 'Helpers/Props';
+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 MovieQuality from 'Movie/MovieQuality';
 import MovieTitleLink from 'Movie/MovieTitleLink';
 import formatBytes from 'Utilities/Number/formatBytes';
+import formatCustomFormatScore from 'Utilities/Number/formatCustomFormatScore';
 import translate from 'Utilities/String/translate';
 import QueueStatusCell from './QueueStatusCell';
 import RemoveQueueItemModal from './RemoveQueueItemModal';
@@ -42,14 +44,14 @@ class QueueRow extends Component {
     this.setState({ isRemoveQueueItemModalOpen: true });
   };
 
-  onRemoveQueueItemModalConfirmed = (blocklist) => {
+  onRemoveQueueItemModalConfirmed = (blocklist, skipRedownload) => {
     const {
       onRemoveQueueItemPress,
       onQueueRowModalOpenOrClose
     } = this.props;
 
     onQueueRowModalOpenOrClose(false);
-    onRemoveQueueItemPress(blocklist);
+    onRemoveQueueItemPress(blocklist, skipRedownload);
 
     this.setState({ isRemoveQueueItemModalOpen: false });
   };
@@ -88,6 +90,7 @@ class QueueRow extends Component {
       movie,
       quality,
       customFormats,
+      customFormatScore,
       languages,
       protocol,
       indexer,
@@ -201,6 +204,24 @@ class QueueRow extends Component {
               );
             }
 
+            if (name === 'customFormatScore') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.customFormatScore}
+                >
+                  <Tooltip
+                    anchor={formatCustomFormatScore(
+                      customFormatScore,
+                      customFormats.length
+                    )}
+                    tooltip={<MovieFormats formats={customFormats} />}
+                    position={tooltipPositions.BOTTOM}
+                  />
+                </TableRowCell>
+              );
+            }
+
             if (name === 'protocol') {
               return (
                 <TableRowCell key={name}>
@@ -365,6 +386,7 @@ QueueRow.propTypes = {
   movie: PropTypes.object,
   quality: PropTypes.object.isRequired,
   customFormats: PropTypes.arrayOf(PropTypes.object),
+  customFormatScore: PropTypes.number.isRequired,
   languages: PropTypes.arrayOf(PropTypes.object).isRequired,
   protocol: PropTypes.string.isRequired,
   indexer: PropTypes.string,
@@ -390,6 +412,7 @@ QueueRow.propTypes = {
 };
 
 QueueRow.defaultProps = {
+  customFormats: [],
   isGrabbing: false,
   isRemoving: false
 };

frontend/src/Activity/Queue/RemoveQueueItemModal.js

@@ -22,7 +22,8 @@ class RemoveQueueItemModal extends Component {
 
     this.state = {
       remove: true,
-      blocklist: false
+      blocklist: false,
+      skipRedownload: false
     };
   }
 
@@ -32,7 +33,8 @@ class RemoveQueueItemModal extends Component {
   resetState = function() {
     this.setState({
       remove: true,
-      blocklist: false
+      blocklist: false,
+      skipRedownload: false
     });
   };
 
@@ -47,6 +49,10 @@ class RemoveQueueItemModal extends Component {
     this.setState({ blocklist: value });
   };
 
+  onSkipRedownloadChange = ({ value }) => {
+    this.setState({ skipRedownload: value });
+  };
+
   onRemoveConfirmed = () => {
     const state = this.state;
 
@@ -70,7 +76,7 @@ class RemoveQueueItemModal extends Component {
       isPending
     } = this.props;
 
-    const { remove, blocklist } = this.state;
+    const { remove, blocklist, skipRedownload } = this.state;
 
     return (
       <Modal
@@ -118,6 +124,20 @@ class RemoveQueueItemModal extends Component {
               />
             </FormGroup>
 
+            {
+              blocklist ?
+                <FormGroup>
+                  <FormLabel>{translate('SkipRedownload')}</FormLabel>
+                  <FormInputGroup
+                    type={inputTypes.CHECK}
+                    name="skipRedownload"
+                    value={skipRedownload}
+                    helpText={translate('SkipRedownloadHelpText')}
+                    onChange={this.onSkipRedownloadChange}
+                  />
+                </FormGroup> :
+                null
+            }
           </ModalBody>
 
           <ModalFooter>

frontend/src/Activity/Queue/RemoveQueueItemsModal.js

@@ -23,7 +23,8 @@ class RemoveQueueItemsModal extends Component {
 
     this.state = {
       remove: true,
-      blocklist: false
+      blocklist: false,
+      skipRedownload: false
     };
   }
 
@@ -33,7 +34,8 @@ class RemoveQueueItemsModal extends Component {
   resetState = function() {
     this.setState({
       remove: true,
-      blocklist: false
+      blocklist: false,
+      skipRedownload: false
     });
   };
 
@@ -48,6 +50,10 @@ class RemoveQueueItemsModal extends Component {
     this.setState({ blocklist: value });
   };
 
+  onSkipRedownloadChange = ({ value }) => {
+    this.setState({ skipRedownload: value });
+  };
+
   onRemoveConfirmed = () => {
     const state = this.state;
 
@@ -71,7 +77,7 @@ class RemoveQueueItemsModal extends Component {
       allPending
     } = this.props;
 
-    const { remove, blocklist } = this.state;
+    const { remove, blocklist, skipRedownload } = this.state;
 
     return (
       <Modal
@@ -88,7 +94,7 @@ class RemoveQueueItemsModal extends Component {
 
           <ModalBody>
             <div className={styles.message}>
-              {selectedCount > 1 ? translate('AreYouSureYouWantToRemoveSelectedItemsFromQueue', selectedCount) : translate('AreYouSureYouWantToRemoveSelectedItemFromQueue')}
+              {selectedCount > 1 ? translate('RemoveSelectedItemsQueueMessageText', selectedCount) : translate('RemoveSelectedItemQueueMessageText')}
             </div>
 
             {
@@ -122,6 +128,20 @@ class RemoveQueueItemsModal extends Component {
               />
             </FormGroup>
 
+            {
+              blocklist ?
+                <FormGroup>
+                  <FormLabel>{translate('SkipRedownload')}</FormLabel>
+                  <FormInputGroup
+                    type={inputTypes.CHECK}
+                    name="skipRedownload"
+                    value={skipRedownload}
+                    helpText={translate('SkipRedownloadHelpText')}
+                    onChange={this.onSkipRedownloadChange}
+                  />
+                </FormGroup> :
+                null
+            }
           </ModalBody>
 
           <ModalFooter>
@@ -133,7 +153,7 @@ class RemoveQueueItemsModal extends Component {
               kind={kinds.DANGER}
               onPress={this.onRemoveConfirmed}
             >
-              Remove
+              {translate('Remove')}
             </Button>
           </ModalFooter>
         </ModalContent>

frontend/src/AddMovie/ImportMovie/Import/ImportMovie.js

@@ -1,9 +1,11 @@
 import { reduce } from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
+import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import selectAll from 'Utilities/Table/selectAll';
 import toggleSelected from 'Utilities/Table/toggleSelected';
@@ -105,9 +107,9 @@ class ImportMovie extends Component {
 
           {
             !rootFoldersFetching && !!rootFoldersError ?
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadRootFolders')}
-              </div> :
+              </Alert> :
               null
           }
 
@@ -116,9 +118,9 @@ class ImportMovie extends Component {
             !rootFoldersFetching &&
             rootFoldersPopulated &&
             !unmappedFolders.length ?
-              <div>
+              <Alert kind={kinds.INFO}>
                 {translate('AllMoviesInPathHaveBeenImported', [path])}
-              </div> :
+              </Alert> :
               null
           }
 

frontend/src/AddMovie/ImportMovie/SelectFolder/ImportMovieSelectFolder.js

@@ -18,17 +18,23 @@ import styles from './ImportMovieSelectFolder.css';
 const rootFolderColumns = [
   {
     name: 'path',
-    label: translate('Path'),
+    get label() {
+      return translate('Path');
+    },
     isVisible: true
   },
   {
     name: 'freeSpace',
-    label: translate('FreeSpace'),
+    get label() {
+      return translate('FreeSpace');
+    },
     isVisible: true
   },
   {
     name: 'unmappedFolders',
-    label: translate('UnmappedFolders'),
+    get label() {
+      return translate('UnmappedFolders');
+    },
     isVisible: true
   },
   {
@@ -92,9 +98,9 @@ class ImportMovieSelectFolder extends Component {
 
           {
             !isFetching && error ?
-              <div>
+              <Alert kind={kinds.DANGER}>
                 {translate('UnableToLoadRootFolders')}
-              </div> :
+              </Alert> :
               null
           }
 

frontend/src/App/AppRoutes.js

@@ -13,7 +13,7 @@ import Switch from 'Components/Router/Switch';
 import DiscoverMovieConnector from 'DiscoverMovie/DiscoverMovieConnector';
 import MovieDetailsPageConnector from 'Movie/Details/MovieDetailsPageConnector';
 import MovieIndex from 'Movie/Index/MovieIndex';
-import CustomFormatSettingsConnector from 'Settings/CustomFormats/CustomFormatSettingsConnector';
+import CustomFormatSettingsPage from 'Settings/CustomFormats/CustomFormatSettingsPage';
 import DownloadClientSettingsConnector from 'Settings/DownloadClients/DownloadClientSettingsConnector';
 import GeneralSettingsConnector from 'Settings/General/GeneralSettingsConnector';
 import ImportListSettingsConnector from 'Settings/ImportLists/ImportListSettingsConnector';
@@ -148,7 +148,7 @@ function AppRoutes(props) {
 
       <Route
         path="/settings/customformats"
-        component={CustomFormatSettingsConnector}
+        component={CustomFormatSettingsPage}
       />
 
       <Route

frontend/src/App/State/AppState.ts

@@ -1,6 +1,7 @@
 import InteractiveImportAppState from 'App/State/InteractiveImportAppState';
 import MovieFilesAppState from './MovieFilesAppState';
 import MoviesAppState, { MovieIndexAppState } from './MoviesAppState';
+import ParseAppState from './ParseAppState';
 import QueueAppState from './QueueAppState';
 import SettingsAppState from './SettingsAppState';
 import TagsAppState from './TagsAppState';
@@ -41,6 +42,7 @@ interface AppState {
   movieFiles: MovieFilesAppState;
   interactiveImport: InteractiveImportAppState;
   movieIndex: MovieIndexAppState;
+  parse: ParseAppState;
   settings: SettingsAppState;
   movies: MoviesAppState;
   tags: TagsAppState;

frontend/src/App/State/ParseAppState.ts

@@ -0,0 +1,34 @@
+import ModelBase from 'App/ModelBase';
+import { AppSectionItemState } from 'App/State/AppSectionState';
+import Language from 'Language/Language';
+import Movie from 'Movie/Movie';
+import { QualityModel } from 'Quality/Quality';
+import CustomFormat from 'typings/CustomFormat';
+
+export interface ParsedMovieInfo {
+  releaseTitle: string;
+  originalTitle: string;
+  movieTitle: string;
+  movieTitles: string[];
+  year: number;
+  quality: QualityModel;
+  languages: Language[];
+  releaseHash: string;
+  releaseGroup?: string;
+  edition?: string;
+  tmdbId?: number;
+  imdbId?: string;
+}
+
+export interface ParseModel extends ModelBase {
+  title: string;
+  parsedMovieInfo: ParsedMovieInfo;
+  movie?: Movie;
+  languages?: Language[];
+  customFormats?: CustomFormat[];
+  customFormatScore?: number;
+}
+
+type ParseAppState = AppSectionItemState<ParseModel>;
+
+export default ParseAppState;

frontend/src/Calendar/Calendar.js

@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import { kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import AgendaConnector from './Agenda/AgendaConnector';
 import * as calendarViews from './calendarViews';
@@ -31,9 +33,9 @@ class Calendar extends Component {
 
         {
           !isFetching && !!error &&
-            <div>
+            <Alert kind={kinds.DANGER}>
               {translate('UnableToLoadTheCalendar')}
-            </div>
+            </Alert>
         }
 
         {

frontend/src/Collection/AddNewCollectionMovieModalContentConnector.js

@@ -28,7 +28,7 @@ function createMapStateToProps() {
         qualityProfileId: collection.qualityProfileId,
         minimumAvailability: collection.minimumAvailability,
         searchForMovie: collection.searchOnAdd,
-        tags: []
+        tags: collection.tags || []
       };
 
       const {

frontend/src/Collection/Collection.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
@@ -9,7 +10,7 @@ import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
 import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
-import { align, icons, sortDirections } from 'Helpers/Props';
+import { align, icons, kinds, sortDirections } from 'Helpers/Props';
 import styles from 'Movie/Index/MovieIndex.css';
 import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
 import translate from 'Utilities/String/translate';
@@ -313,9 +314,9 @@ class Collection extends Component {
 
             {
               !isFetching && !!error &&
-                <div>
+                <Alert kind={kinds.DANGER}>
                   {translate('UnableToLoadCollections')}
-                </div>
+                </Alert>
             }
 
             {

frontend/src/Collection/CollectionItemConnector.js

@@ -2,17 +2,12 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import createAllMoviesSelector from 'Store/Selectors/createAllMoviesSelector';
 import createCollectionSelector from 'Store/Selectors/createCollectionSelector';
 
 function createMapStateToProps() {
   return createSelector(
     createCollectionSelector(),
-    createAllMoviesSelector(),
-    (
-      collection,
-      allMovies
-    ) => {
+    (collection) => {
       // If a movie is deleted this selector may fire before the parent
       // selecors, which will result in an undefined movie, if that happens
       // we want to return early here and again in the render function to avoid
@@ -22,21 +17,11 @@ function createMapStateToProps() {
         return {};
       }
 
-      let allGenres = [];
-      let libraryMovies = 0;
-
-      collection.movies.forEach((movie) => {
-        allGenres = allGenres.concat(movie.genres);
-
-        if (allMovies.find((libraryMovie) => libraryMovie.tmdbId === movie.tmdbId)) {
-          libraryMovies++;
-        }
-      });
+      const allGenres = collection.movies.flatMap((movie) => movie.genres);
 
       return {
         ...collection,
-        genres: Array.from(new Set(allGenres)).slice(0, 3),
-        missingMovies: collection.movies.length - libraryMovies
+        genres: Array.from(new Set(allGenres)).slice(0, 3)
       };
     }
   );

frontend/src/Collection/Edit/EditCollectionModalContent.js

@@ -50,6 +50,7 @@ class EditCollectionModalContent extends Component {
       minimumAvailability,
       // Id,
       rootFolderPath,
+      tags,
       searchOnAdd
     } = item;
 
@@ -126,6 +127,17 @@ class EditCollectionModalContent extends Component {
                   />
                 </FormGroup>
 
+                <FormGroup>
+                  <FormLabel>{translate('Tags')}</FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.TAG}
+                    name="tags"
+                    onChange={onInputChange}
+                    {...tags}
+                  />
+                </FormGroup>
+
                 <FormGroup>
                   <FormLabel>{translate('SearchOnAdd')}</FormLabel>
 

frontend/src/Collection/Edit/EditCollectionModalContentConnector.js

@@ -42,6 +42,7 @@ function createMapStateToProps() {
         qualityProfileId: collection.qualityProfileId,
         minimumAvailability: collection.minimumAvailability,
         rootFolderPath: collection.rootFolderPath,
+        tags: collection.tags,
         searchOnAdd: collection.searchOnAdd
       };
 

frontend/src/Collection/Menus/CollectionSortMenu.js

@@ -28,6 +28,14 @@ function CollectionSortMenu(props) {
         >
           {translate('Title')}
         </SortMenuItem>
+        <SortMenuItem
+          name="missingMovies"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          {translate('Missing')}
+        </SortMenuItem>
       </MenuContent>
     </SortMenu>
   );

frontend/src/Collection/Overview/CollectionMovie.css

@@ -102,7 +102,7 @@ $hoverScale: 1.05;
 
   position: relative;
   display: block;
-  background-color: var(--defaultColor);
+  background-color: var(--black);
 }
 
 .monitorToggleButton {

frontend/src/Collection/Overview/CollectionOverviews.js

@@ -258,7 +258,7 @@ CollectionOverviews.propTypes = {
   sortKey: PropTypes.string,
   overviewOptions: PropTypes.object.isRequired,
   jumpToCharacter: PropTypes.string,
-  scrollTop: PropTypes.number.isRequired,
+  scrollTop: PropTypes.number,
   scroller: PropTypes.instanceOf(Element).isRequired,
   showRelativeDates: PropTypes.bool.isRequired,
   shortDateFormat: PropTypes.string.isRequired,

frontend/src/Collection/Overview/Options/CollectionOverviewOptionsModalContent.js

@@ -14,9 +14,24 @@ import { inputTypes } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 
 const posterSizeOptions = [
-  { key: 'small', value: translate('Small') },
-  { key: 'medium', value: translate('Medium') },
-  { key: 'large', value: translate('Large') }
+  {
+    key: 'small',
+    get value() {
+      return translate('Small');
+    }
+  },
+  {
+    key: 'medium',
+    get value() {
+      return translate('Medium');
+    }
+  },
+  {
+    key: 'large',
+    get value() {
+      return translate('Large');
+    }
+  }
 ];
 
 class CollectionOverviewOptionsModalContent extends Component {

frontend/src/Components/FileBrowser/FileBrowserModalContent.js

@@ -20,12 +20,16 @@ import styles from './FileBrowserModalContent.css';
 const columns = [
   {
     name: 'type',
-    label: translate('Type'),
+    get label() {
+      return translate('Type');
+    },
     isVisible: true
   },
   {
     name: 'name',
-    label: translate('Name'),
+    get label() {
+      return translate('Name');
+    },
     isVisible: true
   }
 ];

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

@@ -10,12 +10,42 @@ import { NAME } from './FilterBuilderRowValue';
 import styles from './DateFilterBuilderRowValue.css';
 
 const timeOptions = [
-  { key: 'seconds', value: translate('Seconds') },
-  { key: 'minutes', value: translate('Minutes') },
-  { key: 'hours', value: translate('Hours') },
-  { key: 'days', value: translate('Days') },
-  { key: 'weeks', value: translate('Weeks') },
-  { key: 'months', value: translate('Months') }
+  {
+    key: 'seconds',
+    get value() {
+      return translate('Seconds');
+    }
+  },
+  {
+    key: 'minutes',
+    get value() {
+      return translate('Minutes');
+    }
+  },
+  {
+    key: 'hours',
+    get value() {
+      return translate('Hours');
+    }
+  },
+  {
+    key: 'days',
+    get value() {
+      return translate('Days');
+    }
+  },
+  {
+    key: 'weeks',
+    get value() {
+      return translate('Weeks');
+    }
+  },
+  {
+    key: 'months',
+    get value() {
+      return translate('Months');
+    }
+  }
 ];
 
 function isInFilter(filterType) {

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

@@ -210,11 +210,13 @@ class FilterBuilderRow extends Component {
     const selectedFilterBuilderProp = this.selectedFilterBuilderProp;
 
     const keyOptions = filterBuilderProps.map((availablePropFilter) => {
+      const { name, label } = availablePropFilter;
+
       return {
-        key: availablePropFilter.name,
-        value: availablePropFilter.label
+        key: name,
+        value: typeof label === 'function' ? label() : label
       };
-    });
+    }).sort((a, b) => a.value.localeCompare(b.value));
 
     const ValueComponent = getRowValueConnector(selectedFilterBuilderProp);
 

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

@@ -3,9 +3,24 @@ import translate from 'Utilities/String/translate';
 import FilterBuilderRowValue from './FilterBuilderRowValue';
 
 const protocols = [
-  { id: 'announced', name: translate('Announced') },
-  { id: 'inCinemas', name: translate('InCinemas') },
-  { id: 'released', name: translate('Released') }
+  {
+    id: 'announced',
+    get name() {
+      return translate('Announced');
+    }
+  },
+  {
+    id: 'inCinemas',
+    get name() {
+      return translate('InCinemas');
+    }
+  },
+  {
+    id: 'released',
+    get name() {
+      return translate('Released');
+    }
+  }
 ];
 
 function MinimumAvailabilityFilterBuilderRowValue(props) {

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

@@ -4,10 +4,30 @@ import FilterBuilderRowValue from './FilterBuilderRowValue';
 
 const protocols = [
   { id: 'tba', name: 'TBA' },
-  { id: 'announced', name: translate('Announced') },
-  { id: 'inCinemas', name: translate('InCinemas') },
-  { id: 'released', name: translate('Released') },
-  { id: 'deleted', name: translate('Deleted') }
+  {
+    id: 'announced',
+    get name() {
+      return translate('Announced');
+    }
+  },
+  {
+    id: 'inCinemas',
+    get name() {
+      return translate('InCinemas');
+    }
+  },
+  {
+    id: 'released',
+    get name() {
+      return translate('Released');
+    }
+  },
+  {
+    id: 'deleted',
+    get name() {
+      return translate('Deleted');
+    }
+  }
 ];
 
 function ReleaseStatusFilterBuilderRowValue(props) {

frontend/src/Components/Form/AvailabilitySelectInput.js

@@ -4,9 +4,24 @@ import translate from 'Utilities/String/translate';
 import EnhancedSelectInput from './EnhancedSelectInput';
 
 const availabilityOptions = [
-  { key: 'announced', value: translate('Announced') },
-  { key: 'inCinemas', value: translate('InCinemas') },
-  { key: 'released', value: translate('Released') }
+  {
+    key: 'announced',
+    get value() {
+      return translate('Announced');
+    }
+  },
+  {
+    key: 'inCinemas',
+    get value() {
+      return translate('InCinemas');
+    }
+  },
+  {
+    key: 'released',
+    get value() {
+      return translate('Released');
+    }
+  }
 ];
 
 function AvailabilitySelectInput(props) {
@@ -20,7 +35,7 @@ function AvailabilitySelectInput(props) {
   if (includeNoChange) {
     values.unshift({
       key: 'noChange',
-      value: 'No Change',
+      value: translate('NoChange'),
       disabled: true
     });
   }

frontend/src/Components/Form/EnhancedSelectInput.js

@@ -580,7 +580,7 @@ EnhancedSelectInput.propTypes = {
   className: PropTypes.string,
   disabledClassName: PropTypes.string,
   name: PropTypes.string.isRequired,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.number)]).isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]).isRequired,
   values: PropTypes.arrayOf(PropTypes.object).isRequired,
   isDisabled: PropTypes.bool.isRequired,
   isFetching: PropTypes.bool.isRequired,

frontend/src/Components/Form/MovieMonitoredSelectInput.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import monitorOptions from 'Utilities/Movie/monitorOptions';
+import translate from 'Utilities/String/translate';
 import SelectInput from './SelectInput';
 
 function MovieMonitoredSelectInput(props) {
@@ -14,7 +15,7 @@ function MovieMonitoredSelectInput(props) {
   if (includeNoChange) {
     values.unshift({
       key: 'noChange',
-      value: 'No Change',
+      value: translate('NoChange'),
       disabled: true
     });
   }

frontend/src/Components/Form/ProviderFieldFormGroup.js

@@ -35,6 +35,8 @@ function getType({ type, selectOptionsProviderAction }) {
       return inputTypes.TEXT;
     case 'oAuth':
       return inputTypes.OAUTH;
+    case 'rootFolder':
+      return inputTypes.ROOT_FOLDER_SELECT;
     default:
       return inputTypes.TEXT;
   }
@@ -63,6 +65,7 @@ function ProviderFieldFormGroup(props) {
     name,
     label,
     helpText,
+    helpTextWarning,
     helpLink,
     placeholder,
     value,
@@ -96,6 +99,7 @@ function ProviderFieldFormGroup(props) {
         name={name}
         label={label}
         helpText={helpText}
+        helpTextWarning={helpTextWarning}
         helpLink={helpLink}
         placeholder={placeholder}
         value={value}
@@ -122,6 +126,7 @@ ProviderFieldFormGroup.propTypes = {
   name: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   helpText: PropTypes.string,
+  helpTextWarning: PropTypes.string,
   helpLink: PropTypes.string,
   placeholder: PropTypes.string,
   value: PropTypes.any,

frontend/src/Components/Form/QualityProfileSelectInputConnector.js

@@ -5,6 +5,7 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
 import sortByName from 'Utilities/Array/sortByName';
+import translate from 'Utilities/String/translate';
 import EnhancedSelectInput from './EnhancedSelectInput';
 
 function createMapStateToProps() {
@@ -24,7 +25,7 @@ function createMapStateToProps() {
       if (includeNoChange) {
         values.unshift({
           key: 'noChange',
-          value: 'No Change',
+          value: translate('NoChange'),
           disabled: includeNoChangeDisabled
         });
       }
@@ -69,7 +70,7 @@ class QualityProfileSelectInputConnector extends Component {
   // Listeners
 
   onChange = ({ name, value }) => {
-    this.props.onChange({ name, value: parseInt(value) });
+    this.props.onChange({ name, value: value === 'noChange' ? value : parseInt(value) });
   };
 
   //

frontend/src/Components/Form/RootFolderSelectInputConnector.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { addRootFolder } from 'Store/Actions/rootFolderActions';
+import translate from 'Utilities/String/translate';
 import RootFolderSelectInput from './RootFolderSelectInput';
 
 const ADD_NEW_KEY = 'addNew';
@@ -27,7 +28,7 @@ function createMapStateToProps() {
       if (includeNoChange) {
         values.unshift({
           key: 'noChange',
-          value: 'No Change',
+          value: translate('NoChange'),
           isDisabled: includeNoChangeDisabled,
           isMissing: false
         });

frontend/src/Components/Form/SelectInput.js

@@ -61,7 +61,7 @@ class SelectInput extends Component {
                 value={key}
                 {...otherOptionProps}
               >
-                {optionValue}
+                {typeof optionValue === 'function' ? optionValue() : optionValue}
               </option>
             );
           })
@@ -75,7 +75,7 @@ SelectInput.propTypes = {
   className: PropTypes.string,
   disabledClassName: PropTypes.string,
   name: PropTypes.string.isRequired,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.func]).isRequired,
   values: PropTypes.arrayOf(PropTypes.object).isRequired,
   isDisabled: PropTypes.bool,
   hasError: PropTypes.bool,

frontend/src/Components/Form/TagInput.js

@@ -75,6 +75,18 @@ class TagInput extends Component {
   //
   // Listeners
 
+  onTagEdit = ({ value, ...otherProps }) => {
+    const currentValue = this.state.value;
+
+    if (currentValue && this.props.onTagReplace) {
+      this.props.onTagReplace(otherProps, { name: currentValue });
+    } else {
+      this.props.onTagDelete(otherProps);
+    }
+
+    this.setState({ value });
+  };
+
   onInputContainerPress = () => {
     this._autosuggestRef.input.focus();
   };
@@ -188,6 +200,7 @@ class TagInput extends Component {
     const {
       tags,
       kind,
+      canEdit,
       tagComponent,
       onTagDelete
     } = this.props;
@@ -199,8 +212,10 @@ class TagInput extends Component {
         kind={kind}
         inputProps={inputProps}
         isFocused={this.state.isFocused}
+        canEdit={canEdit}
         tagComponent={tagComponent}
         onTagDelete={onTagDelete}
+        onTagEdit={this.onTagEdit}
         onInputContainerPress={this.onInputContainerPress}
       />
     );
@@ -223,7 +238,7 @@ class TagInput extends Component {
       <AutoSuggestInput
         {...otherProps}
         forwardedRef={this._setAutosuggestRef}
-        className={styles.internalInput}
+        className={className}
         inputContainerClassName={classNames(
           inputContainerClassName,
           isFocused && styles.isFocused
@@ -258,11 +273,13 @@ TagInput.propTypes = {
   placeholder: PropTypes.string.isRequired,
   delimiters: PropTypes.arrayOf(PropTypes.string).isRequired,
   minQueryLength: PropTypes.number.isRequired,
+  canEdit: PropTypes.bool,
   hasError: PropTypes.bool,
   hasWarning: PropTypes.bool,
   tagComponent: PropTypes.elementType.isRequired,
   onTagAdd: PropTypes.func.isRequired,
-  onTagDelete: PropTypes.func.isRequired
+  onTagDelete: PropTypes.func.isRequired,
+  onTagReplace: PropTypes.func
 };
 
 TagInput.defaultProps = {
@@ -273,6 +290,7 @@ TagInput.defaultProps = {
   placeholder: '',
   delimiters: ['Tab', 'Enter', ' ', ','],
   minQueryLength: 1,
+  canEdit: false,
   tagComponent: TagInputTag
 };
 

frontend/src/Components/Form/TagInputConnector.js

@@ -138,6 +138,7 @@ class TagInputConnector extends Component {
       <TagInput
         onTagAdd={this.onTagAdd}
         onTagDelete={this.onTagDelete}
+        onTagReplace={this.onTagReplace}
         {...this.props}
       />
     );

frontend/src/Components/Form/TagInputInput.js

@@ -28,8 +28,10 @@ class TagInputInput extends Component {
       tags,
       inputProps,
       kind,
+      canEdit,
       tagComponent: TagComponent,
-      onTagDelete
+      onTagDelete,
+      onTagEdit
     } = this.props;
 
     return (
@@ -46,8 +48,10 @@ class TagInputInput extends Component {
                 index={index}
                 tag={tag}
                 kind={kind}
+                canEdit={canEdit}
                 isLastTag={index === tags.length - 1}
                 onDelete={onTagDelete}
+                onEdit={onTagEdit}
               />
             );
           })
@@ -66,8 +70,10 @@ TagInputInput.propTypes = {
   inputProps: PropTypes.object.isRequired,
   kind: PropTypes.oneOf(kinds.all).isRequired,
   isFocused: PropTypes.bool.isRequired,
+  canEdit: PropTypes.bool.isRequired,
   tagComponent: PropTypes.elementType.isRequired,
   onTagDelete: PropTypes.func.isRequired,
+  onTagEdit: PropTypes.func.isRequired,
   onInputContainerPress: PropTypes.func.isRequired
 };
 

frontend/src/Components/Form/TagInputTag.css

@@ -1,5 +1,40 @@
 .tag {
-  composes: link from '~Components/Link/Link.css';
-
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  max-width: 100%;
   height: 31px;
 }
+
+.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 {
+  display: inline-block;
+  margin-left: 4px;
+  padding-left: 2px;
+  border-left: 1px solid #eee;
+}
+
+.editButton {
+  composes: button from '~Components/Link/IconButton.css';
+
+  width: 9px;
+}
+
+.label {
+  composes: label from '~Components/Label.css';
+
+  max-width: 100%;
+}

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

@@ -1,6 +1,11 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
+  'editButton': string;
+  'editContainer': string;
+  'label': string;
+  'link': string;
+  'linkWithEdit': string;
   'tag': string;
 }
 export const cssExports: CssExports;

frontend/src/Components/Form/TagInputTag.js

@@ -1,8 +1,9 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Label from 'Components/Label';
+import IconButton from 'Components/Link/IconButton';
 import Link from 'Components/Link/Link';
-import { kinds } from 'Helpers/Props';
+import { icons, kinds } from 'Helpers/Props';
 import tagShape from 'Helpers/Props/Shapes/tagShape';
 import styles from './TagInputTag.css';
 
@@ -24,24 +25,61 @@ class TagInputTag extends Component {
     });
   };
 
+  onEdit = () => {
+    const {
+      index,
+      tag,
+      onEdit
+    } = this.props;
+
+    onEdit({
+      index,
+      id: tag.id,
+      value: tag.name
+    });
+  };
+
   //
   // Render
 
   render() {
     const {
       tag,
-      kind
+      kind,
+      canEdit
     } = this.props;
+
     return (
-      <Link
+      <div
         className={styles.tag}
         tabIndex={-1}
-        onPress={this.onDelete}
       >
-        <Label kind={kind}>
-          {tag.name}
+        <Label
+          className={styles.label}
+          kind={kind}
+        >
+          <Link
+            className={canEdit ? styles.linkWithEdit : styles.link}
+            tabIndex={-1}
+            onPress={this.onDelete}
+          >
+            {tag.name}
+          </Link>
+
+          {
+            canEdit ?
+              <div className={styles.editContainer}>
+                <IconButton
+                  className={styles.editButton}
+                  name={icons.EDIT}
+                  size={9}
+                  onPress={this.onEdit}
+                />
+              </div> :
+              null
+          }
         </Label>
-      </Link>
+      </div>
     );
   }
 }
@@ -50,7 +88,9 @@ TagInputTag.propTypes = {
   index: PropTypes.number.isRequired,
   tag: PropTypes.shape(tagShape),
   kind: PropTypes.oneOf(kinds.all).isRequired,
-  onDelete: PropTypes.func.isRequired
+  canEdit: PropTypes.bool.isRequired,
+  onDelete: PropTypes.func.isRequired,
+  onEdit: PropTypes.func.isRequired
 };
 
 export default TagInputTag;

frontend/src/Components/Form/TextTagInputConnector.js

@@ -71,6 +71,20 @@ class TextTagInputConnector extends Component {
     });
   };
 
+  onTagReplace = (tagToReplace, newTag) => {
+    const {
+      name,
+      valueArray,
+      onChange
+    } = this.props;
+
+    const newValue = [...valueArray];
+    newValue.splice(tagToReplace.index, 1);
+    newValue.push(newTag.name.trim());
+
+    onChange({ name, value: newValue });
+  };
+
   //
   // Render
 
@@ -80,6 +94,7 @@ class TextTagInputConnector extends Component {
         tagList={[]}
         onTagAdd={this.onTagAdd}
         onTagDelete={this.onTagDelete}
+        onTagReplace={this.onTagReplace}
         {...this.props}
       />
     );

frontend/src/Components/Icon.js

@@ -41,7 +41,7 @@ class Icon extends PureComponent {
       return (
         <span
           className={containerClassName}
-          title={title}
+          title={typeof title === 'function' ? title() : title}
         >
           {icon}
         </span>
@@ -58,7 +58,7 @@ Icon.propTypes = {
   name: PropTypes.object.isRequired,
   kind: PropTypes.string.isRequired,
   size: PropTypes.number.isRequired,
-  title: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   isSpinning: PropTypes.bool.isRequired,
   fixedWidth: PropTypes.bool.isRequired
 };

frontend/src/Components/Menu/FilterMenuContent.js

@@ -33,7 +33,7 @@ class FilterMenuContent extends Component {
                 selectedFilterKey={selectedFilterKey}
                 onPress={onFilterSelect}
               >
-                {filter.label}
+                {typeof filter.label === 'function' ? filter.label() : filter.label}
               </FilterMenuItem>
             );
           })

frontend/src/Components/Page/ErrorPage.js

@@ -7,6 +7,7 @@ function ErrorPage(props) {
   const {
     version,
     isLocalStorageSupported,
+    translationsError,
     moviesError,
     customFiltersError,
     tagsError,
@@ -20,6 +21,8 @@ function ErrorPage(props) {
 
   if (!isLocalStorageSupported) {
     errorMessage = 'Local Storage is not supported or disabled. A plugin or private browsing may have disabled it.';
+  } else if (translationsError) {
+    errorMessage = getErrorMessage(translationsError, 'Failed to load translations from API');
   } else if (moviesError) {
     errorMessage = getErrorMessage(moviesError, 'Failed to load movie from API');
   } else if (customFiltersError) {
@@ -52,6 +55,7 @@ function ErrorPage(props) {
 ErrorPage.propTypes = {
   version: PropTypes.string.isRequired,
   isLocalStorageSupported: PropTypes.bool.isRequired,
+  translationsError: PropTypes.object,
   moviesError: PropTypes.object,
   customFiltersError: PropTypes.object,
   tagsError: PropTypes.object,

frontend/src/Components/Page/Header/MovieSearchInputConnector.js

@@ -19,6 +19,8 @@ function createCleanMovieSelector() {
           year,
           images,
           alternateTitles = [],
+          tmdbId,
+          imdbId,
           tags = []
         } = movie;
 
@@ -29,6 +31,8 @@ function createCleanMovieSelector() {
           year,
           images,
           alternateTitles,
+          tmdbId,
+          imdbId,
           firstCharacter: title.charAt(0).toLowerCase(),
           tags: tags.reduce((acc, id) => {
             const matchingTag = allTags.find((tag) => tag.id === id);

frontend/src/Components/Page/Header/MovieSearchResult.js

@@ -12,6 +12,8 @@ function MovieSearchResult(props) {
     year,
     images,
     alternateTitles,
+    tmdbId,
+    imdbId,
     tags
   } = props;
 
@@ -47,6 +49,22 @@ function MovieSearchResult(props) {
             null
         }
 
+        {
+          match.key === 'tmdbId' && tmdbId ?
+            <div className={styles.alternateTitle}>
+              TmdbId: {tmdbId}
+            </div> :
+            null
+        }
+
+        {
+          match.key === 'imdbId' && imdbId ?
+            <div className={styles.alternateTitle}>
+              ImdbId: {imdbId}
+            </div> :
+            null
+        }
+
         {
           tag ?
             <div className={styles.tagContainer}>
@@ -69,6 +87,8 @@ MovieSearchResult.propTypes = {
   year: PropTypes.number.isRequired,
   images: PropTypes.arrayOf(PropTypes.object).isRequired,
   alternateTitles: PropTypes.arrayOf(PropTypes.object).isRequired,
+  tmdbId: PropTypes.number,
+  imdbId: PropTypes.string,
   tags: PropTypes.arrayOf(PropTypes.object).isRequired,
   match: PropTypes.object.isRequired
 };

frontend/src/Components/Page/Header/fuse.worker.js

@@ -9,6 +9,8 @@ const fuseOptions = {
   keys: [
     'title',
     'alternateTitles.title',
+    'tmdbId',
+    'imdbId',
     'tags.label'
   ]
 };

frontend/src/Components/Page/PageConnector.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import { createSelector } from 'reselect';
-import { saveDimensions, setIsSidebarVisible } from 'Store/Actions/appActions';
+import { fetchTranslations, saveDimensions, setIsSidebarVisible } from 'Store/Actions/appActions';
 import { fetchCustomFilters } from 'Store/Actions/customFilterActions';
 import { fetchMovies } from 'Store/Actions/movieActions';
 import { fetchMovieCollections } from 'Store/Actions/movieCollectionActions';
@@ -53,6 +53,7 @@ const selectIsPopulated = createSelector(
   (state) => state.settings.importLists.isPopulated,
   (state) => state.system.status.isPopulated,
   (state) => state.movieCollections.isPopulated,
+  (state) => state.app.translations.isPopulated,
   (
     customFiltersIsPopulated,
     tagsIsPopulated,
@@ -62,7 +63,8 @@ const selectIsPopulated = createSelector(
     indexerFlagsIsPopulated,
     importListsIsPopulated,
     systemStatusIsPopulated,
-    movieCollectionsIsPopulated
+    movieCollectionsIsPopulated,
+    translationsIsPopulated
   ) => {
     return (
       customFiltersIsPopulated &&
@@ -73,7 +75,8 @@ const selectIsPopulated = createSelector(
       indexerFlagsIsPopulated &&
       importListsIsPopulated &&
       systemStatusIsPopulated &&
-      movieCollectionsIsPopulated
+      movieCollectionsIsPopulated &&
+      translationsIsPopulated
     );
   }
 );
@@ -88,6 +91,7 @@ const selectErrors = createSelector(
   (state) => state.settings.importLists.error,
   (state) => state.system.status.error,
   (state) => state.movieCollections.error,
+  (state) => state.app.translations.error,
   (
     customFiltersError,
     tagsError,
@@ -97,7 +101,8 @@ const selectErrors = createSelector(
     indexerFlagsError,
     importListsError,
     systemStatusError,
-    movieCollectionsError
+    movieCollectionsError,
+    translationsError
   ) => {
     const hasError = !!(
       customFiltersError ||
@@ -108,7 +113,8 @@ const selectErrors = createSelector(
       indexerFlagsError ||
       importListsError ||
       systemStatusError ||
-      movieCollectionsError
+      movieCollectionsError ||
+      translationsError
     );
 
     return {
@@ -121,7 +127,8 @@ const selectErrors = createSelector(
       indexerFlagsError,
       importListsError,
       systemStatusError,
-      movieCollectionsError
+      movieCollectionsError,
+      translationsError
     };
   }
 );
@@ -183,6 +190,9 @@ function createMapDispatchToProps(dispatch, props) {
     dispatchFetchStatus() {
       dispatch(fetchStatus());
     },
+    dispatchFetchTranslations() {
+      dispatch(fetchTranslations());
+    },
     onResize(dimensions) {
       dispatch(saveDimensions(dimensions));
     },
@@ -217,6 +227,7 @@ class PageConnector extends Component {
       this.props.dispatchFetchImportLists();
       this.props.dispatchFetchUISettings();
       this.props.dispatchFetchStatus();
+      this.props.dispatchFetchTranslations();
     }
   }
 
@@ -243,6 +254,7 @@ class PageConnector extends Component {
       dispatchFetchImportLists,
       dispatchFetchUISettings,
       dispatchFetchStatus,
+      dispatchFetchTranslations,
       ...otherProps
     } = this.props;
 
@@ -284,6 +296,7 @@ PageConnector.propTypes = {
   dispatchFetchImportLists: PropTypes.func.isRequired,
   dispatchFetchUISettings: PropTypes.func.isRequired,
   dispatchFetchStatus: PropTypes.func.isRequired,
+  dispatchFetchTranslations: PropTypes.func.isRequired,
   onSidebarVisibleChange: PropTypes.func.isRequired
 };
 

frontend/src/Components/Page/PageContentBody.tsx

@@ -5,8 +5,8 @@ import { isLocked } from 'Utilities/scrollLock';
 import styles from './PageContentBody.css';
 
 interface PageContentBodyProps {
-  className: string;
-  innerClassName: string;
+  className?: string;
+  innerClassName?: string;
   children: ReactNode;
   initialScrollTop?: number;
   onScroll?: (payload: OnScroll) => void;

frontend/src/Components/Page/PageSectionContent.js

@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import { kinds } from 'Helpers/Props';
 
 function PageSectionContent(props) {
   const {
@@ -17,7 +19,7 @@ function PageSectionContent(props) {
     );
   } else if (!isFetching && !!error) {
     return (
-      <div>{errorMessage}</div>
+      <Alert kind={kinds.DANGER}>{errorMessage}</Alert>
     );
   } else if (isPopulated && !error) {
     return (

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

@@ -21,24 +21,34 @@ const SIDEBAR_WIDTH = parseInt(dimensions.sidebarWidth);
 const links = [
   {
     iconName: icons.MOVIE_CONTINUING,
-    title: translate('Movies'),
+    get title() {
+      return translate('Movies');
+    },
     to: '/',
     alias: '/movies',
     children: [
       {
-        title: translate('AddNew'),
+        get title() {
+          return translate('AddNew');
+        },
         to: '/add/new'
       },
       {
-        title: translate('ImportLibrary'),
+        get title() {
+          return translate('ImportLibrary');
+        },
         to: '/add/import'
       },
       {
-        title: translate('Collections'),
+        get title() {
+          return translate('Collections');
+        },
         to: '/collections'
       },
       {
-        title: translate('Discover'),
+        get title() {
+          return translate('Discover');
+        },
         to: '/add/discover'
       }
     ]
@@ -46,26 +56,36 @@ const links = [
 
   {
     iconName: icons.CALENDAR,
-    title: translate('Calendar'),
+    get title() {
+      return translate('Calendar');
+    },
     to: '/calendar'
   },
 
   {
     iconName: icons.ACTIVITY,
-    title: translate('Activity'),
+    get title() {
+      return translate('Activity');
+    },
     to: '/activity/queue',
     children: [
       {
-        title: translate('Queue'),
+        get title() {
+          return translate('Queue');
+        },
         to: '/activity/queue',
         statusComponent: QueueStatusConnector
       },
       {
-        title: translate('History'),
+        get title() {
+          return translate('History');
+        },
         to: '/activity/history'
       },
       {
-        title: translate('Blocklist'),
+        get title() {
+          return translate('Blocklist');
+        },
         to: '/activity/blocklist'
       }
     ]
@@ -73,55 +93,81 @@ const links = [
 
   {
     iconName: icons.SETTINGS,
-    title: translate('Settings'),
+    get title() {
+      return translate('Settings');
+    },
     to: '/settings',
     children: [
       {
-        title: translate('MediaManagement'),
+        get title() {
+          return translate('MediaManagement');
+        },
         to: '/settings/mediamanagement'
       },
       {
-        title: translate('Profiles'),
+        get title() {
+          return translate('Profiles');
+        },
         to: '/settings/profiles'
       },
       {
-        title: translate('Quality'),
+        get title() {
+          return translate('Quality');
+        },
         to: '/settings/quality'
       },
       {
-        title: translate('CustomFormats'),
+        get title() {
+          return translate('CustomFormats');
+        },
         to: '/settings/customformats'
       },
       {
-        title: translate('Indexers'),
+        get title() {
+          return translate('Indexers');
+        },
         to: '/settings/indexers'
       },
       {
-        title: translate('DownloadClients'),
+        get title() {
+          return translate('DownloadClients');
+        },
         to: '/settings/downloadclients'
       },
       {
-        title: translate('Lists'),
+        get title() {
+          return translate('Lists');
+        },
         to: '/settings/importlists'
       },
       {
-        title: translate('Connect'),
+        get title() {
+          return translate('Connect');
+        },
         to: '/settings/connect'
       },
       {
-        title: translate('Metadata'),
+        get title() {
+          return translate('Metadata');
+        },
         to: '/settings/metadata'
       },
       {
-        title: translate('Tags'),
+        get title() {
+          return translate('Tags');
+        },
         to: '/settings/tags'
       },
       {
-        title: translate('General'),
+        get title() {
+          return translate('General');
+        },
         to: '/settings/general'
       },
       {
-        title: translate('UI'),
+        get title() {
+          return translate('UI');
+        },
         to: '/settings/ui'
       }
     ]
@@ -129,32 +175,46 @@ const links = [
 
   {
     iconName: icons.SYSTEM,
-    title: translate('System'),
+    get title() {
+      return translate('System');
+    },
     to: '/system/status',
     children: [
       {
-        title: translate('Status'),
+        get title() {
+          return translate('Status');
+        },
         to: '/system/status',
         statusComponent: HealthStatusConnector
       },
       {
-        title: translate('Tasks'),
+        get title() {
+          return translate('Tasks');
+        },
         to: '/system/tasks'
       },
       {
-        title: translate('Backup'),
+        get title() {
+          return translate('Backup');
+        },
         to: '/system/backup'
       },
       {
-        title: translate('Updates'),
+        get title() {
+          return translate('Updates');
+        },
         to: '/system/updates'
       },
       {
-        title: translate('Events'),
+        get title() {
+          return translate('Events');
+        },
         to: '/system/events'
       },
       {
-        title: translate('LogFiles'),
+        get title() {
+          return translate('LogFiles');
+        },
         to: '/system/logs/files'
       }
     ]

frontend/src/Components/ProgressBar.css

@@ -16,6 +16,46 @@
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
   color: var(--white);
   transition: width 0.6s ease;
+
+  &.default {
+    background-color: var(--darkGray);
+  }
+
+  &.primary {
+    background-color: var(--primaryColor);
+  }
+
+  &.danger {
+    background-color: var(--dangerColor);
+
+    &:global(.colorImpaired) {
+      background: repeating-linear-gradient(90deg, color(#f05050 shade(5%)), color(#f05050 shade(5%)) 5px, color(#f05050 shade(15%)) 5px, color(#f05050 shade(15%)) 10px);
+    }
+  }
+
+  &.success {
+    background-color: var(--successColor);
+  }
+
+  &.purple {
+    background-color: var(--purple);
+  }
+
+  &.warning {
+    background-color: var(--warningColor);
+
+    &:global(.colorImpaired) {
+      background: repeating-linear-gradient(45deg, #ffa500, #ffa500 5px, color(#ffa500 tint(15%)) 5px, color(#ffa500 tint(15%)) 10px);
+    }
+  }
+
+  &.info {
+    background-color: var(--infoColor);
+  }
+
+  &.queue {
+    background-color: var(--queueColor);
+  }
 }
 
 .frontTextContainer {
@@ -45,46 +85,6 @@
   cursor: default;
 }
 
-.default {
-  background-color: var(--darkGray);
-}
-
-.primary {
-  background-color: var(--primaryColor);
-}
-
-.danger {
-  background-color: var(--dangerColor);
-
-  &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, color(#f05050 shade(5%)), color(#f05050 shade(5%)) 5px, color(#f05050 shade(15%)) 5px, color(#f05050 shade(15%)) 10px);
-  }
-}
-
-.success {
-  background-color: var(--successColor);
-}
-
-.purple {
-  background-color: var(--purple);
-}
-
-.warning {
-  background-color: var(--warningColor);
-
-  &:global(.colorImpaired) {
-    background: repeating-linear-gradient(45deg, #ffa500, #ffa500 5px, color(#ffa500 tint(15%)) 5px, color(#ffa500 tint(15%)) 10px);
-  }
-}
-
-.info {
-  background-color: var(--infoColor);
-}
-
-.queue {
-  background-color: var(--queueColor);
-}
-
 .small {
   height: $progressBarSmallHeight;
 

frontend/src/Components/ProgressBar.js

@@ -38,7 +38,7 @@ function ProgressBar(props) {
             {
               showText && width ?
                 <div
-                  className={styles.backTextContainer}
+                  className={classNames(styles.backTextContainer, styles[kind])}
                   style={{ width: actualWidth }}
                 >
                   <div className={styles.backText}>
@@ -67,7 +67,7 @@ function ProgressBar(props) {
             {
               showText ?
                 <div
-                  className={styles.frontTextContainer}
+                  className={classNames(styles.frontTextContainer, styles[kind])}
                   style={{ width: progressPercent }}
                 >
                   <div

frontend/src/Components/Table/Column.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 
+type PropertyFunction<T> = () => T;
+
 interface Column {
   name: string;
-  label: string | React.ReactNode;
+  label: string | PropertyFunction<string> | React.ReactNode;
   columnLabel?: string;
   isSortable?: boolean;
   isVisible: boolean;

frontend/src/Components/Table/Table.js

@@ -107,7 +107,7 @@ function Table(props) {
                   {...getTableHeaderCellProps(otherProps)}
                   {...column}
                 >
-                  {column.label}
+                  {typeof column.label === 'function' ? column.label() : column.label}
                 </TableHeaderCell>
               );
             })

frontend/src/Components/Table/TableHeaderCell.js

@@ -30,6 +30,7 @@ class TableHeaderCell extends Component {
     const {
       className,
       name,
+      label,
       columnLabel,
       isSortable,
       isVisible,
@@ -53,7 +54,8 @@ class TableHeaderCell extends Component {
           {...otherProps}
           component="th"
           className={className}
-          title={columnLabel}
+          label={typeof label === 'function' ? label() : label}
+          title={typeof columnLabel === 'function' ? columnLabel() : columnLabel}
           onPress={this.onPress}
         >
           {children}
@@ -77,7 +79,8 @@ class TableHeaderCell extends Component {
 TableHeaderCell.propTypes = {
   className: PropTypes.string,
   name: PropTypes.string.isRequired,
-  columnLabel: PropTypes.string,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]),
+  columnLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   isSortable: PropTypes.bool,
   isVisible: PropTypes.bool,
   isModifiable: PropTypes.bool,

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

@@ -35,7 +35,7 @@ function TableOptionsColumn(props) {
             isDisabled={isModifiable === false}
             onChange={onVisibleChange}
           />
-          {label}
+          {typeof label === 'function' ? label() : label}
         </label>
 
         {
@@ -56,7 +56,7 @@ function TableOptionsColumn(props) {
 
 TableOptionsColumn.propTypes = {
   name: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
   isVisible: PropTypes.bool.isRequired,
   isModifiable: PropTypes.bool.isRequired,
   index: PropTypes.number.isRequired,

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

@@ -112,7 +112,7 @@ class TableOptionsColumnDragSource extends Component {
 
         <TableOptionsColumn
           name={name}
-          label={label}
+          label={typeof label === 'function' ? label() : label}
           isVisible={isVisible}
           isModifiable={isModifiable}
           index={index}
@@ -138,7 +138,7 @@ class TableOptionsColumnDragSource extends Component {
 
 TableOptionsColumnDragSource.propTypes = {
   name: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
   isVisible: PropTypes.bool.isRequired,
   isModifiable: PropTypes.bool.isRequired,
   index: PropTypes.number.isRequired,

frontend/src/Components/keyboardShortcuts.js

@@ -6,47 +6,65 @@ import translate from 'Utilities/String/translate';
 export const shortcuts = {
   OPEN_KEYBOARD_SHORTCUTS_MODAL: {
     key: '?',
-    name: translate('OpenThisModal')
+    get name() {
+      return translate('OpenThisModal');
+    }
   },
 
   CLOSE_MODAL: {
     key: 'Esc',
-    name: translate('CloseCurrentModal')
+    get name() {
+      return translate('CloseCurrentModal');
+    }
   },
 
   ACCEPT_CONFIRM_MODAL: {
     key: 'Enter',
-    name: translate('AcceptConfirmationModal')
+    get name() {
+      return translate('AcceptConfirmationModal');
+    }
   },
 
   MOVIE_SEARCH_INPUT: {
     key: 's',
-    name: translate('FocusSearchBox')
+    get name() {
+      return translate('FocusSearchBox');
+    }
   },
 
   SAVE_SETTINGS: {
     key: 'mod+s',
-    name: translate('SaveSettings')
+    get name() {
+      return translate('SaveSettings');
+    }
   },
 
   SCROLL_TOP: {
     key: 'mod+home',
-    name: translate('MovieIndexScrollTop')
+    get name() {
+      return translate('MovieIndexScrollTop');
+    }
   },
 
   SCROLL_BOTTOM: {
     key: 'mod+end',
-    name: translate('MovieIndexScrollBottom')
+    get name() {
+      return translate('MovieIndexScrollBottom');
+    }
   },
 
   DETAILS_NEXT: {
     key: '→',
-    name: translate('MovieDetailsNextMovie')
+    get name() {
+      return translate('MovieDetailsNextMovie');
+    }
   },
 
   DETAILS_PREVIOUS: {
     key: '←',
-    name: translate('MovieDetailsPreviousMovie')
+    get name() {
+      return translate('MovieDetailsPreviousMovie');
+    }
   }
 };
 

frontend/src/DiscoverMovie/DiscoverMovie.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Alert from 'Components/Alert';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
@@ -10,7 +11,7 @@ import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
-import { align, icons, sortDirections } from 'Helpers/Props';
+import { align, icons, kinds, sortDirections } from 'Helpers/Props';
 import styles from 'Movie/Index/MovieIndex.css';
 import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
 import translate from 'Utilities/String/translate';
@@ -369,9 +370,9 @@ class DiscoverMovie extends Component {
 
             {
               !isFetching && !!error &&
-                <div>
+                <Alert kind={kinds.DANGER}>
                   {translate('UnableToLoadMovies')}
-                </div>
+                </Alert>
             }
 
             {

frontend/src/DiscoverMovie/Overview/Options/DiscoverMovieOverviewOptionsModalContent.js

@@ -14,9 +14,24 @@ import { inputTypes } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 
 const posterSizeOptions = [
-  { key: 'small', value: translate('Small') },
-  { key: 'medium', value: translate('Medium') },
-  { key: 'large', value: translate('Large') }
+  {
+    key: 'small',
+    get value() {
+      return translate('Small');
+    }
+  },
+  {
+    key: 'medium',
+    get value() {
+      return translate('Medium');
+    }
+  },
+  {
+    key: 'large',
+    get value() {
+      return translate('Large');
+    }
+  }
 ];
 
 class DiscoverMovieOverviewOptionsModalContent extends Component {