From fd225ffa901c08b649e72897a367a4b520b1ab42 Mon Sep 17 00:00:00 2001 From: Sanooj Es Date: Tue, 3 Sep 2024 18:40:01 +0530 Subject: [PATCH] :bug: fix: lyrics cinema background --- extension/src/app.tsx | 5 ++- extension/src/components/Main.tsx | 1 + extension/src/utils/backgroundUtils.ts | 58 ++++++++++++++++++++++++++ src/theme.js | 6 +-- 4 files changed, 66 insertions(+), 4 deletions(-) create mode 100644 extension/src/utils/backgroundUtils.ts diff --git a/extension/src/app.tsx b/extension/src/app.tsx index 91b1ab67..ec4ef68f 100644 --- a/extension/src/app.tsx +++ b/extension/src/app.tsx @@ -2,7 +2,8 @@ import React from 'react'; import Main from '@/components/Main'; import { showError } from '@/components/error/ErrorBoundary'; import { checkForCustomControls } from '@/utils/windowControls'; -import { logToConsole } from './utils/logUtils'; +import { logToConsole } from '@/utils/logUtils'; +import { manageBackgroundZIndex } from '@/utils/backgroundUtils'; async function main() { try { @@ -48,6 +49,8 @@ async function main() { document.querySelector('.Root__globalNav') ); + manageBackgroundZIndex(); + // check for custom controls checkForCustomControls(); diff --git a/extension/src/components/Main.tsx b/extension/src/components/Main.tsx index 51794430..cfe12121 100644 --- a/extension/src/components/Main.tsx +++ b/extension/src/components/Main.tsx @@ -96,6 +96,7 @@ const Main = () => { React.useEffect(() => { window.pageCategory = pageCategory; document.body.classList.add(pageCategory); + return () => { document.body.classList.remove(pageCategory); }; diff --git a/extension/src/utils/backgroundUtils.ts b/extension/src/utils/backgroundUtils.ts new file mode 100644 index 00000000..8bdc10cc --- /dev/null +++ b/extension/src/utils/backgroundUtils.ts @@ -0,0 +1,58 @@ +export const manageBackgroundZIndex = () => { + type BackgroundContainer = HTMLDivElement | null; + + function applyBackgroundStyles() { + const lyricsCinemaContainer: BackgroundContainer = document.querySelector( + '#lyrics-cinema:has(.lyrics-lyrics-contentContainer)' + ); + + if (lyricsCinemaContainer) { + const backgroundContainer: BackgroundContainer = document.querySelector( + '#lucid-main .background-container .background-wrapper div' + ); + + if (backgroundContainer) { + backgroundContainer.style.zIndex = + 'calc(var(--above-everything-except-now-playing-bar-z-index, 6) - 1)'; + } else { + removeBackgroundZIndex(); + } + } else { + removeBackgroundZIndex(); + } + } + + function removeBackgroundZIndex() { + const backgroundContainer: BackgroundContainer = document.querySelector( + '#lucid-main .background-container .background-wrapper div' + ); + + if (backgroundContainer) { + backgroundContainer.style.zIndex = ''; + } + } + + const observer = new MutationObserver((mutations) => { + for (const mutation of mutations) { + if ( + mutation.target instanceof HTMLElement && + mutation.target.id === 'lyrics-cinema' + ) { + applyBackgroundStyles(); + } else { + if ( + mutation.target instanceof HTMLElement && + mutation.target.classList.contains('lyrics-lyrics-contentContainer') + ) { + applyBackgroundStyles(); + } + } + } + }); + + const config = { childList: true, attributes: true, subtree: true }; + + observer.observe(document.body, config); + + applyBackgroundStyles(); +}; diff --git a/src/theme.js b/src/theme.js index e241341d..41d0d5c5 100644 --- a/src/theme.js +++ b/src/theme.js @@ -1,9 +1,9 @@ -(async()=>{for(;!Spicetify.React||!Spicetify.ReactDOM;)await new Promise(e=>setTimeout(e,10));var A,l,j,D,T,U,z,V,F,H,G,x,O,e,t,r,q,a,W,K,Z,X,s,J,o,L,Y,Q,ee,n,te,ae,re,ne,le,oe,i,ie,se,c,ce,ue,de,me,pe,fe,ye,ve,u,ge,be,he,we,Ee,v,Se,ke,d,_e,xe,m,Oe,p,f,Le,y,Ce,g,b,h,w,E,S,Me,Pe,k,Re,Ie,Ne,_,Be,$e,Ae,je,C,De,Te,Ue,M,ze,Ve,Fe,P,He,R,Ge,qe,We,I,Ke,Ze,Xe,Je,N,Ye,Qe,et;async function tt(){var e,t,a;window.isCustomControls||(a=Q(),e=ee(),a=Math.round(a**.912872807*100/100-3),await Spicetify.CosmosAsync.post("sp://messages/v1/container/control",{type:"update_titlebar",height:a}),a=n(64,e,1),t=n(135,e,1),window.rootStyle.setProperty("--top-bar-padding-start",a+"px"),window.rootStyle.setProperty("--top-bar-padding-end",t+"px"),!window.isWindows)||window.isCustomControls||window.isLightMode||(a=n(135,e,1),window.rootStyle.setProperty("--control-height","64px"),window.rootStyle.setProperty("--control-width",a+"px"))}function at(e,t,a){return"#"+(e<<16|t<<8|a).toString(16).padStart(6,"0")}function rt(e,t,a){var[e,t,a]=[e/255,t/255,a/255],[e,t,a]=[e<=.03928?e/12.92:((e+.055)/1.055)**2.4,t<=.03928?t/12.92:((t+.055)/1.055)**2.4,a<=.03928?a/12.92:((a+.055)/1.055)**2.4];return.2126*e+.7152*t+.0722*a}function B(e,t){var a=Math.max(0,Math.round(e.r*t)),r=Math.max(0,Math.round(e.g*t)),t=Math.max(0,Math.round(e.b*t));return O(x({},e),{r:a,g:r,b:t,hex:at(a,r,t)})}function $(e,t){var a=Math.min(255,Math.round(e.r+(255-e.r)*t)),r=Math.min(255,Math.round(e.g+(255-e.g)*t)),t=Math.min(255,Math.round(e.b+(255-e.b)*t));return O(x({},e),{r:a,g:r,b:t,hex:at(a,r,t)})}function nt(e,t){e=rt(e.r,e.g,e.b),t=rt(t.r,t.g,t.b);return(Math.max(e,t)+.05)/(Math.min(e,t)+.05)}async function lt(n){try{var l=await(0,pe.loadImage)(n),o=Math.max(l.width/20,10),i=Math.max(l.height/20,10),s=(0,pe.createCanvas)(o,i).getContext("2d"),c=(s.drawImage(l,0,0,o,i),s.getImageData(0,0,o,i)),u=c.data,d={};let t={};var m=Math.floor(.2*u.length);for(let e=0;et[1]-e[1]).map(([e])=>t[e]),b=g[0];let e=g[1],a=g[2],r=2;for(;!e||nt(b,e)<2.5;){if(r>=g.length){e=$(b,.2);break}e=g[r],r++}for(;!a||nt(b,a)<2.5||nt(e,a)<2.5;){if(r>=g.length){a=$(e,.2);break}a=g[r],r++}var h,w={main:B(b,.9),sidebar:B(e,.9),card:B(a,.9),player:B(e,.9),accent:$(b,.4),highlight:$(e,.2),button:$(a,.4),"button-active":$(a,.4),text:$(b,1),subtext:$(b,.9),primary:b,secondary:e,tertiary:a};for(h of[w.main,w.sidebar,w.card]).3t in e?l(e,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[t]=a,x=(e,t)=>{for(var a in t=t||{})F.call(t,a)&&G(e,a,t[a]);if(z)for(var a of z(t))H.call(t,a)&&G(e,a,t[a]);return e},O=(e,t)=>j(e,T(t)),t=(e,t,a)=>(a=null!=e?A(V(e)):{},((t,a,r,n)=>{if(a&&"object"==typeof a||"function"==typeof a)for(let e of U(a))F.call(t,e)||e===r||l(t,e,{get:()=>a[e],enumerable:!(n=D(a,e))||n.enumerable});return t})(!t&&e&&e.__esModule?a:l(a,"default",{value:e,enumerable:!0}),e)),r=(e=(e,t)=>function(){return t||(0,e[U(e)[0]])((t={exports:{}}).exports,t),t.exports})({"external-global-plugin:react"(e,t){t.exports=Spicetify.React}}),q=e({"node_modules/canvas/lib/parse-font.js"(e,t){var a=`'([^']+)'|"([^"]+)"|[\\w\\s-]+`,n=new RegExp("(bold|bolder|lighter|[1-9]00) +","i"),l=new RegExp("(italic|oblique) +","i"),o=new RegExp("(small-caps) +","i"),i=new RegExp("(ultra-condensed|extra-condensed|condensed|semi-condensed|semi-expanded|expanded|extra-expanded|ultra-expanded) +","i"),s=new RegExp(`([\\d\\.]+)(px|pt|pc|in|cm|mm|%|em|ex|ch|rem|q) *((?:${a})( *, *(?:${a}))*)`),c={};t.exports=e=>{if(c[e])return c[e];var t=s.exec(e);if(t){var a,r={weight:"normal",style:"normal",stretch:"normal",variant:"normal",size:parseFloat(t[1]),unit:t[2],family:t[3].replace(/["']/g,"").replace(/ *, */g,",")},t=e.substring(0,t.index);switch((a=n.exec(t))&&(r.weight=a[1]),(a=l.exec(t))&&(r.style=a[1]),(a=o.exec(t))&&(r.variant=a[1]),(a=i.exec(t))&&(r.stretch=a[1]),r.unit){case"pt":r.size/=.75;break;case"pc":r.size*=16;break;case"in":r.size*=96;break;case"cm":r.size*=96/2.54;break;case"mm":r.size*=96/25.4;break;case"%":break;case"em":case"rem":r.size*=16/.75;break;case"q":r.size*=96/25.4/4}return c[e]=r}}}}),a=e({"node_modules/canvas/browser.js"(e){var t=q();e.parseFont=t,e.createCanvas=function(e,t){return Object.assign(document.createElement("canvas"),{width:e,height:t})},e.createImageData=function(e,t,a){switch(arguments.length){case 0:return new ImageData;case 1:return new ImageData(e);case 2:return new ImageData(e,t);default:return new ImageData(e,t,a)}},e.loadImage=function(n,l){return new Promise(function(e,t){let a=Object.assign(document.createElement("img"),l);function r(){a.onload=null,a.onerror=null}a.onload=function(){r(),e(a)},a.onerror=function(){r(),t(new Error('Failed to load the image "'+n+'"'))},a.src=n})}}}),W=e({"node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js"(e){function i(e){for(var t=arguments.length,a=new Array(1{var{level:t="info",styles:r=""}=t;let n=r;switch(t){case"error":n=o.error+" "+r;break;case"warn":n=o.warn+" "+r}J("%c[Lucid] %c"+e,o.prefix,n,...a)},Y=async()=>{var t,a,r,n,l,o,i,s,c,u,d;try{var e=Spicetify.Platform.History.location.pathname,m=Spicetify.URI.isPlaylistV1OrV2(e),p=Spicetify.URI.isArtist(e),f=Spicetify.URI.isAlbum(e),y=Spicetify.URI.isShow(e),v=Spicetify.URI.isProfile(e);if(m||p||f||v||y){var g,b=e.match(/\/(?:playlist|artist|album|user|show)\/([^/]+)/)[1],h=`spotify:${m?"playlist":p?"artist":f?"album":y?"show":"user"}:`+b;if(!window.playlistArtUrl||window.playlistArtUrl.uri!==h||!window.playlistArtUrl.url){let e="";if(m||y){var w=await Spicetify.Platform.PlaylistAPI.getMetadata(h);e=null==(t=w.images.find(e=>e.url))?void 0:t.url}else if(p){var E=await Spicetify.GraphQL.Request({name:"queryArtistOverview",operation:"query",sha256Hash:"35648a112beb1794e39ab931365f6ae4a8d45e65396d641eeda94e4003d41497",value:null},{uri:h,includePrerelease:!0,locale:null});if(!E.data)return;e=(null==(n=null==(r=null==(a=E.data.artistUnion.visuals.headerImage)?void 0:a.sources)?void 0:r[0])?void 0:n.url)||(null==(i=null==(o=null==(l=E.data.artistUnion.visuals.avatarImage)?void 0:l.sources)?void 0:o[0])?void 0:i.url)}else if(f){var S=await Spicetify.GraphQL.Request({name:"getAlbum",operation:"query",sha256Hash:"469874edcad37b7a379d4f22f0083a49ea3d6ae097916120d9bbe3e36ca79e9d",value:null},{uri:h,locale:null,offset:0,limit:50});if(!S.data)return;e=(null==(c=null==(s=S.data.albumUnion.coverArt.sources)?void 0:s[2])?void 0:c.url)||(null==(d=null==(u=S.data.albumUnion.coverArt.sources)?void 0:u[0])?void 0:d.url)}else v?null!=(g=await Spicetify.Platform.RequestBuilder.build().withHost("https://spclient.wg.spotify.com/user-profile-view/v3").withPath("/profile/"+b).send())&&g.body&&(e=g.body.image_url):e="";window.playlistArtUrl={url:e,uri:h}}window.playlistArtUrl.url?window.rootStyle.setProperty("--playlist-art-image",`url(${window.playlistArtUrl.url})`):L("No playlist/artist artwork URL found for URI: "+h,{level:"warn"})}}catch(e){L("Error fetching playlist/artist artwork: "+e)}},Q=()=>{var e=window.innerWidth;return window.outerWidth/e*100},ee=()=>window.innerWidth/window.outerWidth,n=(e,t,a=1,r=0,n=Number.POSITIVE_INFINITY)=>Math.max(r,Math.min(e*(t+a-1),n)),te=t(r()),ae=Spicetify.React.createContext(null),re=({children:e})=>{let[t,a]=te.default.useState(!1);return te.default.createElement(ae.Provider,{value:{isOpen:t,openModal:()=>a(!0),closeModal:()=>a(!1)}},e)},ne=()=>{var e=Spicetify.React.useContext(ae);if(e)return e;throw new Error("Wrap Element with ModalContextProvider")},le=t(r()),oe=()=>{var e=le.default.useRef(null);return le.default.createElement("div",{ref:e,className:"lucid-transperent-window-controls"})},i=t(r()),ie=t(r()),se=()=>ie.default.createElement("div",{className:"static-background"}),c=t(r()),ce=()=>c.default.createElement("div",{className:"animated-background-container"},c.default.createElement("div",{className:"back"}),c.default.createElement("div",{className:"backleft"}),c.default.createElement("div",{className:"backright"}),c.default.createElement("div",{className:"front"})),ue=t(r()),de=()=>ue.default.createElement("div",{className:"solid-background"}),me=t(r()),pe=t(a()),fe={},ye=e=>{let r,n=new Set;var t=(e,a)=>{e="function"==typeof e?e(r):e;if(!Object.is(e,r)){let t=r;r=(null!=a?a:"object"!=typeof e||null===e)?e:Object.assign({},r,e),n.forEach(e=>e(r,t))}},a=()=>r,l={setState:t,getState:a,getInitialState:()=>o,subscribe:e=>(n.add(e),()=>n.delete(e)),destroy:()=>{"production"!==(fe.env?fe.env.MODE:void 0)&&console.warn("[DEPRECATED] The `destroy` method will be unsupported in a future version. Instead use unsubscribe function returned by subscribe. Everything will be garbage-collected if store is garbage-collected."),n.clear()}};let o=r=e(t,a,l);return l},ve=e=>e?ye(e):ye,a=t(r(),1),e=t(e(),1),u={},ge=a.default.useDebugValue,be=e.default.useSyncExternalStoreWithSelector,he=!1,we=e=>e,a=e=>{"production"!==(u.env?u.env.MODE:void 0)&&"function"!=typeof e&&console.warn("[DEPRECATED] Passing a vanilla store will be unsupported in a future version. Instead use `import { useStore } from 'zustand'`.");let r="function"==typeof e?ve(e):e;e=(e,t)=>{return[e,t=we,a]=[r,e,t],"production"!==(u.env?u.env.MODE:void 0)&&a&&!he&&(console.warn("[DEPRECATED] Use `createWithEqualityFn` instead of `create` or use `useStoreWithEqualityFn` instead of `useStore`. They can be imported from 'zustand/traditional'. https://github.com/pmndrs/zustand/discussions/1937"),he=!0),e=be(e.subscribe,e.getState,e.getServerState||e.getInitialState,t,a),ge(e),e;var a};return Object.assign(e,r),e},Ee={},v=a=>e=>{try{let t=a(e);return t instanceof Promise?t:{then(e){return v(e)(t)},catch(e){return this}}}catch(t){return{then(e){return this},catch(e){return v(e)(t)}}}},ke={backgroundMode:"static",backgroundStyles:{solid:{opacity:1,backgroundColor:"var(--spice-main)"},static:{blur:32,opacity:1,saturation:1.1,contrast:1.2,brightness:.6,backgroundColor:"var(--spice-main)"},animated:{blur:32,time:45,opacity:1,saturation:1.1,contrast:1.2,brightness:.6,backgroundColor:"var(--spice-main)"}},grainEffect:"stary",isDynamicColor:!(Se=(p,f)=>(a,r,e)=>{let n={storage:((e,a)=>{let r;try{r=e()}catch(e){return}return{getItem:e=>{var t=e=>null===e?null:JSON.parse(e,null==a?void 0:a.reviver),e=null!=(e=r.getItem(e))?e:null;return e instanceof Promise?e.then(t):t(e)},setItem:(e,t)=>r.setItem(e,JSON.stringify(t,null==a?void 0:a.replacer)),removeItem:e=>r.removeItem(e)}})(()=>localStorage),partialize:e=>e,version:0,merge:(e,t)=>({...t,...e}),...f},l=!1,o=new Set,i=new Set,s=n.storage;if(!s)return p((...e)=>{console.warn(`[zustand persist middleware] Unable to update item '${n.name}', the given storage is currently unavailable.`),a(...e)},r,e);let c=()=>{var e=n.partialize({...r()});return s.setItem(n.name,{state:e,version:n.version})},u=e.setState,d=(e.setState=(e,t)=>{u(e,t),c()},p((...e)=>{a(...e),c()},r,e));e.getInitialState=()=>d;let m,t=()=>{var e;if(s){l=!1,o.forEach(e=>e(null!=(e=r())?e:d));let t=(null==(e=n.onRehydrateStorage)?void 0:e.call(n,null!=(e=r())?e:d))||void 0;return v(s.getItem.bind(s))(n.name).then(e=>{if(e){if("number"!=typeof e.version||e.version===n.version)return[!1,e.state];if(n.migrate)return[!0,n.migrate(e.state,e.version)];console.error("State loaded from storage couldn't be migrated since no migrate function was provided")}return[!1,void 0]}).then(e=>{var[e,t]=e;if(m=n.merge(t,null!=(t=r())?t:d),a(m,!0),e)return c()}).then(()=>{null!=t&&t(m,void 0),m=r(),l=!0,i.forEach(e=>e(m))}).catch(e=>{null!=t&&t(void 0,e)})}};return e.persist={setOptions:e=>{n={...n,...e},e.storage&&(s=e.storage)},clearStorage:()=>{null!=s&&s.removeItem(n.name)},getOptions:()=>n,rehydrate:()=>t(),hasHydrated:()=>l,onHydrate:e=>(o.add(e),()=>{o.delete(e)}),onFinishHydration:e=>(i.add(e),()=>{i.delete(e)})},n.skipHydration||t(),m||d}),playlistImageMode:"inherit",playbarMode:"default",playbarStyles:{compact:{opacity:1,saturation:1.1,contrast:1.2,brightness:.8,borderRadius:8,backdropBlur:32,paddingX:6,backgroundColor:"rgba(var(--spice-rgb-card), 0.5)"},default:{opacity:1,paddingX:6,saturation:1.1,contrast:1.2,borderRadius:8,brightness:.8,backdropBlur:32,backgroundColor:"rgba(var(--spice-rgb-card), 0.5)"}},fontFamily:"Poppins",fontImportUrl:"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap",playlistViewMode:"card"},d=(e=((e,t)=>{var f,y;return"getStorage"in t||"serialize"in t||"deserialize"in t?("production"!==(Ee.env?Ee.env.MODE:void 0)&&console.warn("[DEPRECATED] `getStorage`, `serialize` and `deserialize` options are deprecated. Use `storage` option instead."),f=e,y=t,(a,r,e)=>{let n={getStorage:()=>localStorage,serialize:JSON.stringify,deserialize:JSON.parse,partialize:e=>e,version:0,merge:(e,t)=>({...t,...e}),...y},l=!1,o=new Set,i=new Set,s;try{s=n.getStorage()}catch(e){}if(!s)return f((...e)=>{console.warn(`[zustand persist middleware] Unable to update item '${n.name}', the given storage is currently unavailable.`),a(...e)},r,e);let c=v(n.serialize),u=()=>{var e=n.partialize({...r()});let t;e=c({state:e,version:n.version}).then(e=>s.setItem(n.name,e)).catch(e=>{t=e});if(t)throw t;return e},d=e.setState,m=(e.setState=(e,t)=>{d(e,t),u()},f((...e)=>{a(...e),u()},r,e)),p,t=()=>{var e;if(s){l=!1,o.forEach(e=>e(r()));let t=(null==(e=n.onRehydrateStorage)?void 0:e.call(n,r()))||void 0;return v(s.getItem.bind(s))(n.name).then(e=>{if(e)return n.deserialize(e)}).then(e=>{if(e)return"number"!=typeof e.version||e.version===n.version?e.state:n.migrate?n.migrate(e.state,e.version):void console.error("State loaded from storage couldn't be migrated since no migrate function was provided")}).then(e=>(p=n.merge(e,null!=(e=r())?e:m),a(p,!0),u())).then(()=>{null!=t&&t(p,void 0),l=!0,i.forEach(e=>e(p))}).catch(e=>{null!=t&&t(void 0,e)})}};return e.persist={setOptions:e=>{n={...n,...e},e.getStorage&&(s=e.getStorage())},clearStorage:()=>{null!=s&&s.removeItem(n.name)},getOptions:()=>n,rehydrate:()=>t(),hasHydrated:()=>l,onHydrate:e=>(o.add(e),()=>{o.delete(e)}),onFinishHydration:e=>(i.add(e),()=>{i.delete(e)})},t(),p||m}):Se(e,t)})(n=>O(x({},ke),{setBackgroundMode:e=>n(()=>({backgroundMode:e})),setFontFamily:e=>n(()=>({fontFamily:e})),setFontImportUrl:e=>n(()=>({fontImportUrl:e})),setGrainEffect:e=>n(()=>({grainEffect:e})),setPlaylistImageMode:e=>n(()=>({playlistImageMode:e})),setPlaybarMode:e=>n(()=>({playbarMode:e})),setPlaylistViewMode:e=>n(()=>({playlistViewMode:e})),setDynamicColor:e=>n(()=>({isDynamicColor:e})),updateBackgroundStyles:(t,a,r)=>{n(e=>O(x({},e),{backgroundStyles:O(x({},e.backgroundStyles),{[t]:O(x({},e.backgroundStyles[t]),{[a]:r})})}))},updatePlaybarStyles:(t,a,r)=>{n(e=>O(x({},e),{playbarStyles:O(x({},e.playbarStyles),{[t]:O(x({},e.playbarStyles[t]),{[a]:r})})}))},resetSettings:()=>{n(ke)}}),{name:"lucid-settings"}))?a(e):a,_e=()=>{let t=d().isDynamicColor,a=me.default.useRef(null);return Spicetify.React.useEffect(()=>{a.current||(a.current=document.createElement("style"),a.current.id="lucid_dynamic_colors",document.head.appendChild(a.current));let e=async()=>{a.current&&window.currentArtUrl&&t&&(await(async(e,t)=>{if(!t||!window.currentArtUrl)return null;try{var a,r=await lt(window.currentArtUrl);return r instanceof Error?(L("Error extracting colors: "+r.message),null):(a=` +(async()=>{for(;!Spicetify.React||!Spicetify.ReactDOM;)await new Promise(e=>setTimeout(e,10));var A,l,j,D,T,z,U,V,F,H,q,x,L,e,t,r,G,a,W,K,Z,X,s,J,o,O,Y,Q,ee,n,te,ae,re,ne,le,oe,i,ie,se,c,ce,ue,de,me,pe,fe,ye,ve,u,ge,be,he,we,Ee,v,Se,ke,d,_e,xe,m,Le,p,f,Oe,y,Ce,g,b,h,w,E,S,Me,Pe,k,Ie,Re,Ne,_,Be,$e,Ae,je,C,De,Te,ze,M,Ue,Ve,Fe,P,He,I,qe,Ge,We,R,Ke,Ze,Xe,Je,N,Ye,Qe,et;async function tt(){var e,t,a;window.isCustomControls||(a=Q(),e=ee(),a=Math.round(a**.912872807*100/100-3),await Spicetify.CosmosAsync.post("sp://messages/v1/container/control",{type:"update_titlebar",height:a}),a=n(64,e,1),t=n(135,e,1),window.rootStyle.setProperty("--top-bar-padding-start",a+"px"),window.rootStyle.setProperty("--top-bar-padding-end",t+"px"),!window.isWindows)||window.isCustomControls||window.isLightMode||(a=n(135,e,1),window.rootStyle.setProperty("--control-height","64px"),window.rootStyle.setProperty("--control-width",a+"px"))}function at(e,t,a){return"#"+(e<<16|t<<8|a).toString(16).padStart(6,"0")}function rt(e,t,a){var[e,t,a]=[e/255,t/255,a/255],[e,t,a]=[e<=.03928?e/12.92:((e+.055)/1.055)**2.4,t<=.03928?t/12.92:((t+.055)/1.055)**2.4,a<=.03928?a/12.92:((a+.055)/1.055)**2.4];return.2126*e+.7152*t+.0722*a}function B(e,t){var a=Math.max(0,Math.round(e.r*t)),r=Math.max(0,Math.round(e.g*t)),t=Math.max(0,Math.round(e.b*t));return L(x({},e),{r:a,g:r,b:t,hex:at(a,r,t)})}function $(e,t){var a=Math.min(255,Math.round(e.r+(255-e.r)*t)),r=Math.min(255,Math.round(e.g+(255-e.g)*t)),t=Math.min(255,Math.round(e.b+(255-e.b)*t));return L(x({},e),{r:a,g:r,b:t,hex:at(a,r,t)})}function nt(e,t){e=rt(e.r,e.g,e.b),t=rt(t.r,t.g,t.b);return(Math.max(e,t)+.05)/(Math.min(e,t)+.05)}async function lt(n){try{var l=await(0,pe.loadImage)(n),o=Math.max(l.width/20,10),i=Math.max(l.height/20,10),s=(0,pe.createCanvas)(o,i).getContext("2d"),c=(s.drawImage(l,0,0,o,i),s.getImageData(0,0,o,i)),u=c.data,d={};let t={};var m=Math.floor(.2*u.length);for(let e=0;et[1]-e[1]).map(([e])=>t[e]),b=g[0];let e=g[1],a=g[2],r=2;for(;!e||nt(b,e)<2.5;){if(r>=g.length){e=$(b,.2);break}e=g[r],r++}for(;!a||nt(b,a)<2.5||nt(e,a)<2.5;){if(r>=g.length){a=$(e,.2);break}a=g[r],r++}var h,w={main:B(b,.9),sidebar:B(e,.9),card:B(a,.9),player:B(e,.9),accent:$(b,.4),highlight:$(e,.2),button:$(a,.4),"button-active":$(a,.4),text:$(b,1),subtext:$(b,.9),primary:b,secondary:e,tertiary:a};for(h of[w.main,w.sidebar,w.card]).3t in e?l(e,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[t]=a,x=(e,t)=>{for(var a in t=t||{})F.call(t,a)&&q(e,a,t[a]);if(U)for(var a of U(t))H.call(t,a)&&q(e,a,t[a]);return e},L=(e,t)=>j(e,T(t)),t=(e,t,a)=>(a=null!=e?A(V(e)):{},((t,a,r,n)=>{if(a&&"object"==typeof a||"function"==typeof a)for(let e of z(a))F.call(t,e)||e===r||l(t,e,{get:()=>a[e],enumerable:!(n=D(a,e))||n.enumerable});return t})(!t&&e&&e.__esModule?a:l(a,"default",{value:e,enumerable:!0}),e)),r=(e=(e,t)=>function(){return t||(0,e[z(e)[0]])((t={exports:{}}).exports,t),t.exports})({"external-global-plugin:react"(e,t){t.exports=Spicetify.React}}),G=e({"node_modules/canvas/lib/parse-font.js"(e,t){var a=`'([^']+)'|"([^"]+)"|[\\w\\s-]+`,n=new RegExp("(bold|bolder|lighter|[1-9]00) +","i"),l=new RegExp("(italic|oblique) +","i"),o=new RegExp("(small-caps) +","i"),i=new RegExp("(ultra-condensed|extra-condensed|condensed|semi-condensed|semi-expanded|expanded|extra-expanded|ultra-expanded) +","i"),s=new RegExp(`([\\d\\.]+)(px|pt|pc|in|cm|mm|%|em|ex|ch|rem|q) *((?:${a})( *, *(?:${a}))*)`),c={};t.exports=e=>{if(c[e])return c[e];var t=s.exec(e);if(t){var a,r={weight:"normal",style:"normal",stretch:"normal",variant:"normal",size:parseFloat(t[1]),unit:t[2],family:t[3].replace(/["']/g,"").replace(/ *, */g,",")},t=e.substring(0,t.index);switch((a=n.exec(t))&&(r.weight=a[1]),(a=l.exec(t))&&(r.style=a[1]),(a=o.exec(t))&&(r.variant=a[1]),(a=i.exec(t))&&(r.stretch=a[1]),r.unit){case"pt":r.size/=.75;break;case"pc":r.size*=16;break;case"in":r.size*=96;break;case"cm":r.size*=96/2.54;break;case"mm":r.size*=96/25.4;break;case"%":break;case"em":case"rem":r.size*=16/.75;break;case"q":r.size*=96/25.4/4}return c[e]=r}}}}),a=e({"node_modules/canvas/browser.js"(e){var t=G();e.parseFont=t,e.createCanvas=function(e,t){return Object.assign(document.createElement("canvas"),{width:e,height:t})},e.createImageData=function(e,t,a){switch(arguments.length){case 0:return new ImageData;case 1:return new ImageData(e);case 2:return new ImageData(e,t);default:return new ImageData(e,t,a)}},e.loadImage=function(n,l){return new Promise(function(e,t){let a=Object.assign(document.createElement("img"),l);function r(){a.onload=null,a.onerror=null}a.onload=function(){r(),e(a)},a.onerror=function(){r(),t(new Error('Failed to load the image "'+n+'"'))},a.src=n})}}}),W=e({"node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js"(e){function i(e){for(var t=arguments.length,a=new Array(1{var{level:t="info",styles:r=""}=t;let n=r;switch(t){case"error":n=o.error+" "+r;break;case"warn":n=o.warn+" "+r}J("%c[Lucid] %c"+e,o.prefix,n,...a)},Y=async()=>{var t,a,r,n,l,o,i,s,c,u,d;try{var e=Spicetify.Platform.History.location.pathname,m=Spicetify.URI.isPlaylistV1OrV2(e),p=Spicetify.URI.isArtist(e),f=Spicetify.URI.isAlbum(e),y=Spicetify.URI.isShow(e),v=Spicetify.URI.isProfile(e);if(m||p||f||v||y){var g,b=e.match(/\/(?:playlist|artist|album|user|show)\/([^/]+)/)[1],h=`spotify:${m?"playlist":p?"artist":f?"album":y?"show":"user"}:`+b;if(!window.playlistArtUrl||window.playlistArtUrl.uri!==h||!window.playlistArtUrl.url){let e="";if(m||y){var w=await Spicetify.Platform.PlaylistAPI.getMetadata(h);e=null==(t=w.images.find(e=>e.url))?void 0:t.url}else if(p){var E=await Spicetify.GraphQL.Request({name:"queryArtistOverview",operation:"query",sha256Hash:"35648a112beb1794e39ab931365f6ae4a8d45e65396d641eeda94e4003d41497",value:null},{uri:h,includePrerelease:!0,locale:null});if(!E.data)return;e=(null==(n=null==(r=null==(a=E.data.artistUnion.visuals.headerImage)?void 0:a.sources)?void 0:r[0])?void 0:n.url)||(null==(i=null==(o=null==(l=E.data.artistUnion.visuals.avatarImage)?void 0:l.sources)?void 0:o[0])?void 0:i.url)}else if(f){var S=await Spicetify.GraphQL.Request({name:"getAlbum",operation:"query",sha256Hash:"469874edcad37b7a379d4f22f0083a49ea3d6ae097916120d9bbe3e36ca79e9d",value:null},{uri:h,locale:null,offset:0,limit:50});if(!S.data)return;e=(null==(c=null==(s=S.data.albumUnion.coverArt.sources)?void 0:s[2])?void 0:c.url)||(null==(d=null==(u=S.data.albumUnion.coverArt.sources)?void 0:u[0])?void 0:d.url)}else v?null!=(g=await Spicetify.Platform.RequestBuilder.build().withHost("https://spclient.wg.spotify.com/user-profile-view/v3").withPath("/profile/"+b).send())&&g.body&&(e=g.body.image_url):e="";window.playlistArtUrl={url:e,uri:h}}window.playlistArtUrl.url?window.rootStyle.setProperty("--playlist-art-image",`url(${window.playlistArtUrl.url})`):O("No playlist/artist artwork URL found for URI: "+h,{level:"warn"})}}catch(e){O("Error fetching playlist/artist artwork: "+e)}},Q=()=>{var e=window.innerWidth;return window.outerWidth/e*100},ee=()=>window.innerWidth/window.outerWidth,n=(e,t,a=1,r=0,n=Number.POSITIVE_INFINITY)=>Math.max(r,Math.min(e*(t+a-1),n)),te=t(r()),ae=Spicetify.React.createContext(null),re=({children:e})=>{let[t,a]=te.default.useState(!1);return te.default.createElement(ae.Provider,{value:{isOpen:t,openModal:()=>a(!0),closeModal:()=>a(!1)}},e)},ne=()=>{var e=Spicetify.React.useContext(ae);if(e)return e;throw new Error("Wrap Element with ModalContextProvider")},le=t(r()),oe=()=>{var e=le.default.useRef(null);return le.default.createElement("div",{ref:e,className:"lucid-transperent-window-controls"})},i=t(r()),ie=t(r()),se=()=>ie.default.createElement("div",{className:"static-background"}),c=t(r()),ce=()=>c.default.createElement("div",{className:"animated-background-container"},c.default.createElement("div",{className:"back"}),c.default.createElement("div",{className:"backleft"}),c.default.createElement("div",{className:"backright"}),c.default.createElement("div",{className:"front"})),ue=t(r()),de=()=>ue.default.createElement("div",{className:"solid-background"}),me=t(r()),pe=t(a()),fe={},ye=e=>{let r,n=new Set;var t=(e,a)=>{e="function"==typeof e?e(r):e;if(!Object.is(e,r)){let t=r;r=(null!=a?a:"object"!=typeof e||null===e)?e:Object.assign({},r,e),n.forEach(e=>e(r,t))}},a=()=>r,l={setState:t,getState:a,getInitialState:()=>o,subscribe:e=>(n.add(e),()=>n.delete(e)),destroy:()=>{"production"!==(fe.env?fe.env.MODE:void 0)&&console.warn("[DEPRECATED] The `destroy` method will be unsupported in a future version. Instead use unsubscribe function returned by subscribe. Everything will be garbage-collected if store is garbage-collected."),n.clear()}};let o=r=e(t,a,l);return l},ve=e=>e?ye(e):ye,a=t(r(),1),e=t(e(),1),u={},ge=a.default.useDebugValue,be=e.default.useSyncExternalStoreWithSelector,he=!1,we=e=>e,a=e=>{"production"!==(u.env?u.env.MODE:void 0)&&"function"!=typeof e&&console.warn("[DEPRECATED] Passing a vanilla store will be unsupported in a future version. Instead use `import { useStore } from 'zustand'`.");let r="function"==typeof e?ve(e):e;e=(e,t)=>{return[e,t=we,a]=[r,e,t],"production"!==(u.env?u.env.MODE:void 0)&&a&&!he&&(console.warn("[DEPRECATED] Use `createWithEqualityFn` instead of `create` or use `useStoreWithEqualityFn` instead of `useStore`. They can be imported from 'zustand/traditional'. https://github.com/pmndrs/zustand/discussions/1937"),he=!0),e=be(e.subscribe,e.getState,e.getServerState||e.getInitialState,t,a),ge(e),e;var a};return Object.assign(e,r),e},Ee={},v=a=>e=>{try{let t=a(e);return t instanceof Promise?t:{then(e){return v(e)(t)},catch(e){return this}}}catch(t){return{then(e){return this},catch(e){return v(e)(t)}}}},ke={backgroundMode:"static",backgroundStyles:{solid:{opacity:1,backgroundColor:"var(--spice-main)"},static:{blur:32,opacity:1,saturation:1.1,contrast:1.2,brightness:.6,backgroundColor:"var(--spice-main)"},animated:{blur:32,time:45,opacity:1,saturation:1.1,contrast:1.2,brightness:.6,backgroundColor:"var(--spice-main)"}},grainEffect:"stary",isDynamicColor:!(Se=(p,f)=>(a,r,e)=>{let n={storage:((e,a)=>{let r;try{r=e()}catch(e){return}return{getItem:e=>{var t=e=>null===e?null:JSON.parse(e,null==a?void 0:a.reviver),e=null!=(e=r.getItem(e))?e:null;return e instanceof Promise?e.then(t):t(e)},setItem:(e,t)=>r.setItem(e,JSON.stringify(t,null==a?void 0:a.replacer)),removeItem:e=>r.removeItem(e)}})(()=>localStorage),partialize:e=>e,version:0,merge:(e,t)=>({...t,...e}),...f},l=!1,o=new Set,i=new Set,s=n.storage;if(!s)return p((...e)=>{console.warn(`[zustand persist middleware] Unable to update item '${n.name}', the given storage is currently unavailable.`),a(...e)},r,e);let c=()=>{var e=n.partialize({...r()});return s.setItem(n.name,{state:e,version:n.version})},u=e.setState,d=(e.setState=(e,t)=>{u(e,t),c()},p((...e)=>{a(...e),c()},r,e));e.getInitialState=()=>d;let m,t=()=>{var e;if(s){l=!1,o.forEach(e=>e(null!=(e=r())?e:d));let t=(null==(e=n.onRehydrateStorage)?void 0:e.call(n,null!=(e=r())?e:d))||void 0;return v(s.getItem.bind(s))(n.name).then(e=>{if(e){if("number"!=typeof e.version||e.version===n.version)return[!1,e.state];if(n.migrate)return[!0,n.migrate(e.state,e.version)];console.error("State loaded from storage couldn't be migrated since no migrate function was provided")}return[!1,void 0]}).then(e=>{var[e,t]=e;if(m=n.merge(t,null!=(t=r())?t:d),a(m,!0),e)return c()}).then(()=>{null!=t&&t(m,void 0),m=r(),l=!0,i.forEach(e=>e(m))}).catch(e=>{null!=t&&t(void 0,e)})}};return e.persist={setOptions:e=>{n={...n,...e},e.storage&&(s=e.storage)},clearStorage:()=>{null!=s&&s.removeItem(n.name)},getOptions:()=>n,rehydrate:()=>t(),hasHydrated:()=>l,onHydrate:e=>(o.add(e),()=>{o.delete(e)}),onFinishHydration:e=>(i.add(e),()=>{i.delete(e)})},n.skipHydration||t(),m||d}),playlistImageMode:"inherit",playbarMode:"default",playbarStyles:{compact:{opacity:1,saturation:1.1,contrast:1.2,brightness:.8,borderRadius:8,backdropBlur:32,paddingX:6,backgroundColor:"rgba(var(--spice-rgb-card), 0.5)"},default:{opacity:1,paddingX:6,saturation:1.1,contrast:1.2,borderRadius:8,brightness:.8,backdropBlur:32,backgroundColor:"rgba(var(--spice-rgb-card), 0.5)"}},fontFamily:"Poppins",fontImportUrl:"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap",playlistViewMode:"card"},d=(e=((e,t)=>{var f,y;return"getStorage"in t||"serialize"in t||"deserialize"in t?("production"!==(Ee.env?Ee.env.MODE:void 0)&&console.warn("[DEPRECATED] `getStorage`, `serialize` and `deserialize` options are deprecated. Use `storage` option instead."),f=e,y=t,(a,r,e)=>{let n={getStorage:()=>localStorage,serialize:JSON.stringify,deserialize:JSON.parse,partialize:e=>e,version:0,merge:(e,t)=>({...t,...e}),...y},l=!1,o=new Set,i=new Set,s;try{s=n.getStorage()}catch(e){}if(!s)return f((...e)=>{console.warn(`[zustand persist middleware] Unable to update item '${n.name}', the given storage is currently unavailable.`),a(...e)},r,e);let c=v(n.serialize),u=()=>{var e=n.partialize({...r()});let t;e=c({state:e,version:n.version}).then(e=>s.setItem(n.name,e)).catch(e=>{t=e});if(t)throw t;return e},d=e.setState,m=(e.setState=(e,t)=>{d(e,t),u()},f((...e)=>{a(...e),u()},r,e)),p,t=()=>{var e;if(s){l=!1,o.forEach(e=>e(r()));let t=(null==(e=n.onRehydrateStorage)?void 0:e.call(n,r()))||void 0;return v(s.getItem.bind(s))(n.name).then(e=>{if(e)return n.deserialize(e)}).then(e=>{if(e)return"number"!=typeof e.version||e.version===n.version?e.state:n.migrate?n.migrate(e.state,e.version):void console.error("State loaded from storage couldn't be migrated since no migrate function was provided")}).then(e=>(p=n.merge(e,null!=(e=r())?e:m),a(p,!0),u())).then(()=>{null!=t&&t(p,void 0),l=!0,i.forEach(e=>e(p))}).catch(e=>{null!=t&&t(void 0,e)})}};return e.persist={setOptions:e=>{n={...n,...e},e.getStorage&&(s=e.getStorage())},clearStorage:()=>{null!=s&&s.removeItem(n.name)},getOptions:()=>n,rehydrate:()=>t(),hasHydrated:()=>l,onHydrate:e=>(o.add(e),()=>{o.delete(e)}),onFinishHydration:e=>(i.add(e),()=>{i.delete(e)})},t(),p||m}):Se(e,t)})(n=>L(x({},ke),{setBackgroundMode:e=>n(()=>({backgroundMode:e})),setFontFamily:e=>n(()=>({fontFamily:e})),setFontImportUrl:e=>n(()=>({fontImportUrl:e})),setGrainEffect:e=>n(()=>({grainEffect:e})),setPlaylistImageMode:e=>n(()=>({playlistImageMode:e})),setPlaybarMode:e=>n(()=>({playbarMode:e})),setPlaylistViewMode:e=>n(()=>({playlistViewMode:e})),setDynamicColor:e=>n(()=>({isDynamicColor:e})),updateBackgroundStyles:(t,a,r)=>{n(e=>L(x({},e),{backgroundStyles:L(x({},e.backgroundStyles),{[t]:L(x({},e.backgroundStyles[t]),{[a]:r})})}))},updatePlaybarStyles:(t,a,r)=>{n(e=>L(x({},e),{playbarStyles:L(x({},e.playbarStyles),{[t]:L(x({},e.playbarStyles[t]),{[a]:r})})}))},resetSettings:()=>{n(ke)}}),{name:"lucid-settings"}))?a(e):a,_e=()=>{let t=d().isDynamicColor,a=me.default.useRef(null);return Spicetify.React.useEffect(()=>{a.current||(a.current=document.createElement("style"),a.current.id="lucid_dynamic_colors",document.head.appendChild(a.current));let e=async()=>{a.current&&window.currentArtUrl&&t&&(await(async(e,t)=>{if(!t||!window.currentArtUrl)return null;try{var a,r=await lt(window.currentArtUrl);return r instanceof Error?(O("Error extracting colors: "+r.message),null):(a=` :root { ${Object.entries(r).map(([e,t])=>`--spice-${e}: ${t.hex} !important; --spice-rgb-${e}: ${t.r}, ${t.g}, ${t.b} !important;`).join("\n")} } - `,e.textContent=a,r)}catch(e){return L("Error saving colors to style: "+(e instanceof Error?e.message:e),{level:"error"}),null}})(a.current,t),L("Dynamic colors updated!"))};if(setTimeout(()=>e(),1e3),t)return Spicetify.Player.addEventListener("songchange",e),()=>{Spicetify.Player.removeEventListener("songchange",e),a.current&&ot(a.current)};ot(a.current)},[t]),me.default.createElement("div",{id:"dynamic-colors"})},xe=()=>{let{backgroundMode:t,backgroundStyles:a}=d(),[e,r]=i.default.useState({});return i.default.useEffect(()=>{var e;r({"--background-color":null==(e=a[t])?void 0:e.backgroundColor,"--opacity":null==(e=a[t])?void 0:e.opacity,"--brightness":null==(e=a[t])?void 0:e.brightness,"--contrast":null==(e=a[t])?void 0:e.contrast,"--time":`${(null==(e=a[t])?void 0:e.time)||0}s`,"--blur":`${(null==(e=a[t])?void 0:e.blur)||0}px`,"--saturation":null==(e=a[t])?void 0:e.saturation,"--backdrop-blur":`${(null==(e=a[t])?void 0:e.backdropBlur)||0}px`})},[t,a]),i.default.createElement("div",{className:"background-wrapper",style:e},"animated"===t&&i.default.createElement(ce,null),"static"===t&&i.default.createElement(se,null),"solid"===t&&i.default.createElement(de,null),i.default.createElement(_e,null))},m=t(r()),Oe=({cb:t})=>(Spicetify.React.useEffect(()=>{let e=new Spicetify.Menu.Item("Lucid Settings",!1,()=>t(),'');return e.register(),()=>{e.deregister()}},[t]),null),p=t(r()),f=t(r()),Le=f.default.memo(({title:e,children:t,headingChild:a})=>{let{isOpen:r,closeModal:n}=ne();return r?f.default.createElement("div",{className:"modal-container"},f.default.createElement("div",{className:"modal-overlay "+(r&&"open"),style:{zIndex:20},onClick:n}),f.default.createElement("div",{className:"modal-section "+(r&&"open"),role:"dialog","aria-label":e,"aria-modal":"true"},f.default.createElement("div",{className:"main-embedWidgetGenerator-container"},f.default.createElement("div",{className:"main-trackCreditsModal-header"},f.default.createElement("h1",{className:"main-type-alto"},e),a&&f.default.createElement("div",null,a),f.default.createElement("button",{type:"button","aria-label":"Close",className:"main-trackCreditsModal-closeBtn",onClick:()=>n()},f.default.createElement("svg",{width:"18",height:"18",viewBox:"0 0 32 32",xmlns:"http://www.w3.org/2000/svg"},f.default.createElement("title",null,"Close"),f.default.createElement("path",{d:"M31.098 29.794L16.955 15.65 31.097 1.51 29.683.093 15.54 14.237 1.4.094-.016 1.508 14.126 15.65-.016 29.795l1.414 1.414L15.54 17.065l14.144 14.143",fill:"currentColor","fill-rule":"evenodd"})))),f.default.createElement("div",{className:"modal-contents"},f.default.createElement("main",{className:"modal-wrapper"},t))))):null}),y=t(r()),Ce=({title:e,description:t,children:a})=>y.default.createElement("div",{className:"setting-section"},y.default.createElement("div",{className:"heading-wrapper"},y.default.createElement("h3",{className:"title"},e),t&&y.default.createElement("p",{className:"description"},t)),y.default.createElement("div",{className:"cards-wrapper"},a)),g=t(r()),b=t(r()),h=({options:e,selectedValue:a,onSelect:r,label:t})=>{let[n,l]=b.default.useState(!1),o=b.default.useRef(null);var i=b.default.useRef(null);b.default.useEffect(()=>{let e=e=>{o.current&&!o.current.contains(e.target)&&l(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]);return b.default.createElement("div",{className:"dropdown-container",ref:o},b.default.createElement("button",{className:"dropdown-button "+(n&&"open"),onClick:()=>{l(!n)},"aria-haspopup":"listbox","aria-expanded":n,"aria-label":"Toggle dropdown menu",type:"button"},t||a,b.default.createElement("span",{className:"dropdown-arrow"},b.default.createElement("svg",{role:"img","aria-labelledby":"title",width:"24",height:"24",fill:"none",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},b.default.createElement("span",{id:"title"},"Down"),b.default.createElement("path",{d:"M4.293 8.293a1 1 0 0 1 1.414 0L12 14.586l6.293-6.293a1 1 0 1 1 1.414 1.414l-7 7a1 1 0 0 1-1.414 0l-7-7a1 1 0 0 1 0-1.414Z",fill:"#ffffff"})))),n&&b.default.createElement("ul",{className:"dropdown-menu","aria-label":"Dropdown menu",ref:i},e.map(t=>b.default.createElement("li",{key:t.value,onClick:()=>{return e=t.value,r(e),void l(!1);var e},className:a===t.value?"dropdown-item selected":"dropdown-item","aria-selected":a===t.value,tabIndex:-1},t.label))))},w=t(r()),E=({title:e,tooltip:t,selectedValue:a,children:r})=>w.default.createElement("div",{className:"card"},w.default.createElement("div",{className:"title-container"},w.default.createElement("div",{className:"title-wrapper"},e&&w.default.createElement("h5",{className:"title"},e),t&&w.default.createElement("div",{className:"tooltip-container"},w.default.createElement("div",{className:"tooltip"},w.default.createElement("span",{className:"tooltip-icon"},w.default.createElement("svg",{role:"img","aria-label":"question mark icon",width:"24",height:"24",fill:"none",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},w.default.createElement("path",{d:"M12 2c5.523 0 10 4.478 10 10s-4.477 10-10 10S2 17.522 2 12 6.477 2 12 2Zm0 1.667c-4.595 0-8.333 3.738-8.333 8.333 0 4.595 3.738 8.333 8.333 8.333 4.595 0 8.333-3.738 8.333-8.333 0-4.595-3.738-8.333-8.333-8.333ZM12 15.5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm0-8.75a2.75 2.75 0 0 1 2.75 2.75c0 1.01-.297 1.574-1.051 2.359l-.169.171c-.622.622-.78.886-.78 1.47a.75.75 0 0 1-1.5 0c0-1.01.297-1.574 1.051-2.359l.169-.171c.622-.622.78-.886.78-1.47a1.25 1.25 0 0 0-2.493-.128l-.007.128a.75.75 0 0 1-1.5 0A2.75 2.75 0 0 1 12 6.75Z",fill:"currentColor"}))),w.default.createElement("span",{className:"tooltip-content"},t)))),a&&w.default.createElement("p",{className:"selected-value"},"Selected: ",a)),w.default.createElement("div",{className:"children-wrapper"},r)),S=t(r()),Me=({onChange:e,currentValue:t})=>S.default.createElement("div",{className:"slider-wrapper"},S.default.createElement("label",{className:"switch"},S.default.createElement("input",{type:"checkbox",checked:t,onChange:()=>{e(!t)}}),S.default.createElement("span",{className:"slider round"}))),Pe=t(r()),k=({name:e,step:t,type:a,value:r,placeholder:n,onChange:l})=>Pe.default.createElement("input",{type:a,name:e,step:t,placeholder:n,value:void 0!==r?r.toString():"",className:"input",onChange:e=>{l(e)}}),Re=g.default.memo(()=>{let{backgroundMode:a,backgroundStyles:e,isDynamicColor:t,setBackgroundMode:r,setDynamicColor:n,updateBackgroundStyles:l}=d();return g.default.createElement(g.default.Fragment,null,g.default.createElement(E,{title:"Set Background",selectedValue:"animated"===a?"Animated Background":"solid"===a?"Solid Background":"static"===a?"Static Background":void 0},g.default.createElement("div",null,g.default.createElement(h,{options:[{label:"Animated",value:"animated"},{label:"Static",value:"static"},{label:"Solid",value:"solid"}],selectedValue:a,onSelect:e=>{r(e)},label:"Select an option"}))),Object.entries(e[a]).map(([t,e])=>g.default.createElement(E,{key:t,title:"Set "+("backgroundColor"===t?"background color":"backdropBlur"===t?"backdrop blur":"borderRadius"===t?"border radius":t)},g.default.createElement(k,{type:"backgroundColor"===t?"text":"number",name:t,step:.01,value:e,onChange:e=>((e,t)=>{e=e.target.value.trim();l(a,t,e)})(e,t)}))),g.default.createElement(E,{title:"Dynamic Color (Experimental)"},g.default.createElement(Me,{currentValue:t,onChange:e=>n(e)})))}),Ie=t(r()),Ne=()=>{let e=d().resetSettings;return Ie.default.createElement("div",null,Ie.default.createElement(E,{title:"Reset to Default"},Ie.default.createElement("button",{type:"button",className:"button reset-button",onClick:()=>{confirm("Are you sure you want to reset all background settings to their default values? This action cannot be undone.")&&e()}},"Reset")))},_=t(r()),Be=t(r()),$e=()=>{let{fontFamily:e,fontImportUrl:t,setFontImportUrl:a}=d(),[r,n]=Be.default.useState(t||e);return Be.default.createElement("div",null,Be.default.createElement(k,{name:"Font Family",onChange:e=>{n(e.target.value),a(e.target.value)},placeholder:"Enter Font Family Name or Google Fonts link",type:"text",value:r}))},Ae=()=>{var e=d().fontFamily;return _.default.createElement("div",null,_.default.createElement(E,{title:"Font Family",selectedValue:e,tooltip:_.default.createElement(je,null)},_.default.createElement($e,null)))},je=()=>_.default.createElement("div",null,_.default.createElement("div",null,_.default.createElement("img",{width:"12rem",height:"15rem",src:"https://sanooj.is-a.dev/Spicetify-Lucid/assets/tooltip/font-url.png",alt:"google font url img",style:{width:"12rem",height:"15rem",borderRadius:"4px"}})),_.default.createElement("div",null,_.default.createElement("h4",null,"Usage:"),_.default.createElement("li",null,"Font Name (If Installed)"),_.default.createElement("li",null,"URL (Google Fonts)"))),C=t(r()),De=()=>{let{playlistViewMode:e,playlistImageMode:t,setPlaylistViewMode:a,setPlaylistImageMode:r}=d();return C.default.createElement(C.default.Fragment,null,C.default.createElement(E,{title:"Set View Mode",selectedValue:e},C.default.createElement(h,{options:[{label:"Default",value:"default"},{label:"compact",value:"compact"},{label:"card",value:"card"}],onSelect:e=>{a(e)},selectedValue:e})),C.default.createElement(E,{title:"Set Background Image",selectedValue:t},C.default.createElement(h,{options:[{label:"none",value:"none"},{label:"Playlist Art Image",value:"inherit"},{label:"Now Playing",value:"now-playing"}],onSelect:e=>{r(e)},selectedValue:t})))},Te=t(r()),Ue=()=>{let{grainEffect:e,setGrainEffect:t}=d();return Te.default.createElement("div",null,Te.default.createElement(E,{title:"Set Grains",selectedValue:e},Te.default.createElement(h,{options:[{label:"Stary",value:"stary"},{label:"Default",value:"default"},{label:"None",value:"none"}],onSelect:e=>{t(e)},selectedValue:e})))},M=t(r()),ze=()=>{let{playbarMode:a,setPlaybarMode:t,playbarStyles:e,updatePlaybarStyles:r}=d();return M.default.createElement(M.default.Fragment,null,M.default.createElement(E,{title:"Set Playbar Mode",selectedValue:a},M.default.createElement(h,{options:[{label:"Compact",value:"compact"},{label:"Default",value:"default"}],onSelect:e=>{t(e)},selectedValue:a})),Object.entries(e[a]).map(([t,e])=>M.default.createElement(E,{key:t,title:"Set "+("backgroundColor"===t?"background color":"backdropBlur"===t?"backdrop blur":"borderRadius"===t?"border radius":t)},M.default.createElement(k,{type:"backgroundColor"===t?"text":"number",name:t,step:.01,value:e,onChange:e=>((e,t)=>{e=e.target.value.trim();r(a,t,e)})(e,t)}))))},Ve=p.default.memo(()=>{let e=[{key:"background",title:"Background",description:"Customize your theme's background.",content:p.default.createElement(Re,null)},{key:"grains",title:"Grains",description:"Set your grain texture.",content:p.default.createElement(Ue,null)},{key:"playlistView",title:"Playlist View",description:"Configure your playlist view.",content:p.default.createElement(De,null)},{key:"playbar",title:"Playbar",description:"Configure your playbar.",content:p.default.createElement(ze,null)},{key:"font",title:"Font",description:"Select your desired font.",content:p.default.createElement(Ae,null)},{key:"reset",title:"Reset Settings",description:"Reset to default settings.",content:p.default.createElement(Ne,null)}],[t,a]=(0,p.useState)("all"),r=e=>{a(e)};var n;return p.default.createElement(Le,{title:"Lucid Settings"},p.default.createElement("div",{className:"settings-navigation-container"},p.default.createElement("div",{className:"navigation"},p.default.createElement("button",{type:"button",onClick:()=>r("all"),className:"all"===t?"active":""},"All"),e.map(e=>p.default.createElement("button",{type:"button",key:e.key,onClick:()=>r(e.key),className:t===e.key?"active":""},e.title)))),p.default.createElement("div",{className:"sections-container"},"all"===t?e.map(e=>p.default.createElement("div",{className:"section-wrapper",key:e.key,id:e.key},p.default.createElement(Ce,{title:e.title,description:e.description},e.content))):(n=e.find(e=>e.key===t))?p.default.createElement("div",{className:"section-wrapper",key:n.key,id:n.key},p.default.createElement(Ce,{title:n.title,description:n.description},n.content)):null))}),Fe=m.default.memo(()=>{let{isOpen:e,openModal:t}=ne();return m.default.createElement(m.default.Fragment,null,m.default.createElement(Oe,{cb:()=>t()}),e?m.default.createElement(Ve,null):null)}),P=t(r()),He=()=>{let{playlistViewMode:t,playlistImageMode:a}=d(),r=P.default.useRef(null);return P.default.useEffect(()=>{let e=document.body.classList;return e.add("playlist-art-image-"+a),e.add("playlist-view-"+t),()=>{e.remove("playlist-view-"+t),e.remove("playlist-art-image-"+a)}},[t,a]),P.default.useEffect(()=>{let t=document.querySelector(".Root__main-view .os-viewport, .Root__main-view .main-view-container > .main-view-container__scroll-node:not([data-overlayscrollbars-initialize]), .Root__main-view .main-view-container__scroll-node > [data-overlayscrollbars-viewport]");if(t&&r.current){let e=()=>{r.current&&"other"!==window.pageCategory&&(r.current.style.transform=`translateY(-${Math.min(t.scrollTop,window.screen.height)}px)`)};return t.addEventListener("scroll",e),()=>t.removeEventListener("scroll",e)}},[window.screen.height]),P.default.createElement("span",{id:"playlistArtContainer",className:`playlist-art-container ${t} `+a,"data-playlistviewmode":t},P.default.createElement("div",{className:"background",ref:r}),P.default.createElement("div",{className:"overlay",style:{backgroundColor:"var(--spice-main)"}}))},R=t(r()),Ge=()=>{let{fontFamily:e,fontImportUrl:a,setFontFamily:r,setFontImportUrl:n}=d(),[t,l]=R.default.useState(null),[o,i]=R.default.useState(!1),s=()=>{var t;if(l(null),i(!1),(e=>{try{return new URL(e),!0}catch(e){return!1}})(a)){r(decodeURIComponent((null==(t=null==(t=a.match(/family=([^&:]+)/))?void 0:t[1])?void 0:t.replace(/\+/g," "))||""));let e=document.getElementById("custom-font");e?e.href=a:((e=document.createElement("link")).rel="preload stylesheet",e.as="style",e.id="custom-font",e.href=a,e.onload=()=>i(!0),e.onerror=()=>l("Font failed to load."),document.head.appendChild(e))}else a?(r(a+", var(--fallback-fonts)"),n(""),i(!0)):l("Please enter a valid font family or URL.");null!=(t=window.rootStyle)&&t.setProperty("--font-to-use",e)};return R.default.useEffect(()=>{t&&L("Error Loading Font: "+t,{level:"error"})},[t]),R.default.useEffect(()=>{s()},[e,a]),R.default.createElement("div",{id:"font","data-font-family":e,"data-font-import-url":a,"data-font-loaded":o.toString()})},qe=t(r()),We=()=>{let e=d().grainEffect;return(0,qe.useEffect)(()=>(document.body.classList.add("grain-"+e),()=>{document.body.classList.remove("grain-"+e)}),[e]),qe.default.createElement("div",{id:"grainEffect","data-grainEffect":e})},I=t(r()),Ke={copyButton:"error-module__copyButton___UntTn_theme",button:"error-module__button___sf48q_theme"},Ze="https://github.com/sanoojes/Spicetify-Lucid/issues",Xe=({error:e})=>{let[t,a]=I.default.useState(!1),r=I.default.useRef(null),n="";n=e instanceof Error?e.message:JSON.stringify(e,null,2);return I.default.createElement("div",{style:{width:"50vw"}},I.default.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},I.default.createElement("span",{style:{margin:"auto 0"}},I.default.createElement("p",null,"Oops! Lucid theme encountered an error. Please"," ",I.default.createElement("a",{href:Ze,target:"_blank",rel:"noopener noreferrer"},"report an issue here"))),I.default.createElement("div",null,I.default.createElement("button",{type:"button",onClick:()=>a(!t),className:Ke.button},t?"Hide Details":"Show Details"),I.default.createElement("button",{type:"button",onClick:()=>{r.current&&(navigator.clipboard.writeText(r.current.textContent||""),Spicetify.showNotification("Error details copied!",!1,2e3))},className:Ke.copyButton,style:{marginLeft:"8px"}},"Copy Error"))),t&&I.default.createElement("pre",{style:{whiteSpace:"pre-wrap"},ref:r},n))},Je=e=>{L("Error: "+e,{level:"error"}),Spicetify.showNotification(I.default.createElement(Xe,{error:e}),!0)},N=t(r()),Ye=()=>{let{playbarMode:a,playbarStyles:r}=d(),[e,n]=(N.default.useEffect(()=>(document.body.classList.add("playbar-"+a),()=>{document.body.classList.remove("playbar-"+a)}),[a]),N.default.useState({}));return N.default.useEffect(()=>{var e={"--background-color":null==(e=r[a])?void 0:e.backgroundColor,"--opacity":null==(e=r[a])?void 0:e.opacity,"--brightness":null==(e=r[a])?void 0:e.brightness,"--contrast":null==(e=r[a])?void 0:e.contrast,"--padding-x":`${(null==(e=r[a])?void 0:e.paddingX)||0}px`,"--padding-y":`${(null==(e=r[a])?void 0:e.paddingY)||0}px`,"--time":`${(null==(e=r[a])?void 0:e.time)||0}s`,"--blur":`${(null==(e=r[a])?void 0:e.blur)||0}px`,"--border-radius":`${(null==(e=r[a])?void 0:e.borderRadius)||8}px`,"--saturation":null==(e=r[a])?void 0:e.saturation,"--backdrop-blur":`${(null==(e=r[a])?void 0:e.backdropBlur)||0}px`},t=(n(e),document.querySelector(".Root__now-playing-bar"));t?t.style.cssText=Object.entries(e).map(([e,t])=>e+`: ${t};`).join(" "):L("Playbar element not found!",{level:"error"})},[a,r]),N.default.createElement("div",{id:"playbar-styles",style:e})},Qe=()=>{try{let[e,t]=s.default.useState("other"),a=s.default.useRef(null),[r,n]=s.default.useState(null),l=()=>{(async()=>{for(var e;null==(e=null==Spicetify?void 0:Spicetify.Player)||!e.data;)await new Promise(e=>setTimeout(e,100));try{window.currentArtUrl=Spicetify.Player.data.item.metadata.image_xlarge_url||Spicetify.Player.data.item.metadata.image_large_url||Spicetify.Player.data.item.metadata.image_url||Spicetify.Player.data.item.metadata.image_small_url||"",window.rootStyle.setProperty("--now-playing-art-image",`url(${window.currentArtUrl})`),L("Updated artwork URL: "+window.currentArtUrl)}catch(e){L("Error updating artwork URL: "+e,{level:"error"})}})()},o=()=>{var e,t;document.getElementById("lucid-under-main-view")||((e=document.createElement("div")).id="lucid-under-main-view",e.className="lucid-under-main-view",(t=document.querySelector(".main-view-container"))&&t.prepend(e),a.current=e,a.current&&Spicetify.ReactDOM.createRoot(a.current).render(s.default.createElement(He,null)))},i=()=>{var e=Spicetify.Platform.History.location.pathname;Spicetify.URI.isPlaylistV1OrV2(e)?t("playlist"):Spicetify.URI.isArtist(e)?t("artist"):Spicetify.URI.isAlbum(e)?t("album"):Spicetify.URI.isShow(e)?t("show"):Spicetify.URI.isProfile(e)?t("profile"):t("other")};return Spicetify.React.useEffect(()=>(i(),(()=>{var a=Spicetify.Locale;function r(e){return e.replace(/[{0}{1}«»”“]/g,"").trim()}if(a){var n=r(a.get("playlist.a11y.play")||""),l=r(a.get("playlist.a11y.pause")||""),o=a.get("play"),i=a.get("pause"),s=a.get("browse"),c=a.get("playback-control.skip-forward"),u=a.get("playback-control.skip-back"),d=a.get("buddy-feed.friend-activity"),m=a.get("tracklist.a11y.play")||"",p=a.get("view.web-player-home");let e,t;["zh-CN","zh-TW","am","fi"].includes(a.getLocale())?[e,t]=m.split("{1}"):[e,t]=m.split("{0}"),e=r(e),t=r(t);var m=a.get("playback-control.enable-repeat"),f=a.get("playback-control.enable-repeat-one"),a=a.get("playback-control.disable-repeat"),y=document.createElement("style");y.innerHTML=` + `,e.textContent=a,r)}catch(e){return O("Error saving colors to style: "+(e instanceof Error?e.message:e),{level:"error"}),null}})(a.current,t),O("Dynamic colors updated!"))};if(setTimeout(()=>e(),1e3),t)return Spicetify.Player.addEventListener("songchange",e),()=>{Spicetify.Player.removeEventListener("songchange",e),a.current&&ot(a.current)};ot(a.current)},[t]),me.default.createElement("div",{id:"dynamic-colors"})},xe=()=>{let{backgroundMode:t,backgroundStyles:a}=d(),[e,r]=i.default.useState({});return i.default.useEffect(()=>{var e;r({"--background-color":null==(e=a[t])?void 0:e.backgroundColor,"--opacity":null==(e=a[t])?void 0:e.opacity,"--brightness":null==(e=a[t])?void 0:e.brightness,"--contrast":null==(e=a[t])?void 0:e.contrast,"--time":`${(null==(e=a[t])?void 0:e.time)||0}s`,"--blur":`${(null==(e=a[t])?void 0:e.blur)||0}px`,"--saturation":null==(e=a[t])?void 0:e.saturation,"--backdrop-blur":`${(null==(e=a[t])?void 0:e.backdropBlur)||0}px`})},[t,a]),i.default.createElement("div",{className:"background-wrapper",style:e},"animated"===t&&i.default.createElement(ce,null),"static"===t&&i.default.createElement(se,null),"solid"===t&&i.default.createElement(de,null),i.default.createElement(_e,null))},m=t(r()),Le=({cb:t})=>(Spicetify.React.useEffect(()=>{let e=new Spicetify.Menu.Item("Lucid Settings",!1,()=>t(),'');return e.register(),()=>{e.deregister()}},[t]),null),p=t(r()),f=t(r()),Oe=f.default.memo(({title:e,children:t,headingChild:a})=>{let{isOpen:r,closeModal:n}=ne();return r?f.default.createElement("div",{className:"modal-container"},f.default.createElement("div",{className:"modal-overlay "+(r&&"open"),style:{zIndex:20},onClick:n}),f.default.createElement("div",{className:"modal-section "+(r&&"open"),role:"dialog","aria-label":e,"aria-modal":"true"},f.default.createElement("div",{className:"main-embedWidgetGenerator-container"},f.default.createElement("div",{className:"main-trackCreditsModal-header"},f.default.createElement("h1",{className:"main-type-alto"},e),a&&f.default.createElement("div",null,a),f.default.createElement("button",{type:"button","aria-label":"Close",className:"main-trackCreditsModal-closeBtn",onClick:()=>n()},f.default.createElement("svg",{width:"18",height:"18",viewBox:"0 0 32 32",xmlns:"http://www.w3.org/2000/svg"},f.default.createElement("title",null,"Close"),f.default.createElement("path",{d:"M31.098 29.794L16.955 15.65 31.097 1.51 29.683.093 15.54 14.237 1.4.094-.016 1.508 14.126 15.65-.016 29.795l1.414 1.414L15.54 17.065l14.144 14.143",fill:"currentColor","fill-rule":"evenodd"})))),f.default.createElement("div",{className:"modal-contents"},f.default.createElement("main",{className:"modal-wrapper"},t))))):null}),y=t(r()),Ce=({title:e,description:t,children:a})=>y.default.createElement("div",{className:"setting-section"},y.default.createElement("div",{className:"heading-wrapper"},y.default.createElement("h3",{className:"title"},e),t&&y.default.createElement("p",{className:"description"},t)),y.default.createElement("div",{className:"cards-wrapper"},a)),g=t(r()),b=t(r()),h=({options:e,selectedValue:a,onSelect:r,label:t})=>{let[n,l]=b.default.useState(!1),o=b.default.useRef(null);var i=b.default.useRef(null);b.default.useEffect(()=>{let e=e=>{o.current&&!o.current.contains(e.target)&&l(!1)};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]);return b.default.createElement("div",{className:"dropdown-container",ref:o},b.default.createElement("button",{className:"dropdown-button "+(n&&"open"),onClick:()=>{l(!n)},"aria-haspopup":"listbox","aria-expanded":n,"aria-label":"Toggle dropdown menu",type:"button"},t||a,b.default.createElement("span",{className:"dropdown-arrow"},b.default.createElement("svg",{role:"img","aria-labelledby":"title",width:"24",height:"24",fill:"none",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},b.default.createElement("span",{id:"title"},"Down"),b.default.createElement("path",{d:"M4.293 8.293a1 1 0 0 1 1.414 0L12 14.586l6.293-6.293a1 1 0 1 1 1.414 1.414l-7 7a1 1 0 0 1-1.414 0l-7-7a1 1 0 0 1 0-1.414Z",fill:"#ffffff"})))),n&&b.default.createElement("ul",{className:"dropdown-menu","aria-label":"Dropdown menu",ref:i},e.map(t=>b.default.createElement("li",{key:t.value,onClick:()=>{return e=t.value,r(e),void l(!1);var e},className:a===t.value?"dropdown-item selected":"dropdown-item","aria-selected":a===t.value,tabIndex:-1},t.label))))},w=t(r()),E=({title:e,tooltip:t,selectedValue:a,children:r})=>w.default.createElement("div",{className:"card"},w.default.createElement("div",{className:"title-container"},w.default.createElement("div",{className:"title-wrapper"},e&&w.default.createElement("h5",{className:"title"},e),t&&w.default.createElement("div",{className:"tooltip-container"},w.default.createElement("div",{className:"tooltip"},w.default.createElement("span",{className:"tooltip-icon"},w.default.createElement("svg",{role:"img","aria-label":"question mark icon",width:"24",height:"24",fill:"none",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},w.default.createElement("path",{d:"M12 2c5.523 0 10 4.478 10 10s-4.477 10-10 10S2 17.522 2 12 6.477 2 12 2Zm0 1.667c-4.595 0-8.333 3.738-8.333 8.333 0 4.595 3.738 8.333 8.333 8.333 4.595 0 8.333-3.738 8.333-8.333 0-4.595-3.738-8.333-8.333-8.333ZM12 15.5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm0-8.75a2.75 2.75 0 0 1 2.75 2.75c0 1.01-.297 1.574-1.051 2.359l-.169.171c-.622.622-.78.886-.78 1.47a.75.75 0 0 1-1.5 0c0-1.01.297-1.574 1.051-2.359l.169-.171c.622-.622.78-.886.78-1.47a1.25 1.25 0 0 0-2.493-.128l-.007.128a.75.75 0 0 1-1.5 0A2.75 2.75 0 0 1 12 6.75Z",fill:"currentColor"}))),w.default.createElement("span",{className:"tooltip-content"},t)))),a&&w.default.createElement("p",{className:"selected-value"},"Selected: ",a)),w.default.createElement("div",{className:"children-wrapper"},r)),S=t(r()),Me=({onChange:e,currentValue:t})=>S.default.createElement("div",{className:"slider-wrapper"},S.default.createElement("label",{className:"switch"},S.default.createElement("input",{type:"checkbox",checked:t,onChange:()=>{e(!t)}}),S.default.createElement("span",{className:"slider round"}))),Pe=t(r()),k=({name:e,step:t,type:a,value:r,placeholder:n,onChange:l})=>Pe.default.createElement("input",{type:a,name:e,step:t,placeholder:n,value:void 0!==r?r.toString():"",className:"input",onChange:e=>{l(e)}}),Ie=g.default.memo(()=>{let{backgroundMode:a,backgroundStyles:e,isDynamicColor:t,setBackgroundMode:r,setDynamicColor:n,updateBackgroundStyles:l}=d();return g.default.createElement(g.default.Fragment,null,g.default.createElement(E,{title:"Set Background",selectedValue:"animated"===a?"Animated Background":"solid"===a?"Solid Background":"static"===a?"Static Background":void 0},g.default.createElement("div",null,g.default.createElement(h,{options:[{label:"Animated",value:"animated"},{label:"Static",value:"static"},{label:"Solid",value:"solid"}],selectedValue:a,onSelect:e=>{r(e)},label:"Select an option"}))),Object.entries(e[a]).map(([t,e])=>g.default.createElement(E,{key:t,title:"Set "+("backgroundColor"===t?"background color":"backdropBlur"===t?"backdrop blur":"borderRadius"===t?"border radius":t)},g.default.createElement(k,{type:"backgroundColor"===t?"text":"number",name:t,step:.01,value:e,onChange:e=>((e,t)=>{e=e.target.value.trim();l(a,t,e)})(e,t)}))),g.default.createElement(E,{title:"Dynamic Color (Experimental)"},g.default.createElement(Me,{currentValue:t,onChange:e=>n(e)})))}),Re=t(r()),Ne=()=>{let e=d().resetSettings;return Re.default.createElement("div",null,Re.default.createElement(E,{title:"Reset to Default"},Re.default.createElement("button",{type:"button",className:"button reset-button",onClick:()=>{confirm("Are you sure you want to reset all background settings to their default values? This action cannot be undone.")&&e()}},"Reset")))},_=t(r()),Be=t(r()),$e=()=>{let{fontFamily:e,fontImportUrl:t,setFontImportUrl:a}=d(),[r,n]=Be.default.useState(t||e);return Be.default.createElement("div",null,Be.default.createElement(k,{name:"Font Family",onChange:e=>{n(e.target.value),a(e.target.value)},placeholder:"Enter Font Family Name or Google Fonts link",type:"text",value:r}))},Ae=()=>{var e=d().fontFamily;return _.default.createElement("div",null,_.default.createElement(E,{title:"Font Family",selectedValue:e,tooltip:_.default.createElement(je,null)},_.default.createElement($e,null)))},je=()=>_.default.createElement("div",null,_.default.createElement("div",null,_.default.createElement("img",{width:"12rem",height:"15rem",src:"https://sanooj.is-a.dev/Spicetify-Lucid/assets/tooltip/font-url.png",alt:"google font url img",style:{width:"12rem",height:"15rem",borderRadius:"4px"}})),_.default.createElement("div",null,_.default.createElement("h4",null,"Usage:"),_.default.createElement("li",null,"Font Name (If Installed)"),_.default.createElement("li",null,"URL (Google Fonts)"))),C=t(r()),De=()=>{let{playlistViewMode:e,playlistImageMode:t,setPlaylistViewMode:a,setPlaylistImageMode:r}=d();return C.default.createElement(C.default.Fragment,null,C.default.createElement(E,{title:"Set View Mode",selectedValue:e},C.default.createElement(h,{options:[{label:"Default",value:"default"},{label:"compact",value:"compact"},{label:"card",value:"card"}],onSelect:e=>{a(e)},selectedValue:e})),C.default.createElement(E,{title:"Set Background Image",selectedValue:t},C.default.createElement(h,{options:[{label:"none",value:"none"},{label:"Playlist Art Image",value:"inherit"},{label:"Now Playing",value:"now-playing"}],onSelect:e=>{r(e)},selectedValue:t})))},Te=t(r()),ze=()=>{let{grainEffect:e,setGrainEffect:t}=d();return Te.default.createElement("div",null,Te.default.createElement(E,{title:"Set Grains",selectedValue:e},Te.default.createElement(h,{options:[{label:"Stary",value:"stary"},{label:"Default",value:"default"},{label:"None",value:"none"}],onSelect:e=>{t(e)},selectedValue:e})))},M=t(r()),Ue=()=>{let{playbarMode:a,setPlaybarMode:t,playbarStyles:e,updatePlaybarStyles:r}=d();return M.default.createElement(M.default.Fragment,null,M.default.createElement(E,{title:"Set Playbar Mode",selectedValue:a},M.default.createElement(h,{options:[{label:"Compact",value:"compact"},{label:"Default",value:"default"}],onSelect:e=>{t(e)},selectedValue:a})),Object.entries(e[a]).map(([t,e])=>M.default.createElement(E,{key:t,title:"Set "+("backgroundColor"===t?"background color":"backdropBlur"===t?"backdrop blur":"borderRadius"===t?"border radius":t)},M.default.createElement(k,{type:"backgroundColor"===t?"text":"number",name:t,step:.01,value:e,onChange:e=>((e,t)=>{e=e.target.value.trim();r(a,t,e)})(e,t)}))))},Ve=p.default.memo(()=>{let e=[{key:"background",title:"Background",description:"Customize your theme's background.",content:p.default.createElement(Ie,null)},{key:"grains",title:"Grains",description:"Set your grain texture.",content:p.default.createElement(ze,null)},{key:"playlistView",title:"Playlist View",description:"Configure your playlist view.",content:p.default.createElement(De,null)},{key:"playbar",title:"Playbar",description:"Configure your playbar.",content:p.default.createElement(Ue,null)},{key:"font",title:"Font",description:"Select your desired font.",content:p.default.createElement(Ae,null)},{key:"reset",title:"Reset Settings",description:"Reset to default settings.",content:p.default.createElement(Ne,null)}],[t,a]=(0,p.useState)("all"),r=e=>{a(e)};var n;return p.default.createElement(Oe,{title:"Lucid Settings"},p.default.createElement("div",{className:"settings-navigation-container"},p.default.createElement("div",{className:"navigation"},p.default.createElement("button",{type:"button",onClick:()=>r("all"),className:"all"===t?"active":""},"All"),e.map(e=>p.default.createElement("button",{type:"button",key:e.key,onClick:()=>r(e.key),className:t===e.key?"active":""},e.title)))),p.default.createElement("div",{className:"sections-container"},"all"===t?e.map(e=>p.default.createElement("div",{className:"section-wrapper",key:e.key,id:e.key},p.default.createElement(Ce,{title:e.title,description:e.description},e.content))):(n=e.find(e=>e.key===t))?p.default.createElement("div",{className:"section-wrapper",key:n.key,id:n.key},p.default.createElement(Ce,{title:n.title,description:n.description},n.content)):null))}),Fe=m.default.memo(()=>{let{isOpen:e,openModal:t}=ne();return m.default.createElement(m.default.Fragment,null,m.default.createElement(Le,{cb:()=>t()}),e?m.default.createElement(Ve,null):null)}),P=t(r()),He=()=>{let{playlistViewMode:t,playlistImageMode:a}=d(),r=P.default.useRef(null);return P.default.useEffect(()=>{let e=document.body.classList;return e.add("playlist-art-image-"+a),e.add("playlist-view-"+t),()=>{e.remove("playlist-view-"+t),e.remove("playlist-art-image-"+a)}},[t,a]),P.default.useEffect(()=>{let t=document.querySelector(".Root__main-view .os-viewport, .Root__main-view .main-view-container > .main-view-container__scroll-node:not([data-overlayscrollbars-initialize]), .Root__main-view .main-view-container__scroll-node > [data-overlayscrollbars-viewport]");if(t&&r.current){let e=()=>{r.current&&"other"!==window.pageCategory&&(r.current.style.transform=`translateY(-${Math.min(t.scrollTop,window.screen.height)}px)`)};return t.addEventListener("scroll",e),()=>t.removeEventListener("scroll",e)}},[window.screen.height]),P.default.createElement("span",{id:"playlistArtContainer",className:`playlist-art-container ${t} `+a,"data-playlistviewmode":t},P.default.createElement("div",{className:"background",ref:r}),P.default.createElement("div",{className:"overlay",style:{backgroundColor:"var(--spice-main)"}}))},I=t(r()),qe=()=>{let{fontFamily:e,fontImportUrl:a,setFontFamily:r,setFontImportUrl:n}=d(),[t,l]=I.default.useState(null),[o,i]=I.default.useState(!1),s=()=>{var t;if(l(null),i(!1),(e=>{try{return new URL(e),!0}catch(e){return!1}})(a)){r(decodeURIComponent((null==(t=null==(t=a.match(/family=([^&:]+)/))?void 0:t[1])?void 0:t.replace(/\+/g," "))||""));let e=document.getElementById("custom-font");e?e.href=a:((e=document.createElement("link")).rel="preload stylesheet",e.as="style",e.id="custom-font",e.href=a,e.onload=()=>i(!0),e.onerror=()=>l("Font failed to load."),document.head.appendChild(e))}else a?(r(a+", var(--fallback-fonts)"),n(""),i(!0)):l("Please enter a valid font family or URL.");null!=(t=window.rootStyle)&&t.setProperty("--font-to-use",e)};return I.default.useEffect(()=>{t&&O("Error Loading Font: "+t,{level:"error"})},[t]),I.default.useEffect(()=>{s()},[e,a]),I.default.createElement("div",{id:"font","data-font-family":e,"data-font-import-url":a,"data-font-loaded":o.toString()})},Ge=t(r()),We=()=>{let e=d().grainEffect;return(0,Ge.useEffect)(()=>(document.body.classList.add("grain-"+e),()=>{document.body.classList.remove("grain-"+e)}),[e]),Ge.default.createElement("div",{id:"grainEffect","data-grainEffect":e})},R=t(r()),Ke={copyButton:"error-module__copyButton___UntTn_theme",button:"error-module__button___sf48q_theme"},Ze="https://github.com/sanoojes/Spicetify-Lucid/issues",Xe=({error:e})=>{let[t,a]=R.default.useState(!1),r=R.default.useRef(null),n="";n=e instanceof Error?e.message:JSON.stringify(e,null,2);return R.default.createElement("div",{style:{width:"50vw"}},R.default.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},R.default.createElement("span",{style:{margin:"auto 0"}},R.default.createElement("p",null,"Oops! Lucid theme encountered an error. Please"," ",R.default.createElement("a",{href:Ze,target:"_blank",rel:"noopener noreferrer"},"report an issue here"))),R.default.createElement("div",null,R.default.createElement("button",{type:"button",onClick:()=>a(!t),className:Ke.button},t?"Hide Details":"Show Details"),R.default.createElement("button",{type:"button",onClick:()=>{r.current&&(navigator.clipboard.writeText(r.current.textContent||""),Spicetify.showNotification("Error details copied!",!1,2e3))},className:Ke.copyButton,style:{marginLeft:"8px"}},"Copy Error"))),t&&R.default.createElement("pre",{style:{whiteSpace:"pre-wrap"},ref:r},n))},Je=e=>{O("Error: "+e,{level:"error"}),Spicetify.showNotification(R.default.createElement(Xe,{error:e}),!0)},N=t(r()),Ye=()=>{let{playbarMode:a,playbarStyles:r}=d(),[e,n]=(N.default.useEffect(()=>(document.body.classList.add("playbar-"+a),()=>{document.body.classList.remove("playbar-"+a)}),[a]),N.default.useState({}));return N.default.useEffect(()=>{var e={"--background-color":null==(e=r[a])?void 0:e.backgroundColor,"--opacity":null==(e=r[a])?void 0:e.opacity,"--brightness":null==(e=r[a])?void 0:e.brightness,"--contrast":null==(e=r[a])?void 0:e.contrast,"--padding-x":`${(null==(e=r[a])?void 0:e.paddingX)||0}px`,"--padding-y":`${(null==(e=r[a])?void 0:e.paddingY)||0}px`,"--time":`${(null==(e=r[a])?void 0:e.time)||0}s`,"--blur":`${(null==(e=r[a])?void 0:e.blur)||0}px`,"--border-radius":`${(null==(e=r[a])?void 0:e.borderRadius)||8}px`,"--saturation":null==(e=r[a])?void 0:e.saturation,"--backdrop-blur":`${(null==(e=r[a])?void 0:e.backdropBlur)||0}px`},t=(n(e),document.querySelector(".Root__now-playing-bar"));t?t.style.cssText=Object.entries(e).map(([e,t])=>e+`: ${t};`).join(" "):O("Playbar element not found!",{level:"error"})},[a,r]),N.default.createElement("div",{id:"playbar-styles",style:e})},Qe=()=>{try{let[e,t]=s.default.useState("other"),a=s.default.useRef(null),[r,n]=s.default.useState(null),l=()=>{(async()=>{for(var e;null==(e=null==Spicetify?void 0:Spicetify.Player)||!e.data;)await new Promise(e=>setTimeout(e,100));try{window.currentArtUrl=Spicetify.Player.data.item.metadata.image_xlarge_url||Spicetify.Player.data.item.metadata.image_large_url||Spicetify.Player.data.item.metadata.image_url||Spicetify.Player.data.item.metadata.image_small_url||"",window.rootStyle.setProperty("--now-playing-art-image",`url(${window.currentArtUrl})`),O("Updated artwork URL: "+window.currentArtUrl)}catch(e){O("Error updating artwork URL: "+e,{level:"error"})}})()},o=()=>{var e,t;document.getElementById("lucid-under-main-view")||((e=document.createElement("div")).id="lucid-under-main-view",e.className="lucid-under-main-view",(t=document.querySelector(".main-view-container"))&&t.prepend(e),a.current=e,a.current&&Spicetify.ReactDOM.createRoot(a.current).render(s.default.createElement(He,null)))},i=()=>{var e=Spicetify.Platform.History.location.pathname;Spicetify.URI.isPlaylistV1OrV2(e)?t("playlist"):Spicetify.URI.isArtist(e)?t("artist"):Spicetify.URI.isAlbum(e)?t("album"):Spicetify.URI.isShow(e)?t("show"):Spicetify.URI.isProfile(e)?t("profile"):t("other")};return Spicetify.React.useEffect(()=>(i(),(()=>{var a=Spicetify.Locale;function r(e){return e.replace(/[{0}{1}«»”“]/g,"").trim()}if(a){var n=r(a.get("playlist.a11y.play")||""),l=r(a.get("playlist.a11y.pause")||""),o=a.get("play"),i=a.get("pause"),s=a.get("browse"),c=a.get("playback-control.skip-forward"),u=a.get("playback-control.skip-back"),d=a.get("buddy-feed.friend-activity"),m=a.get("tracklist.a11y.play")||"",p=a.get("view.web-player-home");let e,t;["zh-CN","zh-TW","am","fi"].includes(a.getLocale())?[e,t]=m.split("{1}"):[e,t]=m.split("{0}"),e=r(e),t=r(t);var m=a.get("playback-control.enable-repeat"),f=a.get("playback-control.enable-repeat-one"),a=a.get("playback-control.disable-repeat"),y=document.createElement("style");y.innerHTML=` .main-repeatButton-button[aria-checked="false"], .player-controls__right button[aria-label*="${m}"] span{ -webkit-mask-image: var(--repeat-off-icon, url("https://sanooj.is-a.dev/Spicetify-Lucid/assets/icons/repeat-off.svg")); @@ -216,6 +216,6 @@ display: none !important; max-width: 10rem; } } -`,document.head.appendChild(y)}})(),tt(),l(),o(),Y(),Spicetify.Platform.History.listen(()=>{var e=Spicetify.Platform.History.location.pathname;e!==r&&(n(e),i(),o(),Y())}),window.addEventListener("resize",tt),Spicetify.Player.addEventListener("songchange",l),()=>{window.removeEventListener("resize",tt),Spicetify.Player.removeEventListener("songchange",l)}),[]),s.default.useEffect(()=>(window.pageCategory=e,document.body.classList.add(e),()=>{document.body.classList.remove(e)}),[e]),s.default.createElement(s.default.Fragment,null,s.default.createElement("div",{id:"state"},s.default.createElement(We,null),s.default.createElement(Ge,null),s.default.createElement(Ye,null)),s.default.createElement("div",{id:"background-container",className:"background-container",style:{containerType:"normal"}},s.default.createElement(xe,null)),s.default.createElement("div",{id:"modal-container",className:"modal-container",style:{containerType:"normal"}},s.default.createElement(re,null,s.default.createElement(Fe,null))),window.isWindows&&!window.isLightMode?s.default.createElement("div",{id:"transperent-controls-container",className:"transperent-controls-container",style:{containerType:"normal"}},s.default.createElement(oe,null)):null)}catch(e){return Je(e),s.default.createElement("div",null)}},et=async function(){try{for(;!(null!=Spicetify&&Spicetify.showNotification&&null!=Spicetify&&Spicetify.Player&&null!=Spicetify&&Spicetify.React&&null!=Spicetify&&Spicetify.Platform);)await new Promise(e=>setTimeout(e,100));var e=document.createElement("div"),t=(e.id="lucid-main",document.getElementById("main"));null!=t&&t.prepend(e),e&&Spicetify.ReactDOM.createRoot(e).render(X.default.createElement(Qe,null)),window.rootStyle=document.documentElement.style,window.isCustomControls=!1,window.isLightMode="light"===(null==Spicetify?void 0:Spicetify.Config.color_scheme)||!1,window.isWindows=!(!Spicetify.Platform||"Windows"!==Spicetify.Platform.operatingSystem)||!(null==(a=null==(a=Spicetify.Platform)?void 0:a.PlatformData)||!a.os_name)&&Spicetify.Platform.PlatformData.os_name.toLowerCase().includes("win"),window.isGlobalNav=!(!document.querySelector(".globalNav")&&!document.querySelector(".Root__globalNav")),(async()=>{var e;document.getElementById("customControls")&&(window.isCustomControls=!0,null!=(e=document.querySelector(".lucid-transperent-window-controls")))&&e.remove()})(),L("Lucid ignited! 🚀",{styles:"font-weight: bold; font-size: 1.25rem; color: #2196F3; padding: 0.5rem 0;"})}catch(e){e&&Je(e)}var a},(async()=>{await et()})(),(async()=>{var e;document.getElementById("theme")||((e=document.createElement("style")).id="theme",e.textContent=String.raw` +`,document.head.appendChild(y)}})(),tt(),l(),o(),Y(),Spicetify.Platform.History.listen(()=>{var e=Spicetify.Platform.History.location.pathname;e!==r&&(n(e),i(),o(),Y())}),window.addEventListener("resize",tt),Spicetify.Player.addEventListener("songchange",l),()=>{window.removeEventListener("resize",tt),Spicetify.Player.removeEventListener("songchange",l)}),[]),s.default.useEffect(()=>(window.pageCategory=e,document.body.classList.add(e),()=>{document.body.classList.remove(e)}),[e]),s.default.createElement(s.default.Fragment,null,s.default.createElement("div",{id:"state"},s.default.createElement(We,null),s.default.createElement(qe,null),s.default.createElement(Ye,null)),s.default.createElement("div",{id:"background-container",className:"background-container",style:{containerType:"normal"}},s.default.createElement(xe,null)),s.default.createElement("div",{id:"modal-container",className:"modal-container",style:{containerType:"normal"}},s.default.createElement(re,null,s.default.createElement(Fe,null))),window.isWindows&&!window.isLightMode?s.default.createElement("div",{id:"transperent-controls-container",className:"transperent-controls-container",style:{containerType:"normal"}},s.default.createElement(oe,null)):null)}catch(e){return Je(e),s.default.createElement("div",null)}},et=async function(){try{for(;!(null!=Spicetify&&Spicetify.showNotification&&null!=Spicetify&&Spicetify.Player&&null!=Spicetify&&Spicetify.React&&null!=Spicetify&&Spicetify.Platform);)await new Promise(e=>setTimeout(e,100));var e=document.createElement("div"),t=(e.id="lucid-main",document.getElementById("main"));null!=t&&t.prepend(e),e&&Spicetify.ReactDOM.createRoot(e).render(X.default.createElement(Qe,null)),window.rootStyle=document.documentElement.style,window.isCustomControls=!1,window.isLightMode="light"===(null==Spicetify?void 0:Spicetify.Config.color_scheme)||!1,window.isWindows=!(!Spicetify.Platform||"Windows"!==Spicetify.Platform.operatingSystem)||!(null==(n=null==(n=Spicetify.Platform)?void 0:n.PlatformData)||!n.os_name)&&Spicetify.Platform.PlatformData.os_name.toLowerCase().includes("win"),window.isGlobalNav=!(!document.querySelector(".globalNav")&&!document.querySelector(".Root__globalNav")),new MutationObserver(e=>{for(var t of e)(t.target instanceof HTMLElement&&"lyrics-cinema"===t.target.id||t.target instanceof HTMLElement&&t.target.classList.contains("lyrics-lyrics-contentContainer"))&&a()}).observe(document.body,{childList:!0,attributes:!0,subtree:!0}),a(),(async()=>{var e;document.getElementById("customControls")&&(window.isCustomControls=!0,null!=(e=document.querySelector(".lucid-transperent-window-controls")))&&e.remove()})(),O("Lucid ignited! 🚀",{styles:"font-weight: bold; font-size: 1.25rem; color: #2196F3; padding: 0.5rem 0;"})}catch(e){e&&Je(e)}function a(){var e;document.querySelector("#lyrics-cinema:has(.lyrics-lyrics-contentContainer)")&&(e=document.querySelector("#lucid-main .background-container .background-wrapper div"))?e.style.zIndex="calc(var(--above-everything-except-now-playing-bar-z-index, 6) - 1)":r()}function r(){var e=document.querySelector("#lucid-main .background-container .background-wrapper div");e&&(e.style.zIndex="")}var n},(async()=>{await et()})(),(async()=>{var e;document.getElementById("theme")||((e=document.createElement("style")).id="theme",e.textContent=String.raw` .error-module__button___sf48q_theme,.error-module__copyButton___UntTn_theme{background-color:#424242;color:#fff;border:2px solid rgba(var(--spice-rgb-text),.25);padding:8px 16px;font-size:14px;cursor:pointer;border-radius:var(--card-border-radius);transition:all .3s ease-in-out}.error-module__button___sf48q_theme:hover,.error-module__copyButton___UntTn_theme:hover{background-color:#616161;border-radius:100px} `.trim(),document.head.appendChild(e))})()})(); \ No newline at end of file