Fixed: Speed up RSS sync

Fixes #4910

Co-Authored-By: ta264 <ta264@users.noreply.github.com>

.editorconfig

@@ -2,6 +2,12 @@
 # editorconfig.org
 root = true
 
+# NOTE: Requires **VS2019 16.3** or later
+
+# Stylecop.ruleset
+# Description: Rules for Radarr
+
+# Code files
 [*.cs]
 charset = utf-8
 trim_trailing_whitespace = true
@@ -38,6 +44,213 @@ csharp_style_var_for_built_in_types = true:suggestion
 csharp_style_var_when_type_is_apparent = true:suggestion
 csharp_style_var_elsewhere = true:suggestion
 
+# Stylecop Rules
+dotnet_diagnostic.SA0001.severity = none
+dotnet_diagnostic.SA1005.severity = none
+dotnet_diagnostic.SA1025.severity = none
+dotnet_diagnostic.SA1101.severity = none
+dotnet_diagnostic.SA1116.severity = none
+dotnet_diagnostic.SA1118.severity = none
+dotnet_diagnostic.SA1122.severity = none
+dotnet_diagnostic.SA1201.severity = suggestion
+dotnet_diagnostic.SA1202.severity = suggestion
+dotnet_diagnostic.SA1204.severity = suggestion
+dotnet_diagnostic.SA1300.severity = none
+dotnet_diagnostic.SA1303.severity = none
+dotnet_diagnostic.SA1304.severity = none
+dotnet_diagnostic.SA1306.severity = none
+dotnet_diagnostic.SA1309.severity = none
+dotnet_diagnostic.SA1310.severity = none
+dotnet_diagnostic.SA1401.severity = none
+dotnet_diagnostic.SA1402.severity = none
+dotnet_diagnostic.SA1404.severity = suggestion
+dotnet_diagnostic.SA1405.severity = suggestion
+dotnet_diagnostic.SA1406.severity = suggestion
+dotnet_diagnostic.SA1410.severity = suggestion
+dotnet_diagnostic.SA1411.severity = suggestion
+dotnet_diagnostic.SA1413.severity = none
+dotnet_diagnostic.SA1516.severity = none
+dotnet_diagnostic.SA1600.severity = none
+dotnet_diagnostic.SA1601.severity = none
+dotnet_diagnostic.SA1602.severity = none
+dotnet_diagnostic.SA1604.severity = none
+dotnet_diagnostic.SA1605.severity = none
+dotnet_diagnostic.SA1606.severity = none
+dotnet_diagnostic.SA1607.severity = none
+dotnet_diagnostic.SA1608.severity = none
+dotnet_diagnostic.SA1610.severity = none
+dotnet_diagnostic.SA1611.severity = none
+dotnet_diagnostic.SA1612.severity = none
+dotnet_diagnostic.SA1613.severity = none
+dotnet_diagnostic.SA1614.severity = none
+dotnet_diagnostic.SA1615.severity = none
+dotnet_diagnostic.SA1616.severity = none
+dotnet_diagnostic.SA1617.severity = none
+dotnet_diagnostic.SA1618.severity = none
+dotnet_diagnostic.SA1619.severity = none
+dotnet_diagnostic.SA1620.severity = none
+dotnet_diagnostic.SA1621.severity = none
+dotnet_diagnostic.SA1622.severity = none
+dotnet_diagnostic.SA1623.severity = none
+dotnet_diagnostic.SA1624.severity = none
+dotnet_diagnostic.SA1625.severity = none
+dotnet_diagnostic.SA1626.severity = none
+dotnet_diagnostic.SA1627.severity = none
+dotnet_diagnostic.SA1629.severity = none
+dotnet_diagnostic.SA1633.severity = none
+dotnet_diagnostic.SA1634.severity = none
+dotnet_diagnostic.SA1635.severity = none
+dotnet_diagnostic.SA1636.severity = none
+dotnet_diagnostic.SA1637.severity = none
+dotnet_diagnostic.SA1638.severity = none
+dotnet_diagnostic.SA1640.severity = none
+dotnet_diagnostic.SA1641.severity = none
+dotnet_diagnostic.SA1642.severity = none
+dotnet_diagnostic.SA1643.severity = none
+dotnet_diagnostic.SA1648.severity = none
+dotnet_diagnostic.SA1649.severity = none
+dotnet_diagnostic.SA1651.severity = none
+dotnet_diagnostic.SX1101.severity = warning
+dotnet_diagnostic.SX1309.severity = warning
+
+# Microsoft Analyzers that fail and need to be sorted thru
+dotnet_diagnostic.ASP0000.severity = suggestion
+dotnet_diagnostic.CA1000.severity = suggestion
+dotnet_diagnostic.CA1001.severity = suggestion
+dotnet_diagnostic.CA1003.severity = suggestion
+dotnet_diagnostic.CA1008.severity = suggestion
+dotnet_diagnostic.CA1010.severity = suggestion
+dotnet_diagnostic.CA1012.severity = suggestion
+dotnet_diagnostic.CA1014.severity = suggestion
+dotnet_diagnostic.CA1016.severity = suggestion
+dotnet_diagnostic.CA1017.severity = suggestion
+dotnet_diagnostic.CA1018.severity = suggestion
+dotnet_diagnostic.CA1019.severity = suggestion
+dotnet_diagnostic.CA1021.severity = suggestion
+dotnet_diagnostic.CA1024.severity = suggestion
+dotnet_diagnostic.CA1027.severity = suggestion
+dotnet_diagnostic.CA1028.severity = suggestion
+dotnet_diagnostic.CA1030.severity = suggestion
+dotnet_diagnostic.CA1031.severity = suggestion
+dotnet_diagnostic.CA1032.severity = suggestion
+dotnet_diagnostic.CA1033.severity = suggestion
+dotnet_diagnostic.CA1034.severity = suggestion
+dotnet_diagnostic.CA1036.severity = suggestion
+dotnet_diagnostic.CA1040.severity = suggestion
+dotnet_diagnostic.CA1041.severity = suggestion
+dotnet_diagnostic.CA1043.severity = suggestion
+dotnet_diagnostic.CA1044.severity = suggestion
+dotnet_diagnostic.CA1050.severity = suggestion
+dotnet_diagnostic.CA1051.severity = suggestion
+dotnet_diagnostic.CA1052.severity = suggestion
+dotnet_diagnostic.CA1054.severity = suggestion
+dotnet_diagnostic.CA1055.severity = suggestion
+dotnet_diagnostic.CA1056.severity = suggestion
+dotnet_diagnostic.CA1058.severity = suggestion
+dotnet_diagnostic.CA1060.severity = suggestion
+dotnet_diagnostic.CA1061.severity = suggestion
+dotnet_diagnostic.CA1062.severity = suggestion
+dotnet_diagnostic.CA1063.severity = suggestion
+dotnet_diagnostic.CA1064.severity = suggestion
+dotnet_diagnostic.CA1065.severity = suggestion
+dotnet_diagnostic.CA1066.severity = suggestion
+dotnet_diagnostic.CA1067.severity = suggestion
+dotnet_diagnostic.CA1068.severity = suggestion
+dotnet_diagnostic.CA1069.severity = suggestion
+dotnet_diagnostic.CA1200.severity = suggestion
+dotnet_diagnostic.CA1303.severity = suggestion
+dotnet_diagnostic.CA1304.severity = suggestion
+dotnet_diagnostic.CA1305.severity = suggestion
+dotnet_diagnostic.CA1307.severity = suggestion
+dotnet_diagnostic.CA1308.severity = suggestion
+dotnet_diagnostic.CA1401.severity = suggestion
+dotnet_diagnostic.CA1507.severity = suggestion
+dotnet_diagnostic.CA1707.severity = suggestion
+dotnet_diagnostic.CA1710.severity = suggestion
+dotnet_diagnostic.CA1712.severity = suggestion
+dotnet_diagnostic.CA1714.severity = suggestion
+dotnet_diagnostic.CA1715.severity = suggestion
+dotnet_diagnostic.CA1716.severity = suggestion
+dotnet_diagnostic.CA1717.severity = suggestion
+dotnet_diagnostic.CA1720.severity = suggestion
+dotnet_diagnostic.CA1721.severity = suggestion
+dotnet_diagnostic.CA1724.severity = suggestion
+dotnet_diagnostic.CA1801.severity = suggestion
+dotnet_diagnostic.CA1802.severity = suggestion
+dotnet_diagnostic.CA1805.severity = suggestion
+dotnet_diagnostic.CA1806.severity = suggestion
+dotnet_diagnostic.CA1810.severity = suggestion
+dotnet_diagnostic.CA1812.severity = suggestion
+dotnet_diagnostic.CA1814.severity = suggestion
+dotnet_diagnostic.CA1815.severity = suggestion
+dotnet_diagnostic.CA1816.severity = suggestion
+dotnet_diagnostic.CA1819.severity = suggestion
+dotnet_diagnostic.CA1822.severity = suggestion
+dotnet_diagnostic.CA1823.severity = suggestion
+dotnet_diagnostic.CA1824.severity = suggestion
+dotnet_diagnostic.CA2000.severity = suggestion
+dotnet_diagnostic.CA2002.severity = suggestion
+dotnet_diagnostic.CA2007.severity = suggestion
+dotnet_diagnostic.CA2008.severity = suggestion
+dotnet_diagnostic.CA2009.severity = suggestion
+dotnet_diagnostic.CA2010.severity = suggestion
+dotnet_diagnostic.CA2011.severity = suggestion
+dotnet_diagnostic.CA2012.severity = suggestion
+dotnet_diagnostic.CA2013.severity = suggestion
+dotnet_diagnostic.CA2100.severity = suggestion
+dotnet_diagnostic.CA2101.severity = suggestion
+dotnet_diagnostic.CA2119.severity = suggestion
+dotnet_diagnostic.CA2153.severity = suggestion
+dotnet_diagnostic.CA2200.severity = suggestion
+dotnet_diagnostic.CA2207.severity = suggestion
+dotnet_diagnostic.CA2208.severity = suggestion
+dotnet_diagnostic.CA2211.severity = suggestion
+dotnet_diagnostic.CA2213.severity = suggestion
+dotnet_diagnostic.CA2214.severity = suggestion
+dotnet_diagnostic.CA2215.severity = suggestion
+dotnet_diagnostic.CA2216.severity = suggestion
+dotnet_diagnostic.CA2219.severity = suggestion
+dotnet_diagnostic.CA2225.severity = suggestion
+dotnet_diagnostic.CA2226.severity = suggestion
+dotnet_diagnostic.CA2227.severity = suggestion
+dotnet_diagnostic.CA2229.severity = suggestion
+dotnet_diagnostic.CA2231.severity = suggestion
+dotnet_diagnostic.CA2234.severity = suggestion
+dotnet_diagnostic.CA2235.severity = suggestion
+dotnet_diagnostic.CA2237.severity = suggestion
+dotnet_diagnostic.CA2241.severity = suggestion
+dotnet_diagnostic.CA2242.severity = suggestion
+dotnet_diagnostic.CA2243.severity = suggestion
+dotnet_diagnostic.CA2244.severity = suggestion
+dotnet_diagnostic.CA2245.severity = suggestion
+dotnet_diagnostic.CA2246.severity = suggestion
+dotnet_diagnostic.CA3061.severity = suggestion
+dotnet_diagnostic.CA3075.severity = suggestion
+dotnet_diagnostic.CA3076.severity = suggestion
+dotnet_diagnostic.CA3077.severity = suggestion
+dotnet_diagnostic.CA3147.severity = suggestion
+dotnet_diagnostic.CA5350.severity = suggestion
+dotnet_diagnostic.CA5351.severity = suggestion
+dotnet_diagnostic.CA5359.severity = suggestion
+dotnet_diagnostic.CA5360.severity = suggestion
+dotnet_diagnostic.CA5363.severity = suggestion
+dotnet_diagnostic.CA5364.severity = suggestion
+dotnet_diagnostic.CA5365.severity = suggestion
+dotnet_diagnostic.CA5366.severity = suggestion
+dotnet_diagnostic.CA5368.severity = suggestion
+dotnet_diagnostic.CA5369.severity = suggestion
+dotnet_diagnostic.CA5370.severity = suggestion
+dotnet_diagnostic.CA5371.severity = suggestion
+dotnet_diagnostic.CA5372.severity = suggestion
+dotnet_diagnostic.CA5373.severity = suggestion
+dotnet_diagnostic.CA5374.severity = suggestion
+dotnet_diagnostic.CA5379.severity = suggestion
+dotnet_diagnostic.CA5384.severity = suggestion
+dotnet_diagnostic.CA5385.severity = suggestion
+dotnet_diagnostic.CA5397.severity = suggestion
+
+
+
 [*.{js,html,js,hbs,less,css}]
 charset = utf-8
 trim_trailing_whitespace = true

.github/ISSUE_TEMPLATE.md

@@ -6,7 +6,7 @@
 
 **Just because you receive an exception in your logs, doesn't mean it's a bug and should be reported here. Often it's something else, such as a permission error. If you are unsure ask on the Discord or Subreddit first.**
 
-Visit our [Discord server](https://discord.gg/NWYch8M) or [Subreddit](https://reddit.com/r/radarr) for support or longer discussions. Support questions posed on here will be closed immediately.
+Visit our [Discord server](https://discord.gg/r5wJPt9) or [Subreddit](https://reddit.com/r/radarr) for support or longer discussions. Support questions posed on here will be closed immediately.
 
 Provide a description of the feature request or bug here, the more details the better. 
 Please also include the following if you are reporting a bug. If you do not include it, the issue will probably be closed as we cannot help you. -->

.github/ISSUE_TEMPLATE/config.yml

@@ -1,7 +1,7 @@
 blank_issues_enabled: false
 contact_links:
   - name: Support via Discord
-    url: https://discord.gg/AD3UP37
+    url: https://discord.gg/r5wJPt9
     about: Chat with users and devs on support and setup related topics.
   - name: Support via Reddit
     url: https://reddit.com/r/radarr

.github/PULL_REQUEST_TEMPLATE.md

@@ -6,6 +6,7 @@ YES | NO
 
 #### Todos
 - [ ] Tests
+- [ ] Translation Keys
 
 #### Issues Fixed or Closed by this PR
 

.github/stale.yml

@@ -7,7 +7,10 @@ exemptLabels:
   - feature request
   - parser
   - confirmed
-  - aphrodite
+  - sonarr-pull
+  - lidarr-pull
+  - readarr-pull
+  - v3
 # Label to use when marking an issue as stale
 staleLabel: stale
 # Comment to post when marking an issue as stale. Set to `false` to disable

.github/support.yml

@@ -6,7 +6,7 @@ supportLabel: support
 # to a support page, or set to `false` to disable
 supportComment: >
   We use the issue tracker exclusively for bug reports and feature requests.
-  However, this issue appears to be a support request. Please hop over onto our [Discord](https://discord.gg/ZDmT7qb) or [Subreddit](https://reddit.com/r/radarr)
+  However, this issue appears to be a support request. Please hop over onto our [Discord](https://discord.gg/r5wJPt9) or [Subreddit](https://reddit.com/r/radarr)
 # Whether to close issues marked as support requests
 close: true
 # Whether to lock issues marked as support requests

CONTRIBUTING.md

@@ -14,7 +14,7 @@ See the readme for information on setting up your development environment.
 - Rebase from Radarr's develop branch, don't merge
 - Make meaningful commits, or squash them
 - Feel free to make a pull request before work is complete, this will let us see where its at and make comments/suggest improvements
-- Reach out to us on the forums or on IRC if you have any questions
+- Reach out to us on the discord if you have any questions
 - Add tests (unit/integration)
 - Commit with *nix line endings for consistency (We checkout Windows and commit *nix)
 - One feature/bug fix per pull request to keep things clean and easy to understand

README.md

@@ -13,28 +13,34 @@ The project was inspired by other Usenet/BitTorrent movie downloaders such as Co
 ## Getting Started
 
 [![Installation](https://img.shields.io/badge/wiki-installation-brightgreen.svg?maxAge=60&style=flat-square)](https://github.com/Radarr/Radarr/wiki/Installation)
-[![Docker](https://img.shields.io/badge/wiki-docker-1488C6.svg?maxAge=60&style=flat-square)](https://github.com/Radarr/Radarr/wiki/Docker)
+[![Docker](https://img.shields.io/badge/wiki-docker-1488C6.svg?maxAge=60&style=flat-square)](https://github.com/Radarr/Radarr/wiki/Docker) 
 [![Setup Guide](https://img.shields.io/badge/wiki-setup_guide-orange.svg?maxAge=60&style=flat-square)](https://github.com/Radarr/Radarr/wiki/Setup-Guide)
 [![FAQ](https://img.shields.io/badge/wiki-FAQ-BF55EC.svg?maxAge=60&style=flat-square)](https://github.com/Radarr/Radarr/wiki/FAQ)
 
+
+If you are using Docker please ensure your Docker paths are setup correctly using [this guide to facilitate](https://old.reddit.com/r/usenet/wiki/docker) hardlinks and minimize permissions issues. 
+
 * [Install Radarr for your desired OS](https://github.com/Radarr/Radarr/wiki/Installation) *or* use [Docker](https://github.com/Radarr/Radarr/wiki/Docker)
 * *For Linux users*, run `radarr` and *optionally* have [Radarr start automatically](https://github.com/Radarr/Radarr/wiki/Autostart-on-Linux)
 * Connect to the UI through <http://localhost:7878> or <http://your-ip:7878> in your web browser
 * See the [Setup Guide](https://github.com/Radarr/Radarr/wiki/Setup-Guide) for further configuration
 
 ## Downloads
+Please note that v0.2 will only have critical bugs resolved as of August 2020. Any additional development or features will be soley in V3.
 
-| Release Type    | Branch: develop (stable)                                                                                                                                                     | Branch: nightly (semi-unstable)                                                                                                                                                                | Branch: aphrodite (very-unstable)                                                                                                                                              |
-|-----------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| Binary Releases | [![GitHub Releases](https://img.shields.io/badge/downloads-releases-brightgreen.svg?maxAge=60&style=flat-square)](https://github.com/Radarr/Radarr/releases)                 | [![AppVeyor Builds](https://img.shields.io/badge/downloads-nightly-green.svg?maxAge=60&style=flat-square)](https://ci.appveyor.com/project/galli-leo/radarr-usby1/branch/develop/artifacts)    |                                                                                                                                                                                |
-| Docker          | [![Docker release](https://img.shields.io/badge/linuxserver-radarr:latest-blue.svg?colorB=1488C6&maxAge=60&style=flat-square)](https://hub.docker.com/r/linuxserver/radarr)  | [![Docker nightly](https://img.shields.io/badge/linuxserver-radarr:nightly-blue.svg?colorB=1488C6&maxAge=60&style=flat-square)](https://hub.docker.com/r/linuxserver/radarr)                   | [![Docker aphrodite](https://img.shields.io/badge/linuxserver-radarr:preview-blue.svg?colorB=1488C6&maxAge=60&style=flat-square)](https://hub.docker.com/r/linuxserver/radarr) |
-| Docker          | [![Docker release](https://img.shields.io/badge/hotio-radarr:latest-blue.svg?colorB=1488C6&maxAge=60&style=flat-square)](https://hub.docker.com/r/hotio/radarr)              | [![Docker nightly](https://img.shields.io/badge/hotio-radarr:unstable-blue.svg?colorB=1488C6&maxAge=60&style=flat-square)](https://hub.docker.com/r/hotio/radarr)                              | [![Docker aphrodite](https://img.shields.io/badge/hotio-radarr:aphrodite-blue.svg?colorB=1488C6&maxAge=60&style=flat-square)](https://hub.docker.com/r/hotio/radarr)           |
+Each push to the "develop" branch creates a build on "nightly" release channel (release channel is the "branch" within radarr's settings), once we push a build to Github it will show up on "develop" release channel.
+
+
+| Release Channel Type    | Branch: develop (stable) (v0.2)                                                                                                                                                    | Branch: nightly (semi-unstable) (v3.0)                                                                                                                                                               |
+|-----------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| Binary Releases | [![GitHub Releases](https://img.shields.io/badge/downloads-releases-brightgreen.svg?maxAge=60&style=flat-square)](https://github.com/Radarr/Radarr/releases)                 |  [![Azure Build](https://img.shields.io/badge/downloads-Windows_X64-green.svg?maxAge=60&style=flat-square)](https://radarr.servarr.com/v1/update/nightly/updatefile?os=windows&runtime=netcore&arch=x64) <br> [![Azure Build](https://img.shields.io/badge/downloads-Linux_X64-green.svg?maxAge=60&style=flat-square)](https://radarr.servarr.com/v1/update/nightly/updatefile?os=linux&runtime=netcore&arch=x64) <br> [![Azure Build](https://img.shields.io/badge/downloads-Linux_ARM64-green.svg?maxAge=60&style=flat-square)](https://radarr.servarr.com/v1/update/nightly/updatefile?os=linux&runtime=netcore&arch=arm64) [![Azure Build](https://img.shields.io/badge/downloads-Linux_ARM-green.svg?maxAge=60&style=flat-square)](https://radarr.servarr.com/v1/update/nightly/updatefile?os=linux&runtime=netcore&arch=arm) <br> [![Azure Build](https://img.shields.io/badge/downloads-macOS-green.svg?maxAge=60&style=flat-square)](https://radarr.servarr.com/v1/update/nightly/updatefile?os=osx&runtime=netcore&arch=x64)                                                                                                                                                                    
+| Docker - lsio   | [![Docker release](https://img.shields.io/badge/linuxserver-radarr:latest-blue.svg?colorB=1488C6&maxAge=60&style=flat-square)](https://hub.docker.com/r/linuxserver/radarr)  | [![Docker nightly](https://img.shields.io/badge/linuxserver-radarr:nightly-blue.svg?colorB=1488C6&maxAge=60&style=flat-square)](https://hub.docker.com/r/linuxserver/radarr)                   |
+| Docker - hotio  | [![Docker release](https://img.shields.io/badge/hotio-radarr:latest-blue.svg?colorB=1488C6&maxAge=60&style=flat-square)](https://hub.docker.com/r/hotio/radarr)              | [![Docker nightly](https://img.shields.io/badge/hotio-radarr:nightly-blue.svg?colorB=1488C6&maxAge=60&style=flat-square)](https://hub.docker.com/r/hotio/radarr)                              | 
 
 ## Support
 
-[![Discord](https://img.shields.io/badge/discord-chat-7289DA.svg?maxAge=60&style=flat-square)](https://discord.gg/AD3UP37)
+[![Discord](https://img.shields.io/badge/discord-chat-r5wJPt9.svg?maxAge=60&style=flat-square)](https://discord.gg/r5wJPt9)
 [![Reddit](https://img.shields.io/badge/reddit-discussion-FF4500.svg?maxAge=60&style=flat-square)](https://www.reddit.com/r/radarr)
-[![Feathub](https://img.shields.io/badge/feathub-requests-lightgrey.svg?maxAge=60&style=flat-square)](http://feathub.com/Radarr/Radarr)
 [![GitHub](https://img.shields.io/badge/github-issues-red.svg?maxAge=60&style=flat-square)](https://github.com/Radarr/Radarr/issues)
 [![GitHub Wiki](https://img.shields.io/badge/github-wiki-181717.svg?maxAge=60&style=flat-square)](https://github.com/Radarr/Radarr/wiki)
 
@@ -72,18 +78,14 @@ Radarr is currently undergoing rapid development and pull requests are actively
 * New TorrentPotato Indexer
 * Torznab Indexer now supports Movies (Works well with [Jackett](https://github.com/Jackett/Jackett))
 * Scanning PreDB to know when a new release is available
-* Importing movies from various online sources, such as IMDb Watchlists (A complete list can be found [here](https://github.com/Radarr/Radarr/issues/114))
+* Importing movies from various online sources, such as IMDb Watchlists or Trakt (v3) (A complete list can be found [here](https://github.com/Radarr/Radarr/issues/114))
 * Full integration with Kodi, Plex (notification, library update)
-* And a beautiful UI
+* And a new beautiful UI (v3)
 * Importing Metadata such as trailers or subtitles
 * Adding metadata such as posters and information for Kodi and others to use
 * Advanced customization for profiles, such that Radarr will always download the copy you want
 
-### Planned Features
-
-See the [Roadmap blogpost](https://blog.radarr.video/development/update/2018/11/11/roadmap-update.html) for an overview of planned features.
-
-#### [Feature Requests](http://feathub.com/Radarr/Radarr)
+#### [Feature Requests](https://github.com/Radarr/Radarr/issues/new?assignees=&labels=feature+request&template=feature_request.md&title=)
 
 ## Configuring the Development Environment
 

azure-pipelines.yml

@@ -13,17 +13,17 @@ variables:
   buildName: '$(Build.SourceBranchName).$(radarrVersion)'
   sentryOrg: 'servarr'
   sentryUrl: 'https://sentry.servarr.com'
-  dotnetVersion: '3.1.302'
+  dotnetVersion: '3.1.401'
+  yarnCacheFolder: $(Pipeline.Workspace)/.yarn
 
 trigger:
   branches:
     include:
     - develop
-    - aphrodite
+    - master
 
 pr:
 - develop
-- aphrodite
 
 stages:
   - stage: Setup
@@ -39,7 +39,7 @@ stages:
         displayName: Set Build Name
       - bash: |
           if [[ $BUILD_REASON == "PullRequest" ]]; then
-          git diff origin/aphrodite...HEAD  --name-only | grep -E "^(src/|azure-pipelines.yml)"
+          git diff origin/develop...HEAD  --name-only | grep -E "^(src/|azure-pipelines.yml)"
           echo $? > not_backend_update
           else
           echo 0 > not_backend_update
@@ -68,6 +68,9 @@ stages:
 
       pool:
         vmImage: $(imageName)
+      variables:
+        # Disable stylecop here - linting errors get caught by the analyze task
+        EnableAnalyzers: 'false'
       steps:
       - checkout: self
         submodules: true
@@ -136,10 +139,19 @@ stages:
       - checkout: self
         submodules: true
         fetchDepth: 1
+      - task: Cache@2
+        inputs:
+          key: 'yarn | "$(osName)" | yarn.lock'
+          restoreKeys: |
+             yarn | "$(osName)"
+             yarn
+          path: $(yarnCacheFolder)
+        displayName: Cache Yarn packages
       - bash: ./build.sh --frontend
         displayName: Build Radarr Frontend
         env:
           FORCE_COLOR: 0
+          YARN_CACHE_FOLDER: $(yarnCacheFolder)
       - publish: $(outputFolder)
         artifact: '$(osName)Frontend'
         displayName: Publish Frontend
@@ -289,14 +301,22 @@ stages:
           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}"
-          sentry-cli releases deploys "${RELEASENAME}" new -e aphrodite
+          if [[ ${BUILD_SOURCEBRANCH} == "refs/heads/develop" ]]; then
+          sentry-cli releases deploys "${RELEASENAME}" new -e nightly
+          else
+          sentry-cli releases deploys "${RELEASENAME}" new -e production
+          fi
           if [ $? -gt 0 ]; then
             echo "##vso[task.logissue type=warning]Error uploading source maps."
           fi
           exit 0
         displayName: Publish Sentry Source Maps
-        continueOnError: true
-        condition: and(succeeded(), eq(variables['Build.SourceBranch'], 'refs/heads/aphrodite'))
+        condition: |
+          or
+          (
+            and(succeeded(), eq(variables['Build.SourceBranch'], 'refs/heads/develop')),
+            and(succeeded(), eq(variables['Build.SourceBranch'], 'refs/heads/master'))
+          )
         env:
           SENTRY_AUTH_TOKEN: $(sentryAuthTokenServarr)
           SENTRY_ORG: $(sentryOrg)
@@ -402,10 +422,6 @@ stages:
       condition: and(succeeded(), eq(dependencies.Prepare.outputs['setVar.backendNotUpdated'], '0'))
       strategy:
         matrix:
-          mono508:
-            testName: 'Mono 5.8'
-            artifactName: LinuxTests
-            containerImage: servarr/testimages:mono-5.8
           mono520:
             testName: 'Mono 5.20'
             artifactName: LinuxTests
@@ -555,11 +571,6 @@ stages:
       condition: and(succeeded(), eq(dependencies.Prepare.outputs['setVar.backendNotUpdated'], '0'))
       strategy:
         matrix:
-          mono508:
-            testName: 'Mono 5.8'
-            artifactName: LinuxTests
-            containerImage: servarr/testimages:mono-5.8
-            pattern: 'Radarr.**.linux.tar.gz'
           mono520:
             testName: 'Mono 5.20'
             artifactName: LinuxTests
@@ -577,7 +588,7 @@ stages:
             pattern: 'Radarr.**.linux.tar.gz'
           alpine:
             testName: 'Musl Net Core'
-            artifactName: LinuxCoreTests
+            artifactName: LinuxMuslCoreTests
             containerImage: servarr/testimages:alpine
             pattern: 'Radarr.**.linux-musl-core-x64.tar.gz'
       pool:
@@ -642,14 +653,14 @@ stages:
             failBuild: true
           Mac:
             osName: 'Mac'
-            imageName: 'macos-10.14' # Fails due to firefox not being installed on image
+            imageName: 'macos-10.14'
             pattern: 'Radarr.**.osx-core-x64.tar.gz'
-            failBuild: false
+            failBuild: true
           Windows:
             osName: 'Windows'
             imageName: 'windows-2019'
             pattern: 'Radarr.**.windows-core-x64.zip'
-            failBuild: $(failOnAutomationFailure)
+            failBuild: true
 
       pool:
         vmImage: $(imageName)
@@ -684,9 +695,9 @@ stages:
         displayName: Move Package Contents
       - bash: |
           if [[ $OSNAME == "Mac" ]]; then
-          url=https://github.com/mozilla/geckodriver/releases/download/v0.26.0/geckodriver-v0.26.0-macos.tar.gz
+          url=https://github.com/mozilla/geckodriver/releases/download/v0.27.0/geckodriver-v0.27.0-macos.tar.gz
           elif [[ $OSNAME == "Linux" ]]; then
-          url=https://github.com/mozilla/geckodriver/releases/download/v0.26.0/geckodriver-v0.26.0-linux64.tar.gz
+          url=https://github.com/mozilla/geckodriver/releases/download/v0.27.0/geckodriver-v0.27.0-linux64.tar.gz
           else
           echo "Unhandled OS"
           exit 1
@@ -699,7 +710,7 @@ stages:
       - bash: |
           chmod a+x ${TESTSFOLDER}/test.sh
           ${TESTSFOLDER}/test.sh ${OSNAME} Automation Test
-        displayName: Run Integration Tests
+        displayName: Run Automation Tests
       - task: PublishTestResults@2
         inputs:
           testResultsFormat: 'NUnit'
@@ -747,10 +758,19 @@ stages:
       - checkout: self
         submodules: true
         fetchDepth: 1
+      - task: Cache@2
+        inputs:
+          key: 'yarn | "$(osName)" | yarn.lock'
+          restoreKeys: |
+             yarn | "$(osName)"
+             yarn
+          path: $(yarnCacheFolder)
+        displayName: Cache Yarn packages
       - bash: ./build.sh --lint
         displayName: Lint Radarr Frontend
         env:
           FORCE_COLOR: 0
+          YARN_CACHE_FOLDER: $(yarnCacheFolder)
 
     - job: Analyze_Frontend
       displayName: Frontend

build.sh

@@ -235,7 +235,7 @@ PackageTests()
     # geckodriver.exe isn't copied by dotnet publish
     if [ "$runtime" = "win-x64" ];
     then
-        curl -Lso gecko.zip "https://github.com/mozilla/geckodriver/releases/download/v0.26.0/geckodriver-v0.26.0-win64.zip"
+        curl -Lso gecko.zip "https://github.com/mozilla/geckodriver/releases/download/v0.27.0/geckodriver-v0.27.0-win64.zip"
         unzip -o gecko.zip
         cp geckodriver.exe "$testPackageFolder/$framework/win-x64/publish"
     fi

frontend/.stylelintrc

@@ -75,7 +75,7 @@
     "function-parentheses-newline-inside": "never-multi-line",
     "function-parentheses-space-inside": "never",
     "function-url-quotes": "always",
-    "function-url-scheme-blacklist": [
+    "function-url-scheme-disallowed-list": [
       "data"
     ],
     "function-whitespace-after": "always",

frontend/gulp/webpack.js

@@ -7,6 +7,7 @@ const errorHandler = require('./helpers/errorHandler');
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const HtmlWebpackPluginHtmlTags = require('html-webpack-plugin/lib/html-tags');
 const TerserPlugin = require('terser-webpack-plugin');
 
 const uiFolder = 'UI';
@@ -14,7 +15,7 @@ const frontendFolder = path.join(__dirname, '..');
 const srcFolder = path.join(frontendFolder, 'src');
 const isProduction = process.argv.indexOf('--production') > -1;
 const isProfiling = isProduction && process.argv.indexOf('--profile') > -1;
-const inlineWebWorkers = true;
+const inlineWebWorkers = 'no-fallback';
 
 const distFolder = path.resolve(frontendFolder, '..', '_output', uiFolder);
 
@@ -32,14 +33,19 @@ const cssVarsFiles = [
 ].map(require.resolve);
 
 // Override the way HtmlWebpackPlugin injects the scripts
+// TODO: Find a better way to get these paths without
 HtmlWebpackPlugin.prototype.injectAssetsIntoHtml = function(html, assets, assetTags) {
-  const head = assetTags.head.map((v) => {
-    v.attributes = { rel: 'stylesheet', type: 'text/css', href: `/${v.attributes.href.replace('\\', '/')}` };
-    return this.createHtmlTag(v);
+  const head = assetTags.headTags.map((v) => {
+    const href = v.attributes.href
+      .replace('\\', '/')
+      .replace('%5C', '/');
+
+    v.attributes = { rel: 'stylesheet', type: 'text/css', href: `/${href}` };
+    return HtmlWebpackPluginHtmlTags.htmlTagObjectToString(v, this.options.xhtml);
   });
-  const body = assetTags.body.map((v) => {
+  const body = assetTags.bodyTags.map((v) => {
     v.attributes = { src: `/${v.attributes.src}` };
-    return this.createHtmlTag(v);
+    return HtmlWebpackPluginHtmlTags.htmlTagObjectToString(v, this.options.xhtml);
   });
 
   return html
@@ -125,9 +131,8 @@ const config = {
         use: {
           loader: 'worker-loader',
           options: {
-            name: '[name].js',
-            inline: inlineWebWorkers,
-            fallback: !inlineWebWorkers
+            filename: '[name].js',
+            inline: inlineWebWorkers
           }
         }
       },

frontend/jsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+      "target": "es6",
+      "checkJs": false,
+      "baseUrl": "src",
+      "jsx": "react",
+      "module": "commonjs",
+      "moduleResolution": "node",
+      "paths": {
+          "*": [
+              "*"
+          ]
+      }
+  },
+  "include": [
+      "./src/**/*"
+  ],
+  "exclude": [
+  ]
+}

frontend/src/Activity/Blacklist/Blacklist.js

@@ -33,7 +33,7 @@ class Blacklist extends Component {
     } = this.props;
 
     return (
-      <PageContent title="Blacklist">
+      <PageContent title={translate('Blacklist')}>
         <PageToolbar>
           <PageToolbarSection>
             <PageToolbarButton
@@ -65,13 +65,15 @@ class Blacklist extends Component {
 
           {
             !isFetching && !!error &&
-              <div>Unable to load blacklist</div>
+              <div>
+                {translate('UnableToLoadBlacklist')}
+              </div>
           }
 
           {
             isPopulated && !error && !items.length &&
               <div>
-                No history blacklist
+                {translate('NoHistory')}
               </div>
           }
 

frontend/src/Activity/Blacklist/BlacklistDetailsModal.js

@@ -8,6 +8,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 translate from 'Utilities/String/translate';
 
 class BlacklistDetailsModal extends Component {
 
@@ -39,19 +40,19 @@ class BlacklistDetailsModal extends Component {
           <ModalBody>
             <DescriptionList>
               <DescriptionListItem
-                title="Name"
+                title={translate('Name')}
                 data={sourceTitle}
               />
 
               <DescriptionListItem
-                title="Protocol"
+                title={translate('Protocol')}
                 data={protocol}
               />
 
               {
                 !!message &&
                   <DescriptionListItem
-                    title="Indexer"
+                    title={translate('Indexer')}
                     data={indexer}
                   />
               }
@@ -59,7 +60,7 @@ class BlacklistDetailsModal extends Component {
               {
                 !!message &&
                   <DescriptionListItem
-                    title="Message"
+                    title={translate('Message')}
                     data={message}
                   />
               }
@@ -68,7 +69,7 @@ class BlacklistDetailsModal extends Component {
 
           <ModalFooter>
             <Button onPress={onModalClose}>
-              Close
+              {translate('Close')}
             </Button>
           </ModalFooter>
         </ModalContent>

frontend/src/Activity/Blacklist/BlacklistRow.js

@@ -9,6 +9,7 @@ import MovieFormats from 'Movie/MovieFormats';
 import MovieLanguage from 'Movie/MovieLanguage';
 import MovieQuality from 'Movie/MovieQuality';
 import MovieTitleLink from 'Movie/MovieTitleLink';
+import translate from 'Utilities/String/translate';
 import BlacklistDetailsModal from './BlacklistDetailsModal';
 import styles from './BlacklistRow.css';
 
@@ -155,7 +156,7 @@ class BlacklistRow extends Component {
                   />
 
                   <IconButton
-                    title="Remove from blacklist"
+                    title={translate('RemoveFromBlacklist')}
                     name={icons.REMOVE}
                     kind={kinds.DANGER}
                     onPress={onRemovePress}

frontend/src/Activity/History/Details/HistoryDetails.js

@@ -7,6 +7,7 @@ import DescriptionListItemTitle from 'Components/DescriptionList/DescriptionList
 import Link from 'Components/Link/Link';
 import formatDateTime from 'Utilities/Date/formatDateTime';
 import formatAge from 'Utilities/Number/formatAge';
+import translate from 'Utilities/String/translate';
 import styles from './HistoryDetails.css';
 
 function HistoryDetails(props) {
@@ -35,14 +36,14 @@ function HistoryDetails(props) {
       <DescriptionList>
         <DescriptionListItem
           descriptionClassName={styles.description}
-          title="Name"
+          title={translate('Name')}
           data={sourceTitle}
         />
 
         {
           !!indexer &&
             <DescriptionListItem
-              title="Indexer"
+              title={translate('Indexer')}
               data={indexer}
             />
         }
@@ -51,7 +52,7 @@ function HistoryDetails(props) {
           !!releaseGroup &&
             <DescriptionListItem
               descriptionClassName={styles.description}
-              title="Release Group"
+              title={translate('ReleaseGroup')}
               data={releaseGroup}
             />
         }
@@ -72,7 +73,7 @@ function HistoryDetails(props) {
         {
           !!downloadClient &&
             <DescriptionListItem
-              title="Download Client"
+              title={translate('DownloadClient')}
               data={downloadClient}
             />
         }
@@ -80,7 +81,7 @@ function HistoryDetails(props) {
         {
           !!downloadId &&
             <DescriptionListItem
-              title="Grab ID"
+              title={translate('GrabID')}
               data={downloadId}
             />
         }
@@ -88,7 +89,7 @@ function HistoryDetails(props) {
         {
           !!indexer &&
             <DescriptionListItem
-              title="Age (when grabbed)"
+              title={translate('AgeWhenGrabbed')}
               data={formatAge(age, ageHours, ageMinutes)}
             />
         }
@@ -96,7 +97,7 @@ function HistoryDetails(props) {
         {
           !!publishedDate &&
             <DescriptionListItem
-              title="Published Date"
+              title={translate('PublishedDate')}
               data={formatDateTime(publishedDate, shortDateFormat, timeFormat, { includeSeconds: true })}
             />
         }
@@ -113,14 +114,14 @@ function HistoryDetails(props) {
       <DescriptionList>
         <DescriptionListItem
           descriptionClassName={styles.description}
-          title="Name"
+          title={translate('Name')}
           data={sourceTitle}
         />
 
         {
           !!message &&
             <DescriptionListItem
-              title="Message"
+              title={translate('Message')}
               data={message}
             />
         }
@@ -138,7 +139,7 @@ function HistoryDetails(props) {
       <DescriptionList>
         <DescriptionListItem
           descriptionClassName={styles.description}
-          title="Name"
+          title={translate('Name')}
           data={sourceTitle}
         />
 
@@ -146,7 +147,7 @@ function HistoryDetails(props) {
           !!droppedPath &&
             <DescriptionListItem
               descriptionClassName={styles.description}
-              title="Source"
+              title={translate('Source')}
               data={droppedPath}
             />
         }
@@ -155,7 +156,7 @@ function HistoryDetails(props) {
           !!importedPath &&
             <DescriptionListItem
               descriptionClassName={styles.description}
-              title="Imported To"
+              title={translate('ImportedTo')}
               data={importedPath}
             />
         }
@@ -187,12 +188,12 @@ function HistoryDetails(props) {
     return (
       <DescriptionList>
         <DescriptionListItem
-          title="Name"
+          title={translate('Name')}
           data={sourceTitle}
         />
 
         <DescriptionListItem
-          title="Reason"
+          title={translate('Reason')}
           data={reasonMessage}
         />
       </DescriptionList>
@@ -210,22 +211,22 @@ function HistoryDetails(props) {
     return (
       <DescriptionList>
         <DescriptionListItem
-          title="Source Path"
+          title={translate('SourcePath')}
           data={sourcePath}
         />
 
         <DescriptionListItem
-          title="Source Relative Path"
+          title={translate('SourceRelativePath')}
           data={sourceRelativePath}
         />
 
         <DescriptionListItem
-          title="Destination Path"
+          title={translate('DestinationPath')}
           data={path}
         />
 
         <DescriptionListItem
-          title="Destination Relative Path"
+          title={translate('DestinationRelativePath')}
           data={relativePath}
         />
       </DescriptionList>
@@ -241,14 +242,14 @@ function HistoryDetails(props) {
       <DescriptionList>
         <DescriptionListItem
           descriptionClassName={styles.description}
-          title="Name"
+          title={translate('Name')}
           data={sourceTitle}
         />
 
         {
           !!message &&
             <DescriptionListItem
-              title="Message"
+              title={translate('Message')}
               data={message}
             />
         }
@@ -260,7 +261,7 @@ function HistoryDetails(props) {
     <DescriptionList>
       <DescriptionListItem
         descriptionClassName={styles.description}
-        title="Name"
+        title={translate('Name')}
         data={sourceTitle}
       />
     </DescriptionList>

frontend/src/Activity/History/Details/HistoryDetailsConnector.js

@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
@@ -8,10 +7,10 @@ function createMapStateToProps() {
   return createSelector(
     createUISettingsSelector(),
     (uiSettings) => {
-      return _.pick(uiSettings, [
-        'shortDateFormat',
-        'timeFormat'
-      ]);
+      return {
+        shortDateFormat: uiSettings.shortDateFormat,
+        timeFormat: uiSettings.timeFormat
+      };
     }
   );
 }

frontend/src/Activity/History/Details/HistoryDetailsModal.js

@@ -8,6 +8,7 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import HistoryDetails from './HistoryDetails';
 import styles from './HistoryDetailsModal.css';
 
@@ -79,7 +80,7 @@ function HistoryDetailsModal(props) {
           <Button
             onPress={onModalClose}
           >
-            Close
+            {translate('Close')}
           </Button>
         </ModalFooter>
       </ModalContent>

frontend/src/Activity/History/History.js

@@ -43,7 +43,7 @@ class History extends Component {
     const hasError = error || moviesError;
 
     return (
-      <PageContent title="History">
+      <PageContent title={translate('History')}>
         <PageToolbar>
           <PageToolbarSection>
             <PageToolbarButton
@@ -83,7 +83,9 @@ class History extends Component {
 
           {
             !isFetchingAny && hasError &&
-              <div>Unable to load history</div>
+              <div>
+                {translate('UnableToLoadHistory')}
+              </div>
           }
 
           {

frontend/src/Activity/Queue/Queue.js

@@ -149,7 +149,7 @@ class Queue extends Component {
     const disableSelectedActions = selectedCount === 0;
 
     return (
-      <PageContent title="Queue">
+      <PageContent title={translate('Queue')}>
         <PageToolbar>
           <PageToolbarSection>
             <PageToolbarButton
@@ -162,7 +162,7 @@ class Queue extends Component {
             <PageToolbarSeparator />
 
             <PageToolbarButton
-              label="Grab Selected"
+              label={translate('GrabSelected')}
               iconName={icons.DOWNLOAD}
               isDisabled={disableSelectedActions || !isPendingSelected}
               isSpinning={isGrabbing}
@@ -170,7 +170,7 @@ class Queue extends Component {
             />
 
             <PageToolbarButton
-              label="Remove Selected"
+              label={translate('RemoveSelected')}
               iconName={icons.REMOVE}
               isDisabled={disableSelectedActions}
               isSpinning={isRemoving}

frontend/src/Activity/Queue/QueueDetails.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Icon from 'Components/Icon';
 import { icons, kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 
 function QueueDetails(props) {
   const {
@@ -10,20 +11,20 @@ function QueueDetails(props) {
     size,
     sizeleft,
     estimatedCompletionTime,
-    status: queueStatus,
+    status,
+    trackedDownloadState,
+    trackedDownloadStatus,
     errorMessage,
     progressBar
   } = props;
 
-  const status = queueStatus.toLowerCase();
-
-  const progress = (100 - sizeleft / size * 100);
+  const progress = size ? (100 - sizeleft / size * 100) : 0;
 
   if (status === 'pending') {
     return (
       <Icon
         name={icons.PENDING}
-        title={`Release will be processed ${moment(estimatedCompletionTime).fromNow()}`}
+        title={translate('ReleaseWillBeProcessedInterp', [moment(estimatedCompletionTime).fromNow()])}
       />
     );
   }
@@ -34,12 +35,40 @@ function QueueDetails(props) {
         <Icon
           name={icons.DOWNLOAD}
           kind={kinds.DANGER}
-          title={`Import failed: ${errorMessage}`}
+          title={translate('ImportFailedInterp', [errorMessage])}
         />
       );
     }
 
-    // TODO: show an icon when download is complete, but not imported yet?
+    if (trackedDownloadStatus === 'warning') {
+      return (
+        <Icon
+          name={icons.DOWNLOAD}
+          kind={kinds.WARNING}
+          title={'Downloaded - Unable to Import: check logs for details'}
+        />
+      );
+    }
+
+    if (trackedDownloadState === 'importPending') {
+      return (
+        <Icon
+          name={icons.DOWNLOAD}
+          kind={kinds.PURPLE}
+          title={`${translate('Downloaded')} - ${translate('WaitingToImport')}`}
+        />
+      );
+    }
+
+    if (trackedDownloadState === 'importing') {
+      return (
+        <Icon
+          name={icons.DOWNLOAD}
+          kind={kinds.PURPLE}
+          title={`${translate('Downloaded')} - ${translate('Importing')}`}
+        />
+      );
+    }
   }
 
   if (errorMessage) {
@@ -47,7 +76,7 @@ function QueueDetails(props) {
       <Icon
         name={icons.DOWNLOADING}
         kind={kinds.DANGER}
-        title={`Download failed: ${errorMessage}`}
+        title={translate('DownloadFailedInterp', [errorMessage])}
       />
     );
   }
@@ -57,7 +86,7 @@ function QueueDetails(props) {
       <Icon
         name={icons.DOWNLOADING}
         kind={kinds.DANGER}
-        title="Download failed: check download client for more details"
+        title={translate('DownloadFailedCheckDownloadClientForMoreDetails')}
       />
     );
   }
@@ -67,7 +96,7 @@ function QueueDetails(props) {
       <Icon
         name={icons.DOWNLOADING}
         kind={kinds.WARNING}
-        title="Download warning: check download client for more details"
+        title={translate('DownloadWarningCheckDownloadClientForMoreDetails')}
       />
     );
   }
@@ -76,7 +105,7 @@ function QueueDetails(props) {
     return (
       <Icon
         name={icons.DOWNLOADING}
-        title={`Movie is downloading - ${progress.toFixed(1)}% ${title}`}
+        title={translate('MovieIsDownloadingInterp', [progress.toFixed(1), title])}
       />
     );
   }
@@ -90,6 +119,8 @@ QueueDetails.propTypes = {
   sizeleft: PropTypes.number.isRequired,
   estimatedCompletionTime: PropTypes.string,
   status: PropTypes.string.isRequired,
+  trackedDownloadState: PropTypes.string.isRequired,
+  trackedDownloadStatus: PropTypes.string.isRequired,
   errorMessage: PropTypes.string,
   progressBar: PropTypes.node.isRequired
 };

frontend/src/Activity/Queue/QueueOptions.js

@@ -4,6 +4,7 @@ import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import { inputTypes } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 
 class QueueOptions extends Component {
 
@@ -54,13 +55,13 @@ class QueueOptions extends Component {
     return (
       <Fragment>
         <FormGroup>
-          <FormLabel>Show Unknown Movie Items</FormLabel>
+          <FormLabel>{translate('ShowUnknownMovieItems')}</FormLabel>
 
           <FormInputGroup
             type={inputTypes.CHECK}
             name="includeUnknownMovieItems"
             value={includeUnknownMovieItems}
-            helpText="Show items without a movie in the queue, this could include removed movie, movies or anything else in Radarr's category"
+            helpText={translate('IncludeUnknownMovieItemsHelpText')}
             onChange={this.onOptionChange}
           />
         </FormGroup>

frontend/src/Activity/Queue/QueueRow.js

@@ -15,6 +15,7 @@ import MovieLanguage from 'Movie/MovieLanguage';
 import MovieQuality from 'Movie/MovieQuality';
 import MovieTitleLink from 'Movie/MovieTitleLink';
 import formatBytes from 'Utilities/Number/formatBytes';
+import translate from 'Utilities/String/translate';
 import QueueStatusCell from './QueueStatusCell';
 import RemoveQueueItemModal from './RemoveQueueItemModal';
 import TimeleftCell from './TimeleftCell';
@@ -294,7 +295,7 @@ class QueueRow extends Component {
                   }
 
                   <SpinnerIconButton
-                    title="Remove from queue"
+                    title={translate('RemoveFromQueue')}
                     name={icons.REMOVE}
                     isSpinning={isRemoving}
                     onPress={this.onRemoveQueueItemPress}

frontend/src/Activity/Queue/QueueStatusCell.js

@@ -4,6 +4,7 @@ import Icon from 'Components/Icon';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import Popover from 'Components/Tooltip/Popover';
 import { icons, kinds, tooltipPositions } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import styles from './QueueStatusCell.css';
 
 function getDetailedPopoverBody(statusMessages) {
@@ -49,34 +50,34 @@ function QueueStatusCell(props) {
   // status === 'downloading'
   let iconName = icons.DOWNLOADING;
   let iconKind = kinds.DEFAULT;
-  let title = 'Downloading';
+  let title = translate('Downloading');
 
   if (status === 'paused') {
     iconName = icons.PAUSED;
-    title = 'Paused';
+    title = translate('Paused');
   }
 
   if (status === 'queued') {
     iconName = icons.QUEUED;
-    title = 'Queued';
+    title = translate('Queued');
   }
 
   if (status === 'completed') {
     iconName = icons.DOWNLOADED;
-    title = 'Downloaded';
+    title = translate('Downloaded');
 
     if (trackedDownloadState === 'importPending') {
-      title += ' - Waiting to Import';
+      title += ` - ${translate('WaitingToImport')}`;
       iconKind = kinds.PURPLE;
     }
 
     if (trackedDownloadState === 'importing') {
-      title += ' - Importing';
+      title += ` - ${translate('Importing')}`;
       iconKind = kinds.PURPLE;
     }
 
     if (trackedDownloadState === 'failedPending') {
-      title += ' - Waiting to Process';
+      title += ` - ${translate('WaitingToProcess')}`;
       iconKind = kinds.DANGER;
     }
   }
@@ -87,36 +88,37 @@ function QueueStatusCell(props) {
 
   if (status === 'delay') {
     iconName = icons.PENDING;
-    title = 'Pending';
+    title = translate('Pending');
   }
 
   if (status === 'DownloadClientUnavailable') {
     iconName = icons.PENDING;
     iconKind = kinds.WARNING;
-    title = 'Pending - Download client is unavailable';
+    title = `${translate('Pending')} - ${translate('DownloadClientUnavailable')}`;
   }
 
   if (status === 'failed') {
     iconName = icons.DOWNLOADING;
     iconKind = kinds.DANGER;
-    title = 'Download failed';
+    title = translate('DownloadFailed');
   }
 
   if (status === 'warning') {
     iconName = icons.DOWNLOADING;
     iconKind = kinds.WARNING;
-    title = `Download warning: ${errorMessage || 'check download client for more details'}`;
+    const warningMessage = errorMessage || translate('CheckDownloadClientForDetails');
+    title = translate('DownloadWarning', [warningMessage]);
   }
 
   if (hasError) {
     if (status === 'completed') {
       iconName = icons.DOWNLOAD;
       iconKind = kinds.DANGER;
-      title = `Import failed: ${sourceTitle}`;
+      title = translate('ImportFailed', [sourceTitle]);
     } else {
       iconName = icons.DOWNLOADING;
       iconKind = kinds.DANGER;
-      title = 'Download failed';
+      title = translate('DownloadFailed');
     }
   }
 
@@ -148,8 +150,8 @@ QueueStatusCell.propTypes = {
 };
 
 QueueStatusCell.defaultProps = {
-  trackedDownloadStatus: 'Ok',
-  trackedDownloadState: 'Downloading'
+  trackedDownloadStatus: translate('Ok'),
+  trackedDownloadState: translate('Downloading')
 };
 
 export default QueueStatusCell;

frontend/src/Activity/Queue/RemoveQueueItemModal.js

@@ -10,6 +10,7 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { inputTypes, kinds, sizes } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 
 class RemoveQueueItemModal extends Component {
 
@@ -89,25 +90,25 @@ class RemoveQueueItemModal extends Component {
             </div>
 
             <FormGroup>
-              <FormLabel>Remove From Download Client</FormLabel>
+              <FormLabel>{translate('RemoveFromDownloadClient')}</FormLabel>
 
               <FormInputGroup
                 type={inputTypes.CHECK}
                 name="remove"
                 value={remove}
-                helpTextWarning="Removing will remove the download and the file(s) from the download client."
+                helpTextWarning={translate('RemoveHelpTextWarning')}
                 isDisabled={!canIgnore}
                 onChange={this.onRemoveChange}
               />
             </FormGroup>
 
             <FormGroup>
-              <FormLabel>Blacklist Release</FormLabel>
+              <FormLabel>{translate('BlacklistRelease')}</FormLabel>
               <FormInputGroup
                 type={inputTypes.CHECK}
                 name="blacklist"
                 value={blacklist}
-                helpText="Starts a search for this movie again and prevents this release from being grabbed again"
+                helpText={translate('BlacklistHelpText')}
                 onChange={this.onBlacklistChange}
               />
             </FormGroup>
@@ -116,7 +117,7 @@ class RemoveQueueItemModal extends Component {
 
           <ModalFooter>
             <Button onPress={this.onModalClose}>
-              Close
+              {translate('Close')}
             </Button>
 
             <Button

frontend/src/Activity/Queue/RemoveQueueItemsModal.js

@@ -10,6 +10,7 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { inputTypes, kinds, sizes } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import styles from './RemoveQueueItemsModal.css';
 
 class RemoveQueueItemsModal extends Component {
@@ -90,13 +91,13 @@ class RemoveQueueItemsModal extends Component {
             </div>
 
             <FormGroup>
-              <FormLabel>Remove From Download Client</FormLabel>
+              <FormLabel>{translate('RemoveFromDownloadClient')}</FormLabel>
 
               <FormInputGroup
                 type={inputTypes.CHECK}
                 name="remove"
                 value={remove}
-                helpTextWarning="Removing will remove the download and the file(s) from the download client."
+                helpTextWarning={translate('RemoveHelpTextWarning')}
                 isDisabled={!canIgnore}
                 onChange={this.onRemoveChange}
               />
@@ -111,7 +112,7 @@ class RemoveQueueItemsModal extends Component {
                 type={inputTypes.CHECK}
                 name="blacklist"
                 value={blacklist}
-                helpText="Prevents Radarr from automatically grabbing this movie again"
+                helpText={translate('BlacklistHelpText')}
                 onChange={this.onBlacklistChange}
               />
             </FormGroup>
@@ -120,7 +121,7 @@ class RemoveQueueItemsModal extends Component {
 
           <ModalFooter>
             <Button onPress={this.onModalClose}>
-              Close
+              {translate('Close')}
             </Button>
 
             <Button

frontend/src/Activity/Queue/TimeleftCell.js

@@ -5,6 +5,7 @@ import formatTime from 'Utilities/Date/formatTime';
 import formatTimeSpan from 'Utilities/Date/formatTimeSpan';
 import getRelativeDate from 'Utilities/Date/getRelativeDate';
 import formatBytes from 'Utilities/Number/formatBytes';
+import translate from 'Utilities/String/translate';
 import styles from './TimeleftCell.css';
 
 function TimeleftCell(props) {
@@ -26,7 +27,7 @@ function TimeleftCell(props) {
     return (
       <TableRowCell
         className={styles.timeleft}
-        title={`Delaying download until ${date} at ${time}`}
+        title={translate('DelayingDownloadUntilInterp', [date, time])}
       >
         -
       </TableRowCell>
@@ -40,7 +41,7 @@ function TimeleftCell(props) {
     return (
       <TableRowCell
         className={styles.timeleft}
-        title={`Retrying download ${date} at ${time}`}
+        title={translate('RetryingDownloadInterp', [date, time])}
       >
         -
       </TableRowCell>

frontend/src/AddMovie/AddNewMovie/AddNewMovie.js

@@ -88,7 +88,7 @@ class AddNewMovie extends Component {
     const isFetching = this.state.isFetching;
 
     return (
-      <PageContent title="Add New Movie">
+      <PageContent title={translate('AddNewMovie')}>
         <PageContentBody>
           <div className={styles.searchContainer}>
             <div className={styles.searchIconContainer}>
@@ -127,7 +127,7 @@ class AddNewMovie extends Component {
             !isFetching && !!error ?
               <div className={styles.message}>
                 <div className={styles.helpText}>
-                  Failed to load search results, please try again.
+                  {translate('FailedLoadingSearchResults')}
                 </div>
                 <div>{getErrorMessage(error)}</div>
               </div> : null
@@ -152,11 +152,15 @@ class AddNewMovie extends Component {
           {
             !isFetching && !error && !items.length && !!term &&
               <div className={styles.message}>
-                <div className={styles.noResults}>Couldn't find any results for '{term}'</div>
-                <div>You can also search using TMDB ID or IMDB ID of a movie. eg. tmdb:71663</div>
+                <div className={styles.noResults}>
+                  {translate('CouldNotFindResults', [term])}
+                </div>
+                <div>
+                  {translate('YouCanAlsoSearch')}
+                </div>
                 <div>
                   <Link to="https://github.com/Radarr/Radarr/wiki/FAQ#why-cant-i-add-a-new-movie-when-i-know-the-tmdb-id">
-                    Why can't I find my movie?
+                    {translate('CantFindMovie')}
                   </Link>
                 </div>
               </div>
@@ -169,7 +173,9 @@ class AddNewMovie extends Component {
                 <div className={styles.helpText}>
                   {translate('AddNewMessage')}
                 </div>
-                <div>{translate('AddNewTmdbIdMessage')}</div>
+                <div>
+                  {translate('AddNewTmdbIdMessage')}
+                </div>
               </div>
           }
 
@@ -177,14 +183,14 @@ class AddNewMovie extends Component {
             !term && !hasExistingMovies ?
               <div className={styles.message}>
                 <div className={styles.noMoviesText}>
-                  You haven't added any movies yet, do you want to import some or all of your movies first?
+                  {translate('HaveNotAddedMovies')}
                 </div>
                 <div>
                   <Button
                     to="/add/import"
                     kind={kinds.PRIMARY}
                   >
-                    Import Existing Movies
+                    {translate('ImportExistingMovies')}
                   </Button>
                 </div>
               </div> :

frontend/src/AddMovie/AddNewMovie/AddNewMovieConnector.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { clearAddMovie, lookupMovie } from 'Store/Actions/addMovieActions';
 import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
-import { fetchNetImportExclusions } from 'Store/Actions/Settings/netImportExclusions';
+import { fetchImportExclusions } from 'Store/Actions/Settings/importExclusions';
 import parseUrl from 'Utilities/String/parseUrl';
 import AddNewMovie from './AddNewMovie';
 
@@ -29,7 +29,7 @@ const mapDispatchToProps = {
   lookupMovie,
   clearAddMovie,
   fetchRootFolders,
-  fetchNetImportExclusions
+  fetchImportExclusions
 };
 
 class AddNewMovieConnector extends Component {
@@ -45,7 +45,7 @@ class AddNewMovieConnector extends Component {
 
   componentDidMount() {
     this.props.fetchRootFolders();
-    this.props.fetchNetImportExclusions();
+    this.props.fetchImportExclusions();
   }
 
   componentWillUnmount() {
@@ -102,7 +102,7 @@ AddNewMovieConnector.propTypes = {
   lookupMovie: PropTypes.func.isRequired,
   clearAddMovie: PropTypes.func.isRequired,
   fetchRootFolders: PropTypes.func.isRequired,
-  fetchNetImportExclusions: PropTypes.func.isRequired
+  fetchImportExclusions: PropTypes.func.isRequired
 };
 
 export default connect(createMapStateToProps, mapDispatchToProps)(AddNewMovieConnector);

frontend/src/AddMovie/AddNewMovie/AddNewMovieModalContent.js

@@ -12,6 +12,7 @@ import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { inputTypes, kinds } from 'Helpers/Props';
 import MoviePoster from 'Movie/MoviePoster';
+import translate from 'Utilities/String/translate';
 import styles from './AddNewMovieModalContent.css';
 
 class AddNewMovieModalContent extends Component {
@@ -95,7 +96,7 @@ class AddNewMovieModalContent extends Component {
 
               <Form>
                 <FormGroup>
-                  <FormLabel>Root Folder</FormLabel>
+                  <FormLabel>{translate('RootFolder')}</FormLabel>
 
                   <FormInputGroup
                     type={inputTypes.ROOT_FOLDER_SELECT}
@@ -108,7 +109,7 @@ class AddNewMovieModalContent extends Component {
                       movieFolder: folder,
                       isWindows
                     }}
-                    helpText={`'${folder}' subfolder will be created automatically`}
+                    helpText={translate('SubfolderWillBeCreatedAutomaticallyInterp', [folder])}
                     onChange={onInputChange}
                     {...rootFolderPath}
                   />
@@ -116,7 +117,7 @@ class AddNewMovieModalContent extends Component {
 
                 <FormGroup>
                   <FormLabel>
-                    Monitor
+                    {translate('Monitor')}
                   </FormLabel>
 
                   <FormInputGroup
@@ -128,7 +129,7 @@ class AddNewMovieModalContent extends Component {
                 </FormGroup>
 
                 <FormGroup>
-                  <FormLabel>Minimum Availability</FormLabel>
+                  <FormLabel>{translate('MinimumAvailability')}</FormLabel>
 
                   <FormInputGroup
                     type={inputTypes.AVAILABILITY_SELECT}
@@ -139,7 +140,7 @@ class AddNewMovieModalContent extends Component {
                 </FormGroup>
 
                 <FormGroup>
-                  <FormLabel>Quality Profile</FormLabel>
+                  <FormLabel>{translate('QualityProfile')}</FormLabel>
 
                   <FormInputGroup
                     type={inputTypes.QUALITY_PROFILE_SELECT}
@@ -150,7 +151,7 @@ class AddNewMovieModalContent extends Component {
                 </FormGroup>
 
                 <FormGroup>
-                  <FormLabel>Tags</FormLabel>
+                  <FormLabel>{translate('Tags')}</FormLabel>
 
                   <FormInputGroup
                     type={inputTypes.TAG}
@@ -167,7 +168,7 @@ class AddNewMovieModalContent extends Component {
         <ModalFooter className={styles.modalFooter}>
           <label className={styles.searchForMissingMovieLabelContainer}>
             <span className={styles.searchForMissingMovieLabel}>
-              Start search for missing movie
+              {translate('StartSearchForMissingMovie')}
             </span>
 
             <CheckInput
@@ -185,7 +186,7 @@ class AddNewMovieModalContent extends Component {
             isSpinning={isAdding}
             onPress={this.onAddMoviePress}
           >
-            Add {title}
+            {translate('AddMovie')}
           </SpinnerButton>
         </ModalFooter>
       </ModalContent>

frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css

@@ -34,10 +34,20 @@
 
 .content {
   flex: 0 1 100%;
+  overflow: hidden;
+}
+
+.titleRow {
+  display: flex;
+}
+
+.titleContainer {
+  display: flex;
+  align-items: flex-end;
+  flex: 0 1 auto;
 }
 
 .title {
-  display: flex;
   font-weight: 300;
   font-size: 36px;
 }
@@ -47,10 +57,12 @@
   color: $disabledColor;
 }
 
-.externalLink {
-  margin-top: 5px;
-  margin-left: auto;
-  color: $textColor;
+.icons {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1 0 auto;
+  height: 55px;
 }
 
 .alreadyExistsIcon {
@@ -68,3 +80,15 @@
 .overview {
   margin-top: 20px;
 }
+
+.links {
+  margin-left: 8px;
+  pointer-events: all;
+}
+
+@media only screen and (max-width: $breakpointMedium) {
+  .titleRow {
+    justify-content: space-between;
+    overflow: hidden;
+  }
+}

frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js

@@ -4,8 +4,11 @@ import HeartRating from 'Components/HeartRating';
 import Icon from 'Components/Icon';
 import Label from 'Components/Label';
 import Link from 'Components/Link/Link';
-import { icons, kinds, sizes } from 'Helpers/Props';
+import Tooltip from 'Components/Tooltip/Tooltip';
+import { icons, kinds, sizes, tooltipPositions } from 'Helpers/Props';
+import MovieDetailsLinks from 'Movie/Details/MovieDetailsLinks';
 import MoviePoster from 'Movie/MoviePoster';
+import translate from 'Utilities/String/translate';
 import AddNewMovieModal from './AddNewMovieModal';
 import styles from './AddNewMovieSearchResult.css';
 
@@ -50,6 +53,7 @@ class AddNewMovieSearchResult extends Component {
     const {
       tmdbId,
       imdbId,
+      youTubeTrailerId,
       title,
       titleSlug,
       year,
@@ -90,69 +94,43 @@ class AddNewMovieSearchResult extends Component {
           }
 
           <div className={styles.content}>
-            <div className={styles.title}>
-              {title}
+            <div className={styles.titleRow}>
+              <div className={styles.titleContainer}>
+                <div className={styles.title}>
+                  {title}
 
-              {
-                !title.contains(year) && !!year &&
-                  <span className={styles.year}>({year})</span>
-              }
+                  {
+                    !title.contains(year) && !!year ?
+                      <span className={styles.year}>
+                        ({year})
+                      </span> :
+                      null
+                  }
+                </div>
+              </div>
 
-              {
-                isExistingMovie &&
-                  <Icon
-                    className={styles.alreadyExistsIcon}
-                    name={icons.CHECK_CIRCLE}
-                    size={36}
-                    title="Already in your library"
-                  />
-              }
+              <div className={styles.icons}>
 
-              {
-                isExclusionMovie &&
-                  <Icon
-                    className={styles.exclusionIcon}
-                    name={icons.DANGER}
-                    size={36}
-                    title="Movie is on Net Import Exclusion List"
-                  />
-              }
+                {
+                  isExistingMovie &&
+                    <Icon
+                      className={styles.alreadyExistsIcon}
+                      name={icons.CHECK_CIRCLE}
+                      size={36}
+                      title={translate('AlreadyInYourLibrary')}
+                    />
+                }
 
-              {
-                isSmallScreen ?
-                  null :
-                  <div className={styles.externalLink}>
-                    <Link
-                      to={`https://www.themoviedb.org/movie/${tmdbId}`}
-                      onPress={this.onExternalLinkPress}
-                    >
-                      <Label size={sizes.LARGE}>
-                        TMDb
-                      </Label>
-                    </Link>
-
-                    {
-                      imdbId &&
-                        <Link
-                          to={`https://www.imdb.com/title/${imdbId}`}
-                          onPress={this.onExternalLinkPress}
-                        >
-                          <Label size={sizes.LARGE}>
-                            IMDb
-                          </Label>
-                        </Link>
-                    }
-
-                    <Link
-                      to={`https://trakt.tv/search/tmdb/${tmdbId}?id_type=movie`}
-                      onPress={this.onExternalLinkPress}
-                    >
-                      <Label size={sizes.LARGE}>
-                        Trakt
-                      </Label>
-                    </Link>
-                  </div>
-              }
+                {
+                  isExclusionMovie &&
+                    <Icon
+                      className={styles.exclusionIcon}
+                      name={icons.DANGER}
+                      size={36}
+                      title={translate('MovieIsOnImportExclusionList')}
+                    />
+                }
+              </div>
             </div>
 
             <div>
@@ -170,6 +148,33 @@ class AddNewMovieSearchResult extends Component {
                   </Label>
               }
 
+              <Tooltip
+                anchor={
+                  <Label
+                    size={sizes.LARGE}
+                  >
+                    <Icon
+                      name={icons.EXTERNAL_LINK}
+                      size={13}
+                    />
+
+                    <span className={styles.links}>
+                      Links
+                    </span>
+                  </Label>
+                }
+                tooltip={
+                  <MovieDetailsLinks
+                    tmdbId={tmdbId}
+                    youTubeTrailerId={youTubeTrailerId}
+                    imdbId={imdbId}
+                  />
+                }
+                canFlip={true}
+                kind={kinds.INVERSE}
+                position={tooltipPositions.BOTTOM}
+              />
+
               {
                 status === 'ended' &&
                   <Label
@@ -181,42 +186,6 @@ class AddNewMovieSearchResult extends Component {
               }
             </div>
 
-            {
-              isSmallScreen ?
-                <div className={styles.externalLink}>
-                  <Link
-                    to={`https://www.themoviedb.org/movie/${tmdbId}`}
-                    onPress={this.onExternalLinkPress}
-                  >
-                    <Label size={sizes.LARGE}>
-                      TMDb
-                    </Label>
-                  </Link>
-
-                  {
-                    imdbId &&
-                      <Link
-                        to={`https://www.imdb.com/title/${imdbId}`}
-                        onPress={this.onExternalLinkPress}
-                      >
-                        <Label size={sizes.LARGE}>
-                          IMDb
-                        </Label>
-                      </Link>
-                  }
-
-                  <Link
-                    to={`https://trakt.tv/search/tmdb/${tmdbId}?id_type=movie`}
-                    onPress={this.onExternalLinkPress}
-                  >
-                    <Label size={sizes.LARGE}>
-                      Trakt
-                    </Label>
-                  </Link>
-                </div> :
-                null
-            }
-
             <div className={styles.overview}>
               {overview}
             </div>
@@ -241,6 +210,7 @@ class AddNewMovieSearchResult extends Component {
 AddNewMovieSearchResult.propTypes = {
   tmdbId: PropTypes.number.isRequired,
   imdbId: PropTypes.string,
+  youTubeTrailerId: PropTypes.string,
   title: PropTypes.string.isRequired,
   titleSlug: PropTypes.string.isRequired,
   year: PropTypes.number.isRequired,

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

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
+import translate from 'Utilities/String/translate';
 import getSelectedIds from 'Utilities/Table/getSelectedIds';
 import selectAll from 'Utilities/Table/selectAll';
 import toggleSelected from 'Utilities/Table/toggleSelected';
@@ -80,6 +81,7 @@ class ImportMovie extends Component {
       path,
       rootFoldersFetching,
       rootFoldersError,
+      rootFoldersPopulated,
       unmappedFolders
     } = this.props;
 
@@ -91,7 +93,7 @@ class ImportMovie extends Component {
     } = this.state;
 
     return (
-      <PageContent title="Import Movies">
+      <PageContent title={translate('ImportMovies')}>
         <PageContentBody
           registerScroller={this.setScrollerRef}
           onScroll={this.onScroll}
@@ -102,13 +104,16 @@ class ImportMovie extends Component {
 
           {
             !rootFoldersFetching && !!rootFoldersError ?
-              <div>Unable to load root folders</div> :
+              <div>
+                {translate('UnableToLoadRootFolders')}
+              </div> :
               null
           }
 
           {
             !rootFoldersError &&
             !rootFoldersFetching &&
+            rootFoldersPopulated &&
             !unmappedFolders.length ?
               <div>
                 All movies in {path} have been imported
@@ -119,6 +124,7 @@ class ImportMovie extends Component {
           {
             !rootFoldersError &&
             !rootFoldersFetching &&
+            rootFoldersPopulated &&
             !!unmappedFolders.length &&
             scroller ?
               <ImportMovieTableConnector

frontend/src/AddMovie/ImportMovie/Import/ImportMovieFooter.css

@@ -31,3 +31,7 @@
   margin: 0 10px 0 12px;
   text-align: left;
 }
+
+.importError {
+  margin-left: 10px;
+}

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

@@ -3,11 +3,14 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 // import CheckInput from 'Components/Form/CheckInput';
 import FormInputGroup from 'Components/Form/FormInputGroup';
+import Icon from 'Components/Icon';
 import Button from 'Components/Link/Button';
 import SpinnerButton from 'Components/Link/SpinnerButton';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContentFooter from 'Components/Page/PageContentFooter';
-import { inputTypes, kinds } from 'Helpers/Props';
+import Popover from 'Components/Tooltip/Popover';
+import { icons, inputTypes, kinds, tooltipPositions } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import styles from './ImportMovieFooter.css';
 
 const MIXED = 'mixed';
@@ -93,7 +96,10 @@ class ImportMovieFooter extends Component {
       isMonitorMixed,
       isQualityProfileIdMixed,
       isMinimumAvailabilityMixed,
+      hasUnsearchedItems,
+      importError,
       onImportPress,
+      onLookupPress,
       onCancelLookupPress
     } = this.props;
 
@@ -107,7 +113,7 @@ class ImportMovieFooter extends Component {
       <PageContentFooter>
         <div className={styles.inputContainer}>
           <div className={styles.label}>
-            Monitor
+            {translate('Monitor')}
           </div>
 
           <FormInputGroup
@@ -122,7 +128,7 @@ class ImportMovieFooter extends Component {
 
         <div className={styles.inputContainer}>
           <div className={styles.label}>
-            Minimum Availability
+            {translate('MinimumAvailability')}
           </div>
 
           <FormInputGroup
@@ -137,7 +143,7 @@ class ImportMovieFooter extends Component {
 
         <div className={styles.inputContainer}>
           <div className={styles.label}>
-            Quality Profile
+            {translate('QualityProfile')}
           </div>
 
           <FormInputGroup
@@ -163,31 +169,75 @@ class ImportMovieFooter extends Component {
               isDisabled={!selectedCount || isLookingUpMovie}
               onPress={onImportPress}
             >
-              Import {selectedCount} {selectedCount > 1 ? 'Movies' : 'Movie'}
+              {translate('Import')} {selectedCount} {selectedCount > 1 ? translate('Movies') : translate('Movie')}
             </SpinnerButton>
 
             {
-              isLookingUpMovie &&
+              isLookingUpMovie ?
                 <Button
                   className={styles.loadingButton}
                   kind={kinds.WARNING}
                   onPress={onCancelLookupPress}
                 >
-                  Cancel Processing
-                </Button>
+                  {translate('CancelProcessing')}
+                </Button> :
+                null
             }
 
             {
-              isLookingUpMovie &&
+              hasUnsearchedItems ?
+                <Button
+                  className={styles.loadingButton}
+                  kind={kinds.SUCCESS}
+                  onPress={onLookupPress}
+                >
+                  {translate('StartProcessing')}
+                </Button> :
+                null
+            }
+
+            {
+              isLookingUpMovie ?
                 <LoadingIndicator
                   className={styles.loading}
                   size={24}
-                />
+                /> :
+                null
             }
 
             {
-              isLookingUpMovie &&
-                'Processing Folders'
+              isLookingUpMovie ?
+                translate('ProcessingFolders') :
+                null
+            }
+
+            {
+              importError ?
+                <Popover
+                  anchor={
+                    <Icon
+                      className={styles.importError}
+                      name={icons.WARNING}
+                      kind={kinds.WARNING}
+                    />
+                  }
+                  title={translate('ImportErrors')}
+                  body={
+                    <ul>
+                      {
+                        importError.responseJSON.map((error, index) => {
+                          return (
+                            <li key={index}>
+                              {error.errorMessage}
+                            </li>
+                          );
+                        })
+                      }
+                    </ul>
+                  }
+                  position={tooltipPositions.RIGHT}
+                /> :
+                null
             }
           </div>
         </div>
@@ -206,8 +256,11 @@ ImportMovieFooter.propTypes = {
   isMonitorMixed: PropTypes.bool.isRequired,
   isQualityProfileIdMixed: PropTypes.bool.isRequired,
   isMinimumAvailabilityMixed: PropTypes.bool.isRequired,
+  hasUnsearchedItems: PropTypes.bool.isRequired,
+  importError: PropTypes.object,
   onInputChange: PropTypes.func.isRequired,
   onImportPress: PropTypes.func.isRequired,
+  onLookupPress: PropTypes.func.isRequired,
   onCancelLookupPress: PropTypes.func.isRequired
 };
 

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

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { cancelLookupMovie } from 'Store/Actions/importMovieActions';
+import { cancelLookupMovie, lookupUnsearchedMovies } from 'Store/Actions/importMovieActions';
 import ImportMovieFooter from './ImportMovieFooter';
 
 function isMixed(items, selectedIds, defaultValue, key) {
@@ -25,12 +25,14 @@ function createMapStateToProps() {
       const {
         isLookingUpMovie,
         isImporting,
-        items
+        items,
+        importError
       } = importMovie;
 
       const isMonitorMixed = isMixed(items, selectedIds, defaultMonitor, 'monitor');
       const isQualityProfileIdMixed = isMixed(items, selectedIds, defaultQualityProfileId, 'qualityProfileId');
       const isMinimumAvailabilityMixed = isMixed(items, selectedIds, defaultMinimumAvailability, 'minimumAvailability');
+      const hasUnsearchedItems = !isLookingUpMovie && items.some((item) => !item.isPopulated);
 
       return {
         selectedCount: selectedIds.length,
@@ -41,13 +43,16 @@ function createMapStateToProps() {
         defaultMinimumAvailability,
         isMonitorMixed,
         isQualityProfileIdMixed,
-        isMinimumAvailabilityMixed
+        isMinimumAvailabilityMixed,
+        importError,
+        hasUnsearchedItems
       };
     }
   );
 }
 
 const mapDispatchToProps = {
+  onLookupPress: lookupUnsearchedMovies,
   onCancelLookupPress: cancelLookupMovie
 };
 

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

@@ -3,6 +3,7 @@ import React from 'react';
 import VirtualTableHeader from 'Components/Table/VirtualTableHeader';
 import VirtualTableHeaderCell from 'Components/Table/VirtualTableHeaderCell';
 import VirtualTableSelectAllHeaderCell from 'Components/Table/VirtualTableSelectAllHeaderCell';
+import translate from 'Utilities/String/translate';
 import styles from './ImportMovieHeader.css';
 
 function ImportMovieHeader(props) {
@@ -24,35 +25,35 @@ function ImportMovieHeader(props) {
         className={styles.folder}
         name="folder"
       >
-        Folder
+        {translate('Folder')}
       </VirtualTableHeaderCell>
 
       <VirtualTableHeaderCell
         className={styles.monitor}
         name="monitor"
       >
-        Monitor
+        {translate('Monitor')}
       </VirtualTableHeaderCell>
 
       <VirtualTableHeaderCell
         className={styles.minimumAvailability}
         name="minimumAvailability"
       >
-        Min Availability
+        {translate('MinAvailability')}
       </VirtualTableHeaderCell>
 
       <VirtualTableHeaderCell
         className={styles.qualityProfile}
         name="qualityProfileId"
       >
-        Quality Profile
+        {translate('QualityProfile')}
       </VirtualTableHeaderCell>
 
       <VirtualTableHeaderCell
         className={styles.movie}
         name="movie"
       >
-        Movie
+        {translate('Movie')}
       </VirtualTableHeaderCell>
     </VirtualTableHeader>
   );

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

@@ -9,6 +9,7 @@ import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import Portal from 'Components/Portal';
 import { icons, kinds } from 'Helpers/Props';
 import getUniqueElememtId from 'Utilities/getUniqueElementId';
+import translate from 'Utilities/String/translate';
 import ImportMovieSearchResultConnector from './ImportMovieSearchResultConnector';
 import ImportMovieTitle from './ImportMovieTitle';
 import styles from './ImportMovieSelectMovie.css';
@@ -174,7 +175,7 @@ class ImportMovieSelectMovie extends Component {
                         kind={kinds.WARNING}
                       />
 
-                      No match found!
+                      {translate('NoMatchFound')}
                     </div> :
                     null
                 }
@@ -189,7 +190,7 @@ class ImportMovieSelectMovie extends Component {
                         kind={kinds.WARNING}
                       />
 
-                      Search failed, please try again later.
+                      {translate('SearchFailedPleaseTryAgainLater')}
                     </div> :
                     null
                 }

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

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Label from 'Components/Label';
 import { kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import styles from './ImportMovieTitle.css';
 
 function ImportMovieTitle(props) {
@@ -33,7 +34,7 @@ function ImportMovieTitle(props) {
           <Label
             kind={kinds.WARNING}
           >
-            Existing
+            {translate('Existing')}
           </Label>
       }
     </div>

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

@@ -6,6 +6,7 @@ import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
 import { icons } from 'Helpers/Props';
 import formatBytes from 'Utilities/Number/formatBytes';
+import translate from 'Utilities/String/translate';
 import styles from './ImportMovieRootFolderRow.css';
 
 function ImportMovieRootFolderRow(props) {
@@ -40,7 +41,7 @@ function ImportMovieRootFolderRow(props) {
 
       <TableRowCell className={styles.actions}>
         <IconButton
-          title="Remove root folder"
+          title={translate('RemoveRootFolder')}
           name={icons.REMOVE}
           onPress={onDeletePress}
         />

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

@@ -17,17 +17,17 @@ import styles from './ImportMovieSelectFolder.css';
 const rootFolderColumns = [
   {
     name: 'path',
-    label: 'Path',
+    label: translate('Path'),
     isVisible: true
   },
   {
     name: 'freeSpace',
-    label: 'Free Space',
+    label: translate('FreeSpace'),
     isVisible: true
   },
   {
     name: 'unmappedFolders',
-    label: 'Unmapped Folders',
+    label: translate('UnmappedFolders'),
     isVisible: true
   },
   {
@@ -77,7 +77,7 @@ class ImportMovieSelectFolder extends Component {
     } = this.props;
 
     return (
-      <PageContent title="Import Movies">
+      <PageContent title={translate('ImportMovies')}>
         <PageContentBody>
           {
             isFetching && !isPopulated &&
@@ -86,7 +86,9 @@ class ImportMovieSelectFolder extends Component {
 
           {
             !isFetching && !!error &&
-              <div>Unable to load root folders</div>
+              <div>
+                {translate('UnableToLoadRootFolders')}
+              </div>
           }
 
           {
@@ -99,19 +101,15 @@ class ImportMovieSelectFolder extends Component {
                 <div className={styles.tips}>
                   {translate('ImportTipsMessage')}
                   <ul>
-                    <li className={styles.tip}>
-                      Make sure that your files include the quality in their filenames. eg. <span className={styles.code}>movie.2008.bluray.mkv</span>
-                    </li>
-                    <li className={styles.tip}>
-                      Point Radarr to the folder containing all of your movies, not a specific one. eg. <span className={styles.code}>"{isWindows ? 'C:\\movies' : '/movies'}"</span> and not <span className={styles.code}>"{isWindows ? 'C:\\movies\\the matrix' : '/movies/the matrix'}"</span>
-                    </li>
+                    <li className={styles.tip} dangerouslySetInnerHTML={{ __html: translate('ImportIncludeQuality', ['<code>movie.2008.bluray.mkv</code>']) }} />
+                    <li className={styles.tip} dangerouslySetInnerHTML={{ __html: translate('ImportRootPath', [`<code>${isWindows ? 'C:\\movies' : '/movies'}</code>`, `<code>${isWindows ? 'C:\\movies\\the matrix' : '/movies/the matrix'}</code>`]) }} />
                   </ul>
                 </div>
 
                 {
                   items.length > 0 ?
                     <div className={styles.recentFolders}>
-                      <FieldSet legend="Recent Folders">
+                      <FieldSet legend={translate('RecentFolders')}>
                         <Table
                           columns={rootFolderColumns}
                         >
@@ -156,7 +154,7 @@ class ImportMovieSelectFolder extends Component {
                           className={styles.importButtonIcon}
                           name={icons.DRIVE}
                         />
-                        Start Import
+                        {translate('StartImport')}
                       </Button>
                     </div>
                 }

frontend/src/App/AppRoutes.js

@@ -15,10 +15,10 @@ import MovieIndexConnector from 'Movie/Index/MovieIndexConnector';
 import CustomFormatSettingsConnector from 'Settings/CustomFormats/CustomFormatSettingsConnector';
 import DownloadClientSettingsConnector from 'Settings/DownloadClients/DownloadClientSettingsConnector';
 import GeneralSettingsConnector from 'Settings/General/GeneralSettingsConnector';
+import ImportListSettingsConnector from 'Settings/ImportLists/ImportListSettingsConnector';
 import IndexerSettingsConnector from 'Settings/Indexers/IndexerSettingsConnector';
 import MediaManagementConnector from 'Settings/MediaManagement/MediaManagementConnector';
 import MetadataSettings from 'Settings/Metadata/MetadataSettings';
-import NetImportSettingsConnector from 'Settings/NetImport/NetImportSettingsConnector';
 import NotificationSettings from 'Settings/Notifications/NotificationSettings';
 import Profiles from 'Settings/Profiles/Profiles';
 import Quality from 'Settings/Quality/Quality';
@@ -156,8 +156,8 @@ function AppRoutes(props) {
       />
 
       <Route
-        path="/settings/netimports"
-        component={NetImportSettingsConnector}
+        path="/settings/importlists"
+        component={ImportListSettingsConnector}
       />
 
       <Route

frontend/src/App/AppUpdatedModalContent.js

@@ -8,6 +8,7 @@ import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { kinds } from 'Helpers/Props';
 import UpdateChanges from 'System/Updates/UpdateChanges';
+import translate from 'Utilities/String/translate';
 import styles from './AppUpdatedModalContent.css';
 
 function AppUpdatedModalContent(props) {
@@ -49,12 +50,12 @@ function AppUpdatedModalContent(props) {
                     </div>
 
                     <UpdateChanges
-                      title="New"
+                      title={translate('New')}
                       changes={update.changes.new}
                     />
 
                     <UpdateChanges
-                      title="Fixed"
+                      title={translate('Fixed')}
                       changes={update.changes.fixed}
                     />
                   </div>

frontend/src/App/ConnectionLostModal.js

@@ -7,6 +7,7 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import styles from './ConnectionLostModal.css';
 
 function ConnectionLostModal(props) {
@@ -22,16 +23,16 @@ function ConnectionLostModal(props) {
     >
       <ModalContent onModalClose={onModalClose}>
         <ModalHeader>
-          Connnection Lost
+          {translate('ConnectionLost')}
         </ModalHeader>
 
         <ModalBody>
           <div>
-            Radarr has lost it's connection to the backend and will need to be reloaded to restore functionality.
+            {translate('ConnectionLostMessage')}
           </div>
 
           <div className={styles.automatic}>
-            Radarr will try to connect automatically, or you can click reload below.
+            {translate('ConnectionLostAutomaticMessage')}
           </div>
         </ModalBody>
         <ModalFooter>
@@ -39,7 +40,7 @@ function ConnectionLostModal(props) {
             kind={kinds.PRIMARY}
             onPress={onModalClose}
           >
-            Reload
+            {translate('Reload')}
           </Button>
         </ModalFooter>
       </ModalContent>

frontend/src/Calendar/Agenda/Agenda.js

@@ -6,9 +6,38 @@ import styles from './Agenda.css';
 
 function Agenda(props) {
   const {
-    items
+    items,
+    start,
+    end
   } = props;
 
+  const startDateParsed = Date.parse(start);
+  const endDateParsed = Date.parse(end);
+
+  items.forEach((item) => {
+    const cinemaDateParsed = Date.parse(item.inCinemas);
+    const digitalDateParsed = Date.parse(item.digitalRelease);
+    const physicalDateParsed = Date.parse(item.physicalRelease);
+    const dates = [];
+
+    if (cinemaDateParsed > 0 && cinemaDateParsed >= startDateParsed && cinemaDateParsed <= endDateParsed) {
+      dates.push(cinemaDateParsed);
+    }
+    if (digitalDateParsed > 0 && digitalDateParsed >= startDateParsed && digitalDateParsed <= endDateParsed) {
+      dates.push(digitalDateParsed);
+    }
+    if (physicalDateParsed > 0 && physicalDateParsed >= startDateParsed && physicalDateParsed <= endDateParsed) {
+      dates.push(physicalDateParsed);
+    }
+
+    item.sortDate = Math.min(...dates);
+    item.cinemaDateParsed = cinemaDateParsed;
+    item.digitalDateParsed = digitalDateParsed;
+    item.physicalDateParsed = physicalDateParsed;
+  });
+
+  items.sort((a, b) => ((a.sortDate > b.sortDate) ? 1 : -1));
+
   return (
     <div className={styles.agenda}>
       {
@@ -32,7 +61,9 @@ function Agenda(props) {
 }
 
 Agenda.propTypes = {
-  items: PropTypes.arrayOf(PropTypes.object).isRequired
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  start: PropTypes.string.isRequired,
+  end: PropTypes.string.isRequired
 };
 
 export default Agenda;

frontend/src/Calendar/Agenda/AgendaEvent.css

@@ -10,6 +10,10 @@
   }
 }
 
+.link {
+  composes: link from '~Calendar/Events/CalendarEvent.css';
+}
+
 .eventWrapper {
   display: flex;
   flex: 1 0 1px;
@@ -30,7 +34,8 @@
   border: none !important;
 }
 
-.movieTitle {
+.movieTitle,
+.genres {
   @add-mixin truncate;
 
   flex: 0 1 300px;
@@ -61,6 +66,10 @@
   composes: missing from '~Calendar/Events/CalendarEvent.css';
 }
 
+.unreleased {
+  composes: unreleased from '~Calendar/Events/CalendarEvent.css';
+}
+
 @media only screen and (max-width: $breakpointSmall) {
   .event {
     flex-direction: column;
@@ -81,3 +90,7 @@
     flex: 0 0 100%;
   }
 }
+
+.dateIcon {
+  width: 25px;
+}

frontend/src/Calendar/Agenda/AgendaEvent.js

@@ -7,7 +7,7 @@ import getStatusStyle from 'Calendar/getStatusStyle';
 import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
 import { icons, kinds } from 'Helpers/Props';
-import MovieTitleLink from 'Movie/MovieTitleLink';
+import translate from 'Utilities/String/translate';
 import styles from './AgendaEvent.css';
 
 class AgendaEvent extends Component {
@@ -41,35 +41,69 @@ class AgendaEvent extends Component {
       movieFile,
       title,
       titleSlug,
+      genres,
       isAvailable,
       inCinemas,
+      digitalRelease,
+      physicalRelease,
       monitored,
       hasFile,
       grabbed,
       queueItem,
       showDate,
+      showMovieInformation,
       showCutoffUnmetIcon,
       longDateFormat,
-      colorImpairedMode
+      colorImpairedMode,
+      cinemaDateParsed,
+      digitalDateParsed,
+      physicalDateParsed,
+      sortDate
     } = this.props;
 
-    const startTime = moment(inCinemas);
+    let startTime = null;
+    let releaseIcon = null;
+
+    if (physicalDateParsed === sortDate) {
+      startTime = physicalRelease;
+      releaseIcon = icons.DISC;
+    }
+
+    if (digitalDateParsed === sortDate) {
+      startTime = digitalRelease;
+      releaseIcon = icons.MOVIE_FILE;
+    }
+
+    if (cinemaDateParsed === sortDate) {
+      startTime = inCinemas;
+      releaseIcon = icons.IN_CINEMAS;
+    }
+
+    startTime = moment(startTime);
     const downloading = !!(queueItem || grabbed);
     const isMonitored = monitored;
     const statusStyle = getStatusStyle(hasFile, downloading, isAvailable, isMonitored);
+    const joinedGenres = genres.slice(0, 2).join(', ');
+    const link = `/movie/${titleSlug}`;
 
     return (
       <div>
         <Link
-          className={styles.event}
-          component="div"
-          onPress={this.onPress}
+          className={classNames(
+            styles.event,
+            styles.link
+          )}
+          to={link}
         >
+          <div className={styles.dateIcon}>
+            <Icon
+              name={releaseIcon}
+              kind={kinds.DEFAULT}
+            />
+          </div>
+
           <div className={styles.date}>
-            {
-              showDate &&
-                startTime.format(longDateFormat)
-            }
+            {(showDate) ? startTime.format(longDateFormat) : null}
           </div>
 
           <div
@@ -80,12 +114,16 @@ class AgendaEvent extends Component {
             )}
           >
             <div className={styles.movieTitle}>
-              <MovieTitleLink
-                titleSlug={titleSlug}
-                title={title}
-              />
+              {title}
             </div>
 
+            {
+              showMovieInformation &&
+                <div className={styles.genres}>
+                  {joinedGenres}
+                </div>
+            }
+
             {
               !!queueItem &&
                 <span className={styles.statusIcon}>
@@ -100,7 +138,7 @@ class AgendaEvent extends Component {
                 <Icon
                   className={styles.statusIcon}
                   name={icons.DOWNLOADING}
-                  title="Movie is downloading"
+                  title={translate('MovieIsDownloading')}
                 />
             }
 
@@ -112,7 +150,7 @@ class AgendaEvent extends Component {
                   className={styles.statusIcon}
                   name={icons.MOVIE_FILE}
                   kind={kinds.WARNING}
-                  title="Quality cutoff has not been met"
+                  title={translate('QualityCutoffHasNotBeenMet')}
                 />
             }
           </div>
@@ -127,17 +165,29 @@ AgendaEvent.propTypes = {
   movieFile: PropTypes.object,
   title: PropTypes.string.isRequired,
   titleSlug: PropTypes.string.isRequired,
+  genres: PropTypes.arrayOf(PropTypes.string).isRequired,
   isAvailable: PropTypes.bool.isRequired,
   inCinemas: PropTypes.string,
+  digitalRelease: PropTypes.string,
+  physicalRelease: PropTypes.string,
   monitored: PropTypes.bool.isRequired,
   hasFile: PropTypes.bool.isRequired,
   grabbed: PropTypes.bool,
   queueItem: PropTypes.object,
   showDate: PropTypes.bool.isRequired,
+  showMovieInformation: PropTypes.bool.isRequired,
   showCutoffUnmetIcon: PropTypes.bool.isRequired,
   timeFormat: PropTypes.string.isRequired,
   longDateFormat: PropTypes.string.isRequired,
-  colorImpairedMode: PropTypes.bool.isRequired
+  colorImpairedMode: PropTypes.bool.isRequired,
+  cinemaDateParsed: PropTypes.number,
+  digitalDateParsed: PropTypes.number,
+  physicalDateParsed: PropTypes.number,
+  sortDate: PropTypes.number
+};
+
+AgendaEvent.defaultProps = {
+  genres: []
 };
 
 export default AgendaEvent;

frontend/src/Calendar/Calendar.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import translate from 'Utilities/String/translate';
 import AgendaConnector from './Agenda/AgendaConnector';
 import * as calendarViews from './calendarViews';
 import CalendarDaysConnector from './Day/CalendarDaysConnector';
@@ -30,7 +31,9 @@ class Calendar extends Component {
 
         {
           !isFetching && !!error &&
-            <div>Unable to load the calendar</div>
+            <div>
+              {translate('UnableToLoadTheCalendar')}
+            </div>
         }
 
         {

frontend/src/Calendar/CalendarConnector.js

@@ -76,16 +76,15 @@ class CalendarConnector extends Component {
     } = this.props;
 
     if (hasDifferentItems(prevProps.items, items)) {
-      const movieIds = selectUniqueIds(items, 'id');
       const movieFileIds = selectUniqueIds(items, 'movieFileId');
 
-      if (items.length) {
-        this.props.fetchQueueDetails({ movieIds });
-      }
-
       if (movieFileIds.length) {
         this.props.fetchMovieFiles({ movieFileIds });
       }
+
+      if (items.length) {
+        this.props.fetchQueueDetails();
+      }
     }
 
     if (prevProps.time !== time) {

frontend/src/Calendar/CalendarPage.js

@@ -98,7 +98,7 @@ class CalendarPage extends Component {
     const isMeasured = this.state.width > 0;
 
     return (
-      <PageContent title="Calendar">
+      <PageContent title={translate('Calendar')}>
         <PageToolbar>
           <PageToolbarSection>
             <PageToolbarButton
@@ -110,7 +110,7 @@ class CalendarPage extends Component {
             <PageToolbarSeparator />
 
             <PageToolbarButton
-              label={translate('RssSync')}
+              label={translate('RSSSync')}
               iconName={icons.RSS}
               isSpinning={isRssSyncExecuting}
               onPress={onRssSyncPress}

frontend/src/Calendar/Events/CalendarEvent.js

@@ -6,6 +6,7 @@ import getStatusStyle from 'Calendar/getStatusStyle';
 import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
 import { icons, kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import CalendarEventQueueDetails from './CalendarEventQueueDetails';
 import styles from './CalendarEvent.css';
 
@@ -85,7 +86,7 @@ class CalendarEvent extends Component {
                 <Icon
                   className={styles.statusIcon}
                   name={icons.DOWNLOADING}
-                  title="movie is downloading"
+                  title={translate('MovieIsDownloading')}
                 />
             }
 
@@ -97,7 +98,7 @@ class CalendarEvent extends Component {
                   className={styles.statusIcon}
                   name={icons.MOVIE_FILE}
                   kind={kinds.WARNING}
-                  title="Quality cutoff has not been met"
+                  title={translate('QualityCutoffHasNotBeenMet')}
                 />
             }
           </div>

frontend/src/Calendar/Events/CalendarEventQueueDetails.js

@@ -3,6 +3,7 @@ import React from 'react';
 import QueueDetails from 'Activity/Queue/QueueDetails';
 import CircularProgressBar from 'Components/CircularProgressBar';
 import colors from 'Styles/Variables/colors';
+import translate from 'Utilities/String/translate';
 
 function CalendarEventQueueDetails(props) {
   const {
@@ -11,10 +12,12 @@ function CalendarEventQueueDetails(props) {
     sizeleft,
     estimatedCompletionTime,
     status,
+    trackedDownloadState,
+    trackedDownloadStatus,
     errorMessage
   } = props;
 
-  const progress = (100 - sizeleft / size * 100);
+  const progress = size ? (100 - sizeleft / size * 100) : 0;
 
   return (
     <QueueDetails
@@ -23,9 +26,11 @@ function CalendarEventQueueDetails(props) {
       sizeleft={sizeleft}
       estimatedCompletionTime={estimatedCompletionTime}
       status={status}
+      trackedDownloadState={trackedDownloadState}
+      trackedDownloadStatus={trackedDownloadStatus}
       errorMessage={errorMessage}
       progressBar={
-        <div title={`Movie is downloading - ${progress.toFixed(1)}% ${title}`}>
+        <div title={translate('MovieIsDownloadingInterp', [progress.toFixed(1), title])}>
           <CircularProgressBar
             progress={progress}
             size={20}
@@ -44,6 +49,8 @@ CalendarEventQueueDetails.propTypes = {
   sizeleft: PropTypes.number.isRequired,
   estimatedCompletionTime: PropTypes.string,
   status: PropTypes.string.isRequired,
+  trackedDownloadState: PropTypes.string.isRequired,
+  trackedDownloadStatus: PropTypes.string.isRequired,
   errorMessage: PropTypes.string
 };
 

frontend/src/Calendar/Header/CalendarHeader.js

@@ -24,7 +24,7 @@ function getTitle(time, start, end, view, longDateFormat) {
   } else if (view === 'month') {
     return timeMoment.format('MMMM YYYY');
   } else if (view === 'agenda') {
-    return 'Agenda';
+    return `Agenda: ${startMoment.format('MMM D')} - ${endMoment.format('MMM D')}`;
   }
 
   let startFormat = 'MMM D YYYY';

frontend/src/Calendar/Header/CalendarHeaderConnector.js

@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
@@ -14,19 +13,16 @@ function createMapStateToProps() {
     createDimensionsSelector(),
     createUISettingsSelector(),
     (calendar, dimensions, uiSettings) => {
-      const result = _.pick(calendar, [
-        'isFetching',
-        'view',
-        'time',
-        'start',
-        'end'
-      ]);
-
-      result.isSmallScreen = dimensions.isSmallScreen;
-      result.collapseViewButtons = dimensions.isLargeScreen;
-      result.longDateFormat = uiSettings.longDateFormat;
-
-      return result;
+      return {
+        isFetching: calendar.isFetching,
+        view: calendar.view,
+        time: calendar.time,
+        start: calendar.start,
+        end: calendar.end,
+        isSmallScreen: dimensions.isSmallScreen,
+        collapseViewButtons: dimensions.isLargeScreen,
+        longDateFormat: uiSettings.longDateFormat
+      };
     }
   );
 }

frontend/src/Calendar/Options/CalendarOptionsModalContent.js

@@ -12,6 +12,7 @@ import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { inputTypes } from 'Helpers/Props';
 import { firstDayOfWeekOptions, timeFormatOptions, weekColumnOptions } from 'Settings/UI/UISettings';
+import translate from 'Utilities/String/translate';
 
 class CalendarOptionsModalContent extends Component {
 
@@ -110,38 +111,38 @@ class CalendarOptionsModalContent extends Component {
         </ModalHeader>
 
         <ModalBody>
-          <FieldSet legend="Local">
+          <FieldSet legend={translate('Local')}>
             <Form>
               <FormGroup>
-                <FormLabel>Show Movie Information</FormLabel>
+                <FormLabel>{translate('ShowMovieInformation')}</FormLabel>
 
                 <FormInputGroup
                   type={inputTypes.CHECK}
                   name="showMovieInformation"
                   value={showMovieInformation}
-                  helpText="Show movie genres and certification"
+                  helpText={translate('ShowMovieInformationHelpText')}
                   onChange={this.onOptionInputChange}
                 />
               </FormGroup>
 
               <FormGroup>
-                <FormLabel>Icon for Cutoff Unmet</FormLabel>
+                <FormLabel>{translate('IconForCutoffUnmet')}</FormLabel>
 
                 <FormInputGroup
                   type={inputTypes.CHECK}
                   name="showCutoffUnmetIcon"
                   value={showCutoffUnmetIcon}
-                  helpText="Show icon for files when the cutoff hasn't been met"
+                  helpText={translate('ShowCutoffUnmetIconHelpText')}
                   onChange={this.onOptionInputChange}
                 />
               </FormGroup>
             </Form>
           </FieldSet>
 
-          <FieldSet legend="Global">
+          <FieldSet legend={translate('Global')}>
             <Form>
               <FormGroup>
-                <FormLabel>First Day of Week</FormLabel>
+                <FormLabel>{translate('FirstDayOfWeek')}</FormLabel>
 
                 <FormInputGroup
                   type={inputTypes.SELECT}
@@ -153,7 +154,7 @@ class CalendarOptionsModalContent extends Component {
               </FormGroup>
 
               <FormGroup>
-                <FormLabel>Week Column Header</FormLabel>
+                <FormLabel>{translate('WeekColumnHeader')}</FormLabel>
 
                 <FormInputGroup
                   type={inputTypes.SELECT}
@@ -161,12 +162,12 @@ class CalendarOptionsModalContent extends Component {
                   values={weekColumnOptions}
                   value={calendarWeekColumnHeader}
                   onChange={this.onGlobalInputChange}
-                  helpText="Shown above each column when week is the active view"
+                  helpText={translate('HelpText')}
                 />
               </FormGroup>
 
               <FormGroup>
-                <FormLabel>Time Format</FormLabel>
+                <FormLabel>{translate('TimeFormat')}</FormLabel>
 
                 <FormInputGroup
                   type={inputTypes.SELECT}
@@ -176,13 +177,13 @@ class CalendarOptionsModalContent extends Component {
                   onChange={this.onGlobalInputChange}
                 />
               </FormGroup><FormGroup>
-                <FormLabel>Enable Color-Impaired Mode</FormLabel>
+                <FormLabel>{translate('EnableColorImpairedMode')}</FormLabel>
 
                 <FormInputGroup
                   type={inputTypes.CHECK}
                   name="enableColorImpairedMode"
                   value={enableColorImpairedMode}
-                  helpText="Altered style to allow color-impaired users to better distinguish color coded information"
+                  helpText={translate('EnableColorImpairedModeHelpText')}
                   onChange={this.onGlobalInputChange}
                 />
               </FormGroup>
@@ -193,7 +194,7 @@ class CalendarOptionsModalContent extends Component {
 
         <ModalFooter>
           <Button onPress={onModalClose}>
-            Close
+            {translate('Close')}
           </Button>
         </ModalFooter>
       </ModalContent>

frontend/src/Calendar/iCal/CalendarLinkModalContent.js

@@ -13,6 +13,7 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { icons, inputTypes, kinds, sizes } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 
 function getUrls(state) {
   const {
@@ -114,37 +115,37 @@ class CalendarLinkModalContent extends Component {
         <ModalBody>
           <Form>
             <FormGroup>
-              <FormLabel>Include Unmonitored</FormLabel>
+              <FormLabel>{translate('IncludeUnmonitored')}</FormLabel>
 
               <FormInputGroup
                 type={inputTypes.CHECK}
                 name="unmonitored"
                 value={unmonitored}
-                helpText="Include unmonitored movies in the iCal feed"
+                helpText={translate('UnmonitoredHelpText')}
                 onChange={this.onInputChange}
               />
             </FormGroup>
 
             <FormGroup>
-              <FormLabel>Show as All-Day Events</FormLabel>
+              <FormLabel>{translate('ShowAsAllDayEvents')}</FormLabel>
 
               <FormInputGroup
                 type={inputTypes.CHECK}
                 name="asAllDay"
                 value={asAllDay}
-                helpText="Events will appear as all-day events in your calendar"
+                helpText={translate('AsAllDayHelpText')}
                 onChange={this.onInputChange}
               />
             </FormGroup>
 
             <FormGroup>
-              <FormLabel>Tags</FormLabel>
+              <FormLabel>{translate('Tags')}</FormLabel>
 
               <FormInputGroup
                 type={inputTypes.TAG}
                 name="tags"
                 value={tags}
-                helpText="Feed will only contain movies with at least one matching tag"
+                helpText={translate('TagsHelpText')}
                 onChange={this.onInputChange}
               />
             </FormGroup>
@@ -152,14 +153,14 @@ class CalendarLinkModalContent extends Component {
             <FormGroup
               size={sizes.LARGE}
             >
-              <FormLabel>iCal Feed</FormLabel>
+              <FormLabel>{translate('ICalFeed')}</FormLabel>
 
               <FormInputGroup
                 type={inputTypes.TEXT}
                 name="iCalHttpUrl"
                 value={iCalHttpUrl}
                 readOnly={true}
-                helpText="Copy this URL to your client(s) or click to subscribe if your browser supports webcal"
+                helpText={translate('ICalHttpUrlHelpText')}
                 buttons={[
                   <ClipboardButton
                     key="copy"
@@ -186,7 +187,7 @@ class CalendarLinkModalContent extends Component {
 
         <ModalFooter>
           <Button onPress={onModalClose}>
-            Close
+            {translate('Close')}
           </Button>
         </ModalFooter>
       </ModalContent>

frontend/src/Commands/commandNames.js

@@ -16,3 +16,4 @@ export const RENAME_MOVIE = 'RenameMovie';
 export const RESET_API_KEY = 'ResetApiKey';
 export const RSS_SYNC = 'RssSync';
 export const MOVIE_SEARCH = 'MoviesSearch';
+export const IMPORT_LIST_SYNC = 'ImportListSync';

frontend/src/Components/FileBrowser/FileBrowserModalContent.js

@@ -14,18 +14,19 @@ import Scroller from 'Components/Scroller/Scroller';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import { kinds, scrollDirections } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import FileBrowserRow from './FileBrowserRow';
 import styles from './FileBrowserModalContent.css';
 
 const columns = [
   {
     name: 'type',
-    label: 'Type',
+    label: translate('Type'),
     isVisible: true
   },
   {
     name: 'name',
-    label: 'Name',
+    label: translate('Name'),
     isVisible: true
   }
 ];
@@ -134,7 +135,7 @@ class FileBrowserModalContent extends Component {
 
           <PathInput
             className={styles.pathInput}
-            placeholder="Start typing or select a path below"
+            placeholder={translate('StartTypingOrSelectAPathBelow')}
             hasFileBrowser={false}
             {...otherProps}
             value={this.state.currentPath}
@@ -148,7 +149,9 @@ class FileBrowserModalContent extends Component {
           >
             {
               !!error &&
-                <div>Error loading contents</div>
+                <div>
+                  {translate('ErrorLoadingContents')}
+                </div>
             }
 
             {
@@ -223,13 +226,13 @@ class FileBrowserModalContent extends Component {
           <Button
             onPress={onModalClose}
           >
-            Cancel
+            {translate('Cancel')}
           </Button>
 
           <Button
             onPress={this.onOkPress}
           >
-            Ok
+            {translate('Ok')}
           </Button>
         </ModalFooter>
       </ModalContent>

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

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import NumberInput from 'Components/Form/NumberInput';
 import SelectInput from 'Components/Form/SelectInput';
 import TextInput from 'Components/Form/TextInput';
-import { IN_LAST, IN_NEXT } from 'Helpers/Props/filterTypes';
+import { IN_LAST, IN_NEXT, NOT_IN_LAST, NOT_IN_NEXT } from 'Helpers/Props/filterTypes';
 import isString from 'Utilities/String/isString';
 import { NAME } from './FilterBuilderRowValue';
 import styles from './DateFilterBuilderRowValue.css';
@@ -18,7 +18,12 @@ const timeOptions = [
 ];
 
 function isInFilter(filterType) {
-  return filterType === IN_LAST || filterType === IN_NEXT;
+  return (
+    filterType === IN_LAST ||
+    filterType === NOT_IN_LAST ||
+    filterType === IN_NEXT ||
+    filterType === NOT_IN_NEXT
+  );
 }
 
 class DateFilterBuilderRowValue extends Component {

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

@@ -8,6 +8,7 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { inputTypes } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import FilterBuilderRow from './FilterBuilderRow';
 import styles from './FilterBuilderModalContent.css';
 
@@ -192,7 +193,7 @@ class FilterBuilderModalContent extends Component {
 
         <ModalFooter>
           <Button onPress={onCancelPress}>
-            Cancel
+            {translate('Cancel')}
           </Button>
 
           <SpinnerErrorButton
@@ -200,7 +201,7 @@ class FilterBuilderModalContent extends Component {
             error={saveError}
             onPress={this.onSaveFilterPress}
           >
-            Save
+            {translate('Save')}
           </SpinnerErrorButton>
         </ModalFooter>
       </ModalContent>

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

@@ -6,6 +6,7 @@ import { filterBuilderTypes, filterBuilderValueTypes, icons } from 'Helpers/Prop
 import BoolFilterBuilderRowValue from './BoolFilterBuilderRowValue';
 import DateFilterBuilderRowValue from './DateFilterBuilderRowValue';
 import FilterBuilderRowValueConnector from './FilterBuilderRowValueConnector';
+import ImportListFilterBuilderRowValueConnector from './ImportListFilterBuilderRowValueConnector';
 import IndexerFilterBuilderRowValueConnector from './IndexerFilterBuilderRowValueConnector';
 import MovieStatusFilterBuilderRowValue from './MovieStatusFilterBuilderRowValue';
 import ProtocolFilterBuilderRowValue from './ProtocolFilterBuilderRowValue';
@@ -74,6 +75,9 @@ function getRowValueConnector(selectedFilterBuilderProp) {
     case filterBuilderValueTypes.TAG:
       return TagFilterBuilderRowValueConnector;
 
+    case filterBuilderValueTypes.IMPORTLIST:
+      return ImportListFilterBuilderRowValueConnector;
+
     default:
       return FilterBuilderRowValueConnector;
   }

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

@@ -0,0 +1,27 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createImportListSelector from 'Store/Selectors/createImportListSelector';
+import FilterBuilderRowValue from './FilterBuilderRowValue';
+
+function createMapStateToProps() {
+  return createSelector(
+    createImportListSelector(),
+    (importLists) => {
+      return {
+        tagList: importLists.map((importList) => {
+          const {
+            id,
+            name
+          } = importList;
+
+          return {
+            id,
+            name
+          };
+        })
+      };
+    }
+  );
+}
+
+export default connect(createMapStateToProps)(FilterBuilderRowValue);

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

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import IconButton from 'Components/Link/IconButton';
 import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
 import { icons } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import styles from './CustomFilter.css';
 
 class CustomFilter extends Component {
@@ -89,7 +90,7 @@ class CustomFilter extends Component {
           />
 
           <SpinnerIconButton
-            title="Remove filter"
+            title={translate('RemoveFilter')}
             name={icons.REMOVE}
             isSpinning={this.state.isDeleting}
             onPress={this.onRemovePress}

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

@@ -59,7 +59,7 @@ function CustomFiltersModalContent(props) {
         <Button
           onPress={onModalClose}
         >
-          Close
+          {translate('Close')}
         </Button>
       </ModalFooter>
     </ModalContent>

frontend/src/Components/Form/DeviceInputConnector.js

@@ -8,16 +8,28 @@ import DeviceInput from './DeviceInput';
 function createMapStateToProps() {
   return createSelector(
     (state, { value }) => value,
+    (state, { name }) => name,
     (state) => state.providerOptions,
-    (value, devices) => {
+    (value, name, devices) => {
+      const {
+        isFetching,
+        isPopulated,
+        error,
+        items
+      } = devices;
 
       return {
-        ...devices,
+        isFetching,
+        isPopulated,
+        error,
+        items: items[name] || [],
         selectedDevices: value.map((valueDevice) => {
+          const sectionItems = items[name] || [];
+
           // Disable equality ESLint rule so we don't need to worry about
           // a type mismatch between the value items and the device ID.
           // eslint-disable-next-line eqeqeq
-          const device = devices.items.find((d) => d.id == valueDevice);
+          const device = sectionItems.find((d) => d.id == valueDevice);
 
           if (device) {
             return {
@@ -61,11 +73,14 @@ class DeviceInputConnector extends Component {
     const {
       provider,
       providerData,
-      dispatchFetchOptions
+      dispatchFetchOptions,
+      requestAction,
+      name
     } = this.props;
 
     dispatchFetchOptions({
-      action: 'getDevices',
+      action: requestAction,
+      itemSection: name,
       provider,
       providerData
     });
@@ -94,6 +109,7 @@ class DeviceInputConnector extends Component {
 DeviceInputConnector.propTypes = {
   provider: PropTypes.string.isRequired,
   providerData: PropTypes.object.isRequired,
+  requestAction: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   dispatchFetchOptions: PropTypes.func.isRequired,

frontend/src/Components/Form/EnhancedSelectInput.js

@@ -58,11 +58,30 @@ function getSelectedIndex(props) {
     values
   } = props;
 
+  if (Array.isArray(value)) {
+    return values.findIndex((v) => {
+      return value.size && v.key === value[0];
+    });
+  }
+
   return values.findIndex((v) => {
     return v.key === value;
   });
 }
 
+function isSelectedItem(index, props) {
+  const {
+    value,
+    values
+  } = props;
+
+  if (Array.isArray(value)) {
+    return value.includes(values[index].key);
+  }
+
+  return values[index].key === value;
+}
+
 function getKey(selectedIndex, values) {
   return values[selectedIndex].key;
 }
@@ -92,7 +111,7 @@ class EnhancedSelectInput extends Component {
       this._scheduleUpdate();
     }
 
-    if (prevProps.value !== this.props.value) {
+    if (!Array.isArray(this.props.value) && prevProps.value !== this.props.value) {
       this.setState({
         selectedIndex: getSelectedIndex(this.props)
       });
@@ -134,7 +153,7 @@ class EnhancedSelectInput extends Component {
     const button = document.getElementById(this._buttonId);
     const options = document.getElementById(this._optionsId);
 
-    if (!button || this.state.isMobile) {
+    if (!button || !event.target.isConnected || this.state.isMobile) {
       return;
     }
 
@@ -177,7 +196,7 @@ class EnhancedSelectInput extends Component {
       }
 
       if (
-        selectedIndex == null ||
+        selectedIndex == null || selectedIndex === -1 ||
         getSelectedOption(selectedIndex, values).isDisabled
       ) {
         if (keyCode === keyCodes.UP_ARROW) {
@@ -235,12 +254,27 @@ class EnhancedSelectInput extends Component {
   }
 
   onSelect = (value) => {
-    this.setState({ isOpen: false });
+    if (Array.isArray(this.props.value)) {
+      let newValue = null;
+      const index = this.props.value.indexOf(value);
+      if (index === -1) {
+        newValue = this.props.values.map((v) => v.key).filter((v) => (v === value) || this.props.value.includes(v));
+      } else {
+        newValue = [...this.props.value];
+        newValue.splice(index, 1);
+      }
+      this.props.onChange({
+        name: this.props.name,
+        value: newValue
+      });
+    } else {
+      this.setState({ isOpen: false });
 
-    this.props.onChange({
-      name: this.props.name,
-      value
-    });
+      this.props.onChange({
+        name: this.props.name,
+        value
+      });
+    }
   }
 
   onMeasure = ({ width }) => {
@@ -258,6 +292,7 @@ class EnhancedSelectInput extends Component {
     const {
       className,
       disabledClassName,
+      value,
       values,
       isDisabled,
       hasError,
@@ -275,6 +310,7 @@ class EnhancedSelectInput extends Component {
       isMobile
     } = this.state;
 
+    const isMultiSelect = Array.isArray(value);
     const selectedOption = getSelectedOption(selectedIndex, values);
 
     return (
@@ -303,9 +339,12 @@ class EnhancedSelectInput extends Component {
                     onPress={this.onPress}
                   >
                     <SelectedValueComponent
+                      value={value}
+                      values={values}
                       {...selectedValueOptions}
                       {...selectedOption}
                       isDisabled={isDisabled}
+                      isMultiSelect={isMultiSelect}
                     >
                       {selectedOption ? selectedOption.value : null}
                     </SelectedValueComponent>
@@ -359,11 +398,17 @@ 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);
                               return (
                                 <OptionComponent
                                   key={v.key}
                                   id={v.key}
-                                  isSelected={index === selectedIndex}
+                                  depth={depth}
+                                  isSelected={isSelectedItem(index, this.props)}
+                                  isDisabled={parentSelected}
+                                  isMultiSelect={isMultiSelect}
                                   {...valueOptions}
                                   {...v}
                                   isMobile={false}
@@ -401,11 +446,17 @@ class EnhancedSelectInput extends Component {
                 <Scroller className={styles.optionsModalScroller}>
                   {
                     values.map((v, index) => {
+                      const hasParent = v.parentKey !== undefined;
+                      const depth = hasParent ? 1 : 0;
+                      const parentSelected = hasParent && value.includes(v.parentKey);
                       return (
                         <OptionComponent
                           key={v.key}
                           id={v.key}
-                          isSelected={index === selectedIndex}
+                          depth={depth}
+                          isSelected={isSelectedItem(index, this.props)}
+                          isMultiSelect={isMultiSelect}
+                          isDisabled={parentSelected}
                           {...valueOptions}
                           {...v}
                           isMobile={true}
@@ -429,9 +480,9 @@ EnhancedSelectInput.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.arrayOf(PropTypes.number)]).isRequired,
   values: PropTypes.arrayOf(PropTypes.object).isRequired,
-  isDisabled: PropTypes.bool,
+  isDisabled: PropTypes.bool.isRequired,
   hasError: PropTypes.bool,
   hasWarning: PropTypes.bool,
   valueOptions: PropTypes.object.isRequired,

frontend/src/Components/Form/EnhancedSelectInputOption.css

@@ -11,6 +11,18 @@
   }
 }
 
+.optionCheck {
+  composes: container from '~./CheckInput.css';
+
+  flex: 0 0 0;
+}
+
+.optionCheckInput {
+  composes: input from '~./CheckInput.css';
+
+  margin-top: 0;
+}
+
 .isSelected {
   background-color: #e2e2e2;
 

frontend/src/Components/Form/EnhancedSelectInputOption.js

@@ -4,6 +4,7 @@ import React, { Component } from 'react';
 import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
 import { icons } from 'Helpers/Props';
+import CheckInput from './CheckInput';
 import styles from './EnhancedSelectInputOption.css';
 
 class EnhancedSelectInputOption extends Component {
@@ -20,15 +21,21 @@ class EnhancedSelectInputOption extends Component {
     onSelect(id);
   }
 
+  onCheckPress = () => {
+    // CheckInput requires a handler. Swallow the change event because onPress will already handle it via event propagation.
+  }
+
   //
   // Render
 
   render() {
     const {
       className,
+      id,
       isSelected,
       isDisabled,
       isHidden,
+      isMultiSelect,
       isMobile,
       children
     } = this.props;
@@ -37,8 +44,8 @@ class EnhancedSelectInputOption extends Component {
       <Link
         className={classNames(
           className,
-          isSelected && styles.isSelected,
-          isDisabled && styles.isDisabled,
+          isSelected && !isMultiSelect && styles.isSelected,
+          isDisabled && !isMultiSelect && styles.isDisabled,
           isHidden && styles.isHidden,
           isMobile && styles.isMobile
         )}
@@ -46,6 +53,19 @@ class EnhancedSelectInputOption extends Component {
         isDisabled={isDisabled}
         onPress={this.onPress}
       >
+
+        {
+          isMultiSelect &&
+            <CheckInput
+              className={styles.optionCheckInput}
+              containerClassName={styles.optionCheck}
+              name={`select-${id}`}
+              value={isSelected}
+              isDisabled={isDisabled}
+              onChange={this.onCheckPress}
+            />
+        }
+
         {children}
 
         {
@@ -67,6 +87,7 @@ EnhancedSelectInputOption.propTypes = {
   isSelected: PropTypes.bool.isRequired,
   isDisabled: PropTypes.bool.isRequired,
   isHidden: PropTypes.bool.isRequired,
+  isMultiSelect: PropTypes.bool.isRequired,
   isMobile: PropTypes.bool.isRequired,
   children: PropTypes.node.isRequired,
   onSelect: PropTypes.func.isRequired
@@ -75,7 +96,8 @@ EnhancedSelectInputOption.propTypes = {
 EnhancedSelectInputOption.defaultProps = {
   className: styles.option,
   isDisabled: false,
-  isHidden: false
+  isHidden: false,
+  isMultiSelect: false
 };
 
 export default EnhancedSelectInputOption;

frontend/src/Components/Form/FormInputGroup.js

@@ -20,6 +20,7 @@ import QualityProfileSelectInputConnector from './QualityProfileSelectInputConne
 import RootFolderSelectInputConnector from './RootFolderSelectInputConnector';
 import TagInputConnector from './TagInputConnector';
 import TagSelectInputConnector from './TagSelectInputConnector';
+import TextArea from './TextArea';
 import TextInput from './TextInput';
 import TextTagInputConnector from './TextTagInputConnector';
 import styles from './FormInputGroup.css';
@@ -71,6 +72,9 @@ function getComponent(type) {
     case inputTypes.TAG:
       return TagInputConnector;
 
+    case inputTypes.TEXT_AREA:
+      return TextArea;
+
     case inputTypes.TEXT_TAG:
       return TextTagInputConnector;
 
@@ -153,7 +157,7 @@ function FormInputGroup(props) {
           <Icon
           name={icons.UNSAVED_SETTING}
           className={styles.pendingChangesIcon}
-          title="Change has not been saved yet"
+          title={translate('ChangeHasNotBeenSavedYet')}
           />
           }
         </div> */}
@@ -207,7 +211,7 @@ function FormInputGroup(props) {
               key={index}
               text={error.message}
               link={error.link}
-              linkTooltip={error.detailedMessage}
+              tooltip={error.detailedMessage}
               isError={true}
               isCheckInput={checkInput}
             />
@@ -222,7 +226,7 @@ function FormInputGroup(props) {
               key={index}
               text={warning.message}
               link={warning.link}
-              linkTooltip={warning.detailedMessage}
+              tooltip={warning.detailedMessage}
               isWarning={true}
               isCheckInput={checkInput}
             />

frontend/src/Components/Form/FormInputHelpText.css

@@ -37,3 +37,7 @@
 
   margin-left: 5px;
 }
+
+.details {
+  margin-left: 5px;
+}

frontend/src/Components/Form/FormInputHelpText.js

@@ -11,7 +11,7 @@ function FormInputHelpText(props) {
     className,
     text,
     link,
-    linkTooltip,
+    tooltip,
     isError,
     isWarning,
     isCheckInput
@@ -28,16 +28,27 @@ function FormInputHelpText(props) {
       {text}
 
       {
-        !!link &&
+        link ?
           <Link
             className={styles.link}
             to={link}
-            title={linkTooltip}
+            title={tooltip}
           >
             <Icon
               name={icons.EXTERNAL_LINK}
             />
-          </Link>
+          </Link> :
+          null
+      }
+
+      {
+        !link && tooltip ?
+          <Icon
+            containerClassName={styles.details}
+            name={icons.INFO}
+            title={tooltip}
+          /> :
+          null
       }
     </div>
   );
@@ -47,7 +58,7 @@ FormInputHelpText.propTypes = {
   className: PropTypes.string.isRequired,
   text: PropTypes.string.isRequired,
   link: PropTypes.string,
-  linkTooltip: PropTypes.string,
+  tooltip: PropTypes.string,
   isError: PropTypes.bool,
   isWarning: PropTypes.bool,
   isCheckInput: PropTypes.bool

frontend/src/Components/Form/HintedSelectInputOption.js

@@ -6,14 +6,23 @@ import styles from './HintedSelectInputOption.css';
 
 function HintedSelectInputOption(props) {
   const {
+    id,
     value,
     hint,
+    isSelected,
+    isDisabled,
+    isMultiSelect,
     isMobile,
     ...otherProps
   } = props;
 
   return (
     <EnhancedSelectInputOption
+      id={id}
+      isSelected={isSelected}
+      isDisabled={isDisabled}
+      isHidden={isDisabled}
+      isMultiSelect={isMultiSelect}
       isMobile={isMobile}
       {...otherProps}
     >
@@ -36,9 +45,19 @@ function HintedSelectInputOption(props) {
 }
 
 HintedSelectInputOption.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   value: PropTypes.string.isRequired,
   hint: PropTypes.node,
+  isSelected: PropTypes.bool.isRequired,
+  isDisabled: PropTypes.bool.isRequired,
+  isMultiSelect: PropTypes.bool.isRequired,
   isMobile: PropTypes.bool.isRequired
 };
 
+HintedSelectInputOption.defaultProps = {
+  isDisabled: false,
+  isHidden: false,
+  isMultiSelect: false
+};
+
 export default HintedSelectInputOption;

frontend/src/Components/Form/HintedSelectInputSelectedValue.js

@@ -1,23 +1,43 @@
+import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React from 'react';
+import Label from 'Components/Label';
 import EnhancedSelectInputSelectedValue from './EnhancedSelectInputSelectedValue';
 import styles from './HintedSelectInputSelectedValue.css';
 
 function HintedSelectInputSelectedValue(props) {
   const {
     value,
+    values,
     hint,
+    isMultiSelect,
     includeHint,
     ...otherProps
   } = props;
 
+  const valuesMap = isMultiSelect && _.keyBy(values, 'key');
+
   return (
     <EnhancedSelectInputSelectedValue
       className={styles.selectedValue}
       {...otherProps}
     >
       <div className={styles.valueText}>
-        {value}
+        {
+          isMultiSelect &&
+            value.map((key, index) => {
+              const v = valuesMap[key];
+              return (
+                <Label key={key}>
+                  {v ? v.value : key}
+                </Label>
+              );
+            })
+        }
+
+        {
+          !isMultiSelect && value
+        }
       </div>
 
       {
@@ -31,12 +51,15 @@ function HintedSelectInputSelectedValue(props) {
 }
 
 HintedSelectInputSelectedValue.propTypes = {
-  value: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))]).isRequired,
+  values: PropTypes.arrayOf(PropTypes.object).isRequired,
   hint: PropTypes.string,
+  isMultiSelect: PropTypes.bool.isRequired,
   includeHint: PropTypes.bool.isRequired
 };
 
 HintedSelectInputSelectedValue.defaultProps = {
+  isMultiSelect: false,
   includeHint: true
 };
 

frontend/src/Components/Form/ProviderFieldFormGroup.js

@@ -6,7 +6,7 @@ import FormInputGroup from 'Components/Form/FormInputGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import { inputTypes } from 'Helpers/Props';
 
-function getType(type) {
+function getType(type, value) {
   switch (type) {
     case 'captcha':
       return inputTypes.CAPTCHA;
@@ -45,7 +45,8 @@ function getSelectValues(selectOptions) {
   return _.reduce(selectOptions, (result, option) => {
     result.push({
       key: option.value,
-      value: option.name
+      value: option.name,
+      hint: option.hint
     });
 
     return result;
@@ -62,6 +63,7 @@ function ProviderFieldFormGroup(props) {
     value,
     type,
     advanced,
+    requestAction,
     hidden,
     pending,
     errors,
@@ -86,7 +88,7 @@ function ProviderFieldFormGroup(props) {
       <FormLabel>{label}</FormLabel>
 
       <FormInputGroup
-        type={getType(type)}
+        type={getType(type, value)}
         name={name}
         label={label}
         helpText={helpText}
@@ -98,6 +100,7 @@ function ProviderFieldFormGroup(props) {
         pending={pending}
         includeFiles={type === 'filePath' ? true : undefined}
         onChange={onChange}
+        requestAction={requestAction}
         {...otherProps}
       />
     </FormGroup>
@@ -118,6 +121,7 @@ ProviderFieldFormGroup.propTypes = {
   value: PropTypes.any,
   type: PropTypes.string.isRequired,
   advanced: PropTypes.bool.isRequired,
+  requestAction: PropTypes.string,
   hidden: PropTypes.string,
   pending: PropTypes.bool.isRequired,
   errors: PropTypes.arrayOf(PropTypes.object).isRequired,

frontend/src/Components/Form/RootFolderSelectInputOption.css

@@ -15,10 +15,12 @@
 
 .value {
   display: flex;
+  max-width: 500px;
 }
 
 .movieFolder {
-  flex: 0 0 auto;
+  @add-mixin truncate;
+
   color: $disabledColor;
 }
 

frontend/src/Components/Form/TextArea.css

@@ -0,0 +1,19 @@
+.input {
+  composes: input from '~Components/Form/Input.css';
+
+  flex-grow: 1;
+  min-height: 200px;
+  resize: vertical;
+}
+
+.readOnly {
+  background-color: #eee;
+}
+
+.hasError {
+  composes: hasError from '~Components/Form/Input.css';
+}
+
+.hasWarning {
+  composes: hasWarning from '~Components/Form/Input.css';
+}

frontend/src/Components/Form/TextArea.js

@@ -0,0 +1,172 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import styles from './TextArea.css';
+
+class TextArea extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this._input = null;
+    this._selectionStart = null;
+    this._selectionEnd = null;
+    this._selectionTimeout = null;
+    this._isMouseTarget = false;
+  }
+
+  componentDidMount() {
+    window.addEventListener('mouseup', this.onDocumentMouseUp);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('mouseup', this.onDocumentMouseUp);
+
+    if (this._selectionTimeout) {
+      this._selectionTimeout = clearTimeout(this._selectionTimeout);
+    }
+  }
+
+  //
+  // Control
+
+  setInputRef = (ref) => {
+    this._input = ref;
+  }
+
+  selectionChange() {
+    if (this._selectionTimeout) {
+      this._selectionTimeout = clearTimeout(this._selectionTimeout);
+    }
+
+    this._selectionTimeout = setTimeout(() => {
+      const selectionStart = this._input.selectionStart;
+      const selectionEnd = this._input.selectionEnd;
+
+      const selectionChanged = (
+        this._selectionStart !== selectionStart ||
+        this._selectionEnd !== selectionEnd
+      );
+
+      this._selectionStart = selectionStart;
+      this._selectionEnd = selectionEnd;
+
+      if (this.props.onSelectionChange && selectionChanged) {
+        this.props.onSelectionChange(selectionStart, selectionEnd);
+      }
+    }, 10);
+  }
+
+  //
+  // Listeners
+
+  onChange = (event) => {
+    const {
+      name,
+      onChange
+    } = this.props;
+
+    const payload = {
+      name,
+      value: event.target.value
+    };
+
+    onChange(payload);
+  }
+
+  onFocus = (event) => {
+    if (this.props.onFocus) {
+      this.props.onFocus(event);
+    }
+
+    this.selectionChange();
+  }
+
+  onKeyUp = () => {
+    this.selectionChange();
+  }
+
+  onMouseDown = () => {
+    this._isMouseTarget = true;
+  }
+
+  onMouseUp = () => {
+    this.selectionChange();
+  }
+
+  onDocumentMouseUp = () => {
+    if (this._isMouseTarget) {
+      this.selectionChange();
+    }
+
+    this._isMouseTarget = false;
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      className,
+      readOnly,
+      autoFocus,
+      placeholder,
+      name,
+      value,
+      hasError,
+      hasWarning,
+      onBlur
+    } = this.props;
+
+    return (
+      <textarea
+        ref={this.setInputRef}
+        readOnly={readOnly}
+        autoFocus={autoFocus}
+        placeholder={placeholder}
+        className={classNames(
+          className,
+          readOnly && styles.readOnly,
+          hasError && styles.hasError,
+          hasWarning && styles.hasWarning
+        )}
+        name={name}
+        value={value}
+        onChange={this.onChange}
+        onFocus={this.onFocus}
+        onBlur={onBlur}
+        onKeyUp={this.onKeyUp}
+        onMouseDown={this.onMouseDown}
+        onMouseUp={this.onMouseUp}
+      />
+    );
+  }
+}
+
+TextArea.propTypes = {
+  className: PropTypes.string.isRequired,
+  readOnly: PropTypes.bool,
+  autoFocus: PropTypes.bool,
+  placeholder: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]).isRequired,
+  hasError: PropTypes.bool,
+  hasWarning: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  onSelectionChange: PropTypes.func
+};
+
+TextArea.defaultProps = {
+  className: styles.input,
+  type: 'text',
+  readOnly: false,
+  autoFocus: false,
+  value: ''
+};
+
+export default TextArea;

frontend/src/Components/HeartRating.js

@@ -4,14 +4,17 @@ import Icon from 'Components/Icon';
 import { icons } from 'Helpers/Props';
 import styles from './HeartRating.css';
 
-function HeartRating({ rating, iconSize }) {
+function HeartRating({ rating, iconSize, hideHeart }) {
   return (
     <span>
-      <Icon
-        className={styles.heart}
-        name={icons.HEART}
-        size={iconSize}
-      />
+      {
+        !hideHeart &&
+          <Icon
+            className={styles.heart}
+            name={icons.HEART}
+            size={iconSize}
+          />
+      }
 
       {rating * 10}%
     </span>
@@ -20,7 +23,8 @@ function HeartRating({ rating, iconSize }) {
 
 HeartRating.propTypes = {
   rating: PropTypes.number.isRequired,
-  iconSize: PropTypes.number.isRequired
+  iconSize: PropTypes.number.isRequired,
+  hideHeart: PropTypes.bool
 };
 
 HeartRating.defaultProps = {

frontend/src/Components/ImportListList.css

@@ -0,0 +1,3 @@
+.lists {
+  flex: 1 0 auto;
+}

frontend/src/Components/ImportListList.js

@@ -0,0 +1,43 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { kinds, sizes } from 'Helpers/Props';
+import Label from './Label';
+import styles from './ImportListList.css';
+
+function ImportListList({ lists, importListList }) {
+  return (
+    <div className={styles.lists}>
+      {
+        lists.map((t) => {
+          const list = _.find(importListList, { id: t });
+
+          if (!list) {
+            return null;
+          }
+
+          return (
+            <Label
+              key={list.id}
+              kind={kinds.INFO}
+              size={sizes.MEDIUM}
+            >
+              {list.name}
+            </Label>
+          );
+        })
+      }
+    </div>
+  );
+}
+
+ImportListList.propTypes = {
+  lists: PropTypes.arrayOf(PropTypes.number).isRequired,
+  importListList: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+
+ImportListList.defaultProps = {
+  lists: []
+};
+
+export default ImportListList;

frontend/src/Components/ImportListListConnector.js

@@ -0,0 +1,17 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createImportListSelector from 'Store/Selectors/createImportListSelector';
+import ImportListList from './ImportListList';
+
+function createMapStateToProps() {
+  return createSelector(
+    createImportListSelector(),
+    (importListList) => {
+      return {
+        importListList
+      };
+    }
+  );
+}
+
+export default connect(createMapStateToProps)(ImportListList);

frontend/src/Components/Label.css

@@ -87,6 +87,15 @@
   }
 }
 
+.queue {
+  border-color: $queueColor;
+  background-color: $queueColor;
+
+  &.outline {
+    color: $queueColor;
+  }
+}
+
 /** Sizes **/
 
 .small {

frontend/src/Components/Link/ClipboardButton.js

@@ -17,6 +17,7 @@ class ClipboardButton extends Component {
 
     this._id = getUniqueElememtId();
     this._successTimeout = null;
+    this._testResultTimeout = null;
 
     this.state = {
       showSuccess: false,
@@ -26,7 +27,8 @@ class ClipboardButton extends Component {
 
   componentDidMount() {
     this._clipboard = new Clipboard(`#${this._id}`, {
-      text: () => this.props.value
+      text: () => this.props.value,
+      container: document.getElementById(this._id)
     });
 
     this._clipboard.on('success', this.onSuccess);
@@ -47,6 +49,10 @@ class ClipboardButton extends Component {
     if (this._clipboard) {
       this._clipboard.destroy();
     }
+
+    if (this._testResultTimeout) {
+      clearTimeout(this._testResultTimeout);
+    }
   }
 
   //
@@ -80,6 +86,7 @@ class ClipboardButton extends Component {
   render() {
     const {
       value,
+      className,
       ...otherProps
     } = this.props;
 
@@ -95,7 +102,7 @@ class ClipboardButton extends Component {
     return (
       <FormInputButton
         id={this._id}
-        className={styles.button}
+        className={className}
         {...otherProps}
       >
         <span className={showStateIcon ? styles.showStateIcon : undefined}>
@@ -121,7 +128,12 @@ class ClipboardButton extends Component {
 }
 
 ClipboardButton.propTypes = {
+  className: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired
 };
 
+ClipboardButton.defaultProps = {
+  className: styles.button
+};
+
 export default ClipboardButton;

frontend/src/Components/Loading/LoadingIndicator.js

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import styles from './LoadingIndicator.css';
@@ -13,7 +14,7 @@ function LoadingIndicator({ className, rippleClassName, size }) {
       style={{ height }}
     >
       <div
-        className={styles.rippleContainer}
+        className={classNames(styles.rippleContainer, 'followingBalls')}
         style={{ width, height }}
       >
         <div

frontend/src/Components/Loading/LoadingMessage.js

@@ -2,8 +2,24 @@ import React from 'react';
 import styles from './LoadingMessage.css';
 
 const messages = [
-  'Welcome to Radarr Aphrodite Preview. Enjoy'
-  // TODO Add some messages here
+  'Downloading more RAM',
+  'Now in Technicolor',
+  'Previously on Radarr...',
+  'Bleep Bloop.',
+  'Locating the required gigapixels to render...',
+  'Spinning up the hamster wheel...',
+  'At least you\'re not on hold',
+  'Hum something loud while others stare',
+  'Loading humorous message... Please Wait',
+  'I could\'ve been faster in Python',
+  'Don\'t forget to rewind your tracks',
+  'Congratulations! you are the 1000th visitor.',
+  'HELP! I\'m being held hostage and forced to write these stupid lines!',
+  'RE-calibrating the internet...',
+  'I\'ll be here all week',
+  'Don\'t forget to tip your waitress',
+  'Apply directly to the forehead',
+  'Loading Battlestation'
 ];
 
 let message = null;

frontend/src/Components/Marquee.js

@@ -9,6 +9,7 @@ class Marquee extends Component {
 
   static propTypes = {
     text: PropTypes.string,
+    title: PropTypes.string,
     hoverToStop: PropTypes.bool,
     loop: PropTypes.bool,
     className: PropTypes.string
@@ -16,6 +17,7 @@ class Marquee extends Component {
 
   static defaultProps = {
     text: '',
+    title: '',
     hoverToStop: true,
     loop: false
   };
@@ -144,7 +146,7 @@ class Marquee extends Component {
               this.text = el;
             }}
             style={style}
-            title={this.props.text}
+            title={(this.props.title && (this.props.text !== this.props.title)) ? `Original Title: ${this.props.title}` : this.props.text}
           >
             {this.props.text}
           </span>
@@ -167,7 +169,7 @@ class Marquee extends Component {
             this.text = el;
           }}
           style={style}
-          title={this.props.text}
+          title={(this.props.title && (this.props.text !== this.props.title)) ? `Original Title: ${this.props.title}` : this.props.text}
         >
           {this.props.text}
         </span>

frontend/src/Components/Modal/ModalError.js

@@ -6,6 +6,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 translate from 'Utilities/String/translate';
 import styles from './ModalError.css';
 
 function ModalError(props) {
@@ -33,7 +34,7 @@ function ModalError(props) {
         <Button
           onPress={onModalClose}
         >
-          Close
+          {translate('Close')}
         </Button>
       </ModalFooter>
     </ModalContent>);

frontend/src/Components/NotFound.js

@@ -1,11 +1,12 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import PageContent from 'Components/Page/PageContent';
+import translate from 'Utilities/String/translate';
 import styles from './NotFound.css';
 
 function NotFound({ message }) {
   return (
-    <PageContent title="MIA">
+    <PageContent title={translate('MIA')}>
       <div className={styles.container}>
         <div className={styles.message}>
           {message}

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

@@ -6,6 +6,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 translate from 'Utilities/String/translate';
 import styles from './KeyboardShortcutsModalContent.css';
 
 function getShortcuts() {
@@ -19,18 +20,26 @@ function getShortcuts() {
 }
 
 function getShortcutKey(combo, isOsx) {
-  const comboMatch = combo.match(/(.+?)\+(.)/);
+  const comboMatch = combo.match(/(.+?)\+(.*)/);
 
   if (!comboMatch) {
     return combo;
   }
 
   const modifier = comboMatch[1];
-  const key = comboMatch[2];
+  let key = comboMatch[2];
   let osModifier = modifier;
 
   if (modifier === 'mod') {
-    osModifier = isOsx ? 'cmd' : 'ctrl';
+    osModifier = isOsx ? 'cmd' : 'Ctrl';
+  }
+
+  if (key === 'home') {
+    key = isOsx ? '↑' : 'Home';
+  }
+
+  if (key === 'end') {
+    key = isOsx ? '↓' : 'End';
   }
 
   return `${osModifier} + ${key}`;
@@ -75,7 +84,7 @@ function KeyboardShortcutsModalContent(props) {
         <Button
           onPress={onModalClose}
         >
-          Close
+          {translate('Close')}
         </Button>
       </ModalFooter>
     </ModalContent>

frontend/src/Components/Page/Header/MovieSearchInput.css

@@ -4,15 +4,15 @@
 }
 
 .loading {
-  margin-top: 18px;
-  margin-bottom: 18px;
-  text-align: center;
+  position: absolute;
+  display: inline-block;
+  margin-left: 5px;
 }
 
 .ripple {
   composes: ripple from '~Components/Loading/LoadingIndicator.css';
 
-  border: 2px solid $toolbarColor;
+  border: 1px solid $toolbarColor;
 }
 
 .input {

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

@@ -11,9 +11,7 @@ import FuseWorker from './fuse.worker';
 import MovieSearchResult from './MovieSearchResult';
 import styles from './MovieSearchInput.css';
 
-const LOADING_TYPE = 'suggestionsLoading';
 const ADD_NEW_TYPE = 'addNew';
-const workerInstance = new FuseWorker();
 
 class MovieSearchInput extends Component {
 
@@ -24,6 +22,7 @@ class MovieSearchInput extends Component {
     super(props, context);
 
     this._autosuggest = null;
+    this._worker = null;
 
     this.state = {
       value: '',
@@ -33,7 +32,23 @@ class MovieSearchInput extends Component {
 
   componentDidMount() {
     this.props.bindShortcut(shortcuts.MOVIE_SEARCH_INPUT.key, this.focusInput);
-    workerInstance.addEventListener('message', this.onSuggestionsReceived, false);
+  }
+
+  componentWillUnmount() {
+    if (this._worker) {
+      this._worker.removeEventListener('message', this.onSuggestionsReceived, false);
+      this._worker.terminate();
+      this._worker = null;
+    }
+  }
+
+  getWorker() {
+    if (!this._worker) {
+      this._worker = new FuseWorker();
+      this._worker.addEventListener('message', this.onSuggestionsReceived, false);
+    }
+
+    return this._worker;
   }
 
   //
@@ -56,6 +71,15 @@ class MovieSearchInput extends Component {
     return (
       <div className={styles.sectionTitle}>
         {section.title}
+
+        {
+          section.loading &&
+            <LoadingIndicator
+              className={styles.loading}
+              rippleClassName={styles.ripple}
+              size={20}
+            />
+        }
       </div>
     );
   }
@@ -73,16 +97,6 @@ class MovieSearchInput extends Component {
       );
     }
 
-    if (item.type === LOADING_TYPE) {
-      return (
-        <LoadingIndicator
-          className={styles.loading}
-          rippleClassName={styles.ripple}
-          size={30}
-        />
-      );
-    }
-
     return (
       <MovieSearchResult
         {...item.item}
@@ -99,7 +113,8 @@ class MovieSearchInput extends Component {
   reset() {
     this.setState({
       value: '',
-      suggestions: []
+      suggestions: [],
+      loading: false
     });
   }
 
@@ -115,6 +130,15 @@ class MovieSearchInput extends Component {
   }
 
   onKeyDown = (event) => {
+    if (event.shiftKey || event.altKey || event.ctrlKey) {
+      return;
+    }
+
+    if (event.key === 'Escape') {
+      this.reset();
+      return;
+    }
+
     if (event.key !== 'Tab' && event.key !== 'Enter') {
       return;
     }
@@ -155,35 +179,74 @@ class MovieSearchInput extends Component {
   }
 
   onSuggestionsFetchRequested = ({ value }) => {
-    this.setState({
-      suggestions: [
-        {
-          type: LOADING_TYPE,
-          title: value
-        }
-      ]
-    });
+    if (!this.state.loading) {
+      this.setState({
+        loading: true
+      });
+    }
+
     this.requestSuggestions(value);
   };
 
   requestSuggestions = _.debounce((value) => {
-    const payload = {
-      value,
-      movies: this.props.movies
-    };
+    if (!this.state.loading) {
+      return;
+    }
 
-    workerInstance.postMessage(payload);
+    const requestLoading = this.state.requestLoading;
+
+    this.setState({
+      requestValue: value,
+      requestLoading: true
+    });
+
+    if (!requestLoading) {
+      const payload = {
+        value,
+        movies: this.props.movies
+      };
+
+      this.getWorker().postMessage(payload);
+    }
   }, 250);
 
   onSuggestionsReceived = (message) => {
-    this.setState({
-      suggestions: message.data
-    });
+    const {
+      value,
+      suggestions
+    } = message.data;
+
+    if (!this.state.loading) {
+      this.setState({
+        requestValue: null,
+        requestLoading: false
+      });
+    } else if (value === this.state.requestValue) {
+      this.setState({
+        suggestions,
+        requestValue: null,
+        requestLoading: false,
+        loading: false
+      });
+    } else {
+      this.setState({
+        suggestions,
+        requestLoading: true
+      });
+
+      const payload = {
+        value: this.state.requestValue,
+        movies: this.props.movies
+      };
+
+      this.getWorker().postMessage(payload);
+    }
   }
 
   onSuggestionsClearRequested = () => {
     this.setState({
-      suggestions: []
+      suggestions: [],
+      loading: false
     });
   }
 
@@ -201,20 +264,22 @@ class MovieSearchInput extends Component {
   render() {
     const {
       value,
+      loading,
       suggestions
     } = this.state;
 
     const suggestionGroups = [];
 
-    if (suggestions.length) {
+    if (suggestions.length || loading) {
       suggestionGroups.push({
-        title: 'Existing Movie',
+        title: translate('ExistingMovies'),
+        loading,
         suggestions
       });
     }
 
     suggestionGroups.push({
-      title: 'Add New Movie',
+      title: translate('AddNewMovie'),
       suggestions: [
         {
           type: ADD_NEW_TYPE,

frontend/src/Components/Page/Header/PageHeader.css

@@ -21,8 +21,9 @@
 }
 
 .logoFull {
-  width: 144px;
-  height: 48px;
+  margin-left: 15px;
+  width: 120px;
+  height: 40px;
 }
 
 .logo {

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

@@ -4,6 +4,7 @@ import keyboardShortcuts, { shortcuts } from 'Components/keyboardShortcuts';
 import IconButton from 'Components/Link/IconButton';
 import Link from 'Components/Link/Link';
 import { icons } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import KeyboardShortcutsModal from './KeyboardShortcutsModal';
 import MovieSearchInputConnector from './MovieSearchInputConnector';
 import PageHeaderActionsMenuConnector from './PageHeaderActionsMenuConnector';
@@ -79,7 +80,7 @@ class PageHeader extends Component {
           />
           <IconButton
             className={styles.translate}
-            title="Suggest translation change"
+            title={translate('SuggestTranslationChange')}
             name={icons.TRANSLATE}
             to="https://translate.servarr.com/projects/radarr/radarr/"
             size={24}

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

@@ -7,6 +7,7 @@ import MenuContent from 'Components/Menu/MenuContent';
 import MenuItem from 'Components/Menu/MenuItem';
 import MenuItemSeparator from 'Components/Menu/MenuItemSeparator';
 import { align, icons, kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import styles from './PageHeaderActionsMenu.css';
 
 function PageHeaderActionsMenu(props) {
@@ -32,7 +33,7 @@ function PageHeaderActionsMenu(props) {
               className={styles.itemIcon}
               name={icons.KEYBOARD}
             />
-            Keyboard Shortcuts
+            {translate('KeyboardShortcuts')}
           </MenuItem>
 
           <MenuItemSeparator />
@@ -42,7 +43,7 @@ function PageHeaderActionsMenu(props) {
               className={styles.itemIcon}
               name={icons.RESTART}
             />
-            Restart
+            {translate('Restart')}
           </MenuItem>
 
           <MenuItem onPress={onShutdownPress}>
@@ -51,7 +52,7 @@ function PageHeaderActionsMenu(props) {
               name={icons.SHUTDOWN}
               kind={kinds.DANGER}
             />
-            Shutdown
+            {translate('Shutdown')}
           </MenuItem>
 
           {

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

@@ -47,7 +47,7 @@ function getSuggestions(movies, value) {
   return suggestions;
 }
 
-self.addEventListener('message', (e) => {
+onmessage = function(e) {
   if (!e) {
     return;
   }
@@ -57,5 +57,12 @@ self.addEventListener('message', (e) => {
     value
   } = e.data;
 
-  self.postMessage(getSuggestions(movies, value));
-});
+  const suggestions = getSuggestions(movies, value);
+
+  const results = {
+    value,
+    suggestions
+  };
+
+  self.postMessage(results);
+};

frontend/src/Components/Page/PageConnector.js

@@ -6,7 +6,7 @@ import { createSelector } from 'reselect';
 import { saveDimensions, setIsSidebarVisible } from 'Store/Actions/appActions';
 import { fetchCustomFilters } from 'Store/Actions/customFilterActions';
 import { fetchMovies } from 'Store/Actions/movieActions';
-import { fetchLanguages, fetchNetImports, fetchQualityProfiles, fetchUISettings } from 'Store/Actions/settingsActions';
+import { fetchImportLists, fetchLanguages, fetchQualityProfiles, fetchUISettings } from 'Store/Actions/settingsActions';
 import { fetchStatus } from 'Store/Actions/systemActions';
 import { fetchTags } from 'Store/Actions/tagActions';
 import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
@@ -48,7 +48,7 @@ const selectIsPopulated = createSelector(
   (state) => state.settings.ui.isPopulated,
   (state) => state.settings.qualityProfiles.isPopulated,
   (state) => state.settings.languages.isPopulated,
-  (state) => state.settings.netImports.isPopulated,
+  (state) => state.settings.importLists.isPopulated,
   (state) => state.system.status.isPopulated,
   (
     customFiltersIsPopulated,
@@ -56,7 +56,7 @@ const selectIsPopulated = createSelector(
     uiSettingsIsPopulated,
     qualityProfilesIsPopulated,
     languagesIsPopulated,
-    netImportsIsPopulated,
+    importListsIsPopulated,
     systemStatusIsPopulated
   ) => {
     return (
@@ -65,7 +65,7 @@ const selectIsPopulated = createSelector(
       uiSettingsIsPopulated &&
       qualityProfilesIsPopulated &&
       languagesIsPopulated &&
-      netImportsIsPopulated &&
+      importListsIsPopulated &&
       systemStatusIsPopulated
     );
   }
@@ -77,7 +77,7 @@ const selectErrors = createSelector(
   (state) => state.settings.ui.error,
   (state) => state.settings.qualityProfiles.error,
   (state) => state.settings.languages.error,
-  (state) => state.settings.netImports.error,
+  (state) => state.settings.importLists.error,
   (state) => state.system.status.error,
   (
     customFiltersError,
@@ -85,7 +85,7 @@ const selectErrors = createSelector(
     uiSettingsError,
     qualityProfilesError,
     languagesError,
-    netImportsError,
+    importListsError,
     systemStatusError
   ) => {
     const hasError = !!(
@@ -94,7 +94,7 @@ const selectErrors = createSelector(
       uiSettingsError ||
       qualityProfilesError ||
       languagesError ||
-      netImportsError ||
+      importListsError ||
       systemStatusError
     );
 
@@ -105,7 +105,7 @@ const selectErrors = createSelector(
       uiSettingsError,
       qualityProfilesError,
       languagesError,
-      netImportsError,
+      importListsError,
       systemStatusError
     };
   }
@@ -153,8 +153,8 @@ function createMapDispatchToProps(dispatch, props) {
     dispatchFetchLanguages() {
       dispatch(fetchLanguages());
     },
-    dispatchFetchNetImports() {
-      dispatch(fetchNetImports());
+    dispatchFetchImportLists() {
+      dispatch(fetchImportLists());
     },
     dispatchFetchUISettings() {
       dispatch(fetchUISettings());
@@ -191,7 +191,7 @@ class PageConnector extends Component {
       this.props.dispatchFetchTags();
       this.props.dispatchFetchQualityProfiles();
       this.props.dispatchFetchLanguages();
-      this.props.dispatchFetchNetImports();
+      this.props.dispatchFetchImportLists();
       this.props.dispatchFetchUISettings();
       this.props.dispatchFetchStatus();
     }
@@ -215,7 +215,7 @@ class PageConnector extends Component {
       dispatchFetchTags,
       dispatchFetchQualityProfiles,
       dispatchFetchLanguages,
-      dispatchFetchNetImports,
+      dispatchFetchImportLists,
       dispatchFetchUISettings,
       dispatchFetchStatus,
       ...otherProps
@@ -254,7 +254,7 @@ PageConnector.propTypes = {
   dispatchFetchTags: PropTypes.func.isRequired,
   dispatchFetchQualityProfiles: PropTypes.func.isRequired,
   dispatchFetchLanguages: PropTypes.func.isRequired,
-  dispatchFetchNetImports: PropTypes.func.isRequired,
+  dispatchFetchImportLists: PropTypes.func.isRequired,
   dispatchFetchUISettings: PropTypes.func.isRequired,
   dispatchFetchStatus: PropTypes.func.isRequired,
   onSidebarVisibleChange: PropTypes.func.isRequired

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

@@ -98,7 +98,7 @@ const links = [
       },
       {
         title: translate('Lists'),
-        to: '/settings/netimports'
+        to: '/settings/importlists'
       },
       {
         title: translate('Connect'),
@@ -117,7 +117,7 @@ const links = [
         to: '/settings/general'
       },
       {
-        title: translate('Ui'),
+        title: translate('UI'),
         to: '/settings/ui'
       }
     ]

frontend/src/Components/ProgressBar.css

@@ -73,6 +73,10 @@
   background-color: $infoColor;
 }
 
+.queue {
+  background-color: $queueColor;
+}
+
 .small {
   height: $progressBarSmallHeight;
 

frontend/src/Components/Table/Cells/RelativeDateCellConnector.js

@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
@@ -8,12 +7,12 @@ function createMapStateToProps() {
   return createSelector(
     createUISettingsSelector(),
     (uiSettings) => {
-      return _.pick(uiSettings, [
-        'showRelativeDates',
-        'shortDateFormat',
-        'longDateFormat',
-        'timeFormat'
-      ]);
+      return {
+        showRelativeDates: uiSettings.showRelativeDates,
+        shortDateFormat: uiSettings.shortDateFormat,
+        longDateFormat: uiSettings.longDateFormat,
+        timeFormat: uiSettings.timeFormat
+      };
     }
   );
 }