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.

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.

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}