Update demo

gilbarbara · Nov 14, 2024 · add294d · add294d
1 parent caa7d2c
commit add294d
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 40 deletions.
diff --git 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
diff --git 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<Type>).includes(type)) {
         const trackStyles = await request<StylesProps>(
           `https://scripts.gilbarbara.dev/api/getImagePlayerStyles?url=${track.image}`,
         );
@@ -238,14 +242,14 @@ function App() {
 
   const content: Record<string, ReactNode> = {
     connect: (
-      <Box flexBox justify="center" maxWidth={320} mx="auto" width="100%">
+      <Flex justify="center" maxWidth={320} mx="auto" width="100%">
         <Anchor href={getAuthorizeUrl()}>
           <Button size="lg">
             <Icon mr="sm" name="spotify" size={24} />
             <span>Connect</span>
           </Button>
         </Anchor>
-      </Box>
+      </Flex>
     ),
   };
 
@@ -262,8 +266,8 @@ function App() {
     content.main = (
       <>
         <Box as="form" maxWidth={320} mx="auto" onSubmit={handleSubmitURIs} width="100%">
-          <ComponentWrapper
-            suffix={
+          <FormElementWrapper
+            endContent={
               <Button
                 shape="round"
                 style={{ borderBottomLeftRadius: 0, borderTopLeftRadius: 0 }}
@@ -281,7 +285,7 @@ function App() {
               placeholder="Enter a Spotify URI"
               suffixSpacing={48}
             />
-          </ComponentWrapper>
+          </FormElementWrapper>
         </Box>
         <Grid gap={20} maxWidth={320} mt="xl" mx="auto" templateColumns="repeat(2, 1fr)">
           <Button data-uris={baseURIs.artist} onClick={handleClickURIs} size="sm">
@@ -314,24 +318,24 @@ function App() {
             value={layout}
           />
           <H4 mt="md">Props</H4>
-          <Spacer distribution="center" gapVertical="md" mx="auto">
+          <Spacer distribution="center" gap="md" mx="auto">
             <Toggle
               checked={hideAttribution}
               label="Hide Attribution"
               name="hideAttribution"
-              onClick={() => setState({ hideAttribution: !hideAttribution })}
+              onToggle={() => setState({ hideAttribution: !hideAttribution })}
             />
             <Toggle
               checked={inlineVolume}
               label="Inline Volume"
               name="inlineVolume"
-              onClick={() => setState({ inlineVolume: !inlineVolume })}
+              onToggle={() => setState({ inlineVolume: !inlineVolume })}
             />
             <Toggle
               checked={transparent}
               label="Transparent"
               name="transparent"
-              onClick={() => setState({ transparent: !transparent })}
+              onToggle={() => setState({ transparent: !transparent })}
             />
           </Spacer>
         </Box>
@@ -348,13 +352,29 @@ function App() {
             ),
             rightButton: <RepeatButton disabled={!isActive} repeat={repeat} token={accessToken} />,
           }}
+          getOAuthToken={async callback => {
+            if ((credentials.expiresAt ?? 0) < Math.round(Date.now() / 1000)) {
+              const newCredentials = await refreshCredentials(refreshToken);
+
+              setCredentials(newCredentials);
+              setState({
+                accessToken: newCredentials.accessToken,
+                refreshToken: newCredentials.refreshToken,
+              });
+
+              callback(newCredentials.accessToken);
+            } else {
+              callback(accessToken);
+            }
+          }}
           getPlayer={getPlayer}
           hideAttribution={hideAttribution}
           initialVolume={100}
           inlineVolume={inlineVolume}
           layout={layout}
           persistDeviceSelection
           play={isPlaying}
+          preloadData
           showSaveIcon
           styles={transparent ? { ...styles, bgColor: 'transparent' } : styles}
           syncExternalDevice

diff --git a/demo/src/components/RepeatButton.tsx b/demo/src/components/RepeatButton.tsx
@@ -1,6 +1,6 @@
 import { ComponentProps, useCallback } from 'react';
 import { RepeatState, spotifyApi } from 'react-spotify-web-playback';
-import { BoxInline, ButtonUnstyled, Icon } from '@gilbarbara/components';
+import { ButtonUnstyled, FlexInline, Icon } from '@gilbarbara/components';
 
 export default function RepeatButton({
   repeat,
@@ -41,7 +41,7 @@ export default function RepeatButton({
       width={32}
       {...rest}
     >
-      <BoxInline as="span" position="relative">
+      <FlexInline as="span" position="relative">
         <Icon name="repeat" size={24} title={null} />
         {repeat !== 'off' && (
           <span
@@ -57,7 +57,7 @@ export default function RepeatButton({
             {repeat === 'track' ? '1' : 'all'}
           </span>
         )}
-      </BoxInline>
+      </FlexInline>
     </ButtonUnstyled>
   );
 }
diff --git a/demo/src/components/ShuffleButton.tsx b/demo/src/components/ShuffleButton.tsx
@@ -1,12 +1,12 @@
 import { ComponentProps, useCallback } from 'react';
 import { spotifyApi } from 'react-spotify-web-playback';
-import { BoxInline, ButtonUnstyled, Icon } from '@gilbarbara/components';
+import { ButtonUnstyled, FlexInline, Icon } from '@gilbarbara/components';
 
 export default function ShuffleButton({
-  shuffle,
-  token,
-  ...rest
-}: Omit<ComponentProps<typeof ButtonUnstyled>, 'children'> & {
+                                        shuffle,
+                                        token,
+                                        ...rest
+                                      }: Omit<ComponentProps<typeof ButtonUnstyled>, 'children'> & {
   shuffle: boolean;
   token: string;
 }) {
@@ -23,7 +23,7 @@ export default function ShuffleButton({
       width={32}
       {...rest}
     >
-      <BoxInline as="span" position="relative">
+      <FlexInline position="relative">
         <Icon name="shuffle" size={20} title={null} />
         {shuffle && (
           <span
@@ -39,7 +39,7 @@ export default function ShuffleButton({
             ⏺
           </span>
         )}
-      </BoxInline>
+      </FlexInline>
     </ButtonUnstyled>
   );
 }
diff --git a/demo/src/modules/helpers.ts b/demo/src/modules/helpers.ts
@@ -1,5 +1,5 @@
 import { getCookie, removeCookie, setCookie } from '@gilbarbara/cookies';
-import { request } from '@gilbarbara/helpers';
+import { MONTH, request } from '@gilbarbara/helpers';
 
 import { SpotifyCredentials } from '../types';
 
@@ -49,7 +49,7 @@ export function getCredentials() {
 }
 
 export function setCredentials(credentials: SpotifyCredentials) {
-  setCookie(COOKIE_NAME, JSON.stringify(credentials));
+  setCookie(COOKIE_NAME, JSON.stringify(credentials), { expires: MONTH * 6 });
 }
 
 export async function login(code: string) {
@@ -79,7 +79,7 @@ export function parseURIs(input: string): string[] {
 export function validateURI(input: string): boolean {
   let isValid = false;
 
-  if (input && input.includes(':')) {
+  if (input?.includes(':')) {
     const [key, type, id] = input.split(':');
 
     if (key && type && type !== 'user' && id && id.length === 22) {