Skip to content

advanced video player controls for react native (react-native-video) app.

License

Notifications You must be signed in to change notification settings

r3tr0c0d3r/react-native-nexen-player

Repository files navigation

react-native-nexen-player

A next gen video player for react native app based on react-native-video. It provides advanced media control functionality.

Preview

@

Installation

npm install --save react-native-nexen-player

or

yarn add react-native-nexen-player

Dependencies

yarn add react-native-video react-native-svg

Usage

import NexenPlayer, { NexenPlayerRef } from 'react-native-nexen-player';

// ...

const [paused, setPaused] = React.useState(true);
const playerRef = React.useRef < NexenPlayerRef > null;

const onPausePress = () => {
  if (paused) {
    playerRef.current?.play();
  } else {
    playerRef?.current?.pause();
  }
  setPaused((prevState) => !prevState);
};

<NexenPlayer
  ref={playerRef}
  style={styles.player}
  source={{
    source: require('../assets/videos/Street_Fighter_V_Stop_Motion.mp4'),
    poster: 'https://img.youtube.com/vi/KrmxD8didgQ/0.jpg',
    title: "Ryu's Hurricane Kick and Hadoken",
  }}
/>;

// ...

Component props

prop type default description
source NexenPlayer NexenSource object {} media source.
config NexenPlayer NexenConfig object {} vidoe player config.
playList object {} can set video playlist for the player.
insets object {} edge insets for video controls. you can set insets from react-native-safe-area-context.
style object {} style for video player.
theme object {} set theme for video player.

NexenSource

prop type default description
source Source {} media source.
title string undefined video title.
poster string undefined poster url.
textTracks TextTrack[] undefined text tracks (cations or subtitle) for the video.
selectedTextTrack SelectedTextTrack undefined text trak that will be shown for the video.
selectedAudioTrack SelectedAudioTrack undefined audio track that will be selected for the video.

NexenConfig

prop type default description
loaderText string 'Loading...' text for loader.
errorText string 'Error...!' text for error message.
doubleTapTime number 300ms duration of double tap.
controlTimeout number 500ms main control will hide after this amount of time when controlHideMode set to 'auto'.
controlHideMode string 'touch' hide options for main control - 'touch' or 'auto'.
layoutMode stirng 'basic' options for main control layout - 'basic', 'intermediate' or 'advanced'.
resizeMode ResizeMode object 'contain' video resize options.
posterResizeMode ResizeMode object 'cover' poster resize options.
volume number 80 volume of the video (0-100).
brightness number 25 brightness of the video (0-100).
playbackSpeed PlaybackSpeed objecj '1.0' video playback speed.
muted boolean false mute video.
repeat boolean false repeat video.
autoPlay boolean false should autoplay the video.
disableOnScreenPlayButton boolean false a large play button that appears on screen when video is paused.
disableBack boolean false hide back button.
disableResizeMode boolean false hide aspect ration button.
disableVolume boolean false hide volume button.
disableMore boolean false hide more button.
disableSkip boolean false hide skip buttons.
disableStop boolean false hide stop button.
disableFullscreen boolean false hide fullscreen button.
disablePlayList boolean false hide video playlist button.
index number 0 flatlist index (only for FlatList)
activeIndex number -1 flatlist current video index (only for FlatList)
optimize boolean false wheather you need flatlist optimization or not (only for FlatList)

Enevt props

prop type default description
onBackPressed func undefined callback for back button.
onPlay func undefined callback for play button.
onPause func undefined callback for pause button.
onStop func undefined callback for stop button.
onSkipNext func undefined callback for skipNext event.
onSkipBack func undefined callback for skipBack event.
onReload func undefined callback for reload event.
onVolumeUpdate func undefined callback for volume update event.
onBrightnessUpdate func undefined callback for brightness update event.
onMuteUpdate func undefined callback for mute button.
onRepeatUpdate func undefined callback for loop button.
onSpeedUpdate func undefined callback for playback speed update event.
onFullScreenModeUpdate func undefined callback for fullscreen mode update event.
onScreenLockUpdate func undefined callback for screen lock update event.
onPlayListItemSelect func undefined callback for video list item select event.
onLoad func undefined callback for video load event.
onError func undefined callback for video load error event.

Methods

prop type default description
play func undefined call to play a video.
pause func undefined call to pause a video.
stop func undefined call to stop a video.
skipNext func undefined skip to next video.
skipBack func undefined skip to prvious video.
reload func undefined call to reload a video.
load func undefined call to load a video.
setFullScreenMode func undefined set fullscreen mode.

ToDo

  • Custom icon support
  • Improve fullscreen support
  • Better documentation

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT