From e2ad54ab83337dc6ecaeec44e9c4f0960c7fea7a Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Sun, 23 Feb 2025 00:36:12 +0100
Subject: [PATCH] fix(style): use small crops for small images

---
 front/src/components/Queue.vue                | 31 ++++++++-----------
 front/src/components/Sidebar.vue              |  8 ++---
 front/src/components/audio/ArtistLabel.vue    |  2 +-
 .../components/audio/podcast/MobileRow.vue    |  4 +--
 front/src/components/audio/podcast/Row.vue    |  6 ++--
 .../src/components/audio/track/MobileRow.vue  |  4 +--
 front/src/components/audio/track/Widget.vue   |  4 +--
 front/src/components/common/ActorAvatar.vue   |  2 +-
 front/src/components/common/UserLink.vue      |  4 +--
 front/src/ui/components/UserMenu.vue          |  4 +--
 10 files changed, 32 insertions(+), 37 deletions(-)

diff --git a/front/src/components/Queue.vue b/front/src/components/Queue.vue
index ae6d553ad..479125271 100644
--- a/front/src/components/Queue.vue
+++ b/front/src/components/Queue.vue
@@ -246,8 +246,8 @@ if (!isWebGLSupported) {
                     @click="enter"
                   />
                   <Button
-                    v-else
                     secondary
+                    v-else
                     :aria-label="labels.exitFullscreen"
                     :title="labels.exitFullscreen"
                     icon="bi-fullscreen-exit"
@@ -305,11 +305,15 @@ if (!isWebGLSupported) {
                 @click.stop.prevent=""
               >
                 <Pill>
-                  <template
-                    v-if="ac.artist.cover"
-                    #image
-                  >
-                    <img v-lazy="ac.artist.cover?.urls.medium_square_crop">
+                  <template #image>
+                    <img
+                      v-if="ac.artist.cover"
+                      v-lazy="ac.artist.cover?.urls.small_square_crop"
+                    />
+                    <i
+                      v-else
+                      class="bi bi-person-circle"
+                    />
                   </template>
                   {{ ac.credit ?? t('components.Queue.meta.unknownArtist') }}
                 </Pill>
@@ -344,14 +348,8 @@ if (!isWebGLSupported) {
               <i class="loading spinner icon" />
             </p>
           </div>
-          <Spacer
-            :size="16"
-            class="desktop-and-below"
-          />
-          <Layout
-            flex
-            class="additional-controls desktop-and-below"
-          >
+          <Spacer :size="16" class="desktop-and-below" />
+          <Layout flex class="additional-controls desktop-and-below">
             <track-favorite-icon
               v-if="store.state.auth.authenticated"
               :track="currentTrack"
@@ -437,10 +435,7 @@ if (!isWebGLSupported) {
                     </template>
                   </i18n-t>
                   <span class="middle pipe symbol" />
-                  <span
-                    v-t="'components.Queue.meta.end'"
-                    style="margin-right: 8px;"
-                  />
+                  <span style="margin-right: 8px;" v-t="'components.Queue.meta.end'" />
                   <span :title="labels.duration">
                     {{ endsIn }}
                   </span>
diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue
index d275294ca..0b2df42ef 100644
--- a/front/src/components/Sidebar.vue
+++ b/front/src/components/Sidebar.vue
@@ -213,10 +213,10 @@ onMounted(() => {
           <div class="item">
             <div class="ui user-dropdown dropdown">
               <img
-                v-if="store.state.auth.authenticated && store.state.auth.profile?.avatar && store.state.auth.profile?.avatar.urls.medium_square_crop"
+                v-if="store.state.auth.authenticated && store.state.auth.profile?.avatar && store.state.auth.profile?.avatar.urls.small_square_crop"
                 class="ui avatar image"
                 alt=""
-                :src="store.getters['instance/absoluteUrl'](store.state.auth.profile?.avatar.urls.medium_square_crop)"
+                :src="store.getters['instance/absoluteUrl'](store.state.auth.profile?.avatar.urls.small_square_crop)"
               >
               <actor-avatar
                 v-else-if="store.state.auth.authenticated"
@@ -246,10 +246,10 @@ onMounted(() => {
             @click.prevent.exact="isUserModalOpen = !isUserModalOpen"
           >
             <img
-              v-if="store.state.auth.authenticated && store.state.auth.profile?.avatar?.urls.medium_square_crop"
+              v-if="store.state.auth.authenticated && store.state.auth.profile?.avatar?.urls.small_square_crop"
               class="ui avatar image"
               alt=""
-              :src="store.getters['instance/absoluteUrl'](store.state.auth.profile?.avatar.urls.medium_square_crop)"
+              :src="store.getters['instance/absoluteUrl'](store.state.auth.profile?.avatar.urls.small_square_crop)"
             >
             <actor-avatar
               v-else-if="store.state.auth.authenticated"
diff --git a/front/src/components/audio/ArtistLabel.vue b/front/src/components/audio/ArtistLabel.vue
index e7244f805..fead4cd3b 100644
--- a/front/src/components/audio/ArtistLabel.vue
+++ b/front/src/components/audio/ArtistLabel.vue
@@ -25,7 +25,7 @@ const route = computed(() => props.artist.channel
   >
     <img
       v-if="artist.cover && artist.cover.urls.original"
-      v-lazy="store.getters['instance/absoluteUrl'](artist.cover.urls.medium_square_crop)"
+      v-lazy="store.getters['instance/absoluteUrl'](artist.cover.urls.small_square_crop)"
       alt=""
       :class="[{circular: artist.content_category != 'podcast'}]"
     >
diff --git a/front/src/components/audio/podcast/MobileRow.vue b/front/src/components/audio/podcast/MobileRow.vue
index 6e6473bb1..446a43471 100644
--- a/front/src/components/audio/podcast/MobileRow.vue
+++ b/front/src/components/audio/podcast/MobileRow.vue
@@ -74,13 +74,13 @@ const actionsButtonLabel = computed(() => t('components.audio.podcast.MobileRow.
     >
       <img
         v-if="track.album?.cover?.urls.original"
-        v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop)"
+        v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.small_square_crop)"
         alt=""
         class="ui artist-track mini image"
       >
       <img
         v-else-if="track.cover"
-        v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)"
+        v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.small_square_crop)"
         alt=""
         class="ui artist-track mini image"
       >
diff --git a/front/src/components/audio/podcast/Row.vue b/front/src/components/audio/podcast/Row.vue
index c98c7493c..4881a9f56 100644
--- a/front/src/components/audio/podcast/Row.vue
+++ b/front/src/components/audio/podcast/Row.vue
@@ -86,13 +86,13 @@ await fetchData()
     >
       <img
         v-if="track.cover?.urls.original"
-        v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)"
+        v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.small_square_crop)"
         alt=""
         class="ui artist-track mini image"
       >
       <img
         v-if="track.album?.cover?.urls.original"
-        v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop)"
+        v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.small_square_crop)"
         alt=""
         class="ui artist-track mini image"
       >
@@ -104,7 +104,7 @@ await fetchData()
       >
       <img
         v-else-if="defaultCover"
-        v-lazy="store.getters['instance/absoluteUrl'](defaultCover.urls.medium_square_crop)"
+        v-lazy="store.getters['instance/absoluteUrl'](defaultCover.urls.small_square_crop)"
         alt=""
         class="ui artist-track mini image"
       >
diff --git a/front/src/components/audio/track/MobileRow.vue b/front/src/components/audio/track/MobileRow.vue
index b3163dc05..926d927b7 100644
--- a/front/src/components/audio/track/MobileRow.vue
+++ b/front/src/components/audio/track/MobileRow.vue
@@ -74,13 +74,13 @@ const actionsButtonLabel = computed(() => t('components.audio.track.MobileRow.bu
     >
       <img
         v-if="track.cover"
-        v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.medium_square_crop)"
+        v-lazy="store.getters['instance/absoluteUrl'](track.cover.urls.small_square_crop)"
         alt=""
         class="ui artist-track mini image"
       >
       <img
         v-else-if="track.album?.cover?.urls.original"
-        v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.medium_square_crop)"
+        v-lazy="store.getters['instance/absoluteUrl'](track.album.cover.urls.small_square_crop)"
         alt=""
         class="ui artist-track mini image"
       >
diff --git a/front/src/components/audio/track/Widget.vue b/front/src/components/audio/track/Widget.vue
index edc53d061..0d26d1ddf 100644
--- a/front/src/components/audio/track/Widget.vue
+++ b/front/src/components/audio/track/Widget.vue
@@ -143,12 +143,12 @@ watch(() => props.websocketHandlers.includes('Listen'), (to) => {
       <div class="activity-image">
         <img
           v-if="object.track.album && object.track.album.cover"
-          v-lazy="store.getters['instance/absoluteUrl'](object.track.album.cover.urls.medium_square_crop)"
+          v-lazy="store.getters['instance/absoluteUrl'](object.track.album.cover.urls.small_square_crop)"
           alt=""
         >
         <img
           v-else-if="object.track.cover"
-          v-lazy="store.getters['instance/absoluteUrl'](object.track.cover.urls.medium_square_crop)"
+          v-lazy="store.getters['instance/absoluteUrl'](object.track.cover.urls.small_square_crop)"
           alt=""
         >
         <img
diff --git a/front/src/components/common/ActorAvatar.vue b/front/src/components/common/ActorAvatar.vue
index 3a6bb37ce..fd47ab217 100644
--- a/front/src/components/common/ActorAvatar.vue
+++ b/front/src/components/common/ActorAvatar.vue
@@ -18,7 +18,7 @@ const defaultAvatarStyle = computed(() => ({ backgroundColor: `#${actorColor.val
   <img
     v-if="actor.icon && actor.icon.urls.original"
     alt=""
-    :src="actor.icon.urls.medium_square_crop"
+    :src="actor.icon.urls.small_square_crop"
     class="ui tiny avatar circular image"
   >
   <span
diff --git a/front/src/components/common/UserLink.vue b/front/src/components/common/UserLink.vue
index a2e106d99..5a53d511a 100644
--- a/front/src/components/common/UserLink.vue
+++ b/front/src/components/common/UserLink.vue
@@ -36,8 +36,8 @@ const defaultAvatarStyle = computed(() => ({ backgroundColor: `#${userColor.valu
   >
     <template v-if="avatar">
       <img
-        v-if="user.avatar && user.avatar.urls.medium_square_crop"
-        v-lazy="store.getters['instance/absoluteUrl'](user.avatar.urls.medium_square_crop)"
+        v-if="user.avatar && user.avatar.urls.small_square_crop"
+        v-lazy="store.getters['instance/absoluteUrl'](user.avatar.urls.small_square_crop)"
         class="ui avatar tiny circular image"
         alt=""
       >
diff --git a/front/src/ui/components/UserMenu.vue b/front/src/ui/components/UserMenu.vue
index 2fe024bc9..ae2252b52 100644
--- a/front/src/ui/components/UserMenu.vue
+++ b/front/src/ui/components/UserMenu.vue
@@ -58,9 +58,9 @@ const labels = computed(() => ({
       @click="isOpen = !isOpen"
     >
       <img
-        v-if="store.state.auth.authenticated && store.state.auth.profile?.avatar?.urls.medium_square_crop"
+        v-if="store.state.auth.authenticated && store.state.auth.profile?.avatar?.urls.small_square_crop"
         alt=""
-        :src="store.getters['instance/absoluteUrl'](store.state.auth.profile?.avatar.urls.medium_square_crop)"
+        :src="store.getters['instance/absoluteUrl'](store.state.auth.profile?.avatar.urls.small_square_crop)"
         class="avatar"
       >
       <span