fix: use undici proxy agent

package.json

@@ -93,7 +93,8 @@
     "sqlite3": "5.1.4",
     "swagger-ui-express": "4.6.2",
     "swr": "2.2.5",
-    "typeorm": "0.3.12",
+    "typeorm": "0.3.11",
+    "undici": "^6.20.1",
     "web-push": "3.5.0",
     "winston": "3.8.2",
     "winston-daily-rotate-file": "4.7.1",

pnpm-lock.yaml

@@ -49,7 +49,7 @@ importers:
         version: 2.11.0
       connect-typeorm:
         specifier: 1.1.4
-        version: 1.1.4(typeorm@0.3.12(sqlite3@5.1.4(encoding@0.1.13))(ts-node@10.9.1(@swc/core@1.6.5(@swc/helpers@0.5.11))(@types/node@20.14.8)(typescript@4.9.5)))
+        version: 1.1.4(typeorm@0.3.11(sqlite3@5.1.4(encoding@0.1.13))(ts-node@10.9.1(@swc/core@1.6.5(@swc/helpers@0.5.11))(@types/node@20.14.8)(typescript@4.9.5)))
       cookie-parser:
         specifier: 1.4.6
         version: 1.4.6
@@ -192,8 +192,11 @@ importers:
         specifier: 2.2.5
         version: 2.2.5(react@18.3.1)
       typeorm:
-        specifier: 0.3.12
-        version: 0.3.12(sqlite3@5.1.4(encoding@0.1.13))(ts-node@10.9.1(@swc/core@1.6.5(@swc/helpers@0.5.11))(@types/node@20.14.8)(typescript@4.9.5))
+        specifier: 0.3.11
+        version: 0.3.11(sqlite3@5.1.4(encoding@0.1.13))(ts-node@10.9.1(@swc/core@1.6.5(@swc/helpers@0.5.11))(@types/node@20.14.8)(typescript@4.9.5))
+      undici:
+        specifier: ^6.20.1
+        version: 6.20.1
       web-push:
         specifier: 3.5.0
         version: 3.5.0
@@ -4264,10 +4267,6 @@ packages:
     resolution: {integrity: sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==}
     engines: {node: '>=0.11'}
 
-  date-fns@2.30.0:
-    resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
-    engines: {node: '>=0.11'}
-
   dateformat@3.0.3:
     resolution: {integrity: sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==}
 
@@ -5389,8 +5388,8 @@ packages:
     resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
     engines: {node: '>= 6'}
 
-  https-proxy-agent@7.0.4:
-    resolution: {integrity: sha512-wlwpilI7YdjSkWaQ/7omYBMTliDcmCN8OLihO6I9B86g06lMyAoqgoDpV0XqoaPOKj+0DIdAvnsWfyAAhmimcg==}
+  https-proxy-agent@7.0.5:
+    resolution: {integrity: sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==}
     engines: {node: '>= 14'}
 
   human-signals@1.1.1:
@@ -6554,11 +6553,6 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
-  mkdirp@2.1.6:
-    resolution: {integrity: sha512-+hEnITedc8LAtIP9u3HJDFIdcLV2vXP33sqLLIzkv1Db1zO/1OxbvYf0Y1OC/S/Qo5dxHXepofhmxL02PsKe+A==}
-    engines: {node: '>=10'}
-    hasBin: true
-
   modify-values@1.0.1:
     resolution: {integrity: sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==}
     engines: {node: '>=0.10.0'}
@@ -7730,9 +7724,6 @@ packages:
   reflect-metadata@0.1.13:
     resolution: {integrity: sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==}
 
-  reflect-metadata@0.1.14:
-    resolution: {integrity: sha512-ZhYeb6nRaXCfhnndflDK8qI6ZQ/YcWZCISRAWICW9XYqMUwjZM9Z0DveWX/ABN01oxSHwVxKQmxeYZSsm0jh5A==}
-
   reflect.getprototypeof@1.0.6:
     resolution: {integrity: sha512-fmfw4XgoDke3kdI6h4xcUz1dG8uaiv5q9gcEwLS4Pnth2kxT+GZ7YehS1JTMGBQmtV7Y4GFGbs2re2NqhdozUg==}
     engines: {node: '>= 0.4'}
@@ -8670,8 +8661,8 @@ packages:
   typedarray@0.0.6:
     resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==}
 
-  typeorm@0.3.12:
-    resolution: {integrity: sha512-sYSxBmCf1nJLLTcYtwqZ+lQIRtLPyUoO93rHTOKk9vJCyT4UfRtU7oRsJvfvKP3nnZTD1hzz2SEy2zwPEN6OyA==}
+  typeorm@0.3.11:
+    resolution: {integrity: sha512-pzdOyWbVuz/z8Ww6gqvBW4nylsM0KLdUCDExr2gR20/x1khGSVxQkjNV/3YqliG90jrWzrknYbYscpk8yxFJVg==}
     engines: {node: '>= 12.9.0'}
     hasBin: true
     peerDependencies:
@@ -8682,7 +8673,7 @@ packages:
       ioredis: ^5.0.4
       mongodb: ^3.6.0
       mssql: ^7.3.0
-      mysql2: ^2.2.5 || ^3.0.1
+      mysql2: ^2.2.5
       oracledb: ^5.1.0
       pg: ^8.5.1
       pg-native: ^3.0.0
@@ -8768,6 +8759,10 @@ packages:
   undici-types@5.26.5:
     resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
 
+  undici@6.20.1:
+    resolution: {integrity: sha512-AjQF1QsmqfJys+LXfGTNum+qw4S88CojRInG/6t31W/1fk6G59s92bnAvGz5Cmur+kQv2SURXEvvudLmbrE8QA==}
+    engines: {node: '>=18.17'}
+
   unicode-canonical-property-names-ecmascript@2.0.0:
     resolution: {integrity: sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==}
     engines: {node: '>=4'}
@@ -12310,7 +12305,7 @@ snapshots:
       fs-extra: 11.2.0
       globby: 11.1.0
       http-proxy-agent: 7.0.2
-      https-proxy-agent: 7.0.4
+      https-proxy-agent: 7.0.5
       issue-parser: 6.0.0
       lodash: 4.17.21
       mime: 3.0.0
@@ -13824,13 +13819,13 @@ snapshots:
       ini: 1.3.8
       proto-list: 1.2.4
 
-  connect-typeorm@1.1.4(typeorm@0.3.12(sqlite3@5.1.4(encoding@0.1.13))(ts-node@10.9.1(@swc/core@1.6.5(@swc/helpers@0.5.11))(@types/node@20.14.8)(typescript@4.9.5))):
+  connect-typeorm@1.1.4(typeorm@0.3.11(sqlite3@5.1.4(encoding@0.1.13))(ts-node@10.9.1(@swc/core@1.6.5(@swc/helpers@0.5.11))(@types/node@20.14.8)(typescript@4.9.5))):
     dependencies:
       '@types/debug': 0.0.31
       '@types/express-session': 1.17.6
       debug: 4.3.5(supports-color@8.1.1)
       express-session: 1.18.0
-      typeorm: 0.3.12(sqlite3@5.1.4(encoding@0.1.13))(ts-node@10.9.1(@swc/core@1.6.5(@swc/helpers@0.5.11))(@types/node@20.14.8)(typescript@4.9.5))
+      typeorm: 0.3.11(sqlite3@5.1.4(encoding@0.1.13))(ts-node@10.9.1(@swc/core@1.6.5(@swc/helpers@0.5.11))(@types/node@20.14.8)(typescript@4.9.5))
     transitivePeerDependencies:
       - supports-color
 
@@ -14181,10 +14176,6 @@ snapshots:
 
   date-fns@2.29.3: {}
 
-  date-fns@2.30.0:
-    dependencies:
-      '@babel/runtime': 7.24.7
-
   dateformat@3.0.3: {}
 
   dayjs@1.11.11: {}
@@ -15739,7 +15730,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  https-proxy-agent@7.0.4:
+  https-proxy-agent@7.0.5:
     dependencies:
       agent-base: 7.1.1
       debug: 4.3.5(supports-color@8.1.1)
@@ -17149,8 +17140,6 @@ snapshots:
 
   mkdirp@1.0.4: {}
 
-  mkdirp@2.1.6: {}
-
   modify-values@1.0.1: {}
 
   moment@2.30.1: {}
@@ -18372,8 +18361,6 @@ snapshots:
 
   reflect-metadata@0.1.13: {}
 
-  reflect-metadata@0.1.14: {}
-
   reflect.getprototypeof@1.0.6:
     dependencies:
       call-bind: 1.0.7
@@ -19431,23 +19418,23 @@ snapshots:
 
   typedarray@0.0.6: {}
 
-  typeorm@0.3.12(sqlite3@5.1.4(encoding@0.1.13))(ts-node@10.9.1(@swc/core@1.6.5(@swc/helpers@0.5.11))(@types/node@20.14.8)(typescript@4.9.5)):
+  typeorm@0.3.11(sqlite3@5.1.4(encoding@0.1.13))(ts-node@10.9.1(@swc/core@1.6.5(@swc/helpers@0.5.11))(@types/node@20.14.8)(typescript@4.9.5)):
     dependencies:
       '@sqltools/formatter': 1.2.5
       app-root-path: 3.1.0
       buffer: 6.0.3
       chalk: 4.1.2
       cli-highlight: 2.1.11
-      date-fns: 2.30.0
+      date-fns: 2.29.3
       debug: 4.3.5(supports-color@8.1.1)
       dotenv: 16.4.5
-      glob: 8.1.0
+      glob: 7.2.3
       js-yaml: 4.1.0
-      mkdirp: 2.1.6
-      reflect-metadata: 0.1.14
+      mkdirp: 1.0.4
+      reflect-metadata: 0.1.13
       sha.js: 2.4.11
       tslib: 2.6.3
-      uuid: 9.0.1
+      uuid: 8.3.2
       xml2js: 0.4.23
       yargs: 17.7.2
     optionalDependencies:
@@ -19486,6 +19473,8 @@ snapshots:
 
   undici-types@5.26.5: {}
 
+  undici@6.20.1: {}
+
   unicode-canonical-property-names-ecmascript@2.0.0: {}
 
   unicode-emoji-utils@1.2.0:

server/index.ts

@@ -37,6 +37,7 @@ import dns from 'node:dns';
 import net from 'node:net';
 import path from 'path';
 import swaggerUi from 'swagger-ui-express';
+import { ProxyAgent, setGlobalDispatcher } from 'undici';
 import YAML from 'yamljs';
 
 if (process.env.forceIpv4First === 'true') {
@@ -67,6 +68,11 @@ app
     const settings = await getSettings().load();
     restartFlag.initializeSettings(settings.main);
 
+    // Register HTTP proxy
+    if (settings.main.httpProxy) {
+      setGlobalDispatcher(new ProxyAgent(settings.main.httpProxy));
+    }
+
     // Migrate library types
     if (
       settings.plex.libraries.length > 1 &&

server/lib/imageproxy.ts

@@ -135,7 +135,6 @@ class ImageProxy {
   private cacheVersion;
   private key;
   private baseUrl;
-  private headers: HeadersInit | null = null;
 
   constructor(
     key: string,
@@ -143,7 +142,6 @@ class ImageProxy {
     options: {
       cacheVersion?: number;
       rateLimitOptions?: RateLimitOptions;
-      headers?: HeadersInit;
     } = {}
   ) {
     this.cacheVersion = options.cacheVersion ?? 1;
@@ -157,13 +155,9 @@ class ImageProxy {
     } else {
       this.fetch = fetch;
     }
-    this.headers = options.headers || null;
   }
 
-  public async getImage(
-    path: string,
-    fallbackPath?: string
-  ): Promise<ImageResponse> {
+  public async getImage(path: string): Promise<ImageResponse> {
     const cacheKey = this.getCacheKey(path);
 
     const imageResponse = await this.get(cacheKey);
@@ -172,11 +166,7 @@ class ImageProxy {
       const newImage = await this.set(path, cacheKey);
 
       if (!newImage) {
-        if (fallbackPath) {
-          return await this.getImage(fallbackPath);
-        } else {
-          throw new Error('Failed to load image');
-        }
+        throw new Error('Failed to load image');
       }
 
       return newImage;
@@ -257,12 +247,7 @@ class ImageProxy {
             : '/'
           : '') +
         (path.startsWith('/') ? path.slice(1) : path);
-      const response = await this.fetch(href, {
-        headers: this.headers || undefined,
-      });
-      if (!response.ok) {
-        return null;
-      }
+      const response = await this.fetch(href);
       const arrayBuffer = await response.arrayBuffer();
       const buffer = Buffer.from(arrayBuffer);
 

server/lib/settings/index.ts

@@ -119,6 +119,7 @@ export interface MainSettings {
   mediaServerType: number;
   partialRequestsEnabled: boolean;
   locale: string;
+  httpProxy: string;
 }
 
 interface PublicSettings {
@@ -325,6 +326,7 @@ class Settings {
         mediaServerType: MediaServerType.NOT_CONFIGURED,
         partialRequestsEnabled: true,
         locale: 'en',
+        httpProxy: '',
       },
       plex: {
         name: '',

server/routes/auth.ts

@@ -6,6 +6,7 @@ import { UserType } from '@server/constants/user';
 import { getRepository } from '@server/datasource';
 import { User } from '@server/entity/User';
 import { startJobs } from '@server/job/schedule';
+import ImageProxy from '@server/lib/imageproxy';
 import { Permission } from '@server/lib/permissions';
 import { getSettings } from '@server/lib/settings';
 import logger from '@server/logger';
@@ -14,6 +15,7 @@ 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();
@@ -326,7 +328,12 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
             jellyfinDeviceId: deviceId,
             jellyfinAuthToken: account.AccessToken,
             permissions: Permission.ADMIN,
-            avatar: `/avatarproxy/${account.User.Id}`,
+            avatar: account.User.PrimaryImageTag
+              ? `/Users/${account.User.Id}/Images/Primary/?tag=${account.User.PrimaryImageTag}&quality=90`
+              : gravatarUrl(body.email || account.User.Name, {
+                  default: 'mm',
+                  size: 200,
+                }),
             userType: UserType.EMBY,
           });
 
@@ -340,7 +347,12 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
             jellyfinDeviceId: deviceId,
             jellyfinAuthToken: account.AccessToken,
             permissions: Permission.ADMIN,
-            avatar: `/avatarproxy/${account.User.Id}`,
+            avatar: account.User.PrimaryImageTag
+              ? `/Users/${account.User.Id}/Images/Primary/?tag=${account.User.PrimaryImageTag}&quality=90`
+              : gravatarUrl(body.email || account.User.Name, {
+                  default: 'mm',
+                  size: 200,
+                }),
             userType: UserType.JELLYFIN,
           });
 
@@ -389,7 +401,27 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
           jellyfinUsername: account.User.Name,
         }
       );
-      user.avatar = `/avatarproxy/${account.User.Id}`;
+      // Update the users avatar with their jellyfin profile pic (incase it changed)
+      if (account.User.PrimaryImageTag) {
+        const avatar = `/Users/${account.User.Id}/Images/Primary/?tag=${account.User.PrimaryImageTag}&quality=90`;
+        if (avatar !== user.avatar) {
+          const avatarProxy = new ImageProxy('avatar', '');
+          avatarProxy.clearCachedImage(user.avatar);
+        }
+        user.avatar = avatar;
+      } else {
+        const avatar = gravatarUrl(user.email || account.User.Name, {
+          default: 'mm',
+          size: 200,
+        });
+
+        if (avatar !== user.avatar) {
+          const avatarProxy = new ImageProxy('avatar', '');
+          avatarProxy.clearCachedImage(user.avatar);
+        }
+
+        user.avatar = avatar;
+      }
       user.jellyfinUsername = account.User.Name;
 
       if (user.username === account.User.Name) {
@@ -427,7 +459,12 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
         jellyfinUserId: account.User.Id,
         jellyfinDeviceId: deviceId,
         permissions: settings.main.defaultPermissions,
-        avatar: `/avatarproxy/${account.User.Id}`,
+        avatar: account.User.PrimaryImageTag
+          ? `/Users/${account.User.Id}/Images/Primary/?tag=${account.User.PrimaryImageTag}&quality=90`
+          : gravatarUrl(body.email || account.User.Name, {
+              default: 'mm',
+              size: 200,
+            }),
         userType:
           settings.main.mediaServerType === MediaServerType.JELLYFIN
             ? UserType.JELLYFIN

server/routes/avatarproxy.ts

@@ -1,39 +1,21 @@
 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) => {
+const avatarImageProxy = new ImageProxy('avatar', '');
+// Proxy avatar images
+router.get('/*', async (req, res) => {
+  let imagePath = '';
   try {
-    if (!req.params.jellyfinUserId.match(/^[a-f0-9]{32}$/)) {
+    const jellyfinAvatar = req.url.match(
+      /(\/Users\/\w+\/Images\/Primary\/?\?tag=\w+&quality=90)$/
+    )?.[1];
+    if (!jellyfinAvatar) {
       const mediaServerType = getSettings().main.mediaServerType;
       throw new Error(
         `Provided URL is not ${
@@ -44,28 +26,10 @@ router.get('/:jellyfinUserId', async (req, res) => {
       );
     }
 
-    const avatarImageCache = await initAvatarImageProxy();
+    const imageUrl = new URL(jellyfinAvatar, getHostname());
+    imagePath = imageUrl.toString();
 
-    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);
-    }
+    const imageData = await avatarImageProxy.getImage(imagePath);
 
     res.writeHead(200, {
       'Content-Type': `image/${imageData.meta.extension}`,
@@ -78,6 +42,7 @@ router.get('/:jellyfinUserId', async (req, res) => {
     res.end(imageData.imageBuffer);
   } catch (e) {
     logger.error('Failed to proxy avatar image', {
+      imagePath,
       errorMessage: e.message,
     });
   }

server/routes/settings/index.ts

@@ -32,6 +32,7 @@ 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';
@@ -394,7 +395,9 @@ settingsRoutes.get('/jellyfin/users', async (req, res) => {
   const users = resp.users.map((user) => ({
     username: user.Name,
     id: user.Id,
-    thumb: `/avatarproxy/${user.Id}`,
+    thumb: user.PrimaryImageTag
+      ? `/Users/${user.Id}/Images/Primary/?tag=${user.PrimaryImageTag}&quality=90`
+      : gravatarUrl(user.Name, { default: 'mm', size: 200 }),
     email: user.Name,
   }));
 

server/routes/user/index.ts

@@ -539,7 +539,12 @@ router.post(
             ).toString('base64'),
             email: jellyfinUser?.Name,
             permissions: settings.main.defaultPermissions,
-            avatar: `/avatarproxy/${jellyfinUser?.Id}`,
+            avatar: jellyfinUser?.PrimaryImageTag
+              ? `/Users/${jellyfinUser.Id}/Images/Primary/?tag=${jellyfinUser.PrimaryImageTag}&quality=90`
+              : gravatarUrl(jellyfinUser?.Name ?? '', {
+                  default: 'mm',
+                  size: 200,
+                }),
             userType:
               settings.main.mediaServerType === MediaServerType.JELLYFIN
                 ? UserType.JELLYFIN

server/utils/restartFlag.ts

@@ -13,7 +13,8 @@ class RestartFlag {
 
     return (
       this.settings.csrfProtection !== settings.csrfProtection ||
-      this.settings.trustProxy !== settings.trustProxy
+      this.settings.trustProxy !== settings.trustProxy ||
+      this.settings.httpProxy !== settings.httpProxy
     );
   }
 }

src/components/Common/CachedImage/index.tsx

@@ -25,8 +25,11 @@ const CachedImage = ({ src, type, ...props }: CachedImageProps) => {
         ? src.replace(/^https:\/\/image\.tmdb\.org\//, '/imageproxy/')
         : src;
   } else if (type === 'avatar') {
-    // jellyfin avatar (if any)
-    imageUrl = src;
+    // jellyfin avatar (in any)
+    const jellyfinAvatar = src.match(
+      /(\/Users\/\w+\/Images\/Primary\/?\?tag=\w+&quality=90)$/
+    )?.[1];
+    imageUrl = jellyfinAvatar ? `/avatarproxy` + jellyfinAvatar : src;
   } else {
     return null;
   }

src/components/Settings/SettingsMain/index.tsx

@@ -55,6 +55,8 @@ const messages = defineMessages('components.Settings.SettingsMain', {
   validationApplicationUrlTrailingSlash: 'URL must not end in a trailing slash',
   partialRequestsEnabled: 'Allow Partial Series Requests',
   locale: 'Display Language',
+  httpProxy: 'HTTP Proxy',
+  httpProxyTip: 'Tooltip to write',
 });
 
 const SettingsMain = () => {
@@ -82,6 +84,9 @@ const SettingsMain = () => {
         intl.formatMessage(messages.validationApplicationUrlTrailingSlash),
         (value) => !value || !value.endsWith('/')
       ),
+    httpProxy: Yup.string().url(
+      intl.formatMessage(messages.validationApplicationUrl)
+    ),
   });
 
   const regenerate = async () => {
@@ -137,6 +142,7 @@ const SettingsMain = () => {
             partialRequestsEnabled: data?.partialRequestsEnabled,
             trustProxy: data?.trustProxy,
             cacheImages: data?.cacheImages,
+            httpProxy: data?.httpProxy,
           }}
           enableReinitialize
           validationSchema={MainSettingsSchema}
@@ -158,6 +164,7 @@ const SettingsMain = () => {
                   partialRequestsEnabled: values.partialRequestsEnabled,
                   trustProxy: values.trustProxy,
                   cacheImages: values.cacheImages,
+                  httpProxy: values.httpProxy,
                 }),
               });
               if (!res.ok) throw new Error();
@@ -437,6 +444,28 @@ const SettingsMain = () => {
                     />
                   </div>
                 </div>
+                <div className="form-row">
+                  <label htmlFor="httpProxy" className="checkbox-label">
+                    <span className="mr-2">
+                      {intl.formatMessage(messages.httpProxy)}
+                    </span>
+                    <SettingsBadge badgeType="advanced" className="mr-2" />
+                    <SettingsBadge badgeType="restartRequired" />
+                    <span className="label-tip">
+                      {intl.formatMessage(messages.httpProxyTip)}
+                    </span>
+                  </label>
+                  <div className="form-input-area">
+                    <div className="form-input-field">
+                      <Field id="httpProxy" name="httpProxy" type="text" />
+                    </div>
+                    {errors.httpProxy &&
+                      touched.httpProxy &&
+                      typeof errors.httpProxy === 'string' && (
+                        <div className="error">{errors.httpProxy}</div>
+                      )}
+                  </div>
+                </div>
                 <div className="actions">
                   <div className="flex justify-end">
                     <span className="ml-3 inline-flex rounded-md shadow-sm">