fix: update avatar on new login

Previously, avatars were cached using image links from Jellyfin/Emby. Now, avatar images are
obtained directly from the API to avoid some configuration bugs.

.all-contributorsrc

@@ -439,6 +439,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "M0NsTeRRR",
+      "name": "Ludovic Ortega",
+      "avatar_url": "https://avatars.githubusercontent.com/u/37785089?v=4",
+      "profile": "https://github.com/M0NsTeRRR",
+      "contributions": [
+        "security"
+      ]
     }
   ]
 }

.github/ISSUE_TEMPLATE/bug.yml

@@ -1,6 +1,6 @@
 name: 🐛 Bug Report
 description: Report a problem
-labels: ['type:bug', 'awaiting-triage']
+labels: ['bug', 'awaiting triage']
 body:
   - type: markdown
     attributes:

.github/ISSUE_TEMPLATE/enhancement.yml

@@ -1,6 +1,6 @@
 name: ✨ Feature Request
 description: Suggest an idea
-labels: ['type:enhancement', 'awaiting-triage']
+labels: ['enhancement', 'awaiting triage']
 body:
   - type: markdown
     attributes:

README.md

@@ -8,10 +8,10 @@
 <p align="center">
 <a href="https://discord.gg/ckbvBtDJgC"><img src="https://img.shields.io/discord/952656177924300932" alt="Discord"></a>
 <a href="https://hub.docker.com/r/fallenbagel/jellyseerr"><img src="https://img.shields.io/docker/pulls/fallenbagel/jellyseerr" alt="Docker pulls"></a>
-<a href="http://jellyseerr.borgcube.de/engage/jellyseerr/"><img src="http://jellyseerr.borgcube.de/widget/jellyseerr/jellyseerr-frontend/svg-badge.svg" alt="Translation status" /></a>
+<a href="http://translate.jellyseerr.dev/engage/jellyseerr/"><img src="http://translate.jellyseerr.dev/widget/jellyseerr/jellyseerr-frontend/svg-badge.svg" alt="Translation status" /></a>
 <a href="https://github.com/fallenbagel/jellyseerr/blob/develop/LICENSE"><img alt="GitHub" src="https://img.shields.io/github/license/fallenbagel/jellyseerr"></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-47-orange.svg"/></a>
+<a href="#contributors-"><img alt="All Contributors" src="https://img.shields.io/badge/all_contributors-48-orange.svg"/></a>
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 **Jellyseerr** is a free and open source software application for managing requests for your media library.
@@ -146,6 +146,7 @@ Thanks goes to these wonderful people from Overseerr ([emoji key](https://allcon
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/XDark187"><img src="https://avatars.githubusercontent.com/u/39034192?v=4?s=100" width="100px;" alt="Baraa"/><br /><sub><b>Baraa</b></sub></a><br /><a href="https://github.com/Fallenbagel/jellyseerr/commits?author=XDark187" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/franciscofsales"><img src="https://avatars.githubusercontent.com/u/7977645?v=4?s=100" width="100px;" alt="Francisco Sales"/><br /><sub><b>Francisco Sales</b></sub></a><br /><a href="https://github.com/Fallenbagel/jellyseerr/commits?author=franciscofsales" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/myselfolli"><img src="https://avatars.githubusercontent.com/u/37535998?v=4?s=100" width="100px;" alt="Oliver Laing"/><br /><sub><b>Oliver Laing</b></sub></a><br /><a href="https://github.com/Fallenbagel/jellyseerr/commits?author=myselfolli" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/M0NsTeRRR"><img src="https://avatars.githubusercontent.com/u/37785089?v=4?s=100" width="100px;" alt="Ludovic Ortega"/><br /><sub><b>Ludovic Ortega</b></sub></a><br /><a href="#security-M0NsTeRRR" title="Security">🛡️</a></td>
     </tr>
   </tbody>
 </table>

docs/getting-started/buildfromsource.mdx

@@ -12,49 +12,12 @@ import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
 ### Prerequisites
-<Tabs groupId="versions" queryString>
-  <TabItem value="latest" label="Latest">
-    - [Node.js 18.x](https://nodejs.org/en/download/)
-    - [Yarn 1.x](https://classic.yarnpkg.com/lang/en/docs/install)
-    - [Git](https://git-scm.com/downloads)
-  </TabItem>
-
-  <TabItem value="develop" label="Develop">
     - [Node.js 20.x](https://nodejs.org/en/download/)
     - [Pnpm 9.x](https://pnpm.io/installation)
     - [Git](https://git-scm.com/downloads)
-  </TabItem>
-</Tabs>
-
 
 ## Unix (Linux, macOS)
 ### Installation
-<Tabs groupId="versions" queryString>
-  <TabItem value="latest" label="latest">
-1. Assuming you want the working directory to be `/opt/jellyseerr`, create the directory and navigate to it:
-```bash
-sudo mkdir -p /opt/jellyseerr && cd /opt/jellyseerr
-```
-2. Clone the Jellyseerr repository and checkout the latest release:
-```bash
-git clone https://github.com/Fallenbagel/jellyseerr.git
-cd jellyseerr
-git checkout main
-```
-3. Install the dependencies:
-```bash
-CYPRESS_INSTALL_BINARY=0 yarn install --frozen-lockfile --network-timeout 1000000
-```
-4. Build the project:
-```bash
-yarn build
-```
-5. Start Jellyseerr:
-```bash
-yarn start
-```
-  </TabItem>
-  <TabItem value="develop" label="develop">
 1. Assuming you want the working directory to be `/opt/jellyseerr`, create the directory and navigate to it:
 ```bash
 sudo mkdir -p /opt/jellyseerr && cd /opt/jellyseerr
@@ -77,8 +40,6 @@ pnpm build
 ```bash
 pnpm start
 ```
-  </TabItem>
-</Tabs>
 
 :::info
 You can now access Jellyseerr by visiting `http://localhost:5055` in your web browser.
@@ -234,33 +195,6 @@ pm2 status jellyseerr
 
 ## Windows
 ### Installation
-<Tabs groupId="versions" queryString>
-  <TabItem value="latest" label="latest">
-1. Assuming you want the working directory to be `C:\jellyseerr`, create the directory and navigate to it:
-```powershell
-mkdir C:\jellyseerr
-cd C:\jellyseerr
-```
-2. Clone the Jellyseerr repository and checkout the latest release:
-```powershell
-git clone https://github.com/Fallenbagel/jellyseerr.git .
-git checkout main
-```
-3. Install the dependencies:
-```powershell
-npm install -g win-node-env
-set CYPRESS_INSTALL_BINARY=0 && yarn install --frozen-lockfile --network-timeout 1000000
-```
-4. Build the project:
-```powershell
-yarn build
-```
-5. Start Jellyseerr:
-```powershell
-yarn start
-```
-  </TabItem>
-  <TabItem value="develop" label="develop">
 1. Assuming you want the working directory to be `C:\jellyseerr`, create the directory and navigate to it:
 ```powershell
 mkdir C:\jellyseerr
@@ -284,8 +218,6 @@ pnpm build
 ```powershell
 pnpm start
 ```
-  </TabItem>
-</Tabs>
 
 :::tip
 You can add the environment variables to a `.env` file in the Jellyseerr directory.
@@ -313,6 +245,7 @@ node dist/index.js
 - Set the trigger to "When the computer starts"
 - Set the action to "Start a program"
 - Set the program/script to the path of the `start-jellyseerr.bat` file
+- Set the "Start in" to the jellyseerr directory.
 - Click "Finish"
 
 Now, Jellyseerr will start when the computer boots up in the background.

docs/getting-started/nixpkg.mdx

@@ -22,7 +22,7 @@ export const VersionMismatchWarning = () => {
     <>
       {!isUpToDate ? (
         <Admonition type="warning">
-          The <a href="https://github.com/NixOS/nixpkgs/blob/nixos-unstable/pkgs/servers/jellyseerr/default.nix#L14">upstream Jellyseerr Nix Package (v{nixpkgVersion})</a> is not <b>up-to-date</b>. If you want to use <b>Jellyseerr v{jellyseerrVersion}</b>, you will need to <a href="#overriding-the-package">override the package derivation</a>.
+          The <a href="https://github.com/NixOS/nixpkgs/blob/nixos-unstable/pkgs/servers/jellyseerr/default.nix#L14">upstream Jellyseerr Nix Package (v{nixpkgVersion})</a> is not <b>up-to-date</b>. If you want to use <b>Jellyseerr v{jellyseerrVersion}</b>, you will need to <a href="#overriding-the-package-derivation">override the package derivation</a>.
         </Admonition>
       ) : (
         <Admonition type="success">
@@ -95,12 +95,12 @@ export const VersionMatch = () => {
       };
 
       offlineCache = pkgs.fetchYarnDeps {
-        sha256 = pkgs.lib.fakeSha256; 
+        sha256 = pkgs.lib.fakeSha256;
       };
-    }); 
+    });
   };
 }`;
- 
+
   const module = `{ config, pkgs, lib, ... }:
 
 with lib;

docs/using-jellyseerr/settings/general.md

@@ -12,6 +12,8 @@ This is your Jellyseerr API key, which can be used to integrate Jellyseerr with
 
 If you need to generate a new API key for any reason, simply click the button to the right of the text box.
 
+If you want to set the API key, rather than letting it be randomly generated, you can use the API_KEY environment variable. Whatever that variable is set to will be your API key.
+
 ## Application Title
 
 If you aren't a huge fan of the name "Jellyseerr" and would like to display something different to your users, you can customize the application title!

docs/using-jellyseerr/users/editing-users.md

@@ -35,7 +35,7 @@ Users can override the [global display language](/using-jellyseerr/settings/gene
 
 ### Discover Region & Discover Language
 
-Users can override the [global filter settings](/using-jellyseerr/settings/general#discover-region-and-discover-language) to suit their own preferences.
+Users can override the [global filter settings](/using-jellyseerr/settings/general#discover-region--discover-language) to suit their own preferences.
 
 ### Movie Request Limit & Series Request Limit
 

next.config.js

@@ -10,7 +10,6 @@ module.exports = {
     remotePatterns: [
       { hostname: 'gravatar.com' },
       { hostname: 'image.tmdb.org' },
-      { hostname: '*', protocol: 'https' },
     ],
   },
   webpack(config) {

overseerr-api.yml

@@ -38,6 +38,8 @@ tags:
     description: Endpoints related to getting service (Radarr/Sonarr) details.
   - name: watchlist
     description: Collection of media to watch later
+  - name: blacklist
+    description: Blacklisted media from discovery page.
 servers:
   - url: '{server}/api/v1'
     variables:
@@ -46,6 +48,19 @@ servers:
 
 components:
   schemas:
+    Blacklist:
+      type: object
+      properties:
+        tmdbId:
+          type: number
+          example: 1
+        title:
+          type: string
+        media:
+          $ref: '#/components/schemas/MediaInfo'
+        userId:
+          type: number
+          example: 1
     Watchlist:
       type: object
       properties:
@@ -2775,6 +2790,15 @@ paths:
                           imageCount:
                             type: number
                             example: 123
+                      avatar:
+                        type: object
+                        properties:
+                          size:
+                            type: number
+                            example: 123456
+                          imageCount:
+                            type: number
+                            example: 123
                   apiCaches:
                     type: array
                     items:
@@ -4042,6 +4066,94 @@ paths:
                       restricted:
                         type: boolean
                         example: false
+  /blacklist:
+    get:
+      summary: Returns blacklisted items
+      description: Returns list of all blacklisted media
+      tags:
+        - settings
+      parameters:
+        - in: query
+          name: take
+          schema:
+            type: number
+            nullable: true
+            example: 25
+        - in: query
+          name: skip
+          schema:
+            type: number
+            nullable: true
+            example: 0
+        - in: query
+          name: search
+          schema:
+            type: string
+            nullable: true
+            example: dune
+      responses:
+        '200':
+          description: Blacklisted items returned
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  pageInfo:
+                    $ref: '#/components/schemas/PageInfo'
+                  results:
+                    type: array
+                    items:
+                      type: object
+                      properties:
+                        user:
+                          $ref: '#/components/schemas/User'
+                        createdAt:
+                          type: string
+                          example: 2024-04-21T01:55:44.000Z
+                        id:
+                          type: number
+                          example: 1
+                        mediaType:
+                          type: string
+                          example: movie
+                        title:
+                          type: string
+                          example: Dune
+                        tmdbId:
+                          type: number
+                          example: 438631
+    post:
+      summary: Add media to blacklist
+      tags:
+        - blacklist
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/Blacklist'
+      responses:
+        '201':
+          description: Item succesfully blacklisted
+        '412':
+          description: Item has already been blacklisted
+  /blacklist/{tmdbId}:
+    delete:
+      summary: Remove media from blacklist
+      tags:
+        - blacklist
+      parameters:
+        - in: path
+          name: tmdbId
+          description: tmdbId ID
+          required: true
+          example: '1'
+          schema:
+            type: string
+      responses:
+        '204':
+          description: Succesfully removed media item
   /watchlist:
     post:
       summary: Add media to watchlist
@@ -4864,6 +4976,11 @@ paths:
           schema:
             type: string
             example: 8|9
+        - in: query
+          name: status
+          schema:
+            type: string
+            example: 3|4
       responses:
         '200':
           description: Results

package.json

@@ -62,6 +62,7 @@
     "formik": "^2.4.6",
     "gravatar-url": "3.1.0",
     "lodash": "4.17.21",
+    "mime": "3",
     "next": "^14.2.4",
     "node-cache": "5.1.2",
     "node-gyp": "9.3.1",
@@ -119,6 +120,7 @@
     "@types/express": "4.17.17",
     "@types/express-session": "1.17.6",
     "@types/lodash": "4.14.191",
+    "@types/mime": "3",
     "@types/node": "20.14.8",
     "@types/node-schedule": "2.1.0",
     "@types/nodemailer": "6.4.7",

pnpm-lock.yaml

@@ -98,6 +98,9 @@ importers:
       lodash:
         specifier: 4.17.21
         version: 4.17.21
+      mime:
+        specifier: '3'
+        version: 3.0.0
       next:
         specifier: ^14.2.4
         version: 14.2.4(@babel/core@7.24.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -264,6 +267,9 @@ importers:
       '@types/lodash':
         specifier: 4.14.191
         version: 4.14.191
+      '@types/mime':
+        specifier: '3'
+        version: 3.0.4
       '@types/node':
         specifier: 20.14.8
         version: 20.14.8
@@ -2848,6 +2854,9 @@ packages:
   '@types/mime@1.3.5':
     resolution: {integrity: sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==}
 
+  '@types/mime@3.0.4':
+    resolution: {integrity: sha512-iJt33IQnVRkqeqC7PzBHPTC6fDlRNRW8vjrgqtScAhrmMwe8c4Eo7+fUGTa+XdWrpEgpyKWMYmi2dIwMAYRzPw==}
+
   '@types/minimatch@3.0.5':
     resolution: {integrity: sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==}
 
@@ -10836,7 +10845,7 @@ snapshots:
       nopt: 5.0.0
       npmlog: 5.0.1
       rimraf: 3.0.2
-      semver: 7.6.2
+      semver: 7.3.8
       tar: 6.2.1
     transitivePeerDependencies:
       - encoding
@@ -10911,13 +10920,13 @@ snapshots:
   '@npmcli/fs@1.1.1':
     dependencies:
       '@gar/promisify': 1.1.3
-      semver: 7.6.2
+      semver: 7.3.8
     optional: true
 
   '@npmcli/fs@2.1.2':
     dependencies:
       '@gar/promisify': 1.1.3
-      semver: 7.6.2
+      semver: 7.3.8
 
   '@npmcli/move-file@1.1.2':
     dependencies:
@@ -12326,7 +12335,7 @@ snapshots:
       read-pkg: 5.2.0
       registry-auth-token: 5.0.2
       semantic-release: 19.0.5(encoding@0.1.13)
-      semver: 7.6.2
+      semver: 7.3.8
       tempy: 1.0.1
 
   '@semantic-release/release-notes-generator@10.0.3(semantic-release@19.0.5(encoding@0.1.13))':
@@ -12670,6 +12679,8 @@ snapshots:
 
   '@types/mime@1.3.5': {}
 
+  '@types/mime@3.0.4': {}
+
   '@types/minimatch@3.0.5': {}
 
   '@types/minimist@1.2.5': {}
@@ -12887,7 +12898,7 @@ snapshots:
       debug: 4.3.5(supports-color@8.1.1)
       globby: 11.1.0
       is-glob: 4.0.3
-      semver: 7.6.2
+      semver: 7.3.8
       tsutils: 3.21.0(typescript@4.9.5)
     optionalDependencies:
       typescript: 4.9.5
@@ -17269,7 +17280,7 @@ snapshots:
       nopt: 5.0.0
       npmlog: 6.0.2
       rimraf: 3.0.2
-      semver: 7.6.2
+      semver: 7.3.8
       tar: 6.2.1
       which: 2.0.2
     transitivePeerDependencies:
@@ -17348,7 +17359,7 @@ snapshots:
     dependencies:
       hosted-git-info: 4.1.0
       is-core-module: 2.14.0
-      semver: 7.6.2
+      semver: 7.3.8
       validate-npm-package-license: 3.0.4
 
   normalize-path@3.0.0: {}

server/api/externalapi.ts

@@ -76,7 +76,7 @@ class ExternalAPI {
     }
     const data = await this.getDataFromResponse(response);
 
-    if (this.cache) {
+    if (this.cache && ttl !== 0) {
       this.cache.set(cacheKey, data, ttl ?? DEFAULT_TTL);
     }
 
@@ -120,7 +120,7 @@ class ExternalAPI {
     }
     const resData = await this.getDataFromResponse(response);
 
-    if (this.cache) {
+    if (this.cache && ttl !== 0) {
       this.cache.set(cacheKey, resData, ttl ?? DEFAULT_TTL);
     }
 
@@ -164,7 +164,7 @@ class ExternalAPI {
     }
     const resData = await this.getDataFromResponse(response);
 
-    if (this.cache) {
+    if (this.cache && ttl !== 0) {
       this.cache.set(cacheKey, resData, ttl ?? DEFAULT_TTL);
     }
 

server/api/rating/rottentomatoes.ts

@@ -182,7 +182,7 @@ class RottenTomatoes extends ExternalAPI {
         );
       }
 
-      if (!tvshow) {
+      if (!tvshow || !tvshow.rottenTomatoes) {
         return null;
       }
 

server/api/servarr/base.ts

@@ -157,9 +157,13 @@ class ServarrBase<QueueItemAppendT> extends ExternalAPI {
 
   public getQueue = async (): Promise<(QueueItem & QueueItemAppendT)[]> => {
     try {
-      const data = await this.get<QueueResponse<QueueItemAppendT>>(`/queue`, {
-        includeEpisode: 'true',
-      });
+      const data = await this.get<QueueResponse<QueueItemAppendT>>(
+        `/queue`,
+        {
+          includeEpisode: 'true',
+        },
+        0
+      );
 
       return data.records;
     } catch (e) {
@@ -193,15 +197,24 @@ class ServarrBase<QueueItemAppendT> extends ExternalAPI {
     }
   };
 
+  async refreshMonitoredDownloads(): Promise<void> {
+    await this.runCommand('RefreshMonitoredDownloads', {});
+  }
+
   protected async runCommand(
     commandName: string,
     options: Record<string, unknown>
   ): Promise<void> {
     try {
-      await this.post(`/command`, {
-        name: commandName,
-        ...options,
-      });
+      await this.post(
+        `/command`,
+        {
+          name: commandName,
+          ...options,
+        },
+        {},
+        0
+      );
     } catch (e) {
       throw new Error(`[${this.apiName}] Failed to run command: ${e.message}`);
     }

server/api/servarr/sonarr.ts

@@ -303,10 +303,10 @@ class SonarrAPI extends ServarrBase<{
     });
 
     try {
-      await this.runCommand('SeriesSearch', { seriesId });
+      await this.runCommand('MissingEpisodeSearch', { seriesId });
     } catch (e) {
       logger.error(
-        'Something went wrong while executing Sonarr series search.',
+        'Something went wrong while executing Sonarr missing episode search.',
         {
           label: 'Sonarr API',
           errorMessage: e.message,

server/api/themoviedb/index.ts

@@ -95,6 +95,7 @@ interface DiscoverTvOptions {
   sortBy?: SortOptions;
   watchRegion?: string;
   watchProviders?: string;
+  withStatus?: string; // Returning Series: 0 Planned: 1 In Production: 2 Ended: 3 Cancelled: 4 Pilot: 5
 }
 
 class TheMovieDb extends ExternalAPI {
@@ -523,6 +524,7 @@ class TheMovieDb extends ExternalAPI {
     voteCountLte,
     watchProviders,
     watchRegion,
+    withStatus,
   }: DiscoverTvOptions = {}): Promise<TmdbSearchTvResponse> => {
     try {
       const defaultFutureDate = new Date(
@@ -570,6 +572,7 @@ class TheMovieDb extends ExternalAPI {
         'vote_count.lte': voteCountLte || '',
         with_watch_providers: watchProviders || '',
         watch_region: watchRegion || '',
+        with_status: withStatus || '',
       });
 
       return data;

server/constants/error.ts

@@ -2,6 +2,7 @@ export enum ApiErrorCode {
   InvalidUrl = 'INVALID_URL',
   InvalidCredentials = 'INVALID_CREDENTIALS',
   InvalidAuthToken = 'INVALID_AUTH_TOKEN',
+  InvalidEmail = 'INVALID_EMAIL',
   NotAdmin = 'NOT_ADMIN',
   SyncErrorGroupedFolders = 'SYNC_ERROR_GROUPED_FOLDERS',
   SyncErrorNoLibraries = 'SYNC_ERROR_NO_LIBRARIES',

server/constants/media.ts

@@ -16,4 +16,5 @@ export enum MediaStatus {
   PROCESSING,
   PARTIALLY_AVAILABLE,
   AVAILABLE,
+  BLACKLISTED,
 }

server/entity/Blacklist.ts

@@ -0,0 +1,95 @@
+import { MediaStatus, type MediaType } from '@server/constants/media';
+import { getRepository } from '@server/datasource';
+import Media from '@server/entity/Media';
+import { User } from '@server/entity/User';
+import type { BlacklistItem } from '@server/interfaces/api/blacklistInterfaces';
+import {
+  Column,
+  CreateDateColumn,
+  Entity,
+  Index,
+  JoinColumn,
+  ManyToOne,
+  OneToOne,
+  PrimaryGeneratedColumn,
+  Unique,
+} from 'typeorm';
+import type { ZodNumber, ZodOptional, ZodString } from 'zod';
+
+@Entity()
+@Unique(['tmdbId'])
+export class Blacklist implements BlacklistItem {
+  @PrimaryGeneratedColumn()
+  public id: number;
+
+  @Column({ type: 'varchar' })
+  public mediaType: MediaType;
+
+  @Column({ nullable: true, type: 'varchar' })
+  title?: string;
+
+  @Column()
+  @Index()
+  public tmdbId: number;
+
+  @ManyToOne(() => User, (user) => user.id, {
+    eager: true,
+  })
+  user: User;
+
+  @OneToOne(() => Media, (media) => media.blacklist, {
+    onDelete: 'CASCADE',
+  })
+  @JoinColumn()
+  public media: Media;
+
+  @CreateDateColumn()
+  public createdAt: Date;
+
+  constructor(init?: Partial<Blacklist>) {
+    Object.assign(this, init);
+  }
+
+  public static async addToBlacklist({
+    blacklistRequest,
+  }: {
+    blacklistRequest: {
+      mediaType: MediaType;
+      title?: ZodOptional<ZodString>['_output'];
+      tmdbId: ZodNumber['_output'];
+    };
+  }): Promise<void> {
+    const blacklist = new this({
+      ...blacklistRequest,
+    });
+
+    const mediaRepository = getRepository(Media);
+    let media = await mediaRepository.findOne({
+      where: {
+        tmdbId: blacklistRequest.tmdbId,
+      },
+    });
+
+    const blacklistRepository = getRepository(this);
+
+    await blacklistRepository.save(blacklist);
+
+    if (!media) {
+      media = new Media({
+        tmdbId: blacklistRequest.tmdbId,
+        status: MediaStatus.BLACKLISTED,
+        status4k: MediaStatus.BLACKLISTED,
+        mediaType: blacklistRequest.mediaType,
+        blacklist: blacklist,
+      });
+
+      await mediaRepository.save(media);
+    } else {
+      media.blacklist = blacklist;
+      media.status = MediaStatus.BLACKLISTED;
+      media.status4k = MediaStatus.BLACKLISTED;
+
+      await mediaRepository.save(media);
+    }
+  }
+}

server/entity/Media.ts

@@ -3,6 +3,7 @@ import SonarrAPI from '@server/api/servarr/sonarr';
 import { MediaStatus, MediaType } from '@server/constants/media';
 import { MediaServerType } from '@server/constants/server';
 import { getRepository } from '@server/datasource';
+import { Blacklist } from '@server/entity/Blacklist';
 import type { User } from '@server/entity/User';
 import { Watchlist } from '@server/entity/Watchlist';
 import type { DownloadingItem } from '@server/lib/downloadtracker';
@@ -17,6 +18,7 @@ import {
   Entity,
   Index,
   OneToMany,
+  OneToOne,
   PrimaryGeneratedColumn,
   UpdateDateColumn,
 } from 'typeorm';
@@ -66,7 +68,7 @@ class Media {
 
     try {
       const media = await mediaRepository.findOne({
-        where: { tmdbId: id, mediaType },
+        where: { tmdbId: id, mediaType: mediaType },
         relations: { requests: true, issues: true },
       });
 
@@ -116,6 +118,11 @@ class Media {
   @OneToMany(() => Issue, (issue) => issue.media, { cascade: true })
   public issues: Issue[];
 
+  @OneToOne(() => Blacklist, (blacklist) => blacklist.media, {
+    eager: true,
+  })
+  public blacklist: Blacklist;
+
   @CreateDateColumn()
   public createdAt: Date;
 
@@ -224,7 +231,7 @@ class Media {
         this.mediaUrl = `${jellyfinHost}/web/index.html#!/${pageName}?id=${this.jellyfinMediaId}&context=home&serverId=${serverId}`;
       }
       if (this.jellyfinMediaId4k) {
-        this.mediaUrl4k = `${jellyfinHost}/web/index.html#!/${pageName}?id=${this.jellyfinMediaId}&context=home&serverId=${serverId}`;
+        this.mediaUrl4k = `${jellyfinHost}/web/index.html#!/${pageName}?id=${this.jellyfinMediaId4k}&context=home&serverId=${serverId}`;
       }
     }
   }

server/entity/MediaRequest.ts

@@ -40,6 +40,7 @@ export class RequestPermissionError extends Error {}
 export class QuotaRestrictedError extends Error {}
 export class DuplicateMediaRequestError extends Error {}
 export class NoSeasonsAvailableError extends Error {}
+export class BlacklistedMediaError extends Error {}
 
 type MediaRequestOptions = {
   isAutoRequest?: boolean;
@@ -143,6 +144,16 @@ export class MediaRequest {
         mediaType: requestBody.mediaType,
       });
     } else {
+      if (media.status === MediaStatus.BLACKLISTED) {
+        logger.warn('Request for media blocked due to being blacklisted', {
+          tmdbId: tmdbMedia.id,
+          mediaType: requestBody.mediaType,
+          label: 'Media Request',
+        });
+
+        throw new BlacklistedMediaError('This media is blacklisted.');
+      }
+
       if (media.status === MediaStatus.UNKNOWN && !requestBody.is4k) {
         media.status = MediaStatus.PENDING;
       }

server/index.ts

@@ -19,6 +19,7 @@ import { getSettings } from '@server/lib/settings';
 import logger from '@server/logger';
 import clearCookies from '@server/middleware/clearcookies';
 import routes from '@server/routes';
+import avatarproxy from '@server/routes/avatarproxy';
 import imageproxy from '@server/routes/imageproxy';
 import { getAppVersion } from '@server/utils/appVersion';
 import restartFlag from '@server/utils/restartFlag';
@@ -174,7 +175,7 @@ app
         },
         store: new TypeormStore({
           cleanupLimit: 2,
-          ttl: 1000 * 60 * 60 * 24 * 30,
+          ttl: 60 * 60 * 24 * 30,
         }).connect(sessionRespository) as Store,
       })
     );
@@ -202,6 +203,7 @@ app
 
     // Do not set cookies so CDNs can cache them
     server.use('/imageproxy', clearCookies, imageproxy);
+    server.use('/avatarproxy', clearCookies, avatarproxy);
 
     server.get('*', (req, res) => handle(req, res));
     server.use(

server/interfaces/api/blacklistInterfaces.ts

@@ -0,0 +1,14 @@
+import type { User } from '@server/entity/User';
+import type { PaginatedResponse } from '@server/interfaces/api/common';
+
+export interface BlacklistItem {
+  tmdbId: number;
+  mediaType: 'movie' | 'tv';
+  title?: string;
+  createdAt?: Date;
+  user: User;
+}
+
+export interface BlacklistResultsResponse extends PaginatedResponse {
+  results: BlacklistItem[];
+}

server/interfaces/api/settingsInterfaces.ts

@@ -58,7 +58,7 @@ export interface CacheItem {
 
 export interface CacheResponse {
   apiCaches: CacheItem[];
-  imageCache: Record<'tmdb', { size: number; imageCount: number }>;
+  imageCache: Record<'tmdb' | 'avatar', { size: number; imageCount: number }>;
 }
 
 export interface StatusResponse {

server/job/schedule.ts

@@ -227,6 +227,9 @@ export const startJobs = (): void => {
       });
       // Clean TMDB image cache
       ImageProxy.clearCache('tmdb');
+
+      // Clean users avatar image cache
+      ImageProxy.clearCache('avatar');
     }),
   });
 

server/lib/downloadtracker.ts

@@ -85,6 +85,7 @@ class DownloadTracker {
           });
 
           try {
+            await radarr.refreshMonitoredDownloads();
             const queueItems = await radarr.getQueue();
 
             this.radarrServers[server.id] = queueItems.map((item) => ({
@@ -162,6 +163,7 @@ class DownloadTracker {
           });
 
           try {
+            await sonarr.refreshMonitoredDownloads();
             const queueItems = await sonarr.getQueue();
 
             this.sonarrServers[server.id] = queueItems.map((item) => ({

server/lib/imageproxy.ts

@@ -3,6 +3,7 @@ import type { RateLimitOptions } from '@server/utils/rateLimit';
 import rateLimit from '@server/utils/rateLimit';
 import { createHash } from 'crypto';
 import { promises } from 'fs';
+import mime from 'mime/lite';
 import path, { join } from 'path';
 
 type ImageResponse = {
@@ -11,7 +12,7 @@ type ImageResponse = {
     curRevalidate: number;
     isStale: boolean;
     etag: string;
-    extension: string;
+    extension: string | null;
     cacheKey: string;
     cacheMiss: boolean;
   };
@@ -27,29 +28,45 @@ class ImageProxy {
     let deletedImages = 0;
     const cacheDirectory = path.join(baseCacheDirectory, key);
 
-    const files = await promises.readdir(cacheDirectory);
+    try {
+      const files = await promises.readdir(cacheDirectory);
 
-    for (const file of files) {
-      const filePath = path.join(cacheDirectory, file);
-      const stat = await promises.lstat(filePath);
+      for (const file of files) {
+        const filePath = path.join(cacheDirectory, file);
+        const stat = await promises.lstat(filePath);
 
-      if (stat.isDirectory()) {
-        const imageFiles = await promises.readdir(filePath);
+        if (stat.isDirectory()) {
+          const imageFiles = await promises.readdir(filePath);
 
-        for (const imageFile of imageFiles) {
-          const [, expireAtSt] = imageFile.split('.');
-          const expireAt = Number(expireAtSt);
-          const now = Date.now();
+          for (const imageFile of imageFiles) {
+            const [, expireAtSt] = imageFile.split('.');
+            const expireAt = Number(expireAtSt);
+            const now = Date.now();
 
-          if (now > expireAt) {
-            await promises.rm(path.join(filePath, imageFile));
-            deletedImages += 1;
+            if (now > expireAt) {
+              await promises.rm(path.join(filePath), {
+                recursive: true,
+              });
+              deletedImages += 1;
+            }
           }
         }
       }
+    } catch (e) {
+      if (e.code === 'ENOENT') {
+        logger.error('Directory not found', {
+          label: 'Image Cache',
+          message: e.message,
+        });
+      } else {
+        logger.error('Failed to read directory', {
+          label: 'Image Cache',
+          message: e.message,
+        });
+      }
     }
 
-    logger.info(`Cleared ${deletedImages} stale image(s) from cache`, {
+    logger.info(`Cleared ${deletedImages} stale image(s) from cache '${key}'`, {
       label: 'Image Cache',
     });
   }
@@ -69,39 +86,56 @@ class ImageProxy {
   }
 
   private static async getDirectorySize(dir: string): Promise<number> {
-    const files = await promises.readdir(dir, {
-      withFileTypes: true,
-    });
+    try {
+      const files = await promises.readdir(dir, {
+        withFileTypes: true,
+      });
 
-    const paths = files.map(async (file) => {
-      const path = join(dir, file.name);
+      const paths = files.map(async (file) => {
+        const path = join(dir, file.name);
 
-      if (file.isDirectory()) return await ImageProxy.getDirectorySize(path);
+        if (file.isDirectory()) return await ImageProxy.getDirectorySize(path);
 
-      if (file.isFile()) {
-        const { size } = await promises.stat(path);
+        if (file.isFile()) {
+          const { size } = await promises.stat(path);
 
-        return size;
+          return size;
+        }
+
+        return 0;
+      });
+
+      return (await Promise.all(paths))
+        .flat(Infinity)
+        .reduce((i, size) => i + size, 0);
+    } catch (e) {
+      if (e.code === 'ENOENT') {
+        return 0;
       }
+    }
 
-      return 0;
-    });
-
-    return (await Promise.all(paths))
-      .flat(Infinity)
-      .reduce((i, size) => i + size, 0);
+    return 0;
   }
 
   private static async getImageCount(dir: string) {
-    const files = await promises.readdir(dir);
+    try {
+      const files = await promises.readdir(dir);
 
-    return files.length;
+      return files.length;
+    } catch (e) {
+      if (e.code === 'ENOENT') {
+        return 0;
+      }
+    }
+
+    return 0;
   }
 
   private fetch: typeof fetch;
   private cacheVersion;
   private key;
   private baseUrl;
+  private headers: HeadersInit | null = null;
 
   constructor(
     key: string,
@@ -109,6 +143,7 @@ class ImageProxy {
     options: {
       cacheVersion?: number;
       rateLimitOptions?: RateLimitOptions;
+      headers?: HeadersInit;
     } = {}
   ) {
     this.cacheVersion = options.cacheVersion ?? 1;
@@ -122,9 +157,13 @@ class ImageProxy {
     } else {
       this.fetch = fetch;
     }
+    this.headers = options.headers || null;
   }
 
-  public async getImage(path: string): Promise<ImageResponse> {
+  public async getImage(
+    path: string,
+    fallbackPath?: string
+  ): Promise<ImageResponse> {
     const cacheKey = this.getCacheKey(path);
 
     const imageResponse = await this.get(cacheKey);
@@ -133,7 +172,11 @@ class ImageProxy {
       const newImage = await this.set(path, cacheKey);
 
       if (!newImage) {
-        throw new Error('Failed to load image');
+        if (fallbackPath) {
+          return await this.getImage(fallbackPath);
+        } else {
+          throw new Error('Failed to load image');
+        }
       }
 
       return newImage;
@@ -147,6 +190,27 @@ class ImageProxy {
     return imageResponse;
   }
 
+  public async clearCachedImage(path: string) {
+    // find cacheKey
+    const cacheKey = this.getCacheKey(path);
+
+    try {
+      const directory = join(this.getCacheDirectory(), cacheKey);
+      const files = await promises.readdir(directory);
+
+      await promises.rm(directory, { recursive: true });
+
+      logger.info(`Cleared ${files[0]} from cache 'avatar'`, {
+        label: 'Image Cache',
+      });
+    } catch (e) {
+      logger.error('Failed to clear cached image', {
+        label: 'Image Cache',
+        message: e.message,
+      });
+    }
+  }
+
   private async get(cacheKey: string): Promise<ImageResponse | null> {
     try {
       const directory = join(this.getCacheDirectory(), cacheKey);
@@ -187,16 +251,30 @@ class ImageProxy {
       const directory = join(this.getCacheDirectory(), cacheKey);
       const href =
         this.baseUrl +
-        (this.baseUrl.endsWith('/') ? '' : '/') +
+        (this.baseUrl.length > 0
+          ? this.baseUrl.endsWith('/')
+            ? ''
+            : '/'
+          : '') +
         (path.startsWith('/') ? path.slice(1) : path);
-      const response = await this.fetch(href);
+      const response = await this.fetch(href, {
+        headers: this.headers || undefined,
+      });
+      if (!response.ok) {
+        return null;
+      }
       const arrayBuffer = await response.arrayBuffer();
       const buffer = Buffer.from(arrayBuffer);
 
-      const extension = path.split('.').pop() ?? '';
-      const maxAge = Number(
+      const extension = mime.getExtension(
+        response.headers.get('content-type') ?? ''
+      );
+
+      let maxAge = Number(
         (response.headers.get('cache-control') ?? '0').split('=')[1]
       );
+
+      if (!maxAge) maxAge = 86400;
       const expireAt = Date.now() + maxAge * 1000;
       const etag = (response.headers.get('etag') ?? '').replace(/"/g, '');
 
@@ -232,7 +310,7 @@ class ImageProxy {
 
   private async writeToCacheDir(
     dir: string,
-    extension: string,
+    extension: string | null,
     maxAge: number,
     expireAt: number,
     buffer: Buffer,

server/lib/permissions.ts

@@ -27,6 +27,8 @@ export enum Permission {
   AUTO_REQUEST_TV = 33554432,
   RECENT_VIEW = 67108864,
   WATCHLIST_VIEW = 134217728,
+  MANAGE_BLACKLIST = 268435456,
+  VIEW_BLACKLIST = 1073741824,
 }
 
 export interface PermissionCheckOptions {

server/lib/settings/index.ts

@@ -611,7 +611,11 @@ class Settings {
   }
 
   private generateApiKey(): string {
-    return Buffer.from(`${Date.now()}${randomUUID()}`).toString('base64');
+    if (process.env.API_KEY) {
+      return process.env.API_KEY;
+    } else {
+      return Buffer.from(`${Date.now()}${randomUUID()}`).toString('base64');
+    }
   }
 
   private generateVapidKeys(force = false): void {
@@ -644,10 +648,16 @@ class Settings {
 
     if (data) {
       const parsedJson = JSON.parse(data);
-      this.data = await runMigrations(parsedJson);
+      this.data = await runMigrations(parsedJson, SETTINGS_PATH);
 
       this.data = merge(this.data, parsedJson);
 
+      if (process.env.API_KEY) {
+        if (this.main.apiKey != process.env.API_KEY) {
+          this.main.apiKey = process.env.API_KEY;
+        }
+      }
+
       this.save();
     }
     return this;

server/lib/settings/migrations/0003_emby_media_server_type.ts

@@ -3,7 +3,6 @@ import type { AllSettings } from '@server/lib/settings';
 
 const migrateHostname = (settings: any): AllSettings => {
   const oldMediaServerType = settings.main.mediaServerType;
-  console.log('Migrating media server type', oldMediaServerType);
   if (
     oldMediaServerType === MediaServerType.JELLYFIN &&
     process.env.JELLYFIN_TYPE === 'emby'

server/lib/settings/migrator.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import type { AllSettings } from '@server/lib/settings';
 import logger from '@server/logger';
 import fs from 'fs';
@@ -6,7 +7,8 @@ import path from 'path';
 const migrationsDir = path.join(__dirname, 'migrations');
 
 export const runMigrations = async (
-  settings: AllSettings
+  settings: AllSettings,
+  SETTINGS_PATH: string
 ): Promise<AllSettings> => {
   const migrations = fs
     .readdirSync(migrationsDir)
@@ -17,14 +19,43 @@ export const runMigrations = async (
   let migrated = settings;
 
   try {
+    const settingsBefore = JSON.stringify(migrated);
+
     for (const migration of migrations) {
       migrated = await migration(migrated);
     }
+
+    const settingsAfter = JSON.stringify(migrated);
+
+    if (settingsBefore !== settingsAfter) {
+      // a migration occured
+      // we check that the new config will be saved
+      fs.writeFileSync(SETTINGS_PATH, JSON.stringify(migrated, undefined, ' '));
+      const fileSaved = JSON.parse(fs.readFileSync(SETTINGS_PATH, 'utf-8'));
+      if (JSON.stringify(fileSaved) !== settingsAfter) {
+        // something went wrong while saving file
+        throw new Error('Unable to save settings after migration.');
+      }
+    }
   } catch (e) {
     logger.error(
       `Something went wrong while running settings migrations: ${e.message}`,
       { label: 'Settings Migrator' }
     );
+    // we stop jellyseerr if the migration failed
+    console.log(
+      '===================================================================='
+    );
+    console.log(
+      '       SOMETHING WENT WRONG WHILE RUNNING SETTINGS MIGRATIONS       '
+    );
+    console.log(
+      '   Please check that your configuration folder is properly set up   '
+    );
+    console.log(
+      '===================================================================='
+    );
+    process.exit();
   }
 
   return migrated;

server/migration/1699901142442-AddBlacklist.ts

@@ -0,0 +1,20 @@
+import type { MigrationInterface, QueryRunner } from 'typeorm';
+
+export class AddBlacklist1699901142442 implements MigrationInterface {
+  name = 'AddBlacklist1699901142442';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(
+      `CREATE TABLE "blacklist" ("id" integer PRIMARY KEY AUTOINCREMENT NOT NULL, "mediaType" varchar NOT NULL, "title" varchar, "tmdbId" integer NOT NULL, "createdAt" datetime NOT NULL DEFAULT (datetime('now')),"userId" integer, "mediaId" integer,CONSTRAINT "UQ_6bbafa28411e6046421991ea21c" UNIQUE ("tmdbId", "userId"))`
+    );
+
+    await queryRunner.query(
+      `CREATE INDEX "IDX_6bbafa28411e6046421991ea21" ON "blacklist" ("tmdbId") `
+    );
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`DROP TABLE "blacklist"`);
+    await queryRunner.query(`DROP INDEX "IDX_6bbafa28411e6046421991ea21"`);
+  }
+}

server/routes/auth.ts

@@ -14,7 +14,6 @@ import { ApiError } from '@server/types/error';
 import { getHostname } from '@server/utils/getHostname';
 import * as EmailValidator from 'email-validator';
 import { Router } from 'express';
-import gravatarUrl from 'gravatar-url';
 import net from 'net';
 
 const authRoutes = Router();
@@ -261,8 +260,6 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
             urlBase: body.urlBase,
           });
 
-    const { externalHostname } = getSettings().jellyfin;
-
     // Try to find deviceId that corresponds to jellyfin user, else generate a new one
     let user = await userRepository.findOne({
       where: { jellyfinUsername: body.username },
@@ -280,11 +277,6 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
     // First we need to attempt to log the user in to jellyfin
     const jellyfinserver = new JellyfinAPI(hostname ?? '', undefined, deviceId);
 
-    const jellyfinHost =
-      externalHostname && externalHostname.length > 0
-        ? externalHostname
-        : hostname;
-
     const ip = req.ip;
     let clientIp;
 
@@ -334,14 +326,10 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
             jellyfinDeviceId: deviceId,
             jellyfinAuthToken: account.AccessToken,
             permissions: Permission.ADMIN,
-            avatar: account.User.PrimaryImageTag
-              ? `${jellyfinHost}/Users/${account.User.Id}/Images/Primary/?tag=${account.User.PrimaryImageTag}&quality=90`
-              : gravatarUrl(body.email || account.User.Name, {
-                  default: 'mm',
-                  size: 200,
-                }),
+            avatar: `/avatarproxy/${account.User.Id}`,
             userType: UserType.EMBY,
           });
+
           break;
         case MediaServerType.JELLYFIN:
           settings.main.mediaServerType = MediaServerType.JELLYFIN;
@@ -352,14 +340,10 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
             jellyfinDeviceId: deviceId,
             jellyfinAuthToken: account.AccessToken,
             permissions: Permission.ADMIN,
-            avatar: account.User.PrimaryImageTag
-              ? `${jellyfinHost}/Users/${account.User.Id}/Images/Primary/?tag=${account.User.PrimaryImageTag}&quality=90`
-              : gravatarUrl(body.email || account.User.Name, {
-                  default: 'mm',
-                  size: 200,
-                }),
+            avatar: `/avatarproxy/${account.User.Id}`,
             userType: UserType.JELLYFIN,
           });
+
           break;
         default:
           throw new Error('select_server_type');
@@ -405,15 +389,7 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
           jellyfinUsername: account.User.Name,
         }
       );
-      // Update the users avatar with their jellyfin profile pic (incase it changed)
-      if (account.User.PrimaryImageTag) {
-        user.avatar = `${jellyfinHost}/Users/${account.User.Id}/Images/Primary/?tag=${account.User.PrimaryImageTag}&quality=90`;
-      } else {
-        user.avatar = gravatarUrl(user.email || account.User.Name, {
-          default: 'mm',
-          size: 200,
-        });
-      }
+      user.avatar = `/avatarproxy/${account.User.Id}`;
       user.jellyfinUsername = account.User.Name;
 
       if (user.username === account.User.Name) {
@@ -451,17 +427,13 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
         jellyfinUserId: account.User.Id,
         jellyfinDeviceId: deviceId,
         permissions: settings.main.defaultPermissions,
-        avatar: account.User.PrimaryImageTag
-          ? `${jellyfinHost}/Users/${account.User.Id}/Images/Primary/?tag=${account.User.PrimaryImageTag}&quality=90`
-          : gravatarUrl(body.email || account.User.Name, {
-              default: 'mm',
-              size: 200,
-            }),
+        avatar: `/avatarproxy/${account.User.Id}`,
         userType:
           settings.main.mediaServerType === MediaServerType.JELLYFIN
             ? UserType.JELLYFIN
             : UserType.EMBY,
       });
+
       //initialize Jellyfin/Emby users with local login
       const passedExplicitPassword = body.password && body.password.length > 0;
       if (passedExplicitPassword) {

server/routes/avatarproxy.ts

@@ -0,0 +1,86 @@
+import { MediaServerType } from '@server/constants/server';
+import { getRepository } from '@server/datasource';
+import { User } from '@server/entity/User';
+import ImageProxy from '@server/lib/imageproxy';
+import { getSettings } from '@server/lib/settings';
+import logger from '@server/logger';
+import { getAppVersion } from '@server/utils/appVersion';
+import { getHostname } from '@server/utils/getHostname';
+import { Router } from 'express';
+import gravatarUrl from 'gravatar-url';
+
+const router = Router();
+
+let _avatarImageProxy: ImageProxy | null = null;
+async function initAvatarImageProxy() {
+  if (!_avatarImageProxy) {
+    const userRepository = getRepository(User);
+    const admin = await userRepository.findOne({
+      where: { id: 1 },
+      select: ['id', 'jellyfinUserId', 'jellyfinDeviceId'],
+      order: { id: 'ASC' },
+    });
+    const deviceId = admin?.jellyfinDeviceId;
+    const authToken = getSettings().jellyfin.apiKey;
+    _avatarImageProxy = new ImageProxy('avatar', '', {
+      headers: {
+        'X-Emby-Authorization': `MediaBrowser Client="Jellyseerr", Device="Jellyseerr", DeviceId="${deviceId}", Version="${getAppVersion()}", Token="${authToken}"`,
+      },
+    });
+  }
+  return _avatarImageProxy;
+}
+
+router.get('/:jellyfinUserId', async (req, res) => {
+  try {
+    if (!req.params.jellyfinUserId.match(/^[a-f0-9]{32}$/)) {
+      const mediaServerType = getSettings().main.mediaServerType;
+      throw new Error(
+        `Provided URL is not ${
+          mediaServerType === MediaServerType.JELLYFIN
+            ? 'a Jellyfin'
+            : 'an Emby'
+        } avatar.`
+      );
+    }
+
+    const avatarImageCache = await initAvatarImageProxy();
+
+    const user = await getRepository(User).findOne({
+      where: { jellyfinUserId: req.params.jellyfinUserId },
+    });
+
+    const fallbackUrl = gravatarUrl(user?.email || 'none', {
+      default: 'mm',
+      size: 200,
+    });
+    const jellyfinAvatarUrl = `${getHostname()}/UserImage?UserId=${
+      req.params.jellyfinUserId
+    }`;
+    let imageData = await avatarImageCache.getImage(
+      jellyfinAvatarUrl,
+      fallbackUrl
+    );
+
+    if (imageData.meta.extension === 'json') {
+      // this is a 404
+      imageData = await avatarImageCache.getImage(fallbackUrl);
+    }
+
+    res.writeHead(200, {
+      'Content-Type': `image/${imageData.meta.extension}`,
+      'Content-Length': imageData.imageBuffer.length,
+      'Cache-Control': `public, max-age=${imageData.meta.curRevalidate}`,
+      'OS-Cache-Key': imageData.meta.cacheKey,
+      'OS-Cache-Status': imageData.meta.cacheMiss ? 'MISS' : 'HIT',
+    });
+
+    res.end(imageData.imageBuffer);
+  } catch (e) {
+    logger.error('Failed to proxy avatar image', {
+      errorMessage: e.message,
+    });
+  }
+});
+
+export default router;

server/routes/blacklist.ts

@@ -0,0 +1,148 @@
+import { MediaType } from '@server/constants/media';
+import { getRepository } from '@server/datasource';
+import { Blacklist } from '@server/entity/Blacklist';
+import Media from '@server/entity/Media';
+import { NotFoundError } from '@server/entity/Watchlist';
+import type { BlacklistResultsResponse } from '@server/interfaces/api/blacklistInterfaces';
+import { Permission } from '@server/lib/permissions';
+import logger from '@server/logger';
+import { isAuthenticated } from '@server/middleware/auth';
+import { Router } from 'express';
+import rateLimit from 'express-rate-limit';
+import { QueryFailedError } from 'typeorm';
+import { z } from 'zod';
+
+const blacklistRoutes = Router();
+
+export const blacklistAdd = z.object({
+  tmdbId: z.coerce.number(),
+  mediaType: z.nativeEnum(MediaType),
+  title: z.coerce.string().optional(),
+  user: z.coerce.number(),
+});
+
+blacklistRoutes.get(
+  '/',
+  isAuthenticated([Permission.MANAGE_BLACKLIST, Permission.VIEW_BLACKLIST], {
+    type: 'or',
+  }),
+  rateLimit({ windowMs: 60 * 1000, max: 50 }),
+  async (req, res, next) => {
+    const pageSize = req.query.take ? Number(req.query.take) : 25;
+    const skip = req.query.skip ? Number(req.query.skip) : 0;
+    const search = (req.query.search as string) ?? '';
+
+    try {
+      let query = getRepository(Blacklist)
+        .createQueryBuilder('blacklist')
+        .leftJoinAndSelect('blacklist.user', 'user');
+
+      if (search.length > 0) {
+        query = query.where('blacklist.title like :title', {
+          title: `%${search}%`,
+        });
+      }
+
+      const [blacklistedItems, itemsCount] = await query
+        .orderBy('blacklist.createdAt', 'DESC')
+        .take(pageSize)
+        .skip(skip)
+        .getManyAndCount();
+
+      return res.status(200).json({
+        pageInfo: {
+          pages: Math.ceil(itemsCount / pageSize),
+          pageSize,
+          results: itemsCount,
+          page: Math.ceil(skip / pageSize) + 1,
+        },
+        results: blacklistedItems,
+      } as BlacklistResultsResponse);
+    } catch (error) {
+      logger.error('Something went wrong while retrieving blacklisted items', {
+        label: 'Blacklist',
+        errorMessage: error.message,
+      });
+      return next({
+        status: 500,
+        message: 'Unable to retrieve blacklisted items.',
+      });
+    }
+  }
+);
+
+blacklistRoutes.post(
+  '/',
+  isAuthenticated([Permission.MANAGE_BLACKLIST], {
+    type: 'or',
+  }),
+  async (req, res, next) => {
+    try {
+      const values = blacklistAdd.parse(req.body);
+
+      await Blacklist.addToBlacklist({
+        blacklistRequest: values,
+      });
+
+      return res.status(201).send();
+    } catch (error) {
+      if (!(error instanceof Error)) {
+        return;
+      }
+
+      if (error instanceof QueryFailedError) {
+        switch (error.driverError.errno) {
+          case 19:
+            return next({ status: 412, message: 'Item already blacklisted' });
+          default:
+            logger.warn('Something wrong with data blacklist', {
+              tmdbId: req.body.tmdbId,
+              mediaType: req.body.mediaType,
+              label: 'Blacklist',
+            });
+            return next({ status: 409, message: 'Something wrong' });
+        }
+      }
+
+      return next({ status: 500, message: error.message });
+    }
+  }
+);
+
+blacklistRoutes.delete(
+  '/:id',
+  isAuthenticated([Permission.MANAGE_BLACKLIST], {
+    type: 'or',
+  }),
+  async (req, res, next) => {
+    try {
+      const blacklisteRepository = getRepository(Blacklist);
+
+      const blacklistItem = await blacklisteRepository.findOneOrFail({
+        where: { tmdbId: Number(req.params.id) },
+      });
+
+      await blacklisteRepository.remove(blacklistItem);
+
+      const mediaRepository = getRepository(Media);
+
+      const mediaItem = await mediaRepository.findOneOrFail({
+        where: { tmdbId: Number(req.params.id) },
+      });
+
+      await mediaRepository.remove(mediaItem);
+
+      return res.status(204).send();
+    } catch (e) {
+      if (e instanceof NotFoundError) {
+        return next({
+          status: 401,
+          message: e.message,
+        });
+      }
+      return next({ status: 500, message: e.message });
+    }
+  }
+);
+
+export default blacklistRoutes;

server/routes/discover.ts

@@ -71,6 +71,7 @@ const QueryFilterOptions = z.object({
   network: z.coerce.string().optional(),
   watchProviders: z.coerce.string().optional(),
   watchRegion: z.coerce.string().optional(),
+  status: z.coerce.string().optional(),
 });
 
 export type FilterOptions = z.infer<typeof QueryFilterOptions>;
@@ -385,6 +386,7 @@ discoverRoutes.get('/tv', async (req, res, next) => {
       voteCountLte: query.voteCountLte,
       watchProviders: query.watchProviders,
       watchRegion: query.watchRegion,
+      withStatus: query.status,
     });
 
     const media = await Media.getRelatedMedia(

server/routes/index.ts

@@ -23,6 +23,7 @@ import restartFlag from '@server/utils/restartFlag';
 import { isPerson } from '@server/utils/typeHelpers';
 import { Router } from 'express';
 import authRoutes from './auth';
+import blacklistRoutes from './blacklist';
 import collectionRoutes from './collection';
 import discoverRoutes, { createTmdbWithRegionLanguage } from './discover';
 import issueRoutes from './issue';
@@ -144,6 +145,7 @@ router.use('/search', isAuthenticated(), searchRoutes);
 router.use('/discover', isAuthenticated(), discoverRoutes);
 router.use('/request', isAuthenticated(), requestRoutes);
 router.use('/watchlist', isAuthenticated(), watchlistRoutes);
+router.use('/blacklist', isAuthenticated(), blacklistRoutes);
 router.use('/movie', isAuthenticated(), movieRoutes);
 router.use('/tv', isAuthenticated(), tvRoutes);
 router.use('/media', isAuthenticated(), mediaRoutes);

server/routes/request.ts

@@ -8,6 +8,7 @@ import {
 import { getRepository } from '@server/datasource';
 import Media from '@server/entity/Media';
 import {
+  BlacklistedMediaError,
   DuplicateMediaRequestError,
   MediaRequest,
   NoSeasonsAvailableError,
@@ -243,6 +244,8 @@ requestRoutes.post<never, MediaRequest, MediaRequestBody>(
           return next({ status: 409, message: error.message });
         case NoSeasonsAvailableError:
           return next({ status: 202, message: error.message });
+        case BlacklistedMediaError:
+          return next({ status: 403, message: error.message });
         default:
           return next({ status: 500, message: error.message });
       }

server/routes/settings/index.ts

@@ -32,7 +32,6 @@ import { getHostname } from '@server/utils/getHostname';
 import { Router } from 'express';
 import rateLimit from 'express-rate-limit';
 import fs from 'fs';
-import gravatarUrl from 'gravatar-url';
 import { escapeRegExp, merge, omit, set, sortBy } from 'lodash';
 import { rescheduleJob } from 'node-schedule';
 import path from 'path';
@@ -377,11 +376,6 @@ settingsRoutes.get('/jellyfin/library', async (req, res, next) => {
 
 settingsRoutes.get('/jellyfin/users', async (req, res) => {
   const settings = getSettings();
-  const { externalHostname } = settings.jellyfin;
-  const jellyfinHost =
-    externalHostname && externalHostname.length > 0
-      ? externalHostname
-      : getHostname();
 
   const userRepository = getRepository(User);
   const admin = await userRepository.findOneOrFail({
@@ -400,9 +394,7 @@ settingsRoutes.get('/jellyfin/users', async (req, res) => {
   const users = resp.users.map((user) => ({
     username: user.Name,
     id: user.Id,
-    thumb: user.PrimaryImageTag
-      ? `${jellyfinHost}/Users/${user.Id}/Images/Primary/?tag=${user.PrimaryImageTag}&quality=90`
-      : gravatarUrl(user.Name, { default: 'mm', size: 200 }),
+    thumb: `/avatarproxy/${user.Id}`,
     email: user.Name,
   }));
 
@@ -746,11 +738,13 @@ settingsRoutes.get('/cache', async (_req, res) => {
   }));
 
   const tmdbImageCache = await ImageProxy.getImageStats('tmdb');
+  const avatarImageCache = await ImageProxy.getImageStats('avatar');
 
   return res.status(200).json({
     apiCaches,
     imageCache: {
       tmdb: tmdbImageCache,
+      avatar: avatarImageCache,
     },
   });
 });

server/routes/user/index.ts

@@ -2,6 +2,7 @@ import JellyfinAPI from '@server/api/jellyfin';
 import PlexTvAPI from '@server/api/plextv';
 import TautulliAPI from '@server/api/tautulli';
 import { MediaType } from '@server/constants/media';
+import { MediaServerType } from '@server/constants/server';
 import { UserType } from '@server/constants/user';
 import { getRepository } from '@server/datasource';
 import Media from '@server/entity/Media';
@@ -515,12 +516,6 @@ router.post(
 
       //const jellyfinUsersResponse = await jellyfinClient.getUsers();
       const createdUsers: User[] = [];
-      const { externalHostname } = getSettings().jellyfin;
-
-      const jellyfinHost =
-        externalHostname && externalHostname.length > 0
-          ? externalHostname
-          : hostname;
 
       jellyfinClient.setUserId(admin.jellyfinUserId ?? '');
       const jellyfinUsers = await jellyfinClient.getUsers();
@@ -544,13 +539,11 @@ router.post(
             ).toString('base64'),
             email: jellyfinUser?.Name,
             permissions: settings.main.defaultPermissions,
-            avatar: jellyfinUser?.PrimaryImageTag
-              ? `${jellyfinHost}/Users/${jellyfinUser.Id}/Images/Primary/?tag=${jellyfinUser.PrimaryImageTag}&quality=90`
-              : gravatarUrl(jellyfinUser?.Name ?? '', {
-                  default: 'mm',
-                  size: 200,
-                }),
-            userType: UserType.JELLYFIN,
+            avatar: `/avatarproxy/${jellyfinUser?.Id}`,
+            userType:
+              settings.main.mediaServerType === MediaServerType.JELLYFIN
+                ? UserType.JELLYFIN
+                : UserType.EMBY,
           });
 
           await userRepository.save(newUser);

server/routes/user/usersettings.ts

@@ -1,3 +1,4 @@
+import { ApiErrorCode } from '@server/constants/error';
 import { getRepository } from '@server/datasource';
 import { User } from '@server/entity/User';
 import { UserSettings } from '@server/entity/UserSettings';
@@ -9,6 +10,7 @@ import { Permission } from '@server/lib/permissions';
 import { getSettings } from '@server/lib/settings';
 import logger from '@server/logger';
 import { isAuthenticated } from '@server/middleware/auth';
+import { ApiError } from '@server/types/error';
 import { Router } from 'express';
 import { canMakePermissionsChange } from '.';
 
@@ -98,10 +100,18 @@ userSettingsRoutes.post<
     }
 
     user.username = req.body.username;
+    const oldEmail = user.email;
     if (user.jellyfinUsername) {
       user.email = req.body.email || user.jellyfinUsername || user.email;
     }
 
+    const existingUser = await userRepository.findOne({
+      where: { email: user.email },
+    });
+    if (oldEmail !== user.email && existingUser) {
+      throw new ApiError(400, ApiErrorCode.InvalidEmail);
+    }
+
     // Update quota values only if the user has the correct permissions
     if (
       !user.hasPermission(Permission.MANAGE_USERS) &&
@@ -145,7 +155,14 @@ userSettingsRoutes.post<
       email: savedUser.email,
     });
   } catch (e) {
-    next({ status: 500, message: e.message });
+    if (e.errorCode) {
+      return next({
+        status: e.statusCode,
+        message: e.errorCode,
+      });
+    } else {
+      return next({ status: 500, message: e.message });
+    }
   }
 });
 

src/components/Blacklist/index.tsx

@@ -0,0 +1,420 @@
+import Badge from '@app/components/Common/Badge';
+import Button from '@app/components/Common/Button';
+import CachedImage from '@app/components/Common/CachedImage';
+import ConfirmButton from '@app/components/Common/ConfirmButton';
+import Header from '@app/components/Common/Header';
+import LoadingSpinner from '@app/components/Common/LoadingSpinner';
+import PageTitle from '@app/components/Common/PageTitle';
+import useDebouncedState from '@app/hooks/useDebouncedState';
+import { useUpdateQueryParams } from '@app/hooks/useUpdateQueryParams';
+import { Permission, useUser } from '@app/hooks/useUser';
+import globalMessages from '@app/i18n/globalMessages';
+import Error from '@app/pages/_error';
+import defineMessages from '@app/utils/defineMessages';
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MagnifyingGlassIcon,
+  TrashIcon,
+} from '@heroicons/react/24/solid';
+import type {
+  BlacklistItem,
+  BlacklistResultsResponse,
+} from '@server/interfaces/api/blacklistInterfaces';
+import type { MovieDetails } from '@server/models/Movie';
+import type { TvDetails } from '@server/models/Tv';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import type { ChangeEvent } from 'react';
+import { useState } from 'react';
+import { useInView } from 'react-intersection-observer';
+import { FormattedRelativeTime, useIntl } from 'react-intl';
+import { useToasts } from 'react-toast-notifications';
+import useSWR from 'swr';
+
+const messages = defineMessages('components.Blacklist', {
+  blacklistsettings: 'Blacklist Settings',
+  blacklistSettingsDescription: 'Manage blacklisted media.',
+  mediaName: 'Name',
+  mediaType: 'Type',
+  mediaTmdbId: 'tmdb Id',
+  blacklistdate: 'date',
+  blacklistedby: '{date} by {user}',
+  blacklistNotFoundError: '<strong>{title}</strong> is not blacklisted.',
+});
+
+const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => {
+  return (movie as MovieDetails).title !== undefined;
+};
+
+const Blacklist = () => {
+  const [currentPageSize, setCurrentPageSize] = useState<number>(10);
+  const [searchFilter, debouncedSearchFilter, setSearchFilter] =
+    useDebouncedState('');
+  const router = useRouter();
+  const intl = useIntl();
+
+  const page = router.query.page ? Number(router.query.page) : 1;
+  const pageIndex = page - 1;
+  const updateQueryParams = useUpdateQueryParams({ page: page.toString() });
+
+  const {
+    data,
+    error,
+    mutate: revalidate,
+  } = useSWR<BlacklistResultsResponse>(
+    `/api/v1/blacklist/?take=${currentPageSize}
+    &skip=${pageIndex * currentPageSize}
+    ${debouncedSearchFilter ? `&search=${debouncedSearchFilter}` : ''}`,
+    {
+      refreshInterval: 0,
+      revalidateOnFocus: false,
+    }
+  );
+
+  // check if there's no data and no errors in the table
+  // so as to show a spinner inside the table and not refresh the whole component
+  if (!data && error) {
+    return <Error statusCode={500} />;
+  }
+
+  const searchItem = (e: ChangeEvent<HTMLInputElement>) => {
+    // Remove the "page" query param from the URL
+    // so that the "skip" query param on line 62 is empty
+    // and the search returns results without skipping items
+    if (router.query.page) router.replace(router.basePath);
+
+    setSearchFilter(e.target.value as string);
+  };
+
+  const hasNextPage = data && data.pageInfo.pages > pageIndex + 1;
+  const hasPrevPage = pageIndex > 0;
+
+  return (
+    <>
+      <PageTitle title={[intl.formatMessage(globalMessages.blacklist)]} />
+      <Header>{intl.formatMessage(globalMessages.blacklist)}</Header>
+
+      <div className="mt-2 flex flex-grow flex-col sm:flex-grow-0 sm:flex-row sm:justify-end">
+        <div className="mb-2 flex flex-grow sm:mb-0 sm:mr-2 md:flex-grow-0">
+          <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-sm text-gray-100">
+            <MagnifyingGlassIcon className="h-6 w-6" />
+          </span>
+          <input
+            type="text"
+            className="rounded-r-only"
+            value={searchFilter}
+            onChange={(e) => searchItem(e)}
+          />
+        </div>
+      </div>
+
+      {!data ? (
+        <LoadingSpinner />
+      ) : data.results.length === 0 ? (
+        <div className="flex w-full flex-col items-center justify-center py-24 text-white">
+          <span className="text-2xl text-gray-400">
+            {intl.formatMessage(globalMessages.noresults)}
+          </span>
+        </div>
+      ) : (
+        data.results.map((item: BlacklistItem) => {
+          return (
+            <div className="py-2" key={`request-list-${item.tmdbId}`}>
+              <BlacklistedItem item={item} revalidateList={revalidate} />
+            </div>
+          );
+        })
+      )}
+
+      <div className="actions">
+        <nav
+          className="mb-3 flex flex-col items-center space-y-3 sm:flex-row sm:space-y-0"
+          aria-label="Pagination"
+        >
+          <div className="hidden lg:flex lg:flex-1">
+            <p className="text-sm">
+              {data &&
+                (data?.results.length ?? 0) > 0 &&
+                intl.formatMessage(globalMessages.showingresults, {
+                  from: pageIndex * currentPageSize + 1,
+                  to:
+                    data.results.length < currentPageSize
+                      ? pageIndex * currentPageSize + data.results.length
+                      : (pageIndex + 1) * currentPageSize,
+                  total: data.pageInfo.results,
+                  strong: (msg: React.ReactNode) => (
+                    <span className="font-medium">{msg}</span>
+                  ),
+                })}
+            </p>
+          </div>
+          <div className="flex justify-center sm:flex-1 sm:justify-start lg:justify-center">
+            <span className="-mt-3 items-center truncate text-sm sm:mt-0">
+              {intl.formatMessage(globalMessages.resultsperpage, {
+                pageSize: (
+                  <select
+                    id="pageSize"
+                    name="pageSize"
+                    onChange={(e) => {
+                      setCurrentPageSize(Number(e.target.value));
+                      router
+                        .push({
+                          pathname: router.pathname,
+                          query: router.query.userId
+                            ? { userId: router.query.userId }
+                            : {},
+                        })
+                        .then(() => window.scrollTo(0, 0));
+                    }}
+                    value={currentPageSize}
+                    className="short inline"
+                  >
+                    <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 flex-auto justify-center space-x-2 sm:flex-1 sm:justify-end">
+            <Button
+              disabled={!hasPrevPage}
+              onClick={() => updateQueryParams('page', (page - 1).toString())}
+            >
+              <ChevronLeftIcon />
+              <span>{intl.formatMessage(globalMessages.previous)}</span>
+            </Button>
+            <Button
+              disabled={!hasNextPage}
+              onClick={() => updateQueryParams('page', (page + 1).toString())}
+            >
+              <span>{intl.formatMessage(globalMessages.next)}</span>
+              <ChevronRightIcon />
+            </Button>
+          </div>
+        </nav>
+      </div>
+    </>
+  );
+};
+
+export default Blacklist;
+
+interface BlacklistedItemProps {
+  item: BlacklistItem;
+  revalidateList: () => void;
+}
+
+const BlacklistedItem = ({ item, revalidateList }: BlacklistedItemProps) => {
+  const [isUpdating, setIsUpdating] = useState<boolean>(false);
+  const { addToast } = useToasts();
+  const { ref, inView } = useInView({
+    triggerOnce: true,
+  });
+  const intl = useIntl();
+  const { hasPermission } = useUser();
+
+  const url =
+    item.mediaType === 'movie'
+      ? `/api/v1/movie/${item.tmdbId}`
+      : `/api/v1/tv/${item.tmdbId}`;
+  const { data: title, error } = useSWR<MovieDetails | TvDetails>(
+    inView ? url : null
+  );
+
+  if (!title && !error) {
+    return (
+      <div
+        className="h-64 w-full animate-pulse rounded-xl bg-gray-800 xl:h-28"
+        ref={ref}
+      />
+    );
+  }
+
+  const removeFromBlacklist = async (tmdbId: number, title?: string) => {
+    setIsUpdating(true);
+
+    const res = await fetch('/api/v1/blacklist/' + tmdbId, {
+      method: 'DELETE',
+    });
+
+    if (res.status === 204) {
+      addToast(
+        <span>
+          {intl.formatMessage(globalMessages.removeFromBlacklistSuccess, {
+            title,
+            strong: (msg: React.ReactNode) => <strong>{msg}</strong>,
+          })}
+        </span>,
+        { appearance: 'success', autoDismiss: true }
+      );
+    } else {
+      addToast(intl.formatMessage(globalMessages.blacklistError), {
+        appearance: 'error',
+        autoDismiss: true,
+      });
+    }
+
+    revalidateList();
+    setIsUpdating(false);
+  };
+
+  return (
+    <div className="relative flex w-full flex-col justify-between overflow-hidden rounded-xl bg-gray-800 py-4 text-gray-400 shadow-md ring-1 ring-gray-700 xl:h-28 xl:flex-row">
+      {title && title.backdropPath && (
+        <div className="absolute inset-0 z-0 w-full bg-cover bg-center xl:w-2/3">
+          <CachedImage
+            type="tmdb"
+            src={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${title.backdropPath}`}
+            alt=""
+            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+            fill
+          />
+          <div
+            className="absolute inset-0"
+            style={{
+              backgroundImage:
+                'linear-gradient(90deg, rgba(31, 41, 55, 0.47) 0%, rgba(31, 41, 55, 1) 100%)',
+            }}
+          />
+        </div>
+      )}
+      <div className="relative flex w-full flex-col justify-between overflow-hidden sm:flex-row">
+        <div className="relative z-10 flex w-full items-center overflow-hidden pl-4 pr-4 sm:pr-0 xl:w-7/12 2xl:w-2/3">
+          <Link
+            href={
+              item.mediaType === 'movie'
+                ? `/movie/${item.tmdbId}`
+                : `/tv/${item.tmdbId}`
+            }
+            className="relative h-auto w-12 flex-shrink-0 scale-100 transform-gpu overflow-hidden rounded-md transition duration-300 hover:scale-105"
+          >
+            <CachedImage
+              type="tmdb"
+              src={
+                title?.posterPath
+                  ? `https://image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`
+                  : '/images/overseerr_poster_not_found.png'
+              }
+              alt=""
+              sizes="100vw"
+              style={{ width: '100%', height: 'auto', objectFit: 'cover' }}
+              width={600}
+              height={900}
+            />
+          </Link>
+          <div className="flex flex-col justify-center overflow-hidden pl-2 xl:pl-4">
+            <div className="pt-0.5 text-xs font-medium text-white sm:pt-1">
+              {title &&
+                (isMovie(title)
+                  ? title.releaseDate
+                  : title.firstAirDate
+                )?.slice(0, 4)}
+            </div>
+            <Link
+              href={
+                item.mediaType === 'movie'
+                  ? `/movie/${item.tmdbId}`
+                  : `/tv/${item.tmdbId}`
+              }
+            >
+              <span className="mr-2 min-w-0 truncate text-lg font-bold text-white hover:underline xl:text-xl">
+                {title && (isMovie(title) ? title.title : title.name)}
+              </span>
+            </Link>
+          </div>
+        </div>
+
+        <div className="z-10 mt-4 ml-4 flex w-full flex-col justify-center overflow-hidden pr-4 text-sm sm:ml-2 sm:mt-0 xl:flex-1 xl:pr-0">
+          <div className="card-field">
+            <span className="card-field-name">Status</span>
+            <Badge badgeType="danger">
+              {intl.formatMessage(globalMessages.blacklisted)}
+            </Badge>
+          </div>
+
+          {item.createdAt && (
+            <div className="card-field">
+              <span className="card-field-name">
+                {intl.formatMessage(globalMessages.blacklisted)}
+              </span>
+              <span className="flex truncate text-sm text-gray-300">
+                {intl.formatMessage(messages.blacklistedby, {
+                  date: (
+                    <FormattedRelativeTime
+                      value={Math.floor(
+                        (new Date(item.createdAt).getTime() - Date.now()) / 1000
+                      )}
+                      updateIntervalInSeconds={1}
+                      numeric="auto"
+                    />
+                  ),
+                  user: (
+                    <Link href={`/users/${item.user.id}`}>
+                      <span className="group flex items-center truncate">
+                        <CachedImage
+                          type="avatar"
+                          src={item.user.avatar}
+                          alt=""
+                          className="avatar-sm ml-1.5"
+                          width={20}
+                          height={20}
+                          style={{ objectFit: 'cover' }}
+                        />
+                        <span className="ml-1 truncate text-sm font-semibold group-hover:text-white group-hover:underline">
+                          {item.user.displayName}
+                        </span>
+                      </span>
+                    </Link>
+                  ),
+                })}
+              </span>
+            </div>
+          )}
+          <div className="card-field">
+            {item.mediaType === 'movie' ? (
+              <div className="pointer-events-none z-40 self-start rounded-full border border-blue-500 bg-blue-600 bg-opacity-80 shadow-md">
+                <div className="flex h-4 items-center px-2 py-2 text-center text-xs font-medium uppercase tracking-wider text-white sm:h-5">
+                  {intl.formatMessage(globalMessages.movie)}
+                </div>
+              </div>
+            ) : (
+              <div className="pointer-events-none z-40 self-start rounded-full border border-purple-600 bg-purple-600 bg-opacity-80 shadow-md">
+                <div className="flex h-4 items-center px-2 py-2 text-center text-xs font-medium uppercase tracking-wider text-white sm:h-5">
+                  {intl.formatMessage(globalMessages.tvshow)}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="z-10 mt-4 flex w-full flex-col justify-center space-y-2 pl-4 pr-4 xl:mt-0 xl:w-96 xl:items-end xl:pl-0">
+        {hasPermission(Permission.MANAGE_BLACKLIST) && (
+          <ConfirmButton
+            onClick={() =>
+              removeFromBlacklist(
+                item.tmdbId,
+                title && (isMovie(title) ? title.title : title.name)
+              )
+            }
+            confirmText={intl.formatMessage(
+              isUpdating ? globalMessages.deleting : globalMessages.areyousure
+            )}
+            className={`w-full ${
+              isUpdating ? 'pointer-events-none opacity-50' : ''
+            }`}
+          >
+            <TrashIcon />
+            <span>
+              {intl.formatMessage(globalMessages.removefromBlacklist)}
+            </span>
+          </ConfirmButton>
+        )}
+      </div>
+    </div>
+  );
+};

src/components/BlacklistBlock/index.tsx

@@ -0,0 +1,129 @@
+import Badge from '@app/components/Common/Badge';
+import Button from '@app/components/Common/Button';
+import Tooltip from '@app/components/Common/Tooltip';
+import { useUser } from '@app/hooks/useUser';
+import globalMessages from '@app/i18n/globalMessages';
+import defineMessages from '@app/utils/defineMessages';
+import { CalendarIcon, TrashIcon, UserIcon } from '@heroicons/react/24/solid';
+import type { Blacklist } from '@server/entity/Blacklist';
+import Link from 'next/link';
+import { useState } from 'react';
+import { useIntl } from 'react-intl';
+import { useToasts } from 'react-toast-notifications';
+
+const messages = defineMessages('component.BlacklistBlock', {
+  blacklistedby: 'Blacklisted By',
+  blacklistdate: 'Blacklisted date',
+});
+
+interface BlacklistBlockProps {
+  blacklistItem: Blacklist;
+  onUpdate?: () => void;
+  onDelete?: () => void;
+}
+
+const BlacklistBlock = ({
+  blacklistItem,
+  onUpdate,
+  onDelete,
+}: BlacklistBlockProps) => {
+  const { user } = useUser();
+  const intl = useIntl();
+  const [isUpdating, setIsUpdating] = useState(false);
+  const { addToast } = useToasts();
+
+  const removeFromBlacklist = async (tmdbId: number, title?: string) => {
+    setIsUpdating(true);
+
+    const res = await fetch('/api/v1/blacklist/' + tmdbId, {
+      method: 'DELETE',
+    });
+
+    if (res.status === 204) {
+      addToast(
+        <span>
+          {intl.formatMessage(globalMessages.removeFromBlacklistSuccess, {
+            title,
+            strong: (msg: React.ReactNode) => <strong>{msg}</strong>,
+          })}
+        </span>,
+        { appearance: 'success', autoDismiss: true }
+      );
+    } else {
+      addToast(intl.formatMessage(globalMessages.blacklistError), {
+        appearance: 'error',
+        autoDismiss: true,
+      });
+    }
+
+    onUpdate && onUpdate();
+    onDelete && onDelete();
+
+    setIsUpdating(false);
+  };
+
+  return (
+    <div className="px-4 py-3 text-gray-300">
+      <div className="flex items-center justify-between">
+        <div className="mr-6 min-w-0 flex-1 flex-col items-center text-sm leading-5">
+          <div className="white mb-1 flex flex-nowrap">
+            <Tooltip content={intl.formatMessage(messages.blacklistedby)}>
+              <UserIcon className="mr-1.5 h-5 w-5 min-w-0 flex-shrink-0" />
+            </Tooltip>
+            <span className="w-40 truncate md:w-auto">
+              <Link
+                href={
+                  blacklistItem.user.id === user?.id
+                    ? '/profile'
+                    : `/users/${blacklistItem.user.id}`
+                }
+              >
+                <span className="font-semibold text-gray-100 transition duration-300 hover:text-white hover:underline">
+                  {blacklistItem.user.displayName}
+                </span>
+              </Link>
+            </span>
+          </div>
+        </div>
+        <div className="ml-2 flex flex-shrink-0 flex-wrap">
+          <Tooltip
+            content={intl.formatMessage(globalMessages.removefromBlacklist)}
+          >
+            <Button
+              buttonType="danger"
+              onClick={() =>
+                removeFromBlacklist(blacklistItem.tmdbId, blacklistItem.title)
+              }
+              disabled={isUpdating}
+            >
+              <TrashIcon className="icon-sm" />
+            </Button>
+          </Tooltip>
+        </div>
+      </div>
+      <div className="mt-2 sm:flex sm:justify-between">
+        <div className="sm:flex">
+          <div className="mr-6 flex items-center text-sm leading-5">
+            <Badge badgeType="danger">
+              {intl.formatMessage(globalMessages.blacklisted)}
+            </Badge>
+          </div>
+        </div>
+        <div className="mt-2 flex items-center text-sm leading-5 sm:mt-0">
+          <Tooltip content={intl.formatMessage(messages.blacklistdate)}>
+            <CalendarIcon className="mr-1.5 h-5 w-5 flex-shrink-0" />
+          </Tooltip>
+          <span>
+            {intl.formatDate(blacklistItem.createdAt, {
+              year: 'numeric',
+              month: 'long',
+              day: 'numeric',
+            })}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BlacklistBlock;

src/components/BlacklistModal/index.tsx

@@ -0,0 +1,79 @@
+import Modal from '@app/components/Common/Modal';
+import globalMessages from '@app/i18n/globalMessages';
+import defineMessages from '@app/utils/defineMessages';
+import { Transition } from '@headlessui/react';
+import type { MovieDetails } from '@server/models/Movie';
+import type { TvDetails } from '@server/models/Tv';
+import { useIntl } from 'react-intl';
+import useSWR from 'swr';
+
+interface BlacklistModalProps {
+  tmdbId: number;
+  type: 'movie' | 'tv' | 'collection';
+  show: boolean;
+  onComplete?: () => void;
+  onCancel?: () => void;
+  isUpdating?: boolean;
+}
+
+const messages = defineMessages('component.BlacklistModal', {
+  blacklisting: 'Blacklisting',
+});
+
+const isMovie = (
+  movie: MovieDetails | TvDetails | undefined
+): movie is MovieDetails => {
+  if (!movie) return false;
+  return (movie as MovieDetails).title !== undefined;
+};
+
+const BlacklistModal = ({
+  tmdbId,
+  type,
+  show,
+  onComplete,
+  onCancel,
+  isUpdating,
+}: BlacklistModalProps) => {
+  const intl = useIntl();
+
+  const { data, error } = useSWR<TvDetails | MovieDetails>(
+    `/api/v1/${type}/${tmdbId}`
+  );
+
+  return (
+    <Transition
+      as="div"
+      enter="transition-opacity duration-300"
+      enterFrom="opacity-0"
+      enterTo="opacity-100"
+      leave="transition-opacity duration-300"
+      leaveFrom="opacity-100"
+      leaveTo="opacity-0"
+      show={show}
+    >
+      <Modal
+        loading={!data && !error}
+        backgroundClickable
+        title={`${intl.formatMessage(globalMessages.blacklist)} ${
+          isMovie(data)
+            ? intl.formatMessage(globalMessages.movie)
+            : intl.formatMessage(globalMessages.tvshow)
+        }`}
+        subTitle={`${isMovie(data) ? data.title : data?.name}`}
+        onCancel={onCancel}
+        onOk={onComplete}
+        okText={
+          isUpdating
+            ? intl.formatMessage(messages.blacklisting)
+            : intl.formatMessage(globalMessages.blacklist)
+        }
+        okButtonType="danger"
+        okDisabled={isUpdating}
+        backdrop={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data?.backdropPath}`}
+      />
+    </Transition>
+  );
+};
+
+export default BlacklistModal;

src/components/CollectionDetails/index.tsx

@@ -183,6 +183,11 @@ const CollectionDetails = ({ collection }: CollectionDetailsProps) => {
     );
   }
 
+  const blacklistVisibility = hasPermission(
+    [Permission.MANAGE_BLACKLIST, Permission.VIEW_BLACKLIST],
+    { type: 'or' }
+  );
+
   return (
     <div
       className="media-page"
@@ -193,6 +198,7 @@ const CollectionDetails = ({ collection }: CollectionDetailsProps) => {
       {data.backdropPath && (
         <div className="media-page-bg-image">
           <CachedImage
+            type="tmdb"
             alt=""
             src={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath}`}
             style={{ width: '100%', height: '100%', objectFit: 'cover' }}
@@ -223,6 +229,7 @@ const CollectionDetails = ({ collection }: CollectionDetailsProps) => {
       <div className="media-header">
         <div className="media-poster">
           <CachedImage
+            type="tmdb"
             src={
               data.posterPath
                 ? `https://image.tmdb.org/t/p/w600_and_h900_bestv2${data.posterPath}`
@@ -335,20 +342,26 @@ const CollectionDetails = ({ collection }: CollectionDetailsProps) => {
         sliderKey="collection-movies"
         isLoading={false}
         isEmpty={data.parts.length === 0}
-        items={data.parts.map((title) => (
-          <TitleCard
-            key={`collection-movie-${title.id}`}
-            id={title.id}
-            isAddedToWatchlist={title.mediaInfo?.watchlists?.length ?? 0}
-            image={title.posterPath}
-            status={title.mediaInfo?.status}
-            summary={title.overview}
-            title={title.title}
-            userScore={title.voteAverage}
-            year={title.releaseDate}
-            mediaType={title.mediaType}
-          />
-        ))}
+        items={data.parts
+          .filter((title) => {
+            if (!blacklistVisibility)
+              return title.mediaInfo?.status !== MediaStatus.BLACKLISTED;
+            return title;
+          })
+          .map((title) => (
+            <TitleCard
+              key={`collection-movie-${title.id}`}
+              id={title.id}
+              isAddedToWatchlist={title.mediaInfo?.watchlists?.length ?? 0}
+              image={title.posterPath}
+              status={title.mediaInfo?.status}
+              summary={title.overview}
+              title={title.title}
+              userScore={title.voteAverage}
+              year={title.releaseDate}
+              mediaType={title.mediaType}
+            />
+          ))}
       />
       <div className="extra-bottom-space relative" />
     </div>

src/components/Common/CachedImage/index.tsx

@@ -4,21 +4,31 @@ import Image from 'next/image';
 
 const imageLoader: ImageLoader = ({ src }) => src;
 
+export type CachedImageProps = ImageProps & {
+  src: string;
+  type: 'tmdb' | 'avatar';
+};
+
 /**
  * The CachedImage component should be used wherever
  * we want to offer the option to locally cache images.
  **/
-const CachedImage = ({ src, ...props }: ImageProps) => {
+const CachedImage = ({ src, type, ...props }: CachedImageProps) => {
   const { currentSettings } = useSettings();
 
-  let imageUrl = src;
+  let imageUrl: string;
 
-  if (typeof imageUrl === 'string' && imageUrl.startsWith('http')) {
-    const parsedUrl = new URL(imageUrl);
-
-    if (parsedUrl.host === 'image.tmdb.org' && currentSettings.cacheImages) {
-      imageUrl = imageUrl.replace('https://image.tmdb.org', '/imageproxy');
-    }
+  if (type === 'tmdb') {
+    // tmdb stuff
+    imageUrl =
+      currentSettings.cacheImages && !src.startsWith('/')
+        ? src.replace(/^https:\/\/image\.tmdb\.org\//, '/imageproxy/')
+        : src;
+  } else if (type === 'avatar') {
+    // jellyfin avatar (if any)
+    imageUrl = src;
+  } else {
+    return null;
   }
 
   return <Image unoptimized loader={imageLoader} src={imageUrl} {...props} />;

src/components/Common/ImageFader/index.tsx

@@ -61,6 +61,7 @@ const ImageFader: ForwardRefRenderFunction<HTMLDivElement, ImageFaderProps> = (
           {...props}
         >
           <CachedImage
+            type="tmdb"
             className="absolute inset-0 h-full w-full"
             alt=""
             src={imageUrl}

src/components/Common/ListView/index.tsx

@@ -1,8 +1,10 @@
 import PersonCard from '@app/components/PersonCard';
 import TitleCard from '@app/components/TitleCard';
 import TmdbTitleCard from '@app/components/TitleCard/TmdbTitleCard';
+import { Permission, useUser } from '@app/hooks/useUser';
 import useVerticalScroll from '@app/hooks/useVerticalScroll';
 import globalMessages from '@app/i18n/globalMessages';
+import { MediaStatus } from '@server/constants/media';
 import type { WatchlistItem } from '@server/interfaces/api/discoverInterfaces';
 import type {
   CollectionResult,
@@ -32,7 +34,14 @@ const ListView = ({
   mutateParent,
 }: ListViewProps) => {
   const intl = useIntl();
+  const { hasPermission } = useUser();
   useVerticalScroll(onScrollBottom, !isLoading && !isEmpty && !isReachingEnd);
+
+  const blacklistVisibility = hasPermission(
+    [Permission.MANAGE_BLACKLIST, Permission.VIEW_BLACKLIST],
+    { type: 'or' }
+  );
+
   return (
     <>
       {isEmpty && (
@@ -55,76 +64,89 @@ const ListView = ({
             </li>
           );
         })}
-        {items?.map((title, index) => {
-          let titleCard: React.ReactNode;
+        {items
+          ?.filter((title) => {
+            if (!blacklistVisibility)
+              return (
+                (title as TvResult | MovieResult).mediaInfo?.status !==
+                MediaStatus.BLACKLISTED
+              );
+            return title;
+          })
+          .map((title, index) => {
+            let titleCard: React.ReactNode;
 
-          switch (title.mediaType) {
-            case 'movie':
-              titleCard = (
-                <TitleCard
-                  key={title.id}
-                  id={title.id}
-                  isAddedToWatchlist={title.mediaInfo?.watchlists?.length ?? 0}
-                  image={title.posterPath}
-                  status={title.mediaInfo?.status}
-                  summary={title.overview}
-                  title={title.title}
-                  userScore={title.voteAverage}
-                  year={title.releaseDate}
-                  mediaType={title.mediaType}
-                  inProgress={
-                    (title.mediaInfo?.downloadStatus ?? []).length > 0
-                  }
-                  canExpand
-                />
-              );
-              break;
-            case 'tv':
-              titleCard = (
-                <TitleCard
-                  key={title.id}
-                  id={title.id}
-                  isAddedToWatchlist={title.mediaInfo?.watchlists?.length ?? 0}
-                  image={title.posterPath}
-                  status={title.mediaInfo?.status}
-                  summary={title.overview}
-                  title={title.name}
-                  userScore={title.voteAverage}
-                  year={title.firstAirDate}
-                  mediaType={title.mediaType}
-                  inProgress={
-                    (title.mediaInfo?.downloadStatus ?? []).length > 0
-                  }
-                  canExpand
-                />
-              );
-              break;
-            case 'collection':
-              titleCard = (
-                <TitleCard
-                  id={title.id}
-                  image={title.posterPath}
-                  summary={title.overview}
-                  title={title.title}
-                  mediaType={title.mediaType}
-                  canExpand
-                />
-              );
-              break;
-            case 'person':
-              titleCard = (
-                <PersonCard
-                  personId={title.id}
-                  name={title.name}
-                  profilePath={title.profilePath}
-                  canExpand
-                />
-              );
-              break;
-          }
+            switch (title.mediaType) {
+              case 'movie':
+                titleCard = (
+                  <TitleCard
+                    key={title.id}
+                    id={title.id}
+                    isAddedToWatchlist={
+                      title.mediaInfo?.watchlists?.length ?? 0
+                    }
+                    image={title.posterPath}
+                    status={title.mediaInfo?.status}
+                    summary={title.overview}
+                    title={title.title}
+                    userScore={title.voteAverage}
+                    year={title.releaseDate}
+                    mediaType={title.mediaType}
+                    inProgress={
+                      (title.mediaInfo?.downloadStatus ?? []).length > 0
+                    }
+                    canExpand
+                  />
+                );
+                break;
+              case 'tv':
+                titleCard = (
+                  <TitleCard
+                    key={title.id}
+                    id={title.id}
+                    isAddedToWatchlist={
+                      title.mediaInfo?.watchlists?.length ?? 0
+                    }
+                    image={title.posterPath}
+                    status={title.mediaInfo?.status}
+                    summary={title.overview}
+                    title={title.name}
+                    userScore={title.voteAverage}
+                    year={title.firstAirDate}
+                    mediaType={title.mediaType}
+                    inProgress={
+                      (title.mediaInfo?.downloadStatus ?? []).length > 0
+                    }
+                    canExpand
+                  />
+                );
+                break;
+              case 'collection':
+                titleCard = (
+                  <TitleCard
+                    id={title.id}
+                    image={title.posterPath}
+                    summary={title.overview}
+                    title={title.title}
+                    mediaType={title.mediaType}
+                    canExpand
+                  />
+                );
+                break;
+              case 'person':
+                titleCard = (
+                  <PersonCard
+                    personId={title.id}
+                    name={title.name}
+                    profilePath={title.profilePath}
+                    canExpand
+                  />
+                );
+                break;
+            }
 
-          return <li key={`${title.id}-${index}`}>{titleCard}</li>;
-        })}
+            return <li key={`${title.id}-${index}`}>{titleCard}</li>;
+          })}
         {isLoading &&
           !isReachingEnd &&
           [...Array(20)].map((_item, i) => (

src/components/Common/Modal/index.tsx

@@ -123,6 +123,7 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
           {backdrop && (
             <div className="absolute top-0 left-0 right-0 z-0 h-64 max-h-full w-full">
               <CachedImage
+                type="tmdb"
                 alt=""
                 src={backdrop}
                 style={{ width: '100%', height: '100%', objectFit: 'cover' }}

src/components/Common/StatusBadgeMini/index.tsx

@@ -1,6 +1,11 @@
 import Spinner from '@app/assets/spinner.svg';
 import { CheckCircleIcon } from '@heroicons/react/20/solid';
-import { BellIcon, ClockIcon, MinusSmallIcon } from '@heroicons/react/24/solid';
+import {
+  BellIcon,
+  ClockIcon,
+  EyeSlashIcon,
+  MinusSmallIcon,
+} from '@heroicons/react/24/solid';
 import { MediaStatus } from '@server/constants/media';
 
 interface StatusBadgeMiniProps {
@@ -44,6 +49,10 @@ const StatusBadgeMini = ({
       );
       indicatorIcon = <BellIcon />;
       break;
+    case MediaStatus.BLACKLISTED:
+      badgeStyle.push('bg-red-500 border-white-400 ring-white-400 text-white');
+      indicatorIcon = <EyeSlashIcon />;
+      break;
     case MediaStatus.PARTIALLY_AVAILABLE:
       badgeStyle.push(
         'bg-green-500 border-green-400 ring-green-400 text-green-100'

src/components/CompanyCard/index.tsx

@@ -33,6 +33,7 @@ const CompanyCard = ({ image, url, name }: CompanyCardProps) => {
     >
       <div className="relative h-full w-full">
         <CachedImage
+          type="tmdb"
           src={image}
           alt={name}
           className="relative z-40 h-full w-full"

src/components/Discover/FilterSlideover/index.tsx

@@ -8,6 +8,7 @@ import {
   CompanySelector,
   GenreSelector,
   KeywordSelector,
+  StatusSelector,
   WatchProviderSelector,
 } from '@app/components/Selector';
 import useSettings from '@app/hooks/useSettings';
@@ -40,6 +41,7 @@ const messages = defineMessages('components.Discover.FilterSlideover', {
   runtime: 'Runtime',
   streamingservices: 'Streaming Services',
   voteCount: 'Number of votes between {minValue} and {maxValue}',
+  status: 'Status',
 });
 
 type FilterSlideoverProps = {
@@ -150,6 +152,23 @@ const FilterSlideover = ({
             updateQueryParams('genre', value?.map((v) => v.value).join(','));
           }}
         />
+        {type === 'tv' && (
+          <>
+            <span className="text-lg font-semibold">
+              {intl.formatMessage(messages.status)}
+            </span>
+            <StatusSelector
+              defaultValue={currentFilters.status}
+              isMulti
+              onChange={(value) => {
+                updateQueryParams(
+                  'status',
+                  value?.map((v) => v.value).join('|')
+                );
+              }}
+            />
+          </>
+        )}
         <span className="text-lg font-semibold">
           {intl.formatMessage(messages.keywords)}
         </span>

src/components/Discover/constants.ts

@@ -108,6 +108,7 @@ export const QueryFilterOptions = z.object({
   voteCountGte: z.string().optional(),
   watchRegion: z.string().optional(),
   watchProviders: z.string().optional(),
+  status: z.string().optional(),
 });
 
 export type FilterOptions = z.infer<typeof QueryFilterOptions>;
@@ -147,6 +148,10 @@ export const prepareFilterValues = (
     filterValues.genre = values.genre;
   }
 
+  if (values.status) {
+    filterValues.status = values.status;
+  }
+
   if (values.keywords) {
     filterValues.keywords = values.keywords;
   }

src/components/GenreCard/index.tsx

@@ -36,6 +36,7 @@ const GenreCard = ({ image, url, name, canExpand = false }: GenreCardProps) => {
       tabIndex={0}
     >
       <CachedImage
+        type="tmdb"
         src={image}
         alt=""
         style={{ width: '100%', height: '100%', objectFit: 'cover' }}

src/components/IssueDetails/IssueComment/index.tsx

@@ -1,4 +1,5 @@
 import Button from '@app/components/Common/Button';
+import CachedImage from '@app/components/Common/CachedImage';
 import Modal from '@app/components/Common/Modal';
 import { Permission, useUser } from '@app/hooks/useUser';
 import defineMessages from '@app/utils/defineMessages';
@@ -6,7 +7,6 @@ import { Menu, Transition } from '@headlessui/react';
 import { EllipsisVerticalIcon } from '@heroicons/react/24/solid';
 import type { default as IssueCommentType } from '@server/entity/IssueComment';
 import { Field, Form, Formik } from 'formik';
-import Image from 'next/image';
 import Link from 'next/link';
 import { Fragment, useState } from 'react';
 import { FormattedRelativeTime, useIntl } from 'react-intl';
@@ -88,7 +88,8 @@ const IssueComment = ({
         </Modal>
       </Transition>
       <Link href={isActiveUser ? '/profile' : `/users/${comment.user.id}`}>
-        <Image
+        <CachedImage
+          type="avatar"
           src={comment.user.avatar}
           alt=""
           className="h-10 w-10 scale-100 transform-gpu rounded-full object-cover ring-1 ring-gray-500 transition duration-300 hover:scale-105"

src/components/IssueDetails/index.tsx

@@ -28,7 +28,6 @@ import type Issue from '@server/entity/Issue';
 import type { MovieDetails } from '@server/models/Movie';
 import type { TvDetails } from '@server/models/Tv';
 import { Field, Form, Formik } from 'formik';
-import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
@@ -218,6 +217,7 @@ const IssueDetails = () => {
       {data.backdropPath && (
         <div className="media-page-bg-image">
           <CachedImage
+            type="tmdb"
             alt=""
             src={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath}`}
             style={{ width: '100%', height: '100%', objectFit: 'cover' }}
@@ -236,6 +236,7 @@ const IssueDetails = () => {
       <div className="media-header">
         <div className="media-poster">
           <CachedImage
+            type="tmdb"
             src={
               data.posterPath
                 ? `https://image.tmdb.org/t/p/w600_and_h900_bestv2${data.posterPath}`
@@ -287,10 +288,11 @@ const IssueDetails = () => {
                   }
                   className="group ml-1 inline-flex h-full items-center xl:ml-1.5"
                 >
-                  <Image
-                    className="mr-0.5 h-5 w-5 scale-100 transform-gpu rounded-full object-cover transition duration-300 group-hover:scale-105 xl:mr-1 xl:h-6 xl:w-6"
+                  <CachedImage
+                    type="avatar"
                     src={issueData.createdBy.avatar}
                     alt=""
+                    className="mr-0.5 h-5 w-5 scale-100 transform-gpu rounded-full object-cover transition duration-300 group-hover:scale-105 xl:mr-1 xl:h-6 xl:w-6"
                     width={20}
                     height={20}
                   />

src/components/IssueList/IssueItem/index.tsx

@@ -11,7 +11,6 @@ import { MediaType } from '@server/constants/media';
 import type Issue from '@server/entity/Issue';
 import type { MovieDetails } from '@server/models/Movie';
 import type { TvDetails } from '@server/models/Tv';
-import Image from 'next/image';
 import Link from 'next/link';
 import { useInView } from 'react-intersection-observer';
 import { FormattedRelativeTime, useIntl } from 'react-intl';
@@ -113,6 +112,7 @@ const IssueItem = ({ issue }: IssueItemProps) => {
       {title.backdropPath && (
         <div className="absolute inset-0 z-0 w-full bg-cover bg-center xl:w-2/3">
           <CachedImage
+            type="tmdb"
             src={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${title.backdropPath}`}
             alt=""
             style={{ width: '100%', height: '100%', objectFit: 'cover' }}
@@ -138,6 +138,7 @@ const IssueItem = ({ issue }: IssueItemProps) => {
             className="relative h-auto w-12 flex-shrink-0 scale-100 transform-gpu overflow-hidden rounded-md transition duration-300 hover:scale-105"
           >
             <CachedImage
+              type="tmdb"
               src={
                 title.posterPath
                   ? `https://image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`
@@ -226,7 +227,8 @@ const IssueItem = ({ issue }: IssueItemProps) => {
                         href={`/users/${issue.createdBy.id}`}
                         className="group flex items-center truncate"
                       >
-                        <Image
+                        <CachedImage
+                          type="avatar"
                           src={issue.createdBy.avatar}
                           alt=""
                           className="avatar-sm ml-1.5 object-cover"

src/components/Layout/MobileMenu/index.tsx

@@ -7,6 +7,7 @@ import {
   CogIcon,
   EllipsisHorizontalIcon,
   ExclamationTriangleIcon,
+  EyeSlashIcon,
   FilmIcon,
   SparklesIcon,
   TvIcon,
@@ -16,6 +17,7 @@ import {
   ClockIcon as FilledClockIcon,
   CogIcon as FilledCogIcon,
   ExclamationTriangleIcon as FilledExclamationTriangleIcon,
+  EyeSlashIcon as FilledEyeSlashIcon,
   FilmIcon as FilledFilmIcon,
   SparklesIcon as FilledSparklesIcon,
   TvIcon as FilledTvIcon,
@@ -84,6 +86,18 @@ const MobileMenu = () => {
       svgIconSelected: <FilledClockIcon className="h-6 w-6" />,
       activeRegExp: /^\/requests/,
     },
+    {
+      href: '/blacklist',
+      content: intl.formatMessage(menuMessages.blacklist),
+      svgIcon: <EyeSlashIcon className="h-6 w-6" />,
+      svgIconSelected: <FilledEyeSlashIcon className="h-6 w-6" />,
+      activeRegExp: /^\/blacklist/,
+      requiredPermission: [
+        Permission.MANAGE_BLACKLIST,
+        Permission.VIEW_BLACKLIST,
+      ],
+      permissionType: 'or',
+    },
     {
       href: '/issues',
       content: intl.formatMessage(menuMessages.issues),

src/components/Layout/Sidebar/index.tsx

@@ -8,6 +8,7 @@ import {
   ClockIcon,
   CogIcon,
   ExclamationTriangleIcon,
+  EyeSlashIcon,
   FilmIcon,
   SparklesIcon,
   TvIcon,
@@ -25,6 +26,7 @@ export const menuMessages = defineMessages('components.Layout.Sidebar', {
   browsemovies: 'Movies',
   browsetv: 'Series',
   requests: 'Requests',
+  blacklist: 'Blacklist',
   issues: 'Issues',
   users: 'Users',
   settings: 'Settings',
@@ -71,6 +73,17 @@ const SidebarLinks: SidebarLinkProps[] = [
     svgIcon: <ClockIcon className="mr-3 h-6 w-6" />,
     activeRegExp: /^\/requests/,
   },
+  {
+    href: '/blacklist',
+    messagesKey: 'blacklist',
+    svgIcon: <EyeSlashIcon className="mr-3 h-6 w-6" />,
+    activeRegExp: /^\/blacklist/,
+    requiredPermission: [
+      Permission.MANAGE_BLACKLIST,
+      Permission.VIEW_BLACKLIST,
+    ],
+    permissionType: 'or',
+  },
   {
     href: '/issues',
     messagesKey: 'issues',

src/components/Layout/UserDropdown/index.tsx

@@ -1,3 +1,4 @@
+import CachedImage from '@app/components/Common/CachedImage';
 import MiniQuotaDisplay from '@app/components/Layout/UserDropdown/MiniQuotaDisplay';
 import { useUser } from '@app/hooks/useUser';
 import defineMessages from '@app/utils/defineMessages';
@@ -7,7 +8,6 @@ import {
   ClockIcon,
 } from '@heroicons/react/24/outline';
 import { CogIcon, UserIcon } from '@heroicons/react/24/solid';
-import Image from 'next/image';
 import type { LinkProps } from 'next/link';
 import Link from 'next/link';
 import { forwardRef, Fragment } from 'react';
@@ -56,9 +56,10 @@ const UserDropdown = () => {
           className="flex max-w-xs items-center rounded-full text-sm ring-1 ring-gray-700 hover:ring-gray-500 focus:outline-none focus:ring-gray-500"
           data-testid="user-menu"
         >
-          <Image
+          <CachedImage
+            type="avatar"
             className="h-8 w-8 rounded-full object-cover sm:h-10 sm:w-10"
-            src={user?.avatar || ''}
+            src={user ? user.avatar : ''}
             alt=""
             width={40}
             height={40}
@@ -79,9 +80,10 @@ const UserDropdown = () => {
           <div className="divide-y divide-gray-700 rounded-md bg-gray-800 bg-opacity-80 ring-1 ring-gray-700 backdrop-blur">
             <div className="flex flex-col space-y-4 px-4 py-4">
               <div className="flex items-center space-x-2">
-                <Image
+                <CachedImage
+                  type="avatar"
                   className="h-8 w-8 rounded-full object-cover sm:h-10 sm:w-10"
-                  src={user?.avatar || ''}
+                  src={user ? user.avatar : ''}
                   alt=""
                   width={40}
                   height={40}

src/components/ManageSlideOver/index.tsx

@@ -1,4 +1,6 @@
+import BlacklistBlock from '@app/components/BlacklistBlock';
 import Button from '@app/components/Common/Button';
+import CachedImage from '@app/components/Common/CachedImage';
 import ConfirmButton from '@app/components/Common/ConfirmButton';
 import SlideOver from '@app/components/Common/SlideOver';
 import Tooltip from '@app/components/Common/Tooltip';
@@ -26,7 +28,6 @@ import type { MediaWatchDataResponse } from '@server/interfaces/api/mediaInterfa
 import type { RadarrSettings, SonarrSettings } from '@server/lib/settings';
 import type { MovieDetails } from '@server/models/Movie';
 import type { TvDetails } from '@server/models/Tv';
-import Image from 'next/image';
 import Link from 'next/link';
 import { useIntl } from 'react-intl';
 import useSWR from 'swr';
@@ -284,6 +285,20 @@ const ManageSlideOver = ({
             </div>
           </div>
         )}
+        {data.mediaInfo?.status === MediaStatus.BLACKLISTED && (
+          <div>
+            <h3 className="mb-2 text-xl font-bold">
+              {intl.formatMessage(globalMessages.blacklist)}
+            </h3>
+            <div className="overflow-hidden rounded-md border border-gray-700 shadow">
+              <BlacklistBlock
+                blacklistItem={data.mediaInfo.blacklist}
+                onUpdate={() => revalidate()}
+                onDelete={() => onClose()}
+              />
+            </div>
+          </div>
+        )}
         {hasPermission(Permission.ADMIN) &&
           (data.mediaInfo?.serviceUrl ||
             data.mediaInfo?.tautulliUrl ||
@@ -353,7 +368,8 @@ const ManageSlideOver = ({
                                     key={`watch-user-${user.id}`}
                                     content={user.displayName}
                                   >
-                                    <Image
+                                    <CachedImage
+                                      type="avatar"
                                       src={user.avatar}
                                       alt={user.displayName}
                                       className="h-8 w-8 scale-100 transform-gpu rounded-full object-cover ring-1 ring-gray-500 transition duration-300 hover:scale-105"
@@ -514,7 +530,8 @@ const ManageSlideOver = ({
                                     key={`watch-user-${user.id}`}
                                     content={user.displayName}
                                   >
-                                    <Image
+                                    <CachedImage
+                                      type="avatar"
                                       src={user.avatar}
                                       alt={user.displayName}
                                       className="h-8 w-8 scale-100 transform-gpu rounded-full object-cover ring-1 ring-gray-500 transition duration-300 hover:scale-105"
@@ -603,32 +620,17 @@ const ManageSlideOver = ({
               </div>
             </div>
           )}
-        {hasPermission(Permission.ADMIN) && data?.mediaInfo && (
-          <div>
-            <h3 className="mb-2 text-xl font-bold">
-              {intl.formatMessage(messages.manageModalAdvanced)}
-            </h3>
-            <div className="space-y-2">
-              {data?.mediaInfo.status !== MediaStatus.AVAILABLE && (
-                <Button
-                  onClick={() => markAvailable()}
-                  className="w-full"
-                  buttonType="success"
-                >
-                  <CheckCircleIcon />
-                  <span>
-                    {intl.formatMessage(
-                      mediaType === 'movie'
-                        ? messages.markavailable
-                        : messages.markallseasonsavailable
-                    )}
-                  </span>
-                </Button>
-              )}
-              {data?.mediaInfo.status4k !== MediaStatus.AVAILABLE &&
-                settings.currentSettings.series4kEnabled && (
+        {hasPermission(Permission.ADMIN) &&
+          data?.mediaInfo &&
+          data.mediaInfo.status !== MediaStatus.BLACKLISTED && (
+            <div>
+              <h3 className="mb-2 text-xl font-bold">
+                {intl.formatMessage(messages.manageModalAdvanced)}
+              </h3>
+              <div className="space-y-2">
+                {data?.mediaInfo.status !== MediaStatus.AVAILABLE && (
                   <Button
-                    onClick={() => markAvailable(true)}
+                    onClick={() => markAvailable()}
                     className="w-full"
                     buttonType="success"
                   >
@@ -636,42 +638,59 @@ const ManageSlideOver = ({
                     <span>
                       {intl.formatMessage(
                         mediaType === 'movie'
-                          ? messages.mark4kavailable
-                          : messages.markallseasons4kavailable
+                          ? messages.markavailable
+                          : messages.markallseasonsavailable
                       )}
                     </span>
                   </Button>
                 )}
-              <div>
-                <ConfirmButton
-                  onClick={() => deleteMedia()}
-                  confirmText={intl.formatMessage(globalMessages.areyousure)}
-                  className="w-full"
-                >
-                  <DocumentMinusIcon />
-                  <span>
-                    {intl.formatMessage(messages.manageModalClearMedia)}
-                  </span>
-                </ConfirmButton>
-                <div className="mt-2 text-xs text-gray-400">
-                  {intl.formatMessage(messages.manageModalClearMediaWarning, {
-                    mediaType: intl.formatMessage(
-                      mediaType === 'movie' ? messages.movie : messages.tvshow
-                    ),
-                    mediaServerName:
-                      settings.currentSettings.mediaServerType ===
-                      MediaServerType.EMBY
-                        ? 'Emby'
-                        : settings.currentSettings.mediaServerType ===
-                          MediaServerType.PLEX
-                        ? 'Plex'
-                        : 'Jellyfin',
-                  })}
+                {data?.mediaInfo.status4k !== MediaStatus.AVAILABLE &&
+                  settings.currentSettings.series4kEnabled && (
+                    <Button
+                      onClick={() => markAvailable(true)}
+                      className="w-full"
+                      buttonType="success"
+                    >
+                      <CheckCircleIcon />
+                      <span>
+                        {intl.formatMessage(
+                          mediaType === 'movie'
+                            ? messages.mark4kavailable
+                            : messages.markallseasons4kavailable
+                        )}
+                      </span>
+                    </Button>
+                  )}
+                <div>
+                  <ConfirmButton
+                    onClick={() => deleteMedia()}
+                    confirmText={intl.formatMessage(globalMessages.areyousure)}
+                    className="w-full"
+                  >
+                    <DocumentMinusIcon />
+                    <span>
+                      {intl.formatMessage(messages.manageModalClearMedia)}
+                    </span>
+                  </ConfirmButton>
+                  <div className="mt-2 text-xs text-gray-400">
+                    {intl.formatMessage(messages.manageModalClearMediaWarning, {
+                      mediaType: intl.formatMessage(
+                        mediaType === 'movie' ? messages.movie : messages.tvshow
+                      ),
+                      mediaServerName:
+                        settings.currentSettings.mediaServerType ===
+                        MediaServerType.EMBY
+                          ? 'Emby'
+                          : settings.currentSettings.mediaServerType ===
+                            MediaServerType.PLEX
+                          ? 'Plex'
+                          : 'Jellyfin',
+                    })}
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-        )}
+          )}
       </div>
     </SlideOver>
   );

src/components/MediaSlider/index.tsx

@@ -3,8 +3,10 @@ import PersonCard from '@app/components/PersonCard';
 import Slider from '@app/components/Slider';
 import TitleCard from '@app/components/TitleCard';
 import useSettings from '@app/hooks/useSettings';
+import { useUser } from '@app/hooks/useUser';
 import { ArrowRightCircleIcon } from '@heroicons/react/24/outline';
 import { MediaStatus } from '@server/constants/media';
+import { Permission } from '@server/lib/permissions';
 import type {
   MovieResult,
   PersonResult,
@@ -41,6 +43,7 @@ const MediaSlider = ({
   onNewTitles,
 }: MediaSliderProps) => {
   const settings = useSettings();
+  const { hasPermission } = useUser();
   const { data, error, setSize, size } = useSWRInfinite<MixedResult>(
     (pageIndex: number, previousPageData: MixedResult | null) => {
       if (previousPageData && pageIndex + 1 > previousPageData.totalPages) {
@@ -90,50 +93,65 @@ const MediaSlider = ({
     return null;
   }
 
-  const finalTitles = titles.slice(0, 20).map((title) => {
-    switch (title.mediaType) {
-      case 'movie':
+  const blacklistVisibility = hasPermission(
+    [Permission.MANAGE_BLACKLIST, Permission.VIEW_BLACKLIST],
+    { type: 'or' }
+  );
+
+  const finalTitles = titles
+    .slice(0, 20)
+    .filter((title) => {
+      if (!blacklistVisibility)
         return (
-          <TitleCard
-            key={title.id}
-            id={title.id}
-            isAddedToWatchlist={title.mediaInfo?.watchlists?.length ?? 0}
-            image={title.posterPath}
-            status={title.mediaInfo?.status}
-            summary={title.overview}
-            title={title.title}
-            userScore={title.voteAverage}
-            year={title.releaseDate}
-            mediaType={title.mediaType}
-            inProgress={(title.mediaInfo?.downloadStatus ?? []).length > 0}
-          />
+          (title as TvResult | MovieResult).mediaInfo?.status !==
+          MediaStatus.BLACKLISTED
         );
-      case 'tv':
-        return (
-          <TitleCard
-            key={title.id}
-            id={title.id}
-            isAddedToWatchlist={title.mediaInfo?.watchlists?.length ?? 0}
-            image={title.posterPath}
-            status={title.mediaInfo?.status}
-            summary={title.overview}
-            title={title.name}
-            userScore={title.voteAverage}
-            year={title.firstAirDate}
-            mediaType={title.mediaType}
-            inProgress={(title.mediaInfo?.downloadStatus ?? []).length > 0}
-          />
-        );
-      case 'person':
-        return (
-          <PersonCard
-            personId={title.id}
-            name={title.name}
-            profilePath={title.profilePath}
-          />
-        );
-    }
-  });
+      return title;
+    })
+    .map((title) => {
+      switch (title.mediaType) {
+        case 'movie':
+          return (
+            <TitleCard
+              key={title.id}
+              id={title.id}
+              isAddedToWatchlist={title.mediaInfo?.watchlists?.length ?? 0}
+              image={title.posterPath}
+              status={title.mediaInfo?.status}
+              summary={title.overview}
+              title={title.title}
+              userScore={title.voteAverage}
+              year={title.releaseDate}
+              mediaType={title.mediaType}
+              inProgress={(title.mediaInfo?.downloadStatus ?? []).length > 0}
+            />
+          );
+        case 'tv':
+          return (
+            <TitleCard
+              key={title.id}
+              id={title.id}
+              isAddedToWatchlist={title.mediaInfo?.watchlists?.length ?? 0}
+              image={title.posterPath}
+              status={title.mediaInfo?.status}
+              summary={title.overview}
+              title={title.name}
+              userScore={title.voteAverage}
+              year={title.firstAirDate}
+              mediaType={title.mediaType}
+              inProgress={(title.mediaInfo?.downloadStatus ?? []).length > 0}
+            />
+          );
+        case 'person':
+          return (
+            <PersonCard
+              personId={title.id}
+              name={title.name}
+              profilePath={title.profilePath}
+            />
+          );
+      }
+    });
 
   if (linkUrl && titles.length > 20) {
     finalTitles.push(

src/components/MovieDetails/index.tsx

@@ -5,6 +5,7 @@ import RTRotten from '@app/assets/rt_rotten.svg';
 import ImdbLogo from '@app/assets/services/imdb.svg';
 import Spinner from '@app/assets/spinner.svg';
 import TmdbLogo from '@app/assets/tmdb_logo.svg';
+import BlacklistModal from '@app/components/BlacklistModal';
 import Button from '@app/components/Common/Button';
 import CachedImage from '@app/components/Common/CachedImage';
 import LoadingSpinner from '@app/components/Common/LoadingSpinner';
@@ -35,6 +36,7 @@ import {
   CloudIcon,
   CogIcon,
   ExclamationTriangleIcon,
+  EyeSlashIcon,
   FilmIcon,
   PlayIcon,
   TicketIcon,
@@ -55,7 +57,7 @@ import 'country-flag-icons/3x2/flags.css';
 import { uniqBy } from 'lodash';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';
@@ -125,6 +127,9 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
   const [toggleWatchlist, setToggleWatchlist] = useState<boolean>(
     !movie?.onUserWatchlist
   );
+  const [isBlacklistUpdating, setIsBlacklistUpdating] =
+    useState<boolean>(false);
+  const [showBlacklistModal, setShowBlacklistModal] = useState(false);
   const { addToast } = useToasts();
 
   const {
@@ -155,6 +160,11 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
     setShowManager(router.query.manage == '1' ? true : false);
   }, [router.query.manage]);
 
+  const closeBlacklistModal = useCallback(
+    () => setShowBlacklistModal(false),
+    []
+  );
+
   const { mediaUrl: plexUrl, mediaUrl4k: plexUrl4k } = useDeepLinks({
     mediaUrl: data?.mediaInfo?.mediaUrl,
     mediaUrl4k: data?.mediaInfo?.mediaUrl4k,
@@ -374,6 +384,60 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
     }
   };
 
+  const onClickHideItemBtn = async (): Promise<void> => {
+    setIsBlacklistUpdating(true);
+
+    const res = await fetch('/api/v1/blacklist', {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        tmdbId: movie?.id,
+        mediaType: 'movie',
+        title: movie?.title,
+        user: user?.id,
+      }),
+    });
+
+    if (res.status === 201) {
+      addToast(
+        <span>
+          {intl.formatMessage(globalMessages.blacklistSuccess, {
+            title: movie?.title,
+            strong: (msg: React.ReactNode) => <strong>{msg}</strong>,
+          })}
+        </span>,
+        { appearance: 'success', autoDismiss: true }
+      );
+
+      revalidate();
+    } else if (res.status === 412) {
+      addToast(
+        <span>
+          {intl.formatMessage(globalMessages.blacklistDuplicateError, {
+            title: movie?.title,
+            strong: (msg: React.ReactNode) => <strong>{msg}</strong>,
+          })}
+        </span>,
+        { appearance: 'info', autoDismiss: true }
+      );
+    } else {
+      addToast(intl.formatMessage(globalMessages.blacklistError), {
+        appearance: 'error',
+        autoDismiss: true,
+      });
+    }
+
+    setIsBlacklistUpdating(false);
+    closeBlacklistModal();
+  };
+
+  const showHideButton = hasPermission([Permission.MANAGE_BLACKLIST], {
+    type: 'or',
+  });
+
   return (
     <div
       className="media-page"
@@ -384,6 +448,7 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
       {data.backdropPath && (
         <div className="media-page-bg-image">
           <CachedImage
+            type="tmdb"
             alt=""
             src={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath}`}
             style={{ width: '100%', height: '100%', objectFit: 'cover' }}
@@ -419,9 +484,18 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
         revalidate={() => revalidate()}
         show={showManager}
       />
+      <BlacklistModal
+        tmdbId={data.id}
+        type="movie"
+        show={showBlacklistModal}
+        onCancel={closeBlacklistModal}
+        onComplete={onClickHideItemBtn}
+        isUpdating={isBlacklistUpdating}
+      />
       <div className="media-header">
         <div className="media-poster">
           <CachedImage
+            type="tmdb"
             src={
               data.posterPath
                 ? `https://image.tmdb.org/t/p/w600_and_h900_bestv2${data.posterPath}`
@@ -495,40 +569,61 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
           </span>
         </div>
         <div className="media-actions">
-          <>
-            {toggleWatchlist ? (
-              <Tooltip content={intl.formatMessage(messages.addtowatchlist)}>
+          {showHideButton &&
+            data?.mediaInfo?.status !== MediaStatus.PROCESSING &&
+            data?.mediaInfo?.status !== MediaStatus.AVAILABLE &&
+            data?.mediaInfo?.status !== MediaStatus.PARTIALLY_AVAILABLE &&
+            data?.mediaInfo?.status !== MediaStatus.PENDING &&
+            data?.mediaInfo?.status !== MediaStatus.BLACKLISTED && (
+              <Tooltip
+                content={intl.formatMessage(globalMessages.addToBlacklist)}
+              >
                 <Button
                   buttonType={'ghost'}
                   className="z-40 mr-2"
                   buttonSize={'md'}
-                  onClick={onClickWatchlistBtn}
+                  onClick={() => setShowBlacklistModal(true)}
                 >
-                  {isUpdating ? (
-                    <Spinner className="h-3" />
-                  ) : (
-                    <StarIcon className={'h-3 text-amber-300'} />
-                  )}
-                </Button>
-              </Tooltip>
-            ) : (
-              <Tooltip
-                content={intl.formatMessage(messages.removefromwatchlist)}
-              >
-                <Button
-                  className="z-40 mr-2"
-                  buttonSize={'md'}
-                  onClick={onClickDeleteWatchlistBtn}
-                >
-                  {isUpdating ? (
-                    <Spinner className="h-3" />
-                  ) : (
-                    <MinusCircleIcon className={'h-3'} />
-                  )}
+                  <EyeSlashIcon className={'h-3'} />
                 </Button>
               </Tooltip>
             )}
-          </>
+          {data?.mediaInfo?.status !== MediaStatus.BLACKLISTED && (
+            <>
+              {toggleWatchlist ? (
+                <Tooltip content={intl.formatMessage(messages.addtowatchlist)}>
+                  <Button
+                    buttonType={'ghost'}
+                    className="z-40 mr-2"
+                    buttonSize={'md'}
+                    onClick={onClickWatchlistBtn}
+                  >
+                    {isUpdating ? (
+                      <Spinner className="h-3" />
+                    ) : (
+                      <StarIcon className={'h-3 text-amber-300'} />
+                    )}
+                  </Button>
+                </Tooltip>
+              ) : (
+                <Tooltip
+                  content={intl.formatMessage(messages.removefromwatchlist)}
+                >
+                  <Button
+                    className="z-40 mr-2"
+                    buttonSize={'md'}
+                    onClick={onClickDeleteWatchlistBtn}
+                  >
+                    {isUpdating ? (
+                      <Spinner className="h-3" />
+                    ) : (
+                      <MinusCircleIcon className={'h-3'} />
+                    )}
+                  </Button>
+                </Tooltip>
+              )}
+            </>
+          )}
           <PlayButton links={mediaLinks} />
           <RequestButton
             mediaType="movie"
@@ -648,6 +743,7 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
                 <div className="group relative z-0 scale-100 transform-gpu cursor-pointer overflow-hidden rounded-lg bg-gray-800 bg-cover bg-center shadow-md ring-1 ring-gray-700 transition duration-300 hover:scale-105 hover:ring-gray-500">
                   <div className="absolute inset-0 z-0">
                     <CachedImage
+                      type="tmdb"
                       src={`https://image.tmdb.org/t/p/w1440_and_h320_multi_faces/${data.collection.backdropPath}`}
                       alt=""
                       style={{

src/components/PermissionEdit/index.tsx

@@ -78,6 +78,13 @@ export const messages = defineMessages('components.PermissionEdit', {
   viewwatchlists: 'View {mediaServerName} Watchlists',
   viewwatchlistsDescription:
     "Grant permission to view other users' {mediaServerName} Watchlists.",
+  manageblacklist: 'Manage Blacklist',
+  manageblacklistDescription: 'Grant permission to manage blacklisted media.',
+  blacklistedItems: 'Blacklist media.',
+  blacklistedItemsDescription: 'Grant permission to blacklist media.',
+  viewblacklistedItems: 'View blacklisted media.',
+  viewblacklistedItemsDescription:
+    'Grant permission to view blacklisted media.',
 });
 
 interface PermissionEditProps {
@@ -332,6 +339,22 @@ export const PermissionEdit = ({
         },
       ],
     },
+    {
+      id: 'manageblacklist',
+      name: intl.formatMessage(messages.manageblacklist),
+      description: intl.formatMessage(messages.manageblacklistDescription),
+      permission: Permission.MANAGE_BLACKLIST,
+      children: [
+        {
+          id: 'viewblacklisteditems',
+          name: intl.formatMessage(messages.viewblacklistedItems),
+          description: intl.formatMessage(
+            messages.viewblacklistedItemsDescription
+          ),
+          permission: Permission.VIEW_BLACKLIST,
+        },
+      ],
+    },
   ];
 
   return (

src/components/PersonCard/index.tsx

@@ -51,6 +51,7 @@ const PersonCard = ({
               {profilePath ? (
                 <div className="relative h-full w-3/4 overflow-hidden rounded-full ring-1 ring-gray-700">
                   <CachedImage
+                    type="tmdb"
                     src={`https://image.tmdb.org/t/p/w600_and_h900_bestv2${profilePath}`}
                     alt=""
                     style={{

src/components/PersonDetails/index.tsx

@@ -227,6 +227,7 @@ const PersonDetails = () => {
         {data.profilePath && (
           <div className="relative mb-6 mr-0 h-36 w-36 flex-shrink-0 overflow-hidden rounded-full ring-1 ring-gray-700 lg:mb-0 lg:mr-6 lg:h-44 lg:w-44">
             <CachedImage
+              type="tmdb"
               src={`https://image.tmdb.org/t/p/w600_and_h900_bestv2${data.profilePath}`}
               alt=""
               style={{ width: '100%', height: '100%', objectFit: 'cover' }}

src/components/RequestButton/index.tsx

@@ -300,6 +300,7 @@ const RequestButton = ({
     }) &&
     media &&
     media.status !== MediaStatus.AVAILABLE &&
+    media.status !== MediaStatus.BLACKLISTED &&
     !isShowComplete
   ) {
     buttons.push({
@@ -345,6 +346,7 @@ const RequestButton = ({
     }) &&
     media &&
     media.status4k !== MediaStatus.AVAILABLE &&
+    media.status !== MediaStatus.BLACKLISTED &&
     !is4kShowComplete &&
     settings.currentSettings.series4kEnabled
   ) {

src/components/RequestCard/index.tsx

@@ -22,7 +22,6 @@ import type { MediaRequest } from '@server/entity/MediaRequest';
 import type { NonFunctionProperties } from '@server/interfaces/api/common';
 import type { MovieDetails } from '@server/models/Movie';
 import type { TvDetails } from '@server/models/Tv';
-import Image from 'next/image';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
@@ -116,7 +115,8 @@ const RequestCardError = ({ requestData }: RequestCardErrorProps) => {
                       className="group flex items-center"
                     >
                       <span className="avatar-sm">
-                        <Image
+                        <CachedImage
+                          type="avatar"
                           src={requestData.requestedBy.avatar}
                           alt=""
                           className="avatar-sm object-cover"
@@ -346,6 +346,7 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
         {title.backdropPath && (
           <div className="absolute inset-0 z-0">
             <CachedImage
+              type="tmdb"
               alt=""
               src={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${title.backdropPath}`}
               style={{ width: '100%', height: '100%', objectFit: 'cover' }}
@@ -390,7 +391,8 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
                 className="group flex items-center"
               >
                 <span className="avatar-sm">
-                  <Image
+                  <CachedImage
+                    type="avatar"
                     src={requestData.requestedBy.avatar}
                     alt=""
                     className="avatar-sm object-cover"
@@ -603,6 +605,7 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
           className="w-20 flex-shrink-0 scale-100 transform-gpu cursor-pointer overflow-hidden rounded-md shadow-sm transition duration-300 hover:scale-105 hover:shadow-md sm:w-28"
         >
           <CachedImage
+            type="tmdb"
             src={
               title.posterPath
                 ? `https://image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`

src/components/RequestList/RequestItem/index.tsx

@@ -21,7 +21,6 @@ import type { MediaRequest } from '@server/entity/MediaRequest';
 import type { NonFunctionProperties } from '@server/interfaces/api/common';
 import type { MovieDetails } from '@server/models/Movie';
 import type { TvDetails } from '@server/models/Tv';
-import Image from 'next/image';
 import Link from 'next/link';
 import { useState } from 'react';
 import { useInView } from 'react-intersection-observer';
@@ -43,6 +42,7 @@ const messages = defineMessages('components.RequestList.RequestItem', {
   tmdbid: 'TMDB ID',
   tvdbid: 'TheTVDB ID',
   unknowntitle: 'Unknown Title',
+  removearr: 'Remove from {arr}',
   profileName: 'Profile',
 });
 
@@ -190,7 +190,8 @@ const RequestItemError = ({
                             className="group flex items-center truncate"
                           >
                             <span className="avatar-sm ml-1.5">
-                              <Image
+                              <CachedImage
+                                type="avatar"
                                 src={requestData.requestedBy.avatar}
                                 alt=""
                                 className="avatar-sm object-cover"
@@ -249,7 +250,8 @@ const RequestItemError = ({
                           className="group flex items-center truncate"
                         >
                           <span className="avatar-sm ml-1.5">
-                            <Image
+                            <CachedImage
+                              type="avatar"
                               src={requestData.modifiedBy.avatar}
                               alt=""
                               className="avatar-sm object-cover"
@@ -342,6 +344,18 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
     revalidateList();
   };
 
+  const deleteMediaFile = async () => {
+    if (request.media) {
+      await fetch(`/api/v1/media/${request.media.id}/file`, {
+        method: 'DELETE',
+      });
+      await fetch(`/api/v1/media/${request.media.id}`, {
+        method: 'DELETE',
+      });
+      revalidateList();
+    }
+  };
+
   const retryRequest = async () => {
     setRetrying(true);
 
@@ -406,6 +420,7 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
         {title.backdropPath && (
           <div className="absolute inset-0 z-0 w-full bg-cover bg-center xl:w-2/3">
             <CachedImage
+              type="tmdb"
               src={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${title.backdropPath}`}
               alt=""
               style={{ width: '100%', height: '100%', objectFit: 'cover' }}
@@ -431,6 +446,7 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
               className="relative h-auto w-12 flex-shrink-0 scale-100 transform-gpu overflow-hidden rounded-md transition duration-300 hover:scale-105"
             >
               <CachedImage
+                type="tmdb"
                 src={
                   title.posterPath
                     ? `https://image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`
@@ -557,7 +573,8 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
                           className="group flex items-center truncate"
                         >
                           <span className="avatar-sm ml-1.5">
-                            <Image
+                            <CachedImage
+                              type="avatar"
                               src={requestData.requestedBy.avatar}
                               alt=""
                               className="avatar-sm object-cover"
@@ -616,8 +633,9 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
                         className="group flex items-center truncate"
                       >
                         <span className="avatar-sm ml-1.5">
-                          <Image
-                            src={requestData.requestedBy.avatar}
+                          <CachedImage
+                            type="avatar"
+                            src={requestData.modifiedBy.avatar}
                             alt=""
                             className="avatar-sm object-cover"
                             width={20}
@@ -667,14 +685,28 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
             )}
           {requestData.status !== MediaRequestStatus.PENDING &&
             hasPermission(Permission.MANAGE_REQUESTS) && (
-              <ConfirmButton
-                onClick={() => deleteRequest()}
-                confirmText={intl.formatMessage(globalMessages.areyousure)}
-                className="w-full"
-              >
-                <TrashIcon />
-                <span>{intl.formatMessage(messages.deleterequest)}</span>
-              </ConfirmButton>
+              <>
+                <ConfirmButton
+                  onClick={() => deleteRequest()}
+                  confirmText={intl.formatMessage(globalMessages.areyousure)}
+                  className="w-full"
+                >
+                  <TrashIcon />
+                  <span>{intl.formatMessage(messages.deleterequest)}</span>
+                </ConfirmButton>
+                <ConfirmButton
+                  onClick={() => deleteMediaFile()}
+                  confirmText={intl.formatMessage(globalMessages.areyousure)}
+                  className="w-full"
+                >
+                  <TrashIcon />
+                  <span>
+                    {intl.formatMessage(messages.removearr, {
+                      arr: request.type === 'movie' ? 'Radarr' : 'Sonarr',
+                    })}
+                  </span>
+                </ConfirmButton>
+              </>
             )}
           {requestData.status === MediaRequestStatus.PENDING &&
             hasPermission(Permission.MANAGE_REQUESTS) && (

src/components/RequestModal/AdvancedRequester/index.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
+import CachedImage from '@app/components/Common/CachedImage';
 import { SmallLoadingSpinner } from '@app/components/Common/LoadingSpinner';
 import type { User } from '@app/hooks/useUser';
 import { Permission, useUser } from '@app/hooks/useUser';
@@ -14,7 +15,6 @@ import type {
 import type { UserResultsResponse } from '@server/interfaces/api/userInterfaces';
 import { hasPermission } from '@server/lib/permissions';
 import { isEqual } from 'lodash';
-import Image from 'next/image';
 import { useEffect, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
 import Select from 'react-select';
@@ -561,7 +561,8 @@ const AdvancedRequester = ({
                     <span className="inline-block w-full rounded-md shadow-sm">
                       <Listbox.Button className="focus:shadow-outline-blue relative w-full cursor-default rounded-md border border-gray-700 bg-gray-800 py-2 pl-3 pr-10 text-left text-white transition duration-150 ease-in-out focus:border-blue-300 focus:outline-none sm:text-sm sm:leading-5">
                         <span className="flex items-center">
-                          <Image
+                          <CachedImage
+                            type="avatar"
                             src={selectedUser.avatar}
                             alt=""
                             className="h-6 w-6 flex-shrink-0 rounded-full object-cover"
@@ -613,7 +614,8 @@ const AdvancedRequester = ({
                                     selected ? 'font-semibold' : 'font-normal'
                                   } flex items-center`}
                                 >
-                                  <Image
+                                  <CachedImage
+                                    type="avatar"
                                     src={user.avatar}
                                     alt=""
                                     className="h-6 w-6 flex-shrink-0 rounded-full object-cover"

src/components/RequestModal/CollectionRequestModal.tsx

@@ -66,7 +66,9 @@ const CollectionRequestModal = ({
     (quota?.movie.remaining ?? 0) - selectedParts.length;
 
   const getAllParts = (): number[] => {
-    return (data?.parts ?? []).map((part) => part.id);
+    return (data?.parts ?? [])
+      .filter((part) => part.mediaInfo?.status !== MediaStatus.BLACKLISTED)
+      .map((part) => part.id);
   };
 
   const getAllRequestedParts = (): number[] => {
@@ -248,6 +250,11 @@ const CollectionRequestModal = ({
     { type: 'or' }
   );
 
+  const blacklistVisibility = hasPermission(
+    [Permission.MANAGE_BLACKLIST, Permission.VIEW_BLACKLIST],
+    { type: 'or' }
+  );
+
   return (
     <Modal
       loading={(!data && !error) || !quota}
@@ -344,122 +351,157 @@ const CollectionRequestModal = ({
                   </tr>
                 </thead>
                 <tbody className="divide-y divide-gray-700">
-                  {data?.parts.map((part) => {
-                    const partRequest = getPartRequest(part.id);
-                    const partMedia =
-                      part.mediaInfo &&
-                      part.mediaInfo[is4k ? 'status4k' : 'status'] !==
-                        MediaStatus.UNKNOWN
-                        ? part.mediaInfo
-                        : undefined;
+                  {data?.parts
+                    .filter((part) => {
+                      if (!blacklistVisibility)
+                        return (
+                          part.mediaInfo?.status !== MediaStatus.BLACKLISTED
+                        );
+                      return part;
+                    })
+                    .map((part) => {
+                      const partRequest = getPartRequest(part.id);
+                      const partMedia =
+                        part.mediaInfo &&
+                        part.mediaInfo[is4k ? 'status4k' : 'status'] !==
+                          MediaStatus.UNKNOWN
+                          ? part.mediaInfo
+                          : undefined;
 
-                    return (
-                      <tr key={`part-${part.id}`}>
-                        <td className="whitespace-nowrap px-4 py-4 text-sm font-medium leading-5 text-gray-100">
-                          <span
-                            role="checkbox"
-                            tabIndex={0}
-                            aria-checked={
-                              !!partMedia || isSelectedPart(part.id)
-                            }
-                            onClick={() => togglePart(part.id)}
-                            onKeyDown={(e) => {
-                              if (e.key === 'Enter' || e.key === 'Space') {
-                                togglePart(part.id);
-                              }
-                            }}
-                            className={`relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center pt-2 focus:outline-none ${
-                              !!partMedia ||
-                              partRequest ||
-                              (quota?.movie.limit &&
-                                currentlyRemaining <= 0 &&
-                                !isSelectedPart(part.id))
-                                ? 'opacity-50'
-                                : ''
+                      return (
+                        <tr key={`part-${part.id}`}>
+                          <td
+                            className={`whitespace-nowrap px-4 py-4 text-sm font-medium leading-5 text-gray-100 ${
+                              partMedia?.status === MediaStatus.BLACKLISTED &&
+                              'pointer-events-none opacity-50'
                             }`}
                           >
                             <span
-                              aria-hidden="true"
-                              className={`${
-                                !!partMedia ||
-                                partRequest ||
+                              role="checkbox"
+                              tabIndex={0}
+                              aria-checked={
+                                (!!partMedia &&
+                                  partMedia.status !==
+                                    MediaStatus.BLACKLISTED) ||
                                 isSelectedPart(part.id)
-                                  ? 'bg-indigo-500'
-                                  : 'bg-gray-700'
-                              } absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
-                            ></span>
-                            <span
-                              aria-hidden="true"
-                              className={`${
-                                !!partMedia ||
-                                partRequest ||
-                                isSelectedPart(part.id)
-                                  ? 'translate-x-5'
-                                  : 'translate-x-0'
-                              } absolute left-0 inline-block h-5 w-5 rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
-                            ></span>
-                          </span>
-                        </td>
-                        <td className="flex items-center px-1 py-4 text-sm font-medium leading-5 text-gray-100 md:px-6">
-                          <div className="relative h-auto w-10 flex-shrink-0 overflow-hidden rounded-md">
-                            <CachedImage
-                              src={
-                                part.posterPath
-                                  ? `https://image.tmdb.org/t/p/w600_and_h900_bestv2${part.posterPath}`
-                                  : '/images/overseerr_poster_not_found.png'
                               }
-                              alt=""
-                              sizes="100vw"
-                              style={{
-                                width: '100%',
-                                height: 'auto',
-                                objectFit: 'cover',
+                              onClick={() => togglePart(part.id)}
+                              onKeyDown={(e) => {
+                                if (e.key === 'Enter' || e.key === 'Space') {
+                                  togglePart(part.id);
+                                }
                               }}
-                              width={600}
-                              height={900}
-                            />
-                          </div>
-                          <div className="flex flex-col justify-center pl-2">
-                            <div className="text-xs font-medium">
-                              {part.releaseDate?.slice(0, 4)}
+                              className={`relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center pt-2 focus:outline-none ${
+                                (!!partMedia &&
+                                  partMedia.status !==
+                                    MediaStatus.BLACKLISTED) ||
+                                partRequest ||
+                                (quota?.movie.limit &&
+                                  currentlyRemaining <= 0 &&
+                                  !isSelectedPart(part.id))
+                                  ? 'opacity-50'
+                                  : ''
+                              }`}
+                            >
+                              <span
+                                aria-hidden="true"
+                                className={`${
+                                  (!!partMedia &&
+                                    partMedia.status !==
+                                      MediaStatus.BLACKLISTED) ||
+                                  partRequest ||
+                                  isSelectedPart(part.id)
+                                    ? 'bg-indigo-500'
+                                    : 'bg-gray-700'
+                                } absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
+                              ></span>
+                              <span
+                                aria-hidden="true"
+                                className={`${
+                                  (!!partMedia &&
+                                    partMedia.status !==
+                                      MediaStatus.BLACKLISTED) ||
+                                  partRequest ||
+                                  isSelectedPart(part.id)
+                                    ? 'translate-x-5'
+                                    : 'translate-x-0'
+                                } absolute left-0 inline-block h-5 w-5 rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
+                              ></span>
+                            </span>
+                          </td>
+                          <td
+                            className={`flex items-center px-1 py-4 text-sm font-medium leading-5 text-gray-100 md:px-6 ${
+                              partMedia?.status === MediaStatus.BLACKLISTED &&
+                              'pointer-events-none opacity-50'
+                            }`}
+                          >
+                            <div className="relative h-auto w-10 flex-shrink-0 overflow-hidden rounded-md">
+                              <CachedImage
+                                type="tmdb"
+                                src={
+                                  part.posterPath
+                                    ? `https://image.tmdb.org/t/p/w600_and_h900_bestv2${part.posterPath}`
+                                    : '/images/overseerr_poster_not_found.png'
+                                }
+                                alt=""
+                                sizes="100vw"
+                                style={{
+                                  width: '100%',
+                                  height: 'auto',
+                                  objectFit: 'cover',
+                                }}
+                                width={600}
+                                height={900}
+                              />
                             </div>
-                            <div className="text-base font-bold">
-                              {part.title}
+                            <div className="flex flex-col justify-center pl-2">
+                              <div className="text-xs font-medium">
+                                {part.releaseDate?.slice(0, 4)}
+                              </div>
+                              <div className="text-base font-bold">
+                                {part.title}
+                              </div>
                             </div>
-                          </div>
-                        </td>
-                        <td className="whitespace-nowrap py-4 pr-2 text-sm leading-5 text-gray-200 md:px-6">
-                          {!partMedia && !partRequest && (
-                            <Badge>
-                              {intl.formatMessage(globalMessages.notrequested)}
-                            </Badge>
-                          )}
-                          {!partMedia &&
-                            partRequest?.status ===
-                              MediaRequestStatus.PENDING && (
-                              <Badge badgeType="warning">
-                                {intl.formatMessage(globalMessages.pending)}
+                          </td>
+                          <td className="whitespace-nowrap py-4 pr-2 text-sm leading-5 text-gray-200 md:px-6">
+                            {!partMedia && !partRequest && (
+                              <Badge>
+                                {intl.formatMessage(
+                                  globalMessages.notrequested
+                                )}
                               </Badge>
                             )}
-                          {((!partMedia &&
-                            partRequest?.status ===
-                              MediaRequestStatus.APPROVED) ||
-                            partMedia?.[is4k ? 'status4k' : 'status'] ===
-                              MediaStatus.PROCESSING) && (
-                            <Badge badgeType="primary">
-                              {intl.formatMessage(globalMessages.requested)}
-                            </Badge>
-                          )}
-                          {partMedia?.[is4k ? 'status4k' : 'status'] ===
-                            MediaStatus.AVAILABLE && (
-                            <Badge badgeType="success">
-                              {intl.formatMessage(globalMessages.available)}
-                            </Badge>
-                          )}
-                        </td>
-                      </tr>
-                    );
-                  })}
+                            {!partMedia &&
+                              partRequest?.status ===
+                                MediaRequestStatus.PENDING && (
+                                <Badge badgeType="warning">
+                                  {intl.formatMessage(globalMessages.pending)}
+                                </Badge>
+                              )}
+                            {((!partMedia &&
+                              partRequest?.status ===
+                                MediaRequestStatus.APPROVED) ||
+                              partMedia?.[is4k ? 'status4k' : 'status'] ===
+                                MediaStatus.PROCESSING) && (
+                              <Badge badgeType="primary">
+                                {intl.formatMessage(globalMessages.requested)}
+                              </Badge>
+                            )}
+                            {partMedia?.[is4k ? 'status4k' : 'status'] ===
+                              MediaStatus.AVAILABLE && (
+                              <Badge badgeType="success">
+                                {intl.formatMessage(globalMessages.available)}
+                              </Badge>
+                            )}
+                            {partMedia?.status === MediaStatus.BLACKLISTED && (
+                              <Badge badgeType="danger">
+                                {intl.formatMessage(globalMessages.blacklisted)}
+                              </Badge>
+                            )}
+                          </td>
+                        </tr>
+                      );
+                    })}
                 </tbody>
               </table>
             </div>

src/components/Selector/index.tsx

@@ -33,6 +33,13 @@ const messages = defineMessages('components.Selector', {
   nooptions: 'No results.',
   showmore: 'Show More',
   showless: 'Show Less',
+  searchStatus: 'Select status...',
+  returningSeries: 'Returning Series',
+  planned: 'Planned',
+  inProduction: 'In Production',
+  ended: 'Ended',
+  canceled: 'Canceled',
+  pilot: 'Pilot',
 });
 
 type SingleVal = {
@@ -204,6 +211,75 @@ export const GenreSelector = ({
   );
 };
 
+export const StatusSelector = ({
+  isMulti,
+  defaultValue,
+  onChange,
+}: BaseSelectorMultiProps | BaseSelectorSingleProps) => {
+  const intl = useIntl();
+  const [defaultDataValue, setDefaultDataValue] = useState<
+    { label: string; value: number }[] | null
+  >(null);
+
+  const options = useMemo(
+    () => [
+      { name: intl.formatMessage(messages.returningSeries), id: 0 },
+      { name: intl.formatMessage(messages.planned), id: 1 },
+      { name: intl.formatMessage(messages.inProduction), id: 2 },
+      { name: intl.formatMessage(messages.ended), id: 3 },
+      { name: intl.formatMessage(messages.canceled), id: 4 },
+      { name: intl.formatMessage(messages.pilot), id: 5 },
+    ],
+    [intl]
+  );
+
+  useEffect(() => {
+    const loadDefaultStatus = async (): Promise<void> => {
+      if (!defaultValue) {
+        return;
+      }
+      const statuses = defaultValue.split('|');
+
+      const statusData = options
+        .filter((opt) => statuses.find((s) => Number(s) === opt.id))
+        .map((o) => ({
+          label: o.name,
+          value: o.id,
+        }));
+
+      setDefaultDataValue(statusData);
+    };
+
+    loadDefaultStatus();
+  }, [defaultValue, options]);
+
+  const loadStatusOptions = async () => {
+    return options
+      .map((result) => ({
+        label: result.name,
+        value: result.id,
+      }))
+      .filter(({ label }) => label.toLowerCase());
+  };
+
+  return (
+    <AsyncSelect
+      key={`status-select-${defaultDataValue}`}
+      className="react-select-container"
+      classNamePrefix="react-select"
+      defaultValue={isMulti ? defaultDataValue : defaultDataValue?.[0]}
+      defaultOptions
+      isMulti={isMulti}
+      loadOptions={loadStatusOptions}
+      placeholder={intl.formatMessage(messages.searchStatus)}
+      onChange={(value) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        onChange(value as any);
+      }}
+    />
+  );
+};
+
 export const KeywordSelector = ({
   isMulti,
   defaultValue,
@@ -376,6 +452,7 @@ export const WatchProviderSelector = ({
                     tabIndex={0}
                   >
                     <CachedImage
+                      type="tmdb"
                       src={`https://image.tmdb.org/t/p/original${provider.logoPath}`}
                       alt=""
                       style={{
@@ -421,6 +498,7 @@ export const WatchProviderSelector = ({
                       tabIndex={0}
                     >
                       <CachedImage
+                        type="tmdb"
                         src={`https://image.tmdb.org/t/p/original${provider.logoPath}`}
                         alt=""
                         style={{

src/components/Settings/SettingsJobsCache/index.tsx

@@ -82,6 +82,7 @@ const messages: { [messageName: string]: MessageDescriptor } = defineMessages(
       'When enabled in settings, Jellyseerr will proxy and cache images from pre-configured external sources. Cached images are saved into your config folder. You can find the files in <code>{appDataPath}/cache/images</code>.',
     imagecachecount: 'Images Cached',
     imagecachesize: 'Total Cache Size',
+    usersavatars: "Users' Avatars",
   }
 );
 
@@ -573,6 +574,19 @@ const SettingsJobs = () => {
                 {formatBytes(cacheData?.imageCache.tmdb.size ?? 0)}
               </Table.TD>
             </tr>
+            <tr>
+              <Table.TD>
+                {intl.formatMessage(messages.usersavatars)} (avatar)
+              </Table.TD>
+              <Table.TD>
+                {intl.formatNumber(
+                  cacheData?.imageCache.avatar.imageCount ?? 0
+                )}
+              </Table.TD>
+              <Table.TD>
+                {formatBytes(cacheData?.imageCache.avatar.size ?? 0)}
+              </Table.TD>
+            </tr>
           </Table.TBody>
         </Table>
       </div>

src/components/Setup/index.tsx

@@ -100,6 +100,8 @@ const Setup = () => {
     router,
   ]);
 
+  if (settings.currentSettings.initialized) return <></>;
+
   return (
     <div className="relative flex min-h-screen flex-col justify-center bg-gray-900 py-12">
       <PageTitle title={intl.formatMessage(messages.setup)} />

src/components/StatusBadge/index.tsx

@@ -360,6 +360,17 @@ const StatusBadge = ({
         </Tooltip>
       );
 
+    case MediaStatus.BLACKLISTED:
+      return (
+        <Tooltip content={mediaLinkDescription}>
+          <Badge badgeType="danger" href={mediaLink}>
+            {intl.formatMessage(is4k ? messages.status4k : messages.status, {
+              status: intl.formatMessage(globalMessages.blacklisted),
+            })}
+          </Badge>
+        </Tooltip>
+      );
+
     default:
       return null;
   }

src/components/TitleCard/index.tsx

@@ -1,7 +1,9 @@
 import Spinner from '@app/assets/spinner.svg';
+import BlacklistModal from '@app/components/BlacklistModal';
 import Button from '@app/components/Common/Button';
 import CachedImage from '@app/components/Common/CachedImage';
 import StatusBadgeMini from '@app/components/Common/StatusBadgeMini';
+import Tooltip from '@app/components/Common/Tooltip';
 import RequestModal from '@app/components/RequestModal';
 import ErrorCard from '@app/components/TitleCard/ErrorCard';
 import Placeholder from '@app/components/TitleCard/Placeholder';
@@ -13,6 +15,8 @@ import { withProperties } from '@app/utils/typeHelpers';
 import { Transition } from '@headlessui/react';
 import {
   ArrowDownTrayIcon,
+  EyeIcon,
+  EyeSlashIcon,
   MinusCircleIcon,
   StarIcon,
 } from '@heroicons/react/24/outline';
@@ -20,7 +24,7 @@ import { MediaStatus } from '@server/constants/media';
 import type { Watchlist } from '@server/entity/Watchlist';
 import type { MediaType } from '@server/models/Search';
 import Link from 'next/link';
-import { Fragment, useCallback, useEffect, useState } from 'react';
+import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import { mutate } from 'swr';
@@ -65,7 +69,7 @@ const TitleCard = ({
 }: TitleCardProps) => {
   const isTouch = useIsTouch();
   const intl = useIntl();
-  const { hasPermission } = useUser();
+  const { user, hasPermission } = useUser();
   const [isUpdating, setIsUpdating] = useState(false);
   const [currentStatus, setCurrentStatus] = useState(status);
   const [showDetail, setShowDetail] = useState(false);
@@ -74,6 +78,8 @@ const TitleCard = ({
   const [toggleWatchlist, setToggleWatchlist] = useState<boolean>(
     !isAddedToWatchlist
   );
+  const [showBlacklistModal, setShowBlacklistModal] = useState(false);
+  const cardRef = useRef<HTMLDivElement>(null);
 
   // Just to get the year from the date
   if (year) {
@@ -94,6 +100,11 @@ const TitleCard = ({
     []
   );
 
+  const closeBlacklistModal = useCallback(
+    () => setShowBlacklistModal(false),
+    []
+  );
+
   const onClickWatchlistBtn = async (): Promise<void> => {
     setIsUpdating(true);
     try {
@@ -166,6 +177,99 @@ const TitleCard = ({
     }
   };
 
+  const onClickHideItemBtn = async (): Promise<void> => {
+    setIsUpdating(true);
+    const topNode = cardRef.current;
+
+    if (topNode) {
+      const res = await fetch('/api/v1/blacklist', {
+        method: 'POST',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          tmdbId: id,
+          mediaType,
+          title,
+          user: user?.id,
+        }),
+      });
+
+      if (res.status === 201) {
+        addToast(
+          <span>
+            {intl.formatMessage(globalMessages.blacklistSuccess, {
+              title,
+              strong: (msg: React.ReactNode) => <strong>{msg}</strong>,
+            })}
+          </span>,
+          { appearance: 'success', autoDismiss: true }
+        );
+        setCurrentStatus(MediaStatus.BLACKLISTED);
+      } else if (res.status === 412) {
+        addToast(
+          <span>
+            {intl.formatMessage(globalMessages.blacklistDuplicateError, {
+              title,
+              strong: (msg: React.ReactNode) => <strong>{msg}</strong>,
+            })}
+          </span>,
+          { appearance: 'info', autoDismiss: true }
+        );
+      } else {
+        addToast(intl.formatMessage(globalMessages.blacklistError), {
+          appearance: 'error',
+          autoDismiss: true,
+        });
+      }
+
+      setIsUpdating(false);
+      closeBlacklistModal();
+    } else {
+      addToast(intl.formatMessage(globalMessages.blacklistError), {
+        appearance: 'error',
+        autoDismiss: true,
+      });
+    }
+  };
+
+  const onClickShowBlacklistBtn = async (): Promise<void> => {
+    setIsUpdating(true);
+    const topNode = cardRef.current;
+
+    if (topNode) {
+      const res = await fetch('/api/v1/blacklist/' + id, {
+        method: 'DELETE',
+      });
+
+      if (res.status === 204) {
+        addToast(
+          <span>
+            {intl.formatMessage(globalMessages.removeFromBlacklistSuccess, {
+              title,
+              strong: (msg: React.ReactNode) => <strong>{msg}</strong>,
+            })}
+          </span>,
+          { appearance: 'success', autoDismiss: true }
+        );
+        setCurrentStatus(MediaStatus.UNKNOWN);
+      } else {
+        addToast(intl.formatMessage(globalMessages.blacklistError), {
+          appearance: 'error',
+          autoDismiss: true,
+        });
+      }
+    } else {
+      addToast(intl.formatMessage(globalMessages.blacklistError), {
+        appearance: 'error',
+        autoDismiss: true,
+      });
+    }
+
+    setIsUpdating(false);
+  };
+
   const closeModal = useCallback(() => setShowRequestModal(false), []);
 
   const showRequestButton = hasPermission(
@@ -178,10 +282,15 @@ const TitleCard = ({
     { type: 'or' }
   );
 
+  const showHideButton = hasPermission([Permission.MANAGE_BLACKLIST], {
+    type: 'or',
+  });
+
   return (
     <div
       className={canExpand ? 'w-full' : 'w-36 sm:w-36 md:w-44'}
       data-testid="title-card"
+      ref={cardRef}
     >
       <RequestModal
         tmdbId={id}
@@ -197,6 +306,20 @@ const TitleCard = ({
         onUpdating={requestUpdating}
         onCancel={closeModal}
       />
+      <BlacklistModal
+        tmdbId={id}
+        type={
+          mediaType === 'movie'
+            ? 'movie'
+            : mediaType === 'collection'
+            ? 'collection'
+            : 'tv'
+        }
+        show={showBlacklistModal}
+        onCancel={closeBlacklistModal}
+        onComplete={onClickHideItemBtn}
+        isUpdating={isUpdating}
+      />
       <div
         className={`relative transform-gpu cursor-default overflow-hidden rounded-xl bg-gray-800 bg-cover outline-none ring-1 transition duration-300 ${
           showDetail
@@ -223,6 +346,7 @@ const TitleCard = ({
       >
         <div className="absolute inset-0 h-full w-full overflow-hidden">
           <CachedImage
+            type="tmdb"
             className="absolute inset-0 h-full w-full"
             alt=""
             src={
@@ -235,7 +359,7 @@ const TitleCard = ({
           />
           <div className="absolute left-0 right-0 flex items-center justify-between p-2">
             <div
-              className={`pointer-events-none z-40 rounded-full border bg-opacity-80 shadow-md ${
+              className={`pointer-events-none z-40 self-start rounded-full border bg-opacity-80 shadow-md ${
                 mediaType === 'movie' || mediaType === 'collection'
                   ? 'border-blue-500 bg-blue-600'
                   : 'border-purple-600 bg-purple-600'
@@ -249,8 +373,8 @@ const TitleCard = ({
                   : intl.formatMessage(globalMessages.tvshow)}
               </div>
             </div>
-            {showDetail && (
-              <>
+            {showDetail && currentStatus !== MediaStatus.BLACKLISTED && (
+              <div className="flex flex-col gap-1">
                 {toggleWatchlist ? (
                   <Button
                     buttonType={'ghost'}
@@ -269,15 +393,49 @@ const TitleCard = ({
                     <MinusCircleIcon className={'h-3'} />
                   </Button>
                 )}
-              </>
+                {showHideButton &&
+                  currentStatus !== MediaStatus.PROCESSING &&
+                  currentStatus !== MediaStatus.AVAILABLE &&
+                  currentStatus !== MediaStatus.PARTIALLY_AVAILABLE &&
+                  currentStatus !== MediaStatus.PENDING && (
+                    <Button
+                      buttonType={'ghost'}
+                      className="z-40"
+                      buttonSize={'sm'}
+                      onClick={() => setShowBlacklistModal(true)}
+                    >
+                      <EyeSlashIcon className={'h-3'} />
+                    </Button>
+                  )}
+              </div>
             )}
+            {showDetail &&
+              showHideButton &&
+              currentStatus == MediaStatus.BLACKLISTED && (
+                <Tooltip
+                  content={intl.formatMessage(
+                    globalMessages.removefromBlacklist
+                  )}
+                >
+                  <Button
+                    buttonType={'ghost'}
+                    className="z-40"
+                    buttonSize={'sm'}
+                    onClick={() => onClickShowBlacklistBtn()}
+                  >
+                    <EyeIcon className={'h-3'} />
+                  </Button>
+                </Tooltip>
+              )}
             {currentStatus && currentStatus !== MediaStatus.UNKNOWN && (
-              <div className="pointer-events-none z-40 flex items-center">
-                <StatusBadgeMini
-                  status={currentStatus}
-                  inProgress={inProgress}
-                  shrink
-                />
+              <div className="flex flex-col items-center gap-1">
+                <div className="pointer-events-none z-40 flex">
+                  <StatusBadgeMini
+                    status={currentStatus}
+                    inProgress={inProgress}
+                    shrink
+                  />
+                </div>
               </div>
             )}
           </div>

src/components/TvDetails/index.tsx

@@ -4,6 +4,7 @@ import RTFresh from '@app/assets/rt_fresh.svg';
 import RTRotten from '@app/assets/rt_rotten.svg';
 import Spinner from '@app/assets/spinner.svg';
 import TmdbLogo from '@app/assets/tmdb_logo.svg';
+import BlacklistModal from '@app/components/BlacklistModal';
 import Badge from '@app/components/Common/Badge';
 import Button from '@app/components/Common/Button';
 import CachedImage from '@app/components/Common/CachedImage';
@@ -38,6 +39,7 @@ import {
   ArrowRightCircleIcon,
   CogIcon,
   ExclamationTriangleIcon,
+  EyeSlashIcon,
   FilmIcon,
   PlayIcon,
 } from '@heroicons/react/24/outline';
@@ -61,7 +63,7 @@ import { countries } from 'country-flag-icons';
 import 'country-flag-icons/3x2/flags.css';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';
@@ -125,6 +127,9 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
   const [toggleWatchlist, setToggleWatchlist] = useState<boolean>(
     !tv?.onUserWatchlist
   );
+  const [isBlacklistUpdating, setIsBlacklistUpdating] =
+    useState<boolean>(false);
+  const [showBlacklistModal, setShowBlacklistModal] = useState(false);
   const { addToast } = useToasts();
 
   const {
@@ -155,6 +160,11 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
     setShowManager(router.query.manage == '1' ? true : false);
   }, [router.query.manage]);
 
+  const closeBlacklistModal = useCallback(
+    () => setShowBlacklistModal(false),
+    []
+  );
+
   const { mediaUrl: plexUrl, mediaUrl4k: plexUrl4k } = useDeepLinks({
     mediaUrl: data?.mediaInfo?.mediaUrl,
     mediaUrl4k: data?.mediaInfo?.mediaUrl4k,
@@ -397,6 +407,60 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
     }
   };
 
+  const onClickHideItemBtn = async (): Promise<void> => {
+    setIsBlacklistUpdating(true);
+
+    const res = await fetch('/api/v1/blacklist', {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        tmdbId: tv?.id,
+        mediaType: 'tv',
+        title: tv?.name,
+        user: user?.id,
+      }),
+    });
+
+    if (res.status === 201) {
+      addToast(
+        <span>
+          {intl.formatMessage(globalMessages.blacklistSuccess, {
+            title: tv?.name,
+            strong: (msg: React.ReactNode) => <strong>{msg}</strong>,
+          })}
+        </span>,
+        { appearance: 'success', autoDismiss: true }
+      );
+
+      revalidate();
+    } else if (res.status === 412) {
+      addToast(
+        <span>
+          {intl.formatMessage(globalMessages.blacklistDuplicateError, {
+            title: tv?.name,
+            strong: (msg: React.ReactNode) => <strong>{msg}</strong>,
+          })}
+        </span>,
+        { appearance: 'info', autoDismiss: true }
+      );
+    } else {
+      addToast(intl.formatMessage(globalMessages.blacklistError), {
+        appearance: 'error',
+        autoDismiss: true,
+      });
+    }
+
+    setIsBlacklistUpdating(false);
+    closeBlacklistModal();
+  };
+
+  const showHideButton = hasPermission([Permission.MANAGE_BLACKLIST], {
+    type: 'or',
+  });
+
   return (
     <div
       className="media-page"
@@ -407,6 +471,7 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
       {data.backdropPath && (
         <div className="media-page-bg-image">
           <CachedImage
+            type="tmdb"
             alt=""
             src={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath}`}
             style={{ width: '100%', height: '100%', objectFit: 'cover' }}
@@ -423,6 +488,14 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
         </div>
       )}
       <PageTitle title={data.name} />
+      <BlacklistModal
+        tmdbId={data.id}
+        type="tv"
+        show={showBlacklistModal}
+        onCancel={closeBlacklistModal}
+        onComplete={onClickHideItemBtn}
+        isUpdating={isBlacklistUpdating}
+      />
       <IssueModal
         onCancel={() => setShowIssueModal(false)}
         show={showIssueModal}
@@ -455,6 +528,7 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
       <div className="media-header">
         <div className="media-poster">
           <CachedImage
+            type="tmdb"
             src={
               data.posterPath
                 ? `https://image.tmdb.org/t/p/w600_and_h900_bestv2${data.posterPath}`
@@ -528,40 +602,61 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
           </span>
         </div>
         <div className="media-actions">
-          <>
-            {toggleWatchlist ? (
-              <Tooltip content={intl.formatMessage(messages.addtowatchlist)}>
+          {showHideButton &&
+            data?.mediaInfo?.status !== MediaStatus.PROCESSING &&
+            data?.mediaInfo?.status !== MediaStatus.AVAILABLE &&
+            data?.mediaInfo?.status !== MediaStatus.PARTIALLY_AVAILABLE &&
+            data?.mediaInfo?.status !== MediaStatus.PENDING &&
+            data?.mediaInfo?.status !== MediaStatus.BLACKLISTED && (
+              <Tooltip
+                content={intl.formatMessage(globalMessages.addToBlacklist)}
+              >
                 <Button
                   buttonType={'ghost'}
                   className="z-40 mr-2"
                   buttonSize={'md'}
-                  onClick={onClickWatchlistBtn}
+                  onClick={() => setShowBlacklistModal(true)}
                 >
-                  {isUpdating ? (
-                    <Spinner className="h-3" />
-                  ) : (
-                    <StarIcon className={'h-3 text-amber-300'} />
-                  )}
-                </Button>
-              </Tooltip>
-            ) : (
-              <Tooltip
-                content={intl.formatMessage(messages.removefromwatchlist)}
-              >
-                <Button
-                  className="z-40 mr-2"
-                  buttonSize={'md'}
-                  onClick={onClickDeleteWatchlistBtn}
-                >
-                  {isUpdating ? (
-                    <Spinner className="h-3" />
-                  ) : (
-                    <MinusCircleIcon className={'h-3'} />
-                  )}
+                  <EyeSlashIcon className={'h-3'} />
                 </Button>
               </Tooltip>
             )}
-          </>
+          {data?.mediaInfo?.status !== MediaStatus.BLACKLISTED && (
+            <>
+              {toggleWatchlist ? (
+                <Tooltip content={intl.formatMessage(messages.addtowatchlist)}>
+                  <Button
+                    buttonType={'ghost'}
+                    className="z-40 mr-2"
+                    buttonSize={'md'}
+                    onClick={onClickWatchlistBtn}
+                  >
+                    {isUpdating ? (
+                      <Spinner className="h-3" />
+                    ) : (
+                      <StarIcon className={'h-3 text-amber-300'} />
+                    )}
+                  </Button>
+                </Tooltip>
+              ) : (
+                <Tooltip
+                  content={intl.formatMessage(messages.removefromwatchlist)}
+                >
+                  <Button
+                    className="z-40 mr-2"
+                    buttonSize={'md'}
+                    onClick={onClickDeleteWatchlistBtn}
+                  >
+                    {isUpdating ? (
+                      <Spinner className="h-3" />
+                    ) : (
+                      <MinusCircleIcon className={'h-3'} />
+                    )}
+                  </Button>
+                </Tooltip>
+              )}
+            </>
+          )}
           <PlayButton links={mediaLinks} />
           <RequestButton
             mediaType="tv"

src/components/UserList/JellyfinImportModal.tsx

@@ -1,11 +1,11 @@
 import Alert from '@app/components/Common/Alert';
+import CachedImage from '@app/components/Common/CachedImage';
 import Modal from '@app/components/Common/Modal';
 import useSettings from '@app/hooks/useSettings';
 import globalMessages from '@app/i18n/globalMessages';
 import defineMessages from '@app/utils/defineMessages';
 import { MediaServerType } from '@server/constants/server';
 import type { UserResultsResponse } from '@server/interfaces/api/userInterfaces';
-import Image from 'next/image';
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
@@ -249,7 +249,8 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
                             </td>
                             <td className="whitespace-nowrap px-1 py-4 text-sm font-medium leading-5 text-gray-100 md:px-6">
                               <div className="flex items-center">
-                                <Image
+                                <CachedImage
+                                  type="avatar"
                                   className="h-10 w-10 flex-shrink-0 rounded-full"
                                   src={user.thumb}
                                   alt=""

src/components/UserList/index.tsx

@@ -1,6 +1,7 @@
 import Alert from '@app/components/Common/Alert';
 import Badge from '@app/components/Common/Badge';
 import Button from '@app/components/Common/Button';
+import CachedImage from '@app/components/Common/CachedImage';
 import Header from '@app/components/Common/Header';
 import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import Modal from '@app/components/Common/Modal';
@@ -28,7 +29,6 @@ import { MediaServerType } from '@server/constants/server';
 import type { UserResultsResponse } from '@server/interfaces/api/userInterfaces';
 import { hasPermission } from '@server/lib/permissions';
 import { Field, Form, Formik } from 'formik';
-import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
@@ -633,7 +633,8 @@ const UserList = () => {
                     href={`/users/${user.id}`}
                     className="h-10 w-10 flex-shrink-0"
                   >
-                    <Image
+                    <CachedImage
+                      type="avatar"
                       className="h-10 w-10 rounded-full object-cover"
                       src={user.avatar}
                       alt=""

src/components/UserProfile/ProfileHeader/index.tsx

@@ -1,9 +1,9 @@
 import Button from '@app/components/Common/Button';
+import CachedImage from '@app/components/Common/CachedImage';
 import type { User } from '@app/hooks/useUser';
 import { Permission, useUser } from '@app/hooks/useUser';
 import defineMessages from '@app/utils/defineMessages';
 import { CogIcon, UserIcon } from '@heroicons/react/24/solid';
-import Image from 'next/image';
 import Link from 'next/link';
 import { useIntl } from 'react-intl';
 
@@ -42,7 +42,8 @@ const ProfileHeader = ({ user, isSettingsPage }: ProfileHeaderProps) => {
       <div className="flex items-end justify-items-end space-x-5">
         <div className="flex-shrink-0">
           <div className="relative">
-            <Image
+            <CachedImage
+              type="avatar"
               className="h-24 w-24 rounded-full bg-gray-600 object-cover ring-1 ring-gray-700"
               src={user.avatar}
               alt=""

src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx

@@ -14,6 +14,7 @@ import globalMessages from '@app/i18n/globalMessages';
 import ErrorPage from '@app/pages/_error';
 import defineMessages from '@app/utils/defineMessages';
 import { ArrowDownOnSquareIcon } from '@heroicons/react/24/outline';
+import { ApiErrorCode } from '@server/constants/error';
 import type { UserSettingsGeneralResponse } from '@server/interfaces/api/userSettingsInterfaces';
 import { Field, Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
@@ -42,6 +43,7 @@ const messages = defineMessages(
     user: 'User',
     toastSettingsSuccess: 'Settings saved successfully!',
     toastSettingsFailure: 'Something went wrong while saving settings.',
+    toastSettingsFailureEmail: 'This email is already taken!',
     region: 'Discover Region',
     regionTip: 'Filter content by regional availability',
     originallanguage: 'Discover Language',
@@ -178,7 +180,7 @@ const UserGeneralSettings = () => {
                 watchlistSyncTv: values.watchlistSyncTv,
               }),
             });
-            if (!res.ok) throw new Error();
+            if (!res.ok) throw new Error(res.statusText, { cause: res });
 
             if (currentUser?.id === user?.id && setLocale) {
               setLocale(
@@ -193,10 +195,24 @@ const UserGeneralSettings = () => {
               appearance: 'success',
             });
           } catch (e) {
-            addToast(intl.formatMessage(messages.toastSettingsFailure), {
-              autoDismiss: true,
-              appearance: 'error',
-            });
+            let errorData;
+            try {
+              errorData = await e.cause?.text();
+              errorData = JSON.parse(errorData);
+            } catch {
+              /* empty */
+            }
+            if (errorData?.message === ApiErrorCode.InvalidEmail) {
+              addToast(intl.formatMessage(messages.toastSettingsFailureEmail), {
+                autoDismiss: true,
+                appearance: 'error',
+              });
+            } else {
+              addToast(intl.formatMessage(messages.toastSettingsFailure), {
+                autoDismiss: true,
+                appearance: 'error',
+              });
+            }
           } finally {
             revalidate();
             revalidateUser();

src/i18n/globalMessages.ts

@@ -55,6 +55,16 @@ const globalMessages = defineMessages('i18n', {
   noresults: 'No results.',
   open: 'Open',
   resolved: 'Resolved',
+  blacklist: 'Blacklist',
+  blacklisted: 'Blacklisted',
+  blacklistSuccess: '<strong>{title}</strong> was successfully blacklisted.',
+  blacklistError: 'Something went wrong try again.',
+  blacklistDuplicateError:
+    '<strong>{title}</strong> has already been blacklisted.',
+  removeFromBlacklistSuccess:
+    '<strong>{title}</strong> was successfully removed from the Blacklist.',
+  addToBlacklist: 'Add to Blacklist',
+  removefromBlacklist: 'Remove from Blacklist',
 });
 
 export default globalMessages;

src/i18n/locale/en.json

@@ -1,7 +1,18 @@
 {
+  "component.BlacklistBlock.blacklistdate": "Blacklisted date",
+  "component.BlacklistBlock.blacklistedby": "Blacklisted By",
+  "component.BlacklistModal.blacklisting": "Blacklisting",
   "components.AirDateBadge.airedrelative": "Aired {relativeTime}",
   "components.AirDateBadge.airsrelative": "Airing {relativeTime}",
   "components.AppDataWarning.dockerVolumeMissingDescription": "The <code>{appDataPath}</code> volume mount was not configured properly. All data will be cleared when the container is stopped or restarted.",
+  "components.Blacklist.blacklistNotFoundError": "<strong>{title}</strong> is not blacklisted.",
+  "components.Blacklist.blacklistSettingsDescription": "Manage blacklisted media.",
+  "components.Blacklist.blacklistdate": "date",
+  "components.Blacklist.blacklistedby": "{date} by {user}",
+  "components.Blacklist.blacklistsettings": "Blacklist Settings",
+  "components.Blacklist.mediaName": "Name",
+  "components.Blacklist.mediaTmdbId": "tmdb Id",
+  "components.Blacklist.mediaType": "Type",
   "components.CollectionDetails.numberofmovies": "{count} Movies",
   "components.CollectionDetails.overview": "Overview",
   "components.CollectionDetails.requestcollection": "Request Collection",
@@ -73,6 +84,7 @@
   "components.Discover.FilterSlideover.releaseDate": "Release Date",
   "components.Discover.FilterSlideover.runtime": "Runtime",
   "components.Discover.FilterSlideover.runtimeText": "{minValue}-{maxValue} minute runtime",
+  "components.Discover.FilterSlideover.status": "Status",
   "components.Discover.FilterSlideover.streamingservices": "Streaming Services",
   "components.Discover.FilterSlideover.studio": "Studio",
   "components.Discover.FilterSlideover.tmdbuserscore": "TMDB User Score",
@@ -199,6 +211,7 @@
   "components.LanguageSelector.originalLanguageDefault": "All Languages",
   "components.Layout.LanguagePicker.displaylanguage": "Display Language",
   "components.Layout.SearchInput.searchPlaceholder": "Search Movies & TV",
+  "components.Layout.Sidebar.blacklist": "Blacklist",
   "components.Layout.Sidebar.browsemovies": "Movies",
   "components.Layout.Sidebar.browsetv": "Series",
   "components.Layout.Sidebar.dashboard": "Discover",
@@ -285,6 +298,7 @@
   "components.ManageSlideOver.plays": "<strong>{playCount, number}</strong> {playCount, plural, one {play} other {plays}}",
   "components.ManageSlideOver.removearr": "Remove from {arr}",
   "components.ManageSlideOver.removearr4k": "Remove from 4K {arr}",
+  "components.RequestList.RequestItem.removearr": "Remove from {arr}",
   "components.ManageSlideOver.tvshow": "series",
   "components.MediaSlider.ShowMoreCard.seemore": "See More",
   "components.MovieDetails.MovieCast.fullcast": "Full Cast",
@@ -386,8 +400,12 @@
   "components.PermissionEdit.autorequestMoviesDescription": "Grant permission to automatically submit requests for non-4K movies via Plex Watchlist.",
   "components.PermissionEdit.autorequestSeries": "Auto-Request Series",
   "components.PermissionEdit.autorequestSeriesDescription": "Grant permission to automatically submit requests for non-4K series via Plex Watchlist.",
+  "components.PermissionEdit.blacklistedItems": "Blacklist media.",
+  "components.PermissionEdit.blacklistedItemsDescription": "Grant permission to blacklist media.",
   "components.PermissionEdit.createissues": "Report Issues",
   "components.PermissionEdit.createissuesDescription": "Grant permission to report media issues.",
+  "components.PermissionEdit.manageblacklist": "Manage Blacklist",
+  "components.PermissionEdit.manageblacklistDescription": "Grant permission to manage blacklisted media.",
   "components.PermissionEdit.manageissues": "Manage Issues",
   "components.PermissionEdit.manageissuesDescription": "Grant permission to manage media issues.",
   "components.PermissionEdit.managerequests": "Manage Requests",
@@ -406,6 +424,8 @@
   "components.PermissionEdit.requestTvDescription": "Grant permission to submit requests for non-4K series.",
   "components.PermissionEdit.users": "Manage Users",
   "components.PermissionEdit.usersDescription": "Grant permission to manage users. Users with this permission cannot modify users with or grant the Admin privilege.",
+  "components.PermissionEdit.viewblacklistedItems": "View blacklisted media.",
+  "components.PermissionEdit.viewblacklistedItemsDescription": "Grant permission to view blacklisted media.",
   "components.PermissionEdit.viewissues": "View Issues",
   "components.PermissionEdit.viewissuesDescription": "Grant permission to view media issues reported by other users.",
   "components.PermissionEdit.viewrecent": "View Recently Added",
@@ -558,9 +578,16 @@
   "components.ResetPassword.validationpasswordrequired": "You must provide a password",
   "components.Search.search": "Search",
   "components.Search.searchresults": "Search Results",
+  "components.Selector.canceled": "Canceled",
+  "components.Selector.ended": "Ended",
+  "components.Selector.inProduction": "In Production",
   "components.Selector.nooptions": "No results.",
+  "components.Selector.pilot": "Pilot",
+  "components.Selector.planned": "Planned",
+  "components.Selector.returningSeries": "Returning Series",
   "components.Selector.searchGenres": "Select genres…",
   "components.Selector.searchKeywords": "Search keywords…",
+  "components.Selector.searchStatus": "Select status...",
   "components.Selector.searchStudios": "Search studios…",
   "components.Selector.showless": "Show Less",
   "components.Selector.showmore": "Show More",
@@ -823,6 +850,7 @@
   "components.Settings.SettingsJobsCache.runnow": "Run Now",
   "components.Settings.SettingsJobsCache.sonarr-scan": "Sonarr Scan",
   "components.Settings.SettingsJobsCache.unknownJob": "Unknown Job",
+  "components.Settings.SettingsJobsCache.usersavatars": "Users' Avatars",
   "components.Settings.SettingsLogs.copiedLogMessage": "Copied log message to clipboard.",
   "components.Settings.SettingsLogs.copyToClipboard": "Copy to Clipboard",
   "components.Settings.SettingsLogs.extraData": "Additional Data",
@@ -942,6 +970,7 @@
   "components.Settings.address": "Address",
   "components.Settings.addsonarr": "Add Sonarr Server",
   "components.Settings.advancedTooltip": "Incorrectly configuring this setting may result in broken functionality",
+  "components.Settings.apiKey": "API key",
   "components.Settings.cancelscan": "Cancel Scan",
   "components.Settings.copied": "Copied API key to clipboard.",
   "components.Settings.currentlibrary": "Current Library: {name}",
@@ -1002,6 +1031,7 @@
   "components.Settings.save": "Save Changes",
   "components.Settings.saving": "Saving…",
   "components.Settings.scan": "Sync Libraries",
+  "components.Settings.scanbackground": "Scanning will run in the background. You can continue the setup process in the meantime.",
   "components.Settings.scanning": "Syncing…",
   "components.Settings.serverLocal": "local",
   "components.Settings.serverRemote": "remote",
@@ -1022,6 +1052,7 @@
   "components.Settings.tautulliSettings": "Tautulli Settings",
   "components.Settings.tautulliSettingsDescription": "Optionally configure the settings for your Tautulli server. Jellyseerr fetches watch history data for your Plex media from Tautulli.",
   "components.Settings.timeout": "Timeout",
+  "components.Settings.tip": "Tip",
   "components.Settings.toastPlexConnecting": "Attempting to connect to Plex…",
   "components.Settings.toastPlexConnectingFailure": "Failed to connect to Plex.",
   "components.Settings.toastPlexConnectingSuccess": "Plex connection established successfully!",
@@ -1051,16 +1082,14 @@
   "components.Setup.continue": "Continue",
   "components.Setup.finish": "Finish Setup",
   "components.Setup.finishing": "Finishing…",
-  "components.Setup.scanbackground": "Scanning will run in the background. You can continue the setup process in the meantime.",
   "components.Setup.servertype": "Choose Server Type",
   "components.Setup.setup": "Setup",
-  "components.Setup.signin": "Sign In",
+  "components.Setup.signin": "Sign in to your account",
   "components.Setup.signinMessage": "Get started by signing in",
   "components.Setup.signinWithEmby": "Enter your Emby details",
   "components.Setup.signinWithJellyfin": "Enter your Jellyfin details",
   "components.Setup.signinWithPlex": "Enter your Plex details",
   "components.Setup.subtitle": "Get started by choosing your media server",
-  "components.Setup.tip": "Tip",
   "components.Setup.welcome": "Welcome to Jellyseerr",
   "components.StatusBadge.managemedia": "Manage {mediaType}",
   "components.StatusBadge.openinarr": "Open in {arr}",
@@ -1205,6 +1234,7 @@
   "components.UserProfile.UserSettings.UserGeneralSettings.saving": "Saving…",
   "components.UserProfile.UserSettings.UserGeneralSettings.seriesrequestlimit": "Series Request Limit",
   "components.UserProfile.UserSettings.UserGeneralSettings.toastSettingsFailure": "Something went wrong while saving settings.",
+  "components.UserProfile.UserSettings.UserGeneralSettings.toastSettingsFailureEmail": "This email is already taken!",
   "components.UserProfile.UserSettings.UserGeneralSettings.toastSettingsSuccess": "Settings saved successfully!",
   "components.UserProfile.UserSettings.UserGeneralSettings.user": "User",
   "components.UserProfile.UserSettings.UserGeneralSettings.validationDiscordId": "You must provide a valid Discord user ID",
@@ -1284,6 +1314,7 @@
   "components.UserProfile.seriesrequest": "Series Requests",
   "components.UserProfile.totalrequests": "Total Requests",
   "components.UserProfile.unlimited": "Unlimited",
+  "i18n.addToBlacklist": "Add to Blacklist",
   "i18n.advanced": "Advanced",
   "i18n.all": "All",
   "i18n.approve": "Approve",
@@ -1291,6 +1322,11 @@
   "i18n.areyousure": "Are you sure?",
   "i18n.available": "Available",
   "i18n.back": "Back",
+  "i18n.blacklist": "Blacklist",
+  "i18n.blacklistDuplicateError": "<strong>{title}</strong> has already been blacklisted.",
+  "i18n.blacklistError": "Something went wrong try again.",
+  "i18n.blacklistSuccess": "<strong>{title}</strong> was successfully blacklisted.",
+  "i18n.blacklisted": "Blacklisted",
   "i18n.cancel": "Cancel",
   "i18n.canceling": "Canceling…",
   "i18n.close": "Close",
@@ -1316,6 +1352,8 @@
   "i18n.pending": "Pending",
   "i18n.previous": "Previous",
   "i18n.processing": "Processing",
+  "i18n.removeFromBlacklistSuccess": "<strong>{title}</strong> was successfully removed from the Blacklist.",
+  "i18n.removefromBlacklist": "Remove from Blacklist",
   "i18n.request": "Request",
   "i18n.request4k": "Request in 4K",
   "i18n.requested": "Requested",

src/pages/_app.tsx

@@ -12,6 +12,7 @@ import { SettingsProvider } from '@app/context/SettingsContext';
 import { UserContext } from '@app/context/UserContext';
 import type { User } from '@app/hooks/useUser';
 import '@app/styles/globals.css';
+import '@app/utils/fetchOverride';
 import { polyfillIntl } from '@app/utils/polyfillIntl';
 import { MediaServerType } from '@server/constants/server';
 import type { PublicSettingsResponse } from '@server/interfaces/api/settingsInterfaces';

src/pages/blacklist/index.tsx

@@ -0,0 +1,13 @@
+import Blacklist from '@app/components/Blacklist';
+import useRouteGuard from '@app/hooks/useRouteGuard';
+import { Permission } from '@server/lib/permissions';
+import type { NextPage } from 'next';
+
+const BlacklistPage: NextPage = () => {
+  useRouteGuard([Permission.MANAGE_BLACKLIST, Permission.VIEW_BLACKLIST], {
+    type: 'or',
+  });
+  return <Blacklist />;
+};
+
+export default BlacklistPage;

src/utils/fetchOverride.ts

@@ -0,0 +1,46 @@
+const getCsrfToken = (): string | null => {
+  if (typeof window !== 'undefined') {
+    const match = document.cookie.match(/XSRF-TOKEN=([^;]+)/);
+    return match ? decodeURIComponent(match[1]) : null;
+  }
+  return null;
+};
+
+const isSameOrigin = (url: RequestInfo | URL): boolean => {
+  const parsedUrl = new URL(
+    url instanceof Request ? url.url : url.toString(),
+    window.location.origin
+  );
+  return parsedUrl.origin === window.location.origin;
+};
+
+// We are using a custom fetch implementation to add the X-XSRF-TOKEN heade
+// to all requests. This is required when CSRF protection is enabled.
+if (typeof window !== 'undefined') {
+  const originalFetch: typeof fetch = window.fetch;
+
+  (window as typeof globalThis).fetch = async (
+    input: RequestInfo | URL,
+    init?: RequestInit
+  ): Promise<Response> => {
+    if (!isSameOrigin(input)) {
+      return originalFetch(input, init);
+    }
+
+    const csrfToken = getCsrfToken();
+
+    const headers = {
+      ...(init?.headers || {}),
+      ...(csrfToken ? { 'XSRF-TOKEN': csrfToken } : {}),
+    };
+
+    const newInit: RequestInit = {
+      ...init,
+      headers,
+    };
+
+    return originalFetch(input, newInit);
+  };
+}
+
+export {};