From 2fda83c321fd064983d4f50f3ed254caf3058d25 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Tue, 24 Jan 2023 15:51:34 -0800
Subject: [PATCH] fix: :zap: use proxied image for instance icon on ticker

Closes #9426
---
 .../client/src/components/MkInstanceTicker.vue    |  7 ++++++-
 packages/client/src/scripts/media-proxy.ts        | 15 +++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 packages/client/src/scripts/media-proxy.ts

diff --git a/packages/client/src/components/MkInstanceTicker.vue b/packages/client/src/components/MkInstanceTicker.vue
index ebc02ec630..3da2f87a5e 100644
--- a/packages/client/src/components/MkInstanceTicker.vue
+++ b/packages/client/src/components/MkInstanceTicker.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="hpaizdrt" :style="bg">
-	<img v-if="instance.faviconUrl" class="icon" :src="instance.faviconUrl" aria-hidden="true"/>
+	<img class="icon" :src="getInstanceIcon(instance)" aria-hidden="true"/>
 	<span class="name">{{ instance.name }}</span>
 </div>
 </template>
@@ -8,6 +8,7 @@
 <script lang="ts" setup>
 import { instanceName } from '@/config';
 import { instance as Instance } from '@/instance';
+import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
 
 const props = defineProps<{
 	instance?: {
@@ -29,6 +30,10 @@ const themeColor = instance.themeColor ?? '#777777';
 const bg = {
 	background: `linear-gradient(90deg, ${themeColor}, ${themeColor}11)`,
 };
+
+function getInstanceIcon(instance): string {
+	return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/scripts/media-proxy.ts b/packages/client/src/scripts/media-proxy.ts
new file mode 100644
index 0000000000..aaf7f9e610
--- /dev/null
+++ b/packages/client/src/scripts/media-proxy.ts
@@ -0,0 +1,15 @@
+import { query } from '@/scripts/url';
+import { url } from '@/config';
+
+export function getProxiedImageUrl(imageUrl: string, type?: 'preview'): string {
+	return `${url}/proxy/image.webp?${query({
+		url: imageUrl,
+		fallback: '1',
+		...(type ? { [type]: '1' } : {}),
+	})}`;
+}
+
+export function getProxiedImageUrlNullable(imageUrl: string | null | undefined, type?: 'preview'): string | null {
+	if (imageUrl == null) return null;
+	return getProxiedImageUrl(imageUrl, type);
+}