diff --git a/package.json b/package.json index b911778bc2..627b74dd68 100644 --- a/package.json +++ b/package.json @@ -106,9 +106,11 @@ "src/components/images/imageLoader.js", "src/components/imageUploader/imageUploader.js", "src/components/indicators/indicators.js", + "src/components/itemContextMenu.js", "src/components/itemidentifier/itemidentifier.js", "src/components/itemMediaInfo/itemMediaInfo.js", "src/components/lazyLoader/lazyLoaderIntersectionObserver.js", + "src/components/maintabsmanager.js", "src/components/mediaLibraryCreator/mediaLibraryCreator.js", "src/components/mediaLibraryEditor/mediaLibraryEditor.js", "src/components/listview/listview.js", diff --git a/src/components/itemContextMenu.js b/src/components/itemContextMenu.js index 584b25f0e4..96a5cb71d7 100644 --- a/src/components/itemContextMenu.js +++ b/src/components/itemContextMenu.js @@ -1,14 +1,24 @@ -define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', 'playbackManager', 'loading', 'appSettings', 'browser', 'actionsheet'], function (appHost, globalize, connectionManager, itemHelper, appRouter, playbackManager, loading, appSettings, browser, actionsheet) { - 'use strict'; +import appHost from 'apphost'; +import globalize from 'globalize'; +import connectionManager from 'connectionManager'; +import itemHelper from 'itemHelper'; +import appRouter from 'appRouter'; +import playbackManager from 'playbackManager'; +import loading from 'loading'; +import appSettings from 'appSettings'; +import browser from 'browser'; +import actionsheet from 'actionsheet'; - function getCommands(options) { - var item = options.item; - var user = options.user; +/* eslint-disable indent */ - var canPlay = playbackManager.canPlay(item); - var restrictOptions = (browser.operaTv || browser.web0s) && !user.Policy.IsAdministrator; + export function getCommands(options) { + const item = options.item; + const user = options.user; - var commands = []; + const canPlay = playbackManager.canPlay(item); + const restrictOptions = (browser.operaTv || browser.web0s) && !user.Policy.IsAdministrator; + + let commands = []; if (canPlay && item.MediaType !== 'Photo') { if (options.play !== false) { @@ -161,10 +171,10 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', }); } - var canEdit = itemHelper.canEdit(user, item); + const canEdit = itemHelper.canEdit(user, item); if (canEdit) { if (options.edit !== false && item.Type !== 'SeriesTimer') { - var text = (item.Type === 'Timer' || item.Type === 'SeriesTimer') ? globalize.translate('Edit') : globalize.translate('EditMetadata'); + const text = (item.Type === 'Timer' || item.Type === 'SeriesTimer') ? globalize.translate('Edit') : globalize.translate('EditMetadata'); commands.push({ name: text, id: 'edit', @@ -311,31 +321,31 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', } function executeCommand(item, id, options) { - var itemId = item.Id; - var serverId = item.ServerId; - var apiClient = connectionManager.getApiClient(serverId); + const itemId = item.Id; + const serverId = item.ServerId; + const apiClient = connectionManager.getApiClient(serverId); return new Promise(function (resolve, reject) { switch (id) { case 'addtocollection': - require(['collectionEditor'], function (collectionEditor) { - new collectionEditor.showEditor({ + import('collectionEditor').then(({default: collectionEditor}) => { + new collectionEditor({ items: [itemId], serverId: serverId }).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); }); break; case 'addtoplaylist': - require(['playlistEditor'], function (playlistEditor) { - new playlistEditor.showEditor({ + import('playlistEditor').then(({default: playlistEditor}) => { + new playlistEditor({ items: [itemId], serverId: serverId }).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); }); break; case 'download': - require(['fileDownloader'], function (fileDownloader) { - var downloadHref = apiClient.getItemDownloadUrl(itemId); + import('fileDownloader').then(({default: fileDownloader}) => { + const downloadHref = apiClient.getItemDownloadUrl(itemId); fileDownloader.download([{ url: downloadHref, itemId: itemId, @@ -346,17 +356,17 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', getResolveFunction(getResolveFunction(resolve, id), id)(); }); break; - case 'copy-stream': - var downloadHref = apiClient.getItemDownloadUrl(itemId); - var textAreaCopy = function () { - var textArea = document.createElement('textarea'); + case 'copy-stream': { + const downloadHref = apiClient.getItemDownloadUrl(itemId); + const textAreaCopy = function () { + let textArea = document.createElement('textarea'); textArea.value = downloadHref; document.body.appendChild(textArea); textArea.focus(); textArea.select(); if (document.execCommand('copy')) { - require(['toast'], function (toast) { + import('toast').then(({default: toast}) => { toast(globalize.translate('CopyStreamURLSuccess')); }); } else { @@ -371,7 +381,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', } else { /* eslint-disable-next-line compat/compat */ navigator.clipboard.writeText(downloadHref).then(function () { - require(['toast'], function (toast) { + import('toast').then(({default: toast}) => { toast(globalize.translate('CopyStreamURLSuccess')); }); }).catch(function () { @@ -380,8 +390,9 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', } getResolveFunction(resolve, id)(); break; + } case 'editsubtitles': - require(['subtitleEditor'], function (subtitleEditor) { + import('subtitleEditor').then(({default: subtitleEditor}) => { subtitleEditor.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); }); break; @@ -389,7 +400,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', editItem(apiClient, item).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); break; case 'editimages': - require(['imageEditor'], function (imageEditor) { + import('imageEditor').then(({default: imageEditor}) => { imageEditor.show({ itemId: itemId, serverId: serverId @@ -397,12 +408,12 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', }); break; case 'identify': - require(['itemIdentifier'], function (itemIdentifier) { + import('itemIdentifier').then(({default: itemIdentifier}) => { itemIdentifier.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); }); break; case 'moremediainfo': - require(['itemMediaInfo'], function (itemMediaInfo) { + import('itemMediaInfo').then(({default: itemMediaInfo}) => { itemMediaInfo.show(itemId, serverId).then(getResolveFunction(resolve, id), getResolveFunction(resolve, id)); }); break; @@ -431,7 +442,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', getResolveFunction(resolve, id)(); break; case 'record': - require(['recordingCreator'], function (recordingCreator) { + import('recordingCreator').then(({default: recordingCreator}) => { recordingCreator.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); }); break; @@ -502,8 +513,8 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', } function deleteTimer(apiClient, item, resolve, command) { - require(['recordingHelper'], function (recordingHelper) { - var timerId = item.TimerId || item.Id; + import('recordingHelper').then(({default: recordingHelper}) => { + const timerId = item.TimerId || item.Id; recordingHelper.cancelTimerWithConfirmation(timerId, item.ServerId).then(function () { getResolveFunction(resolve, command, true)(); }); @@ -511,7 +522,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', } function deleteSeriesTimer(apiClient, item, resolve, command) { - require(['recordingHelper'], function (recordingHelper) { + import('recordingHelper').then(({default: recordingHelper}) => { recordingHelper.cancelSeriesTimerWithConfirmation(item.Id, item.ServerId).then(function () { getResolveFunction(resolve, command, true)(); }); @@ -519,9 +530,9 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', } function play(item, resume, queue, queueNext) { - var method = queue ? (queueNext ? 'queueNext' : 'queue') : 'play'; + const method = queue ? (queueNext ? 'queueNext' : 'queue') : 'play'; - var startPosition = 0; + let startPosition = 0; if (resume && item.UserData && item.UserData.PlaybackPositionTicks) { startPosition = item.UserData.PlaybackPositionTicks; } @@ -542,18 +553,18 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', function editItem(apiClient, item) { return new Promise(function (resolve, reject) { - var serverId = apiClient.serverInfo().Id; + const serverId = apiClient.serverInfo().Id; if (item.Type === 'Timer') { - require(['recordingEditor'], function (recordingEditor) { + import('recordingEditor').then(({default: recordingEditor}) => { recordingEditor.show(item.Id, serverId).then(resolve, reject); }); } else if (item.Type === 'SeriesTimer') { - require(['seriesRecordingEditor'], function (recordingEditor) { + import('seriesRecordingEditor').then(({default: recordingEditor}) => { recordingEditor.show(item.Id, serverId).then(resolve, reject); }); } else { - require(['metadataEditor'], function (metadataEditor) { + import('metadataEditor').then(({default: metadataEditor}) => { metadataEditor.show(item.Id, serverId).then(resolve, reject); }); } @@ -562,7 +573,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', function deleteItem(apiClient, item) { return new Promise(function (resolve, reject) { - require(['deleteHelper'], function (deleteHelper) { + import('deleteHelper').then(({default: deleteHelper}) => { deleteHelper.deleteItem({ item: item, navigate: false @@ -574,7 +585,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', } function refresh(apiClient, item) { - require(['refreshDialog'], function (refreshDialog) { + import('refreshDialog').then(({default: refreshDialog}) => { new refreshDialog({ itemIds: [item.Id], serverId: apiClient.serverInfo().Id, @@ -583,8 +594,8 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', }); } - function show(options) { - var commands = getCommands(options); + export function show(options) { + const commands = getCommands(options); if (!commands.length) { return Promise.reject(); } @@ -598,8 +609,9 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter', }); } - return { - getCommands: getCommands, - show: show - }; -}); +/* eslint-enable indent */ + +export default { + getCommands: getCommands, + show: show +}; diff --git a/src/components/maintabsmanager.js b/src/components/maintabsmanager.js index e1c5434363..0d31c2958a 100644 --- a/src/components/maintabsmanager.js +++ b/src/components/maintabsmanager.js @@ -1,11 +1,16 @@ -define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom, browser, events) { - 'use strict'; +import dom from 'dom'; +import browser from 'browser'; +import events from 'events'; +import 'emby-tabs'; +import 'emby-button'; - var tabOwnerView; - var queryScope = document.querySelector('.skinHeader'); - var footerTabsContainer; - var headerTabsContainer; - var tabsElem; +/* eslint-disable indent */ + + let tabOwnerView; + const queryScope = document.querySelector('.skinHeader'); + let footerTabsContainer; + let headerTabsContainer; + let tabsElem; function enableTabsInFooter() { return false; @@ -44,7 +49,7 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom, return false; } - var classList = elem.classList; + const classList = elem.classList; if (classList) { return !classList.contains('scrollX') && !classList.contains('animatedScrollX'); } @@ -52,7 +57,7 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom, return true; } - var parent = target; + let parent = target; while (parent != null) { if (!allowSwipeOn(parent)) { return false; @@ -70,22 +75,22 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom, } // implement without hammer - var pageCount = getTabContainersFn().length; - var onSwipeLeft = function (e, target) { + const pageCount = getTabContainersFn().length; + const onSwipeLeft = function (e, target) { if (allowSwipe(target) && view.contains(target)) { tabsElem.selectNext(); } }; - var onSwipeRight = function (e, target) { + const onSwipeRight = function (e, target) { if (allowSwipe(target) && view.contains(target)) { tabsElem.selectPrevious(); } }; - require(['touchHelper'], function (TouchHelper) { + import('touchHelper').then(({default: TouchHelper}) => { - var touchHelper = new TouchHelper(view.parentNode.parentNode); + const touchHelper = new TouchHelper(view.parentNode.parentNode); events.on(touchHelper, 'swipeleft', onSwipeLeft); events.on(touchHelper, 'swiperight', onSwipeRight); @@ -96,9 +101,9 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom, }); } - function setTabs(view, selectedIndex, getTabsFn, getTabContainersFn, onBeforeTabChange, onTabChange, setSelectedIndex) { + export function setTabs(view, selectedIndex, getTabsFn, getTabContainersFn, onBeforeTabChange, onTabChange, setSelectedIndex) { - var enableInFooter = enableTabsInFooter(); + const enableInFooter = enableTabsInFooter(); if (!view) { if (tabOwnerView) { @@ -129,7 +134,7 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom, ensureElements(enableInFooter); - var tabsContainerElem = enableInFooter ? footerTabsContainer : headerTabsContainer; + const tabsContainerElem = enableInFooter ? footerTabsContainer : headerTabsContainer; if (!tabOwnerView) { tabsContainerElem.classList.remove('hide'); @@ -137,18 +142,18 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom, if (tabOwnerView !== view) { - var index = 0; + let index = 0; - var indexAttribute = selectedIndex == null ? '' : (' data-index="' + selectedIndex + '"'); - var tabsHtml = '
' + getTabsFn().map(function (t) { + const indexAttribute = selectedIndex == null ? '' : (' data-index="' + selectedIndex + '"'); + const tabsHtml = '
' + getTabsFn().map(function (t) { - var tabClass = 'emby-tab-button'; + let tabClass = 'emby-tab-button'; if (t.enabled === false) { tabClass += ' hide'; } - var tabHtml; + let tabHtml; if (t.cssClass) { tabClass += ' ' + t.cssClass; @@ -177,16 +182,16 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom, tabsElem.addEventListener('beforetabchange', function (e) { - var tabContainers = getTabContainersFn(); + const tabContainers = getTabContainersFn(); if (e.detail.previousIndex != null) { - var previousPanel = tabContainers[e.detail.previousIndex]; + const previousPanel = tabContainers[e.detail.previousIndex]; if (previousPanel) { previousPanel.classList.remove('is-active'); } } - var newPanel = tabContainers[e.detail.selectedTabIndex]; + const newPanel = tabContainers[e.detail.selectedTabIndex]; //if (e.detail.previousIndex != null && e.detail.previousIndex != e.detail.selectedTabIndex) { // if (newPanel.animate && (animateTabs || []).indexOf(e.detail.selectedTabIndex) != -1) { @@ -241,9 +246,9 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom, }; } - function selectedTabIndex(index) { + export function selectedTabIndex(index) { - var tabsContainerElem = headerTabsContainer; + const tabsContainerElem = headerTabsContainer; if (!tabsElem) { tabsElem = tabsContainerElem.querySelector('[is="emby-tabs"]'); @@ -256,13 +261,8 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom, } } - function getTabsElement() { + export function getTabsElement() { return document.querySelector('.tabs-viewmenubar'); } - return { - setTabs: setTabs, - getTabsElement: getTabsElement, - selectedTabIndex: selectedTabIndex - }; -}); +/* eslint-enable indent */