fix: rewrite the rate limit utility

This commit reverts the nextjs error handler fix that was introduced in #882 as that change requires
further refactor which should be held off for another version owing to the fact that there are
currently a lot of changes ready for the next version of jellyseerr.

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;
+  lastTimestamps: number[];
-  timer: NodeJS.Timeout | null;
+  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) {
+    // remove old timestamps
-      if (state.timer) {
+    state.lastTimestamps = state.lastTimestamps.filter(
-        clearInterval(state.timer);
+      (timestamp) => Date.now() - timestamp < 1000
-        state.timer = null;
+    );
-      }
-      return;
-    }
 
-    while (state.activeRequests < options.maxRPS) {
+    if (state.lastTimestamps.length < options.maxRPS) {
-      state.activeRequests++;
+      // process requests if RPS not exceeded
       const item = state.queue.shift();
-      if (!item) break;
+      if (!item) return;
-      const { args, resolve } = item;
+      state.lastTimestamps.push(Date.now());
+      const { args, resolve, reject } = item;
       fn(...args)
         .then(resolve)
-        .finally(() => {
+        .catch(reject);
-          state.activeRequests--;
+      processQueue();
-          if (state.queue.length > 0) {
+    } else {
-            if (!state.timer) {
+      // rerun once the oldest item in queue is older than 1s
-              state.timer = setInterval(processQueue, 1000);
+      if (state.timeout) clearTimeout(state.timeout);
-            }
+      state.timeout = setTimeout(
-          } else {
+        processQueue,
-            if (state.timer) {
+        1000 - (Date.now() - state.lastTimestamps[0])
-              clearInterval(state.timer);
+      );
-              state.timer = null;
-            }
-          }
-        });
     }
   };
 
   return (...args: Parameters<T>): Promise<U> => {
-    return new Promise<U>((resolve) => {
+    return new Promise<U>((resolve, reject) => {
-      state.queue.push({ args, resolve });
+      state.queue.push({ args, resolve, reject });
       processQueue();
     });
   };

src/components/Discover/DiscoverNetwork/index.tsx

@@ -50,7 +50,7 @@ const DiscoverTvNetwork = () => {
           {firstResultData?.network.logoPath ? (
             <div className="mb-6 flex justify-center">
               <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"
                 fill

src/components/Discover/DiscoverStudio/index.tsx

@@ -50,7 +50,7 @@ const DiscoverMovieStudio = () => {
           {firstResultData?.studio.logoPath ? (
             <div className="mb-6 flex justify-center">
               <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"
                 fill

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

@@ -126,6 +126,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();
@@ -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 }),
                     }
                   );

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

@@ -45,6 +45,9 @@ 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();

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"
+                    className="rounded-md"
-                    fill
+                    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"
+                    className="rounded-md"
-                    fill
+                    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"
+                    className="rounded-md"
-                    fill
+                    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"
+                    className="rounded-md"
-                    fill
+                    width={300}
+                    height={450}
                   />
                 </div>
               )}