fix: format

refactor: use 'mime' package to determine a file's extension
fix: requested changes
2024-08-13 22:35:42 +00:00 · 2024-08-13 22:30:37 +00:00 · 2024-08-13 22:30:04 +00:00 · 2024-08-13 22:29:53 +00:00 · 2024-08-13 22:29:38 +00:00 · 2024-08-13 22:29:24 +00:00
38 changed files with 919 additions and 392 deletions
--- a/next.config.js
+++ b/next.config.js
@@ -14,7 +14,6 @@ module.exports = {
    remotePatterns: [
      { hostname: 'gravatar.com' },
      { hostname: 'image.tmdb.org' },
-      { hostname: '*', protocol: 'https' },
    ],
  },
  webpack(config) {
--- a/overseerr-api.yml
+++ b/overseerr-api.yml
@@ -2775,6 +2775,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
@@ -85,7 +85,7 @@ class ExternalAPI {

  protected async post<T>(
    endpoint: string,
-    data: Record<string, unknown>,
+    data?: Record<string, unknown>,
    params?: Record<string, string>,
    ttl?: number,
    config?: RequestInit
@@ -107,7 +107,7 @@ class ExternalAPI {
        ...this.defaultHeaders,
        ...config?.headers,
      },
-      body: JSON.stringify(data),
+      body: data ? JSON.stringify(data) : undefined,
    });
    if (!response.ok) {
      const text = await response.text();
@@ -286,7 +286,12 @@ class ExternalAPI {
      ...this.params,
      ...params,
    });
-    return `${href}?${searchParams.toString()}`;
+    return (
+      href +
+      (searchParams.toString().length
+        ? '?' + searchParams.toString()
+        : searchParams.toString())
+    );
  }

  private serializeCacheKey(
--- a/server/api/jellyfin.ts
+++ b/server/api/jellyfin.ts
@@ -93,9 +93,7 @@ export interface JellyfinLibraryItemExtended extends JellyfinLibraryItem {
 }

 class JellyfinAPI extends ExternalAPI {
-  private authToken?: string;
  private userId?: string;
-  private jellyfinHost: string;

  constructor(jellyfinHost: string, authToken?: string, deviceId?: string) {
    let authHeaderVal: string;
@@ -114,9 +112,6 @@ class JellyfinAPI extends ExternalAPI {
        },
      }
    );
-
-    this.jellyfinHost = jellyfinHost;
-    this.authToken = authToken;
  }

  public async login(
@@ -405,6 +400,23 @@ class JellyfinAPI extends ExternalAPI {
      throw new ApiError(e.cause?.status, ApiErrorCode.InvalidAuthToken);
    }
  }
+
+  public async createApiToken(appName: string): Promise<string> {
+    try {
+      await this.post(`/Auth/Keys?App=${appName}`);
+      const apiKeys = await this.get<any>(`/Auth/Keys`);
+      return apiKeys.Items.reverse().find(
+        (item: any) => item.AppName === appName
+      ).AccessToken;
+    } catch (e) {
+      logger.error(
+        `Something went wrong while creating an API key the Jellyfin server: ${e.message}`,
+        { label: 'Jellyfin API' }
+      );
+
+      throw new ApiError(e.response?.status, ApiErrorCode.InvalidAuthToken);
+    }
+  }
 }

 export default JellyfinAPI;
--- 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';
@@ -63,7 +64,7 @@ app
    }

    // Load Settings
-    const settings = getSettings();
+    const settings = await getSettings().load();
    restartFlag.initializeSettings(settings.main);

    // Migrate library types
@@ -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/availabilitySync.ts
+++ b/server/lib/availabilitySync.ts
@@ -63,12 +63,7 @@ class AvailabilitySync {
      ) {
        admin = await userRepository.findOne({
          where: { id: 1 },
-          select: [
-            'id',
-            'jellyfinAuthToken',
-            'jellyfinUserId',
-            'jellyfinDeviceId',
-          ],
+          select: ['id', 'jellyfinUserId', 'jellyfinDeviceId'],
          order: { id: 'ASC' },
        });
      }
@@ -86,7 +81,7 @@ class AvailabilitySync {
          if (admin) {
            this.jellyfinClient = new JellyfinAPI(
              getHostname(),
-              admin.jellyfinAuthToken,
+              settings.jellyfin.apiKey,
              admin.jellyfinDeviceId
            );

--- 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,33 +86,49 @@ 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;
@@ -147,6 +180,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]} image 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 +241,25 @@ 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 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 +295,7 @@ class ImageProxy {

  private async writeToCacheDir(
    dir: string,
-    extension: string,
+    extension: string | null,
    maxAge: number,
    expireAt: number,
    buffer: Buffer,
--- a/server/lib/scanners/jellyfin/index.ts
+++ b/server/lib/scanners/jellyfin/index.ts
@@ -582,12 +582,7 @@ class JellyfinScanner {
      const userRepository = getRepository(User);
      const admin = await userRepository.findOne({
        where: { id: 1 },
-        select: [
-          'id',
-          'jellyfinAuthToken',
-          'jellyfinUserId',
-          'jellyfinDeviceId',
-        ],
+        select: ['id', 'jellyfinUserId', 'jellyfinDeviceId'],
        order: { id: 'ASC' },
      });

@@ -597,7 +592,7 @@ class JellyfinScanner {

      this.jfClient = new JellyfinAPI(
        getHostname(),
-        admin.jellyfinAuthToken,
+        settings.jellyfin.apiKey,
        admin.jellyfinDeviceId
      );

--- a/server/lib/settings/index.ts
+++ b/server/lib/settings/index.ts
@@ -47,6 +47,7 @@ export interface JellyfinSettings {
  jellyfinForgotPasswordUrl?: string;
  libraries: Library[];
  serverId: string;
+  apiKey: string;
 }
 export interface TautulliSettings {
  hostname?: string;
@@ -342,6 +343,7 @@ class Settings {
        jellyfinForgotPasswordUrl: '',
        libraries: [],
        serverId: '',
+        apiKey: '',
      },
      tautulli: {},
      radarr: [],
@@ -629,7 +631,7 @@ class Settings {
   * @param overrideSettings If passed in, will override all existing settings with these
   * values
   */
-  public load(overrideSettings?: AllSettings): Settings {
+  public async load(overrideSettings?: AllSettings): Promise<Settings> {
    if (overrideSettings) {
      this.data = overrideSettings;
      return this;
@@ -642,7 +644,7 @@ class Settings {

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

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

@@ -656,7 +658,6 @@ class Settings {
  }
 }

-let loaded = false;
 let settings: Settings | undefined;

 export const getSettings = (initialSettings?: AllSettings): Settings => {
@@ -664,11 +665,6 @@ export const getSettings = (initialSettings?: AllSettings): Settings => {
    settings = new Settings(initialSettings);
  }

-  if (!loaded) {
-    settings.load();
-    loaded = true;
-  }
-
  return settings;
 };

--- a/server/lib/settings/migrations/0002_migrate_apitokens.ts
+++ b/server/lib/settings/migrations/0002_migrate_apitokens.ts
@@ -0,0 +1,36 @@
+import JellyfinAPI from '@server/api/jellyfin';
+import { MediaServerType } from '@server/constants/server';
+import { getRepository } from '@server/datasource';
+import { User } from '@server/entity/User';
+import type { AllSettings } from '@server/lib/settings';
+import { getHostname } from '@server/utils/getHostname';
+
+const migrateApiTokens = async (settings: any): Promise<AllSettings> => {
+  const mediaServerType = settings.main.mediaServerType;
+  if (
+    !settings.jellyfin.apiKey &&
+    (mediaServerType === MediaServerType.JELLYFIN ||
+      mediaServerType === MediaServerType.EMBY)
+  ) {
+    const userRepository = getRepository(User);
+    const admin = await userRepository.findOne({
+      where: { id: 1 },
+      select: ['id', 'jellyfinAuthToken', 'jellyfinUserId', 'jellyfinDeviceId'],
+      order: { id: 'ASC' },
+    });
+    if (!admin) {
+      return settings;
+    }
+    const jellyfinClient = new JellyfinAPI(
+      getHostname(settings.jellyfin),
+      admin.jellyfinAuthToken,
+      admin.jellyfinDeviceId
+    );
+    jellyfinClient.setUserId(admin.jellyfinUserId ?? '');
+    const apiKey = await jellyfinClient.createApiToken('Jellyseerr');
+    settings.jellyfin.apiKey = apiKey;
+  }
+  return settings;
+};
+
+export default migrateApiTokens;
--- a/server/lib/settings/migrator.ts
+++ b/server/lib/settings/migrator.ts
@@ -1,10 +1,13 @@
 import type { AllSettings } from '@server/lib/settings';
+import logger from '@server/logger';
 import fs from 'fs';
 import path from 'path';

 const migrationsDir = path.join(__dirname, 'migrations');

-export const runMigrations = (settings: AllSettings): AllSettings => {
+export const runMigrations = async (
+  settings: AllSettings
+): Promise<AllSettings> => {
  const migrations = fs
    .readdirSync(migrationsDir)
    .filter((file) => file.endsWith('.js') || file.endsWith('.ts'))
@@ -13,8 +16,15 @@ export const runMigrations = (settings: AllSettings): AllSettings => {

  let migrated = settings;

-  for (const migration of migrations) {
-    migrated = migration(migrated);
+  try {
+    for (const migration of migrations) {
+      migrated = await migration(migrated);
+    }
+  } catch (e) {
+    logger.error(
+      `Something went wrong while running settings migrations: ${e.message}`,
+      { label: 'Settings Migrator' }
+    );
  }

  return migrated;
--- a/server/models/Movie.ts
+++ b/server/models/Movie.ts
@@ -85,6 +85,7 @@ export interface MovieDetails {
  mediaUrl?: string;
  watchProviders?: WatchProviders[];
  keywords: Keyword[];
+  onUserWatchlist?: boolean;
 }

 export const mapProductionCompany = (
@@ -101,7 +102,8 @@ export const mapProductionCompany = (

 export const mapMovieDetails = (
  movie: TmdbMovieDetails,
-  media?: Media
+  media?: Media,
+  userWatchlist?: boolean
 ): MovieDetails => ({
  id: movie.id,
  adult: movie.adult,
@@ -148,4 +150,5 @@ export const mapMovieDetails = (
    id: keyword.id,
    name: keyword.name,
  })),
+  onUserWatchlist: userWatchlist,
 });
--- a/server/models/Tv.ts
+++ b/server/models/Tv.ts
@@ -111,6 +111,7 @@ export interface TvDetails {
  keywords: Keyword[];
  mediaInfo?: Media;
  watchProviders?: WatchProviders[];
+  onUserWatchlist?: boolean;
 }

 const mapEpisodeResult = (episode: TmdbTvEpisodeResult): Episode => ({
@@ -161,7 +162,8 @@ export const mapNetwork = (network: TmdbNetwork): TvNetwork => ({

 export const mapTvDetails = (
  show: TmdbTvDetails,
-  media?: Media
+  media?: Media,
+  userWatchlist?: boolean
 ): TvDetails => ({
  createdBy: show.created_by,
  episodeRunTime: show.episode_run_time,
@@ -223,4 +225,5 @@ export const mapTvDetails = (
  })),
  mediaInfo: media,
  watchProviders: mapWatchProviders(show['watch/providers']?.results ?? {}),
+  onUserWatchlist: userWatchlist,
 });
--- a/server/routes/auth.ts
+++ b/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';
@@ -324,7 +325,6 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
        jellyfinUsername: account.User.Name,
        jellyfinUserId: account.User.Id,
        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`
@@ -335,6 +335,14 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
        userType: UserType.JELLYFIN,
      });

+      // Create an API key on Jellyfin from this admin user
+      const jellyfinClient = new JellyfinAPI(
+        hostname,
+        account.AccessToken,
+        deviceId
+      );
+      const apiKey = await jellyfinClient.createApiToken('Jellyseerr');
+
      const serverName = await jellyfinserver.getServerName();

      settings.jellyfin.name = serverName;
@@ -343,6 +351,7 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
      settings.jellyfin.port = body.port ?? 8096;
      settings.jellyfin.urlBase = body.urlBase ?? '';
      settings.jellyfin.useSsl = body.useSsl ?? false;
+      settings.jellyfin.apiKey = apiKey;
      settings.save();
      startJobs();

@@ -366,18 +375,25 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
          jellyfinUsername: account.User.Name,
        }
      );
-      // Let's check if their authtoken is up to date
-      if (user.jellyfinAuthToken !== account.AccessToken) {
-        user.jellyfinAuthToken = account.AccessToken;
-      }
      // 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`;
+        const avatar = `${jellyfinHost}/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 {
-        user.avatar = gravatarUrl(user.email || account.User.Name, {
+        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;

@@ -421,7 +437,6 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
        jellyfinUsername: account.User.Name,
        jellyfinUserId: account.User.Id,
        jellyfinDeviceId: deviceId,
-        jellyfinAuthToken: account.AccessToken,
        permissions: settings.main.defaultPermissions,
        avatar: account.User.PrimaryImageTag
          ? `${jellyfinHost}/Users/${account.User.Id}/Images/Primary/?tag=${account.User.PrimaryImageTag}&quality=90`
--- a/server/routes/avatarproxy.ts
+++ b/server/routes/avatarproxy.ts
@@ -0,0 +1,31 @@
+import ImageProxy from '@server/lib/imageproxy';
+import logger from '@server/logger';
+import { Router } from 'express';
+
+const router = Router();
+
+const avatarImageProxy = new ImageProxy('avatar', '');
+// Proxy avatar images
+router.get('/*', async (req, res) => {
+  const imagePath = req.url.startsWith('/') ? req.url.slice(1) : req.url;
+  try {
+    const imageData = await avatarImageProxy.getImage(imagePath);
+
+    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', {
+      imagePath,
+      errorMessage: e.message,
+    });
+  }
+});
+
+export default router;
--- a/server/routes/movie.ts
+++ b/server/routes/movie.ts
@@ -3,7 +3,9 @@ import RottenTomatoes from '@server/api/rating/rottentomatoes';
 import { type RatingResponse } from '@server/api/ratings';
 import TheMovieDb from '@server/api/themoviedb';
 import { MediaType } from '@server/constants/media';
+import { getRepository } from '@server/datasource';
 import Media from '@server/entity/Media';
+import { Watchlist } from '@server/entity/Watchlist';
 import logger from '@server/logger';
 import { mapMovieDetails } from '@server/models/Movie';
 import { mapMovieResult } from '@server/models/Search';
@@ -22,7 +24,24 @@ movieRoutes.get('/:id', async (req, res, next) => {

    const media = await Media.getMedia(tmdbMovie.id, MediaType.MOVIE);

-    return res.status(200).json(mapMovieDetails(tmdbMovie, media));
+    const onUserWatchlist = await getRepository(Watchlist).exist({
+      where: {
+        tmdbId: Number(req.params.id),
+        requestedBy: {
+          id: req.user?.id,
+        },
+      },
+    });
+
+    const data = mapMovieDetails(tmdbMovie, media, onUserWatchlist);
+
+    // TMDB issue where it doesnt fallback to English when no overview is available in requested locale.
+    if (!data.overview) {
+      const tvEnglish = await tmdb.getMovie({ movieId: Number(req.params.id) });
+      data.overview = tvEnglish.overview;
+    }
+
+    return res.status(200).json(data);
  } catch (e) {
    logger.debug('Something went wrong retrieving movie', {
      label: 'API',
--- a/server/routes/settings/index.ts
+++ b/server/routes/settings/index.ts
@@ -262,7 +262,7 @@ settingsRoutes.post('/jellyfin', async (req, res, next) => {
  try {
    const admin = await userRepository.findOneOrFail({
      where: { id: 1 },
-      select: ['id', 'jellyfinAuthToken', 'jellyfinUserId', 'jellyfinDeviceId'],
+      select: ['id', 'jellyfinUserId', 'jellyfinDeviceId'],
      order: { id: 'ASC' },
    });

@@ -270,7 +270,7 @@ settingsRoutes.post('/jellyfin', async (req, res, next) => {

    const jellyfinClient = new JellyfinAPI(
      getHostname(tempJellyfinSettings),
-      admin.jellyfinAuthToken ?? '',
+      tempJellyfinSettings.apiKey,
      admin.jellyfinDeviceId ?? ''
    );

@@ -318,13 +318,13 @@ settingsRoutes.get('/jellyfin/library', async (req, res, next) => {
  if (req.query.sync) {
    const userRepository = getRepository(User);
    const admin = await userRepository.findOneOrFail({
-      select: ['id', 'jellyfinAuthToken', 'jellyfinDeviceId', 'jellyfinUserId'],
+      select: ['id', 'jellyfinDeviceId', 'jellyfinUserId'],
      where: { id: 1 },
      order: { id: 'ASC' },
    });
    const jellyfinClient = new JellyfinAPI(
      getHostname(),
-      admin.jellyfinAuthToken ?? '',
+      settings.jellyfin.apiKey,
      admin.jellyfinDeviceId ?? ''
    );

@@ -376,7 +376,8 @@ settingsRoutes.get('/jellyfin/library', async (req, res, next) => {
 });

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

  const userRepository = getRepository(User);
  const admin = await userRepository.findOneOrFail({
-    select: ['id', 'jellyfinAuthToken', 'jellyfinDeviceId', 'jellyfinUserId'],
+    select: ['id', 'jellyfinDeviceId', 'jellyfinUserId'],
    where: { id: 1 },
    order: { id: 'ASC' },
  });
  const jellyfinClient = new JellyfinAPI(
    getHostname(),
-    admin.jellyfinAuthToken ?? '',
+    settings.jellyfin.apiKey,
    admin.jellyfinDeviceId ?? ''
  );

@@ -745,11 +746,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/tv.ts
+++ b/server/routes/tv.ts
@@ -1,7 +1,9 @@
 import RottenTomatoes from '@server/api/rating/rottentomatoes';
 import TheMovieDb from '@server/api/themoviedb';
 import { MediaType } from '@server/constants/media';
+import { getRepository } from '@server/datasource';
 import Media from '@server/entity/Media';
+import { Watchlist } from '@server/entity/Watchlist';
 import logger from '@server/logger';
 import { mapTvResult } from '@server/models/Search';
 import { mapSeasonWithEpisodes, mapTvDetails } from '@server/models/Tv';
@@ -19,7 +21,24 @@ tvRoutes.get('/:id', async (req, res, next) => {

    const media = await Media.getMedia(tv.id, MediaType.TV);

-    return res.status(200).json(mapTvDetails(tv, media));
+    const onUserWatchlist = await getRepository(Watchlist).exist({
+      where: {
+        tmdbId: Number(req.params.id),
+        requestedBy: {
+          id: req.user?.id,
+        },
+      },
+    });
+
+    const data = mapTvDetails(tv, media, onUserWatchlist);
+
+    // TMDB issue where it doesnt fallback to English when no overview is available in requested locale.
+    if (!data.overview) {
+      const tvEnglish = await tmdb.getTvShow({ tvId: Number(req.params.id) });
+      data.overview = tvEnglish.overview;
+    }
+
+    return res.status(200).json(data);
  } catch (e) {
    logger.debug('Something went wrong retrieving series', {
      label: 'API',
--- a/server/routes/user/index.ts
+++ b/server/routes/user/index.ts
@@ -501,17 +501,14 @@ router.post(
      // taken from auth.ts
      const admin = await userRepository.findOneOrFail({
        where: { id: 1 },
-        select: [
-          'id',
-          'jellyfinAuthToken',
-          'jellyfinDeviceId',
-          'jellyfinUserId',
-        ],
+        select: ['id', 'jellyfinDeviceId', 'jellyfinUserId'],
        order: { id: 'ASC' },
      });
+
+      const hostname = getHostname();
      const jellyfinClient = new JellyfinAPI(
-        getHostname(),
-        admin.jellyfinAuthToken ?? '',
+        hostname,
+        settings.jellyfin.apiKey,
        admin.jellyfinDeviceId ?? ''
      );
      jellyfinClient.setUserId(admin.jellyfinUserId ?? '');
@@ -519,7 +516,6 @@ router.post(
      //const jellyfinUsersResponse = await jellyfinClient.getUsers();
      const createdUsers: User[] = [];
      const { externalHostname } = getSettings().jellyfin;
-      const hostname = getHostname();

      const jellyfinHost =
        externalHostname && externalHostname.length > 0
--- 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,8 +88,8 @@ const IssueComment = ({
        </Modal>
      </Transition>
      <Link href={isActiveUser ? '/profile' : `/users/${comment.user.id}`}>
-        <Image
-          src={comment.user.avatar}
+        <CachedImage
+          src={`/avatarproxy/${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"
          width={40}
--- a/src/components/IssueDetails/index.tsx
+++ b/src/components/IssueDetails/index.tsx
@@ -29,7 +29,6 @@ import type { MovieDetails } from '@server/models/Movie';
 import type { TvDetails } from '@server/models/Tv';
 import { Field, Form, Formik } from 'formik';
 import getConfig from 'next/config';
-import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
@@ -289,10 +288,10 @@ 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"
-                    src={issueData.createdBy.avatar}
+                  <CachedImage
+                    src={`/avatarproxy/${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/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,9 @@ 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
            className="h-8 w-8 rounded-full object-cover sm:h-10 sm:w-10"
-            src={user?.avatar || ''}
+            src={user && user.avatar ? `/avatarproxy/${user.avatar}` : ''}
            alt=""
            width={40}
            height={40}
@@ -79,9 +79,9 @@ 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
                  className="h-8 w-8 rounded-full object-cover sm:h-10 sm:w-10"
-                  src={user?.avatar || ''}
+                  src={user && user.avatar ? `/avatarproxy/${user.avatar}` : ''}
                  alt=""
                  width={40}
                  height={40}
--- a/src/components/ManageSlideOver/index.tsx
+++ b/src/components/ManageSlideOver/index.tsx
@@ -1,4 +1,5 @@
 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 { RadarrSettings, SonarrSettings } from '@server/lib/settings';
 import type { MovieDetails } from '@server/models/Movie';
 import type { TvDetails } from '@server/models/Tv';
 import getConfig from 'next/config';
-import Image from 'next/image';
 import Link from 'next/link';
 import { useIntl } from 'react-intl';
 import useSWR from 'swr';
@@ -355,8 +355,8 @@ const ManageSlideOver = ({
                                    key={`watch-user-${user.id}`}
                                    content={user.displayName}
                                  >
-                                    <Image
-                                      src={user.avatar}
+                                    <CachedImage
+                                      src={`/avatarproxy/${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"
                                      width={32}
@@ -516,8 +516,8 @@ const ManageSlideOver = ({
                                    key={`watch-user-${user.id}`}
                                    content={user.displayName}
                                  >
-                                    <Image
-                                      src={user.avatar}
+                                    <CachedImage
+                                      src={`/avatarproxy/${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"
                                      width={32}
--- a/src/components/MovieDetails/index.tsx
+++ b/src/components/MovieDetails/index.tsx
@@ -3,6 +3,7 @@ import RTAudRotten from '@app/assets/rt_aud_rotten.svg';
 import RTFresh from '@app/assets/rt_fresh.svg';
 import RTRotten from '@app/assets/rt_rotten.svg';
 import ImdbLogo from '@app/assets/services/imdb.svg';
+import Spinner from '@app/assets/spinner.svg';
 import TmdbLogo from '@app/assets/tmdb_logo.svg';
 import Button from '@app/components/Common/Button';
 import CachedImage from '@app/components/Common/CachedImage';
@@ -25,7 +26,7 @@ import useLocale from '@app/hooks/useLocale';
 import useSettings from '@app/hooks/useSettings';
 import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
-import Error from '@app/pages/_error';
+import ErrorPage from '@app/pages/_error';
 import { sortCrewPriority } from '@app/utils/creditHelpers';
 import defineMessages from '@app/utils/defineMessages';
 import { refreshIntervalHelper } from '@app/utils/refreshIntervalHelper';
@@ -41,10 +42,12 @@ import {
 import {
  ChevronDoubleDownIcon,
  ChevronDoubleUpIcon,
+  MinusCircleIcon,
+  StarIcon,
 } from '@heroicons/react/24/solid';
 import { type RatingResponse } from '@server/api/ratings';
 import { IssueStatus } from '@server/constants/issue';
-import { MediaStatus } from '@server/constants/media';
+import { MediaStatus, MediaType } from '@server/constants/media';
 import { MediaServerType } from '@server/constants/server';
 import type { MovieDetails as MovieDetailsType } from '@server/models/Movie';
 import { countries } from 'country-flag-icons';
@@ -55,6 +58,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useEffect, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
+import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';

 const messages = defineMessages('components.MovieDetails', {
@@ -94,6 +98,12 @@ const messages = defineMessages('components.MovieDetails', {
  rtaudiencescore: 'Rotten Tomatoes Audience Score',
  tmdbuserscore: 'TMDB User Score',
  imdbuserscore: 'IMDB User Score',
+  watchlistSuccess: '<strong>{title}</strong> added to watchlist successfully!',
+  watchlistDeleted:
+    '<strong>{title}</strong> Removed from watchlist successfully!',
+  watchlistError: 'Something went wrong try again.',
+  removefromwatchlist: 'Remove From Watchlist',
+  addtowatchlist: 'Add To Watchlist',
 });

 interface MovieDetailsProps {
@@ -112,7 +122,12 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
  const minStudios = 3;
  const [showMoreStudios, setShowMoreStudios] = useState(false);
  const [showIssueModal, setShowIssueModal] = useState(false);
+  const [isUpdating, setIsUpdating] = useState<boolean>(false);
+  const [toggleWatchlist, setToggleWatchlist] = useState<boolean>(
+    !movie?.onUserWatchlist
+  );
  const { publicRuntimeConfig } = getConfig();
+  const { addToast } = useToasts();

  const {
    data,
@@ -154,7 +169,7 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
  }

  if (!data) {
-    return <Error statusCode={404} />;
+    return <ErrorPage statusCode={404} />;
  }

  const showAllStudios = data.productionCompanies.length <= minStudios + 1;
@@ -287,6 +302,80 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
    return intl.formatMessage(messages.play4k, { mediaServerName: 'Jellyfin' });
  }

+  const onClickWatchlistBtn = async (): Promise<void> => {
+    setIsUpdating(true);
+
+    const res = await fetch('/api/v1/watchlist', {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        tmdbId: movie?.id,
+        mediaType: MediaType.MOVIE,
+        title: movie?.title,
+      }),
+    });
+
+    if (!res.ok) {
+      addToast(intl.formatMessage(messages.watchlistError), {
+        appearance: 'error',
+        autoDismiss: true,
+      });
+
+      setIsUpdating(false);
+      return;
+    }
+
+    const data = await res.json();
+
+    if (data) {
+      addToast(
+        <span>
+          {intl.formatMessage(messages.watchlistSuccess, {
+            title: movie?.title,
+            strong: (msg: React.ReactNode) => <strong>{msg}</strong>,
+          })}
+        </span>,
+        { appearance: 'success', autoDismiss: true }
+      );
+    }
+
+    setIsUpdating(false);
+    setToggleWatchlist((prevState) => !prevState);
+  };
+
+  const onClickDeleteWatchlistBtn = async (): Promise<void> => {
+    setIsUpdating(true);
+    try {
+      const res = await fetch(`/api/v1/watchlist/${movie?.id}`, {
+        method: 'DELETE',
+      });
+      if (!res.ok) throw new Error();
+
+      if (res.status === 204) {
+        addToast(
+          <span>
+            {intl.formatMessage(messages.watchlistDeleted, {
+              title: movie?.title,
+              strong: (msg: React.ReactNode) => <strong>{msg}</strong>,
+            })}
+          </span>,
+          { appearance: 'info', autoDismiss: true }
+        );
+      }
+    } catch (e) {
+      addToast(intl.formatMessage(messages.watchlistError), {
+        appearance: 'error',
+        autoDismiss: true,
+      });
+    } finally {
+      setIsUpdating(false);
+      setToggleWatchlist((prevState) => !prevState);
+    }
+  };
+
  return (
    <div
      className="media-page"
@@ -408,6 +497,40 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
          </span>
        </div>
        <div className="media-actions">
+          <>
+            {toggleWatchlist ? (
+              <Tooltip content={intl.formatMessage(messages.addtowatchlist)}>
+                <Button
+                  buttonType={'ghost'}
+                  className="z-40 mr-2"
+                  buttonSize={'md'}
+                  onClick={onClickWatchlistBtn}
+                >
+                  {isUpdating ? (
+                    <Spinner className="h-3" />
+                  ) : (
+                    <StarIcon className={'h-3 text-amber-300'} />
+                  )}
+                </Button>
+              </Tooltip>
+            ) : (
+              <Tooltip
+                content={intl.formatMessage(messages.removefromwatchlist)}
+              >
+                <Button
+                  className="z-40 mr-2"
+                  buttonSize={'md'}
+                  onClick={onClickDeleteWatchlistBtn}
+                >
+                  {isUpdating ? (
+                    <Spinner className="h-3" />
+                  ) : (
+                    <MinusCircleIcon className={'h-3'} />
+                  )}
+                </Button>
+              </Tooltip>
+            )}
+          </>
          <PlayButton links={mediaLinks} />
          <RequestButton
            mediaType="movie"
--- 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,8 +115,8 @@ const RequestCardError = ({ requestData }: RequestCardErrorProps) => {
                      className="group flex items-center"
                    >
                      <span className="avatar-sm">
-                        <Image
-                          src={requestData.requestedBy.avatar}
+                        <CachedImage
+                          src={`/avatarproxy/${requestData.requestedBy.avatar}`}
                          alt=""
                          className="avatar-sm object-cover"
                          width={20}
@@ -390,8 +389,8 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
                className="group flex items-center"
              >
                <span className="avatar-sm">
-                  <Image
-                    src={requestData.requestedBy.avatar}
+                  <CachedImage
+                    src={`/avatarproxy/${requestData.requestedBy.avatar}`}
                    alt=""
                    className="avatar-sm object-cover"
                    width={20}
--- 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';
@@ -190,8 +189,8 @@ const RequestItemError = ({
                            className="group flex items-center truncate"
                          >
                            <span className="avatar-sm ml-1.5">
-                              <Image
-                                src={requestData.requestedBy.avatar}
+                              <CachedImage
+                                src={`/avatarproxy/${requestData.requestedBy.avatar}`}
                                alt=""
                                className="avatar-sm object-cover"
                                width={20}
@@ -249,8 +248,8 @@ const RequestItemError = ({
                          className="group flex items-center truncate"
                        >
                          <span className="avatar-sm ml-1.5">
-                            <Image
-                              src={requestData.modifiedBy.avatar}
+                            <CachedImage
+                              src={`/avatarproxy/${requestData.modifiedBy.avatar}`}
                              alt=""
                              className="avatar-sm object-cover"
                              width={20}
@@ -557,8 +556,8 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
                          className="group flex items-center truncate"
                        >
                          <span className="avatar-sm ml-1.5">
-                            <Image
-                              src={requestData.requestedBy.avatar}
+                            <CachedImage
+                              src={`/avatarproxy/${requestData.requestedBy.avatar}`}
                              alt=""
                              className="avatar-sm object-cover"
                              width={20}
@@ -616,8 +615,8 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
                        className="group flex items-center truncate"
                      >
                        <span className="avatar-sm ml-1.5">
-                          <Image
-                            src={requestData.requestedBy.avatar}
+                          <CachedImage
+                            src={`/avatarproxy/${requestData.requestedBy.avatar}`}
                            alt=""
                            className="avatar-sm object-cover"
                            width={20}
--- 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,8 +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
-                            src={selectedUser.avatar}
+                          <CachedImage
+                            src={`/avatarproxy/${selectedUser.avatar}`}
                            alt=""
                            className="h-6 w-6 flex-shrink-0 rounded-full object-cover"
                            width={24}
@@ -613,8 +613,8 @@ const AdvancedRequester = ({
                                    selected ? 'font-semibold' : 'font-normal'
                                  } flex items-center`}
                                >
-                                  <Image
-                                    src={user.avatar}
+                                  <CachedImage
+                                    src={`/avatarproxy/${user.avatar}`}
                                    alt=""
                                    className="h-6 w-6 flex-shrink-0 rounded-full object-cover"
                                    width={24}
--- a/src/components/Settings/SettingsJellyfin.tsx
+++ b/src/components/Settings/SettingsJellyfin.tsx
@@ -1,6 +1,7 @@
 import Badge from '@app/components/Common/Badge';
 import Button from '@app/components/Common/Button';
 import LoadingSpinner from '@app/components/Common/LoadingSpinner';
+import SensitiveInput from '@app/components/Common/SensitiveInput';
 import LibraryItem from '@app/components/Settings/LibraryItem';
 import globalMessages from '@app/i18n/globalMessages';
 import defineMessages from '@app/utils/defineMessages';
@@ -30,13 +31,14 @@ const messages = defineMessages('components.Settings', {
  jellyfinSettingsSuccess: '{mediaServerName} settings saved successfully!',
  jellyfinSettings: '{mediaServerName} Settings',
  jellyfinSettingsDescription:
-    'Optionally configure the internal and external endpoints for your {mediaServerName} server. In most cases, the external URL is different to the internal URL. A custom password reset URL can also be set for {mediaServerName} login, in case you would like to redirect to a different password reset page.',
+    'Optionally configure the internal and external endpoints for your {mediaServerName} server. In most cases, the external URL is different to the internal URL. A custom password reset URL can also be set for {mediaServerName} login, in case you would like to redirect to a different password reset page. You can also change the Jellyfin API key, which was automatically generated previously.',
  externalUrl: 'External URL',
  hostname: 'Hostname or IP Address',
  port: 'Port',
  enablessl: 'Use SSL',
  urlBase: 'URL Base',
  jellyfinForgotPasswordUrl: 'Forgot Password URL',
+  apiKey: 'API key',
  jellyfinSyncFailedNoLibrariesFound: 'No libraries were found',
  jellyfinSyncFailedAutomaticGroupedFolders:
    'Custom authentication with Automatic Library Grouping not supported',
@@ -444,119 +446,121 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
          </div>
        </div>
      </div>
-      {showAdvancedSettings && (
-        <>
-          <div className="mt-10 mb-6">
-            <h3 className="heading">
-              {publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
-                ? intl.formatMessage(messages.jellyfinSettings, {
-                    mediaServerName: 'Emby',
-                  })
-                : intl.formatMessage(messages.jellyfinSettings, {
-                    mediaServerName: 'Jellyfin',
-                  })}
-            </h3>
-            <p className="description">
-              {publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
-                ? intl.formatMessage(messages.jellyfinSettingsDescription, {
-                    mediaServerName: 'Emby',
-                  })
-                : intl.formatMessage(messages.jellyfinSettingsDescription, {
-                    mediaServerName: 'Jellyfin',
-                  })}
-            </p>
-          </div>
-          <Formik
-            initialValues={{
-              hostname: data?.ip,
-              port: data?.port ?? 8096,
-              useSsl: data?.useSsl,
-              urlBase: data?.urlBase || '',
-              jellyfinExternalUrl: data?.externalHostname || '',
-              jellyfinForgotPasswordUrl: data?.jellyfinForgotPasswordUrl || '',
-            }}
-            validationSchema={JellyfinSettingsSchema}
-            onSubmit={async (values) => {
-              try {
-                const res = await fetch('/api/v1/settings/jellyfin', {
-                  method: 'POST',
-                  headers: {
-                    'Content-Type': 'application/json',
-                  },
-                  body: JSON.stringify({
-                    ip: values.hostname,
-                    port: Number(values.port),
-                    useSsl: values.useSsl,
-                    urlBase: values.urlBase,
-                    externalHostname: values.jellyfinExternalUrl,
-                    jellyfinForgotPasswordUrl: values.jellyfinForgotPasswordUrl,
-                  } as JellyfinSettings),
-                });
-                if (!res.ok) throw new Error(res.statusText, { cause: res });
+      <div className="mt-10 mb-6">
+        <h3 className="heading">
+          {publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
+            ? intl.formatMessage(messages.jellyfinSettings, {
+                mediaServerName: 'Emby',
+              })
+            : intl.formatMessage(messages.jellyfinSettings, {
+                mediaServerName: 'Jellyfin',
+              })}
+        </h3>
+        <p className="description">
+          {publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
+            ? intl.formatMessage(messages.jellyfinSettingsDescription, {
+                mediaServerName: 'Emby',
+              })
+            : intl.formatMessage(messages.jellyfinSettingsDescription, {
+                mediaServerName: 'Jellyfin',
+              })}
+        </p>
+      </div>
+      <Formik
+        initialValues={{
+          hostname: data?.ip,
+          port: data?.port ?? 8096,
+          useSsl: data?.useSsl,
+          urlBase: data?.urlBase || '',
+          jellyfinExternalUrl: data?.externalHostname || '',
+          jellyfinForgotPasswordUrl: data?.jellyfinForgotPasswordUrl || '',
+          apiKey: data?.apiKey,
+        }}
+        validationSchema={JellyfinSettingsSchema}
+        onSubmit={async (values) => {
+          try {
+            const res = await fetch('/api/v1/settings/jellyfin', {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json',
+              },
+              body: JSON.stringify({
+                ip: values.hostname,
+                port: Number(values.port),
+                useSsl: values.useSsl,
+                urlBase: values.urlBase,
+                externalHostname: values.jellyfinExternalUrl,
+                jellyfinForgotPasswordUrl: values.jellyfinForgotPasswordUrl,
+                apiKey: values.apiKey,
+              } as JellyfinSettings),
+            });
+            if (!res.ok) throw new Error(res.statusText, { cause: res });

-                addToast(
-                  intl.formatMessage(messages.jellyfinSettingsSuccess, {
-                    mediaServerName:
-                      publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
-                        ? 'Emby'
-                        : 'Jellyfin',
-                  }),
-                  {
-                    autoDismiss: true,
-                    appearance: 'success',
-                  }
-                );
-              } catch (e) {
-                let errorData;
-                try {
-                  errorData = await e.cause?.text();
-                  errorData = JSON.parse(errorData);
-                } catch {
-                  /* empty */
-                }
-                if (errorData?.message === ApiErrorCode.InvalidUrl) {
-                  addToast(
-                    intl.formatMessage(messages.invalidurlerror, {
-                      mediaServerName:
-                        publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
-                          ? 'Emby'
-                          : 'Jellyfin',
-                    }),
-                    {
-                      autoDismiss: true,
-                      appearance: 'error',
-                    }
-                  );
-                } else {
-                  addToast(
-                    intl.formatMessage(messages.jellyfinSettingsFailure, {
-                      mediaServerName:
-                        publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
-                          ? 'Emby'
-                          : 'Jellyfin',
-                    }),
-                    {
-                      autoDismiss: true,
-                      appearance: 'error',
-                    }
-                  );
-                }
-              } finally {
-                revalidate();
+            addToast(
+              intl.formatMessage(messages.jellyfinSettingsSuccess, {
+                mediaServerName:
+                  publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
+                    ? 'Emby'
+                    : 'Jellyfin',
+              }),
+              {
+                autoDismiss: true,
+                appearance: 'success',
              }
-            }}
-          >
-            {({
-              errors,
-              touched,
-              values,
-              setFieldValue,
-              handleSubmit,
-              isSubmitting,
-              isValid,
-            }) => {
-              return (
-                <form className="section" onSubmit={handleSubmit}>
+            );
+          } catch (e) {
+            let errorData;
+            try {
+              errorData = await e.cause?.text();
+              errorData = JSON.parse(errorData);
+            } catch {
+              /* empty */
+            }
+            if (errorData?.message === ApiErrorCode.InvalidUrl) {
+              addToast(
+                intl.formatMessage(messages.invalidurlerror, {
+                  mediaServerName:
+                    publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
+                      ? 'Emby'
+                      : 'Jellyfin',
+                }),
+                {
+                  autoDismiss: true,
+                  appearance: 'error',
+                }
+              );
+            } else {
+              addToast(
+                intl.formatMessage(messages.jellyfinSettingsFailure, {
+                  mediaServerName:
+                    publicRuntimeConfig.JELLYFIN_TYPE == 'emby'
+                      ? 'Emby'
+                      : 'Jellyfin',
+                }),
+                {
+                  autoDismiss: true,
+                  appearance: 'error',
+                }
+              );
+            }
+          } finally {
+            revalidate();
+          }
+        }}
+      >
+        {({
+          errors,
+          touched,
+          values,
+          setFieldValue,
+          handleSubmit,
+          isSubmitting,
+          isValid,
+        }) => {
+          return (
+            <form className="section" onSubmit={handleSubmit}>
+              {showAdvancedSettings && (
+                <>
                  <div className="form-row">
                    <label htmlFor="hostname" className="text-label">
                      {intl.formatMessage(messages.hostname)}
@@ -618,6 +622,29 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
                      />
                    </div>
                  </div>
+                </>
+              )}
+              <div className="form-row">
+                <label htmlFor="apiKey" className="text-label">
+                  {intl.formatMessage(messages.apiKey)}
+                </label>
+                <div className="form-input-area">
+                  <div className="form-input-field">
+                    <SensitiveInput
+                      as="field"
+                      type="text"
+                      inputMode="url"
+                      id="apiKey"
+                      name="apiKey"
+                    />
+                  </div>
+                  {errors.apiKey && touched.apiKey && (
+                    <div className="error">{errors.apiKey}</div>
+                  )}
+                </div>
+              </div>
+              {showAdvancedSettings && (
+                <>
                  <div className="form-row">
                    <label htmlFor="urlBase" className="text-label">
                      {intl.formatMessage(messages.urlBase)}
@@ -638,75 +665,73 @@ const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({
                        )}
                    </div>
                  </div>
-                  <div className="form-row">
-                    <label htmlFor="jellyfinExternalUrl" className="text-label">
-                      {intl.formatMessage(messages.externalUrl)}
-                    </label>
-                    <div className="form-input-area">
-                      <div className="form-input-field">
-                        <Field
-                          type="text"
-                          inputMode="url"
-                          id="jellyfinExternalUrl"
-                          name="jellyfinExternalUrl"
-                        />
-                      </div>
-                      {errors.jellyfinExternalUrl &&
-                        touched.jellyfinExternalUrl && (
-                          <div className="error">
-                            {errors.jellyfinExternalUrl}
-                          </div>
-                        )}
-                    </div>
+                </>
+              )}
+              <div className="form-row">
+                <label htmlFor="jellyfinExternalUrl" className="text-label">
+                  {intl.formatMessage(messages.externalUrl)}
+                </label>
+                <div className="form-input-area">
+                  <div className="form-input-field">
+                    <Field
+                      type="text"
+                      inputMode="url"
+                      id="jellyfinExternalUrl"
+                      name="jellyfinExternalUrl"
+                    />
                  </div>
-                  <div className="form-row">
-                    <label
-                      htmlFor="jellyfinForgotPasswordUrl"
-                      className="text-label"
+                  {errors.jellyfinExternalUrl &&
+                    touched.jellyfinExternalUrl && (
+                      <div className="error">{errors.jellyfinExternalUrl}</div>
+                    )}
+                </div>
+              </div>
+              <div className="form-row">
+                <label
+                  htmlFor="jellyfinForgotPasswordUrl"
+                  className="text-label"
+                >
+                  {intl.formatMessage(messages.jellyfinForgotPasswordUrl)}
+                </label>
+                <div className="form-input-area">
+                  <div className="form-input-field">
+                    <Field
+                      type="text"
+                      inputMode="url"
+                      id="jellyfinForgotPasswordUrl"
+                      name="jellyfinForgotPasswordUrl"
+                    />
+                  </div>
+                  {errors.jellyfinForgotPasswordUrl &&
+                    touched.jellyfinForgotPasswordUrl && (
+                      <div className="error">
+                        {errors.jellyfinForgotPasswordUrl}
+                      </div>
+                    )}
+                </div>
+              </div>
+              <div className="actions">
+                <div className="flex justify-end">
+                  <span className="ml-3 inline-flex rounded-md shadow-sm">
+                    <Button
+                      buttonType="primary"
+                      type="submit"
+                      disabled={isSubmitting || !isValid}
                    >
-                      {intl.formatMessage(messages.jellyfinForgotPasswordUrl)}
-                    </label>
-                    <div className="form-input-area">
-                      <div className="form-input-field">
-                        <Field
-                          type="text"
-                          inputMode="url"
-                          id="jellyfinForgotPasswordUrl"
-                          name="jellyfinForgotPasswordUrl"
-                        />
-                      </div>
-                      {errors.jellyfinForgotPasswordUrl &&
-                        touched.jellyfinForgotPasswordUrl && (
-                          <div className="error">
-                            {errors.jellyfinForgotPasswordUrl}
-                          </div>
-                        )}
-                    </div>
-                  </div>
-                  <div className="actions">
-                    <div className="flex justify-end">
-                      <span className="ml-3 inline-flex rounded-md shadow-sm">
-                        <Button
-                          buttonType="primary"
-                          type="submit"
-                          disabled={isSubmitting || !isValid}
-                        >
-                          <ArrowDownOnSquareIcon />
-                          <span>
-                            {isSubmitting
-                              ? intl.formatMessage(globalMessages.saving)
-                              : intl.formatMessage(globalMessages.save)}
-                          </span>
-                        </Button>
+                      <ArrowDownOnSquareIcon />
+                      <span>
+                        {isSubmitting
+                          ? intl.formatMessage(globalMessages.saving)
+                          : intl.formatMessage(globalMessages.save)}
                      </span>
-                    </div>
-                  </div>
-                </form>
-              );
-            }}
-          </Formik>
-        </>
-      )}
+                    </Button>
+                  </span>
+                </div>
+              </div>
+            </form>
+          );
+        }}
+      </Formik>
    </>
  );
 };
--- a/src/components/Settings/SettingsJobsCache/index.tsx
+++ b/src/components/Settings/SettingsJobsCache/index.tsx
@@ -81,6 +81,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',
+    useravatars: 'User Avatars',
  }
 );

@@ -558,6 +559,19 @@ const SettingsJobs = () => {
                {formatBytes(cacheData?.imageCache.tmdb.size ?? 0)}
              </Table.TD>
            </tr>
+            <tr>
+              <Table.TD>
+                {intl.formatMessage(messages.useravatars)} (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/TvDetails/index.tsx
+++ b/src/components/TvDetails/index.tsx
@@ -2,6 +2,7 @@ import RTAudFresh from '@app/assets/rt_aud_fresh.svg';
 import RTAudRotten from '@app/assets/rt_aud_rotten.svg';
 import RTFresh from '@app/assets/rt_fresh.svg';
 import RTRotten from '@app/assets/rt_rotten.svg';
+import Spinner from '@app/assets/spinner.svg';
 import TmdbLogo from '@app/assets/tmdb_logo.svg';
 import Badge from '@app/components/Common/Badge';
 import Button from '@app/components/Common/Button';
@@ -40,11 +41,19 @@ import {
  FilmIcon,
  PlayIcon,
 } from '@heroicons/react/24/outline';
-import { ChevronDownIcon } from '@heroicons/react/24/solid';
+import {
+  ChevronDownIcon,
+  MinusCircleIcon,
+  StarIcon,
+} from '@heroicons/react/24/solid';
 import type { RTRating } from '@server/api/rating/rottentomatoes';
 import { ANIME_KEYWORD_ID } from '@server/api/themoviedb/constants';
 import { IssueStatus } from '@server/constants/issue';
-import { MediaRequestStatus, MediaStatus } from '@server/constants/media';
+import {
+  MediaRequestStatus,
+  MediaStatus,
+  MediaType,
+} from '@server/constants/media';
 import { MediaServerType } from '@server/constants/server';
 import type { Crew } from '@server/models/common';
 import type { TvDetails as TvDetailsType } from '@server/models/Tv';
@@ -55,6 +64,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useEffect, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
+import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';

 const messages = defineMessages('components.TvDetails', {
@@ -89,6 +99,12 @@ const messages = defineMessages('components.TvDetails', {
  rtcriticsscore: 'Rotten Tomatoes Tomatometer',
  rtaudiencescore: 'Rotten Tomatoes Audience Score',
  tmdbuserscore: 'TMDB User Score',
+  watchlistSuccess: '<strong>{title}</strong> added to watchlist successfully!',
+  watchlistDeleted:
+    '<strong>{title}</strong> Removed from watchlist successfully!',
+  watchlistError: 'Something went wrong try again.',
+  removefromwatchlist: 'Remove From Watchlist',
+  addtowatchlist: 'Add To Watchlist',
 });

 interface TvDetailsProps {
@@ -106,7 +122,12 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
    router.query.manage == '1' ? true : false
  );
  const [showIssueModal, setShowIssueModal] = useState(false);
+  const [isUpdating, setIsUpdating] = useState<boolean>(false);
+  const [toggleWatchlist, setToggleWatchlist] = useState<boolean>(
+    !tv?.onUserWatchlist
+  );
  const { publicRuntimeConfig } = getConfig();
+  const { addToast } = useToasts();

  const {
    data,
@@ -302,6 +323,82 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
    return intl.formatMessage(messages.play4k, { mediaServerName: 'Jellyfin' });
  }

+  const onClickWatchlistBtn = async (): Promise<void> => {
+    setIsUpdating(true);
+
+    const res = await fetch('/api/v1/watchlist', {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        tmdbId: tv?.id,
+        mediaType: MediaType.TV,
+        title: tv?.name,
+      }),
+    });
+
+    if (!res.ok) {
+      addToast(intl.formatMessage(messages.watchlistError), {
+        appearance: 'error',
+        autoDismiss: true,
+      });
+
+      setIsUpdating(false);
+      return;
+    }
+
+    const data = await res.json();
+
+    if (data) {
+      addToast(
+        <span>
+          {intl.formatMessage(messages.watchlistSuccess, {
+            title: tv?.name,
+            strong: (msg: React.ReactNode) => <strong>{msg}</strong>,
+          })}
+        </span>,
+        { appearance: 'success', autoDismiss: true }
+      );
+    }
+
+    setIsUpdating(false);
+    setToggleWatchlist((prevState) => !prevState);
+  };
+
+  const onClickDeleteWatchlistBtn = async (): Promise<void> => {
+    setIsUpdating(true);
+
+    const res = await fetch('/api/v1/watchlist/' + tv?.id, {
+      method: 'DELETE',
+    });
+
+    if (!res.ok) {
+      addToast(intl.formatMessage(messages.watchlistError), {
+        appearance: 'error',
+        autoDismiss: true,
+      });
+
+      setIsUpdating(false);
+      return;
+    }
+
+    if (res.status === 204) {
+      addToast(
+        <span>
+          {intl.formatMessage(messages.watchlistDeleted, {
+            title: tv?.name,
+            strong: (msg: React.ReactNode) => <strong>{msg}</strong>,
+          })}
+        </span>,
+        { appearance: 'info', autoDismiss: true }
+      );
+      setIsUpdating(false);
+      setToggleWatchlist((prevState) => !prevState);
+    }
+  };
+
  return (
    <div
      className="media-page"
@@ -433,6 +530,40 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
          </span>
        </div>
        <div className="media-actions">
+          <>
+            {toggleWatchlist ? (
+              <Tooltip content={intl.formatMessage(messages.addtowatchlist)}>
+                <Button
+                  buttonType={'ghost'}
+                  className="z-40 mr-2"
+                  buttonSize={'md'}
+                  onClick={onClickWatchlistBtn}
+                >
+                  {isUpdating ? (
+                    <Spinner className="h-3" />
+                  ) : (
+                    <StarIcon className={'h-3 text-amber-300'} />
+                  )}
+                </Button>
+              </Tooltip>
+            ) : (
+              <Tooltip
+                content={intl.formatMessage(messages.removefromwatchlist)}
+              >
+                <Button
+                  className="z-40 mr-2"
+                  buttonSize={'md'}
+                  onClick={onClickDeleteWatchlistBtn}
+                >
+                  {isUpdating ? (
+                    <Spinner className="h-3" />
+                  ) : (
+                    <MinusCircleIcon className={'h-3'} />
+                  )}
+                </Button>
+              </Tooltip>
+            )}
+          </>
          <PlayButton links={mediaLinks} />
          <RequestButton
            mediaType="tv"
--- 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 type { UserResultsResponse } from '@server/interfaces/api/userInterfaces';
 import getConfig from 'next/config';
-import Image from 'next/image';
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
@@ -56,14 +56,6 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
    `/api/v1/user?take=${children}`
  );

-  data?.forEach((user, pos) => {
-    if (
-      existingUsers?.results.some((data) => data.jellyfinUserId === user.id)
-    ) {
-      data?.splice(pos, 1);
-    }
-  });
-
  const importUsers = async () => {
    setImporting(true);

@@ -209,64 +201,71 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-gray-700 bg-gray-600">
-                      {data?.map((user) => (
-                        <tr key={`user-${user.id}`}>
-                          <td className="whitespace-nowrap px-4 py-4 text-sm font-medium leading-5 text-gray-100">
-                            <span
-                              role="checkbox"
-                              tabIndex={0}
-                              aria-checked={isSelectedUser(user.id)}
-                              onClick={() => toggleUser(user.id)}
-                              onKeyDown={(e) => {
-                                if (e.key === 'Enter' || e.key === 'Space') {
-                                  toggleUser(user.id);
-                                }
-                              }}
-                              className="relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center pt-2 focus:outline-none"
-                            >
+                      {data
+                        ?.filter(
+                          (user) =>
+                            !existingUsers?.results.some(
+                              (u) => u.jellyfinUserId === user.id
+                            )
+                        )
+                        .map((user) => (
+                          <tr key={`user-${user.id}`}>
+                            <td className="whitespace-nowrap px-4 py-4 text-sm font-medium leading-5 text-gray-100">
                              <span
-                                aria-hidden="true"
-                                className={`${
-                                  isSelectedUser(user.id)
-                                    ? 'bg-indigo-500'
-                                    : 'bg-gray-800'
-                                } absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
-                              ></span>
-                              <span
-                                aria-hidden="true"
-                                className={`${
-                                  isSelectedUser(user.id)
-                                    ? 'translate-x-5'
-                                    : 'translate-x-0'
-                                } absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
-                              ></span>
-                            </span>
-                          </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
-                                className="h-10 w-10 flex-shrink-0 rounded-full"
-                                src={user.thumb}
-                                alt=""
-                                width={40}
-                                height={40}
-                              />
-                              <div className="ml-4">
-                                <div className="text-base font-bold leading-5">
-                                  {user.username}
-                                </div>
-                                {/* {user.username &&
+                                role="checkbox"
+                                tabIndex={0}
+                                aria-checked={isSelectedUser(user.id)}
+                                onClick={() => toggleUser(user.id)}
+                                onKeyDown={(e) => {
+                                  if (e.key === 'Enter' || e.key === 'Space') {
+                                    toggleUser(user.id);
+                                  }
+                                }}
+                                className="relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center pt-2 focus:outline-none"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  className={`${
+                                    isSelectedUser(user.id)
+                                      ? 'bg-indigo-500'
+                                      : 'bg-gray-800'
+                                  } absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
+                                ></span>
+                                <span
+                                  aria-hidden="true"
+                                  className={`${
+                                    isSelectedUser(user.id)
+                                      ? 'translate-x-5'
+                                      : 'translate-x-0'
+                                  } absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
+                                ></span>
+                              </span>
+                            </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">
+                                <CachedImage
+                                  className="h-10 w-10 flex-shrink-0 rounded-full"
+                                  src={`/avatarproxy/${user.thumb}`}
+                                  alt=""
+                                  width={40}
+                                  height={40}
+                                />
+                                <div className="ml-4">
+                                  <div className="text-base font-bold leading-5">
+                                    {user.username}
+                                  </div>
+                                  {/* {user.username &&
                                  user.username.toLowerCase() !==
                                  user.email && (
                                    <div className="text-sm leading-5 text-gray-300">
                                      {user.email}
                                    </div>
                                  )} */}
+                                </div>
                              </div>
-                            </div>
-                          </td>
-                        </tr>
-                      ))}
+                            </td>
+                          </tr>
+                        ))}
                    </tbody>
                  </table>
                </div>
--- 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';
@@ -29,7 +30,6 @@ import type { UserResultsResponse } from '@server/interfaces/api/userInterfaces'
 import { hasPermission } from '@server/lib/permissions';
 import { Field, Form, Formik } from 'formik';
 import getConfig from 'next/config';
-import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
@@ -634,9 +634,9 @@ const UserList = () => {
                    href={`/users/${user.id}`}
                    className="h-10 w-10 flex-shrink-0"
                  >
-                    <Image
+                    <CachedImage
                      className="h-10 w-10 rounded-full object-cover"
-                      src={user.avatar}
+                      src={`/avatarproxy/${user.avatar}`}
                      alt=""
                      width={40}
                      height={40}
--- 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,9 +42,9 @@ 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
              className="h-24 w-24 rounded-full bg-gray-600 object-cover ring-1 ring-gray-700"
-              src={user.avatar}
+              src={`/avatarproxy/${user.avatar}`}
              alt=""
              width={96}
              height={96}
--- a/src/i18n/locale/en.json
+++ b/src/i18n/locale/en.json
@@ -286,6 +286,7 @@
  "components.MediaSlider.ShowMoreCard.seemore": "See More",
  "components.MovieDetails.MovieCast.fullcast": "Full Cast",
  "components.MovieDetails.MovieCrew.fullcrew": "Full Crew",
+  "components.MovieDetails.addtowatchlist": "Add To Watchlist",
  "components.MovieDetails.budget": "Budget",
  "components.MovieDetails.cast": "Cast",
  "components.MovieDetails.digitalrelease": "Digital Release",
@@ -306,6 +307,7 @@
  "components.MovieDetails.productioncountries": "Production {countryCount, plural, one {Country} other {Countries}}",
  "components.MovieDetails.recommendations": "Recommendations",
  "components.MovieDetails.releasedate": "{releaseCount, plural, one {Release Date} other {Release Dates}}",
+  "components.MovieDetails.removefromwatchlist": "Remove From Watchlist",
  "components.MovieDetails.reportissue": "Report an Issue",
  "components.MovieDetails.revenue": "Revenue",
  "components.MovieDetails.rtaudiencescore": "Rotten Tomatoes Audience Score",
@@ -319,6 +321,9 @@
  "components.MovieDetails.theatricalrelease": "Theatrical Release",
  "components.MovieDetails.tmdbuserscore": "TMDB User Score",
  "components.MovieDetails.viewfullcrew": "View Full Crew",
+  "components.MovieDetails.watchlistDeleted": "<strong>{title}</strong> Removed from watchlist successfully!",
+  "components.MovieDetails.watchlistError": "Something went wrong try again.",
+  "components.MovieDetails.watchlistSuccess": "<strong>{title}</strong> added to watchlist successfully!",
  "components.MovieDetails.watchtrailer": "Watch Trailer",
  "components.NotificationTypeSelector.adminissuecommentDescription": "Get notified when other users comment on issues.",
  "components.NotificationTypeSelector.adminissuereopenedDescription": "Get notified when issues are reopened by other users.",
@@ -815,6 +820,7 @@
  "components.Settings.SettingsJobsCache.runnow": "Run Now",
  "components.Settings.SettingsJobsCache.sonarr-scan": "Sonarr Scan",
  "components.Settings.SettingsJobsCache.unknownJob": "Unknown Job",
+  "components.Settings.SettingsJobsCache.useravatars": "User Avatars",
  "components.Settings.SettingsLogs.copiedLogMessage": "Copied log message to clipboard.",
  "components.Settings.SettingsLogs.copyToClipboard": "Copy to Clipboard",
  "components.Settings.SettingsLogs.extraData": "Additional Data",
@@ -950,7 +956,7 @@
  "components.Settings.is4k": "4K",
  "components.Settings.jellyfinForgotPasswordUrl": "Forgot Password URL",
  "components.Settings.jellyfinSettings": "{mediaServerName} Settings",
-  "components.Settings.jellyfinSettingsDescription": "Optionally configure the internal and external endpoints for your {mediaServerName} server. In most cases, the external URL is different to the internal URL. A custom password reset URL can also be set for {mediaServerName} login, in case you would like to redirect to a different password reset page.",
+  "components.Settings.jellyfinSettingsDescription": "Optionally configure the internal and external endpoints for your {mediaServerName} server. In most cases, the external URL is different to the internal URL. A custom password reset URL can also be set for {mediaServerName} login, in case you would like to redirect to a different password reset page. You can also change the Jellyfin API key, which was automatically generated previously.",
  "components.Settings.jellyfinSettingsFailure": "Something went wrong while saving {mediaServerName} settings.",
  "components.Settings.jellyfinSettingsSuccess": "{mediaServerName} settings saved successfully!",
  "components.Settings.jellyfinSyncFailedAutomaticGroupedFolders": "Custom authentication with Automatic Library Grouping not supported",
@@ -1071,6 +1077,7 @@
  "components.TvDetails.Season.somethingwentwrong": "Something went wrong while retrieving season data.",
  "components.TvDetails.TvCast.fullseriescast": "Full Series Cast",
  "components.TvDetails.TvCrew.fullseriescrew": "Full Series Crew",
+  "components.TvDetails.addtowatchlist": "Add To Watchlist",
  "components.TvDetails.anime": "Anime",
  "components.TvDetails.cast": "Cast",
  "components.TvDetails.episodeCount": "{episodeCount, plural, one {# Episode} other {# Episodes}}",
@@ -1088,6 +1095,7 @@
  "components.TvDetails.play4k": "Play 4K on {mediaServerName}",
  "components.TvDetails.productioncountries": "Production {countryCount, plural, one {Country} other {Countries}}",
  "components.TvDetails.recommendations": "Recommendations",
+  "components.TvDetails.removefromwatchlist": "Remove From Watchlist",
  "components.TvDetails.reportissue": "Report an Issue",
  "components.TvDetails.rtaudiencescore": "Rotten Tomatoes Audience Score",
  "components.TvDetails.rtcriticsscore": "Rotten Tomatoes Tomatometer",
@@ -1100,6 +1108,9 @@
  "components.TvDetails.streamingproviders": "Currently Streaming On",
  "components.TvDetails.tmdbuserscore": "TMDB User Score",
  "components.TvDetails.viewfullcrew": "View Full Crew",
+  "components.TvDetails.watchlistDeleted": "<strong>{title}</strong> Removed from watchlist successfully!",
+  "components.TvDetails.watchlistError": "Something went wrong try again.",
+  "components.TvDetails.watchlistSuccess": "<strong>{title}</strong> added to watchlist successfully!",
  "components.TvDetails.watchtrailer": "Watch Trailer",
  "components.UserList.accounttype": "Type",
  "components.UserList.admin": "Admin",
Author	SHA1	Message	Date
JoaquinOlivero	374eaee616	fix: format	2024-08-13 22:35:42 +00:00
JoaquinOlivero	7e7a65caee	refactor: use 'mime' package to determine a file's extension	2024-08-13 22:30:37 +00:00
JoaquinOlivero	7369802146	fix: requested changes	2024-08-13 22:30:04 +00:00
JoaquinOlivero	4b18817893	fix: remove unexpired unused image when user changes avatar	2024-08-13 22:29:53 +00:00
JoaquinOlivero	5fc5c2b4a3	fix: set correct src url for cached image	2024-08-13 22:29:38 +00:00
JoaquinOlivero	f8ae87f2b5	fix: show the correct avatar in the list of available users in advanced request	2024-08-13 22:29:24 +00:00
JoaquinOlivero	894799d626	fix: set avatar image url	2024-08-13 22:29:01 +00:00
JoaquinOlivero	98b388b999	fix: extract keys	2024-08-13 22:28:48 +00:00
JoaquinOlivero	6ab41a5ec2	refactor: proxy and cache user avatar images	2024-08-13 22:28:38 +00:00
Gauthier	bd4da6d5fc	feat(jellyfinapi): switch to API tokens instead of auth tokens (#868 ) * feat(jellyfinapi): create Jellyfin API key from admin user * fix(jellyfinapi): add migration script for Jellyfin API key * feat(jellyfinapi): use Jellyfin API key instead of admin auth token * fix(jellyfinapi): fix api key migration * feat(jellyfinapi): add API key field to Jellyfin settings * fix: move the API key field in the Jellyfin settings	2024-08-13 19:01:45 +05:00
Gauthier	12f908de7f	fix(tmdb): fallback movie/show overview to English when none is available in requested locale (#928 ) This PR adds a second call to TMDB to retried the overview in English if no overview is available in the requested locale fix #925	2024-08-13 10:41:59 +02:00
Gauthier	61dcd8e487	fix: update the filter removing existing users from Jellyfin import modal (#924 ) Currently import button sometimes shows already imported users and this would break it if an admin tries to import an already imported user.	2024-08-11 19:25:17 +02:00
Gauthier	9aee8887d3	fix: rewrite request from axios to Fetch (#920 )	2024-08-07 14:33:44 +02:00
Joaquin Olivero	2348f23f43	feat: Option on item's page to add/remove from watchlist (#781 ) * feat: adds button on the page of a media item to add or remove it from a user's watchlist re #730 * fix: whitespace and i18n key * style: fix code format to the required standards * refactor: change axios for the fetch api --------- Co-authored-by: JoaquinOlivero <joaquin.olivero@hotmail.com>	2024-08-07 13:46:57 +02:00