fix: update avatar on new login

Previously, avatars were cached using image links from Jellyfin/Emby. Now, avatar images are
obtained directly from the API to avoid some configuration bugs.

package.json

@@ -94,7 +94,6 @@
     "swagger-ui-express": "4.6.2",
     "swr": "2.2.5",
     "typeorm": "0.3.12",
-    "undici": "^6.20.1",
     "web-push": "3.5.0",
     "winston": "3.8.2",
     "winston-daily-rotate-file": "4.7.1",

pnpm-lock.yaml

@@ -194,9 +194,6 @@ importers:
       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))
-      undici:
-        specifier: ^6.20.1
-        version: 6.20.1
       web-push:
         specifier: 3.5.0
         version: 3.5.0
@@ -8771,10 +8768,6 @@ 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'}
@@ -19493,8 +19486,6 @@ 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,15 +37,8 @@ import dns from 'node:dns';
 import net from 'node:net';
 import path from 'path';
 import swaggerUi from 'swagger-ui-express';
-import { Agent, setGlobalDispatcher } from 'undici';
 import YAML from 'yamljs';
 
-// Set the global dispatcher to use autoSelectFamily
-// attempt to fix ipv6 issues
-setGlobalDispatcher(
-  new Agent({ connect: { timeout: 60_000, autoSelectFamily: true } })
-);
-
 if (process.env.forceIpv4First === 'true') {
   dns.setDefaultResultOrder('ipv4first');
   net.setDefaultAutoSelectFamily(false);

server/lib/imageproxy.ts

@@ -135,6 +135,7 @@ class ImageProxy {
   private cacheVersion;
   private key;
   private baseUrl;
+  private headers: HeadersInit | null = null;
 
   constructor(
     key: string,
@@ -142,6 +143,7 @@ class ImageProxy {
     options: {
       cacheVersion?: number;
       rateLimitOptions?: RateLimitOptions;
+      headers?: HeadersInit;
     } = {}
   ) {
     this.cacheVersion = options.cacheVersion ?? 1;
@@ -155,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);
@@ -166,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;
@@ -247,7 +257,12 @@ class ImageProxy {
             : '/'
           : '') +
         (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);
 

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);
 

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;

server/routes/auth.ts

@@ -6,7 +6,6 @@ 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';
@@ -15,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();
@@ -328,12 +326,7 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
             jellyfinDeviceId: deviceId,
             jellyfinAuthToken: account.AccessToken,
             permissions: Permission.ADMIN,
-            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,
-                }),
+            avatar: `/avatarproxy/${account.User.Id}`,
             userType: UserType.EMBY,
           });
 
@@ -347,12 +340,7 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
             jellyfinDeviceId: deviceId,
             jellyfinAuthToken: account.AccessToken,
             permissions: Permission.ADMIN,
-            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,
-                }),
+            avatar: `/avatarproxy/${account.User.Id}`,
             userType: UserType.JELLYFIN,
           });
 
@@ -401,27 +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) {
-        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.avatar = `/avatarproxy/${account.User.Id}`;
       user.jellyfinUsername = account.User.Name;
 
       if (user.username === account.User.Name) {
@@ -459,12 +427,7 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
         jellyfinUserId: account.User.Id,
         jellyfinDeviceId: deviceId,
         permissions: settings.main.defaultPermissions,
-        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,
-            }),
+        avatar: `/avatarproxy/${account.User.Id}`,
         userType:
           settings.main.mediaServerType === MediaServerType.JELLYFIN
             ? UserType.JELLYFIN

server/routes/avatarproxy.ts

@@ -1,21 +1,39 @@
 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();
 
-const avatarImageProxy = new ImageProxy('avatar', '');
-// Proxy avatar images
-router.get('/*', async (req, res) => {
-  let imagePath = '';
+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 {
-    const jellyfinAvatar = req.url.match(
-      /(\/Users\/\w+\/Images\/Primary\/?\?tag=\w+&quality=90)$/
-    )?.[1];
-    if (!jellyfinAvatar) {
+    if (!req.params.jellyfinUserId.match(/^[a-f0-9]{32}$/)) {
       const mediaServerType = getSettings().main.mediaServerType;
       throw new Error(
         `Provided URL is not ${
@@ -26,10 +44,28 @@ router.get('/*', async (req, res) => {
       );
     }
 
-    const imageUrl = new URL(jellyfinAvatar, getHostname());
-    imagePath = imageUrl.toString();
+    const avatarImageCache = await initAvatarImageProxy();
 
-    const imageData = await avatarImageProxy.getImage(imagePath);
+    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}`,
@@ -42,7 +78,6 @@ router.get('/*', 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,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';
@@ -395,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
-      ? `/Users/${user.Id}/Images/Primary/?tag=${user.PrimaryImageTag}&quality=90`
-      : gravatarUrl(user.Name, { default: 'mm', size: 200 }),
+    thumb: `/avatarproxy/${user.Id}`,
     email: user.Name,
   }));
 

server/routes/user/index.ts

@@ -539,12 +539,7 @@ router.post(
             ).toString('base64'),
             email: jellyfinUser?.Name,
             permissions: settings.main.defaultPermissions,
-            avatar: jellyfinUser?.PrimaryImageTag
-              ? `/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

src/components/Common/CachedImage/index.tsx

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

src/components/RequestList/RequestItem/index.tsx

@@ -635,7 +635,7 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
                         <span className="avatar-sm ml-1.5">
                           <CachedImage
                             type="avatar"
-                            src={requestData.requestedBy.avatar}
+                            src={requestData.modifiedBy.avatar}
                             alt=""
                             className="avatar-sm object-cover"
                             width={20}