mirror/App
1
0
Fork 0
mirror of https://github.com/Jellify-Music/App.git synced 2026-04-28 14:39:33 -05:00
Code Issues Packages Projects Releases Wiki Activity

Adding scaffold for discover

Browse Source 
adding slider

player component styling

wiring progess into player provider
This commit is contained in:
Violet Caulfield
2025-01-06 15:43:20 -06:00
parent a274b2082f
commit 36e4ec84f0
7 changed files with 97 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Player/component.tsx
+15 -6
View File
@@ -12,11 +12,12 @@ import { SafeAreaView } from "react-native-safe-area-context";
import { playPauseButton } from "./helpers/buttons";
import { BottomTabNavigationEventMap } from "@react-navigation/bottom-tabs";
import { NavigationHelpers, ParamListBase } from "@react-navigation/native";
import { HorizontalSlider } from "../Global/slider";
export default function Player({ navigation }: { navigation : NavigationHelpers<ParamListBase, BottomTabNavigationEventMap> }): React.JSX.Element {
const { apiClient } = useApiClientContext();
const { queue, playbackState, nowPlaying, play, pause } = usePlayerContext();
const { queue, playbackState, nowPlaying, play, pause, progress } = usePlayerContext();
return (
<SafeAreaView>
@@ -42,21 +43,23 @@ export default function Player({ navigation }: { navigation : NavigationHelpers<
/>
</XStack>
<XStack>
<XStack
alignContent="flex-start"
marginHorizontal={10}
>
<YStack alignContent="flex-start">
<Text>{nowPlaying?.title ?? "Untitled Track"}</Text>
<Text
bold
onPress={() => {
navigation.goBack();
navigation.navigate("Artist", {
artistName: nowPlaying?.artist,
artistId: nowPlaying?.ArtistId
artistName: nowPlaying.artist,
artistId: nowPlaying.ArtistId
})
}}
>
{nowPlaying?.artist ?? "Unknown Artist"}</Text>
{nowPlaying.artist ?? "Unknown Artist"}</Text>
</YStack>
<XStack>
@@ -68,6 +71,12 @@ export default function Player({ navigation }: { navigation : NavigationHelpers<
<XStack>
{/* playback progress goes here */}
<HorizontalSlider
value={progress!.position}
max={progress!.duration}
width={400}
/>
</XStack>
<XStack>