From cbaa823bad6c07da2a962a8f7972ccef55f6a50a Mon Sep 17 00:00:00 2001
From: Marie <robloxfilmcam@gmail.com>
Date: Mon, 9 Jun 2025 23:43:10 +0200
Subject: [PATCH] fix(front): fallback to medium sized attachments if small
 doesn't exist

---
 changes/changelog.d/2460-fallbackimg             | 1 +
 front/src/components/audio/ArtistCreditLabel.vue | 1 +
 front/src/components/audio/ArtistLabel.vue       | 1 +
 front/src/components/audio/podcast/MobileRow.vue | 2 ++
 front/src/components/audio/podcast/Row.vue       | 2 ++
 front/src/components/audio/track/MobileRow.vue   | 2 ++
 front/src/components/audio/track/Row.vue         | 2 ++
 front/src/components/audio/track/Widget.vue      | 2 ++
 front/src/components/common/UserLink.vue         | 1 +
 front/src/ui/components/UserMenu.vue             | 1 +
 10 files changed, 15 insertions(+)
 create mode 100644 changes/changelog.d/2460-fallbackimg

diff --git a/changes/changelog.d/2460-fallbackimg b/changes/changelog.d/2460-fallbackimg
new file mode 100644
index 000000000..6fe945298
--- /dev/null
+++ b/changes/changelog.d/2460-fallbackimg
@@ -0,0 +1 @@
+Small sized attachments now fallback to medium sized if small doesn't exist (#2460)
diff --git a/front/src/components/audio/ArtistCreditLabel.vue b/front/src/components/audio/ArtistCreditLabel.vue
index f33293054..6d391a0f8 100644
--- a/front/src/components/audio/ArtistCreditLabel.vue
+++ b/front/src/components/audio/ArtistCreditLabel.vue
@@ -48,6 +48,7 @@ const getRoute = (ac: ArtistCredit) => {
               v-if="ac.artist.cover && ac.artist.cover.urls.original"
               v-lazy="store.getters['instance/absoluteUrl'](ac.artist.cover.urls.small_square_crop)"
               :alt="ac.artist.name"
+              @error="(e) => { e.target && ac.artist.cover ? (e.target as HTMLImageElement).src = store.getters['instance/absoluteUrl'](ac.artist.cover.urls.medium_square_crop) : null }"
             >
             <i
               v-else
diff --git a/front/src/components/audio/ArtistLabel.vue b/front/src/components/audio/ArtistLabel.vue
index b59dd1b07..f7ce6b9f0 100644
--- a/front/src/components/audio/ArtistLabel.vue
+++ b/front/src/components/audio/ArtistLabel.vue
@@ -28,6 +28,7 @@ const route = computed(() => props.artist.channel
       v-lazy="store.getters['instance/absoluteUrl'](artist.cover.urls.small_square_crop)"
       alt=""
       :class="[{circular: artist.content_category != 'podcast'}]"
+      @error="(e) => { e.target && artist.cover ? (e.target as HTMLImageElement).src = store.getters['instance/absoluteUrl'](artist.cover.urls.medium_square_crop) : null }"
     >
     <i
       v-else
diff --git a/front/src/components/audio/podcast/MobileRow.vue b/front/src/components/audio/podcast/MobileRow.vue
index 886c86d14..cfff50465 100644
--- a/front/src/components/audio/podcast/MobileRow.vue
+++ b/front/src/components/audio/podcast/MobileRow.vue
@@ -77,12 +77,14 @@ const actionsButtonLabel = computed(() => t('components.audio.podcast.MobileRow.
         v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.small_square_crop)"
         alt=""
         class="ui artist-track mini image"
+        @error="(e) => { e.target && track.album.cover ? (e.target as HTMLImageElement).src = store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop) : null }"
       >
       <img
         v-else-if="track.cover"
         v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.small_square_crop)"
         alt=""
         class="ui artist-track mini image"
+        @error="(e) => { e.target && track.cover ? (e.target as HTMLImageElement).src = store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop) : null }"
       >
       <img
         v-else-if="!!track.artist_credit.length && track.artist_credit[0].artist.cover"
diff --git a/front/src/components/audio/podcast/Row.vue b/front/src/components/audio/podcast/Row.vue
index 2b3562086..5275494ea 100644
--- a/front/src/components/audio/podcast/Row.vue
+++ b/front/src/components/audio/podcast/Row.vue
@@ -90,12 +90,14 @@ await fetchData()
         v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.small_square_crop)"
         alt=""
         class="ui artist-track mini image"
+        @error="(e) => { e.target && track.cover ? (e.target as HTMLImageElement).src = store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop) : null }"
       >
       <img
         v-if="track.album?.cover?.urls.original"
         v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.small_square_crop)"
         alt=""
         class="ui artist-track mini image"
+        @error="(e) => { e.target && track.album.cover ? (e.target as HTMLImageElement).src = store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop) : null }"
       >
       <img
         v-else-if="track.artist_credit.length && track.artist_credit[0].artist.cover"
diff --git a/front/src/components/audio/track/MobileRow.vue b/front/src/components/audio/track/MobileRow.vue
index 0bf47794b..914611756 100644
--- a/front/src/components/audio/track/MobileRow.vue
+++ b/front/src/components/audio/track/MobileRow.vue
@@ -78,12 +78,14 @@ const actionsButtonLabel = computed(() => t('components.audio.track.MobileRow.bu
         v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.small_square_crop)"
         alt=""
         class="ui artist-track mini image"
+        @error="(e) => { e.target && track.cover ? (e.target as HTMLImageElement).src = store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop) : null }"
       >
       <img
         v-else-if="track.album?.cover?.urls.original"
         v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.small_square_crop)"
         alt=""
         class="ui artist-track mini image"
+        @error="(e) => { e.target && track.album.cover ? (e.target as HTMLImageElement).src = store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop) : null }"
       >
       <img
         v-else
diff --git a/front/src/components/audio/track/Row.vue b/front/src/components/audio/track/Row.vue
index 36e70a6f2..01735685c 100644
--- a/front/src/components/audio/track/Row.vue
+++ b/front/src/components/audio/track/Row.vue
@@ -127,12 +127,14 @@ const hover = ref(false)
         v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.small_square_crop)"
         :alt="track.title"
         class="track_image"
+        @error="(e) => { e.target && track.cover ? (e.target as HTMLImageElement).src = store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop) : null }"
       >
       <img
         v-else-if="showArt && track.album?.cover?.urls.original"
         v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.small_square_crop)"
         alt=""
         class="track_image"
+        @error="(e) => { e.target && track.album.cover ? (e.target as HTMLImageElement).src = store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop) : null }"
       >
       <img
         v-else-if="showArt"
diff --git a/front/src/components/audio/track/Widget.vue b/front/src/components/audio/track/Widget.vue
index 37f09324d..b15d9aae8 100644
--- a/front/src/components/audio/track/Widget.vue
+++ b/front/src/components/audio/track/Widget.vue
@@ -141,11 +141,13 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
           v-if="object.track.album && object.track.album.cover"
           v-lazy="store.getters['instance/absoluteUrl'](object.track.album.cover.urls.small_square_crop)"
           alt=""
+          @error="(e) => { e.target && object.track.album.cover ? (e.target as HTMLImageElement).src = store.getters['instance/absoluteUrl'](object.track.album.cover.urls.medium_square_crop) : null }"
         >
         <img
           v-else-if="object.track.cover"
           v-lazy="store.getters['instance/absoluteUrl'](object.track.cover.urls.small_square_crop)"
           alt=""
+          @error="(e) => { e.target && object.track.cover ? (e.target as HTMLImageElement).src = store.getters['instance/absoluteUrl'](object.track.cover.urls.medium_square_crop) : null }"
         >
         <img
           v-else-if="object.track.artist_credit && object.track.artist_credit.length > 1"
diff --git a/front/src/components/common/UserLink.vue b/front/src/components/common/UserLink.vue
index 5a53d511a..9b79da1e1 100644
--- a/front/src/components/common/UserLink.vue
+++ b/front/src/components/common/UserLink.vue
@@ -40,6 +40,7 @@ const defaultAvatarStyle = computed(() => ({ backgroundColor: `#${userColor.valu
         v-lazy="store.getters['instance/absoluteUrl'](user.avatar.urls.small_square_crop)"
         class="ui avatar tiny circular image"
         alt=""
+        @error="(e) => { e.target && user.avatar ? (e.target as HTMLImageElement).src = store.getters['instance/absoluteUrl'](user.avatar.urls.medium_square_crop) : null }"
       >
       <span
         v-else
diff --git a/front/src/ui/components/UserMenu.vue b/front/src/ui/components/UserMenu.vue
index 68a3da2ba..f2a151961 100644
--- a/front/src/ui/components/UserMenu.vue
+++ b/front/src/ui/components/UserMenu.vue
@@ -62,6 +62,7 @@ const labels = computed(() => ({
         alt=""
         :src="store.getters['instance/absoluteUrl'](store.state.auth.profile?.avatar.urls.small_square_crop)"
         class="avatar"
+        @error="(e) => { e.target && store.state.auth.profile?.avatar ? (e.target as HTMLImageElement).src = store.getters['instance/absoluteUrl'](store.state.auth.profile?.avatar.urls.medium_square_crop) : null }"
       >
       <span
         v-else-if="store.state.auth.authenticated"