Add permission check for reordering playlist items

src/scripts/playlistViewer.js

@@ -1,48 +1,73 @@
-import listView from '../components/listview/listview';
+import { getPlaylistsApi } from '@jellyfin/sdk/lib/utils/api/playlists-api';
 
-function getFetchPlaylistItemsFn(itemId) {
+import ServerConnections from 'components/ServerConnections';
+import listView from 'components/listview/listview';
+import { toApi } from 'utils/jellyfin-apiclient/compat';
+
+function getFetchPlaylistItemsFn(apiClient, itemId) {
     return function () {
         const query = {
             Fields: 'PrimaryImageAspectRatio',
             EnableImageTypes: 'Primary,Backdrop,Banner,Thumb',
-            UserId: ApiClient.getCurrentUserId()
+            UserId: apiClient.getCurrentUserId()
         };
-        return ApiClient.getJSON(ApiClient.getUrl(`Playlists/${itemId}/Items`, query));
+        return apiClient.getJSON(apiClient.getUrl(`Playlists/${itemId}/Items`, query));
     };
 }
 
-function getItemsHtmlFn(itemId) {
+function getItemsHtmlFn(playlistId, isEditable = false) {
     return function (items) {
         return listView.getListViewHtml({
-            items: items,
+            items,
             showIndex: false,
-            showRemoveFromPlaylist: true,
             playFromHere: true,
             action: 'playallfromhere',
             smallIcon: true,
-            dragHandle: true,
-            playlistId: itemId
+            dragHandle: isEditable,
+            playlistId
         });
     };
 }
 
-function init(page, item) {
+async function init(page, item) {
+    const apiClient = ServerConnections.getApiClient(item.ServerId);
+    const api = toApi(apiClient);
+
+    let isEditable = false;
+    const { data } = await getPlaylistsApi(api)
+        .getPlaylistUser({
+            playlistId: item.Id,
+            userId: apiClient.getCurrentUserId()
+        })
+        .catch(() => {
+            // If a user doesn't have access, then the request will 404 and throw
+            return { data: {} };
+        });
+    isEditable = !!data.CanEdit;
+
     const elem = page.querySelector('#childrenContent .itemsContainer');
     elem.classList.add('vertical-list');
     elem.classList.remove('vertical-wrap');
-    elem.enableDragReordering(true);
-    elem.fetchData = getFetchPlaylistItemsFn(item.Id);
-    elem.getItemsHtml = getItemsHtmlFn(item.Id);
+    elem.enableDragReordering(isEditable);
+    elem.fetchData = getFetchPlaylistItemsFn(apiClient, item.Id);
+    elem.getItemsHtml = getItemsHtmlFn(item.Id, isEditable);
+}
+
+function refresh(page) {
+    page.querySelector('#childrenContent').classList.add('verticalSection-extrabottompadding');
+    page.querySelector('#childrenContent .itemsContainer').refreshItems();
 }
 
 function render(page, item) {
     if (!page.playlistInit) {
         page.playlistInit = true;
-        init(page, item);
+        init(page, item)
+            .finally(() => {
+                refresh(page);
+            });
+    } else {
+        refresh(page);
     }
-
-    page.querySelector('#childrenContent').classList.add('verticalSection-extrabottompadding');
-    page.querySelector('#childrenContent .itemsContainer').refreshItems();
 }
 
 const PlaylistViewer = {