@zezosoft/zezo-ott-react-native-video-player/lib/module/AdsPlayer/MediaControls/AdMediaControls.js

Production-ready React Native OTT video player library for Android & iOS. Features: playlists, seasons, auto-next playback, subtitles (SRT/VTT), custom theming, analytics tracking, fullscreen mode, gesture controls, ads player (pre-roll/mid-roll/post-roll

"use strict";

import { memo, useMemo } from 'react';
import { Animated, StyleSheet, View } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { moderateScale } from 'react-native-size-matters';
import { useAdControlsAutoHide } from "../utils/useAdControlsAutoHide.js";
import AdTopControls from "./AdTopControls.js";
import AdMiddleControls from "./AdMiddleControls.js";
import AdBottomControls from "./AdBottomControls.js";
import globalStyles from "../../VideoPlayer/styles/globalStyles.js";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const AdMediaControls = ({
  onClose,
  insets
}) => {
  const {
    top,
    bottom,
    left,
    right
  } = insets;
  const fadeAnim = useAdControlsAutoHide();

  // Memoize container style to avoid recalculation
  const containerStyle = useMemo(() => ({
    ...styles.container,
    paddingTop: top,
    paddingBottom: bottom - moderateScale(5),
    paddingLeft: left + moderateScale(15),
    paddingRight: right + moderateScale(15)
  }), [top, bottom, left, right]);

  // Memoize gradient overlay styles
  const topGradientStyle = useMemo(() => [styles.topGradientOverlay, {
    opacity: fadeAnim,
    top: -top
  }], [fadeAnim, top]);
  const bottomGradientStyle = useMemo(() => [styles.bottomGradientOverlay, {
    opacity: fadeAnim,
    bottom: -(bottom - moderateScale(5))
  }], [fadeAnim, bottom]);
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(Animated.View, {
      style: topGradientStyle,
      pointerEvents: "none",
      children: /*#__PURE__*/_jsx(LinearGradient, {
        colors: ['rgba(0, 0, 0, 0.4)', 'transparent', 'transparent'],
        locations: [0, 0.4, 1],
        style: globalStyles.absoluteFill,
        pointerEvents: "none"
      })
    }), /*#__PURE__*/_jsxs(View, {
      style: containerStyle,
      children: [/*#__PURE__*/_jsx(AdTopControls, {
        onClose: onClose
      }), /*#__PURE__*/_jsx(AdMiddleControls, {}), /*#__PURE__*/_jsx(AdBottomControls, {})]
    }), /*#__PURE__*/_jsx(Animated.View, {
      style: bottomGradientStyle,
      pointerEvents: "none",
      children: /*#__PURE__*/_jsx(LinearGradient, {
        colors: ['transparent', 'transparent', 'rgba(0, 0, 0, 0.5)'],
        locations: [0, 0.4, 1],
        style: globalStyles.absoluteFill,
        pointerEvents: "none"
      })
    })]
  });
};
export default /*#__PURE__*/memo(AdMediaControls);
const styles = StyleSheet.create({
  container: {
    ...globalStyles.absoluteFill,
    justifyContent: 'space-between'
  },
  topGradientOverlay: {
    position: 'absolute',
    left: 0,
    right: 0,
    height: moderateScale(150),
    zIndex: 0
  },
  bottomGradientOverlay: {
    position: 'absolute',
    left: 0,
    right: 0,
    height: moderateScale(150),
    zIndex: 0
  }
});
//# sourceMappingURL=AdMediaControls.js.map