Mirrors/spicetify-themes
1
0
Fork 0
mirror of https://github.com/morpheusthewhite/spicetify-themes.git synced 2024-11-22 02:42:54 +01:00
Code Issues Projects Releases Activity

fix(Dribbblish): add ylx support (#953)

Browse Source
This commit is contained in:
harbassan 2023-06-21 12:17:59 +12:00 committed by GitHub
parent 96d6cc6e6c
commit 1eb8d41394
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 478 additions and 1151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

282
Dribbblish/theme.js
View File

@ -1,31 +1,3 @@
// Hide popover message
// document.getElementById("popover-container").style.height = 0;
const DribbblishShared = {
configMenu: new Spicetify.Menu.SubMenu("Dribbblish", []),
rightBigCover: localStorage.getItem("dribs-right-big-cover") === "true",
setRightBigCover: () => {
if (DribbblishShared.rightBigCover) {
document.documentElement.classList.add("right-expanded-cover");
} else {
document.documentElement.classList.remove("right-expanded-cover");
}
}
};
// register drib menu item
DribbblishShared.configMenu.register();
DribbblishShared.configMenu.addItem(new Spicetify.Menu.Item(
"Right expanded cover",
DribbblishShared.rightBigCover,
(self) => {
self.isEnabled = !self.isEnabled;
DribbblishShared.rightBigCover = self.isEnabled;
localStorage.setItem("dribs-right-big-cover", self.isEnabled);
DribbblishShared.setRightBigCover();
}
));
DribbblishShared.setRightBigCover();
function waitForElement(els, func, timeout = 100) {
const queries = els.map(el => document.querySelector(el));
if (queries.every(a => a)) {
@ -35,102 +7,22 @@ function waitForElement(els, func, timeout = 100) {
}
}
waitForElement([
`ul[tabindex="0"]`,
`ul[tabindex="0"] .GlueDropTarget--playlists.GlueDropTarget--folders`
], ([root, firstItem]) => {
const listElem = firstItem.parentElement;
root.classList.add("dribs-playlist-list");
/** Replace Playlist name with their pictures */
function loadPlaylistImage() {
for (const item of listElem.children) {
let link = item.querySelector("a");
if (!link) continue;
let [_, app, uid ] = link.pathname.split("/");
let uri;
if (app === "playlist") {
uri = `spotify:playlist:${uid}`;
} else if (app === "folder") {
const base64 = localStorage.getItem("dribbblish:folder-image:" + uid);
let img = link.querySelector("img");
if (!img) {
img = document.createElement("img");
img.classList.add("playlist-picture");
link.prepend(img);
}
img.src = base64 || "https://cdn.jsdelivr.net/gh/spicetify/spicetify-themes@master/Dribbblish/images/tracklist-row-song-fallback.svg";
continue;
}
Spicetify.CosmosAsync.get(
`sp://core-playlist/v1/playlist/${uri}/metadata`,
{ policy: { picture: true } }
).then(res => {
const meta = res.metadata;
let img = link.querySelector("img");
if (!img) {
img = document.createElement("img");
img.classList.add("playlist-picture");
link.prepend(img);
}
img.src = meta.picture || "https://cdn.jsdelivr.net/gh/spicetify/spicetify-themes@master/Dribbblish/images/tracklist-row-song-fallback.svg";
});
}
}
DribbblishShared.loadPlaylistImage = loadPlaylistImage;
loadPlaylistImage();
new MutationObserver(loadPlaylistImage)
.observe(listElem, {childList: true});
});
// back shadow
waitForElement([".Root__top-container"], ([topContainer]) => {
const shadow = document.createElement("div");
shadow.id = "dribbblish-back-shadow";
topContainer.prepend(shadow);
});
// allow resizing of the navbar
waitForElement([
".Root__nav-bar .LayoutResizer__input, .Root__nav-bar .LayoutResizer__resize-bar input"
], ([resizer]) => {
const observer = new MutationObserver(updateVariable);
observer.observe(resizer, { attributes: true, attributeFilter: ["value"]});
function updateVariable() {
let value = resizer.value;
if (value < 121) {
value = 72;
document.documentElement.classList.add("sidebar-hide-text");
} else {
document.documentElement.classList.remove("sidebar-hide-text");
}
document.documentElement.style.setProperty(
"--sidebar-width", value + "px");
// check if element has two children
const mainNav = topContainer.querySelector(".main-navBar-mainNav");
if (mainNav && mainNav.childElementCount === 1) {
document.documentElement.classList.add("legacy-nav");
legacy();
}
updateVariable();
});
// allow resizing of the buddy feed
waitForElement([".Root__right-sidebar .LayoutResizer__input, .Root__right-sidebar .LayoutResizer__resize-bar input"], ([resizer]) => {
const observer = new MutationObserver(updateVariable);
observer.observe(resizer, { attributes: true, attributeFilter: ["value"] });
function updateVariable() {
let value = resizer.value;
if (value == 280) {
value = 72;
document.documentElement.classList.add("buddyFeed-hide-text");
} else {
document.documentElement.classList.remove("buddyFeed-hide-text");
}
}
updateVariable();
});
// add fade effect on playlist/folder list
waitForElement([".main-navBar-navBar .os-viewport.os-viewport-native-scrollbars-invisible"], ([scrollNode]) => {
waitForElement([".main-navBar-mainNav .os-viewport.os-viewport-native-scrollbars-invisible"], ([scrollNode]) => {
scrollNode.setAttribute("fade", "bottom");
scrollNode.addEventListener("scroll", () => {
if (scrollNode.scrollTop == 0) {
@ -143,26 +35,6 @@ waitForElement([".main-navBar-navBar .os-viewport.os-viewport-native-scrollbars-
});
});
// improve styles at smaller sizes
waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) => {
const observer = new ResizeObserver(updateVariable);
observer.observe(resizeHost);
function updateVariable([ event ]) {
document.documentElement.style.setProperty(
"--main-view-width", event.contentRect.width + "px");
if (event.contentRect.width < 700) {
document.documentElement.classList.add("minimal-player");
} else {
document.documentElement.classList.remove("minimal-player");
}
if (event.contentRect.width < 550) {
document.documentElement.classList.add("extra-minimal-player");
} else {
document.documentElement.classList.remove("extra-minimal-player");
}
}
});
(function Dribbblish() {
// dynamic playback time tooltip
const progBar = document.querySelector(".playback-bar");
@ -177,33 +49,106 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) =>
tooltip.className = "prog-tooltip";
progBar.append(tooltip);
const progKnob = progBar.querySelector(".progress-bar__slider");
function updateProgTime({ data: e }) {
const offsetX = progKnob.offsetLeft + progKnob.offsetWidth / 2;
const maxWidth = progBar.offsetWidth;
const curWidth = Spicetify.Player.getProgressPercent() * maxWidth;
const ttWidth = tooltip.offsetWidth / 2;
if (curWidth < ttWidth) {
tooltip.style.left = String(offsetX) + "px";
} else if (curWidth > maxWidth - ttWidth) {
tooltip.style.left = String(offsetX - ttWidth * 2) + "px";
if (curWidth < ttWidth + 12) {
tooltip.style.left = "12px";
} else if (curWidth > maxWidth - ttWidth - 12) {
tooltip.style.left = String(maxWidth - ttWidth * 2 - 12) + "px";
} else {
tooltip.style.left = String(offsetX - ttWidth) + "px";
tooltip.style.left = String(curWidth - ttWidth) + "px";
}
tooltip.innerText = Spicetify.Player.formatTime(e) + " / " +
Spicetify.Player.formatTime(Spicetify.Player.getDuration());
tooltip.innerText = Spicetify.Player.formatTime(e) + " / " + Spicetify.Player.formatTime(Spicetify.Player.getDuration());
}
Spicetify.Player.addEventListener("onprogress", updateProgTime);
updateProgTime({ data: Spicetify.Player.getProgress() });
})();
Spicetify.CosmosAsync.sub("sp://connect/v1", (state) => {
const isExternal = state.devices.some(a => a.is_active);
if (isExternal) {
root.classList.add("is-connectBarVisible");
} else {
root.classList.remove("is-connectBarVisible");
// LEGACY NAVBAR ONLY
function legacy() {
if (!Spicetify.Platform) {
setTimeout(legacy, 300);
return;
}
let DribbblishShared = {};
// allow resizing of the navbar
waitForElement([".Root__nav-bar .LayoutResizer__resize-bar"], ([resizer]) => {
console.log(resizer);
const observer = new MutationObserver(updateVariable);
observer.observe(resizer, { attributes: true, attributeFilter: ["class"] });
function updateVariable() {
if (resizer.classList.contains("LayoutResizer__resize-bar-east")) {
document.documentElement.style.setProperty("--left-sidebar-width", "72px");
document.documentElement.classList.add("left-sidebar-collapsed");
} else {
document.documentElement.classList.remove("left-sidebar-collapsed");
}
}
updateVariable();
});
// add fade effect on playlist/folder list
waitForElement([".main-navBar-navBar .os-viewport.os-viewport-native-scrollbars-invisible"], ([scrollNode]) => {
scrollNode.setAttribute("fade", "bottom");
scrollNode.addEventListener("scroll", () => {
if (scrollNode.scrollTop == 0) {
scrollNode.setAttribute("fade", "bottom");
} else if (scrollNode.scrollHeight - scrollNode.clientHeight - scrollNode.scrollTop == 0) {
scrollNode.setAttribute("fade", "top");
} else {
scrollNode.setAttribute("fade", "full");
}
});
});
waitForElement([`ul[tabindex="0"]`, `ul[tabindex="0"] .GlueDropTarget--playlists.GlueDropTarget--folders`], ([root, firstItem]) => {
const listElem = firstItem.parentElement;
root.classList.add("dribs-playlist-list");
/** Replace Playlist name with their pictures */
function loadPlaylistImage() {
for (const item of listElem.children) {
let link = item.querySelector("a");
if (!link) continue;
let [_, app, uid] = link.pathname.split("/");
let uri;
if (app === "playlist") {
uri = `spotify:playlist:${uid}`;
} else if (app === "folder") {
const base64 = localStorage.getItem("dribbblish:folder-image:" + uid);
let img = link.querySelector("img");
if (!img) {
img = document.createElement("img");
img.classList.add("playlist-picture");
link.prepend(img);
}
img.src = base64 || "https://cdn.jsdelivr.net/gh/spicetify/spicetify-themes@master/Dribbblish/images/tracklist-row-song-fallback.svg";
continue;
}
Spicetify.CosmosAsync.get(`sp://core-playlist/v1/playlist/${uri}/metadata`, { policy: { picture: true } }).then(res => {
const meta = res.metadata;
let img = link.querySelector("img");
if (!img) {
img = document.createElement("img");
img.classList.add("playlist-picture");
link.prepend(img);
}
img.src = meta.picture || "https://cdn.jsdelivr.net/gh/spicetify/spicetify-themes@master/Dribbblish/images/tracklist-row-song-fallback.svg";
});
}
}
DribbblishShared.loadPlaylistImage = loadPlaylistImage;
loadPlaylistImage();
new MutationObserver(loadPlaylistImage).observe(listElem, { childList: true });
});
// filepicker for custom folder images
@ -213,54 +158,45 @@ waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) =>
document.body.appendChild(filePickerForm);
/** @type {HTMLInputElement} */
const filePickerInput = filePickerForm.childNodes[0];
filePickerInput.accept = [
"image/jpeg",
"image/apng",
"image/avif",
"image/gif",
"image/png",
"image/svg+xml",
"image/webp"
].join(",");
filePickerInput.accept = ["image/jpeg", "image/apng", "image/avif", "image/gif", "image/png", "image/svg+xml", "image/webp"].join(",");
filePickerInput.onchange = () => {
if (!filePickerInput.files.length) return;
const file = filePickerInput.files[0];
const reader = new FileReader;
reader.onload = (event) => {
const reader = new FileReader();
reader.onload = event => {
const result = event.target.result;
const id = Spicetify.URI.from(filePickerInput.uri).id;
try {
localStorage.setItem(
"dribbblish:folder-image:" + id,
result
);
localStorage.setItem("dribbblish:folder-image:" + id, result);
} catch {
Spicetify.showNotification("File too large");
}
DribbblishShared.loadPlaylistImage?.call();
}
};
reader.readAsDataURL(file);
}
};
// context menu items for custom folder images
new Spicetify.ContextMenu.Item("Remove folder image",
new Spicetify.ContextMenu.Item(
"Remove folder image",
([uri]) => {
const id = Spicetify.URI.from(uri).id;
localStorage.removeItem("dribbblish:folder-image:" + id);
DribbblishShared.loadPlaylistImage?.call();
},
([uri]) => Spicetify.URI.isFolder(uri),
"x",
"x"
).register();
new Spicetify.ContextMenu.Item("Choose folder image",
new Spicetify.ContextMenu.Item(
"Choose folder image",
([uri]) => {
filePickerInput.uri = uri;
filePickerForm.reset();
filePickerInput.click();
},
([uri]) => Spicetify.URI.isFolder(uri),
"edit",
"edit"
).register();
})();
}

1347
Dribbblish/user.css
View File

File diff suppressed because it is too large Load Diff