feat(badges): fallback yotsuba

2 files changed, 37 insertions, 5 deletions

diff --git a/src/lib/FallbackImage.svelte b/src/lib/FallbackImage.svelte
new file mode 100644
index 00000000..a8f367fb
--- /dev/null
+++ b/src/lib/FallbackImage.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	export let source: string | undefined;
+	export let alternative: string | undefined;
+	export let fallback: string | undefined;
+	export let maxReplaceCount = 1;
+	export let replaceDelay = 1000;
+	export let error = 'http://i2.kym-cdn.com/photos/images/newsfeed/000/290/992/0aa.jpg';
+
+	let replaceCount = 0;
+
+	const delayedReplace = (event: Event, image: string | undefined) => {
+		if (replaceCount >= maxReplaceCount) return;
+
+		setTimeout(() => {
+			(event.target as HTMLImageElement).src = image || '';
+
+			replaceCount += 1;
+		}, replaceDelay);
+	};
+</script>
+
+{#if replaceCount < maxReplaceCount}
+	<img
+		src={source}
+		alt={alternative}
+		loading="lazy"
+		class="badge"
+		on:error={(e) => delayedReplace(e, fallback)}
+	/>
+{:else}
+	<img src={error} alt="Not found" loading="lazy" />
+{/if}
diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index fc9f5d2c..67c5a2f6 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -18,6 +18,7 @@
 	import { activityText } from '$lib/Data/AniList/activity.js';
 	import SettingHint from '$lib/Settings/SettingHint.svelte';
 	import Popup from '$lib/Popup.svelte';
+	import FallbackImage from '$lib/FallbackImage.svelte';
 	// import { io } from 'socket.io-client';
 
 	export let data;
@@ -669,11 +670,10 @@
 													}${badge.description ? `\n${badge.description}` : ''}`}
 													use:tooltip
 												>
-													<img
-														src={cdn(thumbnail(badge.image))}
-														alt={badge.description}
-														loading="lazy"
-														on:error={(e) => fallback(e, thumbnail(badge.image))}
+													<FallbackImage
+														source={cdn(thumbnail(badge.image))}
+														alternative={badge.description}
+														fallback={thumbnail(badge.image)}
 													/>
 												</a>
 											{/if}