VideoPlayer.js

import React, { Component } from 'react';
import Video from 'react-native-video';
import {
  TouchableWithoutFeedback,
  TouchableHighlight,
  ImageBackground,
  PanResponder,
  Dimensions,
  StyleSheet,
  Animated,
  Easing,
  Image,
  View,
  Text,
  Platform,
} from 'react-native';
import _ from 'lodash';

const { height, width } = Dimensions.get('window');
const aspect_ration = width / height;

export default class VideoPlayer extends Component {

  static defaultProps = {
    toggleResizeModeOnFullscreen:   true,
    playInBackground:               false,
    playWhenInactive:               false,
    showOnStart:                    true,
    resizeMode:                     'contain',
    paused:                         false,
    repeat:                         false,
    volume:                         1,
    muted:                          false,
    title:                          '',
    rate:                           1,
    showFullScreenButton:           true,
    videoPattern:                     1,
  };

  constructor( props ) {
    super( props );

    /**
     * All of our values that are updated by the
     * methods and listeners in this class
     */
    this.state = {
      // Video
      resizeMode: this.props.resizeMode,
      paused: this.props.paused,
      muted: this.props.muted,
      volume: this.props.volume,
      rate: this.props.rate,
      // Controls

      isFullscreen: this.props.resizeMode === 'cover' || false,
      showTimeRemaining: true,
      volumeTrackWidth: 0,
      lastScreenPress: 0,
      volumeFillWidth: 0,
      seekerFillWidth: 0,
      showControls: this.props.showOnStart,
      volumePosition: 0,
      seekerPosition: 0,
      volumeOffset: 0,
      seekerOffset: 0,
      seeking: false,
      loading: false,
      currentTime: 0,
      error: false,
      duration: 0,
      bottomContainStyle:{},
      videoLayoutWidth:0,
      videoLayoutHeight:0,
      maskTop:0,
    };

    /**
     * Any options that can be set at init.
     */
    this.opts = {
      playWhenInactive: this.props.playWhenInactive,
      playInBackground: this.props.playInBackground,
      repeat: this.props.repeat,
      title: this.props.title,
    };

    /**
     * Our app listeners and associated methods
     */
    this.events = {
      onError: this.props.onError || this._onError.bind( this ),
      onBack: this.props.onBack || this._onBack.bind( this ),
      onEnd: this._onEnd.bind( this ),
      onScreenTouch: this._onScreenTouch.bind( this ),
      onEnterFullscreen: this.props.onEnterFullscreen,
      onExitFullscreen: this.props.onExitFullscreen,
      onLoadStart: this._onLoadStart.bind( this ),
      onProgress: this._onProgress.bind( this ),
      onLoad: this._onLoad.bind( this ),
      onPause: this.props.onPause,
      onPlay: this.props.onPlay,
    };

    /**
     * Functions used throughout the application
     */
    this.methods = {
      toggleFullscreen: this._toggleFullscreen.bind( this ),
      togglePlayPause: this._togglePlayPause.bind( this ),
      toggleControls: this._toggleControls.bind( this ),
      toggleTimer: this._toggleTimer.bind( this ),
    };

    /**
     * Player information
     */
    this.player = {
      controlTimeoutDelay: this.props.controlTimeout || 15000,
      volumePanResponder: PanResponder,
      seekPanResponder: PanResponder,
      controlTimeout: null,
      volumeWidth: 150,
      iconOffset: 7,
      seekWidth: 0,
      ref: Video,
    };

    /**
     * Various animations
     */
    const initialValue = this.props.showOnStart ? 1 : 0;

    this.animations = {
      bottomControl: {
        marginBottom: new Animated.Value( 0 ),
        opacity: new Animated.Value( initialValue ),
      },
      topControl: {
        marginTop: new Animated.Value( 0 ),
        opacity: new Animated.Value( initialValue ),
      },
      video: {
        opacity: new Animated.Value( 1 ),
      },
      loader: {
        rotate: new Animated.Value( 0 ),
        MAX_VALUE: 360,
      }
    };

    /**
     * Various styles that be added...
     */
    this.styles = {
      videoStyle: this.props.videoStyle || {},
      containerStyle: this.props.style || {}
    };
  }



  /**
   | -------------------------------------------------------
   | Events
   | -------------------------------------------------------
   |
   | These are the events that the <Video> component uses
   | and can be overridden by assigning it as a prop.
   | It is suggested that you override onEnd.
   |
   */

  /**
   * When load starts we display a loading icon
   * and show the controls.
   */
  _onLoadStart() {
    let state = this.state;
    state.loading = true;
    this.loadAnimation();
    this.setState( state );

    if ( typeof this.props.onLoadStart === 'function' ) {
      this.props.onLoadStart(...arguments);
    }
  }

  /**
   * When load is finished we hide the load icon
   * and hide the controls. We also set the
   * video duration.
   *
   * @param {object} data The video meta data
   */
  _onLoad( data = {} ) {
    let state = this.state;
    state.duration = data.duration;
    state.loading = false;
    this.setState( state );

    if ( state.showControls ) {
      this.setControlTimeout();
    }
    this.setState({paused:false}, () => {
      this.setState({
        paused:this.props.paused,
      });
    });

    if ( typeof this.props.onLoad === 'function' ) {
      this.props.onLoad(...arguments);
    }
  }

  /**
   * For onprogress we fire listeners that
   * update our seekbar and timer.
   *
   * @param {object} data The video meta data
   */
  _onProgress( data = {} ) {
    let state = this.state;
    state.currentTime = data.currentTime;
    if ( ! state.seeking ) {
      const position = this.calculateSeekerPosition();
      this.setSeekerPosition( position );
    }

    if ( typeof this.props.onProgress === 'function' ) {
      this.props.onProgress(...arguments);
    }

    this.setState( state );
  }

  /**
   * It is suggested that you override this
   * command so your app knows what to do.
   * Either close the video or go to a
   * new page.
   */
  _onEnd() {
    let state = this.state;
    state.paused = true;
    this.setState( state );
    this.props.onEnd && this.props.onEnd();
  }

  /**
   * Set the error state to true which then
   * changes our renderError function
   *
   * @param {object} err  Err obj returned from <Video> component
   */
  _onError( err ) {
    console.log('err', err.error);
    let state = this.state;
    state.error = true;
    state.loading = false;

    this.setState( state );
  }

  /**
   * This is a single and double tap listener
   * when the user taps the screen anywhere.
   * One tap toggles controls, two toggles
   * fullscreen mode.
   */
  _onScreenTouch() {
    let state = this.state;
    const time = new Date().getTime();
    const delta =  time - state.lastScreenPress;

    if ( delta < 300 ) {
      this.methods.toggleFullscreen();
    }

    this.methods.toggleControls();
    state.lastScreenPress = time;

    this.setState( state );
  }



  /**
   | -------------------------------------------------------
   | Methods
   | -------------------------------------------------------
   |
   | These are all of our functions that interact with
   | various parts of the class. Anything from
   | calculating time remaining in a video
   | to handling control operations.
   |
   */

  /**
   * Set a timeout when the controls are shown
   * that hides them after a length of time.
   * Default is 15s
   */
  setControlTimeout() {
    this.player.controlTimeout = setTimeout( ()=> {
      this._hideControls();
    }, this.player.controlTimeoutDelay );
  }

  /**
   * Clear the hide controls timeout.
   */
  clearControlTimeout() {
    clearTimeout( this.player.controlTimeout );
  }

  /**
   * Reset the timer completely
   */
  resetControlTimeout() {
    this.clearControlTimeout();
    this.setControlTimeout();
  }

  /**
   * Animation to hide controls. We fade the
   * display to 0 then move them off the
   * screen so they're not interactable
   */
  hideControlAnimation() {
    Animated.parallel([
      Animated.timing(
        this.animations.topControl.opacity,
        { toValue: 0 }
      ),
      Animated.timing(
        this.animations.topControl.marginTop,
        { toValue: -100 }
      ),
      Animated.timing(
        this.animations.bottomControl.opacity,
        { toValue: 0 }
      ),
      Animated.timing(
        this.animations.bottomControl.marginBottom,
        { toValue: -100 }
      ),
    ]).start();
  }

  /**
   * Animation to show controls...opposite of
   * above...move onto the screen and then
   * fade in.
   */
  showControlAnimation() {
    Animated.parallel([
      Animated.timing(
        this.animations.topControl.opacity,
        { toValue: 1 }
      ),
      Animated.timing(
        this.animations.topControl.marginTop,
        { toValue: 0 }
      ),
      Animated.timing(
        this.animations.bottomControl.opacity,
        { toValue: 1 }
      ),
      Animated.timing(
        this.animations.bottomControl.marginBottom,
        { toValue: 0 }
      ),
    ]).start();
  }

  /**
   * Loop animation to spin loader icon. If not loading then stop loop.
   */
  loadAnimation() {
    if ( this.state.loading ) {
      Animated.sequence([
        Animated.timing(
          this.animations.loader.rotate,
          {
            toValue: this.animations.loader.MAX_VALUE,
            duration: 1500,
            easing: Easing.linear,
          }
        ),
        Animated.timing(
          this.animations.loader.rotate,
          {
            toValue: 0,
            duration: 0,
            easing: Easing.linear,
          }
        ),
      ]).start( this.loadAnimation.bind( this ) );
    }
  }

  /**
   * Function to hide the controls. Sets our
   * state then calls the animation.
   */
  _hideControls() {
    if(this.mounted) {
      let state = this.state;
      state.showControls = false;
      this.hideControlAnimation();

      this.setState( state );
    }
  }

  /**
   * Function to toggle controls based on
   * current state.
   */
  _toggleControls() {
    let state = this.state;

    if ( !state.showControls ) {
      this.showControlAnimation();
      this.setControlTimeout();
      state.showControls = !state.showControls;
    }
    else {
      this.clearControlTimeout();
      this.setControlTimeout();
      this._togglePlayPause();
    }

    this.setState( state );
  }

  /**
   * Toggle fullscreen changes resizeMode on
   * the <Video> component then updates the
   * isFullscreen state.
   */
  _toggleFullscreen() {
    let state = this.state;

    state.isFullscreen = ! state.isFullscreen;

    if (this.props.toggleResizeModeOnFullscreen) {
      state.resizeMode = state.isFullscreen === true ? 'cover' : 'contain';
    }

    if (state.isFullscreen) {
      typeof this.events.onEnterFullscreen === 'function' && this.events.onEnterFullscreen();
    }
    else {
      typeof this.events.onExitFullscreen === 'function' && this.events.onExitFullscreen();
    }

    this.setState( state );
  }

  /**
   * Toggle playing state on <Video> component
   */
  _togglePlayPause() {
    let state = this.state;
    state.paused = !state.paused;

    if (state.paused) {
      typeof this.events.onPause === 'function' && this.events.onPause();
    }
    else {
      typeof this.events.onPlay === 'function' && this.events.onPlay();
    }

    this.setState( state );
  }

  /**
   * Toggle between showing time remaining or
   * video duration in the timer control
   */
  _toggleTimer() {
    let state = this.state;
    state.showTimeRemaining = ! state.showTimeRemaining;
    this.setState( state );
  }

  /**
   * The default 'onBack' function pops the navigator
   * and as such the video player requires a
   * navigator prop by default.
   */
  _onBack() {
    if ( this.props.navigator && this.props.navigator.pop ) {
      this.props.navigator.pop();
    }
    else {
      console.warn( 'Warning: _onBack requires navigator property to function. Either modify the onBack prop or pass a navigator prop' );
    }
  }

  /**
   * Calculate the time to show in the timer area
   * based on if they want to see time remaining
   * or duration. Formatted to look as 00:00.
   */
  calculateTime() {
    const time = this.state.duration - this.state.currentTime;
    return `${ this.formatTime( time ) }`;
  }

  getCurrentTimeText = () => {
    return this.formatTime(this.state.currentTime);
  }

  /**
   * Format a time string as mm:ss
   *
   * @param {int} time time in milliseconds
   * @return {string} formatted time string in mm:ss format
   */
  formatTime( time = 0 ) {
    const symbol = this.state.showRemainingTime ? '-' : '';
    time = Math.min(
      Math.max( time, 0 ),
      this.state.duration
    );

    const formattedMinutes = _.padStart( Math.floor( time / 60 ).toFixed( 0 ), 2, 0 );
    const formattedSeconds = _.padStart( Math.floor( time % 60 ).toFixed( 0 ), 2 , 0 );

    return `${ symbol }${ formattedMinutes }:${ formattedSeconds }`;
  }

  /**
   * Set the position of the seekbar's components
   * (both fill and handle) according to the
   * position supplied.
   *
   * @param {float} position position in px of seeker handle}
   */
  setSeekerPosition( position = 0 ) {
    let state = this.state;
    position = this.constrainToSeekerMinMax( position );

    state.seekerFillWidth = position;
    state.seekerPosition = position;

    if ( ! state.seeking ) {
      state.seekerOffset = position
    };

    this.setState( state );
  }

  /**
   * Contrain the location of the seeker to the
   * min/max value based on how big the
   * seeker is.
   *
   * @param {float} val position of seeker handle in px
   * @return {float} contrained position of seeker handle in px
   */
  constrainToSeekerMinMax( val = 0 ) {
    if ( val <= 0 ) {
      return 0;
    }
    else if ( val >= this.player.seekerWidth ) {
      return this.player.seekerWidth;
    }
    return val;
  }

  /**
   * Calculate the position that the seeker should be
   * at along its track.
   *
   * @return {float} position of seeker handle in px based on currentTime
   */
  calculateSeekerPosition() {
    const percent = this.state.currentTime / this.state.duration;
    return this.player.seekerWidth * percent;
  }

  /**
   * Return the time that the video should be at
   * based on where the seeker handle is.
   *
   * @return {float} time in ms based on seekerPosition.
   */
  calculateTimeFromSeekerPosition() {
    const percent = this.state.seekerPosition / this.player.seekerWidth;
    return this.state.duration * percent;
  }

  /**
   * Seek to a time in the video.
   *
   * @param {float} time time to seek to in ms
   */
  seekTo( time = 0 ) {
    let state = this.state;
    state.currentTime = time;
    this.player.ref.seek( time );
    this.setState( state );
    if ( ! state.seeking ) {
      if (!this.player.seekerWidth) {
        this.needResetPosition = true
      } else {
        const position = this.calculateSeekerPosition();
        this.setSeekerPosition( position );
      }
    }
  }

  /**
   * Call the video ref seek
   *
   * @param time
   */
  seek = ( time = 0 ) => {
    this.player.ref.seek( time );
  }

  /**
   * Set the position of the volume slider
   *
   * @param {float} position position of the volume handle in px
   */
  setVolumePosition( position = 0 ) {
    let state = this.state;
    position = this.constrainToVolumeMinMax( position );
    state.volumePosition = position + this.player.iconOffset;
    state.volumeFillWidth = position;

    state.volumeTrackWidth = this.player.volumeWidth - state.volumeFillWidth;

    if ( state.volumeFillWidth < 0 ) {
      state.volumeFillWidth = 0;
    }

    if ( state.volumeTrackWidth > 150 ) {
      state.volumeTrackWidth = 150;
    }

    this.setState( state );
  }

  /**
   * Constrain the volume bar to the min/max of
   * its track's width.
   *
   * @param {float} val position of the volume handle in px
   * @return {float} contrained position of the volume handle in px
   */
  constrainToVolumeMinMax( val = 0 ) {
    if ( val <= 0 ) {
      return 0;
    }
    else if ( val >= this.player.volumeWidth + 9 ) {
      return this.player.volumeWidth + 9;
    }
    return val;
  }

  /**
   * Get the volume based on the position of the
   * volume object.
   *
   * @return {float} volume level based on volume handle position
   */
  calculateVolumeFromVolumePosition() {
    return this.state.volumePosition / this.player.volumeWidth;
  }

  /**
   * Get the position of the volume handle based
   * on the volume
   *
   * @return {float} volume handle position in px based on volume
   */
  calculateVolumePositionFromVolume() {
    return this.player.volumeWidth / this.state.volume;
  }



  /**
   | -------------------------------------------------------
   | React Component functions
   | -------------------------------------------------------
   |
   | Here we're initializing our listeners and getting
   | the component ready using the built-in React
   | Component methods
   |
   */

  /**
   * Before mounting, init our seekbar and volume bar
   * pan responders.
   */
  componentWillMount() {
    this.initSeekPanResponder();
    this.initVolumePanResponder();
  }

  /**
   * To allow basic playback management from the outside
   * we have to handle possible props changes to state changes
   */
  componentWillReceiveProps(nextProps) {
    if (this.state.paused !== nextProps.paused ) {
      this.setState({
        paused: nextProps.paused
      })
    }
    if (this.props.is_full_screen != nextProps.is_full_screen && nextProps.paused === true) {
      this.needResetPosition = true;
    }
  }

  /**
   * Upon mounting, calculate the position of the volume
   * bar based on the volume property supplied to it.
   */
  componentDidMount() {
    const position = this.calculateVolumePositionFromVolume();
    let state = this.state;
    this.setVolumePosition( position );
    state.volumeOffset = position;
    this.mounted = true;

    this.setState( state );
  }

  /**
   * When the component is about to unmount kill the
   * timeout less it fire in the prev/next scene
   */
  componentWillUnmount() {
    this.mounted = false;
    this.clearControlTimeout();
  }

  /**
   * Get our seekbar responder going
   */
  initSeekPanResponder() {
    this.player.seekPanResponder = PanResponder.create({

      // Ask to be the responder.
      onStartShouldSetPanResponder: ( evt, gestureState ) => true,
      onMoveShouldSetPanResponder: ( evt, gestureState ) => true,

      /**
       * When we start the pan tell the machine that we're
       * seeking. This stops it from updating the seekbar
       * position in the onProgress listener.
       */
      onPanResponderGrant: ( evt, gestureState ) => {
        this.clearControlTimeout();
        this.setState( {
          seeking:true,
        } );
      },

      /**
       * When panning, update the seekbar position, duh.
       */
      onPanResponderMove: ( evt, gestureState ) => {
        const position = this.state.seekerOffset + gestureState.dx;
        this.cacheSeekerOffset = position;
        this.setSeekerPosition( position );
      },

      /**
       * On release we update the time and seek to it in the video.
       * If you seek to the end of the video we fire the
       * onEnd callback
       */
      onPanResponderRelease: ( evt, gestureState ) => {
        const time = this.calculateTimeFromSeekerPosition();
        let paused = this.state.paused;
        const state = this.state;
        if ( time >= state.duration && ! state.loading ) {
          paused = true;
          this.events.onEnd();
        } else {
          this.seekTo( time );
          this.setControlTimeout();
        }
        setTimeout(() => {
          this.setState({
            paused,
            seekerOffset:this.cacheSeekerOffset,
            seeking:false,
          });
        }, 50);
      }
    });
  }

  /**
   * Initialize the volume pan responder.
   */
  initVolumePanResponder() {
    this.player.volumePanResponder = PanResponder.create({
      onStartShouldSetPanResponder: ( evt, gestureState ) => true,
      onMoveShouldSetPanResponder: ( evt, gestureState ) => true,
      onPanResponderGrant: ( evt, gestureState ) => {
        this.clearControlTimeout();
      },

      /**
       * Update the volume as we change the position.
       * If we go to 0 then turn on the mute prop
       * to avoid that weird static-y sound.
       */
      onPanResponderMove: ( evt, gestureState ) => {
        let state = this.state;
        const position = this.state.volumeOffset + gestureState.dx;

        this.setVolumePosition( position );
        state.volume = this.calculateVolumeFromVolumePosition();

        if ( state.volume <= 0 ) {
          state.muted = true;
        }
        else {
          state.muted = false;
        }

        this.setState( state );
      },

      /**
       * Update the offset...
       */
      onPanResponderRelease: ( evt, gestureState ) => {
        let state = this.state;
        state.volumeOffset = state.volumePosition;
        this.setControlTimeout();
        this.setState( state );
      }
    });
  }


  /**
   | -------------------------------------------------------
   | Rendering
   | -------------------------------------------------------
   |
   | This section contains all of our render methods.
   | In addition to the typical React render func
   | we also have all the render methods for
   | the controls.
   |
   */

  /**
   * Standard render control function that handles
   * everything except the sliders. Adds a
   * consistent <TouchableHighlight>
   * wrapper and styling.
   */
  renderControl( children, callback, style = {} ) {
    return (
      <TouchableHighlight
        underlayColor="transparent"
        activeOpacity={ 0.3 }
        onPress={()=>{
          this.resetControlTimeout();
          callback();
        }}
        style={[
          styles.controls.control,
          style
        ]}
      >
        { children }
      </TouchableHighlight>
    );
  }

  /**
   * Renders an empty control, used to disable a control without breaking the view layout.
   */
  renderNullControl() {
    return (
      <View style={[ styles.controls.control ]} />
    );
  }

  /**
   * Groups the top bar controls together in an animated
   * view and spaces them out.
   */
  renderTopControls() {

    const backControl = this.props.disableBack ? this.renderNullControl() : this.renderBack();

    return(
      <Animated.View style={[
        styles.controls.top,
        {
          opacity: this.animations.topControl.opacity,
          marginTop: this.animations.topControl.marginTop,
        }
      ]}>
        <ImageBackground
          source={ require( './assets/img/top-vignette.png' ) }
          style={[ styles.controls.column ]}
          imageStyle={[ styles.controls.vignette ]}>
          <View style={ styles.controls.topControlGroup }>
            { backControl }
          </View>
        </ImageBackground>
      </Animated.View>
    );
  }


  /**
   * Back button control
   */
  renderBack() {

    let backButton = <Image source={ require( './assets/img/back.png' ) } style={ styles.controls.back }/>;

    if (this.props.backButton) {
      return this.props.backButton;
    }

    return this.renderControl(
      backButton,
      this.events.onBack,
      {
        width:80,
        height:80,
        backgroundColor:'transparent',
        top:-12,
        paddingTop:12,
        left:-15,
        paddingLeft:15,
      },
    );
  }

  /**
   * Render bottom control group and wrap it in a holder
   */
  renderBottomControls() {

    const seekbarControl = this.props.disableSeekbar ? this.renderNullControl() : this.renderSeekbar();
    const playPauseControl = this.props.disablePlayPause ? this.renderNullControl() : this.renderPlayPause();

    return this.props.videoPattern === 1 ? (
      <Animated.View style={[
        styles.controls.bottom,
        {
          opacity: this.animations.bottomControl.opacity,
          marginBottom: this.animations.bottomControl.marginBottom,
        },
        this.props.bottomContainStyle,
      ]}>
        <ImageBackground
          source={require('./assets/player_shadow.png')}
          imageStyle={[styles.controls.vignette]}
          style={[
            styles.controls.column,
            { paddingBottom: 5, paddingLeft:10, paddingRight:10 },
          ]}
        >
          <View
            style={{flexDirection:'row', paddingRight:25}}
          >
            { playPauseControl }
            { seekbarControl }
            { this.renderCurrentTiemText() }
            {/*{ this.renderRestTimeText() }*/}
            { this.props.showFullScreenButton && this.renderFullScreenButton() }
          </View>
        </ImageBackground>
      </Animated.View>
    ) : (
      <Animated.View style={[
        styles.controls.bottom,
        {
          paddingLeft:10,
          paddingRight:0,
        },
        this.props.bottomContainStyle,
      ]}>
        <View
          style={{flexDirection:'row', paddingRight:0}}
        >
          { playPauseControl }
          { seekbarControl }
          { this.renderCurrentTiemText() }
          {/*{ this.renderRestTimeText() }*/}
          { this.props.showFullScreenButton && this.renderFullScreenButton() }
        </View>
      </Animated.View>
    );
  }

  renderCurrentTiemText = () => {
    return (
      <Text
        style={{
          top:3,
          width:85,
          marginLeft:12,
          marginRight:this.props.videoPattern === 2 ? 12 : 0,
          backgroundColor: 'transparent',
          fontSize:14,
          color:'#FFFFFF',
        }}
        allowFontScaling={false}
      >
        {this.getCurrentTimeText()}/{this.formatTime(this.state.duration)}
      </Text>
    );
  }

  renderRestTimeText = () => {
    return (<Text
      style={{
        top:10,
        width:35,
        backgroundColor: 'transparent',
        alignItems:'center',
        fontSize:14,
        color:'#FFFFFF',
      }}
      allowFontScaling={false}
    >
      {this.calculateTime()}
    </Text>)
  }

  renderFullScreenButton = () => {
    let label = this.props.is_full_screen ? require('./assets/quit_full.png') : require('./assets/go_full.png');
    return <TouchableHighlight
      underlayColor="transparent"
      activeOpacity={ 0.3 }
      onPress={this.props.onPressFullScreenBtn}
      style={{
        width:50,
        height:60,
        top:-10,
        paddingTop:10,
        right:-10,
        paddingRight:10,
        backgroundColor:'transparent',
        position:'absolute',
        alignItems:'flex-end',
      }}
    >
      { <Image style={{width:20,height:20, top:2}} source={label}/> }
    </TouchableHighlight>
  }

  on_press_seek_bar = (event) => {
    this.resetControlTimeout();
    const percent = event.nativeEvent.locationX / this.player.seekerWidth;
    const time = this.state.duration * percent;
    this.seekTo( time );
    this.setSeekerPosition(event.nativeEvent.locationX);
  }

  /**
   * Render the seekbar and attach its handlers
   */
  renderSeekbar() {

    return (
      <TouchableWithoutFeedback onPress={this.on_press_seek_bar}>
        <View style={ [styles.seekbar.container, {height:35,}] }>
          <View
            style={[styles.seekbar.track, {
              shadowColor:'rgba(0,0,0,0.60)',
              shadowRadius:8,
              shadowOpacity:0.9,
            }]}
            onLayout={ event => {
              this.player.seekerWidth = event.nativeEvent.layout.width
              if (this.needResetPosition) {
                const position = this.calculateSeekerPosition();
                this.setSeekerPosition( position );
                this.needResetPosition = false;
              }
            } }
          >
            <View style={[
              styles.seekbar.fill,
              {
                width: this.state.seekerFillWidth,
                backgroundColor: this.props.seekColor || '#FFFFFF',
                borderRadius:12.5,
              }
            ]}/>
          </View>
          <View
            style={[
              styles.seekbar.handle,
              { left: this.state.seekerPosition }
            ]}
            { ...this.player.seekPanResponder.panHandlers }
          >
          </View>
        </View>
      </TouchableWithoutFeedback>
    );
  }

  /**
   * Render the play/pause button and show the respective icon
   */
  renderPlayPause() {

    let source = this.state.paused === true ? require( './assets/play.png' ) : require( './assets/stop.png' );
    return this.renderControl(
      <Image style={{width:24,height:24, marginRight:10, }} source={ source } />,
      this.methods.togglePlayPause
    );
  }

  /**
   * Show our timer.
   */
  renderTimer() {

    return this.renderControl(
      <Text style={ styles.controls.timerText }>
        { this.calculateTime() }
      </Text>,
      this.methods.toggleTimer,
      styles.controls.timer
    );
  }

  /**
   * Show loading icon
   */
  renderLoader() {
    if ( this.state.loading ) {
      return (
        <View style={ styles.loader.container }>
          <Animated.Image source={ require( './assets/img/loader-icon.png' ) } style={[
            styles.loader.icon,
            { transform: [
                { rotate: this.animations.loader.rotate.interpolate({
                    inputRange: [ 0, 360 ],
                    outputRange: [ '0deg', '360deg' ]
                  })}
              ]}
          ]} />
        </View>
      );
    }
    return null;
  }

  renderError() {
    if ( this.state.error ) {
      if (this.props.errorComponent) {
        return this.props.errorComponent;
      }
      return (
        <View style={ styles.error.container }>
          <Image source={ require( './assets/img/error-icon.png' ) } style={ styles.error.icon } />
          <Text style={ styles.error.text }>
            Video unavailable
          </Text>
        </View>
      );
    }
    return null;
  }

  /**
   * Provide all of our options and render the whole component.
   */
  render() {
    return (
      <TouchableWithoutFeedback
        onPress={ this.events.onScreenTouch }
        style={[ styles.player.container, this.styles.containerStyle ]}
      >
        <View style={[ styles.player.container, this.styles.containerStyle ]}>
          {aspect_ration < 1.5 && this.props.videoPattern === 2 && <View style={[{flex:1, width:'100%', height:'100%'}, this.props.bottomContainStyle]}/>}
          <Video
            { ...this.props }
            ref={ videoPlayer => this.player.ref = videoPlayer }

            resizeMode={ this.state.resizeMode }
            volume={ this.state.volume }
            paused={ this.state.paused }
            muted={ this.state.muted }
            rate={ this.state.rate }

            onLoadStart={ this.events.onLoadStart }
            onProgress={ this.events.onProgress }
            onError={ this.events.onError }
            onLoad={ this.events.onLoad }
            onEnd={ this.events.onEnd }

            style={[ this.props.videoPattern === 1 && styles.player.video, this.styles.videoStyle ]}

            source={ this.props.source }
            onLayout={(ev) => {
              if (ev.nativeEvent.layout.width > 0) {
                this.setState({
                  videoLayoutWidth:ev.nativeEvent.layout.width,
                  videoLayoutHeight:ev.nativeEvent.layout.height,
                });
              };
              if (this.props.videoPattern === 2 && aspect_ration < 1.5 && ev.nativeEvent.layout.y > 0) {
                this.setState({
                  maskTop:ev.nativeEvent.layout.y,
                });
              }
            }}
          />
          { this.renderError() }
          { this.props.videoPattern === 1 && this.props.is_full_screen && this.renderTopControls() }
          { this.renderLoader() }
          { this.renderBottomControls() }
          {
            this.state.paused && this.render_play_mask()
          }
        </View>
      </TouchableWithoutFeedback>
    );
  }

  render_play_mask = () => {
    if (this.state.videoLayoutWidth === 0) {
      return;
    }
    return (
      <TouchableWithoutFeedback onPress={this.methods.togglePlayPause}>
        <View style={[{
          backgroundColor:'rgba(7,21,37,0.8)',
          position:'absolute',
          justifyContent:'center',
          alignItems:'center',
          width:this.state.videoLayoutWidth,
          height:this.state.videoLayoutHeight,
          top:this.state.maskTop,
        }]}>
          <Image style={{width:32, height:32, backgroundColor:'transparent'}} source={require('./assets/icn_play.png')}/>
        </View>
      </TouchableWithoutFeedback>
    );
  }
}

const barWidth = 5;

/**
 * This object houses our styles. There's player
 * specific styles and control specific ones.
 * And then there's volume/seeker styles.
 */
const styles = {
  player: StyleSheet.create({
    container: {
      backgroundColor: '#000',
      flex: 1,
      alignSelf: 'stretch',
      justifyContent: 'space-between',
    },
    video: {
      overflow: 'hidden',
      position: 'absolute',
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
    },
  }),
  error: StyleSheet.create({
    container: {
      backgroundColor: 'rgba( 0, 0, 0, 0.5 )',
      position: 'absolute',
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
      justifyContent: 'center',
      alignItems: 'center',
    },
    icon: {
      marginBottom: 16,
    },
    text: {
      backgroundColor: 'transparent',
      color: '#f27474'
    },
  }),
  loader: StyleSheet.create({
    container: {
      position: 'absolute',
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
      alignItems: 'center',
      justifyContent: 'center',
    },
  }),
  controls: StyleSheet.create({
    row: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      height: null,
      width: null,
    },
    column: {
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'space-between',
      height: null,
      width: null,
    },
    vignette: {
      resizeMode: 'stretch'
    },
    control: {
    },
    time:{
      fontSize:14,
      color:'#FFFFFF'
    },
    text: {
      backgroundColor: 'transparent',
      color: '#FFF',
      fontSize: 14,
      textAlign: 'center',
    },
    pullRight: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
    },
    top: {
      flex: 1,
      alignItems: 'stretch',
      justifyContent: 'flex-start',
    },
    bottom: {
      alignItems: 'stretch',
      flex: 2,
      justifyContent: 'flex-end',
    },
    topControlGroup: {
      alignSelf: 'stretch',
      alignItems: 'center',
      justifyContent: 'space-between',
      flexDirection: 'row',
      width: null,
      margin: 12,
      marginBottom: 18,
    },
    bottomControlGroup: {
      alignSelf: 'stretch',
      alignItems: 'center',
      justifyContent: 'space-between',
      marginLeft: 12,
      marginRight: 12,
      marginBottom: 0,
    },
    volume: {
      flexDirection: 'row',
    },
    fullscreen: {
      flexDirection: 'row',
    },
    playPause: {
      justifyContent:'center',
      alignItems:'center',
    },
    title: {
      alignItems: 'center',
      flex: 0.6,
      flexDirection: 'column',
      padding: 0,
    },
    titleText: {
      textAlign: 'center',
    },
    timer: {
      justifyContent:'center',
      alignItems:'center',
      width: 80,
      backgroundColor:'green',
    },
    timerText: {
      backgroundColor: 'transparent',
      color: '#FFF',
      fontSize: 11,
      textAlign: 'right',
    },
  }),
  volume: StyleSheet.create({
    container: {
      alignItems: 'center',
      justifyContent: 'flex-start',
      flexDirection: 'row',
      height: 1,
      marginLeft: 20,
      marginRight: 20,
      width: 150,
    },
    track: {
      backgroundColor: '#333',
      height: 1,
      marginLeft: 7,
    },
    fill: {
      backgroundColor: '#FFF',
      height: 1,
    },
    handle: {
      position: 'absolute',
      marginTop: -24,
      marginLeft: -24,
      padding: 16,
    }
  }),
  seekbar: StyleSheet.create({
    container: {
      flex:5,
      alignSelf: 'stretch',
    },
    track: {
      backgroundColor: 'rgba(255,255,255,0.2)',
      borderRadius:12.5,
      height: barWidth,
      position: 'relative',
      top: 10,
      width: '100%',
    },
    fill: {
      backgroundColor: '#FFF',
      height: barWidth,
      width: '80%'
    },
    handle: {
      position: 'absolute',
      marginLeft: -7,
      backgroundColor:'transparent',
      height: 50,
      width: 15,
    },
    circle: {
      borderRadius: 20,
      position: 'relative',
      top: 8,
      left: 5,
      height: 20,
      width: 20,
    },
  })
};