@stronk-tech/react-librespot-controller
Version:
`go-librespot` squeezebox-alike web frontend for small touchscreens
1 lines • 111 kB
JavaScript
import e,{useState as t,useLayoutEffect as r,useEffect as a,useRef as l,useCallback as o}from"react";function n(e,t,r){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var a=r.call(e,t);if("object"!=typeof a)return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}function s(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){n(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function c(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var p,d,u,y,m,f={exports:{}};function h(){if(d)return p;d=1;return p="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"}function b(){if(y)return u;y=1;var e=h();function t(){}function r(){}return r.resetWarningCache=t,u=function(){function a(t,r,a,l,o,n){if(n!==e){var i=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw i.name="Invariant Violation",i}}function l(){return a}a.isRequired=a;var o={array:a,bigint:a,bool:a,func:a,number:a,object:a,string:a,symbol:a,any:a,arrayOf:l,element:a,elementType:a,instanceOf:l,node:a,objectOf:l,oneOf:l,oneOfType:l,shape:l,exact:l,checkPropTypes:r,resetWarningCache:t};return o.PropTypes=o,o}}function g(){return m||(m=1,f.exports=b()()),f.exports}var v=c(g());const k="undefined"!=typeof window?r:a,w=async function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;try{const a=await fetch(e,t);return 204===a.status?null:a.ok?a:(console.error("API call failed: ".concat(a.status," ").concat(a.statusText)),r)}catch(e){return console.error("Error in API call:",e),r}},x=async e=>{const t=await e;return t&&t.json?t.json():null},E=e=>null==e?void 0:e.split(":").pop(),N=(e,t)=>{if(!e)return null;if(e.startsWith("/")&&t)return"".concat(t).concat(e);const r=e.match(/u\.scdn\.co\/images\/.*?\/([a-fA-F0-9]{40})$/);if(r)return"https://i.scdn.co/image/".concat(r[1].toLowerCase());const a=e.match(/^spotify:image:([a-fA-F0-9]{40})$/i);return a?"https://i.scdn.co/image/".concat(a[1].toLowerCase()):/^[a-fA-F0-9]{40}$/.test(e)?"https://i.scdn.co/image/".concat(e.toLowerCase()):e},z=async(e,t)=>await w("".concat(e,"/player/play"),{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(t)}),C=async e=>await w("".concat(e,"/player/pause"),{method:"POST"}),S=async function(e,t){let r=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return await w("".concat(e,"/player/seek"),{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({position:t,relative:r})})},P=async e=>x(w("".concat(e,"/player/queue"))),T=async(e,t,r)=>{let a="".concat(e,"/metadata/rootlist");return null!=t&&(a+="?limit=".concat(t,"&offset=").concat(r||0)),x(w(a))},M=async function(e,t){let r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:50,a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0;return x(w("".concat(e,"/metadata/playlist/").concat(t,"?limit=").concat(r,"&offset=").concat(a)))},_=async(e,t)=>x(w("".concat(e,"/metadata/track/").concat(t))),O=async(e,t)=>x(w("".concat(e,"/metadata/album/").concat(t))),j=async(e,t)=>x(w("".concat(e,"/metadata/artist/").concat(t))),H=async(e,t)=>x(w("".concat(e,"/metadata/show/").concat(t))),q=(e,r)=>{const[n,i]=t(null),[c,p]=t(null),[d,u]=t(null),[y,m]=t(null),[f,h]=t((()=>{try{return sessionStorage.getItem("spotify_context_uri")||null}catch(e){return null}})),b=o((e=>{h(e);try{e&&sessionStorage.setItem("spotify_context_uri",e)}catch(e){}}),[]),[g,v]=t(0),[k,E]=t(0),[N,M]=t(100),[_,O]=t(!1),[j,H]=t(!1),[q,B]=t(!1),[L,V]=t(null),A=l(null),I=l(null),U=l([]),W=l(null),D=l(!1),F=o((()=>{P(r).then((e=>{e&&m(e)}))}),[r]),R=o((e=>{var t,r;switch(e.type){case"metadata":p(e.data),v(e.data.position||0),F();break;case"playing":O(!0),H(!1),null!==(t=e.data)&&void 0!==t&&t.context_uri&&b(e.data.context_uri),F();break;case"paused":O(!1),H(!1);break;case"stopped":case"inactive":H(!0),O(!1);break;case"seek":v(e.data.position);break;case"volume":E(e.data.value);break;case"shuffle_context":B(e.data.value);break;case"queue":m(e.data);break;case"context":null!==(r=e.data)&&void 0!==r&&r.context_uri&&b(e.data.context_uri)}}),[F]),{isConnected:J,error:Q}=((e,r)=>{const[o,n]=t({isConnected:!1,error:null}),i=l(0),c=l(null),p=l(null),d=l(null);return a((()=>{const t=()=>{if(i.current>10)return n({isConnected:!1,error:"Max reconnection attempts reached."}),void console.warn("Max WebSocket reconnection attempts reached.");if(c.current)return void console.warn("WebSocket instance already exists. Skipping connect.");console.log("Connecting to WebSocket at ".concat(e," (Retry: ").concat(i.current,")"));const a=new WebSocket(e);c.current=a,a.onopen=()=>{console.log("WebSocket connected successfully."),n({isConnected:!0,error:null}),i.current=0,d.current&&(clearTimeout(d.current),d.current=null)},a.onmessage=e=>{try{const t=JSON.parse(e.data);r&&r(t)}catch(e){console.error("Failed to parse WebSocket message:",e)}},a.onerror=e=>{console.error("WebSocket encountered an error:",e.message||e),n((t=>s(s({},t),{},{error:e.message||"WebSocket encountered an error"})))},a.onclose=e=>{if(console.warn("WebSocket closed (code: ".concat(e.code,", reason: ").concat(e.reason||"none",")")),1e3===e.code)return console.log("WebSocket closed normally."),n({isConnected:!1,error:null}),void(c.current=null);d.current=setTimeout((()=>{n((e=>s(s({},e),{},{isConnected:!1})))}),4e3),n((t=>s(s({},t),{},{error:e.reason||"Connection closed"}))),c.current=null;const r=Math.min(200*2**i.current,3e4);console.log("Reconnecting in ".concat(r/1e3," seconds...")),p.current=setTimeout((()=>{i.current+=1,t()}),r)}};return t(),()=>{p.current&&clearTimeout(p.current),d.current&&clearTimeout(d.current),c.current&&(console.log("Closing WebSocket due to component unmount."),c.current.close(1e3,"Component unmounted"),c.current=null)}}),[e,r]),o})(e,R);a((()=>{J&&((async()=>{var e,t;const a=await(async e=>x(w("".concat(e,"/status"))))(r);if(!a)return;const l=a.stopped||!(null!==(e=a.play_origin)&&void 0!==e&&e.length)||null==a.track;i(a),p(a.track),E(a.volume),M(a.volume_steps),O(!a.paused&&!l),H(l),B(a.shuffle_context),v((null===(t=a.track)||void 0===t?void 0:t.position)||0)})(),(async()=>{var e;D.current=!0;const t=await T(r,50,0);if(D.current=!1,!t)return;const a=t.playlists||[];U.current=a,W.current=null!==(e=t.total)&&void 0!==e?e:null,u(a)})(),(async()=>{const e=await P(r);e&&m(e)})())}),[r,J]);const $=o((async()=>{var e;if(D.current)return;if(null==W.current)return;if(U.current.length>=W.current)return;D.current=!0;const t=await T(r,50,U.current.length);if(D.current=!1,!t||null===(e=t.playlists)||void 0===e||!e.length)return;const a=[...U.current,...t.playlists];U.current=a,null!=t.total&&(W.current=t.total),u(a)}),[r]),X=o((e=>{if(A.current&&(clearTimeout(A.current),A.current=null),!e||e<=0)return void V(null);const t=Date.now()+60*e*1e3;V(t),A.current=setTimeout((()=>{C(r),V(null),A.current=null}),60*e*1e3)}),[r]);return a((()=>()=>{A.current&&clearTimeout(A.current)}),[]),{playerRef:I,status:n,trackInfo:c,remotePosition:g,remoteVolume:k,maxVolume:N,isPlaying:_,isStopped:j,shuffleContext:q,handlePlay:e=>{z(r,{uri:e,paused:!1})},handlePlayPause:()=>{J&&!j&&(_?C(r):(async e=>{await w("".concat(e,"/player/resume"),{method:"POST"})})(r))},handlePlayFromContext:(e,t)=>{z(r,{uri:e,skip_to_uri:t,paused:!1})},handlePrevTrack:()=>{_&&!j&&(async e=>{await w("".concat(e,"/player/prev"),{method:"POST"})})(r)},handleNextTrack:()=>{c&&!j&&(async e=>{await w("".concat(e,"/player/next"),{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({})})})(r)},handleSeek:e=>{if(!c||j)return;const t=e.target.value/100*c.duration;S(r,Math.floor(t))},handleVolumeChange:e=>{if(!_||j)return;const t=e.target.value/100*N;!async function(e,t){let r=arguments.length>2&&void 0!==arguments[2]&&arguments[2];await w("".concat(e,"/player/volume"),{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({volume:t,relative:r})})}(r,Math.round(t))},toggleShuffle:()=>{_&&!j&&(async(e,t)=>{await w("".concat(e,"/player/shuffle_context"),{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({shuffle_context:t})})})(r,!q)},isConnected:J,error:Q,playlists:d,queue:y,contextUri:f,sleepTimerEnd:L,setSleepTimer:X,loadMorePlaylists:$,apiBaseUrl:r}},B={"tokyo-night":{"--red":"#f7768e","--orange":"#ff9e64","--yellow":"#e0af68","--weird":"#cfc9c2","--green":"#73daca","--cyan":"#7dcfff","--blue":"#7aa2f7","--magenta":"#bb9af7","--lightest":"#c0caf5","--lighter":"#a9b1d6","--light":"#9aa5ce","--grey":"#565f89","--dark":"#414868","--darker":"#24283b","--darkest":"#1a1b26"},"tokyo-night-light":{"--red":"#d92626","--orange":"#cf8217","--yellow":"#cfa117","--weird":"#b5b6ba","--green":"#248f47","--cyan":"#30b4e8","--blue":"#2f7de9","--magenta":"#5999ee","--lightest":"#272b3f","--lighter":"#3c4362","--light":"#4e5873","--grey":"#f7f7f8","--dark":"#ebecef","--darker":"#e0e1e6","--darkest":"#d6d7dc"},dracula:{"--red":"#ff5555","--orange":"#ffb86c","--yellow":"#f1fa8c","--weird":"#4a5882","--green":"#50fa7b","--cyan":"#8be9fd","--blue":"#bd93f9","--magenta":"#ff79c6","--lightest":"#f8f8f2","--lighter":"#f8f8f2","--light":"#6272a4","--grey":"#44475a","--dark":"#343746","--darker":"#282a36","--darkest":"#44475a"},nord:{"--red":"#bf616a","--orange":"#d08770","--yellow":"#ebcb8b","--weird":"#4c566a","--green":"#a3be8c","--cyan":"#88c0d0","--blue":"#88c0d0","--magenta":"#8fbcbb","--lightest":"#eceff4","--lighter":"#e5e9f0","--light":"#d8dee9","--grey":"#4c566a","--dark":"#3b4252","--darker":"#2e3440","--darkest":"#3b4252"},catppuccin:{"--red":"#f38ba8","--orange":"#fab387","--yellow":"#f9e2af","--weird":"#585b70","--green":"#a6e3a1","--cyan":"#89dceb","--blue":"#cba6f7","--magenta":"#f5c2e7","--lightest":"#cdd6f4","--lighter":"#bac2de","--light":"#a6adc8","--grey":"#585b70","--dark":"#28283e","--darker":"#1e1e2e","--darkest":"#313244"},"catppuccin-light":{"--red":"#d20f39","--orange":"#fe640b","--yellow":"#df8e1d","--weird":"#9ca0b0","--green":"#40a02b","--cyan":"#179299","--blue":"#8839ef","--magenta":"#dd7878","--lightest":"#2b2c3b","--lighter":"#4c4f69","--light":"#5c5f77","--grey":"#ffffff","--dark":"#f9fafb","--darker":"#eff1f5","--darkest":"#dce0e8"},gruvbox:{"--red":"#fb4934","--orange":"#fe8019","--yellow":"#fabd2f","--weird":"#7c6f64","--green":"#b8bb26","--cyan":"#8ec07c","--blue":"#d79921","--magenta":"#fabd2f","--lightest":"#fbf1c7","--lighter":"#ebdbb2","--light":"#928374","--grey":"#504945","--dark":"#3c3836","--darker":"#282828","--darkest":"#1d2021"},"gruvbox-light":{"--red":"#cc241d","--orange":"#d65d0e","--yellow":"#d79921","--weird":"#a89984","--green":"#98971a","--cyan":"#689d6a","--blue":"#d79921","--magenta":"#b57614","--lightest":"#1d2021","--lighter":"#3c3836","--light":"#504945","--grey":"#fefaec","--dark":"#fcf5d9","--darker":"#fbf1c7","--darkest":"#ebdbb2"},"one-dark":{"--red":"#e06c75","--orange":"#d19a66","--yellow":"#e5c07b","--weird":"#3e4451","--green":"#98c379","--cyan":"#56b6c2","--blue":"#61afef","--magenta":"#c678dd","--lightest":"#dcdfe5","--lighter":"#abb2bf","--light":"#7b8493","--grey":"#3e4451","--dark":"#31363f","--darker":"#282c34","--darkest":"#21252b"},"github-dark":{"--red":"#f85149","--orange":"#d29922","--yellow":"#e3b341","--weird":"#2f353c","--green":"#3fb950","--cyan":"#58a6ff","--blue":"#58a6ff","--magenta":"#bc8cff","--lightest":"#f0f6fc","--lighter":"#c9d1d9","--light":"#8b949e","--grey":"#30363d","--dark":"#21262d","--darker":"#0d1117","--darkest":"#010409"},"rose-pine":{"--red":"#eb6f92","--orange":"#ebbcba","--yellow":"#f6c177","--weird":"#524f67","--green":"#31748f","--cyan":"#9ccfd8","--blue":"#c4a7e7","--magenta":"#ebbcba","--lightest":"#e0def4","--lighter":"#e0def4","--light":"#6e6a86","--grey":"#524f67","--dark":"#26233a","--darker":"#191724","--darkest":"#1f1d2e"},solarized:{"--red":"#dc322f","--orange":"#cb4b16","--yellow":"#b58900","--weird":"#586e75","--green":"#859900","--cyan":"#2aa198","--blue":"#268bd2","--magenta":"#6c71c4","--lightest":"#fdf6e3","--lighter":"#eee8d5","--light":"#93a1a1","--grey":"#586e75","--dark":"#073642","--darker":"#002b36","--darkest":"#002b36"},"solarized-light":{"--red":"#dc322f","--orange":"#cb4b16","--yellow":"#b58900","--weird":"#93a1a1","--green":"#859900","--cyan":"#2aa198","--blue":"#268bd2","--magenta":"#6c71c4","--lightest":"#002b36","--lighter":"#073642","--light":"#586e75","--grey":"#eee8d5","--dark":"#fdf6e3","--darker":"#fdf6e3","--darkest":"#eee8d5"},"ayu-mirage":{"--red":"#f07178","--orange":"#ffad66","--yellow":"#ffd173","--weird":"#434756","--green":"#d5ff80","--cyan":"#73d0ff","--blue":"#ffad66","--magenta":"#f28779","--lightest":"#e6e1cf","--lighter":"#cccac2","--light":"#5c6773","--grey":"#575c70","--dark":"#2d3243","--darker":"#1f2430","--darkest":"#1a1e2a"}},L=Object.keys(B),V="spotify-player-theme";function A(e){"undefined"!=typeof document&&(document.head.appendChild(document.createElement("style")).textContent=e)}A(".spotify-player-placeholder-album{border-radius:8px;background: var(--darker);display: flex;aspect-ratio: 1/1;width: 100%;align-items: center;justify-content: center;box-shadow: 0 4px 8px rgba(0,0,0,0.2);position: relative;overflow: hidden;border: 2px solid var(--grey);background-image: linear-gradient(135deg,var(--darker) 25%,var(--blue) 25%,var(--blue) 50%,var(--darker) 50%,var(--darker) 75%,var(--blue) 75%);background-size: 40px 40px;animation: diagonal-lines 2s linear infinite;}.spotify-player-placeholder-icon{font-size:1.2rem;color: var(--lighter);display: flex;align-items: center;justify-content: center;position: relative;z-index: 1;}.spotify-player-placeholder-text{font-weight:bold;color: var(--lightest);text-align: center;background-color: var(--darker);padding: 0.4em;border-radius: 0.4em;}");const I=()=>e.createElement("div",{className:"spotify-player-placeholder-album"},e.createElement("div",{className:"spotify-player-placeholder-icon"},e.createElement("span",{className:"spotify-player-placeholder-text"},"Stopped")));A('.spotify-player-album-card-wrapper{position:relative;flex-shrink: 1;border-radius: 0.4em;overflow: visible;display: flex;align-items: center;justify-content: center;z-index: 1;transition: width 0.3s ease,height 0.3s ease,filter 0.3s ease,z-index 0s;background: var(--gradient-border,linear-gradient(to right,#000,#333));aspect-ratio: 1/1;width: 100%;max-height: 100%;}.spotify-player-album-card-wrapper::after{content:"";position: absolute;top: -6px;left: -6px;right: -6px;bottom: -6px;border: 3px solid var(--darkest);border-radius: inherit;background: radial-gradient(circle at 50% 50%,rgba(255,255,255,0.4),transparent);box-shadow: inset 0px 4px 15px rgba(0,0,0,0.8);z-index: 4;pointer-events: none;overflow: hidden;}.spotify-player-album-card-wrapper::before{content:"";position: absolute;background: var(--gradient-border);border-radius: inherit;z-index: 1;opacity: 0.6;animation: pulsate-glow 4s infinite alternate ease-in-out;transition: all 0.3s ease;}@keyframes pulsate-glow{0%{filter:blur(8px);top: -0.15em;left: -0.15em;right: -0.15em;bottom: -0.15em;}50%{filter:blur(18px);top: -0.25em;left: -0.25em;right: -0.25em;bottom: -0.25em;}100%{filter:blur(8px);top: -0.15em;left: -0.15em;right: -0.15em;bottom: -0.15em;}}@container (min-width: 0px){.spotify-player-album-card-wrapper{width:min(100cqi, 100cqb);}}.spotify-player-album-card-wrapper:hover{filter:brightness(1.25);}.spotify-player-album-card-container{position:relative;width: 100%;height: auto;padding: 0;overflow: visible;box-sizing: border-box;z-index: 5;border-radius: inherit;}.spotify-player-album-card-container-border{position:absolute;top: -4px;left: -4px;right: -4px;bottom: -4px;border-radius: inherit;background: var(--gradient-border,linear-gradient(to right,var(--blue),var(--lighter)));pointer-events: none;z-index: 3;}.spotify-player-album-card-image-container{position:relative;width: 100%;height: 100%;border-radius: inherit;box-sizing: border-box;overflow: hidden;z-index: 6;}.spotify-player-album-card-image-container::before{content:"";position: absolute;top: 0;left: 0;right: 0;bottom: 0;border-radius: inherit;background: linear-gradient(to right,rgba(0,0,0,0.5),rgba(0,0,0,0.2) 15%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,0.2) 85%,rgba(0,0,0,0.5));pointer-events: none;z-index: 9;}.spotify-player-album-card-image{width:100%;height: auto;object-fit: cover;display: block;aspect-ratio: 1/1;border-radius: inherit;box-sizing: border-box;position: relative;z-index: 7;transition: all 0.3s ease;pointer-events: none;}.spotify-player-album-card-title-container{position:absolute;top: 0;left: 0;right: 0;background: linear-gradient(to bottom,rgba(10,10,10,0.8),rgba(20,20,20,0.8),rgba(30,30,30,0.7),rgba(40,40,40,0.5),rgba(50,50,50,0.3));border-top-left-radius: 0.1em;border-top-right-radius: 0.1em;padding: 0.5em;box-sizing: border-box;z-index: 10;transition: all 0.3s ease;border-top-left-radius: inherit;border-top-right-radius: inherit;}.spotify-player-album-card-title{position:relative;font-size: 1em;font-weight: bold;text-align: center;background: linear-gradient(135deg,#f5f5dc,#e6e6e6,#d4d4d4);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;color: transparent;font-family: \'Cinzel\',serif;box-sizing: border-box;z-index: 11;transition: all 0.3s ease;overflow: visible;filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.6));}@supports not (-webkit-background-clip: text){.spotify-player-album-card-title{color:#d4af37;}}.spotify-player-album-card-subtitle{position:absolute;bottom: 0;left: 0;right: 0;background: linear-gradient(0deg,var(--darkest),rgba(20,20,30,0.9));background-color: var(--darker);background-blend-mode: overlay;background-size: cover;opacity: 0.8;color: var(--lighter);font-style: italic;font-size: 0.6em;text-align: center;padding: 0.3em;padding-left: 0.1em;padding-right: 0.1em;border-top: 2px solid var(--darkest);border-bottom-left-radius: inherit;border-bottom-right-radius: inherit;transition: all 0.3s ease;font-family: \'Cinzel\',serif;box-sizing: border-box;z-index: 10;}');const U=50,W=r=>{let{title:o,subtitle:n,image:i,isStopped:s,onClick:c}=r;const[p,d]=t(!1),[u,y]=t(""),m=l(),[f,h]=t((()=>(new Date).getTime()/200%360));a((()=>{if(i){const e=new Image;e.crossOrigin="Anonymous",e.src=i,e.onload=()=>{const t=(e=>{const t=m.current,r=t.getContext("2d");t.width=e.width,t.height=e.height,r.drawImage(e,0,0,t.width,t.height);const a=r.getImageData(0,0,t.width,t.height).data,l={};for(let e=0;e<a.length;e+=4){const t=Math.round(a[e]/U)*U,r=Math.round(a[e+1]/U)*U,o=Math.round(a[e+2]/U)*U,n="rgb(".concat(t,",").concat(r,",").concat(o,")");l[n]=(l[n]||0)+1}const o=Object.entries(l).sort(((e,t)=>t[1]-e[1])).slice(0,3).map((e=>e[0]));return o.length>1?"linear-gradient(to right, ".concat(o.join(", "),")"):"linear-gradient(to right, ".concat(o[0],", ").concat(o[0],")")})(e);y(t),d(!0)},e.onerror=()=>{console.error("Failed to load album art."),y("linear-gradient(to right, #000, #333)"),d(!0)}}}),[i]),a((()=>{const e=setInterval((()=>{const e=(new Date).getTime();h(e/200%360)}),300);return()=>clearInterval(e)}),[]);const b="".concat(u.replace("to right","".concat(f,"deg")));return e.createElement("div",{className:"spotify-player-album-card-wrapper",style:{"--gradient-border":b,opacity:p||s?1:0,cursor:c?"pointer":void 0},onClick:c},e.createElement("canvas",{ref:m,style:{display:"none"}}),s&&!i?e.createElement("div",{className:"spotify-player-album-card-image"},e.createElement(I,null)):e.createElement("div",{className:"spotify-player-album-card-container"},e.createElement("div",{className:"spotify-player-album-card-container-border"}),e.createElement("div",{className:"spotify-player-album-card-image-container"},e.createElement("img",{className:"spotify-player-album-card-image",alt:"".concat(o," - ").concat(n),src:i})),o&&e.createElement("div",{className:"spotify-player-album-card-title-container"},e.createElement("div",{className:"spotify-player-album-card-title"},o)),e.createElement("div",{className:"spotify-player-album-card-subtitle"},n)))};var D={color:void 0,size:void 0,className:void 0,style:void 0,attr:void 0},F=e.createContext&&e.createContext(D),R=["attr","size","title"];function J(e,t){if(null==e)return{};var r,a,l=function(e,t){if(null==e)return{};var r={};for(var a in e)if(Object.prototype.hasOwnProperty.call(e,a)){if(t.indexOf(a)>=0)continue;r[a]=e[a]}return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)r=o[a],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(l[r]=e[r])}return l}function Q(){return Q=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},Q.apply(this,arguments)}function $(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}function X(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?$(Object(r),!0).forEach((function(t){G(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):$(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function G(e,t,r){var a;return(t="symbol"==typeof(a=function(e,t){if("object"!=typeof e||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var a=r.call(e,t);if("object"!=typeof a)return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(t,"string"))?a:a+"")in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function Y(t){return t&&t.map(((t,r)=>e.createElement(t.tag,X({key:r},t.attr),Y(t.child))))}function K(t){return r=>e.createElement(Z,Q({attr:X({},t.attr)},r),Y(t.child))}function Z(t){var r=r=>{var a,{attr:l,size:o,title:n}=t,i=J(t,R),s=o||r.size||"1em";return r.className&&(a=r.className),t.className&&(a=(a?a+" ":"")+t.className),e.createElement("svg",Q({stroke:"currentColor",fill:"currentColor",strokeWidth:"0"},r.attr,l,i,{className:a,style:X(X({color:t.color||r.color},r.style),t.style),height:s,width:s,xmlns:"http://www.w3.org/2000/svg"}),n&&e.createElement("title",null,n),t.children)};return void 0!==F?e.createElement(F.Consumer,null,(e=>r(e))):r(D)}function ee(e){return K({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M336.77 30.56A240 240 0 0 0 137.145 48 240 240 0 0 0 20.162 298.94l142.405-25.665c-6.87-38.47 10.598-78.89 46.42-99.323 25.063-14.296 53.977-15.877 79.228-6.808L336.77 30.56zm52.936 26.914l-80.56 120.245c11.773 7.904 21.943 18.56 29.43 31.683 25.942 45.482 10.03 103.645-35.452 129.588-43.752 24.957-99.236 11.178-126.487-30.395L55.644 388a240 240 0 0 0 319.322 76.943 240 240 0 0 0 89.56-327.382 240 240 0 0 0-74.82-80.086zM290.19 187.387c-22.148-10.942-49.142-11-72.286 2.2-30.09 17.163-44.195 51.33-37.098 83.402 1.637 7.4 4.404 14.687 8.364 21.63 21.123 37.033 68.003 49.86 105.035 28.737s49.858-68.003 28.736-105.035c-7.92-13.887-19.463-24.37-32.75-30.935zm-15.607 33.635a40 40 0 0 1 16.218 15.632 40 40 0 0 1-14.927 54.563 40 40 0 0 1-54.56-14.927 40 40 0 0 1-4.31-11.153 40 40 0 0 1 19.232-43.41 40 40 0 0 1 38.348-.705zm-109.206 63.764L27.33 327.966a240 240 0 0 0 13.3 34.151L170.765 298.3c-2.17-4.418-3.96-8.937-5.388-13.514z"},child:[]}]})(e)}function te(e){return K({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M73 25v238h366V25H283v16h140v192H89V41h140V25H73zm174 0v16h18V25h-18zM107 59v156h298V59H107zM71.03 281l-43.5 174H484.5L441 281h-29.9l20 96h-99.6l16 64H163.8l20-64H80.93l19.97-96H71.03zm48.27 0l-2.9 14H147l2.3-14h-30zm48.4 0l-2.3 14h30.7l1.7-14h-30.1zm48.2 0l-1.7 14H247v-14h-31.1zm49.1 0v14h32.8l-1.7-14H265zm49.2 0l1.7 14h30.7l-2.3-14h-30.1zm48.5 0l2.3 14h30.6l-2.9-14h-30zm-250 32l-3 14h31.9l2.4-14h-31.3zm49.7 0l-2.4 14h32.1l1.7-14h-31.4zm49.5 0l-1.7 14H247v-14h-35.1zm53.1 0v14h36.8l-1.7-14H265zm53.2 0l1.7 14H352l-2.4-14h-31.4zm49.8 0l2.4 14h31.9l-3-14H368zm-262 32l-2.9 14h33.2l2.3-14H106zm51 0l-2.3 14h33.4l1.7-14H157zm50.9 0l-1.7 14H247v-14h-39.1zm57.1 0v14h40.8l-1.7-14H265zm57.2 0l1.7 14h33.4l-2.3-14h-32.8zm51.2 0l2.3 14h33.2l-2.9-14h-32.6zm-170.8 32l-14.4 46h136.3L313 377H202.6zM28 473v18h456v-18H28z"},child:[]}]})(e)}function re(e){return K({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M294.8 26.57L238 60.37l7.8 13.17L281 52.59 270.8 118l6.3 10.6L336 93.53l-7.8-13.17-37.3 22.14L301 37.12l-6.2-10.55zM147.1 60.55A224 224 0 0 0 32 256a224 224 0 0 0 224 224 224 224 0 0 0 214.9-161.2A208 208 0 0 1 320 384a208 208 0 0 1-208-208 208 208 0 0 1 35.1-115.45zm244.5 52.05l-6.9 16.5 44.1 18.4-68.3 35.9-5.5 13.2 73.7 30.8 6.9-16.5-46.7-19.5 68.3-35.9 5.5-13.2-71.1-29.7zm-115 64l-97.8 35 8.1 22.7 60.6-21.7-35.4 97.9 6.5 18.1L320 292.4l-8.1-22.7-64.2 23 35.4-97.9-6.5-18.2z"},child:[]}]})(e)}function ae(e){return K({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M60.307 17.998A201.117 201.117 0 0 0 55.002 64c0 78.375 45.002 146.35 110.539 179.486-8.783-10.556-16.478-22.658-23.1-35.912-42.318-33.5-69.443-85.327-69.443-143.574 0-15.895 2.035-31.305 5.832-46.002H60.307zm66.644 0c-5.142 14.384-7.949 29.87-7.949 46.002 0 51.245 28.27 95.989 70.031 119.482-6.264-10.227-11.17-21.604-15.023-33.158C151.2 128.657 136.998 98.02 136.998 64c0-16.319 3.275-31.856 9.193-46.002h-19.24zm72.445 0C189.156 30.565 183.002 46.585 183.002 64c0 26.543 14.293 49.845 35.572 62.623-3.806-9.484-6.58-20.417-8.332-32.014-5.84-8.738-9.244-19.259-9.244-30.609 0-11.35 3.403-21.87 9.244-30.61a168.14 168.14 0 0 1 3.053-15.392h-13.899zm99.31 0a168.14 168.14 0 0 1 3.052 15.393c5.84 8.738 9.244 19.259 9.244 30.609 0 11.35-3.403 21.87-9.244 30.61-1.751 11.596-4.526 22.529-8.332 32.013 21.279-12.778 35.572-36.08 35.572-62.623 0-17.415-6.153-33.435-16.394-46.002h-13.899zm67.103 0c5.918 14.146 9.193 29.683 9.193 46.002 0 34.02-14.202 64.657-37.012 86.324-3.852 11.554-8.76 22.93-15.023 33.158C364.728 159.99 392.998 115.245 392.998 64c0-16.132-2.807-31.618-7.95-46.002h-19.24zm67.36 0A183.653 183.653 0 0 1 439.003 64c0 58.247-27.125 110.074-69.443 143.574-6.622 13.254-14.317 25.356-23.1 35.912C411.996 210.35 456.998 142.375 456.998 64c0-15.825-1.837-31.226-5.305-46.002H433.17zM256 40.998c-12.81 0-23.002 10.192-23.002 23.002 0 12.81 10.192 23.002 23.002 23.002 12.81 0 23.002-10.192 23.002-23.002 0-12.81-10.192-23.002-23.002-23.002zm-20.35 58.537L119.398 477.354l17.204 5.292 13.15-42.74L256 415.39l106.248 24.517 13.15 42.74 17.204-5.292L276.35 99.535a40.612 40.612 0 0 1-17.192 5.328l49.654 161.381L256 283.848l-52.813-17.604 49.655-161.38a40.612 40.612 0 0 1-17.192-5.329zM197.893 283.45l29.65 9.885-36.428 12.143 6.778-22.028zm116.214 0l6.778 22.028-36.428-12.143 29.65-9.885zM256 302.82l52.652 17.55L256 339.516l-52.65-19.147L256 302.82zm-73.074 29.275l46.74 16.998-58.518 21.28 11.778-38.278zm146.148 0l11.778 38.277-58.52-21.28 46.742-16.997zM256 358.666l64.354 23.402L256 396.92l-64.355-14.852L256 358.666zm-92.16 35.455l52.144 12.033-60.115 13.873 7.97-25.906zm184.318 0l7.973 25.904-60.113-13.87 52.14-12.034z"},child:[]}]})(e)}function le(e){return K({attr:{viewBox:"0 0 448 512"},child:[{tag:"path",attr:{d:"M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"},child:[]}]})(e)}function oe(e){return K({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M499.99 176h-59.87l-16.64-41.6C406.38 91.63 365.57 64 319.5 64h-127c-46.06 0-86.88 27.63-103.99 70.4L71.87 176H12.01C4.2 176-1.53 183.34.37 190.91l6 24C7.7 220.25 12.5 224 18.01 224h20.07C24.65 235.73 16 252.78 16 272v48c0 16.12 6.16 30.67 16 41.93V416c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h256v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-54.07c9.84-11.25 16-25.8 16-41.93v-48c0-19.22-8.65-36.27-22.07-48H494c5.51 0 10.31-3.75 11.64-9.09l6-24c1.89-7.57-3.84-14.91-11.65-14.91zm-352.06-17.83c7.29-18.22 24.94-30.17 44.57-30.17h127c19.63 0 37.28 11.95 44.57 30.17L384 208H128l19.93-49.83zM96 319.8c-19.2 0-32-12.76-32-31.9S76.8 256 96 256s48 28.71 48 47.85-28.8 15.95-48 15.95zm320 0c-19.2 0-48 3.19-48-15.95S396.8 256 416 256s32 12.76 32 31.9-12.8 31.9-32 31.9z"},child:[]}]})(e)}function ne(e){return K({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"},child:[]}]})(e)}function ie(e){return K({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"},child:[]}]})(e)}function se(e){return K({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"},child:[]}]})(e)}function ce(e){return K({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M61.77 401l17.5-20.15a19.92 19.92 0 0 0 5.07-14.19v-3.31C84.34 356 80.5 352 73 352H16a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h22.83a157.41 157.41 0 0 0-11 12.31l-5.61 7c-4 5.07-5.25 10.13-2.8 14.88l1.05 1.93c3 5.76 6.29 7.88 12.25 7.88h4.73c10.33 0 15.94 2.44 15.94 9.09 0 4.72-4.2 8.22-14.36 8.22a41.54 41.54 0 0 1-15.47-3.12c-6.49-3.88-11.74-3.5-15.6 3.12l-5.59 9.31c-3.72 6.13-3.19 11.72 2.63 15.94 7.71 4.69 20.38 9.44 37 9.44 34.16 0 48.5-22.75 48.5-44.12-.03-14.38-9.12-29.76-28.73-34.88zM496 224H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM16 160h64a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8H64V40a8 8 0 0 0-8-8H32a8 8 0 0 0-7.14 4.42l-8 16A8 8 0 0 0 24 64h8v64H16a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8zm-3.91 160H80a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8H41.32c3.29-10.29 48.34-18.68 48.34-56.44 0-29.06-25-39.56-44.47-39.56-21.36 0-33.8 10-40.46 18.75-4.37 5.59-3 10.84 2.8 15.37l8.58 6.88c5.61 4.56 11 2.47 16.12-2.44a13.44 13.44 0 0 1 9.46-3.84c3.33 0 9.28 1.56 9.28 8.75C51 248.19 0 257.31 0 304.59v4C0 316 5.08 320 12.09 320z"},child:[]}]})(e)}function pe(e){return K({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M470.38 1.51L150.41 96A32 32 0 0 0 128 126.51v261.41A139 139 0 0 0 96 384c-53 0-96 28.66-96 64s43 64 96 64 96-28.66 96-64V214.32l256-75v184.61a138.4 138.4 0 0 0-32-3.93c-53 0-96 28.66-96 64s43 64 96 64 96-28.65 96-64V32a32 32 0 0 0-41.62-30.49z"},child:[]}]})(e)}function de(e){return K({attr:{viewBox:"0 0 448 512"},child:[{tag:"path",attr:{d:"M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z"},child:[]}]})(e)}function ue(e){return K({attr:{viewBox:"0 0 448 512"},child:[{tag:"path",attr:{d:"M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"},child:[]}]})(e)}function ye(e){return K({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"},child:[]}]})(e)}function me(e){return K({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M504.971 359.029c9.373 9.373 9.373 24.569 0 33.941l-80 79.984c-15.01 15.01-40.971 4.49-40.971-16.971V416h-58.785a12.004 12.004 0 0 1-8.773-3.812l-70.556-75.596 53.333-57.143L352 336h32v-39.981c0-21.438 25.943-31.998 40.971-16.971l80 79.981zM12 176h84l52.781 56.551 53.333-57.143-70.556-75.596A11.999 11.999 0 0 0 122.785 96H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12zm372 0v39.984c0 21.46 25.961 31.98 40.971 16.971l80-79.984c9.373-9.373 9.373-24.569 0-33.941l-80-79.981C409.943 24.021 384 34.582 384 56.019V96h-58.785a12.004 12.004 0 0 0-8.773 3.812L96 336H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h110.785c3.326 0 6.503-1.381 8.773-3.812L352 176h32z"},child:[]}]})(e)}function fe(e){return K({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M500.33 0h-47.41a12 12 0 0 0-12 12.57l4 82.76A247.42 247.42 0 0 0 256 8C119.34 8 7.9 119.53 8 256.19 8.1 393.07 119.1 504 256 504a247.1 247.1 0 0 0 166.18-63.91 12 12 0 0 0 .48-17.43l-34-34a12 12 0 0 0-16.38-.55A176 176 0 1 1 402.1 157.8l-101.53-4.87a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12h200.33a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12z"},child:[]}]})(e)}function he(e){return K({attr:{viewBox:"0 0 448 512"},child:[{tag:"path",attr:{d:"M64 468V44c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12v176.4l195.5-181C352.1 22.3 384 36.6 384 64v384c0 27.4-31.9 41.7-52.5 24.6L136 292.7V468c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12z"},child:[]}]})(e)}function be(e){return K({attr:{viewBox:"0 0 448 512"},child:[{tag:"path",attr:{d:"M384 44v424c0 6.6-5.4 12-12 12h-48c-6.6 0-12-5.4-12-12V291.6l-195.5 181C95.9 489.7 64 475.4 64 448V64c0-27.4 31.9-41.7 52.5-24.6L312 219.3V44c0-6.6 5.4-12 12-12h48c6.6 0 12 5.4 12 12z"},child:[]}]})(e)}function ge(e){return K({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M212.333 224.333H12c-6.627 0-12-5.373-12-12V12C0 5.373 5.373 0 12 0h48c6.627 0 12 5.373 12 12v78.112C117.773 39.279 184.26 7.47 258.175 8.007c136.906.994 246.448 111.623 246.157 248.532C504.041 393.258 393.12 504 256.333 504c-64.089 0-122.496-24.313-166.51-64.215-5.099-4.622-5.334-12.554-.467-17.42l33.967-33.967c4.474-4.474 11.662-4.717 16.401-.525C170.76 415.336 211.58 432 256.333 432c97.268 0 176-78.716 176-176 0-97.267-78.716-176-176-176-58.496 0-110.28 28.476-142.274 72.333h98.274c6.627 0 12 5.373 12 12v48c0 6.627-5.373 12-12 12z"},child:[]}]})(e)}function ve(e){return K({attr:{viewBox:"0 0 384 512"},child:[{tag:"path",attr:{d:"M215.03 72.04L126.06 161H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V89.02c0-21.47-25.96-31.98-40.97-16.98zm123.2 108.08c-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61C327.98 229.28 336 242.62 336 257c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88s-17.54-61.32-45.78-76.87z"},child:[]}]})(e)}function ke(e){return K({attr:{viewBox:"0 0 576 512"},child:[{tag:"path",attr:{d:"M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zm233.32-51.08c-11.17-7.33-26.18-4.24-33.51 6.95-7.34 11.17-4.22 26.18 6.95 33.51 66.27 43.49 105.82 116.6 105.82 195.58 0 78.98-39.55 152.09-105.82 195.58-11.17 7.32-14.29 22.34-6.95 33.5 7.04 10.71 21.93 14.56 33.51 6.95C528.27 439.58 576 351.33 576 256S528.27 72.43 448.35 19.97zM480 256c0-63.53-32.06-121.94-85.77-156.24-11.19-7.14-26.03-3.82-33.12 7.46s-3.78 26.21 7.41 33.36C408.27 165.97 432 209.11 432 256s-23.73 90.03-63.48 115.42c-11.19 7.14-14.5 22.07-7.41 33.36 6.51 10.36 21.12 15.14 33.12 7.46C447.94 377.94 480 319.54 480 256zm-141.77-76.87c-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61C327.98 228.28 336 241.63 336 256c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88s-17.54-61.32-45.78-76.86z"},child:[]}]})(e)}A('.spotify-player-header{display:flex;flex-direction: row;align-items: center;flex-wrap: wrap;row-gap: 0.5em;width: 100%;}.spotify-player-tabs{display:flex;gap: 0.5em;justify-content: center;flex: 1 1 auto;}.spotify-player-default-layout .spotify-player-tabs,.spotify-player-widescreen-layout .spotify-player-tabs{margin-left:0.5em;}.spotify-player-portrait-layout .spotify-player-header{flex-direction:column;align-items: stretch;}.spotify-player-portrait-layout .spotify-player-tabs{justify-content:space-evenly;}.spotify-player-tab-badge{position:relative;}.spotify-player-tab-badge::after{content:"";position: absolute;top: 2px;right: 2px;width: 6px;height: 6px;border-radius: 50%;background-color: var(--accent-color);}.spotify-player-tab{background-color:var(--button-background);color: var(--button-text-color);border: 1px solid var(--button-border);border-radius: 0.3em;padding: 0.4em 1em;font-size: 1rem;display: flex;align-items: center;justify-content: center;gap: 0.5em;transition: all 0.2s ease-in-out;cursor: pointer;flex: 1;}.spotify-player-tab:hover{background-color:var(--accent-color);color: var(--darkest);}.spotify-player-tab:disabled{background-color:var(--button-border);color: var(--description-color);cursor: not-allowed;}.spotify-player-tab-active{background-color:var(--button-hover-background);color: var(--accent-color);font-weight: bold;}.spotify-player-back-button{background:none;border: 1px solid var(--grey);color: var(--lightest);cursor: pointer;height: 2em;padding: 0;border-radius: 50%;font-size: 1rem;display: flex;align-items: center;justify-content: center;flex-shrink: 0;overflow: hidden;transition: width 0.2s ease,height 0.2s ease,opacity 0.2s ease,transform 0.2s ease,border-color 0.2s ease,margin 0.2s ease;}.spotify-player-back-visible{width:2em;opacity: 1;transform: translateX(0);margin-right: 0.5em;}.spotify-player-back-hidden{width:0;height: 0;opacity: 0;border-color: transparent;pointer-events: none;transform: translateX(-0.5em);margin: 0;padding: 0;}.spotify-player-back-button:hover{background-color:var(--accent-color);color: var(--darkest);transition: background-color 0.15s ease,color 0.15s ease,width 0.2s ease,opacity 0.2s ease,transform 0.2s ease;}.spotify-player-device-title{display:flex;align-items: center;gap: 1em;text-align: center;background-color: var(--dark);flex: 1 1 auto;min-width: 0;justify-content: center;box-shadow: 0 0 10px rgba(0,0,0,0.5);padding: 0.4em;border-radius: 0.2em;overflow: hidden;}.spotify-player-device-title h4{font-weight:bold;font-size: 1.5rem;color: var(--weird);margin: 0;transition: transform 0.2s,color 0.3s ease;}.spotify-player-device-title:hover h4{transform:scale(1.1);color: var(--yellow);}.spotify-player-connected-icon{font-size:2rem;color: var(--lightest);}.spotify-player-connected-icon.spotify-player-disconnected{color:var(--red);}.spotify-player-connected-icon.spotify-player-rotating{animation:rotate 2s linear infinite;color: var(--blue);}@keyframes rotate{0%{transform:rotate(0deg);}25%{transform:rotate(20deg);}50%{transform:rotate(0deg);}75%{transform:rotate(-20deg);}100%{transform:rotate(-0deg);}}');const we={computer:te,tablet:function(e){return K({attr:{viewBox:"0 0 448 512"},child:[{tag:"path",attr:{d:"M400 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM224 480c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm176-108c0 6.6-5.4 12-12 12H60c-6.6 0-12-5.4-12-12V60c0-6.6 5.4-12 12-12h328c6.6 0 12 5.4 12 12v312z"},child:[]}]})(e)},smartphone:function(e){return K({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M160 32c-16 0-32 16-32 32v384c0 16 16 32 32 32h192c16 0 32-16 32-32V64c0-16-16-32-32-32H160zm21.68 23h96v18h-96V55zM304 55h32v18h-32V55zM154 96h204v320H154V96zm70 342h63.984c16 0 16 16 16 16v6H208v-6s0-16 16-16z"},child:[]}]})(e)},speaker:function(e){return K({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M275.5 96l-96 96h-96v128h96l96 96V96zm51.46 27.668l-4.66 17.387c52.066 13.95 88.2 61.04 88.2 114.945 0 53.904-36.134 100.994-88.2 114.945l4.66 17.387C386.81 372.295 428.5 317.962 428.5 256c0-61.963-41.69-116.295-101.54-132.332zm-12.425 46.365l-4.658 17.387C340.96 195.748 362.5 223.822 362.5 256s-21.54 60.252-52.623 68.58l4.658 17.387C353.402 331.552 380.5 296.237 380.5 256c0-40.238-27.098-75.552-65.965-85.967zm-12.424 46.363l-4.657 17.387C307.55 236.49 314.5 245.547 314.5 256s-6.95 19.51-17.047 22.217l4.658 17.387c17.884-4.792 30.39-21.09 30.39-39.604 0-18.513-12.506-34.812-30.39-39.604z"},child:[]}]})(e)},tv:function(e){return K({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M132.992 48.756l-9.984 14.976 77.287 51.524c4.32-4.192 9.542-8.012 15.703-11.162l-83.006-55.338zm246.016 0l-83.006 55.338c6.16 3.15 11.383 6.97 15.703 11.162l77.287-51.524-9.984-14.976zM256 113.244c-22 0-35.334 7.06-43.637 15.363-4.703 4.704-7.58 9.97-9.316 14.637h105.906c-1.736-4.668-4.613-9.933-9.316-14.637-8.303-8.303-21.637-15.363-43.637-15.363zm-191.936 48c-5.044 0-11.106 2.784-15.697 7.37-4.59 4.584-7.367 10.63-7.367 15.63v279h430V184.2c.026-5.457-2.764-11.393-7.227-15.87-4.463-4.477-10.346-7.086-14.826-7.086H64.064zm30.295 23h257.745c10.374 0 20.79 6.818 26.776 16H112c-16 0-32 16-32 32v160c25.924-162.54 145.877-185.697 299.016-191.795 3.106 4.836 4.984 10.315 4.984 15.794v192c0 16-16 32-33.88 32H95.35c-15.35 0-31.35-16-31.35-32v-192c0-16 16-32 30.36-32zm328.663 7c13.7 0 25 11.3 25 25s-11.3 25-25 25-25-11.3-25-25 11.3-25 25-25zm-23.023 144h48v18h-48v-18zm0 32h48v18h-48v-18zm0 32h48v18h-48v-18z"},child:[]}]})(e)},avr:ae,stb:pe,audio_dongle:ee,game_console:function(e){return K({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M155.084 125.945c-.46 0-.926.01-1.397.034-5.646.285-12.097 2.464-20.707 8.204-21.824 14.55-51.912 60.395-67.834 110.005-15.92 49.61-18.046 102.25 5.936 132.966 4.142 5.306 13.387 8.93 23.756 8.846 10.216-.084 20.682-3.838 26.482-9.44 1.022-1.47 9.296-13.336 21.39-27.404 12.863-14.96 28.716-31.686 45.835-38.777 41.863-17.34 93.024-17.34 134.887 0 17.118 7.092 32.97 23.818 45.834 38.778 12.095 14.068 20.37 25.933 21.39 27.404 5.8 5.602 16.267 9.356 26.483 9.44 10.368.085 19.612-3.54 23.755-8.846 23.973-30.704 21.885-83.575 5.978-133.287-15.907-49.713-46.054-95.526-67.783-109.624-11.498-7.46-19.198-8.73-26.285-7.64-7.088 1.093-14.347 5.197-22.866 11.07-17.038 11.746-38.898 30.02-73.952 30.02-35.212 0-57.115-18.514-74.13-30.356-8.505-5.92-15.73-10.025-22.743-11.078-1.315-.198-2.65-.312-4.03-.317zm212.904 48.75a16 16 0 0 1 16 16 16 16 0 0 1-16 16 16 16 0 0 1-16-16 16 16 0 0 1 16-16zM135 183h18v32h32v18h-32v32h-18v-32h-32v-18h32v-32zm200.988 23.695a16 16 0 0 1 16 16 16 16 0 0 1-16 16 16 16 0 0 1-16-16 16 16 0 0 1 16-16zm64 0a16 16 0 0 1 16 16 16 16 0 0 1-16 16 16 16 0 0 1-16-16 16 16 0 0 1 16-16zm-32 32a16 16 0 0 1 16 16 16 16 0 0 1-16 16 16 16 0 0 1-16-16 16 16 0 0 1 16-16zm-160 7h32v18h-32v-18zm64 0h27.897v18h-27.897v-18z"},child:[]}]})(e)},cast_video:function(e){return K({attr:{viewBox:"0 0 512 512"},child:[{tag:"path",attr:{d:"M447.8,64H64c-23.6,0-42.7,19.1-42.7,42.7v63.9H64v-63.9h383.8v298.6H298.6V448H448c23.6,0,42.7-19.1,42.7-42.7V106.7 C490.7,83.1,471.4,64,447.8,64z M21.3,383.6L21.3,383.6l0,63.9h63.9C85.2,412.2,56.6,383.6,21.3,383.6L21.3,383.6z M21.3,298.6V341 c58.9,0,106.6,48.1,106.6,107h42.7C170.7,365.6,103.7,298.7,21.3,298.6z M213.4,448h42.7c-0.5-129.5-105.3-234.3-234.8-234.6l0,42.4 C127.3,255.6,213.3,342,213.4,448z"},child:[]}]})(e)},cast_audio:ee,automobile:oe,smartwatch:function(e){return K({attr:{viewBox:"0 0 24 24"},child:[{tag:"path",attr:{fill:"none",d:"M0 0h24v24H0z",opacity:".1"},child:[]},{tag:"path",attr:{d:"M20 12c0-2.54-1.19-4.81-3.04-6.27L16 0H8l-.95 5.73C5.19 7.19 4 9.45 4 12s1.19 4.81 3.05 6.27L8 24h8l.96-5.73A7.976 7.976 0 0 0 20 12zM6 12c0-3.31 2.69-6 6-6s6 2.69 6 6-2.69 6-6 6-6-2.69-6-6z"},child:[]}]})(e)},chromebook:te,car_thing:oe,observer:ye,home_thing:ae},xe=t=>{let{isConnected:r,deviceName:a,isPlaying:l,deviceType:o,isStopped:n,activeTab:i,setActiveTab:s,navStack:c,onBack:p,sleepTimerEnd:d}=t;const u=n?re:we[null==o?void 0:o.toLowerCase()]||ye,y=c&&c.length>0,m=d&&d>Date.now();return e.createElement("div",{className:"spotify-player-header"},e.createElement("button",{className:"spotify-player-back-button ".concat(y?"spotify-player-back-visible":"spotify-player-back-hidden"),onClick:p,title:"Back",tabIndex:y?0:-1},e.createElement(le,null)),e.createElement("div",{className:"spotify-player-device-title"},r?e.createElement(u,{className:l?"spotify-player-connected-icon spotify-player-rotating":"spotify-player-connected-icon"}):e.createElement(ie,{className:"spotify-player-connected-icon spotify-player-disconnected"}),e.createElement("h4",null,r?a:"Disconnected")),e.createElement("div",{className:"spotify-player-tabs"},e.createElement("button",{className:"spotify-player-tab ".concat("Info"===i?"spotify-player-tab-active":""),onClick:()=>s("Info")},e.createElement(se,null)),e.createElement("button",{className:"spotify-player-tab ".concat("Playlists"===i?"spotify-player-tab-active":""),onClick:()=>s("Playlists"),disabled:!r},e.createElement(pe,null)),e.createElement("button",{className:"spotify-player-tab ".concat("Queue"===i?"spotify-player-tab-active":""),onClick:()=>s("Queue"),disabled:!r||n},e.createElement(ce,null)),e.createElement("button",{className:"spotify-player-tab ".concat("Settings"===i?"spotify-player-tab-active":""," ").concat(m?"spotify-player-tab-badge":""),onClick:()=>s("Settings")},e.createElement(ne,null))))};A(".spotify-player-track-details{background-color:var(--darkest);height: 100%;max-height: min(100%, var(--spotify-player-panel-max-height, 60vh));padding: 1.2em;border-radius: 0.5em;border: 1px solid var(--grey);box-shadow: inset 0 0 5px rgba(0,0,0,0.5);overflow-y: auto;scrollbar-gutter: stable;min-height: 0;min-width: 0;}.spotify-player-track-details h4{font-weight:bold;font-size: larger;margin-bottom: 0.4em;}.spotify-player-track-details-table{width:100%;border-collapse: collapse;table-layout: fixed;}.spotify-player-track-details-row{display:flex;justify-content: space-between;padding: 0.1em 0;}.spotify-player-track-details-cell{padding:0.1em;word-wrap: break-word;overflow: hidden;text-overflow: ellipsis;font-size: 0.8em;}.spotify-player-key-cell{font-weight:bold;color: var(--lightest);flex-basis: 30%;}.spotify-player-value-cell{flex-basis:70%;color: var(--lightest);user-select: text;}.spotify-player-textinfo-explicit{display:inline-block;font-size: 0.55em;font-weight: bold;background-color: var(--grey);color: var(--lightest);padding: 0.1em 0.35em;border-radius: 0.2em;margin-left: 0.5em;vertical-align: middle;}.spotify-player-context-section{margin-top:0.8em;padding-top: 0.6em;border-top: 1px solid var(--grey);}.spotify-player-context-header{display:flex;align-items: baseline;gap: 0.4em;margin-bottom: 0.3em;font-size: 0.9em;}.spotify-player-context-type{font-size:0.65em;font-weight: bold;text-transform: uppercase;letter-spacing: 0.05em;color: var(--lighter);opacity: 0.6;background: var(--grey);padding: 0.1em 0.4em;border-radius: 0.2em;flex-shrink: 0;}.spotify-player-context-header .spotify-player-browse-link{font-weight:bold;font-size: 1em;}.spotify-player-context-description{font-style:italic;opacity: 0.7;padding-top: 0.3em;}.spotify-player-message{width:100%;word-wrap: break-word;text-wrap: wrap;overflow: hidden;text-overflow: ellipsis;font-size: 1.0em;color: var(--lightest);user-select: text;display: flex;justify-content: center;justify-items: center;align-items: center;align-content: center;}"),A(".spotify-player-browse-tracklist{display:flex;flex-direction: column;}.spotify-player-browse-track-row{display:flex;align-items: center;gap: 0.5em;padding: 0.3em 0.4em;min-height: 36px;border-bottom: 1px solid var(--dark);cursor: pointer;transition: background-color 0.15s ease;font-