From 999f27614081f687d500bafa87ad4803d5ebb0ee Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Thu, 18 Jun 2020 22:34:03 +0300 Subject: [PATCH 01/12] Migration multiSelect to ES6 modules --- package.json | 1 + src/components/multiSelect/multiSelect.js | 168 +++++++++--------- .../emby-itemscontainer.js | 2 +- 3 files changed, 90 insertions(+), 81 deletions(-) diff --git a/package.json b/package.json index 29aa2f82a..632030879 100644 --- a/package.json +++ b/package.json @@ -99,6 +99,7 @@ "src/components/images/imageLoader.js", "src/components/indicators/indicators.js", "src/components/lazyLoader/lazyLoaderIntersectionObserver.js", + "src/components/multiSelect/multiSelect.js", "src/components/playback/brightnessosd.js", "src/components/playback/mediasession.js", "src/components/playback/nowplayinghelper.js", diff --git a/src/components/multiSelect/multiSelect.js b/src/components/multiSelect/multiSelect.js index 83982413a..5c8a378b4 100644 --- a/src/components/multiSelect/multiSelect.js +++ b/src/components/multiSelect/multiSelect.js @@ -1,13 +1,20 @@ -define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'globalize', 'appRouter', 'dom', 'css!./multiSelect'], function (browser, appStorage, appHost, loading, connectionManager, globalize, appRouter, dom) { - 'use strict'; +import browser from 'browser'; +import appHost from 'apphost'; +import loading from 'loading'; +import connectionManager from 'connectionManager'; +import globalize from 'globalize'; +import dom from 'dom'; +import 'css!./multiSelect'; - var selectedItems = []; - var selectedElements = []; - var currentSelectionCommandsPanel; +/* eslint-disable indent */ + + let selectedItems = []; + let selectedElements = []; + let currentSelectionCommandsPanel; function hideSelections() { - var selectionCommandsPanel = currentSelectionCommandsPanel; + const selectionCommandsPanel = currentSelectionCommandsPanel; if (selectionCommandsPanel) { selectionCommandsPanel.parentNode.removeChild(selectionCommandsPanel); @@ -15,10 +22,10 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo selectedItems = []; selectedElements = []; - var elems = document.querySelectorAll('.itemSelectionPanel'); - for (var i = 0, length = elems.length; i < length; i++) { + const elems = document.querySelectorAll('.itemSelectionPanel'); + for (let i = 0, length = elems.length; i < length; i++) { - var parent = elems[i].parentNode; + const parent = elems[i].parentNode; parent.removeChild(elems[i]); parent.classList.remove('withMultiSelect'); } @@ -29,14 +36,14 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo // toggle the checkbox, if it wasn't clicked on if (!dom.parentWithClass(e.target, 'chkItemSelect')) { - var chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect'); + const chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect'); if (chkItemSelect) { if (chkItemSelect.classList.contains('checkedInitial')) { chkItemSelect.classList.remove('checkedInitial'); } else { - var newValue = !chkItemSelect.checked; + const newValue = !chkItemSelect.checked; chkItemSelect.checked = newValue; updateItemSelection(chkItemSelect, newValue); } @@ -50,11 +57,11 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo function updateItemSelection(chkItemSelect, selected) { - var id = dom.parentWithAttribute(chkItemSelect, 'data-id').getAttribute('data-id'); + const id = dom.parentWithAttribute(chkItemSelect, 'data-id').getAttribute('data-id'); if (selected) { - var current = selectedItems.filter(function (i) { + const current = selectedItems.filter(i => { return i === id; }); @@ -64,16 +71,16 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo } } else { - selectedItems = selectedItems.filter(function (i) { + selectedItems = selectedItems.filter(i => { return i !== id; }); - selectedElements = selectedElements.filter(function (i) { + selectedElements = selectedElements.filter(i => { return i !== chkItemSelect; }); } if (selectedItems.length) { - var itemSelectionCount = document.querySelector('.itemSelectionCount'); + const itemSelectionCount = document.querySelector('.itemSelectionCount'); if (itemSelectionCount) { itemSelectionCount.innerHTML = selectedItems.length; } @@ -88,33 +95,33 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo function showSelection(item, isChecked) { - var itemSelectionPanel = item.querySelector('.itemSelectionPanel'); + let itemSelectionPanel = item.querySelector('.itemSelectionPanel'); if (!itemSelectionPanel) { itemSelectionPanel = document.createElement('div'); itemSelectionPanel.classList.add('itemSelectionPanel'); - var parent = item.querySelector('.cardBox') || item.querySelector('.cardContent'); + const parent = item.querySelector('.cardBox') || item.querySelector('.cardContent'); parent.classList.add('withMultiSelect'); parent.appendChild(itemSelectionPanel); - var cssClass = 'chkItemSelect'; + let cssClass = 'chkItemSelect'; if (isChecked && !browser.firefox) { // In firefox, the initial tap hold doesnt' get treated as a click // In other browsers it does, so we need to make sure that initial click is ignored cssClass += ' checkedInitial'; } - var checkedAttribute = isChecked ? ' checked' : ''; - itemSelectionPanel.innerHTML = ''; - var chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect'); + const checkedAttribute = isChecked ? ' checked' : ''; + itemSelectionPanel.innerHTML = ``; + const chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect'); chkItemSelect.addEventListener('change', onSelectionChange); } } function showSelectionCommands() { - var selectionCommandsPanel = currentSelectionCommandsPanel; + let selectionCommandsPanel = currentSelectionCommandsPanel; if (!selectionCommandsPanel) { @@ -124,19 +131,19 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo document.body.appendChild(selectionCommandsPanel); currentSelectionCommandsPanel = selectionCommandsPanel; - var html = ''; + let html = ''; html += ''; html += '

'; const moreIcon = 'more_vert'; - html += ''; + html += ``; selectionCommandsPanel.innerHTML = html; selectionCommandsPanel.querySelector('.btnCloseSelectionPanel').addEventListener('click', hideSelections); - var btnSelectionPanelOptions = selectionCommandsPanel.querySelector('.btnSelectionPanelOptions'); + const btnSelectionPanelOptions = selectionCommandsPanel.querySelector('.btnSelectionPanelOptions'); dom.addEventListener(btnSelectionPanelOptions, 'click', showMenuForSelectedItems, { passive: true }); } @@ -144,9 +151,9 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo function alertText(options) { - return new Promise(function (resolve, reject) { + return new Promise((resolve, reject) => { - require(['alert'], function (alert) { + import('alert').then(({default: alert}) => { alert(options).then(resolve, resolve); }); }); @@ -154,24 +161,24 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo function deleteItems(apiClient, itemIds) { - return new Promise(function (resolve, reject) { + return new Promise((resolve, reject) => { - var msg = globalize.translate('ConfirmDeleteItem'); - var title = globalize.translate('HeaderDeleteItem'); + let msg = globalize.translate('ConfirmDeleteItem'); + let title = globalize.translate('HeaderDeleteItem'); if (itemIds.length > 1) { msg = globalize.translate('ConfirmDeleteItems'); title = globalize.translate('HeaderDeleteItems'); } - require(['confirm'], function (confirm) { + import('confirm').then(({default: confirm}) => { - confirm(msg, title).then(function () { - var promises = itemIds.map(function (itemId) { + confirm(msg, title).then(() => { + const promises = itemIds.map(itemId => { apiClient.deleteItem(itemId); }); - Promise.all(promises).then(resolve, function () { + Promise.all(promises).then(resolve, () => { alertText(globalize.translate('ErrorDeletingItem')).then(reject, reject); }); @@ -183,11 +190,11 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo function showMenuForSelectedItems(e) { - var apiClient = connectionManager.currentApiClient(); + const apiClient = connectionManager.currentApiClient(); - apiClient.getCurrentUser().then(function (user) { + apiClient.getCurrentUser().then(user => { - var menuItems = []; + const menuItems = []; menuItems.push({ name: globalize.translate('AddToCollection'), @@ -244,17 +251,17 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo icon: 'refresh' }); - require(['actionsheet'], function (actionsheet) { + import('actionsheet').then(({default: actionsheet}) => { actionsheet.show({ items: menuItems, positionTo: e.target, callback: function (id) { - var items = selectedItems.slice(0); - var serverId = apiClient.serverInfo().Id; + const items = selectedItems.slice(0); + const serverId = apiClient.serverInfo().Id; switch (id) { case 'addtocollection': - require(['collectionEditor'], function (collectionEditor) { + import('collectionEditor').then(({default: collectionEditor}) => { new collectionEditor().show({ items: items, serverId: serverId @@ -264,7 +271,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo dispatchNeedsRefresh(); break; case 'playlist': - require(['playlistEditor'], function (playlistEditor) { + import('playlistEditor').then(({default: playlistEditor}) => { new playlistEditor().show({ items: items, serverId: serverId @@ -282,21 +289,21 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo combineVersions(apiClient, items); break; case 'markplayed': - items.forEach(function (itemId) { + items.forEach(itemId => { apiClient.markPlayed(apiClient.getCurrentUserId(), itemId); }); hideSelections(); dispatchNeedsRefresh(); break; case 'markunplayed': - items.forEach(function (itemId) { + items.forEach(itemId => { apiClient.markUnplayed(apiClient.getCurrentUserId(), itemId); }); hideSelections(); dispatchNeedsRefresh(); break; case 'refresh': - require(['refreshDialog'], function (refreshDialog) { + import('refreshDialog').then(({default: refreshDialog}) => { new refreshDialog({ itemIds: items, serverId: serverId @@ -317,18 +324,18 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo function dispatchNeedsRefresh() { - var elems = []; + const elems = []; - [].forEach.call(selectedElements, function (i) { + [].forEach.call(selectedElements, i => { - var container = dom.parentWithAttribute(i, 'is', 'emby-itemscontainer'); + const container = dom.parentWithAttribute(i, 'is', 'emby-itemscontainer'); - if (container && elems.indexOf(container) === -1) { + if (container && !elems.includes(container)) { elems.push(container); } }); - for (var i = 0, length = elems.length; i < length; i++) { + for (let i = 0, length = elems.length; i < length; i++) { elems[i].notifyRefreshNeeded(true); } } @@ -337,7 +344,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo if (selection.length < 2) { - require(['alert'], function (alert) { + import('alert').then(({default: alert}) => { alert({ text: globalize.translate('PleaseSelectTwoItems') }); @@ -352,7 +359,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo type: 'POST', url: apiClient.getUrl('Videos/MergeVersions', { Ids: selection.join(',') }) - }).then(function () { + }).then(() => { loading.hide(); hideSelections(); @@ -362,9 +369,9 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo function showSelections(initialCard) { - require(['emby-checkbox'], function () { - var cards = document.querySelectorAll('.card'); - for (var i = 0, length = cards.length; i < length; i++) { + import('emby-checkbox').then(() => { + const cards = document.querySelectorAll('.card'); + for (let i = 0, length = cards.length; i < length; i++) { showSelection(cards[i], initialCard === cards[i]); } @@ -375,13 +382,13 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo function onContainerClick(e) { - var target = e.target; + const target = e.target; if (selectedItems.length) { - var card = dom.parentWithClass(target, 'card'); + const card = dom.parentWithClass(target, 'card'); if (card) { - var itemSelectionPanel = card.querySelector('.itemSelectionPanel'); + const itemSelectionPanel = card.querySelector('.itemSelectionPanel'); if (itemSelectionPanel) { return onItemSelectionPanelClick(e, itemSelectionPanel); } @@ -395,15 +402,15 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo document.addEventListener('viewbeforehide', hideSelections); - return function (options) { + export default function (options) { - var self = this; + const self = this; - var container = options.container; + const container = options.container; function onTapHold(e) { - var card = dom.parentWithClass(e.target, 'card'); + const card = dom.parentWithClass(e.target, 'card'); if (card) { @@ -423,13 +430,13 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo return e.changedTouches || e.targetTouches || e.touches; } - var touchTarget; - var touchStartTimeout; - var touchStartX; - var touchStartY; + let touchTarget; + let touchStartTimeout; + let touchStartX; + let touchStartY; function onTouchStart(e) { - var touch = getTouches(e)[0]; + const touch = getTouches(e)[0]; touchTarget = null; touchStartX = 0; touchStartY = 0; @@ -437,10 +444,10 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo if (touch) { touchStartX = touch.clientX; touchStartY = touch.clientY; - var element = touch.target; + const element = touch.target; if (element) { - var card = dom.parentWithClass(element, 'card'); + const card = dom.parentWithClass(element, 'card'); if (card) { @@ -459,13 +466,13 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo function onTouchMove(e) { if (touchTarget) { - var touch = getTouches(e)[0]; - var deltaX; - var deltaY; + const touch = getTouches(e)[0]; + let deltaX; + let deltaY; if (touch) { - var touchEndX = touch.clientX || 0; - var touchEndY = touch.clientY || 0; + const touchEndX = touch.clientX || 0; + const touchEndY = touch.clientY || 0; deltaX = Math.abs(touchEndX - (touchStartX || 0)); deltaY = Math.abs(touchEndY - (touchStartY || 0)); } else { @@ -509,7 +516,7 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo return; } - var card = dom.parentWithClass(touchTarget, 'card'); + const card = dom.parentWithClass(touchTarget, 'card'); touchTarget = null; if (card) { @@ -556,12 +563,12 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo self.onContainerClick = onContainerClick; - self.destroy = function () { + self.destroy = () => { container.removeEventListener('click', onContainerClick); container.removeEventListener('contextmenu', onTapHold); - var element = container; + const element = container; dom.removeEventListener(element, 'touchstart', onTouchStart, { passive: true @@ -586,5 +593,6 @@ define(['browser', 'appStorage', 'apphost', 'loading', 'connectionManager', 'glo passive: true }); }; - }; -}); + } + +/* eslint-enable indent */ diff --git a/src/elements/emby-itemscontainer/emby-itemscontainer.js b/src/elements/emby-itemscontainer/emby-itemscontainer.js index 5d3772ca9..593e50794 100644 --- a/src/elements/emby-itemscontainer/emby-itemscontainer.js +++ b/src/elements/emby-itemscontainer/emby-itemscontainer.js @@ -63,7 +63,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', var self = this; require(['multiSelect'], function (MultiSelect) { - self.multiSelect = new MultiSelect({ + self.multiSelect = new MultiSelect.default({ container: self, bindOnClick: false }); From 1b581077f23892635cfe3c78d0d0891dd261b14e Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Thu, 18 Jun 2020 22:41:43 +0300 Subject: [PATCH 02/12] Migration confirm to ES6 modules --- package.json | 1 + src/components/confirm/confirm.js | 25 +++++++++++-------- src/components/imageeditor/imageeditor.js | 2 +- .../recordingcreator/recordinghelper.js | 4 +-- .../subtitleeditor/subtitleeditor.js | 2 +- src/controllers/dashboard/apikeys.js | 2 +- src/controllers/dashboard/dashboard.js | 4 +-- src/controllers/dashboard/devices/devices.js | 2 +- src/controllers/dashboard/dlna/profiles.js | 2 +- src/controllers/dashboard/mediaLibrary.js | 2 +- src/controllers/dashboard/plugins/add.js | 2 +- .../dashboard/plugins/installed.js | 2 +- .../dashboard/scheduledtasks/scheduledtask.js | 2 +- .../dashboard/users/userpasswordpage.js | 4 +-- .../dashboard/users/userprofilespage.js | 2 +- src/controllers/itemDetails.js | 2 +- src/controllers/livetvstatus.js | 4 +-- src/controllers/user/profile.js | 2 +- 18 files changed, 36 insertions(+), 30 deletions(-) diff --git a/package.json b/package.json index 632030879..b3b529849 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/confirm/confirm.js", "src/components/images/imageLoader.js", "src/components/indicators/indicators.js", "src/components/lazyLoader/lazyLoaderIntersectionObserver.js", diff --git a/src/components/confirm/confirm.js b/src/components/confirm/confirm.js index 517d6fa9b..2d5cfdb55 100644 --- a/src/components/confirm/confirm.js +++ b/src/components/confirm/confirm.js @@ -1,5 +1,9 @@ -define(['browser', 'dialog', 'globalize'], function(browser, dialog, globalize) { - 'use strict'; +import browser from 'browser'; +import dialog from 'dialog'; +import globalize from 'globalize'; + +/* eslint-disable indent */ +export default (() => { function replaceAll(str, find, replace) { return str.split(find).join(replace); @@ -7,7 +11,7 @@ define(['browser', 'dialog', 'globalize'], function(browser, dialog, globalize) if (browser.tv && window.confirm) { // Use the native confirm dialog - return function (options) { + return options => { if (typeof options === 'string') { options = { title: '', @@ -15,8 +19,8 @@ define(['browser', 'dialog', 'globalize'], function(browser, dialog, globalize) }; } - var text = replaceAll(options.text || '', '
', '\n'); - var result = confirm(text); + const text = replaceAll(options.text || '', '
', '\n'); + const result = confirm(text); if (result) { return Promise.resolve(); @@ -26,8 +30,8 @@ define(['browser', 'dialog', 'globalize'], function(browser, dialog, globalize) }; } else { // Use our own dialog - return function (text, title) { - var options; + return (text, title) => { + let options; if (typeof text === 'string') { options = { title: title, @@ -37,7 +41,7 @@ define(['browser', 'dialog', 'globalize'], function(browser, dialog, globalize) options = text; } - var items = []; + const items = []; items.push({ name: options.cancelText || globalize.translate('ButtonCancel'), @@ -53,7 +57,7 @@ define(['browser', 'dialog', 'globalize'], function(browser, dialog, globalize) options.buttons = items; - return dialog(options).then(function (result) { + return dialog.show(options).then(result => { if (result === 'ok') { return Promise.resolve(); } @@ -62,4 +66,5 @@ define(['browser', 'dialog', 'globalize'], function(browser, dialog, globalize) }); }; } -}); +})(); +/* eslint-enable indent */ diff --git a/src/components/imageeditor/imageeditor.js b/src/components/imageeditor/imageeditor.js index 2927a0b12..93495eec0 100644 --- a/src/components/imageeditor/imageeditor.js +++ b/src/components/imageeditor/imageeditor.js @@ -200,7 +200,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager', require(['confirm'], function (confirm) { - confirm({ + confirm.default({ text: globalize.translate('ConfirmDeleteImage'), confirmText: globalize.translate('Delete'), diff --git a/src/components/recordingcreator/recordinghelper.js b/src/components/recordingcreator/recordinghelper.js index a071cb203..c773368f2 100644 --- a/src/components/recordingcreator/recordinghelper.js +++ b/src/components/recordingcreator/recordinghelper.js @@ -34,7 +34,7 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi require(['confirm'], function (confirm) { - confirm({ + confirm.default({ text: globalize.translate('MessageConfirmRecordingCancellation'), primary: 'delete', @@ -59,7 +59,7 @@ define(['globalize', 'loading', 'connectionManager'], function (globalize, loadi require(['confirm'], function (confirm) { - confirm({ + confirm.default({ text: globalize.translate('MessageConfirmRecordingCancellation'), primary: 'delete', diff --git a/src/components/subtitleeditor/subtitleeditor.js b/src/components/subtitleeditor/subtitleeditor.js index e9bcc0bfc..b356c4f07 100644 --- a/src/components/subtitleeditor/subtitleeditor.js +++ b/src/components/subtitleeditor/subtitleeditor.js @@ -69,7 +69,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings', require(['confirm'], function (confirm) { - confirm({ + confirm.default({ title: globalize.translate('ConfirmDeletion'), text: msg, diff --git a/src/controllers/dashboard/apikeys.js b/src/controllers/dashboard/apikeys.js index f43bfd032..dc17d43c5 100644 --- a/src/controllers/dashboard/apikeys.js +++ b/src/controllers/dashboard/apikeys.js @@ -3,7 +3,7 @@ define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button'] function revoke(page, key) { require(['confirm'], function (confirm) { - confirm(globalize.translate('MessageConfirmRevokeApiKey'), globalize.translate('HeaderConfirmRevokeApiKey')).then(function () { + confirm.default(globalize.translate('MessageConfirmRevokeApiKey'), globalize.translate('HeaderConfirmRevokeApiKey')).then(function () { loading.show(); ApiClient.ajax({ type: 'DELETE', diff --git a/src/controllers/dashboard/dashboard.js b/src/controllers/dashboard/dashboard.js index 1bae9a0b3..dcd56921e 100644 --- a/src/controllers/dashboard/dashboard.js +++ b/src/controllers/dashboard/dashboard.js @@ -708,7 +708,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa }, restart: function (btn) { require(['confirm'], function (confirm) { - confirm({ + confirm.default({ title: globalize.translate('HeaderRestart'), text: globalize.translate('MessageConfirmRestart'), confirmText: globalize.translate('ButtonRestart'), @@ -723,7 +723,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa }, shutdown: function (btn) { require(['confirm'], function (confirm) { - confirm({ + confirm.default({ title: globalize.translate('HeaderShutdown'), text: globalize.translate('MessageConfirmShutdown'), confirmText: globalize.translate('ButtonShutdown'), diff --git a/src/controllers/dashboard/devices/devices.js b/src/controllers/dashboard/devices/devices.js index 0dea81c75..d20132db8 100644 --- a/src/controllers/dashboard/devices/devices.js +++ b/src/controllers/dashboard/devices/devices.js @@ -9,7 +9,7 @@ define(['loading', 'dom', 'libraryMenu', 'globalize', 'scripts/imagehelper', 'da var msg = globalize.translate('DeleteDeviceConfirmation'); require(['confirm'], function (confirm) { - confirm({ + confirm.default({ text: msg, title: globalize.translate('HeaderDeleteDevice'), confirmText: globalize.translate('ButtonDelete'), diff --git a/src/controllers/dashboard/dlna/profiles.js b/src/controllers/dashboard/dlna/profiles.js index fb4caadeb..a6eccd233 100644 --- a/src/controllers/dashboard/dlna/profiles.js +++ b/src/controllers/dashboard/dlna/profiles.js @@ -59,7 +59,7 @@ define(['jQuery', 'globalize', 'loading', 'libraryMenu', 'listViewStyle', 'emby- function deleteProfile(page, id) { require(['confirm'], function (confirm) { - confirm(globalize.translate('MessageConfirmProfileDeletion'), globalize.translate('HeaderConfirmProfileDeletion')).then(function () { + confirm.default(globalize.translate('MessageConfirmProfileDeletion'), globalize.translate('HeaderConfirmProfileDeletion')).then(function () { loading.show(); ApiClient.ajax({ type: 'DELETE', diff --git a/src/controllers/dashboard/mediaLibrary.js b/src/controllers/dashboard/mediaLibrary.js index 06eba37cb..2d0d45438 100644 --- a/src/controllers/dashboard/mediaLibrary.js +++ b/src/controllers/dashboard/mediaLibrary.js @@ -38,7 +38,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl } require(['confirm'], function (confirm) { - confirm({ + confirm.default({ text: msg, title: globalize.translate('HeaderRemoveMediaFolder'), diff --git a/src/controllers/dashboard/plugins/add.js b/src/controllers/dashboard/plugins/add.js index 8b1deb804..375a0c0ec 100644 --- a/src/controllers/dashboard/plugins/add.js +++ b/src/controllers/dashboard/plugins/add.js @@ -91,7 +91,7 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize', 'connectionManager', 'e msg += globalize.translate('PleaseConfirmPluginInstallation'); require(['confirm'], function (confirm) { - confirm(msg, globalize.translate('HeaderConfirmPluginInstallation')).then(function () { + confirm.default(msg, globalize.translate('HeaderConfirmPluginInstallation')).then(function () { alertCallback(); }, function () { console.debug('plugin not installed'); diff --git a/src/controllers/dashboard/plugins/installed.js b/src/controllers/dashboard/plugins/installed.js index 87e9428cc..7a8110f8b 100644 --- a/src/controllers/dashboard/plugins/installed.js +++ b/src/controllers/dashboard/plugins/installed.js @@ -5,7 +5,7 @@ define(['loading', 'libraryMenu', 'dom', 'globalize', 'cardStyle', 'emby-button' var msg = globalize.translate('UninstallPluginConfirmation', name); require(['confirm'], function (confirm) { - confirm({ + confirm.default({ title: globalize.translate('UninstallPluginHeader'), text: msg, primary: 'delete', diff --git a/src/controllers/dashboard/scheduledtasks/scheduledtask.js b/src/controllers/dashboard/scheduledtasks/scheduledtask.js index 52050d1f8..b632d176f 100644 --- a/src/controllers/dashboard/scheduledtasks/scheduledtask.js +++ b/src/controllers/dashboard/scheduledtasks/scheduledtask.js @@ -130,7 +130,7 @@ define(['jQuery', 'loading', 'datetime', 'dom', 'globalize', 'emby-input', 'emby }, confirmDeleteTrigger: function (view, index) { require(['confirm'], function (confirm) { - confirm(globalize.translate('MessageDeleteTaskTrigger'), globalize.translate('HeaderDeleteTaskTrigger')).then(function () { + confirm.default(globalize.translate('MessageDeleteTaskTrigger'), globalize.translate('HeaderDeleteTaskTrigger')).then(function () { ScheduledTaskPage.deleteTrigger(view, index); }); }); diff --git a/src/controllers/dashboard/users/userpasswordpage.js b/src/controllers/dashboard/users/userpasswordpage.js index 186e39b15..9061c00c7 100644 --- a/src/controllers/dashboard/users/userpasswordpage.js +++ b/src/controllers/dashboard/users/userpasswordpage.js @@ -142,7 +142,7 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-button'], function (loading var msg = globalize.translate('PasswordResetConfirmation'); require(['confirm'], function (confirm) { - confirm(msg, globalize.translate('PasswordResetHeader')).then(function () { + confirm.default(msg, globalize.translate('PasswordResetHeader')).then(function () { var userId = params.userId; loading.show(); ApiClient.resetUserPassword(userId).then(function () { @@ -161,7 +161,7 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-button'], function (loading var msg = globalize.translate('PinCodeResetConfirmation'); require(['confirm'], function (confirm) { - confirm(msg, globalize.translate('HeaderPinCodeReset')).then(function () { + confirm.default(msg, globalize.translate('HeaderPinCodeReset')).then(function () { var userId = params.userId; loading.show(); ApiClient.resetEasyPassword(userId).then(function () { diff --git a/src/controllers/dashboard/users/userprofilespage.js b/src/controllers/dashboard/users/userprofilespage.js index c691c665f..f04c7ad08 100644 --- a/src/controllers/dashboard/users/userprofilespage.js +++ b/src/controllers/dashboard/users/userprofilespage.js @@ -5,7 +5,7 @@ define(['loading', 'dom', 'globalize', 'date-fns', 'dfnshelper', 'paper-icon-but var msg = globalize.translate('DeleteUserConfirmation'); require(['confirm'], function (confirm) { - confirm({ + confirm.default({ title: globalize.translate('DeleteUser'), text: msg, confirmText: globalize.translate('ButtonDelete'), diff --git a/src/controllers/itemDetails.js b/src/controllers/itemDetails.js index 67aa5f940..aa131999a 100644 --- a/src/controllers/itemDetails.js +++ b/src/controllers/itemDetails.js @@ -1936,7 +1936,7 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti function splitVersions(instance, page, apiClient, params) { require(['confirm'], function (confirm) { - confirm('Are you sure you wish to split the media sources into separate items?', 'Split Media Apart').then(function () { + confirm.default('Are you sure you wish to split the media sources into separate items?', 'Split Media Apart').then(function () { loading.show(); apiClient.ajax({ type: 'DELETE', diff --git a/src/controllers/livetvstatus.js b/src/controllers/livetvstatus.js index 82d0b697d..b070098b9 100644 --- a/src/controllers/livetvstatus.js +++ b/src/controllers/livetvstatus.js @@ -49,7 +49,7 @@ define(['jQuery', 'globalize', 'scripts/taskbutton', 'dom', 'libraryMenu', 'layo var message = globalize.translate('MessageConfirmDeleteTunerDevice'); require(['confirm'], function (confirm) { - confirm(message, globalize.translate('HeaderDeleteDevice')).then(function () { + confirm.default(message, globalize.translate('HeaderDeleteDevice')).then(function () { loading.show(); ApiClient.ajax({ type: 'DELETE', @@ -167,7 +167,7 @@ define(['jQuery', 'globalize', 'scripts/taskbutton', 'dom', 'libraryMenu', 'layo var message = globalize.translate('MessageConfirmDeleteGuideProvider'); require(['confirm'], function (confirm) { - confirm(message, globalize.translate('HeaderDeleteProvider')).then(function () { + confirm.default(message, globalize.translate('HeaderDeleteProvider')).then(function () { loading.show(); ApiClient.ajax({ type: 'DELETE', diff --git a/src/controllers/user/profile.js b/src/controllers/user/profile.js index fd7d1e32c..8e2977180 100644 --- a/src/controllers/user/profile.js +++ b/src/controllers/user/profile.js @@ -86,7 +86,7 @@ define(['controllers/dashboard/users/userpasswordpage', 'loading', 'libraryMenu' new UserPasswordPage(view, params); view.querySelector('#btnDeleteImage').addEventListener('click', function () { require(['confirm'], function (confirm) { - confirm(globalize.translate('DeleteImageConfirmation'), globalize.translate('DeleteImage')).then(function () { + confirm.default(globalize.translate('DeleteImageConfirmation'), globalize.translate('DeleteImage')).then(function () { loading.show(); var userId = getParameterByName('userId'); ApiClient.deleteUserImage(userId, 'primary').then(function () { From 30cd42ae7cdd084ab73e87ee3d7dbbf3b46994ff Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Thu, 18 Jun 2020 22:43:30 +0300 Subject: [PATCH 03/12] Migration prompt to ES6 modules --- package.json | 1 + .../metadataEditor/metadataEditor.js | 2 +- src/components/prompt/prompt.js | 49 ++++++++++++------- src/controllers/dashboard/apikeys.js | 2 +- src/controllers/dashboard/dashboard.js | 2 +- src/controllers/dashboard/mediaLibrary.js | 2 +- .../dashboard/users/userparentalcontrol.js | 2 +- 7 files changed, 37 insertions(+), 23 deletions(-) diff --git a/package.json b/package.json index b3b529849..a88fa394b 100644 --- a/package.json +++ b/package.json @@ -110,6 +110,7 @@ "src/components/playback/playmethodhelper.js", "src/components/playback/remotecontrolautoplay.js", "src/components/playback/volumeosd.js", + "src/components/prompt/prompt.js", "src/components/playmenu.js", "src/components/sanatizefilename.js", "src/components/scrollManager.js", diff --git a/src/components/metadataEditor/metadataEditor.js b/src/components/metadataEditor/metadataEditor.js index 52f030cd2..2f7bfc951 100644 --- a/src/components/metadataEditor/metadataEditor.js +++ b/src/components/metadataEditor/metadataEditor.js @@ -212,7 +212,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi function addElementToList(source, sortCallback) { require(['prompt'], function (prompt) { - prompt({ + prompt.default({ label: 'Value:' }).then(function (text) { var list = dom.parentWithClass(source, 'editableListviewContainer').querySelector('.paperList'); diff --git a/src/components/prompt/prompt.js b/src/components/prompt/prompt.js index a76083cf0..f3bf72f8f 100644 --- a/src/components/prompt/prompt.js +++ b/src/components/prompt/prompt.js @@ -1,12 +1,24 @@ -define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', 'dom', 'require', 'material-icons', 'emby-button', 'paper-icon-button-light', 'emby-input', 'formDialogStyle'], function(browser, dialogHelper, layoutManager, scrollHelper, globalize, dom, require) { - 'use strict'; +import browser from 'browser'; +import dialogHelper from 'dialogHelper'; +import layoutManager from 'layoutManager'; +import scrollHelper from 'scrollHelper'; +import globalize from 'globalize'; +import dom from 'dom'; +import 'material-icons'; +import 'emby-button'; +import 'paper-icon-button-light'; +import 'emby-input'; +import 'formDialogStyle'; + +/* eslint-disable indent */ +export default (() => { function replaceAll(str, find, replace) { return str.split(find).join(replace); } function setInputProperties(dlg, options) { - var txtInput = dlg.querySelector('#txtInput'); + const txtInput = dlg.querySelector('#txtInput'); if (txtInput.label) { txtInput.label(options.label || ''); @@ -17,7 +29,7 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', } function showDialog(options, template) { - var dialogOptions = { + const dialogOptions = { removeOnClose: true, scrollY: false }; @@ -26,7 +38,7 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', dialogOptions.size = 'fullscreen'; } - var dlg = dialogHelper.createDialog(dialogOptions); + const dlg = dialogHelper.createDialog(dialogOptions); dlg.classList.add('formDialog'); @@ -39,7 +51,7 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', dlg.classList.add('dialog-fullscreen-lowres'); } - dlg.querySelector('.btnCancel').addEventListener('click', function (e) { + dlg.querySelector('.btnCancel').addEventListener('click', () => { dialogHelper.close(dlg); }); @@ -53,16 +65,16 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', setInputProperties(dlg, options); - var submitValue; + let submitValue; - dlg.querySelector('form').addEventListener('submit', function (e) { + dlg.querySelector('form').addEventListener('submit', e => { submitValue = dlg.querySelector('#txtInput').value; e.preventDefault(); e.stopPropagation(); // Important, don't close the dialog until after the form has completed submitting, or it will cause an error in Chrome - setTimeout(function () { + setTimeout(() => { dialogHelper.close(dlg); }, 300); @@ -71,9 +83,9 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', dlg.querySelector('.submitText').innerHTML = options.confirmText || globalize.translate('ButtonOk'); - dlg.style.minWidth = (Math.min(400, dom.getWindowSize().innerWidth - 50)) + 'px'; + dlg.style.minWidth = `${Math.min(400, dom.getWindowSize().innerWidth - 50)}px`; - return dialogHelper.open(dlg).then(function () { + return dialogHelper.open(dlg).then(() => { if (layoutManager.tv) { scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false); } @@ -87,7 +99,7 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', } if ((browser.tv || browser.xboxOne) && window.confirm) { - return function (options) { + return options => { if (typeof options === 'string') { options = { label: '', @@ -95,8 +107,8 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', }; } - var label = replaceAll(options.label || '', '
', '\n'); - var result = prompt(label, options.text || ''); + const label = replaceAll(options.label || '', '
', '\n'); + const result = prompt(label, options.text || ''); if (result) { return Promise.resolve(result); @@ -105,9 +117,9 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', } }; } else { - return function (options) { - return new Promise(function (resolve, reject) { - require(['text!./prompt.template.html'], function (template) { + return options => { + return new Promise((resolve, reject) => { + import('text!./prompt.template.html').then(({default: template}) => { if (typeof options === 'string') { options = { title: '', @@ -119,4 +131,5 @@ define(['browser', 'dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', }); }; } -}); +})(); +/* eslint-enable indent */ diff --git a/src/controllers/dashboard/apikeys.js b/src/controllers/dashboard/apikeys.js index dc17d43c5..d3e824ed5 100644 --- a/src/controllers/dashboard/apikeys.js +++ b/src/controllers/dashboard/apikeys.js @@ -47,7 +47,7 @@ define(['datetime', 'loading', 'libraryMenu', 'dom', 'globalize', 'emby-button'] function showNewKeyPrompt(page) { require(['prompt'], function (prompt) { - prompt({ + prompt.default({ title: globalize.translate('HeaderNewApiKey'), label: globalize.translate('LabelAppName'), description: globalize.translate('LabelAppNameExample') diff --git a/src/controllers/dashboard/dashboard.js b/src/controllers/dashboard/dashboard.js index dcd56921e..116c8574f 100644 --- a/src/controllers/dashboard/dashboard.js +++ b/src/controllers/dashboard/dashboard.js @@ -34,7 +34,7 @@ define(['datetime', 'events', 'itemHelper', 'serverNotifications', 'dom', 'globa function showSendMessageForm(btn, session) { require(['prompt'], function (prompt) { - prompt({ + prompt.default({ title: globalize.translate('HeaderSendMessage'), label: globalize.translate('LabelMessageText'), confirmText: globalize.translate('ButtonSend') diff --git a/src/controllers/dashboard/mediaLibrary.js b/src/controllers/dashboard/mediaLibrary.js index 2d0d45438..bfa4ab1b3 100644 --- a/src/controllers/dashboard/mediaLibrary.js +++ b/src/controllers/dashboard/mediaLibrary.js @@ -66,7 +66,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl function renameVirtualFolder(page, virtualFolder) { require(['prompt'], function (prompt) { - prompt({ + prompt.default({ label: globalize.translate('LabelNewName'), confirmText: globalize.translate('ButtonRename') }).then(function (newName) { diff --git a/src/controllers/dashboard/users/userparentalcontrol.js b/src/controllers/dashboard/users/userparentalcontrol.js index e8255512d..f5d4e70af 100644 --- a/src/controllers/dashboard/users/userparentalcontrol.js +++ b/src/controllers/dashboard/users/userparentalcontrol.js @@ -225,7 +225,7 @@ define(['jQuery', 'datetime', 'loading', 'libraryMenu', 'globalize', 'listViewSt function showBlockedTagPopup(page) { require(['prompt'], function (prompt) { - prompt({ + prompt.default({ label: globalize.translate('LabelTag') }).then(function (value) { var tags = getBlockedTagsFromPage(page); From 4e6792309d953cca4938abbcad092adfc26fd93d Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Thu, 18 Jun 2020 22:45:35 +0300 Subject: [PATCH 04/12] Fix context Event Listener (cherry picked from commit 27d1c21089a0996c9e53c49f2b10e98636467a5f) --- src/components/metadataEditor/metadataEditor.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/metadataEditor/metadataEditor.js b/src/components/metadataEditor/metadataEditor.js index 2f7bfc951..eb387828f 100644 --- a/src/components/metadataEditor/metadataEditor.js +++ b/src/components/metadataEditor/metadataEditor.js @@ -308,8 +308,8 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi } }); - context.removeEventListener('submit', onEditorClick); - context.addEventListener('submit', onEditorClick); + context.removeEventListener('click', onEditorClick); + context.addEventListener('click', onEditorClick); var form = context.querySelector('form'); form.removeEventListener('submit', onSubmit); From 0aeff0b4648f265ee2e4b90127162d086fa5b358 Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Sun, 21 Jun 2020 05:53:59 +0300 Subject: [PATCH 05/12] Migration displaySettings to ES6 modules --- package.json | 1 + .../displaySettings/displaySettings.js | 157 ++++++++++-------- src/controllers/user/display.js | 2 +- 3 files changed, 87 insertions(+), 73 deletions(-) diff --git a/package.json b/package.json index 034c92a7d..5811839a3 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/displaySettings/displaySettings.js", "src/components/images/imageLoader.js", "src/components/indicators/indicators.js", "src/components/lazyLoader/lazyLoaderIntersectionObserver.js", diff --git a/src/components/displaySettings/displaySettings.js b/src/components/displaySettings/displaySettings.js index c4eb35f49..801c8657b 100644 --- a/src/components/displaySettings/displaySettings.js +++ b/src/components/displaySettings/displaySettings.js @@ -1,22 +1,37 @@ -define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', 'apphost', 'focusManager', 'datetime', 'globalize', 'loading', 'connectionManager', 'skinManager', 'dom', 'events', 'emby-select', 'emby-checkbox', 'emby-button'], function (require, browser, layoutManager, appSettings, pluginManager, appHost, focusManager, datetime, globalize, loading, connectionManager, skinManager, dom, events) { - 'use strict'; +import browser from 'browser'; +import layoutManager from 'layoutManager'; +import appSettings from 'appSettings'; +import pluginManager from 'pluginManager'; +import appHost from 'apphost'; +import focusManager from 'focusManager'; +import datetime from 'datetime'; +import globalize from 'globalize'; +import loading from 'loading'; +import connectionManager from 'connectionManager'; +import skinManager from 'skinManager'; +import events from 'events'; +import 'emby-select'; +import 'emby-checkbox'; +import 'emby-button'; + +/* eslint-disable indent */ function fillThemes(select, isDashboard) { - select.innerHTML = skinManager.getThemes().map(function (t) { - var value = t.id; + select.innerHTML = skinManager.getThemes().map(t => { + let value = t.id; if (t.isDefault && !isDashboard) { value = ''; } else if (t.isDefaultServerDashboard && isDashboard) { value = ''; } - return ''; + return ``; }).join(''); } function loadScreensavers(context, userSettings) { - var selectScreensaver = context.querySelector('.selectScreensaver'); - var options = pluginManager.ofType('screensaver').map(function (plugin) { + const selectScreensaver = context.querySelector('.selectScreensaver'); + const options = pluginManager.ofType('screensaver').map(plugin => { return { name: plugin.name, value: plugin.id @@ -28,8 +43,8 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', ' value: 'none' }); - selectScreensaver.innerHTML = options.map(function (o) { - return ''; + selectScreensaver.innerHTML = options.map(o => { + return ``; }).join(''); selectScreensaver.value = userSettings.screensaver(); @@ -41,8 +56,8 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', ' function loadSoundEffects(context, userSettings) { - var selectSoundEffects = context.querySelector('.selectSoundEffects'); - var options = pluginManager.ofType('soundeffects').map(function (plugin) { + const selectSoundEffects = context.querySelector('.selectSoundEffects'); + const options = pluginManager.ofType('soundeffects').map(plugin => { return { name: plugin.name, value: plugin.id @@ -54,8 +69,8 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', ' value: 'none' }); - selectSoundEffects.innerHTML = options.map(function (o) { - return ''; + selectSoundEffects.innerHTML = options.map(o => { + return ``; }).join(''); selectSoundEffects.value = userSettings.soundEffects(); @@ -67,17 +82,17 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', ' function loadSkins(context, userSettings) { - var selectSkin = context.querySelector('.selectSkin'); + const selectSkin = context.querySelector('.selectSkin'); - var options = pluginManager.ofType('skin').map(function (plugin) { + const options = pluginManager.ofType('skin').map(plugin => { return { name: plugin.name, value: plugin.id }; }); - selectSkin.innerHTML = options.map(function (o) { - return ''; + selectSkin.innerHTML = options.map(o => { + return ``; }).join(''); selectSkin.value = userSettings.skin(); @@ -92,7 +107,7 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', ' } } - function showOrHideMissingEpisodesField(context, user, apiClient) { + function showOrHideMissingEpisodesField(context) { if (browser.tizen || browser.web0s) { context.querySelector('.fldDisplayMissingEpisodes').classList.add('hide'); @@ -102,10 +117,7 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', ' context.querySelector('.fldDisplayMissingEpisodes').classList.remove('hide'); } - function loadForm(context, user, userSettings, apiClient) { - - var loggedInUserId = apiClient.getCurrentUserId(); - var userId = user.Id; + function loadForm(context, user, userSettings) { if (user.Policy.IsAdministrator) { context.querySelector('.selectDashboardThemeContainer').classList.remove('hide'); @@ -167,8 +179,8 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', ' context.querySelector('.chkRunAtStartup').checked = appSettings.runAtStartup(); - var selectTheme = context.querySelector('#selectTheme'); - var selectDashboardTheme = context.querySelector('#selectDashboardTheme'); + const selectTheme = context.querySelector('#selectTheme'); + const selectDashboardTheme = context.querySelector('#selectDashboardTheme'); fillThemes(selectTheme); fillThemes(selectDashboardTheme, true); @@ -195,7 +207,7 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', ' context.querySelector('.selectLayout').value = layoutManager.getSavedLayout() || ''; - showOrHideMissingEpisodesField(context, user, apiClient); + showOrHideMissingEpisodesField(context); loading.hide(); } @@ -239,29 +251,29 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', ' function save(instance, context, userId, userSettings, apiClient, enableSaveConfirmation) { loading.show(); - apiClient.getUser(userId).then(function (user) { - saveUser(context, user, userSettings, apiClient).then(function () { + apiClient.getUser(userId).then(user => { + saveUser(context, user, userSettings, apiClient).then(() => { loading.hide(); if (enableSaveConfirmation) { - require(['toast'], function (toast) { + import('toast').then(({default: toast}) => { toast(globalize.translate('SettingsSaved')); }); } events.trigger(instance, 'saved'); - }, function () { + }, () => { loading.hide(); }); }); } function onSubmit(e) { - var self = this; - var apiClient = connectionManager.getApiClient(self.options.serverId); - var userId = self.options.userId; - var userSettings = self.options.userSettings; + const self = this; + const apiClient = connectionManager.getApiClient(self.options.serverId); + const userId = self.options.userId; + const userSettings = self.options.userSettings; - userSettings.setUserInfo(userId, apiClient).then(function () { - var enableSaveConfirmation = self.options.enableSaveConfirmation; + userSettings.setUserInfo(userId, apiClient).then(() => { + const enableSaveConfirmation = self.options.enableSaveConfirmation; save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation); }); @@ -272,50 +284,51 @@ define(['require', 'browser', 'layoutManager', 'appSettings', 'pluginManager', ' return false; } - function embed(options, self) { - require(['text!./displaySettings.template.html'], function (template) { - options.element.innerHTML = globalize.translateDocument(template, 'core'); - options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self)); - if (options.enableSaveButton) { - options.element.querySelector('.btnSave').classList.remove('hide'); - } - self.loadData(options.autoFocus); - }); + async function embed(options, self) { + const { default: template } = await import('text!./displaySettings.template.html'); + options.element.innerHTML = globalize.translateDocument(template, 'core'); + options.element.querySelector('form').addEventListener('submit', onSubmit.bind(self)); + if (options.enableSaveButton) { + options.element.querySelector('.btnSave').classList.remove('hide'); + } + self.loadData(options.autoFocus); } - function DisplaySettings(options) { - this.options = options; - embed(options, this); - } + class DisplaySettings { + constructor(options) { + this.options = options; + embed(options, this); + } - DisplaySettings.prototype.loadData = function (autoFocus) { - var self = this; - var context = self.options.element; + loadData(autoFocus) { + const self = this; + const context = self.options.element; - loading.show(); + loading.show(); - var userId = self.options.userId; - var apiClient = connectionManager.getApiClient(self.options.serverId); - var userSettings = self.options.userSettings; + const userId = self.options.userId; + const apiClient = connectionManager.getApiClient(self.options.serverId); + const userSettings = self.options.userSettings; - return apiClient.getUser(userId).then(function (user) { - return userSettings.setUserInfo(userId, apiClient).then(function () { - self.dataLoaded = true; - loadForm(context, user, userSettings, apiClient); - if (autoFocus) { - focusManager.autoFocus(context); - } + return apiClient.getUser(userId).then(user => { + return userSettings.setUserInfo(userId, apiClient).then(() => { + self.dataLoaded = true; + loadForm(context, user, userSettings); + if (autoFocus) { + focusManager.autoFocus(context); + } + }); }); - }); - }; + } - DisplaySettings.prototype.submit = function () { - onSubmit.call(this); - }; + submit() { + onSubmit.call(this); + } - DisplaySettings.prototype.destroy = function () { - this.options = null; - }; + destroy() { + this.options = null; + } + } - return DisplaySettings; -}); +/* eslint-enable indent */ +export default DisplaySettings; diff --git a/src/controllers/user/display.js b/src/controllers/user/display.js index 26c75f209..408631b38 100644 --- a/src/controllers/user/display.js +++ b/src/controllers/user/display.js @@ -21,7 +21,7 @@ define(['displaySettings', 'userSettings', 'autoFocuser'], function (DisplaySett if (settingsInstance) { settingsInstance.loadData(); } else { - settingsInstance = new DisplaySettings({ + settingsInstance = new DisplaySettings.default({ serverId: ApiClient.serverId(), userId: userId, element: view.querySelector('.settingsContainer'), From 30bddd04b0d91679b28cf402ae609f365cd4afd5 Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Sun, 21 Jun 2020 04:38:42 +0300 Subject: [PATCH 06/12] Migration homeScreenSettings to ES6 modules --- package.json | 1 + .../homeScreenSettings/homeScreenSettings.js | 277 +++++++++--------- src/controllers/user/home.js | 2 +- 3 files changed, 137 insertions(+), 143 deletions(-) diff --git a/package.json b/package.json index 5811839a3..3c2f9ef1d 100644 --- a/package.json +++ b/package.json @@ -97,6 +97,7 @@ "src/components/cardbuilder/chaptercardbuilder.js", "src/components/cardbuilder/peoplecardbuilder.js", "src/components/displaySettings/displaySettings.js", + "src/components/homeScreenSettings/homeScreenSettings.js", "src/components/images/imageLoader.js", "src/components/indicators/indicators.js", "src/components/lazyLoader/lazyLoaderIntersectionObserver.js", diff --git a/src/components/homeScreenSettings/homeScreenSettings.js b/src/components/homeScreenSettings/homeScreenSettings.js index 9eae944d2..5e7d6b4c5 100644 --- a/src/components/homeScreenSettings/homeScreenSettings.js +++ b/src/components/homeScreenSettings/homeScreenSettings.js @@ -1,26 +1,37 @@ -define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loading', 'connectionManager', 'homeSections', 'dom', 'events', 'listViewStyle', 'emby-select', 'emby-checkbox'], function (require, appHost, layoutManager, focusManager, globalize, loading, connectionManager, homeSections, dom, events) { - 'use strict'; +import layoutManager from 'layoutManager'; +import focusManager from 'focusManager'; +import globalize from 'globalize'; +import loading from 'loading'; +import connectionManager from 'connectionManager'; +import homeSections from 'homeSections'; +import dom from 'dom'; +import events from 'events'; +import 'listViewStyle'; +import 'emby-select'; +import 'emby-checkbox'; - var numConfigurableSections = 7; +/* eslint-disable indent */ + + const numConfigurableSections = 7; function renderViews(page, user, result) { - var folderHtml = ''; + let folderHtml = ''; folderHtml += '
'; - folderHtml += result.map(function (i) { + folderHtml += result.map(i => { - var currentHtml = ''; + let currentHtml = ''; - var id = 'chkGroupFolder' + i.Id; + const id = `chkGroupFolder${i.Id}`; - var isChecked = user.Configuration.GroupedFolders.indexOf(i.Id) !== -1; + const isChecked = user.Configuration.GroupedFolders.includes(i.Id); - var checkedHtml = isChecked ? ' checked="checked"' : ''; + const checkedHtml = isChecked ? ' checked="checked"' : ''; currentHtml += ''; return currentHtml; @@ -34,7 +45,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa function getLandingScreenOptions(type) { - var list = []; + const list = []; if (type === 'movies') { list.push({ @@ -123,27 +134,27 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa function getLandingScreenOptionsHtml(type, userValue) { - return getLandingScreenOptions(type).map(function (o) { + return getLandingScreenOptions(type).map(o => { - var selected = userValue === o.value || (o.isDefault && !userValue); - var selectedHtml = selected ? ' selected' : ''; - var optionValue = o.isDefault ? '' : o.value; + const selected = userValue === o.value || (o.isDefault && !userValue); + const selectedHtml = selected ? ' selected' : ''; + const optionValue = o.isDefault ? '' : o.value; - return ''; + return ``; }).join(''); } function renderViewOrder(context, user, result) { - var html = ''; + let html = ''; - var index = 0; + let index = 0; - html += result.Items.map(function (view) { + html += result.Items.map(view => { - var currentHtml = ''; + let currentHtml = ''; - currentHtml += '
'; + currentHtml += `
`; currentHtml += ''; @@ -155,8 +166,8 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa currentHtml += '
'; - currentHtml += ''; - currentHtml += ''; + currentHtml += ``; + currentHtml += ``; currentHtml += '
'; @@ -170,14 +181,14 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa function updateHomeSectionValues(context, userSettings) { - for (var i = 1; i <= 7; i++) { + for (let i = 1; i <= 7; i++) { - var select = context.querySelector('#selectHomeSection' + i); - var defaultValue = homeSections.getDefaultSection(i - 1); + const select = context.querySelector(`#selectHomeSection${i}`); + const defaultValue = homeSections.getDefaultSection(i - 1); - var option = select.querySelector('option[value=' + defaultValue + ']') || select.querySelector('option[value=""]'); + const option = select.querySelector(`option[value=${defaultValue}]`) || select.querySelector('option[value=""]'); - var userValue = userSettings.get('homesection' + (i - 1)); + const userValue = userSettings.get(`homesection${i - 1}`); option.value = ''; @@ -193,42 +204,42 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa function getPerLibrarySettingsHtml(item, user, userSettings, apiClient) { - var html = ''; + let html = ''; - var isChecked; + let isChecked; if (item.Type === 'Channel' || item.CollectionType === 'boxsets' || item.CollectionType === 'playlists') { - isChecked = (user.Configuration.MyMediaExcludes || []).indexOf(item.Id) === -1; + isChecked = !(user.Configuration.MyMediaExcludes || []).includes(item.Id); html += '
'; html += ''; html += '
'; } - var excludeFromLatest = ['playlists', 'livetv', 'boxsets', 'channels']; - if (excludeFromLatest.indexOf(item.CollectionType || '') === -1) { + const excludeFromLatest = ['playlists', 'livetv', 'boxsets', 'channels']; + if (!excludeFromLatest.includes(item.CollectionType || '')) { - isChecked = user.Configuration.LatestItemsExcludes.indexOf(item.Id) === -1; + isChecked = !user.Configuration.LatestItemsExcludes.includes(item.Id); html += ''; } if (html) { - html = '
' + html + '
'; + html = `
${html}
`; } if (item.CollectionType === 'movies' || item.CollectionType === 'tvshows' || item.CollectionType === 'music' || item.CollectionType === 'livetv') { - var idForLanding = item.CollectionType === 'livetv' ? item.CollectionType : item.Id; + const idForLanding = item.CollectionType === 'livetv' ? item.CollectionType : item.Id; html += '
'; - html += '`; - var userValue = userSettings.get('landing-' + idForLanding); + const userValue = userSettings.get(`landing-${idForLanding}`); html += getLandingScreenOptionsHtml(item.CollectionType, userValue); @@ -238,7 +249,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa if (html) { - var prefix = ''; + let prefix = ''; prefix += '
'; prefix += '

'; @@ -254,10 +265,10 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa function renderPerLibrarySettings(context, user, userViews, userSettings, apiClient) { - var elem = context.querySelector('.perLibrarySettings'); - var html = ''; + const elem = context.querySelector('.perLibrarySettings'); + let html = ''; - for (var i = 0, length = userViews.length; i < length; i++) { + for (let i = 0, length = userViews.length; i < length; i++) { html += getPerLibrarySettingsHtml(userViews[i], user, userSettings, apiClient); } @@ -271,10 +282,10 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa updateHomeSectionValues(context, userSettings); - var promise1 = apiClient.getUserViews({ IncludeHidden: true }, user.Id); - var promise2 = apiClient.getJSON(apiClient.getUrl('Users/' + user.Id + '/GroupingOptions')); + const promise1 = apiClient.getUserViews({ IncludeHidden: true }, user.Id); + const promise2 = apiClient.getJSON(apiClient.getUrl(`Users/${user.Id}/GroupingOptions`)); - Promise.all([promise1, promise2]).then(function (responses) { + Promise.all([promise1, promise2]).then(responses => { renderViewOrder(context, user, responses[0]); @@ -286,38 +297,19 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa }); } - function getSibling(elem, type, className) { - - var sibling = elem[type]; - - while (sibling != null) { - if (sibling.classList.contains(className)) { - break; - } - } - - if (sibling != null) { - if (!sibling.classList.contains(className)) { - sibling = null; - } - } - - return sibling; - } - function onSectionOrderListClick(e) { - var target = dom.parentWithClass(e.target, 'btnViewItemMove'); + const target = dom.parentWithClass(e.target, 'btnViewItemMove'); if (target) { - var viewItem = dom.parentWithClass(target, 'viewItem'); + const viewItem = dom.parentWithClass(target, 'viewItem'); if (viewItem) { - var ul = dom.parentWithClass(viewItem, 'paperList'); + const ul = dom.parentWithClass(viewItem, 'paperList'); if (target.classList.contains('btnViewItemDown')) { - var next = viewItem.nextSibling; + const next = viewItem.nextSibling; if (next) { viewItem.parentNode.removeChild(viewItem); @@ -327,7 +319,7 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa } else { - var prev = viewItem.previousSibling; + const prev = viewItem.previousSibling; if (prev) { viewItem.parentNode.removeChild(viewItem); @@ -341,10 +333,10 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa function getCheckboxItems(selector, context, isChecked) { - var inputs = context.querySelectorAll(selector); - var list = []; + const inputs = context.querySelectorAll(selector); + const list = []; - for (var i = 0, length = inputs.length; i < length; i++) { + for (let i = 0, length = inputs.length; i < length; i++) { if (inputs[i].checked === isChecked) { list.push(inputs[i]); @@ -359,25 +351,25 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa user.Configuration.HidePlayedInLatest = context.querySelector('.chkHidePlayedFromLatest').checked; - user.Configuration.LatestItemsExcludes = getCheckboxItems('.chkIncludeInLatest', context, false).map(function (i) { + user.Configuration.LatestItemsExcludes = getCheckboxItems('.chkIncludeInLatest', context, false).map(i => { return i.getAttribute('data-folderid'); }); - user.Configuration.MyMediaExcludes = getCheckboxItems('.chkIncludeInMyMedia', context, false).map(function (i) { + user.Configuration.MyMediaExcludes = getCheckboxItems('.chkIncludeInMyMedia', context, false).map(i => { return i.getAttribute('data-folderid'); }); - user.Configuration.GroupedFolders = getCheckboxItems('.chkGroupFolder', context, true).map(function (i) { + user.Configuration.GroupedFolders = getCheckboxItems('.chkGroupFolder', context, true).map(i => { return i.getAttribute('data-folderid'); }); - var viewItems = context.querySelectorAll('.viewItem'); - var orderedViews = []; - var i; - var length; + const viewItems = context.querySelectorAll('.viewItem'); + const orderedViews = []; + let i; + let length; for (i = 0, length = viewItems.length; i < length; i++) { orderedViews.push(viewItems[i].getAttribute('data-viewid')); } @@ -394,10 +386,10 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa userSettingsInstance.set('homesection5', context.querySelector('#selectHomeSection6').value); userSettingsInstance.set('homesection6', context.querySelector('#selectHomeSection7').value); - var selectLandings = context.querySelectorAll('.selectLanding'); + const selectLandings = context.querySelectorAll('.selectLanding'); for (i = 0, length = selectLandings.length; i < length; i++) { - var selectLanding = selectLandings[i]; - userSettingsInstance.set('landing-' + selectLanding.getAttribute('data-folderid'), selectLanding.value); + const selectLanding = selectLandings[i]; + userSettingsInstance.set(`landing-${selectLanding.getAttribute('data-folderid')}`, selectLanding.value); } return apiClient.updateUserConfiguration(user.Id, user.Configuration); @@ -407,20 +399,20 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa loading.show(); - apiClient.getUser(userId).then(function (user) { + apiClient.getUser(userId).then(user => { - saveUser(context, user, userSettings, apiClient).then(function () { + saveUser(context, user, userSettings, apiClient).then(() => { loading.hide(); if (enableSaveConfirmation) { - require(['toast'], function (toast) { + import('toast').then(({default: toast}) => { toast(globalize.translate('SettingsSaved')); }); } events.trigger(instance, 'saved'); - }, function () { + }, () => { loading.hide(); }); }); @@ -428,14 +420,14 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa function onSubmit(e) { - var self = this; - var apiClient = connectionManager.getApiClient(self.options.serverId); - var userId = self.options.userId; - var userSettings = self.options.userSettings; + const self = this; + const apiClient = connectionManager.getApiClient(self.options.serverId); + const userId = self.options.userId; + const userSettings = self.options.userSettings; - userSettings.setUserInfo(userId, apiClient).then(function () { + userSettings.setUserInfo(userId, apiClient).then(() => { - var enableSaveConfirmation = self.options.enableSaveConfirmation; + const enableSaveConfirmation = self.options.enableSaveConfirmation; save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation); }); @@ -448,13 +440,13 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa function onChange(e) { - var chkIncludeInMyMedia = dom.parentWithClass(e.target, 'chkIncludeInMyMedia'); + const chkIncludeInMyMedia = dom.parentWithClass(e.target, 'chkIncludeInMyMedia'); if (!chkIncludeInMyMedia) { return; } - var section = dom.parentWithClass(chkIncludeInMyMedia, 'verticalSection'); - var fldIncludeInLatest = section.querySelector('.fldIncludeInLatest'); + const section = dom.parentWithClass(chkIncludeInMyMedia, 'verticalSection'); + const fldIncludeInLatest = section.querySelector('.fldIncludeInLatest'); if (fldIncludeInLatest) { if (chkIncludeInMyMedia.checked) { fldIncludeInLatest.classList.remove('hide'); @@ -466,10 +458,10 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa function embed(options, self) { - require(['text!./homeScreenSettings.template.html'], function (template) { + return import('text!./homeScreenSettings.template.html').then(({default: template}) => { - for (var i = 1; i <= numConfigurableSections; i++) { - template = template.replace('{section' + i + 'label}', globalize.translate('LabelHomeScreenSectionValue', i)); + for (let i = 1; i <= numConfigurableSections; i++) { + template = template.replace(`{section${i}label}`, globalize.translate('LabelHomeScreenSectionValue', i)); } options.element.innerHTML = globalize.translateDocument(template, 'core'); @@ -492,47 +484,48 @@ define(['require', 'apphost', 'layoutManager', 'focusManager', 'globalize', 'loa }); } - function HomeScreenSettings(options) { + class HomeScreenSettings { + constructor(options) { + this.options = options; + embed(options, this); + } - this.options = options; + loadData(autoFocus) { - embed(options, this); + const self = this; + const context = self.options.element; + + loading.show(); + + const userId = self.options.userId; + const apiClient = connectionManager.getApiClient(self.options.serverId); + const userSettings = self.options.userSettings; + + apiClient.getUser(userId).then(user => { + + userSettings.setUserInfo(userId, apiClient).then(() => { + + self.dataLoaded = true; + + loadForm(context, user, userSettings, apiClient); + + if (autoFocus) { + focusManager.autoFocus(context); + } + }); + }); + } + + submit() { + onSubmit.call(this); + } + + destroy() { + + this.options = null; + } } - HomeScreenSettings.prototype.loadData = function (autoFocus) { +/* eslint-enable indent */ - var self = this; - var context = self.options.element; - - loading.show(); - - var userId = self.options.userId; - var apiClient = connectionManager.getApiClient(self.options.serverId); - var userSettings = self.options.userSettings; - - apiClient.getUser(userId).then(function (user) { - - userSettings.setUserInfo(userId, apiClient).then(function () { - - self.dataLoaded = true; - - loadForm(context, user, userSettings, apiClient); - - if (autoFocus) { - focusManager.autoFocus(context); - } - }); - }); - }; - - HomeScreenSettings.prototype.submit = function () { - onSubmit.call(this); - }; - - HomeScreenSettings.prototype.destroy = function () { - - this.options = null; - }; - - return HomeScreenSettings; -}); +export default HomeScreenSettings; diff --git a/src/controllers/user/home.js b/src/controllers/user/home.js index 8f826c425..117a457d3 100644 --- a/src/controllers/user/home.js +++ b/src/controllers/user/home.js @@ -21,7 +21,7 @@ define(['homescreenSettings', 'dom', 'globalize', 'loading', 'userSettings', 'au if (homescreenSettingsInstance) { homescreenSettingsInstance.loadData(); } else { - homescreenSettingsInstance = new HomescreenSettings({ + homescreenSettingsInstance = new HomescreenSettings.default({ serverId: ApiClient.serverId(), userId: userId, element: view.querySelector('.homeScreenSettingsContainer'), From 7cb209fa10ddeed3a90054673cf930579fdbe852 Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Sun, 21 Jun 2020 04:56:48 +0300 Subject: [PATCH 07/12] Migration playbackSettings to ES6 modules --- package.json | 1 + .../playbackSettings/playbackSettings.js | 161 ++++++++++-------- src/controllers/user/playback.js | 2 +- 3 files changed, 88 insertions(+), 76 deletions(-) diff --git a/package.json b/package.json index 3c2f9ef1d..85225a15f 100644 --- a/package.json +++ b/package.json @@ -110,6 +110,7 @@ "src/components/playback/playmethodhelper.js", "src/components/playback/remotecontrolautoplay.js", "src/components/playback/volumeosd.js", + "src/components/playbackSettings/playbackSettings.js", "src/components/playmenu.js", "src/components/sanatizefilename.js", "src/components/scrollManager.js", diff --git a/src/components/playbackSettings/playbackSettings.js b/src/components/playbackSettings/playbackSettings.js index 06d2e38d2..846efe1fd 100644 --- a/src/components/playbackSettings/playbackSettings.js +++ b/src/components/playbackSettings/playbackSettings.js @@ -1,31 +1,42 @@ -define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'qualityoptions', 'globalize', 'loading', 'connectionManager', 'dom', 'events', 'emby-select', 'emby-checkbox'], function (require, browser, appSettings, appHost, focusManager, qualityoptions, globalize, loading, connectionManager, dom, events) { - 'use strict'; +import browser from 'browser'; +import appSettings from 'appSettings'; +import appHost from 'apphost'; +import focusManager from 'focusManager'; +import qualityoptions from 'qualityoptions'; +import globalize from 'globalize'; +import loading from 'loading'; +import connectionManager from 'connectionManager'; +import events from 'events'; +import 'emby-select'; +import 'emby-checkbox'; + +/* eslint-disable indent */ function fillSkipLengths(select) { - var options = [5, 10, 15, 20, 25, 30]; + const options = [5, 10, 15, 20, 25, 30]; - select.innerHTML = options.map(function (option) { + select.innerHTML = options.map(option => { return { name: globalize.translate('ValueSeconds', option), value: option * 1000 }; - }).map(function (o) { - return ''; + }).map(o => { + return ``; }).join(''); } function populateLanguages(select, languages) { - var html = ''; + let html = ''; - html += "'; + html += ``; - for (var i = 0, length = languages.length; i < length; i++) { + for (let i = 0, length = languages.length; i < length; i++) { - var culture = languages[i]; + const culture = languages[i]; - html += "'; + html += ``; } select.innerHTML = html; @@ -33,7 +44,7 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality function setMaxBitrateIntoField(select, isInNetwork, mediatype) { - var options = mediatype === 'Audio' ? qualityoptions.getAudioQualityOptions({ + const options = mediatype === 'Audio' ? qualityoptions.getAudioQualityOptions({ currentMaxBitrate: appSettings.maxStreamingBitrate(isInNetwork, mediatype), isAutomaticBitrateEnabled: appSettings.enableAutomaticBitrateDetection(isInNetwork, mediatype), @@ -47,10 +58,10 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality }); - select.innerHTML = options.map(function (i) { + select.innerHTML = options.map(i => { // render empty string instead of 0 for the auto option - return ''; + return ``; }).join(''); if (appSettings.enableAutomaticBitrateDetection(isInNetwork, mediatype)) { @@ -62,23 +73,23 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality function fillChromecastQuality(select) { - var options = qualityoptions.getVideoQualityOptions({ + const options = qualityoptions.getVideoQualityOptions({ currentMaxBitrate: appSettings.maxChromecastBitrate(), isAutomaticBitrateEnabled: !appSettings.maxChromecastBitrate(), enableAuto: true }); - select.innerHTML = options.map(function (i) { + select.innerHTML = options.map(i => { // render empty string instead of 0 for the auto option - return ''; + return ``; }).join(''); select.value = appSettings.maxChromecastBitrate() || ''; } - function setMaxBitrateFromField(select, isInNetwork, mediatype, value) { + function setMaxBitrateFromField(select, isInNetwork, mediatype) { if (select.value) { appSettings.maxStreamingBitrate(isInNetwork, mediatype, select.value); @@ -110,7 +121,7 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality return; } - apiClient.getEndpointInfo().then(function (endpointInfo) { + apiClient.getEndpointInfo().then(endpointInfo => { if (endpointInfo.IsInNetwork) { @@ -133,7 +144,7 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality }); } - function showOrHideEpisodesField(context, user, apiClient) { + function showOrHideEpisodesField(context) { if (browser.tizen || browser.web0s) { context.querySelector('.fldEpisodeAutoPlay').classList.add('hide'); @@ -145,12 +156,12 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality function loadForm(context, user, userSettings, apiClient) { - var loggedInUserId = apiClient.getCurrentUserId(); - var userId = user.Id; + const loggedInUserId = apiClient.getCurrentUserId(); + const userId = user.Id; showHideQualityFields(context, user, apiClient); - apiClient.getCultures().then(function (allCultures) { + apiClient.getCultures().then(allCultures => { populateLanguages(context.querySelector('#selectAudioLanguage'), allCultures); @@ -159,7 +170,7 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality }); // hide cinema mode options if disabled at server level - apiClient.getNamedConfiguration('cinemamode').then(function (cinemaConfig) { + apiClient.getNamedConfiguration('cinemamode').then(cinemaConfig => { if (cinemaConfig.EnableIntrosForMovies || cinemaConfig.EnableIntrosForEpisodes) { context.querySelector('.cinemaModeOptions').classList.remove('hide'); @@ -204,18 +215,18 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality fillChromecastQuality(context.querySelector('.selectChromecastVideoQuality')); - var selectChromecastVersion = context.querySelector('.selectChromecastVersion'); + const selectChromecastVersion = context.querySelector('.selectChromecastVersion'); selectChromecastVersion.value = userSettings.chromecastVersion(); - var selectSkipForwardLength = context.querySelector('.selectSkipForwardLength'); + const selectSkipForwardLength = context.querySelector('.selectSkipForwardLength'); fillSkipLengths(selectSkipForwardLength); selectSkipForwardLength.value = userSettings.skipForwardLength(); - var selectSkipBackLength = context.querySelector('.selectSkipBackLength'); + const selectSkipBackLength = context.querySelector('.selectSkipBackLength'); fillSkipLengths(selectSkipBackLength); selectSkipBackLength.value = userSettings.skipBackLength(); - showOrHideEpisodesField(context, user, apiClient); + showOrHideEpisodesField(context); loading.hide(); } @@ -248,20 +259,20 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality loading.show(); - apiClient.getUser(userId).then(function (user) { + apiClient.getUser(userId).then(user => { - saveUser(context, user, userSettings, apiClient).then(function () { + saveUser(context, user, userSettings, apiClient).then(() => { loading.hide(); if (enableSaveConfirmation) { - require(['toast'], function (toast) { + import('toast').then(({default: toast}) => { toast(globalize.translate('SettingsSaved')); }); } events.trigger(instance, 'saved'); - }, function () { + }, () => { loading.hide(); }); }); @@ -269,14 +280,14 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality function onSubmit(e) { - var self = this; - var apiClient = connectionManager.getApiClient(self.options.serverId); - var userId = self.options.userId; - var userSettings = self.options.userSettings; + const self = this; + const apiClient = connectionManager.getApiClient(self.options.serverId); + const userId = self.options.userId; + const userSettings = self.options.userSettings; - userSettings.setUserInfo(userId, apiClient).then(function () { + userSettings.setUserInfo(userId, apiClient).then(() => { - var enableSaveConfirmation = self.options.enableSaveConfirmation; + const enableSaveConfirmation = self.options.enableSaveConfirmation; save(self, self.options.element, userId, userSettings, apiClient, enableSaveConfirmation); }); @@ -289,7 +300,7 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality function embed(options, self) { - require(['text!./playbackSettings.template.html'], function (template) { + return import('text!./playbackSettings.template.html').then(({default: template}) => { options.element.innerHTML = globalize.translateDocument(template, 'core'); @@ -307,43 +318,43 @@ define(['require', 'browser', 'appSettings', 'apphost', 'focusManager', 'quality }); } - function PlaybackSettings(options) { + class PlaybackSettings { + constructor(options) { + this.options = options; + embed(options, this); + } - this.options = options; + loadData() { - embed(options, this); + const self = this; + const context = self.options.element; + + loading.show(); + + const userId = self.options.userId; + const apiClient = connectionManager.getApiClient(self.options.serverId); + const userSettings = self.options.userSettings; + + apiClient.getUser(userId).then(user => { + + userSettings.setUserInfo(userId, apiClient).then(() => { + + self.dataLoaded = true; + + loadForm(context, user, userSettings, apiClient); + }); + }); + } + + submit() { + onSubmit.call(this); + } + + destroy() { + + this.options = null; + } } - PlaybackSettings.prototype.loadData = function () { - - var self = this; - var context = self.options.element; - - loading.show(); - - var userId = self.options.userId; - var apiClient = connectionManager.getApiClient(self.options.serverId); - var userSettings = self.options.userSettings; - - apiClient.getUser(userId).then(function (user) { - - userSettings.setUserInfo(userId, apiClient).then(function () { - - self.dataLoaded = true; - - loadForm(context, user, userSettings, apiClient); - }); - }); - }; - - PlaybackSettings.prototype.submit = function () { - onSubmit.call(this); - }; - - PlaybackSettings.prototype.destroy = function () { - - this.options = null; - }; - - return PlaybackSettings; -}); +/* eslint-enable indent */ +export default PlaybackSettings; diff --git a/src/controllers/user/playback.js b/src/controllers/user/playback.js index 02a718eb8..c138b5a86 100644 --- a/src/controllers/user/playback.js +++ b/src/controllers/user/playback.js @@ -21,7 +21,7 @@ define(['playbackSettings', 'dom', 'globalize', 'loading', 'userSettings', 'auto if (settingsInstance) { settingsInstance.loadData(); } else { - settingsInstance = new PlaybackSettings({ + settingsInstance = new PlaybackSettings.default({ serverId: ApiClient.serverId(), userId: userId, element: view.querySelector('.settingsContainer'), From 1ac3ecbfa7fee4b2301d66f4399704237badea5d Mon Sep 17 00:00:00 2001 From: Cameron Date: Wed, 8 Jul 2020 19:58:28 +0100 Subject: [PATCH 08/12] Migrate networking.js, playback.js, serveractivity.js to ES6 modules --- package.json | 3 +++ src/controllers/dashboard/networking.js | 14 ++++++++++---- src/controllers/dashboard/playback.js | 11 ++++++++--- src/controllers/dashboard/serveractivity.js | 11 +++++++---- 4 files changed, 28 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index 230eee3f2..152498a75 100644 --- a/package.json +++ b/package.json @@ -124,6 +124,9 @@ "src/components/settingshelper.js", "src/components/subtitlesettings/subtitlesettings.js", "src/components/subtitlesettings/subtitleappearancehelper.js", + "src/controllers/dashboard/playback.js", + "src/controllers/dashboard/serveractivity.js", + "src/controllers/dashboard/networking.js", "src/components/shortcuts.js", "src/components/syncPlay/groupSelectionMenu.js", "src/components/syncPlay/playbackPermissionManager.js", diff --git a/src/controllers/dashboard/networking.js b/src/controllers/dashboard/networking.js index 4ddde7f24..e9fdec639 100644 --- a/src/controllers/dashboard/networking.js +++ b/src/controllers/dashboard/networking.js @@ -1,5 +1,10 @@ -define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'], function (loading, libraryMenu, globalize) { - 'use strict'; +import loading from 'loading'; +import libraryMenu from 'libraryMenu'; +import globalize from 'globalize'; +import 'emby-checkbox'; +import 'emby-select'; + +/* eslint-disable indent */ function onSubmit(e) { var form = this; @@ -97,7 +102,7 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'], } } - return function (view, params) { + export default function (view, params) { function loadPage(page, config) { page.querySelector('#txtPortNumber').value = config.HttpServerPortNumber; page.querySelector('#txtPublicPort').value = config.PublicPort; @@ -159,4 +164,5 @@ define(['loading', 'libraryMenu', 'globalize', 'emby-checkbox', 'emby-select'], }); }); }; -}); + +/* eslint-enable indent */ diff --git a/src/controllers/dashboard/playback.js b/src/controllers/dashboard/playback.js index d5b67a296..9c7bc00b4 100644 --- a/src/controllers/dashboard/playback.js +++ b/src/controllers/dashboard/playback.js @@ -1,5 +1,9 @@ -define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading, libraryMenu, globalize) { - 'use strict'; +import $ from 'jQuery'; +import loading from 'loading'; +import libraryMenu from 'libraryMenu'; +import globalize from 'globalize'; + +/* eslint-disable indent */ function loadPage(page, config) { $('#txtMinResumePct', page).val(config.MinResumePct); @@ -45,4 +49,5 @@ define(['jQuery', 'loading', 'libraryMenu', 'globalize'], function ($, loading, loadPage(page, config); }); }); -}); + +/* eslint-enable indent */ diff --git a/src/controllers/dashboard/serveractivity.js b/src/controllers/dashboard/serveractivity.js index c48a2903a..2bd98836e 100644 --- a/src/controllers/dashboard/serveractivity.js +++ b/src/controllers/dashboard/serveractivity.js @@ -1,7 +1,9 @@ -define(['components/activitylog', 'globalize'], function (ActivityLog, globalize) { - 'use strict'; +import ActivityLog from 'components/activitylog'; +import globalize from 'globalize'; - return function (view, params) { +/* eslint-disable indent */ + + export default function (view, params) { var activityLog; if (params.useractivity !== 'false') { @@ -28,4 +30,5 @@ define(['components/activitylog', 'globalize'], function (ActivityLog, globalize activityLog = null; }); }; -}); + +/* eslint-ensable indent */ From e230e05e6ec670bca8d2498685c4885ff273d07e Mon Sep 17 00:00:00 2001 From: Cameron Date: Wed, 8 Jul 2020 20:24:44 +0100 Subject: [PATCH 09/12] migrate mediaLibrary to ES6 module --- package.json | 7 +++-- src/controllers/dashboard/mediaLibrary.js | 32 ++++++++++++++------- src/controllers/dashboard/serveractivity.js | 2 +- 3 files changed, 27 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index 152498a75..56aeb4c00 100644 --- a/package.json +++ b/package.json @@ -124,9 +124,6 @@ "src/components/settingshelper.js", "src/components/subtitlesettings/subtitlesettings.js", "src/components/subtitlesettings/subtitleappearancehelper.js", - "src/controllers/dashboard/playback.js", - "src/controllers/dashboard/serveractivity.js", - "src/controllers/dashboard/networking.js", "src/components/shortcuts.js", "src/components/syncPlay/groupSelectionMenu.js", "src/components/syncPlay/playbackPermissionManager.js", @@ -134,7 +131,11 @@ "src/components/syncPlay/timeSyncManager.js", "src/controllers/dashboard/logs.js", "src/controllers/user/subtitles.js", + "src/controllers/dashboard/mediaLibrary.js", + "src/controllers/dashboard/networking.js", + "src/controllers/dashboard/playback.js", "src/controllers/dashboard/plugins/repositories.js", + "src/controllers/dashboard/serveractivity.js", "src/plugins/bookPlayer/plugin.js", "src/plugins/bookPlayer/tableOfContents.js", "src/plugins/photoPlayer/plugin.js", diff --git a/src/controllers/dashboard/mediaLibrary.js b/src/controllers/dashboard/mediaLibrary.js index d9b288c62..1284602e4 100644 --- a/src/controllers/dashboard/mediaLibrary.js +++ b/src/controllers/dashboard/mediaLibrary.js @@ -1,8 +1,19 @@ -define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'globalize', 'dom', 'indicators', 'scripts/imagehelper', 'cardStyle', 'emby-itemrefreshindicator'], function ($, appHost, taskButton, loading, libraryMenu, globalize, dom, indicators, imageHelper) { - 'use strict'; +import $ from 'jQuery'; +import appHost from 'apphost'; +import taskButton from 'scripts/taskbutton'; +import loading from 'loading'; +import libraryMenu from 'libraryMenu'; +import globalize from 'globalize'; +import dom from 'dom'; +import indicators from 'indicators'; +import imageHelper from 'scripts/imagehelper'; +import 'cardStyle'; +import 'emby-itemrefreshindicator'; + +/* eslint-disable indent */ function addVirtualFolder(page) { - require(['medialibrarycreator'], function (medialibrarycreator) { + import('medialibrarycreator').then(({default: medialibrarycreator}) => { new medialibrarycreator.showEditor({ collectionTypeOptions: getCollectionTypeOptions().filter(function (f) { return !f.hidden; @@ -17,7 +28,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl } function editVirtualFolder(page, virtualFolder) { - require(['medialibraryeditor'], function (medialibraryeditor) { + import('medialibraryeditor').then(({default:medialibraryeditor }) => { new medialibraryeditor.showEditor({ refresh: shouldRefreshLibraryAfterChanges(page), library: virtualFolder @@ -37,7 +48,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl msg += virtualFolder.Locations.join('
'); } - require(['confirm'], function (confirm) { + import('confirm').then(({default: confirm}) => { confirm({ text: msg, @@ -55,7 +66,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl } function refreshVirtualFolder(page, virtualFolder) { - require(['refreshDialog'], function (refreshDialog) { + import('refreshDialog').then(({default: refreshDialog}) => { new refreshDialog({ itemIds: [virtualFolder.ItemId], serverId: ApiClient.serverId(), @@ -65,7 +76,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl } function renameVirtualFolder(page, virtualFolder) { - require(['prompt'], function (prompt) { + import('prompt').then(({default: prompt}) => { prompt({ label: globalize.translate('LabelNewName'), confirmText: globalize.translate('ButtonRename') @@ -111,7 +122,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl icon: 'refresh' }); - require(['actionsheet'], function (actionsheet) { + import('actionsheet').then(({default: actionsheet}) => { actionsheet.show({ items: menuItems, positionTo: elem, @@ -192,7 +203,7 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl } function editImages(page, virtualFolder) { - require(['imageEditor'], function (imageEditor) { + import('imageEditor').then(({default: imageEditor}) => { imageEditor.show({ itemId: virtualFolder.ItemId, serverId: ApiClient.serverId() @@ -388,4 +399,5 @@ define(['jQuery', 'apphost', 'scripts/taskbutton', 'loading', 'libraryMenu', 'gl button: page.querySelector('.btnRefresh') }); }); -}); + +/* eslint-enable indent */ diff --git a/src/controllers/dashboard/serveractivity.js b/src/controllers/dashboard/serveractivity.js index 2bd98836e..624c5cc4a 100644 --- a/src/controllers/dashboard/serveractivity.js +++ b/src/controllers/dashboard/serveractivity.js @@ -31,4 +31,4 @@ import globalize from 'globalize'; }); }; -/* eslint-ensable indent */ +/* eslint-enable indent */ From 8ad12fa0bbee164443af9f049ae5eaf5959389dc Mon Sep 17 00:00:00 2001 From: Cameron Date: Thu, 9 Jul 2020 14:23:41 +0100 Subject: [PATCH 10/12] migration of device and devices.js to ES6 modules --- package.json | 2 ++ src/controllers/dashboard/devices/device.js | 14 ++++++++---- src/controllers/dashboard/devices/devices.js | 23 +++++++++++++++----- 3 files changed, 29 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 230eee3f2..f0b5d34b7 100644 --- a/package.json +++ b/package.json @@ -132,6 +132,8 @@ "src/controllers/dashboard/logs.js", "src/controllers/user/subtitles.js", "src/controllers/dashboard/plugins/repositories.js", + "src/controllers/dashboard/devices/devices.js", + "src/controllers/dashboard/devices/device.js", "src/plugins/bookPlayer/plugin.js", "src/plugins/bookPlayer/tableOfContents.js", "src/plugins/photoPlayer/plugin.js", diff --git a/src/controllers/dashboard/devices/device.js b/src/controllers/dashboard/devices/device.js index 9ff3f5902..69a282db6 100644 --- a/src/controllers/dashboard/devices/device.js +++ b/src/controllers/dashboard/devices/device.js @@ -1,5 +1,10 @@ -define(['loading', 'libraryMenu', 'dom', 'emby-input', 'emby-button'], function (loading, libraryMenu, dom) { - 'use strict'; +import loading from 'loading'; +import libraryMenu from 'libraryMenu'; +import dom from 'dom'; +import 'emby-input'; +import 'emby-button'; + +/* eslint-disable indent */ function load(page, device, deviceOptions) { page.querySelector('#txtCustomName', page).value = deviceOptions.CustomName || ''; @@ -43,8 +48,9 @@ define(['loading', 'libraryMenu', 'dom', 'emby-input', 'emby-button'], function return false; } - return function (view, params) { + export default function (view, params) { view.querySelector('form').addEventListener('submit', onSubmit); view.addEventListener('viewshow', loadData); }; -}); + +/* eslint-enable indent */ diff --git a/src/controllers/dashboard/devices/devices.js b/src/controllers/dashboard/devices/devices.js index 0dea81c75..fe8f9e612 100644 --- a/src/controllers/dashboard/devices/devices.js +++ b/src/controllers/dashboard/devices/devices.js @@ -1,5 +1,15 @@ -define(['loading', 'dom', 'libraryMenu', 'globalize', 'scripts/imagehelper', 'date-fns', 'dfnshelper', 'emby-button', 'emby-itemscontainer', 'cardStyle'], function (loading, dom, libraryMenu, globalize, imageHelper, datefns, dfnshelper) { - 'use strict'; +import loading from 'loading'; +import dom from 'dom'; +import libraryMenu from 'libraryMenu'; +import globalize from 'globalize'; +import imageHelper from 'scripts/imagehelper'; +import * as datefns from 'date-fns'; +import dfnshelper from 'dfnshelper'; +import 'emby-button'; +import 'emby-itemscontainer'; +import 'cardStyle'; + +/* eslint-disable indent */ function canDelete(deviceId) { return deviceId !== ApiClient.deviceId(); @@ -8,7 +18,7 @@ define(['loading', 'dom', 'libraryMenu', 'globalize', 'scripts/imagehelper', 'da function deleteDevice(page, id) { var msg = globalize.translate('DeleteDeviceConfirmation'); - require(['confirm'], function (confirm) { + import('confirm').then(({default: confirm}) => { confirm({ text: msg, title: globalize.translate('HeaderDeleteDevice'), @@ -47,7 +57,7 @@ define(['loading', 'dom', 'libraryMenu', 'globalize', 'scripts/imagehelper', 'da }); } - require(['actionsheet'], function (actionsheet) { + import('actionsheet').then(({default: actionsheet}) => { actionsheet.show({ items: menuItems, positionTo: btn, @@ -125,7 +135,7 @@ define(['loading', 'dom', 'libraryMenu', 'globalize', 'scripts/imagehelper', 'da } var canEdit = ApiClient.isMinServerVersion('3.4.1.31'); - return function (view, params) { + export default function (view, params) { view.querySelector('.devicesList').addEventListener('click', function (e) { var btnDeviceMenu = dom.parentWithClass(e.target, 'btnDeviceMenu'); @@ -137,4 +147,5 @@ define(['loading', 'dom', 'libraryMenu', 'globalize', 'scripts/imagehelper', 'da loadData(this); }); }; -}); + +/* eslint-enable indent */ From 39c1b6fa6591f053a5a6aba79ad125d5294901b2 Mon Sep 17 00:00:00 2001 From: Cameron Date: Sat, 11 Jul 2020 11:26:24 +0100 Subject: [PATCH 11/12] update var declerations --- src/controllers/dashboard/devices/device.js | 14 +++++++------- src/controllers/dashboard/devices/devices.js | 16 ++++++++-------- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/controllers/dashboard/devices/device.js b/src/controllers/dashboard/devices/device.js index 69a282db6..7faaee249 100644 --- a/src/controllers/dashboard/devices/device.js +++ b/src/controllers/dashboard/devices/device.js @@ -12,13 +12,13 @@ import 'emby-button'; } function loadData() { - var page = this; + const page = this; loading.show(); - var id = getParameterByName('id'); - var promise1 = ApiClient.getJSON(ApiClient.getUrl('Devices/Info', { + const id = getParameterByName('id'); + const promise1 = ApiClient.getJSON(ApiClient.getUrl('Devices/Info', { Id: id })); - var promise2 = ApiClient.getJSON(ApiClient.getUrl('Devices/Options', { + const promise2 = ApiClient.getJSON(ApiClient.getUrl('Devices/Options', { Id: id })); Promise.all([promise1, promise2]).then(function (responses) { @@ -28,7 +28,7 @@ import 'emby-button'; } function save(page) { - var id = getParameterByName('id'); + const id = getParameterByName('id'); ApiClient.ajax({ url: ApiClient.getUrl('Devices/Options', { Id: id @@ -42,7 +42,7 @@ import 'emby-button'; } function onSubmit(e) { - var form = this; + const form = this; save(dom.parentWithClass(form, 'page')); e.preventDefault(); return false; @@ -51,6 +51,6 @@ import 'emby-button'; export default function (view, params) { view.querySelector('form').addEventListener('submit', onSubmit); view.addEventListener('viewshow', loadData); - }; + } /* eslint-enable indent */ diff --git a/src/controllers/dashboard/devices/devices.js b/src/controllers/dashboard/devices/devices.js index fe8f9e612..9f05d8471 100644 --- a/src/controllers/dashboard/devices/devices.js +++ b/src/controllers/dashboard/devices/devices.js @@ -16,7 +16,7 @@ import 'cardStyle'; } function deleteDevice(page, id) { - var msg = globalize.translate('DeleteDeviceConfirmation'); + const msg = globalize.translate('DeleteDeviceConfirmation'); import('confirm').then(({default: confirm}) => { confirm({ @@ -39,7 +39,7 @@ import 'cardStyle'; } function showDeviceMenu(view, btn, deviceId) { - var menuItems = []; + let menuItems = []; if (canEdit) { menuItems.push({ @@ -76,15 +76,15 @@ import 'cardStyle'; } function load(page, devices) { - var html = ''; + let html = ''; html += devices.map(function (device) { - var deviceHtml = ''; + let deviceHtml = ''; deviceHtml += "
"; deviceHtml += '
'; deviceHtml += '
'; deviceHtml += '
'; deviceHtml += ''; - var iconUrl = imageHelper.getDeviceIcon(device); + const iconUrl = imageHelper.getDeviceIcon(device); if (iconUrl) { deviceHtml += '
"; @@ -134,10 +134,10 @@ import 'cardStyle'; }); } - var canEdit = ApiClient.isMinServerVersion('3.4.1.31'); + const canEdit = ApiClient.isMinServerVersion('3.4.1.31'); export default function (view, params) { view.querySelector('.devicesList').addEventListener('click', function (e) { - var btnDeviceMenu = dom.parentWithClass(e.target, 'btnDeviceMenu'); + const btnDeviceMenu = dom.parentWithClass(e.target, 'btnDeviceMenu'); if (btnDeviceMenu) { showDeviceMenu(view, btnDeviceMenu, btnDeviceMenu.getAttribute('data-id')); @@ -146,6 +146,6 @@ import 'cardStyle'; view.addEventListener('viewshow', function () { loadData(this); }); - }; + } /* eslint-enable indent */ From fd21f2198df4cc198feb06206d22c1ee0586c733 Mon Sep 17 00:00:00 2001 From: Cameron Date: Thu, 9 Jul 2020 11:36:54 +0100 Subject: [PATCH 12/12] fix medialibrary.js, lint and convert variable declerations --- src/controllers/dashboard/mediaLibrary.js | 48 ++++++++++----------- src/controllers/dashboard/networking.js | 20 ++++----- src/controllers/dashboard/playback.js | 4 +- src/controllers/dashboard/serveractivity.js | 4 +- 4 files changed, 38 insertions(+), 38 deletions(-) diff --git a/src/controllers/dashboard/mediaLibrary.js b/src/controllers/dashboard/mediaLibrary.js index 1284602e4..e7f00e835 100644 --- a/src/controllers/dashboard/mediaLibrary.js +++ b/src/controllers/dashboard/mediaLibrary.js @@ -14,7 +14,7 @@ import 'emby-itemrefreshindicator'; function addVirtualFolder(page) { import('medialibrarycreator').then(({default: medialibrarycreator}) => { - new medialibrarycreator.showEditor({ + new medialibrarycreator({ collectionTypeOptions: getCollectionTypeOptions().filter(function (f) { return !f.hidden; }), @@ -28,8 +28,8 @@ import 'emby-itemrefreshindicator'; } function editVirtualFolder(page, virtualFolder) { - import('medialibraryeditor').then(({default:medialibraryeditor }) => { - new medialibraryeditor.showEditor({ + import('medialibraryeditor').then(({default: medialibraryeditor}) => { + new medialibraryeditor({ refresh: shouldRefreshLibraryAfterChanges(page), library: virtualFolder }).then(function (hasChanges) { @@ -41,7 +41,7 @@ import 'emby-itemrefreshindicator'; } function deleteVirtualFolder(page, virtualFolder) { - var msg = globalize.translate('MessageAreYouSureYouWishToRemoveMediaFolder'); + let msg = globalize.translate('MessageAreYouSureYouWishToRemoveMediaFolder'); if (virtualFolder.Locations.length) { msg += '

' + globalize.translate('MessageTheFollowingLocationWillBeRemovedFromLibrary') + '

'; @@ -57,7 +57,7 @@ import 'emby-itemrefreshindicator'; primary: 'delete' }).then(function () { - var refreshAfterChange = shouldRefreshLibraryAfterChanges(page); + const refreshAfterChange = shouldRefreshLibraryAfterChanges(page); ApiClient.removeVirtualFolder(virtualFolder.Name, refreshAfterChange).then(function () { reloadLibrary(page); }); @@ -82,7 +82,7 @@ import 'emby-itemrefreshindicator'; confirmText: globalize.translate('ButtonRename') }).then(function (newName) { if (newName && newName != virtualFolder.Name) { - var refreshAfterChange = shouldRefreshLibraryAfterChanges(page); + const refreshAfterChange = shouldRefreshLibraryAfterChanges(page); ApiClient.renameVirtualFolder(virtualFolder.Name, newName, refreshAfterChange).then(function () { reloadLibrary(page); }); @@ -92,10 +92,10 @@ import 'emby-itemrefreshindicator'; } function showCardMenu(page, elem, virtualFolders) { - var card = dom.parentWithClass(elem, 'card'); - var index = parseInt(card.getAttribute('data-index')); - var virtualFolder = virtualFolders[index]; - var menuItems = []; + const card = dom.parentWithClass(elem, 'card'); + const index = parseInt(card.getAttribute('data-index')); + const virtualFolder = virtualFolders[index]; + const menuItems = []; menuItems.push({ name: globalize.translate('ButtonEditImages'), id: 'editimages', @@ -164,7 +164,7 @@ import 'emby-itemrefreshindicator'; } function reloadVirtualFolders(page, virtualFolders) { - var html = ''; + let html = ''; virtualFolders.push({ Name: globalize.translate('ButtonAddMediaLibrary'), icon: 'add_circle', @@ -175,12 +175,12 @@ import 'emby-itemrefreshindicator'; showNameWithIcon: true }); - for (var i = 0; i < virtualFolders.length; i++) { - var virtualFolder = virtualFolders[i]; + for (let i = 0; i < virtualFolders.length; i++) { + const virtualFolder = virtualFolders[i]; html += getVirtualFolderHtml(page, virtualFolder, i); } - var divVirtualFolders = page.querySelector('#divVirtualFolders'); + const divVirtualFolders = page.querySelector('#divVirtualFolders'); divVirtualFolders.innerHTML = html; divVirtualFolders.classList.add('itemsContainer'); divVirtualFolders.classList.add('vertical-wrap'); @@ -191,9 +191,9 @@ import 'emby-itemrefreshindicator'; addVirtualFolder(page); }); $('.editLibrary', divVirtualFolders).on('click', function () { - var card = $(this).parents('.card')[0]; - var index = parseInt(card.getAttribute('data-index')); - var virtualFolder = virtualFolders[index]; + const card = $(this).parents('.card')[0]; + const index = parseInt(card.getAttribute('data-index')); + const virtualFolder = virtualFolders[index]; if (virtualFolder.ItemId) { editVirtualFolder(page, virtualFolder); @@ -251,8 +251,8 @@ import 'emby-itemrefreshindicator'; } function getVirtualFolderHtml(page, virtualFolder, index) { - var html = ''; - var style = ''; + let html = ''; + let style = ''; if (page.classList.contains('wizardPage')) { style += 'min-width:33.3%;'; @@ -263,7 +263,7 @@ import 'emby-itemrefreshindicator'; html += '
'; html += '
'; html += '
'; - var imgUrl = ''; + let imgUrl = ''; if (virtualFolder.PrimaryImageItemId) { imgUrl = ApiClient.getScaledImageUrl(virtualFolder.PrimaryImageItemId, { @@ -272,7 +272,7 @@ import 'emby-itemrefreshindicator'; }); } - var hasCardImageContainer; + let hasCardImageContainer; if (imgUrl) { html += '
"; @@ -322,7 +322,7 @@ import 'emby-itemrefreshindicator'; } html += '
'; - var typeName = getCollectionTypeOptions().filter(function (t) { + let typeName = getCollectionTypeOptions().filter(function (t) { return t.value == virtualFolder.CollectionType; })[0]; typeName = typeName ? typeName.name : globalize.translate('FolderTypeUnset'); @@ -382,7 +382,7 @@ import 'emby-itemrefreshindicator'; }); pageIdOn('pageshow', 'mediaLibraryPage', function () { libraryMenu.setTabs('librarysetup', 0, getTabs); - var page = this; + const page = this; taskButton({ mode: 'on', progressElem: page.querySelector('.refreshProgress'), @@ -391,7 +391,7 @@ import 'emby-itemrefreshindicator'; }); }); pageIdOn('pagebeforehide', 'mediaLibraryPage', function () { - var page = this; + const page = this; taskButton({ mode: 'off', progressElem: page.querySelector('.refreshProgress'), diff --git a/src/controllers/dashboard/networking.js b/src/controllers/dashboard/networking.js index e9fdec639..5b0342ec2 100644 --- a/src/controllers/dashboard/networking.js +++ b/src/controllers/dashboard/networking.js @@ -7,11 +7,11 @@ import 'emby-select'; /* eslint-disable indent */ function onSubmit(e) { - var form = this; - var localAddress = form.querySelector('#txtLocalAddress').value; - var enableUpnp = form.querySelector('#chkEnableUpnp').checked; + const form = this; + const localAddress = form.querySelector('#txtLocalAddress').value; + const enableUpnp = form.querySelector('#chkEnableUpnp').checked; confirmSelections(localAddress, enableUpnp, function () { - var validationResult = getValidationAlert(form); + const validationResult = getValidationAlert(form); if (validationResult) { showAlertText(validationResult); @@ -52,7 +52,7 @@ import 'emby-select'; } function triggerChange(select) { - var evt = document.createEvent('HTMLEvents'); + const evt = document.createEvent('HTMLEvents'); evt.initEvent('change', false, true); select.dispatchEvent(evt); } @@ -70,8 +70,8 @@ import 'emby-select'; } function validateHttps(form) { - var certPath = form.querySelector('#txtCertificatePath').value || null; - var httpsEnabled = form.querySelector('#chkEnableHttps').checked; + const certPath = form.querySelector('#txtCertificatePath').value || null; + const httpsEnabled = form.querySelector('#chkEnableHttps').checked; if (httpsEnabled && !certPath) { return showAlertText({ @@ -116,7 +116,7 @@ import 'emby-select'; page.querySelector('#chkEnableHttps').checked = config.EnableHttps; page.querySelector('#chkRequireHttps').checked = config.RequireHttps; page.querySelector('#txtBaseUrl').value = config.BaseUrl || ''; - var txtCertificatePath = page.querySelector('#txtCertificatePath'); + const txtCertificatePath = page.querySelector('#txtCertificatePath'); txtCertificatePath.value = config.CertificatePath || ''; page.querySelector('#txtCertPassword').value = config.CertificatePassword || ''; page.querySelector('#chkEnableUpnp').checked = config.EnableUPnP; @@ -141,7 +141,7 @@ import 'emby-select'; }); view.querySelector('#btnSelectCertPath').addEventListener('click', function () { require(['directorybrowser'], function (directoryBrowser) { - var picker = new directoryBrowser(); + const picker = new directoryBrowser(); picker.show({ includeFiles: true, includeDirectories: true, @@ -163,6 +163,6 @@ import 'emby-select'; loadPage(view, config); }); }); - }; + } /* eslint-enable indent */ diff --git a/src/controllers/dashboard/playback.js b/src/controllers/dashboard/playback.js index 9c7bc00b4..0406c2192 100644 --- a/src/controllers/dashboard/playback.js +++ b/src/controllers/dashboard/playback.js @@ -14,7 +14,7 @@ import globalize from 'globalize'; function onSubmit() { loading.show(); - var form = this; + const form = this; ApiClient.getServerConfiguration().then(function (config) { config.MinResumePct = $('#txtMinResumePct', form).val(); config.MaxResumePct = $('#txtMaxResumePct', form).val(); @@ -44,7 +44,7 @@ import globalize from 'globalize'; }).on('pageshow', '#playbackConfigurationPage', function () { loading.show(); libraryMenu.setTabs('playback', 1, getTabs); - var page = this; + const page = this; ApiClient.getServerConfiguration().then(function (config) { loadPage(page, config); }); diff --git a/src/controllers/dashboard/serveractivity.js b/src/controllers/dashboard/serveractivity.js index 624c5cc4a..ed5612626 100644 --- a/src/controllers/dashboard/serveractivity.js +++ b/src/controllers/dashboard/serveractivity.js @@ -4,7 +4,7 @@ import globalize from 'globalize'; /* eslint-disable indent */ export default function (view, params) { - var activityLog; + let activityLog; if (params.useractivity !== 'false') { view.querySelector('.activityItems').setAttribute('data-useractivity', 'true'); @@ -29,6 +29,6 @@ import globalize from 'globalize'; activityLog = null; }); - }; + } /* eslint-enable indent */