diff --git a/src/scripts/playlistViewer.js b/src/scripts/playlistViewer.js index 16844ee8c8..8b2ca3a635 100644 --- a/src/scripts/playlistViewer.js +++ b/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 = {