mirror/App
1
0
Fork 0
mirror of https://github.com/Jellify-Music/App.git synced 2026-01-26 04:58:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

adjust navigation and item details

Browse Source 
add long press to track component
This commit is contained in:
Violet Caulfield
2025-01-24 05:27:45 -06:00
parent 97883d606f
commit 3355c612bc
6 changed files with 46 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
components/Global/components/track.tsx
View File

@@ -30,7 +30,7 @@ export default function Track({
index,
queueName,
showArtwork,
onPress
onPress,
} : {
track: BaseItemDto,
tracklist: BaseItemDto[],
@@ -38,7 +38,7 @@ export default function Track({
index?: number | undefined,
queueName?: string | undefined,
showArtwork?: boolean | undefined,
onPress?: () => void | undefined
onPress?: () => void | undefined,
}) : React.JSX.Element {
const { width } = useSafeAreaFrame();
@@ -64,6 +64,12 @@ export default function Track({
});
}
}}
onLongPress={() => {
navigation.push("Details", {
item: track,
isModal: false
})
}}
paddingVertical={"$2"}
marginHorizontal={"$1"}
>
@@ -143,8 +149,9 @@ export default function Track({
>
<Icon small name="dots-vertical" onPress={() => {
navigation.push("Details", {
item: track
})
item: track,
isModal: false
});
}} />
</YStack>

28
components/ItemDetail/component.tsx
View File

@@ -12,11 +12,11 @@ import FavoriteButton from "../Global/components/favorite-button";
export default function ItemDetail({
item,
navigation,
onNavigate
isModal = false
} : {
item: BaseItemDto,
navigation: NativeStackNavigationProp<StackParamList>,
onNavigate?: () => void | undefined
isModal: boolean
}) : React.JSX.Element {
let options: React.JSX.Element | undefined = undefined;
@@ -25,7 +25,7 @@ export default function ItemDetail({
switch (item.Type) {
case "Audio": {
options = TrackOptions({ item, navigation, onNavigate });
options = TrackOptions({ item, navigation, isModal });
break;
}
@@ -51,7 +51,7 @@ export default function ItemDetail({
return (
<SafeAreaView edges={["top", "right", "left"]}>
<XStack>
<YStack alignContent="center" justifyContent="flex-start">
<BlurhashedImage
item={item}
size={width / 2}
@@ -59,7 +59,7 @@ export default function ItemDetail({
<YStack
marginLeft={"$0.5"}
justifyContent="flex-start"
justifyContent="center"
alignContent="space-between"
>
<Text bold fontSize={"$6"}>
@@ -72,13 +72,17 @@ export default function ItemDetail({
onPress={() => {
if (item.ArtistItems) {
if (onNavigate)
onNavigate();
if (isModal)
navigation.navigate("Artist", {
artist: item.ArtistItems[0]
})
navigation.goBack();
navigation.push("Artist", {
artist: item.ArtistItems[0]
});
else {
navigation.goBack();
navigation.push("Artist", {
artist: item.ArtistItems[0]
});
}
}
}}>
{ item.Artists?.join(", ") ?? "Unknown Artist"}
@@ -100,7 +104,7 @@ export default function ItemDetail({
{ options ?? <View /> }
</YStack>
</XStack>
</YStack>
</SafeAreaView>
)
}

21
components/ItemDetail/helpers/TrackOptions.tsx
View File

@@ -7,11 +7,12 @@ import { XStack } from "tamagui";
export default function TrackOptions({
item,
navigation
navigation,
isModal = false,
} : {
item: BaseItemDto,
navigation: NativeStackNavigationProp<StackParamList>,
onNavigate?: () => void | undefined
isModal: boolean
}) : React.JSX.Element {
const { data: album, isSuccess } = useItem(item.AlbumId ?? "")
@@ -22,10 +23,18 @@ export default function TrackOptions({
<Icon
name="music-box"
onPress={() => {
navigation.goBack() // Dismiss modal if it exists
navigation.push("Album", {
album
});
if (isModal) {
navigation.navigate("Album", {
album
});
} else {
navigation.goBack();
navigation.push("Album", {
album
});
}
}}
/>
)}

4
components/ItemDetail/screen.tsx
View File

@@ -7,17 +7,15 @@ import React from "react";
export default function DetailsScreen({
route,
navigation,
onNavigate,
} : {
route: RouteProp<StackParamList, "Details">,
navigation: NativeStackNavigationProp<StackParamList>
onNavigate?: () => void | undefined
}) : React.JSX.Element {
return (
<ItemDetail
item={route.params.item}
navigation={navigation}
onNavigate={onNavigate}
isModal={route.params.isModal}
/>
)
}

7
components/Player/screens/index.tsx
View File

@@ -103,8 +103,7 @@ export default function PlayerScreen({ navigation }: { navigation: NativeStackNa
color={Colors.Primary}
onPress={() => {
if (nowPlaying!.item.ArtistItems) {
navigation.goBack();
navigation.push("Artist", {
navigation.navigate("Artist", {
artist: nowPlaying!.item.ArtistItems![0],
});
}
@@ -133,9 +132,7 @@ export default function PlayerScreen({ navigation }: { navigation: NativeStackNa
onPress={() => {
navigation.navigate("Details", {
item: nowPlaying!.item,
onNavigate: () => {
navigation.goBack();
}
isModal: true
});
}}
/>

2
components/types.tsx
View File

@@ -35,7 +35,7 @@ export type StackParamList = {
};
Details: {
item: BaseItemDto,
onNavigate?: () => void | undefined
isModal: boolean
}
}