mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Migration of home and librarymenu to ES6 modules
This commit is contained in:
parent
40b98bb3d4
commit
612d74fd2c
8 changed files with 190 additions and 156 deletions
|
@ -188,6 +188,7 @@
|
||||||
"src/controllers/dashboard/users/userparentalcontrol.js",
|
"src/controllers/dashboard/users/userparentalcontrol.js",
|
||||||
"src/controllers/dashboard/users/userpasswordpage.js",
|
"src/controllers/dashboard/users/userpasswordpage.js",
|
||||||
"src/controllers/dashboard/users/userprofilespage.js",
|
"src/controllers/dashboard/users/userprofilespage.js",
|
||||||
|
"src/controllers/home.js",
|
||||||
"src/controllers/playback/queue/index.js",
|
"src/controllers/playback/queue/index.js",
|
||||||
"src/controllers/playback/video/index.js",
|
"src/controllers/playback/video/index.js",
|
||||||
"src/controllers/searchpage.js",
|
"src/controllers/searchpage.js",
|
||||||
|
@ -248,6 +249,7 @@
|
||||||
"src/scripts/imagehelper.js",
|
"src/scripts/imagehelper.js",
|
||||||
"src/scripts/inputManager.js",
|
"src/scripts/inputManager.js",
|
||||||
"src/scripts/keyboardNavigation.js",
|
"src/scripts/keyboardNavigation.js",
|
||||||
|
"src/scripts/libraryMenu.js",
|
||||||
"src/scripts/playlists.js",
|
"src/scripts/playlists.js",
|
||||||
"src/scripts/settings/appSettings.js",
|
"src/scripts/settings/appSettings.js",
|
||||||
"src/scripts/settings/userSettings.js",
|
"src/scripts/settings/userSettings.js",
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
define(['loading', 'libraryMenu', 'globalize', 'cardStyle', 'emby-button', 'emby-checkbox', 'emby-select'], function (loading, libraryMenu, globalize) {
|
define(['loading', 'libraryMenu', 'globalize', 'cardStyle', 'emby-button', 'emby-checkbox', 'emby-select'], function (loading, libraryMenu, globalize) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
|
libraryMenu = LibraryMenu.default || libraryMenu;
|
||||||
|
|
||||||
function reloadList(page) {
|
function reloadList(page) {
|
||||||
loading.show();
|
loading.show();
|
||||||
var promise1 = ApiClient.getAvailablePlugins();
|
var promise1 = ApiClient.getAvailablePlugins();
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
define(['loading', 'libraryMenu', 'dom', 'globalize', 'cardStyle', 'emby-button'], function (loading, libraryMenu, dom, globalize) {
|
define(['loading', 'libraryMenu', 'dom', 'globalize', 'cardStyle', 'emby-button'], function (loading, libraryMenu, dom, globalize) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
|
libraryMenu = LibraryMenu.default || libraryMenu;
|
||||||
|
|
||||||
function deletePlugin(page, uniqueid, name) {
|
function deletePlugin(page, uniqueid, name) {
|
||||||
var msg = globalize.translate('UninstallPluginConfirmation', name);
|
var msg = globalize.translate('UninstallPluginConfirmation', name);
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,9 @@
|
||||||
define(['tabbedView', 'globalize', 'require', 'emby-tabs', 'emby-button', 'emby-scroller'], function (TabbedView, globalize, require) {
|
import TabbedView from 'tabbedView';
|
||||||
'use strict';
|
import globalize from 'globalize';
|
||||||
|
import require from 'require';
|
||||||
|
import 'emby-tabs';
|
||||||
|
import 'emby-button';
|
||||||
|
import 'emby-scroller';
|
||||||
|
|
||||||
function getTabs() {
|
function getTabs() {
|
||||||
return [{
|
return [{
|
||||||
|
@ -24,7 +28,7 @@ define(['tabbedView', 'globalize', 'require', 'emby-tabs', 'emby-button', 'emby-
|
||||||
throw new Error('index cannot be null');
|
throw new Error('index cannot be null');
|
||||||
}
|
}
|
||||||
|
|
||||||
var depends = [];
|
const depends = [];
|
||||||
|
|
||||||
switch (index) {
|
switch (index) {
|
||||||
case 0:
|
case 0:
|
||||||
|
@ -35,9 +39,9 @@ define(['tabbedView', 'globalize', 'require', 'emby-tabs', 'emby-button', 'emby-
|
||||||
depends.push('controllers/favorites');
|
depends.push('controllers/favorites');
|
||||||
}
|
}
|
||||||
|
|
||||||
var instance = this;
|
const instance = this;
|
||||||
return getRequirePromise(depends).then(function (controllerFactory) {
|
return getRequirePromise(depends).then(function (controllerFactory) {
|
||||||
var controller = instance.tabControllers[index];
|
let controller = instance.tabControllers[index];
|
||||||
|
|
||||||
if (!controller) {
|
if (!controller) {
|
||||||
controller = new controllerFactory(instance.view.querySelector(".tabContent[data-index='" + index + "']"), instance.params);
|
controller = new controllerFactory(instance.view.querySelector(".tabContent[data-index='" + index + "']"), instance.params);
|
||||||
|
@ -48,28 +52,26 @@ define(['tabbedView', 'globalize', 'require', 'emby-tabs', 'emby-button', 'emby-
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function HomeView(view, params) {
|
class HomeView {
|
||||||
|
constructor(view, params) {
|
||||||
TabbedView.call(this, view, params);
|
TabbedView.call(this, view, params);
|
||||||
}
|
}
|
||||||
|
setTitle() {
|
||||||
|
Emby.Page.setTitle(null);
|
||||||
|
}
|
||||||
|
onPause() {
|
||||||
|
TabbedView.prototype.onPause.call(this);
|
||||||
|
document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader');
|
||||||
|
}
|
||||||
|
onResume(options) {
|
||||||
|
TabbedView.prototype.onResume.call(this, options);
|
||||||
|
document.querySelector('.skinHeader').classList.add('noHomeButtonHeader');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
Object.assign(HomeView.prototype, TabbedView.prototype);
|
Object.assign(HomeView.prototype, TabbedView.prototype);
|
||||||
HomeView.prototype.getTabs = getTabs;
|
HomeView.prototype.getTabs = getTabs;
|
||||||
HomeView.prototype.getDefaultTabIndex = getDefaultTabIndex;
|
HomeView.prototype.getDefaultTabIndex = getDefaultTabIndex;
|
||||||
HomeView.prototype.getTabController = getTabController;
|
HomeView.prototype.getTabController = getTabController;
|
||||||
|
|
||||||
HomeView.prototype.setTitle = function () {
|
export default HomeView;
|
||||||
Emby.Page.setTitle(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
HomeView.prototype.onPause = function () {
|
|
||||||
TabbedView.prototype.onPause.call(this);
|
|
||||||
document.querySelector('.skinHeader').classList.remove('noHomeButtonHeader');
|
|
||||||
};
|
|
||||||
|
|
||||||
HomeView.prototype.onResume = function (options) {
|
|
||||||
TabbedView.prototype.onResume.call(this, options);
|
|
||||||
document.querySelector('.skinHeader').classList.add('noHomeButtonHeader');
|
|
||||||
};
|
|
||||||
|
|
||||||
return HomeView;
|
|
||||||
});
|
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSettings', 'cardBuilder', 'datetime', 'mediaInfo', 'backdrop', 'listView', 'itemContextMenu', 'itemHelper', 'dom', 'indicators', 'imageLoader', 'libraryMenu', 'globalize', 'browser', 'events', 'playbackManager', 'scrollStyles', 'emby-itemscontainer', 'emby-checkbox', 'emby-button', 'emby-playstatebutton', 'emby-ratingbutton', 'emby-scroller', 'emby-select'], function (loading, appRouter, layoutManager, connectionManager, userSettings, cardBuilder, datetime, mediaInfo, backdrop, listView, itemContextMenu, itemHelper, dom, indicators, imageLoader, libraryMenu, globalize, browser, events, playbackManager) {
|
define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSettings', 'cardBuilder', 'datetime', 'mediaInfo', 'backdrop', 'listView', 'itemContextMenu', 'itemHelper', 'dom', 'indicators', 'imageLoader', 'libraryMenu', 'globalize', 'browser', 'events', 'playbackManager', 'scrollStyles', 'emby-itemscontainer', 'emby-checkbox', 'emby-button', 'emby-playstatebutton', 'emby-ratingbutton', 'emby-scroller', 'emby-select'], function (loading, appRouter, layoutManager, connectionManager, userSettings, cardBuilder, datetime, mediaInfo, backdrop, listView, itemContextMenu, itemHelper, dom, indicators, imageLoader, libraryMenu, globalize, browser, events, playbackManager) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
|
libraryMenu = LibraryMenu.default || libraryMenu;
|
||||||
|
|
||||||
function getPromise(apiClient, params) {
|
function getPromise(apiClient, params) {
|
||||||
var id = params.id;
|
var id = params.id;
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu', 'mainTabsManager', 'cardBuilder', 'dom', 'imageLoader', 'playbackManager', 'globalize', 'emby-scroller', 'emby-itemscontainer', 'emby-tabs', 'emby-button'], function (events, layoutManager, inputManager, userSettings, libraryMenu, mainTabsManager, cardBuilder, dom, imageLoader, playbackManager, globalize) {
|
define(['events', 'layoutManager', 'inputManager', 'userSettings', 'libraryMenu', 'mainTabsManager', 'cardBuilder', 'dom', 'imageLoader', 'playbackManager', 'globalize', 'emby-scroller', 'emby-itemscontainer', 'emby-tabs', 'emby-button'], function (events, layoutManager, inputManager, userSettings, libraryMenu, mainTabsManager, cardBuilder, dom, imageLoader, playbackManager, globalize) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
|
libraryMenu = LibraryMenu.default || libraryMenu;
|
||||||
|
|
||||||
function enableScrollX() {
|
function enableScrollX() {
|
||||||
return !layoutManager.desktop;
|
return !layoutManager.desktop;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', 'cardBuilder', 'dom', 'apphost', 'imageLoader', 'libraryMenu', 'playbackManager', 'mainTabsManager', 'globalize', 'scrollStyles', 'emby-itemscontainer', 'emby-tabs', 'emby-button', 'flexStyles'], function (browser, layoutManager, userSettings, inputManager, loading, cardBuilder, dom, appHost, imageLoader, libraryMenu, playbackManager, mainTabsManager, globalize) {
|
define(['browser', 'layoutManager', 'userSettings', 'inputManager', 'loading', 'cardBuilder', 'dom', 'apphost', 'imageLoader', 'libraryMenu', 'playbackManager', 'mainTabsManager', 'globalize', 'scrollStyles', 'emby-itemscontainer', 'emby-tabs', 'emby-button', 'flexStyles'], function (browser, layoutManager, userSettings, inputManager, loading, cardBuilder, dom, appHost, imageLoader, libraryMenu, playbackManager, mainTabsManager, globalize) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
|
libraryMenu = LibraryMenu.default || libraryMenu;
|
||||||
|
|
||||||
function itemsPerRow() {
|
function itemsPerRow() {
|
||||||
var screenWidth = dom.getWindowSize().innerWidth;
|
var screenWidth = dom.getWindowSize().innerWidth;
|
||||||
|
|
||||||
|
|
|
@ -1,8 +1,26 @@
|
||||||
define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', 'viewManager', 'libraryBrowser', 'appRouter', 'apphost', 'playbackManager', 'syncPlayManager', 'groupSelectionMenu', 'browser', 'globalize', 'scripts/imagehelper', 'paper-icon-button-light', 'material-icons', 'scrollStyles', 'flexStyles'], function (dom, layoutManager, inputManager, connectionManager, events, viewManager, libraryBrowser, appRouter, appHost, playbackManager, syncPlayManager, groupSelectionMenu, browser, globalize, imageHelper) {
|
import dom from 'dom';
|
||||||
'use strict';
|
import layoutManager from 'layoutManager';
|
||||||
|
import inputManager from 'inputManager';
|
||||||
|
import connectionManager from 'connectionManager';
|
||||||
|
import events from 'events';
|
||||||
|
import viewManager from 'viewManager';
|
||||||
|
import appRouter from 'appRouter';
|
||||||
|
import appHost from 'apphost';
|
||||||
|
import playbackManager from 'playbackManager';
|
||||||
|
import syncPlayManager from 'syncPlayManager';
|
||||||
|
import groupSelectionMenu from 'groupSelectionMenu';
|
||||||
|
import browser from 'browser';
|
||||||
|
import globalize from 'globalize';
|
||||||
|
import imageHelper from 'scripts/imagehelper';
|
||||||
|
import 'paper-icon-button-light';
|
||||||
|
import 'material-icons';
|
||||||
|
import 'scrollStyles';
|
||||||
|
import 'flexStyles';
|
||||||
|
|
||||||
|
/* eslint-disable indent */
|
||||||
|
|
||||||
function renderHeader() {
|
function renderHeader() {
|
||||||
var html = '';
|
let html = '';
|
||||||
html += '<div class="flex align-items-center flex-grow headerTop">';
|
html += '<div class="flex align-items-center flex-grow headerTop">';
|
||||||
html += '<div class="headerLeft">';
|
html += '<div class="headerLeft">';
|
||||||
html += '<button type="button" is="paper-icon-button-light" class="headerButton headerButtonLeft headerBackButton hide"><span class="material-icons ' + (browser.safari ? 'chevron_left' : 'arrow_back') + '"></span></button>';
|
html += '<button type="button" is="paper-icon-button-light" class="headerButton headerButtonLeft headerBackButton hide"><span class="material-icons ' + (browser.safari ? 'chevron_left' : 'arrow_back') + '"></span></button>';
|
||||||
|
@ -56,11 +74,11 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateUserInHeader(user) {
|
function updateUserInHeader(user) {
|
||||||
var hasImage;
|
let hasImage;
|
||||||
|
|
||||||
if (user && user.name) {
|
if (user && user.name) {
|
||||||
if (user.imageUrl) {
|
if (user.imageUrl) {
|
||||||
var url = user.imageUrl;
|
const url = user.imageUrl;
|
||||||
updateHeaderUserButton(url);
|
updateHeaderUserButton(url);
|
||||||
hasImage = true;
|
hasImage = true;
|
||||||
}
|
}
|
||||||
|
@ -87,9 +105,9 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
|
||||||
headerCastButton.classList.remove('hide');
|
headerCastButton.classList.remove('hide');
|
||||||
}
|
}
|
||||||
|
|
||||||
var policy = user.Policy ? user.Policy : user.localUser.Policy;
|
const policy = user.Policy ? user.Policy : user.localUser.Policy;
|
||||||
|
|
||||||
var apiClient = getCurrentApiClient();
|
const apiClient = getCurrentApiClient();
|
||||||
if (headerSyncButton && policy && policy.SyncPlayAccess !== 'None' && apiClient.isMinServerVersion('10.6.0')) {
|
if (headerSyncButton && policy && policy.SyncPlayAccess !== 'None' && apiClient.isMinServerVersion('10.6.0')) {
|
||||||
headerSyncButton.classList.remove('hide');
|
headerSyncButton.classList.remove('hide');
|
||||||
}
|
}
|
||||||
|
@ -139,7 +157,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
|
||||||
mainDrawerButton.addEventListener('click', toggleMainDrawer);
|
mainDrawerButton.addEventListener('click', toggleMainDrawer);
|
||||||
}
|
}
|
||||||
|
|
||||||
var headerBackButton = skinHeader.querySelector('.headerBackButton');
|
const headerBackButton = skinHeader.querySelector('.headerBackButton');
|
||||||
|
|
||||||
if (headerBackButton) {
|
if (headerBackButton) {
|
||||||
headerBackButton.addEventListener('click', onBackClick);
|
headerBackButton.addEventListener('click', onBackClick);
|
||||||
|
@ -181,7 +199,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
|
||||||
}
|
}
|
||||||
|
|
||||||
function onCastButtonClicked() {
|
function onCastButtonClicked() {
|
||||||
var btn = this;
|
const btn = this;
|
||||||
|
|
||||||
require(['playerSelectionMenu'], function (playerSelectionMenu) {
|
require(['playerSelectionMenu'], function (playerSelectionMenu) {
|
||||||
playerSelectionMenu.show(btn);
|
playerSelectionMenu.show(btn);
|
||||||
|
@ -189,12 +207,12 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
|
||||||
}
|
}
|
||||||
|
|
||||||
function onSyncButtonClicked() {
|
function onSyncButtonClicked() {
|
||||||
var btn = this;
|
const btn = this;
|
||||||
groupSelectionMenu.show(btn);
|
groupSelectionMenu.show(btn);
|
||||||
}
|
}
|
||||||
|
|
||||||
function onSyncPlayEnabled(event, enabled) {
|
function onSyncPlayEnabled(event, enabled) {
|
||||||
var icon = headerSyncButton.querySelector('span');
|
const icon = headerSyncButton.querySelector('span');
|
||||||
icon.classList.remove('sync', 'sync_disabled', 'sync_problem');
|
icon.classList.remove('sync', 'sync_disabled', 'sync_problem');
|
||||||
if (enabled) {
|
if (enabled) {
|
||||||
icon.classList.add('sync');
|
icon.classList.add('sync');
|
||||||
|
@ -204,7 +222,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
|
||||||
}
|
}
|
||||||
|
|
||||||
function onSyncPlaySyncing(event, is_syncing, syncMethod) {
|
function onSyncPlaySyncing(event, is_syncing, syncMethod) {
|
||||||
var icon = headerSyncButton.querySelector('span');
|
const icon = headerSyncButton.querySelector('span');
|
||||||
icon.classList.remove('sync', 'sync_disabled', 'sync_problem');
|
icon.classList.remove('sync', 'sync_disabled', 'sync_problem');
|
||||||
if (is_syncing) {
|
if (is_syncing) {
|
||||||
icon.classList.add('sync_problem');
|
icon.classList.add('sync_problem');
|
||||||
|
@ -250,7 +268,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
|
||||||
}
|
}
|
||||||
|
|
||||||
function refreshLibraryInfoInDrawer(user, drawer) {
|
function refreshLibraryInfoInDrawer(user, drawer) {
|
||||||
var html = '';
|
let html = '';
|
||||||
html += '<div style="height:.5em;"></div>';
|
html += '<div style="height:.5em;"></div>';
|
||||||
html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder" href="home.html"><span class="material-icons navMenuOptionIcon home"></span><span class="navMenuOptionText">' + globalize.translate('ButtonHome') + '</span></a>';
|
html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder" href="home.html"><span class="material-icons navMenuOptionIcon home"></span><span class="navMenuOptionText">' + globalize.translate('ButtonHome') + '</span></a>';
|
||||||
|
|
||||||
|
@ -286,12 +304,12 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
|
||||||
// add buttons to navigation drawer
|
// add buttons to navigation drawer
|
||||||
navDrawerScrollContainer.innerHTML = html;
|
navDrawerScrollContainer.innerHTML = html;
|
||||||
|
|
||||||
var btnSettings = navDrawerScrollContainer.querySelector('.btnSettings');
|
const btnSettings = navDrawerScrollContainer.querySelector('.btnSettings');
|
||||||
if (btnSettings) {
|
if (btnSettings) {
|
||||||
btnSettings.addEventListener('click', onSettingsClick);
|
btnSettings.addEventListener('click', onSettingsClick);
|
||||||
}
|
}
|
||||||
|
|
||||||
var btnLogout = navDrawerScrollContainer.querySelector('.btnLogout');
|
const btnLogout = navDrawerScrollContainer.querySelector('.btnLogout');
|
||||||
if (btnLogout) {
|
if (btnLogout) {
|
||||||
btnLogout.addEventListener('click', onLogoutClick);
|
btnLogout.addEventListener('click', onLogoutClick);
|
||||||
}
|
}
|
||||||
|
@ -313,20 +331,20 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateDashboardMenuSelectedItem() {
|
function updateDashboardMenuSelectedItem() {
|
||||||
var links = navDrawerScrollContainer.querySelectorAll('.navMenuOption');
|
const links = navDrawerScrollContainer.querySelectorAll('.navMenuOption');
|
||||||
var currentViewId = viewManager.currentView().id;
|
const currentViewId = viewManager.currentView().id;
|
||||||
|
|
||||||
for (var i = 0, length = links.length; i < length; i++) {
|
for (let i = 0, length = links.length; i < length; i++) {
|
||||||
var link = links[i];
|
let link = links[i];
|
||||||
var selected = false;
|
let selected = false;
|
||||||
var pageIds = link.getAttribute('data-pageids');
|
let pageIds = link.getAttribute('data-pageids');
|
||||||
|
|
||||||
if (pageIds) {
|
if (pageIds) {
|
||||||
pageIds = pageIds.split('|');
|
pageIds = pageIds.split('|');
|
||||||
selected = -1 != pageIds.indexOf(currentViewId);
|
selected = -1 != pageIds.indexOf(currentViewId);
|
||||||
}
|
}
|
||||||
|
|
||||||
var pageUrls = link.getAttribute('data-pageurls');
|
let pageUrls = link.getAttribute('data-pageurls');
|
||||||
|
|
||||||
if (pageUrls) {
|
if (pageUrls) {
|
||||||
pageUrls = pageUrls.split('|');
|
pageUrls = pageUrls.split('|');
|
||||||
|
@ -335,7 +353,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
|
||||||
|
|
||||||
if (selected) {
|
if (selected) {
|
||||||
link.classList.add('navMenuOption-selected');
|
link.classList.add('navMenuOption-selected');
|
||||||
var title = '';
|
let title = '';
|
||||||
link = link.querySelector('.navMenuOptionText') || link;
|
link = link.querySelector('.navMenuOptionText') || link;
|
||||||
title += (link.innerText || link.textContent).trim();
|
title += (link.innerText || link.textContent).trim();
|
||||||
LibraryMenu.setTitle(title);
|
LibraryMenu.setTitle(title);
|
||||||
|
@ -346,7 +364,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
|
||||||
}
|
}
|
||||||
|
|
||||||
function createToolsMenuList(pluginItems) {
|
function createToolsMenuList(pluginItems) {
|
||||||
var links = [{
|
const links = [{
|
||||||
name: globalize.translate('TabServer')
|
name: globalize.translate('TabServer')
|
||||||
}, {
|
}, {
|
||||||
name: globalize.translate('TabDashboard'),
|
name: globalize.translate('TabDashboard'),
|
||||||
|
@ -458,8 +476,8 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
|
||||||
}
|
}
|
||||||
|
|
||||||
function addPluginPagesToMainMenu(links, pluginItems, section) {
|
function addPluginPagesToMainMenu(links, pluginItems, section) {
|
||||||
for (var i = 0, length = pluginItems.length; i < length; i++) {
|
for (let i = 0, length = pluginItems.length; i < length; i++) {
|
||||||
var pluginItem = pluginItems[i];
|
const pluginItem = pluginItems[i];
|
||||||
|
|
||||||
if (pluginItem.EnableInMainMenu && pluginItem.MenuSection === section) {
|
if (pluginItem.EnableInMainMenu && pluginItem.MenuSection === section) {
|
||||||
links.push({
|
links.push({
|
||||||
|
@ -479,10 +497,10 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
|
||||||
}
|
}
|
||||||
|
|
||||||
function getToolsLinkHtml(item) {
|
function getToolsLinkHtml(item) {
|
||||||
var menuHtml = '';
|
let menuHtml = '';
|
||||||
var pageIds = item.pageIds ? item.pageIds.join('|') : '';
|
let pageIds = item.pageIds ? item.pageIds.join('|') : '';
|
||||||
pageIds = pageIds ? ' data-pageids="' + pageIds + '"' : '';
|
pageIds = pageIds ? ' data-pageids="' + pageIds + '"' : '';
|
||||||
var pageUrls = item.pageUrls ? item.pageUrls.join('|') : '';
|
let pageUrls = item.pageUrls ? item.pageUrls.join('|') : '';
|
||||||
pageUrls = pageUrls ? ' data-pageurls="' + pageUrls + '"' : '';
|
pageUrls = pageUrls ? ' data-pageurls="' + pageUrls + '"' : '';
|
||||||
menuHtml += '<a is="emby-linkbutton" class="navMenuOption" href="' + item.href + '"' + pageIds + pageUrls + '>';
|
menuHtml += '<a is="emby-linkbutton" class="navMenuOption" href="' + item.href + '"' + pageIds + pageUrls + '>';
|
||||||
|
|
||||||
|
@ -498,11 +516,11 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
|
||||||
|
|
||||||
function getToolsMenuHtml(apiClient) {
|
function getToolsMenuHtml(apiClient) {
|
||||||
return getToolsMenuLinks(apiClient).then(function (items) {
|
return getToolsMenuLinks(apiClient).then(function (items) {
|
||||||
var item;
|
let item;
|
||||||
var menuHtml = '';
|
let menuHtml = '';
|
||||||
menuHtml += '<div class="drawerContent">';
|
menuHtml += '<div class="drawerContent">';
|
||||||
|
|
||||||
for (var i = 0; i < items.length; i++) {
|
for (let i = 0; i < items.length; i++) {
|
||||||
item = items[i];
|
item = items[i];
|
||||||
|
|
||||||
if (item.href) {
|
if (item.href) {
|
||||||
|
@ -520,7 +538,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
|
||||||
|
|
||||||
function createDashboardMenu(apiClient) {
|
function createDashboardMenu(apiClient) {
|
||||||
return getToolsMenuHtml(apiClient).then(function (toolsMenuHtml) {
|
return getToolsMenuHtml(apiClient).then(function (toolsMenuHtml) {
|
||||||
var html = '';
|
let html = '';
|
||||||
html += '<a class="adminDrawerLogo clearLink" is="emby-linkbutton" href="home.html">';
|
html += '<a class="adminDrawerLogo clearLink" is="emby-linkbutton" href="home.html">';
|
||||||
html += '<img src="assets/img/icon-transparent.png" />';
|
html += '<img src="assets/img/icon-transparent.png" />';
|
||||||
html += '</a>';
|
html += '</a>';
|
||||||
|
@ -531,24 +549,24 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
|
||||||
}
|
}
|
||||||
|
|
||||||
function onSidebarLinkClick() {
|
function onSidebarLinkClick() {
|
||||||
var section = this.getElementsByClassName('sectionName')[0];
|
const section = this.getElementsByClassName('sectionName')[0];
|
||||||
var text = section ? section.innerHTML : this.innerHTML;
|
const text = section ? section.innerHTML : this.innerHTML;
|
||||||
LibraryMenu.setTitle(text);
|
LibraryMenu.setTitle(text);
|
||||||
}
|
}
|
||||||
|
|
||||||
function getUserViews(apiClient, userId) {
|
function getUserViews(apiClient, userId) {
|
||||||
return apiClient.getUserViews({}, userId).then(function (result) {
|
return apiClient.getUserViews({}, userId).then(function (result) {
|
||||||
var items = result.Items;
|
const items = result.Items;
|
||||||
var list = [];
|
const list = [];
|
||||||
|
|
||||||
for (var i = 0, length = items.length; i < length; i++) {
|
for (let i = 0, length = items.length; i < length; i++) {
|
||||||
var view = items[i];
|
const view = items[i];
|
||||||
list.push(view);
|
list.push(view);
|
||||||
|
|
||||||
if ('livetv' == view.CollectionType) {
|
if ('livetv' == view.CollectionType) {
|
||||||
view.ImageTags = {};
|
view.ImageTags = {};
|
||||||
view.icon = 'live_tv';
|
view.icon = 'live_tv';
|
||||||
var guideView = Object.assign({}, view);
|
const guideView = Object.assign({}, view);
|
||||||
guideView.Name = globalize.translate('ButtonGuide');
|
guideView.Name = globalize.translate('ButtonGuide');
|
||||||
guideView.ImageTags = {};
|
guideView.ImageTags = {};
|
||||||
guideView.icon = 'dvr';
|
guideView.icon = 'dvr';
|
||||||
|
@ -562,7 +580,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
|
||||||
}
|
}
|
||||||
|
|
||||||
function showBySelector(selector, show) {
|
function showBySelector(selector, show) {
|
||||||
var elem = document.querySelector(selector);
|
const elem = document.querySelector(selector);
|
||||||
|
|
||||||
if (elem) {
|
if (elem) {
|
||||||
if (show) {
|
if (show) {
|
||||||
|
@ -592,17 +610,17 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
|
||||||
showBySelector('.libraryMenuDownloads', false);
|
showBySelector('.libraryMenuDownloads', false);
|
||||||
}
|
}
|
||||||
|
|
||||||
var userId = Dashboard.getCurrentUserId();
|
const userId = Dashboard.getCurrentUserId();
|
||||||
var apiClient = getCurrentApiClient();
|
const apiClient = getCurrentApiClient();
|
||||||
var libraryMenuOptions = document.querySelector('.libraryMenuOptions');
|
const libraryMenuOptions = document.querySelector('.libraryMenuOptions');
|
||||||
|
|
||||||
if (libraryMenuOptions) {
|
if (libraryMenuOptions) {
|
||||||
getUserViews(apiClient, userId).then(function (result) {
|
getUserViews(apiClient, userId).then(function (result) {
|
||||||
var items = result;
|
const items = result;
|
||||||
var html = `<h3 class="sidebarHeader">${globalize.translate('HeaderMedia')}</h3>`;
|
let html = `<h3 class="sidebarHeader">${globalize.translate('HeaderMedia')}</h3>`;
|
||||||
html += items.map(function (i) {
|
html += items.map(function (i) {
|
||||||
var icon = i.icon || imageHelper.getLibraryIcon(i.CollectionType);
|
const icon = i.icon || imageHelper.getLibraryIcon(i.CollectionType);
|
||||||
var itemId = i.Id;
|
const itemId = i.Id;
|
||||||
|
|
||||||
const linkHtml = `<a is="emby-linkbutton" data-itemid="${itemId}" class="lnkMediaFolder navMenuOption" href="${getItemHref(i, i.CollectionType)}">
|
const linkHtml = `<a is="emby-linkbutton" data-itemid="${itemId}" class="lnkMediaFolder navMenuOption" href="${getItemHref(i, i.CollectionType)}">
|
||||||
<span class="material-icons navMenuOptionIcon ${icon}"></span>
|
<span class="material-icons navMenuOptionIcon ${icon}"></span>
|
||||||
|
@ -612,8 +630,8 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
|
||||||
return linkHtml;
|
return linkHtml;
|
||||||
}).join('');
|
}).join('');
|
||||||
libraryMenuOptions.innerHTML = html;
|
libraryMenuOptions.innerHTML = html;
|
||||||
var elem = libraryMenuOptions;
|
const elem = libraryMenuOptions;
|
||||||
var sidebarLinks = elem.querySelectorAll('.navMenuOption');
|
const sidebarLinks = elem.querySelectorAll('.navMenuOption');
|
||||||
|
|
||||||
for (const sidebarLink of sidebarLinks) {
|
for (const sidebarLink of sidebarLinks) {
|
||||||
sidebarLink.removeEventListener('click', onSidebarLinkClick);
|
sidebarLink.removeEventListener('click', onSidebarLinkClick);
|
||||||
|
@ -642,9 +660,9 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateCastIcon() {
|
function updateCastIcon() {
|
||||||
var context = document;
|
const context = document;
|
||||||
var info = playbackManager.getPlayerInfo();
|
const info = playbackManager.getPlayerInfo();
|
||||||
var icon = headerCastButton.querySelector('.material-icons');
|
const icon = headerCastButton.querySelector('.material-icons');
|
||||||
|
|
||||||
icon.classList.remove('cast_connected', 'cast');
|
icon.classList.remove('cast_connected', 'cast');
|
||||||
|
|
||||||
|
@ -660,18 +678,16 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateLibraryNavLinks(page) {
|
function updateLibraryNavLinks(page) {
|
||||||
var i;
|
const isLiveTvPage = page.classList.contains('liveTvPage');
|
||||||
var length;
|
const isChannelsPage = page.classList.contains('channelsPage');
|
||||||
var isLiveTvPage = page.classList.contains('liveTvPage');
|
const isEditorPage = page.classList.contains('metadataEditorPage');
|
||||||
var isChannelsPage = page.classList.contains('channelsPage');
|
const isMySyncPage = page.classList.contains('mySyncPage');
|
||||||
var isEditorPage = page.classList.contains('metadataEditorPage');
|
const id = isLiveTvPage || isChannelsPage || isEditorPage || isMySyncPage || page.classList.contains('allLibraryPage') ? '' : getTopParentId() || '';
|
||||||
var isMySyncPage = page.classList.contains('mySyncPage');
|
const elems = document.getElementsByClassName('lnkMediaFolder');
|
||||||
var id = isLiveTvPage || isChannelsPage || isEditorPage || isMySyncPage || page.classList.contains('allLibraryPage') ? '' : getTopParentId() || '';
|
|
||||||
var elems = document.getElementsByClassName('lnkMediaFolder');
|
|
||||||
|
|
||||||
for (var i = 0, length = elems.length; i < length; i++) {
|
for (let i = 0, length = elems.length; i < length; i++) {
|
||||||
var lnkMediaFolder = elems[i];
|
const lnkMediaFolder = elems[i];
|
||||||
var itemId = lnkMediaFolder.getAttribute('data-itemid');
|
const itemId = lnkMediaFolder.getAttribute('data-itemid');
|
||||||
|
|
||||||
if (isChannelsPage && 'channels' === itemId) {
|
if (isChannelsPage && 'channels' === itemId) {
|
||||||
lnkMediaFolder.classList.add('navMenuOption-selected');
|
lnkMediaFolder.classList.add('navMenuOption-selected');
|
||||||
|
@ -692,7 +708,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateMenuForPageType(isDashboardPage, isLibraryPage) {
|
function updateMenuForPageType(isDashboardPage, isLibraryPage) {
|
||||||
var newPageType = isDashboardPage ? 2 : isLibraryPage ? 1 : 3;
|
const newPageType = isDashboardPage ? 2 : isLibraryPage ? 1 : 3;
|
||||||
|
|
||||||
if (currentPageType !== newPageType) {
|
if (currentPageType !== newPageType) {
|
||||||
currentPageType = newPageType;
|
currentPageType = newPageType;
|
||||||
|
@ -703,7 +719,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
|
||||||
skinHeader.classList.remove('headroomDisabled');
|
skinHeader.classList.remove('headroomDisabled');
|
||||||
}
|
}
|
||||||
|
|
||||||
var bodyClassList = document.body.classList;
|
const bodyClassList = document.body.classList;
|
||||||
|
|
||||||
if (isLibraryPage) {
|
if (isLibraryPage) {
|
||||||
bodyClassList.add('libraryDocument');
|
bodyClassList.add('libraryDocument');
|
||||||
|
@ -740,7 +756,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateTitle(page) {
|
function updateTitle(page) {
|
||||||
var title = page.getAttribute('data-title');
|
const title = page.getAttribute('data-title');
|
||||||
|
|
||||||
if (title) {
|
if (title) {
|
||||||
LibraryMenu.setTitle(title);
|
LibraryMenu.setTitle(title);
|
||||||
|
@ -765,7 +781,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
|
||||||
|
|
||||||
function initHeadRoom(elem) {
|
function initHeadRoom(elem) {
|
||||||
require(['headroom'], function (Headroom) {
|
require(['headroom'], function (Headroom) {
|
||||||
var headroom = new Headroom(elem);
|
const headroom = new Headroom(elem);
|
||||||
headroom.init();
|
headroom.init();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -785,7 +801,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
|
||||||
}
|
}
|
||||||
|
|
||||||
function getNavDrawerOptions() {
|
function getNavDrawerOptions() {
|
||||||
var drawerWidth = screen.availWidth - 50;
|
let drawerWidth = screen.availWidth - 50;
|
||||||
drawerWidth = Math.max(drawerWidth, 240);
|
drawerWidth = Math.max(drawerWidth, 240);
|
||||||
drawerWidth = Math.min(drawerWidth, 320);
|
drawerWidth = Math.min(drawerWidth, 320);
|
||||||
return {
|
return {
|
||||||
|
@ -816,25 +832,25 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
var navDrawerElement;
|
let navDrawerElement;
|
||||||
var navDrawerScrollContainer;
|
let navDrawerScrollContainer;
|
||||||
var navDrawerInstance;
|
let navDrawerInstance;
|
||||||
var mainDrawerButton;
|
let mainDrawerButton;
|
||||||
var headerHomeButton;
|
let headerHomeButton;
|
||||||
var currentDrawerType;
|
let currentDrawerType;
|
||||||
var pageTitleElement;
|
let pageTitleElement;
|
||||||
var headerBackButton;
|
let headerBackButton;
|
||||||
var headerUserButton;
|
let headerUserButton;
|
||||||
var currentUser;
|
let currentUser;
|
||||||
var headerCastButton;
|
let headerCastButton;
|
||||||
var headerSearchButton;
|
let headerSearchButton;
|
||||||
var headerAudioPlayerButton;
|
let headerAudioPlayerButton;
|
||||||
var headerSyncButton;
|
let headerSyncButton;
|
||||||
var enableLibraryNavDrawer = layoutManager.desktop;
|
const enableLibraryNavDrawer = layoutManager.desktop;
|
||||||
var enableLibraryNavDrawerHome = !layoutManager.tv;
|
const enableLibraryNavDrawerHome = !layoutManager.tv;
|
||||||
var skinHeader = document.querySelector('.skinHeader');
|
const skinHeader = document.querySelector('.skinHeader');
|
||||||
var requiresUserRefresh = true;
|
let requiresUserRefresh = true;
|
||||||
window.LibraryMenu = {
|
const LibraryMenu = {
|
||||||
getTopParentId: getTopParentId,
|
getTopParentId: getTopParentId,
|
||||||
onHardwareMenuButtonClick: function () {
|
onHardwareMenuButtonClick: function () {
|
||||||
toggleMainDrawer();
|
toggleMainDrawer();
|
||||||
|
@ -873,7 +889,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
|
||||||
title = '';
|
title = '';
|
||||||
}
|
}
|
||||||
|
|
||||||
var html = title;
|
const html = title;
|
||||||
|
|
||||||
if (!pageTitleElement) {
|
if (!pageTitleElement) {
|
||||||
pageTitleElement = document.querySelector('.pageTitle');
|
pageTitleElement = document.querySelector('.pageTitle');
|
||||||
|
@ -896,18 +912,18 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
var currentPageType;
|
let currentPageType;
|
||||||
pageClassOn('pagebeforeshow', 'page', function (e) {
|
pageClassOn('pagebeforeshow', 'page', function (e) {
|
||||||
if (!this.classList.contains('withTabs')) {
|
if (!this.classList.contains('withTabs')) {
|
||||||
LibraryMenu.setTabs(null);
|
LibraryMenu.setTabs(null);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
pageClassOn('pageshow', 'page', function (e) {
|
pageClassOn('pageshow', 'page', function (e) {
|
||||||
var page = this;
|
const page = this;
|
||||||
var isDashboardPage = page.classList.contains('type-interior');
|
const isDashboardPage = page.classList.contains('type-interior');
|
||||||
var isHomePage = page.classList.contains('homePage');
|
const isHomePage = page.classList.contains('homePage');
|
||||||
var isLibraryPage = !isDashboardPage && page.classList.contains('libraryPage');
|
const isLibraryPage = !isDashboardPage && page.classList.contains('libraryPage');
|
||||||
var apiClient = getCurrentApiClient();
|
const apiClient = getCurrentApiClient();
|
||||||
|
|
||||||
if (isDashboardPage) {
|
if (isDashboardPage) {
|
||||||
if (mainDrawerButton) {
|
if (mainDrawerButton) {
|
||||||
|
@ -944,7 +960,7 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
|
||||||
renderHeader();
|
renderHeader();
|
||||||
|
|
||||||
events.on(connectionManager, 'localusersignedin', function (e, user) {
|
events.on(connectionManager, 'localusersignedin', function (e, user) {
|
||||||
var currentApiClient = connectionManager.getApiClient(user.ServerId);
|
const currentApiClient = connectionManager.getApiClient(user.ServerId);
|
||||||
|
|
||||||
currentDrawerType = null;
|
currentDrawerType = null;
|
||||||
currentUser = {
|
currentUser = {
|
||||||
|
@ -968,5 +984,9 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
|
||||||
events.on(syncPlayManager, 'syncing', onSyncPlaySyncing);
|
events.on(syncPlayManager, 'syncing', onSyncPlaySyncing);
|
||||||
|
|
||||||
loadNavDrawer();
|
loadNavDrawer();
|
||||||
return LibraryMenu;
|
|
||||||
});
|
window.LibraryMenu = LibraryMenu;
|
||||||
|
|
||||||
|
export default LibraryMenu;
|
||||||
|
|
||||||
|
/* eslint-enable indent */
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue