From f9687667a77f163658d8ca0609fdda0cddf91ee4 Mon Sep 17 00:00:00 2001
From: Violet Caulfield <violet@cosmonautical.cloud>
Date: Tue, 26 Nov 2024 08:45:13 -0600
Subject: [PATCH] Recent artists?

---
 api/queries/recently-played.ts              | 19 ++++++++++-
 components/Home/component.tsx               |  2 ++
 components/Home/helpers/recent-artists.tsx  | 35 +++++++++++++++++++++
 components/Home/helpers/recently-played.tsx |  3 +-
 enums/query-keys.ts                         |  1 +
 5 files changed, 58 insertions(+), 2 deletions(-)
 create mode 100644 components/Home/helpers/recent-artists.tsx

diff --git a/api/queries/recently-played.ts b/api/queries/recently-played.ts
index e9263068..018c1890 100644
--- a/api/queries/recently-played.ts
+++ b/api/queries/recently-played.ts
@@ -2,8 +2,25 @@ import { Api } from "@jellyfin/sdk";
 import { useQuery } from "@tanstack/react-query";
 import { QueryKeys } from "../../enums/query-keys";
 import { fetchRecentlyPlayed } from "./functions/recents";
+import { getArtistsApi, getItemsApi } from "@jellyfin/sdk/lib/utils/api"
 
 export const useRecentlyPlayed = (api: Api, libraryId: string) => useQuery({
     queryKey: [QueryKeys.RecentlyPlayed, api, libraryId],
-    queryFn: ({ queryKey }) => fetchRecentlyPlayed(queryKey[1] as Api, libraryId)
+    queryFn: ({ queryKey }) => fetchRecentlyPlayed(queryKey[1] as Api, queryKey[2] as string)
+})
+
+export const useRecentlyPlayedArtists = (api: Api, libraryId: string) => useQuery({
+    queryKey: [QueryKeys.RecentlyPlayedArtists, api, libraryId],
+    queryFn: ({ queryKey }) => {
+        return fetchRecentlyPlayed(queryKey[1] as Api, queryKey[2] as string)
+            .then((tracks) => {
+                return getItemsApi(api)
+                    .getItems({ 
+                        ids: tracks.map(track => track.ArtistItems![0].Id!) 
+                    })
+                    .then((recentArtists) => {
+                        return recentArtists.data.Items!
+                    })
+            })
+    }
 })
\ No newline at end of file
diff --git a/components/Home/component.tsx b/components/Home/component.tsx
index 259467fa..a8849cee 100644
--- a/components/Home/component.tsx
+++ b/components/Home/component.tsx
@@ -3,6 +3,7 @@ import _ from "lodash";
 import { H1 } from "../helpers/text";
 import RecentlyPlayed from "./helpers/recently-played";
 import { useApiClientContext } from "../jellyfin-api-provider";
+import RecentArtists from "./helpers/recent-artists";
 
 
 export default function Home(): React.JSX.Element {
@@ -14,6 +15,7 @@ export default function Home(): React.JSX.Element {
                 <YStack alignContent='flex-start'>
                     <H1>{`Hi, ${user!.name}`}</H1>
                     
+                    <RecentArtists />
                     <RecentlyPlayed />
                 </YStack>
             </ScrollView>
diff --git a/components/Home/helpers/recent-artists.tsx b/components/Home/helpers/recent-artists.tsx
new file mode 100644
index 00000000..a1e67832
--- /dev/null
+++ b/components/Home/helpers/recent-artists.tsx
@@ -0,0 +1,35 @@
+import React, { useEffect } from "react";
+import { Avatar, ScrollView, Text } from "tamagui";
+import { useApiClientContext } from "../../jellyfin-api-provider";
+import { useRecentlyPlayedArtists } from "../../../api/queries/recently-played";
+import { Stack } from "tamagui"
+import { Colors } from "../../../enums/colors";
+
+export default function RecentArtists(): React.JSX.Element {
+
+    const { apiClient, library, server } = useApiClientContext();
+
+    const { data } = useRecentlyPlayedArtists(apiClient!, library!.musicLibraryId);
+
+    useEffect(() => {
+        console.log("Recently played artists", data);
+    }, [
+        data
+    ])
+
+    return (
+        <ScrollView horizontal>
+            { data && data.map((recentArtist) => {
+                return (
+                    <Stack maxWidth={150} gap="$2">
+                        <Avatar>
+                            <Avatar.Image src={`${server!.url}/Items/${recentArtist.Id!}/Images/Primary`} />
+                            <Avatar.Fallback backgroundColor={Colors.Primary}/>
+                        </Avatar>
+                        <Text>{recentArtist.Name}</Text>
+                    </Stack>
+                )
+            })}
+        </ScrollView>
+    )
+}
\ No newline at end of file
diff --git a/components/Home/helpers/recently-played.tsx b/components/Home/helpers/recently-played.tsx
index 818a57be..01f343eb 100644
--- a/components/Home/helpers/recently-played.tsx
+++ b/components/Home/helpers/recently-played.tsx
@@ -7,7 +7,7 @@ import { Colors } from "../../../enums/colors";
 
 export default function RecentlyPlayed(): React.JSX.Element {
 
-    const { apiClient, library } = useApiClientContext();
+    const { apiClient, library, server } = useApiClientContext();
 
     const { data } = useRecentlyPlayed(apiClient!, library!.musicLibraryId);
 
@@ -23,6 +23,7 @@ export default function RecentlyPlayed(): React.JSX.Element {
                 return (
                     <Stack maxWidth={150} gap="$2">
                         <Avatar>
+                            <Avatar.Image src={`${server!.url}/Items/${recentlyPlayedTrack.AlbumId}/Images/Primary`} />
                             <Avatar.Fallback backgroundColor={Colors.Primary}/>
                         </Avatar>
                         <Text>{recentlyPlayedTrack.Name}</Text>
diff --git a/enums/query-keys.ts b/enums/query-keys.ts
index 4488e56b..9b1762f0 100644
--- a/enums/query-keys.ts
+++ b/enums/query-keys.ts
@@ -22,4 +22,5 @@ export enum QueryKeys {
     ServerUrl = "SERVER_URL",
     Playlist = "Playlist",
     RecentlyPlayed = "RecentlyPlayed",
+    RecentlyPlayedArtists = "RecentlyPlayedArtists",
 }
\ No newline at end of file