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

roll these changes back, we can just use the trigger instead

Browse Source
This commit is contained in:
Violet Caulfield
2025-01-17 08:39:11 -06:00
parent f6042aca95
commit bb150fbb27
1 changed files with 92 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
import { usePlayerContext } from "@/player/provider";
import React, { useState } from "react";
import React from "react";
import { Separator, Spacer, View, XStack, YStack } from "tamagui";
import { H5, Text } from "../helpers/text";
import { Text } from "../helpers/text";
import { RunTimeTicks } from "../helpers/time-codes";
import { BaseItemDto, ImageType } from "@jellyfin/sdk/lib/generated-client/models";
import { Colors } from "@/enums/colors";
@@ -11,8 +11,6 @@ import { useApiClientContext } from "@/components/jellyfin-api-provider";
import { queryConfig } from "@/api/queries/query.config";
import { useSafeAreaFrame } from "react-native-safe-area-context";
import Icon from "../helpers/icon";
import Popover from "../helpers/popover";
import OutsidePressHandler from "react-native-outside-press";
interface TrackProps {
track: BaseItemDto;
@@ -28,16 +26,14 @@ export default function Track({
index,
queueName,
showArtwork,
onPress,
onLongPress,
onPress
} : {
track: BaseItemDto,
tracklist: BaseItemDto[],
index?: number | undefined,
queueName?: string | undefined,
showArtwork?: boolean | undefined,
onPress?: () => void | undefined,
onLongPress?: () => void | undefined,
onPress?: () => void | undefined
}) : React.JSX.Element {
const { width } = useSafeAreaFrame();
@@ -46,119 +42,97 @@ export default function Track({
const isPlaying = nowPlaying?.item.Id === track.Id;
const [popoverOpen, setPopoverOpen] = useState<boolean>(false);
return (
<OutsidePressHandler onOutsidePress={() => setPopoverOpen(false)}>
<View>
<Separator />
<Popover
open={popoverOpen}
anchor={(
<XStack
alignContent="center"
flex={1}
onLongPress={() => {
setPopoverOpen(true)
if (onLongPress) {
onLongPress();
} else {
<XStack
alignContent="center"
flex={1}
onPress={() => {
if (onPress) {
onPress();
} else {
usePlayNewQueue.mutate({
track,
index,
tracklist,
queueName: queueName ? queueName : track.Album ? track.Album! : "Queue"
});
}
}}
paddingVertical={"$2"}
marginHorizontal={"$1"}
>
<XStack
alignContent="center"
justifyContent="center"
flex={1}
minHeight={showArtwork ? width / 9 : "unset"}
>
{ showArtwork ? (
<CachedImage
source={getImageApi(apiClient!)
.getItemImageUrlById(
track.AlbumId ?? "",
ImageType.Primary,
{ ...queryConfig.images }
)
}
}}
onPress={() => {
if (onPress) {
onPress();
} else {
usePlayNewQueue.mutate({
track,
index,
tracklist,
queueName: queueName ? queueName : track.Album ? track.Album! : "Queue"
});
}
}}
paddingVertical={"$2"}
marginHorizontal={"$1"}
>
<XStack
alignContent="center"
justifyContent="center"
flex={1}
minHeight={showArtwork ? width / 9 : "unset"}
>
{ showArtwork ? (
<CachedImage
source={getImageApi(apiClient!)
.getItemImageUrlById(
track.AlbumId ?? "",
ImageType.Primary,
{ ...queryConfig.images }
)
}
imageStyle={{
position: "relative",
width: width / 9,
height: width / 9,
borderRadius: 2,
}}
/>
) : (
<Text color={isPlaying ? Colors.Primary : Colors.White}>
{ track.IndexNumber?.toString() ?? "" }
</Text>
)}
</XStack>
<YStack alignContent="center" justifyContent="flex-start" flex={6}>
<Text
bold
color={isPlaying ? Colors.Primary : Colors.White}
lineBreakStrategyIOS="standard"
numberOfLines={1}
>
{ track.Name ?? "Untitled Track" }
</Text>
{ (showArtwork || (track.ArtistCount ?? 0 > 1)) && (
<Text lineBreakStrategyIOS="standard" numberOfLines={1}>{ track.Artists?.join(", ") ?? "" }</Text>
)}
</YStack>
<XStack
alignItems="center"
justifyContent="space-between"
alignContent="center"
flex={1}
>
<YStack
alignContent="center"
justifyContent="center"
>
{ track.UserData?.IsFavorite ? (
<Icon small name="heart" color={Colors.Primary} />
) : (
<Spacer />
)}
</YStack>
<YStack
alignContent="center"
justifyContent="center"
>
<RunTimeTicks>{ track.RunTimeTicks }</RunTimeTicks>
</YStack>
</XStack>
</XStack>
)}>
<XStack backgroundColor={Colors.Background}>
<H5>{ track.Name ?? "Untitled Track" }</H5>
imageStyle={{
position: "relative",
width: width / 9,
height: width / 9,
borderRadius: 2,
}}
/>
) : (
<Text color={isPlaying ? Colors.Primary : Colors.White}>
{ track.IndexNumber?.toString() ?? "" }
</Text>
)}
</XStack>
</Popover>
</OutsidePressHandler>
<YStack alignContent="center" justifyContent="flex-start" flex={5}>
<Text
bold
color={isPlaying ? Colors.Primary : Colors.White}
lineBreakStrategyIOS="standard"
numberOfLines={1}
>
{ track.Name ?? "Untitled Track" }
</Text>
{ (showArtwork || (track.ArtistCount ?? 0 > 1)) && (
<Text lineBreakStrategyIOS="standard" numberOfLines={1}>{ track.Artists?.join(", ") ?? "" }</Text>
)}
</YStack>
<XStack
alignItems="center"
justifyContent="space-between"
alignContent="center"
flex={2}
>
<YStack
alignContent="center"
justifyContent="center"
>
{ track.UserData?.IsFavorite ? (
<Icon small name="heart" color={Colors.Primary} />
) : (
<Spacer />
)}
</YStack>
<YStack
alignContent="center"
justifyContent="center"
>
<RunTimeTicks>{ track.RunTimeTicks }</RunTimeTicks>
</YStack>
</XStack>
</XStack>
</View>
)
}