mirror/App
1
0
Fork 0
mirror of https://github.com/Jellify-Music/App.git synced 2026-01-28 05:58:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

idk if this makes it smoother?

Browse Source
This commit is contained in:
Violet Caulfield
2025-04-17 18:23:41 -05:00
parent 17947551e2
commit 32fb316e20
1 changed files with 51 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
components/Player/helpers/scrubber.tsx
View File

@@ -11,6 +11,7 @@ import { UPDATE_INTERVAL } from '../../../player/config'
import { ProgressMultiplier } from '../component.config'
import Icon from '../../../components/Global/helpers/icon'
import PlayPauseButton from './buttons'
import Animated from 'react-native-reanimated'
const scrubGesture = Gesture.Pan()
@@ -42,56 +43,58 @@ export default function Scrubber(): React.JSX.Element {
}, [progress.position])
return (
<YStack>
<GestureDetector gesture={scrubGesture}>
<HorizontalSlider
value={position}
max={
progress && progress.duration > 0
? progress.duration * ProgressMultiplier
: 1
}
width={width / 1.125}
props={{
// If user swipes off of the slider we should seek to the spot
onPressOut: () => {
trigger('notificationSuccess')
useSeekTo.mutate(Math.floor(position / ProgressMultiplier))
setSeeking(false)
},
onSlideStart: (event, value) => {
setSeeking(true)
trigger('impactLight')
},
onSlideMove: (event, value) => {
trigger('clockTick')
setPosition(value)
},
onSlideEnd: (event, value) => {
trigger('notificationSuccess')
setPosition(value)
useSeekTo.mutate(Math.floor(value / ProgressMultiplier))
setSeeking(false)
},
}}
/>
</GestureDetector>
<Animated.View>
<YStack>
<GestureDetector gesture={scrubGesture}>
<HorizontalSlider
value={position}
max={
progress && progress.duration > 0
? progress.duration * ProgressMultiplier
: 1
}
width={width / 1.125}
props={{
// If user swipes off of the slider we should seek to the spot
onPressOut: () => {
trigger('notificationSuccess')
useSeekTo.mutate(Math.floor(position / ProgressMultiplier))
setSeeking(false)
},
onSlideStart: (event, value) => {
setSeeking(true)
trigger('impactLight')
},
onSlideMove: (event, value) => {
trigger('clockTick')
setPosition(value)
},
onSlideEnd: (event, value) => {
trigger('notificationSuccess')
setPosition(value)
useSeekTo.mutate(Math.floor(value / ProgressMultiplier))
setSeeking(false)
},
}}
/>
</GestureDetector>
<XStack margin={'$2'} marginTop={'$3'}>
<YStack flex={1} alignItems='flex-start'>
<RunTimeSeconds>{Math.floor(position / ProgressMultiplier)}</RunTimeSeconds>
</YStack>
<XStack margin={'$2'} marginTop={'$3'}>
<YStack flex={1} alignItems='flex-start'>
<RunTimeSeconds>{Math.floor(position / ProgressMultiplier)}</RunTimeSeconds>
</YStack>
<YStack flex={1} alignItems='center'>
{/** Track metadata can go here */}
</YStack>
<YStack flex={1} alignItems='center'>
{/** Track metadata can go here */}
</YStack>
<YStack flex={1} alignItems='flex-end'>
<RunTimeSeconds>
{progress && progress.duration ? Math.ceil(progress.duration) : 0}
</RunTimeSeconds>
</YStack>
</XStack>
</YStack>
<YStack flex={1} alignItems='flex-end'>
<RunTimeSeconds>
{progress && progress.duration ? Math.ceil(progress.duration) : 0}
</RunTimeSeconds>
</YStack>
</XStack>
</YStack>
</Animated.View>
)
}