Recent artists?

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!
+                    })
+            })
+    }
 })

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>

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>
+    )
+}

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>

enums/query-keys.ts

@@ -22,4 +22,5 @@ export enum QueryKeys {
     ServerUrl = "SERVER_URL",
     Playlist = "Playlist",
     RecentlyPlayed = "RecentlyPlayed",
+    RecentlyPlayedArtists = "RecentlyPlayedArtists",
 }