cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-17 19:08:18 -07:00
Code Issues Packages Projects Releases Wiki Activity

add icon to metadata side bar

Browse Source
This commit is contained in:
grafixeyehero 2019-08-31 17:41:56 +03:00
parent 42c8ef6262
commit 2ffbc14cd7
2 changed files with 235 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/css/metadataeditor.css
View File

@ -47,6 +47,10 @@
background: #00a4dc !important background: #00a4dc !important
} }
.metadataSidebarIcon {
margin-right: .4em
}
@media all and (min-width:50em) { @media all and (min-width:50em) {
.editPageSidebar { .editPageSidebar {
position: fixed; position: fixed;

279
src/scripts/editorsidebar.js
View File

@ -7,7 +7,7 @@ define(["datetime", "jQuery", "material-icons"], function(datetime, $) {
id: item.Id, id: item.Id,
text: htmlName, text: htmlName,
state: { state: {
opened: item.IsFolder && "open" == folderState, opened: item.IsFolder && folderState == "open",
selected: selected selected: selected
}, },
li_attr: { li_attr: {
@ -15,17 +15,57 @@ define(["datetime", "jQuery", "material-icons"], function(datetime, $) {
collectiontype: item.CollectionType collectiontype: item.CollectionType
} }
}; };
return item.IsFolder ? (node.children = [{ if (item.IsFolder) {
node.children = [{
text: "Loading...", text: "Loading...",
icon: !1 icon: false
}], node.icon = !1) : node.icon = !1, node.state.opened && (node.li_attr.loadedFromServer = !0), selected && (selectedNodeId = item.Id), node }];
node.icon = false;
} else {
node.icon = false;
}
if (node.state.opened) {
node.li_attr.loadedFromServer = true;
}
if (selected) {
selectedNodeId = item.Id;
}
return node;
} }
function getNodeInnerHtml(item) { function getNodeInnerHtml(item) {
var name = item.Name; var name = item.Name;
item.Number && (name = item.Number + " - " + name), null != item.IndexNumber && "Season" != item.Type && (name = item.IndexNumber + " - " + name); if (item.Number) {
name = item.Number + " - " + name;
}
if (item.IndexNumber != null && item.Type != "Season") {
name = item.IndexNumber + " - " + name;
}
var htmlName = "<div class='editorNode'>"; var htmlName = "<div class='editorNode'>";
return item.LockData && (htmlName += '<i class="md-icon">lock</i>'), htmlName += name, htmlName += "</div>" if (item.IsFolder) {
htmlName += '<i class="md-icon">folder</i>';
}
else if (item.MediaType === "Video") {
htmlName += '<i class="md-icon metadataSidebarIcon">movie</i>';
}
else if (item.MediaType === "Audio") {
htmlName += '<i class="md-icon metadataSidebarIcon">audiotrack</i>';
}
else if (item.Type === "TvChannel") {
htmlName += '<i class="md-icon metadataSidebarIcon">live_tv</i>';
}
else if (item.MediaType === "Photo") {
htmlName += '<i class="md-icon metadataSidebarIcon">photo</i>';
}
else if (item.MediaType === "Book") {
htmlName += '<i class="md-icon metadataSidebarIcon">book</i>';
}
if (item.LockData) {
htmlName += '<i class="md-icon metadataSidebarIcon">lock</i>';
}
htmlName += name;
htmlName += "</div>";
return htmlName;
} }
function loadChildrenOfRootNode(page, scope, callback) { function loadChildrenOfRootNode(page, scope, callback) {
@ -37,189 +77,262 @@ define(["datetime", "jQuery", "material-icons"], function(datetime, $) {
id: "MediaFolders", id: "MediaFolders",
text: Globalize.translate("HeaderMediaFolders"), text: Globalize.translate("HeaderMediaFolders"),
state: { state: {
opened: !0 opened: true
}, },
li_attr: { li_attr: {
itemtype: "mediafolders", itemtype: "mediafolders",
loadedFromServer: !0 loadedFromServer: true
}, },
icon: !1 icon: false
}), result.TotalRecordCount && nodes.push({ });
if (result.TotalRecordCount) {
nodes.push({
id: "livetv", id: "livetv",
text: Globalize.translate("HeaderLiveTV"), text: Globalize.translate("HeaderLiveTV"),
state: { state: {
opened: !1 opened: false
}, },
li_attr: { li_attr: {
itemtype: "livetv" itemtype: "livetv"
}, },
children: [{ children: [{
text: "Loading...", text: "Loading...",
icon: !1 icon: false
}], }],
icon: !1 icon: false
}), callback.call(scope, nodes), nodesToLoad.push("MediaFolders") });
}) }
callback.call(scope, nodes);
nodesToLoad.push("MediaFolders");
});
} }
function loadLiveTvChannels(openItems, callback) { function loadLiveTvChannels(openItems, callback) {
ApiClient.getLiveTvChannels({ ApiClient.getLiveTvChannels({
AddCurrentProgram: !1 AddCurrentProgram: false
}).then(function (result) { }).then(function (result) {
var nodes = result.Items.map(function (i) { var nodes = result.Items.map(function (i) {
return getNode(i, -1 == openItems.indexOf(i.Id) ? "closed" : "open", !1) var state = openItems.indexOf(i.Id) == -1 ? "closed" : "open";
return getNode(i, state, false);
});
callback(nodes);
}); });
callback(nodes)
})
} }
function loadMediaFolders(page, scope, openItems, callback) { function loadMediaFolders(page, scope, openItems, callback) {
ApiClient.getJSON(ApiClient.getUrl("Library/MediaFolders")).then(function (result) { ApiClient.getJSON(ApiClient.getUrl("Library/MediaFolders")).then(function (result) {
var nodes = result.Items.map(function (n) { var nodes = result.Items.map(function (n) {
return getNode(n, -1 == openItems.indexOf(n.Id) ? "closed" : "open", !1) var state = openItems.indexOf(n.Id) == -1 ? "closed" : "open";
return getNode(n, state, false);
}); });
callback.call(scope, nodes); callback.call(scope, nodes);
for (var i = 0, length = nodes.length; i < length; i++) nodes[i].state.opened && nodesToLoad.push(nodes[i].id) for (var i = 0, length = nodes.length; i < length; i++) {
}) if (nodes[i].state.opened) {
nodesToLoad.push(nodes[i].id);
}
}
});
} }
function loadNode(page, scope, node, openItems, selectedId, currentUser, callback) { function loadNode(page, scope, node, openItems, selectedId, currentUser, callback) {
var id = node.id; var id = node.id;
if ("#" == id) return void loadChildrenOfRootNode(page, scope, callback); if (id == "#") {
if ("livetv" == id) return void loadLiveTvChannels(openItems, callback); loadChildrenOfRootNode(page, scope, callback);
if ("MediaFolders" == id) return void loadMediaFolders(page, scope, openItems, callback); return;
}
if (id == "livetv") {
loadLiveTvChannels(id, openItems, callback);
return;
}
if (id == "MediaFolders") {
loadMediaFolders(page, scope, openItems, callback);
return;
}
var query = { var query = {
ParentId: id, ParentId: id,
Fields: "Settings", Fields: "Settings",
IsVirtualUnaired: !1, IsVirtualUnaired: false,
IsMissing: !1, IsMissing: false,
EnableTotalRecordCount: !1, EnableTotalRecordCount: false,
EnableImages: !1, EnableImages: false,
EnableUserData: !1 EnableUserData: false
}, };
itemtype = node.li_attr.itemtype; var itemtype = node.li_attr.itemtype;
"Season" != itemtype && "Series" != itemtype && (query.SortBy = "SortName"), ApiClient.getItems(Dashboard.getCurrentUserId(), query).then(function(result) { if (itemtype != "Season" && itemtype != "Series") {
query.SortBy = "SortName";
}
ApiClient.getItems(Dashboard.getCurrentUserId(), query).then(function (result) {
var nodes = result.Items.map(function (n) { var nodes = result.Items.map(function (n) {
return getNode(n, -1 == openItems.indexOf(n.Id) ? "closed" : "open", n.Id == selectedId) var state = openItems.indexOf(n.Id) == -1 ? "closed" : "open";
return getNode(n, state, n.Id == selectedId);
}); });
callback.call(scope, nodes); callback.call(scope, nodes);
for (var i = 0, length = nodes.length; i < length; i++) nodes[i].state.opened && nodesToLoad.push(nodes[i].id) for (var i = 0, length = nodes.length; i < length; i++) {
}) if (nodes[i].state.opened) {
nodesToLoad.push(nodes[i].id);
}
}
});
} }
function scrollToNode(id) { function scrollToNode(id) {
var elem = $("#" + id)[0]; var elem = $("#" + id)[0];
elem && elem.scrollIntoView() if (elem) {
elem.scrollIntoView();
}
} }
function initializeTree(page, currentUser, openItems, selectedId) { function initializeTree(page, currentUser, openItems, selectedId) {
require(["jstree"], function () { require(["jstree"], function () {
initializeTreeInternal(page, currentUser, openItems, selectedId) initializeTreeInternal(page, currentUser, openItems, selectedId);
}) });
} }
function onNodeSelect(event, data) { function onNodeSelect(event, data) {
var node = data.node, var node = data.node;
eventData = { var eventData = {
id: node.id, id: node.id,
itemType: node.li_attr.itemtype, itemType: node.li_attr.itemtype,
serverItemType: node.li_attr.serveritemtype, serverItemType: node.li_attr.serveritemtype,
collectionType: node.li_attr.collectiontype collectionType: node.li_attr.collectiontype
}; };
"livetv" != eventData.itemType && "mediafolders" != eventData.itemType ? (this.dispatchEvent(new CustomEvent("itemclicked", { if (eventData.itemType != "livetv" && eventData.itemType != "mediafolders") {
{
this.dispatchEvent(new CustomEvent("itemclicked", {
detail: eventData, detail: eventData,
bubbles: !0, bubbles: true,
cancelable: !1 cancelable: false
})), document.querySelector(".editPageSidebar").classList.add("editPageSidebar-withcontent")) : document.querySelector(".editPageSidebar").classList.remove("editPageSidebar-withcontent") }));
}
document.querySelector(".editPageSidebar").classList.add("editPageSidebar-withcontent");
} else {
document.querySelector(".editPageSidebar").classList.remove("editPageSidebar-withcontent");
}
} }
function onNodeOpen(event, data) { function onNodeOpen(event, data) {
var page = $(this).parents(".page")[0], var page = $(this).parents(".page")[0];
node = data.node; var node = data.node;
node.children && node.children && loadNodesToLoad(page, node), node.li_attr && "#" != node.id && !node.li_attr.loadedFromServer && (node.li_attr.loadedFromServer = !0, $.jstree.reference(".libraryTree", page).load_node(node.id, loadNodeCallback)) if (node.children && node.children) {
loadNodesToLoad(page, node);
}
if (node.li_attr && node.id != "#" && !node.li_attr.loadedFromServer) {
node.li_attr.loadedFromServer = true;
$.jstree.reference(".libraryTree", page).load_node(node.id, loadNodeCallback);
}
} }
function onNodeLoad(event, data) { function onNodeLoad(event, data) {
var page = $(this).parents(".page")[0], var page = $(this).parents(".page")[0];
node = data.node; var node = data.node;
node.children && node.children && loadNodesToLoad(page, node), node.li_attr && "#" != node.id && !node.li_attr.loadedFromServer && (node.li_attr.loadedFromServer = !0, $.jstree.reference(".libraryTree", page).load_node(node.id, loadNodeCallback)) if (node.children && node.children) {
loadNodesToLoad(page, node);
}
if (node.li_attr && node.id != "#" && !node.li_attr.loadedFromServer) {
node.li_attr.loadedFromServer = true;
$.jstree.reference(".libraryTree", page).load_node(node.id, loadNodeCallback);
}
} }
function initializeTreeInternal(page, currentUser, openItems, selectedId) { function initializeTreeInternal(page, currentUser, openItems, selectedId) {
nodesToLoad = [], selectedNodeId = null, $.jstree.destroy(), $(".libraryTree", page).jstree({ nodesToLoad = [];
plugins: ["wholerow"], selectedNodeId = null;
$.jstree.destroy();
$(".libraryTree", page).jstree({
"plugins": ["wholerow"],
core: { core: {
// Disable animations because jQuery slim does not support them
animation: false,
check_callback: true, check_callback: true,
data: function (node, callback) { data: function (node, callback) {
loadNode(page, this, node, openItems, selectedId, currentUser, callback) loadNode(page, this, node, openItems, selectedId, currentUser, callback);
}, },
themes: { themes: {
variant: "large" variant: "large"
} }
} }
}).off("select_node.jstree", onNodeSelect).on("select_node.jstree", onNodeSelect).off("open_node.jstree", onNodeOpen).on("open_node.jstree", onNodeOpen).off("load_node.jstree", onNodeLoad).on("load_node.jstree", onNodeLoad) }).off("select_node.jstree", onNodeSelect).on("select_node.jstree", onNodeSelect).off("open_node.jstree", onNodeOpen).on("open_node.jstree", onNodeOpen).off("load_node.jstree", onNodeLoad).on("load_node.jstree", onNodeLoad);
} }
function loadNodesToLoad(page, node) { function loadNodesToLoad(page, node) {
for (var children = node.children, i = 0, length = children.length; i < length; i++) { var children = node.children;
var child = children[i]; - 1 != nodesToLoad.indexOf(child) && (nodesToLoad = nodesToLoad.filter(function(n) { for (var i = 0, length = children.length; i < length; i++) {
return n != child var child = children[i];
}), $.jstree.reference(".libraryTree", page).load_node(child, loadNodeCallback)) if (nodesToLoad.indexOf(child) != -1) {
nodesToLoad = nodesToLoad.filter(function (n) {
return n != child;
});
$.jstree.reference(".libraryTree", page).load_node(child, loadNodeCallback);
}
} }
} }
function loadNodeCallback(node) { function loadNodeCallback(node) {
selectedNodeId && node.children && -1 != node.children.indexOf(selectedNodeId) && setTimeout(function() { if (selectedNodeId && node.children && node.children.indexOf(selectedNodeId) != -1) {
scrollToNode(selectedNodeId) setTimeout(function () {
}, 500) scrollToNode(selectedNodeId);
}, 500);
}
} }
function updateEditorNode(page, item) { function updateEditorNode(page, item) {
var elem = $("#" + item.Id + ">a", page)[0]; var elem = $("#" + item.Id + ">a", page)[0];
if (null != elem && ($(".editorNode", elem).remove(), $(elem).append(getNodeInnerHtml(item)), item.IsFolder)) { if (elem == null) {
var tree = jQuery.jstree._reference(".libraryTree"), return;
currentNode = tree._get_node(null, !1); }
tree.refresh(currentNode) $(".editorNode", elem).remove();
$(elem).append(getNodeInnerHtml(item));
if (item.IsFolder) {
var tree = jQuery.jstree._reference(".libraryTree");
var currentNode = tree._get_node(null, false);
tree.refresh(currentNode);
} }
} }
function setCurrentItemId(id) { function setCurrentItemId(id) {
itemId = id itemId = id;
} }
function getCurrentItemId() { function getCurrentItemId() {
if (itemId) return itemId; if (itemId) {
var url = window.location.hash || window.location.href; return itemId;
return getParameterByName("id", url)
} }
var selectedNodeId, nodesToLoad = []; var url = window.location.hash || window.location.href;
return getParameterByName("id", url);
}
var nodesToLoad = [];
var selectedNodeId;
$(document).on("itemsaved", ".metadataEditorPage", function (e, item) { $(document).on("itemsaved", ".metadataEditorPage", function (e, item) {
updateEditorNode(this, item) updateEditorNode(this, item);
}).on("pagebeforeshow", ".metadataEditorPage", function () { }).on("pagebeforeshow", ".metadataEditorPage", function () {
require(["css!css/metadataeditor.css"]) require(["css!css/metadataeditor.css"]);
}).on("pagebeforeshow", ".metadataEditorPage", function () { }).on("pagebeforeshow", ".metadataEditorPage", function () {
var page = this; var page = this;
Dashboard.getCurrentUser().then(function (user) { Dashboard.getCurrentUser().then(function (user) {
var id = getCurrentItemId(); var id = getCurrentItemId();
id ? ApiClient.getAncestorItems(id, user.Id).then(function(ancestors) { if (id) {
ApiClient.getAncestorItems(id, user.Id).then(function (ancestors) {
var ids = ancestors.map(function (i) { var ids = ancestors.map(function (i) {
return i.Id return i.Id;
});
initializeTree(page, user, ids, id);
});
} else {
initializeTree(page, user, []);
}
}); });
initializeTree(page, user, ids, id)
}) : initializeTree(page, user, [])
})
}).on("pagebeforehide", ".metadataEditorPage", function () { }).on("pagebeforehide", ".metadataEditorPage", function () {
$(".libraryTree", this).off("select_node.jstree", onNodeSelect).off("open_node.jstree", onNodeOpen).off("load_node.jstree", onNodeLoad) var page = this;
$(".libraryTree", page).off("select_node.jstree", onNodeSelect).off("open_node.jstree", onNodeOpen).off("load_node.jstree", onNodeLoad);
}); });
var itemId; var itemId;
window.MetadataEditor = { window.MetadataEditor = {
getItemPromise: function () { getItemPromise: function () {
var currentItemId = getCurrentItemId(); var currentItemId = getCurrentItemId();
return currentItemId ? ApiClient.getItem(Dashboard.getCurrentUserId(), currentItemId) : ApiClient.getRootFolder(Dashboard.getCurrentUserId()) if (currentItemId) {
return ApiClient.getItem(Dashboard.getCurrentUserId(), currentItemId);
}
return ApiClient.getRootFolder(Dashboard.getCurrentUserId());
}, },
getCurrentItemId: getCurrentItemId, getCurrentItemId: getCurrentItemId,
setCurrentItemId: setCurrentItemId setCurrentItemId: setCurrentItemId
} };
}); });