react-native-media-controls
A sweet UI component to manipulate your media
Installation
yarn add react-native-media-controls
Usage
// Require the module
import MediaControls, { PLAYER_STATES } from 'react-native-media-controls';
render() {
return (
<View style={styles.container}>
<Video
onEnd={this.onEnd}
onLoad={this.onLoad}
onLoadStart={this.onLoadStart}
onProgress={this.onProgress}
paused={this.state.paused}
ref={videoPlayer => (this.videoPlayer = videoPlayer)}
resizeMode="cover"
source={{ uri: 'https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4' }}
style={styles.mediaPlayer}
volume={0.0}
/>
<MediaControls
duration={this.state.duration}
isLoading={this.state.isLoading}
mainColor="orange"
onFullScreen={this.onFullScreen}
onPaused={this.onPaused}
onReplay={this.onReplay}
onSeek={this.onSeek}
playerState={this.state.playerState}
progress={this.state.currentTime}
toolbar={this.renderToolbar()}
// playIcon={}
// pauseIcon={}
// replayIcon={}
// controlsColor={}
// controlsStyle={}
// iconStyle={}
/>
</View>
);
}
Props
| Prop | Type | Optional | Default | Description |
|---|---|---|---|---|
| toolbar | node | Yes | Add a custom view on the top of the controls | |
| mainColor | string | Yes | rgba(12, 83, 175, 0.9) | Change custom color to the media controls (progress bar) |
| isLoading | bool | Yes | false | When is loading |
| isFullScreen | bool | Yes | false | To change icon state of fullscreen |
| progress | number | No | Current time of the media player | |
| duration | number | No | Total duration of the media | |
| playerState | number | No | Could be PLAYING, PAUSED or ENDED (take a look at constants section) | |
| onFullScreen | function | Yes | Triggered when the fullscreen button is pressed | |
| onPaused | function | No | Triggered when the play/pause button is pressed. It returns the new toggled value (PLAYING or PAUSED) | |
| onReplay | function | Yes | Triggered when the replay button is pressed | |
| onSeek | function | No | Triggered when the user released the slider | |
| onSeeking | function | Yes | Triggered when the user is interacting with the slider | |
| playIcon | string | Yes | Could pass a require('image path') or {uri='image path'} to show as the play icon | |
| pauseIcon | string | Yes | Could pass a require('image path') or {uri='image path'} to show as the pause icon | |
| replayIcon | string | Yes | Could pass a require('image path') or {uri='image path'} to show as the replay icon | |
| controlsColor | string | Yes | Change custom background color to the media controls (play, pause and replay button) | |
| controlsStyle | object | Yes | Change custom style to the media controls (play, pause and replay button) | |
| iconStyle | object | Yes | Change custom style to the media controls icon (play, pause and replay) |
Constants
PLAYING,
PAUSED,
ENDED,Example
Refer to the example folder to find an implementation of this project
