diff --git a/package.json b/package.json
index 91d070e04d..c3cc490761 100644
--- a/package.json
+++ b/package.json
@@ -96,6 +96,7 @@
"src/components/cardbuilder/cardBuilder.js",
"src/components/cardbuilder/chaptercardbuilder.js",
"src/components/cardbuilder/peoplecardbuilder.js",
+ "src/components/collectionEditor/collectionEditor.js",
"src/components/images/imageLoader.js",
"src/components/indicators/indicators.js",
"src/components/lazyLoader/lazyLoaderIntersectionObserver.js",
@@ -108,6 +109,7 @@
"src/components/playback/playmethodhelper.js",
"src/components/playback/remotecontrolautoplay.js",
"src/components/playback/volumeosd.js",
+ "src/components/playlisteditor/playlisteditor.js",
"src/components/playmenu.js",
"src/components/sanatizefilename.js",
"src/components/scrollManager.js",
diff --git a/src/components/collectionEditor/collectionEditor.js b/src/components/collectionEditor/collectionEditor.js
index 46b0640305..a6bdc51eeb 100644
--- a/src/components/collectionEditor/collectionEditor.js
+++ b/src/components/collectionEditor/collectionEditor.js
@@ -1,16 +1,32 @@
-define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectionManager', 'appRouter', 'globalize', 'emby-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button', 'flexStyles'], function (dom, dialogHelper, loading, appHost, layoutManager, connectionManager, appRouter, globalize) {
- 'use strict';
+import dom from 'dom';
+import dialogHelper from 'dialogHelper';
+import loading from 'loading';
+import appHost from 'apphost';
+import layoutManager from 'layoutManager';
+import connectionManager from 'connectionManager';
+import appRouter from 'appRouter';
+import globalize from 'globalize';
+import 'emby-checkbox';
+import 'emby-input';
+import 'paper-icon-button-light';
+import 'emby-select';
+import 'material-icons';
+import 'css!./../formdialog';
+import 'emby-button';
+import 'flexStyles';
- var currentServerId;
+/* eslint-disable indent */
+
+ let currentServerId;
function onSubmit(e) {
loading.show();
- var panel = dom.parentWithClass(this, 'dialog');
+ const panel = dom.parentWithClass(this, 'dialog');
- var collectionId = panel.querySelector('#selectCollectionToAddTo').value;
+ const collectionId = panel.querySelector('#selectCollectionToAddTo').value;
- var apiClient = connectionManager.getApiClient(currentServerId);
+ const apiClient = connectionManager.getApiClient(currentServerId);
if (collectionId) {
addToCollection(apiClient, panel, collectionId);
@@ -24,7 +40,7 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
function createCollection(apiClient, dlg) {
- var url = apiClient.getUrl('Collections', {
+ const url = apiClient.getUrl('Collections', {
Name: dlg.querySelector('#txtNewCollectionName').value,
IsLocked: !dlg.querySelector('#chkEnableInternetMetadata').checked,
@@ -36,11 +52,11 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
url: url,
dataType: 'json'
- }).then(function (result) {
+ }).then(result => {
loading.hide();
- var id = result.Id;
+ const id = result.Id;
dlg.submitted = true;
dialogHelper.close(dlg);
@@ -56,7 +72,7 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
function addToCollection(apiClient, dlg, id) {
- var url = apiClient.getUrl('Collections/' + id + '/Items', {
+ const url = apiClient.getUrl(`Collections/${id}/Items`, {
Ids: dlg.querySelector('.fldSelectedItemIds').value || ''
});
@@ -65,14 +81,14 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
type: 'POST',
url: url
- }).then(function () {
+ }).then(() => {
loading.hide();
dlg.submitted = true;
dialogHelper.close(dlg);
- require(['toast'], function (toast) {
+ import('toast').then(({default: toast}) => {
toast(globalize.translate('MessageItemsAdded'));
});
});
@@ -86,11 +102,11 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
loading.show();
- var select = panel.querySelector('#selectCollectionToAddTo');
+ const select = panel.querySelector('#selectCollectionToAddTo');
panel.querySelector('.newCollectionInfo').classList.add('hide');
- var options = {
+ const options = {
Recursive: true,
IncludeItemTypes: 'BoxSet',
@@ -98,16 +114,16 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
EnableTotalRecordCount: false
};
- var apiClient = connectionManager.getApiClient(currentServerId);
- apiClient.getItems(apiClient.getCurrentUserId(), options).then(function (result) {
+ const apiClient = connectionManager.getApiClient(currentServerId);
+ apiClient.getItems(apiClient.getCurrentUserId(), options).then(result => {
- var html = '';
+ let html = '';
- html += '';
+ html += ``;
- html += result.Items.map(function (i) {
+ html += result.Items.map(i => {
- return '';
+ return ``;
});
select.innerHTML = html;
@@ -120,7 +136,7 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
function getEditorHtml() {
- var html = '';
+ let html = '';
html += '
';
html += '
';
@@ -134,27 +150,27 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
html += '
';
html += '
';
html += '
';
- html += '';
+ html += ``;
html += '
';
html += '
';
html += '
';
html += '
';
html += '
';
// newCollectionInfo
html += '
';
html += '';
html += '
';
@@ -188,7 +204,7 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
} else {
content.querySelector('.fldSelectCollection').classList.add('hide');
- var selectCollectionToAddTo = content.querySelector('#selectCollectionToAddTo');
+ const selectCollectionToAddTo = content.querySelector('#selectCollectionToAddTo');
selectCollectionToAddTo.innerHTML = '';
selectCollectionToAddTo.value = '';
triggerChange(selectCollectionToAddTo);
@@ -196,79 +212,77 @@ define(['dom', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'connectio
}
function centerFocus(elem, horiz, on) {
- require(['scrollHelper'], function (scrollHelper) {
- var fn = on ? 'on' : 'off';
+ import('scrollHelper').then(scrollHelper => {
+ const fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz);
});
}
- function CollectionEditor() {
+ class CollectionEditor {
+ show(options) {
- }
+ const items = options.items || {};
+ currentServerId = options.serverId;
- CollectionEditor.prototype.show = function (options) {
-
- var items = options.items || {};
- currentServerId = options.serverId;
-
- var dialogOptions = {
- removeOnClose: true,
- scrollY: false
- };
-
- if (layoutManager.tv) {
- dialogOptions.size = 'fullscreen';
- } else {
- dialogOptions.size = 'small';
- }
-
- var dlg = dialogHelper.createDialog(dialogOptions);
-
- dlg.classList.add('formDialog');
-
- var html = '';
- var title = items.length ? globalize.translate('HeaderAddToCollection') : globalize.translate('NewCollection');
-
- html += '';
-
- html += getEditorHtml();
-
- dlg.innerHTML = html;
-
- initEditor(dlg, items);
-
- dlg.querySelector('.btnCancel').addEventListener('click', function () {
-
- dialogHelper.close(dlg);
- });
-
- if (layoutManager.tv) {
- centerFocus(dlg.querySelector('.formDialogContent'), false, true);
- }
-
- return dialogHelper.open(dlg).then(function () {
+ const dialogOptions = {
+ removeOnClose: true,
+ scrollY: false
+ };
if (layoutManager.tv) {
- centerFocus(dlg.querySelector('.formDialogContent'), false, false);
+ dialogOptions.size = 'fullscreen';
+ } else {
+ dialogOptions.size = 'small';
}
- if (dlg.submitted) {
- return Promise.resolve();
+ const dlg = dialogHelper.createDialog(dialogOptions);
+
+ dlg.classList.add('formDialog');
+
+ let html = '';
+ const title = items.length ? globalize.translate('HeaderAddToCollection') : globalize.translate('NewCollection');
+
+ html += '';
- return CollectionEditor;
-});
+ html += getEditorHtml();
+
+ dlg.innerHTML = html;
+
+ initEditor(dlg, items);
+
+ dlg.querySelector('.btnCancel').addEventListener('click', () => {
+
+ dialogHelper.close(dlg);
+ });
+
+ if (layoutManager.tv) {
+ centerFocus(dlg.querySelector('.formDialogContent'), false, true);
+ }
+
+ return dialogHelper.open(dlg).then(() => {
+
+ if (layoutManager.tv) {
+ centerFocus(dlg.querySelector('.formDialogContent'), false, false);
+ }
+
+ if (dlg.submitted) {
+ return Promise.resolve();
+ }
+
+ return Promise.reject();
+ });
+ }
+ }
+
+/* eslint-enable indent */
+export default CollectionEditor;
diff --git a/src/components/itemContextMenu.js b/src/components/itemContextMenu.js
index f258f5fe4b..e969721d64 100644
--- a/src/components/itemContextMenu.js
+++ b/src/components/itemContextMenu.js
@@ -319,7 +319,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
switch (id) {
case 'addtocollection':
require(['collectionEditor'], function (collectionEditor) {
- new collectionEditor().show({
+ new collectionEditor.default().show({
items: [itemId],
serverId: serverId
}).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
@@ -327,7 +327,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
break;
case 'addtoplaylist':
require(['playlistEditor'], function (playlistEditor) {
- new playlistEditor().show({
+ new playlistEditor.default().show({
items: [itemId],
serverId: serverId
}).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
diff --git a/src/components/multiSelect/multiSelect.js b/src/components/multiSelect/multiSelect.js
index 83982413ae..4919b9dd34 100644
--- a/src/components/multiSelect/multiSelect.js
+++ b/src/components/multiSelect/multiSelect.js
@@ -255,7 +255,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
switch (id) {
case 'addtocollection':
require(['collectionEditor'], function (collectionEditor) {
- new collectionEditor().show({
+ new collectionEditor.default().show({
items: items,
serverId: serverId
});
@@ -265,7 +265,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo
break;
case 'playlist':
require(['playlistEditor'], function (playlistEditor) {
- new playlistEditor().show({
+ new playlistEditor.default().show({
items: items,
serverId: serverId
});
diff --git a/src/components/playlisteditor/playlisteditor.js b/src/components/playlisteditor/playlisteditor.js
index 56d7142ad3..12aa54f306 100644
--- a/src/components/playlisteditor/playlisteditor.js
+++ b/src/components/playlisteditor/playlisteditor.js
@@ -1,13 +1,28 @@
-define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackManager', 'connectionManager', 'userSettings', 'appRouter', 'globalize', 'emby-input', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button'], function (dom, shell, dialogHelper, loading, layoutManager, playbackManager, connectionManager, userSettings, appRouter, globalize) {
- 'use strict';
+import dom from 'dom';
+import dialogHelper from 'dialogHelper';
+import loading from 'loading';
+import layoutManager from 'layoutManager';
+import playbackManager from 'playbackManager';
+import connectionManager from 'connectionManager';
+import userSettings from 'userSettings';
+import appRouter from 'appRouter';
+import globalize from 'globalize';
+import 'emby-input';
+import 'paper-icon-button-light';
+import 'emby-select';
+import 'material-icons';
+import 'css!./../formdialog';
+import 'emby-button';
- var currentServerId;
+/* eslint-disable indent */
+
+ let currentServerId;
function onSubmit(e) {
- var panel = dom.parentWithClass(this, 'dialog');
+ const panel = dom.parentWithClass(this, 'dialog');
- var playlistId = panel.querySelector('#selectPlaylistToAddTo').value;
- var apiClient = connectionManager.getApiClient(currentServerId);
+ const playlistId = panel.querySelector('#selectPlaylistToAddTo').value;
+ const apiClient = connectionManager.getApiClient(currentServerId);
if (playlistId) {
userSettings.set('playlisteditor-lastplaylistid', playlistId);
@@ -23,7 +38,7 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackMan
function createPlaylist(apiClient, dlg) {
loading.show();
- var url = apiClient.getUrl('Playlists', {
+ const url = apiClient.getUrl('Playlists', {
Name: dlg.querySelector('#txtNewPlaylistName').value,
Ids: dlg.querySelector('.fldSelectedItemIds').value || '',
userId: apiClient.getCurrentUserId()
@@ -34,10 +49,10 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackMan
type: 'POST',
url: url,
dataType: 'json'
- }).then(function (result) {
+ }).then(result => {
loading.hide();
- var id = result.Id;
+ const id = result.Id;
dlg.submitted = true;
dialogHelper.close(dlg);
redirectToPlaylist(apiClient, id);
@@ -49,7 +64,7 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackMan
}
function addToPlaylist(apiClient, dlg, id) {
- var itemIds = dlg.querySelector('.fldSelectedItemIds').value || '';
+ const itemIds = dlg.querySelector('.fldSelectedItemIds').value || '';
if (id === 'queue') {
playbackManager.queue({
@@ -63,7 +78,7 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackMan
loading.show();
- var url = apiClient.getUrl('Playlists/' + id + '/Items', {
+ const url = apiClient.getUrl(`Playlists/${id}/Items`, {
Ids: itemIds,
userId: apiClient.getCurrentUserId()
});
@@ -72,7 +87,7 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackMan
type: 'POST',
url: url
- }).then(function () {
+ }).then(() => {
loading.hide();
dlg.submitted = true;
@@ -85,36 +100,36 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackMan
}
function populatePlaylists(editorOptions, panel) {
- var select = panel.querySelector('#selectPlaylistToAddTo');
+ const select = panel.querySelector('#selectPlaylistToAddTo');
loading.hide();
panel.querySelector('.newPlaylistInfo').classList.add('hide');
- var options = {
+ const options = {
Recursive: true,
IncludeItemTypes: 'Playlist',
SortBy: 'SortName',
EnableTotalRecordCount: false
};
- var apiClient = connectionManager.getApiClient(currentServerId);
- apiClient.getItems(apiClient.getCurrentUserId(), options).then(function (result) {
- var html = '';
+ const apiClient = connectionManager.getApiClient(currentServerId);
+ apiClient.getItems(apiClient.getCurrentUserId(), options).then(result => {
+ let html = '';
if (editorOptions.enableAddToPlayQueue !== false && playbackManager.isPlaying()) {
- html += '
';
+ html += `
`;
}
- html += '
';
+ html += `
`;
- html += result.Items.map(function (i) {
- return '
';
+ html += result.Items.map(i => {
+ return `
`;
});
select.innerHTML = html;
- var defaultValue = editorOptions.defaultValue;
+ let defaultValue = editorOptions.defaultValue;
if (!defaultValue) {
defaultValue = userSettings.get('playlisteditor-lastplaylistid') || '';
}
@@ -132,29 +147,29 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'playbackMan
}
function getEditorHtml(items) {
- var html = '';
+ let html = '';
html += '