Skip to content

Commit

Permalink
fix: delay between thumb and track while sliding fast
Browse files Browse the repository at this point in the history
armata99 committed Apr 22, 2024
1 parent 3d8e620 commit 25b37bb
Showing 3 changed files with 42 additions and 22 deletions.
43 changes: 25 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
@@ -31,26 +31,31 @@ yarn add rn-video-slider
That will be it.

## Usage

```typescript jsx
import {Dimensions} from "react-native";
import Slider, {ISlider} from "rn-video-slider";

const ControlSet=()=>{

const sliderRef = React.createRef<ISlider>();
//call below function in video progress callback
//sliderRef.current?.setProgress(0.5);

const _onSlide = (value: number) => {
//seek your video with value
};

return (
<Slider
ref={sliderRef}
width={400}
onSlide={_onSlide}
/>
)
const ControlSet = () => {

const sliderRef = React.createRef<ISlider>();
//call below function in video progress callback
//sliderRef.current?.setProgress(0.5);

const _onSlide = (value: number) => {
//seek your video with value
};

//this simpy means 80% of screen's width
const sliderWdith = Dimensions.get('window').width * 0.8;

return (
<Slider
ref={sliderRef}
width={sliderWdith}
onSlide={_onSlide}
/>
)
}
```

@@ -95,9 +100,11 @@ Here is the list of methods that can be called via reference.
**Note:** progress values are a float from 0 to 1

## TODO
- [ ] fix delay between thumb and track while sliding fast
- [ ] write necessary tests
- [ ] write a better example
- [ ] add expansion feature
- [ ] more and better demo gifs
- [x] ~~fix delay between thumb and track while sliding fast~~
- [x] ~~implement tap to seek feature~~
- [x] ~~replace the deprecated `useAnimatedGestureHandler` with newer API~~
- [x] ~~add style prop for root view~~
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "rn-video-slider",
"version": "0.3.0",
"version": "0.3.1",
"description": "A dedicated progress slider for video players in React-native.",
"main": "src/index.tsx",
"directories": {
19 changes: 16 additions & 3 deletions src/Slider.tsx
Original file line number Diff line number Diff line change
@@ -113,6 +113,21 @@ const SliderComponent = (props: ISliderProps, ref: ForwardedRef<ISlider>) => {
}
});

const progressWidth = useDerivedValue(() => {
const nextValue = progress.value * width + offsetOverflow;
if (nextValue >= 0 && nextValue <= width) {
return nextValue;
} else {
if (nextValue > width) {
progress.value = 1;
return width;
} else {
progress.value = 0;
return 0;
}
}
});

const bufferWidth: SharedValue<number> = useDerivedValue(() => {
const nextValue = bufferProgress.value * width;
if (nextValue >= 0 && nextValue <= width) {
@@ -129,9 +144,7 @@ const SliderComponent = (props: ISliderProps, ref: ForwardedRef<ISlider>) => {
});

const progressAnimatedStyle = useAnimatedStyle((): ViewStyle => {
return {
width: withSpring(thumbOffset.value + offsetOverflow, {stiffness: 1000, damping: 1000}),
};
return {width: progressWidth.value};
});

const bufferAnimatedStyle = useAnimatedStyle((): ViewStyle => {

0 comments on commit 25b37bb

Please sign in to comment.