Fix #637: greyed tracks in radio builder and detail page

changes/changelog.d/637.bugfix

+Fixed greyed tracks in radio builder and detail page (#637)

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) {

front/src/components/audio/track/Row.vue

 <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;
   }
 }

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;
 }

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>