react-native-video-player/lib/commonjs/controls/ControlsAnimatedWrapper.js

A <VideoPlayer /> component for React Native with controls

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.AnimatedWrapper = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _jsxRuntime = require("react/jsx-runtime");
const AnimatedWrapper = exports.AnimatedWrapper = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(0, _react.forwardRef)(({
  animationDuration,
  children,
  customStylesControls
}, ref) => {
  const animationValue = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
  const runControlsAnimation = (0, _react.useCallback)((toValue, callback) => {
    _reactNative.Animated.timing(animationValue, {
      toValue,
      duration: animationDuration,
      useNativeDriver: true
    }).start(callback);
  }, [animationDuration, animationValue]);
  (0, _react.useImperativeHandle)(ref, () => ({
    runControlsAnimation
  }));
  const controlsTranslateY = animationValue.interpolate({
    inputRange: [0, 1],
    outputRange: [48, 0]
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
    style: [styles.controls, customStylesControls, {
      transform: [{
        translateY: controlsTranslateY
      }]
    }],
    children: children
  });
}));
const styles = _reactNative.StyleSheet.create({
  controls: {
    backgroundColor: 'rgba(0, 0, 0, 0.6)',
    height: 48,
    marginTop: -48,
    flexDirection: 'row',
    alignItems: 'center'
  }
});
//# sourceMappingURL=ControlsAnimatedWrapper.js.map