Only query 5 movies ahead

This reverts commit 0479bb9cc3.

.circleci/Dockerfile

@@ -1,14 +0,0 @@
-FROM mono:5.18
-
-RUN dpkg --add-architecture i386 && apt-get update && apt-get install -y git ssh tar gzip ca-certificates wget zip wine wine32 wine64 libwine libwine:i386
-RUN curl -sL https://deb.nodesource.com/setup_8.x | bash -E -
-RUN apt-get install -y nodejs
-RUN wget https://mediaarea.net/repo/deb/repo-mediaarea_1.0-7_all.deb && dpkg -i repo-mediaarea_1.0-7_all.deb && apt-get update
-RUN apt-get install -y libmediainfo-dev libmediainfo0v5 mediainfo
-RUN npm i -g npm
-RUN apt-get install -y python3-pip && pip3 install gitchangelog pystache
-RUN curl -O https://dl.google.com/go/go1.10.2.linux-amd64.tar.gz && tar xvf go*.tar.gz && chown -R root:root ./go && mv go /usr/local
-ENV GOPATH=$HOME/work
-ENV PATH="${PATH}:/usr/local/go/bin:$GOPATH/bin"
-RUN go get github.com/aktau/github-release
-RUN npm install -g yarn

.circleci/config.yml

@@ -1,169 +0,0 @@
-version: 2
-
-defaults: &defaults
-  docker:
-    - image: gallileo/radarr-cci-primary:5.8.9
-  environment:
-      BUILD_VERSION: 0.2.0
-
-jobs:
-    build:
-        <<: *defaults
-        steps:
-            - restore_cache:
-                keys:
-                    - source-v1-{{ .Branch }}-{{ .Revision }}
-                    - source-v1-{{ .Branch }}-
-                    - source-v1-
-            - checkout
-            - run: git submodule update --init --recursive
-            - save_cache:
-                key: source-v1-{{ .Branch }}-{{ .Revision }}
-                paths:
-                    - ".git"
-            - run:
-                name: Patching Assembly Info
-                command: sed -i "s/AssemblyVersion(\".*\")/AssemblyVersion(\"$BUILD_VERSION.$CIRCLE_BUILD_NUM\")/gi" src/NzbDrone.Common/Properties/SharedAssemblyInfo.cs && cat src/NzbDrone.Common/Properties/SharedAssemblyInfo.cs
-            - run:
-                name: Clean Build
-                command: ./build.sh Clean
-            - run:
-                name: Restore Nuget
-                command: ./build.sh NugetMono
-            - run:
-                name: Build
-                command: ./build.sh Build
-            - restore_cache:
-                keys:
-                    - v1-npm-deps-{{ checksum "package.json" }}
-                    # Find the most recent cache used from any branch
-                    - v1-npm-deps-
-            - run:
-                name: Gulp
-                command: ./build.sh Gulp
-            - save_cache:
-                key: v1-npm-deps-{{ checksum "package.json" }}
-                paths:
-                    - "node_modules"
-            - run:
-                name: Package
-                command: ./build.sh Package
-            - run:
-                name: Preparing Tests
-                command: mkdir -p _tests/reports/junit && mkdir -p ../.config/Radarr && chmod -R 777 ../.config
-            - persist_to_workspace:
-                root: .
-                # Must be relative path from root
-                paths:
-                    - _output
-                    - _output_mono
-                    - _output_osx
-                    - _output_osx_app
-                    - _tests
-                    - setup
-                    - .circleci
-                    - deploy.sh
-    unit_tests:
-        <<: *defaults
-        steps:
-            - attach_workspace:
-                at: .
-            - run:
-                name: Preparing Tests
-                command: mkdir -p ../.config/Radarr && chmod -R 777 ../.config
-            - run:
-                name: Unit Tests
-                command: ./_tests/test.sh Linux Unit
-            - store_test_results:
-                path: _tests/reports/
-
-    integration_tests:
-        <<: *defaults
-        steps:
-            - attach_workspace:
-                at: .
-            - run:
-                name: Copy Binaries for Integration Tests
-                command: cp -R _output_mono/ _tests/bin
-            - run:
-                name: Preparing Tests
-                command: mkdir -p ../.config/Radarr && chmod -R 777 ../.config
-            - run:
-                name: Integration Tests
-                command: ./_tests/test.sh Linux Integration
-            - store_test_results:
-                path: _tests/reports/
-    publish_artifacts:
-        <<: *defaults
-        steps:
-            - attach_workspace:
-                at: .
-            - run:
-                name: "Creating packages"
-                command: |
-                    mkdir -p _packages/
-                    cp -r _output/ _packages/Radarr
-                    zip -r _packages/Radarr.${CIRCLE_BRANCH//\//-}.$BUILD_VERSION.$CIRCLE_BUILD_NUM.windows.zip _packages/Radarr
-                    rm -rf _packages/Radarr
-                    cp -r _output_mono/ _packages/Radarr
-                    tar -zcvf _packages/Radarr.${CIRCLE_BRANCH//\//-}.$BUILD_VERSION.$CIRCLE_BUILD_NUM.linux.tar.gz -C _packages Radarr
-                    rm -rf _packages/Radarr
-                    cp -r _output_osx/ _packages/Radarr
-                    tar -zcvf _packages/Radarr.${CIRCLE_BRANCH//\//-}.$BUILD_VERSION.$CIRCLE_BUILD_NUM.osx.tar.gz -C _packages Radarr
-                    rm -rf _packages/Radarr
-                    cd _output_osx_app/
-                    zip -r ../_packages/Radarr.${CIRCLE_BRANCH//\//-}.$BUILD_VERSION.$CIRCLE_BUILD_NUM.osx-app.zip *
-            - run:
-                name: "Creating Installer"
-                command: wine setup/inno/ISCC.exe setup/nzbdrone.iss && cp -r setup/Output/Radarr* _packages/
-            - store_artifacts:
-                path: _packages
-                destination: artifacts
-            #- run:
-            #    name: "Deploying"
-            #    command: chmod +x deploy.sh && ./deploy.sh
-            - persist_to_workspace:
-                root: .
-                # Must be relative path from root
-                paths:
-                    - _packages
-    deploy:
-        <<: *defaults
-        steps:
-            - attach_workspace:
-                at: .
-            - restore_cache:
-                keys:
-                    - source-v1-{{ .Branch }}-{{ .Revision }}
-                    - source-v1-{{ .Branch }}-
-                    - source-v1-
-            - checkout
-            - run:
-                name: Creating Release
-                command: export LC_ALL=C.UTF-8 && export changelog=$(GITCHANGELOG_CONFIG_FILENAME=.gitchangelog.rc.release gitchangelog) && echo "Deploying v$BUILD_VERSION.$CIRCLE_BUILD_NUM to Github, with changelog:\n\n$changelog" && github-release release -u Radarr -r Radarr -t "v$BUILD_VERSION" -p --draft -d "$changelog" -n "Pre-Release v$BUILD_VERSION"
-            - run:
-                name: Uploading Assets
-                command: cd _packages && ls Radarr.*.* | xargs -n1 -P0 -I{} -- github-release upload -u Radarr -r Radarr -t "v$BUILD_VERSION.$CIRCLE_BUILD_NUM" --name {} --file {}
-
-workflows:
-    version: 2
-
-    build_and_test:
-        jobs:
-            - build
-            - unit_tests:
-                requires:
-                    - build
-            #- integration_tests:
-            #    requires:
-            #        - build
-            - publish_artifacts:
-                requires:
-                    - build
-            #- request_deploy:
-            #    type: approval
-            #    requires:
-            #        - publish_artifacts
-            #- deploy:
-            #    requires:
-            #        - request_deploy

.circleci/nunit3-junit.xslt

@@ -1,69 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
-  <xsl:output method="xml" indent="yes"/>
-
-  <xsl:template match="/test-run">
-    <testsuites tests="{@testcasecount}" failures="{@failed}" disabled="{@skipped}" time="{@duration}">
-      <xsl:apply-templates/>
-    </testsuites>
-  </xsl:template>
-
-  <xsl:template match="test-suite">
-    <xsl:if test="test-case">
-      <testsuite tests="{@testcasecount}" time="{@duration}" errors="{@testcasecount - @passed - @skipped - @failed}" failures="{@failed}" skipped="{@skipped}" timestamp="{@start-time}">
-        <xsl:attribute name="name">
-          <xsl:for-each select="ancestor-or-self::test-suite/@name">
-            <xsl:value-of select="concat(., '.')"/>
-          </xsl:for-each>
-        </xsl:attribute>
-        <xsl:apply-templates select="test-case"/>
-      </testsuite>
-      <xsl:apply-templates select="test-suite"/>
-    </xsl:if>
-    <xsl:if test="not(test-case)">
-      <xsl:apply-templates/>
-    </xsl:if>
-  </xsl:template>
-
-  <xsl:template match="test-case">
-    <testcase name="{@name}" assertions="{@asserts}" time="{@duration}" status="{@result}" classname="{@classname}">
-      <xsl:if test="@runstate = 'Skipped' or @runstate = 'Ignored'">
-        <skipped/>
-      </xsl:if>
-      
-      <xsl:apply-templates/>
-    </testcase>
-  </xsl:template>
-
-  <xsl:template match="command-line"/>
-  <xsl:template match="settings"/>
-
-  <xsl:template match="output">
-    <system-out>
-      <xsl:value-of select="."/>
-    </system-out>
-  </xsl:template>
-
-  <xsl:template match="stack-trace">
-  </xsl:template>
-
-  <xsl:template match="test-case/failure">
-    <failure message="{./message}">
-      <xsl:value-of select="./stack-trace"/>
-    </failure>
-  </xsl:template>
-
-  <xsl:template match="test-suite/failure"/>
-
-  <xsl:template match="test-case/reason">
-    <skipped message="{./message}"/>
-  </xsl:template>
-  
-  <xsl:template match="test-case/assertions">
-  </xsl:template>
-
-  <xsl:template match="test-suite/reason"/>
-
-  <xsl:template match="properties"/>
-</xsl:stylesheet>
-

.editorconfig

@@ -2,14 +2,43 @@
 # editorconfig.org
 root = true
 
-[*.{cs,html,js,hbs}]
+[*.cs]
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
 indent_style = space
 indent_size = 4
 
-[*.less]
+# Sort using and Import directives with System.* appearing first
+dotnet_sort_system_directives_first = true
+
+# Avoid "this." and "Me." if not necessary
+dotnet_style_qualification_for_field = false:refactoring
+dotnet_style_qualification_for_property = false:refactoring
+dotnet_style_qualification_for_method = false:refactoring
+dotnet_style_qualification_for_event = false:refactoring
+
+# Indentation preferences
+csharp_indent_block_contents = true
+csharp_indent_braces = false
+csharp_indent_case_contents = true
+csharp_indent_case_contents_when_block = true
+csharp_indent_switch_labels = true
+csharp_indent_labels = flush_left
+
+dotnet_style_qualification_for_field = false:suggestion
+dotnet_style_qualification_for_property = false:suggestion
+dotnet_style_qualification_for_method = false:suggestion
+dotnet_style_qualification_for_event = false:suggestion
+dotnet_naming_style.instance_field_style.capitalization = camel_case
+dotnet_naming_style.instance_field_style.required_prefix = _
+
+# Prefer "var" everywhere
+csharp_style_var_for_built_in_types = true:suggestion
+csharp_style_var_when_type_is_apparent = true:suggestion
+csharp_style_var_elsewhere = true:suggestion
+
+[*.{js,html,js,hbs,less,css}]
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true

.esprintrc

@@ -0,0 +1,9 @@
+{
+  "paths": [
+    "frontend/src/**/*.js"
+  ],
+  "ignored": [
+    "**/node_modules/**/*"
+  ],
+  "port": 5004
+}

.gitattributes

@@ -1,22 +1,10 @@
 # Auto detect text files and perform LF normalization
-*text eol=lf
+* text=auto
+
+# Explicitly set bash scripts to have unix endings
+*.sh text eol=lf
+macOS/Radarr text eol=lf
 
 # Custom for Visual Studio
 *.cs     diff=csharp
-#*.sln    merge=union
-#*.csproj merge=union
-#*.vbproj merge=union
-#*.fsproj merge=union
-#*.dbproj merge=union
-
-# Standard to msysgit
-*.doc   diff=astextplain
-*.DOC   diff=astextplain
-*.docx diff=astextplain
-*.DOCX diff=astextplain
-*.dot  diff=astextplain
-*.DOT  diff=astextplain
-*.pdf  diff=astextplain
-*.PDF   diff=astextplain
-*.rtf   diff=astextplain
-*.RTF   diff=astextplain 
+*.sln    merge=union

.github/ISSUE_TEMPLATE/bug_report.md

@@ -2,6 +2,9 @@
 name: Bug report
 about: Support requests will be closed immediately, if you are unsure go to our Discord
   or Subreddit first. Exceptions do not mean you found a bug!
+title: ''
+labels: bug
+assignees: ''
 
 ---
 
@@ -21,11 +24,11 @@ A clear and concise description of what you expected to happen.
 **Screenshots**
 If applicable, add screenshots to help explain your problem.
 
-**Desktop (please complete the following information):**
+**Platform Information (please complete the following information):**
  - OS: [e.g. Windows]
  - Mono Version: [e.g. Mono 5.8] (Only needed under Linux and Mac, found under System -> Status)
  - Browser and Version [e.g. chrome, safari] (Only needed for UI issues)
- - Version [e.g. 22]
+ - Radarr Version [e.g. 3.0.0.2956]
 
 **Debug Logs**
 Turn on debug logs under Settings -> General and wait for the bug to occur again. **Upload the full log file here (or another site and link it). Issues will be closed, if they do not include this!**

.github/ISSUE_TEMPLATE/config.yml

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

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,6 +1,9 @@
 ---
 name: Feature request
 about: Suggest an idea for this project
+title: ''
+labels: feature request
+assignees: ''
 
 ---
 

.github/stale.yml

@@ -7,6 +7,7 @@ exemptLabels:
   - feature request
   - parser
   - confirmed
+  - aphrodite
 # 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
@@ -14,3 +15,4 @@ markComment: >
   This issue has been automatically marked as stale because it has not had recent activity. Please verify that this is still an issue with the latest version of Radarr and report back. Otherwise this issue will be closed.
 # Comment to post when closing a stale issue. Set to `false` to disable
 closeComment: false
+only: issues

.gitignore

@@ -11,6 +11,7 @@ src/**/[Oo]bj/
 *.user
 *.sln.docstates
 .vs/
+.vscode/
 
 # Build results
 *_i.c
@@ -45,6 +46,10 @@ _dotCover*
 # DevExpress CodeRush
 src/.cr/
 
+# Emacs
+*~
+\#*\#
+
 # NCrunch
 *.ncrunch*
 .*crunch*.local.xml
@@ -80,7 +85,6 @@ TestResults
 [Tt]est[Rr]esult*
 *.Cache
 ClientBin
-[Ss]tyle[Cc]op.*
 ~$*
 *.dbmdl
 Generated_Code #added for RIA/Silverlight projects
@@ -102,40 +106,44 @@ _NCrunch_*
 _TeamCity*
 
 # Radarr
-Backups/
-logs/
-#MediaCover/
-UpdateLogs/
-xdg/
 config.xml
-logs.db*
-nzbdrone.db*
-nzbdrone.pid
+nzbdrone.log*txt
+UpdateLogs/
 *workspace.xml
 *.test-cache
 *.userprefs
 */test-results/*
 src/UI/.idea/*
+*log.txt
 node_modules/
 _output*
+_artifacts
 _rawPackage/
 _dotTrace*
 _tests/
 *.Result.xml
+coverage*.xml
+coverage*.json
 setup/Output/
 *.~is
 
-UI.Phantom/
-
 # VS outout folders
 bin
 obj
 output/*
 
+# .NET Core
+project.lock.json
+project.fragment.lock.json
+artifacts/
+**/Properties/launchSettings.json
+
 # Packages
 Radarr_*/
 Radarr_*.zip
 Radarr_*.gz
+gecko.zip
+geckodriver.exe
 
 # macOS metadata files
 ._*
@@ -163,6 +171,8 @@ packages.config.md5sum
 **/.idea/**/tasks.xml
 **/.idea/shelf/*
 **/.idea/dictionaries
+**/.idea/.idea.Radarr.Posix
+**/.idea/.idea.Radarr.Windows
 
 # Sensitive or high-churn files
 **/.idea/**/dataSources/

.gitmodules

@@ -1,4 +0,0 @@
-[submodule "src/ExternalModules/CurlSharp"]
-	path = src/ExternalModules/CurlSharp
-	url = https://github.com/Sonarr/CurlSharp.git
-	branch = master

.travis.yml

@@ -1,16 +0,0 @@
-language: csharp
-solution: src/NzbDrone.sln
-addons:
-  apt:
-    packages:
-      - nodejs
-#      - npm apparently not needed anymore.
-script:
-  - ./build.sh
-  - chmod +x test.sh
-#  - ./test.sh Linux Unit Takes far too long, maybe even crashes travis :/
-after_success:
-  - chmod +x package.sh
-  - ./package.sh
-notifications:
-  - webhooks: https://discordapp.com/api/webhooks/266910310219251712/V-QvCcnYkg3O8PMevcAJOJyCgrYkZQoF2pupLDGbaISNUECmYPd6LRwl3avKHsPyfgWP

.yarnrc

@@ -0,0 +1 @@
+save-prefix ""

CONTRIBUTING.md

@@ -7,21 +7,7 @@ Setup guides, FAQ, the more information we have on the wiki the better.
 
 ## Development ##
 
-### Tools required ###
-- Visual Studio 2015
-- HTML/Javascript editor of choice (Sublime Text/Webstorm/Atom/etc)
-- npm (node package manager)
-- git
-
-### Getting started ###
-
-1.  Fork Radarr
-2.  Clone (develop branch) *you may need pull in submodules separately if you client doesn't clone them automatically (CurlSharp)*
-3.  Run `npm install`
-4.  Run `npm start` - Used to compile the UI components and copy them.
-    Leave this window open.
-    If you have gulp globally installed you can use `gulp watch` instead
-5.  Compile in Visual Studio
+See the readme for information on setting up your development environment.
 
 ### Contributing Code ###
 - If you're adding a new, already requested feature, please comment on [Github Issues](https://github.com/Radarr/Radarr/issues "Github Issues") so work is not duplicated (If you want to add something not already on there, please talk to us first)

DEVELOPMENT.md

@@ -0,0 +1,18 @@
+# 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,6 +1,6 @@
-<p align="center">
-<img src="/Logo/text256.png" alt="Radarr">
-</p>
+# Radarr
+
+**New UI Development:** For an overview of the new UI development see [DEVELOPMENT.md](https://github.com/Radarr/Radarr/blob/aphrodite/DEVELOPMENT.md).
 
 Radarr is an __independent__ fork of [Sonarr](https://github.com/Sonarr/Sonarr) reworked for automatically downloading movies via Usenet and BitTorrent.
 
@@ -22,12 +22,11 @@ See the [Roadmap blogpost](https://blog.radarr.video/development/update/2018/11/
 
 ## Downloads
 
-Branch | develop (stable) | nightly (semi-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-continuous-green.svg?maxAge=60&style=flat-square)](https://ci.appveyor.com/project/galli-leo/radarr-usby1/branch/develop/artifacts)
-Docker (linuxserver.io, x86_64, arm64, armhf) | [![Docker release](https://img.shields.io/badge/linuxserver-radarr:latest-blue.svg?colorB=1488C6&maxAge=60&style=flat-square)](https://store.docker.com/community/images/linuxserver/radarr)  | [![Docker nightly](https://img.shields.io/badge/linuxserver-radarr:nightly-blue.svg?colorB=1488C6&maxAge=60&style=flat-square)](https://store.docker.com/community/images/linuxserver/radarr) 
-Docker (hotio, see [here](https://github.com/hotio/docker-radarr) for more information) | [![Docker release / nightly](https://img.shields.io/badge/docker-release/nightly-blue.svg?colorB=1488C6&maxAge=60&style=flat-square)](https://hub.docker.com/r/hotio/radarr) | [![Docker release / nightly](https://img.shields.io/badge/docker-release/nightly-blue.svg?colorB=1488C6&maxAge=60&style=flat-square)](https://hub.docker.com/r/hotio/radarr)
-
+| 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)           |
 
 ## Support
 
@@ -102,17 +101,18 @@ See the [Roadmap blogpost](https://blog.radarr.video/development/update/2018/11/
 
 ### Requirements
 
-* [Visual Studio Community 2017](https://www.visualstudio.com/vs/community/) or [Rider](http://www.jetbrains.com/rider/)
+* [Visual Studio Community 2019](https://www.visualstudio.com/vs/community/) or [Rider](http://www.jetbrains.com/rider/)
 * [Git](https://git-scm.com/downloads)
 * [Node.js](https://nodejs.org/en/download/)
+* [Yarn](https://yarnpkg.com/)
 
 ### Setup
 
 * 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 `npm install`
-* Start gulp to monitor your dev environment for any changes that need post processing using `npm start` command.
+* 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.
 
 > **Notice**  
 > Gulp must be running at all times while you are working with Radarr client source files.
@@ -125,7 +125,7 @@ See the [Roadmap blogpost](https://blog.radarr.video/development/update/2018/11/
 
 ### Development
 
-* Open `NzbDrone.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 2017 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
 
@@ -148,6 +148,7 @@ This project would not be possible without the support by these amazing folks. [
 ### JetBrains
 
 Thank you to [<img src="/Logo/jetbrains.svg" alt="JetBrains" width="32"> JetBrains](http://www.jetbrains.com/) for providing us with free licenses to their great tools
+
 * [<img src="/Logo/resharper.svg" alt="ReSharper" width="32"> ReSharper](http://www.jetbrains.com/resharper/)
 * [<img src="/Logo/webstorm.svg" alt="WebStorm" width="32"> WebStorm](http://www.jetbrains.com/webstorm/)
 * [<img src="/Logo/rider.svg" alt="Rider" width="32"> Rider](http://www.jetbrains.com/rider/)
@@ -156,4 +157,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-2018
+* Copyright 2010-2019

appveyor.yml

@@ -1,59 +1,3 @@
-version: '0.2.0.{build}'
-
-image: Visual Studio 2017
-
-assembly_info:
-  patch: true
-  file: 'src\NzbDrone.Common\Properties\SharedAssemblyInfo.cs'
-  assembly_version: '{version}'
-  assembly_file_version: '{version}'
-  assembly_informational_version: '{version}-rc1'
-
-environment:
-  DOTNET_CLI_TELEMETRY_OPTOUT: 1
-
-install:
-  - git submodule update --init --recursive
-  
-#init:
-#  - ps: iex ((new-object net.webclient).DownloadString('https://raw.githubusercontent.com/appveyor/ci/master/scripts/enable-rdp.ps1'))
-
-build_script:
-  - ps: ./build-appveyor.ps1
-
-test: off
-#test:
-#  assemblies:
-#    - '_tests\*Test.dll'
-#  categories:
-#    except:
-#      - IntegrationTest
-#      - AutomationTest
-
-artifacts:
-  - path: '_artifacts\*.zip'
-  - path: '_artifacts\*.exe'
-  - path: '_artifacts\*.tar.gz'
-
-cache:
-  - '%USERPROFILE%\.nuget\packages'
-  - node_modules -> package.json
-  
-pull_requests:
-  do_not_increment_build_number: true
-
-on_failure:
-#  - ps: $blockRdp = $true; iex ((new-object net.webclient).DownloadString('https://raw.githubusercontent.com/appveyor/ci/master/scripts/enable-rdp.ps1'))
-  - ps: Get-ChildItem .\_artifacts\*.zip | % { Push-AppveyorArtifact $_.FullName -FileName $_.Name }
-  - ps: Get-ChildItem .\_artifacts\*.exe | % { Push-AppveyorArtifact $_.FullName -FileName $_.Name }
-  - ps: Get-ChildItem .\_artifacts\*.tar.gz | % { Push-AppveyorArtifact $_.FullName -FileName $_.Name }
-
-only_commits:
+skip_commits:
   files:
-    - src/
-    - osx/
-    - gulp/
-    - logo/
-    - setup/
-    - appveyor.yml
-    - build-appveyor.cake
+    - '**/**'

azure-pipelines.yml

@@ -0,0 +1,814 @@
+# Starter pipeline
+# Start with a minimal pipeline that you can customize to build and deploy your code.
+# Add steps that build, run tests, deploy, and more:
+# https://aka.ms/yaml
+
+variables:
+  outputFolder: './_output'
+  artifactsFolder: './_artifacts'
+  testsFolder: './_tests'
+  majorVersion: '3.0.0'
+  minorVersion: $[counter('minorVersion', 2000)]
+  radarrVersion: '$(majorVersion).$(minorVersion)'
+  buildName: '$(Build.SourceBranchName).$(radarrVersion)'
+  sentryOrg: 'servarr'
+  sentryUrl: 'https://sentry.servarr.com'
+  dotnetVersion: '3.1.300'
+
+trigger:
+  branches:
+    include:
+    - develop
+    - aphrodite
+
+pr:
+- develop
+- aphrodite
+
+stages:
+  - stage: Setup
+    displayName: Setup
+    jobs:
+    - job:
+      displayName: Build Variables
+      pool:
+        vmImage: 'ubuntu-18.04'
+      steps:
+      # Set the build name properly.  The 'name' property won't recursively expand so hack here:
+      - bash: echo "##vso[build.updatebuildnumber]$RADARRVERSION"
+        displayName: Set Build Name
+      - bash: |
+          if [[ $BUILD_REASON == "PullRequest" ]]; then
+          git diff origin/aphrodite...HEAD  --name-only | grep -E "^(src/|azure-pipelines.yml)"
+          echo $? > not_backend_update
+          else
+          echo 0 > not_backend_update
+          fi
+          cat not_backend_update
+        displayName: Check for Backend File Changes
+      - publish: not_backend_update
+        artifact: not_backend_update
+        displayName: Publish update type
+  - stage: Build_Backend
+    displayName: Build Backend
+    dependsOn: Setup
+    jobs:
+    - job: Backend
+      strategy:
+        matrix:
+          Linux:
+            osName: 'Linux'
+            imageName: 'ubuntu-18.04'
+          Mac:
+            osName: 'Mac'
+            imageName: 'macos-10.14'
+          Windows:
+            osName: 'Windows'
+            imageName: 'windows-2019'
+
+      pool:
+        vmImage: $(imageName)
+      steps:
+      - checkout: self
+        submodules: true
+        fetchDepth: 1
+      - task: UseDotNet@2
+        displayName: 'Install .net core'
+        inputs:
+          version: $(dotnetVersion)
+      - bash: ./build.sh --backend
+        displayName: Build Radarr Backend
+      - bash: |
+          find ${OUTPUTFOLDER} -type f ! -path "*/publish/*" -exec rm -rf {} \;
+          find ${OUTPUTFOLDER} -depth -empty -type d -exec rm -r "{}" \;
+          find ${TESTSFOLDER} -type f ! -path "*/publish/*" -exec rm -rf {} \;
+          find ${TESTSFOLDER} -depth -empty -type d -exec rm -r "{}" \;
+        displayName: Clean up intermediate output
+        condition: and(succeeded(), ne(variables['osName'], 'Windows'))
+      - publish: $(outputFolder)
+        artifact: '$(osName)Backend'
+        displayName: Publish Backend
+        condition: and(succeeded(), eq(variables['osName'], 'Windows'))
+      - publish: '$(testsFolder)/netcoreapp3.1/win-x64/publish'
+        artifact: WindowsCoreTests
+        displayName: Publish Windows Test Package
+        condition: and(succeeded(), eq(variables['osName'], 'Windows'))
+      - publish: '$(testsFolder)/net462/linux-x64/publish'
+        artifact: LinuxTests
+        displayName: Publish Linux Mono Test Package
+        condition: and(succeeded(), eq(variables['osName'], 'Windows'))
+      - publish: '$(testsFolder)/netcoreapp3.1/linux-x64/publish'
+        artifact: LinuxCoreTests
+        displayName: Publish Linux Test Package
+        condition: and(succeeded(), eq(variables['osName'], 'Windows'))
+      - publish: '$(testsFolder)/netcoreapp3.1/osx-x64/publish'
+        artifact: MacCoreTests
+        displayName: Publish MacOS Test Package
+        condition: and(succeeded(), eq(variables['osName'], 'Windows'))
+
+  - stage: Build_Frontend
+    displayName: Frontend
+    dependsOn: Setup
+    jobs:
+    - job: Build
+      strategy:
+        matrix:
+          Linux:
+            osName: 'Linux'
+            imageName: 'ubuntu-18.04'
+          Mac:
+            osName: 'Mac'
+            imageName: 'macos-10.14'
+          Windows:
+            osName: 'Windows'
+            imageName: 'windows-2019'
+      pool:
+        vmImage: $(imageName)
+      steps:
+      - task: NodeTool@0
+        displayName: Set Node.js version
+        inputs:
+          versionSpec: '10.x'
+      - checkout: self
+        submodules: true
+        fetchDepth: 1
+      - bash: ./build.sh --frontend
+        displayName: Build Radarr Frontend
+        env:
+          FORCE_COLOR: 0
+      - publish: $(outputFolder)
+        artifact: '$(osName)Frontend'
+        displayName: Publish Frontend
+        condition: and(succeeded(), eq(variables['osName'], 'Windows'))
+        
+  - stage: Installer
+    dependsOn:
+    - Build_Backend
+    - Build_Frontend
+    jobs:
+    - job: Windows_Installer
+      displayName: Create Installer
+      pool:
+        vmImage: 'windows-2019'
+      steps:
+      - checkout: self
+        fetchDepth: 1
+      - task: DownloadPipelineArtifact@2
+        inputs:
+          buildType: 'current'
+          artifactName: WindowsBackend
+          targetPath: _output
+        displayName: Fetch Backend
+      - task: DownloadPipelineArtifact@2
+        inputs:
+          buildType: 'current'
+          artifactName: WindowsFrontend
+          targetPath: _output
+        displayName: Fetch Frontend
+      - bash: ./build.sh --packages
+        displayName: Create Packages
+      - bash: |
+          setup/inno/ISCC.exe setup/radarr.iss //DFramework=netcoreapp3.1
+          cp setup/output/Radarr.*windows.netcoreapp3.1.exe ${BUILD_ARTIFACTSTAGINGDIRECTORY}/Radarr.${BUILDNAME}.windows-core-x64-installer.exe
+        displayName: Create .NET Core Windows installer
+      - publish: $(Build.ArtifactStagingDirectory)
+        artifact: 'WindowsInstaller'
+        displayName: Publish Installer
+
+  - stage: Packages
+    dependsOn:
+    - Build_Backend
+    - Build_Frontend
+    jobs:
+    - job: Other_Packages
+      displayName: Create Standard Packages
+      pool:
+        vmImage: 'ubuntu-18.04'
+      steps:
+      - checkout: self
+        fetchDepth: 1
+      - task: DownloadPipelineArtifact@2
+        inputs:
+          buildType: 'current'
+          artifactName: WindowsBackend
+          targetPath: _output
+        displayName: Fetch Backend
+      - task: DownloadPipelineArtifact@2
+        inputs:
+          buildType: 'current'
+          artifactName: WindowsFrontend
+          targetPath: _output
+        displayName: Fetch Frontend
+      - bash: ./build.sh --packages
+        displayName: Create Packages
+      - bash: |
+          find . -name "Radarr" -exec chmod a+x {} \;
+          find . -name "Radarr.Update" -exec chmod a+x {} \;
+        displayName: Set executable bits
+      - task: ArchiveFiles@2
+        displayName: Create Windows Core zip
+        inputs:
+          archiveFile: '$(Build.ArtifactStagingDirectory)/Radarr.$(buildName).windows-core-x64.zip'
+          archiveType: 'zip'
+          includeRootFolder: false
+          rootFolderOrFile: $(artifactsFolder)/windows/netcoreapp3.1
+      - task: ArchiveFiles@2
+        displayName: Create MacOS Core app
+        inputs:
+          archiveFile: '$(Build.ArtifactStagingDirectory)/Radarr.$(buildName).osx-app-core-x64.zip'
+          archiveType: 'zip'
+          includeRootFolder: false
+          rootFolderOrFile: $(artifactsFolder)/macos-app/netcoreapp3.1
+      - task: ArchiveFiles@2
+        displayName: Create MacOS Core tar
+        inputs:
+          archiveFile: '$(Build.ArtifactStagingDirectory)/Radarr.$(buildName).osx-core-x64.tar.gz'
+          archiveType: 'tar'
+          tarCompression: 'gz'
+          includeRootFolder: false
+          rootFolderOrFile: $(artifactsFolder)/macos/netcoreapp3.1
+      - task: ArchiveFiles@2
+        displayName: Create Linux Mono tar
+        inputs:
+          archiveFile: '$(Build.ArtifactStagingDirectory)/Radarr.$(buildName).linux.tar.gz'
+          archiveType: 'tar'
+          tarCompression: 'gz'
+          includeRootFolder: false
+          rootFolderOrFile: $(artifactsFolder)/linux-x64/net462
+      - task: ArchiveFiles@2
+        displayName: Create Linux Core tar
+        inputs:
+          archiveFile: '$(Build.ArtifactStagingDirectory)/Radarr.$(buildName).linux-core-x64.tar.gz'
+          archiveType: 'tar'
+          tarCompression: 'gz'
+          includeRootFolder: false
+          rootFolderOrFile: $(artifactsFolder)/linux-x64/netcoreapp3.1
+      - task: ArchiveFiles@2
+        displayName: Create ARM32 Linux Core tar
+        inputs:
+          archiveFile: '$(Build.ArtifactStagingDirectory)/Radarr.$(buildName).linux-core-arm.tar.gz'
+          archiveType: 'tar'
+          tarCompression: 'gz'
+          includeRootFolder: false
+          rootFolderOrFile: $(artifactsFolder)/linux-arm/netcoreapp3.1
+      - task: ArchiveFiles@2
+        displayName: Create ARM64 Linux Core tar
+        inputs:
+          archiveFile: '$(Build.ArtifactStagingDirectory)/Radarr.$(buildName).linux-core-arm64.tar.gz'
+          archiveType: 'tar'
+          tarCompression: 'gz'
+          includeRootFolder: false
+          rootFolderOrFile: $(artifactsFolder)/linux-arm64/netcoreapp3.1
+      - publish: $(Build.ArtifactStagingDirectory)
+        artifact: 'Packages'
+        displayName: Publish Packages
+      - bash: |
+          echo "Uploading source maps to sentry"
+          curl -sL https://sentry.io/get-cli/ | bash
+          RELEASENAME="${RADARRVERSION}-${BUILD_SOURCEBRANCHNAME}"
+          sentry-cli releases new --finalize -p radarr -p radarr-ui -p radarr-update "${RELEASENAME}"
+          sentry-cli releases -p radarr-ui files "${RELEASENAME}" upload-sourcemaps _output/UI/ --rewrite
+          sentry-cli releases set-commits --auto "${RELEASENAME}"
+          sentry-cli releases deploys "${RELEASENAME}" new -e aphrodite
+          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'))
+        env:
+          SENTRY_AUTH_TOKEN: $(sentryAuthTokenServarr)
+          SENTRY_ORG: $(sentryOrg)
+          SENTRY_URL: $(sentryUrl)
+    
+  - stage: Unit_Test
+    displayName: Unit Tests
+    dependsOn: Build_Backend
+
+    jobs:
+    - job: Prepare
+      pool:
+        vmImage: 'ubuntu-18.04'
+      steps:
+      - checkout: none
+      - task: DownloadPipelineArtifact@2
+        inputs:
+          buildType: 'current'
+          artifactName: 'not_backend_update'
+          targetPath: '.'
+      - bash: echo "##vso[task.setvariable variable=backendNotUpdated;isOutput=true]$(cat not_backend_update)"
+        name: setVar
+
+    - job: Unit
+      displayName: Unit Native
+      dependsOn: Prepare
+      condition: and(succeeded(), eq(dependencies.Prepare.outputs['setVar.backendNotUpdated'], '0'))
+
+      strategy:
+        matrix:
+          MacCore:
+            osName: 'Mac'
+            testName: 'MacCore'
+            imageName: 'macos-10.14'
+          WindowsCore:
+            osName: 'Windows'
+            testName: 'WindowsCore'
+            imageName: 'windows-2019'
+          LinuxCore:
+            osName: 'Linux'
+            testName: 'LinuxCore'
+            imageName: 'ubuntu-18.04'
+            pattern: 'Radarr.**.linux-core-x64.tar.gz'
+
+      pool:
+        vmImage: $(imageName)
+
+      steps:
+      - checkout: none
+      - task: UseDotNet@2
+        displayName: 'Install .net core'
+        inputs:
+          version: $(dotnetVersion)
+      - task: DownloadPipelineArtifact@2
+        displayName: Download Test Artifact
+        inputs:
+          buildType: 'current'
+          artifactName: '$(testName)Tests'
+          targetPath: $(testsFolder)
+      - bash: |
+          wget https://mediaarea.net/repo/deb/repo-mediaarea_1.0-11_all.deb
+          sudo dpkg -i repo-mediaarea_1.0-11_all.deb
+          sudo apt-get update
+          sudo apt-get install -y --allow-unauthenticated libmediainfo-dev libmediainfo0v5 mediainfo
+        displayName: Install mediainfo
+        condition: and(succeeded(), eq(variables['osName'], 'Linux'))
+      - powershell: Set-Service SCardSvr -StartupType Manual
+        displayName: Enable Windows Test Service
+        condition: and(succeeded(), eq(variables['osName'], 'Windows'))
+      - bash: |
+          wget https://github.com/acoustid/chromaprint/releases/download/v1.4.3/chromaprint-fpcalc-1.4.3-linux-x86_64.tar.gz
+          sudo tar xf chromaprint-fpcalc-1.4.3-linux-x86_64.tar.gz --strip-components=1 --directory /usr/bin
+        displayName: Install fpcalc
+        condition: and(succeeded(), eq(variables['osName'], 'Linux'))
+      - bash: |
+          SYMLINK=6_6_0
+          MONOPREFIX=/Library/Frameworks/Mono.framework/Versions/$SYMLINK
+          echo "##vso[task.setvariable variable=MONOPREFIX;]$MONOPREFIX"
+          echo "##vso[task.setvariable variable=PKG_CONFIG_PATH;]$MONOPREFIX/lib/pkgconfig:$MONOPREFIX/share/pkgconfig:$PKG_CONFIG_PATH"
+          echo "##vso[task.setvariable variable=PATH;]$MONOPREFIX/bin:$PATH"
+        displayName: Set Mono Version
+        condition: and(succeeded(), eq(variables['osName'], 'Mac'))
+      - 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
+          ${TESTSFOLDER}/test.sh ${OSNAME} Unit Test
+        displayName: Run Tests
+        env:
+          TEST_DIR: $(Build.SourcesDirectory)/_tests
+      - task: PublishTestResults@2
+        displayName: Publish Test Results
+        inputs:
+          testResultsFormat: 'NUnit'
+          testResultsFiles: '**/TestResult.xml'
+          testRunTitle: '$(testName) Unit Tests'
+          failTaskOnFailedTests: true
+
+    - job: Unit_Docker
+      displayName: Unit Docker
+      dependsOn: Prepare
+      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'
+            containerImage: servarr/testimages:mono-5.20
+          mono608:
+            testName: 'Mono 6.8'
+            containerImage: servarr/testimages:mono-6.8
+          mono610:
+            testName: 'Mono 6.10'
+            containerImage: servarr/testimages:mono-6.10
+
+      pool:
+        vmImage: 'ubuntu-18.04'
+      
+      container: $[ variables['containerImage'] ]
+
+      timeoutInMinutes: 10
+        
+      steps:
+      - bash: mono --version
+        displayName: Check Mono version
+      - task: UseDotNet@2
+        displayName: 'Install .net core'
+        inputs:
+          version: $(dotnetVersion)
+      - checkout: none
+      - task: DownloadPipelineArtifact@2
+        displayName: Download Test Artifact
+        inputs:
+          buildType: 'current'
+          artifactName: LinuxTests
+          targetPath: $(testsFolder)
+      - bash: |
+          chmod a+x ${TESTSFOLDER}/test.sh
+          ${TESTSFOLDER}/test.sh Linux Unit Test
+        displayName: Run Tests
+      - task: PublishTestResults@2
+        displayName: Publish Test Results
+        inputs:
+          testResultsFormat: 'NUnit'
+          testResultsFiles: '**/TestResult.xml'
+          testRunTitle: '$(testName) Unit Tests'
+          failTaskOnFailedTests: true
+
+  - stage: Integration
+    displayName: Integration
+    dependsOn: Packages
+
+    jobs:
+    - job: Prepare
+      pool:
+        vmImage: 'ubuntu-18.04'
+      steps:
+      - checkout: none
+      - task: DownloadPipelineArtifact@2
+        inputs:
+          buildType: 'current'
+          artifactName: 'not_backend_update'
+          targetPath: '.'
+      - bash: echo "##vso[task.setvariable variable=backendNotUpdated;isOutput=true]$(cat not_backend_update)"
+        name: setVar
+
+    - job: Integration_Native
+      displayName: Integration Native
+      dependsOn: Prepare
+      condition: and(succeeded(), eq(dependencies.Prepare.outputs['setVar.backendNotUpdated'], '0'))
+      strategy:
+        matrix:
+          MacCore:
+            osName: 'Mac'
+            testName: 'MacCore'
+            imageName: 'macos-10.14'
+            pattern: 'Radarr.**.osx-core-x64.tar.gz'
+          WindowsCore:
+            osName: 'Windows'
+            testName: 'WindowsCore'
+            imageName: 'windows-2019'
+            pattern: 'Radarr.**.windows-core-x64.zip'
+          LinuxCore:
+            osName: 'Linux'
+            testName: 'LinuxCore'
+            imageName: 'ubuntu-18.04'
+            pattern: 'Radarr.**.linux-core-x64.tar.gz'
+
+      pool:
+        vmImage: $(imageName)
+        
+      steps:
+      - bash: |
+          SYMLINK=6_6_0
+          MONOPREFIX=/Library/Frameworks/Mono.framework/Versions/$SYMLINK
+          echo "##vso[task.setvariable variable=MONOPREFIX;]$MONOPREFIX"
+          echo "##vso[task.setvariable variable=PKG_CONFIG_PATH;]$MONOPREFIX/lib/pkgconfig:$MONOPREFIX/share/pkgconfig:$PKG_CONFIG_PATH"
+          echo "##vso[task.setvariable variable=PATH;]$MONOPREFIX/bin:$PATH"
+        displayName: Set Mono Version
+        condition: and(succeeded(), eq(variables['osName'], 'Mac'))
+      - task: UseDotNet@2
+        displayName: 'Install .net core'
+        inputs:
+          version: $(dotnetVersion)
+      - checkout: none
+      - task: DownloadPipelineArtifact@2
+        displayName: Download Test Artifact
+        inputs:
+          buildType: 'current'
+          artifactName: '$(testName)Tests'
+          targetPath: $(testsFolder)
+      - task: DownloadPipelineArtifact@2
+        displayName: Download Build Artifact
+        inputs:
+          buildType: 'current'
+          artifactName: Packages
+          itemPattern: '**/$(pattern)'
+          targetPath: $(Build.ArtifactStagingDirectory)
+      - task: ExtractFiles@1
+        inputs:
+          archiveFilePatterns: '$(Build.ArtifactStagingDirectory)/**/$(pattern)' 
+          destinationFolder: '$(Build.ArtifactStagingDirectory)/bin'
+        displayName: Extract Package
+      - bash: |
+          mkdir -p ./bin/
+          cp -r -v ${BUILD_ARTIFACTSTAGINGDIRECTORY}/bin/Radarr/. ./bin/
+        displayName: Move Package Contents
+      - bash: |
+          chmod a+x ${TESTSFOLDER}/test.sh
+          ${TESTSFOLDER}/test.sh ${OSNAME} Integration Test
+        displayName: Run Integration Tests
+      - task: PublishTestResults@2
+        inputs:
+          testResultsFormat: 'NUnit'
+          testResultsFiles: '**/TestResult.xml'
+          testRunTitle: '$(testName) Integration Tests'
+          failTaskOnFailedTests: true
+        displayName: Publish Test Results
+
+    - job: Integration_Docker
+      displayName: Integration Docker
+      dependsOn: Prepare
+      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'
+            containerImage: servarr/testimages:mono-5.20
+          mono608:
+            testName: 'Mono 6.8'
+            containerImage: servarr/testimages:mono-6.8
+          mono610:
+            testName: 'Mono 6.10'
+            containerImage: servarr/testimages:mono-6.10
+
+      variables:
+        pattern: 'Radarr.**.linux.tar.gz'
+
+      pool:
+        vmImage: 'ubuntu-18.04'
+
+      container: $[ variables['containerImage'] ]
+
+      timeoutInMinutes: 15
+        
+      steps:
+      - bash: mono --version
+        displayName: Check Mono version
+      - task: UseDotNet@2
+        displayName: 'Install .net core'
+        inputs:
+          version: $(dotnetVersion)
+      - checkout: none
+      - task: DownloadPipelineArtifact@2
+        displayName: Download Test Artifact
+        inputs:
+          buildType: 'current'
+          artifactName: LinuxTests
+          targetPath: $(testsFolder)
+      - task: DownloadPipelineArtifact@2
+        displayName: Download Build Artifact
+        inputs:
+          buildType: 'current'
+          artifactName: Packages
+          itemPattern: '**/$(pattern)'
+          targetPath: $(Build.ArtifactStagingDirectory)
+      - task: ExtractFiles@1
+        inputs:
+          archiveFilePatterns: '$(Build.ArtifactStagingDirectory)/**/$(pattern)' 
+          destinationFolder: '$(Build.ArtifactStagingDirectory)/bin'
+        displayName: Extract Package
+      - bash: |
+          mkdir -p ./bin/
+          cp -r -v ${BUILD_ARTIFACTSTAGINGDIRECTORY}/bin/Radarr/. ./bin/
+        displayName: Move Package Contents
+      - bash: |
+          chmod a+x ${TESTSFOLDER}/test.sh
+          ${TESTSFOLDER}/test.sh Linux Integration Test
+        displayName: Run Integration Tests
+      - task: PublishTestResults@2
+        inputs:
+          testResultsFormat: 'NUnit'
+          testResultsFiles: '**/TestResult.xml'
+          testRunTitle: '$(testName) Integration Tests'
+          failTaskOnFailedTests: true
+        displayName: Publish Test Results
+
+  - stage: Automation
+    displayName: Automation
+    dependsOn: Packages
+    
+    jobs:
+    - job: Automation
+      strategy:
+        matrix:
+          Linux:
+            osName: 'Linux'
+            imageName: 'ubuntu-18.04'
+            pattern: 'Radarr.**.linux-core-x64.tar.gz'
+            failBuild: true
+          Mac:
+            osName: 'Mac'
+            imageName: 'macos-10.14' # Fails due to firefox not being installed on image
+            pattern: 'Radarr.**.osx-core-x64.tar.gz'
+            failBuild: false
+          Windows:
+            osName: 'Windows'
+            imageName: 'windows-2019'
+            pattern: 'Radarr.**.windows-core-x64.zip'
+            failBuild: $(failOnAutomationFailure)
+
+      pool:
+        vmImage: $(imageName)
+        
+      steps:
+      - task: UseDotNet@2
+        displayName: 'Install .net core'
+        inputs:
+          version: $(dotnetVersion)
+      - checkout: none
+      - task: DownloadPipelineArtifact@2
+        displayName: Download Test Artifact
+        inputs:
+          buildType: 'current'
+          artifactName: '$(osName)CoreTests'
+          targetPath: $(testsFolder)
+      - task: DownloadPipelineArtifact@2
+        displayName: Download Build Artifact
+        inputs:
+          buildType: 'current'
+          artifactName: Packages
+          itemPattern: '**/$(pattern)'
+          targetPath: $(Build.ArtifactStagingDirectory)
+      - task: ExtractFiles@1
+        inputs:
+          archiveFilePatterns: '$(Build.ArtifactStagingDirectory)/**/$(pattern)' 
+          destinationFolder: '$(Build.ArtifactStagingDirectory)/bin'
+        displayName: Extract Package
+      - bash: |
+          mkdir -p ./bin/
+          cp -r -v ${BUILD_ARTIFACTSTAGINGDIRECTORY}/bin/Radarr/. ./bin/
+        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
+          elif [[ $OSNAME == "Linux" ]]; then
+          url=https://github.com/mozilla/geckodriver/releases/download/v0.26.0/geckodriver-v0.26.0-linux64.tar.gz
+          else
+          echo "Unhandled OS"
+          exit 1
+          fi
+          curl -s -L "$url" | tar -xz
+          chmod +x geckodriver
+          mv geckodriver _tests
+        displayName: Install Gecko Driver
+        condition: and(succeeded(), ne(variables['osName'], 'Windows'))
+      - bash: |
+          chmod a+x ${TESTSFOLDER}/test.sh
+          ${TESTSFOLDER}/test.sh ${OSNAME} Automation Test
+        displayName: Run Integration Tests
+      - task: PublishTestResults@2
+        inputs:
+          testResultsFormat: 'NUnit'
+          testResultsFiles: '**/TestResult.xml'
+          testRunTitle: '$(osName) Automation Tests'
+          failTaskOnFailedTests: $(failBuild)
+        displayName: Publish Test Results
+
+  - stage: Analyze
+    dependsOn:
+    - Setup
+    displayName: Analyze
+
+    jobs:
+    - job: Prepare
+      pool:
+        vmImage: 'ubuntu-18.04'
+      steps:
+      - checkout: none
+      - task: DownloadPipelineArtifact@2
+        inputs:
+          buildType: 'current'
+          artifactName: 'not_backend_update'
+          targetPath: '.'
+      - bash: echo "##vso[task.setvariable variable=backendNotUpdated;isOutput=true]$(cat not_backend_update)"
+        name: setVar
+
+    - job: Lint_Frontend
+      displayName: Lint Frontend
+      strategy:
+        matrix:
+          Linux:
+            osName: 'Linux'
+            imageName: 'ubuntu-18.04'
+          Windows:
+            osName: 'Windows'
+            imageName: 'windows-2019'
+      pool:
+        vmImage: $(imageName)
+      steps:
+      - task: NodeTool@0
+        displayName: Set Node.js version
+        inputs:
+          versionSpec: '10.x'
+      - checkout: self
+        submodules: true
+        fetchDepth: 1
+      - bash: ./build.sh --lint
+        displayName: Lint Radarr Frontend
+        env:
+          FORCE_COLOR: 0
+
+    - job: Analyze_Frontend
+      displayName: Frontend
+      condition: eq(variables['System.PullRequest.IsFork'], 'False')
+      pool:
+        vmImage: windows-2019
+      steps:
+      - checkout: self # Need history for Sonar analysis
+      - task: SonarCloudPrepare@1
+        env:
+          SONAR_SCANNER_OPTS: ''
+        inputs:
+          SonarCloud: 'SonarCloud'
+          organization: 'radarr'
+          scannerMode: 'CLI'
+          configMode: 'manual'
+          cliProjectKey: 'Radarr_Radarr.UI'
+          cliProjectName: 'RadarrUI'
+          cliProjectVersion: '$(radarrVersion)'
+          cliSources: './frontend'
+      - task: SonarCloudAnalyze@1
+
+    - job: Analyze_Backend
+      displayName: Backend
+      dependsOn: Prepare
+      condition: and(succeeded(), eq(dependencies.Prepare.outputs['setVar.backendNotUpdated'], '0'))
+
+      variables:
+        disable.coverage.autogenerate: 'true'
+
+      pool:
+        vmImage: windows-2019
+
+      steps:
+      - task: UseDotNet@2
+        displayName: 'Install .net core'
+        inputs:
+          version: $(dotnetVersion)
+      - checkout: self # Need history for Sonar analysis
+        submodules: true
+      - powershell: Set-Service SCardSvr -StartupType Manual
+        displayName: Enable Windows Test Service
+      - task: SonarCloudPrepare@1
+        condition: eq(variables['System.PullRequest.IsFork'], 'False')
+        inputs:
+          SonarCloud: 'SonarCloud'
+          organization: 'radarr'
+          scannerMode: 'MSBuild'
+          projectKey: 'Radarr_Radarr'
+          projectName: 'Radarr'
+          projectVersion: '$(radarrVersion)'
+          extraProperties: |
+            sonar.exclusions=**/obj/**,**/*.dll,**/NzbDrone.Core.Test/Files/**/*,./frontend/**,**/ExternalModules/**,./src/Libraries/**
+            sonar.coverage.exclusions=**/Radarr.Api.V3/**/*,**/NzbDrone.Api/**/*,**/MonoTorrent/**/*,**/Marr.Data/**/*
+            sonar.cs.opencover.reportsPaths=$(Build.SourcesDirectory)/CoverageResults/**/coverage.opencover.xml
+            sonar.cs.nunit.reportsPaths=$(Build.SourcesDirectory)/TestResult.xml
+      - bash: |
+          ./build.sh --backend -f netcoreapp3.1 -r win-x64
+          TEST_DIR=_tests/netcoreapp3.1/win-x64/publish/ ./test.sh Windows Unit Coverage
+        displayName: Coverage Unit Tests
+      - task: SonarCloudAnalyze@1
+        condition: eq(variables['System.PullRequest.IsFork'], 'False')
+        displayName: Publish SonarCloud Results
+      - task: reportgenerator@4
+        displayName: Generate Coverage Report
+        inputs:
+          reports: '$(Build.SourcesDirectory)/CoverageResults/**/coverage.opencover.xml'
+          targetdir: '$(Build.SourcesDirectory)/CoverageResults/combined'
+          reporttypes: 'HtmlInline_AzurePipelines;Cobertura;Badges'
+      - task: PublishCodeCoverageResults@1
+        displayName: Publish Coverage Report
+        inputs:
+          codeCoverageTool: 'cobertura'
+          summaryFileLocation: './CoverageResults/combined/Cobertura.xml'
+          reportDirectory: './CoverageResults/combined/'
+
+  - stage: Report_Out
+    dependsOn:
+    - Analyze
+    - Unit_Test
+    - Integration
+    - Automation
+    condition: eq(variables['system.pullrequest.isfork'], false)
+    displayName: Build Status Report
+    jobs:
+    - job:
+      displayName: Discord Notification
+      pool:
+        vmImage: 'ubuntu-18.04'
+      steps:
+        - checkout: none
+        - powershell: |
+            iex ((New-Object System.Net.WebClient).DownloadString('https://raw.githubusercontent.com/Servarr/AzureDiscordNotify/master/DiscordNotify.ps1'))
+          env:
+            SYSTEM_ACCESSTOKEN: $(System.AccessToken)
+            DISCORDCHANNELID: $(discordChannelId)
+            DISCORDWEBHOOKKEY: $(discordWebhookKey)
+

build-appveyor.cake

@@ -1,323 +0,0 @@
-#addin nuget:?package=Cake.Npm
-#addin nuget:?package=SharpZipLib
-#addin nuget:?package=Cake.Compression
-#addin "Cake.FileHelpers"
-
-// Build variables
-var outputFolder = "./_output";
-var outputFolderMono = outputFolder + "_mono";
-var outputFolderOsx = outputFolder + "_osx";
-var outputFolderOsxApp = outputFolderOsx + "_app";
-var testPackageFolder = "./_tests";
-var testSearchPattern = "*.Test/bin/x86/Release";
-var sourceFolder = "./src";
-var solutionFile = sourceFolder + "/NzbDrone.sln";
-var updateFolder = outputFolder + "/NzbDrone.Update";
-var updateFolderMono = outputFolderMono + "/NzbDrone.Update";
-
-// Artifact variables
-var artifactsFolder = "./_artifacts";
-var artifactsFolderWindows = artifactsFolder + "/windows";
-var artifactsFolderLinux = artifactsFolder + "/linux";
-var artifactsFolderOsx = artifactsFolder + "/osx";
-var artifactsFolderOsxApp = artifactsFolder + "/osx-app";
-
-// Utility methods
-public void RemoveEmptyFolders(string startLocation) {
-    foreach (var directory in System.IO.Directory.GetDirectories(startLocation))
-    {
-        RemoveEmptyFolders(directory);
-
-        if (System.IO.Directory.GetFiles(directory).Length == 0 &&
-            System.IO.Directory.GetDirectories(directory).Length == 0)
-        {
-            DeleteDirectory(directory, false);
-        }
-    }
-}
-
-public void CleanFolder(string path, bool keepConfigFiles) {
-	DeleteFiles(path + "/**/*.transform");
-
-	if (!keepConfigFiles) {
-		DeleteFiles(path + "/**/*.dll.config");
-	}
-
-	DeleteFiles(path + "/**/FluentValidation.resources.dll");
-	DeleteFiles(path + "/**/App.config");
-
-	DeleteFiles(path + "/**/*.less");
-
-	DeleteFiles(path + "/**/*.vshost.exe");
-
-	DeleteFiles(path + "/**/*.dylib");
-
-	RemoveEmptyFolders(path);
-}
-
-public void CreateMdbs(string path) {
-	foreach (var file in System.IO.Directory.EnumerateFiles(path, "*.pdb", System.IO.SearchOption.AllDirectories)) {
-		var actualFile = file.Substring(0, file.Length - 4);
-
-		if (FileExists(actualFile + ".exe")) {
-			StartProcess("./tools/pdb2mdb/pdb2mdb.exe", new ProcessSettings()
-				.WithArguments(args => args.Append(actualFile + ".exe")));
-		}
-
-		if (FileExists(actualFile + ".dll")) {
-			StartProcess("./tools/pdb2mdb/pdb2mdb.exe", new ProcessSettings()
-				.WithArguments(args => args.Append(actualFile + ".dll")));
-		}
-	}
-}
-
-// Build Tasks
-Task("Compile").Does(() => {
-	// Build
-	if (DirectoryExists(outputFolder)) {
-		DeleteDirectory(outputFolder, true);
-	}
-
-	MSBuild(solutionFile, config =>
-		config.UseToolVersion(MSBuildToolVersion.VS2017)
-			.WithTarget("Clean")
-			.SetVerbosity(Verbosity.Minimal));
-
-	NuGetRestore(solutionFile);
-
-	MSBuild(solutionFile, config =>
-		config.UseToolVersion(MSBuildToolVersion.VS2017)
-			.SetPlatformTarget(PlatformTarget.x86)
-			.SetConfiguration("Release")
-			.WithProperty("AllowedReferenceRelatedFileExtensions", new string[] { ".pdb" })
-			.WithTarget("Build")
-			.SetVerbosity(Verbosity.Minimal));
-
-	CleanFolder(outputFolder, false);
-
-	// Add JsonNet
-	DeleteFiles(outputFolder + "/Newtonsoft.Json.*");
-	CopyFiles(sourceFolder + "/packages/Newtonsoft.Json.*/lib/net35/*.dll", outputFolder);
-	CopyFiles(sourceFolder + "/packages/Newtonsoft.Json.*/lib/net35/*.dll", updateFolder);
-
-	// Remove Mono stuff
-	DeleteFile(outputFolder + "/Mono.Posix.dll");
-});
-
-Task("Gulp").Does(() => {
-	NpmInstall(new NpmInstallSettings {
-		LogLevel = NpmLogLevel.Silent,
-		WorkingDirectory = "./",
-		Production = true
-	});
-
-	NpmRunScript("build");
-});
-
-Task("PackageMono").Does(() => {
-	// Start mono package
-	if (DirectoryExists(outputFolderMono)) {
-		DeleteDirectory(outputFolderMono, true);
-	}
-
-	CopyDirectory(outputFolder, outputFolderMono);
-
-	// Create MDBs
-	CreateMdbs(outputFolderMono);
-
-	// Remove PDBs
-	DeleteFiles(outputFolderMono + "/**/*.pdb");
-
-	// Remove service helpers
-	DeleteFiles(outputFolderMono + "/ServiceUninstall.*");
-	DeleteFiles(outputFolderMono + "/ServiceInstall.*");
-
-	// Remove native windows binaries
-	DeleteFiles(outputFolderMono + "/sqlite3.*");
-	DeleteFiles(outputFolderMono + "/MediaInfo.*");
-
-	// Adding NzbDrone.Core.dll.config (for dllmap)
-	CopyFile(sourceFolder + "/NzbDrone.Core/NzbDrone.Core.dll.config", outputFolderMono + "/NzbDrone.Core.dll.config");
-
-	// Adding CurlSharp.dll.config (for dllmap)
-	CopyFile(sourceFolder + "/NzbDrone.Common/CurlSharp.dll.config", outputFolderMono + "/CurlSharp.dll.config");
-
-	// Renaming Radarr.Console.exe to Radarr.exe
-	DeleteFiles(outputFolderMono + "/Radarr.exe*");
-	MoveFile(outputFolderMono + "/Radarr.Console.exe", outputFolderMono + "/Radarr.exe");
-	MoveFile(outputFolderMono + "/Radarr.Console.exe.config", outputFolderMono + "/Radarr.exe.config");
-	MoveFile(outputFolderMono + "/Radarr.Console.exe.mdb", outputFolderMono + "/Radarr.exe.mdb");
-
-	// Remove NzbDrone.Windows.*
-	DeleteFiles(outputFolderMono + "/NzbDrone.Windows.*");
-
-	// Adding NzbDrone.Mono to updatePackage
-	CopyFiles(outputFolderMono + "/NzbDrone.Mono.*", updateFolderMono);
-});
-
-Task("PackageOsx").Does(() => {
-	// Start osx package
-	if (DirectoryExists(outputFolderOsx)) {
-		DeleteDirectory(outputFolderOsx, true);
-	}
-
-	CopyDirectory(outputFolderMono, outputFolderOsx);
-
-	// Adding sqlite dylibs
-	CopyFiles(sourceFolder + "/Libraries/Sqlite/*.dylib", outputFolderOsx);
-
-	// Adding MediaInfo dylib
-	CopyFiles(sourceFolder + "/Libraries/MediaInfo/*.dylib", outputFolderOsx);
-
-	// Chmod as executable
-	StartProcess(@"C:\cygwin64\bin\chmod.exe", new ProcessSettings()
-		.WithArguments(args => args
-			.Append("+x")
-			.Append(outputFolderOsx + "/Radarr")));
-
-	// Adding Startup script
-	CopyFile("./osx/Radarr", outputFolderOsx + "/Radarr");
-});
-
-Task("PackageOsxApp").Does((ctx) => {
-	// Start osx app package
-	if (DirectoryExists(outputFolderOsxApp)) {
-		DeleteDirectory(outputFolderOsxApp, true);
-	}
-
-	CreateDirectory(outputFolderOsxApp);
-
-	// Copy osx package files
-	CopyDirectory("./osx/Radarr.app", outputFolderOsxApp + "/Radarr.app");
-	CopyDirectory(outputFolderOsx, outputFolderOsxApp + "/Radarr.app/Contents/MacOS");
-
-    // Edit version of osx app
-    ctx.ReplaceTextInFiles(outputFolderOsxApp + "/Radarr.app/Contents/Info.plist", "2.0", ctx.EnvironmentVariable("APPVEYOR_BUILD_VERSION") ?? "unknown");
-});
-
-Task("PackageTests").Does(() => {
-	// Start tests package
-	if (DirectoryExists(testPackageFolder)) {
-		DeleteDirectory(testPackageFolder, true);
-	}
-
-	CreateDirectory(testPackageFolder);
-
-	// Copy tests
-	CopyFiles(sourceFolder + "/" + testSearchPattern + "/*", testPackageFolder);
-	foreach (var directory in System.IO.Directory.GetDirectories(sourceFolder, "*.Test")) {
-		var releaseDirectory = directory + "/bin/x86/Release";
-		if (DirectoryExists(releaseDirectory)) {
-			foreach (var releaseSubDirectory in System.IO.Directory.GetDirectories(releaseDirectory)) {
-				Information(System.IO.Path.GetDirectoryName(releaseSubDirectory));
-				CopyDirectory(releaseSubDirectory, testPackageFolder + "/" + System.IO.Path.GetFileName(releaseSubDirectory));
-			}
-		}
-	}
-
-	// Install NUnit.ConsoleRunner
-	NuGetInstall("NUnit.ConsoleRunner", new NuGetInstallSettings {
-		Version = "3.2.0",
-		OutputDirectory = testPackageFolder
-	});
-
-	// Copy dlls
-	CopyFiles(outputFolder + "/*.dll", testPackageFolder);
-
-	// Copy scripts
-	CopyFiles("./*.sh", testPackageFolder);
-
-	// Create MDBs for tests
-	CreateMdbs(testPackageFolder);
-
-	// Remove config
-	DeleteFiles(testPackageFolder + "/*.log.config");
-
-	// Clean
-	CleanFolder(testPackageFolder, true);
-
-	// Adding NzbDrone.Core.dll.config (for dllmap)
-	CopyFile(sourceFolder + "/NzbDrone.Core/NzbDrone.Core.dll.config", testPackageFolder + "/NzbDrone.Core.dll.config");
-
-	// Adding CurlSharp.dll.config (for dllmap)
-	CopyFile(sourceFolder + "/NzbDrone.Common/CurlSharp.dll.config", testPackageFolder + "/CurlSharp.dll.config");
-
-	// Adding CurlSharp libraries
-	CopyFiles(sourceFolder + "/ExternalModules/CurlSharp/libs/i386/*", testPackageFolder);
-});
-
-Task("CleanupWindowsPackage").Does(() => {
-	// Remove mono
-	DeleteFiles(outputFolder + "/NzbDrone.Mono.*");
-
-	// Adding NzbDrone.Windows to updatePackage
-	CopyFiles(outputFolder + "/NzbDrone.Windows.*", updateFolder);
-});
-
-Task("Build")
-	.IsDependentOn("Compile")
-	.IsDependentOn("Gulp")
-	.IsDependentOn("PackageMono")
-	.IsDependentOn("PackageOsx")
-	.IsDependentOn("PackageOsxApp")
-	.IsDependentOn("PackageTests")
-	.IsDependentOn("CleanupWindowsPackage");
-
-// Build Artifacts
-Task("CleanArtifacts").Does(() => {
-	if (DirectoryExists(artifactsFolder)) {
-		DeleteDirectory(artifactsFolder, true);
-	}
-
-	CreateDirectory(artifactsFolder);
-});
-
-Task("ArtifactsWindows").Does(() => {
-	CopyDirectory(outputFolder, artifactsFolderWindows + "/Radarr");
-});
-
-Task("ArtifactsWindowsInstaller").Does(() => {
-	InnoSetup("./setup/nzbdrone.iss", new InnoSetupSettings {
-		OutputDirectory = artifactsFolder,
-		ToolPath = "./setup/inno/ISCC.exe"
-    });
-});
-
-Task("ArtifactsLinux").Does(() => {
-	CopyDirectory(outputFolderMono, artifactsFolderLinux + "/Radarr");
-});
-
-Task("ArtifactsOsx").Does(() => {
-	CopyDirectory(outputFolderOsx, artifactsFolderOsx + "/Radarr");
-});
-
-Task("ArtifactsOsxApp").Does(() => {
-	CopyDirectory(outputFolderOsxApp, artifactsFolderOsxApp);
-});
-
-Task("CompressArtifacts").Does(() => {
-	var prefix = "";
-
-	if (AppVeyor.IsRunningOnAppVeyor) {
-		prefix += AppVeyor.Environment.Repository.Branch.Replace("/", "-") + ".";
-		prefix += AppVeyor.Environment.Build.Version + ".";
-	}
-
-	Zip(artifactsFolderWindows, artifactsFolder + "/Radarr." + prefix + "windows.zip");
-	GZipCompress(artifactsFolderLinux, artifactsFolder + "/Radarr." + prefix + "linux.tar.gz");
-	GZipCompress(artifactsFolderOsx, artifactsFolder + "/Radarr." + prefix + "osx.tar.gz");
-	Zip(artifactsFolderOsxApp, artifactsFolder + "/Radarr." + prefix + "osx-app.zip");
-});
-
-Task("Artifacts")
-	.IsDependentOn("CleanArtifacts")
-	.IsDependentOn("ArtifactsWindows")
-	.IsDependentOn("ArtifactsWindowsInstaller")
-	.IsDependentOn("ArtifactsLinux")
-	.IsDependentOn("ArtifactsOsx")
-	.IsDependentOn("ArtifactsOsxApp")
-	.IsDependentOn("CompressArtifacts");
-
-// Run
-RunTarget("Build");
-RunTarget("Artifacts");

build-appveyor.ps1

@@ -1,189 +0,0 @@
-##########################################################################
-# This is the Cake bootstrapper script for PowerShell.
-# This file was downloaded from https://github.com/cake-build/resources
-# Feel free to change this file to fit your needs.
-##########################################################################
-
-<#
-.SYNOPSIS
-This is a Powershell script to bootstrap a Cake build.
-.DESCRIPTION
-This Powershell script will download NuGet if missing, restore NuGet tools (including Cake)
-and execute your Cake build script with the parameters you provide.
-.PARAMETER Script
-The build script to execute.
-.PARAMETER Target
-The build script target to run.
-.PARAMETER Configuration
-The build configuration to use.
-.PARAMETER Verbosity
-Specifies the amount of information to be displayed.
-.PARAMETER Experimental
-Tells Cake to use the latest Roslyn release.
-.PARAMETER WhatIf
-Performs a dry run of the build script.
-No tasks will be executed.
-.PARAMETER Mono
-Tells Cake to use the Mono scripting engine.
-.PARAMETER SkipToolPackageRestore
-Skips restoring of packages.
-.PARAMETER ScriptArgs
-Remaining arguments are added here.
-.LINK
-http://cakebuild.net
-#>
-
-[CmdletBinding()]
-Param(
-    [string]$Script = "build-appveyor.cake",
-    [string]$Target = "Default",
-    [ValidateSet("Release", "Debug")]
-    [string]$Configuration = "Release",
-    [ValidateSet("Quiet", "Minimal", "Normal", "Verbose", "Diagnostic")]
-    [string]$Verbosity = "Verbose",
-    [switch]$Experimental,
-    [Alias("DryRun","Noop")]
-    [switch]$WhatIf,
-    [switch]$Mono,
-    [switch]$SkipToolPackageRestore,
-    [Parameter(Position=0,Mandatory=$false,ValueFromRemainingArguments=$true)]
-    [string[]]$ScriptArgs
-)
-
-[Reflection.Assembly]::LoadWithPartialName("System.Security") | Out-Null
-function MD5HashFile([string] $filePath)
-{
-    if ([string]::IsNullOrEmpty($filePath) -or !(Test-Path $filePath -PathType Leaf))
-    {
-        return $null
-    }
-
-    [System.IO.Stream] $file = $null;
-    [System.Security.Cryptography.MD5] $md5 = $null;
-    try
-    {
-        $md5 = [System.Security.Cryptography.MD5]::Create()
-        $file = [System.IO.File]::OpenRead($filePath)
-        return [System.BitConverter]::ToString($md5.ComputeHash($file))
-    }
-    finally
-    {
-        if ($file -ne $null)
-        {
-            $file.Dispose()
-        }
-    }
-}
-
-Write-Host "Preparing to run build script..."
-
-if(!$PSScriptRoot){
-    $PSScriptRoot = Split-Path $MyInvocation.MyCommand.Path -Parent
-}
-
-$TOOLS_DIR = Join-Path $PSScriptRoot "tools"
-$NUGET_EXE = Join-Path $TOOLS_DIR "nuget/nuget.exe"
-$CAKE_EXE = Join-Path $TOOLS_DIR "Cake/Cake.exe"
-$NUGET_URL = "https://dist.nuget.org/win-x86-commandline/latest/nuget.exe"
-$PACKAGES_CONFIG = Join-Path $TOOLS_DIR "packages.config"
-$PACKAGES_CONFIG_MD5 = Join-Path $TOOLS_DIR "packages.config.md5sum"
-
-# Should we use mono?
-$UseMono = "";
-if($Mono.IsPresent) {
-    Write-Verbose -Message "Using the Mono based scripting engine."
-    $UseMono = "-mono"
-}
-
-# Should we use the new Roslyn?
-$UseExperimental = "";
-if($Experimental.IsPresent -and !($Mono.IsPresent)) {
-    Write-Verbose -Message "Using experimental version of Roslyn."
-    $UseExperimental = "-experimental"
-}
-
-# Is this a dry run?
-$UseDryRun = "";
-if($WhatIf.IsPresent) {
-    $UseDryRun = "-dryrun"
-}
-
-# Make sure tools folder exists
-if ((Test-Path $PSScriptRoot) -and !(Test-Path $TOOLS_DIR)) {
-    Write-Verbose -Message "Creating tools directory..."
-    New-Item -Path $TOOLS_DIR -Type directory | out-null
-}
-
-# Make sure that packages.config exist.
-if (!(Test-Path $PACKAGES_CONFIG)) {
-    Write-Verbose -Message "Downloading packages.config..."
-    try { (New-Object System.Net.WebClient).DownloadFile("http://cakebuild.net/download/bootstrapper/packages", $PACKAGES_CONFIG) } catch {
-        Throw "Could not download packages.config."
-    }
-}
-
-# Try find NuGet.exe in path if not exists
-if (!(Test-Path $NUGET_EXE)) {
-    Write-Verbose -Message "Trying to find nuget.exe in PATH..."
-    $existingPaths = $Env:Path -Split ';' | Where-Object { (![string]::IsNullOrEmpty($_)) -and (Test-Path $_) }
-    $NUGET_EXE_IN_PATH = Get-ChildItem -Path $existingPaths -Filter "nuget.exe" | Select -First 1
-    if ($NUGET_EXE_IN_PATH -ne $null -and (Test-Path $NUGET_EXE_IN_PATH.FullName)) {
-        Write-Verbose -Message "Found in PATH at $($NUGET_EXE_IN_PATH.FullName)."
-        $NUGET_EXE = $NUGET_EXE_IN_PATH.FullName
-    }
-}
-
-# Try download NuGet.exe if not exists
-if (!(Test-Path $NUGET_EXE)) {
-    Write-Verbose -Message "Downloading NuGet.exe..."
-    try {
-        (New-Object System.Net.WebClient).DownloadFile($NUGET_URL, $NUGET_EXE)
-    } catch {
-        Throw "Could not download NuGet.exe."
-    }
-}
-
-# Save nuget.exe path to environment to be available to child processed
-$ENV:NUGET_EXE = $NUGET_EXE
-
-# Restore tools from NuGet?
-if(-Not $SkipToolPackageRestore.IsPresent) {
-    Push-Location
-    Set-Location $TOOLS_DIR
-
-    # Check for changes in packages.config and remove installed tools if true.
-    [string] $md5Hash = MD5HashFile($PACKAGES_CONFIG)
-    if((!(Test-Path $PACKAGES_CONFIG_MD5)) -Or
-      ($md5Hash -ne (Get-Content $PACKAGES_CONFIG_MD5 ))) {
-        Write-Verbose -Message "Missing or changed package.config hash..."
-        Get-ChildItem -Path $TOOLS_DIR -Recurse -Exclude packages.config |
-        Select -ExpandProperty FullName |
-        Where {$_ -notlike (Join-Path $TOOLS_DIR "pdb2mdb*")} |
-        Where {$_ -notlike (Join-Path $TOOLS_DIR "nuget*")} |
-        sort length -Descending |
-        Remove-Item -Recurse 
-    }
-
-    Write-Verbose -Message "Restoring tools from NuGet..."
-    $NuGetOutput = Invoke-Expression "&`"$NUGET_EXE`" install -ExcludeVersion -OutputDirectory `"$TOOLS_DIR`""
-
-    if ($LASTEXITCODE -ne 0) {
-        Throw "An error occured while restoring NuGet tools."
-    }
-    else
-    {
-        $md5Hash | Out-File $PACKAGES_CONFIG_MD5 -Encoding "ASCII"
-    }
-    Write-Verbose -Message ($NuGetOutput | out-string)
-    Pop-Location
-}
-
-# Make sure that Cake has been installed.
-if (!(Test-Path $CAKE_EXE)) {
-    Throw "Could not find Cake.exe at $CAKE_EXE"
-}
-
-# Start Cake
-Write-Host "Running build script..."
-Invoke-Expression "& `"$CAKE_EXE`" `"$Script`" -target=`"$Target`" -configuration=`"$Configuration`" -verbosity=`"$Verbosity`" $UseMono $UseDryRun $UseExperimental $ScriptArgs"
-exit $LASTEXITCODE

build.ps1

@@ -1 +0,0 @@
-Write-Warning "DEPRECATED -- Please use build.sh instead."

build.sh

@@ -1,313 +1,360 @@
 #! /bin/bash
-msBuild='/MSBuild/15.0/Bin'
-outputFolder='./_output'
-outputFolderMono='./_output_mono'
-outputFolderOsx='./_output_osx'
-outputFolderOsxApp='./_output_osx_app'
-testPackageFolder='./_tests/'
-testSearchPattern='*.Test/bin/x86/Release'
-sourceFolder='./src'
-slnFile=$sourceFolder/NzbDrone.sln
-updateFolder=$outputFolder/NzbDrone.Update
-updateFolderMono=$outputFolderMono/NzbDrone.Update
+set -e
 
-nuget='tools/nuget/nuget.exe';
-CheckExitCode()
+outputFolder='_output'
+testPackageFolder='_tests'
+artifactsFolder="_artifacts";
+
+ProgressStart()
 {
-    "$@"
-    local status=$?
-    if [ $status -ne 0 ]; then
-        echo "error with $1" >&2
-        exit 1
+    echo "Start '$1'"
+}
+
+ProgressEnd()
+{
+    echo "Finish '$1'"
+}
+
+UpdateVersionNumber()
+{
+    if [ "$RADARRVERSION" != "" ]; then
+        echo "Updating Version Info"
+        sed -i'' -e "s/<AssemblyVersion>[0-9.*]\+<\/AssemblyVersion>/<AssemblyVersion>$RADARRVERSION<\/AssemblyVersion>/g" src/Directory.Build.props
+        sed -i'' -e "s/<AssemblyConfiguration>[\$()A-Za-z-]\+<\/AssemblyConfiguration>/<AssemblyConfiguration>${BUILD_SOURCEBRANCHNAME}<\/AssemblyConfiguration>/g" src/Directory.Build.props
+        sed -i'' -e "s/<string>10.0.0.0<\/string>/<string>$RADARRVERSION<\/string>/g" macOS/Radarr.app/Contents/Info.plist
     fi
-    return $status
 }
 
-CleanFolder()
+LintUI()
 {
-    local path=$1
-    local keepConfigFiles=$2
+    ProgressStart 'ESLint'
+    yarn lint
+    ProgressEnd 'ESLint'
 
-
-    find $path -name "*.transform" -exec rm "{}" \;
-
-    if [ $keepConfigFiles != true ] ; then
-        find $path -name "*.dll.config" -exec rm "{}" \;
+    ProgressStart 'Stylelint'
+    if [ "$os" = "windows" ]; then
+        yarn stylelint-windows
+    else
+        yarn stylelint-linux
     fi
-
-    echo "Removing FluentValidation.Resources files"
-    find $path -name "FluentValidation.resources.dll" -exec rm "{}" \;
-    find $path -name "App.config" -exec rm "{}" \;
-
-    echo "Removing .less files"
-    find $path -name "*.less" -exec rm "{}" \;
-
-    echo "Removing vshost files"
-    find $path -name "*.vshost.exe" -exec rm "{}" \;
-
-    echo "Removing dylib files"
-    find $path -name "*.dylib" -exec rm "{}" \;
-
-    echo "Removing Empty folders"
-    find $path -depth -empty -type d -exec rm -r "{}" \;
-}
-
-
-
-AddJsonNet()
-{
-    rm $outputFolder/Newtonsoft.Json.*
-    cp $sourceFolder/packages/Newtonsoft.Json.*/lib/net35/*.dll $outputFolder
-    cp $sourceFolder/packages/Newtonsoft.Json.*/lib/net35/*.dll $outputFolder/NzbDrone.Update
-}
-
-BuildWithMSBuild()
-{
-    export PATH=$msBuild:$PATH
-	echo $PATH
-    CheckExitCode MSBuild.exe $slnFile //t:Clean //m
-    $nuget restore $slnFile
-    CheckExitCode MSBuild.exe $slnFile //p:Configuration=Release //p:Platform=x86 //t:Build //m //p:AllowedReferenceRelatedFileExtensions=.pdb
-}
-
-RestoreNuget()
-{
-    export MONO_IOMAP=case
-    mono $nuget restore $slnFile
-}
-
-CleanWithXbuild()
-{
-    export MONO_IOMAP=case
-    CheckExitCode msbuild /t:Clean $slnFile
-}
-
-BuildWithXbuild()
-{
-    export MONO_IOMAP=case
-    CheckExitCode msbuild /p:Configuration=Release /p:Platform=x86 /t:Build /p:AllowedReferenceRelatedFileExtensions=.pdb /maxcpucount:3 $slnFile
+    ProgressEnd 'Stylelint'
 }
 
 Build()
 {
-    echo "##teamcity[progressStart 'Build']"
+    ProgressStart 'Build'
 
     rm -rf $outputFolder
+    rm -rf $testPackageFolder
 
-    if [ $runtime = "dotnet" ] ; then
-        BuildWithMSBuild
+    slnFile=src/Radarr.sln
+
+    if [ $os = "windows" ]; then
+        platform=Windows
     else
-        CleanWithXbuild
-        RestoreNuget
-        BuildWithXbuild
+        platform=Posix
     fi
 
-    CleanFolder $outputFolder false
+    dotnet clean $slnFile -c Debug
+    dotnet clean $slnFile -c Release
 
-    AddJsonNet
+    if [[ -z "$RID" || -z "$FRAMEWORK" ]];
+    then
+        dotnet msbuild -restore $slnFile -p:Configuration=Release -p:Platform=$platform -t:PublishAllRids
+    else
+        dotnet msbuild -restore $slnFile -p:Configuration=Release -p:Platform=$platform -p:RuntimeIdentifiers=$RID -t:PublishAllRids
+    fi
 
-    echo "Removing Mono.Posix.dll"
-    rm $outputFolder/Mono.Posix.dll
+    ProgressEnd 'Build'
+}
 
-    echo "##teamcity[progressFinish 'Build']"
+YarnInstall()
+{
+    ProgressStart 'yarn install'
+    yarn install --frozen-lockfile
+    ProgressEnd 'yarn install'
 }
 
 RunGulp()
 {
-    echo "##teamcity[progressStart 'npm install']"
-    npm-cache install npm || CheckExitCode npm install
-    echo "##teamcity[progressFinish 'npm install']"
-
-    echo "##teamcity[progressStart 'Running gulp']"
-    CheckExitCode npm run build
-    echo "##teamcity[progressFinish 'Running gulp']"
+    ProgressStart 'Running gulp'
+    yarn run build --production
+    ProgressEnd 'Running gulp'
 }
 
-CreateMdbs()
+PackageFiles()
 {
-    local path=$1
-    if [ $runtime = "dotnet" ] ; then
-        local pdbFiles=( $(find $path -name "*.pdb") )
-        for filename in "${pdbFiles[@]}"
-        do
-          if [ -e ${filename%.pdb}.dll ]  ; then
-            tools/pdb2mdb/pdb2mdb.exe ${filename%.pdb}.dll
-          fi
-          if [ -e ${filename%.pdb}.exe ]  ; then
-            tools/pdb2mdb/pdb2mdb.exe ${filename%.pdb}.exe
-          fi
-        done
-    fi
+    local folder="$1"
+    local framework="$2"
+    local runtime="$3"
+
+    rm -rf $folder
+    mkdir -p $folder
+    cp -r $outputFolder/$framework/$runtime/publish/* $folder
+    cp -r $outputFolder/Radarr.Update/$framework/$runtime/publish $folder/Radarr.Update
+    cp -r $outputFolder/UI $folder
+
+    echo "Adding LICENSE"
+    cp LICENSE $folder
 }
 
-PackageMono()
+PackageLinux()
 {
-    echo "##teamcity[progressStart 'Creating Mono Package']"
-    rm -rf $outputFolderMono
-    cp -r $outputFolder $outputFolderMono
+    local framework="$1"
+    local runtime="$2"
 
-    echo "Creating MDBs"
-    CreateMdbs $outputFolderMono
+    ProgressStart "Creating $runtime Package for $framework"
 
-    echo "Removing PDBs"
-    find $outputFolderMono -name "*.pdb" -exec rm "{}" \;
+    local folder=$artifactsFolder/$runtime/$framework/Radarr
+
+    PackageFiles "$folder" "$framework" "$runtime"
 
     echo "Removing Service helpers"
-    rm -f $outputFolderMono/ServiceUninstall.*
-    rm -f $outputFolderMono/ServiceInstall.*
+    rm -f $folder/ServiceUninstall.*
+    rm -f $folder/ServiceInstall.*
 
-    echo "Removing native windows binaries Sqlite, MediaInfo"
-    rm -f $outputFolderMono/sqlite3.*
-    rm -f $outputFolderMono/MediaInfo.*
+    echo "Removing Radarr.Windows"
+    rm $folder/Radarr.Windows.*
 
-    echo "Adding NzbDrone.Core.dll.config (for dllmap)"
-    cp $sourceFolder/NzbDrone.Core/NzbDrone.Core.dll.config $outputFolderMono
+    echo "Adding Radarr.Mono to UpdatePackage"
+    cp $folder/Radarr.Mono.* $folder/Radarr.Update
+    if [ "$framework" = "netcoreapp3.1" ]; then
+        cp $folder/Mono.Posix.NETStandard.* $folder/Radarr.Update
+        cp $folder/libMonoPosixHelper.* $folder/Radarr.Update
+    fi
 
-    echo "Adding CurlSharp.dll.config (for dllmap)"
-    cp $sourceFolder/NzbDrone.Common/CurlSharp.dll.config $outputFolderMono
-
-    echo "Renaming NzbDrone.Console.exe to NzbDrone.exe"
-    rm $outputFolderMono/Radarr.exe*
-    for file in $outputFolderMono/Radarr.Console.exe*; do
-        mv "$file" "${file//.Console/}"
-    done
-
-    echo "Removing NzbDrone.Windows"
-    rm $outputFolderMono/NzbDrone.Windows.*
-
-    echo "Adding NzbDrone.Mono to UpdatePackage"
-    cp $outputFolderMono/NzbDrone.Mono.* $updateFolderMono
-
-    echo "##teamcity[progressFinish 'Creating Mono Package']"
+    ProgressEnd "Creating $runtime Package for $framework"
 }
 
-PackageOsx()
+PackageMacOS()
 {
-    echo "##teamcity[progressStart 'Creating OS X Package']"
-    rm -rf $outputFolderOsx
-    cp -r $outputFolderMono $outputFolderOsx
+    local framework="$1"
     
-    echo "Adding sqlite dylibs"
-    cp $sourceFolder/Libraries/Sqlite/*.dylib $outputFolderOsx
+    ProgressStart "Creating MacOS Package for $framework"
 
-    echo "Adding MediaInfo dylib"
-    cp $sourceFolder/Libraries/MediaInfo/*.dylib $outputFolderOsx
+    local folder=$artifactsFolder/macos/$framework/Radarr
 
+    PackageFiles "$folder" "$framework" "osx-x64"
+
+    if [ "$framework" = "net462" ]; then
         echo "Adding Startup script"
-    cp  ./osx/Radarr $outputFolderOsx
+        cp macOS/Radarr $folder
+    fi
 
-    echo "##teamcity[progressFinish 'Creating OS X Package']"
+    echo "Removing Service helpers"
+    rm -f $folder/ServiceUninstall.*
+    rm -f $folder/ServiceInstall.*
+
+    echo "Removing Radarr.Windows"
+    rm $folder/Radarr.Windows.*
+
+    echo "Adding Radarr.Mono to UpdatePackage"
+    cp $folder/Radarr.Mono.* $folder/Radarr.Update
+    if [ "$framework" = "netcoreapp3.1" ]; then
+        cp $folder/Mono.Posix.NETStandard.* $folder/Radarr.Update
+        cp $folder/libMonoPosixHelper.* $folder/Radarr.Update
+    fi
+
+    ProgressEnd 'Creating MacOS Package'
 }
 
-PackageOsxApp()
+PackageMacOSApp()
 {
-    echo "##teamcity[progressStart 'Creating OS X App Package']"
-    rm -rf $outputFolderOsxApp
-    mkdir $outputFolderOsxApp
+    local framework="$1"
     
-    cp -r ./osx/Radarr.app $outputFolderOsxApp
-    cp -r $outputFolderOsx $outputFolderOsxApp/Radarr.app/Contents/MacOS
+    ProgressStart "Creating macOS App Package for $framework"
 
-    echo "##teamcity[progressFinish 'Creating OS X App Package']"
+    local folder=$artifactsFolder/macos-app/$framework
+
+    rm -rf $folder
+    mkdir -p $folder
+    cp -r macOS/Radarr.app $folder
+    mkdir -p $folder/Radarr.app/Contents/MacOS
+
+    echo "Copying Binaries"
+    cp -r $artifactsFolder/macos/$framework/Radarr/* $folder/Radarr.app/Contents/MacOS
+
+    echo "Removing Update Folder"
+    rm -r $folder/Radarr.app/Contents/MacOS/Radarr.Update
+
+    ProgressEnd 'Creating macOS App Package'
+}
+
+PackageWindows()
+{
+    local framework="$1"
+    
+    ProgressStart "Creating Windows Package for $framework"
+
+    local folder=$artifactsFolder/windows/$framework/Radarr
+    
+    PackageFiles "$folder" "$framework" "win-x64"
+
+    echo "Removing Radarr.Mono"
+    rm -f $folder/Radarr.Mono.*
+    rm -f $folder/Mono.Posix.NETStandard.*
+    rm -f $folder/libMonoPosixHelper.*
+
+    echo "Adding Radarr.Windows to UpdatePackage"
+    cp $folder/Radarr.Windows.* $folder/Radarr.Update
+
+    ProgressEnd 'Creating Windows Package'
+}
+
+Package()
+{
+    local framework="$1"
+    local runtime="$2"
+    local SPLIT
+
+    IFS='-' read -ra SPLIT <<< "$runtime"
+
+    case "${SPLIT[0]}" in
+        linux)
+            PackageLinux "$framework" "$runtime"
+            ;;
+        win)
+            PackageWindows "$framework"
+            ;;
+        osx)
+            PackageMacOS "$framework"
+            PackageMacOSApp "$framework"
+            ;;
+    esac
 }
 
 PackageTests()
 {
-    echo "Packaging Tests"
-    echo "##teamcity[progressStart 'Creating Test Package']"
-    rm -rf $testPackageFolder
-    mkdir $testPackageFolder
+    local framework="$1"
+    local runtime="$2"
 
-    find $sourceFolder -path $testSearchPattern -exec cp -r -u -T "{}" $testPackageFolder \;
+    cp test.sh "$testPackageFolder/$framework/$runtime/publish"
 
-    if [ $runtime = "dotnet" ] ; then
-        $nuget install NUnit.Runners -Version 3.9.0 -Output $testPackageFolder
-    else
-        mono $nuget install NUnit.Runners -Version 3.9.0 -Output $testPackageFolder
+    rm -f $testPackageFolder/$framework/$runtime/*.log.config
+
+    # 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"
+        unzip -o gecko.zip
+        cp geckodriver.exe "$testPackageFolder/$framework/win-x64/publish"
     fi
 
-    cp $outputFolder/*.dll $testPackageFolder
-    cp ./*.sh $testPackageFolder
-
-    echo "Creating MDBs for tests"
-    CreateMdbs $testPackageFolder
-
-    rm -f $testPackageFolder/*.log.config
-
-    CleanFolder $testPackageFolder true
-
-    echo "Adding NzbDrone.Core.dll.config (for dllmap)"
-    cp $sourceFolder/NzbDrone.Core/NzbDrone.Core.dll.config $testPackageFolder
-
-    echo "Adding CurlSharp.dll.config (for dllmap)"
-    cp $sourceFolder/NzbDrone.Common/CurlSharp.dll.config $testPackageFolder
-
-    echo "Copying CurlSharp libraries"
-    cp $sourceFolder/ExternalModules/CurlSharp/libs/i386/* $testPackageFolder
-
-    echo "##teamcity[progressFinish 'Creating Test Package']"
-}
-
-CleanupWindowsPackage()
-{
-    echo "Removing NzbDrone.Mono"
-    rm -f $outputFolder/NzbDrone.Mono.*
-
-    echo "Adding NzbDrone.Windows to UpdatePackage"
-    cp $outputFolder/NzbDrone.Windows.* $updateFolder
+    ProgressEnd 'Creating Test Package'
 }
 
 # Use mono or .net depending on OS
 case "$(uname -s)" in
     CYGWIN*|MINGW32*|MINGW64*|MSYS*)
         # on windows, use dotnet
-        runtime="dotnet"
-		vsLoc=$(./vswhere.exe -property installationPath)
-		vsLoc=$(echo "/$vsLoc" | sed -e 's/\\/\//g' -e 's/://')
-		msBuild="$vsLoc$msBuild"
+        os="windows"
         ;;
     *)
         # otherwise use mono
-        runtime="mono"
+        os="posix"
         ;;
 esac
 
-if [ $# -eq 0 ]
+POSITIONAL=()
+
+if [ $# -eq 0 ]; then
+    echo "No arguments provided, building everything"
+    BACKEND=YES
+    FRONTEND=YES
+    PACKAGES=YES
+    LINT=YES
+fi
+
+while [[ $# -gt 0 ]]
+do
+key="$1"
+
+case $key in
+    --backend)
+        BACKEND=YES
+        shift # past argument
+        ;;
+    -r|--runtime)
+        RID="$2"
+        shift # past argument
+        shift # past value
+        ;;
+    -f|--framework)
+        FRAMEWORK="$2"
+        shift # past argument
+        shift # past value
+        ;;
+    --frontend)
+        FRONTEND=YES
+        shift # past argument
+        ;;
+    --packages)
+        PACKAGES=YES
+        shift # past argument
+        ;;
+    --lint)
+        LINT=YES
+        shift # past argument
+        ;;
+    --all)
+        BACKEND=YES
+        FRONTEND=YES
+        PACKAGES=YES
+        LINT=YES
+        shift # past argument
+        ;;
+    *)    # unknown option
+        POSITIONAL+=("$1") # save it in an array for later
+        shift # past argument
+        ;;
+esac
+done
+set -- "${POSITIONAL[@]}" # restore positional parameters
+
+if [ "$BACKEND" = "YES" ];
 then
+    UpdateVersionNumber
     Build
+    if [[ -z "$RID" || -z "$FRAMEWORK" ]];
+    then
+        PackageTests "netcoreapp3.1" "win-x64"
+        PackageTests "netcoreapp3.1" "linux-x64"
+        PackageTests "netcoreapp3.1" "osx-x64"
+        PackageTests "net462" "linux-x64"
+    else
+        PackageTests "$FRAMEWORK" "$RID"
+    fi
+fi
+
+if [ "$FRONTEND" = "YES" ];
+then
+    YarnInstall
     RunGulp
-    PackageMono
-    PackageOsx
-    PackageOsxApp
-    PackageTests
-    CleanupWindowsPackage
 fi
 
-if [ "$1" = "CleanXbuild" ]
-then rm -rf $outputFolder
-    CleanWithXbuild
+if [ "$LINT" = "YES" ];
+then
+    if [ -z "$FRONTEND" ];
+    then
+        YarnInstall
     fi
     
-if [ "$1" = "NugetMono" ]
-then rm -rf $outputFolder
-    RestoreNuget
+    LintUI
 fi
 
-if [ "$1" = "Build" ]
-then BuildWithXbuild
-  CleanFolder $outputFolder false
-  AddJsonNet
-  rm $outputFolder/Mono.Posix.dll
-fi
+if [ "$PACKAGES" = "YES" ];
+then
+    UpdateVersionNumber
 
-if [ "$1" = "Gulp" ]
-then RunGulp
+    if [[ -z "$RID" || -z "$FRAMEWORK" ]];
+    then
+        Package "netcoreapp3.1" "win-x64"
+        Package "netcoreapp3.1" "linux-x64"
+        Package "netcoreapp3.1" "linux-arm64"
+        Package "netcoreapp3.1" "linux-arm"
+        Package "netcoreapp3.1" "osx-x64"
+        Package "net462" "linux-x64"
+    else
+        Package "$FRAMEWORK" "$RID"
     fi
-
-if [ "$1" = "Package" ]
-then PackageMono
-  PackageOsx
-  PackageOsxApp
-  PackageTests
-  CleanupWindowsPackage
 fi

deploy.sh

@@ -1,7 +0,0 @@
-if [ -z "$CIRCLE_PULL_REQUEST" ]; then
-    echo "We are building a normal branch, deploying as such..."
-    curl "http://pr.radarr.video:4466/deploy?url=https%3A%2F%2F${CIRCLE_BUILD_NUM}-77323220-gh.circle-artifacts.com%2F0%2Fartifacts%2FRadarr.${CIRCLE_BRANCH//\//-}.$BUILD_VERSION.$CIRCLE_BUILD_NUM.linux.tar.gz&b=branch&name=${CIRCLE_BRANCH}"
-else
-    echo "We are building a pr, deploying as such..."
-    curl "http://pr.radarr.video:4466/deploy?url=https%3A%2F%2F${CIRCLE_BUILD_NUM}-77323220-gh.circle-artifacts.com%2F0%2Fartifacts%2FRadarr.${CIRCLE_BRANCH//\//-}.$BUILD_VERSION.$CIRCLE_BUILD_NUM.linux.tar.gz&b=pr&name=${CIRCLE_PR_NUMBER}"
-fi

frontend/.csscomb.json

@@ -0,0 +1,25 @@
+{
+  "remove-empty-rulesets": true,
+  "always-semicolon": true,
+  "color-case": "lower",
+  "block-indent": "  ",
+  "color-shorthand": false,
+  "element-case": "lower",
+  "eof-newline": true,
+  "leading-zero": true,
+  "quotes": "double",
+  "sort-order-fallback": "abc",
+  "space-before-colon": "",
+  "space-after-colon": " ",
+  "space-before-combinator": " ",
+  "space-after-combinator": " ",
+  "space-between-declarations": "\n",
+  "space-before-opening-brace": " ",
+  "space-after-opening-brace": "\n",
+  "space-after-selector-delimiter": " ",
+  "space-before-selector-delimiter": "",
+  "space-before-closing-brace": "\n",
+  "strip-spaces": true,
+  "tab-size": true,
+  "unitless-zero": false
+}

frontend/.esformatter

@@ -0,0 +1,335 @@
+{
+  "indent": {
+    "value": "  ",
+    "FunctionExpression": 1,
+    "ArrayExpression": 1,
+    "ObjectExpression": 1
+  },
+  "lineBreak": {
+    "value": "\n",
+
+    "before": {
+      "ArrayPatternClosing": 0,
+      "ArrayPatternComma": 0,
+      "ArrayPatternOpening": 0,
+      "ArrowFunctionExpressionArrow": 0,
+      "ArrowFunctionExpressionClosingBrace": ">=1",
+      "ArrowFunctionExpressionOpeningBrace": 0,
+      "AssignmentExpression": ">=1",
+      "AssignmentOperator": 0,
+      "BlockStatement": 0,
+      "BreakKeyword": ">=1",
+      "CallExpression": -1,
+      "CallExpressionClosingParentheses": -1,
+      "CallExpressionOpeningParentheses": 0,
+      "CatchClosingBrace": ">=1",
+      "CatchKeyword": 0,
+      "CatchOpeningBrace": 0,
+      "ClassDeclaration": ">=1",
+      "ClassDeclarationClosingBrace": ">=1",
+      "ClassDeclarationOpeningBrace": 0,
+      "ConditionalExpression": ">=1",
+      "DeleteOperator": ">=1",
+      "DoWhileStatement": ">=1",
+      "DoWhileStatementClosingBrace": ">=1",
+      "DoWhileStatementOpeningBrace": 0,
+      "ElseIfStatement": 0,
+      "ElseIfStatementClosingBrace": ">=1",
+      "ElseIfStatementOpeningBrace": 0,
+      "ElseStatement": 0,
+      "ElseStatementClosingBrace": ">=1",
+      "ElseStatementOpeningBrace": 0,
+      "EmptyStatement": -1,
+      "EndOfFile": -1,
+      "FinallyClosingBrace": ">=1",
+      "FinallyKeyword": -1,
+      "FinallyOpeningBrace": 0,
+      "ForInStatement": ">=1",
+      "ForInStatementClosingBrace": ">=1",
+      "ForInStatementExpressionClosing": 0,
+      "ForInStatementExpressionOpening": 0,
+      "ForInStatementOpeningBrace": 0,
+      "ForStatement": ">=1",
+      "ForStatementClosingBrace": ">=1",
+      "ForStatementExpressionClosing": "<2",
+      "ForStatementExpressionOpening": 0,
+      "ForStatementOpeningBrace": 0,
+      "FunctionDeclaration": ">=1",
+      "FunctionDeclarationClosingBrace": ">=1",
+      "FunctionDeclarationOpeningBrace": 0,
+      "FunctionExpression": 0,
+      "FunctionExpressionClosingBrace": 1,
+      "FunctionExpressionOpeningBrace":0,
+      "IIFEClosingParentheses": 0,
+      "IfStatement": ">=1",
+      "IfStatementClosingBrace": ">=1",
+      "IfStatementOpeningBrace": 0,
+      "LogicalExpression": -1,
+      "MemberExpressionClosing": 0,
+      "MemberExpressionOpening": 0,
+      "MemberExpressionPeriod": -1,
+      "MethodDefinition": ">=1",
+      "ObjectExpressionClosingBrace": "<=1",
+      "ObjectPatternClosingBrace": 0,
+      "ObjectPatternComma": 0,
+      "ObjectPatternOpeningBrace": 0,
+      "ParameterDefault": 0,
+      "Property": "<=2",
+      "PropertyValue": 0,
+      "ReturnStatement": -1,
+      "SwitchClosingBrace": ">=1",
+      "SwitchOpeningBrace": 0,
+      "ThisExpression": -1,
+      "ThrowStatement": ">=1",
+      "TryClosingBrace": ">=1",
+      "TryKeyword": -1,
+      "TryOpeningBrace": 0,
+      "VariableDeclaration": ">=1",
+      "VariableDeclarationSemiColon": 0,
+      "VariableDeclarationWithoutInit": ">=1",
+      "VariableName": ">=1",
+      "VariableValue": 0,
+      "WhileStatement": ">=1",
+      "WhileStatementClosingBrace": ">=1",
+      "WhileStatementOpeningBrace": 0
+    },
+
+    "after": {
+      "ArrayPatternClosing": 0,
+      "ArrayPatternComma": 0,
+      "ArrayPatternOpening": 0,
+      "ArrowFunctionExpressionArrow": 0,
+      "ArrowFunctionExpressionClosingBrace": -1,
+      "ArrowFunctionExpressionOpeningBrace": ">=1",
+      "AssignmentExpression": ">=1",
+      "AssignmentOperator": 0,
+      "BlockStatement": 0,
+      "BreakKeyword": -1,
+      "CallExpression": -1,
+      "CallExpressionClosingParentheses": -1,
+      "CallExpressionOpeningParentheses": -1,
+      "CatchClosingBrace": ">=0",
+      "CatchKeyword": 0,
+      "CatchOpeningBrace": ">=1",
+      "ClassDeclaration": ">=1",
+      "ClassDeclarationClosingBrace": ">=1",
+      "ClassDeclarationOpeningBrace": ">=1",
+      "ConditionalExpression": ">=1",
+      "DeleteOperator": ">=1",
+      "DoWhileStatement": ">=1",
+      "DoWhileStatementClosingBrace": 0,
+      "DoWhileStatementOpeningBrace": ">=1",
+      "ElseIfStatement": ">=1",
+      "ElseIfStatementClosingBrace": ">=1",
+      "ElseIfStatementOpeningBrace": ">=1",
+      "ElseStatement": ">=1",
+      "ElseStatementClosingBrace": ">=1",
+      "ElseStatementOpeningBrace": ">=1",
+      "EmptyStatement": -1,
+      "FinallyClosingBrace": ">=1",
+      "FinallyKeyword": -1,
+      "FinallyOpeningBrace": ">=1",
+      "ForInStatement": ">=1",
+      "ForInStatementClosingBrace": ">=1",
+      "ForInStatementExpressionClosing": -1,
+      "ForInStatementExpressionOpening": "<2",
+      "ForInStatementOpeningBrace": ">=1",
+      "ForStatement": ">=1",
+      "ForStatementClosingBrace": ">=1",
+      "ForStatementExpressionClosing": -1,
+      "ForStatementExpressionOpening": "<2",
+      "ForStatementOpeningBrace": ">=1",
+      "FunctionDeclaration": ">=1",
+      "FunctionDeclarationClosingBrace": ">=1",
+      "FunctionDeclarationOpeningBrace": ">=1",
+      "FunctionExpression": 0,
+      "FunctionExpressionClosingBrace": -1,
+      "FunctionExpressionOpeningBrace": 1,
+      "IIFEOpeningParentheses": 0,
+      "IfStatement": ">=1",
+      "IfStatementClosingBrace": ">=1",
+      "IfStatementOpeningBrace": ">=1",
+      "LogicalExpression": -1,
+      "MemberExpressionClosing": 0,
+      "MemberExpressionOpening": 0,
+      "MemberExpressionPeriod": 0,
+      "MethodDefinition": ">=1",
+      "ObjectExpressionOpeningBrace": "<=1",
+      "ObjectPatternClosingBrace": 0,
+      "ObjectPatternComma": 0,
+      "ObjectPatternOpeningBrace": 0,
+      "ParameterDefault": 0,
+      "Property": -1,
+      "PropertyName": 0,
+      "ReturnStatement": -1,
+      "SwitchCaseColon": ">=1",
+      "SwitchClosingBrace": ">=1",
+      "SwitchOpeningBrace": ">=1",
+      "ThisExpression": 0,
+      "ThrowStatement": ">=1",
+      "TryClosingBrace": 0,
+      "TryKeyword": -1,
+      "TryOpeningBrace": ">=1",
+      "VariableDeclaration": ">=1",
+      "VariableDeclarationSemiColon": ">=1",
+      "VariableValue": -1,
+      "WhileStatement": ">=1",
+      "WhileStatementClosingBrace": ">=1",
+      "WhileStatementOpeningBrace": ">=1"
+    }
+  },
+  "whiteSpace": {
+    "value": " ",
+    "removeTrailing": 1,
+    "before": {
+      "ArgumentComma": 0,
+      "ArgumentList": 0,
+      "ArgumentListArrayExpression": 0,
+      "ArgumentListFunctionExpression": 1,
+      "ArgumentListObjectExpression": 0,
+      "ArrayExpressionClosing": 0,
+      "ArrayExpressionComma": 0,
+      "ArrayExpressionOpening": 1,
+      "AssignmentOperator": 1,
+      "BinaryExpression": 0,
+      "BinaryExpressionOperator": 1,
+      "BlockComment": 1,
+      "CallExpression": 1,
+      "CatchClosingBrace": 1,
+      "CatchKeyword": 1,
+      "CatchOpeningBrace": 1,
+      "CatchParameterList": 0,
+      "CommaOperator": 0,
+      "ConditionalExpressionAlternate": 1,
+      "ConditionalExpressionConsequent": 1,
+      "DoWhileStatementClosingBrace": 1,
+      "DoWhileStatementConditional": 1,
+      "DoWhileStatementOpeningBrace": 1,
+      "ElseIfStatementClosingBrace": 1,
+      "ElseIfStatementOpeningBrace": 1,
+      "ElseStatementClosingBrace": 1,
+      "ElseStatementOpeningBrace": 1,
+      "EmptyStatement": 0,
+      "ExpressionClosingParentheses": 0,
+      "FinallyClosingBrace": 1,
+      "FinallyKeyword": -1,
+      "FinallyOpeningBrace": 1,
+      "ForInStatement": 1,
+      "ForInStatementClosingBrace": 1,
+      "ForInStatementExpressionClosing": 0,
+      "ForInStatementExpressionOpening": 1,
+      "ForInStatementOpeningBrace": 1,
+      "ForStatement": 1,
+      "ForStatementClosingBrace": 1,
+      "ForStatementExpressionClosing": 0,
+      "ForStatementExpressionOpening": 1,
+      "ForStatementOpeningBrace": 1,
+      "ForStatementSemicolon": 0,
+      "FunctionDeclarationClosingBrace": 1,
+      "FunctionDeclarationOpeningBrace": 1,
+      "FunctionExpressionClosingBrace": 1,
+      "FunctionExpressionOpeningBrace": 1,
+      "IfStatementClosingBrace": 1,
+      "IfStatementConditionalClosing": 0,
+      "IfStatementConditionalOpening": 1,
+      "IfStatementOpeningBrace": 1,
+      "LineComment": 1,
+      "LogicalExpressionOperator": 1,
+      "MemberExpressionClosing": 0,
+      "ObjectExpressionClosingBrace": 1,
+      "ParameterComma": 0,
+      "ParameterList": 0,
+      "Property": 1,
+      "PropertyName": 1,
+      "PropertyValue": 1,
+      "SwitchDiscriminantClosing": 0,
+      "SwitchDiscriminantOpening": 1,
+      "ThrowKeyword": 1,
+      "TryClosingBrace": 1,
+      "TryKeyword": -1,
+      "TryOpeningBrace": 1,
+      "UnaryExpressionOperator": 0,
+      "VariableName": 1,
+      "VariableValue": 1,
+      "WhileStatementClosingBrace": 1,
+      "WhileStatementConditionalClosing": 0,
+      "WhileStatementConditionalOpening": 1,
+      "WhileStatementOpeningBrace": 1
+    },
+    "after": {
+      "ArgumentComma": 1,
+      "ArgumentList": 0,
+      "ArgumentListArrayExpression": 1,
+      "ArgumentListFunctionExpression": 1,
+      "ArgumentListObjectExpression": 0,
+      "ArrayExpressionClosing": 0,
+      "ArrayExpressionComma": 1,
+      "ArrayExpressionOpening": 0,
+      "AssignmentOperator": 1,
+      "BinaryExpression": 0,
+      "BinaryExpressionOperator": 1,
+      "BlockComment": 1,
+      "CallExpression": 0,
+      "CatchClosingBrace": 1,
+      "CatchKeyword": 1,
+      "CatchOpeningBrace": 1,
+      "CatchParameterList": 0,
+      "CommaOperator": 1,
+      "ConditionalExpressionConsequent": 1,
+      "ConditionalExpressionTest": 1,
+      "DoWhileStatementBody": 1,
+      "DoWhileStatementClosingBrace": 1,
+      "DoWhileStatementOpeningBrace": 1,
+      "ElseIfStatementClosingBrace": 1,
+      "ElseIfStatementOpeningBrace": 1,
+      "ElseStatementClosingBrace": 1,
+      "ElseStatementOpeningBrace": 1,
+      "EmptyStatement": 0,
+      "ExpressionOpeningParentheses": 0,
+      "FinallyClosingBrace": 1,
+      "FinallyKeyword": -1,
+      "FinallyOpeningBrace": 1,
+      "ForInStatement": 1,
+      "ForInStatementClosingBrace": 1,
+      "ForInStatementExpressionClosing": 1,
+      "ForInStatementExpressionOpening": 0,
+      "ForInStatementOpeningBrace": 1,
+      "ForStatement": 1,
+      "ForStatementClosingBrace": 1,
+      "ForStatementExpressionClosing": 1,
+      "ForStatementExpressionOpening": 0,
+      "ForStatementOpeningBrace": 1,
+      "ForStatementSemicolon": 1,
+      "FunctionDeclarationClosingBrace": 0,
+      "FunctionDeclarationOpeningBrace": 0,
+      "FunctionExpressionClosingBrace": 0,
+      "FunctionExpressionOpeningBrace": 0,
+      "FunctionName": 0,
+      "FunctionReservedWord": 0,
+      "IfStatementClosingBrace": 1,
+      "IfStatementConditionalClosing": 0,
+      "IfStatementConditionalOpening": 0,
+      "IfStatementOpeningBrace": 1,
+      "LogicalExpressionOperator": 1,
+      "MemberExpressionOpening": 0,
+      "ObjectExpressionClosingBrace": 0,
+      "ObjectExpressionOpeningBrace": 1,
+      "ParameterComma": 1,
+      "ParameterList": 0,
+      "PropertyName": 0,
+      "PropertyValue": 0,
+      "SwitchDiscriminantClosing": 1,
+      "SwitchDiscriminantOpening": 0,
+      "ThrowKeyword": 1,
+      "TryClosingBrace": 1,
+      "TryKeyword": -1,
+      "TryOpeningBrace": 1,
+      "UnaryExpressionOperator": 0,
+      "VariableName": 1,
+      "WhileStatementClosingBrace": 1,
+      "WhileStatementConditionalClosing": 1,
+      "WhileStatementConditionalOpening": 0,
+      "WhileStatementOpeningBrace": 1
+    }
+  }
+}

frontend/.eslintignore

@@ -0,0 +1 @@
+**/JsLibraries/**

frontend/.eslintrc

@@ -0,0 +1,293 @@
+{
+  "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/.jsbeautifyrc

@@ -0,0 +1,12 @@
+{
+  "js": {
+    "indent_size": 2,
+    "indent_char": " ",
+    "indent_level": 2,
+    "indent_with_tabs": false,
+    "preserve_newlines": true,
+    "brace_style": "collapse",
+    "max_preserve_newlines": 2,
+    "jslint_happy": true
+  }
+}

frontend/.stylelintrc

@@ -0,0 +1,396 @@
+{
+"plugins": [
+  "stylelint-order"
+],
+"ignoreFiles": [
+  "frontend/src/Styles/scaffolding.css",
+  "**/*.js"
+],
+"rules": {
+    "at-rule-empty-line-before": [
+      "always",
+      {
+        "except": [
+          "inside-block"
+        ]
+      }
+    ],
+    "at-rule-name-case": "lower",
+    "at-rule-name-newline-after": "always-multi-line",
+    "at-rule-name-space-after": "always",
+    "at-rule-no-unknown": [
+      true,
+      {
+        "ignoreAtRules": [
+          "/^add\\-mixin$/",
+          "/^define\\-mixin$/"
+        ] 
+      }
+    ],
+    "at-rule-no-vendor-prefix": true,
+    "at-rule-semicolon-newline-after": "always",
+    "at-rule-semicolon-space-before": "never",
+    "block-closing-brace-empty-line-before": "never",
+    "block-closing-brace-newline-after": "always",
+    "block-closing-brace-newline-before": "always",
+    "block-closing-brace-space-after": "always-single-line",
+    "block-closing-brace-space-before": "always-single-line",
+    "block-no-empty": true,
+    "block-opening-brace-newline-after": "always",
+    "block-opening-brace-newline-before": "never-single-line",
+    "block-opening-brace-space-after": "always-single-line",
+    "block-opening-brace-space-before": "always",
+    "color-hex-case": "lower",
+    "color-hex-length": "short",
+    "color-named": "never",
+    "color-no-invalid-hex": true,
+    "comment-whitespace-inside": "always",
+    "declaration-bang-space-after": "never",
+    "declaration-bang-space-before": "always",
+    "declaration-block-no-duplicate-properties": [
+      true,
+      {
+        "ignoreProperties": [
+            "composes"
+        ]
+      }
+    ],
+    "declaration-block-no-redundant-longhand-properties": true,
+    "declaration-block-no-shorthand-property-overrides": true,
+    "declaration-block-semicolon-newline-after": "always",
+    "declaration-block-semicolon-newline-before": "never-multi-line",
+    "declaration-block-semicolon-space-before": "never",
+    "declaration-block-single-line-max-declarations": 1,
+    "declaration-block-trailing-semicolon": "always",
+    "declaration-colon-space-after": "always",
+    "declaration-colon-space-before": "never",
+    "font-family-name-quotes": "always-unless-keyword",
+    "function-calc-no-unspaced-operator": true,
+    "function-comma-newline-after": "never-multi-line",
+    "function-comma-newline-before": "never-multi-line",
+    "function-comma-space-after": "always",
+    "function-comma-space-before": "never",
+    "function-linear-gradient-no-nonstandard-direction": true,
+    "function-name-case": "lower",
+    "function-parentheses-newline-inside": "never-multi-line",
+    "function-parentheses-space-inside": "never",
+    "function-url-quotes": "always",
+    "function-url-scheme-blacklist": [
+      "data"
+    ],
+    "function-whitespace-after": "always",
+    "indentation": 2,
+    "keyframe-declaration-no-important": true,
+    "length-zero-no-unit": true,
+    "max-empty-lines": 1,
+    "max-line-length": [
+      100,
+      {
+        "ignore": [
+          "non-comments"
+        ]
+      }
+    ],
+    "max-nesting-depth": 2,
+    "media-feature-colon-space-after": "always",
+    "media-feature-colon-space-before": "never",
+    "media-feature-name-case": "lower",
+    "media-feature-name-no-vendor-prefix": true,
+    "media-feature-range-operator-space-after": "always",
+    "media-feature-range-operator-space-before": "always",
+    "no-empty-source": true,
+    "no-eol-whitespace": true,
+    "no-extra-semicolons": true,
+    "no-invalid-double-slash-comments": true,
+    "no-missing-end-of-source-newline": true,
+    "number-leading-zero": "always",
+    "number-no-trailing-zeros": true,
+    "order/order": [
+      "custom-properties",
+      "dollar-variables",
+      {
+        "hasBlock": false,
+        "name": "add-mixin",
+        "type": "at-rule"
+      },
+      "declarations",
+      "rules",
+      "at-rules"
+    ],
+    "order/properties-order": [
+      {
+        "emptyLineBefore": "always",
+        "properties": [
+          "composes"
+        ]
+      },
+      {
+        "emptyLineBefore": "always",
+        "properties": [
+          "position",
+          "top",
+          "right",
+          "bottom",
+          "left",
+          "z-index",
+          "display",
+          "visibility",
+          "align-content",
+          "align-items",
+          "align-self",
+          "justify-content",
+          "flex",
+          "flex-direction",
+          "flex-order",
+          "flex-pack",
+          "flex-align",
+          "flex-grow",
+          "flex-shrink",
+          "flex-basis",
+          "flex-wrap",
+          "flex-flow",
+          "float",
+          "clear",
+          "overflow",
+          "overflow-x",
+          "overflow-y",
+          "-webkit-overflow-scrolling",
+          "clip",
+          "box-sizing",
+          "margin",
+          "margin-top",
+          "margin-right",
+          "margin-bottom",
+          "margin-left",
+          "padding",
+          "padding-top",
+          "padding-right",
+          "padding-bottom",
+          "padding-left",
+          "min-width",
+          "min-height",
+          "max-width",
+          "max-height",
+          "width",
+          "height",
+          "outline",
+          "outline-width",
+          "outline-style",
+          "outline-color",
+          "outline-offset",
+          "border",
+          "border-spacing",
+          "border-collapse",
+          "border-width",
+          "border-style",
+          "border-color",
+          "border-top",
+          "border-top-width",
+          "border-top-style",
+          "border-top-color",
+          "border-right",
+          "border-right-width",
+          "border-right-style",
+          "border-right-color",
+          "border-bottom",
+          "border-bottom-width",
+          "border-bottom-style",
+          "border-bottom-color",
+          "border-left",
+          "border-left-width",
+          "border-left-style",
+          "border-left-color",
+          "border-radius",
+          "border-top-left-radius",
+          "border-top-right-radius",
+          "border-bottom-right-radius",
+          "border-bottom-left-radius",
+          "border-image",
+          "border-image-source",
+          "border-image-slice",
+          "border-image-width",
+          "border-image-outset",
+          "border-image-repeat",
+          "border-top-image",
+          "border-right-image",
+          "border-bottom-image",
+          "border-left-image",
+          "border-corner-image",
+          "border-top-left-image",
+          "border-top-right-image",
+          "border-bottom-right-image",
+          "border-bottom-left-image",
+          "background",
+          "background-color",
+          "background-image",
+          "background-attachment",
+          "background-position",
+          "background-position-x",
+          "background-position-y",
+          "background-clip",
+          "background-origin",
+          "background-size",
+          "background-repeat",
+          "box-decoration-break",
+          "box-shadow",
+          "color",
+          "table-layout",
+          "caption-side",
+          "empty-cells",
+          "list-style",
+          "list-style-position",
+          "list-style-type",
+          "list-style-image",
+          "quotes",
+          "content",
+          "counter-increment",
+          "counter-reset",
+          "-ms-writing-mode",
+          "vertical-align",
+          "text-align",
+          "text-align-last",
+          "text-decoration",
+          "text-emphasis",
+          "text-emphasis-position",
+          "text-emphasis-style",
+          "text-emphasis-color",
+          "text-indent",
+          "text-justify",
+          "text-outline",
+          "text-transform",
+          "text-wrap",
+          "text-overflow",
+          "text-overflow-ellipsis",
+          "text-overflow-mode",
+          "text-shadow",
+          "white-space",
+          "word-spacing",
+          "word-wrap",
+          "word-break",
+          "tab-size",
+          "hyphens",
+          "letter-spacing",
+          "font",
+          "font-weight",
+          "font-style",
+          "font-variant",
+          "font-size-adjust",
+          "font-stretch",
+          "font-size",
+          "font-family",
+          "font-smoothing",
+          "-moz-osx-font-smoothing",
+          "-webkit-font-smoothing",
+          "src",
+          "line-height",
+          "opacity",
+          "filter",
+          "resize",
+          "cursor",
+          "appearance",
+          "nav-index",
+          "nav-up",
+          "nav-right",
+          "nav-down",
+          "nav-left",
+          "transition",
+          "transition-delay",
+          "transition-timing-function",
+          "transition-duration",
+          "transition-property",
+          "transform",
+          "transform-origin",
+          "transform-style",
+          "backface-visibility",
+          "animation",
+          "animation-name",
+          "animation-duration",
+          "animation-play-state",
+          "animation-timing-function",
+          "animation-delay",
+          "animation-iteration-count",
+          "animation-direction",
+          "animation-fill-mode",
+          "pointer-events",
+          "user-select",
+          "touch-action",
+          "-webkit-tap-highlight-color",
+          "unicode-bidi",
+          "direction",
+          "columns",
+          "column-span",
+          "column-width",
+          "column-count",
+          "column-fill",
+          "column-gap",
+          "column-rule",
+          "column-rule-width",
+          "column-rule-style",
+          "column-rule-color",
+          "break-before",
+          "break-inside",
+          "break-after",
+          "page-break-before",
+          "page-break-inside",
+          "page-break-after",
+          "orphans",
+          "widows",
+          "zoom",
+          "max-zoom",
+          "min-zoom",
+          "user-zoom",
+          "orientation"
+        ]
+      }
+    ],
+    "property-case": "lower",
+    "property-no-vendor-prefix": true,
+    "rule-empty-line-before": [
+      "always",
+      {
+        "except": [
+            "first-nested"
+        ],
+        "ignore": [
+            "after-comment"
+        ]
+      }
+    ],
+    "selector-attribute-brackets-space-inside": "never",
+    "selector-attribute-operator-space-after": "never",
+    "selector-attribute-operator-space-before": "never",
+    "selector-attribute-quotes": "never",
+    "selector-class-pattern": "^[A-Za-z0-9]+$",
+    "selector-combinator-space-after": "always",
+    "selector-combinator-space-before": "always",
+    "selector-descendant-combinator-no-non-space": true,
+    "selector-list-comma-newline-after": "always",
+    "selector-list-comma-newline-before": "never-multi-line",
+    "selector-list-comma-space-before": "never",
+    "selector-max-attribute": 0,
+    "selector-max-class": 3,
+    "selector-max-compound-selectors": 3,
+    "selector-max-empty-lines": 0,
+    "selector-max-id": 0,
+    "selector-max-universal": 0,
+    "selector-pseudo-class-case": "lower",
+    "selector-pseudo-class-parentheses-space-inside": "never",
+    "selector-pseudo-element-case": "lower",
+    "selector-pseudo-element-colon-notation": "double",
+    "selector-pseudo-element-no-unknown": true,
+    "selector-type-case": "lower",
+    "selector-type-no-unknown": true,
+    "shorthand-property-no-redundant-values": true,
+    "string-no-newline": true,
+    "string-quotes": "single",
+    "time-min-milliseconds": 100,
+    "unit-case": "lower",
+    "unit-no-unknown": true,
+    "value-list-comma-newline-after": "never-multi-line",
+    "value-list-comma-newline-before": "never-multi-line",
+    "value-list-comma-space-after": "always",
+    "value-list-comma-space-before": "never",
+    "value-list-max-empty-lines": 0,
+    "value-no-vendor-prefix": true
+  }
+}

frontend/.tern-project

@@ -0,0 +1,7 @@
+{
+  "ecmaVersion": 6,
+  "libs": [
+    "browser",
+    "jquery"
+  ]
+}

frontend/babel.config.js

@@ -0,0 +1,35 @@
+const loose = true;
+
+module.exports = {
+  plugins: [
+    // Stage 1
+    '@babel/plugin-proposal-export-default-from',
+    ['@babel/plugin-proposal-optional-chaining', { loose }],
+    ['@babel/plugin-proposal-nullish-coalescing-operator', { loose }],
+
+    // Stage 2
+    '@babel/plugin-proposal-export-namespace-from',
+
+    // Stage 3
+    ['@babel/plugin-proposal-class-properties', { loose }],
+    '@babel/plugin-syntax-dynamic-import'
+  ],
+  env: {
+    development: {
+      presets: [
+        ['@babel/preset-react', { development: true }]
+      ],
+      plugins: [
+        'babel-plugin-inline-classnames'
+      ]
+    },
+    production: {
+      presets: [
+        '@babel/preset-react'
+      ],
+      plugins: [
+        'babel-plugin-transform-react-remove-prop-types'
+      ]
+    }
+  }
+};

frontend/gulp/build.js

@@ -0,0 +1,18 @@
+const gulp = require('gulp');
+
+require('./clean');
+require('./copy');
+require('./webpack');
+
+gulp.task('build',
+  gulp.series('clean',
+    gulp.parallel(
+      'webpack',
+      'copyHtml',
+      'copyFonts',
+      'copyImages',
+      'copyJs'
+    )
+  )
+);
+

frontend/gulp/clean.js

@@ -0,0 +1,8 @@
+const gulp = require('gulp');
+const del = require('del');
+
+const paths = require('./helpers/paths');
+
+gulp.task('clean', () => {
+  return del([paths.dest.root]);
+});

frontend/gulp/copy.js

@@ -0,0 +1,45 @@
+const path = require('path');
+const gulp = require('gulp');
+const print = require('gulp-print').default;
+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'))
+    .pipe(print())
+    .pipe(gulp.dest(paths.dest.root))
+    .pipe(livereload());
+});
+
+gulp.task('copyFonts', () => {
+  return gulp.src(
+    path.join(paths.src.fonts, '**', '*.*'), { base: paths.src.root }
+  )
+    .pipe(cache('copyFonts'))
+    .pipe(print())
+    .pipe(gulp.dest(paths.dest.root))
+    .pipe(livereload());
+});
+
+gulp.task('copyImages', () => {
+  return gulp.src(
+    path.join(paths.src.images, '**', '*.*'), { base: paths.src.root }
+  )
+    .pipe(cache('copyImages'))
+    .pipe(print())
+    .pipe(gulp.dest(paths.dest.root))
+    .pipe(livereload());
+});

frontend/gulp/gulpFile.js

@@ -0,0 +1,5 @@
+require('./build.js');
+require('./clean.js');
+require('./copy.js');
+require('./watch.js');
+require('./webpack.js');

frontend/gulp/helpers/errorHandler.js

@@ -0,0 +1,6 @@
+const colors = require('ansi-colors');
+
+module.exports = function errorHandler(error) {
+  console.log(colors.red(`Error (${error.plugin}): ${error.message}`));
+  this.emit('end');
+};

frontend/gulp/helpers/paths.js

@@ -0,0 +1,23 @@
+const root = './frontend/src';
+
+const paths = {
+  src: {
+    root,
+    html: `${root}/*.html`,
+    scripts: `${root}/**/*.js`,
+    content: `${root}/Content/`,
+    fonts: `${root}/Content/Fonts/`,
+    images: `${root}/Content/Images/`,
+    exclude: {
+      libs: `!${root}/JsLibraries/**`
+    }
+  },
+  dest: {
+    root: './_output/UI/',
+    content: './_output/UI/Content/',
+    fonts: './_output/UI/Content/Fonts/',
+    images: './_output/UI/Content/Images/'
+  }
+};
+
+module.exports = paths;

frontend/gulp/watch.js

@@ -0,0 +1,18 @@
+const gulp = require('gulp');
+const livereload = require('gulp-livereload');
+const gulpWatch = require('gulp-watch');
+const paths = require('./helpers/paths.js');
+
+require('./copy.js');
+require('./webpack.js');
+
+function watch() {
+  livereload.listen({ start: true });
+
+  gulp.task('webpackWatch')();
+  gulpWatch(paths.src.html, gulp.series('copyHtml'));
+  gulpWatch(`${paths.src.fonts}**/*.*`, gulp.series('copyFonts'));
+  gulpWatch(`${paths.src.images}**/*.*`, gulp.series('copyImages'));
+}
+
+gulp.task('watch', gulp.series('build', watch));

frontend/gulp/webpack.js

@@ -0,0 +1,260 @@
+const gulp = require('gulp');
+const webpackStream = require('webpack-stream');
+const livereload = require('gulp-livereload');
+const path = require('path');
+const webpack = require('webpack');
+const errorHandler = require('./helpers/errorHandler');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+
+const uiFolder = 'UI';
+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 distFolder = path.resolve(frontendFolder, '..', '_output', uiFolder);
+
+console.log('Source Folder:', srcFolder);
+console.log('Output Folder:', distFolder);
+console.log('isProduction:', isProduction);
+console.log('isProfiling:', isProfiling);
+
+const cssVarsFiles = [
+  '../src/Styles/Variables/colors',
+  '../src/Styles/Variables/dimensions',
+  '../src/Styles/Variables/fonts',
+  '../src/Styles/Variables/animations',
+  '../src/Styles/Variables/zIndexes'
+].map(require.resolve);
+
+// Override the way HtmlWebpackPlugin injects the scripts
+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 body = assetTags.body.map((v) => {
+    v.attributes = { src: `/${v.attributes.src}` };
+    return this.createHtmlTag(v);
+  });
+
+  return html
+    .replace('<!-- webpack bundles head -->', head.join('\r\n  '))
+    .replace('<!-- webpack bundles body -->', body.join('\r\n  '));
+};
+
+const plugins = [
+  new webpack.DefinePlugin({
+    __DEV__: !isProduction,
+    'process.env.NODE_ENV': isProduction ? JSON.stringify('production') : JSON.stringify('development')
+  }),
+
+  new MiniCssExtractPlugin({
+    filename: path.join('Content', 'styles.css')
+  }),
+
+  new HtmlWebpackPlugin({
+    template: 'frontend/src/index.html',
+    filename: 'index.html'
+  })
+];
+
+const config = {
+  mode: isProduction ? 'production' : 'development',
+  devtool: '#source-map',
+
+  stats: {
+    children: false
+  },
+
+  watchOptions: {
+    ignored: /node_modules/
+  },
+
+  entry: {
+    index: 'index.js'
+  },
+
+  resolve: {
+    modules: [
+      srcFolder,
+      path.join(srcFolder, 'Shims'),
+      'node_modules'
+    ],
+    alias: {
+      jquery: 'jquery/src/jquery'
+    }
+  },
+
+  output: {
+    path: distFolder,
+    filename: '[name].js',
+    sourceMapFilename: '[file].map'
+  },
+
+  optimization: {
+    chunkIds: 'named',
+    splitChunks: {
+      chunks: 'initial'
+    }
+  },
+
+  performance: {
+    hints: false
+  },
+
+  plugins,
+
+  resolveLoader: {
+    modules: [
+      'node_modules',
+      'frontend/gulp/webpack/'
+    ]
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.worker\.js$/,
+        use: {
+          loader: 'worker-loader',
+          options: {
+            name: '[name].js'
+          }
+        }
+      },
+      {
+        test: /\.js?$/,
+        exclude: /(node_modules|JsLibraries)/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              configFile: `${frontendFolder}/babel.config.js`,
+              envName: isProduction ? 'production' : 'development',
+              presets: [
+                [
+                  '@babel/preset-env',
+                  {
+                    modules: false,
+                    loose: true,
+                    debug: false,
+                    useBuiltIns: 'entry',
+                    corejs: 3
+                  }
+                ]
+              ]
+            }
+          }
+        ]
+      },
+
+      // CSS Modules
+      {
+        test: /\.css$/,
+        exclude: /(node_modules|globals.css)/,
+        use: [
+          { loader: MiniCssExtractPlugin.loader },
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 1,
+              modules: {
+                localIdentName: '[name]/[local]/[hash:base64:5]'
+              }
+            }
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              ident: 'postcss',
+              config: {
+                ctx: {
+                  cssVarsFiles
+                },
+                path: 'frontend/postcss.config.js'
+              }
+            }
+          }
+        ]
+      },
+
+      // Global styles
+      {
+        test: /\.css$/,
+        include: /(node_modules|globals.css)/,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader'
+          }
+        ]
+      },
+
+      // Fonts
+      {
+        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 10240,
+              mimetype: 'application/font-woff',
+              emitFile: false,
+              name: 'Content/Fonts/[name].[ext]'
+            }
+          }
+        ]
+      },
+
+      {
+        test: /\.(ttf|eot|eot?#iefix|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              emitFile: false,
+              name: 'Content/Fonts/[name].[ext]'
+            }
+          }
+        ]
+      }
+    ]
+  }
+};
+
+if (isProfiling) {
+  config.resolve.alias['react-dom$'] = 'react-dom/profiling';
+  config.resolve.alias['scheduler/tracing'] = 'scheduler/tracing-profiling';
+
+  config.optimization.minimizer = [
+    new TerserPlugin({
+      cache: true,
+      parallel: true,
+      sourceMap: true, // Must be set to true if using source-maps in production
+      terserOptions: {
+        mangle: false,
+        keep_classnames: true,
+        keep_fnames: true
+      }
+    })
+  ];
+}
+
+gulp.task('webpack', () => {
+  return webpackStream(config)
+    .pipe(gulp.dest('_output/UI'));
+});
+
+gulp.task('webpackWatch', () => {
+  config.watch = true;
+
+  return webpackStream(config)
+    .on('error', errorHandler)
+    .pipe(gulp.dest('_output/UI'))
+    .on('error', errorHandler)
+    .pipe(livereload())
+    .on('error', errorHandler);
+});

frontend/gulp/webpack/css-variables-loader.js

@@ -0,0 +1,11 @@
+const loaderUtils = require('loader-utils');
+
+module.exports = function cssVariablesLoader(source) {
+  const options = loaderUtils.getOptions(this);
+
+  options.cssVarsFiles.forEach((cssVarsFile) => {
+    this.addDependency(cssVarsFile);
+  });
+
+  return source;
+};

frontend/postcss.config.js

@@ -0,0 +1,23 @@
+const reload = require('require-nocache')(module);
+
+module.exports = (ctx, configPath, options) => {
+  const config = {
+    plugins: {
+      'postcss-mixins': {
+        mixinsDir: [
+          'frontend/src/Styles/Mixins'
+        ]
+      },
+      'postcss-simple-vars': {
+        variables: () =>
+          ctx.options.cssVarsFiles.reduce((acc, vars) => {
+            return Object.assign(acc, reload(vars));
+          }, {})
+      },
+      'postcss-color-function': {},
+      'postcss-nested': {}
+    }
+  };
+
+  return config;
+};

frontend/src/.vscode/settings.json

@@ -0,0 +1,4 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+  "files.insertFinalNewline": true
+}

frontend/src/Activity/Blacklist/Blacklist.js

@@ -0,0 +1,123 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+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 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 BlacklistRowConnector from './BlacklistRowConnector';
+
+class Blacklist extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      isFetching,
+      isPopulated,
+      error,
+      items,
+      columns,
+      totalRecords,
+      isClearingBlacklistExecuting,
+      onClearBlacklistPress,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <PageContent title="Blacklist">
+        <PageToolbar>
+          <PageToolbarSection>
+            <PageToolbarButton
+              label="Clear"
+              iconName={icons.CLEAR}
+              isSpinning={isClearingBlacklistExecuting}
+              onPress={onClearBlacklistPress}
+            />
+          </PageToolbarSection>
+
+          <PageToolbarSection alignContent={align.RIGHT}>
+            <TableOptionsModalWrapper
+              {...otherProps}
+              columns={columns}
+            >
+              <PageToolbarButton
+                label="Options"
+                iconName={icons.TABLE}
+              />
+            </TableOptionsModalWrapper>
+          </PageToolbarSection>
+        </PageToolbar>
+
+        <PageContentBodyConnector>
+          {
+            isFetching && !isPopulated &&
+              <LoadingIndicator />
+          }
+
+          {
+            !isFetching && !!error &&
+              <div>Unable to load blacklist</div>
+          }
+
+          {
+            isPopulated && !error && !items.length &&
+              <div>
+                No history blacklist
+              </div>
+          }
+
+          {
+            isPopulated && !error && !!items.length &&
+              <div>
+                <Table
+                  columns={columns}
+                  {...otherProps}
+                >
+                  <TableBody>
+                    {
+                      items.map((item) => {
+                        return (
+                          <BlacklistRowConnector
+                            key={item.id}
+                            columns={columns}
+                            {...item}
+                          />
+                        );
+                      })
+                    }
+                  </TableBody>
+                </Table>
+
+                <TablePager
+                  totalRecords={totalRecords}
+                  isFetching={isFetching}
+                  {...otherProps}
+                />
+              </div>
+          }
+        </PageContentBodyConnector>
+      </PageContent>
+    );
+  }
+}
+
+Blacklist.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  totalRecords: PropTypes.number,
+  isClearingBlacklistExecuting: PropTypes.bool.isRequired,
+  onClearBlacklistPress: PropTypes.func.isRequired
+};
+
+export default Blacklist;

frontend/src/Activity/Blacklist/BlacklistConnector.js

@@ -0,0 +1,154 @@
+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 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 Blacklist from './Blacklist';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.blacklist,
+    createCommandExecutingSelector(commandNames.CLEAR_BLACKLIST),
+    (blacklist, isClearingBlacklistExecuting) => {
+      return {
+        isClearingBlacklistExecuting,
+        ...blacklist
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  ...blacklistActions,
+  executeCommand
+};
+
+class BlacklistConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    const {
+      useCurrentPage,
+      fetchBlacklist,
+      gotoBlacklistFirstPage
+    } = this.props;
+
+    registerPagePopulator(this.repopulate);
+
+    if (useCurrentPage) {
+      fetchBlacklist();
+    } else {
+      gotoBlacklistFirstPage();
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.isClearingBlacklistExecuting && !this.props.isClearingBlacklistExecuting) {
+      this.props.gotoBlacklistFirstPage();
+    }
+  }
+
+  componentWillUnmount() {
+    this.props.clearBlacklist();
+    unregisterPagePopulator(this.repopulate);
+  }
+
+  //
+  // Control
+
+  repopulate = () => {
+    this.props.fetchBlacklist();
+  }
+  //
+  // Listeners
+
+  onFirstPagePress = () => {
+    this.props.gotoBlacklistFirstPage();
+  }
+
+  onPreviousPagePress = () => {
+    this.props.gotoBlacklistPreviousPage();
+  }
+
+  onNextPagePress = () => {
+    this.props.gotoBlacklistNextPage();
+  }
+
+  onLastPagePress = () => {
+    this.props.gotoBlacklistLastPage();
+  }
+
+  onPageSelect = (page) => {
+    this.props.gotoBlacklistPage({ page });
+  }
+
+  onSortPress = (sortKey) => {
+    this.props.setBlacklistSort({ sortKey });
+  }
+
+  onTableOptionChange = (payload) => {
+    this.props.setBlacklistTableOption(payload);
+
+    if (payload.pageSize) {
+      this.props.gotoBlacklistFirstPage();
+    }
+  }
+
+  onClearBlacklistPress = () => {
+    this.props.executeCommand({ name: commandNames.CLEAR_BLACKLIST });
+  }
+
+  onTableOptionChange = (payload) => {
+    this.props.setBlacklistTableOption(payload);
+
+    if (payload.pageSize) {
+      this.props.gotoBlacklistFirstPage();
+    }
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <Blacklist
+        onFirstPagePress={this.onFirstPagePress}
+        onPreviousPagePress={this.onPreviousPagePress}
+        onNextPagePress={this.onNextPagePress}
+        onLastPagePress={this.onLastPagePress}
+        onPageSelect={this.onPageSelect}
+        onSortPress={this.onSortPress}
+        onTableOptionChange={this.onTableOptionChange}
+        onClearBlacklistPress={this.onClearBlacklistPress}
+        {...this.props}
+      />
+    );
+  }
+}
+
+BlacklistConnector.propTypes = {
+  useCurrentPage: PropTypes.bool.isRequired,
+  isClearingBlacklistExecuting: PropTypes.bool.isRequired,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  fetchBlacklist: PropTypes.func.isRequired,
+  gotoBlacklistFirstPage: PropTypes.func.isRequired,
+  gotoBlacklistPreviousPage: PropTypes.func.isRequired,
+  gotoBlacklistNextPage: PropTypes.func.isRequired,
+  gotoBlacklistLastPage: PropTypes.func.isRequired,
+  gotoBlacklistPage: PropTypes.func.isRequired,
+  setBlacklistSort: PropTypes.func.isRequired,
+  setBlacklistTableOption: PropTypes.func.isRequired,
+  clearBlacklist: PropTypes.func.isRequired,
+  executeCommand: PropTypes.func.isRequired
+};
+
+export default withCurrentPage(
+  connect(createMapStateToProps, mapDispatchToProps)(BlacklistConnector)
+);

frontend/src/Activity/Blacklist/BlacklistDetailsModal.js

@@ -0,0 +1,89 @@
+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 Modal from 'Components/Modal/Modal';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalFooter from 'Components/Modal/ModalFooter';
+
+class BlacklistDetailsModal extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      isOpen,
+      sourceTitle,
+      protocol,
+      indexer,
+      message,
+      onModalClose
+    } = this.props;
+
+    return (
+      <Modal
+        isOpen={isOpen}
+        onModalClose={onModalClose}
+      >
+        <ModalContent
+          onModalClose={onModalClose}
+        >
+          <ModalHeader>
+            Details
+          </ModalHeader>
+
+          <ModalBody>
+            <DescriptionList>
+              <DescriptionListItem
+                title="Name"
+                data={sourceTitle}
+              />
+
+              <DescriptionListItem
+                title="Protocol"
+                data={protocol}
+              />
+
+              {
+                !!message &&
+                  <DescriptionListItem
+                    title="Indexer"
+                    data={indexer}
+                  />
+              }
+
+              {
+                !!message &&
+                  <DescriptionListItem
+                    title="Message"
+                    data={message}
+                  />
+              }
+            </DescriptionList>
+          </ModalBody>
+
+          <ModalFooter>
+            <Button onPress={onModalClose}>
+              Close
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    );
+  }
+}
+
+BlacklistDetailsModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  sourceTitle: PropTypes.string.isRequired,
+  protocol: PropTypes.string.isRequired,
+  indexer: PropTypes.string,
+  message: PropTypes.string,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default BlacklistDetailsModal;

frontend/src/Activity/Blacklist/BlacklistRow.css

@@ -0,0 +1,18 @@
+.language,
+.quality {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 100px;
+}
+
+.indexer {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 80px;
+}
+
+.actions {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 70px;
+}

frontend/src/Activity/Blacklist/BlacklistRow.js

@@ -0,0 +1,200 @@
+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 MovieFormats from 'Movie/MovieFormats';
+import MovieLanguage from 'Movie/MovieLanguage';
+import MovieTitleLink from 'Movie/MovieTitleLink';
+import BlacklistDetailsModal from './BlacklistDetailsModal';
+import styles from './BlacklistRow.css';
+
+class BlacklistRow extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isDetailsModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onDetailsPress = () => {
+    this.setState({ isDetailsModalOpen: true });
+  }
+
+  onDetailsModalClose = () => {
+    this.setState({ isDetailsModalOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      movie,
+      sourceTitle,
+      quality,
+      customFormats,
+      languages,
+      date,
+      protocol,
+      indexer,
+      message,
+      columns,
+      onRemovePress
+    } = this.props;
+
+    if (!movie) {
+      return null;
+    }
+
+    return (
+      <TableRow>
+        {
+          columns.map((column) => {
+            const {
+              name,
+              isVisible
+            } = column;
+
+            if (!isVisible) {
+              return null;
+            }
+
+            if (name === 'movies.sortTitle') {
+              return (
+                <TableRowCell key={name}>
+                  <MovieTitleLink
+                    titleSlug={movie.titleSlug}
+                    title={movie.title}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'sourceTitle') {
+              return (
+                <TableRowCell key={name}>
+                  {sourceTitle}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'languages') {
+              return (
+                <TableRowCell key={name}>
+                  <MovieLanguage
+                    languages={languages}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'quality') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.quality}
+                >
+                  <MovieQuality
+                    quality={quality}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'customFormats') {
+              return (
+                <TableRowCell key={name}>
+                  <MovieFormats
+                    formats={customFormats}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'date') {
+              return (
+                <RelativeDateCellConnector
+                  key={name}
+                  date={date}
+                />
+              );
+            }
+
+            if (name === 'indexer') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.indexer}
+                >
+                  {indexer}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'actions') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.actions}
+                >
+                  <IconButton
+                    name={icons.INFO}
+                    onPress={this.onDetailsPress}
+                  />
+
+                  <IconButton
+                    title="Remove from blacklist"
+                    name={icons.REMOVE}
+                    kind={kinds.DANGER}
+                    onPress={onRemovePress}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            return null;
+          })
+        }
+
+        <BlacklistDetailsModal
+          isOpen={this.state.isDetailsModalOpen}
+          sourceTitle={sourceTitle}
+          protocol={protocol}
+          indexer={indexer}
+          message={message}
+          onModalClose={this.onDetailsModalClose}
+        />
+      </TableRow>
+    );
+  }
+
+}
+
+BlacklistRow.propTypes = {
+  id: PropTypes.number.isRequired,
+  movie: PropTypes.object.isRequired,
+  sourceTitle: PropTypes.string.isRequired,
+  quality: PropTypes.object.isRequired,
+  customFormats: PropTypes.arrayOf(PropTypes.object).isRequired,
+  languages: PropTypes.arrayOf(PropTypes.object).isRequired,
+  date: PropTypes.string.isRequired,
+  protocol: PropTypes.string.isRequired,
+  indexer: PropTypes.string,
+  message: PropTypes.string,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onRemovePress: PropTypes.func.isRequired
+};
+
+export default BlacklistRow;

frontend/src/Activity/Blacklist/BlacklistRowConnector.js

@@ -0,0 +1,26 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { removeFromBlacklist } from 'Store/Actions/blacklistActions';
+import createMovieSelector from 'Store/Selectors/createMovieSelector';
+import BlacklistRow from './BlacklistRow';
+
+function createMapStateToProps() {
+  return createSelector(
+    createMovieSelector(),
+    (movie) => {
+      return {
+        movie
+      };
+    }
+  );
+}
+
+function createMapDispatchToProps(dispatch, props) {
+  return {
+    onRemovePress() {
+      dispatch(removeFromBlacklist({ id: props.id }));
+    }
+  };
+}
+
+export default connect(createMapStateToProps, createMapDispatchToProps)(BlacklistRow);

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

@@ -0,0 +1,5 @@
+.description {
+  composes: description from '~Components/DescriptionList/DescriptionListItemDescription.css';
+
+  overflow-wrap: break-word;
+}

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

@@ -0,0 +1,278 @@
+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 styles from './HistoryDetails.css';
+
+function HistoryDetails(props) {
+  const {
+    eventType,
+    sourceTitle,
+    data,
+    shortDateFormat,
+    timeFormat
+  } = props;
+
+  if (eventType === 'grabbed') {
+    const {
+      indexer,
+      releaseGroup,
+      nzbInfoUrl,
+      downloadClient,
+      downloadId,
+      age,
+      ageHours,
+      ageMinutes,
+      publishedDate
+    } = data;
+
+    return (
+      <DescriptionList>
+        <DescriptionListItem
+          descriptionClassName={styles.description}
+          title="Name"
+          data={sourceTitle}
+        />
+
+        {
+          !!indexer &&
+            <DescriptionListItem
+              title="Indexer"
+              data={indexer}
+            />
+        }
+
+        {
+          !!releaseGroup &&
+            <DescriptionListItem
+              descriptionClassName={styles.description}
+              title="Release Group"
+              data={releaseGroup}
+            />
+        }
+
+        {
+          !!nzbInfoUrl &&
+            <span>
+              <DescriptionListItemTitle>
+                Info URL
+              </DescriptionListItemTitle>
+
+              <DescriptionListItemDescription>
+                <Link to={nzbInfoUrl}>{nzbInfoUrl}</Link>
+              </DescriptionListItemDescription>
+            </span>
+        }
+
+        {
+          !!downloadClient &&
+            <DescriptionListItem
+              title="Download Client"
+              data={downloadClient}
+            />
+        }
+
+        {
+          !!downloadId &&
+            <DescriptionListItem
+              title="Grab ID"
+              data={downloadId}
+            />
+        }
+
+        {
+          !!indexer &&
+            <DescriptionListItem
+              title="Age (when grabbed)"
+              data={formatAge(age, ageHours, ageMinutes)}
+            />
+        }
+
+        {
+          !!publishedDate &&
+            <DescriptionListItem
+              title="Published Date"
+              data={formatDateTime(publishedDate, shortDateFormat, timeFormat, { includeSeconds: true })}
+            />
+        }
+      </DescriptionList>
+    );
+  }
+
+  if (eventType === 'downloadFailed') {
+    const {
+      message
+    } = data;
+
+    return (
+      <DescriptionList>
+        <DescriptionListItem
+          descriptionClassName={styles.description}
+          title="Name"
+          data={sourceTitle}
+        />
+
+        {
+          !!message &&
+            <DescriptionListItem
+              title="Message"
+              data={message}
+            />
+        }
+      </DescriptionList>
+    );
+  }
+
+  if (eventType === 'downloadFolderImported') {
+    const {
+      droppedPath,
+      importedPath
+    } = data;
+
+    return (
+      <DescriptionList>
+        <DescriptionListItem
+          descriptionClassName={styles.description}
+          title="Name"
+          data={sourceTitle}
+        />
+
+        {
+          !!droppedPath &&
+            <DescriptionListItem
+              descriptionClassName={styles.description}
+              title="Source"
+              data={droppedPath}
+            />
+        }
+
+        {
+          !!importedPath &&
+            <DescriptionListItem
+              descriptionClassName={styles.description}
+              title="Imported To"
+              data={importedPath}
+            />
+        }
+      </DescriptionList>
+    );
+  }
+
+  if (eventType === 'movieFileDeleted') {
+    const {
+      reason
+    } = data;
+
+    let reasonMessage = '';
+
+    switch (reason) {
+      case 'Manual':
+        reasonMessage = 'File was deleted by via UI';
+        break;
+      case 'MissingFromDisk':
+        reasonMessage = 'Radarr was unable to find the file on disk so it was removed';
+        break;
+      case 'Upgrade':
+        reasonMessage = 'File was deleted to import an upgrade';
+        break;
+      default:
+        reasonMessage = '';
+    }
+
+    return (
+      <DescriptionList>
+        <DescriptionListItem
+          title="Name"
+          data={sourceTitle}
+        />
+
+        <DescriptionListItem
+          title="Reason"
+          data={reasonMessage}
+        />
+      </DescriptionList>
+    );
+  }
+
+  if (eventType === 'movieFileRenamed') {
+    const {
+      sourcePath,
+      sourceRelativePath,
+      path,
+      relativePath
+    } = data;
+
+    return (
+      <DescriptionList>
+        <DescriptionListItem
+          title="Source Path"
+          data={sourcePath}
+        />
+
+        <DescriptionListItem
+          title="Source Relative Path"
+          data={sourceRelativePath}
+        />
+
+        <DescriptionListItem
+          title="Destination Path"
+          data={path}
+        />
+
+        <DescriptionListItem
+          title="Destination Relative Path"
+          data={relativePath}
+        />
+      </DescriptionList>
+    );
+  }
+
+  if (eventType === 'downloadIgnored') {
+    const {
+      message
+    } = data;
+
+    return (
+      <DescriptionList>
+        <DescriptionListItem
+          descriptionClassName={styles.description}
+          title="Name"
+          data={sourceTitle}
+        />
+
+        {
+          !!message &&
+            <DescriptionListItem
+              title="Message"
+              data={message}
+            />
+        }
+      </DescriptionList>
+    );
+  }
+
+  return (
+    <DescriptionList>
+      <DescriptionListItem
+        descriptionClassName={styles.description}
+        title="Name"
+        data={sourceTitle}
+      />
+    </DescriptionList>
+  );
+}
+
+HistoryDetails.propTypes = {
+  eventType: PropTypes.string.isRequired,
+  sourceTitle: PropTypes.string.isRequired,
+  data: PropTypes.object.isRequired,
+  shortDateFormat: PropTypes.string.isRequired,
+  timeFormat: PropTypes.string.isRequired
+};
+
+export default HistoryDetails;

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

@@ -0,0 +1,19 @@
+import _ from 'lodash';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import HistoryDetails from './HistoryDetails';
+
+function createMapStateToProps() {
+  return createSelector(
+    createUISettingsSelector(),
+    (uiSettings) => {
+      return _.pick(uiSettings, [
+        'shortDateFormat',
+        'timeFormat'
+      ]);
+    }
+  );
+}
+
+export default connect(createMapStateToProps)(HistoryDetails);

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

@@ -0,0 +1,5 @@
+.markAsFailedButton {
+  composes: button from '~Components/Link/Button.css';
+
+  margin-right: auto;
+}

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

@@ -0,0 +1,106 @@
+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 ModalFooter from 'Components/Modal/ModalFooter';
+import HistoryDetails from './HistoryDetails';
+import styles from './HistoryDetailsModal.css';
+
+function getHeaderTitle(eventType) {
+  switch (eventType) {
+    case 'grabbed':
+      return 'Grabbed';
+    case 'downloadFailed':
+      return 'Download Failed';
+    case 'downloadFolderImported':
+      return 'Movie Imported';
+    case 'movieFileDeleted':
+      return 'Movie File Deleted';
+    case 'movieFileRenamed':
+      return 'Movie File Renamed';
+    case 'downloadIgnored':
+      return 'Download Ignored';
+    default:
+      return 'Unknown';
+  }
+}
+
+function HistoryDetailsModal(props) {
+  const {
+    isOpen,
+    eventType,
+    sourceTitle,
+    data,
+    isMarkingAsFailed,
+    shortDateFormat,
+    timeFormat,
+    onMarkAsFailedPress,
+    onModalClose
+  } = props;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onModalClose={onModalClose}
+    >
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          {getHeaderTitle(eventType)}
+        </ModalHeader>
+
+        <ModalBody>
+          <HistoryDetails
+            eventType={eventType}
+            sourceTitle={sourceTitle}
+            data={data}
+            shortDateFormat={shortDateFormat}
+            timeFormat={timeFormat}
+          />
+        </ModalBody>
+
+        <ModalFooter>
+          {
+            eventType === 'grabbed' &&
+              <SpinnerButton
+                className={styles.markAsFailedButton}
+                kind={kinds.DANGER}
+                isSpinning={isMarkingAsFailed}
+                onPress={onMarkAsFailedPress}
+              >
+                Mark as Failed
+              </SpinnerButton>
+          }
+
+          <Button
+            onPress={onModalClose}
+          >
+            Close
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}
+
+HistoryDetailsModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  eventType: PropTypes.string.isRequired,
+  sourceTitle: PropTypes.string.isRequired,
+  data: PropTypes.object.isRequired,
+  isMarkingAsFailed: PropTypes.bool.isRequired,
+  shortDateFormat: PropTypes.string.isRequired,
+  timeFormat: PropTypes.string.isRequired,
+  onMarkAsFailedPress: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+HistoryDetailsModal.defaultProps = {
+  isMarkingAsFailed: false
+};
+
+export default HistoryDetailsModal;

frontend/src/Activity/History/History.js

@@ -0,0 +1,150 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+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 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 HistoryRowConnector from './HistoryRowConnector';
+
+class History extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      isFetching,
+      isPopulated,
+      error,
+      isMoviesFetching,
+      isMoviesPopulated,
+      moviesError,
+      items,
+      columns,
+      selectedFilterKey,
+      filters,
+      totalRecords,
+      onFilterSelect,
+      onFirstPagePress,
+      ...otherProps
+    } = this.props;
+
+    const isFetchingAny = isFetching || isMoviesFetching;
+    const isAllPopulated = isPopulated && (isMoviesPopulated || !items.length);
+    const hasError = error || moviesError;
+
+    return (
+      <PageContent title="History">
+        <PageToolbar>
+          <PageToolbarSection>
+            <PageToolbarButton
+              label="Refresh"
+              iconName={icons.REFRESH}
+              isSpinning={isFetching}
+              onPress={onFirstPagePress}
+            />
+          </PageToolbarSection>
+
+          <PageToolbarSection alignContent={align.RIGHT}>
+            <TableOptionsModalWrapper
+              {...otherProps}
+              columns={columns}
+            >
+              <PageToolbarButton
+                label="Options"
+                iconName={icons.TABLE}
+              />
+            </TableOptionsModalWrapper>
+
+            <FilterMenu
+              alignMenu={align.RIGHT}
+              selectedFilterKey={selectedFilterKey}
+              filters={filters}
+              customFilters={[]}
+              onFilterSelect={onFilterSelect}
+            />
+          </PageToolbarSection>
+        </PageToolbar>
+
+        <PageContentBodyConnector>
+          {
+            isFetchingAny && !isAllPopulated &&
+              <LoadingIndicator />
+          }
+
+          {
+            !isFetchingAny && hasError &&
+              <div>Unable to load history</div>
+          }
+
+          {
+            // If history isPopulated and it's empty show no history found and don't
+            // wait for the episodes to populate because they are never coming.
+
+            isPopulated && !hasError && !items.length &&
+              <div>
+                No history found
+              </div>
+          }
+
+          {
+            isAllPopulated && !hasError && !!items.length &&
+              <div>
+                <Table
+                  columns={columns}
+                  {...otherProps}
+                >
+                  <TableBody>
+                    {
+                      items.map((item) => {
+                        return (
+                          <HistoryRowConnector
+                            key={item.id}
+                            columns={columns}
+                            {...item}
+                          />
+                        );
+                      })
+                    }
+                  </TableBody>
+                </Table>
+
+                <TablePager
+                  totalRecords={totalRecords}
+                  isFetching={isFetching}
+                  onFirstPagePress={onFirstPagePress}
+                  {...otherProps}
+                />
+              </div>
+          }
+        </PageContentBodyConnector>
+      </PageContent>
+    );
+  }
+}
+
+History.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  isMoviesFetching: PropTypes.bool.isRequired,
+  isMoviesPopulated: PropTypes.bool.isRequired,
+  moviesError: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  selectedFilterKey: PropTypes.string.isRequired,
+  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  totalRecords: PropTypes.number,
+  onFilterSelect: PropTypes.func.isRequired,
+  onFirstPagePress: PropTypes.func.isRequired
+};
+
+export default History;

frontend/src/Activity/History/HistoryConnector.js

@@ -0,0 +1,138 @@
+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 History from './History';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.history,
+    (state) => state.movies,
+    (history, movies) => {
+      return {
+        isMoviesFetching: movies.isFetching,
+        isMoviesPopulated: movies.isPopulated,
+        moviesError: movies.error,
+        ...history
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  ...historyActions
+};
+
+class HistoryConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    const {
+      useCurrentPage,
+      fetchHistory,
+      gotoHistoryFirstPage
+    } = this.props;
+
+    registerPagePopulator(this.repopulate);
+
+    if (useCurrentPage) {
+      fetchHistory();
+    } else {
+      gotoHistoryFirstPage();
+    }
+  }
+
+  componentWillUnmount() {
+    unregisterPagePopulator(this.repopulate);
+    this.props.clearHistory();
+  }
+
+  //
+  // Control
+
+  repopulate = () => {
+    this.props.fetchHistory();
+  }
+
+  //
+  // Listeners
+
+  onFirstPagePress = () => {
+    this.props.gotoHistoryFirstPage();
+  }
+
+  onPreviousPagePress = () => {
+    this.props.gotoHistoryPreviousPage();
+  }
+
+  onNextPagePress = () => {
+    this.props.gotoHistoryNextPage();
+  }
+
+  onLastPagePress = () => {
+    this.props.gotoHistoryLastPage();
+  }
+
+  onPageSelect = (page) => {
+    this.props.gotoHistoryPage({ page });
+  }
+
+  onSortPress = (sortKey) => {
+    this.props.setHistorySort({ sortKey });
+  }
+
+  onFilterSelect = (selectedFilterKey) => {
+    this.props.setHistoryFilter({ selectedFilterKey });
+  }
+
+  onTableOptionChange = (payload) => {
+    this.props.setHistoryTableOption(payload);
+
+    if (payload.pageSize) {
+      this.props.gotoHistoryFirstPage();
+    }
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <History
+        onFirstPagePress={this.onFirstPagePress}
+        onPreviousPagePress={this.onPreviousPagePress}
+        onNextPagePress={this.onNextPagePress}
+        onLastPagePress={this.onLastPagePress}
+        onPageSelect={this.onPageSelect}
+        onSortPress={this.onSortPress}
+        onFilterSelect={this.onFilterSelect}
+        onTableOptionChange={this.onTableOptionChange}
+        {...this.props}
+      />
+    );
+  }
+}
+
+HistoryConnector.propTypes = {
+  useCurrentPage: PropTypes.bool.isRequired,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  fetchHistory: PropTypes.func.isRequired,
+  gotoHistoryFirstPage: PropTypes.func.isRequired,
+  gotoHistoryPreviousPage: PropTypes.func.isRequired,
+  gotoHistoryNextPage: PropTypes.func.isRequired,
+  gotoHistoryLastPage: PropTypes.func.isRequired,
+  gotoHistoryPage: PropTypes.func.isRequired,
+  setHistorySort: PropTypes.func.isRequired,
+  setHistoryFilter: PropTypes.func.isRequired,
+  setHistoryTableOption: PropTypes.func.isRequired,
+  clearHistory: PropTypes.func.isRequired
+};
+
+export default withCurrentPage(
+  connect(createMapStateToProps, mapDispatchToProps)(HistoryConnector)
+);

frontend/src/Activity/History/HistoryEventTypeCell.css

@@ -0,0 +1,6 @@
+.cell {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 35px;
+  text-align: center;
+}

frontend/src/Activity/History/HistoryEventTypeCell.js

@@ -0,0 +1,86 @@
+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 styles from './HistoryEventTypeCell.css';
+
+function getIconName(eventType) {
+  switch (eventType) {
+    case 'grabbed':
+      return icons.DOWNLOADING;
+    case 'movieFolderImported':
+      return icons.DRIVE;
+    case 'downloadFolderImported':
+      return icons.DOWNLOADED;
+    case 'downloadFailed':
+      return icons.DOWNLOADING;
+    case 'movieFileDeleted':
+      return icons.DELETE;
+    case 'movieFileRenamed':
+      return icons.ORGANIZE;
+    case 'downloadIgnored':
+      return icons.IGNORE;
+    default:
+      return icons.UNKNOWN;
+  }
+}
+
+function getIconKind(eventType) {
+  switch (eventType) {
+    case 'downloadFailed':
+      return kinds.DANGER;
+    default:
+      return kinds.DEFAULT;
+  }
+}
+
+function getTooltip(eventType, data) {
+  switch (eventType) {
+    case 'grabbed':
+      return `Movie grabbed from ${data.indexer} and sent to ${data.downloadClient}`;
+    case 'movieFolderImported':
+      return 'Movie imported from movie folder';
+    case 'downloadFolderImported':
+      return 'Movie downloaded successfully and picked up from download client';
+    case 'downloadFailed':
+      return 'Movie download failed';
+    case 'movieFileDeleted':
+      return 'Movie file deleted';
+    case 'movieFileRenamed':
+      return 'Movie file renamed';
+    case 'downloadIgnored':
+      return 'Movie Download Ignored';
+    default:
+      return 'Unknown event';
+  }
+}
+
+function HistoryEventTypeCell({ eventType, data }) {
+  const iconName = getIconName(eventType);
+  const iconKind = getIconKind(eventType);
+  const tooltip = getTooltip(eventType, data);
+
+  return (
+    <TableRowCell
+      className={styles.cell}
+      title={tooltip}
+    >
+      <Icon
+        name={iconName}
+        kind={iconKind}
+      />
+    </TableRowCell>
+  );
+}
+
+HistoryEventTypeCell.propTypes = {
+  eventType: PropTypes.string.isRequired,
+  data: PropTypes.object
+};
+
+HistoryEventTypeCell.defaultProps = {
+  data: {}
+};
+
+export default HistoryEventTypeCell;

frontend/src/Activity/History/HistoryRow.css

@@ -0,0 +1,23 @@
+.downloadClient {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 120px;
+}
+
+.indexer {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 80px;
+}
+
+.releaseGroup {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 110px;
+}
+
+.details {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 30px;
+}

frontend/src/Activity/History/HistoryRow.js

@@ -0,0 +1,236 @@
+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 MovieFormats from 'Movie/MovieFormats';
+import MovieLanguage from 'Movie/MovieLanguage';
+import MovieTitleLink from 'Movie/MovieTitleLink';
+import HistoryEventTypeCell from './HistoryEventTypeCell';
+import HistoryDetailsModal from './Details/HistoryDetailsModal';
+import styles from './HistoryRow.css';
+
+class HistoryRow extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isDetailsModalOpen: false
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    if (
+      prevProps.isMarkingAsFailed &&
+      !this.props.isMarkingAsFailed &&
+      !this.props.markAsFailedError
+    ) {
+      this.setState({ isDetailsModalOpen: false });
+    }
+  }
+
+  //
+  // Listeners
+
+  onDetailsPress = () => {
+    this.setState({ isDetailsModalOpen: true });
+  }
+
+  onDetailsModalClose = () => {
+    this.setState({ isDetailsModalOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      movie,
+      quality,
+      customFormats,
+      languages,
+      qualityCutoffNotMet,
+      eventType,
+      sourceTitle,
+      date,
+      data,
+      isMarkingAsFailed,
+      columns,
+      shortDateFormat,
+      timeFormat,
+      onMarkAsFailedPress
+    } = this.props;
+
+    if (!movie) {
+      return null;
+    }
+
+    return (
+      <TableRow>
+        {
+          columns.map((column) => {
+            const {
+              name,
+              isVisible
+            } = column;
+
+            if (!isVisible) {
+              return null;
+            }
+
+            if (name === 'eventType') {
+              return (
+                <HistoryEventTypeCell
+                  key={name}
+                  eventType={eventType}
+                  data={data}
+                />
+              );
+            }
+
+            if (name === 'movies.sortTitle') {
+              return (
+                <TableRowCell key={name}>
+                  <MovieTitleLink
+                    titleSlug={movie.titleSlug}
+                    title={movie.title}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'languages') {
+              return (
+                <TableRowCell key={name}>
+                  <MovieLanguage
+                    languages={languages}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'quality') {
+              return (
+                <TableRowCell key={name}>
+                  <MovieQuality
+                    quality={quality}
+                    isCutoffMet={qualityCutoffNotMet}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'customFormats') {
+              return (
+                <TableRowCell key={name}>
+                  <MovieFormats
+                    formats={customFormats}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'date') {
+              return (
+                <RelativeDateCellConnector
+                  key={name}
+                  date={date}
+                />
+              );
+            }
+
+            if (name === 'downloadClient') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.downloadClient}
+                >
+                  {data.downloadClient}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'indexer') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.indexer}
+                >
+                  {data.indexer}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'releaseGroup') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.releaseGroup}
+                >
+                  {data.releaseGroup}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'details') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.details}
+                >
+                  <IconButton
+                    name={icons.INFO}
+                    onPress={this.onDetailsPress}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            return null;
+          })
+        }
+
+        <HistoryDetailsModal
+          isOpen={this.state.isDetailsModalOpen}
+          eventType={eventType}
+          sourceTitle={sourceTitle}
+          data={data}
+          isMarkingAsFailed={isMarkingAsFailed}
+          shortDateFormat={shortDateFormat}
+          timeFormat={timeFormat}
+          onMarkAsFailedPress={onMarkAsFailedPress}
+          onModalClose={this.onDetailsModalClose}
+        />
+      </TableRow>
+    );
+  }
+
+}
+
+HistoryRow.propTypes = {
+  movieId: PropTypes.number,
+  movie: PropTypes.object.isRequired,
+  languages: PropTypes.arrayOf(PropTypes.object).isRequired,
+  quality: PropTypes.object.isRequired,
+  qualityCutoffNotMet: PropTypes.bool.isRequired,
+  customFormats: PropTypes.arrayOf(PropTypes.object).isRequired,
+  eventType: PropTypes.string.isRequired,
+  sourceTitle: PropTypes.string.isRequired,
+  date: PropTypes.string.isRequired,
+  data: PropTypes.object.isRequired,
+  isMarkingAsFailed: PropTypes.bool,
+  markAsFailedError: PropTypes.object,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  shortDateFormat: PropTypes.string.isRequired,
+  timeFormat: PropTypes.string.isRequired,
+  onMarkAsFailedPress: PropTypes.func.isRequired
+};
+
+export default HistoryRow;

frontend/src/Activity/History/HistoryRowConnector.js

@@ -0,0 +1,73 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { fetchHistory, markAsFailed } from 'Store/Actions/historyActions';
+import createMovieSelector from 'Store/Selectors/createMovieSelector';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import HistoryRow from './HistoryRow';
+
+function createMapStateToProps() {
+  return createSelector(
+    createMovieSelector(),
+    createUISettingsSelector(),
+    (movie, uiSettings) => {
+      return {
+        movie,
+        shortDateFormat: uiSettings.shortDateFormat,
+        timeFormat: uiSettings.timeFormat
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  fetchHistory,
+  markAsFailed
+};
+
+class HistoryRowConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidUpdate(prevProps) {
+    if (
+      prevProps.isMarkingAsFailed &&
+      !this.props.isMarkingAsFailed &&
+      !this.props.markAsFailedError
+    ) {
+      this.props.fetchHistory();
+    }
+  }
+
+  //
+  // Listeners
+
+  onMarkAsFailedPress = () => {
+    this.props.markAsFailed({ id: this.props.id });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <HistoryRow
+        {...this.props}
+        onMarkAsFailedPress={this.onMarkAsFailedPress}
+      />
+    );
+  }
+
+}
+
+HistoryRowConnector.propTypes = {
+  id: PropTypes.number.isRequired,
+  isMarkingAsFailed: PropTypes.bool,
+  markAsFailedError: PropTypes.object,
+  fetchHistory: PropTypes.func.isRequired,
+  markAsFailed: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(HistoryRowConnector);

frontend/src/Activity/Queue/ProtocolLabel.css

@@ -0,0 +1,13 @@
+.torrent {
+  composes: label from '~Components/Label.css';
+
+  border-color: $torrentColor;
+  background-color: $torrentColor;
+}
+
+.usenet {
+  composes: label from '~Components/Label.css';
+
+  border-color: $usenetColor;
+  background-color: $usenetColor;
+}

frontend/src/Activity/Queue/ProtocolLabel.js

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Label from 'Components/Label';
+import styles from './ProtocolLabel.css';
+
+function ProtocolLabel({ protocol }) {
+  const protocolName = protocol === 'usenet' ? 'nzb' : protocol;
+
+  return (
+    <Label className={styles[protocol]}>
+      {protocolName}
+    </Label>
+  );
+}
+
+ProtocolLabel.propTypes = {
+  protocol: PropTypes.string.isRequired
+};
+
+export default ProtocolLabel;

frontend/src/Activity/Queue/Queue.js

@@ -0,0 +1,291 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import getRemovedItems from 'Utilities/Object/getRemovedItems';
+import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
+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';
+
+class Queue extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      allSelected: false,
+      allUnselected: false,
+      lastToggled: null,
+      selectedState: {},
+      isPendingSelected: false,
+      isConfirmRemoveModalOpen: false,
+      items: props.items
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      items,
+      isFetching,
+      isMoviesFetching
+    } = this.props;
+
+    if (
+      (!isMoviesFetching && prevProps.isMoviesFetching) ||
+      (!isFetching && prevProps.isFetching) ||
+      (hasDifferentItems(prevProps.items, items) && !items.some((e) => e.movieId))
+    ) {
+      this.setState((state) => {
+        return {
+          ...removeOldSelectedState(state, getRemovedItems(prevProps.items, items)),
+          items
+        };
+      });
+
+      return;
+    }
+
+    const selectedIds = this.getSelectedIds();
+    const isPendingSelected = _.some(this.props.items, (item) => {
+      return selectedIds.indexOf(item.id) > -1 && item.status === 'delay';
+    });
+
+    if (isPendingSelected !== this.state.isPendingSelected) {
+      this.setState({ isPendingSelected });
+    }
+  }
+
+  //
+  // Control
+
+  getSelectedIds = () => {
+    return getSelectedIds(this.state.selectedState);
+  }
+
+  //
+  // Listeners
+
+  onSelectAllChange = ({ value }) => {
+    this.setState(selectAll(this.state.selectedState, value));
+  }
+
+  onSelectedChange = ({ id, value, shiftKey = false }) => {
+    this.setState((state) => {
+      return toggleSelected(state, this.props.items, id, value, shiftKey);
+    });
+  }
+
+  onGrabSelectedPress = () => {
+    this.props.onGrabSelectedPress(this.getSelectedIds());
+  }
+
+  onRemoveSelectedPress = () => {
+    this.setState({ isConfirmRemoveModalOpen: true });
+  }
+
+  onRemoveSelectedConfirmed = (payload) => {
+    this.props.onRemoveSelectedPress({ ids: this.getSelectedIds(), ...payload });
+    this.setState({ isConfirmRemoveModalOpen: false });
+  }
+
+  onConfirmRemoveModalClose = () => {
+    this.setState({ isConfirmRemoveModalOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      isFetching,
+      isPopulated,
+      error,
+      isMoviesFetching,
+      isMoviesPopulated,
+      moviesError,
+      columns,
+      totalRecords,
+      isGrabbing,
+      isRemoving,
+      isRefreshMonitoredDownloadsExecuting,
+      onRefreshPress,
+      ...otherProps
+    } = this.props;
+
+    const {
+      allSelected,
+      allUnselected,
+      selectedState,
+      isConfirmRemoveModalOpen,
+      isPendingSelected,
+      items
+    } = this.state;
+
+    const isRefreshing = isFetching || isMoviesFetching || isRefreshMonitoredDownloadsExecuting;
+    const isAllPopulated = isPopulated && (isMoviesPopulated || !items.length || items.every((e) => !e.movieId));
+    const hasError = error || moviesError;
+    const selectedIds = this.getSelectedIds();
+    const selectedCount = selectedIds.length;
+    const disableSelectedActions = selectedCount === 0;
+
+    return (
+      <PageContent title="Queue">
+        <PageToolbar>
+          <PageToolbarSection>
+            <PageToolbarButton
+              label="Refresh"
+              iconName={icons.REFRESH}
+              isSpinning={isRefreshing}
+              onPress={onRefreshPress}
+            />
+
+            <PageToolbarSeparator />
+
+            <PageToolbarButton
+              label="Grab Selected"
+              iconName={icons.DOWNLOAD}
+              isDisabled={disableSelectedActions || !isPendingSelected}
+              isSpinning={isGrabbing}
+              onPress={this.onGrabSelectedPress}
+            />
+
+            <PageToolbarButton
+              label="Remove Selected"
+              iconName={icons.REMOVE}
+              isDisabled={disableSelectedActions}
+              isSpinning={isRemoving}
+              onPress={this.onRemoveSelectedPress}
+            />
+          </PageToolbarSection>
+
+          <PageToolbarSection
+            alignContent={align.RIGHT}
+          >
+            <TableOptionsModalWrapper
+              columns={columns}
+              {...otherProps}
+              optionsComponent={QueueOptionsConnector}
+            >
+              <PageToolbarButton
+                label="Options"
+                iconName={icons.TABLE}
+              />
+            </TableOptionsModalWrapper>
+          </PageToolbarSection>
+        </PageToolbar>
+
+        <PageContentBodyConnector>
+          {
+            isRefreshing && !isAllPopulated &&
+              <LoadingIndicator />
+          }
+
+          {
+            !isRefreshing && hasError &&
+              <div>
+                Failed to load Queue
+              </div>
+          }
+
+          {
+            isPopulated && !hasError && !items.length &&
+              <div>
+                Queue is empty
+              </div>
+          }
+
+          {
+            isAllPopulated && !hasError && !!items.length &&
+              <div>
+                <Table
+                  columns={columns}
+                  selectAll={true}
+                  allSelected={allSelected}
+                  allUnselected={allUnselected}
+                  {...otherProps}
+                  optionsComponent={QueueOptionsConnector}
+                  onSelectAllChange={this.onSelectAllChange}
+                >
+                  <TableBody>
+                    {
+                      items.map((item) => {
+                        return (
+                          <QueueRowConnector
+                            key={item.id}
+                            movieId={item.movieId}
+                            isSelected={selectedState[item.id]}
+                            columns={columns}
+                            {...item}
+                            onSelectedChange={this.onSelectedChange}
+                          />
+                        );
+                      })
+                    }
+                  </TableBody>
+                </Table>
+
+                <TablePager
+                  totalRecords={totalRecords}
+                  isFetching={isRefreshing}
+                  {...otherProps}
+                />
+              </div>
+          }
+        </PageContentBodyConnector>
+
+        <RemoveQueueItemsModal
+          isOpen={isConfirmRemoveModalOpen}
+          selectedCount={selectedCount}
+          canIgnore={isConfirmRemoveModalOpen && (
+            selectedIds.every((id) => {
+              const item = items.find((i) => i.id === id);
+
+              return !!(item && item.movieId);
+            })
+          )}
+          onRemovePress={this.onRemoveSelectedConfirmed}
+          onModalClose={this.onConfirmRemoveModalClose}
+        />
+      </PageContent>
+    );
+  }
+}
+
+Queue.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  isMoviesFetching: PropTypes.bool.isRequired,
+  isMoviesPopulated: PropTypes.bool.isRequired,
+  moviesError: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  totalRecords: PropTypes.number,
+  isGrabbing: PropTypes.bool.isRequired,
+  isRemoving: PropTypes.bool.isRequired,
+  isRefreshMonitoredDownloadsExecuting: PropTypes.bool.isRequired,
+  onRefreshPress: PropTypes.func.isRequired,
+  onGrabSelectedPress: PropTypes.func.isRequired,
+  onRemoveSelectedPress: PropTypes.func.isRequired
+};
+
+export default Queue;

frontend/src/Activity/Queue/QueueConnector.js

@@ -0,0 +1,170 @@
+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 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 Queue from './Queue';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.movies,
+    (state) => state.queue.options,
+    (state) => state.queue.paged,
+    createCommandExecutingSelector(commandNames.REFRESH_MONITORED_DOWNLOADS),
+    (movies, options, queue, isRefreshMonitoredDownloadsExecuting) => {
+      return {
+        isMoviesFetching: movies.isFetching,
+        isMoviesPopulated: movies.isPopulated,
+        moviesError: movies.error,
+        isRefreshMonitoredDownloadsExecuting,
+        ...options,
+        ...queue
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  ...queueActions,
+  executeCommand
+};
+
+class QueueConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    const {
+      useCurrentPage,
+      fetchQueue,
+      gotoQueueFirstPage
+    } = this.props;
+
+    registerPagePopulator(this.repopulate);
+
+    if (useCurrentPage) {
+      fetchQueue();
+    } else {
+      gotoQueueFirstPage();
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (
+      this.props.includeUnknownMovieItems !==
+      prevProps.includeUnknownMovieItems
+    ) {
+      this.repopulate();
+    }
+  }
+
+  componentWillUnmount() {
+    unregisterPagePopulator(this.repopulate);
+    this.props.clearQueue();
+  }
+
+  //
+  // Control
+
+  repopulate = () => {
+    this.props.fetchQueue();
+  }
+
+  //
+  // Listeners
+
+  onFirstPagePress = () => {
+    this.props.gotoQueueFirstPage();
+  }
+
+  onPreviousPagePress = () => {
+    this.props.gotoQueuePreviousPage();
+  }
+
+  onNextPagePress = () => {
+    this.props.gotoQueueNextPage();
+  }
+
+  onLastPagePress = () => {
+    this.props.gotoQueueLastPage();
+  }
+
+  onPageSelect = (page) => {
+    this.props.gotoQueuePage({ page });
+  }
+
+  onSortPress = (sortKey) => {
+    this.props.setQueueSort({ sortKey });
+  }
+
+  onTableOptionChange = (payload) => {
+    this.props.setQueueTableOption(payload);
+
+    if (payload.pageSize) {
+      this.props.gotoQueueFirstPage();
+    }
+  }
+
+  onRefreshPress = () => {
+    this.props.executeCommand({
+      name: commandNames.REFRESH_MONITORED_DOWNLOADS
+    });
+  }
+
+  onGrabSelectedPress = (ids) => {
+    this.props.grabQueueItems({ ids });
+  }
+
+  onRemoveSelectedPress = (payload) => {
+    this.props.removeQueueItems(payload);
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <Queue
+        onFirstPagePress={this.onFirstPagePress}
+        onPreviousPagePress={this.onPreviousPagePress}
+        onNextPagePress={this.onNextPagePress}
+        onLastPagePress={this.onLastPagePress}
+        onPageSelect={this.onPageSelect}
+        onSortPress={this.onSortPress}
+        onTableOptionChange={this.onTableOptionChange}
+        onRefreshPress={this.onRefreshPress}
+        onGrabSelectedPress={this.onGrabSelectedPress}
+        onRemoveSelectedPress={this.onRemoveSelectedPress}
+        {...this.props}
+      />
+    );
+  }
+}
+
+QueueConnector.propTypes = {
+  includeUnknownMovieItems: PropTypes.bool.isRequired,
+  useCurrentPage: PropTypes.bool.isRequired,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  fetchQueue: PropTypes.func.isRequired,
+  gotoQueueFirstPage: PropTypes.func.isRequired,
+  gotoQueuePreviousPage: PropTypes.func.isRequired,
+  gotoQueueNextPage: PropTypes.func.isRequired,
+  gotoQueueLastPage: PropTypes.func.isRequired,
+  gotoQueuePage: PropTypes.func.isRequired,
+  setQueueSort: PropTypes.func.isRequired,
+  setQueueTableOption: PropTypes.func.isRequired,
+  clearQueue: PropTypes.func.isRequired,
+  grabQueueItems: PropTypes.func.isRequired,
+  removeQueueItems: PropTypes.func.isRequired,
+  executeCommand: PropTypes.func.isRequired
+};
+
+export default withCurrentPage(
+  connect(createMapStateToProps, mapDispatchToProps)(QueueConnector)
+);

frontend/src/Activity/Queue/QueueDetails.js

@@ -0,0 +1,97 @@
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { icons, kinds } from 'Helpers/Props';
+import Icon from 'Components/Icon';
+
+function QueueDetails(props) {
+  const {
+    title,
+    size,
+    sizeleft,
+    estimatedCompletionTime,
+    status: queueStatus,
+    errorMessage,
+    progressBar
+  } = props;
+
+  const status = queueStatus.toLowerCase();
+
+  const progress = (100 - sizeleft / size * 100);
+
+  if (status === 'pending') {
+    return (
+      <Icon
+        name={icons.PENDING}
+        title={`Release will be processed ${moment(estimatedCompletionTime).fromNow()}`}
+      />
+    );
+  }
+
+  if (status === 'completed') {
+    if (errorMessage) {
+      return (
+        <Icon
+          name={icons.DOWNLOAD}
+          kind={kinds.DANGER}
+          title={`Import failed: ${errorMessage}`}
+        />
+      );
+    }
+
+    // TODO: show an icon when download is complete, but not imported yet?
+  }
+
+  if (errorMessage) {
+    return (
+      <Icon
+        name={icons.DOWNLOADING}
+        kind={kinds.DANGER}
+        title={`Download failed: ${errorMessage}`}
+      />
+    );
+  }
+
+  if (status === 'failed') {
+    return (
+      <Icon
+        name={icons.DOWNLOADING}
+        kind={kinds.DANGER}
+        title="Download failed: check download client for more details"
+      />
+    );
+  }
+
+  if (status === 'warning') {
+    return (
+      <Icon
+        name={icons.DOWNLOADING}
+        kind={kinds.WARNING}
+        title="Download warning: check download client for more details"
+      />
+    );
+  }
+
+  if (progress < 5) {
+    return (
+      <Icon
+        name={icons.DOWNLOADING}
+        title={`Movie is downloading - ${progress.toFixed(1)}% ${title}`}
+      />
+    );
+  }
+
+  return progressBar;
+}
+
+QueueDetails.propTypes = {
+  title: PropTypes.string.isRequired,
+  size: PropTypes.number.isRequired,
+  sizeleft: PropTypes.number.isRequired,
+  estimatedCompletionTime: PropTypes.string,
+  status: PropTypes.string.isRequired,
+  errorMessage: PropTypes.string,
+  progressBar: PropTypes.node.isRequired
+};
+
+export default QueueDetails;

frontend/src/Activity/Queue/QueueOptions.js

@@ -0,0 +1,77 @@
+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';
+
+class QueueOptions extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      includeUnknownMovieItems: props.includeUnknownMovieItems
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      includeUnknownMovieItems
+    } = this.props;
+
+    if (includeUnknownMovieItems !== prevProps.includeUnknownMovieItems) {
+      this.setState({
+        includeUnknownMovieItems
+      });
+    }
+  }
+
+  //
+  // Listeners
+
+  onOptionChange = ({ name, value }) => {
+    this.setState({
+      [name]: value
+    }, () => {
+      this.props.onOptionChange({
+        [name]: value
+      });
+    });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      includeUnknownMovieItems
+    } = this.state;
+
+    return (
+      <Fragment>
+        <FormGroup>
+          <FormLabel>Show Unknown Movie Items</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"
+            onChange={this.onOptionChange}
+          />
+        </FormGroup>
+      </Fragment>
+    );
+  }
+}
+
+QueueOptions.propTypes = {
+  includeUnknownMovieItems: PropTypes.bool.isRequired,
+  onOptionChange: PropTypes.func.isRequired
+};
+
+export default QueueOptions;

frontend/src/Activity/Queue/QueueOptionsConnector.js

@@ -0,0 +1,19 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { setQueueOption } from 'Store/Actions/queueActions';
+import QueueOptions from './QueueOptions';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.queue.options,
+    (options) => {
+      return options;
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  onOptionChange: setQueueOption
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(QueueOptions);

frontend/src/Activity/Queue/QueueRow.css

@@ -0,0 +1,23 @@
+.quality {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 150px;
+}
+
+.protocol {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 100px;
+}
+
+.progress {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 150px;
+}
+
+.actions {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 70px;
+}

frontend/src/Activity/Queue/QueueRow.js

@@ -0,0 +1,369 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import formatBytes from 'Utilities/Number/formatBytes';
+import { icons, kinds } from 'Helpers/Props';
+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 MovieFormats from 'Movie/MovieFormats';
+import MovieLanguage from 'Movie/MovieLanguage';
+import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
+import MovieTitleLink from 'Movie/MovieTitleLink';
+import QueueStatusCell from './QueueStatusCell';
+import TimeleftCell from './TimeleftCell';
+import RemoveQueueItemModal from './RemoveQueueItemModal';
+import styles from './QueueRow.css';
+
+class QueueRow extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isRemoveQueueItemModalOpen: false,
+      isInteractiveImportModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onRemoveQueueItemPress = () => {
+    this.setState({ isRemoveQueueItemModalOpen: true });
+  }
+
+  onRemoveQueueItemModalConfirmed = (blacklist) => {
+    this.props.onRemoveQueueItemPress(blacklist);
+    this.setState({ isRemoveQueueItemModalOpen: false });
+  }
+
+  onRemoveQueueItemModalClose = () => {
+    this.setState({ isRemoveQueueItemModalOpen: false });
+  }
+
+  onInteractiveImportPress = () => {
+    this.setState({ isInteractiveImportModalOpen: true });
+  }
+
+  onInteractiveImportModalClose = () => {
+    this.setState({ isInteractiveImportModalOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      id,
+      downloadId,
+      title,
+      status,
+      trackedDownloadStatus,
+      trackedDownloadState,
+      statusMessages,
+      errorMessage,
+      movie,
+      quality,
+      customFormats,
+      languages,
+      protocol,
+      indexer,
+      outputPath,
+      downloadClient,
+      estimatedCompletionTime,
+      timeleft,
+      size,
+      sizeleft,
+      showRelativeDates,
+      shortDateFormat,
+      timeFormat,
+      isGrabbing,
+      grabError,
+      isRemoving,
+      isSelected,
+      columns,
+      onSelectedChange,
+      onGrabPress
+    } = this.props;
+
+    const {
+      isRemoveQueueItemModalOpen,
+      isInteractiveImportModalOpen
+    } = this.state;
+
+    const progress = 100 - (sizeleft / size * 100);
+    const showInteractiveImport = status === 'completed' && trackedDownloadStatus === 'warning';
+    const isPending = status === 'delay' || status === 'downloadClientUnavailable';
+
+    return (
+      <TableRow>
+        <TableSelectCell
+          id={id}
+          isSelected={isSelected}
+          onSelectedChange={onSelectedChange}
+        />
+
+        {
+          columns.map((column) => {
+            const {
+              name,
+              isVisible
+            } = column;
+
+            if (!isVisible) {
+              return null;
+            }
+
+            if (name === 'status') {
+              return (
+                <QueueStatusCell
+                  key={name}
+                  sourceTitle={title}
+                  status={status}
+                  trackedDownloadStatus={trackedDownloadStatus}
+                  trackedDownloadState={trackedDownloadState}
+                  statusMessages={statusMessages}
+                  errorMessage={errorMessage}
+                />
+              );
+            }
+
+            if (name === 'movies.sortTitle') {
+              return (
+                <TableRowCell key={name}>
+                  {
+                    movie ?
+                      <MovieTitleLink
+                        titleSlug={movie.titleSlug}
+                        title={movie.title}
+                      /> :
+                      title
+                  }
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'languages') {
+              return (
+                <TableRowCell key={name}>
+                  <MovieLanguage
+                    languages={languages}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'quality') {
+              return (
+                <TableRowCell key={name}>
+                  {
+                    quality ?
+                      <MovieQuality
+                        quality={quality}
+                      /> :
+                      null
+                  }
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'customFormats') {
+              return (
+                <TableRowCell key={name}>
+                  <MovieFormats
+                    formats={customFormats}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'protocol') {
+              return (
+                <TableRowCell key={name}>
+                  <ProtocolLabel
+                    protocol={protocol}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'indexer') {
+              return (
+                <TableRowCell key={name}>
+                  {indexer}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'downloadClient') {
+              return (
+                <TableRowCell key={name}>
+                  {downloadClient}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'size') {
+              return (
+                <TableRowCell key={name}>
+                  {formatBytes(size)}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'title') {
+              return (
+                <TableRowCell key={name}>
+                  {title}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'outputPath') {
+              return (
+                <TableRowCell key={name}>
+                  {outputPath}
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'estimatedCompletionTime') {
+              return (
+                <TimeleftCell
+                  key={name}
+                  status={status}
+                  estimatedCompletionTime={estimatedCompletionTime}
+                  timeleft={timeleft}
+                  size={size}
+                  sizeleft={sizeleft}
+                  showRelativeDates={showRelativeDates}
+                  shortDateFormat={shortDateFormat}
+                  timeFormat={timeFormat}
+                />
+              );
+            }
+
+            if (name === 'progress') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.progress}
+                >
+                  {
+                    !!progress &&
+                      <ProgressBar
+                        progress={progress}
+                        title={`${progress.toFixed(1)}%`}
+                      />
+                  }
+                </TableRowCell>
+              );
+            }
+
+            if (name === 'actions') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.actions}
+                >
+                  {
+                    showInteractiveImport &&
+                      <IconButton
+                        name={icons.INTERACTIVE}
+                        onPress={this.onInteractiveImportPress}
+                      />
+                  }
+
+                  {
+                    isPending &&
+                      <SpinnerIconButton
+                        name={icons.DOWNLOAD}
+                        kind={grabError ? kinds.DANGER : kinds.DEFAULT}
+                        isSpinning={isGrabbing}
+                        onPress={onGrabPress}
+                      />
+                  }
+
+                  <SpinnerIconButton
+                    title="Remove from queue"
+                    name={icons.REMOVE}
+                    isSpinning={isRemoving}
+                    onPress={this.onRemoveQueueItemPress}
+                  />
+                </TableRowCell>
+              );
+            }
+
+            return null;
+          })
+        }
+
+        <InteractiveImportModal
+          isOpen={isInteractiveImportModalOpen}
+          downloadId={downloadId}
+          title={title}
+          onModalClose={this.onInteractiveImportModalClose}
+        />
+
+        <RemoveQueueItemModal
+          isOpen={isRemoveQueueItemModalOpen}
+          sourceTitle={title}
+          canIgnore={!!movie}
+          onRemovePress={this.onRemoveQueueItemModalConfirmed}
+          onModalClose={this.onRemoveQueueItemModalClose}
+        />
+      </TableRow>
+    );
+  }
+
+}
+
+QueueRow.propTypes = {
+  id: PropTypes.number.isRequired,
+  downloadId: PropTypes.string,
+  title: PropTypes.string.isRequired,
+  status: PropTypes.string.isRequired,
+  trackedDownloadStatus: PropTypes.string,
+  trackedDownloadState: PropTypes.string,
+  statusMessages: PropTypes.arrayOf(PropTypes.object),
+  errorMessage: PropTypes.string,
+  movie: PropTypes.object,
+  quality: PropTypes.object.isRequired,
+  customFormats: PropTypes.arrayOf(PropTypes.object),
+  languages: PropTypes.arrayOf(PropTypes.object).isRequired,
+  protocol: PropTypes.string.isRequired,
+  indexer: PropTypes.string,
+  outputPath: PropTypes.string,
+  downloadClient: PropTypes.string,
+  estimatedCompletionTime: PropTypes.string,
+  timeleft: PropTypes.string,
+  size: PropTypes.number,
+  sizeleft: PropTypes.number,
+  showRelativeDates: PropTypes.bool.isRequired,
+  shortDateFormat: PropTypes.string.isRequired,
+  timeFormat: PropTypes.string.isRequired,
+  isGrabbing: PropTypes.bool.isRequired,
+  grabError: PropTypes.object,
+  isRemoving: PropTypes.bool.isRequired,
+  isSelected: PropTypes.bool,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onSelectedChange: PropTypes.func.isRequired,
+  onGrabPress: PropTypes.func.isRequired,
+  onRemoveQueueItemPress: PropTypes.func.isRequired
+};
+
+QueueRow.defaultProps = {
+  isGrabbing: false,
+  isRemoving: false
+};
+
+export default QueueRow;

frontend/src/Activity/Queue/QueueRowConnector.js

@@ -0,0 +1,67 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { grabQueueItem, removeQueueItem } from 'Store/Actions/queueActions';
+import createMovieSelector from 'Store/Selectors/createMovieSelector';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import QueueRow from './QueueRow';
+
+function createMapStateToProps() {
+  return createSelector(
+    createMovieSelector(),
+    createUISettingsSelector(),
+    (movie, uiSettings) => {
+      const result = {
+        showRelativeDates: uiSettings.showRelativeDates,
+        shortDateFormat: uiSettings.shortDateFormat,
+        timeFormat: uiSettings.timeFormat
+      };
+
+      result.movie = movie;
+
+      return result;
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  grabQueueItem,
+  removeQueueItem
+};
+
+class QueueRowConnector extends Component {
+
+  //
+  // Listeners
+
+  onGrabPress = () => {
+    this.props.grabQueueItem({ id: this.props.id });
+  }
+
+  onRemoveQueueItemPress = (payload) => {
+    this.props.removeQueueItem({ id: this.props.id, ...payload });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <QueueRow
+        {...this.props}
+        onGrabPress={this.onGrabPress}
+        onRemoveQueueItemPress={this.onRemoveQueueItemPress}
+      />
+    );
+  }
+}
+
+QueueRowConnector.propTypes = {
+  id: PropTypes.number.isRequired,
+  movie: PropTypes.object,
+  grabQueueItem: PropTypes.func.isRequired,
+  removeQueueItem: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(QueueRowConnector);

frontend/src/Activity/Queue/QueueStatusCell.css

@@ -0,0 +1,5 @@
+.status {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 30px;
+}

frontend/src/Activity/Queue/QueueStatusCell.js

@@ -0,0 +1,152 @@
+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 styles from './QueueStatusCell.css';
+
+function getDetailedPopoverBody(statusMessages) {
+  return (
+    <div>
+      {
+        statusMessages.map(({ title, messages }) => {
+          return (
+            <div key={title}>
+              {title}
+              <ul>
+                {
+                  messages.map((message) => {
+                    return (
+                      <li key={message}>
+                        {message}
+                      </li>
+                    );
+                  })
+                }
+              </ul>
+            </div>
+          );
+        })
+      }
+    </div>
+  );
+}
+
+function QueueStatusCell(props) {
+  const {
+    sourceTitle,
+    status,
+    trackedDownloadStatus,
+    trackedDownloadState,
+    statusMessages,
+    errorMessage
+  } = props;
+
+  const hasWarning = trackedDownloadStatus === 'warning';
+  const hasError = trackedDownloadStatus === 'error';
+
+  // status === 'downloading'
+  let iconName = icons.DOWNLOADING;
+  let iconKind = kinds.DEFAULT;
+  let title = 'Downloading';
+
+  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';
+  }
+
+  if (status === 'DownloadClientUnavailable') {
+    iconName = icons.PENDING;
+    iconKind = kinds.WARNING;
+    title = 'Pending - Download client is unavailable';
+  }
+
+  if (status === 'failed') {
+    iconName = icons.DOWNLOADING;
+    iconKind = kinds.DANGER;
+    title = 'Download failed';
+  }
+
+  if (status === 'warning') {
+    iconName = icons.DOWNLOADING;
+    iconKind = kinds.WARNING;
+    title = `Download warning: ${errorMessage || 'check download client for more details'}`;
+  }
+
+  if (hasError) {
+    if (status === 'completed') {
+      iconName = icons.DOWNLOAD;
+      iconKind = kinds.DANGER;
+      title = `Import failed: ${sourceTitle}`;
+    } else {
+      iconName = icons.DOWNLOADING;
+      iconKind = kinds.DANGER;
+      title = 'Download failed';
+    }
+  }
+
+  return (
+    <TableRowCell className={styles.status}>
+      <Popover
+        anchor={
+          <Icon
+            name={iconName}
+            kind={iconKind}
+          />
+        }
+        title={title}
+        body={hasWarning || hasError ? getDetailedPopoverBody(statusMessages) : sourceTitle}
+        position={tooltipPositions.RIGHT}
+        canFlip={false}
+      />
+    </TableRowCell>
+  );
+}
+
+QueueStatusCell.propTypes = {
+  sourceTitle: PropTypes.string.isRequired,
+  status: PropTypes.string.isRequired,
+  trackedDownloadStatus: PropTypes.string.isRequired,
+  trackedDownloadState: PropTypes.string.isRequired,
+  statusMessages: PropTypes.arrayOf(PropTypes.object),
+  errorMessage: PropTypes.string
+};
+
+QueueStatusCell.defaultProps = {
+  trackedDownloadStatus: 'Ok',
+  trackedDownloadState: 'Downloading'
+};
+
+export default QueueStatusCell;

frontend/src/Activity/Queue/RemoveQueueItemModal.js

@@ -0,0 +1,143 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { inputTypes, kinds, sizes } from 'Helpers/Props';
+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 ModalFooter from 'Components/Modal/ModalFooter';
+
+class RemoveQueueItemModal extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      remove: true,
+      blacklist: false
+    };
+  }
+
+  //
+  // Control
+
+  resetState = function() {
+    this.setState({
+      remove: true,
+      blacklist: false
+    });
+  }
+
+  //
+  // Listeners
+
+  onRemoveChange = ({ value }) => {
+    this.setState({ remove: value });
+  }
+
+  onBlacklistChange = ({ value }) => {
+    this.setState({ blacklist: value });
+  }
+
+  onRemoveConfirmed = () => {
+    const state = this.state;
+
+    this.resetState();
+    this.props.onRemovePress(state);
+  }
+
+  onModalClose = () => {
+    this.resetState();
+    this.props.onModalClose();
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      isOpen,
+      sourceTitle,
+      canIgnore
+    } = this.props;
+
+    const { remove, blacklist } = this.state;
+
+    return (
+      <Modal
+        isOpen={isOpen}
+        size={sizes.MEDIUM}
+        onModalClose={this.onModalClose}
+      >
+        <ModalContent
+          onModalClose={this.onModalClose}
+        >
+          <ModalHeader>
+            Remove - {sourceTitle}
+          </ModalHeader>
+
+          <ModalBody>
+            <div>
+              Are you sure you want to remove '{sourceTitle}' from the queue?
+            </div>
+
+            <FormGroup>
+              <FormLabel>Remove From Download Client</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="remove"
+                value={remove}
+                helpTextWarning="Removing will remove the download and the file(s) from the download client."
+                isDisabled={!canIgnore}
+                onChange={this.onRemoveChange}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>Blacklist Release</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"
+                onChange={this.onBlacklistChange}
+              />
+            </FormGroup>
+
+          </ModalBody>
+
+          <ModalFooter>
+            <Button onPress={this.onModalClose}>
+              Close
+            </Button>
+
+            <Button
+              kind={kinds.DANGER}
+              onPress={this.onRemoveConfirmed}
+            >
+              Remove
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    );
+  }
+}
+
+RemoveQueueItemModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  sourceTitle: PropTypes.string.isRequired,
+  canIgnore: PropTypes.bool.isRequired,
+  onRemovePress: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default RemoveQueueItemModal;

frontend/src/Activity/Queue/RemoveQueueItemsModal.css

@@ -0,0 +1,3 @@
+.message {
+  margin-bottom: 30px;
+}

frontend/src/Activity/Queue/RemoveQueueItemsModal.js

@@ -0,0 +1,147 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { inputTypes, kinds, sizes } from 'Helpers/Props';
+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 ModalFooter from 'Components/Modal/ModalFooter';
+import styles from './RemoveQueueItemsModal.css';
+
+class RemoveQueueItemsModal extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      remove: true,
+      blacklist: false
+    };
+  }
+
+  //
+  // Control
+
+   resetState = function() {
+     this.setState({
+       remove: true,
+       blacklist: false
+     });
+   }
+
+   //
+   // Listeners
+
+   onRemoveChange = ({ value }) => {
+     this.setState({ remove: value });
+   }
+
+  onBlacklistChange = ({ value }) => {
+    this.setState({ blacklist: value });
+  }
+
+  onRemoveConfirmed = () => {
+    const state = this.state;
+
+    this.resetState();
+    this.props.onRemovePress(state);
+  }
+
+  onModalClose = () => {
+    this.resetState();
+    this.props.onModalClose();
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      isOpen,
+      selectedCount,
+      canIgnore
+    } = this.props;
+
+    const { remove, blacklist } = this.state;
+
+    return (
+      <Modal
+        isOpen={isOpen}
+        size={sizes.MEDIUM}
+        onModalClose={this.onModalClose}
+      >
+        <ModalContent
+          onModalClose={this.onModalClose}
+        >
+          <ModalHeader>
+            Remove Selected Item{selectedCount > 1 ? 's' : ''}
+          </ModalHeader>
+
+          <ModalBody>
+            <div className={styles.message}>
+              Are you sure you want to remove {selectedCount} item{selectedCount > 1 ? 's' : ''} from the queue?
+            </div>
+
+            <FormGroup>
+              <FormLabel>Remove From Download Client</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="remove"
+                value={remove}
+                helpTextWarning="Removing will remove the download and the file(s) from the download client."
+                isDisabled={!canIgnore}
+                onChange={this.onRemoveChange}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>
+                Blacklist Release{selectedCount > 1 ? 's' : ''}
+              </FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="blacklist"
+                value={blacklist}
+                helpText="Prevents Radarr from automatically grabbing this movie again"
+                onChange={this.onBlacklistChange}
+              />
+            </FormGroup>
+
+          </ModalBody>
+
+          <ModalFooter>
+            <Button onPress={this.onModalClose}>
+              Close
+            </Button>
+
+            <Button
+              kind={kinds.DANGER}
+              onPress={this.onRemoveConfirmed}
+            >
+              Remove
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    );
+  }
+}
+
+RemoveQueueItemsModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  selectedCount: PropTypes.number.isRequired,
+  canIgnore: PropTypes.bool.isRequired,
+  onRemovePress: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default RemoveQueueItemsModal;

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

@@ -0,0 +1,76 @@
+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';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.app,
+    (state) => state.queue.status,
+    (state) => state.queue.options.includeUnknownMovieItems,
+    (app, status, includeUnknownMovieItems) => {
+      const {
+        errors,
+        warnings,
+        unknownErrors,
+        unknownWarnings,
+        count,
+        totalCount
+      } = status.item;
+
+      return {
+        isConnected: app.isConnected,
+        isReconnecting: app.isReconnecting,
+        isPopulated: status.isPopulated,
+        ...status.item,
+        count: includeUnknownMovieItems ? totalCount : count,
+        errors: includeUnknownMovieItems ? errors || unknownErrors : errors,
+        warnings: includeUnknownMovieItems ? warnings || unknownWarnings : warnings
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  fetchQueueStatus
+};
+
+class QueueStatusConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    if (!this.props.isPopulated) {
+      this.props.fetchQueueStatus();
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.isConnected && prevProps.isReconnecting) {
+      this.props.fetchQueueStatus();
+    }
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <PageSidebarStatus
+        {...this.props}
+      />
+    );
+  }
+}
+
+QueueStatusConnector.propTypes = {
+  isConnected: PropTypes.bool.isRequired,
+  isReconnecting: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  fetchQueueStatus: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(QueueStatusConnector);

frontend/src/Activity/Queue/TimeleftCell.css

@@ -0,0 +1,5 @@
+.timeleft {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 100px;
+}

frontend/src/Activity/Queue/TimeleftCell.js

@@ -0,0 +1,82 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import formatTime from 'Utilities/Date/formatTime';
+import formatTimeSpan from 'Utilities/Date/formatTimeSpan';
+import getRelativeDate from 'Utilities/Date/getRelativeDate';
+import formatBytes from 'Utilities/Number/formatBytes';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import styles from './TimeleftCell.css';
+
+function TimeleftCell(props) {
+  const {
+    estimatedCompletionTime,
+    timeleft,
+    status,
+    size,
+    sizeleft,
+    showRelativeDates,
+    shortDateFormat,
+    timeFormat
+  } = props;
+
+  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}`}
+      >
+        -
+      </TableRowCell>
+    );
+  }
+
+  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}`}
+      >
+        -
+      </TableRowCell>
+    );
+  }
+
+  if (!timeleft) {
+    return (
+      <TableRowCell className={styles.timeleft}>
+        -
+      </TableRowCell>
+    );
+  }
+
+  const totalSize = formatBytes(size);
+  const remainingSize = formatBytes(sizeleft);
+
+  return (
+    <TableRowCell
+      className={styles.timeleft}
+      title={`${remainingSize} / ${totalSize}`}
+    >
+      {formatTimeSpan(timeleft)}
+    </TableRowCell>
+  );
+}
+
+TimeleftCell.propTypes = {
+  estimatedCompletionTime: PropTypes.string,
+  timeleft: PropTypes.string,
+  status: PropTypes.string.isRequired,
+  size: PropTypes.number.isRequired,
+  sizeleft: PropTypes.number.isRequired,
+  showRelativeDates: PropTypes.bool.isRequired,
+  shortDateFormat: PropTypes.string.isRequired,
+  timeFormat: PropTypes.string.isRequired
+};
+
+export default TimeleftCell;

frontend/src/AddMovie/AddListMovie/AddDiscoverMovieConnector.js

@@ -0,0 +1,116 @@
+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 { fetchDiscoverMovies, 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());
+    },
+
+    dispatchClearListMovie() {
+      dispatch(clearAddMovie());
+    },
+
+    dispatchFetchListMovies() {
+      dispatch(fetchDiscoverMovies());
+    },
+
+    onTableOptionChange(payload) {
+      dispatch(setListMovieTableOption(payload));
+    },
+
+    onSortSelect(sortKey) {
+      dispatch(setListMovieSort({ sortKey }));
+    },
+
+    onFilterSelect(selectedFilterKey) {
+      dispatch(setListMovieFilter({ selectedFilterKey }));
+    },
+
+    dispatchSetListMovieView(view) {
+      dispatch(setListMovieView({ view }));
+    }
+  };
+}
+
+class AddDiscoverMovieConnector extends Component {
+
+  //
+  // Lifecycle
+
+  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}
+      />
+    );
+  }
+}
+
+AddDiscoverMovieConnector.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)(AddDiscoverMovieConnector),
+  'addMovie'
+);

frontend/src/AddMovie/AddListMovie/AddListMovie.js

@@ -0,0 +1,344 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItems';
+import { align, icons, sortDirections } from 'Helpers/Props';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageJumpBar from 'Components/Page/PageJumpBar';
+import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
+import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
+import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
+import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import AddListMovieTableConnector from './Table/AddListMovieTableConnector';
+import AddListMoviePosterOptionsModal from './Posters/Options/AddListMoviePosterOptionsModal';
+import AddListMoviePostersConnector from './Posters/AddListMoviePostersConnector';
+import AddListMovieOverviewOptionsModal from './Overview/Options/AddListMovieOverviewOptionsModal';
+import AddListMovieOverviewsConnector from './Overview/AddListMovieOverviewsConnector';
+import AddListMovieFilterMenu from 'AddMovie/AddListMovie/Menus/AddListMovieFilterMenu';
+import AddListMovieSortMenu from 'AddMovie/AddListMovie/Menus/AddListMovieSortMenu';
+import AddListMovieViewMenu from 'AddMovie/AddListMovie/Menus/AddListMovieViewMenu';
+import styles from 'Movie/Index/MovieIndex.css';
+
+function getViewComponent(view) {
+  if (view === 'posters') {
+    return AddListMoviePostersConnector;
+  }
+
+  if (view === 'overview') {
+    return AddListMovieOverviewsConnector;
+  }
+
+  return AddListMovieTableConnector;
+}
+
+class AddListMovie extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      scroller: null,
+      jumpBarItems: { order: [] },
+      jumpToCharacter: null,
+      isPosterOptionsModalOpen: false,
+      isOverviewOptionsModalOpen: false,
+      isConfirmSearchModalOpen: false,
+      searchType: null,
+      lastToggled: null
+    };
+  }
+
+  componentDidMount() {
+    this.setJumpBarItems();
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      items,
+      sortKey,
+      sortDirection
+    } = this.props;
+
+    if (sortKey !== prevProps.sortKey ||
+        sortDirection !== prevProps.sortDirection ||
+        hasDifferentItemsOrOrder(prevProps.items, items)
+    ) {
+      this.setJumpBarItems();
+    }
+
+    if (this.state.jumpToCharacter != null) {
+      this.setState({ jumpToCharacter: null });
+    }
+  }
+
+  //
+  // Control
+
+  setScrollerRef = (ref) => {
+    this.setState({ scroller: ref });
+  }
+
+  setJumpBarItems() {
+    const {
+      items,
+      sortKey,
+      sortDirection
+    } = this.props;
+
+    // Reset if not sorting by sortTitle
+    if (sortKey !== 'sortTitle') {
+      this.setState({ jumpBarItems: { order: [] } });
+      return;
+    }
+
+    const characters = _.reduce(items, (acc, item) => {
+      let char = item.sortTitle.charAt(0);
+
+      if (!isNaN(char)) {
+        char = '#';
+      }
+
+      if (char in acc) {
+        acc[char] = acc[char] + 1;
+      } else {
+        acc[char] = 1;
+      }
+
+      return acc;
+    }, {});
+
+    const order = Object.keys(characters).sort();
+
+    // Reverse if sorting descending
+    if (sortDirection === sortDirections.DESCENDING) {
+      order.reverse();
+    }
+
+    const jumpBarItems = {
+      characters,
+      order
+    };
+
+    this.setState({ jumpBarItems });
+  }
+
+  //
+  // Listeners
+
+  onPosterOptionsPress = () => {
+    this.setState({ isPosterOptionsModalOpen: true });
+  }
+
+  onPosterOptionsModalClose = () => {
+    this.setState({ isPosterOptionsModalOpen: false });
+  }
+
+  onOverviewOptionsPress = () => {
+    this.setState({ isOverviewOptionsModalOpen: true });
+  }
+
+  onOverviewOptionsModalClose = () => {
+    this.setState({ isOverviewOptionsModalOpen: false });
+  }
+
+  onJumpBarItemPress = (jumpToCharacter) => {
+    this.setState({ jumpToCharacter });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      isFetching,
+      isPopulated,
+      error,
+      totalItems,
+      items,
+      columns,
+      selectedFilterKey,
+      filters,
+      customFilters,
+      sortKey,
+      sortDirection,
+      view,
+      onSortSelect,
+      onFilterSelect,
+      onViewSelect,
+      onScroll,
+      ...otherProps
+    } = this.props;
+
+    const {
+      scroller,
+      jumpBarItems,
+      jumpToCharacter,
+      isPosterOptionsModalOpen,
+      isOverviewOptionsModalOpen
+    } = this.state;
+
+    const ViewComponent = getViewComponent(view);
+    const isLoaded = !!(!error && isPopulated && items.length && scroller);
+    const hasNoMovie = !totalItems;
+
+    return (
+      <PageContent>
+        <PageToolbar>
+          <PageToolbarSection
+            alignContent={align.RIGHT}
+            collapseButtons={false}
+          >
+            {
+              view === 'table' ?
+                <TableOptionsModalWrapper
+                  {...otherProps}
+                  columns={columns}
+                >
+                  <PageToolbarButton
+                    label="Options"
+                    iconName={icons.TABLE}
+                  />
+                </TableOptionsModalWrapper> :
+                null
+            }
+
+            {
+              view === 'posters' ?
+                <PageToolbarButton
+                  label="Options"
+                  iconName={icons.POSTER}
+                  isDisabled={hasNoMovie}
+                  onPress={this.onPosterOptionsPress}
+                /> :
+                null
+            }
+
+            {
+              view === 'overview' ?
+                <PageToolbarButton
+                  label="Options"
+                  iconName={icons.OVERVIEW}
+                  isDisabled={hasNoMovie}
+                  onPress={this.onOverviewOptionsPress}
+                /> :
+                null
+            }
+
+            {
+              (view === 'posters' || view === 'overview') &&
+                <PageToolbarSeparator />
+            }
+
+            <AddListMovieViewMenu
+              view={view}
+              isDisabled={hasNoMovie}
+              onViewSelect={onViewSelect}
+            />
+
+            <AddListMovieSortMenu
+              sortKey={sortKey}
+              sortDirection={sortDirection}
+              isDisabled={hasNoMovie}
+              onSortSelect={onSortSelect}
+            />
+
+            <AddListMovieFilterMenu
+              selectedFilterKey={selectedFilterKey}
+              filters={filters}
+              customFilters={customFilters}
+              isDisabled={hasNoMovie}
+              onFilterSelect={onFilterSelect}
+            />
+          </PageToolbarSection>
+        </PageToolbar>
+
+        <div className={styles.pageContentBodyWrapper}>
+          <PageContentBodyConnector
+            registerScroller={this.setScrollerRef}
+            className={styles.contentBody}
+            innerClassName={styles[`${view}InnerContentBody`]}
+            onScroll={onScroll}
+          >
+            {
+              isFetching && !isPopulated &&
+                <LoadingIndicator />
+            }
+
+            {
+              !isFetching && !!error &&
+                <div>Unable to load movies</div>
+            }
+
+            {
+              isLoaded &&
+                <div className={styles.contentBodyContainer}>
+                  <ViewComponent
+                    scroller={scroller}
+                    items={items}
+                    filters={filters}
+                    sortKey={sortKey}
+                    sortDirection={sortDirection}
+                    jumpToCharacter={jumpToCharacter}
+                    {...otherProps}
+                  />
+                </div>
+            }
+
+            {
+              !error && isPopulated && !items.length &&
+                <div className={styles.message}>
+                  <div className={styles.noResults}>Couldn't find any results</div>
+                </div>
+            }
+          </PageContentBodyConnector>
+
+          {
+            isLoaded && !!jumpBarItems.order.length &&
+              <PageJumpBar
+                items={jumpBarItems}
+                onItemPress={this.onJumpBarItemPress}
+              />
+          }
+        </div>
+
+        <AddListMoviePosterOptionsModal
+          isOpen={isPosterOptionsModalOpen}
+          onModalClose={this.onPosterOptionsModalClose}
+        />
+
+        <AddListMovieOverviewOptionsModal
+          isOpen={isOverviewOptionsModalOpen}
+          onModalClose={this.onOverviewOptionsModalClose}
+        />
+      </PageContent>
+    );
+  }
+}
+
+AddListMovie.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  totalItems: PropTypes.number.isRequired,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  selectedFilterKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  customFilters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  sortKey: PropTypes.string,
+  sortDirection: PropTypes.oneOf(sortDirections.all),
+  view: PropTypes.string.isRequired,
+  isSmallScreen: PropTypes.bool.isRequired,
+  onSortSelect: PropTypes.func.isRequired,
+  onFilterSelect: PropTypes.func.isRequired,
+  onViewSelect: PropTypes.func.isRequired,
+  onScroll: PropTypes.func.isRequired
+};
+
+export default AddListMovie;

frontend/src/AddMovie/AddListMovie/AddListMovieConnector.js

@@ -0,0 +1,113 @@
+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/AddListMovieFilterModalConnector.js

@@ -0,0 +1,24 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { setListMovieFilter } from 'Store/Actions/addMovieActions';
+import FilterModal from 'Components/Filter/FilterModal';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.addMovie.items,
+    (state) => state.addMovie.filterBuilderProps,
+    (sectionItems, filterBuilderProps) => {
+      return {
+        sectionItems,
+        filterBuilderProps,
+        customFilterType: 'addMovie'
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  dispatchSetFilter: setListMovieFilter
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(FilterModal);

frontend/src/AddMovie/AddListMovie/AddListMovieItemConnector.js

@@ -0,0 +1,67 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createAddListMovieSelector from 'Store/Selectors/createAddListMovieSelector';
+import createMovieQualityProfileSelector from 'Store/Selectors/createMovieQualityProfileSelector';
+
+function createMapStateToProps() {
+  return createSelector(
+    createAddListMovieSelector(),
+    createMovieQualityProfileSelector(),
+    (
+      movie,
+      qualityProfile
+    ) => {
+
+      // If a movie is deleted this selector may fire before the parent
+      // selecors, which will result in an undefined movie, if that happens
+      // we want to return early here and again in the render function to avoid
+      // trying to show a movie that has no information available.
+
+      if (!movie) {
+        return {};
+      }
+
+      return {
+        ...movie,
+        qualityProfile
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+};
+
+class AddListMovieItemConnector extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      tmdbId,
+      component: ItemComponent,
+      ...otherProps
+    } = this.props;
+
+    if (!tmdbId) {
+      return null;
+    }
+
+    return (
+      <ItemComponent
+        {...otherProps}
+        tmdbId={tmdbId}
+      />
+    );
+  }
+}
+
+AddListMovieItemConnector.propTypes = {
+  tmdbId: PropTypes.number,
+  component: PropTypes.elementType.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(AddListMovieItemConnector);

frontend/src/AddMovie/AddListMovie/Menus/AddListMovieFilterMenu.js

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { align } from 'Helpers/Props';
+import FilterMenu from 'Components/Menu/FilterMenu';
+import AddListMovieFilterModalConnector from 'AddMovie/AddListMovie/AddListMovieFilterModalConnector';
+
+function AddListMovieFilterMenu(props) {
+  const {
+    selectedFilterKey,
+    filters,
+    customFilters,
+    isDisabled,
+    onFilterSelect
+  } = props;
+
+  return (
+    <FilterMenu
+      alignMenu={align.RIGHT}
+      isDisabled={isDisabled}
+      selectedFilterKey={selectedFilterKey}
+      filters={filters}
+      customFilters={customFilters}
+      filterModalConnectorComponent={AddListMovieFilterModalConnector}
+      onFilterSelect={onFilterSelect}
+    />
+  );
+}
+
+AddListMovieFilterMenu.propTypes = {
+  selectedFilterKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  customFilters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isDisabled: PropTypes.bool.isRequired,
+  onFilterSelect: PropTypes.func.isRequired
+};
+
+AddListMovieFilterMenu.defaultProps = {
+  showCustomFilters: false
+};
+
+export default AddListMovieFilterMenu;