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',