mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-18 03:18:19 -07:00
980 lines
36 KiB
JavaScript
980 lines
36 KiB
JavaScript
define(["dom", "layoutManager", "inputManager", "connectionManager", "events", "viewManager", "libraryBrowser", "appRouter", "apphost", "playbackManager", "browser", "globalize", "paper-icon-button-light", "material-icons", "scrollStyles", "flexStyles"], function (dom, layoutManager, inputManager, connectionManager, events, viewManager, libraryBrowser, appRouter, appHost, playbackManager, browser, globalize) {
|
|
"use strict";
|
|
|
|
function getCurrentApiClient() {
|
|
if (currentUser && currentUser.localUser) {
|
|
return connectionManager.getApiClient(currentUser.localUser.ServerId);
|
|
}
|
|
|
|
return connectionManager.currentApiClient();
|
|
}
|
|
|
|
function lazyLoadViewMenuBarImages() {
|
|
require(["imageLoader"], function (imageLoader) {
|
|
imageLoader.lazyChildren(skinHeader);
|
|
});
|
|
}
|
|
|
|
function onBackClick() {
|
|
appRouter.back();
|
|
}
|
|
|
|
function updateUserInHeader(user) {
|
|
var hasImage;
|
|
|
|
if (user && user.name) {
|
|
if (user.imageUrl) {
|
|
var url = user.imageUrl;
|
|
|
|
if (user.supportsImageParams) {
|
|
url += "&height=" + Math.round(26 * Math.max(window.devicePixelRatio || 1, 2));
|
|
}
|
|
|
|
updateHeaderUserButton(url);
|
|
hasImage = true;
|
|
}
|
|
|
|
headerUserButton.classList.remove("hide");
|
|
} else {
|
|
headerUserButton.classList.add("hide");
|
|
}
|
|
|
|
if (!hasImage) {
|
|
updateHeaderUserButton(null);
|
|
}
|
|
|
|
if (user && user.localUser) {
|
|
if (headerHomeButton) {
|
|
headerHomeButton.classList.remove("hide");
|
|
}
|
|
|
|
if (headerSearchButton) {
|
|
headerSearchButton.classList.remove("hide");
|
|
}
|
|
|
|
if (headerSettingsButton) {
|
|
if (user.localUser.Policy.IsAdministrator) {
|
|
headerSettingsButton.classList.remove("hide");
|
|
} else {
|
|
headerSettingsButton.classList.add("hide");
|
|
}
|
|
}
|
|
|
|
headerCastButton.classList.remove("hide");
|
|
} else {
|
|
headerHomeButton.classList.add("hide");
|
|
headerCastButton.classList.add("hide");
|
|
|
|
if (headerSearchButton) {
|
|
headerSearchButton.classList.add("hide");
|
|
}
|
|
|
|
if (headerSettingsButton) {
|
|
headerSettingsButton.classList.add("hide");
|
|
}
|
|
}
|
|
|
|
requiresUserRefresh = false;
|
|
}
|
|
|
|
function updateHeaderUserButton(src) {
|
|
if (src) {
|
|
headerUserButton.classList.add("headerUserButtonRound");
|
|
headerUserButton.innerHTML = '<img src="' + src + '" />';
|
|
} else {
|
|
headerUserButton.classList.remove("headerUserButtonRound");
|
|
headerUserButton.innerHTML = '<i class="md-icon"></i>';
|
|
}
|
|
}
|
|
|
|
function showSearch() {
|
|
inputManager.trigger("search");
|
|
}
|
|
|
|
function onHeaderUserButtonClick(e) {
|
|
Dashboard.navigate("mypreferencesmenu.html");
|
|
}
|
|
|
|
function onSettingsClick(e) {
|
|
Dashboard.navigate("dashboard.html");
|
|
}
|
|
|
|
function onHeaderHomeButtonClick() {
|
|
Dashboard.navigate("home.html");
|
|
}
|
|
|
|
function bindMenuEvents() {
|
|
mainDrawerButton = document.querySelector(".mainDrawerButton");
|
|
if (mainDrawerButton) {
|
|
mainDrawerButton.addEventListener("click", toggleMainDrawer);
|
|
}
|
|
|
|
var headerBackButton = skinHeader.querySelector(".headerBackButton");
|
|
|
|
if (headerBackButton) {
|
|
headerBackButton.addEventListener("click", onBackClick);
|
|
}
|
|
|
|
if (headerSearchButton) {
|
|
headerSearchButton.addEventListener("click", showSearch);
|
|
}
|
|
|
|
headerUserButton.addEventListener("click", onHeaderUserButtonClick);
|
|
headerHomeButton.addEventListener("click", onHeaderHomeButtonClick);
|
|
initHeadRoom(skinHeader);
|
|
headerCastButton.addEventListener("click", onCastButtonClicked);
|
|
|
|
if (headerSettingsButton) {
|
|
headerSettingsButton.addEventListener("click", onSettingsClick);
|
|
}
|
|
}
|
|
|
|
function onCastButtonClicked() {
|
|
var btn = this;
|
|
|
|
require(["playerSelectionMenu"], function (playerSelectionMenu) {
|
|
playerSelectionMenu.show(btn);
|
|
});
|
|
}
|
|
|
|
function getItemHref(item, context) {
|
|
return appRouter.getRouteUrl(item, {
|
|
context: context
|
|
});
|
|
}
|
|
|
|
function toggleMainDrawer() {
|
|
if (navDrawerInstance.isVisible) {
|
|
closeMainDrawer();
|
|
} else {
|
|
openMainDrawer();
|
|
}
|
|
}
|
|
|
|
function openMainDrawer() {
|
|
navDrawerInstance.open();
|
|
lastOpenTime = new Date().getTime();
|
|
}
|
|
|
|
function onMainDrawerOpened() {
|
|
if (layoutManager.mobile) {
|
|
document.body.classList.add("bodyWithPopupOpen");
|
|
}
|
|
}
|
|
|
|
function closeMainDrawer() {
|
|
navDrawerInstance.close();
|
|
}
|
|
|
|
function onMainDrawerSelect(e) {
|
|
if (navDrawerInstance.isVisible) {
|
|
onMainDrawerOpened();
|
|
} else {
|
|
document.body.classList.remove("bodyWithPopupOpen");
|
|
}
|
|
}
|
|
|
|
function refreshLibraryInfoInDrawer(user, drawer) {
|
|
var html = "";
|
|
html += '<div style="height:.5em;"></div>';
|
|
html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder" href="home.html"><i class="md-icon navMenuOptionIcon"></i><span class="navMenuOptionText">' + globalize.translate("ButtonHome") + "</span></a>";
|
|
html += '<div class="libraryMenuDownloads">';
|
|
html += '<h3 class="sidebarHeader">';
|
|
html += globalize.translate("sharedcomponents#HeaderMyDownloads");
|
|
html += "</h3>";
|
|
html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder" data-itemid="manageoffline" href="offline/offline.html"><i class="md-icon navMenuOptionIcon"></i><span class="navMenuOptionText">' + globalize.translate("sharedcomponents#Browse") + "</span></a>";
|
|
html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder" data-itemid="manageoffline" href="managedownloads.html"><i class="md-icon navMenuOptionIcon"></i><span class="navMenuOptionText">' + globalize.translate("sharedcomponents#Manage") + "</span></a>";
|
|
html += "</div>";
|
|
html += '<div class="libraryMenuOptions">';
|
|
html += "</div>";
|
|
var localUser = user.localUser;
|
|
|
|
if (localUser && localUser.Policy.IsAdministrator) {
|
|
html += '<div class="adminMenuOptions">';
|
|
html += '<h3 class="sidebarHeader">';
|
|
html += globalize.translate("HeaderAdmin");
|
|
html += "</h3>";
|
|
html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder lnkManageServer" data-itemid="dashboard" href="dashboard.html"><i class="md-icon navMenuOptionIcon"></i><span class="navMenuOptionText">' + globalize.translate("ButtonManageServer") + "</span></a>";
|
|
html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder editorViewMenu" data-itemid="editor" href="edititemmetadata.html"><i class="md-icon navMenuOptionIcon"></i><span class="navMenuOptionText">' + globalize.translate("MetadataManager") + "</span></a>";
|
|
html += "</div>";
|
|
}
|
|
|
|
html += '<div class="userMenuOptions">';
|
|
|
|
if (user.localUser) {
|
|
html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder lnkMySettings" href="mypreferencesmenu.html"><i class="md-icon navMenuOptionIcon"></i><span class="navMenuOptionText">' + globalize.translate("ButtonSettings") + "</span></a>";
|
|
}
|
|
|
|
html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder lnkSyncToOtherDevices" data-itemid="syncotherdevices" href="mysync.html"><i class="md-icon navMenuOptionIcon"></i><span class="navMenuOptionText">' + globalize.translate("sharedcomponents#Sync") + "</span></a>";
|
|
|
|
if (AppInfo.isNativeApp) {
|
|
html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder" data-itemid="selectserver" href="selectserver.html?showuser=1"><i class="md-icon navMenuOptionIcon"></i><span class="navMenuOptionText">' + globalize.translate("ButtonSelectServer") + "</span></a>";
|
|
}
|
|
|
|
if (!(!user.localUser || user.localUser.EnableAutoLogin)) {
|
|
html += '<a is="emby-linkbutton" class="navMenuOption lnkMediaFolder btnLogout" data-itemid="logout" href="#"><i class="md-icon navMenuOptionIcon"></i><span class="navMenuOptionText">' + globalize.translate("ButtonSignOut") + "</span></a>";
|
|
}
|
|
|
|
html += "</div>";
|
|
navDrawerScrollContainer.innerHTML = html;
|
|
|
|
var btnLogout = navDrawerScrollContainer.querySelector(".btnLogout");
|
|
|
|
if (btnLogout) {
|
|
btnLogout.addEventListener("click", onLogoutClick);
|
|
}
|
|
}
|
|
|
|
function refreshDashboardInfoInDrawer(apiClient) {
|
|
currentDrawerType = "admin";
|
|
loadNavDrawer();
|
|
|
|
if (navDrawerScrollContainer.querySelector(".adminDrawerLogo")) {
|
|
updateDashboardMenuSelectedItem();
|
|
} else {
|
|
createDashboardMenu(apiClient);
|
|
}
|
|
}
|
|
|
|
function isUrlInCurrentView(url) {
|
|
return -1 !== window.location.href.toString().toLowerCase().indexOf(url.toLowerCase());
|
|
}
|
|
|
|
function updateDashboardMenuSelectedItem() {
|
|
var links = navDrawerScrollContainer.querySelectorAll(".navMenuOption");
|
|
var currentViewId = viewManager.currentView().id;
|
|
|
|
for (var i = 0, length = links.length; i < length; i++) {
|
|
var link = links[i];
|
|
var selected = false;
|
|
var pageIds = link.getAttribute("data-pageids");
|
|
|
|
if (pageIds) {
|
|
pageIds = pageIds.split("|");
|
|
selected = -1 != pageIds.indexOf(currentViewId);
|
|
}
|
|
|
|
var pageUrls = link.getAttribute("data-pageurls");
|
|
|
|
if (pageUrls) {
|
|
pageUrls = pageUrls.split("|");
|
|
selected = pageUrls.filter(isUrlInCurrentView).length > 0;
|
|
}
|
|
if (selected) {
|
|
link.classList.add("navMenuOption-selected");
|
|
var title = "";
|
|
link = link.querySelector("span") || link;
|
|
title += (link.innerText || link.textContent).trim();
|
|
LibraryMenu.setTitle(title);
|
|
} else {
|
|
link.classList.remove("navMenuOption-selected");
|
|
}
|
|
}
|
|
}
|
|
|
|
function createToolsMenuList(pluginItems) {
|
|
var links = [{
|
|
name: globalize.translate("TabServer")
|
|
}, {
|
|
name: globalize.translate("TabDashboard"),
|
|
href: "dashboard.html",
|
|
pageIds: ["dashboardPage", "serverActivityPage"],
|
|
icon: "dashboard"
|
|
}, {
|
|
name: globalize.translate("TabSettings"),
|
|
href: "dashboardgeneral.html",
|
|
pageIds: ["dashboardGeneralPage"],
|
|
icon: "settings"
|
|
}, {
|
|
name: globalize.translate("TabUsers"),
|
|
href: "userprofiles.html",
|
|
pageIds: ["userProfilesPage", "newUserPage", "editUserPage", "userLibraryAccessPage", "userParentalControlPage", "userPasswordPage"],
|
|
icon: "people"
|
|
}, {
|
|
name: globalize.translate("TabLibrary"),
|
|
href: "library.html",
|
|
pageIds: ["mediaLibraryPage", "librarySettingsPage", "libraryDisplayPage", "metadataImagesConfigurationPage", "metadataNfoPage"],
|
|
icon: "folder",
|
|
color: "#38c"
|
|
}, {
|
|
name: globalize.translate("TabPlayback"),
|
|
icon: "play_circle_filled",
|
|
color: "#E5342E",
|
|
href: "playbackconfiguration.html",
|
|
pageIds: ["playbackConfigurationPage", "streamingSettingsPage"]
|
|
}, {
|
|
name: globalize.translate("TabTranscoding"),
|
|
icon: "transform",
|
|
href: "encodingsettings.html",
|
|
pageIds: ["encodingSettingsPage"]
|
|
}];
|
|
addPluginPagesToMainMenu(links, pluginItems, "server");
|
|
links.push({
|
|
divider: true,
|
|
name: globalize.translate("TabDevices")
|
|
});
|
|
links.push({
|
|
name: globalize.translate("TabDevices"),
|
|
href: "devices/devices.html",
|
|
pageIds: ["devicesPage", "devicePage"],
|
|
icon: "tablet"
|
|
});
|
|
links.push({
|
|
name: globalize.translate("TabCameraUpload"),
|
|
href: "devicesupload.html",
|
|
pageIds: ["devicesUploadPage"],
|
|
icon: "photo_camera"
|
|
});
|
|
links.push({
|
|
name: globalize.translate("DLNA"),
|
|
href: "dlnasettings.html",
|
|
pageIds: ["dlnaSettingsPage", "dlnaProfilesPage", "dlnaProfilePage"],
|
|
icon: ""
|
|
});
|
|
links.push({
|
|
divider: true,
|
|
name: globalize.translate("TabLiveTV")
|
|
});
|
|
links.push({
|
|
name: globalize.translate("TabLiveTV"),
|
|
href: "livetvstatus.html",
|
|
pageIds: ["liveTvStatusPage", "liveTvTunerPage"],
|
|
icon: ""
|
|
});
|
|
links.push({
|
|
name: globalize.translate("DVR"),
|
|
href: "livetvsettings.html",
|
|
pageIds: ["liveTvSettingsPage"],
|
|
icon: "dvr"
|
|
});
|
|
links.push({
|
|
divider: true,
|
|
name: globalize.translate("TabExpert")
|
|
});
|
|
links.push({
|
|
name: globalize.translate("TabAdvanced"),
|
|
icon: "settings",
|
|
href: "dashboardhosting.html",
|
|
color: "#F16834",
|
|
pageIds: ["dashboardHostingPage", "serverSecurityPage"]
|
|
});
|
|
links.push({
|
|
name: globalize.translate("TabLogs"),
|
|
href: "log.html",
|
|
pageIds: ["logPage"],
|
|
icon: "folder_open"
|
|
});
|
|
links.push({
|
|
name: globalize.translate("TabNotifications"),
|
|
icon: "notifications",
|
|
color: "brown",
|
|
href: "notificationsettings.html",
|
|
pageIds: ["notificationSettingsPage", "notificationSettingPage"]
|
|
});
|
|
links.push({
|
|
name: globalize.translate("TabPlugins"),
|
|
icon: "add_shopping_cart",
|
|
color: "#9D22B1",
|
|
href: "plugins.html",
|
|
pageIds: ["pluginsPage", "pluginCatalogPage"]
|
|
});
|
|
links.push({
|
|
name: globalize.translate("TabScheduledTasks"),
|
|
href: "scheduledtasks.html",
|
|
pageIds: ["scheduledTasksPage", "scheduledTaskPage"],
|
|
icon: "schedule"
|
|
});
|
|
links.push({
|
|
name: globalize.translate("MetadataManager"),
|
|
href: "edititemmetadata.html",
|
|
pageIds: [],
|
|
icon: "mode_edit"
|
|
});
|
|
addPluginPagesToMainMenu(links, pluginItems);
|
|
return links;
|
|
}
|
|
|
|
function addPluginPagesToMainMenu(links, pluginItems, section) {
|
|
for (var i = 0, length = pluginItems.length; i < length; i++) {
|
|
var pluginItem = pluginItems[i];
|
|
|
|
if (Dashboard.allowPluginPages(pluginItem.PluginId)) {
|
|
if (pluginItem.EnableInMainMenu && pluginItem.MenuSection === section) {
|
|
links.push({
|
|
name: pluginItem.DisplayName,
|
|
icon: pluginItem.MenuIcon || "folder",
|
|
href: Dashboard.getConfigurationPageUrl(pluginItem.Name),
|
|
pageUrls: [Dashboard.getConfigurationPageUrl(pluginItem.Name)]
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function getToolsMenuLinks(apiClient) {
|
|
return apiClient.getJSON(apiClient.getUrl("web/configurationpages") + "?pageType=PluginConfiguration&EnableInMainMenu=true").then(createToolsMenuList, function (err) {
|
|
return createToolsMenuList([]);
|
|
});
|
|
}
|
|
|
|
function getToolsLinkHtml(item) {
|
|
var menuHtml = "";
|
|
var pageIds = item.pageIds ? item.pageIds.join("|") : "";
|
|
pageIds = pageIds ? ' data-pageids="' + pageIds + '"' : "";
|
|
var pageUrls = item.pageUrls ? item.pageUrls.join("|") : "";
|
|
pageUrls = pageUrls ? ' data-pageurls="' + pageUrls + '"' : "";
|
|
menuHtml += '<a is="emby-linkbutton" class="navMenuOption" href="' + item.href + '"' + pageIds + pageUrls + ">";
|
|
|
|
if (item.icon) {
|
|
menuHtml += '<i class="md-icon navMenuOptionIcon">' + item.icon + "</i>";
|
|
}
|
|
|
|
menuHtml += '<span class="navMenuOptionText">';
|
|
menuHtml += item.name;
|
|
menuHtml += "</span>";
|
|
return menuHtml + "</a>";
|
|
}
|
|
|
|
function getToolsMenuHtml(apiClient) {
|
|
return getToolsMenuLinks(apiClient).then(function (items) {
|
|
var item;
|
|
var menuHtml = "";
|
|
|
|
menuHtml += '<div class="drawerContent">';
|
|
for (var i = 0; i < items.length; i++) {
|
|
item = items[i];
|
|
|
|
if (item.href) {
|
|
menuHtml += getToolsLinkHtml(item);
|
|
}
|
|
else if (item.name) {
|
|
menuHtml += '<h3 class="sidebarHeader">';
|
|
menuHtml += item.name;
|
|
menuHtml += "</h3>";
|
|
}
|
|
}
|
|
|
|
return menuHtml + "</div>";
|
|
});
|
|
}
|
|
|
|
function createDashboardMenu(apiClient) {
|
|
return getToolsMenuHtml(apiClient).then(function (toolsMenuHtml) {
|
|
var html = "";
|
|
html += '<a class="adminDrawerLogo clearLink" is="emby-linkbutton" href="home.html" style="text-align:left;">';
|
|
html += '<img src="css/images/logoblack.png" />';
|
|
html += "</a>";
|
|
html += toolsMenuHtml;
|
|
navDrawerScrollContainer.innerHTML = html;
|
|
updateDashboardMenuSelectedItem();
|
|
});
|
|
}
|
|
|
|
function onSidebarLinkClick() {
|
|
var section = this.getElementsByClassName("sectionName")[0];
|
|
var text = section ? section.innerHTML : this.innerHTML;
|
|
LibraryMenu.setTitle(text);
|
|
}
|
|
|
|
function getUserViews(apiClient, userId) {
|
|
return apiClient.getUserViews({}, userId).then(function (result) {
|
|
var items = result.Items;
|
|
var list = [];
|
|
|
|
for (var i = 0, length = items.length; i < length; i++) {
|
|
var view = items[i];
|
|
|
|
list.push(view);
|
|
if ("livetv" == view.CollectionType) {
|
|
view.ImageTags = {};
|
|
view.icon = "live_tv";
|
|
var guideView = Object.assign({}, view);
|
|
guideView.Name = globalize.translate("ButtonGuide");
|
|
guideView.ImageTags = {};
|
|
guideView.icon = "dvr";
|
|
guideView.url = "livetv.html?tab=1";
|
|
list.push(guideView);
|
|
}
|
|
}
|
|
|
|
return list;
|
|
});
|
|
}
|
|
|
|
function showBySelector(selector, show) {
|
|
var elem = document.querySelector(selector);
|
|
|
|
if (elem) {
|
|
if (show) {
|
|
elem.classList.remove("hide");
|
|
}
|
|
else {
|
|
elem.classList.add("hide");
|
|
}
|
|
}
|
|
}
|
|
|
|
function updateLibraryMenu(user) {
|
|
// FIXME: Potential equivalent might be
|
|
// showBySelector(".lnkSyncToOtherDevices", !!user.Policy.EnableContentDownloading);
|
|
if (!user) {
|
|
showBySelector(".libraryMenuDownloads", false);
|
|
showBySelector(".lnkSyncToOtherDevices", false);
|
|
return void showBySelector(".userMenuOptions", false);
|
|
}
|
|
|
|
// FIXME: Potentially the same as above
|
|
if (user.Policy.EnableContentDownloading) {
|
|
showBySelector(".lnkSyncToOtherDevices", true);
|
|
}
|
|
else {
|
|
showBySelector(".lnkSyncToOtherDevices", false);
|
|
}
|
|
|
|
if (user.Policy.EnableContentDownloading && appHost.supports("sync")) {
|
|
showBySelector(".libraryMenuDownloads", true);
|
|
}
|
|
else {
|
|
showBySelector(".libraryMenuDownloads", false);
|
|
}
|
|
|
|
var userId = Dashboard.getCurrentUserId();
|
|
var apiClient = getCurrentApiClient();
|
|
var libraryMenuOptions = document.querySelector(".libraryMenuOptions");
|
|
|
|
if (libraryMenuOptions) {
|
|
getUserViews(apiClient, userId).then(function (result) {
|
|
var items = result;
|
|
var html = "";
|
|
html += '<h3 class="sidebarHeader">';
|
|
html += globalize.translate("HeaderMedia");
|
|
html += "</h3>";
|
|
html += items.map(function (i) {
|
|
var icon = "folder";
|
|
var itemId = i.Id;
|
|
|
|
if ("channels" === i.CollectionType) {
|
|
itemId = "channels";
|
|
}
|
|
else if ("livetv" === i.CollectionType) {
|
|
itemId = "livetv";
|
|
}
|
|
|
|
else if ("photos" === i.CollectionType) {
|
|
icon = "photo_library";
|
|
}
|
|
else if ("music" === i.CollectionType || "musicvideos" === i.CollectionType) {
|
|
icon = "library_music";
|
|
}
|
|
else if ("books" === i.CollectionType) {
|
|
icon = "library_books";
|
|
}
|
|
else if ("playlists" === i.CollectionType) {
|
|
icon = "view_list";
|
|
}
|
|
else if ("games" === i.CollectionType) {
|
|
icon = "games";
|
|
}
|
|
else if ("movies" === i.CollectionType) {
|
|
icon = "video_library";
|
|
}
|
|
else if ("channels" === i.CollectionType || "Channel" === i.Type) {
|
|
icon = "videocam";
|
|
}
|
|
else if ("tvshows" === i.CollectionType) {
|
|
icon = "tv";
|
|
}
|
|
else if ("livetv" === i.CollectionType) {
|
|
icon = "live_tv";
|
|
}
|
|
icon = i.icon || icon;
|
|
|
|
if (i.onclick) {
|
|
i.onclick;
|
|
}
|
|
|
|
return '<a is="emby-linkbutton" data-itemid="' + itemId + '" class="lnkMediaFolder navMenuOption" href="' + getItemHref(i, i.CollectionType) + '"><i class="md-icon navMenuOptionIcon">' + icon + '</i><span class="sectionName navMenuOptionText">' + i.Name + "</span></a>";
|
|
}).join("");
|
|
libraryMenuOptions.innerHTML = html;
|
|
var elem = libraryMenuOptions;
|
|
var sidebarLinks = elem.querySelectorAll(".navMenuOption");
|
|
|
|
for (var i = 0, length = sidebarLinks.length; i < length; i++) {
|
|
sidebarLinks[i].removeEventListener("click", onSidebarLinkClick);
|
|
sidebarLinks[i].addEventListener("click", onSidebarLinkClick);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function getTopParentId() {
|
|
return getParameterByName("topParentId") || null;
|
|
}
|
|
|
|
function onMainDrawerClick(e) {
|
|
if (dom.parentWithTag(e.target, "A")) {
|
|
setTimeout(closeMainDrawer, 30);
|
|
}
|
|
}
|
|
|
|
function onLogoutClick() {
|
|
Dashboard.logout();
|
|
}
|
|
|
|
function updateCastIcon() {
|
|
var context = document;
|
|
var info = playbackManager.getPlayerInfo();
|
|
var icon = headerCastButton.querySelector("i");
|
|
|
|
if (info && !info.isLocalPlayer) {
|
|
icon.innerHTML = "";
|
|
headerCastButton.classList.add("castButton-active");
|
|
context.querySelector(".headerSelectedPlayer").innerHTML = info.deviceName || info.name;
|
|
} else {
|
|
icon.innerHTML = "";
|
|
headerCastButton.classList.remove("castButton-active");
|
|
context.querySelector(".headerSelectedPlayer").innerHTML = "";
|
|
}
|
|
}
|
|
|
|
function updateLibraryNavLinks(page) {
|
|
var i;
|
|
var length;
|
|
var isLiveTvPage = page.classList.contains("liveTvPage");
|
|
var isChannelsPage = page.classList.contains("channelsPage");
|
|
var isEditorPage = page.classList.contains("metadataEditorPage");
|
|
var isMySyncPage = page.classList.contains("mySyncPage");
|
|
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++) {
|
|
var lnkMediaFolder = elems[i];
|
|
var itemId = lnkMediaFolder.getAttribute("data-itemid");
|
|
|
|
if (isChannelsPage && "channels" === itemId) {
|
|
lnkMediaFolder.classList.add("navMenuOption-selected");
|
|
}
|
|
else if (isLiveTvPage && "livetv" === itemId) {
|
|
lnkMediaFolder.classList.add("navMenuOption-selected");
|
|
}
|
|
else if (isEditorPage && "editor" === itemId) {
|
|
lnkMediaFolder.classList.add("navMenuOption-selected");
|
|
}
|
|
else if (isMySyncPage && "manageoffline" === itemId && -1 != window.location.href.toString().indexOf("mode=download")) {
|
|
lnkMediaFolder.classList.add("navMenuOption-selected");
|
|
}
|
|
else if (isMySyncPage && "syncotherdevices" === itemId && -1 == window.location.href.toString().indexOf("mode=download")) {
|
|
lnkMediaFolder.classList.add("navMenuOption-selected");
|
|
}
|
|
else if (id && itemId == id) {
|
|
lnkMediaFolder.classList.add("navMenuOption-selected");
|
|
}
|
|
else {
|
|
lnkMediaFolder.classList.remove("navMenuOption-selected");
|
|
}
|
|
}
|
|
}
|
|
|
|
function updateMenuForPageType(isDashboardPage, isLibraryPage) {
|
|
var newPageType = isDashboardPage ? 2 : isLibraryPage ? 1 : 3;
|
|
|
|
if (currentPageType !== newPageType) {
|
|
currentPageType = newPageType;
|
|
|
|
if (isDashboardPage && !layoutManager.mobile) {
|
|
skinHeader.classList.add("headroomDisabled");
|
|
} else {
|
|
skinHeader.classList.remove("headroomDisabled");
|
|
}
|
|
|
|
var bodyClassList = document.body.classList;
|
|
|
|
if (isLibraryPage) {
|
|
bodyClassList.add("libraryDocument");
|
|
bodyClassList.remove("dashboardDocument");
|
|
bodyClassList.remove("hideMainDrawer");
|
|
|
|
if (navDrawerInstance) {
|
|
navDrawerInstance.setEdgeSwipeEnabled(true);
|
|
}
|
|
} else {
|
|
if (isDashboardPage) {
|
|
bodyClassList.remove("libraryDocument");
|
|
bodyClassList.add("dashboardDocument");
|
|
bodyClassList.remove("hideMainDrawer");
|
|
|
|
if (navDrawerInstance) {
|
|
navDrawerInstance.setEdgeSwipeEnabled(true);
|
|
}
|
|
} else {
|
|
bodyClassList.remove("libraryDocument");
|
|
bodyClassList.remove("dashboardDocument");
|
|
bodyClassList.add("hideMainDrawer");
|
|
|
|
if (navDrawerInstance) {
|
|
navDrawerInstance.setEdgeSwipeEnabled(false);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (requiresUserRefresh) {
|
|
connectionManager.user(getCurrentApiClient()).then(updateUserInHeader);
|
|
}
|
|
}
|
|
|
|
function updateTitle(page) {
|
|
var title = page.getAttribute("data-title");
|
|
|
|
if (title) {
|
|
LibraryMenu.setTitle(title);
|
|
}
|
|
else if (page.classList.contains("standalonePage")) {
|
|
LibraryMenu.setDefaultTitle();
|
|
}
|
|
}
|
|
|
|
function updateBackButton(page) {
|
|
var isDashboardPage = page.classList.contains("type-interior");
|
|
|
|
if (!headerBackButton) {
|
|
headerBackButton = document.querySelector(".headerBackButton");
|
|
}
|
|
|
|
if (headerBackButton) {
|
|
if (page.getAttribute("data-backbutton") && appRouter.canGoBack()) {
|
|
headerBackButton.classList.remove("hide");
|
|
} else {
|
|
headerBackButton.classList.add("hide");
|
|
}
|
|
}
|
|
}
|
|
|
|
function initHeadRoom(elem) {
|
|
require(["headroom-window"], function (headroom) {
|
|
headroom.add(elem);
|
|
});
|
|
}
|
|
|
|
function refreshLibraryDrawer(user) {
|
|
loadNavDrawer();
|
|
currentDrawerType = "library";
|
|
if (user) {
|
|
Promise.resolve(user);
|
|
} else {
|
|
connectionManager.user(getCurrentApiClient()).then(function (user) {
|
|
refreshLibraryInfoInDrawer(user);
|
|
updateLibraryMenu(user.localUser);
|
|
});
|
|
}
|
|
}
|
|
|
|
function getNavDrawerOptions() {
|
|
var drawerWidth = screen.availWidth - 50;
|
|
drawerWidth = Math.max(drawerWidth, 240);
|
|
drawerWidth = Math.min(drawerWidth, 320);
|
|
return {
|
|
target: navDrawerElement,
|
|
onChange: onMainDrawerSelect,
|
|
width: drawerWidth
|
|
};
|
|
}
|
|
|
|
function loadNavDrawer() {
|
|
if (navDrawerInstance) {
|
|
return Promise.resolve(navDrawerInstance);
|
|
}
|
|
|
|
navDrawerElement = document.querySelector(".mainDrawer");
|
|
navDrawerScrollContainer = navDrawerElement.querySelector(".scrollContainer");
|
|
navDrawerScrollContainer.addEventListener("click", onMainDrawerClick);
|
|
return new Promise(function (resolve, reject) {
|
|
require(["navdrawer"], function (navdrawer) {
|
|
navDrawerInstance = new navdrawer(getNavDrawerOptions());
|
|
navDrawerElement.classList.remove("hide");
|
|
resolve(navDrawerInstance);
|
|
});
|
|
});
|
|
}
|
|
|
|
var navDrawerElement;
|
|
var navDrawerScrollContainer;
|
|
var navDrawerInstance;
|
|
var mainDrawerButton;
|
|
var headerHomeButton;
|
|
var currentDrawerType;
|
|
var pageTitleElement;
|
|
var headerBackButton;
|
|
var headerUserButton;
|
|
var currentUser;
|
|
var headerSettingsButton;
|
|
var headerCastButton;
|
|
var headerSearchButton;
|
|
var enableLibraryNavDrawer = !layoutManager.tv;
|
|
var skinHeader = document.querySelector(".skinHeader");
|
|
var requiresUserRefresh = true;
|
|
var lastOpenTime = new Date().getTime();
|
|
window.LibraryMenu = {
|
|
getTopParentId: getTopParentId,
|
|
onHardwareMenuButtonClick: function () {
|
|
toggleMainDrawer();
|
|
},
|
|
setTabs: function (type, selectedIndex, builder) {
|
|
require(["mainTabsManager"], function (mainTabsManager) {
|
|
if (type) {
|
|
mainTabsManager.setTabs(viewManager.currentView(), selectedIndex, builder, function () {
|
|
return [];
|
|
});
|
|
} else {
|
|
mainTabsManager.setTabs(null);
|
|
}
|
|
});
|
|
},
|
|
setDefaultTitle: function () {
|
|
if (!pageTitleElement) {
|
|
pageTitleElement = document.querySelector(".pageTitle");
|
|
}
|
|
|
|
if (pageTitleElement) {
|
|
pageTitleElement.classList.add("pageTitleWithLogo");
|
|
pageTitleElement.classList.add("pageTitleWithDefaultLogo");
|
|
pageTitleElement.style.backgroundImage = null;
|
|
pageTitleElement.innerHTML = "";
|
|
}
|
|
|
|
document.title = "Jellyfin";
|
|
},
|
|
setTitle: function (title) {
|
|
if (null == title) {
|
|
return void LibraryMenu.setDefaultTitle();
|
|
}
|
|
|
|
if ("-" === title) {
|
|
title = "";
|
|
}
|
|
|
|
var html = title;
|
|
|
|
if (!pageTitleElement) {
|
|
pageTitleElement = document.querySelector(".pageTitle");
|
|
}
|
|
|
|
if (pageTitleElement) {
|
|
pageTitleElement.classList.remove("pageTitleWithLogo");
|
|
pageTitleElement.classList.remove("pageTitleWithDefaultLogo");
|
|
pageTitleElement.style.backgroundImage = null;
|
|
pageTitleElement.innerHTML = html || "";
|
|
}
|
|
|
|
document.title = title || "Jellyfin";
|
|
},
|
|
setTransparentMenu: function (transparent) {
|
|
if (transparent) {
|
|
skinHeader.classList.add("semiTransparent");
|
|
} else {
|
|
skinHeader.classList.remove("semiTransparent");
|
|
}
|
|
}
|
|
};
|
|
var currentPageType;
|
|
pageClassOn("pagebeforeshow", "page", function (e) {
|
|
if (!this.classList.contains("withTabs")) {
|
|
LibraryMenu.setTabs(null);
|
|
}
|
|
});
|
|
pageClassOn("pageshow", "page", function (e) {
|
|
var page = this;
|
|
var isDashboardPage = page.classList.contains("type-interior");
|
|
var isLibraryPage = !isDashboardPage && page.classList.contains("libraryPage");
|
|
var apiClient = getCurrentApiClient();
|
|
|
|
if (isDashboardPage) {
|
|
if (mainDrawerButton) {
|
|
mainDrawerButton.classList.remove("hide");
|
|
}
|
|
|
|
refreshDashboardInfoInDrawer(apiClient);
|
|
} else {
|
|
if (mainDrawerButton) {
|
|
if (enableLibraryNavDrawer) {
|
|
mainDrawerButton.classList.remove("hide");
|
|
} else {
|
|
mainDrawerButton.classList.add("hide");
|
|
}
|
|
}
|
|
|
|
if ("library" !== currentDrawerType) {
|
|
refreshLibraryDrawer();
|
|
}
|
|
}
|
|
|
|
updateMenuForPageType(isDashboardPage, isLibraryPage);
|
|
|
|
if (!e.detail.isRestored) {
|
|
window.scrollTo(0, 0);
|
|
}
|
|
|
|
updateTitle(page);
|
|
updateBackButton(page);
|
|
updateLibraryNavLinks(page);
|
|
});
|
|
|
|
(function () {
|
|
var html = "";
|
|
html += '<div class="flex align-items-center flex-grow headerTop">';
|
|
html += '<div class="headerLeft">';
|
|
html += '<button type="button" is="paper-icon-button-light" class="headerButton headerButtonLeft headerBackButton hide"><i class="md-icon">' + (browser.safari ? "chevron_left" : "") + "</i></button>";
|
|
html += '<button type="button" is="paper-icon-button-light" class="headerButton headerHomeButton hide barsMenuButton headerButtonLeft"><i class="md-icon"></i></button>';
|
|
html += '<button type="button" is="paper-icon-button-light" class="headerButton mainDrawerButton barsMenuButton headerButtonLeft hide"><i class="md-icon"></i></button>';
|
|
html += '<h3 class="pageTitle"></h3>';
|
|
html += "</div>";
|
|
html += '<div class="headerRight">';
|
|
html += '<span class="headerSelectedPlayer"></span>';
|
|
html += '<button is="paper-icon-button-light" class="headerCastButton castButton headerButton headerButtonRight hide"><i class="md-icon"></i></button>';
|
|
html += '<button type="button" is="paper-icon-button-light" class="headerButton headerButtonRight headerSearchButton hide"><i class="md-icon"></i></button>';
|
|
html += '<button is="paper-icon-button-light" class="headerButton headerButtonRight headerUserButton hide"><i class="md-icon"></i></button>';
|
|
|
|
if (!layoutManager.mobile) {
|
|
html += '<button is="paper-icon-button-light" class="headerButton headerButtonRight headerSettingsButton hide"><i class="md-icon"></i></button>';
|
|
}
|
|
|
|
html += "</div>";
|
|
html += "</div>";
|
|
html += '<div class="headerTabs sectionTabs hide">';
|
|
html += "</div>";
|
|
skinHeader.classList.add("skinHeader-withBackground");
|
|
skinHeader.innerHTML = html;
|
|
headerHomeButton = skinHeader.querySelector(".headerHomeButton");
|
|
headerUserButton = skinHeader.querySelector(".headerUserButton");
|
|
headerSettingsButton = skinHeader.querySelector(".headerSettingsButton");
|
|
headerCastButton = skinHeader.querySelector(".headerCastButton");
|
|
headerSearchButton = skinHeader.querySelector(".headerSearchButton");
|
|
|
|
if (!browser.chrome) {
|
|
skinHeader.classList.add("skinHeader-blurred");
|
|
}
|
|
|
|
lazyLoadViewMenuBarImages();
|
|
bindMenuEvents();
|
|
})();
|
|
|
|
events.on(connectionManager, "localusersignedin", function (e, user) {
|
|
currentDrawerType = null;
|
|
currentUser = {
|
|
localUser: user
|
|
};
|
|
loadNavDrawer();
|
|
connectionManager.user(connectionManager.getApiClient(user.ServerId)).then(function (user) {
|
|
currentUser = user;
|
|
updateUserInHeader(user);
|
|
});
|
|
});
|
|
events.on(connectionManager, "localusersignedout", function () {
|
|
currentUser = {};
|
|
updateUserInHeader();
|
|
});
|
|
events.on(playbackManager, "playerchange", updateCastIcon);
|
|
loadNavDrawer();
|
|
return LibraryMenu;
|
|
});
|