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 26c777038..4bf5bf9b8 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 e4d144fb8..7de8ef2aa 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 d3ef13211..0ac300bf7 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",