Add Seeking ability

clean up some backend player handlers

scaling fixes
This commit is contained in:
Violet Caulfield
2025-01-12 08:37:44 -06:00
parent bd99e17bf6
commit 83828faa84
6 changed files with 78 additions and 44 deletions
+12 -5
View File
@@ -21,7 +21,7 @@ import Icon from "../Global/helpers/icon";
export default function Player({ navigation }: { navigation : NavigationHelpers<ParamListBase, BottomTabNavigationEventMap> }): React.JSX.Element {
const { apiClient } = useApiClientContext();
const { nowPlaying, progress } = usePlayerContext();
const { nowPlaying, progress, useSeekTo } = usePlayerContext();
const { width } = useSafeAreaFrame();
@@ -63,8 +63,8 @@ export default function Player({ navigation }: { navigation : NavigationHelpers<
imageStyle={{
position: "relative",
alignSelf: "center",
width: width / 1.25,
height: width / 1.25,
width: width / 1.5,
height: width / 1.5,
borderRadius: 2
}}
/>
@@ -92,12 +92,19 @@ export default function Player({ navigation }: { navigation : NavigationHelpers<
</XStack>
</XStack>
<XStack justifyContent="center" margin={15}>
<XStack justifyContent="center" marginHorizontal={20}>
{/* playback progress goes here */}
<HorizontalSlider
value={progress!.position}
max={progress!.duration}
width={width / 1.25}
width={width / 1.5}
props={{
onValueChange: (value) => {
const position = value[0];
useSeekTo.mutate(position);
}
}}
/>
</XStack>
+2 -2
View File
@@ -50,8 +50,8 @@ export function Miniplayer({ navigation }: { navigation : NavigationHelpers<Para
}
imageStyle={{
position: "relative",
width: width / 6,
height: width / 6,
width: width / 8,
height: width / 8,
borderRadius: 2,
}}
/>