mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Migration imageUploader, itemidentifier and itemMediaInfo to es6
This commit is contained in:
grafixeyehero
parent
336c7bc5f9
commit
7296dbc284
4 changed files with 241 additions and 176 deletions
|
|
@ -94,7 +94,10 @@
|
|||
"src/components/autoFocuser.js",
|
||||
"src/components/cardbuilder/cardBuilder.js",
|
||||
"src/components/images/imageLoader.js",
|
||||
"src/components/imageUploader/imageUploader.js",
|
||||
"src/components/indicators/indicators.js",
|
||||
"src/components/itemidentifier/itemidentifier.js",
|
||||
"src/components/itemMediaInfo/itemMediaInfo.js",
|
||||
"src/components/lazyLoader/lazyLoaderIntersectionObserver.js",
|
||||
"src/components/playback/brightnessosd.js",
|
||||
"src/components/playback/mediasession.js",
|
||||
|
|
|
|||
|
|
@ -1,10 +1,26 @@
|
|||
define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', 'layoutManager', 'globalize', 'require', 'emby-button', 'emby-select', 'formDialogStyle', 'css!./style'], function (dialogHelper, connectionManager, dom, loading, scrollHelper, layoutManager, globalize, require) {
|
||||
'use strict';
|
||||
/* eslint-disable indent */
|
||||
|
||||
var currentItemId;
|
||||
var currentServerId;
|
||||
var currentFile;
|
||||
var hasChanges = false;
|
||||
/**
|
||||
* Module for imageUploader.
|
||||
* @module components/imageUploader/imageUploader
|
||||
*/
|
||||
|
||||
import dialogHelper from 'dialogHelper';
|
||||
import connectionManager from 'connectionManager';
|
||||
import dom from 'dom';
|
||||
import loading from 'loading';
|
||||
import scrollHelper from 'scrollHelper';
|
||||
import layoutManager from 'layoutManager';
|
||||
import globalize from 'globalize';
|
||||
import 'emby-button';
|
||||
import 'emby-select';
|
||||
import 'formDialogStyle';
|
||||
import 'css!./style';
|
||||
|
||||
let currentItemId;
|
||||
let currentServerId;
|
||||
let currentFile;
|
||||
let hasChanges = false;
|
||||
|
||||
function onFileReaderError(evt) {
|
||||
|
||||
|
|
@ -12,14 +28,14 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
|
|||
|
||||
switch (evt.target.error.code) {
|
||||
case evt.target.error.NOT_FOUND_ERR:
|
||||
require(['toast'], function (toast) {
|
||||
import('toast').then(({default: toast}) => {
|
||||
toast(globalize.translate('MessageFileReadError'));
|
||||
});
|
||||
break;
|
||||
case evt.target.error.ABORT_ERR:
|
||||
break; // noop
|
||||
default:
|
||||
require(['toast'], function (toast) {
|
||||
import('toast').then(({default: toast}) => {
|
||||
toast(globalize.translate('MessageFileReadError'));
|
||||
});
|
||||
break;
|
||||
|
|
@ -28,7 +44,7 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
|
|||
|
||||
function setFiles(page, files) {
|
||||
|
||||
var file = files[0];
|
||||
const file = files[0];
|
||||
|
||||
if (!file || !file.type.match('image.*')) {
|
||||
page.querySelector('#imageOutput').innerHTML = '';
|
||||
|
|
@ -39,23 +55,23 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
|
|||
|
||||
currentFile = file;
|
||||
|
||||
var reader = new FileReader();
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onerror = onFileReaderError;
|
||||
reader.onloadstart = function () {
|
||||
reader.onloadstart = () => {
|
||||
page.querySelector('#fldUpload').classList.add('hide');
|
||||
};
|
||||
reader.onabort = function () {
|
||||
reader.onabort = () => {
|
||||
loading.hide();
|
||||
console.debug('File read cancelled');
|
||||
};
|
||||
|
||||
// Closure to capture the file information.
|
||||
reader.onload = (function (theFile) {
|
||||
return function (e) {
|
||||
reader.onload = (theFile => {
|
||||
return e => {
|
||||
|
||||
// Render thumbnail.
|
||||
var html = ['<img style="max-width:100%;max-height:100%;" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join('');
|
||||
const html = ['<img style="max-width:100%;max-height:100%;" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join('');
|
||||
|
||||
page.querySelector('#imageOutput').innerHTML = html;
|
||||
page.querySelector('#fldUpload').classList.remove('hide');
|
||||
|
|
@ -68,14 +84,14 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
|
|||
|
||||
function onSubmit(e) {
|
||||
|
||||
var file = currentFile;
|
||||
const file = currentFile;
|
||||
|
||||
if (!file) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!file.type.startsWith('image/')) {
|
||||
require(['toast'], function (toast) {
|
||||
import('toast').then(({default: toast}) => {
|
||||
toast(globalize.translate('MessageImageFileTypeAllowed'));
|
||||
});
|
||||
e.preventDefault();
|
||||
|
|
@ -84,18 +100,18 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
|
|||
|
||||
loading.show();
|
||||
|
||||
var dlg = dom.parentWithClass(this, 'dialog');
|
||||
const dlg = dom.parentWithClass(this, 'dialog');
|
||||
|
||||
var imageType = dlg.querySelector('#selectImageType').value;
|
||||
const imageType = dlg.querySelector('#selectImageType').value;
|
||||
if (imageType === 'None') {
|
||||
require(['toast'], function(toast) {
|
||||
import('toast').then(({default: toast}) => {
|
||||
toast(globalize.translate('MessageImageTypeNotSelected'));
|
||||
});
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
|
||||
connectionManager.getApiClient(currentServerId).uploadItemImage(currentItemId, imageType, file).then(function () {
|
||||
connectionManager.getApiClient(currentServerId).uploadItemImage(currentItemId, imageType, file).then(() => {
|
||||
|
||||
dlg.querySelector('#uploadImage').value = '';
|
||||
|
||||
|
|
@ -116,21 +132,22 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
|
|||
setFiles(page, this.files);
|
||||
});
|
||||
|
||||
page.querySelector('.btnBrowse').addEventListener('click', function () {
|
||||
page.querySelector('.btnBrowse').addEventListener('click', () => {
|
||||
page.querySelector('#uploadImage').click();
|
||||
});
|
||||
}
|
||||
|
||||
function showEditor(options, resolve, reject) {
|
||||
function showEditor(options, resolve) {
|
||||
|
||||
options = options || {};
|
||||
|
||||
require(['text!./imageUploader.template.html'], function (template) {
|
||||
// TODO: remove require
|
||||
require(['text!./components/imageUploader/imageUploader.template.html'], template => {
|
||||
|
||||
currentItemId = options.itemId;
|
||||
currentServerId = options.serverId;
|
||||
|
||||
var dialogOptions = {
|
||||
const dialogOptions = {
|
||||
removeOnClose: true
|
||||
};
|
||||
|
||||
|
|
@ -140,7 +157,7 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
|
|||
dialogOptions.size = 'small';
|
||||
}
|
||||
|
||||
var dlg = dialogHelper.createDialog(dialogOptions);
|
||||
const dlg = dialogHelper.createDialog(dialogOptions);
|
||||
|
||||
dlg.classList.add('formDialog');
|
||||
|
||||
|
|
@ -151,7 +168,7 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
|
|||
}
|
||||
|
||||
// Has to be assigned a z-index after the call to .open()
|
||||
dlg.addEventListener('close', function () {
|
||||
dlg.addEventListener('close', () => {
|
||||
|
||||
if (layoutManager.tv) {
|
||||
scrollHelper.centerFocus.off(dlg, false);
|
||||
|
|
@ -167,22 +184,24 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
|
|||
|
||||
dlg.querySelector('#selectImageType').value = options.imageType || 'Primary';
|
||||
|
||||
dlg.querySelector('.btnCancel').addEventListener('click', function () {
|
||||
dlg.querySelector('.btnCancel').addEventListener('click', () => {
|
||||
|
||||
dialogHelper.close(dlg);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
show: function (options) {
|
||||
export function show(options) {
|
||||
|
||||
return new Promise(function (resolve, reject) {
|
||||
return new Promise((resolve, reject) => {
|
||||
|
||||
hasChanges = false;
|
||||
|
||||
showEditor(options, resolve, reject);
|
||||
});
|
||||
}
|
||||
|
||||
/* eslint-enable indent */
|
||||
export default {
|
||||
show: show
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,44 +1,61 @@
|
|||
define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings', 'connectionManager', 'loading', 'focusManager', 'dom', 'apphost', 'emby-select', 'listViewStyle', 'paper-icon-button-light', 'css!./../formdialog', 'material-icons', 'emby-button', 'flexStyles'], function (dialogHelper, require, layoutManager, globalize, userSettings, connectionManager, loading, focusManager, dom, appHost) {
|
||||
'use strict';
|
||||
/* eslint-disable indent */
|
||||
|
||||
/**
|
||||
* Module for display media info.
|
||||
* @module components/itemMediaInfo/itemMediaInfo
|
||||
*/
|
||||
|
||||
import dialogHelper from 'dialogHelper';
|
||||
import layoutManager from 'layoutManager';
|
||||
import globalize from 'globalize';
|
||||
import connectionManager from 'connectionManager';
|
||||
import loading from 'loading';
|
||||
import 'emby-select';
|
||||
import 'listViewStyle';
|
||||
import 'paper-icon-button-light';
|
||||
import 'css!./../formdialog';
|
||||
import 'material-icons';
|
||||
import 'emby-button';
|
||||
import 'flexStyles';
|
||||
|
||||
function setMediaInfo(user, page, item) {
|
||||
var html = item.MediaSources.map(function (version) {
|
||||
let html = item.MediaSources.map(version => {
|
||||
return getMediaSourceHtml(user, item, version);
|
||||
}).join('<div style="border-top:1px solid #444;margin: 1em 0;"></div>');
|
||||
if (item.MediaSources.length > 1) {
|
||||
html = '<br/>' + html;
|
||||
html = `<br/>${html}`;
|
||||
}
|
||||
var mediaInfoContent = page.querySelector('#mediaInfoContent');
|
||||
const mediaInfoContent = page.querySelector('#mediaInfoContent');
|
||||
mediaInfoContent.innerHTML = html;
|
||||
}
|
||||
|
||||
function getMediaSourceHtml(user, item, version) {
|
||||
var html = '';
|
||||
let html = '';
|
||||
if (version.Name) {
|
||||
html += '<div><h2 class="mediaInfoStreamType">' + version.Name + '</h2></div>';
|
||||
html += `<div><h2 class="mediaInfoStreamType">${version.Name}</h2></div>`;
|
||||
}
|
||||
if (version.Container) {
|
||||
html += createAttribute(globalize.translate('MediaInfoContainer'), version.Container) + '<br/>';
|
||||
html += `${createAttribute(globalize.translate('MediaInfoContainer'), version.Container)}<br/>`;
|
||||
}
|
||||
if (version.Formats && version.Formats.length) {
|
||||
html += createAttribute(globalize.translate('MediaInfoFormat'), version.Formats.join(',')) + '<br/>';
|
||||
html += `${createAttribute(globalize.translate('MediaInfoFormat'), version.Formats.join(','))}<br/>`;
|
||||
}
|
||||
if (version.Path && user && user.Policy.IsAdministrator) {
|
||||
html += createAttribute(globalize.translate('MediaInfoPath'), version.Path) + '<br/>';
|
||||
html += `${createAttribute(globalize.translate('MediaInfoPath'), version.Path)}<br/>`;
|
||||
}
|
||||
if (version.Size) {
|
||||
var size = (version.Size / (1024 * 1024)).toFixed(0) + ' MB';
|
||||
html += createAttribute(globalize.translate('MediaInfoSize'), size) + '<br/>';
|
||||
const size = `${(version.Size / (1024 * 1024)).toFixed(0)} MB`;
|
||||
html += `${createAttribute(globalize.translate('MediaInfoSize'), size)}<br/>`;
|
||||
}
|
||||
for (var i = 0, length = version.MediaStreams.length; i < length; i++) {
|
||||
var stream = version.MediaStreams[i];
|
||||
for (let i = 0, length = version.MediaStreams.length; i < length; i++) {
|
||||
const stream = version.MediaStreams[i];
|
||||
if (stream.Type === 'Data') {
|
||||
continue;
|
||||
}
|
||||
html += '<div class="mediaInfoStream">';
|
||||
var displayType = globalize.translate('MediaInfoStreamType' + stream.Type);
|
||||
html += '<h2 class="mediaInfoStreamType">' + displayType + '</h2>';
|
||||
var attributes = [];
|
||||
const displayType = globalize.translate(`MediaInfoStreamType${stream.Type}`);
|
||||
html += `<h2 class="mediaInfoStreamType">${displayType}</h2>`;
|
||||
const attributes = [];
|
||||
if (stream.DisplayTitle) {
|
||||
attributes.push(createAttribute('Title', stream.DisplayTitle));
|
||||
}
|
||||
|
|
@ -61,7 +78,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
|
|||
attributes.push(createAttribute(globalize.translate('MediaInfoLevel'), stream.Level));
|
||||
}
|
||||
if (stream.Width || stream.Height) {
|
||||
attributes.push(createAttribute(globalize.translate('MediaInfoResolution'), stream.Width + 'x' + stream.Height));
|
||||
attributes.push(createAttribute(globalize.translate('MediaInfoResolution'), `${stream.Width}x${stream.Height}`));
|
||||
}
|
||||
if (stream.AspectRatio && stream.Codec !== 'mjpeg') {
|
||||
attributes.push(createAttribute(globalize.translate('MediaInfoAspectRatio'), stream.AspectRatio));
|
||||
|
|
@ -79,16 +96,16 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
|
|||
attributes.push(createAttribute(globalize.translate('MediaInfoLayout'), stream.ChannelLayout));
|
||||
}
|
||||
if (stream.Channels) {
|
||||
attributes.push(createAttribute(globalize.translate('MediaInfoChannels'), stream.Channels + ' ch'));
|
||||
attributes.push(createAttribute(globalize.translate('MediaInfoChannels'), `${stream.Channels} ch`));
|
||||
}
|
||||
if (stream.BitRate && stream.Codec !== 'mjpeg') {
|
||||
attributes.push(createAttribute(globalize.translate('MediaInfoBitrate'), (parseInt(stream.BitRate / 1000)) + ' kbps'));
|
||||
attributes.push(createAttribute(globalize.translate('MediaInfoBitrate'), `${parseInt(stream.BitRate / 1000)} kbps`));
|
||||
}
|
||||
if (stream.SampleRate) {
|
||||
attributes.push(createAttribute(globalize.translate('MediaInfoSampleRate'), stream.SampleRate + ' Hz'));
|
||||
attributes.push(createAttribute(globalize.translate('MediaInfoSampleRate'), `${stream.SampleRate} Hz`));
|
||||
}
|
||||
if (stream.BitDepth) {
|
||||
attributes.push(createAttribute(globalize.translate('MediaInfoBitDepth'), stream.BitDepth + ' bit'));
|
||||
attributes.push(createAttribute(globalize.translate('MediaInfoBitDepth'), `${stream.BitDepth} bit`));
|
||||
}
|
||||
if (stream.PixelFormat) {
|
||||
attributes.push(createAttribute(globalize.translate('MediaInfoPixelFormat'), stream.PixelFormat));
|
||||
|
|
@ -116,13 +133,13 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
|
|||
}
|
||||
|
||||
function createAttribute(label, value) {
|
||||
return '<span class="mediaInfoLabel">' + label + '</span><span class="mediaInfoAttribute">' + value + '</span>';
|
||||
return `<span class="mediaInfoLabel">${label}</span><span class="mediaInfoAttribute">${value}</span>`;
|
||||
}
|
||||
|
||||
function showMediaInfoMore(itemId, serverId, template) {
|
||||
var apiClient = connectionManager.getApiClient(serverId);
|
||||
return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
|
||||
var dialogOptions = {
|
||||
function loadMediaInfo(itemId, serverId, template) {
|
||||
const apiClient = connectionManager.getApiClient(serverId);
|
||||
return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(item => {
|
||||
const dialogOptions = {
|
||||
size: 'small',
|
||||
removeOnClose: true,
|
||||
scrollY: false
|
||||
|
|
@ -130,35 +147,36 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
|
|||
if (layoutManager.tv) {
|
||||
dialogOptions.size = 'fullscreen';
|
||||
}
|
||||
var dlg = dialogHelper.createDialog(dialogOptions);
|
||||
const dlg = dialogHelper.createDialog(dialogOptions);
|
||||
dlg.classList.add('formDialog');
|
||||
var html = '';
|
||||
let html = '';
|
||||
html += globalize.translateDocument(template, 'core');
|
||||
dlg.innerHTML = html;
|
||||
if (layoutManager.tv) {
|
||||
dlg.querySelector('.formDialogContent');
|
||||
}
|
||||
dialogHelper.open(dlg);
|
||||
dlg.querySelector('.btnCancel').addEventListener('click', function (e) {
|
||||
dlg.querySelector('.btnCancel').addEventListener('click', () => {
|
||||
dialogHelper.close(dlg);
|
||||
});
|
||||
apiClient.getCurrentUser().then(function (user) {
|
||||
apiClient.getCurrentUser().then(user => {
|
||||
setMediaInfo(user, dlg, item);
|
||||
});
|
||||
loading.hide();
|
||||
});
|
||||
}
|
||||
|
||||
function showMediaInfo(itemId, serverId) {
|
||||
export function show(itemId, serverId) {
|
||||
loading.show();
|
||||
return new Promise(function (resolve, reject) {
|
||||
require(['text!./itemMediaInfo.template.html'], function (template) {
|
||||
showMediaInfoMore(itemId, serverId, template).then(resolve, reject);
|
||||
return new Promise((resolve, reject) => {
|
||||
// TODO: remove require
|
||||
require(['text!./components/itemMediaInfo/itemMediaInfo.template.html'], template => {
|
||||
loadMediaInfo(itemId, serverId, template).then(resolve, reject);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
show: showMediaInfo
|
||||
/* eslint-enable indent */
|
||||
export default {
|
||||
show: show
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,15 +1,34 @@
|
|||
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';
|
||||
/* eslint-disable indent */
|
||||
|
||||
var enableFocusTransform = !browser.slow && !browser.edge;
|
||||
/**
|
||||
* Module for itemidentifier media item.
|
||||
* @module components/itemidentifier/itemidentifier
|
||||
*/
|
||||
|
||||
var currentItem;
|
||||
var currentItemType;
|
||||
var currentServerId;
|
||||
var currentResolve;
|
||||
var currentReject;
|
||||
var hasChanges = false;
|
||||
var currentSearchResult;
|
||||
import dialogHelper from 'dialogHelper';
|
||||
import loading from 'loading';
|
||||
import connectionManager from 'connectionManager';
|
||||
import globalize from 'globalize';
|
||||
import scrollHelper from 'scrollHelper';
|
||||
import layoutManager from 'layoutManager';
|
||||
import focusManager from 'focusManager';
|
||||
import browser from 'browser';
|
||||
import 'emby-input';
|
||||
import 'emby-checkbox';
|
||||
import 'paper-icon-button-light';
|
||||
import 'css!./../formdialog';
|
||||
import 'material-icons';
|
||||
import 'cardStyle';
|
||||
|
||||
const enableFocusTransform = !browser.slow && !browser.edge;
|
||||
|
||||
let currentItem;
|
||||
let currentItemType;
|
||||
let currentServerId;
|
||||
let currentResolve;
|
||||
let currentReject;
|
||||
let hasChanges = false;
|
||||
let currentSearchResult;
|
||||
|
||||
function getApiClient() {
|
||||
return connectionManager.getApiClient(currentServerId);
|
||||
|
|
@ -17,14 +36,14 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
|||
|
||||
function searchForIdentificationResults(page) {
|
||||
|
||||
var lookupInfo = {
|
||||
let lookupInfo = {
|
||||
ProviderIds: {}
|
||||
};
|
||||
|
||||
var i;
|
||||
var length;
|
||||
var identifyField = page.querySelectorAll('.identifyField');
|
||||
var value;
|
||||
let i;
|
||||
let length;
|
||||
const identifyField = page.querySelectorAll('.identifyField');
|
||||
let value;
|
||||
for (i = 0, length = identifyField.length; i < length; i++) {
|
||||
|
||||
value = identifyField[i].value;
|
||||
|
|
@ -39,9 +58,9 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
|||
}
|
||||
}
|
||||
|
||||
var hasId = false;
|
||||
let hasId = false;
|
||||
|
||||
var txtLookupId = page.querySelectorAll('.txtLookupId');
|
||||
const txtLookupId = page.querySelectorAll('.txtLookupId');
|
||||
for (i = 0, length = txtLookupId.length; i < length; i++) {
|
||||
|
||||
value = txtLookupId[i].value;
|
||||
|
|
@ -53,7 +72,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
|||
}
|
||||
|
||||
if (!hasId && !lookupInfo.Name) {
|
||||
require(['toast'], function (toast) {
|
||||
import('toast').then(({default: toast}) => {
|
||||
toast(globalize.translate('PleaseEnterNameOrId'));
|
||||
});
|
||||
return;
|
||||
|
|
@ -71,16 +90,16 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
|||
|
||||
loading.show();
|
||||
|
||||
var apiClient = getApiClient();
|
||||
const apiClient = getApiClient();
|
||||
|
||||
apiClient.ajax({
|
||||
type: 'POST',
|
||||
url: apiClient.getUrl('Items/RemoteSearch/' + currentItemType),
|
||||
url: apiClient.getUrl(`Items/RemoteSearch/${currentItemType}`),
|
||||
data: JSON.stringify(lookupInfo),
|
||||
contentType: 'application/json',
|
||||
dataType: 'json'
|
||||
|
||||
}).then(function (results) {
|
||||
}).then(results => {
|
||||
|
||||
loading.hide();
|
||||
showIdentificationSearchResults(page, results);
|
||||
|
|
@ -89,29 +108,29 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
|||
|
||||
function showIdentificationSearchResults(page, results) {
|
||||
|
||||
var identificationSearchResults = page.querySelector('.identificationSearchResults');
|
||||
const 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;
|
||||
let html = '';
|
||||
let i;
|
||||
let length;
|
||||
for (i = 0, length = results.length; i < length; i++) {
|
||||
|
||||
var result = results[i];
|
||||
const result = results[i];
|
||||
html += getSearchResultHtml(result, i);
|
||||
}
|
||||
|
||||
var elem = page.querySelector('.identificationSearchResultList');
|
||||
const elem = page.querySelector('.identificationSearchResultList');
|
||||
elem.innerHTML = html;
|
||||
|
||||
function onSearchImageClick() {
|
||||
var index = parseInt(this.getAttribute('data-index'));
|
||||
const index = parseInt(this.getAttribute('data-index'));
|
||||
|
||||
var currentResult = results[index];
|
||||
const currentResult = results[index];
|
||||
|
||||
if (currentItem != null) {
|
||||
|
||||
|
|
@ -122,7 +141,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
|||
}
|
||||
}
|
||||
|
||||
var searchImages = elem.querySelectorAll('.card');
|
||||
const searchImages = elem.querySelectorAll('.card');
|
||||
for (i = 0, length = searchImages.length; i < length; i++) {
|
||||
|
||||
searchImages[i].addEventListener('click', onSearchImageClick);
|
||||
|
|
@ -143,7 +162,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
|||
|
||||
function showIdentifyOptions(page, identifyResult) {
|
||||
|
||||
var identifyOptionsForm = page.querySelector('.identifyOptionsForm');
|
||||
const identifyOptionsForm = page.querySelector('.identifyOptionsForm');
|
||||
|
||||
page.querySelector('.popupIdentifyForm').classList.add('hide');
|
||||
page.querySelector('.identificationSearchResults').classList.add('hide');
|
||||
|
|
@ -153,19 +172,19 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
|||
|
||||
currentSearchResult = identifyResult;
|
||||
|
||||
var lines = [];
|
||||
const lines = [];
|
||||
lines.push(identifyResult.Name);
|
||||
|
||||
if (identifyResult.ProductionYear) {
|
||||
lines.push(identifyResult.ProductionYear);
|
||||
}
|
||||
|
||||
var resultHtml = lines.join('<br/>');
|
||||
let resultHtml = lines.join('<br/>');
|
||||
|
||||
if (identifyResult.ImageUrl) {
|
||||
var displayUrl = getSearchImageDisplayUrl(identifyResult.ImageUrl, identifyResult.SearchProviderName);
|
||||
const 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>';
|
||||
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;
|
||||
|
|
@ -177,10 +196,10 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
|||
|
||||
// TODO move card creation code to Card component
|
||||
|
||||
var html = '';
|
||||
var cssClass = 'card scalableCard';
|
||||
var cardBoxCssClass = 'cardBox';
|
||||
var padderClass;
|
||||
let html = '';
|
||||
let cssClass = 'card scalableCard';
|
||||
let cardBoxCssClass = 'cardBox';
|
||||
let padderClass;
|
||||
|
||||
if (currentItemType === 'Episode') {
|
||||
cssClass += ' backdropCard backdropCard-scalable';
|
||||
|
|
@ -203,30 +222,30 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
|||
|
||||
cardBoxCssClass += ' cardBox-bottompadded';
|
||||
|
||||
html += '<button type="button" class="' + cssClass + '" data-index="' + index + '">';
|
||||
html += '<div class="' + cardBoxCssClass + '">';
|
||||
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="${padderClass}"></div>`;
|
||||
|
||||
html += '<div class="cardContent searchImage">';
|
||||
|
||||
if (result.ImageUrl) {
|
||||
var displayUrl = getSearchImageDisplayUrl(result.ImageUrl, result.SearchProviderName);
|
||||
const displayUrl = getSearchImageDisplayUrl(result.ImageUrl, result.SearchProviderName);
|
||||
|
||||
html += '<div class="cardImageContainer coveredImage" style="background-image:url(\'' + displayUrl + '\');"></div>';
|
||||
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 class="cardImageContainer coveredImage defaultCardBackground defaultCardBackground1"><div class="cardText cardCenteredText">${result.Name}</div></div>`;
|
||||
}
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
|
||||
var numLines = 2;
|
||||
let numLines = 2;
|
||||
if (currentItemType === 'MusicAlbum') {
|
||||
numLines++;
|
||||
}
|
||||
|
||||
var lines = [result.Name];
|
||||
const lines = [result.Name];
|
||||
|
||||
if (result.AlbumArtist) {
|
||||
lines.push(result.AlbumArtist.Name);
|
||||
|
|
@ -235,7 +254,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
|||
lines.push(result.ProductionYear);
|
||||
}
|
||||
|
||||
for (var i = 0; i < numLines; i++) {
|
||||
for (let i = 0; i < numLines; i++) {
|
||||
|
||||
if (i === 0) {
|
||||
html += '<div class="cardText cardText-first cardTextCentered">';
|
||||
|
|
@ -252,7 +271,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
|||
}
|
||||
|
||||
function getSearchImageDisplayUrl(url, provider) {
|
||||
var apiClient = getApiClient();
|
||||
const apiClient = getApiClient();
|
||||
|
||||
return apiClient.getUrl('Items/RemoteSearch/Image', { imageUrl: url, ProviderName: provider });
|
||||
}
|
||||
|
|
@ -261,26 +280,26 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
|||
|
||||
loading.show();
|
||||
|
||||
var options = {
|
||||
const options = {
|
||||
ReplaceAllImages: page.querySelector('#chkIdentifyReplaceImages').checked
|
||||
};
|
||||
|
||||
var apiClient = getApiClient();
|
||||
const apiClient = getApiClient();
|
||||
|
||||
apiClient.ajax({
|
||||
type: 'POST',
|
||||
url: apiClient.getUrl('Items/RemoteSearch/Apply/' + currentItem.Id, options),
|
||||
url: apiClient.getUrl(`Items/RemoteSearch/Apply/${currentItem.Id}`, options),
|
||||
data: JSON.stringify(currentSearchResult),
|
||||
contentType: 'application/json'
|
||||
|
||||
}).then(function () {
|
||||
}).then(() => {
|
||||
|
||||
hasChanges = true;
|
||||
loading.hide();
|
||||
|
||||
dialogHelper.close(page);
|
||||
|
||||
}, function () {
|
||||
}, () => {
|
||||
|
||||
loading.hide();
|
||||
|
||||
|
|
@ -290,28 +309,28 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
|||
|
||||
function showIdentificationForm(page, item) {
|
||||
|
||||
var apiClient = getApiClient();
|
||||
const apiClient = getApiClient();
|
||||
|
||||
apiClient.getJSON(apiClient.getUrl('Items/' + item.Id + '/ExternalIdInfos')).then(function (idList) {
|
||||
apiClient.getJSON(apiClient.getUrl(`Items/${item.Id}/ExternalIdInfos`)).then(idList => {
|
||||
|
||||
var html = '';
|
||||
let html = '';
|
||||
|
||||
for (var i = 0, length = idList.length; i < length; i++) {
|
||||
for (let i = 0, length = idList.length; i < length; i++) {
|
||||
|
||||
var idInfo = idList[i];
|
||||
const idInfo = idList[i];
|
||||
|
||||
var id = 'txtLookup' + idInfo.Key;
|
||||
const id = `txtLookup${idInfo.Key}`;
|
||||
|
||||
html += '<div class="inputContainer">';
|
||||
|
||||
var fullName = idInfo.Name;
|
||||
let fullName = idInfo.Name;
|
||||
if (idInfo.Type) {
|
||||
fullName = idInfo.Name + ' ' + globalize.translate(idInfo.Type);
|
||||
fullName = `${idInfo.Name} ${globalize.translate(idInfo.Type)}`;
|
||||
}
|
||||
|
||||
var idLabel = globalize.translate('LabelDynamicExternalId', fullName);
|
||||
const idLabel = globalize.translate('LabelDynamicExternalId', fullName);
|
||||
|
||||
html += '<input is="emby-input" class="txtLookupId" data-providerkey="' + idInfo.Key + '" id="' + id + '" label="' + idLabel + '"/>';
|
||||
html += `<input is="emby-input" class="txtLookupId" data-providerkey="${idInfo.Key}" id="${id}" label="${idLabel}"/>`;
|
||||
|
||||
html += '</div>';
|
||||
}
|
||||
|
|
@ -338,16 +357,17 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
|||
|
||||
loading.show();
|
||||
|
||||
require(['text!./itemidentifier.template.html'], function (template) {
|
||||
// TODO: remove require
|
||||
require(['text!./components/itemidentifier/itemidentifier.template.html'], template => {
|
||||
|
||||
var apiClient = getApiClient();
|
||||
const apiClient = getApiClient();
|
||||
|
||||
apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) {
|
||||
apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(item => {
|
||||
|
||||
currentItem = item;
|
||||
currentItemType = currentItem.Type;
|
||||
|
||||
var dialogOptions = {
|
||||
const dialogOptions = {
|
||||
size: 'small',
|
||||
removeOnClose: true,
|
||||
scrollY: false
|
||||
|
|
@ -357,12 +377,12 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
|||
dialogOptions.size = 'fullscreen';
|
||||
}
|
||||
|
||||
var dlg = dialogHelper.createDialog(dialogOptions);
|
||||
const dlg = dialogHelper.createDialog(dialogOptions);
|
||||
|
||||
dlg.classList.add('formDialog');
|
||||
dlg.classList.add('recordingDialog');
|
||||
|
||||
var html = '';
|
||||
let html = '';
|
||||
html += globalize.translateDocument(template, 'core');
|
||||
|
||||
dlg.innerHTML = html;
|
||||
|
|
@ -384,21 +404,21 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
|||
|
||||
dialogHelper.open(dlg);
|
||||
|
||||
dlg.querySelector('.popupIdentifyForm').addEventListener('submit', function (e) {
|
||||
dlg.querySelector('.popupIdentifyForm').addEventListener('submit', e => {
|
||||
|
||||
e.preventDefault();
|
||||
searchForIdentificationResults(dlg);
|
||||
return false;
|
||||
});
|
||||
|
||||
dlg.querySelector('.identifyOptionsForm').addEventListener('submit', function (e) {
|
||||
dlg.querySelector('.identifyOptionsForm').addEventListener('submit', e => {
|
||||
|
||||
e.preventDefault();
|
||||
submitIdentficationResult(dlg);
|
||||
return false;
|
||||
});
|
||||
|
||||
dlg.querySelector('.btnCancel').addEventListener('click', function (e) {
|
||||
dlg.querySelector('.btnCancel').addEventListener('click', () => {
|
||||
|
||||
dialogHelper.close(dlg);
|
||||
});
|
||||
|
|
@ -426,9 +446,10 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
|||
currentItem = null;
|
||||
currentItemType = itemType;
|
||||
|
||||
require(['text!./itemidentifier.template.html'], function (template) {
|
||||
// TODO: remove require
|
||||
require(['text!./components/itemidentifier/itemidentifier.template.html'], template => {
|
||||
|
||||
var dialogOptions = {
|
||||
const dialogOptions = {
|
||||
size: 'small',
|
||||
removeOnClose: true,
|
||||
scrollY: false
|
||||
|
|
@ -438,12 +459,12 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
|||
dialogOptions.size = 'fullscreen';
|
||||
}
|
||||
|
||||
var dlg = dialogHelper.createDialog(dialogOptions);
|
||||
const dlg = dialogHelper.createDialog(dialogOptions);
|
||||
|
||||
dlg.classList.add('formDialog');
|
||||
dlg.classList.add('recordingDialog');
|
||||
|
||||
var html = '';
|
||||
let html = '';
|
||||
html += globalize.translateDocument(template, 'core');
|
||||
|
||||
dlg.innerHTML = html;
|
||||
|
|
@ -454,22 +475,22 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
|||
|
||||
dialogHelper.open(dlg);
|
||||
|
||||
dlg.querySelector('.btnCancel').addEventListener('click', function (e) {
|
||||
dlg.querySelector('.btnCancel').addEventListener('click', () => {
|
||||
|
||||
dialogHelper.close(dlg);
|
||||
});
|
||||
|
||||
dlg.querySelector('.popupIdentifyForm').addEventListener('submit', function (e) {
|
||||
dlg.querySelector('.popupIdentifyForm').addEventListener('submit', e => {
|
||||
|
||||
e.preventDefault();
|
||||
searchForIdentificationResults(dlg);
|
||||
return false;
|
||||
});
|
||||
|
||||
dlg.addEventListener('close', function () {
|
||||
dlg.addEventListener('close', () => {
|
||||
|
||||
loading.hide();
|
||||
var foundItem = hasChanges ? currentSearchResult : null;
|
||||
const foundItem = hasChanges ? currentSearchResult : null;
|
||||
|
||||
resolveFunc(foundItem);
|
||||
});
|
||||
|
|
@ -498,10 +519,9 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
|||
dlg.querySelector('.formDialogHeaderTitle').innerHTML = globalize.translate('Search');
|
||||
}
|
||||
|
||||
return {
|
||||
show: function (itemId, serverId) {
|
||||
export function show(itemId, serverId) {
|
||||
|
||||
return new Promise(function (resolve, reject) {
|
||||
return new Promise((resolve, reject) => {
|
||||
|
||||
currentResolve = resolve;
|
||||
currentReject = reject;
|
||||
|
|
@ -510,11 +530,11 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
|||
|
||||
showEditor(itemId);
|
||||
});
|
||||
},
|
||||
}
|
||||
|
||||
showFindNew: function (itemName, itemYear, itemType, serverId) {
|
||||
export function showFindNew(itemName, itemYear, itemType, serverId) {
|
||||
|
||||
return new Promise(function (resolve, reject) {
|
||||
return new Promise((resolve) => {
|
||||
|
||||
currentServerId = serverId;
|
||||
|
||||
|
|
@ -522,5 +542,10 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
|
|||
showEditorFindNew(itemName, itemYear, itemType, resolve);
|
||||
});
|
||||
}
|
||||
|
||||
/* eslint-enable indent */
|
||||
export default {
|
||||
show: show,
|
||||
showFindNew: showFindNew
|
||||
};
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue