Add move to top and bottom context menu options

After adding an item to a playlist, I often want to move it to
the top and it's tedious to drag and drop if the playlist is large.
This adds 'Move to Top' and 'Move to Bottom' options to a playlist
item context menu.

src/components/itemContextMenu.js

@@ -291,6 +291,22 @@ export function getCommands(options) {
         });
     }
 
+    if (item.PlaylistItemId && options.playlistId && item.PlaylistIndex > 0) {
+        commands.push({
+            name: globalize.translate('MoveToTop'),
+            id: 'movetotop',
+            icon: 'vertical_align_top'
+        });
+    }
+
+    if (item.PlaylistItemId && options.playlistId && item.PlaylistIndex < (item.PlaylistItems - 1)) {
+        commands.push({
+            name: globalize.translate('MoveToBottom'),
+            id: 'movetobottom',
+            icon: 'vertical_align_bottom'
+        });
+    }
+
     if (options.collectionId) {
         commands.push({
             name: globalize.translate('RemoveFromCollection'),
@@ -559,6 +575,22 @@ function executeCommand(item, id, options) {
                     getResolveFunction(resolve, id, true)();
                 });
                 break;
+            case 'movetotop':
+                apiClient.ajax({
+                    url: apiClient.getUrl('Playlists/' + options.playlistId + '/Items/' + item.PlaylistItemId + '/Move/0'),
+                    type: 'POST'
+                }).then(function () {
+                    getResolveFunction(resolve, id, true)();
+                });
+                break;
+            case 'movetobottom':
+                apiClient.ajax({
+                    url: apiClient.getUrl('Playlists/' + options.playlistId + '/Items/' + item.PlaylistItemId + '/Move/' + (item.PlaylistItems - 1)),
+                    type: 'POST'
+                }).then(function () {
+                    getResolveFunction(resolve, id, true)();
+                });
+                break;
             case 'removefromcollection':
                 apiClient.ajax({
                     type: 'DELETE',

src/components/shortcuts.js

@@ -110,6 +110,19 @@ function showContextMenu(card, options = {}) {
         if (playlistId) {
             const elem = dom.parentWithAttribute(card, 'data-playlistitemid');
             item.PlaylistItemId = elem ? elem.getAttribute('data-playlistitemid') : null;
+
+            const itemsContainer = dom.parentWithAttribute(card, 'is', 'emby-itemscontainer');
+            if (itemsContainer) {
+                let index = 0;
+                for (const listItem of itemsContainer.querySelectorAll('.listItem')) {
+                    const playlistItemId = listItem.getAttribute('data-playlistitemid');
+                    if (playlistItemId == item.PlaylistItemId) {
+                        item.PlaylistIndex = index;
+                    }
+                    index++;
+                }
+                item.PlaylistItems = index;
+            }
         }
 
         const apiClient = ServerConnections.getApiClient(item.ServerId);

src/strings/en-us.json

@@ -1127,6 +1127,8 @@
     "MoreUsersCanBeAddedLater": "More users can be added later from within the Dashboard.",
     "MoveLeft": "Move left",
     "MoveRight": "Move right",
+    "MoveToBottom": "Move to bottom",
+    "MoveToTop": "Move to top",
     "Movie": "Movie",
     "MovieLibraryHelp": "Review the {0}movie naming guide{1}.",
     "Movies": "Movies",