From 1a3989d9c0375e695cd146eeda7532d029921275 Mon Sep 17 00:00:00 2001 From: OhItsTom <22730962+ohitstom@users.noreply.github.com> Date: Tue, 14 Nov 2023 00:03:13 +0000 Subject: [PATCH 1/4] proof of concept --- jsHelper/spicetifyWrapper.js | 98 +++++++++++++++++++++++++++++------- 1 file changed, 79 insertions(+), 19 deletions(-) diff --git a/jsHelper/spicetifyWrapper.js b/jsHelper/spicetifyWrapper.js index e8183d78a4..4f9097cb14 100644 --- a/jsHelper/spicetifyWrapper.js +++ b/jsHelper/spicetifyWrapper.js @@ -338,6 +338,17 @@ window.Spicetify = { }) .filter(Boolean); + // Get Interanl Spotify SVGs + const svgFunctions = functionModules.filter(m => m.toString().includes("svgContent")); + const svgContent16pxArray = svgFunctions + .map(m => { + const match = m.toString().match(/ m?.useMemo), ReactDOM: cache.find(m => m?.createPortal), @@ -951,7 +962,7 @@ Spicetify.SVGIcons = { car: '', "chart-down": '', "chart-up": '', - check: '', + check: '', "check-alt-fill": '', "chevron-left": '', @@ -1127,26 +1138,32 @@ Spicetify.SVGIcons = { })(); class _HTMLContextMenuItem extends HTMLLIElement { - constructor({ name, disabled = false, icon = undefined, divider = false }) { + constructor({ name, disabled = false, icon = undefined, trailingIcon = undefined, divider = false }) { super(); this.name = name; - this.icon = icon || ""; + this.icon = icon; + this.trailingIcon = trailingIcon; this.disabled = disabled; this.divider = divider; this.classList.add("main-contextMenu-menuItem"); } + render() { - let icon = this.icon; - if (icon && Spicetify.SVGIcons[icon]) { - icon = `${Spicetify.SVGIcons[icon]}`; - } + const parseIcon = icon => { + if (icon && Spicetify.SVGIcons[icon]) { + return `${Spicetify.SVGIcons[icon]}`; + } + return icon || ""; + }; + this.innerHTML = ` -`; + ${parseIcon(this.icon)} + ${this.name} + ${parseIcon(this.trailingIcon)} + `; } connectedCallback() { @@ -1259,7 +1276,7 @@ Spicetify.Menu = (function () { }; class Item { - constructor(name, isEnabled, onClick, icon = undefined) { + constructor(name, isEnabled, onClick, icon = "") { this._name = name; this._isEnabled = isEnabled; this._icon = icon; @@ -1268,13 +1285,14 @@ Spicetify.Menu = (function () { }; this._element = new _HTMLContextMenuItem({ name: name, - icon: isEnabled ? "check" : icon ?? "" + icon: icon, + trailingIcon: isEnabled ? "check" : "" }); } setState(isEnabled) { this._isEnabled = isEnabled; - this._element.update("icon", isEnabled ? "check" : this._icon ?? ""); + this._element.update("trailingIcon", isEnabled ? "check" : ""); } set isEnabled(bool) { this.setState(bool); @@ -1314,12 +1332,17 @@ Spicetify.Menu = (function () { } class SubMenu { - constructor(name, items) { + constructor(name, items, icon, trailingIcon) { this._name = name; this._items = new Set(items); + this._icon = icon; + this._trailingIcon = trailingIcon; this._element = new _HTMLContextMenuItem({ name: name, - icon: `` + icon: icon, + trailingIcon: + trailingIcon || + '' }); } @@ -1341,6 +1364,28 @@ Spicetify.Menu = (function () { this._items.delete(item); } + setIcon(icon) { + this._icon = icon; + this._element.update("icon", icon); + } + set icon(icon) { + this.setIcon(icon); + } + get icon() { + return this._icon; + } + + setTrailingIcon(trailingIcon) { + this._trailingIcon = trailingIcon; + this._element.update("trailingIcon", trailingIcon); + } + set trailingIcon(trailingIcon) { + this.setTrailingIcon(trailingIcon); + } + get trailingIcon() { + return this._trailingIcon; + } + register() { collection.add(this); } @@ -1357,15 +1402,17 @@ Spicetify.ContextMenu = (function () { const iconList = Object.keys(Spicetify.SVGIcons); class Item { - constructor(name, onClick, shouldAdd = uris => true, icon = undefined, disabled = false) { + constructor(name, onClick, shouldAdd = uris => true, icon = "", trailingIcon = "", disabled = false) { this.onClick = onClick; this.shouldAdd = shouldAdd; this._name = name; this._icon = icon; + this._trailingIcon = trailingIcon; this._disabled = disabled; this._element = new _HTMLContextMenuItem({ name: name, icon: icon, + trailingIcon: trailingIcon, disabled: disabled }); } @@ -1385,6 +1432,14 @@ Spicetify.ContextMenu = (function () { return this._icon; } + set trailingIcon(name) { + this._trailingIcon = name; + this._element.update("trailingIcon", name); + } + get trailingIcon() { + return this._trailingIcon; + } + set disabled(bool) { this._disabled = bool; this._element.update("disabled", bool); @@ -1404,14 +1459,19 @@ Spicetify.ContextMenu = (function () { Item.iconList = iconList; class SubMenu { - constructor(name, items, shouldAdd = uris => true, disabled = false) { + constructor(name, items, shouldAdd = uris => true, disabled = false, icon = "", trailingIcon = "") { this._items = new Set(items); this.shouldAdd = shouldAdd; this._name = name; this._disabled = disabled; + this._icon = icon; + this._trailingIcon = trailingIcon; this._element = new _HTMLContextMenuItem({ name: name, - icon: ``, + icon: icon, + trailingIcon: + trailingIcon || + '', disabled: disabled }); } From 4ac5571a56b2875589f8e06428d6166c6fb5fa57 Mon Sep 17 00:00:00 2001 From: OhItsTom <22730962+ohitstom@users.noreply.github.com> Date: Tue, 14 Nov 2023 07:15:32 +0000 Subject: [PATCH 2/4] fix --- jsHelper/spicetifyWrapper.js | 90 +++++++++--------------------------- 1 file changed, 21 insertions(+), 69 deletions(-) diff --git a/jsHelper/spicetifyWrapper.js b/jsHelper/spicetifyWrapper.js index 4f9097cb14..35a900181d 100644 --- a/jsHelper/spicetifyWrapper.js +++ b/jsHelper/spicetifyWrapper.js @@ -456,7 +456,8 @@ window.Spicetify = { const playlistMenuChunk = Object.entries(require.m).find( ([, value]) => value.toString().includes('value:"playlist"') && value.toString().includes("onRemoveCallback") ); - if (playlistMenuChunk) Spicetify.ReactComponent.PlaylistMenu = Object.values(require(playlistMenuChunk[0])).find(m => typeof m === "function"); + if (playlistMenuChunk) + Spicetify.ReactComponent.PlaylistMenu = Object.values(require(playlistMenuChunk[0])).find(m => typeof m === "function" || typeof m === "object"); if (Spicetify.Color) Spicetify.Color.CSSFormat = modules.find(m => m?.RGBA); @@ -962,7 +963,7 @@ Spicetify.SVGIcons = { car: '', "chart-down": '', "chart-up": '', - check: '', + check: '', "check-alt-fill": '', "chevron-left": '', @@ -1138,32 +1139,26 @@ Spicetify.SVGIcons = { })(); class _HTMLContextMenuItem extends HTMLLIElement { - constructor({ name, disabled = false, icon = undefined, trailingIcon = undefined, divider = false }) { + constructor({ name, disabled = false, icon = undefined, divider = false }) { super(); this.name = name; - this.icon = icon; - this.trailingIcon = trailingIcon; + this.icon = icon || ""; this.disabled = disabled; this.divider = divider; this.classList.add("main-contextMenu-menuItem"); } - render() { - const parseIcon = icon => { - if (icon && Spicetify.SVGIcons[icon]) { - return `${Spicetify.SVGIcons[icon]}`; - } - return icon || ""; - }; - + let icon = this.icon; + if (icon && Spicetify.SVGIcons[icon]) { + icon = `${Spicetify.SVGIcons[icon]}`; + } this.innerHTML = ` - `; + ${this.name} + ${icon || ""} +`; } connectedCallback() { @@ -1276,7 +1271,7 @@ Spicetify.Menu = (function () { }; class Item { - constructor(name, isEnabled, onClick, icon = "") { + constructor(name, isEnabled, onClick, icon = undefined) { this._name = name; this._isEnabled = isEnabled; this._icon = icon; @@ -1285,14 +1280,13 @@ Spicetify.Menu = (function () { }; this._element = new _HTMLContextMenuItem({ name: name, - icon: icon, - trailingIcon: isEnabled ? "check" : "" + icon: isEnabled ? "check" : icon ?? "" }); } setState(isEnabled) { this._isEnabled = isEnabled; - this._element.update("trailingIcon", isEnabled ? "check" : ""); + this._element.update("icon", isEnabled ? "check" : this._icon ?? ""); } set isEnabled(bool) { this.setState(bool); @@ -1332,17 +1326,12 @@ Spicetify.Menu = (function () { } class SubMenu { - constructor(name, items, icon, trailingIcon) { + constructor(name, items) { this._name = name; this._items = new Set(items); - this._icon = icon; - this._trailingIcon = trailingIcon; this._element = new _HTMLContextMenuItem({ name: name, - icon: icon, - trailingIcon: - trailingIcon || - '' + icon: `` }); } @@ -1364,28 +1353,6 @@ Spicetify.Menu = (function () { this._items.delete(item); } - setIcon(icon) { - this._icon = icon; - this._element.update("icon", icon); - } - set icon(icon) { - this.setIcon(icon); - } - get icon() { - return this._icon; - } - - setTrailingIcon(trailingIcon) { - this._trailingIcon = trailingIcon; - this._element.update("trailingIcon", trailingIcon); - } - set trailingIcon(trailingIcon) { - this.setTrailingIcon(trailingIcon); - } - get trailingIcon() { - return this._trailingIcon; - } - register() { collection.add(this); } @@ -1402,17 +1369,15 @@ Spicetify.ContextMenu = (function () { const iconList = Object.keys(Spicetify.SVGIcons); class Item { - constructor(name, onClick, shouldAdd = uris => true, icon = "", trailingIcon = "", disabled = false) { + constructor(name, onClick, shouldAdd = uris => true, icon = undefined, disabled = false) { this.onClick = onClick; this.shouldAdd = shouldAdd; this._name = name; this._icon = icon; - this._trailingIcon = trailingIcon; this._disabled = disabled; this._element = new _HTMLContextMenuItem({ name: name, icon: icon, - trailingIcon: trailingIcon, disabled: disabled }); } @@ -1432,14 +1397,6 @@ Spicetify.ContextMenu = (function () { return this._icon; } - set trailingIcon(name) { - this._trailingIcon = name; - this._element.update("trailingIcon", name); - } - get trailingIcon() { - return this._trailingIcon; - } - set disabled(bool) { this._disabled = bool; this._element.update("disabled", bool); @@ -1459,19 +1416,14 @@ Spicetify.ContextMenu = (function () { Item.iconList = iconList; class SubMenu { - constructor(name, items, shouldAdd = uris => true, disabled = false, icon = "", trailingIcon = "") { + constructor(name, items, shouldAdd = uris => true, disabled = false) { this._items = new Set(items); this.shouldAdd = shouldAdd; this._name = name; this._disabled = disabled; - this._icon = icon; - this._trailingIcon = trailingIcon; this._element = new _HTMLContextMenuItem({ name: name, - icon: icon, - trailingIcon: - trailingIcon || - '', + icon: ``, disabled: disabled }); } From 1d0cef6606585d2c3af149f98ad1099286e3d9fc Mon Sep 17 00:00:00 2001 From: OhItsTom <22730962+ohitstom@users.noreply.github.com> Date: Thu, 16 Nov 2023 11:40:46 +0000 Subject: [PATCH 3/4] filter existing svgs, improve regex --- jsHelper/spicetifyWrapper.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/jsHelper/spicetifyWrapper.js b/jsHelper/spicetifyWrapper.js index 35a900181d..99693964f9 100644 --- a/jsHelper/spicetifyWrapper.js +++ b/jsHelper/spicetifyWrapper.js @@ -340,15 +340,13 @@ window.Spicetify = { // Get Interanl Spotify SVGs const svgFunctions = functionModules.filter(m => m.toString().includes("svgContent")); - const svgContent16pxArray = svgFunctions + Spicetify.SVGIcons["misc"] = svgFunctions .map(m => { - const match = m.toString().match(/ value.includes(match[1])) ? match[1] : null; }) .filter(Boolean); - Spicetify.SVGIcons["misc"] = svgContent16pxArray; - Object.assign(Spicetify, { React: cache.find(m => m?.useMemo), ReactDOM: cache.find(m => m?.createPortal), From 9daef491d4959e0391293797a42cdc2157893d79 Mon Sep 17 00:00:00 2001 From: OhItsTom <22730962+ohitstom@users.noreply.github.com> Date: Thu, 16 Nov 2023 19:20:41 +0000 Subject: [PATCH 4/4] 25 completed --- jsHelper/spicetifyWrapper.js | 52 ++++++++++++++++++------------------ 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/jsHelper/spicetifyWrapper.js b/jsHelper/spicetifyWrapper.js index 99693964f9..4dc13530c7 100644 --- a/jsHelper/spicetifyWrapper.js +++ b/jsHelper/spicetifyWrapper.js @@ -949,46 +949,46 @@ Spicetify.getFontStyle = font => { Spicetify.SVGIcons = { collaborative: - '', + "", album: - '', + "", artist: - '', - block: - '', + "", + block: "", brightness: - '', - car: '', - "chart-down": '', - "chart-up": '', - check: '', + "", + car: "", + "chart-down": "", + "chart-up": "", + check: "", "check-alt-fill": - '', - "chevron-left": '', - "chevron-right": '', + "", + "chevron-left": "", + "chevron-right": "", "chromecast-disconnected": - '', + "", clock: - '', + "", computer: - '', - copy: '', + "", + copy: "", download: - '', + "", downloaded: - '', - edit: '', + "", + edit: "", enhance: - '', + "", "exclamation-circle": - '', - "external-link": '', + "", + "external-link": + "", facebook: - '', + "", follow: - '', + "", fullscreen: - '', + "", gamepad: '', "grid-view": '',