fix: fix ManageSlideOver for blacklist

Try to resolve some performance issues by removing the eager loading of Blacklist items from the
Media entity

.dockerignore

@@ -18,7 +18,7 @@ config/logs/*
 config/*.json
 dist
 Dockerfile*
-docker-compose.yml
+compose.yaml
 docs
 LICENSE
 node_modules

.gitattributes

@@ -40,7 +40,7 @@ docs export-ignore
 .all-contributorsrc export-ignore
 .editorconfig export-ignore
 Dockerfile.local export-ignore
-docker-compose.yml export-ignore
+compose.yaml export-ignore
 stylelint.config.js export-ignore
 
 public/os_logo_filled.png export-ignore

CONTRIBUTING.md

@@ -52,7 +52,7 @@ All help is welcome and greatly appreciated! If you would like to contribute to
    pnpm dev
    ```
 
-   - Alternatively, you can use [Docker](https://www.docker.com/) with `docker-compose up -d`. This method does not require installing NodeJS or Yarn on your machine directly.
+   - Alternatively, you can use [Docker](https://www.docker.com/) with `docker compose up -d`. This method does not require installing NodeJS or Yarn on your machine directly.
 
 5. Create your patch and test your changes.
 

compose.yaml

@@ -1,4 +1,3 @@
-version: '3'
 services:
   jellyseerr:
     build:

docs/extending-jellyseerr/reverse-proxy.mdx

@@ -190,7 +190,7 @@ Caddy will automatically obtain and renew SSL certificates for your domain.
 
 ## Traefik (v2)
 
-Add the following labels to the Jellyseerr service in your `docker-compose.yml` file:
+Add the following labels to the Jellyseerr service in your `compose.yaml` file:
 
 ```yaml
 labels:

docs/getting-started/docker.mdx

@@ -71,7 +71,7 @@ You could also use [diun](https://github.com/crazy-max/diun) to receive notifica
 For details on how to use Docker Compose, please [review the official Compose documentation](https://docs.docker.com/compose/reference/).
 
 #### Installation:
-Define the `jellyseerr` service in your `docker-compose.yml` as follows:
+Define the `jellyseerr` service in your `compose.yaml` as follows:
 ```yaml
 ---
 services:
@@ -94,17 +94,17 @@ If you are using emby, make sure to set the `JELLYFIN_TYPE` environment variable
 
 Then, start all services defined in the Compose file:
 ```bash
-docker-compose up -d
+docker compose up -d
 ```
 
 #### Updating:
 Pull the latest image:
 ```bash
-docker-compose pull jellyseerr
+docker compose pull jellyseerr
 ```
 Then, restart all services defined in the Compose file:
 ```bash
-docker-compose up -d
+docker compose up -d
 ```
 :::tip
 You may alternatively use a third-party mechanism like [dockge](https://github.com/louislam/dockge) to manage your docker compose files.

overseerr-api.yml

@@ -4142,6 +4142,21 @@ paths:
         '412':
           description: Item has already been blacklisted
   /blacklist/{tmdbId}:
+    get:
+      summary: Get media from blacklist
+      tags:
+        - blacklist
+      parameters:
+        - in: path
+          name: tmdbId
+          description: tmdbId ID
+          required: true
+          example: '1'
+          schema:
+            type: string
+      responses:
+        '200':
+          description: Blacklist details in JSON
     delete:
       summary: Remove media from blacklist
       tags:

server/api/externalapi.ts

@@ -32,13 +32,27 @@ class ExternalAPI {
       this.fetch = fetch;
     }
 
-    this.baseUrl = baseUrl;
-    this.params = params;
+    const url = new URL(baseUrl);
+
     this.defaultHeaders = {
       'Content-Type': 'application/json',
       Accept: 'application/json',
+      ...((url.username || url.password) && {
+        Authorization: `Basic ${Buffer.from(
+          `${url.username}:${url.password}`
+        ).toString('base64')}`,
+      }),
       ...options.headers,
     };
+
+    if (url.username || url.password) {
+      url.username = '';
+      url.password = '';
+      baseUrl = url.toString();
+    }
+
+    this.baseUrl = baseUrl;
+    this.params = params;
     this.cache = options.nodeCache;
   }
 

server/api/jellyfin.ts

@@ -410,7 +410,7 @@ class JellyfinAPI extends ExternalAPI {
       ).AccessToken;
     } catch (e) {
       logger.error(
-        `Something went wrong while creating an API key the Jellyfin server: ${e.message}`,
+        `Something went wrong while creating an API key from the Jellyfin server: ${e.message}`,
         { label: 'Jellyfin API' }
       );
 

server/entity/Blacklist.ts

@@ -80,12 +80,12 @@ export class Blacklist implements BlacklistItem {
         status: MediaStatus.BLACKLISTED,
         status4k: MediaStatus.BLACKLISTED,
         mediaType: blacklistRequest.mediaType,
-        blacklist: blacklist,
+        blacklist: Promise.resolve(blacklist),
       });
 
       await mediaRepository.save(media);
     } else {
-      media.blacklist = blacklist;
+      media.blacklist = Promise.resolve(blacklist);
       media.status = MediaStatus.BLACKLISTED;
       media.status4k = MediaStatus.BLACKLISTED;
 

server/entity/Media.ts

@@ -118,10 +118,8 @@ class Media {
   @OneToMany(() => Issue, (issue) => issue.media, { cascade: true })
   public issues: Issue[];
 
-  @OneToOne(() => Blacklist, (blacklist) => blacklist.media, {
-    eager: true,
-  })
-  public blacklist: Blacklist;
+  @OneToOne(() => Blacklist, (blacklist) => blacklist.media)
+  public blacklist: Promise<Blacklist>;
 
   @CreateDateColumn()
   public createdAt: Date;

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

@@ -27,8 +27,14 @@ const migrateApiTokens = async (settings: any): Promise<AllSettings> => {
       admin.jellyfinDeviceId
     );
     jellyfinClient.setUserId(admin.jellyfinUserId ?? '');
-    const apiKey = await jellyfinClient.createApiToken('Jellyseerr');
-    settings.jellyfin.apiKey = apiKey;
+    try {
+      const apiKey = await jellyfinClient.createApiToken('Jellyseerr');
+      settings.jellyfin.apiKey = apiKey;
+    } catch {
+      throw new Error(
+        "Failed to create Jellyfin API token from admin account. Please check your network configuration or edit your settings.json by adding an 'apiKey' field inside of the 'jellyfin' section to fix this issue."
+      );
+    }
   }
   return settings;
 };

server/lib/settings/migrator.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import type { AllSettings } from '@server/lib/settings';
 import logger from '@server/logger';
 import fs from 'fs/promises';
@@ -45,10 +44,20 @@ export const runMigrations = async (
         }
         migrated = newSettings;
       } catch (e) {
-        logger.error(`Error while running migration '${migration}'`, {
-          label: 'Settings Migrator',
-        });
-        throw e;
+        // we stop jellyseerr if the migration failed
+        logger.error(
+          `Error while running migration '${migration}': ${e.message}`,
+          {
+            label: 'Settings Migrator',
+          }
+        );
+        logger.error(
+          'A common cause for this error is a permission issue with your configuration folder, a network issue or a corrupted database.',
+          {
+            label: 'Settings Migrator',
+          }
+        );
+        process.exit();
       }
     }
 
@@ -72,22 +81,18 @@ export const runMigrations = async (
       await fs.writeFile(BACKUP_PATH, oldBackup.toString());
     }
   } catch (e) {
+    // we stop jellyseerr if the migration failed
     logger.error(
       `Something went wrong while running settings migrations: ${e.message}`,
-      { label: 'Settings Migrator' }
+      {
+        label: 'Settings Migrator',
+      }
     );
-    // we stop jellyseerr if the migration failed
-    console.log(
-      '===================================================================='
-    );
-    console.log(
-      '       SOMETHING WENT WRONG WHILE RUNNING SETTINGS MIGRATIONS       '
-    );
-    console.log(
-      '   Please check that your configuration folder is properly set up   '
-    );
-    console.log(
-      '===================================================================='
+    logger.error(
+      'A common cause for this issue is a permission error of your configuration folder.',
+      {
+        label: 'Settings Migrator',
+      }
     );
     process.exit();
   }

server/routes/auth.ts

@@ -299,54 +299,84 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
       where: { jellyfinUserId: account.User.Id },
     });
 
-    if (!user && !(await userRepository.count())) {
+    const missingAdminUser = !user && !(await userRepository.count());
+    if (
+      missingAdminUser ||
+      settings.main.mediaServerType === MediaServerType.NOT_CONFIGURED
+    ) {
       // Check if user is admin on jellyfin
       if (account.User.Policy.IsAdministrator === false) {
         throw new ApiError(403, ApiErrorCode.NotAdmin);
       }
 
-      logger.info(
-        'Sign-in attempt from Jellyfin user with access to the media server; creating initial admin user for Overseerr',
-        {
-          label: 'API',
-          ip: req.ip,
+      if (
+        body.serverType !== MediaServerType.JELLYFIN &&
+        body.serverType !== MediaServerType.EMBY
+      ) {
+        throw new Error('select_server_type');
+      }
+      settings.main.mediaServerType = body.serverType;
+
+      if (missingAdminUser) {
+        logger.info(
+          'Sign-in attempt from Jellyfin user with access to the media server; creating initial admin user for Jellyseerr',
+          {
+            label: 'API',
+            ip: req.ip,
+            jellyfinUsername: account.User.Name,
+          }
+        );
+
+        // User doesn't exist, and there are no users in the database, we'll create the user
+        // with admin permissions
+
+        user = new User({
+          id: 1,
+          email: body.email || account.User.Name,
           jellyfinUsername: account.User.Name,
+          jellyfinUserId: account.User.Id,
+          jellyfinDeviceId: deviceId,
+          jellyfinAuthToken: account.AccessToken,
+          permissions: Permission.ADMIN,
+          avatar: `/avatarproxy/${account.User.Id}`,
+          userType:
+            body.serverType === MediaServerType.JELLYFIN
+              ? UserType.JELLYFIN
+              : UserType.EMBY,
+        });
+
+        await userRepository.save(user);
+      } else {
+        logger.info(
+          'Sign-in attempt from Jellyfin user with access to the media server; editing admin user for Jellyseerr',
+          {
+            label: 'API',
+            ip: req.ip,
+            jellyfinUsername: account.User.Name,
+          }
+        );
+
+        // User alread exist but settings.json is not configured, we'll edit the admin user
+
+        user = await userRepository.findOne({
+          where: { id: 1 },
+        });
+        if (!user) {
+          throw new Error('Unable to find admin user to edit');
         }
-      );
+        user.email = body.email || account.User.Name;
+        user.jellyfinUsername = account.User.Name;
+        user.jellyfinUserId = account.User.Id;
+        user.jellyfinDeviceId = deviceId;
+        user.jellyfinAuthToken = account.AccessToken;
+        user.permissions = Permission.ADMIN;
+        user.avatar = `/avatarproxy/${account.User.Id}`;
+        user.userType =
+          body.serverType === MediaServerType.JELLYFIN
+            ? UserType.JELLYFIN
+            : UserType.EMBY;
 
-      // User doesn't exist, and there are no users in the database, we'll create the user
-      // 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: `/avatarproxy/${account.User.Id}`,
-            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: `/avatarproxy/${account.User.Id}`,
-            userType: UserType.JELLYFIN,
-          });
-
-          break;
-        default:
-          throw new Error('select_server_type');
+        await userRepository.save(user);
       }
 
       // Create an API key on Jellyfin from this admin user
@@ -368,8 +398,6 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
       settings.jellyfin.apiKey = apiKey;
       await settings.save();
       startJobs();
-
-      await userRepository.save(user);
     }
     // User already exists, let's update their information
     else if (account.User.Id === user?.jellyfinUserId) {

server/routes/blacklist.ts

@@ -2,14 +2,13 @@ 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 { EntityNotFoundError, QueryFailedError } from 'typeorm';
 import { z } from 'zod';
 
 const blacklistRoutes = Router();
@@ -71,6 +70,32 @@ blacklistRoutes.get(
   }
 );
 
+blacklistRoutes.get(
+  '/: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) },
+      });
+
+      return res.status(200).send(blacklistItem);
+    } catch (e) {
+      if (e instanceof EntityNotFoundError) {
+        return next({
+          status: 401,
+          message: e.message,
+        });
+      }
+      return next({ status: 500, message: e.message });
+    }
+  }
+);
+
 blacklistRoutes.post(
   '/',
   isAuthenticated([Permission.MANAGE_BLACKLIST], {
@@ -134,7 +159,7 @@ blacklistRoutes.delete(
 
       return res.status(204).send();
     } catch (e) {
-      if (e instanceof NotFoundError) {
+      if (e instanceof EntityNotFoundError) {
         return next({
           status: 401,
           message: e.message,

src/components/BlacklistBlock/index.tsx

@@ -1,5 +1,6 @@
 import Badge from '@app/components/Common/Badge';
 import Button from '@app/components/Common/Button';
+import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import Tooltip from '@app/components/Common/Tooltip';
 import { useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
@@ -10,6 +11,7 @@ import Link from 'next/link';
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
+import useSWR from 'swr';
 
 const messages = defineMessages('component.BlacklistBlock', {
   blacklistedby: 'Blacklisted By',
@@ -17,13 +19,13 @@ const messages = defineMessages('component.BlacklistBlock', {
 });
 
 interface BlacklistBlockProps {
-  blacklistItem: Blacklist;
+  tmdbId: number;
   onUpdate?: () => void;
   onDelete?: () => void;
 }
 
 const BlacklistBlock = ({
-  blacklistItem,
+  tmdbId,
   onUpdate,
   onDelete,
 }: BlacklistBlockProps) => {
@@ -31,6 +33,7 @@ const BlacklistBlock = ({
   const intl = useIntl();
   const [isUpdating, setIsUpdating] = useState(false);
   const { addToast } = useToasts();
+  const { data } = useSWR<Blacklist>(`/api/v1/blacklist/${tmdbId}`);
 
   const removeFromBlacklist = async (tmdbId: number, title?: string) => {
     setIsUpdating(true);
@@ -62,6 +65,14 @@ const BlacklistBlock = ({
     setIsUpdating(false);
   };
 
+  if (!data) {
+    return (
+      <>
+        <LoadingSpinner />
+      </>
+    );
+  }
+
   return (
     <div className="px-4 py-3 text-gray-300">
       <div className="flex items-center justify-between">
@@ -73,13 +84,13 @@ const BlacklistBlock = ({
             <span className="w-40 truncate md:w-auto">
               <Link
                 href={
-                  blacklistItem.user.id === user?.id
+                  data.user.id === user?.id
                     ? '/profile'
-                    : `/users/${blacklistItem.user.id}`
+                    : `/users/${data.user.id}`
                 }
               >
                 <span className="font-semibold text-gray-100 transition duration-300 hover:text-white hover:underline">
-                  {blacklistItem.user.displayName}
+                  {data.user.displayName}
                 </span>
               </Link>
             </span>
@@ -91,9 +102,7 @@ const BlacklistBlock = ({
           >
             <Button
               buttonType="danger"
-              onClick={() =>
-                removeFromBlacklist(blacklistItem.tmdbId, blacklistItem.title)
-              }
+              onClick={() => removeFromBlacklist(data.tmdbId, data.title)}
               disabled={isUpdating}
             >
               <TrashIcon className="icon-sm" />
@@ -114,7 +123,7 @@ const BlacklistBlock = ({
             <CalendarIcon className="mr-1.5 h-5 w-5 flex-shrink-0" />
           </Tooltip>
           <span>
-            {intl.formatDate(blacklistItem.createdAt, {
+            {intl.formatDate(data.createdAt, {
               year: 'numeric',
               month: 'long',
               day: 'numeric',

src/components/ManageSlideOver/index.tsx

@@ -292,7 +292,7 @@ const ManageSlideOver = ({
             </h3>
             <div className="overflow-hidden rounded-md border border-gray-700 shadow">
               <BlacklistBlock
-                blacklistItem={data.mediaInfo.blacklist}
+                tmdbId={data.mediaInfo.tmdbId}
                 onUpdate={() => revalidate()}
                 onDelete={() => onClose()}
               />