From fc00f3304097f3b320fa5cb82c3eafe71530f26b Mon Sep 17 00:00:00 2001
From: Maria Torrente <64274966+mariatorrentedev@users.noreply.github.com>
Date: Fri, 19 Apr 2024 10:15:33 -0400
Subject: [PATCH] P-18: fixing spotify type (#19)

* Some clean up, added Spotify icon for offline/loading state

* Minor clean up in Mobile view

* Updating about text.

* Fixing max width for the Tab Panel

* P-18: fixed bug when type is not track
---
 src/components/SpotifyNowPlaying.tsx | 81 +++++++++++++++-------------
 src/services/spotify.ts              |  1 +
 2 files changed, 45 insertions(+), 37 deletions(-)

diff --git a/src/components/SpotifyNowPlaying.tsx b/src/components/SpotifyNowPlaying.tsx
index e3ec411..7d543e9 100644
--- a/src/components/SpotifyNowPlaying.tsx
+++ b/src/components/SpotifyNowPlaying.tsx
@@ -30,7 +30,7 @@ const StyledTypography = styled(Typography)(({ theme }) => ({
   },
 }));
 
-function SpotifyMessage({ message }: { message: string }) {
+function SpotifyStatusMessage({ message }: { message: string }) {
   return (
     <Stack flexDirection="row" alignItems={["baseline", "center"]}>
       <Icon sx={{ marginTop: [0, 1], marginRight: 1 }}>
@@ -60,45 +60,52 @@ export default function SpotifyNowPlaying() {
   return (
     <>
       {loading ? (
-        <SpotifyMessage message="Syncing to Maria's Tunes..." />
-      ) : nowPlayingData && nowPlayingData?.is_playing ? (
-        <Card
-          sx={{
-            display: "flex",
-            maxHeight: 70,
-            justifyContent: "space-between",
-            alignItems: "center",
-            maxWidth: ["fit-content", 330],
-            backgroundColor: "black",
-            color: "white",
-          }}
-        >
-          <CardContent sx={{ padding: "12px" }}>
-            <StyledTypography>{nowPlayingData.item.name}</StyledTypography>
-            <StyledTypography variant="subtitle1">
-              {nowPlayingData.item?.artists
-                .map((_artist) => _artist.name)
-                .join(",")}
-            </StyledTypography>
-          </CardContent>
+        <SpotifyStatusMessage message="Syncing to Maria's Tunes..." />
+      ) : nowPlayingData &&
+        nowPlayingData?.is_playing &&
+        nowPlayingData?.currently_playing_type === "track" ? (
+        <>
+          <Typography color="secondary.main" variant="h6">
+            MOOD:
+          </Typography>
+          <Card
+            sx={{
+              display: "flex",
+              maxHeight: 70,
+              justifyContent: "space-between",
+              alignItems: "center",
+              maxWidth: ["fit-content", 330],
+              backgroundColor: "black",
+              color: "white",
+            }}
+          >
+            <CardContent sx={{ padding: "12px" }}>
+              <StyledTypography>{nowPlayingData.item.name}</StyledTypography>
+              <StyledTypography variant="subtitle1">
+                {nowPlayingData.item?.artists
+                  .map((_artist) => _artist.name)
+                  .join(",")}
+              </StyledTypography>
+            </CardContent>
 
-          <Stack flexDirection="row">
-            <Icon sx={{ marginTop: [0, 1], marginRight: 1 }}>
-              <img src={SpotifyIcon} alt="Spotify" />
-            </Icon>
+            <Stack flexDirection="row">
+              <Icon sx={{ marginTop: [0, 1], marginRight: 1 }}>
+                <img src={SpotifyIcon} alt="Spotify" />
+              </Icon>
 
-            <Box maxWidth={70}>
-              <CardMedia
-                component="img"
-                sx={{ width: "100%" }}
-                image={nowPlayingData.item?.album.images[0].url}
-                alt={nowPlayingData.item.name}
-              />
-            </Box>
-          </Stack>
-        </Card>
+              <Box maxWidth={70}>
+                <CardMedia
+                  component="img"
+                  sx={{ width: "100%" }}
+                  image={nowPlayingData.item?.album.images[0].url}
+                  alt={nowPlayingData.item.name}
+                />
+              </Box>
+            </Stack>
+          </Card>
+        </>
       ) : (
-        <SpotifyMessage message=" Maria's tunes are on pause, she's probably rocking out at a concert!" />
+        <SpotifyStatusMessage message="Maria's tunes are on pause, she's probably rocking out at a concert!" />
       )}
     </>
   );
diff --git a/src/services/spotify.ts b/src/services/spotify.ts
index dfc7456..430e8bd 100644
--- a/src/services/spotify.ts
+++ b/src/services/spotify.ts
@@ -44,6 +44,7 @@ const getAccessToken = async ({
 
 export type GetNowPlayingResponse = {
   is_playing: boolean;
+  currently_playing_type: string;
   item: NowPlayingItem;
 };