@zezosoft/zezo-ott-react-native-video-player/lib/module/VideoPlayer/components/ProgressBar.js

React Native OTT Video Player for Android & iOS. Supports playlists, seasons, auto-next playback, subtitles, theming, analytics, fullscreen mode, and custom controls. 🚀 Powered by ZezoSoft.

"use strict";

/* eslint-disable react-hooks/exhaustive-deps */
import React, { useEffect } from 'react';
import { View, StyleSheet } from 'react-native';
import { Slider } from 'react-native-awesome-slider';
import { useSharedValue, withTiming } from 'react-native-reanimated';
import { verticalScale } from 'react-native-size-matters';
import { useVideoPlayerConfig } from "../context/index.js";
import { jsx as _jsx } from "react/jsx-runtime";
const ProgressBar = /*#__PURE__*/React.memo(({
  duration,
  currentTime,
  bufferedTime,
  onSeek,
  showThumb = true
}) => {
  const {
    colors,
    metrics
  } = useVideoPlayerConfig();
  const progress = useSharedValue(currentTime);
  const cache = useSharedValue(bufferedTime);
  const min = useSharedValue(0);
  const max = useSharedValue(duration);

  // Smoothly animate progress
  useEffect(() => {
    progress.value = withTiming(currentTime, {
      duration: 200
    });
  }, [currentTime]);
  useEffect(() => {
    cache.value = withTiming(bufferedTime, {
      duration: 200
    });
  }, [bufferedTime]);
  useEffect(() => {
    max.value = duration;
  }, [duration]);
  return /*#__PURE__*/_jsx(View, {
    style: styles.container,
    children: /*#__PURE__*/_jsx(Slider, {
      progress: progress,
      minimumValue: min,
      maximumValue: max,
      cache: cache,
      onValueChange: onSeek,
      containerStyle: [styles.sliderContainer, {
        borderRadius: metrics.sliderHeight / 2,
        height: metrics.sliderHeight
      }],
      renderThumb: showThumb ? () => /*#__PURE__*/_jsx(View, {
        style: {
          backgroundColor: colors.primary,
          width: metrics.thumbSize,
          height: metrics.thumbSize,
          borderRadius: metrics.thumbSize / 2
        }
      }) : () => null,
      renderBubble: () => null,
      thumbWidth: metrics.thumbSize,
      theme: {
        minimumTrackTintColor: colors.primary,
        bubbleBackgroundColor: colors.white,
        maximumTrackTintColor: colors.secondary,
        cacheTrackTintColor: colors.buffer
      }
    })
  });
}, (prevProps, nextProps) => prevProps.currentTime === nextProps.currentTime && prevProps.bufferedTime === nextProps.bufferedTime && prevProps.duration === nextProps.duration);
export default ProgressBar;
const styles = StyleSheet.create({
  container: {
    position: 'relative',
    width: '100%',
    height: verticalScale(20),
    justifyContent: 'center'
  },
  sliderContainer: {
    overflow: 'hidden'
  }
});
//# sourceMappingURL=ProgressBar.js.map