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

break out track to it's own component for reuse

Browse Source
This commit is contained in:
Violet Caulfield
2025-01-09 06:35:12 -06:00
parent 573526b33d
commit 6ada02cb60
2 changed files with 71 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
components/Album/component.tsx
View File

@@ -13,6 +13,7 @@ import { useAlbumTracks } from "../../api/queries/album";
import { usePlayerContext } from "../../player/provider";
import { mapDtoToTrack } from "../../helpers/mappings";
import RunTimeTicks from "../Global/runtimeticks";
import Track from "../Global/track";
interface AlbumProps {
album: BaseItemDto,
@@ -53,34 +54,12 @@ export default function Album(props: AlbumProps): React.JSX.Element {
numColumns={1}
renderItem={({ item: track, index }) => {
let isPlaying = nowPlaying?.ItemId === track.Id;
return (
<View>
<Separator />
<XStack
flex={1}
onPress={async (track) => {
await resetQueue(false)
await addToQueue(tracks!.map((track) => mapDtoToTrack(apiClient!, sessionId, track)));
play(index);
}}
paddingVertical={"$2"}
paddingHorizontal={"$1"}
>
<XStack justifyContent="center" flex={1}>
<Text>{ track.IndexNumber?.toString() ?? "" }</Text>
</XStack>
<XStack alignContent="flex-start" flex={8}>
<Text>{ track.Name ?? "Untitled Track" }</Text>
</XStack>
<XStack alignContent="flex-end" flex={1}>
<RunTimeTicks>{ track.RunTimeTicks }</RunTimeTicks>
</XStack>
</XStack>
</View>
<Track
track={track}
tracklist={tracks!}
index={index}
/>
)
}}/>

65
components/Global/track.tsx Normal file
View File

@@ -0,0 +1,65 @@
import { usePlayerContext } from "@/player/provider";
import React from "react";
import { Separator, useTheme, View, XStack } from "tamagui";
import { Text } from "./text";
import RunTimeTicks from "./runtimeticks";
import { useApiClientContext } from "../jellyfin-api-provider";
import { mapDtoToTrack } from "@/helpers/mappings";
import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
import { Colors } from "@/enums/colors";
interface TrackProps {
track: BaseItemDto;
tracklist: BaseItemDto[];
index: number;
showArtwork?: boolean | undefined;
}
export default function Track({
track,
tracklist,
index,
showArtwork
} : {
track: BaseItemDto,
tracklist: BaseItemDto[],
index: number,
showArtwork?: boolean | undefined
}) : React.JSX.Element {
const { apiClient, sessionId } = useApiClientContext();
const { nowPlaying, resetQueue, addToQueue, play } = usePlayerContext();
const theme = useTheme();
let isPlaying = nowPlaying?.ItemId === track.Id
return (
<View>
<Separator />
<XStack
flex={1}
onPress={async () => {
await resetQueue(false)
await addToQueue(tracklist.map((track) => mapDtoToTrack(apiClient!, sessionId, track)));
play(index);
}}
paddingVertical={"$2"}
paddingHorizontal={"$1"}
>
<XStack justifyContent="center" flex={1}>
<Text>{ track.IndexNumber?.toString() ?? "" }</Text>
</XStack>
<XStack alignContent="flex-start" flex={8}>
<Text color={isPlaying ? theme.accentColor : theme.white12}>{ track.Name ?? "Untitled Track" }</Text>
</XStack>
<XStack alignContent="flex-end" flex={1}>
<RunTimeTicks>{ track.RunTimeTicks }</RunTimeTicks>
</XStack>
</XStack>
</View>
)
}