chore(release): 1.8.0

* feat(lang): translated using Weblate (Spanish)

Currently translated at 96.4% (323 of 335 strings)

feat(lang): translated using Weblate (Spanish)

Currently translated at 100.0% (323 of 323 strings)

feat(lang): translated using Weblate (Spanish)

Currently translated at 100.0% (321 of 321 strings)

Co-authored-by: Hosted Weblate <hosted@weblate.org>
Co-authored-by: K. Herbert <herbert.ka@mailo.com>
Co-authored-by: Shutruk <cokimaya007@gmail.com>
Co-authored-by: sct <sctsnipe@gmail.com>
Translate-URL: https://hosted.weblate.org/projects/overseerr/overseerr-frontend/es/
Translation: Overseerr/Overseerr Frontend

* feat(lang): translated using Weblate (German)

Currently translated at 100.0% (323 of 323 strings)

feat(lang): translated using Weblate (German)

Currently translated at 100.0% (323 of 323 strings)

feat(lang): translated using Weblate (German)

Currently translated at 100.0% (321 of 321 strings)

Co-authored-by: Hosted Weblate <hosted@weblate.org>
Co-authored-by: J. Lavoie <j.lavoie@net-c.ca>
Co-authored-by: K. Herbert <herbert.ka@mailo.com>
Translate-URL: https://hosted.weblate.org/projects/overseerr/overseerr-frontend/de/
Translation: Overseerr/Overseerr Frontend

* feat(lang): translated using Weblate (Dutch)

Currently translated at 100.0% (335 of 335 strings)

feat(lang): translated using Weblate (Dutch)

Currently translated at 95.2% (319 of 335 strings)

feat(lang): translated using Weblate (Dutch)

Currently translated at 95.2% (319 of 335 strings)

feat(lang): translated using Weblate (Dutch)

Currently translated at 98.7% (319 of 323 strings)

Co-authored-by: Hosted Weblate <hosted@weblate.org>
Co-authored-by: Jos Vennik <josvennik@gmail.com>
Co-authored-by: K. Herbert <herbert.ka@mailo.com>
Co-authored-by: sct <sctsnipe@gmail.com>
Translate-URL: https://hosted.weblate.org/projects/overseerr/overseerr-frontend/nl/
Translation: Overseerr/Overseerr Frontend

* feat(lang): translated using Weblate (French)

Currently translated at 100.0% (323 of 323 strings)

feat(lang): translated using Weblate (French)

Currently translated at 100.0% (323 of 323 strings)

feat(lang): translated using Weblate (French)

Currently translated at 100.0% (321 of 321 strings)

Co-authored-by: Hosted Weblate <hosted@weblate.org>
Co-authored-by: J. Lavoie <j.lavoie@net-c.ca>
Co-authored-by: K. Herbert <herbert.ka@mailo.com>
Translate-URL: https://hosted.weblate.org/projects/overseerr/overseerr-frontend/fr/
Translation: Overseerr/Overseerr Frontend

Co-authored-by: K. Herbert <herbert.ka@mailo.com>
Co-authored-by: Shutruk <cokimaya007@gmail.com>
Co-authored-by: sct <sctsnipe@gmail.com>
Co-authored-by: J. Lavoie <j.lavoie@net-c.ca>
Co-authored-by: Jos Vennik <josvennik@gmail.com>

.all-contributorsrc

@@ -0,0 +1,156 @@
+{
+  "files": [
+    "README.md"
+  ],
+  "imageSize": 100,
+  "commit": false,
+  "contributors": [
+    {
+      "login": "sct",
+      "name": "sct",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/234213?v=4",
+      "profile": "https://sct.dev",
+      "contributions": [
+        "code",
+        "design",
+        "ideas"
+      ]
+    },
+    {
+      "login": "azoitos",
+      "name": "Alex Zoitos",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/26529049?v=4",
+      "profile": "https://github.com/azoitos",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "OwsleyJr",
+      "name": "Brandon Cohen",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/8635678?v=4",
+      "profile": "https://github.com/OwsleyJr",
+      "contributions": [
+        "code",
+        "doc"
+      ]
+    },
+    {
+      "login": "Ahreluth",
+      "name": "Ahreluth",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/75682440?v=4",
+      "profile": "https://github.com/Ahreluth",
+      "contributions": [
+        "translation"
+      ]
+    },
+    {
+      "login": "KovalevArtem",
+      "name": "KovalevArtem",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/36500228?v=4",
+      "profile": "https://github.com/KovalevArtem",
+      "contributions": [
+        "translation"
+      ]
+    },
+    {
+      "login": "GiyomuWeb",
+      "name": "GiyomuWeb",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/62489209?v=4",
+      "profile": "https://github.com/GiyomuWeb",
+      "contributions": [
+        "translation"
+      ]
+    },
+    {
+      "login": "angrycuban13",
+      "name": "Angry Cuban",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/39564898?v=4",
+      "profile": "https://github.com/angrycuban13",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "jvennik",
+      "name": "jvennik",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/6672637?v=4",
+      "profile": "https://github.com/jvennik",
+      "contributions": [
+        "translation"
+      ]
+    },
+    {
+      "login": "darknessgp",
+      "name": "darknessgp",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/1521243?v=4",
+      "profile": "https://github.com/darknessgp",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "saltydk",
+      "name": "salty",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/6587950?v=4",
+      "profile": "https://github.com/saltydk",
+      "contributions": [
+        "infra"
+      ]
+    },
+    {
+      "login": "Shutruk",
+      "name": "Shutruk",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/9198633?v=4",
+      "profile": "https://github.com/Shutruk",
+      "contributions": [
+        "translation"
+      ]
+    },
+    {
+      "login": "krystiancharubin",
+      "name": "Krystian Charubin",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/17775600?v=4",
+      "profile": "https://github.com/krystiancharubin",
+      "contributions": [
+        "design"
+      ]
+    },
+    {
+      "login": "kieron",
+      "name": "Kieron Boswell",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/8655212?v=4",
+      "profile": "https://github.com/kieron",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "samwiseg0",
+      "name": "samwiseg0",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/2241731?v=4",
+      "profile": "https://github.com/samwiseg0",
+      "contributions": [
+        "question",
+        "infra"
+      ]
+    },
+    {
+      "login": "ecelebi29",
+      "name": "ecelebi29",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/8337120?v=4",
+      "profile": "https://github.com/ecelebi29",
+      "contributions": [
+        "code",
+        "doc"
+      ]
+    }
+  ],
+  "badgeTemplate": "<a href=\"#contributors-\"><img alt=\"All Contributors\" src=\"https://img.shields.io/badge/all_contributors-<%= contributors.length %>-orange.svg\"/></a>",
+  "contributorsPerLine": 7,
+  "projectName": "overseerr",
+  "projectOwner": "sct",
+  "repoType": "github",
+  "repoHost": "https://github.com",
+  "skipCi": true
+}

.eslintrc.js

@@ -1,8 +1,8 @@
 module.exports = {
   root: true,
-
   parser: '@typescript-eslint/parser', // Specifies the ESLint parser
   extends: [
+    'eslint:recommended',
     'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
     'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
     'plugin:prettier/recommended', // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
@@ -30,6 +30,8 @@ module.exports = {
     '@typescript-eslint/explicit-function-return-type': 'off',
     'prettier/prettier': ['error', { endOfLine: 'auto' }],
     'formatjs/no-offset': 'error',
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': ['error'],
   },
   overrides: [
     {
@@ -52,6 +54,5 @@ module.exports = {
     jest: true,
     es6: true,
   },
-
   reportUnusedDisableDirectives: true,
 };

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,45 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: bug
+assignees: ''
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**What version of Overseerr are you running?**
+Please fill in the version you are currently running.
+
+You can find it under: Settings -> About -> Version
+
+**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.
+
+**Desktop (please complete the following information):**
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,8 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Support via Discord
+    url: https://discord.gg/PkCWJSeCk7
+    about: Chat with users and devs on support and setup related topics.
+  - name: Support via GitHub Discussions
+    url: https://github.com/sct/overseerr/discussions
+    about: Ask questions and discuss with other community members

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,19 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: enhancement
+assignees: ''
+---
+
+**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/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,13 @@
+#### Description
+
+#### Screenshot (if UI related)
+
+#### Todos
+
+- [ ] Sucessfully builds `yarn build`
+- [ ] Translation Keys `yarn i18n:extract`
+- [ ] Database migration created (if required)
+
+#### Issues Fixed or Closed by this PR
+
+- Fixes #XXXX

.github/lock.yml

@@ -0,0 +1,38 @@
+# Configuration for Lock Threads - https://github.com/dessant/lock-threads-app
+
+# Number of days of inactivity before a closed issue or pull request is locked
+daysUntilLock: 365
+
+# Skip issues and pull requests created before a given timestamp. Timestamp must
+# follow ISO 8601 (`YYYY-MM-DD`). Set to `false` to disable
+skipCreatedBefore: false
+
+# Issues and pull requests with these labels will be ignored. Set to `[]` to disable
+exemptLabels:
+  - dependencies
+
+# Label to add before locking, such as `outdated`. Set to `false` to disable
+lockLabel: false
+
+# Comment to post before locking. Set to `false` to disable
+lockComment: >
+  This thread has been automatically locked since there has not been
+  any recent activity after it was closed. Please open a new issue for
+  related bugs.
+
+# Assign `resolved` as the reason for locking. Set to `false` to disable
+setLockReason: true
+# Limit to only `issues` or `pulls`
+# only: issues
+
+# Optionally, specify configuration settings just for `issues` or `pulls`
+# issues:
+#   exemptLabels:
+#     - help-wanted
+#   lockLabel: outdated
+
+# pulls:
+#   daysUntilLock: 30
+
+# Repository to extend settings from
+# _extends: repo

.github/stale.yml

@@ -0,0 +1,18 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 60
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 7
+# Issues with these labels will never be considered stale
+exemptLabels:
+  - pinned
+  - security
+  - dependencies
+# Label to use when marking an issue as stale
+staleLabel: wontfix
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs. Thank you
+  for your contributions.
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: false

.github/workflows/ci.yml

@@ -26,7 +26,7 @@ jobs:
   build_and_push:
     name: Build and push Docker image to Docker Hub
     needs: test
-    if: github.ref == 'refs/heads/develop'
+    if: github.ref == 'refs/heads/develop' && !contains(github.event.head_commit.message, 'skip ci')
     runs-on: ubuntu-latest
     steps:
       - name: checkout
@@ -37,4 +37,5 @@ jobs:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
           repository: sctx/overseerr
+          build_args: COMMIT_TAG=${{ github.sha }}
           tags: develop

.github/workflows/invalid_template.yml

@@ -0,0 +1,19 @@
+name: 'Invalid Template'
+
+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: 'invalid:template-incomplete'
+          issue-comment: >
+            :wave: @{issue-author}, please edit your issue and follow the template provided.
+          close-issue: false
+          lock-issue: true
+          issue-lock-reason: 'resolved'

.github/workflows/release.yml

@@ -20,7 +20,7 @@ jobs:
         run: yarn lint
       - name: build
         run: yarn build
-  semnatic-release:
+  semantic-release:
     name: Tag and release latest version
     needs: test
     runs-on: ubuntu-latest

.github/workflows/support.yml

@@ -0,0 +1,25 @@
+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: '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 use our support channels
+            to get help with Overseerr.
+
+            - [Discord](https://discord.gg/PkCWJSeCk7)
+            - [GitHub Discussions](https://github.com/sct/overseerr/discussions)
+          close-issue: true
+          lock-issue: false
+          issue-lock-reason: 'off-topic'

.vscode/settings.json

@@ -6,7 +6,7 @@
     "typescript",
     "typescriptreact"
   ],
-  "typescript.tsdk": "./app/node_modules/typescript/lib",
+  "typescript.tsdk": "node_modules/typescript/lib",
   "sqltools.connections": [
     {
       "previewLimit": 50,

CHANGELOG.md

@@ -1,3 +1,168 @@
+# [1.8.0](https://github.com/sct/overseerr/compare/v1.7.0...v1.8.0) (2020-12-17)
+
+
+### Features
+
+* **lang:** translations update from Weblate ([#336](https://github.com/sct/overseerr/issues/336)) ([ee84f74](https://github.com/sct/overseerr/commit/ee84f74f8a3558875b41daa539f42d00b949898a))
+
+# [1.7.0](https://github.com/sct/overseerr/compare/v1.6.0...v1.7.0) (2020-12-17)
+
+
+### Bug Fixes
+
+* **email:** do not pass auth object to transport if no auth data present ([d5eb4d8](https://github.com/sct/overseerr/commit/d5eb4d8d438a159266b2de66b6bcdd9440a0c8ef)), closes [#312](https://github.com/sct/overseerr/issues/312)
+* **frontend:** add http/https prefix to hostname fields for plex/radarr/sonarr ([ce0266f](https://github.com/sct/overseerr/commit/ce0266f74ea3979b291ff962271a928682892788)), closes [#357](https://github.com/sct/overseerr/issues/357)
+* **frontend:** clarify that radarr/sonnarr servers must be tested before profiles/folders appear ([fc12ab8](https://github.com/sct/overseerr/commit/fc12ab84d9482eb3a11f117f8cab6fd48a9401cd)), closes [#326](https://github.com/sct/overseerr/issues/326) [#328](https://github.com/sct/overseerr/issues/328)
+* **frontend:** correctly show an unauthorized error when a user fails to login ([18925de](https://github.com/sct/overseerr/commit/18925decafdac518f52a354c594cc378d2529022)), closes [#322](https://github.com/sct/overseerr/issues/322)
+* **frontend:** fix tv shows failing to open when firstAirDate is undefined ([c21fa5b](https://github.com/sct/overseerr/commit/c21fa5b5350abdd8e03c077fde7246fa398e176e)), closes [#347](https://github.com/sct/overseerr/issues/347)
+* **frontend:** make minimum availability required for Radarr servers ([2fe53ec](https://github.com/sct/overseerr/commit/2fe53ec5a8534e75c7d0cef31a8b46065111e0a7)), closes [#345](https://github.com/sct/overseerr/issues/345)
+* **plex-sync:** bundle duplicate ratingKeys to speed up recently added sync ([67146c3](https://github.com/sct/overseerr/commit/67146c33ef7f28d520ba2c50b32673d43f4525c8)), closes [#360](https://github.com/sct/overseerr/issues/360)
+* **sonarr.ts, mediarequest.ts:** add missing seasonFolder option ([#358](https://github.com/sct/overseerr/issues/358)) ([e9c899c](https://github.com/sct/overseerr/commit/e9c899ce419d149dde2ad9a0f7d5a2f2545b3ebf))
+
+
+### Features
+
+* **frontend:** show alert when there are no default radarr/sonarr servers ([0d088e0](https://github.com/sct/overseerr/commit/0d088e085e68d39455fda21d1fd08ebcaef2c06b)), closes [#344](https://github.com/sct/overseerr/issues/344)
+
+# [1.6.0](https://github.com/sct/overseerr/compare/v1.5.0...v1.6.0) (2020-12-16)
+
+
+### Bug Fixes
+
+* **api:** accept the api key to perform actions on the api with X-API-Key header ([33f8831](https://github.com/sct/overseerr/commit/33f8831e880dc7fd3f69d951246cada5c6c0ffe7))
+* **api:** filter out libraries that do not have any metadata agent or are not movie/show ([01c179f](https://github.com/sct/overseerr/commit/01c179f762e686a1e5a3d4dab3a5bea53425b575))
+* **api:** only run recently added sync on enabled libraries ([e08fa35](https://github.com/sct/overseerr/commit/e08fa35548bb8644afa8df3124e6f9cc3a2c8f4a)), closes [#259](https://github.com/sct/overseerr/issues/259)
+* **api:** set plex libraries to disabled if the name changes ([675060b](https://github.com/sct/overseerr/commit/675060bcdf23acbfd4de2900a65f95e74f4966a5)), closes [#324](https://github.com/sct/overseerr/issues/324)
+* **frontend:** adds a tip to plex setup to clarify that syncing runs in the background ([df4ac83](https://github.com/sct/overseerr/commit/df4ac8361f82971ee845f3be217408a9123a0bf3)), closes [#325](https://github.com/sct/overseerr/issues/325)
+* **frontend:** aligned movie and tv details ([#331](https://github.com/sct/overseerr/issues/331)) ([db0a5c4](https://github.com/sct/overseerr/commit/db0a5c44f678e76eee7f5582381016306d1f46a2))
+* **frontend:** close sidebar when clicking outside ([#333](https://github.com/sct/overseerr/issues/333)) ([6d7907e](https://github.com/sct/overseerr/commit/6d7907e844a909993d185759d660632f55aeaa35))
+* spelling mistake on the word 'requested' fixed ([#319](https://github.com/sct/overseerr/issues/319)) ([961d110](https://github.com/sct/overseerr/commit/961d1107208069a6fc820a1ba97ffda7336677cb))
+
+
+### Features
+
+* add version to startup logs ([2948f93](https://github.com/sct/overseerr/commit/2948f9360eb484d1d6c0740a840135ca97e7240a))
+* **frontend:** temporary logs page to clear up confusion about it 404ing ([d9788c4](https://github.com/sct/overseerr/commit/d9788c4aa9f87e2eda3f7e3f1adc985f16039552)), closes [#272](https://github.com/sct/overseerr/issues/272)
+* **lang:** add support for Spanish language ([6cd2049](https://github.com/sct/overseerr/commit/6cd20491d2a0ceb995c4744eeb92a6e2f57a4893))
+* **lang:** Translations update from Weblate ([#291](https://github.com/sct/overseerr/issues/291)) ([fddbb3c](https://github.com/sct/overseerr/commit/fddbb3cdfe3d50b2835c248556139c769dc2b805))
+
+# [1.5.0](https://github.com/sct/overseerr/compare/v1.4.0...v1.5.0) (2020-12-15)
+
+
+### Bug Fixes
+
+* **api:** require package.json directly so typescript doesnt compile it into dist folder ([b9faa64](https://github.com/sct/overseerr/commit/b9faa6486b35aa865019aa8af9d307531054bc1d))
+* **frontend:** add validation for Radarr/Sonarr server name ([b5988f9](https://github.com/sct/overseerr/commit/b5988f9a5ff274e97f208c2726abe76c22c858ee))
+* **frontend:** only show alpha notice to admins ([ff61895](https://github.com/sct/overseerr/commit/ff618956b5d9cf933d867ea979b612c3d8a6f30b))
+* add support for ssl when connecting to plex ([3ba09d0](https://github.com/sct/overseerr/commit/3ba09d07eb0367c41603cd55e7ff41c66fb641c4)), closes [#275](https://github.com/sct/overseerr/issues/275)
+* **services:** improve logging for when Radarr movie already exists ([#285](https://github.com/sct/overseerr/issues/285)) ([f998873](https://github.com/sct/overseerr/commit/f998873fc5669a547901f2733c9c785d744d27ca)), closes [#260](https://github.com/sct/overseerr/issues/260)
+
+
+### Features
+
+* **lang:** add i18n strings for new about page ([900827b](https://github.com/sct/overseerr/commit/900827be97845688e4bea72a8c5d9611a3e9d069))
+* about page initial version ([3f2a04c](https://github.com/sct/overseerr/commit/3f2a04c881bf06b73a952181fa463af84454b0dd))
+
+# [1.4.0](https://github.com/sct/overseerr/compare/v1.3.2...v1.4.0) (2020-12-15)
+
+
+### Bug Fixes
+
+* changing parameter name to use correct 'port' [#276](https://github.com/sct/overseerr/issues/276) ([#277](https://github.com/sct/overseerr/issues/277)) ([6d08b10](https://github.com/sct/overseerr/commit/6d08b108200177ca3068c852e60a0df75ce2232a))
+* **services:** include radarr/sonarr baseUrl when adding media ([78af1a3](https://github.com/sct/overseerr/commit/78af1a3e6d00a5645a05e7bf3cf56a59439b6cc9))
+
+
+### Features
+
+* **lang:** Translations update from Weblate ([#240](https://github.com/sct/overseerr/issues/240)) ([e17c637](https://github.com/sct/overseerr/commit/e17c63748362b6a480693e003ef5eec614dcec43))
+
+## [1.3.2](https://github.com/sct/overseerr/compare/v1.3.1...v1.3.2) (2020-12-14)
+
+
+### Bug Fixes
+
+* **frontend:** convert plex port to a number before posting to the api ([8cb05c4](https://github.com/sct/overseerr/commit/8cb05c413a15a4b74e37ece5e24367d115995b32))
+* **frontend:** converts email smtp port to a number before posting to the api ([2098a2d](https://github.com/sct/overseerr/commit/2098a2d3d2981fd2ae54392aec3ef81327f2858e)), closes [#251](https://github.com/sct/overseerr/issues/251)
+* **frontend:** encode special characters in search input to prevent crashing router ([15013d6](https://github.com/sct/overseerr/commit/15013d6c5dbff15704c7c30d261d68a265e7f2d7)), closes [#252](https://github.com/sct/overseerr/issues/252)
+* **plex sync:** catch errors that occur during processMovie ([edbbccf](https://github.com/sct/overseerr/commit/edbbccf3ae623430294f1a5c3fd2728dbd42e555)), closes [#244](https://github.com/sct/overseerr/issues/244) [#246](https://github.com/sct/overseerr/issues/246) [#250](https://github.com/sct/overseerr/issues/250)
+* **services:** improve logging for adding movies to Radarr ([6c1ee83](https://github.com/sct/overseerr/commit/6c1ee830a183f89bb1fe96a181a7d61684e23b22))
+* **services:** radarr/sonarr will use the correct default server ([0658b79](https://github.com/sct/overseerr/commit/0658b7943e1ab25816db9da34d4c9ea808d9203d))
+
+## [1.3.1](https://github.com/sct/overseerr/compare/v1.3.0...v1.3.1) (2020-12-14)
+
+
+### Bug Fixes
+
+* **frontend:** also convert activeProfileId to a number for radarr/sonarr submissions ([7bf924f](https://github.com/sct/overseerr/commit/7bf924f7e94a0e0834f41b4ec067ed277c652766))
+* **frontend:** also convert ports to numbers when saving radarr/sonarr servers ([c53dc3b](https://github.com/sct/overseerr/commit/c53dc3b15da522c6e6ab76bbc9d15008a8a9fb9d))
+* **frontend:** new radarr/sonarr ports will be converted to a number before posting ([92c9001](https://github.com/sct/overseerr/commit/92c9001c9d1f2cbd272a5897ea1157d2cadbce2d))
+
+# [1.3.0](https://github.com/sct/overseerr/compare/v1.2.0...v1.3.0) (2020-12-14)
+
+
+### Bug Fixes
+
+* **api:** correctly generate clientId on first startup ([5f09e83](https://github.com/sct/overseerr/commit/5f09e83ed870336638d3e9d94fcf55ead928e737))
+
+
+### Features
+
+* **frontend:** add full cast page for movies and series ([051f1b3](https://github.com/sct/overseerr/commit/051f1b3e899bf749e632743e5c8d45a02b621998))
+* **lang:** translated using Weblate (Dutch) ([1ab3a4b](https://github.com/sct/overseerr/commit/1ab3a4b80a081d7e4a201f1290cd270ed5b38ac7))
+* **lang:** translated using Weblate (English) ([0949c9b](https://github.com/sct/overseerr/commit/0949c9b334b3a4b6c342517a157a9e2b7596f2f0))
+* **lang:** translated using Weblate (French) ([f943701](https://github.com/sct/overseerr/commit/f943701e13c7f0de5a711302597858cc898b16e2))
+* **lang:** translated using Weblate (French) ([30d04ce](https://github.com/sct/overseerr/commit/30d04ce35adc21070cce37ab10384154afda191b))
+* **lang:** translated using Weblate (German) ([7bf9add](https://github.com/sct/overseerr/commit/7bf9addd13a707aac23b64ef3f1733e491d40a4e))
+* **lang:** translated using Weblate (German) ([b6e60a4](https://github.com/sct/overseerr/commit/b6e60a412b30907aea751a4cf1ce0cc8230f9814))
+* **lang:** translated using Weblate (Japanese) ([08e968f](https://github.com/sct/overseerr/commit/08e968fd0097ec7b2a65de064ed5b07e7c49ef39))
+* **lang:** translated using Weblate (Norwegian Bokmål) ([83efb0e](https://github.com/sct/overseerr/commit/83efb0e3d4d96b6a2d2ebdd85d36c9d78c1717b2))
+* **lang:** translated using Weblate (Russian) ([0d8e0d0](https://github.com/sct/overseerr/commit/0d8e0d0352f72fdb65ee8f054371eae08c39fe33))
+
+# [1.2.0](https://github.com/sct/overseerr/compare/v1.1.0...v1.2.0) (2020-12-11)
+
+
+### Bug Fixes
+
+* **frontend:** person cards now show correctly in ListView's ([ccb9855](https://github.com/sct/overseerr/commit/ccb98553f104c1aebd33796b7090cc9bbe964bd7))
+* **frontend:** properly remove site overlay when closing modals ([3fa7ff9](https://github.com/sct/overseerr/commit/3fa7ff9858d14d132151f3329164d55d74638f53))
+* **frontend:** switch to using Transition component for modals ([b16fbaf](https://github.com/sct/overseerr/commit/b16fbafa1f3d5e105c0a4ba6f1d66aa064019636)), closes [#220](https://github.com/sct/overseerr/issues/220)
+* fix missing personid in Discover ([d8060af](https://github.com/sct/overseerr/commit/d8060afe02574337f51b88cab0a0f824976ac721))
+* missing personId in ListView component ([6502feb](https://github.com/sct/overseerr/commit/6502feb1a5be3c6daab33230814fe74632c87f7e))
+* **frontend:** update overflow issues with seasons + email ([#217](https://github.com/sct/overseerr/issues/217)) ([2d0afb2](https://github.com/sct/overseerr/commit/2d0afb29d37798a626e3f182571ccce43d80063c)), closes [#216](https://github.com/sct/overseerr/issues/216)
+* **lang:** fix missing i18n string for agent enabled in email notification page ([42788ad](https://github.com/sct/overseerr/commit/42788adb75f7d23e68327688b1c542dd047e9609))
+
+
+### Features
+
+* **lang:** update language files ([8cd067b](https://github.com/sct/overseerr/commit/8cd067b6e9df1a3c8f4056789436a31177703986))
+* person details page ([d6eb3ae](https://github.com/sct/overseerr/commit/d6eb3ae64ef46bd62145010d3029e272676487c3))
+* **lang:** add nb-NO and de language support to app ([d38b28d](https://github.com/sct/overseerr/commit/d38b28d2061b38366989ff412957a5dee5766c6f))
+* **lang:** add support for dutch language ([df94db0](https://github.com/sct/overseerr/commit/df94db050bf68a925118e0ce865d27178b702f9e))
+* **lang:** add support for russian languge ([8d8e750](https://github.com/sct/overseerr/commit/8d8e7509826514eebc859374d2e1ab212cc442d1))
+* **lang:** added translation using Weblate (Russian) ([887f5dd](https://github.com/sct/overseerr/commit/887f5dd487b61676029652d99cbc5b40213aa22e))
+* **lang:** translated using Weblate (French) ([30a8934](https://github.com/sct/overseerr/commit/30a8934626fa2d47e95b5925d7e4227a0d0aa728))
+* **lang:** translated using Weblate (German) ([44dbb74](https://github.com/sct/overseerr/commit/44dbb745b6216ce19fab4740520785c6414cf367))
+* **lang:** translated using Weblate (Japanese) ([a494507](https://github.com/sct/overseerr/commit/a494507dfeafb0cfd2bd66fb01138522e0e80737))
+* **lang:** translated using Weblate (Russian) ([86cadb8](https://github.com/sct/overseerr/commit/86cadb8283fcab8745b4c09f8429fd9e46708813))
+* **lang:** translations update from Weblate ([#201](https://github.com/sct/overseerr/issues/201)) ([b0c663b](https://github.com/sct/overseerr/commit/b0c663baccd994e234b4d41d86486c3af4906344))
+
+# [1.1.0](https://github.com/sct/overseerr/compare/v1.0.0...v1.1.0) (2020-12-08)
+
+
+### Bug Fixes
+
+* fix a few misc unused imports and useless assignments/conditionals ([8e6daf7](https://github.com/sct/overseerr/commit/8e6daf7bd271ce5bebf4a00f5bb1144bd6b60aa5))
+* **frontend:** dont show delete button in request list for users without correct permission ([83fde46](https://github.com/sct/overseerr/commit/83fde46a59c6f1910806a6106b5526b8adbc386c))
+* **frontend:** push updated i18n locale files ([b4002d7](https://github.com/sct/overseerr/commit/b4002d71323a04e7991198cedc263660e872df8d))
+
+
+### Features
+
+* generate real api key ([a839370](https://github.com/sct/overseerr/commit/a8393707fec85a9262af5ba8c03d205190b2235b))
+* **frontend:** add i18n strings for request list and request item ([6c4022f](https://github.com/sct/overseerr/commit/6c4022fb236583ad20d4c4c6693c1339e165b4af))
+* **frontend:** initial version of the requests page (no filtering/sorting) ([1ba027b](https://github.com/sct/overseerr/commit/1ba027b4357e078c3f177d9d07208049f0c1ce65))
+* **frontend:** only load request/tmdb cards when in the browser view ([2d51efd](https://github.com/sct/overseerr/commit/2d51efd71612ec969b83c62d6aa0dac6df9391a3))
+
 # 1.0.0 (2020-12-06)
 
 

CODE_OF_CONDUCT.md

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

CONTRIBUTING.md

@@ -0,0 +1,49 @@
+# Contributing to Overseerr
+
+All help is welcome and greatly appreciated. If you would like to contribute to the project the steps below can get you started:
+
+## Development
+
+### Tools Required
+
+- HTML/Typescript/Javascript editor of choice. ([VSCode](https://code.visualstudio.com/) is recommended. Upon opening the project, a few extensions will be automatically recommended for install.)
+- [NodeJS](https://nodejs.org/en/download/) (Node 12.x.x or higher)
+- [Yarn](https://yarnpkg.com/)
+- [Git](https://git-scm.com/downloads)
+
+### Getting Started
+
+1. [Fork](https://help.github.com/articles/fork-a-repo/) the repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device.
+2. Create a new branch `git checkout -b BRANCH_NAME`
+
+- Its recommended to name the branch something relevant to the feature or fix you are working on.
+- An example of this would be `fix-title-cards` or `feature-new-system`.
+- Bad examples would be `patch` or `bug`.
+
+3. Install dependencies `yarn`
+4. `yarn dev` to build and watch for changes
+
+You can also run the development environment in [Docker](https://www.docker.com/) with `docker-compose up -d`. This method does not require installing NodeJS or Yarn on your machine directly.
+
+### Contributing Code
+
+- If you are taking on an existing bug or feature ticket, please comment on the [GitHub Issue](https://github.com/sct/overseerr/issues) to avoid multiple people working on the same thing.
+- All commits **must** follow [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/)
+  - It is okay if you squash your PR down to be a single commit that fits this standard.
+  - PRs with commits not following this standard will not be merged.
+- Please make meaningful commits, or squash them
+- Always rebase your commit to the latest `develop` branch. Do not merge develop into your branch.
+- It is your responsibility to keep your branch up to date. It will not be merged unless its rebased off the latest develop branch.
+- You can create a Draft pull request early to get feedback on your work.
+- Your code must be formatted correctly or the tests will fail.
+  - We use Prettier to format our codebase. It should auto run with a git hook, but its recommended to have a Prettier extension installed in your editor and have it format on save.
+- If you have questions or need help, you can reach out in [GitHub Discussions](https://github.com/sct/overseerr/discussions) or in our [Discord](https://discord.gg/PkCWJSeCk7).
+- Only open pull requests to `develop`. Never `master`. Any PR's opened to master will be closed.
+
+## Translation
+
+We use [Weblate](https://hosted.weblate.org/engage/overseerr/) for our translations so please feel free to contribute to localizing Overseerr!
+
+## Attribution
+
+This contribution guide was inspired by the [Next.js](https://github.com/vercel/next.js) and [Radarr](https://github.com/Radarr/Radarr) contribution guides.

Dockerfile

@@ -12,6 +12,9 @@ RUN yarn cache clean
 
 FROM node:12.18-alpine
 
+ARG COMMIT_TAG
+ENV COMMIT_TAG=${COMMIT_TAG}
+
 COPY . /app
 WORKDIR /app
 
@@ -21,3 +24,5 @@ COPY --from=BUILD_IMAGE /app/.next ./.next
 COPY --from=BUILD_IMAGE /app/node_modules ./node_modules
 
 CMD yarn start
+
+EXPOSE 3000

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 sct
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -2,34 +2,125 @@
 <img src="https://i.imgur.com/TMoEG7g.png" alt="Overseerr">
 </p>
 <p align="center">
+<img src="https://github.com/sct/overseerr/workflows/Overseerr%20Release/badge.svg?branch=master" alt="Overseerr Release" />
 <img src="https://github.com/sct/overseerr/workflows/Overseerr%20CI/badge.svg" alt="Overseerr CI">
 </p>
+<p align="center">
+<a href="https://discord.gg/PkCWJSeCk7">
+<img src="https://img.shields.io/discord/783137440809746482" alt="Discord">
+</a>
+<img src="https://img.shields.io/docker/pulls/sctx/overseerr" alt="Docker pulls">
+<a href="https://hosted.weblate.org/engage/overseerr/">
+<img src="https://hosted.weblate.org/widgets/overseerr/-/overseerr-frontend/svg-badge.svg" alt="Translation status" />
+</a>
+<a href="https://lgtm.com/projects/g/sct/overseerr/context:javascript"><img alt="Language grade: JavaScript" src="https://img.shields.io/lgtm/grade/javascript/g/sct/overseerr.svg?logo=lgtm&logoWidth=18"/></a>
+<img alt="GitHub" src="https://img.shields.io/github/license/sct/overseerr">
+<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+<a href="#contributors-"><img alt="All Contributors" src="https://img.shields.io/badge/all_contributors-15-orange.svg"/></a>
+<!-- ALL-CONTRIBUTORS-BADGE:END -->
+</p>
 
-**Overseerr** is a tool for managing requests for your media library. It integrates with existing services such as **Sonarr** and **Radarr**!
+**Overseerr** is a free and open source software application for managing requests for your media library. It integrates with your existing services such as **Sonarr**, **Radarr** and **Plex**!
 
 ## Current Features
 
 - Full Plex integration. Login and manage user access with Plex!
-- Integrates easily with your existing services. Currently Overseerr supports Sonarr and Radarr. More in the future!
-- Syncs to your Plex library to know what titles you already have
-- Complex request system that allows users to request individual seasons or movies in a friendly, easy to use UI
-- Incredibly simple request management UI. Don't dig through the app to simply approve recent requests
+- Integrates easily with your existing services. Currently Overseerr supports Sonarr and Radarr. More to come!
+- Syncs to your Plex library to know what titles you already have.
+- Complex request system allowing users to request individual seasons or movies in a friendly, easy to use UI.
+- Incredibly simple request management UI. Don't dig through the app to simply approve recent requests.
+- Granular permission system
 - Mobile friendly design, for when you need to approve requests on the go!
 
 ## In Development
 
-- A lot!
+- User profiles.
+- User settings page (to give users the ability to modify their Overseerr experience to their liking).
+- Version update notifications in-app.
+- 4K requests (Includes multi-radarr/sonarr management for media)
+
+## Planned Features
+
+- More notification types (Slack/Telegram/etc.).
+- Issues system. This will allow users to report issues with content on your media server.
+- Local user system (for those who don't use Plex).
+- Compatibility APIs (to work with existing tools in your system).
+
+## Running Overseerr
+
+Currently, Overseerr is only distributed through Docker images. If you have Docker, you can run Overseerr as per:
+
+```
+docker run -d \
+  -e LOG_LEVEL=info \
+  -e TZ=Asia/Tokyo \
+  -p 5055:3000 \
+  -v /path/to/appdata/config:/app/config \
+  --restart unless-stopped \
+  sctx/overseerr
+```
+
+After running Overseerr for the first time, configure it by visiting the web UI at http://[address]:5055 and completing the setup steps.
+
+⚠️ Overseerr is currently under very heavy, rapid development and things are likely to break often. We need all the help we can get to find bugs and get them fixed to hit a more stable release. If you would like to help test the bleeding edge, please use the image **sctx/overseerr:develop** instead! ⚠️
+
+## Preview
+
+<img src="https://i.imgur.com/Mjbyruv.png">
+
+## Support
+
+- You can get support on [Discord](https://discord.gg/PkCWJSeCk7).
+- You can ask questions in the Help category of our [GitHub Discussions](https://github.com/sct/overseerr/discussions).
+- Bugs/Feature Requests can be opened via a [GitHub issue](https://github.com/sct/overseerr/issues).
 
 ## API Documentation
 
-- Coming soon
+Full API documentation will soon be published automatically and available outside of running the app. Currently, you can access the API docs by running Overseerr locally and visiting http://localhost:3000/api-docs
 
-## Contribution
+## Community
 
-You can develop Overseer entirely in docker. Make sure you have [Docker Desktop](https://www.docker.com/products/docker-desktop) installed before continuing.
+You can ask questions, share ideas, and more in [GitHub Discussions](https://github.com/sct/overseerr/discussions).
 
-1. Make sure you have [Docker Desktop](https://www.docker.com/products/docker-desktop) installed.
-2. Run `docker-compose up -d` to start the server
-3. Access the container at http://localhost:3000
+If you would like to chat with community members you can join the [Overseerr Discord](https://discord.gg/PkCWJSeCk7).
 
-That's it!
+Our [Code of Conduct](https://github.com/sct/overseerr/blob/develop/CODE_OF_CONDUCT.md) applies to all Overseerr community channels.
+
+## Contributing
+
+You can help build Overseerr too! Check out our [Contribution Guide](https://github.com/sct/overseerr/blob/develop/CONTRIBUTING.md) to get started.
+
+## Contributors ✨
+
+Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tr>
+    <td align="center"><a href="https://sct.dev"><img src="https://avatars1.githubusercontent.com/u/234213?v=4" width="100px;" alt=""/><br /><sub><b>sct</b></sub></a><br /><a href="https://github.com/sct/overseerr/commits?author=sct" title="Code">💻</a> <a href="#design-sct" title="Design">🎨</a> <a href="#ideas-sct" title="Ideas, Planning, & Feedback">🤔</a></td>
+    <td align="center"><a href="https://github.com/azoitos"><img src="https://avatars2.githubusercontent.com/u/26529049?v=4" width="100px;" alt=""/><br /><sub><b>Alex Zoitos</b></sub></a><br /><a href="https://github.com/sct/overseerr/commits?author=azoitos" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/OwsleyJr"><img src="https://avatars3.githubusercontent.com/u/8635678?v=4" width="100px;" alt=""/><br /><sub><b>Brandon Cohen</b></sub></a><br /><a href="https://github.com/sct/overseerr/commits?author=OwsleyJr" title="Code">💻</a> <a href="https://github.com/sct/overseerr/commits?author=OwsleyJr" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/Ahreluth"><img src="https://avatars2.githubusercontent.com/u/75682440?v=4" width="100px;" alt=""/><br /><sub><b>Ahreluth</b></sub></a><br /><a href="#translation-Ahreluth" title="Translation">🌍</a></td>
+    <td align="center"><a href="https://github.com/KovalevArtem"><img src="https://avatars0.githubusercontent.com/u/36500228?v=4" width="100px;" alt=""/><br /><sub><b>KovalevArtem</b></sub></a><br /><a href="#translation-KovalevArtem" title="Translation">🌍</a></td>
+    <td align="center"><a href="https://github.com/GiyomuWeb"><img src="https://avatars0.githubusercontent.com/u/62489209?v=4" width="100px;" alt=""/><br /><sub><b>GiyomuWeb</b></sub></a><br /><a href="#translation-GiyomuWeb" title="Translation">🌍</a></td>
+    <td align="center"><a href="https://github.com/angrycuban13"><img src="https://avatars3.githubusercontent.com/u/39564898?v=4" width="100px;" alt=""/><br /><sub><b>Angry Cuban</b></sub></a><br /><a href="https://github.com/sct/overseerr/commits?author=angrycuban13" title="Documentation">📖</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/jvennik"><img src="https://avatars3.githubusercontent.com/u/6672637?v=4" width="100px;" alt=""/><br /><sub><b>jvennik</b></sub></a><br /><a href="#translation-jvennik" title="Translation">🌍</a></td>
+    <td align="center"><a href="https://github.com/darknessgp"><img src="https://avatars0.githubusercontent.com/u/1521243?v=4" width="100px;" alt=""/><br /><sub><b>darknessgp</b></sub></a><br /><a href="https://github.com/sct/overseerr/commits?author=darknessgp" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/saltydk"><img src="https://avatars1.githubusercontent.com/u/6587950?v=4" width="100px;" alt=""/><br /><sub><b>salty</b></sub></a><br /><a href="#infra-saltydk" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
+    <td align="center"><a href="https://github.com/Shutruk"><img src="https://avatars2.githubusercontent.com/u/9198633?v=4" width="100px;" alt=""/><br /><sub><b>Shutruk</b></sub></a><br /><a href="#translation-Shutruk" title="Translation">🌍</a></td>
+    <td align="center"><a href="https://github.com/krystiancharubin"><img src="https://avatars2.githubusercontent.com/u/17775600?v=4" width="100px;" alt=""/><br /><sub><b>Krystian Charubin</b></sub></a><br /><a href="#design-krystiancharubin" title="Design">🎨</a></td>
+    <td align="center"><a href="https://github.com/kieron"><img src="https://avatars2.githubusercontent.com/u/8655212?v=4" width="100px;" alt=""/><br /><sub><b>Kieron Boswell</b></sub></a><br /><a href="https://github.com/sct/overseerr/commits?author=kieron" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/samwiseg0"><img src="https://avatars1.githubusercontent.com/u/2241731?v=4" width="100px;" alt=""/><br /><sub><b>samwiseg0</b></sub></a><br /><a href="#question-samwiseg0" title="Answering Questions">💬</a> <a href="#infra-samwiseg0" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/ecelebi29"><img src="https://avatars2.githubusercontent.com/u/8337120?v=4" width="100px;" alt=""/><br /><sub><b>ecelebi29</b></sub></a><br /><a href="https://github.com/sct/overseerr/commits?author=ecelebi29" title="Code">💻</a> <a href="https://github.com/sct/overseerr/commits?author=ecelebi29" title="Documentation">📖</a></td>
+  </tr>
+</table>
+
+<!-- markdownlint-enable -->
+<!-- prettier-ignore-end -->
+<!-- ALL-CONTRIBUTORS-LIST:END -->

ormconfig.js

@@ -5,6 +5,7 @@ const devConfig = {
   logging: false,
   entities: ['server/entity/**/*.ts'],
   migrations: ['server/migration/**/*.ts'],
+  subscribers: ['server/subscriber/**/*.ts'],
   cli: {
     entitiesDir: 'server/entity',
     migrationsDir: 'server/migration',
@@ -19,6 +20,7 @@ const prodConfig = {
   entities: ['dist/entity/**/*.js'],
   migrations: ['dist/migration/**/*.js'],
   migrationsRun: true,
+  subscribers: ['dist/subscriber/**/*.js'],
   cli: {
     entitiesDir: 'dist/entity',
     migrationsDir: 'dist/migration',

overseerr-api.yml

@@ -375,6 +375,7 @@ components:
           example: 1
         logoPath:
           type: string
+          nullable: true
         originCountry:
           type: string
         name:
@@ -428,7 +429,8 @@ components:
         releaseDate:
           type: string
         revenue:
-          type: string
+          type: number
+          nullable: true
         runtime:
           type: number
         spokenLanguages:
@@ -476,6 +478,7 @@ components:
           type: string
         airDate:
           type: string
+          nullable: true
         episodeNumber:
           type: number
         overview:
@@ -483,11 +486,12 @@ components:
         productionCode:
           type: string
         seasonNumber:
-          type: string
+          type: number
         showId:
           type: number
         stillPath:
           type: string
+          nullable: true
         voteAverage:
           type: number
         voteCount:
@@ -499,6 +503,7 @@ components:
           type: number
         airDate:
           type: string
+          nullable: true
         episodeCount:
           type: number
         name:
@@ -536,6 +541,7 @@ components:
                 type: number
               profilePath:
                 type: string
+                nullable: true
         episodeRunTime:
           type: array
           items:
@@ -637,7 +643,6 @@ components:
           readOnly: true
         requestedBy:
           $ref: '#/components/schemas/User'
-          readOnly: true
         modifiedBy:
           anyOf:
             - $ref: '#/components/schemas/User'
@@ -658,6 +663,7 @@ components:
         tvdbId:
           type: number
           readOnly: true
+          nullable: true
         status:
           type: number
         requests:
@@ -696,6 +702,7 @@ components:
           type: number
         profilePath:
           type: string
+          nullable: true
     Crew:
       type: object
       properties:
@@ -715,25 +722,34 @@ components:
           type: string
         profilePath:
           type: string
+          nullable: true
     ExternalIds:
       type: object
       properties:
         facebookId:
           type: string
+          nullable: true
         freebaseId:
           type: string
+          nullable: true
         freebaseMid:
           type: string
+          nullable: true
         imdbId:
           type: string
+          nullable: true
         instagramId:
           type: string
+          nullable: true
         tvdbId:
-          type: string
+          type: number
+          nullable: true
         tvrageId:
-          type: string
+          type: number
+          nullable: true
         twitterId:
           type: string
+          nullable: true
     ServiceProfile:
       type: object
       properties:
@@ -887,6 +903,8 @@ components:
           type: string
         character:
           type: string
+        mediaInfo:
+          $ref: '#/components/schemas/MediaInfo'
     CreditCrew:
       type: object
       properties:
@@ -941,11 +959,17 @@ components:
           type: string
         job:
           type: string
+        mediaInfo:
+          $ref: '#/components/schemas/MediaInfo'
   securitySchemes:
     cookieAuth:
       type: apiKey
       name: connect.sid
       in: cookie
+    apiKey:
+      type: apiKey
+      in: header
+      name: X-Api-Key
 
 paths:
   /settings/main:
@@ -1457,6 +1481,29 @@ paths:
             application/json:
               schema:
                 $ref: '#/components/schemas/DiscordSettings'
+  /settings/about:
+    get:
+      summary: Return current about stats
+      description: Returns current server stats in JSON format
+      tags:
+        - settings
+      responses:
+        '200':
+          description: Returned about settings
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  version:
+                    type: string
+                    example: '1.0.0'
+                  totalRequests:
+                    type: number
+                    example: 100
+                  totalMediaItems:
+                    type: number
+                    example: 100
   /auth/me:
     get:
       summary: Returns the currently logged in user
@@ -2374,7 +2421,7 @@ paths:
                   crew:
                     type: array
                     items:
-                      $ref: "#/components/schemas/CreditCrew"
+                      $ref: '#/components/schemas/CreditCrew'
                   id:
                     type: number
   /media:
@@ -2442,3 +2489,4 @@ paths:
 
 security:
   - cookieAuth: []
+  - apiKey: []

package.json

@@ -1,6 +1,6 @@
 {
   "name": "overseerr",
-  "version": "1.0.0",
+  "version": "1.8.0",
   "private": true,
   "scripts": {
     "dev": "nodemon -e ts --watch server --watch overseerr-api.yml -e .json,.ts,.yml -x ts-node --files --project server/tsconfig.json server/index.ts",
@@ -9,51 +9,54 @@
     "build": "yarn build:next && yarn build:server",
     "lint": "eslint \"./server/**/*.{ts,tsx}\" \"./src/**/*.{ts,tsx}\"",
     "start": "NODE_ENV=production node dist/index.js",
-    "i18n:extract": "extract-messages -l=en,ja,fr -o src/i18n/locale -d en --flat true './src/**/!(*.test).{ts,tsx}'",
+    "i18n:extract": "extract-messages -l=en -o src/i18n/locale -d en --flat true --overwriteDefault false './src/**/!(*.test).{ts,tsx}'",
     "migration:generate": "ts-node --project server/tsconfig.json ./node_modules/.bin/typeorm migration:generate",
+    "migration:create": "ts-node --project server/tsconfig.json ./node_modules/.bin/typeorm migration:create",
     "migration:run": "ts-node --project server/tsconfig.json ./node_modules/.bin/typeorm migration:run",
     "format": "prettier --write ."
   },
+  "license": "MIT",
   "dependencies": {
-    "@svgr/webpack": "^5.4.0",
-    "axios": "^0.20.0",
+    "@svgr/webpack": "^5.5.0",
+    "axios": "^0.21.0",
     "body-parser": "^1.19.0",
     "bowser": "^2.11.0",
     "connect-typeorm": "^1.1.4",
     "cookie-parser": "^1.4.5",
-    "email-templates": "^8.0.0",
+    "email-templates": "^8.0.2",
     "express": "^4.17.1",
-    "express-openapi-validator": "^3.16.15",
+    "express-openapi-validator": "^4.8.0",
     "express-session": "^1.17.1",
-    "formik": "^2.2.1",
+    "formik": "^2.2.5",
     "intl": "^1.2.5",
     "lodash": "^4.17.20",
     "next": "^10.0.3",
     "node-schedule": "^1.3.2",
     "nodemailer": "^6.4.16",
-    "nookies": "^2.4.0",
+    "nookies": "^2.5.0",
     "plex-api": "^5.3.1",
     "pug": "^3.0.0",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "react-intl": "^5.8.5",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "react-intersection-observer": "^8.31.0",
+    "react-intl": "^5.10.6",
     "react-spring": "^8.0.27",
     "react-toast-notifications": "^2.4.0",
     "react-transition-group": "^4.4.1",
-    "react-use-clipboard": "1.0.1",
+    "react-use-clipboard": "1.0.2",
     "reflect-metadata": "^0.1.13",
     "sqlite3": "^5.0.0",
-    "swagger-ui-express": "^4.1.4",
-    "swr": "^0.3.5",
-    "typeorm": "^0.2.26",
-    "uuid": "^8.3.0",
+    "swagger-ui-express": "^4.1.5",
+    "swr": "^0.3.9",
+    "typeorm": "^0.2.29",
+    "uuid": "^8.3.2",
     "winston": "^3.3.3",
     "xml2js": "^0.4.23",
     "yamljs": "^0.3.0",
-    "yup": "^0.29.3"
+    "yup": "^0.32.8"
   },
   "devDependencies": {
-    "@babel/cli": "^7.11.6",
+    "@babel/cli": "^7.12.8",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
     "@semantic-release/changelog": "^5.0.1",
@@ -66,48 +69,48 @@
     "@types/body-parser": "^1.19.0",
     "@types/cookie-parser": "^1.4.2",
     "@types/email-templates": "^7.1.0",
-    "@types/express": "^4.17.8",
+    "@types/express": "^4.17.9",
     "@types/express-session": "^1.17.0",
-    "@types/lodash": "^4.14.161",
-    "@types/node": "^14.10.0",
+    "@types/lodash": "^4.14.165",
+    "@types/node": "^14.14.11",
     "@types/node-schedule": "^1.3.1",
     "@types/nodemailer": "^6.4.0",
-    "@types/react": "^16.9.49",
-    "@types/react-dom": "^16.9.8",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
     "@types/react-toast-notifications": "^2.4.0",
     "@types/react-transition-group": "^4.4.0",
     "@types/swagger-ui-express": "^4.1.2",
     "@types/uuid": "^8.3.0",
-    "@types/xml2js": "^0.4.5",
+    "@types/xml2js": "^0.4.7",
     "@types/yamljs": "^0.2.31",
-    "@types/yup": "^0.29.9",
-    "@typescript-eslint/eslint-plugin": "^4.0.0",
-    "@typescript-eslint/parser": "^3.10.1",
+    "@types/yup": "^0.29.10",
+    "@typescript-eslint/eslint-plugin": "^4.9.1",
+    "@typescript-eslint/parser": "^4.9.1",
     "autoprefixer": "^9",
-    "babel-plugin-react-intl": "^8.2.2",
+    "babel-plugin-react-intl": "^8.2.21",
     "babel-plugin-react-intl-auto": "^3.3.0",
-    "commitizen": "^4.2.1",
-    "copyfiles": "^2.4.0",
+    "commitizen": "^4.2.2",
+    "copyfiles": "^2.4.1",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^7.10.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-formatjs": "^2.7.10",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.20.6",
-    "eslint-plugin-react-hooks": "^4.1.2",
+    "eslint": "^7.15.0",
+    "eslint-config-prettier": "^7.0.0",
+    "eslint-plugin-formatjs": "^2.9.10",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.2.0",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "extract-react-intl-messages": "^4.1.1",
-    "husky": "^4.3.0",
-    "lint-staged": "^10.4.0",
-    "nodemon": "^2.0.4",
+    "husky": "^4.3.5",
+    "lint-staged": "^10.5.3",
+    "nodemon": "^2.0.6",
     "postcss": "^7",
     "postcss-preset-env": "^6.7.0",
-    "prettier": "^2.1.2",
+    "prettier": "^2.2.1",
     "semantic-release": "^17.3.0",
     "semantic-release-docker": "^2.2.0",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
-    "ts-node": "^9.0.0",
-    "typescript": "^4.0.2"
+    "ts-node": "^9.1.1",
+    "typescript": "^4.1.2"
   },
   "config": {
     "commitizen": {

public/site.webmanifest

@@ -1 +1 @@
-{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#1e2937","display":"standalone"}

server/api/plexapi.ts

@@ -4,10 +4,12 @@ import { getSettings } from '../lib/settings';
 export interface PlexLibraryItem {
   ratingKey: string;
   parentRatingKey?: string;
+  grandparentRatingKey?: string;
   title: string;
   guid: string;
   parentGuid?: string;
-  type: 'movie' | 'show' | 'season';
+  grandparentGuid?: string;
+  type: 'movie' | 'show' | 'season' | 'episode';
 }
 
 interface PlexLibraryResponse {
@@ -20,6 +22,7 @@ export interface PlexLibrary {
   type: 'show' | 'movie';
   key: string;
   title: string;
+  agent: string;
 }
 
 interface PlexLibrariesResponse {
@@ -61,7 +64,8 @@ class PlexAPI {
 
     this.plexClient = new NodePlexAPI({
       hostname: settings.plex.ip,
-      post: settings.plex.port,
+      port: settings.plex.port,
+      https: settings.plex.useSsl,
       token: plexToken,
       authenticator: {
         authenticate: (
@@ -119,9 +123,9 @@ class PlexAPI {
     return response.MediaContainer.Metadata[0];
   }
 
-  public async getRecentlyAdded(): Promise<PlexLibraryItem[]> {
+  public async getRecentlyAdded(id: string): Promise<PlexLibraryItem[]> {
     const response = await this.plexClient.query<PlexLibraryResponse>(
-      '/library/recentlyAdded'
+      `/library/sections/${id}/recentlyAdded`
     );
 
     return response.MediaContainer.Metadata;

server/api/radarr.ts

@@ -1,4 +1,5 @@
 import Axios, { AxiosInstance } from 'axios';
+import logger from '../logger';
 
 interface RadarrMovieOptions {
   title: string;
@@ -75,11 +76,9 @@ class RadarrAPI {
     }
   };
 
-  public addMovie = async (
-    options: RadarrMovieOptions
-  ): Promise<RadarrMovie> => {
+  public addMovie = async (options: RadarrMovieOptions): Promise<void> => {
     try {
-      const response = await this.axios.post<RadarrMovie>(`/movie`, {
+      await this.axios.post<RadarrMovie>(`/movie`, {
         title: options.title,
         qualityProfileId: options.qualityProfileId,
         profileId: options.profileId,
@@ -93,10 +92,15 @@ class RadarrAPI {
           searchForMovie: options.searchNow,
         },
       });
-
-      return response.data;
     } catch (e) {
-      throw new Error(`[Radarr] Failed to add movie: ${e.message}`);
+      logger.error(
+        'Failed to add movie to Radarr. This might happen if the movie already exists, in which case you can safely ignore this error.',
+        {
+          label: 'Radarr',
+          errorMessage: e.message,
+          options,
+        }
+      );
     }
   };
 

server/api/sonarr.ts

@@ -76,6 +76,7 @@ interface AddSeriesOptions {
   title: string;
   profileId: number;
   seasons: number[];
+  seasonFolder: boolean;
   rootFolderPath: string;
   monitored?: boolean;
   searchNow?: boolean;
@@ -149,6 +150,7 @@ class SonarrAPI {
               monitored: false,
             }))
           ),
+          seasonFolder: options.seasonFolder,
           monitored: options.monitored,
           rootFolderPath: options.rootFolderPath,
           addOptions: {

server/api/themoviedb.ts

@@ -679,9 +679,10 @@ class TheMovieDb {
   public getMovieTrending = async ({
     page = 1,
     timeWindow = 'day',
-  }: { page?: number; timeWindow?: 'day' | 'week' } = {}): Promise<
-    TmdbSearchMovieResponse
-  > => {
+  }: {
+    page?: number;
+    timeWindow?: 'day' | 'week';
+  } = {}): Promise<TmdbSearchMovieResponse> => {
     try {
       const response = await this.axios.get<TmdbSearchMovieResponse>(
         `/trending/movie/${timeWindow}`,
@@ -701,9 +702,10 @@ class TheMovieDb {
   public getTvTrending = async ({
     page = 1,
     timeWindow = 'day',
-  }: { page?: number; timeWindow?: 'day' | 'week' } = {}): Promise<
-    TmdbSearchTvResponse
-  > => {
+  }: {
+    page?: number;
+    timeWindow?: 'day' | 'week';
+  } = {}): Promise<TmdbSearchTvResponse> => {
     try {
       const response = await this.axios.get<TmdbSearchTvResponse>(
         `/trending/tv/${timeWindow}`,

server/entity/Media.ts

@@ -8,14 +8,11 @@ import {
   UpdateDateColumn,
   getRepository,
   In,
-  AfterUpdate,
 } from 'typeorm';
 import { MediaRequest } from './MediaRequest';
 import { MediaStatus, MediaType } from '../constants/media';
 import logger from '../logger';
 import Season from './Season';
-import notificationManager, { Notification } from '../lib/notifications';
-import TheMovieDb from '../api/themoviedb';
 
 @Entity()
 class Media {
@@ -98,32 +95,6 @@ class Media {
   constructor(init?: Partial<Media>) {
     Object.assign(this, init);
   }
-
-  @AfterUpdate()
-  private async notifyAvailable() {
-    if (this.status === MediaStatus.AVAILABLE) {
-      if (this.mediaType === MediaType.MOVIE) {
-        const requestRepository = getRepository(MediaRequest);
-        const relatedRequests = await requestRepository.find({
-          where: { media: this },
-        });
-
-        if (relatedRequests.length > 0) {
-          const tmdb = new TheMovieDb();
-          const movie = await tmdb.getMovie({ movieId: this.tmdbId });
-
-          relatedRequests.forEach((request) => {
-            notificationManager.sendNotification(Notification.MEDIA_AVAILABLE, {
-              notifyUser: request.requestedBy,
-              subject: movie.title,
-              message: movie.overview,
-              image: `https://image.tmdb.org/t/p/w600_and_h900_bestv2${movie.poster_path}`,
-            });
-          });
-        }
-      }
-    }
-  }
 }
 
 export default Media;

server/entity/MediaRequest.ts

@@ -62,7 +62,7 @@ export class MediaRequest {
   }
 
   @AfterInsert()
-  private async notifyNewRequest() {
+  private async _notifyNewRequest() {
     if (this.status === MediaRequestStatus.PENDING) {
       const mediaRepository = getRepository(Media);
       const media = await mediaRepository.findOne({
@@ -110,7 +110,7 @@ export class MediaRequest {
    * auto approved content
    */
   @AfterUpdate()
-  private async notifyApproved() {
+  private async _notifyApproved() {
     if (this.status === MediaRequestStatus.APPROVED) {
       const mediaRepository = getRepository(Media);
       const media = await mediaRepository.findOne({
@@ -151,7 +151,7 @@ export class MediaRequest {
 
   @AfterUpdate()
   @AfterInsert()
-  private async updateParentStatus() {
+  private async _updateParentStatus() {
     const mediaRepository = getRepository(Media);
     const media = await mediaRepository.findOne({
       where: { id: this.media.id },
@@ -206,7 +206,7 @@ export class MediaRequest {
   }
 
   @AfterRemove()
-  private async handleRemoveParentUpdate() {
+  private async _handleRemoveParentUpdate() {
     const mediaRepository = getRepository(Media);
     const fullMedia = await mediaRepository.findOneOrFail({
       where: { id: this.media.id },
@@ -219,7 +219,7 @@ export class MediaRequest {
 
   @AfterUpdate()
   @AfterInsert()
-  private async sendToRadarr() {
+  private async _sendToRadarr() {
     if (
       this.status === MediaRequestStatus.APPROVED &&
       this.type === MediaType.MOVIE
@@ -234,13 +234,24 @@ export class MediaRequest {
           return;
         }
 
+        const radarrSettings = settings.radarr.find(
+          (radarr) => radarr.isDefault && !radarr.is4k
+        );
+
+        if (!radarrSettings) {
+          logger.info(
+            'There is no default radarr configured. Did you set any of your Radarr servers as default?',
+            { label: 'Media Request' }
+          );
+          return;
+        }
+
         const tmdb = new TheMovieDb();
-        const radarrSettings = settings.radarr[0];
         const radarr = new RadarrAPI({
           apiKey: radarrSettings.apiKey,
           url: `${radarrSettings.useSsl ? 'https' : 'http'}://${
             radarrSettings.hostname
-          }:${radarrSettings.port}/api`,
+          }:${radarrSettings.port}${radarrSettings.baseUrl ?? ''}/api`,
         });
         const movie = await tmdb.getMovie({ movieId: this.media.tmdbId });
 
@@ -267,7 +278,7 @@ export class MediaRequest {
 
   @AfterUpdate()
   @AfterInsert()
-  private async sendToSonarr() {
+  private async _sendToSonarr() {
     if (
       this.status === MediaRequestStatus.APPROVED &&
       this.type === MediaType.TV
@@ -283,6 +294,18 @@ export class MediaRequest {
           return;
         }
 
+        const sonarrSettings = settings.sonarr.find(
+          (sonarr) => sonarr.isDefault && !sonarr.is4k
+        );
+
+        if (!sonarrSettings) {
+          logger.info(
+            'There is no default sonarr configured. Did you set any of your Sonarr servers as default?',
+            { label: 'Media Request' }
+          );
+          return;
+        }
+
         const media = await mediaRepository.findOne({
           where: { id: this.media.id },
           relations: ['requests'],
@@ -293,12 +316,11 @@ export class MediaRequest {
         }
 
         const tmdb = new TheMovieDb();
-        const sonarrSettings = settings.sonarr[0];
         const sonarr = new SonarrAPI({
           apiKey: sonarrSettings.apiKey,
           url: `${sonarrSettings.useSsl ? 'https' : 'http'}://${
             sonarrSettings.hostname
-          }:${sonarrSettings.port}/api`,
+          }:${sonarrSettings.port}${sonarrSettings.baseUrl ?? ''}/api`,
         });
         const series = await tmdb.getTvShow({ tvId: media.tmdbId });
 
@@ -313,6 +335,7 @@ export class MediaRequest {
           title: series.name,
           tvdbid: series.external_ids.tvdb_id,
           seasons: this.seasons.map((season) => season.seasonNumber),
+          seasonFolder: sonarrSettings.enableSeasonFolders,
           monitored: true,
           searchNow: true,
         });

server/entity/Season.ts

@@ -5,16 +5,9 @@ import {
   ManyToOne,
   CreateDateColumn,
   UpdateDateColumn,
-  AfterInsert,
-  AfterUpdate,
-  getRepository,
-  RelationId,
 } from 'typeorm';
 import { MediaStatus } from '../constants/media';
 import Media from './Media';
-import logger from '../logger';
-import TheMovieDb from '../api/themoviedb';
-import notificationManager, { Notification } from '../lib/notifications';
 
 @Entity()
 class Season {
@@ -39,60 +32,6 @@ class Season {
   constructor(init?: Partial<Season>) {
     Object.assign(this, init);
   }
-
-  @AfterInsert()
-  @AfterUpdate()
-  private async sendSeasonAvailableNotification() {
-    if (this.status === MediaStatus.AVAILABLE) {
-      try {
-        const lazyMedia = await this.media;
-        const tmdb = new TheMovieDb();
-        const mediaRepository = getRepository(Media);
-        const media = await mediaRepository.findOneOrFail({
-          where: { id: lazyMedia.id },
-          relations: ['requests'],
-        });
-
-        const availableSeasons = media.seasons.map(
-          (season) => season.seasonNumber
-        );
-
-        const request = media.requests.find(
-          (request) =>
-            // Check if the season is complete AND it contains the current season that was just marked available
-            request.seasons.every((season) =>
-              availableSeasons.includes(season.seasonNumber)
-            ) &&
-            request.seasons.some(
-              (season) => season.seasonNumber === this.seasonNumber
-            )
-        );
-
-        if (request) {
-          const tv = await tmdb.getTvShow({ tvId: media.tmdbId });
-          notificationManager.sendNotification(Notification.MEDIA_AVAILABLE, {
-            subject: tv.name,
-            message: tv.overview,
-            notifyUser: request.requestedBy,
-            image: `https://image.tmdb.org/t/p/w600_and_h900_bestv2${tv.poster_path}`,
-            extra: [
-              {
-                name: 'Seasons',
-                value: request.seasons
-                  .map((season) => season.seasonNumber)
-                  .join(', '),
-              },
-            ],
-          });
-        }
-      } catch (e) {
-        logger.error('Something went wrong sending season available notice', {
-          label: 'Notifications',
-          message: e.message,
-        });
-      }
-    }
-  }
 }
 
 export default Season;

server/index.ts

@@ -5,11 +5,11 @@ import { createConnection, getRepository } from 'typeorm';
 import routes from './routes';
 import bodyParser from 'body-parser';
 import cookieParser from 'cookie-parser';
-import session from 'express-session';
+import session, { Store } from 'express-session';
 import { TypeormStore } from 'connect-typeorm/out';
 import YAML from 'yamljs';
 import swaggerUi from 'swagger-ui-express';
-import { OpenApiValidator } from 'express-openapi-validator';
+import * as OpenApiValidator from 'express-openapi-validator';
 import { Session } from './entity/Session';
 import { getSettings } from './lib/settings';
 import logger from './logger';
@@ -17,9 +17,11 @@ import { startJobs } from './job/schedule';
 import notificationManager from './lib/notifications';
 import DiscordAgent from './lib/notifications/agents/discord';
 import EmailAgent from './lib/notifications/agents/email';
+import { getAppVersion } from './utils/appVersion';
 
 const API_SPEC_PATH = path.join(__dirname, '../overseerr-api.yml');
 
+logger.info(`Starting Overseerr version ${getAppVersion()}`);
 const dev = process.env.NODE_ENV !== 'production';
 const app = next({ dev });
 const handle = app.getRequestHandler();
@@ -29,7 +31,7 @@ app
   .then(async () => {
     await createConnection();
     // Load Settings
-    getSettings().load();
+    const settings = getSettings().load();
 
     // Register Notification Agents
     notificationManager.registerAgents([new DiscordAgent(), new EmailAgent()]);
@@ -47,7 +49,7 @@ app
     server.use(
       '/api',
       session({
-        secret: 'verysecret',
+        secret: settings.clientId,
         resave: false,
         saveUninitialized: false,
         cookie: {
@@ -56,22 +58,23 @@ app
         store: new TypeormStore({
           cleanupLimit: 2,
           ttl: 1000 * 60 * 60 * 24 * 30,
-        }).connect(sessionRespository),
+        }).connect(sessionRespository) as Store,
       })
     );
     const apiDocs = YAML.load(API_SPEC_PATH);
     server.use('/api-docs', swaggerUi.serve, swaggerUi.setup(apiDocs));
-    await new OpenApiValidator({
-      apiSpec: API_SPEC_PATH,
-      validateRequests: true,
-      validateResponses: true,
-    }).install(server);
+    server.use(
+      OpenApiValidator.middleware({
+        apiSpec: API_SPEC_PATH,
+        validateRequests: true,
+      })
+    );
     /**
      * This is a workaround to convert dates to strings before they are validated by
      * OpenAPI validator. Otherwise, they are treated as objects instead of strings
      * and response validation will fail
      */
-    server.use((req, res, next) => {
+    server.use((_req, res, next) => {
       const original = res.json;
       res.json = function jsonp(json) {
         return original.call(this, JSON.parse(JSON.stringify(json)));
@@ -83,8 +86,10 @@ app
     server.use(
       (
         err: { status: number; message: string; errors: string[] },
-        req: Request,
+        _req: Request,
         res: Response,
+        // We must provide a next function for the function signature here even though its not used
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         _next: NextFunction
       ) => {
         // format error
@@ -96,12 +101,9 @@ app
     );
 
     const port = Number(process.env.PORT) || 3000;
-    server.listen(port, (err) => {
-      if (err) {
-        throw err;
-      }
+    server.listen(port, () => {
       logger.info(`Server ready on port ${port}`, {
-        label: 'SERVER',
+        label: 'Server',
       });
     });
   })

server/interfaces/api/personInterfaces.ts

@@ -0,0 +1,7 @@
+import { PersonCreditCast, PersonCreditCrew } from '../../models/Person';
+
+export interface PersonCombinedCreditsResponse {
+  id: number;
+  cast: PersonCreditCast[];
+  crew: PersonCreditCrew[];
+}

server/interfaces/api/settingsInterfaces.ts

@@ -0,0 +1,5 @@
+export interface SettingsAboutResponse {
+  version: string;
+  totalRequests: number;
+  totalMediaItems: number;
+}

server/job/plexsync/index.ts

@@ -7,8 +7,10 @@ import { MediaStatus, MediaType } from '../../constants/media';
 import logger from '../../logger';
 import { getSettings, Library } from '../../lib/settings';
 import Season from '../../entity/Season';
+import { uniqWith } from 'lodash';
 
-const BUNDLE_SIZE = 10;
+const BUNDLE_SIZE = 20;
+const UPDATE_RATE = 4 * 1000;
 
 const imdbRegex = new RegExp(/imdb:\/\/(tt[0-9]+)/);
 const tmdbRegex = new RegExp(/tmdb:\/\/([0-9]+)/);
@@ -51,64 +53,81 @@ class JobPlexSync {
 
   private async processMovie(plexitem: PlexLibraryItem) {
     const mediaRepository = getRepository(Media);
-    if (plexitem.guid.match(plexRegex)) {
-      const metadata = await this.plexClient.getMetadata(plexitem.ratingKey);
-      const newMedia = new Media();
+    try {
+      if (plexitem.guid.match(plexRegex)) {
+        const metadata = await this.plexClient.getMetadata(plexitem.ratingKey);
+        const newMedia = new Media();
 
-      metadata.Guid.forEach((ref) => {
-        if (ref.id.match(imdbRegex)) {
-          newMedia.imdbId = ref.id.match(imdbRegex)?.[1] ?? undefined;
-        } else if (ref.id.match(tmdbRegex)) {
-          const tmdbMatch = ref.id.match(tmdbRegex)?.[1];
-          newMedia.tmdbId = Number(tmdbMatch);
+        if (!metadata.Guid) {
+          logger.debug('No Guid metadata for this title. Skipping', {
+            label: 'Plex Sync',
+            ratingKey: plexitem.ratingKey,
+          });
+          return;
         }
-      });
 
-      const existing = await this.getExisting(newMedia.tmdbId);
-
-      if (existing && existing.status === MediaStatus.AVAILABLE) {
-        this.log(`Title exists and is already available ${metadata.title}`);
-      } else if (existing && existing.status !== MediaStatus.AVAILABLE) {
-        existing.status = MediaStatus.AVAILABLE;
-        mediaRepository.save(existing);
-        this.log(
-          `Request for ${metadata.title} exists. Setting status AVAILABLE`,
-          'info'
-        );
-      } else {
-        newMedia.status = MediaStatus.AVAILABLE;
-        newMedia.mediaType = MediaType.MOVIE;
-        await mediaRepository.save(newMedia);
-        this.log(`Saved ${plexitem.title}`);
-      }
-    } else {
-      const matchedid = plexitem.guid.match(/imdb:\/\/(tt[0-9]+)/);
-
-      if (matchedid?.[1]) {
-        const tmdbMovie = await this.tmdb.getMovieByImdbId({
-          imdbId: matchedid[1],
+        metadata.Guid.forEach((ref) => {
+          if (ref.id.match(imdbRegex)) {
+            newMedia.imdbId = ref.id.match(imdbRegex)?.[1] ?? undefined;
+          } else if (ref.id.match(tmdbRegex)) {
+            const tmdbMatch = ref.id.match(tmdbRegex)?.[1];
+            newMedia.tmdbId = Number(tmdbMatch);
+          }
         });
 
-        const existing = await this.getExisting(tmdbMovie.id);
+        const existing = await this.getExisting(newMedia.tmdbId);
+
         if (existing && existing.status === MediaStatus.AVAILABLE) {
-          this.log(`Title exists and is already available ${plexitem.title}`);
+          this.log(`Title exists and is already available ${metadata.title}`);
         } else if (existing && existing.status !== MediaStatus.AVAILABLE) {
           existing.status = MediaStatus.AVAILABLE;
-          await mediaRepository.save(existing);
+          mediaRepository.save(existing);
           this.log(
-            `Request for ${plexitem.title} exists. Setting status AVAILABLE`,
+            `Request for ${metadata.title} exists. Setting status AVAILABLE`,
             'info'
           );
-        } else if (tmdbMovie) {
-          const newMedia = new Media();
-          newMedia.imdbId = tmdbMovie.external_ids.imdb_id;
-          newMedia.tmdbId = tmdbMovie.id;
+        } else {
           newMedia.status = MediaStatus.AVAILABLE;
           newMedia.mediaType = MediaType.MOVIE;
           await mediaRepository.save(newMedia);
-          this.log(`Saved ${tmdbMovie.title}`);
+          this.log(`Saved ${plexitem.title}`);
+        }
+      } else {
+        const matchedid = plexitem.guid.match(/imdb:\/\/(tt[0-9]+)/);
+
+        if (matchedid?.[1]) {
+          const tmdbMovie = await this.tmdb.getMovieByImdbId({
+            imdbId: matchedid[1],
+          });
+
+          const existing = await this.getExisting(tmdbMovie.id);
+          if (existing && existing.status === MediaStatus.AVAILABLE) {
+            this.log(`Title exists and is already available ${plexitem.title}`);
+          } else if (existing && existing.status !== MediaStatus.AVAILABLE) {
+            existing.status = MediaStatus.AVAILABLE;
+            await mediaRepository.save(existing);
+            this.log(
+              `Request for ${plexitem.title} exists. Setting status AVAILABLE`,
+              'info'
+            );
+          } else if (tmdbMovie) {
+            const newMedia = new Media();
+            newMedia.imdbId = tmdbMovie.external_ids.imdb_id;
+            newMedia.tmdbId = tmdbMovie.id;
+            newMedia.status = MediaStatus.AVAILABLE;
+            newMedia.mediaType = MediaType.MOVIE;
+            await mediaRepository.save(newMedia);
+            this.log(`Saved ${tmdbMovie.title}`);
+          }
         }
       }
+    } catch (e) {
+      this.log(
+        `Failed to process plex item. ratingKey: ${
+          plexitem.parentRatingKey ?? plexitem.ratingKey
+        }`,
+        'error'
+      );
     }
   }
 
@@ -119,7 +138,9 @@ class JobPlexSync {
 
     try {
       const metadata = await this.plexClient.getMetadata(
-        plexitem.parentRatingKey ?? plexitem.ratingKey,
+        plexitem.grandparentRatingKey ??
+          plexitem.parentRatingKey ??
+          plexitem.ratingKey,
         { includeChildren: true }
       );
       if (metadata.guid.match(tvdbRegex)) {
@@ -222,9 +243,15 @@ class JobPlexSync {
     } catch (e) {
       this.log(
         `Failed to process plex item. ratingKey: ${
-          plexitem.parentRatingKey ?? plexitem.ratingKey
+          plexitem.grandparentRatingKey ??
+          plexitem.parentRatingKey ??
+          plexitem.ratingKey
         }`,
-        'error'
+        'error',
+        {
+          errorMessage: e.message,
+          plexitem,
+        }
       );
     }
   }
@@ -234,7 +261,11 @@ class JobPlexSync {
       slicedItems.map(async (plexitem) => {
         if (plexitem.type === 'movie') {
           await this.processMovie(plexitem);
-        } else if (plexitem.type === 'show') {
+        } else if (
+          plexitem.type === 'show' ||
+          plexitem.type === 'episode' ||
+          plexitem.type === 'season'
+        ) {
           await this.processShow(plexitem);
         }
       })
@@ -253,23 +284,24 @@ class JobPlexSync {
       this.progress = start;
       await this.processItems(slicedItems);
 
-      await new Promise((resolve) =>
+      await new Promise<void>((resolve) =>
         setTimeout(async () => {
           await this.loop({
             start: start + BUNDLE_SIZE,
             end: end + BUNDLE_SIZE,
           });
           resolve();
-        }, 5000)
+        }, UPDATE_RATE)
       );
     }
   }
 
   private log(
     message: string,
-    level: 'info' | 'error' | 'debug' = 'debug'
+    level: 'info' | 'error' | 'debug' = 'debug',
+    optional?: Record<string, unknown>
   ): void {
-    logger[level](message, { label: 'Plex Sync' });
+    logger[level](message, { label: 'Plex Sync', ...optional });
   }
 
   public async run(): Promise<void> {
@@ -283,20 +315,40 @@ class JobPlexSync {
       });
 
       this.plexClient = new PlexAPI({ plexToken: admin.plexToken });
-      if (this.isRecentOnly) {
-        this.currentLibrary = {
-          id: '0',
-          name: 'Recently Added',
-          enabled: true,
-        };
-        this.log(`Beginning to process recently added`, 'info');
-        this.items = await this.plexClient.getRecentlyAdded();
-        await this.loop();
-      } else {
-        this.libraries = settings.plex.libraries.filter(
-          (library) => library.enabled
-        );
 
+      this.libraries = settings.plex.libraries.filter(
+        (library) => library.enabled
+      );
+
+      if (this.isRecentOnly) {
+        for (const library of this.libraries) {
+          this.currentLibrary = library;
+          this.log(
+            `Beginning to process recently added for library: ${library.name}`,
+            'info'
+          );
+          const libraryItems = await this.plexClient.getRecentlyAdded(
+            library.id
+          );
+
+          // Bundle items up by rating keys
+          this.items = uniqWith(libraryItems, (mediaA, mediaB) => {
+            if (mediaA.grandparentRatingKey && mediaB.grandparentRatingKey) {
+              return (
+                mediaA.grandparentRatingKey === mediaB.grandparentRatingKey
+              );
+            }
+
+            if (mediaA.parentRatingKey && mediaB.parentRatingKey) {
+              return mediaA.parentRatingKey === mediaB.parentRatingKey;
+            }
+
+            return mediaA.ratingKey === mediaB.ratingKey;
+          });
+
+          await this.loop();
+        }
+      } else {
         for (const library of this.libraries) {
           this.currentLibrary = library;
           this.log(`Beginning to process library: ${library.name}`, 'info');

server/job/schedule.ts

@@ -13,7 +13,7 @@ export const startJobs = (): void => {
   // Run recently added plex sync every 5 minutes
   scheduledJobs.push({
     name: 'Plex Recently Added Sync',
-    job: schedule.scheduleJob('0 */10 * * * *', () => {
+    job: schedule.scheduleJob('0 */5 * * * *', () => {
       logger.info('Starting scheduled job: Plex Recently Added Sync', {
         label: 'Jobs',
       });
@@ -23,7 +23,7 @@ export const startJobs = (): void => {
   // Run full plex sync every 6 hours
   scheduledJobs.push({
     name: 'Plex Full Library Sync',
-    job: schedule.scheduleJob('0 0 */6 * * *', () => {
+    job: schedule.scheduleJob('0 0 3 * * *', () => {
       logger.info('Starting scheduled job: Plex Full Sync', { label: 'Jobs' });
       jobPlexFullSync.run();
     }),

server/lib/notifications/agents/discord.ts

@@ -127,7 +127,9 @@ class DiscordAgent implements NotificationAgent {
     };
   }
 
-  public shouldSend(type: Notification): boolean {
+  // TODO: Add checking for type here once we add notification type filters for agents
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  public shouldSend(_type: Notification): boolean {
     const settings = getSettings();
 
     if (

server/lib/notifications/agents/email.ts

@@ -7,10 +7,12 @@ import Email from 'email-templates';
 import logger from '../../../logger';
 import { getRepository } from 'typeorm';
 import { User } from '../../../entity/User';
-import { hasPermission, Permission } from '../../permissions';
+import { Permission } from '../../permissions';
 
 class EmailAgent implements NotificationAgent {
-  public shouldSend(type: Notification): boolean {
+  // TODO: Add checking for type here once we add notification type filters for agents
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  public shouldSend(_type: Notification): boolean {
     const settings = getSettings();
 
     if (settings.notifications.agents.email.enabled) {
@@ -27,10 +29,13 @@ class EmailAgent implements NotificationAgent {
       host: emailSettings.smtpHost,
       port: emailSettings.smtpPort,
       secure: emailSettings.secure,
-      auth: {
-        user: emailSettings.authUser,
-        pass: emailSettings.authPass,
-      },
+      auth:
+        emailSettings.authUser && emailSettings.authPass
+          ? {
+              user: emailSettings.authUser,
+              pass: emailSettings.authPass,
+            }
+          : undefined,
     });
   }
 
@@ -133,7 +138,7 @@ class EmailAgent implements NotificationAgent {
           to: payload.notifyUser.email,
         },
         locals: {
-          body: 'Your requsested media is now available!',
+          body: 'Your requested media is now available!',
           mediaName: payload.subject,
           imageUrl: payload.image,
           timestamp: new Date().toTimeString(),

server/lib/settings.ts

@@ -14,6 +14,7 @@ export interface PlexSettings {
   machineId?: string;
   ip: string;
   port: number;
+  useSsl?: boolean;
   libraries: Library[];
 }
 
@@ -84,7 +85,7 @@ interface NotificationSettings {
 }
 
 interface AllSettings {
-  clientId?: string;
+  clientId: string;
   main: MainSettings;
   plex: PlexSettings;
   radarr: RadarrSettings[];
@@ -100,14 +101,16 @@ class Settings {
 
   constructor(initialSettings?: AllSettings) {
     this.data = {
+      clientId: uuidv4(),
       main: {
-        apiKey: 'temp',
+        apiKey: '',
         applicationUrl: '',
       },
       plex: {
         name: '',
         ip: '127.0.0.1',
         port: 32400,
+        useSsl: false,
         libraries: [],
       },
       radarr: [],
@@ -143,6 +146,10 @@ class Settings {
   }
 
   get main(): MainSettings {
+    if (!this.data.main.apiKey) {
+      this.data.main.apiKey = this.generateApiKey();
+      this.save();
+    }
     return this.data.main;
   }
 
@@ -199,6 +206,16 @@ class Settings {
     return this.data.clientId;
   }
 
+  public regenerateApiKey(): MainSettings {
+    this.main.apiKey = this.generateApiKey();
+    this.save();
+    return this.main;
+  }
+
+  private generateApiKey(): string {
+    return Buffer.from(`${Date.now()}${this.clientId}`).toString('base64');
+  }
+
   /**
    * Settings Load
    *
@@ -207,10 +224,10 @@ class Settings {
    * @param overrideSettings If passed in, will override all existing settings with these
    * values
    */
-  public load(overrideSettings?: AllSettings): AllSettings {
+  public load(overrideSettings?: AllSettings): Settings {
     if (overrideSettings) {
       this.data = overrideSettings;
-      return this.data;
+      return this;
     }
 
     if (!fs.existsSync(SETTINGS_PATH)) {
@@ -222,7 +239,7 @@ class Settings {
       this.data = merge(this.data, JSON.parse(data));
       this.save();
     }
-    return this.data;
+    return this;
   }
 
   public save(): void {

server/middleware/auth.ts

@@ -1,9 +1,25 @@
 import { getRepository } from 'typeorm';
 import { User } from '../entity/User';
 import { Permission } from '../lib/permissions';
+import { getSettings } from '../lib/settings';
 
 export const checkUser: Middleware = async (req, _res, next) => {
-  if (req.session?.userId) {
+  const settings = getSettings();
+  if (req.header('X-API-Key') === settings.main.apiKey) {
+    const userRepository = getRepository(User);
+
+    let userId = 1; // Work on original administrator account
+
+    // If a User ID is provided, we will act on that users behalf
+    if (req.header('X-API-User')) {
+      userId = Number(req.header('X-API-User'));
+    }
+    const user = await userRepository.findOne({ where: { id: userId } });
+
+    if (user) {
+      req.user = user;
+    }
+  } else if (req.session?.userId) {
     const userRepository = getRepository(User);
 
     const user = await userRepository.findOne({

server/migration/1607928251245-DropImdbIdConstraint.ts

@@ -0,0 +1,20 @@
+import { MigrationInterface, QueryRunner, TableUnique } from 'typeorm';
+
+export class DropImdbIdConstraint1607928251245 implements MigrationInterface {
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.dropUniqueConstraint(
+      'media',
+      'UQ_7ff2d11f6a83cb52386eaebe74b'
+    );
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.createUniqueConstraint(
+      'media',
+      new TableUnique({
+        name: 'UQ_7ff2d11f6a83cb52386eaebe74b',
+        columnNames: ['imdbId'],
+      })
+    );
+  }
+}

server/models/Movie.ts

@@ -1,5 +1,4 @@
 import { TmdbMovieDetails } from '../api/themoviedb';
-import { MediaRequest } from '../entity/MediaRequest';
 import {
   ProductionCompany,
   Genre,

server/models/Person.ts

@@ -3,6 +3,7 @@ import {
   TmdbPersonCreditCrew,
   TmdbPersonDetail,
 } from '../api/themoviedb';
+import Media from '../entity/Media';
 
 export interface PersonDetail {
   id: number;
@@ -42,6 +43,7 @@ export interface PersonCredit {
   title: string;
   adult: boolean;
   releaseDate: string;
+  mediaInfo?: Media;
 }
 
 export interface PersonCreditCast extends PersonCredit {
@@ -76,7 +78,8 @@ export const mapPersonDetails = (person: TmdbPersonDetail): PersonDetail => ({
 });
 
 export const mapCastCredits = (
-  cast: TmdbPersonCreditCast
+  cast: TmdbPersonCreditCast,
+  media?: Media
 ): PersonCreditCast => ({
   id: cast.id,
   originalLanguage: cast.original_language,
@@ -100,10 +103,12 @@ export const mapCastCredits = (
   adult: cast.adult,
   releaseDate: cast.release_date,
   character: cast.character,
+  mediaInfo: media,
 });
 
 export const mapCrewCredits = (
-  crew: TmdbPersonCreditCrew
+  crew: TmdbPersonCreditCrew,
+  media?: Media
 ): PersonCreditCrew => ({
   id: crew.id,
   originalLanguage: crew.original_language,
@@ -128,4 +133,5 @@ export const mapCrewCredits = (
   releaseDate: crew.release_date,
   department: crew.department,
   job: crew.job,
+  mediaInfo: media,
 });

server/models/Search.ts

@@ -3,7 +3,6 @@ import type {
   TmdbPersonResult,
   TmdbTvResult,
 } from '../api/themoviedb';
-import type { MediaRequest } from '../entity/MediaRequest';
 import Media from '../entity/Media';
 
 export type MediaType = 'tv' | 'movie' | 'person';

server/models/Tv.ts

@@ -56,7 +56,7 @@ export interface TvDetails {
     profilePath?: string;
   }[];
   episodeRunTime: number[];
-  firstAirDate: string;
+  firstAirDate?: string;
   genres: Genre[];
   homepage: string;
   inProduction: boolean;

server/routes/auth.ts

@@ -24,7 +24,7 @@ authRoutes.get('/me', isAuthenticated(), async (req, res) => {
   return res.status(200).json(user.filter());
 });
 
-authRoutes.post('/login', async (req, res) => {
+authRoutes.post('/login', async (req, res, next) => {
   const userRepository = getRepository(User);
   const body = req.body as { authToken?: string };
 
@@ -86,6 +86,22 @@ authRoutes.post('/login', async (req, res) => {
           avatar: account.thumb,
         });
         await userRepository.save(user);
+      } else {
+        logger.info(
+          'Failed login attempt from user without access to plex server',
+          {
+            label: 'Auth',
+            account: {
+              ...account,
+              authentication_token: '__REDACTED__',
+              authToken: '__REDACTED__',
+            },
+          }
+        );
+        return next({
+          status: 403,
+          message: 'You do not have access to this Plex server',
+        });
       }
     }
 
@@ -97,9 +113,10 @@ authRoutes.post('/login', async (req, res) => {
     return res.status(200).json(user?.filter() ?? {});
   } catch (e) {
     logger.error(e.message, { label: 'Auth' });
-    res
-      .status(500)
-      .json({ error: 'Something went wrong. Is your auth token valid?' });
+    return next({
+      status: 500,
+      message: 'Something went wrong. Is your auth token valid?',
+    });
   }
 });
 

server/routes/discover.ts

@@ -1,9 +1,5 @@
 import { Router } from 'express';
-import TheMovieDb, {
-  TmdbMovieResult,
-  TmdbTvResult,
-  TmdbPersonResult,
-} from '../api/themoviedb';
+import TheMovieDb from '../api/themoviedb';
 import { mapMovieResult, mapTvResult, mapPersonResult } from '../models/Search';
 import Media from '../entity/Media';
 import { isMovie, isPerson } from '../utils/typeHelpers';

server/routes/media.ts

@@ -12,8 +12,8 @@ const mediaRoutes = Router();
 mediaRoutes.get('/', async (req, res, next) => {
   const mediaRepository = getRepository(Media);
 
-  const pageSize = Number(req.query.take) ?? 20;
-  const skip = Number(req.query.skip) ?? 0;
+  const pageSize = req.query.take ? Number(req.query.take) : 20;
+  const skip = req.query.skip ? Number(req.query.skip) : 0;
 
   let statusFilter:
     | MediaStatus

server/routes/movie.ts

@@ -1,7 +1,6 @@
 import { Router } from 'express';
 import TheMovieDb from '../api/themoviedb';
 import { mapMovieDetails } from '../models/Movie';
-import { MediaRequest } from '../entity/MediaRequest';
 import { mapMovieResult } from '../models/Search';
 import Media from '../entity/Media';
 import RottenTomatoes from '../api/rottentomatoes';

server/routes/person.ts

@@ -1,6 +1,6 @@
 import { Router } from 'express';
-import next from 'next';
 import TheMovieDb from '../api/themoviedb';
+import Media from '../entity/Media';
 import logger from '../logger';
 import {
   mapCastCredits,
@@ -33,9 +33,27 @@ personRoutes.get('/:id/combined_credits', async (req, res) => {
     language: req.query.language as string,
   });
 
+  const castMedia = await Media.getRelatedMedia(
+    combinedCredits.cast.map((result) => result.id)
+  );
+
+  const crewMedia = await Media.getRelatedMedia(
+    combinedCredits.crew.map((result) => result.id)
+  );
+
   return res.status(200).json({
-    cast: combinedCredits.cast.map((result) => mapCastCredits(result)),
-    crew: combinedCredits.crew.map((result) => mapCrewCredits(result)),
+    cast: combinedCredits.cast.map((result) =>
+      mapCastCredits(
+        result,
+        castMedia.find((med) => med.tmdbId === result.id)
+      )
+    ),
+    crew: combinedCredits.crew.map((result) =>
+      mapCrewCredits(
+        result,
+        crewMedia.find((med) => med.tmdbId === result.id)
+      )
+    ),
     id: combinedCredits.id,
   });
 });

server/routes/request.ts

@@ -15,12 +15,12 @@ const requestRoutes = Router();
 requestRoutes.get('/', async (req, res, next) => {
   const requestRepository = getRepository(MediaRequest);
   try {
-    const pageSize = Number(req.query.take) ?? 20;
-    const skip = Number(req.query.skip) ?? 0;
+    const pageSize = req.query.take ? Number(req.query.take) : 20;
+    const skip = req.query.skip ? Number(req.query.skip) : 0;
 
     let statusFilter:
       | MediaRequestStatus
-      | FindOperator<MediaRequestStatus>
+      | FindOperator<string | MediaRequestStatus>
       | undefined = undefined;
 
     switch (req.query.filter) {

server/routes/settings.ts

@@ -4,10 +4,11 @@ import {
   RadarrSettings,
   SonarrSettings,
   Library,
+  MainSettings,
 } from '../lib/settings';
 import { getRepository } from 'typeorm';
 import { User } from '../entity/User';
-import PlexAPI, { PlexLibrary } from '../api/plexapi';
+import PlexAPI from '../api/plexapi';
 import { jobPlexFullSync } from '../job/plexsync';
 import SonarrAPI from '../api/sonarr';
 import RadarrAPI from '../api/radarr';
@@ -16,12 +17,21 @@ import { scheduledJobs } from '../job/schedule';
 import { Permission } from '../lib/permissions';
 import { isAuthenticated } from '../middleware/auth';
 import { merge } from 'lodash';
+import Media from '../entity/Media';
+import { MediaRequest } from '../entity/MediaRequest';
+import { getAppVersion } from '../utils/appVersion';
 
 const settingsRoutes = Router();
 
-settingsRoutes.get('/main', (_req, res) => {
+settingsRoutes.get('/main', (req, res) => {
   const settings = getSettings();
 
+  if (!req.user?.hasPermission(Permission.ADMIN)) {
+    return res.status(200).json({
+      applicationUrl: settings.main.applicationUrl,
+    } as Partial<MainSettings>);
+  }
+
   res.status(200).json(settings.main);
 });
 
@@ -84,17 +94,22 @@ settingsRoutes.get('/plex/library', async (req, res) => {
 
     const libraries = await plexapi.getLibraries();
 
-    const newLibraries: Library[] = libraries.map((library) => {
-      const existing = settings.plex.libraries.find(
-        (l) => l.id === library.key
-      );
+    const newLibraries: Library[] = libraries
+      // Remove libraries that are not movie or show
+      .filter((library) => library.type === 'movie' || library.type === 'show')
+      // Remove libraries that do not have a metadata agent set (usually personal video libraries)
+      .filter((library) => library.agent !== 'com.plexapp.agents.none')
+      .map((library) => {
+        const existing = settings.plex.libraries.find(
+          (l) => l.id === library.key && l.name === library.title
+        );
 
-      return {
-        id: library.key,
-        name: library.title,
-        enabled: existing?.enabled ?? false,
-      };
-    });
+        return {
+          id: library.key,
+          name: library.title,
+          enabled: existing?.enabled ?? false,
+        };
+      });
 
     settings.plex.libraries = newLibraries;
   }
@@ -120,7 +135,7 @@ settingsRoutes.get('/plex/sync', (req, res) => {
   return res.status(200).json(jobPlexFullSync.status());
 });
 
-settingsRoutes.get('/radarr', (req, res) => {
+settingsRoutes.get('/radarr', (_req, res) => {
   const settings = getSettings();
 
   res.status(200).json(settings.radarr);
@@ -261,7 +276,7 @@ settingsRoutes.delete<{ id: string }>('/radarr/:id', (req, res) => {
   return res.status(200).json(removed[0]);
 });
 
-settingsRoutes.get('/sonarr', (req, res) => {
+settingsRoutes.get('/sonarr', (_req, res) => {
   const settings = getSettings();
 
   res.status(200).json(settings.sonarr);
@@ -372,7 +387,7 @@ settingsRoutes.delete<{ id: string }>('/sonarr/:id', (req, res) => {
   return res.status(200).json(removed[0]);
 });
 
-settingsRoutes.get('/jobs', (req, res) => {
+settingsRoutes.get('/jobs', (_req, res) => {
   return res.status(200).json(
     scheduledJobs.map((job) => ({
       name: job.name,
@@ -384,7 +399,7 @@ settingsRoutes.get('/jobs', (req, res) => {
 settingsRoutes.get(
   '/initialize',
   isAuthenticated(Permission.ADMIN),
-  (req, res) => {
+  (_req, res) => {
     const settings = getSettings();
 
     settings.public.initialized = true;
@@ -394,7 +409,7 @@ settingsRoutes.get(
   }
 );
 
-settingsRoutes.get('/notifications/discord', (req, res) => {
+settingsRoutes.get('/notifications/discord', (_req, res) => {
   const settings = getSettings();
 
   res.status(200).json(settings.notifications.agents.discord);
@@ -409,7 +424,7 @@ settingsRoutes.post('/notifications/discord', (req, res) => {
   res.status(200).json(settings.notifications.agents.discord);
 });
 
-settingsRoutes.get('/notifications/email', (req, res) => {
+settingsRoutes.get('/notifications/email', (_req, res) => {
   const settings = getSettings();
 
   res.status(200).json(settings.notifications.agents.email);
@@ -424,4 +439,18 @@ settingsRoutes.post('/notifications/email', (req, res) => {
   res.status(200).json(settings.notifications.agents.email);
 });
 
+settingsRoutes.get('/about', async (req, res) => {
+  const mediaRepository = getRepository(Media);
+  const mediaRequestRepository = getRepository(MediaRequest);
+
+  const totalMediaItems = await mediaRepository.count();
+  const totalRequests = await mediaRequestRepository.count();
+
+  return res.status(200).json({
+    version: getAppVersion(),
+    totalMediaItems,
+    totalRequests,
+  });
+});
+
 export default settingsRoutes;

server/routes/tv.ts

@@ -1,6 +1,5 @@
 import { Router } from 'express';
 import TheMovieDb from '../api/themoviedb';
-import { MediaRequest } from '../entity/MediaRequest';
 import { mapTvDetails, mapSeasonWithEpisodes } from '../models/Tv';
 import { mapTvResult } from '../models/Search';
 import Media from '../entity/Media';

server/routes/user.ts

@@ -5,7 +5,7 @@ import { hasPermission, Permission } from '../lib/permissions';
 
 const router = Router();
 
-router.get('/', async (req, res) => {
+router.get('/', async (_req, res) => {
   const userRepository = getRepository(User);
 
   const users = await userRepository.find();

server/subscriber/MediaSubscriber.ts

@@ -0,0 +1,112 @@
+import {
+  EntitySubscriberInterface,
+  EventSubscriber,
+  getRepository,
+  UpdateEvent,
+} from 'typeorm';
+import TheMovieDb from '../api/themoviedb';
+import { MediaStatus, MediaType } from '../constants/media';
+import Media from '../entity/Media';
+import { MediaRequest } from '../entity/MediaRequest';
+import notificationManager, { Notification } from '../lib/notifications';
+
+@EventSubscriber()
+export class MediaSubscriber implements EntitySubscriberInterface {
+  private async notifyAvailableMovie(entity: Media) {
+    if (entity.status === MediaStatus.AVAILABLE) {
+      if (entity.mediaType === MediaType.MOVIE) {
+        const requestRepository = getRepository(MediaRequest);
+        const relatedRequests = await requestRepository.find({
+          where: { media: entity },
+        });
+
+        if (relatedRequests.length > 0) {
+          const tmdb = new TheMovieDb();
+          const movie = await tmdb.getMovie({ movieId: entity.tmdbId });
+
+          relatedRequests.forEach((request) => {
+            notificationManager.sendNotification(Notification.MEDIA_AVAILABLE, {
+              notifyUser: request.requestedBy,
+              subject: movie.title,
+              message: movie.overview,
+              image: `https://image.tmdb.org/t/p/w600_and_h900_bestv2${movie.poster_path}`,
+            });
+          });
+        }
+      }
+    }
+  }
+
+  private async notifyAvailableSeries(entity: Media, dbEntity: Media) {
+    const newAvailableSeasons = entity.seasons
+      .filter((season) => season.status === MediaStatus.AVAILABLE)
+      .map((season) => season.seasonNumber);
+    const oldAvailableSeasons = dbEntity.seasons
+      .filter((season) => season.status === MediaStatus.AVAILABLE)
+      .map((season) => season.seasonNumber);
+
+    const changedSeasons = newAvailableSeasons.filter(
+      (seasonNumber) => !oldAvailableSeasons.includes(seasonNumber)
+    );
+
+    if (changedSeasons.length > 0) {
+      const tmdb = new TheMovieDb();
+      const requestRepository = getRepository(MediaRequest);
+      const processedSeasons: number[] = [];
+
+      for (const changedSeasonNumber of changedSeasons) {
+        const requests = await requestRepository.find({
+          where: { media: entity },
+        });
+        const request = requests.find(
+          (request) =>
+            // Check if the season is complete AND it contains the current season that was just marked available
+            request.seasons.every((season) =>
+              newAvailableSeasons.includes(season.seasonNumber)
+            ) &&
+            request.seasons.some(
+              (season) => season.seasonNumber === changedSeasonNumber
+            )
+        );
+
+        if (request && !processedSeasons.includes(changedSeasonNumber)) {
+          processedSeasons.push(
+            ...request.seasons.map((season) => season.seasonNumber)
+          );
+          const tv = await tmdb.getTvShow({ tvId: entity.tmdbId });
+          notificationManager.sendNotification(Notification.MEDIA_AVAILABLE, {
+            subject: tv.name,
+            message: tv.overview,
+            notifyUser: request.requestedBy,
+            image: `https://image.tmdb.org/t/p/w600_and_h900_bestv2${tv.poster_path}`,
+            extra: [
+              {
+                name: 'Seasons',
+                value: request.seasons
+                  .map((season) => season.seasonNumber)
+                  .join(', '),
+              },
+            ],
+          });
+        }
+      }
+    }
+  }
+
+  public beforeUpdate(event: UpdateEvent<Media>): void {
+    if (
+      event.entity.mediaType === MediaType.MOVIE &&
+      event.entity.status === MediaStatus.AVAILABLE
+    ) {
+      this.notifyAvailableMovie(event.entity);
+    }
+
+    if (
+      event.entity.mediaType === MediaType.TV &&
+      (event.entity.status === MediaStatus.AVAILABLE ||
+        event.entity.status === MediaStatus.PARTIALLY_AVAILABLE)
+    ) {
+      this.notifyAvailableSeries(event.entity, event.databaseEntity);
+    }
+  }
+}

server/types/plex-api.d.ts

@@ -2,8 +2,9 @@ declare module 'plex-api' {
   export default class PlexAPI {
     constructor(intiialOptions: {
       hostname: string;
-      post: number;
+      port: number;
       token?: string;
+      https?: boolean;
       authenticator: {
         authenticate: (
           _plexApi: PlexAPI,

server/utils/appVersion.ts

@@ -0,0 +1,12 @@
+export const getAppVersion = (): string => {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const { version } = require('../../package.json');
+
+  let finalVersion = version;
+
+  if (version === '0.1.0') {
+    finalVersion = `develop-${process.env.COMMIT_TAG ?? 'local'}`;
+  }
+
+  return finalVersion;
+};

src/components/Common/Header/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 interface HeaderProps {
   extraMargin?: number;
-  subtext?: string;
+  subtext?: React.ReactNode;
 }
 
 const Header: React.FC<HeaderProps> = ({

src/components/Common/List/index.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { withProperties } from '../../../utils/typeHelpers';
+
+interface ListItemProps {
+  title: string;
+}
+
+const ListItem: React.FC<ListItemProps> = ({ title, children }) => {
+  return (
+    <div className="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4">
+      <dt className="text-sm font-medium text-gray-200">{title}</dt>
+      <dd className="mt-1 flex text-sm text-gray-400 sm:mt-0 sm:col-span-2">
+        <span className="flex-grow">{children}</span>
+      </dd>
+    </div>
+  );
+};
+
+interface ListProps {
+  title: string;
+  subTitle?: string;
+}
+
+const List: React.FC<ListProps> = ({ title, subTitle, children }) => {
+  return (
+    <>
+      <div>
+        <h3 className="text-lg leading-6 font-medium text-gray-100">{title}</h3>
+        {subTitle && (
+          <p className="mt-1 max-w-2xl text-sm text-gray-300">{subTitle}</p>
+        )}
+      </div>
+      <div className="mt-5 border-t border-gray-800">
+        <dl className="divide-y divide-gray-800">{children}</dl>
+      </div>
+    </>
+  );
+};
+
+export default withProperties(List, { Item: ListItem });

src/components/Common/ListView/index.tsx

@@ -69,6 +69,7 @@ const ListView: React.FC<ListViewProps> = ({
             case 'person':
               titleCard = (
                 <PersonCard
+                  personId={title.id}
                   name={title.name}
                   profilePath={title.profilePath}
                   canExpand

src/components/Common/Modal/index.tsx

@@ -1,12 +1,12 @@
 import React, { MouseEvent, ReactNode, useRef } from 'react';
 import ReactDOM from 'react-dom';
 import Button, { ButtonType } from '../Button';
-import { useTransition, animated } from 'react-spring';
 import { useLockBodyScroll } from '../../../hooks/useLockBodyScroll';
 import LoadingSpinner from '../LoadingSpinner';
 import useClickOutside from '../../../hooks/useClickOutside';
 import { useIntl } from 'react-intl';
 import globalMessages from '../../../i18n/globalMessages';
+import Transition from '../../Transition';
 
 interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
   title?: string;
@@ -53,7 +53,6 @@ const Modal: React.FC<ModalProps> = ({
   tertiaryDisabled = false,
   tertiaryText,
   onTertiary,
-  ...props
 }) => {
   const intl = useIntl();
   const modalRef = useRef<HTMLDivElement>(null);
@@ -63,134 +62,123 @@ const Modal: React.FC<ModalProps> = ({
       : undefined;
   });
   useLockBodyScroll(true, disableScrollLock);
-  const containerTransitions = useTransition(!loading, null, {
-    from: { opacity: 0, transform: 'scale(0.5)' },
-    enter: { opacity: 1, transform: 'scale(1)' },
-    leave: { opacity: 0, transform: 'scale(0.5)' },
-    config: { tension: 500, velocity: 40, friction: 60 },
-  });
-  const loadingTransitions = useTransition(loading, null, {
-    from: { opacity: 0, transform: 'scale(0.5)' },
-    enter: { opacity: 1, transform: 'scale(1)' },
-    leave: { opacity: 0, transform: 'scale(0.5)' },
-    config: { tension: 500, velocity: 40, friction: 60 },
-  });
 
-  return (
-    <>
-      {ReactDOM.createPortal(
-        <animated.div
-          className="fixed top-0 left-0 right-0 bottom-0 bg-gray-800 bg-opacity-50 w-full h-full z-50 flex justify-center items-center"
-          style={props.style}
-          onKeyDown={(e) => {
-            if (e.key === 'Escape') {
-              typeof onCancel === 'function' && backgroundClickable
-                ? onCancel()
-                : undefined;
-            }
-          }}
+  return ReactDOM.createPortal(
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <div
+      className="fixed top-0 left-0 right-0 bottom-0 bg-gray-800 bg-opacity-50 w-full h-full z-50 flex justify-center items-center"
+      onKeyDown={(e) => {
+        if (e.key === 'Escape') {
+          typeof onCancel === 'function' && backgroundClickable
+            ? onCancel()
+            : undefined;
+        }
+      }}
+    >
+      <Transition
+        enter="transition opacity-0 duration-300 transform scale-75"
+        enterFrom="opacity-0 scale-75"
+        enterTo="opacity-100 scale-100"
+        leave="transition opacity-100 duration-300"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+        show={loading}
+      >
+        <div style={{ position: 'absolute' }}>
+          <LoadingSpinner />
+        </div>
+      </Transition>
+      <Transition
+        enter="transition opacity-0 duration-300 transform scale-75"
+        enterFrom="opacity-0 scale-75"
+        enterTo="opacity-100 scale-100"
+        leave="transition opacity-100 duration-300"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+        show={!loading}
+      >
+        <div
+          className="inline-block align-bottom bg-gray-700 sm:rounded-lg px-4 pt-5 pb-4 text-left overflow-auto shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl w-full sm:p-6 max-h-full"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="modal-headline"
+          ref={modalRef}
         >
-          {loadingTransitions.map(
-            ({ props, item, key }) =>
-              item && (
-                <animated.div
-                  style={{ ...props, position: 'absolute' }}
-                  key={key}
+          <div className="sm:flex sm:items-center">
+            {iconSvg && (
+              <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-gray-600 text-white sm:mx-0 sm:h-10 sm:w-10">
+                {iconSvg}
+              </div>
+            )}
+            <div
+              className={`mt-3 text-center sm:mt-0 sm:text-left ${
+                iconSvg ? 'sm:ml-4' : 'mb-6'
+              }`}
+            >
+              {title && (
+                <h3
+                  className="text-lg leading-6 font-medium text-white"
+                  id="modal-headline"
                 >
-                  <LoadingSpinner />
-                </animated.div>
-              )
+                  {title}
+                </h3>
+              )}
+            </div>
+          </div>
+          {children && (
+            <div className="mt-4 text-sm leading-5 text-gray-300">
+              {children}
+            </div>
           )}
-          {containerTransitions.map(
-            ({ props, item, key }) =>
-              item && (
-                <animated.div
-                  style={props}
-                  className="inline-block align-bottom bg-gray-700 sm:rounded-lg px-4 pt-5 pb-4 text-left overflow-auto shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl w-full sm:p-6 max-h-full"
-                  role="dialog"
-                  aria-modal="true"
-                  aria-labelledby="modal-headline"
-                  key={key}
-                  ref={modalRef}
+          {(onCancel || onOk || onSecondary || onTertiary) && (
+            <div className="mt-5 sm:mt-4 flex justify-center sm:justify-start flex-row-reverse">
+              {typeof onOk === 'function' && (
+                <Button
+                  buttonType={okButtonType}
+                  onClick={onOk}
+                  className="ml-3"
+                  disabled={okDisabled}
                 >
-                  <div className="sm:flex sm:items-center">
-                    {iconSvg && (
-                      <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-gray-600 text-white sm:mx-0 sm:h-10 sm:w-10">
-                        {iconSvg}
-                      </div>
-                    )}
-                    <div
-                      className={`mt-3 text-center sm:mt-0 sm:text-left ${
-                        iconSvg ? 'sm:ml-4' : 'mb-6'
-                      }`}
-                    >
-                      {title && (
-                        <h3
-                          className="text-lg leading-6 font-medium text-white"
-                          id="modal-headline"
-                        >
-                          {title}
-                        </h3>
-                      )}
-                    </div>
-                  </div>
-                  {children && (
-                    <div className="mt-4 text-sm leading-5 text-gray-300">
-                      {children}
-                    </div>
-                  )}
-                  {(onCancel || onOk || onSecondary || onTertiary) && (
-                    <div className="mt-5 sm:mt-4 flex justify-center sm:justify-start flex-row-reverse">
-                      {typeof onOk === 'function' && (
-                        <Button
-                          buttonType={okButtonType}
-                          onClick={onOk}
-                          className="ml-3"
-                          disabled={okDisabled}
-                        >
-                          {okText ? okText : 'Ok'}
-                        </Button>
-                      )}
-                      {typeof onSecondary === 'function' && secondaryText && (
-                        <Button
-                          buttonType={secondaryButtonType}
-                          onClick={onSecondary}
-                          className="ml-3"
-                          disabled={secondaryDisabled}
-                        >
-                          {secondaryText}
-                        </Button>
-                      )}
-                      {typeof onTertiary === 'function' && tertiaryText && (
-                        <Button
-                          buttonType={tertiaryButtonType}
-                          onClick={onTertiary}
-                          className="ml-3"
-                          disabled={tertiaryDisabled}
-                        >
-                          {tertiaryText}
-                        </Button>
-                      )}
-                      {typeof onCancel === 'function' && (
-                        <Button
-                          buttonType={cancelButtonType}
-                          onClick={onCancel}
-                          className="ml-3 sm:ml-0 sm:px-4"
-                        >
-                          {cancelText
-                            ? cancelText
-                            : intl.formatMessage(globalMessages.cancel)}
-                        </Button>
-                      )}
-                    </div>
-                  )}
-                </animated.div>
-              )
+                  {okText ? okText : 'Ok'}
+                </Button>
+              )}
+              {typeof onSecondary === 'function' && secondaryText && (
+                <Button
+                  buttonType={secondaryButtonType}
+                  onClick={onSecondary}
+                  className="ml-3"
+                  disabled={secondaryDisabled}
+                >
+                  {secondaryText}
+                </Button>
+              )}
+              {typeof onTertiary === 'function' && tertiaryText && (
+                <Button
+                  buttonType={tertiaryButtonType}
+                  onClick={onTertiary}
+                  className="ml-3"
+                  disabled={tertiaryDisabled}
+                >
+                  {tertiaryText}
+                </Button>
+              )}
+              {typeof onCancel === 'function' && (
+                <Button
+                  buttonType={cancelButtonType}
+                  onClick={onCancel}
+                  className="ml-3 sm:ml-0 sm:px-4"
+                >
+                  {cancelText
+                    ? cancelText
+                    : intl.formatMessage(globalMessages.cancel)}
+                </Button>
+              )}
+            </div>
           )}
-        </animated.div>,
-        document.body
-      )}
-    </>
+        </div>
+      </Transition>
+    </div>,
+    document.body
   );
 };
 

src/components/Common/Table/index.tsx

@@ -0,0 +1,85 @@
+import React, { AllHTMLAttributes } from 'react';
+import { withProperties } from '../../../utils/typeHelpers';
+
+const TBody: React.FC = ({ children }) => {
+  return (
+    <tbody className="bg-gray-600 divide-y divide-gray-700">{children}</tbody>
+  );
+};
+
+const TH: React.FC<AllHTMLAttributes<HTMLTableHeaderCellElement>> = ({
+  children,
+  className,
+  ...props
+}) => {
+  const style = [
+    'px-6 py-3 bg-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider',
+  ];
+
+  if (className) {
+    style.push(className);
+  }
+
+  return (
+    <th className={style.join(' ')} {...props}>
+      {children}
+    </th>
+  );
+};
+
+interface TDProps extends AllHTMLAttributes<HTMLTableCellElement> {
+  alignText?: 'left' | 'center' | 'right';
+  noPadding?: boolean;
+}
+
+const TD: React.FC<TDProps> = ({
+  children,
+  alignText = 'left',
+  noPadding,
+  className,
+  ...props
+}) => {
+  const style = ['whitespace-nowrap text-sm leading-5 text-white'];
+
+  switch (alignText) {
+    case 'left':
+      style.push('text-left');
+      break;
+    case 'center':
+      style.push('text-center');
+      break;
+    case 'right':
+      style.push('text-right');
+      break;
+  }
+
+  if (!noPadding) {
+    style.push('px-6 py-4');
+  }
+
+  if (className) {
+    style.push(className);
+  }
+
+  return (
+    <td className={style.join(' ')} {...props}>
+      {children}
+    </td>
+  );
+};
+
+const Table: React.FC = ({ children }) => {
+  return (
+    <div className="flex flex-col">
+      <div className="my-2 overflow-x-auto -mx-6 sm:-mx-6 md:mx-4 lg:mx-4">
+        <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
+          <div className="shadow overflow-hidden sm:rounded-lg">
+            <table className="min-w-full">{children}</table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default withProperties(Table, { TH, TBody, TD });

src/components/Discover/index.tsx

@@ -7,13 +7,11 @@ import type {
 } from '../../../server/models/Search';
 import TitleCard from '../TitleCard';
 import PersonCard from '../PersonCard';
-import { MediaRequest } from '../../../server/entity/MediaRequest';
 import TmdbTitleCard from '../TitleCard/TmdbTitleCard';
 import Slider from '../Slider';
 import Link from 'next/link';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { LanguageContext } from '../../context/LanguageContext';
-import type Media from '../../../server/entity/Media';
 import type { MediaResultsResponse } from '../../../server/interfaces/api/mediaInterfaces';
 import type { RequestResultsResponse } from '../../../server/interfaces/api/requestInterfaces';
 import RequestCard from '../RequestCard';
@@ -59,9 +57,12 @@ const Discover: React.FC = () => {
     `/api/v1/discover/tv?language=${locale}`
   );
 
-  const { data: movieUpcomingData, error: movieUpcomingError } = useSWR<
-    MovieDiscoverResult
-  >(`/api/v1/discover/movies/upcoming?language=${locale}`);
+  const {
+    data: movieUpcomingData,
+    error: movieUpcomingError,
+  } = useSWR<MovieDiscoverResult>(
+    `/api/v1/discover/movies/upcoming?language=${locale}`
+  );
 
   const { data: trendingData, error: trendingError } = useSWR<MixedResult>(
     `/api/v1/discover/trending?language=${locale}`
@@ -71,9 +72,12 @@ const Discover: React.FC = () => {
     '/api/v1/media?filter=available&take=20&sort=modified'
   );
 
-  const { data: requests, error: requestError } = useSWR<
-    RequestResultsResponse
-  >('/api/v1/request?filter=unavailable&take=10&sort=modified&skip=0');
+  const {
+    data: requests,
+    error: requestError,
+  } = useSWR<RequestResultsResponse>(
+    '/api/v1/request?filter=unavailable&take=10&sort=modified&skip=0'
+  );
 
   return (
     <>
@@ -238,7 +242,11 @@ const Discover: React.FC = () => {
               );
             case 'person':
               return (
-                <PersonCard name={title.name} profilePath={title.profilePath} />
+                <PersonCard
+                  personId={title.id}
+                  name={title.name}
+                  profilePath={title.profilePath}
+                />
               );
           }
         })}

src/components/Layout/LanguagePicker/index.tsx

@@ -29,6 +29,26 @@ const availableLanguages: AvailableLanguageObject = {
     code: 'fr',
     display: 'Français',
   },
+  'nb-NO': {
+    code: 'nb-NO',
+    display: 'Norwegian Bokmål',
+  },
+  de: {
+    code: 'de',
+    display: 'German',
+  },
+  ru: {
+    code: 'ru',
+    display: 'Russian',
+  },
+  nl: {
+    code: 'nl',
+    display: 'Nederlands',
+  },
+  es: {
+    code: 'es',
+    display: 'Spanish',
+  },
 };
 
 const LanguagePicker: React.FC = () => {
@@ -61,10 +81,10 @@ const LanguagePicker: React.FC = () => {
       </div>
       <Transition
         show={isDropdownOpen}
-        enter="transition ease-out duration-100"
+        enter="transition ease-out duration-100 opacity-0"
         enterFrom="transform opacity-0 scale-95"
         enterTo="transform opacity-100 scale-100"
-        leave="transition ease-in duration-75"
+        leave="transition ease-in duration-75 opacity-100"
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >

src/components/Layout/Sidebar/index.tsx

@@ -1,9 +1,10 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useRef } from 'react';
 import Transition from '../../Transition';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { defineMessages, FormattedMessage } from 'react-intl';
 import { useUser, Permission } from '../../../hooks/useUser';
+import useClickOutside from '../../../hooks/useClickOutside';
 
 const messages = defineMessages({
   dashboard: 'Discover',
@@ -116,8 +117,10 @@ const SidebarLinks: SidebarLinkProps[] = [
 ];
 
 const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
+  const navRef = useRef<HTMLDivElement>(null);
   const router = useRouter();
   const { hasPermission } = useUser();
+  useClickOutside(navRef, () => setClosed());
   return (
     <>
       <div className="md:hidden">
@@ -166,7 +169,10 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                       </svg>
                     </button>
                   </div>
-                  <div className="flex-1 h-0 pt-5 pb-4 overflow-y-auto">
+                  <div
+                    ref={navRef}
+                    className="flex-1 h-0 pt-5 pb-4 overflow-y-auto"
+                  >
                     <div className="flex-shrink-0 flex items-center px-4">
                       <span className="text-xl text-gray-50">
                         <Link href="/">

src/components/Layout/index.tsx

@@ -6,6 +6,7 @@ import Notifications from './Notifications';
 import LanguagePicker from './LanguagePicker';
 import { useRouter } from 'next/router';
 import { defineMessages, FormattedMessage } from 'react-intl';
+import { Permission, useUser } from '../../hooks/useUser';
 
 const messages = defineMessages({
   alphawarning:
@@ -14,6 +15,7 @@ const messages = defineMessages({
 
 const Layout: React.FC = ({ children }) => {
   const [isSidebarOpen, setSidebarOpen] = useState(false);
+  const { hasPermission } = useUser();
   const router = useRouter();
 
   return (
@@ -57,7 +59,7 @@ const Layout: React.FC = ({ children }) => {
         >
           <div className="pt-2 pb-6 md:py-6">
             <div className="max-w-8xl mx-auto px-4 sm:px-6 md:px-8">
-              {router.pathname === '/' && (
+              {router.pathname === '/' && hasPermission(Permission.ADMIN) && (
                 <div className="rounded-md bg-indigo-700 p-4 mt-2">
                   <div className="flex">
                     <div className="flex-shrink-0">
@@ -85,7 +87,7 @@ const Layout: React.FC = ({ children }) => {
                           target="_blank"
                           rel="noreferrer"
                         >
-                          Github &rarr;
+                          GitHub &rarr;
                         </a>
                       </p>
                     </div>

src/components/Login/index.tsx

@@ -5,12 +5,15 @@ import axios from 'axios';
 import { useRouter } from 'next/dist/client/router';
 import ImageFader from '../Common/ImageFader';
 import { defineMessages, FormattedMessage } from 'react-intl';
+import Transition from '../Transition';
 
 const messages = defineMessages({
   signinplex: 'Sign in to continue',
 });
 
 const Login: React.FC = () => {
+  const [error, setError] = useState('');
+  const [isProcessing, setProcessing] = useState(false);
   const [authToken, setAuthToken] = useState<string | undefined>(undefined);
   const { user, revalidate } = useUser();
   const router = useRouter();
@@ -20,10 +23,17 @@ const Login: React.FC = () => {
   // ask swr to revalidate the user which _shouid_ come back with a valid user.
   useEffect(() => {
     const login = async () => {
-      const response = await axios.post('/api/v1/auth/login', { authToken });
+      setProcessing(true);
+      try {
+        const response = await axios.post('/api/v1/auth/login', { authToken });
 
-      if (response.data?.email) {
-        revalidate();
+        if (response.data?.email) {
+          revalidate();
+        }
+      } catch (e) {
+        setError(e.response.data.message);
+        setAuthToken(undefined);
+        setProcessing(false);
       }
     };
     if (authToken) {
@@ -64,7 +74,40 @@ const Login: React.FC = () => {
           className="bg-gray-800 bg-opacity-50 py-8 px-4 shadow sm:rounded-lg sm:px-10"
           style={{ backdropFilter: 'blur(5px)' }}
         >
+          <Transition
+            show={!!error}
+            enter="opacity-0 transition duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="opacity-100 transition duration-300"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="rounded-md bg-red-600 p-4 mb-4">
+              <div className="flex">
+                <div className="flex-shrink-0">
+                  <svg
+                    className="h-5 w-5 text-red-300"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </div>
+                <div className="ml-3">
+                  <h3 className="text-sm font-medium text-red-300">{error}</h3>
+                </div>
+              </div>
+            </div>
+          </Transition>
           <PlexLoginButton
+            isProcessing={isProcessing}
             onAuthToken={(authToken) => setAuthToken(authToken)}
           />
         </div>

src/components/MovieDetails/MovieCast/index.tsx

@@ -0,0 +1,66 @@
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import React, { useContext } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import useSWR from 'swr';
+import { MovieDetails } from '../../../../server/models/Movie';
+import { LanguageContext } from '../../../context/LanguageContext';
+import Error from '../../../pages/_error';
+import Header from '../../Common/Header';
+import LoadingSpinner from '../../Common/LoadingSpinner';
+import PersonCard from '../../PersonCard';
+
+const messages = defineMessages({
+  fullcast: 'Full Cast',
+});
+
+const MovieCast: React.FC = () => {
+  const router = useRouter();
+  const intl = useIntl();
+  const { locale } = useContext(LanguageContext);
+  const { data, error } = useSWR<MovieDetails>(
+    `/api/v1/movie/${router.query.movieId}?language=${locale}`
+  );
+
+  if (!data && !error) {
+    return <LoadingSpinner />;
+  }
+
+  if (!data) {
+    return <Error statusCode={404} />;
+  }
+
+  return (
+    <>
+      <Header
+        subtext={
+          <Link href={`/movie/${data.id}`}>
+            <a className="hover:underline">{data.title}</a>
+          </Link>
+        }
+      >
+        {intl.formatMessage(messages.fullcast)}
+      </Header>
+      <ul className="grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-8">
+        {data?.credits.cast.map((person) => {
+          return (
+            <li
+              key={person.id}
+              className="col-span-1 flex flex-col text-center items-center"
+            >
+              <PersonCard
+                name={person.name}
+                personId={person.id}
+                subName={person.character}
+                profilePath={person.profilePath}
+                canExpand
+              />
+            </li>
+          );
+        })}
+      </ul>
+    </>
+  );
+};
+
+export default MovieCast;

src/components/MovieDetails/index.tsx

@@ -193,14 +193,14 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
         )}
       </SlideOver>
       <div className="flex flex-col items-center md:flex-row md:items-end pt-4">
-        <div className="mr-4 flex-shrink-0">
+        <div className="md:mr-4 flex-shrink-0">
           <img
             src={`//image.tmdb.org/t/p/w600_and_h900_bestv2${data.posterPath}`}
             alt=""
             className="rounded md:rounded-lg shadow md:shadow-2xl w-32 md:w-52"
           />
         </div>
-        <div className="text-white flex flex-col mr-4 mt-4 md:mt-0 text-center md:text-left">
+        <div className="text-white flex flex-col md:mr-4 mt-4 md:mt-0 text-center md:text-left">
           <div className="mb-2">
             {data.mediaInfo?.status === MediaStatus.AVAILABLE && (
               <Badge badgeType="success">
@@ -352,7 +352,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
           {hasPermission(Permission.MANAGE_REQUESTS) && (
             <Button
               buttonType="default"
-              className="ml-2"
+              className="ml-2 first:ml-0"
               onClick={() => setShowManager(true)}
             >
               <svg
@@ -522,11 +522,12 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
       </div>
       <Slider
         sliderKey="cast"
-        isLoading={!data && !error}
+        isLoading={false}
         isEmpty={false}
         items={data?.credits.cast.slice(0, 20).map((person) => (
           <PersonCard
             key={`cast-item-${person.id}`}
+            personId={person.id}
             name={person.name}
             subName={person.character}
             profilePath={person.profilePath}

src/components/PersonCard/index.tsx

@@ -1,6 +1,8 @@
+import Link from 'next/link';
 import React from 'react';
 
 interface PersonCardProps {
+  personId: number;
   name: string;
   subName?: string;
   profilePath?: string;
@@ -8,50 +10,55 @@ interface PersonCardProps {
 }
 
 const PersonCard: React.FC<PersonCardProps> = ({
+  personId,
   name,
   subName,
   profilePath,
   canExpand = false,
 }) => {
   return (
-    <div
-      className={`relative ${
-        canExpand ? 'w-full' : 'w-36 sm:w-36 md:w-44'
-      } bg-gray-600 rounded-lg text-white shadow-lg hover:bg-gray-500 transition ease-in-out duration-150 cursor-pointer`}
-    >
-      <div style={{ paddingBottom: '150%' }}>
-        <div className="absolute inset-0 flex flex-col items-center justify-center">
-          {profilePath && (
-            <div
-              style={{
-                backgroundImage: `url(https://image.tmdb.org/t/p/w600_and_h900_bestv2${profilePath})`,
-              }}
-              className="rounded-full w-28 h-28 md:w-32 md:h-32 bg-cover bg-center mb-6"
-            />
-          )}
-          {!profilePath && (
-            <svg
-              className="w-28 h-28 md:w-32 md:h-32 mb-6"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                fillRule="evenodd"
-                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
-                clipRule="evenodd"
-              />
-            </svg>
-          )}
-          <div className="whitespace-normal text-center">{name}</div>
-          {subName && (
-            <div className="whitespace-normal text-center text-sm text-gray-300">
-              {subName}
+    <Link href={`/person/${personId}`}>
+      <a className={canExpand ? 'w-full' : 'w-36 sm:w-36 md:w-44'}>
+        <div
+          className={`relative ${
+            canExpand ? 'w-full' : 'w-36 sm:w-36 md:w-44'
+          } bg-gray-600 rounded-lg text-white shadow-lg hover:bg-gray-500 transition ease-in-out duration-150 cursor-pointer`}
+        >
+          <div style={{ paddingBottom: '150%' }}>
+            <div className="absolute inset-0 flex flex-col items-center justify-center">
+              {profilePath && (
+                <div
+                  style={{
+                    backgroundImage: `url(https://image.tmdb.org/t/p/w600_and_h900_bestv2${profilePath})`,
+                  }}
+                  className="rounded-full w-28 h-28 md:w-32 md:h-32 bg-cover bg-center mb-6"
+                />
+              )}
+              {!profilePath && (
+                <svg
+                  className="w-28 h-28 md:w-32 md:h-32 mb-6"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              )}
+              <div className="whitespace-normal text-center">{name}</div>
+              {subName && (
+                <div className="whitespace-normal text-center text-sm text-gray-300">
+                  {subName}
+                </div>
+              )}
             </div>
-          )}
+          </div>
         </div>
-      </div>
-    </div>
+      </a>
+    </Link>
   );
 };
 

src/components/PersonDetails/index.tsx

@@ -0,0 +1,131 @@
+import { useRouter } from 'next/router';
+import React, { useContext } from 'react';
+import useSWR from 'swr';
+import type { PersonDetail } from '../../../server/models/Person';
+import type { PersonCombinedCreditsResponse } from '../../../server/interfaces/api/personInterfaces';
+import Error from '../../pages/_error';
+import LoadingSpinner from '../Common/LoadingSpinner';
+import TitleCard from '../TitleCard';
+import { defineMessages, useIntl } from 'react-intl';
+import { LanguageContext } from '../../context/LanguageContext';
+
+const messages = defineMessages({
+  appearsin: 'Appears in',
+  ascharacter: 'as {character}',
+  nobiography: 'No biography available.',
+});
+
+const PersonDetails: React.FC = () => {
+  const intl = useIntl();
+  const { locale } = useContext(LanguageContext);
+  const router = useRouter();
+  const { data, error } = useSWR<PersonDetail>(
+    `/api/v1/person/${router.query.personId}`
+  );
+
+  const {
+    data: combinedCredits,
+    error: errorCombinedCredits,
+  } = useSWR<PersonCombinedCreditsResponse>(
+    `/api/v1/person/${router.query.personId}/combined_credits?language=${locale}`
+  );
+
+  if (!data && !error) {
+    return <LoadingSpinner />;
+  }
+
+  if (!data) {
+    return <Error statusCode={404} />;
+  }
+
+  const sortedCast = combinedCredits?.cast.sort((a, b) => {
+    const aDate =
+      a.mediaType === 'movie'
+        ? a.releaseDate?.slice(0, 4) ?? 0
+        : a.firstAirDate?.slice(0, 4) ?? 0;
+    const bDate =
+      b.mediaType === 'movie'
+        ? b.releaseDate?.slice(0, 4) ?? 0
+        : b.firstAirDate?.slice(0, 4) ?? 0;
+    if (aDate > bDate) {
+      return -1;
+    }
+    return 1;
+  });
+
+  const isLoading = !combinedCredits && !errorCombinedCredits;
+
+  return (
+    <>
+      <div className="flex mt-8 mb-8 flex-col md:flex-row items-center md:items-start">
+        {data.profilePath && (
+          <div
+            style={{
+              backgroundImage: `url(https://image.tmdb.org/t/p/w600_and_h900_bestv2${data.profilePath})`,
+            }}
+            className="rounded-full w-36 h-36 md:w-44 md:h-44 bg-cover bg-center mb-6 md:mb-0 mr-0 md:mr-6 flex-shrink-0"
+          />
+        )}
+        <div className="text-gray-300 text-center md:text-left">
+          <h1 className="text-3xl md:text-4xl text-white mb-4">{data.name}</h1>
+          <div>
+            {data.biography
+              ? data.biography
+              : intl.formatMessage(messages.nobiography)}
+          </div>
+        </div>
+      </div>
+      <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
+        <div className="flex-1 min-w-0">
+          <div className="inline-flex text-xl leading-7 text-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
+            <span>{intl.formatMessage(messages.appearsin)}</span>
+          </div>
+        </div>
+      </div>
+      <ul className="grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-8">
+        {sortedCast?.map((media) => {
+          return (
+            <li
+              key={`list-cast-item-${media.id}`}
+              className="col-span-1 flex flex-col text-center items-center"
+            >
+              <TitleCard
+                id={media.id}
+                title={media.mediaType === 'movie' ? media.title : media.name}
+                userScore={media.voteAverage}
+                year={
+                  media.mediaType === 'movie'
+                    ? media.releaseDate
+                    : media.firstAirDate
+                }
+                image={media.posterPath}
+                summary={media.overview}
+                mediaType={media.mediaType as 'movie' | 'tv'}
+                status={media.mediaInfo?.status}
+                canExpand
+              />
+              {media.character && (
+                <div className="mt-2 text-gray-300 text-xs truncate w-36 sm:w-36 md:w-44 text-center">
+                  {intl.formatMessage(messages.ascharacter, {
+                    character: media.character,
+                  })}
+                </div>
+              )}
+            </li>
+          );
+        })}
+        {isLoading &&
+          [...Array(20)].map((_item, i) => (
+            <li
+              key={`placeholder-${i}`}
+              className="col-span-1 flex flex-col text-center items-center"
+            >
+              <TitleCard.Placeholder canExpand />
+            </li>
+          ))}
+      </ul>
+    </>
+  );
+};
+
+export default PersonDetails;

src/components/PlexLoginButton/index.tsx

@@ -12,23 +12,23 @@ const plexOAuth = new PlexOAuth();
 
 interface PlexLoginButtonProps {
   onAuthToken: (authToken: string) => void;
+  isProcessing?: boolean;
   onError?: (message: string) => void;
 }
 
 const PlexLoginButton: React.FC<PlexLoginButtonProps> = ({
   onAuthToken,
   onError,
+  isProcessing,
 }) => {
   const intl = useIntl();
   const [loading, setLoading] = useState(false);
-  const [isProcessing, setIsProcessing] = useState(false);
 
   const getPlexLogin = async () => {
     setLoading(true);
     try {
       const authToken = await plexOAuth.login();
       setLoading(false);
-      setIsProcessing(true);
       onAuthToken(authToken);
     } catch (e) {
       if (onError) {

src/components/RequestCard/index.tsx

@@ -1,13 +1,11 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext } from 'react';
+import { useInView } from 'react-intersection-observer';
 import type { MediaRequest } from '../../../server/entity/MediaRequest';
 import type { TvDetails } from '../../../server/models/Tv';
 import type { MovieDetails } from '../../../server/models/Movie';
 import useSWR from 'swr';
 import { LanguageContext } from '../../context/LanguageContext';
-import {
-  MediaStatus,
-  MediaRequestStatus,
-} from '../../../server/constants/media';
+import { MediaRequestStatus } from '../../../server/constants/media';
 import Badge from '../Common/Badge';
 import { useUser, Permission } from '../../hooks/useUser';
 import axios from 'axios';
@@ -16,10 +14,12 @@ import { withProperties } from '../../utils/typeHelpers';
 import Link from 'next/link';
 import { defineMessages, useIntl } from 'react-intl';
 import globalMessages from '../../i18n/globalMessages';
+import StatusBadge from '../StatusBadge';
 
 const messages = defineMessages({
   requestedby: 'Requested by {username}',
   seasons: 'Seasons',
+  all: 'All',
 });
 
 const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => {
@@ -41,6 +41,9 @@ interface RequestCardProps {
 }
 
 const RequestCard: React.FC<RequestCardProps> = ({ request }) => {
+  const { ref, inView } = useInView({
+    triggerOnce: true,
+  });
   const intl = useIntl();
   const { hasPermission } = useUser();
   const { locale } = useContext(LanguageContext);
@@ -49,11 +52,13 @@ const RequestCard: React.FC<RequestCardProps> = ({ request }) => {
       ? `/api/v1/movie/${request.media.tmdbId}`
       : `/api/v1/tv/${request.media.tmdbId}`;
   const { data: title, error } = useSWR<MovieDetails | TvDetails>(
-    `${url}?language=${locale}`
+    inView ? `${url}?language=${locale}` : null
   );
-  const { data: requestData, error: requestError, revalidate } = useSWR<
-    MediaRequest
-  >(`/api/v1/request/${request.id}`, {
+  const {
+    data: requestData,
+    error: requestError,
+    revalidate,
+  } = useSWR<MediaRequest>(`/api/v1/request/${request.id}`, {
     initialData: request,
   });
 
@@ -66,7 +71,11 @@ const RequestCard: React.FC<RequestCardProps> = ({ request }) => {
   };
 
   if (!title && !error) {
-    return <RequestCardPlaceholder />;
+    return (
+      <div ref={ref}>
+        <RequestCardPlaceholder />
+      </div>
+    );
   }
 
   if (!requestData && !requestError) {
@@ -97,41 +106,34 @@ const RequestCard: React.FC<RequestCardProps> = ({ request }) => {
             {isMovie(title) ? title.title : title.name}
           </Link>
         </h2>
-        <div className="text-xs sm:text-sm">
+        <div className="text-xs sm:text-sm truncate">
           {intl.formatMessage(messages.requestedby, {
             username: requestData.requestedBy.username,
           })}
         </div>
-        <div className="mt-1 sm:mt-2">
-          {requestData.media.status === MediaStatus.AVAILABLE && (
-            <Badge badgeType="success">
-              {intl.formatMessage(globalMessages.available)}
-            </Badge>
-          )}
-          {requestData.media.status === MediaStatus.PARTIALLY_AVAILABLE && (
-            <Badge badgeType="success">
-              {intl.formatMessage(globalMessages.partiallyavailable)}
-            </Badge>
-          )}
-          {requestData.media.status === MediaStatus.PROCESSING && (
-            <Badge badgeType="danger">
-              {intl.formatMessage(globalMessages.unavailable)}
-            </Badge>
-          )}
-          {requestData.media.status === MediaStatus.PENDING && (
-            <Badge badgeType="warning">
-              {intl.formatMessage(globalMessages.pending)}
-            </Badge>
-          )}
-        </div>
+        {requestData.media.status && (
+          <div className="mt-1 sm:mt-2">
+            <StatusBadge status={requestData.media.status} />
+          </div>
+        )}
         {request.seasons.length > 0 && (
           <div className="hidden mt-2 text-sm sm:flex items-center">
             <span className="mr-2">{intl.formatMessage(messages.seasons)}</span>
-            {request.seasons.map((season) => (
-              <span key={`season-${season.id}`} className="mr-2">
-                <Badge>{season.seasonNumber}</Badge>
+            {!isMovie(title) &&
+            title.seasons.filter((season) => season.seasonNumber !== 0)
+              .length === request.seasons.length ? (
+              <span className="mr-2 uppercase">
+                <Badge>{intl.formatMessage(messages.all)}</Badge>
               </span>
-            ))}
+            ) : (
+              <div className="hide-scrollbar overflow-x-scroll">
+                {request.seasons.map((season) => (
+                  <span key={`season-${season.id}`} className="mr-2">
+                    <Badge>{season.seasonNumber}</Badge>
+                  </span>
+                ))}
+              </div>
+            )}
           </div>
         )}
         {requestData.status === MediaRequestStatus.PENDING &&

src/components/RequestList/RequestItem/index.tsx

@@ -0,0 +1,250 @@
+import React, { useContext } from 'react';
+import { useInView } from 'react-intersection-observer';
+import type { MediaRequest } from '../../../../server/entity/MediaRequest';
+import {
+  useIntl,
+  FormattedDate,
+  FormattedRelativeTime,
+  defineMessages,
+} from 'react-intl';
+import { useUser, Permission } from '../../../hooks/useUser';
+import { LanguageContext } from '../../../context/LanguageContext';
+import type { MovieDetails } from '../../../../server/models/Movie';
+import type { TvDetails } from '../../../../server/models/Tv';
+import useSWR from 'swr';
+import Badge from '../../Common/Badge';
+import StatusBadge from '../../StatusBadge';
+import Table from '../../Common/Table';
+import { MediaRequestStatus } from '../../../../server/constants/media';
+import Button from '../../Common/Button';
+import axios from 'axios';
+import globalMessages from '../../../i18n/globalMessages';
+import Link from 'next/link';
+
+const messages = defineMessages({
+  requestedby: 'Requested by {username}',
+  seasons: 'Seasons',
+  notavailable: 'N/A',
+});
+
+const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => {
+  return (movie as MovieDetails).title !== undefined;
+};
+
+interface RequestItemProps {
+  request: MediaRequest;
+  onDelete: () => void;
+}
+
+const RequestItem: React.FC<RequestItemProps> = ({ request, onDelete }) => {
+  const { ref, inView } = useInView({
+    triggerOnce: true,
+  });
+  const intl = useIntl();
+  const { hasPermission } = useUser();
+  const { locale } = useContext(LanguageContext);
+  const url =
+    request.type === 'movie'
+      ? `/api/v1/movie/${request.media.tmdbId}`
+      : `/api/v1/tv/${request.media.tmdbId}`;
+  const { data: title, error } = useSWR<MovieDetails | TvDetails>(
+    inView ? `${url}?language=${locale}` : null
+  );
+  const { data: requestData, revalidate } = useSWR<MediaRequest>(
+    `/api/v1/request/${request.id}`,
+    {
+      initialData: request,
+    }
+  );
+
+  const modifyRequest = async (type: 'approve' | 'decline') => {
+    const response = await axios.get(`/api/v1/request/${request.id}/${type}`);
+
+    if (response) {
+      revalidate();
+    }
+  };
+
+  const deleteRequest = async () => {
+    await axios.delete(`/api/v1/request/${request.id}`);
+
+    onDelete();
+  };
+
+  if (!title && !error) {
+    return (
+      <tr className="w-full bg-gray-800 animate-pulse h-24" ref={ref}>
+        <td colSpan={6}></td>
+      </tr>
+    );
+  }
+
+  if (!title || !requestData) {
+    return (
+      <tr className="w-full bg-gray-800 animate-pulse h-24">
+        <td colSpan={6}></td>
+      </tr>
+    );
+  }
+
+  return (
+    <tr className="w-full bg-gray-800 h-24 p-2 relative text-white">
+      <Table.TD
+        noPadding
+        className="w-20 px-4 relative hidden sm:table-cell align-middle"
+      >
+        <Link
+          href={
+            request.type === 'movie'
+              ? `/movie/${request.media.tmdbId}`
+              : `/tv/${request.media.tmdbId}`
+          }
+        >
+          <a>
+            <img
+              src={`//image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`}
+              alt=""
+              className="rounded-md shadow-sm cursor-pointer transition transform-gpu duration-300 scale-100 hover:scale-105 hover:shadow-md"
+            />
+          </a>
+        </Link>
+      </Table.TD>
+      <Table.TD>
+        <Link
+          href={
+            requestData.type === 'movie'
+              ? `/movie/${requestData.media.tmdbId}`
+              : `/tv/${requestData.media.tmdbId}`
+          }
+        >
+          <a className="text-white text-xl mr-2 hover:underline">
+            {isMovie(title) ? title.title : title.name}
+          </a>
+        </Link>
+        <div className="text-sm">
+          {intl.formatMessage(messages.requestedby, {
+            username: requestData.requestedBy.username,
+          })}
+        </div>
+        {requestData.seasons.length > 0 && (
+          <div className="hidden mt-2 text-sm sm:flex items-center">
+            <span className="mr-2">{intl.formatMessage(messages.seasons)}</span>
+            {requestData.seasons.map((season) => (
+              <span key={`season-${season.id}`} className="mr-2">
+                <Badge>{season.seasonNumber}</Badge>
+              </span>
+            ))}
+          </div>
+        )}
+      </Table.TD>
+      <Table.TD>
+        <StatusBadge status={requestData.media.status} />
+      </Table.TD>
+      <Table.TD>
+        <div className="flex flex-col">
+          <span className="text-sm text-gray-300">
+            <FormattedDate value={requestData.createdAt} />
+          </span>
+        </div>
+      </Table.TD>
+      <Table.TD>
+        <div className="flex flex-col">
+          {requestData.modifiedBy ? (
+            <span className="text-sm text-gray-300">
+              {requestData.modifiedBy.username} (
+              <FormattedRelativeTime
+                value={Math.floor(
+                  (new Date(requestData.updatedAt).getTime() - Date.now()) /
+                    1000
+                )}
+                updateIntervalInSeconds={1}
+              />
+              )
+            </span>
+          ) : (
+            <span className="text-sm text-gray-300">N/A</span>
+          )}
+        </div>
+      </Table.TD>
+      <Table.TD alignText="right">
+        {requestData.status !== MediaRequestStatus.PENDING &&
+          hasPermission(Permission.MANAGE_REQUESTS) && (
+            <Button
+              buttonType="danger"
+              buttonSize="sm"
+              onClick={() => deleteRequest()}
+            >
+              <svg
+                className="w-4 h-4 mr-0 sm:mr-1"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
+                  clipRule="evenodd"
+                />
+              </svg>
+              <span className="hidden sm:block">
+                {intl.formatMessage(globalMessages.delete)}
+              </span>
+            </Button>
+          )}
+        {requestData.status === MediaRequestStatus.PENDING &&
+          hasPermission(Permission.MANAGE_REQUESTS) && (
+            <>
+              <span className="mr-2">
+                <Button
+                  buttonType="success"
+                  buttonSize="sm"
+                  onClick={() => modifyRequest('approve')}
+                >
+                  <svg
+                    className="w-4 h-4 mr-0 sm:mr-1"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                  <span className="hidden sm:block">
+                    {intl.formatMessage(globalMessages.approve)}
+                  </span>
+                </Button>
+              </span>
+              <span>
+                <Button
+                  buttonType="danger"
+                  buttonSize="sm"
+                  onClick={() => modifyRequest('decline')}
+                >
+                  <svg
+                    className="w-4 h-4 mr-0 sm:mr-1"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                  <span className="hidden sm:block">
+                    {intl.formatMessage(globalMessages.decline)}
+                  </span>
+                </Button>
+              </span>
+            </>
+          )}
+      </Table.TD>
+    </tr>
+  );
+};
+
+export default RequestItem;

src/components/RequestList/index.tsx

@@ -0,0 +1,109 @@
+import React, { useState } from 'react';
+import useSWR from 'swr';
+import type { RequestResultsResponse } from '../../../server/interfaces/api/requestInterfaces';
+import LoadingSpinner from '../Common/LoadingSpinner';
+import RequestItem from './RequestItem';
+import Header from '../Common/Header';
+import Table from '../Common/Table';
+import Button from '../Common/Button';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  requests: 'Requests',
+  mediaInfo: 'Media Info',
+  status: 'Status',
+  requestedAt: 'Requested At',
+  modifiedBy: 'Last Modified By',
+  showingresults:
+    'Showing <strong>{from}</strong> to <strong>{to}</strong> of <strong>{total}</strong> results',
+  next: 'Next',
+  previous: 'Previous',
+});
+
+const RequestList: React.FC = () => {
+  const intl = useIntl();
+  const [pageIndex, setPageIndex] = useState(0);
+
+  const { data, error, revalidate } = useSWR<RequestResultsResponse>(
+    `/api/v1/request?take=10&skip=${pageIndex * 10}`
+  );
+  if (!data && !error) {
+    return <LoadingSpinner />;
+  }
+
+  if (!data) {
+    return <LoadingSpinner />;
+  }
+
+  const hasNextPage = data.pageInfo.pages > pageIndex + 1;
+  const hasPrevPage = pageIndex > 0;
+
+  return (
+    <>
+      <Header>{intl.formatMessage(messages.requests)}</Header>
+      <Table>
+        <thead>
+          <Table.TH className="hidden sm:table-cell"></Table.TH>
+          <Table.TH>{intl.formatMessage(messages.mediaInfo)}</Table.TH>
+          <Table.TH>{intl.formatMessage(messages.status)}</Table.TH>
+          <Table.TH>{intl.formatMessage(messages.requestedAt)}</Table.TH>
+          <Table.TH>{intl.formatMessage(messages.modifiedBy)}</Table.TH>
+          <Table.TH></Table.TH>
+        </thead>
+        <Table.TBody>
+          {data.results.map((request) => {
+            return (
+              <RequestItem
+                request={request}
+                key={`request-list-${request.id}`}
+                onDelete={() => revalidate()}
+              />
+            );
+          })}
+          <tr>
+            <Table.TD colSpan={6} noPadding>
+              <nav
+                className="bg-gray-700 px-4 py-3 flex items-center justify-between text-white sm:px-6"
+                aria-label="Pagination"
+              >
+                <div className="hidden sm:block">
+                  <p className="text-sm">
+                    {intl.formatMessage(messages.showingresults, {
+                      from: pageIndex * 10,
+                      to:
+                        data.results.length < 10
+                          ? pageIndex * 10 + data.results.length
+                          : pageIndex + 1 * 10,
+                      total: data.pageInfo.results,
+                      strong: function strong(msg) {
+                        return <span className="font-medium">{msg}</span>;
+                      },
+                    })}
+                  </p>
+                </div>
+                <div className="flex-1 flex justify-start sm:justify-end">
+                  <span className="mr-2">
+                    <Button
+                      disabled={!hasPrevPage}
+                      onClick={() => setPageIndex((current) => current - 1)}
+                    >
+                      {intl.formatMessage(messages.previous)}
+                    </Button>
+                  </span>
+                  <Button
+                    disabled={!hasNextPage}
+                    onClick={() => setPageIndex((current) => current + 1)}
+                  >
+                    {intl.formatMessage(messages.next)}
+                  </Button>
+                </div>
+              </nav>
+            </Table.TD>
+          </tr>
+        </Table.TBody>
+      </Table>
+    </>
+  );
+};
+
+export default RequestList;

src/components/RequestModal/MovieRequestModal.tsx

@@ -43,7 +43,6 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
   onComplete,
   tmdbId,
   onUpdating,
-  ...props
 }) => {
   const [isUpdating, setIsUpdating] = useState(false);
   const { addToast } = useToasts();
@@ -140,7 +139,6 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
         okButtonType={'danger'}
         cancelText={intl.formatMessage(messages.close)}
         iconSvg={<DownloadIcon className="w-6 h-6" />}
-        {...props}
       >
         {intl.formatMessage(messages.requestfrom, {
           username: activeRequest.requestedBy.username,
@@ -164,7 +162,6 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({
       }
       okButtonType={'primary'}
       iconSvg={<DownloadIcon className="w-6 h-6" />}
-      {...props}
     >
       {text}
     </Modal>

src/components/RequestModal/TvRequestModal.tsx

@@ -11,10 +11,10 @@ import {
   MediaStatus,
   MediaRequestStatus,
 } from '../../../server/constants/media';
-import { TvDetails, SeasonWithEpisodes } from '../../../server/models/Tv';
-import type SeasonRequest from '../../../server/entity/SeasonRequest';
+import { TvDetails } from '../../../server/models/Tv';
 import Badge from '../Common/Badge';
 import globalMessages from '../../i18n/globalMessages';
+import SeasonRequest from '../../../server/entity/SeasonRequest';
 
 const messages = defineMessages({
   requestadmin: 'Your request will be immediately approved.',
@@ -47,7 +47,6 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
   onComplete,
   tmdbId,
   onUpdating,
-  ...props
 }) => {
   const { addToast } = useToasts();
   const { data, error } = useSWR<TvDetails>(`/api/v1/tv/${tmdbId}`);
@@ -222,7 +221,6 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
           />
         </svg>
       }
-      {...props}
     >
       <div className="flex flex-col">
         <div className="-mx-4 sm:mx-0 overflow-auto max-h-96">

src/components/RequestModal/index.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
-import useSWR from 'swr';
 import MovieRequestModal from './MovieRequestModal';
-import type { MediaRequest } from '../../../server/entity/MediaRequest';
 import type { MediaStatus } from '../../../server/constants/media';
 import TvRequestModal from './TvRequestModal';
-import { useTransition, animated } from 'react-spring';
+import Transition from '../Transition';
 
 interface RequestModalProps {
   show: boolean;
@@ -21,53 +19,47 @@ const RequestModal: React.FC<RequestModalProps> = ({
   show,
   tmdbId,
   onComplete,
-  onError,
   onUpdating,
   onCancel,
 }) => {
-  const transitions = useTransition(show, null, {
-    from: { opacity: 0, backdropFilter: 'blur(0px)' },
-    enter: { opacity: 1, backdropFilter: 'blur(3px)' },
-    leave: { opacity: 0, backdropFilter: 'blur(0px)' },
-    config: { tension: 500, velocity: 40, friction: 60 },
-  });
-
   if (type === 'tv') {
     return (
-      <>
-        {transitions.map(
-          ({ props, item, key }) =>
-            item && (
-              <TvRequestModal
-                onComplete={onComplete}
-                onCancel={onCancel}
-                tmdbId={tmdbId}
-                onUpdating={onUpdating}
-                style={props}
-                key={key}
-              />
-            )
-        )}
-      </>
+      <Transition
+        enter="transition opacity-0 duration-300"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="transition opacity-100 duration-300"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+        show={show}
+      >
+        <TvRequestModal
+          onComplete={onComplete}
+          onCancel={onCancel}
+          tmdbId={tmdbId}
+          onUpdating={onUpdating}
+        />
+      </Transition>
     );
   }
 
   return (
-    <>
-      {transitions.map(
-        ({ props, item, key }) =>
-          item && (
-            <MovieRequestModal
-              onComplete={onComplete}
-              onCancel={onCancel}
-              tmdbId={tmdbId}
-              onUpdating={onUpdating}
-              style={props}
-              key={key}
-            />
-          )
-      )}
-    </>
+    <Transition
+      enter="transition opacity-0 duration-300"
+      enterFrom="opacity-0"
+      enterTo="opacity-100"
+      leave="transition opacity-100 duration-300"
+      leaveFrom="opacity-100"
+      leaveTo="opacity-0"
+      show={show}
+    >
+      <MovieRequestModal
+        onComplete={onComplete}
+        onCancel={onCancel}
+        tmdbId={tmdbId}
+        onUpdating={onUpdating}
+      />
+    </Transition>
   );
 };
 

src/components/Search/index.tsx

@@ -10,7 +10,6 @@ import ListView from '../Common/ListView';
 import { LanguageContext } from '../../context/LanguageContext';
 import { defineMessages, useIntl } from 'react-intl';
 import Header from '../Common/Header';
-import globalMessages from '../../i18n/globalMessages';
 
 const messages = defineMessages({
   searchresults: 'Search Results',
@@ -66,25 +65,7 @@ const Search: React.FC = () => {
 
   return (
     <>
-      <div className="md:flex md:items-center md:justify-between mb-6 sm:mb-0 mt-6">
-        <Header>{intl.formatMessage(messages.searchresults)}</Header>
-        <div className="mt-4 flex md:mt-0 md:ml-4">
-          <span className="relative z-0 inline-flex shadow-sm rounded-md">
-            <button
-              type="button"
-              className="relative inline-flex items-center px-4 py-2 rounded-l-md border border-indigo-900 bg-indigo-500 hover:bg-indigo-400 text-sm leading-5 font-medium text-gray-100 hover:text-white focus:z-10 focus:outline-none focus:border-blue-300 focus:ring-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
-            >
-              {intl.formatMessage(globalMessages.movies)}
-            </button>
-            <button
-              type="button"
-              className="-ml-px relative inline-flex items-center px-4 py-2 rounded-r-md border border-indigo-900 bg-indigo-500   text-sm leading-5 font-medium text-gray-100 hover:text-white focus:z-10 focus:outline-none focus:border-blue-300 focus:ring-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
-            >
-              {intl.formatMessage(globalMessages.tvshows)}
-            </button>
-          </span>
-        </div>
-      </div>
+      <Header>{intl.formatMessage(messages.searchresults)}</Header>
       <ListView
         items={titles}
         isEmpty={isEmpty}

src/components/Settings/Notifications/NotificationsDiscord.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Field, Form, Formik } from 'formik';
 import useSWR from 'swr';
 import LoadingSpinner from '../../Common/LoadingSpinner';
@@ -6,6 +6,7 @@ import Button from '../../Common/Button';
 import { defineMessages, useIntl } from 'react-intl';
 import Axios from 'axios';
 import * as Yup from 'yup';
+import { useToasts } from 'react-toast-notifications';
 
 const messages = defineMessages({
   save: 'Save Changes',
@@ -14,10 +15,13 @@ const messages = defineMessages({
   webhookUrl: 'Webhook URL',
   validationWebhookUrlRequired: 'You must provide a webhook URL',
   webhookUrlPlaceholder: 'Server Settings -> Integrations -> Webhooks',
+  discordsettingssaved: 'Discord notification settings saved!',
+  discordsettingsfailed: 'Discord notification settings failed to save.',
 });
 
 const NotificationsDiscord: React.FC = () => {
   const intl = useIntl();
+  const { addToast } = useToasts();
   const { data, error, revalidate } = useSWR(
     '/api/v1/settings/notifications/discord'
   );
@@ -49,8 +53,15 @@ const NotificationsDiscord: React.FC = () => {
               webhookUrl: values.webhookUrl,
             },
           });
+          addToast(intl.formatMessage(messages.discordsettingssaved), {
+            appearance: 'success',
+            autoDismiss: true,
+          });
         } catch (e) {
-          // TODO show error
+          addToast(intl.formatMessage(messages.discordsettingsfailed), {
+            appearance: 'error',
+            autoDismiss: true,
+          });
         } finally {
           revalidate();
         }

src/components/Settings/Notifications/NotificationsEmail.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Field, Form, Formik } from 'formik';
 import useSWR from 'swr';
 import LoadingSpinner from '../../Common/LoadingSpinner';
@@ -6,6 +6,7 @@ import Button from '../../Common/Button';
 import { defineMessages, useIntl } from 'react-intl';
 import Axios from 'axios';
 import * as Yup from 'yup';
+import { useToasts } from 'react-toast-notifications';
 
 const messages = defineMessages({
   save: 'Save Changes',
@@ -20,10 +21,13 @@ const messages = defineMessages({
   enableSsl: 'Enable SSL',
   authUser: 'Auth User',
   authPass: 'Auth Pass',
+  emailsettingssaved: 'Email notification settings saved!',
+  emailsettingsfailed: 'Email notification settings failed to save.',
 });
 
 const NotificationsEmail: React.FC = () => {
   const intl = useIntl();
+  const { addToast } = useToasts();
   const { data, error, revalidate } = useSWR(
     '/api/v1/settings/notifications/email'
   );
@@ -65,14 +69,21 @@ const NotificationsEmail: React.FC = () => {
             options: {
               emailFrom: values.emailFrom,
               smtpHost: values.smtpHost,
-              smtpPort: values.smtpPort,
+              smtpPort: Number(values.smtpPort),
               secure: values.secure,
               authUser: values.authUser,
               authPass: values.authPass,
             },
           });
+          addToast(intl.formatMessage(messages.emailsettingssaved), {
+            appearance: 'success',
+            autoDismiss: true,
+          });
         } catch (e) {
-          // TODO show error
+          addToast(intl.formatMessage(messages.emailsettingsfailed), {
+            appearance: 'error',
+            autoDismiss: true,
+          });
         } finally {
           revalidate();
         }
@@ -86,7 +97,7 @@ const NotificationsEmail: React.FC = () => {
                 htmlFor="isDefault"
                 className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
               >
-                Agent Enabled
+                {intl.formatMessage(messages.agentenabled)}
               </label>
               <div className="mt-1 sm:mt-0 sm:col-span-2">
                 <Field

src/components/Settings/RadarrModal/index.tsx

@@ -11,11 +11,13 @@ import { defineMessages, useIntl } from 'react-intl';
 const messages = defineMessages({
   createradarr: 'Create New Radarr Server',
   editradarr: 'Edit Radarr Server',
+  validationNameRequired: 'You must provide a server name',
   validationHostnameRequired: 'You must provide a hostname/IP',
   validationPortRequired: 'You must provide a port',
   validationApiKeyRequired: 'You must provide an API key',
   validationRootFolderRequired: 'You must select a root folder',
   validationProfileRequired: 'You must select a profile',
+  validationMinimumAvailabilityRequired: 'You must select minimum availability',
   toastRadarrTestSuccess: 'Radarr connection established!',
   toastRadarrTestFailure: 'Failed to connect to Radarr Server',
   saving: 'Saving...',
@@ -40,6 +42,10 @@ const messages = defineMessages({
   selectQualityProfile: 'Select a Quality Profile',
   selectRootFolder: 'Select a Root Folder',
   selectMinimumAvailability: 'Select minimum availability',
+  loadingprofiles: 'Loading quality profiles…',
+  testFirstQualityProfiles: 'Test your connection to load quality profiles',
+  loadingrootfolders: 'Loading root folders…',
+  testFirstRootFolders: 'Test your connection to load root folders',
 });
 
 interface TestResponse {
@@ -74,6 +80,9 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
     rootFolders: [],
   });
   const RadarrSettingsSchema = Yup.object().shape({
+    name: Yup.string().required(
+      intl.formatMessage(messages.validationNameRequired)
+    ),
     hostname: Yup.string().required(
       intl.formatMessage(messages.validationHostnameRequired)
     ),
@@ -81,10 +90,15 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
       intl.formatMessage(messages.validationPortRequired)
     ),
     apiKey: Yup.string().required(intl.formatMessage(messages.apiKey)),
-    rootFolder: Yup.string().required(intl.formatMessage(messages.rootfolder)),
+    rootFolder: Yup.string().required(
+      intl.formatMessage(messages.validationRootFolderRequired)
+    ),
     activeProfileId: Yup.string().required(
       intl.formatMessage(messages.validationProfileRequired)
     ),
+    minimumAvailability: Yup.string().required(
+      intl.formatMessage(messages.validationMinimumAvailabilityRequired)
+    ),
   });
 
   const testConnection = useCallback(
@@ -108,7 +122,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
           {
             hostname,
             apiKey,
-            port,
+            port: Number(port),
             baseUrl,
             useSsl,
           }
@@ -171,7 +185,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
           baseUrl: radarr?.baseUrl,
           activeProfileId: radarr?.activeProfileId,
           rootFolder: radarr?.activeDirectory,
-          minimumAvailability: radarr?.minimumAvailability,
+          minimumAvailability: radarr?.minimumAvailability ?? 'released',
           isDefault: radarr?.isDefault ?? false,
           is4k: radarr?.is4k ?? false,
         }}
@@ -185,11 +199,11 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
             const submission = {
               name: values.name,
               hostname: values.hostname,
-              port: values.port,
+              port: Number(values.port),
               apiKey: values.apiKey,
               useSsl: values.ssl,
               baseUrl: values.baseUrl,
-              activeProfileId: values.activeProfileId,
+              activeProfileId: Number(values.activeProfileId),
               activeProfileName: profileName,
               activeDirectory: values.rootFolder,
               is4k: values.is4k,
@@ -218,6 +232,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
           handleSubmit,
           setFieldValue,
           isSubmitting,
+          isValid,
         }) => {
           return (
             <Modal
@@ -226,7 +241,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
               okText={
                 isSubmitting
                   ? intl.formatMessage(messages.saving)
-                  : !!radarr
+                  : radarr
                   ? intl.formatMessage(messages.save)
                   : intl.formatMessage(messages.add)
               }
@@ -250,7 +265,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
               secondaryDisabled={
                 !values.apiKey || !values.hostname || !values.port || isTesting
               }
-              okDisabled={!isValidated || isSubmitting || isTesting}
+              okDisabled={!isValidated || isSubmitting || isTesting || !isValid}
               onOk={() => handleSubmit()}
               title={
                 !radarr
@@ -312,6 +327,9 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                   </label>
                   <div className="mt-1 sm:mt-0 sm:col-span-2">
                     <div className="max-w-lg flex rounded-md shadow-sm">
+                      <span className="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-500 bg-gray-600 text-gray-100 sm:text-sm cursor-default">
+                        {values.ssl ? 'https://' : 'http://'}
+                      </span>
                       <Field
                         id="hostname"
                         name="hostname"
@@ -321,7 +339,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                           setIsValidated(false);
                           setFieldValue('hostname', e.target.value);
                         }}
-                        className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
+                        className="flex-1 form-input block w-full min-w-0 rounded-r-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
                       />
                     </div>
                     {errors.hostname && touched.hostname && (
@@ -442,10 +460,17 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                         as="select"
                         id="activeProfileId"
                         name="activeProfileId"
-                        className="mt-1 form-select rounded-md block w-full pl-3 pr-10 py-2 text-base leading-6 bg-gray-700 border-gray-500 focus:outline-none focus:ring-blue focus:border-gray-500 sm:text-sm sm:leading-5"
+                        disabled={!isValidated || isTesting}
+                        className="mt-1 form-select rounded-md block w-full pl-3 pr-10 py-2 text-base leading-6 bg-gray-700 border-gray-500 focus:outline-none focus:ring-blue focus:border-gray-500 sm:text-sm sm:leading-5 disabled:opacity-50"
                       >
                         <option value="">
-                          {intl.formatMessage(messages.selectQualityProfile)}
+                          {isTesting
+                            ? intl.formatMessage(messages.loadingprofiles)
+                            : !isValidated
+                            ? intl.formatMessage(
+                                messages.testFirstQualityProfiles
+                              )
+                            : intl.formatMessage(messages.selectQualityProfile)}
                         </option>
                         {testResponse.profiles.length > 0 &&
                           testResponse.profiles.map((profile) => (
@@ -478,10 +503,15 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                         as="select"
                         id="rootFolder"
                         name="rootFolder"
-                        className="mt-1 form-select rounded-md block w-full pl-3 pr-10 py-2 text-base leading-6 bg-gray-700 border-gray-500 focus:outline-none focus:ring-blue focus:border-gray-500 sm:text-sm sm:leading-5"
+                        disabled={!isValidated || isTesting}
+                        className="mt-1 form-select rounded-md block w-full pl-3 pr-10 py-2 text-base leading-6 bg-gray-700 border-gray-500 focus:outline-none focus:ring-blue focus:border-gray-500 sm:text-sm sm:leading-5 disabled:opacity-50"
                       >
                         <option value="">
-                          {intl.formatMessage(messages.selectRootFolder)}
+                          {isTesting
+                            ? intl.formatMessage(messages.loadingrootfolders)
+                            : !isValidated
+                            ? intl.formatMessage(messages.testFirstRootFolders)
+                            : intl.formatMessage(messages.selectRootFolder)}
                         </option>
                         {testResponse.rootFolders.length > 0 &&
                           testResponse.rootFolders.map((folder) => (
@@ -516,17 +546,18 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                         name="minimumAvailability"
                         className="mt-1 form-select rounded-md block w-full pl-3 pr-10 py-2 text-base leading-6 bg-gray-700 border-gray-500 focus:outline-none focus:ring-blue focus:border-gray-500 sm:text-sm sm:leading-5"
                       >
-                        <option value="">
-                          {intl.formatMessage(
-                            messages.selectMinimumAvailability
-                          )}
-                        </option>
                         <option value="announced">Announced</option>
                         <option value="inCinemas">In Cinemas</option>
                         <option value="released">Released</option>
                         <option value="preDB">PreDB</option>
                       </Field>
                     </div>
+                    {errors.minimumAvailability &&
+                      touched.minimumAvailability && (
+                        <div className="text-red-500 mt-2">
+                          {errors.minimumAvailability}
+                        </div>
+                      )}
                   </div>
                 </div>
                 <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">

src/components/Settings/SettingsAbout/index.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import useSWR from 'swr';
+import Error from '../../../pages/_error';
+import List from '../../Common/List';
+import LoadingSpinner from '../../Common/LoadingSpinner';
+import { SettingsAboutResponse } from '../../../../server/interfaces/api/settingsInterfaces';
+import { defineMessages, FormattedNumber, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  overseerrinformation: 'Overseerr Information',
+  version: 'Version',
+  totalmedia: 'Total Media',
+  totalrequests: 'Total Requests',
+  gettingsupport: 'Getting Support',
+  githubdiscussions: 'GitHub Discussions',
+  clickheretojoindiscord: 'Click here to join our Discord server.',
+});
+
+const SettingsAbout: React.FC = () => {
+  const intl = useIntl();
+  const { data, error } = useSWR<SettingsAboutResponse>(
+    '/api/v1/settings/about'
+  );
+
+  if (error) {
+    return <Error statusCode={500} />;
+  }
+
+  if (!data && !error) {
+    return <LoadingSpinner />;
+  }
+
+  if (!data) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <>
+      <div className="mb-8">
+        <List title={intl.formatMessage(messages.overseerrinformation)}>
+          <List.Item title={intl.formatMessage(messages.version)}>
+            {data.version}
+          </List.Item>
+          <List.Item title={intl.formatMessage(messages.totalmedia)}>
+            <FormattedNumber value={data.totalMediaItems} />
+          </List.Item>
+          <List.Item title={intl.formatMessage(messages.totalrequests)}>
+            <FormattedNumber value={data.totalRequests} />
+          </List.Item>
+        </List>
+      </div>
+      <div className="mb-8">
+        <List title={intl.formatMessage(messages.gettingsupport)}>
+          <List.Item title={intl.formatMessage(messages.githubdiscussions)}>
+            <a
+              href="https://github.com/sct/overseerr/discussions"
+              target="_blank"
+              rel="noreferrer"
+              className="text-indigo-500 hover:underline"
+            >
+              https://github.com/sct/overseerr/discussions
+            </a>
+          </List.Item>
+          <List.Item title="Discord">
+            <a
+              href="https://discord.gg/PkCWJSeCk7"
+              target="_blank"
+              rel="noreferrer"
+              className="text-indigo-500 hover:underline"
+            >
+              {intl.formatMessage(messages.clickheretojoindiscord)}
+            </a>
+          </List.Item>
+        </List>
+      </div>
+    </>
+  );
+};
+
+export default SettingsAbout;

src/components/Settings/SettingsJobs.tsx

@@ -3,6 +3,7 @@ import useSWR from 'swr';
 import LoadingSpinner from '../Common/LoadingSpinner';
 import { FormattedRelativeTime, defineMessages, useIntl } from 'react-intl';
 import Button from '../Common/Button';
+import Table from '../Common/Table';
 
 const messages = defineMessages({
   jobname: 'Job Name',
@@ -21,55 +22,38 @@ const SettingsJobs: React.FC = () => {
   }
 
   return (
-    <div className="flex flex-col">
-      <div className="my-2 overflow-x-auto -mx-6 sm:-mx-6 md:mx-4 lg:mx-4">
-        <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
-          <div className="shadow overflow-hidden sm:rounded-lg">
-            <table className="min-w-full">
-              <thead>
-                <tr>
-                  <th className="px-6 py-3 bg-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
-                    {intl.formatMessage(messages.jobname)}
-                  </th>
-                  <th className="px-6 py-3 bg-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
-                    {intl.formatMessage(messages.nextexecution)}
-                  </th>
-                  <th className="px-6 py-3 bg-gray-500"></th>
-                </tr>
-              </thead>
-              <tbody className="bg-gray-600 divide-y divide-gray-700">
-                {data?.map((job, index) => (
-                  <tr key={`job-list-${index}`}>
-                    <td className="px-6 py-4 whitespace-nowrap">
-                      <div className="text-sm leading-5 text-white">
-                        {job.name}
-                      </div>
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap">
-                      <div className="text-sm leading-5 text-white">
-                        <FormattedRelativeTime
-                          value={Math.floor(
-                            (new Date(job.nextExecutionTime).getTime() -
-                              Date.now()) /
-                              1000
-                          )}
-                          updateIntervalInSeconds={1}
-                        />
-                      </div>
-                    </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-right text-sm leading-5 font-medium">
-                      <Button buttonType="primary">
-                        {intl.formatMessage(messages.runnow)}
-                      </Button>
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    </div>
+    <Table>
+      <thead>
+        <Table.TH>{intl.formatMessage(messages.jobname)}</Table.TH>
+        <Table.TH>{intl.formatMessage(messages.nextexecution)}</Table.TH>
+        <Table.TH></Table.TH>
+      </thead>
+      <Table.TBody>
+        {data?.map((job, index) => (
+          <tr key={`job-list-${index}`}>
+            <Table.TD>
+              <div className="text-sm leading-5 text-white">{job.name}</div>
+            </Table.TD>
+            <Table.TD>
+              <div className="text-sm leading-5 text-white">
+                <FormattedRelativeTime
+                  value={Math.floor(
+                    (new Date(job.nextExecutionTime).getTime() - Date.now()) /
+                      1000
+                  )}
+                  updateIntervalInSeconds={1}
+                />
+              </div>
+            </Table.TD>
+            <Table.TD alignText="right">
+              <Button buttonType="primary" disabled>
+                {intl.formatMessage(messages.runnow)}
+              </Button>
+            </Table.TD>
+          </tr>
+        ))}
+      </Table.TBody>
+    </Table>
   );
 };
 

src/components/Settings/SettingsLayout.tsx

@@ -80,7 +80,7 @@ const SettingsLayout: React.FC = ({ children }) => {
       <Link href={route}>
         <a
           className={`whitespace-nowrap ml-8 first:ml-0 py-4 px-1 border-b-2 border-transparent font-medium text-sm leading-5 ${
-            !!router.pathname.match(regex) ? activeLinkColor : inactiveLinkColor
+            router.pathname.match(regex) ? activeLinkColor : inactiveLinkColor
           }`}
           aria-current="page"
         >

src/components/Settings/SettingsLogs/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+// We will localize this file when the complete version is released.
+
+const SettingsLogs: React.FC = () => {
+  return (
+    <>
+      <div className="leading-loose text-gray-300 text-sm">
+        Logs page is still being built. For now, you can access your logs
+        directly in <code>stdout</code> (container logs) or looking in{' '}
+        <code>/app/config/logs/overseerr.logs</code>
+      </div>
+    </>
+  );
+};
+
+export default SettingsLogs;

src/components/Settings/SettingsMain.tsx

@@ -7,6 +7,7 @@ import { Form, Formik, Field } from 'formik';
 import axios from 'axios';
 import Button from '../Common/Button';
 import { defineMessages, useIntl } from 'react-intl';
+import { useUser, Permission } from '../../hooks/useUser';
 
 const messages = defineMessages({
   generalsettings: 'General Settings',
@@ -19,6 +20,7 @@ const messages = defineMessages({
 });
 
 const SettingsMain: React.FC = () => {
+  const { hasPermission } = useUser();
   const intl = useIntl();
   const { data, error, revalidate } = useSWR<MainSettings>(
     '/api/v1/settings/main'
@@ -41,7 +43,6 @@ const SettingsMain: React.FC = () => {
       <div className="mt-6 sm:mt-5">
         <Formik
           initialValues={{
-            apiKey: data?.apiKey,
             applicationUrl: data?.applicationUrl,
           }}
           onSubmit={async (values) => {
@@ -56,43 +57,45 @@ const SettingsMain: React.FC = () => {
             }
           }}
         >
-          {({ errors, touched, isSubmitting }) => {
+          {({ isSubmitting }) => {
             return (
               <Form>
-                <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
-                  <label
-                    htmlFor="username"
-                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
-                  >
-                    {intl.formatMessage(messages.apikey)}
-                  </label>
-                  <div className="mt-1 sm:mt-0 sm:col-span-2">
-                    <div className="max-w-lg flex rounded-md shadow-sm">
-                      <input
-                        type="text"
-                        id="username"
-                        className="flex-1 form-input block w-full min-w-0 rounded-none rounded-l-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
-                        value={data?.apiKey}
-                        readOnly
-                      />
-                      <CopyButton textToCopy={data?.apiKey ?? ''} />
-                      <button className="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-500 text-sm leading-5 font-medium rounded-r-md text-white bg-indigo-500  hover:bg-indigo-400 focus:outline-none focus:ring-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
-                        <svg
-                          className="w-5 h-5"
-                          fill="currentColor"
-                          viewBox="0 0 20 20"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            fillRule="evenodd"
-                            d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
-                            clipRule="evenodd"
-                          />
-                        </svg>
-                      </button>
+                {hasPermission(Permission.ADMIN) && (
+                  <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
+                    <label
+                      htmlFor="username"
+                      className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                    >
+                      {intl.formatMessage(messages.apikey)}
+                    </label>
+                    <div className="mt-1 sm:mt-0 sm:col-span-2">
+                      <div className="max-w-lg flex rounded-md shadow-sm">
+                        <input
+                          type="text"
+                          id="apiKey"
+                          className="flex-1 form-input block w-full min-w-0 rounded-none rounded-l-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
+                          value={data?.apiKey}
+                          readOnly
+                        />
+                        <CopyButton textToCopy={data?.apiKey ?? ''} />
+                        <button className="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-500 text-sm leading-5 font-medium rounded-r-md text-white bg-indigo-500  hover:bg-indigo-400 focus:outline-none focus:ring-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
+                          <svg
+                            className="w-5 h-5"
+                            fill="currentColor"
+                            viewBox="0 0 20 20"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              fillRule="evenodd"
+                              d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
+                              clipRule="evenodd"
+                            />
+                          </svg>
+                        </button>
+                      </div>
                     </div>
                   </div>
-                </div>
+                )}
                 <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
                   <label
                     htmlFor="name"

src/components/Settings/SettingsNotifications.tsx

@@ -49,7 +49,7 @@ const SettingsNotifications: React.FC = ({ children }) => {
       <Link href={route}>
         <a
           className={`whitespace-nowrap ml-8 first:ml-0 px-3 py-2 font-medium text-sm rounded-md ${
-            !!router.pathname.match(regex) ? activeLinkColor : inactiveLinkColor
+            router.pathname.match(regex) ? activeLinkColor : inactiveLinkColor
           }`}
           aria-current="page"
         >

src/components/Settings/SettingsPlex.tsx

@@ -2,21 +2,23 @@ import React, { useState } from 'react';
 import LoadingSpinner from '../Common/LoadingSpinner';
 import type { PlexSettings } from '../../../server/lib/settings';
 import useSWR from 'swr';
-import { useFormik } from 'formik';
+import { Formik, Field } from 'formik';
 import Button from '../Common/Button';
 import axios from 'axios';
 import LibraryItem from './LibraryItem';
 import Badge from '../Common/Badge';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import * as Yup from 'yup';
 
 const messages = defineMessages({
   plexsettings: 'Plex Settings',
   plexsettingsDescription:
     'Configure the settings for your Plex server. Overseerr uses your Plex server to scan your library at an interval and see what content is available.',
-  servername: 'Server Name (Automatically Set)',
+  servername: 'Server Name (Automatically set after you save)',
   servernamePlaceholder: 'Plex Server Name',
   hostname: 'Hostname/IP',
   port: 'Port',
+  ssl: 'SSL',
   save: 'Save Changes',
   saving: 'Saving...',
   plexlibraries: 'Plex Libraries',
@@ -32,6 +34,8 @@ const messages = defineMessages({
   librariesRemaining: 'Libraries Remaining: {count}',
   startscan: 'Start Scan',
   cancelscan: 'Cancel Scan',
+  validationHostnameRequired: 'You must provide a hostname/IP',
+  validationPortRequired: 'You must provide a port',
 });
 
 interface Library {
@@ -64,33 +68,15 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
     }
   );
   const [isSyncing, setIsSyncing] = useState(false);
-  const [isUpdating, setIsUpdating] = useState(false);
   const [submitError, setSubmitError] = useState<string | null>(null);
-  const formik = useFormik({
-    initialValues: {
-      hostname: data?.ip,
-      port: data?.port,
-    },
-    enableReinitialize: true,
-    onSubmit: async (values) => {
-      setSubmitError(null);
-      setIsUpdating(true);
-      try {
-        await axios.post('/api/v1/settings/plex', {
-          ip: values.hostname,
-          port: values.port,
-        } as PlexSettings);
 
-        revalidate();
-        if (onComplete) {
-          onComplete();
-        }
-      } catch (e) {
-        setSubmitError(e.response.data.message);
-      } finally {
-        setIsUpdating(false);
-      }
-    },
+  const PlexSettingsSchema = Yup.object().shape({
+    hostname: Yup.string().required(
+      intl.formatMessage(messages.validationHostnameRequired)
+    ),
+    port: Yup.number().required(
+      intl.formatMessage(messages.validationPortRequired)
+    ),
   });
 
   const activeLibraries =
@@ -164,91 +150,157 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
           <FormattedMessage {...messages.plexsettingsDescription} />
         </p>
       </div>
-      <form onSubmit={formik.handleSubmit}>
-        <div className="mt-6 sm:mt-5">
-          {submitError && (
-            <div className="bg-red-700 text-white p-4 rounded-md mb-6">
-              {submitError}
-            </div>
-          )}
-          <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
-            <label
-              htmlFor="name"
-              className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
-            >
-              <FormattedMessage {...messages.servername} />
-            </label>
-            <div className="mt-1 sm:mt-0 sm:col-span-2">
-              <div className="max-w-lg flex rounded-md shadow-sm">
-                <input
-                  type="text"
-                  id="name"
-                  name="name"
-                  placeholder={intl.formatMessage(
-                    messages.servernamePlaceholder
-                  )}
-                  value={data?.name}
-                  readOnly
-                  className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
-                />
+      <Formik
+        initialValues={{
+          hostname: data?.ip,
+          port: data?.port,
+          useSsl: data?.useSsl,
+        }}
+        enableReinitialize
+        validationSchema={PlexSettingsSchema}
+        onSubmit={async (values) => {
+          setSubmitError(null);
+          try {
+            await axios.post('/api/v1/settings/plex', {
+              ip: values.hostname,
+              port: Number(values.port),
+              useSsl: values.useSsl,
+            } as PlexSettings);
+
+            revalidate();
+            if (onComplete) {
+              onComplete();
+            }
+          } catch (e) {
+            setSubmitError(e.response.data.message);
+          }
+        }}
+      >
+        {({
+          errors,
+          touched,
+          values,
+          handleSubmit,
+          setFieldValue,
+          isSubmitting,
+        }) => {
+          return (
+            <form onSubmit={handleSubmit}>
+              <div className="mt-6 sm:mt-5">
+                {submitError && (
+                  <div className="bg-red-700 text-white p-4 rounded-md mb-6">
+                    {submitError}
+                  </div>
+                )}
+                <div className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
+                  <label
+                    htmlFor="name"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                  >
+                    <FormattedMessage {...messages.servername} />
+                  </label>
+                  <div className="mt-1 sm:mt-0 sm:col-span-2">
+                    <div className="max-w-lg flex rounded-md shadow-sm">
+                      <input
+                        type="text"
+                        id="name"
+                        name="name"
+                        placeholder={intl.formatMessage(
+                          messages.servernamePlaceholder
+                        )}
+                        value={data?.name}
+                        readOnly
+                        className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div className="mt-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
+                  <label
+                    htmlFor="hostname"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                  >
+                    <FormattedMessage {...messages.hostname} />
+                  </label>
+                  <div className="mt-1 sm:mt-0 sm:col-span-2">
+                    <div className="max-w-lg flex rounded-md shadow-sm">
+                      <span className="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-500 bg-gray-800 text-gray-100 sm:text-sm cursor-default">
+                        {values.useSsl ? 'https://' : 'http://'}
+                      </span>
+                      <Field
+                        type="text"
+                        id="hostname"
+                        name="hostname"
+                        placeholder="127.0.0.1"
+                        className="flex-1 form-input block w-full min-w-0 rounded-r-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
+                      />
+                    </div>
+                    {errors.hostname && touched.hostname && (
+                      <div className="text-red-500 mt-2">{errors.hostname}</div>
+                    )}
+                  </div>
+                </div>
+                <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
+                  <label
+                    htmlFor="port"
+                    className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                  >
+                    <FormattedMessage {...messages.port} />
+                  </label>
+                  <div className="mt-1 sm:mt-0 sm:col-span-2">
+                    <div className="max-w-lg rounded-md shadow-sm sm:max-w-xs">
+                      <Field
+                        type="text"
+                        id="port"
+                        name="port"
+                        placeholder="32400"
+                        className="form-input block w-24 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
+                      />
+                    </div>
+                    {errors.port && touched.port && (
+                      <div className="text-red-500 mt-2">{errors.port}</div>
+                    )}
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-          <div className="mt-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-800 sm:pt-5">
-            <label
-              htmlFor="hostname"
-              className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
-            >
-              <FormattedMessage {...messages.hostname} />
-            </label>
-            <div className="mt-1 sm:mt-0 sm:col-span-2">
-              <div className="max-w-lg flex rounded-md shadow-sm">
-                <input
-                  type="text"
-                  id="hostname"
-                  name="hostname"
-                  placeholder="127.0.0.1"
-                  value={formik.values.hostname}
-                  onChange={formik.handleChange}
-                  className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
-                />
+              <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
+                <label
+                  htmlFor="ssl"
+                  className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
+                >
+                  {intl.formatMessage(messages.ssl)}
+                </label>
+                <div className="mt-1 sm:mt-0 sm:col-span-2">
+                  <Field
+                    type="checkbox"
+                    id="useSsl"
+                    name="useSsl"
+                    onChange={() => {
+                      setFieldValue('useSsl', !values.useSsl);
+                    }}
+                    className="form-checkbox h-6 w-6 rounded-md text-indigo-600 transition duration-150 ease-in-out"
+                  />
+                </div>
               </div>
-            </div>
-          </div>
-          <div className="mt-6 sm:mt-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
-            <label
-              htmlFor="port"
-              className="block text-sm font-medium leading-5 text-gray-400 sm:mt-px sm:pt-2"
-            >
-              <FormattedMessage {...messages.port} />
-            </label>
-            <div className="mt-1 sm:mt-0 sm:col-span-2">
-              <div className="max-w-lg rounded-md shadow-sm sm:max-w-xs">
-                <input
-                  type="text"
-                  id="port"
-                  name="port"
-                  placeholder="32400"
-                  value={formik.values.port}
-                  onChange={formik.handleChange}
-                  className="form-input block w-24 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
-                />
+              <div className="mt-8 border-t border-gray-700 pt-5">
+                <div className="flex justify-end">
+                  <span className="ml-3 inline-flex rounded-md shadow-sm">
+                    <Button
+                      buttonType="primary"
+                      type="submit"
+                      disabled={isSubmitting}
+                    >
+                      {isSubmitting
+                        ? intl.formatMessage(messages.saving)
+                        : intl.formatMessage(messages.save)}
+                    </Button>
+                  </span>
+                </div>
               </div>
-            </div>
-          </div>
-        </div>
-        <div className="mt-8 border-t border-gray-700 pt-5">
-          <div className="flex justify-end">
-            <span className="ml-3 inline-flex rounded-md shadow-sm">
-              <Button buttonType="primary" type="submit" disabled={isUpdating}>
-                {isUpdating
-                  ? intl.formatMessage(messages.saving)
-                  : intl.formatMessage(messages.save)}
-              </Button>
-            </span>
-          </div>
-        </div>
-      </form>
+            </form>
+          );
+        }}
+      </Formik>
       <div className="mt-10">
         <h3 className="text-lg leading-6 font-medium text-gray-200">
           <FormattedMessage {...messages.plexlibraries} />

src/components/Settings/SettingsServices.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { defineMessages, FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import Badge from '../Common/Badge';
 import Button from '../Common/Button';
 import useSWR from 'swr';
@@ -31,8 +31,48 @@ const messages = defineMessages({
   activeProfile: 'Active Profile',
   addradarr: 'Add Radarr Server',
   addsonarr: 'Add Sonarr Server',
+  nodefault: 'No default server selected!',
+  nodefaultdescription:
+    'At least one server must be marked as default before any requests will make it to your services.',
+  no4kimplemented: '(Default 4K servers are not currently implemented)',
 });
 
+const NoDefaultAlert: React.FC = () => {
+  const intl = useIntl();
+  return (
+    <div className="rounded-md bg-yellow-600 p-4 mb-8">
+      <div className="flex">
+        <div className="flex-shrink-0">
+          <svg
+            className="h-5 w-5 text-yellow-200"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              fillRule="evenodd"
+              d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+              clipRule="evenodd"
+            />
+          </svg>
+        </div>
+        <div className="ml-3">
+          <h3 className="text-sm font-medium text-yellow-200">
+            {intl.formatMessage(messages.nodefault)}
+          </h3>
+          <div className="mt-2 text-sm text-yellow-300">
+            <p>{intl.formatMessage(messages.nodefaultdescription)}</p>
+            <p className="mt-2">
+              {intl.formatMessage(messages.no4kimplemented)}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 interface ServerInstanceProps {
   name: string;
   isDefault?: boolean;
@@ -249,51 +289,57 @@ const SettingsServices: React.FC = () => {
       <div className="mt-6 sm:mt-5">
         {!radarrData && !radarrError && <LoadingSpinner />}
         {radarrData && !radarrError && (
-          <ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
-            {radarrData.map((radarr) => (
-              <ServerInstance
-                key={`radarr-config-${radarr.id}`}
-                name={radarr.name}
-                address={radarr.hostname}
-                profileName={radarr.activeProfileName}
-                isSSL={radarr.useSsl}
-                isDefault={radarr.isDefault && !radarr.is4k}
-                isDefault4K={radarr.is4k && radarr.isDefault}
-                onEdit={() => setEditRadarrModal({ open: true, radarr })}
-                onDelete={() =>
-                  setDeleteServerModal({
-                    open: true,
-                    serverId: radarr.id,
-                    type: 'radarr',
-                  })
-                }
-              />
-            ))}
-            <li className="col-span-1 border-2 border-dashed border-gray-400 rounded-lg shadow h-32 sm:h-32">
-              <div className="flex items-center justify-center w-full h-full">
-                <Button
-                  buttonType="ghost"
-                  onClick={() =>
-                    setEditRadarrModal({ open: true, radarr: null })
+          <>
+            {radarrData.length > 0 &&
+              !radarrData.some(
+                (radarr) => radarr.isDefault && !radarr.is4k
+              ) && <NoDefaultAlert />}
+            <ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+              {radarrData.map((radarr) => (
+                <ServerInstance
+                  key={`radarr-config-${radarr.id}`}
+                  name={radarr.name}
+                  address={radarr.hostname}
+                  profileName={radarr.activeProfileName}
+                  isSSL={radarr.useSsl}
+                  isDefault={radarr.isDefault && !radarr.is4k}
+                  isDefault4K={radarr.is4k && radarr.isDefault}
+                  onEdit={() => setEditRadarrModal({ open: true, radarr })}
+                  onDelete={() =>
+                    setDeleteServerModal({
+                      open: true,
+                      serverId: radarr.id,
+                      type: 'radarr',
+                    })
                   }
-                >
-                  <svg
-                    className="w-5 h-5 mr-1"
-                    fill="currentColor"
-                    viewBox="0 0 20 20"
-                    xmlns="http://www.w3.org/2000/svg"
+                />
+              ))}
+              <li className="col-span-1 border-2 border-dashed border-gray-400 rounded-lg shadow h-32 sm:h-32">
+                <div className="flex items-center justify-center w-full h-full">
+                  <Button
+                    buttonType="ghost"
+                    onClick={() =>
+                      setEditRadarrModal({ open: true, radarr: null })
+                    }
                   >
-                    <path
-                      fillRule="evenodd"
-                      d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
-                      clipRule="evenodd"
-                    />
-                  </svg>
-                  <FormattedMessage {...messages.addradarr} />
-                </Button>
-              </div>
-            </li>
-          </ul>
+                    <svg
+                      className="w-5 h-5 mr-1"
+                      fill="currentColor"
+                      viewBox="0 0 20 20"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                    <FormattedMessage {...messages.addradarr} />
+                  </Button>
+                </div>
+              </li>
+            </ul>
+          </>
         )}
       </div>
       <div className="mt-10">
@@ -307,52 +353,58 @@ const SettingsServices: React.FC = () => {
       <div className="mt-6 sm:mt-5">
         {!sonarrData && !sonarrError && <LoadingSpinner />}
         {sonarrData && !sonarrError && (
-          <ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
-            {sonarrData.map((sonarr) => (
-              <ServerInstance
-                key={`sonarr-config-${sonarr.id}`}
-                name={sonarr.name}
-                address={sonarr.hostname}
-                profileName={sonarr.activeProfileName}
-                isSSL={sonarr.useSsl}
-                isSonarr
-                isDefault4K={sonarr.isDefault && sonarr.is4k}
-                isDefault={sonarr.isDefault && !sonarr.is4k}
-                onEdit={() => setEditSonarrModal({ open: true, sonarr })}
-                onDelete={() =>
-                  setDeleteServerModal({
-                    open: true,
-                    serverId: sonarr.id,
-                    type: 'sonarr',
-                  })
-                }
-              />
-            ))}
-            <li className="col-span-1 border-2 border-dashed border-gray-400 rounded-lg shadow h-32 sm:h-32">
-              <div className="flex items-center justify-center w-full h-full">
-                <Button
-                  buttonType="ghost"
-                  onClick={() =>
-                    setEditSonarrModal({ open: true, sonarr: null })
+          <>
+            {sonarrData.length > 0 &&
+              !sonarrData.some(
+                (sonarr) => sonarr.isDefault && !sonarr.is4k
+              ) && <NoDefaultAlert />}
+            <ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+              {sonarrData.map((sonarr) => (
+                <ServerInstance
+                  key={`sonarr-config-${sonarr.id}`}
+                  name={sonarr.name}
+                  address={sonarr.hostname}
+                  profileName={sonarr.activeProfileName}
+                  isSSL={sonarr.useSsl}
+                  isSonarr
+                  isDefault4K={sonarr.isDefault && sonarr.is4k}
+                  isDefault={sonarr.isDefault && !sonarr.is4k}
+                  onEdit={() => setEditSonarrModal({ open: true, sonarr })}
+                  onDelete={() =>
+                    setDeleteServerModal({
+                      open: true,
+                      serverId: sonarr.id,
+                      type: 'sonarr',
+                    })
                   }
-                >
-                  <svg
-                    className="w-5 h-5 mr-1"
-                    fill="currentColor"
-                    viewBox="0 0 20 20"
-                    xmlns="http://www.w3.org/2000/svg"
+                />
+              ))}
+              <li className="col-span-1 border-2 border-dashed border-gray-400 rounded-lg shadow h-32 sm:h-32">
+                <div className="flex items-center justify-center w-full h-full">
+                  <Button
+                    buttonType="ghost"
+                    onClick={() =>
+                      setEditSonarrModal({ open: true, sonarr: null })
+                    }
                   >
-                    <path
-                      fillRule="evenodd"
-                      d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
-                      clipRule="evenodd"
-                    />
-                  </svg>
-                  <FormattedMessage {...messages.addsonarr} />
-                </Button>
-              </div>
-            </li>
-          </ul>
+                    <svg
+                      className="w-5 h-5 mr-1"
+                      fill="currentColor"
+                      viewBox="0 0 20 20"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                    <FormattedMessage {...messages.addsonarr} />
+                  </Button>
+                </div>
+              </li>
+            </ul>
+          </>
         )}
       </div>
     </>

src/components/Settings/SonarrModal/index.tsx

@@ -11,6 +11,7 @@ import { useIntl, defineMessages } from 'react-intl';
 const messages = defineMessages({
   createsonarr: 'Create New Sonarr Server',
   editsonarr: 'Edit Sonarr Server',
+  validationNameRequired: 'You must provide a server name',
   validationHostnameRequired: 'You must provide a hostname/IP',
   validationPortRequired: 'You must provide a port',
   validationApiKeyRequired: 'You must provide an API key',
@@ -39,6 +40,10 @@ const messages = defineMessages({
   server4k: '4K Server',
   selectQualityProfile: 'Select a Quality Profile',
   selectRootFolder: 'Select a Root Folder',
+  loadingprofiles: 'Loading quality profiles…',
+  testFirstQualityProfiles: 'Test your connection to load quality profiles',
+  loadingrootfolders: 'Loading root folders…',
+  testFirstRootFolders: 'Test your connection to load root folders',
 });
 
 interface TestResponse {
@@ -73,6 +78,9 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
     rootFolders: [],
   });
   const SonarrSettingsSchema = Yup.object().shape({
+    name: Yup.string().required(
+      intl.formatMessage(messages.validationNameRequired)
+    ),
     hostname: Yup.string().required(
       intl.formatMessage(messages.validationHostnameRequired)
     ),
@@ -111,7 +119,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
           {
             hostname,
             apiKey,
-            port,
+            port: Number(port),
             baseUrl,
             useSsl,
           }
@@ -188,11 +196,11 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
             const submission = {
               name: values.name,
               hostname: values.hostname,
-              port: values.port,
+              port: Number(values.port),
               apiKey: values.apiKey,
               useSsl: values.ssl,
               baseUrl: values.baseUrl,
-              activeProfileId: values.activeProfileId,
+              activeProfileId: Number(values.activeProfileId),
               activeProfileName: profileName,
               activeDirectory: values.rootFolder,
               is4k: values.is4k,
@@ -221,6 +229,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
           handleSubmit,
           setFieldValue,
           isSubmitting,
+          isValid,
         }) => {
           return (
             <Modal
@@ -229,7 +238,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
               okText={
                 isSubmitting
                   ? intl.formatMessage(messages.saving)
-                  : !!sonarr
+                  : sonarr
                   ? intl.formatMessage(messages.save)
                   : intl.formatMessage(messages.add)
               }
@@ -253,7 +262,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
               secondaryDisabled={
                 !values.apiKey || !values.hostname || !values.port || isTesting
               }
-              okDisabled={!isValidated || isSubmitting || isTesting}
+              okDisabled={!isValidated || isSubmitting || isTesting || !isValid}
               onOk={() => handleSubmit()}
               title={
                 !sonarr
@@ -315,6 +324,9 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                   </label>
                   <div className="mt-1 sm:mt-0 sm:col-span-2">
                     <div className="max-w-lg flex rounded-md shadow-sm">
+                      <span className="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-500 bg-gray-600 text-gray-100 sm:text-sm cursor-default">
+                        {values.ssl ? 'https://' : 'http://'}
+                      </span>
                       <Field
                         id="hostname"
                         name="hostname"
@@ -324,7 +336,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                           setIsValidated(false);
                           setFieldValue('hostname', e.target.value);
                         }}
-                        className="flex-1 form-input block w-full min-w-0 rounded-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
+                        className="flex-1 form-input block w-full min-w-0 rounded-r-md transition duration-150 ease-in-out sm:text-sm sm:leading-5 bg-gray-700 border border-gray-500"
                       />
                     </div>
                     {errors.hostname && touched.hostname && (
@@ -445,10 +457,17 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                         as="select"
                         id="activeProfileId"
                         name="activeProfileId"
-                        className="mt-1 form-select rounded-md block w-full pl-3 pr-10 py-2 text-base leading-6 bg-gray-700 border-gray-500 focus:outline-none focus:ring-blue focus:border-gray-500 sm:text-sm sm:leading-5"
+                        disabled={!isValidated || isTesting}
+                        className="mt-1 form-select rounded-md block w-full pl-3 pr-10 py-2 text-base leading-6 bg-gray-700 border-gray-500 focus:outline-none focus:ring-blue focus:border-gray-500 sm:text-sm sm:leading-5 disabled:opacity-50"
                       >
                         <option value="">
-                          {intl.formatMessage(messages.selectQualityProfile)}
+                          {isTesting
+                            ? intl.formatMessage(messages.loadingprofiles)
+                            : !isValidated
+                            ? intl.formatMessage(
+                                messages.testFirstQualityProfiles
+                              )
+                            : intl.formatMessage(messages.selectQualityProfile)}
                         </option>
                         {testResponse.profiles.length > 0 &&
                           testResponse.profiles.map((profile) => (
@@ -481,10 +500,15 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                         as="select"
                         id="rootFolder"
                         name="rootFolder"
-                        className="mt-1 form-select block rounded-md w-full pl-3 pr-10 py-2 text-base leading-6 bg-gray-700 border-gray-500 focus:outline-none focus:ring-blue focus:border-gray-500 sm:text-sm sm:leading-5"
+                        disabled={!isValidated || isTesting}
+                        className="mt-1 form-select block rounded-md w-full pl-3 pr-10 py-2 text-base leading-6 bg-gray-700 border-gray-500 focus:outline-none focus:ring-blue focus:border-gray-500 sm:text-sm sm:leading-5 disabled:opacity-50"
                       >
                         <option value="">
-                          {intl.formatMessage(messages.selectRootFolder)}
+                          {isTesting
+                            ? intl.formatMessage(messages.loadingrootfolders)
+                            : !isValidated
+                            ? intl.formatMessage(messages.testFirstRootFolders)
+                            : intl.formatMessage(messages.selectRootFolder)}
                         </option>
                         {testResponse.rootFolders.length > 0 &&
                           testResponse.rootFolders.map((folder) => (

src/components/Setup/index.tsx

@@ -8,6 +8,7 @@ import LoginWithPlex from './LoginWithPlex';
 import SetupSteps from './SetupSteps';
 import axios from 'axios';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import Badge from '../Common/Badge';
 
 const messages = defineMessages({
   finish: 'Finish Setup',
@@ -16,6 +17,9 @@ const messages = defineMessages({
   loginwithplex: 'Login with Plex',
   configureplex: 'Configure Plex',
   configureservices: 'Configure Services',
+  tip: 'Tip',
+  syncingbackground:
+    'Syncing will run in the background. You can continue the setup process in the meantime.',
 });
 
 const Setup: React.FC = () => {
@@ -85,6 +89,12 @@ const Setup: React.FC = () => {
           {currentStep === 2 && (
             <div>
               <SettingsPlex onComplete={() => setPlexSettingsComplete(true)} />
+              <div className="mt-4 text-gray-500 text-sm">
+                <span className="mr-2">
+                  <Badge>{intl.formatMessage(messages.tip)}</Badge>
+                </span>
+                {intl.formatMessage(messages.syncingbackground)}
+              </div>
               <div className="mt-8 border-t border-gray-700 pt-5">
                 <div className="flex justify-end">
                   <span className="ml-3 inline-flex rounded-md shadow-sm">

src/components/Slider/index.tsx

@@ -117,7 +117,7 @@ const Slider: React.FC<SliderProps> = ({
         to: {
           x: newX,
         },
-        onFrame: (props) => {
+        onFrame: (props: { x: number }) => {
           if (containerRef.current) {
             containerRef.current.scrollLeft = props.x;
           }
@@ -141,7 +141,7 @@ const Slider: React.FC<SliderProps> = ({
         to: {
           x: newX,
         },
-        onFrame: (props) => {
+        onFrame: (props: { x: number }) => {
           if (containerRef.current) {
             containerRef.current.scrollLeft = props.x;
           }

src/components/StatusBadge/index.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { MediaStatus } from '../../../server/constants/media';
+import Badge from '../Common/Badge';
+import { useIntl } from 'react-intl';
+import globalMessages from '../../i18n/globalMessages';
+
+interface StatusBadgeProps {
+  status: MediaStatus;
+}
+
+const StatusBadge: React.FC<StatusBadgeProps> = ({ status }) => {
+  const intl = useIntl();
+
+  return (
+    <>
+      {status === MediaStatus.AVAILABLE && (
+        <Badge badgeType="success">
+          {intl.formatMessage(globalMessages.available)}
+        </Badge>
+      )}
+      {status === MediaStatus.PARTIALLY_AVAILABLE && (
+        <Badge badgeType="success">
+          {intl.formatMessage(globalMessages.partiallyavailable)}
+        </Badge>
+      )}
+      {status === MediaStatus.PROCESSING && (
+        <Badge badgeType="danger">
+          {intl.formatMessage(globalMessages.unavailable)}
+        </Badge>
+      )}
+      {status === MediaStatus.PENDING && (
+        <Badge badgeType="warning">
+          {intl.formatMessage(globalMessages.pending)}
+        </Badge>
+      )}
+    </>
+  );
+};
+
+export default StatusBadge;

src/components/TitleCard/TmdbTitleCard.tsx

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import { useInView } from 'react-intersection-observer';
 import useSWR from 'swr';
 import type { MovieDetails } from '../../../server/models/Movie';
 import type { TvDetails } from '../../../server/models/Tv';
@@ -15,15 +16,22 @@ const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => {
 };
 
 const TmdbTitleCard: React.FC<TmdbTitleCardProps> = ({ tmdbId, type }) => {
+  const { ref, inView } = useInView({
+    triggerOnce: true,
+  });
   const { locale } = useContext(LanguageContext);
   const url =
     type === 'movie' ? `/api/v1/movie/${tmdbId}` : `/api/v1/tv/${tmdbId}`;
   const { data: title, error } = useSWR<MovieDetails | TvDetails>(
-    `${url}?language=${locale}`
+    inView ? `${url}?language=${locale}` : null
   );
 
   if (!title && !error) {
-    return <TitleCard.Placeholder />;
+    return (
+      <div ref={ref}>
+        <TitleCard.Placeholder />
+      </div>
+    );
   }
 
   if (!title) {

src/components/TitleCard/index.tsx

@@ -10,17 +10,18 @@ import Link from 'next/link';
 import { MediaStatus } from '../../../server/constants/media';
 import RequestModal from '../RequestModal';
 import { defineMessages, useIntl } from 'react-intl';
+import { useIsTouch } from '../../hooks/useIsTouch';
 
 const messages = defineMessages({
-  movie: 'MOVIE',
-  tvshow: 'SERIES',
+  movie: 'Movie',
+  tvshow: 'Series',
 });
 
 interface TitleCardProps {
   id: number;
   image?: string;
   summary?: string;
-  year: string;
+  year?: string;
   title: string;
   userScore: number;
   mediaType: MediaType;
@@ -38,6 +39,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
   mediaType,
   canExpand = false,
 }) => {
+  const isTouch = useIsTouch();
   const intl = useIntl();
   const [isUpdating, setIsUpdating] = useState(false);
   const [currentStatus, setCurrentStatus] = useState(status);
@@ -74,9 +76,13 @@ const TitleCard: React.FC<TitleCardProps> = ({
       <div
         className="titleCard outline-none cursor-default"
         style={{
-          backgroundImage: `url(//image.tmdb.org/t/p/w600_and_h900_bestv2${image})`,
+          backgroundImage: `url(//image.tmdb.org/t/p/w300_and_h450_face${image})`,
+        }}
+        onMouseEnter={() => {
+          if (!isTouch) {
+            setShowDetail(true);
+          }
         }}
-        onMouseEnter={() => setShowDetail(true)}
         onMouseLeave={() => setShowDetail(false)}
         onClick={() => setShowDetail(true)}
         onKeyDown={(e) => {
@@ -93,7 +99,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
               mediaType === 'movie' ? 'bg-blue-500' : 'bg-purple-600'
             }`}
           >
-            <div className="flex items-center text-center text-xs text-white h-4 px-2 py-1 font-normal">
+            <div className="flex items-center text-center text-xs text-white h-4 px-2 py-1 font-normal uppercase">
               {mediaType === 'movie'
                 ? intl.formatMessage(messages.movie)
                 : intl.formatMessage(messages.tvshow)}
@@ -146,158 +152,162 @@ const TitleCard: React.FC<TitleCardProps> = ({
 
           <Transition
             show={!image || showDetail || showRequestModal}
-            enter="transition ease-in-out duration-300 transform opacity-0"
+            enter="transition transform opacity-0"
             enterFrom="opacity-0"
             enterTo="opacity-100"
-            leave="transition ease-in-out duration-300 transform opacity-100"
+            leave="transition transform opacity-100"
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div
-              className="absolute w-full text-left top-0 right-0 left-0 bottom-0 rounded-lg overflow-hidden"
-              style={{
-                background:
-                  'linear-gradient(180deg, rgba(45, 55, 72, 0.4) 0%, rgba(45, 55, 72, 0.9) 100%)',
-              }}
-            >
-              <div className="absolute bottom-0 w-full left-0 right-0">
-                <div className="px-2 text-white">
-                  <div className="text-sm">{year}</div>
+            <Link href={mediaType === 'movie' ? `/movie/${id}` : `/tv/${id}`}>
+              <a
+                className="absolute w-full text-left top-0 right-0 left-0 bottom-0 rounded-lg overflow-hidden cursor-pointer"
+                style={{
+                  background:
+                    'linear-gradient(180deg, rgba(45, 55, 72, 0.4) 0%, rgba(45, 55, 72, 0.9) 100%)',
+                }}
+              >
+                <div className="absolute bottom-0 w-full left-0 right-0">
+                  <div className="px-2 text-white">
+                    {year && <div className="text-sm">{year}</div>}
 
-                  <h1 className="text-xl leading-tight whitespace-normal">
-                    {title}
-                  </h1>
-                  <div
-                    className="text-xs whitespace-normal"
-                    style={{
-                      WebkitLineClamp: 3,
-                      display: '-webkit-box',
-                      overflow: 'hidden',
-                      WebkitBoxOrient: 'vertical',
-                    }}
-                  >
-                    {summary}
+                    <h1 className="text-xl leading-tight whitespace-normal">
+                      {title}
+                    </h1>
+                    <div
+                      className="text-xs whitespace-normal"
+                      style={{
+                        WebkitLineClamp: 3,
+                        display: '-webkit-box',
+                        overflow: 'hidden',
+                        WebkitBoxOrient: 'vertical',
+                      }}
+                    >
+                      {summary}
+                    </div>
+                  </div>
+                  <div className="flex justify-between left-0 bottom-0 right-0 top-0 px-2 py-2">
+                    <Link
+                      href={
+                        mediaType === 'movie' ? `/movie/${id}` : `/tv/${id}`
+                      }
+                    >
+                      <a className="cursor-pointer flex w-full h-7 text-center text-white bg-indigo-500 rounded-sm hover:bg-indigo-400 focus:border-indigo-700 focus:ring-indigo active:bg-indigo-700 transition ease-in-out duration-150">
+                        <svg
+                          className="w-4 mx-auto"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                          />
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                          />
+                        </svg>
+                      </a>
+                    </Link>
+                    {(!currentStatus ||
+                      currentStatus === MediaStatus.UNKNOWN) && (
+                      <button
+                        onClick={(e) => {
+                          e.preventDefault();
+                          setShowRequestModal(true);
+                        }}
+                        className="w-full h-7 text-center text-white bg-indigo-500 rounded-sm ml-2 hover:bg-indigo-400 focus:border-indigo-700 focus:ring-indigo active:bg-indigo-700 transition ease-in-out duration-150"
+                      >
+                        <svg
+                          className="w-4 mx-auto"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+                          />
+                        </svg>
+                      </button>
+                    )}
+                    {currentStatus === MediaStatus.PENDING && (
+                      <button
+                        className="w-full h-7 text-center text-yellow-500 border border-yellow-500 rounded-sm ml-2 cursor-default"
+                        disabled
+                      >
+                        <svg
+                          className="w-4 mx-auto"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+                          />
+                        </svg>
+                      </button>
+                    )}
+                    {currentStatus === MediaStatus.PROCESSING && (
+                      <button
+                        className="w-full h-7 text-center text-red-500 border border-red-500 rounded-sm ml-2 cursor-default"
+                        disabled
+                      >
+                        <svg
+                          className="w-4 mx-auto"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                          />
+                        </svg>
+                      </button>
+                    )}
+                    {(currentStatus === MediaStatus.AVAILABLE ||
+                      currentStatus === MediaStatus.PARTIALLY_AVAILABLE) && (
+                      <button
+                        className="w-full h-7 text-center text-green-400 border border-green-400 rounded-sm ml-2 cursor-default"
+                        disabled
+                      >
+                        <svg
+                          className="w-4 mx-auto"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M5 13l4 4L19 7"
+                          />
+                        </svg>
+                      </button>
+                    )}
                   </div>
                 </div>
-                <div className="flex justify-between left-0 bottom-0 right-0 top-0 px-2 py-2">
-                  <Link
-                    href={
-                      mediaType === 'movie' ? '/movie/[movieId]' : '/tv/[tvId]'
-                    }
-                    as={mediaType === 'movie' ? `/movie/${id}` : `/tv/${id}`}
-                  >
-                    <a className="cursor-pointer flex w-full h-7 text-center text-white bg-indigo-500 rounded-sm hover:bg-indigo-400 focus:border-indigo-700 focus:ring-indigo active:bg-indigo-700 transition ease-in-out duration-150">
-                      <svg
-                        className="w-4 mx-auto"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                        />
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-                        />
-                      </svg>
-                    </a>
-                  </Link>
-                  {(!currentStatus ||
-                    currentStatus === MediaStatus.UNKNOWN) && (
-                    <button
-                      onClick={() => setShowRequestModal(true)}
-                      className="w-full h-7 text-center text-white bg-indigo-500 rounded-sm ml-2 hover:bg-indigo-400 focus:border-indigo-700 focus:ring-indigo active:bg-indigo-700 transition ease-in-out duration-150"
-                    >
-                      <svg
-                        className="w-4 mx-auto"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
-                        />
-                      </svg>
-                    </button>
-                  )}
-                  {currentStatus === MediaStatus.PENDING && (
-                    <button
-                      className="w-full h-7 text-center text-yellow-500 border border-yellow-500 rounded-sm ml-2 cursor-default"
-                      disabled
-                    >
-                      <svg
-                        className="w-4 mx-auto"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
-                        />
-                      </svg>
-                    </button>
-                  )}
-                  {currentStatus === MediaStatus.PROCESSING && (
-                    <button
-                      className="w-full h-7 text-center text-red-500 border border-red-500 rounded-sm ml-2 cursor-default"
-                      disabled
-                    >
-                      <svg
-                        className="w-4 mx-auto"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-                        />
-                      </svg>
-                    </button>
-                  )}
-                  {(currentStatus === MediaStatus.AVAILABLE ||
-                    currentStatus === MediaStatus.PARTIALLY_AVAILABLE) && (
-                    <button
-                      className="w-full h-7 text-center text-green-400 border border-green-400 rounded-sm ml-2 cursor-default"
-                      disabled
-                    >
-                      <svg
-                        className="w-4 mx-auto"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M5 13l4 4L19 7"
-                        />
-                      </svg>
-                    </button>
-                  )}
-                </div>
-              </div>
-            </div>
+              </a>
+            </Link>
           </Transition>
         </div>
       </div>

src/components/TvDetails/TvCast/index.tsx

@@ -0,0 +1,66 @@
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import React, { useContext } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import useSWR from 'swr';
+import type { TvDetails } from '../../../../server/models/Tv';
+import { LanguageContext } from '../../../context/LanguageContext';
+import Error from '../../../pages/_error';
+import Header from '../../Common/Header';
+import LoadingSpinner from '../../Common/LoadingSpinner';
+import PersonCard from '../../PersonCard';
+
+const messages = defineMessages({
+  fullseriescast: 'Full Series Cast',
+});
+
+const TvCast: React.FC = () => {
+  const router = useRouter();
+  const intl = useIntl();
+  const { locale } = useContext(LanguageContext);
+  const { data, error } = useSWR<TvDetails>(
+    `/api/v1/tv/${router.query.tvId}?language=${locale}`
+  );
+
+  if (!data && !error) {
+    return <LoadingSpinner />;
+  }
+
+  if (!data) {
+    return <Error statusCode={404} />;
+  }
+
+  return (
+    <>
+      <Header
+        subtext={
+          <Link href={`/tv/${data.id}`}>
+            <a className="hover:underline">{data.name}</a>
+          </Link>
+        }
+      >
+        {intl.formatMessage(messages.fullseriescast)}
+      </Header>
+      <ul className="grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-8">
+        {data?.credits.cast.map((person) => {
+          return (
+            <li
+              key={person.id}
+              className="col-span-1 flex flex-col text-center items-center"
+            >
+              <PersonCard
+                name={person.name}
+                personId={person.id}
+                subName={person.character}
+                profilePath={person.profilePath}
+                canExpand
+              />
+            </li>
+          );
+        })}
+      </ul>
+    </>
+  );
+};
+
+export default TvCast;

src/components/TvDetails/index.tsx

@@ -156,12 +156,12 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
       />
       <SlideOver
         show={showManager}
-        title="Manage Series"
+        title={intl.formatMessage(messages.manageModalTitle)}
         onClose={() => setShowManager(false)}
         subText={data.name}
       >
         <h3 className="text-xl mb-2">
-          {intl.formatMessage(messages.manageModalTitle)}
+          {intl.formatMessage(messages.manageModalRequests)}
         </h3>
         <div className="bg-gray-600 shadow overflow-hidden rounded-md">
           <ul>
@@ -196,14 +196,14 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
         )}
       </SlideOver>
       <div className="flex flex-col items-center md:flex-row md:items-end pt-4">
-        <div className="mr-4 flex-shrink-0">
+        <div className="md:mr-4 flex-shrink-0">
           <img
             src={`//image.tmdb.org/t/p/w600_and_h900_bestv2${data.posterPath}`}
             alt=""
             className="rounded md:rounded-lg shadow md:shadow-2xl w-32 md:w-52"
           />
         </div>
-        <div className="text-white flex flex-col mr-4 mt-4 md:mt-0 text-center md:text-left">
+        <div className="text-white flex flex-col md:mr-4 mt-4 md:mt-0 text-center md:text-left">
           <div className="mb-2">
             {data.mediaInfo?.status === MediaStatus.AVAILABLE && (
               <Badge badgeType="success">
@@ -227,8 +227,12 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
             )}
           </div>
           <h1 className="text-2xl md:text-4xl">
-            {data.name}{' '}
-            <span className="text-2xl">({data.firstAirDate.slice(0, 4)})</span>
+            <span>{data.name}</span>
+            {data.firstAirDate && (
+              <span className="text-2xl ml-2">
+                ({data.firstAirDate.slice(0, 4)})
+              </span>
+            )}
           </h1>
           <span className="text-xs md:text-base mt-1 md:mt-0">
             {data.genres.map((g) => g.name).join(', ')}
@@ -344,7 +348,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
           {hasPermission(Permission.MANAGE_REQUESTS) && (
             <Button
               buttonType="default"
-              className="ml-2"
+              className="ml-2 first:ml-0"
               onClick={() => setShowManager(true)}
             >
               <svg
@@ -473,11 +477,12 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
       </div>
       <Slider
         sliderKey="cast"
-        isLoading={!data && !error}
+        isLoading={false}
         isEmpty={false}
         items={data?.credits.cast.slice(0, 20).map((person) => (
           <PersonCard
             key={`cast-item-${person.id}`}
+            personId={person.id}
             name={person.name}
             subName={person.character}
             profilePath={person.profilePath}

src/components/UserList/index.tsx

@@ -9,6 +9,7 @@ import { hasPermission } from '../../../server/lib/permissions';
 import { Permission } from '../../hooks/useUser';
 import { useRouter } from 'next/router';
 import Header from '../Common/Header';
+import Table from '../Common/Table';
 
 const messages = defineMessages({
   userlist: 'User List',
@@ -37,102 +38,80 @@ const UserList: React.FC = () => {
   return (
     <>
       <Header extraMargin={4}>{intl.formatMessage(messages.userlist)}</Header>
-      <div className="flex flex-col">
-        <div className="my-2 overflow-x-auto -mx-6 sm:-mx-6 md:mx-4 lg:mx-4">
-          <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
-            <div className="shadow overflow-hidden sm:rounded-lg">
-              <table className="min-w-full">
-                <thead>
-                  <tr>
-                    <th className="px-6 py-3 bg-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
-                      {intl.formatMessage(messages.username)}
-                    </th>
-                    <th className="px-6 py-3 bg-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
-                      {intl.formatMessage(messages.totalrequests)}
-                    </th>
-                    <th className="px-6 py-3 bg-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
-                      {intl.formatMessage(messages.usertype)}
-                    </th>
-                    <th className="px-6 py-3 bg-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
-                      {intl.formatMessage(messages.role)}
-                    </th>
-                    <th className="px-6 py-3 bg-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
-                      {intl.formatMessage(messages.created)}
-                    </th>
-                    <th className="px-6 py-3 bg-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider">
-                      {intl.formatMessage(messages.lastupdated)}
-                    </th>
-                    <th className="px-6 py-3 bg-gray-500"></th>
-                  </tr>
-                </thead>
-                <tbody className="bg-gray-600 divide-y divide-gray-700">
-                  {data?.map((user) => (
-                    <tr key={`user-list-${user.id}`}>
-                      <td className="px-6 py-4 whitespace-nowrap">
-                        <div className="flex items-center">
-                          <div className="flex-shrink-0 h-10 w-10">
-                            <img
-                              className="h-10 w-10 rounded-full"
-                              src={user.avatar}
-                              alt=""
-                            />
-                          </div>
-                          <div className="ml-4">
-                            <div className="text-sm leading-5 font-medium text-white">
-                              {user.username}
-                            </div>
-                            <div className="text-sm leading-5 text-gray-300">
-                              {user.email}
-                            </div>
-                          </div>
-                        </div>
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap">
-                        <div className="text-sm leading-5 text-white">
-                          {user.requestCount}
-                        </div>
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap">
-                        <Badge badgeType="warning">
-                          {intl.formatMessage(messages.plexuser)}
-                        </Badge>
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap text-sm leading-5 text-white">
-                        {hasPermission(Permission.ADMIN, user.permissions)
-                          ? intl.formatMessage(messages.admin)
-                          : intl.formatMessage(messages.user)}
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap text-sm leading-5 text-white">
-                        <FormattedDate value={user.createdAt} />
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap text-sm leading-5 text-white">
-                        <FormattedDate value={user.updatedAt} />
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap text-right text-sm leading-5 font-medium">
-                        <Button
-                          buttonType="warning"
-                          className="mr-2"
-                          onClick={() =>
-                            router.push(
-                              '/users/[userId]/edit',
-                              `/users/${user.id}/edit`
-                            )
-                          }
-                        >
-                          {intl.formatMessage(messages.edit)}
-                        </Button>
-                        <Button buttonType="danger">
-                          {intl.formatMessage(messages.delete)}
-                        </Button>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      </div>
+      <Table>
+        <thead>
+          <tr>
+            <Table.TH>{intl.formatMessage(messages.username)}</Table.TH>
+            <Table.TH>{intl.formatMessage(messages.totalrequests)}</Table.TH>
+            <Table.TH>{intl.formatMessage(messages.usertype)}</Table.TH>
+            <Table.TH>{intl.formatMessage(messages.role)}</Table.TH>
+            <Table.TH>{intl.formatMessage(messages.created)}</Table.TH>
+            <Table.TH>{intl.formatMessage(messages.lastupdated)}</Table.TH>
+            <Table.TH></Table.TH>
+          </tr>
+        </thead>
+        <Table.TBody>
+          {data?.map((user) => (
+            <tr key={`user-list-${user.id}`}>
+              <Table.TD>
+                <div className="flex items-center">
+                  <div className="flex-shrink-0 h-10 w-10">
+                    <img
+                      className="h-10 w-10 rounded-full"
+                      src={user.avatar}
+                      alt=""
+                    />
+                  </div>
+                  <div className="ml-4">
+                    <div className="text-sm leading-5 font-medium">
+                      {user.username}
+                    </div>
+                    <div className="text-sm leading-5 text-gray-300">
+                      {user.email}
+                    </div>
+                  </div>
+                </div>
+              </Table.TD>
+              <Table.TD>
+                <div className="text-sm leading-5">{user.requestCount}</div>
+              </Table.TD>
+              <Table.TD>
+                <Badge badgeType="warning">
+                  {intl.formatMessage(messages.plexuser)}
+                </Badge>
+              </Table.TD>
+              <Table.TD>
+                {hasPermission(Permission.ADMIN, user.permissions)
+                  ? intl.formatMessage(messages.admin)
+                  : intl.formatMessage(messages.user)}
+              </Table.TD>
+              <Table.TD>
+                <FormattedDate value={user.createdAt} />
+              </Table.TD>
+              <Table.TD>
+                <FormattedDate value={user.updatedAt} />
+              </Table.TD>
+              <Table.TD alignText="right">
+                <Button
+                  buttonType="warning"
+                  className="mr-2"
+                  onClick={() =>
+                    router.push(
+                      '/users/[userId]/edit',
+                      `/users/${user.id}/edit`
+                    )
+                  }
+                >
+                  {intl.formatMessage(messages.edit)}
+                </Button>
+                <Button buttonType="danger">
+                  {intl.formatMessage(messages.delete)}
+                </Button>
+              </Table.TD>
+            </tr>
+          ))}
+        </Table.TBody>
+      </Table>
     </>
   );
 };

src/context/InteractionContext.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import useInteraction from '../hooks/useInteraction';
+
+interface InteractionContextProps {
+  isTouch: boolean;
+}
+
+export const InteractionContext = React.createContext<InteractionContextProps>({
+  isTouch: false,
+});
+
+export const InteractionProvider: React.FC = ({ children }) => {
+  const isTouch = useInteraction();
+
+  return (
+    <InteractionContext.Provider value={{ isTouch }}>
+      {children}
+    </InteractionContext.Provider>
+  );
+};