mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Merge pull request #1361 from grafixeyehero/es6-migration

Browse source 
Migration imageUploader, itemidentifier and itemMediaInfo to ES6 modules
This commit is contained in:
dkanada 2020-07-10 01:56:55 +09:00 • committed by GitHub
commit d7da6cb7cf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 237 additions and 176 deletions
Download patch file Download diff file Expand all files Collapse all files

3
package.json
View file

@ -102,7 +102,10 @@
"src/components/dialogHelper/dialogHelper.js", "src/components/dialogHelper/dialogHelper.js",
"src/components/channelMapper/channelMapper.js", "src/components/channelMapper/channelMapper.js",
"src/components/images/imageLoader.js", "src/components/images/imageLoader.js",
"src/components/imageUploader/imageUploader.js",
"src/components/indicators/indicators.js", "src/components/indicators/indicators.js",
"src/components/itemidentifier/itemidentifier.js",
"src/components/itemMediaInfo/itemMediaInfo.js",
"src/components/lazyLoader/lazyLoaderIntersectionObserver.js", "src/components/lazyLoader/lazyLoaderIntersectionObserver.js",
"src/components/mediaLibraryCreator/mediaLibraryCreator.js", "src/components/mediaLibraryCreator/mediaLibraryCreator.js",
"src/components/mediaLibraryEditor/mediaLibraryEditor.js", "src/components/mediaLibraryEditor/mediaLibraryEditor.js",

92
src/components/imageUploader/imageUploader.js
View file

@ -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) { /* eslint-disable indent */
'use strict';
var currentItemId; /**
var currentServerId; * Module for imageUploader.
var currentFile; * @module components/imageUploader/imageUploader
var hasChanges = false; */
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) { function onFileReaderError(evt) {
@ -12,14 +28,14 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
switch (evt.target.error.code) { switch (evt.target.error.code) {
case evt.target.error.NOT_FOUND_ERR: case evt.target.error.NOT_FOUND_ERR:
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('MessageFileReadError')); toast(globalize.translate('MessageFileReadError'));
}); });
break; break;
case evt.target.error.ABORT_ERR: case evt.target.error.ABORT_ERR:
break; // noop break; // noop
default: default:
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('MessageFileReadError')); toast(globalize.translate('MessageFileReadError'));
}); });
break; break;
@ -28,7 +44,7 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
function setFiles(page, files) { function setFiles(page, files) {
var file = files[0]; const file = files[0];
if (!file || !file.type.match('image.*')) { if (!file || !file.type.match('image.*')) {
page.querySelector('#imageOutput').innerHTML = ''; page.querySelector('#imageOutput').innerHTML = '';
@ -39,23 +55,23 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
currentFile = file; currentFile = file;
var reader = new FileReader(); const reader = new FileReader();
reader.onerror = onFileReaderError; reader.onerror = onFileReaderError;
reader.onloadstart = function () { reader.onloadstart = () => {
page.querySelector('#fldUpload').classList.add('hide'); page.querySelector('#fldUpload').classList.add('hide');
}; };
reader.onabort = function () { reader.onabort = () => {
loading.hide(); loading.hide();
console.debug('File read cancelled'); console.debug('File read cancelled');
}; };
// Closure to capture the file information. // Closure to capture the file information.
reader.onload = (function (theFile) { reader.onload = (theFile => {
return function (e) { return e => {
// Render thumbnail. // 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('#imageOutput').innerHTML = html;
page.querySelector('#dropImageText').classList.add('hide'); page.querySelector('#dropImageText').classList.add('hide');
@ -69,14 +85,14 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
function onSubmit(e) { function onSubmit(e) {
var file = currentFile; const file = currentFile;
if (!file) { if (!file) {
return false; return false;
} }
if (!file.type.startsWith('image/')) { if (!file.type.startsWith('image/')) {
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('MessageImageFileTypeAllowed')); toast(globalize.translate('MessageImageFileTypeAllowed'));
}); });
e.preventDefault(); e.preventDefault();
@ -85,18 +101,18 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
loading.show(); 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') { if (imageType === 'None') {
require(['toast'], function(toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('MessageImageTypeNotSelected')); toast(globalize.translate('MessageImageTypeNotSelected'));
}); });
e.preventDefault(); e.preventDefault();
return false; return false;
} }
connectionManager.getApiClient(currentServerId).uploadItemImage(currentItemId, imageType, file).then(function () { connectionManager.getApiClient(currentServerId).uploadItemImage(currentItemId, imageType, file).then(() => {
dlg.querySelector('#uploadImage').value = ''; dlg.querySelector('#uploadImage').value = '';
@ -117,21 +133,21 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
setFiles(page, this.files); setFiles(page, this.files);
}); });
page.querySelector('.btnBrowse').addEventListener('click', function () { page.querySelector('.btnBrowse').addEventListener('click', () => {
page.querySelector('#uploadImage').click(); page.querySelector('#uploadImage').click();
}); });
} }
function showEditor(options, resolve, reject) { function showEditor(options, resolve) {
options = options || {}; options = options || {};
require(['text!./imageUploader.template.html'], function (template) { return import('text!./imageUploader.template.html').then(({default: template}) => {
currentItemId = options.itemId; currentItemId = options.itemId;
currentServerId = options.serverId; currentServerId = options.serverId;
var dialogOptions = { const dialogOptions = {
removeOnClose: true removeOnClose: true
}; };
@ -141,7 +157,7 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
dialogOptions.size = 'small'; dialogOptions.size = 'small';
} }
var dlg = dialogHelper.createDialog(dialogOptions); const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
@ -152,7 +168,7 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
} }
// Has to be assigned a z-index after the call to .open() // Has to be assigned a z-index after the call to .open()
dlg.addEventListener('close', function () { dlg.addEventListener('close', () => {
if (layoutManager.tv) { if (layoutManager.tv) {
scrollHelper.centerFocus.off(dlg, false); scrollHelper.centerFocus.off(dlg, false);
@ -168,22 +184,24 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
dlg.querySelector('#selectImageType').value = options.imageType || 'Primary'; dlg.querySelector('#selectImageType').value = options.imageType || 'Primary';
dlg.querySelector('.btnCancel').addEventListener('click', function () { dlg.querySelector('.btnCancel').addEventListener('click', () => {
dialogHelper.close(dlg); dialogHelper.close(dlg);
}); });
}); });
} }
return { export function show(options) {
show: function (options) {
return new Promise(function (resolve, reject) { return new Promise(resolve => {
hasChanges = false; hasChanges = false;
showEditor(options, resolve, reject); showEditor(options, resolve);
}); });
} }
};
}); /* eslint-enable indent */
export default {
show: show
};

95
src/components/itemMediaInfo/itemMediaInfo.js
View file

@ -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) { /* eslint-disable indent */
'use strict';
/**
* 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) { function setMediaInfo(user, page, item) {
var html = item.MediaSources.map(function (version) { let html = item.MediaSources.map(version => {
return getMediaSourceHtml(user, item, version); return getMediaSourceHtml(user, item, version);
}).join('<div style="border-top:1px solid #444;margin: 1em 0;"></div>'); }).join('<div style="border-top:1px solid #444;margin: 1em 0;"></div>');
if (item.MediaSources.length > 1) { if (item.MediaSources.length > 1) {
html = '<br/>' + html; html = `<br/>${html}`;
} }
var mediaInfoContent = page.querySelector('#mediaInfoContent'); const mediaInfoContent = page.querySelector('#mediaInfoContent');
mediaInfoContent.innerHTML = html; mediaInfoContent.innerHTML = html;
} }
function getMediaSourceHtml(user, item, version) { function getMediaSourceHtml(user, item, version) {
var html = ''; let html = '';
if (version.Name) { if (version.Name) {
html += '<div><h2 class="mediaInfoStreamType">' + version.Name + '</h2></div>'; html += `<div><h2 class="mediaInfoStreamType">${version.Name}</h2></div>`;
} }
if (version.Container) { 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) { 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) { 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) { if (version.Size) {
var size = (version.Size / (1024 * 1024)).toFixed(0) + ' MB'; const size = `${(version.Size / (1024 * 1024)).toFixed(0)} MB`;
html += createAttribute(globalize.translate('MediaInfoSize'), size) + '<br/>'; html += `${createAttribute(globalize.translate('MediaInfoSize'), size)}<br/>`;
} }
for (var i = 0, length = version.MediaStreams.length; i < length; i++) { for (let i = 0, length = version.MediaStreams.length; i < length; i++) {
var stream = version.MediaStreams[i]; const stream = version.MediaStreams[i];
if (stream.Type === 'Data') { if (stream.Type === 'Data') {
continue; continue;
} }
html += '<div class="mediaInfoStream">'; html += '<div class="mediaInfoStream">';
var displayType = globalize.translate('MediaInfoStreamType' + stream.Type); const displayType = globalize.translate(`MediaInfoStreamType${stream.Type}`);
html += '<h2 class="mediaInfoStreamType">' + displayType + '</h2>'; html += `<h2 class="mediaInfoStreamType">${displayType}</h2>`;
var attributes = []; const attributes = [];
if (stream.DisplayTitle) { if (stream.DisplayTitle) {
attributes.push(createAttribute('Title', 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)); attributes.push(createAttribute(globalize.translate('MediaInfoLevel'), stream.Level));
} }
if (stream.Width || stream.Height) { 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') { if (stream.AspectRatio && stream.Codec !== 'mjpeg') {
attributes.push(createAttribute(globalize.translate('MediaInfoAspectRatio'), stream.AspectRatio)); 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)); attributes.push(createAttribute(globalize.translate('MediaInfoLayout'), stream.ChannelLayout));
} }
if (stream.Channels) { 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') { 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) { if (stream.SampleRate) {
attributes.push(createAttribute(globalize.translate('MediaInfoSampleRate'), stream.SampleRate + ' Hz')); attributes.push(createAttribute(globalize.translate('MediaInfoSampleRate'), `${stream.SampleRate} Hz`));
} }
if (stream.BitDepth) { if (stream.BitDepth) {
attributes.push(createAttribute(globalize.translate('MediaInfoBitDepth'), stream.BitDepth + ' bit')); attributes.push(createAttribute(globalize.translate('MediaInfoBitDepth'), `${stream.BitDepth} bit`));
} }
if (stream.PixelFormat) { if (stream.PixelFormat) {
attributes.push(createAttribute(globalize.translate('MediaInfoPixelFormat'), stream.PixelFormat)); attributes.push(createAttribute(globalize.translate('MediaInfoPixelFormat'), stream.PixelFormat));
@ -116,13 +133,13 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
} }
function createAttribute(label, value) { 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) { function loadMediaInfo(itemId, serverId, template) {
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) { return apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(item => {
var dialogOptions = { const dialogOptions = {
size: 'small', size: 'small',
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
@ -130,35 +147,35 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
if (layoutManager.tv) { if (layoutManager.tv) {
dialogOptions.size = 'fullscreen'; dialogOptions.size = 'fullscreen';
} }
var dlg = dialogHelper.createDialog(dialogOptions); const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
var html = ''; let html = '';
html += globalize.translateDocument(template, 'core'); html += globalize.translateDocument(template, 'core');
dlg.innerHTML = html; dlg.innerHTML = html;
if (layoutManager.tv) { if (layoutManager.tv) {
dlg.querySelector('.formDialogContent'); dlg.querySelector('.formDialogContent');
} }
dialogHelper.open(dlg); dialogHelper.open(dlg);
dlg.querySelector('.btnCancel').addEventListener('click', function (e) { dlg.querySelector('.btnCancel').addEventListener('click', () => {
dialogHelper.close(dlg); dialogHelper.close(dlg);
}); });
apiClient.getCurrentUser().then(function (user) { apiClient.getCurrentUser().then(user => {
setMediaInfo(user, dlg, item); setMediaInfo(user, dlg, item);
}); });
loading.hide(); loading.hide();
}); });
} }
function showMediaInfo(itemId, serverId) { export function show(itemId, serverId) {
loading.show(); loading.show();
return new Promise(function (resolve, reject) { return import('text!./itemMediaInfo.template.html').then(({default: template}) => {
require(['text!./itemMediaInfo.template.html'], function (template) { return new Promise((resolve, reject) => {
showMediaInfoMore(itemId, serverId, template).then(resolve, reject); loadMediaInfo(itemId, serverId, template).then(resolve, reject);
}); });
}); });
} }
return { /* eslint-enable indent */
show: showMediaInfo export default {
}; show: show
}); };

223
src/components/itemidentifier/itemidentifier.js
View file

@ -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) { /* eslint-disable indent */
'use strict';
var enableFocusTransform = !browser.slow && !browser.edge; /**
* Module for itemidentifier media item.
* @module components/itemidentifier/itemidentifier
*/
var currentItem; import dialogHelper from 'dialogHelper';
var currentItemType; import loading from 'loading';
var currentServerId; import connectionManager from 'connectionManager';
var currentResolve; import globalize from 'globalize';
var currentReject; import scrollHelper from 'scrollHelper';
var hasChanges = false; import layoutManager from 'layoutManager';
var currentSearchResult; 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() { function getApiClient() {
return connectionManager.getApiClient(currentServerId); return connectionManager.getApiClient(currentServerId);
@ -17,14 +36,14 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
function searchForIdentificationResults(page) { function searchForIdentificationResults(page) {
var lookupInfo = { let lookupInfo = {
ProviderIds: {} ProviderIds: {}
}; };
var i; let i;
var length; let length;
var identifyField = page.querySelectorAll('.identifyField'); const identifyField = page.querySelectorAll('.identifyField');
var value; let value;
for (i = 0, length = identifyField.length; i < length; i++) { for (i = 0, length = identifyField.length; i < length; i++) {
value = identifyField[i].value; 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++) { for (i = 0, length = txtLookupId.length; i < length; i++) {
value = txtLookupId[i].value; value = txtLookupId[i].value;
@ -53,7 +72,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
} }
if (!hasId && !lookupInfo.Name) { if (!hasId && !lookupInfo.Name) {
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('PleaseEnterNameOrId')); toast(globalize.translate('PleaseEnterNameOrId'));
}); });
return; return;
@ -71,16 +90,16 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
loading.show(); loading.show();
var apiClient = getApiClient(); const apiClient = getApiClient();
apiClient.ajax({ apiClient.ajax({
type: 'POST', type: 'POST',
url: apiClient.getUrl('Items/RemoteSearch/' + currentItemType), url: apiClient.getUrl(`Items/RemoteSearch/${currentItemType}`),
data: JSON.stringify(lookupInfo), data: JSON.stringify(lookupInfo),
contentType: 'application/json', contentType: 'application/json',
dataType: 'json' dataType: 'json'
}).then(function (results) { }).then(results => {
loading.hide(); loading.hide();
showIdentificationSearchResults(page, results); showIdentificationSearchResults(page, results);
@ -89,29 +108,29 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
function showIdentificationSearchResults(page, results) { function showIdentificationSearchResults(page, results) {
var identificationSearchResults = page.querySelector('.identificationSearchResults'); const identificationSearchResults = page.querySelector('.identificationSearchResults');
page.querySelector('.popupIdentifyForm').classList.add('hide'); page.querySelector('.popupIdentifyForm').classList.add('hide');
identificationSearchResults.classList.remove('hide'); identificationSearchResults.classList.remove('hide');
page.querySelector('.identifyOptionsForm').classList.add('hide'); page.querySelector('.identifyOptionsForm').classList.add('hide');
page.querySelector('.dialogContentInner').classList.remove('dialog-content-centered'); page.querySelector('.dialogContentInner').classList.remove('dialog-content-centered');
var html = ''; let html = '';
var i; let i;
var length; let length;
for (i = 0, length = results.length; i < length; i++) { for (i = 0, length = results.length; i < length; i++) {
var result = results[i]; const result = results[i];
html += getSearchResultHtml(result, i); html += getSearchResultHtml(result, i);
} }
var elem = page.querySelector('.identificationSearchResultList'); const elem = page.querySelector('.identificationSearchResultList');
elem.innerHTML = html; elem.innerHTML = html;
function onSearchImageClick() { 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) { 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++) { for (i = 0, length = searchImages.length; i < length; i++) {
searchImages[i].addEventListener('click', onSearchImageClick); searchImages[i].addEventListener('click', onSearchImageClick);
@ -143,7 +162,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
function showIdentifyOptions(page, identifyResult) { function showIdentifyOptions(page, identifyResult) {
var identifyOptionsForm = page.querySelector('.identifyOptionsForm'); const identifyOptionsForm = page.querySelector('.identifyOptionsForm');
page.querySelector('.popupIdentifyForm').classList.add('hide'); page.querySelector('.popupIdentifyForm').classList.add('hide');
page.querySelector('.identificationSearchResults').classList.add('hide'); page.querySelector('.identificationSearchResults').classList.add('hide');
@ -153,19 +172,19 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
currentSearchResult = identifyResult; currentSearchResult = identifyResult;
var lines = []; const lines = [];
lines.push(identifyResult.Name); lines.push(identifyResult.Name);
if (identifyResult.ProductionYear) { if (identifyResult.ProductionYear) {
lines.push(identifyResult.ProductionYear); lines.push(identifyResult.ProductionYear);
} }
var resultHtml = lines.join('<br/>'); let resultHtml = lines.join('<br/>');
if (identifyResult.ImageUrl) { 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; page.querySelector('.selectedSearchResult').innerHTML = resultHtml;
@ -177,10 +196,10 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
// TODO move card creation code to Card component // TODO move card creation code to Card component
var html = ''; let html = '';
var cssClass = 'card scalableCard'; let cssClass = 'card scalableCard';
var cardBoxCssClass = 'cardBox'; let cardBoxCssClass = 'cardBox';
var padderClass; let padderClass;
if (currentItemType === 'Episode') { if (currentItemType === 'Episode') {
cssClass += ' backdropCard backdropCard-scalable'; cssClass += ' backdropCard backdropCard-scalable';
@ -203,30 +222,30 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
cardBoxCssClass += ' cardBox-bottompadded'; cardBoxCssClass += ' cardBox-bottompadded';
html += '<button type="button" class="' + cssClass + '" data-index="' + index + '">'; html += `<button type="button" class="${cssClass}" data-index="${index}">`;
html += '<div class="' + cardBoxCssClass + '">'; html += `<div class="${cardBoxCssClass}">`;
html += '<div class="cardScalable">'; html += '<div class="cardScalable">';
html += '<div class="' + padderClass + '"></div>'; html += `<div class="${padderClass}"></div>`;
html += '<div class="cardContent searchImage">'; html += '<div class="cardContent searchImage">';
if (result.ImageUrl) { 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 { } 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>';
html += '</div>'; html += '</div>';
var numLines = 2; let numLines = 2;
if (currentItemType === 'MusicAlbum') { if (currentItemType === 'MusicAlbum') {
numLines++; numLines++;
} }
var lines = [result.Name]; const lines = [result.Name];
if (result.AlbumArtist) { if (result.AlbumArtist) {
lines.push(result.AlbumArtist.Name); lines.push(result.AlbumArtist.Name);
@ -235,7 +254,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
lines.push(result.ProductionYear); lines.push(result.ProductionYear);
} }
for (var i = 0; i < numLines; i++) { for (let i = 0; i < numLines; i++) {
if (i === 0) { if (i === 0) {
html += '<div class="cardText cardText-first cardTextCentered">'; html += '<div class="cardText cardText-first cardTextCentered">';
@ -252,7 +271,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
} }
function getSearchImageDisplayUrl(url, provider) { function getSearchImageDisplayUrl(url, provider) {
var apiClient = getApiClient(); const apiClient = getApiClient();
return apiClient.getUrl('Items/RemoteSearch/Image', { imageUrl: url, ProviderName: provider }); return apiClient.getUrl('Items/RemoteSearch/Image', { imageUrl: url, ProviderName: provider });
} }
@ -261,26 +280,26 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
loading.show(); loading.show();
var options = { const options = {
ReplaceAllImages: page.querySelector('#chkIdentifyReplaceImages').checked ReplaceAllImages: page.querySelector('#chkIdentifyReplaceImages').checked
}; };
var apiClient = getApiClient(); const apiClient = getApiClient();
apiClient.ajax({ apiClient.ajax({
type: 'POST', type: 'POST',
url: apiClient.getUrl('Items/RemoteSearch/Apply/' + currentItem.Id, options), url: apiClient.getUrl(`Items/RemoteSearch/Apply/${currentItem.Id}`, options),
data: JSON.stringify(currentSearchResult), data: JSON.stringify(currentSearchResult),
contentType: 'application/json' contentType: 'application/json'
}).then(function () { }).then(() => {
hasChanges = true; hasChanges = true;
loading.hide(); loading.hide();
dialogHelper.close(page); dialogHelper.close(page);
}, function () { }, () => {
loading.hide(); loading.hide();
@ -290,28 +309,28 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
function showIdentificationForm(page, item) { 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">'; html += '<div class="inputContainer">';
var fullName = idInfo.Name; let fullName = idInfo.Name;
if (idInfo.Type) { 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>'; html += '</div>';
} }
@ -338,16 +357,16 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
loading.show(); loading.show();
require(['text!./itemidentifier.template.html'], function (template) { return import('text!./itemidentifier.template.html').then(({default: template}) => {
var apiClient = getApiClient(); const apiClient = getApiClient();
apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(function (item) { apiClient.getItem(apiClient.getCurrentUserId(), itemId).then(item => {
currentItem = item; currentItem = item;
currentItemType = currentItem.Type; currentItemType = currentItem.Type;
var dialogOptions = { const dialogOptions = {
size: 'small', size: 'small',
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
@ -357,12 +376,12 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
dialogOptions.size = 'fullscreen'; dialogOptions.size = 'fullscreen';
} }
var dlg = dialogHelper.createDialog(dialogOptions); const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
dlg.classList.add('recordingDialog'); dlg.classList.add('recordingDialog');
var html = ''; let html = '';
html += globalize.translateDocument(template, 'core'); html += globalize.translateDocument(template, 'core');
dlg.innerHTML = html; dlg.innerHTML = html;
@ -384,21 +403,21 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
dialogHelper.open(dlg); dialogHelper.open(dlg);
dlg.querySelector('.popupIdentifyForm').addEventListener('submit', function (e) { dlg.querySelector('.popupIdentifyForm').addEventListener('submit', e => {
e.preventDefault(); e.preventDefault();
searchForIdentificationResults(dlg); searchForIdentificationResults(dlg);
return false; return false;
}); });
dlg.querySelector('.identifyOptionsForm').addEventListener('submit', function (e) { dlg.querySelector('.identifyOptionsForm').addEventListener('submit', e => {
e.preventDefault(); e.preventDefault();
submitIdentficationResult(dlg); submitIdentficationResult(dlg);
return false; return false;
}); });
dlg.querySelector('.btnCancel').addEventListener('click', function (e) { dlg.querySelector('.btnCancel').addEventListener('click', () => {
dialogHelper.close(dlg); dialogHelper.close(dlg);
}); });
@ -421,14 +440,15 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
} }
} }
// TODO investigate where this was used
function showEditorFindNew(itemName, itemYear, itemType, resolveFunc) { function showEditorFindNew(itemName, itemYear, itemType, resolveFunc) {
currentItem = null; currentItem = null;
currentItemType = itemType; currentItemType = itemType;
require(['text!./itemidentifier.template.html'], function (template) { return import('text!./itemidentifier.template.html').then(({default: template}) => {
var dialogOptions = { const dialogOptions = {
size: 'small', size: 'small',
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
@ -438,12 +458,12 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
dialogOptions.size = 'fullscreen'; dialogOptions.size = 'fullscreen';
} }
var dlg = dialogHelper.createDialog(dialogOptions); const dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
dlg.classList.add('recordingDialog'); dlg.classList.add('recordingDialog');
var html = ''; let html = '';
html += globalize.translateDocument(template, 'core'); html += globalize.translateDocument(template, 'core');
dlg.innerHTML = html; dlg.innerHTML = html;
@ -454,22 +474,22 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
dialogHelper.open(dlg); dialogHelper.open(dlg);
dlg.querySelector('.btnCancel').addEventListener('click', function (e) { dlg.querySelector('.btnCancel').addEventListener('click', () => {
dialogHelper.close(dlg); dialogHelper.close(dlg);
}); });
dlg.querySelector('.popupIdentifyForm').addEventListener('submit', function (e) { dlg.querySelector('.popupIdentifyForm').addEventListener('submit', e => {
e.preventDefault(); e.preventDefault();
searchForIdentificationResults(dlg); searchForIdentificationResults(dlg);
return false; return false;
}); });
dlg.addEventListener('close', function () { dlg.addEventListener('close', () => {
loading.hide(); loading.hide();
var foundItem = hasChanges ? currentSearchResult : null; const foundItem = hasChanges ? currentSearchResult : null;
resolveFunc(foundItem); resolveFunc(foundItem);
}); });
@ -498,29 +518,32 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
dlg.querySelector('.formDialogHeaderTitle').innerHTML = globalize.translate('Search'); dlg.querySelector('.formDialogHeaderTitle').innerHTML = globalize.translate('Search');
} }
return { export function show(itemId, serverId) {
show: function (itemId, serverId) {
return new Promise(function (resolve, reject) { return new Promise((resolve, reject) => {
currentResolve = resolve; currentResolve = resolve;
currentReject = reject; currentReject = reject;
currentServerId = serverId; currentServerId = serverId;
hasChanges = false; hasChanges = false;
showEditor(itemId); 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; currentServerId = serverId;
hasChanges = false; hasChanges = false;
showEditorFindNew(itemName, itemYear, itemType, resolve); showEditorFindNew(itemName, itemYear, itemType, resolve);
}); });
} }
};
}); /* eslint-enable indent */
export default {
show: show,
showFindNew: showFindNew
};