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

Merge pull request #1653 from MrTimscampi/more-es6

Migrate shell, serverNotifications and scrollHelper to ES6 + remove searchtab
This commit is contained in:
dkanada 2020-08-07 14:20:29 +09:00 committed by GitHub
commit c5550c5771
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
26 changed files with 374 additions and 445 deletions

View file

@ -303,10 +303,13 @@
"src/scripts/mouseManager.js",
"src/scripts/multiDownload.js",
"src/scripts/playlists.js",
"src/scripts/scrollHelper.js",
"src/scripts/serverNotifications.js",
"src/scripts/routes.js",
"src/scripts/settings/appSettings.js",
"src/scripts/settings/userSettings.js",
"src/scripts/settings/webSettings.js",
"src/scripts/shell.js",
"src/scripts/taskbutton.js",
"src/scripts/themeLoader.js",
"src/scripts/touchHelper.js"

View file

@ -236,12 +236,6 @@
text-align: center;
}
.layout-desktop .searchTabButton,
.layout-mobile .searchTabButton,
.layout-tv .headerSearchButton {
display: none !important;
}
.mainDrawer-scrollContainer {
padding-bottom: 10vh;
}

View file

@ -200,7 +200,7 @@ import 'flexStyles';
}
function centerFocus(elem, horiz, on) {
import('scrollHelper').then(scrollHelper => {
import('scrollHelper').then((scrollHelper) => {
const fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz);
});

View file

@ -354,7 +354,7 @@ import 'scrollStyles';
}
function centerFocus(elem, horiz, on) {
import('scrollHelper').then(scrollHelper => {
import('scrollHelper').then((scrollHelper) => {
const fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz);
});

View file

@ -151,6 +151,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
function centerFocus(elem, horiz, on) {
require(['scrollHelper'], function (scrollHelper) {
scrollHelper = scrollHelper.default || scrollHelper;
var fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz);
});

View file

@ -1,6 +1,8 @@
define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectionManager', 'require', 'loading', 'scrollHelper', 'emby-checkbox', 'emby-radio', 'css!./../formdialog', 'material-icons'], function (dialogHelper, globalize, userSettings, layoutManager, connectionManager, require, loading, scrollHelper) {
'use strict';
scrollHelper = scrollHelper.default || scrollHelper;
function saveCategories(context, options) {
var categories = [];

View file

@ -5,6 +5,8 @@ define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager',
browser = browser.default || browser;
loading = loading.default || loading;
focusManager = focusManager.default || focusManager;
scrollHelper = scrollHelper.default || scrollHelper;
serverNotifications = serverNotifications.default || serverNotifications;
function showViewSettings(instance) {
require(['guide-settings-dialog'], function (guideSettingsDialog) {

View file

@ -1,6 +1,7 @@
define(['playbackManager', 'serverNotifications', 'events'], function (playbackManager, serverNotifications, events) {
'use strict';
serverNotifications = serverNotifications.default || serverNotifications;
playbackManager = playbackManager.default || playbackManager;
function onUserDataChanged(e, apiClient, userData) {

View file

@ -2,6 +2,7 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
'use strict';
playbackManager = playbackManager.default || playbackManager;
serverNotifications = serverNotifications.default || serverNotifications;
function onOneDocumentClick() {
document.removeEventListener('click', onOneDocumentClick);

View file

@ -210,7 +210,7 @@ import 'emby-button';
}
function centerFocus(elem, horiz, on) {
import('scrollHelper').then(scrollHelper => {
import('scrollHelper').then((scrollHelper) => {
const fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz);
});

View file

@ -1,6 +1,8 @@
define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'datetime', 'imageLoader', 'recordingFields', 'events', 'emby-checkbox', 'emby-button', 'emby-collapse', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper, datetime, imageLoader, recordingFields, events) {
'use strict';
scrollHelper = scrollHelper.default || scrollHelper;
var currentDialog;
var closeAction;
var currentRecordingFields;

View file

@ -1,6 +1,7 @@
define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'imageLoader', 'scrollStyles', 'emby-button', 'emby-collapse', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons', 'flexStyles'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper, imageLoader) {
'use strict';
scrollHelper = scrollHelper.default || scrollHelper;
loading = loading.default || loading;
var currentDialog;

View file

@ -1,6 +1,7 @@
define(['globalize', 'connectionManager', 'serverNotifications', 'require', 'loading', 'apphost', 'dom', 'recordingHelper', 'events', 'paper-icon-button-light', 'emby-button', 'css!./recordingfields', 'flexStyles'], function (globalize, connectionManager, serverNotifications, require, loading, appHost, dom, recordingHelper, events) {
'use strict';
serverNotifications = serverNotifications.default || serverNotifications;
recordingHelper = recordingHelper.default || recordingHelper;
loading = loading.default || loading;

View file

@ -17,6 +17,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
function centerFocus(elem, horiz, on) {
require(['scrollHelper'], function (scrollHelper) {
scrollHelper = scrollHelper.default || scrollHelper;
var fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz);
});

View file

@ -337,6 +337,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
function centerFocus(elem, horiz, on) {
require(['scrollHelper'], function (scrollHelper) {
scrollHelper = scrollHelper.default || scrollHelper;
var fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz);
});

View file

@ -4,6 +4,7 @@ define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize'
browser = browser.default || browser;
loading = loading.default || loading;
focusManager = focusManager.default || focusManager;
scrollHelper = scrollHelper.default || scrollHelper;
var enableFocusTransform = !browser.slow && !browser.edge;

View file

@ -29,6 +29,7 @@ define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'conne
function centerFocus(elem, horiz, on) {
require(['scrollHelper'], function (scrollHelper) {
scrollHelper = scrollHelper.default || scrollHelper;
var fn = on ? 'on' : 'off';
scrollHelper.centerFocus[fn](elem, horiz);
});

View file

@ -169,9 +169,6 @@ define(['layoutManager', 'userSettings', 'inputManager', 'loading', 'globalize',
name: globalize.translate('HeaderSchedule')
}, {
name: globalize.translate('TabSeries')
}, {
name: globalize.translate('ButtonSearch'),
cssClass: 'searchTabButton'
}];
}
@ -255,9 +252,6 @@ define(['layoutManager', 'userSettings', 'inputManager', 'loading', 'globalize',
case 5:
depends.push('controllers/livetv/livetvseriestimers');
break;
case 6:
depends.push('scripts/searchtab');
}
require(depends, function (controllerFactory) {

View file

@ -236,9 +236,6 @@ import 'emby-button';
name: globalize.translate('TabCollections')
}, {
name: globalize.translate('TabGenres')
}, {
name: globalize.translate('ButtonSearch'),
cssClass: 'searchTabButton'
}];
}
@ -306,10 +303,6 @@ import 'emby-button';
case 5:
depends = 'controllers/movies/moviegenres';
break;
case 6:
depends = 'scripts/searchtab';
break;
}
import(depends).then(({default: controllerFactory}) => {

View file

@ -191,9 +191,6 @@ import 'flexStyles';
name: globalize.translate('TabSongs')
}, {
name: globalize.translate('TabGenres')
}, {
name: globalize.translate('ButtonSearch'),
cssClass: 'searchTabButton'
}];
}
@ -295,10 +292,6 @@ import 'flexStyles';
case 6:
depends = 'controllers/music/musicgenres';
break;
case 7:
depends = 'scripts/searchtab';
break;
}
import(depends).then(({default: controllerFactory}) => {

View file

@ -30,9 +30,6 @@ import 'emby-button';
name: globalize.translate('TabNetworks')
}, {
name: globalize.translate('TabEpisodes')
}, {
name: globalize.translate('ButtonSearch'),
cssClass: 'searchTabButton'
}];
}
@ -217,10 +214,6 @@ import 'emby-button';
case 6:
depends = 'controllers/shows/episodes';
break;
case 7:
depends = 'scripts/searchtab';
break;
}
import(depends).then(({default: controllerFactory}) => {

View file

@ -1,6 +1,7 @@
define(['playbackManager', 'events', 'serverNotifications', 'connectionManager'], function (playbackManager, events, serverNotifications, connectionManager) {
'use strict';
serverNotifications = serverNotifications.default || serverNotifications;
playbackManager = playbackManager.default || playbackManager;
function getActivePlayerId() {

View file

@ -1,7 +1,6 @@
define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
'use strict';
focusManager = focusManager.default || focusManager;
import focusManager from 'focusManager';
import dom from 'dom';
import 'scrollStyles';
function getBoundingClientRect(elem) {
// Support: BlackBerry 5, iOS 3 (original iPhone)
@ -13,25 +12,25 @@ define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
}
}
function getPosition(scrollContainer, item, horizontal) {
var slideeOffset = getBoundingClientRect(scrollContainer);
var itemOffset = getBoundingClientRect(item);
export function getPosition(scrollContainer, item, horizontal) {
const slideeOffset = getBoundingClientRect(scrollContainer);
const itemOffset = getBoundingClientRect(item);
var offset = horizontal ? itemOffset.left - slideeOffset.left : itemOffset.top - slideeOffset.top;
var size = horizontal ? itemOffset.width : itemOffset.height;
let offset = horizontal ? itemOffset.left - slideeOffset.left : itemOffset.top - slideeOffset.top;
let size = horizontal ? itemOffset.width : itemOffset.height;
if (!size && size !== 0) {
size = item[horizontal ? 'offsetWidth' : 'offsetHeight'];
}
var currentStart = horizontal ? scrollContainer.scrollLeft : scrollContainer.scrollTop;
const currentStart = horizontal ? scrollContainer.scrollLeft : scrollContainer.scrollTop;
offset += currentStart;
var frameSize = horizontal ? scrollContainer.offsetWidth : scrollContainer.offsetHeight;
const frameSize = horizontal ? scrollContainer.offsetWidth : scrollContainer.offsetHeight;
var currentEnd = currentStart + frameSize;
const currentEnd = currentStart + frameSize;
var isVisible = offset >= currentStart && (offset + size) <= currentEnd;
const isVisible = offset >= currentStart && (offset + size) <= currentEnd;
return {
start: offset,
@ -42,8 +41,8 @@ define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
};
}
function toCenter(container, elem, horizontal, skipWhenVisible) {
var pos = getPosition(container, elem, horizontal);
export function toCenter(container, elem, horizontal, skipWhenVisible) {
const pos = getPosition(container, elem, horizontal);
if (skipWhenVisible && pos.isVisible) {
return;
@ -64,8 +63,8 @@ define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
}
}
function toStart(container, elem, horizontal, skipWhenVisible) {
var pos = getPosition(container, elem, horizontal);
export function toStart(container, elem, horizontal, skipWhenVisible) {
const pos = getPosition(container, elem, horizontal);
if (skipWhenVisible && pos.isVisible) {
return;
@ -87,7 +86,7 @@ define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
}
function centerOnFocus(e, scrollSlider, horizontal) {
var focused = focusManager.focusableParent(e.target);
const focused = focusManager.focusableParent(e.target);
if (focused) {
toCenter(scrollSlider, focused, horizontal);
@ -97,13 +96,12 @@ define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
function centerOnFocusHorizontal(e) {
centerOnFocus(e, this, true);
}
function centerOnFocusVertical(e) {
centerOnFocus(e, this, false);
}
return {
getPosition: getPosition,
centerFocus: {
export const centerFocus = {
on: function (element, horizontal) {
if (horizontal) {
dom.addEventListener(element, 'focus', centerOnFocusHorizontal, {
@ -130,8 +128,11 @@ define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
});
}
}
},
};
export default {
getPosition: getPosition,
centerFocus: centerFocus,
toCenter: toCenter,
toStart: toStart
};
});

View file

@ -1,57 +0,0 @@
define(['searchFields', 'searchResults', 'events'], function (SearchFields, SearchResults, events) {
'use strict';
SearchFields = SearchFields.default || SearchFields;
SearchResults = SearchResults.default || SearchResults;
function init(instance, tabContent, options) {
tabContent.innerHTML = '<div class="padded-left padded-right searchFields"></div><div class="searchResults padded-top" style="padding-top:1.5em;"></div>';
instance.searchFields = new SearchFields({
element: tabContent.querySelector('.searchFields')
});
instance.searchResults = new SearchResults({
element: tabContent.querySelector('.searchResults'),
serverId: ApiClient.serverId(),
parentId: options.parentId,
collectionType: options.collectionType
});
events.on(instance.searchFields, 'search', function (e, value) {
instance.searchResults.search(value);
});
}
function SearchTab(view, tabContent, options) {
var self = this;
options = options || {};
init(this, tabContent, options);
self.preRender = function () {};
self.renderTab = function () {
var searchFields = this.searchFields;
if (searchFields) {
searchFields.focus();
}
};
}
SearchTab.prototype.destroy = function () {
var searchFields = this.searchFields;
if (searchFields) {
searchFields.destroy();
}
this.searchFields = null;
var searchResults = this.searchResults;
if (searchResults) {
searchResults.destroy();
}
this.searchResults = null;
};
return SearchTab;
});

View file

@ -1,24 +1,26 @@
define(['connectionManager', 'playbackManager', 'syncPlayManager', 'events', 'inputManager', 'focusManager', 'appRouter'], function (connectionManager, playbackManager, syncPlayManager, events, inputManager, focusManager, appRouter) {
'use strict';
import connectionManager from 'connectionManager';
import playbackManager from 'playbackManager';
import syncPlayManager from 'syncPlayManager';
import events from 'events';
import inputManager from 'inputManager';
import focusManager from 'focusManager';
import appRouter from 'appRouter';
playbackManager = playbackManager.default || playbackManager;
focusManager = focusManager.default || focusManager;
var serverNotifications = {};
const serverNotifications = {};
function notifyApp() {
inputManager.notify();
}
function displayMessage(cmd) {
var args = cmd.Arguments;
const args = cmd.Arguments;
if (args.TimeoutMs) {
require(['toast'], function (toast) {
import('toast').then(({default: toast}) => {
toast({ title: args.Header, text: args.Text });
});
} else {
require(['alert'], function (alert) {
alert.default({ title: args.Header, text: args.Text });
import('alert').then(({default: alert}) => {
alert({ title: args.Header, text: args.Text });
});
}
}
@ -147,10 +149,10 @@ define(['connectionManager', 'playbackManager', 'syncPlayManager', 'events', 'in
}
function onMessageReceived(e, msg) {
var apiClient = this;
const apiClient = this;
if (msg.MessageType === 'Play') {
notifyApp();
var serverId = apiClient.serverInfo().Id;
const serverId = apiClient.serverInfo().Id;
if (msg.Data.PlayCommand === 'PlayNext') {
playbackManager.queueNext({ ids: msg.Data.ItemIds, serverId: serverId });
} else if (msg.Data.PlayCommand === 'PlayLast') {
@ -185,11 +187,11 @@ define(['connectionManager', 'playbackManager', 'syncPlayManager', 'events', 'in
notifyApp();
}
} else if (msg.MessageType === 'GeneralCommand') {
var cmd = msg.Data;
const cmd = msg.Data;
processGeneralCommand(cmd, apiClient);
} else if (msg.MessageType === 'UserDataChanged') {
if (msg.Data.UserId === apiClient.getCurrentUserId()) {
for (var i = 0, length = msg.Data.UserDataList.length; i < length; i++) {
for (let i = 0, length = msg.Data.UserDataList.length; i < length; i++) {
events.trigger(serverNotifications, 'UserDataChanged', [apiClient, msg.Data.UserDataList[i]]);
}
}
@ -210,5 +212,5 @@ define(['connectionManager', 'playbackManager', 'syncPlayManager', 'events', 'in
events.on(connectionManager, 'apiclientcreated', function (e, newApiClient) {
bindEvents(newApiClient);
});
return serverNotifications;
});
export default serverNotifications;

View file

@ -1,7 +1,5 @@
define([], function () {
'use strict';
return {
// TODO: This seems like a good candidate for deprecation
export default {
openUrl: function (url, target) {
if (window.NativeShell) {
window.NativeShell.openUrl(url, target);
@ -20,4 +18,3 @@ define([], function () {
}
}
};
});