diff --git a/package.json b/package.json
index d9b2ed761..117477a70 100644
--- a/package.json
+++ b/package.json
@@ -96,6 +96,8 @@
"src/components/images/imageLoader.js",
"src/components/indicators/indicators.js",
"src/components/lazyLoader/lazyLoaderIntersectionObserver.js",
+ "src/components/mediaLibraryCreator/mediaLibraryCreator.js",
+ "src/components/mediaLibraryEditor/mediaLibraryEditor.js",
"src/components/playback/brightnessosd.js",
"src/components/playback/mediasession.js",
"src/components/playback/nowplayinghelper.js",
diff --git a/src/components/mediaLibraryCreator/mediaLibraryCreator.js b/src/components/mediaLibraryCreator/mediaLibraryCreator.js
index bbef6e1f0..c7011ba1d 100644
--- a/src/components/mediaLibraryCreator/mediaLibraryCreator.js
+++ b/src/components/mediaLibraryCreator/mediaLibraryCreator.js
@@ -1,5 +1,24 @@
-define(['loading', 'dialogHelper', 'dom', 'jQuery', 'components/libraryoptionseditor/libraryoptionseditor', 'globalize', 'emby-toggle', 'emby-input', 'emby-select', 'paper-icon-button-light', 'listViewStyle', 'formDialogStyle', 'emby-button', 'flexStyles'], function (loading, dialogHelper, dom, $, libraryoptionseditor, globalize) {
- 'use strict';
+/* eslint-disable indent */
+
+/**
+ * Module for media library creator.
+ * @module components/mediaLibraryCreator/mediaLibraryCreator
+ */
+
+import loading from 'loading';
+import dialogHelper from 'dialogHelper';
+import dom from 'dom';
+import $ from 'jQuery';
+import libraryoptionseditor from 'components/libraryoptionseditor/libraryoptionseditor';
+import globalize from 'globalize';
+import 'emby-toggle';
+import 'emby-input';
+import 'emby-select';
+import 'paper-icon-button-light';
+import 'listViewStyle';
+import 'formDialogStyle';
+import 'emby-button';
+import 'flexStyles';
function onAddLibrary() {
if (isCreating) {
@@ -7,7 +26,7 @@ define(['loading', 'dialogHelper', 'dom', 'jQuery', 'components/libraryoptionsed
}
if (pathInfos.length == 0) {
- require(['alert'], function (alert) {
+ import('alert').then(({default: alert}) => {
alert({
text: globalize.translate('PleaseAddAtLeastOneFolder'),
type: 'error'
@@ -19,23 +38,23 @@ define(['loading', 'dialogHelper', 'dom', 'jQuery', 'components/libraryoptionsed
isCreating = true;
loading.show();
- var dlg = dom.parentWithClass(this, 'dlg-librarycreator');
- var name = $('#txtValue', dlg).val();
- var type = $('#selectCollectionType', dlg).val();
+ const dlg = dom.parentWithClass(this, 'dlg-librarycreator');
+ const name = $('#txtValue', dlg).val();
+ let type = $('#selectCollectionType', dlg).val();
if (type == 'mixed') {
type = null;
}
- var libraryOptions = libraryoptionseditor.getLibraryOptions(dlg.querySelector('.libraryOptions'));
+ const libraryOptions = libraryoptionseditor.getLibraryOptions(dlg.querySelector('.libraryOptions'));
libraryOptions.PathInfos = pathInfos;
- ApiClient.addVirtualFolder(name, type, currentOptions.refresh, libraryOptions).then(function () {
+ ApiClient.addVirtualFolder(name, type, currentOptions.refresh, libraryOptions).then(() => {
hasChanges = true;
isCreating = false;
loading.hide();
dialogHelper.close(dlg);
- }, function () {
- require(['toast'], function (toast) {
+ }, () => {
+ import('toast').then(({default: toast}) => {
toast(globalize.translate('ErrorAddingMediaPathToVirtualFolder'));
});
@@ -46,15 +65,15 @@ define(['loading', 'dialogHelper', 'dom', 'jQuery', 'components/libraryoptionsed
}
function getCollectionTypeOptionsHtml(collectionTypeOptions) {
- return collectionTypeOptions.map(function (i) {
- return '';
+ return collectionTypeOptions.map(i => {
+ return ``;
}).join('');
}
function initEditor(page, collectionTypeOptions) {
$('#selectCollectionType', page).html(getCollectionTypeOptionsHtml(collectionTypeOptions)).val('').on('change', function () {
- var value = this.value;
- var dlg = $(this).parents('.dialog')[0];
+ const value = this.value;
+ const dlg = $(this).parents('.dialog')[0];
libraryoptionseditor.setContentType(dlg.querySelector('.libraryOptions'), value == 'mixed' ? '' : value);
if (value) {
@@ -64,12 +83,12 @@ define(['loading', 'dialogHelper', 'dom', 'jQuery', 'components/libraryoptionsed
}
if (value != 'mixed') {
- var index = this.selectedIndex;
+ const index = this.selectedIndex;
if (index != -1) {
- var name = this.options[index].innerHTML.replace('*', '').replace('&', '&');
+ const name = this.options[index].innerHTML.replace('*', '').replace('&', '&');
$('#txtValue', dlg).val(name);
- var folderOption = collectionTypeOptions.filter(function (i) {
+ const folderOption = collectionTypeOptions.filter(i => {
return i.value == value;
})[0];
$('.collectionTypeFieldDescription', dlg).html(folderOption.message || '');
@@ -83,15 +102,15 @@ define(['loading', 'dialogHelper', 'dom', 'jQuery', 'components/libraryoptionsed
}
function onToggleAdvancedChange() {
- var dlg = dom.parentWithClass(this, 'dlg-librarycreator');
+ const dlg = dom.parentWithClass(this, 'dlg-librarycreator');
libraryoptionseditor.setAdvancedVisible(dlg.querySelector('.libraryOptions'), this.checked);
}
function onAddButtonClick() {
- var page = dom.parentWithClass(this, 'dlg-librarycreator');
+ const page = dom.parentWithClass(this, 'dlg-librarycreator');
- require(['directorybrowser'], function (directoryBrowser) {
- var picker = new directoryBrowser();
+ import('directorybrowser').then(({default: directoryBrowser}) => {
+ const picker = new directoryBrowser();
picker.show({
enableNetworkSharePath: true,
callback: function (path, networkSharePath) {
@@ -106,24 +125,24 @@ define(['loading', 'dialogHelper', 'dom', 'jQuery', 'components/libraryoptionsed
}
function getFolderHtml(pathInfo, index) {
- var html = '';
+ let html = '';
html += '
';
- html += '
';
- html += '
' + pathInfo.Path + '
';
+ html += `
`;
+ html += `
${pathInfo.Path}
`;
if (pathInfo.NetworkPath) {
- html += '
' + pathInfo.NetworkPath + '
';
+ html += `
${pathInfo.NetworkPath}
`;
}
html += '
';
- html += '
';
+ html += `
`;
html += '
';
return html;
}
function renderPaths(page) {
- var foldersHtml = pathInfos.map(getFolderHtml).join('');
- var folderList = page.querySelector('.folderList');
+ const foldersHtml = pathInfos.map(getFolderHtml).join('');
+ const folderList = page.querySelector('.folderList');
folderList.innerHTML = foldersHtml;
if (foldersHtml) {
@@ -134,13 +153,13 @@ define(['loading', 'dialogHelper', 'dom', 'jQuery', 'components/libraryoptionsed
}
function addMediaLocation(page, path, networkSharePath) {
- var pathLower = path.toLowerCase();
- var pathFilter = pathInfos.filter(function (p) {
+ const pathLower = path.toLowerCase();
+ const pathFilter = pathInfos.filter(p => {
return p.Path.toLowerCase() == pathLower;
});
if (!pathFilter.length) {
- var pathInfo = {
+ const pathInfo = {
Path: path
};
@@ -154,11 +173,11 @@ define(['loading', 'dialogHelper', 'dom', 'jQuery', 'components/libraryoptionsed
}
function onRemoveClick(e) {
- var button = dom.parentWithClass(e.target, 'btnRemovePath');
- var index = parseInt(button.getAttribute('data-index'));
- var location = pathInfos[index].Path;
- var locationLower = location.toLowerCase();
- pathInfos = pathInfos.filter(function (p) {
+ const button = dom.parentWithClass(e.target, 'btnRemovePath');
+ const index = parseInt(button.getAttribute('data-index'));
+ const location = pathInfos[index].Path;
+ const locationLower = location.toLowerCase();
+ pathInfos = pathInfos.filter(p => {
return p.Path.toLowerCase() != locationLower;
});
renderPaths(dom.parentWithClass(button, 'dlg-librarycreator'));
@@ -169,24 +188,22 @@ define(['loading', 'dialogHelper', 'dom', 'jQuery', 'components/libraryoptionsed
}
function initLibraryOptions(dlg) {
- libraryoptionseditor.embed(dlg.querySelector('.libraryOptions')).then(function () {
+ libraryoptionseditor.embed(dlg.querySelector('.libraryOptions')).then(() => {
$('#selectCollectionType', dlg).trigger('change');
onToggleAdvancedChange.call(dlg.querySelector('.chkAdvanced'));
});
}
- function editor() {
- this.show = function (options) {
- return new Promise(function (resolve, reject) {
+export class editor {
+ constructor() {
+ this.show = options => {
+ return new Promise((resolve) => {
currentOptions = options;
currentResolve = resolve;
hasChanges = false;
- var xhr = new XMLHttpRequest();
- xhr.open('GET', 'components/mediaLibraryCreator/mediaLibraryCreator.template.html', true);
-
- xhr.onload = function (e) {
- var template = this.response;
- var dlg = dialogHelper.createDialog({
+ // TODO: remove require
+ require(['text!./components/mediaLibraryCreator/mediaLibraryCreator.template.html'], template => {
+ const dlg = dialogHelper.createDialog({
size: 'small',
modal: false,
removeOnClose: true,
@@ -200,23 +217,23 @@ define(['loading', 'dialogHelper', 'dom', 'jQuery', 'components/libraryoptionsed
initEditor(dlg, options.collectionTypeOptions);
dlg.addEventListener('close', onDialogClosed);
dialogHelper.open(dlg);
- dlg.querySelector('.btnCancel').addEventListener('click', function () {
+ dlg.querySelector('.btnCancel').addEventListener('click', () => {
dialogHelper.close(dlg);
});
pathInfos = [];
renderPaths(dlg);
initLibraryOptions(dlg);
- };
-
- xhr.send();
+ });
});
};
}
+}
- var pathInfos = [];
- var currentResolve;
- var currentOptions;
- var hasChanges = false;
- var isCreating = false;
- return editor;
-});
+ let pathInfos = [];
+ let currentResolve;
+ let currentOptions;
+ let hasChanges = false;
+ let isCreating = false;
+
+/* eslint-enable indent */
+export default editor;
diff --git a/src/components/mediaLibraryEditor/mediaLibraryEditor.js b/src/components/mediaLibraryEditor/mediaLibraryEditor.js
index 554cf4cc0..5b533b2ac 100644
--- a/src/components/mediaLibraryEditor/mediaLibraryEditor.js
+++ b/src/components/mediaLibraryEditor/mediaLibraryEditor.js
@@ -1,5 +1,22 @@
-define(['jQuery', 'loading', 'dialogHelper', 'dom', 'components/libraryoptionseditor/libraryoptionseditor', 'globalize', 'emby-button', 'listViewStyle', 'paper-icon-button-light', 'formDialogStyle', 'emby-toggle', 'flexStyles'], function (jQuery, loading, dialogHelper, dom, libraryoptionseditor, globalize) {
- 'use strict';
+/* eslint-disable indent */
+
+/**
+ * Module for media library editor.
+ * @module components/mediaLibraryEditor/mediaLibraryEditor
+ */
+
+import jQuery from 'jQuery';
+import loading from 'loading';
+import dialogHelper from 'dialogHelper';
+import dom from 'dom';
+import libraryoptionseditor from 'components/libraryoptionseditor/libraryoptionseditor';
+import globalize from 'globalize';
+import 'emby-button';
+import 'listViewStyle';
+import 'paper-icon-button-light';
+import 'formDialogStyle';
+import 'emby-toggle';
+import 'flexStyles';
function onEditLibrary() {
if (isCreating) {
@@ -8,15 +25,15 @@ define(['jQuery', 'loading', 'dialogHelper', 'dom', 'components/libraryoptionsed
isCreating = true;
loading.show();
- var dlg = dom.parentWithClass(this, 'dlg-libraryeditor');
- var libraryOptions = libraryoptionseditor.getLibraryOptions(dlg.querySelector('.libraryOptions'));
+ const dlg = dom.parentWithClass(this, 'dlg-libraryeditor');
+ let libraryOptions = libraryoptionseditor.getLibraryOptions(dlg.querySelector('.libraryOptions'));
libraryOptions = Object.assign(currentOptions.library.LibraryOptions || {}, libraryOptions);
- ApiClient.updateVirtualFolderOptions(currentOptions.library.ItemId, libraryOptions).then(function () {
+ ApiClient.updateVirtualFolderOptions(currentOptions.library.ItemId, libraryOptions).then(() => {
hasChanges = true;
isCreating = false;
loading.hide();
dialogHelper.close(dlg);
- }, function () {
+ }, () => {
isCreating = false;
loading.hide();
});
@@ -24,50 +41,50 @@ define(['jQuery', 'loading', 'dialogHelper', 'dom', 'components/libraryoptionsed
}
function addMediaLocation(page, path, networkSharePath) {
- var virtualFolder = currentOptions.library;
- var refreshAfterChange = currentOptions.refresh;
- ApiClient.addMediaPath(virtualFolder.Name, path, networkSharePath, refreshAfterChange).then(function () {
+ const virtualFolder = currentOptions.library;
+ const refreshAfterChange = currentOptions.refresh;
+ ApiClient.addMediaPath(virtualFolder.Name, path, networkSharePath, refreshAfterChange).then(() => {
hasChanges = true;
refreshLibraryFromServer(page);
- }, function () {
- require(['toast'], function (toast) {
+ }, () => {
+ import('toast').then(({default: toast}) => {
toast(globalize.translate('ErrorAddingMediaPathToVirtualFolder'));
});
});
}
function updateMediaLocation(page, path, networkSharePath) {
- var virtualFolder = currentOptions.library;
+ const virtualFolder = currentOptions.library;
ApiClient.updateMediaPath(virtualFolder.Name, {
Path: path,
NetworkPath: networkSharePath
- }).then(function () {
+ }).then(() => {
hasChanges = true;
refreshLibraryFromServer(page);
- }, function () {
- require(['toast'], function (toast) {
+ }, () => {
+ import('toast').then(({default: toast}) => {
toast(globalize.translate('ErrorAddingMediaPathToVirtualFolder'));
});
});
}
function onRemoveClick(btnRemovePath, location) {
- var button = btnRemovePath;
- var virtualFolder = currentOptions.library;
+ const button = btnRemovePath;
+ const virtualFolder = currentOptions.library;
- require(['confirm'], function (confirm) {
+ import('confirm').then(({default: confirm}) => {
confirm({
title: globalize.translate('HeaderRemoveMediaLocation'),
text: globalize.translate('MessageConfirmRemoveMediaLocation'),
confirmText: globalize.translate('ButtonDelete'),
primary: 'delete'
- }).then(function () {
- var refreshAfterChange = currentOptions.refresh;
- ApiClient.removeMediaPath(virtualFolder.Name, location, refreshAfterChange).then(function () {
+ }).then(() => {
+ const refreshAfterChange = currentOptions.refresh;
+ ApiClient.removeMediaPath(virtualFolder.Name, location, refreshAfterChange).then(() => {
hasChanges = true;
refreshLibraryFromServer(dom.parentWithClass(button, 'dlg-libraryeditor'));
- }, function () {
- require(['toast'], function (toast) {
+ }, () => {
+ import('toast').then(({default: toast}) => {
toast(globalize.translate('DefaultErrorMessage'));
});
});
@@ -76,14 +93,14 @@ define(['jQuery', 'loading', 'dialogHelper', 'dom', 'components/libraryoptionsed
}
function onListItemClick(e) {
- var listItem = dom.parentWithClass(e.target, 'listItem');
+ const listItem = dom.parentWithClass(e.target, 'listItem');
if (listItem) {
- var index = parseInt(listItem.getAttribute('data-index'));
- var pathInfos = (currentOptions.library.LibraryOptions || {}).PathInfos || [];
- var pathInfo = null == index ? {} : pathInfos[index] || {};
- var originalPath = pathInfo.Path || (null == index ? null : currentOptions.library.Locations[index]);
- var btnRemovePath = dom.parentWithClass(e.target, 'btnRemovePath');
+ const index = parseInt(listItem.getAttribute('data-index'));
+ const pathInfos = (currentOptions.library.LibraryOptions || {}).PathInfos || [];
+ const pathInfo = null == index ? {} : pathInfos[index] || {};
+ const originalPath = pathInfo.Path || (null == index ? null : currentOptions.library.Locations[index]);
+ const btnRemovePath = dom.parentWithClass(e.target, 'btnRemovePath');
if (btnRemovePath) {
onRemoveClick(btnRemovePath, originalPath);
@@ -95,26 +112,26 @@ define(['jQuery', 'loading', 'dialogHelper', 'dom', 'components/libraryoptionsed
}
function getFolderHtml(pathInfo, index) {
- var html = '';
- html += '
';
- html += '
';
+ let html = '';
+ html += `
`;
+ html += `
`;
html += '
';
html += pathInfo.Path;
html += '
';
if (pathInfo.NetworkPath) {
- html += '
' + pathInfo.NetworkPath + '
';
+ html += `
${pathInfo.NetworkPath}
`;
}
html += '
';
- html += '
';
+ html += `
`;
html += '
';
return html;
}
function refreshLibraryFromServer(page) {
- ApiClient.getVirtualFolders().then(function (result) {
- var library = result.filter(function (f) {
+ ApiClient.getVirtualFolders().then(result => {
+ const library = result.filter(f => {
return f.Name === currentOptions.library.Name;
})[0];
@@ -126,10 +143,10 @@ define(['jQuery', 'loading', 'dialogHelper', 'dom', 'components/libraryoptionsed
}
function renderLibrary(page, options) {
- var pathInfos = (options.library.LibraryOptions || {}).PathInfos || [];
+ let pathInfos = (options.library.LibraryOptions || {}).PathInfos || [];
if (!pathInfos.length) {
- pathInfos = options.library.Locations.map(function (p) {
+ pathInfos = options.library.Locations.map(p => {
return {
Path: p
};
@@ -150,8 +167,8 @@ define(['jQuery', 'loading', 'dialogHelper', 'dom', 'components/libraryoptionsed
}
function showDirectoryBrowser(context, originalPath, networkPath) {
- require(['directorybrowser'], function (directoryBrowser) {
- var picker = new directoryBrowser();
+ import('directorybrowser').then(({default: directoryBrowser}) => {
+ const picker = new directoryBrowser();
picker.show({
enableNetworkSharePath: true,
pathReadOnly: null != originalPath,
@@ -173,7 +190,7 @@ define(['jQuery', 'loading', 'dialogHelper', 'dom', 'components/libraryoptionsed
}
function onToggleAdvancedChange() {
- var dlg = dom.parentWithClass(this, 'dlg-libraryeditor');
+ const dlg = dom.parentWithClass(this, 'dlg-libraryeditor');
libraryoptionseditor.setAdvancedVisible(dlg.querySelector('.libraryOptions'), this.checked);
}
@@ -183,7 +200,7 @@ define(['jQuery', 'loading', 'dialogHelper', 'dom', 'components/libraryoptionsed
dlg.querySelector('.folderList').addEventListener('click', onListItemClick);
dlg.querySelector('.chkAdvanced').addEventListener('change', onToggleAdvancedChange);
dlg.querySelector('.btnSubmit').addEventListener('click', onEditLibrary);
- libraryoptionseditor.embed(dlg.querySelector('.libraryOptions'), options.library.CollectionType, options.library.LibraryOptions).then(function () {
+ libraryoptionseditor.embed(dlg.querySelector('.libraryOptions'), options.library.CollectionType, options.library.LibraryOptions).then(() => {
onToggleAdvancedChange.call(dlg.querySelector('.chkAdvanced'));
});
}
@@ -192,18 +209,16 @@ define(['jQuery', 'loading', 'dialogHelper', 'dom', 'components/libraryoptionsed
currentDeferred.resolveWith(null, [hasChanges]);
}
- function editor() {
- this.show = function (options) {
- var deferred = jQuery.Deferred();
+export class editor {
+ constructor() {
+ this.show = options => {
+ const deferred = jQuery.Deferred();
currentOptions = options;
currentDeferred = deferred;
hasChanges = false;
- var xhr = new XMLHttpRequest();
- xhr.open('GET', 'components/mediaLibraryEditor/mediaLibraryEditor.template.html', true);
-
- xhr.onload = function (e) {
- var template = this.response;
- var dlg = dialogHelper.createDialog({
+ // TODO: remove require
+ require(['text!./components/mediaLibraryEditor/mediaLibraryEditor.template.html'], template => {
+ const dlg = dialogHelper.createDialog({
size: 'small',
modal: false,
removeOnClose: true,
@@ -218,20 +233,20 @@ define(['jQuery', 'loading', 'dialogHelper', 'dom', 'components/libraryoptionsed
initEditor(dlg, options);
dlg.addEventListener('close', onDialogClosed);
dialogHelper.open(dlg);
- dlg.querySelector('.btnCancel').addEventListener('click', function () {
+ dlg.querySelector('.btnCancel').addEventListener('click', () => {
dialogHelper.close(dlg);
});
refreshLibraryFromServer(dlg);
- };
-
- xhr.send();
+ });
return deferred.promise();
};
}
+}
- var currentDeferred;
- var currentOptions;
- var hasChanges = false;
- var isCreating = false;
- return editor;
-});
+ let currentDeferred;
+ let currentOptions;
+ let hasChanges = false;
+ let isCreating = false;
+
+ /* eslint-enable indent */
+export default editor;
diff --git a/src/controllers/dashboard/mediaLibrary.js b/src/controllers/dashboard/mediaLibrary.js
index 06eba37cb..ed6aabc8f 100644
--- a/src/controllers/dashboard/mediaLibrary.js
+++ b/src/controllers/dashboard/mediaLibrary.js
@@ -3,7 +3,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
function addVirtualFolder(page) {
require(['medialibrarycreator'], function (medialibrarycreator) {
- new medialibrarycreator().show({
+ new medialibrarycreator.default().show({
collectionTypeOptions: getCollectionTypeOptions().filter(function (f) {
return !f.hidden;
}),
@@ -18,7 +18,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl
function editVirtualFolder(page, virtualFolder) {
require(['medialibraryeditor'], function (medialibraryeditor) {
- new medialibraryeditor().show({
+ new medialibraryeditor.default().show({
refresh: shouldRefreshLibraryAfterChanges(page),
library: virtualFolder
}).then(function (hasChanges) {