[web-src] now playing modal setting track's usermark review status

web-src/src/components/ListItemTrack.vue

@@ -4,7 +4,7 @@
       <slot name="icon"></slot>
     </figure>
     <div class="media-content fd-has-action is-clipped" @click="listeners.click">
-      <h1 class="title is-6" :class="{ 'has-text-grey': props.track.media_kind === 'podcast' && props.track.play_count > 0 }">{{ props.track.title }}</h1>
+      <h1 class="title is-6" :class="{ 'has-text-grey': props.track.usermark > 0 || props.track.media_kind === 'podcast' && props.track.play_count > 0, 'is-italic': props.track.usermark > 0 }">{{ props.track.title }}</h1>
       <h2 class="subtitle is-7 has-text-grey"><b>{{ props.track.artist }}</b></h2>
       <h2 class="subtitle is-7 has-text-grey">{{ props.track.album }}</h2>
       <slot name="progress"></slot>

web-src/src/components/ListTracks.vue

@@ -7,7 +7,7 @@
         </a>
       </template>
     </list-item-track>
-    <modal-dialog-track :show="show_details_modal" :track="selected_track" @close="show_details_modal = false" />
+    <modal-dialog-track :show="show_details_modal" :track="selected_track" @close="show_details_modal = false" @usermark-updated="usermark_upd" />
   </div>
 </template>
 
@@ -40,6 +40,10 @@ export default {
       }
     },
 
+    usermark_upd: function (args) {
+      this.$emit('usermark-updated', args)
+    },
+
     open_dialog: function (track) {
       this.selected_track = track
       this.show_details_modal = true

web-src/src/components/ModalDialogQueueItem.vue

@@ -60,6 +60,17 @@
                     <span v-if="item.bitrate"> | {{ item.bitrate }} Kb/s</span>
                   </span>
                 </p>
+                <div v-if="this.item.data_kind === 'file'">
+                  <p>
+                    <span class="heading">Usermark</span>
+                  </p>
+                  <div class="buttons">
+                    <a :disabled="this.usermark_is_set(1)" class="button is-small is-danger" @click="usermark_update(1)">Mark to delete</a>
+                    <a :disabled="this.usermark_is_set(2)" class="button is-small is-warning" @click="usermark_update(2)">Mark to rexcode</a>
+                    <a :disabled="this.usermark_is_set(4)" class="button is-small is-warning" @click="usermark_update(4)">Mark to review</a>
+                    <a :disabled="this.usermark === 0" class="button is-small is-success" @click="usermark_update(0)">Mark reset</a>
+                  </div>
+                </div>
               </div>
             </div>
             <footer class="card-footer">
@@ -84,10 +95,11 @@ import SpotifyWebApi from 'spotify-web-api-js'
 
 export default {
   name: 'ModalDialogQueueItem',
-  props: ['show', 'item'],
+  props: ['show', 'item', 'np_usermark'],
 
   data () {
     return {
+      usermark: -1,
       spotify_track: {}
     }
   },
@@ -129,6 +141,18 @@ export default {
     open_spotify_album: function () {
       this.$emit('close')
       this.$router.push({ path: '/music/spotify/albums/' + this.spotify_track.album.id })
+    },
+
+    usermark_is_set: function (value) {
+      return (this.usermark & value) > 0
+    },
+
+    usermark_update (value) {
+      const newvalue = value === 0 ? 0 : value | this.usermark
+      webapi.library_track_set_usermark(this.item.track_id, newvalue).then(() => {
+        this.usermark = newvalue
+        this.$emit('close_usermark', { value: this.usermark })
+      })
     }
   },
 
@@ -142,6 +166,15 @@ export default {
         })
       } else {
         this.spotify_track = {}
+        if (this.np_usermark !== undefined) {
+          this.usermark = this.np_usermark
+        } else if (this.item.data_kind === 'file') {
+          webapi.library_track(this.item.track_id).then((response) => {
+            this.usermark = response.data.usermark
+          }).catch(() => {
+            this.usermark = -1
+          })
+        }
       }
     }
   }

web-src/src/components/ModalDialogTrack.vue

@@ -74,6 +74,17 @@
                   <span class="heading">Rating</span>
                   <span class="title is-6">{{ Math.floor(track.rating / 10) }} / 10</span>
                 </p>
+                <div v-if="this.track.data_kind === 'file'">
+                  <p>
+                    <span class="heading">Usermark</span>
+                  </p>
+                  <div class="buttons">
+                    <a :disabled="this.usermark_is_set(1)" class="button is-small is-danger" @click="usermark_update(1)">Mark to delete</a>
+                    <a :disabled="this.usermark_is_set(2)" class="button is-small is-warning" @click="usermark_update(2)">Mark to rexcode</a>
+                    <a :disabled="this.usermark_is_set(4)" class="button is-small is-warning" @click="usermark_update(4)">Mark to review</a>
+                    <a :disabled="this.usermark === 0" class="button is-small is-success" @click="usermark_update(0)">Mark reset</a>
+                  </div>
+                </div>
                 <p v-if="track.comment">
                   <span class="heading">Comment</span>
                   <span class="title is-6">{{ track.comment }}</span>
@@ -110,6 +121,7 @@ export default {
 
   data () {
     return {
+      usermark: -1,
       spotify_track: {}
     }
   },
@@ -160,6 +172,18 @@ export default {
       this.$router.push({ path: '/music/spotify/albums/' + this.spotify_track.album.id })
     },
 
+    usermark_is_set: function (value) {
+      return (this.usermark & value) > 0
+    },
+
+    usermark_update (value) {
+      const newvalue = value === 0 ? 0 : value | this.usermark
+      webapi.library_track_set_usermark(this.track.id, newvalue).then(() => {
+        this.usermark = newvalue
+        this.$emit('usermark-updated', { value: this.usermark, track_id: this.track.id })
+      })
+    },
+
     mark_new: function () {
       webapi.library_track_update(this.track.id, { play_count: 'reset' }).then(() => {
         this.$emit('play-count-changed')
@@ -185,6 +209,13 @@ export default {
         })
       } else {
         this.spotify_track = {}
+        if (this.track.data_kind === 'file') {
+          webapi.library_track(this.track.id).then((response) => {
+            this.usermark = response.data.usermark
+          }).catch(() => {
+            this.usermark = -1
+          })
+        }
       }
     }
   }

web-src/src/pages/PageAlbum.vue

@@ -24,7 +24,7 @@
     </template>
     <template slot="content">
       <p class="heading is-7 has-text-centered-mobile fd-has-margin-top">{{ album.track_count }} tracks</p>
-      <list-tracks :tracks="tracks" :uris="album.uri"></list-tracks>
+      <list-tracks :tracks="tracks" :uris="album.uri" @usermark-updated="usermark_upd"></list-tracks>
       <modal-dialog-album :show="show_album_details_modal" :album="album" @close="show_album_details_modal = false" />
     </template>
   </content-with-hero>
@@ -72,6 +72,10 @@ export default {
       this.$router.push({ path: '/music/artists/' + this.album.artist_id })
     },
 
+    usermark_upd: function (args) {
+      this.tracks.find(e => e.id === args.track_id).usermark = args.value
+    },
+
     play: function () {
       webapi.player_play_uri(this.album.uri, true)
     }

web-src/src/pages/PageArtistTracks.vue

@@ -19,8 +19,9 @@
       </template>
       <template slot="content">
         <p class="heading has-text-centered-mobile"><a class="has-text-link" @click="open_artist">{{ artist.album_count }} albums</a> | {{ artist.track_count }} tracks</p>
-        <list-tracks :tracks="tracks.items" :uris="track_uris"></list-tracks>
+        <list-tracks :tracks="tracks.items" :uris="track_uris" @usermark-updated="usermark_upd"></list-tracks>
         <modal-dialog-artist :show="show_artist_details_modal" :artist="artist" @close="show_artist_details_modal = false" />
+        <modal-dialog-track :show="show_details_modal" :track="selected_track" @close="show_details_modal = false" />
       </template>
     </content-with-heading>
   </div>
@@ -79,6 +80,10 @@ export default {
       this.$router.push({ path: '/music/artists/' + this.artist.id })
     },
 
+    usermark_upd: function (args) {
+      this.tracks.items.find(e => e.id === args.track_id).usermark = args.value
+    },
+
     play: function () {
       webapi.player_play_uri(this.tracks.items.map(a => a.uri).join(','), true)
     }

web-src/src/pages/PageBrowse.vue

@@ -27,7 +27,7 @@
         <p class="heading">tracks</p>
       </template>
       <template slot="content">
-        <list-tracks :tracks="recently_played.items"></list-tracks>
+        <list-tracks :tracks="recently_played.items" @usermark-updated="usermark_upd_played"></list-tracks>
       </template>
       <template slot="footer">
         <nav class="level">
@@ -80,6 +80,10 @@ export default {
   methods: {
     open_browse: function (type) {
       this.$router.push({ path: '/music/browse/' + type })
+    },
+
+    usermark_upd_played: function (args) {
+      this.recently_played.items.find(e => e.id === args.track_id).usermark = args.value
     }
   }
 }

web-src/src/pages/PageNowPlaying.vue

@@ -28,7 +28,7 @@
       </div>
       <div class="fd-has-padding-left-right">
         <div class="container has-text-centered fd-has-margin-top">
-          <h1 class="title is-5">
+          <h1 :class="{ 'title': true, 'is-5': true, 'has-text-grey': this.usermark > 0, 'is-italic': this.usermark > 0}">
             {{ now_playing.title }}
           </h1>
           <h2 class="title is-6">
@@ -55,7 +55,7 @@
         </div>
       </div>
     </div>
-    <modal-dialog-queue-item :show="show_details_modal" :item="selected_item" @close="show_details_modal = false" />
+    <modal-dialog-queue-item :show="show_details_modal" :item="selected_item" :np_usermark="this.usermark" @close="show_details_modal = false" @close_usermark="close_usermark_upd"/>
   </section>
 </template>
 
@@ -75,6 +75,8 @@ export default {
       item_progress_ms: 0,
       interval_id: 0,
 
+      usermark: 0,
+
       show_details_modal: false,
       selected_item: {}
     }
@@ -139,6 +141,11 @@ export default {
       })
     },
 
+    close_usermark_upd: function (args) {
+      this.usermark = args.value
+      this.show_details_modal = false
+    },
+
     open_dialog: function (item) {
       this.selected_item = item
       this.show_details_modal = true
@@ -155,6 +162,14 @@ export default {
       if (this.state.state === 'play') {
         this.interval_id = window.setInterval(this.tick, 1000)
       }
+    },
+
+    'now_playing' () {
+      webapi.library_track(this.now_playing.track_id).then((response) => {
+        this.usermark = response.data.usermark
+      }).catch(() => {
+        this.usermark = 0
+      })
     }
   }
 }

web-src/src/pages/PagePlaylist.vue

@@ -15,7 +15,7 @@
     </template>
     <template slot="content">
       <p class="heading has-text-centered-mobile">{{ tracks.length }} tracks</p>
-      <list-tracks :tracks="tracks" :uris="uris"></list-tracks>
+      <list-tracks :tracks="tracks" :uris="uris" @usermark-updated="usermark_upd"></list-tracks>
       <modal-dialog-playlist :show="show_playlist_details_modal" :playlist="playlist" :uris="uris" @close="show_playlist_details_modal = false" />
     </template>
   </content-with-heading>
@@ -66,6 +66,10 @@ export default {
   },
 
   methods: {
+    usermark_upd: function (args) {
+      this.tracks.find(e => e.id === args.track_id).usermark = args.value
+    },
+
     play: function () {
       webapi.player_play_uri(this.uris, true)
     }

web-src/src/pages/PageSearch.vue

@@ -34,7 +34,7 @@
         <p class="title is-4">Tracks</p>
       </template>
       <template slot="content">
-        <list-tracks :tracks="tracks.items"></list-tracks>
+        <list-tracks :tracks="tracks.items" @usermark-updated="usermark_upd"></list-tracks>
       </template>
       <template slot="footer">
         <nav v-if="show_all_tracks_button" class="level">
@@ -355,6 +355,10 @@ export default {
       this.$refs.search_field.blur()
     },
 
+    usermark_upd: function (args) {
+      this.tracks.items.find(e => e.id === args.track_id).usermark = args.value
+    },
+
     open_search_tracks: function () {
       this.$router.push({
         path: '/search/library',

web-src/src/webapi/index.js

@@ -335,6 +335,13 @@ export default {
     return axios.put('./api/library/tracks/' + trackId, undefined, { params: attributes })
   },
 
+  library_track_set_usermark (trackId, flag) {
+    return axios.put('/api/library/tracks/' + trackId, undefined, { params: { usermark: flag } }).then((response) => {
+      store.dispatch('add_notification', { text: flag === 0 ? 'Track Review Reset' : 'Track Review Updated', type: flag === 0 ? 'success' : 'info', timeout: 1500 })
+      return Promise.resolve(response)
+    })
+  },
+
   library_files (directory = undefined) {
     const filesParams = { directory: directory }
     return axios.get('./api/library/files', {