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