@zezosoft/zezo-ott-react-native-video-player/lib/module/AdsPlayer/MediaControls/AdTopControls.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 React, { memo, useMemo } from 'react';
import { Animated, StyleSheet, Text, TouchableOpacity, View, Platform } from 'react-native';
import { moderateScale } from 'react-native-size-matters';
import { RFValue } from 'react-native-responsive-fontsize';
import { X } from 'lucide-react-native';
import { useVideoPlayerStore } from "../../VideoPlayer/store/videoPlayerStore.js";
import { useAdsPlayerStore } from "../store/adsPlayerStore.js";
import { useAdControlsAutoHide } from "../utils/useAdControlsAutoHide.js";
import { formatTime } from "../../VideoPlayer/utils/index.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const AdTopControls = ({
  onClose
}) => {
  const controlsVisible = useVideoPlayerStore(state => state.controlsVisible);
  const currentAd = useAdsPlayerStore(state => state.currentAd);
  const adCurrentTime = useAdsPlayerStore(state => state.adCurrentTime);
  const fadeAnim = useAdControlsAutoHide();

  // Memoize styles to avoid recalculation
  const adLabelContainerStyle = useMemo(() => [styles.adLabelContainer, controlsVisible ? styles.adLabelContainerVisible : styles.adLabelContainerHidden], [controlsVisible]);
  const adBadgeStyle = useMemo(() => [styles.adBadge, controlsVisible ? styles.adBadgeVisible : styles.adBadgeHidden], [controlsVisible]);
  const closeButtonStyle = useMemo(() => [styles.closeButtonContainer, {
    opacity: fadeAnim
  }], [fadeAnim]);
  return /*#__PURE__*/_jsxs(View, {
    style: styles.container,
    children: [currentAd && /*#__PURE__*/_jsx(Animated.View, {
      style: adLabelContainerStyle,
      children: /*#__PURE__*/_jsxs(View, {
        style: adBadgeStyle,
        children: [/*#__PURE__*/_jsx(View, {
          style: styles.adLabelWrapper,
          children: /*#__PURE__*/_jsx(Text, {
            style: styles.adLabelText,
            children: "Ad"
          })
        }), /*#__PURE__*/_jsx(View, {
          style: styles.separator
        }), /*#__PURE__*/_jsx(Text, {
          style: styles.adTimeText,
          children: formatTime(adCurrentTime)
        })]
      })
    }), /*#__PURE__*/_jsx(Animated.View, {
      style: closeButtonStyle,
      children: /*#__PURE__*/_jsx(TouchableOpacity, {
        onPress: onClose,
        style: styles.closeButton,
        activeOpacity: 0.7,
        children: /*#__PURE__*/_jsx(View, {
          style: styles.closeButtonBackground,
          children: /*#__PURE__*/_jsx(X, {
            size: moderateScale(22),
            color: "#fff",
            strokeWidth: 2.5
          })
        })
      })
    })]
  });
};
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    marginTop: moderateScale(8),
    paddingHorizontal: moderateScale(10),
    paddingBottom: 0
  },
  adLabelContainer: {
    flex: 1,
    alignItems: 'flex-start'
  },
  adLabelContainerVisible: {
    opacity: 1
  },
  adLabelContainerHidden: {
    opacity: 0.95
  },
  adBadge: {
    flexDirection: 'row',
    alignItems: 'center',
    borderRadius: moderateScale(8),
    paddingHorizontal: moderateScale(5),
    paddingVertical: moderateScale(3),
    borderWidth: 1
  },
  adBadgeVisible: {
    backgroundColor: 'rgba(0, 0, 0, 0.85)',
    borderColor: 'rgba(255, 255, 255, 0.2)',
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: {
          width: 0,
          height: 2
        },
        shadowOpacity: 0.4,
        shadowRadius: 5
      },
      android: {
        elevation: 5
      }
    })
  },
  adBadgeHidden: {
    backgroundColor: 'rgba(0, 0, 0, 0.9)',
    borderColor: 'rgba(255, 255, 255, 0.15)',
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: {
          width: 0,
          height: 2
        },
        shadowOpacity: 0.3,
        shadowRadius: 4
      },
      android: {
        elevation: 4
      }
    })
  },
  adLabelWrapper: {
    backgroundColor: 'rgb(255, 255, 255)',
    borderRadius: moderateScale(3),
    paddingHorizontal: moderateScale(5),
    paddingVertical: moderateScale(1)
  },
  adLabelText: {
    color: 'red',
    fontSize: RFValue(10),
    fontWeight: '700',
    letterSpacing: 0.1,
    textTransform: 'uppercase'
  },
  separator: {
    width: 1,
    height: moderateScale(12),
    backgroundColor: 'rgba(255, 255, 255, 0.3)',
    marginHorizontal: moderateScale(5)
  },
  adTimeText: {
    color: '#fff',
    fontSize: RFValue(13),
    fontWeight: '700',
    fontVariant: ['tabular-nums'],
    letterSpacing: 0.3,
    minWidth: moderateScale(40)
  },
  closeButtonContainer: {
    justifyContent: 'flex-end',
    alignItems: 'flex-end'
  },
  closeButton: {
    justifyContent: 'center',
    alignItems: 'center',
    padding: moderateScale(2)
  },
  closeButtonBackground: {
    width: moderateScale(32),
    height: moderateScale(32),
    borderRadius: moderateScale(16),
    backgroundColor: 'rgba(0, 0, 0, 0.6)',
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: 1,
    borderColor: 'rgba(255, 255, 255, 0.2)',
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: {
          width: 0,
          height: 2
        },
        shadowOpacity: 0.25,
        shadowRadius: 3
      },
      android: {
        elevation: 3
      }
    })
  }
});
export default /*#__PURE__*/memo(AdTopControls);
//# sourceMappingURL=AdTopControls.js.map