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

This commit is contained in:
Marie 2025-06-09 23:43:10 +02:00 committed by petitminion
parent 34203afe44
commit cbaa823bad
10 changed files with 15 additions and 0 deletions

View File

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

View File

@ -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

View File

@ -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

View File

@ -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"

View File

@ -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"

View File

@ -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

View File

@ -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"

View File

@ -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"

View File

@ -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

View File

@ -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"