From 825a56cc9cbea9ba2bbbd906d98df0309bc369b2 Mon Sep 17 00:00:00 2001
From: Gil Barbara <gilbarbara@gmail.com>
Date: Tue, 30 Jan 2024 17:36:31 -0300
Subject: [PATCH] Update demo

---
 demo/package.json         | 12 ++++++------
 demo/src/App.tsx          | 35 ++++++++++++++++++++++++-----------
 demo/src/components.tsx   | 27 ++++++++++++++++++---------
 demo/src/modules/theme.ts |  4 ++--
 4 files changed, 50 insertions(+), 28 deletions(-)

diff --git a/demo/package.json b/demo/package.json
index 85db689..e8f7d80 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -7,19 +7,19 @@
   "dependencies": {
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@gilbarbara/components": "^0.10.1",
-    "@gilbarbara/eslint-config": "^0.7.2",
-    "@gilbarbara/helpers": "^0.9.1",
+    "@gilbarbara/components": "^0.11.2",
+    "@gilbarbara/eslint-config": "^0.7.4",
+    "@gilbarbara/helpers": "^0.9.2",
     "@gilbarbara/prettier-config": "^1.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
     "react-spotify-web-playback": "latest",
-    "react-use": "^17.4.2"
+    "react-use": "^17.5.0"
   },
   "devDependencies": {
-    "@types/node": "20.10.5",
-    "@types/react": "18.2.46",
+    "@types/node": "20.11.11",
+    "@types/react": "18.2.48",
     "@types/react-dom": "18.2.18",
     "typescript": "5.3.3"
   },
diff --git a/demo/src/App.tsx b/demo/src/App.tsx
index cd33889..f208e3b 100644
--- a/demo/src/App.tsx
+++ b/demo/src/App.tsx
@@ -42,6 +42,7 @@ interface State {
   shuffle: boolean;
   styles?: StylesProps;
   token: string;
+  transparent: boolean;
 }
 
 const validateURI = (input: string): boolean => {
@@ -103,22 +104,24 @@ function App() {
       shuffle,
       styles,
       token,
+      transparent,
       URIs,
     },
     setState,
   ] = useSetState<State>({
-      hideAttribution: false,
-      inlineVolume: true,
+    hideAttribution: false,
+    inlineVolume: true,
     isActive: false,
-      isPlaying: false,
-      layout: 'responsive',
+    isPlaying: false,
+    layout: 'responsive',
     player: null,
     repeat: 'off',
     shuffle: false,
-      styles: undefined,
-      token: savedToken || '',
-      URIs: [baseURIs.artist],
-    });
+    styles: undefined,
+    token: savedToken || '',
+    transparent: false,
+    URIs: [baseURIs.artist],
+  });
 
   const handleSubmit = useCallback(
     (event: FormEvent) => {
@@ -181,10 +184,14 @@ function App() {
       }
 
       if (type === TYPE.TRACK) {
-        const trackStyles = await request(
+        const trackStyles = await request<StylesProps>(
           `https://scripts.gilbarbara.dev/api/getImagePlayerStyles?url=${track.image}`,
         );
 
+        if (transparent) {
+          trackStyles.bgColor = 'transparent';
+        }
+
         setState({ styles: trackStyles });
       }
 
@@ -193,7 +200,7 @@ function App() {
         setState({ token: '' });
       }
     },
-    [setState],
+    [setState, transparent],
   );
 
   const getPlayer = useCallback(
@@ -274,6 +281,12 @@ function App() {
               name="inlineVolume"
               onClick={() => setState({ inlineVolume: !inlineVolume })}
             />
+            <Toggle
+              checked={transparent}
+              label="Transparent"
+              name="transparent"
+              onClick={() => setState({ transparent: !transparent })}
+            />
           </Spacer>
         </Box>
       </>
@@ -295,7 +308,7 @@ function App() {
           persistDeviceSelection
           play={isPlaying}
           showSaveIcon
-          styles={styles}
+          styles={transparent ? { ...styles, bgColor: 'transparent' } : styles}
           syncExternalDevice
           token={token}
           uris={URIs}
diff --git a/demo/src/components.tsx b/demo/src/components.tsx
index 6dbffb0..994b017 100644
--- a/demo/src/components.tsx
+++ b/demo/src/components.tsx
@@ -9,7 +9,16 @@ export function GlobalStyles({ hasToken }: any) {
     <Global
       styles={css`
         body {
-          background-color: #f7f7f7;
+          background: linear-gradient(
+            0deg,
+            oklch(0.65 0.3 29.62 / 0.8),
+            oklch(0.65 0.3 29.62 / 0) 75%
+          ),
+          linear-gradient(60deg, oklch(0.96 0.25 110.23 / 0.8), oklch(0.96 0.25 110.23 / 0) 75%),
+          linear-gradient(120deg, oklch(0.85 0.36 144.24 / 0.8), oklch(0.85 0.36 144.24 / 0) 75%),
+          linear-gradient(180deg, oklch(0.89 0.2 194.59 / 0.8), oklch(0.89 0.2 194.18 / 0) 75%),
+          linear-gradient(240deg, oklch(0.47 0.32 264.05 / 0.8), oklch(0.47 0.32 264.05 / 0) 75%),
+          linear-gradient(300deg, oklch(0.7 0.35 327.92 / 0.8), oklch(0.7 0.35 327.92 / 0) 75%);
           box-sizing: border-box;
           font-family: sans-serif;
           margin: 0;
@@ -93,10 +102,10 @@ export const Player = styled.div<{ layout: Layout }>(({ layout }) => {
 });
 
 export function RepeatButton({
-  repeat,
-  token,
-  ...rest
-}: Omit<ComponentProps<typeof ButtonUnstyled>, 'children'> & {
+                               repeat,
+                               token,
+                               ...rest
+                             }: Omit<ComponentProps<typeof ButtonUnstyled>, 'children'> & {
   repeat: RepeatState;
   token: string;
 }) {
@@ -153,10 +162,10 @@ export function RepeatButton({
 }
 
 export function ShuffleButton({
-  shuffle,
-  token,
-  ...rest
-}: Omit<ComponentProps<typeof ButtonUnstyled>, 'children'> & {
+                                shuffle,
+                                token,
+                                ...rest
+                              }: Omit<ComponentProps<typeof ButtonUnstyled>, 'children'> & {
   shuffle: boolean;
   token: string;
 }) {
diff --git a/demo/src/modules/theme.ts b/demo/src/modules/theme.ts
index f416a23..c901ded 100644
--- a/demo/src/modules/theme.ts
+++ b/demo/src/modules/theme.ts
@@ -1,9 +1,9 @@
 import { mergeTheme } from '@gilbarbara/components';
 
-export const primaryColor = '#1db954';
+export const primaryColor = '#282828';
 
 export const theme = mergeTheme({
   colors: {
     primary: primaryColor,
-  }
+  },
 });