build out album artists list

adjust avatar

components/Album/component.tsx

@@ -19,12 +19,15 @@ interface AlbumProps {
     navigation: NativeStackNavigationProp<StackParamList>;
 }
 
-export default function Album(props: AlbumProps): React.JSX.Element {
+export default function Album({
+    album,
+    navigation
+}: AlbumProps): React.JSX.Element {
 
-    props.navigation.setOptions({
+    navigation.setOptions({
         headerRight: () => {
             return (
-                <FavoriteButton item={props.album} />
+                <FavoriteButton item={album} />
             )
         }
     })
@@ -33,7 +36,7 @@ export default function Album(props: AlbumProps): React.JSX.Element {
 
     const { width } = useSafeAreaFrame();
 
-    const { data: tracks, isLoading, refetch } = useItemTracks(props.album.Id!, true);
+    const { data: tracks, isLoading, refetch } = useItemTracks(album.Id!, true);
 
     useEffect(() => {
         refetch();
@@ -49,12 +52,12 @@ export default function Album(props: AlbumProps): React.JSX.Element {
                 minHeight={width / 1.1}
             >
                 <BlurhashedImage
-                    item={props.album}
+                    item={album}
                     width={width / 1.1}
                 />
 
-                <H4>{ props.album.Name ?? "Untitled Album" }</H4>
-                <H5>{ props.album.ProductionYear?.toString() ?? "" }</H5>
+                <H4>{ album.Name ?? "Untitled Album" }</H4>
+                <H5>{ album.ProductionYear?.toString() ?? "" }</H5>
             </YStack>
             <FlatList
                 data={tracks}
@@ -67,7 +70,7 @@ export default function Album(props: AlbumProps): React.JSX.Element {
                             track={track}
                             tracklist={tracks!}
                             index={index}
-                            navigation={props.navigation}
+                            navigation={navigation}
                         />
                     )
                     
@@ -81,18 +84,25 @@ export default function Album(props: AlbumProps): React.JSX.Element {
                     >
                     Total Runtime: 
                 </Text>
-                <RunTimeTicks>{ props.album.RunTimeTicks }</RunTimeTicks>
+                <RunTimeTicks>{ album.RunTimeTicks }</RunTimeTicks>
             </XStack>
 
             <YStack justifyContent="flex-start">
                 <H3>Album Artists</H3>
                 <FlatList
                     horizontal
-                    data={props.album.ArtistItems}
+                    data={album.ArtistItems}
                     renderItem={({ index, item: artist }) => {
                         return (
                             <Avatar
-                            itemId={artist.Id!}
+                                item={artist}
+                                width={width / 5}
+                                onPress={() => {
+                                    navigation.push("Artist", {
+                                        artist
+                                    });
+                                }}
+                                subheading={artist.Name ?? "Unknown Artist"}
                             />
                         )
                     }}

components/Global/components/track.tsx

@@ -83,7 +83,6 @@ export default function Track({
                         />
                     ) : (
                     <Text 
-                        userSelect="none"
                         color={isPlaying ? theme.telemagenta : theme.color}
                     >
                         { track.IndexNumber?.toString() ?? "" }
@@ -97,14 +96,12 @@ export default function Track({
                         color={isPlaying ? theme.telemagenta : theme.color}
                         lineBreakStrategyIOS="standard"
                         numberOfLines={1}
-                        userSelect="none"
                     >
                         { track.Name ?? "Untitled Track" }
                     </Text>
 
                     { (showArtwork || (track.ArtistCount ?? 0 > 1)) && (
                         <Text 
-                            userSelect="none"
                             lineBreakStrategyIOS="standard" 
                             numberOfLines={1}
                         >

components/Global/helpers/avatar.tsx

@@ -2,20 +2,26 @@ import type { AvatarProps as TamaguiAvatarProps } from "tamagui";
 import { Avatar as TamaguiAvatar, YStack } from "tamagui"
 import { Text } from "./text"
 import { useItemImage } from "../../../api/queries/image";
+import { BaseItemDto, ImageType } from "@jellyfin/sdk/lib/generated-client/models";
 
 interface AvatarProps extends TamaguiAvatarProps {
-    itemId: string;
+    item: BaseItemDto,
+    imageType?: ImageType,
     subheading?: string | null | undefined;
 }
 
-export default function Avatar(props: AvatarProps): React.JSX.Element {
+export default function Avatar({
+    item,
+    imageType,
+    subheading,
+    ...props
+}: AvatarProps): React.JSX.Element {
 
-    const { data } = useItemImage(props.itemId)
+    const { data } = useItemImage(item.Id!)
 
     return (
         <YStack alignItems="center" marginHorizontal={10}>
             <TamaguiAvatar 
-                onPress={props.onPress}
                 borderRadius={!!!props.circular ? 4 : 'unset'}
                 {...props}
             >
@@ -25,8 +31,8 @@ export default function Avatar(props: AvatarProps): React.JSX.Element {
             { props.children && (
                 <Text>{props.children}</Text>
             )}
-            { props.subheading && (
-                <Text bold>{ props.subheading }</Text>
+            { subheading && (
+                <Text bold>{ subheading }</Text>
             )}
         </YStack>
     )

components/Global/helpers/text.tsx

@@ -65,6 +65,7 @@ export function Text(props: TextProps): React.JSX.Element {
             textAlign={props.textAlign}
             fontSize="$4"
             lineBreakMode="clip"
+            userSelect="none"
             {...props}
         >
             { props.children }

components/Global/helpers/time-codes.tsx

@@ -3,7 +3,7 @@ import { Text } from "./text";
 import React from "react";
 
 export function RunTimeSeconds({ children }: { children: number }) : React.JSX.Element {
-    return <Text userSelect="none" bold>{ calculateRunTimeFromSeconds(children) }</Text>
+    return <Text bold>{ calculateRunTimeFromSeconds(children) }</Text>
 }
 
 export function RunTimeTicks({ children } : { children?: number | null | undefined }) : React.JSX.Element {
@@ -14,7 +14,6 @@ export function RunTimeTicks({ children } : { children?: number | null | undefin
 
     return (
         <Text 
-            userSelect="none" 
             style={{display: "block"}} 
             color="$borderColor"
         >