avatar changes and more avatar usage

components/Artist/component.tsx

@@ -18,11 +18,11 @@ export default function Artist({ artistId, artistName }: { artistId: string, art
 
                 <FlatList
                     data={albums}
-                    numColumns={2} // TODO: Make this adjustable
+                    numColumns={3} // TODO: Make this adjustable
                     renderItem={({ item: album }) => {
                         return (
-                            <Avatar itemId={album.Id!}>
-                                { album.Name ?? "Untitled Album" }
+                            <Avatar itemId={album.Id!} subheading={album.Name}>
+                                { album.ProductionYear?.toLocaleString() ?? "" }
                             </Avatar>
                         )
                     }}

components/Global/avatar.tsx

@@ -1,4 +1,4 @@
-import { Avatar as TamaguiAvatar, View } from "tamagui"
+import { H6, Avatar as TamaguiAvatar, View, YStack } from "tamagui"
 import { Label, Text } from "./text"
 import { useApiClientContext } from "../jellyfin-api-provider"
 import { Colors } from "../../enums/colors";
@@ -7,7 +7,7 @@ interface AvatarProps {
     circular?: boolean | undefined;
     itemId: string;
     children?: string | undefined;
-    subheading?: string | undefined;
+    subheading?: string | null | undefined;
     onPress?: () => void | undefined;
 }
 
@@ -16,7 +16,7 @@ export default function Avatar(props: AvatarProps): React.JSX.Element {
     const { server } = useApiClientContext();
 
     return (
-        <View alignItems="center">
+        <YStack alignItems="center" width={100} paddingHorizontal={10}>
             <TamaguiAvatar 
                 circular={props.circular} 
                 size={100}
@@ -27,8 +27,11 @@ export default function Avatar(props: AvatarProps): React.JSX.Element {
                 <TamaguiAvatar.Fallback backgroundColor={Colors.Secondary}/>
             </TamaguiAvatar>
             { props.children && (
-                <Text width={100}>{props.children}</Text>
+                <Text>{props.children}</Text>
             )}
-        </View>
+            { props.subheading && (
+                <H6>{ props.subheading }</H6>
+            )}
+        </YStack>
     )
 }

components/Home/helpers/recent-artists.tsx

@@ -26,7 +26,6 @@ export default function RecentArtists({ navigation }: ProvidedHomeProps): React.
                     return (
                         <YStack
                             height={150}
-                            paddingHorizontal={10} 
                             alignItems="center"
                         >
                             <Avatar 

components/Home/helpers/recently-played.tsx

@@ -1,13 +1,11 @@
 import React, { useEffect } from "react";
-import { Avatar, ScrollView, View, YStack } from "tamagui";
-import { useApiClientContext } from "../../jellyfin-api-provider";
-import { Colors } from "../../../enums/colors";
+import { ScrollView, View } from "tamagui";
 import { useHomeContext } from "../provider";
-import { H2, Text } from "../../Global/text";
+import { H2 } from "../../Global/text";
+import Avatar from "../../Global/avatar";
 
 export default function RecentlyPlayed(): React.JSX.Element {
 
-    const { server } = useApiClientContext();
     const { recentTracks } = useHomeContext();
 
     useEffect(() => {
@@ -22,18 +20,9 @@ export default function RecentlyPlayed(): React.JSX.Element {
             <ScrollView horizontal>
                 { recentTracks && recentTracks.map((recentlyPlayedTrack) => {
                     return (
-                        <YStack 
-                            alignItems="center"
-                            height={150}
-                            gap={5}
-                        >
-                            <Avatar borderRadius={2}>
-                                <Avatar.Image src={`${server!.url}/Items/${recentlyPlayedTrack.AlbumId}/Images/Primary`} />
-                                <Avatar.Fallback backgroundColor={Colors.Primary}/>
+                            <Avatar itemId={recentlyPlayedTrack.AlbumId!} subheading={`${recentlyPlayedTrack.Artists?.join(", ")}`}>
+                                {`${recentlyPlayedTrack.Name}`}
                             </Avatar>
-                            <Text>{`${recentlyPlayedTrack.Name}`}</Text>
-                            <Text>{`${recentlyPlayedTrack.Artists?.join(", ")}`}</Text>
-                        </YStack>
                     )
                 })}
             </ScrollView>