Fixed: Don't get all movies if not scanning after refresh

Currently translated at 23.0% (49 of 213 strings)

Translation: Servarr/Radarr
Translate-URL: https://translate.servarr.com/projects/radarr/radarr/ro/

DEVELOPMENT.md

@@ -1,18 +0,0 @@
-# New UI Development
-
-This document should provide an overview of current UI development, progress and blockers.
-
-## Current Focus
-
-Our current focus is creating a foundation for the UI, so that everything can be built upon it.
-
-We are trialing the Sonarr V3 UI as our foundation. So far it has been working great and we already have a working build running.
-
-## Performance Issues
-
-You can download a database with 40k movies here: https://radarr.video/dev/radarr.db (Version where the next refresh movie scan is in a year. The refresh movie scan will lag the UI and other stuff. https://radarr.video/dev/radarr_no_scan.db). Just place it in your AppData Directory while Radarr is not running and make sure it's named radarr.db (https://github.com/Radarr/Radarr/wiki/AppData-Directory).
-You will have to message me (@galli-leo) via Discord or Reddit for the username and password (just as a precaution).
-
-## Tasks
-
-The actual tasks that are not related to the foundation of the new UI are all listed here https://github.com/Radarr/Radarr/projects/4. They are sorted according to different priorities. Some issues are also issues that shouldn't need anything extra, just a correct implementation in the new UI.

README.md

@@ -1,13 +1,15 @@
 # Radarr
 
-**New UI Development:** For an overview of the new UI development see [DEVELOPMENT.md](https://github.com/Radarr/Radarr/blob/aphrodite/DEVELOPMENT.md).
+[![Build Status](https://dev.azure.com/Radarr/Radarr/_apis/build/status/Radarr.Radarr?branchName=develop)](https://dev.azure.com/Radarr/Radarr/_build/latest?definitionId=1&branchName=develop)
+[![Translated](https://translate.servarr.com/widgets/radarr/-/radarr/svg-badge.svg)](https://translate.servarr.com/engage/radarr/?utm_source=widget)
+[![Docker Pulls](https://img.shields.io/docker/pulls/linuxserver/radarr.svg)](https://github.com/Radarr/Radarr/wiki/Docker)
+![Github Downloads](https://img.shields.io/github/downloads/Radarr/Radarr/total.svg)
+[![Backers on Open Collective](https://opencollective.com/Radarr/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/Radarr/sponsors/badge.svg)](#sponsors)
 
 Radarr is an __independent__ fork of [Sonarr](https://github.com/Sonarr/Sonarr) reworked for automatically downloading movies via Usenet and BitTorrent.
 
 The project was inspired by other Usenet/BitTorrent movie downloaders such as CouchPotato.
 
-See the [Roadmap blogpost](https://blog.radarr.video/development/update/2018/11/11/roadmap-update.html) for an overview of planned features.
-
 ## Getting Started
 
 [![Installation](https://img.shields.io/badge/wiki-installation-brightgreen.svg?maxAge=60&style=flat-square)](https://github.com/Radarr/Radarr/wiki/Installation)
@@ -30,10 +32,6 @@ See the [Roadmap blogpost](https://blog.radarr.video/development/update/2018/11/
 
 ## Support
 
-[![OpenCollective](https://opencollective.com/radarr/tiers/backer/badge.svg)](#backers)
-[![OpenCollective](https://opencollective.com/radarr/tiers/flexible-sponsor/badge.svg)](#flexible-sponsors)
-[![OpenCollective](https://opencollective.com/radarr/tiers/sponsor/badge.svg)](#sponsors)
-
 [![Discord](https://img.shields.io/badge/discord-chat-7289DA.svg?maxAge=60&style=flat-square)](https://discord.gg/AD3UP37)
 [![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)
@@ -45,23 +43,13 @@ See the [Roadmap blogpost](https://blog.radarr.video/development/update/2018/11/
 [![GitHub issues](https://img.shields.io/github/issues/radarr/radarr.svg?maxAge=60&style=flat-square)](https://github.com/Radarr/Radarr/issues)
 [![GitHub pull requests](https://img.shields.io/github/issues-pr/radarr/radarr.svg?maxAge=60&style=flat-square)](https://github.com/Radarr/Radarr/pulls)
 [![GNU GPL v3](https://img.shields.io/badge/license-GNU%20GPL%20v3-blue.svg?maxAge=60&style=flat-square)](http://www.gnu.org/licenses/gpl.html)
-[![Copyright 2010-2017](https://img.shields.io/badge/copyright-2017-blue.svg?maxAge=60&style=flat-square)](https://github.com/Radarr/Radarr)
+[![Copyright 2010-2020](https://img.shields.io/badge/copyright-2020-blue.svg?maxAge=60&style=flat-square)](https://github.com/Radarr/Radarr)
 [![Github Releases](https://img.shields.io/github/downloads/Radarr/Radarr/total.svg?maxAge=60&style=flat-square)](https://github.com/Radarr/Radarr/releases/)
 [![Docker Pulls](https://img.shields.io/docker/pulls/linuxserver/radarr.svg?maxAge=60&style=flat-square)](https://hub.docker.com/r/linuxserver/radarr/)
 [![Changelog](https://img.shields.io/github/commit-activity/w/radarr/radarr.svg?style=flat-square)](/CHANGELOG.md#unreleased)
 
-| Service  | Master                      | Develop                      |
-|----------|:---------------------------:|:----------------------------:|
-| AppVeyor | [![AppVeyor](https://img.shields.io/appveyor/ci/galli-leo/Radarr/master.svg?maxAge=60&style=flat-square)](https://ci.appveyor.com/project/galli-leo/Radarr) | [![AppVeyor](https://img.shields.io/appveyor/ci/galli-leo/Radarr-usby1/develop.svg?maxAge=60&style=flat-square)](https://ci.appveyor.com/project/galli-leo/Radarr-usby1) |
-| Travis   | [![Travis](https://img.shields.io/travis/Radarr/Radarr/master.svg?maxAge=60&style=flat-square)](https://travis-ci.org/Radarr/Radarr) | [![Travis](https://img.shields.io/travis/Radarr/Radarr/develop.svg?maxAge=60&style=flat-square)](https://travis-ci.org/Radarr/Radarr) |
-
 ### [Site and API Status](https://status.radarr.video)
 
-| API | Updates | Sites  |
-|-------|:----:|:----:|
-| [![API V2 (develop)](http://status.radarr.video/component/1/shield?style=flat-square)](https://api.radarr.video/v2/) | [![Update Server](http://status.radarr.video/component/4/shield?style=flat-square)](https://radarr.aeonlucid.com) | [![Radarr Mappings](http://status.radarr.video/component/6/shield?style=flat-square)](https://mappings.radarr.video/)
-| [![API Staging (nightly)](http://status.radarr.video/component/2/shield?style=flat-square)](https://staging.api.radarr.video/) | [![Github Updates](http://status.radarr.video/component/5/shield?style=flat-square)](https://api.github.com/v3/) | [![Main Site](http://status.radarr.video/component/7/shield?style=flat-square)](https://radarr.video/)
-
 Radarr is currently undergoing rapid development and pull requests are actively added into the repository.
 
 ## Features
@@ -110,7 +98,6 @@ See the [Roadmap blogpost](https://blog.radarr.video/development/update/2018/11/
 
 * Make sure all the required software mentioned above are installed
 * Clone the repository into your development machine ([*info*](https://help.github.com/desktop/guides/contributing/working-with-your-remote-repository-on-github-or-github-enterprise))
-* Grab the submodules `git submodule init && git submodule update`
 * Install the required Node Packages `yarn install`
 * Start gulp to monitor your dev environment for any changes that need post processing using `yarn start` command.
 
@@ -125,9 +112,9 @@ See the [Roadmap blogpost](https://blog.radarr.video/development/update/2018/11/
 
 ### Development
 
-* Open `Radarr.sln` in Visual Studio 2017 or run the build.sh script, if Mono is installed. Alternatively you can use Jetbrains Rider, since it works on all Platforms.
+* Open `Radarr.sln` in Visual Studio 2019 or run the build.sh script, if Mono is installed. Alternatively you can use Jetbrains Rider, since it works on all Platforms.
 * Make sure `NzbDrone.Console` is set as the startup project
-* Run `build.sh` before running
+* Run `build.sh` before running, or build in VS
 
 ## Supporters
 
@@ -157,4 +144,4 @@ Thank you to [<img src="/Logo/jetbrains.svg" alt="JetBrains" width="32"> JetBrai
 ## License
 
 * [GNU GPL v3](http://www.gnu.org/licenses/gpl.html)
-* Copyright 2010-2019
+* Copyright 2010-2020

appveyor.yml

@@ -1,3 +0,0 @@
-skip_commits:
-  files:
-    - '**/**'

azure-pipelines.yml

@@ -13,7 +13,7 @@ variables:
   buildName: '$(Build.SourceBranchName).$(radarrVersion)'
   sentryOrg: 'servarr'
   sentryUrl: 'https://sentry.servarr.com'
-  dotnetVersion: '3.1.300'
+  dotnetVersion: '3.1.302'
 
 trigger:
   branches:
@@ -101,6 +101,10 @@ stages:
         artifact: LinuxCoreTests
         displayName: Publish Linux Test Package
         condition: and(succeeded(), eq(variables['osName'], 'Windows'))
+      - publish: '$(testsFolder)/netcoreapp3.1/linux-musl-x64/publish'
+        artifact: LinuxMuslCoreTests
+        displayName: Publish Linux Musl Test Package
+        condition: and(succeeded(), eq(variables['osName'], 'Windows'))
       - publish: '$(testsFolder)/netcoreapp3.1/osx-x64/publish'
         artifact: MacCoreTests
         displayName: Publish MacOS Test Package
@@ -243,6 +247,14 @@ stages:
           tarCompression: 'gz'
           includeRootFolder: false
           rootFolderOrFile: $(artifactsFolder)/linux-x64/netcoreapp3.1
+      - task: ArchiveFiles@2
+        displayName: Create Linux Musl Core tar
+        inputs:
+          archiveFile: '$(Build.ArtifactStagingDirectory)/Radarr.$(buildName).linux-musl-core-x64.tar.gz'
+          archiveType: 'tar'
+          tarCompression: 'gz'
+          includeRootFolder: false
+          rootFolderOrFile: $(artifactsFolder)/linux-musl-x64/netcoreapp3.1
       - task: ArchiveFiles@2
         displayName: Create ARM32 Linux Core tar
         inputs:
@@ -259,6 +271,14 @@ stages:
           tarCompression: 'gz'
           includeRootFolder: false
           rootFolderOrFile: $(artifactsFolder)/linux-arm64/netcoreapp3.1
+      - task: ArchiveFiles@2
+        displayName: Create ARM64 Linux Musl Core tar
+        inputs:
+          archiveFile: '$(Build.ArtifactStagingDirectory)/Radarr.$(buildName).linux-musl-core-arm64.tar.gz'
+          archiveType: 'tar'
+          tarCompression: 'gz'
+          includeRootFolder: false
+          rootFolderOrFile: $(artifactsFolder)/linux-musl-arm64/netcoreapp3.1
       - publish: $(Build.ArtifactStagingDirectory)
         artifact: 'Packages'
         displayName: Publish Packages
@@ -382,18 +402,26 @@ stages:
       condition: and(succeeded(), eq(dependencies.Prepare.outputs['setVar.backendNotUpdated'], '0'))
       strategy:
         matrix:
-          mono510:
-            testName: 'Mono 5.10'
-            containerImage: servarr/testimages:mono-5.10
+          mono508:
+            testName: 'Mono 5.8'
+            artifactName: LinuxTests
+            containerImage: servarr/testimages:mono-5.8
           mono520:
             testName: 'Mono 5.20'
+            artifactName: LinuxTests
             containerImage: servarr/testimages:mono-5.20
-          mono608:
-            testName: 'Mono 6.8'
-            containerImage: servarr/testimages:mono-6.8
           mono610:
             testName: 'Mono 6.10'
+            artifactName: LinuxTests
             containerImage: servarr/testimages:mono-6.10
+          mono612:
+            testName: 'Mono 6.12'
+            artifactName: LinuxTests
+            containerImage: servarr/testimages:mono-6.12
+          alpine:
+            testName: 'Musl Net Core'
+            artifactName: LinuxMuslCoreTests
+            containerImage: servarr/testimages:alpine
 
       pool:
         vmImage: 'ubuntu-18.04'
@@ -403,8 +431,6 @@ stages:
       timeoutInMinutes: 10
         
       steps:
-      - bash: mono --version
-        displayName: Check Mono version
       - task: UseDotNet@2
         displayName: 'Install .net core'
         inputs:
@@ -414,10 +440,14 @@ stages:
         displayName: Download Test Artifact
         inputs:
           buildType: 'current'
-          artifactName: LinuxTests
+          artifactName: $(artifactName)
           targetPath: $(testsFolder)
+      - bash: find ${TESTSFOLDER} -name "Radarr.Test.Dummy" -exec chmod a+x {} \;
+        displayName: Make Test Dummy Executable
+        condition: and(succeeded(), ne(variables['osName'], 'Windows'))
       - bash: |
           chmod a+x ${TESTSFOLDER}/test.sh
+          ls -lR ${TESTSFOLDER}
           ${TESTSFOLDER}/test.sh Linux Unit Test
         displayName: Run Tests
       - task: PublishTestResults@2
@@ -525,22 +555,31 @@ stages:
       condition: and(succeeded(), eq(dependencies.Prepare.outputs['setVar.backendNotUpdated'], '0'))
       strategy:
         matrix:
-          mono510:
-            testName: 'Mono 5.10'
-            containerImage: servarr/testimages:mono-5.10
+          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
             containerImage: servarr/testimages:mono-5.20
-          mono608:
-            testName: 'Mono 6.8'
-            containerImage: servarr/testimages:mono-6.8
+            pattern: 'Radarr.**.linux.tar.gz'
           mono610:
             testName: 'Mono 6.10'
+            artifactName: LinuxTests
             containerImage: servarr/testimages:mono-6.10
-
-      variables:
             pattern: 'Radarr.**.linux.tar.gz'
-
+          mono612:
+            testName: 'Mono 6.12'
+            artifactName: LinuxTests
+            containerImage: servarr/testimages:mono-6.12
+            pattern: 'Radarr.**.linux.tar.gz'
+          alpine:
+            testName: 'Musl Net Core'
+            artifactName: LinuxCoreTests
+            containerImage: servarr/testimages:alpine
+            pattern: 'Radarr.**.linux-musl-core-x64.tar.gz'
       pool:
         vmImage: 'ubuntu-18.04'
 
@@ -549,8 +588,6 @@ stages:
       timeoutInMinutes: 15
         
       steps:
-      - bash: mono --version
-        displayName: Check Mono version
       - task: UseDotNet@2
         displayName: 'Install .net core'
         inputs:
@@ -560,7 +597,7 @@ stages:
         displayName: Download Test Artifact
         inputs:
           buildType: 'current'
-          artifactName: LinuxTests
+          artifactName: $(artifactName)
           targetPath: $(testsFolder)
       - task: DownloadPipelineArtifact@2
         displayName: Download Build Artifact

build.sh

@@ -71,7 +71,7 @@ Build()
 YarnInstall()
 {
     ProgressStart 'yarn install'
-    yarn install --frozen-lockfile
+    yarn install --frozen-lockfile --network-timeout 120000
     ProgressEnd 'yarn install'
 }
 
@@ -319,6 +319,7 @@ then
     then
         PackageTests "netcoreapp3.1" "win-x64"
         PackageTests "netcoreapp3.1" "linux-x64"
+        PackageTests "netcoreapp3.1" "linux-musl-x64"
         PackageTests "netcoreapp3.1" "osx-x64"
         PackageTests "net462" "linux-x64"
     else
@@ -350,7 +351,9 @@ then
     then
         Package "netcoreapp3.1" "win-x64"
         Package "netcoreapp3.1" "linux-x64"
+        Package "netcoreapp3.1" "linux-musl-x64"
         Package "netcoreapp3.1" "linux-arm64"
+        Package "netcoreapp3.1" "linux-musl-arm64"
         Package "netcoreapp3.1" "linux-arm"
         Package "netcoreapp3.1" "osx-x64"
         Package "net462" "linux-x64"

frontend/.eslintrc

@@ -1,293 +0,0 @@
-{
-  "parser": "babel-eslint",
-
-  "env": {
-    "browser": true,
-    "commonjs": true,
-    "node": true,
-    "es6": true
-  },
-
-  "globals": {
-    "expect": false,
-    "chai": false,
-    "sinon": false
-  },
-
-  "parserOptions": {
-    "ecmaVersion": 6,
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "modules": true,
-      "impliedStrict": true
-    }
-  },
-
-  "plugins": [
-    "filenames",
-    "react"
-  ],
-
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  },
-
-  "rules": {
-    "filenames/match-exported": ["error"],
-
-    # ECMAScript 6
-
-    "arrow-body-style": [0],
-    "arrow-parens": ["error", "always"],
-    "arrow-spacing": ["error", { "before": true, "after": true }],
-    "constructor-super": "error",
-    "generator-star-spacing": "off",
-    "no-class-assign": "error",
-    "no-confusing-arrow": "error",
-    "no-const-assign": "error",
-    "no-dupe-class-members": "error",
-    "no-duplicate-imports": "error",
-    "no-new-symbol": "error",
-    "no-this-before-super": "error",
-    "no-useless-escape": "error",
-    "no-useless-computed-key": "error",
-    "no-useless-constructor": "error",
-    "no-var": "warn",
-    "object-shorthand": ["error", "properties"],
-    "prefer-arrow-callback": "error",
-    "prefer-const": "warn",
-    "prefer-reflect": "off",
-    "prefer-rest-params": "off",
-    "prefer-spread": "warn",
-    "prefer-template": "error",
-    "require-yield": "off",
-    "template-curly-spacing": ["error", "never"],
-    "yield-star-spacing": "off",
-
-    # Possible Errors
-
-    "comma-dangle": "error",
-    "no-cond-assign": "error",
-    "no-console": "off",
-    "no-constant-condition": "warn",
-    "no-control-regex": "error",
-    "no-debugger": "off",
-    "no-dupe-args": "error",
-    "no-dupe-keys": "error",
-    "no-duplicate-case": "error",
-    "no-empty": "warn",
-    "no-empty-character-class": "error",
-    "no-ex-assign": "error",
-    "no-extra-boolean-cast": "error",
-    "no-extra-parens": ["error", "functions"],
-    "no-extra-semi": "error",
-    "no-func-assign": "error",
-    "no-inner-declarations": "error",
-    "no-invalid-regexp": "error",
-    "no-irregular-whitespace": "error",
-    "no-negated-in-lhs": "error",
-    "no-obj-calls": "error",
-    "no-regex-spaces": "error",
-    "no-sparse-arrays": "error",
-    "no-unexpected-multiline": "error",
-    "no-unreachable": "warn",
-    "no-unsafe-finally": "error",
-    "use-isnan": "error",
-    "valid-jsdoc": "off",
-    "valid-typeof": "error",
-
-    # Best Practices
-
-    "accessor-pairs": "off",
-    "array-callback-return": "warn",
-    "block-scoped-var": "warn",
-    "consistent-return": "off",
-    "curly": "error",
-    "default-case": "error",
-    "dot-location": ["error", "property"],
-    "dot-notation": "error",
-    "eqeqeq": ["error", "smart"],
-    "guard-for-in": "error",
-    "no-alert": "warn",
-    "no-caller": "error",
-    "no-case-declarations": "error",
-    "no-div-regex": "error",
-    "no-else-return": "error",
-    "no-empty-function": ["error", {"allow": ["arrowFunctions"]}],
-    "no-empty-pattern": "error",
-    "no-eval": "error",
-    "no-extend-native": "error",
-    "no-extra-bind": "error",
-    "no-fallthrough": "error",
-    "no-floating-decimal": "error",
-    "no-implicit-coercion": ["error", {
-        "boolean": false,
-        "number": true,
-        "string": true,
-        "allow": [/* "!!", "~", "*", "+" */]
-    }],
-    "no-implicit-globals": "error",
-    "no-implied-eval": "error",
-    "no-invalid-this": "off",
-    "no-iterator": "error",
-    "no-labels": "error",
-    "no-lone-blocks": "error",
-    "no-loop-func": "error",
-    "no-magic-numbers": ["off", {"ignoreArrayIndexes": true, "ignore": [0, 1] }],
-    "no-multi-spaces": "error",
-    "no-multi-str": "error",
-    "no-native-reassign": ["error", {"exceptions": ["console"]}],
-    "no-new": "off",
-    "no-new-func": "error",
-    "no-new-wrappers": "error",
-    "no-octal": "error",
-    "no-octal-escape": "error",
-    "no-param-reassign": "off",
-    "no-process-env": "off",
-    "no-proto": "error",
-    "no-redeclare": "error",
-    "no-return-assign": "warn",
-    "no-script-url": "error",
-    "no-self-assign": "error",
-    "no-self-compare": "error",
-    "no-sequences": "error",
-    "no-throw-literal": "error",
-    "no-unmodified-loop-condition": "error",
-    "no-unused-expressions": "error",
-    "no-unused-labels": "error",
-    "no-useless-call": "error",
-    "no-useless-concat": "error",
-    "no-void": "error",
-    "no-warning-comments": "off",
-    "no-with": "error",
-    "radix": ["error", "as-needed"],
-    "vars-on-top": "off",
-    "wrap-iife": ["error", "inside"],
-    "yoda": "error",
-
-    # Strict Mode
-
-    "strict": ["error", "never"],
-
-    # Variables
-
-    "init-declarations": ["error", "always"],
-    "no-catch-shadow": "error",
-    "no-delete-var": "error",
-    "no-label-var": "error",
-    "no-restricted-globals": "off",
-    "no-shadow": "error",
-    "no-shadow-restricted-names": "error",
-    "no-undef": "error",
-    "no-undef-init": "off",
-    "no-undefined": "off",
-    "no-unused-vars": ["error", { "args": "none", "ignoreRestSiblings": true }],
-    "no-use-before-define": "error",
-
-    # Node.js and CommonJS
-
-    "callback-return": "warn",
-    "global-require": "error",
-    "handle-callback-err": "warn",
-    "no-mixed-requires": "error",
-    "no-new-require": "error",
-    "no-path-concat": "error",
-    "no-process-exit": "error",
-
-    # Stylistic Issues
-
-    "array-bracket-spacing": ["error", "never"],
-    "block-spacing": ["error", "always"],
-    "brace-style": ["error", "1tbs", { "allowSingleLine": false }],
-    "camelcase": "off",
-    "comma-spacing": ["error", {"before": false, "after": true}],
-    "comma-style": ["error", "last"],
-    "computed-property-spacing": ["error", "never"],
-    "consistent-this": ["error", "self"],
-    "eol-last": "error",
-    "func-names": "off",
-    "func-style": ["error", "declaration"],
-    "indent": ["error", 2, {"SwitchCase": 1}],
-    "key-spacing": ["error", {"beforeColon": false, "afterColon": true}],
-    "keyword-spacing": ["error", { "before": true, "after": true}],
-    "lines-around-comment": ["error", { "beforeBlockComment": true, "afterBlockComment": false }],
-    "max-depth": ["error", {"maximum": 5}],
-    "max-nested-callbacks": ["error", 4],
-    "max-statements": "off",
-    "max-statements-per-line": ["error", { "max": 1 }],
-    "new-cap": ["error", {"capIsNewExceptions": ["$.Deferred", "DragDropContext", "DragLayer", "DragSource", "DropTarget"]}],
-    "new-parens": "error",
-    "newline-after-var": "off",
-    "newline-before-return": "off",
-    "newline-per-chained-call": "off",
-    "no-array-constructor": "error",
-    "no-bitwise": "error",
-    "no-continue": "error",
-    "no-inline-comments": "off",
-    "no-lonely-if": "warn",
-    "no-mixed-spaces-and-tabs": "error",
-    "no-multiple-empty-lines": ["error", { "max": 1 }],
-    "no-negated-condition": "warn",
-    "no-nested-ternary": "error",
-    "no-new-object": "error",
-    "no-plusplus": "off",
-    "no-restricted-syntax": "off",
-    "no-spaced-func": "error",
-    "no-ternary": "off",
-    "no-trailing-spaces": "error",
-    "no-underscore-dangle": ["error", { "allowAfterThis": true }],
-    "no-unneeded-ternary": "error",
-    "no-whitespace-before-property": "error",
-    "object-curly-spacing": ["error", "always"],
-    "one-var": ["error", "never"],
-    "one-var-declaration-per-line": ["error", "always"],
-    "operator-assignment": ["off", "never"],
-    "operator-linebreak": ["error", "after"],
-    "quote-props": ["error", "as-needed"],
-    "quotes": ["error", "single"],
-    "require-jsdoc": "off",
-    "semi": "error",
-    "semi-spacing": ["error", { "before": false, "after": true }],
-    "sort-vars": "off",
-    "space-before-blocks": ["error", "always"],
-    "space-before-function-paren": ["error", "never"],
-    "space-in-parens": "off",
-    "space-infix-ops": "off",
-    "space-unary-ops": "off",
-    "spaced-comment": "error",
-    "wrap-regex": "error",
-
-    # React
-
-    "react/jsx-boolean-value": [2, "always"],
-    "react/jsx-uses-vars": 2,
-    "react/jsx-closing-bracket-location": 2,
-    "react/jsx-tag-spacing": ["error"],
-    "react/jsx-curly-spacing": [2, "never"],
-    "react/jsx-equals-spacing": [2, "never"],
-    "react/jsx-indent-props": [2, 2],
-    "react/jsx-indent": [2, 2, { "indentLogicalExpressions": true }],
-    "react/jsx-key": 2,
-    "react/jsx-no-bind": [2, { "allowArrowFunctions": true }],
-    "react/jsx-no-duplicate-props": [2, { "ignoreCase": true }],
-    "react/jsx-max-props-per-line": [2, { "maximum": 2 }],
-    "react/jsx-handler-names": [2, { "eventHandlerPrefix": "(on|dispatch)", "eventHandlerPropPrefix": "on" }],
-    "react/jsx-no-undef": 2,
-    "react/jsx-pascal-case": 2,
-    "react/jsx-uses-react": 2,
-    // Explicitly disabled in case we want to enable them again
-    "react/no-did-mount-set-state": 0,
-    "react/no-did-update-set-state": 0,
-    "react/no-direct-mutation-state": 2,
-    "react/no-multi-comp": [2, { "ignoreStateless": true }],
-    "react/no-unknown-property": 2,
-    "react/prefer-es6-class": 2,
-    "react/prop-types": 2,
-    "react/react-in-jsx-scope": 2,
-    "react/self-closing-comp": 2,
-    "react/sort-comp": 2,
-    "react/jsx-wrap-multilines": 2
-  }
-}

frontend/.eslintrc.js

@@ -0,0 +1,327 @@
+const fs = require('fs');
+
+const dirs = fs
+  .readdirSync('frontend/src', { withFileTypes: true })
+  .filter((dirent) => dirent.isDirectory())
+  .map((dirent) => dirent.name)
+  .join('|');
+
+module.exports = {
+  parser: 'babel-eslint',
+
+  env: {
+    browser: true,
+    commonjs: true,
+    node: true,
+    es6: true
+  },
+
+  globals: {
+    expect: false,
+    chai: false,
+    sinon: false
+  },
+
+  parserOptions: {
+    ecmaVersion: 6,
+    sourceType: 'module',
+    ecmaFeatures: {
+      modules: true,
+      impliedStrict: true
+    }
+  },
+
+  plugins: [
+    'filenames',
+    'react',
+    'simple-import-sort',
+    'import'
+  ],
+
+  settings: {
+    react: {
+      version: 'detect'
+    }
+  },
+
+  rules: {
+    'filenames/match-exported': ['error'],
+
+    // ECMAScript 6
+
+    'arrow-body-style': [0],
+    'arrow-parens': ['error', 'always'],
+    'arrow-spacing': ['error', { before: true, after: true }],
+    'constructor-super': 'error',
+    'generator-star-spacing': 'off',
+    'no-class-assign': 'error',
+    'no-confusing-arrow': 'error',
+    'no-const-assign': 'error',
+    'no-dupe-class-members': 'error',
+    'no-duplicate-imports': 'error',
+    'no-new-symbol': 'error',
+    'no-this-before-super': 'error',
+    'no-useless-escape': 'error',
+    'no-useless-computed-key': 'error',
+    'no-useless-constructor': 'error',
+    'no-var': 'warn',
+    'object-shorthand': ['error', 'properties'],
+    'prefer-arrow-callback': 'error',
+    'prefer-const': 'warn',
+    'prefer-reflect': 'off',
+    'prefer-rest-params': 'off',
+    'prefer-spread': 'warn',
+    'prefer-template': 'error',
+    'require-yield': 'off',
+    'template-curly-spacing': ['error', 'never'],
+    'yield-star-spacing': 'off',
+
+    // Possible Errors
+
+    'comma-dangle': 'error',
+    'no-cond-assign': 'error',
+    'no-console': 'off',
+    'no-constant-condition': 'warn',
+    'no-control-regex': 'error',
+    'no-debugger': 'off',
+    'no-dupe-args': 'error',
+    'no-dupe-keys': 'error',
+    'no-duplicate-case': 'error',
+    'no-empty': 'warn',
+    'no-empty-character-class': 'error',
+    'no-ex-assign': 'error',
+    'no-extra-boolean-cast': 'error',
+    'no-extra-parens': ['error', 'functions'],
+    'no-extra-semi': 'error',
+    'no-func-assign': 'error',
+    'no-inner-declarations': 'error',
+    'no-invalid-regexp': 'error',
+    'no-irregular-whitespace': 'error',
+    'no-negated-in-lhs': 'error',
+    'no-obj-calls': 'error',
+    'no-regex-spaces': 'error',
+    'no-sparse-arrays': 'error',
+    'no-unexpected-multiline': 'error',
+    'no-unreachable': 'warn',
+    'no-unsafe-finally': 'error',
+    'use-isnan': 'error',
+    'valid-jsdoc': 'off',
+    'valid-typeof': 'error',
+
+    // Best Practices
+
+    'accessor-pairs': 'off',
+    'array-callback-return': 'warn',
+    'block-scoped-var': 'warn',
+    'consistent-return': 'off',
+    curly: 'error',
+    'default-case': 'error',
+    'dot-location': ['error', 'property'],
+    'dot-notation': 'error',
+    eqeqeq: ['error', 'smart'],
+    'guard-for-in': 'error',
+    'no-alert': 'warn',
+    'no-caller': 'error',
+    'no-case-declarations': 'error',
+    'no-div-regex': 'error',
+    'no-else-return': 'error',
+    'no-empty-function': ['error', { allow: ['arrowFunctions'] }],
+    'no-empty-pattern': 'error',
+    'no-eval': 'error',
+    'no-extend-native': 'error',
+    'no-extra-bind': 'error',
+    'no-fallthrough': 'error',
+    'no-floating-decimal': 'error',
+    'no-implicit-coercion': ['error', {
+      boolean: false,
+      number: true,
+      string: true,
+      allow: [/* "!!", "~", "*", "+" */]
+    }],
+    'no-implicit-globals': 'error',
+    'no-implied-eval': 'error',
+    'no-invalid-this': 'off',
+    'no-iterator': 'error',
+    'no-labels': 'error',
+    'no-lone-blocks': 'error',
+    'no-loop-func': 'error',
+    'no-magic-numbers': ['off', { ignoreArrayIndexes: true, ignore: [0, 1] }],
+    'no-multi-spaces': 'error',
+    'no-multi-str': 'error',
+    'no-native-reassign': ['error', { exceptions: ['console'] }],
+    'no-new': 'off',
+    'no-new-func': 'error',
+    'no-new-wrappers': 'error',
+    'no-octal': 'error',
+    'no-octal-escape': 'error',
+    'no-param-reassign': 'off',
+    'no-process-env': 'off',
+    'no-proto': 'error',
+    'no-redeclare': 'error',
+    'no-return-assign': 'warn',
+    'no-script-url': 'error',
+    'no-self-assign': 'error',
+    'no-self-compare': 'error',
+    'no-sequences': 'error',
+    'no-throw-literal': 'error',
+    'no-unmodified-loop-condition': 'error',
+    'no-unused-expressions': 'error',
+    'no-unused-labels': 'error',
+    'no-useless-call': 'error',
+    'no-useless-concat': 'error',
+    'no-void': 'error',
+    'no-warning-comments': 'off',
+    'no-with': 'error',
+    radix: ['error', 'as-needed'],
+    'vars-on-top': 'off',
+    'wrap-iife': ['error', 'inside'],
+    yoda: 'error',
+
+    // Strict Mode
+
+    strict: ['error', 'never'],
+
+    // Variables
+
+    'init-declarations': ['error', 'always'],
+    'no-catch-shadow': 'error',
+    'no-delete-var': 'error',
+    'no-label-var': 'error',
+    'no-restricted-globals': 'off',
+    'no-shadow': 'error',
+    'no-shadow-restricted-names': 'error',
+    'no-undef': 'error',
+    'no-undef-init': 'off',
+    'no-undefined': 'off',
+    'no-unused-vars': ['error', { args: 'none', ignoreRestSiblings: true }],
+    'no-use-before-define': 'error',
+
+    // Node.js and CommonJS
+
+    'callback-return': 'warn',
+    'global-require': 'error',
+    'handle-callback-err': 'warn',
+    'no-mixed-requires': 'error',
+    'no-new-require': 'error',
+    'no-path-concat': 'error',
+    'no-process-exit': 'error',
+
+    // Stylistic Issues
+
+    'array-bracket-spacing': ['error', 'never'],
+    'block-spacing': ['error', 'always'],
+    'brace-style': ['error', '1tbs', { allowSingleLine: false }],
+    camelcase: 'off',
+    'comma-spacing': ['error', { before: false, after: true }],
+    'comma-style': ['error', 'last'],
+    'computed-property-spacing': ['error', 'never'],
+    'consistent-this': ['error', 'self'],
+    'eol-last': 'error',
+    'func-names': 'off',
+    'func-style': ['error', 'declaration'],
+    indent: ['error', 2, { SwitchCase: 1 }],
+    'key-spacing': ['error', { beforeColon: false, afterColon: true }],
+    'keyword-spacing': ['error', { before: true, after: true }],
+    'lines-around-comment': ['error', { beforeBlockComment: true, afterBlockComment: false }],
+    'max-depth': ['error', { maximum: 5 }],
+    'max-nested-callbacks': ['error', 4],
+    'max-statements': 'off',
+    'max-statements-per-line': ['error', { max: 1 }],
+    'new-cap': ['error', { capIsNewExceptions: ['$.Deferred', 'DragDropContext', 'DragLayer', 'DragSource', 'DropTarget'] }],
+    'new-parens': 'error',
+    'newline-after-var': 'off',
+    'newline-before-return': 'off',
+    'newline-per-chained-call': 'off',
+    'no-array-constructor': 'error',
+    'no-bitwise': 'error',
+    'no-continue': 'error',
+    'no-inline-comments': 'off',
+    'no-lonely-if': 'warn',
+    'no-mixed-spaces-and-tabs': 'error',
+    'no-multiple-empty-lines': ['error', { max: 1 }],
+    'no-negated-condition': 'warn',
+    'no-nested-ternary': 'error',
+    'no-new-object': 'error',
+    'no-plusplus': 'off',
+    'no-restricted-syntax': 'off',
+    'no-spaced-func': 'error',
+    'no-ternary': 'off',
+    'no-trailing-spaces': 'error',
+    'no-underscore-dangle': ['error', { allowAfterThis: true }],
+    'no-unneeded-ternary': 'error',
+    'no-whitespace-before-property': 'error',
+    'object-curly-spacing': ['error', 'always'],
+    'one-var': ['error', 'never'],
+    'one-var-declaration-per-line': ['error', 'always'],
+    'operator-assignment': ['off', 'never'],
+    'operator-linebreak': ['error', 'after'],
+    'quote-props': ['error', 'as-needed'],
+    quotes: ['error', 'single'],
+    'require-jsdoc': 'off',
+    semi: 'error',
+    'semi-spacing': ['error', { before: false, after: true }],
+    'sort-vars': 'off',
+    'space-before-blocks': ['error', 'always'],
+    'space-before-function-paren': ['error', 'never'],
+    'space-in-parens': 'off',
+    'space-infix-ops': 'off',
+    'space-unary-ops': 'off',
+    'spaced-comment': 'error',
+    'wrap-regex': 'error',
+
+    // ImportSort
+
+    'simple-import-sort/sort': 'error',
+    'import/newline-after-import': 'error',
+
+    // React
+
+    'react/jsx-boolean-value': [2, 'always'],
+    'react/jsx-uses-vars': 2,
+    'react/jsx-closing-bracket-location': 2,
+    'react/jsx-tag-spacing': ['error'],
+    'react/jsx-curly-spacing': [2, 'never'],
+    'react/jsx-equals-spacing': [2, 'never'],
+    'react/jsx-indent-props': [2, 2],
+    'react/jsx-indent': [2, 2, { indentLogicalExpressions: true }],
+    'react/jsx-key': 2,
+    'react/jsx-no-bind': [2, { allowArrowFunctions: true }],
+    'react/jsx-no-duplicate-props': [2, { ignoreCase: true }],
+    'react/jsx-max-props-per-line': [2, { maximum: 2 }],
+    'react/jsx-handler-names': [2, { eventHandlerPrefix: '(on|dispatch)', eventHandlerPropPrefix: 'on' }],
+    'react/jsx-no-undef': 2,
+    'react/jsx-pascal-case': 2,
+    'react/jsx-uses-react': 2,
+    // Explicitly disabled in case we want to enable them again
+    'react/no-did-mount-set-state': 0,
+    'react/no-did-update-set-state': 0,
+    'react/no-direct-mutation-state': 2,
+    'react/no-multi-comp': [2, { ignoreStateless: true }],
+    'react/no-unknown-property': 2,
+    'react/prefer-es6-class': 2,
+    'react/prop-types': 2,
+    'react/react-in-jsx-scope': 2,
+    'react/self-closing-comp': 2,
+    'react/sort-comp': 2,
+    'react/jsx-wrap-multilines': 2
+  },
+  overrides: [
+    {
+      files: ['*.js'],
+      rules: {
+        'simple-import-sort/sort': [
+          'error',
+          {
+            groups: [
+              // Packages
+              // Absolute Paths
+              // Relative Paths
+              // Css
+              ['^@?\\w', `^(${dirs})(/.*|$)`, '^\\.', '^\\..*css$']
+            ]
+          }
+        ]
+      }
+    }
+  ]
+};

frontend/gulp/build.js

@@ -10,8 +10,7 @@ gulp.task('build',
       'webpack',
       'copyHtml',
       'copyFonts',
-      'copyImages',
-      'copyJs'
+      'copyImages'
     )
   )
 );

frontend/gulp/copy.js

@@ -5,17 +5,6 @@ const cache = require('gulp-cached');
 const livereload = require('gulp-livereload');
 const paths = require('./helpers/paths.js');
 
-gulp.task('copyJs', () => {
-  return gulp.src(
-    [
-      path.join(paths.src.root, 'polyfills.js')
-    ], { base: paths.src.root })
-    .pipe(cache('copyJs'))
-    .pipe(print())
-    .pipe(gulp.dest(paths.dest.root))
-    .pipe(livereload());
-});
-
 gulp.task('copyHtml', () => {
   return gulp.src(paths.src.html, { base: paths.src.root })
     .pipe(cache('copyHtml'))

frontend/gulp/webpack.js

@@ -4,6 +4,7 @@ const livereload = require('gulp-livereload');
 const path = require('path');
 const webpack = require('webpack');
 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 TerserPlugin = require('terser-webpack-plugin');
@@ -13,6 +14,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 distFolder = path.resolve(frontendFolder, '..', '_output', uiFolder);
 
@@ -46,6 +48,8 @@ HtmlWebpackPlugin.prototype.injectAssetsIntoHtml = function(html, assets, assetT
 };
 
 const plugins = [
+  new OptimizeCssAssetsPlugin({}),
+
   new webpack.DefinePlugin({
     __DEV__: !isProduction,
     'process.env.NODE_ENV': isProduction ? JSON.stringify('production') : JSON.stringify('development')
@@ -121,7 +125,9 @@ const config = {
         use: {
           loader: 'worker-loader',
           options: {
-            name: '[name].js'
+            name: '[name].js',
+            inline: inlineWebWorkers,
+            fallback: !inlineWebWorkers
           }
         }
       },
@@ -251,7 +257,7 @@ gulp.task('webpack', () => {
 gulp.task('webpackWatch', () => {
   config.watch = true;
 
-  return webpackStream(config)
+  return webpackStream(config, webpack)
     .on('error', errorHandler)
     .pipe(gulp.dest('_output/UI'))
     .on('error', errorHandler)

frontend/src/Activity/Blacklist/Blacklist.js

@@ -1,16 +1,17 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { align, icons } from 'Helpers/Props';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import TablePager from 'Components/Table/TablePager';
-import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
-import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
-import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
-import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import { align, icons } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import BlacklistRowConnector from './BlacklistRowConnector';
 
 class Blacklist extends Component {
@@ -36,7 +37,7 @@ class Blacklist extends Component {
         <PageToolbar>
           <PageToolbarSection>
             <PageToolbarButton
-              label="Clear"
+              label={translate('Clear')}
               iconName={icons.CLEAR}
               isSpinning={isClearingBlacklistExecuting}
               onPress={onClearBlacklistPress}
@@ -49,14 +50,14 @@ class Blacklist extends Component {
               columns={columns}
             >
               <PageToolbarButton
-                label="Options"
+                label={translate('Options')}
                 iconName={icons.TABLE}
               />
             </TableOptionsModalWrapper>
           </PageToolbarSection>
         </PageToolbar>
 
-        <PageContentBodyConnector>
+        <PageContentBody>
           {
             isFetching && !isPopulated &&
               <LoadingIndicator />
@@ -103,7 +104,7 @@ class Blacklist extends Component {
                 />
               </div>
           }
-        </PageContentBodyConnector>
+        </PageContentBody>
       </PageContent>
     );
   }

frontend/src/Activity/Blacklist/BlacklistConnector.js

@@ -2,12 +2,12 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
+import * as commandNames from 'Commands/commandNames';
 import withCurrentPage from 'Components/withCurrentPage';
-import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
 import * as blacklistActions from 'Store/Actions/blacklistActions';
 import { executeCommand } from 'Store/Actions/commandActions';
-import * as commandNames from 'Commands/commandNames';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
 import Blacklist from './Blacklist';
 
 function createMapStateToProps() {

frontend/src/Activity/Blacklist/BlacklistDetailsModal.js

@@ -1,13 +1,13 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import Button from 'Components/Link/Button';
 import DescriptionList from 'Components/DescriptionList/DescriptionList';
 import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
+import Button from 'Components/Link/Button';
 import Modal from 'Components/Modal/Modal';
-import ModalContent from 'Components/Modal/ModalContent';
-import ModalHeader from 'Components/Modal/ModalHeader';
 import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
 
 class BlacklistDetailsModal extends Component {
 

frontend/src/Activity/Blacklist/BlacklistRow.js

@@ -1,13 +1,13 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { icons, kinds } from 'Helpers/Props';
 import IconButton from 'Components/Link/IconButton';
 import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
-import TableRow from 'Components/Table/TableRow';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
-import MovieQuality from 'Movie/MovieQuality';
+import TableRow from 'Components/Table/TableRow';
+import { icons, kinds } from 'Helpers/Props';
 import MovieFormats from 'Movie/MovieFormats';
 import MovieLanguage from 'Movie/MovieLanguage';
+import MovieQuality from 'Movie/MovieQuality';
 import MovieTitleLink from 'Movie/MovieTitleLink';
 import BlacklistDetailsModal from './BlacklistDetailsModal';
 import styles from './BlacklistRow.css';

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

@@ -1,12 +1,12 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import formatDateTime from 'Utilities/Date/formatDateTime';
-import formatAge from 'Utilities/Number/formatAge';
-import Link from 'Components/Link/Link';
 import DescriptionList from 'Components/DescriptionList/DescriptionList';
 import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
-import DescriptionListItemTitle from 'Components/DescriptionList/DescriptionListItemTitle';
 import DescriptionListItemDescription from 'Components/DescriptionList/DescriptionListItemDescription';
+import DescriptionListItemTitle from 'Components/DescriptionList/DescriptionListItemTitle';
+import Link from 'Components/Link/Link';
+import formatDateTime from 'Utilities/Date/formatDateTime';
+import formatAge from 'Utilities/Number/formatAge';
 import styles from './HistoryDetails.css';
 
 function HistoryDetails(props) {

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

@@ -1,13 +1,13 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { kinds } from 'Helpers/Props';
 import Button from 'Components/Link/Button';
 import SpinnerButton from 'Components/Link/SpinnerButton';
 import Modal from 'Components/Modal/Modal';
-import ModalContent from 'Components/Modal/ModalContent';
-import ModalHeader from 'Components/Modal/ModalHeader';
 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 { kinds } from 'Helpers/Props';
 import HistoryDetails from './HistoryDetails';
 import styles from './HistoryDetailsModal.css';
 

frontend/src/Activity/History/History.js

@@ -1,17 +1,18 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { align, icons } from 'Helpers/Props';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import FilterMenu from 'Components/Menu/FilterMenu';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import TablePager from 'Components/Table/TablePager';
-import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
-import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
-import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
-import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
-import FilterMenu from 'Components/Menu/FilterMenu';
+import { align, icons } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import HistoryRowConnector from './HistoryRowConnector';
 
 class History extends Component {
@@ -46,7 +47,7 @@ class History extends Component {
         <PageToolbar>
           <PageToolbarSection>
             <PageToolbarButton
-              label="Refresh"
+              label={translate('Refresh')}
               iconName={icons.REFRESH}
               isSpinning={isFetching}
               onPress={onFirstPagePress}
@@ -59,7 +60,7 @@ class History extends Component {
               columns={columns}
             >
               <PageToolbarButton
-                label="Options"
+                label={translate('Options')}
                 iconName={icons.TABLE}
               />
             </TableOptionsModalWrapper>
@@ -74,7 +75,7 @@ class History extends Component {
           </PageToolbarSection>
         </PageToolbar>
 
-        <PageContentBodyConnector>
+        <PageContentBody>
           {
             isFetchingAny && !isAllPopulated &&
               <LoadingIndicator />
@@ -125,7 +126,7 @@ class History extends Component {
                 />
               </div>
           }
-        </PageContentBodyConnector>
+        </PageContentBody>
       </PageContent>
     );
   }

frontend/src/Activity/History/HistoryConnector.js

@@ -2,9 +2,9 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
 import withCurrentPage from 'Components/withCurrentPage';
 import * as historyActions from 'Store/Actions/historyActions';
+import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
 import History from './History';
 
 function createMapStateToProps() {

frontend/src/Activity/History/HistoryEventTypeCell.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { icons, kinds } from 'Helpers/Props';
 import Icon from 'Components/Icon';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import { icons, kinds } from 'Helpers/Props';
 import styles from './HistoryEventTypeCell.css';
 
 function getIconName(eventType) {

frontend/src/Activity/History/HistoryRow.js

@@ -1,16 +1,16 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { icons } from 'Helpers/Props';
 import IconButton from 'Components/Link/IconButton';
 import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
-import TableRow from 'Components/Table/TableRow';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
-import MovieQuality from 'Movie/MovieQuality';
+import TableRow from 'Components/Table/TableRow';
+import { icons } from 'Helpers/Props';
 import MovieFormats from 'Movie/MovieFormats';
 import MovieLanguage from 'Movie/MovieLanguage';
+import MovieQuality from 'Movie/MovieQuality';
 import MovieTitleLink from 'Movie/MovieTitleLink';
-import HistoryEventTypeCell from './HistoryEventTypeCell';
 import HistoryDetailsModal from './Details/HistoryDetailsModal';
+import HistoryEventTypeCell from './HistoryEventTypeCell';
 import styles from './HistoryRow.css';
 
 class HistoryRow extends Component {

frontend/src/Activity/Queue/Queue.js

@@ -1,27 +1,28 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
+import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
+import TablePager from 'Components/Table/TablePager';
+import { align, icons } from 'Helpers/Props';
 import getRemovedItems from 'Utilities/Object/getRemovedItems';
 import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
+import translate from 'Utilities/String/translate';
 import getSelectedIds from 'Utilities/Table/getSelectedIds';
 import removeOldSelectedState from 'Utilities/Table/removeOldSelectedState';
 import selectAll from 'Utilities/Table/selectAll';
 import toggleSelected from 'Utilities/Table/toggleSelected';
-import { align, icons } from 'Helpers/Props';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import Table from 'Components/Table/Table';
-import TableBody from 'Components/Table/TableBody';
-import TablePager from 'Components/Table/TablePager';
-import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
-import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
-import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
-import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
-import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
-import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
-import RemoveQueueItemsModal from './RemoveQueueItemsModal';
 import QueueOptionsConnector from './QueueOptionsConnector';
 import QueueRowConnector from './QueueRowConnector';
+import RemoveQueueItemsModal from './RemoveQueueItemsModal';
 
 class Queue extends Component {
 
@@ -152,7 +153,7 @@ class Queue extends Component {
         <PageToolbar>
           <PageToolbarSection>
             <PageToolbarButton
-              label="Refresh"
+              label={translate('Refresh')}
               iconName={icons.REFRESH}
               isSpinning={isRefreshing}
               onPress={onRefreshPress}
@@ -186,14 +187,14 @@ class Queue extends Component {
               optionsComponent={QueueOptionsConnector}
             >
               <PageToolbarButton
-                label="Options"
+                label={translate('Options')}
                 iconName={icons.TABLE}
               />
             </TableOptionsModalWrapper>
           </PageToolbarSection>
         </PageToolbar>
 
-        <PageContentBodyConnector>
+        <PageContentBody>
           {
             isRefreshing && !isAllPopulated &&
               <LoadingIndicator />
@@ -250,7 +251,7 @@ class Queue extends Component {
                 />
               </div>
           }
-        </PageContentBodyConnector>
+        </PageContentBody>
 
         <RemoveQueueItemsModal
           isOpen={isConfirmRemoveModalOpen}

frontend/src/Activity/Queue/QueueConnector.js

@@ -2,12 +2,12 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
+import * as commandNames from 'Commands/commandNames';
 import withCurrentPage from 'Components/withCurrentPage';
-import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
 import { executeCommand } from 'Store/Actions/commandActions';
 import * as queueActions from 'Store/Actions/queueActions';
-import * as commandNames from 'Commands/commandNames';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
 import Queue from './Queue';
 
 function createMapStateToProps() {

frontend/src/Activity/Queue/QueueDetails.js

@@ -1,8 +1,8 @@
 import moment from 'moment';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { icons, kinds } from 'Helpers/Props';
 import Icon from 'Components/Icon';
+import { icons, kinds } from 'Helpers/Props';
 
 function QueueDetails(props) {
   const {

frontend/src/Activity/Queue/QueueOptions.js

@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import React, { Component, Fragment } from 'react';
-import { inputTypes } from 'Helpers/Props';
 import FormGroup from 'Components/Form/FormGroup';
-import FormLabel from 'Components/Form/FormLabel';
 import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import { inputTypes } from 'Helpers/Props';
 
 class QueueOptions extends Component {
 

frontend/src/Activity/Queue/QueueRow.js

@@ -1,23 +1,23 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import formatBytes from 'Utilities/Number/formatBytes';
-import { icons, kinds } from 'Helpers/Props';
+import ProtocolLabel from 'Activity/Queue/ProtocolLabel';
 import IconButton from 'Components/Link/IconButton';
 import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
 import ProgressBar from 'Components/ProgressBar';
-import TableRow from 'Components/Table/TableRow';
 // import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
-import ProtocolLabel from 'Activity/Queue/ProtocolLabel';
-import MovieQuality from 'Movie/MovieQuality';
+import TableRow from 'Components/Table/TableRow';
+import { icons, kinds } from 'Helpers/Props';
+import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
 import MovieFormats from 'Movie/MovieFormats';
 import MovieLanguage from 'Movie/MovieLanguage';
-import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
+import MovieQuality from 'Movie/MovieQuality';
 import MovieTitleLink from 'Movie/MovieTitleLink';
+import formatBytes from 'Utilities/Number/formatBytes';
 import QueueStatusCell from './QueueStatusCell';
-import TimeleftCell from './TimeleftCell';
 import RemoveQueueItemModal from './RemoveQueueItemModal';
+import TimeleftCell from './TimeleftCell';
 import styles from './QueueRow.css';
 
 class QueueRow extends Component {

frontend/src/Activity/Queue/QueueStatusCell.js

@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { icons, kinds, tooltipPositions } from 'Helpers/Props';
 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 styles from './QueueStatusCell.css';
 
 function getDetailedPopoverBody(statusMessages) {
@@ -51,10 +51,6 @@ function QueueStatusCell(props) {
   let iconKind = kinds.DEFAULT;
   let title = 'Downloading';
 
-  if (hasWarning) {
-    iconKind = kinds.WARNING;
-  }
-
   if (status === 'paused') {
     iconName = icons.PAUSED;
     title = 'Paused';
@@ -71,17 +67,24 @@ function QueueStatusCell(props) {
 
     if (trackedDownloadState === 'importPending') {
       title += ' - Waiting to Import';
+      iconKind = kinds.PURPLE;
     }
 
     if (trackedDownloadState === 'importing') {
       title += ' - Importing';
+      iconKind = kinds.PURPLE;
     }
 
     if (trackedDownloadState === 'failedPending') {
       title += ' - Waiting to Process';
+      iconKind = kinds.DANGER;
     }
   }
 
+  if (hasWarning) {
+    iconKind = kinds.WARNING;
+  }
+
   if (status === 'delay') {
     iconName = icons.PENDING;
     title = 'Pending';

frontend/src/Activity/Queue/RemoveQueueItemModal.js

@@ -1,15 +1,15 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { inputTypes, kinds, sizes } from 'Helpers/Props';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
 import Button from 'Components/Link/Button';
 import Modal from 'Components/Modal/Modal';
-import FormGroup from 'Components/Form/FormGroup';
-import FormLabel from 'Components/Form/FormLabel';
-import FormInputGroup from 'Components/Form/FormInputGroup';
-import ModalContent from 'Components/Modal/ModalContent';
-import ModalHeader from 'Components/Modal/ModalHeader';
 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 { inputTypes, kinds, sizes } from 'Helpers/Props';
 
 class RemoveQueueItemModal extends Component {
 

frontend/src/Activity/Queue/RemoveQueueItemsModal.js

@@ -1,15 +1,15 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { inputTypes, kinds, sizes } from 'Helpers/Props';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
 import Button from 'Components/Link/Button';
 import Modal from 'Components/Modal/Modal';
-import FormGroup from 'Components/Form/FormGroup';
-import FormLabel from 'Components/Form/FormLabel';
-import FormInputGroup from 'Components/Form/FormInputGroup';
-import ModalContent from 'Components/Modal/ModalContent';
-import ModalHeader from 'Components/Modal/ModalHeader';
 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 { inputTypes, kinds, sizes } from 'Helpers/Props';
 import styles from './RemoveQueueItemsModal.css';
 
 class RemoveQueueItemsModal extends Component {

frontend/src/Activity/Queue/Status/QueueStatusConnector.js

@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { fetchQueueStatus } from 'Store/Actions/queueActions';
 import PageSidebarStatus from 'Components/Page/Sidebar/PageSidebarStatus';
+import { fetchQueueStatus } from 'Store/Actions/queueActions';
 
 function createMapStateToProps() {
   return createSelector(

frontend/src/Activity/Queue/TimeleftCell.js

@@ -1,10 +1,10 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
 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 TableRowCell from 'Components/Table/Cells/TableRowCell';
 import styles from './TimeleftCell.css';
 
 function TimeleftCell(props) {
@@ -19,7 +19,7 @@ function TimeleftCell(props) {
     timeFormat
   } = props;
 
-  if (status === 'Delay') {
+  if (status === 'delay') {
     const date = getRelativeDate(estimatedCompletionTime, shortDateFormat, showRelativeDates);
     const time = formatTime(estimatedCompletionTime, timeFormat, { includeMinuteZero: true });
 
@@ -33,7 +33,7 @@ function TimeleftCell(props) {
     );
   }
 
-  if (status === 'DownloadClientUnavailable') {
+  if (status === 'downloadClientUnavailable') {
     const date = getRelativeDate(estimatedCompletionTime, shortDateFormat, showRelativeDates);
     const time = formatTime(estimatedCompletionTime, timeFormat, { includeMinuteZero: true });
 
@@ -47,7 +47,7 @@ function TimeleftCell(props) {
     );
   }
 
-  if (!timeleft) {
+  if (!timeleft || status === 'completed' || status === 'failed') {
     return (
       <TableRowCell className={styles.timeleft}>
         -

frontend/src/AddMovie/AddListMovie/AddListMovieConnector.js

@@ -1,113 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import createAddMovieClientSideCollectionItemsSelector from 'Store/Selectors/createAddMovieClientSideCollectionItemsSelector';
-import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
-import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
-import { fetchListMovies, clearAddMovie, setListMovieSort, setListMovieFilter, setListMovieView, setListMovieTableOption } from 'Store/Actions/addMovieActions';
-import scrollPositions from 'Store/scrollPositions';
-import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
-import withScrollPosition from 'Components/withScrollPosition';
-import AddListMovie from './AddListMovie';
-
-function createMapStateToProps() {
-  return createSelector(
-    createAddMovieClientSideCollectionItemsSelector('addMovie'),
-    createDimensionsSelector(),
-    (
-      movies,
-      dimensionsState
-    ) => {
-      return {
-        ...movies,
-        isSmallScreen: dimensionsState.isSmallScreen
-      };
-    }
-  );
-}
-
-function createMapDispatchToProps(dispatch, props) {
-  return {
-    dispatchFetchRootFolders() {
-      dispatch(fetchRootFolders());
-    },
-
-    dispatchFetchListMovies() {
-      dispatch(fetchListMovies());
-    },
-
-    onTableOptionChange(payload) {
-      dispatch(setListMovieTableOption(payload));
-    },
-
-    onSortSelect(sortKey) {
-      dispatch(setListMovieSort({ sortKey }));
-    },
-
-    onFilterSelect(selectedFilterKey) {
-      dispatch(setListMovieFilter({ selectedFilterKey }));
-    },
-
-    dispatchSetListMovieView(view) {
-      dispatch(setListMovieView({ view }));
-    },
-
-    dispatchClearListMovie() {
-      dispatch(clearAddMovie());
-    }
-  };
-}
-
-class AddListMovieConnector extends Component {
-
-  componentDidMount() {
-    registerPagePopulator(this.repopulate);
-    this.props.dispatchFetchRootFolders();
-    this.props.dispatchFetchListMovies();
-  }
-
-  componentWillUnmount() {
-    this.props.dispatchClearListMovie();
-    unregisterPagePopulator(this.repopulate);
-  }
-
-  //
-  // Listeners
-
-  onViewSelect = (view) => {
-    this.props.dispatchSetListMovieView(view);
-  }
-
-  onScroll = ({ scrollTop }) => {
-    scrollPositions.addMovie = scrollTop;
-  }
-
-  //
-  // Render
-
-  render() {
-    return (
-      <AddListMovie
-        {...this.props}
-        onViewSelect={this.onViewSelect}
-        onScroll={this.onScroll}
-        onSaveSelected={this.onSaveSelected}
-      />
-    );
-  }
-}
-
-AddListMovieConnector.propTypes = {
-  isSmallScreen: PropTypes.bool.isRequired,
-  view: PropTypes.string.isRequired,
-  dispatchFetchRootFolders: PropTypes.func.isRequired,
-  dispatchFetchListMovies: PropTypes.func.isRequired,
-  dispatchClearListMovie: PropTypes.func.isRequired,
-  dispatchSetListMovieView: PropTypes.func.isRequired
-};
-
-export default withScrollPosition(
-  connect(createMapStateToProps, createMapDispatchToProps)(AddListMovieConnector),
-  'addMovie'
-);

frontend/src/AddMovie/AddListMovie/Overview/AddListMovieOverviewConnector.js

@@ -1,23 +0,0 @@
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import createExistingMovieSelector from 'Store/Selectors/createExistingMovieSelector';
-import createExclusionMovieSelector from 'Store/Selectors/createExclusionMovieSelector';
-import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
-import AddListMovieOverview from './AddListMovieOverview';
-
-function createMapStateToProps() {
-  return createSelector(
-    createExistingMovieSelector(),
-    createExclusionMovieSelector(),
-    createDimensionsSelector(),
-    (isExistingMovie, isExclusionMovie, dimensions) => {
-      return {
-        isExistingMovie,
-        isExclusionMovie,
-        isSmallScreen: dimensions.isSmallScreen
-      };
-    }
-  );
-}
-
-export default connect(createMapStateToProps)(AddListMovieOverview);

frontend/src/AddMovie/AddListMovie/Overview/AddListMovieOverviews.css

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

frontend/src/AddMovie/AddListMovie/Table/AddListMovieRow.css

@@ -1,56 +0,0 @@
-.status {
-  composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
-
-  flex: 0 0 60px;
-}
-
-.sortTitle {
-  composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
-
-  flex: 4 0 110px;
-}
-
-.studio {
-  composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
-
-  flex: 2 0 90px;
-}
-
-.inCinemas,
-.physicalRelease,
-.genres {
-  composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
-
-  flex: 0 0 180px;
-}
-
-.movieStatus,
-.certification {
-  composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
-
-  flex: 0 0 100px;
-}
-
-.ratings {
-  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
-
-  flex: 0 0 80px;
-}
-
-.tags {
-  composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
-
-  flex: 1 0 60px;
-}
-
-.actions {
-  composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
-
-  flex: 0 1 90px;
-}
-
-.checkInput {
-  composes: input from '~Components/Form/CheckInput.css';
-
-  margin-top: 0;
-}

frontend/src/AddMovie/AddListMovie/Table/MovieStatusCell.js

@@ -1,62 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { icons } from 'Helpers/Props';
-import Icon from 'Components/Icon';
-import VirtualTableRowCell from 'Components/Table/Cells/TableRowCell';
-import styles from './MovieStatusCell.css';
-
-function MovieStatusCell(props) {
-  const {
-    className,
-    status,
-    component: Component,
-    ...otherProps
-  } = props;
-
-  return (
-    <Component
-      className={className}
-      {...otherProps}
-    >
-      {
-        status === 'announced' ?
-          <Icon
-            className={styles.statusIcon}
-            name={icons.ANNOUNCED}
-            title={'Movie is announced'}
-          /> : null
-      }
-
-      {
-        status === 'inCinemas' ?
-          <Icon
-            className={styles.statusIcon}
-            name={icons.IN_CINEMAS}
-            title={'Movie is in Cinemas'}
-          /> : null
-      }
-
-      {
-        status === 'released' ?
-          <Icon
-            className={styles.statusIcon}
-            name={icons.MOVIE_FILE}
-            title={'Movie is released'}
-          /> : null
-      }
-    </Component>
-  );
-}
-
-MovieStatusCell.propTypes = {
-  className: PropTypes.string.isRequired,
-  status: PropTypes.string.isRequired,
-  component: PropTypes.elementType
-};
-
-MovieStatusCell.defaultProps = {
-  className: styles.status,
-  component: VirtualTableRowCell
-};
-
-export default MovieStatusCell;

frontend/src/AddMovie/AddNewMovie/AddNewMovie.js

@@ -1,14 +1,15 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import getErrorMessage from 'Utilities/Object/getErrorMessage';
-import { icons, kinds } from 'Helpers/Props';
+import TextInput from 'Components/Form/TextInput';
+import Icon from 'Components/Icon';
 import Button from 'Components/Link/Button';
 import Link from 'Components/Link/Link';
-import Icon from 'Components/Icon';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import TextInput from 'Components/Form/TextInput';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
+import { icons, kinds } from 'Helpers/Props';
+import getErrorMessage from 'Utilities/Object/getErrorMessage';
+import translate from 'Utilities/String/translate';
 import AddNewMovieSearchResultConnector from './AddNewMovieSearchResultConnector';
 import styles from './AddNewMovie.css';
 
@@ -88,7 +89,7 @@ class AddNewMovie extends Component {
 
     return (
       <PageContent title="Add New Movie">
-        <PageContentBodyConnector>
+        <PageContentBody>
           <div className={styles.searchContainer}>
             <div className={styles.searchIconContainer}>
               <Icon
@@ -166,9 +167,9 @@ class AddNewMovie extends Component {
               null :
               <div className={styles.message}>
                 <div className={styles.helpText}>
-                  It's easy to add a new movie, just start typing the name the movie you want to add.
+                  {translate('AddNewMessage')}
                 </div>
-                <div>You can also search using TMDB ID of a movie. eg. tmdb:71663</div>
+                <div>{translate('AddNewTmdbIdMessage')}</div>
               </div>
           }
 
@@ -191,7 +192,7 @@ class AddNewMovie extends Component {
           }
 
           <div />
-        </PageContentBodyConnector>
+        </PageContentBody>
       </PageContent>
     );
   }

frontend/src/AddMovie/AddNewMovie/AddNewMovieConnector.js

@@ -2,10 +2,10 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import parseUrl from 'Utilities/String/parseUrl';
-import { lookupMovie, clearAddMovie } from 'Store/Actions/addMovieActions';
+import { clearAddMovie, lookupMovie } from 'Store/Actions/addMovieActions';
 import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
 import { fetchNetImportExclusions } from 'Store/Actions/Settings/netImportExclusions';
+import parseUrl from 'Utilities/String/parseUrl';
 import AddNewMovie from './AddNewMovie';
 
 function createMapStateToProps() {

frontend/src/AddMovie/AddNewMovie/AddNewMovieModalContent.js

@@ -1,16 +1,16 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { kinds, inputTypes } from 'Helpers/Props';
-import SpinnerButton from 'Components/Link/SpinnerButton';
+import CheckInput from 'Components/Form/CheckInput';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
-import FormLabel from 'Components/Form/FormLabel';
 import FormInputGroup from 'Components/Form/FormInputGroup';
-import CheckInput from 'Components/Form/CheckInput';
-import ModalContent from 'Components/Modal/ModalContent';
-import ModalHeader from 'Components/Modal/ModalHeader';
+import FormLabel from 'Components/Form/FormLabel';
+import SpinnerButton from 'Components/Link/SpinnerButton';
 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 { inputTypes, kinds } from 'Helpers/Props';
 import MoviePoster from 'Movie/MoviePoster';
 import styles from './AddNewMovieModalContent.css';
 

frontend/src/AddMovie/AddNewMovie/AddNewMovieModalContentConnector.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { setAddMovieDefault, addMovie } from 'Store/Actions/addMovieActions';
+import { addMovie, setAddMovieDefault } from 'Store/Actions/addMovieActions';
 import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
 import createSystemStatusSelector from 'Store/Selectors/createSystemStatusSelector';
 import selectSettings from 'Store/Selectors/selectSettings';

frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css

@@ -47,18 +47,12 @@
   color: $disabledColor;
 }
 
-.tmdbLink {
-  composes: link from '~Components/Link/Link.css';
-
-  margin-top: -4px;
+.externalLink {
+  margin-top: 5px;
   margin-left: auto;
   color: $textColor;
 }
 
-.tmdbLinkIcon {
-  margin-left: 10px;
-}
-
 .alreadyExistsIcon {
   margin-left: 10px;
   color: #37bc9b;
@@ -67,7 +61,7 @@
 
 .exclusionIcon {
   margin-left: 10px;
-  color: #bc3737;
+  color: $dangerColor;
   pointer-events: all;
 }
 

frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js

@@ -1,10 +1,10 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { icons, kinds, sizes } from 'Helpers/Props';
 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 MoviePoster from 'Movie/MoviePoster';
 import AddNewMovieModal from './AddNewMovieModal';
 import styles from './AddNewMovieSearchResult.css';
@@ -39,7 +39,7 @@ class AddNewMovieSearchResult extends Component {
     this.setState({ isNewAddMovieModalOpen: false });
   }
 
-  onTMDBLinkPress = (event) => {
+  onExternalLinkPress = (event) => {
     event.stopPropagation();
   }
 
@@ -49,6 +49,7 @@ class AddNewMovieSearchResult extends Component {
   render() {
     const {
       tmdbId,
+      imdbId,
       title,
       titleSlug,
       year,
@@ -117,17 +118,41 @@ class AddNewMovieSearchResult extends Component {
                   />
               }
 
+              {
+                isSmallScreen ?
+                  null :
+                  <div className={styles.externalLink}>
                     <Link
-                className={styles.tmdbLink}
                       to={`https://www.themoviedb.org/movie/${tmdbId}`}
-                onPress={this.onTMDBLinkPress}
+                      onPress={this.onExternalLinkPress}
                     >
-                <Icon
-                  className={styles.tmdbLinkIcon}
-                  name={icons.EXTERNAL_LINK}
-                  size={28}
-                />
+                      <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>
+              }
             </div>
 
             <div>
@@ -156,6 +181,42 @@ 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>
@@ -179,6 +240,7 @@ class AddNewMovieSearchResult extends Component {
 
 AddNewMovieSearchResult.propTypes = {
   tmdbId: PropTypes.number.isRequired,
+  imdbId: PropTypes.string,
   title: PropTypes.string.isRequired,
   titleSlug: PropTypes.string.isRequired,
   year: PropTypes.number.isRequired,

frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResultConnector.js

@@ -1,8 +1,8 @@
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import createExistingMovieSelector from 'Store/Selectors/createExistingMovieSelector';
-import createExclusionMovieSelector from 'Store/Selectors/createExclusionMovieSelector';
 import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import createExclusionMovieSelector from 'Store/Selectors/createExclusionMovieSelector';
+import createExistingMovieSelector from 'Store/Selectors/createExistingMovieSelector';
 import AddNewMovieSearchResult from './AddNewMovieSearchResult';
 
 function createMapStateToProps() {

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

@@ -1,13 +1,13 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
 import getSelectedIds from 'Utilities/Table/getSelectedIds';
 import selectAll from 'Utilities/Table/selectAll';
 import toggleSelected from 'Utilities/Table/toggleSelected';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
-import ImportMovieTableConnector from './ImportMovieTableConnector';
 import ImportMovieFooterConnector from './ImportMovieFooterConnector';
+import ImportMovieTableConnector from './ImportMovieTableConnector';
 
 class ImportMovie extends Component {
 
@@ -79,7 +79,6 @@ class ImportMovie extends Component {
       rootFolderId,
       path,
       rootFoldersFetching,
-      rootFoldersPopulated,
       rootFoldersError,
       unmappedFolders
     } = this.props;
@@ -93,29 +92,35 @@ class ImportMovie extends Component {
 
     return (
       <PageContent title="Import Movies">
-        <PageContentBodyConnector
+        <PageContentBody
           registerScroller={this.setScrollerRef}
           onScroll={this.onScroll}
         >
           {
-            rootFoldersFetching && !rootFoldersPopulated &&
-              <LoadingIndicator />
+            rootFoldersFetching ? <LoadingIndicator /> : null
           }
 
           {
-            !rootFoldersFetching && !!rootFoldersError &&
-              <div>Unable to load root folders</div>
+            !rootFoldersFetching && !!rootFoldersError ?
+              <div>Unable to load root folders</div> :
+              null
           }
 
           {
-            !rootFoldersError && rootFoldersPopulated && !unmappedFolders.length &&
+            !rootFoldersError &&
+            !rootFoldersFetching &&
+            !unmappedFolders.length ?
               <div>
                 All movies in {path} have been imported
-              </div>
+              </div> :
+              null
           }
 
           {
-            !rootFoldersError && rootFoldersPopulated && !!unmappedFolders.length && scroller &&
+            !rootFoldersError &&
+            !rootFoldersFetching &&
+            !!unmappedFolders.length &&
+            scroller ?
               <ImportMovieTableConnector
                 rootFolderId={rootFolderId}
                 unmappedFolders={unmappedFolders}
@@ -126,17 +131,21 @@ class ImportMovie extends Component {
                 onSelectAllChange={this.onSelectAllChange}
                 onSelectedChange={this.onSelectedChange}
                 onRemoveSelectedStateItem={this.onRemoveSelectedStateItem}
-              />
+              /> :
+              null
           }
-        </PageContentBodyConnector>
+        </PageContentBody>
 
         {
-          !rootFoldersError && rootFoldersPopulated && !!unmappedFolders.length &&
+          !rootFoldersError &&
+          !rootFoldersFetching &&
+          !!unmappedFolders.length ?
             <ImportMovieFooterConnector
               selectedIds={this.getSelectedIds()}
               onInputChange={this.onInputChange}
               onImportPress={this.onImportPress}
-            />
+            /> :
+            null
         }
       </PageContent>
     );

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

@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { setImportMovieValue, importMovie, clearImportMovie } from 'Store/Actions/importMovieActions';
-import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
-import { setAddMovieDefault } from 'Store/Actions/addMovieActions';
 import createRouteMatchShape from 'Helpers/Props/Shapes/createRouteMatchShape';
+import { setAddMovieDefault } from 'Store/Actions/addMovieActions';
+import { clearImportMovie, importMovie, setImportMovieValue } from 'Store/Actions/importMovieActions';
+import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
 import ImportMovie from './ImportMovie';
 
 function createMapStateToProps() {
@@ -71,15 +71,14 @@ class ImportMovieConnector extends Component {
 
   componentDidMount() {
     const {
+      rootFolderId,
       qualityProfiles,
       defaultQualityProfileId,
       dispatchFetchRootFolders,
       dispatchSetAddMovieDefault
     } = this.props;
 
-    if (!this.props.rootFoldersPopulated) {
-      dispatchFetchRootFolders();
-    }
+    dispatchFetchRootFolders({ id: rootFolderId, timeout: false });
 
     let setDefaults = false;
     const setDefaultPayload = {};
@@ -139,6 +138,8 @@ const routeMatchShape = createRouteMatchShape({
 
 ImportMovieConnector.propTypes = {
   match: routeMatchShape.isRequired,
+  rootFolderId: PropTypes.number.isRequired,
+  rootFoldersFetching: PropTypes.bool.isRequired,
   rootFoldersPopulated: PropTypes.bool.isRequired,
   qualityProfiles: PropTypes.arrayOf(PropTypes.object).isRequired,
   defaultQualityProfileId: PropTypes.number.isRequired,

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

@@ -1,13 +1,13 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { inputTypes, kinds } from 'Helpers/Props';
+// import CheckInput from 'Components/Form/CheckInput';
+import FormInputGroup from 'Components/Form/FormInputGroup';
 import Button from 'Components/Link/Button';
 import SpinnerButton from 'Components/Link/SpinnerButton';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-// import CheckInput from 'Components/Form/CheckInput';
-import FormInputGroup from 'Components/Form/FormInputGroup';
 import PageContentFooter from 'Components/Page/PageContentFooter';
+import { inputTypes, kinds } from 'Helpers/Props';
 import styles from './ImportMovieFooter.css';
 
 const MIXED = 'mixed';

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

@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { inputTypes } from 'Helpers/Props';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
 import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell';
+import { inputTypes } from 'Helpers/Props';
 import ImportMovieSelectMovieConnector from './SelectMovie/ImportMovieSelectMovieConnector';
 import styles from './ImportMovieRow.css';
 

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

@@ -1,14 +1,14 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { Manager, Popper, Reference } from 'react-popper';
-import getUniqueElememtId from 'Utilities/getUniqueElementId';
-import { icons, kinds } from 'Helpers/Props';
-import Icon from 'Components/Icon';
-import Portal from 'Components/Portal';
 import FormInputButton from 'Components/Form/FormInputButton';
+import TextInput from 'Components/Form/TextInput';
+import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import TextInput from 'Components/Form/TextInput';
+import Portal from 'Components/Portal';
+import { icons, kinds } from 'Helpers/Props';
+import getUniqueElememtId from 'Utilities/getUniqueElementId';
 import ImportMovieSearchResultConnector from './ImportMovieSearchResultConnector';
 import ImportMovieTitle from './ImportMovieTitle';
 import styles from './ImportMovieSelectMovie.css';

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

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { kinds } from 'Helpers/Props';
 import Label from 'Components/Label';
+import { kinds } from 'Helpers/Props';
 import styles from './ImportMovieTitle.css';
 
 function ImportMovieTitle(props) {

frontend/src/AddMovie/ImportMovie/ImportMovies.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import { Route } from 'react-router-dom';
-import Switch from 'Components/Router/Switch';
-import ImportMovieSelectFolderConnector from 'AddMovie/ImportMovie/SelectFolder/ImportMovieSelectFolderConnector';
 import ImportMovieConnector from 'AddMovie/ImportMovie/Import/ImportMovieConnector';
+import ImportMovieSelectFolderConnector from 'AddMovie/ImportMovie/SelectFolder/ImportMovieSelectFolderConnector';
+import Switch from 'Components/Router/Switch';
 
 class ImportMovies extends Component {
 

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

@@ -1,11 +1,11 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import formatBytes from 'Utilities/Number/formatBytes';
-import { icons } from 'Helpers/Props';
 import IconButton from 'Components/Link/IconButton';
 import Link from 'Components/Link/Link';
-import TableRow from 'Components/Table/TableRow';
 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 styles from './ImportMovieRootFolderRow.css';
 
 function ImportMovieRootFolderRow(props) {

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

@@ -1,15 +1,16 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { icons, kinds, sizes } from 'Helpers/Props';
-import Button from 'Components/Link/Button';
 import FieldSet from 'Components/FieldSet';
-import Icon from 'Components/Icon';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import FileBrowserModal from 'Components/FileBrowser/FileBrowserModal';
+import Icon from 'Components/Icon';
+import Button from 'Components/Link/Button';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
+import { icons, kinds, sizes } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import ImportMovieRootFolderRowConnector from './ImportMovieRootFolderRowConnector';
 import styles from './ImportMovieSelectFolder.css';
 
@@ -77,7 +78,7 @@ class ImportMovieSelectFolder extends Component {
 
     return (
       <PageContent title="Import Movies">
-        <PageContentBodyConnector>
+        <PageContentBody>
           {
             isFetching && !isPopulated &&
               <LoadingIndicator />
@@ -92,11 +93,11 @@ class ImportMovieSelectFolder extends Component {
             !error && isPopulated &&
               <div>
                 <div className={styles.header}>
-                  Import movies you already have
+                  {translate('ImportHeader')}
                 </div>
 
                 <div className={styles.tips}>
-                  Some tips to ensure the import goes smoothly:
+                  {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>
@@ -141,7 +142,7 @@ class ImportMovieSelectFolder extends Component {
                           className={styles.importButtonIcon}
                           name={icons.DRIVE}
                         />
-                        Choose another folder
+                        {translate('ChooseAnotherFolder')}
                       </Button>
                     </div> :
 
@@ -169,7 +170,7 @@ class ImportMovieSelectFolder extends Component {
                 />
               </div>
           }
-        </PageContentBodyConnector>
+        </PageContentBody>
       </PageContent>
     );
   }

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

@@ -1,11 +1,11 @@
+import { push } from 'connected-react-router';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { push } from 'connected-react-router';
+import { addRootFolder, deleteRootFolder, fetchRootFolders } from 'Store/Actions/rootFolderActions';
 import createSystemStatusSelector from 'Store/Selectors/createSystemStatusSelector';
-import { fetchRootFolders, addRootFolder, deleteRootFolder } from 'Store/Actions/rootFolderActions';
 import ImportMovieSelectFolder from './ImportMovieSelectFolder';
 
 function createMapStateToProps() {

frontend/src/App/App.js

@@ -1,8 +1,8 @@
+import { ConnectedRouter } from 'connected-react-router';
 import PropTypes from 'prop-types';
 import React from 'react';
 import DocumentTitle from 'react-document-title';
 import { Provider } from 'react-redux';
-import { ConnectedRouter } from 'connected-react-router';
 import PageConnector from 'Components/Page/PageConnector';
 import AppRoutes from './AppRoutes';
 

frontend/src/App/AppRoutes.js

@@ -1,38 +1,37 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Route, Redirect } from 'react-router-dom';
-import getPathWithUrlBase from 'Utilities/getPathWithUrlBase';
-import NotFound from 'Components/NotFound';
-import Switch from 'Components/Router/Switch';
-import MovieIndexConnector from 'Movie/Index/MovieIndexConnector';
-import AddNewMovieConnector from 'AddMovie/AddNewMovie/AddNewMovieConnector';
-import AddListMovieConnector from 'AddMovie/AddListMovie/AddListMovieConnector';
-import AddDiscoverMovieConnector from 'AddMovie/AddListMovie/AddDiscoverMovieConnector';
-import ImportMovies from 'AddMovie/ImportMovie/ImportMovies';
-import MovieDetailsPageConnector from 'Movie/Details/MovieDetailsPageConnector';
-import CalendarPageConnector from 'Calendar/CalendarPageConnector';
+import { Redirect, Route } from 'react-router-dom';
+import BlacklistConnector from 'Activity/Blacklist/BlacklistConnector';
 import HistoryConnector from 'Activity/History/HistoryConnector';
 import QueueConnector from 'Activity/Queue/QueueConnector';
-import BlacklistConnector from 'Activity/Blacklist/BlacklistConnector';
-import Settings from 'Settings/Settings';
-import MediaManagementConnector from 'Settings/MediaManagement/MediaManagementConnector';
-import Profiles from 'Settings/Profiles/Profiles';
-import Quality from 'Settings/Quality/Quality';
+import AddNewMovieConnector from 'AddMovie/AddNewMovie/AddNewMovieConnector';
+import ImportMovies from 'AddMovie/ImportMovie/ImportMovies';
+import CalendarPageConnector from 'Calendar/CalendarPageConnector';
+import NotFound from 'Components/NotFound';
+import Switch from 'Components/Router/Switch';
+import DiscoverMovieConnector from 'DiscoverMovie/DiscoverMovieConnector';
+import MovieDetailsPageConnector from 'Movie/Details/MovieDetailsPageConnector';
+import MovieIndexConnector from 'Movie/Index/MovieIndexConnector';
 import CustomFormatSettingsConnector from 'Settings/CustomFormats/CustomFormatSettingsConnector';
-import IndexerSettingsConnector from 'Settings/Indexers/IndexerSettingsConnector';
 import DownloadClientSettingsConnector from 'Settings/DownloadClients/DownloadClientSettingsConnector';
+import GeneralSettingsConnector from 'Settings/General/GeneralSettingsConnector';
+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 MetadataSettings from 'Settings/Metadata/MetadataSettings';
+import Profiles from 'Settings/Profiles/Profiles';
+import Quality from 'Settings/Quality/Quality';
+import Settings from 'Settings/Settings';
 import TagSettings from 'Settings/Tags/TagSettings';
-import GeneralSettingsConnector from 'Settings/General/GeneralSettingsConnector';
 import UISettingsConnector from 'Settings/UI/UISettingsConnector';
-import Status from 'System/Status/Status';
-import Tasks from 'System/Tasks/Tasks';
 import BackupsConnector from 'System/Backup/BackupsConnector';
-import UpdatesConnector from 'System/Updates/UpdatesConnector';
 import LogsTableConnector from 'System/Events/LogsTableConnector';
 import Logs from 'System/Logs/Logs';
+import Status from 'System/Status/Status';
+import Tasks from 'System/Tasks/Tasks';
+import UpdatesConnector from 'System/Updates/UpdatesConnector';
+import getPathWithUrlBase from 'Utilities/getPathWithUrlBase';
 
 function AppRoutes(props) {
   const {
@@ -78,14 +77,9 @@ function AppRoutes(props) {
         component={ImportMovies}
       />
 
-      <Route
-        path="/add/list"
-        component={AddListMovieConnector}
-      />
-
       <Route
         path="/add/discover"
-        component={AddDiscoverMovieConnector}
+        component={DiscoverMovieConnector}
       />
 
       <Route

frontend/src/App/AppUpdatedModalContent.js

@@ -1,12 +1,12 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { kinds } from 'Helpers/Props';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import Button from 'Components/Link/Button';
-import ModalContent from 'Components/Modal/ModalContent';
-import ModalHeader from 'Components/Modal/ModalHeader';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 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 { kinds } from 'Helpers/Props';
 import UpdateChanges from 'System/Updates/UpdateChanges';
 import styles from './AppUpdatedModalContent.css';
 

frontend/src/App/ConnectionLostModal.js

@@ -1,12 +1,12 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { kinds } from 'Helpers/Props';
 import Button from 'Components/Link/Button';
 import Modal from 'Components/Modal/Modal';
-import ModalContent from 'Components/Modal/ModalContent';
-import ModalHeader from 'Components/Modal/ModalHeader';
 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 { kinds } from 'Helpers/Props';
 import styles from './ConnectionLostModal.css';
 
 function ConnectionLostModal(props) {

frontend/src/Calendar/Agenda/AgendaEvent.js

@@ -1,12 +1,12 @@
+import classNames from 'classnames';
 import moment from 'moment';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import classNames from 'classnames';
-import { icons, kinds } from 'Helpers/Props';
+import CalendarEventQueueDetails from 'Calendar/Events/CalendarEventQueueDetails';
 import getStatusStyle from 'Calendar/getStatusStyle';
 import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
-import CalendarEventQueueDetails from 'Calendar/Events/CalendarEventQueueDetails';
+import { icons, kinds } from 'Helpers/Props';
 import MovieTitleLink from 'Movie/MovieTitleLink';
 import styles from './AgendaEvent.css';
 
@@ -41,6 +41,7 @@ class AgendaEvent extends Component {
       movieFile,
       title,
       titleSlug,
+      isAvailable,
       inCinemas,
       monitored,
       hasFile,
@@ -55,7 +56,7 @@ class AgendaEvent extends Component {
     const startTime = moment(inCinemas);
     const downloading = !!(queueItem || grabbed);
     const isMonitored = monitored;
-    const statusStyle = getStatusStyle(hasFile, downloading, startTime, isMonitored);
+    const statusStyle = getStatusStyle(hasFile, downloading, isAvailable, isMonitored);
 
     return (
       <div>
@@ -126,7 +127,8 @@ AgendaEvent.propTypes = {
   movieFile: PropTypes.object,
   title: PropTypes.string.isRequired,
   titleSlug: PropTypes.string.isRequired,
-  inCinemas: PropTypes.string.isRequired,
+  isAvailable: PropTypes.bool.isRequired,
+  inCinemas: PropTypes.string,
   monitored: PropTypes.bool.isRequired,
   hasFile: PropTypes.bool.isRequired,
   grabbed: PropTypes.bool,

frontend/src/Calendar/Calendar.js

@@ -1,11 +1,11 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import * as calendarViews from './calendarViews';
-import CalendarHeaderConnector from './Header/CalendarHeaderConnector';
-import DaysOfWeekConnector from './Day/DaysOfWeekConnector';
-import CalendarDaysConnector from './Day/CalendarDaysConnector';
 import AgendaConnector from './Agenda/AgendaConnector';
+import * as calendarViews from './calendarViews';
+import CalendarDaysConnector from './Day/CalendarDaysConnector';
+import DaysOfWeekConnector from './Day/DaysOfWeekConnector';
+import CalendarHeaderConnector from './Header/CalendarHeaderConnector';
 import styles from './Calendar.css';
 
 class Calendar extends Component {

frontend/src/Calendar/CalendarConnector.js

@@ -2,14 +2,14 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
+import * as commandNames from 'Commands/commandNames';
+import * as calendarActions from 'Store/Actions/calendarActions';
+import { clearMovieFiles, fetchMovieFiles } from 'Store/Actions/movieFileActions';
+import { clearQueueDetails, fetchQueueDetails } from 'Store/Actions/queueActions';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
 import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
 import selectUniqueIds from 'Utilities/Object/selectUniqueIds';
-import * as calendarActions from 'Store/Actions/calendarActions';
-import { fetchMovieFiles, clearMovieFiles } from 'Store/Actions/movieFileActions';
-import { fetchQueueDetails, clearQueueDetails } from 'Store/Actions/queueActions';
-import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
-import * as commandNames from 'Commands/commandNames';
+import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
 import Calendar from './Calendar';
 
 const UPDATE_DELAY = 3600000; // 1 hour

frontend/src/Calendar/CalendarPage.js

@@ -1,20 +1,22 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import getErrorMessage from 'Utilities/Object/getErrorMessage';
-import { align, icons } from 'Helpers/Props';
-import PageContent from 'Components/Page/PageContent';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import Measure from 'Components/Measure';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import FilterMenu from 'Components/Menu/FilterMenu';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
 import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
-import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
-import FilterMenu from 'Components/Menu/FilterMenu';
+import { align, icons } from 'Helpers/Props';
 import NoMovie from 'Movie/NoMovie';
-import CalendarLinkModal from './iCal/CalendarLinkModal';
-import CalendarOptionsModal from './Options/CalendarOptionsModal';
-import LegendConnector from './Legend/LegendConnector';
+import getErrorMessage from 'Utilities/Object/getErrorMessage';
+import translate from 'Utilities/String/translate';
 import CalendarConnector from './CalendarConnector';
+import CalendarLinkModal from './iCal/CalendarLinkModal';
+import LegendConnector from './Legend/LegendConnector';
+import CalendarOptionsModal from './Options/CalendarOptionsModal';
 import styles from './CalendarPage.css';
 
 const MINIMUM_DAY_WIDTH = 120;
@@ -78,6 +80,8 @@ class CalendarPage extends Component {
       filters,
       hasMovie,
       movieError,
+      movieIsFetching,
+      movieIsPopulated,
       missingMovieIds,
       isRssSyncExecuting,
       isSearchingForMissing,
@@ -92,14 +96,13 @@ class CalendarPage extends Component {
     } = this.state;
 
     const isMeasured = this.state.width > 0;
-    const PageComponent = hasMovie ? CalendarConnector : NoMovie;
 
     return (
       <PageContent title="Calendar">
         <PageToolbar>
           <PageToolbarSection>
             <PageToolbarButton
-              label="iCal Link"
+              label={translate('iCalLink')}
               iconName={icons.CALENDAR}
               onPress={this.onGetCalendarLinkPress}
             />
@@ -107,14 +110,14 @@ class CalendarPage extends Component {
             <PageToolbarSeparator />
 
             <PageToolbarButton
-              label="RSS Sync"
+              label={translate('RssSync')}
               iconName={icons.RSS}
               isSpinning={isRssSyncExecuting}
               onPress={onRssSyncPress}
             />
 
             <PageToolbarButton
-              label="Search for Missing"
+              label={translate('SearchForMissing')}
               iconName={icons.SEARCH}
               isDisabled={!missingMovieIds.length}
               isSpinning={isSearchingForMissing}
@@ -124,7 +127,7 @@ class CalendarPage extends Component {
 
           <PageToolbarSection alignContent={align.RIGHT}>
             <PageToolbarButton
-              label="Options"
+              label={translate('Options')}
               iconName={icons.POSTER}
               onPress={this.onOptionsPress}
             />
@@ -140,26 +143,31 @@ class CalendarPage extends Component {
           </PageToolbarSection>
         </PageToolbar>
 
-        <PageContentBodyConnector
+        <PageContentBody
           className={styles.calendarPageBody}
           innerClassName={styles.calendarInnerPageBody}
         >
+          {
+            movieIsFetching && !movieIsPopulated &&
+              <LoadingIndicator />
+          }
+
           {
             movieError &&
               <div className={styles.errorMessage}>
-                {getErrorMessage(movieError, 'Failed to load movie from API')}
+                {getErrorMessage(movieError, 'Failed to load movies from API')}
               </div>
           }
 
           {
-            !movieError &&
+            !movieError && movieIsPopulated && hasMovie &&
               <Measure
                 whitelist={['width']}
                 onMeasure={this.onMeasure}
               >
                 {
                   isMeasured ?
-                    <PageComponent
+                    <CalendarConnector
                       useCurrentPage={useCurrentPage}
                     /> :
                     <div />
@@ -167,11 +175,16 @@ class CalendarPage extends Component {
               </Measure>
           }
 
+          {
+            !movieError && movieIsPopulated && !hasMovie &&
+              <NoMovie />
+          }
+
           {
             hasMovie && !movieError &&
               <LegendConnector />
           }
-        </PageContentBodyConnector>
+        </PageContentBody>
 
         <CalendarLinkModal
           isOpen={isCalendarLinkModalOpen}
@@ -192,6 +205,8 @@ CalendarPage.propTypes = {
   filters: PropTypes.arrayOf(PropTypes.object).isRequired,
   hasMovie: PropTypes.bool.isRequired,
   movieError: PropTypes.object,
+  movieIsFetching: PropTypes.bool.isRequired,
+  movieIsPopulated: PropTypes.bool.isRequired,
   missingMovieIds: PropTypes.arrayOf(PropTypes.number).isRequired,
   isRssSyncExecuting: PropTypes.bool.isRequired,
   isSearchingForMissing: PropTypes.bool.isRequired,

frontend/src/Calendar/CalendarPageConnector.js

@@ -1,16 +1,16 @@
+import moment from 'moment';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import moment from 'moment';
-import { isCommandExecuting } from 'Utilities/Command';
-import isBefore from 'Utilities/Date/isBefore';
 import * as commandNames from 'Commands/commandNames';
 import withCurrentPage from 'Components/withCurrentPage';
-import { executeCommand } from 'Store/Actions/commandActions';
 import { searchMissing, setCalendarDaysCount, setCalendarFilter } from 'Store/Actions/calendarActions';
+import { executeCommand } from 'Store/Actions/commandActions';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import createCommandsSelector from 'Store/Selectors/createCommandsSelector';
 import createMovieCountSelector from 'Store/Selectors/createMovieCountSelector';
 import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
-import createCommandsSelector from 'Store/Selectors/createCommandsSelector';
-import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import { isCommandExecuting } from 'Utilities/Command';
+import isBefore from 'Utilities/Date/isBefore';
 import CalendarPage from './CalendarPage';
 
 function createMissingMovieIdsSelector() {
@@ -79,6 +79,8 @@ function createMapStateToProps() {
         colorImpairedMode: uiSettings.enableColorImpairedMode,
         hasMovie: !!movieCount.count,
         movieError: movieCount.error,
+        movieIsFetching: movieCount.isFetching,
+        movieIsPopulated: movieCount.isPopulated,
         missingMovieIds,
         isRssSyncExecuting,
         isSearchingForMissing

frontend/src/Calendar/Day/CalendarDay.js

@@ -1,7 +1,7 @@
+import classNames from 'classnames';
 import moment from 'moment';
 import PropTypes from 'prop-types';
 import React from 'react';
-import classNames from 'classnames';
 import * as calendarViews from 'Calendar/calendarViews';
 import CalendarEventConnector from 'Calendar/Events/CalendarEventConnector';
 import styles from './CalendarDay.css';

frontend/src/Calendar/Day/CalendarDayConnector.js

@@ -22,7 +22,9 @@ function createCalendarEventsConnector() {
     (state) => state.calendar.items,
     (date, items) => {
       const filtered = _.filter(items, (item) => {
-        return moment(date).isSame(moment(item.inCinemas), 'day') || moment(date).isSame(moment(item.physicalRelease), 'day');
+        return (item.inCinemas && moment(date).isSame(moment(item.inCinemas), 'day')) ||
+          (item.physicalRelease && moment(date).isSame(moment(item.physicalRelease), 'day')) ||
+          (item.digitalRelease && moment(date).isSame(moment(item.digitalRelease), 'day'));
       });
 
       return sort(filtered);

frontend/src/Calendar/Day/CalendarDays.js

@@ -1,9 +1,9 @@
+import classNames from 'classnames';
 import moment from 'moment';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import classNames from 'classnames';
-import isToday from 'Utilities/Date/isToday';
 import * as calendarViews from 'Calendar/calendarViews';
+import isToday from 'Utilities/Date/isToday';
 import CalendarDayConnector from './CalendarDayConnector';
 import styles from './CalendarDays.css';
 

frontend/src/Calendar/Day/CalendarDaysConnector.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { gotoCalendarPreviousRange, gotoCalendarNextRange } from 'Store/Actions/calendarActions';
+import { gotoCalendarNextRange, gotoCalendarPreviousRange } from 'Store/Actions/calendarActions';
 import CalendarDays from './CalendarDays';
 
 function createMapStateToProps() {

frontend/src/Calendar/Day/DayOfWeek.js

@@ -1,9 +1,9 @@
+import classNames from 'classnames';
 import moment from 'moment';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import classNames from 'classnames';
-import getRelativeDate from 'Utilities/Date/getRelativeDate';
 import * as calendarViews from 'Calendar/calendarViews';
+import getRelativeDate from 'Utilities/Date/getRelativeDate';
 import styles from './DayOfWeek.css';
 
 class DayOfWeek extends Component {

frontend/src/Calendar/Day/DaysOfWeek.js

@@ -1,8 +1,8 @@
 import moment from 'moment';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import DayOfWeek from './DayOfWeek';
 import * as calendarViews from 'Calendar/calendarViews';
+import DayOfWeek from './DayOfWeek';
 import styles from './DaysOfWeek.css';
 
 class DaysOfWeek extends Component {

frontend/src/Calendar/Events/CalendarEvent.js

@@ -1,11 +1,11 @@
+import classNames from 'classnames';
 import moment from 'moment';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import classNames from 'classnames';
-import { icons, kinds } from 'Helpers/Props';
 import getStatusStyle from 'Calendar/getStatusStyle';
 import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
+import { icons, kinds } from 'Helpers/Props';
 import CalendarEventQueueDetails from './CalendarEventQueueDetails';
 import styles from './CalendarEvent.css';
 
@@ -17,11 +17,15 @@ class CalendarEvent extends Component {
   render() {
     const {
       movieFile,
+      isAvailable,
       inCinemas,
+      physicalRelease,
+      digitalRelease,
       title,
       titleSlug,
       genres,
       monitored,
+      certification,
       hasFile,
       grabbed,
       queueItem,
@@ -31,13 +35,24 @@ class CalendarEvent extends Component {
       date
     } = this.props;
 
-    const startTime = moment(inCinemas);
     const isDownloading = !!(queueItem || grabbed);
     const isMonitored = monitored;
-    const statusStyle = getStatusStyle(hasFile, isDownloading, startTime, isMonitored);
+    const statusStyle = getStatusStyle(hasFile, isDownloading, isAvailable, isMonitored);
     const joinedGenres = genres.slice(0, 2).join(', ');
     const link = `/movie/${titleSlug}`;
-    const eventType = moment(date).isSame(moment(inCinemas), 'day') ? 'In Cinemas' : 'Physical Release';
+    const eventType = [];
+
+    if (moment(date).isSame(moment(inCinemas), 'day')) {
+      eventType.push('Cinemas');
+    }
+
+    if (moment(date).isSame(moment(physicalRelease), 'day')) {
+      eventType.push('Physical');
+    }
+
+    if (moment(date).isSame(moment(digitalRelease), 'day')) {
+      eventType.push('Digital');
+    }
 
     return (
       <div>
@@ -100,7 +115,10 @@ class CalendarEvent extends Component {
             showMovieInformation &&
               <div className={styles.movieInfo}>
                 <div className={styles.genres}>
-                  {eventType}
+                  {eventType.join(', ')}
+                </div>
+                <div>
+                  {certification}
                 </div>
               </div>
           }
@@ -117,8 +135,12 @@ CalendarEvent.propTypes = {
   movieFile: PropTypes.object,
   title: PropTypes.string.isRequired,
   titleSlug: PropTypes.string.isRequired,
-  inCinemas: PropTypes.string.isRequired,
+  isAvailable: PropTypes.bool.isRequired,
+  inCinemas: PropTypes.string,
+  physicalRelease: PropTypes.string,
+  digitalRelease: PropTypes.string,
   monitored: PropTypes.bool.isRequired,
+  certification: PropTypes.string,
   hasFile: PropTypes.bool.isRequired,
   grabbed: PropTypes.bool,
   queueItem: PropTypes.object,

frontend/src/Calendar/Events/CalendarEventQueueDetails.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import colors from 'Styles/Variables/colors';
-import CircularProgressBar from 'Components/CircularProgressBar';
 import QueueDetails from 'Activity/Queue/QueueDetails';
+import CircularProgressBar from 'Components/CircularProgressBar';
+import colors from 'Styles/Variables/colors';
 
 function CalendarEventQueueDetails(props) {
   const {

frontend/src/Calendar/Header/CalendarHeader.js

@@ -1,15 +1,16 @@
 import moment from 'moment';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { align, icons } from 'Helpers/Props';
-import Button from 'Components/Link/Button';
+import * as calendarViews from 'Calendar/calendarViews';
 import Icon from 'Components/Icon';
+import Button from 'Components/Link/Button';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import Menu from 'Components/Menu/Menu';
 import MenuButton from 'Components/Menu/MenuButton';
 import MenuContent from 'Components/Menu/MenuContent';
 import ViewMenuItem from 'Components/Menu/ViewMenuItem';
-import * as calendarViews from 'Calendar/calendarViews';
+import { align, icons } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import CalendarHeaderViewButton from './CalendarHeaderViewButton';
 import styles from './CalendarHeader.css';
 
@@ -192,7 +193,7 @@ class CalendarHeader extends Component {
                       selectedView={view}
                       onPress={this.onViewChange}
                     >
-                      Day
+                      {translate('Day')}
                     </ViewMenuItem>
 
                     <ViewMenuItem
@@ -200,7 +201,7 @@ class CalendarHeader extends Component {
                       selectedView={view}
                       onPress={this.onViewChange}
                     >
-                      Agenda
+                      {translate('Agenda')}
                     </ViewMenuItem>
                   </MenuContent>
                 </Menu> :

frontend/src/Calendar/Header/CalendarHeaderConnector.js

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
+import { gotoCalendarNextRange, gotoCalendarPreviousRange, gotoCalendarToday, setCalendarView } from 'Store/Actions/calendarActions';
 import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
 import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
-import { setCalendarView, gotoCalendarToday, gotoCalendarPreviousRange, gotoCalendarNextRange } from 'Store/Actions/calendarActions';
 import CalendarHeader from './CalendarHeader';
 
 function createMapStateToProps() {

frontend/src/Calendar/Header/CalendarHeaderViewButton.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import titleCase from 'Utilities/String/titleCase';
-import Button from 'Components/Link/Button';
 import * as calendarViews from 'Calendar/calendarViews';
+import Button from 'Components/Link/Button';
+import titleCase from 'Utilities/String/titleCase';
 // import styles from './CalendarHeaderViewButton.css';
 
 class CalendarHeaderViewButton extends Component {

frontend/src/Calendar/Legend/Legend.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { icons, kinds } from 'Helpers/Props';
-import LegendItem from './LegendItem';
 import LegendIconItem from './LegendIconItem';
+import LegendItem from './LegendItem';
 import styles from './Legend.css';
 
 function Legend(props) {

frontend/src/Calendar/Legend/LegendItem.js

@@ -1,6 +1,6 @@
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import classNames from 'classnames';
 import titleCase from 'Utilities/String/titleCase';
 import styles from './LegendItem.css';
 

frontend/src/Calendar/Options/CalendarOptionsModalContent.js

@@ -1,17 +1,17 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { inputTypes } from 'Helpers/Props';
 import FieldSet from 'Components/FieldSet';
-import Button from 'Components/Link/Button';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
-import FormLabel from 'Components/Form/FormLabel';
 import FormInputGroup from 'Components/Form/FormInputGroup';
-import ModalContent from 'Components/Modal/ModalContent';
-import ModalHeader from 'Components/Modal/ModalHeader';
+import FormLabel from 'Components/Form/FormLabel';
+import Button from 'Components/Link/Button';
 import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
-import { firstDayOfWeekOptions, weekColumnOptions, timeFormatOptions } from 'Settings/UI/UISettings';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import { inputTypes } from 'Helpers/Props';
+import { firstDayOfWeekOptions, timeFormatOptions, weekColumnOptions } from 'Settings/UI/UISettings';
 
 class CalendarOptionsModalContent extends Component {
 

frontend/src/Calendar/Options/CalendarOptionsModalContentConnector.js

@@ -1,8 +1,8 @@
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { setCalendarOption } from 'Store/Actions/calendarActions';
-import CalendarOptionsModalContent from './CalendarOptionsModalContent';
 import { saveUISettings } from 'Store/Actions/settingsActions';
+import CalendarOptionsModalContent from './CalendarOptionsModalContent';
 
 function createMapStateToProps() {
   return createSelector(

frontend/src/Calendar/getStatusStyle.js

@@ -1,8 +1,5 @@
-/* eslint max-params: 0 */
-import moment from 'moment';
 
-function getStatusStyle(hasFile, downloading, startTime, isMonitored) {
-  const currentTime = moment();
+function getStatusStyle(hasFile, downloading, isAvailable, isMonitored) {
 
   if (hasFile) {
     return 'downloaded';
@@ -16,7 +13,7 @@ function getStatusStyle(hasFile, downloading, startTime, isMonitored) {
     return 'unmonitored';
   }
 
-  if (startTime.isBefore(currentTime) && !hasFile) {
+  if (isAvailable && !hasFile) {
     return 'missing';
   }
 

frontend/src/Calendar/iCal/CalendarLinkModalContent.js

@@ -1,18 +1,18 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { icons, inputTypes, kinds, sizes } from 'Helpers/Props';
+import Form from 'Components/Form/Form';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputButton from 'Components/Form/FormInputButton';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
 import Icon from 'Components/Icon';
 import Button from 'Components/Link/Button';
 import ClipboardButton from 'Components/Link/ClipboardButton';
-import Form from 'Components/Form/Form';
-import FormGroup from 'Components/Form/FormGroup';
-import FormLabel from 'Components/Form/FormLabel';
-import FormInputGroup from 'Components/Form/FormInputGroup';
-import FormInputButton from 'Components/Form/FormInputButton';
-import ModalContent from 'Components/Modal/ModalContent';
-import ModalHeader from 'Components/Modal/ModalHeader';
 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 { icons, inputTypes, kinds, sizes } from 'Helpers/Props';
 
 function getUrls(state) {
   const {

frontend/src/Components/Alert.js

@@ -1,6 +1,6 @@
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import classNames from 'classnames';
 import { kinds } from 'Helpers/Props';
 import styles from './Alert.css';
 

frontend/src/Components/DescriptionList/DescriptionListItem.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import DescriptionListItemTitle from './DescriptionListItemTitle';
 import DescriptionListItemDescription from './DescriptionListItemDescription';
+import DescriptionListItemTitle from './DescriptionListItemTitle';
 
 class DescriptionListItem extends Component {
 

frontend/src/Components/Error/ErrorBoundary.js

@@ -1,6 +1,6 @@
+import * as sentry from '@sentry/browser';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import * as sentry from '@sentry/browser';
 
 class ErrorBoundary extends Component {
 

frontend/src/Components/FileBrowser/FileBrowserModalContent.js

@@ -1,19 +1,19 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
-import { kinds, scrollDirections } from 'Helpers/Props';
 import Alert from 'Components/Alert';
+import PathInput from 'Components/Form/PathInput';
 import Button from 'Components/Link/Button';
 import Link from 'Components/Link/Link';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import ModalContent from 'Components/Modal/ModalContent';
-import ModalHeader from 'Components/Modal/ModalHeader';
 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 Scroller from 'Components/Scroller/Scroller';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
-import PathInput from 'Components/Form/PathInput';
+import { kinds, scrollDirections } from 'Helpers/Props';
 import FileBrowserRow from './FileBrowserRow';
 import styles from './FileBrowserModalContent.css';
 

frontend/src/Components/FileBrowser/FileBrowserModalContentConnector.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { fetchPaths, clearPaths } from 'Store/Actions/pathActions';
+import { clearPaths, fetchPaths } from 'Store/Actions/pathActions';
 import createSystemStatusSelector from 'Store/Selectors/createSystemStatusSelector';
 import FileBrowserModalContent from './FileBrowserModalContent';
 

frontend/src/Components/FileBrowser/FileBrowserRow.js

@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { icons } from 'Helpers/Props';
 import Icon from 'Components/Icon';
-import TableRowButton from 'Components/Table/TableRowButton';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import TableRowButton from 'Components/Table/TableRowButton';
+import { icons } from 'Helpers/Props';
 import styles from './FileBrowserRow.css';
 
 function getIconName(type) {

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

@@ -1,10 +1,10 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import isString from 'Utilities/String/isString';
-import { IN_LAST, IN_NEXT } from 'Helpers/Props/filterTypes';
 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 isString from 'Utilities/String/isString';
 import { NAME } from './FilterBuilderRowValue';
 import styles from './DateFilterBuilderRowValue.css';
 

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

@@ -1,13 +1,13 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { inputTypes } from 'Helpers/Props';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import Button from 'Components/Link/Button';
 import SpinnerErrorButton from 'Components/Link/SpinnerErrorButton';
-import ModalContent from 'Components/Modal/ModalContent';
-import ModalHeader from 'Components/Modal/ModalHeader';
 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 { inputTypes } from 'Helpers/Props';
 import FilterBuilderRow from './FilterBuilderRow';
 import styles from './FilterBuilderModalContent.css';
 
@@ -172,7 +172,7 @@ class FilterBuilderModalContent extends Component {
               filters.map((filter, index) => {
                 return (
                   <FilterBuilderRow
-                    key={index}
+                    key={`${filter.key}-${index}`}
                     index={index}
                     sectionItems={sectionItems}
                     filterBuilderProps={filterBuilderProps}

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

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { saveCustomFilter, deleteCustomFilter } from 'Store/Actions/customFilterActions';
+import { deleteCustomFilter, saveCustomFilter } from 'Store/Actions/customFilterActions';
 import FilterBuilderModalContent from './FilterBuilderModalContent';
 
 function createMapStateToProps() {

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

@@ -1,16 +1,16 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { filterBuilderTypes, filterBuilderValueTypes, icons } from 'Helpers/Props';
 import SelectInput from 'Components/Form/SelectInput';
 import IconButton from 'Components/Link/IconButton';
+import { filterBuilderTypes, filterBuilderValueTypes, icons } from 'Helpers/Props';
 import BoolFilterBuilderRowValue from './BoolFilterBuilderRowValue';
 import DateFilterBuilderRowValue from './DateFilterBuilderRowValue';
 import FilterBuilderRowValueConnector from './FilterBuilderRowValueConnector';
 import IndexerFilterBuilderRowValueConnector from './IndexerFilterBuilderRowValueConnector';
+import MovieStatusFilterBuilderRowValue from './MovieStatusFilterBuilderRowValue';
 import ProtocolFilterBuilderRowValue from './ProtocolFilterBuilderRowValue';
 import QualityFilterBuilderRowValueConnector from './QualityFilterBuilderRowValueConnector';
 import QualityProfileFilterBuilderRowValueConnector from './QualityProfileFilterBuilderRowValueConnector';
-import MovieStatusFilterBuilderRowValue from './MovieStatusFilterBuilderRowValue';
 import TagFilterBuilderRowValueConnector from './TagFilterBuilderRowValueConnector';
 import styles from './FilterBuilderRow.css';
 

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

@@ -1,10 +1,10 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import TagInput from 'Components/Form/TagInput';
+import { filterBuilderTypes, filterBuilderValueTypes, kinds } from 'Helpers/Props';
+import tagShape from 'Helpers/Props/Shapes/tagShape';
 import convertToBytes from 'Utilities/Number/convertToBytes';
 import formatBytes from 'Utilities/Number/formatBytes';
-import { kinds, filterBuilderTypes, filterBuilderValueTypes } from 'Helpers/Props';
-import tagShape from 'Helpers/Props/Shapes/tagShape';
-import TagInput from 'Components/Form/TagInput';
 import FilterBuilderRowValueTag from './FilterBuilderRowValueTag';
 
 export const NAME = 'value';

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

@@ -1,9 +1,9 @@
 import _ from 'lodash';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import sortByName from 'Utilities/Array/sortByName';
 import { filterBuilderTypes } from 'Helpers/Props';
 import * as filterTypes from 'Helpers/Props/filterTypes';
+import sortByName from 'Utilities/Array/sortByName';
 import FilterBuilderRowValue from './FilterBuilderRowValue';
 
 function createTagListSelector() {

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

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { kinds } from 'Helpers/Props';
 import TagInputTag from 'Components/Form/TagInputTag';
+import { kinds } from 'Helpers/Props';
 import styles from './FilterBuilderRowValueTag.css';
 
 function FilterBuilderRowValueTag(props) {

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

@@ -2,9 +2,9 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import getQualities from 'Utilities/Quality/getQualities';
 import tagShape from 'Helpers/Props/Shapes/tagShape';
 import { fetchQualityProfileSchema } from 'Store/Actions/settingsActions';
+import getQualities from 'Utilities/Quality/getQualities';
 import FilterBuilderRowValue from './FilterBuilderRowValue';
 
 function createMapStateToProps() {

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

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { icons } from 'Helpers/Props';
 import IconButton from 'Components/Link/IconButton';
 import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import { icons } from 'Helpers/Props';
 import styles from './CustomFilter.css';
 
 class CustomFilter extends Component {

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

@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Button from 'Components/Link/Button';
-import ModalContent from 'Components/Modal/ModalContent';
-import ModalHeader from 'Components/Modal/ModalHeader';
 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 CustomFilter from './CustomFilter';
 import styles from './CustomFiltersModalContent.css';
 
@@ -24,7 +25,7 @@ function CustomFiltersModalContent(props) {
   return (
     <ModalContent onModalClose={onModalClose}>
       <ModalHeader>
-        Custom Filters
+        {translate('CustomFilters')}
       </ModalHeader>
 
       <ModalBody>

frontend/src/Components/Form/AutoCompleteInput.js

@@ -1,6 +1,6 @@
+import jdu from 'jdu';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import jdu from 'jdu';
 import AutoSuggestInput from './AutoSuggestInput';
 
 class AutoCompleteInput extends Component {

frontend/src/Components/Form/AutoSuggestInput.js

@@ -1,8 +1,8 @@
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Autosuggest from 'react-autosuggest';
 import { Manager, Popper, Reference } from 'react-popper';
-import classNames from 'classnames';
 import Portal from 'Components/Portal';
 import styles from './AutoSuggestInput.css';
 

frontend/src/Components/Form/CaptchaInput.js

@@ -1,9 +1,9 @@
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import ReCAPTCHA from 'react-google-recaptcha';
-import classNames from 'classnames';
-import { icons } from 'Helpers/Props';
 import Icon from 'Components/Icon';
+import { icons } from 'Helpers/Props';
 import FormInputButton from './FormInputButton';
 import TextInput from './TextInput';
 import styles from './CaptchaInput.css';

frontend/src/Components/Form/CaptchaInputConnector.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { refreshCaptcha, getCaptchaCookie, resetCaptcha } from 'Store/Actions/captchaActions';
+import { getCaptchaCookie, refreshCaptcha, resetCaptcha } from 'Store/Actions/captchaActions';
 import CaptchaInput from './CaptchaInput';
 
 function createMapStateToProps() {

frontend/src/Components/Form/CheckInput.js

@@ -1,8 +1,8 @@
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import classNames from 'classnames';
-import { icons, kinds } from 'Helpers/Props';
 import Icon from 'Components/Icon';
+import { icons, kinds } from 'Helpers/Props';
 import FormInputHelpText from './FormInputHelpText';
 import styles from './CheckInput.css';
 

frontend/src/Components/Form/DeviceInput.js

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Icon from 'Components/Icon';
 import { icons } from 'Helpers/Props';
 import tagShape from 'Helpers/Props/Shapes/tagShape';
-import Icon from 'Components/Icon';
 import FormInputButton from './FormInputButton';
 import TagInput from './TagInput';
 import styles from './DeviceInput.css';