mirror/App
1
0
Fork 0
mirror of https://github.com/Jellify-Music/App.git synced 2026-01-07 03:20:19 -06:00
Code Issues Packages Projects Releases Wiki Activity

give album artwork in the miniplayer some breathing room

Browse Source 
Add artist image to artist component
This commit is contained in:
Violet Caulfield
2025-01-05 20:11:25 -06:00
parent 486bb82fa1
commit a8e1ac8fb6
2 changed files with 51 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
components/Artist/component.tsx
View File

@@ -9,6 +9,10 @@ import { NativeStackNavigationProp } from "@react-navigation/native-stack";
import { StackParamList } from "../types";
import { H4, H5 } from "../Global/text";
import { useState } from "react";
import { CachedImage } from "@georstat/react-native-image-cache";
import { ImageType } from "@jellyfin/sdk/lib/generated-client/models";
import { queryConfig } from "@/api/queries/query.config";
import { getImageApi } from "@jellyfin/sdk/lib/utils/api";
interface ArtistProps {
artistId: string,
@@ -25,41 +29,48 @@ export default function Artist(props: ArtistProps): React.JSX.Element {
const { data: albums } = useArtistAlbums(props.artistId, apiClient!);
return (
<SafeAreaView>
<ScrollView
alignContent="center"
contentInsetAdjustmentBehavior="automatic"
>
<Avatar itemId={props.artistId} />
<ScrollView alignContent="center">
<CachedImage
source={getImageApi(apiClient!)
.getItemImageUrlById(
props.artistId,
ImageType.Primary,
{ ...queryConfig.images})
}
imageStyle={{
width: 1000,
height: 250,
resizeMode: "cover"
}}
/>
<H4>Albums</H4>
<FlatList
contentContainerStyle={{
flexGrow: 1,
justifyContent: 'center',
alignItems: "flex-start"
}}
data={albums}
numColumns={columns} // TODO: Make this adjustable
renderItem={({ item: album }) => {
return (
<Card
caption={album.Name}
subCaption={album.ProductionYear?.toString()}
marginHorizontal={10}
width={350 / columns}
cornered
itemId={album.Id!}
onPress={() => {
props.navigation.navigate('Album', {
album
})
}}
/>
)
}}
/>
</ScrollView>
</SafeAreaView>
<H4>Albums</H4>
<FlatList
contentContainerStyle={{
flexGrow: 1,
justifyContent: 'center',
alignItems: "flex-start"
}}
data={albums}
numColumns={columns} // TODO: Make this adjustable
renderItem={({ item: album }) => {
return (
<Card
caption={album.Name}
subCaption={album.ProductionYear?.toString()}
marginHorizontal={10}
width={350 / columns}
cornered
itemId={album.Id!}
onPress={() => {
props.navigation.navigate('Album', {
album
})
}}
/>
)
}}
/>
</ScrollView>
)
}

8
components/Player/mini-player.tsx
View File

@@ -33,7 +33,9 @@ export function Miniplayer({ navigation }: { navigation : NavigationHelpers<Para
height={"$6"}
onPress={() => navigation.navigate("Player")}
>
<YStack flex={1}>
<YStack
marginRight={5}
flex={1}>
<CachedImage
source={getImageApi(apiClient!)
.getItemImageUrlById(
@@ -55,7 +57,7 @@ export function Miniplayer({ navigation }: { navigation : NavigationHelpers<Para
<YStack alignContent="flex-start" flex={4}>
<TextTicker
duration={3000}
duration={5000}
loop
repeatSpacer={20}
marqueeDelay={1000}
@@ -64,7 +66,7 @@ export function Miniplayer({ navigation }: { navigation : NavigationHelpers<Para
</TextTicker>
<TextTicker
duration={3000}
duration={5000}
loop
repeatSpacer={20}
marqueeDelay={1000}