chore(release): 1.0.0-arm-test.1

also adjusted see more card slightly

.all-contributorsrc

@@ -312,6 +312,70 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "NuroDev",
+      "name": "nuro",
+      "avatar_url": "https://avatars.githubusercontent.com/u/4991309?v=4",
+      "profile": "https://nuro.dev",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "onedr0p",
+      "name": "ᗪєνιη ᗷυнʟ",
+      "avatar_url": "https://avatars.githubusercontent.com/u/213795?v=4",
+      "profile": "https://github.com/onedr0p",
+      "contributions": [
+        "infra"
+      ]
+    },
+    {
+      "login": "JonnyWong16",
+      "name": "JonnyWong16",
+      "avatar_url": "https://avatars.githubusercontent.com/u/9099342?v=4",
+      "profile": "https://github.com/JonnyWong16",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "Roxedus",
+      "name": "Roxedus",
+      "avatar_url": "https://avatars.githubusercontent.com/u/7110194?v=4",
+      "profile": "https://github.com/Roxedus",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "WoisWoi",
+      "name": "WoisWoi",
+      "avatar_url": "https://avatars.githubusercontent.com/u/75491231?v=4",
+      "profile": "https://github.com/WoisWoi",
+      "contributions": [
+        "translation"
+      ]
+    },
+    {
+      "login": "HubDuck",
+      "name": "HubDuck",
+      "avatar_url": "https://avatars.githubusercontent.com/u/77843475?v=4",
+      "profile": "https://github.com/HubDuck",
+      "contributions": [
+        "translation"
+      ]
+    },
+    {
+      "login": "costaht",
+      "name": "costaht",
+      "avatar_url": "https://avatars.githubusercontent.com/u/50637431?v=4",
+      "profile": "https://github.com/costaht",
+      "contributions": [
+        "doc",
+        "translation"
+      ]
     }
   ],
   "badgeTemplate": "<a href=\"#contributors-\"><img alt=\"All Contributors\" src=\"https://img.shields.io/badge/all_contributors-<%= contributors.length %>-orange.svg\"/></a>",

.github/workflows/ci.yml

@@ -24,6 +24,7 @@ jobs:
         run: yarn lint
       - name: build
         run: yarn build
+
   build_and_push:
     name: Build & Publish to Docker Hub
     needs: test
@@ -59,6 +60,7 @@ jobs:
         with:
           context: .
           file: ./Dockerfile
+          platforms: linux/amd64,linux/arm64,linux/arm/v7
           push: true
           build-args: |
             COMMIT_TAG=${{ github.sha }}
@@ -68,7 +70,15 @@ jobs:
             ghcr.io/sct/overseerr:develop
             ghcr.io/sct/overseerr:${{ github.sha }}
           cache-from: type=local,src=/tmp/.buildx-cache
-          cache-to: type=local,dest=/tmp/.buildx-cache,mode=max
+          cache-to: type=local,dest=/tmp/.buildx-cache-new
+      - # Temporary fix
+        # https://github.com/docker/build-push-action/issues/252
+        # https://github.com/moby/buildkit/issues/1896
+        name: Move cache
+        run: |
+          rm -rf /tmp/.buildx-cache
+          mv /tmp/.buildx-cache-new /tmp/.buildx-cache
+
   discord:
     name: Send Discord Notification
     needs: build_and_push
@@ -76,8 +86,7 @@ jobs:
     runs-on: ubuntu-20.04
     steps:
       - name: Get Build Job Status
-        uses: technote-space/workflow-conclusion-action@v2.1.2
-
+        uses: technote-space/workflow-conclusion-action@v2.1.5
       - name: Combine Job Status
         id: status
         run: |
@@ -87,7 +96,6 @@ jobs:
           else
             echo ::set-output name=status::$WORKFLOW_CONCLUSION
           fi
-
       - name: Post Status to Discord
         uses: sarisia/actions-status-discord@v1
         with:

.github/workflows/release.yml

@@ -4,26 +4,27 @@ on:
   push:
     branches:
       - master
+      - arm-test
 
 jobs:
-  test:
-    name: Lint & Test Build
-    runs-on: ubuntu-20.04
-    container: node:12.18-alpine
-    steps:
-      - name: checkout
-        uses: actions/checkout@v2
-      - name: install dependencies
-        env:
-          HUSKY_SKIP_INSTALL: 1
-        run: yarn
-      - name: lint
-        run: yarn lint
-      - name: build
-        run: yarn build
+  # test:
+  #   name: Lint & Test Build
+  #   runs-on: ubuntu-20.04
+  #   container: node:12.18-alpine
+  #   steps:
+  #     - name: checkout
+  #       uses: actions/checkout@v2
+  #     - name: install dependencies
+  #       env:
+  #         HUSKY_SKIP_INSTALL: 1
+  #       run: yarn
+  #     - name: lint
+  #       run: yarn lint
+  #     - name: build
+  #       run: yarn build
   semantic-release:
     name: Tag and release latest version
-    needs: test
+    # needs: test
     runs-on: ubuntu-20.04
     steps:
       - name: Checkout
@@ -31,9 +32,24 @@ jobs:
         with:
           fetch-depth: 0
       - name: Setup Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: 12
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+      - name: Login to DockerHub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_TOKEN }}
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v1
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.CR_PAT }}
       - name: Install dependencies
         run: yarn
       - name: Release
@@ -42,65 +58,65 @@ jobs:
           DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
           DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
         run: npx semantic-release
-  build-snap:
-    name: Build Snap Package (${{ matrix.architecture }})
-    needs: semantic-release
-    runs-on: ubuntu-20.04
-    strategy:
-      fail-fast: false
-      matrix:
-        architecture:
-          - amd64
-          - arm64
-          - armhf
-    steps:
-      - name: Checkout Code
-        uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
-      - name: Switch to master branch
-        run: git checkout master
-      - name: Pull latest changes
-        run: git pull
+  # build-snap:
+  #   name: Build Snap Package (${{ matrix.architecture }})
+  #   needs: semantic-release
+  #   runs-on: ubuntu-20.04
+  #   strategy:
+  #     fail-fast: false
+  #     matrix:
+  #       architecture:
+  #         - amd64
+  #         - arm64
+  #         - armhf
+  #   steps:
+  #     - name: Checkout Code
+  #       uses: actions/checkout@v2
+  #       with:
+  #         fetch-depth: 0
+  #     - name: Switch to master branch
+  #       run: git checkout master
+  #     - name: Pull latest changes
+  #       run: git pull
 
-      - name: Prepare
-        id: prepare
-        run: |
-          git fetch --prune --tags
-          if [[ $GITHUB_REF == refs/tags/* || $GITHUB_REF == refs/heads/master ]]; then
-            echo ::set-output name=RELEASE::stable
-          else
-            echo ::set-output name=RELEASE::edge
-          fi
+  #     - name: Prepare
+  #       id: prepare
+  #       run: |
+  #         git fetch --prune --tags
+  #         if [[ $GITHUB_REF == refs/tags/* || $GITHUB_REF == refs/heads/master ]]; then
+  #           echo ::set-output name=RELEASE::stable
+  #         else
+  #           echo ::set-output name=RELEASE::edge
+  #         fi
 
-      - name: Set Up QEMU
-        uses: docker/setup-qemu-action@v1
-        with:
-          image: tonistiigi/binfmt@sha256:df15403e06a03c2f461c1f7938b171fda34a5849eb63a70e2a2109ed5a778bde
+  #     - name: Set Up QEMU
+  #       uses: docker/setup-qemu-action@v1
+  #       with:
+  #         image: tonistiigi/binfmt@sha256:df15403e06a03c2f461c1f7938b171fda34a5849eb63a70e2a2109ed5a778bde
 
-      - name: Build Snap Package
-        uses: diddlesnaps/snapcraft-multiarch-action@v1
-        id: build
-        with:
-          architecture: ${{ matrix.architecture }}
+  #     - name: Build Snap Package
+  #       uses: diddlesnaps/snapcraft-multiarch-action@v1
+  #       id: build
+  #       with:
+  #         architecture: ${{ matrix.architecture }}
 
-      - name: Upload Snap Package
-        uses: actions/upload-artifact@v2
-        with:
-          name: overseerr-snap-package-${{ matrix.architecture }}
-          path: ${{ steps.build.outputs.snap }}
+  #     - name: Upload Snap Package
+  #       uses: actions/upload-artifact@v2
+  #       with:
+  #         name: overseerr-snap-package-${{ matrix.architecture }}
+  #         path: ${{ steps.build.outputs.snap }}
 
-      - name: Review Snap Package
-        uses: diddlesnaps/snapcraft-review-tools-action@v1.2.0
-        with:
-          snap: ${{ steps.build.outputs.snap }}
+  #     - name: Review Snap Package
+  #       uses: diddlesnaps/snapcraft-review-tools-action@v1.2.0
+  #       with:
+  #         snap: ${{ steps.build.outputs.snap }}
 
-      - name: Publish Snap Package
-        uses: snapcore/action-publish@v1
-        with:
-          store_login: ${{ secrets.SNAP_LOGIN }}
-          snap: ${{ steps.build.outputs.snap }}
-          release: ${{ steps.prepare.outputs.RELEASE }}
+  #     - name: Publish Snap Package
+  #       uses: snapcore/action-publish@v1
+  #       with:
+  #         store_login: ${{ secrets.SNAP_LOGIN }}
+  #         snap: ${{ steps.build.outputs.snap }}
+  #         release: ${{ steps.prepare.outputs.RELEASE }}
   discord:
     name: Send Discord Notification
     needs: semantic-release
@@ -108,7 +124,7 @@ jobs:
     runs-on: ubuntu-20.04
     steps:
       - name: Get Build Job Status
-        uses: technote-space/workflow-conclusion-action@v2.1.2
+        uses: technote-space/workflow-conclusion-action@v2.1.5
 
       - name: Combine Job Status
         id: status

.github/workflows/snap.yaml

@@ -90,7 +90,7 @@ jobs:
     runs-on: ubuntu-20.04
     steps:
       - name: Get Build Job Status
-        uses: technote-space/workflow-conclusion-action@v2.1.2
+        uses: technote-space/workflow-conclusion-action@v2.1.5
 
       - name: Combine Job Status
         id: status

CONTRIBUTING.md

@@ -1,80 +1,87 @@
 # Contributing to Overseerr
 
-All help is welcome and greatly appreciated. If you would like to contribute to the project, the instructions below can get you started...
+All help is welcome and greatly appreciated! If you would like to contribute to the project, the following instructions should 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)
+- HTML/Typescript/Javascript editor
+  - [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 14.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.
+1. [Fork](https://help.github.com/articles/fork-a-repo/) the repository to your own GitHub account and [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device:
 
    ```bash
    git clone https://github.com/YOUR_USERNAME/overseerr.git
    cd overseerr/
    ```
 
-2. Add the remote upstream.
+2. Add the remote `upstream`:
 
    ```bash
    git remote add upstream https://github.com/sct/overseerr.git
    ```
 
-3. Create a new branch
+3. Create a new branch:
 
    ```bash
    git checkout -b BRANCH_NAME develop
    ```
 
-   - It is 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`.
+   - It is recommended to give your branch a meaningful name, relevant to the feature or fix you are working on.
+     - Good examples:
+       - `docs-docker`
+       - `feature-new-system`
+       - `fix-title-cards`
+     - Bad examples:
+       - `bug`
+       - `docs`
+       - `feature`
+       - `fix`
+       - `patch`
 
-4. Run development environment
+4. Run the development environment:
 
    ```bash
    yarn
    yarn dev
    ```
 
-   - Alternatively you can run using [Docker](https://www.docker.com/) with `docker-compose up -d`. This method does not require installing NodeJS or Yarn on your machine directly.
+   - Alternatively, you can use [Docker](https://www.docker.com/) with `docker-compose up -d`. This method does not require installing NodeJS or Yarn on your machine directly.
 
-5. Create your patch and run appropriate tests.
+5. Create your patch and test your changes.
 
-6. Follow the [guidelines](#contributing-code).
-
-7. Should you need to update your fork, you can do so by rebasing from `upstream`:
-
-   ```bash
-   git fetch upstream
-   git rebase upstream/develop
-   git push origin BRANCH_NAME -f
-   ```
+   - Be sure to follow both the [code](#contributing-code) and [UI text](#ui-text-style) guidelines.
+   - Should you need to update your fork, you can do so by rebasing from `upstream`:
+     ```bash
+     git fetch upstream
+     git rebase upstream/develop
+     git push origin BRANCH_NAME -f
+     ```
 
 ### 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.
+- If you are taking on an existing bug or feature ticket, please comment on the [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.
+  - It is okay to squash your pull request down into a single commit that fits this standard.
+  - Pull requests 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.
+- 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. Your work will **not** be merged unless it is 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 automatically run with a `git` hook, but it is recommended to have the Prettier extension installed in your editor and 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 PRs opened to `master` will be closed.
+- Your code **must** be formatted correctly, or the tests will fail.
+  - We use Prettier to format our code base. It should automatically run with a Git hook, but it is recommended to have the Prettier extension installed in your editor and format on save.
+- If you have questions or need help, you can reach out via [Discussions](https://github.com/sct/overseerr/discussions) or our [Discord server](https://discord.gg/PkCWJSeCk7).
+- Only open pull requests to `develop`, never `master`! Any pull requests opened to `master` will be closed.
 
 ### UI Text Style
 
-When adding new UI text, please be sure to adhere to the following guidelines:
+When adding new UI text, please try to adhere to the following guidelines:
 
 1. Be concise and clear, and use as few words as possible to make your point.
 2. Use the Oxford comma where appropriate.
@@ -90,7 +97,7 @@ When adding new UI text, please be sure to adhere to the following guidelines:
 
 ## Translation
 
-We use [Weblate](https://hosted.weblate.org/engage/overseerr/) for our translations, and your help with localizing Overseerr would be greatly appreciated! If your language is not listed below, please [open a feature request on GitHub](https://github.com/sct/overseerr/issues/new/choose).
+We use [Weblate](https://hosted.weblate.org/engage/overseerr/) for our translations, and your help with localizing Overseerr would be greatly appreciated! If your language is not listed below, please [open a feature request](https://github.com/sct/overseerr/issues/new/choose).
 
 <a href="https://hosted.weblate.org/engage/overseerr/"><img src="https://hosted.weblate.org/widgets/overseerr/-/overseerr-frontend/multi-auto.svg" alt="Translation status" /></a>
 

Dockerfile

@@ -1,4 +1,7 @@
-FROM node:14.15-alpine AS BUILD_IMAGE
+FROM node:14.16-alpine AS BUILD_IMAGE
+
+ARG TARGETPLATFORM
+ENV TARGETPLATFORM=${TARGETPLATFORM:-linux/amd64}
 
 ARG COMMIT_TAG
 ENV COMMIT_TAG=${COMMIT_TAG}
@@ -6,7 +9,13 @@ ENV COMMIT_TAG=${COMMIT_TAG}
 COPY . /app
 WORKDIR /app
 
-RUN yarn --frozen-lockfile && \
+RUN \
+  case "${TARGETPLATFORM}" in \
+    'linux/arm64') apk add --no-cache python make g++ ;; \
+    'linux/arm/v7') apk add --no-cache python make g++ ;; \
+  esac
+
+RUN yarn --frozen-lockfile --network-timeout 1000000 && \
   yarn build
 
 # remove development dependencies
@@ -20,14 +29,15 @@ RUN touch config/DOCKER
 RUN echo "{\"commitTag\": \"${COMMIT_TAG}\"}" > committag.json
 
 
-FROM node:14.15-alpine
+FROM node:14.16-alpine
 
-RUN apk add --no-cache tzdata
+RUN apk add --no-cache tzdata tini
 
 # copy from build image
 COPY --from=BUILD_IMAGE /app /app
 WORKDIR /app
 
-CMD yarn start
+ENTRYPOINT [ "/sbin/tini", "--" ]
+CMD [ "yarn", "start" ]
 
 EXPOSE 5055

Dockerfile.local

@@ -1,4 +1,4 @@
-FROM node:12.18-alpine
+FROM node:14.16-alpine
 
 COPY . /app
 WORKDIR /app

README.md

@@ -12,7 +12,7 @@
 <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>
 <a href="https://github.com/sct/overseerr/blob/develop/LICENSE"><img alt="GitHub" src="https://img.shields.io/github/license/sct/overseerr"></a>
 <!-- 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-33-orange.svg"/></a>
+<a href="#contributors-"><img alt="All Contributors" src="https://img.shields.io/badge/all_contributors-40-orange.svg"/></a>
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 </p>
 
@@ -47,6 +47,7 @@ Currently, Overseerr is primarily distributed as Docker images. If you have Dock
 
 ```
 docker run -d \
+  --name overseerr \
   -e LOG_LEVEL=info \
   -e TZ=Asia/Tokyo \
   -p 5055:5055 \
@@ -57,7 +58,7 @@ docker run -d \
 
 After running Overseerr for the first time, configure it by visiting the web UI at http://[address]:5055 and completing the setup steps
 
-For more information or alternative installation methods, please see the [Overseerr documentation](https://docs.overseerr.dev/getting-started/installation).
+For more information and alternative installation methods, please see the [Overseerr documentation](https://docs.overseerr.dev/getting-started/installation).
 
 ⚠️ 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 `sctx/overseerr:develop` image instead! ⚠️
 
@@ -140,6 +141,15 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="https://hmnd.io"><img src="https://avatars.githubusercontent.com/u/12853597?v=4?s=100" width="100px;" alt=""/><br /><sub><b>David</b></sub></a><br /><a href="https://github.com/sct/overseerr/commits?author=hmnd" title="Code">💻</a></td>
     <td align="center"><a href="https://www.douglas-parker.com"><img src="https://avatars.githubusercontent.com/u/18235822?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Douglas Parker</b></sub></a><br /><a href="https://github.com/sct/overseerr/commits?author=douglasparker" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/dancarter"><img src="https://avatars.githubusercontent.com/u/4387516?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Daniel Carter</b></sub></a><br /><a href="https://github.com/sct/overseerr/commits?author=dancarter" title="Code">💻</a></td>
+    <td align="center"><a href="https://nuro.dev"><img src="https://avatars.githubusercontent.com/u/4991309?v=4?s=100" width="100px;" alt=""/><br /><sub><b>nuro</b></sub></a><br /><a href="https://github.com/sct/overseerr/commits?author=NuroDev" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/onedr0p"><img src="https://avatars.githubusercontent.com/u/213795?v=4?s=100" width="100px;" alt=""/><br /><sub><b>ᗪєνιη ᗷυнʟ</b></sub></a><br /><a href="#infra-onedr0p" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/JonnyWong16"><img src="https://avatars.githubusercontent.com/u/9099342?v=4?s=100" width="100px;" alt=""/><br /><sub><b>JonnyWong16</b></sub></a><br /><a href="https://github.com/sct/overseerr/commits?author=JonnyWong16" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/Roxedus"><img src="https://avatars.githubusercontent.com/u/7110194?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Roxedus</b></sub></a><br /><a href="https://github.com/sct/overseerr/commits?author=Roxedus" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/WoisWoi"><img src="https://avatars.githubusercontent.com/u/75491231?v=4?s=100" width="100px;" alt=""/><br /><sub><b>WoisWoi</b></sub></a><br /><a href="#translation-WoisWoi" title="Translation">🌍</a></td>
+    <td align="center"><a href="https://github.com/HubDuck"><img src="https://avatars.githubusercontent.com/u/77843475?v=4?s=100" width="100px;" alt=""/><br /><sub><b>HubDuck</b></sub></a><br /><a href="#translation-HubDuck" title="Translation">🌍</a></td>
+    <td align="center"><a href="https://github.com/costaht"><img src="https://avatars.githubusercontent.com/u/50637431?v=4?s=100" width="100px;" alt=""/><br /><sub><b>costaht</b></sub></a><br /><a href="https://github.com/sct/overseerr/commits?author=costaht" title="Documentation">📖</a> <a href="#translation-costaht" title="Translation">🌍</a></td>
   </tr>
 </table>
 

docs/extending-overseerr/reverse-proxy-examples.md

@@ -1,12 +1,12 @@
 # Reverse Proxy Examples
 
 {% hint style="warning" %}
-Base URLs cannot be configured in Overseerr. With this limitation, only subdomain configurations are supported.
+Base URLs cannot be configured in Overseerr. With this limitation, only subdomain configurations are supported. However, a Nginx subfolder workaround configuration is provided below to use at your own risk.
 {% endhint %}
 
-## [SWAG (Secure Web Application Gateway, formerly known as `letsencrypt`)](https://github.com/linuxserver/docker-swag)
+## SWAG
 
-A sample proxy configuration is included in SWAG. However, this page is still the only source of truth, so the SWAG sample configuration is not guaranteed to be up-to-date. If you find an inconsistency, please [report it to the LinuxServer team](https://github.com/linuxserver/reverse-proxy-confs/issues/new) or [submit a pull request to update it](https://github.com/linuxserver/reverse-proxy-confs/pulls).
+A sample proxy configuration is included in [SWAG (Secure Web Application Gateway)](https://github.com/linuxserver/docker-swag). However, this page is still the only source of truth, so the SWAG sample configuration is not guaranteed to be up-to-date. If you find an inconsistency, please [report it to the LinuxServer team](https://github.com/linuxserver/reverse-proxy-confs/issues/new) or [submit a pull request to update it](https://github.com/linuxserver/reverse-proxy-confs/pulls).
 
 To use the bundled configuration file, simply rename `overseerr.subdomain.conf.sample` in the `proxy-confs` folder to `overseerr.subdomain.conf`. Alternatively, create a new file `overseerr.subdomain.conf` in `proxy-confs` with the following configuration:
 
@@ -53,11 +53,14 @@ labels:
 
 For more information, see the Traefik documentation for a [basic example](https://doc.traefik.io/traefik/user-guides/docker-compose/basic-example/).
 
-## `nginx`
+## Nginx
+
+{% tabs %}
+{% tab title="Subdomain" %}
 
 Add the following configuration to a new file `/etc/nginx/sites-available/overseerr.example.com.conf`:
 
-```text
+```nginx
 server {
     listen 80;
     server_name overseerr.example.com;
@@ -111,6 +114,46 @@ Then, create a symlink to `/etc/nginx/sites-enabled`:
 ```bash
 sudo ln -s /etc/nginx/sites-available/overseerr.example.com.conf /etc/nginx/sites-enabled/overseerr.example.com.conf
 ```
+{% endtab %}
+
+{% tab title="Subfolder" %}
+
+{% hint style="warning" %}
+Nginx subfolder reverse proxy is unsupported. The sub filters may stop working when Overseerr is updated. Use at your own risk!
+{% endhint %}
+
+Add the following location block to your existing `nginx.conf` file.
+
+```nginx
+location ^~ /overseerr {
+    set $app 'overseerr';
+    # Remove /overseerr path to pass to the app
+    rewrite ^/overseerr/?(.*)$ /$1 break;
+    proxy_pass http://127.0.0.1:5055;  # NO TRAILING SLASH
+    # Redirect location headers
+    proxy_redirect ^ /$app;
+    proxy_redirect /setup /$app/setup;
+    proxy_redirect /login /$app/login;
+    # Sub filters to replace hardcoded paths
+    proxy_set_header Accept-Encoding "";
+    sub_filter_once off;
+    sub_filter_types *;
+    sub_filter 'href="/"' 'href="/$app"';
+    sub_filter 'href="/login"' 'href="/$app/login"';
+    sub_filter 'href:"/"' 'href:"/$app"';
+    sub_filter '/_next' '/$app/_next';
+    sub_filter '/api/v1' '/$app/api/v1';
+    sub_filter '/login/plex/loading' '/$app/login/plex/loading';
+    sub_filter '/images/' '/$app/images/';
+    sub_filter '/android-' '/$app/android-';
+    sub_filter '/apple-' '/$app/apple-';
+    sub_filter '/favicon' '/$app/favicon';
+    sub_filter '/logo.png' '/$app/logo.png';
+    sub_filter '/site.webmanifest' '/$app/site.webmanifest';
+}
+```
+{% endtab %}
+{% endtabs %}
 
 Next, test the configuration:
 

docs/getting-started/installation.md

@@ -15,6 +15,7 @@ After running Overseerr for the first time, configure it by visiting the web UI
 
 ```bash
 docker run -d \
+  --name overseerr \
   -e LOG_LEVEL=info \
   -e TZ=Asia/Tokyo \
   -p 5055:5055 \
@@ -25,10 +26,35 @@ docker run -d \
 
 {% endtab %}
 
+{% tab title="Compose" %}
+
+**docker-compose.yml:**
+
+```yaml
+---
+version: "3"
+
+services:
+  overseerr:
+    image: sctx/overseerr:latest
+    container_name: overseerr
+    environment:
+      - LOG_LEVEL=info
+      - TZ=Asia/Tokyo
+    ports:
+      - 5055:5055
+    volumes:
+      - /path/to/appdata/config:/app/config
+    restart: unless-stopped
+```
+
+{% endtab %}
+
 {% tab title="UID/GID" %}
 
 ```text
 docker run -d \
+  --name overseerr \
   --user=[ user | user:group | uid | uid:gid | user:gid | uid:group ] \
   -e LOG_LEVEL=info \
   -e TZ=Asia/Tokyo \

docs/using-overseerr/notifications/webhooks.md

@@ -35,6 +35,7 @@ These variables are usually the target user of the notification.
 - `{{notifyuser_email}}` Target user's email.
 - `{{notifyuser_avatar}}` Target user's avatar.
 - `{{notifyuser_settings_discordId}}` Target user's discord ID (if one is set).
+- `{{notifyuser_settings_telegramChatId}}` Target user's telegram Chat ID (if one is set).
 
 ### Media
 

overseerr-api.yml

@@ -97,6 +97,10 @@ components:
           default: true
         discordId:
           type: string
+        telegramChatId:
+          type: string
+        telegramSendSilently:
+          type: boolean
       required:
         - enableNotifications
     MainSettings:
@@ -574,6 +578,19 @@ components:
           type: string
         name:
           type: string
+    Network:
+      type: object
+      properties:
+        id:
+          type: number
+          example: 1
+        logoPath:
+          type: string
+          nullable: true
+        originCountry:
+          type: string
+        name:
+          type: string
     RelatedVideo:
       type: object
       properties:
@@ -1085,6 +1102,10 @@ components:
         options:
           type: object
           properties:
+            botUsername:
+              type: string
+            botAvatarUrl:
+              type: string
             webhookUrl:
               type: string
     SlackSettings:
@@ -1129,10 +1150,14 @@ components:
         options:
           type: object
           properties:
+            botUsername:
+              type: string
             botAPI:
               type: string
             chatId:
               type: string
+            sendSilently:
+              type: boolean
     PushbulletSettings:
       type: object
       properties:
@@ -1171,9 +1196,6 @@ components:
         enabled:
           type: boolean
           example: true
-        autoapprovalEnabled:
-          type: boolean
-          example: false
     NotificationEmailSettings:
       type: object
       properties:
@@ -1532,6 +1554,12 @@ components:
         discordId:
           type: string
           nullable: true
+        telegramChatId:
+          type: string
+          nullable: true
+        telegramSendSilently:
+          type: boolean
+          nullable: true
       required:
         - enableNotifications
   securitySchemes:
@@ -1693,13 +1721,13 @@ paths:
                   $ref: '#/components/schemas/PlexLibrary'
   /settings/plex/sync:
     get:
-      summary: Get status of full Plex library sync
-      description: Returns sync progress in a JSON array.
+      summary: Get status of full Plex library scan
+      description: Returns scan progress in a JSON array.
       tags:
         - settings
       responses:
         '200':
-          description: Status of Plex sync
+          description: Status of Plex scan
           content:
             application/json:
               schema:
@@ -1721,8 +1749,8 @@ paths:
                     items:
                       $ref: '#/components/schemas/PlexLibrary'
     post:
-      summary: Start full Plex library sync
-      description: Runs a full Plex library sync and returns the progress in a JSON array.
+      summary: Start full Plex library scan
+      description: Runs a full Plex library scan and returns the progress in a JSON array.
       tags:
         - settings
       requestBody:
@@ -1739,7 +1767,7 @@ paths:
                   example: false
       responses:
         '200':
-          description: Status of Plex sync
+          description: Status of Plex scan
           content:
             application/json:
               schema:
@@ -3223,6 +3251,16 @@ paths:
           schema:
             type: string
             example: en
+        - in: query
+          name: genre
+          schema:
+            type: number
+            example: 18
+        - in: query
+          name: studio
+          schema:
+            type: number
+            example: 1
       responses:
         '200':
           description: Results
@@ -3244,6 +3282,147 @@ paths:
                     type: array
                     items:
                       $ref: '#/components/schemas/MovieResult'
+  /discover/movies/genre/{genreId}:
+    get:
+      summary: Discover movies by genre
+      description: Returns a list of movies based on the provided genre ID in a JSON object.
+      tags:
+        - search
+      parameters:
+        - in: path
+          name: genreId
+          required: true
+          schema:
+            type: string
+            example: '1'
+        - in: query
+          name: page
+          schema:
+            type: number
+            example: 1
+            default: 1
+        - in: query
+          name: language
+          schema:
+            type: string
+            example: en
+      responses:
+        '200':
+          description: Results
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  page:
+                    type: number
+                    example: 1
+                  totalPages:
+                    type: number
+                    example: 20
+                  totalResults:
+                    type: number
+                    example: 200
+                  genre:
+                    $ref: '#/components/schemas/Genre'
+                  results:
+                    type: array
+                    items:
+                      $ref: '#/components/schemas/MovieResult'
+  /discover/movies/language/{language}:
+    get:
+      summary: Discover movies by original language
+      description: Returns a list of movies based on the provided ISO 639-1 language code in a JSON object.
+      tags:
+        - search
+      parameters:
+        - in: path
+          name: language
+          required: true
+          schema:
+            type: string
+            example: en
+        - in: query
+          name: page
+          schema:
+            type: number
+            example: 1
+            default: 1
+        - in: query
+          name: language
+          schema:
+            type: string
+            example: en
+      responses:
+        '200':
+          description: Results
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  page:
+                    type: number
+                    example: 1
+                  totalPages:
+                    type: number
+                    example: 20
+                  totalResults:
+                    type: number
+                    example: 200
+                  language:
+                    $ref: '#/components/schemas/SpokenLanguage'
+                  results:
+                    type: array
+                    items:
+                      $ref: '#/components/schemas/MovieResult'
+  /discover/movies/studio/{studioId}:
+    get:
+      summary: Discover movies by studio
+      description: Returns a list of movies based on the provided studio ID in a JSON object.
+      tags:
+        - search
+      parameters:
+        - in: path
+          name: studioId
+          required: true
+          schema:
+            type: string
+            example: '1'
+        - in: query
+          name: page
+          schema:
+            type: number
+            example: 1
+            default: 1
+        - in: query
+          name: language
+          schema:
+            type: string
+            example: en
+      responses:
+        '200':
+          description: Results
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  page:
+                    type: number
+                    example: 1
+                  totalPages:
+                    type: number
+                    example: 20
+                  totalResults:
+                    type: number
+                    example: 200
+                  studio:
+                    $ref: '#/components/schemas/ProductionCompany'
+                  results:
+                    type: array
+                    items:
+                      $ref: '#/components/schemas/MovieResult'
   /discover/movies/upcoming:
     get:
       summary: Upcoming movies
@@ -3301,6 +3480,16 @@ paths:
           schema:
             type: string
             example: en
+        - in: query
+          name: genre
+          schema:
+            type: number
+            example: 18
+        - in: query
+          name: network
+          schema:
+            type: number
+            example: 1
       responses:
         '200':
           description: Results
@@ -3322,6 +3511,147 @@ paths:
                     type: array
                     items:
                       $ref: '#/components/schemas/TvResult'
+  /discover/tv/language/{language}:
+    get:
+      summary: Discover TV shows by original language
+      description: Returns a list of TV shows based on the provided ISO 639-1 language code in a JSON object.
+      tags:
+        - search
+      parameters:
+        - in: path
+          name: language
+          required: true
+          schema:
+            type: string
+            example: en
+        - in: query
+          name: page
+          schema:
+            type: number
+            example: 1
+            default: 1
+        - in: query
+          name: language
+          schema:
+            type: string
+            example: en
+      responses:
+        '200':
+          description: Results
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  page:
+                    type: number
+                    example: 1
+                  totalPages:
+                    type: number
+                    example: 20
+                  totalResults:
+                    type: number
+                    example: 200
+                  language:
+                    $ref: '#/components/schemas/SpokenLanguage'
+                  results:
+                    type: array
+                    items:
+                      $ref: '#/components/schemas/TvResult'
+  /discover/tv/genre/{genreId}:
+    get:
+      summary: Discover TV shows by genre
+      description: Returns a list of TV shows based on the provided genre ID in a JSON object.
+      tags:
+        - search
+      parameters:
+        - in: path
+          name: genreId
+          required: true
+          schema:
+            type: string
+            example: '1'
+        - in: query
+          name: page
+          schema:
+            type: number
+            example: 1
+            default: 1
+        - in: query
+          name: language
+          schema:
+            type: string
+            example: en
+      responses:
+        '200':
+          description: Results
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  page:
+                    type: number
+                    example: 1
+                  totalPages:
+                    type: number
+                    example: 20
+                  totalResults:
+                    type: number
+                    example: 200
+                  genre:
+                    $ref: '#/components/schemas/Genre'
+                  results:
+                    type: array
+                    items:
+                      $ref: '#/components/schemas/TvResult'
+  /discover/tv/network/{networkId}:
+    get:
+      summary: Discover TV shows by network
+      description: Returns a list of TV shows based on the provided network ID in a JSON object.
+      tags:
+        - search
+      parameters:
+        - in: path
+          name: networkId
+          required: true
+          schema:
+            type: string
+            example: '1'
+        - in: query
+          name: page
+          schema:
+            type: number
+            example: 1
+            default: 1
+        - in: query
+          name: language
+          schema:
+            type: string
+            example: en
+      responses:
+        '200':
+          description: Results
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  page:
+                    type: number
+                    example: 1
+                  totalPages:
+                    type: number
+                    example: 20
+                  totalResults:
+                    type: number
+                    example: 200
+                  network:
+                    $ref: '#/components/schemas/Network'
+                  results:
+                    type: array
+                    items:
+                      $ref: '#/components/schemas/TvResult'
   /discover/tv/upcoming:
     get:
       summary: Discover Upcoming TV shows
@@ -4326,14 +4656,16 @@ paths:
           content:
             application/json:
               schema:
-                type: object
-                properties:
-                  iso_3166_1:
-                    type: string
-                    example: US
-                  english_name:
-                    type: string
-                    example: United States of America
+                type: array
+                items:
+                  type: object
+                  properties:
+                    iso_3166_1:
+                      type: string
+                      example: US
+                    english_name:
+                      type: string
+                      example: United States of America
   /languages:
     get:
       summary: Languages supported by TMDb
@@ -4346,17 +4678,103 @@ paths:
           content:
             application/json:
               schema:
-                type: object
-                properties:
-                  iso_639_1:
-                    type: string
-                    example: en
-                  english_name:
-                    type: string
-                    example: English
-                  name:
-                    type: string
-                    example: English
+                type: array
+                items:
+                  type: object
+                  properties:
+                    iso_639_1:
+                      type: string
+                      example: en
+                    english_name:
+                      type: string
+                      example: English
+                    name:
+                      type: string
+                      example: English
+  /studio/{studioId}:
+    get:
+      summary: Get movie studio details
+      description: Returns movie studio details in a JSON object.
+      tags:
+        - tmdb
+      parameters:
+        - in: path
+          name: studioId
+          required: true
+          schema:
+            type: number
+            example: 2
+      responses:
+        '200':
+          description: Movie studio details
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ProductionCompany'
+  /network/{networkId}:
+    get:
+      summary: Get TV network details
+      description: Returns TV network details in a JSON object.
+      tags:
+        - tmdb
+      parameters:
+        - in: path
+          name: networkId
+          required: true
+          schema:
+            type: number
+            example: 1
+      responses:
+        '200':
+          description: TV network details
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ProductionCompany'
+  /genres/movie:
+    get:
+      summary: Get list of official TMDb movie genres
+      description: Returns a list of genres in a JSON array.
+      tags:
+        - tmdb
+      responses:
+        '200':
+          description: Results
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  type: object
+                  properties:
+                    id:
+                      type: number
+                      example: 10751
+                    name:
+                      type: string
+                      example: Family
+  /genres/tv:
+    get:
+      summary: Get list of official TMDb movie genres
+      description: Returns a list of genres in a JSON array.
+      tags:
+        - tmdb
+      responses:
+        '200':
+          description: Results
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  type: object
+                  properties:
+                    id:
+                      type: number
+                      example: 18
+                    name:
+                      type: string
+                      example: Drama
 
 security:
   - cookieAuth: []

package.json

@@ -1,6 +1,6 @@
 {
   "name": "overseerr",
-  "version": "1.20.1",
+  "version": "1.0.0-arm-test.1",
   "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",
@@ -22,7 +22,7 @@
     "@svgr/webpack": "^5.5.0",
     "ace-builds": "^1.4.12",
     "axios": "^0.21.1",
-    "bcrypt": "^5.0.0",
+    "bcrypt": "^5.0.1",
     "body-parser": "^1.19.0",
     "bowser": "^2.11.0",
     "connect-typeorm": "^1.1.4",
@@ -31,7 +31,7 @@
     "csurf": "^1.11.0",
     "email-templates": "^8.0.3",
     "express": "^4.17.1",
-    "express-openapi-validator": "^4.11.0",
+    "express-openapi-validator": "^4.12.4",
     "express-session": "^1.17.1",
     "formik": "^2.2.6",
     "gravatar-url": "^3.1.0",
@@ -40,16 +40,16 @@
     "next": "10.0.3",
     "node-cache": "^5.1.2",
     "node-schedule": "^2.0.0",
-    "nodemailer": "^6.4.18",
+    "nodemailer": "^6.5.0",
     "nookies": "^2.5.2",
     "plex-api": "^5.3.1",
-    "pug": "^3.0.0",
+    "pug": "^3.0.2",
     "react": "17.0.1",
     "react-ace": "^9.3.0",
     "react-animate-height": "^2.0.23",
     "react-dom": "17.0.1",
     "react-intersection-observer": "^8.31.0",
-    "react-intl": "^5.12.5",
+    "react-intl": "^5.13.2",
     "react-markdown": "^5.0.3",
     "react-spring": "^8.0.27",
     "react-toast-notifications": "^2.4.3",
@@ -60,19 +60,19 @@
     "secure-random-password": "^0.2.2",
     "sqlite3": "^5.0.2",
     "swagger-ui-express": "^4.1.6",
-    "swr": "^0.4.2",
+    "swr": "^0.5.1",
     "typeorm": "^0.2.31",
     "uuid": "^8.3.2",
     "winston": "^3.3.3",
-    "winston-daily-rotate-file": "^4.5.0",
+    "winston-daily-rotate-file": "^4.5.1",
     "xml2js": "^0.4.23",
     "yamljs": "^0.3.0",
     "yup": "^0.32.9"
   },
   "devDependencies": {
-    "@babel/cli": "^7.12.17",
-    "@commitlint/cli": "^11.0.0",
-    "@commitlint/config-conventional": "^11.0.0",
+    "@babel/cli": "^7.13.10",
+    "@commitlint/cli": "^12.0.1",
+    "@commitlint/config-conventional": "^12.0.1",
     "@semantic-release/changelog": "^5.0.1",
     "@semantic-release/commit-analyzer": "^8.0.1",
     "@semantic-release/exec": "^5.0.0",
@@ -89,11 +89,11 @@
     "@types/express": "^4.17.11",
     "@types/express-session": "^1.17.3",
     "@types/lodash": "^4.14.168",
-    "@types/node": "^14.14.31",
+    "@types/node": "^14.14.33",
     "@types/node-schedule": "^1.3.1",
     "@types/nodemailer": "^6.4.0",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.1",
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.2",
     "@types/react-toast-notifications": "^2.4.0",
     "@types/react-transition-group": "^4.4.1",
     "@types/secure-random-password": "^0.2.0",
@@ -102,17 +102,17 @@
     "@types/xml2js": "^0.4.8",
     "@types/yamljs": "^0.2.31",
     "@types/yup": "^0.29.11",
-    "@typescript-eslint/eslint-plugin": "^4.15.1",
-    "@typescript-eslint/parser": "^4.15.1",
-    "autoprefixer": "^10.2.4",
+    "@typescript-eslint/eslint-plugin": "^4.17.0",
+    "@typescript-eslint/parser": "^4.17.0",
+    "autoprefixer": "^10.2.5",
     "babel-plugin-react-intl": "^8.2.25",
     "babel-plugin-react-intl-auto": "^3.3.0",
     "commitizen": "^4.2.3",
     "copyfiles": "^2.4.1",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^7.20.0",
+    "eslint": "^7.21.0",
     "eslint-config-prettier": "^7.2.0",
-    "eslint-plugin-formatjs": "^2.12.4",
+    "eslint-plugin-formatjs": "^2.12.7",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
@@ -121,14 +121,15 @@
     "husky": "4.3.8",
     "lint-staged": "^10.5.4",
     "nodemon": "^2.0.7",
-    "postcss": "^8.2.6",
+    "postcss": "^8.2.8",
     "postcss-preset-env": "^6.7.0",
     "prettier": "^2.2.1",
-    "semantic-release": "^17.3.9",
+    "semantic-release": "^17.4.1",
     "semantic-release-docker": "^2.2.0",
+    "semantic-release-docker-buildx": "^0.0.0-development",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "ts-node": "^9.1.1",
-    "typescript": "^4.1.5"
+    "typescript": "^4.2.3"
   },
   "resolutions": {
     "sqlite3/node-gyp": "^5.1.0"
@@ -186,13 +187,7 @@
           "message": "chore(release): ${nextRelease.version}"
         }
       ],
-      [
-        "@semantic-release/exec",
-        {
-          "prepareCmd": "docker build --build-arg COMMIT_TAG=$GITHUB_SHA -t sctx/overseerr ."
-        }
-      ],
-      "semantic-release-docker",
+      "semantic-release-docker-buildx",
       [
         "@semantic-release/github",
         {
@@ -201,13 +196,28 @@
       ]
     ],
     "branches": [
-      "master"
+      "master",
+      {
+        "name": "arm-test",
+        "prerelease": true
+      }
     ],
     "npmPublish": false,
     "publish": [
       {
-        "path": "semantic-release-docker",
-        "name": "sctx/overseerr"
+        "path": "semantic-release-docker-buildx",
+        "buildArgs": {
+          "COMMIT_TAG": "$GITHUB_SHA"
+        },
+        "imageNames": [
+          "sctx/overseerr",
+          "ghcr.io/sct/overseerr"
+        ],
+        "platforms": [
+          "linux/amd64",
+          "linux/arm64",
+          "linux/arm/v7"
+        ]
       },
       "@semantic-release/github"
     ]

public/images/radarr_logo.svg

@@ -1 +1 @@
-<?xml version="1.0" encoding="UTF-8"?><svg version="1.1" viewBox="0 0 1024 1025" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><rect id="a" width="1024" height="1024"/><clipPath id="b"><use clip-rule="evenodd" xlink:href="#a"/></clipPath></defs><g clip-path="url(#b)"><use fill="#24292E" fill-opacity="0" xlink:href="#a"/><g transform="translate(70 18)"><path d="m105.3 156.12l7.522 719.97c-60.173 7.579-105.3-22.736-105.3-83.364l-7.5216-598.71c0-189.46 173-234.94 278.3-159.15l534.03 310.72c75.216 53.05 90.259 151.57 52.651 219.78-7.522-53.05-30.086-83.365-75.216-113.68l-601.73-341.04c-45.13-30.315-82.738-22.736-82.738 45.471z" fill="#fff"/><path transform="translate(60.173 535.05)" d="m0 378.93c45.13 15.158 90.259 7.579 127.87-15.157l616.77-363.77c37.607 53.05 30.086 106.1-15.044 136.42l-518.99 303.14c-75.216 37.893-173 0-210.6-60.629z" fill="#fff"/><path transform="translate(240.69 284.95)" d="M0 416.822L368.558 204.622L7.52159 0L0 416.822Z" fill="#FFC230"/></g></g></svg>
+<?xml version="1.0" encoding="UTF-8"?><svg version="1.1" viewBox="0 0 1000 1115.2" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:xlink="http://www.w3.org/1999/xlink"><metadata><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title/></cc:Work></rdf:RDF></metadata><defs><path id="a" d="m0 0h1024v1024h-1024z"/></defs><use transform="rotate(.704 1914.4 -5491.6)" width="100%" height="100%" fill="#ffffff" fill-opacity="0" xlink:href="#a"/><g transform="matrix(1.1348 0 0 1.1348 -.0011348 -.013738)"><path d="m105.76 154.15-1.263 714.59c-60.261 6.782-105.02-23.858-104.28-84.025l-0.216-594.25c2.312-188.02 175.85-231.02 280.22-154.52l530.2 314.93c74.563 53.572 88.403 151.53 49.965 218.76-6.873-52.739-29.067-83.101-73.823-113.74l-597.52-345.84c-44.756-30.639-82.453-23.58-83.286 44.109zm-54.377 751.54c44.941 15.597 90.16 8.63 128.04-13.47l621.16-353.43c36.958 53.109 28.79 105.66-16.706 135.19l-522.65 294.46c-75.673 36.68-172.98-2.127-209.85-62.757z" fill="#fff"/><path d="m240.52 702.59 365.02-216.68-364.35-197.07z" fill="#ffc230"/></g></svg>

server/api/sonarr.ts

@@ -207,11 +207,6 @@ class SonarrAPI extends ExternalAPI {
       if (series.id) {
         series.seasons = this.buildSeasonList(options.seasons, series.seasons);
 
-        series.addOptions = {
-          ignoreEpisodesWithFiles: true,
-          searchForMissingEpisodes: options.searchNow,
-        };
-
         const newSeriesResponse = await this.axios.put<SonarrSeries>(
           '/series',
           series
@@ -225,6 +220,9 @@ class SonarrAPI extends ExternalAPI {
             label: 'Sonarr',
             movie: newSeriesResponse.data,
           });
+          if (options.searchNow) {
+            this.searchSeries(newSeriesResponse.data.id);
+          }
         } else {
           logger.error('Failed to update series in Sonarr', {
             label: 'Sonarr',
@@ -350,6 +348,33 @@ class SonarrAPI extends ExternalAPI {
     }
   }
 
+  public async searchSeries(seriesId: number): Promise<void> {
+    logger.info('Executing series search command', {
+      label: 'Sonarr API',
+      seriesId,
+    });
+    await this.runCommand('SeriesSearch', { seriesId });
+  }
+
+  private async runCommand(
+    commandName: string,
+    options: Record<string, unknown>
+  ): Promise<void> {
+    try {
+      await this.axios.post(`/command`, {
+        name: commandName,
+        ...options,
+      });
+    } catch (e) {
+      logger.error('Something went wrong attempting to run a Sonarr command.', {
+        label: 'Sonarr API',
+        message: e.message,
+      });
+
+      throw new Error('Failed to run Sonarr command.');
+    }
+  }
+
   private buildSeasonList(
     seasons: number[],
     existingSeasons?: SonarrSeason[]

server/api/themoviedb/index.ts

@@ -4,8 +4,11 @@ import ExternalAPI from '../externalapi';
 import {
   TmdbCollection,
   TmdbExternalIdResponse,
+  TmdbGenre,
+  TmdbGenresResult,
   TmdbLanguage,
   TmdbMovieDetails,
+  TmdbNetwork,
   TmdbPersonCombinedCredits,
   TmdbPersonDetail,
   TmdbRegion,
@@ -15,6 +18,7 @@ import {
   TmdbSeasonWithEpisodes,
   TmdbTvDetails,
   TmdbUpcomingMoviesResponse,
+  TmdbProductionCompany,
 } from './interfaces';
 
 interface SearchOptions {
@@ -30,6 +34,9 @@ interface DiscoverMovieOptions {
   language?: string;
   primaryReleaseDateGte?: string;
   primaryReleaseDateLte?: string;
+  originalLanguage?: string;
+  genre?: number;
+  studio?: number;
   sortBy?:
     | 'popularity.asc'
     | 'popularity.desc'
@@ -53,6 +60,9 @@ interface DiscoverTvOptions {
   firstAirDateGte?: string;
   firstAirDateLte?: string;
   includeEmptyReleaseDate?: boolean;
+  originalLanguage?: string;
+  genre?: number;
+  network?: number;
   sortBy?:
     | 'popularity.asc'
     | 'popularity.desc'
@@ -120,7 +130,7 @@ class TheMovieDb extends ExternalAPI {
 
       return data;
     } catch (e) {
-      throw new Error(`[TMDB] Failed to fetch person details: ${e.message}`);
+      throw new Error(`[TMDb] Failed to fetch person details: ${e.message}`);
     }
   };
 
@@ -142,7 +152,7 @@ class TheMovieDb extends ExternalAPI {
       return data;
     } catch (e) {
       throw new Error(
-        `[TMDB] Failed to fetch person combined credits: ${e.message}`
+        `[TMDb] Failed to fetch person combined credits: ${e.message}`
       );
     }
   };
@@ -168,7 +178,7 @@ class TheMovieDb extends ExternalAPI {
 
       return data;
     } catch (e) {
-      throw new Error(`[TMDB] Failed to fetch movie details: ${e.message}`);
+      throw new Error(`[TMDb] Failed to fetch movie details: ${e.message}`);
     }
   };
 
@@ -194,7 +204,7 @@ class TheMovieDb extends ExternalAPI {
 
       return data;
     } catch (e) {
-      throw new Error(`[TMDB] Failed to fetch tv show details: ${e.message}`);
+      throw new Error(`[TMDb] Failed to fetch TV show details: ${e.message}`);
     }
   };
 
@@ -220,7 +230,7 @@ class TheMovieDb extends ExternalAPI {
 
       return data;
     } catch (e) {
-      throw new Error(`[TMDB] Failed to fetch tv show details: ${e.message}`);
+      throw new Error(`[TMDb] Failed to fetch TV show details: ${e.message}`);
     }
   };
 
@@ -246,7 +256,7 @@ class TheMovieDb extends ExternalAPI {
 
       return data;
     } catch (e) {
-      throw new Error(`[TMDB] Failed to fetch discover movies: ${e.message}`);
+      throw new Error(`[TMDb] Failed to fetch discover movies: ${e.message}`);
     }
   }
 
@@ -272,7 +282,7 @@ class TheMovieDb extends ExternalAPI {
 
       return data;
     } catch (e) {
-      throw new Error(`[TMDB] Failed to fetch discover movies: ${e.message}`);
+      throw new Error(`[TMDb] Failed to fetch discover movies: ${e.message}`);
     }
   }
 
@@ -298,7 +308,7 @@ class TheMovieDb extends ExternalAPI {
 
       return data;
     } catch (e) {
-      throw new Error(`[TMDB] Failed to fetch movies by keyword: ${e.message}`);
+      throw new Error(`[TMDb] Failed to fetch movies by keyword: ${e.message}`);
     }
   }
 
@@ -325,7 +335,7 @@ class TheMovieDb extends ExternalAPI {
       return data;
     } catch (e) {
       throw new Error(
-        `[TMDB] Failed to fetch tv recommendations: ${e.message}`
+        `[TMDb] Failed to fetch TV recommendations: ${e.message}`
       );
     }
   }
@@ -349,7 +359,7 @@ class TheMovieDb extends ExternalAPI {
 
       return data;
     } catch (e) {
-      throw new Error(`[TMDB] Failed to fetch tv similar: ${e.message}`);
+      throw new Error(`[TMDb] Failed to fetch TV similar: ${e.message}`);
     }
   }
 
@@ -360,6 +370,9 @@ class TheMovieDb extends ExternalAPI {
     language = 'en',
     primaryReleaseDateGte,
     primaryReleaseDateLte,
+    originalLanguage,
+    genre,
+    studio,
   }: DiscoverMovieOptions = {}): Promise<TmdbSearchMovieResponse> => {
     try {
       const data = await this.get<TmdbSearchMovieResponse>('/discover/movie', {
@@ -368,17 +381,18 @@ class TheMovieDb extends ExternalAPI {
           page,
           include_adult: includeAdult,
           language,
-          with_release_type: '3|2',
           region: this.region,
-          with_original_language: this.originalLanguage,
+          with_original_language: originalLanguage ?? this.originalLanguage,
           'primary_release_date.gte': primaryReleaseDateGte,
           'primary_release_date.lte': primaryReleaseDateLte,
+          with_genres: genre,
+          with_companies: studio,
         },
       });
 
       return data;
     } catch (e) {
-      throw new Error(`[TMDB] Failed to fetch discover movies: ${e.message}`);
+      throw new Error(`[TMDb] Failed to fetch discover movies: ${e.message}`);
     }
   };
 
@@ -389,6 +403,9 @@ class TheMovieDb extends ExternalAPI {
     firstAirDateGte,
     firstAirDateLte,
     includeEmptyReleaseDate = false,
+    originalLanguage,
+    genre,
+    network,
   }: DiscoverTvOptions = {}): Promise<TmdbSearchTvResponse> => {
     try {
       const data = await this.get<TmdbSearchTvResponse>('/discover/tv', {
@@ -399,14 +416,16 @@ class TheMovieDb extends ExternalAPI {
           region: this.region,
           'first_air_date.gte': firstAirDateGte,
           'first_air_date.lte': firstAirDateLte,
-          with_original_language: this.originalLanguage,
+          with_original_language: originalLanguage ?? this.originalLanguage,
           include_null_first_air_dates: includeEmptyReleaseDate,
+          with_genres: genre,
+          with_networks: network,
         },
       });
 
       return data;
     } catch (e) {
-      throw new Error(`[TMDB] Failed to fetch discover tv: ${e.message}`);
+      throw new Error(`[TMDb] Failed to fetch discover TV: ${e.message}`);
     }
   };
 
@@ -432,7 +451,7 @@ class TheMovieDb extends ExternalAPI {
 
       return data;
     } catch (e) {
-      throw new Error(`[TMDB] Failed to fetch upcoming movies: ${e.message}`);
+      throw new Error(`[TMDb] Failed to fetch upcoming movies: ${e.message}`);
     }
   };
 
@@ -459,7 +478,7 @@ class TheMovieDb extends ExternalAPI {
 
       return data;
     } catch (e) {
-      throw new Error(`[TMDB] Failed to fetch all trending: ${e.message}`);
+      throw new Error(`[TMDb] Failed to fetch all trending: ${e.message}`);
     }
   };
 
@@ -482,7 +501,7 @@ class TheMovieDb extends ExternalAPI {
 
       return data;
     } catch (e) {
-      throw new Error(`[TMDB] Failed to fetch all trending: ${e.message}`);
+      throw new Error(`[TMDb] Failed to fetch all trending: ${e.message}`);
     }
   };
 
@@ -505,7 +524,7 @@ class TheMovieDb extends ExternalAPI {
 
       return data;
     } catch (e) {
-      throw new Error(`[TMDB] Failed to fetch all trending: ${e.message}`);
+      throw new Error(`[TMDb] Failed to fetch all trending: ${e.message}`);
     }
   };
 
@@ -537,7 +556,7 @@ class TheMovieDb extends ExternalAPI {
 
       return data;
     } catch (e) {
-      throw new Error(`[TMDB] Failed to find by external ID: ${e.message}`);
+      throw new Error(`[TMDb] Failed to find by external ID: ${e.message}`);
     }
   }
 
@@ -564,11 +583,11 @@ class TheMovieDb extends ExternalAPI {
       }
 
       throw new Error(
-        '[TMDB] Failed to find a title with the provided IMDB id'
+        '[TMDb] Failed to find a title with the provided IMDB id'
       );
     } catch (e) {
       throw new Error(
-        `[TMDB] Failed to get movie by external imdb ID: ${e.message}`
+        `[TMDb] Failed to get movie by external imdb ID: ${e.message}`
       );
     }
   }
@@ -596,11 +615,11 @@ class TheMovieDb extends ExternalAPI {
       }
 
       throw new Error(
-        `[TMDB] Failed to find a TV show with the provided TVDB ID: ${tvdbId}`
+        `[TMDb] Failed to find a TV show with the provided TVDB ID: ${tvdbId}`
       );
     } catch (e) {
       throw new Error(
-        `[TMDB] Failed to get TV show using the external TVDB ID: ${e.message}`
+        `[TMDb] Failed to get TV show using the external TVDB ID: ${e.message}`
       );
     }
   }
@@ -624,7 +643,7 @@ class TheMovieDb extends ExternalAPI {
 
       return data;
     } catch (e) {
-      throw new Error(`[TMDB] Failed to fetch collection: ${e.message}`);
+      throw new Error(`[TMDb] Failed to fetch collection: ${e.message}`);
     }
   }
 
@@ -640,7 +659,7 @@ class TheMovieDb extends ExternalAPI {
 
       return regions;
     } catch (e) {
-      throw new Error(`[TMDB] Failed to fetch countries: ${e.message}`);
+      throw new Error(`[TMDb] Failed to fetch countries: ${e.message}`);
     }
   }
 
@@ -656,7 +675,77 @@ class TheMovieDb extends ExternalAPI {
 
       return languages;
     } catch (e) {
-      throw new Error(`[TMDB] Failed to fetch langauges: ${e.message}`);
+      throw new Error(`[TMDb] Failed to fetch langauges: ${e.message}`);
+    }
+  }
+
+  public async getStudio(studioId: number): Promise<TmdbProductionCompany> {
+    try {
+      const data = await this.get<TmdbProductionCompany>(
+        `/company/${studioId}`
+      );
+
+      return data;
+    } catch (e) {
+      throw new Error(`[TMDb] Failed to fetch movie studio: ${e.message}`);
+    }
+  }
+
+  public async getNetwork(networkId: number): Promise<TmdbNetwork> {
+    try {
+      const data = await this.get<TmdbNetwork>(`/network/${networkId}`);
+
+      return data;
+    } catch (e) {
+      throw new Error(`[TMDb] Failed to fetch TV network: ${e.message}`);
+    }
+  }
+
+  public async getMovieGenres({
+    language = 'en',
+  }: {
+    language?: string;
+  } = {}): Promise<TmdbGenre[]> {
+    try {
+      const data = await this.get<TmdbGenresResult>(
+        '/genre/movie/list',
+        {
+          params: {
+            language,
+          },
+        },
+        86400 // 24 hours
+      );
+
+      const movieGenres = sortBy(data.genres, 'name');
+
+      return movieGenres;
+    } catch (e) {
+      throw new Error(`[TMDb] Failed to fetch movie genres: ${e.message}`);
+    }
+  }
+
+  public async getTvGenres({
+    language = 'en',
+  }: {
+    language?: string;
+  } = {}): Promise<TmdbGenre[]> {
+    try {
+      const data = await this.get<TmdbGenresResult>(
+        '/genre/tv/list',
+        {
+          params: {
+            language,
+          },
+        },
+        86400 // 24 hours
+      );
+
+      const tvGenres = sortBy(data.genres, 'name');
+
+      return tvGenres;
+    } catch (e) {
+      throw new Error(`[TMDb] Failed to fetch TV genres: ${e.message}`);
     }
   }
 }

server/api/themoviedb/interfaces.ts

@@ -109,6 +109,16 @@ export interface TmdbExternalIds {
   twitter_id?: string;
 }
 
+export interface TmdbProductionCompany {
+  id: number;
+  logo_path?: string;
+  name: string;
+  origin_country: string;
+  homepage?: string;
+  headquarters?: string;
+  description?: string;
+}
+
 export interface TmdbMovieDetails {
   id: number;
   imdb_id?: string;
@@ -125,12 +135,7 @@ export interface TmdbMovieDetails {
   original_title: string;
   overview?: string;
   popularity: number;
-  production_companies: {
-    id: number;
-    name: string;
-    logo_path?: string;
-    origin_country: string;
-  }[];
+  production_companies: TmdbProductionCompany[];
   production_countries: {
     iso_3166_1: string;
     name: string;
@@ -227,12 +232,7 @@ export interface TmdbTvDetails {
   last_episode_to_air?: TmdbTvEpisodeResult;
   name: string;
   next_episode_to_air?: TmdbTvEpisodeResult;
-  networks: {
-    id: number;
-    name: string;
-    logo_path: string;
-    origin_country: string;
-  }[];
+  networks: TmdbNetwork[];
   number_of_episodes: number;
   number_of_seasons: number;
   origin_country: string[];
@@ -381,3 +381,21 @@ export interface TmdbLanguage {
   english_name: string;
   name: string;
 }
+
+export interface TmdbGenresResult {
+  genres: TmdbGenre[];
+}
+
+export interface TmdbGenre {
+  id: number;
+  name: string;
+}
+
+export interface TmdbNetwork {
+  id: number;
+  name: string;
+  headquarters?: string;
+  homepage?: string;
+  logo_path?: string;
+  origin_country?: string;
+}

server/entity/MediaRequest.ts

@@ -144,7 +144,7 @@ export class MediaRequest {
    * auto approved content
    */
   @AfterUpdate()
-  public async notifyApprovedOrDeclined(): Promise<void> {
+  public async notifyApprovedOrDeclined(autoApproved = false): Promise<void> {
     if (
       this.status === MediaRequestStatus.APPROVED ||
       this.status === MediaRequestStatus.DECLINED
@@ -171,7 +171,9 @@ export class MediaRequest {
         const movie = await tmdb.getMovie({ movieId: this.media.tmdbId });
         notificationManager.sendNotification(
           this.status === MediaRequestStatus.APPROVED
-            ? Notification.MEDIA_APPROVED
+            ? autoApproved
+              ? Notification.MEDIA_AUTO_APPROVED
+              : Notification.MEDIA_APPROVED
             : Notification.MEDIA_DECLINED,
           {
             subject: movie.title,
@@ -186,7 +188,9 @@ export class MediaRequest {
         const tv = await tmdb.getTvShow({ tvId: this.media.tmdbId });
         notificationManager.sendNotification(
           this.status === MediaRequestStatus.APPROVED
-            ? Notification.MEDIA_APPROVED
+            ? autoApproved
+              ? Notification.MEDIA_AUTO_APPROVED
+              : Notification.MEDIA_APPROVED
             : Notification.MEDIA_DECLINED,
           {
             subject: tv.name,
@@ -211,13 +215,8 @@ export class MediaRequest {
 
   @AfterInsert()
   public async autoapprovalNotification(): Promise<void> {
-    const settings = getSettings().notifications;
-
-    if (
-      settings.autoapprovalEnabled &&
-      this.status === MediaRequestStatus.APPROVED
-    ) {
-      this.notifyApprovedOrDeclined();
+    if (this.status === MediaRequestStatus.APPROVED) {
+      this.notifyApprovedOrDeclined(true);
     }
   }
 

server/entity/UserSettings.ts

@@ -26,6 +26,12 @@ export class UserSettings {
   @Column({ nullable: true })
   public discordId?: string;
 
+  @Column({ nullable: true })
+  public telegramChatId?: string;
+
+  @Column({ nullable: true })
+  public telegramSendSilently?: boolean;
+
   @Column({ nullable: true })
   public region?: string;
 

server/interfaces/api/userSettingsInterfaces.ts

@@ -6,5 +6,8 @@ export interface UserSettingsGeneralResponse {
 
 export interface UserSettingsNotificationsResponse {
   enableNotifications: boolean;
+  telegramBotUsername?: string;
   discordId?: string;
+  telegramChatId?: string;
+  telegramSendSilently?: boolean;
 }

server/job/plexsync/index.ts

@@ -1,926 +0,0 @@
-import { getRepository } from 'typeorm';
-import { User } from '../../entity/User';
-import PlexAPI, { PlexLibraryItem, PlexMetadata } from '../../api/plexapi';
-import TheMovieDb from '../../api/themoviedb';
-import {
-  TmdbMovieDetails,
-  TmdbTvDetails,
-} from '../../api/themoviedb/interfaces';
-import Media from '../../entity/Media';
-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';
-import { v4 as uuid } from 'uuid';
-import animeList from '../../api/animelist';
-import AsyncLock from '../../utils/asyncLock';
-
-const BUNDLE_SIZE = 20;
-const UPDATE_RATE = 4 * 1000;
-
-const imdbRegex = new RegExp(/imdb:\/\/(tt[0-9]+)/);
-const tmdbRegex = new RegExp(/tmdb:\/\/([0-9]+)/);
-const tvdbRegex = new RegExp(/tvdb:\/\/([0-9]+)/);
-const tmdbShowRegex = new RegExp(/themoviedb:\/\/([0-9]+)/);
-const plexRegex = new RegExp(/plex:\/\//);
-// Hama agent uses ASS naming, see details here:
-// https://github.com/ZeroQI/Absolute-Series-Scanner/blob/master/README.md#forcing-the-movieseries-id
-const hamaTvdbRegex = new RegExp(/hama:\/\/tvdb[0-9]?-([0-9]+)/);
-const hamaAnidbRegex = new RegExp(/hama:\/\/anidb[0-9]?-([0-9]+)/);
-const HAMA_AGENT = 'com.plexapp.agents.hama';
-
-interface SyncStatus {
-  running: boolean;
-  progress: number;
-  total: number;
-  currentLibrary: Library;
-  libraries: Library[];
-}
-
-class JobPlexSync {
-  private sessionId: string;
-  private tmdb: TheMovieDb;
-  private plexClient: PlexAPI;
-  private items: PlexLibraryItem[] = [];
-  private progress = 0;
-  private libraries: Library[];
-  private currentLibrary: Library;
-  private running = false;
-  private isRecentOnly = false;
-  private enable4kMovie = false;
-  private enable4kShow = false;
-  private asyncLock = new AsyncLock();
-
-  constructor({ isRecentOnly }: { isRecentOnly?: boolean } = {}) {
-    this.tmdb = new TheMovieDb();
-    this.isRecentOnly = isRecentOnly ?? false;
-  }
-
-  private async getExisting(tmdbId: number, mediaType: MediaType) {
-    const mediaRepository = getRepository(Media);
-
-    const existing = await mediaRepository.findOne({
-      where: { tmdbId: tmdbId, mediaType },
-    });
-
-    return existing;
-  }
-
-  private async processMovie(plexitem: PlexLibraryItem) {
-    const mediaRepository = getRepository(Media);
-
-    try {
-      if (plexitem.guid.match(plexRegex)) {
-        const metadata = await this.plexClient.getMetadata(plexitem.ratingKey);
-        const newMedia = new Media();
-
-        if (!metadata.Guid) {
-          logger.debug('No Guid metadata for this title. Skipping', {
-            label: 'Plex Sync',
-            ratingKey: plexitem.ratingKey,
-          });
-          return;
-        }
-
-        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 (newMedia.imdbId && !newMedia.tmdbId) {
-          const tmdbMovie = await this.tmdb.getMovieByImdbId({
-            imdbId: newMedia.imdbId,
-          });
-          newMedia.tmdbId = tmdbMovie.id;
-        }
-        if (!newMedia.tmdbId) {
-          throw new Error('Unable to find TMDb ID');
-        }
-
-        const has4k = metadata.Media.some(
-          (media) => media.videoResolution === '4k'
-        );
-        const hasOtherResolution = metadata.Media.some(
-          (media) => media.videoResolution !== '4k'
-        );
-
-        await this.asyncLock.dispatch(newMedia.tmdbId, async () => {
-          const existing = await this.getExisting(
-            newMedia.tmdbId,
-            MediaType.MOVIE
-          );
-
-          if (existing) {
-            let changedExisting = false;
-
-            if (
-              (hasOtherResolution || (!this.enable4kMovie && has4k)) &&
-              existing.status !== MediaStatus.AVAILABLE
-            ) {
-              existing.status = MediaStatus.AVAILABLE;
-              existing.mediaAddedAt = new Date(plexitem.addedAt * 1000);
-              changedExisting = true;
-            }
-
-            if (
-              has4k &&
-              this.enable4kMovie &&
-              existing.status4k !== MediaStatus.AVAILABLE
-            ) {
-              existing.status4k = MediaStatus.AVAILABLE;
-              changedExisting = true;
-            }
-
-            if (!existing.mediaAddedAt && !changedExisting) {
-              existing.mediaAddedAt = new Date(plexitem.addedAt * 1000);
-              changedExisting = true;
-            }
-
-            if (
-              (hasOtherResolution || (has4k && !this.enable4kMovie)) &&
-              existing.ratingKey !== plexitem.ratingKey
-            ) {
-              existing.ratingKey = plexitem.ratingKey;
-              changedExisting = true;
-            }
-
-            if (
-              has4k &&
-              this.enable4kMovie &&
-              existing.ratingKey4k !== plexitem.ratingKey
-            ) {
-              existing.ratingKey4k = plexitem.ratingKey;
-              changedExisting = true;
-            }
-
-            if (changedExisting) {
-              await mediaRepository.save(existing);
-              this.log(
-                `Request for ${metadata.title} exists. New media types set to AVAILABLE`,
-                'info'
-              );
-            } else {
-              this.log(
-                `Title already exists and no new media types found ${metadata.title}`
-              );
-            }
-          } else {
-            newMedia.status =
-              hasOtherResolution || (!this.enable4kMovie && has4k)
-                ? MediaStatus.AVAILABLE
-                : MediaStatus.UNKNOWN;
-            newMedia.status4k =
-              has4k && this.enable4kMovie
-                ? MediaStatus.AVAILABLE
-                : MediaStatus.UNKNOWN;
-            newMedia.mediaType = MediaType.MOVIE;
-            newMedia.mediaAddedAt = new Date(plexitem.addedAt * 1000);
-            newMedia.ratingKey =
-              hasOtherResolution || (!this.enable4kMovie && has4k)
-                ? plexitem.ratingKey
-                : undefined;
-            newMedia.ratingKey4k =
-              has4k && this.enable4kMovie ? plexitem.ratingKey : undefined;
-            await mediaRepository.save(newMedia);
-            this.log(`Saved ${plexitem.title}`);
-          }
-        });
-      } else {
-        let tmdbMovieId: number | undefined;
-        let tmdbMovie: TmdbMovieDetails | undefined;
-
-        const imdbMatch = plexitem.guid.match(imdbRegex);
-        const tmdbMatch = plexitem.guid.match(tmdbShowRegex);
-
-        if (imdbMatch) {
-          tmdbMovie = await this.tmdb.getMovieByImdbId({
-            imdbId: imdbMatch[1],
-          });
-          tmdbMovieId = tmdbMovie.id;
-        } else if (tmdbMatch) {
-          tmdbMovieId = Number(tmdbMatch[1]);
-        }
-
-        if (!tmdbMovieId) {
-          throw new Error('Unable to find TMDb ID');
-        }
-
-        await this.processMovieWithId(plexitem, tmdbMovie, tmdbMovieId);
-      }
-    } catch (e) {
-      this.log(
-        `Failed to process Plex item. ratingKey: ${plexitem.ratingKey}`,
-        'error',
-        {
-          errorMessage: e.message,
-          plexitem,
-        }
-      );
-    }
-  }
-
-  private async processMovieWithId(
-    plexitem: PlexLibraryItem,
-    tmdbMovie: TmdbMovieDetails | undefined,
-    tmdbMovieId: number
-  ) {
-    const mediaRepository = getRepository(Media);
-
-    await this.asyncLock.dispatch(tmdbMovieId, async () => {
-      const metadata = await this.plexClient.getMetadata(plexitem.ratingKey);
-      const existing = await this.getExisting(tmdbMovieId, MediaType.MOVIE);
-
-      const has4k = metadata.Media.some(
-        (media) => media.videoResolution === '4k'
-      );
-      const hasOtherResolution = metadata.Media.some(
-        (media) => media.videoResolution !== '4k'
-      );
-
-      if (existing) {
-        let changedExisting = false;
-
-        if (
-          (hasOtherResolution || (!this.enable4kMovie && has4k)) &&
-          existing.status !== MediaStatus.AVAILABLE
-        ) {
-          existing.status = MediaStatus.AVAILABLE;
-          existing.mediaAddedAt = new Date(plexitem.addedAt * 1000);
-          changedExisting = true;
-        }
-
-        if (
-          has4k &&
-          this.enable4kMovie &&
-          existing.status4k !== MediaStatus.AVAILABLE
-        ) {
-          existing.status4k = MediaStatus.AVAILABLE;
-          changedExisting = true;
-        }
-
-        if (!existing.mediaAddedAt && !changedExisting) {
-          existing.mediaAddedAt = new Date(plexitem.addedAt * 1000);
-          changedExisting = true;
-        }
-
-        if (
-          (hasOtherResolution || (has4k && !this.enable4kMovie)) &&
-          existing.ratingKey !== plexitem.ratingKey
-        ) {
-          existing.ratingKey = plexitem.ratingKey;
-          changedExisting = true;
-        }
-
-        if (
-          has4k &&
-          this.enable4kMovie &&
-          existing.ratingKey4k !== plexitem.ratingKey
-        ) {
-          existing.ratingKey4k = plexitem.ratingKey;
-          changedExisting = true;
-        }
-
-        if (changedExisting) {
-          await mediaRepository.save(existing);
-          this.log(
-            `Request for ${metadata.title} exists. New media types set to AVAILABLE`,
-            'info'
-          );
-        } else {
-          this.log(
-            `Title already exists and no new media types found ${metadata.title}`
-          );
-        }
-      } else {
-        // If we have a tmdb movie guid but it didn't already exist, only then
-        // do we request the movie from tmdb (to reduce api requests)
-        if (!tmdbMovie) {
-          tmdbMovie = await this.tmdb.getMovie({ movieId: tmdbMovieId });
-        }
-        const newMedia = new Media();
-        newMedia.imdbId = tmdbMovie.external_ids.imdb_id;
-        newMedia.tmdbId = tmdbMovie.id;
-        newMedia.mediaAddedAt = new Date(plexitem.addedAt * 1000);
-        newMedia.status =
-          hasOtherResolution || (!this.enable4kMovie && has4k)
-            ? MediaStatus.AVAILABLE
-            : MediaStatus.UNKNOWN;
-        newMedia.status4k =
-          has4k && this.enable4kMovie
-            ? MediaStatus.AVAILABLE
-            : MediaStatus.UNKNOWN;
-        newMedia.mediaType = MediaType.MOVIE;
-        newMedia.ratingKey =
-          hasOtherResolution || (!this.enable4kMovie && has4k)
-            ? plexitem.ratingKey
-            : undefined;
-        newMedia.ratingKey4k =
-          has4k && this.enable4kMovie ? plexitem.ratingKey : undefined;
-        await mediaRepository.save(newMedia);
-        this.log(`Saved ${tmdbMovie.title}`);
-      }
-    });
-  }
-
-  // this adds all movie episodes from specials season for Hama agent
-  private async processHamaSpecials(metadata: PlexMetadata, tvdbId: number) {
-    const specials = metadata.Children?.Metadata.find(
-      (md) => Number(md.index) === 0
-    );
-    if (specials) {
-      const episodes = await this.plexClient.getChildrenMetadata(
-        specials.ratingKey
-      );
-      if (episodes) {
-        for (const episode of episodes) {
-          const special = animeList.getSpecialEpisode(tvdbId, episode.index);
-          if (special) {
-            if (special.tmdbId) {
-              await this.processMovieWithId(episode, undefined, special.tmdbId);
-            } else if (special.imdbId) {
-              const tmdbMovie = await this.tmdb.getMovieByImdbId({
-                imdbId: special.imdbId,
-              });
-              await this.processMovieWithId(episode, tmdbMovie, tmdbMovie.id);
-            }
-          }
-        }
-      }
-    }
-  }
-
-  // movies with hama agent actually are tv shows with at least one episode in it
-  // try to get first episode of any season - cannot hardcode season or episode number
-  // because sometimes user can have it in other season/ep than s01e01
-  private async processHamaMovie(
-    metadata: PlexMetadata,
-    tmdbMovie: TmdbMovieDetails | undefined,
-    tmdbMovieId: number
-  ) {
-    const season = metadata.Children?.Metadata[0];
-    if (season) {
-      const episodes = await this.plexClient.getChildrenMetadata(
-        season.ratingKey
-      );
-      if (episodes) {
-        await this.processMovieWithId(episodes[0], tmdbMovie, tmdbMovieId);
-      }
-    }
-  }
-
-  private async processShow(plexitem: PlexLibraryItem) {
-    const mediaRepository = getRepository(Media);
-
-    let tvShow: TmdbTvDetails | null = null;
-
-    try {
-      const ratingKey =
-        plexitem.grandparentRatingKey ??
-        plexitem.parentRatingKey ??
-        plexitem.ratingKey;
-      const metadata = await this.plexClient.getMetadata(ratingKey, {
-        includeChildren: true,
-      });
-
-      if (metadata.guid.match(tvdbRegex)) {
-        const matchedtvdb = metadata.guid.match(tvdbRegex);
-
-        // If we can find a tvdb Id, use it to get the full tmdb show details
-        if (matchedtvdb?.[1]) {
-          tvShow = await this.tmdb.getShowByTvdbId({
-            tvdbId: Number(matchedtvdb[1]),
-          });
-        }
-      } else if (metadata.guid.match(tmdbShowRegex)) {
-        const matchedtmdb = metadata.guid.match(tmdbShowRegex);
-
-        if (matchedtmdb?.[1]) {
-          tvShow = await this.tmdb.getTvShow({ tvId: Number(matchedtmdb[1]) });
-        }
-      } else if (metadata.guid.match(hamaTvdbRegex)) {
-        const matched = metadata.guid.match(hamaTvdbRegex);
-        const tvdbId = matched?.[1];
-
-        if (tvdbId) {
-          tvShow = await this.tmdb.getShowByTvdbId({ tvdbId: Number(tvdbId) });
-          if (animeList.isLoaded()) {
-            await this.processHamaSpecials(metadata, Number(tvdbId));
-          } else {
-            this.log(
-              `Hama ID ${plexitem.guid} detected, but library agent is not set to Hama`,
-              'warn'
-            );
-          }
-        }
-      } else if (metadata.guid.match(hamaAnidbRegex)) {
-        const matched = metadata.guid.match(hamaAnidbRegex);
-
-        if (!animeList.isLoaded()) {
-          this.log(
-            `Hama ID ${plexitem.guid} detected, but library agent is not set to Hama`,
-            'warn'
-          );
-        } else if (matched?.[1]) {
-          const anidbId = Number(matched[1]);
-          const result = animeList.getFromAnidbId(anidbId);
-
-          // first try to lookup tvshow by tvdbid
-          if (result?.tvdbId) {
-            const extResponse = await this.tmdb.getByExternalId({
-              externalId: result.tvdbId,
-              type: 'tvdb',
-            });
-            if (extResponse.tv_results[0]) {
-              tvShow = await this.tmdb.getTvShow({
-                tvId: extResponse.tv_results[0].id,
-              });
-            } else {
-              this.log(
-                `Missing TVDB ${result.tvdbId} entry in TMDB for AniDB ${anidbId}`
-              );
-            }
-            await this.processHamaSpecials(metadata, result.tvdbId);
-          }
-
-          if (!tvShow) {
-            // if lookup of tvshow above failed, then try movie with tmdbid/imdbid
-            // note - some tv shows have imdbid set too, that's why this need to go second
-            if (result?.tmdbId) {
-              return await this.processHamaMovie(
-                metadata,
-                undefined,
-                result.tmdbId
-              );
-            } else if (result?.imdbId) {
-              const tmdbMovie = await this.tmdb.getMovieByImdbId({
-                imdbId: result.imdbId,
-              });
-              return await this.processHamaMovie(
-                metadata,
-                tmdbMovie,
-                tmdbMovie.id
-              );
-            }
-          }
-        }
-      }
-
-      if (tvShow) {
-        await this.asyncLock.dispatch(tvShow.id, async () => {
-          if (!tvShow) {
-            // this will never execute, but typescript thinks somebody could reset tvShow from
-            // outer scope back to null before this async gets called
-            return;
-          }
-
-          // Lets get the available seasons from Plex
-          const seasons = tvShow.seasons;
-          const media = await this.getExisting(tvShow.id, MediaType.TV);
-
-          const newSeasons: Season[] = [];
-
-          const currentStandardSeasonAvailable = (
-            media?.seasons.filter(
-              (season) => season.status === MediaStatus.AVAILABLE
-            ) ?? []
-          ).length;
-          const current4kSeasonAvailable = (
-            media?.seasons.filter(
-              (season) => season.status4k === MediaStatus.AVAILABLE
-            ) ?? []
-          ).length;
-
-          for (const season of seasons) {
-            const matchedPlexSeason = metadata.Children?.Metadata.find(
-              (md) => Number(md.index) === season.season_number
-            );
-
-            const existingSeason = media?.seasons.find(
-              (es) => es.seasonNumber === season.season_number
-            );
-
-            // Check if we found the matching season and it has all the available episodes
-            if (matchedPlexSeason) {
-              // If we have a matched Plex season, get its children metadata so we can check details
-              const episodes = await this.plexClient.getChildrenMetadata(
-                matchedPlexSeason.ratingKey
-              );
-              // Total episodes that are in standard definition (not 4k)
-              const totalStandard = episodes.filter((episode) =>
-                !this.enable4kShow
-                  ? true
-                  : episode.Media.some(
-                      (media) => media.videoResolution !== '4k'
-                    )
-              ).length;
-
-              // Total episodes that are in 4k
-              const total4k = episodes.filter((episode) =>
-                episode.Media.some((media) => media.videoResolution === '4k')
-              ).length;
-
-              if (
-                media &&
-                (totalStandard > 0 || (total4k > 0 && !this.enable4kShow)) &&
-                media.ratingKey !== ratingKey
-              ) {
-                media.ratingKey = ratingKey;
-              }
-
-              if (
-                media &&
-                total4k > 0 &&
-                this.enable4kShow &&
-                media.ratingKey4k !== ratingKey
-              ) {
-                media.ratingKey4k = ratingKey;
-              }
-
-              if (existingSeason) {
-                // These ternary statements look super confusing, but they are simply
-                // setting the status to AVAILABLE if all of a type is there, partially if some,
-                // and then not modifying the status if there are 0 items.
-                // If the season was already available, we don't modify it as well.
-                existingSeason.status =
-                  totalStandard === season.episode_count ||
-                  existingSeason.status === MediaStatus.AVAILABLE
-                    ? MediaStatus.AVAILABLE
-                    : totalStandard > 0
-                    ? MediaStatus.PARTIALLY_AVAILABLE
-                    : existingSeason.status;
-                existingSeason.status4k =
-                  (this.enable4kShow && total4k === season.episode_count) ||
-                  existingSeason.status4k === MediaStatus.AVAILABLE
-                    ? MediaStatus.AVAILABLE
-                    : this.enable4kShow && total4k > 0
-                    ? MediaStatus.PARTIALLY_AVAILABLE
-                    : existingSeason.status4k;
-              } else {
-                newSeasons.push(
-                  new Season({
-                    seasonNumber: season.season_number,
-                    // This ternary is the same as the ones above, but it just falls back to "UNKNOWN"
-                    // if we dont have any items for the season
-                    status:
-                      totalStandard === season.episode_count
-                        ? MediaStatus.AVAILABLE
-                        : totalStandard > 0
-                        ? MediaStatus.PARTIALLY_AVAILABLE
-                        : MediaStatus.UNKNOWN,
-                    status4k:
-                      this.enable4kShow && total4k === season.episode_count
-                        ? MediaStatus.AVAILABLE
-                        : this.enable4kShow && total4k > 0
-                        ? MediaStatus.PARTIALLY_AVAILABLE
-                        : MediaStatus.UNKNOWN,
-                  })
-                );
-              }
-            }
-          }
-
-          // Remove extras season. We dont count it for determining availability
-          const filteredSeasons = tvShow.seasons.filter(
-            (season) => season.season_number !== 0
-          );
-
-          const isAllStandardSeasons =
-            newSeasons.filter(
-              (season) => season.status === MediaStatus.AVAILABLE
-            ).length +
-              (media?.seasons.filter(
-                (season) => season.status === MediaStatus.AVAILABLE
-              ).length ?? 0) >=
-            filteredSeasons.length;
-
-          const isAll4kSeasons =
-            newSeasons.filter(
-              (season) => season.status4k === MediaStatus.AVAILABLE
-            ).length +
-              (media?.seasons.filter(
-                (season) => season.status4k === MediaStatus.AVAILABLE
-              ).length ?? 0) >=
-            filteredSeasons.length;
-
-          if (media) {
-            // Update existing
-            media.seasons = [...media.seasons, ...newSeasons];
-
-            const newStandardSeasonAvailable = (
-              media.seasons.filter(
-                (season) => season.status === MediaStatus.AVAILABLE
-              ) ?? []
-            ).length;
-
-            const new4kSeasonAvailable = (
-              media.seasons.filter(
-                (season) => season.status4k === MediaStatus.AVAILABLE
-              ) ?? []
-            ).length;
-
-            // If at least one new season has become available, update
-            // the lastSeasonChange field so we can trigger notifications
-            if (newStandardSeasonAvailable > currentStandardSeasonAvailable) {
-              this.log(
-                `Detected ${
-                  newStandardSeasonAvailable - currentStandardSeasonAvailable
-                } new standard season(s) for ${tvShow.name}`,
-                'debug'
-              );
-              media.lastSeasonChange = new Date();
-              media.mediaAddedAt = new Date(plexitem.addedAt * 1000);
-            }
-
-            if (new4kSeasonAvailable > current4kSeasonAvailable) {
-              this.log(
-                `Detected ${
-                  new4kSeasonAvailable - current4kSeasonAvailable
-                } new 4K season(s) for ${tvShow.name}`,
-                'debug'
-              );
-              media.lastSeasonChange = new Date();
-            }
-
-            if (!media.mediaAddedAt) {
-              media.mediaAddedAt = new Date(plexitem.addedAt * 1000);
-            }
-
-            // If the show is already available, and there are no new seasons, dont adjust
-            // the status
-            const shouldStayAvailable =
-              media.status === MediaStatus.AVAILABLE &&
-              newSeasons.filter(
-                (season) => season.status !== MediaStatus.UNKNOWN
-              ).length === 0;
-            const shouldStayAvailable4k =
-              media.status4k === MediaStatus.AVAILABLE &&
-              newSeasons.filter(
-                (season) => season.status4k !== MediaStatus.UNKNOWN
-              ).length === 0;
-
-            media.status =
-              isAllStandardSeasons || shouldStayAvailable
-                ? MediaStatus.AVAILABLE
-                : media.seasons.some(
-                    (season) =>
-                      season.status === MediaStatus.PARTIALLY_AVAILABLE ||
-                      season.status === MediaStatus.AVAILABLE
-                  )
-                ? MediaStatus.PARTIALLY_AVAILABLE
-                : MediaStatus.UNKNOWN;
-            media.status4k =
-              (isAll4kSeasons || shouldStayAvailable4k) && this.enable4kShow
-                ? MediaStatus.AVAILABLE
-                : this.enable4kShow &&
-                  media.seasons.some(
-                    (season) =>
-                      season.status4k === MediaStatus.PARTIALLY_AVAILABLE ||
-                      season.status4k === MediaStatus.AVAILABLE
-                  )
-                ? MediaStatus.PARTIALLY_AVAILABLE
-                : MediaStatus.UNKNOWN;
-            await mediaRepository.save(media);
-            this.log(`Updating existing title: ${tvShow.name}`);
-          } else {
-            const newMedia = new Media({
-              mediaType: MediaType.TV,
-              seasons: newSeasons,
-              tmdbId: tvShow.id,
-              tvdbId: tvShow.external_ids.tvdb_id,
-              mediaAddedAt: new Date(plexitem.addedAt * 1000),
-              status: isAllStandardSeasons
-                ? MediaStatus.AVAILABLE
-                : newSeasons.some(
-                    (season) =>
-                      season.status === MediaStatus.PARTIALLY_AVAILABLE ||
-                      season.status === MediaStatus.AVAILABLE
-                  )
-                ? MediaStatus.PARTIALLY_AVAILABLE
-                : MediaStatus.UNKNOWN,
-              status4k:
-                isAll4kSeasons && this.enable4kShow
-                  ? MediaStatus.AVAILABLE
-                  : this.enable4kShow &&
-                    newSeasons.some(
-                      (season) =>
-                        season.status4k === MediaStatus.PARTIALLY_AVAILABLE ||
-                        season.status4k === MediaStatus.AVAILABLE
-                    )
-                  ? MediaStatus.PARTIALLY_AVAILABLE
-                  : MediaStatus.UNKNOWN,
-            });
-            await mediaRepository.save(newMedia);
-            this.log(`Saved ${tvShow.name}`);
-          }
-        });
-      } else {
-        this.log(`failed show: ${plexitem.guid}`);
-      }
-    } catch (e) {
-      this.log(
-        `Failed to process Plex item. ratingKey: ${
-          plexitem.grandparentRatingKey ??
-          plexitem.parentRatingKey ??
-          plexitem.ratingKey
-        }`,
-        'error',
-        {
-          errorMessage: e.message,
-          plexitem,
-        }
-      );
-    }
-  }
-
-  private async processItems(slicedItems: PlexLibraryItem[]) {
-    await Promise.all(
-      slicedItems.map(async (plexitem) => {
-        if (plexitem.type === 'movie') {
-          await this.processMovie(plexitem);
-        } else if (
-          plexitem.type === 'show' ||
-          plexitem.type === 'episode' ||
-          plexitem.type === 'season'
-        ) {
-          await this.processShow(plexitem);
-        }
-      })
-    );
-  }
-
-  private async loop({
-    start = 0,
-    end = BUNDLE_SIZE,
-    sessionId,
-  }: {
-    start?: number;
-    end?: number;
-    sessionId?: string;
-  } = {}) {
-    const slicedItems = this.items.slice(start, end);
-
-    if (!this.running) {
-      throw new Error('Sync was aborted.');
-    }
-
-    if (this.sessionId !== sessionId) {
-      throw new Error('New session was started. Old session aborted.');
-    }
-
-    if (start < this.items.length) {
-      this.progress = start;
-      await this.processItems(slicedItems);
-
-      await new Promise<void>((resolve, reject) =>
-        setTimeout(() => {
-          this.loop({
-            start: start + BUNDLE_SIZE,
-            end: end + BUNDLE_SIZE,
-            sessionId,
-          })
-            .then(() => resolve())
-            .catch((e) => reject(new Error(e.message)));
-        }, UPDATE_RATE)
-      );
-    }
-  }
-
-  private log(
-    message: string,
-    level: 'info' | 'error' | 'debug' | 'warn' = 'debug',
-    optional?: Record<string, unknown>
-  ): void {
-    logger[level](message, { label: 'Plex Sync', ...optional });
-  }
-
-  // checks if any of this.libraries has Hama agent set in Plex
-  private async hasHamaAgent() {
-    const plexLibraries = await this.plexClient.getLibraries();
-    return this.libraries.some((library) =>
-      plexLibraries.some(
-        (plexLibrary) =>
-          plexLibrary.agent === HAMA_AGENT && library.id === plexLibrary.key
-      )
-    );
-  }
-
-  public async run(): Promise<void> {
-    const settings = getSettings();
-    const sessionId = uuid();
-    this.sessionId = sessionId;
-    logger.info('Plex Sync Starting', { sessionId, label: 'Plex Sync' });
-    try {
-      this.running = true;
-      const userRepository = getRepository(User);
-      const admin = await userRepository.findOne({
-        select: ['id', 'plexToken'],
-        order: { id: 'ASC' },
-      });
-
-      if (!admin) {
-        return this.log('No admin configured. Plex sync skipped.', 'warn');
-      }
-
-      this.plexClient = new PlexAPI({ plexToken: admin.plexToken });
-
-      this.libraries = settings.plex.libraries.filter(
-        (library) => library.enabled
-      );
-
-      this.enable4kMovie = settings.radarr.some((radarr) => radarr.is4k);
-      if (this.enable4kMovie) {
-        this.log(
-          'At least one 4K Radarr server was detected. 4K movie detection is now enabled',
-          'info'
-        );
-      }
-
-      this.enable4kShow = settings.sonarr.some((sonarr) => sonarr.is4k);
-      if (this.enable4kShow) {
-        this.log(
-          'At least one 4K Sonarr server was detected. 4K series detection is now enabled',
-          'info'
-        );
-      }
-
-      const hasHama = await this.hasHamaAgent();
-      if (hasHama) {
-        await animeList.sync();
-      }
-
-      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({ sessionId });
-        }
-      } else {
-        for (const library of this.libraries) {
-          this.currentLibrary = library;
-          this.log(`Beginning to process library: ${library.name}`, 'info');
-          this.items = await this.plexClient.getLibraryContents(library.id);
-          await this.loop({ sessionId });
-        }
-      }
-      this.log(
-        this.isRecentOnly
-          ? 'Recently Added Scan Complete'
-          : 'Full Scan Complete',
-        'info'
-      );
-    } catch (e) {
-      logger.error('Sync interrupted', {
-        label: 'Plex Sync',
-        errorMessage: e.message,
-      });
-    } finally {
-      // If a new scanning session hasnt started, set running back to false
-      if (this.sessionId === sessionId) {
-        this.running = false;
-      }
-    }
-  }
-
-  public status(): SyncStatus {
-    return {
-      running: this.running,
-      progress: this.progress,
-      total: this.items.length,
-      currentLibrary: this.currentLibrary,
-      libraries: this.libraries,
-    };
-  }
-
-  public cancel(): void {
-    this.running = false;
-  }
-}
-
-export const jobPlexFullSync = new JobPlexSync();
-export const jobPlexRecentSync = new JobPlexSync({ isRecentOnly: true });

server/job/radarrsync/index.ts

@@ -1,248 +0,0 @@
-import { uniqWith } from 'lodash';
-import { getRepository } from 'typeorm';
-import { v4 as uuid } from 'uuid';
-import RadarrAPI, { RadarrMovie } from '../../api/radarr';
-import { MediaStatus, MediaType } from '../../constants/media';
-import Media from '../../entity/Media';
-import { getSettings, RadarrSettings } from '../../lib/settings';
-import logger from '../../logger';
-
-const BUNDLE_SIZE = 50;
-const UPDATE_RATE = 4 * 1000;
-
-interface SyncStatus {
-  running: boolean;
-  progress: number;
-  total: number;
-  currentServer: RadarrSettings;
-  servers: RadarrSettings[];
-}
-
-class JobRadarrSync {
-  private running = false;
-  private progress = 0;
-  private enable4k = false;
-  private sessionId: string;
-  private servers: RadarrSettings[];
-  private currentServer: RadarrSettings;
-  private radarrApi: RadarrAPI;
-  private items: RadarrMovie[] = [];
-
-  public async run() {
-    const settings = getSettings();
-    const sessionId = uuid();
-    this.sessionId = sessionId;
-    this.log('Radarr sync starting', 'info', { sessionId });
-
-    try {
-      this.running = true;
-
-      // Remove any duplicate Radarr servers and assign them to the servers field
-      this.servers = uniqWith(settings.radarr, (radarrA, radarrB) => {
-        return (
-          radarrA.hostname === radarrB.hostname &&
-          radarrA.port === radarrB.port &&
-          radarrA.baseUrl === radarrB.baseUrl
-        );
-      });
-
-      this.enable4k = settings.radarr.some((radarr) => radarr.is4k);
-      if (this.enable4k) {
-        this.log(
-          'At least one 4K Radarr server was detected. 4K movie detection is now enabled.',
-          'info'
-        );
-      }
-
-      for (const server of this.servers) {
-        this.currentServer = server;
-        if (server.syncEnabled) {
-          this.log(
-            `Beginning to process Radarr server: ${server.name}`,
-            'info'
-          );
-
-          this.radarrApi = new RadarrAPI({
-            apiKey: server.apiKey,
-            url: RadarrAPI.buildRadarrUrl(server, '/api/v3'),
-          });
-
-          this.items = await this.radarrApi.getMovies();
-
-          await this.loop({ sessionId });
-        } else {
-          this.log(`Sync not enabled. Skipping Radarr server: ${server.name}`);
-        }
-      }
-
-      this.log('Radarr sync complete', 'info');
-    } catch (e) {
-      this.log('Something went wrong.', 'error', { errorMessage: e.message });
-    } finally {
-      // If a new scanning session hasnt started, set running back to false
-      if (this.sessionId === sessionId) {
-        this.running = false;
-      }
-    }
-  }
-
-  public status(): SyncStatus {
-    return {
-      running: this.running,
-      progress: this.progress,
-      total: this.items.length,
-      currentServer: this.currentServer,
-      servers: this.servers,
-    };
-  }
-
-  public cancel(): void {
-    this.running = false;
-  }
-
-  private async processRadarrMovie(radarrMovie: RadarrMovie) {
-    const mediaRepository = getRepository(Media);
-    const server4k = this.enable4k && this.currentServer.is4k;
-
-    const media = await mediaRepository.findOne({
-      where: { tmdbId: radarrMovie.tmdbId },
-    });
-
-    if (media) {
-      let isChanged = false;
-      if (media.status === MediaStatus.AVAILABLE) {
-        this.log(`Movie already available: ${radarrMovie.title}`);
-      } else {
-        media[server4k ? 'status4k' : 'status'] = radarrMovie.downloaded
-          ? MediaStatus.AVAILABLE
-          : MediaStatus.PROCESSING;
-        this.log(
-          `Updated existing ${server4k ? '4K ' : ''}movie ${
-            radarrMovie.title
-          } to status ${MediaStatus[media[server4k ? 'status4k' : 'status']]}`
-        );
-        isChanged = true;
-      }
-
-      if (
-        media[server4k ? 'serviceId4k' : 'serviceId'] !== this.currentServer.id
-      ) {
-        media[server4k ? 'serviceId4k' : 'serviceId'] = this.currentServer.id;
-        this.log(`Updated service ID for media entity: ${radarrMovie.title}`);
-        isChanged = true;
-      }
-
-      if (
-        media[server4k ? 'externalServiceId4k' : 'externalServiceId'] !==
-        radarrMovie.id
-      ) {
-        media[server4k ? 'externalServiceId4k' : 'externalServiceId'] =
-          radarrMovie.id;
-        this.log(
-          `Updated external service ID for media entity: ${radarrMovie.title}`
-        );
-        isChanged = true;
-      }
-
-      if (
-        media[server4k ? 'externalServiceSlug4k' : 'externalServiceSlug'] !==
-        radarrMovie.titleSlug
-      ) {
-        media[server4k ? 'externalServiceSlug4k' : 'externalServiceSlug'] =
-          radarrMovie.titleSlug;
-        this.log(
-          `Updated external service slug for media entity: ${radarrMovie.title}`
-        );
-        isChanged = true;
-      }
-
-      if (isChanged) {
-        await mediaRepository.save(media);
-      }
-    } else {
-      const newMedia = new Media({
-        tmdbId: radarrMovie.tmdbId,
-        imdbId: radarrMovie.imdbId,
-        mediaType: MediaType.MOVIE,
-        serviceId: !server4k ? this.currentServer.id : undefined,
-        serviceId4k: server4k ? this.currentServer.id : undefined,
-        externalServiceId: !server4k ? radarrMovie.id : undefined,
-        externalServiceId4k: server4k ? radarrMovie.id : undefined,
-        status:
-          !server4k && radarrMovie.downloaded
-            ? MediaStatus.AVAILABLE
-            : !server4k
-            ? MediaStatus.PROCESSING
-            : MediaStatus.UNKNOWN,
-        status4k:
-          server4k && radarrMovie.downloaded
-            ? MediaStatus.AVAILABLE
-            : server4k
-            ? MediaStatus.PROCESSING
-            : MediaStatus.UNKNOWN,
-      });
-
-      this.log(
-        `Added media for movie ${radarrMovie.title} and set status to ${
-          MediaStatus[newMedia[server4k ? 'status4k' : 'status']]
-        }`
-      );
-      await mediaRepository.save(newMedia);
-    }
-  }
-
-  private async processItems(items: RadarrMovie[]) {
-    await Promise.all(
-      items.map(async (radarrMovie) => {
-        await this.processRadarrMovie(radarrMovie);
-      })
-    );
-  }
-
-  private async loop({
-    start = 0,
-    end = BUNDLE_SIZE,
-    sessionId,
-  }: {
-    start?: number;
-    end?: number;
-    sessionId?: string;
-  } = {}) {
-    const slicedItems = this.items.slice(start, end);
-
-    if (!this.running) {
-      throw new Error('Sync was aborted.');
-    }
-
-    if (this.sessionId !== sessionId) {
-      throw new Error('New session was started. Old session aborted.');
-    }
-
-    if (start < this.items.length) {
-      this.progress = start;
-      await this.processItems(slicedItems);
-
-      await new Promise<void>((resolve, reject) =>
-        setTimeout(() => {
-          this.loop({
-            start: start + BUNDLE_SIZE,
-            end: end + BUNDLE_SIZE,
-            sessionId,
-          })
-            .then(() => resolve())
-            .catch((e) => reject(new Error(e.message)));
-        }, UPDATE_RATE)
-      );
-    }
-  }
-
-  private log(
-    message: string,
-    level: 'info' | 'error' | 'debug' | 'warn' = 'debug',
-    optional?: Record<string, unknown>
-  ): void {
-    logger[level](message, { label: 'Radarr Sync', ...optional });
-  }
-}
-
-export const jobRadarrSync = new JobRadarrSync();

server/job/schedule.ts

@@ -1,9 +1,9 @@
 import schedule from 'node-schedule';
-import { jobPlexFullSync, jobPlexRecentSync } from './plexsync';
 import logger from '../logger';
-import { jobRadarrSync } from './radarrsync';
-import { jobSonarrSync } from './sonarrsync';
 import downloadTracker from '../lib/downloadtracker';
+import { plexFullScanner, plexRecentScanner } from '../lib/scanners/plex';
+import { radarrScanner } from '../lib/scanners/radarr';
+import { sonarrScanner } from '../lib/scanners/sonarr';
 
 interface ScheduledJob {
   id: string;
@@ -17,58 +17,60 @@ interface ScheduledJob {
 export const scheduledJobs: ScheduledJob[] = [];
 
 export const startJobs = (): void => {
-  // Run recently added plex sync every 5 minutes
+  // Run recently added plex scan every 5 minutes
   scheduledJobs.push({
-    id: 'plex-recently-added-sync',
-    name: 'Plex Recently Added Sync',
+    id: 'plex-recently-added-scan',
+    name: 'Plex Recently Added Scan',
     type: 'process',
     job: schedule.scheduleJob('0 */5 * * * *', () => {
-      logger.info('Starting scheduled job: Plex Recently Added Sync', {
+      logger.info('Starting scheduled job: Plex Recently Added Scan', {
         label: 'Jobs',
       });
-      jobPlexRecentSync.run();
+      plexRecentScanner.run();
     }),
-    running: () => jobPlexRecentSync.status().running,
-    cancelFn: () => jobPlexRecentSync.cancel(),
+    running: () => plexRecentScanner.status().running,
+    cancelFn: () => plexRecentScanner.cancel(),
   });
 
-  // Run full plex sync every 24 hours
+  // Run full plex scan every 24 hours
   scheduledJobs.push({
-    id: 'plex-full-sync',
-    name: 'Plex Full Library Sync',
+    id: 'plex-full-scan',
+    name: 'Plex Full Library Scan',
     type: 'process',
     job: schedule.scheduleJob('0 0 3 * * *', () => {
-      logger.info('Starting scheduled job: Plex Full Sync', { label: 'Jobs' });
-      jobPlexFullSync.run();
+      logger.info('Starting scheduled job: Plex Full Library Scan', {
+        label: 'Jobs',
+      });
+      plexFullScanner.run();
     }),
-    running: () => jobPlexFullSync.status().running,
-    cancelFn: () => jobPlexFullSync.cancel(),
+    running: () => plexFullScanner.status().running,
+    cancelFn: () => plexFullScanner.cancel(),
   });
 
-  // Run full radarr sync every 24 hours
+  // Run full radarr scan every 24 hours
   scheduledJobs.push({
-    id: 'radarr-sync',
-    name: 'Radarr Sync',
+    id: 'radarr-scan',
+    name: 'Radarr Scan',
     type: 'process',
     job: schedule.scheduleJob('0 0 4 * * *', () => {
-      logger.info('Starting scheduled job: Radarr Sync', { label: 'Jobs' });
-      jobRadarrSync.run();
+      logger.info('Starting scheduled job: Radarr Scan', { label: 'Jobs' });
+      radarrScanner.run();
     }),
-    running: () => jobRadarrSync.status().running,
-    cancelFn: () => jobRadarrSync.cancel(),
+    running: () => radarrScanner.status().running,
+    cancelFn: () => radarrScanner.cancel(),
   });
 
-  // Run full sonarr sync every 24 hours
+  // Run full sonarr scan every 24 hours
   scheduledJobs.push({
-    id: 'sonarr-sync',
-    name: 'Sonarr Sync',
+    id: 'sonarr-scan',
+    name: 'Sonarr Scan',
     type: 'process',
     job: schedule.scheduleJob('0 30 4 * * *', () => {
-      logger.info('Starting scheduled job: Sonarr Sync', { label: 'Jobs' });
-      jobSonarrSync.run();
+      logger.info('Starting scheduled job: Sonarr Scan', { label: 'Jobs' });
+      sonarrScanner.run();
     }),
-    running: () => jobSonarrSync.status().running,
-    cancelFn: () => jobSonarrSync.cancel(),
+    running: () => sonarrScanner.status().running,
+    cancelFn: () => sonarrScanner.cancel(),
   });
 
   // Run download sync

server/job/sonarrsync/index.ts

@@ -1,381 +0,0 @@
-import { uniqWith } from 'lodash';
-import { getRepository } from 'typeorm';
-import { v4 as uuid } from 'uuid';
-import SonarrAPI, { SonarrSeries } from '../../api/sonarr';
-import TheMovieDb from '../../api/themoviedb';
-import { TmdbTvDetails } from '../../api/themoviedb/interfaces';
-import { MediaStatus, MediaType } from '../../constants/media';
-import Media from '../../entity/Media';
-import Season from '../../entity/Season';
-import { getSettings, SonarrSettings } from '../../lib/settings';
-import logger from '../../logger';
-
-const BUNDLE_SIZE = 50;
-const UPDATE_RATE = 4 * 1000;
-
-interface SyncStatus {
-  running: boolean;
-  progress: number;
-  total: number;
-  currentServer: SonarrSettings;
-  servers: SonarrSettings[];
-}
-
-class JobSonarrSync {
-  private running = false;
-  private progress = 0;
-  private enable4k = false;
-  private sessionId: string;
-  private servers: SonarrSettings[];
-  private currentServer: SonarrSettings;
-  private sonarrApi: SonarrAPI;
-  private items: SonarrSeries[] = [];
-
-  public async run() {
-    const settings = getSettings();
-    const sessionId = uuid();
-    this.sessionId = sessionId;
-    this.log('Sonarr sync starting', 'info', { sessionId });
-
-    try {
-      this.running = true;
-
-      // Remove any duplicate Sonarr servers and assign them to the servers field
-      this.servers = uniqWith(settings.sonarr, (sonarrA, sonarrB) => {
-        return (
-          sonarrA.hostname === sonarrB.hostname &&
-          sonarrA.port === sonarrB.port &&
-          sonarrA.baseUrl === sonarrB.baseUrl
-        );
-      });
-
-      this.enable4k = settings.sonarr.some((sonarr) => sonarr.is4k);
-      if (this.enable4k) {
-        this.log(
-          'At least one 4K Sonarr server was detected. 4K movie detection is now enabled.',
-          'info'
-        );
-      }
-
-      for (const server of this.servers) {
-        this.currentServer = server;
-        if (server.syncEnabled) {
-          this.log(
-            `Beginning to process Sonarr server: ${server.name}`,
-            'info'
-          );
-
-          this.sonarrApi = new SonarrAPI({
-            apiKey: server.apiKey,
-            url: SonarrAPI.buildSonarrUrl(server, '/api/v3'),
-          });
-
-          this.items = await this.sonarrApi.getSeries();
-
-          await this.loop({ sessionId });
-        } else {
-          this.log(`Sync not enabled. Skipping Sonarr server: ${server.name}`);
-        }
-      }
-
-      this.log('Sonarr sync complete', 'info');
-    } catch (e) {
-      this.log('Something went wrong.', 'error', { errorMessage: e.message });
-    } finally {
-      // If a new scanning session hasnt started, set running back to false
-      if (this.sessionId === sessionId) {
-        this.running = false;
-      }
-    }
-  }
-
-  public status(): SyncStatus {
-    return {
-      running: this.running,
-      progress: this.progress,
-      total: this.items.length,
-      currentServer: this.currentServer,
-      servers: this.servers,
-    };
-  }
-
-  public cancel(): void {
-    this.running = false;
-  }
-
-  private async processSonarrSeries(sonarrSeries: SonarrSeries) {
-    const mediaRepository = getRepository(Media);
-    const server4k = this.enable4k && this.currentServer.is4k;
-
-    const media = await mediaRepository.findOne({
-      where: { tvdbId: sonarrSeries.tvdbId },
-    });
-
-    const currentSeasonsAvailable = (media?.seasons ?? []).filter(
-      (season) =>
-        season[server4k ? 'status4k' : 'status'] === MediaStatus.AVAILABLE
-    ).length;
-
-    const newSeasons: Season[] = [];
-
-    for (const season of sonarrSeries.seasons) {
-      const existingSeason = media?.seasons.find(
-        (es) => es.seasonNumber === season.seasonNumber
-      );
-
-      // We are already tracking this season so we can work on it directly
-      if (existingSeason) {
-        if (
-          existingSeason[server4k ? 'status4k' : 'status'] !==
-            MediaStatus.AVAILABLE &&
-          season.statistics
-        ) {
-          existingSeason[server4k ? 'status4k' : 'status'] =
-            season.statistics.episodeFileCount ===
-            season.statistics.totalEpisodeCount
-              ? MediaStatus.AVAILABLE
-              : season.statistics.episodeFileCount > 0
-              ? MediaStatus.PARTIALLY_AVAILABLE
-              : season.monitored
-              ? MediaStatus.PROCESSING
-              : existingSeason[server4k ? 'status4k' : 'status'];
-        }
-      } else {
-        if (season.statistics && season.seasonNumber !== 0) {
-          const allEpisodes =
-            season.statistics.episodeFileCount ===
-            season.statistics.totalEpisodeCount;
-          newSeasons.push(
-            new Season({
-              seasonNumber: season.seasonNumber,
-              status:
-                !server4k && allEpisodes
-                  ? MediaStatus.AVAILABLE
-                  : !server4k && season.statistics.episodeFileCount > 0
-                  ? MediaStatus.PARTIALLY_AVAILABLE
-                  : !server4k && season.monitored
-                  ? MediaStatus.PROCESSING
-                  : MediaStatus.UNKNOWN,
-              status4k:
-                server4k && allEpisodes
-                  ? MediaStatus.AVAILABLE
-                  : server4k && season.statistics.episodeFileCount > 0
-                  ? MediaStatus.PARTIALLY_AVAILABLE
-                  : !server4k && season.monitored
-                  ? MediaStatus.PROCESSING
-                  : MediaStatus.UNKNOWN,
-            })
-          );
-        }
-      }
-    }
-
-    const filteredSeasons = sonarrSeries.seasons.filter(
-      (s) => s.seasonNumber !== 0
-    );
-
-    const isAllSeasons =
-      (media?.seasons ?? []).filter(
-        (s) => s[server4k ? 'status4k' : 'status'] === MediaStatus.AVAILABLE
-      ).length +
-        newSeasons.filter(
-          (s) => s[server4k ? 'status4k' : 'status'] === MediaStatus.AVAILABLE
-        ).length >=
-        filteredSeasons.length && filteredSeasons.length > 0;
-
-    if (media) {
-      media.seasons = [...media.seasons, ...newSeasons];
-
-      const newSeasonsAvailable = (media?.seasons ?? []).filter(
-        (season) =>
-          season[server4k ? 'status4k' : 'status'] === MediaStatus.AVAILABLE
-      ).length;
-
-      if (newSeasonsAvailable > currentSeasonsAvailable) {
-        this.log(
-          `Detected ${newSeasonsAvailable - currentSeasonsAvailable} new ${
-            server4k ? '4K ' : ''
-          }season(s) for ${sonarrSeries.title}`,
-          'debug'
-        );
-        media.lastSeasonChange = new Date();
-      }
-
-      if (
-        media[server4k ? 'serviceId4k' : 'serviceId'] !== this.currentServer.id
-      ) {
-        media[server4k ? 'serviceId4k' : 'serviceId'] = this.currentServer.id;
-        this.log(`Updated service ID for media entity: ${sonarrSeries.title}`);
-      }
-
-      if (
-        media[server4k ? 'externalServiceId4k' : 'externalServiceId'] !==
-        sonarrSeries.id
-      ) {
-        media[server4k ? 'externalServiceId4k' : 'externalServiceId'] =
-          sonarrSeries.id;
-        this.log(
-          `Updated external service ID for media entity: ${sonarrSeries.title}`
-        );
-      }
-
-      if (
-        media[server4k ? 'externalServiceSlug4k' : 'externalServiceSlug'] !==
-        sonarrSeries.titleSlug
-      ) {
-        media[server4k ? 'externalServiceSlug4k' : 'externalServiceSlug'] =
-          sonarrSeries.titleSlug;
-        this.log(
-          `Updated external service slug for media entity: ${sonarrSeries.title}`
-        );
-      }
-
-      // If the show is already available, and there are no new seasons, dont adjust
-      // the status
-      const shouldStayAvailable =
-        media.status === MediaStatus.AVAILABLE &&
-        newSeasons.filter(
-          (season) =>
-            season[server4k ? 'status4k' : 'status'] !== MediaStatus.UNKNOWN
-        ).length === 0;
-
-      media[server4k ? 'status4k' : 'status'] =
-        isAllSeasons || shouldStayAvailable
-          ? MediaStatus.AVAILABLE
-          : media.seasons.some(
-              (season) =>
-                season[server4k ? 'status4k' : 'status'] ===
-                  MediaStatus.AVAILABLE ||
-                season[server4k ? 'status4k' : 'status'] ===
-                  MediaStatus.PARTIALLY_AVAILABLE
-            )
-          ? MediaStatus.PARTIALLY_AVAILABLE
-          : media.seasons.some(
-              (season) =>
-                season[server4k ? 'status4k' : 'status'] ===
-                MediaStatus.PROCESSING
-            )
-          ? MediaStatus.PROCESSING
-          : MediaStatus.UNKNOWN;
-
-      await mediaRepository.save(media);
-    } else {
-      const tmdb = new TheMovieDb();
-      let tvShow: TmdbTvDetails;
-
-      try {
-        tvShow = await tmdb.getShowByTvdbId({
-          tvdbId: sonarrSeries.tvdbId,
-        });
-      } catch (e) {
-        this.log(
-          'Failed to create new media item during sync. TVDB ID is missing from TMDB?',
-          'warn',
-          { sonarrSeries, errorMessage: e.message }
-        );
-        return;
-      }
-
-      const newMedia = new Media({
-        tmdbId: tvShow.id,
-        tvdbId: sonarrSeries.tvdbId,
-        mediaType: MediaType.TV,
-        serviceId: !server4k ? this.currentServer.id : undefined,
-        serviceId4k: server4k ? this.currentServer.id : undefined,
-        externalServiceId: !server4k ? sonarrSeries.id : undefined,
-        externalServiceId4k: server4k ? sonarrSeries.id : undefined,
-        externalServiceSlug: !server4k ? sonarrSeries.titleSlug : undefined,
-        externalServiceSlug4k: server4k ? sonarrSeries.titleSlug : undefined,
-        seasons: newSeasons,
-        status:
-          !server4k && isAllSeasons
-            ? MediaStatus.AVAILABLE
-            : !server4k &&
-              newSeasons.some(
-                (s) =>
-                  s.status === MediaStatus.PARTIALLY_AVAILABLE ||
-                  s.status === MediaStatus.AVAILABLE
-              )
-            ? MediaStatus.PARTIALLY_AVAILABLE
-            : !server4k
-            ? MediaStatus.PROCESSING
-            : MediaStatus.UNKNOWN,
-        status4k:
-          server4k && isAllSeasons
-            ? MediaStatus.AVAILABLE
-            : server4k &&
-              newSeasons.some(
-                (s) =>
-                  s.status4k === MediaStatus.PARTIALLY_AVAILABLE ||
-                  s.status4k === MediaStatus.AVAILABLE
-              )
-            ? MediaStatus.PARTIALLY_AVAILABLE
-            : server4k
-            ? MediaStatus.PROCESSING
-            : MediaStatus.UNKNOWN,
-      });
-
-      this.log(
-        `Added media for series ${sonarrSeries.title} and set status to ${
-          MediaStatus[newMedia[server4k ? 'status4k' : 'status']]
-        }`
-      );
-      await mediaRepository.save(newMedia);
-    }
-  }
-
-  private async processItems(items: SonarrSeries[]) {
-    await Promise.all(
-      items.map(async (sonarrSeries) => {
-        await this.processSonarrSeries(sonarrSeries);
-      })
-    );
-  }
-
-  private async loop({
-    start = 0,
-    end = BUNDLE_SIZE,
-    sessionId,
-  }: {
-    start?: number;
-    end?: number;
-    sessionId?: string;
-  } = {}) {
-    const slicedItems = this.items.slice(start, end);
-
-    if (!this.running) {
-      throw new Error('Sync was aborted.');
-    }
-
-    if (this.sessionId !== sessionId) {
-      throw new Error('New session was started. Old session aborted.');
-    }
-
-    if (start < this.items.length) {
-      this.progress = start;
-      await this.processItems(slicedItems);
-
-      await new Promise<void>((resolve, reject) =>
-        setTimeout(() => {
-          this.loop({
-            start: start + BUNDLE_SIZE,
-            end: end + BUNDLE_SIZE,
-            sessionId,
-          })
-            .then(() => resolve())
-            .catch((e) => reject(new Error(e.message)));
-        }, UPDATE_RATE)
-      );
-    }
-  }
-
-  private log(
-    message: string,
-    level: 'info' | 'error' | 'debug' | 'warn' = 'debug',
-    optional?: Record<string, unknown>
-  ): void {
-    logger[level](message, { label: 'Sonarr Sync', ...optional });
-  }
-}
-
-export const jobSonarrSync = new JobSonarrSync();

server/lib/notifications/agents/agent.ts

@@ -21,6 +21,12 @@ export abstract class BaseAgent<T extends NotificationAgentConfig> {
   }
 
   protected abstract getSettings(): T;
+
+  protected userNotificationTypes: Notification[] = [
+    Notification.MEDIA_APPROVED,
+    Notification.MEDIA_DECLINED,
+    Notification.MEDIA_AVAILABLE,
+  ];
 }
 
 export interface NotificationAgent {

server/lib/notifications/agents/discord.ts

@@ -71,7 +71,7 @@ interface DiscordRichEmbed {
 
 interface DiscordWebhookPayload {
   embeds: DiscordRichEmbed[];
-  username: string;
+  username?: string;
   avatar_url?: string;
   tts: boolean;
   content?: string;
@@ -122,6 +122,7 @@ class DiscordAgent
         });
         break;
       case Notification.MEDIA_APPROVED:
+      case Notification.MEDIA_AUTO_APPROVED:
         color = EmbedColors.PURPLE;
         fields.push({
           name: 'Status',
@@ -201,10 +202,13 @@ class DiscordAgent
     type: Notification,
     payload: NotificationPayload
   ): Promise<boolean> {
-    logger.debug('Sending discord notification', { label: 'Notifications' });
+    logger.debug('Sending Discord notification', { label: 'Notifications' });
     try {
-      const settings = getSettings();
-      const webhookUrl = this.getSettings().options.webhookUrl;
+      const {
+        botUsername,
+        botAvatarUrl,
+        webhookUrl,
+      } = this.getSettings().options;
 
       if (!webhookUrl) {
         return false;
@@ -214,6 +218,7 @@ class DiscordAgent
       let content = undefined;
 
       if (
+        this.userNotificationTypes.includes(type) &&
         payload.notifyUser.settings?.enableNotifications &&
         payload.notifyUser.settings?.discordId
       ) {
@@ -222,7 +227,8 @@ class DiscordAgent
       }
 
       await axios.post(webhookUrl, {
-        username: settings.main.applicationTitle,
+        username: botUsername,
+        avatar_url: botAvatarUrl,
         embeds: [this.buildEmbed(type, payload)],
         content,
         allowed_mentions: {

server/lib/notifications/agents/email.ts

@@ -7,6 +7,7 @@ import { getRepository } from 'typeorm';
 import { User } from '../../../entity/User';
 import { Permission } from '../../permissions';
 import PreparedEmail from '../../email';
+import { MediaType } from '../../../constants/media';
 
 class EmailAgent
   extends BaseAgent<NotificationAgentEmail>
@@ -57,7 +58,9 @@ class EmailAgent
               to: user.email,
             },
             locals: {
-              body: 'A user has requested new media!',
+              body: `A user has requested a new ${
+                payload.media?.mediaType === MediaType.TV ? 'series' : 'movie'
+              }!`,
               mediaName: payload.subject,
               imageUrl: payload.image,
               timestamp: new Date().toTimeString(),
@@ -67,13 +70,15 @@ class EmailAgent
                 : undefined,
               applicationUrl,
               applicationTitle,
-              requestType: 'New Request',
+              requestType: `New ${
+                payload.media?.mediaType === MediaType.TV ? 'Series' : 'Movie'
+              } Request`,
             },
           });
         });
       return true;
     } catch (e) {
-      logger.error('Mail notification failed to send', {
+      logger.error('Email notification failed to send', {
         label: 'Notifications',
         message: e.message,
       });
@@ -103,8 +108,11 @@ class EmailAgent
               to: user.email,
             },
             locals: {
-              body:
-                "A user's new request has failed to add to Sonarr or Radarr",
+              body: `A new request for the following ${
+                payload.media?.mediaType === MediaType.TV ? 'series' : 'movie'
+              } could not be added to ${
+                payload.media?.mediaType === MediaType.TV ? 'Sonarr' : 'Radarr'
+              }`,
               mediaName: payload.subject,
               imageUrl: payload.image,
               timestamp: new Date().toTimeString(),
@@ -114,13 +122,15 @@ class EmailAgent
                 : undefined,
               applicationUrl,
               applicationTitle,
-              requestType: 'Failed Request',
+              requestType: `Failed ${
+                payload.media?.mediaType === MediaType.TV ? 'Series' : 'Movie'
+              } Request`,
             },
           });
         });
       return true;
     } catch (e) {
-      logger.error('Mail notification failed to send', {
+      logger.error('Email notification failed to send', {
         label: 'Notifications',
         message: e.message,
       });
@@ -143,7 +153,9 @@ class EmailAgent
           to: payload.notifyUser.email,
         },
         locals: {
-          body: 'Your request for the following media has been approved:',
+          body: `Your request for the following ${
+            payload.media?.mediaType === MediaType.TV ? 'series' : 'movie'
+          } has been approved:`,
           mediaName: payload.subject,
           imageUrl: payload.image,
           timestamp: new Date().toTimeString(),
@@ -153,12 +165,64 @@ class EmailAgent
             : undefined,
           applicationUrl,
           applicationTitle,
-          requestType: 'Request Approved',
+          requestType: `${
+            payload.media?.mediaType === MediaType.TV ? 'Series' : 'Movie'
+          } Request Approved`,
         },
       });
       return true;
     } catch (e) {
-      logger.error('Mail notification failed to send', {
+      logger.error('Email notification failed to send', {
+        label: 'Notifications',
+        message: e.message,
+      });
+      return false;
+    }
+  }
+
+  private async sendMediaAutoApprovedEmail(payload: NotificationPayload) {
+    // This is getting main settings for the whole app
+    const { applicationUrl, applicationTitle } = getSettings().main;
+    try {
+      const userRepository = getRepository(User);
+      const users = await userRepository.find();
+
+      // Send to all users with the manage requests permission (or admins)
+      users
+        .filter((user) => user.hasPermission(Permission.MANAGE_REQUESTS))
+        .forEach((user) => {
+          const email = new PreparedEmail();
+
+          email.send({
+            template: path.join(
+              __dirname,
+              '../../../templates/email/media-request'
+            ),
+            message: {
+              to: user.email,
+            },
+            locals: {
+              body: `A new request for the following ${
+                payload.media?.mediaType === MediaType.TV ? 'series' : 'movie'
+              } has been automatically approved:`,
+              mediaName: payload.subject,
+              imageUrl: payload.image,
+              timestamp: new Date().toTimeString(),
+              requestedBy: payload.notifyUser.displayName,
+              actionUrl: applicationUrl
+                ? `${applicationUrl}/${payload.media?.mediaType}/${payload.media?.tmdbId}`
+                : undefined,
+              applicationUrl,
+              applicationTitle,
+              requestType: `${
+                payload.media?.mediaType === MediaType.TV ? 'Series' : 'Movie'
+              } Request Automatically Approved`,
+            },
+          });
+        });
+      return true;
+    } catch (e) {
+      logger.error('Email notification failed to send', {
         label: 'Notifications',
         message: e.message,
       });
@@ -181,7 +245,9 @@ class EmailAgent
           to: payload.notifyUser.email,
         },
         locals: {
-          body: 'Your request for the following media was declined:',
+          body: `Your request for the following ${
+            payload.media?.mediaType === MediaType.TV ? 'series' : 'movie'
+          } was declined:`,
           mediaName: payload.subject,
           imageUrl: payload.image,
           timestamp: new Date().toTimeString(),
@@ -191,12 +257,14 @@ class EmailAgent
             : undefined,
           applicationUrl,
           applicationTitle,
-          requestType: 'Request Declined',
+          requestType: `${
+            payload.media?.mediaType === MediaType.TV ? 'Series' : 'Movie'
+          } Request Declined`,
         },
       });
       return true;
     } catch (e) {
-      logger.error('Mail notification failed to send', {
+      logger.error('Email notification failed to send', {
         label: 'Notifications',
         message: e.message,
       });
@@ -219,7 +287,9 @@ class EmailAgent
           to: payload.notifyUser.email,
         },
         locals: {
-          body: 'Your requested media is now available!',
+          body: `The following ${
+            payload.media?.mediaType === MediaType.TV ? 'series' : 'movie'
+          } you requested is now available!`,
           mediaName: payload.subject,
           imageUrl: payload.image,
           timestamp: new Date().toTimeString(),
@@ -229,12 +299,14 @@ class EmailAgent
             : undefined,
           applicationUrl,
           applicationTitle,
-          requestType: 'Now Available',
+          requestType: `${
+            payload.media?.mediaType === MediaType.TV ? 'Series' : 'Movie'
+          } Now Available`,
         },
       });
       return true;
     } catch (e) {
-      logger.error('Mail notification failed to send', {
+      logger.error('Email notification failed to send', {
         label: 'Notifications',
         message: e.message,
       });
@@ -261,7 +333,7 @@ class EmailAgent
       });
       return true;
     } catch (e) {
-      logger.error('Mail notification failed to send', {
+      logger.error('Email notification failed to send', {
         label: 'Notifications',
         message: e.message,
       });
@@ -282,6 +354,9 @@ class EmailAgent
       case Notification.MEDIA_APPROVED:
         this.sendMediaApprovedEmail(payload);
         break;
+      case Notification.MEDIA_AUTO_APPROVED:
+        this.sendMediaAutoApprovedEmail(payload);
+        break;
       case Notification.MEDIA_DECLINED:
         this.sendMediaDeclinedEmail(payload);
         break;

server/lib/notifications/agents/pushbullet.ts

@@ -3,6 +3,7 @@ import { hasNotificationType, Notification } from '..';
 import logger from '../../../logger';
 import { getSettings, NotificationAgentPushbullet } from '../../settings';
 import { BaseAgent, NotificationAgent, NotificationPayload } from './agent';
+import { MediaType } from '../../../constants/media';
 
 interface PushbulletPayload {
   title: string;
@@ -50,7 +51,9 @@ class PushbulletAgent
 
     switch (type) {
       case Notification.MEDIA_PENDING:
-        messageTitle = 'New Request';
+        messageTitle = `New ${
+          payload.media?.mediaType === MediaType.TV ? 'Series' : 'Movie'
+        } Request`;
         message += `${title}`;
         if (plot) {
           message += `\n\n${plot}`;
@@ -59,7 +62,20 @@ class PushbulletAgent
         message += `\nStatus: Pending Approval`;
         break;
       case Notification.MEDIA_APPROVED:
-        messageTitle = 'Request Approved';
+        messageTitle = `${
+          payload.media?.mediaType === MediaType.TV ? 'Series' : 'Movie'
+        } Request Approved`;
+        message += `${title}`;
+        if (plot) {
+          message += `\n\n${plot}`;
+        }
+        message += `\n\nRequested By: ${username}`;
+        message += `\nStatus: Processing`;
+        break;
+      case Notification.MEDIA_AUTO_APPROVED:
+        messageTitle = `${
+          payload.media?.mediaType === MediaType.TV ? 'Series' : 'Movie'
+        } Request Automatically Approved`;
         message += `${title}`;
         if (plot) {
           message += `\n\n${plot}`;
@@ -68,7 +84,9 @@ class PushbulletAgent
         message += `\nStatus: Processing`;
         break;
       case Notification.MEDIA_AVAILABLE:
-        messageTitle = 'Now Available';
+        messageTitle = `${
+          payload.media?.mediaType === MediaType.TV ? 'Series' : 'Movie'
+        } Now Available`;
         message += `${title}`;
         if (plot) {
           message += `\n\n${plot}`;
@@ -77,7 +95,9 @@ class PushbulletAgent
         message += `\nStatus: Available`;
         break;
       case Notification.MEDIA_DECLINED:
-        messageTitle = 'Request Declined';
+        messageTitle = `${
+          payload.media?.mediaType === MediaType.TV ? 'Series' : 'Movie'
+        } Request Declined`;
         message += `${title}`;
         if (plot) {
           message += `\n\n${plot}`;
@@ -86,7 +106,9 @@ class PushbulletAgent
         message += `\nStatus: Declined`;
         break;
       case Notification.MEDIA_FAILED:
-        messageTitle = 'Failed Request';
+        messageTitle = `Failed ${
+          payload.media?.mediaType === MediaType.TV ? 'Series' : 'Movie'
+        } Request`;
         message += `${title}`;
         if (plot) {
           message += `\n\n${plot}`;

server/lib/notifications/agents/pushover.ts

@@ -3,6 +3,7 @@ import { hasNotificationType, Notification } from '..';
 import logger from '../../../logger';
 import { getSettings, NotificationAgentPushover } from '../../settings';
 import { BaseAgent, NotificationAgent, NotificationPayload } from './agent';
+import { MediaType } from '../../../constants/media';
 
 interface PushoverPayload {
   token: string;
@@ -64,7 +65,9 @@ class PushoverAgent
 
     switch (type) {
       case Notification.MEDIA_PENDING:
-        messageTitle = 'New Request';
+        messageTitle = `New ${
+          payload.media?.mediaType === MediaType.TV ? 'Series' : 'Movie'
+        } Request`;
         message += `<b>${title}</b>`;
         if (plot) {
           message += `\n${plot}`;
@@ -73,7 +76,20 @@ class PushoverAgent
         message += `\n\n<b>Status</b>\nPending Approval`;
         break;
       case Notification.MEDIA_APPROVED:
-        messageTitle = 'Request Approved';
+        messageTitle = `${
+          payload.media?.mediaType === MediaType.TV ? 'Series' : 'Movie'
+        } Request Approved`;
+        message += `<b>${title}</b>`;
+        if (plot) {
+          message += `\n${plot}`;
+        }
+        message += `\n\n<b>Requested By</b>\n${username}`;
+        message += `\n\n<b>Status</b>\nProcessing`;
+        break;
+      case Notification.MEDIA_AUTO_APPROVED:
+        messageTitle = `${
+          payload.media?.mediaType === MediaType.TV ? 'Series' : 'Movie'
+        } Request Automatically Approved`;
         message += `<b>${title}</b>`;
         if (plot) {
           message += `\n${plot}`;
@@ -82,7 +98,9 @@ class PushoverAgent
         message += `\n\n<b>Status</b>\nProcessing`;
         break;
       case Notification.MEDIA_AVAILABLE:
-        messageTitle = 'Now Available';
+        messageTitle = `${
+          payload.media?.mediaType === MediaType.TV ? 'Series' : 'Movie'
+        } Now Available`;
         message += `<b>${title}</b>`;
         if (plot) {
           message += `\n${plot}`;
@@ -91,7 +109,9 @@ class PushoverAgent
         message += `\n\n<b>Status</b>\nAvailable`;
         break;
       case Notification.MEDIA_DECLINED:
-        messageTitle = 'Request Declined';
+        messageTitle = `${
+          payload.media?.mediaType === MediaType.TV ? 'Series' : 'Movie'
+        } Request Declined`;
         message += `<b>${title}</b>`;
         if (plot) {
           message += `\n${plot}`;
@@ -101,7 +121,9 @@ class PushoverAgent
         priority = 1;
         break;
       case Notification.MEDIA_FAILED:
-        messageTitle = 'Failed Request';
+        messageTitle = `Failed ${
+          payload.media?.mediaType === MediaType.TV ? 'Series' : 'Movie'
+        } Request`;
         message += `<b>${title}</b>`;
         if (plot) {
           message += `\n${plot}`;

server/lib/notifications/agents/slack.ts

@@ -3,6 +3,7 @@ import { hasNotificationType, Notification } from '..';
 import logger from '../../../logger';
 import { getSettings, NotificationAgentSlack } from '../../settings';
 import { BaseAgent, NotificationAgent, NotificationPayload } from './agent';
+import { MediaType } from '../../../constants/media';
 
 interface EmbedField {
   type: 'plain_text' | 'mrkdwn';
@@ -72,35 +73,54 @@ class SlackAgent
 
     switch (type) {
       case Notification.MEDIA_PENDING:
-        header = 'New Request';
+        header = `New ${
+          payload.media?.mediaType === MediaType.TV ? 'Series' : 'Movie'
+        } Request`;
         fields.push({
           type: 'mrkdwn',
           text: '*Status*\nPending Approval',
         });
         break;
       case Notification.MEDIA_APPROVED:
-        header = 'Request Approved';
+        header = `${
+          payload.media?.mediaType === MediaType.TV ? 'Series' : 'Movie'
+        } Request Approved`;
+        fields.push({
+          type: 'mrkdwn',
+          text: '*Status*\nProcessing',
+        });
+        break;
+      case Notification.MEDIA_AUTO_APPROVED:
+        header = `${
+          payload.media?.mediaType === MediaType.TV ? 'Series' : 'Movie'
+        } Request Automatically Approved`;
         fields.push({
           type: 'mrkdwn',
           text: '*Status*\nProcessing',
         });
         break;
       case Notification.MEDIA_AVAILABLE:
-        header = 'Now Available';
+        header = `${
+          payload.media?.mediaType === MediaType.TV ? 'Series' : 'Movie'
+        } Now Available`;
         fields.push({
           type: 'mrkdwn',
           text: '*Status*\nAvailable',
         });
         break;
       case Notification.MEDIA_DECLINED:
-        header = 'Request Declined';
+        header = `${
+          payload.media?.mediaType === MediaType.TV ? 'Series' : 'Movie'
+        } Request Declined`;
         fields.push({
           type: 'mrkdwn',
           text: '*Status*\nDeclined',
         });
         break;
       case Notification.MEDIA_FAILED:
-        header = 'Failed Request';
+        header = `Failed ${
+          payload.media?.mediaType === MediaType.TV ? 'Series' : 'Movie'
+        } Request`;
         fields.push({
           type: 'mrkdwn',
           text: '*Status*\nFailed',
@@ -206,7 +226,7 @@ class SlackAgent
     type: Notification,
     payload: NotificationPayload
   ): Promise<boolean> {
-    logger.debug('Sending slack notification', { label: 'Notifications' });
+    logger.debug('Sending Slack notification', { label: 'Notifications' });
     try {
       const webhookUrl = this.getSettings().options.webhookUrl;
 

server/lib/notifications/agents/telegram.ts

@@ -2,15 +2,24 @@ import axios from 'axios';
 import { hasNotificationType, Notification } from '..';
 import logger from '../../../logger';
 import { getSettings, NotificationAgentTelegram } from '../../settings';
+import { MediaType } from '../../../constants/media';
 import { BaseAgent, NotificationAgent, NotificationPayload } from './agent';
 
-interface TelegramPayload {
+interface TelegramMessagePayload {
   text: string;
   parse_mode: string;
   chat_id: string;
   disable_notification: boolean;
 }
 
+interface TelegramPhotoPayload {
+  photo: string;
+  caption: string;
+  parse_mode: string;
+  chat_id: string;
+  disable_notification: boolean;
+}
+
 class TelegramAgent
   extends BaseAgent<NotificationAgentTelegram>
   implements NotificationAgent {
@@ -58,7 +67,9 @@ class TelegramAgent
     /* eslint-disable no-useless-escape */
     switch (type) {
       case Notification.MEDIA_PENDING:
-        message += `\*New Request\*`;
+        message += `\*New ${
+          payload.media?.mediaType === MediaType.TV ? 'Series' : 'Movie'
+        } Request\*`;
         message += `\n\n\*${title}\*`;
         if (plot) {
           message += `\n${plot}`;
@@ -67,7 +78,20 @@ class TelegramAgent
         message += `\n\n\*Status\*\nPending Approval`;
         break;
       case Notification.MEDIA_APPROVED:
-        message += `\*Request Approved\*`;
+        message += `\*${
+          payload.media?.mediaType === MediaType.TV ? 'Series' : 'Movie'
+        } Request Approved\*`;
+        message += `\n\n\*${title}\*`;
+        if (plot) {
+          message += `\n${plot}`;
+        }
+        message += `\n\n\*Requested By\*\n${user}`;
+        message += `\n\n\*Status\*\nProcessing`;
+        break;
+      case Notification.MEDIA_AUTO_APPROVED:
+        message += `\*${
+          payload.media?.mediaType === MediaType.TV ? 'Series' : 'Movie'
+        } Request Automatically Approved\*`;
         message += `\n\n\*${title}\*`;
         if (plot) {
           message += `\n${plot}`;
@@ -76,7 +100,9 @@ class TelegramAgent
         message += `\n\n\*Status\*\nProcessing`;
         break;
       case Notification.MEDIA_AVAILABLE:
-        message += `\*Now Available\*`;
+        message += `\*${
+          payload.media?.mediaType === MediaType.TV ? 'Series' : 'Movie'
+        } Now Available\*`;
         message += `\n\n\*${title}\*`;
         if (plot) {
           message += `\n${plot}`;
@@ -85,7 +111,9 @@ class TelegramAgent
         message += `\n\n\*Status\*\nAvailable`;
         break;
       case Notification.MEDIA_DECLINED:
-        message += `\*Request Declined\*`;
+        message += `\*${
+          payload.media?.mediaType === MediaType.TV ? 'Series' : 'Movie'
+        } Request Declined\*`;
         message += `\n\n\*${title}\*`;
         if (plot) {
           message += `\n${plot}`;
@@ -94,7 +122,9 @@ class TelegramAgent
         message += `\n\n\*Status\*\nDeclined`;
         break;
       case Notification.MEDIA_FAILED:
-        message += `\*Failed Request\*`;
+        message += `\*Failed ${
+          payload.media?.mediaType === MediaType.TV ? 'Series' : 'Movie'
+        } Request\*`;
         message += `\n\n\*${title}\*`;
         if (plot) {
           message += `\n${plot}`;
@@ -121,18 +151,53 @@ class TelegramAgent
     type: Notification,
     payload: NotificationPayload
   ): Promise<boolean> {
-    logger.debug('Sending telegram notification', { label: 'Notifications' });
+    logger.debug('Sending Telegram notification', { label: 'Notifications' });
     try {
       const endpoint = `${this.baseUrl}bot${
         this.getSettings().options.botAPI
-      }/sendMessage`;
+      }/${payload.image ? 'sendPhoto' : 'sendMessage'}`;
 
-      await axios.post(endpoint, {
-        text: this.buildMessage(type, payload),
-        parse_mode: 'MarkdownV2',
-        chat_id: `${this.getSettings().options.chatId}`,
-        disable_notification: this.getSettings().options.sendSilently,
-      } as TelegramPayload);
+      // Send system notification
+      await (payload.image
+        ? axios.post(endpoint, {
+            photo: payload.image,
+            caption: this.buildMessage(type, payload),
+            parse_mode: 'MarkdownV2',
+            chat_id: `${this.getSettings().options.chatId}`,
+            disable_notification: this.getSettings().options.sendSilently,
+          } as TelegramPhotoPayload)
+        : axios.post(endpoint, {
+            text: this.buildMessage(type, payload),
+            parse_mode: 'MarkdownV2',
+            chat_id: `${this.getSettings().options.chatId}`,
+            disable_notification: this.getSettings().options.sendSilently,
+          } as TelegramMessagePayload));
+
+      // Send user notification
+      if (
+        this.userNotificationTypes.includes(type) &&
+        payload.notifyUser.settings?.enableNotifications &&
+        payload.notifyUser.settings?.telegramChatId &&
+        payload.notifyUser.settings?.telegramChatId !==
+          this.getSettings().options.chatId
+      ) {
+        await (payload.image
+          ? axios.post(endpoint, {
+              photo: payload.image,
+              caption: this.buildMessage(type, payload),
+              parse_mode: 'MarkdownV2',
+              chat_id: `${payload.notifyUser.settings.telegramChatId}`,
+              disable_notification:
+                payload.notifyUser.settings.telegramSendSilently,
+            } as TelegramPhotoPayload)
+          : axios.post(endpoint, {
+              text: this.buildMessage(type, payload),
+              parse_mode: 'MarkdownV2',
+              chat_id: `${payload.notifyUser.settings.telegramChatId}`,
+              disable_notification:
+                payload.notifyUser.settings.telegramSendSilently,
+            } as TelegramMessagePayload));
+      }
 
       return true;
     } catch (e) {

server/lib/notifications/agents/webhook.ts

@@ -20,6 +20,7 @@ const KeyMap: Record<string, string | KeyMapFunction> = {
   notifyuser_email: 'notifyUser.email',
   notifyuser_avatar: 'notifyUser.avatar',
   notifyuser_settings_discordId: 'notifyUser.settings.discordId',
+  notifyuser_settings_telegramChatId: 'notifyUser.settings.telegramChatId',
   media_tmdbid: 'media.tmdbId',
   media_imdbid: 'media.imdbId',
   media_tvdbid: 'media.tvdbId',
@@ -137,7 +138,7 @@ class WebhookAgent
 
       return true;
     } catch (e) {
-      logger.error('Error sending Webhook notification', {
+      logger.error('Error sending webhook notification', {
         label: 'Notifications',
         errorMessage: e.message,
       });

server/lib/notifications/index.ts

@@ -9,6 +9,7 @@ export enum Notification {
   MEDIA_FAILED = 16,
   TEST_NOTIFICATION = 32,
   MEDIA_DECLINED = 64,
+  MEDIA_AUTO_APPROVED = 128,
 }
 
 export const hasNotificationType = (

server/lib/scanners/baseScanner.ts

@@ -0,0 +1,616 @@
+import { getRepository } from 'typeorm';
+import { v4 as uuid } from 'uuid';
+import TheMovieDb from '../../api/themoviedb';
+import { MediaStatus, MediaType } from '../../constants/media';
+import Media from '../../entity/Media';
+import Season from '../../entity/Season';
+import logger from '../../logger';
+import AsyncLock from '../../utils/asyncLock';
+import { getSettings } from '../settings';
+
+// Default scan rates (can be overidden)
+const BUNDLE_SIZE = 20;
+const UPDATE_RATE = 4 * 1000;
+
+export type StatusBase = {
+  running: boolean;
+  progress: number;
+  total: number;
+};
+
+export interface RunnableScanner<T> {
+  run: () => Promise<void>;
+  status: () => T & StatusBase;
+}
+
+export interface MediaIds {
+  tmdbId: number;
+  imdbId?: string;
+  tvdbId?: number;
+  isHama?: boolean;
+}
+
+interface ProcessOptions {
+  is4k?: boolean;
+  mediaAddedAt?: Date;
+  ratingKey?: string;
+  serviceId?: number;
+  externalServiceId?: number;
+  externalServiceSlug?: string;
+  title?: string;
+  processing?: boolean;
+}
+
+export interface ProcessableSeason {
+  seasonNumber: number;
+  totalEpisodes: number;
+  episodes: number;
+  episodes4k: number;
+  is4kOverride?: boolean;
+  processing?: boolean;
+}
+
+class BaseScanner<T> {
+  private bundleSize;
+  private updateRate;
+  protected progress = 0;
+  protected items: T[] = [];
+  protected scannerName: string;
+  protected enable4kMovie = false;
+  protected enable4kShow = false;
+  protected sessionId: string;
+  protected running = false;
+  readonly asyncLock = new AsyncLock();
+  readonly tmdb = new TheMovieDb();
+
+  protected constructor(
+    scannerName: string,
+    {
+      updateRate,
+      bundleSize,
+    }: {
+      updateRate?: number;
+      bundleSize?: number;
+    } = {}
+  ) {
+    this.scannerName = scannerName;
+    this.bundleSize = bundleSize ?? BUNDLE_SIZE;
+    this.updateRate = updateRate ?? UPDATE_RATE;
+  }
+
+  private async getExisting(tmdbId: number, mediaType: MediaType) {
+    const mediaRepository = getRepository(Media);
+
+    const existing = await mediaRepository.findOne({
+      where: { tmdbId: tmdbId, mediaType },
+    });
+
+    return existing;
+  }
+
+  protected async processMovie(
+    tmdbId: number,
+    {
+      is4k = false,
+      mediaAddedAt,
+      ratingKey,
+      serviceId,
+      externalServiceId,
+      externalServiceSlug,
+      processing = false,
+      title = 'Unknown Title',
+    }: ProcessOptions = {}
+  ): Promise<void> {
+    const mediaRepository = getRepository(Media);
+
+    await this.asyncLock.dispatch(tmdbId, async () => {
+      const existing = await this.getExisting(tmdbId, MediaType.MOVIE);
+
+      if (existing) {
+        let changedExisting = false;
+
+        if (existing[is4k ? 'status4k' : 'status'] !== MediaStatus.AVAILABLE) {
+          existing[is4k ? 'status4k' : 'status'] = processing
+            ? MediaStatus.PROCESSING
+            : MediaStatus.AVAILABLE;
+          if (mediaAddedAt) {
+            existing.mediaAddedAt = mediaAddedAt;
+          }
+          changedExisting = true;
+        }
+
+        if (!changedExisting && !existing.mediaAddedAt && mediaAddedAt) {
+          existing.mediaAddedAt = mediaAddedAt;
+          changedExisting = true;
+        }
+
+        if (
+          ratingKey &&
+          existing[is4k ? 'ratingKey4k' : 'ratingKey'] !== ratingKey
+        ) {
+          existing[is4k ? 'ratingKey4k' : 'ratingKey'] = ratingKey;
+          changedExisting = true;
+        }
+
+        if (
+          serviceId !== undefined &&
+          existing[is4k ? 'serviceId4k' : 'serviceId'] !== serviceId
+        ) {
+          existing[is4k ? 'serviceId4k' : 'serviceId'] = serviceId;
+          changedExisting = true;
+        }
+
+        if (
+          externalServiceId !== undefined &&
+          existing[is4k ? 'externalServiceId4k' : 'externalServiceId'] !==
+            externalServiceId
+        ) {
+          existing[
+            is4k ? 'externalServiceId4k' : 'externalServiceId'
+          ] = externalServiceId;
+          changedExisting = true;
+        }
+
+        if (
+          externalServiceSlug !== undefined &&
+          existing[is4k ? 'externalServiceSlug4k' : 'externalServiceSlug'] !==
+            externalServiceSlug
+        ) {
+          existing[
+            is4k ? 'externalServiceSlug4k' : 'externalServiceSlug'
+          ] = externalServiceSlug;
+          changedExisting = true;
+        }
+
+        if (changedExisting) {
+          await mediaRepository.save(existing);
+          this.log(
+            `Media for ${title} exists. Changed were detected and the title will be updated.`,
+            'info'
+          );
+        } else {
+          this.log(`Title already exists and no changes detected for ${title}`);
+        }
+      } else {
+        const newMedia = new Media();
+        newMedia.tmdbId = tmdbId;
+
+        newMedia.status =
+          !is4k && !processing
+            ? MediaStatus.AVAILABLE
+            : !is4k && processing
+            ? MediaStatus.PROCESSING
+            : MediaStatus.UNKNOWN;
+        newMedia.status4k =
+          is4k && this.enable4kMovie && !processing
+            ? MediaStatus.AVAILABLE
+            : is4k && this.enable4kMovie && processing
+            ? MediaStatus.PROCESSING
+            : MediaStatus.UNKNOWN;
+        newMedia.mediaType = MediaType.MOVIE;
+        newMedia.serviceId = !is4k ? serviceId : undefined;
+        newMedia.serviceId4k = is4k ? serviceId : undefined;
+        newMedia.externalServiceId = !is4k ? externalServiceId : undefined;
+        newMedia.externalServiceId4k = is4k ? externalServiceId : undefined;
+        newMedia.externalServiceSlug = !is4k ? externalServiceSlug : undefined;
+        newMedia.externalServiceSlug4k = is4k ? externalServiceSlug : undefined;
+
+        if (mediaAddedAt) {
+          newMedia.mediaAddedAt = mediaAddedAt;
+        }
+
+        if (ratingKey) {
+          newMedia.ratingKey = !is4k ? ratingKey : undefined;
+          newMedia.ratingKey4k =
+            is4k && this.enable4kMovie ? ratingKey : undefined;
+        }
+        await mediaRepository.save(newMedia);
+        this.log(`Saved new media: ${title}`);
+      }
+    });
+  }
+
+  /**
+   * processShow takes a TMDb ID and an array of ProcessableSeasons, which
+   * should include the total episodes a sesaon has + the total available
+   * episodes that each season currently has. Unlike processMovie, this method
+   * does not take an `is4k` option. We handle both the 4k _and_ non 4k status
+   * in one method.
+   *
+   * Note: If 4k is not enable, ProcessableSeasons should combine their episode counts
+   * into the normal episodes properties and avoid using the 4k properties.
+   */
+  protected async processShow(
+    tmdbId: number,
+    tvdbId: number,
+    seasons: ProcessableSeason[],
+    {
+      mediaAddedAt,
+      ratingKey,
+      serviceId,
+      externalServiceId,
+      externalServiceSlug,
+      is4k = false,
+      title = 'Unknown Title',
+    }: ProcessOptions = {}
+  ): Promise<void> {
+    const mediaRepository = getRepository(Media);
+
+    await this.asyncLock.dispatch(tmdbId, async () => {
+      const media = await this.getExisting(tmdbId, MediaType.TV);
+
+      const newSeasons: Season[] = [];
+
+      const currentStandardSeasonsAvailable = (
+        media?.seasons.filter(
+          (season) => season.status === MediaStatus.AVAILABLE
+        ) ?? []
+      ).length;
+
+      const current4kSeasonsAvailable = (
+        media?.seasons.filter(
+          (season) => season.status4k === MediaStatus.AVAILABLE
+        ) ?? []
+      ).length;
+
+      for (const season of seasons) {
+        const existingSeason = media?.seasons.find(
+          (es) => es.seasonNumber === season.seasonNumber
+        );
+
+        // We update the rating keys in the seasons loop because we need episode counts
+        if (media && season.episodes > 0 && media.ratingKey !== ratingKey) {
+          media.ratingKey = ratingKey;
+        }
+
+        if (
+          media &&
+          season.episodes4k > 0 &&
+          this.enable4kShow &&
+          media.ratingKey4k !== ratingKey
+        ) {
+          media.ratingKey4k = ratingKey;
+        }
+
+        if (existingSeason) {
+          // Here we update seasons if they already exist.
+          // If the season is already marked as available, we
+          // force it to stay available (to avoid competing scanners)
+          existingSeason.status =
+            (season.totalEpisodes === season.episodes && season.episodes > 0) ||
+            existingSeason.status === MediaStatus.AVAILABLE
+              ? MediaStatus.AVAILABLE
+              : season.episodes > 0
+              ? MediaStatus.PARTIALLY_AVAILABLE
+              : !season.is4kOverride && season.processing
+              ? MediaStatus.PROCESSING
+              : existingSeason.status;
+
+          // Same thing here, except we only do updates if 4k is enabled
+          existingSeason.status4k =
+            (this.enable4kShow &&
+              season.episodes4k === season.totalEpisodes &&
+              season.episodes4k > 0) ||
+            existingSeason.status4k === MediaStatus.AVAILABLE
+              ? MediaStatus.AVAILABLE
+              : this.enable4kShow && season.episodes4k > 0
+              ? MediaStatus.PARTIALLY_AVAILABLE
+              : season.is4kOverride && season.processing
+              ? MediaStatus.PROCESSING
+              : existingSeason.status4k;
+        } else {
+          newSeasons.push(
+            new Season({
+              seasonNumber: season.seasonNumber,
+              status:
+                season.totalEpisodes === season.episodes && season.episodes > 0
+                  ? MediaStatus.AVAILABLE
+                  : season.episodes > 0
+                  ? MediaStatus.PARTIALLY_AVAILABLE
+                  : !season.is4kOverride && season.processing
+                  ? MediaStatus.PROCESSING
+                  : MediaStatus.UNKNOWN,
+              status4k:
+                this.enable4kShow &&
+                season.totalEpisodes === season.episodes4k &&
+                season.episodes4k > 0
+                  ? MediaStatus.AVAILABLE
+                  : this.enable4kShow && season.episodes4k > 0
+                  ? MediaStatus.PARTIALLY_AVAILABLE
+                  : season.is4kOverride && season.processing
+                  ? MediaStatus.PROCESSING
+                  : MediaStatus.UNKNOWN,
+            })
+          );
+        }
+      }
+
+      const isAllStandardSeasons =
+        seasons.length &&
+        seasons.every(
+          (season) =>
+            season.episodes === season.totalEpisodes && season.episodes > 0
+        );
+
+      const isAll4kSeasons =
+        seasons.length &&
+        seasons.every(
+          (season) =>
+            season.episodes4k === season.totalEpisodes && season.episodes4k > 0
+        );
+
+      if (media) {
+        media.seasons = [...media.seasons, ...newSeasons];
+
+        const newStandardSeasonsAvailable = (
+          media.seasons.filter(
+            (season) => season.status === MediaStatus.AVAILABLE
+          ) ?? []
+        ).length;
+
+        const new4kSeasonsAvailable = (
+          media.seasons.filter(
+            (season) => season.status4k === MediaStatus.AVAILABLE
+          ) ?? []
+        ).length;
+
+        // If at least one new season has become available, update
+        // the lastSeasonChange field so we can trigger notifications
+        if (newStandardSeasonsAvailable > currentStandardSeasonsAvailable) {
+          this.log(
+            `Detected ${
+              newStandardSeasonsAvailable - currentStandardSeasonsAvailable
+            } new standard season(s) for ${title}`,
+            'debug'
+          );
+          media.lastSeasonChange = new Date();
+
+          if (mediaAddedAt) {
+            media.mediaAddedAt = mediaAddedAt;
+          }
+        }
+
+        if (new4kSeasonsAvailable > current4kSeasonsAvailable) {
+          this.log(
+            `Detected ${
+              new4kSeasonsAvailable - current4kSeasonsAvailable
+            } new 4K season(s) for ${title}`,
+            'debug'
+          );
+          media.lastSeasonChange = new Date();
+        }
+
+        if (!media.mediaAddedAt && mediaAddedAt) {
+          media.mediaAddedAt = mediaAddedAt;
+        }
+
+        if (serviceId !== undefined) {
+          media[is4k ? 'serviceId4k' : 'serviceId'] = serviceId;
+        }
+
+        if (externalServiceId !== undefined) {
+          media[
+            is4k ? 'externalServiceId4k' : 'externalServiceId'
+          ] = externalServiceId;
+        }
+
+        if (externalServiceSlug !== undefined) {
+          media[
+            is4k ? 'externalServiceSlug4k' : 'externalServiceSlug'
+          ] = externalServiceSlug;
+        }
+
+        // If the show is already available, and there are no new seasons, dont adjust
+        // the status
+        const shouldStayAvailable =
+          media.status === MediaStatus.AVAILABLE &&
+          newSeasons.filter((season) => season.status !== MediaStatus.UNKNOWN)
+            .length === 0;
+        const shouldStayAvailable4k =
+          media.status4k === MediaStatus.AVAILABLE &&
+          newSeasons.filter((season) => season.status4k !== MediaStatus.UNKNOWN)
+            .length === 0;
+
+        media.status =
+          isAllStandardSeasons || shouldStayAvailable
+            ? MediaStatus.AVAILABLE
+            : media.seasons.some(
+                (season) =>
+                  season.status === MediaStatus.PARTIALLY_AVAILABLE ||
+                  season.status === MediaStatus.AVAILABLE
+              )
+            ? MediaStatus.PARTIALLY_AVAILABLE
+            : media.seasons.some(
+                (season) => season.status === MediaStatus.PROCESSING
+              )
+            ? MediaStatus.PROCESSING
+            : MediaStatus.UNKNOWN;
+        media.status4k =
+          (isAll4kSeasons || shouldStayAvailable4k) && this.enable4kShow
+            ? MediaStatus.AVAILABLE
+            : this.enable4kShow &&
+              media.seasons.some(
+                (season) =>
+                  season.status4k === MediaStatus.PARTIALLY_AVAILABLE ||
+                  season.status4k === MediaStatus.AVAILABLE
+              )
+            ? MediaStatus.PARTIALLY_AVAILABLE
+            : media.seasons.some(
+                (season) => season.status4k === MediaStatus.PROCESSING
+              )
+            ? MediaStatus.PROCESSING
+            : MediaStatus.UNKNOWN;
+        await mediaRepository.save(media);
+        this.log(`Updating existing title: ${title}`);
+      } else {
+        const newMedia = new Media({
+          mediaType: MediaType.TV,
+          seasons: newSeasons,
+          tmdbId,
+          tvdbId,
+          mediaAddedAt,
+          serviceId: !is4k ? serviceId : undefined,
+          serviceId4k: is4k ? serviceId : undefined,
+          externalServiceId: !is4k ? externalServiceId : undefined,
+          externalServiceId4k: is4k ? externalServiceId : undefined,
+          externalServiceSlug: !is4k ? externalServiceSlug : undefined,
+          externalServiceSlug4k: is4k ? externalServiceSlug : undefined,
+          ratingKey: newSeasons.some(
+            (sn) =>
+              sn.status === MediaStatus.PARTIALLY_AVAILABLE ||
+              sn.status === MediaStatus.AVAILABLE
+          )
+            ? ratingKey
+            : undefined,
+          ratingKey4k:
+            this.enable4kShow &&
+            newSeasons.some(
+              (sn) =>
+                sn.status4k === MediaStatus.PARTIALLY_AVAILABLE ||
+                sn.status4k === MediaStatus.AVAILABLE
+            )
+              ? ratingKey
+              : undefined,
+          status: isAllStandardSeasons
+            ? MediaStatus.AVAILABLE
+            : newSeasons.some(
+                (season) =>
+                  season.status === MediaStatus.PARTIALLY_AVAILABLE ||
+                  season.status === MediaStatus.AVAILABLE
+              )
+            ? MediaStatus.PARTIALLY_AVAILABLE
+            : newSeasons.some(
+                (season) => season.status === MediaStatus.PROCESSING
+              )
+            ? MediaStatus.PROCESSING
+            : MediaStatus.UNKNOWN,
+          status4k:
+            isAll4kSeasons && this.enable4kShow
+              ? MediaStatus.AVAILABLE
+              : this.enable4kShow &&
+                newSeasons.some(
+                  (season) =>
+                    season.status4k === MediaStatus.PARTIALLY_AVAILABLE ||
+                    season.status4k === MediaStatus.AVAILABLE
+                )
+              ? MediaStatus.PARTIALLY_AVAILABLE
+              : newSeasons.some(
+                  (season) => season.status4k === MediaStatus.PROCESSING
+                )
+              ? MediaStatus.PROCESSING
+              : MediaStatus.UNKNOWN,
+        });
+        await mediaRepository.save(newMedia);
+        this.log(`Saved ${title}`);
+      }
+    });
+  }
+
+  /**
+   * Call startRun from child class whenever a run is starting to
+   * ensure required values are set
+   *
+   * Returns the session ID which is requried for the cleanup method
+   */
+  protected startRun(): string {
+    const settings = getSettings();
+    const sessionId = uuid();
+    this.sessionId = sessionId;
+
+    this.log('Scan starting', 'info', { sessionId });
+
+    this.enable4kMovie = settings.radarr.some((radarr) => radarr.is4k);
+    if (this.enable4kMovie) {
+      this.log(
+        'At least one 4K Radarr server was detected. 4K movie detection is now enabled',
+        'info'
+      );
+    }
+
+    this.enable4kShow = settings.sonarr.some((sonarr) => sonarr.is4k);
+    if (this.enable4kShow) {
+      this.log(
+        'At least one 4K Sonarr server was detected. 4K series detection is now enabled',
+        'info'
+      );
+    }
+
+    this.running = true;
+
+    return sessionId;
+  }
+
+  /**
+   * Call at end of run loop to perform cleanup
+   */
+  protected endRun(sessionId: string): void {
+    if (this.sessionId === sessionId) {
+      this.running = false;
+    }
+  }
+
+  public cancel(): void {
+    this.running = false;
+  }
+
+  protected async loop(
+    processFn: (item: T) => Promise<void>,
+    {
+      start = 0,
+      end = this.bundleSize,
+      sessionId,
+    }: {
+      start?: number;
+      end?: number;
+      sessionId?: string;
+    } = {}
+  ): Promise<void> {
+    const slicedItems = this.items.slice(start, end);
+
+    if (!this.running) {
+      throw new Error('Sync was aborted.');
+    }
+
+    if (this.sessionId !== sessionId) {
+      throw new Error('New session was started. Old session aborted.');
+    }
+
+    if (start < this.items.length) {
+      this.progress = start;
+      await this.processItems(processFn, slicedItems);
+
+      await new Promise<void>((resolve, reject) =>
+        setTimeout(() => {
+          this.loop(processFn, {
+            start: start + this.bundleSize,
+            end: end + this.bundleSize,
+            sessionId,
+          })
+            .then(() => resolve())
+            .catch((e) => reject(new Error(e.message)));
+        }, this.updateRate)
+      );
+    }
+  }
+
+  private async processItems(
+    processFn: (items: T) => Promise<void>,
+    items: T[]
+  ) {
+    await Promise.all(
+      items.map(async (item) => {
+        await processFn(item);
+      })
+    );
+  }
+
+  protected log(
+    message: string,
+    level: 'info' | 'error' | 'debug' | 'warn' = 'debug',
+    optional?: Record<string, unknown>
+  ): void {
+    logger[level](message, { label: this.scannerName, ...optional });
+  }
+}
+
+export default BaseScanner;

server/lib/scanners/plex/index.ts

@@ -0,0 +1,463 @@
+import { uniqWith } from 'lodash';
+import { getRepository } from 'typeorm';
+import animeList from '../../../api/animelist';
+import PlexAPI, { PlexLibraryItem, PlexMetadata } from '../../../api/plexapi';
+import { TmdbTvDetails } from '../../../api/themoviedb/interfaces';
+import { User } from '../../../entity/User';
+import { getSettings, Library } from '../../settings';
+import BaseScanner, {
+  MediaIds,
+  RunnableScanner,
+  StatusBase,
+  ProcessableSeason,
+} from '../baseScanner';
+
+const imdbRegex = new RegExp(/imdb:\/\/(tt[0-9]+)/);
+const tmdbRegex = new RegExp(/tmdb:\/\/([0-9]+)/);
+const tvdbRegex = new RegExp(/tvdb:\/\/([0-9]+)/);
+const tmdbShowRegex = new RegExp(/themoviedb:\/\/([0-9]+)/);
+const plexRegex = new RegExp(/plex:\/\//);
+// Hama agent uses ASS naming, see details here:
+// https://github.com/ZeroQI/Absolute-Series-Scanner/blob/master/README.md#forcing-the-movieseries-id
+const hamaTvdbRegex = new RegExp(/hama:\/\/tvdb[0-9]?-([0-9]+)/);
+const hamaAnidbRegex = new RegExp(/hama:\/\/anidb[0-9]?-([0-9]+)/);
+const HAMA_AGENT = 'com.plexapp.agents.hama';
+
+type SyncStatus = StatusBase & {
+  currentLibrary: Library;
+  libraries: Library[];
+};
+
+class PlexScanner
+  extends BaseScanner<PlexLibraryItem>
+  implements RunnableScanner<SyncStatus> {
+  private plexClient: PlexAPI;
+  private libraries: Library[];
+  private currentLibrary: Library;
+  private isRecentOnly = false;
+
+  public constructor(isRecentOnly = false) {
+    super('Plex Scan');
+    this.isRecentOnly = isRecentOnly;
+  }
+
+  public status(): SyncStatus {
+    return {
+      running: this.running,
+      progress: this.progress,
+      total: this.items.length,
+      currentLibrary: this.currentLibrary,
+      libraries: this.libraries,
+    };
+  }
+
+  public async run(): Promise<void> {
+    const settings = getSettings();
+    const sessionId = this.startRun();
+    try {
+      const userRepository = getRepository(User);
+      const admin = await userRepository.findOne({
+        select: ['id', 'plexToken'],
+        order: { id: 'ASC' },
+      });
+
+      if (!admin) {
+        return this.log('No admin configured. Plex scan skipped.', 'warn');
+      }
+
+      this.plexClient = new PlexAPI({ plexToken: admin.plexToken });
+
+      this.libraries = settings.plex.libraries.filter(
+        (library) => library.enabled
+      );
+
+      const hasHama = await this.hasHamaAgent();
+      if (hasHama) {
+        await animeList.sync();
+      }
+
+      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(this.processItem.bind(this), { sessionId });
+        }
+      } else {
+        for (const library of this.libraries) {
+          this.currentLibrary = library;
+          this.log(`Beginning to process library: ${library.name}`, 'info');
+          this.items = await this.plexClient.getLibraryContents(library.id);
+          await this.loop(this.processItem.bind(this), { sessionId });
+        }
+      }
+      this.log(
+        this.isRecentOnly
+          ? 'Recently Added Scan Complete'
+          : 'Full Scan Complete',
+        'info'
+      );
+    } catch (e) {
+      this.log('Scan interrupted', 'error', { errorMessage: e.message });
+    } finally {
+      this.endRun(sessionId);
+    }
+  }
+
+  private async processItem(plexitem: PlexLibraryItem) {
+    try {
+      if (plexitem.type === 'movie') {
+        await this.processPlexMovie(plexitem);
+      } else if (
+        plexitem.type === 'show' ||
+        plexitem.type === 'episode' ||
+        plexitem.type === 'season'
+      ) {
+        await this.processPlexShow(plexitem);
+      }
+    } catch (e) {
+      this.log('Failed to process Plex media', 'error', {
+        errorMessage: e.message,
+        title: plexitem.title,
+      });
+    }
+  }
+
+  private async processPlexMovie(plexitem: PlexLibraryItem) {
+    const mediaIds = await this.getMediaIds(plexitem);
+    const metadata = await this.plexClient.getMetadata(plexitem.ratingKey);
+
+    const has4k = metadata.Media.some(
+      (media) => media.videoResolution === '4k'
+    );
+
+    await this.processMovie(mediaIds.tmdbId, {
+      is4k: has4k && this.enable4kMovie,
+      mediaAddedAt: new Date(plexitem.addedAt * 1000),
+      ratingKey: plexitem.ratingKey,
+      title: plexitem.title,
+    });
+  }
+
+  private async processPlexMovieByTmdbId(
+    plexitem: PlexMetadata,
+    tmdbId: number
+  ) {
+    const has4k = plexitem.Media.some(
+      (media) => media.videoResolution === '4k'
+    );
+
+    await this.processMovie(tmdbId, {
+      is4k: has4k && this.enable4kMovie,
+      mediaAddedAt: new Date(plexitem.addedAt * 1000),
+      ratingKey: plexitem.ratingKey,
+      title: plexitem.title,
+    });
+  }
+
+  private async processPlexShow(plexitem: PlexLibraryItem) {
+    const ratingKey =
+      plexitem.grandparentRatingKey ??
+      plexitem.parentRatingKey ??
+      plexitem.ratingKey;
+    const metadata = await this.plexClient.getMetadata(ratingKey, {
+      includeChildren: true,
+    });
+
+    const mediaIds = await this.getMediaIds(metadata);
+
+    // If the media is from HAMA, and doesn't have a TVDb ID, we will treat it
+    // as a special HAMA movie
+    if (mediaIds.tmdbId && !mediaIds.tvdbId && mediaIds.isHama) {
+      this.processHamaMovie(metadata, mediaIds.tmdbId);
+      return;
+    }
+
+    // If the media is from HAMA and we have a TVDb ID, we will attempt
+    // to process any specials that may exist
+    if (mediaIds.tvdbId && mediaIds.isHama) {
+      await this.processHamaSpecials(metadata, mediaIds.tvdbId);
+    }
+
+    const tvShow = await this.tmdb.getTvShow({ tvId: mediaIds.tmdbId });
+
+    const seasons = tvShow.seasons;
+    const processableSeasons: ProcessableSeason[] = [];
+
+    const filteredSeasons = seasons.filter((sn) => sn.season_number !== 0);
+
+    for (const season of filteredSeasons) {
+      const matchedPlexSeason = metadata.Children?.Metadata.find(
+        (md) => Number(md.index) === season.season_number
+      );
+
+      if (matchedPlexSeason) {
+        // If we have a matched Plex season, get its children metadata so we can check details
+        const episodes = await this.plexClient.getChildrenMetadata(
+          matchedPlexSeason.ratingKey
+        );
+        // Total episodes that are in standard definition (not 4k)
+        const totalStandard = episodes.filter((episode) =>
+          !this.enable4kShow
+            ? true
+            : episode.Media.some((media) => media.videoResolution !== '4k')
+        ).length;
+
+        // Total episodes that are in 4k
+        const total4k = this.enable4kShow
+          ? episodes.filter((episode) =>
+              episode.Media.some((media) => media.videoResolution === '4k')
+            ).length
+          : 0;
+
+        processableSeasons.push({
+          seasonNumber: season.season_number,
+          episodes: totalStandard,
+          episodes4k: total4k,
+          totalEpisodes: season.episode_count,
+        });
+      } else {
+        processableSeasons.push({
+          seasonNumber: season.season_number,
+          episodes: 0,
+          episodes4k: 0,
+          totalEpisodes: season.episode_count,
+        });
+      }
+    }
+
+    if (mediaIds.tvdbId) {
+      await this.processShow(
+        mediaIds.tmdbId,
+        mediaIds.tvdbId ?? tvShow.external_ids.tvdb_id,
+        processableSeasons,
+        {
+          mediaAddedAt: new Date(metadata.addedAt * 1000),
+          ratingKey: ratingKey,
+          title: metadata.title,
+        }
+      );
+    }
+  }
+
+  private async getMediaIds(plexitem: PlexLibraryItem): Promise<MediaIds> {
+    const mediaIds: Partial<MediaIds> = {};
+    // Check if item is using new plex movie/tv agent
+    if (plexitem.guid.match(plexRegex)) {
+      const metadata = await this.plexClient.getMetadata(plexitem.ratingKey);
+
+      // If there is no Guid field at all, then we bail
+      if (!metadata.Guid) {
+        throw new Error(
+          'No Guid metadata for this title. Skipping. (Try refreshing the metadata in Plex for this media!)'
+        );
+      }
+
+      // Map all IDs to MediaId object
+      metadata.Guid.forEach((ref) => {
+        if (ref.id.match(imdbRegex)) {
+          mediaIds.imdbId = ref.id.match(imdbRegex)?.[1] ?? undefined;
+        } else if (ref.id.match(tmdbRegex)) {
+          const tmdbMatch = ref.id.match(tmdbRegex)?.[1];
+          mediaIds.tmdbId = Number(tmdbMatch);
+        } else if (ref.id.match(tvdbRegex)) {
+          const tvdbMatch = ref.id.match(tvdbRegex)?.[1];
+          mediaIds.tvdbId = Number(tvdbMatch);
+        }
+      });
+
+      // If we got an IMDb ID, but no TMDb ID, lookup the TMDb ID with the IMDb ID
+      if (mediaIds.imdbId && !mediaIds.tmdbId) {
+        const tmdbMovie = await this.tmdb.getMovieByImdbId({
+          imdbId: mediaIds.imdbId,
+        });
+        mediaIds.tmdbId = tmdbMovie.id;
+      }
+      // Check if the agent is IMDb
+    } else if (plexitem.guid.match(imdbRegex)) {
+      const imdbMatch = plexitem.guid.match(imdbRegex);
+      if (imdbMatch) {
+        mediaIds.imdbId = imdbMatch[1];
+        const tmdbMovie = await this.tmdb.getMovieByImdbId({
+          imdbId: mediaIds.imdbId,
+        });
+        mediaIds.tmdbId = tmdbMovie.id;
+      }
+      // Check if the agent is TMDb
+    } else if (plexitem.guid.match(tmdbRegex)) {
+      const tmdbMatch = plexitem.guid.match(tmdbRegex);
+      if (tmdbMatch) {
+        mediaIds.tmdbId = Number(tmdbMatch[1]);
+      }
+      // Check if the agent is TVDb
+    } else if (plexitem.guid.match(tvdbRegex)) {
+      const matchedtvdb = plexitem.guid.match(tvdbRegex);
+
+      // If we can find a tvdb Id, use it to get the full tmdb show details
+      if (matchedtvdb) {
+        const show = await this.tmdb.getShowByTvdbId({
+          tvdbId: Number(matchedtvdb[1]),
+        });
+
+        mediaIds.tvdbId = Number(matchedtvdb[1]);
+        mediaIds.tmdbId = show.id;
+      }
+      // Check if the agent (for shows) is TMDb
+    } else if (plexitem.guid.match(tmdbShowRegex)) {
+      const matchedtmdb = plexitem.guid.match(tmdbShowRegex);
+      if (matchedtmdb) {
+        mediaIds.tmdbId = Number(matchedtmdb[1]);
+      }
+      // Check for HAMA (with TVDb guid)
+    } else if (plexitem.guid.match(hamaTvdbRegex)) {
+      const matchedtvdb = plexitem.guid.match(hamaTvdbRegex);
+
+      if (matchedtvdb) {
+        const show = await this.tmdb.getShowByTvdbId({
+          tvdbId: Number(matchedtvdb[1]),
+        });
+
+        mediaIds.tvdbId = Number(matchedtvdb[1]);
+        mediaIds.tmdbId = show.id;
+        // Set isHama to true, so we can know to add special processing to this item
+        mediaIds.isHama = true;
+      }
+      // Check for HAMA (with anidb guid)
+    } else if (plexitem.guid.match(hamaAnidbRegex)) {
+      const matchedhama = plexitem.guid.match(hamaAnidbRegex);
+
+      if (!animeList.isLoaded()) {
+        this.log(
+          `Hama ID ${plexitem.guid} detected, but library agent is not set to Hama`,
+          'warn',
+          { title: plexitem.title }
+        );
+      } else if (matchedhama) {
+        const anidbId = Number(matchedhama[1]);
+        const result = animeList.getFromAnidbId(anidbId);
+        let tvShow: TmdbTvDetails | null = null;
+
+        // Set isHama to true, so we can know to add special processing to this item
+        mediaIds.isHama = true;
+
+        // First try to lookup the show by TVDb ID
+        if (result?.tvdbId) {
+          const extResponse = await this.tmdb.getByExternalId({
+            externalId: result.tvdbId,
+            type: 'tvdb',
+          });
+          if (extResponse.tv_results[0]) {
+            tvShow = await this.tmdb.getTvShow({
+              tvId: extResponse.tv_results[0].id,
+            });
+            mediaIds.tvdbId = result.tvdbId;
+            mediaIds.tmdbId = tvShow.id;
+          } else {
+            this.log(
+              `Missing TVDB ${result.tvdbId} entry in TMDB for AniDB ${anidbId}`
+            );
+          }
+        }
+
+        if (!tvShow) {
+          // if lookup of tvshow above failed, then try movie with tmdbid/imdbid
+          // note - some tv shows have imdbid set too, that's why this need to go second
+          if (result?.tmdbId) {
+            mediaIds.tmdbId = result.tmdbId;
+            mediaIds.imdbId = result?.imdbId;
+          } else if (result?.imdbId) {
+            const tmdbMovie = await this.tmdb.getMovieByImdbId({
+              imdbId: result.imdbId,
+            });
+            mediaIds.tmdbId = tmdbMovie.id;
+            mediaIds.imdbId = result.imdbId;
+          }
+        }
+      }
+    }
+
+    if (!mediaIds.tmdbId) {
+      throw new Error('Unable to find TMDb ID');
+    }
+
+    // We check above if we have the TMDb ID, so we can safely assert the type below
+    return mediaIds as MediaIds;
+  }
+
+  // movies with hama agent actually are tv shows with at least one episode in it
+  // try to get first episode of any season - cannot hardcode season or episode number
+  // because sometimes user can have it in other season/ep than s01e01
+  private async processHamaMovie(metadata: PlexMetadata, tmdbId: number) {
+    const season = metadata.Children?.Metadata[0];
+    if (season) {
+      const episodes = await this.plexClient.getChildrenMetadata(
+        season.ratingKey
+      );
+      if (episodes) {
+        await this.processPlexMovieByTmdbId(episodes[0], tmdbId);
+      }
+    }
+  }
+
+  // this adds all movie episodes from specials season for Hama agent
+  private async processHamaSpecials(metadata: PlexMetadata, tvdbId: number) {
+    const specials = metadata.Children?.Metadata.find(
+      (md) => Number(md.index) === 0
+    );
+    if (specials) {
+      const episodes = await this.plexClient.getChildrenMetadata(
+        specials.ratingKey
+      );
+      if (episodes) {
+        for (const episode of episodes) {
+          const special = animeList.getSpecialEpisode(tvdbId, episode.index);
+          if (special) {
+            if (special.tmdbId) {
+              await this.processPlexMovieByTmdbId(episode, special.tmdbId);
+            } else if (special.imdbId) {
+              const tmdbMovie = await this.tmdb.getMovieByImdbId({
+                imdbId: special.imdbId,
+              });
+              await this.processPlexMovieByTmdbId(episode, tmdbMovie.id);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // checks if any of this.libraries has Hama agent set in Plex
+  private async hasHamaAgent() {
+    const plexLibraries = await this.plexClient.getLibraries();
+    return this.libraries.some((library) =>
+      plexLibraries.some(
+        (plexLibrary) =>
+          plexLibrary.agent === HAMA_AGENT && library.id === plexLibrary.key
+      )
+    );
+  }
+}
+
+export const plexFullScanner = new PlexScanner();
+export const plexRecentScanner = new PlexScanner(true);

server/lib/scanners/radarr/index.ts

@@ -0,0 +1,94 @@
+import { uniqWith } from 'lodash';
+import RadarrAPI, { RadarrMovie } from '../../../api/radarr';
+import { getSettings, RadarrSettings } from '../../settings';
+import BaseScanner, { RunnableScanner, StatusBase } from '../baseScanner';
+
+type SyncStatus = StatusBase & {
+  currentServer: RadarrSettings;
+  servers: RadarrSettings[];
+};
+
+class RadarrScanner
+  extends BaseScanner<RadarrMovie>
+  implements RunnableScanner<SyncStatus> {
+  private servers: RadarrSettings[];
+  private currentServer: RadarrSettings;
+  private radarrApi: RadarrAPI;
+
+  constructor() {
+    super('Radarr Scan', { bundleSize: 50 });
+  }
+
+  public status(): SyncStatus {
+    return {
+      running: this.running,
+      progress: this.progress,
+      total: this.items.length,
+      currentServer: this.currentServer,
+      servers: this.servers,
+    };
+  }
+
+  public async run(): Promise<void> {
+    const settings = getSettings();
+    const sessionId = this.startRun();
+
+    try {
+      this.servers = uniqWith(settings.radarr, (radarrA, radarrB) => {
+        return (
+          radarrA.hostname === radarrB.hostname &&
+          radarrA.port === radarrB.port &&
+          radarrA.baseUrl === radarrB.baseUrl
+        );
+      });
+
+      for (const server of this.servers) {
+        this.currentServer = server;
+        if (server.syncEnabled) {
+          this.log(
+            `Beginning to process Radarr server: ${server.name}`,
+            'info'
+          );
+
+          this.radarrApi = new RadarrAPI({
+            apiKey: server.apiKey,
+            url: RadarrAPI.buildRadarrUrl(server, '/api/v3'),
+          });
+
+          this.items = await this.radarrApi.getMovies();
+
+          await this.loop(this.processRadarrMovie.bind(this), { sessionId });
+        } else {
+          this.log(`Sync not enabled. Skipping Radarr server: ${server.name}`);
+        }
+      }
+
+      this.log('Radarr scan complete', 'info');
+    } catch (e) {
+      this.log('Scan interrupted', 'error', { errorMessage: e.message });
+    } finally {
+      this.endRun(sessionId);
+    }
+  }
+
+  private async processRadarrMovie(radarrMovie: RadarrMovie): Promise<void> {
+    try {
+      const server4k = this.enable4kMovie && this.currentServer.is4k;
+      await this.processMovie(radarrMovie.tmdbId, {
+        is4k: server4k,
+        serviceId: this.currentServer.id,
+        externalServiceId: radarrMovie.id,
+        externalServiceSlug: radarrMovie.titleSlug,
+        title: radarrMovie.title,
+        processing: !radarrMovie.downloaded,
+      });
+    } catch (e) {
+      this.log('Failed to process Radarr media', 'error', {
+        errorMessage: e.message,
+        title: radarrMovie.title,
+      });
+    }
+  }
+}
+
+export const radarrScanner = new RadarrScanner();

server/lib/scanners/sonarr/index.ts

@@ -0,0 +1,134 @@
+import { uniqWith } from 'lodash';
+import { getRepository } from 'typeorm';
+import SonarrAPI, { SonarrSeries } from '../../../api/sonarr';
+import Media from '../../../entity/Media';
+import { getSettings, SonarrSettings } from '../../settings';
+import BaseScanner, {
+  ProcessableSeason,
+  RunnableScanner,
+  StatusBase,
+} from '../baseScanner';
+
+type SyncStatus = StatusBase & {
+  currentServer: SonarrSettings;
+  servers: SonarrSettings[];
+};
+
+class SonarrScanner
+  extends BaseScanner<SonarrSeries>
+  implements RunnableScanner<SyncStatus> {
+  private servers: SonarrSettings[];
+  private currentServer: SonarrSettings;
+  private sonarrApi: SonarrAPI;
+
+  constructor() {
+    super('Sonarr Scan', { bundleSize: 50 });
+  }
+
+  public status(): SyncStatus {
+    return {
+      running: this.running,
+      progress: this.progress,
+      total: this.items.length,
+      currentServer: this.currentServer,
+      servers: this.servers,
+    };
+  }
+
+  public async run(): Promise<void> {
+    const settings = getSettings();
+    const sessionId = this.startRun();
+
+    try {
+      this.servers = uniqWith(settings.sonarr, (sonarrA, sonarrB) => {
+        return (
+          sonarrA.hostname === sonarrB.hostname &&
+          sonarrA.port === sonarrB.port &&
+          sonarrA.baseUrl === sonarrB.baseUrl
+        );
+      });
+
+      for (const server of this.servers) {
+        this.currentServer = server;
+        if (server.syncEnabled) {
+          this.log(
+            `Beginning to process Sonarr server: ${server.name}`,
+            'info'
+          );
+
+          this.sonarrApi = new SonarrAPI({
+            apiKey: server.apiKey,
+            url: SonarrAPI.buildSonarrUrl(server, '/api/v3'),
+          });
+
+          this.items = await this.sonarrApi.getSeries();
+
+          await this.loop(this.processSonarrSeries.bind(this), { sessionId });
+        } else {
+          this.log(`Sync not enabled. Skipping Sonarr server: ${server.name}`);
+        }
+      }
+
+      this.log('Sonarr scan complete', 'info');
+    } catch (e) {
+      this.log('Scan interrupted', 'error', { errorMessage: e.message });
+    } finally {
+      this.endRun(sessionId);
+    }
+  }
+
+  private async processSonarrSeries(sonarrSeries: SonarrSeries) {
+    try {
+      const mediaRepository = getRepository(Media);
+      const server4k = this.enable4kShow && this.currentServer.is4k;
+      const processableSeasons: ProcessableSeason[] = [];
+      let tmdbId: number;
+
+      const media = await mediaRepository.findOne({
+        where: { tvdbId: sonarrSeries.tvdbId },
+      });
+
+      if (!media || !media.tmdbId) {
+        const tvShow = await this.tmdb.getShowByTvdbId({
+          tvdbId: sonarrSeries.tvdbId,
+        });
+
+        tmdbId = tvShow.id;
+      } else {
+        tmdbId = media.tmdbId;
+      }
+
+      const filteredSeasons = sonarrSeries.seasons.filter(
+        (sn) => sn.seasonNumber !== 0
+      );
+
+      for (const season of filteredSeasons) {
+        const totalAvailableEpisodes = season.statistics?.episodeFileCount ?? 0;
+
+        processableSeasons.push({
+          seasonNumber: season.seasonNumber,
+          episodes: !server4k ? totalAvailableEpisodes : 0,
+          episodes4k: server4k ? totalAvailableEpisodes : 0,
+          totalEpisodes: season.statistics?.totalEpisodeCount ?? 0,
+          processing: season.monitored && totalAvailableEpisodes === 0,
+          is4kOverride: server4k,
+        });
+      }
+
+      await this.processShow(tmdbId, sonarrSeries.tvdbId, processableSeasons, {
+        serviceId: this.currentServer.id,
+        externalServiceId: sonarrSeries.id,
+        externalServiceSlug: sonarrSeries.titleSlug,
+        title: sonarrSeries.title,
+        is4k: server4k,
+      });
+    } catch (e) {
+      this.log('Failed to process Sonarr media', 'error', {
+        errorMessage: e.message,
+        title: sonarrSeries.title,
+      });
+    }
+  }
+}
+
+export const sonarrScanner = new SonarrScanner();

server/lib/settings.ts

@@ -95,6 +95,8 @@ export interface NotificationAgentConfig {
 }
 export interface NotificationAgentDiscord extends NotificationAgentConfig {
   options: {
+    botUsername?: string;
+    botAvatarUrl?: string;
     webhookUrl: string;
   };
 }
@@ -120,6 +122,7 @@ export interface NotificationAgentEmail extends NotificationAgentConfig {
 
 export interface NotificationAgentTelegram extends NotificationAgentConfig {
   options: {
+    botUsername?: string;
     botAPI: string;
     chatId: string;
     sendSilently: boolean;
@@ -160,7 +163,6 @@ interface NotificationAgents {
 
 interface NotificationSettings {
   enabled: boolean;
-  autoapprovalEnabled: boolean;
   agents: NotificationAgents;
 }
 
@@ -210,7 +212,6 @@ class Settings {
       },
       notifications: {
         enabled: true,
-        autoapprovalEnabled: false,
         agents: {
           email: {
             enabled: false,
@@ -228,6 +229,8 @@ class Settings {
             enabled: false,
             types: 0,
             options: {
+              botUsername: '',
+              botAvatarUrl: '',
               webhookUrl: '',
             },
           },
@@ -242,6 +245,7 @@ class Settings {
             enabled: false,
             types: 0,
             options: {
+              botUsername: '',
               botAPI: '',
               chatId: '',
               sendSilently: false,

server/migration/1614334195680-AddTelegramSettingsToUserSettings.ts

@@ -0,0 +1,32 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+export class AddTelegramSettingsToUserSettings1614334195680
+  implements MigrationInterface {
+  name = 'AddTelegramSettingsToUserSettings1614334195680';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(
+      `CREATE TABLE "temporary_user_settings" ("id" integer PRIMARY KEY AUTOINCREMENT NOT NULL, "enableNotifications" boolean NOT NULL DEFAULT (1), "discordId" varchar, "userId" integer, "region" varchar, "originalLanguage" varchar, "telegramChatId" varchar, "telegramSendSilently" boolean, CONSTRAINT "UQ_986a2b6d3c05eb4091bb8066f78" UNIQUE ("userId"), CONSTRAINT "FK_986a2b6d3c05eb4091bb8066f78" FOREIGN KEY ("userId") REFERENCES "user" ("id") ON DELETE CASCADE ON UPDATE NO ACTION)`
+    );
+    await queryRunner.query(
+      `INSERT INTO "temporary_user_settings"("id", "enableNotifications", "discordId", "userId", "region", "originalLanguage") SELECT "id", "enableNotifications", "discordId", "userId", "region", "originalLanguage" FROM "user_settings"`
+    );
+    await queryRunner.query(`DROP TABLE "user_settings"`);
+    await queryRunner.query(
+      `ALTER TABLE "temporary_user_settings" RENAME TO "user_settings"`
+    );
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(
+      `ALTER TABLE "user_settings" RENAME TO "temporary_user_settings"`
+    );
+    await queryRunner.query(
+      `CREATE TABLE "user_settings" ("id" integer PRIMARY KEY AUTOINCREMENT NOT NULL, "enableNotifications" boolean NOT NULL DEFAULT (1), "discordId" varchar, "userId" integer, "region" varchar, "originalLanguage" varchar, CONSTRAINT "UQ_986a2b6d3c05eb4091bb8066f78" UNIQUE ("userId"), CONSTRAINT "FK_986a2b6d3c05eb4091bb8066f78" FOREIGN KEY ("userId") REFERENCES "user" ("id") ON DELETE CASCADE ON UPDATE NO ACTION)`
+    );
+    await queryRunner.query(
+      `INSERT INTO "user_settings"("id", "enableNotifications", "discordId", "userId", "region", "originalLanguage") SELECT "id", "enableNotifications", "discordId", "userId", "region", "originalLanguage" FROM "temporary_user_settings"`
+    );
+    await queryRunner.query(`DROP TABLE "temporary_user_settings"`);
+  }
+}

server/models/Movie.ts

@@ -1,6 +1,7 @@
 import type {
   TmdbMovieDetails,
   TmdbMovieReleaseResult,
+  TmdbProductionCompany,
 } from '../api/themoviedb/interfaces';
 import {
   ProductionCompany,
@@ -79,6 +80,18 @@ export interface MovieDetails {
   plexUrl?: string;
 }
 
+export const mapProductionCompany = (
+  company: TmdbProductionCompany
+): ProductionCompany => ({
+  id: company.id,
+  name: company.name,
+  originCountry: company.origin_country,
+  description: company.description,
+  headquarters: company.headquarters,
+  homepage: company.homepage,
+  logoPath: company.logo_path,
+});
+
 export const mapMovieDetails = (
   movie: TmdbMovieDetails,
   media?: Media
@@ -91,12 +104,7 @@ export const mapMovieDetails = (
   originalLanguage: movie.original_language,
   originalTitle: movie.original_title,
   popularity: movie.popularity,
-  productionCompanies: movie.production_companies.map((company) => ({
-    id: company.id,
-    logoPath: company.logo_path,
-    originCountry: company.origin_country,
-    name: company.name,
-  })),
+  productionCompanies: movie.production_companies.map(mapProductionCompany),
   productionCountries: movie.production_countries,
   releaseDate: movie.release_date,
   releases: movie.release_dates,

server/models/Tv.ts

@@ -9,6 +9,7 @@ import {
   mapExternalIds,
   Keyword,
   mapVideos,
+  TvNetwork,
 } from './common';
 import type {
   TmdbTvEpisodeResult,
@@ -16,6 +17,7 @@ import type {
   TmdbTvDetails,
   TmdbSeasonWithEpisodes,
   TmdbTvRatingResult,
+  TmdbNetwork,
 } from '../api/themoviedb/interfaces';
 import type Media from '../entity/Media';
 import { Video } from './Movie';
@@ -77,7 +79,7 @@ export interface TvDetails {
   lastEpisodeToAir?: Episode;
   name: string;
   nextEpisodeToAir?: Episode;
-  networks: ProductionCompany[];
+  networks: TvNetwork[];
   numberOfEpisodes: number;
   numberOfSeasons: number;
   originCountry: string[];
@@ -139,6 +141,15 @@ export const mapSeasonWithEpisodes = (
   posterPath: season.poster_path,
 });
 
+export const mapNetwork = (network: TmdbNetwork): TvNetwork => ({
+  id: network.id,
+  name: network.name,
+  originCountry: network.origin_country,
+  headquarters: network.headquarters,
+  homepage: network.homepage,
+  logoPath: network.logo_path,
+});
+
 export const mapTvDetails = (
   show: TmdbTvDetails,
   media?: Media
@@ -157,12 +168,7 @@ export const mapTvDetails = (
   languages: show.languages,
   lastAirDate: show.last_air_date,
   name: show.name,
-  networks: show.networks.map((network) => ({
-    id: network.id,
-    name: network.name,
-    originCountry: network.origin_country,
-    logoPath: network.logo_path,
-  })),
+  networks: show.networks.map(mapNetwork),
   numberOfEpisodes: show.number_of_episodes,
   numberOfSeasons: show.number_of_seasons,
   originCountry: show.origin_country,

server/models/common.ts

@@ -14,6 +14,18 @@ export interface ProductionCompany {
   logoPath?: string;
   originCountry: string;
   name: string;
+  description?: string;
+  headquarters?: string;
+  homepage?: string;
+}
+
+export interface TvNetwork {
+  id: number;
+  logoPath?: string;
+  originCountry?: string;
+  name: string;
+  headquarters?: string;
+  homepage?: string;
 }
 
 export interface Keyword {

server/routes/discover.ts

@@ -6,6 +6,8 @@ import { isMovie, isPerson } from '../utils/typeHelpers';
 import { MediaType } from '../constants/media';
 import { getSettings } from '../lib/settings';
 import { User } from '../entity/User';
+import { mapProductionCompany } from '../models/Movie';
+import { mapNetwork } from '../models/Tv';
 
 const createTmdbWithRegionLanaguage = (user?: User): TheMovieDb => {
   const settings = getSettings();
@@ -38,6 +40,8 @@ discoverRoutes.get('/movies', async (req, res) => {
   const data = await tmdb.getDiscoverMovies({
     page: Number(req.query.page),
     language: req.query.language as string,
+    genre: req.query.genre ? Number(req.query.genre) : undefined,
+    studio: req.query.studio ? Number(req.query.studio) : undefined,
   });
 
   const media = await Media.getRelatedMedia(
@@ -59,6 +63,133 @@ discoverRoutes.get('/movies', async (req, res) => {
   });
 });
 
+discoverRoutes.get<{ language: string }>(
+  '/movies/language/:language',
+  async (req, res, next) => {
+    const tmdb = createTmdbWithRegionLanaguage(req.user);
+
+    const languages = await tmdb.getLanguages();
+
+    const language = languages.find(
+      (lang) => lang.iso_639_1 === req.params.language
+    );
+
+    if (!language) {
+      return next({ status: 404, message: 'Unable to retrieve language' });
+    }
+
+    const data = await tmdb.getDiscoverMovies({
+      page: Number(req.query.page),
+      language: req.query.language as string,
+      originalLanguage: req.params.language,
+    });
+
+    const media = await Media.getRelatedMedia(
+      data.results.map((result) => result.id)
+    );
+
+    return res.status(200).json({
+      page: data.page,
+      totalPages: data.total_pages,
+      totalResults: data.total_results,
+      language,
+      results: data.results.map((result) =>
+        mapMovieResult(
+          result,
+          media.find(
+            (req) =>
+              req.tmdbId === result.id && req.mediaType === MediaType.MOVIE
+          )
+        )
+      ),
+    });
+  }
+);
+
+discoverRoutes.get<{ genreId: string }>(
+  '/movies/genre/:genreId',
+  async (req, res, next) => {
+    const tmdb = createTmdbWithRegionLanaguage(req.user);
+
+    const genres = await tmdb.getMovieGenres({
+      language: req.query.language as string,
+    });
+
+    const genre = genres.find(
+      (genre) => genre.id === Number(req.params.genreId)
+    );
+
+    if (!genre) {
+      return next({ status: 404, message: 'Unable to retrieve genre' });
+    }
+
+    const data = await tmdb.getDiscoverMovies({
+      page: Number(req.query.page),
+      language: req.query.language as string,
+      genre: Number(req.params.genreId),
+    });
+
+    const media = await Media.getRelatedMedia(
+      data.results.map((result) => result.id)
+    );
+
+    return res.status(200).json({
+      page: data.page,
+      totalPages: data.total_pages,
+      totalResults: data.total_results,
+      genre,
+      results: data.results.map((result) =>
+        mapMovieResult(
+          result,
+          media.find(
+            (req) =>
+              req.tmdbId === result.id && req.mediaType === MediaType.MOVIE
+          )
+        )
+      ),
+    });
+  }
+);
+
+discoverRoutes.get<{ studioId: string }>(
+  '/movies/studio/:studioId',
+  async (req, res, next) => {
+    const tmdb = new TheMovieDb();
+
+    try {
+      const studio = await tmdb.getStudio(Number(req.params.studioId));
+
+      const data = await tmdb.getDiscoverMovies({
+        page: Number(req.query.page),
+        language: req.query.language as string,
+        studio: Number(req.params.studioId),
+      });
+
+      const media = await Media.getRelatedMedia(
+        data.results.map((result) => result.id)
+      );
+
+      return res.status(200).json({
+        page: data.page,
+        totalPages: data.total_pages,
+        totalResults: data.total_results,
+        studio: mapProductionCompany(studio),
+        results: data.results.map((result) =>
+          mapMovieResult(
+            result,
+            media.find(
+              (med) =>
+                med.tmdbId === result.id && med.mediaType === MediaType.MOVIE
+            )
+          )
+        ),
+      });
+    } catch (e) {
+      return next({ status: 404, message: 'Unable to retrieve studio' });
+    }
+  }
+);
+
 discoverRoutes.get('/movies/upcoming', async (req, res) => {
   const tmdb = createTmdbWithRegionLanaguage(req.user);
 
@@ -99,6 +230,8 @@ discoverRoutes.get('/tv', async (req, res) => {
   const data = await tmdb.getDiscoverTv({
     page: Number(req.query.page),
     language: req.query.language as string,
+    genre: req.query.genre ? Number(req.query.genre) : undefined,
+    network: req.query.network ? Number(req.query.network) : undefined,
   });
 
   const media = await Media.getRelatedMedia(
@@ -120,6 +253,131 @@ discoverRoutes.get('/tv', async (req, res) => {
   });
 });
 
+discoverRoutes.get<{ language: string }>(
+  '/tv/language/:language',
+  async (req, res, next) => {
+    const tmdb = createTmdbWithRegionLanaguage(req.user);
+
+    const languages = await tmdb.getLanguages();
+
+    const language = languages.find(
+      (lang) => lang.iso_639_1 === req.params.language
+    );
+
+    if (!language) {
+      return next({ status: 404, message: 'Unable to retrieve language' });
+    }
+
+    const data = await tmdb.getDiscoverTv({
+      page: Number(req.query.page),
+      language: req.query.language as string,
+      originalLanguage: req.params.language,
+    });
+
+    const media = await Media.getRelatedMedia(
+      data.results.map((result) => result.id)
+    );
+
+    return res.status(200).json({
+      page: data.page,
+      totalPages: data.total_pages,
+      totalResults: data.total_results,
+      language,
+      results: data.results.map((result) =>
+        mapTvResult(
+          result,
+          media.find(
+            (med) => med.tmdbId === result.id && med.mediaType === MediaType.TV
+          )
+        )
+      ),
+    });
+  }
+);
+
+discoverRoutes.get<{ genreId: string }>(
+  '/tv/genre/:genreId',
+  async (req, res, next) => {
+    const tmdb = createTmdbWithRegionLanaguage(req.user);
+
+    const genres = await tmdb.getTvGenres({
+      language: req.query.language as string,
+    });
+
+    const genre = genres.find(
+      (genre) => genre.id === Number(req.params.genreId)
+    );
+
+    if (!genre) {
+      return next({ status: 404, message: 'Unable to retrieve genre' });
+    }
+
+    const data = await tmdb.getDiscoverTv({
+      page: Number(req.query.page),
+      language: req.query.language as string,
+      genre: Number(req.params.genreId),
+    });
+
+    const media = await Media.getRelatedMedia(
+      data.results.map((result) => result.id)
+    );
+
+    return res.status(200).json({
+      page: data.page,
+      totalPages: data.total_pages,
+      totalResults: data.total_results,
+      genre,
+      results: data.results.map((result) =>
+        mapTvResult(
+          result,
+          media.find(
+            (med) => med.tmdbId === result.id && med.mediaType === MediaType.TV
+          )
+        )
+      ),
+    });
+  }
+);
+
+discoverRoutes.get<{ networkId: string }>(
+  '/tv/network/:networkId',
+  async (req, res, next) => {
+    const tmdb = new TheMovieDb();
+
+    try {
+      const network = await tmdb.getNetwork(Number(req.params.networkId));
+
+      const data = await tmdb.getDiscoverTv({
+        page: Number(req.query.page),
+        language: req.query.language as string,
+        network: Number(req.params.networkId),
+      });
+
+      const media = await Media.getRelatedMedia(
+        data.results.map((result) => result.id)
+      );
+
+      return res.status(200).json({
+        page: data.page,
+        totalPages: data.total_pages,
+        totalResults: data.total_results,
+        network: mapNetwork(network),
+        results: data.results.map((result) =>
+          mapTvResult(
+            result,
+            media.find(
+              (med) =>
+                med.tmdbId === result.id && med.mediaType === MediaType.TV
+            )
+          )
+        ),
+      });
+    } catch (e) {
+      return next({ status: 404, message: 'Unable to retrieve network' });
+    }
+  }
+);
+
 discoverRoutes.get('/tv/upcoming', async (req, res) => {
   const tmdb = createTmdbWithRegionLanaguage(req.user);
 
@@ -175,15 +433,18 @@ discoverRoutes.get('/trending', async (req, res) => {
         ? mapMovieResult(
             result,
             media.find(
-              (req) =>
-                req.tmdbId === result.id && req.mediaType === MediaType.MOVIE
+              (med) =>
+                med.tmdbId === result.id && med.mediaType === MediaType.MOVIE
             )
           )
         : isPerson(result)
         ? mapPersonResult(result)
         : mapTvResult(
             result,
-            media.find((req) => req.tmdbId === result.id && MediaType.TV)
+            media.find(
+              (med) =>
+                med.tmdbId === result.id && med.mediaType === MediaType.TV
+            )
           )
     ),
   });
@@ -212,8 +473,8 @@ discoverRoutes.get<{ keywordId: string }>(
         mapMovieResult(
           result,
           media.find(
-            (req) =>
-              req.tmdbId === result.id && req.mediaType === MediaType.MOVIE
+            (med) =>
+              med.tmdbId === result.id && med.mediaType === MediaType.MOVIE
           )
         )
       ),

server/routes/index.ts

@@ -17,6 +17,8 @@ import { getAppVersion, getCommitTag } from '../utils/appVersion';
 import serviceRoutes from './service';
 import { appDataStatus, appDataPath } from '../utils/appDataVolume';
 import TheMovieDb from '../api/themoviedb';
+import { mapProductionCompany } from '../models/Movie';
+import { mapNetwork } from '../models/Tv';
 
 const router = Router();
 
@@ -74,6 +76,38 @@ router.get('/languages', isAuthenticated(), async (req, res) => {
   return res.status(200).json(languages);
 });
 
+router.get<{ id: string }>('/studio/:id', async (req, res) => {
+  const tmdb = new TheMovieDb();
+
+  const studio = await tmdb.getStudio(Number(req.params.id));
+
+  return res.status(200).json(mapProductionCompany(studio));
+});
+
+router.get<{ id: string }>('/network/:id', async (req, res) => {
+  const tmdb = new TheMovieDb();
+
+  const network = await tmdb.getNetwork(Number(req.params.id));
+
+  return res.status(200).json(mapNetwork(network));
+});
+
+router.get('/genres/movie', isAuthenticated(), async (req, res) => {
+  const tmdb = new TheMovieDb();
+
+  const genres = await tmdb.getMovieGenres();
+
+  return res.status(200).json(genres);
+});
+
+router.get('/genres/tv', isAuthenticated(), async (req, res) => {
+  const tmdb = new TheMovieDb();
+
+  const genres = await tmdb.getTvGenres();
+
+  return res.status(200).json(genres);
+});
+
 router.get('/', (_req, res) => {
   return res.status(200).json({
     api: 'Overseerr API',

server/routes/request.ts

@@ -211,32 +211,34 @@ requestRoutes.post(
           media,
           requestedBy: requestUser,
           // If the user is an admin or has the "auto approve" permission, automatically approve the request
-          status:
-            req.user?.hasPermission(
+          status: req.user?.hasPermission(
+            [
               req.body.is4k
                 ? Permission.AUTO_APPROVE_4K
-                : Permission.AUTO_APPROVE
-            ) ||
-            req.user?.hasPermission(
+                : Permission.AUTO_APPROVE,
               req.body.is4k
                 ? Permission.AUTO_APPROVE_4K_MOVIE
-                : Permission.AUTO_APPROVE_MOVIE
-            )
-              ? MediaRequestStatus.APPROVED
-              : MediaRequestStatus.PENDING,
-          modifiedBy:
-            req.user?.hasPermission(
+                : Permission.AUTO_APPROVE_MOVIE,
+              Permission.MANAGE_REQUESTS,
+            ],
+            { type: 'or' }
+          )
+            ? MediaRequestStatus.APPROVED
+            : MediaRequestStatus.PENDING,
+          modifiedBy: req.user?.hasPermission(
+            [
               req.body.is4k
                 ? Permission.AUTO_APPROVE_4K
-                : Permission.AUTO_APPROVE
-            ) ||
-            req.user?.hasPermission(
+                : Permission.AUTO_APPROVE,
               req.body.is4k
                 ? Permission.AUTO_APPROVE_4K_MOVIE
-                : Permission.AUTO_APPROVE_MOVIE
-            )
-              ? req.user
-              : undefined,
+                : Permission.AUTO_APPROVE_MOVIE,
+              Permission.MANAGE_REQUESTS,
+            ],
+            { type: 'or' }
+          )
+            ? req.user
+            : undefined,
           is4k: req.body.is4k,
           serverId: req.body.serverId,
           profileId: req.body.profileId,
@@ -286,32 +288,34 @@ requestRoutes.post(
           media,
           requestedBy: requestUser,
           // If the user is an admin or has the "auto approve" permission, automatically approve the request
-          status:
-            req.user?.hasPermission(
+          status: req.user?.hasPermission(
+            [
               req.body.is4k
                 ? Permission.AUTO_APPROVE_4K
-                : Permission.AUTO_APPROVE
-            ) ||
-            req.user?.hasPermission(
+                : Permission.AUTO_APPROVE,
               req.body.is4k
                 ? Permission.AUTO_APPROVE_4K_TV
-                : Permission.AUTO_APPROVE_TV
-            )
-              ? MediaRequestStatus.APPROVED
-              : MediaRequestStatus.PENDING,
-          modifiedBy:
-            req.user?.hasPermission(
+                : Permission.AUTO_APPROVE_TV,
+              Permission.MANAGE_REQUESTS,
+            ],
+            { type: 'or' }
+          )
+            ? MediaRequestStatus.APPROVED
+            : MediaRequestStatus.PENDING,
+          modifiedBy: req.user?.hasPermission(
+            [
               req.body.is4k
                 ? Permission.AUTO_APPROVE_4K
-                : Permission.AUTO_APPROVE
-            ) ||
-            req.user?.hasPermission(
+                : Permission.AUTO_APPROVE,
               req.body.is4k
                 ? Permission.AUTO_APPROVE_4K_TV
-                : Permission.AUTO_APPROVE_TV
-            )
-              ? req.user
-              : undefined,
+                : Permission.AUTO_APPROVE_TV,
+              Permission.MANAGE_REQUESTS,
+            ],
+            { type: 'or' }
+          )
+            ? req.user
+            : undefined,
           is4k: req.body.is4k,
           serverId: req.body.serverId,
           profileId: req.body.profileId,
@@ -321,19 +325,20 @@ requestRoutes.post(
             (sn) =>
               new SeasonRequest({
                 seasonNumber: sn,
-                status:
-                  req.user?.hasPermission(
+                status: req.user?.hasPermission(
+                  [
                     req.body.is4k
                       ? Permission.AUTO_APPROVE_4K
-                      : Permission.AUTO_APPROVE
-                  ) ||
-                  req.user?.hasPermission(
+                      : Permission.AUTO_APPROVE,
                     req.body.is4k
                       ? Permission.AUTO_APPROVE_4K_TV
-                      : Permission.AUTO_APPROVE_TV
-                  )
-                    ? MediaRequestStatus.APPROVED
-                    : MediaRequestStatus.PENDING,
+                      : Permission.AUTO_APPROVE_TV,
+                    Permission.MANAGE_REQUESTS,
+                  ],
+                  { type: 'or' }
+                )
+                  ? MediaRequestStatus.APPROVED
+                  : MediaRequestStatus.PENDING,
               })
           ),
         });

server/routes/settings/index.ts

@@ -4,7 +4,6 @@ import { getRepository } from 'typeorm';
 import { User } from '../../entity/User';
 import PlexAPI from '../../api/plexapi';
 import PlexTvAPI from '../../api/plextv';
-import { jobPlexFullSync } from '../../job/plexsync';
 import { scheduledJobs } from '../../job/schedule';
 import { Permission } from '../../lib/permissions';
 import { isAuthenticated } from '../../middleware/auth';
@@ -17,6 +16,7 @@ import notificationRoutes from './notifications';
 import sonarrRoutes from './sonarr';
 import radarrRoutes from './radarr';
 import cacheManager, { AvailableCacheIds } from '../../lib/cache';
+import { plexFullScanner } from '../../lib/scanners/plex';
 
 const settingsRoutes = Router();
 
@@ -211,16 +211,16 @@ settingsRoutes.get('/plex/library', async (req, res) => {
 });
 
 settingsRoutes.get('/plex/sync', (_req, res) => {
-  return res.status(200).json(jobPlexFullSync.status());
+  return res.status(200).json(plexFullScanner.status());
 });
 
 settingsRoutes.post('/plex/sync', (req, res) => {
   if (req.body.cancel) {
-    jobPlexFullSync.cancel();
+    plexFullScanner.cancel();
   } else if (req.body.start) {
-    jobPlexFullSync.run();
+    plexFullScanner.run();
   }
-  return res.status(200).json(jobPlexFullSync.status());
+  return res.status(200).json(plexFullScanner.status());
 });
 
 settingsRoutes.get('/jobs', (_req, res) => {

server/routes/settings/notifications.ts

@@ -15,7 +15,6 @@ notificationRoutes.get('/', (_req, res) => {
   const settings = getSettings().notifications;
   return res.status(200).json({
     enabled: settings.enabled,
-    autoapprovalEnabled: settings.autoapprovalEnabled,
   });
 });
 
@@ -24,13 +23,11 @@ notificationRoutes.post('/', (req, res) => {
 
   Object.assign(settings.notifications, {
     enabled: req.body.enabled,
-    autoapprovalEnabled: req.body.autoapprovalEnabled,
   });
   settings.save();
 
   return res.status(200).json({
     enabled: settings.notifications.enabled,
-    autoapprovalEnabled: settings.notifications.autoapprovalEnabled,
   });
 });
 

server/routes/user/index.ts

@@ -167,7 +167,10 @@ router.get<{ id: string }, UserRequestsResponse>(
   }
 );
 
-const canMakePermissionsChange = (permissions: number, user?: User) =>
+export const canMakePermissionsChange = (
+  permissions: number,
+  user?: User
+): boolean =>
   // Only let the owner grant admin privileges
   !(hasPermission(Permission.ADMIN, permissions) && user?.id !== 1) ||
   // Only let users with the manage settings permission, grant the same permission

server/routes/user/usersettings.ts

@@ -1,6 +1,8 @@
 import { Router } from 'express';
 import { getRepository } from 'typeorm';
+import { canMakePermissionsChange } from '.';
 import { User } from '../../entity/User';
+import { getSettings } from '../../lib/settings';
 import { UserSettings } from '../../entity/UserSettings';
 import {
   UserSettingsGeneralResponse,
@@ -21,6 +23,7 @@ const isOwnProfileOrAdmin = (): Middleware => {
         message: "You do not have permission to view this user's settings.",
       });
     }
+
     next();
   };
   return authMiddleware;
@@ -137,7 +140,19 @@ userSettingsRoutes.post<
     if (req.body.newPassword.length < 8) {
       return next({
         status: 400,
-        message: 'Password must be at least 8 characters',
+        message: 'Password must be at least 8 characters.',
+      });
+    }
+
+    if (
+      (user.id === 1 && req.user?.id !== 1) ||
+      (user.hasPermission(Permission.ADMIN) &&
+        user.id !== req.user?.id &&
+        req.user?.id !== 1)
+    ) {
+      return next({
+        status: 403,
+        message: "You do not have permission to modify this user's password.",
       });
     }
 
@@ -184,6 +199,7 @@ userSettingsRoutes.get<{ id: string }, UserSettingsNotificationsResponse>(
   isOwnProfileOrAdmin(),
   async (req, res, next) => {
     const userRepository = getRepository(User);
+    const settings = getSettings();
 
     try {
       const user = await userRepository.findOne({
@@ -196,7 +212,11 @@ userSettingsRoutes.get<{ id: string }, UserSettingsNotificationsResponse>(
 
       return res.status(200).json({
         enableNotifications: user.settings?.enableNotifications ?? true,
+        telegramBotUsername:
+          settings?.notifications.agents.telegram.options.botUsername,
         discordId: user.settings?.discordId,
+        telegramChatId: user.settings?.telegramChatId,
+        telegramSendSilently: user?.settings?.telegramSendSilently,
       });
     } catch (e) {
       next({ status: 500, message: e.message });
@@ -225,10 +245,14 @@ userSettingsRoutes.post<
         user: req.user,
         enableNotifications: req.body.enableNotifications,
         discordId: req.body.discordId,
+        telegramChatId: req.body.telegramChatId,
+        telegramSendSilently: req.body.telegramSendSilently,
       });
     } else {
       user.settings.enableNotifications = req.body.enableNotifications;
       user.settings.discordId = req.body.discordId;
+      user.settings.telegramChatId = req.body.telegramChatId;
+      user.settings.telegramSendSilently = req.body.telegramSendSilently;
     }
 
     userRepository.save(user);
@@ -236,6 +260,8 @@ userSettingsRoutes.post<
     return res.status(200).json({
       enableNotifications: user.settings.enableNotifications,
       discordId: user.settings.discordId,
+      telegramChatId: user.settings.telegramChatId,
+      telegramSendSilently: user.settings.telegramSendSilently,
     });
   } catch (e) {
     next({ status: 500, message: e.message });
@@ -283,13 +309,20 @@ userSettingsRoutes.post<
         return next({ status: 404, message: 'User not found.' });
       }
 
-      if (user.id === 1) {
+      // Only let the owner user modify themselves
+      if (user.id === 1 && req.user?.id !== 1) {
         return next({
-          status: 500,
-          message: 'Permissions for user with ID 1 cannot be modified',
+          status: 403,
+          message: 'You do not have permission to modify this user',
         });
       }
 
+      if (!canMakePermissionsChange(req.body.permissions, req.user)) {
+        return next({
+          status: 403,
+          message: 'You do not have permission to grant this level of access',
+        });
+      }
       user.permissions = req.body.permissions;
 
       await userRepository.save(user);

snap/snapcraft.yaml

@@ -11,7 +11,7 @@ confinement: strict
 parts:
   overseerr:
     plugin: nodejs
-    nodejs-version: "12.18.4"
+    nodejs-version: "14.16.0"
     nodejs-package-manager: "yarn"
     nodejs-yarn-version: v1.22.5
     build-packages:

src/components/Common/ListView/index.tsx

@@ -38,7 +38,7 @@ const ListView: React.FC<ListViewProps> = ({
         </div>
       )}
       <ul className="cardList">
-        {items?.map((title) => {
+        {items?.map((title, index) => {
           let titleCard: React.ReactNode;
 
           switch (title.mediaType) {
@@ -90,7 +90,7 @@ const ListView: React.FC<ListViewProps> = ({
               break;
           }
 
-          return <li key={title.id}>{titleCard}</li>;
+          return <li key={`${title.id}-${index}`}>{titleCard}</li>;
         })}
         {isLoading &&
           !isReachingEnd &&

src/components/CompanyCard/index.tsx

@@ -0,0 +1,48 @@
+import Link from 'next/link';
+import React, { useState } from 'react';
+
+interface CompanyCardProps {
+  name: string;
+  image: string;
+  url: string;
+}
+
+const CompanyCard: React.FC<CompanyCardProps> = ({ image, url, name }) => {
+  const [isHovered, setHovered] = useState(false);
+
+  return (
+    <Link href={url}>
+      <a
+        className={`relative flex items-center justify-center h-32 w-64 sm:h-36 sm:w-72 p-8 shadow transition ease-in-out duration-150 cursor-pointer transform-gpu ring-1 ${
+          isHovered
+            ? 'bg-gray-700 scale-105 ring-gray-500'
+            : 'bg-gray-800 scale-100 ring-gray-700'
+        } rounded-xl`}
+        onMouseEnter={() => {
+          setHovered(true);
+        }}
+        onMouseLeave={() => setHovered(false)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            setHovered(true);
+          }
+        }}
+        role="link"
+        tabIndex={0}
+      >
+        <img
+          src={image}
+          alt={name}
+          className="relative z-40 max-w-full max-h-full"
+        />
+        <div
+          className={`absolute bottom-0 left-0 right-0 h-12 rounded-b-xl bg-gradient-to-t z-0 ${
+            isHovered ? 'from-gray-800' : 'from-gray-900'
+          }`}
+        />
+      </a>
+    </Link>
+  );
+};
+
+export default CompanyCard;

src/components/Discover/DiscoverMovieGenre/index.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import type { MovieResult } from '../../../../server/models/Search';
+import ListView from '../../Common/ListView';
+import { defineMessages, useIntl } from 'react-intl';
+import Header from '../../Common/Header';
+import PageTitle from '../../Common/PageTitle';
+import { useRouter } from 'next/router';
+import globalMessages from '../../../i18n/globalMessages';
+import useDiscover from '../../../hooks/useDiscover';
+import Error from '../../../pages/_error';
+
+const messages = defineMessages({
+  genreMovies: '{genre} Movies',
+});
+
+const DiscoverMovieGenre: React.FC = () => {
+  const router = useRouter();
+  const intl = useIntl();
+
+  const {
+    isLoadingInitialData,
+    isEmpty,
+    isLoadingMore,
+    isReachingEnd,
+    titles,
+    fetchMore,
+    error,
+    firstResultData,
+  } = useDiscover<MovieResult, { genre: { id: number; name: string } }>(
+    `/api/v1/discover/movies/genre/${router.query.genreId}`
+  );
+
+  if (error) {
+    return <Error statusCode={500} />;
+  }
+
+  const title = isLoadingInitialData
+    ? intl.formatMessage(globalMessages.loading)
+    : intl.formatMessage(messages.genreMovies, {
+        genre: firstResultData?.genre.name,
+      });
+
+  return (
+    <>
+      <PageTitle title={title} />
+      <div className="mt-1 mb-5">
+        <Header>{title}</Header>
+      </div>
+      <ListView
+        items={titles}
+        isEmpty={isEmpty}
+        isLoading={
+          isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
+        }
+        isReachingEnd={isReachingEnd}
+        onScrollBottom={fetchMore}
+      />
+    </>
+  );
+};
+
+export default DiscoverMovieGenre;

src/components/Discover/DiscoverMovieLanguage/index.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import type { MovieResult } from '../../../../server/models/Search';
+import ListView from '../../Common/ListView';
+import { defineMessages, useIntl } from 'react-intl';
+import Header from '../../Common/Header';
+import PageTitle from '../../Common/PageTitle';
+import { useRouter } from 'next/router';
+import globalMessages from '../../../i18n/globalMessages';
+import useDiscover from '../../../hooks/useDiscover';
+import Error from '../../../pages/_error';
+
+const messages = defineMessages({
+  languageMovies: '{language} Movies',
+});
+
+const DiscoverMovieLanguage: React.FC = () => {
+  const router = useRouter();
+  const intl = useIntl();
+
+  const {
+    isLoadingInitialData,
+    isEmpty,
+    isLoadingMore,
+    isReachingEnd,
+    titles,
+    fetchMore,
+    error,
+  } = useDiscover<
+    MovieResult,
+    {
+      originalLanguage: {
+        iso_639_1: string;
+        english_name: string;
+        name: string;
+      };
+    }
+  >(`/api/v1/discover/movies/language/${router.query.language}`);
+
+  if (error) {
+    return <Error statusCode={500} />;
+  }
+
+  const title = isLoadingInitialData
+    ? intl.formatMessage(globalMessages.loading)
+    : intl.formatMessage(messages.languageMovies, {
+        language: intl.formatDisplayName(router.query.language as string, {
+          type: 'language',
+          fallback: 'none',
+        }),
+      });
+
+  return (
+    <>
+      <PageTitle title={title} />
+      <div className="mt-1 mb-5">
+        <Header>{title}</Header>
+      </div>
+      <ListView
+        items={titles}
+        isEmpty={isEmpty}
+        isLoading={
+          isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
+        }
+        isReachingEnd={isReachingEnd}
+        onScrollBottom={fetchMore}
+      />
+    </>
+  );
+};
+
+export default DiscoverMovieLanguage;

src/components/Discover/DiscoverMovies.tsx

@@ -1,80 +1,40 @@
-import React, { useContext } from 'react';
-import { useSWRInfinite } from 'swr';
+import React from 'react';
 import type { MovieResult } from '../../../server/models/Search';
 import ListView from '../Common/ListView';
-import { LanguageContext } from '../../context/LanguageContext';
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import Header from '../Common/Header';
-import useSettings from '../../hooks/useSettings';
-import { MediaStatus } from '../../../server/constants/media';
 import PageTitle from '../Common/PageTitle';
+import useDiscover from '../../hooks/useDiscover';
+import Error from '../../pages/_error';
 
 const messages = defineMessages({
   discovermovies: 'Popular Movies',
 });
 
-interface SearchResult {
-  page: number;
-  totalResults: number;
-  totalPages: number;
-  results: MovieResult[];
-}
-
 const DiscoverMovies: React.FC = () => {
   const intl = useIntl();
-  const settings = useSettings();
-  const { locale } = useContext(LanguageContext);
-  const { data, error, size, setSize } = useSWRInfinite<SearchResult>(
-    (pageIndex: number, previousPageData: SearchResult | null) => {
-      if (previousPageData && pageIndex + 1 > previousPageData.totalPages) {
-        return null;
-      }
 
-      return `/api/v1/discover/movies?page=${pageIndex + 1}&language=${locale}`;
-    },
-    {
-      initialSize: 3,
-    }
-  );
-
-  const isLoadingInitialData = !data && !error;
-  const isLoadingMore =
-    isLoadingInitialData ||
-    (size > 0 && data && typeof data[size - 1] === 'undefined');
-
-  const fetchMore = () => {
-    setSize(size + 1);
-  };
+  const {
+    isLoadingInitialData,
+    isEmpty,
+    isLoadingMore,
+    isReachingEnd,
+    titles,
+    fetchMore,
+    error,
+  } = useDiscover<MovieResult>('/api/v1/discover/movies');
 
   if (error) {
-    return <div>{error}</div>;
+    return <Error statusCode={500} />;
   }
 
-  let titles = (data ?? []).reduce(
-    (a, v) => [...a, ...v.results],
-    [] as MovieResult[]
-  );
-
-  if (settings.currentSettings.hideAvailable) {
-    titles = titles.filter(
-      (i) =>
-        (i.mediaType === 'movie' || i.mediaType === 'tv') &&
-        i.mediaInfo?.status !== MediaStatus.AVAILABLE &&
-        i.mediaInfo?.status !== MediaStatus.PARTIALLY_AVAILABLE
-    );
-  }
-
-  const isEmpty = !isLoadingInitialData && titles?.length === 0;
-  const isReachingEnd =
-    isEmpty || (data && data[data.length - 1]?.results.length < 20);
+  const title = intl.formatMessage(messages.discovermovies);
 
   return (
     <>
-      <PageTitle title={intl.formatMessage(messages.discovermovies)} />
+      <PageTitle title={title} />
       <div className="mt-1 mb-5">
-        <Header>
-          <FormattedMessage {...messages.discovermovies} />
-        </Header>
+        <Header>{title}</Header>
       </div>
       <ListView
         items={titles}

src/components/Discover/DiscoverNetwork/index.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import type { TvResult } from '../../../../server/models/Search';
+import ListView from '../../Common/ListView';
+import { defineMessages, useIntl } from 'react-intl';
+import Header from '../../Common/Header';
+import PageTitle from '../../Common/PageTitle';
+import { useRouter } from 'next/router';
+import globalMessages from '../../../i18n/globalMessages';
+import useDiscover from '../../../hooks/useDiscover';
+import Error from '../../../pages/_error';
+import { TvNetwork } from '../../../../server/models/common';
+
+const messages = defineMessages({
+  networkSeries: '{network} Series',
+});
+
+const DiscoverTvNetwork: React.FC = () => {
+  const router = useRouter();
+  const intl = useIntl();
+
+  const {
+    isLoadingInitialData,
+    isEmpty,
+    isLoadingMore,
+    isReachingEnd,
+    titles,
+    fetchMore,
+    error,
+    firstResultData,
+  } = useDiscover<TvResult, { network: TvNetwork }>(
+    `/api/v1/discover/tv/network/${router.query.networkId}`
+  );
+
+  if (error) {
+    return <Error statusCode={500} />;
+  }
+
+  const title = isLoadingInitialData
+    ? intl.formatMessage(globalMessages.loading)
+    : intl.formatMessage(messages.networkSeries, {
+        network: firstResultData?.network.name,
+      });
+
+  return (
+    <>
+      <PageTitle title={title} />
+      <div className="mt-1 mb-5">
+        <Header>
+          {firstResultData?.network.logoPath ? (
+            <div className="flex justify-center mb-6">
+              <img
+                src={`//image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)${firstResultData.network.logoPath}`}
+                alt={firstResultData.network.name}
+                className="max-h-24 sm:max-h-32"
+              />
+            </div>
+          ) : (
+            title
+          )}
+        </Header>
+      </div>
+      <ListView
+        items={titles}
+        isEmpty={isEmpty}
+        isLoading={
+          isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
+        }
+        isReachingEnd={isReachingEnd}
+        onScrollBottom={fetchMore}
+      />
+    </>
+  );
+};
+
+export default DiscoverTvNetwork;

src/components/Discover/DiscoverStudio/index.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import type { MovieResult } from '../../../../server/models/Search';
+import ListView from '../../Common/ListView';
+import { defineMessages, useIntl } from 'react-intl';
+import Header from '../../Common/Header';
+import PageTitle from '../../Common/PageTitle';
+import { useRouter } from 'next/router';
+import globalMessages from '../../../i18n/globalMessages';
+import useDiscover from '../../../hooks/useDiscover';
+import Error from '../../../pages/_error';
+import { ProductionCompany } from '../../../../server/models/common';
+
+const messages = defineMessages({
+  studioMovies: '{studio} Movies',
+});
+
+const DiscoverMovieStudio: React.FC = () => {
+  const router = useRouter();
+  const intl = useIntl();
+
+  const {
+    isLoadingInitialData,
+    isEmpty,
+    isLoadingMore,
+    isReachingEnd,
+    titles,
+    fetchMore,
+    error,
+    firstResultData,
+  } = useDiscover<MovieResult, { studio: ProductionCompany }>(
+    `/api/v1/discover/movies/studio/${router.query.studioId}`
+  );
+
+  if (error) {
+    return <Error statusCode={500} />;
+  }
+
+  const title = isLoadingInitialData
+    ? intl.formatMessage(globalMessages.loading)
+    : intl.formatMessage(messages.studioMovies, {
+        studio: firstResultData?.studio.name,
+      });
+
+  return (
+    <>
+      <PageTitle title={title} />
+      <div className="mt-1 mb-5">
+        <Header>
+          {firstResultData?.studio.logoPath ? (
+            <div className="flex justify-center mb-6">
+              <img
+                src={`//image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)${firstResultData.studio.logoPath}`}
+                alt={firstResultData.studio.name}
+                className="max-h-24 sm:max-h-32"
+              />
+            </div>
+          ) : (
+            title
+          )}
+        </Header>
+      </div>
+      <ListView
+        items={titles}
+        isEmpty={isEmpty}
+        isLoading={
+          isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
+        }
+        isReachingEnd={isReachingEnd}
+        onScrollBottom={fetchMore}
+      />
+    </>
+  );
+};
+
+export default DiscoverMovieStudio;

src/components/Discover/DiscoverTv.tsx

@@ -1,79 +1,40 @@
-import React, { useContext } from 'react';
-import { useSWRInfinite } from 'swr';
+import React from 'react';
 import type { TvResult } from '../../../server/models/Search';
 import ListView from '../Common/ListView';
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import { LanguageContext } from '../../context/LanguageContext';
+import { defineMessages, useIntl } from 'react-intl';
 import Header from '../Common/Header';
-import useSettings from '../../hooks/useSettings';
-import { MediaStatus } from '../../../server/constants/media';
 import PageTitle from '../Common/PageTitle';
+import useDiscover from '../../hooks/useDiscover';
+import Error from '../../pages/_error';
 
 const messages = defineMessages({
   discovertv: 'Popular Series',
 });
 
-interface SearchResult {
-  page: number;
-  totalResults: number;
-  totalPages: number;
-  results: TvResult[];
-}
-
 const DiscoverTv: React.FC = () => {
   const intl = useIntl();
-  const settings = useSettings();
-  const { locale } = useContext(LanguageContext);
-  const { data, error, size, setSize } = useSWRInfinite<SearchResult>(
-    (pageIndex: number, previousPageData: SearchResult | null) => {
-      if (previousPageData && pageIndex + 1 > previousPageData.totalPages) {
-        return null;
-      }
 
-      return `/api/v1/discover/tv?page=${pageIndex + 1}&language=${locale}`;
-    },
-    {
-      initialSize: 3,
-    }
-  );
-
-  const isLoadingInitialData = !data && !error;
-  const isLoadingMore =
-    isLoadingInitialData ||
-    (size > 0 && data && typeof data[size - 1] === 'undefined');
-
-  const fetchMore = () => {
-    setSize(size + 1);
-  };
+  const {
+    isLoadingInitialData,
+    isEmpty,
+    isLoadingMore,
+    isReachingEnd,
+    titles,
+    fetchMore,
+    error,
+  } = useDiscover<TvResult>('/api/v1/discover/tv');
 
   if (error) {
-    return <div>{error}</div>;
+    return <Error statusCode={500} />;
   }
 
-  let titles = (data ?? []).reduce(
-    (a, v) => [...a, ...v.results],
-    [] as TvResult[]
-  );
-
-  if (settings.currentSettings.hideAvailable) {
-    titles = titles.filter(
-      (i) =>
-        i.mediaInfo?.status !== MediaStatus.AVAILABLE &&
-        i.mediaInfo?.status !== MediaStatus.PARTIALLY_AVAILABLE
-    );
-  }
-
-  const isEmpty = !isLoadingInitialData && titles?.length === 0;
-  const isReachingEnd =
-    isEmpty || (data && data[data.length - 1]?.results.length < 20);
+  const title = intl.formatMessage(messages.discovertv);
 
   return (
     <>
-      <PageTitle title={intl.formatMessage(messages.discovertv)} />
+      <PageTitle title={title} />
       <div className="mt-1 mb-5">
-        <Header>
-          <FormattedMessage {...messages.discovertv} />
-        </Header>
+        <Header>{title}</Header>
       </div>
       <ListView
         items={titles}

src/components/Discover/DiscoverTvGenre/index.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import type { TvResult } from '../../../../server/models/Search';
+import ListView from '../../Common/ListView';
+import { defineMessages, useIntl } from 'react-intl';
+import Header from '../../Common/Header';
+import PageTitle from '../../Common/PageTitle';
+import { useRouter } from 'next/router';
+import globalMessages from '../../../i18n/globalMessages';
+import useDiscover from '../../../hooks/useDiscover';
+import Error from '../../../pages/_error';
+
+const messages = defineMessages({
+  genreSeries: '{genre} Series',
+});
+
+const DiscoverTvGenre: React.FC = () => {
+  const router = useRouter();
+  const intl = useIntl();
+
+  const {
+    isLoadingInitialData,
+    isEmpty,
+    isLoadingMore,
+    isReachingEnd,
+    titles,
+    fetchMore,
+    error,
+    firstResultData,
+  } = useDiscover<TvResult, { genre: { id: number; name: string } }>(
+    `/api/v1/discover/tv/genre/${router.query.genreId}`
+  );
+
+  if (error) {
+    return <Error statusCode={500} />;
+  }
+
+  const title = isLoadingInitialData
+    ? intl.formatMessage(globalMessages.loading)
+    : intl.formatMessage(messages.genreSeries, {
+        genre: firstResultData?.genre.name,
+      });
+
+  return (
+    <>
+      <PageTitle title={title} />
+      <div className="mt-1 mb-5">
+        <Header>{title}</Header>
+      </div>
+      <ListView
+        items={titles}
+        isEmpty={isEmpty}
+        isLoading={
+          isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
+        }
+        isReachingEnd={isReachingEnd}
+        onScrollBottom={fetchMore}
+      />
+    </>
+  );
+};
+
+export default DiscoverTvGenre;

src/components/Discover/DiscoverTvLanguage/index.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import type { TvResult } from '../../../../server/models/Search';
+import ListView from '../../Common/ListView';
+import { defineMessages, useIntl } from 'react-intl';
+import Header from '../../Common/Header';
+import PageTitle from '../../Common/PageTitle';
+import { useRouter } from 'next/router';
+import globalMessages from '../../../i18n/globalMessages';
+import useDiscover from '../../../hooks/useDiscover';
+import Error from '../../../pages/_error';
+
+const messages = defineMessages({
+  languageSeries: '{language} Series',
+});
+
+const DiscoverTvLanguage: React.FC = () => {
+  const router = useRouter();
+  const intl = useIntl();
+
+  const {
+    isLoadingInitialData,
+    isEmpty,
+    isLoadingMore,
+    isReachingEnd,
+    titles,
+    fetchMore,
+    error,
+  } = useDiscover<
+    TvResult,
+    {
+      originalLanguage: {
+        iso_639_1: string;
+        english_name: string;
+        name: string;
+      };
+    }
+  >(`/api/v1/discover/tv/language/${router.query.language}`);
+
+  if (error) {
+    return <Error statusCode={500} />;
+  }
+
+  const title = isLoadingInitialData
+    ? intl.formatMessage(globalMessages.loading)
+    : intl.formatMessage(messages.languageSeries, {
+        language: intl.formatDisplayName(router.query.language as string, {
+          type: 'language',
+          fallback: 'none',
+        }),
+      });
+
+  return (
+    <>
+      <PageTitle title={title} />
+      <div className="mt-1 mb-5">
+        <Header>{title}</Header>
+      </div>
+      <ListView
+        items={titles}
+        isEmpty={isEmpty}
+        isLoading={
+          isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
+        }
+        isReachingEnd={isReachingEnd}
+        onScrollBottom={fetchMore}
+      />
+    </>
+  );
+};
+
+export default DiscoverTvLanguage;

src/components/Discover/DiscoverTvUpcoming.tsx

@@ -1,81 +1,38 @@
-import React, { useContext } from 'react';
-import { useSWRInfinite } from 'swr';
+import React from 'react';
 import type { TvResult } from '../../../server/models/Search';
 import ListView from '../Common/ListView';
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import { LanguageContext } from '../../context/LanguageContext';
+import { defineMessages, useIntl } from 'react-intl';
 import Header from '../Common/Header';
-import useSettings from '../../hooks/useSettings';
-import { MediaStatus } from '../../../server/constants/media';
 import PageTitle from '../Common/PageTitle';
+import useDiscover from '../../hooks/useDiscover';
+import Error from '../../pages/_error';
 
 const messages = defineMessages({
   upcomingtv: 'Upcoming Series',
 });
 
-interface SearchResult {
-  page: number;
-  totalResults: number;
-  totalPages: number;
-  results: TvResult[];
-}
-
 const DiscoverTvUpcoming: React.FC = () => {
   const intl = useIntl();
-  const settings = useSettings();
-  const { locale } = useContext(LanguageContext);
-  const { data, error, size, setSize } = useSWRInfinite<SearchResult>(
-    (pageIndex: number, previousPageData: SearchResult | null) => {
-      if (previousPageData && pageIndex + 1 > previousPageData.totalPages) {
-        return null;
-      }
 
-      return `/api/v1/discover/tv/upcoming?page=${
-        pageIndex + 1
-      }&language=${locale}`;
-    },
-    {
-      initialSize: 3,
-    }
-  );
-
-  const isLoadingInitialData = !data && !error;
-  const isLoadingMore =
-    isLoadingInitialData ||
-    (size > 0 && data && typeof data[size - 1] === 'undefined');
-
-  const fetchMore = () => {
-    setSize(size + 1);
-  };
+  const {
+    isLoadingInitialData,
+    isEmpty,
+    isLoadingMore,
+    isReachingEnd,
+    titles,
+    fetchMore,
+    error,
+  } = useDiscover<TvResult>('/api/v1/discover/tv/upcoming');
 
   if (error) {
-    return <div>{error}</div>;
+    return <Error statusCode={500} />;
   }
 
-  let titles = (data ?? []).reduce(
-    (a, v) => [...a, ...v.results],
-    [] as TvResult[]
-  );
-
-  if (settings.currentSettings.hideAvailable) {
-    titles = titles.filter(
-      (i) =>
-        i.mediaInfo?.status !== MediaStatus.AVAILABLE &&
-        i.mediaInfo?.status !== MediaStatus.PARTIALLY_AVAILABLE
-    );
-  }
-
-  const isEmpty = !isLoadingInitialData && titles?.length === 0;
-  const isReachingEnd =
-    isEmpty || (data && data[data.length - 1]?.results.length < 20);
-
   return (
     <>
       <PageTitle title={intl.formatMessage(messages.upcomingtv)} />
       <div className="mt-1 mb-5">
-        <Header>
-          <FormattedMessage {...messages.upcomingtv} />
-        </Header>
+        <Header>{intl.formatMessage(messages.upcomingtv)}</Header>
       </div>
       <ListView
         items={titles}

src/components/Discover/NetworkSlider/index.tsx

@@ -0,0 +1,149 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import CompanyCard from '../../CompanyCard';
+import Slider from '../../Slider';
+
+const messages = defineMessages({
+  networks: 'Networks',
+});
+
+interface Network {
+  name: string;
+  image: string;
+  url: string;
+}
+
+const networks: Network[] = [
+  {
+    name: 'Netflix',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/wwemzKWzjKYJFfCeiB57q3r4Bcm.png',
+    url: '/discover/tv/network/213',
+  },
+  {
+    name: 'Disney+',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/gJ8VX6JSu3ciXHuC2dDGAo2lvwM.png',
+    url: '/discover/tv/network/2739',
+  },
+  {
+    name: 'Prime Video',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/ifhbNuuVnlwYy5oXA5VIb2YR8AZ.png',
+    url: '/discover/tv/network/1024',
+  },
+  {
+    name: 'HBO',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/tuomPhY2UtuPTqqFnKMVHvSb724.png',
+    url: '/discover/tv/network/49',
+  },
+  {
+    name: 'ABC',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/ndAvF4JLsliGreX87jAc9GdjmJY.png',
+    url: '/discover/tv/network/2',
+  },
+  {
+    name: 'FOX',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/1DSpHrWyOORkL9N2QHX7Adt31mQ.png',
+    url: '/discover/tv/network/19',
+  },
+  {
+    name: 'Cinemax',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/6mSHSquNpfLgDdv6VnOOvC5Uz2h.png',
+    url: '/discover/tv/network/359',
+  },
+  {
+    name: 'AMC',
+    image:
+      'https://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/pmvRmATOCaDykE6JrVoeYxlFHw3.png',
+    url: '/discover/tv/network/174',
+  },
+  {
+    name: 'Showtime',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/Allse9kbjiP6ExaQrnSpIhkurEi.png',
+    url: '/discover/tv/network/67',
+  },
+  {
+    name: 'Starz',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/8GJjw3HHsAJYwIWKIPBPfqMxlEa.png',
+    url: '/discover/tv/network/318',
+  },
+  {
+    name: 'The CW',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/ge9hzeaU7nMtQ4PjkFlc68dGAJ9.png',
+    url: '/discover/tv/network/71',
+  },
+  {
+    name: 'NBC',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/o3OedEP0f9mfZr33jz2BfXOUK5.png',
+    url: '/discover/tv/network/6',
+  },
+  {
+    name: 'CBS',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/nm8d7P7MJNiBLdgIzUK0gkuEA4r.png',
+    url: '/discover/tv/network/16',
+  },
+  {
+    name: 'BBC One',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/mVn7xESaTNmjBUyUtGNvDQd3CT1.png',
+    url: '/discover/tv/network/4',
+  },
+  {
+    name: 'Cartoon Network',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/c5OC6oVCg6QP4eqzW6XIq17CQjI.png',
+    url: '/discover/tv/network/56',
+  },
+  {
+    name: 'Adult Swim',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/9AKyspxVzywuaMuZ1Bvilu8sXly.png',
+    url: '/discover/tv/network/80',
+  },
+  {
+    name: 'Nickelodeon',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/ikZXxg6GnwpzqiZbRPhJGaZapqB.png',
+    url: '/discover/tv/network/13',
+  },
+];
+
+const NetworkSlider: React.FC = () => {
+  const intl = useIntl();
+
+  return (
+    <>
+      <div className="slider-header">
+        <div className="slider-title">
+          <span>{intl.formatMessage(messages.networks)}</span>
+        </div>
+      </div>
+      <Slider
+        sliderKey="networks"
+        isLoading={false}
+        isEmpty={false}
+        items={networks.map((network, index) => (
+          <CompanyCard
+            key={`network-${index}`}
+            name={network.name}
+            image={network.image}
+            url={network.url}
+          />
+        ))}
+        emptyMessage=""
+      />
+    </>
+  );
+};
+
+export default NetworkSlider;

src/components/Discover/StudioSlider/index.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import CompanyCard from '../../CompanyCard';
+import Slider from '../../Slider';
+
+const messages = defineMessages({
+  studios: 'Studios',
+});
+
+interface Studio {
+  name: string;
+  image: string;
+  url: string;
+}
+
+const studios: Studio[] = [
+  {
+    name: 'Disney',
+    image:
+      'https://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/wdrCwmRnLFJhEoH8GSfymY85KHT.png',
+    url: '/discover/movies/studio/2',
+  },
+  {
+    name: '20th Century Fox',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/qZCc1lty5FzX30aOCVRBLzaVmcp.png',
+    url: '/discover/movies/studio/25',
+  },
+  {
+    name: 'Sony Pictures',
+    image:
+      'https://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/GagSvqWlyPdkFHMfQ3pNq6ix9P.png',
+    url: '/discover/movies/studio/34',
+  },
+  {
+    name: 'Warner Bros. Pictures',
+    image:
+      'https://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/ky0xOc5OrhzkZ1N6KyUxacfQsCk.png',
+    url: '/discover/movies/studio/174',
+  },
+  {
+    name: 'Universal',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/8lvHyhjr8oUKOOy2dKXoALWKdp0.png',
+    url: '/discover/movies/studio/33',
+  },
+  {
+    name: 'Paramount',
+    image:
+      'https://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/fycMZt242LVjagMByZOLUGbCvv3.png',
+    url: '/discover/movies/studio/4',
+  },
+  {
+    name: 'Pixar',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/1TjvGVDMYsj6JBxOAkUHpPEwLf7.png',
+    url: '/discover/movies/studio/3',
+  },
+  {
+    name: 'Dreamworks',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/kP7t6RwGz2AvvTkvnI1uteEwHet.png',
+    url: '/discover/movies/studio/521',
+  },
+  {
+    name: 'Marvel Studios',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/hUzeosd33nzE5MCNsZxCGEKTXaQ.png',
+    url: '/discover/movies/studio/420',
+  },
+  {
+    name: 'DC',
+    image:
+      'https://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/2Tc1P3Ac8M479naPp1kYT3izLS5.png',
+    url: '/discover/movies/studio/9993',
+  },
+];
+
+const StudioSlider: React.FC = () => {
+  const intl = useIntl();
+
+  return (
+    <>
+      <div className="slider-header">
+        <div className="slider-title">
+          <span>{intl.formatMessage(messages.studios)}</span>
+        </div>
+      </div>
+      <Slider
+        sliderKey="studios"
+        isLoading={false}
+        isEmpty={false}
+        items={studios.map((studio, index) => (
+          <CompanyCard
+            key={`studio-${index}`}
+            name={studio.name}
+            image={studio.image}
+            url={studio.url}
+          />
+        ))}
+        emptyMessage=""
+      />
+    </>
+  );
+};
+
+export default StudioSlider;

src/components/Discover/Trending.tsx

@@ -1,86 +1,43 @@
-import React, { useContext } from 'react';
-import { useSWRInfinite } from 'swr';
+import React from 'react';
 import type {
   MovieResult,
   TvResult,
   PersonResult,
 } from '../../../server/models/Search';
 import ListView from '../Common/ListView';
-import { LanguageContext } from '../../context/LanguageContext';
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import Header from '../Common/Header';
-import useSettings from '../../hooks/useSettings';
-import { MediaStatus } from '../../../server/constants/media';
 import PageTitle from '../Common/PageTitle';
+import useDiscover from '../../hooks/useDiscover';
+import Error from '../../pages/_error';
 
 const messages = defineMessages({
   trending: 'Trending',
 });
 
-interface SearchResult {
-  page: number;
-  totalResults: number;
-  totalPages: number;
-  results: (MovieResult | TvResult | PersonResult)[];
-}
-
 const Trending: React.FC = () => {
   const intl = useIntl();
-  const settings = useSettings();
-  const { locale } = useContext(LanguageContext);
-  const { data, error, size, setSize } = useSWRInfinite<SearchResult>(
-    (pageIndex: number, previousPageData: SearchResult | null) => {
-      if (previousPageData && pageIndex + 1 > previousPageData.totalPages) {
-        return null;
-      }
-
-      return `/api/v1/discover/trending?page=${
-        pageIndex + 1
-      }&language=${locale}`;
-    },
-    {
-      initialSize: 3,
-    }
+  const {
+    isLoadingInitialData,
+    isEmpty,
+    isLoadingMore,
+    isReachingEnd,
+    titles,
+    fetchMore,
+    error,
+  } = useDiscover<MovieResult | TvResult | PersonResult>(
+    '/api/v1/discover/trending'
   );
 
-  const isLoadingInitialData = !data && !error;
-  const isLoadingMore =
-    isLoadingInitialData ||
-    (size > 0 && data && typeof data[size - 1] === 'undefined');
-
-  const fetchMore = () => {
-    setSize(size + 1);
-  };
-
   if (error) {
-    return <div>{error}</div>;
+    return <Error statusCode={500} />;
   }
 
-  let titles = (data ?? []).reduce(
-    (a, v) => [...a, ...v.results],
-    [] as (MovieResult | TvResult | PersonResult)[]
-  );
-
-  if (settings.currentSettings.hideAvailable) {
-    titles = titles.filter(
-      (i) =>
-        (i.mediaType === 'movie' || i.mediaType === 'tv') &&
-        i.mediaInfo?.status !== MediaStatus.AVAILABLE &&
-        i.mediaInfo?.status !== MediaStatus.PARTIALLY_AVAILABLE
-    );
-  }
-
-  const isEmpty = !isLoadingInitialData && titles?.length === 0;
-  const isReachingEnd =
-    isEmpty || (data && data[data.length - 1]?.results.length < 20);
-
   return (
     <>
       <PageTitle title={intl.formatMessage(messages.trending)} />
       <div className="mt-1 mb-5">
-        <Header>
-          <FormattedMessage {...messages.trending} />
-        </Header>
+        <Header>{intl.formatMessage(messages.trending)}</Header>
       </div>
       <ListView
         items={titles}

src/components/Discover/Upcoming.tsx

@@ -1,81 +1,38 @@
-import React, { useContext } from 'react';
-import { useSWRInfinite } from 'swr';
+import React from 'react';
 import type { MovieResult } from '../../../server/models/Search';
 import ListView from '../Common/ListView';
-import { LanguageContext } from '../../context/LanguageContext';
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import Header from '../Common/Header';
-import useSettings from '../../hooks/useSettings';
-import { MediaStatus } from '../../../server/constants/media';
 import PageTitle from '../Common/PageTitle';
+import useDiscover from '../../hooks/useDiscover';
+import Error from '../../pages/_error';
 
 const messages = defineMessages({
   upcomingmovies: 'Upcoming Movies',
 });
 
-interface SearchResult {
-  page: number;
-  totalResults: number;
-  totalPages: number;
-  results: MovieResult[];
-}
-
 const UpcomingMovies: React.FC = () => {
   const intl = useIntl();
-  const settings = useSettings();
-  const { locale } = useContext(LanguageContext);
-  const { data, error, size, setSize } = useSWRInfinite<SearchResult>(
-    (pageIndex: number, previousPageData: SearchResult | null) => {
-      if (previousPageData && pageIndex + 1 > previousPageData.totalPages) {
-        return null;
-      }
 
-      return `/api/v1/discover/movies/upcoming?page=${
-        pageIndex + 1
-      }&language=${locale}`;
-    },
-    {
-      initialSize: 3,
-    }
-  );
-
-  const isLoadingInitialData = !data && !error;
-  const isLoadingMore =
-    isLoadingInitialData ||
-    (size > 0 && data && typeof data[size - 1] === 'undefined');
-
-  const fetchMore = () => {
-    setSize(size + 1);
-  };
+  const {
+    isLoadingInitialData,
+    isEmpty,
+    isLoadingMore,
+    isReachingEnd,
+    titles,
+    fetchMore,
+    error,
+  } = useDiscover<MovieResult>('/api/v1/discover/movies/upcoming');
 
   if (error) {
-    return <div>{error}</div>;
+    return <Error statusCode={500} />;
   }
 
-  let titles = (data ?? []).reduce(
-    (a, v) => [...a, ...v.results],
-    [] as MovieResult[]
-  );
-
-  if (settings.currentSettings.hideAvailable) {
-    titles = titles.filter(
-      (i) =>
-        i.mediaInfo?.status !== MediaStatus.AVAILABLE &&
-        i.mediaInfo?.status !== MediaStatus.PARTIALLY_AVAILABLE
-    );
-  }
-
-  const isEmpty = !isLoadingInitialData && titles?.length === 0;
-  const isReachingEnd =
-    isEmpty || (data && data[data.length - 1]?.results.length < 20);
-
   return (
     <>
       <PageTitle title={intl.formatMessage(messages.upcomingmovies)} />
       <div className="mt-1 mb-5">
-        <Header>
-          <FormattedMessage {...messages.upcomingmovies} />
-        </Header>
+        <Header>{intl.formatMessage(messages.upcomingmovies)}</Header>
       </div>
       <ListView
         items={titles}

src/components/Discover/index.tsx

@@ -3,12 +3,14 @@ import useSWR from 'swr';
 import TmdbTitleCard from '../TitleCard/TmdbTitleCard';
 import Slider from '../Slider';
 import Link from 'next/link';
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import type { MediaResultsResponse } from '../../../server/interfaces/api/mediaInterfaces';
 import type { RequestResultsResponse } from '../../../server/interfaces/api/requestInterfaces';
 import RequestCard from '../RequestCard';
 import MediaSlider from '../MediaSlider';
 import PageTitle from '../Common/PageTitle';
+import StudioSlider from './StudioSlider';
+import NetworkSlider from './NetworkSlider';
 
 const messages = defineMessages({
   discover: 'Discover',
@@ -39,13 +41,9 @@ const Discover: React.FC = () => {
   return (
     <>
       <PageTitle title={intl.formatMessage(messages.discover)} />
-      <div className="mt-6 mb-4 md:flex md:items-center md:justify-between">
-        <div className="flex-1 min-w-0">
-          <div className="inline-flex items-center text-xl leading-7 text-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate">
-            <span>
-              <FormattedMessage {...messages.recentlyAdded} />
-            </span>
-          </div>
+      <div className="slider-header">
+        <div className="slider-title">
+          <span>{intl.formatMessage(messages.recentlyAdded)}</span>
         </div>
       </div>
       <Slider
@@ -60,30 +58,26 @@ const Discover: React.FC = () => {
           />
         ))}
       />
-      <div className="mt-6 mb-4 md:flex md:items-center md:justify-between">
-        <div className="flex-1 min-w-0">
-          <Link href="/requests">
-            <a className="inline-flex items-center text-xl leading-7 text-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate">
-              <span>
-                <FormattedMessage {...messages.recentrequests} />
-              </span>
-              <svg
-                className="w-6 h-6 ml-2"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-              </svg>
-            </a>
-          </Link>
-        </div>
+      <div className="slider-header">
+        <Link href="/requests">
+          <a className="slider-title">
+            <span>{intl.formatMessage(messages.recentrequests)}</span>
+            <svg
+              className="w-6 h-6 ml-2"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+          </a>
+        </Link>
       </div>
       <Slider
         sliderKey="requests"
@@ -116,6 +110,7 @@ const Discover: React.FC = () => {
         linkUrl="/discover/movies/upcoming"
         url="/api/v1/discover/movies/upcoming"
       />
+      <StudioSlider />
       <MediaSlider
         sliderKey="popular-tv"
         title={intl.formatMessage(messages.populartv)}
@@ -128,6 +123,7 @@ const Discover: React.FC = () => {
         url="/api/v1/discover/tv/upcoming"
         linkUrl="/discover/tv/upcoming"
       />
+      <NetworkSlider />
     </>
   );
 };

src/components/Layout/LanguagePicker/index.tsx

@@ -89,7 +89,9 @@ const LanguagePicker: React.FC = () => {
     <div className="relative">
       <div>
         <button
-          className="p-1 text-gray-400 rounded-full hover:bg-gray-600 hover:text-white focus:outline-none focus:ring focus:text-white"
+          className={`p-1 rounded-full sm:p-2 hover:bg-gray-600 hover:text-white focus:outline-none focus:bg-gray-600 focus:ring-1 focus:ring-gray-500 focus:text-white ${
+            isDropdownOpen ? 'bg-gray-600 text-white' : 'text-gray-400'
+          }`}
           aria-label="Language Picker"
           onClick={() => setDropdownOpen(true)}
         >

src/components/Layout/SearchInput/index.tsx

@@ -29,7 +29,7 @@ const SearchInput: React.FC = () => {
           <input
             id="search_field"
             style={{ paddingRight: searchValue.length > 0 ? '1.75rem' : '' }}
-            className="block w-full py-2 pl-10 text-white placeholder-gray-300 bg-gray-900 border border-gray-600 rounded-full focus:border-gray-500 focus:outline-none focus:ring-0 focus:placeholder-gray-400 sm:text-base"
+            className="block w-full py-2 pl-10 text-white placeholder-gray-300 bg-gray-900 border border-gray-600 rounded-full focus:border-gray-500 hover:border-gray-500 focus:outline-none focus:ring-0 focus:placeholder-gray-400 sm:text-base"
             placeholder={intl.formatMessage(messages.searchPlaceholder)}
             type="search"
             value={searchValue}

src/components/Layout/UserDropdown/index.tsx

@@ -31,13 +31,17 @@ const UserDropdown: React.FC = () => {
     <div className="relative ml-3">
       <div>
         <button
-          className="flex items-center max-w-xs text-sm rounded-full focus:outline-none focus:ring"
+          className="flex items-center max-w-xs text-sm rounded-full ring-1 ring-gray-700 focus:outline-none focus:ring-gray-500 hover:ring-gray-500"
           id="user-menu"
           aria-label="User menu"
           aria-haspopup="true"
           onClick={() => setDropdownOpen(true)}
         >
-          <img className="w-8 h-8 rounded-full" src={user?.avatar} alt="" />
+          <img
+            className="w-8 h-8 rounded-full sm:w-10 sm:h-10"
+            src={user?.avatar}
+            alt=""
+          />
         </button>
       </div>
       <Transition

src/components/Layout/index.tsx

@@ -72,7 +72,7 @@ const Layout: React.FC = ({ children }) => {
           </button>
           <div className="flex justify-between flex-1 pr-4 md:pr-4 md:pl-4">
             <SearchInput />
-            <div className="flex items-center ml-2 md:ml-4">
+            <div className="flex items-center ml-2">
               <LanguagePicker />
               <UserDropdown />
             </div>

src/components/Login/LocalLogin.tsx

@@ -63,7 +63,7 @@ const LocalLogin: React.FC<LocalLoginProps> = ({ revalidate }) => {
                   {intl.formatMessage(messages.email)}
                 </label>
                 <div className="mt-1 mb-2 sm:mt-0 sm:col-span-2">
-                  <div className="flex max-w-lg rounded-md shadow-sm">
+                  <div className="form-input-field">
                     <Field
                       id="email"
                       name="email"
@@ -79,7 +79,7 @@ const LocalLogin: React.FC<LocalLoginProps> = ({ revalidate }) => {
                   {intl.formatMessage(messages.password)}
                 </label>
                 <div className="mt-1 mb-2 sm:mt-0 sm:col-span-2">
-                  <div className="flex max-w-lg rounded-md shadow-sm">
+                  <div className="form-input-field">
                     <Field
                       id="password"
                       name="password"

src/components/MediaSlider/ShowMoreCard/index.tsx

@@ -32,8 +32,10 @@ const ShowMoreCard: React.FC<ShowMoreCardProps> = ({ url, posters }) => {
       >
         <div
           className={`relative w-36 sm:w-36 md:w-44
-         rounded-lg text-white shadow-lg overflow-hidden transition ease-in-out duration-150 cursor-pointer transform-gpu ${
-           isHovered ? 'bg-gray-500 scale-105' : 'bg-gray-600 scale-100'
+         rounded-xl text-white shadow-lg overflow-hidden transition ease-in-out duration-150 cursor-pointer transform-gpu ring-1 ${
+           isHovered
+             ? 'bg-gray-600 ring-gray-500 scale-105'
+             : 'bg-gray-800 ring-gray-700 scale-100'
          }`}
         >
           <div style={{ paddingBottom: '150%' }}>

src/components/MediaSlider/index.tsx

@@ -135,34 +135,32 @@ const MediaSlider: React.FC<MediaSliderProps> = ({
 
   return (
     <>
-      <div className="mt-6 mb-4 md:flex md:items-center md:justify-between">
-        <div className="flex-1 min-w-0">
-          {linkUrl ? (
-            <Link href={linkUrl}>
-              <a className="inline-flex items-center text-xl leading-7 text-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate">
-                <span>{title}</span>
-                <svg
-                  className="w-6 h-6 ml-2"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
-                  />
-                </svg>
-              </a>
-            </Link>
-          ) : (
-            <div className="inline-flex items-center text-xl leading-7 text-gray-300 sm:text-2xl sm:leading-9 sm:truncate">
+      <div className="slider-header">
+        {linkUrl ? (
+          <Link href={linkUrl}>
+            <a className="slider-title">
               <span>{title}</span>
-            </div>
-          )}
-        </div>
+              <svg
+                className="w-6 h-6 ml-2"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+            </a>
+          </Link>
+        ) : (
+          <div className="slider-title">
+            <span>{title}</span>
+          </div>
+        )}
       </div>
       <Slider
         sliderKey={sliderKey}

src/components/MovieDetails/MovieRecommendations.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import useSWR, { useSWRInfinite } from 'swr';
+import useSWR from 'swr';
 import type { MovieResult } from '../../../server/models/Search';
 import ListView from '../Common/ListView';
 import { useRouter } from 'next/router';
@@ -7,75 +7,38 @@ import Header from '../Common/Header';
 import type { MovieDetails } from '../../../server/models/Movie';
 import { LanguageContext } from '../../context/LanguageContext';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
-import useSettings from '../../hooks/useSettings';
-import { MediaStatus } from '../../../server/constants/media';
 import PageTitle from '../Common/PageTitle';
+import useDiscover from '../../hooks/useDiscover';
+import Error from '../../pages/_error';
 
 const messages = defineMessages({
   recommendations: 'Recommendations',
   recommendationssubtext: 'If you liked {title}, you might also like…',
 });
 
-interface SearchResult {
-  page: number;
-  totalResults: number;
-  totalPages: number;
-  results: MovieResult[];
-}
-
 const MovieRecommendations: React.FC = () => {
-  const settings = useSettings();
   const intl = useIntl();
   const router = useRouter();
   const { locale } = useContext(LanguageContext);
   const { data: movieData, error: movieError } = useSWR<MovieDetails>(
     `/api/v1/movie/${router.query.movieId}?language=${locale}`
   );
-  const { data, error, size, setSize } = useSWRInfinite<SearchResult>(
-    (pageIndex: number, previousPageData: SearchResult | null) => {
-      if (previousPageData && pageIndex + 1 > previousPageData.totalPages) {
-        return null;
-      }
-
-      return `/api/v1/movie/${router.query.movieId}/recommendations?page=${
-        pageIndex + 1
-      }&language=${locale}`;
-    },
-    {
-      initialSize: 3,
-    }
+  const {
+    isLoadingInitialData,
+    isEmpty,
+    isLoadingMore,
+    isReachingEnd,
+    titles,
+    fetchMore,
+    error,
+  } = useDiscover<MovieResult>(
+    `/api/v1/movie/${router.query.movieId}/recommendations`
   );
 
-  const isLoadingInitialData = !data && !error;
-  const isLoadingMore =
-    isLoadingInitialData ||
-    (size > 0 && data && typeof data[size - 1] === 'undefined');
-
-  const fetchMore = () => {
-    setSize(size + 1);
-  };
-
   if (error) {
-    return <div>{error}</div>;
+    return <Error statusCode={500} />;
   }
 
-  let titles = (data ?? []).reduce(
-    (a, v) => [...a, ...v.results],
-    [] as MovieResult[]
-  );
-
-  if (settings.currentSettings.hideAvailable) {
-    titles = titles.filter(
-      (i) =>
-        i.mediaInfo?.status !== MediaStatus.AVAILABLE &&
-        i.mediaInfo?.status !== MediaStatus.PARTIALLY_AVAILABLE
-    );
-  }
-
-  const isEmpty = !isLoadingInitialData && titles?.length === 0;
-  const isReachingEnd =
-    isEmpty || (data && data[data.length - 1]?.results.length < 20);
-
   return (
     <>
       <PageTitle

src/components/MovieDetails/MovieSimilar.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import useSWR, { useSWRInfinite } from 'swr';
+import useSWR from 'swr';
 import type { MovieResult } from '../../../server/models/Search';
 import ListView from '../Common/ListView';
 import { useRouter } from 'next/router';
@@ -7,75 +7,36 @@ import Header from '../Common/Header';
 import { LanguageContext } from '../../context/LanguageContext';
 import type { MovieDetails } from '../../../server/models/Movie';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
-import { MediaStatus } from '../../../server/constants/media';
-import useSettings from '../../hooks/useSettings';
 import PageTitle from '../Common/PageTitle';
+import useDiscover from '../../hooks/useDiscover';
+import Error from '../../pages/_error';
 
 const messages = defineMessages({
   similar: 'Similar Titles',
   similarsubtext: 'Other movies similar to {title}',
 });
 
-interface SearchResult {
-  page: number;
-  totalResults: number;
-  totalPages: number;
-  results: MovieResult[];
-}
-
 const MovieSimilar: React.FC = () => {
-  const settings = useSettings();
   const router = useRouter();
   const intl = useIntl();
   const { locale } = useContext(LanguageContext);
   const { data: movieData, error: movieError } = useSWR<MovieDetails>(
     `/api/v1/movie/${router.query.movieId}?language=${locale}`
   );
-  const { data, error, size, setSize } = useSWRInfinite<SearchResult>(
-    (pageIndex: number, previousPageData: SearchResult | null) => {
-      if (previousPageData && pageIndex + 1 > previousPageData.totalPages) {
-        return null;
-      }
-
-      return `/api/v1/movie/${router.query.movieId}/similar?page=${
-        pageIndex + 1
-      }&language=${locale}`;
-    },
-    {
-      initialSize: 3,
-    }
-  );
-
-  const isLoadingInitialData = !data && !error;
-  const isLoadingMore =
-    isLoadingInitialData ||
-    (size > 0 && data && typeof data[size - 1] === 'undefined');
-
-  const fetchMore = () => {
-    setSize(size + 1);
-  };
+  const {
+    isLoadingInitialData,
+    isEmpty,
+    isLoadingMore,
+    isReachingEnd,
+    titles,
+    fetchMore,
+    error,
+  } = useDiscover<MovieResult>(`/api/v1/movie/${router.query.movieId}/similar`);
 
   if (error) {
-    return <div>{error}</div>;
+    return <Error statusCode={500} />;
   }
 
-  let titles = (data ?? []).reduce(
-    (a, v) => [...a, ...v.results],
-    [] as MovieResult[]
-  );
-
-  if (settings.currentSettings.hideAvailable) {
-    titles = titles.filter(
-      (i) =>
-        i.mediaInfo?.status !== MediaStatus.AVAILABLE &&
-        i.mediaInfo?.status !== MediaStatus.PARTIALLY_AVAILABLE
-    );
-  }
-
-  const isEmpty = !isLoadingInitialData && titles?.length === 0;
-  const isReachingEnd =
-    isEmpty || (data && data[data.length - 1]?.results.length < 20);
-
   return (
     <>
       <PageTitle

src/components/MovieDetails/index.tsx

@@ -60,10 +60,11 @@ const messages = defineMessages({
   manageModalNoRequests: 'No Requests',
   manageModalClearMedia: 'Clear All Media Data',
   manageModalClearMediaWarning:
-    'This will irreversibly remove all data for this movie, including any requests. If this item exists in your Plex library, the media information will be recreated during the next sync.',
+    'This will irreversibly remove all data for this movie, including any requests.\
+    If this item exists in your Plex library, the media information will be recreated during the next scan.',
   approve: 'Approve',
   decline: 'Decline',
-  studio: 'Studio',
+  studio: '{studioCount, plural, one {Studio} other {Studios}}',
   viewfullcrew: 'View Full Crew',
   view: 'View',
   areyousure: 'Are you sure?',
@@ -187,7 +188,19 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
   }
 
   if (data.genres.length) {
-    movieAttributes.push(data.genres.map((g) => g.name).join(', '));
+    movieAttributes.push(
+      data.genres
+        .map((g) => (
+          <Link href={`/discover/movies/genre/${g.id}`} key={`genre-${g.id}`}>
+            <a className="hover:underline">{g.name}</a>
+          </Link>
+        ))
+        .reduce((prev, curr) => (
+          <>
+            {prev}, {curr}
+          </>
+        ))
+    );
   }
 
   return (
@@ -638,29 +651,46 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                 </span>
               </div>
             )}
-            {data.spokenLanguages.some(
-              (lng) => lng.iso_639_1 === data.originalLanguage
-            ) && (
+            {data.originalLanguage && (
               <div className="flex px-4 py-2 border-b border-gray-800 last:border-b-0">
                 <span className="text-sm">
                   {intl.formatMessage(messages.originallanguage)}
                 </span>
                 <span className="flex-1 text-sm text-right text-gray-400">
-                  {
-                    data.spokenLanguages.find(
-                      (lng) => lng.iso_639_1 === data.originalLanguage
-                    )?.name
-                  }
+                  <Link
+                    href={`/discover/movies/language/${data.originalLanguage}`}
+                  >
+                    <a className="hover:underline">
+                      {intl.formatDisplayName(data.originalLanguage, {
+                        type: 'language',
+                        fallback: 'none',
+                      }) ??
+                        data.spokenLanguages.find(
+                          (lng) => lng.iso_639_1 === data.originalLanguage
+                        )?.name}
+                    </a>
+                  </Link>
                 </span>
               </div>
             )}
-            {data.productionCompanies[0] && (
+            {data.productionCompanies.length > 0 && (
               <div className="flex px-4 py-2 border-b border-gray-800 last:border-b-0">
                 <span className="text-sm">
-                  {intl.formatMessage(messages.studio)}
+                  {intl.formatMessage(messages.studio, {
+                    studioCount: data.productionCompanies.length,
+                  })}
                 </span>
                 <span className="flex-1 text-sm text-right text-gray-400">
-                  {data.productionCompanies[0]?.name}
+                  {data.productionCompanies.map((s) => {
+                    return (
+                      <Link
+                        href={`/discover/movies/studio/${s.id}`}
+                        key={`studio-${s.id}`}
+                      >
+                        <a className="block hover:underline">{s.name}</a>
+                      </Link>
+                    );
+                  })}
                 </span>
               </div>
             )}

src/components/NotificationTypeSelector/index.tsx

@@ -8,16 +8,19 @@ const messages = defineMessages({
     'Sends a notification when media is requested and requires approval.',
   mediaapproved: 'Media Approved',
   mediaapprovedDescription:
-    'Sends a notification when media is approved.\
-    By default, automatically approved requests will not trigger notifications.',
+    'Sends a notification when requested media is manually approved.',
+  mediaAutoApproved: 'Media Automatically Approved',
+  mediaAutoApprovedDescription:
+    'Sends a notification when requested media is automatically approved.',
   mediaavailable: 'Media Available',
   mediaavailableDescription:
-    'Sends a notification when media becomes available.',
+    'Sends a notification when requested media becomes available.',
   mediafailed: 'Media Failed',
   mediafailedDescription:
-    'Sends a notification when media fails to be added to Radarr or Sonarr.',
+    'Sends a notification when requested media fails to be added to Radarr or Sonarr.',
   mediadeclined: 'Media Declined',
-  mediadeclinedDescription: 'Sends a notification when a request is declined.',
+  mediadeclinedDescription:
+    'Sends a notification when a media request is declined.',
 });
 
 export const hasNotificationType = (
@@ -46,6 +49,7 @@ export enum Notification {
   MEDIA_FAILED = 16,
   TEST_NOTIFICATION = 32,
   MEDIA_DECLINED = 64,
+  MEDIA_AUTO_APPROVED = 128,
 }
 
 export interface NotificationItem {
@@ -74,6 +78,12 @@ const NotificationTypeSelector: React.FC<NotificationTypeSelectorProps> = ({
       description: intl.formatMessage(messages.mediarequestedDescription),
       value: Notification.MEDIA_PENDING,
     },
+    {
+      id: 'media-auto-approved',
+      name: intl.formatMessage(messages.mediaAutoApproved),
+      description: intl.formatMessage(messages.mediaAutoApprovedDescription),
+      value: Notification.MEDIA_AUTO_APPROVED,
+    },
     {
       id: 'media-approved',
       name: intl.formatMessage(messages.mediaapproved),

src/components/PermissionOption/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { hasPermission } from '../../../server/lib/permissions';
 import { Permission, User } from '../../hooks/useUser';
+import useSettings from '../../hooks/useSettings';
 
 export interface PermissionItem {
   id: string;
@@ -33,6 +34,8 @@ const PermissionOption: React.FC<PermissionOptionProps> = ({
   onUpdate,
   parent,
 }) => {
+  const settings = useSettings();
+
   const autoApprovePermissions = [
     Permission.AUTO_APPROVE,
     Permission.AUTO_APPROVE_MOVIE,
@@ -42,34 +45,70 @@ const PermissionOption: React.FC<PermissionOptionProps> = ({
     Permission.AUTO_APPROVE_4K_TV,
   ];
 
+  let disabled = false;
+  let checked = hasPermission(option.permission, currentPermission);
+
+  if (
+    // Permissions for user ID 1 (Plex server owner) cannot be changed
+    (currentUser && currentUser.id === 1) ||
+    // Admin permission automatically bypasses/grants all other permissions
+    (option.permission !== Permission.ADMIN &&
+      hasPermission(Permission.ADMIN, currentPermission)) ||
+    // Manage Requests permission automatically grants all Auto-Approve permissions
+    (autoApprovePermissions.includes(option.permission) &&
+      hasPermission(Permission.MANAGE_REQUESTS, currentPermission)) ||
+    // Selecting a parent permission automatically selects all children
+    (!!parent?.permission &&
+      hasPermission(parent.permission, currentPermission))
+  ) {
+    disabled = true;
+    checked = true;
+  }
+
+  if (
+    // Non-Admin users cannot modify the Admin permission
+    (actingUser &&
+      !hasPermission(Permission.ADMIN, actingUser.permissions) &&
+      option.permission === Permission.ADMIN) ||
+    // Users without the Manage Settings permission cannot modify/grant that permission
+    (actingUser &&
+      !hasPermission(Permission.MANAGE_SETTINGS, actingUser.permissions) &&
+      option.permission === Permission.MANAGE_SETTINGS)
+  ) {
+    disabled = true;
+  }
+
+  if (
+    // Some permissions are dependent on others; check requirements are fulfilled
+    (option.requires &&
+      !option.requires.every((requirement) =>
+        hasPermission(requirement.permissions, currentPermission, {
+          type: requirement.type ?? 'and',
+        })
+      )) ||
+    // Request 4K and Auto-Approve 4K require both 4K movie & 4K series requests to be enabled
+    ((option.permission === Permission.REQUEST_4K ||
+      option.permission === Permission.AUTO_APPROVE_4K) &&
+      (!settings.currentSettings.movie4kEnabled ||
+        !settings.currentSettings.series4kEnabled)) ||
+    // Request 4K Movie and Auto-Approve 4K Movie require 4K movie requests to be enabled
+    ((option.permission === Permission.REQUEST_4K_MOVIE ||
+      option.permission === Permission.AUTO_APPROVE_4K_MOVIE) &&
+      !settings.currentSettings.movie4kEnabled) ||
+    // Request 4K Series and Auto-Approve 4K Series require 4K series requests to be enabled
+    ((option.permission === Permission.REQUEST_4K_TV ||
+      option.permission === Permission.AUTO_APPROVE_4K_TV) &&
+      !settings.currentSettings.series4kEnabled)
+  ) {
+    disabled = true;
+    checked = false;
+  }
+
   return (
     <>
       <div
         className={`relative flex items-start first:mt-0 mt-4 ${
-          (currentUser && currentUser.id === 1) ||
-          (option.permission !== Permission.ADMIN &&
-            hasPermission(Permission.ADMIN, currentPermission)) ||
-          (autoApprovePermissions.includes(option.permission) &&
-            hasPermission(Permission.MANAGE_REQUESTS, currentPermission)) ||
-          (!!parent?.permission &&
-            hasPermission(parent.permission, currentPermission)) ||
-          (actingUser &&
-            !hasPermission(Permission.ADMIN, actingUser.permissions) &&
-            option.permission === Permission.ADMIN) ||
-          (actingUser &&
-            !hasPermission(
-              Permission.MANAGE_SETTINGS,
-              actingUser.permissions
-            ) &&
-            option.permission === Permission.MANAGE_SETTINGS) ||
-          (option.requires &&
-            !option.requires.every((requirement) =>
-              hasPermission(requirement.permissions, currentPermission, {
-                type: requirement.type ?? 'and',
-              })
-            ))
-            ? 'opacity-50'
-            : ''
+          disabled ? 'opacity-50' : ''
         }`}
       >
         <div className="flex items-center h-6">
@@ -77,30 +116,7 @@ const PermissionOption: React.FC<PermissionOptionProps> = ({
             id={option.id}
             name="permissions"
             type="checkbox"
-            disabled={
-              (currentUser && currentUser.id === 1) ||
-              (option.permission !== Permission.ADMIN &&
-                hasPermission(Permission.ADMIN, currentPermission)) ||
-              (autoApprovePermissions.includes(option.permission) &&
-                hasPermission(Permission.MANAGE_REQUESTS, currentPermission)) ||
-              (!!parent?.permission &&
-                hasPermission(parent.permission, currentPermission)) ||
-              (actingUser &&
-                !hasPermission(Permission.ADMIN, actingUser.permissions) &&
-                option.permission === Permission.ADMIN) ||
-              (actingUser &&
-                !hasPermission(
-                  Permission.MANAGE_SETTINGS,
-                  actingUser.permissions
-                ) &&
-                option.permission === Permission.MANAGE_SETTINGS) ||
-              (option.requires &&
-                !option.requires.every((requirement) =>
-                  hasPermission(requirement.permissions, currentPermission, {
-                    type: requirement.type ?? 'and',
-                  })
-                ))
-            }
+            disabled={disabled}
             onChange={() => {
               onUpdate(
                 hasPermission(option.permission, currentPermission)
@@ -108,22 +124,7 @@ const PermissionOption: React.FC<PermissionOptionProps> = ({
                   : currentPermission + option.permission
               );
             }}
-            checked={
-              (hasPermission(option.permission, currentPermission) ||
-                (!!parent?.permission &&
-                  hasPermission(parent.permission, currentPermission)) ||
-                (autoApprovePermissions.includes(option.permission) &&
-                  hasPermission(
-                    Permission.MANAGE_REQUESTS,
-                    currentPermission
-                  ))) &&
-              (!option.requires ||
-                option.requires.every((requirement) =>
-                  hasPermission(requirement.permissions, currentPermission, {
-                    type: requirement.type ?? 'and',
-                  })
-                ))
-            }
+            checked={checked}
           />
         </div>
         <div className="ml-3 text-sm leading-6">

src/components/PersonCard/index.tsx

@@ -37,8 +37,10 @@ const PersonCard: React.FC<PersonCardProps> = ({
         <div
           className={`relative ${
             canExpand ? 'w-full' : 'w-36 sm:w-36 md:w-44'
-          } rounded-lg text-white shadow-lg transition ease-in-out duration-150 cursor-pointer transform-gpu ${
-            isHovered ? 'bg-gray-600 scale-105' : 'bg-gray-700 scale-100'
+          } rounded-xl text-white shadow transition ease-in-out duration-150 cursor-pointer transform-gpu ring-1 ${
+            isHovered
+              ? 'bg-gray-700 scale-105 ring-gray-500'
+              : 'bg-gray-800 scale-100 ring-gray-700'
           }`}
         >
           <div style={{ paddingBottom: '150%' }}>
@@ -47,7 +49,7 @@ const PersonCard: React.FC<PersonCardProps> = ({
                 {profilePath ? (
                   <img
                     src={`https://image.tmdb.org/t/p/w600_and_h900_bestv2${profilePath}`}
-                    className="object-cover w-3/4 h-full bg-center bg-cover rounded-full"
+                    className="object-cover w-3/4 h-full bg-center bg-cover rounded-full ring-1 ring-gray-700"
                     alt=""
                   />
                 ) : (
@@ -79,7 +81,11 @@ const PersonCard: React.FC<PersonCardProps> = ({
                   {subName}
                 </div>
               )}
-              <div className="absolute bottom-0 left-0 right-0 h-12 rounded-b-lg bg-gradient-to-t from-gray-700" />
+              <div
+                className={`absolute bottom-0 left-0 right-0 h-12 rounded-b-xl bg-gradient-to-t ${
+                  isHovered ? 'from-gray-800' : 'from-gray-900'
+                }`}
+              />
             </div>
           </div>
         </div>

src/components/RequestBlock/index.tsx

@@ -10,7 +10,7 @@ import RequestModal from '../RequestModal';
 import useRequestOverride from '../../hooks/useRequestOverride';
 
 const messages = defineMessages({
-  seasons: 'Seasons',
+  seasons: '{seasonCount, plural, one {Season} other {Seasons}}',
   requestoverrides: 'Request Overrides',
   server: 'Server',
   profilechanged: 'Profile Changed',
@@ -65,12 +65,12 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
           setShowEditModal(false);
         }}
       />
-      <div className="px-4 py-4">
+      <div className="px-4 py-4 text-gray-300">
         <div className="flex items-center justify-between">
-          <div className="flex-col items-center flex-1 min-w-0 mr-6 text-sm leading-5 text-gray-300">
+          <div className="flex-col items-center flex-1 min-w-0 mr-6 text-sm leading-5">
             <div className="flex mb-1 flex-nowrap white">
               <svg
-                className="min-w-0 flex-shrink-0 mr-1.5 h-5 w-5 text-gray-300"
+                className="min-w-0 flex-shrink-0 mr-1.5 h-5 w-5"
                 fill="currentColor"
                 viewBox="0 0 20 20"
                 xmlns="http://www.w3.org/2000/svg"
@@ -88,7 +88,7 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
             {request.modifiedBy && (
               <div className="flex flex-nowrap">
                 <svg
-                  className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-300"
+                  className="flex-shrink-0 mr-1.5 h-5 w-5"
                   fill="currentColor"
                   viewBox="0 0 20 20"
                   xmlns="http://www.w3.org/2000/svg"
@@ -191,7 +191,7 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
         </div>
         <div className="mt-2 sm:flex sm:justify-between">
           <div className="sm:flex">
-            <div className="flex items-center mr-6 text-sm leading-5 text-gray-300">
+            <div className="flex items-center mr-6 text-sm leading-5">
               {request.is4k && (
                 <span className="mr-1">
                   <Badge badgeType="warning">4K</Badge>
@@ -214,9 +214,9 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
               )}
             </div>
           </div>
-          <div className="flex items-center mt-2 text-sm leading-5 text-gray-300 sm:mt-0">
+          <div className="flex items-center mt-2 text-sm leading-5 sm:mt-0">
             <svg
-              className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-300"
+              className="flex-shrink-0 mr-1.5 h-5 w-5"
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 20 20"
               fill="currentColor"
@@ -234,7 +234,11 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
         </div>
         {(request.seasons ?? []).length > 0 && (
           <div className="flex flex-col mt-2 text-sm">
-            <div className="mb-2">{intl.formatMessage(messages.seasons)}</div>
+            <div className="mb-1 font-medium">
+              {intl.formatMessage(messages.seasons, {
+                seasonCount: request.seasons.length,
+              })}
+            </div>
             <div>
               {request.seasons.map((season) => (
                 <span

src/components/RequestCard/index.tsx

@@ -5,7 +5,10 @@ import type { TvDetails } from '../../../server/models/Tv';
 import type { MovieDetails } from '../../../server/models/Movie';
 import useSWR from 'swr';
 import { LanguageContext } from '../../context/LanguageContext';
-import { MediaRequestStatus } from '../../../server/constants/media';
+import {
+  MediaRequestStatus,
+  MediaStatus,
+} from '../../../server/constants/media';
 import Badge from '../Common/Badge';
 import { useUser, Permission } from '../../hooks/useUser';
 import axios from 'axios';
@@ -17,7 +20,8 @@ import globalMessages from '../../i18n/globalMessages';
 import StatusBadge from '../StatusBadge';
 
 const messages = defineMessages({
-  seasons: 'Seasons',
+  status: 'Status',
+  seasons: '{seasonCount, plural, one {Season} other {Seasons}}',
   all: 'All',
 });
 
@@ -27,7 +31,7 @@ const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => {
 
 const RequestCardPlaceholder: React.FC = () => {
   return (
-    <div className="relative p-4 bg-gray-700 rounded-lg w-72 sm:w-96 animate-pulse">
+    <div className="relative p-4 bg-gray-700 rounded-xl w-72 sm:w-96 animate-pulse">
       <div className="w-20 sm:w-28">
         <div className="w-full" style={{ paddingBottom: '150%' }} />
       </div>
@@ -94,60 +98,49 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
 
   return (
     <div
-      className="relative flex p-4 text-gray-400 bg-gray-800 bg-center bg-cover rounded-md w-72 sm:w-96"
+      className="relative flex p-4 text-gray-400 bg-gray-700 bg-center bg-cover shadow rounded-xl w-72 sm:w-96 ring-1 ring-gray-700"
       style={{
-        backgroundImage: `linear-gradient(180deg, rgba(17, 24, 39, 0.47) 0%, rgba(17, 24, 39, 1) 100%), url(//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${title.backdropPath})`,
+        backgroundImage: `linear-gradient(135deg, rgba(17, 24, 39, 0.47) 0%, rgba(17, 24, 39, 1) 75%), url(//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${title.backdropPath})`,
       }}
     >
       <div className="flex flex-col flex-1 min-w-0 pr-4">
-        <h2 className="overflow-hidden text-base text-white cursor-pointer sm:text-lg overflow-ellipsis whitespace-nowrap hover:underline">
-          <Link
-            href={request.type === 'movie' ? '/movie/[movieId]' : '/tv/[tvId]'}
-            as={
-              request.type === 'movie'
-                ? `/movie/${request.media.tmdbId}`
-                : `/tv/${request.media.tmdbId}`
-            }
-          >
+        <Link
+          href={
+            request.type === 'movie'
+              ? `/movie/${requestData.media.tmdbId}`
+              : `/tv/${requestData.media.tmdbId}`
+          }
+        >
+          <a className="pb-0.5 sm:pb-1 overflow-hidden text-base text-white cursor-pointer sm:text-lg overflow-ellipsis whitespace-nowrap hover:underline">
             {isMovie(title) ? title.title : title.name}
-          </Link>
-        </h2>
-        <Link href={`/users/${requestData.requestedBy.id}`}>
-          <a className="flex items-center group">
-            <img
-              src={requestData.requestedBy.avatar}
-              alt=""
-              className="w-4 mr-1 rounded-full sm:mr-2 sm:w-5"
-            />
-            <span className="text-xs truncate sm:text-sm group-hover:underline">
-              {requestData.requestedBy.displayName}
-            </span>
           </a>
         </Link>
-        {requestData.media.status && (
-          <div className="mt-1 sm:mt-2">
-            <StatusBadge
-              status={
-                requestData.is4k
-                  ? requestData.media.status4k
-                  : requestData.media.status
-              }
-              is4k={requestData.is4k}
-              inProgress={
-                (
-                  requestData.media[
-                    requestData.is4k ? 'downloadStatus4k' : 'downloadStatus'
-                  ] ?? []
-                ).length > 0
-              }
-            />
-          </div>
-        )}
-        {request.seasons.length > 0 && (
-          <div className="items-center hidden mt-2 text-sm sm:flex">
-            <span className="mr-2">{intl.formatMessage(messages.seasons)}</span>
-            {!isMovie(title) &&
-            title.seasons.filter((season) => season.seasonNumber !== 0)
+        <div className="card-field">
+          <Link href={`/users/${requestData.requestedBy.id}`}>
+            <a className="flex items-center group">
+              <img
+                src={requestData.requestedBy.avatar}
+                alt=""
+                className="avatar-sm"
+              />
+              <span className="truncate group-hover:underline">
+                {requestData.requestedBy.displayName}
+              </span>
+            </a>
+          </Link>
+        </div>
+        {!isMovie(title) && request.seasons.length > 0 && (
+          <div className="sm:flex items-center my-0.5 sm:my-1 text-sm hidden">
+            <span className="mr-2 font-medium">
+              {intl.formatMessage(messages.seasons, {
+                seasonCount:
+                  title.seasons.filter((season) => season.seasonNumber !== 0)
+                    .length === request.seasons.length
+                    ? 0
+                    : request.seasons.length,
+              })}
+            </span>
+            {title.seasons.filter((season) => season.seasonNumber !== 0)
               .length === request.seasons.length ? (
               <span className="mr-2 uppercase">
                 <Badge>{intl.formatMessage(messages.all)}</Badge>
@@ -163,6 +156,34 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
             )}
           </div>
         )}
+        <div className="flex items-center mt-2 text-sm sm:mt-1">
+          <span className="hidden mr-2 font-medium sm:block">
+            {intl.formatMessage(messages.status)}
+          </span>
+          {requestData.media[requestData.is4k ? 'status4k' : 'status'] ===
+            MediaStatus.UNKNOWN ||
+          requestData.status === MediaRequestStatus.DECLINED ? (
+            <Badge badgeType="danger">
+              {requestData.status === MediaRequestStatus.DECLINED
+                ? intl.formatMessage(globalMessages.declined)
+                : intl.formatMessage(globalMessages.failed)}
+            </Badge>
+          ) : (
+            <StatusBadge
+              status={
+                requestData.media[requestData.is4k ? 'status4k' : 'status']
+              }
+              inProgress={
+                (
+                  requestData.media[
+                    requestData.is4k ? 'downloadStatus4k' : 'downloadStatus'
+                  ] ?? []
+                ).length > 0
+              }
+              is4k={requestData.is4k}
+            />
+          )}
+        </div>
         {requestData.status === MediaRequestStatus.PENDING &&
           hasPermission(Permission.MANAGE_REQUESTS) && (
             <div className="flex items-end flex-1">
@@ -215,15 +236,14 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
             </div>
           )}
       </div>
-      <div className="flex-shrink-0 w-20 sm:w-28">
-        <Link
-          href={request.type === 'movie' ? '/movie/[movieId]' : '/tv/[tvId]'}
-          as={
-            request.type === 'movie'
-              ? `/movie/${request.media.tmdbId}`
-              : `/tv/${request.media.tmdbId}`
-          }
-        >
+      <Link
+        href={
+          request.type === 'movie'
+            ? `/movie/${requestData.media.tmdbId}`
+            : `/tv/${requestData.media.tmdbId}`
+        }
+      >
+        <a className="flex-shrink-0 w-20 sm:w-28">
           <img
             src={
               title.posterPath
@@ -233,8 +253,8 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
             alt=""
             className="w-20 transition duration-300 scale-100 rounded-md shadow-sm cursor-pointer sm:w-28 transform-gpu hover:scale-105 hover:shadow-md"
           />
-        </Link>
-      </div>
+        </a>
+      </Link>
     </div>
   );
 };

src/components/RequestList/RequestItem/index.tsx

@@ -1,12 +1,7 @@
 import React, { useContext, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
 import type { MediaRequest } from '../../../../server/entity/MediaRequest';
-import {
-  useIntl,
-  FormattedDate,
-  FormattedRelativeTime,
-  defineMessages,
-} from 'react-intl';
+import { useIntl, FormattedRelativeTime, defineMessages } from 'react-intl';
 import { useUser, Permission } from '../../../hooks/useUser';
 import { LanguageContext } from '../../../context/LanguageContext';
 import type { MovieDetails } from '../../../../server/models/Movie';
@@ -14,7 +9,6 @@ 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,
   MediaStatus,
@@ -25,11 +19,18 @@ import globalMessages from '../../../i18n/globalMessages';
 import Link from 'next/link';
 import { useToasts } from 'react-toast-notifications';
 import RequestModal from '../../RequestModal';
+import ConfirmButton from '../../Common/ConfirmButton';
 
 const messages = defineMessages({
-  seasons: 'Seasons',
+  seasons: '{seasonCount, plural, one {Season} other {Seasons}}',
+  all: 'All',
   notavailable: 'N/A',
   failedretry: 'Something went wrong while retrying the request.',
+  areyousure: 'Are you sure?',
+  status: 'Status',
+  requested: 'Requested',
+  modified: 'Modified',
+  modifieduserdate: '{date} by {user}',
 });
 
 const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => {
@@ -101,22 +102,24 @@ const RequestItem: React.FC<RequestItemProps> = ({
 
   if (!title && !error) {
     return (
-      <tr className="w-full h-24 animate-pulse" ref={ref}>
-        <td colSpan={6}></td>
-      </tr>
+      <div
+        className="w-full h-64 bg-gray-800 rounded-xl lg:h-32 animate-pulse"
+        ref={ref}
+      />
     );
   }
 
   if (!title || !requestData) {
     return (
-      <tr className="w-full h-24 animate-pulse">
-        <td colSpan={6}></td>
-      </tr>
+      <div
+        className="w-full h-64 bg-gray-800 rounded-xl lg:h-32 animate-pulse"
+        ref={ref}
+      />
     );
   }
 
   return (
-    <tr className="relative w-full h-24 p-2">
+    <>
       <RequestModal
         show={showEditModal}
         tmdbId={request.media.tmdbId}
@@ -129,28 +132,17 @@ const RequestItem: React.FC<RequestItemProps> = ({
           setShowEditModal(false);
         }}
       />
-      <Table.TD>
-        <div className="flex items-center">
-          <Link
-            href={
-              request.type === 'movie'
-                ? `/movie/${request.media.tmdbId}`
-                : `/tv/${request.media.tmdbId}`
-            }
-          >
-            <a className="flex-shrink-0 hidden mr-4 sm:block">
-              <img
-                src={
-                  title.posterPath
-                    ? `//image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`
-                    : '/images/overseerr_poster_not_found.png'
-                }
-                alt=""
-                className="w-12 transition duration-300 scale-100 rounded-md shadow-sm cursor-pointer transform-gpu hover:scale-105 hover:shadow-md"
-              />
-            </a>
-          </Link>
-          <div className="flex-shrink overflow-hidden">
+      <div className="relative flex flex-col justify-between w-full py-4 overflow-hidden text-gray-400 bg-gray-800 shadow-md ring-1 ring-gray-700 rounded-xl lg:h-32 lg:flex-row">
+        <div
+          className="absolute inset-0 z-0 w-full bg-center bg-cover lg:w-2/3"
+          style={{
+            backgroundImage: title.backdropPath
+              ? `linear-gradient(90deg, rgba(31, 41, 55, 0.47) 0%, rgba(31, 41, 55, 1) 100%), url(//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${title.backdropPath})`
+              : undefined,
+          }}
+        />
+        <div className="relative flex flex-col justify-between w-full overflow-hidden sm:flex-row">
+          <div className="relative z-10 flex items-center w-full pl-4 pr-4 overflow-hidden lg:w-1/2 xl:w-7/12 2xl:w-2/3 sm:pr-0">
             <Link
               href={
                 requestData.type === 'movie'
@@ -158,219 +150,282 @@ const RequestItem: React.FC<RequestItemProps> = ({
                   : `/tv/${requestData.media.tmdbId}`
               }
             >
-              <a className="min-w-0 mr-2 text-xl text-white truncate hover:underline">
-                {isMovie(title) ? title.title : title.name}
-              </a>
-            </Link>
-            <Link href={`/users/${requestData.requestedBy.id}`}>
-              <a className="flex items-center mt-1">
+              <a className="flex-shrink-0 w-12 h-auto overflow-hidden transition duration-300 scale-100 rounded-md lg:w-14 transform-gpu hover:scale-105">
                 <img
-                  src={requestData.requestedBy.avatar}
+                  src={
+                    title.posterPath
+                      ? `//image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`
+                      : '/images/overseerr_poster_not_found.png'
+                  }
                   alt=""
-                  className="w-5 mr-2 rounded-full"
+                  className="object-cover"
                 />
-                <span className="text-sm hover:underline">
-                  {requestData.requestedBy.displayName}
-                </span>
               </a>
             </Link>
-            {requestData.seasons.length > 0 && (
-              <div className="items-center hidden mt-2 text-sm sm:flex">
-                <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 className="flex flex-col justify-center pl-2 overflow-hidden lg:pl-4">
+              <div className="card-field">
+                <Link
+                  href={
+                    requestData.type === 'movie'
+                      ? `/movie/${requestData.media.tmdbId}`
+                      : `/tv/${requestData.media.tmdbId}`
+                  }
+                >
+                  <a className="min-w-0 mr-2 text-lg text-white truncate lg:text-xl hover:underline">
+                    {isMovie(title) ? title.title : title.name}
+                  </a>
+                </Link>
               </div>
-            )}
+              <div className="card-field">
+                <Link href={`/users/${requestData.requestedBy.id}`}>
+                  <a className="flex items-center group">
+                    <img
+                      src={requestData.requestedBy.avatar}
+                      alt=""
+                      className="avatar-sm"
+                    />
+                    <span className="text-sm text-gray-300 truncate group-hover:underline">
+                      {requestData.requestedBy.displayName}
+                    </span>
+                  </a>
+                </Link>
+              </div>
+              {!isMovie(title) && request.seasons.length > 0 && (
+                <div className="card-field">
+                  <span className="card-field-name">
+                    {intl.formatMessage(messages.seasons, {
+                      seasonCount:
+                        title.seasons.filter(
+                          (season) => season.seasonNumber !== 0
+                        ).length === request.seasons.length
+                          ? 0
+                          : request.seasons.length,
+                    })}
+                  </span>
+                  {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="flex overflow-x-scroll hide-scrollbar flex-nowrap">
+                      {request.seasons.map((season) => (
+                        <span key={`season-${season.id}`} className="mr-2">
+                          <Badge>{season.seasonNumber}</Badge>
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+          <div className="z-10 flex flex-col justify-between w-full pr-4 mt-4 ml-4 text-sm sm:ml-2 sm:mt-0 lg:flex-1 lg:pr-0">
+            <div className="card-field">
+              <span className="card-field-name">
+                {intl.formatMessage(messages.status)}
+              </span>
+              {requestData.media[requestData.is4k ? 'status4k' : 'status'] ===
+                MediaStatus.UNKNOWN ||
+              requestData.status === MediaRequestStatus.DECLINED ? (
+                <Badge badgeType="danger">
+                  {requestData.status === MediaRequestStatus.DECLINED
+                    ? intl.formatMessage(globalMessages.declined)
+                    : intl.formatMessage(globalMessages.failed)}
+                </Badge>
+              ) : (
+                <StatusBadge
+                  status={
+                    requestData.media[requestData.is4k ? 'status4k' : 'status']
+                  }
+                  inProgress={
+                    (
+                      requestData.media[
+                        requestData.is4k ? 'downloadStatus4k' : 'downloadStatus'
+                      ] ?? []
+                    ).length > 0
+                  }
+                  is4k={requestData.is4k}
+                  plexUrl={requestData.media.plexUrl}
+                  plexUrl4k={requestData.media.plexUrl4k}
+                />
+              )}
+            </div>
+            <div className="card-field">
+              <span className="card-field-name">
+                {intl.formatMessage(messages.requested)}
+              </span>
+              <span className="text-gray-300">
+                {intl.formatDate(requestData.createdAt)}
+              </span>
+            </div>
+            <div className="card-field">
+              <span className="card-field-name">
+                {intl.formatMessage(messages.modified)}
+              </span>
+              <span className="truncate">
+                {requestData.modifiedBy ? (
+                  <span className="flex text-sm text-gray-300">
+                    {intl.formatMessage(messages.modifieduserdate, {
+                      date: (
+                        <FormattedRelativeTime
+                          value={Math.floor(
+                            (new Date(requestData.updatedAt).getTime() -
+                              Date.now()) /
+                              1000
+                          )}
+                          updateIntervalInSeconds={1}
+                        />
+                      ),
+                      user: (
+                        <Link href={`/users/${requestData.modifiedBy.id}`}>
+                          <a className="flex items-center group">
+                            <img
+                              src={requestData.modifiedBy.avatar}
+                              alt=""
+                              className="ml-1.5 avatar-sm"
+                            />
+                            <span className="text-sm truncate group-hover:underline">
+                              {requestData.modifiedBy.displayName}
+                            </span>
+                          </a>
+                        </Link>
+                      ),
+                    })}
+                  </span>
+                ) : (
+                  <span className="text-sm text-gray-300">N/A</span>
+                )}
+              </span>
+            </div>
           </div>
         </div>
-      </Table.TD>
-      <Table.TD>
-        {requestData.media[requestData.is4k ? 'status4k' : 'status'] ===
-          MediaStatus.UNKNOWN ||
-        requestData.status === MediaRequestStatus.DECLINED ? (
-          <Badge badgeType="danger">
-            {requestData.status === MediaRequestStatus.DECLINED
-              ? intl.formatMessage(globalMessages.declined)
-              : intl.formatMessage(globalMessages.failed)}
-          </Badge>
-        ) : (
-          <StatusBadge
-            status={requestData.media[requestData.is4k ? 'status4k' : 'status']}
-            inProgress={
-              (
-                requestData.media[
-                  requestData.is4k ? 'downloadStatus4k' : 'downloadStatus'
-                ] ?? []
-              ).length > 0
-            }
-            is4k={requestData.is4k}
-          />
-        )}
-      </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">
-              <div className="flex items-center">
-                <img
-                  src={requestData.modifiedBy.avatar}
-                  alt=""
-                  className="w-5 mr-2 rounded-full"
-                />
-                <span className="text-sm">
-                  {requestData.modifiedBy.displayName} (
-                  <FormattedRelativeTime
-                    value={Math.floor(
-                      (new Date(requestData.updatedAt).getTime() - Date.now()) /
-                        1000
-                    )}
-                    updateIntervalInSeconds={1}
-                  />
-                  )
+        <div className="z-10 flex flex-col justify-between w-full pl-4 pr-4 mt-4 space-y-2 lg:mt-0 lg:items-end lg:justify-around lg:w-96 lg:pl-0">
+          {requestData.media[requestData.is4k ? 'status4k' : 'status'] ===
+            MediaStatus.UNKNOWN &&
+            requestData.status !== MediaRequestStatus.DECLINED &&
+            hasPermission(Permission.MANAGE_REQUESTS) && (
+              <Button
+                className="w-full"
+                buttonType="primary"
+                disabled={isRetrying}
+                onClick={() => retryRequest()}
+              >
+                <svg
+                  className="w-5 h-5 mr-1"
+                  fill="currentColor"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  width="18px"
+                  height="18px"
+                >
+                  <path d="M0 0h24v24H0z" fill="none" />
+                  <path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" />
+                </svg>
+                <span className="block">
+                  {intl.formatMessage(globalMessages.retry)}
                 </span>
-              </div>
-            </span>
-          ) : (
-            <span className="text-sm text-gray-300">N/A</span>
-          )}
+              </Button>
+            )}
+          {requestData.status !== MediaRequestStatus.PENDING &&
+            hasPermission(Permission.MANAGE_REQUESTS) && (
+              <ConfirmButton
+                onClick={() => deleteRequest()}
+                confirmText={intl.formatMessage(messages.areyousure)}
+                className="w-full"
+              >
+                <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="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="block">
+                  {intl.formatMessage(globalMessages.delete)}
+                </span>
+              </ConfirmButton>
+            )}
+          {requestData.status === MediaRequestStatus.PENDING &&
+            hasPermission(Permission.MANAGE_REQUESTS) && (
+              <>
+                <div className="flex flex-row w-full space-x-2">
+                  <span className="w-full">
+                    <Button
+                      className="w-full"
+                      buttonType="success"
+                      onClick={() => modifyRequest('approve')}
+                    >
+                      <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="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="block">
+                        {intl.formatMessage(globalMessages.approve)}
+                      </span>
+                    </Button>
+                  </span>
+                  <span className="w-full">
+                    <Button
+                      className="w-full"
+                      buttonType="danger"
+                      onClick={() => modifyRequest('decline')}
+                    >
+                      <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="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="block">
+                        {intl.formatMessage(globalMessages.decline)}
+                      </span>
+                    </Button>
+                  </span>
+                </div>
+                <span className="w-full">
+                  <Button
+                    className="w-full"
+                    buttonType="primary"
+                    onClick={() => setShowEditModal(true)}
+                  >
+                    <svg
+                      className="w-5 h-5 mr-1"
+                      fill="currentColor"
+                      viewBox="0 0 20 20"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
+                    </svg>
+                    <span className="block">
+                      {intl.formatMessage(globalMessages.edit)}
+                    </span>
+                  </Button>
+                </span>
+              </>
+            )}
         </div>
-      </Table.TD>
-      <Table.TD alignText="right">
-        {requestData.media[requestData.is4k ? 'status4k' : 'status'] ===
-          MediaStatus.UNKNOWN &&
-          requestData.status !== MediaRequestStatus.DECLINED &&
-          hasPermission(Permission.MANAGE_REQUESTS) && (
-            <Button
-              className="mr-2"
-              buttonType="primary"
-              buttonSize="sm"
-              disabled={isRetrying}
-              onClick={() => retryRequest()}
-            >
-              <svg
-                className="w-4 h-4 mr-0 sm:mr-1"
-                fill="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                width="18px"
-                height="18px"
-              >
-                <path d="M0 0h24v24H0z" fill="none" />
-                <path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" />
-              </svg>
-              <span className="hidden sm:block">
-                {intl.formatMessage(globalMessages.retry)}
-              </span>
-            </Button>
-          )}
-        {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 className="mr-2">
-                <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>
-              <span>
-                <Button
-                  buttonType="primary"
-                  buttonSize="sm"
-                  onClick={() => setShowEditModal(true)}
-                >
-                  <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 d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
-                  </svg>
-                  <span className="hidden sm:block">
-                    {intl.formatMessage(globalMessages.edit)}
-                  </span>
-                </Button>
-              </span>
-            </>
-          )}
-      </Table.TD>
-    </tr>
+      </div>
+    </>
   );
 };
 

src/components/RequestList/index.tsx

@@ -1,20 +1,16 @@
-import React, { useState } from 'react';
+import React, { useEffect, 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';
 import PageTitle from '../Common/PageTitle';
+import { useRouter } from 'next/router';
 
 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',
   resultsperpage: 'Display {pageSize} results per page',
@@ -35,17 +31,46 @@ type Filter = 'all' | 'pending' | 'approved' | 'processing' | 'available';
 type Sort = 'added' | 'modified';
 
 const RequestList: React.FC = () => {
+  const router = useRouter();
   const intl = useIntl();
-  const [pageIndex, setPageIndex] = useState(0);
   const [currentFilter, setCurrentFilter] = useState<Filter>('pending');
   const [currentSort, setCurrentSort] = useState<Sort>('added');
   const [currentPageSize, setCurrentPageSize] = useState<number>(10);
 
+  const page = router.query.page ? Number(router.query.page) : 1;
+  const pageIndex = page - 1;
+
   const { data, error, revalidate } = useSWR<RequestResultsResponse>(
     `/api/v1/request?take=${currentPageSize}&skip=${
       pageIndex * currentPageSize
     }&filter=${currentFilter}&sort=${currentSort}`
   );
+
+  // Restore last set filter values on component mount
+  useEffect(() => {
+    const filterString = window.localStorage.getItem('rl-filter-settings');
+
+    if (filterString) {
+      const filterSettings = JSON.parse(filterString);
+
+      setCurrentFilter(filterSettings.currentFilter);
+      setCurrentSort(filterSettings.currentSort);
+      setCurrentPageSize(filterSettings.currentPageSize);
+    }
+  }, []);
+
+  // Set fitler values to local storage any time they are changed
+  useEffect(() => {
+    window.localStorage.setItem(
+      'rl-filter-settings',
+      JSON.stringify({
+        currentFilter,
+        currentSort,
+        currentPageSize,
+      })
+    );
+  }, [currentFilter, currentSort, currentPageSize]);
+
   if (!data && !error) {
     return <LoadingSpinner />;
   }
@@ -60,7 +85,7 @@ const RequestList: React.FC = () => {
   return (
     <>
       <PageTitle title={intl.formatMessage(messages.requests)} />
-      <div className="flex flex-col justify-between lg:items-end lg:flex-row">
+      <div className="flex flex-col justify-between mb-4 lg:items-end lg:flex-row">
         <Header>{intl.formatMessage(messages.requests)}</Header>
         <div className="flex flex-col flex-grow mt-2 sm:flex-row lg:flex-grow-0">
           <div className="flex flex-grow mb-2 sm:mb-0 sm:mr-2 lg:flex-grow-0">
@@ -82,8 +107,8 @@ const RequestList: React.FC = () => {
               id="filter"
               name="filter"
               onChange={(e) => {
-                setPageIndex(0);
                 setCurrentFilter(e.target.value as Filter);
+                router.push(router.pathname);
               }}
               value={currentFilter}
               className="rounded-r-only"
@@ -120,12 +145,8 @@ const RequestList: React.FC = () => {
               id="sort"
               name="sort"
               onChange={(e) => {
-                setPageIndex(0);
-                setCurrentSort(e.target.value as Sort);
-              }}
-              onBlur={(e) => {
-                setPageIndex(0);
                 setCurrentSort(e.target.value as Sort);
+                router.push(router.pathname);
               }}
               value={currentSort}
               className="rounded-r-only"
@@ -140,114 +161,109 @@ const RequestList: React.FC = () => {
           </div>
         </div>
       </div>
-      <Table>
-        <thead>
-          <tr>
-            <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>
-          </tr>
-        </thead>
-        <Table.TBody>
-          {data.results.map((request) => {
-            return (
-              <RequestItem
-                request={request}
-                key={`request-list-${request.id}`}
-                revalidateList={() => revalidate()}
-              />
-            );
-          })}
+      {data.results.map((request) => {
+        return (
+          <div className="py-2" key={`request-list-${request.id}`}>
+            <RequestItem
+              request={request}
+              revalidateList={() => revalidate()}
+            />
+          </div>
+        );
+      })}
 
-          {data.results.length === 0 && (
-            <tr className="relative h-24 p-2 text-white">
-              <Table.TD colSpan={6} noPadding>
-                <div className="flex flex-col items-center justify-center w-screen p-6 lg:w-full">
-                  <span className="text-base">
-                    {intl.formatMessage(messages.noresults)}
-                  </span>
-                  {currentFilter !== 'all' && (
-                    <div className="mt-4">
-                      <Button
-                        buttonSize="sm"
-                        buttonType="primary"
-                        onClick={() => setCurrentFilter('all')}
-                      >
-                        {intl.formatMessage(messages.showallrequests)}
-                      </Button>
-                    </div>
-                  )}
-                </div>
-              </Table.TD>
-            </tr>
-          )}
-          <tr className="bg-gray-700">
-            <Table.TD colSpan={6} noPadding>
-              <nav
-                className="flex flex-col items-center w-screen px-6 py-3 space-x-4 space-y-3 sm:space-y-0 sm:flex-row lg:w-full"
-                aria-label="Pagination"
+      {data.results.length === 0 && (
+        <div className="flex flex-col items-center justify-center w-full py-24 text-white">
+          <span className="text-2xl text-gray-400">
+            {intl.formatMessage(messages.noresults)}
+          </span>
+          {currentFilter !== 'all' && (
+            <div className="mt-4">
+              <Button
+                buttonType="primary"
+                onClick={() => setCurrentFilter('all')}
               >
-                <div className="hidden lg:flex lg:flex-1">
-                  <p className="text-sm">
-                    {data.results.length > 0 &&
-                      intl.formatMessage(messages.showingresults, {
-                        from: pageIndex * currentPageSize + 1,
-                        to:
-                          data.results.length < currentPageSize
-                            ? pageIndex * currentPageSize + data.results.length
-                            : (pageIndex + 1) * currentPageSize,
-                        total: data.pageInfo.results,
-                        strong: function strong(msg) {
-                          return <span className="font-medium">{msg}</span>;
-                        },
-                      })}
-                  </p>
-                </div>
-                <div className="flex justify-center sm:flex-1 sm:justify-start lg:justify-center">
-                  <span className="items-center -mt-3 text-sm sm:-ml-4 lg:ml-0 sm:mt-0">
-                    {intl.formatMessage(messages.resultsperpage, {
-                      pageSize: (
-                        <select
-                          id="pageSize"
-                          name="pageSize"
-                          onChange={(e) => {
-                            setPageIndex(0);
-                            setCurrentPageSize(Number(e.target.value));
-                          }}
-                          value={currentPageSize}
-                          className="inline short"
-                        >
-                          <option value="5">5</option>
-                          <option value="10">10</option>
-                          <option value="25">25</option>
-                          <option value="50">50</option>
-                          <option value="100">100</option>
-                        </select>
-                      ),
-                    })}
-                  </span>
-                </div>
-                <div className="flex justify-center flex-auto space-x-2 sm:justify-end sm:flex-1">
-                  <Button
-                    disabled={!hasPrevPage}
-                    onClick={() => setPageIndex((current) => current - 1)}
+                {intl.formatMessage(messages.showallrequests)}
+              </Button>
+            </div>
+          )}
+        </div>
+      )}
+      <div className="actions">
+        <nav
+          className="flex flex-col items-center mb-3 space-y-3 sm:space-y-0 sm:flex-row"
+          aria-label="Pagination"
+        >
+          <div className="hidden lg:flex lg:flex-1">
+            <p className="text-sm">
+              {data.results.length > 0 &&
+                intl.formatMessage(messages.showingresults, {
+                  from: pageIndex * currentPageSize + 1,
+                  to:
+                    data.results.length < currentPageSize
+                      ? pageIndex * currentPageSize + data.results.length
+                      : (pageIndex + 1) * currentPageSize,
+                  total: data.pageInfo.results,
+                  strong: function strong(msg) {
+                    return <span className="font-medium">{msg}</span>;
+                  },
+                })}
+            </p>
+          </div>
+          <div className="flex justify-center sm:flex-1 sm:justify-start lg:justify-center">
+            <span className="items-center -mt-3 text-sm truncate sm:mt-0">
+              {intl.formatMessage(messages.resultsperpage, {
+                pageSize: (
+                  <select
+                    id="pageSize"
+                    name="pageSize"
+                    onChange={(e) => {
+                      setCurrentPageSize(Number(e.target.value));
+                      router
+                        .push(router.pathname)
+                        .then(() => window.scrollTo(0, 0));
+                    }}
+                    value={currentPageSize}
+                    className="inline short"
                   >
-                    {intl.formatMessage(messages.previous)}
-                  </Button>
-                  <Button
-                    disabled={!hasNextPage}
-                    onClick={() => setPageIndex((current) => current + 1)}
-                  >
-                    {intl.formatMessage(messages.next)}
-                  </Button>
-                </div>
-              </nav>
-            </Table.TD>
-          </tr>
-        </Table.TBody>
-      </Table>
+                    <option value="5">5</option>
+                    <option value="10">10</option>
+                    <option value="25">25</option>
+                    <option value="50">50</option>
+                    <option value="100">100</option>
+                  </select>
+                ),
+              })}
+            </span>
+          </div>
+          <div className="flex justify-center flex-auto space-x-2 sm:justify-end sm:flex-1">
+            <Button
+              disabled={!hasPrevPage}
+              onClick={() =>
+                router
+                  .push(`${router.pathname}?page=${page - 1}`, undefined, {
+                    shallow: true,
+                  })
+                  .then(() => window.scrollTo(0, 0))
+              }
+            >
+              {intl.formatMessage(messages.previous)}
+            </Button>
+            <Button
+              disabled={!hasNextPage}
+              onClick={() =>
+                router
+                  .push(`${router.pathname}?page=${page + 1}`, undefined, {
+                    shallow: true,
+                  })
+                  .then(() => window.scrollTo(0, 0))
+              }
+            >
+              {intl.formatMessage(messages.next)}
+            </Button>
+          </div>
+        </nav>
+      </div>
     </>
   );
 };

src/components/ResetPassword/RequestResetLink.tsx

@@ -102,7 +102,7 @@ const ResetPassword: React.FC = () => {
                           {intl.formatMessage(messages.email)}
                         </label>
                         <div className="mt-1 mb-2 sm:mt-0 sm:col-span-2">
-                          <div className="flex max-w-lg rounded-md shadow-sm">
+                          <div className="form-input-field">
                             <Field
                               id="email"
                               name="email"

src/components/ResetPassword/index.tsx

@@ -119,7 +119,7 @@ const ResetPassword: React.FC = () => {
                           {intl.formatMessage(messages.password)}
                         </label>
                         <div className="mt-1 mb-2 sm:mt-0 sm:col-span-2">
-                          <div className="flex max-w-lg rounded-md shadow-sm">
+                          <div className="form-input-field">
                             <Field
                               id="password"
                               name="password"
@@ -141,7 +141,7 @@ const ResetPassword: React.FC = () => {
                           {intl.formatMessage(messages.confirmpassword)}
                         </label>
                         <div className="mt-1 mb-2 sm:mt-0 sm:col-span-2">
-                          <div className="flex max-w-lg rounded-md shadow-sm">
+                          <div className="form-input-field">
                             <Field
                               id="confirmPassword"
                               name="confirmPassword"

src/components/Search/index.tsx

@@ -1,71 +1,46 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { useRouter } from 'next/router';
 import {
   TvResult,
   MovieResult,
   PersonResult,
 } from '../../../server/models/Search';
-import { useSWRInfinite } from 'swr';
 import ListView from '../Common/ListView';
-import { LanguageContext } from '../../context/LanguageContext';
 import { defineMessages, useIntl } from 'react-intl';
 import Header from '../Common/Header';
 import PageTitle from '../Common/PageTitle';
 import Error from '../../pages/_error';
+import useDiscover from '../../hooks/useDiscover';
 
 const messages = defineMessages({
   search: 'Search',
   searchresults: 'Search Results',
 });
 
-interface SearchResult {
-  page: number;
-  totalResults: number;
-  totalPages: number;
-  results: (MovieResult | TvResult | PersonResult)[];
-}
-
 const Search: React.FC = () => {
   const intl = useIntl();
-  const { locale } = useContext(LanguageContext);
   const router = useRouter();
-  const { data, error, size, setSize } = useSWRInfinite<SearchResult>(
-    (pageIndex: number, previousPageData: SearchResult | null) => {
-      if (previousPageData && pageIndex + 1 > previousPageData.totalPages) {
-        return null;
-      }
 
-      return `/api/v1/search/?query=${router.query.query}&page=${
-        pageIndex + 1
-      }&language=${locale}`;
-    },
+  const {
+    isLoadingInitialData,
+    isEmpty,
+    isLoadingMore,
+    isReachingEnd,
+    titles,
+    fetchMore,
+    error,
+  } = useDiscover<MovieResult | TvResult | PersonResult>(
+    `/api/v1/search`,
     {
-      initialSize: 3,
-    }
+      query: router.query.query,
+    },
+    { hideAvailable: false }
   );
 
-  const isLoadingInitialData = !data && !error;
-  const isLoadingMore =
-    isLoadingInitialData ||
-    (size > 0 && data && typeof data[size - 1] === 'undefined');
-
-  const fetchMore = () => {
-    setSize(size + 1);
-  };
-
   if (error) {
-    return <Error statusCode={error.code} />;
+    return <Error statusCode={500} />;
   }
 
-  const titles = data?.reduce(
-    (a, v) => [...a, ...v.results],
-    [] as (MovieResult | TvResult | PersonResult)[]
-  );
-
-  const isEmpty = !isLoadingInitialData && titles?.length === 0;
-  const isReachingEnd =
-    isEmpty || (data && data[data.length - 1]?.results.length < 20);
-
   return (
     <>
       <PageTitle title={intl.formatMessage(messages.search)} />

src/components/Settings/Notifications/NotificationsDiscord.tsx

@@ -13,6 +13,8 @@ const messages = defineMessages({
   save: 'Save Changes',
   saving: 'Saving…',
   agentenabled: 'Enable Agent',
+  botUsername: 'Bot Username',
+  botAvatarUrl: 'Bot Avatar URL',
   webhookUrl: 'Webhook URL',
   webhookUrlPlaceholder: 'Server Settings → Integrations → Webhooks',
   discordsettingssaved: 'Discord notification settings saved successfully!',
@@ -20,7 +22,7 @@ const messages = defineMessages({
   testsent: 'Test notification sent!',
   test: 'Test',
   notificationtypes: 'Notification Types',
-  validationWebhookUrl: 'You must provide a valid URL',
+  validationUrl: 'You must provide a valid URL',
 });
 
 const NotificationsDiscord: React.FC = () => {
@@ -31,9 +33,12 @@ const NotificationsDiscord: React.FC = () => {
   );
 
   const NotificationsDiscordSchema = Yup.object().shape({
+    botAvatarUrl: Yup.string()
+      .nullable()
+      .url(intl.formatMessage(messages.validationUrl)),
     webhookUrl: Yup.string()
-      .required(intl.formatMessage(messages.validationWebhookUrl))
-      .url(intl.formatMessage(messages.validationWebhookUrl)),
+      .required(intl.formatMessage(messages.validationUrl))
+      .url(intl.formatMessage(messages.validationUrl)),
   });
 
   if (!data && !error) {
@@ -45,6 +50,8 @@ const NotificationsDiscord: React.FC = () => {
       initialValues={{
         enabled: data.enabled,
         types: data.types,
+        botUsername: data?.options.botUsername,
+        botAvatarUrl: data?.options.botAvatarUrl,
         webhookUrl: data.options.webhookUrl,
       }}
       validationSchema={NotificationsDiscordSchema}
@@ -54,6 +61,8 @@ const NotificationsDiscord: React.FC = () => {
             enabled: values.enabled,
             types: values.types,
             options: {
+              botUsername: values.botUsername,
+              botAvatarUrl: values.botAvatarUrl,
               webhookUrl: values.webhookUrl,
             },
           });
@@ -77,6 +86,8 @@ const NotificationsDiscord: React.FC = () => {
             enabled: true,
             types: values.types,
             options: {
+              botUsername: values.botUsername,
+              botAvatarUrl: values.botAvatarUrl,
               webhookUrl: values.webhookUrl,
             },
           });
@@ -97,12 +108,48 @@ const NotificationsDiscord: React.FC = () => {
                 <Field type="checkbox" id="enabled" name="enabled" />
               </div>
             </div>
+            <div className="form-row">
+              <label htmlFor="botUsername" className="text-label">
+                {intl.formatMessage(messages.botUsername)}
+              </label>
+              <div className="form-input">
+                <div className="form-input-field">
+                  <Field
+                    id="botUsername"
+                    name="botUsername"
+                    type="text"
+                    placeholder={intl.formatMessage(messages.botUsername)}
+                  />
+                </div>
+                {errors.botUsername && touched.botUsername && (
+                  <div className="error">{errors.botUsername}</div>
+                )}
+              </div>
+            </div>
+            <div className="form-row">
+              <label htmlFor="botAvatarUrl" className="text-label">
+                {intl.formatMessage(messages.botAvatarUrl)}
+              </label>
+              <div className="form-input">
+                <div className="form-input-field">
+                  <Field
+                    id="botAvatarUrl"
+                    name="botAvatarUrl"
+                    type="text"
+                    placeholder={intl.formatMessage(messages.botAvatarUrl)}
+                  />
+                </div>
+                {errors.botAvatarUrl && touched.botAvatarUrl && (
+                  <div className="error">{errors.botAvatarUrl}</div>
+                )}
+              </div>
+            </div>
             <div className="form-row">
               <label htmlFor="name" className="text-label">
                 {intl.formatMessage(messages.webhookUrl)}
               </label>
               <div className="form-input">
-                <div className="flex max-w-lg rounded-md shadow-sm">
+                <div className="form-input-field">
                   <Field
                     id="webhookUrl"
                     name="webhookUrl"

src/components/Settings/Notifications/NotificationsEmail.tsx

@@ -32,10 +32,13 @@ const messages = defineMessages({
   senderName: 'Sender Name',
   notificationtypes: 'Notification Types',
   validationEmail: 'You must provide a valid email address',
-  emailNotificationTypesAlert: 'Notification Email Recipients',
+  emailNotificationTypesAlert: 'Email Notification Recipients',
   emailNotificationTypesAlertDescription:
-    'For the "Media Requested" and "Media Failed" notification types,\
-    notifications will only be sent to users with the "Manage Requests" permission.',
+    '<strong>Media Requested</strong>, <strong>Media Automatically Approved</strong>, and <strong>Media Failed</strong>\
+    email notifications are sent to all users with the <strong>Manage Requests</strong> permission.',
+  emailNotificationTypesAlertDescriptionPt2:
+    '<strong>Media Approved</strong>, <strong>Media Declined</strong>, and <strong>Media Available</strong>\
+    email notifications are sent to the user who submitted the request.',
 });
 
 const NotificationsEmail: React.FC = () => {
@@ -134,9 +137,34 @@ const NotificationsEmail: React.FC = () => {
               title={intl.formatMessage(messages.emailNotificationTypesAlert)}
               type="info"
             >
-              {intl.formatMessage(
-                messages.emailNotificationTypesAlertDescription
-              )}
+              <p className="mb-2">
+                {intl.formatMessage(
+                  messages.emailNotificationTypesAlertDescription,
+                  {
+                    strong: function strong(msg) {
+                      return (
+                        <strong className="font-normal text-indigo-100">
+                          {msg}
+                        </strong>
+                      );
+                    },
+                  }
+                )}
+              </p>
+              <p>
+                {intl.formatMessage(
+                  messages.emailNotificationTypesAlertDescriptionPt2,
+                  {
+                    strong: function strong(msg) {
+                      return (
+                        <strong className="font-normal text-indigo-100">
+                          {msg}
+                        </strong>
+                      );
+                    },
+                  }
+                )}
+              </p>
             </Alert>
             <Form className="section">
               <div className="form-row">
@@ -152,7 +180,7 @@ const NotificationsEmail: React.FC = () => {
                   {intl.formatMessage(messages.emailsender)}
                 </label>
                 <div className="form-input">
-                  <div className="flex max-w-lg rounded-md shadow-sm">
+                  <div className="form-input-field">
                     <Field
                       id="emailFrom"
                       name="emailFrom"
@@ -170,7 +198,7 @@ const NotificationsEmail: React.FC = () => {
                   {intl.formatMessage(messages.senderName)}
                 </label>
                 <div className="form-input">
-                  <div className="flex max-w-lg rounded-md shadow-sm">
+                  <div className="form-input-field">
                     <Field
                       id="senderName"
                       name="senderName"
@@ -185,7 +213,7 @@ const NotificationsEmail: React.FC = () => {
                   {intl.formatMessage(messages.smtpHost)}
                 </label>
                 <div className="form-input">
-                  <div className="flex max-w-lg rounded-md shadow-sm">
+                  <div className="form-input-field">
                     <Field
                       id="smtpHost"
                       name="smtpHost"
@@ -203,15 +231,13 @@ const NotificationsEmail: React.FC = () => {
                   {intl.formatMessage(messages.smtpPort)}
                 </label>
                 <div className="form-input">
-                  <div className="flex max-w-lg rounded-md shadow-sm sm:max-w-xs">
-                    <Field
-                      id="smtpPort"
-                      name="smtpPort"
-                      type="text"
-                      placeholder="465"
-                      className="short"
-                    />
-                  </div>
+                  <Field
+                    id="smtpPort"
+                    name="smtpPort"
+                    type="text"
+                    placeholder="465"
+                    className="short"
+                  />
                   {errors.smtpPort && touched.smtpPort && (
                     <div className="error">{errors.smtpPort}</div>
                   )}
@@ -245,7 +271,7 @@ const NotificationsEmail: React.FC = () => {
                   {intl.formatMessage(messages.authUser)}
                 </label>
                 <div className="form-input">
-                  <div className="flex max-w-lg rounded-md shadow-sm">
+                  <div className="form-input-field">
                     <Field id="authUser" name="authUser" type="text" />
                   </div>
                 </div>
@@ -255,7 +281,7 @@ const NotificationsEmail: React.FC = () => {
                   {intl.formatMessage(messages.authPass)}
                 </label>
                 <div className="form-input">
-                  <div className="flex max-w-lg rounded-md shadow-sm">
+                  <div className="form-input-field">
                     <Field
                       id="authPass"
                       name="authPass"

src/components/Settings/Notifications/NotificationsPushbullet/index.tsx

@@ -126,7 +126,7 @@ const NotificationsPushbullet: React.FC = () => {
                   {intl.formatMessage(messages.accessToken)}
                 </label>
                 <div className="form-input">
-                  <div className="flex max-w-lg rounded-md shadow-sm">
+                  <div className="form-input-field">
                     <Field
                       id="accessToken"
                       name="accessToken"

src/components/Settings/Notifications/NotificationsPushover/index.tsx

@@ -153,7 +153,7 @@ const NotificationsPushover: React.FC = () => {
                   {intl.formatMessage(messages.accessToken)}
                 </label>
                 <div className="form-input">
-                  <div className="flex max-w-lg rounded-md shadow-sm">
+                  <div className="form-input-field">
                     <Field
                       id="accessToken"
                       name="accessToken"
@@ -171,7 +171,7 @@ const NotificationsPushover: React.FC = () => {
                   {intl.formatMessage(messages.userToken)}
                 </label>
                 <div className="form-input">
-                  <div className="flex max-w-lg rounded-md shadow-sm">
+                  <div className="form-input-field">
                     <Field
                       id="userToken"
                       name="userToken"

src/components/Settings/Notifications/NotificationsSlack/index.tsx

@@ -129,7 +129,7 @@ const NotificationsSlack: React.FC = () => {
                   {intl.formatMessage(messages.webhookUrl)}
                 </label>
                 <div className="form-input">
-                  <div className="flex max-w-lg rounded-md shadow-sm">
+                  <div className="form-input-field">
                     <Field id="webhookUrl" name="webhookUrl" type="text" />
                   </div>
                   {errors.webhookUrl && touched.webhookUrl && (

src/components/Settings/Notifications/NotificationsTelegram.tsx

@@ -14,6 +14,7 @@ const messages = defineMessages({
   save: 'Save Changes',
   saving: 'Saving…',
   agentenabled: 'Enable Agent',
+  botUsername: 'Bot Username',
   botAPI: 'Bot Authentication Token',
   chatId: 'Chat ID',
   validationBotAPIRequired: 'You must provide a bot authentication token',
@@ -26,7 +27,7 @@ const messages = defineMessages({
   settinguptelegramDescription:
     'To configure Telegram notifications, you will need to <CreateBotLink>create a bot</CreateBotLink> and get the bot API key.\
     Additionally, you will need the chat ID for the chat to which you would like to send notifications.\
-    You can get this by adding <GetIdBotLink>@get_id_bot</GetIdBotLink> to the chat.',
+    You can find this by adding <GetIdBotLink>@get_id_bot</GetIdBotLink> to the chat and issuing the <code>/my_id</code> command.',
   notificationtypes: 'Notification Types',
   sendSilently: 'Send Silently',
   sendSilentlyTip: 'Send notifications with no sound',
@@ -43,9 +44,12 @@ const NotificationsTelegram: React.FC = () => {
     botAPI: Yup.string().required(
       intl.formatMessage(messages.validationBotAPIRequired)
     ),
-    chatId: Yup.string().required(
-      intl.formatMessage(messages.validationChatIdRequired)
-    ),
+    chatId: Yup.string()
+      .required(intl.formatMessage(messages.validationChatIdRequired))
+      .matches(
+        /^[-]?\d+$/,
+        intl.formatMessage(messages.validationChatIdRequired)
+      ),
   });
 
   if (!data && !error) {
@@ -57,6 +61,7 @@ const NotificationsTelegram: React.FC = () => {
       initialValues={{
         enabled: data?.enabled,
         types: data?.types,
+        botUsername: data?.options.botUsername,
         botAPI: data?.options.botAPI,
         chatId: data?.options.chatId,
         sendSilently: data?.options.sendSilently,
@@ -71,6 +76,7 @@ const NotificationsTelegram: React.FC = () => {
               botAPI: values.botAPI,
               chatId: values.chatId,
               sendSilently: values.sendSilently,
+              botUsername: values.botUsername,
             },
           });
           addToast(intl.formatMessage(messages.telegramsettingssaved), {
@@ -96,6 +102,7 @@ const NotificationsTelegram: React.FC = () => {
               botAPI: values.botAPI,
               chatId: values.chatId,
               sendSilently: values.sendSilently,
+              botUsername: values.botUsername,
             },
           });
 
@@ -136,6 +143,9 @@ const NotificationsTelegram: React.FC = () => {
                     </a>
                   );
                 },
+                code: function code(msg) {
+                  return <code className="bg-opacity-50">{msg}</code>;
+                },
               })}
             </Alert>
             <Form className="section">
@@ -147,12 +157,30 @@ const NotificationsTelegram: React.FC = () => {
                   <Field type="checkbox" id="enabled" name="enabled" />
                 </div>
               </div>
+              <div className="form-row">
+                <label htmlFor="botUsername" className="text-label">
+                  {intl.formatMessage(messages.botUsername)}
+                </label>
+                <div className="form-input">
+                  <div className="form-input-field">
+                    <Field
+                      id="botUsername"
+                      name="botUsername"
+                      type="text"
+                      placeholder={intl.formatMessage(messages.botUsername)}
+                    />
+                  </div>
+                  {errors.botUsername && touched.botUsername && (
+                    <div className="error">{errors.botUsername}</div>
+                  )}
+                </div>
+              </div>
               <div className="form-row">
                 <label htmlFor="botAPI" className="text-label">
                   {intl.formatMessage(messages.botAPI)}
                 </label>
                 <div className="form-input">
-                  <div className="flex max-w-lg rounded-md shadow-sm">
+                  <div className="form-input-field">
                     <Field
                       id="botAPI"
                       name="botAPI"
@@ -170,7 +198,7 @@ const NotificationsTelegram: React.FC = () => {
                   {intl.formatMessage(messages.chatId)}
                 </label>
                 <div className="form-input">
-                  <div className="flex max-w-lg rounded-md shadow-sm">
+                  <div className="form-input-field">
                     <Field
                       id="chatId"
                       name="chatId"

src/components/Settings/Notifications/NotificationsWebhook/index.tsx

@@ -175,7 +175,7 @@ const NotificationsWebhook: React.FC = () => {
                 {intl.formatMessage(messages.webhookUrl)}
               </label>
               <div className="form-input">
-                <div className="flex max-w-lg rounded-md shadow-sm">
+                <div className="form-input-field">
                   <Field id="webhookUrl" name="webhookUrl" type="text" />
                 </div>
                 {errors.webhookUrl && touched.webhookUrl && (
@@ -188,7 +188,7 @@ const NotificationsWebhook: React.FC = () => {
                 {intl.formatMessage(messages.authheader)}
               </label>
               <div className="form-input">
-                <div className="flex max-w-lg rounded-md shadow-sm">
+                <div className="form-input-field">
                   <Field id="authHeader" name="authHeader" type="text" />
                 </div>
               </div>
@@ -198,7 +198,7 @@ const NotificationsWebhook: React.FC = () => {
                 {intl.formatMessage(messages.customJson)}
               </label>
               <div className="form-input">
-                <div className="flex max-w-lg rounded-md shadow-sm">
+                <div className="form-input-field">
                   <JSONEditor
                     name="webhook-json-payload"
                     onUpdate={(value) => setFieldValue('jsonPayload', value)}

src/components/Settings/RadarrModal/index.tsx

@@ -35,7 +35,7 @@ const messages = defineMessages({
   apiKeyPlaceholder: 'Your Radarr API key',
   baseUrl: 'Base URL',
   baseUrlPlaceholder: 'Example: /radarr',
-  syncEnabled: 'Enable Sync',
+  syncEnabled: 'Enable Scan',
   externalUrl: 'External URL',
   externalUrlPlaceholder: 'External URL pointing to your Radarr server',
   qualityprofile: 'Quality Profile',
@@ -345,7 +345,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                     <span className="label-required">*</span>
                   </label>
                   <div className="form-input">
-                    <div className="flex max-w-lg rounded-md shadow-sm">
+                    <div className="form-input-field">
                       <Field
                         id="name"
                         name="name"
@@ -370,7 +370,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                     <span className="label-required">*</span>
                   </label>
                   <div className="form-input">
-                    <div className="flex max-w-lg rounded-md shadow-sm">
+                    <div className="form-input-field">
                       <span className="protocol">
                         {values.ssl ? 'https://' : 'http://'}
                       </span>
@@ -435,7 +435,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                     <span className="label-required">*</span>
                   </label>
                   <div className="form-input">
-                    <div className="flex max-w-lg rounded-md shadow-sm">
+                    <div className="form-input-field">
                       <Field
                         id="apiKey"
                         name="apiKey"
@@ -459,7 +459,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                     {intl.formatMessage(messages.baseUrl)}
                   </label>
                   <div className="form-input">
-                    <div className="flex max-w-lg rounded-md shadow-sm">
+                    <div className="form-input-field">
                       <Field
                         id="baseUrl"
                         name="baseUrl"
@@ -484,7 +484,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                     <span className="label-required">*</span>
                   </label>
                   <div className="form-input">
-                    <div className="flex max-w-lg rounded-md shadow-sm">
+                    <div className="form-input-field">
                       <Field
                         as="select"
                         id="activeProfileId"
@@ -522,7 +522,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                     <span className="label-required">*</span>
                   </label>
                   <div className="form-input">
-                    <div className="flex max-w-lg rounded-md shadow-sm">
+                    <div className="form-input-field">
                       <Field
                         as="select"
                         id="rootFolder"
@@ -558,7 +558,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                     <span className="label-required">*</span>
                   </label>
                   <div className="form-input">
-                    <div className="flex max-w-lg rounded-md shadow-sm">
+                    <div className="form-input-field">
                       <Field
                         as="select"
                         id="minimumAvailability"
@@ -583,7 +583,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                     {intl.formatMessage(messages.externalUrl)}
                   </label>
                   <div className="form-input">
-                    <div className="flex max-w-lg rounded-md shadow-sm">
+                    <div className="form-input-field">
                       <Field
                         id="externalUrl"
                         name="externalUrl"

src/components/Settings/SettingsJobsCache/index.tsx

@@ -1,7 +1,12 @@
 import React from 'react';
 import useSWR from 'swr';
 import LoadingSpinner from '../../Common/LoadingSpinner';
-import { FormattedRelativeTime, defineMessages, useIntl } from 'react-intl';
+import {
+  FormattedRelativeTime,
+  defineMessages,
+  useIntl,
+  MessageDescriptor,
+} from 'react-intl';
 import Button from '../../Common/Button';
 import Table from '../../Common/Table';
 import Spinner from '../../../assets/spinner.svg';
@@ -11,10 +16,12 @@ import Badge from '../../Common/Badge';
 import { CacheItem } from '../../../../server/interfaces/api/settingsInterfaces';
 import { formatBytes } from '../../../utils/numberHelpers';
 
-const messages = defineMessages({
+const messages: { [messageName: string]: MessageDescriptor } = defineMessages({
   jobs: 'Jobs',
   jobsDescription:
-    'Overseerr performs certain maintenance tasks as regularly-scheduled jobs, but they can also be manually triggered below. Manually running a job will not alter its schedule.',
+    'Overseerr performs certain maintenance tasks as regularly-scheduled jobs,\
+    but they can also be manually triggered below.\
+    Manually running a job will not alter its schedule.',
   jobname: 'Job Name',
   jobtype: 'Type',
   nextexecution: 'Next Execution',
@@ -35,6 +42,13 @@ const messages = defineMessages({
   cacheksize: 'Key Size',
   cachevsize: 'Value Size',
   flushcache: 'Flush Cache',
+  unknownJob: 'Unknown Job',
+  'plex-recently-added-scan': 'Plex Recently Added Scan',
+  'plex-full-scan': 'Plex Full Library Scan',
+  'radarr-scan': 'Radarr Scan',
+  'sonarr-scan': 'Sonarr Scan',
+  'download-sync': 'Download Sync',
+  'download-sync-reset': 'Download Sync Reset',
 });
 
 interface Job {
@@ -66,7 +80,7 @@ const SettingsJobs: React.FC = () => {
     await axios.post(`/api/v1/settings/jobs/${job.id}/run`);
     addToast(
       intl.formatMessage(messages.jobstarted, {
-        jobname: job.name,
+        jobname: intl.formatMessage(messages[job.id] ?? messages.unknownJob),
       }),
       {
         appearance: 'success',
@@ -78,10 +92,15 @@ const SettingsJobs: React.FC = () => {
 
   const cancelJob = async (job: Job) => {
     await axios.post(`/api/v1/settings/jobs/${job.id}/cancel`);
-    addToast(intl.formatMessage(messages.jobcancelled, { jobname: job.name }), {
-      appearance: 'error',
-      autoDismiss: true,
-    });
+    addToast(
+      intl.formatMessage(messages.jobcancelled, {
+        jobname: intl.formatMessage(messages[job.id] ?? messages.unknownJob),
+      }),
+      {
+        appearance: 'error',
+        autoDismiss: true,
+      }
+    );
     revalidate();
   };
 
@@ -121,7 +140,11 @@ const SettingsJobs: React.FC = () => {
                 <Table.TD>
                   <div className="flex items-center text-sm leading-5 text-white">
                     {job.running && <Spinner className="w-5 h-5 mr-2" />}
-                    <span>{job.name}</span>
+                    <span>
+                      {intl.formatMessage(
+                        messages[job.id] ?? messages.unknownJob
+                      )}
+                    </span>
                   </div>
                 </Table.TD>
                 <Table.TD>

src/components/Settings/SettingsLayout.tsx

@@ -7,6 +7,7 @@ import PageTitle from '../Common/PageTitle';
 const messages = defineMessages({
   settings: 'Settings',
   menuGeneralSettings: 'General Settings',
+  menuUsers: 'Users',
   menuPlexSettings: 'Plex',
   menuServices: 'Services',
   menuNotifications: 'Notifications',
@@ -31,6 +32,11 @@ const SettingsLayout: React.FC = ({ children }) => {
       route: '/settings/main',
       regex: /^\/settings(\/main)?$/,
     },
+    {
+      text: intl.formatMessage(messages.menuUsers),
+      route: '/settings/users',
+      regex: /^\/settings\/users/,
+    },
     {
       text: intl.formatMessage(messages.menuPlexSettings),
       route: '/settings/plex',

src/components/Settings/SettingsMain.tsx

@@ -11,7 +11,6 @@ import { useUser, Permission } from '../../hooks/useUser';
 import { useToasts } from 'react-toast-notifications';
 import Badge from '../Common/Badge';
 import globalMessages from '../../i18n/globalMessages';
-import PermissionEdit from '../PermissionEdit';
 import * as Yup from 'yup';
 import RegionSelector from '../RegionSelector';
 
@@ -34,7 +33,6 @@ const messages = defineMessages({
   toastApiKeyFailure: 'Something went wrong while generating a new API key.',
   toastSettingsSuccess: 'Settings successfully saved!',
   toastSettingsFailure: 'Something went wrong while saving settings.',
-  defaultPermissions: 'Default User Permissions',
   hideAvailable: 'Hide Available Media',
   csrfProtection: 'Enable CSRF Protection',
   csrfProtectionTip:
@@ -44,7 +42,6 @@ const messages = defineMessages({
   trustProxy: 'Enable Proxy Support',
   trustProxyTip:
     'Allows Overseerr to correctly register client IP addresses behind a proxy (Overseerr must be reloaded for changes to take effect)',
-  localLogin: 'Enable Local User Sign-In',
   validationApplicationTitle: 'You must provide an application title',
   validationApplicationUrl: 'You must provide a valid URL',
   validationApplicationUrlTrailingSlash: 'URL must not end in a trailing slash',
@@ -116,9 +113,7 @@ const SettingsMain: React.FC = () => {
             applicationTitle: data?.applicationTitle,
             applicationUrl: data?.applicationUrl,
             csrfProtection: data?.csrfProtection,
-            defaultPermissions: data?.defaultPermissions ?? 0,
             hideAvailable: data?.hideAvailable,
-            localLogin: data?.localLogin,
             region: data?.region,
             originalLanguage: data?.originalLanguage,
             trustProxy: data?.trustProxy,
@@ -131,9 +126,7 @@ const SettingsMain: React.FC = () => {
                 applicationTitle: values.applicationTitle,
                 applicationUrl: values.applicationUrl,
                 csrfProtection: values.csrfProtection,
-                defaultPermissions: values.defaultPermissions,
                 hideAvailable: values.hideAvailable,
-                localLogin: values.localLogin,
                 region: values.region,
                 originalLanguage: values.originalLanguage,
                 trustProxy: values.trustProxy,
@@ -162,7 +155,7 @@ const SettingsMain: React.FC = () => {
                       {intl.formatMessage(messages.apikey)}
                     </label>
                     <div className="form-input">
-                      <div className="flex max-w-lg rounded-md shadow-sm">
+                      <div className="form-input-field">
                         <input
                           type="text"
                           id="apiKey"
@@ -203,7 +196,7 @@ const SettingsMain: React.FC = () => {
                     {intl.formatMessage(messages.applicationTitle)}
                   </label>
                   <div className="form-input">
-                    <div className="flex max-w-lg rounded-md shadow-sm">
+                    <div className="form-input-field">
                       <Field
                         id="applicationTitle"
                         name="applicationTitle"
@@ -221,7 +214,7 @@ const SettingsMain: React.FC = () => {
                     {intl.formatMessage(messages.applicationurl)}
                   </label>
                   <div className="form-input">
-                    <div className="flex max-w-lg rounded-md shadow-sm">
+                    <div className="form-input-field">
                       <Field
                         id="applicationUrl"
                         name="applicationUrl"
@@ -301,7 +294,7 @@ const SettingsMain: React.FC = () => {
                     </span>
                   </label>
                   <div className="form-input">
-                    <div className="flex max-w-lg rounded-md shadow-sm">
+                    <div className="form-input-field">
                       <Field
                         as="select"
                         id="originalLanguage"
@@ -345,42 +338,6 @@ const SettingsMain: React.FC = () => {
                     />
                   </div>
                 </div>
-                <div className="form-row">
-                  <label htmlFor="localLogin" className="checkbox-label">
-                    <span>{intl.formatMessage(messages.localLogin)}</span>
-                  </label>
-                  <div className="form-input">
-                    <Field
-                      type="checkbox"
-                      id="localLogin"
-                      name="localLogin"
-                      onChange={() => {
-                        setFieldValue('localLogin', !values.localLogin);
-                      }}
-                    />
-                  </div>
-                </div>
-                <div
-                  role="group"
-                  aria-labelledby="group-label"
-                  className="form-group"
-                >
-                  <div className="form-row">
-                    <span id="group-label" className="group-label">
-                      {intl.formatMessage(messages.defaultPermissions)}
-                    </span>
-                    <div className="form-input">
-                      <div className="max-w-lg">
-                        <PermissionEdit
-                          currentPermission={values.defaultPermissions}
-                          onUpdate={(newPermissions) =>
-                            setFieldValue('defaultPermissions', newPermissions)
-                          }
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </div>
                 <div className="actions">
                   <div className="flex justify-end">
                     <span className="inline-flex ml-3 rounded-md shadow-sm">

src/components/Settings/SettingsNotifications.tsx

@@ -28,7 +28,6 @@ const messages = defineMessages({
   notificationsettingssaved: 'Notification settings saved successfully!',
   notificationsettingsfailed: 'Notification settings failed to save.',
   enablenotifications: 'Enable Notifications',
-  autoapprovedrequests: 'Enable Notifications for Automatic Approvals',
   email: 'Email',
   webhook: 'Webhook',
 });
@@ -187,14 +186,12 @@ const SettingsNotifications: React.FC = ({ children }) => {
         <Formik
           initialValues={{
             enabled: data.enabled,
-            autoapprovalEnabled: data.autoapprovalEnabled,
           }}
           enableReinitialize
           onSubmit={async (values) => {
             try {
               await axios.post('/api/v1/settings/notifications', {
                 enabled: values.enabled,
-                autoapprovalEnabled: values.autoapprovalEnabled,
               });
               addToast(intl.formatMessage(messages.notificationsettingssaved), {
                 appearance: 'success',
@@ -233,26 +230,6 @@ const SettingsNotifications: React.FC = ({ children }) => {
                     />
                   </div>
                 </div>
-                <div className="form-row">
-                  <label htmlFor="name" className="checkbox-label">
-                    <span>
-                      {intl.formatMessage(messages.autoapprovedrequests)}
-                    </span>
-                  </label>
-                  <div className="form-input">
-                    <Field
-                      type="checkbox"
-                      id="autoapprovalEnabled"
-                      name="autoapprovalEnabled"
-                      onChange={() => {
-                        setFieldValue(
-                          'autoapprovalEnabled',
-                          !values.autoapprovalEnabled
-                        );
-                      }}
-                    />
-                  </div>
-                </div>
                 <div className="actions">
                   <div className="flex justify-end">
                     <span className="inline-flex ml-3 rounded-md shadow-sm">

src/components/Settings/SettingsPlex.tsx

@@ -49,8 +49,8 @@ const messages = defineMessages({
   plexlibraries: 'Plex Libraries',
   plexlibrariesDescription:
     'The libraries Overseerr scans for titles. Set up and save your Plex connection settings, then click the button below if no libraries are listed.',
-  syncing: 'Syncing',
-  sync: 'Sync Plex Libraries',
+  scanning: 'Scanning…',
+  scan: 'Scan Plex Libraries',
   manualscan: 'Manual Library Scan',
   manualscanDescription:
     "Normally, this will only be run once every 24 hours. Overseerr will check your Plex server's recently added more aggressively. If this is your first time configuring Plex, a one-time full manual library scan is recommended!",
@@ -355,7 +355,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                   </div>
                 </label>
                 <div className="form-input">
-                  <div className="flex max-w-lg rounded-md shadow-sm">
+                  <div className="form-input-field">
                     <input
                       type="text"
                       id="name"
@@ -374,7 +374,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                   <FormattedMessage {...messages.serverpreset} />
                 </label>
                 <div className="form-input">
-                  <div className="flex max-w-lg rounded-md shadow-sm input-group">
+                  <div className="form-input-field input-group">
                     <select
                       id="preset"
                       name="preset"
@@ -458,7 +458,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                   <FormattedMessage {...messages.hostname} />
                 </label>
                 <div className="form-input">
-                  <div className="flex max-w-lg rounded-md shadow-sm">
+                  <div className="form-input-field">
                     <span className="inline-flex items-center px-3 text-gray-100 bg-gray-800 border border-r-0 border-gray-500 cursor-default rounded-l-md sm:text-sm">
                       {values.useSsl ? 'https://' : 'http://'}
                     </span>
@@ -480,15 +480,13 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                   <FormattedMessage {...messages.port} />
                 </label>
                 <div className="form-input">
-                  <div className="max-w-lg rounded-md shadow-sm sm:max-w-xs">
-                    <Field
-                      type="text"
-                      id="port"
-                      name="port"
-                      placeholder="32400"
-                      className="short"
-                    />
-                  </div>
+                  <Field
+                    type="text"
+                    id="port"
+                    name="port"
+                    placeholder="32400"
+                    className="short"
+                  />
                   {errors.port && touched.port && (
                     <div className="error">{errors.port}</div>
                   )}
@@ -563,8 +561,8 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
             />
           </svg>
           {isSyncing
-            ? intl.formatMessage(messages.syncing)
-            : intl.formatMessage(messages.sync)}
+            ? intl.formatMessage(messages.scanning)
+            : intl.formatMessage(messages.scan)}
         </Button>
         <ul className="grid grid-cols-1 gap-5 mt-6 sm:gap-6 sm:grid-cols-2 lg:grid-cols-4">
           {data?.libraries.map((library) => (