react-native-video-enhanced/ProgressBar.js

enhanced version of react-native-video to support more interactive video controls on Android and iOS

import React from "react";
import Slider from "@react-native-community/slider";
import { View, Text, StyleSheet } from "react-native";
export const ProgressBar = ({
  currentTime,
  duration,
  onSlideCapture,
  onSlideStart,
  onSlideComplete
}) => {
  function getMinutesFromSeconds(time) {
    const minutes = time >= 60 ? Math.floor(time / 60) : 0;
    const seconds = Math.floor(time - minutes * 60);

    return `${minutes >= 10 ? minutes : "0" + minutes}:${
      seconds >= 10 ? seconds : "0" + seconds
    }`;
  }

  function handleOnSlide(time) {
    onSlideCapture({ seekTime: parseInt(time) });
  }

  const position = getMinutesFromSeconds(currentTime);
  const fullDuration = getMinutesFromSeconds(duration);
  return (
    <View style={styles.wrapper}>
      <Slider
        value={currentTime}
        minimumValue={0}
        maximumValue={duration}
        step={1}
        onValueChange={handleOnSlide}
        onSlidingStart={onSlideStart}
        onSlidingComplete={onSlideComplete}
        minimumTrackTintColor={"#F44336"}
        maximumTrackTintColor={"#FFFFFF"}
        thumbTintColor={"#F44336"}
      />
      {/* <View style={styles.timeWrapper}>
        <Text style={styles.timeLeft}>{position}</Text>
        <Text style={styles.timeRight}>{fullDuration}</Text>
      </View>  */}
    </View>
  );
};
const styles = StyleSheet.create({
  wrapper: {
    width: '100%'
  },
  timeWrapper: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingHorizontal: 5
  },
  timeLeft: {
    flex: 1,
    fontSize: 16,
    color: "#FFFFFF",
    paddingLeft: 10
  },
  timeRight: {
    flex: 1,
    fontSize: 16,
    color: "#FFFFFF",
    textAlign: "right",
    paddingRight: 10
  }
});