From bb5d37f3e7d6e954b50274edd83f0f849985c33e Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Tue, 9 Jun 2020 22:37:34 +0300 Subject: [PATCH] Migration mediaLibraryEditor and mediaLibraryCreator to es6 --- package.json | 2 + .../mediaLibraryCreator.js | 131 +++++++++-------- .../mediaLibraryEditor/mediaLibraryEditor.js | 137 ++++++++++-------- src/controllers/dashboard/mediaLibrary.js | 4 +- 4 files changed, 154 insertions(+), 120 deletions(-) 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) {