fix: rewrite avatarproxy and CachedImage (#1016)

* fix: rewrite avatarproxy and CachedImage Avatar proxy was allowing every request to be proxied, no matter the original ressource's origin or filetype. This PR fixes it be allowing only relevant resources to be cached, i.e. Jellyfin/Emby images and TMDB images. fix #1012, #1013 * fix: resolve CodeQL error * fix: resolve CodeQL error * fix: resolve review comments * fix: resolve review comment * fix: resolve CodeQL error * fix: update imageproxy path
2025-12-24 02:39:18 -05:00 · 2024-10-17 15:24:15 +02:00
parent a351264b87
commit 4e48fdf2cb
29 changed files with 97 additions and 40 deletions
--- a/server/routes/auth.ts
+++ b/server/routes/auth.ts
@@ -262,8 +262,6 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
            urlBase: body.urlBase,
          });

-    const { externalHostname } = getSettings().jellyfin;
-
    // Try to find deviceId that corresponds to jellyfin user, else generate a new one
    let user = await userRepository.findOne({
      where: { jellyfinUsername: body.username },
@@ -281,11 +279,6 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
    // First we need to attempt to log the user in to jellyfin
    const jellyfinserver = new JellyfinAPI(hostname ?? '', undefined, deviceId);

-    const jellyfinHost =
-      externalHostname && externalHostname.length > 0
-        ? externalHostname
-        : hostname;
-
    const ip = req.ip;
    let clientIp;

@@ -336,7 +329,7 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
            jellyfinAuthToken: account.AccessToken,
            permissions: Permission.ADMIN,
            avatar: account.User.PrimaryImageTag
-              ? `${jellyfinHost}/Users/${account.User.Id}/Images/Primary/?tag=${account.User.PrimaryImageTag}&quality=90`
+              ? `/Users/${account.User.Id}/Images/Primary/?tag=${account.User.PrimaryImageTag}&quality=90`
              : gravatarUrl(body.email || account.User.Name, {
                  default: 'mm',
                  size: 200,
@@ -355,7 +348,7 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
            jellyfinAuthToken: account.AccessToken,
            permissions: Permission.ADMIN,
            avatar: account.User.PrimaryImageTag
-              ? `${jellyfinHost}/Users/${account.User.Id}/Images/Primary/?tag=${account.User.PrimaryImageTag}&quality=90`
+              ? `/Users/${account.User.Id}/Images/Primary/?tag=${account.User.PrimaryImageTag}&quality=90`
              : gravatarUrl(body.email || account.User.Name, {
                  default: 'mm',
                  size: 200,
@@ -410,7 +403,7 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
      );
      // Update the users avatar with their jellyfin profile pic (incase it changed)
      if (account.User.PrimaryImageTag) {
-        const avatar = `${jellyfinHost}/Users/${account.User.Id}/Images/Primary/?tag=${account.User.PrimaryImageTag}&quality=90`;
+        const avatar = `/Users/${account.User.Id}/Images/Primary/?tag=${account.User.PrimaryImageTag}&quality=90`;
        if (avatar !== user.avatar) {
          const avatarProxy = new ImageProxy('avatar', '');
          avatarProxy.clearCachedImage(user.avatar);
@@ -467,7 +460,7 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
        jellyfinDeviceId: deviceId,
        permissions: settings.main.defaultPermissions,
        avatar: account.User.PrimaryImageTag
-          ? `${jellyfinHost}/Users/${account.User.Id}/Images/Primary/?tag=${account.User.PrimaryImageTag}&quality=90`
+          ? `/Users/${account.User.Id}/Images/Primary/?tag=${account.User.PrimaryImageTag}&quality=90`
          : gravatarUrl(body.email || account.User.Name, {
              default: 'mm',
              size: 200,
--- a/server/routes/avatarproxy.ts
+++ b/server/routes/avatarproxy.ts
@@ -1,5 +1,8 @@
+import { MediaServerType } from '@server/constants/server';
 import ImageProxy from '@server/lib/imageproxy';
+import { getSettings } from '@server/lib/settings';
 import logger from '@server/logger';
+import { getHostname } from '@server/utils/getHostname';
 import { Router } from 'express';

 const router = Router();
@@ -7,9 +10,25 @@ 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;
-
+  let imagePath = '';
  try {
+    const jellyfinAvatar = req.url.match(
+      /(\/Users\/\w+\/Images\/Primary\/?\?tag=\w+&quality=90)$/
+    )?.[1];
+    if (!jellyfinAvatar) {
+      const mediaServerType = getSettings().main.mediaServerType;
+      throw new Error(
+        `Provided URL is not ${
+          mediaServerType === MediaServerType.JELLYFIN
+            ? 'a Jellyfin'
+            : 'an Emby'
+        } avatar.`
+      );
+    }
+
+    const imageUrl = new URL(jellyfinAvatar, getHostname());
+    imagePath = imageUrl.toString();
+
    const imageData = await avatarImageProxy.getImage(imagePath);

    res.writeHead(200, {
--- a/server/routes/settings/index.ts
+++ b/server/routes/settings/index.ts
@@ -377,11 +377,6 @@ settingsRoutes.get('/jellyfin/library', async (req, res, next) => {

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

  const userRepository = getRepository(User);
  const admin = await userRepository.findOneOrFail({
@@ -401,7 +396,7 @@ settingsRoutes.get('/jellyfin/users', async (req, res) => {
    username: user.Name,
    id: user.Id,
    thumb: user.PrimaryImageTag
-      ? `${jellyfinHost}/Users/${user.Id}/Images/Primary/?tag=${user.PrimaryImageTag}&quality=90`
+      ? `/Users/${user.Id}/Images/Primary/?tag=${user.PrimaryImageTag}&quality=90`
      : gravatarUrl(user.Name, { default: 'mm', size: 200 }),
    email: user.Name,
  }));
--- a/server/routes/user/index.ts
+++ b/server/routes/user/index.ts
@@ -516,12 +516,6 @@ router.post(

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

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

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

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

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

-  if (typeof imageUrl === 'string' && imageUrl.startsWith('http')) {
-    const parsedUrl = new URL(imageUrl);
-
-    if (parsedUrl.host === 'image.tmdb.org') {
-      if (currentSettings.cacheImages)
-        imageUrl = imageUrl.replace('https://image.tmdb.org', '/imageproxy');
-    } else if (parsedUrl.host !== 'gravatar.com') {
-      imageUrl = '/avatarproxy/' + imageUrl;
-    }
+  if (type === 'tmdb') {
+    // tmdb stuff
+    imageUrl =
+      currentSettings.cacheImages && !src.startsWith('/')
+        ? src.replace(/^https:\/\/image\.tmdb\.org\//, '/imageproxy/')
+        : src;
+  } else if (type === 'avatar') {
+    // jellyfin avatar (in any)
+    const jellyfinAvatar = src.match(
+      /(\/Users\/\w+\/Images\/Primary\/?\?tag=\w+&quality=90)$/
+    )?.[1];
+    imageUrl = jellyfinAvatar ? `/avatarproxy` + jellyfinAvatar : src;
+  } else {
+    return null;
  }

  return <Image unoptimized loader={imageLoader} src={imageUrl} {...props} />;
--- a/src/components/Common/ImageFader/index.tsx
+++ b/src/components/Common/ImageFader/index.tsx
@@ -61,6 +61,7 @@ const ImageFader: ForwardRefRenderFunction<HTMLDivElement, ImageFaderProps> = (
          {...props}
        >
          <CachedImage
+            type="tmdb"
            className="absolute inset-0 h-full w-full"
            alt=""
            src={imageUrl}
--- a/src/components/Common/Modal/index.tsx
+++ b/src/components/Common/Modal/index.tsx
@@ -123,6 +123,7 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
          {backdrop && (
            <div className="absolute top-0 left-0 right-0 z-0 h-64 max-h-full w-full">
              <CachedImage
+                type="tmdb"
                alt=""
                src={backdrop}
                style={{ width: '100%', height: '100%', objectFit: 'cover' }}
--- a/src/components/CompanyCard/index.tsx
+++ b/src/components/CompanyCard/index.tsx
@@ -33,6 +33,7 @@ const CompanyCard = ({ image, url, name }: CompanyCardProps) => {
    >
      <div className="relative h-full w-full">
        <CachedImage
+          type="tmdb"
          src={image}
          alt={name}
          className="relative z-40 h-full w-full"
--- a/src/components/GenreCard/index.tsx
+++ b/src/components/GenreCard/index.tsx
@@ -36,6 +36,7 @@ const GenreCard = ({ image, url, name, canExpand = false }: GenreCardProps) => {
      tabIndex={0}
    >
      <CachedImage
+        type="tmdb"
        src={image}
        alt=""
        style={{ width: '100%', height: '100%', objectFit: 'cover' }}
--- a/src/components/IssueDetails/IssueComment/index.tsx
+++ b/src/components/IssueDetails/IssueComment/index.tsx
@@ -89,7 +89,8 @@ const IssueComment = ({
      </Transition>
      <Link href={isActiveUser ? '/profile' : `/users/${comment.user.id}`}>
        <CachedImage
-          src={`${comment.user.avatar}`}
+          type="avatar"
+          src={comment.user.avatar}
          alt=""
          className="h-10 w-10 scale-100 transform-gpu rounded-full object-cover ring-1 ring-gray-500 transition duration-300 hover:scale-105"
          width={40}
--- a/src/components/IssueDetails/index.tsx
+++ b/src/components/IssueDetails/index.tsx
@@ -217,6 +217,7 @@ const IssueDetails = () => {
      {data.backdropPath && (
        <div className="media-page-bg-image">
          <CachedImage
+            type="tmdb"
            alt=""
            src={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath}`}
            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
@@ -235,6 +236,7 @@ const IssueDetails = () => {
      <div className="media-header">
        <div className="media-poster">
          <CachedImage
+            type="tmdb"
            src={
              data.posterPath
                ? `https://image.tmdb.org/t/p/w600_and_h900_bestv2${data.posterPath}`
@@ -287,7 +289,8 @@ const IssueDetails = () => {
                  className="group ml-1 inline-flex h-full items-center xl:ml-1.5"
                >
                  <CachedImage
-                    src={`${issueData.createdBy.avatar}`}
+                    type="avatar"
+                    src={issueData.createdBy.avatar}
                    alt=""
                    className="mr-0.5 h-5 w-5 scale-100 transform-gpu rounded-full object-cover transition duration-300 group-hover:scale-105 xl:mr-1 xl:h-6 xl:w-6"
                    width={20}
--- a/src/components/IssueList/IssueItem/index.tsx
+++ b/src/components/IssueList/IssueItem/index.tsx
@@ -112,6 +112,7 @@ const IssueItem = ({ issue }: IssueItemProps) => {
      {title.backdropPath && (
        <div className="absolute inset-0 z-0 w-full bg-cover bg-center xl:w-2/3">
          <CachedImage
+            type="tmdb"
            src={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${title.backdropPath}`}
            alt=""
            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
@@ -137,6 +138,7 @@ const IssueItem = ({ issue }: IssueItemProps) => {
            className="relative h-auto w-12 flex-shrink-0 scale-100 transform-gpu overflow-hidden rounded-md transition duration-300 hover:scale-105"
          >
            <CachedImage
+              type="tmdb"
              src={
                title.posterPath
                  ? `https://image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`
@@ -226,7 +228,8 @@ const IssueItem = ({ issue }: IssueItemProps) => {
                        className="group flex items-center truncate"
                      >
                        <CachedImage
-                          src={'/avatarproxy/' + issue.createdBy.avatar}
+                          type="avatar"
+                          src={issue.createdBy.avatar}
                          alt=""
                          className="avatar-sm ml-1.5 object-cover"
                          width={20}
--- a/src/components/Layout/UserDropdown/index.tsx
+++ b/src/components/Layout/UserDropdown/index.tsx
@@ -57,6 +57,7 @@ const UserDropdown = () => {
          data-testid="user-menu"
        >
          <CachedImage
+            type="avatar"
            className="h-8 w-8 rounded-full object-cover sm:h-10 sm:w-10"
            src={user ? user.avatar : ''}
            alt=""
@@ -80,6 +81,7 @@ const UserDropdown = () => {
            <div className="flex flex-col space-y-4 px-4 py-4">
              <div className="flex items-center space-x-2">
                <CachedImage
+                  type="avatar"
                  className="h-8 w-8 rounded-full object-cover sm:h-10 sm:w-10"
                  src={user ? user.avatar : ''}
                  alt=""
--- a/src/components/ManageSlideOver/index.tsx
+++ b/src/components/ManageSlideOver/index.tsx
@@ -369,6 +369,7 @@ const ManageSlideOver = ({
                                    content={user.displayName}
                                  >
                                    <CachedImage
+                                      type="avatar"
                                      src={user.avatar}
                                      alt={user.displayName}
                                      className="h-8 w-8 scale-100 transform-gpu rounded-full object-cover ring-1 ring-gray-500 transition duration-300 hover:scale-105"
@@ -530,6 +531,7 @@ const ManageSlideOver = ({
                                    content={user.displayName}
                                  >
                                    <CachedImage
+                                      type="avatar"
                                      src={user.avatar}
                                      alt={user.displayName}
                                      className="h-8 w-8 scale-100 transform-gpu rounded-full object-cover ring-1 ring-gray-500 transition duration-300 hover:scale-105"
--- a/src/components/MovieDetails/index.tsx
+++ b/src/components/MovieDetails/index.tsx
@@ -448,6 +448,7 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
      {data.backdropPath && (
        <div className="media-page-bg-image">
          <CachedImage
+            type="tmdb"
            alt=""
            src={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath}`}
            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
@@ -494,6 +495,7 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
      <div className="media-header">
        <div className="media-poster">
          <CachedImage
+            type="tmdb"
            src={
              data.posterPath
                ? `https://image.tmdb.org/t/p/w600_and_h900_bestv2${data.posterPath}`
@@ -741,6 +743,7 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
                <div className="group relative z-0 scale-100 transform-gpu cursor-pointer overflow-hidden rounded-lg bg-gray-800 bg-cover bg-center shadow-md ring-1 ring-gray-700 transition duration-300 hover:scale-105 hover:ring-gray-500">
                  <div className="absolute inset-0 z-0">
                    <CachedImage
+                      type="tmdb"
                      src={`https://image.tmdb.org/t/p/w1440_and_h320_multi_faces/${data.collection.backdropPath}`}
                      alt=""
                      style={{
--- a/src/components/PersonCard/index.tsx
+++ b/src/components/PersonCard/index.tsx
@@ -51,6 +51,7 @@ const PersonCard = ({
              {profilePath ? (
                <div className="relative h-full w-3/4 overflow-hidden rounded-full ring-1 ring-gray-700">
                  <CachedImage
+                    type="tmdb"
                    src={`https://image.tmdb.org/t/p/w600_and_h900_bestv2${profilePath}`}
                    alt=""
                    style={{
--- a/src/components/PersonDetails/index.tsx
+++ b/src/components/PersonDetails/index.tsx
@@ -227,6 +227,7 @@ const PersonDetails = () => {
        {data.profilePath && (
          <div className="relative mb-6 mr-0 h-36 w-36 flex-shrink-0 overflow-hidden rounded-full ring-1 ring-gray-700 lg:mb-0 lg:mr-6 lg:h-44 lg:w-44">
            <CachedImage
+              type="tmdb"
              src={`https://image.tmdb.org/t/p/w600_and_h900_bestv2${data.profilePath}`}
              alt=""
              style={{ width: '100%', height: '100%', objectFit: 'cover' }}
--- a/src/components/RequestCard/index.tsx
+++ b/src/components/RequestCard/index.tsx
@@ -116,6 +116,7 @@ const RequestCardError = ({ requestData }: RequestCardErrorProps) => {
                    >
                      <span className="avatar-sm">
                        <CachedImage
+                          type="avatar"
                          src={requestData.requestedBy.avatar}
                          alt=""
                          className="avatar-sm object-cover"
@@ -345,6 +346,7 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
        {title.backdropPath && (
          <div className="absolute inset-0 z-0">
            <CachedImage
+              type="tmdb"
              alt=""
              src={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${title.backdropPath}`}
              style={{ width: '100%', height: '100%', objectFit: 'cover' }}
@@ -390,6 +392,7 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
              >
                <span className="avatar-sm">
                  <CachedImage
+                    type="avatar"
                    src={requestData.requestedBy.avatar}
                    alt=""
                    className="avatar-sm object-cover"
@@ -602,6 +605,7 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
          className="w-20 flex-shrink-0 scale-100 transform-gpu cursor-pointer overflow-hidden rounded-md shadow-sm transition duration-300 hover:scale-105 hover:shadow-md sm:w-28"
        >
          <CachedImage
+            type="tmdb"
            src={
              title.posterPath
                ? `https://image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`
--- a/src/components/RequestList/RequestItem/index.tsx
+++ b/src/components/RequestList/RequestItem/index.tsx
@@ -191,6 +191,7 @@ const RequestItemError = ({
                          >
                            <span className="avatar-sm ml-1.5">
                              <CachedImage
+                                type="avatar"
                                src={requestData.requestedBy.avatar}
                                alt=""
                                className="avatar-sm object-cover"
@@ -250,6 +251,7 @@ const RequestItemError = ({
                        >
                          <span className="avatar-sm ml-1.5">
                            <CachedImage
+                              type="avatar"
                              src={requestData.modifiedBy.avatar}
                              alt=""
                              className="avatar-sm object-cover"
@@ -418,6 +420,7 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
        {title.backdropPath && (
          <div className="absolute inset-0 z-0 w-full bg-cover bg-center xl:w-2/3">
            <CachedImage
+              type="tmdb"
              src={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${title.backdropPath}`}
              alt=""
              style={{ width: '100%', height: '100%', objectFit: 'cover' }}
@@ -443,6 +446,7 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
              className="relative h-auto w-12 flex-shrink-0 scale-100 transform-gpu overflow-hidden rounded-md transition duration-300 hover:scale-105"
            >
              <CachedImage
+                type="tmdb"
                src={
                  title.posterPath
                    ? `https://image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`
@@ -570,6 +574,7 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
                        >
                          <span className="avatar-sm ml-1.5">
                            <CachedImage
+                              type="avatar"
                              src={requestData.requestedBy.avatar}
                              alt=""
                              className="avatar-sm object-cover"
@@ -629,6 +634,7 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
                      >
                        <span className="avatar-sm ml-1.5">
                          <CachedImage
+                            type="avatar"
                            src={requestData.requestedBy.avatar}
                            alt=""
                            className="avatar-sm object-cover"
--- a/src/components/RequestModal/AdvancedRequester/index.tsx
+++ b/src/components/RequestModal/AdvancedRequester/index.tsx
@@ -562,6 +562,7 @@ const AdvancedRequester = ({
                      <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">
                          <CachedImage
+                            type="avatar"
                            src={selectedUser.avatar}
                            alt=""
                            className="h-6 w-6 flex-shrink-0 rounded-full object-cover"
@@ -614,6 +615,7 @@ const AdvancedRequester = ({
                                  } flex items-center`}
                                >
                                  <CachedImage
+                                    type="avatar"
                                    src={user.avatar}
                                    alt=""
                                    className="h-6 w-6 flex-shrink-0 rounded-full object-cover"
--- a/src/components/RequestModal/CollectionRequestModal.tsx
+++ b/src/components/RequestModal/CollectionRequestModal.tsx
@@ -437,6 +437,7 @@ const CollectionRequestModal = ({
                          >
                            <div className="relative h-auto w-10 flex-shrink-0 overflow-hidden rounded-md">
                              <CachedImage
+                                type="tmdb"
                                src={
                                  part.posterPath
                                    ? `https://image.tmdb.org/t/p/w600_and_h900_bestv2${part.posterPath}`
--- a/src/components/Selector/index.tsx
+++ b/src/components/Selector/index.tsx
@@ -452,6 +452,7 @@ export const WatchProviderSelector = ({
                    tabIndex={0}
                  >
                    <CachedImage
+                      type="tmdb"
                      src={`https://image.tmdb.org/t/p/original${provider.logoPath}`}
                      alt=""
                      style={{
@@ -497,6 +498,7 @@ export const WatchProviderSelector = ({
                      tabIndex={0}
                    >
                      <CachedImage
+                        type="tmdb"
                        src={`https://image.tmdb.org/t/p/original${provider.logoPath}`}
                        alt=""
                        style={{
--- a/src/components/TitleCard/index.tsx
+++ b/src/components/TitleCard/index.tsx
@@ -346,6 +346,7 @@ const TitleCard = ({
      >
        <div className="absolute inset-0 h-full w-full overflow-hidden">
          <CachedImage
+            type="tmdb"
            className="absolute inset-0 h-full w-full"
            alt=""
            src={
--- a/src/components/TvDetails/index.tsx
+++ b/src/components/TvDetails/index.tsx
@@ -471,6 +471,7 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
      {data.backdropPath && (
        <div className="media-page-bg-image">
          <CachedImage
+            type="tmdb"
            alt=""
            src={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath}`}
            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
@@ -527,6 +528,7 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
      <div className="media-header">
        <div className="media-poster">
          <CachedImage
+            type="tmdb"
            src={
              data.posterPath
                ? `https://image.tmdb.org/t/p/w600_and_h900_bestv2${data.posterPath}`
--- a/src/components/UserList/JellyfinImportModal.tsx
+++ b/src/components/UserList/JellyfinImportModal.tsx
@@ -250,6 +250,7 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
                            <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
+                                  type="avatar"
                                  className="h-10 w-10 flex-shrink-0 rounded-full"
                                  src={user.thumb}
                                  alt=""
--- a/src/components/UserList/index.tsx
+++ b/src/components/UserList/index.tsx
@@ -634,6 +634,7 @@ const UserList = () => {
                    className="h-10 w-10 flex-shrink-0"
                  >
                    <CachedImage
+                      type="avatar"
                      className="h-10 w-10 rounded-full object-cover"
                      src={user.avatar}
                      alt=""
--- a/src/components/UserProfile/ProfileHeader/index.tsx
+++ b/src/components/UserProfile/ProfileHeader/index.tsx
@@ -43,6 +43,7 @@ const ProfileHeader = ({ user, isSettingsPage }: ProfileHeaderProps) => {
        <div className="flex-shrink-0">
          <div className="relative">
            <CachedImage
+              type="avatar"
              className="h-24 w-24 rounded-full bg-gray-600 object-cover ring-1 ring-gray-700"
              src={user.avatar}
              alt=""