diff --git a/package.json b/package.json index 7cc42bf894..e4a1912a66 100644 --- a/package.json +++ b/package.json @@ -165,6 +165,10 @@ "src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js", "src/elements/emby-progressbar/emby-progressbar.js", "src/elements/emby-progressring/emby-progressring.js", + "src/elements/emby-itemrefreshindicator/emby-itemrefreshindicator.js", + "src/elements/emby-itemscontainer/emby-itemscontainer.js", + "src/elements/emby-playstatebutton/emby-playstatebutton.js", + "src/elements/emby-programcell/emby-programcell.js", "src/elements/emby-radio/emby-radio.js", "src/elements/emby-ratingbutton/emby-ratingbutton.js", "src/elements/emby-scrollbuttons/emby-scrollbuttons.js", diff --git a/src/elements/emby-itemscontainer/emby-itemscontainer.js b/src/elements/emby-itemscontainer/emby-itemscontainer.js index 593e50794f..58e8565289 100644 --- a/src/elements/emby-itemscontainer/emby-itemscontainer.js +++ b/src/elements/emby-itemscontainer/emby-itemscontainer.js @@ -1,12 +1,25 @@ -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'; - var ItemsContainerPrototype = Object.create(HTMLDivElement.prototype); +/* eslint-disable indent */ + + 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) { @@ -24,9 +37,8 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } 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')) { @@ -47,7 +59,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } ItemsContainerPrototype.enableMultiSelect = function (enabled) { - var current = this.multiSelect; + const current = this.multiSelect; if (!enabled) { if (current) { @@ -61,9 +73,9 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', return; } - var self = this; - require(['multiSelect'], function (MultiSelect) { - self.multiSelect = new MultiSelect.default({ + const self = this; + import('multiSelect').then(({default: MultiSelect}) => { + self.multiSelect = new MultiSelect({ container: self, bindOnClick: false }); @@ -71,14 +83,14 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', }; 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, @@ -91,8 +103,8 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', 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(); @@ -108,7 +120,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } ItemsContainerPrototype.enableDragReordering = function (enabled) { - var current = this.sortable; + const current = this.sortable; if (!enabled) { if (current) { current.destroy(); @@ -121,8 +133,8 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', return; } - var self = this; - require(['sortable'], function (Sortable) { + const self = this; + import('sortable').then(({default: Sortable}) => { self.sortable = new Sortable(self, { draggable: '.listItem', handle: '.listViewDragHandle', @@ -137,13 +149,13 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', function onUserDataChanged(e, apiClient, userData) { - var itemsContainer = this; + const itemsContainer = this; - require(['cardBuilder'], function (cardBuilder) { + 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) { @@ -154,7 +166,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } function getEventsToMonitor(itemsContainer) { - var monitor = itemsContainer.getAttribute('data-monitor'); + let monitor = itemsContainer.getAttribute('data-monitor'); if (monitor) { return monitor.split(','); } @@ -164,24 +176,24 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', 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; - require(['cardBuilder'], function (cardBuilder) { + import('cardBuilder').then(({default: cardBuilder}) => { cardBuilder.onTimerCreated(programId, newTimerId, itemsContainer); }); } function onSeriesTimerCreated(e, apiClient, data) { - var itemsContainer = this; + const itemsContainer = this; if (getEventsToMonitor(itemsContainer).indexOf('seriestimers') !== -1) { itemsContainer.notifyRefreshNeeded(); return; @@ -189,49 +201,49 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } function onTimerCancelled(e, apiClient, data) { - var itemsContainer = this; + const itemsContainer = this; if (getEventsToMonitor(itemsContainer).indexOf('timers') !== -1) { itemsContainer.notifyRefreshNeeded(); return; } - require(['cardBuilder'], function (cardBuilder) { + import('cardBuilder').then(({default: cardBuilder}) => { cardBuilder.onTimerCancelled(data.Id, itemsContainer); }); } function onSeriesTimerCancelled(e, apiClient, data) { - var itemsContainer = this; + const itemsContainer = this; if (getEventsToMonitor(itemsContainer).indexOf('seriestimers') !== -1) { itemsContainer.notifyRefreshNeeded(); return; } - require(['cardBuilder'], function (cardBuilder) { + import('cardBuilder').then(({default: cardBuilder}) => { cardBuilder.onSeriesTimerCancelled(data.Id, itemsContainer); }); } 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; @@ -242,10 +254,10 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } 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); @@ -260,14 +272,14 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } 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); @@ -347,10 +359,10 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', 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 { @@ -387,7 +399,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', return; } - var timeout = this.refreshTimeout; + let timeout = this.refreshTimeout; if (timeout) { clearTimeout(timeout); } @@ -424,9 +436,9 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } 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'); @@ -435,9 +447,9 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', } } - var activeElement = document.activeElement; - var focusId; - var hasActiveElement; + const activeElement = document.activeElement; + let focusId; + let hasActiveElement; if (this.contains(activeElement)) { hasActiveElement = true; @@ -461,7 +473,7 @@ define(['itemShortcuts', 'inputManager', 'connectionManager', 'playbackManager', 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); @@ -479,4 +491,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..e1b34318b8 100644 --- a/src/elements/emby-playstatebutton/emby-playstatebutton.js +++ b/src/elements/emby-playstatebutton/emby-playstatebutton.js @@ -1,14 +1,19 @@ -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); + 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; @@ -17,10 +22,10 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby 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()); @@ -32,14 +37,14 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby } 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; @@ -72,7 +77,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby button.title = globalize.translate('Played'); } - var text = button.querySelector('.button-text'); + let text = button.querySelector('.button-text'); if (text) { text.innerHTML = button.title; } @@ -92,7 +97,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby addNotificationEvent(button, 'UserDataChanged', onUserDataChanged); } - var EmbyPlaystateButtonPrototype = Object.create(EmbyButtonPrototype); + const EmbyPlaystateButtonPrototype = Object.create(EmbyButtonPrototype); EmbyPlaystateButtonPrototype.createdCallback = function () { @@ -109,8 +114,8 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby 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); @@ -137,7 +142,7 @@ define(['connectionManager', 'serverNotifications', 'events', 'globalize', 'emby 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); @@ -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..d1f1820e5e 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'; +const 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' });