mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
3739741786
* enable one-var rule * enable indent rule * enable no-multiple-empty-lines rule * enable no-empty rule * enable no-trailing-spaces rule * enable no-extra-semi rule * add eslint rules to fix block spacing * enable max-statements-per-line rule * enable brace-style rule * fix some spacing issues and add future rules * add code suggestions
525 lines
16 KiB
JavaScript
525 lines
16 KiB
JavaScript
define(["dialogHelper", "loading", "connectionManager", "require", "globalize", "scrollHelper", "layoutManager", "focusManager", "browser", "emby-input", "emby-checkbox", "paper-icon-button-light", "css!./../formdialog", "material-icons", "cardStyle"], function (dialogHelper, loading, connectionManager, require, globalize, scrollHelper, layoutManager, focusManager, browser) {
|
|
"use strict";
|
|
|
|
var enableFocusTransform = !browser.slow && !browser.edge;
|
|
|
|
var currentItem;
|
|
var currentItemType;
|
|
var currentServerId;
|
|
var currentResolve;
|
|
var currentReject;
|
|
var hasChanges = false;
|
|
var currentSearchResult;
|
|
|
|
function getApiClient() {
|
|
return connectionManager.getApiClient(currentServerId);
|
|
}
|
|
|
|
function searchForIdentificationResults(page) {
|
|
|
|
var lookupInfo = {
|
|
ProviderIds: {}
|
|
};
|
|
|
|
var i;
|
|
var length;
|
|
var identifyField = page.querySelectorAll(".identifyField");
|
|
var value;
|
|
for (i = 0, length = identifyField.length; i < length; i++) {
|
|
|
|
value = identifyField[i].value;
|
|
|
|
if (value) {
|
|
|
|
if (identifyField[i].type === "number") {
|
|
value = parseInt(value);
|
|
}
|
|
|
|
lookupInfo[identifyField[i].getAttribute("data-lookup")] = value;
|
|
}
|
|
}
|
|
|
|
var hasId = false;
|
|
|
|
var txtLookupId = page.querySelectorAll(".txtLookupId");
|
|
for (i = 0, length = txtLookupId.length; i < length; i++) {
|
|
|
|
value = txtLookupId[i].value;
|
|
|
|
if (value) {
|
|
hasId = true;
|
|
}
|
|
lookupInfo.ProviderIds[txtLookupId[i].getAttribute("data-providerkey")] = value;
|
|
}
|
|
|
|
if (!hasId && !lookupInfo.Name) {
|
|
require(["toast"], function (toast) {
|
|
toast(globalize.translate("PleaseEnterNameOrId"));
|
|
});
|
|
return;
|
|
}
|
|
|
|
lookupInfo = {
|
|
SearchInfo: lookupInfo
|
|
};
|
|
|
|
if (currentItem && currentItem.Id) {
|
|
lookupInfo.ItemId = currentItem.Id;
|
|
} else {
|
|
lookupInfo.IncludeDisabledProviders = true;
|
|
}
|
|
|
|
loading.show();
|
|
|
|
var apiClient = getApiClient();
|
|
|
|
apiClient.ajax({
|
|
type: "POST",
|
|
url: apiClient.getUrl("Items/RemoteSearch/" + currentItemType),
|
|
data: JSON.stringify(lookupInfo),
|
|
contentType: "application/json",
|
|
dataType: "json"
|
|
|
|
}).then(function (results) {
|
|
|
|
loading.hide();
|
|
showIdentificationSearchResults(page, results);
|
|
});
|
|
}
|
|
|
|
function showIdentificationSearchResults(page, results) {
|
|
|
|
var identificationSearchResults = page.querySelector(".identificationSearchResults");
|
|
|
|
page.querySelector(".popupIdentifyForm").classList.add("hide");
|
|
identificationSearchResults.classList.remove("hide");
|
|
page.querySelector(".identifyOptionsForm").classList.add("hide");
|
|
page.querySelector(".dialogContentInner").classList.remove("dialog-content-centered");
|
|
|
|
var html = "";
|
|
var i;
|
|
var length;
|
|
for (i = 0, length = results.length; i < length; i++) {
|
|
|
|
var result = results[i];
|
|
html += getSearchResultHtml(result, i);
|
|
}
|
|
|
|
var elem = page.querySelector(".identificationSearchResultList");
|
|
elem.innerHTML = html;
|
|
|
|
function onSearchImageClick() {
|
|
var index = parseInt(this.getAttribute("data-index"));
|
|
|
|
var currentResult = results[index];
|
|
|
|
if (currentItem != null) {
|
|
|
|
showIdentifyOptions(page, currentResult);
|
|
} else {
|
|
|
|
finishFindNewDialog(page, currentResult);
|
|
}
|
|
}
|
|
|
|
var searchImages = elem.querySelectorAll(".card");
|
|
for (i = 0, length = searchImages.length; i < length; i++) {
|
|
|
|
searchImages[i].addEventListener("click", onSearchImageClick);
|
|
}
|
|
|
|
if (layoutManager.tv) {
|
|
focusManager.autoFocus(identificationSearchResults);
|
|
}
|
|
}
|
|
|
|
function finishFindNewDialog(dlg, identifyResult) {
|
|
currentSearchResult = identifyResult;
|
|
hasChanges = true;
|
|
loading.hide();
|
|
|
|
dialogHelper.close(dlg);
|
|
}
|
|
|
|
function showIdentifyOptions(page, identifyResult) {
|
|
|
|
var identifyOptionsForm = page.querySelector(".identifyOptionsForm");
|
|
|
|
page.querySelector(".popupIdentifyForm").classList.add("hide");
|
|
page.querySelector(".identificationSearchResults").classList.add("hide");
|
|
identifyOptionsForm.classList.remove("hide");
|
|
page.querySelector("#chkIdentifyReplaceImages").checked = true;
|
|
page.querySelector(".dialogContentInner").classList.add("dialog-content-centered");
|
|
|
|
currentSearchResult = identifyResult;
|
|
|
|
var lines = [];
|
|
lines.push(identifyResult.Name);
|
|
|
|
if (identifyResult.ProductionYear) {
|
|
lines.push(identifyResult.ProductionYear);
|
|
}
|
|
|
|
var resultHtml = lines.join("<br/>");
|
|
|
|
if (identifyResult.ImageUrl) {
|
|
var displayUrl = getSearchImageDisplayUrl(identifyResult.ImageUrl, identifyResult.SearchProviderName);
|
|
|
|
resultHtml = '<div style="display:flex;align-items:center;"><img src="' + displayUrl + '" style="max-height:240px;" /><div style="margin-left:1em;">' + resultHtml + "</div>";
|
|
}
|
|
|
|
page.querySelector(".selectedSearchResult").innerHTML = resultHtml;
|
|
|
|
focusManager.focus(identifyOptionsForm.querySelector(".btnSubmit"));
|
|
}
|
|
|
|
function getSearchResultHtml(result, index) {
|
|
|
|
// TODO move card creation code to Card component
|
|
|
|
var html = "";
|
|
var cssClass = "card scalableCard";
|
|
var cardBoxCssClass = "cardBox";
|
|
var padderClass;
|
|
|
|
if (currentItemType === "Episode") {
|
|
cssClass += " backdropCard backdropCard-scalable";
|
|
padderClass = "cardPadder-backdrop";
|
|
} else if (currentItemType === "MusicAlbum" || currentItemType === "MusicArtist") {
|
|
cssClass += " squareCard squareCard-scalable";
|
|
padderClass = "cardPadder-square";
|
|
} else {
|
|
cssClass += " portraitCard portraitCard-scalable";
|
|
padderClass = "cardPadder-portrait";
|
|
}
|
|
|
|
if (layoutManager.tv) {
|
|
cssClass += " show-focus";
|
|
|
|
if (enableFocusTransform) {
|
|
cssClass += " show-animation";
|
|
}
|
|
}
|
|
|
|
cardBoxCssClass += " cardBox-bottompadded";
|
|
|
|
html += '<button type="button" class="' + cssClass + '" data-index="' + index + '">';
|
|
html += '<div class="' + cardBoxCssClass + '">';
|
|
html += '<div class="cardScalable">';
|
|
html += '<div class="' + padderClass + '"></div>';
|
|
|
|
html += '<div class="cardContent searchImage">';
|
|
|
|
if (result.ImageUrl) {
|
|
var displayUrl = getSearchImageDisplayUrl(result.ImageUrl, result.SearchProviderName);
|
|
|
|
html += '<div class="cardImageContainer coveredImage" style="background-image:url(\'' + displayUrl + '\');"></div>';
|
|
} else {
|
|
|
|
html += '<div class="cardImageContainer coveredImage defaultCardBackground defaultCardBackground1"><div class="cardText cardCenteredText">' + result.Name + '</div></div>';
|
|
}
|
|
html += "</div>";
|
|
html += "</div>";
|
|
|
|
var numLines = 2;
|
|
if (currentItemType === "MusicAlbum") {
|
|
numLines++;
|
|
}
|
|
|
|
var lines = [result.Name];
|
|
|
|
if (result.AlbumArtist) {
|
|
lines.push(result.AlbumArtist.Name);
|
|
}
|
|
if (result.ProductionYear) {
|
|
lines.push(result.ProductionYear);
|
|
}
|
|
|
|
for (var i = 0; i < numLines; i++) {
|
|
|
|
if (i === 0) {
|
|
html += '<div class="cardText cardText-first cardTextCentered">';
|
|
} else {
|
|
html += '<div class="cardText cardText-secondary cardTextCentered">';
|
|
}
|
|
html += lines[i] || " ";
|
|
html += "</div>";
|
|
}
|
|
|
|
html += "</div>";
|
|
html += "</button>";
|
|
return html;
|
|
}
|
|
|
|
function getSearchImageDisplayUrl(url, provider) {
|
|
var apiClient = getApiClient();
|
|
|
|
return apiClient.getUrl("Items/RemoteSearch/Image", { imageUrl: url, ProviderName: provider });
|
|
}
|
|
|
|
function submitIdentficationResult(page) {
|
|
|
|
loading.show();
|
|
|
|
var options = {
|
|
ReplaceAllImages: page.querySelector("#chkIdentifyReplaceImages").checked
|
|
};
|
|
|
|
var apiClient = getApiClient();
|
|
|
|
apiClient.ajax({
|
|
type: "POST",
|
|
url: apiClient.getUrl("Items/RemoteSearch/Apply/" + currentItem.Id, options),
|
|
data: JSON.stringify(currentSearchResult),
|
|
contentType: "application/json"
|
|
|
|
}).then(function () {
|
|
|
|
hasChanges = true;
|
|
loading.hide();
|
|
|
|
dialogHelper.close(page);
|
|
|
|
}, function () {
|
|
|
|
loading.hide();
|
|
|
|
dialogHelper.close(page);
|
|
});
|
|
}
|
|
|
|
function showIdentificationForm(page, item) {
|
|
|
|
var apiClient = getApiClient();
|
|
|
|
apiClient.getJSON(apiClient.getUrl("Items/" + item.Id + "/ExternalIdInfos")).then(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 class="inputContainer">';
|
|
|
|
var idLabel = globalize.translate("LabelDynamicExternalId").replace("{0}", idInfo.Name);
|
|
|
|
var value = providerIds[idInfo.Key] || "";
|
|
|
|
html += '<input is="emby-input" class="txtLookupId" data-providerkey="' + idInfo.Key + '" id="' + id + '" label="' + idLabel + '"/>';
|
|
|
|
html += "</div>";
|
|
}
|
|
|
|
page.querySelector("#txtLookupName").value = "";
|
|
|
|
if (item.Type === "Person" || item.Type === "BoxSet") {
|
|
|
|
page.querySelector(".fldLookupYear").classList.add("hide");
|
|
page.querySelector("#txtLookupYear").value = "";
|
|
} else {
|
|
|
|
page.querySelector(".fldLookupYear").classList.remove("hide");
|
|
page.querySelector("#txtLookupYear").value = "";
|
|
}
|
|
|
|
page.querySelector(".identifyProviderIds").innerHTML = html;
|
|
|
|
page.querySelector(".formDialogHeaderTitle").innerHTML = globalize.translate("Identify");
|
|
});
|
|
}
|
|
|
|
function showEditor(itemId) {
|
|
|
|
loading.show();
|
|
|
|
require(["text!./itemidentifier.template.html"], function (template) {
|
|
|
|
var apiClient = getApiClient();
|
|
|
|
apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
|
|
|
|
currentItem = item;
|
|
currentItemType = currentItem.Type;
|
|
|
|
var dialogOptions = {
|
|
size: "fullscreen-border",
|
|
removeOnClose: true,
|
|
scrollY: false
|
|
};
|
|
|
|
if (layoutManager.tv) {
|
|
dialogOptions.size = "fullscreen";
|
|
}
|
|
|
|
var dlg = dialogHelper.createDialog(dialogOptions);
|
|
|
|
dlg.classList.add("formDialog");
|
|
dlg.classList.add("recordingDialog");
|
|
|
|
var html = "";
|
|
html += globalize.translateDocument(template, "core");
|
|
|
|
dlg.innerHTML = html;
|
|
|
|
// Has to be assigned a z-index after the call to .open()
|
|
dlg.addEventListener("close", onDialogClosed);
|
|
|
|
if (layoutManager.tv) {
|
|
scrollHelper.centerFocus.on(dlg.querySelector(".formDialogContent"), false);
|
|
}
|
|
|
|
if (item.Path) {
|
|
dlg.querySelector('.fldPath').classList.remove('hide');
|
|
} else {
|
|
dlg.querySelector('.fldPath').classList.add('hide');
|
|
}
|
|
|
|
dlg.querySelector('.txtPath').innerHTML = item.Path || '';
|
|
|
|
dialogHelper.open(dlg);
|
|
|
|
dlg.querySelector(".popupIdentifyForm").addEventListener("submit", function (e) {
|
|
|
|
e.preventDefault();
|
|
searchForIdentificationResults(dlg);
|
|
return false;
|
|
});
|
|
|
|
dlg.querySelector(".identifyOptionsForm").addEventListener("submit", function (e) {
|
|
|
|
e.preventDefault();
|
|
submitIdentficationResult(dlg);
|
|
return false;
|
|
});
|
|
|
|
dlg.querySelector(".btnCancel").addEventListener("click", function (e) {
|
|
|
|
dialogHelper.close(dlg);
|
|
});
|
|
|
|
dlg.classList.add("identifyDialog");
|
|
|
|
showIdentificationForm(dlg, item);
|
|
loading.hide();
|
|
});
|
|
});
|
|
}
|
|
|
|
function onDialogClosed() {
|
|
|
|
loading.hide();
|
|
if (hasChanges) {
|
|
currentResolve();
|
|
} else {
|
|
currentReject();
|
|
}
|
|
}
|
|
|
|
function showEditorFindNew(itemName, itemYear, itemType, resolveFunc) {
|
|
|
|
currentItem = null;
|
|
currentItemType = itemType;
|
|
|
|
require(["text!./itemidentifier.template.html"], function (template) {
|
|
|
|
var dialogOptions = {
|
|
size: "fullscreen-border",
|
|
removeOnClose: true,
|
|
scrollY: false
|
|
};
|
|
|
|
if (layoutManager.tv) {
|
|
dialogOptions.size = "fullscreen";
|
|
}
|
|
|
|
var dlg = dialogHelper.createDialog(dialogOptions);
|
|
|
|
dlg.classList.add("formDialog");
|
|
dlg.classList.add("recordingDialog");
|
|
|
|
var html = "";
|
|
html += globalize.translateDocument(template, "core");
|
|
|
|
dlg.innerHTML = html;
|
|
|
|
if (layoutManager.tv) {
|
|
scrollHelper.centerFocus.on(dlg.querySelector(".formDialogContent"), false);
|
|
}
|
|
|
|
dialogHelper.open(dlg);
|
|
|
|
dlg.querySelector(".btnCancel").addEventListener("click", function (e) {
|
|
|
|
dialogHelper.close(dlg);
|
|
});
|
|
|
|
dlg.querySelector(".popupIdentifyForm").addEventListener("submit", function (e) {
|
|
|
|
e.preventDefault();
|
|
searchForIdentificationResults(dlg);
|
|
return false;
|
|
});
|
|
|
|
dlg.addEventListener("close", function () {
|
|
|
|
loading.hide();
|
|
var foundItem = hasChanges ? currentSearchResult : null;
|
|
|
|
resolveFunc(foundItem);
|
|
});
|
|
|
|
dlg.classList.add("identifyDialog");
|
|
|
|
showIdentificationFormFindNew(dlg, itemName, itemYear, itemType);
|
|
});
|
|
}
|
|
|
|
function showIdentificationFormFindNew(dlg, itemName, itemYear, itemType) {
|
|
|
|
dlg.querySelector("#txtLookupName").value = itemName;
|
|
|
|
if (itemType === "Person" || itemType === "BoxSet") {
|
|
|
|
dlg.querySelector(".fldLookupYear").classList.add("hide");
|
|
dlg.querySelector("#txtLookupYear").value = "";
|
|
|
|
} else {
|
|
|
|
dlg.querySelector(".fldLookupYear").classList.remove("hide");
|
|
dlg.querySelector("#txtLookupYear").value = itemYear;
|
|
}
|
|
|
|
dlg.querySelector(".formDialogHeaderTitle").innerHTML = globalize.translate("Search");
|
|
}
|
|
|
|
return {
|
|
show: function (itemId, serverId) {
|
|
|
|
return new Promise(function (resolve, reject) {
|
|
|
|
currentResolve = resolve;
|
|
currentReject = reject;
|
|
currentServerId = serverId;
|
|
hasChanges = false;
|
|
|
|
showEditor(itemId);
|
|
});
|
|
},
|
|
|
|
showFindNew: function (itemName, itemYear, itemType, serverId) {
|
|
|
|
return new Promise(function (resolve, reject) {
|
|
|
|
currentServerId = serverId;
|
|
|
|
hasChanges = false;
|
|
showEditorFindNew(itemName, itemYear, itemType, resolve);
|
|
});
|
|
}
|
|
};
|
|
});
|