From 0d9c8e71fed40ce5922bdafbfb74a7ca0a33fc3e Mon Sep 17 00:00:00 2001 From: Luke Pulverenti Date: Sat, 30 Jul 2016 13:43:55 -0400 Subject: [PATCH] convert playlist page --- .../emby-webcomponents/cardbuilder/card.css | 4 + dashboard-ui/playlists.html | 4 +- dashboard-ui/scripts/encodingsettings.js | 6 +- dashboard-ui/scripts/playlists.js | 342 ++++++++++-------- dashboard-ui/scripts/site.js | 3 +- 5 files changed, 196 insertions(+), 163 deletions(-) diff --git a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css index 68175a5f29..558d479676 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css +++ b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css @@ -37,6 +37,10 @@ contain: strict; } +.layout-tv .vertical-wrap .card { + contain: layout style; +} + .card, .card:focus { font-weight: inherit !important; } diff --git a/dashboard-ui/playlists.html b/dashboard-ui/playlists.html index 67772848b2..697a3cf1bd 100644 --- a/dashboard-ui/playlists.html +++ b/dashboard-ui/playlists.html @@ -1,4 +1,4 @@ -
+
@@ -7,7 +7,7 @@  
-
+

${MessageNoPlaylistsAvailable}

diff --git a/dashboard-ui/scripts/encodingsettings.js b/dashboard-ui/scripts/encodingsettings.js index 74a93e7167..646ac18b13 100644 --- a/dashboard-ui/scripts/encodingsettings.js +++ b/dashboard-ui/scripts/encodingsettings.js @@ -34,8 +34,8 @@ function updateEncoder(form) { - return ApiClient.getSystemInfo().then(function(systemInfo) { - + return ApiClient.getSystemInfo().then(function (systemInfo) { + if (systemInfo.EncoderLocationType == "External") { return; } @@ -118,8 +118,10 @@ if (this.value == 'Custom') { page.querySelector('.fldEncoderPath').classList.remove('hide'); + page.querySelector('.txtEncoderPath').setAttribute('required', 'required'); } else { page.querySelector('.fldEncoderPath').classList.add('hide'); + page.querySelector('.txtEncoderPath').removeAttribute('required'); } } diff --git a/dashboard-ui/scripts/playlists.js b/dashboard-ui/scripts/playlists.js index 555b01ff81..89b277bc6f 100644 --- a/dashboard-ui/scripts/playlists.js +++ b/dashboard-ui/scripts/playlists.js @@ -1,184 +1,210 @@ -define(['listView'], function (listView) { +define(['listView', 'cardBuilder', 'libraryBrowser', 'emby-itemscontainer'], function (listView, cardBuilder, libraryBrowser) { - var data = {}; - function getPageData() { - var key = getSavedQueryKey(); - var pageData = data[key]; + return function (view, params) { - if (!pageData) { - pageData = data[key] = { - query: { - SortBy: "SortName", - SortOrder: "Ascending", - IncludeItemTypes: "Playlist", - Recursive: true, - Fields: "PrimaryImageAspectRatio,SortName,CumulativeRunTimeTicks,CanDelete,SyncInfo", - StartIndex: 0, - Limit: LibraryBrowser.getDefaultPageSize() - }, - view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('PosterCard', 'PosterCard') - }; + var data = {}; + function getPageData(context) { + var key = getSavedQueryKey(context); + var pageData = data[key]; - pageData.query.ParentId = LibraryMenu.getTopParentId(); - LibraryBrowser.loadSavedQueryValues(key, pageData.query); + if (!pageData) { + pageData = data[key] = { + query: { + SortBy: "SortName", + SortOrder: "Ascending", + IncludeItemTypes: "Playlist", + Recursive: true, + Fields: "PrimaryImageAspectRatio,SortName,CumulativeRunTimeTicks,CanDelete,SyncInfo", + StartIndex: 0, + Limit: LibraryBrowser.getDefaultPageSize() + }, + view: LibraryBrowser.getSavedView(key) || LibraryBrowser.getDefaultItemsView('PosterCard', 'PosterCard') + }; + + pageData.query.ParentId = LibraryMenu.getTopParentId(); + LibraryBrowser.loadSavedQueryValues(key, pageData.query); + } + return pageData; } - return pageData; - } - function getQuery() { + function getQuery(context) { - return getPageData().query; - } + return getPageData(context).query; + } - function getSavedQueryKey() { + function getSavedQueryKey(context) { - return LibraryBrowser.getSavedQueryKey(); - } + if (!context.savedQueryKey) { + context.savedQueryKey = libraryBrowser.getSavedQueryKey(); + } + return context.savedQueryKey; + } - function showLoadingMessage(page) { + function showLoadingMessage() { - Dashboard.showLoadingMsg(); - } + Dashboard.showLoadingMsg(); + } - function hideLoadingMessage(page) { - Dashboard.hideLoadingMsg(); - } + function hideLoadingMessage() { + Dashboard.hideLoadingMsg(); + } - function reloadItems(page) { + function onViewStyleChange() { - showLoadingMessage(page); + var viewStyle = getPageData(view).view; - var query = getQuery(); - var promise1 = ApiClient.getItems(Dashboard.getCurrentUserId(), query); - var promise2 = Dashboard.getCurrentUser(); + var itemsContainer = view.querySelector('.itemsContainer'); - Promise.all([promise1, promise2]).then(function (responses) { + if (viewStyle == "List") { - var result = responses[0]; - var user = responses[1]; + itemsContainer.classList.add('vertical-list'); + itemsContainer.classList.remove('vertical-wrap'); + } + else { - // Scroll back up so they can see the results from the beginning - window.scrollTo(0, 0); + itemsContainer.classList.remove('vertical-list'); + itemsContainer.classList.add('vertical-wrap'); + } + itemsContainer.innerHTML = ''; + } - var html = ''; - var view = getPageData().view; + function reloadItems() { - page.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: view + showLoadingMessage(); + var query = getQuery(view); + var promise1 = ApiClient.getItems(Dashboard.getCurrentUserId(), query); + var promise2 = Dashboard.getCurrentUser(); + + Promise.all([promise1, promise2]).then(function (responses) { + + var result = responses[0]; + var user = responses[1]; + + // Scroll back up so they can see the results from the beginning + 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", + showTitle: true, + lazy: true, + coverImage: true, + showItemCounts: true, + cardLayout: true + }); + } + else if (viewStyle == "Thumb") { + html = cardBuilder.getCardsHtml({ + items: result.Items, + shape: "backdrop", + showTitle: true, + centerText: true, + lazy: true, + preferThumb: true, + overlayPlayButton: true + }); + } + else if (viewStyle == "ThumbCard") { + html = cardBuilder.getCardsHtml({ + items: result.Items, + shape: "backdrop", + showTitle: true, + lazy: true, + preferThumb: true, + cardLayout: true, + showItemCounts: true + }); + } + else { + // Poster + html = cardBuilder.getCardsHtml({ + items: result.Items, + shape: "square", + showTitle: true, + lazy: true, + coverImage: true, + showItemCounts: true, + centerText: true, + overlayPlayButton: true + }); + } + + view.querySelector('.noItemsMessage').classList.add('hide'); + + } 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 () { + query.StartIndex += query.Limit; + reloadItems(); + }); + } + + var btnPreviousPage = view.querySelector('.btnPreviousPage'); + if (btnPreviousPage) { + btnPreviousPage.addEventListener('click', function () { + 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(); }); + } - if (result.TotalRecordCount) { - - if (view == "List") { - - html = listView.getListViewHtml({ - items: result.Items, - sortBy: query.SortBy - }); - } - else if (view == "PosterCard") { - html = LibraryBrowser.getPosterViewHtml({ - items: result.Items, - shape: "square", - showTitle: true, - lazy: true, - coverImage: true, - showItemCounts: true, - cardLayout: true - }); - } - else if (view == "Thumb") { - html = LibraryBrowser.getPosterViewHtml({ - items: result.Items, - shape: "backdrop", - showTitle: true, - centerText: true, - lazy: true, - preferThumb: true, - overlayPlayButton: true - }); - } - else if (view == "ThumbCard") { - html = LibraryBrowser.getPosterViewHtml({ - items: result.Items, - shape: "backdrop", - showTitle: true, - lazy: true, - preferThumb: true, - cardLayout: true, - showItemCounts: true - }); - } - else { - // Poster - html = LibraryBrowser.getPosterViewHtml({ - items: result.Items, - shape: "square", - showTitle: true, - lazy: true, - coverImage: true, - showItemCounts: true, - centerText: true, - overlayPlayButton: true - }); - } - - page.querySelector('.noItemsMessage').classList.add('hide'); - - } else { - - page.querySelector('.noItemsMessage').classList.remove('hide'); - } - - var elem = page.querySelector('.itemsContainer'); - elem.innerHTML = html; - ImageLoader.lazyChildren(elem); - - var btnNextPage = page.querySelector('.btnNextPage'); - if (btnNextPage) { - btnNextPage.addEventListener('click', function () { - query.StartIndex += query.Limit; - reloadItems(page); - }); - } - - var btnPreviousPage = page.querySelector('.btnPreviousPage'); - if (btnPreviousPage) { - btnPreviousPage.addEventListener('click', function () { - query.StartIndex -= query.Limit; - reloadItems(page); - }); - } - - var btnChangeLayout = page.querySelector('.btnChangeLayout'); - if (btnChangeLayout) { - btnChangeLayout.addEventListener('layoutchange', function (e) { - var layout = e.detail.viewStyle; - getPageData().view = layout; - LibraryBrowser.saveViewSetting(getSavedQueryKey(), layout); - reloadItems(page); - }); - } - - LibraryBrowser.saveQueryValues(getSavedQueryKey(), query); - - hideLoadingMessage(page); + view.addEventListener('viewbeforeshow', function() { + reloadItems(); }); - } - pageIdOn('pagebeforeshow', "playlistsPage", function () { - - var page = this; - reloadItems(page); - }); + onViewStyleChange(); + }; }); \ No newline at end of file diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js index 523551f103..beca211490 100644 --- a/dashboard-ui/scripts/site.js +++ b/dashboard-ui/scripts/site.js @@ -2497,7 +2497,8 @@ var AppInfo = {}; path: '/playlists.html', dependencies: [], autoFocus: false, - transition: 'fade' + transition: 'fade', + controller: 'scripts/playlists' }); defineRoute({