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/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, {
+  @OneToOne(() => Blacklist, (blacklist) => blacklist.media)
-    eager: true,
+  public blacklist: Promise<Blacklist>;
-  })
-  public blacklist: Blacklist;
 
   @CreateDateColumn()
   public createdAt: Date;

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(
+      if (
-        'Sign-in attempt from Jellyfin user with access to the media server; creating initial admin user for Overseerr',
+        body.serverType !== MediaServerType.JELLYFIN &&
-        {
+        body.serverType !== MediaServerType.EMBY
-          label: 'API',
+      ) {
-          ip: req.ip,
+        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
+        await userRepository.save(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');
       }
 
       // 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={() =>
+              onClick={() => removeFromBlacklist(data.tmdbId, data.title)}
-                removeFromBlacklist(blacklistItem.tmdbId, blacklistItem.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()}
               />