From b58f3e1440208597a797631629c0ab1f84005806 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Wed, 2 Jan 2019 15:57:54 +0100
Subject: [PATCH] Fix #637: greyed tracks in radio builder and detail page
---
changes/changelog.d/637.bugfix | 1 +
front/src/components/audio/PlayButton.vue | 9 ++++++++-
front/src/components/audio/track/Row.vue | 9 +++++----
front/src/components/audio/track/Table.vue | 3 ++-
front/src/components/library/radios/Builder.vue | 4 ++--
5 files changed, 18 insertions(+), 8 deletions(-)
create mode 100644 changes/changelog.d/637.bugfix
diff --git a/changes/changelog.d/637.bugfix b/changes/changelog.d/637.bugfix
new file mode 100644
index 00000000..19764e41
--- /dev/null
+++ b/changes/changelog.d/637.bugfix
@@ -0,0 +1 @@
+Fixed greyed tracks in radio builder and detail page (#637)
diff --git a/front/src/components/audio/PlayButton.vue b/front/src/components/audio/PlayButton.vue
index 521a66f8..27a05226 100644
--- a/front/src/components/audio/PlayButton.vue
+++ b/front/src/components/audio/PlayButton.vue
@@ -120,7 +120,14 @@ export default {
this.isLoading = true
let getTracks = new Promise((resolve, reject) => {
if (self.track) {
- resolve([self.track])
+ if (!self.track.uploads || self.track.uploads.length === 0) {
+ // fetch uploads from api
+ axios.get(`tracks/${self.track.id}/`).then((response) => {
+ resolve([response.data])
+ })
+ } else {
+ resolve([self.track])
+ }
} else if (self.tracks) {
resolve(self.tracks)
} else if (self.playlist) {
diff --git a/front/src/components/audio/track/Row.vue b/front/src/components/audio/track/Row.vue
index fd8b2daa..d3b7dc73 100644
--- a/front/src/components/audio/track/Row.vue
+++ b/front/src/components/audio/track/Row.vue
@@ -1,7 +1,7 @@
<template>
<tr>
<td>
- <play-button class="basic icon" :discrete="true" :track="track"></play-button>
+ <play-button class="basic icon" :discrete="true" :is-playable="playable" :track="track"></play-button>
</td>
<td>
<img class="ui mini image" v-if="track.album.cover.original" v-lazy="$store.getters['instance/absoluteUrl'](track.album.cover.small_square_crop)">
@@ -60,7 +60,8 @@ export default {
props: {
track: {type: Object, required: true},
artist: {type: Object, required: false},
- displayPosition: {type: Boolean, default: false}
+ displayPosition: {type: Boolean, default: false},
+ playable: {type: Boolean, required: false, default: false},
},
components: {
TrackFavoriteIcon,
@@ -86,9 +87,9 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
-
tr:not(:hover) {
- .favorite-icon:not(.favorited), .playlist-icon {
+ .favorite-icon:not(.favorited),
+ .playlist-icon {
visibility: hidden;
}
}
diff --git a/front/src/components/audio/track/Table.vue b/front/src/components/audio/track/Table.vue
index 9612accb..93702580 100644
--- a/front/src/components/audio/track/Table.vue
+++ b/front/src/components/audio/track/Table.vue
@@ -13,6 +13,7 @@
</thead>
<tbody>
<track-row
+ :playable="playable"
:display-position="displayPosition"
:track="track"
:artist="artist"
@@ -31,6 +32,7 @@ import Modal from '@/components/semantic/Modal'
export default {
props: {
tracks: {type: Array, required: true},
+ playable: {type: Boolean, required: false, default: false},
artist: {type: Object, required: false},
displayPosition: {type: Boolean, default: false}
},
@@ -48,7 +50,6 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
-
tr:not(:hover) .favorite-icon:not(.favorited) {
display: none;
}
diff --git a/front/src/components/library/radios/Builder.vue b/front/src/components/library/radios/Builder.vue
index 5698a71f..0a869586 100644
--- a/front/src/components/library/radios/Builder.vue
+++ b/front/src/components/library/radios/Builder.vue
@@ -77,7 +77,7 @@
</builder-filter>
</tbody>
</table>
- <template v-if="checkResult">
+ <template v-if="checkResult && checkResult.candidates && checkResult.candidates.count">
<h3
class="ui header"
v-translate="{count: checkResult.candidates.count}"
@@ -85,7 +85,7 @@
translate-plural="%{ count } tracks matching combined filters">
%{ count } track matching combined filters
</h3>
- <track-table v-if="checkResult.candidates.sample" :tracks="checkResult.candidates.sample"></track-table>
+ <track-table v-if="checkResult.candidates.sample" :tracks="checkResult.candidates.sample" :playable="true"></track-table>
</template>
</section>
</div>
--
GitLab