React-native player with Custom Controls

Creating Custom control component

<Video Player Controller>    // Component to hold the video player and custom controls

    <Video Player View/>    // Video Player

    <Custom Control View/>  // Custom controls

</Video Player Controller>

Sample code : VdoPlayerControls.js

Step 1: Create a component and import VdoPlayerView

The step 1 is to create a component and import the VdoPlayerView in order to access the video player and execute the player operations.

import {VdoPlayerView} from 'vdocipher-rn-bridge';

Step 2: Add the video player view

Next step is to embed the video player view. To embed the video player view use VdoPlayerView component and pass embed info to it's embedInfo attribute.

note

Since we are creating our custom controls for the video player, so it's necessary to pass showNativeControls={false} to the VdoPlayerView component in order to suppress the native controls.

const embedInfo = {otp: 'some-otp', playbackInfo: 'some-playbackInfo'};

<VdoPlayerView
  embedInfo={embedInfo}
  style={{height: 200, width: '100%'}}
  showNativeControls={false}
/>;

Step 3: Create a view for the custom controls

Next step is to build a view to display the custom controls to access the video player and perform player operations as the sibling to VdoPlayerView component.

Here is the sample code for creating custom control view in which we are showing the play/pause button, the seek-bar and the fullscreen button.

// JSX
<View style={styles.controls.container}>
  <TouchableWithoutFeedback onPress={this._onPlayButtonTouch}>
    <Icon name={showPlayIcon ? 'play' : 'pause'} size={30} color="#FFF" />
  </TouchableWithoutFeedback>
  <Text style={styles.controls.position}>
    {digitalTime(Math.floor(this.state.position))}
  </Text>
  {this._renderSeekbar()}
  <Text style={styles.controls.duration}>
    {digitalTime(Math.floor(this.state.duration))}
  </Text>
  <TouchableWithoutFeedback onPress={this._toggleFullscreen}>
    <MatIcon
      name={isFullscreen ? 'fullscreen-exit' : 'fullscreen'}
      style={styles.controls.fullscreen}
      size={30}
      color="#FFF"
    />
  </TouchableWithoutFeedback>
</View>

// JS
_renderSeekbar() {
    return (
      <TouchableWithoutFeedback
        onPress={this._onProgressTouch}>
        <View style={styles.seekbar.container}>
          <View
            style={styles.seekbar.track}
            onLayout={event => this._seekbarWidth = event.nativeEvent.layout.width}>
            <View
              style={[styles.seekbar.fill, {width: this.state.seekbarPosition}]}
            />
          </View>
          <View
            style={[styles.seekbar.handle, {left: this.state.seekbarPosition}]}>
            <View
              style={[
                styles.seekbar.circle,
                {backgroundColor: '#FFF'},
              ]}
            />
          </View>
        </View>
      </TouchableWithoutFeedback>
    );
  }

Step 4: Embed the video player in application page

Now to add the player view with custom control in our page, we can import and use it like:

import VdoPlayerControls from './VdoPlayerControls';

const embedInfo = {otp: 'some-otp', playbackInfo: 'some-playbackInfo'};

// in JSX

<VdoPlayerControls style={styles.player} embedInfo={embedInfo} />;

View player in Fullscreen

Now let's create a function _toggleFullscreen to toggle fullscreen. In this function, we will change the orientation, show/hide status bar and also set the height of VdoPlayerControls as 100% on entering the fullscreen mode and reset it back on exit from the fullscreen by using isFullscreen flag.

Here is the sample code to perform fullscreen mode.

In VdoPlayerControls component add following -

import {StyleSheet, Text, View, TouchableWithoutFeedback, StatusBar} from 'react-native';
import  Orientation from 'react-native-orientation';

render() {
  return (
    var isFullscreen = this.state.isFullscreen;
    <View>
      <VdoPlayerView
        ...
      />
      <TouchableWithoutFeedback onPress={this._toggleFullscreen}>
        <MatIcon
          name={isFullscreen ? 'fullscreen-exit' : 'fullscreen'}
          style={styles.controls.fullscreen}
          size={30}
          color="#FFF"
        />
      </TouchableWithoutFeedback>
    </View>
  );
}

_toggleFullscreen = () => {
  if (this.state.isFullscreen) {
    //Only for Android
    Orientation.lockToPortrait();
    //Only for Android
    StatusBar.setHidden(false);

    this.props.onExitFullscreen?.();
  } else {
    //Only for Android
    Orientation.lockToLandscape();
    //Only for Android
    StatusBar.setHidden(true);

    this.props.onEnterFullscreen?.();
  }

  this.setState({
    isFullscreen: !this.state.isFullscreen,
  });
};

In JSControlsScreen show or hide the views based on the prop methods onExitFullscreen & onEnterFullscreen and isFullscreen flag.

// JSX
<VdoPlayerControls
  style={isFullscreen ? styles.playerFullscreen : styles.player}
  embedInfo={embedInfo}
  showNativeControls={false}
  onEnterFullscreen={this._onEnterFullscreen}
  onExitFullscreen={this._onExitFullscreen}
/>;
{
  !isFullscreen && (
    <Text>
      The ui controls for the player are embedded inside the native view
    </Text>
  );
}

_onEnterFullscreen = () => {
  this.setState({isFullscreen: true});
};

_onExitFullscreen = () => {
  this.setState({isFullscreen: false});
};

const styles = StyleSheet.create({
  player: {
    height: 200,
    width: '100%',
  },
  playerFullscreen: {
    height: '100%',
    width: '100%',
  },
});

Note: Till react-native-orientation:3+ we need to make changes in build.gradle dependency to make the Android build. Open node_modules/react-native-orientation/android/build.gradle replace compile "com.facebook.react:react-native:+" with implementation "com.facebook.react:react-native:+"