diff --git a/dashboard-ui/connectlogin.html b/dashboard-ui/connectlogin.html
index ae9584fd69..476f81b073 100644
--- a/dashboard-ui/connectlogin.html
+++ b/dashboard-ui/connectlogin.html
@@ -34,12 +34,12 @@
diff --git a/dashboard-ui/css/card.css b/dashboard-ui/css/card.css
index 45bd81a679..893aa2a777 100644
--- a/dashboard-ui/css/card.css
+++ b/dashboard-ui/css/card.css
@@ -49,6 +49,10 @@
margin: 1px;
}
+.largeCardMargin .cardBox {
+ margin: 8px;
+}
+
/*@media all and (max-width: 600px) {
.cardBox {
@@ -229,6 +233,11 @@
height: 100%;
}
+.cardImage canvas {
+ width: 100%;
+ height: 100%;
+}
+
.coveredCardImage {
background-size: cover;
}
diff --git a/dashboard-ui/css/images/empty.png b/dashboard-ui/css/images/empty.png
new file mode 100644
index 0000000000..42e2b375e5
Binary files /dev/null and b/dashboard-ui/css/images/empty.png differ
diff --git a/dashboard-ui/css/librarymenu.css b/dashboard-ui/css/librarymenu.css
index 59291fd075..4e4500511f 100644
--- a/dashboard-ui/css/librarymenu.css
+++ b/dashboard-ui/css/librarymenu.css
@@ -188,7 +188,7 @@
.librarySidebarLinks a {
font-weight: 300 !important;
- padding: .7em 20px .7em 0;
+ padding: .8em 20px .8em 0;
}
.librarySidebarLinks a:hover {
diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css
index 57bd2e4c4d..8ce09d0aa4 100644
--- a/dashboard-ui/css/site.css
+++ b/dashboard-ui/css/site.css
@@ -1120,3 +1120,14 @@ h1 + .accentButton {
.disabledUserBanner {
margin: 0 0 2em;
}
+
+.modalLoading {
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, .3);
+ /* One less than jqm loading spinner, so we can combine them */
+ z-index: 9999998;
+}
diff --git a/dashboard-ui/scripts/connectlogin.js b/dashboard-ui/scripts/connectlogin.js
index 10af0ab7df..8fd06b6d09 100644
--- a/dashboard-ui/scripts/connectlogin.js
+++ b/dashboard-ui/scripts/connectlogin.js
@@ -119,7 +119,16 @@
}
}
- $(document).on('pageshow', "#connectLoginPage", function () {
+ $(document).on('pageinit', "#connectLoginPage", function () {
+
+ var page = this;
+
+ $('.btnSkipConnect', page).on('click', function() {
+
+ Dashboard.navigate('connectlogin.html?mode=manualserver');
+ });
+
+ }).on('pageshow', "#connectLoginPage", function () {
var page = this;
diff --git a/dashboard-ui/scripts/itemdetailpage.js b/dashboard-ui/scripts/itemdetailpage.js
index edf5e8ea70..6230d220ff 100644
--- a/dashboard-ui/scripts/itemdetailpage.js
+++ b/dashboard-ui/scripts/itemdetailpage.js
@@ -1177,6 +1177,8 @@
var chapters = item.Chapters || [];
+ var maxWwidth = LibraryBrowser.getPosterViewSizes().thumbWidth;
+
for (var i = 0, length = chapters.length; i < length; i++) {
if (limit && i >= limit) {
@@ -1198,7 +1200,7 @@
if (chapter.ImageTag) {
imgUrl = ApiClient.getScaledImageUrl(item.Id, {
- maxWidth: 210,
+ maxWidth: maxWwidth,
tag: chapter.ImageTag,
type: "Chapter",
index: i
@@ -1397,6 +1399,8 @@
var html = '';
+ var maxWwidth = LibraryBrowser.getPosterViewSizes().thumbWidth;
+
for (var i = 0, length = items.length; i < length; i++) {
if (limit && i >= limit) {
@@ -1423,7 +1427,7 @@
if (imageTags.Primary) {
imgUrl = ApiClient.getScaledImageUrl(item.Id, {
- maxWidth: 210,
+ maxWidth: maxWwidth,
tag: imageTags.Primary,
type: "primary"
});
diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js
index 4e50e0ad36..74c63e0d2c 100644
--- a/dashboard-ui/scripts/librarybrowser.js
+++ b/dashboard-ui/scripts/librarybrowser.js
@@ -945,6 +945,63 @@
return itemCommands;
},
+ screenWidth: function () {
+
+ var screenWidth = $(window).width();
+
+ if (!AppInfo.isTouchPreferred) {
+ screenWidth = window.screen.availWidth;
+ }
+
+ return screenWidth;
+ },
+
+ getPostersPerRow: function () {
+
+ var screenWidth = LibraryBrowser.screenWidth();
+
+ var div = $('').appendTo(document.body);
+ var square = screenWidth / $('.cardImage', div).innerWidth();
+ div.remove();
+
+ div = $('').appendTo(document.body);
+ var thumb = screenWidth / $('.cardImage', div).innerWidth();
+ div.remove();
+
+ div = $('').appendTo(document.body);
+ var poster = screenWidth / $('.cardImage', div).innerWidth();
+ div.remove();
+
+ return {
+ thumb: thumb,
+ poster: poster,
+ square: square
+ };
+ },
+
+ getPosterViewSizes: function () {
+
+ var imagesPerRow = LibraryBrowser.getPostersPerRow();
+
+ var screenWidth = LibraryBrowser.screenWidth();
+
+ if (AppInfo.hasLowImageBandwidth) {
+ screenWidth *= .95;
+ } else {
+ screenWidth *= 1.25;
+ }
+
+ var thumbWidth = screenWidth / imagesPerRow.thumb;
+ var posterWidth = screenWidth / imagesPerRow.poster;
+ var squareSize = screenWidth / imagesPerRow.square;
+
+ return {
+ thumbWidth: parseInt(thumbWidth),
+ posterWidth: parseInt(posterWidth),
+ squareSize: parseInt(squareSize)
+ };
+ },
+
getPosterViewHtml: function (options) {
var items = options.items;
@@ -978,6 +1035,12 @@
}
}
+ var sizes = LibraryBrowser.getPosterViewSizes();
+
+ var thumbWidth = sizes.thumbWidth;
+ var posterWidth = sizes.posterWidth;
+ var squareSize = sizes.squareSize;
+
for (var i = 0, length = items.length; i < length; i++) {
var item = items[i];
@@ -1044,13 +1107,12 @@
var forceName = false;
- var downloadHeight = 576;
var enableImageEnhancers = options.enableImageEnhancers !== false;
if (options.autoThumb && item.ImageTags && item.ImageTags.Primary && item.PrimaryImageAspectRatio && item.PrimaryImageAspectRatio >= 1.5) {
- height = 400;
- width = primaryImageAspectRatio ? Math.round(height * primaryImageAspectRatio) : null;
+ width = posterWidth;
+ height = primaryImageAspectRatio ? Math.round(posterWidth / primaryImageAspectRatio) : null;
imgUrl = ApiClient.getImageUrl(item.Id, {
type: "Primary",
@@ -1064,7 +1126,7 @@
imgUrl = ApiClient.getScaledImageUrl(item.Id, {
type: "Thumb",
- maxWidth: downloadHeight,
+ maxWidth: thumbWidth,
tag: item.ImageTags.Thumb,
enableImageEnhancers: enableImageEnhancers
});
@@ -1073,7 +1135,7 @@
imgUrl = ApiClient.getScaledImageUrl(item.Id, {
type: "Backdrop",
- maxWidth: downloadHeight,
+ maxWidth: thumbWidth,
tag: item.BackdropImageTags[0],
enableImageEnhancers: enableImageEnhancers
});
@@ -1082,7 +1144,7 @@
imgUrl = ApiClient.getScaledImageUrl(item.Id, {
type: "Thumb",
- maxWidth: downloadHeight,
+ maxWidth: thumbWidth,
tag: item.ImageTags.Thumb,
enableImageEnhancers: enableImageEnhancers
});
@@ -1100,7 +1162,7 @@
imgUrl = ApiClient.getScaledImageUrl(item.SeriesId, {
type: "Thumb",
- maxWidth: downloadHeight,
+ maxWidth: thumbWidth,
tag: item.SeriesThumbImageTag,
enableImageEnhancers: enableImageEnhancers
});
@@ -1109,7 +1171,7 @@
imgUrl = ApiClient.getThumbImageUrl(item.ParentThumbItemId, {
type: "Thumb",
- maxWidth: downloadHeight,
+ maxWidth: thumbWidth,
enableImageEnhancers: enableImageEnhancers
});
@@ -1117,7 +1179,7 @@
imgUrl = ApiClient.getScaledImageUrl(item.Id, {
type: "Backdrop",
- maxWidth: downloadHeight,
+ maxWidth: thumbWidth,
tag: item.BackdropImageTags[0],
enableImageEnhancers: enableImageEnhancers
});
@@ -1126,8 +1188,8 @@
} else if (item.ImageTags && item.ImageTags.Primary) {
- height = 400;
- width = primaryImageAspectRatio ? Math.round(height * primaryImageAspectRatio) : null;
+ width = posterWidth;
+ height = primaryImageAspectRatio ? Math.round(posterWidth / primaryImageAspectRatio) : null;
imgUrl = ApiClient.getImageUrl(item.Id, {
type: "Primary",
@@ -1140,18 +1202,16 @@
}
else if (item.ParentPrimaryImageTag) {
- height = 400;
-
imgUrl = ApiClient.getImageUrl(item.ParentPrimaryImageItemId, {
type: "Primary",
- height: height,
+ width: posterWidth,
tag: item.ParentPrimaryImageTag,
enableImageEnhancers: enableImageEnhancers
});
}
else if (item.AlbumId && item.AlbumPrimaryImageTag) {
- height = 220;
+ height = squareSize;
width = primaryImageAspectRatio ? Math.round(height * primaryImageAspectRatio) : null;
imgUrl = ApiClient.getScaledImageUrl(item.AlbumId, {
@@ -1167,7 +1227,7 @@
imgUrl = ApiClient.getScaledImageUrl(item.Id, {
type: "Thumb",
- maxWidth: downloadHeight,
+ maxWidth: thumbWidth,
tag: item.ImageTags.Thumb,
enableImageEnhancers: enableImageEnhancers
});
@@ -1177,7 +1237,7 @@
imgUrl = ApiClient.getScaledImageUrl(item.Id, {
type: "Backdrop",
- maxWidth: downloadHeight,
+ maxWidth: thumbWidth,
tag: item.BackdropImageTags[0],
enableImageEnhancers: enableImageEnhancers
});
@@ -1186,7 +1246,7 @@
imgUrl = ApiClient.getScaledImageUrl(item.Id, {
type: "Thumb",
- maxWidth: downloadHeight,
+ maxWidth: thumbWidth,
tag: item.ImageTags.Thumb,
enableImageEnhancers: enableImageEnhancers
});
@@ -1195,7 +1255,7 @@
imgUrl = ApiClient.getScaledImageUrl(item.SeriesId, {
type: "Thumb",
- maxWidth: downloadHeight,
+ maxWidth: thumbWidth,
tag: item.SeriesThumbImageTag,
enableImageEnhancers: enableImageEnhancers
});
@@ -1204,7 +1264,7 @@
imgUrl = ApiClient.getThumbImageUrl(item, {
type: "Thumb",
- maxWidth: downloadHeight,
+ maxWidth: thumbWidth,
enableImageEnhancers: enableImageEnhancers
});
diff --git a/dashboard-ui/scripts/librarylist.js b/dashboard-ui/scripts/librarylist.js
index 2d624ba15c..e2a80d07f6 100644
--- a/dashboard-ui/scripts/librarylist.js
+++ b/dashboard-ui/scripts/librarylist.js
@@ -912,6 +912,17 @@
return false;
}
+ function resetCardImage() {
+
+ this.style.backgroundImage = "url('css/images/empty.png')";
+ }
+
+ function resetImages(page) {
+
+ //$('cardImage', page).remove();
+ $('.cardImage', page).each(resetCardImage);
+ }
+
$(document).on('pageinit', ".libraryPage", function () {
var page = this;
@@ -964,6 +975,11 @@
hideSelections(page);
$('.viewTabButton:first', page).trigger('click');
+
+ }).on('pagebeforehide', ".libraryPage", function () {
+
+ var page = this;
+ resetImages(page);
});
function renderUserDataChanges(card, userData) {
diff --git a/dashboard-ui/scripts/librarymenu.js b/dashboard-ui/scripts/librarymenu.js
index 7f24f0fda9..f2724e50bd 100644
--- a/dashboard-ui/scripts/librarymenu.js
+++ b/dashboard-ui/scripts/librarymenu.js
@@ -1,10 +1,10 @@
-(function (window, document, $) {
+(function (window, document, $, devicePixelRatio) {
function renderHeader(user) {
var html = '