a start to the lookup feature

dashboard-ui/css/metadataeditor.css

@@ -84,6 +84,44 @@
     padding-right: 0!important;
 }
 
+
+.searchImage {
+    background-position: center bottom;
+    background-repeat: no-repeat;
+    background-size: contain;
+    display: block;
+}
+
+.searchBackdropImageContainer {
+    width: 160px;
+}
+
+.searchDiscImageContainer {
+    width: 150px;
+}
+
+.searchPosterImageContainer {
+    width: 140px;
+}
+
+.searchBackdropImageContainer .searchImage {
+    height: 90px;
+}
+
+.searchDiscImageContainer .searchImage {
+    height: 150px;
+}
+
+.searchPosterImageContainer .searchImage {
+    height: 210px;
+}
+
+.searchImageContainer .remoteImageDetails {
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 @media all and (min-width: 500px) {
 
     .availableImagesList {
@@ -134,11 +172,22 @@
     padding: 0 0 1em 0;
 }
 
+@media all and (min-width: 600px) {
+
+    .popupIdentify {
+        width: 400px;
+    }
+}
+
 @media all and (min-width: 700px) {
 
     .availableImagesList {
         width: 600px;
     }
+
+    .popupIdentify {
+        width: 500px;
+    }
 }
 
 @media all and (min-width: 800px) {
@@ -163,6 +212,10 @@
         float: right;
         width: 67.5%;
     }
+
+    .popupIdentify {
+        width: 600px;
+    }
 }
 
 @media all and (min-width: 900px) {
@@ -170,6 +223,10 @@
     .availableImagesList {
         width: 800px;
     }
+
+    .popupIdentify {
+        width: 700px;
+    }
 }
 
 @media all and (min-width: 1000px) {
@@ -177,6 +234,10 @@
     .availableImagesList {
         width: 900px;
     }
+
+    .popupIdentify {
+        width: 800px;
+    }
 }
 
 @media all and (min-width: 1100px) {
@@ -184,6 +245,10 @@
     .availableImagesList {
         width: 1000px;
     }
+
+    .popupIdentify {
+        width: 900px;
+    }
 }
 
 @media all and (min-width: 1200px) {
@@ -191,6 +256,10 @@
     .availableImagesList {
         width: 1100px;
     }
+
+    .popupIdentify {
+        width: 1000px;
+    }
 }
 
 @media all and (min-width: 1300px) {

dashboard-ui/edititemmetadata.html

@@ -381,11 +381,52 @@
                 </form>
             </div>
 
+        </div>
+        <div data-role="popup" data-transition="slidefade" class="popupIdentify" class="popup" data-theme="a">
+
+            <div class="ui-bar-a" style="text-align: center; padding: 0 20px; position: relative;">
+
+                <button type="button" data-icon="search" data-mini="true" data-inline="true" data-iconpos="notext" style="position: absolute; top: 8px; left: 10px; margin: 0;" class="btnSearchAgain">Search</button>
+
+                <h3 class="identificationHeader">Identify Item
+                </h3>
+            </div>
+
+            <div data-role="content">
+
+                <form class="popupIdentifyForm" style="max-width: initial;">
+
+                    <div>
+                        <label for="txtLookupName">Name:</label>
+                        <input type="text" id="txtLookupName" data-mini="true" class="identifyField" data-lookup="Name" />
+                    </div>
+                    <div class="fldLookupYear">
+                        <label for="txtLookupYear">Year:</label>
+                        <input type="number" id="txtLookupYear" data-mini="true" class="identifyField" data-lookup="Year" pattern="[0-9]*" min="1800" />
+                    </div>
+
+                    <div class="identifyProviderIds">
+                    </div>
+
+                    <p>
+                        <button type="submit" data-theme="b" data-icon="search" data-mini="true">
+                            Search
+                        </button>
+                    </p>
+                </form>
+
+                <div class="identificationSearchResults">
+
+                    <div class="identificationSearchResultList"></div>
+                </div>
+            </div>
+
         </div>
 
         <script type="text/javascript">
             $('.editItemMetadataForm').off('submit', EditItemMetadataPage.onSubmit).on('submit', EditItemMetadataPage.onSubmit);
             $('.popupConfirmDeleteForm').off('submit', EditItemMetadataPage.onDeleteFormSubmitted).on('submit', EditItemMetadataPage.onDeleteFormSubmitted);
+            $('.popupIdentifyForm').off('submit', EditItemMetadataPage.onIdentificationFormSubmitted).on('submit', EditItemMetadataPage.onIdentificationFormSubmitted);
         </script>
 
     </div>

dashboard-ui/scripts/edititemmetadata.js

@@ -31,7 +31,7 @@
         $.when(promise1, promise2, promise3).done(function (response1, response2, response3) {
 
             var item = response1[0];
-            
+
             currentItem = item;
 
             if (item.Type == "UserRootFolder") {
@@ -279,8 +279,8 @@
             $('#fldDateAdded', page).show();
             $('#fldYear', page).show();
         }
-        
+
-        if (item.Type == "Movie") {
+        if (item.Type == "Movie" || item.Type == "Trailer" || item.Type == "AdultVideo" || item.Type == "Series" || item.Type == "Game" || item.Type == "BoxSet" || item.Type == "Person") {
             $('#btnIdentify', page).show();
         } else {
             $('#btnIdentify', page).hide();
@@ -855,10 +855,183 @@
 
             return false;
         };
+
+        self.onIdentificationFormSubmitted = function () {
+
+            var page = $(this).parents('.page');
+
+            searchForIdentificationResults(page);
+            return false;
+        };
     }
 
     window.EditItemMetadataPage = new editItemMetadataPage();
 
+    function showIdentificationForm(page) {
+
+        var item = currentItem;
+
+        $.getJSON(ApiClient.getUrl("Items/" + item.Id + "/ExternalIdInfos")).done(function (idList) {
+
+            var html = '';
+
+            var providerIds = item.ProviderIds || {};
+
+            for (var i = 0, length = idList.length; i < length; i++) {
+
+                var idInfo = idList[i];
+
+                var id = "txtLookup" + idInfo.Key;
+
+                html += '<div data-role="fieldcontain">';
+                html += '<label for="' + id + '">' + idInfo.Name + ' Id:</label>';
+
+                var value = providerIds[idInfo.Key] || '';
+
+                html += '<input class="txtLookupId" value="' + value + '" data-providerkey="' + idInfo.Key + '" id="' + id + '" data-mini="true" />';
+
+                html += '</div>';
+            }
+
+            $('#txtLookupName', page).val(item.Name);
+            
+            if (item.Type == "Person" || item.Type == "BoxSet") {
+
+                $('.fldLookupYear', page).hide();
+                $('#txtLookupYear', page).val('');
+            } else {
+
+                $('.fldLookupYear', page).show();
+                $('#txtLookupYear', page).val(item.ProductionYear);
+            }
+
+            $('.identifyProviderIds', page).html(html).trigger('create');
+
+            var friendlyName = item.Type == "BoxSet" ? "Collection" : item.Type;
+
+            $('.identificationHeader', page).html('Identify ' + friendlyName);
+
+            $('.popupIdentifyForm', page).show();
+            $('.identificationSearchResults', page).hide();
+            $('.btnSearchAgain', page).hide();
+
+            $('.popupIdentify', page).popup('open');
+        });
+    }
+
+    function searchForIdentificationResults(page) {
+
+        var lookupInfo = {
+            ProviderIds: {}
+        };
+
+        $('.identifyField', page).each(function () {
+
+            var value = this.value;
+
+            if (value) {
+
+                if (this.type == 'number') {
+                    value = parseInt(value);
+                }
+
+                lookupInfo[this.getAttribute('data-lookup')] = value;
+            }
+
+        });
+
+        var hasId = false;
+
+        $('.txtLookupId', page).each(function () {
+
+            var value = this.value;
+
+            if (value) {
+                hasId = true;
+            }
+            lookupInfo.ProviderIds[this.getAttribute('data-providerkey')] = value;
+
+        });
+
+        if (!hasId && !lookupInfo.Name) {
+            Dashboard.alert('Please enter a name or an external Id.');
+            return;
+        }
+
+        lookupInfo = {
+            SearchInfo: lookupInfo,
+            IncludeDisabledProviders: true
+        };
+
+        $.ajax({
+            type: "POST",
+            url: ApiClient.getUrl("Items/RemoteSearch/" + currentItem.Type),
+            data: JSON.stringify(lookupInfo),
+            contentType: "application/json"
+
+        }).done(function (results) {
+
+            showIdentificationSearchResults(page, results);
+        });
+    }
+
+    function getSearchImageDisplayUrl(url, provider) {
+        return ApiClient.getUrl("Items/RemoteSearch/Image", { imageUrl: url, ProviderName: provider });
+    }
+
+    function showIdentificationSearchResults(page, results) {
+
+        $('.popupIdentifyForm', page).hide();
+        $('.identificationSearchResults', page).show();
+        $('.btnSearchAgain', page).show();
+
+        var html = '';
+
+
+        for (var i = 0, length = results.length; i < length; i++) {
+
+            var result = results[i];
+
+            var cssClass = "searchImageContainer remoteImageContainer";
+
+            if (currentItem.Type == "Episode") {
+                cssClass += " searchBackdropImageContainer";
+            }
+            else if (currentItem.Type == "MusicAlbum" || currentItem.Type == "MusicArtist") {
+                cssClass += " searchDiscImageContainer";
+            }
+            else {
+                cssClass += " searchPosterImageContainer";
+            }
+
+            html += '<div class="' + cssClass + '">';
+
+            if (result.ImageUrl) {
+                var displayUrl = getSearchImageDisplayUrl(result.ImageUrl, result.SearchProviderName);
+
+                html += '<a href="#" class="searchImage" style="background-image:url(\'' + displayUrl + '\');">';
+            } else {
+                
+                html += '<a href="#" class="searchImage" style="background-image:url(\'css/images/items/list/remotesearch.png\');background-position: center center;">';
+            }
+            html += '</a>';
+
+            html += '<div class="remoteImageDetails">';
+            html += result.Name;
+            html += '</div>';
+
+            html += '<div class="remoteImageDetails">';
+            html += result.ProductionYear || '&nbsp;';
+            html += '</div>';
+
+            html += '<div><button class="btnSelectSearchResult" type="button" data-icon="check" data-mini="true">Select</button></div>';
+
+            html += '</div>';
+        }
+
+        $('.identificationSearchResultList', page).html(html).trigger('create');
+    }
+
     $(document).on('pageinit', "#editItemMetadataPage", function () {
 
         var page = this;
@@ -904,6 +1077,19 @@
             });
         });
 
+        $('#btnIdentify', page).on('click', function () {
+
+            showIdentificationForm(page);
+        });
+
+        $('.btnSearchAgain', page).on('click', function() {
+            
+            $('.popupIdentifyForm', page).show();
+            $('.identificationSearchResults', page).hide();
+            $('.btnSearchAgain', page).hide();
+
+        });
+
         function getRandomInt(min, max) {
             return Math.floor(Math.random() * (max - min + 1) + min);
         }