mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
a start to the lookup feature
This commit is contained in:
parent
bef8e451e3
commit
db9295a65d
4 changed files with 299 additions and 3 deletions
BIN
dashboard-ui/css/images/items/list/remotesearch.png
Normal file
BIN
dashboard-ui/css/images/items/list/remotesearch.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 4.3 KiB |
|
@ -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) {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -280,7 +280,7 @@
|
|||
$('#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 || ' ';
|
||||
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);
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue