Merge branch 'playlist-perfs' into 'develop'

Use smaller images when possible to increase performance on client-side

See merge request funkwhale/funkwhale!328

front/src/components/library/Album.vue

@@ -4,7 +4,7 @@
       <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
     </div>
     <template v-if="album">
-      <div :class="['ui', 'head', {'with-background': album.cover}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle" v-title="album.title">
+      <div :class="['ui', 'head', {'with-background': album.cover.original}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle" v-title="album.title">
         <div class="segment-content">
           <h2 class="ui center aligned icon header">
             <i class="circular inverted sound yellow icon"></i>
@@ -98,10 +98,10 @@ export default {
       return 'https://musicbrainz.org/release/' + this.album.mbid
     },
     headerStyle () {
-      if (!this.album.cover) {
+      if (!this.album.cover.original) {
         return ''
       }
-      return 'background-image: url(' + this.$store.getters['instance/absoluteUrl'](this.album.cover) + ')'
+      return 'background-image: url(' + this.$store.getters['instance/absoluteUrl'](this.album.cover.original) + ')'
     }
   },
   watch: {

front/src/components/library/Artist.vue

@@ -158,10 +158,10 @@ export default {
       })[0]
     },
     headerStyle () {
-      if (!this.cover) {
+      if (!this.cover.original) {
         return ''
       }
-      return 'background-image: url(' + this.$store.getters['instance/absoluteUrl'](this.cover) + ')'
+      return 'background-image: url(' + this.$store.getters['instance/absoluteUrl'](this.cover.original) + ')'
     }
   },
   watch: {

front/src/components/playlists/Widget.vue

@@ -3,9 +3,11 @@
     <h3 class="ui header">
       <slot name="title"></slot>
     </h3>
-    <i @click="fetchData(previousPage)" :disabled="!previousPage" :class="['ui', {disabled: !previousPage}, 'circular', 'large', 'angle up', 'icon']">
+    <i @click="fetchData(previousPage)" :disabled="!previousPage" :class="['ui', {disabled: !previousPage}, 'circular', 'medium', 'angle up', 'icon']">
     </i>
-    <i @click="fetchData(nextPage)" :disabled="!nextPage" :class="['ui', {disabled: !nextPage}, 'circular', 'large', 'angle down', 'icon']">
+    <i @click="fetchData(nextPage)" :disabled="!nextPage" :class="['ui', {disabled: !nextPage}, 'circular', 'medium', 'angle down', 'icon']">
+    </i>
+    <i @click="fetchData(url)" :class="['ui', 'circular', 'medium', 'refresh', 'icon']">
     </i>
     <div v-if="isLoading" class="ui inverted active dimmer">
       <div class="ui loader"></div>
@@ -75,3 +77,8 @@ export default {
   }
 }
 </script>
+<style scoped>
+.refresh.icon {
+  float: right;
+}
+</style>