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 000000000..19764e419
--- /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 521a66f87..27a052269 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 fd8b2daaf..d3b7dc734 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 9612accbc..937025807 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 5698a71f4..0a8695863 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>