Add song priority to playlist

readme.md

@@ -27,6 +27,7 @@ Showing the Materialish theme, library view, and playlist editor
     * Multiselection (ctrl, shift: remove, drag and drop; right click: add to top, bottom, current)
     * Playlist searching
     * Skip to remove songs (when user voting is disabled)
+    * Set song priority
 * File browser
     * Double click folders to browse them
     * Add songs to the playlist by pressing "+" or double clicking

src/contextmenu.js

@@ -21,6 +21,11 @@ function contextResponse(key, table, tr) {
         case 'play':
             mpcp.playlist.play(tr);
             break;
+        case 'setPriority':
+            document.getElementById('priority-form').dataset.fileid = tr.data().fileid;
+            document.getElementById('priority').value = tr.data().prio;
+            $('#set-priority-modal').modal('show');
+            break;
         // playlist editor
         case 'mttpe':
             mpcp.pe.moveToTop(tr);
@@ -227,6 +232,7 @@ $.contextMenu({
                     'mttPlaylist':  {name: 'Move to top of playlist'},
                     'mtc':          {name: 'Move after current playing song'},
                     'mtbPlaylist':  {name: 'Move to bottom of playlist'},
+                    'setPriority':  {name: 'Set song priority'},
                     'remPlaylist':  {name: 'Remove'},
                     'infoPlaylist': {name: 'Song information'}
                 };
@@ -237,6 +243,7 @@ $.contextMenu({
                     'play':         {name: 'Play song'},
                     'mttPlaylist':  {name: 'Move to top of playlist'},
                     'mtbPlaylist':  {name: 'Move to bottom of playlist'},
+                    'setPriority':  {name: 'Set song priority'},
                     'remPlaylist':  {name: 'Remove'},
                     'infoPlaylist': {name: 'Song information'}
                 };

src/playlist.js

@@ -171,7 +171,13 @@ return {
 
             //console.log(i + ': start');
 
-            html += '<tr class="drag context-menu ' + current + '" title="' + title + '" data-fileid="' + value.Id + '" data-file="' + value.file + '" data-pos="' + value.Pos +  '"><td class="playlist-song-list-icons"><span class="glyphicon glyphicon-play song-play faded text-success" title="Play song"></span>' + (value.Pos + 1) + '.</td><td class="playlist-song-title"><table class="fixed-table"><tr><td>' + title + '</td></tr></table></td><td class="playlist-song-list-icons text-right"><span class="song-remove faded text-danger glyphicon glyphicon-remove" title="Remove song from playlist"></span></td></tr>';
+            let prio = '';
+
+            if (value.Prio) {
+                prio = ` [${value.Prio}]`;
+            }
+
+            html += `<tr class="drag context-menu ${current}" title="${title}" data-fileid="${value.Id }" data-file="${value.file}" data-pos="${value.Pos}" data-prio="${value.Prio}"><td class="playlist-song-list-icons"><span class="glyphicon glyphicon-play song-play faded text-success" title="Play song"></span>${value.Pos + 1}.${prio}</td><td class="playlist-song-title"><table class="fixed-table"><tr><td>${title}</td></tr></table></td><td class="playlist-song-list-icons text-right"><span class="song-remove faded text-danger glyphicon glyphicon-remove" title="Remove song from playlist"></span></td></tr>`;
         }
 
         this.toPulse = [];
@@ -853,6 +859,23 @@ return {
         });
     },
 
+    setPriority: (priority, fileid) => {
+        komponist.prioid(priority, fileid, (err) => {
+            if (err) console.error(err);
+        });
+    },
+
+    setPriorityFromForm: () => {
+        if (!document.getElementById('priority-form').checkValidity()) {
+            document.getElementById('priority-submit').click();
+        } else {
+            $('#set-priority-modal').modal('hide');
+            let priority = document.getElementById('priority').value;
+            let fileid = document.getElementById('priority-form').dataset.fileid;
+            mpcp.playlist.setPriority(priority, fileid);
+        }
+    },
+
     initEvents: function () {
         $('#new-playlist').click(function () { mpcp.pe.newLocal(); });
 
@@ -920,6 +943,14 @@ return {
             mpcp.playlist.playSong(file);
         });
 
+        $('#set-priority-confirm').click(() => {
+            mpcp.playlist.setPriorityFromForm();
+        });
+
+        document.getElementById('priority-form').addEventListener('submit', () => {
+            mpcp.playlist.setPriorityFromForm();
+        });
+
         mpcp.utils.multiSelect(this, ['song-remove']);
     }
 };

views/index.pug

@@ -207,6 +207,24 @@ html
                     .modal-footer
                         button.btn.btn-default(type='button', data-dismiss='modal') Close
 
+        #set-priority-modal.modal.fade(tabindex='-1')
+            .modal-dialog
+                .modal-content
+                    .modal-header
+                        button.close(type='button', data-dismiss='modal')
+                            span ×
+                        h4.modal-title Set Priority
+                    .modal-body
+                        p Set the priority of the specified song. A higher priority means that it will be played first when in random mode. The default priority of new songs is 0.
+                        p: a(href='https://www.musicpd.org/doc/protocol/queue.html', target='_blank') Source
+                        form#priority-form
+                            input#priority.form-control(type='number', min='0', max='255')
+                            // form validation, and press enter to submit
+                            input#priority-submit.hidden(type='submit')
+                    .modal-footer
+                        button.btn.btn-default(type='button', data-dismiss='modal') Close
+                        button#set-priority-confirm.btn.btn-primary(type='button') Ok
+
         if (config.downloader)
             #downloader-location-modal.modal.fade(tabindex='-1')
                 .modal-dialog