From d07a0aa3a9da5d949ff2270491ff0a48071cd1d3 Mon Sep 17 00:00:00 2001 From: Cameron Date: Wed, 8 Jul 2020 18:01:19 +0100 Subject: [PATCH 1/2] Migrate emby-itemscontainer, playstatebutton, programcell to ES6 modules --- package.json | 3 ++ .../emby-itemscontainer.js | 32 +++++++++++++------ .../emby-playstatebutton.js | 12 +++++-- .../emby-programcell/emby-programcell.js | 22 ++++++------- 4 files changed, 44 insertions(+), 25 deletions(-) diff --git a/package.json b/package.json index 230eee3f21..361bc444ca 100644 --- a/package.json +++ b/package.json @@ -132,6 +132,9 @@ "src/controllers/dashboard/logs.js", "src/controllers/user/subtitles.js", "src/controllers/dashboard/plugins/repositories.js", + "src/elements/emby-itemscontainer/emby-itemscontainer.js", + "src/elements/emby-programcell/emby-programcell.js", + "src/elements/emby-playstatebutton/emby-playstatebutton.js", "src/plugins/bookPlayer/plugin.js", "src/plugins/bookPlayer/tableOfContents.js", "src/plugins/photoPlayer/plugin.js", diff --git a/src/elements/emby-itemscontainer/emby-itemscontainer.js b/src/elements/emby-itemscontainer/emby-itemscontainer.js index 5d3772ca93..5c456b6fe2 100644 --- a/src/elements/emby-itemscontainer/emby-itemscontainer.js +++ b/src/elements/emby-itemscontainer/emby-itemscontainer.js @@ -1,5 +1,18 @@ -define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', 'imageLoader', 'layoutManager', 'browser', 'dom', 'loading', 'focusManager', 'serverNotifications', 'events', 'registerElement'], function (itemShortcuts, inputManager, connectionManager, playbackManager, imageLoader, layoutManager, browser, dom, loading, focusManager, serverNotifications, events) { - 'use strict'; +import itemShortcuts from 'itemShortcuts'; +import inputManager from 'inputManager'; +import connectionManager from 'connectionManager'; +import playbackManager from 'playbackManager'; +import imageLoader from 'imageLoader'; +import layoutManager from 'layoutManager'; +import browser from 'browser'; +import dom from 'dom'; +import loading from 'loading'; +import focusManager from 'focusManager'; +import serverNotifications from 'serverNotifications'; +import events from 'events'; +import 'registerElement'; + +/* eslint-disable indent */ var ItemsContainerPrototype = Object.create(HTMLDivElement.prototype); @@ -62,7 +75,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } var self = this; - require(['multiSelect'], function (MultiSelect) { + import('multiSelect').then(({default: MultiSelect}) => { self.multiSelect = new MultiSelect({ container: self, bindOnClick: false @@ -122,7 +135,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } var self = this; - require(['sortable'], function (Sortable) { + import('sortable').then(({default: Sortable}) => { self.sortable = new Sortable(self, { draggable: '.listItem', handle: '.listViewDragHandle', @@ -139,7 +152,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', var itemsContainer = this; - require(['cardBuilder'], function (cardBuilder) { + import('cardBuilder').then(({default: cardBuilder}) => { cardBuilder.onUserDataChanged(userData, itemsContainer); }); @@ -175,7 +188,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', // This could be null, not supported by all tv providers var newTimerId = data.Id; - require(['cardBuilder'], function (cardBuilder) { + import('cardBuilder').then(({default: cardBuilder}) => { cardBuilder.onTimerCreated(programId, newTimerId, itemsContainer); }); } @@ -195,7 +208,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', return; } - require(['cardBuilder'], function (cardBuilder) { + import('cardBuilder').then(({default: cardBuilder}) => { cardBuilder.onTimerCancelled(data.Id, itemsContainer); }); } @@ -207,7 +220,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', return; } - require(['cardBuilder'], function (cardBuilder) { + import('cardBuilder').then(({default: cardBuilder}) => { cardBuilder.onSeriesTimerCancelled(data.Id, itemsContainer); }); } @@ -479,4 +492,5 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', prototype: ItemsContainerPrototype, extends: 'div' }); -}); + +/* eslint-enable indent */ diff --git a/src/elements/emby-playstatebutton/emby-playstatebutton.js b/src/elements/emby-playstatebutton/emby-playstatebutton.js index 57f7eb76eb..a14d913387 100644 --- a/src/elements/emby-playstatebutton/emby-playstatebutton.js +++ b/src/elements/emby-playstatebutton/emby-playstatebutton.js @@ -1,5 +1,10 @@ -define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby-button'], function (connectionManager, serverNotifications, events, globalize, EmbyButtonPrototype) { - 'use strict'; +import connectionManager from 'connectionManager'; +import serverNotifications from 'serverNotifications'; +import events from 'events'; +import globalize from 'globalize'; +import EmbyButtonPrototype from 'emby-button'; + +/* eslint-disable indent */ function addNotificationEvent(instance, name, handler) { var localHandler = handler.bind(instance); @@ -156,4 +161,5 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby prototype: EmbyPlaystateButtonPrototype, extends: 'button' }); -}); + +/* eslint-enable indent */ diff --git a/src/elements/emby-programcell/emby-programcell.js b/src/elements/emby-programcell/emby-programcell.js index a959033186..d5f6de8a09 100644 --- a/src/elements/emby-programcell/emby-programcell.js +++ b/src/elements/emby-programcell/emby-programcell.js @@ -1,16 +1,12 @@ -define([], function() { - 'use strict'; +var ProgramCellPrototype = Object.create(HTMLButtonElement.prototype); - var ProgramCellPrototype = Object.create(HTMLButtonElement.prototype); +ProgramCellPrototype.detachedCallback = function () { + this.posLeft = null; + this.posWidth = null; + this.guideProgramName = null; +}; - ProgramCellPrototype.detachedCallback = function () { - this.posLeft = null; - this.posWidth = null; - this.guideProgramName = null; - }; - - document.registerElement('emby-programcell', { - prototype: ProgramCellPrototype, - extends: 'button' - }); +document.registerElement('emby-programcell', { + prototype: ProgramCellPrototype, + extends: 'button' }); From b4e43f2436981e3d4201ac201e8cff662d50bb53 Mon Sep 17 00:00:00 2001 From: Cameron Date: Fri, 10 Jul 2020 18:09:02 +0100 Subject: [PATCH 2/2] remove var --- .../emby-itemscontainer.js | 97 +++++++++---------- .../emby-playstatebutton.js | 26 ++--- .../emby-programcell/emby-programcell.js | 2 +- 3 files changed, 62 insertions(+), 63 deletions(-) diff --git a/src/elements/emby-itemscontainer/emby-itemscontainer.js b/src/elements/emby-itemscontainer/emby-itemscontainer.js index 5c456b6fe2..58e8565289 100644 --- a/src/elements/emby-itemscontainer/emby-itemscontainer.js +++ b/src/elements/emby-itemscontainer/emby-itemscontainer.js @@ -14,12 +14,12 @@ import 'registerElement'; /* eslint-disable indent */ - var ItemsContainerPrototype = Object.create(HTMLDivElement.prototype); + const ItemsContainerPrototype = Object.create(HTMLDivElement.prototype); function onClick(e) { - var itemsContainer = this; - var target = e.target; - var multiSelect = itemsContainer.multiSelect; + const itemsContainer = this; + const target = e.target; + let multiSelect = itemsContainer.multiSelect; if (multiSelect) { if (multiSelect.onContainerClick.call(itemsContainer, e) === false) { @@ -37,9 +37,8 @@ import 'registerElement'; } function onContextMenu(e) { - var itemsContainer = this; - var target = e.target; - var card = dom.parentWithAttribute(target, 'data-id'); + const target = e.target; + const card = dom.parentWithAttribute(target, 'data-id'); // check for serverId, it won't be present on selectserver if (card && card.getAttribute('data-serverid')) { @@ -60,7 +59,7 @@ import 'registerElement'; } ItemsContainerPrototype.enableMultiSelect = function (enabled) { - var current = this.multiSelect; + const current = this.multiSelect; if (!enabled) { if (current) { @@ -74,7 +73,7 @@ import 'registerElement'; return; } - var self = this; + const self = this; import('multiSelect').then(({default: MultiSelect}) => { self.multiSelect = new MultiSelect({ container: self, @@ -84,14 +83,14 @@ import 'registerElement'; }; function onDrop(evt, itemsContainer) { - var el = evt.item; + const el = evt.item; - var newIndex = evt.newIndex; - var itemId = el.getAttribute('data-playlistitemid'); - var playlistId = el.getAttribute('data-playlistid'); + const newIndex = evt.newIndex; + const itemId = el.getAttribute('data-playlistitemid'); + const playlistId = el.getAttribute('data-playlistid'); if (!playlistId) { - var oldIndex = evt.oldIndex; + const oldIndex = evt.oldIndex; el.dispatchEvent(new CustomEvent('itemdrop', { detail: { oldIndex: oldIndex, @@ -104,8 +103,8 @@ import 'registerElement'; return; } - var serverId = el.getAttribute('data-serverid'); - var apiClient = connectionManager.getApiClient(serverId); + const serverId = el.getAttribute('data-serverid'); + const apiClient = connectionManager.getApiClient(serverId); loading.show(); @@ -121,7 +120,7 @@ import 'registerElement'; } ItemsContainerPrototype.enableDragReordering = function (enabled) { - var current = this.sortable; + const current = this.sortable; if (!enabled) { if (current) { current.destroy(); @@ -134,7 +133,7 @@ import 'registerElement'; return; } - var self = this; + const self = this; import('sortable').then(({default: Sortable}) => { self.sortable = new Sortable(self, { draggable: '.listItem', @@ -150,13 +149,13 @@ import 'registerElement'; function onUserDataChanged(e, apiClient, userData) { - var itemsContainer = this; + const itemsContainer = this; import('cardBuilder').then(({default: cardBuilder}) => { cardBuilder.onUserDataChanged(userData, itemsContainer); }); - var eventsToMonitor = getEventsToMonitor(itemsContainer); + const eventsToMonitor = getEventsToMonitor(itemsContainer); // TODO: Check user data change reason? if (eventsToMonitor.indexOf('markfavorite') !== -1) { @@ -167,7 +166,7 @@ import 'registerElement'; } function getEventsToMonitor(itemsContainer) { - var monitor = itemsContainer.getAttribute('data-monitor'); + let monitor = itemsContainer.getAttribute('data-monitor'); if (monitor) { return monitor.split(','); } @@ -177,16 +176,16 @@ import 'registerElement'; function onTimerCreated(e, apiClient, data) { - var itemsContainer = this; + const itemsContainer = this; if (getEventsToMonitor(itemsContainer).indexOf('timers') !== -1) { itemsContainer.notifyRefreshNeeded(); return; } - var programId = data.ProgramId; + const programId = data.ProgramId; // This could be null, not supported by all tv providers - var newTimerId = data.Id; + const newTimerId = data.Id; import('cardBuilder').then(({default: cardBuilder}) => { cardBuilder.onTimerCreated(programId, newTimerId, itemsContainer); @@ -194,7 +193,7 @@ import 'registerElement'; } function onSeriesTimerCreated(e, apiClient, data) { - var itemsContainer = this; + const itemsContainer = this; if (getEventsToMonitor(itemsContainer).indexOf('seriestimers') !== -1) { itemsContainer.notifyRefreshNeeded(); return; @@ -202,7 +201,7 @@ import 'registerElement'; } function onTimerCancelled(e, apiClient, data) { - var itemsContainer = this; + const itemsContainer = this; if (getEventsToMonitor(itemsContainer).indexOf('timers') !== -1) { itemsContainer.notifyRefreshNeeded(); return; @@ -214,7 +213,7 @@ import 'registerElement'; } function onSeriesTimerCancelled(e, apiClient, data) { - var itemsContainer = this; + const itemsContainer = this; if (getEventsToMonitor(itemsContainer).indexOf('seriestimers') !== -1) { itemsContainer.notifyRefreshNeeded(); return; @@ -226,25 +225,25 @@ import 'registerElement'; } function onLibraryChanged(e, apiClient, data) { - var itemsContainer = this; + const itemsContainer = this; - var eventsToMonitor = getEventsToMonitor(itemsContainer); + const eventsToMonitor = getEventsToMonitor(itemsContainer); if (eventsToMonitor.indexOf('seriestimers') !== -1 || eventsToMonitor.indexOf('timers') !== -1) { // yes this is an assumption return; } - var itemsAdded = data.ItemsAdded || []; - var itemsRemoved = data.ItemsRemoved || []; + const itemsAdded = data.ItemsAdded || []; + const itemsRemoved = data.ItemsRemoved || []; if (!itemsAdded.length && !itemsRemoved.length) { return; } - var parentId = itemsContainer.getAttribute('data-parentid'); + const parentId = itemsContainer.getAttribute('data-parentid'); if (parentId) { - var foldersAddedTo = data.FoldersAddedTo || []; - var foldersRemovedFrom = data.FoldersRemovedFrom || []; - var collectionFolders = data.CollectionFolders || []; + const foldersAddedTo = data.FoldersAddedTo || []; + const foldersRemovedFrom = data.FoldersRemovedFrom || []; + const collectionFolders = data.CollectionFolders || []; if (foldersAddedTo.indexOf(parentId) === -1 && foldersRemovedFrom.indexOf(parentId) === -1 && collectionFolders.indexOf(parentId) === -1) { return; @@ -255,10 +254,10 @@ import 'registerElement'; } function onPlaybackStopped(e, stopInfo) { - var itemsContainer = this; - var state = stopInfo.state; + const itemsContainer = this; + const state = stopInfo.state; - var eventsToMonitor = getEventsToMonitor(itemsContainer); + const eventsToMonitor = getEventsToMonitor(itemsContainer); if (state.NowPlayingItem && state.NowPlayingItem.MediaType === 'Video') { if (eventsToMonitor.indexOf('videoplayback') !== -1) { itemsContainer.notifyRefreshNeeded(true); @@ -273,14 +272,14 @@ import 'registerElement'; } function addNotificationEvent(instance, name, handler, owner) { - var localHandler = handler.bind(instance); + const localHandler = handler.bind(instance); owner = owner || serverNotifications; events.on(owner, name, localHandler); instance['event_' + name] = localHandler; } function removeNotificationEvent(instance, name, owner) { - var handler = instance['event_' + name]; + const handler = instance['event_' + name]; if (handler) { owner = owner || serverNotifications; events.off(owner, name, handler); @@ -360,10 +359,10 @@ import 'registerElement'; ItemsContainerPrototype.resume = function (options) { this.paused = false; - var refreshIntervalEndTime = this.refreshIntervalEndTime; + let refreshIntervalEndTime = this.refreshIntervalEndTime; if (refreshIntervalEndTime) { - var remainingMs = refreshIntervalEndTime - new Date().getTime(); + const remainingMs = refreshIntervalEndTime - new Date().getTime(); if (remainingMs > 0 && !this.needsRefresh) { resetRefreshInterval(this, remainingMs); } else { @@ -400,7 +399,7 @@ import 'registerElement'; return; } - var timeout = this.refreshTimeout; + let timeout = this.refreshTimeout; if (timeout) { clearTimeout(timeout); } @@ -437,9 +436,9 @@ import 'registerElement'; } function onDataFetched(result) { - var items = result.Items || result; + const items = result.Items || result; - var parentContainer = this.parentContainer; + let parentContainer = this.parentContainer; if (parentContainer) { if (items.length) { parentContainer.classList.remove('hide'); @@ -448,9 +447,9 @@ import 'registerElement'; } } - var activeElement = document.activeElement; - var focusId; - var hasActiveElement; + const activeElement = document.activeElement; + let focusId; + let hasActiveElement; if (this.contains(activeElement)) { hasActiveElement = true; @@ -474,7 +473,7 @@ import 'registerElement'; function setFocus(itemsContainer, focusId) { if (focusId) { - var newElement = itemsContainer.querySelector('[data-id="' + focusId + '"]'); + const newElement = itemsContainer.querySelector('[data-id="' + focusId + '"]'); if (newElement) { try { focusManager.focus(newElement); diff --git a/src/elements/emby-playstatebutton/emby-playstatebutton.js b/src/elements/emby-playstatebutton/emby-playstatebutton.js index a14d913387..e1b34318b8 100644 --- a/src/elements/emby-playstatebutton/emby-playstatebutton.js +++ b/src/elements/emby-playstatebutton/emby-playstatebutton.js @@ -7,13 +7,13 @@ import EmbyButtonPrototype from 'emby-button'; /* eslint-disable indent */ function addNotificationEvent(instance, name, handler) { - var localHandler = handler.bind(instance); + const localHandler = handler.bind(instance); events.on(serverNotifications, name, localHandler); instance[name] = localHandler; } function removeNotificationEvent(instance, name) { - var handler = instance[name]; + const handler = instance[name]; if (handler) { events.off(serverNotifications, name, handler); instance[name] = null; @@ -22,10 +22,10 @@ import EmbyButtonPrototype from 'emby-button'; function onClick(e) { - var button = this; - var id = button.getAttribute('data-id'); - var serverId = button.getAttribute('data-serverid'); - var apiClient = connectionManager.getApiClient(serverId); + const button = this; + const id = button.getAttribute('data-id'); + const serverId = button.getAttribute('data-serverid'); + const apiClient = connectionManager.getApiClient(serverId); if (!button.classList.contains('playstatebutton-played')) { apiClient.markPlayed(apiClient.getCurrentUserId(), id, new Date()); @@ -37,14 +37,14 @@ import EmbyButtonPrototype from 'emby-button'; } function onUserDataChanged(e, apiClient, userData) { - var button = this; + const button = this; if (userData.ItemId === button.getAttribute('data-id')) { setState(button, userData.Played); } } function setState(button, played, updateAttribute) { - var icon = button.iconElement; + let icon = button.iconElement; if (!icon) { button.iconElement = button.querySelector('.material-icons'); icon = button.iconElement; @@ -77,7 +77,7 @@ import EmbyButtonPrototype from 'emby-button'; button.title = globalize.translate('Played'); } - var text = button.querySelector('.button-text'); + let text = button.querySelector('.button-text'); if (text) { text.innerHTML = button.title; } @@ -97,7 +97,7 @@ import EmbyButtonPrototype from 'emby-button'; addNotificationEvent(button, 'UserDataChanged', onUserDataChanged); } - var EmbyPlaystateButtonPrototype = Object.create(EmbyButtonPrototype); + const EmbyPlaystateButtonPrototype = Object.create(EmbyButtonPrototype); EmbyPlaystateButtonPrototype.createdCallback = function () { @@ -114,8 +114,8 @@ import EmbyButtonPrototype from 'emby-button'; EmbyButtonPrototype.attachedCallback.call(this); } - var itemId = this.getAttribute('data-id'); - var serverId = this.getAttribute('data-serverid'); + const itemId = this.getAttribute('data-id'); + const serverId = this.getAttribute('data-serverid'); if (itemId && serverId) { setState(this, this.getAttribute('data-played') === 'true', false); @@ -142,7 +142,7 @@ import EmbyButtonPrototype from 'emby-button'; this.setAttribute('data-id', item.Id); this.setAttribute('data-serverid', item.ServerId); - var played = item.UserData && item.UserData.Played; + const played = item.UserData && item.UserData.Played; setState(this, played); bindEvents(this); diff --git a/src/elements/emby-programcell/emby-programcell.js b/src/elements/emby-programcell/emby-programcell.js index d5f6de8a09..d1f1820e5e 100644 --- a/src/elements/emby-programcell/emby-programcell.js +++ b/src/elements/emby-programcell/emby-programcell.js @@ -1,4 +1,4 @@ -var ProgramCellPrototype = Object.create(HTMLButtonElement.prototype); +const ProgramCellPrototype = Object.create(HTMLButtonElement.prototype); ProgramCellPrototype.detachedCallback = function () { this.posLeft = null;