From adaddb579e6e5f95f04e2a8ce63321bd41e3fe7e Mon Sep 17 00:00:00 2001
From: pulchra mentis <1747037+pulchra-mentis@users.noreply.github.com>
Date: Wed, 17 Aug 2022 15:50:36 -0400
Subject: [PATCH] Implement media resizing using Discord media cache (#470)

* Implement media resizing using Discord media cache
Improve performance by offloading image scaling to Discord
Only apply the resizing to images stored in the Discord CDN
Set the format of the resized images to WebP for improved performance

* Implemented suggestion for improved regex
---
 dashboard/src/api/resize-media.ts    | 18 ++++++++++++++++++
 dashboard/src/lib/CardsHeader.svelte |  6 ++++--
 dashboard/src/lib/group/Body.svelte  |  5 +++--
 dashboard/src/lib/member/Body.svelte |  3 ++-
 dashboard/src/lib/system/Body.svelte |  3 ++-
 5 files changed, 29 insertions(+), 6 deletions(-)
 create mode 100644 dashboard/src/api/resize-media.ts

diff --git a/dashboard/src/api/resize-media.ts b/dashboard/src/api/resize-media.ts
new file mode 100644
index 00000000..baff1df4
--- /dev/null
+++ b/dashboard/src/api/resize-media.ts
@@ -0,0 +1,18 @@
+const discordCDNAttachmentRegex =
+  /^https:\/\/cdn\.discordapp\.com\/attachments\/([^?]+)/i
+
+const resizeMedia = (
+  mediaURL: string,
+  dimensions?: number[],
+  format?: string,
+) =>
+  mediaURL.replace(
+    discordCDNAttachmentRegex,
+    `https://media.discordapp.net/attachments/$1?width=${
+      dimensions?.[0] ?? 256
+    }&height=${dimensions?.[1] ?? dimensions?.[0] ?? 256}&format=${
+      format ?? 'webp'
+    }`,
+  )
+
+export default resizeMedia
diff --git a/dashboard/src/lib/CardsHeader.svelte b/dashboard/src/lib/CardsHeader.svelte
index 3cab06ad..9b877c33 100644
--- a/dashboard/src/lib/CardsHeader.svelte
+++ b/dashboard/src/lib/CardsHeader.svelte
@@ -2,6 +2,7 @@
     import { tick } from 'svelte';
     import { Modal, CardHeader, CardTitle, Image, Spinner } from 'sveltestrap';
     import default_avatar from '../assets/default_avatar.png';
+    import resizeMedia from '../api/resize-media';
     import { toHTML } from 'discord-markdown';
     import twemoji from 'twemoji';
 
@@ -19,6 +20,7 @@
     }
 
     $: icon_url = item.avatar_url ? item.avatar_url : item.icon ? item.icon : default_avatar;
+    $: icon_url_resized = resizeMedia(icon_url)
 
     let avatarOpen = false;
     const toggleAvatarModal = () => (avatarOpen = !avatarOpen);
@@ -45,7 +47,7 @@
         </div>
         <div>
         {#if item && (item.avatar_url || item.icon)}
-        <img tabindex={0} on:keydown|stopPropagation={(event) => {if (event.key === "Enter") {avatarOpen = true}}} on:click|stopPropagation={toggleAvatarModal} class="rounded-circle avatar" src={icon_url} alt={altText} />
+        <img tabindex={0} on:keydown|stopPropagation={(event) => {if (event.key === "Enter") {avatarOpen = true}}} on:click|stopPropagation={toggleAvatarModal} class="rounded-circle avatar" src={icon_url_resized} alt={altText} />
         {:else}
         <img class="rounded-circle avatar" src={default_avatar} alt="icon (default)" tabindex={0} />
         {/if}
@@ -55,4 +57,4 @@
                 <img class="d-block m-auto img-thumbnail" src={icon_url} alt={altText} tabindex={0} use:focus/>
             </div>
         </Modal>
-    </CardTitle>
\ No newline at end of file
+    </CardTitle>
diff --git a/dashboard/src/lib/group/Body.svelte b/dashboard/src/lib/group/Body.svelte
index 0a6d2ce0..dd7368bf 100644
--- a/dashboard/src/lib/group/Body.svelte
+++ b/dashboard/src/lib/group/Body.svelte
@@ -4,6 +4,7 @@
     import moment from 'moment';
     import { toHTML } from 'discord-markdown';
     import parseTimestamps from '../../api/parse-timestamps';
+    import resizeMedia from '../../api/resize-media';
     import Edit from './Edit.svelte';
     import twemoji from 'twemoji';
     import Privacy from './Privacy.svelte';
@@ -124,7 +125,7 @@
     {@html htmlDescription && htmlDescription}
 </div>
 {#if (group.banner && ((settings && settings.appearance.banner_bottom) || !settings))}
-<img src={group.banner} alt="group banner" class="w-100 mb-3 rounded" style="max-height: 12em; object-fit: cover"/>
+<img src={resizeMedia(group.banner, [1200, 480])} alt="group banner" class="w-100 mb-3 rounded" style="max-height: 13em; object-fit: cover"/>
 {/if}
 
 {#if !isPublic}
@@ -165,4 +166,4 @@
             margin-left: 0.25em;
         }
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/dashboard/src/lib/member/Body.svelte b/dashboard/src/lib/member/Body.svelte
index 5ec3c17d..568fa3fd 100644
--- a/dashboard/src/lib/member/Body.svelte
+++ b/dashboard/src/lib/member/Body.svelte
@@ -4,6 +4,7 @@
     import moment from 'moment';
     import { toHTML } from 'discord-markdown';
     import parseTimestamps from '../../api/parse-timestamps';
+    import resizeMedia from '../../api/resize-media';
     import twemoji from 'twemoji';
 
     import GroupEdit from './GroupEdit.svelte';
@@ -174,7 +175,7 @@
         {@html htmlDescription && htmlDescription}
     </div>
     {#if (member.banner && ((settings && settings.appearance.banner_bottom) || !settings))}
-    <img src={member.banner} alt="member banner" class="w-100 mb-3 rounded" style="max-height: 17em; object-fit: cover"/>
+    <img src={resizeMedia(member.banner, [1200, 480])} alt="member banner" class="w-100 mb-3 rounded" style="max-height: 13em; object-fit: cover"/>
     {/if}
     {#if !isPublic}
     <Button style="flex: 0" color="primary" on:click={() => editMode = true} aria-label="edit member information">Edit</Button>
diff --git a/dashboard/src/lib/system/Body.svelte b/dashboard/src/lib/system/Body.svelte
index f97509c5..4a5c933b 100644
--- a/dashboard/src/lib/system/Body.svelte
+++ b/dashboard/src/lib/system/Body.svelte
@@ -3,6 +3,7 @@
     import moment from 'moment';
     import { toHTML } from 'discord-markdown';
     import parseTimestamps from '../../api/parse-timestamps';
+    import resizeMedia from '../../api/resize-media';
     import twemoji from 'twemoji';
 
     import { System } from '../../api/types';
@@ -88,7 +89,7 @@
     {@html htmlDescription}
 </div>
 {#if (user.banner && ((settings && settings.appearance.banner_bottom) || !settings))}
-<img src={user.banner} alt="system banner" class="w-100 mb-3 rounded" style="max-height: 12em; object-fit: cover"/>
+<img src={resizeMedia(user.banner, [1200, 480])} alt="system banner" class="w-100 mb-3 rounded" style="max-height: 13em; object-fit: cover"/>
 {/if}
 {#if !isPublic}
 <Button style="flex: 0" color="primary" on:click={() => editMode = true} aria-label="edit system information">Edit</Button>