Skip to content

Commit

Permalink
feat: support for Your Library X (#2076)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kyrie25
kyrie25 authored Mar 26, 2023
1 parent 8636b14 commit f51e0d3
Show file tree
Hide file tree
Showing 4 changed files with 377 additions and 185 deletions.
39 changes: 38 additions & 1 deletion css-map.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2128,5 +2128,42 @@
"gTvMl6pwfRD9PobMSB5x": "queue-queuePage-emptyContainer",
"hNAQG0TAe2WFYyf_iZEB": "queue-queuePage-emptyContainerTitle",
"Zhzrb2k9nQRActS2lp4U": "queue-queuePage-findSomething",
"zuf9gCpkf86KkzzCtkJN": "main-topBar-navLink"
"zuf9gCpkf86KkzzCtkJN": "main-topBar-navLink",
"UYeKN11KAw61rZoyjcgZ": "main-yourLibraryX-navLink",
"DzWw3g4E_66wu9ktqn36": "main-yourLibraryX-navLinkActive",
"LU0q0itTx2613uiATSig": "main-yourLibraryX-navItem",
"EZFyDnuQnx5hw78phLqP": "main-yourLibraryX-entryPoints",
"QuHe04rU4bj0Z5U9E2Tk": "main-yourLibraryX-navItems",
"hjb8tUL3rpUa0ez4ZtAj": "main-yourLibraryX-library",
"PpUTJL2NIYDUnmfzVIbE": "main-yourLibraryX-libraryContainer",
"oLOECYtBhVmBtyisKwew": "main-yourLibraryX-libraryOnDrop",
"tXkgloQ88DHF_inQE69J": "main-yourLibraryX-libraryBeforeDrop",
"g581mszC8syz99uMMWsr": "main-yourLibraryX-libraryAfterDrop",
"dNphEfQzPRaQufS04jUm": "main-yourLibraryX-libraryIsCollapsed",
"kJ_Q4aphh_uCJCZdzPpD": "main-yourLibraryX-libraryIsExpanded",
"_K79lE9KrIAkl_bUSSUM": "main-yourLibraryX-libraryItemContainer",
"ifVI2CEdOZGgMWIUN2Cw": "main-yourLibraryX-libraryRootlist",
"_XBlEstA77PgWTJzWbe1": "main-yourLibraryX-libraryItem",
"y2UicQnlTq148rL8Y0jp": "main-yourLibraryX-isScrolled",
"wBsWS202aGdsul2kEGUf": "main-yourLibraryX-filterArea",
"MLbFLVC33caOj3FgSQMC": "main-yourLibraryX-filters",
"UvXqRORKQr_N3jlgGTcS": "main-yourLibraryX-header",
"O2Vp_sNHMLHUcgMPVnOA": "main-yourLibraryX-headerIsCollapsed",
"j8iKBDzqTDtnDv4XbmrK": "main-yourLibraryX-headerContent",
"OMCDc2F7g_AufJAtaKfL": "main-yourLibraryX-button",
"prGqQr33U0mG14TJ5V8a": "main-yourLibraryX-collapseButton",
"RAWO6AczuDMOTI0qAc0a": "main-yourLibraryX-collapseButtonWrapper",
"BhKGkKPprp2wm9bvfRKG": "main-yourLibraryX-collapseButtonIsCollapsed",
"ksmcxhImUuj3_s1lcIm0": "main-yourLibraryX-createButton",
"TxO7Ee8iwqBpkgznKHsd": "main-yourLibraryX-iconOnly",
"ufICQKJq0XJE5iiIsZfj": "main-useDropTarget-base",
"vOp2HlcPkxOHebo3If32": "main-useDropTarget-album",
"VNdHKKznHkpJ0VHoDmai": "main-useDropTarget-artist",
"ETclQEbcAcQdGdSioHaJ": "main-useDropTarget-episode",
"cuH8l_VHkTiz_NYVslQe": "main-useDropTarget-folder",
"kXEKypZEUzxx9rNJy09C": "main-useDropTarget-playlist",
"eZnAGhYcXE4Bt0a7958z": "main-useDropTarget-playlistV2",
"ratGUXdpLCkyXZNaJryg": "main-useDropTarget-show",
"caTDfb6Oj7a5_8jBLUSo": "main-useDropTarget-track",
"aRyoyQFJkzhoSOnf2ERM": "main-useDropTarget-local"
}
276 changes: 184 additions & 92 deletions jsHelper/sidebarConfig.js
View file
Original file line number Diff line number Diff line change
@@ -1,70 +1,22 @@
(function SidebarConfig() {
// STICKY container
const appItems = document.querySelector(".main-navBar-entryPoints");
const rootList = document.querySelector(".main-rootlist-rootlist");
const playlistItems = document.querySelector(".main-navBar-navBar .os-content");

if (!appItems || !playlistItems || !rootList) {
setTimeout(SidebarConfig, 300);
return;
}

const sidebar = document.querySelector(".Root__nav-bar");
if (!sidebar) return setTimeout(SidebarConfig, 100);
// Status enum
const HIDDEN = 0,
SHOW = 1,
STICKY = 2;
// Store sidebar buttons elements
let buttons = [];
let ordered;

appItems.id = "spicetify-sticky-list";
// SHOW container
const list = document.createElement("ul");
list.id = "spicetify-show-list";
// HIDDEN container
const hiddenList = document.createElement("ul");
hiddenList.id = "spicetify-hidden-list";
hiddenList.classList.add("hidden-visually");
const playlistList = playlistItems.querySelector("ul");
playlistList.id = "spicetify-playlist-list";
playlistItems.prepend(list, hiddenList);

for (const ele of appItems.children) {
ele.dataset.id = ele.querySelector("a").pathname;
buttons.push(ele);
}
let appItems;
let list;
let hiddenList;
let isYLX;

for (const ele of rootList.querySelectorAll("div.GlueDropTarget")) {
if (ele.classList.contains("GlueDropTarget--playlists")) break;
const link = ele.querySelector("a");
if (!link) {
ele.dataset.id = "/add";
} else {
ele.dataset.id = link.pathname;
}
ele.classList.add("personal-library");
new MutationObserver(mutations => {
for (const mutation of mutations) {
if (mutation.type === "attributes" && mutation.attributeName === "class") {
if (!mutation.target.classList.contains("personal-library")) {
mutation.target.classList.add("personal-library");
}
}
}
}).observe(ele, { attributes: true, attributeFilter: ["class"] });

buttons.push(ele);
}

let storage = [];
try {
storage = JSON.parse(localStorage.getItem("spicetify-sidebar-config"));
if (!Array.isArray(storage)) throw "";
} catch {
storage = buttons.map(el => [el.dataset.id, STICKY]);
}
// Store sidebar buttons
let buttons = [];
let ordered = [];
let initialized = false;

function arrangeItems() {
function arrangeItems(storage) {
const newButtons = [...buttons];
const orderedButtons = [];
for (const ele of storage) {
Expand Down Expand Up @@ -98,13 +50,12 @@
ordered = [...toStick, ...toShow, ...toHide];
}

function writeStorage() {
function writeStorage(isYLX = false) {
const array = ordered.map(a => [a[0].dataset.id, a[1]]);
localStorage.setItem("spicetify-sidebar-config", JSON.stringify(array));
}

arrangeItems();
appendItems();
if (isYLX) return localStorage.setItem("spicetify-sidebar-config:ylx", JSON.stringify(array));
return localStorage.setItem("spicetify-sidebar-config", JSON.stringify(array));
}

const container = document.createElement("div");
container.id = "spicetify-sidebar-config";
Expand All @@ -117,27 +68,27 @@
const style = document.createElement("style");
style.innerHTML = `
#spicetify-hidden-list {
background-color: rgba(var(--spice-rgb-main), .3);
background-color: rgba(var(--spice-rgb-main), .3);
}
#spicetify-sidebar-config {
position: relative;
width: 100%;
height: 0;
display: flex;
justify-content: space-evenly;
align-items: center;
top: -20px;
left: 0;
position: relative;
width: 100%;
height: 0;
display: flex;
justify-content: space-evenly;
align-items: center;
top: -20px;
left: 0;
}
#spicetify-sidebar-config button {
min-width: 60px;
border-radius: 3px;
background-color: var(--spice-main);
color: var(--spice-text);
border: 1px solid var(--spice-text);
min-width: 60px;
border-radius: 3px;
background-color: var(--spice-main);
color: var(--spice-text);
border: 1px solid var(--spice-text);
}
#spicetify-sidebar-config button:disabled {
color: var(--spice-button-disabled);
color: var(--spice-button-disabled);
}
`;
container.append(style, up, down, hide, stick);
Expand Down Expand Up @@ -190,41 +141,182 @@
}
}

function removeInteraction() {
function removeInteraction(isYLX) {
hiddenList.classList.add("hidden-visually");
container.remove();
ordered.forEach(a => (a[0].onmouseover = undefined));
document.documentElement.style.setProperty("--nav-bar-width", Spicetify.Platform.LocalStorageAPI.getItem("nav-bar-width") + "px");
writeStorage();
writeStorage(isYLX);
}

new Spicetify.Menu.Item("Sidebar config", false, self => {
const sidebarConfigItem = new Spicetify.Menu.Item("Sidebar config", false, self => {
self.isEnabled = !self.isEnabled;
if (self.isEnabled) {
injectInteraction();
} else {
removeInteraction();
removeInteraction(isYLX);
}
});

function finishInit() {
if (initialized) return;
sidebarConfigItem.register();
initialized = true;
}

function InitSidebarConfig() {
// STICKY container
const legacyAppItems = document.querySelector(".main-navBar-entryPoints");
const rootList = document.querySelector(".main-rootlist-rootlist");
const playlistItems = document.querySelector(".main-navBar-navBar .os-content");

if (!legacyAppItems || !playlistItems || !rootList) {
setTimeout(InitSidebarConfig, 300);
return;
}

appItems = legacyAppItems;
buttons = [];
ordered = [];
isYLX = false;

appItems.id = "spicetify-sticky-list";
// SHOW container
list = document.createElement("ul");
list.id = "spicetify-show-list";
// HIDDEN container
hiddenList = document.createElement("ul");
hiddenList.id = "spicetify-hidden-list";
hiddenList.classList.add("hidden-visually");
const playlistList = playlistItems.querySelector("ul");
playlistList.id = "spicetify-playlist-list";
playlistItems.prepend(list, hiddenList);

for (const ele of appItems.children) {
ele.dataset.id = ele.querySelector("a").pathname;
buttons.push(ele);
}

for (const ele of rootList.querySelectorAll("div.GlueDropTarget")) {
if (ele.classList.contains("GlueDropTarget--playlists")) break;
const link = ele.querySelector("a");
if (!link) {
ele.dataset.id = "/add";
} else {
ele.dataset.id = link.pathname;
}
ele.classList.add("personal-library");
new MutationObserver(mutations => {
for (const mutation of mutations) {
if (mutation.type === "attributes" && mutation.attributeName === "class") {
if (!mutation.target.classList.contains("personal-library")) {
mutation.target.classList.add("personal-library");
}
}
}
}).observe(ele, { attributes: true, attributeFilter: ["class"] });

buttons.push(ele);
}
}).register();

let storage = [];
try {
storage = JSON.parse(localStorage.getItem("spicetify-sidebar-config"));
if (!Array.isArray(storage)) throw "";
} catch {
storage = buttons.map(el => [el.dataset.id, STICKY]);
}

arrangeItems(storage);
appendItems();

finishInit();
}

function InitSidebarXConfig() {
// STICKY container
const YLXAppItems = document.querySelector(".main-yourLibraryX-navItems");
const libraryItems = document.querySelector(".main-yourLibraryX-library");

if (!YLXAppItems || !libraryItems) {
setTimeout(InitSidebarXConfig, 300);
return;
}

appItems = YLXAppItems;
buttons = [];
ordered = [];
isYLX = true;

appItems.id = "spicetify-sticky-list";
// SHOW container
list = document.createElement("ul");
list.id = "spicetify-show-list";
// HIDDEN container
hiddenList = document.createElement("ul");
hiddenList.id = "spicetify-hidden-list";
hiddenList.classList.add("hidden-visually");
const playlistList = libraryItems.querySelector("ul");
playlistList.id = "spicetify-playlist-list";
libraryItems.prepend(list, hiddenList);

for (const ele of appItems.children) {
ele.dataset.id = ele.querySelector("a").pathname;
buttons.push(ele);
}

let storage = [];
try {
storage = JSON.parse(localStorage.getItem("spicetify-sidebar-config:ylx"));
if (!Array.isArray(storage)) throw "";
} catch {
storage = buttons.map(el => [el.dataset.id, STICKY]);
}

arrangeItems(storage);
appendItems();

finishInit();
}

InitSidebarConfig();
InitSidebarXConfig();

// Rearrange sidebar when dynamically switching in Experimental Features
new MutationObserver(mutations => {
for (const mutation of mutations) {
if (mutation.attributeName === "class") {
if (mutation.target.classList.contains("hasYLXSidebar")) {
InitSidebarXConfig();
} else {
InitSidebarConfig();
}
}
}
}).observe(sidebar, { attributes: true, attributeFilter: ["class"] });

const customButtonStyle = document.createElement("style");
customButtonStyle.innerHTML = `
div.GlueDropTarget.personal-library {
padding: 0 8px;
padding: 0 8px;
}
div.GlueDropTarget.personal-library >* {
padding: 0 16px;
height: 40px;
border-radius: 4px;
padding: 0 16px;
height: 40px;
border-radius: 4px;
}
div.GlueDropTarget.personal-library >*.active {
background: var(--spice-card);
background: var(--spice-card);
}
.main-rootlist-rootlist {
margin-top: 0;
margin-top: 0;
}
.Root__nav-bar:not(.hasYLXSidebar) #spicetify-show-list >* {
padding: 0 24px 0 8px;
}
#spicetify-show-list >* {
padding: 0 24px 0 8px;
.hasYLXSidebar #spicetify-show-list,
.hasYLXSidebar #spicetify-hidden-list {
padding: 0 12px;
}
`;
document.head.append(customButtonStyle);
Expand Down
Loading

0 comments on commit f51e0d3

Please sign in to comment.