diff --git a/components/Global/components/track.tsx b/components/Global/components/track.tsx index 6d5ba8d4..51ab61c3 100644 --- a/components/Global/components/track.tsx +++ b/components/Global/components/track.tsx @@ -1,5 +1,5 @@ import { usePlayerContext } from "@/player/provider"; -import React from "react"; +import React, { useState } from "react"; import { Separator, Spacer, View, XStack, YStack } from "tamagui"; import { Text } from "../helpers/text"; import { RunTimeTicks } from "../helpers/time-codes"; @@ -11,6 +11,7 @@ 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"; interface TrackProps { track: BaseItemDto; @@ -44,104 +45,118 @@ export default function Track({ const isPlaying = nowPlaying?.item.Id === track.Id; + const [popoverOpen, setPopoverOpen] = useState(false); + return ( - { - if (onLongPress) { - onLongPress(); - } else { - - } - }} - onPress={() => { - if (onPress) { - onPress(); - } else { - usePlayNewQueue.mutate({ - track, - index, - tracklist, - queueName: queueName ? queueName : track.Album ? track.Album! : "Queue" - }); - } - }} - paddingVertical={"$2"} - marginHorizontal={"$1"} - > - - { showArtwork ? ( - { + + setPopoverOpen(true) + + if (onLongPress) { + onLongPress(); + } else { + } - imageStyle={{ - position: "relative", - width: width / 9, - height: width / 9, - borderRadius: 2, - }} - /> - - ) : ( - - { track.IndexNumber?.toString() ?? "" } - - )} - - - - { + if (onPress) { + onPress(); + } else { + usePlayNewQueue.mutate({ + track, + index, + tracklist, + queueName: queueName ? queueName : track.Album ? track.Album! : "Queue" + }); + } + }} + paddingVertical={"$2"} + marginHorizontal={"$1"} > - { track.Name ?? "Untitled Track" } - - - { (showArtwork || (track.ArtistCount ?? 0 > 1)) && ( - { track.Artists?.join(", ") ?? "" } - )} - - - - - { track.UserData?.IsFavorite ? ( - - ) : ( - + + { showArtwork ? ( + + + ) : ( + + { track.IndexNumber?.toString() ?? "" } + )} - + - - { track.RunTimeTicks } - - - + + + { track.Name ?? "Untitled Track" } + + + { (showArtwork || (track.ArtistCount ?? 0 > 1)) && ( + { track.Artists?.join(", ") ?? "" } + )} + + + + + { track.UserData?.IsFavorite ? ( + + ) : ( + + )} + + + + { track.RunTimeTicks } + + + + )}> + + + + ) } \ No newline at end of file diff --git a/components/Global/helpers/popover.tsx b/components/Global/helpers/popover.tsx new file mode 100644 index 00000000..b864a52b --- /dev/null +++ b/components/Global/helpers/popover.tsx @@ -0,0 +1,26 @@ +import React from "react" +import { Popover as TamaguiPopover, View } from "tamagui" + +interface PopoverProps { + children: React.ReactNode; + anchor: React.ReactNode; + open: boolean +} + +export default function Popover(props: PopoverProps) : React.JSX.Element { + return ( + + + { props.anchor } + + + + + + + { props.children } + + + + ) +} \ No newline at end of file