From 0d70f6d3a633c770c33604a6fd40f243cf4ff600 Mon Sep 17 00:00:00 2001
From: alemi <me@alemi.dev>
Date: Wed, 17 Jul 2024 23:01:00 +0200
Subject: [PATCH] feat(web): replace broken user avatars on error

---
 web/src/actors/header.rs   |  6 +++---
 web/src/components/user.rs | 10 +++++-----
 web/src/lib.rs             |  2 +-
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/web/src/actors/header.rs b/web/src/actors/header.rs
index 442eba8..261fa06 100644
--- a/web/src/actors/header.rs
+++ b/web/src/actors/header.rs
@@ -1,6 +1,6 @@
 use leptos::*;
 use leptos_router::*;
-use crate::{getters::Getter, prelude::*, DEFAULT_AVATAR_URL};
+use crate::{getters::Getter, prelude::*, FALLBACK_IMAGE_URL};
 
 use apb::{field::OptionalString, ActivityMut, Actor, Base, Object, ObjectMut};
 
@@ -34,8 +34,8 @@ pub fn ActorHeader() -> impl IntoView {
 		None => view! { <Loader /> }.into_view(),
 		Some(Err(e)) => view! { <code class="center cw color">"could not resolve user: "{e}</code> }.into_view(),
 		Some(Ok(actor)) => {
-			let avatar_url = actor.icon().get().map(|x| x.url().id().str().unwrap_or(DEFAULT_AVATAR_URL.into())).unwrap_or(DEFAULT_AVATAR_URL.into());
-			let background_url = actor.image().get().map(|x| x.url().id().str().unwrap_or(DEFAULT_AVATAR_URL.into())).unwrap_or(DEFAULT_AVATAR_URL.into());
+			let avatar_url = actor.icon().get().map(|x| x.url().id().str().unwrap_or(FALLBACK_IMAGE_URL.into())).unwrap_or(FALLBACK_IMAGE_URL.into());
+			let background_url = actor.image().get().map(|x| x.url().id().str().unwrap_or(FALLBACK_IMAGE_URL.into())).unwrap_or(FALLBACK_IMAGE_URL.into());
 			let username = actor.preferred_username().unwrap_or_default().to_string();
 			let name = actor.name().str().unwrap_or(username.clone());
 			let created = actor.published().ok();
diff --git a/web/src/components/user.rs b/web/src/components/user.rs
index 40121ea..4624713 100644
--- a/web/src/components/user.rs
+++ b/web/src/components/user.rs
@@ -1,5 +1,5 @@
 use leptos::*;
-use crate::{prelude::*, DEFAULT_AVATAR_URL};
+use crate::{prelude::*, FALLBACK_IMAGE_URL};
 
 use apb::{field::OptionalString, Activity, ActivityMut, Actor, Base, Object, ObjectMut};
 
@@ -12,10 +12,10 @@ pub fn ActorStrip(object: crate::Object) -> impl IntoView {
 	let actor_id = object.id().unwrap_or_default().to_string();
 	let username = object.preferred_username().unwrap_or_default().to_string();
 	let domain = object.id().unwrap_or_default().replace("https://", "").split('/').next().unwrap_or_default().to_string();
-	let avatar = object.icon().get().map(|x| x.url().id().str().unwrap_or(DEFAULT_AVATAR_URL.into())).unwrap_or(DEFAULT_AVATAR_URL.into());
+	let avatar = object.icon().get().map(|x| x.url().id().str().unwrap_or(FALLBACK_IMAGE_URL.into())).unwrap_or(FALLBACK_IMAGE_URL.into());
 	view! {
 		<a href={Uri::web(U::Actor, &actor_id)} class="clean hover">
-			<img src={avatar} class="avatar inline mr-s" /><b>{username}</b><small>@{domain}</small>
+			<img src={avatar} class="avatar inline mr-s" onerror={format!("this.onerror=null; this.src='{FALLBACK_IMAGE_URL}';")} /><b>{username}</b><small>@{domain}</small>
 		</a>
 	}
 }
@@ -29,7 +29,7 @@ pub fn ActorBanner(object: crate::Object) -> impl IntoView {
 		serde_json::Value::Object(_) => {
 			let uid = object.id().unwrap_or_default().to_string();
 			let uri = Uri::web(U::Actor, &uid);
-			let avatar_url = object.icon().get().map(|x| x.url().id().str().unwrap_or(DEFAULT_AVATAR_URL.into())).unwrap_or(DEFAULT_AVATAR_URL.into());
+			let avatar_url = object.icon().get().map(|x| x.url().id().str().unwrap_or(FALLBACK_IMAGE_URL.into())).unwrap_or(FALLBACK_IMAGE_URL.into());
 			let username = object.preferred_username().unwrap_or_default().to_string();
 			let domain = object.id().unwrap_or_default().replace("https://", "").split('/').next().unwrap_or_default().to_string();
 			let display_name = object.name().unwrap_or_default().to_string();
@@ -37,7 +37,7 @@ pub fn ActorBanner(object: crate::Object) -> impl IntoView {
 				<div>
 					<table class="align" >
 					<tr>
-						<td rowspan="2" ><a href={uri.clone()} ><img class="avatar avatar-actor" src={avatar_url} /></a></td>
+						<td rowspan="2" ><a href={uri.clone()} ><img class="avatar avatar-actor" src={avatar_url} onerror={format!("this.onerror=null; this.src='{FALLBACK_IMAGE_URL}';")} /></a></td>
 						<td><b class="displayname"><DisplayName name=display_name /></b></td>
 					</tr>
 					<tr>
diff --git a/web/src/lib.rs b/web/src/lib.rs
index c2f2af2..46e5f1b 100644
--- a/web/src/lib.rs
+++ b/web/src/lib.rs
@@ -21,7 +21,7 @@ pub const URL_BASE: &str = "https://dev.upub.social";
 pub const URL_PREFIX: &str = "/web";
 pub const CONTACT: &str = "abuse@alemi.dev";
 pub const URL_SENSITIVE: &str = "https://cdn.alemi.dev/social/nsfw.png";
-pub const DEFAULT_AVATAR_URL: &str = "https://cdn.alemi.dev/social/gradient.png";
+pub const FALLBACK_IMAGE_URL: &str = "https://cdn.alemi.dev/social/gradient.png";
 pub const NAME: &str = "μ";
 pub const DEFAULT_COLOR: &str = "#BF616A";
 pub const VERSION: &str = env!("CARGO_PKG_VERSION");