react-native-video-basic-controls

React native video controls. Controls for the react-native-video component for Android and IOS.

Features

• Full screen support.
• Change volume and brightness with Swipe/ Slider controls.
• Seek forword and back button.
• Slider customisation.
• Swipe controls left-side brightness & right-side volume.

Installation

npm install react-native-video-basic-controls

For Brightness or Volume controls install react-native-system-setting

npm install react-native-system-setting

link react-native-system-setting

react-native link

Add permission in android/app/src/main/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="YourPackageName"
    android:versionCode="1"
    android:versionName="1.0">

    <!-- setBrightness() & setScreenMode() & saveBrightness() -->
    <uses-permission android:name="android.permission.WRITE_SETTINGS" />

    ...

</manifest>

Usage

// Require the module
import MediaControls, {
  PLAYER_STATES,
} from 'react-native-video-basic-controls';

const App = () => {
  const [currentTime, setCurrentTime] = useState(0);
  const [duration, setDuration] = useState(0);
  const [isFullScreen, setIsFullScreen] = useState(false);
  const [isLoading, setIsLoading] = useState(true);
  const [paused, setPaused] = useState(false);
  const [playerState, setPlayerState] = useState(PLAYER_STATES.PLAYING);

  return (
    <View style={styles.container}>
      <Video {...videoProps} />
      <MediaControls
        duration={duration}
        isLoading={isLoading}
        mainColor="orange"
        onFullScreen={noop}
        onPaused={onPaused}
        onReplay={onReplay}
        onSeek={onSeek}
        onSeeking={onSeeking}
        playerState={playerState}
        progress={currentTime}
      >
        <MediaControls.Toolbar>// ...</MediaControls.Toolbar>
      </MediaControls>
    </View>
  );
};

Refer to example for implementation of this project

Props

Main Props

Prop	Type	Optional	Default	Description
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)
onPaused	function	No		Triggered when the play/pause button is pressed. It returns the new toggled value (PLAYING or PAUSED)
onSeek	function	No		Triggered when the user released the slider
onReplay	function	Yes		Triggered when the replay button is pressed
onSeeking	function	Yes		Triggered when the user is interacting with the slider

Other Props

Prop	Type	Optional	Default	Description
isLoading	boolean	Yes	false	When is loading (displays loading icon).
fadeOutDelay	number	Yes	5000	Allows to customize the delay between fade in and fade out transition.
onFullScreen	function	Yes		Custom fullscreen function, triggered when the fullscreen button is pressed.
showOnStart	boolean	Yes	true	controls the visibility of the controls during the initial render.
fullScreenIconL	component	Yes		Fullscreen icon (landscape mode).
fullScreenIconP	component	Yes		Fullscreen icon (Portrait mode).
bufferValue	number	Yes		Add buffer value to Slider.
onSkipFor	String	Yes		To seek forward.
onSkipBack	String	Yes		To seek back.
showVolume	boolean	Yes	false	Show Volume controls.
showBrightness	boolean	Yes	false	Show Brightness controls.
sliderScale	number	Yes	10	Scale brightness/ volume slider on press.
sliderType	String	Yes	'Slider'	Select brightness/ volume slider type(Slider/swipe).

Style Props

Prop	Type	Optional	Default	Description
mainColor	string	Yes	rgba(12, 83, 175, 0.9)	Change custom color to the media controls
containerStyle	StyleSheet	Yes		Apply styles to the container
toolbarStyle	StyleSheet	Yes		Apply styles to <MediaControls.Toolbar>
iconStyle	StyleSheet	Yes		Apply styles to fullscreen icon
sliderStyle	StyleSheet	Yes		Apply styles to Slider
bufferColor	String	Yes	#fff	Change color of buffer view
VSliderOuterStyles	StyleSheet	Yes		Apply styles to volume/brightness outer slider.
VSliderInnerStyles	StyleSheet	Yes		Apply styles to volume/brightness track slider.

sliderStyle={{
  thumbStyle:{
     // ...
   },
   trackStyle:{
     // ...
   },
   containerStyle:{
     // ...
   }
}}

Contributing

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

License

MIT