1
0
Fork 0
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:
Luke Pulverenti 2014-03-01 17:34:27 -05:00
parent bef8e451e3
commit db9295a65d
4 changed files with 299 additions and 3 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

View file

@ -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) {

View file

@ -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>

View file

@ -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 || '&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);
}