From b54b8d4d2ee415914b03329e8d708794cc74080c Mon Sep 17 00:00:00 2001
From: Cleo <cutestnekoaqua@noreply.codeberg.org>
Date: Fri, 10 Feb 2023 22:46:08 +0000
Subject: [PATCH] fix(client): use proxied image for instance icon

---
 packages/client/assets/dummy.png                 | Bin 0 -> 6285 bytes
 .../src/ui/_common_/statusbar-federation.vue     |   7 ++++++-
 packages/client/src/widgets/federation.vue       |   7 ++++++-
 packages/client/src/widgets/instance-cloud.vue   |   7 ++++++-
 4 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 packages/client/assets/dummy.png

diff --git a/packages/client/assets/dummy.png b/packages/client/assets/dummy.png
new file mode 100644
index 0000000000000000000000000000000000000000..39332b0c1beeda1edb90d78d25c16e7372aff030
GIT binary patch
literal 6285
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
IqD|EQ01tF`Q2+n{

literal 0
HcmV?d00001

diff --git a/packages/client/src/ui/_common_/statusbar-federation.vue b/packages/client/src/ui/_common_/statusbar-federation.vue
index f29c6a9ff4..2896cc09c3 100644
--- a/packages/client/src/ui/_common_/statusbar-federation.vue
+++ b/packages/client/src/ui/_common_/statusbar-federation.vue
@@ -4,7 +4,7 @@
 		<transition name="change" mode="default">
 			<MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
 				<span v-for="instance in instances" :key="instance.id" class="item" :class="{ colored }" :style="{ background: colored ? instance.themeColor : null }">
-					<img v-if="instance.iconUrl" class="icon" :src="instance.iconUrl" alt=""/>
+					<img class="icon" :src="getInstanceIcon(instance)" alt=""/>
 					<MkA :to="`/instance-info/${instance.host}`" class="host _monospace">
 						{{ instance.host }}
 					</MkA>
@@ -27,6 +27,7 @@ import * as os from '@/os';
 import { useInterval } from '@/scripts/use-interval';
 import { getNoteSummary } from '@/scripts/get-note-summary';
 import { notePage } from '@/filters/note';
+import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
 
 const props = defineProps<{
 	display?: 'marquee' | 'oneByOne';
@@ -56,6 +57,10 @@ useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
 	immediate: true,
 	afterMounted: true,
 });
+
+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/widgets/federation.vue b/packages/client/src/widgets/federation.vue
index cbbd3eb94f..706712668c 100644
--- a/packages/client/src/widgets/federation.vue
+++ b/packages/client/src/widgets/federation.vue
@@ -6,7 +6,7 @@
 		<MkLoading v-if="fetching"/>
 		<transition-group v-else tag="div" :name="$store.state.animation ? 'chart' : ''" class="instances">
 			<div v-for="(instance, i) in instances" :key="instance.id" class="instance">
-				<img v-if="instance.iconUrl" :src="instance.iconUrl" alt=""/>
+				<img :src="getInstanceIcon(instance)" alt=""/>
 				<div class="body">
 					<a class="a" :href="'https://' + instance.host" target="_blank" :title="instance.host">{{ instance.host }}</a>
 					<p>{{ instance.softwareName || '?' }} {{ instance.softwareVersion }}</p>
@@ -27,6 +27,7 @@ import MkMiniChart from '@/components/MkMiniChart.vue';
 import * as os from '@/os';
 import { useInterval } from '@/scripts/use-interval';
 import { i18n } from '@/i18n';
+import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
 
 const name = 'federation';
 
@@ -71,6 +72,10 @@ useInterval(fetch, 1000 * 60, {
 	afterMounted: true,
 });
 
+function getInstanceIcon(instance): string {
+	return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
+}
+
 defineExpose<WidgetComponentExpose>({
 	name,
 	configure,
diff --git a/packages/client/src/widgets/instance-cloud.vue b/packages/client/src/widgets/instance-cloud.vue
index 1358a63b66..3cb579c28f 100644
--- a/packages/client/src/widgets/instance-cloud.vue
+++ b/packages/client/src/widgets/instance-cloud.vue
@@ -4,7 +4,7 @@
 		<MkTagCloud v-if="activeInstances">
 			<li v-for="instance in activeInstances" :key="instance.id">
 				<a @click.prevent="onInstanceClick(instance)">
-					<img style="width: 32px;" :src="instance.iconUrl">
+					<img style="width: 32px;" :src="getInstanceIcon(instance)">
 				</a>
 			</li>
 		</MkTagCloud>
@@ -21,6 +21,7 @@ import MkContainer from '@/components/MkContainer.vue';
 import MkTagCloud from '@/components/MkTagCloud.vue';
 import * as os from '@/os';
 import { useInterval } from '@/scripts/use-interval';
+import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
 
 const name = 'instanceCloud';
 
@@ -65,6 +66,10 @@ useInterval(() => {
 	afterMounted: true,
 });
 
+function getInstanceIcon(instance): string {
+	return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
+}
+
 defineExpose<WidgetComponentExpose>({
 	name,
 	configure,