`;
if (options.mode === 'keyboard') {
- html += '';
+ html += ``;
} else {
letters = ['#'];
html += mapLetters(letters, vertical).join('');
@@ -77,11 +88,11 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
html += mapLetters(letters, vertical).join('');
if (options.mode === 'keyboard') {
- html += '';
+ html += ``;
html += '
';
letters = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
- html += '';
+ html += `
`;
html += '
'; html += mapLetters(letters, vertical).join(''); html += '
';
@@ -95,227 +106,228 @@ define(['focusManager', 'layoutManager', 'dom', 'css!./style.css', 'paper-icon-b
element.focus = focus;
}
- function AlphaPicker(options) {
+ export class AlphaPicker {
+ constructor(options) {
- var self = this;
- this.options = options;
+ this.options = options;
- var element = options.element;
- var itemsContainer = options.itemsContainer;
- var itemClass = options.itemClass;
+ const element = options.element;
+ const itemsContainer = options.itemsContainer;
+ const itemClass = options.itemClass;
- var itemFocusValue;
- var itemFocusTimeout;
+ let itemFocusValue;
+ let itemFocusTimeout;
- function onItemFocusTimeout() {
- itemFocusTimeout = null;
- self.value(itemFocusValue);
- }
-
- var alphaFocusedElement;
- var alphaFocusTimeout;
-
- function onAlphaFocusTimeout() {
-
- alphaFocusTimeout = null;
-
- if (document.activeElement === alphaFocusedElement) {
- var value = alphaFocusedElement.getAttribute('data-value');
- self.value(value, true);
+ function onItemFocusTimeout() {
+ itemFocusTimeout = null;
+ this.value(itemFocusValue);
}
- }
- function onAlphaPickerInKeyboardModeClick(e) {
+ let alphaFocusedElement;
+ let alphaFocusTimeout;
- var alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
+ function onAlphaFocusTimeout() {
- if (alphaPickerButton) {
- var value = alphaPickerButton.getAttribute('data-value');
-
- element.dispatchEvent(new CustomEvent('alphavalueclicked', {
- cancelable: false,
- detail: {
- value: value
- }
- }));
- }
- }
-
- function onAlphaPickerClick(e) {
-
- var alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
-
- if (alphaPickerButton) {
- var value = alphaPickerButton.getAttribute('data-value');
- if ((this._currentValue || '').toUpperCase() === value.toUpperCase()) {
- self.value(null, true);
- } else {
- self.value(value, true);
- }
- }
- }
-
- function onAlphaPickerFocusIn(e) {
-
- if (alphaFocusTimeout) {
- clearTimeout(alphaFocusTimeout);
alphaFocusTimeout = null;
+
+ if (document.activeElement === alphaFocusedElement) {
+ const value = alphaFocusedElement.getAttribute('data-value');
+ this.value(value, true);
+ }
}
- var alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
+ function onAlphaPickerInKeyboardModeClick(e) {
- if (alphaPickerButton) {
- alphaFocusedElement = alphaPickerButton;
- alphaFocusTimeout = setTimeout(onAlphaFocusTimeout, 600);
+ const alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
+
+ if (alphaPickerButton) {
+ const value = alphaPickerButton.getAttribute('data-value');
+
+ element.dispatchEvent(new CustomEvent('alphavalueclicked', {
+ cancelable: false,
+ detail: {
+ value
+ }
+ }));
+ }
}
- }
- function onItemsFocusIn(e) {
+ function onAlphaPickerClick(e) {
- var item = dom.parentWithClass(e.target, itemClass);
+ const alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
- if (item) {
- var prefix = item.getAttribute('data-prefix');
- if (prefix && prefix.length) {
-
- itemFocusValue = prefix[0];
- if (itemFocusTimeout) {
- clearTimeout(itemFocusTimeout);
+ if (alphaPickerButton) {
+ const value = alphaPickerButton.getAttribute('data-value');
+ if ((this._currentValue || '').toUpperCase() === value.toUpperCase()) {
+ this.value(null, true);
+ } else {
+ this.value(value, true);
}
- itemFocusTimeout = setTimeout(onItemFocusTimeout, 100);
}
}
- }
- self.enabled = function (enabled) {
+ function onAlphaPickerFocusIn(e) {
- if (enabled) {
-
- if (itemsContainer) {
- itemsContainer.addEventListener('focus', onItemsFocusIn, true);
+ if (alphaFocusTimeout) {
+ clearTimeout(alphaFocusTimeout);
+ alphaFocusTimeout = null;
}
- if (options.mode === 'keyboard') {
- element.addEventListener('click', onAlphaPickerInKeyboardModeClick);
- }
+ const alphaPickerButton = dom.parentWithClass(e.target, 'alphaPickerButton');
+
+ if (alphaPickerButton) {
+ alphaFocusedElement = alphaPickerButton;
+ alphaFocusTimeout = setTimeout(onAlphaFocusTimeout, 600);
+ }
+ }
+
+ function onItemsFocusIn(e) {
+
+ const item = dom.parentWithClass(e.target, itemClass);
+
+ if (item) {
+ const prefix = item.getAttribute('data-prefix');
+ if (prefix && prefix.length) {
+
+ itemFocusValue = prefix[0];
+ if (itemFocusTimeout) {
+ clearTimeout(itemFocusTimeout);
+ }
+ itemFocusTimeout = setTimeout(onItemFocusTimeout, 100);
+ }
+ }
+ }
+
+ this.enabled = function (enabled) {
+
+ if (enabled) {
+
+ if (itemsContainer) {
+ itemsContainer.addEventListener('focus', onItemsFocusIn, true);
+ }
+
+ if (options.mode === 'keyboard') {
+ element.addEventListener('click', onAlphaPickerInKeyboardModeClick);
+ }
+
+ if (options.valueChangeEvent !== 'click') {
+ element.addEventListener('focus', onAlphaPickerFocusIn, true);
+ } else {
+ element.addEventListener('click', onAlphaPickerClick.bind(this));
+ }
- if (options.valueChangeEvent !== 'click') {
- element.addEventListener('focus', onAlphaPickerFocusIn, true);
} else {
- element.addEventListener('click', onAlphaPickerClick.bind(this));
- }
- } else {
-
- if (itemsContainer) {
- itemsContainer.removeEventListener('focus', onItemsFocusIn, true);
- }
-
- element.removeEventListener('click', onAlphaPickerInKeyboardModeClick);
- element.removeEventListener('focus', onAlphaPickerFocusIn, true);
- element.removeEventListener('click', onAlphaPickerClick.bind(this));
- }
- };
-
- render(element, options);
-
- this.enabled(true);
- this.visible(true);
- }
-
- AlphaPicker.prototype.value = function (value, applyValue) {
-
- var element = this.options.element;
- var btn;
- var selected;
-
- if (value !== undefined) {
- if (value != null) {
-
- value = value.toUpperCase();
- this._currentValue = value;
-
- if (this.options.mode !== 'keyboard') {
- selected = element.querySelector('.' + selectedButtonClass);
-
- try {
- btn = element.querySelector('.alphaPickerButton[data-value=\'' + value + '\']');
- } catch (err) {
- console.error('error in querySelector: ' + err);
+ if (itemsContainer) {
+ itemsContainer.removeEventListener('focus', onItemsFocusIn, true);
}
- if (btn && btn !== selected) {
- btn.classList.add(selectedButtonClass);
+ element.removeEventListener('click', onAlphaPickerInKeyboardModeClick);
+ element.removeEventListener('focus', onAlphaPickerFocusIn, true);
+ element.removeEventListener('click', onAlphaPickerClick.bind(this));
+ }
+ };
+
+ render(element, options);
+
+ this.enabled(true);
+ this.visible(true);
+ }
+
+ value(value, applyValue) {
+
+ const element = this.options.element;
+ let btn;
+ let selected;
+
+ if (value !== undefined) {
+ if (value != null) {
+
+ value = value.toUpperCase();
+ this._currentValue = value;
+
+ if (this.options.mode !== 'keyboard') {
+ selected = element.querySelector(`.${selectedButtonClass}`);
+
+ try {
+ btn = element.querySelector(`.alphaPickerButton[data-value='${value}']`);
+ } catch (err) {
+ console.error('error in querySelector:', err);
+ }
+
+ if (btn && btn !== selected) {
+ btn.classList.add(selectedButtonClass);
+ }
+ if (selected && selected !== btn) {
+ selected.classList.remove(selectedButtonClass);
+ }
}
- if (selected && selected !== btn) {
+ } else {
+ this._currentValue = value;
+
+ selected = element.querySelector(`.${selectedButtonClass}`);
+ if (selected) {
selected.classList.remove(selectedButtonClass);
}
}
- } else {
- this._currentValue = value;
-
- selected = element.querySelector('.' + selectedButtonClass);
- if (selected) {
- selected.classList.remove(selectedButtonClass);
- }
}
+
+ if (applyValue) {
+ element.dispatchEvent(new CustomEvent('alphavaluechanged', {
+ cancelable: false,
+ detail: {
+ value
+ }
+ }));
+ }
+
+ return this._currentValue;
}
- if (applyValue) {
- element.dispatchEvent(new CustomEvent('alphavaluechanged', {
- cancelable: false,
- detail: {
- value: value
- }
- }));
+ on(name, fn) {
+ const element = this.options.element;
+ element.addEventListener(name, fn);
}
- return this._currentValue;
- };
-
- AlphaPicker.prototype.on = function (name, fn) {
- var element = this.options.element;
- element.addEventListener(name, fn);
- };
-
- AlphaPicker.prototype.off = function (name, fn) {
- var element = this.options.element;
- element.removeEventListener(name, fn);
- };
-
- AlphaPicker.prototype.visible = function (visible) {
-
- var element = this.options.element;
- element.style.visibility = visible ? 'visible' : 'hidden';
- };
-
- AlphaPicker.prototype.values = function () {
-
- var element = this.options.element;
- var elems = element.querySelectorAll('.alphaPickerButton');
- var values = [];
- for (var i = 0, length = elems.length; i < length; i++) {
-
- values.push(elems[i].getAttribute('data-value'));
-
+ off(name, fn) {
+ const element = this.options.element;
+ element.removeEventListener(name, fn);
}
- return values;
- };
+ visible(visible) {
- AlphaPicker.prototype.focus = function () {
+ const element = this.options.element;
+ element.style.visibility = visible ? 'visible' : 'hidden';
+ }
- var element = this.options.element;
- focusManager.autoFocus(element, true);
- };
+ values() {
- AlphaPicker.prototype.destroy = function () {
+ const element = this.options.element;
+ const elems = element.querySelectorAll('.alphaPickerButton');
+ const values = [];
+ for (let i = 0, length = elems.length; i < length; i++) {
- var element = this.options.element;
- this.enabled(false);
- element.classList.remove('focuscontainer-x');
- this.options = null;
- };
+ values.push(elems[i].getAttribute('data-value'));
- return AlphaPicker;
-});
+ }
+
+ return values;
+ }
+
+ focus() {
+
+ const element = this.options.element;
+ focusManager.autoFocus(element, true);
+ }
+
+ destroy() {
+
+ const element = this.options.element;
+ this.enabled(false);
+ element.classList.remove('focuscontainer-x');
+ this.options = null;
+ }
+ }
+
+/* eslint-enable indent */
+export default AlphaPicker;
diff --git a/src/components/directorybrowser/directorybrowser.js b/src/components/directorybrowser/directorybrowser.js
index e08fcc8336..fbe99154f5 100644
--- a/src/components/directorybrowser/directorybrowser.js
+++ b/src/components/directorybrowser/directorybrowser.js
@@ -1,9 +1,19 @@
-define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-input', 'paper-icon-button-light', 'css!./directorybrowser', 'formDialogStyle', 'emby-button'], function(loading, dialogHelper, dom, globalize) {
- 'use strict';
+import loading from 'loading';
+import dialogHelper from 'dialogHelper';
+import dom from 'dom';
+import globalize from 'globalize';
+import 'listViewStyle';
+import 'emby-input';
+import 'paper-icon-button-light';
+import 'css!./directorybrowser';
+import 'formDialogStyle';
+import 'emby-button';
+
+/* eslint-disable indent */
function getSystemInfo() {
return systemInfo ? Promise.resolve(systemInfo) : ApiClient.getPublicSystemInfo().then(
- function(info) {
+ info => {
systemInfo = info;
return info;
}
@@ -21,9 +31,9 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
loading.show();
- var promises = [];
+ const promises = [];
- if ('Network' === path) {
+ if (path === 'Network') {
promises.push(ApiClient.getNetworkDevices());
} else {
if (path) {
@@ -35,10 +45,10 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
}
Promise.all(promises).then(
- function(responses) {
- var folders = responses[0];
- var parentPath = responses[1] || '';
- var html = '';
+ responses => {
+ const folders = responses[0];
+ const parentPath = responses[1] || '';
+ let html = '';
page.querySelector('.results').scrollTop = 0;
page.querySelector('#txtDirectoryPickerPath').value = path || '';
@@ -46,9 +56,9 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
if (path) {
html += getItem('lnkPath lnkDirectory', '', parentPath, '...');
}
- for (var i = 0, length = folders.length; i < length; i++) {
- var folder = folders[i];
- var cssClass = 'File' === folder.Type ? 'lnkPath lnkFile' : 'lnkPath lnkDirectory';
+ for (let i = 0, length = folders.length; i < length; i++) {
+ const folder = folders[i];
+ const cssClass = folder.Type === 'File' ? 'lnkPath lnkFile' : 'lnkPath lnkDirectory';
html += getItem(cssClass, folder.Type, folder.Path, folder.Name);
}
@@ -58,7 +68,7 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
page.querySelector('.results').innerHTML = html;
loading.hide();
- }, function() {
+ }, () => {
if (updatePathOnError) {
page.querySelector('#txtDirectoryPickerPath').value = '';
page.querySelector('.results').innerHTML = '';
@@ -69,8 +79,8 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
}
function getItem(cssClass, type, path, name) {
- var html = '';
- html += ''; html += mapLetters(letters, vertical).join(''); html += '
';
+ let html = '';
+ html += `
`;
html += '
';
html += '
';
html += name;
@@ -82,19 +92,19 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
}
function getEditorHtml(options, systemInfo) {
- var html = '';
+ let html = '';
html += '
';
html += '
';
if (!options.pathReadOnly) {
- var instruction = options.instruction ? options.instruction + '
' : ''; + const instruction = options.instruction ? `${options.instruction}
` : ''; html += '
'].join('');
+ const html = [''].join('');
page.querySelector('#imageOutput').innerHTML = html;
page.querySelector('#dropImageText').classList.add('hide');
@@ -69,14 +85,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();
@@ -85,18 +101,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 = '';
@@ -117,21 +133,21 @@ 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) {
+ return import('text!./imageUploader.template.html').then(({default: template}) => {
currentItemId = options.itemId;
currentServerId = options.serverId;
- var dialogOptions = {
+ const dialogOptions = {
removeOnClose: true
};
@@ -141,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');
@@ -152,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);
@@ -168,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 => {
- hasChanges = false;
+ hasChanges = false;
- showEditor(options, resolve, reject);
- });
- }
- };
-});
+ showEditor(options, resolve);
+ });
+ }
+
+/* eslint-enable indent */
+export default {
+ show: show
+};
diff --git a/src/components/itemMediaInfo/itemMediaInfo.js b/src/components/itemMediaInfo/itemMediaInfo.js
index 81c84b6a23..9c2c8c9664 100644
--- a/src/components/itemMediaInfo/itemMediaInfo.js
+++ b/src/components/itemMediaInfo/itemMediaInfo.js
@@ -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('');
if (item.MediaSources.length > 1) {
- html = '
' + html; + html = `
${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 += '';
+ html += ``;
}
if (version.Container) {
- html += createAttribute(globalize.translate('MediaInfoContainer'), version.Container) + '
'; + html += `${createAttribute(globalize.translate('MediaInfoContainer'), version.Container)}
`; } if (version.Formats && version.Formats.length) { - html += createAttribute(globalize.translate('MediaInfoFormat'), version.Formats.join(',')) + '
'; + html += `${createAttribute(globalize.translate('MediaInfoFormat'), version.Formats.join(','))}
`; } if (version.Path && user && user.Policy.IsAdministrator) { - html += createAttribute(globalize.translate('MediaInfoPath'), version.Path) + '
'; + html += `${createAttribute(globalize.translate('MediaInfoPath'), version.Path)}
`; } if (version.Size) { - var size = (version.Size / (1024 * 1024)).toFixed(0) + ' MB'; - html += createAttribute(globalize.translate('MediaInfoSize'), size) + '
'; + const size = `${(version.Size / (1024 * 1024)).toFixed(0)} MB`; + html += `${createAttribute(globalize.translate('MediaInfoSize'), size)}
`; } - 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 += '
' : ''; + const instruction = options.instruction ? `${options.instruction}
` : ''; html += '
';
html += instruction;
- if ('bsd' === systemInfo.OperatingSystem.toLowerCase()) {
+ if (systemInfo.OperatingSystem.toLowerCase() === 'bsd') {
html += '
'; html += '
'; html += globalize.translate('MessageDirectoryPickerBSDInstruction'); html += '
'; - } else if ('linux' === systemInfo.OperatingSystem.toLowerCase()) { + } else if (systemInfo.OperatingSystem.toLowerCase() === 'linux') { html += '
'; html += '
'; html += globalize.translate('MessageDirectoryPickerLinuxInstruction'); @@ -105,17 +115,17 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in html += ''; html += '
';
@@ -147,7 +157,7 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
}
function alertTextWithOptions(options) {
- require(['alert'], function(alert) {
+ require(['alert'], alert => {
alert(options);
});
}
@@ -160,7 +170,7 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
ValidateWriteable: validateWriteable,
Path: path
}
- }).catch(function(response) {
+ }).catch(response => {
if (response) {
if (response.status === 404) {
alertText(globalize.translate('PathNotFound'));
@@ -180,10 +190,10 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
}
function initEditor(content, options, fileOptions) {
- content.addEventListener('click', function(e) {
- var lnkPath = dom.parentWithClass(e.target, 'lnkPath');
+ content.addEventListener('click', e => {
+ const lnkPath = dom.parentWithClass(e.target, 'lnkPath');
if (lnkPath) {
- var path = lnkPath.getAttribute('data-path');
+ const path = lnkPath.getAttribute('data-path');
if (lnkPath.classList.contains('lnkFile')) {
content.querySelector('#txtDirectoryPickerPath').value = path;
} else {
@@ -192,25 +202,25 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
}
});
- content.addEventListener('click', function(e) {
+ content.addEventListener('click', e => {
if (dom.parentWithClass(e.target, 'btnRefreshDirectories')) {
- var path = content.querySelector('#txtDirectoryPickerPath').value;
+ const path = content.querySelector('#txtDirectoryPickerPath').value;
refreshDirectoryBrowser(content, path, fileOptions);
}
});
- content.addEventListener('change', function(e) {
- var txtDirectoryPickerPath = dom.parentWithTag(e.target, 'INPUT');
- if (txtDirectoryPickerPath && 'txtDirectoryPickerPath' === txtDirectoryPickerPath.id) {
+ content.addEventListener('change', e => {
+ const txtDirectoryPickerPath = dom.parentWithTag(e.target, 'INPUT');
+ if (txtDirectoryPickerPath && txtDirectoryPickerPath.id === 'txtDirectoryPickerPath') {
refreshDirectoryBrowser(content, txtDirectoryPickerPath.value, fileOptions);
}
});
content.querySelector('form').addEventListener('submit', function(e) {
if (options.callback) {
- var networkSharePath = this.querySelector('#txtNetworkPath');
+ let networkSharePath = this.querySelector('#txtNetworkPath');
networkSharePath = networkSharePath ? networkSharePath.value : null;
- var path = this.querySelector('#txtDirectoryPickerPath').value;
+ const path = this.querySelector('#txtDirectoryPickerPath').value;
validatePath(path, options.validateWriteable, ApiClient).then(options.callback(path, networkSharePath));
}
e.preventDefault();
@@ -224,77 +234,79 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
return Promise.resolve(options.path);
} else {
return ApiClient.getJSON(ApiClient.getUrl('Environment/DefaultDirectoryBrowser')).then(
- function(result) {
+ result => {
return result.Path || '';
- }, function() {
+ }, () => {
return '';
}
);
}
}
- function directoryBrowser() {
- var currentDialog;
- var self = this;
- self.show = function(options) {
- options = options || {};
- var fileOptions = {
- includeDirectories: true
- };
- if (options.includeDirectories != null) {
- fileOptions.includeDirectories = options.includeDirectories;
- }
- if (options.includeFiles != null) {
- fileOptions.includeFiles = options.includeFiles;
- }
- Promise.all([getSystemInfo(), getDefaultPath(options)]).then(
- function(responses) {
- var systemInfo = responses[0];
- var initialPath = responses[1];
- var dlg = dialogHelper.createDialog({
- size: 'small',
- removeOnClose: true,
- scrollY: false
- });
- dlg.classList.add('ui-body-a');
- dlg.classList.add('background-theme-a');
- dlg.classList.add('directoryPicker');
- dlg.classList.add('formDialog');
-
- var html = '';
- html += ''; html += '
'; html += globalize.translate('MessageDirectoryPickerBSDInstruction'); html += '
'; - } else if ('linux' === systemInfo.OperatingSystem.toLowerCase()) { + } else if (systemInfo.OperatingSystem.toLowerCase() === 'linux') { html += '
'; html += '
'; html += globalize.translate('MessageDirectoryPickerLinuxInstruction'); @@ -105,17 +115,17 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in html += ''; html += '
';
- html += '';
- html += '
';
- html += getEditorHtml(options, systemInfo);
- dlg.innerHTML = html;
- initEditor(dlg, options, fileOptions);
- dlg.addEventListener('close', onDialogClosed);
- dialogHelper.open(dlg);
- dlg.querySelector('.btnCloseDialog').addEventListener('click', function() {
- dialogHelper.close(dlg);
- });
- currentDialog = dlg;
- dlg.querySelector('#txtDirectoryPickerPath').value = initialPath;
- var txtNetworkPath = dlg.querySelector('#txtNetworkPath');
- if (txtNetworkPath) {
- txtNetworkPath.value = options.networkSharePath || '';
- }
- if (!options.pathReadOnly) {
- refreshDirectoryBrowser(dlg, initialPath, fileOptions, true);
- }
+ class directoryBrowser {
+ constructor() {
+ let currentDialog;
+ this.show = options => {
+ options = options || {};
+ const fileOptions = {
+ includeDirectories: true
+ };
+ if (options.includeDirectories != null) {
+ fileOptions.includeDirectories = options.includeDirectories;
}
- );
- };
- self.close = function() {
- if (currentDialog) {
- dialogHelper.close(currentDialog);
- }
- };
+ if (options.includeFiles != null) {
+ fileOptions.includeFiles = options.includeFiles;
+ }
+ Promise.all([getSystemInfo(), getDefaultPath(options)]).then(
+ responses => {
+ const systemInfo = responses[0];
+ const initialPath = responses[1];
+ const dlg = dialogHelper.createDialog({
+ size: 'small',
+ removeOnClose: true,
+ scrollY: false
+ });
+ dlg.classList.add('ui-body-a');
+ dlg.classList.add('background-theme-a');
+ dlg.classList.add('directoryPicker');
+ dlg.classList.add('formDialog');
+
+ let html = '';
+ html += ''; - html += options.header || globalize.translate('HeaderSelectPath'); - html += '
'; - html += '';
+ html += '';
+ html += '
';
+ html += getEditorHtml(options, systemInfo);
+ dlg.innerHTML = html;
+ initEditor(dlg, options, fileOptions);
+ dlg.addEventListener('close', onDialogClosed);
+ dialogHelper.open(dlg);
+ dlg.querySelector('.btnCloseDialog').addEventListener('click', () => {
+ dialogHelper.close(dlg);
+ });
+ currentDialog = dlg;
+ dlg.querySelector('#txtDirectoryPickerPath').value = initialPath;
+ const txtNetworkPath = dlg.querySelector('#txtNetworkPath');
+ if (txtNetworkPath) {
+ txtNetworkPath.value = options.networkSharePath || '';
+ }
+ if (!options.pathReadOnly) {
+ refreshDirectoryBrowser(dlg, initialPath, fileOptions, true);
+ }
+ }
+ );
+ };
+ this.close = () => {
+ if (currentDialog) {
+ dialogHelper.close(currentDialog);
+ }
+ };
+ }
}
- var systemInfo;
- return directoryBrowser;
-});
+ let systemInfo;
+
+/* eslint-enable indent */
+export default directoryBrowser;
diff --git a/src/components/imageUploader/imageUploader.js b/src/components/imageUploader/imageUploader.js
index 417bd94e11..3783b8faff 100644
--- a/src/components/imageUploader/imageUploader.js
+++ b/src/components/imageUploader/imageUploader.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 = [''; + html += options.header || globalize.translate('HeaderSelectPath'); + html += '
'; + html += '' + html; + html = `
${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 += '
' + version.Name + '
${version.Name}
'; + html += `${createAttribute(globalize.translate('MediaInfoContainer'), version.Container)}
`; } if (version.Formats && version.Formats.length) { - html += createAttribute(globalize.translate('MediaInfoFormat'), version.Formats.join(',')) + '
'; + html += `${createAttribute(globalize.translate('MediaInfoFormat'), version.Formats.join(','))}
`; } if (version.Path && user && user.Policy.IsAdministrator) { - html += createAttribute(globalize.translate('MediaInfoPath'), version.Path) + '
'; + html += `${createAttribute(globalize.translate('MediaInfoPath'), version.Path)}
`; } if (version.Size) { - var size = (version.Size / (1024 * 1024)).toFixed(0) + ' MB'; - html += createAttribute(globalize.translate('MediaInfoSize'), size) + '
'; + const size = `${(version.Size / (1024 * 1024)).toFixed(0)} MB`; + html += `${createAttribute(globalize.translate('MediaInfoSize'), size)}
`; } - 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 += '
';
- var displayType = globalize.translate('MediaInfoStreamType' + stream.Type);
- html += '
'); + let resultHtml = lines.join('
'); if (identifyResult.ImageUrl) { - var displayUrl = getSearchImageDisplayUrl(identifyResult.ImageUrl, identifyResult.SearchProviderName); + const displayUrl = getSearchImageDisplayUrl(identifyResult.ImageUrl, identifyResult.SearchProviderName); - resultHtml = '
' + displayType + '
'; - var attributes = []; + const displayType = globalize.translate(`MediaInfoStreamType${stream.Type}`); + html += `${displayType}
`; + 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 '' + label + '' + value + ''; + return `${label}${value}`; } - 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,35 @@ 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 import('text!./itemMediaInfo.template.html').then(({default: template}) => { + return new Promise((resolve, reject) => { + loadMediaInfo(itemId, serverId, template).then(resolve, reject); }); }); } - return { - show: showMediaInfo - }; -}); +/* eslint-enable indent */ +export default { + show: show +}; diff --git a/src/components/itemidentifier/itemidentifier.js b/src/components/itemidentifier/itemidentifier.js index b335d1dfd3..6f638dc271 100644 --- a/src/components/itemidentifier/itemidentifier.js +++ b/src/components/itemidentifier/itemidentifier.js @@ -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(''); + let resultHtml = lines.join('
'); if (identifyResult.ImageUrl) { - var displayUrl = getSearchImageDisplayUrl(identifyResult.ImageUrl, identifyResult.SearchProviderName); + const displayUrl = getSearchImageDisplayUrl(identifyResult.ImageUrl, identifyResult.SearchProviderName); - resultHtml = '
' + resultHtml + '
';
+ resultHtml = `${resultHtml}
`;
}
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 += '