@zezosoft/zezo-ott-react-native-video-player/lib/module/AdsPlayer/MediaControls/AdBottomControls.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, useCallback, useMemo } from 'react';
import { Animated, StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { scale, moderateScale } from 'react-native-size-matters';
import { RFValue } from 'react-native-responsive-fontsize';
import { ExternalLink } from 'lucide-react-native';
import { useAdsPlayerStore } from "../store/adsPlayerStore.js";
import { useAdControls } from "./AdMediaControlsProvider.js";
import { useAdControlsAutoHide } from "../utils/useAdControlsAutoHide.js";
import ProgressBar from "../../VideoPlayer/components/ProgressBar.js";
import { handleAdClickThrough } from "../utils/controls.js";
import { resetAdState } from "../utils/adStateReset.js";
import { useAdTracking } from "../utils/useAdTracking.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const AdBottomControls = () => {
  const currentAd = useAdsPlayerStore(state => state.currentAd);
  const adCurrentTime = useAdsPlayerStore(state => state.adCurrentTime);
  const adDuration = useAdsPlayerStore(state => state.adDuration);
  const {
    onAdSkip,
    onAdTracking
  } = useAdControls();
  const fadeAnim = useAdControlsAutoHide();
  const {
    trackAdSkip,
    trackAdClick
  } = useAdTracking({
    onAdTracking
  });
  const shouldShowSkipButton = useMemo(() => currentAd?.skippable && currentAd.skipAfter > 0 && adCurrentTime >= currentAd.skipAfter, [currentAd?.skippable, currentAd?.skipAfter, adCurrentTime]);

  // Memoize animated style
  const animatedOpacityStyle = useMemo(() => ({
    opacity: fadeAnim
  }), [fadeAnim]);
  const handleSkip = useCallback(() => {
    if (!currentAd) return;
    trackAdSkip(currentAd);
    onAdSkip?.(currentAd);
    resetAdState();
  }, [currentAd, onAdSkip, trackAdSkip]);
  const handleClickThrough = useCallback(() => {
    if (currentAd) {
      trackAdClick(currentAd);
      handleAdClickThrough(currentAd, onAdTracking);
    }
  }, [currentAd, onAdTracking, trackAdClick]);
  if (!currentAd) {
    return null;
  }
  return /*#__PURE__*/_jsxs(View, {
    style: bottomControlsStyles.container,
    children: [currentAd.clickThroughUrl && /*#__PURE__*/_jsx(Animated.View, {
      style: animatedOpacityStyle,
      pointerEvents: "box-none",
      children: /*#__PURE__*/_jsx(View, {
        pointerEvents: "auto",
        children: /*#__PURE__*/_jsx(TouchableOpacity, {
          style: bottomControlsStyles.metadataContainer,
          onPress: handleClickThrough,
          activeOpacity: 0.7,
          children: /*#__PURE__*/_jsxs(View, {
            style: bottomControlsStyles.metadataContent,
            children: [/*#__PURE__*/_jsxs(View, {
              style: bottomControlsStyles.metadataTextContainer,
              children: [currentAd.title && /*#__PURE__*/_jsx(Text, {
                style: bottomControlsStyles.metadataTitle,
                numberOfLines: 1,
                ellipsizeMode: "tail",
                children: currentAd.title
              }), currentAd.description && /*#__PURE__*/_jsx(Text, {
                style: bottomControlsStyles.metadataDesc,
                numberOfLines: 2,
                ellipsizeMode: "tail",
                children: currentAd.description
              })]
            }), /*#__PURE__*/_jsx(View, {
              style: bottomControlsStyles.clickIndicator,
              children: /*#__PURE__*/_jsx(ExternalLink, {
                size: scale(14),
                color: "#fff"
              })
            })]
          })
        })
      })
    }), /*#__PURE__*/_jsx(Animated.View, {
      style: animatedOpacityStyle,
      children: /*#__PURE__*/_jsx(ProgressBar, {
        duration: adDuration,
        currentTime: adCurrentTime,
        bufferedTime: adDuration,
        disabled: true,
        height: moderateScale(3)
      })
    }), shouldShowSkipButton && /*#__PURE__*/_jsx(View, {
      pointerEvents: "auto",
      children: /*#__PURE__*/_jsx(TouchableOpacity, {
        onPress: handleSkip,
        style: bottomControlsStyles.skipButton,
        activeOpacity: 0.7,
        children: /*#__PURE__*/_jsx(Text, {
          style: bottomControlsStyles.skipButtonText,
          children: "Skip Ad"
        })
      })
    })]
  });
};
const bottomControlsStyles = StyleSheet.create({
  container: {
    position: 'relative',
    bottom: 0,
    zIndex: 1
  },
  metadataContainer: {
    backgroundColor: 'rgba(21, 21, 21, 0.95)',
    borderRadius: moderateScale(6),
    overflow: 'hidden',
    marginBottom: moderateScale(5),
    maxWidth: moderateScale(200),
    borderWidth: 1,
    borderColor: 'rgba(174, 174, 174, 0.12)'
  },
  metadataContent: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: moderateScale(5)
  },
  metadataTextContainer: {
    flex: 1,
    marginRight: moderateScale(4),
    minWidth: 0
  },
  metadataTitle: {
    color: '#FFFFFF',
    fontSize: RFValue(10),
    fontWeight: '400',
    marginBottom: moderateScale(0.5),
    letterSpacing: 0.1
  },
  metadataDesc: {
    color: 'rgba(255, 255, 255, 0.7)',
    fontSize: RFValue(9),
    lineHeight: RFValue(12)
  },
  clickIndicator: {
    width: moderateScale(20),
    height: moderateScale(20),
    borderRadius: moderateScale(10),
    backgroundColor: 'rgba(255, 255, 255, 0.20)',
    justifyContent: 'center',
    alignItems: 'center'
  },
  skipButton: {
    position: 'absolute',
    right: moderateScale(2),
    bottom: moderateScale(25),
    backgroundColor: 'rgba(21, 21, 21, 0.95)',
    paddingHorizontal: moderateScale(15),
    paddingVertical: moderateScale(7),
    borderRadius: moderateScale(14),
    borderWidth: 1,
    borderColor: 'rgba(255, 255, 255, 0.20)'
  },
  skipButtonText: {
    color: '#fff',
    fontSize: RFValue(12),
    fontWeight: '600'
  }
});
export default /*#__PURE__*/memo(AdBottomControls);
//# sourceMappingURL=AdBottomControls.js.map