react-native-video-player/lib/module/controls/Seekbar.js

A <VideoPlayer /> component for React Native with controls

"use strict";

import { StyleSheet, View } from 'react-native';
import { forwardRef, memo, useCallback, useImperativeHandle, useRef, useState } from 'react';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const parsePadding = (value, layoutWidth) => {
  if (typeof value === 'number') return value;
  if (typeof value === 'string' && value.endsWith('%')) {
    return parseFloat(value) / 100 * layoutWidth;
  }
  return 0;
};
export const Seekbar = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
  fullWidth,
  autoplay,
  isPlaying,
  setIsPlaying,
  disableSeek,
  showControls,
  controlsTimeoutId,
  onSeek,
  onSeeking,
  duration,
  seekBarCustomStyles,
  seekBarFullWidthCustomStyles,
  seekBarKnobCustomStyles,
  seekBarKnobSeekingCustomStyles,
  seekBarProgressCustomStyles,
  seekBarBackgroundCustomStyles
}, ref) => {
  const [progress, setProgress] = useState(0);
  const [isSeeking, setIsSeeking] = useState(false);
  useImperativeHandle(ref, () => ({
    onProgress: setProgress
  }));
  const seekBarWidth = useRef(200);
  const seekTouchStart = useRef(0);
  const seekProgressStart = useRef(0);
  const wasPlayingBeforeSeek = useRef(autoplay || isPlaying);
  const _onSeekBarLayout = useCallback(({
    nativeEvent
  }) => {
    const layoutWidth = nativeEvent.layout.width;
    const customStyle = seekBarCustomStyles;
    const paddingHorizontal = customStyle?.paddingHorizontal ? parsePadding(customStyle.paddingHorizontal, layoutWidth) * 2 : 0;
    const paddingLeft = customStyle?.paddingLeft ? parsePadding(customStyle.paddingLeft, layoutWidth) : 0;
    const paddingRight = customStyle?.paddingRight ? parsePadding(customStyle.paddingRight, layoutWidth) : 0;
    const totalPadding = paddingHorizontal || paddingLeft + paddingRight;
    seekBarWidth.current = layoutWidth - totalPadding;
  }, [seekBarCustomStyles]);
  const _onSeekGrant = useCallback(e => {
    seekTouchStart.current = e.nativeEvent.pageX;
    seekProgressStart.current = progress ?? 0;
    wasPlayingBeforeSeek.current = isPlaying;
    setIsSeeking(true);
    setIsPlaying(false);
    if (controlsTimeoutId) clearTimeout(controlsTimeoutId);
  }, [controlsTimeoutId, isPlaying, progress, setIsPlaying]);
  const _onSeekRelease = useCallback(() => {
    setIsSeeking(false);
    setIsPlaying(wasPlayingBeforeSeek.current);
    onSeek(progress * duration);
    showControls();
  }, [duration, onSeek, progress, setIsPlaying, showControls]);
  const _onSeek = useCallback(e => {
    const diff = e.nativeEvent.pageX - seekTouchStart.current;
    const ratio = 100 / seekBarWidth.current;
    const newProgress = seekProgressStart.current + ratio * diff / 100;
    const fixedProgress = Math.min(Math.max(newProgress, 0), 1);
    onSeeking(fixedProgress);
    setProgress(fixedProgress);
  }, [onSeeking]);
  return /*#__PURE__*/_jsxs(View, {
    style: [styles.seekBar, seekBarCustomStyles, fullWidth && styles.seekBarFullWidth, fullWidth && seekBarFullWidthCustomStyles],
    onLayout: _onSeekBarLayout,
    children: [/*#__PURE__*/_jsx(View, {
      style: [!isNaN(progress ?? 0) ? {
        flexGrow: progress ?? 0
      } : null, styles.seekBarProgress, seekBarProgressCustomStyles]
    }), !fullWidth && !disableSeek && /*#__PURE__*/_jsx(View, {
      style: [styles.seekBarKnob, seekBarKnobCustomStyles, isSeeking && styles.seekBarKnobSeeking, isSeeking && seekBarKnobSeekingCustomStyles],
      hitSlop: {
        top: 20,
        bottom: 20,
        left: 10,
        right: 20
      },
      onStartShouldSetResponder: () => true,
      onMoveShouldSetResponder: () => true,
      onResponderGrant: _onSeekGrant,
      onResponderMove: _onSeek,
      onResponderRelease: _onSeekRelease,
      onResponderTerminate: _onSeekRelease
    }), /*#__PURE__*/_jsx(View, {
      style: [styles.seekBarBackground, !isNaN(progress) ? {
        flexGrow: 1 - progress
      } : null, seekBarBackgroundCustomStyles]
    })]
  });
}));
const styles = StyleSheet.create({
  seekBar: {
    alignItems: 'center',
    height: 30,
    flexGrow: 1,
    flexDirection: 'row',
    paddingHorizontal: 10,
    marginLeft: -10,
    marginRight: -5
  },
  seekBarFullWidth: {
    marginLeft: 0,
    marginRight: 0,
    paddingHorizontal: 0,
    marginTop: -3,
    height: 3
  },
  seekBarProgress: {
    height: 3,
    backgroundColor: '#F00'
  },
  seekBarKnob: {
    width: 20,
    height: 20,
    marginHorizontal: -8,
    marginVertical: -10,
    borderRadius: 10,
    backgroundColor: '#F00',
    transform: [{
      scale: 0.8
    }],
    zIndex: 1
  },
  seekBarKnobSeeking: {
    transform: [{
      scale: 1
    }]
  },
  seekBarBackground: {
    backgroundColor: 'rgba(255, 255, 255, 0.5)',
    height: 3
  }
});
//# sourceMappingURL=Seekbar.js.map