From f3ca76e418ff4867e89b68e4019f10160bb46465 Mon Sep 17 00:00:00 2001
From: Kevin G <kevin@myplaceonline.com>
Date: Mon, 22 Jan 2024 21:13:15 -0600
Subject: [PATCH] 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 | 32 +++++++++++++++++++++++++++++++
 src/components/shortcuts.js       | 13 +++++++++++++
 src/strings/en-us.json            |  2 ++
 3 files changed, 47 insertions(+)

diff --git a/src/components/itemContextMenu.js b/src/components/itemContextMenu.js
index 26c7770386..4bf5bf9b85 100644
--- a/src/components/itemContextMenu.js
+++ b/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',
diff --git a/src/components/shortcuts.js b/src/components/shortcuts.js
index e4d144fb84..7de8ef2aa9 100644
--- a/src/components/shortcuts.js
+++ b/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);
diff --git a/src/strings/en-us.json b/src/strings/en-us.json
index d3ef132114..0ac300bf78 100644
--- a/src/strings/en-us.json
+++ b/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",