From 2f5a13a339ef30e5ab06008edc9856638178ac67 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Thu, 10 May 2018 17:52:13 +0200
Subject: [PATCH] Fix #199: unplayable tracks are now properly disabled in the
 interface

---
 api/funkwhale_api/music/admin.py          |  8 +++++++-
 changes/changelog.d/199.bugfix            |  1 +
 front/src/components/audio/PlayButton.vue | 20 +++++++++++++++-----
 3 files changed, 23 insertions(+), 6 deletions(-)
 create mode 100644 changes/changelog.d/199.bugfix

diff --git a/api/funkwhale_api/music/admin.py b/api/funkwhale_api/music/admin.py
index 219b40a91..667a7c2a1 100644
--- a/api/funkwhale_api/music/admin.py
+++ b/api/funkwhale_api/music/admin.py
@@ -38,6 +38,7 @@ class ImportBatchAdmin(admin.ModelAdmin):
     search_fields = [
         'import_request__name', 'source', 'batch__pk', 'mbid']
 
+
 @admin.register(models.ImportJob)
 class ImportJobAdmin(admin.ModelAdmin):
     list_display = ['source', 'batch', 'track_file', 'status', 'mbid']
@@ -77,5 +78,10 @@ class TrackFileAdmin(admin.ModelAdmin):
     list_select_related = [
         'track'
     ]
-    search_fields = ['source', 'acoustid_track_id']
+    search_fields = [
+        'source',
+        'acoustid_track_id',
+        'track__title',
+        'track__album__title',
+        'track__artist__name']
     list_filter = ['mimetype']
diff --git a/changes/changelog.d/199.bugfix b/changes/changelog.d/199.bugfix
new file mode 100644
index 000000000..0dff4f9fe
--- /dev/null
+++ b/changes/changelog.d/199.bugfix
@@ -0,0 +1 @@
+Uplayable tracks are now properly disabled in the interface (#199)
diff --git a/front/src/components/audio/PlayButton.vue b/front/src/components/audio/PlayButton.vue
index 2662f30b3..efa59a29d 100644
--- a/front/src/components/audio/PlayButton.vue
+++ b/front/src/components/audio/PlayButton.vue
@@ -1,8 +1,9 @@
 <template>
-  <div :class="['ui', {'tiny': discrete}, 'buttons']">
+  <div :title="title" :class="['ui', {'tiny': discrete}, 'buttons']">
     <button
       :title="$t('Add to current queue')"
       @click="addNext(true)"
+      :disabled="!playable"
       :class="['ui', {loading: isLoading}, {'mini': discrete}, {disabled: !playable}, 'button']">
       <i class="ui play icon"></i>
       <template v-if="!discrete"><slot><i18next path="Play"/></slot></template>
@@ -10,9 +11,9 @@
     <div v-if="!discrete" :class="['ui', {disabled: !playable}, 'floating', 'dropdown', 'icon', 'button']">
       <i class="dropdown icon"></i>
       <div class="menu">
-        <div class="item"@click="add"><i class="plus icon"></i><i18next path="Add to queue"/></div>
-        <div class="item"@click="addNext()"><i class="step forward icon"></i><i18next path="Play next"/></div>
-        <div class="item"@click="addNext(true)"><i class="arrow down icon"></i><i18next path="Play now"/></div>
+        <div class="item" :disabled="!playable" @click="add"><i class="plus icon"></i><i18next path="Add to queue"/></div>
+        <div class="item" :disabled="!playable" @click="addNext()"><i class="step forward icon"></i><i18next path="Play next"/></div>
+        <div class="item" :disabled="!playable" @click="addNext(true)"><i class="arrow down icon"></i><i18next path="Play now"/></div>
       </div>
     </div>
   </div>
@@ -45,9 +46,18 @@ export default {
     jQuery(this.$el).find('.ui.dropdown').dropdown()
   },
   computed: {
+    title () {
+      if (this.playable) {
+        return this.$t('Play immediatly')
+      } else {
+        if (this.track) {
+          return this.$t('This track is not imported and cannot be played')
+        }
+      }
+    },
     playable () {
       if (this.track) {
-        return true
+        return this.track.files.length > 0
       } else if (this.tracks) {
         return this.tracks.length > 0
       } else if (this.playlist) {