Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
watchinharrison-react-native-scrubber
Advanced tools
Readme
A video/audio scrubber for react native.
npm install react-native-scrubber
or
yarn add react-native-scrubber`
import Scrubber from 'react-native-scrubber'
Name | Type | Description |
---|---|---|
value | Number | The current value of the video/audio. |
bufferedValue | Number | The current buffered value of the video/audio. |
totalDuration | Number | The total duration of the video/audio (Needed to calculated animations within the scrubber). Note If you supply a totalDuration of 0 the starting and ending number will display both as --:-- since we require the totalDuration to display those numbers. |
onSlidingComplete | Function | Callback that is called when the user releases the slider, regardless if the value has changed. |
trackBackgroundColor | String | Hex color representing the color of the background (Unfilled) track |
trackColor | String | Hex color representing the color of the foregroud (Filled) track. |
bufferedTrackColor | String | Hex color representing the color of the buffered track which sits inbetween the background track and the progress track. |
scrubbedColor | String | Hex color represending the color of the foregroud (Filled) track and the dot when the scrubber is active. Also changes the color of the starting number. |
displayedValueStyle | Object | This stlye is applied to both the displayed values |
import React, { Component } from 'react'
import { View, Text } from 'react-native'
import Scrubber from 'react-native-scrubber'
class Example extends Component {
state = {
scrubberValue: 0,
}
componentDidMount() {
this.valueChangeInterval = setInterval(() => {
this.setState({
scrubberValue: this.state.scrubberValue + 1,
})
}, 200);
}
componentWillUnmount() {
clearInterval(this.valueChangeInterval);
}
valueChange = value => {
this.setState({ scrubberValue: value })
}
render() {
return (
<View>
<Scrubber
value={this.state.scrubberValue}
onSlidingComplete={this.valueChange}
totalDuration={7000}
trackColor='#666'
scrubbedColor='#8d309b'
/>
</View>
);
}
}
export default Example
A Scrubber is a component used for audio or video to choose where in the media the user wants to navigate to.
I tried implementing a slider in my app at first and the problem with a slider is new values will be constantly coming in due to the audio or video playing, and a slider will jerk around while the user is scrubbing. Also a user can't fine tune the exact value on large values. Also also the React Native Slider has a limiting styling and no nice animations.
FAQs
A Scrubber component for handling audio/video within React Native
The npm package watchinharrison-react-native-scrubber receives a total of 5 weekly downloads. As such, watchinharrison-react-native-scrubber popularity was classified as not popular.
We found that watchinharrison-react-native-scrubber demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.