From cb61067ae7cc115708f12bcd9980506429f42a22 Mon Sep 17 00:00:00 2001 From: Gil Barbara Date: Wed, 13 Nov 2024 22:04:00 -0300 Subject: [PATCH] Update demo --- demo/package.json | 26 +++++++------- demo/public/favicon.ico | Bin 3870 -> 6518 bytes demo/src/App.tsx | 48 ++++++++++++++++++-------- demo/src/components/RepeatButton.tsx | 6 ++-- demo/src/components/ShuffleButton.tsx | 14 ++++---- demo/src/modules/helpers.ts | 6 ++-- 6 files changed, 60 insertions(+), 40 deletions(-) diff --git a/demo/package.json b/demo/package.json index 1808252..abcac63 100644 --- a/demo/package.json +++ b/demo/package.json @@ -5,24 +5,24 @@ "keywords": [], "main": "src/index.tsx", "dependencies": { - "@emotion/react": "^11.11.4", - "@emotion/styled": "^11.11.0", - "@gilbarbara/components": "^0.11.4", + "@emotion/react": "^11.13.3", + "@emotion/styled": "^11.13.0", + "@gilbarbara/hooks": "^0.8.2", + "@gilbarbara/components": "^0.14.5", "@gilbarbara/cookies": "^1.0.1", - "@gilbarbara/eslint-config": "^0.7.5", - "@gilbarbara/helpers": "^0.9.2", + "@gilbarbara/eslint-config": "^0.8.2", + "@gilbarbara/helpers": "^0.9.4", "@gilbarbara/prettier-config": "^1.0.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "react": "^18.3.1", + "react-dom": "^18.3.1", "react-scripts": "^5.0.1", - "react-spotify-web-playback": "latest", - "react-use": "^17.5.0" + "react-spotify-web-playback": "latest" }, "devDependencies": { - "@types/node": "20.11.30", - "@types/react": "18.2.73", - "@types/react-dom": "18.2.22", - "typescript": "5.4.3" + "@types/node": "^22.9.0", + "@types/react": "^18.3.12", + "@types/react-dom": "^18.3.1", + "typescript": "5.6.3" }, "scripts": { "start": "react-scripts start", diff --git a/demo/public/favicon.ico b/demo/public/favicon.ico index a11777cc471a4344702741ab1c8a588998b1311a..38f6611b1df26649ee2a73f2a16e32fd0532a9ca 100644 GIT binary patch literal 6518 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 literal 3870 zcma);c{J4h9>;%nil|2-o+rCuEF-(I%-F}ijC~o(k~HKAkr0)!FCj~d>`RtpD?8b; zXOC1OD!V*IsqUwzbMF1)-gEDD=A573Z-&G7^LoAC9|WO7Xc0Cx1g^Zu0u_SjAPB3vGa^W|sj)80f#V0@M_CAZTIO(t--xg= z!sii`1giyH7EKL_+Wi0ab<)&E_0KD!3Rp2^HNB*K2@PHCs4PWSA32*-^7d{9nH2_E zmC{C*N*)(vEF1_aMamw2A{ZH5aIDqiabnFdJ|y0%aS|64E$`s2ccV~3lR!u<){eS` z#^Mx6o(iP1Ix%4dv`t@!&Za-K@mTm#vadc{0aWDV*_%EiGK7qMC_(`exc>-$Gb9~W!w_^{*pYRm~G zBN{nA;cm^w$VWg1O^^<6vY`1XCD|s_zv*g*5&V#wv&s#h$xlUilPe4U@I&UXZbL z0)%9Uj&@yd03n;!7do+bfixH^FeZ-Ema}s;DQX2gY+7g0s(9;`8GyvPY1*vxiF&|w z>!vA~GA<~JUqH}d;DfBSi^IT*#lrzXl$fNpq0_T1tA+`A$1?(gLb?e#0>UELvljtQ zK+*74m0jn&)5yk8mLBv;=@}c{t0ztT<v;Avck$S6D`Z)^c0(jiwKhQsn|LDRY&w(Fmi91I7H6S;b0XM{e zXp0~(T@k_r-!jkLwd1_Vre^v$G4|kh4}=Gi?$AaJ)3I+^m|Zyj#*?Kp@w(lQdJZf4 z#|IJW5z+S^e9@(6hW6N~{pj8|NO*>1)E=%?nNUAkmv~OY&ZV;m-%?pQ_11)hAr0oAwILrlsGawpxx4D43J&K=n+p3WLnlDsQ$b(9+4 z?mO^hmV^F8MV{4Lx>(Q=aHhQ1){0d*(e&s%G=i5rq3;t{JC zmgbn5Nkl)t@fPH$v;af26lyhH!k+#}_&aBK4baYPbZy$5aFx4}ka&qxl z$=Rh$W;U)>-=S-0=?7FH9dUAd2(q#4TCAHky!$^~;Dz^j|8_wuKc*YzfdAht@Q&ror?91Dm!N03=4=O!a)I*0q~p0g$Fm$pmr$ zb;wD;STDIi$@M%y1>p&_>%?UP($15gou_ue1u0!4(%81;qcIW8NyxFEvXpiJ|H4wz z*mFT(qVx1FKufG11hByuX%lPk4t#WZ{>8ka2efjY`~;AL6vWyQKpJun2nRiZYDij$ zP>4jQXPaP$UC$yIVgGa)jDV;F0l^n(V=HMRB5)20V7&r$jmk{UUIe zVjKroK}JAbD>B`2cwNQ&GDLx8{pg`7hbA~grk|W6LgiZ`8y`{Iq0i>t!3p2}MS6S+ zO_ruKyAElt)rdS>CtF7j{&6rP-#c=7evGMt7B6`7HG|-(WL`bDUAjyn+k$mx$CH;q2Dz4x;cPP$hW=`pFfLO)!jaCL@V2+F)So3}vg|%O*^T1j>C2lx zsURO-zIJC$^$g2byVbRIo^w>UxK}74^TqUiRR#7s_X$e)$6iYG1(PcW7un-va-S&u zHk9-6Zn&>T==A)lM^D~bk{&rFzCi35>UR!ZjQkdSiNX*-;l4z9j*7|q`TBl~Au`5& z+c)*8?#-tgUR$Zd%Q3bs96w6k7q@#tUn`5rj+r@_sAVVLqco|6O{ILX&U-&-cbVa3 zY?ngHR@%l{;`ri%H*0EhBWrGjv!LE4db?HEWb5mu*t@{kv|XwK8?npOshmzf=vZA@ zVSN9sL~!sn?r(AK)Q7Jk2(|M67Uy3I{eRy z_l&Y@A>;vjkWN5I2xvFFTLX0i+`{qz7C_@bo`ZUzDugfq4+>a3?1v%)O+YTd6@Ul7 zAfLfm=nhZ`)P~&v90$&UcF+yXm9sq!qCx3^9gzIcO|Y(js^Fj)Rvq>nQAHI92ap=P z10A4@prk+AGWCb`2)dQYFuR$|H6iDE8p}9a?#nV2}LBCoCf(Xi2@szia7#gY>b|l!-U`c}@ zLdhvQjc!BdLJvYvzzzngnw51yRYCqh4}$oRCy-z|v3Hc*d|?^Wj=l~18*E~*cR_kU z{XsxM1i{V*4GujHQ3DBpl2w4FgFR48Nma@HPgnyKoIEY-MqmMeY=I<%oG~l!f<+FN z1ZY^;10j4M4#HYXP zw5eJpA_y(>uLQ~OucgxDLuf}fVs272FaMxhn4xnDGIyLXnw>Xsd^J8XhcWIwIoQ9} z%FoSJTAGW(SRGwJwb=@pY7r$uQRK3Zd~XbxU)ts!4XsJrCycrWSI?e!IqwqIR8+Jh zlRjZ`UO1I!BtJR_2~7AbkbSm%XQqxEPkz6BTGWx8e}nQ=w7bZ|eVP4?*Tb!$(R)iC z9)&%bS*u(lXqzitAN)Oo=&Ytn>%Hzjc<5liuPi>zC_nw;Z0AE3Y$Jao_Q90R-gl~5 z_xAb2J%eArrC1CN4G$}-zVvCqF1;H;abAu6G*+PDHSYFx@Tdbfox*uEd3}BUyYY-l zTfEsOqsi#f9^FoLO;ChK<554qkri&Av~SIM*{fEYRE?vH7pTAOmu2pz3X?Wn*!ROX ztd54huAk&mFBemMooL33RV-*1f0Q3_(7hl$<#*|WF9P!;r;4_+X~k~uKEqdzZ$5Al zV63XN@)j$FN#cCD;ek1R#l zv%pGrhB~KWgoCj%GT?%{@@o(AJGt*PG#l3i>lhmb_twKH^EYvacVY-6bsCl5*^~L0 zonm@lk2UvvTKr2RS%}T>^~EYqdL1q4nD%0n&Xqr^cK^`J5W;lRRB^R-O8b&HENO||mo0xaD+S=I8RTlIfVgqN@SXDr2&-)we--K7w= zJVU8?Z+7k9dy;s;^gDkQa`0nz6N{T?(A&Iz)2!DEecLyRa&FI!id#5Z7B*O2=PsR0 zEvc|8{NS^)!d)MDX(97Xw}m&kEO@5jqRaDZ!+%`wYOI<23q|&js`&o4xvjP7D_xv@ z5hEwpsp{HezI9!~6O{~)lLR@oF7?J7i>1|5a~UuoN=q&6N}EJPV_GD`&M*v8Y`^2j zKII*d_@Fi$+i*YEW+Hbzn{iQk~yP z>7N{S4)r*!NwQ`(qcN#8SRQsNK6>{)X12nbF`*7#ecO7I)Q$uZsV+xS4E7aUn+U(K baj7?x%VD!5Cxk2YbYLNVeiXvvpMCWYo=by@ diff --git a/demo/src/App.tsx b/demo/src/App.tsx index 18b250e..45e4de4 100644 --- a/demo/src/App.tsx +++ b/demo/src/App.tsx @@ -8,14 +8,15 @@ import SpotifyWebPlayer, { STATUS, StylesProps, TYPE, + Type, } from 'react-spotify-web-playback'; -import { useEffectOnce, useSetState } from 'react-use'; import { Anchor, Box, Button, - ComponentWrapper, Container, + Flex, + FormElementWrapper, Grid, H1, H4, @@ -28,6 +29,7 @@ import { Toggle, } from '@gilbarbara/components'; import { request } from '@gilbarbara/helpers'; +import { useEffectOnce, useSetState } from '@gilbarbara/hooks'; import GlobalStyles from './components/GlobalStyles'; import Player from './components/Player'; @@ -64,6 +66,7 @@ const baseURIs = { album: 'spotify:album:0WLIcGHr0nLyKJpMirAS17', artist: 'spotify:artist:4oLeXFyACqeem2VImYeBFe', playlist: 'spotify:playlist:1Zr2FUPeD5hYJTGbTDSQs4', + show: 'spotify:show:4kYCRYJ3yK5DQbP5tbfZby', tracks: [ // Boogie // 'spotify:track:3zYpRGnnoegSpt3SguSo3W', @@ -97,6 +100,7 @@ function App() { const code = new URLSearchParams(window.location.search).get('code'); const credentials = getCredentials(); + const [ { accessToken, @@ -159,7 +163,7 @@ function App() { (event: FormEvent) => { event.preventDefault(); - if (URIsInput && URIsInput.current) { + if (URIsInput?.current) { setState({ URIs: parseURIs(URIsInput.current.value) }); } }, @@ -178,7 +182,7 @@ function App() { setState({ isPlaying: true, URIs: parseURIs(uris) }); - if (URIsInput && URIsInput.current) { + if (URIsInput?.current) { URIsInput.current.value = uris; } }, @@ -202,7 +206,7 @@ function App() { }); } - if (type === TYPE.TRACK) { + if (([TYPE.PRELOAD, TYPE.TRACK] as Array).includes(type)) { const trackStyles = await request( `https://scripts.gilbarbara.dev/api/getImagePlayerStyles?url=${track.image}`, ); @@ -238,14 +242,14 @@ function App() { const content: Record = { connect: ( - + - + ), }; @@ -262,8 +266,8 @@ function App() { content.main = ( <> - - +