Fixed: Release profiles not saving if Must (Not) Contain is empty

(cherry picked from commit 0abd52d6beba82f9c9af0d6469aa1a7157128537)

.editorconfig

@@ -110,13 +110,13 @@ dotnet_diagnostic.SA1643.severity = none
 dotnet_diagnostic.SA1648.severity = none
 dotnet_diagnostic.SA1649.severity = none
 dotnet_diagnostic.SA1651.severity = none
-dotnet_diagnostic.SX1101.severity = warning
 dotnet_diagnostic.SX1309.severity = warning
 
 # Microsoft Analyzers that fail and need to be sorted thru
 dotnet_diagnostic.ASP0000.severity = suggestion
 dotnet_diagnostic.CA1000.severity = suggestion
 dotnet_diagnostic.CA1001.severity = suggestion
+dotnet_diagnostic.CA1002.severity = suggestion
 dotnet_diagnostic.CA1003.severity = suggestion
 dotnet_diagnostic.CA1008.severity = suggestion
 dotnet_diagnostic.CA1010.severity = suggestion
@@ -163,10 +163,16 @@ dotnet_diagnostic.CA1304.severity = suggestion
 dotnet_diagnostic.CA1305.severity = suggestion
 dotnet_diagnostic.CA1307.severity = suggestion
 dotnet_diagnostic.CA1308.severity = suggestion
+dotnet_diagnostic.CA1309.severity = suggestion
+dotnet_diagnostic.CA1310.severity = suggestion
 dotnet_diagnostic.CA1401.severity = suggestion
+dotnet_diagnostic.CA1416.severity = suggestion
 dotnet_diagnostic.CA1507.severity = suggestion
+dotnet_diagnostic.CA1508.severity = suggestion
 dotnet_diagnostic.CA1707.severity = suggestion
+dotnet_diagnostic.CA1708.severity = suggestion
 dotnet_diagnostic.CA1710.severity = suggestion
+dotnet_diagnostic.CA1711.severity = suggestion
 dotnet_diagnostic.CA1712.severity = suggestion
 dotnet_diagnostic.CA1714.severity = suggestion
 dotnet_diagnostic.CA1715.severity = suggestion
@@ -175,12 +181,14 @@ dotnet_diagnostic.CA1717.severity = suggestion
 dotnet_diagnostic.CA1720.severity = suggestion
 dotnet_diagnostic.CA1721.severity = suggestion
 dotnet_diagnostic.CA1724.severity = suggestion
+dotnet_diagnostic.CA1725.severity = suggestion
 dotnet_diagnostic.CA1801.severity = suggestion
 dotnet_diagnostic.CA1802.severity = suggestion
 dotnet_diagnostic.CA1805.severity = suggestion
 dotnet_diagnostic.CA1806.severity = suggestion
 dotnet_diagnostic.CA1810.severity = suggestion
 dotnet_diagnostic.CA1812.severity = suggestion
+dotnet_diagnostic.CA1813.severity = suggestion
 dotnet_diagnostic.CA1814.severity = suggestion
 dotnet_diagnostic.CA1815.severity = suggestion
 dotnet_diagnostic.CA1816.severity = suggestion
@@ -210,6 +218,7 @@ dotnet_diagnostic.CA2101.severity = suggestion
 dotnet_diagnostic.CA2119.severity = suggestion
 dotnet_diagnostic.CA2153.severity = suggestion
 dotnet_diagnostic.CA2200.severity = suggestion
+dotnet_diagnostic.CA2201.severity = suggestion
 dotnet_diagnostic.CA2207.severity = suggestion
 dotnet_diagnostic.CA2208.severity = suggestion
 dotnet_diagnostic.CA2211.severity = suggestion
@@ -255,6 +264,8 @@ dotnet_diagnostic.CA5374.severity = suggestion
 dotnet_diagnostic.CA5379.severity = suggestion
 dotnet_diagnostic.CA5384.severity = suggestion
 dotnet_diagnostic.CA5385.severity = suggestion
+dotnet_diagnostic.CA5392.severity = suggestion
+dotnet_diagnostic.CA5394.severity = suggestion
 dotnet_diagnostic.CA5397.severity = suggestion
 
 

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,35 +0,0 @@
----
-name: Bug Report
-about: Support Requests will be closed immediately, if you are unsure go to our Reddit or Discord first. Exceptions do not mean you found a bug!
-title: ''
-labels: bug
-assignees: ''
-
----
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**To Reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Platform Information (please complete the following information):**
- - OS: [e.g. Windows 10 2004 / Ubuntu 20.10]
- - Docker: [Yes/No]
- - Mono or.NET Core Version: [e.g. Mono 5.8 or .Net Core 3.1.10] (found under System -> Status)
- - Browser and Version [e.g. chrome 86.0.4240.198] (Only needed for UI issues)
- - Readarr Version [e.g. 0.3.0.430]
- - Readarr Branch [e.g. master]
-
-**Trace Logs**
-Turn on Trace logs under Settings -> General and wait for the bug to occur again. **Upload the full log file here (or another site (e.g. pastebin) and link it). Issues will be closed, if they do not include this!**

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,75 @@
+name: Bug Report
+title: "[BUG]: "
+description: 'Report a new bug, if you are not 100% certain this is a bug please go to our Reddit or Discord first'
+labels: ['Type: Bug', 'Status: Needs Triage']
+body:
+- type: checkboxes
+  attributes:
+    label: Is there an existing issue for this?
+    description: Please search to see if an issue already exists for the bug you encountered.
+    options:
+    - label: I have searched the existing issues
+      required: true
+- type: textarea
+  attributes:
+    label: Current Behavior
+    description: A concise description of what you're experiencing.
+  validations:
+    required: true
+- type: textarea
+  attributes:
+    label: Expected Behavior
+    description: A concise description of what you expected to happen.
+  validations:
+    required: true
+- type: textarea
+  attributes:
+    label: Steps To Reproduce
+    description: Steps to reproduce the behavior.
+    placeholder: |
+      1. In this environment...
+      2. With this config...
+      3. Run '...'
+      4. See error...
+  validations:
+    required: false
+- type: textarea
+  attributes:
+    label: Environment
+    description: |
+      examples:
+        - **OS**: Ubuntu 20.04
+        - **Readarr**: Readarr 0.1.0.432
+        - **Docker Install**: Yes
+        - **Using Reverse Proxy**: No
+        - **Browser**: Firefox 90 (If UI related)
+    value: |
+        - OS: 
+        - Readarr:
+        - Docker Install:
+        - Using Reverse Proxy:
+        - Browser:
+    render: markdown
+  validations:
+    required: true
+- type: dropdown
+  attributes:
+    label: What branch are you running?
+    options:
+      - Master
+      - Develop
+      - Nightly
+      - Other (This issue will be closed)
+  validations:
+    required: true
+- type: textarea
+  attributes:
+    label: Anything else?
+    description: |
+      Trace Logs (https://wiki.servarr.com/readarr/troubleshooting#logging-and-log-files) 
+      Links? References? Anything that will give us more context about the issue you are encountering!
+      ***Generally speaking, all bug reports must have trace logs provided.***
+
+      Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
+  validations:
+    required: true

.github/ISSUE_TEMPLATE/config.yml

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

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,17 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for this project
-
----
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,39 @@
+name: Feature Request
+title: "[FEAT]: "
+description: 'Suggest an idea for Readarr'
+labels: ['Type: Feature Request', 'Status: Needs Triage']
+body:
+- type: checkboxes
+  attributes:
+    label: Is there an existing issue for this?
+    description: Please search to see if an issue already exists for the feature you are requesting.
+    options:
+    - label: I have searched the existing issues
+      required: true
+- type: textarea
+  attributes:
+    label: Is your feature request related to a problem? Please describe
+    description: A clear and concise description of what the problem is.
+  validations:
+    required: true
+- type: textarea
+  attributes:
+    label: Describe the solution you'd like
+    description: A clear and concise description of what you want to happen.
+  validations:
+    required: true
+- type: textarea
+  attributes:
+    label: Describe alternatives you've considered
+    description: A clear and concise description of any alternative solutions or features you've considered.
+  validations:
+    required: true
+- type: textarea
+  attributes:
+    label: Anything else?
+    description: |
+      Links? References? Mockups? Anything that will give us more context about the feature you are encountering!
+      
+      Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
+  validations:
+    required: true

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,14 +1,16 @@
 #### Database Migration
-YES | NO
+YES - XXXX | NO
 
 #### Description
 A few sentences describing the overall goals of the pull request's commits.
 
+#### Screenshot (if UI related)
+
 #### Todos
 - [ ] Tests
-- [ ] Wiki Updates
-
+- [ ] Translation Keys (./src/NzbDrone.Core/Localization/Core/en.json)
+- [ ] [Wiki Updates](https://wiki.servarr.com)
 
 #### Issues Fixed or Closed by this PR
 
-* 
+* Fixes #XXXX

.github/workflows/azuresync.yml

@@ -0,0 +1,41 @@
+name: Sync issue to Azure DevOps work item
+
+on:
+  issues:
+    types:
+      [opened, edited, deleted, closed, reopened, labeled, unlabeled, assigned]
+
+concurrency: azuresync-${{ github.event.issue.number }}
+
+jobs:
+  alert:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: danhellem/github-actions-issue-to-work-item@master
+        if: "${{ contains(github.event.issue.labels.*.name, 'Type: Bug') == true }}"
+        env:
+          ado_token: "${{ secrets.ADO_PERSONAL_ACCESS_TOKEN }}"
+          github_token: "${{ github.token }}"
+          ado_organization: "Servarr"
+          ado_project: "Servarr"
+          ado_area_path: "Servarr\\Readarr"
+          ado_wit: "Bug"
+          ado_new_state: "New"
+          ado_active_state: "Active"
+          ado_close_state: "Closed"
+          ado_bypassrules: true
+          log_level: 100
+      - uses: danhellem/github-actions-issue-to-work-item@master
+        if: "${{ contains(github.event.issue.labels.*.name, 'Type: Bug') == false }}"
+        env:
+          ado_token: "${{ secrets.ADO_PERSONAL_ACCESS_TOKEN }}"
+          github_token: "${{ github.token }}"
+          ado_organization: "Servarr"
+          ado_project: "Servarr"
+          ado_area_path: "Servarr\\Readarr"
+          ado_wit: "User Story"
+          ado_new_state: "New"
+          ado_active_state: "Active"
+          ado_close_state: "Closed"
+          ado_bypassrules: true
+          log_level: 100

.github/workflows/lock.yml

@@ -0,0 +1,21 @@
+name: 'Lock threads'
+
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '0 0 * * *'
+
+jobs:
+  lock:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: dessant/lock-threads@v2
+        with:
+          github-token: ${{ github.token }}
+          issue-lock-inactive-days: '90'
+          issue-exclude-created-before: ''
+          issue-exclude-labels: ''
+          issue-lock-labels: ''
+          issue-lock-comment: ''
+          issue-lock-reason: 'resolved'
+          process-only: ''

.github/workflows/support.yml

@@ -0,0 +1,21 @@
+name: 'Support requests'
+
+on:
+  issues:
+    types: [labeled, unlabeled, reopened]
+
+jobs:
+  support:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: dessant/support-requests@v2
+        with:
+          github-token: ${{ github.token }}
+          support-label: 'Type: Support'
+          issue-comment: >
+            :wave: @{issue-author}, we use the issue tracker exclusively
+            for bug reports and feature requests. However, this issue appears
+            to be a support request. Please hop over onto our [Discord](https://readarr.com/discord) 
+            or [Subreddit](https://reddit.com/r/readarr)
+          close-issue: true
+          lock-issue: false

CONTRIBUTING.md

@@ -2,8 +2,10 @@
 
 We're always looking for people to help make Readarr even better, there are a number of ways to contribute.
 
+This file is updated on an ad-hoc basis, for the latest details please see the [contributing wiki page](https://wiki.servarr.com/readarr/contributing).
+
 ## Documentation ##
-Setup guides, FAQ, the more information we have on the [wiki](https://wiki.servarr.com/Readarr) the better.
+Setup guides, FAQ, the more information we have on the [wiki](https://wiki.servarr.com/readarr) the better.
 
 ## Development ##
 
@@ -11,20 +13,19 @@ Setup guides, FAQ, the more information we have on the [wiki](https://wiki.serva
 - Visual Studio 2019 or higher (https://www.visualstudio.com/vs/).  The community version is free and works (https://www.visualstudio.com/downloads/).
 - HTML/Javascript editor of choice (VS Code/Sublime Text/Webstorm/Atom/etc)
 - [Git](https://git-scm.com/downloads)
-- [NodeJS](https://nodejs.org/en/download/) (Node 10.X.X or higher)
+- [NodeJS](https://nodejs.org/en/download/) (Node 12.X.X or higher)
 - [Yarn](https://yarnpkg.com/)
-- .NET Core 3.1. 
+- .NET Core 5.0. 
 
 ### Getting started ###
 
 1. Fork Readarr
-2. Clone the repository into your development machine. [*info*](https://help.github.com/articles/working-with-repositories)
-3. Grab the submodules `git submodule init && git submodule update`
-4. Install the required Node Packages `yarn install`
-5. Start gulp to monitor your dev environment for any changes that need post processing using `yarn start` command.
-6. Build the project in Visual Studio, Setting startup project to `Readarr.Console` and framework to `netcoreapp31`
-7. Debug the project in Visual Studio
-8. Open http://localhost:8787
+2. Clone the repository into your development machine. [*info*](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository-from-github)
+3. Install the required Node Packages `yarn install`
+4. Start gulp to monitor your dev environment for any changes that need post processing using `yarn start` command.
+5. Build the project in Visual Studio, Setting startup project to `Readarr.Console` and framework to `net5.0`
+6. Debug the project in Visual Studio
+7. Open http://localhost:8787
 
 ### Contributing Code ###
 - If you're adding a new, already requested feature, please comment on [Github Issues](https://github.com/Readarr/Readarr/issues "Github Issues") so work is not duplicated (If you want to add something not already on there, please talk to us first)

README.md

@@ -2,18 +2,18 @@
 
 [![Build Status](https://dev.azure.com/Readarr/Readarr/_apis/build/status/Readarr.Readarr?branchName=develop)](https://dev.azure.com/Readarr/Readarr/_build/latest?definitionId=1&branchName=develop)
 [![Docker Pulls](https://img.shields.io/docker/pulls/hotio/readarr)](https://hub.docker.com/r/hotio/readarr)
-![Github Downloads](https://img.shields.io/github/downloads/readarr/readarr/total.svg)
 [![Backers on Open Collective](https://opencollective.com/readarr/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/readarr/sponsors/badge.svg)](#sponsors)
 
-### Readarr is in early stages of development, alpha/beta binary builds are not yet available. Use of any test builds isn't recommend, and may have detrimental effects on your library.
+### Readarr is currently in beta testing and is generally still in a work in progress. Features may be broken, incomplete, or cause spontaneous combustion.
 
-Readarr is a ebook (and maybe eventually magazine/audiobook) collection manager for Usenet and BitTorrent users. It can monitor multiple RSS feeds for new books from your favorite authors and will grab, sort and rename them.
+Readarr is an ebook and audiobook collection manager for Usenet and BitTorrent users. It can monitor multiple RSS feeds for new books from your favorite authors and will grab, sort and rename them.
+Note that only one type of a given book is supported. If you want both an audiobook and ebook of a given book you will need multiple instances.
 
 ## Major Features Include:
 
 * Support for major platforms: Windows, Linux, macOS, Raspberry Pi, etc.
-* Automatically detects new books.
-* Can scan your existing library and download any missing books.
+* Automatically detects new books
+* Can scan your existing library and download any missing books
 * Automatic failed download handling will try another release if one fails
 * Manual search so you can pick any release or to see why a release was not downloaded automatically
 * Fully configurable book renaming
@@ -23,9 +23,12 @@ Readarr is a ebook (and maybe eventually magazine/audiobook) collection manager
 
 ## Support
 
-[![Discord](https://img.shields.io/badge/discord-chat-7289DA.svg?maxAge=60)](https://discord.gg/rkEXY2Rbgn)
-[![GitHub](https://img.shields.io/badge/github-issues-red.svg?maxAge=60)](https://github.com/Readarr/Readarr/issues)
-[![Wiki](https://img.shields.io/badge/servarr-wiki-181717.svg?maxAge=60)](https://wiki.servarr.com/Readarr)
+Note: GitHub Issues are for Bugs and Feature Requests Only
+
+[![Discord](https://img.shields.io/badge/discord-chat-7289DA.svg?maxAge=60)](https://readarr.com/discord)
+[![Reddit](https://img.shields.io/badge/reddit-discussion-FF4500.svg?maxAge=60)](https://www.reddit.com/r/readarr)
+[![GitHub - Bugs and Feature Requests Only](https://img.shields.io/badge/github-issues-red.svg?maxAge=60)](https://github.com/Readarr/Readarr/issues)
+[![Wiki](https://img.shields.io/badge/servarr-wiki-181717.svg?maxAge=60)](https://wiki.servarr.com/readarr)
 
 ## Contributors
 

azure-pipelines.yml

@@ -13,8 +13,9 @@ variables:
   buildName: '$(Build.SourceBranchName).$(readarrVersion)'
   sentryOrg: 'servarr'
   sentryUrl: 'https://sentry.servarr.com'
-  dotnetVersion: '3.1.401'
+  dotnetVersion: '5.0.302'
   yarnCacheFolder: $(Pipeline.Workspace)/.yarn
+  nugetCacheFolder: $(Pipeline.Workspace)/.nuget/packages
 
 trigger:
   branches:
@@ -23,35 +24,92 @@ trigger:
     - master
 
 pr:
-- develop
+  branches:
+    include:
+    - develop
+  paths:
+    exclude:
+    - src/NzbDrone.Core/Localization/Core
 
 stages:
-  - stage: Setup
-    displayName: Setup
+
+  - stage: Build_Backend_Windows
+    displayName: Build Backend
+    dependsOn: []
     jobs:
-    - job:
-      displayName: Build Variables
+    - job: Backend
+      strategy:
+        matrix:
+          Windows:
+            osName: 'Windows'
+            imageName: 'windows-2019'
+            enableAnalysis: 'false'
+
       pool:
-        vmImage: 'ubuntu-18.04'
+        vmImage: $(imageName)
+      variables:
+        # Disable stylecop here - linting errors get caught by the analyze task
+        EnableAnalyzers: $(enableAnalysis)
       steps:
       # Set the build name properly.  The 'name' property won't recursively expand so hack here:
       - bash: echo "##vso[build.updatebuildnumber]$READARRVERSION"
         displayName: Set Build Name
+      - checkout: self
+        submodules: true
+        fetchDepth: 1
+      - task: UseDotNet@2
+        displayName: 'Install .net core'
+        inputs:
+          version: $(dotnetVersion)
       - bash: |
-          if [[ $BUILD_REASON == "PullRequest" ]]; then
-          git diff origin/develop...HEAD  --name-only | grep -E "^(src/|azure-pipelines.yml)"
-          echo $? > not_backend_update
+          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"
           else
-          echo 0 > not_backend_update
+            echo "Enabling BSD support"
+            sed -i.ORI 's/osx-x64/osx-x64;freebsd-x64/' $BUNDLEDVERSIONS
           fi
-          cat not_backend_update
-        displayName: Check for Backend File Changes
-      - publish: not_backend_update
-        artifact: not_backend_update
-        displayName: Publish update type
-  - stage: Build_Backend
-    displayName: Build Backend
-    dependsOn: Setup
+        displayName: Enable FreeBSD Support
+      - task: Cache@2
+        inputs:
+          key: 'nuget | "$(Agent.OS)" | $(Build.SourcesDirectory)/src/Directory.Packages.props'
+          path: $(nugetCacheFolder)
+        displayName: Cache NuGet packages
+      - bash: ./build.sh --backend --enable-bsd
+        displayName: Build Readarr Backend
+        env:
+          NUGET_PACKAGES: $(nugetCacheFolder)
+      - powershell: Get-ChildItem _output\net5.0*,_output\*.Update\* -Recurse | Where { $_.Fullname -notlike "*\publish\*" -and $_.attributes -notlike "*directory*" } | Remove-Item
+        displayName: Clean up intermediate output
+      - task: PublishPipelineArtifact@1
+        inputs:
+          path: $(outputFolder)
+          artifact: '$(osName)Backend'
+          artifactType: 'pipeline'
+          parallel: true
+          parallelCount: 100
+        displayName: Publish Backend
+      - publish: '$(testsFolder)/net5.0/win-x64/publish'
+        artifact: WindowsCoreTests
+        displayName: Publish Windows Test Package
+      - publish: '$(testsFolder)/net5.0/linux-x64/publish'
+        artifact: LinuxCoreTests
+        displayName: Publish Linux Test Package
+      - publish: '$(testsFolder)/net5.0/linux-musl-x64/publish'
+        artifact: LinuxMuslCoreTests
+        displayName: Publish Linux Musl Test Package
+      - publish: '$(testsFolder)/net5.0/freebsd-x64/publish'
+        artifact: FreebsdCoreTests
+        displayName: Publish FreeBSD Test Package
+      - publish: '$(testsFolder)/net5.0/osx-x64/publish'
+        artifact: MacCoreTests
+        displayName: Publish MacOS Test Package
+
+  - stage: Build_Backend_Other
+    displayName: Build Backend (Other OS)
+    dependsOn: []
     jobs:
     - job: Backend
       strategy:
@@ -59,18 +117,17 @@ stages:
           Linux:
             osName: 'Linux'
             imageName: 'ubuntu-18.04'
+            enableAnalysis: 'true'
           Mac:
             osName: 'Mac'
             imageName: 'macos-10.14'
-          Windows:
-            osName: 'Windows'
-            imageName: 'windows-2019'
+            enableAnalysis: 'false'
 
       pool:
         vmImage: $(imageName)
       variables:
         # Disable stylecop here - linting errors get caught by the analyze task
-        EnableAnalyzers: 'false'
+        EnableAnalyzers: $(enableAnalysis)
       steps:
       - checkout: self
         submodules: true
@@ -79,43 +136,30 @@ stages:
         displayName: 'Install .net core'
         inputs:
           version: $(dotnetVersion)
-      - bash: ./build.sh --backend
-        displayName: Build Readarr Backend
       - bash: |
-          find ${OUTPUTFOLDER} -type f ! -path "*/publish/*" -exec rm -rf {} \;
-          find ${OUTPUTFOLDER} -depth -empty -type d -exec rm -r "{}" \;
-          find ${TESTSFOLDER} -type f ! -path "*/publish/*" -exec rm -rf {} \;
-          find ${TESTSFOLDER} -depth -empty -type d -exec rm -r "{}" \;
-        displayName: Clean up intermediate output
-        condition: and(succeeded(), ne(variables['osName'], 'Windows'))
-      - publish: $(outputFolder)
-        artifact: '$(osName)Backend'
-        displayName: Publish Backend
-        condition: and(succeeded(), eq(variables['osName'], 'Windows'))
-      - publish: '$(testsFolder)/netcoreapp3.1/win-x64/publish'
-        artifact: WindowsCoreTests
-        displayName: Publish Windows Test Package
-        condition: and(succeeded(), eq(variables['osName'], 'Windows'))
-      - publish: '$(testsFolder)/net462/linux-x64/publish'
-        artifact: LinuxTests
-        displayName: Publish Linux Mono Test Package
-        condition: and(succeeded(), eq(variables['osName'], 'Windows'))
-      - publish: '$(testsFolder)/netcoreapp3.1/linux-x64/publish'
-        artifact: LinuxCoreTests
-        displayName: Publish Linux Test Package
-        condition: and(succeeded(), eq(variables['osName'], 'Windows'))
-      - publish: '$(testsFolder)/netcoreapp3.1/linux-musl-x64/publish'
-        artifact: LinuxMuslCoreTests
-        displayName: Publish Linux Musl Test Package
-        condition: and(succeeded(), eq(variables['osName'], 'Windows'))
-      - publish: '$(testsFolder)/netcoreapp3.1/osx-x64/publish'
-        artifact: MacCoreTests
-        displayName: Publish MacOS Test Package
-        condition: and(succeeded(), eq(variables['osName'], 'Windows'))
+          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"
+          else
+            echo "Enabling BSD support"
+            sed -i.ORI 's/osx-x64/osx-x64;freebsd-x64/' $BUNDLEDVERSIONS
+          fi
+        displayName: Enable FreeBSD Support
+      - task: Cache@2
+        inputs:
+          key: 'nuget | "$(Agent.OS)" | $(Build.SourcesDirectory)/src/Directory.Packages.props'
+          path: $(nugetCacheFolder)
+        displayName: Cache NuGet packages
+      - bash: ./build.sh --backend --enable-bsd
+        displayName: Build Readarr Backend
+        env:
+          NUGET_PACKAGES: $(nugetCacheFolder)
 
   - stage: Build_Frontend
     displayName: Frontend
-    dependsOn: Setup
+    dependsOn: []
     jobs:
     - job: Build
       strategy:
@@ -135,7 +179,7 @@ stages:
       - task: NodeTool@0
         displayName: Set Node.js version
         inputs:
-          versionSpec: '10.x'
+          versionSpec: '12.x'
       - checkout: self
         submodules: true
         fetchDepth: 1
@@ -159,7 +203,7 @@ stages:
         
   - stage: Installer
     dependsOn:
-    - Build_Backend
+    - Build_Backend_Windows
     - Build_Frontend
     jobs:
     - job: Windows_Installer
@@ -184,12 +228,12 @@ stages:
       - bash: ./build.sh --packages
         displayName: Create Packages
       - bash: |
-          setup/inno/ISCC.exe setup/readarr.iss //DFramework=netcoreapp3.1 //DRuntime=win-x86
-          cp setup/output/Readarr.*windows.netcoreapp3.1.exe ${BUILD_ARTIFACTSTAGINGDIRECTORY}/Readarr.${BUILDNAME}.windows-core-x86-installer.exe
+          setup/inno/ISCC.exe setup/readarr.iss //DFramework=net5.0 //DRuntime=win-x86
+          cp setup/output/Readarr.*windows.net5.0.exe ${BUILD_ARTIFACTSTAGINGDIRECTORY}/Readarr.${BUILDNAME}.windows-core-x86-installer.exe
         displayName: Create .NET Core Windows installer
       - bash: |
-          setup/inno/ISCC.exe setup/readarr.iss //DFramework=netcoreapp3.1 //DRuntime=win-x64
-          cp setup/output/Readarr.*windows.netcoreapp3.1.exe ${BUILD_ARTIFACTSTAGINGDIRECTORY}/Readarr.${BUILDNAME}.windows-core-x64-installer.exe
+          setup/inno/ISCC.exe setup/readarr.iss //DFramework=net5.0 //DRuntime=win-x64
+          cp setup/output/Readarr.*windows.net5.0.exe ${BUILD_ARTIFACTSTAGINGDIRECTORY}/Readarr.${BUILDNAME}.windows-core-x64-installer.exe
         displayName: Create .NET Core Windows installer
       - publish: $(Build.ArtifactStagingDirectory)
         artifact: 'WindowsInstaller'
@@ -197,7 +241,7 @@ stages:
 
   - stage: Packages
     dependsOn:
-    - Build_Backend
+    - Build_Backend_Windows
     - Build_Frontend
     jobs:
     - job: Other_Packages
@@ -219,7 +263,7 @@ stages:
           artifactName: WindowsFrontend
           targetPath: _output
         displayName: Fetch Frontend
-      - bash: ./build.sh --packages
+      - bash: ./build.sh --packages --enable-bsd
         displayName: Create Packages
       - bash: |
           find . -name "fpcalc" -exec chmod a+x {} \;
@@ -232,21 +276,21 @@ stages:
           archiveFile: '$(Build.ArtifactStagingDirectory)/Readarr.$(buildName).windows-core-x64.zip'
           archiveType: 'zip'
           includeRootFolder: false
-          rootFolderOrFile: $(artifactsFolder)/win-x64/netcoreapp3.1
+          rootFolderOrFile: $(artifactsFolder)/win-x64/net5.0
       - task: ArchiveFiles@2
         displayName: Create Windows x86 Core zip
         inputs:
           archiveFile: '$(Build.ArtifactStagingDirectory)/Readarr.$(buildName).windows-core-x86.zip'
           archiveType: 'zip'
           includeRootFolder: false
-          rootFolderOrFile: $(artifactsFolder)/win-x86/netcoreapp3.1
+          rootFolderOrFile: $(artifactsFolder)/win-x86/net5.0
       - task: ArchiveFiles@2
         displayName: Create MacOS Core app
         inputs:
           archiveFile: '$(Build.ArtifactStagingDirectory)/Readarr.$(buildName).osx-app-core-x64.zip'
           archiveType: 'zip'
           includeRootFolder: false
-          rootFolderOrFile: $(artifactsFolder)/macos-app/netcoreapp3.1
+          rootFolderOrFile: $(artifactsFolder)/macos-app/net5.0
       - task: ArchiveFiles@2
         displayName: Create MacOS Core tar
         inputs:
@@ -254,15 +298,7 @@ stages:
           archiveType: 'tar'
           tarCompression: 'gz'
           includeRootFolder: false
-          rootFolderOrFile: $(artifactsFolder)/macos/netcoreapp3.1
-      - task: ArchiveFiles@2
-        displayName: Create Linux Mono tar
-        inputs:
-          archiveFile: '$(Build.ArtifactStagingDirectory)/Readarr.$(buildName).linux.tar.gz'
-          archiveType: 'tar'
-          tarCompression: 'gz'
-          includeRootFolder: false
-          rootFolderOrFile: $(artifactsFolder)/linux-x64/net462
+          rootFolderOrFile: $(artifactsFolder)/macos/net5.0
       - task: ArchiveFiles@2
         displayName: Create Linux Core tar
         inputs:
@@ -270,7 +306,7 @@ stages:
           archiveType: 'tar'
           tarCompression: 'gz'
           includeRootFolder: false
-          rootFolderOrFile: $(artifactsFolder)/linux-x64/netcoreapp3.1
+          rootFolderOrFile: $(artifactsFolder)/linux-x64/net5.0
       - task: ArchiveFiles@2
         displayName: Create Linux Musl Core tar
         inputs:
@@ -278,7 +314,7 @@ stages:
           archiveType: 'tar'
           tarCompression: 'gz'
           includeRootFolder: false
-          rootFolderOrFile: $(artifactsFolder)/linux-musl-x64/netcoreapp3.1
+          rootFolderOrFile: $(artifactsFolder)/linux-musl-x64/net5.0
       - task: ArchiveFiles@2
         displayName: Create ARM32 Linux Core tar
         inputs:
@@ -286,7 +322,7 @@ stages:
           archiveType: 'tar'
           tarCompression: 'gz'
           includeRootFolder: false
-          rootFolderOrFile: $(artifactsFolder)/linux-arm/netcoreapp3.1
+          rootFolderOrFile: $(artifactsFolder)/linux-arm/net5.0
       - task: ArchiveFiles@2
         displayName: Create Linux Core tar
         inputs:
@@ -294,7 +330,7 @@ stages:
           archiveType: 'tar'
           tarCompression: 'gz'
           includeRootFolder: false
-          rootFolderOrFile: $(artifactsFolder)/linux-arm64/netcoreapp3.1
+          rootFolderOrFile: $(artifactsFolder)/linux-arm64/net5.0
       - task: ArchiveFiles@2
         displayName: Create ARM64 Linux Musl Core tar
         inputs:
@@ -302,7 +338,15 @@ stages:
           archiveType: 'tar'
           tarCompression: 'gz'
           includeRootFolder: false
-          rootFolderOrFile: $(artifactsFolder)/linux-musl-arm64/netcoreapp3.1
+          rootFolderOrFile: $(artifactsFolder)/linux-musl-arm64/net5.0
+      - task: ArchiveFiles@2
+        displayName: Create FreeBSD Core Core tar
+        inputs:
+          archiveFile: '$(Build.ArtifactStagingDirectory)/Readarr.$(buildName).freebsd-core-x64.tar.gz'
+          archiveType: 'tar'
+          tarCompression: 'gz'
+          includeRootFolder: false
+          rootFolderOrFile: $(artifactsFolder)/freebsd-x64/net5.0
       - publish: $(Build.ArtifactStagingDirectory)
         artifact: 'Packages'
         displayName: Publish Packages
@@ -318,6 +362,10 @@ stages:
           else
           sentry-cli releases deploys "${RELEASENAME}" new -e production
           fi
+          if [ $? -gt 0 ]; then
+            echo "##vso[task.logissue type=warning]Error uploading source maps."
+          fi
+          exit 0
         displayName: Publish Sentry Source Maps
         condition: |
           or
@@ -332,44 +380,39 @@ stages:
     
   - stage: Unit_Test
     displayName: Unit Tests
-    dependsOn: Build_Backend
+    dependsOn: Build_Backend_Windows
     condition: succeeded()
     jobs:
-    - job: Prepare
-      pool:
-        vmImage: 'ubuntu-18.04'
-      steps:
-      - checkout: none
-      - task: DownloadPipelineArtifact@2
-        inputs:
-          buildType: 'current'
-          artifactName: 'not_backend_update'
-          targetPath: '.'
-      - bash: echo "##vso[task.setvariable variable=backendNotUpdated;isOutput=true]$(cat not_backend_update)"
-        name: setVar
-
     - job: Unit
       displayName: Unit Native
-      dependsOn: Prepare
-      condition: and(succeeded(), eq(dependencies.Prepare.outputs['setVar.backendNotUpdated'], '0'))
+      workspace:
+        clean: all
 
       strategy:
         matrix:
           MacCore:
             osName: 'Mac'
             testName: 'MacCore'
+            poolName: 'Azure Pipelines'
             imageName: 'macos-10.14'
           WindowsCore:
             osName: 'Windows'
             testName: 'WindowsCore'
+            poolName: 'Azure Pipelines'
             imageName: 'windows-2019'
           LinuxCore:
             osName: 'Linux'
             testName: 'LinuxCore'
+            poolName: 'Azure Pipelines'
             imageName: 'ubuntu-18.04'
-            pattern: 'Readarr.**.linux-core-x64.tar.gz'
+          FreebsdCore:
+            osName: 'Linux'
+            testName: 'FreebsdCore'
+            poolName: 'FreeBSD'
+            imageName:
 
       pool:
+        name: $(poolName)
         vmImage: $(imageName)
 
       steps:
@@ -378,6 +421,7 @@ stages:
         displayName: 'Install .net core'
         inputs:
           version: $(dotnetVersion)
+        condition: ne(variables['poolName'], 'FreeBSD')
       - task: DownloadPipelineArtifact@2
         displayName: Download Test Artifact
         inputs:
@@ -388,20 +432,9 @@ stages:
         displayName: Enable Windows Test Service
         condition: and(succeeded(), eq(variables['osName'], 'Windows'))
       - bash: |
-          wget https://github.com/acoustid/chromaprint/releases/download/v1.4.3/chromaprint-fpcalc-1.4.3-linux-x86_64.tar.gz
-          sudo tar xf chromaprint-fpcalc-1.4.3-linux-x86_64.tar.gz --strip-components=1 --directory /usr/bin
           chmod a+x _tests/fpcalc
-        displayName: Install fpcalc
-        condition: and(succeeded(), eq(variables['osName'], 'Linux'))
-      - bash: |
-          SYMLINK=6_6_0
-          MONOPREFIX=/Library/Frameworks/Mono.framework/Versions/$SYMLINK
-          echo "##vso[task.setvariable variable=MONOPREFIX;]$MONOPREFIX"
-          echo "##vso[task.setvariable variable=PKG_CONFIG_PATH;]$MONOPREFIX/lib/pkgconfig:$MONOPREFIX/share/pkgconfig:$PKG_CONFIG_PATH"
-          echo "##vso[task.setvariable variable=PATH;]$MONOPREFIX/bin:$PATH"
-          chmod a+x _tests/fpcalc
-        displayName: Set Mono Version and make fpcalc Executable
-        condition: and(succeeded(), eq(variables['osName'], 'Mac'))
+        displayName: Make fpcalc Executable
+        condition: and(succeeded(), or(eq(variables['osName'], 'Mac'), eq(variables['testName'], 'LinuxCore')))
       - bash: find ${TESTSFOLDER} -name "Readarr.Test.Dummy" -exec chmod a+x {} \;
         displayName: Make Test Dummy Executable
         condition: and(succeeded(), ne(variables['osName'], 'Windows'))
@@ -421,22 +454,8 @@ stages:
 
     - job: Unit_Docker
       displayName: Unit Docker
-      dependsOn: Prepare
-      condition: and(succeeded(), eq(dependencies.Prepare.outputs['setVar.backendNotUpdated'], '0'))
       strategy:
         matrix:
-          mono520:
-            testName: 'Mono 5.20'
-            artifactName: LinuxTests
-            containerImage: ghcr.io/servarr/testimages:mono-5.20
-          mono610:
-            testName: 'Mono 6.10'
-            artifactName: LinuxTests
-            containerImage: ghcr.io/servarr/testimages:mono-6.10
-          mono612:
-            testName: 'Mono 6.12'
-            artifactName: LinuxTests
-            containerImage: ghcr.io/servarr/testimages:mono-6.12
           alpine:
             testName: 'Musl Net Core'
             artifactName: LinuxMuslCoreTests
@@ -481,53 +500,30 @@ stages:
     displayName: Integration
     dependsOn: Packages
     jobs:
-    - job: Prepare
-      pool:
-        vmImage: 'ubuntu-18.04'
-      steps:
-      - checkout: none
-      - task: DownloadPipelineArtifact@2
-        inputs:
-          buildType: 'current'
-          artifactName: 'not_backend_update'
-          targetPath: '.'
-      - bash: echo "##vso[task.setvariable variable=backendNotUpdated;isOutput=true]$(cat not_backend_update)"
-        name: setVar
-
     - job: Integration_Native
       displayName: Integration Native
-      dependsOn: Prepare
-      condition: and(succeeded(), eq(dependencies.Prepare.outputs['setVar.backendNotUpdated'], '0'))
       strategy:
         matrix:
           MacCore:
             osName: 'Mac'
             testName: 'MacCore'
             imageName: 'macos-10.14'
-            pattern: 'Readarr.**.osx-core-x64.tar.gz'
+            pattern: 'Readarr.*.osx-core-x64.tar.gz'
           WindowsCore:
             osName: 'Windows'
             testName: 'WindowsCore'
             imageName: 'windows-2019'
-            pattern: 'Readarr.**.windows-core-x64.zip'
+            pattern: 'Readarr.*.windows-core-x64.zip'
           LinuxCore:
             osName: 'Linux'
             testName: 'LinuxCore'
             imageName: 'ubuntu-18.04'
-            pattern: 'Readarr.**.linux-core-x64.tar.gz'
+            pattern: 'Readarr.*.linux-core-x64.tar.gz'
 
       pool:
         vmImage: $(imageName)
         
       steps:
-      - bash: |
-          SYMLINK=6_6_0
-          MONOPREFIX=/Library/Frameworks/Mono.framework/Versions/$SYMLINK
-          echo "##vso[task.setvariable variable=MONOPREFIX;]$MONOPREFIX"
-          echo "##vso[task.setvariable variable=PKG_CONFIG_PATH;]$MONOPREFIX/lib/pkgconfig:$MONOPREFIX/share/pkgconfig:$PKG_CONFIG_PATH"
-          echo "##vso[task.setvariable variable=PATH;]$MONOPREFIX/bin:$PATH"
-        displayName: Set Mono Version
-        condition: and(succeeded(), eq(variables['osName'], 'Mac'))
       - task: UseDotNet@2
         displayName: 'Install .net core'
         inputs:
@@ -567,32 +563,59 @@ stages:
           failTaskOnFailedTests: true
         displayName: Publish Test Results
 
+    - job: Integration_FreeBSD
+      displayName: Integration Native FreeBSD
+      workspace:
+        clean: all
+      variables:
+        pattern: 'Readarr.*.freebsd-core-x64.tar.gz'
+      pool:
+        name: 'FreeBSD'
+
+      steps:
+      - checkout: none
+      - task: DownloadPipelineArtifact@2
+        displayName: Download Test Artifact
+        inputs:
+          buildType: 'current'
+          artifactName: 'FreebsdCoreTests'
+          targetPath: $(testsFolder)
+      - task: DownloadPipelineArtifact@2
+        displayName: Download Build Artifact
+        inputs:
+          buildType: 'current'
+          artifactName: Packages
+          itemPattern: '/$(pattern)'
+          targetPath: $(Build.ArtifactStagingDirectory)
+      - bash: |
+          mkdir -p ${BUILD_ARTIFACTSTAGINGDIRECTORY}/bin
+          tar xf ${BUILD_ARTIFACTSTAGINGDIRECTORY}/$(pattern) -C ${BUILD_ARTIFACTSTAGINGDIRECTORY}/bin
+        displayName: Extract Package
+      - bash: |
+          mkdir -p ./bin/
+          cp -r -v ${BUILD_ARTIFACTSTAGINGDIRECTORY}/bin/Readarr/. ./bin/
+        displayName: Move Package Contents
+      - bash: |
+          chmod a+x ${TESTSFOLDER}/test.sh
+          ${TESTSFOLDER}/test.sh Linux Integration Test
+        displayName: Run Integration Tests
+      - task: PublishTestResults@2
+        inputs:
+          testResultsFormat: 'NUnit'
+          testResultsFiles: '**/TestResult.xml'
+          testRunTitle: 'FreeBSD Integration Tests'
+          failTaskOnFailedTests: true
+        displayName: Publish Test Results
+
     - job: Integration_Docker
       displayName: Integration Docker
-      dependsOn: Prepare
-      condition: and(succeeded(), eq(dependencies.Prepare.outputs['setVar.backendNotUpdated'], '0'))
       strategy:
         matrix:
-          mono520:
-            testName: 'Mono 5.20'
-            artifactName: LinuxTests
-            containerImage: ghcr.io/servarr/testimages:mono-5.20
-            pattern: 'Readarr.**.linux.tar.gz'
-          mono610:
-            testName: 'Mono 6.10'
-            artifactName: LinuxTests
-            containerImage: ghcr.io/servarr/testimages:mono-6.10
-            pattern: 'Readarr.**.linux.tar.gz'
-          mono612:
-            testName: 'Mono 6.12'
-            artifactName: LinuxTests
-            containerImage: ghcr.io/servarr/testimages:mono-6.12
-            pattern: 'Readarr.**.linux.tar.gz'
           alpine:
             testName: 'Musl Net Core'
             artifactName: LinuxMuslCoreTests
             containerImage: ghcr.io/servarr/testimages:alpine
-            pattern: 'Readarr.**.linux-musl-core-x64.tar.gz'
+            pattern: 'Readarr.*.linux-musl-core-x64.tar.gz'
 
       pool:
         vmImage: 'ubuntu-18.04'
@@ -652,15 +675,15 @@ stages:
           Linux:
             osName: 'Linux'
             imageName: 'ubuntu-18.04'
-            pattern: 'Readarr.**.linux-core-x64.tar.gz'
+            pattern: 'Readarr.*.linux-core-x64.tar.gz'
           Mac:
             osName: 'Mac'
             imageName: 'macos-10.14'
-            pattern: 'Readarr.**.osx-core-x64.tar.gz'
+            pattern: 'Readarr.*.osx-core-x64.tar.gz'
           Windows:
             osName: 'Windows'
             imageName: 'windows-2019'
-            pattern: 'Readarr.**.windows-core-x64.zip'
+            pattern: 'Readarr.*.windows-core-x64.zip'
 
       pool:
         vmImage: $(imageName)
@@ -697,6 +720,17 @@ stages:
           chmod a+x ${TESTSFOLDER}/test.sh
           ${TESTSFOLDER}/test.sh ${OSNAME} Automation Test
         displayName: Run Automation Tests
+      - task: CopyFiles@2
+        displayName: 'Copy Screenshot to: $(Build.ArtifactStagingDirectory)'
+        inputs:
+          SourceFolder: '$(Build.SourcesDirectory)'
+          Contents: |
+            **/*_test_screenshot.png
+          TargetFolder: '$(Build.ArtifactStagingDirectory)/screenshots'
+      - publish: $(Build.ArtifactStagingDirectory)/screenshots
+        artifact: '$(osName)AutomationScreenshots'
+        condition: and(succeeded(), eq(variables['System.JobAttempt'], '1'))
+        displayName: Publish Screenshot Bundle
       - task: PublishTestResults@2
         inputs:
           testResultsFormat: 'NUnit'
@@ -706,23 +740,9 @@ stages:
         displayName: Publish Test Results
 
   - stage: Analyze
-    dependsOn:
-    - Setup
+    dependsOn: []
     displayName: Analyze
     jobs:
-    - job: Prepare
-      pool:
-        vmImage: 'ubuntu-18.04'
-      steps:
-      - checkout: none
-      - task: DownloadPipelineArtifact@2
-        inputs:
-          buildType: 'current'
-          artifactName: 'not_backend_update'
-          targetPath: '.'
-      - bash: echo "##vso[task.setvariable variable=backendNotUpdated;isOutput=true]$(cat not_backend_update)"
-        name: setVar
-
     - job: Lint_Frontend
       displayName: Lint Frontend
       strategy:
@@ -739,7 +759,7 @@ stages:
       - task: NodeTool@0
         displayName: Set Node.js version
         inputs:
-          versionSpec: '10.x'
+          versionSpec: '12.x'
       - checkout: self
         submodules: true
         fetchDepth: 1
@@ -780,23 +800,33 @@ stages:
 
     - job: Analyze_Backend
       displayName: Backend
-      dependsOn: Prepare
-      condition: and(succeeded(), eq(dependencies.Prepare.outputs['setVar.backendNotUpdated'], '0'))
 
       variables:
         disable.coverage.autogenerate: 'true'
       pool:
-        vmImage: windows-2019
+        vmImage: ubuntu-18.04
 
       steps:
       - task: UseDotNet@2
-        displayName: 'Install .net core'
+        displayName: 'Install .net core 2.1'
+        inputs:
+          version: 2.1.815
+      - task: UseDotNet@2
+        displayName: 'Install .net core 3.1'
+        inputs:
+          version: 3.1.413    
+      - task: UseDotNet@2
+        displayName: 'Install .net core 5.0'
         inputs:
           version: $(dotnetVersion)
       - checkout: self # Need history for Sonar analysis
         submodules: true
-      - powershell: Set-Service SCardSvr -StartupType Manual
-        displayName: Enable Windows Test Service
+      - task: Cache@2
+        inputs:
+          key: 'nuget | "$(Agent.OS)" | $(Build.SourcesDirectory)/src/Directory.Packages.props'
+          path: $(nugetCacheFolder)
+        displayName: Cache NuGet packages
+
       - task: SonarCloudPrepare@1
         condition: eq(variables['System.PullRequest.IsFork'], 'False')
         inputs:
@@ -807,14 +837,16 @@ stages:
           projectName: 'Readarr'
           projectVersion: '$(readarrVersion)'
           extraProperties: |
-            sonar.exclusions=**/obj/**,**/*.dll,**/NzbDrone.Core.Test/Files/**/*,./frontend/**,**/ExternalModules/**,./src/Libraries/**
-            sonar.coverage.exclusions=**/Readarr.Api.V1/**/*,**/MonoTorrent/**/*,**/Marr.Data/**/*
+            sonar.exclusions=**/obj/**,**/*.dll,**/NzbDrone.Core.Test/Files/**/*,./frontend/**,./src/Libraries/**
+            sonar.coverage.exclusions=**/Readarr.Api.V1/**/*
             sonar.cs.opencover.reportsPaths=$(Build.SourcesDirectory)/CoverageResults/**/coverage.opencover.xml
             sonar.cs.nunit.reportsPaths=$(Build.SourcesDirectory)/TestResult.xml
       - bash: |
-          ./build.sh --backend -f netcoreapp3.1 -r win-x64
-          TEST_DIR=_tests/netcoreapp3.1/win-x64/publish/ ./test.sh Windows Unit Coverage
+          ./build.sh --backend -f net5.0 -r linux-x64
+          TEST_DIR=_tests/net5.0/linux-x64/publish/ ./test.sh Linux Unit Coverage
         displayName: Coverage Unit Tests
+        env:
+          NUGET_PACKAGES: $(nugetCacheFolder)
       - task: SonarCloudAnalyze@1
         condition: eq(variables['System.PullRequest.IsFork'], 'False')
         displayName: Publish SonarCloud Results
@@ -837,13 +869,14 @@ stages:
     - Unit_Test
     - Integration
     - Automation
+    - Build_Backend_Other
     condition: eq(variables['system.pullrequest.isfork'], false)
     displayName: Build Status Report
     jobs:
     - job:
       displayName: Discord Notification
       pool:
-        vmImage: 'windows-2019'
+        vmImage: 'ubuntu-18.04'
       steps:
         - task: DownloadPipelineArtifact@2
           continueOnError: true
@@ -853,7 +886,7 @@ stages:
             artifactName: 'WindowsAutomationScreenshots'
             targetPath: $(Build.SourcesDirectory)
         - checkout: none
-        - powershell: |
+        - pwsh: |
             iex ((New-Object System.Net.WebClient).DownloadString('https://raw.githubusercontent.com/Servarr/AzureDiscordNotify/master/DiscordNotify.ps1'))
           env:
             SYSTEM_ACCESSTOKEN: $(System.AccessToken)

build.sh

@@ -1,4 +1,4 @@
-#! /bin/bash
+#! /usr/bin/env bash
 set -e
 
 outputFolder='_output'
@@ -27,6 +27,18 @@ UpdateVersionNumber()
     fi
 }
 
+EnableBsdSupport()
+{
+    #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"
+
+    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^<ExcludedRuntimeFrameworkPairs>\(.*\)</ExcludedRuntimeFrameworkPairs>^<ExcludedRuntimeFrameworkPairs>\1;freebsd-x64:net472</ExcludedRuntimeFrameworkPairs>^g" src/Directory.Build.props
+    fi
+}
+
 LintUI()
 {
     ProgressStart 'ESLint'
@@ -57,9 +69,6 @@ Build()
         platform=Posix
     fi
 
-    dotnet clean $slnFile -c Debug
-    dotnet clean $slnFile -c Release
-
     if [[ -z "$RID" || -z "$FRAMEWORK" ]];
     then
         dotnet msbuild -restore $slnFile -p:Configuration=Release -p:Platform=$platform -t:PublishAllRids
@@ -77,11 +86,11 @@ YarnInstall()
     ProgressEnd 'yarn install'
 }
 
-RunGulp()
+RunWebpack()
 {
-    ProgressStart 'Running gulp'
-    yarn run build --production
-    ProgressEnd 'Running gulp'
+    ProgressStart 'Running webpack'
+    yarn run build --env production
+    ProgressEnd 'Running webpack'
 }
 
 PackageFiles()
@@ -120,7 +129,7 @@ PackageLinux()
 
     echo "Adding Readarr.Mono to UpdatePackage"
     cp $folder/Readarr.Mono.* $folder/Readarr.Update
-    if [ "$framework" = "netcoreapp3.1" ]; then
+    if [ "$framework" = "net5.0" ]; then
         cp $folder/Mono.Posix.NETStandard.* $folder/Readarr.Update
         cp $folder/libMonoPosixHelper.* $folder/Readarr.Update
     fi
@@ -138,11 +147,6 @@ PackageMacOS()
 
     PackageFiles "$folder" "$framework" "osx-x64"
 
-    if [ "$framework" = "net462" ]; then
-        echo "Adding Startup script"
-        cp macOS/Readarr $folder
-    fi
-
     echo "Removing Service helpers"
     rm -f $folder/ServiceUninstall.*
     rm -f $folder/ServiceInstall.*
@@ -152,7 +156,7 @@ PackageMacOS()
 
     echo "Adding Readarr.Mono to UpdatePackage"
     cp $folder/Readarr.Mono.* $folder/Readarr.Update
-    if [ "$framework" = "netcoreapp3.1" ]; then
+    if [ "$framework" = "net5.0" ]; then
         cp $folder/Mono.Posix.NETStandard.* $folder/Readarr.Update
         cp $folder/libMonoPosixHelper.* $folder/Readarr.Update
     fi
@@ -186,12 +190,13 @@ PackageWindows()
 {
     local framework="$1"
     local runtime="$2"
-    
-    ProgressStart "Creating Windows Package for $framework"
+
+    ProgressStart "Creating $runtime Package for $framework"
 
     local folder=$artifactsFolder/$runtime/$framework/Readarr
     
     PackageFiles "$folder" "$framework" "$runtime"
+    cp -r $outputFolder/$framework-windows/$runtime/publish/* $folder
 
     echo "Removing Readarr.Mono"
     rm -f $folder/Readarr.Mono.*
@@ -201,7 +206,7 @@ PackageWindows()
     echo "Adding Readarr.Windows to UpdatePackage"
     cp $folder/Readarr.Windows.* $folder/Readarr.Update
 
-    ProgressEnd 'Creating Windows Package'
+    ProgressEnd "Creating $runtime Package for $framework"
 }
 
 Package()
@@ -213,7 +218,7 @@ Package()
     IFS='-' read -ra SPLIT <<< "$runtime"
 
     case "${SPLIT[0]}" in
-        linux)
+        linux|freebsd*)
             PackageLinux "$framework" "$runtime"
             ;;
         win)
@@ -258,6 +263,7 @@ if [ $# -eq 0 ]; then
     FRONTEND=YES
     PACKAGES=YES
     LINT=YES
+    ENABLE_BSD=NO
 fi
 
 while [[ $# -gt 0 ]]
@@ -269,6 +275,10 @@ case $key in
         BACKEND=YES
         shift # past argument
         ;;
+    --enable-bsd)
+        ENABLE_BSD=YES
+        shift # past argument
+        ;;
     -r|--runtime)
         RID="$2"
         shift # past argument
@@ -309,15 +319,22 @@ set -- "${POSITIONAL[@]}" # restore positional parameters
 if [ "$BACKEND" = "YES" ];
 then
     UpdateVersionNumber
+    if [ "$ENABLE_BSD" = "YES" ];
+    then
+        EnableBsdSupport
+    fi
     Build
     if [[ -z "$RID" || -z "$FRAMEWORK" ]];
     then
-        PackageTests "netcoreapp3.1" "win-x64"
-        PackageTests "netcoreapp3.1" "win-x86"
-        PackageTests "netcoreapp3.1" "linux-x64"
-        PackageTests "netcoreapp3.1" "linux-musl-x64"
-        PackageTests "netcoreapp3.1" "osx-x64"
-        PackageTests "net462" "linux-x64"
+        PackageTests "net5.0" "win-x64"
+        PackageTests "net5.0" "win-x86"
+        PackageTests "net5.0" "linux-x64"
+        PackageTests "net5.0" "linux-musl-x64"
+        PackageTests "net5.0" "osx-x64"
+        if [ "$ENABLE_BSD" = "YES" ];
+        then
+            PackageTests "net5.0" "freebsd-x64"
+        fi
     else
         PackageTests "$FRAMEWORK" "$RID"
     fi
@@ -326,7 +343,7 @@ fi
 if [ "$FRONTEND" = "YES" ];
 then
     YarnInstall
-    RunGulp
+    RunWebpack
 fi
 
 if [ "$LINT" = "YES" ];
@@ -345,15 +362,18 @@ then
 
     if [[ -z "$RID" || -z "$FRAMEWORK" ]];
     then
-        Package "netcoreapp3.1" "win-x64"
-        Package "netcoreapp3.1" "win-x86"
-        Package "netcoreapp3.1" "linux-x64"
-        Package "netcoreapp3.1" "linux-musl-x64"
-        Package "netcoreapp3.1" "linux-arm64"
-        Package "netcoreapp3.1" "linux-musl-arm64"
-        Package "netcoreapp3.1" "linux-arm"
-        Package "netcoreapp3.1" "osx-x64"
-        Package "net462" "linux-x64"
+        Package "net5.0" "win-x64"
+        Package "net5.0" "win-x86"
+        Package "net5.0" "linux-x64"
+        Package "net5.0" "linux-musl-x64"
+        Package "net5.0" "linux-arm64"
+        Package "net5.0" "linux-musl-arm64"
+        Package "net5.0" "linux-arm"
+        Package "net5.0" "osx-x64"
+        if [ "$ENABLE_BSD" = "YES" ];
+        then
+            Package "net5.0" "freebsd-x64"
+        fi
     else
         Package "$FRAMEWORK" "$RID"
     fi

frontend/.eslintrc.js

@@ -6,8 +6,10 @@ const dirs = fs
   .map((dirent) => dirent.name)
   .join('|');
 
+const frontendFolder = __dirname;
+
 module.exports = {
-  parser: 'babel-eslint',
+  parser: '@babel/eslint-parser',
 
   env: {
     browser: true,
@@ -25,6 +27,9 @@ module.exports = {
   parserOptions: {
     ecmaVersion: 6,
     sourceType: 'module',
+    babelOptions: {
+      configFile: `${frontendFolder}/babel.config.js`,
+    },
     ecmaFeatures: {
       modules: true,
       impliedStrict: true
@@ -271,7 +276,7 @@ module.exports = {
 
     // ImportSort
 
-    'simple-import-sort/sort': 'error',
+    'simple-import-sort/imports': 'error',
     'import/newline-after-import': 'error',
 
     // React
@@ -309,7 +314,7 @@ module.exports = {
     {
       files: ['*.js'],
       rules: {
-        'simple-import-sort/sort': [
+        'simple-import-sort/imports': [
           'error',
           {
             groups: [

frontend/build/webpack.config.js

@@ -0,0 +1,270 @@
+const path = require('path');
+const webpack = require('webpack');
+const FileManagerPlugin = require('filemanager-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const LiveReloadPlugin = require('webpack-livereload-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+
+module.exports = (env) => {
+  const uiFolder = 'UI';
+  const frontendFolder = path.join(__dirname, '..');
+  const srcFolder = path.join(frontendFolder, 'src');
+  const isProduction = !!env.production;
+  const isProfiling = isProduction && !!env.profile;
+  const inlineWebWorkers = 'no-fallback';
+
+  const distFolder = path.resolve(frontendFolder, '..', '_output', uiFolder);
+
+  console.log('Source Folder:', srcFolder);
+  console.log('Output Folder:', distFolder);
+  console.log('isProduction:', isProduction);
+  console.log('isProfiling:', isProfiling);
+
+  const config = {
+    mode: isProduction ? 'production' : 'development',
+    devtool: isProduction ? 'source-map' : 'eval-source-map',
+
+    stats: {
+      children: false
+    },
+
+    watchOptions: {
+      ignored: /node_modules/
+    },
+
+    entry: {
+      index: 'index.js'
+    },
+
+    resolve: {
+      modules: [
+        srcFolder,
+        path.join(srcFolder, 'Shims'),
+        'node_modules'
+      ],
+      alias: {
+        jquery: 'jquery/src/jquery'
+      },
+      fallback: {
+        buffer: false,
+        http: false,
+        https: false,
+        url: false,
+        util: false,
+        net: false
+      }
+    },
+
+    output: {
+      path: distFolder,
+      publicPath: '/',
+      filename: '[name].js',
+      sourceMapFilename: '[file].map'
+    },
+
+    optimization: {
+      moduleIds: 'deterministic',
+      chunkIds: 'named',
+      splitChunks: {
+        chunks: 'initial',
+        name: 'vendors'
+      }
+    },
+
+    performance: {
+      hints: false
+    },
+
+    plugins: [
+      new webpack.DefinePlugin({
+        __DEV__: !isProduction,
+        'process.env.NODE_ENV': isProduction ? JSON.stringify('production') : JSON.stringify('development')
+      }),
+
+      new MiniCssExtractPlugin({
+        filename: 'Content/styles.css'
+      }),
+
+      new HtmlWebpackPlugin({
+        template: 'frontend/src/index.ejs',
+        filename: 'index.html',
+        publicPath: '/'
+      }),
+
+      new FileManagerPlugin({
+        events: {
+          onEnd: {
+            copy: [
+              // HTML
+              {
+                source: 'frontend/src/*.html',
+                destination: distFolder
+              },
+
+              // Fonts
+              {
+                source: 'frontend/src/Content/Fonts/*.*',
+                destination: path.join(distFolder, 'Content/Fonts')
+              },
+
+              // Icon Images
+              {
+                source: 'frontend/src/Content/Images/Icons/*.*',
+                destination: path.join(distFolder, 'Content/Images/Icons')
+              },
+
+              // Images
+              {
+                source: 'frontend/src/Content/Images/*.*',
+                destination: path.join(distFolder, 'Content/Images')
+              },
+
+              // Robots
+              {
+                source: 'frontend/src/Content/robots.txt',
+                destination: path.join(distFolder, 'Content/robots.txt')
+              }
+            ]
+          }
+        }
+      }),
+
+      new LiveReloadPlugin()
+    ],
+
+    resolveLoader: {
+      modules: [
+        'node_modules',
+        'frontend/build/webpack/'
+      ]
+    },
+
+    module: {
+      rules: [
+        {
+          test: /\.worker\.js$/,
+          use: {
+            loader: 'worker-loader',
+            options: {
+              filename: '[name].js',
+              inline: inlineWebWorkers
+            }
+          }
+        },
+        {
+          test: /\.js?$/,
+          exclude: /(node_modules|JsLibraries)/,
+          use: [
+            {
+              loader: 'babel-loader',
+              options: {
+                configFile: `${frontendFolder}/babel.config.js`,
+                envName: isProduction ? 'production' : 'development',
+                presets: [
+                  [
+                    '@babel/preset-env',
+                    {
+                      modules: false,
+                      loose: true,
+                      debug: false,
+                      useBuiltIns: 'entry',
+                      corejs: 3
+                    }
+                  ]
+                ]
+              }
+            }
+          ]
+        },
+
+        // CSS Modules
+        {
+          test: /\.css$/,
+          exclude: /(node_modules|globals.css)/,
+          use: [
+            { loader: MiniCssExtractPlugin.loader },
+            {
+              loader: 'css-loader',
+              options: {
+                importLoaders: 1,
+                modules: {
+                  localIdentName: '[name]/[local]/[hash:base64:5]'
+                }
+              }
+            },
+            {
+              loader: 'postcss-loader',
+              options: {
+                postcssOptions: {
+                  config: 'frontend/postcss.config.js'
+                }
+              }
+            }
+          ]
+        },
+
+        // Global styles
+        {
+          test: /\.css$/,
+          include: /(node_modules|globals.css)/,
+          use: [
+            'style-loader',
+            {
+              loader: 'css-loader'
+            }
+          ]
+        },
+
+        // Fonts
+        {
+          test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+          use: [
+            {
+              loader: 'url-loader',
+              options: {
+                limit: 10240,
+                mimetype: 'application/font-woff',
+                emitFile: false,
+                name: 'Content/Fonts/[name].[ext]'
+              }
+            }
+          ]
+        },
+
+        {
+          test: /\.(ttf|eot|eot?#iefix|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+          use: [
+            {
+              loader: 'file-loader',
+              options: {
+                emitFile: false,
+                name: 'Content/Fonts/[name].[ext]'
+              }
+            }
+          ]
+        }
+      ]
+    }
+  };
+
+  if (isProfiling) {
+    config.resolve.alias['react-dom$'] = 'react-dom/profiling';
+    config.resolve.alias['scheduler/tracing'] = 'scheduler/tracing-profiling';
+
+    config.optimization.minimizer = [
+      new TerserPlugin({
+        cache: true,
+        parallel: true,
+        sourceMap: true, // Must be set to true if using source-maps in production
+        terserOptions: {
+          mangle: false,
+          keep_classnames: true,
+          keep_fnames: true
+        }
+      })
+    ];
+  }
+
+  return config;
+};

frontend/gulp/build.js

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

frontend/gulp/clean.js

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

frontend/gulp/copy.js

@@ -1,42 +0,0 @@
-const path = require('path');
-const gulp = require('gulp');
-const print = require('gulp-print').default;
-const cache = require('gulp-cached');
-const livereload = require('gulp-livereload');
-const paths = require('./helpers/paths.js');
-
-gulp.task('copyHtml', () => {
-  return gulp.src(paths.src.html, { base: paths.src.root })
-    .pipe(cache('copyHtml'))
-    .pipe(print())
-    .pipe(gulp.dest(paths.dest.root))
-    .pipe(livereload());
-});
-
-gulp.task('copyFonts', () => {
-  return gulp.src(
-    path.join(paths.src.fonts, '**', '*.*'), { base: paths.src.root }
-  )
-    .pipe(cache('copyFonts'))
-    .pipe(print())
-    .pipe(gulp.dest(paths.dest.root))
-    .pipe(livereload());
-});
-
-gulp.task('copyImages', () => {
-  return gulp.src(
-    path.join(paths.src.images, '**', '*.*'), { base: paths.src.root }
-  )
-    .pipe(cache('copyImages'))
-    .pipe(print())
-    .pipe(gulp.dest(paths.dest.root))
-    .pipe(livereload());
-});
-
-gulp.task('copyRobots', () => {
-  return gulp.src(paths.src.robots, { base: paths.src.root })
-    .pipe(cache('copyRobots'))
-    .pipe(print())
-    .pipe(gulp.dest(paths.dest.root))
-    .pipe(livereload());
-});

frontend/gulp/gulpFile.js

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

frontend/gulp/helpers/errorHandler.js

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

frontend/gulp/helpers/paths.js

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

frontend/gulp/watch.js

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

frontend/gulp/webpack.js

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

frontend/postcss.config.js

@@ -1,23 +1,32 @@
 const reload = require('require-nocache')(module);
 
-module.exports = (ctx, configPath, options) => {
-  const config = {
-    plugins: {
-      'postcss-mixins': {
-        mixinsDir: [
-          'frontend/src/Styles/Mixins'
-        ]
-      },
-      'postcss-simple-vars': {
-        variables: () =>
-          ctx.options.cssVarsFiles.reduce((acc, vars) => {
-            return Object.assign(acc, reload(vars));
-          }, {})
-      },
-      'postcss-color-function': {},
-      'postcss-nested': {}
-    }
-  };
+const cssVarsFiles = [
+  './src/Styles/Variables/colors',
+  './src/Styles/Variables/dimensions',
+  './src/Styles/Variables/fonts',
+  './src/Styles/Variables/animations',
+  './src/Styles/Variables/zIndexes'
+].map(require.resolve);
 
-  return config;
+const mixinsFiles = [
+  'frontend/src/Styles/Mixins/cover.css',
+  'frontend/src/Styles/Mixins/linkOverlay.css',
+  'frontend/src/Styles/Mixins/scroller.css',
+  'frontend/src/Styles/Mixins/truncate.css'
+];
+
+module.exports = {
+  plugins: [
+    ['postcss-mixins', {
+      mixinsFiles
+    }],
+    ['postcss-simple-vars', {
+      variables: () =>
+        cssVarsFiles.reduce((acc, vars) => {
+          return Object.assign(acc, reload(vars));
+        }, {})
+    }],
+    'postcss-color-function',
+    'postcss-nested'
+  ]
 };

frontend/src/Activity/Blacklist/Blacklist.js

@@ -14,6 +14,7 @@ import TablePager from 'Components/Table/TablePager';
 import { align, icons, kinds } from 'Helpers/Props';
 import getRemovedItems from 'Utilities/Object/getRemovedItems';
 import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
+import translate from 'Utilities/String/translate';
 import getSelectedIds from 'Utilities/Table/getSelectedIds';
 import removeOldSelectedState from 'Utilities/Table/removeOldSelectedState';
 import selectAll from 'Utilities/Table/selectAll';
@@ -120,11 +121,11 @@ class Blacklist extends Component {
     const selectedIds = this.getSelectedIds();
 
     return (
-      <PageContent title="Blacklist">
+      <PageContent title={translate('Blacklist')}>
         <PageToolbar>
           <PageToolbarSection>
             <PageToolbarButton
-              label="Remove Selected"
+              label={translate('RemoveSelected')}
               iconName={icons.REMOVE}
               isDisabled={!selectedIds.length}
               isSpinning={isRemoving}
@@ -132,7 +133,7 @@ class Blacklist extends Component {
             />
 
             <PageToolbarButton
-              label="Clear"
+              label={translate('Clear')}
               iconName={icons.CLEAR}
               isSpinning={isClearingBlacklistExecuting}
               onPress={onClearBlacklistPress}
@@ -145,7 +146,7 @@ class Blacklist extends Component {
               columns={columns}
             >
               <PageToolbarButton
-                label="Options"
+                label={translate('Options')}
                 iconName={icons.TABLE}
               />
             </TableOptionsModalWrapper>
@@ -160,7 +161,9 @@ class Blacklist extends Component {
 
           {
             !isAnyFetching && !!error &&
-              <div>Unable to load blacklist</div>
+              <div>
+                {translate('UnableToLoadBlacklist')}
+              </div>
           }
 
           {
@@ -210,9 +213,9 @@ class Blacklist extends Component {
         <ConfirmModal
           isOpen={isConfirmRemoveModalOpen}
           kind={kinds.DANGER}
-          title="Remove Selected"
-          message={'Are you sure you want to remove the selected items from the blacklist?'}
-          confirmLabel="Remove Selected"
+          title={translate('RemoveSelected')}
+          message={translate('RemoveSelectedMessageText')}
+          confirmLabel={translate('RemoveSelected')}
           onConfirm={this.onRemoveSelectedConfirmed}
           onCancel={this.onConfirmRemoveModalClose}
         />

frontend/src/Activity/Blacklist/BlacklistDetailsModal.js

@@ -8,6 +8,7 @@ import ModalBody from 'Components/Modal/ModalBody';
 import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
+import translate from 'Utilities/String/translate';
 
 class BlacklistDetailsModal extends Component {
 
@@ -39,19 +40,19 @@ class BlacklistDetailsModal extends Component {
           <ModalBody>
             <DescriptionList>
               <DescriptionListItem
-                title="Name"
+                title={translate('Name')}
                 data={sourceTitle}
               />
 
               <DescriptionListItem
-                title="Protocol"
+                title={translate('Protocol')}
                 data={protocol}
               />
 
               {
                 !!message &&
                   <DescriptionListItem
-                    title="Indexer"
+                    title={translate('Indexer')}
                     data={indexer}
                   />
               }
@@ -59,7 +60,7 @@ class BlacklistDetailsModal extends Component {
               {
                 !!message &&
                   <DescriptionListItem
-                    title="Message"
+                    title={translate('Message')}
                     data={message}
                   />
               }

frontend/src/Activity/Blacklist/BlacklistRow.js

@@ -8,6 +8,7 @@ import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
 import TableRow from 'Components/Table/TableRow';
 import { icons, kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import BlacklistDetailsModal from './BlacklistDetailsModal';
 import styles from './BlacklistRow.css';
 
@@ -77,7 +78,7 @@ class BlacklistRow extends Component {
               return null;
             }
 
-            if (name === 'authors.sortName') {
+            if (name === 'authorMetadata.sortName') {
               return (
                 <TableRowCell key={name}>
                   <AuthorNameLink
@@ -141,7 +142,7 @@ class BlacklistRow extends Component {
                   />
 
                   <IconButton
-                    title="Remove from blacklist"
+                    title={translate('RemoveFromBlacklist')}
                     name={icons.REMOVE}
                     kind={kinds.DANGER}
                     onPress={onRemovePress}

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

@@ -9,6 +9,7 @@ import Link from 'Components/Link/Link';
 import { icons } from 'Helpers/Props';
 import formatDateTime from 'Utilities/Date/formatDateTime';
 import formatAge from 'Utilities/Number/formatAge';
+import translate from 'Utilities/String/translate';
 import styles from './HistoryDetails.css';
 
 function getDetailedList(statusMessages) {
@@ -77,14 +78,14 @@ function HistoryDetails(props) {
       <DescriptionList>
         <DescriptionListItem
           descriptionClassName={styles.description}
-          title="Name"
+          title={translate('Name')}
           data={sourceTitle}
         />
 
         {
           !!indexer &&
             <DescriptionListItem
-              title="Indexer"
+              title={translate('Indexer')}
               data={indexer}
             />
         }
@@ -93,7 +94,7 @@ function HistoryDetails(props) {
           !!releaseGroup &&
             <DescriptionListItem
               descriptionClassName={styles.description}
-              title="Release Group"
+              title={translate('ReleaseGroup')}
               data={releaseGroup}
             />
         }
@@ -114,7 +115,7 @@ function HistoryDetails(props) {
         {
           !!downloadClient &&
             <DescriptionListItem
-              title="Download Client"
+              title={translate('DownloadClient')}
               data={downloadClient}
             />
         }
@@ -122,7 +123,7 @@ function HistoryDetails(props) {
         {
           !!downloadId &&
             <DescriptionListItem
-              title="Grab ID"
+              title={translate('GrabID')}
               data={downloadId}
             />
         }
@@ -130,7 +131,7 @@ function HistoryDetails(props) {
         {
           !!indexer &&
             <DescriptionListItem
-              title="Age (when grabbed)"
+              title={translate('AgeWhenGrabbed')}
               data={formatAge(age, ageHours, ageMinutes)}
             />
         }
@@ -138,7 +139,7 @@ function HistoryDetails(props) {
         {
           !!publishedDate &&
             <DescriptionListItem
-              title="Published Date"
+              title={translate('PublishedDate')}
               data={formatDateTime(publishedDate, shortDateFormat, timeFormat, { includeSeconds: true })}
             />
         }
@@ -155,14 +156,14 @@ function HistoryDetails(props) {
       <DescriptionList>
         <DescriptionListItem
           descriptionClassName={styles.description}
-          title="Name"
+          title={translate('Name')}
           data={sourceTitle}
         />
 
         {
           !!message &&
             <DescriptionListItem
-              title="Message"
+              title={translate('Message')}
               data={message}
             />
         }
@@ -180,7 +181,7 @@ function HistoryDetails(props) {
       <DescriptionList>
         <DescriptionListItem
           descriptionClassName={styles.description}
-          title="Name"
+          title={translate('Name')}
           data={sourceTitle}
         />
 
@@ -188,7 +189,7 @@ function HistoryDetails(props) {
           !!droppedPath &&
             <DescriptionListItem
               descriptionClassName={styles.description}
-              title="Source"
+              title={translate('Source')}
               data={droppedPath}
             />
         }
@@ -197,7 +198,7 @@ function HistoryDetails(props) {
           !!importedPath &&
             <DescriptionListItem
               descriptionClassName={styles.description}
-              title="Imported To"
+              title={translate('ImportedTo')}
               data={importedPath}
             />
         }
@@ -229,12 +230,12 @@ function HistoryDetails(props) {
     return (
       <DescriptionList>
         <DescriptionListItem
-          title="Name"
+          title={translate('Name')}
           data={sourceTitle}
         />
 
         <DescriptionListItem
-          title="Reason"
+          title={translate('Reason')}
           data={reasonMessage}
         />
       </DescriptionList>
@@ -250,12 +251,12 @@ function HistoryDetails(props) {
     return (
       <DescriptionList>
         <DescriptionListItem
-          title="Source Path"
+          title={translate('SourcePath')}
           data={sourcePath}
         />
 
         <DescriptionListItem
-          title="Destination Path"
+          title={translate('DestinationPath')}
           data={path}
         />
       </DescriptionList>
@@ -271,7 +272,7 @@ function HistoryDetails(props) {
     return (
       <DescriptionList>
         <DescriptionListItem
-          title="Path"
+          title={translate('Path')}
           data={sourceTitle}
         />
         {
@@ -286,7 +287,7 @@ function HistoryDetails(props) {
           })
         }
         <DescriptionListItem
-          title="Existing tags scrubbed"
+          title={translate('ExistingTagsScrubbed')}
           data={tagsScrubbed === 'True' ? <Icon name={icons.CHECK} /> : <Icon name={icons.REMOVE} />}
         />
       </DescriptionList>
@@ -301,14 +302,14 @@ function HistoryDetails(props) {
     return (
       <DescriptionList>
         <DescriptionListItem
-          title="Name"
+          title={translate('Name')}
           data={sourceTitle}
         />
 
         {
           !!statusMessages &&
             <DescriptionListItem
-              title="Import failures"
+              title={translate('ImportFailures')}
               data={getDetailedList(JSON.parse(statusMessages))}
             />
         }
@@ -332,14 +333,14 @@ function HistoryDetails(props) {
     return (
       <DescriptionList>
         <DescriptionListItem
-          title="Name"
+          title={translate('Name')}
           data={sourceTitle}
         />
 
         {
           !!indexer &&
             <DescriptionListItem
-              title="Indexer"
+              title={translate('Indexer')}
               data={indexer}
             />
         }
@@ -347,7 +348,7 @@ function HistoryDetails(props) {
         {
           !!releaseGroup &&
             <DescriptionListItem
-              title="Release Group"
+              title={translate('ReleaseGroup')}
               data={releaseGroup}
             />
         }
@@ -368,7 +369,7 @@ function HistoryDetails(props) {
         {
           !!downloadClient &&
             <DescriptionListItem
-              title="Download Client"
+              title={translate('DownloadClient')}
               data={downloadClient}
             />
         }
@@ -376,7 +377,7 @@ function HistoryDetails(props) {
         {
           !!downloadId &&
             <DescriptionListItem
-              title="Grab ID"
+              title={translate('GrabID')}
               data={downloadId}
             />
         }
@@ -384,7 +385,7 @@ function HistoryDetails(props) {
         {
           !!indexer &&
             <DescriptionListItem
-              title="Age (when grabbed)"
+              title={translate('AgeWhenGrabbed')}
               data={formatAge(age, ageHours, ageMinutes)}
             />
         }
@@ -392,7 +393,7 @@ function HistoryDetails(props) {
         {
           !!publishedDate &&
             <DescriptionListItem
-              title="Published Date"
+              title={translate('PublishedDate')}
               data={formatDateTime(publishedDate, shortDateFormat, timeFormat, { includeSeconds: true })}
             />
         }
@@ -409,14 +410,14 @@ function HistoryDetails(props) {
       <DescriptionList>
         <DescriptionListItem
           descriptionClassName={styles.description}
-          title="Name"
+          title={translate('Name')}
           data={sourceTitle}
         />
 
         {
           !!message &&
             <DescriptionListItem
-              title="Message"
+              title={translate('Message')}
               data={message}
             />
         }
@@ -428,7 +429,7 @@ function HistoryDetails(props) {
     <DescriptionList>
       <DescriptionListItem
         descriptionClassName={styles.description}
-        title="Name"
+        title={translate('Name')}
         data={sourceTitle}
       />
     </DescriptionList>

frontend/src/Activity/History/History.js

@@ -12,32 +12,11 @@ import TableBody from 'Components/Table/TableBody';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import TablePager from 'Components/Table/TablePager';
 import { align, icons } from 'Helpers/Props';
-import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
+import translate from 'Utilities/String/translate';
 import HistoryRowConnector from './HistoryRowConnector';
 
 class History extends Component {
 
-  //
-  // Lifecycle
-
-  shouldComponentUpdate(nextProps) {
-    // Don't update when fetching has completed if items have changed,
-    // before books start fetching or when books start fetching.
-
-    if (
-      (
-        this.props.isFetching &&
-        nextProps.isPopulated &&
-        hasDifferentItems(this.props.items, nextProps.items)
-      ) ||
-      (!this.props.isBooksFetching && nextProps.isBooksFetching)
-    ) {
-      return false;
-    }
-
-    return true;
-  }
-
   //
   // Render
 
@@ -66,11 +45,11 @@ class History extends Component {
     const hasError = error || booksError;
 
     return (
-      <PageContent title="History">
+      <PageContent title={translate('History')}>
         <PageToolbar>
           <PageToolbarSection>
             <PageToolbarButton
-              label="Refresh"
+              label={translate('Refresh')}
               iconName={icons.REFRESH}
               isSpinning={isFetching}
               onPress={onFirstPagePress}
@@ -83,7 +62,7 @@ class History extends Component {
               columns={columns}
             >
               <PageToolbarButton
-                label="Options"
+                label={translate('Options')}
                 iconName={icons.TABLE}
               />
             </TableOptionsModalWrapper>
@@ -106,7 +85,9 @@ class History extends Component {
 
           {
             !isFetchingAny && hasError &&
-              <div>Unable to load history</div>
+              <div>
+                {translate('UnableToLoadHistory')}
+              </div>
           }
 
           {

frontend/src/Activity/History/HistoryConnector.js

@@ -3,10 +3,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import withCurrentPage from 'Components/withCurrentPage';
-import { clearBooks, fetchBooks } from 'Store/Actions/bookActions';
 import * as historyActions from 'Store/Actions/historyActions';
-import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
-import selectUniqueIds from 'Utilities/Object/selectUniqueIds';
 import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
 import History from './History';
 
@@ -29,9 +26,7 @@ function createMapStateToProps() {
 }
 
 const mapDispatchToProps = {
-  ...historyActions,
-  fetchBooks,
-  clearBooks
+  ...historyActions
 };
 
 class HistoryConnector extends Component {
@@ -55,21 +50,9 @@ class HistoryConnector extends Component {
     }
   }
 
-  componentDidUpdate(prevProps) {
-    if (hasDifferentItems(prevProps.items, this.props.items)) {
-      const bookIds = selectUniqueIds(this.props.items, 'bookId');
-      if (bookIds.length) {
-        this.props.fetchBooks({ bookIds });
-      } else {
-        this.props.clearBooks();
-      }
-    }
-  }
-
   componentWillUnmount() {
     unregisterPagePopulator(this.repopulate);
     this.props.clearHistory();
-    this.props.clearBooks();
   }
 
   //
@@ -150,9 +133,7 @@ HistoryConnector.propTypes = {
   setHistorySort: PropTypes.func.isRequired,
   setHistoryFilter: PropTypes.func.isRequired,
   setHistoryTableOption: PropTypes.func.isRequired,
-  clearHistory: PropTypes.func.isRequired,
-  fetchBooks: PropTypes.func.isRequired,
-  clearBooks: PropTypes.func.isRequired
+  clearHistory: PropTypes.func.isRequired
 };
 
 export default withCurrentPage(

frontend/src/Activity/History/HistoryRow.js

@@ -93,7 +93,7 @@ class HistoryRow extends Component {
               );
             }
 
-            if (name === 'authors.sortName') {
+            if (name === 'authorMetadata.sortName') {
               return (
                 <TableRowCell key={name}>
                   <AuthorNameLink

frontend/src/Activity/Queue/Queue.js

@@ -15,6 +15,7 @@ import TablePager from 'Components/Table/TablePager';
 import { align, icons } from 'Helpers/Props';
 import getRemovedItems from 'Utilities/Object/getRemovedItems';
 import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
+import translate from 'Utilities/String/translate';
 import getSelectedIds from 'Utilities/Table/getSelectedIds';
 import removeOldSelectedState from 'Utilities/Table/removeOldSelectedState';
 import selectAll from 'Utilities/Table/selectAll';
@@ -31,6 +32,8 @@ class Queue extends Component {
   constructor(props, context) {
     super(props, context);
 
+    this._shouldBlockRefresh = false;
+
     this.state = {
       allSelected: false,
       allUnselected: false,
@@ -42,6 +45,14 @@ class Queue extends Component {
     };
   }
 
+  shouldComponentUpdate() {
+    if (this._shouldBlockRefresh) {
+      return false;
+    }
+
+    return true;
+  }
+
   componentDidUpdate(prevProps) {
     const {
       items,
@@ -84,6 +95,10 @@ class Queue extends Component {
   //
   // Listeners
 
+  onQueueRowModalOpenOrClose = (isOpen) => {
+    this._shouldBlockRefresh = isOpen;
+  }
+
   onSelectAllChange = ({ value }) => {
     this.setState(selectAll(this.state.selectedState, value));
   }
@@ -99,15 +114,19 @@ class Queue extends Component {
   }
 
   onRemoveSelectedPress = () => {
-    this.setState({ isConfirmRemoveModalOpen: true });
+    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 });
   }
 
@@ -119,7 +138,6 @@ class Queue extends Component {
       isFetching,
       isPopulated,
       error,
-      items,
       isAuthorFetching,
       isAuthorPopulated,
       isBooksFetching,
@@ -139,7 +157,8 @@ class Queue extends Component {
       allUnselected,
       selectedState,
       isConfirmRemoveModalOpen,
-      isPendingSelected
+      isPendingSelected,
+      items
     } = this.state;
 
     const isRefreshing = isFetching || isAuthorFetching || isBooksFetching || isRefreshMonitoredDownloadsExecuting;
@@ -150,11 +169,11 @@ class Queue extends Component {
     const disableSelectedActions = selectedCount === 0;
 
     return (
-      <PageContent title="Queue">
+      <PageContent title={translate('Queue')}>
         <PageToolbar>
           <PageToolbarSection>
             <PageToolbarButton
-              label="Refresh"
+              label={translate('Refresh')}
               iconName={icons.REFRESH}
               isSpinning={isRefreshing}
               onPress={onRefreshPress}
@@ -163,7 +182,7 @@ class Queue extends Component {
             <PageToolbarSeparator />
 
             <PageToolbarButton
-              label="Grab Selected"
+              label={translate('GrabSelected')}
               iconName={icons.DOWNLOAD}
               isDisabled={disableSelectedActions || !isPendingSelected}
               isSpinning={isGrabbing}
@@ -171,7 +190,7 @@ class Queue extends Component {
             />
 
             <PageToolbarButton
-              label="Remove Selected"
+              label={translate('RemoveSelected')}
               iconName={icons.REMOVE}
               isDisabled={disableSelectedActions}
               isSpinning={isRemoving}
@@ -188,7 +207,7 @@ class Queue extends Component {
               optionsComponent={QueueOptionsConnector}
             >
               <PageToolbarButton
-                label="Options"
+                label={translate('Options')}
                 iconName={icons.TABLE}
               />
             </TableOptionsModalWrapper>
@@ -209,7 +228,7 @@ class Queue extends Component {
           }
 
           {
-            isPopulated && !hasError && !items.length &&
+            isAllPopulated && !hasError && !items.length &&
               <div>
                 Queue is empty
               </div>
@@ -238,6 +257,7 @@ class Queue extends Component {
                             columns={columns}
                             {...item}
                             onSelectedChange={this.onSelectedChange}
+                            onQueueRowModalOpenOrClose={this.onQueueRowModalOpenOrClose}
                           />
                         );
                       })

frontend/src/Activity/Queue/QueueConnector.js

@@ -4,12 +4,9 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import * as commandNames from 'Commands/commandNames';
 import withCurrentPage from 'Components/withCurrentPage';
-import { clearBooks, fetchBooks } from 'Store/Actions/bookActions';
 import { executeCommand } from 'Store/Actions/commandActions';
 import * as queueActions from 'Store/Actions/queueActions';
 import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
-import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
-import selectUniqueIds from 'Utilities/Object/selectUniqueIds';
 import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
 import Queue from './Queue';
 
@@ -37,8 +34,6 @@ function createMapStateToProps() {
 
 const mapDispatchToProps = {
   ...queueActions,
-  fetchBooks,
-  clearBooks,
   executeCommand
 };
 
@@ -51,6 +46,7 @@ class QueueConnector extends Component {
     const {
       useCurrentPage,
       fetchQueue,
+      fetchQueueStatus,
       gotoQueueFirstPage
     } = this.props;
 
@@ -61,19 +57,11 @@ class QueueConnector extends Component {
     } else {
       gotoQueueFirstPage();
     }
+
+    fetchQueueStatus();
   }
 
   componentDidUpdate(prevProps) {
-    if (hasDifferentItems(prevProps.items, this.props.items)) {
-      const bookIds = selectUniqueIds(this.props.items, 'bookId');
-
-      if (bookIds.length) {
-        this.props.fetchBooks({ bookIds });
-      } else {
-        this.props.clearBooks();
-      }
-    }
-
     if (
       this.props.includeUnknownAuthorItems !==
       prevProps.includeUnknownAuthorItems
@@ -84,8 +72,6 @@ class QueueConnector extends Component {
 
   componentWillUnmount() {
     unregisterPagePopulator(this.repopulate);
-    this.props.clearQueue();
-    this.props.clearBooks();
   }
 
   //
@@ -171,6 +157,7 @@ QueueConnector.propTypes = {
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
   includeUnknownAuthorItems: PropTypes.bool.isRequired,
   fetchQueue: PropTypes.func.isRequired,
+  fetchQueueStatus: PropTypes.func.isRequired,
   gotoQueueFirstPage: PropTypes.func.isRequired,
   gotoQueuePreviousPage: PropTypes.func.isRequired,
   gotoQueueNextPage: PropTypes.func.isRequired,
@@ -181,8 +168,6 @@ QueueConnector.propTypes = {
   clearQueue: PropTypes.func.isRequired,
   grabQueueItems: PropTypes.func.isRequired,
   removeQueueItems: PropTypes.func.isRequired,
-  fetchBooks: PropTypes.func.isRequired,
-  clearBooks: PropTypes.func.isRequired,
   executeCommand: PropTypes.func.isRequired
 };
 

frontend/src/Activity/Queue/QueueDetails.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Icon from 'Components/Icon';
 import { icons, kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 
 function QueueDetails(props) {
   const {
@@ -23,7 +24,7 @@ function QueueDetails(props) {
     return (
       <Icon
         name={icons.PENDING}
-        title={`Release will be processed ${moment(estimatedCompletionTime).fromNow()}`}
+        title={translate('ReleaseWillBeProcessedInterp', [moment(estimatedCompletionTime).fromNow()])}
       />
     );
   }
@@ -34,7 +35,7 @@ function QueueDetails(props) {
         <Icon
           name={icons.DOWNLOAD}
           kind={kinds.DANGER}
-          title={`Import failed: ${errorMessage}`}
+          title={translate('ImportFailedInterp', [errorMessage])}
         />
       );
     }
@@ -47,7 +48,7 @@ function QueueDetails(props) {
       <Icon
         name={icons.DOWNLOADING}
         kind={kinds.DANGER}
-        title={`Download failed: ${errorMessage}`}
+        title={translate('DownloadFailedInterp', [errorMessage])}
       />
     );
   }
@@ -57,7 +58,7 @@ function QueueDetails(props) {
       <Icon
         name={icons.DOWNLOADING}
         kind={kinds.DANGER}
-        title="Download failed: check download client for more details"
+        title={translate('DownloadFailedCheckDownloadClientForMoreDetails')}
       />
     );
   }
@@ -67,7 +68,7 @@ function QueueDetails(props) {
       <Icon
         name={icons.DOWNLOADING}
         kind={kinds.WARNING}
-        title="Download warning: check download client for more details"
+        title={translate('DownloadWarningCheckDownloadClientForMoreDetails')}
       />
     );
   }
@@ -76,7 +77,7 @@ function QueueDetails(props) {
     return (
       <Icon
         name={icons.DOWNLOADING}
-        title={`Book is downloading - ${progress.toFixed(1)}% ${title}`}
+        title={translate('BookIsDownloadingInterp', [progress.toFixed(1), title])}
       />
     );
   }

frontend/src/Activity/Queue/QueueOptions.js

@@ -4,6 +4,7 @@ import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import { inputTypes } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 
 class QueueOptions extends Component {
 
@@ -54,13 +55,15 @@ class QueueOptions extends Component {
     return (
       <Fragment>
         <FormGroup>
-          <FormLabel>Show Unknown Author Items</FormLabel>
+          <FormLabel>
+            {translate('ShowUnknownAuthorItems')}
+          </FormLabel>
 
           <FormInputGroup
             type={inputTypes.CHECK}
             name="includeUnknownAuthorItems"
             value={includeUnknownAuthorItems}
-            helpText="Show items without a author in the queue, this could include removed authors, movies or anything else in Readarr's category"
+            helpText={translate('IncludeUnknownAuthorItemsHelpText')}
             onChange={this.onOptionChange}
           />
         </FormGroup>

frontend/src/Activity/Queue/QueueRow.js

@@ -15,6 +15,8 @@ import TableRow from 'Components/Table/TableRow';
 import Popover from 'Components/Tooltip/Popover';
 import { icons, kinds, tooltipPositions } from 'Helpers/Props';
 import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
+import formatBytes from 'Utilities/Number/formatBytes';
+import translate from 'Utilities/String/translate';
 import QueueStatusCell from './QueueStatusCell';
 import RemoveQueueItemModal from './RemoveQueueItemModal';
 import TimeleftCell from './TimeleftCell';
@@ -42,19 +44,32 @@ class QueueRow extends Component {
   }
 
   onRemoveQueueItemModalConfirmed = (blacklist, skipredownload) => {
-    this.props.onRemoveQueueItemPress(blacklist, skipredownload);
+    const {
+      onRemoveQueueItemPress,
+      onQueueRowModalOpenOrClose
+    } = this.props;
+
+    onQueueRowModalOpenOrClose(false);
+    onRemoveQueueItemPress(blacklist, skipredownload);
+
     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 });
   }
 
@@ -137,7 +152,7 @@ class QueueRow extends Component {
               );
             }
 
-            if (name === 'authors.sortName') {
+            if (name === 'authorMetadata.sortName') {
               return (
                 <TableRowCell key={name}>
                   {
@@ -229,6 +244,12 @@ class QueueRow extends Component {
               );
             }
 
+            if (name === 'size') {
+              return (
+                <TableRowCell key={name}>{formatBytes(size)}</TableRowCell>
+              );
+            }
+
             if (name === 'outputPath') {
               return (
                 <TableRowCell key={name}>
@@ -285,7 +306,7 @@ class QueueRow extends Component {
                             kind={kinds.DANGER}
                           />
                         }
-                        title="Manual Download"
+                        title={translate('ManualDownload')}
                         body="This release failed parsing checks and was manually downloaded from an interactive search.  Import is likely to fail."
                         position={tooltipPositions.LEFT}
                       />
@@ -310,7 +331,7 @@ class QueueRow extends Component {
                   }
 
                   <SpinnerIconButton
-                    title="Remove from queue"
+                    title={translate('RemoveFromQueue')}
                     name={icons.REMOVE}
                     isSpinning={isRemoving}
                     onPress={this.onRemoveQueueItemPress}
@@ -335,7 +356,7 @@ class QueueRow extends Component {
         <RemoveQueueItemModal
           isOpen={isRemoveQueueItemModalOpen}
           sourceTitle={title}
-          canIgnore={!!(author && book)}
+          canIgnore={!!author}
           onRemovePress={this.onRemoveQueueItemModalConfirmed}
           onModalClose={this.onRemoveQueueItemModalClose}
         />
@@ -376,7 +397,8 @@ QueueRow.propTypes = {
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
   onSelectedChange: PropTypes.func.isRequired,
   onGrabPress: PropTypes.func.isRequired,
-  onRemoveQueueItemPress: PropTypes.func.isRequired
+  onRemoveQueueItemPress: PropTypes.func.isRequired,
+  onQueueRowModalOpenOrClose: PropTypes.func.isRequired
 };
 
 QueueRow.defaultProps = {

frontend/src/Activity/Queue/QueueStatusCell.js

@@ -4,6 +4,7 @@ import Icon from 'Components/Icon';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import Popover from 'Components/Tooltip/Popover';
 import { icons, kinds, tooltipPositions } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import styles from './QueueStatusCell.css';
 
 function getDetailedPopoverBody(statusMessages) {
@@ -49,11 +50,7 @@ function QueueStatusCell(props) {
   // status === 'downloading'
   let iconName = icons.DOWNLOADING;
   let iconKind = kinds.DEFAULT;
-  let title = 'Downloading';
-
-  if (hasWarning) {
-    iconKind = kinds.WARNING;
-  }
+  let title = translate('Title');
 
   if (status === 'paused') {
     iconName = icons.PAUSED;
@@ -71,17 +68,24 @@ function QueueStatusCell(props) {
 
     if (trackedDownloadState === 'importPending') {
       title += ' - Waiting to Import';
+      iconKind = kinds.PURPLE;
     }
 
     if (trackedDownloadState === 'importing') {
       title += ' - Importing';
+      iconKind = kinds.PURPLE;
     }
 
     if (trackedDownloadState === 'failedPending') {
       title += ' - Waiting to Process';
+      iconKind = kinds.DANGER;
     }
   }
 
+  if (hasWarning) {
+    iconKind = kinds.WARNING;
+  }
+
   if (status === 'delay') {
     iconName = icons.PENDING;
     title = 'Pending';

frontend/src/Activity/Queue/RemoveQueueItemModal.js

@@ -10,6 +10,7 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { inputTypes, kinds, sizes } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 
 class RemoveQueueItemModal extends Component {
 
@@ -95,26 +96,30 @@ class RemoveQueueItemModal extends Component {
             </div>
 
             <FormGroup>
-              <FormLabel>Remove From Download Client</FormLabel>
+              <FormLabel>
+                {translate('RemoveFromDownloadClient')}
+              </FormLabel>
 
               <FormInputGroup
                 type={inputTypes.CHECK}
                 name="remove"
                 value={remove}
-                helpTextWarning="Removing will remove the download and the file(s) from the download client."
+                helpTextWarning={translate('RemoveHelpTextWarning')}
                 isDisabled={!canIgnore}
                 onChange={this.onRemoveChange}
               />
             </FormGroup>
 
             <FormGroup>
-              <FormLabel>Blacklist Release</FormLabel>
+              <FormLabel>
+                {translate('BlacklistRelease')}
+              </FormLabel>
 
               <FormInputGroup
                 type={inputTypes.CHECK}
                 name="blacklist"
                 value={blacklist}
-                helpText="Prevents Readarr from automatically grabbing this release again"
+                helpText={translate('BlacklistHelpText')}
                 onChange={this.onBlacklistChange}
               />
             </FormGroup>
@@ -122,12 +127,14 @@ class RemoveQueueItemModal extends Component {
             {
               blacklist &&
                 <FormGroup>
-                  <FormLabel>Skip Redownload</FormLabel>
+                  <FormLabel>
+                    {translate('SkipRedownload')}
+                  </FormLabel>
                   <FormInputGroup
                     type={inputTypes.CHECK}
                     name="skipredownload"
                     value={skipredownload}
-                    helpText="Prevents Readarr from trying download an alternative release for this item"
+                    helpText={translate('SkipredownloadHelpText')}
                     onChange={this.onSkipReDownloadChange}
                   />
                 </FormGroup>

frontend/src/Activity/Queue/RemoveQueueItemsModal.js

@@ -10,6 +10,7 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { inputTypes, kinds, sizes } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import styles from './RemoveQueueItemsModal.css';
 
 class RemoveQueueItemsModal extends Component {
@@ -96,13 +97,15 @@ class RemoveQueueItemsModal extends Component {
             </div>
 
             <FormGroup>
-              <FormLabel>Remove From Download Client</FormLabel>
+              <FormLabel>
+                {translate('RemoveFromDownloadClient')}
+              </FormLabel>
 
               <FormInputGroup
                 type={inputTypes.CHECK}
                 name="remove"
                 value={remove}
-                helpTextWarning="Removing will remove the download and the file(s) from the download client."
+                helpTextWarning={translate('RemoveHelpTextWarning')}
                 isDisabled={!canIgnore}
                 onChange={this.onRemoveChange}
               />
@@ -117,7 +120,7 @@ class RemoveQueueItemsModal extends Component {
                 type={inputTypes.CHECK}
                 name="blacklist"
                 value={blacklist}
-                helpText="Prevents Readarr from automatically grabbing these files again"
+                helpText={translate('BlacklistHelpText')}
                 onChange={this.onBlacklistChange}
               />
             </FormGroup>
@@ -125,12 +128,14 @@ class RemoveQueueItemsModal extends Component {
             {
               blacklist &&
                 <FormGroup>
-                  <FormLabel>Skip Redownload</FormLabel>
+                  <FormLabel>
+                    {translate('SkipRedownload')}
+                  </FormLabel>
                   <FormInputGroup
                     type={inputTypes.CHECK}
                     name="skipredownload"
                     value={skipredownload}
-                    helpText="Prevents Readarr from trying download alternative releases for the removed items"
+                    helpText={translate('SkipredownloadHelpText')}
                     onChange={this.onSkipReDownloadChange}
                   />
                 </FormGroup>

frontend/src/Activity/Queue/TimeleftCell.js

@@ -5,6 +5,7 @@ import formatTime from 'Utilities/Date/formatTime';
 import formatTimeSpan from 'Utilities/Date/formatTimeSpan';
 import getRelativeDate from 'Utilities/Date/getRelativeDate';
 import formatBytes from 'Utilities/Number/formatBytes';
+import translate from 'Utilities/String/translate';
 import styles from './TimeleftCell.css';
 
 function TimeleftCell(props) {
@@ -19,35 +20,35 @@ function TimeleftCell(props) {
     timeFormat
   } = props;
 
-  if (status === 'Delay') {
+  if (status === 'delay') {
     const date = getRelativeDate(estimatedCompletionTime, shortDateFormat, showRelativeDates);
     const time = formatTime(estimatedCompletionTime, timeFormat, { includeMinuteZero: true });
 
     return (
       <TableRowCell
         className={styles.timeleft}
-        title={`Delaying download until ${date} at ${time}`}
+        title={translate('DelayingDownloadUntilInterp', [date, time])}
       >
         -
       </TableRowCell>
     );
   }
 
-  if (status === 'DownloadClientUnavailable') {
+  if (status === 'downloadClientUnavailable') {
     const date = getRelativeDate(estimatedCompletionTime, shortDateFormat, showRelativeDates);
     const time = formatTime(estimatedCompletionTime, timeFormat, { includeMinuteZero: true });
 
     return (
       <TableRowCell
         className={styles.timeleft}
-        title={`Retrying download ${date} at ${time}`}
+        title={translate('RetryingDownloadInterp', [date, time])}
       >
         -
       </TableRowCell>
     );
   }
 
-  if (!timeleft) {
+  if (!timeleft || status === 'completed' || status === 'failed') {
     return (
       <TableRowCell className={styles.timeleft}>
         -

frontend/src/AddAuthor/AuthorMonitoringOptionsPopoverContent.js

@@ -1,42 +1,43 @@
 import React from 'react';
 import DescriptionList from 'Components/DescriptionList/DescriptionList';
 import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
+import translate from 'Utilities/String/translate';
 
 function AuthorMonitoringOptionsPopoverContent() {
   return (
     <DescriptionList>
       <DescriptionListItem
-        title="All Books"
+        title={translate('AllBooks')}
         data="Monitor all books"
       />
 
       <DescriptionListItem
-        title="Future Books"
+        title={translate('FutureBooks')}
         data="Monitor books that have not released yet"
       />
 
       <DescriptionListItem
-        title="Missing Books"
+        title={translate('MissingBooks')}
         data="Monitor books that do not have files or have not released yet"
       />
 
       <DescriptionListItem
-        title="Existing Books"
+        title={translate('ExistingBooks')}
         data="Monitor books that have files or have not released yet"
       />
 
       <DescriptionListItem
-        title="First Book"
+        title={translate('FirstBook')}
         data="Monitor the first book. All other books will be ignored"
       />
 
       <DescriptionListItem
-        title="Latest Book"
+        title={translate('LatestBook')}
         data="Monitor the latest book and future books"
       />
 
       <DescriptionListItem
-        title="None"
+        title={translate('None')}
         data="No books will be monitored"
       />
     </DescriptionList>

frontend/src/App/AppRoutes.js

@@ -8,11 +8,13 @@ import AuthorDetailsPageConnector from 'Author/Details/AuthorDetailsPageConnecto
 import AuthorEditorConnector from 'Author/Editor/AuthorEditorConnector';
 import AuthorIndexConnector from 'Author/Index/AuthorIndexConnector';
 import BookDetailsPageConnector from 'Book/Details/BookDetailsPageConnector';
+import BookIndexConnector from 'Book/Index/BookIndexConnector';
 import BookshelfConnector from 'Bookshelf/BookshelfConnector';
 import CalendarPageConnector from 'Calendar/CalendarPageConnector';
 import NotFound from 'Components/NotFound';
 import Switch from 'Components/Router/Switch';
 import AddNewItemConnector from 'Search/AddNewItemConnector';
+import DevelopmentSettingsConnector from 'Settings/Development/DevelopmentSettingsConnector';
 import DownloadClientSettingsConnector from 'Settings/DownloadClients/DownloadClientSettingsConnector';
 import GeneralSettingsConnector from 'Settings/General/GeneralSettingsConnector';
 import ImportListSettingsConnector from 'Settings/ImportLists/ImportListSettingsConnector';
@@ -70,6 +72,11 @@ function AppRoutes(props) {
           />
       }
 
+      <Route
+        path="/authors"
+        component={AuthorIndexConnector}
+      />
+
       <Route
         path="/add/search"
         component={AddNewItemConnector}
@@ -81,10 +88,17 @@ function AppRoutes(props) {
       />
 
       <Route
-        path="/bookshelf"
+        exact={true}
+        path="/shelf"
         component={BookshelfConnector}
       />
 
+      <Route
+        exact={true}
+        path="/books"
+        component={BookIndexConnector}
+      />
+
       <Route
         path="/unmapped"
         component={UnmappedFilesTableConnector}
@@ -207,6 +221,11 @@ function AppRoutes(props) {
         component={UISettingsConnector}
       />
 
+      <Route
+        path="/settings/development"
+        component={DevelopmentSettingsConnector}
+      />
+
       {/*
         System
       */}

frontend/src/App/AppUpdatedModalContent.js

@@ -8,6 +8,7 @@ import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { kinds } from 'Helpers/Props';
 import UpdateChanges from 'System/Updates/UpdateChanges';
+import translate from 'Utilities/String/translate';
 import styles from './AppUpdatedModalContent.css';
 
 function AppUpdatedModalContent(props) {
@@ -49,12 +50,12 @@ function AppUpdatedModalContent(props) {
                     </div>
 
                     <UpdateChanges
-                      title="New"
+                      title={translate('New')}
                       changes={update.changes.new}
                     />
 
                     <UpdateChanges
-                      title="Fixed"
+                      title={translate('Fixed')}
                       changes={update.changes.fixed}
                     />
                   </div>

frontend/src/Author/AuthorImage.js

@@ -122,9 +122,17 @@ class AuthorImage extends Component {
       placeholder,
       size,
       lazy,
-      overflow
+      overflow,
+      blurBackground
     } = this.props;
 
+    const blurStyle = {
+      ...style,
+      objectFit: 'fill',
+      filter: 'blur(8px)',
+      WebkitFilter: 'blur(8px)'
+    };
+
     const {
       url,
       hasError,
@@ -168,13 +176,26 @@ class AuthorImage extends Component {
     }
 
     return (
-      <img
-        className={className}
-        style={style}
-        src={isLoaded ? url : placeholder}
-        onError={this.onError}
-        onLoad={this.onLoad}
-      />
+      <>
+        {
+          blurBackground ?
+            <img
+              style={blurStyle}
+              src={isLoaded ? url : placeholder}
+              onError={this.onError}
+              onLoad={this.onLoad}
+            /> :
+            null
+        }
+
+        <img
+          className={className}
+          style={style}
+          src={isLoaded ? url : placeholder}
+          onError={this.onError}
+          onLoad={this.onLoad}
+        />
+      </>
     );
   }
 }
@@ -188,6 +209,7 @@ AuthorImage.propTypes = {
   size: PropTypes.number.isRequired,
   lazy: PropTypes.bool.isRequired,
   overflow: PropTypes.bool.isRequired,
+  blurBackground: PropTypes.bool.isRequired,
   onError: PropTypes.func,
   onLoad: PropTypes.func
 };
@@ -195,7 +217,8 @@ AuthorImage.propTypes = {
 AuthorImage.defaultProps = {
   size: 250,
   lazy: true,
-  overflow: false
+  overflow: false,
+  blurBackground: false
 };
 
 export default AuthorImage;

frontend/src/Author/AuthorPoster.js

@@ -8,7 +8,6 @@ function AuthorPoster(props) {
   return (
     <AuthorImage
       {...props}
-      coverType="poster"
       placeholder={posterPlaceholder}
     />
   );
@@ -19,7 +18,8 @@ AuthorPoster.propTypes = {
 };
 
 AuthorPoster.defaultProps = {
-  size: 250
+  size: 250,
+  coverType: 'poster'
 };
 
 export default AuthorPoster;

frontend/src/Author/Delete/DeleteAuthorModalContent.js

@@ -11,6 +11,7 @@ import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { icons, inputTypes, kinds } from 'Helpers/Props';
 import formatBytes from 'Utilities/Number/formatBytes';
+import translate from 'Utilities/String/translate';
 import styles from './DeleteAuthorModalContent.css';
 
 class DeleteAuthorModalContent extends Component {
@@ -67,7 +68,7 @@ class DeleteAuthorModalContent extends Component {
     const addImportListExclusion = this.state.addImportListExclusion;
 
     let deleteFilesLabel = `Delete ${bookFileCount} Book Files`;
-    let deleteFilesHelpText = 'Delete the book files and author folder';
+    let deleteFilesHelpText = translate('DeleteFilesHelpText');
 
     if (bookFileCount === 0) {
       deleteFilesLabel = 'Delete Author Folder';
@@ -106,13 +107,15 @@ class DeleteAuthorModalContent extends Component {
           </FormGroup>
 
           <FormGroup>
-            <FormLabel>Add List Exclusion</FormLabel>
+            <FormLabel>
+              {translate('AddListExclusion')}
+            </FormLabel>
 
             <FormInputGroup
               type={inputTypes.CHECK}
               name="addImportListExclusion"
               value={addImportListExclusion}
-              helpText="Prevent author from being added to Readarr by Import lists"
+              helpText={translate('AddImportListExclusionHelpText')}
               kind={kinds.DANGER}
               onChange={this.onAddImportListExclusionChange}
             />
@@ -121,7 +124,9 @@ class DeleteAuthorModalContent extends Component {
           {
             deleteFiles &&
               <div className={styles.deleteFilesMessage}>
-                <div>The author folder <strong>{path}</strong> and all of its content will be deleted.</div>
+                <div>
+                  {translate('TheAuthorFolderAndAllOfItsContentWillBeDeleted', [path])}
+                </div>
 
                 {
                   !!bookFileCount &&

frontend/src/Author/Details/AuthorDetails.css

@@ -2,55 +2,12 @@
   padding: 0;
 }
 
-.header {
-  position: relative;
-  width: 100%;
-  height: 310px;
-}
-
 .errorMessage {
   margin-top: 20px;
   text-align: center;
   font-size: 20px;
 }
 
-.backdrop {
-  position: absolute;
-  z-index: -1;
-  width: 100%;
-  height: 100%;
-  background-size: cover;
-}
-
-.backdropOverlay {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background: $black;
-  opacity: 0.7;
-}
-
-.headerContent {
-  display: flex;
-  padding: 30px;
-  width: 100%;
-  height: 100%;
-  color: $white;
-}
-
-.poster {
-  flex-shrink: 0;
-  margin-right: 35px;
-  height: 250px;
-}
-
-.info {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  overflow: hidden;
-}
-
 .metadataMessage {
   color: $helpTextColor;
   text-align: center;
@@ -58,96 +15,6 @@
   font-size: 20px;
 }
 
-.titleRow {
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  flex: 0 0 auto;
-}
-
-.titleContainer {
-  display: flex;
-  margin-bottom: 5px;
-}
-
-.title {
-  font-weight: 300;
-  font-size: 50px;
-  line-height: 50px;
-}
-
-.toggleMonitoredContainer {
-  align-self: center;
-  margin-right: 10px;
-}
-
-.monitorToggleButton {
-  composes: toggleButton from '~Components/MonitorToggleButton.css';
-
-  width: 40px;
-
-  &:hover {
-    color: $iconButtonHoverLightColor;
-  }
-}
-
-.alternateTitlesIconContainer {
-  align-self: flex-end;
-  margin-left: 20px;
-}
-
-.artistNavigationButtons {
-  position: absolute;
-  right: 0;
-  white-space: nowrap;
-}
-
-.authorNavigationButton {
-  composes: button from '~Components/Link/IconButton.css';
-
-  margin-left: 5px;
-  width: 30px;
-  color: #e1e2e3;
-  white-space: nowrap;
-
-  &:hover {
-    color: $iconButtonHoverLightColor;
-  }
-}
-
-.details {
-  margin-bottom: 8px;
-  font-weight: 300;
-  font-size: 20px;
-}
-
-.runtime {
-  margin-right: 15px;
-}
-
-.detailsLabel {
-  composes: label from '~Components/Label.css';
-
-  margin: 5px 10px 5px 0;
-}
-
-.path,
-.sizeOnDisk,
-.qualityProfileName,
-.links,
-.tags {
-  margin-left: 8px;
-  font-weight: 300;
-  font-size: 17px;
-}
-
-.overview {
-  flex: 1 0 auto;
-  margin-top: 8px;
-  min-height: 0;
-  font-size: $intermediateFontSize;
-}
-
 .contentContainer {
   padding: 20px;
 }
@@ -177,18 +44,43 @@
   margin-top: 20px;
 }
 
+.authorNavigationButtons {
+  position: absolute;
+  right: 0;
+  z-index: 1;
+  margin-top: 10px;
+  padding: 30px;
+  white-space: nowrap;
+}
+
+.authorUpButton,
+.authorNavigationButton {
+  composes: button from '~Components/Link/IconButton.css';
+
+  margin-left: 5px;
+  width: 30px;
+  color: #e1e2e3;
+  white-space: nowrap;
+
+  &:hover {
+    color: $iconButtonHoverLightColor;
+  }
+}
+
 @media only screen and (max-width: $breakpointSmall) {
   .contentContainer {
     padding: 20px 0;
   }
 
-  .headerContent {
+  .authorNavigationButtons {
     padding: 15px;
   }
-}
 
-@media only screen and (max-width: $breakpointLarge) {
-  .poster {
+  .authorNavigationButtons {
+    margin-top: 5px;
+  }
+
+  .authorNavigationButton {
     display: none;
   }
 }

frontend/src/Author/Details/AuthorDetails.js

@@ -1,57 +1,35 @@
-import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
-import TextTruncate from 'react-text-truncate';
-import AuthorPoster from 'Author/AuthorPoster';
 import DeleteAuthorModal from 'Author/Delete/DeleteAuthorModal';
 import EditAuthorModalConnector from 'Author/Edit/EditAuthorModalConnector';
 import AuthorHistoryTable from 'Author/History/AuthorHistoryTable';
+import MonitoringOptionsModal from 'Author/MonitoringOptions/MonitoringOptionsModal';
 import BookFileEditorTable from 'BookFile/Editor/BookFileEditorTable';
-import HeartRating from 'Components/HeartRating';
-import Icon from 'Components/Icon';
-import Label from 'Components/Label';
 import IconButton from 'Components/Link/IconButton';
 import Link from 'Components/Link/Link';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import MonitorToggleButton from 'Components/MonitorToggleButton';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
 import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
 import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
-import Popover from 'Components/Tooltip/Popover';
-import Tooltip from 'Components/Tooltip/Tooltip';
-import { align, icons, kinds, sizes, tooltipPositions } from 'Helpers/Props';
+import SwipeHeaderConnector from 'Components/Swipe/SwipeHeaderConnector';
+import { align, icons } from 'Helpers/Props';
 import InteractiveSearchFilterMenuConnector from 'InteractiveSearch/InteractiveSearchFilterMenuConnector';
 import InteractiveSearchTable from 'InteractiveSearch/InteractiveSearchTable';
 import OrganizePreviewModalConnector from 'Organize/OrganizePreviewModalConnector';
 import RetagPreviewModalConnector from 'Retag/RetagPreviewModalConnector';
-import QualityProfileNameConnector from 'Settings/Profiles/Quality/QualityProfileNameConnector';
-import fonts from 'Styles/Variables/fonts';
-import formatBytes from 'Utilities/Number/formatBytes';
+import translate from 'Utilities/String/translate';
 import selectAll from 'Utilities/Table/selectAll';
 import toggleSelected from 'Utilities/Table/toggleSelected';
 import InteractiveImportModal from '../../InteractiveImport/InteractiveImportModal';
-import AuthorAlternateTitles from './AuthorAlternateTitles';
-import AuthorDetailsLinks from './AuthorDetailsLinks';
+import AuthorDetailsHeaderConnector from './AuthorDetailsHeaderConnector';
 import AuthorDetailsSeasonConnector from './AuthorDetailsSeasonConnector';
 import AuthorDetailsSeriesConnector from './AuthorDetailsSeriesConnector';
-import AuthorTagsConnector from './AuthorTagsConnector';
 import styles from './AuthorDetails.css';
 
-const defaultFontSize = parseInt(fonts.defaultFontSize);
-const lineHeight = parseFloat(fonts.lineHeight);
-
-function getFanartUrl(images) {
-  const fanartImage = _.find(images, { coverType: 'fanart' });
-  if (fanartImage) {
-    // Remove protocol
-    return fanartImage.url.replace(/^https?:/, '');
-  }
-}
-
 function getExpandedState(newState) {
   return {
     allExpanded: newState.allSelected,
@@ -74,6 +52,7 @@ class AuthorDetails extends Component {
       isEditAuthorModalOpen: false,
       isDeleteAuthorModalOpen: false,
       isInteractiveImportModalOpen: false,
+      isMonitorOptionsModalOpen: false,
       allExpanded: false,
       allCollapsed: false,
       expandedState: {},
@@ -127,6 +106,14 @@ class AuthorDetails extends Component {
     this.setState({ isDeleteAuthorModalOpen: false });
   }
 
+  onMonitorOptionsPress = () => {
+    this.setState({ isMonitorOptionsModalOpen: true });
+  }
+
+  onMonitorOptionsClose = () => {
+    this.setState({ isMonitorOptionsModalOpen: false });
+  }
+
   onExpandAllPress = () => {
     const {
       allExpanded,
@@ -161,18 +148,8 @@ class AuthorDetails extends Component {
     const {
       id,
       authorName,
-      ratings,
       path,
-      statistics,
-      qualityProfileId,
       monitored,
-      status,
-      overview,
-      links,
-      images,
-      alternateTitles,
-      tags,
-      isSaving,
       isRefreshing,
       isSearching,
       isFetching,
@@ -186,38 +163,24 @@ class AuthorDetails extends Component {
       hasBookFiles,
       previousAuthor,
       nextAuthor,
-      onMonitorTogglePress,
       onRefreshPress,
-      onSearchPress
+      onSearchPress,
+      statistics
     } = this.props;
 
-    const {
-      bookFileCount,
-      sizeOnDisk
-    } = statistics;
-
     const {
       isOrganizeModalOpen,
       isRetagModalOpen,
       isEditAuthorModalOpen,
       isDeleteAuthorModalOpen,
       isInteractiveImportModalOpen,
+      isMonitorOptionsModalOpen,
       allExpanded,
       allCollapsed,
       expandedState,
       selectedTabIndex
     } = this.state;
 
-    const continuing = status === 'continuing';
-
-    let bookFilesCountMessage = 'No book files';
-
-    if (bookFileCount === 1) {
-      bookFilesCountMessage = '1 book file';
-    } else if (bookFileCount > 1) {
-      bookFilesCountMessage = `${bookFileCount} book files`;
-    }
-
     let expandIcon = icons.EXPAND_INDETERMINATE;
 
     if (allExpanded) {
@@ -231,41 +194,41 @@ class AuthorDetails extends Component {
         <PageToolbar>
           <PageToolbarSection>
             <PageToolbarButton
-              label="Refresh & Scan"
+              label={translate('RefreshScan')}
               iconName={icons.REFRESH}
               spinningName={icons.REFRESH}
-              title="Refresh information and scan disk"
+              title={translate('RefreshInformationAndScanDisk')}
               isSpinning={isRefreshing}
               onPress={onRefreshPress}
             />
 
             <PageToolbarButton
-              label="Search Monitored"
+              label={translate('SearchMonitored')}
               iconName={icons.SEARCH}
               isDisabled={!monitored || !hasMonitoredBooks || !hasBooks}
               isSpinning={isSearching}
-              title={hasMonitoredBooks ? undefined : 'No monitored books for this author'}
+              title={hasMonitoredBooks ? undefined : translate('HasMonitoredBooksNoMonitoredBooksForThisAuthor')}
               onPress={onSearchPress}
             />
 
             <PageToolbarSeparator />
 
             <PageToolbarButton
-              label="Preview Rename"
+              label={translate('PreviewRename')}
               iconName={icons.ORGANIZE}
               isDisabled={!hasBookFiles}
               onPress={this.onOrganizePress}
             />
 
-            {/* <PageToolbarButton */}
-            {/*   label="Preview Retag" */}
-            {/*   iconName={icons.RETAG} */}
-            {/*   isDisabled={!hasBookFiles} */}
-            {/*   onPress={this.onRetagPress} */}
-            {/* /> */}
+            <PageToolbarButton
+              label={translate('PreviewRetag')}
+              iconName={icons.RETAG}
+              isDisabled={!hasBookFiles}
+              onPress={this.onRetagPress}
+            />
 
             <PageToolbarButton
-              label="Manual Import"
+              label={translate('ManualImport')}
               iconName={icons.INTERACTIVE}
               onPress={this.onInteractiveImportPress}
             />
@@ -273,13 +236,19 @@ class AuthorDetails extends Component {
             <PageToolbarSeparator />
 
             <PageToolbarButton
-              label="Edit"
+              label={translate('BookMonitoring')}
+              iconName={icons.MONITORED}
+              onPress={this.onMonitorOptionsPress}
+            />
+
+            <PageToolbarButton
+              label={translate('Edit')}
               iconName={icons.EDIT}
               onPress={this.onEditAuthorPress}
             />
 
             <PageToolbarButton
-              label="Delete"
+              label={translate('Delete')}
               iconName={icons.DELETE}
               onPress={this.onDeleteAuthorPress}
             />
@@ -287,7 +256,7 @@ class AuthorDetails extends Component {
 
           <PageToolbarSection alignContent={align.RIGHT}>
             <PageToolbarButton
-              label={allExpanded ? 'Collapse All' : 'Expand All'}
+              label={allExpanded ? translate('AllExpandedCollapseAll') : translate('AllExpandedExpandAll')}
               iconName={expandIcon}
               onPress={this.onExpandAllPress}
             />
@@ -295,234 +264,43 @@ class AuthorDetails extends Component {
         </PageToolbar>
 
         <PageContentBody innerClassName={styles.innerContentBody}>
-          <div className={styles.header}>
-            <div
-              className={styles.backdrop}
-              style={{
-                backgroundImage: `url(${getFanartUrl(images)})`
-              }}
-            >
-              <div className={styles.backdropOverlay} />
-            </div>
-
-            <div className={styles.headerContent}>
-              <AuthorPoster
-                className={styles.poster}
-                images={images}
-                size={250}
-                lazy={false}
+          <SwipeHeaderConnector
+            className={styles.header}
+            nextLink={`/author/${nextAuthor.titleSlug}`}
+            nextComponent={(width) => <AuthorDetailsHeaderConnector authorId={nextAuthor.id} width={width} />}
+            prevLink={`/author/${previousAuthor.titleSlug}`}
+            prevComponent={(width) => <AuthorDetailsHeaderConnector authorId={previousAuthor.id} width={width} />}
+            currentComponent={(width) => <AuthorDetailsHeaderConnector authorId={id} width={width} />}
+          >
+            <div className={styles.authorNavigationButtons}>
+              <IconButton
+                className={styles.authorNavigationButton}
+                name={icons.ARROW_LEFT}
+                size={30}
+                title={translate('GoToInterp', [previousAuthor.authorName])}
+                to={`/author/${previousAuthor.titleSlug}`}
               />
 
-              <div className={styles.info}>
-                <div className={styles.titleRow}>
-                  <div className={styles.titleContainer}>
-                    <div className={styles.toggleMonitoredContainer}>
-                      <MonitorToggleButton
-                        className={styles.monitorToggleButton}
-                        monitored={monitored}
-                        isSaving={isSaving}
-                        size={40}
-                        onPress={onMonitorTogglePress}
-                      />
-                    </div>
+              <IconButton
+                className={styles.authorUpButton}
+                name={icons.ARROW_UP}
+                size={30}
+                title={translate('GoToAuthorListing')}
+                to={{
+                  pathname: '/',
+                  state: { restoreScrollPosition: true }
+                }}
+              />
 
-                    <div className={styles.title}>
-                      {authorName}
-                    </div>
-
-                    {
-                      !!alternateTitles.length &&
-                        <div className={styles.alternateTitlesIconContainer}>
-                          <Popover
-                            anchor={
-                              <Icon
-                                name={icons.ALTERNATE_TITLES}
-                                size={20}
-                              />
-                            }
-                            title="Alternate Titles"
-                            body={<AuthorAlternateTitles alternateTitles={alternateTitles} />}
-                            position={tooltipPositions.BOTTOM}
-                          />
-                        </div>
-                    }
-                  </div>
-
-                  <div className={styles.authorNavigationButtons}>
-                    <IconButton
-                      className={styles.authorNavigationButton}
-                      name={icons.ARROW_LEFT}
-                      size={30}
-                      title={`Go to ${previousAuthor.authorName}`}
-                      to={`/author/${previousAuthor.titleSlug}`}
-                    />
-
-                    <IconButton
-                      className={styles.authorNavigationButton}
-                      name={icons.ARROW_UP}
-                      size={30}
-                      title={'Go to author listing'}
-                      to={'/'}
-                    />
-
-                    <IconButton
-                      className={styles.authorNavigationButton}
-                      name={icons.ARROW_RIGHT}
-                      size={30}
-                      title={`Go to ${nextAuthor.authorName}`}
-                      to={`/author/${nextAuthor.titleSlug}`}
-                    />
-                  </div>
-                </div>
-
-                <div className={styles.details}>
-                  <div>
-                    <HeartRating
-                      rating={ratings.value}
-                      iconSize={20}
-                    />
-                  </div>
-                </div>
-
-                <div className={styles.detailsLabels}>
-                  <Label
-                    className={styles.detailsLabel}
-                    size={sizes.LARGE}
-                  >
-                    <Icon
-                      name={icons.FOLDER}
-                      size={17}
-                    />
-
-                    <span className={styles.path}>
-                      {path}
-                    </span>
-                  </Label>
-
-                  <Label
-                    className={styles.detailsLabel}
-                    title={bookFilesCountMessage}
-                    size={sizes.LARGE}
-                  >
-                    <Icon
-                      name={icons.DRIVE}
-                      size={17}
-                    />
-
-                    <span className={styles.sizeOnDisk}>
-                      {
-                        formatBytes(sizeOnDisk || 0)
-                      }
-                    </span>
-                  </Label>
-
-                  <Label
-                    className={styles.detailsLabel}
-                    title="Quality Profile"
-                    size={sizes.LARGE}
-                  >
-                    <Icon
-                      name={icons.PROFILE}
-                      size={17}
-                    />
-
-                    <span className={styles.qualityProfileName}>
-                      {
-                        <QualityProfileNameConnector
-                          qualityProfileId={qualityProfileId}
-                        />
-                      }
-                    </span>
-                  </Label>
-
-                  <Label
-                    className={styles.detailsLabel}
-                    size={sizes.LARGE}
-                  >
-                    <Icon
-                      name={monitored ? icons.MONITORED : icons.UNMONITORED}
-                      size={17}
-                    />
-
-                    <span className={styles.qualityProfileName}>
-                      {monitored ? 'Monitored' : 'Unmonitored'}
-                    </span>
-                  </Label>
-
-                  <Label
-                    className={styles.detailsLabel}
-                    title={continuing ? 'More books are expected' : 'No additional books are expected'}
-                    size={sizes.LARGE}
-                  >
-                    <Icon
-                      name={continuing ? icons.AUTHOR_CONTINUING : icons.AUTHOR_ENDED}
-                      size={17}
-                    />
-
-                    <span className={styles.qualityProfileName}>
-                      {continuing ? 'Continuing' : 'Deceased'}
-                    </span>
-                  </Label>
-
-                  <Tooltip
-                    anchor={
-                      <Label
-                        className={styles.detailsLabel}
-                        size={sizes.LARGE}
-                      >
-                        <Icon
-                          name={icons.EXTERNAL_LINK}
-                          size={17}
-                        />
-
-                        <span className={styles.links}>
-                          Links
-                        </span>
-                      </Label>
-                    }
-                    tooltip={
-                      <AuthorDetailsLinks
-                        links={links}
-                      />
-                    }
-                    kind={kinds.INVERSE}
-                    position={tooltipPositions.BOTTOM}
-                  />
-
-                  {
-                    !!tags.length &&
-                      <Tooltip
-                        anchor={
-                          <Label
-                            className={styles.detailsLabel}
-                            size={sizes.LARGE}
-                          >
-                            <Icon
-                              name={icons.TAGS}
-                              size={17}
-                            />
-
-                            <span className={styles.tags}>
-                              Tags
-                            </span>
-                          </Label>
-                        }
-                        tooltip={<AuthorTagsConnector authorId={id} />}
-                        kind={kinds.INVERSE}
-                        position={tooltipPositions.BOTTOM}
-                      />
-
-                  }
-                </div>
-                <div className={styles.overview}>
-                  <TextTruncate
-                    line={Math.floor(125 / (defaultFontSize * lineHeight))}
-                    text={overview}
-                  />
-                </div>
-              </div>
+              <IconButton
+                className={styles.authorNavigationButton}
+                name={icons.ARROW_RIGHT}
+                size={30}
+                title={translate('GoToInterp', [nextAuthor.authorName])}
+                to={`/author/${nextAuthor.titleSlug}`}
+              />
             </div>
-          </div>
+          </SwipeHeaderConnector>
 
           <div className={styles.contentContainer}>
             {
@@ -532,12 +310,16 @@ class AuthorDetails extends Component {
 
             {
               !isFetching && booksError &&
-                <div>Loading books failed</div>
+                <div>
+                  {translate('LoadingBooksFailed')}
+                </div>
             }
 
             {
               !isFetching && bookFilesError &&
-                <div>Loading book files failed</div>
+                <div>
+                  {translate('LoadingBookFilesFailed')}
+                </div>
             }
 
             {
@@ -550,35 +332,35 @@ class AuthorDetails extends Component {
                       className={styles.tab}
                       selectedClassName={styles.selectedTab}
                     >
-                      Books
+                      {translate('BooksTotal', [statistics.totalBookCount])}
                     </Tab>
 
                     <Tab
                       className={styles.tab}
                       selectedClassName={styles.selectedTab}
                     >
-                      Series
+                      {translate('SeriesTotal', [series.length])}
                     </Tab>
 
                     <Tab
                       className={styles.tab}
                       selectedClassName={styles.selectedTab}
                     >
-                      History
+                      {translate('History')}
                     </Tab>
 
                     <Tab
                       className={styles.tab}
                       selectedClassName={styles.selectedTab}
                     >
-                      Search
+                      {translate('Search')}
                     </Tab>
 
                     <Tab
                       className={styles.tab}
                       selectedClassName={styles.selectedTab}
                     >
-                      Files
+                      {translate('FilesTotal', [statistics.bookFileCount])}
                     </Tab>
 
                     {
@@ -644,10 +426,10 @@ class AuthorDetails extends Component {
           </div>
 
           <div className={styles.metadataMessage}>
-            Missing or too many books? Modify or create a new
-            <Link to='/settings/profiles'> Metadata Profile </Link>
+            {translate('TooManyBooks')}
+            <Link to='/settings/profiles'> {translate('MetadataProfile')} </Link>
             or manually
-            <Link to={`/add/search?term=${encodeURIComponent(authorName)}`}> Search </Link>
+            <Link to={`/add/search?term=${encodeURIComponent(authorName)}`}> {translate('Search')} </Link>
             for new items!
           </div>
 
@@ -685,6 +467,12 @@ class AuthorDetails extends Component {
             showImportMode={false}
             onModalClose={this.onInteractiveImportModalClose}
           />
+
+          <MonitoringOptionsModal
+            isOpen={isMonitorOptionsModalOpen}
+            authorId={id}
+            onModalClose={this.onMonitorOptionsClose}
+          />
         </PageContentBody>
       </PageContent>
     );
@@ -719,6 +507,7 @@ AuthorDetails.propTypes = {
   hasBookFiles: PropTypes.bool.isRequired,
   previousAuthor: PropTypes.object.isRequired,
   nextAuthor: PropTypes.object.isRequired,
+  isSmallScreen: PropTypes.bool.isRequired,
   onMonitorTogglePress: PropTypes.func.isRequired,
   onRefreshPress: PropTypes.func.isRequired,
   onSearchPress: PropTypes.func.isRequired

frontend/src/Author/Details/AuthorDetailsConnector.js

@@ -6,7 +6,6 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import * as commandNames from 'Commands/commandNames';
 import { toggleAuthorMonitored } from 'Store/Actions/authorActions';
-import { clearBooks, fetchBooks } from 'Store/Actions/bookActions';
 import { clearBookFiles, fetchBookFiles } from 'Store/Actions/bookFileActions';
 import { executeCommand } from 'Store/Actions/commandActions';
 import { clearQueueDetails, fetchQueueDetails } from 'Store/Actions/queueActions';
@@ -14,6 +13,7 @@ import { cancelFetchReleases, clearReleases } from 'Store/Actions/releaseActions
 import { clearSeries, fetchSeries } from 'Store/Actions/seriesActions';
 import createAllAuthorSelector from 'Store/Selectors/createAllAuthorsSelector';
 import createCommandsSelector from 'Store/Selectors/createCommandsSelector';
+import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
 import { findCommand, isCommandExecuting } from 'Utilities/Command';
 import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
@@ -94,8 +94,9 @@ function createMapStateToProps() {
     selectBookFiles,
     createAllAuthorSelector(),
     createCommandsSelector(),
-    (titleSlug, books, series, bookFiles, allAuthors, commands) => {
-      const sortedAuthor = _.orderBy(allAuthors, 'sortName');
+    createDimensionsSelector(),
+    (titleSlug, books, series, bookFiles, allAuthors, commands, dimensions) => {
+      const sortedAuthor = _.orderBy(allAuthors, 'sortNameLastFirst');
       const authorIndex = _.findIndex(sortedAuthor, { titleSlug });
       const author = sortedAuthor[authorIndex];
 
@@ -176,15 +177,14 @@ function createMapStateToProps() {
         series: seriesItems,
         hasBookFiles,
         previousAuthor,
-        nextAuthor
+        nextAuthor,
+        isSmallScreen: dimensions.isSmallScreen
       };
     }
   );
 }
 
 const mapDispatchToProps = {
-  fetchBooks,
-  clearBooks,
   fetchSeries,
   clearSeries,
   fetchBookFiles,
@@ -245,7 +245,6 @@ class AuthorDetailsConnector extends Component {
   populate = () => {
     const authorId = this.props.id;
 
-    this.props.fetchBooks({ authorId });
     this.props.fetchSeries({ authorId });
     this.props.fetchBookFiles({ authorId });
     this.props.fetchQueueDetails({ authorId });
@@ -253,7 +252,6 @@ class AuthorDetailsConnector extends Component {
 
   unpopulate = () => {
     this.props.cancelFetchReleases();
-    this.props.clearBooks();
     this.props.clearSeries();
     this.props.clearBookFiles();
     this.props.clearQueueDetails();
@@ -307,8 +305,6 @@ AuthorDetailsConnector.propTypes = {
   isRefreshing: PropTypes.bool.isRequired,
   isRenamingFiles: PropTypes.bool.isRequired,
   isRenamingAuthor: PropTypes.bool.isRequired,
-  fetchBooks: PropTypes.func.isRequired,
-  clearBooks: PropTypes.func.isRequired,
   fetchSeries: PropTypes.func.isRequired,
   clearSeries: PropTypes.func.isRequired,
   fetchBookFiles: PropTypes.func.isRequired,

frontend/src/Author/Details/AuthorDetailsHeader.css

@@ -0,0 +1,148 @@
+.header {
+  position: relative;
+  width: 100%;
+  height: 310px;
+}
+
+.backdrop {
+  position: absolute;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+}
+
+.backdropOverlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: $black;
+  opacity: 0.7;
+}
+
+.headerContent {
+  display: flex;
+  padding: 30px;
+  width: 100%;
+  height: 100%;
+  color: $white;
+}
+
+.poster {
+  flex-shrink: 0;
+  margin-right: 35px;
+  height: 250px;
+}
+
+.info {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow: hidden;
+}
+
+.titleRow {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  flex: 0 0 auto;
+}
+
+.titleContainer {
+  display: flex;
+  margin-top: -5px;
+}
+
+.title {
+  font-weight: 300;
+  font-size: 50px;
+  line-height: 60px;
+}
+
+.toggleMonitoredContainer {
+  align-self: center;
+}
+
+.monitorToggleButton {
+  composes: toggleButton from '~Components/MonitorToggleButton.css';
+
+  width: 40px;
+
+  &:hover {
+    color: $iconButtonHoverLightColor;
+  }
+}
+
+.alternateTitlesIconContainer {
+  align-self: flex-end;
+  margin-left: 20px;
+}
+
+.authorNavigationButtons {
+  position: absolute;
+  right: 0;
+  z-index: 1;
+  margin-top: 10px;
+  padding: 30px;
+  white-space: nowrap;
+}
+
+.authorUpButton,
+.authorNavigationButton {
+  composes: button from '~Components/Link/IconButton.css';
+
+  margin-left: 5px;
+  width: 30px;
+  color: #e1e2e3;
+  white-space: nowrap;
+
+  &:hover {
+    color: $iconButtonHoverLightColor;
+  }
+}
+
+.details {
+  margin-bottom: 8px;
+  font-weight: 300;
+  font-size: 20px;
+}
+
+.detailsLabel {
+  composes: label from '~Components/Label.css';
+
+  margin: 5px 10px 5px 0;
+}
+
+.path,
+.sizeOnDisk,
+.qualityProfileName,
+.links,
+.tags {
+  margin-left: 8px;
+  font-weight: 300;
+  font-size: 17px;
+}
+
+.overview {
+  flex: 1 1 auto;
+  margin-top: 8px;
+  min-height: 0;
+  font-size: $intermediateFontSize;
+}
+
+@media only screen and (max-width: $breakpointSmall) {
+  .headerContent {
+    padding: 15px;
+  }
+
+  .title {
+    font-size: 30px;
+    line-height: 50px;
+  }
+}
+
+@media only screen and (max-width: $breakpointLarge) {
+  .poster {
+    display: none;
+  }
+}

frontend/src/Author/Details/AuthorDetailsHeader.js

@@ -0,0 +1,340 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import TextTruncate from 'react-text-truncate';
+import AuthorPoster from 'Author/AuthorPoster';
+import HeartRating from 'Components/HeartRating';
+import Icon from 'Components/Icon';
+import Label from 'Components/Label';
+import Marquee from 'Components/Marquee';
+import Measure from 'Components/Measure';
+import MonitorToggleButton from 'Components/MonitorToggleButton';
+import Popover from 'Components/Tooltip/Popover';
+import Tooltip from 'Components/Tooltip/Tooltip';
+import { icons, kinds, sizes, tooltipPositions } from 'Helpers/Props';
+import QualityProfileNameConnector from 'Settings/Profiles/Quality/QualityProfileNameConnector';
+import fonts from 'Styles/Variables/fonts';
+import formatBytes from 'Utilities/Number/formatBytes';
+import stripHtml from 'Utilities/String/stripHtml';
+import translate from 'Utilities/String/translate';
+import AuthorAlternateTitles from './AuthorAlternateTitles';
+import AuthorDetailsLinks from './AuthorDetailsLinks';
+import AuthorTagsConnector from './AuthorTagsConnector';
+import styles from './AuthorDetailsHeader.css';
+
+const defaultFontSize = parseInt(fonts.defaultFontSize);
+const lineHeight = parseFloat(fonts.lineHeight);
+
+function getFanartUrl(images) {
+  const fanartImage = images.find((x) => x.coverType === 'fanart');
+
+  if (fanartImage) {
+    // Remove protocol
+    return fanartImage.url.replace(/^https?:/, '');
+  }
+}
+
+class AuthorDetailsHeader extends Component {
+
+  //
+  // Lifecyle
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      overviewHeight: 0,
+      titleWidth: 0
+    };
+  }
+
+  //
+  // Listeners
+
+  onOverviewMeasure = ({ height }) => {
+    this.setState({ overviewHeight: height });
+  }
+
+  onTitleMeasure = ({ width }) => {
+    this.setState({ titleWidth: width });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      id,
+      width,
+      authorName,
+      ratings,
+      path,
+      statistics,
+      qualityProfileId,
+      monitored,
+      status,
+      overview,
+      links,
+      images,
+      alternateTitles,
+      tags,
+      isSaving,
+      isSmallScreen,
+      onMonitorTogglePress
+    } = this.props;
+
+    const {
+      bookFileCount,
+      sizeOnDisk
+    } = statistics;
+
+    const {
+      overviewHeight,
+      titleWidth
+    } = this.state;
+
+    const marqueeWidth = titleWidth - (isSmallScreen ? 85 : 160);
+
+    const continuing = status === 'continuing';
+
+    let bookFilesCountMessage = translate('BookFilesCountMessage');
+
+    if (bookFileCount === 1) {
+      bookFilesCountMessage = '1 book file';
+    } else if (bookFileCount > 1) {
+      bookFilesCountMessage = `${bookFileCount} book files`;
+    }
+
+    return (
+      <div className={styles.header} style={{ width }} >
+        <div
+          className={styles.backdrop}
+          style={{
+            backgroundImage: `url(${getFanartUrl(images)})`
+          }}
+        >
+          <div className={styles.backdropOverlay} />
+        </div>
+
+        <div className={styles.headerContent}>
+          <AuthorPoster
+            className={styles.poster}
+            images={images}
+            size={250}
+            lazy={false}
+          />
+
+          <div className={styles.info}>
+            <Measure
+              className={styles.titleRow}
+              onMeasure={this.onTitleMeasure}
+            >
+              <div className={styles.titleContainer}>
+                <div className={styles.toggleMonitoredContainer}>
+                  <MonitorToggleButton
+                    className={styles.monitorToggleButton}
+                    monitored={monitored}
+                    isSaving={isSaving}
+                    size={isSmallScreen ? 30: 40}
+                    onPress={onMonitorTogglePress}
+                  />
+                </div>
+
+                <div className={styles.title} style={{ width: marqueeWidth }}>
+                  <Marquee text={authorName} />
+                </div>
+
+                {
+                  !!alternateTitles.length &&
+                    <div className={styles.alternateTitlesIconContainer}>
+                      <Popover
+                        anchor={
+                          <Icon
+                            name={icons.ALTERNATE_TITLES}
+                            size={20}
+                          />
+                        }
+                        title={translate('AlternateTitles')}
+                        body={<AuthorAlternateTitles alternateTitles={alternateTitles} />}
+                        position={tooltipPositions.BOTTOM}
+                      />
+                    </div>
+                }
+              </div>
+            </Measure>
+
+            <div className={styles.details}>
+              <div>
+                <HeartRating
+                  rating={ratings.value}
+                  iconSize={20}
+                />
+              </div>
+            </div>
+
+            <div className={styles.detailsLabels}>
+              <Label
+                className={styles.detailsLabel}
+                size={sizes.LARGE}
+              >
+                <Icon
+                  name={icons.FOLDER}
+                  size={17}
+                />
+
+                <span className={styles.path}>
+                  {path}
+                </span>
+              </Label>
+
+              <Label
+                className={styles.detailsLabel}
+                title={bookFilesCountMessage}
+                size={sizes.LARGE}
+              >
+                <Icon
+                  name={icons.DRIVE}
+                  size={17}
+                />
+
+                <span className={styles.sizeOnDisk}>
+                  {
+                    formatBytes(sizeOnDisk || 0)
+                  }
+                </span>
+              </Label>
+
+              <Label
+                className={styles.detailsLabel}
+                title={translate('QualityProfile')}
+                size={sizes.LARGE}
+              >
+                <Icon
+                  name={icons.PROFILE}
+                  size={17}
+                />
+
+                <span className={styles.qualityProfileName}>
+                  {
+                    <QualityProfileNameConnector
+                      qualityProfileId={qualityProfileId}
+                    />
+                  }
+                </span>
+              </Label>
+
+              <Label
+                className={styles.detailsLabel}
+                size={sizes.LARGE}
+              >
+                <Icon
+                  name={monitored ? icons.MONITORED : icons.UNMONITORED}
+                  size={17}
+                />
+
+                <span className={styles.qualityProfileName}>
+                  {monitored ? 'Monitored' : 'Unmonitored'}
+                </span>
+              </Label>
+
+              <Label
+                className={styles.detailsLabel}
+                title={continuing ? translate('ContinuingMoreBooksAreExpected') : translate('ContinuingNoAdditionalBooksAreExpected')}
+                size={sizes.LARGE}
+              >
+                <Icon
+                  name={continuing ? icons.AUTHOR_CONTINUING : icons.AUTHOR_ENDED}
+                  size={17}
+                />
+
+                <span className={styles.qualityProfileName}>
+                  {continuing ? 'Continuing' : 'Deceased'}
+                </span>
+              </Label>
+
+              <Tooltip
+                anchor={
+                  <Label
+                    className={styles.detailsLabel}
+                    size={sizes.LARGE}
+                  >
+                    <Icon
+                      name={icons.EXTERNAL_LINK}
+                      size={17}
+                    />
+
+                    <span className={styles.links}>
+                      Links
+                    </span>
+                  </Label>
+                }
+                tooltip={
+                  <AuthorDetailsLinks
+                    links={links}
+                  />
+                }
+                kind={kinds.INVERSE}
+                position={tooltipPositions.BOTTOM}
+              />
+
+              {
+                !!tags.length &&
+                  <Tooltip
+                    anchor={
+                      <Label
+                        className={styles.detailsLabel}
+                        size={sizes.LARGE}
+                      >
+                        <Icon
+                          name={icons.TAGS}
+                          size={17}
+                        />
+
+                        <span className={styles.tags}>
+                          Tags
+                        </span>
+                      </Label>
+                    }
+                    tooltip={<AuthorTagsConnector authorId={id} />}
+                    kind={kinds.INVERSE}
+                    position={tooltipPositions.BOTTOM}
+                  />
+
+              }
+            </div>
+            <Measure
+              onMeasure={this.onOverviewMeasure}
+              className={styles.overview}
+            >
+              <TextTruncate
+                line={Math.floor(overviewHeight / (defaultFontSize * lineHeight))}
+                text={stripHtml(overview)}
+              />
+            </Measure>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+AuthorDetailsHeader.propTypes = {
+  id: PropTypes.number.isRequired,
+  width: PropTypes.number.isRequired,
+  authorName: PropTypes.string.isRequired,
+  ratings: PropTypes.object.isRequired,
+  path: PropTypes.string.isRequired,
+  statistics: PropTypes.object.isRequired,
+  qualityProfileId: PropTypes.number.isRequired,
+  monitored: PropTypes.bool.isRequired,
+  status: PropTypes.string.isRequired,
+  overview: PropTypes.string,
+  links: PropTypes.arrayOf(PropTypes.object).isRequired,
+  images: PropTypes.arrayOf(PropTypes.object).isRequired,
+  alternateTitles: PropTypes.arrayOf(PropTypes.string).isRequired,
+  tags: PropTypes.arrayOf(PropTypes.number).isRequired,
+  isSaving: PropTypes.bool.isRequired,
+  isSmallScreen: PropTypes.bool.isRequired,
+  onMonitorTogglePress: PropTypes.func.isRequired
+};
+
+export default AuthorDetailsHeader;

frontend/src/Author/Details/AuthorDetailsHeaderConnector.js

@@ -0,0 +1,71 @@
+/* eslint max-params: 0 */
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { toggleAuthorMonitored } from 'Store/Actions/authorActions';
+import createAuthorSelector from 'Store/Selectors/createAuthorSelector';
+import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import AuthorDetailsHeader from './AuthorDetailsHeader';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.authors,
+    createAuthorSelector(),
+    createDimensionsSelector(),
+    (authors, author, dimensions) => {
+      const alternateTitles = _.reduce(author.alternateTitles, (acc, alternateTitle) => {
+        if ((alternateTitle.seasonNumber === -1 || alternateTitle.seasonNumber === undefined) &&
+            (alternateTitle.sceneSeasonNumber === -1 || alternateTitle.sceneSeasonNumber === undefined)) {
+          acc.push(alternateTitle.title);
+        }
+
+        return acc;
+      }, []);
+
+      return {
+        ...author,
+        isSaving: authors.isSaving,
+        alternateTitles,
+        isSmallScreen: dimensions.isSmallScreen
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  toggleAuthorMonitored
+};
+
+class AuthorDetailsHeaderConnector extends Component {
+
+  //
+  // Listeners
+
+  onMonitorTogglePress = (monitored) => {
+    this.props.toggleAuthorMonitored({
+      authorId: this.props.authorId,
+      monitored
+    });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <AuthorDetailsHeader
+        {...this.props}
+        onMonitorTogglePress={this.onMonitorTogglePress}
+      />
+    );
+  }
+}
+
+AuthorDetailsHeaderConnector.propTypes = {
+  authorId: PropTypes.number.isRequired,
+  toggleAuthorMonitored: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(AuthorDetailsHeaderConnector);

frontend/src/Author/Details/AuthorDetailsPageConnector.js

@@ -9,6 +9,7 @@ import NotFound from 'Components/NotFound';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
 import getErrorMessage from 'Utilities/Object/getErrorMessage';
+import translate from 'Utilities/String/translate';
 import AuthorDetailsConnector from './AuthorDetailsConnector';
 import styles from './AuthorDetails.css';
 
@@ -92,7 +93,7 @@ class AuthorDetailsPageConnector extends Component {
     if (!titleSlug) {
       return (
         <NotFound
-          message="Sorry, that author cannot be found."
+          message={translate('SorryThatAuthorCannotBeFound')}
         />
       );
     }

frontend/src/Author/Details/AuthorDetailsSeasonConnector.js

@@ -4,24 +4,22 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { setBooksSort, setBooksTableOption, toggleBooksMonitored } from 'Store/Actions/bookActions';
+import { setAuthorDetailsId, setAuthorDetailsSort } from 'Store/Actions/authorDetailsActions';
+import { setBooksTableOption, toggleBooksMonitored } from 'Store/Actions/bookActions';
 import { executeCommand } from 'Store/Actions/commandActions';
 import createAuthorSelector from 'Store/Selectors/createAuthorSelector';
 import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
-import createCommandsSelector from 'Store/Selectors/createCommandsSelector';
 import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
 import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
 import AuthorDetailsSeason from './AuthorDetailsSeason';
 
 function createMapStateToProps() {
   return createSelector(
-    (state, { label }) => label,
-    createClientSideCollectionSelector('books'),
+    createClientSideCollectionSelector('books', 'authorDetails'),
     createAuthorSelector(),
-    createCommandsSelector(),
     createDimensionsSelector(),
     createUISettingsSelector(),
-    (label, books, author, commands, dimensions, uiSettings) => {
+    (books, author, dimensions, uiSettings) => {
 
       const booksInGroup = books.items;
 
@@ -47,14 +45,22 @@ function createMapStateToProps() {
 }
 
 const mapDispatchToProps = {
+  setAuthorDetailsId,
+  setAuthorDetailsSort,
   toggleBooksMonitored,
   setBooksTableOption,
-  dispatchSetBookSort: setBooksSort,
   executeCommand
 };
 
 class AuthorDetailsSeasonConnector extends Component {
 
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    this.props.setAuthorDetailsId({ authorId: this.props.authorId });
+  }
+
   //
   // Listeners
 
@@ -63,7 +69,7 @@ class AuthorDetailsSeasonConnector extends Component {
   }
 
   onSortPress = (sortKey) => {
-    this.props.dispatchSetBookSort({ sortKey });
+    this.props.setAuthorDetailsSort({ sortKey });
   }
 
   onMonitorBookPress = (bookIds, monitored) => {
@@ -92,7 +98,8 @@ AuthorDetailsSeasonConnector.propTypes = {
   authorId: PropTypes.number.isRequired,
   toggleBooksMonitored: PropTypes.func.isRequired,
   setBooksTableOption: PropTypes.func.isRequired,
-  dispatchSetBookSort: PropTypes.func.isRequired,
+  setAuthorDetailsId: PropTypes.func.isRequired,
+  setAuthorDetailsSort: PropTypes.func.isRequired,
   executeCommand: PropTypes.func.isRequired
 };
 

frontend/src/Author/Details/AuthorDetailsSeries.css

@@ -100,12 +100,6 @@
   composes: actionButton;
 
   margin-right: 15px;
-
-  /* position: absolute; */
-  /* top: 50%; */
-  /* left: 90%; */
-  /* margin-top: -12px; */
-  /* margin-left: -15px; */
 }
 
 .noBooks {

frontend/src/Author/Details/AuthorDetailsSeries.js

@@ -8,6 +8,7 @@ import MonitorToggleButton from 'Components/MonitorToggleButton';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import { icons, sortDirections } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import getToggledRange from 'Utilities/Table/getToggledRange';
 import BookRowConnector from './BookRowConnector';
 import styles from './AuthorDetailsSeries.css';
@@ -152,7 +153,7 @@ class AuthorDetailsSeries extends Component {
               <Icon
                 className={styles.expandButtonIcon}
                 name={isExpanded ? icons.COLLAPSE : icons.EXPAND}
-                title={isExpanded ? 'Hide books' : 'Show books'}
+                title={isExpanded ? translate('IsExpandedHideBooks') : translate('IsExpandedShowBooks')}
                 size={24}
               />
 
@@ -198,7 +199,7 @@ class AuthorDetailsSeries extends Component {
                     iconClassName={styles.collapseButtonIcon}
                     name={icons.COLLAPSE}
                     size={20}
-                    title="Hide books"
+                    title={translate('HideBooks')}
                     onPress={this.onExpandPress}
                   />
                 </div>

frontend/src/Author/Details/AuthorDetailsSeriesConnector.js

@@ -4,13 +4,12 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { setBooksTableOption, toggleBooksMonitored } from 'Store/Actions/bookActions';
+import { toggleBooksMonitored } from 'Store/Actions/bookActions';
 import { executeCommand } from 'Store/Actions/commandActions';
-import { setSeriesSort } from 'Store/Actions/seriesActions';
+import { setSeriesSort, setSeriesTableOption } from 'Store/Actions/seriesActions';
 import createAuthorSelector from 'Store/Selectors/createAuthorSelector';
 import createCommandsSelector from 'Store/Selectors/createCommandsSelector';
 import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
-// import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
 import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
 import AuthorDetailsSeries from './AuthorDetailsSeries';
 
@@ -70,7 +69,7 @@ function createMapStateToProps() {
 
 const mapDispatchToProps = {
   toggleBooksMonitored,
-  setBooksTableOption,
+  setSeriesTableOption,
   dispatchSetSeriesSort: setSeriesSort,
   executeCommand
 };
@@ -81,7 +80,7 @@ class AuthorDetailsSeasonConnector extends Component {
   // Listeners
 
   onTableOptionChange = (payload) => {
-    this.props.setBooksTableOption(payload);
+    this.props.setSeriesTableOption(payload);
   }
 
   onSortPress = (sortKey) => {
@@ -113,7 +112,7 @@ class AuthorDetailsSeasonConnector extends Component {
 AuthorDetailsSeasonConnector.propTypes = {
   authorId: PropTypes.number.isRequired,
   toggleBooksMonitored: PropTypes.func.isRequired,
-  setBooksTableOption: PropTypes.func.isRequired,
+  setSeriesTableOption: PropTypes.func.isRequired,
   dispatchSetSeriesSort: PropTypes.func.isRequired,
   executeCommand: PropTypes.func.isRequired
 };

frontend/src/Author/Details/BookRow.css

@@ -1,7 +1,5 @@
 .title {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
-
-  white-space: nowrap;
 }
 
 .monitored {
@@ -10,8 +8,22 @@
   width: 42px;
 }
 
+.position,
+.rating,
 .status {
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   width: 100px;
 }
+
+.releaseDate {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 120px;
+}
+
+.pageCount {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 80px;
+}

frontend/src/Author/Details/BookRow.js

@@ -2,27 +2,14 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import BookSearchCellConnector from 'Book/BookSearchCellConnector';
 import BookTitleLink from 'Book/BookTitleLink';
-import Label from 'Components/Label';
 import MonitorToggleButton from 'Components/MonitorToggleButton';
 import StarRating from 'Components/StarRating';
 import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
-import { kinds, sizes } from 'Helpers/Props';
+import BookStatus from './BookStatus';
 import styles from './BookRow.css';
 
-function getBookCountKind(monitored, bookFileCount, bookCount) {
-  if (bookFileCount === bookCount && bookCount > 0) {
-    return kinds.SUCCESS;
-  }
-
-  if (!monitored) {
-    return kinds.WARNING;
-  }
-
-  return kinds.DANGER;
-}
-
 class BookRow extends Component {
 
   //
@@ -68,7 +55,6 @@ class BookRow extends Component {
       id,
       authorId,
       monitored,
-      statistics,
       releaseDate,
       title,
       seriesTitle,
@@ -78,14 +64,12 @@ class BookRow extends Component {
       isSaving,
       authorMonitored,
       titleSlug,
+      bookFiles,
       columns
     } = this.props;
 
-    const {
-      bookCount,
-      bookFileCount,
-      totalBookCount
-    } = statistics;
+    const bookFile = bookFiles[0];
+    const isAvailable = Date.parse(releaseDate) < new Date();
 
     return (
       <TableRow>
@@ -145,7 +129,7 @@ class BookRow extends Component {
               return (
                 <TableRowCell
                   key={name}
-                  className={styles.title}
+                  className={styles.position}
                 >
                   {position || ''}
                 </TableRowCell>
@@ -154,7 +138,10 @@ class BookRow extends Component {
 
             if (name === 'rating') {
               return (
-                <TableRowCell key={name}>
+                <TableRowCell
+                  key={name}
+                  className={styles.rating}
+                >
                   {
                     <StarRating
                       rating={ratings.value}
@@ -168,6 +155,7 @@ class BookRow extends Component {
             if (name === 'releaseDate') {
               return (
                 <RelativeDateCellConnector
+                  className={styles.releaseDate}
                   key={name}
                   date={releaseDate}
                 />
@@ -178,6 +166,7 @@ class BookRow extends Component {
               return (
                 <TableRowCell
                   key={name}
+                  className={styles.pageCount}
                 >
                   {pageCount || ''}
                 </TableRowCell>
@@ -190,15 +179,11 @@ class BookRow extends Component {
                   key={name}
                   className={styles.status}
                 >
-                  <Label
-                    title={`${totalBookCount} books total. ${bookFileCount} books with files.`}
-                    kind={getBookCountKind(monitored, bookFileCount, bookCount)}
-                    size={sizes.MEDIUM}
-                  >
-                    {
-                      <span>{bookFileCount} / {bookCount}</span>
-                    }
-                  </Label>
+                  <BookStatus
+                    isAvailable={isAvailable}
+                    monitored={monitored}
+                    bookFile={bookFile}
+                  />
                 </TableRowCell>
               );
             }
@@ -228,22 +213,15 @@ BookRow.propTypes = {
   releaseDate: PropTypes.string,
   title: PropTypes.string.isRequired,
   seriesTitle: PropTypes.string.isRequired,
-  position: PropTypes.number,
+  position: PropTypes.string,
   pageCount: PropTypes.number,
   ratings: PropTypes.object.isRequired,
   titleSlug: PropTypes.string.isRequired,
   isSaving: PropTypes.bool,
   authorMonitored: PropTypes.bool.isRequired,
-  statistics: PropTypes.object.isRequired,
+  bookFiles: PropTypes.arrayOf(PropTypes.object).isRequired,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
   onMonitorBookPress: PropTypes.func.isRequired
 };
 
-BookRow.defaultProps = {
-  statistics: {
-    bookCount: 0,
-    bookFileCount: 0
-  }
-};
-
 export default BookRow;

frontend/src/Author/Details/BookRowConnector.js

@@ -2,17 +2,38 @@
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import createAuthorSelector from 'Store/Selectors/createAuthorSelector';
-import createBookFileSelector from 'Store/Selectors/createBookFileSelector';
 import BookRow from './BookRow';
 
+const selectBookFiles = createSelector(
+  (state) => state.bookFiles,
+  (bookFiles) => {
+    const {
+      items
+    } = bookFiles;
+
+    const bookFileDict = items.reduce((acc, file) => {
+      const bookId = file.bookId;
+      if (!acc.hasOwnProperty(bookId)) {
+        acc[bookId] = [];
+      }
+
+      acc[bookId].push(file);
+      return acc;
+    }, {});
+
+    return bookFileDict;
+  }
+);
+
 function createMapStateToProps() {
   return createSelector(
     createAuthorSelector(),
-    createBookFileSelector(),
-    (author = {}, bookFile) => {
+    selectBookFiles,
+    (state, { id }) => id,
+    (author = {}, bookFiles, bookId) => {
       return {
         authorMonitored: author.monitored,
-        bookFilePath: bookFile ? bookFile.path : null
+        bookFiles: bookFiles[bookId] ?? []
       };
     }
   );

frontend/src/Author/Details/BookStatus.css

@@ -1,3 +1,4 @@
+
 .center {
   display: flex;
   justify-content: center;

frontend/src/Author/Details/BookStatus.js

@@ -0,0 +1,78 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import BookQuality from 'Book/BookQuality';
+import Label from 'Components/Label';
+import { kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import styles from './BookStatus.css';
+
+function BookStatus(props) {
+  const {
+    isAvailable,
+    monitored,
+    bookFile
+  } = props;
+
+  const hasBookFile = !!bookFile;
+
+  if (hasBookFile) {
+    const quality = bookFile.quality;
+
+    return (
+      <div className={styles.center}>
+        <BookQuality
+          title={quality.quality.name}
+          size={bookFile.size}
+          quality={quality}
+          isMonitored={monitored}
+          isCutoffNotMet={bookFile.qualityCutoffNotMet}
+        />
+      </div>
+    );
+  }
+
+  if (!monitored) {
+    return (
+      <div className={styles.center}>
+        <Label
+          title={translate('NotMonitored')}
+          kind={kinds.WARNING}
+        >
+          {translate('NotMonitored')}
+        </Label>
+      </div>
+    );
+  }
+
+  if (isAvailable) {
+    return (
+      <div className={styles.center}>
+        <Label
+          title={translate('BookAvailableButMissing')}
+          kind={kinds.DANGER}
+        >
+          {translate('Missing')}
+        </Label>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.center}>
+      <Label
+        title={translate('NotAvailable')}
+        kind={kinds.INFO}
+      >
+        {translate('NotAvailable')}
+      </Label>
+    </div>
+  );
+}
+
+BookStatus.propTypes = {
+  isAvailable: PropTypes.bool,
+  monitored: PropTypes.bool.isRequired,
+  bookFile: PropTypes.object
+};
+
+export default BookStatus;

frontend/src/Author/Edit/EditAuthorModalContent.js

@@ -15,6 +15,7 @@ import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import Popover from 'Components/Tooltip/Popover';
 import { icons, inputTypes, kinds, tooltipPositions } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import styles from './EditAuthorModalContent.css';
 
 class EditAuthorModalContent extends Component {
@@ -87,19 +88,23 @@ class EditAuthorModalContent extends Component {
         <ModalBody>
           <Form {...otherProps}>
             <FormGroup>
-              <FormLabel>Monitored</FormLabel>
+              <FormLabel>
+                {translate('Monitored')}
+              </FormLabel>
 
               <FormInputGroup
                 type={inputTypes.CHECK}
                 name="monitored"
-                helpText="Download monitored books from this author"
+                helpText={translate('MonitoredHelpText')}
                 {...monitored}
                 onChange={onInputChange}
               />
             </FormGroup>
 
             <FormGroup>
-              <FormLabel>Quality Profile</FormLabel>
+              <FormLabel>
+                {translate('QualityProfile')}
+              </FormLabel>
 
               <FormInputGroup
                 type={inputTypes.QUALITY_PROFILE_SELECT}
@@ -122,7 +127,7 @@ class EditAuthorModalContent extends Component {
                           name={icons.INFO}
                         />
                       }
-                      title="Metadata Profile"
+                      title={translate('MetadataProfile')}
                       body={<AuthorMetadataProfilePopoverContent />}
                       position={tooltipPositions.RIGHT}
                     />
@@ -132,7 +137,7 @@ class EditAuthorModalContent extends Component {
                   <FormInputGroup
                     type={inputTypes.METADATA_PROFILE_SELECT}
                     name="metadataProfileId"
-                    helpText="Changes will take place on next author refresh"
+                    helpText={translate('MetadataProfileIdHelpText')}
                     includeNone={true}
                     {...metadataProfileId}
                     onChange={onInputChange}
@@ -141,7 +146,9 @@ class EditAuthorModalContent extends Component {
             }
 
             <FormGroup>
-              <FormLabel>Path</FormLabel>
+              <FormLabel>
+                {translate('Path')}
+              </FormLabel>
 
               <FormInputGroup
                 type={inputTypes.PATH}
@@ -152,7 +159,9 @@ class EditAuthorModalContent extends Component {
             </FormGroup>
 
             <FormGroup>
-              <FormLabel>Tags</FormLabel>
+              <FormLabel>
+                {translate('Tags')}
+              </FormLabel>
 
               <FormInputGroup
                 type={inputTypes.TAG}

frontend/src/Author/Editor/AudioTags/RetagAuthorModalContent.css

@@ -6,3 +6,25 @@
   margin-top: 20px;
   margin-bottom: 10px;
 }
+
+.searchForNewBookLabelContainer {
+  display: flex;
+  margin-top: 2px;
+}
+
+.searchForNewBookLabel {
+  margin-right: 8px;
+  font-weight: normal;
+}
+
+.searchForNewBookContainer {
+  composes: container from '~Components/Form/CheckInput.css';
+
+  flex: 0 1 0;
+}
+
+.searchForNewBookInput {
+  composes: input from '~Components/Form/CheckInput.css';
+
+  margin-top: 0;
+}

frontend/src/Author/Editor/AudioTags/RetagAuthorModalContent.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { Component } from 'react';
 import Alert from 'Components/Alert';
+import CheckInput from 'Components/Form/CheckInput';
 import Icon from 'Components/Icon';
 import Button from 'Components/Link/Button';
 import ModalBody from 'Components/Modal/ModalBody';
@@ -10,58 +11,114 @@ import ModalHeader from 'Components/Modal/ModalHeader';
 import { icons, kinds } from 'Helpers/Props';
 import styles from './RetagAuthorModalContent.css';
 
-function RetagAuthorModalContent(props) {
-  const {
-    authorNames,
-    onModalClose,
-    onRetagAuthorPress
-  } = props;
+class RetagAuthorModalContent extends Component {
 
-  return (
-    <ModalContent onModalClose={onModalClose}>
-      <ModalHeader>
-        Retag Selected Author
-      </ModalHeader>
+  //
+  // Lifecycle
 
-      <ModalBody>
-        <Alert>
-          Tip: To preview the tags that will be written... select "Cancel" then click any author name and use the
-          <Icon
-            className={styles.retagIcon}
-            name={icons.RETAG}
-          />
-        </Alert>
+  constructor(props, context) {
+    super(props, context);
 
-        <div className={styles.message}>
-          Are you sure you want to re-tag all files in the {authorNames.length} selected author?
-        </div>
-        <ul>
-          {
-            authorNames.map((authorName) => {
-              return (
-                <li key={authorName}>
-                  {authorName}
-                </li>
-              );
-            })
-          }
-        </ul>
-      </ModalBody>
+    this.state = {
+      updateCovers: false,
+      embedMetadata: false
+    };
+  }
 
-      <ModalFooter>
-        <Button onPress={onModalClose}>
-          Cancel
-        </Button>
+  //
+  // Listeners
 
-        <Button
-          kind={kinds.DANGER}
-          onPress={onRetagAuthorPress}
-        >
-          Retag
-        </Button>
-      </ModalFooter>
-    </ModalContent>
-  );
+  onCheckInputChange = ({ name, value }) => {
+    this.setState({ [name]: value });
+  }
+
+  onRetagAuthorPress = () => {
+    this.props.onRetagAuthorPress(this.state.updateCovers, this.state.embedMetadata);
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      authorNames,
+      onModalClose
+    } = this.props;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          Retag Selected Author
+        </ModalHeader>
+
+        <ModalBody>
+          <Alert>
+            Tip: To preview the tags that will be written... select "Cancel" then click any author name and use the
+            <Icon
+              className={styles.retagIcon}
+              name={icons.RETAG}
+            />
+          </Alert>
+
+          <div className={styles.message}>
+            Are you sure you want to re-tag all files in the {authorNames.length} selected author?
+          </div>
+          <ul>
+            {
+              authorNames.map((authorName) => {
+                return (
+                  <li key={authorName}>
+                    {authorName}
+                  </li>
+                );
+              })
+            }
+          </ul>
+        </ModalBody>
+
+        <ModalFooter>
+          <label className={styles.searchForNewBookLabelContainer}>
+            <span className={styles.searchForNewBookLabel}>
+              Update Covers
+            </span>
+
+            <CheckInput
+              containerClassName={styles.searchForNewBookContainer}
+              className={styles.searchForNewBookInput}
+              name="updateCovers"
+              value={this.state.updateCovers}
+              onChange={this.onCheckInputChange}
+            />
+          </label>
+
+          <label className={styles.searchForNewBookLabelContainer}>
+            <span className={styles.searchForNewBookLabel}>
+              Embed Metadata
+            </span>
+
+            <CheckInput
+              containerClassName={styles.searchForNewBookContainer}
+              className={styles.searchForNewBookInput}
+              name="embedMetadata"
+              value={this.state.embedMetadata}
+              onChange={this.onCheckInputChange}
+            />
+          </label>
+
+          <Button onPress={onModalClose}>
+            Cancel
+          </Button>
+
+          <Button
+            kind={kinds.DANGER}
+            onPress={this.onRetagAuthorPress}
+          >
+            Retag
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
 }
 
 RetagAuthorModalContent.propTypes = {

frontend/src/Author/Editor/AudioTags/RetagAuthorModalContentConnector.js

@@ -36,10 +36,12 @@ class RetagAuthorModalContentConnector extends Component {
   //
   // Listeners
 
-  onRetagAuthorPress = () => {
+  onRetagAuthorPress = (updateCovers, embedMetadata) => {
     this.props.executeCommand({
       name: commandNames.RETAG_AUTHOR,
-      authorIds: this.props.authorIds
+      authorIds: this.props.authorIds,
+      updateCovers,
+      embedMetadata
     });
 
     this.props.onModalClose(true);

frontend/src/Author/Editor/AuthorEditor.js

@@ -14,6 +14,7 @@ import TableBody from 'Components/Table/TableBody';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import { align, icons, sortDirections } from 'Helpers/Props';
 import getErrorMessage from 'Utilities/Object/getErrorMessage';
+import translate from 'Utilities/String/translate';
 import getSelectedIds from 'Utilities/Table/getSelectedIds';
 import selectAll from 'Utilities/Table/selectAll';
 import toggleSelected from 'Utilities/Table/toggleSelected';
@@ -143,7 +144,7 @@ class AuthorEditor extends Component {
     const selectedAuthorIds = this.getSelectedIds();
 
     return (
-      <PageContent title="Author Editor">
+      <PageContent title={translate('AuthorEditor')}>
         <PageToolbar>
           <PageToolbarSection />
           <PageToolbarSection alignContent={align.RIGHT}>
@@ -152,7 +153,7 @@ class AuthorEditor extends Component {
               onTableOptionChange={onTableOptionChange}
             >
               <PageToolbarButton
-                label="Options"
+                label={translate('Options')}
                 iconName={icons.TABLE}
               />
             </TableOptionsModalWrapper>

frontend/src/Author/Editor/AuthorEditorFooter.js

@@ -8,6 +8,7 @@ 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 AuthorEditorFooterLabel from './AuthorEditorFooterLabel';
 import DeleteAuthorModal from './Delete/DeleteAuthorModal';
 import TagsModal from './Tags/TagsModal';
@@ -147,7 +148,6 @@ class AuthorEditorFooter extends Component {
       monitored,
       qualityProfileId,
       metadataProfileId,
-      bookFolder,
       rootFolderPath,
       savingTags,
       isTagsModalOpen,
@@ -162,17 +162,11 @@ class AuthorEditorFooter extends Component {
       { key: 'unmonitored', value: 'Unmonitored' }
     ];
 
-    const bookFolderOptions = [
-      { key: NO_CHANGE, value: 'No Change', disabled: true },
-      { key: 'yes', value: 'Yes' },
-      { key: 'no', value: 'No' }
-    ];
-
     return (
       <PageContentFooter>
         <div className={styles.inputContainer}>
           <AuthorEditorFooterLabel
-            label="Monitor Author"
+            label={translate('MonitorAuthor')}
             isSaving={isSaving && monitored !== NO_CHANGE}
           />
 
@@ -203,7 +197,7 @@ class AuthorEditorFooter extends Component {
                   className={styles.inputContainer}
                 >
                   <AuthorEditorFooterLabel
-                    label="Quality Profile"
+                    label={translate('QualityProfile')}
                     isSaving={isSaving && qualityProfileId !== NO_CHANGE}
                   />
 
@@ -225,7 +219,7 @@ class AuthorEditorFooter extends Component {
                   className={styles.inputContainer}
                 >
                   <AuthorEditorFooterLabel
-                    label="Metadata Profile"
+                    label={translate('MetadataProfile')}
                     isSaving={isSaving && metadataProfileId !== NO_CHANGE}
                   />
 
@@ -240,28 +234,6 @@ class AuthorEditorFooter extends Component {
               );
             }
 
-            if (name === 'bookFolder') {
-              return (
-                <div
-                  key={name}
-                  className={styles.inputContainer}
-                >
-                  <AuthorEditorFooterLabel
-                    label="Book Folder"
-                    isSaving={isSaving && bookFolder !== NO_CHANGE}
-                  />
-
-                  <SelectInput
-                    name="bookFolder"
-                    value={bookFolder}
-                    values={bookFolderOptions}
-                    isDisabled={!selectedCount}
-                    onChange={this.onInputChange}
-                  />
-                </div>
-              );
-            }
-
             if (name === 'path') {
               return (
                 <div
@@ -269,7 +241,7 @@ class AuthorEditorFooter extends Component {
                   className={styles.inputContainer}
                 >
                   <AuthorEditorFooterLabel
-                    label="Root Folder"
+                    label={translate('RootFolder')}
                     isSaving={isSaving && rootFolderPath !== NO_CHANGE}
                   />
 
@@ -292,7 +264,7 @@ class AuthorEditorFooter extends Component {
         <div className={styles.buttonContainer}>
           <div className={styles.buttonContainerContent}>
             <AuthorEditorFooterLabel
-              label={`${selectedCount} Author(s) Selected`}
+              label={translate('SelectedCountAuthorsSelectedInterp', [selectedCount])}
               isSaving={false}
             />
 

frontend/src/Author/Editor/AuthorEditorRow.js

@@ -2,13 +2,11 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import AuthorNameLink from 'Author/AuthorNameLink';
 import AuthorStatusCell from 'Author/Index/Table/AuthorStatusCell';
-import CheckInput from 'Components/Form/CheckInput';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
 import TableRow from 'Components/Table/TableRow';
 import TagListConnector from 'Components/TagListConnector';
 import formatBytes from 'Utilities/Number/formatBytes';
-import styles from './AuthorEditorRow.css';
 
 class AuthorEditorRow extends Component {
 
@@ -27,10 +25,8 @@ class AuthorEditorRow extends Component {
     const {
       id,
       status,
-      foreignAuthorId,
+      titleSlug,
       authorName,
-      authorType,
-      bookFolder,
       monitored,
       metadataProfile,
       qualityProfile,
@@ -38,9 +34,7 @@ class AuthorEditorRow extends Component {
       statistics,
       tags,
       columns,
-      isSaving,
       isSelected,
-      onAuthorMonitoredPress,
       onSelectedChange
     } = this.props;
 
@@ -67,11 +61,8 @@ class AuthorEditorRow extends Component {
               return (
                 <AuthorStatusCell
                   key={name}
-                  authorType={authorType}
                   monitored={monitored}
                   status={status}
-                  isSaving={isSaving}
-                  onMonitoredPress={onAuthorMonitoredPress}
                 />
               );
             }
@@ -80,10 +71,9 @@ class AuthorEditorRow extends Component {
               return (
                 <TableRowCell
                   key={name}
-                  className={styles.title}
                 >
                   <AuthorNameLink
-                    foreignAuthorId={foreignAuthorId}
+                    titleSlug={titleSlug}
                     authorName={authorName}
                   />
                 </TableRowCell>
@@ -106,22 +96,6 @@ class AuthorEditorRow extends Component {
               );
             }
 
-            if (name === 'bookFolder') {
-              return (
-                <TableRowCell
-                  key={name}
-                  className={styles.bookFolder}
-                >
-                  <CheckInput
-                    name="bookFolder"
-                    value={bookFolder}
-                    isDisabled={true}
-                    onChange={this.onBookFolderChange}
-                  />
-                </TableRowCell>
-              );
-            }
-
             if (name === 'path') {
               return (
                 <TableRowCell key={name}>
@@ -159,11 +133,8 @@ class AuthorEditorRow extends Component {
 AuthorEditorRow.propTypes = {
   id: PropTypes.number.isRequired,
   status: PropTypes.string.isRequired,
-  foreignAuthorId: PropTypes.string.isRequired,
   titleSlug: PropTypes.string.isRequired,
   authorName: PropTypes.string.isRequired,
-  authorType: PropTypes.string,
-  bookFolder: PropTypes.string,
   monitored: PropTypes.bool.isRequired,
   metadataProfile: PropTypes.object.isRequired,
   qualityProfile: PropTypes.object.isRequired,
@@ -171,9 +142,7 @@ AuthorEditorRow.propTypes = {
   statistics: PropTypes.object.isRequired,
   tags: PropTypes.arrayOf(PropTypes.number).isRequired,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  isSaving: PropTypes.bool.isRequired,
   isSelected: PropTypes.bool,
-  onAuthorMonitoredPress: PropTypes.func.isRequired,
   onSelectedChange: PropTypes.func.isRequired
 };
 

frontend/src/Author/Editor/Organize/OrganizeAuthorModalContent.js

@@ -25,7 +25,7 @@ function OrganizeAuthorModalContent(props) {
 
       <ModalBody>
         <Alert>
-          Tip: To preview a rename, select "Cancel", then select any artist name and use the
+          Tip: To preview a rename, select "Cancel", then select any author name and use the
           <Icon
             className={styles.renameIcon}
             name={icons.ORGANIZE}

frontend/src/Author/Editor/Tags/TagsModalContent.js

@@ -12,6 +12,7 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { inputTypes, kinds, sizes } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import styles from './TagsModalContent.css';
 
 class TagsModalContent extends Component {
@@ -74,7 +75,9 @@ class TagsModalContent extends Component {
         <ModalBody>
           <Form>
             <FormGroup>
-              <FormLabel>Tags</FormLabel>
+              <FormLabel>
+                {translate('Tags')}
+              </FormLabel>
 
               <FormInputGroup
                 type={inputTypes.TAG}
@@ -85,7 +88,9 @@ class TagsModalContent extends Component {
             </FormGroup>
 
             <FormGroup>
-              <FormLabel>Apply Tags</FormLabel>
+              <FormLabel>
+                {translate('ApplyTags')}
+              </FormLabel>
 
               <FormInputGroup
                 type={inputTypes.SELECT}
@@ -93,17 +98,19 @@ class TagsModalContent extends Component {
                 value={applyTags}
                 values={applyTagsOptions}
                 helpTexts={[
-                  'How to apply tags to the selected author',
-                  'Add: Add the tags the existing list of tags',
-                  'Remove: Remove the entered tags',
-                  'Replace: Replace the tags with the entered tags (enter no tags to clear all tags)'
+                  translate('ApplyTagsHelpTexts1'),
+                  translate('ApplyTagsHelpTexts2'),
+                  translate('ApplyTagsHelpTexts3'),
+                  translate('ApplyTagsHelpTexts4')
                 ]}
                 onChange={this.onInputChange}
               />
             </FormGroup>
 
             <FormGroup>
-              <FormLabel>Result</FormLabel>
+              <FormLabel>
+                {translate('Result')}
+              </FormLabel>
 
               <div className={styles.result}>
                 {
@@ -120,7 +127,7 @@ class TagsModalContent extends Component {
                     return (
                       <Label
                         key={tag.id}
-                        title={removeTag ? 'Removing tag' : 'Existing tag'}
+                        title={removeTag ? translate('RemoveTagRemovingTag') : translate('RemoveTagExistingTag')}
                         kind={removeTag ? kinds.INVERSE : kinds.INFO}
                         size={sizes.LARGE}
                       >
@@ -146,7 +153,7 @@ class TagsModalContent extends Component {
                       return (
                         <Label
                           key={tag.id}
-                          title={'Adding tag'}
+                          title={translate('AddingTag')}
                           kind={kinds.SUCCESS}
                           size={sizes.LARGE}
                         >

frontend/src/Author/History/AuthorHistoryRow.js

@@ -11,6 +11,7 @@ import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRow from 'Components/Table/TableRow';
 import Popover from 'Components/Tooltip/Popover';
 import { icons, kinds, tooltipPositions } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import styles from './AuthorHistoryRow.css';
 
 function getTitle(eventType) {
@@ -132,7 +133,7 @@ class AuthorHistoryRow extends Component {
           {
             eventType === 'grabbed' &&
               <IconButton
-                title="Mark as failed"
+                title={translate('MarkAsFailed')}
                 name={icons.REMOVE}
                 onPress={this.onMarkAsFailedPress}
               />
@@ -142,9 +143,9 @@ class AuthorHistoryRow extends Component {
         <ConfirmModal
           isOpen={isMarkAsFailedModalOpen}
           kind={kinds.DANGER}
-          title="Mark as Failed"
-          message={`Are you sure you want to mark '${sourceTitle}' as failed?`}
-          confirmLabel="Mark as Failed"
+          title={translate('MarkAsFailed')}
+          message={translate('MarkAsFailedMessageText', [sourceTitle])}
+          confirmLabel={translate('MarkAsFailed')}
           onConfirm={this.onConfirmMarkAsFailed}
           onCancel={this.onMarkAsFailedModalClose}
         />

frontend/src/Author/History/AuthorHistoryTableContent.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
+import translate from 'Utilities/String/translate';
 import AuthorHistoryRowConnector from './AuthorHistoryRowConnector';
 
 const columns = [
@@ -69,12 +70,16 @@ class AuthorHistoryTableContent extends Component {
 
         {
           !isFetching && !!error &&
-            <div>Unable to load history.</div>
+            <div>
+              {translate('UnableToLoadHistory')}
+            </div>
         }
 
         {
           isPopulated && !hasItems && !error &&
-            <div>No history.</div>
+            <div>
+              {translate('NoHistory')}
+            </div>
         }
 
         {

frontend/src/Author/Index/AuthorIndex.js

@@ -14,9 +14,8 @@ import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptions
 import { align, icons, sortDirections } from 'Helpers/Props';
 import getErrorMessage from 'Utilities/Object/getErrorMessage';
 import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
+import translate from 'Utilities/String/translate';
 import AuthorIndexFooterConnector from './AuthorIndexFooterConnector';
-import AuthorIndexBannersConnector from './Banners/AuthorIndexBannersConnector';
-import AuthorIndexBannerOptionsModal from './Banners/Options/AuthorIndexBannerOptionsModal';
 import AuthorIndexFilterMenu from './Menus/AuthorIndexFilterMenu';
 import AuthorIndexSortMenu from './Menus/AuthorIndexSortMenu';
 import AuthorIndexViewMenu from './Menus/AuthorIndexViewMenu';
@@ -33,10 +32,6 @@ function getViewComponent(view) {
     return AuthorIndexPostersConnector;
   }
 
-  if (view === 'banners') {
-    return AuthorIndexBannersConnector;
-  }
-
   if (view === 'overview') {
     return AuthorIndexOverviewsConnector;
   }
@@ -57,7 +52,6 @@ class AuthorIndex extends Component {
       jumpBarItems: { order: [] },
       jumpToCharacter: null,
       isPosterOptionsModalOpen: false,
-      isBannerOptionsModalOpen: false,
       isOverviewOptionsModalOpen: false
     };
   }
@@ -100,13 +94,13 @@ class AuthorIndex extends Component {
     } = this.props;
 
     // Reset if not sorting by sortName
-    if (sortKey !== 'sortName') {
+    if (sortKey !== 'sortName' && sortKey !== 'sortNameLastFirst') {
       this.setState({ jumpBarItems: { order: [] } });
       return;
     }
 
     const characters = _.reduce(items, (acc, item) => {
-      let char = item.sortName.charAt(0);
+      let char = item[sortKey].charAt(0);
 
       if (!isNaN(char)) {
         char = '#';
@@ -147,14 +141,6 @@ class AuthorIndex extends Component {
     this.setState({ isPosterOptionsModalOpen: false });
   }
 
-  onBannerOptionsPress = () => {
-    this.setState({ isBannerOptionsModalOpen: true });
-  }
-
-  onBannerOptionsModalClose = () => {
-    this.setState({ isBannerOptionsModalOpen: false });
-  }
-
   onOverviewOptionsPress = () => {
     this.setState({ isOverviewOptionsModalOpen: true });
   }
@@ -200,7 +186,6 @@ class AuthorIndex extends Component {
       jumpBarItems,
       jumpToCharacter,
       isPosterOptionsModalOpen,
-      isBannerOptionsModalOpen,
       isOverviewOptionsModalOpen
     } = this.state;
 
@@ -213,7 +198,7 @@ class AuthorIndex extends Component {
         <PageToolbar>
           <PageToolbarSection>
             <PageToolbarButton
-              label="Update all"
+              label={translate('UpdateAll')}
               iconName={icons.REFRESH}
               spinningName={icons.REFRESH}
               isSpinning={isRefreshingAuthor}
@@ -221,7 +206,7 @@ class AuthorIndex extends Component {
             />
 
             <PageToolbarButton
-              label="RSS Sync"
+              label={translate('RSSSync')}
               iconName={icons.RSS}
               isSpinning={isRssSyncExecuting}
               isDisabled={hasNoAuthor}
@@ -242,7 +227,7 @@ class AuthorIndex extends Component {
                   optionsComponent={AuthorIndexTableOptionsConnector}
                 >
                   <PageToolbarButton
-                    label="Options"
+                    label={translate('Options')}
                     iconName={icons.TABLE}
                   />
                 </TableOptionsModalWrapper> :
@@ -252,7 +237,7 @@ class AuthorIndex extends Component {
             {
               view === 'posters' ?
                 <PageToolbarButton
-                  label="Options"
+                  label={translate('Options')}
                   iconName={icons.POSTER}
                   isDisabled={hasNoAuthor}
                   onPress={this.onPosterOptionsPress}
@@ -260,21 +245,10 @@ class AuthorIndex extends Component {
                 null
             }
 
-            {
-              view === 'banners' ?
-                <PageToolbarButton
-                  label="Options"
-                  iconName={icons.POSTER}
-                  isDisabled={hasNoAuthor}
-                  onPress={this.onBannerOptionsPress}
-                /> :
-                null
-            }
-
             {
               view === 'overview' ?
                 <PageToolbarButton
-                  label="Options"
+                  label={translate('Options')}
                   iconName={icons.OVERVIEW}
                   isDisabled={hasNoAuthor}
                   onPress={this.onOverviewOptionsPress}
@@ -282,11 +256,7 @@ class AuthorIndex extends Component {
                 null
             }
 
-            {
-              (view === 'posters' || view === 'banners' || view === 'overview') &&
-
-                <PageToolbarSeparator />
-            }
+            <PageToolbarSeparator />
 
             <AuthorIndexViewMenu
               view={view}
@@ -367,12 +337,6 @@ class AuthorIndex extends Component {
           onModalClose={this.onPosterOptionsModalClose}
         />
 
-        <AuthorIndexBannerOptionsModal
-          isOpen={isBannerOptionsModalOpen}
-          onModalClose={this.onBannerOptionsModalClose}
-
-        />
-
         <AuthorIndexOverviewOptionsModal
           isOpen={isOverviewOptionsModalOpen}
           onModalClose={this.onOverviewOptionsModalClose}

frontend/src/Author/Index/AuthorIndexFooter.js

@@ -5,6 +5,7 @@ import { ColorImpairedConsumer } from 'App/ColorImpairedContext';
 import DescriptionList from 'Components/DescriptionList/DescriptionList';
 import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
 import formatBytes from 'Utilities/Number/formatBytes';
+import translate from 'Utilities/String/translate';
 import styles from './AuthorIndexFooter.css';
 
 class AuthorIndexFooter extends PureComponent {
@@ -60,7 +61,9 @@ class AuthorIndexFooter extends PureComponent {
                       enableColorImpairedMode && 'colorImpaired'
                     )}
                   />
-                  <div>Continuing (All books downloaded)</div>
+                  <div>
+                    {translate('ContinuingAllBooksDownloaded')}
+                  </div>
                 </div>
 
                 <div className={styles.legendItem}>
@@ -70,7 +73,9 @@ class AuthorIndexFooter extends PureComponent {
                       enableColorImpairedMode && 'colorImpaired'
                     )}
                   />
-                  <div>Ended (All books downloaded)</div>
+                  <div>
+                    {translate('EndedAllBooksDownloaded')}
+                  </div>
                 </div>
 
                 <div className={styles.legendItem}>
@@ -80,7 +85,9 @@ class AuthorIndexFooter extends PureComponent {
                       enableColorImpairedMode && 'colorImpaired'
                     )}
                   />
-                  <div>Missing Books (Author monitored)</div>
+                  <div>
+                    {translate('MissingBooksAuthorMonitored')}
+                  </div>
                 </div>
 
                 <div className={styles.legendItem}>
@@ -90,55 +97,57 @@ class AuthorIndexFooter extends PureComponent {
                       enableColorImpairedMode && 'colorImpaired'
                     )}
                   />
-                  <div>Missing Books (Author not monitored)</div>
+                  <div>
+                    {translate('MissingBooksAuthorNotMonitored')}
+                  </div>
                 </div>
               </div>
 
               <div className={styles.statistics}>
                 <DescriptionList>
                   <DescriptionListItem
-                    title="Authors"
+                    title={translate('Authors')}
                     data={count}
                   />
 
                   <DescriptionListItem
-                    title="Ended"
+                    title={translate('Ended')}
                     data={ended}
                   />
 
                   <DescriptionListItem
-                    title="Continuing"
+                    title={translate('Continuing')}
                     data={continuing}
                   />
                 </DescriptionList>
 
                 <DescriptionList>
                   <DescriptionListItem
-                    title="Monitored"
+                    title={translate('Monitored')}
                     data={monitored}
                   />
 
                   <DescriptionListItem
-                    title="Unmonitored"
+                    title={translate('Unmonitored')}
                     data={count - monitored}
                   />
                 </DescriptionList>
 
                 <DescriptionList>
                   <DescriptionListItem
-                    title="Books"
+                    title={translate('Books')}
                     data={books}
                   />
 
                   <DescriptionListItem
-                    title="Files"
+                    title={translate('Files')}
                     data={bookFiles}
                   />
                 </DescriptionList>
 
                 <DescriptionList>
                   <DescriptionListItem
-                    title="Total File Size"
+                    title={translate('TotalFileSize')}
                     data={formatBytes(totalFileSize)}
                   />
                 </DescriptionList>

frontend/src/Author/Index/Menus/AuthorIndexSortMenu.js

@@ -34,16 +34,16 @@ function AuthorIndexSortMenu(props) {
           sortDirection={sortDirection}
           onPress={onSortSelect}
         >
-          Name
+          First Name
         </SortMenuItem>
 
         <SortMenuItem
-          name="authorType"
+          name="sortNameLastFirst"
           sortKey={sortKey}
           sortDirection={sortDirection}
           onPress={onSortSelect}
         >
-          Type
+          Last Name
         </SortMenuItem>
 
         <SortMenuItem
@@ -101,21 +101,12 @@ function AuthorIndexSortMenu(props) {
         </SortMenuItem>
 
         <SortMenuItem
-          name="trackProgress"
+          name="bookProgress"
           sortKey={sortKey}
           sortDirection={sortDirection}
           onPress={onSortSelect}
         >
-          Books
-        </SortMenuItem>
-
-        <SortMenuItem
-          name="bookCount"
-          sortKey={sortKey}
-          sortDirection={sortDirection}
-          onPress={onSortSelect}
-        >
-          Book Count
+          Books Progress
         </SortMenuItem>
 
         <SortMenuItem

frontend/src/Author/Index/Menus/AuthorIndexViewMenu.js

@@ -34,14 +34,6 @@ function AuthorIndexViewMenu(props) {
           Posters
         </ViewMenuItem>
 
-        <ViewMenuItem
-          name="banners"
-          selectedView={view}
-          onPress={onViewSelect}
-        >
-          Banners
-        </ViewMenuItem>
-
         <ViewMenuItem
           name="overview"
           selectedView={view}

frontend/src/Author/Index/Overview/AuthorIndexOverview.css

@@ -14,11 +14,14 @@ $hoverScale: 1.05;
 }
 
 .poster {
-  position: relative;
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 
 .posterContainer {
   position: relative;
+  overflow: hidden;
 }
 
 .link {

frontend/src/Author/Index/Overview/AuthorIndexOverview.js

@@ -11,6 +11,8 @@ import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
 import { icons } from 'Helpers/Props';
 import dimensions from 'Styles/Variables/dimensions';
 import fonts from 'Styles/Variables/fonts';
+import stripHtml from 'Utilities/String/stripHtml';
+import translate from 'Utilities/String/translate';
 import AuthorIndexOverviewInfo from './AuthorIndexOverviewInfo';
 import styles from './AuthorIndexOverview.css';
 
@@ -72,6 +74,7 @@ class AuthorIndexOverview extends Component {
     const {
       id,
       authorName,
+      authorNameLastFirst,
       overview,
       monitored,
       status,
@@ -123,31 +126,30 @@ class AuthorIndexOverview extends Component {
     return (
       <div className={styles.container}>
         <div className={styles.content}>
-          <div className={styles.poster}>
-            <div className={styles.posterContainer}>
-              {
-                status === 'ended' &&
-                  <div
-                    className={styles.ended}
-                    title="Ended"
-                  />
-              }
-
-              <Link
-                className={styles.link}
-                style={elementStyle}
-                to={link}
-              >
-                <AuthorPoster
-                  className={styles.poster}
-                  style={elementStyle}
-                  images={images}
-                  size={250}
-                  lazy={false}
-                  overflow={true}
+          <div className={styles.posterContainer}>
+            {
+              status === 'ended' &&
+                <div
+                  className={styles.ended}
+                  title={translate('Ended')}
                 />
-              </Link>
-            </div>
+            }
+
+            <Link
+              className={styles.link}
+              style={elementStyle}
+              to={link}
+            >
+              <AuthorPoster
+                className={styles.poster}
+                style={elementStyle}
+                images={images}
+                size={250}
+                lazy={false}
+                overflow={true}
+                blurBackground={true}
+              />
+            </Link>
 
             <AuthorIndexProgressBar
               monitored={monitored}
@@ -166,13 +168,13 @@ class AuthorIndexOverview extends Component {
                 className={styles.title}
                 to={link}
               >
-                {authorName}
+                {overviewOptions.showTitle === 'firstLast' ? authorName : authorNameLastFirst}
               </Link>
 
               <div className={styles.actions}>
                 <SpinnerIconButton
                   name={icons.REFRESH}
-                  title="Refresh Author"
+                  title={translate('RefreshAuthor')}
                   isSpinning={isRefreshingAuthor}
                   onPress={onRefreshAuthorPress}
                 />
@@ -182,7 +184,7 @@ class AuthorIndexOverview extends Component {
                     <SpinnerIconButton
                       className={styles.action}
                       name={icons.SEARCH}
-                      title="Search for monitored books"
+                      title={translate('SearchForMonitoredBooks')}
                       isSpinning={isSearchingAuthor}
                       onPress={onSearchPress}
                     />
@@ -190,7 +192,7 @@ class AuthorIndexOverview extends Component {
 
                 <IconButton
                   name={icons.EDIT}
-                  title="Edit Author"
+                  title={translate('EditAuthor')}
                   onPress={this.onEditAuthorPress}
                 />
               </div>
@@ -204,7 +206,7 @@ class AuthorIndexOverview extends Component {
               >
                 <TextTruncate
                   line={Math.floor(overviewHeight / (defaultFontSize * lineHeight))}
-                  text={overview}
+                  text={stripHtml(overview)}
                 />
               </Link>
 
@@ -246,7 +248,8 @@ class AuthorIndexOverview extends Component {
 AuthorIndexOverview.propTypes = {
   id: PropTypes.number.isRequired,
   authorName: PropTypes.string.isRequired,
-  overview: PropTypes.string.isRequired,
+  authorNameLastFirst: PropTypes.string.isRequired,
+  overview: PropTypes.string,
   monitored: PropTypes.bool.isRequired,
   status: PropTypes.string.isRequired,
   titleSlug: PropTypes.string.isRequired,

frontend/src/Author/Index/Overview/AuthorIndexOverviews.js

@@ -60,7 +60,8 @@ class AuthorIndexOverviews extends Component {
       columnCount: 1,
       posterWidth: 238,
       posterHeight: 238,
-      rowHeight: calculateRowHeight(238, null, props.isSmallScreen, {})
+      rowHeight: calculateRowHeight(238, null, props.isSmallScreen, {}),
+      scrollRestored: false
     };
 
     this._grid = null;
@@ -71,12 +72,14 @@ class AuthorIndexOverviews extends Component {
       items,
       sortKey,
       overviewOptions,
-      jumpToCharacter
+      jumpToCharacter,
+      scrollTop
     } = this.props;
 
     const {
       width,
-      rowHeight
+      rowHeight,
+      scrollRestored
     } = this.state;
 
     if (prevProps.sortKey !== sortKey ||
@@ -87,13 +90,19 @@ class AuthorIndexOverviews extends Component {
     if (this._grid &&
         (prevState.width !== width ||
             prevState.rowHeight !== rowHeight ||
-            hasDifferentItemsOrOrder(prevProps.items, items))) {
+            hasDifferentItemsOrOrder(prevProps.items, items) ||
+            prevProps.overviewOptions.showTitle !== overviewOptions.showTitle)) {
       // recomputeGridSize also forces Grid to discard its cache of rendered cells
       this._grid.recomputeGridSize();
     }
 
+    if (this._grid && scrollTop !== 0 && !scrollRestored) {
+      this.setState({ scrollRestored: true });
+      this._grid.scrollToPosition({ scrollTop });
+    }
+
     if (jumpToCharacter != null && jumpToCharacter !== prevProps.jumpToCharacter) {
-      const index = getIndexOfFirstCharacter(items, jumpToCharacter);
+      const index = getIndexOfFirstCharacter(items, sortKey, jumpToCharacter);
 
       if (this._grid && index != null) {
 
@@ -204,7 +213,6 @@ class AuthorIndexOverviews extends Component {
 
     return (
       <Measure
-        whitelist={['width']}
         onMeasure={this.onMeasure}
       >
         <WindowScroller

frontend/src/Author/Index/Overview/Options/AuthorIndexOverviewOptionsModalContent.js

@@ -11,6 +11,12 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { inputTypes } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+
+const nameOptions = [
+  { key: 'firstLast', value: translate('NameFirstLast') },
+  { key: 'lastFirst', value: translate('NameLastFirst') }
+];
 
 const posterSizeOptions = [
   { key: 'small', value: 'Small' },
@@ -27,6 +33,7 @@ class AuthorIndexOverviewOptionsModalContent extends Component {
     super(props, context);
 
     this.state = {
+      showTitle: props.showTitle,
       detailedProgressBar: props.detailedProgressBar,
       size: props.size,
       showMonitored: props.showMonitored,
@@ -42,6 +49,7 @@ class AuthorIndexOverviewOptionsModalContent extends Component {
 
   componentDidUpdate(prevProps) {
     const {
+      showTitle,
       detailedProgressBar,
       size,
       showMonitored,
@@ -56,6 +64,10 @@ class AuthorIndexOverviewOptionsModalContent extends Component {
 
     const state = {};
 
+    if (showTitle !== prevProps.showTitle) {
+      state.showTitle = showTitle;
+    }
+
     if (detailedProgressBar !== prevProps.detailedProgressBar) {
       state.detailedProgressBar = detailedProgressBar;
     }
@@ -121,6 +133,7 @@ class AuthorIndexOverviewOptionsModalContent extends Component {
     } = this.props;
 
     const {
+      showTitle,
       detailedProgressBar,
       size,
       showMonitored,
@@ -142,7 +155,23 @@ class AuthorIndexOverviewOptionsModalContent extends Component {
         <ModalBody>
           <Form>
             <FormGroup>
-              <FormLabel>Poster Size</FormLabel>
+              <FormLabel>
+                {translate('NameStyle')}
+              </FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.SELECT}
+                name="showTitle"
+                value={showTitle}
+                values={nameOptions}
+                onChange={this.onChangeOverviewOption}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>
+                {translate('PosterSize')}
+              </FormLabel>
 
               <FormInputGroup
                 type={inputTypes.SELECT}
@@ -154,19 +183,23 @@ class AuthorIndexOverviewOptionsModalContent extends Component {
             </FormGroup>
 
             <FormGroup>
-              <FormLabel>Detailed Progress Bar</FormLabel>
+              <FormLabel>
+                {translate('DetailedProgressBar')}
+              </FormLabel>
 
               <FormInputGroup
                 type={inputTypes.CHECK}
                 name="detailedProgressBar"
                 value={detailedProgressBar}
-                helpText="Show text on progess bar"
+                helpText={translate('DetailedProgressBarHelpText')}
                 onChange={this.onChangeOverviewOption}
               />
             </FormGroup>
 
             <FormGroup>
-              <FormLabel>Show Monitored</FormLabel>
+              <FormLabel>
+                {translate('ShowMonitored')}
+              </FormLabel>
 
               <FormInputGroup
                 type={inputTypes.CHECK}
@@ -178,7 +211,9 @@ class AuthorIndexOverviewOptionsModalContent extends Component {
 
             <FormGroup>
 
-              <FormLabel>Show Quality Profile</FormLabel>
+              <FormLabel>
+                {translate('ShowQualityProfile')}
+              </FormLabel>
 
               <FormInputGroup
                 type={inputTypes.CHECK}
@@ -189,7 +224,9 @@ class AuthorIndexOverviewOptionsModalContent extends Component {
             </FormGroup>
 
             <FormGroup>
-              <FormLabel>Show Last Book</FormLabel>
+              <FormLabel>
+                {translate('ShowLastBook')}
+              </FormLabel>
 
               <FormInputGroup
                 type={inputTypes.CHECK}
@@ -200,7 +237,9 @@ class AuthorIndexOverviewOptionsModalContent extends Component {
             </FormGroup>
 
             <FormGroup>
-              <FormLabel>Show Date Added</FormLabel>
+              <FormLabel>
+                {translate('ShowDateAdded')}
+              </FormLabel>
 
               <FormInputGroup
                 type={inputTypes.CHECK}
@@ -211,7 +250,9 @@ class AuthorIndexOverviewOptionsModalContent extends Component {
             </FormGroup>
 
             <FormGroup>
-              <FormLabel>Show Book Count</FormLabel>
+              <FormLabel>
+                {translate('ShowBookCount')}
+              </FormLabel>
 
               <FormInputGroup
                 type={inputTypes.CHECK}
@@ -222,7 +263,9 @@ class AuthorIndexOverviewOptionsModalContent extends Component {
             </FormGroup>
 
             <FormGroup>
-              <FormLabel>Show Path</FormLabel>
+              <FormLabel>
+                {translate('ShowPath')}
+              </FormLabel>
 
               <FormInputGroup
                 type={inputTypes.CHECK}
@@ -233,7 +276,9 @@ class AuthorIndexOverviewOptionsModalContent extends Component {
             </FormGroup>
 
             <FormGroup>
-              <FormLabel>Show Size on Disk</FormLabel>
+              <FormLabel>
+                {translate('ShowSizeOnDisk')}
+              </FormLabel>
 
               <FormInputGroup
                 type={inputTypes.CHECK}
@@ -244,13 +289,15 @@ class AuthorIndexOverviewOptionsModalContent extends Component {
             </FormGroup>
 
             <FormGroup>
-              <FormLabel>Show Search</FormLabel>
+              <FormLabel>
+                {translate('ShowSearch')}
+              </FormLabel>
 
               <FormInputGroup
                 type={inputTypes.CHECK}
                 name="showSearchAction"
                 value={showSearchAction}
-                helpText="Show search button"
+                helpText={translate('ShowSearchActionHelpText')}
                 onChange={this.onChangeOverviewOption}
               />
             </FormGroup>
@@ -270,6 +317,7 @@ class AuthorIndexOverviewOptionsModalContent extends Component {
 }
 
 AuthorIndexOverviewOptionsModalContent.propTypes = {
+  showTitle: PropTypes.string.isRequired,
   size: PropTypes.string.isRequired,
   detailedProgressBar: PropTypes.bool.isRequired,
   showMonitored: PropTypes.bool.isRequired,

frontend/src/Author/Index/Posters/AuthorIndexPoster.css

@@ -17,6 +17,13 @@ $hoverScale: 1.05;
 
 .posterContainer {
   position: relative;
+  overflow: hidden;
+}
+
+.poster {
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 
 .link {

frontend/src/Author/Index/Posters/AuthorIndexPoster.js

@@ -10,6 +10,7 @@ import Link from 'Components/Link/Link';
 import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
 import { icons } from 'Helpers/Props';
 import getRelativeDate from 'Utilities/Date/getRelativeDate';
+import translate from 'Utilities/String/translate';
 import AuthorIndexPosterInfo from './AuthorIndexPosterInfo';
 import styles from './AuthorIndexPoster.css';
 
@@ -69,6 +70,7 @@ class AuthorIndexPoster extends Component {
     const {
       id,
       authorName,
+      authorNameLastFirst,
       monitored,
       titleSlug,
       status,
@@ -122,7 +124,7 @@ class AuthorIndexPoster extends Component {
               <SpinnerIconButton
                 className={styles.action}
                 name={icons.REFRESH}
-                title="Refresh Author"
+                title={translate('RefreshAuthor')}
                 isSpinning={isRefreshingAuthor}
                 onPress={onRefreshAuthorPress}
               />
@@ -132,7 +134,7 @@ class AuthorIndexPoster extends Component {
                   <SpinnerIconButton
                     className={styles.action}
                     name={icons.SEARCH}
-                    title="Search for monitored books"
+                    title={translate('SearchForMonitoredBooks')}
                     isSpinning={isSearchingAuthor}
                     onPress={onSearchPress}
                   />
@@ -141,7 +143,7 @@ class AuthorIndexPoster extends Component {
               <IconButton
                 className={styles.action}
                 name={icons.EDIT}
-                title="Edit Author"
+                title={translate('EditAuthor')}
                 onPress={this.onEditAuthorPress}
               />
             </Label>
@@ -150,7 +152,7 @@ class AuthorIndexPoster extends Component {
               status === 'ended' &&
                 <div
                   className={styles.ended}
-                  title="Ended"
+                  title={translate('Ended')}
                 />
             }
 
@@ -166,6 +168,7 @@ class AuthorIndexPoster extends Component {
                 size={250}
                 lazy={false}
                 overflow={true}
+                blurBackground={true}
                 onError={this.onPosterLoadError}
                 onLoad={this.onPosterLoad}
               />
@@ -191,9 +194,9 @@ class AuthorIndexPoster extends Component {
           />
 
           {
-            showTitle &&
+            showTitle !== 'no' &&
               <div className={styles.title}>
-                {authorName}
+                {showTitle === 'firstLast' ? authorName : authorNameLastFirst}
               </div>
           }
 
@@ -258,6 +261,7 @@ class AuthorIndexPoster extends Component {
 AuthorIndexPoster.propTypes = {
   id: PropTypes.number.isRequired,
   authorName: PropTypes.string.isRequired,
+  authorNameLastFirst: PropTypes.string.isRequired,
   monitored: PropTypes.bool.isRequired,
   status: PropTypes.string.isRequired,
   titleSlug: PropTypes.string.isRequired,
@@ -267,7 +271,7 @@ AuthorIndexPoster.propTypes = {
   posterWidth: PropTypes.number.isRequired,
   posterHeight: PropTypes.number.isRequired,
   detailedProgressBar: PropTypes.bool.isRequired,
-  showTitle: PropTypes.bool.isRequired,
+  showTitle: PropTypes.string.isRequired,
   showMonitored: PropTypes.bool.isRequired,
   showQualityProfile: PropTypes.bool.isRequired,
   qualityProfile: PropTypes.object.isRequired,

frontend/src/Author/Index/Posters/AuthorIndexPosters.js

@@ -50,7 +50,7 @@ function calculateRowHeight(posterHeight, sortKey, isSmallScreen, posterOptions)
     isSmallScreen ? columnPaddingSmallScreen : columnPadding
   ];
 
-  if (showTitle) {
+  if (showTitle !== 'no') {
     heights.push(19);
   }
 
@@ -100,7 +100,8 @@ class AuthorIndexPosters extends Component {
       columnCount: 1,
       posterWidth: 238,
       posterHeight: 238,
-      rowHeight: calculateRowHeight(238, null, props.isSmallScreen, {})
+      rowHeight: calculateRowHeight(238, null, props.isSmallScreen, {}),
+      scrollRestored: false
     };
 
     this._isInitialized = false;
@@ -114,15 +115,16 @@ class AuthorIndexPosters extends Component {
       sortKey,
       posterOptions,
       jumpToCharacter,
-      scrollTop,
-      isSmallScreen
+      isSmallScreen,
+      scrollTop
     } = this.props;
 
     const {
       width,
       columnWidth,
       columnCount,
-      rowHeight
+      rowHeight,
+      scrollRestored
     } = this.state;
 
     if (prevProps.sortKey !== sortKey ||
@@ -135,13 +137,19 @@ class AuthorIndexPosters extends Component {
             prevState.columnWidth !== columnWidth ||
             prevState.columnCount !== columnCount ||
             prevState.rowHeight !== rowHeight ||
-            hasDifferentItemsOrOrder(prevProps.items, items))) {
+            hasDifferentItemsOrOrder(prevProps.items, items)) ||
+            prevProps.posterOptions.showTitle !== posterOptions.showTitle) {
       // recomputeGridSize also forces Grid to discard its cache of rendered cells
       this._grid.recomputeGridSize();
     }
 
+    if (this._grid && scrollTop !== 0 && !scrollRestored) {
+      this.setState({ scrollRestored: true });
+      this._grid.scrollToPosition({ scrollTop });
+    }
+
     if (jumpToCharacter != null && jumpToCharacter !== prevProps.jumpToCharacter) {
-      const index = getIndexOfFirstCharacter(items, jumpToCharacter);
+      const index = getIndexOfFirstCharacter(items, sortKey, jumpToCharacter);
 
       if (this._grid && index != null) {
         const row = Math.floor(index / columnCount);
@@ -152,10 +160,6 @@ class AuthorIndexPosters extends Component {
         });
       }
     }
-
-    if (this._grid && scrollTop !== 0) {
-      this._grid.scrollToPosition({ scrollTop });
-    }
   }
 
   //
@@ -275,7 +279,6 @@ class AuthorIndexPosters extends Component {
 
     return (
       <Measure
-        whitelist={['width']}
         onMeasure={this.onMeasure}
       >
         <WindowScroller

frontend/src/Author/Index/Posters/Options/AuthorIndexPosterOptionsModalContent.js

@@ -11,6 +11,7 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { inputTypes } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 
 const posterSizeOptions = [
   { key: 'small', value: 'Small' },
@@ -18,6 +19,12 @@ const posterSizeOptions = [
   { key: 'large', value: 'Large' }
 ];
 
+const nameOptions = [
+  { key: 'no', value: translate('NoName') },
+  { key: 'firstLast', value: translate('NameFirstLast') },
+  { key: 'lastFirst', value: translate('NameLastFirst') }
+];
+
 class AuthorIndexPosterOptionsModalContent extends Component {
 
   //
@@ -114,7 +121,9 @@ class AuthorIndexPosterOptionsModalContent extends Component {
         <ModalBody>
           <Form>
             <FormGroup>
-              <FormLabel>Poster Size</FormLabel>
+              <FormLabel>
+                {translate('PosterSize')}
+              </FormLabel>
 
               <FormInputGroup
                 type={inputTypes.SELECT}
@@ -126,61 +135,72 @@ class AuthorIndexPosterOptionsModalContent extends Component {
             </FormGroup>
 
             <FormGroup>
-              <FormLabel>Detailed Progress Bar</FormLabel>
+              <FormLabel>
+                {translate('DetailedProgressBar')}
+              </FormLabel>
 
               <FormInputGroup
                 type={inputTypes.CHECK}
                 name="detailedProgressBar"
                 value={detailedProgressBar}
-                helpText="Show text on progess bar"
+                helpText={translate('DetailedProgressBarHelpText')}
                 onChange={this.onChangePosterOption}
               />
             </FormGroup>
 
             <FormGroup>
-              <FormLabel>Show Name</FormLabel>
+              <FormLabel>
+                {translate('ShowName')}
+              </FormLabel>
 
               <FormInputGroup
-                type={inputTypes.CHECK}
+                type={inputTypes.SELECT}
                 name="showTitle"
                 value={showTitle}
-                helpText="Show author name under poster"
+                values={nameOptions}
+                helpText={translate('ShowTitleHelpText')}
                 onChange={this.onChangePosterOption}
               />
             </FormGroup>
 
             <FormGroup>
-              <FormLabel>Show Monitored</FormLabel>
+              <FormLabel>
+                {translate('ShowMonitored')}
+              </FormLabel>
 
               <FormInputGroup
                 type={inputTypes.CHECK}
                 name="showMonitored"
                 value={showMonitored}
-                helpText="Show monitored status under poster"
+                helpText={translate('ShowMonitoredHelpText')}
                 onChange={this.onChangePosterOption}
               />
             </FormGroup>
 
             <FormGroup>
-              <FormLabel>Show Quality Profile</FormLabel>
+              <FormLabel>
+                {translate('ShowQualityProfile')}
+              </FormLabel>
 
               <FormInputGroup
                 type={inputTypes.CHECK}
                 name="showQualityProfile"
                 value={showQualityProfile}
-                helpText="Show quality profile under poster"
+                helpText={translate('ShowQualityProfileHelpText')}
                 onChange={this.onChangePosterOption}
               />
             </FormGroup>
 
             <FormGroup>
-              <FormLabel>Show Search</FormLabel>
+              <FormLabel>
+                {translate('ShowSearch')}
+              </FormLabel>
 
               <FormInputGroup
                 type={inputTypes.CHECK}
                 name="showSearchAction"
                 value={showSearchAction}
-                helpText="Show search button on hover"
+                helpText={translate('ShowSearchActionHelpText')}
                 onChange={this.onChangePosterOption}
               />
             </FormGroup>
@@ -201,7 +221,7 @@ class AuthorIndexPosterOptionsModalContent extends Component {
 
 AuthorIndexPosterOptionsModalContent.propTypes = {
   size: PropTypes.string.isRequired,
-  showTitle: PropTypes.bool.isRequired,
+  showTitle: PropTypes.string.isRequired,
   showMonitored: PropTypes.bool.isRequired,
   showQualityProfile: PropTypes.bool.isRequired,
   detailedProgressBar: PropTypes.bool.isRequired,

frontend/src/Author/Index/ProgressBar/AuthorIndexProgressBar.js

@@ -3,6 +3,7 @@ import React from 'react';
 import ProgressBar from 'Components/ProgressBar';
 import { sizes } from 'Helpers/Props';
 import getProgressBarKind from 'Utilities/Author/getProgressBarKind';
+import translate from 'Utilities/String/translate';
 import styles from './AuthorIndexProgressBar.css';
 
 function AuthorIndexProgressBar(props) {
@@ -28,7 +29,7 @@ function AuthorIndexProgressBar(props) {
       size={detailedProgressBar ? sizes.MEDIUM : sizes.SMALL}
       showText={detailedProgressBar}
       text={text}
-      title={`${bookFileCount} / ${bookCount} (Total: ${totalBookCount})`}
+      title={translate('BookFileCountBookCountTotalTotalBookCountInterp', [bookFileCount, bookCount, totalBookCount])}
       width={posterWidth}
     />
   );

frontend/src/Author/Index/Table/AuthorIndexActionsCell.js

@@ -6,6 +6,7 @@ import IconButton from 'Components/Link/IconButton';
 import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
 import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
 import { icons } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 
 class AuthorIndexActionsCell extends Component {
 
@@ -65,14 +66,14 @@ class AuthorIndexActionsCell extends Component {
       >
         <SpinnerIconButton
           name={icons.REFRESH}
-          title="Refresh Author"
+          title={translate('RefreshAuthor')}
           isSpinning={isRefreshingAuthor}
           onPress={onRefreshAuthorPress}
         />
 
         <IconButton
           name={icons.EDIT}
-          title="Edit Author"
+          title={translate('EditAuthor')}
           onPress={this.onEditAuthorPress}
         />
 

frontend/src/Author/Index/Table/AuthorIndexHeader.css

@@ -18,12 +18,6 @@
   flex-grow: 1;
 }
 
-.authorType {
-  composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';
-
-  flex: 0 0 100px;
-}
-
 .qualityProfileId,
 .metadataProfileId {
   composes: headerCell from '~Components/Table/VirtualTableHeaderCell.css';

frontend/src/Author/Index/Table/AuthorIndexRow.css

@@ -17,12 +17,6 @@
   flex: 4 0 110px;
 }
 
-.authorType {
-  composes: cell;
-
-  flex: 0 0 100px;
-}
-
 .banner {
   flex: 0 0 379px;
 }

frontend/src/Author/Index/Table/AuthorIndexRow.js

@@ -17,6 +17,7 @@ import TagListConnector from 'Components/TagListConnector';
 import { icons } from 'Helpers/Props';
 import getProgressBarKind from 'Utilities/Author/getProgressBarKind';
 import formatBytes from 'Utilities/Number/formatBytes';
+import translate from 'Utilities/String/translate';
 import AuthorStatusCell from './AuthorStatusCell';
 import hasGrowableColumns from './hasGrowableColumns';
 import styles from './AuthorIndexRow.css';
@@ -81,6 +82,7 @@ class AuthorIndexRow extends Component {
       monitored,
       status,
       authorName,
+      authorNameLastFirst,
       titleSlug,
       qualityProfile,
       metadataProfile,
@@ -94,6 +96,7 @@ class AuthorIndexRow extends Component {
       tags,
       images,
       showBanners,
+      showTitle,
       showSearchAction,
       columns,
       isRefreshingAuthor,
@@ -168,14 +171,14 @@ class AuthorIndexRow extends Component {
                         {
                           hasBannerError &&
                             <div className={styles.overlayTitle}>
-                              {authorName}
+                              {showTitle === 'firstLast' ? authorName : authorNameLastFirst}
                             </div>
                         }
                       </Link> :
 
                       <AuthorNameLink
                         titleSlug={titleSlug}
-                        authorName={authorName}
+                        authorName={showTitle === 'firstLast' ? authorName : authorNameLastFirst}
                       />
                   }
                 </VirtualTableRowCell>
@@ -278,7 +281,7 @@ class AuthorIndexRow extends Component {
                     kind={getProgressBarKind(status, monitored, progress)}
                     showText={true}
                     text={`${bookFileCount} / ${bookCount}`}
-                    title={`${bookFileCount} / ${bookCount} (Total: ${totalBookCount})`}
+                    title={translate('BookFileCountBookCountTotalTotalBookCountInterp', [bookFileCount, bookCount, totalBookCount])}
                     width={125}
                   />
                 </VirtualTableRowCell>
@@ -356,7 +359,7 @@ class AuthorIndexRow extends Component {
                 >
                   <SpinnerIconButton
                     name={icons.REFRESH}
-                    title="Refresh Author"
+                    title={translate('RefreshAuthor')}
                     isSpinning={isRefreshingAuthor}
                     onPress={onRefreshAuthorPress}
                   />
@@ -366,7 +369,7 @@ class AuthorIndexRow extends Component {
                       <SpinnerIconButton
                         className={styles.action}
                         name={icons.SEARCH}
-                        title="Search for monitored books"
+                        title={translate('SearchForMonitoredBooks')}
                         isSpinning={isSearchingAuthor}
                         onPress={onSearchPress}
                       />
@@ -374,7 +377,7 @@ class AuthorIndexRow extends Component {
 
                   <IconButton
                     name={icons.EDIT}
-                    title="Edit Author"
+                    title={translate('EditAuthor')}
                     onPress={this.onEditAuthorPress}
                   />
                 </VirtualTableRowCell>
@@ -407,6 +410,7 @@ AuthorIndexRow.propTypes = {
   monitored: PropTypes.bool.isRequired,
   status: PropTypes.string.isRequired,
   authorName: PropTypes.string.isRequired,
+  authorNameLastFirst: PropTypes.string.isRequired,
   titleSlug: PropTypes.string.isRequired,
   qualityProfile: PropTypes.object.isRequired,
   metadataProfile: PropTypes.object.isRequired,
@@ -421,6 +425,7 @@ AuthorIndexRow.propTypes = {
   tags: PropTypes.arrayOf(PropTypes.number).isRequired,
   images: PropTypes.arrayOf(PropTypes.object).isRequired,
   showBanners: PropTypes.bool.isRequired,
+  showTitle: PropTypes.string.isRequired,
   showSearchAction: PropTypes.bool.isRequired,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
   isRefreshingAuthor: PropTypes.bool.isRequired,

frontend/src/Author/Index/Table/AuthorIndexTable.js

@@ -25,12 +25,13 @@ class AuthorIndexTable extends Component {
   componentDidUpdate(prevProps) {
     const {
       items,
+      sortKey,
       jumpToCharacter
     } = this.props;
 
     if (jumpToCharacter != null && jumpToCharacter !== prevProps.jumpToCharacter) {
 
-      const scrollIndex = getIndexOfFirstCharacter(items, jumpToCharacter);
+      const scrollIndex = getIndexOfFirstCharacter(items, sortKey, jumpToCharacter);
 
       if (scrollIndex != null) {
         this.setState({ scrollIndex });
@@ -47,7 +48,8 @@ class AuthorIndexTable extends Component {
     const {
       items,
       columns,
-      showBanners
+      showBanners,
+      showTitle
     } = this.props;
 
     const author = items[rowIndex];
@@ -66,6 +68,7 @@ class AuthorIndexTable extends Component {
           qualityProfileId={author.qualityProfileId}
           metadataProfileId={author.metadataProfileId}
           showBanners={showBanners}
+          showTitle={showTitle}
         />
       </VirtualTableRow>
     );
@@ -83,7 +86,8 @@ class AuthorIndexTable extends Component {
       showBanners,
       isSmallScreen,
       onSortPress,
-      scroller
+      scroller,
+      scrollTop
     } = this.props;
 
     return (
@@ -91,6 +95,7 @@ class AuthorIndexTable extends Component {
         className={styles.tableContainer}
         items={items}
         scrollIndex={this.state.scrollIndex}
+        scrollTop={scrollTop}
         isSmallScreen={isSmallScreen}
         scroller={scroller}
         rowHeight={showBanners ? 70 : 38}
@@ -116,10 +121,12 @@ class AuthorIndexTable extends Component {
 AuthorIndexTable.propTypes = {
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  sortKey: PropTypes.string,
+  sortKey: PropTypes.string.isRequired,
   sortDirection: PropTypes.oneOf(sortDirections.all),
   showBanners: PropTypes.bool.isRequired,
+  showTitle: PropTypes.string.isRequired,
   jumpToCharacter: PropTypes.string,
+  scrollTop: PropTypes.number,
   scroller: PropTypes.instanceOf(Element).isRequired,
   isSmallScreen: PropTypes.bool.isRequired,
   onSortPress: PropTypes.func.isRequired

frontend/src/Author/Index/Table/AuthorIndexTableConnector.js

@@ -12,6 +12,7 @@ function createMapStateToProps() {
       return {
         isSmallScreen: dimensions.isSmallScreen,
         showBanners: tableOptions.showBanners,
+        showTitle: tableOptions.showTitle,
         columns
       };
     }

frontend/src/Author/Index/Table/AuthorIndexTableOptions.js

@@ -4,6 +4,12 @@ import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import { inputTypes } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+
+const nameOptions = [
+  { key: 'firstLast', value: translate('NameFirstLast') },
+  { key: 'lastFirst', value: translate('NameLastFirst') }
+];
 
 class AuthorIndexTableOptions extends Component {
 
@@ -15,23 +21,27 @@ class AuthorIndexTableOptions extends Component {
 
     this.state = {
       showBanners: props.showBanners,
-      showSearchAction: props.showSearchAction
+      showSearchAction: props.showSearchAction,
+      showTitle: props.showTitle
     };
   }
 
   componentDidUpdate(prevProps) {
     const {
       showBanners,
-      showSearchAction
+      showSearchAction,
+      showTitle
     } = this.props;
 
     if (
       showBanners !== prevProps.showBanners ||
-      showSearchAction !== prevProps.showSearchAction
+      showSearchAction !== prevProps.showSearchAction ||
+      showTitle !== prevProps.showTitle
     ) {
       this.setState({
         showBanners,
-        showSearchAction
+        showSearchAction,
+        showTitle
       });
     }
   }
@@ -58,31 +68,50 @@ class AuthorIndexTableOptions extends Component {
   render() {
     const {
       showBanners,
-      showSearchAction
+      showSearchAction,
+      showTitle
     } = this.state;
 
     return (
       <Fragment>
         <FormGroup>
-          <FormLabel>Show Banners</FormLabel>
+          <FormLabel>
+            {translate('NameStyle')}
+          </FormLabel>
 
           <FormInputGroup
-            type={inputTypes.CHECK}
-            name="showBanners"
-            value={showBanners}
-            helpText="Show banners instead of names"
+            type={inputTypes.SELECT}
+            name="showTitle"
+            value={showTitle}
+            values={nameOptions}
             onChange={this.onTableOptionChange}
           />
         </FormGroup>
 
         <FormGroup>
-          <FormLabel>Show Search</FormLabel>
+          <FormLabel>
+            {translate('ShowBanners')}
+          </FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.CHECK}
+            name="showBanners"
+            value={showBanners}
+            helpText={translate('ShowBannersHelpText')}
+            onChange={this.onTableOptionChange}
+          />
+        </FormGroup>
+
+        <FormGroup>
+          <FormLabel>
+            {translate('ShowSearch')}
+          </FormLabel>
 
           <FormInputGroup
             type={inputTypes.CHECK}
             name="showSearchAction"
             value={showSearchAction}
-            helpText="Show search button on hover"
+            helpText={translate('ShowSearchActionHelpText')}
             onChange={this.onTableOptionChange}
           />
         </FormGroup>
@@ -92,6 +121,7 @@ class AuthorIndexTableOptions extends Component {
 }
 
 AuthorIndexTableOptions.propTypes = {
+  showTitle: PropTypes.string.isRequired,
   showBanners: PropTypes.bool.isRequired,
   showSearchAction: PropTypes.bool.isRequired,
   onTableOptionChange: PropTypes.func.isRequired

frontend/src/Author/Index/Table/AuthorStatusCell.js

@@ -3,6 +3,7 @@ import React from 'react';
 import Icon from 'Components/Icon';
 import VirtualTableRowCell from 'Components/Table/Cells/TableRowCell';
 import { icons } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
 import styles from './AuthorStatusCell.css';
 
 function AuthorStatusCell(props) {
@@ -22,13 +23,13 @@ function AuthorStatusCell(props) {
       <Icon
         className={styles.statusIcon}
         name={monitored ? icons.MONITORED : icons.UNMONITORED}
-        title={monitored ? 'Author is monitored' : 'Author is unmonitored'}
+        title={monitored ? translate('MonitoredAuthorIsMonitored') : translate('MonitoredAuthorIsUnmonitored')}
       />
 
       <Icon
         className={styles.statusIcon}
         name={status === 'ended' ? icons.AUTHOR_ENDED : icons.AUTHOR_CONTINUING}
-        title={status === 'ended' ? 'Deceased' : 'Continuing'}
+        title={status === 'ended' ? translate('StatusEndedDeceased') : translate('StatusEndedContinuing')}
       />
     </Component>
   );

frontend/src/Author/MonitoringOptions/MonitoringOptionModalConnector.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 MonitoringOptionsModal from './EditAuthorModal';
+
+const mapDispatchToProps = {
+  clearPendingChanges
+};
+
+class MonitoringOptionsModalConnector extends Component {
+
+  //
+  // Listeners
+
+  onModalClose = () => {
+    this.props.clearPendingChanges({ section: 'authors' });
+    this.props.onModalClose();
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <MonitoringOptionsModal
+        {...this.props}
+        onModalClose={this.onModalClose}
+      />
+    );
+  }
+}
+
+MonitoringOptionsModalConnector.propTypes = {
+  onModalClose: PropTypes.func.isRequired,
+  clearPendingChanges: PropTypes.func.isRequired
+};
+
+export default connect(undefined, mapDispatchToProps)(MonitoringOptionsModalConnector);

frontend/src/Author/MonitoringOptions/MonitoringOptionsModal.js

@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import MonitoringOptionsModalContentConnector from './MonitoringOptionsModalContentConnector';
+
+function MonitoringOptionsModal({ isOpen, onModalClose, ...otherProps }) {
+  return (
+    <Modal
+      isOpen={isOpen}
+      onModalClose={onModalClose}
+    >
+      <MonitoringOptionsModalContentConnector
+        {...otherProps}
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+MonitoringOptionsModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default MonitoringOptionsModal;

frontend/src/Author/MonitoringOptions/MonitoringOptionsModalContent.js

@@ -0,0 +1,142 @@
+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 translate from 'Utilities/String/translate';
+
+const NO_CHANGE = 'noChange';
+
+class MonitoringOptionsModalContent extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      monitor: NO_CHANGE
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      isSaving,
+      saveError
+    } = prevProps;
+
+    if (prevProps.isSaving && !isSaving && !saveError) {
+      this.setState({
+        monitor: NO_CHANGE
+      });
+    }
+  }
+
+  onInputChange = ({ name, value }) => {
+    this.setState({ [name]: value });
+  }
+
+  //
+  // Listeners
+
+  onSavePress = () => {
+    const {
+      onSavePress,
+      isSaving
+    } = this.props;
+    const {
+      monitor
+    } = this.state;
+
+    if (monitor !== NO_CHANGE) {
+      onSavePress({ monitor });
+    }
+
+    if (!isSaving) {
+      this.onModalClose();
+    }
+  }
+
+  onModalClose = () => {
+    this.props.onModalClose();
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      isSaving,
+      onInputChange,
+      onModalClose,
+      ...otherProps
+    } = this.props;
+
+    const {
+      monitor
+    } = this.state;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          {translate('MonitorBook')}
+        </ModalHeader>
+
+        <ModalBody>
+          <Form {...otherProps}>
+            <FormGroup>
+              <FormLabel>{translate('Monitoring')}</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.MONITOR_BOOKS_SELECT}
+                name="monitor"
+                value={monitor}
+                includeNoChange={true}
+                onChange={this.onInputChange}
+              />
+            </FormGroup>
+          </Form>
+        </ModalBody>
+
+        <ModalFooter>
+          <Button
+            onPress={onModalClose}
+          >
+            {translate('Cancel')}
+          </Button>
+
+          <SpinnerButton
+            isSpinning={isSaving}
+            onPress={this.onSavePress}
+          >
+            {translate('Save')}
+          </SpinnerButton>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
+}
+
+MonitoringOptionsModalContent.propTypes = {
+  authorId: PropTypes.number.isRequired,
+  saveError: PropTypes.object,
+  isSaving: PropTypes.bool.isRequired,
+  onInputChange: PropTypes.func.isRequired,
+  onSavePress: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+MonitoringOptionsModalContent.defaultProps = {
+  isSaving: false
+};
+
+export default MonitoringOptionsModalContent;

frontend/src/Author/MonitoringOptions/MonitoringOptionsModalContentConnector.js

@@ -0,0 +1,77 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { updateBookMonitor } from 'Store/Actions/authorActions';
+import MonitoringOptionsModalContent from './MonitoringOptionsModalContent';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.authors,
+    (authorState) => {
+      const {
+        isSaving,
+        saveError
+      } = authorState;
+
+      return {
+        isSaving,
+        saveError
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  dispatchUpdateMonitoringOptions: updateBookMonitor
+};
+
+class MonitoringOptionsModalContentConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevProps.isSaving && !this.props.isSaving && !this.props.saveError) {
+      this.props.onModalClose(true);
+    }
+  }
+
+  //
+  // Listeners
+
+  onInputChange = ({ name, value }) => {
+    this.setState({ name, value });
+  }
+
+  onSavePress = ({ monitor }) => {
+    this.props.dispatchUpdateMonitoringOptions({
+      id: this.props.authorId,
+      monitor
+    });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <MonitoringOptionsModalContent
+        {...this.props}
+        onInputChange={this.onInputChange}
+        onSavePress={this.onSavePress}
+      />
+    );
+  }
+}
+
+MonitoringOptionsModalContentConnector.propTypes = {
+  authorId: PropTypes.number.isRequired,
+  isSaving: PropTypes.bool.isRequired,
+  saveError: PropTypes.object,
+  dispatchUpdateMonitoringOptions: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired,
+  onSavePress: PropTypes.func
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(MonitoringOptionsModalContentConnector);