diff --git a/dashboard-ui/css/images/items/list/remotesearch.png b/dashboard-ui/css/images/items/list/remotesearch.png new file mode 100644 index 0000000000..979ba2e8e7 Binary files /dev/null and b/dashboard-ui/css/images/items/list/remotesearch.png differ diff --git a/dashboard-ui/css/metadataeditor.css b/dashboard-ui/css/metadataeditor.css index e481ece130..5d4d8ba792 100644 --- a/dashboard-ui/css/metadataeditor.css +++ b/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) { diff --git a/dashboard-ui/edititemmetadata.html b/dashboard-ui/edititemmetadata.html index 7b26a24ef1..ec88e238ab 100644 --- a/dashboard-ui/edititemmetadata.html +++ b/dashboard-ui/edititemmetadata.html @@ -381,11 +381,52 @@ + +
+ +
+ + + +

Identify Item +

+
+ +
+ +
+ +
+ + +
+
+ + +
+ +
+
+ +

+ +

+
+ +
+ +
+
+
+
diff --git a/dashboard-ui/scripts/edititemmetadata.js b/dashboard-ui/scripts/edititemmetadata.js index 1a95cd236f..652ed67811 100644 --- a/dashboard-ui/scripts/edititemmetadata.js +++ b/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 += '
'; + html += ''; + + var value = providerIds[idInfo.Key] || ''; + + html += ''; + + html += '
'; + } + + $('#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 += '
'; + + if (result.ImageUrl) { + var displayUrl = getSearchImageDisplayUrl(result.ImageUrl, result.SearchProviderName); + + html += ''; + } else { + + html += ''; + } + html += ''; + + html += '
'; + html += result.Name; + html += '
'; + + html += '
'; + html += result.ProductionYear || ' '; + html += '
'; + + html += '
'; + + html += '
'; + } + + $('.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); }