fixes #551 - Add manual image selection for movies

ApiClient.js

@@ -306,20 +306,51 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout, wi
             });
         };
         
+        function getRemoteImagePrefix(options) {
+            
+            var urlPrefix;
+
+            if (options.artist) {
+                urlPrefix = "Artists/" + encodeName(options.artist);
+                delete options.artist;
+            }
+            else if (options.person) {
+                urlPrefix = "Persons/" + encodeName(options.person);
+                delete options.person;
+            }
+            else if (options.genre) {
+                urlPrefix = "Genres/" + encodeName(options.genre);
+                delete options.genre;
+            }
+            else if (options.musicGenre) {
+                urlPrefix = "MusicGenres/" + encodeName(options.musicGenre);
+                delete options.musicGenre;
+            }
+            else if (options.gameGenre) {
+                urlPrefix = "GameGenres/" + encodeName(options.gameGenre);
+                delete options.gameGenre;
+            }
+            else if (options.studio) {
+                urlPrefix = "Studios/" + encodeName(options.studio);
+                delete options.studio;
+            }
+            else {
+                urlPrefix = "Items/" + options.itemId;
+                delete options.itemId;
+            }
+
+            return urlPrefix;
+        }
+
         self.getAvailableRemoteImages = function (options) {
 
             if (!options) {
                 throw new Error("null options");
             }
 
-            var urlPrefix = "Items/" + options.itemId;
+            var urlPrefix = getRemoteImagePrefix(options);
 
-            var imageType = options.imageType;
+            var url = self.getUrl(urlPrefix + "/RemoteImages", options);
-            
-            delete options.itemId;
-            delete options.imageType;
-
-            var url = self.getUrl(urlPrefix + "/RemoteImages/" + imageType, options);
 
             return self.ajax({
                 type: "GET",
@@ -328,6 +359,22 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout, wi
             });
         };
 
+        self.downloadRemoteImage = function (options) {
+
+            if (!options) {
+                throw new Error("null options");
+            }
+
+            var urlPrefix = getRemoteImagePrefix(options);
+
+            var url = self.getUrl(urlPrefix + "/RemoteImages/Download", options);
+
+            return self.ajax({
+                type: "POST",
+                url: url
+            });
+        };
+
         /**
          * Gets the current server status
          */

dashboard-ui/css/metadataeditor.css

@@ -29,7 +29,7 @@
 .availableImagesList {
     overflow-y: auto;
     width: 300px;
-    height: 500px;
+    height: 400px;
     text-align: center;
 }
 
@@ -49,6 +49,7 @@
     background-position: center bottom;
     background-repeat: no-repeat;
     background-size: contain;
+    display: block;
 }
 
 .remotePosterImage {
@@ -61,6 +62,16 @@
     height: 153px;
 }
 
+.remoteBannerImage {
+    width: 272px;
+    height: 50px;
+}
+
+.remoteDiscImage {
+    width: 180px;
+    height: 180px;
+}
+
 @media all and (min-width: 500px) {
 
     .availableImagesList {
@@ -72,6 +83,7 @@
 
     .availableImagesList {
         width: 500px;
+        height: 450px;
     }
 
     .editPageSidebar {
@@ -89,6 +101,11 @@
         float: right;
         width: 70%;
     }
+
+    .remoteBannerImage {
+        width: 450px;
+        height: 83px;
+    }
 }
 
 
@@ -155,34 +172,6 @@
     }
 }
 
-@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 {
@@ -196,4 +185,3 @@
         height: 700px;
     }
 }
-

dashboard-ui/edititemimages.html

@@ -23,7 +23,7 @@
                 </div>
 
                 <div style="margin: -25px 0 1em;">
-                    <a id="lnkBrowseImages" href="#popupDownload" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="plus" data-mini="true" data-transition="pop">Browse Images</a>
+                    <a id="lnkBrowseImages" href="#popupDownload" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="plus" data-mini="true" data-transition="pop">Browse Online Images</a>
                     <a href="#popupUpload" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="plus" data-mini="true" data-transition="pop">Upload Image</a>
                 </div>
 
@@ -93,12 +93,20 @@
 
             <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
             <div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
-                <h3 style="margin: .5em 0;">Browse Images</h3>
+                <h3 style="margin: .5em 0;">Browse Online Images</h3>
             </div>
 
             <div data-role="content" class="ui-content" style="padding: 5px 15px;">
 
                 <div style="text-align: center;">
+                    <div style="margin: 0; display: inline-block;">
+                        <label for="selectImageProvider">Provider:</label>
+                    </div>
+                    <div style="margin: 0; display: inline-block;">
+                        <select id="selectImageProvider" name="selectImageProvider" data-mini="true" data-inline="true">
+                            <option value="">All</option>
+                        </select>
+                    </div>
                     <div style="margin: 0; display: inline-block;">
                         <label for="selectBrowsableImageType">Image type:</label>
                     </div>

dashboard-ui/scripts/edititemimages.js

@@ -15,18 +15,66 @@
         $('#btnEditMetadata', page).attr('href', 'edititemmetadata.html?' + query);
     }
 
+    function getBaseRemoteOptions() {
+        var options = {};
+
+        if (currentItem.Type == "Artist") {
+            options.artist = currentItem.Name;
+        }
+        else if (currentItem.Type == "Artist") {
+            options.artist = currentItem.Name;
+        }
+        else if (currentItem.Type == "Person") {
+            options.person = currentItem.Name;
+        }
+        else if (currentItem.Type == "Genre") {
+            options.genre = currentItem.Name;
+        }
+        else if (currentItem.Type == "GameGenre") {
+            options.gameGenre = currentItem.Name;
+        }
+        else if (currentItem.Type == "MusicGenre") {
+            options.musicGenre = currentItem.Name;
+        }
+        else if (currentItem.Type == "Studio") {
+            options.studio = currentItem.Name;
+        }
+        else {
+            options.itemId = currentItem.Id;
+        }
+
+        return options;
+    }
+
     function reloadBrowsableImages(page) {
 
-        var options = {
+        Dashboard.showLoadingMsg();
-            itemId: currentItem.Id,
+
-            imageType: browsableImageType,
+        var options = getBaseRemoteOptions();
-            startIndex: browsableImageStartIndex,
+
-            limit: browsableImagePageSize
+        options.type = browsableImageType;
-        };
+        options.startIndex = browsableImageStartIndex;
+        options.limit = browsableImagePageSize;
+
+        var provider = $('#selectImageProvider', page).val();
+
+        if (provider) {
+            options.ProviderName = provider;
+        }
 
         ApiClient.getAvailableRemoteImages(options).done(function (result) {
 
             renderRemoteImages(page, currentItem, result, browsableImageType, options.startIndex, options.limit);
+
+            $('#selectBrowsableImageType', page).val(browsableImageType).selectmenu('refresh');
+
+            var providersHtml = result.Providers.map(function (p) {
+                return '<option value="' + p + '">' + p + '</option>';
+            });
+
+            $('#selectImageProvider', page).html('<option value="">All</option>' + providersHtml).val(provider).selectmenu('refresh');
+
+            Dashboard.hideLoadingMsg();
         });
 
     }
@@ -59,8 +107,29 @@
             reloadBrowsableImages(page);
         });
 
+        $('.btnDownloadRemoteImage', page).on('click', function () {
+
+            downloadRemoteImage(page, this.getAttribute('data-imageurl'), this.getAttribute('data-imagetype'), this.getAttribute('data-imageprovider'));
+        });
+
     }
 
+    function downloadRemoteImage(page, url, type, provider) {
+
+        var options = getBaseRemoteOptions();
+
+        options.Type = type;
+        options.ImageUrl = url;
+        options.ProviderName = provider;
+
+        Dashboard.showLoadingMsg();
+        
+        ApiClient.downloadRemoteImage(options).done(function () {
+
+            $('#popupDownload', page).popup("close");
+            reload(page);
+        });
+    }
 
     function getRemoteImageHtml(image, imageType) {
 
@@ -70,15 +139,21 @@
 
         var cssClass = "remoteImage";
 
-        if (imageType == "Backdrop") {
+        if (imageType == "Backdrop" || imageType == "Art" || imageType == "Thumb" || imageType == "Logo") {
             cssClass += " remoteBackdropImage";
         }
+        else if (imageType == "Banner") {
+            cssClass += " remoteBannerImage";
+        }
+        else if (imageType == "Disc") {
+            cssClass += " remoteDiscImage";
+        }
         else {
             cssClass += " remotePosterImage";
         }
 
-        html += '<div class="' + cssClass + '" style="background-image:url(\'' + image.Url + '\');">';
+        html += '<a target="_blank" href="' + image.Url + '" class="' + cssClass + '" style="background-image:url(\'' + image.Url + '\');">';
-        html += '</div>';
+        html += '</a>';
 
         html += '<div class="remoteImageDetails">';
         html += image.ProviderName;
@@ -96,18 +171,29 @@
             html += '</div>';
         }
 
-        if (image.CommunityRating) {
+        if (image.CommunityRating != null) {
-            html += '<div class="remoteImageDetails">';
-            html += image.CommunityRating.toFixed(1);
 
-            if (image.VoteCount) {
+            html += '<div class="remoteImageDetails">';
-                html += ' • ' + image.VoteCount + ' votes';
+
+            if (image.RatingType == "Likes") {
+                html += image.CommunityRating + (image.CommunityRating == 1 ? " like" : " likes");
+            } else {
+
+                if (image.CommunityRating) {
+                    html += image.CommunityRating.toFixed(1);
+
+                    if (image.VoteCount) {
+                        html += ' • ' + image.VoteCount + ' votes';
+                    }
+                } else {
+                    html += "Unrated";
+                }
             }
 
             html += '</div>';
         }
 
-        html += '<div><button type="button" data-icon="save" data-mini="true">Download</button></div>';
+        html += '<div><button class="btnDownloadRemoteImage" data-imageprovider="' + image.ProviderName + '" data-imageurl="' + image.Url + '" data-imagetype="' + image.Type + '" type="button" data-icon="save" data-mini="true">Download</button></div>';
 
         html += '</div>';
 
@@ -135,7 +221,7 @@
         var recordsEnd = Math.min(startIndex + limit, totalRecordCount);
 
         // 20 is the minimum page size
-        var showControls = totalRecordCount > 20;
+        var showControls = totalRecordCount > limit;
 
         html += '<div class="listPaging">';
 
@@ -449,6 +535,13 @@
             reloadBrowsableImages(page);
         });
 
+        $('#selectImageProvider', page).on('change', function () {
+
+            browsableImageStartIndex = 0;
+
+            reloadBrowsableImages(page);
+        });
+
     }).on('pageshow', "#editItemImagesPage", function () {
 
         var page = this;

packages.config

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <packages>
-  <package id="MediaBrowser.ApiClient.Javascript" version="3.0.184" targetFramework="net45" />
+  <package id="MediaBrowser.ApiClient.Javascript" version="3.0.187" targetFramework="net45" />
   <package id="ServiceStack.Common" version="3.9.62" targetFramework="net45" />
   <package id="ServiceStack.Text" version="3.9.62" targetFramework="net45" />
 </packages>