diff --git a/dashboard-ui/movies.html b/dashboard-ui/movies.html index 74e16f50db..9efea097d5 100644 --- a/dashboard-ui/movies.html +++ b/dashboard-ui/movies.html @@ -71,7 +71,7 @@
-
+
diff --git a/dashboard-ui/scripts/moviecollections.js b/dashboard-ui/scripts/moviecollections.js index b1d1a75faa..3754501b4d 100644 --- a/dashboard-ui/scripts/moviecollections.js +++ b/dashboard-ui/scripts/moviecollections.js @@ -1,4 +1,4 @@ -define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, alphaPicker, listView) { +define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder) { return function (view, params, tabContent) { @@ -45,6 +45,25 @@ return context.savedQueryKey; } + function onViewStyleChange() { + + var viewStyle = self.getCurrentViewStyle(); + + var itemsContainer = tabContent.querySelector('.itemsContainer'); + + if (viewStyle == "List") { + + 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(page) { Dashboard.showLoadingMsg(); @@ -74,7 +93,7 @@ if (viewStyle == "Thumb") { - html = libraryBrowser.getPosterViewHtml({ + html = cardBuilder.getCardsHtml({ items: result.Items, shape: "backdrop", preferThumb: true, @@ -85,7 +104,7 @@ } else if (viewStyle == "ThumbCard") { - html = libraryBrowser.getPosterViewHtml({ + html = cardBuilder.getCardsHtml({ items: result.Items, shape: "backdrop", preferThumb: true, @@ -98,7 +117,7 @@ } else if (viewStyle == "Banner") { - html = libraryBrowser.getPosterViewHtml({ + html = cardBuilder.getCardsHtml({ items: result.Items, shape: "banner", preferBanner: true, @@ -116,7 +135,7 @@ } else if (viewStyle == "PosterCard") { - html = libraryBrowser.getPosterViewHtml({ + html = cardBuilder.getCardsHtml({ items: result.Items, shape: "auto", context: 'movies', @@ -130,7 +149,7 @@ else { // Poster - html = libraryBrowser.getPosterViewHtml({ + html = cardBuilder.getCardsHtml({ items: result.Items, shape: "auto", context: 'movies', @@ -246,6 +265,7 @@ getPageData(tabContent).view = viewStyle; libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle); getQuery(tabContent).StartIndex = 0; + onViewStyleChange(); reloadItems(tabContent); }); @@ -269,6 +289,7 @@ }; initPage(tabContent); + onViewStyleChange(); self.renderTab = function () { diff --git a/dashboard-ui/scripts/movies.js b/dashboard-ui/scripts/movies.js index d36ba471b7..2f75eb5bdb 100644 --- a/dashboard-ui/scripts/movies.js +++ b/dashboard-ui/scripts/movies.js @@ -1,4 +1,4 @@ -define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, alphaPicker, listView) { +define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder) { return function (view, params, tabContent) { @@ -46,6 +46,25 @@ return context.savedQueryKey; } + function onViewStyleChange() { + + var viewStyle = self.getCurrentViewStyle(); + + var itemsContainer = tabContent.querySelector('.itemsContainer'); + + if (viewStyle == "List") { + + 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(page) { Dashboard.showLoadingMsg(); @@ -75,7 +94,7 @@ if (viewStyle == "Thumb") { - html = libraryBrowser.getPosterViewHtml({ + html = cardBuilder.getCardsHtml({ items: result.Items, shape: "backdrop", preferThumb: true, @@ -86,7 +105,7 @@ } else if (viewStyle == "ThumbCard") { - html = libraryBrowser.getPosterViewHtml({ + html = cardBuilder.getCardsHtml({ items: result.Items, shape: "backdrop", preferThumb: true, @@ -99,7 +118,7 @@ } else if (viewStyle == "Banner") { - html = libraryBrowser.getPosterViewHtml({ + html = cardBuilder.getCardsHtml({ items: result.Items, shape: "banner", preferBanner: true, @@ -117,7 +136,7 @@ } else if (viewStyle == "PosterCard") { - html = libraryBrowser.getPosterViewHtml({ + html = cardBuilder.getCardsHtml({ items: result.Items, shape: "portrait", context: 'movies', @@ -130,7 +149,7 @@ else { // Poster - html = libraryBrowser.getPosterViewHtml({ + html = cardBuilder.getCardsHtml({ items: result.Items, shape: "portrait", context: 'movies', @@ -296,6 +315,7 @@ getPageData(tabContent).view = viewStyle; libraryBrowser.saveViewSetting(getSavedQueryKey(tabContent), viewStyle); getQuery(tabContent).StartIndex = 0; + onViewStyleChange(); reloadItems(tabContent); }); } @@ -305,6 +325,7 @@ }; initPage(tabContent); + onViewStyleChange(); self.renderTab = function () { diff --git a/dashboard-ui/scripts/movietrailers.js b/dashboard-ui/scripts/movietrailers.js index b8fa2085be..3bd65a7889 100644 --- a/dashboard-ui/scripts/movietrailers.js +++ b/dashboard-ui/scripts/movietrailers.js @@ -1,4 +1,4 @@ -define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, alphaPicker, listView) { +define(['events', 'libraryBrowser', 'imageLoader', 'alphaPicker', 'listView', 'cardBuilder', 'emby-itemscontainer'], function (events, libraryBrowser, imageLoader, alphaPicker, listView, cardBuilder) { return function (view, params, tabContent) { @@ -74,7 +74,7 @@ if (viewStyle == "Thumb") { - html = libraryBrowser.getPosterViewHtml({ + html = cardBuilder.getCardsHtml({ items: result.Items, shape: "backdrop", preferThumb: true, @@ -85,7 +85,7 @@ } else if (viewStyle == "ThumbCard") { - html = libraryBrowser.getPosterViewHtml({ + html = cardBuilder.getCardsHtml({ items: result.Items, shape: "backdrop", preferThumb: true, @@ -98,7 +98,7 @@ } else if (viewStyle == "Banner") { - html = libraryBrowser.getPosterViewHtml({ + html = cardBuilder.getCardsHtml({ items: result.Items, shape: "banner", preferBanner: true, @@ -116,7 +116,7 @@ } else if (viewStyle == "PosterCard") { - html = libraryBrowser.getPosterViewHtml({ + html = cardBuilder.getCardsHtml({ items: result.Items, shape: "portrait", context: 'movies', @@ -129,7 +129,7 @@ else { // Poster - html = libraryBrowser.getPosterViewHtml({ + html = cardBuilder.getCardsHtml({ items: result.Items, shape: "portrait", context: 'movies',