fix: update avatar on new login

fix: cache Jellyfin/Emby avatars from API
Previously, avatars were cached using image links from Jellyfin/Emby. Now, avatar images are obtained directly from the API to avoid some configuration bugs.
2025-12-24 18:59:28 -05:00 · 2024-10-24 11:38:06 +02:00 · 2024-10-22 00:28:31 +02:00 · 2024-10-18 18:24:29 +08:00 · 2024-10-18 06:28:42 +08:00 · 2024-10-17 23:12:41 +08:00
52 changed files with 533 additions and 240 deletions
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -439,6 +439,15 @@
      "contributions": [
        "code"
      ]
+    },
+    {
+      "login": "M0NsTeRRR",
+      "name": "Ludovic Ortega",
+      "avatar_url": "https://avatars.githubusercontent.com/u/37785089?v=4",
+      "profile": "https://github.com/M0NsTeRRR",
+      "contributions": [
+        "security"
+      ]
    }
  ]
 }
--- a/README.md
+++ b/README.md
@@ -11,7 +11,7 @@
 <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-47-orange.svg"/></a>
+<a href="#contributors-"><img alt="All Contributors" src="https://img.shields.io/badge/all_contributors-48-orange.svg"/></a>
 <!-- ALL-CONTRIBUTORS-BADGE:END -->

 **Jellyseerr** is a free and open source software application for managing requests for your media library.
@@ -146,6 +146,7 @@ Thanks goes to these wonderful people from Overseerr ([emoji key](https://allcon
      <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>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/M0NsTeRRR"><img src="https://avatars.githubusercontent.com/u/37785089?v=4?s=100" width="100px;" alt="Ludovic Ortega"/><br /><sub><b>Ludovic Ortega</b></sub></a><br /><a href="#security-M0NsTeRRR" title="Security">🛡️</a></td>
    </tr>
  </tbody>
 </table>
--- a/docs/getting-started/buildfromsource.mdx
+++ b/docs/getting-started/buildfromsource.mdx
@@ -12,49 +12,12 @@ import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';

 ### Prerequisites
-<Tabs groupId="versions" queryString>
-  <TabItem value="latest" label="Latest">
-    - [Node.js 18.x](https://nodejs.org/en/download/)
-    - [Yarn 1.x](https://classic.yarnpkg.com/lang/en/docs/install)
-    - [Git](https://git-scm.com/downloads)
-  </TabItem>
-
-  <TabItem value="develop" label="Develop">
    - [Node.js 20.x](https://nodejs.org/en/download/)
    - [Pnpm 9.x](https://pnpm.io/installation)
    - [Git](https://git-scm.com/downloads)
-  </TabItem>
-</Tabs>
-

 ## Unix (Linux, macOS)
 ### Installation
-<Tabs groupId="versions" queryString>
-  <TabItem value="latest" label="latest">
-1. Assuming you want the working directory to be `/opt/jellyseerr`, create the directory and navigate to it:
-```bash
-sudo mkdir -p /opt/jellyseerr && cd /opt/jellyseerr
-```
-2. Clone the Jellyseerr repository and checkout the latest release:
-```bash
-git clone https://github.com/Fallenbagel/jellyseerr.git
-cd jellyseerr
-git checkout main
-```
-3. Install the dependencies:
-```bash
-CYPRESS_INSTALL_BINARY=0 yarn install --frozen-lockfile --network-timeout 1000000
-```
-4. Build the project:
-```bash
-yarn build
-```
-5. Start Jellyseerr:
-```bash
-yarn start
-```
-  </TabItem>
-  <TabItem value="develop" label="develop">
 1. Assuming you want the working directory to be `/opt/jellyseerr`, create the directory and navigate to it:
 ```bash
 sudo mkdir -p /opt/jellyseerr && cd /opt/jellyseerr
@@ -77,8 +40,6 @@ pnpm build
 ```bash
 pnpm start
 ```
-  </TabItem>
-</Tabs>

 :::info
 You can now access Jellyseerr by visiting `http://localhost:5055` in your web browser.
@@ -234,33 +195,6 @@ pm2 status jellyseerr

 ## Windows
 ### Installation
-<Tabs groupId="versions" queryString>
-  <TabItem value="latest" label="latest">
-1. Assuming you want the working directory to be `C:\jellyseerr`, create the directory and navigate to it:
-```powershell
-mkdir C:\jellyseerr
-cd C:\jellyseerr
-```
-2. Clone the Jellyseerr repository and checkout the latest release:
-```powershell
-git clone https://github.com/Fallenbagel/jellyseerr.git .
-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:
-```powershell
-yarn build
-```
-5. Start Jellyseerr:
-```powershell
-yarn start
-```
-  </TabItem>
-  <TabItem value="develop" label="develop">
 1. Assuming you want the working directory to be `C:\jellyseerr`, create the directory and navigate to it:
 ```powershell
 mkdir C:\jellyseerr
@@ -284,8 +218,6 @@ pnpm build
 ```powershell
 pnpm start
 ```
-  </TabItem>
-</Tabs>

 :::tip
 You can add the environment variables to a `.env` file in the Jellyseerr directory.
@@ -313,6 +245,7 @@ node dist/index.js
 - Set the trigger to "When the computer starts"
 - Set the action to "Start a program"
 - Set the program/script to the path of the `start-jellyseerr.bat` file
+- Set the "Start in" to the jellyseerr directory.
 - Click "Finish"

 Now, Jellyseerr will start when the computer boots up in the background.
--- a/next.config.js
+++ b/next.config.js
@@ -10,7 +10,6 @@ module.exports = {
    remotePatterns: [
      { hostname: 'gravatar.com' },
      { hostname: 'image.tmdb.org' },
-      { hostname: '*', protocol: 'https' },
    ],
  },
  webpack(config) {
--- a/overseerr-api.yml
+++ b/overseerr-api.yml
@@ -2790,6 +2790,15 @@ paths:
                          imageCount:
                            type: number
                            example: 123
+                      avatar:
+                        type: object
+                        properties:
+                          size:
+                            type: number
+                            example: 123456
+                          imageCount:
+                            type: number
+                            example: 123
                  apiCaches:
                    type: array
                    items:
--- a/package.json
+++ b/package.json
@@ -62,6 +62,7 @@
    "formik": "^2.4.6",
    "gravatar-url": "3.1.0",
    "lodash": "4.17.21",
+    "mime": "3",
    "next": "^14.2.4",
    "node-cache": "5.1.2",
    "node-gyp": "9.3.1",
@@ -119,6 +120,7 @@
    "@types/express": "4.17.17",
    "@types/express-session": "1.17.6",
    "@types/lodash": "4.14.191",
+    "@types/mime": "3",
    "@types/node": "20.14.8",
    "@types/node-schedule": "2.1.0",
    "@types/nodemailer": "6.4.7",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -98,6 +98,9 @@ importers:
      lodash:
        specifier: 4.17.21
        version: 4.17.21
+      mime:
+        specifier: '3'
+        version: 3.0.0
      next:
        specifier: ^14.2.4
        version: 14.2.4(@babel/core@7.24.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -264,6 +267,9 @@ importers:
      '@types/lodash':
        specifier: 4.14.191
        version: 4.14.191
+      '@types/mime':
+        specifier: '3'
+        version: 3.0.4
      '@types/node':
        specifier: 20.14.8
        version: 20.14.8
@@ -2848,6 +2854,9 @@ packages:
  '@types/mime@1.3.5':
    resolution: {integrity: sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==}

+  '@types/mime@3.0.4':
+    resolution: {integrity: sha512-iJt33IQnVRkqeqC7PzBHPTC6fDlRNRW8vjrgqtScAhrmMwe8c4Eo7+fUGTa+XdWrpEgpyKWMYmi2dIwMAYRzPw==}
+
  '@types/minimatch@3.0.5':
    resolution: {integrity: sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==}

@@ -10836,7 +10845,7 @@ snapshots:
      nopt: 5.0.0
      npmlog: 5.0.1
      rimraf: 3.0.2
-      semver: 7.6.2
+      semver: 7.3.8
      tar: 6.2.1
    transitivePeerDependencies:
      - encoding
@@ -10911,13 +10920,13 @@ snapshots:
  '@npmcli/fs@1.1.1':
    dependencies:
      '@gar/promisify': 1.1.3
-      semver: 7.6.2
+      semver: 7.3.8
    optional: true

  '@npmcli/fs@2.1.2':
    dependencies:
      '@gar/promisify': 1.1.3
-      semver: 7.6.2
+      semver: 7.3.8

  '@npmcli/move-file@1.1.2':
    dependencies:
@@ -12326,7 +12335,7 @@ snapshots:
      read-pkg: 5.2.0
      registry-auth-token: 5.0.2
      semantic-release: 19.0.5(encoding@0.1.13)
-      semver: 7.6.2
+      semver: 7.3.8
      tempy: 1.0.1

  '@semantic-release/release-notes-generator@10.0.3(semantic-release@19.0.5(encoding@0.1.13))':
@@ -12670,6 +12679,8 @@ snapshots:

  '@types/mime@1.3.5': {}

+  '@types/mime@3.0.4': {}
+
  '@types/minimatch@3.0.5': {}

  '@types/minimist@1.2.5': {}
@@ -12887,7 +12898,7 @@ snapshots:
      debug: 4.3.5(supports-color@8.1.1)
      globby: 11.1.0
      is-glob: 4.0.3
-      semver: 7.6.2
+      semver: 7.3.8
      tsutils: 3.21.0(typescript@4.9.5)
    optionalDependencies:
      typescript: 4.9.5
@@ -17269,7 +17280,7 @@ snapshots:
      nopt: 5.0.0
      npmlog: 6.0.2
      rimraf: 3.0.2
-      semver: 7.6.2
+      semver: 7.3.8
      tar: 6.2.1
      which: 2.0.2
    transitivePeerDependencies:
@@ -17348,7 +17359,7 @@ snapshots:
    dependencies:
      hosted-git-info: 4.1.0
      is-core-module: 2.14.0
-      semver: 7.6.2
+      semver: 7.3.8
      validate-npm-package-license: 3.0.4

  normalize-path@3.0.0: {}
--- a/server/api/externalapi.ts
+++ b/server/api/externalapi.ts
@@ -76,7 +76,7 @@ class ExternalAPI {
    }
    const data = await this.getDataFromResponse(response);

-    if (this.cache) {
+    if (this.cache && ttl !== 0) {
      this.cache.set(cacheKey, data, ttl ?? DEFAULT_TTL);
    }

@@ -120,7 +120,7 @@ class ExternalAPI {
    }
    const resData = await this.getDataFromResponse(response);

-    if (this.cache) {
+    if (this.cache && ttl !== 0) {
      this.cache.set(cacheKey, resData, ttl ?? DEFAULT_TTL);
    }

@@ -164,7 +164,7 @@ class ExternalAPI {
    }
    const resData = await this.getDataFromResponse(response);

-    if (this.cache) {
+    if (this.cache && ttl !== 0) {
      this.cache.set(cacheKey, resData, ttl ?? DEFAULT_TTL);
    }

--- a/server/api/rating/rottentomatoes.ts
+++ b/server/api/rating/rottentomatoes.ts
@@ -182,7 +182,7 @@ class RottenTomatoes extends ExternalAPI {
        );
      }

-      if (!tvshow) {
+      if (!tvshow || !tvshow.rottenTomatoes) {
        return null;
      }

--- a/server/api/servarr/base.ts
+++ b/server/api/servarr/base.ts
@@ -157,9 +157,13 @@ class ServarrBase<QueueItemAppendT> extends ExternalAPI {

  public getQueue = async (): Promise<(QueueItem & QueueItemAppendT)[]> => {
    try {
-      const data = await this.get<QueueResponse<QueueItemAppendT>>(`/queue`, {
-        includeEpisode: 'true',
-      });
+      const data = await this.get<QueueResponse<QueueItemAppendT>>(
+        `/queue`,
+        {
+          includeEpisode: 'true',
+        },
+        0
+      );

      return data.records;
    } catch (e) {
@@ -193,15 +197,24 @@ class ServarrBase<QueueItemAppendT> extends ExternalAPI {
    }
  };

+  async refreshMonitoredDownloads(): Promise<void> {
+    await this.runCommand('RefreshMonitoredDownloads', {});
+  }
+
  protected async runCommand(
    commandName: string,
    options: Record<string, unknown>
  ): Promise<void> {
    try {
-      await this.post(`/command`, {
-        name: commandName,
-        ...options,
-      });
+      await this.post(
+        `/command`,
+        {
+          name: commandName,
+          ...options,
+        },
+        {},
+        0
+      );
    } catch (e) {
      throw new Error(`[${this.apiName}] Failed to run command: ${e.message}`);
    }
--- a/server/entity/Media.ts
+++ b/server/entity/Media.ts
@@ -231,7 +231,7 @@ class Media {
        this.mediaUrl = `${jellyfinHost}/web/index.html#!/${pageName}?id=${this.jellyfinMediaId}&context=home&serverId=${serverId}`;
      }
      if (this.jellyfinMediaId4k) {
-        this.mediaUrl4k = `${jellyfinHost}/web/index.html#!/${pageName}?id=${this.jellyfinMediaId}&context=home&serverId=${serverId}`;
+        this.mediaUrl4k = `${jellyfinHost}/web/index.html#!/${pageName}?id=${this.jellyfinMediaId4k}&context=home&serverId=${serverId}`;
      }
    }
  }
--- a/server/index.ts
+++ b/server/index.ts
@@ -19,6 +19,7 @@ import { getSettings } from '@server/lib/settings';
 import logger from '@server/logger';
 import clearCookies from '@server/middleware/clearcookies';
 import routes from '@server/routes';
+import avatarproxy from '@server/routes/avatarproxy';
 import imageproxy from '@server/routes/imageproxy';
 import { getAppVersion } from '@server/utils/appVersion';
 import restartFlag from '@server/utils/restartFlag';
@@ -174,7 +175,7 @@ app
        },
        store: new TypeormStore({
          cleanupLimit: 2,
-          ttl: 1000 * 60 * 60 * 24 * 30,
+          ttl: 60 * 60 * 24 * 30,
        }).connect(sessionRespository) as Store,
      })
    );
@@ -202,6 +203,7 @@ app

    // Do not set cookies so CDNs can cache them
    server.use('/imageproxy', clearCookies, imageproxy);
+    server.use('/avatarproxy', clearCookies, avatarproxy);

    server.get('*', (req, res) => handle(req, res));
    server.use(
--- a/server/interfaces/api/settingsInterfaces.ts
+++ b/server/interfaces/api/settingsInterfaces.ts
@@ -58,7 +58,7 @@ export interface CacheItem {

 export interface CacheResponse {
  apiCaches: CacheItem[];
-  imageCache: Record<'tmdb', { size: number; imageCount: number }>;
+  imageCache: Record<'tmdb' | 'avatar', { size: number; imageCount: number }>;
 }

 export interface StatusResponse {
--- a/server/job/schedule.ts
+++ b/server/job/schedule.ts
@@ -227,6 +227,9 @@ export const startJobs = (): void => {
      });
      // Clean TMDB image cache
      ImageProxy.clearCache('tmdb');
+
+      // Clean users avatar image cache
+      ImageProxy.clearCache('avatar');
    }),
  });

--- a/server/lib/downloadtracker.ts
+++ b/server/lib/downloadtracker.ts
@@ -85,6 +85,7 @@ class DownloadTracker {
          });

          try {
+            await radarr.refreshMonitoredDownloads();
            const queueItems = await radarr.getQueue();

            this.radarrServers[server.id] = queueItems.map((item) => ({
@@ -162,6 +163,7 @@ class DownloadTracker {
          });

          try {
+            await sonarr.refreshMonitoredDownloads();
            const queueItems = await sonarr.getQueue();

            this.sonarrServers[server.id] = queueItems.map((item) => ({
--- a/server/lib/imageproxy.ts
+++ b/server/lib/imageproxy.ts
@@ -3,6 +3,7 @@ import type { RateLimitOptions } from '@server/utils/rateLimit';
 import rateLimit from '@server/utils/rateLimit';
 import { createHash } from 'crypto';
 import { promises } from 'fs';
+import mime from 'mime/lite';
 import path, { join } from 'path';

 type ImageResponse = {
@@ -11,7 +12,7 @@ type ImageResponse = {
    curRevalidate: number;
    isStale: boolean;
    etag: string;
-    extension: string;
+    extension: string | null;
    cacheKey: string;
    cacheMiss: boolean;
  };
@@ -27,29 +28,45 @@ class ImageProxy {
    let deletedImages = 0;
    const cacheDirectory = path.join(baseCacheDirectory, key);

-    const files = await promises.readdir(cacheDirectory);
+    try {
+      const files = await promises.readdir(cacheDirectory);

-    for (const file of files) {
-      const filePath = path.join(cacheDirectory, file);
-      const stat = await promises.lstat(filePath);
+      for (const file of files) {
+        const filePath = path.join(cacheDirectory, file);
+        const stat = await promises.lstat(filePath);

-      if (stat.isDirectory()) {
-        const imageFiles = await promises.readdir(filePath);
+        if (stat.isDirectory()) {
+          const imageFiles = await promises.readdir(filePath);

-        for (const imageFile of imageFiles) {
-          const [, expireAtSt] = imageFile.split('.');
-          const expireAt = Number(expireAtSt);
-          const now = Date.now();
+          for (const imageFile of imageFiles) {
+            const [, expireAtSt] = imageFile.split('.');
+            const expireAt = Number(expireAtSt);
+            const now = Date.now();

-          if (now > expireAt) {
-            await promises.rm(path.join(filePath, imageFile));
-            deletedImages += 1;
+            if (now > expireAt) {
+              await promises.rm(path.join(filePath), {
+                recursive: true,
+              });
+              deletedImages += 1;
+            }
          }
        }
      }
+    } catch (e) {
+      if (e.code === 'ENOENT') {
+        logger.error('Directory not found', {
+          label: 'Image Cache',
+          message: e.message,
+        });
+      } else {
+        logger.error('Failed to read directory', {
+          label: 'Image Cache',
+          message: e.message,
+        });
+      }
    }

-    logger.info(`Cleared ${deletedImages} stale image(s) from cache`, {
+    logger.info(`Cleared ${deletedImages} stale image(s) from cache '${key}'`, {
      label: 'Image Cache',
    });
  }
@@ -69,39 +86,56 @@ class ImageProxy {
  }

  private static async getDirectorySize(dir: string): Promise<number> {
-    const files = await promises.readdir(dir, {
-      withFileTypes: true,
-    });
+    try {
+      const files = await promises.readdir(dir, {
+        withFileTypes: true,
+      });

-    const paths = files.map(async (file) => {
-      const path = join(dir, file.name);
+      const paths = files.map(async (file) => {
+        const path = join(dir, file.name);

-      if (file.isDirectory()) return await ImageProxy.getDirectorySize(path);
+        if (file.isDirectory()) return await ImageProxy.getDirectorySize(path);

-      if (file.isFile()) {
-        const { size } = await promises.stat(path);
+        if (file.isFile()) {
+          const { size } = await promises.stat(path);

-        return size;
+          return size;
+        }
+
+        return 0;
+      });
+
+      return (await Promise.all(paths))
+        .flat(Infinity)
+        .reduce((i, size) => i + size, 0);
+    } catch (e) {
+      if (e.code === 'ENOENT') {
+        return 0;
      }
+    }

-      return 0;
-    });
-
-    return (await Promise.all(paths))
-      .flat(Infinity)
-      .reduce((i, size) => i + size, 0);
+    return 0;
  }

  private static async getImageCount(dir: string) {
-    const files = await promises.readdir(dir);
+    try {
+      const files = await promises.readdir(dir);

-    return files.length;
+      return files.length;
+    } catch (e) {
+      if (e.code === 'ENOENT') {
+        return 0;
+      }
+    }
+
+    return 0;
  }

  private fetch: typeof fetch;
  private cacheVersion;
  private key;
  private baseUrl;
+  private headers: HeadersInit | null = null;

  constructor(
    key: string,
@@ -109,6 +143,7 @@ class ImageProxy {
    options: {
      cacheVersion?: number;
      rateLimitOptions?: RateLimitOptions;
+      headers?: HeadersInit;
    } = {}
  ) {
    this.cacheVersion = options.cacheVersion ?? 1;
@@ -122,9 +157,13 @@ class ImageProxy {
    } else {
      this.fetch = fetch;
    }
+    this.headers = options.headers || null;
  }

-  public async getImage(path: string): Promise<ImageResponse> {
+  public async getImage(
+    path: string,
+    fallbackPath?: string
+  ): Promise<ImageResponse> {
    const cacheKey = this.getCacheKey(path);

    const imageResponse = await this.get(cacheKey);
@@ -133,7 +172,11 @@ class ImageProxy {
      const newImage = await this.set(path, cacheKey);

      if (!newImage) {
-        throw new Error('Failed to load image');
+        if (fallbackPath) {
+          return await this.getImage(fallbackPath);
+        } else {
+          throw new Error('Failed to load image');
+        }
      }

      return newImage;
@@ -147,6 +190,27 @@ class ImageProxy {
    return imageResponse;
  }

+  public async clearCachedImage(path: string) {
+    // find cacheKey
+    const cacheKey = this.getCacheKey(path);
+
+    try {
+      const directory = join(this.getCacheDirectory(), cacheKey);
+      const files = await promises.readdir(directory);
+
+      await promises.rm(directory, { recursive: true });
+
+      logger.info(`Cleared ${files[0]} from cache 'avatar'`, {
+        label: 'Image Cache',
+      });
+    } catch (e) {
+      logger.error('Failed to clear cached image', {
+        label: 'Image Cache',
+        message: e.message,
+      });
+    }
+  }
+
  private async get(cacheKey: string): Promise<ImageResponse | null> {
    try {
      const directory = join(this.getCacheDirectory(), cacheKey);
@@ -187,16 +251,30 @@ class ImageProxy {
      const directory = join(this.getCacheDirectory(), cacheKey);
      const href =
        this.baseUrl +
-        (this.baseUrl.endsWith('/') ? '' : '/') +
+        (this.baseUrl.length > 0
+          ? this.baseUrl.endsWith('/')
+            ? ''
+            : '/'
+          : '') +
        (path.startsWith('/') ? path.slice(1) : path);
-      const response = await this.fetch(href);
+      const response = await this.fetch(href, {
+        headers: this.headers || undefined,
+      });
+      if (!response.ok) {
+        return null;
+      }
      const arrayBuffer = await response.arrayBuffer();
      const buffer = Buffer.from(arrayBuffer);

-      const extension = path.split('.').pop() ?? '';
-      const maxAge = Number(
+      const extension = mime.getExtension(
+        response.headers.get('content-type') ?? ''
+      );
+
+      let maxAge = Number(
        (response.headers.get('cache-control') ?? '0').split('=')[1]
      );
+
+      if (!maxAge) maxAge = 86400;
      const expireAt = Date.now() + maxAge * 1000;
      const etag = (response.headers.get('etag') ?? '').replace(/"/g, '');

@@ -232,7 +310,7 @@ class ImageProxy {

  private async writeToCacheDir(
    dir: string,
-    extension: string,
+    extension: string | null,
    maxAge: number,
    expireAt: number,
    buffer: Buffer,
--- a/server/lib/settings/index.ts
+++ b/server/lib/settings/index.ts
@@ -648,7 +648,7 @@ class Settings {

    if (data) {
      const parsedJson = JSON.parse(data);
-      this.data = await runMigrations(parsedJson);
+      this.data = await runMigrations(parsedJson, SETTINGS_PATH);

      this.data = merge(this.data, parsedJson);

--- a/server/lib/settings/migrator.ts
+++ b/server/lib/settings/migrator.ts
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import type { AllSettings } from '@server/lib/settings';
 import logger from '@server/logger';
 import fs from 'fs';
@@ -6,7 +7,8 @@ import path from 'path';
 const migrationsDir = path.join(__dirname, 'migrations');

 export const runMigrations = async (
-  settings: AllSettings
+  settings: AllSettings,
+  SETTINGS_PATH: string
 ): Promise<AllSettings> => {
  const migrations = fs
    .readdirSync(migrationsDir)
@@ -17,14 +19,43 @@ export const runMigrations = async (
  let migrated = settings;

  try {
+    const settingsBefore = JSON.stringify(migrated);
+
    for (const migration of migrations) {
      migrated = await migration(migrated);
    }
+
+    const settingsAfter = JSON.stringify(migrated);
+
+    if (settingsBefore !== settingsAfter) {
+      // a migration occured
+      // we check that the new config will be saved
+      fs.writeFileSync(SETTINGS_PATH, JSON.stringify(migrated, undefined, ' '));
+      const fileSaved = JSON.parse(fs.readFileSync(SETTINGS_PATH, 'utf-8'));
+      if (JSON.stringify(fileSaved) !== settingsAfter) {
+        // something went wrong while saving file
+        throw new Error('Unable to save settings after migration.');
+      }
+    }
  } catch (e) {
    logger.error(
      `Something went wrong while running settings migrations: ${e.message}`,
      { 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(
+      '===================================================================='
+    );
+    process.exit();
  }

  return migrated;
--- a/server/routes/auth.ts
+++ b/server/routes/auth.ts
@@ -14,7 +14,6 @@ import { ApiError } from '@server/types/error';
 import { getHostname } from '@server/utils/getHostname';
 import * as EmailValidator from 'email-validator';
 import { Router } from 'express';
-import gravatarUrl from 'gravatar-url';
 import net from 'net';

 const authRoutes = Router();
@@ -261,8 +260,6 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
            urlBase: body.urlBase,
          });

-    const { externalHostname } = getSettings().jellyfin;
-
    // Try to find deviceId that corresponds to jellyfin user, else generate a new one
    let user = await userRepository.findOne({
      where: { jellyfinUsername: body.username },
@@ -280,11 +277,6 @@ 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 jellyfinHost =
-      externalHostname && externalHostname.length > 0
-        ? externalHostname
-        : hostname;
-
    const ip = req.ip;
    let clientIp;

@@ -334,14 +326,10 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
            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,
-                }),
+            avatar: `/avatarproxy/${account.User.Id}`,
            userType: UserType.EMBY,
          });
+
          break;
        case MediaServerType.JELLYFIN:
          settings.main.mediaServerType = MediaServerType.JELLYFIN;
@@ -352,14 +340,10 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
            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,
-                }),
+            avatar: `/avatarproxy/${account.User.Id}`,
            userType: UserType.JELLYFIN,
          });
+
          break;
        default:
          throw new Error('select_server_type');
@@ -405,15 +389,7 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
          jellyfinUsername: account.User.Name,
        }
      );
-      // 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 || account.User.Name, {
-          default: 'mm',
-          size: 200,
-        });
-      }
+      user.avatar = `/avatarproxy/${account.User.Id}`;
      user.jellyfinUsername = account.User.Name;

      if (user.username === account.User.Name) {
@@ -451,17 +427,13 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
        jellyfinUserId: account.User.Id,
        jellyfinDeviceId: deviceId,
        permissions: settings.main.defaultPermissions,
-        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,
-            }),
+        avatar: `/avatarproxy/${account.User.Id}`,
        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;
      if (passedExplicitPassword) {
--- a/server/routes/avatarproxy.ts
+++ b/server/routes/avatarproxy.ts
@@ -0,0 +1,86 @@
+import { MediaServerType } from '@server/constants/server';
+import { getRepository } from '@server/datasource';
+import { User } from '@server/entity/User';
+import ImageProxy from '@server/lib/imageproxy';
+import { getSettings } from '@server/lib/settings';
+import logger from '@server/logger';
+import { getAppVersion } from '@server/utils/appVersion';
+import { getHostname } from '@server/utils/getHostname';
+import { Router } from 'express';
+import gravatarUrl from 'gravatar-url';
+
+const router = Router();
+
+let _avatarImageProxy: ImageProxy | null = null;
+async function initAvatarImageProxy() {
+  if (!_avatarImageProxy) {
+    const userRepository = getRepository(User);
+    const admin = await userRepository.findOne({
+      where: { id: 1 },
+      select: ['id', 'jellyfinUserId', 'jellyfinDeviceId'],
+      order: { id: 'ASC' },
+    });
+    const deviceId = admin?.jellyfinDeviceId;
+    const authToken = getSettings().jellyfin.apiKey;
+    _avatarImageProxy = new ImageProxy('avatar', '', {
+      headers: {
+        'X-Emby-Authorization': `MediaBrowser Client="Jellyseerr", Device="Jellyseerr", DeviceId="${deviceId}", Version="${getAppVersion()}", Token="${authToken}"`,
+      },
+    });
+  }
+  return _avatarImageProxy;
+}
+
+router.get('/:jellyfinUserId', async (req, res) => {
+  try {
+    if (!req.params.jellyfinUserId.match(/^[a-f0-9]{32}$/)) {
+      const mediaServerType = getSettings().main.mediaServerType;
+      throw new Error(
+        `Provided URL is not ${
+          mediaServerType === MediaServerType.JELLYFIN
+            ? 'a Jellyfin'
+            : 'an Emby'
+        } avatar.`
+      );
+    }
+
+    const avatarImageCache = await initAvatarImageProxy();
+
+    const user = await getRepository(User).findOne({
+      where: { jellyfinUserId: req.params.jellyfinUserId },
+    });
+
+    const fallbackUrl = gravatarUrl(user?.email || 'none', {
+      default: 'mm',
+      size: 200,
+    });
+    const jellyfinAvatarUrl = `${getHostname()}/UserImage?UserId=${
+      req.params.jellyfinUserId
+    }`;
+    let imageData = await avatarImageCache.getImage(
+      jellyfinAvatarUrl,
+      fallbackUrl
+    );
+
+    if (imageData.meta.extension === 'json') {
+      // this is a 404
+      imageData = await avatarImageCache.getImage(fallbackUrl);
+    }
+
+    res.writeHead(200, {
+      'Content-Type': `image/${imageData.meta.extension}`,
+      'Content-Length': imageData.imageBuffer.length,
+      'Cache-Control': `public, max-age=${imageData.meta.curRevalidate}`,
+      'OS-Cache-Key': imageData.meta.cacheKey,
+      'OS-Cache-Status': imageData.meta.cacheMiss ? 'MISS' : 'HIT',
+    });
+
+    res.end(imageData.imageBuffer);
+  } catch (e) {
+    logger.error('Failed to proxy avatar image', {
+      errorMessage: e.message,
+    });
+  }
+});
+
+export default router;
--- a/server/routes/settings/index.ts
+++ b/server/routes/settings/index.ts
@@ -32,7 +32,6 @@ import { getHostname } from '@server/utils/getHostname';
 import { Router } from 'express';
 import rateLimit from 'express-rate-limit';
 import fs from 'fs';
-import gravatarUrl from 'gravatar-url';
 import { escapeRegExp, merge, omit, set, sortBy } from 'lodash';
 import { rescheduleJob } from 'node-schedule';
 import path from 'path';
@@ -377,11 +376,6 @@ settingsRoutes.get('/jellyfin/library', async (req, res, next) => {

 settingsRoutes.get('/jellyfin/users', async (req, res) => {
  const settings = getSettings();
-  const { externalHostname } = settings.jellyfin;
-  const jellyfinHost =
-    externalHostname && externalHostname.length > 0
-      ? externalHostname
-      : getHostname();

  const userRepository = getRepository(User);
  const admin = await userRepository.findOneOrFail({
@@ -400,9 +394,7 @@ settingsRoutes.get('/jellyfin/users', async (req, res) => {
  const users = resp.users.map((user) => ({
    username: user.Name,
    id: user.Id,
-    thumb: user.PrimaryImageTag
-      ? `${jellyfinHost}/Users/${user.Id}/Images/Primary/?tag=${user.PrimaryImageTag}&quality=90`
-      : gravatarUrl(user.Name, { default: 'mm', size: 200 }),
+    thumb: `/avatarproxy/${user.Id}`,
    email: user.Name,
  }));

@@ -746,11 +738,13 @@ settingsRoutes.get('/cache', async (_req, res) => {
  }));

  const tmdbImageCache = await ImageProxy.getImageStats('tmdb');
+  const avatarImageCache = await ImageProxy.getImageStats('avatar');

  return res.status(200).json({
    apiCaches,
    imageCache: {
      tmdb: tmdbImageCache,
+      avatar: avatarImageCache,
    },
  });
 });
--- a/server/routes/user/index.ts
+++ b/server/routes/user/index.ts
@@ -516,12 +516,6 @@ router.post(

      //const jellyfinUsersResponse = await jellyfinClient.getUsers();
      const createdUsers: User[] = [];
-      const { externalHostname } = getSettings().jellyfin;
-
-      const jellyfinHost =
-        externalHostname && externalHostname.length > 0
-          ? externalHostname
-          : hostname;

      jellyfinClient.setUserId(admin.jellyfinUserId ?? '');
      const jellyfinUsers = await jellyfinClient.getUsers();
@@ -545,12 +539,7 @@ router.post(
            ).toString('base64'),
            email: jellyfinUser?.Name,
            permissions: settings.main.defaultPermissions,
-            avatar: jellyfinUser?.PrimaryImageTag
-              ? `${jellyfinHost}/Users/${jellyfinUser.Id}/Images/Primary/?tag=${jellyfinUser.PrimaryImageTag}&quality=90`
-              : gravatarUrl(jellyfinUser?.Name ?? '', {
-                  default: 'mm',
-                  size: 200,
-                }),
+            avatar: `/avatarproxy/${jellyfinUser?.Id}`,
            userType:
              settings.main.mediaServerType === MediaServerType.JELLYFIN
                ? UserType.JELLYFIN
--- a/src/components/Blacklist/index.tsx
+++ b/src/components/Blacklist/index.tsx
@@ -268,6 +268,7 @@ const BlacklistedItem = ({ item, revalidateList }: BlacklistedItemProps) => {
      {title && title.backdropPath && (
        <div className="absolute inset-0 z-0 w-full bg-cover bg-center xl:w-2/3">
          <CachedImage
+            type="tmdb"
            src={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${title.backdropPath}`}
            alt=""
            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
@@ -293,6 +294,7 @@ const BlacklistedItem = ({ item, revalidateList }: BlacklistedItemProps) => {
            className="relative h-auto w-12 flex-shrink-0 scale-100 transform-gpu overflow-hidden rounded-md transition duration-300 hover:scale-105"
          >
            <CachedImage
+              type="tmdb"
              src={
                title?.posterPath
                  ? `https://image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`
@@ -355,6 +357,7 @@ const BlacklistedItem = ({ item, revalidateList }: BlacklistedItemProps) => {
                    <Link href={`/users/${item.user.id}`}>
                      <span className="group flex items-center truncate">
                        <CachedImage
+                          type="avatar"
                          src={item.user.avatar}
                          alt=""
                          className="avatar-sm ml-1.5"
--- a/src/components/CollectionDetails/index.tsx
+++ b/src/components/CollectionDetails/index.tsx
@@ -198,6 +198,7 @@ const CollectionDetails = ({ collection }: CollectionDetailsProps) => {
      {data.backdropPath && (
        <div className="media-page-bg-image">
          <CachedImage
+            type="tmdb"
            alt=""
            src={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath}`}
            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
@@ -228,6 +229,7 @@ const CollectionDetails = ({ collection }: CollectionDetailsProps) => {
      <div className="media-header">
        <div className="media-poster">
          <CachedImage
+            type="tmdb"
            src={
              data.posterPath
                ? `https://image.tmdb.org/t/p/w600_and_h900_bestv2${data.posterPath}`
--- a/src/components/Common/CachedImage/index.tsx
+++ b/src/components/Common/CachedImage/index.tsx
@@ -4,21 +4,31 @@ import Image from 'next/image';

 const imageLoader: ImageLoader = ({ src }) => src;

+export type CachedImageProps = ImageProps & {
+  src: string;
+  type: 'tmdb' | 'avatar';
+};
+
 /**
 * The CachedImage component should be used wherever
 * we want to offer the option to locally cache images.
 **/
-const CachedImage = ({ src, ...props }: ImageProps) => {
+const CachedImage = ({ src, type, ...props }: CachedImageProps) => {
  const { currentSettings } = useSettings();

-  let imageUrl = src;
+  let imageUrl: string;

-  if (typeof imageUrl === 'string' && imageUrl.startsWith('http')) {
-    const parsedUrl = new URL(imageUrl);
-
-    if (parsedUrl.host === 'image.tmdb.org' && currentSettings.cacheImages) {
-      imageUrl = imageUrl.replace('https://image.tmdb.org', '/imageproxy');
-    }
+  if (type === 'tmdb') {
+    // tmdb stuff
+    imageUrl =
+      currentSettings.cacheImages && !src.startsWith('/')
+        ? src.replace(/^https:\/\/image\.tmdb\.org\//, '/imageproxy/')
+        : src;
+  } else if (type === 'avatar') {
+    // jellyfin avatar (if any)
+    imageUrl = src;
+  } else {
+    return null;
  }

  return <Image unoptimized loader={imageLoader} src={imageUrl} {...props} />;
--- a/src/components/Common/ImageFader/index.tsx
+++ b/src/components/Common/ImageFader/index.tsx
@@ -61,6 +61,7 @@ const ImageFader: ForwardRefRenderFunction<HTMLDivElement, ImageFaderProps> = (
          {...props}
        >
          <CachedImage
+            type="tmdb"
            className="absolute inset-0 h-full w-full"
            alt=""
            src={imageUrl}
--- a/src/components/Common/Modal/index.tsx
+++ b/src/components/Common/Modal/index.tsx
@@ -123,6 +123,7 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
          {backdrop && (
            <div className="absolute top-0 left-0 right-0 z-0 h-64 max-h-full w-full">
              <CachedImage
+                type="tmdb"
                alt=""
                src={backdrop}
                style={{ width: '100%', height: '100%', objectFit: 'cover' }}
--- a/src/components/CompanyCard/index.tsx
+++ b/src/components/CompanyCard/index.tsx
@@ -33,6 +33,7 @@ const CompanyCard = ({ image, url, name }: CompanyCardProps) => {
    >
      <div className="relative h-full w-full">
        <CachedImage
+          type="tmdb"
          src={image}
          alt={name}
          className="relative z-40 h-full w-full"
--- a/src/components/GenreCard/index.tsx
+++ b/src/components/GenreCard/index.tsx
@@ -36,6 +36,7 @@ const GenreCard = ({ image, url, name, canExpand = false }: GenreCardProps) => {
      tabIndex={0}
    >
      <CachedImage
+        type="tmdb"
        src={image}
        alt=""
        style={{ width: '100%', height: '100%', objectFit: 'cover' }}
--- a/src/components/IssueDetails/IssueComment/index.tsx
+++ b/src/components/IssueDetails/IssueComment/index.tsx
@@ -1,4 +1,5 @@
 import Button from '@app/components/Common/Button';
+import CachedImage from '@app/components/Common/CachedImage';
 import Modal from '@app/components/Common/Modal';
 import { Permission, useUser } from '@app/hooks/useUser';
 import defineMessages from '@app/utils/defineMessages';
@@ -6,7 +7,6 @@ import { Menu, Transition } from '@headlessui/react';
 import { EllipsisVerticalIcon } from '@heroicons/react/24/solid';
 import type { default as IssueCommentType } from '@server/entity/IssueComment';
 import { Field, Form, Formik } from 'formik';
-import Image from 'next/image';
 import Link from 'next/link';
 import { Fragment, useState } from 'react';
 import { FormattedRelativeTime, useIntl } from 'react-intl';
@@ -88,7 +88,8 @@ const IssueComment = ({
        </Modal>
      </Transition>
      <Link href={isActiveUser ? '/profile' : `/users/${comment.user.id}`}>
-        <Image
+        <CachedImage
+          type="avatar"
          src={comment.user.avatar}
          alt=""
          className="h-10 w-10 scale-100 transform-gpu rounded-full object-cover ring-1 ring-gray-500 transition duration-300 hover:scale-105"
--- a/src/components/IssueDetails/index.tsx
+++ b/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 Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
@@ -218,6 +217,7 @@ const IssueDetails = () => {
      {data.backdropPath && (
        <div className="media-page-bg-image">
          <CachedImage
+            type="tmdb"
            alt=""
            src={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath}`}
            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
@@ -236,6 +236,7 @@ const IssueDetails = () => {
      <div className="media-header">
        <div className="media-poster">
          <CachedImage
+            type="tmdb"
            src={
              data.posterPath
                ? `https://image.tmdb.org/t/p/w600_and_h900_bestv2${data.posterPath}`
@@ -287,10 +288,11 @@ const IssueDetails = () => {
                  }
                  className="group ml-1 inline-flex h-full items-center xl:ml-1.5"
                >
-                  <Image
-                    className="mr-0.5 h-5 w-5 scale-100 transform-gpu rounded-full object-cover transition duration-300 group-hover:scale-105 xl:mr-1 xl:h-6 xl:w-6"
+                  <CachedImage
+                    type="avatar"
                    src={issueData.createdBy.avatar}
                    alt=""
+                    className="mr-0.5 h-5 w-5 scale-100 transform-gpu rounded-full object-cover transition duration-300 group-hover:scale-105 xl:mr-1 xl:h-6 xl:w-6"
                    width={20}
                    height={20}
                  />
--- a/src/components/IssueList/IssueItem/index.tsx
+++ b/src/components/IssueList/IssueItem/index.tsx
@@ -11,7 +11,6 @@ import { MediaType } from '@server/constants/media';
 import type Issue from '@server/entity/Issue';
 import type { MovieDetails } from '@server/models/Movie';
 import type { TvDetails } from '@server/models/Tv';
-import Image from 'next/image';
 import Link from 'next/link';
 import { useInView } from 'react-intersection-observer';
 import { FormattedRelativeTime, useIntl } from 'react-intl';
@@ -113,6 +112,7 @@ const IssueItem = ({ issue }: IssueItemProps) => {
      {title.backdropPath && (
        <div className="absolute inset-0 z-0 w-full bg-cover bg-center xl:w-2/3">
          <CachedImage
+            type="tmdb"
            src={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${title.backdropPath}`}
            alt=""
            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
@@ -138,6 +138,7 @@ const IssueItem = ({ issue }: IssueItemProps) => {
            className="relative h-auto w-12 flex-shrink-0 scale-100 transform-gpu overflow-hidden rounded-md transition duration-300 hover:scale-105"
          >
            <CachedImage
+              type="tmdb"
              src={
                title.posterPath
                  ? `https://image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`
@@ -226,7 +227,8 @@ const IssueItem = ({ issue }: IssueItemProps) => {
                        href={`/users/${issue.createdBy.id}`}
                        className="group flex items-center truncate"
                      >
-                        <Image
+                        <CachedImage
+                          type="avatar"
                          src={issue.createdBy.avatar}
                          alt=""
                          className="avatar-sm ml-1.5 object-cover"
--- a/src/components/Layout/MobileMenu/index.tsx
+++ b/src/components/Layout/MobileMenu/index.tsx
@@ -7,6 +7,7 @@ import {
  CogIcon,
  EllipsisHorizontalIcon,
  ExclamationTriangleIcon,
+  EyeSlashIcon,
  FilmIcon,
  SparklesIcon,
  TvIcon,
@@ -16,6 +17,7 @@ import {
  ClockIcon as FilledClockIcon,
  CogIcon as FilledCogIcon,
  ExclamationTriangleIcon as FilledExclamationTriangleIcon,
+  EyeSlashIcon as FilledEyeSlashIcon,
  FilmIcon as FilledFilmIcon,
  SparklesIcon as FilledSparklesIcon,
  TvIcon as FilledTvIcon,
@@ -84,6 +86,18 @@ const MobileMenu = () => {
      svgIconSelected: <FilledClockIcon className="h-6 w-6" />,
      activeRegExp: /^\/requests/,
    },
+    {
+      href: '/blacklist',
+      content: intl.formatMessage(menuMessages.blacklist),
+      svgIcon: <EyeSlashIcon className="h-6 w-6" />,
+      svgIconSelected: <FilledEyeSlashIcon className="h-6 w-6" />,
+      activeRegExp: /^\/blacklist/,
+      requiredPermission: [
+        Permission.MANAGE_BLACKLIST,
+        Permission.VIEW_BLACKLIST,
+      ],
+      permissionType: 'or',
+    },
    {
      href: '/issues',
      content: intl.formatMessage(menuMessages.issues),
--- a/src/components/Layout/UserDropdown/index.tsx
+++ b/src/components/Layout/UserDropdown/index.tsx
@@ -1,3 +1,4 @@
+import CachedImage from '@app/components/Common/CachedImage';
 import MiniQuotaDisplay from '@app/components/Layout/UserDropdown/MiniQuotaDisplay';
 import { useUser } from '@app/hooks/useUser';
 import defineMessages from '@app/utils/defineMessages';
@@ -7,7 +8,6 @@ import {
  ClockIcon,
 } from '@heroicons/react/24/outline';
 import { CogIcon, UserIcon } from '@heroicons/react/24/solid';
-import Image from 'next/image';
 import type { LinkProps } from 'next/link';
 import Link from 'next/link';
 import { forwardRef, Fragment } from 'react';
@@ -56,9 +56,10 @@ const UserDropdown = () => {
          className="flex max-w-xs items-center rounded-full text-sm ring-1 ring-gray-700 hover:ring-gray-500 focus:outline-none focus:ring-gray-500"
          data-testid="user-menu"
        >
-          <Image
+          <CachedImage
+            type="avatar"
            className="h-8 w-8 rounded-full object-cover sm:h-10 sm:w-10"
-            src={user?.avatar || ''}
+            src={user ? user.avatar : ''}
            alt=""
            width={40}
            height={40}
@@ -79,9 +80,10 @@ const UserDropdown = () => {
          <div className="divide-y divide-gray-700 rounded-md bg-gray-800 bg-opacity-80 ring-1 ring-gray-700 backdrop-blur">
            <div className="flex flex-col space-y-4 px-4 py-4">
              <div className="flex items-center space-x-2">
-                <Image
+                <CachedImage
+                  type="avatar"
                  className="h-8 w-8 rounded-full object-cover sm:h-10 sm:w-10"
-                  src={user?.avatar || ''}
+                  src={user ? user.avatar : ''}
                  alt=""
                  width={40}
                  height={40}
--- a/src/components/ManageSlideOver/index.tsx
+++ b/src/components/ManageSlideOver/index.tsx
@@ -1,5 +1,6 @@
 import BlacklistBlock from '@app/components/BlacklistBlock';
 import Button from '@app/components/Common/Button';
+import CachedImage from '@app/components/Common/CachedImage';
 import ConfirmButton from '@app/components/Common/ConfirmButton';
 import SlideOver from '@app/components/Common/SlideOver';
 import Tooltip from '@app/components/Common/Tooltip';
@@ -27,7 +28,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 Image from 'next/image';
 import Link from 'next/link';
 import { useIntl } from 'react-intl';
 import useSWR from 'swr';
@@ -368,7 +368,8 @@ const ManageSlideOver = ({
                                    key={`watch-user-${user.id}`}
                                    content={user.displayName}
                                  >
-                                    <Image
+                                    <CachedImage
+                                      type="avatar"
                                      src={user.avatar}
                                      alt={user.displayName}
                                      className="h-8 w-8 scale-100 transform-gpu rounded-full object-cover ring-1 ring-gray-500 transition duration-300 hover:scale-105"
@@ -529,7 +530,8 @@ const ManageSlideOver = ({
                                    key={`watch-user-${user.id}`}
                                    content={user.displayName}
                                  >
-                                    <Image
+                                    <CachedImage
+                                      type="avatar"
                                      src={user.avatar}
                                      alt={user.displayName}
                                      className="h-8 w-8 scale-100 transform-gpu rounded-full object-cover ring-1 ring-gray-500 transition duration-300 hover:scale-105"
--- a/src/components/MovieDetails/index.tsx
+++ b/src/components/MovieDetails/index.tsx
@@ -448,6 +448,7 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
      {data.backdropPath && (
        <div className="media-page-bg-image">
          <CachedImage
+            type="tmdb"
            alt=""
            src={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath}`}
            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
@@ -494,6 +495,7 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
      <div className="media-header">
        <div className="media-poster">
          <CachedImage
+            type="tmdb"
            src={
              data.posterPath
                ? `https://image.tmdb.org/t/p/w600_and_h900_bestv2${data.posterPath}`
@@ -741,6 +743,7 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
                <div className="group relative z-0 scale-100 transform-gpu cursor-pointer overflow-hidden rounded-lg bg-gray-800 bg-cover bg-center shadow-md ring-1 ring-gray-700 transition duration-300 hover:scale-105 hover:ring-gray-500">
                  <div className="absolute inset-0 z-0">
                    <CachedImage
+                      type="tmdb"
                      src={`https://image.tmdb.org/t/p/w1440_and_h320_multi_faces/${data.collection.backdropPath}`}
                      alt=""
                      style={{
--- a/src/components/PersonCard/index.tsx
+++ b/src/components/PersonCard/index.tsx
@@ -51,6 +51,7 @@ const PersonCard = ({
              {profilePath ? (
                <div className="relative h-full w-3/4 overflow-hidden rounded-full ring-1 ring-gray-700">
                  <CachedImage
+                    type="tmdb"
                    src={`https://image.tmdb.org/t/p/w600_and_h900_bestv2${profilePath}`}
                    alt=""
                    style={{
--- a/src/components/PersonDetails/index.tsx
+++ b/src/components/PersonDetails/index.tsx
@@ -227,6 +227,7 @@ const PersonDetails = () => {
        {data.profilePath && (
          <div className="relative mb-6 mr-0 h-36 w-36 flex-shrink-0 overflow-hidden rounded-full ring-1 ring-gray-700 lg:mb-0 lg:mr-6 lg:h-44 lg:w-44">
            <CachedImage
+              type="tmdb"
              src={`https://image.tmdb.org/t/p/w600_and_h900_bestv2${data.profilePath}`}
              alt=""
              style={{ width: '100%', height: '100%', objectFit: 'cover' }}
--- a/src/components/RequestCard/index.tsx
+++ b/src/components/RequestCard/index.tsx
@@ -22,7 +22,6 @@ 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';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
@@ -116,7 +115,8 @@ const RequestCardError = ({ requestData }: RequestCardErrorProps) => {
                      className="group flex items-center"
                    >
                      <span className="avatar-sm">
-                        <Image
+                        <CachedImage
+                          type="avatar"
                          src={requestData.requestedBy.avatar}
                          alt=""
                          className="avatar-sm object-cover"
@@ -346,6 +346,7 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
        {title.backdropPath && (
          <div className="absolute inset-0 z-0">
            <CachedImage
+              type="tmdb"
              alt=""
              src={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${title.backdropPath}`}
              style={{ width: '100%', height: '100%', objectFit: 'cover' }}
@@ -390,7 +391,8 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
                className="group flex items-center"
              >
                <span className="avatar-sm">
-                  <Image
+                  <CachedImage
+                    type="avatar"
                    src={requestData.requestedBy.avatar}
                    alt=""
                    className="avatar-sm object-cover"
@@ -603,6 +605,7 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
          className="w-20 flex-shrink-0 scale-100 transform-gpu cursor-pointer overflow-hidden rounded-md shadow-sm transition duration-300 hover:scale-105 hover:shadow-md sm:w-28"
        >
          <CachedImage
+            type="tmdb"
            src={
              title.posterPath
                ? `https://image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`
--- a/src/components/RequestList/RequestItem/index.tsx
+++ b/src/components/RequestList/RequestItem/index.tsx
@@ -21,7 +21,6 @@ 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';
 import Link from 'next/link';
 import { useState } from 'react';
 import { useInView } from 'react-intersection-observer';
@@ -43,6 +42,7 @@ const messages = defineMessages('components.RequestList.RequestItem', {
  tmdbid: 'TMDB ID',
  tvdbid: 'TheTVDB ID',
  unknowntitle: 'Unknown Title',
+  removearr: 'Remove from {arr}',
  profileName: 'Profile',
 });

@@ -190,7 +190,8 @@ const RequestItemError = ({
                            className="group flex items-center truncate"
                          >
                            <span className="avatar-sm ml-1.5">
-                              <Image
+                              <CachedImage
+                                type="avatar"
                                src={requestData.requestedBy.avatar}
                                alt=""
                                className="avatar-sm object-cover"
@@ -249,7 +250,8 @@ const RequestItemError = ({
                          className="group flex items-center truncate"
                        >
                          <span className="avatar-sm ml-1.5">
-                            <Image
+                            <CachedImage
+                              type="avatar"
                              src={requestData.modifiedBy.avatar}
                              alt=""
                              className="avatar-sm object-cover"
@@ -342,6 +344,18 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
    revalidateList();
  };

+  const deleteMediaFile = async () => {
+    if (request.media) {
+      await fetch(`/api/v1/media/${request.media.id}/file`, {
+        method: 'DELETE',
+      });
+      await fetch(`/api/v1/media/${request.media.id}`, {
+        method: 'DELETE',
+      });
+      revalidateList();
+    }
+  };
+
  const retryRequest = async () => {
    setRetrying(true);

@@ -406,6 +420,7 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
        {title.backdropPath && (
          <div className="absolute inset-0 z-0 w-full bg-cover bg-center xl:w-2/3">
            <CachedImage
+              type="tmdb"
              src={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${title.backdropPath}`}
              alt=""
              style={{ width: '100%', height: '100%', objectFit: 'cover' }}
@@ -431,6 +446,7 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
              className="relative h-auto w-12 flex-shrink-0 scale-100 transform-gpu overflow-hidden rounded-md transition duration-300 hover:scale-105"
            >
              <CachedImage
+                type="tmdb"
                src={
                  title.posterPath
                    ? `https://image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`
@@ -557,7 +573,8 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
                          className="group flex items-center truncate"
                        >
                          <span className="avatar-sm ml-1.5">
-                            <Image
+                            <CachedImage
+                              type="avatar"
                              src={requestData.requestedBy.avatar}
                              alt=""
                              className="avatar-sm object-cover"
@@ -616,8 +633,9 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
                        className="group flex items-center truncate"
                      >
                        <span className="avatar-sm ml-1.5">
-                          <Image
-                            src={requestData.requestedBy.avatar}
+                          <CachedImage
+                            type="avatar"
+                            src={requestData.modifiedBy.avatar}
                            alt=""
                            className="avatar-sm object-cover"
                            width={20}
@@ -667,14 +685,28 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
            )}
          {requestData.status !== MediaRequestStatus.PENDING &&
            hasPermission(Permission.MANAGE_REQUESTS) && (
-              <ConfirmButton
-                onClick={() => deleteRequest()}
-                confirmText={intl.formatMessage(globalMessages.areyousure)}
-                className="w-full"
-              >
-                <TrashIcon />
-                <span>{intl.formatMessage(messages.deleterequest)}</span>
-              </ConfirmButton>
+              <>
+                <ConfirmButton
+                  onClick={() => deleteRequest()}
+                  confirmText={intl.formatMessage(globalMessages.areyousure)}
+                  className="w-full"
+                >
+                  <TrashIcon />
+                  <span>{intl.formatMessage(messages.deleterequest)}</span>
+                </ConfirmButton>
+                <ConfirmButton
+                  onClick={() => deleteMediaFile()}
+                  confirmText={intl.formatMessage(globalMessages.areyousure)}
+                  className="w-full"
+                >
+                  <TrashIcon />
+                  <span>
+                    {intl.formatMessage(messages.removearr, {
+                      arr: request.type === 'movie' ? 'Radarr' : 'Sonarr',
+                    })}
+                  </span>
+                </ConfirmButton>
+              </>
            )}
          {requestData.status === MediaRequestStatus.PENDING &&
            hasPermission(Permission.MANAGE_REQUESTS) && (
--- a/src/components/RequestModal/AdvancedRequester/index.tsx
+++ b/src/components/RequestModal/AdvancedRequester/index.tsx
@@ -1,4 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
+import CachedImage from '@app/components/Common/CachedImage';
 import { SmallLoadingSpinner } from '@app/components/Common/LoadingSpinner';
 import type { User } from '@app/hooks/useUser';
 import { Permission, useUser } from '@app/hooks/useUser';
@@ -14,7 +15,6 @@ import type {
 import type { UserResultsResponse } from '@server/interfaces/api/userInterfaces';
 import { hasPermission } from '@server/lib/permissions';
 import { isEqual } from 'lodash';
-import Image from 'next/image';
 import { useEffect, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
 import Select from 'react-select';
@@ -561,7 +561,8 @@ const AdvancedRequester = ({
                    <span className="inline-block w-full rounded-md shadow-sm">
                      <Listbox.Button className="focus:shadow-outline-blue relative w-full cursor-default rounded-md border border-gray-700 bg-gray-800 py-2 pl-3 pr-10 text-left text-white transition duration-150 ease-in-out focus:border-blue-300 focus:outline-none sm:text-sm sm:leading-5">
                        <span className="flex items-center">
-                          <Image
+                          <CachedImage
+                            type="avatar"
                            src={selectedUser.avatar}
                            alt=""
                            className="h-6 w-6 flex-shrink-0 rounded-full object-cover"
@@ -613,7 +614,8 @@ const AdvancedRequester = ({
                                    selected ? 'font-semibold' : 'font-normal'
                                  } flex items-center`}
                                >
-                                  <Image
+                                  <CachedImage
+                                    type="avatar"
                                    src={user.avatar}
                                    alt=""
                                    className="h-6 w-6 flex-shrink-0 rounded-full object-cover"
--- a/src/components/RequestModal/CollectionRequestModal.tsx
+++ b/src/components/RequestModal/CollectionRequestModal.tsx
@@ -437,6 +437,7 @@ const CollectionRequestModal = ({
                          >
                            <div className="relative h-auto w-10 flex-shrink-0 overflow-hidden rounded-md">
                              <CachedImage
+                                type="tmdb"
                                src={
                                  part.posterPath
                                    ? `https://image.tmdb.org/t/p/w600_and_h900_bestv2${part.posterPath}`
--- a/src/components/Selector/index.tsx
+++ b/src/components/Selector/index.tsx
@@ -452,6 +452,7 @@ export const WatchProviderSelector = ({
                    tabIndex={0}
                  >
                    <CachedImage
+                      type="tmdb"
                      src={`https://image.tmdb.org/t/p/original${provider.logoPath}`}
                      alt=""
                      style={{
@@ -497,6 +498,7 @@ export const WatchProviderSelector = ({
                      tabIndex={0}
                    >
                      <CachedImage
+                        type="tmdb"
                        src={`https://image.tmdb.org/t/p/original${provider.logoPath}`}
                        alt=""
                        style={{
--- a/src/components/Settings/SettingsJobsCache/index.tsx
+++ b/src/components/Settings/SettingsJobsCache/index.tsx
@@ -82,6 +82,7 @@ const messages: { [messageName: string]: MessageDescriptor } = defineMessages(
      'When enabled in settings, Jellyseerr will proxy and cache images from pre-configured external sources. Cached images are saved into your config folder. You can find the files in <code>{appDataPath}/cache/images</code>.',
    imagecachecount: 'Images Cached',
    imagecachesize: 'Total Cache Size',
+    usersavatars: "Users' Avatars",
  }
 );

@@ -573,6 +574,19 @@ const SettingsJobs = () => {
                {formatBytes(cacheData?.imageCache.tmdb.size ?? 0)}
              </Table.TD>
            </tr>
+            <tr>
+              <Table.TD>
+                {intl.formatMessage(messages.usersavatars)} (avatar)
+              </Table.TD>
+              <Table.TD>
+                {intl.formatNumber(
+                  cacheData?.imageCache.avatar.imageCount ?? 0
+                )}
+              </Table.TD>
+              <Table.TD>
+                {formatBytes(cacheData?.imageCache.avatar.size ?? 0)}
+              </Table.TD>
+            </tr>
          </Table.TBody>
        </Table>
      </div>
--- a/src/components/TitleCard/index.tsx
+++ b/src/components/TitleCard/index.tsx
@@ -346,6 +346,7 @@ const TitleCard = ({
      >
        <div className="absolute inset-0 h-full w-full overflow-hidden">
          <CachedImage
+            type="tmdb"
            className="absolute inset-0 h-full w-full"
            alt=""
            src={
--- a/src/components/TvDetails/index.tsx
+++ b/src/components/TvDetails/index.tsx
@@ -471,6 +471,7 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
      {data.backdropPath && (
        <div className="media-page-bg-image">
          <CachedImage
+            type="tmdb"
            alt=""
            src={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath}`}
            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
@@ -527,6 +528,7 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
      <div className="media-header">
        <div className="media-poster">
          <CachedImage
+            type="tmdb"
            src={
              data.posterPath
                ? `https://image.tmdb.org/t/p/w600_and_h900_bestv2${data.posterPath}`
--- a/src/components/UserList/JellyfinImportModal.tsx
+++ b/src/components/UserList/JellyfinImportModal.tsx
@@ -1,11 +1,11 @@
 import Alert from '@app/components/Common/Alert';
+import CachedImage from '@app/components/Common/CachedImage';
 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 Image from 'next/image';
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
@@ -249,7 +249,8 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
                            </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
+                                <CachedImage
+                                  type="avatar"
                                  className="h-10 w-10 flex-shrink-0 rounded-full"
                                  src={user.thumb}
                                  alt=""
--- a/src/components/UserList/index.tsx
+++ b/src/components/UserList/index.tsx
@@ -1,6 +1,7 @@
 import Alert from '@app/components/Common/Alert';
 import Badge from '@app/components/Common/Badge';
 import Button from '@app/components/Common/Button';
+import CachedImage from '@app/components/Common/CachedImage';
 import Header from '@app/components/Common/Header';
 import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import Modal from '@app/components/Common/Modal';
@@ -28,7 +29,6 @@ import { MediaServerType } from '@server/constants/server';
 import type { UserResultsResponse } from '@server/interfaces/api/userInterfaces';
 import { hasPermission } from '@server/lib/permissions';
 import { Field, Form, Formik } from 'formik';
-import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
@@ -633,7 +633,8 @@ const UserList = () => {
                    href={`/users/${user.id}`}
                    className="h-10 w-10 flex-shrink-0"
                  >
-                    <Image
+                    <CachedImage
+                      type="avatar"
                      className="h-10 w-10 rounded-full object-cover"
                      src={user.avatar}
                      alt=""
--- a/src/components/UserProfile/ProfileHeader/index.tsx
+++ b/src/components/UserProfile/ProfileHeader/index.tsx
@@ -1,9 +1,9 @@
 import Button from '@app/components/Common/Button';
+import CachedImage from '@app/components/Common/CachedImage';
 import type { User } from '@app/hooks/useUser';
 import { Permission, useUser } from '@app/hooks/useUser';
 import defineMessages from '@app/utils/defineMessages';
 import { CogIcon, UserIcon } from '@heroicons/react/24/solid';
-import Image from 'next/image';
 import Link from 'next/link';
 import { useIntl } from 'react-intl';

@@ -42,7 +42,8 @@ const ProfileHeader = ({ user, isSettingsPage }: ProfileHeaderProps) => {
      <div className="flex items-end justify-items-end space-x-5">
        <div className="flex-shrink-0">
          <div className="relative">
-            <Image
+            <CachedImage
+              type="avatar"
              className="h-24 w-24 rounded-full bg-gray-600 object-cover ring-1 ring-gray-700"
              src={user.avatar}
              alt=""
--- a/src/i18n/locale/en.json
+++ b/src/i18n/locale/en.json
@@ -298,6 +298,7 @@
  "components.ManageSlideOver.plays": "<strong>{playCount, number}</strong> {playCount, plural, one {play} other {plays}}",
  "components.ManageSlideOver.removearr": "Remove from {arr}",
  "components.ManageSlideOver.removearr4k": "Remove from 4K {arr}",
+  "components.RequestList.RequestItem.removearr": "Remove from {arr}",
  "components.ManageSlideOver.tvshow": "series",
  "components.MediaSlider.ShowMoreCard.seemore": "See More",
  "components.MovieDetails.MovieCast.fullcast": "Full Cast",
@@ -849,6 +850,7 @@
  "components.Settings.SettingsJobsCache.runnow": "Run Now",
  "components.Settings.SettingsJobsCache.sonarr-scan": "Sonarr Scan",
  "components.Settings.SettingsJobsCache.unknownJob": "Unknown Job",
+  "components.Settings.SettingsJobsCache.usersavatars": "Users' Avatars",
  "components.Settings.SettingsLogs.copiedLogMessage": "Copied log message to clipboard.",
  "components.Settings.SettingsLogs.copyToClipboard": "Copy to Clipboard",
  "components.Settings.SettingsLogs.extraData": "Additional Data",
@@ -968,6 +970,7 @@
  "components.Settings.address": "Address",
  "components.Settings.addsonarr": "Add Sonarr Server",
  "components.Settings.advancedTooltip": "Incorrectly configuring this setting may result in broken functionality",
+  "components.Settings.apiKey": "API key",
  "components.Settings.cancelscan": "Cancel Scan",
  "components.Settings.copied": "Copied API key to clipboard.",
  "components.Settings.currentlibrary": "Current Library: {name}",
@@ -1028,6 +1031,7 @@
  "components.Settings.save": "Save Changes",
  "components.Settings.saving": "Saving…",
  "components.Settings.scan": "Sync Libraries",
+  "components.Settings.scanbackground": "Scanning will run in the background. You can continue the setup process in the meantime.",
  "components.Settings.scanning": "Syncing…",
  "components.Settings.serverLocal": "local",
  "components.Settings.serverRemote": "remote",
@@ -1048,6 +1052,7 @@
  "components.Settings.tautulliSettings": "Tautulli Settings",
  "components.Settings.tautulliSettingsDescription": "Optionally configure the settings for your Tautulli server. Jellyseerr fetches watch history data for your Plex media from Tautulli.",
  "components.Settings.timeout": "Timeout",
+  "components.Settings.tip": "Tip",
  "components.Settings.toastPlexConnecting": "Attempting to connect to Plex…",
  "components.Settings.toastPlexConnectingFailure": "Failed to connect to Plex.",
  "components.Settings.toastPlexConnectingSuccess": "Plex connection established successfully!",
@@ -1077,16 +1082,14 @@
  "components.Setup.continue": "Continue",
  "components.Setup.finish": "Finish Setup",
  "components.Setup.finishing": "Finishing…",
-  "components.Setup.scanbackground": "Scanning will run in the background. You can continue the setup process in the meantime.",
  "components.Setup.servertype": "Choose Server Type",
  "components.Setup.setup": "Setup",
-  "components.Setup.signin": "Sign In",
+  "components.Setup.signin": "Sign in to your account",
  "components.Setup.signinMessage": "Get started by signing in",
  "components.Setup.signinWithEmby": "Enter your Emby details",
  "components.Setup.signinWithJellyfin": "Enter your Jellyfin details",
  "components.Setup.signinWithPlex": "Enter your Plex details",
  "components.Setup.subtitle": "Get started by choosing your media server",
-  "components.Setup.tip": "Tip",
  "components.Setup.welcome": "Welcome to Jellyseerr",
  "components.StatusBadge.managemedia": "Manage {mediaType}",
  "components.StatusBadge.openinarr": "Open in {arr}",
@@ -1231,6 +1234,7 @@
  "components.UserProfile.UserSettings.UserGeneralSettings.saving": "Saving…",
  "components.UserProfile.UserSettings.UserGeneralSettings.seriesrequestlimit": "Series Request Limit",
  "components.UserProfile.UserSettings.UserGeneralSettings.toastSettingsFailure": "Something went wrong while saving settings.",
+  "components.UserProfile.UserSettings.UserGeneralSettings.toastSettingsFailureEmail": "This email is already taken!",
  "components.UserProfile.UserSettings.UserGeneralSettings.toastSettingsSuccess": "Settings saved successfully!",
  "components.UserProfile.UserSettings.UserGeneralSettings.user": "User",
  "components.UserProfile.UserSettings.UserGeneralSettings.validationDiscordId": "You must provide a valid Discord user ID",
@@ -1310,6 +1314,7 @@
  "components.UserProfile.seriesrequest": "Series Requests",
  "components.UserProfile.totalrequests": "Total Requests",
  "components.UserProfile.unlimited": "Unlimited",
+  "i18n.addToBlacklist": "Add to Blacklist",
  "i18n.advanced": "Advanced",
  "i18n.all": "All",
  "i18n.approve": "Approve",
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -12,6 +12,7 @@ import { SettingsProvider } from '@app/context/SettingsContext';
 import { UserContext } from '@app/context/UserContext';
 import type { User } from '@app/hooks/useUser';
 import '@app/styles/globals.css';
+import '@app/utils/fetchOverride';
 import { polyfillIntl } from '@app/utils/polyfillIntl';
 import { MediaServerType } from '@server/constants/server';
 import type { PublicSettingsResponse } from '@server/interfaces/api/settingsInterfaces';
--- a/src/utils/fetchOverride.ts
+++ b/src/utils/fetchOverride.ts
@@ -0,0 +1,46 @@
+const getCsrfToken = (): string | null => {
+  if (typeof window !== 'undefined') {
+    const match = document.cookie.match(/XSRF-TOKEN=([^;]+)/);
+    return match ? decodeURIComponent(match[1]) : null;
+  }
+  return null;
+};
+
+const isSameOrigin = (url: RequestInfo | URL): boolean => {
+  const parsedUrl = new URL(
+    url instanceof Request ? url.url : url.toString(),
+    window.location.origin
+  );
+  return parsedUrl.origin === window.location.origin;
+};
+
+// We are using a custom fetch implementation to add the X-XSRF-TOKEN heade
+// to all requests. This is required when CSRF protection is enabled.
+if (typeof window !== 'undefined') {
+  const originalFetch: typeof fetch = window.fetch;
+
+  (window as typeof globalThis).fetch = async (
+    input: RequestInfo | URL,
+    init?: RequestInit
+  ): Promise<Response> => {
+    if (!isSameOrigin(input)) {
+      return originalFetch(input, init);
+    }
+
+    const csrfToken = getCsrfToken();
+
+    const headers = {
+      ...(init?.headers || {}),
+      ...(csrfToken ? { 'XSRF-TOKEN': csrfToken } : {}),
+    };
+
+    const newInit: RequestInit = {
+      ...init,
+      headers,
+    };
+
+    return originalFetch(input, newInit);
+  };
+}
+
+export {};
Author	SHA1	Message	Date
Gauthier	329527bd03	fix: update avatar on new login	2024-10-24 11:38:06 +02:00
Gauthier	269fd69dff	fix: cache Jellyfin/Emby avatars from API Previously, avatars were cached using image links from Jellyfin/Emby. Now, avatar images are obtained directly from the API to avoid some configuration bugs.	2024-10-22 00:28:31 +02:00
Gauthier	a2b3408c9a	feat: exit Jellyseerr when migration fails (#1026 )	2024-10-18 18:24:29 +08:00
Fallenbagel	cbb1a74526	fix: fixes wrong avatar rendered for the modifiedBy user in request list (#1028 ) This fixes an issue where when the request is modified it was showing the avatar of the requester instead of the modifiedBy user fix #1017	2024-10-18 06:28:42 +08:00
Fallenbagel	26c37ec067	docs(buildfromsource): remove latest/develop tabs and update instructions to support 2.0.0 (#1021 ) re #1020	2024-10-17 23:12:41 +08:00
Gauthier	4e48fdf2cb	fix: rewrite avatarproxy and CachedImage (#1016 ) * fix: rewrite avatarproxy and CachedImage Avatar proxy was allowing every request to be proxied, no matter the original ressource's origin or filetype. This PR fixes it be allowing only relevant resources to be cached, i.e. Jellyfin/Emby images and TMDB images. fix #1012, #1013 * fix: resolve CodeQL error * fix: resolve CodeQL error * fix: resolve review comments * fix: resolve review comment * fix: resolve CodeQL error * fix: update imageproxy path	2024-10-17 21:24:15 +08:00
Gauthier	a351264b87	fix: handle non-existent rottentomatoes rating (#1018 ) This fixes a bug where some media don't have any rottentomatoes ratings.	2024-10-17 18:37:19 +08:00
allcontributors[bot]	9de304d17a	docs: add M0NsTeRRR as a contributor for security (#1015 ) * docs: update README.md [skip ci] * docs: update .all-contributorsrc [skip ci] --------- Co-authored-by: allcontributors[bot] <46447321+allcontributors[bot]@users.noreply.github.com>	2024-10-17 07:25:36 +08:00
Fallenbagel	4945b54298	fix: fetch override to attach XSRF token to fix csrfProtection issue (#1014 ) During the migration from Axios to fetch, we overlooked the fact that Axios automatically handled CSRF tokens, while fetch does not. When CSRF protection was turned on, requests were failing with an "invalid CSRF token" error for users accessing the app even via HTTPS. This commit overrides fetch to ensure that the CSRF token is included in all requests. fix #1011	2024-10-17 07:25:06 +08:00
Fallenbagel	a0f80fe764	fix: use jellyfinMediaId4k for mediaUrl4k (#1006 ) Fixes the issue where mediaUrl4K was still using the non-4k mediaId despite having the correct 4k Id stored. fix #520	2024-10-16 03:50:21 +08:00
Gauthier	92ba26207d	feat: refresh monitored downloads before getting queue items (#994 ) Currently, we sync with sonarr/radarr with whatever value those return. Radarr/Sonarr syncs the activity from the download clients every few minutes. This leads to inaccurate estimated download times, because of the refresh delay with Jellyseerr and the arrs. This PR fixes this by making a request to the arrs to refresh the monitored downloads just before we get these downloads information. re #866	2024-10-10 11:37:08 +02:00
Gauthier	96e1d40304	fix(session): set the correct TTL for the cookie store (#992 ) The time-to-live (TTL) of cookies stored in the database was incorrect because the connect-typeorm library takes a TTL in seconds and not milliseconds, making cookies valid for ~82 years instead of 30 days. fix #991	2024-10-02 20:59:35 +02:00
Thomas Loubiou	a5d22ba5b8	feat: allow request managers to delete data from sonarr/radarr (#644 ) * feat: allow requests managers to delete media files * fix(i18n): add missing translations * fix(i18n): remove french translation * refactor: use fetch API	2024-09-30 18:56:25 +02:00
Gauthier	f390da4866	fix(blacklist): add blacklist to mobile menu (#980 ) * fix(blacklist): add blacklist to mobile menu The "Blacklist" menu was only available in the desktop sidebar, not in the mobile menu. fix #979 * fix: export translations	2024-09-25 21:25:44 +02:00
Joaquin Olivero	edfd80444c	refactor: Proxy and cache avatar images (#907 ) * refactor: proxy and cache user avatar images * fix: extract keys * fix: set avatar image URL * fix: show the correct avatar in the list of available users in advanced request * fix(s): set correct src URL for cached image * fix: remove unexpired unused image when a user changes their avatar * fix: requested changes * refactor: use 'mime' package to detmerine file extension * style: grammar * refactor: checks if the default avatar is cached to avoid creating duplicates for different users * fix: fix vulnerability * fix: fix incomplete URL substring sanitization * refactor: only cache avatar with http url protocol * fix: remove log and correctly set the if statement for the cached image component * fix: avatar images not showing on issues page * style: formatting --------- Co-authored-by: JoaquinOlivero <joaquin.olivero@hotmail.com>	2024-09-19 10:38:14 +08:00