fix(front): fallback to medium sized attachments if small doesn't exist

changes/changelog.d/2460-fallbackimg

@@ -0,0 +1 @@
+Small sized attachments now fallback to medium sized if small doesn't exist (#2460)

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

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

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"

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"

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

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"

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"

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

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"