mirror/Jellify
1
0
Fork 0
mirror of https://github.com/anultravioletaurora/Jellify.git synced 2026-05-12 00:20:35 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add gesture detector for player scrubber

Browse Source
This commit is contained in:
Violet Caulfield
2025-02-10 08:48:45 -06:00
parent 3c3fff73d6
commit f7b27ce2e4
1 changed files with 51 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Player/screens/index.tsx
+51 -47
View File
@@ -15,6 +15,9 @@ import TextTicker from "react-native-text-ticker";
import { ProgressMultiplier, TextTickerConfig } from "../component.config";
import { toUpper } from "lodash";
import { trigger } from "react-native-haptic-feedback";
import { Gesture, GestureDetector } from "react-native-gesture-handler";
const scrubGesture = Gesture.Pan();
export default function PlayerScreen({
navigation
@@ -192,54 +195,55 @@ export default function PlayerScreen({
{ 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);
navigation.setOptions({
gestureEnabled: true
});
useSeekTo.mutate(Math.floor(progressState / ProgressMultiplier));
},
onSlideStart: () => {
trigger("impactLight");
setSeeking(true);
navigation.setOptions({
gestureEnabled: false
});
},
onSlideMove: (event, value) => {
setSeeking(true);
navigation.setOptions({
gestureEnabled: false
});
setProgressState(value);
},
onSlideEnd: (event, value) => {
setSeeking(false);
navigation.setOptions({
gestureEnabled: true
});
useSeekTo.mutate(Math.floor(value / ProgressMultiplier));
<GestureDetector gesture={scrubGesture}>
<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);
navigation.setOptions({
gestureEnabled: true
});
useSeekTo.mutate(Math.floor(progressState / ProgressMultiplier));
},
onSlideStart: () => {
trigger("impactLight");
setSeeking(true);
navigation.setOptions({
gestureEnabled: false
});
},
onSlideMove: (event, value) => {
setSeeking(true);
navigation.setOptions({
gestureEnabled: false
});
setProgressState(value);
},
onSlideEnd: (event, value) => {
setSeeking(false);
navigation.setOptions({
gestureEnabled: true
});
useSeekTo.mutate(Math.floor(value / ProgressMultiplier));
}
}}
/>
</GestureDetector>
)}, [
progressState
]