fix(front): use large cropped images consistently

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>

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>

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

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>

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

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