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 = '
'; - if (($.browser.safari && $.browser.mobile && window.navigator.standalone) || Dashboard.isRunningInCordova()) { + if (($.browser.safari && window.navigator.standalone) || Dashboard.isRunningInCordova()) { html += '
'; } @@ -40,9 +40,9 @@ html += ''; } - + if (user.name) { - + html += ''; if (user.imageUrl) { @@ -80,12 +80,12 @@ function bindMenuEvents() { - if ($.browser.mobile) { + if (AppInfo.isTouchPreferred) { - $('.libraryMenuButton').on('mousedown', function () { + $('.libraryMenuButton').on('click', function () { showLibraryMenu(false); }); - $('.dashboardMenuButton').on('mousedown', function () { + $('.dashboardMenuButton').on('click', function () { showDashboardMenu(false); }); @@ -96,10 +96,7 @@ // grab an element var viewMenuBar = document.getElementsByClassName("viewMenuBar")[0]; - // construct an instance of Headroom, passing the element - var headroom = new Headroom(viewMenuBar); - // initialise - headroom.init(); + initHeadRoom(viewMenuBar); } function getItemHref(item, context) { @@ -263,7 +260,7 @@ html += '