diff --git a/Comfy/app.scss b/Comfy/app.scss index 85492ea..2aef9dc 100644 --- a/Comfy/app.scss +++ b/Comfy/app.scss @@ -188,7 +188,7 @@ overflow: hidden; .main-userWidget-dropDownMenu .main-contextMenu-menuItemButton:has(span + svg)::before { - border-bottom: 1px solid rgba(var(--spice-rgb-selected-row), .1); + border-bottom: 1px solid rgba(var(--spice-rgb-selected-row), 0.1); content: ""; left: 0; pointer-events: none; diff --git a/Comfy/assets/_main.scss b/Comfy/assets/_main.scss index 4e12715..5ef2ff3 100644 --- a/Comfy/assets/_main.scss +++ b/Comfy/assets/_main.scss @@ -31,7 +31,6 @@ } } - .main-entityHeader-backgroundColor { background: none !important; } @@ -41,7 +40,7 @@ .artist-artistOverview-artistOverviewContent, .main-actionBarBackground-background { - min-height: calc(100vh - min(30vh, clamp(250px, 250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*150, 400px)) - 128px - 12px) !important; + min-height: calc(100vh - min(30vh, clamp(250px, 250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424 * 150, 400px)) - 128px - 12px) !important; } } @@ -52,7 +51,7 @@ var(--tracklist-gradient-noise) !important; background-color: transparent !important; height: calc(100% - 250px); - min-height: calc(100vh - min(30vh, clamp(250px, 250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*150, 400px)) - 128px); + min-height: calc(100vh - min(30vh, clamp(250px, 250px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424 * 150, 400px)) - 128px); background-size: auto 100%, 300px var(--tracklist-gradient-height); background-repeat: repeat-x; } @@ -202,7 +201,7 @@ margin-left: calc(var(--content-spacing) + 3px); } - >:first-child:not(:only-child) { + > :first-child:not(:only-child) { margin-right: calc(var(--content-spacing) + 4px); } diff --git a/Comfy/assets/_navbar.scss b/Comfy/assets/_navbar.scss index 289232e..0189dbd 100644 --- a/Comfy/assets/_navbar.scss +++ b/Comfy/assets/_navbar.scss @@ -19,7 +19,7 @@ } [role="presentation"]>li>div>div>div>div>div>.x-entityImage-imageContainer { - box-shadow: 0 4px 60px rgba(var(--spice-rgb-shadow), .0) !important; + box-shadow: 0 4px 60px rgba(var(--spice-rgb-shadow), 0) !important; } } diff --git a/Comfy/assets/_now_playing.scss b/Comfy/assets/_now_playing.scss index 2412ebe..49594b1 100644 --- a/Comfy/assets/_now_playing.scss +++ b/Comfy/assets/_now_playing.scss @@ -27,6 +27,14 @@ } } } + + // Connect bar + .main-nowPlayingBar-container { + .main-connectBar-connectBar { + margin-left: auto; + width: calc(100vw - var(--cover-art-width) - 32px); + } + } } :root #main.Custom-Playbar-Snippet:not(.Playbar-Above-Right-Panel-Snippet) .Root__top-container { @@ -139,9 +147,7 @@ } } } - } - } } } \ No newline at end of file diff --git a/Comfy/assets/_settings.scss b/Comfy/assets/_settings.scss index 011981e..51ef0f2 100644 --- a/Comfy/assets/_settings.scss +++ b/Comfy/assets/_settings.scss @@ -68,7 +68,7 @@ min-height: calc(100% - 60px); &::after { - content: ''; + content: ""; position: absolute; bottom: 0; width: calc(100% - 12px); @@ -546,5 +546,4 @@ filter: brightness(0.8); } } - } \ No newline at end of file diff --git a/Comfy/assets/_snippets.scss b/Comfy/assets/_snippets.scss index ea38aa8..2e6f8a1 100644 --- a/Comfy/assets/_snippets.scss +++ b/Comfy/assets/_snippets.scss @@ -308,7 +308,7 @@ transition-property: transform, left; transition-property: transform, left, -webkit-transform; -webkit-transition-timing-function: linear; - transition-timing-function: linear + transition-timing-function: linear; } } } @@ -331,6 +331,19 @@ } } + &.Compact-Connect-Bar-Snippet { + .main-nowPlayingBar-container { + .main-connectBar-connectBar { + position: absolute; + margin-left: auto; + padding: 0.75rem 1rem; + top: -40%; + right: 0; + width: auto; + } + } + } + &.Remove-Lyrics-Button-Snippet { .main-nowPlayingBar-lyricsButton { display: none !important; @@ -450,7 +463,7 @@ &.Header-Background { .main-entityHeader-imageContainerNew { align-self: center; - left: calc(clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*104, 232px) + 24px + var(--content-spacing)); + left: calc(clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424 * 104, 232px) + 24px + var(--content-spacing)); position: relative; z-index: 1; } @@ -462,7 +475,7 @@ min-width: fit-content; box-shadow: 0 2px 4px rgba(var(--spice-rgb-shadow), 0.1); justify-content: space-evenly !important; - height: calc(clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424*104, 232px) + 48px); + height: calc(clamp(128px, 128px + (100vw - var(--comfy-left-sidebar-width, 0px) - var(--comfy-panel-width, 0px) - 600px)/424 * 104, 232px) + 48px); } .main-entityHeader-imageContainerNew+.main-entityHeader-headerText { @@ -477,7 +490,7 @@ &.AM-Gradient-Include-Existing-Snippet.Banner-Enabled, &.Replace-Existing-Banners.Banner-Enabled { - .under-main-view > div:not(.comfy-banner-frame) { + .under-main-view>div:not(.comfy-banner-frame) { display: none !important; } } diff --git a/Comfy/assets/_top_bar.scss b/Comfy/assets/_top_bar.scss index ad01cca..cf32bcf 100644 --- a/Comfy/assets/_top_bar.scss +++ b/Comfy/assets/_top_bar.scss @@ -1,4 +1,5 @@ :root .main-topBar-container { + .main-topBar-topbarContent *, .main-topBar-topbarContentWrapper * { justify-content: center; @@ -7,12 +8,12 @@ .main-topBar-searchBar { >form input { + height: 32px; + background-color: rgba(var(--spice-rgb-shadow), 0.7); + &::placeholder { color: rgba(var(--spice-rgb-selected-row), 0.7); } - - height: 32px; - background-color: rgba(var(--spice-rgb-shadow), 0.7); } } diff --git a/Comfy/theme.script.js b/Comfy/theme.script.js index 92bdfbe..76f122a 100644 --- a/Comfy/theme.script.js +++ b/Comfy/theme.script.js @@ -29,15 +29,15 @@ todo: console.log(JSON.parse(localStorage.getItem("comfy:config") || "{}")); } }; - console.debug(`[Comfy-Event]: Global Functions Added`); + console.debug("[Comfy-Event]: Global Functions Added"); // Initialize Config - let config = JSON.parse(localStorage.getItem("comfy:config") || "{}"); + const config = JSON.parse(localStorage.getItem("comfy:config") || "{}"); let configScheme = Spicetify.Config?.color_scheme || "Comfy"; let preloadedScheme = false; let startup = true; - let preloadContainer = document.createElement("div"); - console.debug(`[Comfy-Event]: Config Initialized`); + const preloadContainer = document.createElement("div"); + console.debug("[Comfy-Event]: Config Initialized"); // Preload Applied Colorscheme const colorScheme = getConfig("Color-Scheme"); @@ -99,14 +99,17 @@ todo: const newPanelWidth = mutations[0].target.style.getPropertyValue("--panel-width"); const newSidebarWidth = mutations[0].target.style.getPropertyValue("--left-sidebar-width"); if (newPanelWidth !== panelWidth || newSidebarWidth !== sidebarWidth) { - const trimmedPanelWidth = parseInt(newPanelWidth); - const trimmedSidebarWidth = parseInt(newSidebarWidth); + const trimmedPanelWidth = Number.parseInt(newPanelWidth); + const trimmedSidebarWidth = Number.parseInt(newSidebarWidth); document.documentElement.style.setProperty("--comfy-panel-width", `${trimmedPanelWidth}px`); document.documentElement.style.setProperty("--comfy-left-sidebar-width", `${trimmedSidebarWidth}px`); panelWidth = newPanelWidth; sidebarWidth = newSidebarWidth; } - }).observe(document.documentElement, { attributes: true, attributeFilter: ["style"] }); + }).observe(document.documentElement, { + attributes: true, + attributeFilter: ["style"] + }); waitForDeps("Spicetify.Platform.version", version => { if (version >= "1.2.46.462") { @@ -123,7 +126,7 @@ todo: }); // Banner Image(s) - let channels = { + const channels = { Lyrics: { regex: /^\/lyrics$/, enabled: getConfig("Lyrics") ?? false }, Playlist: { regex: /^\/playlist\//, enabled: getConfig("Playlist") ?? true }, Station: { regex: /^\/station\/playlist\//, enabled: getConfig("Station") ?? true }, @@ -143,10 +146,10 @@ todo: const banner = [document.createElement("div"), document.createElement("div")]; frame.className = "comfy-banner-frame"; - banner.forEach(image => { + for (const image of banner) { image.className = "comfy-banner-image"; frame.append(image); - }); + } waitForDeps( ".under-main-view", @@ -207,7 +210,9 @@ todo: children.map(child => Spicetify.React.createElement(child.type, { ...child, - tippy: Spicetify.React.createElement(Tippy, { label: child.tippy }) + tippy: Spicetify.React.createElement(Tippy, { + label: child.tippy + }) }) ) ) @@ -264,7 +269,10 @@ todo: Spicetify.React.createElement("div", { className: "setting-action" }, action) ), Spicetify.React.createElement("div", { className: "setting-description" }, desc), - desc && Spicetify.React.createElement("div", { className: "setting-description-spacer" }) + desc && + Spicetify.React.createElement("div", { + className: "setting-description-spacer" + }) ) ); }); @@ -280,14 +288,17 @@ todo: null, Spicetify.React.createElement( "div", - { className: "setting-subSection", id: state ? (collapseItems ? "collapsed" : "enabled") : "disabled" }, + { + className: "setting-subSection", + id: state ? (collapseItems ? "collapsed" : "enabled") : "disabled" + }, Spicetify.React.createElement(Toggle, { name, callback: value => { callback?.(value); setState(value); - items.forEach(item => { + for (const item of items) { const both = () => (item.type === Input ? "" : item.defaultVal); const state = getConfig(item.name) ?? both(); @@ -308,7 +319,7 @@ todo: console.debug(`[Comfy-subCallback]: ${item.name}`, state); item.callback?.(state, item.name); } - }); + } }, onClick: () => { if (state) { @@ -324,7 +335,9 @@ todo: items.map(item => Spicetify.React.createElement(item.type, { ...item, - tippy: Spicetify.React.createElement(Tippy, { label: item.tippy }) + tippy: Spicetify.React.createElement(Tippy, { + label: item.tippy + }) }) ) ) @@ -414,7 +427,9 @@ todo: Spicetify.React.createElement( "span", { className: "x-toggle-indicatorWrapper" }, - Spicetify.React.createElement("span", { className: "x-toggle-indicator" }) + Spicetify.React.createElement("span", { + className: "x-toggle-indicator" + }) ) ), onClick @@ -528,7 +543,7 @@ todo: Spicetify.React.createElement( "button", { - className: `switch`, + className: "switch", onClick: event => { event.stopPropagation(); // Prevent event from propagating up setSelectedValue(defaultVal); @@ -546,15 +561,23 @@ todo: ), Spicetify.React.createElement( "div", - { className: `dropdown-wrapper main-type-mestoBold ${menuOpen ? "menu-open" : ""}`, id: name }, + { + className: `dropdown-wrapper main-type-mestoBold ${menuOpen ? "menu-open" : ""}`, + id: name + }, Spicetify.React.createElement( "div", - { className: "dropdown-button", onClick: () => setMenuOpen(!menuOpen) }, + { + className: "dropdown-button", + onClick: () => setMenuOpen(!menuOpen) + }, Spicetify.React.createElement("div", { className: "dropdown-selection" }, selectedValue), Spicetify.React.createElement( "div", { className: "dropdown-arrow-wrapper" }, - Spicetify.React.createElement("span", { className: "dropdown-arrow" }) + Spicetify.React.createElement("span", { + className: "dropdown-arrow" + }) ) ), menuOpen && @@ -782,7 +805,7 @@ todo: Spicetify.React.createElement( "button", { - className: `search-searchCategory-carouselButton search-searchCategory-carouselButtonLeft`, + className: "search-searchCategory-carouselButton search-searchCategory-carouselButtonLeft", tabIndex: -1, onClick: () => handleButtonClick("LEFT"), inert: true @@ -790,13 +813,15 @@ todo: Spicetify.React.createElement("svg", { viewBox: "0 0 16 16", className: "Svg-img-icon-small-textBase", - dangerouslySetInnerHTML: { __html: Spicetify.SVGIcons["chevron-left"] } + dangerouslySetInnerHTML: { + __html: Spicetify.SVGIcons["chevron-left"] + } }) ), Spicetify.React.createElement( "button", { - className: `search-searchCategory-carouselButton search-searchCategory-carouselButtonRight`, + className: "search-searchCategory-carouselButton search-searchCategory-carouselButtonRight", tabIndex: -1, onClick: () => handleButtonClick("RIGHT"), inert: true @@ -804,7 +829,9 @@ todo: Spicetify.React.createElement("svg", { viewBox: "0 0 16 16", className: "Svg-img-icon-small-textBase", - dangerouslySetInnerHTML: { __html: Spicetify.SVGIcons["chevron-right"] } + dangerouslySetInnerHTML: { + __html: Spicetify.SVGIcons["chevron-right"] + } }) ) ) @@ -845,13 +872,11 @@ todo: { type: Dropdown, name: "Color-Scheme", - title: `Color Scheme`, - desc: "For faster loadtimes use cli to change color schemes", + title: "Color Scheme", + desc: "For faster load times use cli to change color schemes", options: () => { const schemes = Object.keys(getConfig("Color-Schemes")); - const decapSchemes = schemes.map(function (x) { - return x.toLowerCase(); - }); + const decapSchemes = schemes.map(x => x.toLowerCase()); if (!decapSchemes.includes(configScheme.toLowerCase())) { schemes.unshift(configScheme); @@ -859,10 +884,12 @@ todo: return schemes; }, - defaultVal: (configScheme = - (getConfig("Color-Schemes") && - Object.keys(getConfig("Color-Schemes")).find(scheme => scheme.toLowerCase() === configScheme.toLowerCase())) || - configScheme), + defaultVal: (() => { + const foundScheme = getConfig("Color-Schemes") + ? Object.keys(getConfig("Color-Schemes")).find(scheme => scheme.toLowerCase() === configScheme.toLowerCase()) + : null; + return foundScheme || configScheme; + })(), condition: getConfig("Color-Schemes") && !preloadedScheme && !document.querySelector("body > style.marketplaceCSS.marketplaceScheme"), callback: (name, value) => { updateScheme(value); @@ -870,8 +897,8 @@ todo: }, { type: Dropdown, - name: `Scheme-Features`, - title: `Additional Features`, + name: "Scheme-Features", + title: "Additional Features", description: "Extra tweaks to complete specific color schemes", options: ["nord", "nord-flat", "kitty"], callback: (name, value, options, defaultVal) => { @@ -959,7 +986,10 @@ todo: waitForDeps("Spicetify.Platform.UserAPI", async () => { const productState = Spicetify.Platform.UserAPI._product_state || Spicetify.Platform.UserAPI._product_state_service; await productState.delOverridesValues({ keys: ["name"] }); - if (value) await productState.putOverridesValues({ pairs: { name: value } }); + if (value) + await productState.putOverridesValues({ + pairs: { name: value } + }); }); } }, @@ -978,7 +1008,7 @@ todo: height: `${(value === "0" ? "1" : value) || defaultVal}px` }); - document.documentElement.style.setProperty("--comfy-topbar-height", value ? value + "px" : ""); + document.documentElement.style.setProperty("--comfy-topbar-height", value ? `${value}px` : ""); }); }, callbackOverride: true @@ -997,7 +1027,7 @@ todo: Spicetify.React.createElement("li", null, "Comfy default: 8px"), Spicetify.React.createElement("li", null, "Spotify default: 50px") ), - callback: value => document.documentElement.style.setProperty("--button-radius", value ? value + "px" : "") + callback: value => document.documentElement.style.setProperty("--button-radius", value ? `${value}px` : "") }, { type: SubSection, @@ -1216,7 +1246,7 @@ todo: null, Spicetify.React.createElement("h4", null, "Set to 0 to disable the gradient!") ), - callback: value => document.documentElement.style.setProperty("--tracklist-gradient-height", value ? value + "px" : "") + callback: value => document.documentElement.style.setProperty("--tracklist-gradient-height", value ? `${value}px` : "") }, { type: Input, @@ -1261,11 +1291,15 @@ todo: const rightbar = topContainer.querySelector(".Root__right-sidebar"); const resizeObserver = new ResizeObserver(entries => { if (getConfig("Playbar-Above-Right-Panel-Snippet")) { - for (let entry of entries) { + for (const entry of entries) { if (entry.target === rightbar) { let newWidth = entry.contentRect.width; - if (newWidth == 0) { - const localStorageWidth = localStorage.getItem("223ni6f2epqcidhx5etjafeai:panel-width-saved"); + if (newWidth === 0) { + const localStorageWidth = + Spicetify.Platform?.LocalStorageAPI?.getItem("panel-width") || + localStorage.getItem( + `${Spicetify.Platform?.LocalStorageAPI?.namespace || Spicetify.Platform?.username || ""}:panel-width-saved` + ); if (localStorageWidth) { newWidth = localStorageWidth; } else { @@ -1303,6 +1337,12 @@ todo: title: "Hoverable Playback Timers", defaultVal: false }, + { + type: Toggle, + name: "Compact-Connect-Bar-Snippet", + title: "Compact Connect Bar", + defaultVal: false + }, { type: Toggle, name: "Remove-Connect-Bar-Snippet", @@ -1353,7 +1393,7 @@ todo: title: "Width", defaultVal: "84px", min: "0", - callback: value => document.documentElement.style.setProperty("--cover-art-width", value ? value + "px" : "") + callback: value => document.documentElement.style.setProperty("--cover-art-width", value ? `${value}px` : "") }, { type: Input, @@ -1362,7 +1402,7 @@ todo: title: "Height", defaultVal: "84px", min: "0", - callback: value => document.documentElement.style.setProperty("--cover-art-height", value ? value + "px" : "") + callback: value => document.documentElement.style.setProperty("--cover-art-height", value ? `${value}px` : "") }, { type: Input, @@ -1371,7 +1411,7 @@ todo: title: "Border Radius", defaultVal: "8px", min: "0", - callback: value => document.documentElement.style.setProperty("--cover-art-radius", value ? value + "px" : "") + callback: value => document.documentElement.style.setProperty("--cover-art-radius", value ? `${value}px` : "") }, { type: Input, @@ -1380,7 +1420,7 @@ todo: title: "Left Margin", defaultVal: "0px", desc: "Change the distance between the cover art and the left of the playbar", - callback: value => document.documentElement.style.setProperty("--cover-art-left", value ? value + "px" : "") + callback: value => document.documentElement.style.setProperty("--cover-art-left", value ? `${value}px` : "") }, { type: Input, @@ -1395,7 +1435,7 @@ todo: Spicetify.React.createElement("li", null, "Spotify default: 0px") ), desc: "Change the distance between the cover art and the bottom of the playbar", - callback: value => document.documentElement.style.setProperty("--cover-art-bottom", value ? value + "px" : "") + callback: value => document.documentElement.style.setProperty("--cover-art-bottom", value ? `${value}px` : "") } ] } @@ -1434,10 +1474,10 @@ todo: type: Toggle, name: channel, title: `${channel.replace("-", " ")} Page`, - defaultVal: channels[channel]["enabled"], + defaultVal: channels[channel].enabled, callback: value => { - if (value !== channels[channel]["enabled"]) { - channels[channel]["enabled"] = value; + if (value !== channels[channel].enabled) { + channels[channel].enabled = value; updateBanner(); } } @@ -1522,7 +1562,7 @@ todo: Spicetify.React.createElement("h4", null, "Seconds per full rotation (360°):"), Spicetify.React.createElement("li", null, "Comfy default: 50") ), - callback: value => document.documentElement.style.setProperty("--gradient-speed", value ? value + "s" : "") + callback: value => document.documentElement.style.setProperty("--gradient-speed", value ? `${value}s` : "") }, { type: Input, @@ -1537,7 +1577,7 @@ todo: Spicetify.React.createElement("h4", null, "Width of circles in relation to viewport (in %)"), Spicetify.React.createElement("li", null, "Comfy default: 150") ), - callback: value => document.documentElement.style.setProperty("--gradient-width", value ? value + "%" : "") + callback: value => document.documentElement.style.setProperty("--gradient-width", value ? `${value}%` : "") }, { type: Input, @@ -1547,7 +1587,7 @@ todo: desc: "Radius of circles (in %)", defaultVal: "50", min: "0", - callback: value => document.documentElement.style.setProperty("--gradient-radius", value ? value + "%" : "") + callback: value => document.documentElement.style.setProperty("--gradient-radius", value ? `${value}%` : "") } ], collapseItems: true @@ -1591,7 +1631,7 @@ todo: Spicetify.React.createElement("h4", null, "Amount of banner blur in pixels:"), Spicetify.React.createElement("li", null, "Comfy default: 4px") ), - callback: value => document.documentElement.style.setProperty("--image-blur", value ? value + "px" : "") + callback: value => document.documentElement.style.setProperty("--image-blur", value ? `${value}px` : "") } ]), Spicetify.React.createElement(Section, { name: "Settings", filter }, [ @@ -1744,7 +1784,7 @@ todo: isLarge: true }); - document.querySelector(".main-trackCreditsModal-closeBtn[aria-label='Close']").addEventListener("click", function () { + document.querySelector(".main-trackCreditsModal-closeBtn[aria-label='Close']").addEventListener("click", () => { document.getElementById("main").classList.remove("Settings-Open"); }); @@ -1808,7 +1848,7 @@ todo: function setConfig(key, value, message, silent) { if (value !== getConfig(key)) { - if (!silent) console.debug(`[Comfy-Config]: ${message ?? key + " ="}`, value); + if (!silent) console.debug(`[Comfy-Config]: ${message ?? `${key} =`}`, value); config[key] = value; localStorage.setItem("comfy:config", JSON.stringify(config)); } @@ -1832,7 +1872,7 @@ todo: async function waitForDeps(dependencies, callback, element = false, elementType = "querySelector", timeout = 5000) { return new Promise(resolve => { let allDependenciesLoaded = false; - let startTime = Date.now(); + const startTime = Date.now(); async function checkElements() { const check = () => @@ -1848,7 +1888,10 @@ todo: resolve(); } }); - observer.observe(document.documentElement, { childList: true, subtree: true }); + observer.observe(document.documentElement, { + childList: true, + subtree: true + }); } } @@ -1858,7 +1901,7 @@ todo: if (Date.now() - startTime < timeout) { setTimeout(checkDependencies, 10); } else { - console.error(`[Comfy-Error]: Dependency Timeout -`, dependencies); + console.error("[Comfy-Error]: Dependency Timeout -", dependencies); resolve(); } return; @@ -1941,41 +1984,50 @@ todo: console.debug(`[Comfy-Event]: Banner Source = ${source}`); const preloadImage = new Image(); - preloadImage.onload = function () { + preloadImage.onload = () => { document.documentElement.style.setProperty("--image-url", `url(${source})`); }; preloadImage.src = source; } - banner.forEach(image => { + for (const image of banner) { image.style.display = source ? "" : "none"; - }); + } } - function updateScheme(scheme, message) { + function updateScheme(schemeName, message) { const marketplace = document.querySelector("body > style.marketplaceCSS.marketplaceScheme"); const colorSchemes = getConfig("Color-Schemes"); const existingScheme = document.querySelector("style.comfyScheme"); existingScheme?.remove(); - if (colorSchemes[scheme] && !marketplace && scheme !== configScheme) { - console.debug(`[Comfy-Event]: Scheme ${message ? message : "applied"} - ${scheme}`); - scheme = colorSchemes[scheme]; - } else { - return; + + let activeScheme = null; + + if (colorSchemes?.[schemeName]) { + if (!marketplace && schemeName !== configScheme) { + console.debug(`[Comfy-Event]: Scheme ${message ? message : "applied"} - ${schemeName}`); + activeScheme = colorSchemes[schemeName]; + } else if (colorSchemes[schemeName]) { + console.warn("[Comfy-Event]: Scheme found but not applied", schemeName); + } else { + console.warn("[Comfy-Event]: Scheme not found", schemeName); + } } - const schemeTag = document.createElement("style"); - schemeTag.classList.add("comfyScheme"); - let injectStr = ":root {"; - const themeIniKeys = Object.keys(scheme); - themeIniKeys.forEach(key => { - injectStr += `--spice-${key}: #${scheme[key]};`; - injectStr += `--spice-rgb-${key}: ${hexToRGB(scheme[key])};`; - }); - injectStr += "}"; - schemeTag.innerHTML = injectStr; - document.body.appendChild(schemeTag); + if (activeScheme) { + const schemeTag = document.createElement("style"); + schemeTag.classList.add("comfyScheme"); + let injectStr = ":root {"; + const themeIniKeys = Object.keys(activeScheme); + for (const key of themeIniKeys) { + injectStr += `--spice-${key}: #${activeScheme[key]};`; + injectStr += `--spice-rgb-${key}: ${hexToRGB(activeScheme[key])};`; + } + injectStr += "}"; + schemeTag.innerHTML = injectStr; + document.body.appendChild(schemeTag); + } } function parseIni(data) { @@ -1989,14 +2041,15 @@ todo: const lines = data.split(/[\r\n]+/); - lines.forEach(function (line) { + for (const line of lines) { if (regex.comment.test(line)) { - return; - } else if (regex.param.test(line)) { + continue; + } + if (regex.param.test(line)) { if (line.includes("xrdb")) { delete value[section || ""]; section = null; - return; + continue; } const match = line.match(regex.param); @@ -2018,29 +2071,31 @@ todo: } else if (line.length === 0 && section) { section = null; } - }); + } return value; } function hexToRGB(hex) { - if (hex.length === 3) { - hex = hex + let normalizedHex = hex; + + if (normalizedHex.length === 3) { + normalizedHex = normalizedHex .split("") .map(char => char + char) .join(""); - } else if (hex.length != 6) { + } else if (normalizedHex.length !== 6) { throw "Only 3- or 6-digit hex colours are allowed"; - } else if (hex.match(/[^0-9a-f]/i)) { + } else if (normalizedHex.match(/[^0-9a-f]/i)) { throw "Only hex colours are allowed"; } - const aRgbHex = hex.match(/.{1,2}/g); + const aRgbHex = normalizedHex.match(/.{1,2}/g); if (!aRgbHex || aRgbHex.length !== 3) { throw "Could not parse hex colour"; } - const aRgb = [parseInt(aRgbHex[0], 16), parseInt(aRgbHex[1], 16), parseInt(aRgbHex[2], 16)]; + const aRgb = [Number.parseInt(aRgbHex[0], 16), Number.parseInt(aRgbHex[1], 16), Number.parseInt(aRgbHex[2], 16)]; return aRgb; }