react-native-video-basic-controls
TypeScript icon, indicating that this package has built-in type declarations

0.1.16 • Public • Published

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

Package Sidebar

Install

npm i react-native-video-basic-controls

Weekly Downloads

14

Version

0.1.16

License

MIT

Unpacked Size

453 kB

Total Files

120

Last publish

Collaborators

  • prthmsh