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 5b176d6c73..bf2ed255a6 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 5430b81f7d..ff21e2604d 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 55466e202f..46683c6e89 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 e50f591493..8bdb2fc342 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 73015e41cf..fa54f44607 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 d9c4e151f8..55009075e8 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 f9700c3ef0..dda46e24f2 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 785cb3d22a..d9cfe5f6e9 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 066041f693..1cf51953eb 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 d378f743b3..ece6c1c3db 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>
--
GitLab