New: Return static response to requests while app is starting

(cherry picked from commit 303fc5d786ccf2ad14c8523fc239696c5d37ea53)
Fixup language specification tests
2026-04-18 21:35:51 -04:00 · 2023-02-08 01:35:52 +00:00 · 2023-02-06 19:38:44 -06:00 · 2023-02-06 19:06:03 -06:00 · 2023-02-05 23:31:00 -06:00 · 2023-02-05 19:09:20 -06:00
1570 changed files with 49268 additions and 21497 deletions
@@ -19,10 +19,10 @@ indent_size = 4
 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
+dotnet_style_qualification_for_field = false:warning
+dotnet_style_qualification_for_property = false:warning
+dotnet_style_qualification_for_method = false:warning
+dotnet_style_qualification_for_event = false:warning

 # Indentation preferences
 csharp_indent_block_contents = true
@@ -32,10 +32,6 @@ 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 = _

@@ -46,7 +42,6 @@ csharp_style_var_elsewhere = true:suggestion

 # Stylecop Rules
 dotnet_diagnostic.SA0001.severity = none
-dotnet_diagnostic.SA1005.severity = none
 dotnet_diagnostic.SA1025.severity = none
 dotnet_diagnostic.SA1101.severity = none
 dotnet_diagnostic.SA1116.severity = none
@@ -1,7 +1,6 @@
 {
  "paths": [
-    "frontend/src/**/*.js",
-    "src/NzbDrone.Core/Localization/Core/*.json"
+    "frontend/src/**/*.js"
  ],
  "ignored": [
    "**/node_modules/**/*"
@@ -1,6 +1,6 @@
 # These are supported funding model platforms

-github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+github: radarr
 patreon: # Replace with a single Patreon username
 open_collective: radarr
 ko_fi: # Replace with a single Ko-fi username
@@ -1,14 +1,13 @@
 name: Bug Report
-title: "[BUG]: "
 description: 'Report a new bug, if you are not 100% certain this is a bug please go to our Reddit or Discord first'
 labels: ['Type: Bug', 'Status: Needs Triage']
 body:
 - type: checkboxes
  attributes:
    label: Is there an existing issue for this?
-    description: Please search to see if an issue already exists for the bug you encountered.
+    description: Please search to see if an open or closed issue already exists for the bug you encountered. If a bug exists and is closed note that it may only be fixed in an unstable branch. 
    options:
-    - label: I have searched the existing issues
+    - label: I have searched the existing open and closed issues
      required: true
 - type: textarea
  attributes:
@@ -43,12 +42,14 @@ body:
        - **Docker Install**: Yes
        - **Using Reverse Proxy**: No
        - **Browser**: Firefox 90 (If UI related)
+        - **Database**: Sqlite 3.36.0
    value: |
        - OS: 
-        - Radarr:
-        - Docker Install:
-        - Using Reverse Proxy:
-        - Browser:
+        - Radarr: 
+        - Docker Install: 
+        - Using Reverse Proxy: 
+        - Browser: 
+        - Database: 
    render: markdown
  validations:
    required: true
@@ -64,12 +65,11 @@ body:
    required: true
 - type: textarea
  attributes:
-    label: Anything else?
+    label: Trace Logs?
    description: |
      Trace Logs (https://wiki.servarr.com/radarr/troubleshooting#logging-and-log-files) 
-      Links? References? Anything that will give us more context about the issue you are encountering!
      ***Generally speaking, all bug reports must have trace logs provided.***
-
      Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
+      Additionally, any additional info? Screenshots? References? Anything that will give us more context about the issue you are encountering!
  validations:
    required: true
@@ -1,14 +1,13 @@
 name: Feature Request
-title: "[FEAT]: "
 description: 'Suggest an idea for Radarr'
 labels: ['Type: Feature Request', 'Status: Needs Triage']
 body:
 - type: checkboxes
  attributes:
    label: Is there an existing issue for this?
-    description: Please search to see if an issue already exists for the feature you are requesting.
+    description: Please search to see if an open or closed issue already exists for the feature you are requesting. If a request exists and is closed note that it may only be fixed in an unstable branch.
    options:
-    - label: I have searched the existing issues
+    - label: I have searched the existing open and closed issues
      required: true
 - type: textarea
  attributes:
@@ -7,8 +7,12 @@ on:

 concurrency: azuresync-${{ github.event.issue.number }}

+permissions: {}
 jobs:
  alert:
+    permissions:
+      issues: write # to update issue body
+
    runs-on: ubuntu-latest
    steps:
      - uses: danhellem/github-actions-issue-to-work-item@master
@@ -5,8 +5,13 @@ on:
  schedule:
    - cron: '0 0 * * *'

+permissions: {}
 jobs:
  lock:
+    permissions:
+      issues: write # to lock issues (dessant/lock-threads)
+      pull-requests: write # to lock PRs (dessant/lock-threads)
+
    runs-on: ubuntu-latest
    steps:
      - uses: dessant/lock-threads@v2
@@ -4,8 +4,12 @@ on:
  issues:
    types: [labeled, unlabeled, reopened]

+permissions: {}
 jobs:
  support:
+    permissions:
+      issues: write # to modify issues
+
    runs-on: ubuntu-latest
    steps:
      - uses: dessant/support-requests@v2
@@ -166,27 +166,12 @@ packages.config.md5sum

 # Common IntelliJ Platform excludes

-# User specific
-**/.idea/**/workspace.xml
-**/.idea/**/tasks.xml
-**/.idea/shelf/*
-**/.idea/dictionaries
-**/.idea/.idea.Radarr.Posix
-**/.idea/.idea.Radarr.Windows
+# Ignore Rider projects completely for now
+.idea/

-# Sensitive or high-churn files
-**/.idea/**/dataSources/
-**/.idea/**/dataSources.ids
-**/.idea/**/dataSources.xml
-**/.idea/**/dataSources.local.xml
-**/.idea/**/sqlDataSources.xml
-**/.idea/**/dynamic.xml
-
-# Rider
-# Rider auto-generates .iml files, and contentModel.xml
-**/.idea/**/*.iml
-**/.idea/**/contentModel.xml
-**/.idea/**/modules.xml
 # ignore node_modules symlink
 node_modules
 node_modules.nosync
+
+# API doc generation
+.config/
@@ -0,0 +1,132 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, caste, color, religion, or sexual
+identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the overall
+  community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or advances of
+  any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email address,
+  without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+<development@radarr.video>.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series of
+actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or permanent
+ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior, harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the
+community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.1, available at
+[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].
+
+Community Impact Guidelines were inspired by
+[Mozilla's code of conduct enforcement ladder][Mozilla CoC].
+
+For answers to common questions about this code of conduct, see the FAQ at
+[https://www.contributor-covenant.org/faq][FAQ]. Translations are available at
+[https://www.contributor-covenant.org/translations][translations].
+
+[homepage]: https://www.contributor-covenant.org
+[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
+[Mozilla CoC]: https://github.com/mozilla/diversity
+[FAQ]: https://www.contributor-covenant.org/faq
+[translations]: https://www.contributor-covenant.org/translations
@@ -1,19 +1,21 @@
 # Radarr

 [![Build Status](https://dev.azure.com/Radarr/Radarr/_apis/build/status/Radarr.Radarr?branchName=develop)](https://dev.azure.com/Radarr/Radarr/_build/latest?definitionId=1&branchName=develop)
-[![Translated](https://translate.servarr.com/widgets/radarr/-/radarr/svg-badge.svg)](https://translate.servarr.com/engage/radarr/?utm_source=widget)
+[![Translated](https://translate.servarr.com/widgets/servarr/-/radarr/svg-badge.svg)](https://translate.servarr.com/engage/radarr/?utm_source=widget)
 [![Docker Pulls](https://img.shields.io/docker/pulls/linuxserver/radarr.svg)](https://wiki.servarr.com/radarr/installation#docker)
 ![Github Downloads](https://img.shields.io/github/downloads/Radarr/Radarr/total.svg)
-[![Backers on Open Collective](https://opencollective.com/Radarr/backers/badge.svg)](#backers) 
+[![Backers on Open Collective](https://opencollective.com/Radarr/backers/badge.svg)](#backers)
 [![Sponsors on Open Collective](https://opencollective.com/Radarr/sponsors/badge.svg)](#sponsors)
+[![Mega Sponsors on Open Collective](https://opencollective.com/Radarr/megasponsors/badge.svg)](#mega-sponsors)

 Radarr is a movie collection manager for Usenet and BitTorrent users. It can monitor multiple RSS feeds for new movies and will interface with clients and indexers to grab, sort, and rename them. It can also be configured to automatically upgrade the quality of existing files in the library when a better quality format becomes available.
+Note that only one type of a given movie is supported. If you want both an 4k version and 1080p version of a given movie you will need multiple instances.

-## Major Features Include:
+## Major Features Include

 * Adding new movies with lots of information, such as trailers, ratings, etc.
 * Support for major platforms: Windows, Linux, macOS, Raspberry Pi, etc.
-* Can watch for better quality of the movies you have and do an automatic upgrade. *eg. from DVD to Blu-Ray*
+* Can watch for better quality of the movies you have and do an automatic upgrade. *e.g. from DVD to Blu-Ray*
 * Automatic failed download handling will try another release if one fails
 * Manual search so you can pick any release or to see why a release was not downloaded automatically
 * Full integration with SABnzbd and NZBGet
@@ -21,53 +23,69 @@ Radarr is a movie collection manager for Usenet and BitTorrent users. It can mon
 * Automatically importing downloaded movies
 * Recognizing Special Editions, Director's Cut, etc.
 * Identifying releases with hardcoded subs
-* QBittorrent, Deluge, rTorrent, Transmission, uTorrent, and other download clients are supported 
-* Full integration with Kodi, Plex (notification, library update)
-* A beautiful UI
+* Identifying releases with AKA movie names
+* SABnzbd, NZBGet, QBittorrent, Deluge, rTorrent, Transmission, uTorrent, and other download clients are supported and integrated
+* Full integration with Kodi and Plex (notifications, library updates)
 * Importing Metadata such as trailers or subtitles
 * Adding metadata such as posters and information for Kodi and others to use
 * Advanced customization for profiles, such that Radarr will always download the copy you want
+* A beautiful UI

 ## Support
-Note: GitHub Issues are for Bugs and Feature Requests Only

+[![Wiki](https://img.shields.io/badge/servarr-wiki-181717.svg?maxAge=60)](https://wiki.servarr.com/radarr)
 [![Discord](https://img.shields.io/badge/discord-chat-7289DA.svg?maxAge=60)](https://radarr.video/discord)
 [![Reddit](https://img.shields.io/badge/reddit-discussion-FF4500.svg?maxAge=60)](https://www.reddit.com/r/Radarr)
+
+Note: GitHub Issues are for Bugs and Feature Requests Only
+
 [![GitHub - Bugs and Feature Requests Only](https://img.shields.io/badge/github-issues-red.svg?maxAge=60)](https://github.com/Radarr/Radarr/issues)
-[![Wiki](https://img.shields.io/badge/servarr-wiki-181717.svg?maxAge=60)](https://wiki.servarr.com/radarr)

 ## Contributors & Developers
+
 [API Documentation](https://radarr.video/docs/api/)

-This project exists thanks to all the people who contribute. [Contribute](CONTRIBUTING.md).
-<a href="https://github.com/Radarr/Radarr/graphs/contributors"><img src="https://opencollective.com/Radarr/contributors.svg?width=890&button=false" /></a>
+This project exists thanks to all the people who contribute.
+- [Contribute (GitHub)](CONTRIBUTING.md)
+- [Contribution (Wiki Article)](https://wiki.servarr.com/radarr/contributing)

+[![Contributors List](https://opencollective.com/Radarr/contributors.svg?width=890&button=false)](https://github.com/Radarr/Radarr/graphs/contributors)

 ## Backers

 Thank you to all our backers! 🙏 [Become a backer](https://opencollective.com/Radarr#backer)

-<img src="https://opencollective.com/Radarr/backers.svg?width=890"></a>
+[![Backers List](https://opencollective.com/Radarr/backers.svg?width=890)](https://opencollective.com/Radarr#backer)

 ## Sponsors

 Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor](https://opencollective.com/Radarr#sponsor)

-<img src="https://opencollective.com/Radarr/sponsors.svg?width=890"></a>
+[![Sponsors List](https://opencollective.com/Radarr/sponsors.svg?width=890)](https://opencollective.com/Radarr#sponsor)

 ## Mega Sponsors

-<img src="https://opencollective.com/Radarr/tiers/mega-sponsor.svg?width=890"></a>
+[![Mega Sponsors List](https://opencollective.com/Radarr/tiers/mega-sponsor.svg?width=890)](https://opencollective.com/Radarr#mega-sponsor)

 ## 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/)	
+* [<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/)
 * [<img src="/Logo/dottrace.svg" alt="dotTrace" width="32"> dotTrace](http://www.jetbrains.com/dottrace/)

+## DigitalOcean
+
+This project is also supported by DigitalOcean
+<p>
+  <a href="https://www.digitalocean.com/">
+    <img src="https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/SVG/DO_Logo_horizontal_blue.svg" width="201px">
+  </a>
+</p>
+
 ### License

 * [GNU GPL v3](http://www.gnu.org/licenses/gpl.html)
-* Copyright 2010-2021
+* Copyright 2010-2022
@@ -0,0 +1,8 @@
+# Security Policy
+
+## Reporting a Vulnerability
+
+Please report (suspected) security vulnerabilities on Discord (preferred) to
+any of the Servarr Dev role holders (red names) or via email: development@servarr.com. You will receive a response from
+us within 72 hours. If the issue is confirmed, we will release a patch as soon
+as possible depending on complexity/severity.
@@ -7,14 +7,20 @@ variables:
  outputFolder: './_output'
  artifactsFolder: './_artifacts'
  testsFolder: './_tests'
-  majorVersion: '4.0.0'
+  yarnCacheFolder: $(Pipeline.Workspace)/.yarn
+  nugetCacheFolder: $(Pipeline.Workspace)/.nuget/packages
+  majorVersion: '4.4.2'
  minorVersion: $[counter('minorVersion', 2000)]
  radarrVersion: '$(majorVersion).$(minorVersion)'
  buildName: '$(Build.SourceBranchName).$(radarrVersion)'
  sentryOrg: 'servarr'
  sentryUrl: 'https://sentry.servarr.com'
-  dotnetVersion: '5.0.401'
-  yarnCacheFolder: $(Pipeline.Workspace)/.yarn
+  dotnetVersion: '6.0.400'
+  nodeVersion: '16.X'
+  innoVersion: '6.2.0'
+  windowsImage: 'windows-2022'
+  linuxImage: 'ubuntu-20.04'
+  macImage: 'macOS-11'

 trigger:
  branches:
@@ -29,6 +35,7 @@ pr:
  paths:
    exclude:
    - src/NzbDrone.Core/Localization/Core
+    - src/Radarr.Api.*/openapi.json

 stages:
  - stage: Setup
@@ -37,7 +44,7 @@ stages:
    - job:
      displayName: Build Variables
      pool:
-        vmImage: 'ubuntu-18.04'
+        vmImage: ${{ variables.linuxImage }}
      steps:
      # Set the build name properly.  The 'name' property won't recursively expand so hack here:
      - bash: echo "##vso[build.updatebuildnumber]$RADARRVERSION"
@@ -63,15 +70,15 @@ stages:
        matrix:
          Linux:
            osName: 'Linux'
-            imageName: 'ubuntu-18.04'
+            imageName: ${{ variables.linuxImage }}
            enableAnalysis: 'true'
          Mac:
            osName: 'Mac'
-            imageName: 'macos-10.15'
+            imageName: ${{ variables.macImage }}
            enableAnalysis: 'false'
          Windows:
            osName: 'Windows'
-            imageName: 'windows-2019'
+            imageName: ${{ variables.windowsImage }}
            enableAnalysis: 'false'

      pool:
@@ -90,15 +97,14 @@ stages:
      - bash: |
          BUNDLEDVERSIONS=${AGENT_TOOLSDIRECTORY}/dotnet/sdk/${DOTNETVERSION}/Microsoft.NETCoreSdk.BundledVersions.props
          echo $BUNDLEDVERSIONS
-          grep osx-x64 $BUNDLEDVERSIONS
          if grep -q freebsd-x64 $BUNDLEDVERSIONS; then
-            echo "BSD already enabled"
+            echo "Extra platforms already enabled"
          else
-            echo "Enabling BSD support"
-            sed -i.ORI 's/osx-x64/osx-x64;freebsd-x64/' $BUNDLEDVERSIONS
+            echo "Enabling extra platform support"
+            sed -i.ORI 's/osx-x64/osx-x64;freebsd-x64;linux-x86/' $BUNDLEDVERSIONS
          fi
-        displayName: Enable FreeBSD Support
-      - bash: ./build.sh --backend --enable-bsd
+        displayName: Enable Extra Platform Support
+      - bash: ./build.sh --backend --enable-extra-platforms
        displayName: Build Radarr Backend
      - bash: |
          find ${OUTPUTFOLDER} -type f ! -path "*/publish/*" -exec rm -rf {} \;
@@ -111,25 +117,29 @@ stages:
        artifact: '$(osName)Backend'
        displayName: Publish Backend
        condition: and(succeeded(), eq(variables['osName'], 'Windows'))
-      - publish: '$(testsFolder)/net5.0/win-x64/publish'
-        artifact: WindowsCoreTests
-        displayName: Publish Windows Test Package
+      - publish: '$(testsFolder)/net6.0/win-x64/publish'
+        artifact: win-x64-tests
+        displayName: Publish win-x64 Test Package
        condition: and(succeeded(), eq(variables['osName'], 'Windows'))
-      - publish: '$(testsFolder)/net5.0/linux-x64/publish'
-        artifact: LinuxCoreTests
-        displayName: Publish Linux Test Package
+      - publish: '$(testsFolder)/net6.0/linux-x64/publish'
+        artifact: linux-x64-tests
+        displayName: Publish linux-x64 Test Package
        condition: and(succeeded(), eq(variables['osName'], 'Windows'))
-      - publish: '$(testsFolder)/net5.0/linux-musl-x64/publish'
-        artifact: LinuxMuslCoreTests
-        displayName: Publish Linux Musl Test Package
+      - publish: '$(testsFolder)/net6.0/linux-x86/publish'
+        artifact: linux-x86-tests
+        displayName: Publish linux-x86 Test Package
        condition: and(succeeded(), eq(variables['osName'], 'Windows'))
-      - publish: '$(testsFolder)/net5.0/freebsd-x64/publish'
-        artifact: FreebsdCoreTests
-        displayName: Publish FreeBSD Test Package
+      - publish: '$(testsFolder)/net6.0/linux-musl-x64/publish'
+        artifact: linux-musl-x64-tests
+        displayName: Publish linux-musl-x64 Test Package
        condition: and(succeeded(), eq(variables['osName'], 'Windows'))
-      - publish: '$(testsFolder)/net5.0/osx-x64/publish'
-        artifact: MacCoreTests
-        displayName: Publish MacOS Test Package
+      - publish: '$(testsFolder)/net6.0/freebsd-x64/publish'
+        artifact: freebsd-x64-tests
+        displayName: Publish freebsd-x64 Test Package
+        condition: and(succeeded(), eq(variables['osName'], 'Windows'))
+      - publish: '$(testsFolder)/net6.0/osx-x64/publish'
+        artifact: osx-x64-tests
+        displayName: Publish osx-x64 Test Package
        condition: and(succeeded(), eq(variables['osName'], 'Windows'))

  - stage: Build_Frontend
@@ -141,20 +151,20 @@ stages:
        matrix:
          Linux:
            osName: 'Linux'
-            imageName: 'ubuntu-18.04'
+            imageName: ${{ variables.linuxImage }}
          Mac:
            osName: 'Mac'
-            imageName: 'macos-10.15'
+            imageName: ${{ variables.macImage }}
          Windows:
            osName: 'Windows'
-            imageName: 'windows-2019'
+            imageName: ${{ variables.windowsImage }}
      pool:
        vmImage: $(imageName)
      steps:
      - task: NodeTool@0
        displayName: Set Node.js version
        inputs:
-          versionSpec: '12.x'
+          versionSpec: $(nodeVersion)
      - checkout: self
        submodules: true
        fetchDepth: 1
@@ -163,7 +173,6 @@ stages:
          key: 'yarn | "$(osName)" | yarn.lock'
          restoreKeys: |
             yarn | "$(osName)"
-             yarn
          path: $(yarnCacheFolder)
        displayName: Cache Yarn packages
      - bash: ./build.sh --frontend
@@ -184,7 +193,7 @@ stages:
    - job: Windows_Installer
      displayName: Create Installer
      pool:
-        vmImage: 'windows-2019'
+        vmImage: ${{ variables.windowsImage }}
      steps:
      - checkout: self
        fetchDepth: 1
@@ -200,16 +209,11 @@ stages:
          artifactName: WindowsFrontend
          targetPath: _output
        displayName: Fetch Frontend
-      - bash: ./build.sh --packages
-        displayName: Create Packages
      - bash: |
-          setup/inno/ISCC.exe setup/radarr.iss //DFramework=net5.0 //DRuntime=win-x86
-          cp setup/output/Radarr.*windows.net5.0.exe ${BUILD_ARTIFACTSTAGINGDIRECTORY}/Radarr.${BUILDNAME}.windows-core-x86-installer.exe
-        displayName: Create .NET Core Windows installer
-      - bash: |
-          setup/inno/ISCC.exe setup/radarr.iss //DFramework=net5.0 //DRuntime=win-x64
-          cp setup/output/Radarr.*windows.net5.0.exe ${BUILD_ARTIFACTSTAGINGDIRECTORY}/Radarr.${BUILDNAME}.windows-core-x64-installer.exe
-        displayName: Create .NET Core Windows installer
+          ./build.sh --packages --installer
+          cp setup/output/Radarr.*win-x64.exe ${BUILD_ARTIFACTSTAGINGDIRECTORY}/Radarr.${BUILDNAME}.windows-core-x64-installer.exe
+          cp setup/output/Radarr.*win-x86.exe ${BUILD_ARTIFACTSTAGINGDIRECTORY}/Radarr.${BUILDNAME}.windows-core-x86-installer.exe
+        displayName: Create Installers
      - publish: $(Build.ArtifactStagingDirectory)
        artifact: 'WindowsInstaller'
        displayName: Publish Installer
@@ -222,7 +226,7 @@ stages:
    - job: Other_Packages
      displayName: Create Standard Packages
      pool:
-        vmImage: 'ubuntu-18.04'
+        vmImage: ${{ variables.linuxImage }}
      steps:
      - checkout: self
        fetchDepth: 1
@@ -238,7 +242,7 @@ stages:
          artifactName: WindowsFrontend
          targetPath: _output
        displayName: Fetch Frontend
-      - bash: ./build.sh --packages --enable-bsd
+      - bash: ./build.sh --packages --enable-extra-platforms
        displayName: Create Packages
      - bash: |
          find . -name "ffprobe" -exec chmod a+x {} \;
@@ -246,82 +250,113 @@ stages:
          find . -name "Radarr.Update" -exec chmod a+x {} \;
        displayName: Set executable bits
      - task: ArchiveFiles@2
-        displayName: Create Windows Core zip
+        displayName: Create win-x64 zip
        inputs:
          archiveFile: '$(Build.ArtifactStagingDirectory)/Radarr.$(buildName).windows-core-x64.zip'
          archiveType: 'zip'
          includeRootFolder: false
-          rootFolderOrFile: $(artifactsFolder)/win-x64/net5.0
+          rootFolderOrFile: $(artifactsFolder)/win-x64/net6.0
      - task: ArchiveFiles@2
-        displayName: Create Windows x86 Core zip
+        displayName: Create win-x86 zip
        inputs:
          archiveFile: '$(Build.ArtifactStagingDirectory)/Radarr.$(buildName).windows-core-x86.zip'
          archiveType: 'zip'
          includeRootFolder: false
-          rootFolderOrFile: $(artifactsFolder)/win-x86/net5.0
+          rootFolderOrFile: $(artifactsFolder)/win-x86/net6.0
      - task: ArchiveFiles@2
-        displayName: Create MacOS Core app
+        displayName: Create osx-x64 app
        inputs:
          archiveFile: '$(Build.ArtifactStagingDirectory)/Radarr.$(buildName).osx-app-core-x64.zip'
          archiveType: 'zip'
          includeRootFolder: false
-          rootFolderOrFile: $(artifactsFolder)/macos-app/net5.0
+          rootFolderOrFile: $(artifactsFolder)/osx-x64-app/net6.0
      - task: ArchiveFiles@2
-        displayName: Create MacOS Core tar
+        displayName: Create osx-x64 tar
        inputs:
          archiveFile: '$(Build.ArtifactStagingDirectory)/Radarr.$(buildName).osx-core-x64.tar.gz'
          archiveType: 'tar'
          tarCompression: 'gz'
          includeRootFolder: false
-          rootFolderOrFile: $(artifactsFolder)/macos/net5.0
+          rootFolderOrFile: $(artifactsFolder)/osx-x64/net6.0
      - task: ArchiveFiles@2
-        displayName: Create Linux Core tar
+        displayName: Create osx-arm64 app
+        inputs:
+          archiveFile: '$(Build.ArtifactStagingDirectory)/Radarr.$(buildName).osx-app-core-arm64.zip'
+          archiveType: 'zip'
+          includeRootFolder: false
+          rootFolderOrFile: $(artifactsFolder)/osx-arm64-app/net6.0
+      - task: ArchiveFiles@2
+        displayName: Create osx-arm64 tar
+        inputs:
+          archiveFile: '$(Build.ArtifactStagingDirectory)/Radarr.$(buildName).osx-core-arm64.tar.gz'
+          archiveType: 'tar'
+          tarCompression: 'gz'
+          includeRootFolder: false
+          rootFolderOrFile: $(artifactsFolder)/osx-arm64/net6.0
+      - task: ArchiveFiles@2
+        displayName: Create linux-x64 tar
        inputs:
          archiveFile: '$(Build.ArtifactStagingDirectory)/Radarr.$(buildName).linux-core-x64.tar.gz'
          archiveType: 'tar'
          tarCompression: 'gz'
          includeRootFolder: false
-          rootFolderOrFile: $(artifactsFolder)/linux-x64/net5.0
+          rootFolderOrFile: $(artifactsFolder)/linux-x64/net6.0
      - task: ArchiveFiles@2
-        displayName: Create Linux Musl Core tar
+        displayName: Create linux-musl-x64 tar
        inputs:
          archiveFile: '$(Build.ArtifactStagingDirectory)/Radarr.$(buildName).linux-musl-core-x64.tar.gz'
          archiveType: 'tar'
          tarCompression: 'gz'
          includeRootFolder: false
-          rootFolderOrFile: $(artifactsFolder)/linux-musl-x64/net5.0
+          rootFolderOrFile: $(artifactsFolder)/linux-musl-x64/net6.0
      - task: ArchiveFiles@2
-        displayName: Create ARM32 Linux Core tar
+        displayName: Create linux-x86 tar
+        inputs:
+          archiveFile: '$(Build.ArtifactStagingDirectory)/Radarr.$(buildName).linux-core-x86.tar.gz'
+          archiveType: 'tar'
+          tarCompression: 'gz'
+          includeRootFolder: false
+          rootFolderOrFile: $(artifactsFolder)/linux-x86/net6.0
+      - task: ArchiveFiles@2
+        displayName: Create linux-arm tar
        inputs:
          archiveFile: '$(Build.ArtifactStagingDirectory)/Radarr.$(buildName).linux-core-arm.tar.gz'
          archiveType: 'tar'
          tarCompression: 'gz'
          includeRootFolder: false
-          rootFolderOrFile: $(artifactsFolder)/linux-arm/net5.0
+          rootFolderOrFile: $(artifactsFolder)/linux-arm/net6.0
      - task: ArchiveFiles@2
-        displayName: Create ARM64 Linux Core tar
+        displayName: Create linux-musl-arm tar
+        inputs:
+          archiveFile: '$(Build.ArtifactStagingDirectory)/Radarr.$(buildName).linux-musl-core-arm.tar.gz'
+          archiveType: 'tar'
+          tarCompression: 'gz'
+          includeRootFolder: false
+          rootFolderOrFile: $(artifactsFolder)/linux-musl-arm/net6.0
+      - task: ArchiveFiles@2
+        displayName: Create linux-arm64 tar
        inputs:
          archiveFile: '$(Build.ArtifactStagingDirectory)/Radarr.$(buildName).linux-core-arm64.tar.gz'
          archiveType: 'tar'
          tarCompression: 'gz'
          includeRootFolder: false
-          rootFolderOrFile: $(artifactsFolder)/linux-arm64/net5.0
+          rootFolderOrFile: $(artifactsFolder)/linux-arm64/net6.0
      - task: ArchiveFiles@2
-        displayName: Create ARM64 Linux Musl Core tar
+        displayName: Create linux-musl-arm64 tar
        inputs:
          archiveFile: '$(Build.ArtifactStagingDirectory)/Radarr.$(buildName).linux-musl-core-arm64.tar.gz'
          archiveType: 'tar'
          tarCompression: 'gz'
          includeRootFolder: false
-          rootFolderOrFile: $(artifactsFolder)/linux-musl-arm64/net5.0
+          rootFolderOrFile: $(artifactsFolder)/linux-musl-arm64/net6.0
      - task: ArchiveFiles@2
-        displayName: Create FreeBSD Core Core tar
+        displayName: Create freebsd-x64 tar
        inputs:
          archiveFile: '$(Build.ArtifactStagingDirectory)/Radarr.$(buildName).freebsd-core-x64.tar.gz'
          archiveType: 'tar'
          tarCompression: 'gz'
          includeRootFolder: false
-          rootFolderOrFile: $(artifactsFolder)/freebsd-x64/net5.0
+          rootFolderOrFile: $(artifactsFolder)/freebsd-x64/net6.0
      - publish: $(Build.ArtifactStagingDirectory)
        artifact: 'Packages'
        displayName: Publish Packages
@@ -360,7 +395,7 @@ stages:
    jobs:
    - job: Prepare
      pool:
-        vmImage: 'ubuntu-18.04'
+        vmImage: ${{ variables.linuxImage }}
      steps:
      - checkout: none
      - task: DownloadPipelineArtifact@2
@@ -382,22 +417,22 @@ stages:
        matrix:
          MacCore:
            osName: 'Mac'
-            testName: 'MacCore'
+            testName: 'osx-x64'
            poolName: 'Azure Pipelines'
-            imageName: 'macos-10.15'
+            imageName: ${{ variables.macImage }}
          WindowsCore:
            osName: 'Windows'
-            testName: 'WindowsCore'
+            testName: 'win-x64'
            poolName: 'Azure Pipelines'
-            imageName: 'windows-2019'
+            imageName: ${{ variables.windowsImage }}
          LinuxCore:
            osName: 'Linux'
-            testName: 'LinuxCore'
+            testName: 'linux-x64'
            poolName: 'Azure Pipelines'
-            imageName: 'ubuntu-18.04'
+            imageName: ${{ variables.linuxImage }}
          FreebsdCore:
            osName: 'Linux'
-            testName: 'FreebsdCore'
+            testName: 'freebsd-x64'
            poolName: 'FreeBSD'
            imageName:

@@ -416,7 +451,7 @@ stages:
        displayName: Download Test Artifact
        inputs:
          buildType: 'current'
-          artifactName: '$(testName)Tests'
+          artifactName: '$(testName)-tests'
          targetPath: $(testsFolder)
      - powershell: Set-Service SCardSvr -StartupType Manual
        displayName: Enable Windows Test Service
@@ -450,11 +485,15 @@ stages:
        matrix:
          alpine:
            testName: 'Musl Net Core'
-            artifactName: LinuxMuslCoreTests
+            artifactName: linux-musl-x64-tests
            containerImage: ghcr.io/servarr/testimages:alpine
+          linux-x86:
+            testName: 'linux-x86'
+            artifactName: linux-x86-tests
+            containerImage: ghcr.io/servarr/testimages:linux-x86

      pool:
-        vmImage: 'ubuntu-18.04'
+        vmImage: ${{ variables.linuxImage }}
      
      container: $[ variables['containerImage'] ]

@@ -462,9 +501,15 @@ stages:
        
      steps:
      - task: UseDotNet@2
-        displayName: 'Install .net core'
+        displayName: 'Install .NET'
        inputs:
          version: $(dotnetVersion)
+        condition: and(succeeded(), ne(variables['testName'], 'linux-x86'))
+      - bash: |
+          SDKURL=$(curl -s https://api.github.com/repos/Servarr/dotnet-linux-x86/releases | jq -rc '.[].assets[].browser_download_url' | grep sdk-${DOTNETVERSION}.*gz$)
+          curl -fsSL $SDKURL | tar xzf - -C /opt/dotnet
+        displayName: 'Install .NET'
+        condition: and(succeeded(), eq(variables['testName'], 'linux-x86'))
      - checkout: none
      - task: DownloadPipelineArtifact@2
        displayName: Download Test Artifact
@@ -490,6 +535,62 @@ stages:
          testResultsFiles: '**/TestResult.xml'
          testRunTitle: '$(testName) Unit Tests'
          failTaskOnFailedTests: true
+          
+    - job: Unit_LinuxCore_Postgres
+      displayName: Unit Native LinuxCore with Postgres Database
+      dependsOn: Prepare
+      condition: and(succeeded(), eq(dependencies.Prepare.outputs['setVar.backendNotUpdated'], '0'))
+      variables:
+        pattern: 'Radarr.*.linux-core-x64.tar.gz'
+        artifactName: linux-x64-tests
+        Radarr__Postgres__Host: 'localhost'
+        Radarr__Postgres__Port: '5432'
+        Radarr__Postgres__User: 'radarr'
+        Radarr__Postgres__Password: 'radarr'
+
+      pool:
+        vmImage: ${{ variables.linuxImage }}
+
+      timeoutInMinutes: 10
+        
+      steps:
+      - task: UseDotNet@2
+        displayName: 'Install .net core'
+        inputs:
+          version: $(dotnetVersion)
+      - checkout: none
+      - task: DownloadPipelineArtifact@2
+        displayName: Download Test Artifact
+        inputs:
+          buildType: 'current'
+          artifactName: $(artifactName)
+          targetPath: $(testsFolder)
+      - bash: |
+          chmod a+x _tests/ffprobe
+        displayName: Make ffprobe Executable
+      - bash: find ${TESTSFOLDER} -name "Radarr.Test.Dummy" -exec chmod a+x {} \;
+        displayName: Make Test Dummy Executable
+        condition: and(succeeded(), ne(variables['osName'], 'Windows'))
+      - bash: |
+          docker run -d --name=postgres14 \
+          -e POSTGRES_PASSWORD=radarr \
+          -e POSTGRES_USER=radarr \
+          -p 5432:5432/tcp \
+          -v /usr/share/zoneinfo/America/Chicago:/etc/localtime:ro \
+          postgres:14
+        displayName: Start postgres
+      - bash: |
+          chmod a+x ${TESTSFOLDER}/test.sh
+          ls -lR ${TESTSFOLDER}
+          ${TESTSFOLDER}/test.sh Linux Unit Test
+        displayName: Run Tests
+      - task: PublishTestResults@2
+        displayName: Publish Test Results
+        inputs:
+          testResultsFormat: 'NUnit'
+          testResultsFiles: '**/TestResult.xml'
+          testRunTitle: 'LinuxCore Postgres Unit Tests'
+          failTaskOnFailedTests: true

  - stage: Integration
    displayName: Integration
@@ -498,7 +599,7 @@ stages:
    jobs:
    - job: Prepare
      pool:
-        vmImage: 'ubuntu-18.04'
+        vmImage: ${{ variables.linuxImage }}
      steps:
      - checkout: none
      - task: DownloadPipelineArtifact@2
@@ -517,18 +618,18 @@ stages:
        matrix:
          MacCore:
            osName: 'Mac'
-            testName: 'MacCore'
-            imageName: 'macos-10.15'
+            testName: 'osx-x64'
+            imageName: ${{ variables.macImage }}
            pattern: 'Radarr.*.osx-core-x64.tar.gz'
          WindowsCore:
            osName: 'Windows'
-            testName: 'WindowsCore'
-            imageName: 'windows-2019'
+            testName: 'win-x64'
+            imageName: ${{ variables.windowsImage }}
            pattern: 'Radarr.*.windows-core-x64.zip'
          LinuxCore:
            osName: 'Linux'
-            testName: 'LinuxCore'
-            imageName: 'ubuntu-18.04'
+            testName: 'linux-x64'
+            imageName: ${{ variables.linuxImage }}
            pattern: 'Radarr.*.linux-core-x64.tar.gz'

      pool:
@@ -544,7 +645,7 @@ stages:
        displayName: Download Test Artifact
        inputs:
          buildType: 'current'
-          artifactName: '$(testName)Tests'
+          artifactName: '$(testName)-tests'
          targetPath: $(testsFolder)
      - task: DownloadPipelineArtifact@2
        displayName: Download Build Artifact
@@ -574,6 +675,68 @@ stages:
          failTaskOnFailedTests: true
        displayName: Publish Test Results

+    - job: Integration_LinuxCore_Postgres
+      displayName: Integration Native LinuxCore with Postgres Database
+      dependsOn: Prepare
+      condition: and(succeeded(), eq(dependencies.Prepare.outputs['setVar.backendNotUpdated'], '0'))
+      variables:
+        pattern: 'Radarr.*.linux-core-x64.tar.gz'
+        Radarr__Postgres__Host: 'localhost'
+        Radarr__Postgres__Port: '5432'
+        Radarr__Postgres__User: 'radarr'
+        Radarr__Postgres__Password: 'radarr'
+
+      pool:
+        vmImage: ${{ variables.linuxImage }}
+
+      steps:
+        - task: UseDotNet@2
+          displayName: 'Install .net core'
+          inputs:
+            version: $(dotnetVersion)
+        - checkout: none
+        - task: DownloadPipelineArtifact@2
+          displayName: Download Test Artifact
+          inputs:
+            buildType: 'current'
+            artifactName: 'linux-x64-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: |
+            docker run -d --name=postgres14 \
+            -e POSTGRES_PASSWORD=radarr \
+            -e POSTGRES_USER=radarr \
+            -p 5432:5432/tcp \
+            -v /usr/share/zoneinfo/America/Chicago:/etc/localtime:ro \
+            postgres:14
+          displayName: Start postgres
+        - 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: 'Integration LinuxCore Postgres Database Integration Tests'
+            failTaskOnFailedTests: true
+          displayName: Publish Test Results
+
    - job: Integration_FreeBSD
      displayName: Integration Native FreeBSD
      dependsOn: Prepare
@@ -591,14 +754,14 @@ stages:
        displayName: Download Test Artifact
        inputs:
          buildType: 'current'
-          artifactName: 'FreebsdCoreTests'
+          artifactName: 'freebsd-x64-tests'
          targetPath: $(testsFolder)
      - task: DownloadPipelineArtifact@2
        displayName: Download Build Artifact
        inputs:
          buildType: 'current'
          artifactName: Packages
-          itemPattern: '/$(pattern)'
+          itemPattern: '**/$(pattern)'
          targetPath: $(Build.ArtifactStagingDirectory)
      - bash: |
          mkdir -p ${BUILD_ARTIFACTSTAGINGDIRECTORY}/bin
@@ -627,12 +790,17 @@ stages:
      strategy:
        matrix:
          alpine:
-            testName: 'Musl Net Core'
-            artifactName: LinuxMuslCoreTests
+            testName: 'linux-musl-x64'
+            artifactName: linux-musl-x64-tests
            containerImage: ghcr.io/servarr/testimages:alpine
            pattern: 'Radarr.*.linux-musl-core-x64.tar.gz'
+          linux-x86:
+            testName: 'linux-x86'
+            artifactName: linux-x86-tests
+            containerImage: ghcr.io/servarr/testimages:linux-x86
+            pattern: 'Radarr.*.linux-core-x86.tar.gz'
      pool:
-        vmImage: 'ubuntu-18.04'
+        vmImage: ${{ variables.linuxImage }}

      container: $[ variables['containerImage'] ]

@@ -640,9 +808,15 @@ stages:
        
      steps:
      - task: UseDotNet@2
-        displayName: 'Install .net core'
+        displayName: 'Install .NET'
        inputs:
          version: $(dotnetVersion)
+        condition: and(succeeded(), ne(variables['testName'], 'linux-x86'))
+      - bash: |
+          SDKURL=$(curl -s https://api.github.com/repos/Servarr/dotnet-linux-x86/releases | jq -rc '.[].assets[].browser_download_url' | grep sdk-${DOTNETVERSION}.*gz$)
+          curl -fsSL $SDKURL | tar xzf - -C /opt/dotnet
+        displayName: 'Install .NET'
+        condition: and(succeeded(), eq(variables['testName'], 'linux-x86'))
      - checkout: none
      - task: DownloadPipelineArtifact@2
        displayName: Download Test Artifact
@@ -688,17 +862,20 @@ stages:
        matrix:
          Linux:
            osName: 'Linux'
-            imageName: 'ubuntu-18.04'
+            artifactName: 'linux-x64'
+            imageName: ${{ variables.linuxImage }}
            pattern: 'Radarr.*.linux-core-x64.tar.gz'
            failBuild: true
          Mac:
            osName: 'Mac'
-            imageName: 'macos-10.15'
+            artifactName: 'osx-x64'
+            imageName: ${{ variables.macImage }}
            pattern: 'Radarr.*.osx-core-x64.tar.gz'
            failBuild: true
          Windows:
            osName: 'Windows'
-            imageName: 'windows-2019'
+            artifactName: 'win-x64'
+            imageName: ${{ variables.windowsImage }}
            pattern: 'Radarr.*.windows-core-x64.zip'
            failBuild: true

@@ -715,7 +892,7 @@ stages:
        displayName: Download Test Artifact
        inputs:
          buildType: 'current'
-          artifactName: '$(osName)CoreTests'
+          artifactName: '$(artifactName)-tests'
          targetPath: $(testsFolder)
      - task: DownloadPipelineArtifact@2
        displayName: Download Build Artifact
@@ -764,7 +941,7 @@ stages:
    jobs:
    - job: Prepare
      pool:
-        vmImage: 'ubuntu-18.04'
+        vmImage: ${{ variables.linuxImage }}
      steps:
      - checkout: none
      - task: DownloadPipelineArtifact@2
@@ -781,17 +958,17 @@ stages:
        matrix:
          Linux:
            osName: 'Linux'
-            imageName: 'ubuntu-18.04'
+            imageName: ${{ variables.linuxImage }}
          Windows:
            osName: 'Windows'
-            imageName: 'windows-2019'
+            imageName: ${{ variables.windowsImage }}
      pool:
        vmImage: $(imageName)
      steps:
      - task: NodeTool@0
        displayName: Set Node.js version
        inputs:
-          versionSpec: '12.x'
+          versionSpec: $(nodeVersion)
      - checkout: self
        submodules: true
        fetchDepth: 1
@@ -800,7 +977,6 @@ stages:
          key: 'yarn | "$(osName)" | yarn.lock'
          restoreKeys: |
             yarn | "$(osName)"
-             yarn
          path: $(yarnCacheFolder)
        displayName: Cache Yarn packages
      - bash: ./build.sh --lint
@@ -813,7 +989,7 @@ stages:
      displayName: Frontend
      condition: eq(variables['System.PullRequest.IsFork'], 'False')
      pool:
-        vmImage: windows-2019
+        vmImage: ${{ variables.windowsImage }}
      steps:
      - checkout: self # Need history for Sonar analysis
      - task: SonarCloudPrepare@1
@@ -829,6 +1005,60 @@ stages:
          cliProjectVersion: '$(radarrVersion)'
          cliSources: './frontend'
      - task: SonarCloudAnalyze@1
+      
+    - job: Api_Docs
+      displayName: API Docs
+      dependsOn: Prepare
+      condition: |
+        and
+        (
+          and(succeeded(), eq(variables['Build.SourceBranch'], 'refs/heads/develop')),
+          and(succeeded(), eq(dependencies.Prepare.outputs['setVar.backendNotUpdated'], '0'))
+        )
+
+      pool:
+        vmImage: ${{ variables.windowsImage }}
+
+      steps:
+      - task: UseDotNet@2
+        displayName: 'Install .net core'
+        inputs:
+          version: $(dotnetVersion)
+      - checkout: self
+        submodules: true
+        persistCredentials: true
+        fetchDepth: 1    
+      - bash: ./docs.sh Windows
+        displayName: Create openapi.json
+      - bash: |
+          git config --global user.email "development@lidarr.audio"
+          git config --global user.name "Servarr"
+          git checkout -b api-docs
+          git add .
+          git status
+          if git status | grep modified
+          then
+            git commit -am 'Automated API Docs update'
+            git push -f --set-upstream origin api-docs
+            curl -X POST -H "Authorization: token ${GITHUBTOKEN}" -H "Accept: application/vnd.github.v3+json" https://api.github.com/repos/radarr/radarr/pulls -d '{"head":"api-docs","base":"develop","title":"Update API docs"}'
+          else
+            echo "No changes since last run"
+          fi
+        displayName: Commit API Doc Change
+        continueOnError: true
+        env:
+          GITHUBTOKEN: $(githubToken)
+      - task: CopyFiles@2
+        displayName: 'Copy openapi.json to: $(Build.ArtifactStagingDirectory)'
+        inputs:
+          SourceFolder: '$(Build.SourcesDirectory)'
+          Contents: |
+            **/*openapi.json
+          TargetFolder: '$(Build.ArtifactStagingDirectory)/api_docs'
+      - publish: $(Build.ArtifactStagingDirectory)/api_docs
+        artifact: 'APIDocs'
+        displayName: Publish API Docs Bundle
+        condition: and(succeeded(), eq(variables['System.JobAttempt'], '1'))

    - job: Analyze_Backend
      displayName: Backend
@@ -840,7 +1070,7 @@ stages:
        EnableAnalyzers: 'false'

      pool:
-        vmImage: windows-2019
+        vmImage: ${{ variables.windowsImage }}

      steps:
      - task: UseDotNet@2
@@ -866,8 +1096,8 @@ stages:
            sonar.cs.opencover.reportsPaths=$(Build.SourcesDirectory)/CoverageResults/**/coverage.opencover.xml
            sonar.cs.nunit.reportsPaths=$(Build.SourcesDirectory)/TestResult.xml
      - bash: |
-          ./build.sh --backend -f net5.0 -r win-x64
-          TEST_DIR=_tests/net5.0/win-x64/publish/ ./test.sh Windows Unit Coverage
+          ./build.sh --backend -f net6.0 -r win-x64
+          TEST_DIR=_tests/net6.0/win-x64/publish/ ./test.sh Windows Unit Coverage
        displayName: Coverage Unit Tests
      - task: SonarCloudAnalyze@1
        condition: eq(variables['System.PullRequest.IsFork'], 'False')
@@ -897,7 +1127,7 @@ stages:
    - job:
      displayName: Discord Notification
      pool:
-        vmImage: 'ubuntu-18.04'
+        vmImage: ${{ variables.linuxImage }}
      steps:
        - task: DownloadPipelineArtifact@2
          continueOnError: true
@@ -913,4 +1143,5 @@ stages:
            SYSTEM_ACCESSTOKEN: $(System.AccessToken)
            DISCORDCHANNELID: $(discordChannelId)
            DISCORDWEBHOOKKEY: $(discordWebhookKey)
+            DISCORDTHREADID: $(discordThreadId)

@@ -25,14 +25,22 @@ UpdateVersionNumber()
    fi
 }

-EnableBsdSupport()
+EnableExtraPlatformsInSDK()
 {
-    #todo enable sdk with
-    #SDK_PATH=$(dotnet --list-sdks | grep -P '5\.\d\.\d+' | head -1 | sed 's/\(5\.[0-9]*\.[0-9]*\).*\[\(.*\)\]/\2\/\1/g')
-    # BUNDLED_VERSIONS="${SDK_PATH}/Microsoft.NETCoreSdk.BundledVersions.props"
+    SDK_PATH=$(dotnet --list-sdks | grep -P '6\.\d\.\d+' | head -1 | sed 's/\(6\.[0-9]*\.[0-9]*\).*\[\(.*\)\]/\2\/\1/g')
+    BUNDLEDVERSIONS="${SDK_PATH}/Microsoft.NETCoreSdk.BundledVersions.props"
+    if grep -q freebsd-x64 $BUNDLEDVERSIONS; then
+        echo "Extra platforms already enabled"
+    else
+        echo "Enabling extra platform support"
+        sed -i.ORI 's/osx-x64/osx-x64;freebsd-x64;linux-x86/' $BUNDLEDVERSIONS
+    fi
+}

+EnableExtraPlatforms()
+{
    if grep -qv freebsd-x64 src/Directory.Build.props; then
-        sed -i'' -e "s^<RuntimeIdentifiers>\(.*\)</RuntimeIdentifiers>^<RuntimeIdentifiers>\1;freebsd-x64</RuntimeIdentifiers>^g" src/Directory.Build.props
+        sed -i'' -e "s^<RuntimeIdentifiers>\(.*\)</RuntimeIdentifiers>^<RuntimeIdentifiers>\1;freebsd-x64;linux-x86</RuntimeIdentifiers>^g" src/Directory.Build.props
    fi
 }

@@ -129,7 +137,7 @@ PackageLinux()

    echo "Adding Radarr.Mono to UpdatePackage"
    cp $folder/Radarr.Mono.* $folder/Radarr.Update
-    if [ "$framework" = "net5.0" ]; then
+    if [ "$framework" = "net6.0" ]; then
        cp $folder/Mono.Posix.NETStandard.* $folder/Radarr.Update
        cp $folder/libMonoPosixHelper.* $folder/Radarr.Update
    fi
@@ -140,12 +148,13 @@ PackageLinux()
 PackageMacOS()
 {
    local framework="$1"
+    local runtime="$2"
    
-    ProgressStart "Creating MacOS Package for $framework"
+    ProgressStart "Creating MacOS Package for $framework $runtime"

-    local folder=$artifactsFolder/macos/$framework/Radarr
+    local folder=$artifactsFolder/$runtime/$framework/Radarr

-    PackageFiles "$folder" "$framework" "osx-x64"
+    PackageFiles "$folder" "$framework" "$runtime"

    echo "Removing Service helpers"
    rm -f $folder/ServiceUninstall.*
@@ -156,7 +165,7 @@ PackageMacOS()

    echo "Adding Radarr.Mono to UpdatePackage"
    cp $folder/Radarr.Mono.* $folder/Radarr.Update
-    if [ "$framework" = "net5.0" ]; then
+    if [ "$framework" = "net6.0" ]; then
        cp $folder/Mono.Posix.NETStandard.* $folder/Radarr.Update
        cp $folder/libMonoPosixHelper.* $folder/Radarr.Update
    fi
@@ -167,10 +176,11 @@ PackageMacOS()
 PackageMacOSApp()
 {
    local framework="$1"
+    local runtime="$2"
    
-    ProgressStart "Creating macOS App Package for $framework"
+    ProgressStart "Creating macOS App Package for $framework $runtime"

-    local folder=$artifactsFolder/macos-app/$framework
+    local folder="$artifactsFolder/$runtime-app/$framework"

    rm -rf $folder
    mkdir -p $folder
@@ -178,7 +188,7 @@ PackageMacOSApp()
    mkdir -p $folder/Radarr.app/Contents/MacOS

    echo "Copying Binaries"
-    cp -r $artifactsFolder/macos/$framework/Radarr/* $folder/Radarr.app/Contents/MacOS
+    cp -r $artifactsFolder/$runtime/$framework/Radarr/* $folder/Radarr.app/Contents/MacOS

    echo "Removing Update Folder"
    rm -r $folder/Radarr.app/Contents/MacOS/Radarr.Update
@@ -225,12 +235,38 @@ Package()
            PackageWindows "$framework" "$runtime"
            ;;
        osx)
-            PackageMacOS "$framework"
-            PackageMacOSApp "$framework"
+            PackageMacOS "$framework" "$runtime"
+            PackageMacOSApp "$framework" "$runtime"
            ;;
    esac
 }

+BuildInstaller()
+{
+    local framework="$1"
+    local runtime="$2"
+    
+    ./_inno/ISCC.exe setup/radarr.iss "//DFramework=$framework" "//DRuntime=$runtime"
+}
+
+InstallInno()
+{
+    ProgressStart "Installing portable Inno Setup"
+    
+    rm -rf _inno
+    curl -s --output innosetup.exe "https://files.jrsoftware.org/is/6/innosetup-${INNOVERSION:-6.2.0}.exe"
+    mkdir _inno
+    ./innosetup.exe //portable=1 //silent //currentuser //dir=.\\_inno
+    rm innosetup.exe
+    
+    ProgressEnd "Installed portable Inno Setup"
+}
+
+RemoveInno()
+{
+    rm -rf _inno
+}
+
 PackageTests()
 {
    local framework="$1"
@@ -262,8 +298,10 @@ if [ $# -eq 0 ]; then
    BACKEND=YES
    FRONTEND=YES
    PACKAGES=YES
+    INSTALLER=NO
    LINT=YES
-    ENABLE_BSD=NO
+    ENABLE_EXTRA_PLATFORMS=NO
+    ENABLE_EXTRA_PLATFORMS_IN_SDK=NO
 fi

 while [[ $# -gt 0 ]]
@@ -275,8 +313,12 @@ case $key in
        BACKEND=YES
        shift # past argument
        ;;
-    --enable-bsd)
-        ENABLE_BSD=YES
+    --enable-bsd|--enable-extra-platforms)
+        ENABLE_EXTRA_PLATFORMS=YES
+        shift # past argument
+        ;;
+    --enable-extra-platforms-in-sdk)
+        ENABLE_EXTRA_PLATFORMS_IN_SDK=YES
        shift # past argument
        ;;
    -r|--runtime)
@@ -297,6 +339,10 @@ case $key in
        PACKAGES=YES
        shift # past argument
        ;;
+    --installer)
+        INSTALLER=YES
+        shift # past argument
+        ;;
    --lint)
        LINT=YES
        shift # past argument
@@ -316,24 +362,30 @@ esac
 done
 set -- "${POSITIONAL[@]}" # restore positional parameters

+if [ "$ENABLE_EXTRA_PLATFORMS_IN_SDK" = "YES" ];
+then
+    EnableExtraPlatformsInSDK
+fi
+
 if [ "$BACKEND" = "YES" ];
 then
    UpdateVersionNumber
-    if [ "$ENABLE_BSD" = "YES" ];
+    if [ "$ENABLE_EXTRA_PLATFORMS" = "YES" ];
    then
-        EnableBsdSupport
+        EnableExtraPlatforms
    fi
    Build
    if [[ -z "$RID" || -z "$FRAMEWORK" ]];
    then
-        PackageTests "net5.0" "win-x64"
-        PackageTests "net5.0" "win-x86"
-        PackageTests "net5.0" "linux-x64"
-        PackageTests "net5.0" "linux-musl-x64"
-        PackageTests "net5.0" "osx-x64"
-        if [ "$ENABLE_BSD" = "YES" ];
+        PackageTests "net6.0" "win-x64"
+        PackageTests "net6.0" "win-x86"
+        PackageTests "net6.0" "linux-x64"
+        PackageTests "net6.0" "linux-musl-x64"
+        PackageTests "net6.0" "osx-x64"
+        if [ "$ENABLE_EXTRA_PLATFORMS" = "YES" ];
        then
-            PackageTests "net5.0" "freebsd-x64"
+            PackageTests "net6.0" "freebsd-x64"
+            PackageTests "net6.0" "linux-x86"
        fi
    else
        PackageTests "$FRAMEWORK" "$RID"
@@ -362,19 +414,30 @@ then

    if [[ -z "$RID" || -z "$FRAMEWORK" ]];
    then
-        Package "net5.0" "win-x64"
-        Package "net5.0" "win-x86"
-        Package "net5.0" "linux-x64"
-        Package "net5.0" "linux-musl-x64"
-        Package "net5.0" "linux-arm64"
-        Package "net5.0" "linux-musl-arm64"
-        Package "net5.0" "linux-arm"
-        Package "net5.0" "osx-x64"
-        if [ "$ENABLE_BSD" = "YES" ];
+        Package "net6.0" "win-x64"
+        Package "net6.0" "win-x86"
+        Package "net6.0" "linux-x64"
+        Package "net6.0" "linux-musl-x64"
+        Package "net6.0" "linux-arm64"
+        Package "net6.0" "linux-musl-arm64"
+        Package "net6.0" "linux-arm"
+        Package "net6.0" "linux-musl-arm"
+        Package "net6.0" "osx-x64"
+        Package "net6.0" "osx-arm64"
+        if [ "$ENABLE_EXTRA_PLATFORMS" = "YES" ];
        then
-            Package "net5.0" "freebsd-x64"
+            Package "net6.0" "freebsd-x64"
+            Package "net6.0" "linux-x86"
        fi
    else
        Package "$FRAMEWORK" "$RID"
    fi
 fi
+
+if [ "$INSTALLER" = "YES" ];
+then
+    InstallInno
+    BuildInstaller "net6.0" "win-x64"
+    BuildInstaller "net6.0" "win-x86"
+    RemoveInno
+fi
@@ -0,0 +1,38 @@
+PLATFORM=$1
+
+if [ "$PLATFORM" = "Windows" ]; then
+  RUNTIME="win-x64"
+elif [ "$PLATFORM" = "Linux" ]; then
+  WHERE="linux-x64"
+elif [ "$PLATFORM" = "Mac" ]; then
+  WHERE="osx-x64"
+else
+  echo "Platform must be provided as first arguement: Windows, Linux or Mac"
+  exit 1
+fi
+
+outputFolder='_output'
+testPackageFolder='_tests'
+
+rm -rf $outputFolder
+rm -rf $testPackageFolder
+
+slnFile=src/Radarr.sln
+
+platform=Posix
+
+dotnet clean $slnFile -c Debug
+dotnet clean $slnFile -c Release
+
+dotnet msbuild -restore $slnFile -p:Configuration=Debug -p:Platform=$platform -p:RuntimeIdentifiers=$RUNTIME -t:PublishAllRids
+
+dotnet new tool-manifest
+dotnet tool install --version 6.3.0 Swashbuckle.AspNetCore.Cli
+
+dotnet tool run swagger tofile --output ./src/Radarr.Api.V3/openapi.json "$outputFolder/net6.0/$RUNTIME/radarr.console.dll" v3 &
+
+sleep 45
+
+kill %1
+
+exit 0
@@ -39,6 +39,7 @@ module.exports = {
  plugins: [
    'filenames',
    'react',
+    'react-hooks',
    'simple-import-sort',
    'import'
  ],
@@ -308,7 +309,9 @@ module.exports = {
    'react/react-in-jsx-scope': 2,
    'react/self-closing-comp': 2,
    'react/sort-comp': 2,
-    'react/jsx-wrap-multilines': 2
+    'react/jsx-wrap-multilines': 2,
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'error'
  },
  overrides: [
    {
@@ -223,7 +223,6 @@ module.exports = (env) => {
            {
              loader: 'url-loader',
              options: {
-                limit: 10240,
                mimetype: 'application/font-woff',
                emitFile: false,
                name: 'Content/Fonts/[name].[ext]'
@@ -1,7 +1,6 @@
 const reload = require('require-nocache')(module);

 const cssVarsFiles = [
-  './src/Styles/Variables/colors',
  './src/Styles/Variables/dimensions',
  './src/Styles/Variables/fonts',
  './src/Styles/Variables/animations',
@@ -29,4 +28,4 @@ module.exports = {
    'postcss-color-function',
    'postcss-nested'
  ]
-};
+};
@@ -61,33 +61,33 @@ class Blocklist extends Component {

  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);
    });
-  }
+  };

  onRemoveSelectedPress = () => {
    this.setState({ isConfirmRemoveModalOpen: true });
-  }
+  };

  onRemoveSelectedConfirmed = () => {
    this.props.onRemoveSelected(this.getSelectedIds());
    this.setState({ isConfirmRemoveModalOpen: false });
-  }
+  };

  onConfirmRemoveModalClose = () => {
    this.setState({ isConfirmRemoveModalOpen: false });
-  }
+  };

  //
  // Render
@@ -120,7 +120,7 @@ class Blocklist extends Component {
        <PageToolbar>
          <PageToolbarSection>
            <PageToolbarButton
-              label="Remove Selected"
+              label={translate('RemoveSelected')}
              iconName={icons.REMOVE}
              isDisabled={!selectedIds.length}
              isSpinning={isRemoving}
@@ -65,37 +65,37 @@ class BlocklistConnector extends Component {

  repopulate = () => {
    this.props.fetchBlocklist();
-  }
+  };
  //
  // Listeners

  onFirstPagePress = () => {
    this.props.gotoBlocklistFirstPage();
-  }
+  };

  onPreviousPagePress = () => {
    this.props.gotoBlocklistPreviousPage();
-  }
+  };

  onNextPagePress = () => {
    this.props.gotoBlocklistNextPage();
-  }
+  };

  onLastPagePress = () => {
    this.props.gotoBlocklistLastPage();
-  }
+  };

  onPageSelect = (page) => {
    this.props.gotoBlocklistPage({ page });
-  }
+  };

  onRemoveSelected = (ids) => {
    this.props.removeBlocklistItems({ ids });
-  }
+  };

  onSortPress = (sortKey) => {
    this.props.setBlocklistSort({ sortKey });
-  }
+  };

  onTableOptionChange = (payload) => {
    this.props.setBlocklistTableOption(payload);
@@ -103,11 +103,11 @@ class BlocklistConnector extends Component {
    if (payload.pageSize) {
      this.props.gotoBlocklistFirstPage();
    }
-  }
+  };

  onClearBlocklistPress = () => {
    this.props.executeCommand({ name: commandNames.CLEAR_BLOCKLIST });
-  }
+  };

  //
  // Render
@@ -32,11 +32,11 @@ class BlocklistRow extends Component {

  onDetailsPress = () => {
    this.setState({ isDetailsModalOpen: true });
-  }
+  };

  onDetailsModalClose = () => {
    this.setState({ isDetailsModalOpen: false });
-  }
+  };

  //
  // Render
@@ -25,6 +25,7 @@ function HistoryDetails(props) {
      releaseGroup,
      nzbInfoUrl,
      downloadClient,
+      downloadClientName,
      downloadId,
      age,
      ageHours,
@@ -32,6 +33,8 @@ function HistoryDetails(props) {
      publishedDate
    } = data;

+    const downloadClientNameInfo = downloadClientName ?? downloadClient;
+
    return (
      <DescriptionList>
        <DescriptionListItem
@@ -71,11 +74,12 @@ function HistoryDetails(props) {
        }

        {
-          !!downloadClient &&
+          downloadClientNameInfo ?
            <DescriptionListItem
              title={translate('DownloadClient')}
-              data={downloadClient}
-            />
+              data={downloadClientNameInfo}
+            /> :
+            null
        }

        {
@@ -57,38 +57,38 @@ class HistoryConnector extends Component {

  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);
@@ -96,7 +96,7 @@ class HistoryConnector extends Component {
    if (payload.pageSize) {
      this.props.gotoHistoryFirstPage();
    }
-  }
+  };

  //
  // Render
@@ -10,6 +10,12 @@
  width: 80px;
 }

+.customFormatScore {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 55px;
+}
+
 .releaseGroup {
  composes: cell from '~Components/Table/Cells/TableRowCell.css';

@@ -9,6 +9,7 @@ import MovieFormats from 'Movie/MovieFormats';
 import MovieLanguage from 'Movie/MovieLanguage';
 import MovieQuality from 'Movie/MovieQuality';
 import MovieTitleLink from 'Movie/MovieTitleLink';
+import formatCustomFormatScore from 'Utilities/Number/formatCustomFormatScore';
 import HistoryDetailsModal from './Details/HistoryDetailsModal';
 import HistoryEventTypeCell from './HistoryEventTypeCell';
 import styles from './HistoryRow.css';
@@ -41,11 +42,11 @@ class HistoryRow extends Component {

  onDetailsPress = () => {
    this.setState({ isDetailsModalOpen: true });
-  }
+  };

  onDetailsModalClose = () => {
    this.setState({ isDetailsModalOpen: false });
-  }
+  };

  //
  // Render
@@ -55,6 +56,7 @@ class HistoryRow extends Component {
      movie,
      quality,
      customFormats,
+      customFormatScore,
      languages,
      qualityCutoffNotMet,
      eventType,
@@ -168,6 +170,17 @@ class HistoryRow extends Component {
              );
            }

+            if (name === 'customFormatScore') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.customFormatScore}
+                >
+                  {formatCustomFormatScore(customFormatScore)}
+                </TableRowCell>
+              );
+            }
+
            if (name === 'releaseGroup') {
              return (
                <TableRowCell
@@ -179,6 +192,16 @@ class HistoryRow extends Component {
              );
            }

+            if (name === 'sourceTitle') {
+              return (
+                <TableRowCell
+                  key={name}
+                >
+                  {sourceTitle}
+                </TableRowCell>
+              );
+            }
+
            if (name === 'details') {
              return (
                <TableRowCell
@@ -219,8 +242,9 @@ HistoryRow.propTypes = {
  movie: PropTypes.object.isRequired,
  languages: PropTypes.arrayOf(PropTypes.object).isRequired,
  quality: PropTypes.object.isRequired,
+  customFormats: PropTypes.arrayOf(PropTypes.object),
+  customFormatScore: PropTypes.number.isRequired,
  qualityCutoffNotMet: PropTypes.bool.isRequired,
-  customFormats: PropTypes.arrayOf(PropTypes.object).isRequired,
  eventType: PropTypes.string.isRequired,
  sourceTitle: PropTypes.string.isRequired,
  date: PropTypes.string.isRequired,
@@ -46,7 +46,7 @@ class HistoryRowConnector extends Component {

  onMarkAsFailedPress = () => {
    this.props.markAsFailed({ id: this.props.id });
-  }
+  };

  //
  // Render
@@ -1,13 +1,13 @@
 .torrent {
  composes: label from '~Components/Label.css';

-  border-color: $torrentColor;
-  background-color: $torrentColor;
+  border-color: var(--torrentColor);
+  background-color: var(--torrentColor);
 }

 .usenet {
  composes: label from '~Components/Label.css';

-  border-color: $usenetColor;
-  background-color: $usenetColor;
+  border-color: var(--usenetColor);
+  background-color: var(--usenetColor);
 }
@@ -75,13 +75,23 @@ class Queue extends Component {
      return;
    }

+    const nextState = {};
+
+    if (prevProps.items !== items) {
+      nextState.items = items;
+    }
+
    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 });
+      nextState.isPendingSelected = isPendingSelected;
+    }
+
+    if (!_.isEmpty(nextState)) {
+      this.setState(nextState);
    }
  }

@@ -90,45 +100,45 @@ class Queue extends Component {

  getSelectedIds = () => {
    return getSelectedIds(this.state.selectedState);
-  }
+  };

  //
  // Listeners

  onQueueRowModalOpenOrClose = (isOpen) => {
    this._shouldBlockRefresh = isOpen;
-  }
+  };

  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 }, () => {
      this._shouldBlockRefresh = true;
    });
-  }
+  };

  onRemoveSelectedConfirmed = (payload) => {
    this._shouldBlockRefresh = false;
    this.props.onRemoveSelectedPress({ ids: this.getSelectedIds(), ...payload });
    this.setState({ isConfirmRemoveModalOpen: false });
-  }
+  };

  onConfirmRemoveModalClose = () => {
    this._shouldBlockRefresh = false;
    this.setState({ isConfirmRemoveModalOpen: false });
-  }
+  };

  //
  // Render
@@ -214,26 +224,29 @@ class Queue extends Component {

        <PageContentBody>
          {
-            isRefreshing && !isAllPopulated &&
-              <LoadingIndicator />
+            isRefreshing && !isAllPopulated ?
+              <LoadingIndicator /> :
+              null
          }

          {
-            !isRefreshing && hasError &&
+            !isRefreshing && hasError ?
              <div>
                {translate('FailedToLoadQueue')}
-              </div>
+              </div> :
+              null
          }

          {
-            isAllPopulated && !hasError && !items.length &&
+            isAllPopulated && !hasError && !items.length ?
              <div>
                {translate('QueueIsEmpty')}
-              </div>
+              </div> :
+              null
          }

          {
-            isAllPopulated && !hasError && !!items.length &&
+            isAllPopulated && !hasError && !!items.length ?
              <div>
                <Table
                  columns={columns}
@@ -268,7 +281,8 @@ class Queue extends Component {
                  isFetching={isRefreshing}
                  {...otherProps}
                />
-              </div>
+              </div> :
+              null
          }
        </PageContentBody>

@@ -77,34 +77,34 @@ class QueueConnector extends Component {

  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);
@@ -112,21 +112,21 @@ class QueueConnector extends Component {
    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
@@ -42,7 +42,7 @@ class QueueOptions extends Component {
        [name]: value
      });
    });
-  }
+  };

  //
  // Render
@@ -40,7 +40,7 @@ class QueueRow extends Component {

  onRemoveQueueItemPress = () => {
    this.setState({ isRemoveQueueItemModalOpen: true });
-  }
+  };

  onRemoveQueueItemModalConfirmed = (blocklist) => {
    const {
@@ -52,25 +52,25 @@ class QueueRow extends Component {
    onRemoveQueueItemPress(blocklist);

    this.setState({ isRemoveQueueItemModalOpen: false });
-  }
+  };

  onRemoveQueueItemModalClose = () => {
    this.props.onQueueRowModalOpenOrClose(false);

    this.setState({ isRemoveQueueItemModalOpen: false });
-  }
+  };

  onInteractiveImportPress = () => {
    this.props.onQueueRowModalOpenOrClose(true);

    this.setState({ isInteractiveImportModalOpen: true });
-  }
+  };

  onInteractiveImportModalClose = () => {
    this.props.onQueueRowModalOpenOrClose(false);

    this.setState({ isInteractiveImportModalOpen: false });
-  }
+  };

  //
  // Render
@@ -128,6 +128,7 @@ class QueueRow extends Component {

        {
          columns.map((column) => {
+
            const {
              name,
              isVisible
@@ -234,6 +235,16 @@ class QueueRow extends Component {
              );
            }

+            if (name === 'year') {
+              return (
+                <TableRowCell key={name}>
+                  {
+                    movie ? movie.year : ''
+                  }
+                </TableRowCell>
+              );
+            }
+
            if (name === 'title') {
              return (
                <TableRowCell key={name}>
@@ -362,6 +373,7 @@ QueueRow.propTypes = {
  estimatedCompletionTime: PropTypes.string,
  timeleft: PropTypes.string,
  size: PropTypes.number,
+  year: PropTypes.number,
  sizeleft: PropTypes.number,
  showRelativeDates: PropTypes.bool.isRequired,
  shortDateFormat: PropTypes.string.isRequired,
@@ -37,11 +37,11 @@ class QueueRowConnector extends Component {

  onGrabPress = () => {
    this.props.grabQueueItem({ id: this.props.id });
-  }
+  };

  onRemoveQueueItemPress = (payload) => {
    this.props.removeQueueItem({ id: this.props.id, ...payload });
-  }
+  };

  //
  // Render
@@ -34,30 +34,30 @@ class RemoveQueueItemModal extends Component {
      remove: true,
      blocklist: false
    });
-  }
+  };

  //
  // Listeners

  onRemoveChange = ({ value }) => {
    this.setState({ remove: value });
-  }
+  };

  onBlocklistChange = ({ value }) => {
    this.setState({ blocklist: value });
-  }
+  };

  onRemoveConfirmed = () => {
    const state = this.state;

    this.resetState();
    this.props.onRemovePress(state);
-  }
+  };

  onModalClose = () => {
    this.resetState();
    this.props.onModalClose();
-  }
+  };

  //
  // Render
@@ -30,35 +30,35 @@ class RemoveQueueItemsModal extends Component {
  //
  // Control

-   resetState = function() {
-     this.setState({
-       remove: true,
-       blocklist: false
-     });
-   }
+  resetState = function() {
+    this.setState({
+      remove: true,
+      blocklist: false
+    });
+  };

-   //
-   // Listeners
+  //
+  // Listeners

-   onRemoveChange = ({ value }) => {
-     this.setState({ remove: value });
-   }
+  onRemoveChange = ({ value }) => {
+    this.setState({ remove: value });
+  };

  onBlocklistChange = ({ value }) => {
    this.setState({ blocklist: value });
-  }
+  };

  onRemoveConfirmed = () => {
    const state = this.state;

    this.resetState();
    this.props.onRemovePress(state);
-  }
+  };

  onModalClose = () => {
    this.resetState();
    this.props.onModalClose();
-  }
+  };

  //
  // Render
@@ -6,12 +6,12 @@
 .searchIconContainer {
  width: 58px;
  height: 46px;
-  border: 1px solid $inputBorderColor;
+  border: 1px solid var(--inputBorderColor);
  border-right: none;
  border-radius: 4px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
-  background-color: #edf1f2;
+  background-color: var(--searchIconContainerBackgroundColor);
  text-align: center;
  line-height: 46px;
 }
@@ -25,7 +25,7 @@
 }

 .clearLookupButton {
-  border: 1px solid $inputBorderColor;
+  border: 1px solid var(--inputBorderColor);
  border-left: none;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
@@ -67,12 +67,12 @@ class AddNewMovie extends Component {
        this.props.onClearMovieLookup();
      }
    });
-  }
+  };

  onClearMovieLookupPress = () => {
    this.setState({ term: '' });
    this.props.onClearMovieLookup();
-  }
+  };

  //
  // Render
@@ -161,7 +161,7 @@ class AddNewMovie extends Component {
                  {translate('YouCanAlsoSearch')}
                </div>
                <div>
-                  <Link to="https://wiki.servarr.com/radarr/faq#why-cant-i-add-a-new-movie-to-radarr">
+                  <Link to="https://wiki.servarr.com/radarr/faq#why-can-i-not-add-a-new-movie-to-radarr">
                    {translate('CantFindMovie')}
                  </Link>
                </div>
@@ -79,11 +79,11 @@ class AddNewMovieConnector extends Component {
        this.props.lookupMovie({ term });
      }, 300);
    }
-  }
+  };

  onClearMovieLookup = () => {
    this.props.clearAddMovie();
-  }
+  };

  //
  // Render
@@ -4,7 +4,7 @@

 .year {
  margin-left: 5px;
-  color: $disabledColor;
+  color: var(--disabledColor);
 }

 .poster {
@@ -22,11 +22,11 @@ class AddNewMovieModalContent extends Component {

  onQualityProfileIdChange = ({ value }) => {
    this.props.onInputChange({ name: 'qualityProfileId', value: parseInt(value) });
-  }
+  };

  onAddMoviePress = () => {
    this.props.onAddMoviePress();
-  }
+  };

  //
  // Render
@@ -51,7 +51,7 @@ class AddNewMovieModalContentConnector extends Component {

  onInputChange = ({ name, value }) => {
    this.props.setAddMovieDefault({ [name]: value });
-  }
+  };

  onAddMoviePress = () => {
    const {
@@ -73,7 +73,7 @@ class AddNewMovieModalContentConnector extends Component {
      searchForMovie: searchForMovie.value,
      tags: tags.value
    });
-  }
+  };

  //
  // Render
@@ -9,13 +9,15 @@
 .underlay {
  @add-mixin cover;

-  background-color: $white;
+  background-color: var(--addMovieBackgroundColor);
  transition: background 500ms;

  &:hover {
-    background-color: #eaf2ff;
+    background-color: var(--pageBackground);
+    box-shadow: 0 0 12px var(--black);
    color: inherit;
    text-decoration: none;
+    transition: all 200ms ease-in;
  }
 }

@@ -31,7 +33,7 @@
  display: block;
  margin-right: 20px;
  height: 250px;
-  background-color: $defaultColor;
+  background-color: var(--defaultColor);
 }

 .content {
@@ -56,7 +58,7 @@

 .year {
  margin-left: 10px;
-  color: $disabledColor;
+  color: var(--disabledColor);
 }

 .icons {
@@ -75,7 +77,7 @@

 .exclusionIcon {
  margin-left: 10px;
-  color: $dangerColor;
+  color: var(--dangerColor);
  pointer-events: all;
 }

@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import HeartRating from 'Components/HeartRating';
 import Icon from 'Components/Icon';
 import Label from 'Components/Label';
 import Link from 'Components/Link/Link';
+import TmdbRating from 'Components/TmdbRating';
 import Tooltip from 'Components/Tooltip/Tooltip';
 import { icons, kinds, sizes, tooltipPositions } from 'Helpers/Props';
 import MovieDetailsLinks from 'Movie/Details/MovieDetailsLinks';
@@ -39,15 +39,15 @@ class AddNewMovieSearchResult extends Component {

  onPress = () => {
    this.setState({ isNewAddMovieModalOpen: true });
-  }
+  };

  onAddMovieModalClose = () => {
    this.setState({ isNewAddMovieModalOpen: false });
-  }
+  };

  onExternalLinkPress = (event) => {
    event.stopPropagation();
-  }
+  };

  //
  // Render
@@ -86,6 +86,13 @@ class AddNewMovieSearchResult extends Component {
    } = this.state;

    const linkProps = isExistingMovie ? { to: `/movie/${titleSlug}` } : { onPress: this.onPress };
+    const posterWidth = 167;
+    const posterHeight = 250;
+
+    const elementStyle = {
+      width: `${posterWidth}px`,
+      height: `${posterHeight}px`
+    };

    return (
      <div className={styles.searchResult}>
@@ -102,6 +109,7 @@ class AddNewMovieSearchResult extends Component {
                <div className={styles.posterContainer}>
                  <MoviePoster
                    className={styles.poster}
+                    style={elementStyle}
                    images={images}
                    size={250}
                    overflow={true}
@@ -114,7 +122,7 @@ class AddNewMovieSearchResult extends Component {
                      monitored={monitored}
                      hasFile={hasFile}
                      status={status}
-                      posterWidth={167}
+                      posterWidth={posterWidth}
                      detailedProgressBar={true}
                      queueStatus={queueStatus}
                      queueState={queueState}
@@ -182,8 +190,8 @@ class AddNewMovieSearchResult extends Component {

            <div>
              <Label size={sizes.LARGE}>
-                <HeartRating
-                  rating={ratings.value}
+                <TmdbRating
+                  ratings={ratings}
                  iconSize={13}
                />
              </Label>
@@ -32,25 +32,25 @@ class ImportMovie extends Component {

  setScrollerRef = (ref) => {
    this.setState({ scroller: ref });
-  }
+  };

  //
  // Listeners

  getSelectedIds = () => {
    return getSelectedIds(this.state.selectedState, { parseIds: false });
-  }
+  };

  onSelectAllChange = ({ value }) => {
    // Only select non-dupes
    this.setState(selectAll(this.state.selectedState, value));
-  }
+  };

  onSelectedChange = ({ id, value, shiftKey = false }) => {
    this.setState((state) => {
      return toggleSelected(state, this.props.items, id, value, shiftKey);
    });
-  }
+  };

  onRemoveSelectedStateItem = (id) => {
    this.setState((state) => {
@@ -62,15 +62,15 @@ class ImportMovie extends Component {
        selectedState
      };
    });
-  }
+  };

  onInputChange = ({ name, value }) => {
    this.props.onInputChange(this.getSelectedIds(), name, value);
-  }
+  };

  onImportPress = () => {
    this.props.onImportPress(this.getSelectedIds());
-  }
+  };

  //
  // Render
@@ -112,11 +112,11 @@ class ImportMovieConnector extends Component {
        [name]: value
      });
    });
-  }
+  };

  onImportPress = (ids) => {
    this.props.dispatchImportMovie({ ids });
-  }
+  };

  //
  // Render
@@ -83,7 +83,7 @@ class ImportMovieFooter extends Component {
  onInputChange = ({ name, value }) => {
    this.setState({ [name]: value });
    this.props.onInputChange({ name, value });
-  }
+  };

  //
  // Render
@@ -225,13 +225,19 @@ class ImportMovieFooter extends Component {
                  body={
                    <ul>
                      {
-                        importError.responseJSON.map((error, index) => {
-                          return (
-                            <li key={index}>
-                              {error.errorMessage}
-                            </li>
-                          );
-                        })
+                        Array.isArray(importError.responseJSON) ?
+                          importError.responseJSON.map((error, index) => {
+                            return (
+                              <li key={index}>
+                                {error.errorMessage}
+                              </li>
+                            );
+                          }) :
+                          <li>
+                            {
+                              JSON.stringify(importError.responseJSON)
+                            }
+                          </li>
                      }
                    </ul>
                  }
@@ -48,7 +48,7 @@ class ImportMovieRowConnector extends Component {
      id: this.props.id,
      [name]: value
    });
-  }
+  };

  //
  // Render
@@ -121,7 +121,7 @@ class ImportMovieTable extends Component {
        />
      </VirtualTableRow>
    );
-  }
+  };

  //
  // Render
@@ -1,8 +1,25 @@
-.movie {
+.container {
+  display: flex;
  padding: 10px 20px;
  width: 100%;

  &:hover {
-    background-color: $menuItemHoverBackgroundColor;
+    background-color: var(--menuItemHoverBackgroundColor);
  }
 }
+
+.movie {
+  flex: 1 0 0;
+  overflow: hidden;
+}
+
+.tmdbLink {
+  composes: link from '~Components/Link/Link.css';
+
+  margin-left: auto;
+  color: var(--textColor);
+}
+
+.tmdbLinkIcon {
+  margin-left: 10px;
+}
@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
+import { icons } from 'Helpers/Props';
 import ImportMovieTitle from './ImportMovieTitle';
 import styles from './ImportMovieSearchResult.css';

@@ -11,13 +13,14 @@ class ImportMovieSearchResult extends Component {

  onPress = () => {
    this.props.onPress(this.props.tmdbId);
-  }
+  };

  //
  // Render

  render() {
    const {
+      tmdbId,
      title,
      year,
      studio,
@@ -25,17 +28,30 @@ class ImportMovieSearchResult extends Component {
    } = this.props;

    return (
-      <Link
-        className={styles.movie}
-        onPress={this.onPress}
-      >
-        <ImportMovieTitle
-          title={title}
-          year={year}
-          network={studio}
-          isExistingMovie={isExistingMovie}
-        />
-      </Link>
+      <div className={styles.container}>
+        <Link
+          className={styles.movie}
+          onPress={this.onPress}
+        >
+          <ImportMovieTitle
+            title={title}
+            year={year}
+            network={studio}
+            isExistingMovie={isExistingMovie}
+          />
+        </Link>
+
+        <Link
+          className={styles.tmdbLink}
+          to={`https://www.themoviedb.org/movie/${tmdbId}`}
+        >
+          <Icon
+            className={styles.tmdbLinkIcon}
+            name={icons.EXTERNAL_LINK}
+            size={16}
+          />
+        </Link>
+      </div>
    );
  }
 }
@@ -7,10 +7,10 @@
  padding: 6px 16px;
  width: 100%;
  height: 35px;
-  border: 1px solid $inputBorderColor;
+  border: 1px solid var(--inputBorderColor);
  border-radius: 4px;
-  background-color: $white;
-  box-shadow: inset 0 1px 1px $inputBoxShadowColor;
+  background-color: var(--inputBackgroundColor);
+  box-shadow: inset 0 1px 1px var(--inputBoxShadowColor);
 }

 .loading {
@@ -38,9 +38,9 @@

 .content {
  padding: 4px;
-  border: 1px solid $inputBorderColor;
+  border: 1px solid var(--inputBorderColor);
  border-radius: 4px;
-  background-color: $white;
+  background-color: var(--inputBackgroundColor);
 }

 .searchContainer {
@@ -49,12 +49,12 @@

 .searchIconContainer {
  width: 58px;
-  border: 1px solid $inputBorderColor;
+  border: 1px solid var(--inputBorderColor);
  border-right: none;
  border-radius: 4px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
-  background-color: #edf1f2;
+  background-color: var(--searchIconContainerBackgroundColor);
  text-align: center;
  line-height: 33px;
 }
@@ -69,7 +69,7 @@ class ImportMovieSelectMovie extends Component {
      this.setState({ isOpen: false });
      this._removeListener();
    }
-  }
+  };

  onPress = () => {
    if (this.state.isOpen) {
@@ -79,7 +79,7 @@ class ImportMovieSelectMovie extends Component {
    }

    this.setState({ isOpen: !this.state.isOpen });
-  }
+  };

  onSearchInputChange = ({ value }) => {
    if (this._movieLookupTimeout) {
@@ -91,17 +91,17 @@ class ImportMovieSelectMovie extends Component {
        this.props.onSearchInputChange(value);
      }, 200);
    });
-  }
+  };

  onRefreshPress = () => {
    this.props.onSearchInputChange(this.state.term);
-  }
+  };

  onMovieSelect = (tmdbId) => {
    this.setState({ isOpen: false });

    this.props.onMovieSelect(tmdbId);
-  }
+  };

  //
  // Render
@@ -36,7 +36,7 @@ class ImportMovieSelectMovieConnector extends Component {
      term,
      topOfQueue: true
    });
-  }
+  };

  onMovieSelect = (tmdbId) => {
    const {
@@ -48,7 +48,7 @@ class ImportMovieSelectMovieConnector extends Component {
      id,
      selectedMovie: _.find(items, { tmdbId })
    });
-  }
+  };

  //
  // Render
@@ -9,7 +9,7 @@

 .year {
  margin-left: 5px;
-  color: $disabledColor;
+  color: var(--disabledColor);
 }

 .existing {
@@ -25,7 +25,7 @@ class ImportMovieRootFolderRowConnector extends Component {

  onDeletePress = () => {
    this.props.deleteRootFolder({ id: this.props.id });
-  }
+  };

  //
  // Render
@@ -55,15 +55,15 @@ class ImportMovieSelectFolder extends Component {

  onAddNewRootFolderPress = () => {
    this.setState({ isAddNewRootFolderModalOpen: true });
-  }
+  };

  onNewRootFolderSelect = ({ value }) => {
    this.props.onNewRootFolderSelect(value);
-  }
+  };

  onAddRootFolderModalClose = () => {
    this.setState({ isAddNewRootFolderModalOpen: false });
-  }
+  };

  //
  // Render
@@ -152,13 +152,19 @@ class ImportMovieSelectFolder extends Component {

                      <ul>
                        {
-                          saveError.responseJSON.map((e, index) => {
-                            return (
-                              <li key={index}>
-                                {e.errorMessage}
-                              </li>
-                            );
-                          })
+                          Array.isArray(saveError.responseJSON) ?
+                            saveError.responseJSON.map((e, index) => {
+                              return (
+                                <li key={index}>
+                                  {e.errorMessage}
+                                </li>
+                              );
+                            }) :
+                            <li>
+                              {
+                                JSON.stringify(saveError.responseJSON)
+                              }
+                            </li>
                        }
                      </ul>
                    </Alert> :
@@ -58,11 +58,11 @@ class ImportMovieSelectFolderConnector extends Component {

  onNewRootFolderSelect = (path) => {
    this.props.addRootFolder({ path });
-  }
+  };

  onDeleteRootFolderPress = (id) => {
    this.props.deleteRootFolder({ id });
-  }
+  };

  //
  // Render
@@ -4,16 +4,19 @@ import React from 'react';
 import DocumentTitle from 'react-document-title';
 import { Provider } from 'react-redux';
 import PageConnector from 'Components/Page/PageConnector';
+import ApplyTheme from './ApplyTheme';
 import AppRoutes from './AppRoutes';

 function App({ store, history }) {
  return (
-    <DocumentTitle title="Radarr">
+    <DocumentTitle title={window.Radarr.instanceName}>
      <Provider store={store}>
        <ConnectedRouter history={history}>
-          <PageConnector>
-            <AppRoutes app={App} />
-          </PageConnector>
+          <ApplyTheme>
+            <PageConnector>
+              <AppRoutes app={App} />
+            </PageConnector>
+          </ApplyTheme>
        </ConnectedRouter>
      </Provider>
    </DocumentTitle>
@@ -7,6 +7,7 @@ import QueueConnector from 'Activity/Queue/QueueConnector';
 import AddNewMovieConnector from 'AddMovie/AddNewMovie/AddNewMovieConnector';
 import ImportMovies from 'AddMovie/ImportMovie/ImportMovies';
 import CalendarPageConnector from 'Calendar/CalendarPageConnector';
+import CollectionConnector from 'Collection/CollectionConnector';
 import NotFound from 'Components/NotFound';
 import Switch from 'Components/Router/Switch';
 import DiscoverMovieConnector from 'DiscoverMovie/DiscoverMovieConnector';
@@ -21,7 +22,7 @@ import MediaManagementConnector from 'Settings/MediaManagement/MediaManagementCo
 import MetadataSettings from 'Settings/Metadata/MetadataSettings';
 import NotificationSettings from 'Settings/Notifications/NotificationSettings';
 import Profiles from 'Settings/Profiles/Profiles';
-import Quality from 'Settings/Quality/Quality';
+import QualityConnector from 'Settings/Quality/QualityConnector';
 import Settings from 'Settings/Settings';
 import TagSettings from 'Settings/Tags/TagSettings';
 import UISettingsConnector from 'Settings/UI/UISettingsConnector';
@@ -72,6 +73,11 @@ function AppRoutes(props) {
        component={AddNewMovieConnector}
      />

+      <Route
+        path="/collections"
+        component={CollectionConnector}
+      />
+
      <Route
        path="/add/import"
        component={ImportMovies}
@@ -137,7 +143,7 @@ function AppRoutes(props) {

      <Route
        path="/settings/quality"
-        component={Quality}
+        component={QualityConnector}
      />

      <Route
@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types';
+import React, { Fragment, useCallback, useEffect } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import themes from 'Styles/Themes';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.settings.ui.item.theme || window.Radarr.theme,
+    (
+      theme
+    ) => {
+      return {
+        theme
+      };
+    }
+  );
+}
+
+function ApplyTheme({ theme, children }) {
+  // Update the CSS Variables
+  const updateCSSVariables = useCallback(() => {
+    const arrayOfVariableKeys = Object.keys(themes[theme]);
+    const arrayOfVariableValues = Object.values(themes[theme]);
+
+    // Loop through each array key and set the CSS Variables
+    arrayOfVariableKeys.forEach((cssVariableKey, index) => {
+      // Based on our snippet from MDN
+      document.documentElement.style.setProperty(
+        `--${cssVariableKey}`,
+        arrayOfVariableValues[index]
+      );
+    });
+  }, [theme]);
+
+  // On Component Mount and Component Update
+  useEffect(() => {
+    updateCSSVariables(theme);
+  }, [updateCSSVariables, theme]);
+
+  return <Fragment>{children}</Fragment>;
+}
+
+ApplyTheme.propTypes = {
+  theme: PropTypes.string.isRequired,
+  children: PropTypes.object.isRequired
+};
+
+export default connect(createMapStateToProps)(ApplyTheme);
@@ -2,11 +2,11 @@
  display: flex;
  overflow-x: hidden;
  padding: 5px;
-  border-bottom: 1px solid $borderColor;
+  border-bottom: 1px solid var(--borderColor);
  font-size: $defaultFontSize;

  &:hover {
-    background-color: $tableRowHoverBackgroundColor;
+    background-color: var(--tableRowHoverBackgroundColor);
  }
 }

@@ -27,11 +27,11 @@ class AgendaEvent extends Component {

  onPress = () => {
    this.setState({ isDetailsModalOpen: true });
-  }
+  };

  onDetailsModalClose = () => {
    this.setState({ isDetailsModalOpen: false });
-  }
+  };

  //
  // Render
@@ -119,43 +119,43 @@ class CalendarConnector extends Component {

    this.props.fetchQueueDetails({ time, view });
    this.props.fetchCalendar({ time, view });
-  }
+  };

  scheduleUpdate = () => {
    this.clearUpdateTimeout();

    this.updateTimeoutId = setTimeout(this.updateCalendar, UPDATE_DELAY);
-  }
+  };

  clearUpdateTimeout = () => {
    if (this.updateTimeoutId) {
      clearTimeout(this.updateTimeoutId);
    }
-  }
+  };

  updateCalendar = () => {
    this.props.gotoCalendarToday();
    this.scheduleUpdate();
-  }
+  };

  //
  // Listeners

  onCalendarViewChange = (view) => {
    this.props.setCalendarView({ view });
-  }
+  };

  onTodayPress = () => {
    this.props.gotoCalendarToday();
-  }
+  };

  onPreviousPress = () => {
    this.props.gotoCalendarPreviousRange();
-  }
+  };

  onNextPress = () => {
    this.props.gotoCalendarNextRange();
-  }
+  };

  //
  // Render
@@ -44,23 +44,23 @@ class CalendarPage extends Component {
    const days = Math.max(3, Math.min(7, Math.floor(width / MINIMUM_DAY_WIDTH)));

    this.props.onDaysCountChange(days);
-  }
+  };

  onGetCalendarLinkPress = () => {
    this.setState({ isCalendarLinkModalOpen: true });
-  }
+  };

  onGetCalendarLinkModalClose = () => {
    this.setState({ isCalendarLinkModalOpen: false });
-  }
+  };

  onOptionsPress = () => {
    this.setState({ isOptionsModalOpen: true });
-  }
+  };

  onOptionsModalClose = () => {
    this.setState({ isOptionsModalOpen: false });
-  }
+  };

  onSearchMissingPress = () => {
    const {
@@ -69,7 +69,7 @@ class CalendarPage extends Component {
    } = this.props;

    onSearchMissingPress(missingMovieIds);
-  }
+  };

  //
  // Render
@@ -2,8 +2,8 @@
  flex: 1 0 14.28%;
  overflow: hidden;
  min-height: 70px;
-  border-bottom: 1px solid $calendarBorderColor;
-  border-left: 1px solid $calendarBorderColor;
+  border-bottom: 1px solid var(--calendarBorderColor);
+  border-left: 1px solid var(--calendarBorderColor);
 }

 .isSingleDay {
@@ -12,14 +12,14 @@

 .dayOfMonth {
  padding-right: 5px;
-  border-bottom: 1px solid $calendarBorderColor;
+  border-bottom: 1px solid var(--calendarBorderColor);
  text-align: right;
 }

 .isToday {
-  background-color: $calendarTodayBackgroundColor;
+  background-color: var(--calendarTodayBackgroundColor);
 }

 .isDifferentMonth {
-  color: $disabledColor;
+  color: var(--disabledColor);
 }
@@ -1,6 +1,6 @@
 .days {
  display: flex;
-  border-right: 1px solid $calendarBorderColor;
+  border-right: 1px solid var(--calendarBorderColor);
 }

 .day,
@@ -60,20 +60,20 @@ class CalendarDays extends Component {
    this.setState({ todaysDate: todaysDate.toISOString() });

    this.updateTimeoutId = setTimeout(this.scheduleUpdate, diff);
-  }
+  };

  clearUpdateTimeout = () => {
    if (this.updateTimeoutId) {
      clearTimeout(this.updateTimeoutId);
    }
-  }
+  };

  //
  // Listeners

  onEventModalOpenToggle = (isEventModalOpen) => {
    this.setState({ isEventModalOpen });
-  }
+  };

  onTouchStart = (event) => {
    const touches = event.touches;
@@ -92,7 +92,7 @@ class CalendarDays extends Component {
    }

    this._touchStart = touchStart;
-  }
+  };

  onTouchEnd = (event) => {
    const touches = event.changedTouches;
@@ -109,17 +109,17 @@ class CalendarDays extends Component {
    }

    this._touchStart = null;
-  }
+  };

  onTouchCancel = (event) => {
    this._touchStart = null;
-  }
+  };

  onTouchMove = (event) => {
    if (!this._touchStart) {
      return;
    }
-  }
+  };

  //
  // Render
@@ -1,6 +1,6 @@
 .dayOfWeek {
  flex: 1 0 14.28%;
-  background-color: #e4eaec;
+  background-color: var(--calendarBackgroudColor);
  text-align: center;
 }

@@ -9,5 +9,5 @@
 }

 .isToday {
-  background-color: $calendarTodayBackgroundColor;
+  background-color: var(--calendarTodayBackgroundColor);
 }
@@ -47,13 +47,13 @@ class DaysOfWeek extends Component {
    });

    this.updateTimeoutId = setTimeout(this.scheduleUpdate, diff);
-  }
+  };

  clearUpdateTimeout = () => {
    if (this.updateTimeoutId) {
      clearTimeout(this.updateTimeoutId);
    }
-  }
+  };

  //
  // Render
@@ -2,8 +2,8 @@
  overflow-x: hidden;
  margin: 4px 2px;
  padding: 5px;
-  border-bottom: 1px solid $borderColor;
-  border-left: 4px solid $borderColor;
+  border-bottom: 1px solid var(--calendarBorderColor);
+  border-left: 4px solid var(--calendarBorderColor);
  font-size: 12px;

  &:global(.colorImpaired) {
@@ -15,10 +15,10 @@
  composes: link from '~Components/Link/Link.css';

  display: block;
-  color: $defaultColor;
+  color: var(--defaultColor);

  &:hover {
-    color: $defaultColor;
+    color: var(--defaultColor);
    text-decoration: none;
  }
 }
@@ -29,7 +29,7 @@
 }

 .movieInfo {
-  color: $calendarTextDim;
+  color: var(--calendarTextDim);
 }

 .movieTitle,
@@ -40,7 +40,7 @@
 }

 .movieTitle {
-  color: #3a3f51;
+  color: var(--calendarTextDimAlternate);
  font-size: $defaultFontSize;
 }

@@ -53,37 +53,37 @@
 */

 .downloaded {
-  border-left-color: $successColor !important;
+  border-left-color: var(--successColor) !important;

  &:global(.colorImpaired) {
-    border-left-color: color($successColor, saturation(+15%)) !important;
+    border-left-color: color(var(--successColor), saturation(+15%)) !important;
  }
 }

 .queue {
-  border-left-color: $purple !important;
+  border-left-color: var(--purple) !important;
 }

 .unmonitored {
-  border-left-color: $gray !important;
+  border-left-color: var(--gray) !important;
 }

 .missingUnmonitored {
-  border-left-color: $warningColor !important;
+  border-left-color: var(--warningColor) !important;

  &:global(.colorImpaired) {
-    background: repeating-linear-gradient(45deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
+    background: repeating-linear-gradient(45deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px);
  }
 }

 .missingMonitored {
-  border-left-color: $dangerColor !important;
+  border-left-color: var(--dangerColor) !important;

  &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
+    background: repeating-linear-gradient(90deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px);
  }
 }

 .continuing {
-  border-left-color: $primaryColor !important;
+  border-left-color: var(--primaryColor) !important;
 }
@@ -43,15 +43,15 @@ class CalendarEvent extends Component {
    const link = `/movie/${titleSlug}`;
    const eventType = [];

-    if (moment(date).isSame(moment(inCinemas), 'day')) {
+    if (inCinemas && moment(date).isSame(moment(inCinemas), 'day')) {
      eventType.push('Cinemas');
    }

-    if (moment(date).isSame(moment(physicalRelease), 'day')) {
+    if (physicalRelease && moment(date).isSame(moment(physicalRelease), 'day')) {
      eventType.push('Physical');
    }

-    if (moment(date).isSame(moment(digitalRelease), 'day')) {
+    if (digitalRelease && moment(date).isSame(moment(digitalRelease), 'day')) {
      eventType.push('Digital');
    }

@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import QueueDetails from 'Activity/Queue/QueueDetails';
 import CircularProgressBar from 'Components/CircularProgressBar';
-import colors from 'Styles/Variables/colors';
 import translate from 'Utilities/String/translate';

 function CalendarEventQueueDetails(props) {
@@ -35,7 +34,7 @@ function CalendarEventQueueDetails(props) {
            progress={progress}
            size={20}
            strokeWidth={2}
-            strokeColor={colors.purple}
+            strokeColor={'#7a43b6'}
          />
        </div>
      }
@@ -71,7 +71,7 @@ class CalendarHeader extends Component {
    this.setState({ view }, () => {
      this.props.onViewChange(view);
    });
-  }
+  };

  //
  // Render
@@ -41,19 +41,19 @@ class CalendarHeaderConnector extends Component {

  onViewChange = (view) => {
    this.props.setCalendarView({ view });
-  }
+  };

  onTodayPress = () => {
    this.props.gotoCalendarToday();
-  }
+  };

  onPreviousPress = () => {
    this.props.gotoCalendarPreviousRange();
-  }
+  };

  onNextPress = () => {
    this.props.gotoCalendarNextRange();
-  }
+  };

  //
  // Render
@@ -12,7 +12,7 @@ class CalendarHeaderViewButton extends Component {

  onPress = () => {
    this.props.onPress(this.props.view);
-  }
+  };

  //
  // Render
@@ -20,53 +20,53 @@
 .queue {
  composes: legendItemColor;

-  background-color: $queueColor;
+  background-color: var(--queueColor);
 }

 .continuing {
  composes: legendItemColor;

-  background-color: $primaryColor;
+  background-color: var(--primaryColor);
 }

 .availNotMonitored {
  composes: legendItemColor;

-  background-color: $darkGray;
+  background-color: var(--darkGray);
 }

 .ended {
  composes: legendItemColor;

-  background-color: $successColor;
+  background-color: var(--successColor);
 }

 .missingMonitored {
  composes: legendItemColor;

-  background-color: $dangerColor;
+  background-color: var(--dangerColor);

  &:global(.colorImpaired) {
-    background: repeating-linear-gradient(90deg, color($dangerColor shade(5%)), color($dangerColor shade(5%)) 5px, color($dangerColor shade(15%)) 5px, color($dangerColor shade(15%)) 10px);
+    background: repeating-linear-gradient(90deg, color(var(--dangerColor) shade(5%)), color(var(--dangerColor) shade(5%)) 5px, color(var(--dangerColor) shade(15%)) 5px, color(var(--dangerColor) shade(15%)) 10px);
  }
 }

 .missingUnmonitored {
  composes: legendItemColor;

-  background-color: $warningColor;
+  background-color: var(--warningColor);

  &:global(.colorImpaired) {
-    background: repeating-linear-gradient(45deg, $warningColor, $warningColor 5px, color($warningColor tint(15%)) 5px, color($warningColor tint(15%)) 10px);
+    background: repeating-linear-gradient(45deg, var(--warningColor), var(--warningColor) 5px, color(var(--warningColor) tint(15%)) 5px, color(var(--warningColor) tint(15%)) 10px);
  }
 }

 .missingMonitoredColorImpaired {
-  background: repeating-linear-gradient(90deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
+  background: repeating-linear-gradient(90deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px);
 }

 .missingUnmonitoredColorImpaired {
-  background: repeating-linear-gradient(45deg, $colorImpairedGradientDark, $colorImpairedGradientDark 5px, $colorImpairedGradient 5px, $colorImpairedGradient 10px);
+  background: repeating-linear-gradient(45deg, var(--colorImpairedGradientDark), var(--colorImpairedGradientDark) 5px, var(--colorImpairedGradient) 5px, var(--colorImpairedGradient) 10px);
 }

 .legendItemText {
@@ -69,7 +69,7 @@ class CalendarOptionsModalContent extends Component {
    } = this.props;

    dispatchSetCalendarOption({ [name]: value });
-  }
+  };

  onGlobalInputChange = ({ name, value }) => {
    const {
@@ -81,11 +81,11 @@ class CalendarOptionsModalContent extends Component {
    this.setState(setting, () => {
      dispatchSaveUISettings(setting);
    });
-  }
+  };

  onLinkFocus = (event) => {
    event.target.select();
-  }
+  };

  //
  // Render
@@ -84,11 +84,11 @@ class CalendarLinkModalContent extends Component {
      [name]: value,
      ...urls
    });
-  }
+  };

  onLinkFocus = (event) => {
    event.target.select();
-  }
+  };

  //
  // Render
@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import AddNewCollectionMovieModalContentConnector from './AddNewCollectionMovieModalContentConnector';
+
+function AddNewCollectionMovieModal(props) {
+  const {
+    isOpen,
+    onModalClose,
+    ...otherProps
+  } = props;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onModalClose={onModalClose}
+    >
+      <AddNewCollectionMovieModalContentConnector
+        {...otherProps}
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+AddNewCollectionMovieModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default AddNewCollectionMovieModal;
@@ -0,0 +1,68 @@
+.container {
+  display: flex;
+}
+
+.year {
+  margin-left: 5px;
+  color: var(--disabledColor);
+}
+
+.poster {
+  flex: 0 0 170px;
+  margin-right: 20px;
+  height: 250px;
+}
+
+.info {
+  flex-grow: 1;
+}
+
+.overview {
+  margin-bottom: 30px;
+}
+
+.labelIcon {
+  margin-left: 8px;
+}
+
+.searchForMissingMovieLabelContainer {
+  display: flex;
+  margin-top: 2px;
+}
+
+.searchForMissingMovieLabel {
+  margin-right: 8px;
+  font-weight: normal;
+}
+
+.searchForMissingMovieContainer {
+  composes: container from '~Components/Form/CheckInput.css';
+
+  flex: 0 1 0;
+}
+
+.searchForMissingMovieInput {
+  composes: input from '~Components/Form/CheckInput.css';
+
+  margin-top: 0;
+}
+
+.modalFooter {
+  composes: modalFooter from '~Components/Modal/ModalFooter.css';
+}
+
+.addButton {
+  @add-mixin truncate;
+  composes: button from '~Components/Link/SpinnerButton.css';
+}
+
+@media only screen and (max-width: $breakpointSmall) {
+  .modalFooter {
+    display: block;
+    text-align: center;
+  }
+
+  .addButton {
+    margin-top: 10px;
+  }
+}
@@ -0,0 +1,204 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import CheckInput from 'Components/Form/CheckInput';
+import Form from 'Components/Form/Form';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import SpinnerButton from 'Components/Link/SpinnerButton';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import { inputTypes, kinds } from 'Helpers/Props';
+import MoviePoster from 'Movie/MoviePoster';
+import translate from 'Utilities/String/translate';
+import styles from './AddNewCollectionMovieModalContent.css';
+
+class AddNewCollectionMovieModalContent extends Component {
+
+  //
+  // Listeners
+
+  onQualityProfileIdChange = ({ value }) => {
+    this.props.onInputChange({ name: 'qualityProfileId', value: parseInt(value) });
+  };
+
+  onAddMoviePress = () => {
+    this.props.onAddMoviePress();
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      title,
+      year,
+      overview,
+      images,
+      isAdding,
+      folder,
+      tags,
+      isSmallScreen,
+      isWindows,
+      onModalClose,
+      onInputChange,
+      rootFolderPath,
+      monitor,
+      qualityProfileId,
+      minimumAvailability,
+      searchForMovie
+    } = this.props;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          {title}
+
+          {
+            !title.contains(year) && !!year &&
+              <span className={styles.year}>({year})</span>
+          }
+        </ModalHeader>
+
+        <ModalBody>
+          <div className={styles.container}>
+            {
+              !isSmallScreen &&
+                <div className={styles.poster}>
+                  <MoviePoster
+                    className={styles.poster}
+                    images={images}
+                    size={250}
+                  />
+                </div>
+            }
+
+            <div className={styles.info}>
+              <div className={styles.overview}>
+                {overview}
+              </div>
+
+              <Form>
+                <FormGroup>
+                  <FormLabel>{translate('RootFolder')}</FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.ROOT_FOLDER_SELECT}
+                    name="rootFolderPath"
+                    valueOptions={{
+                      movieFolder: folder,
+                      isWindows
+                    }}
+                    selectedValueOptions={{
+                      movieFolder: folder,
+                      isWindows
+                    }}
+                    helpText={translate('SubfolderWillBeCreatedAutomaticallyInterp', [folder])}
+                    onChange={onInputChange}
+                    {...rootFolderPath}
+                  />
+                </FormGroup>
+
+                <FormGroup>
+                  <FormLabel>
+                    {translate('Monitor')}
+                  </FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.MOVIE_MONITORED_SELECT}
+                    name="monitor"
+                    onChange={onInputChange}
+                    {...monitor}
+                  />
+                </FormGroup>
+
+                <FormGroup>
+                  <FormLabel>{translate('MinimumAvailability')}</FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.AVAILABILITY_SELECT}
+                    name="minimumAvailability"
+                    onChange={onInputChange}
+                    {...minimumAvailability}
+                  />
+                </FormGroup>
+
+                <FormGroup>
+                  <FormLabel>{translate('QualityProfile')}</FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.QUALITY_PROFILE_SELECT}
+                    name="qualityProfileId"
+                    onChange={this.onQualityProfileIdChange}
+                    {...qualityProfileId}
+                  />
+                </FormGroup>
+
+                <FormGroup>
+                  <FormLabel>{translate('Tags')}</FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.TAG}
+                    name="tags"
+                    onChange={onInputChange}
+                    {...tags}
+                  />
+                </FormGroup>
+              </Form>
+            </div>
+          </div>
+        </ModalBody>
+
+        <ModalFooter className={styles.modalFooter}>
+          <label className={styles.searchForMissingMovieLabelContainer}>
+            <span className={styles.searchForMissingMovieLabel}>
+              {translate('StartSearchForMissingMovie')}
+            </span>
+
+            <CheckInput
+              containerClassName={styles.searchForMissingMovieContainer}
+              className={styles.searchForMissingMovieInput}
+              name="searchForMovie"
+              onChange={onInputChange}
+              {...searchForMovie}
+            />
+          </label>
+
+          <SpinnerButton
+            className={styles.addButton}
+            kind={kinds.SUCCESS}
+            isSpinning={isAdding}
+            onPress={this.onAddMoviePress}
+          >
+            {translate('AddMovie')}
+          </SpinnerButton>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
+}
+
+AddNewCollectionMovieModalContent.propTypes = {
+  title: PropTypes.string.isRequired,
+  year: PropTypes.number.isRequired,
+  overview: PropTypes.string,
+  images: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isAdding: PropTypes.bool.isRequired,
+  addError: PropTypes.object,
+  rootFolderPath: PropTypes.object,
+  monitor: PropTypes.object.isRequired,
+  qualityProfileId: PropTypes.object,
+  minimumAvailability: PropTypes.object.isRequired,
+  searchForMovie: PropTypes.object.isRequired,
+  folder: PropTypes.string.isRequired,
+  tags: PropTypes.object.isRequired,
+  isSmallScreen: PropTypes.bool.isRequired,
+  isWindows: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired,
+  onInputChange: PropTypes.func.isRequired,
+  onAddMoviePress: PropTypes.func.isRequired
+};
+
+export default AddNewCollectionMovieModalContent;
@@ -0,0 +1,121 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { addMovie, setMovieCollectionValue } from 'Store/Actions/movieCollectionActions';
+import createCollectionSelector from 'Store/Selectors/createCollectionSelector';
+import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import createSystemStatusSelector from 'Store/Selectors/createSystemStatusSelector';
+import selectSettings from 'Store/Selectors/selectSettings';
+import AddNewMovieModalContent from './AddNewCollectionMovieModalContent';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.movieCollections,
+    createCollectionSelector(),
+    createDimensionsSelector(),
+    createSystemStatusSelector(),
+    (discoverMovieState, collection, dimensions, systemStatus) => {
+      const {
+        isAdding,
+        addError,
+        pendingChanges
+      } = discoverMovieState;
+
+      const collectionDefaults = {
+        rootFolderPath: collection.rootFolderPath,
+        monitor: 'movieOnly',
+        qualityProfileId: collection.qualityProfileId,
+        minimumAvailability: collection.minimumAvailability,
+        searchForMovie: collection.searchOnAdd,
+        tags: []
+      };
+
+      const {
+        settings,
+        validationErrors,
+        validationWarnings
+      } = selectSettings(collectionDefaults, pendingChanges, addError);
+
+      return {
+        isAdding,
+        addError,
+        isSmallScreen: dimensions.isSmallScreen,
+        validationErrors,
+        validationWarnings,
+        isWindows: systemStatus.isWindows,
+        ...settings
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  addMovie,
+  setMovieCollectionValue
+};
+
+class AddNewCollectionMovieModalContentConnector extends Component {
+
+  //
+  // Listeners
+
+  onInputChange = ({ name, value }) => {
+    this.props.setMovieCollectionValue({ name, value });
+  };
+
+  onAddMoviePress = () => {
+    const {
+      tmdbId,
+      title,
+      rootFolderPath,
+      monitor,
+      qualityProfileId,
+      minimumAvailability,
+      searchForMovie,
+      tags
+    } = this.props;
+
+    this.props.addMovie({
+      tmdbId,
+      title,
+      rootFolderPath: rootFolderPath.value,
+      monitor: monitor.value,
+      qualityProfileId: qualityProfileId.value,
+      minimumAvailability: minimumAvailability.value,
+      searchForMovie: searchForMovie.value,
+      tags: tags.value
+    });
+
+    this.props.onModalClose(true);
+  };
+
+  //
+  // Render
+
+  render() {
+    return (
+      <AddNewMovieModalContent
+        {...this.props}
+        onInputChange={this.onInputChange}
+        onAddMoviePress={this.onAddMoviePress}
+      />
+    );
+  }
+}
+
+AddNewCollectionMovieModalContentConnector.propTypes = {
+  tmdbId: PropTypes.number.isRequired,
+  title: PropTypes.string.isRequired,
+  rootFolderPath: PropTypes.object,
+  monitor: PropTypes.object.isRequired,
+  qualityProfileId: PropTypes.object,
+  minimumAvailability: PropTypes.object.isRequired,
+  searchForMovie: PropTypes.object.isRequired,
+  tags: PropTypes.object.isRequired,
+  onModalClose: PropTypes.func.isRequired,
+  addMovie: PropTypes.func.isRequired,
+  setMovieCollectionValue: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(AddNewCollectionMovieModalContentConnector);
@@ -0,0 +1,403 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import PageJumpBar from 'Components/Page/PageJumpBar';
+import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
+import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
+import { align, icons, sortDirections } from 'Helpers/Props';
+import styles from 'Movie/Index/MovieIndex.css';
+import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
+import translate from 'Utilities/String/translate';
+import getSelectedIds from 'Utilities/Table/getSelectedIds';
+import selectAll from 'Utilities/Table/selectAll';
+import toggleSelected from 'Utilities/Table/toggleSelected';
+import CollectionFooter from './CollectionFooter';
+import CollectionFilterMenu from './Menus/CollectionFilterMenu';
+import CollectionSortMenu from './Menus/CollectionSortMenu';
+import NoCollection from './NoCollection';
+import CollectionOverviewsConnector from './Overview/CollectionOverviewsConnector';
+import CollectionOverviewOptionsModal from './Overview/Options/CollectionOverviewOptionsModal';
+
+function getViewComponent(view) {
+  return CollectionOverviewsConnector;
+}
+
+class Collection 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,
+      allSelected: false,
+      allUnselected: false,
+      lastToggled: null,
+      selectedState: {}
+    };
+  }
+
+  componentDidMount() {
+    this.setJumpBarItems();
+    this.setSelectedState();
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      items,
+      sortKey,
+      sortDirection
+    } = this.props;
+
+    if (sortKey !== prevProps.sortKey ||
+        sortDirection !== prevProps.sortDirection ||
+        hasDifferentItemsOrOrder(prevProps.items, items)
+    ) {
+      this.setJumpBarItems();
+      this.setSelectedState();
+    }
+
+    if (this.state.jumpToCharacter != null) {
+      this.setState({ jumpToCharacter: null });
+    }
+  }
+
+  //
+  // Control
+
+  setScrollerRef = (ref) => {
+    this.setState({ scroller: ref });
+  };
+
+  getSelectedIds = () => {
+    if (this.state.allUnselected) {
+      return [];
+    }
+    return getSelectedIds(this.state.selectedState);
+  };
+
+  setSelectedState() {
+    const {
+      items
+    } = this.props;
+
+    const {
+      selectedState
+    } = this.state;
+
+    const newSelectedState = {};
+
+    items.forEach((collection) => {
+      const isItemSelected = selectedState[collection.id];
+
+      if (isItemSelected) {
+        newSelectedState[collection.id] = isItemSelected;
+      } else {
+        newSelectedState[collection.id] = false;
+      }
+    });
+
+    const selectedCount = getSelectedIds(newSelectedState).length;
+    const newStateCount = Object.keys(newSelectedState).length;
+    let isAllSelected = false;
+    let isAllUnselected = false;
+
+    if (selectedCount === 0) {
+      isAllUnselected = true;
+    } else if (selectedCount === newStateCount) {
+      isAllSelected = true;
+    }
+
+    this.setState({ selectedState: newSelectedState, allSelected: isAllSelected, allUnselected: isAllUnselected });
+  }
+
+  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
+
+  onOverviewOptionsPress = () => {
+    this.setState({ isOverviewOptionsModalOpen: true });
+  };
+
+  onOverviewOptionsModalClose = () => {
+    this.setState({ isOverviewOptionsModalOpen: false });
+  };
+
+  onJumpBarItemPress = (jumpToCharacter) => {
+    this.setState({ jumpToCharacter });
+  };
+
+  onSelectAllChange = ({ value }) => {
+    this.setState(selectAll(this.state.selectedState, value));
+  };
+
+  onSelectAllPress = () => {
+    this.onSelectAllChange({ value: !this.state.allSelected });
+  };
+
+  onRefreshMovieCollectionsPress = () => {
+    this.props.onRefreshMovieCollectionsPress();
+  };
+
+  onSelectedChange = ({ id, value, shiftKey = false }) => {
+    this.setState((state) => {
+      return toggleSelected(state, this.props.items, id, value, shiftKey, 'id');
+    });
+  };
+
+  onUpdateSelectedPress = (changes) => {
+    this.props.onUpdateSelectedPress({
+      collectionIds: this.getSelectedIds(),
+      ...changes
+    });
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      isFetching,
+      isPopulated,
+      error,
+      totalItems,
+      items,
+      selectedFilterKey,
+      filters,
+      customFilters,
+      sortKey,
+      sortDirection,
+      view,
+      onSortSelect,
+      onFilterSelect,
+      onScroll,
+      isRefreshingCollections,
+      isSaving,
+      isAdding,
+      ...otherProps
+    } = this.props;
+
+    const {
+      scroller,
+      jumpBarItems,
+      jumpToCharacter,
+      isOverviewOptionsModalOpen,
+      selectedState,
+      allSelected,
+      allUnselected
+    } = this.state;
+
+    const selectedMovieIds = this.getSelectedIds();
+
+    const ViewComponent = getViewComponent(view);
+    const isLoaded = !!(!error && isPopulated && items.length && scroller);
+    const hasNoCollection = !totalItems;
+
+    return (
+      <PageContent>
+        <PageToolbar>
+          <PageToolbarSection>
+            <PageToolbarButton
+              label={translate('RefreshCollections')}
+              iconName={icons.REFRESH}
+              isSpinning={isRefreshingCollections}
+              isDisabled={hasNoCollection}
+              onPress={this.onRefreshMovieCollectionsPress}
+            />
+            <PageToolbarButton
+              label={allSelected ? translate('UnselectAll') : translate('SelectAll')}
+              iconName={icons.CHECK_SQUARE}
+              isDisabled={hasNoCollection}
+              onPress={this.onSelectAllPress}
+            />
+          </PageToolbarSection>
+
+          <PageToolbarSection
+            alignContent={align.RIGHT}
+            collapseButtons={false}
+          >
+            {
+              view === 'overview' ?
+                <PageToolbarButton
+                  label={translate('Options')}
+                  iconName={icons.OVERVIEW}
+                  onPress={this.onOverviewOptionsPress}
+                /> :
+                null
+            }
+
+            {
+              (view === 'posters' || view === 'overview') &&
+                <PageToolbarSeparator />
+            }
+
+            <CollectionSortMenu
+              sortKey={sortKey}
+              sortDirection={sortDirection}
+              isDisabled={hasNoCollection}
+              onSortSelect={onSortSelect}
+            />
+
+            <CollectionFilterMenu
+              selectedFilterKey={selectedFilterKey}
+              filters={filters}
+              customFilters={customFilters}
+              isDisabled={hasNoCollection}
+              onFilterSelect={onFilterSelect}
+            />
+          </PageToolbarSection>
+        </PageToolbar>
+
+        <div className={styles.pageContentBodyWrapper}>
+          <PageContentBody
+            registerScroller={this.setScrollerRef}
+            className={styles.contentBody}
+            innerClassName={styles[`${view}InnerContentBody`]}
+            onScroll={onScroll}
+          >
+            {
+              isFetching && !isPopulated &&
+                <LoadingIndicator />
+            }
+
+            {
+              !isFetching && !!error &&
+                <div>
+                  {translate('UnableToLoadCollections')}
+                </div>
+            }
+
+            {
+              isLoaded &&
+                <div className={styles.contentBodyContainer}>
+                  <ViewComponent
+                    scroller={scroller}
+                    items={items}
+                    filters={filters}
+                    sortKey={sortKey}
+                    sortDirection={sortDirection}
+                    jumpToCharacter={jumpToCharacter}
+                    allSelected={allSelected}
+                    allUnselected={allUnselected}
+                    onSelectedChange={this.onSelectedChange}
+                    onSelectAllChange={this.onSelectAllChange}
+                    selectedState={selectedState}
+                    {...otherProps}
+                  />
+                </div>
+            }
+
+            {
+              !error && isPopulated && !items.length &&
+                <NoCollection totalItems={totalItems} />
+            }
+          </PageContentBody>
+
+          {
+            isLoaded && !!jumpBarItems.order.length &&
+              <PageJumpBar
+                items={jumpBarItems}
+                onItemPress={this.onJumpBarItemPress}
+              />
+          }
+        </div>
+
+        {
+          isLoaded &&
+            <CollectionFooter
+              selectedIds={selectedMovieIds}
+              isSaving={isSaving}
+              isAdding={isAdding}
+              onUpdateSelectedPress={this.onUpdateSelectedPress}
+            />
+        }
+
+        <CollectionOverviewOptionsModal
+          isOpen={isOverviewOptionsModalOpen}
+          onModalClose={this.onOverviewOptionsModalClose}
+        />
+      </PageContent>
+    );
+  }
+}
+
+Collection.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  isSaving: PropTypes.bool.isRequired,
+  isAdding: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  totalItems: PropTypes.number.isRequired,
+  items: 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,
+  isRefreshingCollections: PropTypes.bool.isRequired,
+  isSmallScreen: PropTypes.bool.isRequired,
+  onSortSelect: PropTypes.func.isRequired,
+  onFilterSelect: PropTypes.func.isRequired,
+  onScroll: PropTypes.func.isRequired,
+  onUpdateSelectedPress: PropTypes.func.isRequired,
+  onRefreshMovieCollectionsPress: PropTypes.func.isRequired
+};
+
+export default Collection;
@@ -0,0 +1,108 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import * as commandNames from 'Commands/commandNames';
+import withScrollPosition from 'Components/withScrollPosition';
+import { executeCommand } from 'Store/Actions/commandActions';
+import { saveMovieCollections, setMovieCollectionsFilter, setMovieCollectionsSort } from 'Store/Actions/movieCollectionActions';
+import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
+import scrollPositions from 'Store/scrollPositions';
+import createCollectionClientSideCollectionItemsSelector from 'Store/Selectors/createCollectionClientSideCollectionItemsSelector';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
+import Collection from './Collection';
+
+function createMapStateToProps() {
+  return createSelector(
+    createCollectionClientSideCollectionItemsSelector('movieCollections'),
+    createCommandExecutingSelector(commandNames.REFRESH_COLLECTIONS),
+    createDimensionsSelector(),
+    (
+      collections,
+      isRefreshingCollections,
+      dimensionsState
+    ) => {
+      return {
+        ...collections,
+        isRefreshingCollections,
+        isSmallScreen: dimensionsState.isSmallScreen
+      };
+    }
+  );
+}
+
+function createMapDispatchToProps(dispatch, props) {
+  return {
+    dispatchFetchRootFolders() {
+      dispatch(fetchRootFolders());
+    },
+    onUpdateSelectedPress(payload) {
+      dispatch(saveMovieCollections(payload));
+    },
+    onSortSelect(sortKey) {
+      dispatch(setMovieCollectionsSort({ sortKey }));
+    },
+    onFilterSelect(selectedFilterKey) {
+      dispatch(setMovieCollectionsFilter({ selectedFilterKey }));
+    },
+    onRefreshMovieCollectionsPress() {
+      dispatch(executeCommand({
+        name: commandNames.REFRESH_COLLECTIONS
+      }));
+    }
+  };
+}
+
+class CollectionConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    registerPagePopulator(this.repopulate);
+    this.props.dispatchFetchRootFolders();
+  }
+
+  componentWillUnmount() {
+    unregisterPagePopulator(this.repopulate);
+  }
+
+  //
+  // Listeners
+
+  onScroll = ({ scrollTop }) => {
+    scrollPositions.movieCollections = scrollTop;
+  };
+
+  onUpdateSelectedPress = (payload) => {
+    this.props.onUpdateSelectedPress(payload);
+  };
+
+  //
+  // Render
+
+  render() {
+    return (
+      <Collection
+        {...this.props}
+        onViewSelect={this.onViewSelect}
+        onScroll={this.onScroll}
+        onUpdateSelectedPress={this.onUpdateSelectedPress}
+      />
+    );
+  }
+}
+
+CollectionConnector.propTypes = {
+  isSmallScreen: PropTypes.bool.isRequired,
+  view: PropTypes.string.isRequired,
+  onUpdateSelectedPress: PropTypes.func.isRequired,
+  dispatchFetchRootFolders: PropTypes.func.isRequired
+};
+
+export default withScrollPosition(
+  connect(createMapStateToProps, createMapDispatchToProps)(CollectionConnector),
+  'movieCollections'
+);
@@ -0,0 +1,24 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import FilterModal from 'Components/Filter/FilterModal';
+import { setMovieCollectionsFilter } from 'Store/Actions/movieCollectionActions';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.movieCollections.items,
+    (state) => state.movieCollections.filterBuilderProps,
+    (sectionItems, filterBuilderProps) => {
+      return {
+        sectionItems,
+        filterBuilderProps,
+        customFilterType: 'movieCollections'
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  dispatchSetFilter: setMovieCollectionsFilter
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(FilterModal);
@@ -0,0 +1,56 @@
+.inputContainer {
+  margin-right: 20px;
+  min-width: 150px;
+}
+
+.buttonContainer {
+  display: flex;
+  justify-content: flex-end;
+  flex-grow: 1;
+}
+
+.buttonContainerContent {
+  flex-grow: 0;
+}
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  flex-grow: 1;
+}
+
+.addSelectedButton {
+  composes: button from '~Components/Link/SpinnerButton.css';
+
+  margin-right: 10px;
+  height: 35px;
+}
+
+.excludeSelectedButton {
+  composes: button from '~Components/Link/SpinnerButton.css';
+
+  margin-left: 25px;
+  height: 35px;
+}
+
+@media only screen and (max-width: $breakpointSmall) {
+  .inputContainer {
+    margin-right: 0;
+  }
+
+  .buttonContainer {
+    justify-content: flex-start;
+  }
+
+  .buttonContainerContent {
+    flex-grow: 1;
+  }
+
+  .buttons {
+    justify-content: space-between;
+  }
+
+  .selectedMovieLabel {
+    text-align: left;
+  }
+}
@@ -0,0 +1,236 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import AvailabilitySelectInput from 'Components/Form/AvailabilitySelectInput';
+import QualityProfileSelectInputConnector from 'Components/Form/QualityProfileSelectInputConnector';
+import RootFolderSelectInputConnector from 'Components/Form/RootFolderSelectInputConnector';
+import SelectInput from 'Components/Form/SelectInput';
+import SpinnerButton from 'Components/Link/SpinnerButton';
+import PageContentFooter from 'Components/Page/PageContentFooter';
+import { kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import CollectionFooterLabel from './CollectionFooterLabel';
+import styles from './CollectionFooter.css';
+
+const NO_CHANGE = 'noChange';
+
+class CollectionFooter extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      monitor: NO_CHANGE,
+      monitored: NO_CHANGE,
+      qualityProfileId: NO_CHANGE,
+      minimumAvailability: NO_CHANGE,
+      rootFolderPath: NO_CHANGE,
+      destinationRootFolder: null
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      isSaving,
+      saveError
+    } = this.props;
+
+    const newState = {};
+    if (prevProps.isSaving && !isSaving && !saveError) {
+      this.setState({
+        monitored: NO_CHANGE,
+        monitor: NO_CHANGE,
+        qualityProfileId: NO_CHANGE,
+        rootFolderPath: NO_CHANGE,
+        minimumAvailability: NO_CHANGE
+      });
+    }
+
+    if (!_.isEmpty(newState)) {
+      this.setState(newState);
+    }
+  }
+
+  //
+  // Listeners
+
+  onInputChange = ({ name, value }) => {
+    this.setState({ [name]: value });
+  };
+
+  onUpdateSelectedPress = () => {
+    const {
+      monitor,
+      monitored,
+      qualityProfileId,
+      minimumAvailability,
+      rootFolderPath
+    } = this.state;
+
+    const changes = {};
+
+    if (monitored !== NO_CHANGE) {
+      changes.monitored = monitored === 'monitored';
+    }
+
+    if (monitor !== NO_CHANGE) {
+      changes.monitor = monitor;
+    }
+
+    if (qualityProfileId !== NO_CHANGE) {
+      changes.qualityProfileId = qualityProfileId;
+    }
+
+    if (minimumAvailability !== NO_CHANGE) {
+      changes.minimumAvailability = minimumAvailability;
+    }
+
+    if (rootFolderPath !== NO_CHANGE) {
+      changes.rootFolderPath = rootFolderPath;
+    }
+
+    this.props.onUpdateSelectedPress(changes);
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      selectedIds,
+      isSaving
+    } = this.props;
+
+    const {
+      monitored,
+      monitor,
+      qualityProfileId,
+      minimumAvailability,
+      rootFolderPath
+    } = this.state;
+
+    const monitoredOptions = [
+      { key: NO_CHANGE, value: translate('NoChange'), disabled: true },
+      { key: 'monitored', value: translate('Monitored') },
+      { key: 'unmonitored', value: translate('Unmonitored') }
+    ];
+
+    const selectedCount = selectedIds.length;
+
+    return (
+      <PageContentFooter>
+        <div className={styles.inputContainer}>
+          <CollectionFooterLabel
+            label={translate('MonitorCollection')}
+            isSaving={isSaving}
+          />
+
+          <SelectInput
+            name="monitored"
+            value={monitored}
+            values={monitoredOptions}
+            isDisabled={!selectedCount}
+            onChange={this.onInputChange}
+          />
+        </div>
+
+        <div className={styles.inputContainer}>
+          <CollectionFooterLabel
+            label={translate('MonitorMovies')}
+            isSaving={isSaving}
+          />
+
+          <SelectInput
+            name="monitor"
+            value={monitor}
+            values={monitoredOptions}
+            isDisabled={!selectedCount}
+            onChange={this.onInputChange}
+          />
+        </div>
+
+        <div className={styles.inputContainer}>
+          <CollectionFooterLabel
+            label={translate('QualityProfile')}
+            isSaving={isSaving && qualityProfileId !== NO_CHANGE}
+          />
+
+          <QualityProfileSelectInputConnector
+            name="qualityProfileId"
+            value={qualityProfileId}
+            includeNoChange={true}
+            isDisabled={!selectedCount}
+            onChange={this.onInputChange}
+          />
+        </div>
+
+        <div className={styles.inputContainer}>
+          <CollectionFooterLabel
+            label={translate('MinimumAvailability')}
+            isSaving={isSaving && minimumAvailability !== NO_CHANGE}
+          />
+
+          <AvailabilitySelectInput
+            name="minimumAvailability"
+            value={minimumAvailability}
+            includeNoChange={true}
+            isDisabled={!selectedCount}
+            onChange={this.onInputChange}
+          />
+        </div>
+
+        <div className={styles.inputContainer}>
+          <CollectionFooterLabel
+            label={translate('RootFolder')}
+            isSaving={isSaving && rootFolderPath !== NO_CHANGE}
+          />
+
+          <RootFolderSelectInputConnector
+            name="rootFolderPath"
+            value={rootFolderPath}
+            includeNoChange={true}
+            isDisabled={!selectedCount}
+            selectedValueOptions={{ includeFreeSpace: false }}
+            onChange={this.onInputChange}
+          />
+        </div>
+
+        <div className={styles.buttonContainer}>
+          <div className={styles.buttonContainerContent}>
+            <CollectionFooterLabel
+              label={translate('CollectionsSelectedInterp', [selectedCount])}
+              isSaving={false}
+            />
+
+            <div className={styles.buttons}>
+              <div>
+                <SpinnerButton
+                  className={styles.addSelectedButton}
+                  kind={kinds.PRIMARY}
+                  isSpinning={isSaving}
+                  isDisabled={!selectedCount || isSaving}
+                  onPress={this.onUpdateSelectedPress}
+                >
+                  {translate('UpdateSelected')}
+                </SpinnerButton>
+              </div>
+            </div>
+          </div>
+        </div>
+      </PageContentFooter>
+    );
+  }
+}
+
+CollectionFooter.propTypes = {
+  selectedIds: PropTypes.arrayOf(PropTypes.number).isRequired,
+  isAdding: PropTypes.bool.isRequired,
+  isSaving: PropTypes.bool.isRequired,
+  saveError: PropTypes.object,
+  onUpdateSelectedPress: PropTypes.func.isRequired
+};
+
+export default CollectionFooter;
@@ -0,0 +1,8 @@
+.label {
+  margin-bottom: 3px;
+  font-weight: bold;
+}
+
+.savingIcon {
+  margin-left: 8px;
+}
@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import SpinnerIcon from 'Components/SpinnerIcon';
+import { icons } from 'Helpers/Props';
+import styles from './CollectionFooterLabel.css';
+
+function CollectionFooterLabel(props) {
+  const {
+    className,
+    label,
+    isSaving
+  } = props;
+
+  return (
+    <div className={className}>
+      {label}
+
+      {
+        isSaving &&
+          <SpinnerIcon
+            className={styles.savingIcon}
+            name={icons.SPINNER}
+            isSpinning={true}
+          />
+      }
+    </div>
+  );
+}
+
+CollectionFooterLabel.propTypes = {
+  className: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  isSaving: PropTypes.bool.isRequired
+};
+
+CollectionFooterLabel.defaultProps = {
+  className: styles.label
+};
+
+export default CollectionFooterLabel;
@@ -0,0 +1,75 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createAllMoviesSelector from 'Store/Selectors/createAllMoviesSelector';
+import createCollectionSelector from 'Store/Selectors/createCollectionSelector';
+
+function createMapStateToProps() {
+  return createSelector(
+    createCollectionSelector(),
+    createAllMoviesSelector(),
+    (
+      collection,
+      allMovies
+    ) => {
+      // 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 (!collection) {
+        return {};
+      }
+
+      let allGenres = [];
+      let libraryMovies = 0;
+
+      collection.movies.forEach((movie) => {
+        allGenres = allGenres.concat(movie.genres);
+
+        if (allMovies.find((libraryMovie) => libraryMovie.tmdbId === movie.tmdbId)) {
+          libraryMovies++;
+        }
+      });
+
+      return {
+        ...collection,
+        genres: Array.from(new Set(allGenres)).slice(0, 3),
+        missingMovies: collection.movies.length - libraryMovies
+      };
+    }
+  );
+}
+
+class CollectionItemConnector extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      id,
+      component: ItemComponent,
+      ...otherProps
+    } = this.props;
+
+    if (!id) {
+      return null;
+    }
+
+    return (
+      <ItemComponent
+        {...otherProps}
+        id={id}
+      />
+    );
+  }
+}
+
+CollectionItemConnector.propTypes = {
+  id: PropTypes.number,
+  component: PropTypes.elementType.isRequired
+};
+
+export default connect(createMapStateToProps)(CollectionItemConnector);
@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import EditCollectionModalContentConnector from './EditCollectionModalContentConnector';
+
+function EditCollectionModal({ isOpen, onModalClose, ...otherProps }) {
+  return (
+    <Modal
+      isOpen={isOpen}
+      onModalClose={onModalClose}
+    >
+      <EditCollectionModalContentConnector
+        {...otherProps}
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+EditCollectionModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default EditCollectionModal;
@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { clearPendingChanges } from 'Store/Actions/baseActions';
+import EditCollectionModal from './EditCollectionModal';
+
+const mapDispatchToProps = {
+  clearPendingChanges
+};
+
+class EditCollectionModalConnector extends Component {
+
+  //
+  // Listeners
+
+  onModalClose = () => {
+    this.props.clearPendingChanges({ section: 'movieCollections' });
+    this.props.onModalClose();
+  };
+
+  //
+  // Render
+
+  render() {
+    return (
+      <EditCollectionModal
+        {...this.props}
+        onModalClose={this.onModalClose}
+      />
+    );
+  }
+}
+
+EditCollectionModalConnector.propTypes = {
+  onModalClose: PropTypes.func.isRequired,
+  clearPendingChanges: PropTypes.func.isRequired
+};
+
+export default connect(undefined, mapDispatchToProps)(EditCollectionModalConnector);
@@ -0,0 +1,17 @@
+.container {
+  display: flex;
+}
+
+.poster {
+  flex: 0 0 170px;
+  margin-right: 20px;
+  height: 250px;
+}
+
+.info {
+  flex-grow: 1;
+}
+
+.overview {
+  margin-bottom: 30px;
+}
@@ -0,0 +1,178 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Form from 'Components/Form/Form';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import Button from 'Components/Link/Button';
+import SpinnerButton from 'Components/Link/SpinnerButton';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import { inputTypes } from 'Helpers/Props';
+import MoviePoster from 'Movie/MoviePoster';
+import translate from 'Utilities/String/translate';
+import styles from './EditCollectionModalContent.css';
+
+class EditCollectionModalContent extends Component {
+
+  //
+  // Listeners
+
+  onSavePress = () => {
+    const {
+      onSavePress
+    } = this.props;
+
+    onSavePress(false);
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      title,
+      images,
+      overview,
+      item,
+      isSaving,
+      onInputChange,
+      onModalClose,
+      isSmallScreen,
+      ...otherProps
+    } = this.props;
+
+    const {
+      monitored,
+      qualityProfileId,
+      minimumAvailability,
+      // Id,
+      rootFolderPath,
+      searchOnAdd
+    } = item;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          {translate('Edit')} - {title}
+        </ModalHeader>
+
+        <ModalBody>
+          <div className={styles.container}>
+            {
+              !isSmallScreen &&
+                <div className={styles.poster}>
+                  <MoviePoster
+                    className={styles.poster}
+                    images={images}
+                    size={250}
+                  />
+                </div>
+            }
+
+            <div className={styles.info}>
+              <div className={styles.overview}>
+                {overview}
+              </div>
+
+              <Form
+                {...otherProps}
+              >
+                <FormGroup>
+                  <FormLabel>{translate('Monitored')}</FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.CHECK}
+                    name="monitored"
+                    helpText={translate('MonitoredCollectionHelpText')}
+                    {...monitored}
+                    onChange={onInputChange}
+                  />
+                </FormGroup>
+
+                <FormGroup>
+                  <FormLabel>{translate('MinimumAvailability')}</FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.AVAILABILITY_SELECT}
+                    name="minimumAvailability"
+                    {...minimumAvailability}
+                    onChange={onInputChange}
+                  />
+                </FormGroup>
+
+                <FormGroup>
+                  <FormLabel>{translate('QualityProfile')}</FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.QUALITY_PROFILE_SELECT}
+                    name="qualityProfileId"
+                    {...qualityProfileId}
+                    onChange={onInputChange}
+                  />
+                </FormGroup>
+
+                <FormGroup>
+                  <FormLabel>{translate('RootFolder')}</FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.ROOT_FOLDER_SELECT}
+                    name="rootFolderPath"
+                    {...rootFolderPath}
+                    includeMissingValue={true}
+                    onChange={onInputChange}
+                  />
+                </FormGroup>
+
+                <FormGroup>
+                  <FormLabel>{translate('SearchOnAdd')}</FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.CHECK}
+                    name="searchOnAdd"
+                    helpText={translate('SearchOnAddCollectionHelpText')}
+                    {...searchOnAdd}
+                    onChange={onInputChange}
+                  />
+                </FormGroup>
+              </Form>
+            </div>
+          </div>
+        </ModalBody>
+
+        <ModalFooter>
+          <Button
+            onPress={onModalClose}
+          >
+            {translate('Cancel')}
+          </Button>
+
+          <SpinnerButton
+            isSpinning={isSaving}
+            onPress={this.onSavePress}
+          >
+            {translate('Save')}
+          </SpinnerButton>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
+}
+
+EditCollectionModalContent.propTypes = {
+  collectionId: PropTypes.number.isRequired,
+  title: PropTypes.string.isRequired,
+  overview: PropTypes.string.isRequired,
+  images: PropTypes.arrayOf(PropTypes.object).isRequired,
+  item: PropTypes.object.isRequired,
+  isSaving: PropTypes.bool.isRequired,
+  isPathChanging: PropTypes.bool.isRequired,
+  isSmallScreen: PropTypes.bool.isRequired,
+  onInputChange: PropTypes.func.isRequired,
+  onSavePress: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default EditCollectionModalContent;
@@ -0,0 +1,119 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { saveMovieCollection, setMovieCollectionValue } from 'Store/Actions/movieCollectionActions';
+import createCollectionSelector from 'Store/Selectors/createCollectionSelector';
+import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import selectSettings from 'Store/Selectors/selectSettings';
+import EditCollectionModalContent from './EditCollectionModalContent';
+
+function createIsPathChangingSelector() {
+  return createSelector(
+    (state) => state.movieCollections.pendingChanges,
+    createCollectionSelector(),
+    (pendingChanges, collection) => {
+      const rootFolderPath = pendingChanges.rootFolderPath;
+
+      if (rootFolderPath == null) {
+        return false;
+      }
+
+      return collection.rootFolderPath !== rootFolderPath;
+    }
+  );
+}
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.movieCollections,
+    createCollectionSelector(),
+    createIsPathChangingSelector(),
+    createDimensionsSelector(),
+    (moviesState, collection, isPathChanging, dimensions) => {
+      const {
+        isSaving,
+        saveError,
+        pendingChanges
+      } = moviesState;
+
+      const movieSettings = {
+        monitored: collection.monitored,
+        qualityProfileId: collection.qualityProfileId,
+        minimumAvailability: collection.minimumAvailability,
+        rootFolderPath: collection.rootFolderPath,
+        searchOnAdd: collection.searchOnAdd
+      };
+
+      const settings = selectSettings(movieSettings, pendingChanges, saveError);
+
+      return {
+        title: collection.title,
+        images: collection.images,
+        overview: collection.overview,
+        isSaving,
+        saveError,
+        isPathChanging,
+        originalPath: collection.path,
+        item: settings.settings,
+        isSmallScreen: dimensions.isSmallScreen,
+        ...settings
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  dispatchSetMovieCollectionValue: setMovieCollectionValue,
+  dispatchSaveMovieCollection: saveMovieCollection
+};
+
+class EditCollectionModalContentConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevProps.isSaving && !this.props.isSaving && !this.props.saveError) {
+      this.props.onModalClose();
+    }
+  }
+
+  //
+  // Listeners
+
+  onInputChange = ({ name, value }) => {
+    this.props.dispatchSetMovieCollectionValue({ name, value });
+  };
+
+  onSavePress = () => {
+    this.props.dispatchSaveMovieCollection({
+      id: this.props.collectionId
+    });
+  };
+
+  //
+  // Render
+
+  render() {
+    return (
+      <EditCollectionModalContent
+        {...this.props}
+        onInputChange={this.onInputChange}
+        onSavePress={this.onSavePress}
+        onMoveMoviePress={this.onMoveMoviePress}
+      />
+    );
+  }
+}
+
+EditCollectionModalContentConnector.propTypes = {
+  collectionId: PropTypes.number,
+  isSaving: PropTypes.bool.isRequired,
+  saveError: PropTypes.object,
+  dispatchSetMovieCollectionValue: PropTypes.func.isRequired,
+  dispatchSaveMovieCollection: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(EditCollectionModalContentConnector);
@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import CollectionFilterModalConnector from 'Collection/CollectionFilterModalConnector';
+import FilterMenu from 'Components/Menu/FilterMenu';
+import { align } from 'Helpers/Props';
+
+function CollectionFilterMenu(props) {
+  const {
+    selectedFilterKey,
+    filters,
+    customFilters,
+    isDisabled,
+    onFilterSelect
+  } = props;
+
+  return (
+    <FilterMenu
+      alignMenu={align.RIGHT}
+      isDisabled={isDisabled}
+      selectedFilterKey={selectedFilterKey}
+      filters={filters}
+      customFilters={customFilters}
+      filterModalConnectorComponent={CollectionFilterModalConnector}
+      onFilterSelect={onFilterSelect}
+    />
+  );
+}
+
+CollectionFilterMenu.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
+};
+
+CollectionFilterMenu.defaultProps = {
+  showCustomFilters: false
+};
+
+export default CollectionFilterMenu;
@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import MenuContent from 'Components/Menu/MenuContent';
+import SortMenu from 'Components/Menu/SortMenu';
+import SortMenuItem from 'Components/Menu/SortMenuItem';
+import { align, sortDirections } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+
+function CollectionSortMenu(props) {
+  const {
+    sortKey,
+    sortDirection,
+    isDisabled,
+    onSortSelect
+  } = props;
+
+  return (
+    <SortMenu
+      isDisabled={isDisabled}
+      alignMenu={align.RIGHT}
+    >
+      <MenuContent>
+        <SortMenuItem
+          name="sortTitle"
+          sortKey={sortKey}
+          sortDirection={sortDirection}
+          onPress={onSortSelect}
+        >
+          {translate('Title')}
+        </SortMenuItem>
+      </MenuContent>
+    </SortMenu>
+  );
+}
+
+CollectionSortMenu.propTypes = {
+  sortKey: PropTypes.string,
+  sortDirection: PropTypes.oneOf(sortDirections.all),
+  isDisabled: PropTypes.bool.isRequired,
+  onSortSelect: PropTypes.func.isRequired
+};
+
+export default CollectionSortMenu;
@@ -0,0 +1,11 @@
+.message {
+  margin-top: 10px;
+  margin-bottom: 30px;
+  text-align: center;
+  font-size: 20px;
+}
+
+.buttonContainer {
+  margin-top: 20px;
+  text-align: center;
+}
@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Button from 'Components/Link/Button';
+import { kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import styles from './NoCollection.css';
+
+function NoCollection(props) {
+  const { totalItems } = props;
+
+  if (totalItems > 0) {
+    return (
+      <div>
+        <div className={styles.message}>
+          {translate('AllCollectionsHiddenDueToFilter')}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className={styles.message}>
+        {translate('NoCollections')}
+      </div>
+
+      <div className={styles.buttonContainer}>
+        <Button
+          to="/add/import"
+          kind={kinds.PRIMARY}
+        >
+          {translate('ImportExistingMovies')}
+        </Button>
+      </div>
+
+      <div className={styles.buttonContainer}>
+        <Button
+          to="/add/new"
+          kind={kinds.PRIMARY}
+        >
+          {translate('AddNewMovie')}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+NoCollection.propTypes = {
+  totalItems: PropTypes.number.isRequired
+};
+
+export default NoCollection;
@@ -0,0 +1,117 @@
+$hoverScale: 1.05;
+
+.content {
+  border-radius: 5px;
+  transition: all 200ms ease-in;
+
+  &:hover {
+    z-index: 2;
+    box-shadow: 0 0 10px var(--black);
+    transition: all 200ms ease-in;
+
+    .poster {
+      opacity: 0.5;
+      transition: opacity 100ms linear 100ms;
+    }
+
+    .overlayTitle {
+      opacity: 1;
+      transition: opacity 100ms linear 100ms;
+    }
+  }
+}
+
+.posterContainer {
+  position: relative;
+}
+
+.poster {
+  position: relative;
+  display: block;
+  background-color: var(--defaultColor);
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.overlayTitle {
+  padding: 5px;
+  color: var(--offWhite);
+  text-align: left;
+  font-weight: bold;
+  font-size: 15px;
+  opacity: 0;
+  transition: opacity 0;
+}
+
+.title {
+  @add-mixin truncate;
+
+  background-color: #fafbfc;
+  text-align: center;
+  font-size: $smallFontSize;
+}
+
+.controls {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  z-index: 3;
+  border-radius: 4px;
+  background-color: #707070;
+  color: var(--white);
+  font-size: $smallFontSize;
+  opacity: 0;
+  transition: opacity 0;
+}
+
+.action {
+  composes: button from '~Components/Link/IconButton.css';
+
+  &:hover {
+    color: var(--radarrYellow);
+  }
+}
+
+@media only screen and (max-width: $breakpointSmall) {
+  .container {
+    padding: 5px;
+  }
+}
+
+.editorSelect {
+  position: absolute;
+  top: 10px;
+  z-index: 3;
+}
+
+.externalLinks {
+  margin-left: 0.5em;
+}
+
+.link {
+  composes: link from '~Components/Link/Link.css';
+
+  position: relative;
+  display: block;
+  background-color: var(--defaultColor);
+}
+
+.monitorToggleButton {
+  composes: toggleButton from '~Components/MonitorToggleButton.css';
+
+  width: 25px;
+  color: var(--white);
+
+  &:hover {
+    color: var(--iconButtonHoverLightColor);
+  }
+}
@@ -0,0 +1,191 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Link from 'Components/Link/Link';
+import MonitorToggleButton from 'Components/MonitorToggleButton';
+import EditMovieModalConnector from 'Movie/Edit/EditMovieModalConnector';
+import MovieIndexProgressBar from 'Movie/Index/ProgressBar/MovieIndexProgressBar';
+import MoviePoster from 'Movie/MoviePoster';
+import AddNewCollectionMovieModal from './../AddNewCollectionMovieModal';
+import styles from './CollectionMovie.css';
+
+class CollectionMovie extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      hasPosterError: false,
+      isEditMovieModalOpen: false,
+      isNewAddMovieModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onEditMoviePress = () => {
+    this.setState({ isEditMovieModalOpen: true });
+  };
+
+  onEditMovieModalClose = () => {
+    this.setState({ isEditMovieModalOpen: false });
+  };
+
+  onAddMoviePress = () => {
+    this.setState({ isNewAddMovieModalOpen: true });
+  };
+
+  onAddMovieModalClose = () => {
+    this.setState({ isNewAddMovieModalOpen: false });
+  };
+
+  onPosterLoad = () => {
+    if (this.state.hasPosterError) {
+      this.setState({ hasPosterError: false });
+    }
+  };
+
+  onPosterLoadError = () => {
+    if (!this.state.hasPosterError) {
+      this.setState({ hasPosterError: true });
+    }
+  };
+
+  //
+  // Render
+
+  render() {
+    const {
+      id,
+      title,
+      overview,
+      year,
+      tmdbId,
+      images,
+      monitored,
+      hasFile,
+      folder,
+      isAvailable,
+      isExistingMovie,
+      posterWidth,
+      posterHeight,
+      detailedProgressBar,
+      onMonitorTogglePress,
+      collectionId
+    } = this.props;
+
+    const {
+      isEditMovieModalOpen,
+      isNewAddMovieModalOpen
+    } = this.state;
+
+    const linkProps = id ? { to: `/movie/${tmdbId}` } : { onPress: this.onAddMoviePress };
+
+    const elementStyle = {
+      width: `${posterWidth}px`,
+      height: `${posterHeight}px`,
+      borderRadius: '5px'
+    };
+
+    return (
+      <div className={styles.content}>
+        <div className={styles.posterContainer}>
+          {
+            isExistingMovie &&
+              <div className={styles.editorSelect}>
+                <MonitorToggleButton
+                  className={styles.monitorToggleButton}
+                  monitored={monitored}
+                  size={20}
+                  onPress={onMonitorTogglePress}
+                />
+              </div>
+          }
+
+          <Link
+            className={styles.link}
+            style={elementStyle}
+            {...linkProps}
+          >
+            <MoviePoster
+              className={styles.poster}
+              style={elementStyle}
+              images={images}
+              size={250}
+              lazy={false}
+              overflow={true}
+              onError={this.onPosterLoadError}
+              onLoad={this.onPosterLoad}
+            />
+
+            <div className={styles.overlay}>
+              <div className={styles.overlayTitle}>
+                {title}
+              </div>
+
+              {
+                id &&
+                  <div className={styles.overlayStatus}>
+                    <MovieIndexProgressBar
+                      monitored={monitored}
+                      hasFile={hasFile}
+                      status={status}
+                      bottomRadius={true}
+                      posterWidth={posterWidth}
+                      detailedProgressBar={detailedProgressBar}
+                      isAvailable={isAvailable}
+                    />
+                  </div>
+              }
+            </div>
+          </Link>
+        </div>
+
+        <AddNewCollectionMovieModal
+          isOpen={isNewAddMovieModalOpen && !isExistingMovie}
+          tmdbId={tmdbId}
+          title={title}
+          year={year}
+          overview={overview}
+          images={images}
+          folder={folder}
+          onModalClose={this.onAddMovieModalClose}
+          collectionId={collectionId}
+        />
+
+        <EditMovieModalConnector
+          isOpen={isEditMovieModalOpen}
+          movieId={id}
+          onModalClose={this.onEditMovieModalClose}
+          onDeleteMoviePress={this.onDeleteMoviePress}
+        />
+      </div>
+    );
+  }
+}
+
+CollectionMovie.propTypes = {
+  id: PropTypes.number,
+  title: PropTypes.string.isRequired,
+  year: PropTypes.number.isRequired,
+  overview: PropTypes.string.isRequired,
+  monitored: PropTypes.bool,
+  collectionId: PropTypes.number.isRequired,
+  hasFile: PropTypes.bool,
+  folder: PropTypes.string,
+  isAvailable: PropTypes.bool,
+  images: PropTypes.arrayOf(PropTypes.object).isRequired,
+  posterWidth: PropTypes.number.isRequired,
+  posterHeight: PropTypes.number.isRequired,
+  detailedProgressBar: PropTypes.bool.isRequired,
+  isExistingMovie: PropTypes.bool,
+  tmdbId: PropTypes.number.isRequired,
+  imdbId: PropTypes.string,
+  youTubeTrailerId: PropTypes.string,
+  onMonitorTogglePress: PropTypes.func.isRequired
+};
+
+export default CollectionMovie;
--- a/Show More
+++ b/Show More