mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Merge pull request #1512 from Camc314/migrate-to-es6-1

Browse source 
Migration itemContextMenu and maintabmanager to ES6 modules
This commit is contained in:
dkanada 2020-07-18 20:50:59 +09:00 • committed by GitHub
commit ce143bc569
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 96 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -106,9 +106,11 @@
"src/components/images/imageLoader.js", "src/components/images/imageLoader.js",
"src/components/imageUploader/imageUploader.js", "src/components/imageUploader/imageUploader.js",
"src/components/indicators/indicators.js", "src/components/indicators/indicators.js",
"src/components/itemContextMenu.js",
"src/components/itemidentifier/itemidentifier.js", "src/components/itemidentifier/itemidentifier.js",
"src/components/itemMediaInfo/itemMediaInfo.js", "src/components/itemMediaInfo/itemMediaInfo.js",
"src/components/lazyLoader/lazyLoaderIntersectionObserver.js", "src/components/lazyLoader/lazyLoaderIntersectionObserver.js",
"src/components/maintabsmanager.js",
"src/components/mediaLibraryCreator/mediaLibraryCreator.js", "src/components/mediaLibraryCreator/mediaLibraryCreator.js",
"src/components/mediaLibraryEditor/mediaLibraryEditor.js", "src/components/mediaLibraryEditor/mediaLibraryEditor.js",
"src/components/listview/listview.js", "src/components/listview/listview.js",

108
src/components/itemContextMenu.js
View file

@ -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) { import appHost from 'apphost';
'use strict'; 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) { /* eslint-disable indent */
var item = options.item;
var user = options.user;
var canPlay = playbackManager.canPlay(item); export function getCommands(options) {
var restrictOptions = (browser.operaTv || browser.web0s) && !user.Policy.IsAdministrator; 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 (canPlay && item.MediaType !== 'Photo') {
if (options.play !== false) { 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 (canEdit) {
if (options.edit !== false && item.Type !== 'SeriesTimer') { 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({ commands.push({
name: text, name: text,
id: 'edit', id: 'edit',
@ -311,31 +321,31 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
} }
function executeCommand(item, id, options) { function executeCommand(item, id, options) {
var itemId = item.Id; const itemId = item.Id;
var serverId = item.ServerId; const serverId = item.ServerId;
var apiClient = connectionManager.getApiClient(serverId); const apiClient = connectionManager.getApiClient(serverId);
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
switch (id) { switch (id) {
case 'addtocollection': case 'addtocollection':
require(['collectionEditor'], function (collectionEditor) { import('collectionEditor').then(({default: collectionEditor}) => {
new collectionEditor.showEditor({ new collectionEditor({
items: [itemId], items: [itemId],
serverId: serverId serverId: serverId
}).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); }).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
}); });
break; break;
case 'addtoplaylist': case 'addtoplaylist':
require(['playlistEditor'], function (playlistEditor) { import('playlistEditor').then(({default: playlistEditor}) => {
new playlistEditor.showEditor({ new playlistEditor({
items: [itemId], items: [itemId],
serverId: serverId serverId: serverId
}).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); }).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
}); });
break; break;
case 'download': case 'download':
require(['fileDownloader'], function (fileDownloader) { import('fileDownloader').then(({default: fileDownloader}) => {
var downloadHref = apiClient.getItemDownloadUrl(itemId); const downloadHref = apiClient.getItemDownloadUrl(itemId);
fileDownloader.download([{ fileDownloader.download([{
url: downloadHref, url: downloadHref,
itemId: itemId, itemId: itemId,
@ -346,17 +356,17 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
getResolveFunction(getResolveFunction(resolve, id), id)(); getResolveFunction(getResolveFunction(resolve, id), id)();
}); });
break; break;
case 'copy-stream': case 'copy-stream': {
var downloadHref = apiClient.getItemDownloadUrl(itemId); const downloadHref = apiClient.getItemDownloadUrl(itemId);
var textAreaCopy = function () { const textAreaCopy = function () {
var textArea = document.createElement('textarea'); let textArea = document.createElement('textarea');
textArea.value = downloadHref; textArea.value = downloadHref;
document.body.appendChild(textArea); document.body.appendChild(textArea);
textArea.focus(); textArea.focus();
textArea.select(); textArea.select();
if (document.execCommand('copy')) { if (document.execCommand('copy')) {
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('CopyStreamURLSuccess')); toast(globalize.translate('CopyStreamURLSuccess'));
}); });
} else { } else {
@ -371,7 +381,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
} else { } else {
/* eslint-disable-next-line compat/compat */ /* eslint-disable-next-line compat/compat */
navigator.clipboard.writeText(downloadHref).then(function () { navigator.clipboard.writeText(downloadHref).then(function () {
require(['toast'], function (toast) { import('toast').then(({default: toast}) => {
toast(globalize.translate('CopyStreamURLSuccess')); toast(globalize.translate('CopyStreamURLSuccess'));
}); });
}).catch(function () { }).catch(function () {
@ -380,8 +390,9 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
} }
getResolveFunction(resolve, id)(); getResolveFunction(resolve, id)();
break; break;
}
case 'editsubtitles': case 'editsubtitles':
require(['subtitleEditor'], function (subtitleEditor) { import('subtitleEditor').then(({default: subtitleEditor}) => {
subtitleEditor.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); subtitleEditor.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
}); });
break; break;
@ -389,7 +400,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
editItem(apiClient, item).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); editItem(apiClient, item).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
break; break;
case 'editimages': case 'editimages':
require(['imageEditor'], function (imageEditor) { import('imageEditor').then(({default: imageEditor}) => {
imageEditor.show({ imageEditor.show({
itemId: itemId, itemId: itemId,
serverId: serverId serverId: serverId
@ -397,12 +408,12 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
}); });
break; break;
case 'identify': case 'identify':
require(['itemIdentifier'], function (itemIdentifier) { import('itemIdentifier').then(({default: itemIdentifier}) => {
itemIdentifier.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); itemIdentifier.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
}); });
break; break;
case 'moremediainfo': case 'moremediainfo':
require(['itemMediaInfo'], function (itemMediaInfo) { import('itemMediaInfo').then(({default: itemMediaInfo}) => {
itemMediaInfo.show(itemId, serverId).then(getResolveFunction(resolve, id), getResolveFunction(resolve, id)); itemMediaInfo.show(itemId, serverId).then(getResolveFunction(resolve, id), getResolveFunction(resolve, id));
}); });
break; break;
@ -431,7 +442,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
getResolveFunction(resolve, id)(); getResolveFunction(resolve, id)();
break; break;
case 'record': case 'record':
require(['recordingCreator'], function (recordingCreator) { import('recordingCreator').then(({default: recordingCreator}) => {
recordingCreator.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id)); recordingCreator.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
}); });
break; break;
@ -502,8 +513,8 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
} }
function deleteTimer(apiClient, item, resolve, command) { function deleteTimer(apiClient, item, resolve, command) {
require(['recordingHelper'], function (recordingHelper) { import('recordingHelper').then(({default: recordingHelper}) => {
var timerId = item.TimerId || item.Id; const timerId = item.TimerId || item.Id;
recordingHelper.cancelTimerWithConfirmation(timerId, item.ServerId).then(function () { recordingHelper.cancelTimerWithConfirmation(timerId, item.ServerId).then(function () {
getResolveFunction(resolve, command, true)(); getResolveFunction(resolve, command, true)();
}); });
@ -511,7 +522,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
} }
function deleteSeriesTimer(apiClient, item, resolve, command) { function deleteSeriesTimer(apiClient, item, resolve, command) {
require(['recordingHelper'], function (recordingHelper) { import('recordingHelper').then(({default: recordingHelper}) => {
recordingHelper.cancelSeriesTimerWithConfirmation(item.Id, item.ServerId).then(function () { recordingHelper.cancelSeriesTimerWithConfirmation(item.Id, item.ServerId).then(function () {
getResolveFunction(resolve, command, true)(); getResolveFunction(resolve, command, true)();
}); });
@ -519,9 +530,9 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
} }
function play(item, resume, queue, queueNext) { 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) { if (resume && item.UserData && item.UserData.PlaybackPositionTicks) {
startPosition = item.UserData.PlaybackPositionTicks; startPosition = item.UserData.PlaybackPositionTicks;
} }
@ -542,18 +553,18 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
function editItem(apiClient, item) { function editItem(apiClient, item) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
var serverId = apiClient.serverInfo().Id; const serverId = apiClient.serverInfo().Id;
if (item.Type === 'Timer') { if (item.Type === 'Timer') {
require(['recordingEditor'], function (recordingEditor) { import('recordingEditor').then(({default: recordingEditor}) => {
recordingEditor.show(item.Id, serverId).then(resolve, reject); recordingEditor.show(item.Id, serverId).then(resolve, reject);
}); });
} else if (item.Type === 'SeriesTimer') { } else if (item.Type === 'SeriesTimer') {
require(['seriesRecordingEditor'], function (recordingEditor) { import('seriesRecordingEditor').then(({default: recordingEditor}) => {
recordingEditor.show(item.Id, serverId).then(resolve, reject); recordingEditor.show(item.Id, serverId).then(resolve, reject);
}); });
} else { } else {
require(['metadataEditor'], function (metadataEditor) { import('metadataEditor').then(({default: metadataEditor}) => {
metadataEditor.show(item.Id, serverId).then(resolve, reject); metadataEditor.show(item.Id, serverId).then(resolve, reject);
}); });
} }
@ -562,7 +573,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
function deleteItem(apiClient, item) { function deleteItem(apiClient, item) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
require(['deleteHelper'], function (deleteHelper) { import('deleteHelper').then(({default: deleteHelper}) => {
deleteHelper.deleteItem({ deleteHelper.deleteItem({
item: item, item: item,
navigate: false navigate: false
@ -574,7 +585,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
} }
function refresh(apiClient, item) { function refresh(apiClient, item) {
require(['refreshDialog'], function (refreshDialog) { import('refreshDialog').then(({default: refreshDialog}) => {
new refreshDialog({ new refreshDialog({
itemIds: [item.Id], itemIds: [item.Id],
serverId: apiClient.serverInfo().Id, serverId: apiClient.serverInfo().Id,
@ -583,8 +594,8 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
}); });
} }
function show(options) { export function show(options) {
var commands = getCommands(options); const commands = getCommands(options);
if (!commands.length) { if (!commands.length) {
return Promise.reject(); return Promise.reject();
} }
@ -598,8 +609,9 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
}); });
} }
return { /* eslint-enable indent */
getCommands: getCommands,
show: show export default {
}; getCommands: getCommands,
}); show: show
};

68
src/components/maintabsmanager.js
View file

@ -1,11 +1,16 @@
define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom, browser, events) { import dom from 'dom';
'use strict'; import browser from 'browser';
import events from 'events';
import 'emby-tabs';
import 'emby-button';
var tabOwnerView; /* eslint-disable indent */
var queryScope = document.querySelector('.skinHeader');
var footerTabsContainer; let tabOwnerView;
var headerTabsContainer; const queryScope = document.querySelector('.skinHeader');
var tabsElem; let footerTabsContainer;
let headerTabsContainer;
let tabsElem;
function enableTabsInFooter() { function enableTabsInFooter() {
return false; return false;
@ -44,7 +49,7 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
return false; return false;
} }
var classList = elem.classList; const classList = elem.classList;
if (classList) { if (classList) {
return !classList.contains('scrollX') && !classList.contains('animatedScrollX'); return !classList.contains('scrollX') && !classList.contains('animatedScrollX');
} }
@ -52,7 +57,7 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
return true; return true;
} }
var parent = target; let parent = target;
while (parent != null) { while (parent != null) {
if (!allowSwipeOn(parent)) { if (!allowSwipeOn(parent)) {
return false; return false;
@ -70,22 +75,22 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
} }
// implement without hammer // implement without hammer
var pageCount = getTabContainersFn().length; const pageCount = getTabContainersFn().length;
var onSwipeLeft = function (e, target) { const onSwipeLeft = function (e, target) {
if (allowSwipe(target) && view.contains(target)) { if (allowSwipe(target) && view.contains(target)) {
tabsElem.selectNext(); tabsElem.selectNext();
} }
}; };
var onSwipeRight = function (e, target) { const onSwipeRight = function (e, target) {
if (allowSwipe(target) && view.contains(target)) { if (allowSwipe(target) && view.contains(target)) {
tabsElem.selectPrevious(); 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, 'swipeleft', onSwipeLeft);
events.on(touchHelper, 'swiperight', onSwipeRight); 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 (!view) {
if (tabOwnerView) { if (tabOwnerView) {
@ -129,7 +134,7 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
ensureElements(enableInFooter); ensureElements(enableInFooter);
var tabsContainerElem = enableInFooter ? footerTabsContainer : headerTabsContainer; const tabsContainerElem = enableInFooter ? footerTabsContainer : headerTabsContainer;
if (!tabOwnerView) { if (!tabOwnerView) {
tabsContainerElem.classList.remove('hide'); tabsContainerElem.classList.remove('hide');
@ -137,18 +142,18 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
if (tabOwnerView !== view) { if (tabOwnerView !== view) {
var index = 0; let index = 0;
var indexAttribute = selectedIndex == null ? '' : (' data-index="' + selectedIndex + '"'); const indexAttribute = selectedIndex == null ? '' : (' data-index="' + selectedIndex + '"');
var tabsHtml = '<div is="emby-tabs"' + indexAttribute + ' class="tabs-viewmenubar"><div class="emby-tabs-slider" style="white-space:nowrap;">' + getTabsFn().map(function (t) { const tabsHtml = '<div is="emby-tabs"' + indexAttribute + ' class="tabs-viewmenubar"><div class="emby-tabs-slider" style="white-space:nowrap;">' + getTabsFn().map(function (t) {
var tabClass = 'emby-tab-button'; let tabClass = 'emby-tab-button';
if (t.enabled === false) { if (t.enabled === false) {
tabClass += ' hide'; tabClass += ' hide';
} }
var tabHtml; let tabHtml;
if (t.cssClass) { if (t.cssClass) {
tabClass += ' ' + t.cssClass; tabClass += ' ' + t.cssClass;
@ -177,16 +182,16 @@ define(['dom', 'browser', 'events', 'emby-tabs', 'emby-button'], function (dom,
tabsElem.addEventListener('beforetabchange', function (e) { tabsElem.addEventListener('beforetabchange', function (e) {
var tabContainers = getTabContainersFn(); const tabContainers = getTabContainersFn();
if (e.detail.previousIndex != null) { if (e.detail.previousIndex != null) {
var previousPanel = tabContainers[e.detail.previousIndex]; const previousPanel = tabContainers[e.detail.previousIndex];
if (previousPanel) { if (previousPanel) {
previousPanel.classList.remove('is-active'); 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 (e.detail.previousIndex != null && e.detail.previousIndex != e.detail.selectedTabIndex) {
// if (newPanel.animate && (animateTabs || []).indexOf(e.detail.selectedTabIndex) != -1) { // 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) { if (!tabsElem) {
tabsElem = tabsContainerElem.querySelector('[is="emby-tabs"]'); 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 document.querySelector('.tabs-viewmenubar');
} }
return { /* eslint-enable indent */
setTabs: setTabs,
getTabsElement: getTabsElement,
selectedTabIndex: selectedTabIndex
};
});