refactor: Proxy and cache avatar images (#907)

* refactor: proxy and cache user avatar images

* fix: extract keys

* fix: set avatar image URL

* fix: show the correct avatar in the list of available users in advanced request

* fix(s): set correct src URL for cached image

* fix: remove unexpired unused image when a user changes their avatar

* fix: requested changes

* refactor: use 'mime' package to detmerine file extension

* style: grammar

* refactor: checks if the default avatar is cached to avoid creating duplicates for different users

* fix: fix vulnerability

* fix: fix incomplete URL substring sanitization

* refactor: only cache avatar with http url protocol

* fix: remove log and correctly set the if statement for the cached image component

* fix: avatar images not showing on issues page

* style: formatting

---------

Co-authored-by: JoaquinOlivero <joaquin.olivero@hotmail.com>

src/components/Common/CachedImage/index.tsx

@@ -16,8 +16,11 @@ const CachedImage = ({ src, ...props }: ImageProps) => {
   if (typeof imageUrl === 'string' && imageUrl.startsWith('http')) {
     const parsedUrl = new URL(imageUrl);
 
-    if (parsedUrl.host === 'image.tmdb.org' && currentSettings.cacheImages) {
-      imageUrl = imageUrl.replace('https://image.tmdb.org', '/imageproxy');
+    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;
     }
   }
 

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={`${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}

src/components/IssueDetails/index.tsx

@@ -28,7 +28,6 @@ import type Issue from '@server/entity/Issue';
 import type { MovieDetails } from '@server/models/Movie';
 import type { TvDetails } from '@server/models/Tv';
 import { Field, Form, Formik } from 'formik';
-import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
@@ -287,10 +286,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={`${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}
                   />

src/components/IssueList/IssueItem/index.tsx

@@ -11,7 +11,6 @@ import { MediaType } from '@server/constants/media';
 import type Issue from '@server/entity/Issue';
 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 { useInView } from 'react-intersection-observer';
 import { FormattedRelativeTime, useIntl } from 'react-intl';
@@ -226,8 +225,8 @@ const IssueItem = ({ issue }: IssueItemProps) => {
                         href={`/users/${issue.createdBy.id}`}
                         className="group flex items-center truncate"
                       >
-                        <Image
-                          src={issue.createdBy.avatar}
+                        <CachedImage
+                          src={'/avatarproxy/' + issue.createdBy.avatar}
                           alt=""
                           className="avatar-sm ml-1.5 object-cover"
                           width={20}

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 : ''}
             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 : ''}
                   alt=""
                   width={40}
                   height={40}

src/components/ManageSlideOver/index.tsx

@@ -1,5 +1,6 @@
 import BlacklistBlock from '@app/components/BlacklistBlock';
 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 { MediaWatchDataResponse } from '@server/interfaces/api/mediaInterfa
 import type { RadarrSettings, SonarrSettings } from '@server/lib/settings';
 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 { useIntl } from 'react-intl';
 import useSWR from 'swr';
@@ -368,7 +368,7 @@ const ManageSlideOver = ({
                                     key={`watch-user-${user.id}`}
                                     content={user.displayName}
                                   >
-                                    <Image
+                                    <CachedImage
                                       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"
@@ -529,7 +529,7 @@ const ManageSlideOver = ({
                                     key={`watch-user-${user.id}`}
                                     content={user.displayName}
                                   >
-                                    <Image
+                                    <CachedImage
                                       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"

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,7 +115,7 @@ const RequestCardError = ({ requestData }: RequestCardErrorProps) => {
                       className="group flex items-center"
                     >
                       <span className="avatar-sm">
-                        <Image
+                        <CachedImage
                           src={requestData.requestedBy.avatar}
                           alt=""
                           className="avatar-sm object-cover"
@@ -390,7 +389,7 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
                 className="group flex items-center"
               >
                 <span className="avatar-sm">
-                  <Image
+                  <CachedImage
                     src={requestData.requestedBy.avatar}
                     alt=""
                     className="avatar-sm object-cover"

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,7 +189,7 @@ const RequestItemError = ({
                             className="group flex items-center truncate"
                           >
                             <span className="avatar-sm ml-1.5">
-                              <Image
+                              <CachedImage
                                 src={requestData.requestedBy.avatar}
                                 alt=""
                                 className="avatar-sm object-cover"
@@ -249,7 +248,7 @@ const RequestItemError = ({
                           className="group flex items-center truncate"
                         >
                           <span className="avatar-sm ml-1.5">
-                            <Image
+                            <CachedImage
                               src={requestData.modifiedBy.avatar}
                               alt=""
                               className="avatar-sm object-cover"
@@ -557,7 +556,7 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
                           className="group flex items-center truncate"
                         >
                           <span className="avatar-sm ml-1.5">
-                            <Image
+                            <CachedImage
                               src={requestData.requestedBy.avatar}
                               alt=""
                               className="avatar-sm object-cover"
@@ -616,7 +615,7 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
                         className="group flex items-center truncate"
                       >
                         <span className="avatar-sm ml-1.5">
-                          <Image
+                          <CachedImage
                             src={requestData.requestedBy.avatar}
                             alt=""
                             className="avatar-sm object-cover"

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,7 +561,7 @@ 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
+                          <CachedImage
                             src={selectedUser.avatar}
                             alt=""
                             className="h-6 w-6 flex-shrink-0 rounded-full object-cover"
@@ -613,7 +613,7 @@ const AdvancedRequester = ({
                                     selected ? 'font-semibold' : 'font-normal'
                                   } flex items-center`}
                                 >
-                                  <Image
+                                  <CachedImage
                                     src={user.avatar}
                                     alt=""
                                     className="h-6 w-6 flex-shrink-0 rounded-full object-cover"

src/components/Settings/SettingsJobsCache/index.tsx

@@ -82,6 +82,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',
+    usersavatars: "Users' Avatars",
   }
 );
 
@@ -573,6 +574,19 @@ const SettingsJobs = () => {
                 {formatBytes(cacheData?.imageCache.tmdb.size ?? 0)}
               </Table.TD>
             </tr>
+            <tr>
+              <Table.TD>
+                {intl.formatMessage(messages.usersavatars)} (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>

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 { MediaServerType } from '@server/constants/server';
 import type { UserResultsResponse } from '@server/interfaces/api/userInterfaces';
-import Image from 'next/image';
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
@@ -249,7 +249,7 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
                             </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
+                                <CachedImage
                                   className="h-10 w-10 flex-shrink-0 rounded-full"
                                   src={user.thumb}
                                   alt=""

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';
@@ -28,7 +29,6 @@ import { MediaServerType } from '@server/constants/server';
 import type { UserResultsResponse } from '@server/interfaces/api/userInterfaces';
 import { hasPermission } from '@server/lib/permissions';
 import { Field, Form, Formik } from 'formik';
-import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
@@ -633,7 +633,7 @@ 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}
                       alt=""

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,7 +42,7 @@ 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}
               alt=""