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

memoize slider?

Browse Source
This commit is contained in:
Violet Caulfield
2025-02-09 13:47:12 -06:00
parent 4d64600f27
commit 72076c9f9c
1 changed files with 36 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Player/screens/index.tsx
+36 -28
View File
@@ -91,7 +91,7 @@ export default function PlayerScreen({
<YStack
alignItems="center"
alignContent="center"
flex={4}
flex={3}
>
<Text>Playing from</Text>
<TextTicker {...TextTickerConfig}>
@@ -195,33 +195,41 @@ export default function PlayerScreen({
<XStack justifyContent="center" marginTop={"$2"}>
{/* playback progress goes here */}
<HorizontalSlider
value={progressState}
max={
progress && progress.duration > 0
? progress.duration * ProgressMultiplier
: 1
}
width={width / 1.1}
props={{
// If user swipes off of the slider we should seek to the spot
// onPressOut: () => {
// setSeeking(false);
// useSeekTo.mutate(Math.round(progressState / ProgressMultiplier));
// },
onSlideStart: () => {
setSeeking(true);
},
onSlideMove: (event, value) => {
setSeeking(true);
setProgressState(value);
},
onSlideEnd: (event, value) => {
setSeeking(false);
useSeekTo.mutate(Math.round(value / ProgressMultiplier));
}
}}
/>
{ useMemo(() => {
return (
<HorizontalSlider
value={progressState}
max={
progress && progress.duration > 0
? progress.duration * ProgressMultiplier
: 1
}
width={width / 1.1}
props={{
// If user swipes off of the slider we should seek to the spot
// onPressOut: () => {
// setSeeking(false);
// useSeekTo.mutate(Math.round(progressState / ProgressMultiplier));
// },
onSlideStart: () => {
setSeeking(true);
},
onSlideMove: (event, value) => {
setSeeking(true);
setProgressState(value);
},
onSlideEnd: (event, value) => {
setSeeking(false);
useSeekTo.mutate(Math.round(value / ProgressMultiplier));
}
}}
/>
)}, [
progressState
]
)}
</XStack>
<XStack marginHorizontal={20} marginTop={"$4"} marginBottom={"$2"}>