make logos bigger

build out navigation from artist to album

components/Album/component.tsx

@@ -0,0 +1,17 @@
+import { SafeAreaView } from "react-native-safe-area-context";
+import { StackParamList } from "../types";
+import { NativeStackNavigationProp } from "@react-navigation/native-stack";
+
+interface AlbumProps {
+    albumId: string,
+    albumName?: string | null | undefined;
+    navigation: NativeStackNavigationProp<StackParamList>;
+}
+
+export default function Album(props: AlbumProps): React.JSX.Element {
+    return (
+        <SafeAreaView>
+
+        </SafeAreaView>
+    )
+}

components/Artist/component.tsx

@@ -1,16 +1,24 @@
-import { H5, ScrollView } from "tamagui";
+import { ScrollView } from "tamagui";
 import Avatar from "../Global/avatar";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { useArtistAlbums } from "../../api/queries/artist";
 import { useApiClientContext } from "../jellyfin-api-provider";
-import { FlatList, Text } from "react-native";
+import { FlatList } from "react-native";
 import { Card } from "../Global/card";
+import { NativeStackNavigationProp } from "@react-navigation/native-stack";
+import { StackParamList } from "../types";
 
-export default function Artist({ artistId, artistName }: { artistId: string, artistName: string  }): React.JSX.Element {
+interface ArtistProps {
+    artistId: string,
+    artistName: string,
+    navigation: NativeStackNavigationProp<StackParamList>
+}
+
+export default function Artist(props: ArtistProps): React.JSX.Element {
 
     const { apiClient } = useApiClientContext();
 
-    const { data: albums } = useArtistAlbums(artistId, apiClient!);
+    const { data: albums } = useArtistAlbums(props.artistId, apiClient!);
 
     return (
         <SafeAreaView>
@@ -18,13 +26,13 @@ export default function Artist({ artistId, artistName }: { artistId: string, art
                 alignContent="center" 
                 contentInsetAdjustmentBehavior="automatic"
             >
-                <Avatar itemId={artistId} />
+                <Avatar itemId={props.artistId} />
 
                 <FlatList
                     contentContainerStyle={{
                         flexGrow: 1,
                         justifyContent: 'center',
-                        alignItems: "center"
+                        alignItems: "flex-start"
                     }}
                     data={albums}
                     numColumns={2} // TODO: Make this adjustable
@@ -37,6 +45,12 @@ export default function Artist({ artistId, artistName }: { artistId: string, art
                                 marginHorizontal={20}
                                 cornered 
                                 itemId={album.Id!}
+                                onPress={() => {
+                                    props.navigation.navigate('Album', {
+                                        albumId: album.Id!,
+                                        albumName: album.Name ?? "Untitled Album"
+                                    })
+                                }}
                             />
                         )
                     }}

components/Artist/types.tsx

@@ -1,7 +0,0 @@
-import { NativeStackScreenProps } from "@react-navigation/native-stack";
-
-export type ArtistParamList = {
-    Artist: { artistId: string };
-}
-
-export type ArtistProps = NativeStackScreenProps<ArtistParamList, 'Artist'>

components/Global/blurhash-loading.tsx

@@ -0,0 +1,12 @@
+import { Blurhash } from "react-native-blurhash";
+import { ImageSourcePropType } from "react-native/Libraries/Image/Image";
+
+const BlurhashLoading = (props: any) => {
+    return (
+        <Blurhash blurhash={props}>
+
+        </Blurhash>
+    )
+}
+
+export default BlurhashLoading;

components/Global/card.tsx

@@ -30,7 +30,7 @@ export function Card(props: CardProps) {
 
     const cardTextColor = props.blurhash ? invert(Blurhash.getAverageColor(props.blurhash)!, true) : undefined;
 
-    const logoDimensions = props.width && typeof(props.width) === "number" ? { width: props.width / 3, height: props.width / 3 }: { width: 50, height: 50 };
+    const logoDimensions = props.width && typeof(props.width) === "number" ? { width: props.width / 2, height: props.width / 2 }: { width: 100, height: 100 };
     const cardLogoSource = getImageApi(apiClient!).getItemImageUrlById(props.itemId, ImageType.Logo);
 
     return (

components/Home/component.tsx

@@ -6,12 +6,13 @@ import RecentArtists from "./helpers/recent-artists";
 import { RefreshControl } from "react-native";
 import { HomeProvider, useHomeContext } from "./provider";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
-import { HomeStackParamList, ProvidedHomeProps } from "./types";
+import { StackParamList, ProvidedHomeProps } from "../types";
 import { HomeArtistScreen } from "./screens/artist";
 import { SafeAreaView } from "react-native-safe-area-context";
 import Avatar from "../Global/avatar";
+import { HomeAlbumScreen } from "./screens/album";
 
-export const HomeStack = createNativeStackNavigator<HomeStackParamList>();
+export const HomeStack = createNativeStackNavigator<StackParamList>();
 
 export default function Home(): React.JSX.Element {
 
@@ -42,6 +43,14 @@ export default function Home(): React.JSX.Element {
                         }
                     })}
                 />
+
+                <HomeStack.Screen
+                    name="Album"
+                    component={HomeAlbumScreen}
+                    options={({ route }) => ({
+                        headerShown: false
+                    })}
+                />
             </HomeStack.Navigator>
         </HomeProvider>
     );

components/Home/helpers/recent-artists.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 import { View } from "tamagui";
 import { useHomeContext } from "../provider";
 import { H2 } from "../../Global/text";
-import { ProvidedHomeProps } from "../types";
+import { ProvidedHomeProps } from "../../types";
 import { FlatList } from "react-native";
 import { Card } from "../../Global/card";
 import { getPrimaryBlurhashFromDto } from "../../../helpers/blurhash";

components/Home/screens/album.tsx

@@ -0,0 +1,15 @@
+import { RouteProp } from "@react-navigation/native";
+import Album from "../../Album/component";
+import { StackParamList } from "../../types";
+import { NativeStackNavigationProp } from "@react-navigation/native-stack";
+
+
+export function HomeAlbumScreen({ route, navigation } : { route: RouteProp<StackParamList, "Album">, navigation: NativeStackNavigationProp<StackParamList> }): React.JSX.Element {
+    return (
+        <Album 
+            albumId={route.params.albumId } 
+            albumName={route.params.albumName} 
+            navigation={navigation}
+        />
+    )
+}

components/Home/screens/artist.tsx

@@ -1,12 +1,14 @@
 import { RouteProp } from "@react-navigation/native";
 import Artist from "../../Artist/component";
-import { HomeStackParamList, ProvidedHomeProps } from "../types";
+import { NativeStackNavigationProp } from "@react-navigation/native-stack";
+import { StackParamList } from "../../types";
 
-export function HomeArtistScreen({ route }: { route: RouteProp<HomeStackParamList> }): React.JSX.Element {
+export function HomeArtistScreen({ route, navigation } : { route: RouteProp<StackParamList, "Artist">, navigation: NativeStackNavigationProp<StackParamList>}): React.JSX.Element {
     return (
         <Artist 
-            artistId={route.params!.artistId}
-            artistName={route.params!.artistName}
+            artistId={route.params.artistId}
+            artistName={route.params.artistName}
+            navigation={navigation}
         />
     );
 }

components/Home/types.tsx

@@ -1,12 +0,0 @@
-import { NativeStackScreenProps } from "@react-navigation/native-stack";
-
-
-export type HomeStackParamList = {
-    Home: undefined;
-    Artist: { 
-        artistId: string,
-        artistName: string
-    };
-}
-
-export type ProvidedHomeProps = NativeStackScreenProps<HomeStackParamList>;

components/types.tsx

@@ -0,0 +1,20 @@
+import { NativeStackScreenProps } from "@react-navigation/native-stack";
+
+
+export type StackParamList = {
+    Home: undefined;
+    Artist: { 
+        artistId: string,
+        artistName: string
+    };
+    Album: {
+        albumId: string,
+        albumName: string,
+    };
+}
+
+export type ProvidedHomeProps = NativeStackScreenProps<StackParamList, 'Home'>;
+
+export type HomeArtistProps = NativeStackScreenProps<StackParamList, 'Artist'>;
+
+export type HomeAlbumProps = NativeStackScreenProps<StackParamList, 'Album'>;

player/provider.tsx

@@ -2,7 +2,7 @@ import { createContext, ReactNode, SetStateAction, useContext, useEffect, useSta
 import { JellifyTrack } from "../types/JellifyTrack";
 import { storage } from "../constants/storage";
 import { MMKVStorageKeys } from "../enums/mmkv-storage-keys";
-import { findPlayQueueIndexStart } from "./helpers";
+import { findPlayQueueIndexStart } from "./helpers/index";
 import { add, reset, play as rntpPlay, pause as rntpPause, skipToNext, skipToPrevious, setupPlayer, getActiveTrack } from "react-native-track-player/lib/src/trackPlayer";
 import _ from "lodash";
 import { buildNewQueue } from "./helpers/queue";