From e6e2523d46074a0d1dcf3a7eebb8022e9c092ae4 Mon Sep 17 00:00:00 2001
From: JoaquinOlivero <joaquin.olivero@hotmail.com>
Date: Wed, 4 Sep 2024 17:58:40 +0000
Subject: [PATCH] refactor: only cache avatar with http url protocol

---
 server/lib/imageproxy.ts                      |  2 +-
 server/routes/auth.ts                         | 29 +------------------
 server/routes/avatarproxy.ts                  |  9 +-----
 server/routes/user/index.ts                   | 16 +---------
 src/components/Common/CachedImage/index.tsx   | 11 +++++--
 .../IssueDetails/IssueComment/index.tsx       |  2 +-
 src/components/IssueDetails/index.tsx         |  2 +-
 src/components/Layout/UserDropdown/index.tsx  |  4 +--
 src/components/ManageSlideOver/index.tsx      |  4 +--
 src/components/RequestCard/index.tsx          |  4 +--
 .../RequestList/RequestItem/index.tsx         |  8 ++---
 .../RequestModal/AdvancedRequester/index.tsx  |  4 +--
 .../UserList/JellyfinImportModal.tsx          |  2 +-
 src/components/UserList/index.tsx             |  2 +-
 .../UserProfile/ProfileHeader/index.tsx       |  2 +-
 15 files changed, 30 insertions(+), 71 deletions(-)

diff --git a/server/lib/imageproxy.ts b/server/lib/imageproxy.ts
index 3b61e8424..badfe94f2 100644
--- a/server/lib/imageproxy.ts
+++ b/server/lib/imageproxy.ts
@@ -190,7 +190,7 @@ class ImageProxy {
 
       await promises.rm(directory, { recursive: true });
 
-      logger.info(`Cleared ${files[0]} image from cache 'avatar'`, {
+      logger.info(`Cleared ${files[0]} from cache 'avatar'`, {
         label: 'Image Cache',
       });
     } catch (e) {
diff --git a/server/routes/auth.ts b/server/routes/auth.ts
index 2778f1a36..4e7f77278 100644
--- a/server/routes/auth.ts
+++ b/server/routes/auth.ts
@@ -344,13 +344,6 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
             userType: UserType.EMBY,
           });
 
-          if (
-            user.avatar.startsWith('https://gravatar.com/') &&
-            user.avatar.includes('default=mm&size=200')
-          ) {
-            user.avatar = 'https://gravatar.com/avatar/?default=mm&size=200';
-          }
-
           break;
         case MediaServerType.JELLYFIN:
           settings.main.mediaServerType = MediaServerType.JELLYFIN;
@@ -370,13 +363,6 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
             userType: UserType.JELLYFIN,
           });
 
-          if (
-            user.avatar.startsWith('https://gravatar.com/') &&
-            user.avatar.includes('default=mm&size=200')
-          ) {
-            user.avatar = 'https://gravatar.com/avatar/?default=mm&size=200';
-          }
-
           break;
         default:
           throw new Error('select_server_type');
@@ -431,18 +417,11 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
         }
         user.avatar = avatar;
       } else {
-        let avatar = gravatarUrl(user.email || account.User.Name, {
+        const avatar = gravatarUrl(user.email || account.User.Name, {
           default: 'mm',
           size: 200,
         });
 
-        if (
-          avatar.startsWith('https://gravatar.com/') &&
-          avatar.includes('default=mm&size=200')
-        ) {
-          avatar = 'https://gravatar.com/avatar/?default=mm&size=200';
-        }
-
         if (avatar !== user.avatar) {
           const avatarProxy = new ImageProxy('avatar', '');
           avatarProxy.clearCachedImage(user.avatar);
@@ -499,12 +478,6 @@ authRoutes.post('/jellyfin', async (req, res, next) => {
             : UserType.EMBY,
       });
 
-      if (
-        user.avatar.startsWith('https://gravatar.com/') &&
-        user.avatar.includes('default=mm&size=200')
-      ) {
-        user.avatar = 'https://gravatar.com/avatar/?default=mm&size=200';
-      }
       //initialize Jellyfin/Emby users with local login
       const passedExplicitPassword = body.password && body.password.length > 0;
       if (passedExplicitPassword) {
diff --git a/server/routes/avatarproxy.ts b/server/routes/avatarproxy.ts
index a9ed802a9..65638df2b 100644
--- a/server/routes/avatarproxy.ts
+++ b/server/routes/avatarproxy.ts
@@ -7,16 +7,9 @@ const router = Router();
 const avatarImageProxy = new ImageProxy('avatar', '');
 // Proxy avatar images
 router.get('/*', async (req, res) => {
-  let imagePath = req.url.startsWith('/') ? req.url.slice(1) : req.url;
+  const imagePath = req.url.startsWith('/') ? req.url.slice(1) : req.url;
 
   try {
-    if (
-      imagePath.startsWith('https://gravatar.com/') &&
-      imagePath.includes('default=mm&size=200')
-    ) {
-      imagePath = 'https://gravatar.com/avatar/?default=mm&size=200';
-    }
-
     const imageData = await avatarImageProxy.getImage(imagePath);
 
     res.writeHead(200, {
diff --git a/server/routes/user/index.ts b/server/routes/user/index.ts
index 304560631..f8a0d41a2 100644
--- a/server/routes/user/index.ts
+++ b/server/routes/user/index.ts
@@ -122,14 +122,7 @@ router.post(
       }
 
       const passedExplicitPassword = body.password && body.password.length > 0;
-      let avatar = gravatarUrl(email, { default: 'mm', size: 200 });
-
-      if (
-        avatar.startsWith('https://gravatar.com/') &&
-        avatar.includes('default=mm&size=200')
-      ) {
-        avatar = 'https://gravatar.com/avatar/?default=mm&size=200';
-      }
+      const avatar = gravatarUrl(email, { default: 'mm', size: 200 });
 
       if (
         !passedExplicitPassword &&
@@ -564,13 +557,6 @@ router.post(
                 : UserType.EMBY,
           });
 
-          if (
-            newUser.avatar.startsWith('https://gravatar.com/') &&
-            newUser.avatar.includes('default=mm&size=200')
-          ) {
-            newUser.avatar = 'https://gravatar.com/avatar/?default=mm&size=200';
-          }
-
           await userRepository.save(newUser);
           createdUsers.push(newUser);
         }
diff --git a/src/components/Common/CachedImage/index.tsx b/src/components/Common/CachedImage/index.tsx
index 6dfb8ee75..e5c659f83 100644
--- a/src/components/Common/CachedImage/index.tsx
+++ b/src/components/Common/CachedImage/index.tsx
@@ -16,8 +16,15 @@ 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');
+    console.log(parsedUrl);
+
+    if (parsedUrl.host === 'image.tmdb.org') {
+      if (currentSettings.cacheImages)
+        imageUrl = imageUrl.replace('https://image.tmdb.org', '/imageproxy');
+    }
+
+    if (parsedUrl.protocol === 'http:') {
+      imageUrl = '/avatarproxy/' + imageUrl;
     }
   }
 
diff --git a/src/components/IssueDetails/IssueComment/index.tsx b/src/components/IssueDetails/IssueComment/index.tsx
index a4d6181b5..ab3f59ad8 100644
--- a/src/components/IssueDetails/IssueComment/index.tsx
+++ b/src/components/IssueDetails/IssueComment/index.tsx
@@ -89,7 +89,7 @@ const IssueComment = ({
       </Transition>
       <Link href={isActiveUser ? '/profile' : `/users/${comment.user.id}`}>
         <CachedImage
-          src={`/avatarproxy/${comment.user.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}
diff --git a/src/components/IssueDetails/index.tsx b/src/components/IssueDetails/index.tsx
index c011eb04e..a790fe9d1 100644
--- a/src/components/IssueDetails/index.tsx
+++ b/src/components/IssueDetails/index.tsx
@@ -287,7 +287,7 @@ const IssueDetails = () => {
                   className="group ml-1 inline-flex h-full items-center xl:ml-1.5"
                 >
                   <CachedImage
-                    src={`/avatarproxy/${issueData.createdBy.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}
diff --git a/src/components/Layout/UserDropdown/index.tsx b/src/components/Layout/UserDropdown/index.tsx
index e2284520e..58f97b445 100644
--- a/src/components/Layout/UserDropdown/index.tsx
+++ b/src/components/Layout/UserDropdown/index.tsx
@@ -58,7 +58,7 @@ const UserDropdown = () => {
         >
           <CachedImage
             className="h-8 w-8 rounded-full object-cover sm:h-10 sm:w-10"
-            src={user && user.avatar ? `/avatarproxy/${user.avatar}` : ''}
+            src={user ? user.avatar : ''}
             alt=""
             width={40}
             height={40}
@@ -81,7 +81,7 @@ const UserDropdown = () => {
               <div className="flex items-center space-x-2">
                 <CachedImage
                   className="h-8 w-8 rounded-full object-cover sm:h-10 sm:w-10"
-                  src={user && user.avatar ? `/avatarproxy/${user.avatar}` : ''}
+                  src={user ? user.avatar : ''}
                   alt=""
                   width={40}
                   height={40}
diff --git a/src/components/ManageSlideOver/index.tsx b/src/components/ManageSlideOver/index.tsx
index 307357a8b..8b3cb8377 100644
--- a/src/components/ManageSlideOver/index.tsx
+++ b/src/components/ManageSlideOver/index.tsx
@@ -354,7 +354,7 @@ const ManageSlideOver = ({
                                     content={user.displayName}
                                   >
                                     <CachedImage
-                                      src={`/avatarproxy/${user.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"
                                       width={32}
@@ -515,7 +515,7 @@ const ManageSlideOver = ({
                                     content={user.displayName}
                                   >
                                     <CachedImage
-                                      src={`/avatarproxy/${user.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"
                                       width={32}
diff --git a/src/components/RequestCard/index.tsx b/src/components/RequestCard/index.tsx
index 7f3f3d757..af49f75d8 100644
--- a/src/components/RequestCard/index.tsx
+++ b/src/components/RequestCard/index.tsx
@@ -116,7 +116,7 @@ const RequestCardError = ({ requestData }: RequestCardErrorProps) => {
                     >
                       <span className="avatar-sm">
                         <CachedImage
-                          src={`/avatarproxy/${requestData.requestedBy.avatar}`}
+                          src={requestData.requestedBy.avatar}
                           alt=""
                           className="avatar-sm object-cover"
                           width={20}
@@ -390,7 +390,7 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
               >
                 <span className="avatar-sm">
                   <CachedImage
-                    src={`/avatarproxy/${requestData.requestedBy.avatar}`}
+                    src={requestData.requestedBy.avatar}
                     alt=""
                     className="avatar-sm object-cover"
                     width={20}
diff --git a/src/components/RequestList/RequestItem/index.tsx b/src/components/RequestList/RequestItem/index.tsx
index 3e7919a9c..22a988cce 100644
--- a/src/components/RequestList/RequestItem/index.tsx
+++ b/src/components/RequestList/RequestItem/index.tsx
@@ -190,7 +190,7 @@ const RequestItemError = ({
                           >
                             <span className="avatar-sm ml-1.5">
                               <CachedImage
-                                src={`/avatarproxy/${requestData.requestedBy.avatar}`}
+                                src={requestData.requestedBy.avatar}
                                 alt=""
                                 className="avatar-sm object-cover"
                                 width={20}
@@ -249,7 +249,7 @@ const RequestItemError = ({
                         >
                           <span className="avatar-sm ml-1.5">
                             <CachedImage
-                              src={`/avatarproxy/${requestData.modifiedBy.avatar}`}
+                              src={requestData.modifiedBy.avatar}
                               alt=""
                               className="avatar-sm object-cover"
                               width={20}
@@ -557,7 +557,7 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
                         >
                           <span className="avatar-sm ml-1.5">
                             <CachedImage
-                              src={`/avatarproxy/${requestData.requestedBy.avatar}`}
+                              src={requestData.requestedBy.avatar}
                               alt=""
                               className="avatar-sm object-cover"
                               width={20}
@@ -616,7 +616,7 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
                       >
                         <span className="avatar-sm ml-1.5">
                           <CachedImage
-                            src={`/avatarproxy/${requestData.requestedBy.avatar}`}
+                            src={requestData.requestedBy.avatar}
                             alt=""
                             className="avatar-sm object-cover"
                             width={20}
diff --git a/src/components/RequestModal/AdvancedRequester/index.tsx b/src/components/RequestModal/AdvancedRequester/index.tsx
index d725dc3a6..6662b7ace 100644
--- a/src/components/RequestModal/AdvancedRequester/index.tsx
+++ b/src/components/RequestModal/AdvancedRequester/index.tsx
@@ -562,7 +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
-                            src={`/avatarproxy/${selectedUser.avatar}`}
+                            src={selectedUser.avatar}
                             alt=""
                             className="h-6 w-6 flex-shrink-0 rounded-full object-cover"
                             width={24}
@@ -614,7 +614,7 @@ const AdvancedRequester = ({
                                   } flex items-center`}
                                 >
                                   <CachedImage
-                                    src={`/avatarproxy/${user.avatar}`}
+                                    src={user.avatar}
                                     alt=""
                                     className="h-6 w-6 flex-shrink-0 rounded-full object-cover"
                                     width={24}
diff --git a/src/components/UserList/JellyfinImportModal.tsx b/src/components/UserList/JellyfinImportModal.tsx
index e36989116..e95a0a7d3 100644
--- a/src/components/UserList/JellyfinImportModal.tsx
+++ b/src/components/UserList/JellyfinImportModal.tsx
@@ -251,7 +251,7 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
                               <div className="flex items-center">
                                 <CachedImage
                                   className="h-10 w-10 flex-shrink-0 rounded-full"
-                                  src={`/avatarproxy/${user.thumb}`}
+                                  src={user.thumb}
                                   alt=""
                                   width={40}
                                   height={40}
diff --git a/src/components/UserList/index.tsx b/src/components/UserList/index.tsx
index ce246c6f1..27dbdd8e0 100644
--- a/src/components/UserList/index.tsx
+++ b/src/components/UserList/index.tsx
@@ -635,7 +635,7 @@ const UserList = () => {
                   >
                     <CachedImage
                       className="h-10 w-10 rounded-full object-cover"
-                      src={`/avatarproxy/${user.avatar}`}
+                      src={user.avatar}
                       alt=""
                       width={40}
                       height={40}
diff --git a/src/components/UserProfile/ProfileHeader/index.tsx b/src/components/UserProfile/ProfileHeader/index.tsx
index 2bef97c3b..998504c69 100644
--- a/src/components/UserProfile/ProfileHeader/index.tsx
+++ b/src/components/UserProfile/ProfileHeader/index.tsx
@@ -44,7 +44,7 @@ const ProfileHeader = ({ user, isSettingsPage }: ProfileHeaderProps) => {
           <div className="relative">
             <CachedImage
               className="h-24 w-24 rounded-full bg-gray-600 object-cover ring-1 ring-gray-700"
-              src={`/avatarproxy/${user.avatar}`}
+              src={user.avatar}
               alt=""
               width={96}
               height={96}