Recent artists?

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>