New: IPv6 support for connections/indexers/download clients

Closes #7850

(cherry picked from commit 1b90fbcf7df2c1086da4791c6491771924b1b7aa)

.editorconfig

@@ -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

.esprintrc

@@ -1,7 +1,6 @@
 {
   "paths": [
-    "frontend/src/**/*.js",
-    "src/NzbDrone.Core/Localization/Core/*.json"
+    "frontend/src/**/*.js"
   ],
   "ignored": [
     "**/node_modules/**/*"

.github/FUNDING.yml

@@ -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

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -5,9 +5,9 @@ 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:
@@ -42,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

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -5,9 +5,9 @@ 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:

.github/workflows/azuresync.yml

@@ -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

.github/workflows/lock.yml

@@ -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

.github/workflows/support.yml

@@ -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

.gitignore

@@ -187,6 +187,10 @@ packages.config.md5sum
 **/.idea/**/*.iml
 **/.idea/**/contentModel.xml
 **/.idea/**/modules.xml
+
 # ignore node_modules symlink
 node_modules
 node_modules.nosync
+
+# API doc generation
+.config/

CODE_OF_CONDUCT.md

@@ -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

SECURITY.md

@@ -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.

azure-pipelines.yml

@@ -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.3.1'
   minorVersion: $[counter('minorVersion', 2000)]
   radarrVersion: '$(majorVersion).$(minorVersion)'
   buildName: '$(Build.SourceBranchName).$(radarrVersion)'
   sentryOrg: 'servarr'
   sentryUrl: 'https://sentry.servarr.com'
-  dotnetVersion: '6.0.100'
-  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 {} \;
@@ -112,24 +118,28 @@ stages:
         displayName: Publish Backend
         condition: and(succeeded(), eq(variables['osName'], 'Windows'))
       - publish: '$(testsFolder)/net6.0/win-x64/publish'
-        artifact: WindowsCoreTests
-        displayName: Publish Windows Test Package
+        artifact: win-x64-tests
+        displayName: Publish win-x64 Test Package
         condition: and(succeeded(), eq(variables['osName'], 'Windows'))
       - publish: '$(testsFolder)/net6.0/linux-x64/publish'
-        artifact: LinuxCoreTests
-        displayName: Publish Linux Test Package
+        artifact: linux-x64-tests
+        displayName: Publish linux-x64 Test Package
+        condition: and(succeeded(), eq(variables['osName'], 'Windows'))
+      - 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)/net6.0/linux-musl-x64/publish'
-        artifact: LinuxMuslCoreTests
-        displayName: Publish Linux Musl Test Package
+        artifact: linux-musl-x64-tests
+        displayName: Publish linux-musl-x64 Test Package
         condition: and(succeeded(), eq(variables['osName'], 'Windows'))
       - publish: '$(testsFolder)/net6.0/freebsd-x64/publish'
-        artifact: FreebsdCoreTests
-        displayName: Publish FreeBSD Test Package
+        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: MacCoreTests
-        displayName: Publish MacOS Test Package
+        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=net6.0 //DRuntime=win-x86
-          cp setup/output/Radarr.*windows.net6.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=net6.0 //DRuntime=win-x64
-          cp setup/output/Radarr.*windows.net6.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,28 +250,28 @@ 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/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/net6.0
       - task: ArchiveFiles@2
-        displayName: Create MacOS x64 Core app
+        displayName: Create osx-x64 app
         inputs:
           archiveFile: '$(Build.ArtifactStagingDirectory)/Radarr.$(buildName).osx-app-core-x64.zip'
           archiveType: 'zip'
           includeRootFolder: false
           rootFolderOrFile: $(artifactsFolder)/osx-x64-app/net6.0
       - task: ArchiveFiles@2
-        displayName: Create MacOS x64 Core tar
+        displayName: Create osx-x64 tar
         inputs:
           archiveFile: '$(Build.ArtifactStagingDirectory)/Radarr.$(buildName).osx-core-x64.tar.gz'
           archiveType: 'tar'
@@ -275,14 +279,14 @@ stages:
           includeRootFolder: false
           rootFolderOrFile: $(artifactsFolder)/osx-x64/net6.0
       - task: ArchiveFiles@2
-        displayName: Create MacOS arm64 Core app
+        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 MacOS arm64 Core tar
+        displayName: Create osx-arm64 tar
         inputs:
           archiveFile: '$(Build.ArtifactStagingDirectory)/Radarr.$(buildName).osx-core-arm64.tar.gz'
           archiveType: 'tar'
@@ -290,7 +294,7 @@ stages:
           includeRootFolder: false
           rootFolderOrFile: $(artifactsFolder)/osx-arm64/net6.0
       - task: ArchiveFiles@2
-        displayName: Create Linux Core tar
+        displayName: Create linux-x64 tar
         inputs:
           archiveFile: '$(Build.ArtifactStagingDirectory)/Radarr.$(buildName).linux-core-x64.tar.gz'
           archiveType: 'tar'
@@ -298,7 +302,7 @@ stages:
           includeRootFolder: false
           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'
@@ -306,7 +310,15 @@ stages:
           includeRootFolder: false
           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'
@@ -314,7 +326,7 @@ stages:
           includeRootFolder: false
           rootFolderOrFile: $(artifactsFolder)/linux-arm/net6.0
       - task: ArchiveFiles@2
-        displayName: Create ARM32 Linux Musl Core tar
+        displayName: Create linux-musl-arm tar
         inputs:
           archiveFile: '$(Build.ArtifactStagingDirectory)/Radarr.$(buildName).linux-musl-core-arm.tar.gz'
           archiveType: 'tar'
@@ -322,7 +334,7 @@ stages:
           includeRootFolder: false
           rootFolderOrFile: $(artifactsFolder)/linux-musl-arm/net6.0
       - task: ArchiveFiles@2
-        displayName: Create ARM64 Linux Core tar
+        displayName: Create linux-arm64 tar
         inputs:
           archiveFile: '$(Build.ArtifactStagingDirectory)/Radarr.$(buildName).linux-core-arm64.tar.gz'
           archiveType: 'tar'
@@ -330,7 +342,7 @@ stages:
           includeRootFolder: false
           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'
@@ -338,7 +350,7 @@ stages:
           includeRootFolder: false
           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'
@@ -383,7 +395,7 @@ stages:
     jobs:
     - job: Prepare
       pool:
-        vmImage: 'ubuntu-18.04'
+        vmImage: ${{ variables.linuxImage }}
       steps:
       - checkout: none
       - task: DownloadPipelineArtifact@2
@@ -405,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:
 
@@ -439,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
@@ -473,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'] ]
 
@@ -485,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
@@ -513,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
@@ -521,7 +599,7 @@ stages:
     jobs:
     - job: Prepare
       pool:
-        vmImage: 'ubuntu-18.04'
+        vmImage: ${{ variables.linuxImage }}
       steps:
       - checkout: none
       - task: DownloadPipelineArtifact@2
@@ -540,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:
@@ -567,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
@@ -597,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
@@ -614,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
@@ -650,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'] ]
 
@@ -663,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
@@ -711,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
 
@@ -738,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
@@ -787,7 +941,7 @@ stages:
     jobs:
     - job: Prepare
       pool:
-        vmImage: 'ubuntu-18.04'
+        vmImage: ${{ variables.linuxImage }}
       steps:
       - checkout: none
       - task: DownloadPipelineArtifact@2
@@ -804,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
@@ -823,7 +977,6 @@ stages:
           key: 'yarn | "$(osName)" | yarn.lock'
           restoreKeys: |
              yarn | "$(osName)"
-             yarn
           path: $(yarnCacheFolder)
         displayName: Cache Yarn packages
       - bash: ./build.sh --lint
@@ -836,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
@@ -852,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
@@ -863,7 +1070,7 @@ stages:
         EnableAnalyzers: 'false'
 
       pool:
-        vmImage: windows-2019
+        vmImage: ${{ variables.windowsImage }}
 
       steps:
       - task: UseDotNet@2
@@ -920,7 +1127,7 @@ stages:
     - job:
       displayName: Discord Notification
       pool:
-        vmImage: 'ubuntu-18.04'
+        vmImage: ${{ variables.linuxImage }}
       steps:
         - task: DownloadPipelineArtifact@2
           continueOnError: true
@@ -936,4 +1143,5 @@ stages:
             SYSTEM_ACCESSTOKEN: $(System.AccessToken)
             DISCORDCHANNELID: $(discordChannelId)
             DISCORDWEBHOOKKEY: $(discordWebhookKey)
+            DISCORDTHREADID: $(discordThreadId)
 

build.sh

@@ -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
 }
 
@@ -233,6 +241,32 @@ Package()
     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"
@@ -264,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 ]]
@@ -277,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)
@@ -299,6 +339,10 @@ case $key in
         PACKAGES=YES
         shift # past argument
         ;;
+    --installer)
+        INSTALLER=YES
+        shift # past argument
+        ;;
     --lint)
         LINT=YES
         shift # past argument
@@ -318,12 +362,17 @@ 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" ]];
@@ -333,9 +382,10 @@ then
         PackageTests "net6.0" "linux-x64"
         PackageTests "net6.0" "linux-musl-x64"
         PackageTests "net6.0" "osx-x64"
-        if [ "$ENABLE_BSD" = "YES" ];
+        if [ "$ENABLE_EXTRA_PLATFORMS" = "YES" ];
         then
             PackageTests "net6.0" "freebsd-x64"
+            PackageTests "net6.0" "linux-x86"
         fi
     else
         PackageTests "$FRAMEWORK" "$RID"
@@ -374,11 +424,20 @@ then
         Package "net6.0" "linux-musl-arm"
         Package "net6.0" "osx-x64"
         Package "net6.0" "osx-arm64"
-        if [ "$ENABLE_BSD" = "YES" ];
+        if [ "$ENABLE_EXTRA_PLATFORMS" = "YES" ];
         then
             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

docs.sh

@@ -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

frontend/.eslintrc.js

@@ -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: [
     {

frontend/build/webpack.config.js

@@ -223,7 +223,6 @@ module.exports = (env) => {
             {
               loader: 'url-loader',
               options: {
-                limit: 10240,
                 mimetype: 'application/font-woff',
                 emitFile: false,
                 name: 'Content/Fonts/[name].[ext]'

frontend/postcss.config.js

@@ -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'
   ]
-};
+};

frontend/src/Activity/Blocklist/Blocklist.js

@@ -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}

frontend/src/Activity/Blocklist/BlocklistConnector.js

@@ -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

frontend/src/Activity/Blocklist/BlocklistRow.js

@@ -32,11 +32,11 @@ class BlocklistRow extends Component {
 
   onDetailsPress = () => {
     this.setState({ isDetailsModalOpen: true });
-  }
+  };
 
   onDetailsModalClose = () => {
     this.setState({ isDetailsModalOpen: false });
-  }
+  };
 
   //
   // Render

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

@@ -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
         }
 
         {

frontend/src/Activity/History/HistoryConnector.js

@@ -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

frontend/src/Activity/History/HistoryRow.css

@@ -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';
 

frontend/src/Activity/History/HistoryRow.js

@@ -9,6 +9,7 @@ import MovieFormats from 'Movie/MovieFormats';
 import MovieLanguage from 'Movie/MovieLanguage';
 import MovieQuality from 'Movie/MovieQuality';
 import MovieTitleLink from 'Movie/MovieTitleLink';
+import 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
@@ -168,6 +169,17 @@ class HistoryRow extends Component {
               );
             }
 
+            if (name === 'customFormatScore') {
+              return (
+                <TableRowCell
+                  key={name}
+                  className={styles.customFormatScore}
+                >
+                  {formatCustomFormatScore(data.customFormatScore)}
+                </TableRowCell>
+              );
+            }
+
             if (name === 'releaseGroup') {
               return (
                 <TableRowCell
@@ -179,6 +191,16 @@ class HistoryRow extends Component {
               );
             }
 
+            if (name === 'sourceTitle') {
+              return (
+                <TableRowCell
+                  key={name}
+                >
+                  {sourceTitle}
+                </TableRowCell>
+              );
+            }
+
             if (name === 'details') {
               return (
                 <TableRowCell

frontend/src/Activity/History/HistoryRowConnector.js

@@ -46,7 +46,7 @@ class HistoryRowConnector extends Component {
 
   onMarkAsFailedPress = () => {
     this.props.markAsFailed({ id: this.props.id });
-  }
+  };
 
   //
   // Render

frontend/src/Activity/Queue/ProtocolLabel.css

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

frontend/src/Activity/Queue/Queue.js

@@ -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>
 

frontend/src/Activity/Queue/QueueConnector.js

@@ -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

frontend/src/Activity/Queue/QueueOptions.js

@@ -42,7 +42,7 @@ class QueueOptions extends Component {
         [name]: value
       });
     });
-  }
+  };
 
   //
   // Render

frontend/src/Activity/Queue/QueueRow.js

@@ -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

frontend/src/Activity/Queue/QueueRowConnector.js

@@ -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

frontend/src/Activity/Queue/RemoveQueueItemModal.js

@@ -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

frontend/src/Activity/Queue/RemoveQueueItemsModal.js

@@ -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

frontend/src/AddMovie/AddNewMovie/AddNewMovie.css

@@ -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;

frontend/src/AddMovie/AddNewMovie/AddNewMovie.js

@@ -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>

frontend/src/AddMovie/AddNewMovie/AddNewMovieConnector.js

@@ -79,11 +79,11 @@ class AddNewMovieConnector extends Component {
         this.props.lookupMovie({ term });
       }, 300);
     }
-  }
+  };
 
   onClearMovieLookup = () => {
     this.props.clearAddMovie();
-  }
+  };
 
   //
   // Render

frontend/src/AddMovie/AddNewMovie/AddNewMovieModalContent.css

@@ -4,7 +4,7 @@
 
 .year {
   margin-left: 5px;
-  color: $disabledColor;
+  color: var(--disabledColor);
 }
 
 .poster {

frontend/src/AddMovie/AddNewMovie/AddNewMovieModalContent.js

@@ -22,11 +22,11 @@ class AddNewMovieModalContent extends Component {
 
   onQualityProfileIdChange = ({ value }) => {
     this.props.onInputChange({ name: 'qualityProfileId', value: parseInt(value) });
-  }
+  };
 
   onAddMoviePress = () => {
     this.props.onAddMoviePress();
-  }
+  };
 
   //
   // Render

frontend/src/AddMovie/AddNewMovie/AddNewMovieModalContentConnector.js

@@ -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

frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css

@@ -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;
 }
 

frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js

@@ -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>

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

@@ -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

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

@@ -112,11 +112,11 @@ class ImportMovieConnector extends Component {
         [name]: value
       });
     });
-  }
+  };
 
   onImportPress = (ids) => {
     this.props.dispatchImportMovie({ ids });
-  }
+  };
 
   //
   // Render

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

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

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

@@ -48,7 +48,7 @@ class ImportMovieRowConnector extends Component {
       id: this.props.id,
       [name]: value
     });
-  }
+  };
 
   //
   // Render

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

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

frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieSearchResult.css

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

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

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

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

@@ -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;
 }

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

@@ -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

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

@@ -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

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

@@ -9,7 +9,7 @@
 
 .year {
   margin-left: 5px;
-  color: $disabledColor;
+  color: var(--disabledColor);
 }
 
 .existing {

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

@@ -25,7 +25,7 @@ class ImportMovieRootFolderRowConnector extends Component {
 
   onDeletePress = () => {
     this.props.deleteRootFolder({ id: this.props.id });
-  }
+  };
 
   //
   // Render

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

@@ -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

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

@@ -58,11 +58,11 @@ class ImportMovieSelectFolderConnector extends Component {
 
   onNewRootFolderSelect = (path) => {
     this.props.addRootFolder({ path });
-  }
+  };
 
   onDeleteRootFolderPress = (id) => {
     this.props.deleteRootFolder({ id });
-  }
+  };
 
   //
   // Render

frontend/src/App/App.js

@@ -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>

frontend/src/App/AppRoutes.js

@@ -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

frontend/src/App/ApplyTheme.js

@@ -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);

frontend/src/Calendar/Agenda/AgendaEvent.css

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

frontend/src/Calendar/Agenda/AgendaEvent.js

@@ -27,11 +27,11 @@ class AgendaEvent extends Component {
 
   onPress = () => {
     this.setState({ isDetailsModalOpen: true });
-  }
+  };
 
   onDetailsModalClose = () => {
     this.setState({ isDetailsModalOpen: false });
-  }
+  };
 
   //
   // Render

frontend/src/Calendar/CalendarConnector.js

@@ -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

frontend/src/Calendar/CalendarPage.js

@@ -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

frontend/src/Calendar/Day/CalendarDay.css

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

frontend/src/Calendar/Day/CalendarDays.css

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

frontend/src/Calendar/Day/CalendarDays.js

@@ -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

frontend/src/Calendar/Day/DayOfWeek.css

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

frontend/src/Calendar/Day/DaysOfWeek.js

@@ -47,13 +47,13 @@ class DaysOfWeek extends Component {
     });
 
     this.updateTimeoutId = setTimeout(this.scheduleUpdate, diff);
-  }
+  };
 
   clearUpdateTimeout = () => {
     if (this.updateTimeoutId) {
       clearTimeout(this.updateTimeoutId);
     }
-  }
+  };
 
   //
   // Render

frontend/src/Calendar/Events/CalendarEvent.css

@@ -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;
 }

frontend/src/Calendar/Events/CalendarEvent.js

@@ -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');
     }
 

frontend/src/Calendar/Events/CalendarEventQueueDetails.js

@@ -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>
       }

frontend/src/Calendar/Header/CalendarHeader.js

@@ -71,7 +71,7 @@ class CalendarHeader extends Component {
     this.setState({ view }, () => {
       this.props.onViewChange(view);
     });
-  }
+  };
 
   //
   // Render

frontend/src/Calendar/Header/CalendarHeaderConnector.js

@@ -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

frontend/src/Calendar/Header/CalendarHeaderViewButton.js

@@ -12,7 +12,7 @@ class CalendarHeaderViewButton extends Component {
 
   onPress = () => {
     this.props.onPress(this.props.view);
-  }
+  };
 
   //
   // Render

frontend/src/Calendar/Legend/LegendItem.css

@@ -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 {

frontend/src/Calendar/Options/CalendarOptionsModalContent.js

@@ -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

frontend/src/Calendar/iCal/CalendarLinkModalContent.js

@@ -84,11 +84,11 @@ class CalendarLinkModalContent extends Component {
       [name]: value,
       ...urls
     });
-  }
+  };
 
   onLinkFocus = (event) => {
     event.target.select();
-  }
+  };
 
   //
   // Render

frontend/src/Collection/AddNewCollectionMovieModal.js

@@ -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;

frontend/src/Collection/AddNewCollectionMovieModalContent.css

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

frontend/src/Collection/AddNewCollectionMovieModalContent.js

@@ -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;

frontend/src/Collection/AddNewCollectionMovieModalContentConnector.js

@@ -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);

frontend/src/Collection/Collection.js

@@ -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;

frontend/src/Collection/CollectionConnector.js

@@ -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'
+);

frontend/src/Collection/CollectionFilterModalConnector.js

@@ -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);

frontend/src/Collection/CollectionFooter.css

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

frontend/src/Collection/CollectionFooter.js

@@ -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;

frontend/src/Collection/CollectionFooterLabel.css

@@ -0,0 +1,8 @@
+.label {
+  margin-bottom: 3px;
+  font-weight: bold;
+}
+
+.savingIcon {
+  margin-left: 8px;
+}

frontend/src/Collection/CollectionFooterLabel.js

@@ -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;

frontend/src/Collection/CollectionItemConnector.js

@@ -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);

frontend/src/Collection/Edit/EditCollectionModal.js

@@ -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;

frontend/src/Collection/Edit/EditCollectionModalConnector.js

@@ -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);

frontend/src/Collection/Edit/EditCollectionModalContent.css

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

frontend/src/Collection/Edit/EditCollectionModalContent.js

@@ -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;

frontend/src/Collection/Edit/EditCollectionModalContentConnector.js

@@ -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);

frontend/src/Collection/Menus/CollectionFilterMenu.js

@@ -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;

frontend/src/Collection/Menus/CollectionSortMenu.js

@@ -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;

frontend/src/Collection/NoCollection.css

@@ -0,0 +1,11 @@
+.message {
+  margin-top: 10px;
+  margin-bottom: 30px;
+  text-align: center;
+  font-size: 20px;
+}
+
+.buttonContainer {
+  margin-top: 20px;
+  text-align: center;
+}

frontend/src/Collection/NoCollection.js

@@ -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;

frontend/src/Collection/Overview/CollectionMovie.css

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

frontend/src/Collection/Overview/CollectionMovie.js

@@ -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;

frontend/src/Collection/Overview/CollectionMovieConnector.js

@@ -0,0 +1,59 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { toggleMovieMonitored } from 'Store/Actions/movieActions';
+import createCollectionExistingMovieSelector from 'Store/Selectors/createCollectionExistingMovieSelector';
+import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import CollectionMovie from './CollectionMovie';
+
+function createMapStateToProps() {
+  return createSelector(
+    createDimensionsSelector(),
+    createCollectionExistingMovieSelector(),
+    (dimensions, existingMovie) => {
+      return {
+        isSmallScreen: dimensions.isSmallScreen,
+        isExistingMovie: !!existingMovie,
+        ...existingMovie
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  toggleMovieMonitored
+};
+
+class CollectionMovieConnector extends Component {
+
+  //
+  // Listeners
+
+  onMonitorTogglePress = (monitored) => {
+    this.props.toggleMovieMonitored({
+      movieId: this.props.id,
+      monitored
+    });
+  };
+
+  //
+  // Render
+
+  render() {
+    return (
+      <CollectionMovie
+        {...this.props}
+        onMonitorTogglePress={this.onMonitorTogglePress}
+      />
+    );
+  }
+}
+
+CollectionMovieConnector.propTypes = {
+  id: PropTypes.number,
+  monitored: PropTypes.bool,
+  toggleMovieMonitored: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(CollectionMovieConnector);