feat: blacklist items from Discover page (#632)

* feat: blacklist media items

re #490

* feat: blacklist media items

* feat: blacklist media items

* style: formatting

* refactor: close the manage slide-over when the media item is removed from the blacklist

* fix: fix media data in the db when blacklisting an item

* refactor: refactor component to accept show boolean

* refactor: hide watchlist button in the media page when it's blacklisted. Also add a blacklist button

* style: formatting

---------

Co-authored-by: JoaquinOlivero <joaquin.olivero@hotmail.com>

.all-contributorsrc

@@ -403,6 +403,42 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "mobihen",
+      "name": "Nir Israel Hen",
+      "avatar_url": "https://avatars.githubusercontent.com/u/35529491?v=4",
+      "profile": "https://mobihen.com",
+      "contributions": [
+        "translation"
+      ]
+    },
+    {
+      "login": "XDark187",
+      "name": "Baraa",
+      "avatar_url": "https://avatars.githubusercontent.com/u/39034192?v=4",
+      "profile": "https://github.com/XDark187",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "franciscofsales",
+      "name": "Francisco Sales",
+      "avatar_url": "https://avatars.githubusercontent.com/u/7977645?v=4",
+      "profile": "https://github.com/franciscofsales",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "myselfolli",
+      "name": "Oliver Laing",
+      "avatar_url": "https://avatars.githubusercontent.com/u/37535998?v=4",
+      "profile": "https://github.com/myselfolli",
+      "contributions": [
+        "code"
+      ]
     }
   ]
 }

.github/CODEOWNERS

@@ -1,2 +1,2 @@
 # Global code ownership
-*                               @Fallenbagel
+*                               @Fallenbagel @gauthier-th

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-40-orange.svg"/></a>
+<a href="#contributors-"><img alt="All Contributors" src="https://img.shields.io/badge/all_contributors-47-orange.svg"/></a>
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 **Jellyseerr** is a free and open source software application for managing requests for your media library.
@@ -137,6 +137,15 @@ Thanks goes to these wonderful people from Overseerr ([emoji key](https://allcon
       <td align="center" valign="top" width="14.28%"><a href="https://joaquinolivero.com"><img src="https://avatars.githubusercontent.com/u/66050823?v=4?s=100" width="100px;" alt="Joaquin Olivero"/><br /><sub><b>Joaquin Olivero</b></sub></a><br /><a href="https://github.com/Fallenbagel/jellyseerr/commits?author=JoaquinOlivero" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/Bretterteig"><img src="https://avatars.githubusercontent.com/u/47298401?v=4?s=100" width="100px;" alt="Julian Behr"/><br /><sub><b>Julian Behr</b></sub></a><br /><a href="#translation-Bretterteig" title="Translation">🌍</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/ThowZzy"><img src="https://avatars.githubusercontent.com/u/61882536?v=4?s=100" width="100px;" alt="ThowZzy"/><br /><sub><b>ThowZzy</b></sub></a><br /><a href="https://github.com/Fallenbagel/jellyseerr/commits?author=ThowZzy" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://josephrisk.com"><img src="https://avatars.githubusercontent.com/u/18372584?v=4?s=100" width="100px;" alt="Joseph Risk"/><br /><sub><b>Joseph Risk</b></sub></a><br /><a href="https://github.com/Fallenbagel/jellyseerr/commits?author=j0srisk" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Loetwiek"><img src="https://avatars.githubusercontent.com/u/79059734?v=4?s=100" width="100px;" alt="Loetwiek"/><br /><sub><b>Loetwiek</b></sub></a><br /><a href="https://github.com/Fallenbagel/jellyseerr/commits?author=Loetwiek" title="Code">💻</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Fuochi"><img src="https://avatars.githubusercontent.com/u/4720478?v=4?s=100" width="100px;" alt="Fuochi"/><br /><sub><b>Fuochi</b></sub></a><br /><a href="https://github.com/Fallenbagel/jellyseerr/commits?author=Fuochi" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://mobihen.com"><img src="https://avatars.githubusercontent.com/u/35529491?v=4?s=100" width="100px;" alt="Nir Israel Hen"/><br /><sub><b>Nir Israel Hen</b></sub></a><br /><a href="#translation-mobihen" title="Translation">🌍</a></td>
+      <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>
     </tr>
   </tbody>
 </table>

cypress/e2e/user/user-list.cy.ts

@@ -1,5 +1,5 @@
 const testUser = {
-  displayName: 'Test User',
+  username: 'Test User',
   emailAddress: 'test@seeerr.dev',
   password: 'test1234',
 };
@@ -32,7 +32,7 @@ describe('User List', () => {
 
     cy.get('[data-testid=modal-title]').should('contain', 'Create Local User');
 
-    cy.get('#displayName').type(testUser.displayName);
+    cy.get('#username').type(testUser.username);
     cy.get('#email').type(testUser.emailAddress);
     cy.get('#password').type(testUser.password);
 

docs/getting-started/buildfromsource.mdx

@@ -248,6 +248,7 @@ 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:
@@ -272,6 +273,7 @@ git checkout develop # by default, you are on the develop branch so this step is
 ```
 3. Install the dependencies:
 ```powershell
+npm install -g win-node-env
 set CYPRESS_INSTALL_BINARY=0 && pnpm install --frozen-lockfile
 ```
 4. Build the project:

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

@@ -6,10 +6,6 @@ module.exports = {
     commitTag: process.env.COMMIT_TAG || 'local',
     forceIpv4First: process.env.FORCE_IPV4_FIRST === 'true' ? 'true' : 'false',
   },
-  publicRuntimeConfig: {
-    // Will be available on both server and client
-    JELLYFIN_TYPE: process.env.JELLYFIN_TYPE,
-  },
   images: {
     remotePatterns: [
       { hostname: 'gravatar.com' },

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:
@@ -3586,6 +3601,8 @@ paths:
                   type: string
                 email:
                   type: string
+                serverType:
+                  type: number
               required:
                 - username
                 - password
@@ -4040,6 +4057,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
@@ -4862,6 +4967,11 @@ paths:
           schema:
             type: string
             example: 8|9
+        - in: query
+          name: status
+          schema:
+            type: string
+            example: 3|4
       responses:
         '200':
           description: Results

server/api/externalapi.ts

@@ -68,7 +68,10 @@ class ExternalAPI {
     if (!response.ok) {
       const text = await response.text();
       throw new Error(
-        `${response.status} ${response.statusText}${text ? ': ' + text : ''}`
+        `${response.status} ${response.statusText}${text ? ': ' + text : ''}`,
+        {
+          cause: response,
+        }
       );
     }
     const data = await this.getDataFromResponse(response);
@@ -82,7 +85,7 @@ class ExternalAPI {
 
   protected async post<T>(
     endpoint: string,
-    data: Record<string, unknown>,
+    data?: Record<string, unknown>,
     params?: Record<string, string>,
     ttl?: number,
     config?: RequestInit
@@ -104,8 +107,17 @@ class ExternalAPI {
         ...this.defaultHeaders,
         ...config?.headers,
       },
-      body: JSON.stringify(data),
+      body: data ? JSON.stringify(data) : undefined,
     });
+    if (!response.ok) {
+      const text = await response.text();
+      throw new Error(
+        `${response.status} ${response.statusText}${text ? ': ' + text : ''}`,
+        {
+          cause: response,
+        }
+      );
+    }
     const resData = await this.getDataFromResponse(response);
 
     if (this.cache) {
@@ -141,6 +153,15 @@ class ExternalAPI {
       },
       body: JSON.stringify(data),
     });
+    if (!response.ok) {
+      const text = await response.text();
+      throw new Error(
+        `${response.status} ${response.statusText}${text ? ': ' + text : ''}`,
+        {
+          cause: response,
+        }
+      );
+    }
     const resData = await this.getDataFromResponse(response);
 
     if (this.cache) {
@@ -157,12 +178,22 @@ class ExternalAPI {
   ): Promise<T> {
     const url = this.formatUrl(endpoint, params);
     const response = await this.fetch(url, {
+      method: 'DELETE',
       ...config,
       headers: {
         ...this.defaultHeaders,
         ...config?.headers,
       },
     });
+    if (!response.ok) {
+      const text = await response.text();
+      throw new Error(
+        `${response.status} ${response.statusText}${text ? ': ' + text : ''}`,
+        {
+          cause: response,
+        }
+      );
+    }
     const data = await this.getDataFromResponse(response);
 
     return data;
@@ -197,6 +228,17 @@ class ExternalAPI {
             ...config?.headers,
           },
         }).then(async (response) => {
+          if (!response.ok) {
+            const text = await response.text();
+            throw new Error(
+              `${response.status} ${response.statusText}${
+                text ? ': ' + text : ''
+              }`,
+              {
+                cause: response,
+              }
+            );
+          }
           const data = await this.getDataFromResponse(response);
           this.cache?.set(cacheKey, data, ttl ?? DEFAULT_TTL);
         });
@@ -212,6 +254,15 @@ class ExternalAPI {
         ...config?.headers,
       },
     });
+    if (!response.ok) {
+      const text = await response.text();
+      throw new Error(
+        `${response.status} ${response.statusText}${text ? ': ' + text : ''}`,
+        {
+          cause: response,
+        }
+      );
+    }
     const data = await this.getDataFromResponse(response);
 
     if (this.cache) {
@@ -235,7 +286,12 @@ class ExternalAPI {
       ...this.params,
       ...params,
     });
-    return `${href}?${searchParams.toString()}`;
+    return (
+      href +
+      (searchParams.toString().length
+        ? '?' + searchParams.toString()
+        : searchParams.toString())
+    );
   }
 
   private serializeCacheKey(
@@ -250,20 +306,24 @@ class ExternalAPI {
   }
 
   private async getDataFromResponse(response: Response) {
-    const contentType = response.headers.get('Content-Type')?.split(';')[0];
-    if (contentType === 'application/json') {
+    const contentType = response.headers.get('Content-Type');
+    if (contentType?.includes('application/json')) {
       return await response.json();
     } else if (
-      contentType === 'application/xml' ||
-      contentType === 'text/html' ||
-      contentType === 'text/plain'
+      contentType?.includes('application/xml') ||
+      contentType?.includes('text/html') ||
+      contentType?.includes('text/plain')
     ) {
       return await response.text();
     } else {
       try {
         return await response.json();
       } catch {
-        return await response.blob();
+        try {
+          return await response.blob();
+        } catch {
+          return null;
+        }
       }
     }
   }

server/api/jellyfin.ts

@@ -93,9 +93,7 @@ export interface JellyfinLibraryItemExtended extends JellyfinLibraryItem {
 }
 
 class JellyfinAPI extends ExternalAPI {
-  private authToken?: string;
   private userId?: string;
-  private jellyfinHost: string;
 
   constructor(jellyfinHost: string, authToken?: string, deviceId?: string) {
     let authHeaderVal: string;
@@ -114,9 +112,6 @@ class JellyfinAPI extends ExternalAPI {
         },
       }
     );
-
-    this.jellyfinHost = jellyfinHost;
-    this.authToken = authToken;
   }
 
   public async login(
@@ -152,7 +147,7 @@ class JellyfinAPI extends ExternalAPI {
     try {
       return await authenticate(false);
     } catch (e) {
-      const status = e.response?.status;
+      const status = e.cause?.status;
 
       const networkErrorCodes = new Set([
         'ECONNREFUSED',
@@ -190,7 +185,7 @@ class JellyfinAPI extends ExternalAPI {
 
       return systemInfoResponse;
     } catch (e) {
-      throw new ApiError(e.response?.status, ApiErrorCode.InvalidAuthToken);
+      throw new ApiError(e.cause?.status, ApiErrorCode.InvalidAuthToken);
     }
   }
 
@@ -207,7 +202,7 @@ class JellyfinAPI extends ExternalAPI {
         { label: 'Jellyfin API' }
       );
 
-      throw new ApiError(e.response?.status, ApiErrorCode.Unknown);
+      throw new ApiError(e.cause?.status, ApiErrorCode.Unknown);
     }
   }
 
@@ -222,7 +217,7 @@ class JellyfinAPI extends ExternalAPI {
         { label: 'Jellyfin API' }
       );
 
-      throw new ApiError(e.response?.status, ApiErrorCode.InvalidAuthToken);
+      throw new ApiError(e.cause?.status, ApiErrorCode.InvalidAuthToken);
     }
   }
 
@@ -238,7 +233,7 @@ class JellyfinAPI extends ExternalAPI {
         { label: 'Jellyfin API' }
       );
 
-      throw new ApiError(e.response?.status, ApiErrorCode.InvalidAuthToken);
+      throw new ApiError(e.cause?.status, ApiErrorCode.InvalidAuthToken);
     }
   }
 
@@ -317,7 +312,7 @@ class JellyfinAPI extends ExternalAPI {
         { label: 'Jellyfin API' }
       );
 
-      throw new ApiError(e.response?.status, ApiErrorCode.InvalidAuthToken);
+      throw new ApiError(e.cause?.status, ApiErrorCode.InvalidAuthToken);
     }
   }
 
@@ -338,7 +333,7 @@ class JellyfinAPI extends ExternalAPI {
         { label: 'Jellyfin API' }
       );
 
-      throw new ApiError(e.response?.status, ApiErrorCode.InvalidAuthToken);
+      throw new ApiError(e.cause?.status, ApiErrorCode.InvalidAuthToken);
     }
   }
 
@@ -353,7 +348,7 @@ class JellyfinAPI extends ExternalAPI {
       return itemResponse;
     } catch (e) {
       if (availabilitySync.running) {
-        if (e.response && e.response.status === 500) {
+        if (e.cause?.status === 500) {
           return undefined;
         }
       }
@@ -362,7 +357,7 @@ class JellyfinAPI extends ExternalAPI {
         `Something went wrong while getting library content from the Jellyfin server: ${e.message}`,
         { label: 'Jellyfin API' }
       );
-      throw new ApiError(e.response?.status, ApiErrorCode.InvalidAuthToken);
+      throw new ApiError(e.cause?.status, ApiErrorCode.InvalidAuthToken);
     }
   }
 
@@ -377,7 +372,7 @@ class JellyfinAPI extends ExternalAPI {
         { label: 'Jellyfin API' }
       );
 
-      throw new ApiError(e.response?.status, ApiErrorCode.InvalidAuthToken);
+      throw new ApiError(e.cause?.status, ApiErrorCode.InvalidAuthToken);
     }
   }
 
@@ -402,6 +397,23 @@ class JellyfinAPI extends ExternalAPI {
         { label: 'Jellyfin API' }
       );
 
+      throw new ApiError(e.cause?.status, ApiErrorCode.InvalidAuthToken);
+    }
+  }
+
+  public async createApiToken(appName: string): Promise<string> {
+    try {
+      await this.post(`/Auth/Keys?App=${appName}`);
+      const apiKeys = await this.get<any>(`/Auth/Keys`);
+      return apiKeys.Items.reverse().find(
+        (item: any) => item.AppName === appName
+      ).AccessToken;
+    } catch (e) {
+      logger.error(
+        `Something went wrong while creating an API key the Jellyfin server: ${e.message}`,
+        { label: 'Jellyfin API' }
+      );
+
       throw new ApiError(e.response?.status, ApiErrorCode.InvalidAuthToken);
     }
   }

server/api/rating/imdbRadarrProxy.ts

@@ -175,7 +175,11 @@ class IMDBRadarrProxy extends ExternalAPI {
         `/movie/imdb/${IMDBid}`
       );
 
-      if (!data?.length || data[0].ImdbId !== IMDBid) {
+      if (
+        !data?.length ||
+        data[0].ImdbId !== IMDBid ||
+        !data[0].MovieRatings.Imdb
+      ) {
         return null;
       }
 

server/api/servarr/radarr.ts

@@ -179,13 +179,20 @@ class RadarrAPI extends ServarrBase<{ movieId: number }> {
       }
       return data;
     } catch (e) {
+      let errorData;
+      try {
+        errorData = await e.cause?.text();
+        errorData = JSON.parse(errorData);
+      } catch {
+        /* empty */
+      }
       logger.error(
         'Failed to add movie to Radarr. This might happen if the movie already exists, in which case you can safely ignore this error.',
         {
           label: 'Radarr',
           errorMessage: e.message,
           options,
-          response: e?.response?.data,
+          response: errorData,
         }
       );
       throw new Error('Failed to add movie to Radarr');

server/api/servarr/sonarr.ts

@@ -257,11 +257,18 @@ class SonarrAPI extends ServarrBase<{
 
       return createdSeriesData;
     } catch (e) {
+      let errorData;
+      try {
+        errorData = await e.cause?.text();
+        errorData = JSON.parse(errorData);
+      } catch {
+        /* empty */
+      }
       logger.error('Something went wrong while adding a series to Sonarr.', {
         label: 'Sonarr API',
         errorMessage: e.message,
         options,
-        response: e?.response?.data,
+        response: errorData,
       });
       throw new Error('Failed to add series');
     }
@@ -296,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/constants/server.ts

@@ -4,3 +4,8 @@ export enum MediaServerType {
   EMBY,
   NOT_CONFIGURED,
 }
+
+export enum ServerType {
+  JELLYFIN = 'Jellyfin',
+  EMBY = 'Emby',
+}

server/constants/user.ts

@@ -2,4 +2,5 @@ export enum UserType {
   PLEX = 1,
   LOCAL = 2,
   JELLYFIN = 3,
+  EMBY = 4,
 }

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;
 
@@ -211,9 +218,10 @@ class Media {
       }
     } else {
       const pageName =
-        process.env.JELLYFIN_TYPE === 'emby' ? 'item' : 'details';
+        getSettings().main.mediaServerType == MediaServerType.EMBY
+          ? 'item'
+          : 'details';
       const { serverId, externalHostname } = getSettings().jellyfin;
-
       const jellyfinHost =
         externalHostname && externalHostname.length > 0
           ? externalHostname

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

@@ -63,7 +63,7 @@ app
     }
 
     // Load Settings
-    const settings = getSettings();
+    const settings = await getSettings().load();
     restartFlag.initializeSettings(settings.main);
 
     // Migrate library types

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/common.ts

@@ -8,3 +8,16 @@ interface PageInfo {
 export interface PaginatedResponse {
   pageInfo: PageInfo;
 }
+
+/**
+ * Get the keys of an object that are not functions
+ */
+type NonFunctionPropertyNames<T> = {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  [K in keyof T]: T[K] extends Function ? never : K;
+}[keyof T];
+
+/**
+ * Get the properties of an object that are not functions
+ */
+export type NonFunctionProperties<T> = Pick<T, NonFunctionPropertyNames<T>>;

server/interfaces/api/requestInterfaces.ts

@@ -1,9 +1,9 @@
 import type { MediaType } from '@server/constants/media';
 import type { MediaRequest } from '@server/entity/MediaRequest';
-import type { PaginatedResponse } from './common';
+import type { NonFunctionProperties, PaginatedResponse } from './common';
 
 export interface RequestResultsResponse extends PaginatedResponse {
-  results: MediaRequest[];
+  results: NonFunctionProperties<MediaRequest>[];
 }
 
 export type MediaRequestBody = {
@@ -14,6 +14,7 @@ export type MediaRequestBody = {
   is4k?: boolean;
   serverId?: number;
   profileId?: number;
+  profileName?: string;
   rootFolder?: string;
   languageProfileId?: number;
   userId?: number;

server/lib/availabilitySync.ts

@@ -63,12 +63,7 @@ class AvailabilitySync {
       ) {
         admin = await userRepository.findOne({
           where: { id: 1 },
-          select: [
-            'id',
-            'jellyfinAuthToken',
-            'jellyfinUserId',
-            'jellyfinDeviceId',
-          ],
+          select: ['id', 'jellyfinUserId', 'jellyfinDeviceId'],
           order: { id: 'ASC' },
         });
       }
@@ -86,7 +81,7 @@ class AvailabilitySync {
           if (admin) {
             this.jellyfinClient = new JellyfinAPI(
               getHostname(),
-              admin.jellyfinAuthToken,
+              settings.jellyfin.apiKey,
               admin.jellyfinDeviceId
             );
 

server/lib/downloadtracker.ts

@@ -20,6 +20,7 @@ export interface DownloadingItem {
   timeLeft: string;
   estimatedCompletionTime: Date;
   title: string;
+  downloadId: string;
   episode?: EpisodeNumberResult;
 }
 
@@ -95,6 +96,7 @@ class DownloadTracker {
               status: item.status,
               timeLeft: item.timeleft,
               title: item.title,
+              downloadId: item.downloadId,
             }));
 
             if (queueItems.length > 0) {
@@ -172,6 +174,7 @@ class DownloadTracker {
               timeLeft: item.timeleft,
               title: item.title,
               episode: item.episode,
+              downloadId: item.downloadId,
             }));
 
             if (queueItems.length > 0) {

server/lib/notifications/agents/discord.ts

@@ -291,7 +291,7 @@ class DiscordAgent
         }
       }
 
-      await fetch(settings.options.webhookUrl, {
+      const response = await fetch(settings.options.webhookUrl, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -305,15 +305,25 @@ class DiscordAgent
           content: userMentions.join(' '),
         } as DiscordWebhookPayload),
       });
+      if (!response.ok) {
+        throw new Error(response.statusText, { cause: response });
+      }
 
       return true;
     } catch (e) {
+      let errorData;
+      try {
+        errorData = await e.cause?.text();
+        errorData = JSON.parse(errorData);
+      } catch {
+        /* empty */
+      }
       logger.error('Error sending Discord notification', {
         label: 'Notifications',
         type: Notification[type],
         subject: payload.subject,
         errorMessage: e.message,
-        response: e.response?.data,
+        response: errorData,
       });
 
       return false;

server/lib/notifications/agents/gotify.ts

@@ -132,22 +132,32 @@ class GotifyAgent
       const endpoint = `${settings.options.url}/message?token=${settings.options.token}`;
       const notificationPayload = this.getNotificationPayload(type, payload);
 
-      await fetch(endpoint, {
+      const response = await fetch(endpoint, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
         },
         body: JSON.stringify(notificationPayload),
       });
+      if (!response.ok) {
+        throw new Error(response.statusText, { cause: response });
+      }
 
       return true;
     } catch (e) {
+      let errorData;
+      try {
+        errorData = await e.cause?.text();
+        errorData = JSON.parse(errorData);
+      } catch {
+        /* empty */
+      }
       logger.error('Error sending Gotify notification', {
         label: 'Notifications',
         type: Notification[type],
         subject: payload.subject,
         errorMessage: e.message,
-        response: e.response?.data,
+        response: errorData,
       });
 
       return false;

server/lib/notifications/agents/lunasea.ts

@@ -100,7 +100,7 @@ class LunaSeaAgent
     });
 
     try {
-      await fetch(settings.options.webhookUrl, {
+      const response = await fetch(settings.options.webhookUrl, {
         method: 'POST',
         headers: settings.options.profileName
           ? {
@@ -114,15 +114,25 @@ class LunaSeaAgent
             },
         body: JSON.stringify(this.buildPayload(type, payload)),
       });
+      if (!response.ok) {
+        throw new Error(response.statusText, { cause: response });
+      }
 
       return true;
     } catch (e) {
+      let errorData;
+      try {
+        errorData = await e.cause?.text();
+        errorData = JSON.parse(errorData);
+      } catch {
+        /* empty */
+      }
       logger.error('Error sending LunaSea notification', {
         label: 'Notifications',
         type: Notification[type],
         subject: payload.subject,
         errorMessage: e.message,
-        response: e.response?.data,
+        response: errorData,
       });
 
       return false;

server/lib/notifications/agents/pushbullet.ts

@@ -122,7 +122,7 @@ class PushbulletAgent
       });
 
       try {
-        await fetch(endpoint, {
+        const response = await fetch(endpoint, {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json',
@@ -133,13 +133,23 @@ class PushbulletAgent
             channel_tag: settings.options.channelTag,
           }),
         });
+        if (!response.ok) {
+          throw new Error(response.statusText, { cause: response });
+        }
       } catch (e) {
+        let errorData;
+        try {
+          errorData = await e.cause?.text();
+          errorData = JSON.parse(errorData);
+        } catch {
+          /* empty */
+        }
         logger.error('Error sending Pushbullet notification', {
           label: 'Notifications',
           type: Notification[type],
           subject: payload.subject,
           errorMessage: e.message,
-          response: e.response?.data,
+          response: errorData,
         });
 
         return false;
@@ -164,7 +174,7 @@ class PushbulletAgent
         });
 
         try {
-          await fetch(endpoint, {
+          const response = await fetch(endpoint, {
             method: 'POST',
             headers: {
               'Content-Type': 'application/json',
@@ -172,14 +182,24 @@ class PushbulletAgent
             },
             body: JSON.stringify(notificationPayload),
           });
+          if (!response.ok) {
+            throw new Error(response.statusText, { cause: response });
+          }
         } catch (e) {
+          let errorData;
+          try {
+            errorData = await e.cause?.text();
+            errorData = JSON.parse(errorData);
+          } catch {
+            /* empty */
+          }
           logger.error('Error sending Pushbullet notification', {
             label: 'Notifications',
             recipient: payload.notifyUser.displayName,
             type: Notification[type],
             subject: payload.subject,
             errorMessage: e.message,
-            response: e.response?.data,
+            response: errorData,
           });
 
           return false;
@@ -215,7 +235,7 @@ class PushbulletAgent
               });
 
               try {
-                await fetch(endpoint, {
+                const response = await fetch(endpoint, {
                   method: 'POST',
                   headers: {
                     'Content-Type': 'application/json',
@@ -223,14 +243,24 @@ class PushbulletAgent
                   },
                   body: JSON.stringify(notificationPayload),
                 });
+                if (!response.ok) {
+                  throw new Error(response.statusText, { cause: response });
+                }
               } catch (e) {
+                let errorData;
+                try {
+                  errorData = await e.cause?.text();
+                  errorData = JSON.parse(errorData);
+                } catch {
+                  /* empty */
+                }
                 logger.error('Error sending Pushbullet notification', {
                   label: 'Notifications',
                   recipient: user.displayName,
                   type: Notification[type],
                   subject: payload.subject,
                   errorMessage: e.message,
-                  response: e.response?.data,
+                  response: errorData,
                 });
 
                 return false;

server/lib/notifications/agents/pushover.ts

@@ -52,6 +52,9 @@ class PushoverAgent
   ): Promise<Partial<PushoverImagePayload>> {
     try {
       const response = await fetch(imageUrl);
+      if (!response.ok) {
+        throw new Error(response.statusText, { cause: response });
+      }
       const arrayBuffer = await response.arrayBuffer();
       const base64 = Buffer.from(arrayBuffer).toString('base64');
       const contentType = (
@@ -64,10 +67,17 @@ class PushoverAgent
         attachment_type: contentType,
       };
     } catch (e) {
+      let errorData;
+      try {
+        errorData = await e.cause?.text();
+        errorData = JSON.parse(errorData);
+      } catch {
+        /* empty */
+      }
       logger.error('Error getting image payload', {
         label: 'Notifications',
         errorMessage: e.message,
-        response: e.response?.data,
+        response: errorData,
       });
       return {};
     }
@@ -200,7 +210,7 @@ class PushoverAgent
       });
 
       try {
-        await fetch(endpoint, {
+        const response = await fetch(endpoint, {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json',
@@ -212,13 +222,23 @@ class PushoverAgent
             sound: settings.options.sound,
           } as PushoverPayload),
         });
+        if (!response.ok) {
+          throw new Error(response.statusText, { cause: response });
+        }
       } catch (e) {
+        let errorData;
+        try {
+          errorData = await e.cause?.text();
+          errorData = JSON.parse(errorData);
+        } catch {
+          /* empty */
+        }
         logger.error('Error sending Pushover notification', {
           label: 'Notifications',
           type: Notification[type],
           subject: payload.subject,
           errorMessage: e.message,
-          response: e.response?.data,
+          response: errorData,
         });
 
         return false;
@@ -246,7 +266,7 @@ class PushoverAgent
         });
 
         try {
-          await fetch(endpoint, {
+          const response = await fetch(endpoint, {
             method: 'POST',
             headers: {
               'Content-Type': 'application/json',
@@ -258,14 +278,24 @@ class PushoverAgent
               sound: payload.notifyUser.settings.pushoverSound,
             } as PushoverPayload),
           });
+          if (!response.ok) {
+            throw new Error(response.statusText, { cause: response });
+          }
         } catch (e) {
+          let errorData;
+          try {
+            errorData = await e.cause?.text();
+            errorData = JSON.parse(errorData);
+          } catch {
+            /* empty */
+          }
           logger.error('Error sending Pushover notification', {
             label: 'Notifications',
             recipient: payload.notifyUser.displayName,
             type: Notification[type],
             subject: payload.subject,
             errorMessage: e.message,
-            response: e.response?.data,
+            response: errorData,
           });
 
           return false;
@@ -302,7 +332,7 @@ class PushoverAgent
               });
 
               try {
-                await fetch(endpoint, {
+                const response = await fetch(endpoint, {
                   method: 'POST',
                   headers: {
                     'Content-Type': 'application/json',
@@ -313,14 +343,24 @@ class PushoverAgent
                     user: user.settings.pushoverUserKey,
                   } as PushoverPayload),
                 });
+                if (!response.ok) {
+                  throw new Error(response.statusText, { cause: response });
+                }
               } catch (e) {
+                let errorData;
+                try {
+                  errorData = await e.cause?.text();
+                  errorData = JSON.parse(errorData);
+                } catch {
+                  /* empty */
+                }
                 logger.error('Error sending Pushover notification', {
                   label: 'Notifications',
                   recipient: user.displayName,
                   type: Notification[type],
                   subject: payload.subject,
                   errorMessage: e.message,
-                  response: e.response?.data,
+                  response: errorData,
                 });
 
                 return false;

server/lib/notifications/agents/slack.ts

@@ -237,22 +237,32 @@ class SlackAgent
       subject: payload.subject,
     });
     try {
-      await fetch(settings.options.webhookUrl, {
+      const response = await fetch(settings.options.webhookUrl, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
         },
         body: JSON.stringify(this.buildEmbed(type, payload)),
       });
+      if (!response.ok) {
+        throw new Error(response.statusText, { cause: response });
+      }
 
       return true;
     } catch (e) {
+      let errorData;
+      try {
+        errorData = await e.cause?.text();
+        errorData = JSON.parse(errorData);
+      } catch {
+        /* empty */
+      }
       logger.error('Error sending Slack notification', {
         label: 'Notifications',
         type: Notification[type],
         subject: payload.subject,
         errorMessage: e.message,
-        response: e.response?.data,
+        response: errorData,
       });
 
       return false;

server/lib/notifications/agents/telegram.ts

@@ -174,7 +174,7 @@ class TelegramAgent
       });
 
       try {
-        await fetch(endpoint, {
+        const response = await fetch(endpoint, {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json',
@@ -185,13 +185,23 @@ class TelegramAgent
             disable_notification: !!settings.options.sendSilently,
           } as TelegramMessagePayload | TelegramPhotoPayload),
         });
+        if (!response.ok) {
+          throw new Error(response.statusText, { cause: response });
+        }
       } catch (e) {
+        let errorData;
+        try {
+          errorData = await e.cause?.text();
+          errorData = JSON.parse(errorData);
+        } catch {
+          /* empty */
+        }
         logger.error('Error sending Telegram notification', {
           label: 'Notifications',
           type: Notification[type],
           subject: payload.subject,
           errorMessage: e.message,
-          response: e.response?.data,
+          response: errorData,
         });
 
         return false;
@@ -215,7 +225,7 @@ class TelegramAgent
         });
 
         try {
-          await fetch(endpoint, {
+          const response = await fetch(endpoint, {
             method: 'POST',
             headers: {
               'Content-Type': 'application/json',
@@ -227,14 +237,24 @@ class TelegramAgent
                 !!payload.notifyUser.settings.telegramSendSilently,
             } as TelegramMessagePayload | TelegramPhotoPayload),
           });
+          if (!response.ok) {
+            throw new Error(response.statusText, { cause: response });
+          }
         } catch (e) {
+          let errorData;
+          try {
+            errorData = await e.cause?.text();
+            errorData = JSON.parse(errorData);
+          } catch {
+            /* empty */
+          }
           logger.error('Error sending Telegram notification', {
             label: 'Notifications',
             recipient: payload.notifyUser.displayName,
             type: Notification[type],
             subject: payload.subject,
             errorMessage: e.message,
-            response: e.response?.data,
+            response: errorData,
           });
 
           return false;
@@ -268,7 +288,7 @@ class TelegramAgent
               });
 
               try {
-                await fetch(endpoint, {
+                const response = await fetch(endpoint, {
                   method: 'POST',
                   headers: {
                     'Content-Type': 'application/json',
@@ -279,14 +299,24 @@ class TelegramAgent
                     disable_notification: !!user.settings?.telegramSendSilently,
                   } as TelegramMessagePayload | TelegramPhotoPayload),
                 });
+                if (!response.ok) {
+                  throw new Error(response.statusText, { cause: response });
+                }
               } catch (e) {
+                let errorData;
+                try {
+                  errorData = await e.cause?.text();
+                  errorData = JSON.parse(errorData);
+                } catch {
+                  /* empty */
+                }
                 logger.error('Error sending Telegram notification', {
                   label: 'Notifications',
                   recipient: user.displayName,
                   type: Notification[type],
                   subject: payload.subject,
                   errorMessage: e.message,
-                  response: e.response?.data,
+                  response: errorData,
                 });
 
                 return false;

server/lib/notifications/agents/webhook.ts

@@ -177,7 +177,7 @@ class WebhookAgent
     });
 
     try {
-      await fetch(settings.options.webhookUrl, {
+      const response = await fetch(settings.options.webhookUrl, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -187,15 +187,25 @@ class WebhookAgent
         },
         body: JSON.stringify(this.buildPayload(type, payload)),
       });
+      if (!response.ok) {
+        throw new Error(response.statusText, { cause: response });
+      }
 
       return true;
     } catch (e) {
+      let errorData;
+      try {
+        errorData = await e.cause?.text();
+        errorData = JSON.parse(errorData);
+      } catch {
+        /* empty */
+      }
       logger.error('Error sending webhook notification', {
         label: 'Notifications',
         type: Notification[type],
         subject: payload.subject,
         errorMessage: e.message,
-        response: e.response?.data,
+        response: errorData,
       });
 
       return false;

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/scanners/jellyfin/index.ts

@@ -567,7 +567,10 @@ class JellyfinScanner {
   public async run(): Promise<void> {
     const settings = getSettings();
 
-    if (settings.main.mediaServerType != MediaServerType.JELLYFIN) {
+    if (
+      settings.main.mediaServerType != MediaServerType.JELLYFIN &&
+      settings.main.mediaServerType != MediaServerType.EMBY
+    ) {
       return;
     }
 
@@ -582,12 +585,7 @@ class JellyfinScanner {
       const userRepository = getRepository(User);
       const admin = await userRepository.findOne({
         where: { id: 1 },
-        select: [
-          'id',
-          'jellyfinAuthToken',
-          'jellyfinUserId',
-          'jellyfinDeviceId',
-        ],
+        select: ['id', 'jellyfinUserId', 'jellyfinDeviceId'],
         order: { id: 'ASC' },
       });
 
@@ -597,7 +595,7 @@ class JellyfinScanner {
 
       this.jfClient = new JellyfinAPI(
         getHostname(),
-        admin.jellyfinAuthToken,
+        settings.jellyfin.apiKey,
         admin.jellyfinDeviceId
       );
 

server/lib/settings/index.ts

@@ -47,6 +47,7 @@ export interface JellyfinSettings {
   jellyfinForgotPasswordUrl?: string;
   libraries: Library[];
   serverId: string;
+  apiKey: string;
 }
 export interface TautulliSettings {
   hostname?: string;
@@ -342,6 +343,7 @@ class Settings {
         jellyfinForgotPasswordUrl: '',
         libraries: [],
         serverId: '',
+        apiKey: '',
       },
       tautulli: {},
       radarr: [],
@@ -609,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 {
@@ -629,7 +635,7 @@ class Settings {
    * @param overrideSettings If passed in, will override all existing settings with these
    * values
    */
-  public load(overrideSettings?: AllSettings): Settings {
+  public async load(overrideSettings?: AllSettings): Promise<Settings> {
     if (overrideSettings) {
       this.data = overrideSettings;
       return this;
@@ -642,10 +648,16 @@ class Settings {
 
     if (data) {
       const parsedJson = JSON.parse(data);
-      this.data = runMigrations(parsedJson);
+      this.data = await runMigrations(parsedJson);
 
       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;
@@ -656,7 +668,6 @@ class Settings {
   }
 }
 
-let loaded = false;
 let settings: Settings | undefined;
 
 export const getSettings = (initialSettings?: AllSettings): Settings => {
@@ -664,11 +675,6 @@ export const getSettings = (initialSettings?: AllSettings): Settings => {
     settings = new Settings(initialSettings);
   }
 
-  if (!loaded) {
-    settings.load();
-    loaded = true;
-  }
-
   return settings;
 };
 

server/lib/settings/migrations/0002_migrate_apitokens.ts

@@ -0,0 +1,36 @@
+import JellyfinAPI from '@server/api/jellyfin';
+import { MediaServerType } from '@server/constants/server';
+import { getRepository } from '@server/datasource';
+import { User } from '@server/entity/User';
+import type { AllSettings } from '@server/lib/settings';
+import { getHostname } from '@server/utils/getHostname';
+
+const migrateApiTokens = async (settings: any): Promise<AllSettings> => {
+  const mediaServerType = settings.main.mediaServerType;
+  if (
+    !settings.jellyfin.apiKey &&
+    (mediaServerType === MediaServerType.JELLYFIN ||
+      mediaServerType === MediaServerType.EMBY)
+  ) {
+    const userRepository = getRepository(User);
+    const admin = await userRepository.findOne({
+      where: { id: 1 },
+      select: ['id', 'jellyfinAuthToken', 'jellyfinUserId', 'jellyfinDeviceId'],
+      order: { id: 'ASC' },
+    });
+    if (!admin) {
+      return settings;
+    }
+    const jellyfinClient = new JellyfinAPI(
+      getHostname(settings.jellyfin),
+      admin.jellyfinAuthToken,
+      admin.jellyfinDeviceId
+    );
+    jellyfinClient.setUserId(admin.jellyfinUserId ?? '');
+    const apiKey = await jellyfinClient.createApiToken('Jellyseerr');
+    settings.jellyfin.apiKey = apiKey;
+  }
+  return settings;
+};
+
+export default migrateApiTokens;

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

@@ -0,0 +1,16 @@
+import { MediaServerType } from '@server/constants/server';
+import type { AllSettings } from '@server/lib/settings';
+
+const migrateHostname = (settings: any): AllSettings => {
+  const oldMediaServerType = settings.main.mediaServerType;
+  if (
+    oldMediaServerType === MediaServerType.JELLYFIN &&
+    process.env.JELLYFIN_TYPE === 'emby'
+  ) {
+    settings.main.mediaServerType = MediaServerType.EMBY;
+  }
+
+  return settings;
+};
+
+export default migrateHostname;

server/lib/settings/migrator.ts

@@ -1,10 +1,13 @@
 import type { AllSettings } from '@server/lib/settings';
+import logger from '@server/logger';
 import fs from 'fs';
 import path from 'path';
 
 const migrationsDir = path.join(__dirname, 'migrations');
 
-export const runMigrations = (settings: AllSettings): AllSettings => {
+export const runMigrations = async (
+  settings: AllSettings
+): Promise<AllSettings> => {
   const migrations = fs
     .readdirSync(migrationsDir)
     .filter((file) => file.endsWith('.js') || file.endsWith('.ts'))
@@ -13,8 +16,15 @@ export const runMigrations = (settings: AllSettings): AllSettings => {
 
   let migrated = settings;
 
-  for (const migration of migrations) {
-    migrated = migration(migrated);
+  try {
+    for (const migration of migrations) {
+      migrated = await migration(migrated);
+    }
+  } catch (e) {
+    logger.error(
+      `Something went wrong while running settings migrations: ${e.message}`,
+      { label: 'Settings Migrator' }
+    );
   }
 
   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/models/Movie.ts

@@ -85,6 +85,7 @@ export interface MovieDetails {
   mediaUrl?: string;
   watchProviders?: WatchProviders[];
   keywords: Keyword[];
+  onUserWatchlist?: boolean;
 }
 
 export const mapProductionCompany = (
@@ -101,7 +102,8 @@ export const mapProductionCompany = (
 
 export const mapMovieDetails = (
   movie: TmdbMovieDetails,
-  media?: Media
+  media?: Media,
+  userWatchlist?: boolean
 ): MovieDetails => ({
   id: movie.id,
   adult: movie.adult,
@@ -148,4 +150,5 @@ export const mapMovieDetails = (
     id: keyword.id,
     name: keyword.name,
   })),
+  onUserWatchlist: userWatchlist,
 });

server/models/Tv.ts

@@ -111,6 +111,7 @@ export interface TvDetails {
   keywords: Keyword[];
   mediaInfo?: Media;
   watchProviders?: WatchProviders[];
+  onUserWatchlist?: boolean;
 }
 
 const mapEpisodeResult = (episode: TmdbTvEpisodeResult): Episode => ({
@@ -161,7 +162,8 @@ export const mapNetwork = (network: TmdbNetwork): TvNetwork => ({
 
 export const mapTvDetails = (
   show: TmdbTvDetails,
-  media?: Media
+  media?: Media,
+  userWatchlist?: boolean
 ): TvDetails => ({
   createdBy: show.created_by,
   episodeRunTime: show.episode_run_time,
@@ -223,4 +225,5 @@ export const mapTvDetails = (
   })),
   mediaInfo: media,
   watchProviders: mapWatchProviders(show['watch/providers']?.results ?? {}),
+  onUserWatchlist: userWatchlist,
 });

server/routes/auth.ts

@@ -1,7 +1,7 @@
 import JellyfinAPI from '@server/api/jellyfin';
 import PlexTvAPI from '@server/api/plextv';
 import { ApiErrorCode } from '@server/constants/error';
-import { MediaServerType } from '@server/constants/server';
+import { MediaServerType, ServerType } from '@server/constants/server';
 import { UserType } from '@server/constants/user';
 import { getRepository } from '@server/datasource';
 import { User } from '@server/entity/User';
@@ -227,15 +227,20 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
     urlBase?: string;
     useSsl?: boolean;
     email?: string;
+    serverType?: number;
   };
 
-  //Make sure jellyfin login is enabled, but only if jellyfin is not already configured
+  //Make sure jellyfin login is enabled, but only if jellyfin && Emby is not already configured
   if (
     settings.main.mediaServerType !== MediaServerType.JELLYFIN &&
-    settings.main.mediaServerType != MediaServerType.NOT_CONFIGURED
+    settings.main.mediaServerType !== MediaServerType.EMBY &&
+    settings.main.mediaServerType != MediaServerType.NOT_CONFIGURED &&
+    settings.jellyfin.ip !== ''
   ) {
     return res.status(500).json({ error: 'Jellyfin login is disabled' });
-  } else if (!body.username) {
+  }
+
+  if (!body.username) {
     return res.status(500).json({ error: 'You must provide an username' });
   } else if (settings.jellyfin.ip !== '' && body.hostname) {
     return res
@@ -273,7 +278,8 @@ 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 jellyfinserver = new JellyfinAPI(hostname ?? '', undefined, deviceId);
+
     const jellyfinHost =
       externalHostname && externalHostname.length > 0
         ? externalHostname
@@ -317,20 +323,55 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
       );
 
       // User doesn't exist, and there are no users in the database, we'll create the user
-      // with admin permission
-      settings.main.mediaServerType = MediaServerType.JELLYFIN;
-      user = new User({
-        email: body.email,
-        jellyfinUsername: account.User.Name,
-        jellyfinUserId: account.User.Id,
-        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 ?? '', { default: 'mm', size: 200 }),
-        userType: UserType.JELLYFIN,
-      });
+      // with admin permissions
+      switch (body.serverType) {
+        case MediaServerType.EMBY:
+          settings.main.mediaServerType = MediaServerType.EMBY;
+          user = new User({
+            email: body.email || account.User.Name,
+            jellyfinUsername: account.User.Name,
+            jellyfinUserId: account.User.Id,
+            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,
+                }),
+            userType: UserType.EMBY,
+          });
+          break;
+        case MediaServerType.JELLYFIN:
+          settings.main.mediaServerType = MediaServerType.JELLYFIN;
+          user = new User({
+            email: body.email || account.User.Name,
+            jellyfinUsername: account.User.Name,
+            jellyfinUserId: account.User.Id,
+            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,
+                }),
+            userType: UserType.JELLYFIN,
+          });
+          break;
+        default:
+          throw new Error('select_server_type');
+      }
+
+      // Create an API key on Jellyfin from this admin user
+      const jellyfinClient = new JellyfinAPI(
+        hostname,
+        account.AccessToken,
+        deviceId
+      );
+      const apiKey = await jellyfinClient.createApiToken('Jellyseerr');
 
       const serverName = await jellyfinserver.getServerName();
 
@@ -340,6 +381,7 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
       settings.jellyfin.port = body.port ?? 8096;
       settings.jellyfin.urlBase = body.urlBase ?? '';
       settings.jellyfin.useSsl = body.useSsl ?? false;
+      settings.jellyfin.apiKey = apiKey;
       settings.save();
       startJobs();
 
@@ -350,12 +392,12 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
       logger.info(
         `Found matching ${
           settings.main.mediaServerType === MediaServerType.JELLYFIN
-            ? 'Jellyfin'
-            : 'Emby'
+            ? ServerType.JELLYFIN
+            : ServerType.EMBY
         } user; updating user with ${
           settings.main.mediaServerType === MediaServerType.JELLYFIN
-            ? 'Jellyfin'
-            : 'Emby'
+            ? ServerType.JELLYFIN
+            : ServerType.EMBY
         }`,
         {
           label: 'API',
@@ -363,15 +405,11 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
           jellyfinUsername: account.User.Name,
         }
       );
-      // Let's check if their authtoken is up to date
-      if (user.jellyfinAuthToken !== account.AccessToken) {
-        user.jellyfinAuthToken = account.AccessToken;
-      }
       // 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, {
+        user.avatar = gravatarUrl(user.email || account.User.Name, {
           default: 'mm',
           size: 200,
         });
@@ -382,12 +420,6 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
         user.username = '';
       }
 
-      // TODO: If JELLYFIN_TYPE is set to 'emby' then set mediaServerType to EMBY
-      // if (process.env.JELLYFIN_TYPE === 'emby') {
-      //   settings.main.mediaServerType = MediaServerType.EMBY;
-      //   settings.save();
-      // }
-
       await userRepository.save(user);
     } else if (!settings.main.newPlexLogin) {
       logger.warn(
@@ -413,21 +445,22 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
         }
       );
 
-      if (!body.email) {
-        throw new Error('add_email');
-      }
-
       user = new User({
         email: body.email,
         jellyfinUsername: account.User.Name,
         jellyfinUserId: account.User.Id,
         jellyfinDeviceId: deviceId,
-        jellyfinAuthToken: account.AccessToken,
         permissions: settings.main.defaultPermissions,
         avatar: account.User.PrimaryImageTag
           ? `${jellyfinHost}/Users/${account.User.Id}/Images/Primary/?tag=${account.User.PrimaryImageTag}&quality=90`
-          : gravatarUrl(body.email, { default: 'mm', size: 200 }),
-        userType: UserType.JELLYFIN,
+          : gravatarUrl(body.email || account.User.Name, {
+              default: 'mm',
+              size: 200,
+            }),
+        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;

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/movie.ts

@@ -3,7 +3,9 @@ import RottenTomatoes from '@server/api/rating/rottentomatoes';
 import { type RatingResponse } from '@server/api/ratings';
 import TheMovieDb from '@server/api/themoviedb';
 import { MediaType } from '@server/constants/media';
+import { getRepository } from '@server/datasource';
 import Media from '@server/entity/Media';
+import { Watchlist } from '@server/entity/Watchlist';
 import logger from '@server/logger';
 import { mapMovieDetails } from '@server/models/Movie';
 import { mapMovieResult } from '@server/models/Search';
@@ -22,7 +24,24 @@ movieRoutes.get('/:id', async (req, res, next) => {
 
     const media = await Media.getMedia(tmdbMovie.id, MediaType.MOVIE);
 
-    return res.status(200).json(mapMovieDetails(tmdbMovie, media));
+    const onUserWatchlist = await getRepository(Watchlist).exist({
+      where: {
+        tmdbId: Number(req.params.id),
+        requestedBy: {
+          id: req.user?.id,
+        },
+      },
+    });
+
+    const data = mapMovieDetails(tmdbMovie, media, onUserWatchlist);
+
+    // TMDB issue where it doesnt fallback to English when no overview is available in requested locale.
+    if (!data.overview) {
+      const tvEnglish = await tmdb.getMovie({ movieId: Number(req.params.id) });
+      data.overview = tvEnglish.overview;
+    }
+
+    return res.status(200).json(data);
   } catch (e) {
     logger.debug('Something went wrong retrieving movie', {
       label: 'API',

server/routes/request.ts

@@ -1,3 +1,5 @@
+import RadarrAPI from '@server/api/servarr/radarr';
+import SonarrAPI from '@server/api/servarr/sonarr';
 import {
   MediaRequestStatus,
   MediaStatus,
@@ -6,6 +8,7 @@ import {
 import { getRepository } from '@server/datasource';
 import Media from '@server/entity/Media';
 import {
+  BlacklistedMediaError,
   DuplicateMediaRequestError,
   MediaRequest,
   NoSeasonsAvailableError,
@@ -19,6 +22,7 @@ import type {
   RequestResultsResponse,
 } from '@server/interfaces/api/requestInterfaces';
 import { Permission } from '@server/lib/permissions';
+import { getSettings } from '@server/lib/settings';
 import logger from '@server/logger';
 import { isAuthenticated } from '@server/middleware/auth';
 import { Router } from 'express';
@@ -143,6 +147,62 @@ requestRoutes.get<Record<string, unknown>, RequestResultsResponse>(
         .skip(skip)
         .getManyAndCount();
 
+      const settings = getSettings();
+
+      // get all quality profiles for every configured sonarr server
+      const sonarrServers = await Promise.all(
+        settings.sonarr.map(async (sonarrSetting) => {
+          const sonarr = new SonarrAPI({
+            apiKey: sonarrSetting.apiKey,
+            url: SonarrAPI.buildUrl(sonarrSetting, '/api/v3'),
+          });
+
+          return {
+            id: sonarrSetting.id,
+            profiles: await sonarr.getProfiles(),
+          };
+        })
+      );
+
+      // get all quality profiles for every configured radarr server
+      const radarrServers = await Promise.all(
+        settings.radarr.map(async (radarrSetting) => {
+          const radarr = new RadarrAPI({
+            apiKey: radarrSetting.apiKey,
+            url: RadarrAPI.buildUrl(radarrSetting, '/api/v3'),
+          });
+
+          return {
+            id: radarrSetting.id,
+            profiles: await radarr.getProfiles(),
+          };
+        })
+      );
+
+      // add profile names to the media requests, with undefined if not found
+      const requestsWithProfileNames = requests.map((r) => {
+        switch (r.type) {
+          case MediaType.MOVIE: {
+            const profileName = radarrServers
+              .find((serverr) => serverr.id === r.serverId)
+              ?.profiles.find((profile) => profile.id === r.profileId)?.name;
+
+            return {
+              ...r,
+              profileName,
+            };
+          }
+          case MediaType.TV: {
+            return {
+              ...r,
+              profileName: sonarrServers
+                .find((serverr) => serverr.id === r.serverId)
+                ?.profiles.find((profile) => profile.id === r.profileId)?.name,
+            };
+          }
+        }
+      });
+
       return res.status(200).json({
         pageInfo: {
           pages: Math.ceil(requestCount / pageSize),
@@ -150,7 +210,7 @@ requestRoutes.get<Record<string, unknown>, RequestResultsResponse>(
           results: requestCount,
           page: Math.ceil(skip / pageSize) + 1,
         },
-        results: requests,
+        results: requestsWithProfileNames,
       });
     } catch (e) {
       next({ status: 500, message: e.message });
@@ -184,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

@@ -262,7 +262,7 @@ settingsRoutes.post('/jellyfin', async (req, res, next) => {
   try {
     const admin = await userRepository.findOneOrFail({
       where: { id: 1 },
-      select: ['id', 'jellyfinAuthToken', 'jellyfinUserId', 'jellyfinDeviceId'],
+      select: ['id', 'jellyfinUserId', 'jellyfinDeviceId'],
       order: { id: 'ASC' },
     });
 
@@ -270,7 +270,7 @@ settingsRoutes.post('/jellyfin', async (req, res, next) => {
 
     const jellyfinClient = new JellyfinAPI(
       getHostname(tempJellyfinSettings),
-      admin.jellyfinAuthToken ?? '',
+      tempJellyfinSettings.apiKey,
       admin.jellyfinDeviceId ?? ''
     );
 
@@ -318,13 +318,13 @@ settingsRoutes.get('/jellyfin/library', async (req, res, next) => {
   if (req.query.sync) {
     const userRepository = getRepository(User);
     const admin = await userRepository.findOneOrFail({
-      select: ['id', 'jellyfinAuthToken', 'jellyfinDeviceId', 'jellyfinUserId'],
+      select: ['id', 'jellyfinDeviceId', 'jellyfinUserId'],
       where: { id: 1 },
       order: { id: 'ASC' },
     });
     const jellyfinClient = new JellyfinAPI(
       getHostname(),
-      admin.jellyfinAuthToken ?? '',
+      settings.jellyfin.apiKey,
       admin.jellyfinDeviceId ?? ''
     );
 
@@ -376,7 +376,8 @@ settingsRoutes.get('/jellyfin/library', async (req, res, next) => {
 });
 
 settingsRoutes.get('/jellyfin/users', async (req, res) => {
-  const { externalHostname } = getSettings().jellyfin;
+  const settings = getSettings();
+  const { externalHostname } = settings.jellyfin;
   const jellyfinHost =
     externalHostname && externalHostname.length > 0
       ? externalHostname
@@ -384,13 +385,13 @@ settingsRoutes.get('/jellyfin/users', async (req, res) => {
 
   const userRepository = getRepository(User);
   const admin = await userRepository.findOneOrFail({
-    select: ['id', 'jellyfinAuthToken', 'jellyfinDeviceId', 'jellyfinUserId'],
+    select: ['id', 'jellyfinDeviceId', 'jellyfinUserId'],
     where: { id: 1 },
     order: { id: 'ASC' },
   });
   const jellyfinClient = new JellyfinAPI(
     getHostname(),
-    admin.jellyfinAuthToken ?? '',
+    settings.jellyfin.apiKey,
     admin.jellyfinDeviceId ?? ''
   );
 

server/routes/tv.ts

@@ -1,7 +1,9 @@
 import RottenTomatoes from '@server/api/rating/rottentomatoes';
 import TheMovieDb from '@server/api/themoviedb';
 import { MediaType } from '@server/constants/media';
+import { getRepository } from '@server/datasource';
 import Media from '@server/entity/Media';
+import { Watchlist } from '@server/entity/Watchlist';
 import logger from '@server/logger';
 import { mapTvResult } from '@server/models/Search';
 import { mapSeasonWithEpisodes, mapTvDetails } from '@server/models/Tv';
@@ -19,7 +21,24 @@ tvRoutes.get('/:id', async (req, res, next) => {
 
     const media = await Media.getMedia(tv.id, MediaType.TV);
 
-    return res.status(200).json(mapTvDetails(tv, media));
+    const onUserWatchlist = await getRepository(Watchlist).exist({
+      where: {
+        tmdbId: Number(req.params.id),
+        requestedBy: {
+          id: req.user?.id,
+        },
+      },
+    });
+
+    const data = mapTvDetails(tv, media, onUserWatchlist);
+
+    // TMDB issue where it doesnt fallback to English when no overview is available in requested locale.
+    if (!data.overview) {
+      const tvEnglish = await tmdb.getTvShow({ tvId: Number(req.params.id) });
+      data.overview = tvEnglish.overview;
+    }
+
+    return res.status(200).json(data);
   } catch (e) {
     logger.debug('Something went wrong retrieving series', {
       label: 'API',

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';
@@ -41,7 +42,19 @@ router.get('/', async (req, res, next) => {
         break;
       case 'displayname':
         query = query.orderBy(
-          "(CASE WHEN (user.username IS NULL OR user.username = '') THEN (CASE WHEN (user.plexUsername IS NULL OR user.plexUsername = '') THEN user.email ELSE LOWER(user.plexUsername) END) ELSE LOWER(user.username) END)",
+          `CASE WHEN (user.username IS NULL OR user.username = '') THEN (
+             CASE WHEN (user.plexUsername IS NULL OR user.plexUsername = '') THEN (
+               CASE WHEN (user.jellyfinUsername IS NULL OR user.jellyfinUsername = '') THEN
+                 user.email
+               ELSE
+                 LOWER(user.jellyfinUsername)
+               END)
+             ELSE
+               LOWER(user.jellyfinUsername)
+             END)
+           ELSE
+             LOWER(user.username)
+           END`,
           'ASC'
         );
         break;
@@ -90,12 +103,13 @@ router.post(
       const settings = getSettings();
 
       const body = req.body;
+      const email = body.email || body.username;
       const userRepository = getRepository(User);
 
       const existingUser = await userRepository
         .createQueryBuilder('user')
         .where('user.email = :email', {
-          email: body.email.toLowerCase(),
+          email: email.toLowerCase(),
         })
         .getOne();
 
@@ -108,7 +122,7 @@ router.post(
       }
 
       const passedExplicitPassword = body.password && body.password.length > 0;
-      const avatar = gravatarUrl(body.email, { default: 'mm', size: 200 });
+      const avatar = gravatarUrl(email, { default: 'mm', size: 200 });
 
       if (
         !passedExplicitPassword &&
@@ -118,9 +132,9 @@ router.post(
       }
 
       const user = new User({
+        email,
         avatar: body.avatar ?? avatar,
         username: body.username,
-        email: body.email,
         password: body.password,
         permissions: settings.main.defaultPermissions,
         plexToken: '',
@@ -488,17 +502,14 @@ router.post(
       // taken from auth.ts
       const admin = await userRepository.findOneOrFail({
         where: { id: 1 },
-        select: [
-          'id',
-          'jellyfinAuthToken',
-          'jellyfinDeviceId',
-          'jellyfinUserId',
-        ],
+        select: ['id', 'jellyfinDeviceId', 'jellyfinUserId'],
         order: { id: 'ASC' },
       });
+
+      const hostname = getHostname();
       const jellyfinClient = new JellyfinAPI(
-        getHostname(),
-        admin.jellyfinAuthToken ?? '',
+        hostname,
+        settings.jellyfin.apiKey,
         admin.jellyfinDeviceId ?? ''
       );
       jellyfinClient.setUserId(admin.jellyfinUserId ?? '');
@@ -506,7 +517,6 @@ router.post(
       //const jellyfinUsersResponse = await jellyfinClient.getUsers();
       const createdUsers: User[] = [];
       const { externalHostname } = getSettings().jellyfin;
-      const hostname = getHostname();
 
       const jellyfinHost =
         externalHostname && externalHostname.length > 0
@@ -541,7 +551,10 @@ router.post(
                   default: 'mm',
                   size: 200,
                 }),
-            userType: UserType.JELLYFIN,
+            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,7 +100,17 @@ userSettingsRoutes.post<
     }
 
     user.username = req.body.username;
-    user.email = req.body.email ?? user.email;
+    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 (
@@ -143,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 });
+    }
   }
 });
 

server/utils/rateLimit.ts

@@ -7,9 +7,10 @@ type RateLimiteState<T extends (...args: Parameters<T>) => Promise<U>, U> = {
   queue: {
     args: Parameters<T>;
     resolve: (value: U) => void;
+    reject: (reason?: unknown) => void;
   }[];
-  activeRequests: number;
-  timer: NodeJS.Timeout | null;
+  lastTimestamps: number[];
+  timeout: ReturnType<typeof setTimeout>;
 };
 
 const rateLimitById: Record<string, unknown> = {};
@@ -27,46 +28,40 @@ export default function rateLimit<
 >(fn: T, options: RateLimitOptions): (...args: Parameters<T>) => Promise<U> {
   const state: RateLimiteState<T, U> = (rateLimitById[
     options.id || ''
-  ] as RateLimiteState<T, U>) || { queue: [], activeRequests: 0, timer: null };
+  ] as RateLimiteState<T, U>) || { queue: [], lastTimestamps: [] };
   if (options.id) {
     rateLimitById[options.id] = state;
   }
 
   const processQueue = () => {
-    if (state.queue.length === 0) {
-      if (state.timer) {
-        clearInterval(state.timer);
-        state.timer = null;
-      }
-      return;
-    }
+    // remove old timestamps
+    state.lastTimestamps = state.lastTimestamps.filter(
+      (timestamp) => Date.now() - timestamp < 1000
+    );
 
-    while (state.activeRequests < options.maxRPS) {
-      state.activeRequests++;
+    if (state.lastTimestamps.length < options.maxRPS) {
+      // process requests if RPS not exceeded
       const item = state.queue.shift();
-      if (!item) break;
-      const { args, resolve } = item;
+      if (!item) return;
+      state.lastTimestamps.push(Date.now());
+      const { args, resolve, reject } = item;
       fn(...args)
         .then(resolve)
-        .finally(() => {
-          state.activeRequests--;
-          if (state.queue.length > 0) {
-            if (!state.timer) {
-              state.timer = setInterval(processQueue, 1000);
-            }
-          } else {
-            if (state.timer) {
-              clearInterval(state.timer);
-              state.timer = null;
-            }
-          }
-        });
+        .catch(reject);
+      processQueue();
+    } else {
+      // rerun once the oldest item in queue is older than 1s
+      if (state.timeout) clearTimeout(state.timeout);
+      state.timeout = setTimeout(
+        processQueue,
+        1000 - (Date.now() - state.lastTimestamps[0])
+      );
     }
   };
 
   return (...args: Parameters<T>): Promise<U> => {
-    return new Promise<U>((resolve) => {
-      state.queue.push({ args, resolve });
+    return new Promise<U>((resolve, reject) => {
+      state.queue.push({ args, resolve, reject });
       processQueue();
     });
   };

src/assets/services/emby-icon-only.svg

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   id="svg2"
+   viewBox="0 0 712.60077 712.5481"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs4" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     style="opacity:0;fill:#ffffff;stroke-width:4.12543"
+     id="rect249"
+     width="712.60077"
+     height="712.5481"
+     x="-0.00071160076"
+     y="2.0223413e-11" />
+  <rect
+     style="fill:#ffffff"
+     id="rect289"
+     width="230.18982"
+     height="229.82355"
+     x="241.20476"
+     y="241.36227" />
+  <g
+     id="layer1"
+     transform="matrix(0.70249853,0,0,0.70249853,88.770447,96.84571)">
+    <path
+       id="path3427"
+       d="m 327.06546,642.18589 c -45.39663,-45.86009 -82.73776,-83.3683 -82.98029,-83.3516 -0.24253,0.0167 -7.23324,6.65975 -15.53493,14.7623 l -15.09396,14.73193 -40.13624,-40.38805 C 151.24511,525.72706 108.73555,482.86504 78.854363,452.69158 l -54.329437,-54.86086 83.720394,-82.90796 83.72039,-82.90797 -15.19316,-15.20441 -15.19315,-15.20443 95.18008,-94.29313 c 52.34904,-51.86121 95.35849,-94.293118 95.57653,-94.293118 0.21805,0 37.39519,37.357576 82.61589,83.016832 45.22068,45.659256 82.53772,83.131956 82.92673,83.272666 0.38901,0.14071 7.46336,-6.49498 15.72077,-14.746 l 15.01348,-15.00184 7.14591,7.19902 c 73.95232,74.50189 181.50599,183.56427 181.36678,183.9109 -0.10065,0.25064 -37.54056,37.44106 -83.19981,82.64536 -45.65926,45.2043 -83.10802,82.41429 -83.21946,82.68884 -0.11145,0.27456 6.50478,7.34753 14.70272,15.71771 l 14.90534,15.21851 -15.3888,15.28883 c -21.09609,20.95904 -162.95155,161.27018 -169.79551,167.947 l -5.52526,5.39033 z m 89.8523,-204.1566 c 64.84836,-37.53366 117.81919,-68.54793 117.71294,-68.92058 -0.15927,-0.55862 -233.55022,-136.2489 -236.27084,-137.3646 -0.68441,-0.28068 -0.85761,27.45642 -0.85761,137.33982 0,99.83563 0.20749,137.62237 0.75471,137.43996 0.41509,-0.13837 53.81245,-30.96093 118.6608,-68.4946 z"
+       style="fill:#52b54b;fill-opacity:1;stroke:none" />
+  </g>
+</svg>
+

src/assets/services/emby.svg

@@ -1,46 +1,131 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   version="1.1"
-   id="svg2"
-   viewBox="0 0 712.60077 712.5481"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:dc="http://purl.org/dc/elements/1.1/">
-  <defs
-     id="defs4" />
-  <metadata
-     id="metadata7">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <rect
-     style="opacity:0;fill:#ffffff;stroke-width:4.12543"
-     id="rect249"
-     width="712.60077"
-     height="712.5481"
-     x="-0.00071160076"
-     y="2.0223413e-11" />
-  <rect
-     style="fill:#ffffff"
-     id="rect289"
-     width="230.18982"
-     height="229.82355"
-     x="241.20476"
-     y="241.36227" />
-  <g
-     id="layer1"
-     transform="matrix(0.70249853,0,0,0.70249853,88.770447,96.84571)">
-    <path
-       id="path3427"
-       d="m 327.06546,642.18589 c -45.39663,-45.86009 -82.73776,-83.3683 -82.98029,-83.3516 -0.24253,0.0167 -7.23324,6.65975 -15.53493,14.7623 l -15.09396,14.73193 -40.13624,-40.38805 C 151.24511,525.72706 108.73555,482.86504 78.854363,452.69158 l -54.329437,-54.86086 83.720394,-82.90796 83.72039,-82.90797 -15.19316,-15.20441 -15.19315,-15.20443 95.18008,-94.29313 c 52.34904,-51.86121 95.35849,-94.293118 95.57653,-94.293118 0.21805,0 37.39519,37.357576 82.61589,83.016832 45.22068,45.659256 82.53772,83.131956 82.92673,83.272666 0.38901,0.14071 7.46336,-6.49498 15.72077,-14.746 l 15.01348,-15.00184 7.14591,7.19902 c 73.95232,74.50189 181.50599,183.56427 181.36678,183.9109 -0.10065,0.25064 -37.54056,37.44106 -83.19981,82.64536 -45.65926,45.2043 -83.10802,82.41429 -83.21946,82.68884 -0.11145,0.27456 6.50478,7.34753 14.70272,15.71771 l 14.90534,15.21851 -15.3888,15.28883 c -21.09609,20.95904 -162.95155,161.27018 -169.79551,167.947 l -5.52526,5.39033 z m 89.8523,-204.1566 c 64.84836,-37.53366 117.81919,-68.54793 117.71294,-68.92058 -0.15927,-0.55862 -233.55022,-136.2489 -236.27084,-137.3646 -0.68441,-0.28068 -0.85761,27.45642 -0.85761,137.33982 0,99.83563 0.20749,137.62237 0.75471,137.43996 0.41509,-0.13837 53.81245,-30.96093 118.6608,-68.4946 z"
-       style="fill:#52b54b;fill-opacity:1;stroke:none" />
-  </g>
-</svg>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	y="0px" width="100%" viewBox="0 0 617 188" enable-background="new 0 0 617 188" xml:space="preserve">
+	<path fill="#52B54B" opacity="1.000000" stroke="none" d="
+M89.583336,1.000000 
+	C90.189529,1.685005 90.166168,2.574803 90.599510,3.025271 
+	C103.718315,16.662701 116.882103,30.256845 129.948212,43.764053 
+	C130.577850,43.523941 130.916519,43.491173 131.111343,43.306595 
+	C138.657471,36.157455 138.655273,36.156090 146.005478,43.505203 
+	C159.538589,57.036308 173.016449,70.623535 186.654617,84.047913 
+	C189.264145,86.616562 189.414017,88.253456 186.716782,90.895164 
+	C174.709808,102.655037 162.893280,114.609337 151.008514,126.493958 
+	C146.073502,131.428925 146.076691,131.427155 151.017944,136.523712 
+	C151.698944,137.226120 152.340485,137.966812 153.259171,138.973434 
+	C151.947098,140.380035 150.766312,141.712204 149.516266,142.975861 
+	C134.544815,158.110641 119.563087,173.235260 104.792023,188.681274 
+	C103.611107,189.000000 102.222221,189.000000 100.624634,188.681274 
+	C86.361732,174.796494 72.307518,161.230438 57.702755,147.132965 
+	C56.157101,149.136856 54.135899,151.757263 51.994804,154.533112 
+	C35.932781,138.457108 20.569420,123.048477 5.141897,107.704361 
+	C3.997114,106.565773 2.391420,105.890610 1.000000,105.000000 
+	C1.000000,103.611107 1.000000,102.222221 1.318741,100.624641 
+	C15.203506,86.361694 28.769531,72.307434 42.867004,57.702602 
+	C40.863205,56.156994 38.242813,54.135792 35.425343,51.962570 
+	C51.518696,35.908516 66.939468,20.557360 82.295547,5.141749 
+	C83.434830,3.998048 84.109390,2.391417 85.000000,0.999999 
+	C86.388893,1.000000 87.777779,1.000000 89.583336,1.000000 
+M73.196465,79.500702 
+	C73.196465,96.254150 73.196465,113.007599 73.196465,130.872055 
+	C94.273178,118.764557 114.417175,107.192863 135.221664,95.241745 
+	C114.247169,83.251732 94.091187,71.729622 73.196594,59.785294 
+	C73.196594,66.631348 73.196594,72.566254 73.196465,79.500702 
+z" />
+	<path fill="#FDFDFD" opacity="1.000000" stroke="none" d="
+M618.000000,60.571537 
+	C617.004395,62.042580 615.613281,62.912964 615.073181,64.153824 
+	C608.143372,80.073746 601.328613,96.043816 594.498169,112.006920 
+	C586.973572,129.592300 579.343018,147.133865 571.999390,164.794601 
+	C568.632385,172.892075 568.893372,173.002594 560.133972,172.999832 
+	C555.470825,172.998367 550.807617,172.994385 546.144592,172.969360 
+	C545.841980,172.967712 545.540466,172.775543 544.836609,172.534256 
+	C548.592896,163.531219 551.714905,154.222061 556.286133,145.689255 
+	C559.733765,139.253830 559.138794,134.062668 556.454224,127.695969 
+	C546.360352,103.757523 536.803345,79.592712 526.837830,55.000847 
+	C534.817078,55.000847 542.437622,54.725182 550.003540,55.244331 
+	C551.436218,55.342628 553.169678,58.412052 553.885010,60.423309 
+	C558.720520,74.018005 563.307556,87.700912 568.003784,101.345413 
+	C569.107483,104.551987 570.321045,107.720764 571.976196,112.255157 
+	C573.889587,107.365631 575.415283,103.375916 577.007935,99.413109 
+	C582.693298,85.266724 588.344238,71.105591 594.218018,57.037624 
+	C594.650513,56.001743 596.734497,55.132927 598.079773,55.089733 
+	C604.401855,54.886726 610.734131,54.999401 617.531372,54.999699 
+	C618.000000,56.714359 618.000000,58.428715 618.000000,60.571537 
+z" />
+	<path fill="#FDFDFD" opacity="1.000000" stroke="none" d="
+M430.000122,99.002235 
+	C430.000122,112.477097 430.000122,125.452438 430.000122,138.713440 
+	C423.048126,138.713440 416.308685,138.713440 408.999878,138.713440 
+	C408.999878,129.350739 409.120758,119.916939 408.962219,110.487823 
+	C408.832153,102.753624 409.088898,94.909142 407.866791,87.324188 
+	C406.440887,78.474220 401.302399,74.201607 394.304291,74.000290 
+	C387.617249,73.807938 380.317963,79.297188 378.047363,86.438652 
+	C377.420715,88.409592 377.055725,90.550858 377.044647,92.616508 
+	C376.962494,107.913475 377.000122,123.211082 377.000122,138.753479 
+	C369.630646,138.753479 362.559692,138.753479 354.999878,138.753479 
+	C354.999878,123.256836 355.044769,107.816956 354.977661,92.377571 
+	C354.951050,86.251518 352.748199,80.799278 347.911346,77.066116 
+	C339.239685,70.373154 327.811401,74.635170 324.084412,84.471092 
+	C322.793915,87.876816 322.147491,91.713402 322.090881,95.366882 
+	C321.868958,109.685005 322.000122,124.008591 322.000122,138.665009 
+	C314.823853,138.665009 307.760773,138.665009 300.346558,138.665009 
+	C300.346558,111.006645 300.346558,83.281189 300.346558,55.001301 
+	C306.163818,55.001301 312.104645,54.855133 318.024780,55.139343 
+	C319.060455,55.189068 320.450378,56.891682 320.882477,58.112110 
+	C321.380768,59.519447 320.998291,61.238617 320.998291,64.136040 
+	C328.715179,54.407440 338.407898,52.804527 348.408875,54.206123 
+	C356.403381,55.326527 361.770447,57.638248 366.682190,66.544373 
+	C372.325470,62.972542 377.601440,58.269657 383.771973,56.014080 
+	C396.273407,51.444298 408.602570,53.673611 419.067657,61.818150 
+	C426.629364,67.703125 429.037811,76.770744 429.932556,86.011482 
+	C430.332214,90.138710 430.000122,94.336792 430.000122,99.002235 
+z" />
+	<path fill="#FDFDFD" opacity="1.000000" stroke="none" d="
+M462.000427,35.006332 
+	C462.000427,44.815434 462.000427,54.126144 462.000427,64.132019 
+	C468.844696,58.319965 476.100769,54.654530 484.669739,53.656227 
+	C496.686127,52.256294 507.565582,54.979622 516.927185,62.503853 
+	C534.236755,76.416115 535.360107,106.231667 523.651062,123.341644 
+	C516.745056,133.433182 506.539673,139.485458 493.555267,140.111023 
+	C483.836304,140.579254 474.670624,139.889420 466.610413,133.799713 
+	C465.039795,132.613068 463.390686,131.530289 461.957214,130.525391 
+	C461.633789,132.375305 461.105469,135.397171 460.522095,138.733841 
+	C454.446686,138.733841 448.017822,138.733841 441.292542,138.733841 
+	C441.292542,99.722672 441.292542,60.652122 441.292542,21.290209 
+	C447.943787,21.290209 454.684204,21.290209 462.000427,21.290209 
+	C462.000427,25.636984 462.000427,30.072460 462.000427,35.006332 
+M480.890228,119.974937 
+	C485.426086,119.681152 490.365997,120.444260 494.421356,118.893707 
+	C506.182587,114.396866 510.858643,104.919495 509.036591,92.234833 
+	C507.422546,80.997993 496.539307,71.772278 483.551605,73.864754 
+	C469.724976,76.092384 464.376770,85.538391 463.152863,96.752327 
+	C462.120667,106.209480 469.961761,116.189537 480.890228,119.974937 
+z" />
+	<path fill="#FDFDFD" opacity="1.000000" stroke="none" d="
+M234.797928,54.654831 
+	C244.856339,52.605957 254.504562,52.040043 264.239868,54.923946 
+	C279.600891,59.474377 286.402191,68.163963 289.768585,81.937614 
+	C291.530579,89.146889 290.954620,96.927589 291.469940,105.005005 
+	C269.550385,105.005005 248.375092,105.005005 227.094437,105.005005 
+	C229.577957,116.288628 239.741562,120.764336 248.594757,121.034813 
+	C256.790771,121.285217 264.390472,119.882645 271.081848,114.731178 
+	C271.774902,114.197632 273.962708,114.659111 274.786041,115.402222 
+	C278.726318,118.958458 282.435333,122.770882 286.509888,126.770363 
+	C281.309174,132.968170 274.787445,135.946014 267.542938,138.175064 
+	C253.746231,142.420120 240.209259,142.317459 227.237503,135.935410 
+	C212.712891,128.789368 205.730453,116.523628 204.973831,100.473404 
+	C204.537735,91.222557 205.503754,82.283119 210.008469,74.017265 
+	C215.396210,64.131088 223.372589,57.511646 234.797928,54.654831 
+M266.971497,78.708908 
+	C259.384399,70.789909 249.920425,70.480316 240.489548,73.410858 
+	C234.405487,75.301414 229.437546,79.631561 227.800247,86.722244 
+	C242.152313,86.722244 256.002747,86.722244 270.947815,86.722244 
+	C269.410950,83.870155 268.228943,81.676651 266.971497,78.708908 
+z" />
+	<path fill="#FCFEFC" opacity="1.000000" stroke="none" d="
+M73.196533,79.000931 
+	C73.196594,72.566254 73.196594,66.631348 73.196594,59.785294 
+	C94.091187,71.729622 114.247169,83.251732 135.221664,95.241745 
+	C114.417175,107.192863 94.273178,118.764557 73.196465,130.872055 
+	C73.196465,113.007599 73.196465,96.254150 73.196533,79.000931 
+z" />
+</svg>

src/components/Blacklist/index.tsx

@@ -0,0 +1,417 @@
+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
+            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
+              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
+                          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"
@@ -335,20 +340,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/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/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/Discover/DiscoverNetwork/index.tsx

@@ -48,11 +48,11 @@ const DiscoverTvNetwork = () => {
       <div className="mt-1 mb-5">
         <Header>
           {firstResultData?.network.logoPath ? (
-            <div className="mb-6 flex justify-center">
+            <div className="relative mb-6 flex h-24 justify-center sm:h-32">
               <Image
-                src={`//image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)${firstResultData.network.logoPath}`}
+                src={`https://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)${firstResultData.network.logoPath}`}
                 alt={firstResultData.network.name}
-                className="max-h-24 sm:max-h-32"
+                className="object-contain"
                 fill
               />
             </div>

src/components/Discover/DiscoverStudio/index.tsx

@@ -48,11 +48,11 @@ const DiscoverMovieStudio = () => {
       <div className="mt-1 mb-5">
         <Header>
           {firstResultData?.studio.logoPath ? (
-            <div className="mb-6 flex justify-center">
+            <div className="relative mb-6 flex h-24 justify-center sm:h-32">
               <Image
-                src={`//image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)${firstResultData.studio.logoPath}`}
+                src={`https://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)${firstResultData.studio.logoPath}`}
                 alt={firstResultData.studio.name}
-                className="max-h-24 sm:max-h-32"
+                className="object-contain"
                 fill
               />
             </div>

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/ExternalLinkBlock/index.tsx

@@ -11,7 +11,6 @@ import useLocale from '@app/hooks/useLocale';
 import useSettings from '@app/hooks/useSettings';
 import { MediaType } from '@server/constants/media';
 import { MediaServerType } from '@server/constants/server';
-import getConfig from 'next/config';
 
 interface ExternalLinkBlockProps {
   mediaType: 'movie' | 'tv';
@@ -31,7 +30,6 @@ const ExternalLinkBlock = ({
   mediaUrl,
 }: ExternalLinkBlockProps) => {
   const settings = useSettings();
-  const { publicRuntimeConfig } = getConfig();
   const { locale } = useLocale();
 
   return (
@@ -45,7 +43,8 @@ const ExternalLinkBlock = ({
         >
           {settings.currentSettings.mediaServerType === MediaServerType.PLEX ? (
             <PlexLogo />
-          ) : publicRuntimeConfig.JELLYFIN_TYPE == 'emby' ? (
+          ) : settings.currentSettings.mediaServerType ===
+            MediaServerType.EMBY ? (
             <EmbyLogo />
           ) : (
             <JellyfinLogo />

src/components/IssueDetails/IssueComment/index.tsx

@@ -181,6 +181,9 @@ const IssueComment = ({
                     `/api/v1/issueComment/${comment.id}`,
                     {
                       method: 'PUT',
+                      headers: {
+                        'Content-Type': 'application/json',
+                      },
                       body: JSON.stringify({ message: values.newMessage }),
                     }
                   );

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 getConfig from 'next/config';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
@@ -108,7 +107,6 @@ const IssueDetails = () => {
     (opt) => opt.issueType === issueData?.issueType
   );
   const settings = useSettings();
-  const { publicRuntimeConfig } = getConfig();
 
   if (!data && !error) {
     return <LoadingSpinner />;
@@ -126,6 +124,9 @@ const IssueDetails = () => {
     try {
       const res = await fetch(`/api/v1/issueComment/${firstComment.id}`, {
         method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+        },
         body: JSON.stringify({ message: newMessage }),
       });
       if (!res.ok) throw new Error();
@@ -387,7 +388,8 @@ const IssueDetails = () => {
                 >
                   <PlayIcon />
                   <span>
-                    {publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
+                    {settings.currentSettings.mediaServerType ===
+                    MediaServerType.EMBY
                       ? intl.formatMessage(messages.playonplex, {
                           mediaServerName: 'Emby',
                         })
@@ -434,7 +436,8 @@ const IssueDetails = () => {
                 >
                   <PlayIcon />
                   <span>
-                    {publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
+                    {settings.currentSettings.mediaServerType ===
+                    MediaServerType.EMBY
                       ? intl.formatMessage(messages.play4konplex, {
                           mediaServerName: 'Emby',
                         })
@@ -501,6 +504,9 @@ const IssueDetails = () => {
                     `/api/v1/issue/${issueData?.id}/comment`,
                     {
                       method: 'POST',
+                      headers: {
+                        'Content-Type': 'application/json',
+                      },
                       body: JSON.stringify({ message: values.message }),
                     }
                   );
@@ -656,7 +662,8 @@ const IssueDetails = () => {
               >
                 <PlayIcon />
                 <span>
-                  {publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
+                  {settings.currentSettings.mediaServerType ===
+                  MediaServerType.EMBY
                     ? intl.formatMessage(messages.playonplex, {
                         mediaServerName: 'Emby',
                       })
@@ -702,7 +709,8 @@ const IssueDetails = () => {
               >
                 <PlayIcon />
                 <span>
-                  {publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
+                  {settings.currentSettings.mediaServerType ===
+                  MediaServerType.EMBY
                     ? intl.formatMessage(messages.play4konplex, {
                         mediaServerName: 'Emby',
                       })

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

@@ -90,9 +90,11 @@ const UserDropdown = () => {
                   <span className="truncate text-xl font-semibold text-gray-200">
                     {user?.displayName}
                   </span>
-                  <span className="truncate text-sm text-gray-400">
-                    {user?.email}
-                  </span>
+                  {user?.displayName?.toLowerCase() !== user?.email && (
+                    <span className="truncate text-sm text-gray-400">
+                      {user?.email}
+                    </span>
+                  )}
                 </div>
               </div>
               {user && <MiniQuotaDisplay userId={user?.id} />}

src/components/Login/AddEmailModal.tsx

@@ -59,6 +59,9 @@ const AddEmailModal: React.FC<AddEmailModalProps> = ({
           try {
             const res = await fetch('/api/v1/auth/jellyfin', {
               method: 'POST',
+              headers: {
+                'Content-Type': 'application/json',
+              },
               body: JSON.stringify({
                 username: username,
                 password: password,

src/components/Login/JellyfinLogin.tsx

@@ -4,9 +4,9 @@ import useSettings from '@app/hooks/useSettings';
 import defineMessages from '@app/utils/defineMessages';
 import { InformationCircleIcon } from '@heroicons/react/24/solid';
 import { ApiErrorCode } from '@server/constants/error';
+import { MediaServerType, ServerType } from '@server/constants/server';
 import { Field, Form, Formik } from 'formik';
-import getConfig from 'next/config';
-import { useIntl } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import * as Yup from 'yup';
 
@@ -26,6 +26,7 @@ const messages = defineMessages('components.Login', {
   validationemailformat: 'Valid email required',
   validationusernamerequired: 'Username required',
   validationpasswordrequired: 'Password required',
+  validationservertyperequired: 'Please select a server type',
   validationHostnameRequired: 'You must provide a valid hostname or IP address',
   validationPortRequired: 'You must provide a valid port number',
   validationUrlTrailingSlash: 'URL must not end in a trailing slash',
@@ -40,42 +41,51 @@ const messages = defineMessages('components.Login', {
   initialsigningin: 'Connecting…',
   initialsignin: 'Connect',
   forgotpassword: 'Forgot Password?',
+  servertype: 'Server Type',
+  back: 'Go back',
 });
 
 interface JellyfinLoginProps {
   revalidate: () => void;
   initial?: boolean;
+  serverType?: MediaServerType;
+  onCancel?: () => void;
 }
 
 const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
   revalidate,
   initial,
+  serverType,
+  onCancel,
 }) => {
   const toasts = useToasts();
   const intl = useIntl();
   const settings = useSettings();
-  const { publicRuntimeConfig } = getConfig();
+
+  const mediaServerFormatValues = {
+    mediaServerName:
+      serverType === MediaServerType.JELLYFIN
+        ? ServerType.JELLYFIN
+        : serverType === MediaServerType.EMBY
+        ? ServerType.EMBY
+        : 'Media Server',
+  };
 
   if (initial) {
     const LoginSchema = Yup.object().shape({
       hostname: Yup.string().required(
-        intl.formatMessage(messages.validationhostrequired, {
-          mediaServerName:
-            publicRuntimeConfig.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
-        })
+        intl.formatMessage(
+          messages.validationhostrequired,
+          mediaServerFormatValues
+        )
       ),
       port: Yup.number().required(
         intl.formatMessage(messages.validationPortRequired)
       ),
-      urlBase: Yup.string()
-        .matches(
-          /^(\/[^/].*[^/]$)/,
-          intl.formatMessage(messages.validationUrlBaseLeadingSlash)
-        )
-        .matches(
-          /^(.*[^/])$/,
-          intl.formatMessage(messages.validationUrlBaseTrailingSlash)
-        ),
+      urlBase: Yup.string().matches(
+        /^(.*[^/])$/,
+        intl.formatMessage(messages.validationUrlBaseTrailingSlash)
+      ),
       email: Yup.string()
         .email(intl.formatMessage(messages.validationemailformat))
         .required(intl.formatMessage(messages.validationemailrequired)),
@@ -85,11 +95,6 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
       password: Yup.string(),
     });
 
-    const mediaServerFormatValues = {
-      mediaServerName:
-        publicRuntimeConfig.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
-    };
-
     return (
       <Formik
         initialValues={{
@@ -104,6 +109,11 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
         validationSchema={LoginSchema}
         onSubmit={async (values) => {
           try {
+            // Check if serverType is either 'Jellyfin' or 'Emby'
+            // if (serverType !== 'Jellyfin' && serverType !== 'Emby') {
+            //   throw new Error('Invalid serverType'); // You can customize the error message
+            // }
+
             const res = await fetch('/api/v1/auth/jellyfin', {
               method: 'POST',
               headers: {
@@ -117,12 +127,20 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
                 useSsl: values.useSsl,
                 urlBase: values.urlBase,
                 email: values.email,
+                serverType: serverType,
               }),
             });
-            if (!res.ok) throw new Error();
+            if (!res.ok) throw new Error(res.statusText, { cause: res });
           } catch (e) {
+            let errorData;
+            try {
+              errorData = await e.cause?.text();
+              errorData = JSON.parse(errorData);
+            } catch {
+              /* empty */
+            }
             let errorMessage = null;
-            switch (e.response?.data?.message) {
+            switch (errorData?.message) {
               case ApiErrorCode.InvalidUrl:
                 errorMessage = messages.invalidurlerror;
                 break;
@@ -305,7 +323,7 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
               </div>
             </div>
             <div className="mt-8 border-t border-gray-700 pt-5">
-              <div className="flex justify-end">
+              <div className="flex flex-row-reverse justify-between">
                 <span className="inline-flex rounded-md shadow-sm">
                   <Button
                     buttonType="primary"
@@ -317,6 +335,13 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
                       : intl.formatMessage(messages.signin)}
                   </Button>
                 </span>
+                {onCancel && (
+                  <span className="inline-flex rounded-md shadow-sm">
+                    <Button buttonType="default" onClick={() => onCancel()}>
+                      <FormattedMessage {...messages.back} />
+                    </Button>
+                  </span>
+                )}
               </div>
             </div>
           </Form>
@@ -422,7 +447,8 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
                             jellyfinForgotPasswordUrl
                               ? `${jellyfinForgotPasswordUrl}`
                               : `${baseUrl}/web/index.html#!/${
-                                  process.env.JELLYFIN_TYPE === 'emby'
+                                  settings.currentSettings.mediaServerType ===
+                                  MediaServerType.EMBY
                                     ? 'startup/'
                                     : ''
                                 }forgotpassword.html`

src/components/Login/index.tsx

@@ -10,7 +10,6 @@ import defineMessages from '@app/utils/defineMessages';
 import { Transition } from '@headlessui/react';
 import { XCircleIcon } from '@heroicons/react/24/solid';
 import { MediaServerType } from '@server/constants/server';
-import getConfig from 'next/config';
 import { useRouter } from 'next/dist/client/router';
 import Image from 'next/image';
 import { useEffect, useState } from 'react';
@@ -34,7 +33,6 @@ const Login = () => {
   const { user, revalidate } = useUser();
   const router = useRouter();
   const settings = useSettings();
-  const { publicRuntimeConfig } = getConfig();
 
   // Effect that is triggered when the `authToken` comes back from the Plex OAuth
   // We take the token and attempt to sign in. If we get a success message, we will
@@ -45,16 +43,26 @@ const Login = () => {
       try {
         const res = await fetch('/api/v1/auth/plex', {
           method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
           body: JSON.stringify({ authToken }),
         });
-        if (!res.ok) throw new Error();
+        if (!res.ok) throw new Error(res.statusText, { cause: res });
         const data = await res.json();
 
         if (data?.id) {
           revalidate();
         }
       } catch (e) {
-        setError(e.response.data.message);
+        let errorData;
+        try {
+          errorData = await e.cause?.text();
+          errorData = JSON.parse(errorData);
+        } catch {
+          /* empty */
+        }
+        setError(errorData?.message);
         setAuthToken(undefined);
         setProcessing(false);
       }
@@ -78,6 +86,15 @@ const Login = () => {
     revalidateOnFocus: false,
   });
 
+  const mediaServerFormatValues = {
+    mediaServerName:
+      settings.currentSettings.mediaServerType === MediaServerType.JELLYFIN
+        ? 'Jellyfin'
+        : settings.currentSettings.mediaServerType === MediaServerType.EMBY
+        ? 'Emby'
+        : undefined,
+  };
+
   return (
     <div className="relative flex min-h-screen flex-col bg-gray-900 py-14">
       <PageTitle title={intl.formatMessage(messages.signin)} />
@@ -144,12 +161,10 @@ const Login = () => {
                     {settings.currentSettings.mediaServerType ==
                     MediaServerType.PLEX
                       ? intl.formatMessage(messages.signinwithplex)
-                      : intl.formatMessage(messages.signinwithjellyfin, {
-                          mediaServerName:
-                            publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
-                              ? 'Emby'
-                              : 'Jellyfin',
-                        })}
+                      : intl.formatMessage(
+                          messages.signinwithjellyfin,
+                          mediaServerFormatValues
+                        )}
                   </button>
                   <AccordionContent isOpen={openIndexes.includes(0)}>
                     <div className="px-10 py-8">

src/components/ManageSlideOver/index.tsx

@@ -1,3 +1,4 @@
+import BlacklistBlock from '@app/components/BlacklistBlock';
 import Button from '@app/components/Common/Button';
 import ConfirmButton from '@app/components/Common/ConfirmButton';
 import SlideOver from '@app/components/Common/SlideOver';
@@ -26,7 +27,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 getConfig from 'next/config';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useIntl } from 'react-intl';
@@ -95,7 +95,6 @@ const ManageSlideOver = ({
   const { user: currentUser, hasPermission } = useUser();
   const intl = useIntl();
   const settings = useSettings();
-  const { publicRuntimeConfig } = getConfig();
   const { data: watchData } = useSWR<MediaWatchDataResponse>(
     settings.currentSettings.mediaServerType === MediaServerType.PLEX &&
       data.mediaInfo &&
@@ -286,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 ||
@@ -605,32 +618,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"
                   >
@@ -638,41 +636,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:
-                      publicRuntimeConfig.JELLYFIN_TYPE == '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/ShowMoreCard/index.tsx

@@ -57,44 +57,48 @@ const ShowMoreCard = ({ url, posters }: ShowMoreCardProps) => {
       >
         <div style={{ paddingBottom: '150%' }}>
           <div className="absolute inset-0 flex h-full w-full flex-col items-center p-2">
-            <div className="relative z-10 flex h-full flex-wrap items-center justify-center opacity-30">
+            <div className="relative z-10 grid h-full w-full grid-cols-2 items-center justify-center gap-2 opacity-30">
               {posters[0] && (
-                <div className="w-1/2 p-1">
+                <div className="">
                   <Image
-                    src={`//image.tmdb.org/t/p/w300_and_h450_face${posters[0]}`}
+                    src={`https://image.tmdb.org/t/p/w300_and_h450_face${posters[0]}`}
                     alt=""
-                    className="w-full rounded-md"
-                    fill
+                    className="rounded-md"
+                    width={300}
+                    height={450}
                   />
                 </div>
               )}
               {posters[1] && (
-                <div className="w-1/2 p-1">
+                <div className="">
                   <Image
-                    src={`//image.tmdb.org/t/p/w300_and_h450_face${posters[1]}`}
+                    src={`https://image.tmdb.org/t/p/w300_and_h450_face${posters[1]}`}
                     alt=""
-                    className="w-full rounded-md"
-                    fill
+                    className="rounded-md"
+                    width={300}
+                    height={450}
                   />
                 </div>
               )}
               {posters[2] && (
-                <div className="w-1/2 p-1">
+                <div className="">
                   <Image
-                    src={`//image.tmdb.org/t/p/w300_and_h450_face${posters[2]}`}
+                    src={`https://image.tmdb.org/t/p/w300_and_h450_face${posters[2]}`}
                     alt=""
-                    className="w-full rounded-md"
-                    fill
+                    className="rounded-md"
+                    width={300}
+                    height={450}
                   />
                 </div>
               )}
               {posters[3] && (
-                <div className="w-1/2 p-1">
+                <div className="">
                   <Image
-                    src={`//image.tmdb.org/t/p/w300_and_h450_face${posters[3]}`}
+                    src={`https://image.tmdb.org/t/p/w300_and_h450_face${posters[3]}`}
                     alt=""
-                    className="w-full rounded-md"
-                    fill
+                    className="rounded-md"
+                    width={300}
+                    height={450}
                   />
                 </div>
               )}

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

@@ -3,7 +3,9 @@ import RTAudRotten from '@app/assets/rt_aud_rotten.svg';
 import RTFresh from '@app/assets/rt_fresh.svg';
 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';
@@ -25,7 +27,7 @@ import useLocale from '@app/hooks/useLocale';
 import useSettings from '@app/hooks/useSettings';
 import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
-import Error from '@app/pages/_error';
+import ErrorPage from '@app/pages/_error';
 import { sortCrewPriority } from '@app/utils/creditHelpers';
 import defineMessages from '@app/utils/defineMessages';
 import { refreshIntervalHelper } from '@app/utils/refreshIntervalHelper';
@@ -34,6 +36,7 @@ import {
   CloudIcon,
   CogIcon,
   ExclamationTriangleIcon,
+  EyeSlashIcon,
   FilmIcon,
   PlayIcon,
   TicketIcon,
@@ -41,20 +44,22 @@ import {
 import {
   ChevronDoubleDownIcon,
   ChevronDoubleUpIcon,
+  MinusCircleIcon,
+  StarIcon,
 } from '@heroicons/react/24/solid';
 import { type RatingResponse } from '@server/api/ratings';
 import { IssueStatus } from '@server/constants/issue';
-import { MediaStatus } from '@server/constants/media';
+import { MediaStatus, MediaType } from '@server/constants/media';
 import { MediaServerType } from '@server/constants/server';
 import type { MovieDetails as MovieDetailsType } from '@server/models/Movie';
 import { countries } from 'country-flag-icons';
 import 'country-flag-icons/3x2/flags.css';
 import { uniqBy } from 'lodash';
-import getConfig from 'next/config';
 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';
 
 const messages = defineMessages('components.MovieDetails', {
@@ -94,6 +99,12 @@ const messages = defineMessages('components.MovieDetails', {
   rtaudiencescore: 'Rotten Tomatoes Audience Score',
   tmdbuserscore: 'TMDB User Score',
   imdbuserscore: 'IMDB User Score',
+  watchlistSuccess: '<strong>{title}</strong> added to watchlist successfully!',
+  watchlistDeleted:
+    '<strong>{title}</strong> Removed from watchlist successfully!',
+  watchlistError: 'Something went wrong try again.',
+  removefromwatchlist: 'Remove From Watchlist',
+  addtowatchlist: 'Add To Watchlist',
 });
 
 interface MovieDetailsProps {
@@ -112,7 +123,14 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
   const minStudios = 3;
   const [showMoreStudios, setShowMoreStudios] = useState(false);
   const [showIssueModal, setShowIssueModal] = useState(false);
-  const { publicRuntimeConfig } = getConfig();
+  const [isUpdating, setIsUpdating] = useState<boolean>(false);
+  const [toggleWatchlist, setToggleWatchlist] = useState<boolean>(
+    !movie?.onUserWatchlist
+  );
+  const [isBlacklistUpdating, setIsBlacklistUpdating] =
+    useState<boolean>(false);
+  const [showBlacklistModal, setShowBlacklistModal] = useState(false);
+  const { addToast } = useToasts();
 
   const {
     data,
@@ -142,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,
@@ -154,7 +177,7 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
   }
 
   if (!data) {
-    return <Error statusCode={404} />;
+    return <ErrorPage statusCode={404} />;
   }
 
   const showAllStudios = data.productionCompanies.length <= minStudios + 1;
@@ -264,7 +287,7 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
       ?.flatrate ?? [];
 
   function getAvalaibleMediaServerName() {
-    if (publicRuntimeConfig.JELLYFIN_TYPE === 'emby') {
+    if (settings.currentSettings.mediaServerType === MediaServerType.EMBY) {
       return intl.formatMessage(messages.play, { mediaServerName: 'Emby' });
     }
 
@@ -276,8 +299,8 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
   }
 
   function getAvalaible4kMediaServerName() {
-    if (publicRuntimeConfig.JELLYFIN_TYPE === 'emby') {
-      return intl.formatMessage(messages.play4k, { mediaServerName: 'Emby' });
+    if (settings.currentSettings.mediaServerType === MediaServerType.EMBY) {
+      return intl.formatMessage(messages.play, { mediaServerName: 'Emby' });
     }
 
     if (settings.currentSettings.mediaServerType === MediaServerType.PLEX) {
@@ -287,6 +310,134 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
     return intl.formatMessage(messages.play4k, { mediaServerName: 'Jellyfin' });
   }
 
+  const onClickWatchlistBtn = async (): Promise<void> => {
+    setIsUpdating(true);
+
+    const res = await fetch('/api/v1/watchlist', {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        tmdbId: movie?.id,
+        mediaType: MediaType.MOVIE,
+        title: movie?.title,
+      }),
+    });
+
+    if (!res.ok) {
+      addToast(intl.formatMessage(messages.watchlistError), {
+        appearance: 'error',
+        autoDismiss: true,
+      });
+
+      setIsUpdating(false);
+      return;
+    }
+
+    const data = await res.json();
+
+    if (data) {
+      addToast(
+        <span>
+          {intl.formatMessage(messages.watchlistSuccess, {
+            title: movie?.title,
+            strong: (msg: React.ReactNode) => <strong>{msg}</strong>,
+          })}
+        </span>,
+        { appearance: 'success', autoDismiss: true }
+      );
+    }
+
+    setIsUpdating(false);
+    setToggleWatchlist((prevState) => !prevState);
+  };
+
+  const onClickDeleteWatchlistBtn = async (): Promise<void> => {
+    setIsUpdating(true);
+    try {
+      const res = await fetch(`/api/v1/watchlist/${movie?.id}`, {
+        method: 'DELETE',
+      });
+      if (!res.ok) throw new Error();
+
+      if (res.status === 204) {
+        addToast(
+          <span>
+            {intl.formatMessage(messages.watchlistDeleted, {
+              title: movie?.title,
+              strong: (msg: React.ReactNode) => <strong>{msg}</strong>,
+            })}
+          </span>,
+          { appearance: 'info', autoDismiss: true }
+        );
+      }
+    } catch (e) {
+      addToast(intl.formatMessage(messages.watchlistError), {
+        appearance: 'error',
+        autoDismiss: true,
+      });
+    } finally {
+      setIsUpdating(false);
+      setToggleWatchlist((prevState) => !prevState);
+    }
+  };
+
+  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"
@@ -332,6 +483,14 @@ 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
@@ -408,6 +567,61 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
           </span>
         </div>
         <div className="media-actions">
+          {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={() => setShowBlacklistModal(true)}
+                >
+                  <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"

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

@@ -19,6 +19,7 @@ import {
 } from '@heroicons/react/24/solid';
 import { MediaRequestStatus } from '@server/constants/media';
 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';
@@ -58,7 +59,7 @@ const RequestCardPlaceholder = () => {
 };
 
 interface RequestCardErrorProps {
-  requestData?: MediaRequest;
+  requestData?: NonFunctionProperties<MediaRequest>;
 }
 
 const RequestCardError = ({ requestData }: RequestCardErrorProps) => {
@@ -213,7 +214,7 @@ const RequestCardError = ({ requestData }: RequestCardErrorProps) => {
 };
 
 interface RequestCardProps {
-  request: MediaRequest;
+  request: NonFunctionProperties<MediaRequest>;
   onTitleData?: (requestId: number, title: MovieDetails | TvDetails) => void;
 }
 
@@ -238,16 +239,19 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
     data: requestData,
     error: requestError,
     mutate: revalidate,
-  } = useSWR<MediaRequest>(`/api/v1/request/${request.id}`, {
-    fallbackData: request,
-    refreshInterval: refreshIntervalHelper(
-      {
-        downloadStatus: request.media.downloadStatus,
-        downloadStatus4k: request.media.downloadStatus4k,
-      },
-      15000
-    ),
-  });
+  } = useSWR<NonFunctionProperties<MediaRequest>>(
+    `/api/v1/request/${request.id}`,
+    {
+      fallbackData: request,
+      refreshInterval: refreshIntervalHelper(
+        {
+          downloadStatus: request.media.downloadStatus,
+          downloadStatus4k: request.media.downloadStatus4k,
+        },
+        15000
+      ),
+    }
+  );
 
   const { mediaUrl: plexUrl, mediaUrl4k: plexUrl4k } = useDeepLinks({
     mediaUrl: requestData?.media?.mediaUrl,

src/components/RequestList/RequestItem/index.tsx

@@ -18,6 +18,7 @@ import {
 } from '@heroicons/react/24/solid';
 import { MediaRequestStatus } from '@server/constants/media';
 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';
@@ -42,6 +43,7 @@ const messages = defineMessages('components.RequestList.RequestItem', {
   tmdbid: 'TMDB ID',
   tvdbid: 'TheTVDB ID',
   unknowntitle: 'Unknown Title',
+  profileName: 'Profile',
 });
 
 const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => {
@@ -49,7 +51,7 @@ const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => {
 };
 
 interface RequestItemErrorProps {
-  requestData?: MediaRequest;
+  requestData?: NonFunctionProperties<MediaRequest>;
   revalidateList: () => void;
 }
 
@@ -285,7 +287,7 @@ const RequestItemError = ({
 };
 
 interface RequestItemProps {
-  request: MediaRequest;
+  request: NonFunctionProperties<MediaRequest> & { profileName?: string };
   revalidateList: () => void;
 }
 
@@ -304,19 +306,18 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
   const { data: title, error } = useSWR<MovieDetails | TvDetails>(
     inView ? url : null
   );
-  const { data: requestData, mutate: revalidate } = useSWR<MediaRequest>(
-    `/api/v1/request/${request.id}`,
-    {
-      fallbackData: request,
-      refreshInterval: refreshIntervalHelper(
-        {
-          downloadStatus: request.media.downloadStatus,
-          downloadStatus4k: request.media.downloadStatus4k,
-        },
-        15000
-      ),
-    }
-  );
+  const { data: requestData, mutate: revalidate } = useSWR<
+    NonFunctionProperties<MediaRequest>
+  >(`/api/v1/request/${request.id}`, {
+    fallbackData: request,
+    refreshInterval: refreshIntervalHelper(
+      {
+        downloadStatus: request.media.downloadStatus,
+        downloadStatus4k: request.media.downloadStatus4k,
+      },
+      15000
+    ),
+  });
 
   const [isRetrying, setRetrying] = useState(false);
 
@@ -401,7 +402,7 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
           setShowEditModal(false);
         }}
       />
-      <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">
+      <div className="relative flex w-full flex-col justify-between overflow-hidden rounded-xl bg-gray-800 py-2 text-gray-400 shadow-md ring-1 ring-gray-700 xl:h-28 xl:flex-row">
         {title.backdropPath && (
           <div className="absolute inset-0 z-0 w-full bg-cover bg-center xl:w-2/3">
             <CachedImage
@@ -482,7 +483,7 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
               )}
             </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="z-10 mt-4 ml-4 flex w-full flex-col justify-center gap-1 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">
                 {intl.formatMessage(globalMessages.status)}
@@ -632,6 +633,16 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
                 </span>
               </div>
             )}
+            {request.profileName && (
+              <div className="card-field">
+                <span className="card-field-name">
+                  {intl.formatMessage(messages.profileName)}
+                </span>
+                <span className="flex truncate text-sm text-gray-300">
+                  {request.profileName}
+                </span>
+              </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">

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,156 @@ 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
+                                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/RequestModal/MovieRequestModal.tsx

@@ -8,6 +8,7 @@ import globalMessages from '@app/i18n/globalMessages';
 import defineMessages from '@app/utils/defineMessages';
 import { MediaStatus } from '@server/constants/media';
 import type { MediaRequest } from '@server/entity/MediaRequest';
+import type { NonFunctionProperties } from '@server/interfaces/api/common';
 import type { QuotaResponse } from '@server/interfaces/api/userInterfaces';
 import { Permission } from '@server/lib/permissions';
 import type { MovieDetails } from '@server/models/Movie';
@@ -38,7 +39,7 @@ const messages = defineMessages('components.RequestModal', {
 interface RequestModalProps extends React.HTMLAttributes<HTMLDivElement> {
   tmdbId: number;
   is4k?: boolean;
-  editRequest?: MediaRequest;
+  editRequest?: NonFunctionProperties<MediaRequest>;
   onCancel?: () => void;
   onComplete?: (newStatus: MediaStatus) => void;
   onUpdating?: (isUpdating: boolean) => void;

src/components/RequestModal/TvRequestModal.tsx

@@ -13,6 +13,7 @@ import { ANIME_KEYWORD_ID } from '@server/api/themoviedb/constants';
 import { MediaRequestStatus, MediaStatus } from '@server/constants/media';
 import type { MediaRequest } from '@server/entity/MediaRequest';
 import type SeasonRequest from '@server/entity/SeasonRequest';
+import type { NonFunctionProperties } from '@server/interfaces/api/common';
 import type { QuotaResponse } from '@server/interfaces/api/userInterfaces';
 import { Permission } from '@server/lib/permissions';
 import type { TvDetails } from '@server/models/Tv';
@@ -57,7 +58,7 @@ interface RequestModalProps extends React.HTMLAttributes<HTMLDivElement> {
   onComplete?: (newStatus: MediaStatus) => void;
   onUpdating?: (isUpdating: boolean) => void;
   is4k?: boolean;
-  editRequest?: MediaRequest;
+  editRequest?: NonFunctionProperties<MediaRequest>;
 }
 
 const TvRequestModal = ({

src/components/RequestModal/index.tsx

@@ -4,13 +4,14 @@ import TvRequestModal from '@app/components/RequestModal/TvRequestModal';
 import { Transition } from '@headlessui/react';
 import type { MediaStatus } from '@server/constants/media';
 import type { MediaRequest } from '@server/entity/MediaRequest';
+import type { NonFunctionProperties } from '@server/interfaces/api/common';
 
 interface RequestModalProps {
   show: boolean;
   type: 'movie' | 'tv' | 'collection';
   tmdbId: number;
   is4k?: boolean;
-  editRequest?: MediaRequest;
+  editRequest?: NonFunctionProperties<MediaRequest>;
   onComplete?: (newStatus: MediaStatus) => void;
   onCancel?: () => void;
   onUpdating?: (isUpdating: boolean) => void;

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,

src/components/Settings/SettingsJellyfin.tsx

@@ -1,14 +1,16 @@
 import Badge from '@app/components/Common/Badge';
 import Button from '@app/components/Common/Button';
 import LoadingSpinner from '@app/components/Common/LoadingSpinner';
+import SensitiveInput from '@app/components/Common/SensitiveInput';
 import LibraryItem from '@app/components/Settings/LibraryItem';
+import useSettings from '@app/hooks/useSettings';
 import globalMessages from '@app/i18n/globalMessages';
 import defineMessages from '@app/utils/defineMessages';
 import { ArrowDownOnSquareIcon } from '@heroicons/react/24/outline';
 import { ApiErrorCode } from '@server/constants/error';
+import { MediaServerType } from '@server/constants/server';
 import type { JellyfinSettings } from '@server/lib/settings';
 import { Field, Formik } from 'formik';
-import getConfig from 'next/config';
 import { useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
@@ -30,13 +32,14 @@ const messages = defineMessages('components.Settings', {
   jellyfinSettingsSuccess: '{mediaServerName} settings saved successfully!',
   jellyfinSettings: '{mediaServerName} Settings',
   jellyfinSettingsDescription:
-    'Optionally configure the internal and external endpoints for your {mediaServerName} server. In most cases, the external URL is different to the internal URL. A custom password reset URL can also be set for {mediaServerName} login, in case you would like to redirect to a different password reset page.',
+    'Optionally configure the internal and external endpoints for your {mediaServerName} server. In most cases, the external URL is different to the internal URL. A custom password reset URL can also be set for {mediaServerName} login, in case you would like to redirect to a different password reset page. You can also change the Jellyfin API key, which was automatically generated previously.',
   externalUrl: 'External URL',
   hostname: 'Hostname or IP Address',
   port: 'Port',
   enablessl: 'Use SSL',
   urlBase: 'URL Base',
   jellyfinForgotPasswordUrl: 'Forgot Password URL',
+  apiKey: 'API key',
   jellyfinSyncFailedNoLibrariesFound: 'No libraries were found',
   jellyfinSyncFailedAutomaticGroupedFolders:
     'Custom authentication with Automatic Library Grouping not supported',
@@ -59,6 +62,9 @@ const messages = defineMessages('components.Settings', {
   validationUrlTrailingSlash: 'URL must not end in a trailing slash',
   validationUrlBaseLeadingSlash: 'URL base must have a leading slash',
   validationUrlBaseTrailingSlash: 'URL base must not end in a trailing slash',
+  tip: 'Tip',
+  scanbackground:
+    'Scanning will run in the background. You can continue the setup process in the meantime.',
 });
 
 interface Library {
@@ -76,13 +82,13 @@ interface SyncStatus {
 }
 
 interface SettingsJellyfinProps {
-  showAdvancedSettings?: boolean;
+  isSetupSettings?: boolean;
   onComplete?: () => void;
 }
 
 const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
   onComplete,
-  showAdvancedSettings,
+  isSetupSettings,
 }) => {
   const [isSyncing, setIsSyncing] = useState(false);
   const toasts = useToasts();
@@ -100,7 +106,7 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
   );
   const intl = useIntl();
   const { addToast } = useToasts();
-  const { publicRuntimeConfig } = getConfig();
+  const settings = useSettings();
 
   const JellyfinSettingsSchema = Yup.object().shape({
     hostname: Yup.string()
@@ -173,11 +179,18 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
       const res = await fetch(
         `/api/v1/settings/jellyfin/library?${searchParams.toString()}`
       );
-      if (!res.ok) throw new Error();
+      if (!res.ok) throw new Error(res.statusText, { cause: res });
       setIsSyncing(false);
       revalidate();
     } catch (e) {
-      if (e.response.data.message === 'SYNC_ERROR_GROUPED_FOLDERS') {
+      let errorData;
+      try {
+        errorData = await e.cause?.text();
+        errorData = JSON.parse(errorData);
+      } catch {
+        /* empty */
+      }
+      if (errorData?.message === 'SYNC_ERROR_GROUPED_FOLDERS') {
         toasts.addToast(
           intl.formatMessage(
             messages.jellyfinSyncFailedAutomaticGroupedFolders
@@ -187,7 +200,7 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
             appearance: 'warning',
           }
         );
-      } else if (e.response.data.message === 'SYNC_ERROR_NO_LIBRARIES') {
+      } else if (errorData?.message === 'SYNC_ERROR_NO_LIBRARIES') {
         toasts.addToast(
           intl.formatMessage(messages.jellyfinSyncFailedNoLibrariesFound),
           {
@@ -252,7 +265,7 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
 
       const searchParams = new URLSearchParams(params.enable ? params : {});
       const res = await fetch(
-        `/api/v1/settings/jellyfin/library?${searchParams.toString}`
+        `/api/v1/settings/jellyfin/library?${searchParams.toString()}`
       );
       if (!res.ok) throw new Error();
     } else {
@@ -275,26 +288,29 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
     return <LoadingSpinner />;
   }
 
+  const mediaServerFormatValues = {
+    mediaServerName:
+      settings.currentSettings.mediaServerType === MediaServerType.JELLYFIN
+        ? 'Jellyfin'
+        : settings.currentSettings.mediaServerType === MediaServerType.EMBY
+        ? 'Emby'
+        : undefined,
+  };
+
   return (
     <>
       <div className="mb-6">
         <h3 className="heading">
-          {publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
-            ? intl.formatMessage(messages.jellyfinlibraries, {
-                mediaServerName: 'Emby',
-              })
-            : intl.formatMessage(messages.jellyfinlibraries, {
-                mediaServerName: 'Jellyfin',
-              })}
+          {intl.formatMessage(
+            messages.jellyfinlibraries,
+            mediaServerFormatValues
+          )}
         </h3>
         <p className="description">
-          {publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
-            ? intl.formatMessage(messages.jellyfinlibrariesDescription, {
-                mediaServerName: 'Emby',
-              })
-            : intl.formatMessage(messages.jellyfinlibrariesDescription, {
-                mediaServerName: 'Jellyfin',
-              })}
+          {intl.formatMessage(
+            messages.jellyfinlibrariesDescription,
+            mediaServerFormatValues
+          )}
         </p>
       </div>
       <div className="section">
@@ -331,13 +347,10 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
           <FormattedMessage {...messages.manualscanJellyfin} />
         </h3>
         <p className="description">
-          {publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
-            ? intl.formatMessage(messages.manualscanDescriptionJellyfin, {
-                mediaServerName: 'Emby',
-              })
-            : intl.formatMessage(messages.manualscanDescriptionJellyfin, {
-                mediaServerName: 'Jellyfin',
-              })}
+          {intl.formatMessage(
+            messages.manualscanDescriptionJellyfin,
+            mediaServerFormatValues
+          )}
         </p>
       </div>
       <div className="section">
@@ -437,112 +450,117 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
           </div>
         </div>
       </div>
-      {showAdvancedSettings && (
-        <>
-          <div className="mt-10 mb-6">
-            <h3 className="heading">
-              {publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
-                ? intl.formatMessage(messages.jellyfinSettings, {
-                    mediaServerName: 'Emby',
-                  })
-                : intl.formatMessage(messages.jellyfinSettings, {
-                    mediaServerName: 'Jellyfin',
-                  })}
-            </h3>
-            <p className="description">
-              {publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
-                ? intl.formatMessage(messages.jellyfinSettingsDescription, {
-                    mediaServerName: 'Emby',
-                  })
-                : intl.formatMessage(messages.jellyfinSettingsDescription, {
-                    mediaServerName: 'Jellyfin',
-                  })}
-            </p>
-          </div>
-          <Formik
-            initialValues={{
-              hostname: data?.ip,
-              port: data?.port ?? 8096,
-              useSsl: data?.useSsl,
-              urlBase: data?.urlBase || '',
-              jellyfinExternalUrl: data?.externalHostname || '',
-              jellyfinForgotPasswordUrl: data?.jellyfinForgotPasswordUrl || '',
-            }}
-            validationSchema={JellyfinSettingsSchema}
-            onSubmit={async (values) => {
-              try {
-                const res = await fetch('/api/v1/settings/jellyfin', {
-                  method: 'POST',
-                  headers: {
-                    'Content-Type': 'application/json',
-                  },
-                  body: JSON.stringify({
-                    ip: values.hostname,
-                    port: Number(values.port),
-                    useSsl: values.useSsl,
-                    urlBase: values.urlBase,
-                    externalHostname: values.jellyfinExternalUrl,
-                    jellyfinForgotPasswordUrl: values.jellyfinForgotPasswordUrl,
-                  } as JellyfinSettings),
-                });
-                if (!res.ok) throw new Error();
+      {isSetupSettings && (
+        <div className="text-sm text-gray-500">
+          <span className="mr-2">
+            <Badge>{intl.formatMessage(messages.tip)}</Badge>
+          </span>
+          {intl.formatMessage(messages.scanbackground)}
+        </div>
+      )}
+      <div className="mt-10 mb-6">
+        <h3 className="heading">
+          {intl.formatMessage(
+            messages.jellyfinSettings,
+            mediaServerFormatValues
+          )}
+        </h3>
+        <p className="description">
+          {intl.formatMessage(
+            messages.jellyfinSettingsDescription,
+            mediaServerFormatValues
+          )}
+        </p>
+      </div>
+      <Formik
+        initialValues={{
+          hostname: data?.ip,
+          port: data?.port ?? 8096,
+          useSsl: data?.useSsl,
+          urlBase: data?.urlBase || '',
+          jellyfinExternalUrl: data?.externalHostname || '',
+          jellyfinForgotPasswordUrl: data?.jellyfinForgotPasswordUrl || '',
+          apiKey: data?.apiKey,
+        }}
+        validationSchema={JellyfinSettingsSchema}
+        onSubmit={async (values) => {
+          try {
+            const res = await fetch('/api/v1/settings/jellyfin', {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json',
+              },
+              body: JSON.stringify({
+                ip: values.hostname,
+                port: Number(values.port),
+                useSsl: values.useSsl,
+                urlBase: values.urlBase,
+                externalHostname: values.jellyfinExternalUrl,
+                jellyfinForgotPasswordUrl: values.jellyfinForgotPasswordUrl,
+                apiKey: values.apiKey,
+              } as JellyfinSettings),
+            });
+            if (!res.ok) throw new Error(res.statusText, { cause: res });
 
-                addToast(
-                  intl.formatMessage(messages.jellyfinSettingsSuccess, {
-                    mediaServerName:
-                      publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
-                        ? 'Emby'
-                        : 'Jellyfin',
-                  }),
-                  {
-                    autoDismiss: true,
-                    appearance: 'success',
-                  }
-                );
-              } catch (e) {
-                if (e.response?.data?.message === ApiErrorCode.InvalidUrl) {
-                  addToast(
-                    intl.formatMessage(messages.invalidurlerror, {
-                      mediaServerName:
-                        publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
-                          ? 'Emby'
-                          : 'Jellyfin',
-                    }),
-                    {
-                      autoDismiss: true,
-                      appearance: 'error',
-                    }
-                  );
-                } else {
-                  addToast(
-                    intl.formatMessage(messages.jellyfinSettingsFailure, {
-                      mediaServerName:
-                        publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
-                          ? 'Emby'
-                          : 'Jellyfin',
-                    }),
-                    {
-                      autoDismiss: true,
-                      appearance: 'error',
-                    }
-                  );
-                }
-              } finally {
-                revalidate();
+            addToast(
+              intl.formatMessage(
+                messages.jellyfinSettingsSuccess,
+                mediaServerFormatValues
+              ),
+              {
+                autoDismiss: true,
+                appearance: 'success',
               }
-            }}
-          >
-            {({
-              errors,
-              touched,
-              values,
-              setFieldValue,
-              handleSubmit,
-              isSubmitting,
-              isValid,
-            }) => {
-              return (
-                <form className="section" onSubmit={handleSubmit}>
+            );
+          } catch (e) {
+            let errorData;
+            try {
+              errorData = await e.cause?.text();
+              errorData = JSON.parse(errorData);
+            } catch {
+              /* empty */
+            }
+            if (errorData?.message === ApiErrorCode.InvalidUrl) {
+              addToast(
+                intl.formatMessage(
+                  messages.invalidurlerror,
+                  mediaServerFormatValues
+                ),
+                {
+                  autoDismiss: true,
+                  appearance: 'error',
+                }
+              );
+            } else {
+              addToast(
+                intl.formatMessage(
+                  messages.jellyfinSettingsFailure,
+                  mediaServerFormatValues
+                ),
+                {
+                  autoDismiss: true,
+                  appearance: 'error',
+                }
+              );
+            }
+          } finally {
+            revalidate();
+          }
+        }}
+      >
+        {({
+          errors,
+          touched,
+          values,
+          setFieldValue,
+          handleSubmit,
+          isSubmitting,
+          isValid,
+        }) => {
+          return (
+            <form className="section" onSubmit={handleSubmit}>
+              {!isSetupSettings && (
+                <>
                   <div className="form-row">
                     <label htmlFor="hostname" className="text-label">
                       {intl.formatMessage(messages.hostname)}
@@ -604,6 +622,29 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
                       />
                     </div>
                   </div>
+                </>
+              )}
+              <div className="form-row">
+                <label htmlFor="apiKey" className="text-label">
+                  {intl.formatMessage(messages.apiKey)}
+                </label>
+                <div className="form-input-area">
+                  <div className="form-input-field">
+                    <SensitiveInput
+                      as="field"
+                      type="text"
+                      inputMode="url"
+                      id="apiKey"
+                      name="apiKey"
+                    />
+                  </div>
+                  {errors.apiKey && touched.apiKey && (
+                    <div className="error">{errors.apiKey}</div>
+                  )}
+                </div>
+              </div>
+              {!isSetupSettings && (
+                <>
                   <div className="form-row">
                     <label htmlFor="urlBase" className="text-label">
                       {intl.formatMessage(messages.urlBase)}
@@ -624,75 +665,75 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
                         )}
                     </div>
                   </div>
-                  <div className="form-row">
-                    <label htmlFor="jellyfinExternalUrl" className="text-label">
-                      {intl.formatMessage(messages.externalUrl)}
-                    </label>
-                    <div className="form-input-area">
-                      <div className="form-input-field">
-                        <Field
-                          type="text"
-                          inputMode="url"
-                          id="jellyfinExternalUrl"
-                          name="jellyfinExternalUrl"
-                        />
-                      </div>
-                      {errors.jellyfinExternalUrl &&
-                        touched.jellyfinExternalUrl && (
-                          <div className="error">
-                            {errors.jellyfinExternalUrl}
-                          </div>
-                        )}
-                    </div>
+                </>
+              )}
+              <div className="form-row">
+                <label htmlFor="jellyfinExternalUrl" className="text-label">
+                  {intl.formatMessage(messages.externalUrl)}
+                </label>
+                <div className="form-input-area">
+                  <div className="form-input-field">
+                    <Field
+                      type="text"
+                      inputMode="url"
+                      id="jellyfinExternalUrl"
+                      name="jellyfinExternalUrl"
+                    />
                   </div>
-                  <div className="form-row">
-                    <label
-                      htmlFor="jellyfinForgotPasswordUrl"
-                      className="text-label"
+                  {errors.jellyfinExternalUrl &&
+                    touched.jellyfinExternalUrl && (
+                      <div className="error">{errors.jellyfinExternalUrl}</div>
+                    )}
+                </div>
+              </div>
+              <div className="form-row">
+                <label
+                  htmlFor="jellyfinForgotPasswordUrl"
+                  className="text-label"
+                >
+                  {intl.formatMessage(messages.jellyfinForgotPasswordUrl)}
+                </label>
+                <div className="form-input-area">
+                  <div className="form-input-field">
+                    <Field
+                      type="text"
+                      inputMode="url"
+                      id="jellyfinForgotPasswordUrl"
+                      name="jellyfinForgotPasswordUrl"
+                    />
+                  </div>
+                  {errors.jellyfinForgotPasswordUrl &&
+                    touched.jellyfinForgotPasswordUrl && (
+                      <div className="error">
+                        {errors.jellyfinForgotPasswordUrl}
+                      </div>
+                    )}
+                </div>
+              </div>
+              <div
+                className={`actions ${isSetupSettings ? 'mt-0 border-0' : ''}`}
+              >
+                <div className="flex justify-end">
+                  <span className="ml-3 inline-flex rounded-md shadow-sm">
+                    <Button
+                      buttonType="primary"
+                      type="submit"
+                      disabled={isSubmitting || !isValid}
                     >
-                      {intl.formatMessage(messages.jellyfinForgotPasswordUrl)}
-                    </label>
-                    <div className="form-input-area">
-                      <div className="form-input-field">
-                        <Field
-                          type="text"
-                          inputMode="url"
-                          id="jellyfinForgotPasswordUrl"
-                          name="jellyfinForgotPasswordUrl"
-                        />
-                      </div>
-                      {errors.jellyfinForgotPasswordUrl &&
-                        touched.jellyfinForgotPasswordUrl && (
-                          <div className="error">
-                            {errors.jellyfinForgotPasswordUrl}
-                          </div>
-                        )}
-                    </div>
-                  </div>
-                  <div className="actions">
-                    <div className="flex justify-end">
-                      <span className="ml-3 inline-flex rounded-md shadow-sm">
-                        <Button
-                          buttonType="primary"
-                          type="submit"
-                          disabled={isSubmitting || !isValid}
-                        >
-                          <ArrowDownOnSquareIcon />
-                          <span>
-                            {isSubmitting
-                              ? intl.formatMessage(globalMessages.saving)
-                              : intl.formatMessage(globalMessages.save)}
-                          </span>
-                        </Button>
+                      <ArrowDownOnSquareIcon />
+                      <span>
+                        {isSubmitting
+                          ? intl.formatMessage(globalMessages.saving)
+                          : intl.formatMessage(globalMessages.save)}
                       </span>
-                    </div>
-                  </div>
-                </form>
-              );
-            }}
-          </Formik>
-        </>
-      )}
+                    </Button>
+                  </span>
+                </div>
+              </div>
+            </form>
+          );
+        }}
+      </Formik>
     </>
   );
 };

src/components/Settings/SettingsJobsCache/index.tsx

@@ -7,6 +7,7 @@ import PageTitle from '@app/components/Common/PageTitle';
 import Table from '@app/components/Common/Table';
 import useLocale from '@app/hooks/useLocale';
 import useSettings from '@app/hooks/useSettings';
+
 import globalMessages from '@app/i18n/globalMessages';
 import defineMessages from '@app/utils/defineMessages';
 import { formatBytes } from '@app/utils/numberHelpers';
@@ -57,8 +58,8 @@ const messages: { [messageName: string]: MessageDescriptor } = defineMessages(
     'plex-recently-added-scan': 'Plex Recently Added Scan',
     'plex-full-scan': 'Plex Full Library Scan',
     'plex-watchlist-sync': 'Plex Watchlist Sync',
-    'jellyfin-recently-added-scan': 'Jellyfin Recently Added Scan',
     'jellyfin-full-scan': 'Jellyfin Full Library Scan',
+    'jellyfin-recently-added-scan': 'Jellyfin Recently Added Scan',
     'availability-sync': 'Media Availability Sync',
     'radarr-scan': 'Radarr Scan',
     'sonarr-scan': 'Sonarr Scan',
@@ -167,6 +168,20 @@ const SettingsJobs = () => {
   const [isSaving, setIsSaving] = useState(false);
   const settings = useSettings();
 
+  if (settings.currentSettings.mediaServerType === MediaServerType.EMBY) {
+    messages['jellyfin-recently-added-scan'] = {
+      id: 'jellyfin-recently-added-scan',
+      defaultMessage: 'Emby Recently Added Scan',
+    };
+  }
+
+  if (settings.currentSettings.mediaServerType === MediaServerType.EMBY) {
+    messages['jellyfin-full-scan'] = {
+      id: 'jellyfin-full-scan',
+      defaultMessage: 'Emby Full Library Scan',
+    };
+  }
+
   if (!data && !error) {
     return <LoadingSpinner />;
   }

src/components/Settings/SettingsLayout.tsx

@@ -5,7 +5,6 @@ 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 getConfig from 'next/config';
 import { useIntl } from 'react-intl';
 
 const messages = defineMessages('components.Settings', {
@@ -26,7 +25,6 @@ type SettingsLayoutProps = {
 
 const SettingsLayout = ({ children }: SettingsLayoutProps) => {
   const intl = useIntl();
-  const { publicRuntimeConfig } = getConfig();
   const settings = useSettings();
   const settingsRoutes: SettingsRoute[] = [
     {
@@ -89,7 +87,11 @@ const SettingsLayout = ({ children }: SettingsLayoutProps) => {
   function getAvailableMediaServerName() {
     return intl.formatMessage(messages.menuJellyfinSettings, {
       mediaServerName:
-        publicRuntimeConfig.JELLYFIN_TYPE === 'emby' ? 'Emby' : 'Jellyfin',
+        settings.currentSettings.mediaServerType === MediaServerType.JELLYFIN
+          ? 'Jellyfin'
+          : settings.currentSettings.mediaServerType === MediaServerType.EMBY
+          ? 'Emby'
+          : undefined,
     });
   }
 };

src/components/Settings/SettingsUsers/index.tsx

@@ -10,7 +10,6 @@ import { ArrowDownOnSquareIcon } from '@heroicons/react/24/outline';
 import { MediaServerType } from '@server/constants/server';
 import type { MainSettings } from '@server/lib/settings';
 import { Field, Form, Formik } from 'formik';
-import getConfig from 'next/config';
 import { useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR, { mutate } from 'swr';
@@ -42,12 +41,20 @@ const SettingsUsers = () => {
     mutate: revalidate,
   } = useSWR<MainSettings>('/api/v1/settings/main');
   const settings = useSettings();
-  const { publicRuntimeConfig } = getConfig();
 
   if (!data && !error) {
     return <LoadingSpinner />;
   }
 
+  const mediaServerFormatValues = {
+    mediaServerName:
+      settings.currentSettings.mediaServerType === MediaServerType.JELLYFIN
+        ? 'Jellyfin'
+        : settings.currentSettings.mediaServerType === MediaServerType.EMBY
+        ? 'Emby'
+        : undefined,
+  };
+
   return (
     <>
       <PageTitle
@@ -121,16 +128,10 @@ const SettingsUsers = () => {
                   <label htmlFor="localLogin" className="checkbox-label">
                     {intl.formatMessage(messages.localLogin)}
                     <span className="label-tip">
-                      {intl.formatMessage(messages.localLoginTip, {
-                        mediaServerName:
-                          settings.currentSettings.mediaServerType ===
-                          MediaServerType.PLEX
-                            ? 'Plex'
-                            : settings.currentSettings.mediaServerType ===
-                              MediaServerType.JELLYFIN
-                            ? 'Jellyfin'
-                            : 'Emby',
-                      })}
+                      {intl.formatMessage(
+                        messages.localLoginTip,
+                        mediaServerFormatValues
+                      )}
                     </span>
                   </label>
                   <div className="form-input-area">
@@ -146,25 +147,15 @@ const SettingsUsers = () => {
                 </div>
                 <div className="form-row">
                   <label htmlFor="newPlexLogin" className="checkbox-label">
-                    {intl.formatMessage(messages.newPlexLogin, {
-                      mediaServerName:
-                        publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
-                          ? 'Emby'
-                          : settings.currentSettings.mediaServerType ===
-                            MediaServerType.PLEX
-                          ? 'Plex'
-                          : 'Jellyfin',
-                    })}
+                    {intl.formatMessage(
+                      messages.newPlexLogin,
+                      mediaServerFormatValues
+                    )}
                     <span className="label-tip">
-                      {intl.formatMessage(messages.newPlexLoginTip, {
-                        mediaServerName:
-                          publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
-                            ? 'Emby'
-                            : settings.currentSettings.mediaServerType ===
-                              MediaServerType.PLEX
-                            ? 'Plex'
-                            : 'Jellyfin',
-                      })}
+                      {intl.formatMessage(
+                        messages.newPlexLoginTip,
+                        mediaServerFormatValues
+                      )}
                     </span>
                   </label>
                   <div className="form-input-area">

src/components/Setup/SetupLogin.tsx

@@ -1,32 +1,39 @@
-import Accordion from '@app/components/Common/Accordion';
+import Button from '@app/components/Common/Button';
 import JellyfinLogin from '@app/components/Login/JellyfinLogin';
 import PlexLoginButton from '@app/components/PlexLoginButton';
 import { useUser } from '@app/hooks/useUser';
 import defineMessages from '@app/utils/defineMessages';
 import { MediaServerType } from '@server/constants/server';
-import getConfig from 'next/config';
 import { useEffect, useState } from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 
 const messages = defineMessages('components.Setup', {
   welcome: 'Welcome to Jellyseerr',
   signinMessage: 'Get started by signing in',
-  signinWithJellyfin: 'Use your {mediaServerName} account',
-  signinWithPlex: 'Use your Plex account',
+  signin: 'Sign in to your account',
+  signinWithJellyfin: 'Enter your Jellyfin details',
+  signinWithEmby: 'Enter your Emby details',
+  signinWithPlex: 'Enter your Plex details',
+  back: 'Go back',
 });
 
 interface LoginWithMediaServerProps {
-  onComplete: (onComplete: MediaServerType) => void;
+  serverType: MediaServerType;
+  onCancel: () => void;
+  onComplete: () => void;
 }
 
-const SetupLogin: React.FC<LoginWithMediaServerProps> = ({ onComplete }) => {
+const SetupLogin: React.FC<LoginWithMediaServerProps> = ({
+  serverType,
+  onCancel,
+  onComplete,
+}) => {
   const [authToken, setAuthToken] = useState<string | undefined>(undefined);
   const [mediaServerType, setMediaServerType] = useState<MediaServerType>(
     MediaServerType.NOT_CONFIGURED
   );
   const { user, revalidate } = useUser();
-  const intl = useIntl();
-  const { publicRuntimeConfig } = getConfig();
+
   // Effect that is triggered when the `authToken` comes back from the Plex OAuth
   // We take the token and attempt to login. If we get a success message, we will
   // ask swr to revalidate the user which _shouid_ come back with a valid user.
@@ -56,71 +63,60 @@ const SetupLogin: React.FC<LoginWithMediaServerProps> = ({ onComplete }) => {
 
   useEffect(() => {
     if (user) {
-      onComplete(mediaServerType);
+      onComplete();
     }
   }, [user, mediaServerType, onComplete]);
 
   return (
-    <div>
+    <div className="p-4">
       <div className="mb-2 flex justify-center text-xl font-bold">
-        <FormattedMessage {...messages.welcome} />
+        <FormattedMessage {...messages.signin} />
       </div>
       <div className="mb-2 flex justify-center pb-6 text-sm">
-        <FormattedMessage {...messages.signinMessage} />
-      </div>
-      <Accordion single atLeastOne>
-        {({ openIndexes, handleClick, AccordionContent }) => (
-          <>
-            <button
-              className={`w-full cursor-default bg-gray-900 py-2 text-center text-sm text-gray-400 transition-colors duration-200 hover:cursor-pointer hover:bg-gray-700 focus:outline-none sm:rounded-t-lg ${
-                openIndexes.includes(0) && 'text-indigo-500'
-              } ${openIndexes.includes(1) && 'border-b border-gray-500'}`}
-              onClick={() => handleClick(0)}
-            >
-              <FormattedMessage {...messages.signinWithPlex} />
-            </button>
-            <AccordionContent isOpen={openIndexes.includes(0)}>
-              <div
-                className="px-10 py-8"
-                style={{ backgroundColor: 'rgba(0,0,0,0.3)' }}
-              >
-                <PlexLoginButton
-                  onAuthToken={(authToken) => {
-                    setMediaServerType(MediaServerType.PLEX);
-                    setAuthToken(authToken);
-                  }}
-                />
-              </div>
-            </AccordionContent>
-            <div>
-              <button
-                className={`w-full cursor-default bg-gray-900 py-2 text-center text-sm text-gray-400 transition-colors duration-200 hover:cursor-pointer hover:bg-gray-700 focus:outline-none ${
-                  openIndexes.includes(1)
-                    ? 'text-indigo-500'
-                    : 'sm:rounded-b-lg'
-                }`}
-                onClick={() => handleClick(1)}
-              >
-                {publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
-                  ? intl.formatMessage(messages.signinWithJellyfin, {
-                      mediaServerName: 'Emby',
-                    })
-                  : intl.formatMessage(messages.signinWithJellyfin, {
-                      mediaServerName: 'Jellyfin',
-                    })}
-              </button>
-              <AccordionContent isOpen={openIndexes.includes(1)}>
-                <div
-                  className="rounded-b-lg px-10 py-8"
-                  style={{ backgroundColor: 'rgba(0,0,0,0.3)' }}
-                >
-                  <JellyfinLogin initial={true} revalidate={revalidate} />
-                </div>
-              </AccordionContent>
-            </div>
-          </>
+        {serverType === MediaServerType.JELLYFIN ? (
+          <FormattedMessage {...messages.signinWithJellyfin} />
+        ) : serverType === MediaServerType.EMBY ? (
+          <FormattedMessage {...messages.signinWithEmby} />
+        ) : (
+          <FormattedMessage {...messages.signinWithPlex} />
         )}
-      </Accordion>
+      </div>
+      {serverType === MediaServerType.PLEX && (
+        <>
+          <div
+            className="px-10 py-8"
+            style={{ backgroundColor: 'rgba(0,0,0,0.3)' }}
+          >
+            <PlexLoginButton
+              onAuthToken={(authToken) => {
+                setMediaServerType(MediaServerType.PLEX);
+                setAuthToken(authToken);
+              }}
+            />
+          </div>
+          <div className="mt-4">
+            <Button buttonType="default" onClick={() => onCancel()}>
+              <FormattedMessage {...messages.back} />
+            </Button>
+          </div>
+        </>
+      )}
+      {serverType === MediaServerType.JELLYFIN && (
+        <JellyfinLogin
+          initial={true}
+          revalidate={revalidate}
+          serverType={serverType}
+          onCancel={onCancel}
+        />
+      )}
+      {serverType === MediaServerType.EMBY && (
+        <JellyfinLogin
+          initial={true}
+          revalidate={revalidate}
+          serverType={serverType}
+          onCancel={onCancel}
+        />
+      )}
     </div>
   );
 };

src/components/Setup/index.tsx

@@ -1,5 +1,7 @@
+import EmbyLogo from '@app/assets/services/emby.svg';
+import JellyfinLogo from '@app/assets/services/jellyfin.svg';
+import PlexLogo from '@app/assets/services/plex.svg';
 import AppDataWarning from '@app/components/AppDataWarning';
-import Badge from '@app/components/Common/Badge';
 import Button from '@app/components/Common/Button';
 import ImageFader from '@app/components/Common/ImageFader';
 import PageTitle from '@app/components/Common/PageTitle';
@@ -9,26 +11,30 @@ import SettingsPlex from '@app/components/Settings/SettingsPlex';
 import SettingsServices from '@app/components/Settings/SettingsServices';
 import SetupSteps from '@app/components/Setup/SetupSteps';
 import useLocale from '@app/hooks/useLocale';
+import useSettings from '@app/hooks/useSettings';
 import defineMessages from '@app/utils/defineMessages';
 import { MediaServerType } from '@server/constants/server';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
 import useSWR, { mutate } from 'swr';
 import SetupLogin from './SetupLogin';
 
 const messages = defineMessages('components.Setup', {
+  welcome: 'Welcome to Jellyseerr',
+  subtitle: 'Get started by choosing your media server',
+  configjellyfin: 'Configure Jellyfin',
+  configplex: 'Configure Plex',
+  configemby: 'Configure Emby',
   setup: 'Setup',
   finish: 'Finish Setup',
   finishing: 'Finishing…',
   continue: 'Continue',
+  servertype: 'Choose Server Type',
   signin: 'Sign In',
   configuremediaserver: 'Configure Media Server',
   configureservices: 'Configure Services',
-  tip: 'Tip',
-  scanbackground:
-    'Scanning will run in the background. You can continue the setup process in the meantime.',
 });
 
 const Setup = () => {
@@ -42,6 +48,7 @@ const Setup = () => {
   );
   const router = useRouter();
   const { locale } = useLocale();
+  const settings = useSettings();
 
   const finishSetup = async () => {
     setIsUpdating(true);
@@ -76,6 +83,25 @@ const Setup = () => {
     revalidateOnFocus: false,
   });
 
+  useEffect(() => {
+    if (settings.currentSettings.initialized) {
+      router.push('/');
+    }
+    if (
+      settings.currentSettings.mediaServerType !==
+      MediaServerType.NOT_CONFIGURED
+    ) {
+      setCurrentStep(3);
+      setMediaServerType(settings.currentSettings.mediaServerType);
+    }
+  }, [
+    settings.currentSettings.mediaServerType,
+    settings.currentSettings.initialized,
+    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)} />
@@ -101,58 +127,120 @@ const Setup = () => {
           >
             <SetupSteps
               stepNumber={1}
-              description={intl.formatMessage(messages.signin)}
+              description={intl.formatMessage(messages.servertype)}
               active={currentStep === 1}
               completed={currentStep > 1}
             />
             <SetupSteps
               stepNumber={2}
-              description={intl.formatMessage(messages.configuremediaserver)}
+              description={intl.formatMessage(messages.signin)}
               active={currentStep === 2}
               completed={currentStep > 2}
             />
             <SetupSteps
               stepNumber={3}
-              description={intl.formatMessage(messages.configureservices)}
+              description={intl.formatMessage(messages.configuremediaserver)}
               active={currentStep === 3}
+              completed={currentStep > 3}
+            />
+            <SetupSteps
+              stepNumber={4}
+              description={intl.formatMessage(messages.configureservices)}
+              active={currentStep === 4}
               isLastStep
             />
           </ul>
         </nav>
         <div className="mt-10 w-full rounded-md border border-gray-600 bg-gray-800 bg-opacity-50 p-4 text-white">
           {currentStep === 1 && (
-            <SetupLogin
-              onComplete={(mServerType) => {
-                setMediaServerType(mServerType);
-                setCurrentStep(2);
-              }}
-            />
+            <div className="flex flex-col items-center pb-6">
+              <div className="mb-2 flex justify-center text-xl font-bold">
+                {intl.formatMessage(messages.welcome)}
+              </div>
+              <div className="mb-2 flex justify-center pb-6 text-sm">
+                {intl.formatMessage(messages.subtitle)}
+              </div>
+              <div className="grid grid-cols-3">
+                <div className="flex flex-col divide-y divide-gray-600 rounded-l border border-gray-600 py-2">
+                  <div className="mb-2 flex flex-1 items-center justify-center py-2 px-2">
+                    <JellyfinLogo className="h-10" />
+                  </div>
+                  <div className="px-2 pt-2">
+                    <button
+                      onClick={() => {
+                        setMediaServerType(MediaServerType.JELLYFIN);
+                        setCurrentStep(2);
+                      }}
+                      className="button-md relative z-10 inline-flex h-full w-full items-center justify-center rounded-md border border-gray-600 bg-transparent px-4 py-2 text-sm font-medium leading-5 text-white transition duration-150 ease-in-out hover:z-20 hover:border-gray-200 focus:z-20 focus:border-gray-100 focus:outline-none active:border-gray-100"
+                    >
+                      {intl.formatMessage(messages.configjellyfin)}
+                    </button>
+                  </div>
+                </div>
+                <div className="flex flex-col divide-y divide-gray-600 border-y border-gray-600 py-2">
+                  <div className="mb-2 flex flex-1 items-center justify-center py-2 px-2">
+                    <PlexLogo className="h-8" />
+                  </div>
+                  <div className="px-2 pt-2">
+                    <button
+                      onClick={() => {
+                        setMediaServerType(MediaServerType.PLEX);
+                        setCurrentStep(2);
+                      }}
+                      className="button-md relative z-10 inline-flex h-full w-full items-center justify-center rounded-md border border-gray-600 bg-transparent px-4 py-2 text-sm font-medium leading-5 text-white transition duration-150 ease-in-out hover:z-20 hover:border-gray-200 focus:z-20 focus:border-gray-100 focus:outline-none active:border-gray-100"
+                    >
+                      {intl.formatMessage(messages.configplex)}
+                    </button>
+                  </div>
+                </div>
+                <div className="flex flex-col divide-y divide-gray-600 rounded-r border border-gray-600 py-2">
+                  <div className="mb-2 flex flex-1 items-center justify-center py-2 px-2">
+                    <EmbyLogo className="h-9" />
+                  </div>
+                  <div className="px-2 pt-2">
+                    <button
+                      onClick={() => {
+                        setMediaServerType(MediaServerType.EMBY);
+                        setCurrentStep(2);
+                      }}
+                      className="button-md relative z-10 inline-flex h-full w-full items-center justify-center rounded-md border border-gray-600 bg-transparent px-4 py-2 text-sm font-medium leading-5 text-white transition duration-150 ease-in-out hover:z-20 hover:border-gray-200 focus:z-20 focus:border-gray-100 focus:outline-none active:border-gray-100"
+                    >
+                      {intl.formatMessage(messages.configemby)}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
           )}
           {currentStep === 2 && (
-            <div>
+            <SetupLogin
+              serverType={mediaServerType}
+              onCancel={() => {
+                setMediaServerType(MediaServerType.NOT_CONFIGURED);
+                setCurrentStep(1);
+              }}
+              onComplete={() => setCurrentStep(3)}
+            />
+          )}
+          {currentStep === 3 && (
+            <div className="p-2">
               {mediaServerType === MediaServerType.PLEX ? (
                 <SettingsPlex
                   onComplete={() => setMediaServerSettingsComplete(true)}
                 />
               ) : (
                 <SettingsJellyfin
-                  showAdvancedSettings={false}
+                  isSetupSettings
                   onComplete={() => setMediaServerSettingsComplete(true)}
                 />
               )}
-              <div className="mt-4 text-sm text-gray-500">
-                <span className="mr-2">
-                  <Badge>{intl.formatMessage(messages.tip)}</Badge>
-                </span>
-                {intl.formatMessage(messages.scanbackground)}
-              </div>
               <div className="actions">
                 <div className="flex justify-end">
                   <span className="ml-3 inline-flex rounded-md shadow-sm">
                     <Button
                       buttonType="primary"
                       disabled={!mediaServerSettingsComplete}
-                      onClick={() => setCurrentStep(3)}
+                      onClick={() => setCurrentStep(4)}
                     >
                       {intl.formatMessage(messages.continue)}
                     </Button>
@@ -161,7 +249,7 @@ const Setup = () => {
               </div>
             </div>
           )}
-          {currentStep === 3 && (
+          {currentStep === 4 && (
             <div>
               <SettingsServices />
               <div className="actions">

src/components/StatusBadge/index.tsx

@@ -9,7 +9,6 @@ import defineMessages from '@app/utils/defineMessages';
 import { MediaStatus } from '@server/constants/media';
 import { MediaServerType } from '@server/constants/server';
 import type { DownloadingItem } from '@server/lib/downloadtracker';
-import getConfig from 'next/config';
 import { useIntl } from 'react-intl';
 
 const messages = defineMessages('components.StatusBadge', {
@@ -18,6 +17,7 @@ const messages = defineMessages('components.StatusBadge', {
   playonplex: 'Play on {mediaServerName}',
   openinarr: 'Open in {arr}',
   managemedia: 'Manage {mediaType}',
+  seasonnumber: 'S{seasonNumber}',
   seasonepisodenumber: 'S{seasonNumber}E{episodeNumber}',
 });
 
@@ -47,7 +47,6 @@ const StatusBadge = ({
   const intl = useIntl();
   const { hasPermission } = useUser();
   const settings = useSettings();
-  const { publicRuntimeConfig } = getConfig();
 
   let mediaLink: string | undefined;
   let mediaLinkDescription: string | undefined;
@@ -85,7 +84,7 @@ const StatusBadge = ({
     mediaLink = plexUrl;
     mediaLinkDescription = intl.formatMessage(messages.playonplex, {
       mediaServerName:
-        publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
+        settings.currentSettings.mediaServerType === MediaServerType.EMBY
           ? 'Emby'
           : settings.currentSettings.mediaServerType === MediaServerType.PLEX
           ? 'Plex'
@@ -107,22 +106,34 @@ const StatusBadge = ({
     }
   }
 
-  const tooltipContent = (
-    <ul>
-      {downloadItem.map((status, index) => (
-        <li
-          key={`dl-status-${status.externalId}-${index}`}
-          className="border-b border-gray-700 last:border-b-0"
-        >
-          <DownloadBlock
-            downloadItem={status}
-            title={Array.isArray(title) ? title[index] : title}
-            is4k={is4k}
-          />
-        </li>
-      ))}
-    </ul>
-  );
+  const tooltipContent =
+    mediaType === 'tv' &&
+    downloadItem.length > 1 &&
+    downloadItem.every(
+      (item) =>
+        item.downloadId && item.downloadId === downloadItem[0].downloadId
+    ) ? (
+      <DownloadBlock
+        downloadItem={downloadItem[0]}
+        title={Array.isArray(title) ? title[0] : title}
+        is4k={is4k}
+      />
+    ) : (
+      <ul>
+        {downloadItem.map((status, index) => (
+          <li
+            key={`dl-status-${status.externalId}-${index}`}
+            className="border-b border-gray-700 last:border-b-0"
+          >
+            <DownloadBlock
+              downloadItem={status}
+              title={Array.isArray(title) ? title[index] : title}
+              is4k={is4k}
+            />
+          </li>
+        ))}
+      </ul>
+    );
 
   const badgeDownloadProgress = (
     <div
@@ -177,14 +188,27 @@ const StatusBadge = ({
               </span>
               {inProgress && (
                 <>
-                  {mediaType === 'tv' && downloadItem[0].episode && (
-                    <span className="ml-1">
-                      {intl.formatMessage(messages.seasonepisodenumber, {
-                        seasonNumber: downloadItem[0].episode.seasonNumber,
-                        episodeNumber: downloadItem[0].episode.episodeNumber,
-                      })}
-                    </span>
-                  )}
+                  {mediaType === 'tv' &&
+                    downloadItem[0].episode &&
+                    (downloadItem.length > 1 &&
+                    downloadItem.every(
+                      (item) =>
+                        item.downloadId &&
+                        item.downloadId === downloadItem[0].downloadId
+                    ) ? (
+                      <span className="ml-1">
+                        {intl.formatMessage(messages.seasonnumber, {
+                          seasonNumber: downloadItem[0].episode.seasonNumber,
+                        })}
+                      </span>
+                    ) : (
+                      <span className="ml-1">
+                        {intl.formatMessage(messages.seasonepisodenumber, {
+                          seasonNumber: downloadItem[0].episode.seasonNumber,
+                          episodeNumber: downloadItem[0].episode.episodeNumber,
+                        })}
+                      </span>
+                    ))}
                   <Spinner className="ml-1 h-3 w-3" />
                 </>
               )}
@@ -230,14 +254,27 @@ const StatusBadge = ({
               </span>
               {inProgress && (
                 <>
-                  {mediaType === 'tv' && downloadItem[0].episode && (
-                    <span className="ml-1">
-                      {intl.formatMessage(messages.seasonepisodenumber, {
-                        seasonNumber: downloadItem[0].episode.seasonNumber,
-                        episodeNumber: downloadItem[0].episode.episodeNumber,
-                      })}
-                    </span>
-                  )}
+                  {mediaType === 'tv' &&
+                    downloadItem[0].episode &&
+                    (downloadItem.length > 1 &&
+                    downloadItem.every(
+                      (item) =>
+                        item.downloadId &&
+                        item.downloadId === downloadItem[0].downloadId
+                    ) ? (
+                      <span className="ml-1">
+                        {intl.formatMessage(messages.seasonnumber, {
+                          seasonNumber: downloadItem[0].episode.seasonNumber,
+                        })}
+                      </span>
+                    ) : (
+                      <span className="ml-1">
+                        {intl.formatMessage(messages.seasonepisodenumber, {
+                          seasonNumber: downloadItem[0].episode.seasonNumber,
+                          episodeNumber: downloadItem[0].episode.episodeNumber,
+                        })}
+                      </span>
+                    ))}
                   <Spinner className="ml-1 h-3 w-3" />
                 </>
               )}
@@ -283,14 +320,27 @@ const StatusBadge = ({
               </span>
               {inProgress && (
                 <>
-                  {mediaType === 'tv' && downloadItem[0].episode && (
-                    <span className="ml-1">
-                      {intl.formatMessage(messages.seasonepisodenumber, {
-                        seasonNumber: downloadItem[0].episode.seasonNumber,
-                        episodeNumber: downloadItem[0].episode.episodeNumber,
-                      })}
-                    </span>
-                  )}
+                  {mediaType === 'tv' &&
+                    downloadItem[0].episode &&
+                    (downloadItem.length > 1 &&
+                    downloadItem.every(
+                      (item) =>
+                        item.downloadId &&
+                        item.downloadId === downloadItem[0].downloadId
+                    ) ? (
+                      <span className="ml-1">
+                        {intl.formatMessage(messages.seasonnumber, {
+                          seasonNumber: downloadItem[0].episode.seasonNumber,
+                        })}
+                      </span>
+                    ) : (
+                      <span className="ml-1">
+                        {intl.formatMessage(messages.seasonepisodenumber, {
+                          seasonNumber: downloadItem[0].episode.seasonNumber,
+                          episodeNumber: downloadItem[0].episode.episodeNumber,
+                        })}
+                      </span>
+                    ))}
                   <Spinner className="ml-1 h-3 w-3" />
                 </>
               )}
@@ -310,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
@@ -235,7 +358,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 +372,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 +392,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

@@ -2,7 +2,9 @@ import RTAudFresh from '@app/assets/rt_aud_fresh.svg';
 import RTAudRotten from '@app/assets/rt_aud_rotten.svg';
 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';
@@ -37,24 +39,33 @@ import {
   ArrowRightCircleIcon,
   CogIcon,
   ExclamationTriangleIcon,
+  EyeSlashIcon,
   FilmIcon,
   PlayIcon,
 } from '@heroicons/react/24/outline';
-import { ChevronDownIcon } from '@heroicons/react/24/solid';
+import {
+  ChevronDownIcon,
+  MinusCircleIcon,
+  StarIcon,
+} from '@heroicons/react/24/solid';
 import type { RTRating } from '@server/api/rating/rottentomatoes';
 import { ANIME_KEYWORD_ID } from '@server/api/themoviedb/constants';
 import { IssueStatus } from '@server/constants/issue';
-import { MediaRequestStatus, MediaStatus } from '@server/constants/media';
+import {
+  MediaRequestStatus,
+  MediaStatus,
+  MediaType,
+} from '@server/constants/media';
 import { MediaServerType } from '@server/constants/server';
 import type { Crew } from '@server/models/common';
 import type { TvDetails as TvDetailsType } from '@server/models/Tv';
 import { countries } from 'country-flag-icons';
 import 'country-flag-icons/3x2/flags.css';
-import getConfig from 'next/config';
 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';
 
 const messages = defineMessages('components.TvDetails', {
@@ -89,6 +100,12 @@ const messages = defineMessages('components.TvDetails', {
   rtcriticsscore: 'Rotten Tomatoes Tomatometer',
   rtaudiencescore: 'Rotten Tomatoes Audience Score',
   tmdbuserscore: 'TMDB User Score',
+  watchlistSuccess: '<strong>{title}</strong> added to watchlist successfully!',
+  watchlistDeleted:
+    '<strong>{title}</strong> Removed from watchlist successfully!',
+  watchlistError: 'Something went wrong try again.',
+  removefromwatchlist: 'Remove From Watchlist',
+  addtowatchlist: 'Add To Watchlist',
 });
 
 interface TvDetailsProps {
@@ -106,7 +123,14 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
     router.query.manage == '1' ? true : false
   );
   const [showIssueModal, setShowIssueModal] = useState(false);
-  const { publicRuntimeConfig } = getConfig();
+  const [isUpdating, setIsUpdating] = useState<boolean>(false);
+  const [toggleWatchlist, setToggleWatchlist] = useState<boolean>(
+    !tv?.onUserWatchlist
+  );
+  const [isBlacklistUpdating, setIsBlacklistUpdating] =
+    useState<boolean>(false);
+  const [showBlacklistModal, setShowBlacklistModal] = useState(false);
+  const { addToast } = useToasts();
 
   const {
     data,
@@ -136,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,
@@ -279,7 +308,7 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
       ?.flatrate ?? [];
 
   function getAvalaibleMediaServerName() {
-    if (publicRuntimeConfig.JELLYFIN_TYPE === 'emby') {
+    if (settings.currentSettings.mediaServerType === MediaServerType.EMBY) {
       return intl.formatMessage(messages.play, { mediaServerName: 'Emby' });
     }
 
@@ -291,17 +320,147 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
   }
 
   function getAvalaible4kMediaServerName() {
-    if (publicRuntimeConfig.JELLYFIN_TYPE === 'emby') {
-      return intl.formatMessage(messages.play4k, { mediaServerName: 'Emby' });
+    if (settings.currentSettings.mediaServerType === MediaServerType.EMBY) {
+      return intl.formatMessage(messages.play, { mediaServerName: 'Emby' });
     }
 
     if (settings.currentSettings.mediaServerType === MediaServerType.PLEX) {
       return intl.formatMessage(messages.play4k, { mediaServerName: 'Plex' });
     }
 
-    return intl.formatMessage(messages.play4k, { mediaServerName: 'Jellyfin' });
+    return intl.formatMessage(messages.play, { mediaServerName: 'Jellyfin' });
   }
 
+  const onClickWatchlistBtn = async (): Promise<void> => {
+    setIsUpdating(true);
+
+    const res = await fetch('/api/v1/watchlist', {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        tmdbId: tv?.id,
+        mediaType: MediaType.TV,
+        title: tv?.name,
+      }),
+    });
+
+    if (!res.ok) {
+      addToast(intl.formatMessage(messages.watchlistError), {
+        appearance: 'error',
+        autoDismiss: true,
+      });
+
+      setIsUpdating(false);
+      return;
+    }
+
+    const data = await res.json();
+
+    if (data) {
+      addToast(
+        <span>
+          {intl.formatMessage(messages.watchlistSuccess, {
+            title: tv?.name,
+            strong: (msg: React.ReactNode) => <strong>{msg}</strong>,
+          })}
+        </span>,
+        { appearance: 'success', autoDismiss: true }
+      );
+    }
+
+    setIsUpdating(false);
+    setToggleWatchlist((prevState) => !prevState);
+  };
+
+  const onClickDeleteWatchlistBtn = async (): Promise<void> => {
+    setIsUpdating(true);
+
+    const res = await fetch('/api/v1/watchlist/' + tv?.id, {
+      method: 'DELETE',
+    });
+
+    if (!res.ok) {
+      addToast(intl.formatMessage(messages.watchlistError), {
+        appearance: 'error',
+        autoDismiss: true,
+      });
+
+      setIsUpdating(false);
+      return;
+    }
+
+    if (res.status === 204) {
+      addToast(
+        <span>
+          {intl.formatMessage(messages.watchlistDeleted, {
+            title: tv?.name,
+            strong: (msg: React.ReactNode) => <strong>{msg}</strong>,
+          })}
+        </span>,
+        { appearance: 'info', autoDismiss: true }
+      );
+      setIsUpdating(false);
+      setToggleWatchlist((prevState) => !prevState);
+    }
+  };
+
+  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"
@@ -328,6 +487,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}
@@ -433,6 +600,61 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
           </span>
         </div>
         <div className="media-actions">
+          {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={() => setShowBlacklistModal(true)}
+                >
+                  <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

@@ -3,8 +3,8 @@ 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 getConfig from 'next/config';
 import Image from 'next/image';
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
@@ -36,7 +36,6 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
 }) => {
   const intl = useIntl();
   const settings = useSettings();
-  const { publicRuntimeConfig } = getConfig();
   const { addToast } = useToasts();
   const [isImporting, setImporting] = useState(false);
   const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
@@ -56,14 +55,6 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
     `/api/v1/user?take=${children}`
   );
 
-  data?.forEach((user, pos) => {
-    if (
-      existingUsers?.results.some((data) => data.jellyfinUserId === user.id)
-    ) {
-      data?.splice(pos, 1);
-    }
-  });
-
   const importUsers = async () => {
     setImporting(true);
 
@@ -78,7 +69,7 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
         }),
       });
       if (!res.ok) throw new Error();
-      const { data: createdUsers } = await res.json();
+      const createdUsers = await res.json();
 
       if (!createdUsers.length) {
         throw new Error('No users were imported from Jellyfin.');
@@ -89,7 +80,9 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
           userCount: createdUsers.length,
           strong: (msg: React.ReactNode) => <strong>{msg}</strong>,
           mediaServerName:
-            publicRuntimeConfig.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
+            settings.currentSettings.mediaServerType === MediaServerType.EMBY
+              ? 'Emby'
+              : 'Jellyfin',
         }),
         {
           autoDismiss: true,
@@ -104,7 +97,9 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
       addToast(
         intl.formatMessage(messages.importfromJellyfinerror, {
           mediaServerName:
-            publicRuntimeConfig.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
+            settings.currentSettings.mediaServerType === MediaServerType.EMBY
+              ? 'Emby'
+              : 'Jellyfin',
         }),
         {
           autoDismiss: true,
@@ -142,7 +137,9 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
       loading={!data && !error}
       title={intl.formatMessage(messages.importfromJellyfin, {
         mediaServerName:
-          publicRuntimeConfig.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
+          settings.currentSettings.mediaServerType === MediaServerType.EMBY
+            ? 'Emby'
+            : 'Jellyfin',
       })}
       onOk={() => {
         importUsers();
@@ -159,7 +156,8 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
             <Alert
               title={intl.formatMessage(messages.newJellyfinsigninenabled, {
                 mediaServerName:
-                  publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
+                  settings.currentSettings.mediaServerType ===
+                  MediaServerType.EMBY
                     ? 'Emby'
                     : 'Jellyfin',
                 strong: (msg: React.ReactNode) => (
@@ -209,64 +207,71 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
                       </tr>
                     </thead>
                     <tbody className="divide-y divide-gray-700 bg-gray-600">
-                      {data?.map((user) => (
-                        <tr key={`user-${user.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={isSelectedUser(user.id)}
-                              onClick={() => toggleUser(user.id)}
-                              onKeyDown={(e) => {
-                                if (e.key === 'Enter' || e.key === 'Space') {
-                                  toggleUser(user.id);
-                                }
-                              }}
-                              className="relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center pt-2 focus:outline-none"
-                            >
+                      {data
+                        ?.filter(
+                          (user) =>
+                            !existingUsers?.results.some(
+                              (u) => u.jellyfinUserId === user.id
+                            )
+                        )
+                        .map((user) => (
+                          <tr key={`user-${user.id}`}>
+                            <td className="whitespace-nowrap px-4 py-4 text-sm font-medium leading-5 text-gray-100">
                               <span
-                                aria-hidden="true"
-                                className={`${
-                                  isSelectedUser(user.id)
-                                    ? 'bg-indigo-500'
-                                    : 'bg-gray-800'
-                                } absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
-                              ></span>
-                              <span
-                                aria-hidden="true"
-                                className={`${
-                                  isSelectedUser(user.id)
-                                    ? 'translate-x-5'
-                                    : 'translate-x-0'
-                                } absolute left-0 inline-block h-5 w-5 transform 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="whitespace-nowrap px-1 py-4 text-sm font-medium leading-5 text-gray-100 md:px-6">
-                            <div className="flex items-center">
-                              <Image
-                                className="h-10 w-10 flex-shrink-0 rounded-full"
-                                src={user.thumb}
-                                alt=""
-                                width={40}
-                                height={40}
-                              />
-                              <div className="ml-4">
-                                <div className="text-base font-bold leading-5">
-                                  {user.username}
-                                </div>
-                                {/* {user.username &&
+                                role="checkbox"
+                                tabIndex={0}
+                                aria-checked={isSelectedUser(user.id)}
+                                onClick={() => toggleUser(user.id)}
+                                onKeyDown={(e) => {
+                                  if (e.key === 'Enter' || e.key === 'Space') {
+                                    toggleUser(user.id);
+                                  }
+                                }}
+                                className="relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center pt-2 focus:outline-none"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  className={`${
+                                    isSelectedUser(user.id)
+                                      ? 'bg-indigo-500'
+                                      : 'bg-gray-800'
+                                  } absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
+                                ></span>
+                                <span
+                                  aria-hidden="true"
+                                  className={`${
+                                    isSelectedUser(user.id)
+                                      ? 'translate-x-5'
+                                      : 'translate-x-0'
+                                  } absolute left-0 inline-block h-5 w-5 transform 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="whitespace-nowrap px-1 py-4 text-sm font-medium leading-5 text-gray-100 md:px-6">
+                              <div className="flex items-center">
+                                <Image
+                                  className="h-10 w-10 flex-shrink-0 rounded-full"
+                                  src={user.thumb}
+                                  alt=""
+                                  width={40}
+                                  height={40}
+                                />
+                                <div className="ml-4">
+                                  <div className="text-base font-bold leading-5">
+                                    {user.username}
+                                  </div>
+                                  {/* {user.username &&
                                   user.username.toLowerCase() !==
                                   user.email && (
                                     <div className="text-sm leading-5 text-gray-300">
                                       {user.email}
                                     </div>
                                   )} */}
+                                </div>
                               </div>
-                            </div>
-                          </td>
-                        </tr>
-                      ))}
+                            </td>
+                          </tr>
+                        ))}
                     </tbody>
                   </table>
                 </div>
@@ -278,7 +283,9 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
         <Alert
           title={intl.formatMessage(messages.noJellyfinuserstoimport, {
             mediaServerName:
-              publicRuntimeConfig.JELLYFIN_TYPE == 'emby' ? 'Emby' : 'Jellyfin',
+              settings.currentSettings.mediaServerType === MediaServerType.EMBY
+                ? 'Emby'
+                : 'Jellyfin',
           })}
           type="info"
         />