diff --git a/ApiClient.js b/ApiClient.js index 3606396652..9a75c12be0 100644 --- a/ApiClient.js +++ b/ApiClient.js @@ -306,16 +306,20 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout, wi }); }; - self.getAvailableRemoteImages = function (itemId, imageType) { + self.getAvailableRemoteImages = function (options) { - if (!itemId) { - throw new Error("null itemId"); - } - if (!imageType) { - throw new Error("null imageType"); + if (!options) { + throw new Error("null options"); } - var url = self.getUrl("Items/" + itemId + "/RemoteImages/" + imageType); + var urlPrefix = "Items/" + options.itemId; + + var imageType = options.imageType; + + delete options.itemId; + delete options.imageType; + + var url = self.getUrl(urlPrefix + "/RemoteImages/" + imageType, options); return self.ajax({ type: "GET", diff --git a/dashboard-ui/css/metadataeditor.css b/dashboard-ui/css/metadataeditor.css index 3cf2391178..6ee5b156b4 100644 --- a/dashboard-ui/css/metadataeditor.css +++ b/dashboard-ui/css/metadataeditor.css @@ -26,8 +26,54 @@ top: -2px; } +.availableImagesList { + overflow-y: auto; + width: 300px; + height: 500px; + text-align: center; +} + +.remoteImageContainer { + display: inline-block; + border: 1px solid #ccc; + margin: 5px; + vertical-align: top; +} + +.remoteImageDetails { + background: #eee; + padding: 3px 5px; +} + +.remoteImage { + background-position: center bottom; + background-repeat: no-repeat; + background-size: contain; +} + +.remotePosterImage { + width: 150px; + height: 225px; +} + +.remoteBackdropImage { + width: 272px; + height: 153px; +} + +@media all and (min-width: 500px) { + + .availableImagesList { + width: 400px; + } +} + @media all and (min-width: 600px) { + .availableImagesList { + width: 500px; + } + .editPageSidebar { position: fixed; top: 36px; @@ -44,3 +90,110 @@ width: 70%; } } + + +@media all and (min-width: 700px) { + + .availableImagesList { + width: 600px; + } +} + +@media all and (min-width: 800px) { + + .availableImagesList { + width: 700px; + } +} + +@media all and (min-width: 900px) { + + .availableImagesList { + width: 800px; + } +} + +@media all and (min-width: 1000px) { + + .availableImagesList { + width: 900px; + } +} + +@media all and (min-width: 1100px) { + + .availableImagesList { + width: 1000px; + } +} + +@media all and (min-width: 1200px) { + + .availableImagesList { + width: 1100px; + } +} + +@media all and (min-width: 1300px) { + + .availableImagesList { + width: 1200px; + } +} + +@media all and (min-width: 1400px) { + + .availableImagesList { + width: 1300px; + } +} + +@media all and (min-width: 1500px) { + + .availableImagesList { + width: 1400px; + } +} + +@media all and (min-width: 1600px) { + + .availableImagesList { + width: 1500px; + } +} + +@media all and (min-width: 1700px) { + + .availableImagesList { + width: 1600px; + } +} + +@media all and (min-width: 1800px) { + + .availableImagesList { + width: 1700px; + } +} + +@media all and (min-width: 1900px) { + + .availableImagesList { + width: 1800px; + } +} + +@media all and (min-height: 800px) { + + .availableImagesList { + height: 600px; + } +} + +@media all and (min-height: 900px) { + + .availableImagesList { + height: 700px; + } +} + diff --git a/dashboard-ui/edititemimages.html b/dashboard-ui/edititemimages.html index e824101475..96ca27f262 100644 --- a/dashboard-ui/edititemimages.html +++ b/dashboard-ui/edititemimages.html @@ -23,7 +23,8 @@
- Upload Image + Browse Images + Upload Image
-
+

Add/Update Image

@@ -88,6 +89,44 @@
+ + diff --git a/dashboard-ui/scripts/edititemimages.js b/dashboard-ui/scripts/edititemimages.js index d1015f07f0..016936bf5c 100644 --- a/dashboard-ui/scripts/edititemimages.js +++ b/dashboard-ui/scripts/edititemimages.js @@ -3,6 +3,10 @@ var currentItem; var currentFile; + var browsableImagePageSize = 10; + var browsableImageStartIndex = 0; + var browsableImageType = 'Primary'; + function updateTabs(page, item) { var query = MetadataEditor.getEditQueryString(item); @@ -11,6 +15,152 @@ $('#btnEditMetadata', page).attr('href', 'edititemmetadata.html?' + query); } + function reloadBrowsableImages(page) { + + var options = { + itemId: currentItem.Id, + imageType: browsableImageType, + startIndex: browsableImageStartIndex, + limit: browsableImagePageSize + }; + + ApiClient.getAvailableRemoteImages(options).done(function (result) { + + renderRemoteImages(page, currentItem, result, browsableImageType, options.startIndex, options.limit); + }); + + } + + function renderRemoteImages(page, item, imagesResult, imageType, startIndex, limit) { + + $('.availableImagesPaging', page).html(getPagingHtml(startIndex, limit, imagesResult.TotalRecordCount)).trigger('create'); + + var html = ''; + + for (var i = 0, length = imagesResult.Images.length; i < length; i++) { + + html += getRemoteImageHtml(imagesResult.Images[i], imageType); + } + + $('.availableImagesList', page).html(html).trigger('create'); + + $('.selectPage', page).on('change', function () { + browsableImageStartIndex = (parseInt(this.value) - 1) * browsableImagePageSize; + reloadBrowsableImages(page); + }); + + $('.btnNextPage', page).on('click', function () { + browsableImageStartIndex += browsableImagePageSize; + reloadBrowsableImages(page); + }); + + $('.btnPreviousPage', page).on('click', function () { + browsableImageStartIndex -= browsableImagePageSize; + reloadBrowsableImages(page); + }); + + } + + + function getRemoteImageHtml(image, imageType) { + + var html = ''; + + html += '
'; + + var cssClass = "remoteImage"; + + if (imageType == "Backdrop") { + cssClass += " remoteBackdropImage"; + } + else { + cssClass += " remotePosterImage"; + } + + html += '
'; + html += '
'; + + html += '
'; + html += image.ProviderName; + html += '
'; + + if (image.Width || image.Height) { + + html += '
'; + html += image.Width + 'x' + image.Height; + + if (image.Language) { + + html += ' • ' + image.Language; + } + html += '
'; + } + + if (image.CommunityRating) { + html += '
'; + html += image.CommunityRating.toFixed(1); + + if (image.VoteCount) { + html += ' • ' + image.VoteCount + ' votes'; + } + + html += '
'; + } + + html += '
'; + + html += '
'; + + return html; + } + + function getPagingHtml(startIndex, limit, totalRecordCount) { + + var html = ''; + + var pageCount = Math.ceil(totalRecordCount / limit); + var pageNumber = (startIndex / limit) + 1; + + var dropdownHtml = ''; + + var recordsEnd = Math.min(startIndex + limit, totalRecordCount); + + // 20 is the minimum page size + var showControls = totalRecordCount > 20; + + html += '
'; + + html += ''; + + var startAtDisplay = totalRecordCount ? startIndex + 1 : 0; + html += startAtDisplay + '-' + recordsEnd + ' of ' + totalRecordCount; + + if (showControls) { + html += ', page ' + dropdownHtml + ' of ' + pageCount; + } + + html += ''; + + if (showControls) { + html += ''; + + html += ''; + } + + html += '
'; + + return html; + } + function reload(page) { Dashboard.showLoadingMsg(); @@ -273,7 +423,7 @@ $('.libraryTree', page).on('itemclicked', function (event, data) { if (data.id != currentItem.Id) { - + MetadataEditor.currentItemId = data.id; MetadataEditor.currentItemName = data.itemName; MetadataEditor.currentItemType = data.itemType; @@ -286,6 +436,19 @@ } }); + $('#lnkBrowseImages', page).on('click', function () { + + reloadBrowsableImages(page); + }); + + $('#selectBrowsableImageType', page).on('change', function () { + + browsableImageType = this.value; + browsableImageStartIndex = 0; + + reloadBrowsableImages(page); + }); + }).on('pageshow', "#editItemImagesPage", function () { var page = this; diff --git a/packages.config b/packages.config index 22560b1331..ba7498605a 100644 --- a/packages.config +++ b/packages.config @@ -1,6 +1,6 @@  - + \ No newline at end of file