From 3533ba889ff352f88724c34765906afcd524133f Mon Sep 17 00:00:00 2001
From: Agate <me@agate.blue>
Date: Tue, 4 Aug 2020 11:30:26 +0200
Subject: [PATCH] Fixed UI crash due to accessing wrong cover

---
 front/src/components/Sidebar.vue                | 2 +-
 front/src/components/audio/ChannelEntryCard.vue | 4 ++--
 front/src/components/audio/ChannelSerieCard.vue | 4 ++--
 front/src/components/library/AlbumBase.vue      | 6 +++---
 front/src/components/library/TrackDetail.vue    | 1 -
 front/src/views/admin/ChannelDetail.vue         | 2 +-
 front/src/views/admin/library/AlbumDetail.vue   | 2 +-
 front/src/views/admin/library/ArtistDetail.vue  | 2 +-
 front/src/views/admin/library/TrackDetail.vue   | 2 +-
 front/src/views/auth/ProfileBase.vue            | 2 +-
 10 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue
index 5b176d6c7..bf2ed255a 100644
--- a/front/src/components/Sidebar.vue
+++ b/front/src/components/Sidebar.vue
@@ -78,7 +78,7 @@
         </router-link>
         <div class="item">
           <div class="ui user-dropdown dropdown" >
-            <img class="ui avatar image" alt="" v-if="$store.state.auth.profile.avatar && $store.state.auth.profile.avatar.urls.square_crop" :src="$store.getters['instance/absoluteUrl']($store.state.auth.profile.avatar.urls.square_crop)" />
+            <img class="ui avatar image" alt="" v-if="$store.state.auth.profile.avatar && $store.state.auth.profile.avatar.urls.medium_square_crop" :src="$store.getters['instance/absoluteUrl']($store.state.auth.profile.avatar.urls.medium_square_crop)" />
             <actor-avatar v-else :actor="{preferred_username: $store.state.auth.username, full_username: $store.state.auth.username}" />
             <div class="menu">
               <router-link class="item" :to="{name: 'profile.overview', params: {username: $store.state.auth.username}}"><translate translate-context="*/*/*/Noun">Profile</translate></router-link>
diff --git a/front/src/components/audio/ChannelEntryCard.vue b/front/src/components/audio/ChannelEntryCard.vue
index 5430b81f7..ff21e2604 100644
--- a/front/src/components/audio/ChannelEntryCard.vue
+++ b/front/src/components/audio/ChannelEntryCard.vue
@@ -8,7 +8,7 @@
       alt=""
       class="channel-image image"
       v-if="cover && cover.urls.original"
-      v-lazy="$store.getters['instance/absoluteUrl'](cover.urls.square_crop)">
+      v-lazy="$store.getters['instance/absoluteUrl'](cover.urls.medium_square_crop)">
     <span
       @click="$router.push({name: 'library.tracks.detail', params: {id: entry.id}})"
       class="channel-image image"
@@ -18,7 +18,7 @@
       alt=""
       class="channel-image image"
       v-else-if="entry.album && entry.album.cover && entry.album.cover.urls.original"
-      v-lazy="$store.getters['instance/absoluteUrl'](entry.album.cover.urls.square_crop)">
+      v-lazy="$store.getters['instance/absoluteUrl'](entry.album.cover.urls.medium_square_crop)">
     <img
       @click="$router.push({name: 'library.tracks.detail', params: {id: entry.id}})"
       alt=""
diff --git a/front/src/components/audio/ChannelSerieCard.vue b/front/src/components/audio/ChannelSerieCard.vue
index 55466e202..46683c6e8 100644
--- a/front/src/components/audio/ChannelSerieCard.vue
+++ b/front/src/components/audio/ChannelSerieCard.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="channel-serie-card">
     <div class="two-images">
-      <img alt="" @click="$router.push({name: 'library.albums.detail', params: {id: serie.id}})" class="channel-image" v-if="cover.urls.original" v-lazy="$store.getters['instance/absoluteUrl'](cover.urls.square_crop)">
+      <img alt="" @click="$router.push({name: 'library.albums.detail', params: {id: serie.id}})" class="channel-image" v-if="cover.urls.original" v-lazy="$store.getters['instance/absoluteUrl'](cover.urls.medium_square_crop)">
       <img alt="" @click="$router.push({name: 'library.albums.detail', params: {id: serie.id}})" class="channel-image" v-else src="../../assets/audio/default-cover.png">
-      <img alt="" @click="$router.push({name: 'library.albums.detail', params: {id: serie.id}})" class="channel-image" v-if="cover.urls.original" v-lazy="$store.getters['instance/absoluteUrl'](cover.urls.square_crop)">
+      <img alt="" @click="$router.push({name: 'library.albums.detail', params: {id: serie.id}})" class="channel-image" v-if="cover.urls.original" v-lazy="$store.getters['instance/absoluteUrl'](cover.urls.medium_square_crop)">
       <img alt="" @click="$router.push({name: 'library.albums.detail', params: {id: serie.id}})" class="channel-image" v-else src="../../assets/audio/default-cover.png">
     </div>
     <div class="content ellipsis">
diff --git a/front/src/components/library/AlbumBase.vue b/front/src/components/library/AlbumBase.vue
index e50f59149..8bdb2fc34 100644
--- a/front/src/components/library/AlbumBase.vue
+++ b/front/src/components/library/AlbumBase.vue
@@ -11,9 +11,9 @@
               <div class="ui two column grid" v-if="isSerie">
                 <div class="column">
                   <div class="large two-images">
-                    <img alt="" class="channel-image" v-if="object.cover && object.cover.urls.original" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.urls.square_crop)">
+                    <img alt="" class="channel-image" v-if="object.cover && object.cover.urls.original" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.urls.medium_square_crop)">
                     <img alt="" class="channel-image" v-else src="../../assets/audio/default-cover.png">
-                    <img alt="" class="channel-image" v-if="object.cover && object.cover.urls.original" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.urls.square_crop)">
+                    <img alt="" class="channel-image" v-if="object.cover && object.cover.urls.original" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.urls.medium_square_crop)">
                     <img alt="" class="channel-image" v-else src="../../assets/audio/default-cover.png">
                   </div>
                 </div>
@@ -53,7 +53,7 @@
               </header>
             </div>
             <div v-else class="ui center aligned text padded basic segment">
-              <img alt="" class="channel-image" v-if="object.cover && object.cover.urls.original" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.urls.square_crop)">
+              <img alt="" class="channel-image" v-if="object.cover && object.cover.urls.original" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.urls.medium_square_crop)">
               <img alt="" class="channel-image" v-else src="../../assets/audio/default-cover.png">
               <div class="ui hidden divider"></div>
               <header>
diff --git a/front/src/components/library/TrackDetail.vue b/front/src/components/library/TrackDetail.vue
index 73015e41c..fa54f4460 100644
--- a/front/src/components/library/TrackDetail.vue
+++ b/front/src/components/library/TrackDetail.vue
@@ -4,7 +4,6 @@
     <section class="ui vertical stripe segment">
       <div class="ui stackable grid row container">
         <div class="six wide column">
-          <img alt="" class="image" v-if="cover && cover.urls.original" v-lazy="$store.getters['instance/absoluteUrl'](cover.urls.square_crop)">
           <template v-if="upload">
             <h3 class="ui header">
               <translate key="1" v-if="track.artist.content_category === 'music'" translate-context="Content/*/*">Track Details</translate>
diff --git a/front/src/views/admin/ChannelDetail.vue b/front/src/views/admin/ChannelDetail.vue
index d9c4e151f..55009075e 100644
--- a/front/src/views/admin/ChannelDetail.vue
+++ b/front/src/views/admin/ChannelDetail.vue
@@ -9,7 +9,7 @@
           <div class="ui column">
             <div class="segment-content">
               <h2 class="ui header">
-                <img alt="" v-if="object.artist.cover && object.artist.cover.urls.square_crop" v-lazy="$store.getters['instance/absoluteUrl'](object.artist.cover.urls.square_crop)">
+                <img alt="" v-if="object.artist.cover && object.artist.cover.urls.medium_square_crop" v-lazy="$store.getters['instance/absoluteUrl'](object.artist.cover.urls.medium_square_crop)">
                 <img alt="" v-else src="../../assets/audio/default-cover.png">
                 <div class="content">
                   {{ object.artist.name | truncate(100) }}
diff --git a/front/src/views/admin/library/AlbumDetail.vue b/front/src/views/admin/library/AlbumDetail.vue
index f9700c3ef..dda46e24f 100644
--- a/front/src/views/admin/library/AlbumDetail.vue
+++ b/front/src/views/admin/library/AlbumDetail.vue
@@ -9,7 +9,7 @@
           <div class="ui column">
             <div class="segment-content">
               <h2 class="ui header">
-                <img alt="" v-if="object.cover.urls.original" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.urls.square_crop)">
+                <img alt="" v-if="object.cover.urls.original" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.urls.medium_square_crop)">
                 <img alt="" v-else src="../../../assets/audio/default-cover.png">
                 <div class="content">
                   {{ object.title | truncate(100) }}
diff --git a/front/src/views/admin/library/ArtistDetail.vue b/front/src/views/admin/library/ArtistDetail.vue
index 785cb3d22..d9cfe5f6e 100644
--- a/front/src/views/admin/library/ArtistDetail.vue
+++ b/front/src/views/admin/library/ArtistDetail.vue
@@ -9,7 +9,7 @@
           <div class="ui column">
             <div class="segment-content">
               <h2 class="ui header">
-                <img alt="" v-if="object.cover && object.cover.urls.square_crop" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.urls.square_crop)">
+                <img alt="" v-if="object.cover && object.cover.urls.medium_square_crop" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.urls.medium_square_crop)">
                 <img alt="" v-else src="../../../assets/audio/default-cover.png">
                 <div class="content">
                   {{ object.name | truncate(100) }}
diff --git a/front/src/views/admin/library/TrackDetail.vue b/front/src/views/admin/library/TrackDetail.vue
index 066041f69..1cf51953e 100644
--- a/front/src/views/admin/library/TrackDetail.vue
+++ b/front/src/views/admin/library/TrackDetail.vue
@@ -9,7 +9,7 @@
           <div class="ui column">
             <div class="segment-content">
               <h2 class="ui header">
-                <img alt="" v-if="object.cover && object.cover.urls.square_crop" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.urls.square_crop)">
+                <img alt="" v-if="object.cover && object.cover.urls.medium_square_crop" v-lazy="$store.getters['instance/absoluteUrl'](object.cover.urls.medium_square_crop)">
                 <img alt="" v-else src="../../../assets/audio/default-cover.png">
                 <div class="content">
                   {{ object.title | truncate(100) }}
diff --git a/front/src/views/auth/ProfileBase.vue b/front/src/views/auth/ProfileBase.vue
index d378f743b..ece6c1c3d 100644
--- a/front/src/views/auth/ProfileBase.vue
+++ b/front/src/views/auth/ProfileBase.vue
@@ -27,7 +27,7 @@
           </div>
           <h1 class="ui center aligned icon header">
             <i v-if="!object.icon" class="circular inverted user success icon"></i>
-            <img alt="" class="ui big circular image" v-else v-lazy="$store.getters['instance/absoluteUrl'](object.icon.urls.square_crop)" />
+            <img alt="" class="ui big circular image" v-else v-lazy="$store.getters['instance/absoluteUrl'](object.icon.urls.medium_square_crop)" />
             <div class="ellispsis content">
               <div class="ui very small hidden divider"></div>
               <span>{{ displayName }}</span>