Fixed: Speed up RSS sync

Fixes #4910

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

.editorconfig

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

.github/ISSUE_TEMPLATE.md

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

.github/ISSUE_TEMPLATE/config.yml

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

.github/PULL_REQUEST_TEMPLATE.md

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

.github/stale.yml

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

.github/support.yml

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

CONTRIBUTING.md

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

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,42 +1,46 @@
 # 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)
-[![Docker](https://img.shields.io/badge/wiki-docker-1488C6.svg?maxAge=60&style=flat-square)](https://github.com/Radarr/Radarr/wiki/Docker)
+[![Docker](https://img.shields.io/badge/wiki-docker-1488C6.svg?maxAge=60&style=flat-square)](https://github.com/Radarr/Radarr/wiki/Docker) 
 [![Setup Guide](https://img.shields.io/badge/wiki-setup_guide-orange.svg?maxAge=60&style=flat-square)](https://github.com/Radarr/Radarr/wiki/Setup-Guide)
 [![FAQ](https://img.shields.io/badge/wiki-FAQ-BF55EC.svg?maxAge=60&style=flat-square)](https://github.com/Radarr/Radarr/wiki/FAQ)
 
+
+If you are using Docker please ensure your Docker paths are setup correctly using [this guide to facilitate](https://old.reddit.com/r/usenet/wiki/docker) hardlinks and minimize permissions issues. 
+
 * [Install Radarr for your desired OS](https://github.com/Radarr/Radarr/wiki/Installation) *or* use [Docker](https://github.com/Radarr/Radarr/wiki/Docker)
 * *For Linux users*, run `radarr` and *optionally* have [Radarr start automatically](https://github.com/Radarr/Radarr/wiki/Autostart-on-Linux)
 * Connect to the UI through <http://localhost:7878> or <http://your-ip:7878> in your web browser
 * See the [Setup Guide](https://github.com/Radarr/Radarr/wiki/Setup-Guide) for further configuration
 
 ## Downloads
+Please note that v0.2 will only have critical bugs resolved as of August 2020. Any additional development or features will be soley in V3.
 
-| Release Type    | Branch: develop (stable)                                                                                                                                                     | Branch: nightly (semi-unstable)                                                                                                                                                                | Branch: aphrodite (very-unstable)                                                                                                                                              |
-|-----------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| Binary Releases | [![GitHub Releases](https://img.shields.io/badge/downloads-releases-brightgreen.svg?maxAge=60&style=flat-square)](https://github.com/Radarr/Radarr/releases)                 | [![AppVeyor Builds](https://img.shields.io/badge/downloads-nightly-green.svg?maxAge=60&style=flat-square)](https://ci.appveyor.com/project/galli-leo/radarr-usby1/branch/develop/artifacts)    |                                                                                                                                                                                |
-| Docker          | [![Docker release](https://img.shields.io/badge/linuxserver-radarr:latest-blue.svg?colorB=1488C6&maxAge=60&style=flat-square)](https://hub.docker.com/r/linuxserver/radarr)  | [![Docker nightly](https://img.shields.io/badge/linuxserver-radarr:nightly-blue.svg?colorB=1488C6&maxAge=60&style=flat-square)](https://hub.docker.com/r/linuxserver/radarr)                   | [![Docker aphrodite](https://img.shields.io/badge/linuxserver-radarr:preview-blue.svg?colorB=1488C6&maxAge=60&style=flat-square)](https://hub.docker.com/r/linuxserver/radarr) |
-| Docker          | [![Docker release](https://img.shields.io/badge/hotio-radarr:latest-blue.svg?colorB=1488C6&maxAge=60&style=flat-square)](https://hub.docker.com/r/hotio/radarr)              | [![Docker nightly](https://img.shields.io/badge/hotio-radarr:unstable-blue.svg?colorB=1488C6&maxAge=60&style=flat-square)](https://hub.docker.com/r/hotio/radarr)                              | [![Docker aphrodite](https://img.shields.io/badge/hotio-radarr:aphrodite-blue.svg?colorB=1488C6&maxAge=60&style=flat-square)](https://hub.docker.com/r/hotio/radarr)           |
+Each push to the "develop" branch creates a build on "nightly" release channel (release channel is the "branch" within radarr's settings), once we push a build to Github it will show up on "develop" release channel.
+
+
+| Release Channel Type    | Branch: develop (stable) (v0.2)                                                                                                                                                    | Branch: nightly (semi-unstable) (v3.0)                                                                                                                                                               |
+|-----------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| Binary Releases | [![GitHub Releases](https://img.shields.io/badge/downloads-releases-brightgreen.svg?maxAge=60&style=flat-square)](https://github.com/Radarr/Radarr/releases)                 |  [![Azure Build](https://img.shields.io/badge/downloads-Windows_X64-green.svg?maxAge=60&style=flat-square)](https://radarr.servarr.com/v1/update/nightly/updatefile?os=windows&runtime=netcore&arch=x64) <br> [![Azure Build](https://img.shields.io/badge/downloads-Linux_X64-green.svg?maxAge=60&style=flat-square)](https://radarr.servarr.com/v1/update/nightly/updatefile?os=linux&runtime=netcore&arch=x64) <br> [![Azure Build](https://img.shields.io/badge/downloads-Linux_ARM64-green.svg?maxAge=60&style=flat-square)](https://radarr.servarr.com/v1/update/nightly/updatefile?os=linux&runtime=netcore&arch=arm64) [![Azure Build](https://img.shields.io/badge/downloads-Linux_ARM-green.svg?maxAge=60&style=flat-square)](https://radarr.servarr.com/v1/update/nightly/updatefile?os=linux&runtime=netcore&arch=arm) <br> [![Azure Build](https://img.shields.io/badge/downloads-macOS-green.svg?maxAge=60&style=flat-square)](https://radarr.servarr.com/v1/update/nightly/updatefile?os=osx&runtime=netcore&arch=x64)                                                                                                                                                                    
+| Docker - lsio   | [![Docker release](https://img.shields.io/badge/linuxserver-radarr:latest-blue.svg?colorB=1488C6&maxAge=60&style=flat-square)](https://hub.docker.com/r/linuxserver/radarr)  | [![Docker nightly](https://img.shields.io/badge/linuxserver-radarr:nightly-blue.svg?colorB=1488C6&maxAge=60&style=flat-square)](https://hub.docker.com/r/linuxserver/radarr)                   |
+| Docker - hotio  | [![Docker release](https://img.shields.io/badge/hotio-radarr:latest-blue.svg?colorB=1488C6&maxAge=60&style=flat-square)](https://hub.docker.com/r/hotio/radarr)              | [![Docker nightly](https://img.shields.io/badge/hotio-radarr:nightly-blue.svg?colorB=1488C6&maxAge=60&style=flat-square)](https://hub.docker.com/r/hotio/radarr)                              | 
 
 ## Support
 
-[![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)
+[![Discord](https://img.shields.io/badge/discord-chat-r5wJPt9.svg?maxAge=60&style=flat-square)](https://discord.gg/r5wJPt9)
 [![Reddit](https://img.shields.io/badge/reddit-discussion-FF4500.svg?maxAge=60&style=flat-square)](https://www.reddit.com/r/radarr)
-[![Feathub](https://img.shields.io/badge/feathub-requests-lightgrey.svg?maxAge=60&style=flat-square)](http://feathub.com/Radarr/Radarr)
 [![GitHub](https://img.shields.io/badge/github-issues-red.svg?maxAge=60&style=flat-square)](https://github.com/Radarr/Radarr/issues)
 [![GitHub Wiki](https://img.shields.io/badge/github-wiki-181717.svg?maxAge=60&style=flat-square)](https://github.com/Radarr/Radarr/wiki)
 
@@ -45,23 +49,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
@@ -84,18 +78,14 @@ Radarr is currently undergoing rapid development and pull requests are actively
 * New TorrentPotato Indexer
 * Torznab Indexer now supports Movies (Works well with [Jackett](https://github.com/Jackett/Jackett))
 * Scanning PreDB to know when a new release is available
-* Importing movies from various online sources, such as IMDb Watchlists (A complete list can be found [here](https://github.com/Radarr/Radarr/issues/114))
+* Importing movies from various online sources, such as IMDb Watchlists or Trakt (v3) (A complete list can be found [here](https://github.com/Radarr/Radarr/issues/114))
 * Full integration with Kodi, Plex (notification, library update)
-* And a beautiful UI
+* And a new beautiful UI (v3)
 * Importing Metadata such as trailers or subtitles
 * Adding metadata such as posters and information for Kodi and others to use
 * Advanced customization for profiles, such that Radarr will always download the copy you want
 
-### Planned Features
-
-See the [Roadmap blogpost](https://blog.radarr.video/development/update/2018/11/11/roadmap-update.html) for an overview of planned features.
-
-#### [Feature Requests](http://feathub.com/Radarr/Radarr)
+#### [Feature Requests](https://github.com/Radarr/Radarr/issues/new?assignees=&labels=feature+request&template=feature_request.md&title=)
 
 ## Configuring the Development Environment
 
@@ -110,7 +100,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 +114,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 +146,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,17 +13,17 @@ variables:
   buildName: '$(Build.SourceBranchName).$(radarrVersion)'
   sentryOrg: 'servarr'
   sentryUrl: 'https://sentry.servarr.com'
-  dotnetVersion: '3.1.300'
+  dotnetVersion: '3.1.401'
+  yarnCacheFolder: $(Pipeline.Workspace)/.yarn
 
 trigger:
   branches:
     include:
     - develop
-    - aphrodite
+    - master
 
 pr:
 - develop
-- aphrodite
 
 stages:
   - stage: Setup
@@ -39,7 +39,7 @@ stages:
         displayName: Set Build Name
       - bash: |
           if [[ $BUILD_REASON == "PullRequest" ]]; then
-          git diff origin/aphrodite...HEAD  --name-only | grep -E "^(src/|azure-pipelines.yml)"
+          git diff origin/develop...HEAD  --name-only | grep -E "^(src/|azure-pipelines.yml)"
           echo $? > not_backend_update
           else
           echo 0 > not_backend_update
@@ -68,6 +68,9 @@ stages:
 
       pool:
         vmImage: $(imageName)
+      variables:
+        # Disable stylecop here - linting errors get caught by the analyze task
+        EnableAnalyzers: 'false'
       steps:
       - checkout: self
         submodules: true
@@ -101,6 +104,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
@@ -132,10 +139,19 @@ stages:
       - checkout: self
         submodules: true
         fetchDepth: 1
+      - task: Cache@2
+        inputs:
+          key: 'yarn | "$(osName)" | yarn.lock'
+          restoreKeys: |
+             yarn | "$(osName)"
+             yarn
+          path: $(yarnCacheFolder)
+        displayName: Cache Yarn packages
       - bash: ./build.sh --frontend
         displayName: Build Radarr Frontend
         env:
           FORCE_COLOR: 0
+          YARN_CACHE_FOLDER: $(yarnCacheFolder)
       - publish: $(outputFolder)
         artifact: '$(osName)Frontend'
         displayName: Publish Frontend
@@ -243,6 +259,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 +283,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
@@ -269,14 +301,22 @@ stages:
           sentry-cli releases new --finalize -p radarr -p radarr-ui -p radarr-update "${RELEASENAME}"
           sentry-cli releases -p radarr-ui files "${RELEASENAME}" upload-sourcemaps _output/UI/ --rewrite
           sentry-cli releases set-commits --auto "${RELEASENAME}"
-          sentry-cli releases deploys "${RELEASENAME}" new -e aphrodite
+          if [[ ${BUILD_SOURCEBRANCH} == "refs/heads/develop" ]]; then
+          sentry-cli releases deploys "${RELEASENAME}" new -e nightly
+          else
+          sentry-cli releases deploys "${RELEASENAME}" new -e production
+          fi
           if [ $? -gt 0 ]; then
             echo "##vso[task.logissue type=warning]Error uploading source maps."
           fi
           exit 0
         displayName: Publish Sentry Source Maps
-        continueOnError: true
-        condition: and(succeeded(), eq(variables['Build.SourceBranch'], 'refs/heads/aphrodite'))
+        condition: |
+          or
+          (
+            and(succeeded(), eq(variables['Build.SourceBranch'], 'refs/heads/develop')),
+            and(succeeded(), eq(variables['Build.SourceBranch'], 'refs/heads/master'))
+          )
         env:
           SENTRY_AUTH_TOKEN: $(sentryAuthTokenServarr)
           SENTRY_ORG: $(sentryOrg)
@@ -382,18 +422,22 @@ stages:
       condition: and(succeeded(), eq(dependencies.Prepare.outputs['setVar.backendNotUpdated'], '0'))
       strategy:
         matrix:
-          mono510:
-            testName: 'Mono 5.10'
-            containerImage: servarr/testimages:mono-5.10
           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 +447,6 @@ stages:
       timeoutInMinutes: 10
         
       steps:
-      - bash: mono --version
-        displayName: Check Mono version
       - task: UseDotNet@2
         displayName: 'Install .net core'
         inputs:
@@ -414,10 +456,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 +571,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
           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'
-
+            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: LinuxMuslCoreTests
+            containerImage: servarr/testimages:alpine
+            pattern: 'Radarr.**.linux-musl-core-x64.tar.gz'
       pool:
         vmImage: 'ubuntu-18.04'
 
@@ -549,8 +599,6 @@ stages:
       timeoutInMinutes: 15
         
       steps:
-      - bash: mono --version
-        displayName: Check Mono version
       - task: UseDotNet@2
         displayName: 'Install .net core'
         inputs:
@@ -560,7 +608,7 @@ stages:
         displayName: Download Test Artifact
         inputs:
           buildType: 'current'
-          artifactName: LinuxTests
+          artifactName: $(artifactName)
           targetPath: $(testsFolder)
       - task: DownloadPipelineArtifact@2
         displayName: Download Build Artifact
@@ -605,14 +653,14 @@ stages:
             failBuild: true
           Mac:
             osName: 'Mac'
-            imageName: 'macos-10.14' # Fails due to firefox not being installed on image
+            imageName: 'macos-10.14'
             pattern: 'Radarr.**.osx-core-x64.tar.gz'
-            failBuild: false
+            failBuild: true
           Windows:
             osName: 'Windows'
             imageName: 'windows-2019'
             pattern: 'Radarr.**.windows-core-x64.zip'
-            failBuild: $(failOnAutomationFailure)
+            failBuild: true
 
       pool:
         vmImage: $(imageName)
@@ -647,9 +695,9 @@ stages:
         displayName: Move Package Contents
       - bash: |
           if [[ $OSNAME == "Mac" ]]; then
-          url=https://github.com/mozilla/geckodriver/releases/download/v0.26.0/geckodriver-v0.26.0-macos.tar.gz
+          url=https://github.com/mozilla/geckodriver/releases/download/v0.27.0/geckodriver-v0.27.0-macos.tar.gz
           elif [[ $OSNAME == "Linux" ]]; then
-          url=https://github.com/mozilla/geckodriver/releases/download/v0.26.0/geckodriver-v0.26.0-linux64.tar.gz
+          url=https://github.com/mozilla/geckodriver/releases/download/v0.27.0/geckodriver-v0.27.0-linux64.tar.gz
           else
           echo "Unhandled OS"
           exit 1
@@ -662,7 +710,7 @@ stages:
       - bash: |
           chmod a+x ${TESTSFOLDER}/test.sh
           ${TESTSFOLDER}/test.sh ${OSNAME} Automation Test
-        displayName: Run Integration Tests
+        displayName: Run Automation Tests
       - task: PublishTestResults@2
         inputs:
           testResultsFormat: 'NUnit'
@@ -710,10 +758,19 @@ stages:
       - checkout: self
         submodules: true
         fetchDepth: 1
+      - task: Cache@2
+        inputs:
+          key: 'yarn | "$(osName)" | yarn.lock'
+          restoreKeys: |
+             yarn | "$(osName)"
+             yarn
+          path: $(yarnCacheFolder)
+        displayName: Cache Yarn packages
       - bash: ./build.sh --lint
         displayName: Lint Radarr Frontend
         env:
           FORCE_COLOR: 0
+          YARN_CACHE_FOLDER: $(yarnCacheFolder)
 
     - job: Analyze_Frontend
       displayName: Frontend

build.sh

@@ -71,7 +71,7 @@ Build()
 YarnInstall()
 {
     ProgressStart 'yarn install'
-    yarn install --frozen-lockfile
+    yarn install --frozen-lockfile --network-timeout 120000
     ProgressEnd 'yarn install'
 }
 
@@ -235,7 +235,7 @@ PackageTests()
     # geckodriver.exe isn't copied by dotnet publish
     if [ "$runtime" = "win-x64" ];
     then
-        curl -Lso gecko.zip "https://github.com/mozilla/geckodriver/releases/download/v0.26.0/geckodriver-v0.26.0-win64.zip"
+        curl -Lso gecko.zip "https://github.com/mozilla/geckodriver/releases/download/v0.27.0/geckodriver-v0.27.0-win64.zip"
         unzip -o gecko.zip
         cp geckodriver.exe "$testPackageFolder/$framework/win-x64/publish"
     fi
@@ -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/.stylelintrc

@@ -24,7 +24,7 @@
         "ignoreAtRules": [
           "/^add\\-mixin$/",
           "/^define\\-mixin$/"
-        ] 
+        ]
       }
     ],
     "at-rule-no-vendor-prefix": true,
@@ -75,7 +75,7 @@
     "function-parentheses-newline-inside": "never-multi-line",
     "function-parentheses-space-inside": "never",
     "function-url-quotes": "always",
-    "function-url-scheme-blacklist": [
+    "function-url-scheme-disallowed-list": [
       "data"
     ],
     "function-whitespace-after": "always",

frontend/gulp/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,8 +4,10 @@ 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 HtmlWebpackPluginHtmlTags = require('html-webpack-plugin/lib/html-tags');
 const TerserPlugin = require('terser-webpack-plugin');
 
 const uiFolder = 'UI';
@@ -13,6 +15,7 @@ const frontendFolder = path.join(__dirname, '..');
 const srcFolder = path.join(frontendFolder, 'src');
 const isProduction = process.argv.indexOf('--production') > -1;
 const isProfiling = isProduction && process.argv.indexOf('--profile') > -1;
+const inlineWebWorkers = 'no-fallback';
 
 const distFolder = path.resolve(frontendFolder, '..', '_output', uiFolder);
 
@@ -30,14 +33,19 @@ const cssVarsFiles = [
 ].map(require.resolve);
 
 // Override the way HtmlWebpackPlugin injects the scripts
+// TODO: Find a better way to get these paths without
 HtmlWebpackPlugin.prototype.injectAssetsIntoHtml = function(html, assets, assetTags) {
-  const head = assetTags.head.map((v) => {
-    v.attributes = { rel: 'stylesheet', type: 'text/css', href: `/${v.attributes.href.replace('\\', '/')}` };
-    return this.createHtmlTag(v);
+  const head = assetTags.headTags.map((v) => {
+    const href = v.attributes.href
+      .replace('\\', '/')
+      .replace('%5C', '/');
+
+    v.attributes = { rel: 'stylesheet', type: 'text/css', href: `/${href}` };
+    return HtmlWebpackPluginHtmlTags.htmlTagObjectToString(v, this.options.xhtml);
   });
-  const body = assetTags.body.map((v) => {
+  const body = assetTags.bodyTags.map((v) => {
     v.attributes = { src: `/${v.attributes.src}` };
-    return this.createHtmlTag(v);
+    return HtmlWebpackPluginHtmlTags.htmlTagObjectToString(v, this.options.xhtml);
   });
 
   return html
@@ -46,6 +54,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 +131,8 @@ const config = {
         use: {
           loader: 'worker-loader',
           options: {
-            name: '[name].js'
+            filename: '[name].js',
+            inline: inlineWebWorkers
           }
         }
       },
@@ -251,7 +262,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/jsconfig.json

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

frontend/src/Activity/Blacklist/Blacklist.js

@@ -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 {
@@ -32,11 +33,11 @@ class Blacklist extends Component {
     } = this.props;
 
     return (
-      <PageContent title="Blacklist">
+      <PageContent title={translate('Blacklist')}>
         <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 />
@@ -64,13 +65,15 @@ class Blacklist extends Component {
 
           {
             !isFetching && !!error &&
-              <div>Unable to load blacklist</div>
+              <div>
+                {translate('UnableToLoadBlacklist')}
+              </div>
           }
 
           {
             isPopulated && !error && !items.length &&
               <div>
-                No history blacklist
+                {translate('NoHistory')}
               </div>
           }
 
@@ -103,7 +106,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,14 @@
 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';
+import translate from 'Utilities/String/translate';
 
 class BlacklistDetailsModal extends Component {
 
@@ -39,19 +40,19 @@ class BlacklistDetailsModal extends Component {
           <ModalBody>
             <DescriptionList>
               <DescriptionListItem
-                title="Name"
+                title={translate('Name')}
                 data={sourceTitle}
               />
 
               <DescriptionListItem
-                title="Protocol"
+                title={translate('Protocol')}
                 data={protocol}
               />
 
               {
                 !!message &&
                   <DescriptionListItem
-                    title="Indexer"
+                    title={translate('Indexer')}
                     data={indexer}
                   />
               }
@@ -59,7 +60,7 @@ class BlacklistDetailsModal extends Component {
               {
                 !!message &&
                   <DescriptionListItem
-                    title="Message"
+                    title={translate('Message')}
                     data={message}
                   />
               }
@@ -68,7 +69,7 @@ class BlacklistDetailsModal extends Component {
 
           <ModalFooter>
             <Button onPress={onModalClose}>
-              Close
+              {translate('Close')}
             </Button>
           </ModalFooter>
         </ModalContent>

frontend/src/Activity/Blacklist/BlacklistRow.js

@@ -1,14 +1,15 @@
 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 translate from 'Utilities/String/translate';
 import BlacklistDetailsModal from './BlacklistDetailsModal';
 import styles from './BlacklistRow.css';
 
@@ -155,7 +156,7 @@ class BlacklistRow extends Component {
                   />
 
                   <IconButton
-                    title="Remove from blacklist"
+                    title={translate('RemoveFromBlacklist')}
                     name={icons.REMOVE}
                     kind={kinds.DANGER}
                     onPress={onRemovePress}

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

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

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

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

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

@@ -1,13 +1,14 @@
 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 translate from 'Utilities/String/translate';
 import HistoryDetails from './HistoryDetails';
 import styles from './HistoryDetailsModal.css';
 
@@ -79,7 +80,7 @@ function HistoryDetailsModal(props) {
           <Button
             onPress={onModalClose}
           >
-            Close
+            {translate('Close')}
           </Button>
         </ModalFooter>
       </ModalContent>

frontend/src/Activity/History/History.js

@@ -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 {
@@ -42,11 +43,11 @@ class History extends Component {
     const hasError = error || moviesError;
 
     return (
-      <PageContent title="History">
+      <PageContent title={translate('History')}>
         <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 />
@@ -82,7 +83,9 @@ class History extends Component {
 
           {
             !isFetchingAny && hasError &&
-              <div>Unable to load history</div>
+              <div>
+                {translate('UnableToLoadHistory')}
+              </div>
           }
 
           {
@@ -125,7 +128,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 {
 
@@ -148,11 +149,11 @@ class Queue extends Component {
     const disableSelectedActions = selectedCount === 0;
 
     return (
-      <PageContent title="Queue">
+      <PageContent title={translate('Queue')}>
         <PageToolbar>
           <PageToolbarSection>
             <PageToolbarButton
-              label="Refresh"
+              label={translate('Refresh')}
               iconName={icons.REFRESH}
               isSpinning={isRefreshing}
               onPress={onRefreshPress}
@@ -161,7 +162,7 @@ class Queue extends Component {
             <PageToolbarSeparator />
 
             <PageToolbarButton
-              label="Grab Selected"
+              label={translate('GrabSelected')}
               iconName={icons.DOWNLOAD}
               isDisabled={disableSelectedActions || !isPendingSelected}
               isSpinning={isGrabbing}
@@ -169,7 +170,7 @@ class Queue extends Component {
             />
 
             <PageToolbarButton
-              label="Remove Selected"
+              label={translate('RemoveSelected')}
               iconName={icons.REMOVE}
               isDisabled={disableSelectedActions}
               isSpinning={isRemoving}
@@ -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,9 @@
 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';
+import translate from 'Utilities/String/translate';
 
 function QueueDetails(props) {
   const {
@@ -10,20 +11,20 @@ function QueueDetails(props) {
     size,
     sizeleft,
     estimatedCompletionTime,
-    status: queueStatus,
+    status,
+    trackedDownloadState,
+    trackedDownloadStatus,
     errorMessage,
     progressBar
   } = props;
 
-  const status = queueStatus.toLowerCase();
-
-  const progress = (100 - sizeleft / size * 100);
+  const progress = size ? (100 - sizeleft / size * 100) : 0;
 
   if (status === 'pending') {
     return (
       <Icon
         name={icons.PENDING}
-        title={`Release will be processed ${moment(estimatedCompletionTime).fromNow()}`}
+        title={translate('ReleaseWillBeProcessedInterp', [moment(estimatedCompletionTime).fromNow()])}
       />
     );
   }
@@ -34,12 +35,40 @@ function QueueDetails(props) {
         <Icon
           name={icons.DOWNLOAD}
           kind={kinds.DANGER}
-          title={`Import failed: ${errorMessage}`}
+          title={translate('ImportFailedInterp', [errorMessage])}
         />
       );
     }
 
-    // TODO: show an icon when download is complete, but not imported yet?
+    if (trackedDownloadStatus === 'warning') {
+      return (
+        <Icon
+          name={icons.DOWNLOAD}
+          kind={kinds.WARNING}
+          title={'Downloaded - Unable to Import: check logs for details'}
+        />
+      );
+    }
+
+    if (trackedDownloadState === 'importPending') {
+      return (
+        <Icon
+          name={icons.DOWNLOAD}
+          kind={kinds.PURPLE}
+          title={`${translate('Downloaded')} - ${translate('WaitingToImport')}`}
+        />
+      );
+    }
+
+    if (trackedDownloadState === 'importing') {
+      return (
+        <Icon
+          name={icons.DOWNLOAD}
+          kind={kinds.PURPLE}
+          title={`${translate('Downloaded')} - ${translate('Importing')}`}
+        />
+      );
+    }
   }
 
   if (errorMessage) {
@@ -47,7 +76,7 @@ function QueueDetails(props) {
       <Icon
         name={icons.DOWNLOADING}
         kind={kinds.DANGER}
-        title={`Download failed: ${errorMessage}`}
+        title={translate('DownloadFailedInterp', [errorMessage])}
       />
     );
   }
@@ -57,7 +86,7 @@ function QueueDetails(props) {
       <Icon
         name={icons.DOWNLOADING}
         kind={kinds.DANGER}
-        title="Download failed: check download client for more details"
+        title={translate('DownloadFailedCheckDownloadClientForMoreDetails')}
       />
     );
   }
@@ -67,7 +96,7 @@ function QueueDetails(props) {
       <Icon
         name={icons.DOWNLOADING}
         kind={kinds.WARNING}
-        title="Download warning: check download client for more details"
+        title={translate('DownloadWarningCheckDownloadClientForMoreDetails')}
       />
     );
   }
@@ -76,7 +105,7 @@ function QueueDetails(props) {
     return (
       <Icon
         name={icons.DOWNLOADING}
-        title={`Movie is downloading - ${progress.toFixed(1)}% ${title}`}
+        title={translate('MovieIsDownloadingInterp', [progress.toFixed(1), title])}
       />
     );
   }
@@ -90,6 +119,8 @@ QueueDetails.propTypes = {
   sizeleft: PropTypes.number.isRequired,
   estimatedCompletionTime: PropTypes.string,
   status: PropTypes.string.isRequired,
+  trackedDownloadState: PropTypes.string.isRequired,
+  trackedDownloadStatus: PropTypes.string.isRequired,
   errorMessage: PropTypes.string,
   progressBar: PropTypes.node.isRequired
 };

frontend/src/Activity/Queue/QueueOptions.js

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

frontend/src/Activity/Queue/QueueRow.js

@@ -1,23 +1,24 @@
 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 translate from 'Utilities/String/translate';
 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 {
@@ -294,7 +295,7 @@ class QueueRow extends Component {
                   }
 
                   <SpinnerIconButton
-                    title="Remove from queue"
+                    title={translate('RemoveFromQueue')}
                     name={icons.REMOVE}
                     isSpinning={isRemoving}
                     onPress={this.onRemoveQueueItemPress}

frontend/src/Activity/Queue/QueueStatusCell.js

@@ -1,9 +1,10 @@
 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 translate from 'Utilities/String/translate';
 import styles from './QueueStatusCell.css';
 
 function getDetailedPopoverBody(statusMessages) {
@@ -49,71 +50,75 @@ function QueueStatusCell(props) {
   // status === 'downloading'
   let iconName = icons.DOWNLOADING;
   let iconKind = kinds.DEFAULT;
-  let title = 'Downloading';
+  let title = translate('Downloading');
+
+  if (status === 'paused') {
+    iconName = icons.PAUSED;
+    title = translate('Paused');
+  }
+
+  if (status === 'queued') {
+    iconName = icons.QUEUED;
+    title = translate('Queued');
+  }
+
+  if (status === 'completed') {
+    iconName = icons.DOWNLOADED;
+    title = translate('Downloaded');
+
+    if (trackedDownloadState === 'importPending') {
+      title += ` - ${translate('WaitingToImport')}`;
+      iconKind = kinds.PURPLE;
+    }
+
+    if (trackedDownloadState === 'importing') {
+      title += ` - ${translate('Importing')}`;
+      iconKind = kinds.PURPLE;
+    }
+
+    if (trackedDownloadState === 'failedPending') {
+      title += ` - ${translate('WaitingToProcess')}`;
+      iconKind = kinds.DANGER;
+    }
+  }
 
   if (hasWarning) {
     iconKind = kinds.WARNING;
   }
 
-  if (status === 'paused') {
-    iconName = icons.PAUSED;
-    title = 'Paused';
-  }
-
-  if (status === 'queued') {
-    iconName = icons.QUEUED;
-    title = 'Queued';
-  }
-
-  if (status === 'completed') {
-    iconName = icons.DOWNLOADED;
-    title = 'Downloaded';
-
-    if (trackedDownloadState === 'importPending') {
-      title += ' - Waiting to Import';
-    }
-
-    if (trackedDownloadState === 'importing') {
-      title += ' - Importing';
-    }
-
-    if (trackedDownloadState === 'failedPending') {
-      title += ' - Waiting to Process';
-    }
-  }
-
   if (status === 'delay') {
     iconName = icons.PENDING;
-    title = 'Pending';
+    title = translate('Pending');
   }
 
   if (status === 'DownloadClientUnavailable') {
     iconName = icons.PENDING;
     iconKind = kinds.WARNING;
-    title = 'Pending - Download client is unavailable';
+    title = `${translate('Pending')} - ${translate('DownloadClientUnavailable')}`;
   }
 
   if (status === 'failed') {
     iconName = icons.DOWNLOADING;
     iconKind = kinds.DANGER;
-    title = 'Download failed';
+    title = translate('DownloadFailed');
   }
 
   if (status === 'warning') {
     iconName = icons.DOWNLOADING;
     iconKind = kinds.WARNING;
-    title = `Download warning: ${errorMessage || 'check download client for more details'}`;
+    const warningMessage = errorMessage || translate('CheckDownloadClientForDetails');
+    title = translate('DownloadWarning', [warningMessage]);
   }
 
   if (hasError) {
     if (status === 'completed') {
       iconName = icons.DOWNLOAD;
       iconKind = kinds.DANGER;
-      title = `Import failed: ${sourceTitle}`;
+      title = translate('ImportFailed', [sourceTitle]);
     } else {
       iconName = icons.DOWNLOADING;
       iconKind = kinds.DANGER;
-      title = 'Download failed';
+      title = translate('DownloadFailed');
     }
   }
 
@@ -145,8 +150,8 @@ QueueStatusCell.propTypes = {
 };
 
 QueueStatusCell.defaultProps = {
-  trackedDownloadStatus: 'Ok',
-  trackedDownloadState: 'Downloading'
+  trackedDownloadStatus: translate('Ok'),
+  trackedDownloadState: translate('Downloading')
 };
 
 export default QueueStatusCell;

frontend/src/Activity/Queue/RemoveQueueItemModal.js

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

frontend/src/Activity/Queue/RemoveQueueItemsModal.js

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

frontend/src/Activity/Queue/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,11 @@
 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 translate from 'Utilities/String/translate';
 import styles from './TimeleftCell.css';
 
 function TimeleftCell(props) {
@@ -19,35 +20,35 @@ function TimeleftCell(props) {
     timeFormat
   } = props;
 
-  if (status === 'Delay') {
+  if (status === 'delay') {
     const date = getRelativeDate(estimatedCompletionTime, shortDateFormat, showRelativeDates);
     const time = formatTime(estimatedCompletionTime, timeFormat, { includeMinuteZero: true });
 
     return (
       <TableRowCell
         className={styles.timeleft}
-        title={`Delaying download until ${date} at ${time}`}
+        title={translate('DelayingDownloadUntilInterp', [date, time])}
       >
         -
       </TableRowCell>
     );
   }
 
-  if (status === 'DownloadClientUnavailable') {
+  if (status === 'downloadClientUnavailable') {
     const date = getRelativeDate(estimatedCompletionTime, shortDateFormat, showRelativeDates);
     const time = formatTime(estimatedCompletionTime, timeFormat, { includeMinuteZero: true });
 
     return (
       <TableRowCell
         className={styles.timeleft}
-        title={`Retrying download ${date} at ${time}`}
+        title={translate('RetryingDownloadInterp', [date, time])}
       >
         -
       </TableRowCell>
     );
   }
 
-  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/AddListMovieOverview.js

@@ -1,156 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import TextTruncate from 'react-text-truncate';
-import dimensions from 'Styles/Variables/dimensions';
-import fonts from 'Styles/Variables/fonts';
-import MoviePoster from 'Movie/MoviePoster';
-import Link from 'Components/Link/Link';
-import AddNewMovieModal from 'AddMovie/AddNewMovie/AddNewMovieModal';
-import styles from './AddListMovieOverview.css';
-
-const columnPadding = parseInt(dimensions.movieIndexColumnPadding);
-const columnPaddingSmallScreen = parseInt(dimensions.movieIndexColumnPaddingSmallScreen);
-const defaultFontSize = parseInt(fonts.defaultFontSize);
-const lineHeight = parseFloat(fonts.lineHeight);
-
-// Hardcoded height beased on line-height of 32 + bottom margin of 10.
-// Less side-effecty than using react-measure.
-const titleRowHeight = 42;
-
-function getContentHeight(rowHeight, isSmallScreen) {
-  const padding = isSmallScreen ? columnPaddingSmallScreen : columnPadding;
-
-  return rowHeight - padding;
-}
-
-class AddListMovieOverview extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      isNewAddMovieModalOpen: false
-    };
-  }
-
-  //
-  // Listeners
-
-  onPress = () => {
-    this.setState({ isNewAddMovieModalOpen: true });
-  }
-
-  onAddMovieModalClose = () => {
-    this.setState({ isNewAddMovieModalOpen: false });
-  }
-
-  //
-  // Render
-
-  render() {
-    const {
-      tmdbId,
-      title,
-      titleSlug,
-      folder,
-      year,
-      overview,
-      images,
-      posterWidth,
-      posterHeight,
-      rowHeight,
-      isSmallScreen,
-      isExistingMovie
-    } = this.props;
-
-    const {
-      isNewAddMovieModalOpen
-    } = this.state;
-
-    const elementStyle = {
-      width: `${posterWidth}px`,
-      height: `${posterHeight}px`
-    };
-
-    const linkProps = isExistingMovie ? { to: `/movie/${titleSlug}` } : { onPress: this.onPress };
-
-    const contentHeight = getContentHeight(rowHeight, isSmallScreen);
-    const overviewHeight = contentHeight - titleRowHeight;
-
-    return (
-      <div className={styles.container}>
-        <Link
-          className={styles.content}
-          {...linkProps}
-        >
-          <div className={styles.poster}>
-            <div className={styles.posterContainer}>
-
-              <MoviePoster
-                className={styles.poster}
-                style={elementStyle}
-                images={images}
-                size={250}
-                lazy={false}
-                overflow={true}
-              />
-            </div>
-          </div>
-
-          <div className={styles.info} style={{ maxHeight: contentHeight }}>
-            <div className={styles.titleRow}>
-              {title} ({year})
-            </div>
-
-            <div className={styles.details}>
-              <TextTruncate
-                line={Math.floor(overviewHeight / (defaultFontSize * lineHeight))}
-                text={overview}
-              />
-
-            </div>
-          </div>
-        </Link>
-
-        <AddNewMovieModal
-          isOpen={isNewAddMovieModalOpen && !isExistingMovie}
-          tmdbId={tmdbId}
-          title={title}
-          year={year}
-          overview={overview}
-          folder={folder}
-          images={images}
-          onModalClose={this.onAddMovieModalClose}
-        />
-      </div>
-    );
-  }
-}
-
-AddListMovieOverview.propTypes = {
-  tmdbId: PropTypes.number.isRequired,
-  title: PropTypes.string.isRequired,
-  folder: PropTypes.string.isRequired,
-  year: PropTypes.number.isRequired,
-  overview: PropTypes.string.isRequired,
-  monitored: PropTypes.bool.isRequired,
-  status: PropTypes.string.isRequired,
-  titleSlug: PropTypes.string.isRequired,
-  images: PropTypes.arrayOf(PropTypes.object).isRequired,
-  posterWidth: PropTypes.number.isRequired,
-  posterHeight: PropTypes.number.isRequired,
-  rowHeight: PropTypes.number.isRequired,
-  overviewOptions: PropTypes.object.isRequired,
-  showRelativeDates: PropTypes.bool.isRequired,
-  shortDateFormat: PropTypes.string.isRequired,
-  longDateFormat: PropTypes.string.isRequired,
-  timeFormat: PropTypes.string.isRequired,
-  isSmallScreen: PropTypes.bool.isRequired,
-  isExistingMovie: PropTypes.bool.isRequired,
-  isExclusionMovie: PropTypes.bool.isRequired
-};
-
-export default AddListMovieOverview;

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/Options/AddListMovieOverviewOptionsModalContent.js

@@ -1,132 +0,0 @@
-import _ from 'lodash';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { inputTypes } from 'Helpers/Props';
-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 ModalBody from 'Components/Modal/ModalBody';
-import ModalFooter from 'Components/Modal/ModalFooter';
-
-const posterSizeOptions = [
-  { key: 'small', value: 'Small' },
-  { key: 'medium', value: 'Medium' },
-  { key: 'large', value: 'Large' }
-];
-
-class AddListMovieOverviewOptionsModalContent extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      size: props.size,
-      showStudio: props.showStudio
-    };
-  }
-
-  componentDidUpdate(prevProps) {
-    const {
-      size,
-      showStudio
-    } = this.props;
-
-    const state = {};
-
-    if (size !== prevProps.size) {
-      state.size = size;
-    }
-
-    if (showStudio !== prevProps.showStudio) {
-      state.showStudio = showStudio;
-    }
-
-    if (!_.isEmpty(state)) {
-      this.setState(state);
-    }
-  }
-
-  //
-  // Listeners
-
-  onChangeOverviewOption = ({ name, value }) => {
-    this.setState({
-      [name]: value
-    }, () => {
-      this.props.onChangeOverviewOption({ [name]: value });
-    });
-  }
-
-  //
-  // Render
-
-  render() {
-    const {
-      onModalClose
-    } = this.props;
-
-    const {
-      size,
-      showStudio
-    } = this.state;
-
-    return (
-      <ModalContent onModalClose={onModalClose}>
-        <ModalHeader>
-          Overview Options
-        </ModalHeader>
-
-        <ModalBody>
-          <Form>
-            <FormGroup>
-              <FormLabel>Poster Size</FormLabel>
-
-              <FormInputGroup
-                type={inputTypes.SELECT}
-                name="size"
-                value={size}
-                values={posterSizeOptions}
-                onChange={this.onChangeOverviewOption}
-              />
-            </FormGroup>
-
-            <FormGroup>
-              <FormLabel>Show Studio</FormLabel>
-
-              <FormInputGroup
-                type={inputTypes.CHECK}
-                name="showStudio"
-                value={showStudio}
-                onChange={this.onChangeOverviewOption}
-              />
-            </FormGroup>
-          </Form>
-        </ModalBody>
-
-        <ModalFooter>
-          <Button
-            onPress={onModalClose}
-          >
-            Close
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    );
-  }
-}
-
-AddListMovieOverviewOptionsModalContent.propTypes = {
-  size: PropTypes.string.isRequired,
-  showStudio: PropTypes.bool.isRequired,
-  onChangeOverviewOption: PropTypes.func.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-
-export default AddListMovieOverviewOptionsModalContent;

frontend/src/AddMovie/AddListMovie/Overview/Options/AddListMovieOverviewOptionsModalContentConnector.js

@@ -1,23 +0,0 @@
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { setListMovieOverviewOption } from 'Store/Actions/addMovieActions';
-import AddListMovieOverviewOptionsModalContent from './AddListMovieOverviewOptionsModalContent';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.addMovie,
-    (addMovie) => {
-      return addMovie.overviewOptions;
-    }
-  );
-}
-
-function createMapDispatchToProps(dispatch, props) {
-  return {
-    onChangeOverviewOption(payload) {
-      dispatch(setListMovieOverviewOption(payload));
-    }
-  };
-}
-
-export default connect(createMapStateToProps, createMapDispatchToProps)(AddListMovieOverviewOptionsModalContent);

frontend/src/AddMovie/AddListMovie/Posters/AddListMoviePoster.js

@@ -1,159 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Link from 'Components/Link/Link';
-import MoviePoster from 'Movie/MoviePoster';
-import AddNewMovieModal from 'AddMovie/AddNewMovie/AddNewMovieModal';
-import styles from './AddListMoviePoster.css';
-
-class AddListMoviePoster extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      hasPosterError: false,
-      isNewAddMovieModalOpen: false
-    };
-  }
-
-  //
-  // Listeners
-
-  onPress = () => {
-    this.setState({ isNewAddMovieModalOpen: true });
-  }
-
-  onAddMovieModalClose = () => {
-    this.setState({ isNewAddMovieModalOpen: false });
-  }
-
-  onPosterLoad = () => {
-    if (this.state.hasPosterError) {
-      this.setState({ hasPosterError: false });
-    }
-  }
-
-  onPosterLoadError = () => {
-    if (!this.state.hasPosterError) {
-      this.setState({ hasPosterError: true });
-    }
-  }
-
-  //
-  // Render
-
-  render() {
-    const {
-      tmdbId,
-      title,
-      year,
-      overview,
-      folder,
-      status,
-      titleSlug,
-      images,
-      posterWidth,
-      posterHeight,
-      showTitle,
-      isExistingMovie
-    } = this.props;
-
-    const {
-      hasPosterError,
-      isNewAddMovieModalOpen
-    } = this.state;
-
-    const linkProps = isExistingMovie ? { to: `/movie/${titleSlug}` } : { onPress: this.onPress };
-
-    const elementStyle = {
-      width: `${posterWidth}px`,
-      height: `${posterHeight}px`
-    };
-
-    return (
-      <div className={styles.content}>
-        <div className={styles.posterContainer}>
-          {
-            status === 'ended' &&
-              <div
-                className={styles.ended}
-                title="Ended"
-              />
-          }
-
-          <Link
-            className={styles.link}
-            style={elementStyle}
-            {...linkProps}
-          >
-            <MoviePoster
-              className={styles.poster}
-              style={elementStyle}
-              images={images}
-              size={250}
-              lazy={false}
-              overflow={true}
-              onError={this.onPosterLoadError}
-              onLoad={this.onPosterLoad}
-            />
-
-            {
-              hasPosterError &&
-                <div className={styles.overlayTitle}>
-                  {title}
-                </div>
-            }
-          </Link>
-        </div>
-
-        {
-          showTitle &&
-            <div className={styles.title}>
-              {title}
-            </div>
-        }
-
-        <AddNewMovieModal
-          isOpen={isNewAddMovieModalOpen && !isExistingMovie}
-          tmdbId={tmdbId}
-          title={title}
-          year={year}
-          overview={overview}
-          folder={folder}
-          images={images}
-          onModalClose={this.onAddMovieModalClose}
-        />
-      </div>
-    );
-  }
-}
-
-AddListMoviePoster.propTypes = {
-  tmdbId: PropTypes.number.isRequired,
-  title: PropTypes.string.isRequired,
-  year: PropTypes.number.isRequired,
-  overview: PropTypes.string.isRequired,
-  folder: PropTypes.string.isRequired,
-  status: PropTypes.string.isRequired,
-  titleSlug: PropTypes.string.isRequired,
-  images: PropTypes.arrayOf(PropTypes.object).isRequired,
-  posterWidth: PropTypes.number.isRequired,
-  posterHeight: PropTypes.number.isRequired,
-  showTitle: PropTypes.bool.isRequired,
-  showRelativeDates: PropTypes.bool.isRequired,
-  shortDateFormat: PropTypes.string.isRequired,
-  timeFormat: PropTypes.string.isRequired,
-  isExistingMovie: PropTypes.bool.isRequired,
-  isExclusionMovie: PropTypes.bool.isRequired
-};
-
-AddListMoviePoster.defaultProps = {
-  statistics: {
-    movieFileCount: 0
-  }
-};
-
-export default AddListMoviePoster;

frontend/src/AddMovie/AddListMovie/Posters/AddListMoviePosterConnector.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 AddListMoviePoster from './AddListMoviePoster';
-
-function createMapStateToProps() {
-  return createSelector(
-    createExistingMovieSelector(),
-    createExclusionMovieSelector(),
-    createDimensionsSelector(),
-    (isExistingMovie, isExclusionMovie, dimensions) => {
-      return {
-        isExistingMovie,
-        isExclusionMovie,
-        isSmallScreen: dimensions.isSmallScreen
-      };
-    }
-  );
-}
-
-export default connect(createMapStateToProps)(AddListMoviePoster);

frontend/src/AddMovie/AddListMovie/Posters/AddListMoviePosterInfo.js

@@ -1,30 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styles from './AddListMoviePosterInfo.css';
-
-function AddListMoviePosterInfo(props) {
-  const {
-    studio,
-    sortKey
-  } = props;
-
-  if (sortKey === 'studio' && studio) {
-    return (
-      <div className={styles.info}>
-        {studio}
-      </div>
-    );
-  }
-
-  return null;
-}
-
-AddListMoviePosterInfo.propTypes = {
-  studio: PropTypes.string,
-  sortKey: PropTypes.string.isRequired,
-  showRelativeDates: PropTypes.bool.isRequired,
-  shortDateFormat: PropTypes.string.isRequired,
-  timeFormat: PropTypes.string.isRequired
-};
-
-export default AddListMoviePosterInfo;

frontend/src/AddMovie/AddListMovie/Posters/Options/AddListMoviePosterOptionsModalContentConnector.js

@@ -1,23 +0,0 @@
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { setListMoviePosterOption } from 'Store/Actions/addMovieActions';
-import AddListMoviePosterOptionsModalContent from './AddListMoviePosterOptionsModalContent';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.addMovie,
-    (addMovie) => {
-      return addMovie.posterOptions;
-    }
-  );
-}
-
-function createMapDispatchToProps(dispatch, props) {
-  return {
-    onChangePosterOption(payload) {
-      dispatch(setListMoviePosterOption(payload));
-    }
-  };
-}
-
-export default connect(createMapStateToProps, createMapDispatchToProps)(AddListMoviePosterOptionsModalContent);

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

@@ -1,13 +0,0 @@
-import { connect } from 'react-redux';
-import { setListMovieTableOption } from 'Store/Actions/addMovieActions';
-import AddListMovieHeader from './AddListMovieHeader';
-
-function createMapDispatchToProps(dispatch, props) {
-  return {
-    onTableOptionChange(payload) {
-      dispatch(setListMovieTableOption(payload));
-    }
-  };
-}
-
-export default connect(undefined, createMapDispatchToProps)(AddListMovieHeader);

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/AddListMovieRow.js

@@ -1,218 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import HeartRating from 'Components/HeartRating';
-import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
-import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
-import MovieStatusCell from './MovieStatusCell';
-import Link from 'Components/Link/Link';
-import AddNewMovieModal from 'AddMovie/AddNewMovie/AddNewMovieModal';
-import styles from './AddListMovieRow.css';
-
-class AddListMovieRow extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      isNewAddMovieModalOpen: false
-    };
-  }
-
-  //
-  // Listeners
-
-  onPress = () => {
-    this.setState({ isNewAddMovieModalOpen: true });
-  }
-
-  onAddMovieModalClose = () => {
-    this.setState({ isNewAddMovieModalOpen: false });
-  }
-
-  //
-  // Render
-
-  render() {
-    const {
-      status,
-      tmdbId,
-      title,
-      titleSlug,
-      studio,
-      inCinemas,
-      physicalRelease,
-      year,
-      overview,
-      folder,
-      images,
-      genres,
-      ratings,
-      certification,
-      columns,
-      isExistingMovie
-    } = this.props;
-
-    const {
-      isNewAddMovieModalOpen
-    } = this.state;
-
-    const linkProps = isExistingMovie ? { to: `/movie/${titleSlug}` } : { onPress: this.onPress };
-
-    return (
-      <>
-        {
-          columns.map((column) => {
-            const {
-              name,
-              isVisible
-            } = column;
-
-            if (!isVisible) {
-              return null;
-            }
-
-            if (name === 'status') {
-              return (
-                <MovieStatusCell
-                  key={name}
-                  className={styles[name]}
-                  status={status}
-                  component={VirtualTableRowCell}
-                />
-              );
-            }
-
-            if (name === 'sortTitle') {
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                >
-                  <Link
-                    {...linkProps}
-                  >
-                    {title}
-                  </Link>
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (name === 'studio') {
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                >
-                  {studio}
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (name === 'inCinemas') {
-              return (
-                <RelativeDateCellConnector
-                  key={name}
-                  className={styles[name]}
-                  date={inCinemas}
-                  component={VirtualTableRowCell}
-                />
-              );
-            }
-
-            if (name === 'physicalRelease') {
-              return (
-                <RelativeDateCellConnector
-                  key={name}
-                  className={styles[name]}
-                  date={physicalRelease}
-                  component={VirtualTableRowCell}
-                />
-              );
-            }
-
-            if (name === 'genres') {
-              const joinedGenres = genres.join(', ');
-
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                >
-                  <span title={joinedGenres}>
-                    {joinedGenres}
-                  </span>
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (name === 'ratings') {
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                >
-                  <HeartRating
-                    rating={ratings.value}
-                  />
-                </VirtualTableRowCell>
-              );
-            }
-
-            if (name === 'certification') {
-              return (
-                <VirtualTableRowCell
-                  key={name}
-                  className={styles[name]}
-                >
-                  {certification}
-                </VirtualTableRowCell>
-              );
-            }
-
-            return null;
-          })
-        }
-
-        <AddNewMovieModal
-          isOpen={isNewAddMovieModalOpen && !isExistingMovie}
-          tmdbId={tmdbId}
-          title={title}
-          year={year}
-          overview={overview}
-          folder={folder}
-          images={images}
-          onModalClose={this.onAddMovieModalClose}
-        />
-      </>
-    );
-  }
-}
-
-AddListMovieRow.propTypes = {
-  tmdbId: PropTypes.number.isRequired,
-  status: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  year: PropTypes.number.isRequired,
-  overview: PropTypes.string.isRequired,
-  folder: PropTypes.string.isRequired,
-  images: PropTypes.arrayOf(PropTypes.object).isRequired,
-  titleSlug: PropTypes.string.isRequired,
-  studio: PropTypes.string,
-  inCinemas: PropTypes.string,
-  physicalRelease: PropTypes.string,
-  genres: PropTypes.arrayOf(PropTypes.string).isRequired,
-  ratings: PropTypes.object.isRequired,
-  certification: PropTypes.string,
-  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  isExistingMovie: PropTypes.bool.isRequired
-};
-
-AddListMovieRow.defaultProps = {
-  genres: [],
-  tags: []
-};
-
-export default AddListMovieRow;

frontend/src/AddMovie/AddListMovie/Table/AddListMovieRowConnector.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 AddListMovieRow from './AddListMovieRow';
-
-function createMapStateToProps() {
-  return createSelector(
-    createExistingMovieSelector(),
-    createExclusionMovieSelector(),
-    createDimensionsSelector(),
-    (isExistingMovie, isExclusionMovie, dimensions) => {
-      return {
-        isExistingMovie,
-        isExclusionMovie,
-        isSmallScreen: dimensions.isSmallScreen
-      };
-    }
-  );
-}
-
-export default connect(createMapStateToProps)(AddListMovieRow);

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

@@ -1,9 +0,0 @@
-.status {
-  composes: cell from '~Components/Table/Cells/TableRowCell.css';
-
-  width: 60px;
-}
-
-.statusIcon {
-  width: 20px !important;
-}

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';
 
@@ -87,8 +88,8 @@ class AddNewMovie extends Component {
     const isFetching = this.state.isFetching;
 
     return (
-      <PageContent title="Add New Movie">
-        <PageContentBodyConnector>
+      <PageContent title={translate('AddNewMovie')}>
+        <PageContentBody>
           <div className={styles.searchContainer}>
             <div className={styles.searchIconContainer}>
               <Icon
@@ -126,7 +127,7 @@ class AddNewMovie extends Component {
             !isFetching && !!error ?
               <div className={styles.message}>
                 <div className={styles.helpText}>
-                  Failed to load search results, please try again.
+                  {translate('FailedLoadingSearchResults')}
                 </div>
                 <div>{getErrorMessage(error)}</div>
               </div> : null
@@ -151,11 +152,15 @@ class AddNewMovie extends Component {
           {
             !isFetching && !error && !items.length && !!term &&
               <div className={styles.message}>
-                <div className={styles.noResults}>Couldn't find any results for '{term}'</div>
-                <div>You can also search using TMDB ID or IMDB ID of a movie. eg. tmdb:71663</div>
+                <div className={styles.noResults}>
+                  {translate('CouldNotFindResults', [term])}
+                </div>
+                <div>
+                  {translate('YouCanAlsoSearch')}
+                </div>
                 <div>
                   <Link to="https://github.com/Radarr/Radarr/wiki/FAQ#why-cant-i-add-a-new-movie-when-i-know-the-tmdb-id">
-                    Why can't I find my movie?
+                    {translate('CantFindMovie')}
                   </Link>
                 </div>
               </div>
@@ -166,9 +171,11 @@ 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>
+                  {translate('AddNewTmdbIdMessage')}
                 </div>
-                <div>You can also search using TMDB ID of a movie. eg. tmdb:71663</div>
               </div>
           }
 
@@ -176,14 +183,14 @@ class AddNewMovie extends Component {
             !term && !hasExistingMovies ?
               <div className={styles.message}>
                 <div className={styles.noMoviesText}>
-                  You haven't added any movies yet, do you want to import some or all of your movies first?
+                  {translate('HaveNotAddedMovies')}
                 </div>
                 <div>
                   <Button
                     to="/add/import"
                     kind={kinds.PRIMARY}
                   >
-                    Import Existing Movies
+                    {translate('ImportExistingMovies')}
                   </Button>
                 </div>
               </div> :
@@ -191,7 +198,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 { fetchImportExclusions } from 'Store/Actions/Settings/importExclusions';
+import parseUrl from 'Utilities/String/parseUrl';
 import AddNewMovie from './AddNewMovie';
 
 function createMapStateToProps() {
@@ -29,7 +29,7 @@ const mapDispatchToProps = {
   lookupMovie,
   clearAddMovie,
   fetchRootFolders,
-  fetchNetImportExclusions
+  fetchImportExclusions
 };
 
 class AddNewMovieConnector extends Component {
@@ -45,7 +45,7 @@ class AddNewMovieConnector extends Component {
 
   componentDidMount() {
     this.props.fetchRootFolders();
-    this.props.fetchNetImportExclusions();
+    this.props.fetchImportExclusions();
   }
 
   componentWillUnmount() {
@@ -102,7 +102,7 @@ AddNewMovieConnector.propTypes = {
   lookupMovie: PropTypes.func.isRequired,
   clearAddMovie: PropTypes.func.isRequired,
   fetchRootFolders: PropTypes.func.isRequired,
-  fetchNetImportExclusions: PropTypes.func.isRequired
+  fetchImportExclusions: PropTypes.func.isRequired
 };
 
 export default connect(createMapStateToProps, mapDispatchToProps)(AddNewMovieConnector);

frontend/src/AddMovie/AddNewMovie/AddNewMovieModalContent.js

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

frontend/src/AddMovie/AddNewMovie/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

@@ -34,10 +34,20 @@
 
 .content {
   flex: 0 1 100%;
+  overflow: hidden;
+}
+
+.titleRow {
+  display: flex;
+}
+
+.titleContainer {
+  display: flex;
+  align-items: flex-end;
+  flex: 0 1 auto;
 }
 
 .title {
-  display: flex;
   font-weight: 300;
   font-size: 36px;
 }
@@ -47,16 +57,12 @@
   color: $disabledColor;
 }
 
-.tmdbLink {
-  composes: link from '~Components/Link/Link.css';
-
-  margin-top: -4px;
-  margin-left: auto;
-  color: $textColor;
-}
-
-.tmdbLinkIcon {
-  margin-left: 10px;
+.icons {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1 0 auto;
+  height: 55px;
 }
 
 .alreadyExistsIcon {
@@ -67,10 +73,22 @@
 
 .exclusionIcon {
   margin-left: 10px;
-  color: #bc3737;
+  color: $dangerColor;
   pointer-events: all;
 }
 
 .overview {
   margin-top: 20px;
 }
+
+.links {
+  margin-left: 8px;
+  pointer-events: all;
+}
+
+@media only screen and (max-width: $breakpointMedium) {
+  .titleRow {
+    justify-content: space-between;
+    overflow: hidden;
+  }
+}

frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js

@@ -1,11 +1,14 @@
 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 Tooltip from 'Components/Tooltip/Tooltip';
+import { icons, kinds, sizes, tooltipPositions } from 'Helpers/Props';
+import MovieDetailsLinks from 'Movie/Details/MovieDetailsLinks';
 import MoviePoster from 'Movie/MoviePoster';
+import translate from 'Utilities/String/translate';
 import AddNewMovieModal from './AddNewMovieModal';
 import styles from './AddNewMovieSearchResult.css';
 
@@ -39,7 +42,7 @@ class AddNewMovieSearchResult extends Component {
     this.setState({ isNewAddMovieModalOpen: false });
   }
 
-  onTMDBLinkPress = (event) => {
+  onExternalLinkPress = (event) => {
     event.stopPropagation();
   }
 
@@ -49,6 +52,8 @@ class AddNewMovieSearchResult extends Component {
   render() {
     const {
       tmdbId,
+      imdbId,
+      youTubeTrailerId,
       title,
       titleSlug,
       year,
@@ -89,45 +94,43 @@ class AddNewMovieSearchResult extends Component {
           }
 
           <div className={styles.content}>
-            <div className={styles.title}>
-              {title}
+            <div className={styles.titleRow}>
+              <div className={styles.titleContainer}>
+                <div className={styles.title}>
+                  {title}
 
-              {
-                !title.contains(year) && !!year &&
-                  <span className={styles.year}>({year})</span>
-              }
+                  {
+                    !title.contains(year) && !!year ?
+                      <span className={styles.year}>
+                        ({year})
+                      </span> :
+                      null
+                  }
+                </div>
+              </div>
 
-              {
-                isExistingMovie &&
-                  <Icon
-                    className={styles.alreadyExistsIcon}
-                    name={icons.CHECK_CIRCLE}
-                    size={36}
-                    title="Already in your library"
-                  />
-              }
+              <div className={styles.icons}>
 
-              {
-                isExclusionMovie &&
-                  <Icon
-                    className={styles.exclusionIcon}
-                    name={icons.DANGER}
-                    size={36}
-                    title="Movie is on Net Import Exclusion List"
-                  />
-              }
+                {
+                  isExistingMovie &&
+                    <Icon
+                      className={styles.alreadyExistsIcon}
+                      name={icons.CHECK_CIRCLE}
+                      size={36}
+                      title={translate('AlreadyInYourLibrary')}
+                    />
+                }
 
-              <Link
-                className={styles.tmdbLink}
-                to={`https://www.themoviedb.org/movie/${tmdbId}`}
-                onPress={this.onTMDBLinkPress}
-              >
-                <Icon
-                  className={styles.tmdbLinkIcon}
-                  name={icons.EXTERNAL_LINK}
-                  size={28}
-                />
-              </Link>
+                {
+                  isExclusionMovie &&
+                    <Icon
+                      className={styles.exclusionIcon}
+                      name={icons.DANGER}
+                      size={36}
+                      title={translate('MovieIsOnImportExclusionList')}
+                    />
+                }
+              </div>
             </div>
 
             <div>
@@ -145,6 +148,33 @@ class AddNewMovieSearchResult extends Component {
                   </Label>
               }
 
+              <Tooltip
+                anchor={
+                  <Label
+                    size={sizes.LARGE}
+                  >
+                    <Icon
+                      name={icons.EXTERNAL_LINK}
+                      size={13}
+                    />
+
+                    <span className={styles.links}>
+                      Links
+                    </span>
+                  </Label>
+                }
+                tooltip={
+                  <MovieDetailsLinks
+                    tmdbId={tmdbId}
+                    youTubeTrailerId={youTubeTrailerId}
+                    imdbId={imdbId}
+                  />
+                }
+                canFlip={true}
+                kind={kinds.INVERSE}
+                position={tooltipPositions.BOTTOM}
+              />
+
               {
                 status === 'ended' &&
                   <Label
@@ -179,6 +209,8 @@ class AddNewMovieSearchResult extends Component {
 
 AddNewMovieSearchResult.propTypes = {
   tmdbId: PropTypes.number.isRequired,
+  imdbId: PropTypes.string,
+  youTubeTrailerId: PropTypes.string,
   title: PropTypes.string.isRequired,
   titleSlug: PropTypes.string.isRequired,
   year: PropTypes.number.isRequired,

frontend/src/AddMovie/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,14 @@
 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 translate from 'Utilities/String/translate';
 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,8 +80,8 @@ class ImportMovie extends Component {
       rootFolderId,
       path,
       rootFoldersFetching,
-      rootFoldersPopulated,
       rootFoldersError,
+      rootFoldersPopulated,
       unmappedFolders
     } = this.props;
 
@@ -92,30 +93,40 @@ class ImportMovie extends Component {
     } = this.state;
 
     return (
-      <PageContent title="Import Movies">
-        <PageContentBodyConnector
+      <PageContent title={translate('ImportMovies')}>
+        <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>
+                {translate('UnableToLoadRootFolders')}
+              </div> :
+              null
           }
 
           {
-            !rootFoldersError && rootFoldersPopulated && !unmappedFolders.length &&
+            !rootFoldersError &&
+            !rootFoldersFetching &&
+            rootFoldersPopulated &&
+            !unmappedFolders.length ?
               <div>
                 All movies in {path} have been imported
-              </div>
+              </div> :
+              null
           }
 
           {
-            !rootFoldersError && rootFoldersPopulated && !!unmappedFolders.length && scroller &&
+            !rootFoldersError &&
+            !rootFoldersFetching &&
+            rootFoldersPopulated &&
+            !!unmappedFolders.length &&
+            scroller ?
               <ImportMovieTableConnector
                 rootFolderId={rootFolderId}
                 unmappedFolders={unmappedFolders}
@@ -126,17 +137,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.css

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

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

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

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

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

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

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

frontend/src/AddMovie/ImportMovie/Import/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,15 @@
 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 translate from 'Utilities/String/translate';
 import ImportMovieSearchResultConnector from './ImportMovieSearchResultConnector';
 import ImportMovieTitle from './ImportMovieTitle';
 import styles from './ImportMovieSelectMovie.css';
@@ -174,7 +175,7 @@ class ImportMovieSelectMovie extends Component {
                         kind={kinds.WARNING}
                       />
 
-                      No match found!
+                      {translate('NoMatchFound')}
                     </div> :
                     null
                 }
@@ -189,7 +190,7 @@ class ImportMovieSelectMovie extends Component {
                         kind={kinds.WARNING}
                       />
 
-                      Search failed, please try again later.
+                      {translate('SearchFailedPleaseTryAgainLater')}
                     </div> :
                     null
                 }

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

@@ -1,7 +1,8 @@
 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 translate from 'Utilities/String/translate';
 import styles from './ImportMovieTitle.css';
 
 function ImportMovieTitle(props) {
@@ -33,7 +34,7 @@ function ImportMovieTitle(props) {
           <Label
             kind={kinds.WARNING}
           >
-            Existing
+            {translate('Existing')}
           </Label>
       }
     </div>

frontend/src/AddMovie/ImportMovie/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,12 @@
 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 translate from 'Utilities/String/translate';
 import styles from './ImportMovieRootFolderRow.css';
 
 function ImportMovieRootFolderRow(props) {
@@ -40,7 +41,7 @@ function ImportMovieRootFolderRow(props) {
 
       <TableRowCell className={styles.actions}>
         <IconButton
-          title="Remove root folder"
+          title={translate('RemoveRootFolder')}
           name={icons.REMOVE}
           onPress={onDeletePress}
         />

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

@@ -1,32 +1,33 @@
 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';
 
 const rootFolderColumns = [
   {
     name: 'path',
-    label: 'Path',
+    label: translate('Path'),
     isVisible: true
   },
   {
     name: 'freeSpace',
-    label: 'Free Space',
+    label: translate('FreeSpace'),
     isVisible: true
   },
   {
     name: 'unmappedFolders',
-    label: 'Unmapped Folders',
+    label: translate('UnmappedFolders'),
     isVisible: true
   },
   {
@@ -76,8 +77,8 @@ class ImportMovieSelectFolder extends Component {
     } = this.props;
 
     return (
-      <PageContent title="Import Movies">
-        <PageContentBodyConnector>
+      <PageContent title={translate('ImportMovies')}>
+        <PageContentBody>
           {
             isFetching && !isPopulated &&
               <LoadingIndicator />
@@ -85,32 +86,30 @@ class ImportMovieSelectFolder extends Component {
 
           {
             !isFetching && !!error &&
-              <div>Unable to load root folders</div>
+              <div>
+                {translate('UnableToLoadRootFolders')}
+              </div>
           }
 
           {
             !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>
-                    </li>
-                    <li className={styles.tip}>
-                      Point Radarr to the folder containing all of your movies, not a specific one. eg. <span className={styles.code}>"{isWindows ? 'C:\\movies' : '/movies'}"</span> and not <span className={styles.code}>"{isWindows ? 'C:\\movies\\the matrix' : '/movies/the matrix'}"</span>
-                    </li>
+                    <li className={styles.tip} dangerouslySetInnerHTML={{ __html: translate('ImportIncludeQuality', ['<code>movie.2008.bluray.mkv</code>']) }} />
+                    <li className={styles.tip} dangerouslySetInnerHTML={{ __html: translate('ImportRootPath', [`<code>${isWindows ? 'C:\\movies' : '/movies'}</code>`, `<code>${isWindows ? 'C:\\movies\\the matrix' : '/movies/the matrix'}</code>`]) }} />
                   </ul>
                 </div>
 
                 {
                   items.length > 0 ?
                     <div className={styles.recentFolders}>
-                      <FieldSet legend="Recent Folders">
+                      <FieldSet legend={translate('RecentFolders')}>
                         <Table
                           columns={rootFolderColumns}
                         >
@@ -141,7 +140,7 @@ class ImportMovieSelectFolder extends Component {
                           className={styles.importButtonIcon}
                           name={icons.DRIVE}
                         />
-                        Choose another folder
+                        {translate('ChooseAnotherFolder')}
                       </Button>
                     </div> :
 
@@ -155,7 +154,7 @@ class ImportMovieSelectFolder extends Component {
                           className={styles.importButtonIcon}
                           name={icons.DRIVE}
                         />
-                        Start Import
+                        {translate('StartImport')}
                       </Button>
                     </div>
                 }
@@ -169,7 +168,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 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 DownloadClientSettingsConnector from 'Settings/DownloadClients/DownloadClientSettingsConnector';
+import GeneralSettingsConnector from 'Settings/General/GeneralSettingsConnector';
+import ImportListSettingsConnector from 'Settings/ImportLists/ImportListSettingsConnector';
+import IndexerSettingsConnector from 'Settings/Indexers/IndexerSettingsConnector';
 import MediaManagementConnector from 'Settings/MediaManagement/MediaManagementConnector';
+import MetadataSettings from 'Settings/Metadata/MetadataSettings';
+import NotificationSettings from 'Settings/Notifications/NotificationSettings';
 import Profiles from 'Settings/Profiles/Profiles';
 import Quality from 'Settings/Quality/Quality';
-import CustomFormatSettingsConnector from 'Settings/CustomFormats/CustomFormatSettingsConnector';
-import IndexerSettingsConnector from 'Settings/Indexers/IndexerSettingsConnector';
-import DownloadClientSettingsConnector from 'Settings/DownloadClients/DownloadClientSettingsConnector';
-import NetImportSettingsConnector from 'Settings/NetImport/NetImportSettingsConnector';
-import NotificationSettings from 'Settings/Notifications/NotificationSettings';
-import MetadataSettings from 'Settings/Metadata/MetadataSettings';
+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
@@ -162,8 +156,8 @@ function AppRoutes(props) {
       />
 
       <Route
-        path="/settings/netimports"
-        component={NetImportSettingsConnector}
+        path="/settings/importlists"
+        component={ImportListSettingsConnector}
       />
 
       <Route

frontend/src/App/AppUpdatedModalContent.js

@@ -1,13 +1,14 @@
 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 translate from 'Utilities/String/translate';
 import styles from './AppUpdatedModalContent.css';
 
 function AppUpdatedModalContent(props) {
@@ -49,12 +50,12 @@ function AppUpdatedModalContent(props) {
                     </div>
 
                     <UpdateChanges
-                      title="New"
+                      title={translate('New')}
                       changes={update.changes.new}
                     />
 
                     <UpdateChanges
-                      title="Fixed"
+                      title={translate('Fixed')}
                       changes={update.changes.fixed}
                     />
                   </div>

frontend/src/App/ConnectionLostModal.js

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

frontend/src/Calendar/Agenda/Agenda.js

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

frontend/src/Calendar/Agenda/AgendaEvent.css

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

frontend/src/Calendar/Agenda/AgendaEvent.js

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

frontend/src/Calendar/Calendar.js

@@ -1,11 +1,12 @@
 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 translate from 'Utilities/String/translate';
 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 {
@@ -30,7 +31,9 @@ class Calendar extends Component {
 
         {
           !isFetching && !!error &&
-            <div>Unable to load the calendar</div>
+            <div>
+              {translate('UnableToLoadTheCalendar')}
+            </div>
         }
 
         {

frontend/src/Calendar/CalendarConnector.js

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

frontend/src/Calendar/CalendarPage.js

@@ -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">
+      <PageContent title={translate('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,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 getStatusStyle from 'Calendar/getStatusStyle';
 import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
+import { icons, kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import CalendarEventQueueDetails from './CalendarEventQueueDetails';
 import styles from './CalendarEvent.css';
 
@@ -17,11 +18,15 @@ class CalendarEvent extends Component {
   render() {
     const {
       movieFile,
+      isAvailable,
       inCinemas,
+      physicalRelease,
+      digitalRelease,
       title,
       titleSlug,
       genres,
       monitored,
+      certification,
       hasFile,
       grabbed,
       queueItem,
@@ -31,13 +36,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>
@@ -70,7 +86,7 @@ class CalendarEvent extends Component {
                 <Icon
                   className={styles.statusIcon}
                   name={icons.DOWNLOADING}
-                  title="movie is downloading"
+                  title={translate('MovieIsDownloading')}
                 />
             }
 
@@ -82,7 +98,7 @@ class CalendarEvent extends Component {
                   className={styles.statusIcon}
                   name={icons.MOVIE_FILE}
                   kind={kinds.WARNING}
-                  title="Quality cutoff has not been met"
+                  title={translate('QualityCutoffHasNotBeenMet')}
                 />
             }
           </div>
@@ -100,7 +116,10 @@ class CalendarEvent extends Component {
             showMovieInformation &&
               <div className={styles.movieInfo}>
                 <div className={styles.genres}>
-                  {eventType}
+                  {eventType.join(', ')}
+                </div>
+                <div>
+                  {certification}
                 </div>
               </div>
           }
@@ -117,8 +136,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,9 @@
 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';
+import translate from 'Utilities/String/translate';
 
 function CalendarEventQueueDetails(props) {
   const {
@@ -11,10 +12,12 @@ function CalendarEventQueueDetails(props) {
     sizeleft,
     estimatedCompletionTime,
     status,
+    trackedDownloadState,
+    trackedDownloadStatus,
     errorMessage
   } = props;
 
-  const progress = (100 - sizeleft / size * 100);
+  const progress = size ? (100 - sizeleft / size * 100) : 0;
 
   return (
     <QueueDetails
@@ -23,9 +26,11 @@ function CalendarEventQueueDetails(props) {
       sizeleft={sizeleft}
       estimatedCompletionTime={estimatedCompletionTime}
       status={status}
+      trackedDownloadState={trackedDownloadState}
+      trackedDownloadStatus={trackedDownloadStatus}
       errorMessage={errorMessage}
       progressBar={
-        <div title={`Movie is downloading - ${progress.toFixed(1)}% ${title}`}>
+        <div title={translate('MovieIsDownloadingInterp', [progress.toFixed(1), title])}>
           <CircularProgressBar
             progress={progress}
             size={20}
@@ -44,6 +49,8 @@ CalendarEventQueueDetails.propTypes = {
   sizeleft: PropTypes.number.isRequired,
   estimatedCompletionTime: PropTypes.string,
   status: PropTypes.string.isRequired,
+  trackedDownloadState: PropTypes.string.isRequired,
+  trackedDownloadStatus: PropTypes.string.isRequired,
   errorMessage: PropTypes.string
 };
 

frontend/src/Calendar/Header/CalendarHeader.js

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

@@ -1,11 +1,10 @@
-import _ from 'lodash';
 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() {
@@ -14,19 +13,16 @@ function createMapStateToProps() {
     createDimensionsSelector(),
     createUISettingsSelector(),
     (calendar, dimensions, uiSettings) => {
-      const result = _.pick(calendar, [
-        'isFetching',
-        'view',
-        'time',
-        'start',
-        'end'
-      ]);
-
-      result.isSmallScreen = dimensions.isSmallScreen;
-      result.collapseViewButtons = dimensions.isLargeScreen;
-      result.longDateFormat = uiSettings.longDateFormat;
-
-      return result;
+      return {
+        isFetching: calendar.isFetching,
+        view: calendar.view,
+        time: calendar.time,
+        start: calendar.start,
+        end: calendar.end,
+        isSmallScreen: dimensions.isSmallScreen,
+        collapseViewButtons: dimensions.isLargeScreen,
+        longDateFormat: uiSettings.longDateFormat
+      };
     }
   );
 }

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