diff --git a/package.json b/package.json index af9bfaaf57..50217331cf 100644 --- a/package.json +++ b/package.json @@ -166,6 +166,7 @@ "src/components/fetchhelper.js", "src/scripts/editorsidebar.js", "src/scripts/globalize.js", + "src/scripts/playlists.js", "src/scripts/keyboardNavigation.js", "src/scripts/settings/appSettings.js", "src/scripts/settings/userSettings.js", diff --git a/src/scripts/editorsidebar.js b/src/scripts/editorsidebar.js index ddda248c87..5d0e237a0d 100644 --- a/src/scripts/editorsidebar.js +++ b/src/scripts/editorsidebar.js @@ -183,7 +183,7 @@ import 'material-icons'; } function initializeTree(page, currentUser, openItems, selectedId) { - require(['jstree'], function () { + import('jstree').then(() => { initializeTreeInternal(page, currentUser, openItems, selectedId); }); } @@ -303,7 +303,7 @@ import 'material-icons'; $(document).on('itemsaved', '.metadataEditorPage', function (e, item) { updateEditorNode(this, item); }).on('pagebeforeshow', '.metadataEditorPage', function () { - require(['css!assets/css/metadataeditor.css']); + import('css!assets/css/metadataeditor.css'); }).on('pagebeforeshow', '.metadataEditorPage', function () { var page = this; Dashboard.getCurrentUser().then(function (user) { diff --git a/src/scripts/playlists.js b/src/scripts/playlists.js index a1868d3131..4a014e7605 100644 --- a/src/scripts/playlists.js +++ b/src/scripts/playlists.js @@ -1,195 +1,202 @@ -define(['loading', 'listView', 'cardBuilder', 'libraryMenu', 'libraryBrowser', 'apphost', 'imageLoader', 'userSettings', 'emby-itemscontainer'], function (loading, listView, cardBuilder, libraryMenu, libraryBrowser, appHost, imageLoader, userSettings) { - 'use strict'; +import loading from 'loading'; +import listView from 'listView'; +import cardBuilder from 'cardBuilder'; +import libraryMenu from 'libraryMenu'; +import libraryBrowser from 'libraryBrowser'; +import appHost from 'apphost'; +import imageLoader from 'imageLoader'; +import userSettings from 'userSettings'; +import 'emby-itemscontainer'; - return function (view, params) { - function getPageData(context) { - var key = getSavedQueryKey(context); - var pageData = data[key]; +export default function (view, params) { + function getPageData(context) { + const key = getSavedQueryKey(context); + let pageData = data[key]; - if (!pageData) { - pageData = data[key] = { - query: { - SortBy: 'SortName', - SortOrder: 'Ascending', - IncludeItemTypes: 'Playlist', - Recursive: true, - Fields: 'PrimaryImageAspectRatio,SortName,CumulativeRunTimeTicks,CanDelete', - StartIndex: 0 - }, - view: libraryBrowser.getSavedView(key) || 'Poster' - }; + if (!pageData) { + pageData = data[key] = { + query: { + SortBy: 'SortName', + SortOrder: 'Ascending', + IncludeItemTypes: 'Playlist', + Recursive: true, + Fields: 'PrimaryImageAspectRatio,SortName,CumulativeRunTimeTicks,CanDelete', + StartIndex: 0 + }, + view: libraryBrowser.getSavedView(key) || 'Poster' + }; - if (userSettings.libraryPageSize() > 0) { - pageData.query['Limit'] = userSettings.libraryPageSize(); - } - - pageData.query.ParentId = libraryMenu.getTopParentId(); - libraryBrowser.loadSavedQueryValues(key, pageData.query); + if (userSettings.libraryPageSize() > 0) { + pageData.query['Limit'] = userSettings.libraryPageSize(); } - return pageData; + pageData.query.ParentId = libraryMenu.getTopParentId(); + libraryBrowser.loadSavedQueryValues(key, pageData.query); } - function getQuery(context) { - return getPageData(context).query; + return pageData; + } + + function getQuery(context) { + return getPageData(context).query; + } + + function getSavedQueryKey(context) { + if (!context.savedQueryKey) { + context.savedQueryKey = libraryBrowser.getSavedQueryKey(); } - function getSavedQueryKey(context) { - if (!context.savedQueryKey) { - context.savedQueryKey = libraryBrowser.getSavedQueryKey(); - } + return context.savedQueryKey; + } - return context.savedQueryKey; + function showLoadingMessage() { + loading.show(); + } + + function hideLoadingMessage() { + loading.hide(); + } + + function onViewStyleChange() { + const viewStyle = getPageData(view).view; + const itemsContainer = view.querySelector('.itemsContainer'); + + if ('List' == viewStyle) { + itemsContainer.classList.add('vertical-list'); + itemsContainer.classList.remove('vertical-wrap'); + } else { + itemsContainer.classList.remove('vertical-list'); + itemsContainer.classList.add('vertical-wrap'); } - function showLoadingMessage() { - loading.show(); - } + itemsContainer.innerHTML = ''; + } - function hideLoadingMessage() { - loading.hide(); - } + function reloadItems() { + showLoadingMessage(); + const query = getQuery(view); + const promise1 = ApiClient.getItems(Dashboard.getCurrentUserId(), query); + // TODO: promise2 is unused, check if necessary. + const promise2 = Dashboard.getCurrentUser(); + Promise.all([promise1, promise2]).then(function (responses) { + const result = responses[0]; + // TODO: Is the scroll necessary? + window.scrollTo(0, 0); + let html = ''; + const viewStyle = getPageData(view).view; + view.querySelector('.listTopPaging').innerHTML = libraryBrowser.getQueryPagingHtml({ + startIndex: query.StartIndex, + limit: query.Limit, + totalRecordCount: result.TotalRecordCount, + viewButton: false, + showLimit: false, + updatePageSizeSetting: false, + addLayoutButton: true, + layouts: 'List,Poster,PosterCard,Thumb,ThumbCard', + currentLayout: viewStyle + }); - function onViewStyleChange() { - var viewStyle = getPageData(view).view; - var itemsContainer = view.querySelector('.itemsContainer'); - - if ('List' == viewStyle) { - itemsContainer.classList.add('vertical-list'); - itemsContainer.classList.remove('vertical-wrap'); - } else { - itemsContainer.classList.remove('vertical-list'); - itemsContainer.classList.add('vertical-wrap'); - } - - itemsContainer.innerHTML = ''; - } - - function reloadItems() { - showLoadingMessage(); - var query = getQuery(view); - var promise1 = ApiClient.getItems(Dashboard.getCurrentUserId(), query); - // TODO: promise2 is unused, check if necessary. - var promise2 = Dashboard.getCurrentUser(); - Promise.all([promise1, promise2]).then(function (responses) { - var result = responses[0]; - // TODO: Is the scroll necessary? - window.scrollTo(0, 0); - var html = ''; - var viewStyle = getPageData(view).view; - view.querySelector('.listTopPaging').innerHTML = libraryBrowser.getQueryPagingHtml({ - startIndex: query.StartIndex, - limit: query.Limit, - totalRecordCount: result.TotalRecordCount, - viewButton: false, - showLimit: false, - updatePageSizeSetting: false, - addLayoutButton: true, - layouts: 'List,Poster,PosterCard,Thumb,ThumbCard', - currentLayout: viewStyle - }); - - if (result.TotalRecordCount) { - if (viewStyle == 'List') { - html = listView.getListViewHtml({ - items: result.Items, - sortBy: query.SortBy - }); - } else if (viewStyle == 'PosterCard') { - html = cardBuilder.getCardsHtml({ - items: result.Items, - shape: 'square', - coverImage: true, - showTitle: true, - cardLayout: true - }); - } else if (viewStyle == 'Thumb') { - html = cardBuilder.getCardsHtml({ - items: result.Items, - shape: 'backdrop', - showTitle: true, - centerText: true, - preferThumb: true, - overlayPlayButton: true - }); - } else if (viewStyle == 'ThumbCard') { - html = cardBuilder.getCardsHtml({ - items: result.Items, - shape: 'backdrop', - showTitle: true, - preferThumb: true, - cardLayout: true - }); - } else { - html = cardBuilder.getCardsHtml({ - items: result.Items, - shape: 'square', - showTitle: true, - coverImage: true, - centerText: true, - overlayPlayButton: true - }); - } - view.querySelector('.noItemsMessage').classList.add('hide'); + if (result.TotalRecordCount) { + if (viewStyle == 'List') { + html = listView.getListViewHtml({ + items: result.Items, + sortBy: query.SortBy + }); + } else if (viewStyle == 'PosterCard') { + html = cardBuilder.getCardsHtml({ + items: result.Items, + shape: 'square', + coverImage: true, + showTitle: true, + cardLayout: true + }); + } else if (viewStyle == 'Thumb') { + html = cardBuilder.getCardsHtml({ + items: result.Items, + shape: 'backdrop', + showTitle: true, + centerText: true, + preferThumb: true, + overlayPlayButton: true + }); + } else if (viewStyle == 'ThumbCard') { + html = cardBuilder.getCardsHtml({ + items: result.Items, + shape: 'backdrop', + showTitle: true, + preferThumb: true, + cardLayout: true + }); } else { - view.querySelector('.noItemsMessage').classList.remove('hide'); - } - - var elem = view.querySelector('.itemsContainer'); - elem.innerHTML = html; - imageLoader.lazyChildren(elem); - var btnNextPage = view.querySelector('.btnNextPage'); - - if (btnNextPage) { - btnNextPage.addEventListener('click', function () { - if (userSettings.libraryPageSize() > 0) { - query.StartIndex += query.Limit; - } - reloadItems(); + html = cardBuilder.getCardsHtml({ + items: result.Items, + shape: 'square', + showTitle: true, + coverImage: true, + centerText: true, + overlayPlayButton: true }); } + view.querySelector('.noItemsMessage').classList.add('hide'); + } else { + view.querySelector('.noItemsMessage').classList.remove('hide'); + } - var btnPreviousPage = view.querySelector('.btnPreviousPage'); + const elem = view.querySelector('.itemsContainer'); + elem.innerHTML = html; + imageLoader.lazyChildren(elem); + const btnNextPage = view.querySelector('.btnNextPage'); - if (btnPreviousPage) { - btnPreviousPage.addEventListener('click', function () { - if (userSettings.libraryPageSize() > 0) { - query.StartIndex = Math.max(0, query.StartIndex - query.Limit); - } - reloadItems(); - }); - } - - var btnChangeLayout = view.querySelector('.btnChangeLayout'); - - if (btnChangeLayout) { - btnChangeLayout.addEventListener('layoutchange', function (e) { - var layout = e.detail.viewStyle; - getPageData(view).view = layout; - libraryBrowser.saveViewSetting(getSavedQueryKey(view), layout); - onViewStyleChange(); - reloadItems(); - }); - } - - libraryBrowser.saveQueryValues(getSavedQueryKey(view), query); - hideLoadingMessage(); - }); - } - - var data = {}; - view.addEventListener('viewbeforeshow', function () { - reloadItems(); - }); - view.querySelector('.btnNewPlaylist').addEventListener('click', function () { - require(['playlistEditor'], function (playlistEditor) { - var serverId = ApiClient.serverInfo().Id; - new playlistEditor.showEditor({ - items: [], - serverId: serverId + if (btnNextPage) { + btnNextPage.addEventListener('click', function () { + if (userSettings.libraryPageSize() > 0) { + query.StartIndex += query.Limit; + } + reloadItems(); }); + } + + const btnPreviousPage = view.querySelector('.btnPreviousPage'); + + if (btnPreviousPage) { + btnPreviousPage.addEventListener('click', function () { + if (userSettings.libraryPageSize() > 0) { + query.StartIndex = Math.max(0, query.StartIndex - query.Limit); + } + reloadItems(); + }); + } + + const btnChangeLayout = view.querySelector('.btnChangeLayout'); + + if (btnChangeLayout) { + btnChangeLayout.addEventListener('layoutchange', function (e) { + const layout = e.detail.viewStyle; + getPageData(view).view = layout; + libraryBrowser.saveViewSetting(getSavedQueryKey(view), layout); + onViewStyleChange(); + reloadItems(); + }); + } + + libraryBrowser.saveQueryValues(getSavedQueryKey(view), query); + hideLoadingMessage(); + }); + } + + const data = {}; + view.addEventListener('viewbeforeshow', function () { + reloadItems(); + }); + view.querySelector('.btnNewPlaylist').addEventListener('click', function () { + import('playlistEditor').then(({default: playlistEditor}) => { + const serverId = ApiClient.serverInfo().Id; + new playlistEditor.showEditor({ + items: [], + serverId: serverId }); }); - onViewStyleChange(); - }; -}); + }); + onViewStyleChange(); +} +