react-native-video-basic-controls/lib/module/Slider.js

Controls for the React Native <Video> component at react-native-video.

import React from 'react';
import { TouchableOpacity, View, Text, Image } from 'react-native';
import styles from './MediaControls.style';
import { humanizeVideoDuration } from './utils';
import { PLAYER_STATES } from './constants/playerStates';
import SliderOP from './SliderOP';

const fullScreenImage = require('./assets/ic_fullscreen.png');

const Slider = props => {
  const {
    fullScreenIconL,
    fullScreenIconP,
    customSliderStyle,
    duration,
    bufferValue,
    mainColor,
    bufferColor,
    onFullScreen,
    isFullscreen,
    onPause,
    progress
  } = props;
  const fullScreenIcon = isFullscreen ? fullScreenIconL : fullScreenIconP;
  const containerStyle = (customSliderStyle === null || customSliderStyle === void 0 ? void 0 : customSliderStyle.containerStyle) || {};
  const customTrackStyle = (customSliderStyle === null || customSliderStyle === void 0 ? void 0 : customSliderStyle.trackStyle) || {};
  const customThumbStyle = (customSliderStyle === null || customSliderStyle === void 0 ? void 0 : customSliderStyle.thumbStyle) || {};

  const dragging = value => {
    const {
      onSeeking = () => {},
      playerState
    } = props;
    onSeeking(value);

    if (playerState === PLAYER_STATES.PAUSED) {
      return;
    }

    onPause();
  };

  const seekVideo = value => {
    props.onSeek(value);
    onPause();
  };

  return /*#__PURE__*/React.createElement(View, {
    style: [styles.controlsRow, styles.progressContainer, containerStyle]
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.progressColumnContainer
  }, /*#__PURE__*/React.createElement(View, {
    style: [styles.timerLabelsContainer]
  }, /*#__PURE__*/React.createElement(Text, {
    style: styles.timerLabel
  }, humanizeVideoDuration(progress)), /*#__PURE__*/React.createElement(Text, {
    style: styles.timerLabel
  }, humanizeVideoDuration(duration))), /*#__PURE__*/React.createElement(SliderOP, {
    style: [styles.progressSlider],
    onValueChange: dragging,
    onSlidingComplete: seekVideo,
    maximumValue: Math.floor(duration),
    value: Math.floor(progress),
    trackStyle: [styles.track, customTrackStyle],
    thumbStyle: [styles.thumb, customThumbStyle, {
      backgroundColor: mainColor
    }],
    minimumTrackTintColor: mainColor,
    bufferTrackTintColor: bufferColor,
    bufferValue: bufferValue
  })), /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: styles.fullScreenContainer,
    onPress: onFullScreen
  }, fullScreenIcon ? fullScreenIcon : /*#__PURE__*/React.createElement(Image, {
    source: fullScreenImage
  })));
};

export { Slider };
//# sourceMappingURL=Slider.js.map