Download avatars from reacting users

prathercc · Mar 5, 2024 · f9051ce · f9051ce
1 parent 2d04229
commit f9051ce
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 46 deletions.
diff --git a/src/changelog.json b/src/changelog.json
@@ -1,7 +1,11 @@
 [
   {
     "version": "1.11.9",
-    "changes": ["Small bug fix for HTML exports."]
+    "changes": [
+      "Bug fix for HTML export crashes.",
+      "Download reacting Users avatars during exports.",
+      "Show loader while Guild roles are being downloaded during exports."
+    ]
   },
   {
     "version": "1.11.8",

diff --git a/src/components/message-mock.tsx b/src/components/message-mock.tsx
@@ -13,7 +13,6 @@ import {
   stringToBool,
   getEncodedEmoji,
   getReactingUsers,
-  getAvatarUrl,
 } from "../utils";
 import CheckIcon from "@mui/icons-material/Check";
 import WebhookEmbedMock from "./webhook-embed-mock";
@@ -68,6 +67,7 @@ const MessageMock = ({
   const roleMap = exportState.roleMap();
   const emojiMap = exportState.emojiMap();
   const reactionMap = exportState.reactionMap();
+  const avatarMap = exportState.avatarMap();
 
   const messageDate = parseISO(message.timestamp);
   const tz = getTimeZone(messageDate);
@@ -455,35 +455,39 @@ const MessageMock = ({
                       const reactingUser = reactingUsers.find(
                         (rU) => rU.id === exportReaction.id
                       );
-                      return reactingUser ? (
-                        <Box
-                          sx={{
-                            display: "flex",
-                            justifyContent: "flex-start",
-                            flexDirection: "row",
-                            gap: "5px",
-                          }}
-                        >
-                          <img
-                            style={{
-                              width: "24px",
-                              height: "24px",
-                              borderRadius: "50%",
+                      if (reactingUser) {
+                        const avatarUrl = `../${
+                          avatarMap[`${reactingUser.id}/${reactingUser.avatar}`]
+                        }`;
+                        return (
+                          <Box
+                            sx={{
+                              display: "flex",
+                              justifyContent: "flex-start",
+                              flexDirection: "row",
+                              gap: "5px",
                             }}
-                            src={getAvatarUrl(
-                              reactingUser.id,
-                              reactingUser.avatar
-                            )}
-                            alt="avatar-icon"
-                          />
-                          <Typography sx={{ color: "text.primary" }}>
-                            {reactingUser.displayName}
-                          </Typography>
-                          <Typography sx={{ color: "text.disabled" }}>
-                            {reactingUser.userName}
-                          </Typography>
-                        </Box>
-                      ) : null;
+                          >
+                            <img
+                              style={{
+                                width: "24px",
+                                height: "24px",
+                                borderRadius: "50%",
+                              }}
+                              src={avatarUrl}
+                              alt="avatar-icon"
+                            />
+                            <Typography sx={{ color: "text.primary" }}>
+                              {reactingUser.displayName}
+                            </Typography>
+                            <Typography sx={{ color: "text.disabled" }}>
+                              {reactingUser.userName}
+                            </Typography>
+                          </Box>
+                        );
+                      } else {
+                        return null;
+                      }
                     })
                   : null}
               </Stack>

diff --git a/src/features/export/export-slice.tsx b/src/features/export/export-slice.tsx
@@ -5,6 +5,7 @@ import {
   entityContainsMedia,
   formatUserData,
   getAvatarUrl,
+  getEncodedEmoji,
   getExportFileName,
   getIconUrl,
   getMediaUrls,
@@ -293,25 +294,53 @@ const _downloadRoles =
 const _downloadAvatarFromMessage =
   ({ message, exportUtils }: AvatarFromMessageProps): AppThunk<Promise<void>> =>
   async (dispatch, getState) => {
+    const { settings } = getState().app;
+    const { reactionsEnabled } = settings;
     const { exportMaps } = getState().export;
-    const { id: userId, avatar: avatarId } = message.author || {};
-    const idAndAvatar = `${userId}/${avatarId}`;
+    const { reactionMap, userMap } = exportMaps;
+
+    const avatarLookups: { id: Snowflake; avatar: string | Maybe }[] = [
+      { id: message.author.id, avatar: message.author.avatar },
+    ];
+
+    if (stringToBool(reactionsEnabled)) {
+      message.reactions?.forEach((r) => {
+        const encodedEmoji = getEncodedEmoji(r.emoji);
+        if (encodedEmoji) {
+          const users = reactionMap[message.id]?.[encodedEmoji] || [];
+          users.forEach((eR) => {
+            const { avatar } = userMap[eR.id] || {};
+            if (!avatarLookups.some((aL) => aL.id === eR.id))
+              avatarLookups.push({ id: eR.id, avatar: avatar });
+          });
+        }
+      });
+    }
 
-    if (!exportMaps.avatarMap[idAndAvatar]) {
-      const { success, data } = await downloadFile(
-        getAvatarUrl(message.author.id, message.author.avatar)
-      );
-      if (success && data) {
-        const fileExt = data.type.split("/")?.[1] || "webp";
-        const avatarFilePath = `avatars/${idAndAvatar}.${fileExt}`;
-        await exportUtils.addToZip(data, avatarFilePath);
-
-        dispatch(
-          setExportAvatarMap({
-            ...exportMaps.avatarMap,
-            [idAndAvatar]: avatarFilePath,
-          })
+    for (const [_, aL] of avatarLookups.entries()) {
+      const { discrubCancelled } = getState().app;
+      if (discrubCancelled) break;
+      await dispatch(checkDiscrubPaused());
+
+      const { avatarMap } = getState().export.exportMaps;
+      const idAndAvatar = `${aL.id}/${aL.avatar}`;
+
+      if (!avatarMap[idAndAvatar]) {
+        const { success, data } = await downloadFile(
+          getAvatarUrl(aL.id, aL.avatar)
         );
+        if (success && data) {
+          const fileExt = data.type.split("/")?.[1] || "webp";
+          const avatarFilePath = `avatars/${idAndAvatar}.${fileExt}`;
+          await exportUtils.addToZip(data, avatarFilePath);
+
+          dispatch(
+            setExportAvatarMap({
+              ...avatarMap,
+              [idAndAvatar]: avatarFilePath,
+            })
+          );
+        }
       }
     }
   };