From 6f5b40f68e7ee55216adbd14ed247584bb0f21f4 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Wed, 22 Jan 2025 14:12:11 +0100
Subject: [PATCH] fix(front): use large cropped images consistently

---
 front/src/components/album/Card.vue         |  2 +-
 front/src/components/artist/Card.vue        |  6 +++---
 front/src/components/library/AlbumBase.vue  |  4 ++--
 front/src/components/library/ArtistBase.vue | 14 ++++++++++----
 front/src/components/library/TrackBase.vue  |  2 +-
 front/src/views/auth/ProfileBase.vue        |  2 +-
 6 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/front/src/components/album/Card.vue b/front/src/components/album/Card.vue
index 0c7f960e2..e25095ce1 100644
--- a/front/src/components/album/Card.vue
+++ b/front/src/components/album/Card.vue
@@ -38,7 +38,7 @@ if (import.meta.env.PROD) {
 
 const store = useStore()
 const imageUrl = computed(() => props.album.cover?.urls.original
-  ? store.getters['instance/absoluteUrl'](props.album.cover?.urls.medium_square_crop)
+  ? store.getters['instance/absoluteUrl'](props.album.cover?.urls.large_square_crop)
   : `${import.meta.env.BASE_URL}embed-default-cover.jpeg`
 )
 </script>
diff --git a/front/src/components/artist/Card.vue b/front/src/components/artist/Card.vue
index 05ef94927..29b503e97 100644
--- a/front/src/components/artist/Card.vue
+++ b/front/src/components/artist/Card.vue
@@ -31,14 +31,14 @@ if (import.meta.env.PROD) {
     router.push({ name: 'library.artists.detail', params: { id: artist.id } })
 }
 
-const cover = computed(() => !props.artist.cover?.urls.original
-  ? props.artist.albums.find(album => !!album.cover?.urls.original)?.cover
+const cover = computed(() => !props.artist.cover?.urls.large_square_crop
+  ? props.artist.albums.find(album => !!album.cover?.urls.large_square_crop)?.cover
   : props.artist.cover
 )
 
 const store = useStore()
 const imageUrl = computed(() => cover.value?.urls.original
-  ? store.getters['instance/absoluteUrl'](cover.value.urls.medium_square_crop)
+  ? store.getters['instance/absoluteUrl'](cover.value.urls.large_square_crop)
   : `${import.meta.env.BASE_URL}embed-default-cover.jpeg`
 )
 </script>
diff --git a/front/src/components/library/AlbumBase.vue b/front/src/components/library/AlbumBase.vue
index 04edb11f1..062230d33 100644
--- a/front/src/components/library/AlbumBase.vue
+++ b/front/src/components/library/AlbumBase.vue
@@ -159,7 +159,7 @@ const remove = async () => {
       <Layout flex>
         <img
           v-if="object.cover && object.cover.urls.original"
-          v-lazy="store.getters['instance/absoluteUrl'](object.cover.urls.medium_square_crop)"
+          v-lazy="store.getters['instance/absoluteUrl'](object.cover.urls.large_square_crop)"
           alt=""
           class="channel-image"
         >
@@ -167,7 +167,7 @@ const remove = async () => {
           v-else-if="object.artist_credit && object.artist_credit[0] && object.artist_credit[0].artist.cover"
           alt=""
           class="channel-image"
-          :src="object.artist_credit[0].artist.cover.urls.medium_square_crop"
+          :src="object.artist_credit[0].artist.cover.urls.large_square_crop"
           />
         <img
           v-else
diff --git a/front/src/components/library/ArtistBase.vue b/front/src/components/library/ArtistBase.vue
index 09479a50d..4b7de4aa0 100644
--- a/front/src/components/library/ArtistBase.vue
+++ b/front/src/components/library/ArtistBase.vue
@@ -57,13 +57,13 @@ const wikipediaUrl = computed(() => `https://en.wikipedia.org/w/index.php?search
 const musicbrainzUrl = computed(() => object.value?.mbid ? `https://musicbrainz.org/artist/${object.value.mbid}` : null)
 const discogsUrl = computed(() => `https://discogs.com/search/?type=artist&title=${encodeURI(object.value?.name ?? '')}`)
 const publicLibraries = computed(() => libraries.value?.filter(library => library.privacy_level === 'everyone') ?? [])
-const cover = computed(() => object.value?.cover?.urls.original
+const cover = computed(() => object.value?.cover?.urls.large_square_crop
   ? object.value.cover
-  : object.value?.albums.find(album => album.cover?.urls.original)?.cover
+  : object.value?.albums.find(album => album.cover?.urls.large_square_crop)?.cover || `${import.meta.env.BASE_URL}embed-default-cover.jpeg`
 )
-const imageUrl = computed(() => cover.value?.urls.original
+const imageUrl = computed(() => cover.value?.urls.large_square_crop
   ? store.getters['instance/absoluteUrl']
-    (cover.value.urls.original)
+    (cover.value.urls.large_square_crop)
   : `${import.meta.env.BASE_URL}embed-default-cover.jpeg`
 )
 
@@ -280,3 +280,9 @@ watch(() => props.id, fetchData, { immediate: true })
     </template>
   </Layout>
 </template>
+
+<style scoped>
+  .channel-image {
+    border-radius: 50%;
+  }
+</style>
diff --git a/front/src/components/library/TrackBase.vue b/front/src/components/library/TrackBase.vue
index b002bac38..4283a0b4c 100644
--- a/front/src/components/library/TrackBase.vue
+++ b/front/src/components/library/TrackBase.vue
@@ -137,7 +137,7 @@ watch(showDeleteModal, (newValue) => {
     <Layout flex>
       <img
         v-if="track.album && track.album.cover"
-        v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop)"
+        v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.large_square_crop)"
         alt=""
         class="channel-image"
       >
diff --git a/front/src/views/auth/ProfileBase.vue b/front/src/views/auth/ProfileBase.vue
index b9b1ef430..14ca70646 100644
--- a/front/src/views/auth/ProfileBase.vue
+++ b/front/src/views/auth/ProfileBase.vue
@@ -96,7 +96,7 @@ const recentActivity = ref(0)
       <!-- Profile Picture -->
       <img
       v-if="object?.icon"
-        v-lazy="store.getters['instance/absoluteUrl'](object.icon.urls.medium_square_crop)"
+        v-lazy="store.getters['instance/absoluteUrl'](object.icon.urls.large_square_crop)"
         alt=""
         class="avatar"
       />