perf(blacklist): request data only when modal is shown

For admin users, the button to blacklist a media (used on every media card) was displaying a Modal,
that was requesting data BEFORE the modal was displayed. This resulted in dozens of additional
requests everytime media cards were displayed.

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/basic-features/typescript for more information.

server/api/externalapi.ts

@@ -1,5 +1,5 @@
 import type { RateLimitOptions } from '@server/utils/rateLimit';
-// import rateLimit from '@server/utils/rateLimit';
+import rateLimit from '@server/utils/rateLimit';
 import type NodeCache from 'node-cache';
 
 // 5 minute default TTL (in seconds)
@@ -26,12 +26,11 @@ class ExternalAPI {
     params: Record<string, string> = {},
     options: ExternalAPIOptions = {}
   ) {
-    // if (options.rateLimit) {
-    //   this.fetch = rateLimit(fetch, options.rateLimit);
-    // } else {
-    //   this.fetch = fetch;
-    // }
-    this.fetch = fetch;
+    if (options.rateLimit) {
+      this.fetch = rateLimit(fetch, options.rateLimit);
+    } else {
+      this.fetch = fetch;
+    }
 
     const url = new URL(baseUrl);
 

server/lib/imageproxy.ts

@@ -1,6 +1,6 @@
 import logger from '@server/logger';
 import type { RateLimitOptions } from '@server/utils/rateLimit';
-// import rateLimit from '@server/utils/rateLimit';
+import rateLimit from '@server/utils/rateLimit';
 import { createHash } from 'crypto';
 import { promises } from 'fs';
 import mime from 'mime/lite';
@@ -150,14 +150,13 @@ class ImageProxy {
     this.baseUrl = baseUrl;
     this.key = key;
 
-    // if (options.rateLimitOptions) {
-    //   this.fetch = rateLimit(fetch, {
-    //     ...options.rateLimitOptions,
-    //   });
-    // } else {
-    //   this.fetch = fetch;
-    // }
-    this.fetch = fetch;
+    if (options.rateLimitOptions) {
+      this.fetch = rateLimit(fetch, {
+        ...options.rateLimitOptions,
+      });
+    } else {
+      this.fetch = fetch;
+    }
     this.headers = options.headers || null;
   }
 

src/components/BlacklistModal/index.tsx

@@ -38,7 +38,7 @@ const BlacklistModal = ({
   const intl = useIntl();
 
   const { data, error } = useSWR<TvDetails | MovieDetails>(
-    `/api/v1/${type}/${tmdbId}`
+    show ? `/api/v1/${type}/${tmdbId}` : null
   );
 
   return (

src/components/Login/JellyfinLogin.tsx

@@ -82,10 +82,17 @@ const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
       port: Yup.number().required(
         intl.formatMessage(messages.validationPortRequired)
       ),
-      urlBase: Yup.string().matches(
-        /^(.*[^/])$/,
-        intl.formatMessage(messages.validationUrlBaseTrailingSlash)
-      ),
+      urlBase: Yup.string()
+        .test(
+          'leading-slash',
+          intl.formatMessage(messages.validationUrlBaseLeadingSlash),
+          (value) => !value || value.startsWith('/')
+        )
+        .test(
+          'trailing-slash',
+          intl.formatMessage(messages.validationUrlBaseTrailingSlash),
+          (value) => !value || !value.endsWith('/')
+        ),
       email: Yup.string()
         .email(intl.formatMessage(messages.validationemailformat))
         .required(intl.formatMessage(messages.validationemailrequired)),